Feat: 검색영역 아이콘 적용

WePlanPlans · Dec 29, 2023 · 30bb6b8 · 30bb6b8
1 parent 676509f
commit 30bb6b8
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/src/assets/images/Search.svg b/src/assets/images/Search.svg
diff --git a/src/components/search/SearchInput.tsx b/src/components/search/SearchInput.tsx
@@ -1,11 +1,20 @@
+import { useNavigate } from 'react-router-dom';
+import { ReactComponent as LeftIcon } from '@assets/images/Left.svg';
+import { ReactComponent as SearchIcon } from '@assets/images/Search.svg';
+
 export const SearchInput = () => {
+  const navigate = useNavigate();
+
+  const goBack = () => {
+    navigate(-1);
+  };
   return (
     <>
       <div className="relative flex items-center ">
-        <button className=" backIcon bg-gray5 mr-2.5 h-[24px] w-[24px]" />
-        <div className="absolute left-[52px] top-1/2 h-[12px] w-[12px] -translate-y-1/2 transform bg-black" />
+        <LeftIcon className="cursor-pointer" onClick={goBack} />
+        <SearchIcon className="absolute left-[36px] top-1/2  -translate-y-1/2 transform" />
         <input
-          className="bg-gray1 body1 ml-2.5 h-[40px] w-full items-center rounded-lg pl-[32px] pr-2.5 focus:outline-none"
+          className="body1 ml-2.5 h-[40px] w-full items-center rounded-lg bg-gray1 pl-[32px] pr-2.5 focus:outline-none"
           onClick={() => {}}
           placeholder="어디로 떠나세요?"></input>
       </div>

diff --git a/src/components/search/StartSearchBtn.tsx b/src/components/search/StartSearchBtn.tsx
@@ -1,4 +1,5 @@
 import { useNavigate } from 'react-router-dom';
+import { ReactComponent as SearchIcon } from '@assets/images/Search.svg';
 
 export const StartSearchButton = () => {
   const navigate = useNavigate();
@@ -11,8 +12,8 @@ export const StartSearchButton = () => {
     <button
       className="flex h-[40px] w-full items-center border-b-2 border-solid px-1"
       onClick={goToSearch}>
-      <div className=" searchIcon mr-2.5 h-[12px] w-[12px]" />
-      <span className="text-gray4 body1">어디로 떠나세요?</span>
+      <SearchIcon className="  mr-2.5" />
+      <span className="body1 text-gray4">어디로 떠나세요?</span>
     </button>
   );
 };