design: 필터 적용 시 border white 적용

imddoy · Dec 3, 2024 · 0c53546 · 0c53546
1 parent 776b6fe
commit 0c53546
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/src/pages/ticketholderlist/TicketHolderList.tsx b/src/pages/ticketholderlist/TicketHolderList.tsx
@@ -403,6 +403,9 @@ const TicketHolderList = () => {
                 handleInputChange={handleInputChange}
                 searchWord={searchWord}
                 status={status}
+                isFilter={
+                  filterList.scheduleNumber.length > 0 || filterList.bookingStatus.length > 0
+                }
               />
               {status === "DEFAULT" && (
                 <SelectedChips

diff --git a/src/pages/ticketholderlist/components/searchBar/SearchBar.styled.ts b/src/pages/ticketholderlist/components/searchBar/SearchBar.styled.ts
@@ -22,13 +22,13 @@ export const SearchBar = styled.input`
   border-radius: 4rem;
 `;
 
-export const FilterBtn = styled(BtnFilter)`
+export const FilterBtn = styled(BtnFilter)<{ $isFilter: boolean }>`
   width: 4.8rem;
   height: 4.8rem;
   margin-left: 1.2rem;
 
   background-color: ${({ theme }) => theme.colors.gray_800};
-  border: 0.1rem solid;
-  border-color: ${({ theme }) => theme.colors.gray_700};
+  border: 0.1rem solid
+    ${({ theme, $isFilter }) => ($isFilter ? theme.colors.white : theme.colors.gray_700)};
   border-radius: 50%;
 `;
diff --git a/src/pages/ticketholderlist/components/searchBar/SearchBar.tsx b/src/pages/ticketholderlist/components/searchBar/SearchBar.tsx
@@ -6,6 +6,7 @@ interface SearchBarProps {
   searchWord: string;
   handleFilterSheet: () => void;
   handleInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  isFilter: boolean;
 }
 
 // TODO: 필터 적용되었을 때 아웃라인 색상 적용 -> 기능 붙일 때 같이 하기
@@ -14,6 +15,7 @@ const SearchBar = ({
   status,
   handleInputChange,
   searchWord,
+  isFilter,
 }: SearchBarProps) => {
   return (
     <S.SearchBarWrapper>
@@ -23,7 +25,7 @@ const SearchBar = ({
         value={searchWord}
         onChange={handleInputChange}
       ></S.SearchBar>
-      {status === "DEFAULT" && <S.FilterBtn onClick={handleFilterSheet} />}
+      {status === "DEFAULT" && <S.FilterBtn onClick={handleFilterSheet} $isFilter={isFilter} />}
     </S.SearchBarWrapper>
   );
 };