design: 검색 바 내 누락된 아이콘 추가

imddoy · Dec 9, 2024 · 9d72603 · 9d72603
1 parent eed8389
commit 9d72603
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 14 deletions.
diff --git a/src/assets/svgs/IconSearch.tsx b/src/assets/svgs/IconSearch.tsx
@@ -3,7 +3,7 @@ import type { SVGProps } from "react";
 const SvgIconSearch = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>
     <path
-      fill="#F4F4F4"
+      fill="current"
       fillRule="evenodd"
       d="M6.964 6.964a5 5 0 1 1 7.072 7.071 5 5 0 0 1-7.072-7.07m-1.06-1.06a6.5 6.5 0 0 0 8.631 9.692l3.934 3.934a.75.75 0 1 0 1.06-1.06l-3.934-3.934a6.5 6.5 0 0 0-9.691-8.632"
       clipRule="evenodd"

diff --git a/src/pages/ticketholderlist/components/searchBar/SearchBar.styled.ts b/src/pages/ticketholderlist/components/searchBar/SearchBar.styled.ts
@@ -1,25 +1,43 @@
 import styled from "styled-components";
-import { BtnFilter } from "@assets/svgs";
+import { BtnFilter, IconSearch } from "@assets/svgs";
 
 export const SearchBarWrapper = styled.section`
   display: flex;
   flex-direction: row;
   align-items: center;
   width: 32.7rem;
 `;
-
-export const SearchBar = styled.input`
+export const SearchBarLayout = styled.section`
+  display: flex;
   flex-grow: 1;
   height: 4.8rem;
-  padding: 1.3rem;
+  padding: 1.2rem 1.3rem;
 
-  color: ${({ theme }) => theme.colors.white};
-  ${({ theme }) => theme.fonts["body2-normal-medi"]};
 
   background-color: ${({ theme }) => theme.colors.gray_800};
   border: 0.1rem solid;
   border-color: ${({ theme }) => theme.colors.gray_700};
   border-radius: 4rem;
+
+  align-items: center;
+`;
+
+export const SearchIcon = styled(IconSearch)`
+  width: 2.4rem;
+  height: 2.4rem;
+
+  path {
+    fill: ${({ theme }) => theme.colors.gray_300};
+  }
+`;
+
+export const SearchBar = styled.input`
+  height: 2.4rem;
+
+  color: ${({ theme }) => theme.colors.white};
+  ${({ theme }) => theme.fonts["body2-normal-medi"]};
+
+  background-color: ${({ theme }) => theme.colors.gray_800};
 `;
 
 export const FilterBtn = styled(BtnFilter)<{ $isFilter: boolean }>`

diff --git a/src/pages/ticketholderlist/components/searchBar/SearchBar.tsx b/src/pages/ticketholderlist/components/searchBar/SearchBar.tsx
@@ -9,7 +9,6 @@ interface SearchBarProps {
   isFilter: boolean;
 }
 
-// TODO: 필터 적용되었을 때 아웃라인 색상 적용 -> 기능 붙일 때 같이 하기
 const SearchBar = ({
   handleFilterSheet,
   status,
@@ -19,12 +18,15 @@ const SearchBar = ({
 }: SearchBarProps) => {
   return (
     <S.SearchBarWrapper>
-      <S.SearchBar
-        type="text"
-        placeholder="예매자를 검색해보세요."
-        value={searchWord}
-        onChange={handleInputChange}
-      ></S.SearchBar>
+      <S.SearchBarLayout>
+        <S.SearchIcon />
+        <S.SearchBar
+          type="text"
+          placeholder="예매자를 검색해보세요."
+          value={searchWord}
+          onChange={handleInputChange}
+        ></S.SearchBar>
+      </S.SearchBarLayout>
       {status === "DEFAULT" && <S.FilterBtn onClick={handleFilterSheet} $isFilter={isFilter} />}
     </S.SearchBarWrapper>
   );