design: 필터링 영역 디자인 수정

woowacourse-teams · Sep 17, 2023 · 99ec7f1 · 99ec7f1
1 parent d1ab5b3
commit 99ec7f1
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/frontend/src/components/search/SearchBox/SearchBox.style.ts b/frontend/src/components/search/SearchBox/SearchBox.style.ts
@@ -72,15 +72,15 @@ export const ResultList = styled.ul<{ $maxHeight: string }>`
   max-height: ${(props) => props.$maxHeight};
 `;
 
-export const ResultMessage = styled.p<{ $height: string }>`
+export const ResultMessage = styled.p`
   display: flex;
   flex-direction: column;
   row-gap: 5px;
   align-items: center;
   justify-content: center;
 
   width: 100%;
-  height: ${(props) => props.$height};
+  padding: 8px 0;
 
   color: ${(props) => props.theme.color.sub};
   text-align: center;

diff --git a/frontend/src/components/search/SearchBox/index.tsx b/frontend/src/components/search/SearchBox/index.tsx
@@ -123,7 +123,7 @@ const SearchBox = (props: SearchBoxProps) => {
                 </ResultItem>
               ))}
             </ResultList>
-            <ResultMessage $height={height}>
+            <ResultMessage>
               {searchResults?.length ? '찾는 식물이 없으신가요?' : MESSAGE.noSearchResult}
               <StyledLink to={URL_PATH.newDictionaryPlantRequest} state={searchName}>
                 등록 신청하기

diff --git a/frontend/src/pages/GardenPostList/GardenPostListHeader/GardenPostListHeader.style.ts b/frontend/src/pages/GardenPostList/GardenPostListHeader/GardenPostListHeader.style.ts
@@ -23,7 +23,10 @@ export const FilterArea = styled.div`
   padding-left: 16px;
 `;
 
-export const Name = styled.p`
+export const FilterTag = styled.p`
+  display: flex;
+  column-gap: 4px;
+  align-items: center;
   font-size: 1.4rem;
 `;
 

diff --git a/frontend/src/pages/GardenPostList/GardenPostListHeader/index.tsx b/frontend/src/pages/GardenPostList/GardenPostListHeader/index.tsx
@@ -1,6 +1,6 @@
 import type { DictionaryPlantNameSearchResult } from 'types/dictionaryPlant';
 import SearchBox from 'components/search/SearchBox';
-import { DeleteFilterButton, Name, Wrapper, FilterArea } from './GardenPostListHeader.style';
+import { DeleteFilterButton, FilterTag, Wrapper, FilterArea } from './GardenPostListHeader.style';
 
 interface GardenPostListHeaderProps {
   selectedDictionaryPlant: DictionaryPlantNameSearchResult | null;
@@ -18,10 +18,10 @@ const GardenPostListHeader = ({
       <SearchBox onResultClick={select} height="36px" fontSize="1.6rem" />
       <FilterArea>
         {selectedDictionaryPlant && (
-          <Name>
+          <FilterTag>
             {selectedDictionaryPlant.name}
             <DeleteFilterButton onClick={clear}>✕</DeleteFilterButton>
-          </Name>
+          </FilterTag>
         )}
       </FilterArea>
     </Wrapper>