From 9d726037ce6a6333563f2517659a7e3e5e50470a Mon Sep 17 00:00:00 2001
From: Sinji <sinzi031012@naver.com>
Date: Mon, 9 Dec 2024 23:06:19 +0900
Subject: [PATCH] =?UTF-8?q?design:=20=EA=B2=80=EC=83=89=20=EB=B0=94=20?=
 =?UTF-8?q?=EB=82=B4=20=EB=88=84=EB=9D=BD=EB=90=9C=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=EC=BD=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svgs/IconSearch.tsx                |  2 +-
 .../components/searchBar/SearchBar.styled.ts  | 30 +++++++++++++++----
 .../components/searchBar/SearchBar.tsx        | 16 +++++-----
 3 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/assets/svgs/IconSearch.tsx b/src/assets/svgs/IconSearch.tsx
index 9ee48803..6305f24d 100644
--- 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
index 613fb5bf..afd067f5 100644
--- a/src/pages/ticketholderlist/components/searchBar/SearchBar.styled.ts
+++ b/src/pages/ticketholderlist/components/searchBar/SearchBar.styled.ts
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { BtnFilter } from "@assets/svgs";
+import { BtnFilter, IconSearch } from "@assets/svgs";
 
 export const SearchBarWrapper = styled.section`
   display: flex;
@@ -7,19 +7,37 @@ export const SearchBarWrapper = styled.section`
   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
index ef1a41a2..88f66bf2 100644
--- 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>
   );