feat: 식품 필터 선택 후 선택한 필터 보여주는 기능 추가

frontend/src/components/@common/Header/UserProfile.tsx

@@ -1,6 +1,5 @@
 import { styled } from 'styled-components';
 
-import BottomDropIcon from '@/assets/svg/bottom_drop_icon.svg';
 import ZipgoLogo from '@/assets/svg/zipgo_logo_light.svg';
 import { usePetProfile } from '@/context/petProfile/PetProfileContext';
 import { useAuth } from '@/hooks/auth';
@@ -29,7 +28,6 @@ const UserProfile = () => {
         ) : (
           <RegisterPetText>여기를 눌러 반려견을 등록해주세요.</RegisterPetText>
         )}
-        <Chevron src={BottomDropIcon} alt="반려견 등록 화살표" />
       </UserInfoContainer>
     </Dialog.Trigger>
   ) : (
@@ -75,8 +73,3 @@ const Logo = styled.img`
   width: 11.3rem;
   height: 3.6rem;
 `;
-
-const Chevron = styled.img`
-  width: 1.2rem;
-  height: 0.6rem;
-`;

frontend/src/components/Food/BrandBlock/BrandBlock.tsx

@@ -95,7 +95,7 @@ const BrandBlock = (brandBlockProps: BrandBlockProps) => {
             {onResearchCenterTip && (
               <ToolTip
                 showBubbleOnly
-                content="반려동물 업계는 사료 품질과 판매량간의 상관관계가 없는데요, 마케팅 만으로는 살아남을 수 없기 때문에 역사가 오래됐는지가 중요한 지표랍니다!"
+                content="브랜드에 전용 연구센터가 있다는 것은 사후 AS에서도 단순히 교환 처리나 보상 처리를 하는 것이 아니라 안전성 검사, 독성 검사, 영양소 분석을 통해 문제의 원인까지 면밀히 파악해서 재발을 방지할 수 있는 능력까지 갖췄다는 것을 의미해요!"
                 title="왜 연구센터 여부가 중요한가요?"
                 left="-24.5rem"
                 edgeLeft="23.5rem"

frontend/src/components/Food/FilterBottomSheet/FilterBottomSheet.tsx

@@ -12,29 +12,33 @@ import type { KeywordEn } from '@/types/food/client';
 import { translateKeyword } from '@/utils/food';
 import { getComputedStyleOfSC } from '@/utils/styled-components';
 
+import FilterSelectionDisplay from '../FilterSelectionDisplay/FilterSelectionDisplay';
 import BrandFilterList from './BrandFilterList/BrandFilterList';
 import FunctionalityFilterList from './FunctionalityFilterList/FunctionalityFilterList';
 import MainIngredientsFilterList from './MainIngredientsFilterList/MainIngredientsFilterList';
 import NutritionStandardsFilterList from './NutritionStandardsFilterList/NutritionStandardsFilterList';
 
 const FilterBottomSheet = () => (
   <FoodFilterProvider>
-    <Dialog>
-      <Dialog.Trigger asChild>
-        <DialogTrigger type="button">
-          <FilterTriggerIcon src={SettingsIcon} alt="필터 버튼 아이콘" />
-          <span>필터</span>
-        </DialogTrigger>
-      </Dialog.Trigger>
-      <Dialog.Portal>
-        <QueryBoundary>
-          <Dialog.BackDrop />
-          <Dialog.Content asChild>
-            {({ openHandler }) => <KeywordContent toggleDialog={openHandler} />}
-          </Dialog.Content>
-        </QueryBoundary>
-      </Dialog.Portal>
-    </Dialog>
+    <FilterDialogAndFilterDisplayContainer>
+      <Dialog>
+        <Dialog.Trigger asChild>
+          <DialogTrigger type="button">
+            <FilterTriggerIcon src={SettingsIcon} alt="필터 버튼 아이콘" />
+            <span>필터</span>
+          </DialogTrigger>
+        </Dialog.Trigger>
+        <Dialog.Portal>
+          <QueryBoundary>
+            <Dialog.BackDrop />
+            <Dialog.Content asChild>
+              {({ openHandler }) => <KeywordContent toggleDialog={openHandler} />}
+            </Dialog.Content>
+          </QueryBoundary>
+        </Dialog.Portal>
+      </Dialog>
+      <FilterSelectionDisplay />
+    </FilterDialogAndFilterDisplayContainer>
   </FoodFilterProvider>
 );
 
@@ -117,6 +121,10 @@ const KeywordContent = (props: KeywordContentProps) => {
 
 export default FilterBottomSheet;
 
+const FilterDialogAndFilterDisplayContainer = styled.div`
+  display: flex;
+`;
+
 const Layout = styled.div`
   position: fixed;
   z-index: 1001;
@@ -141,6 +149,7 @@ const DialogTrigger = styled.button`
   gap: 0.4rem;
   align-items: center;
 
+  width: 8.8rem;
   padding: 1rem 1.6rem;
 
   background-color: transparent;

frontend/src/components/Food/FilterSelectionDisplay/FilterSelectionDisplay.tsx

@@ -0,0 +1,75 @@
+import { styled } from 'styled-components';
+
+import { useFilterSelectionDisplay } from '@/hooks/food/useFilterSelectionDisplay';
+import { KeywordEn } from '@/types/food/client';
+
+const FilterSelectionDisplay = () => {
+  const { filterListQueryString, removeFilter } = useFilterSelectionDisplay();
+
+  return (
+    <SelectedFilterList>
+      {Object.entries(filterListQueryString).map(([category, values]) =>
+        values.split(',').map(value => (
+          <SelectedFilterItem key={value}>
+            {value}
+            <FilterToggleButton
+              type="button"
+              aria-label={`${value}필터 선택 해제`}
+              onClick={() => removeFilter(category as KeywordEn, value)}
+            >
+              x
+            </FilterToggleButton>
+          </SelectedFilterItem>
+        )),
+      )}
+    </SelectedFilterList>
+  );
+};
+
+export default FilterSelectionDisplay;
+
+const SelectedFilterList = styled.ul`
+  scrollbar-width: none;
+
+  overflow-x: scroll;
+  display: flex;
+  gap: 0.4rem;
+  align-items: center;
+
+  width: calc(100% - 8.8rem - 1rem);
+  margin-left: 1rem;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+`;
+
+const SelectedFilterItem = styled.li`
+  overflow: hidden;
+  flex-shrink: 0;
+
+  height: 3.2rem;
+  padding: 0.4rem;
+
+  font-size: 1.2rem;
+  font-weight: 500;
+  line-height: 2.4rem;
+  color: ${({ theme }) => theme.color.grey400};
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const FilterToggleButton = styled.button`
+  cursor: pointer;
+
+  display: inline-block;
+
+  margin-left: 0.4rem;
+
+  color: ${({ theme }) => theme.color.grey300};
+
+  background: none;
+  border: none;
+`;

frontend/src/components/Food/FoodList/FoodList.tsx

@@ -1,6 +1,6 @@
 import { styled } from 'styled-components';
 
-import { useInfiniteFoodListScroll } from '@/hooks/food';
+import { useInfiniteFoodListScroll } from '@/hooks/food/useInfiniteFoodListScroll';
 
 import FoodItem from '../FoodItem/FoodItem';
 

frontend/src/components/FoodSelectionGuideBanner/FoodSelectionGuideBanner.tsx

@@ -75,6 +75,7 @@ const BannerWrapper = styled.div`
     font-weight: 500;
     line-height: 2.4rem;
     color: ${({ theme }) => theme.color.white};
+    letter-spacing: -0.7px;
 
     img {
       width: 100px;

frontend/src/context/food.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable no-spaced-func */
 import { createContext, useContext, useMemo } from 'react';
 
-import { useFoodListFilter } from '@/hooks/food';
+import { useFoodListFilter } from '@/hooks/food/useFoodListFilter';
 import type { KeywordEn } from '@/types/food/client';
 import { getValidProps, PropsWithRenderProps } from '@/utils/compound';
 

frontend/src/hooks/food/useFilterSelectionDisplay.ts

@@ -0,0 +1,33 @@
+import { KEYWORD_EN } from '@/constants/food';
+import { useFoodFilterContext } from '@/context/food';
+import { generateQueryString } from '@/router/routes';
+import { KeywordEn } from '@/types/food/client';
+
+import useEasyNavigate from '../@common/useEasyNavigate';
+import useValidQueryString from '../common/useValidQueryString';
+
+export const useFilterSelectionDisplay = () => {
+  const { replaceQueryString } = useEasyNavigate();
+  const { toggleFilter } = useFoodFilterContext();
+  const filterListQueryString = useValidQueryString(KEYWORD_EN);
+
+  const removeFilter = (category: KeywordEn, value: string) => {
+    let newFilterString;
+
+    if (filterListQueryString[category]?.includes(`,${value}`)) {
+      newFilterString = filterListQueryString[category]?.replace(`,${value}`, '');
+    } else if (filterListQueryString[category]?.includes(`${value},`)) {
+      newFilterString = filterListQueryString[category]?.replace(`${value},`, '');
+    } else newFilterString = filterListQueryString[category]?.replace(value, '');
+
+    const newQueryString = generateQueryString({
+      ...filterListQueryString,
+      [category]: newFilterString,
+    });
+
+    toggleFilter(category, value);
+    replaceQueryString(newQueryString, { exclude: [] });
+  };
+
+  return { filterListQueryString, removeFilter };
+};

frontend/src/hooks/food/useFoodListFilter.ts

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+
+import { initialSelectedFilterList } from '@/context/food';
+import type { KeywordEn } from '@/types/food/client';
+import { parseCheckList } from '@/utils/parseCheckList';
+
+export const useFoodListFilter = () => {
+  const [selectedFilterList, setSelectedFilterList] = useState(initialSelectedFilterList);
+
+  const parsedSelectedFilterList = parseCheckList(selectedFilterList);
+
+  const toggleFilter = (keyword: KeywordEn, filter: string) => {
+    const targetFilterList = structuredClone(selectedFilterList)[keyword];
+    const selected = targetFilterList.has(filter);
+
+    selected ? targetFilterList.delete(filter) : targetFilterList.add(filter);
+
+    setSelectedFilterList(prev => ({ ...prev, [keyword]: new Set(targetFilterList) }));
+  };
+
+  const resetSelectedFilterList = () => {
+    setSelectedFilterList(initialSelectedFilterList);
+  };
+
+  return { selectedFilterList, parsedSelectedFilterList, toggleFilter, resetSelectedFilterList };
+};

frontend/src/hooks/food.ts → frontend/src/hooks/food/useInfiniteFoodListScroll.ts

@@ -1,32 +1,8 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
-import { initialSelectedFilterList } from '@/context/food';
+import useValidQueryString from '@/hooks/common/useValidQueryString';
+import { useFoodListInfiniteQuery } from '@/hooks/query/food';
 import type { KeywordEn } from '@/types/food/client';
-import { parseCheckList } from '@/utils/parseCheckList';
-
-import useValidQueryString from './common/useValidQueryString';
-import { useFoodListInfiniteQuery } from './query/food';
-
-export const useFoodListFilter = () => {
-  const [selectedFilterList, setSelectedFilterList] = useState(initialSelectedFilterList);
-
-  const parsedSelectedFilterList = parseCheckList(selectedFilterList);
-
-  const toggleFilter = (keyword: KeywordEn, filter: string) => {
-    const targetFilterList = structuredClone(selectedFilterList)[keyword];
-    const selected = targetFilterList.has(filter);
-
-    selected ? targetFilterList.delete(filter) : targetFilterList.add(filter);
-
-    setSelectedFilterList(prev => ({ ...prev, [keyword]: new Set(targetFilterList) }));
-  };
-
-  const resetSelectedFilterList = () => {
-    setSelectedFilterList(initialSelectedFilterList);
-  };
-
-  return { selectedFilterList, parsedSelectedFilterList, toggleFilter, resetSelectedFilterList };
-};
 
 export const useInfiniteFoodListScroll = () => {
   const queries = useValidQueryString<KeywordEn>([

frontend/src/utils/getValidQueries.ts

@@ -1,7 +1,7 @@
 import { getArrayMutationMethod } from './getArrayMutationMethod';
 
 export const getValidQueries = <T extends string>(search: string, queryKeys: Readonly<T[]>) =>
-  search
+  decodeURIComponent(search)
     .replace(/^\?/, '')
     .split('&')
     .reduce<Partial<Record<T, string>>>((queries, keyValue, _, search) => {