Merge pull request #62 from FinalDoubleTen/hotfix-01

Hotfix: 검색창 아이콘 레이아웃 수정
WePlanPlans · Jan 4, 2024 · 81e0853 · 81e0853
2 parents 617b438 + ea7c6f9
commit 81e0853
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx
@@ -517,8 +517,8 @@ export const ChatIcon: React.FC<IconProps> = ({
 };
 
 export const CloseIcon: React.FC<IconProps> = ({
-  size = 25,
-  color = 'black',
+  size = 16,
+  color = 'white',
   fill = 'none',
 }) => {
   return (
@@ -662,7 +662,7 @@ export const DownIcon: React.FC<IconProps> = ({
 };
 
 export const SearchIcon: React.FC<IconProps> = ({
-  size = 25,
+  size = 16,
   color = 'black',
   fill = 'none',
 }) => {

diff --git a/src/components/search/SearchInput.tsx b/src/components/search/SearchInput.tsx
@@ -1,5 +1,4 @@
-import { CloseIcon } from '@components/common/icons/Icons';
-import { LeftIcon } from '@components/common/icons/Icons';
+import { BackIcon, CloseIcon } from '@components/common/icons/Icons';
 import { SearchIcon } from '@components/common/icons/Icons';
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -36,20 +35,25 @@ const SearchInput = () => {
   return (
     <>
       <div className="relative mb-3 flex items-center">
-        <LeftIcon className="cursor-pointer" onClick={goBack} />
-        <SearchIcon className="absolute left-[36px] top-1/2  -translate-y-1/2 transform" />
+        <div className="cursor-pointer" onClick={goBack}>
+          <BackIcon />
+        </div>
+        <div className="absolute left-[36px] top-1/2  -translate-y-1/2 transform">
+          <SearchIcon />
+        </div>
         <input
-          className="body1 ml-2.5 h-[40px] w-full items-center rounded-lg bg-gray1 pl-[32px] pr-2.5 focus:outline-none"
+          className="body1 ml-5 h-[40px] w-full items-center rounded-lg bg-gray1 pl-[32px] pr-2.5 focus:outline-none"
           placeholder="어디로 떠나세요?"
           value={inputValue}
           onChange={handleChange}
           onKeyPress={handleKeyPress}
         />
         {inputValue && (
-          <CloseIcon
+          <div
             className="absolute right-2 top-1/2 -translate-y-1/2 transform cursor-pointer"
-            onClick={clearInput}
-          />
+            onClick={clearInput}>
+            <CloseIcon />
+          </div>
         )}
       </div>
     </>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -16,7 +16,6 @@ export default {
         gray6: '#38393C',
         gray7: '#1E1E1E',
         red: '#F00',
-        main1: '#062139',
       },
     },
   },