Merge pull request #154 from YAPP-Github/feature/PRODUCT-275

feat: 위치, 분위기, 실용도 필터 생성 (#153)

Author: wkdtnqls0506

src/app/(cheer)/cheer/_components/CheerCard/CheerCard.tsx

@@ -18,9 +18,22 @@ import { CHEER_CARD_CONSTANTS, SLIDER_SETTINGS } from "../../constants";
 import { useExpandableText } from "../../hooks";
 import * as styles from "./CheerCard.css";
 
-export const CheerCard = ({ category }: { category: string }) => {
+export const CheerCard = ({
+  category,
+  location,
+  tag,
+}: {
+  category: string;
+  location: string[];
+  tag: string[];
+}) => {
   const { data } = useQuery(
-    cheerListQueryOptions({ size: CHEER_CARD_CONSTANTS.DEFAULT_SIZE, category })
+    cheerListQueryOptions({
+      size: CHEER_CARD_CONSTANTS.DEFAULT_SIZE,
+      category,
+      location,
+      tag,
+    })
   );
 
   if (!data?.cheers || data.cheers.length === 0) {

src/app/(cheer)/cheer/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { ChipFilter, useChipFilter } from "@/app/_shared/ChipFilter";
 import { Bleed } from "@/components/ui/Bleed";
 import { FoodCategories } from "@/components/ui/FoodCategory";
 import { Spacer } from "@/components/ui/Spacer";
@@ -13,6 +14,8 @@ export default function CheerPage() {
   const { categories, selectedCategory, handleSelectCategory } =
     useFoodCategory("/cheer");
 
+  const { selectedFilters } = useChipFilter();
+
   return (
     <>
       <MyCheerCard />
@@ -27,12 +30,19 @@ export default function CheerPage() {
         />
       </Bleed>
 
-      <div>서울 전체, 분위기, 실용도 chip이 들어갈 자리</div>
+      <ChipFilter />
 
       <Spacer size={16} />
 
       <Bleed inline={20}>
-        <CheerCard category={selectedCategory.name} />
+        <CheerCard
+          category={selectedCategory.name}
+          location={selectedFilters.locations}
+          tag={[
+            ...selectedFilters.atmosphereTags,
+            ...selectedFilters.utilityTags,
+          ]}
+        />
       </Bleed>
       <RegisterFloatingButton />
     </>

src/app/_shared/ChipFilter/ChipFilter.css.ts

@@ -0,0 +1,11 @@
+import { style } from "@vanilla-extract/css";
+
+export const container = style({
+  overflowX: "auto",
+
+  selectors: {
+    "&::-webkit-scrollbar": {
+      display: "none",
+    },
+  },
+});

src/app/_shared/ChipFilter/ChipFilter.tsx

@@ -0,0 +1,76 @@
+import { useState } from "react";
+
+import { FilterBottomSheet } from "@/app/_shared/FilterBottomSheet";
+import ChevronDownIcon from "@/assets/chevron-down.svg";
+import { Chip } from "@/components/ui/Chip";
+import { HStack } from "@/components/ui/Stack";
+
+import * as styles from "./ChipFilter.css";
+import { type FilterTabType } from "./chipFilter.types";
+import { getChipDisplayText } from "./chipFilterUtils";
+import { useChipFilter } from "./useChipFilter";
+
+/**
+ * ChipFilter 컴포넌트
+ *
+ * @description
+ * 지역, 분위기, 실용도 필터를 선택할 수 있는 Chip 버튼들을 제공합니다.
+ * 각 Chip을 클릭하면 FilterBottomSheet가 열리고, 선택된 필터에 따라 Chip의 텍스트가 동적으로 변경됩니다.
+ *
+ * @features
+ * - 3개의 필터 타입: 지역(location), 분위기(mood), 실용도(utility)
+ * - 선택된 필터가 있으면 Chip이 활성화 상태로 표시
+ * - 선택된 필터 개수에 따라 "외 N개" 형태로 표시
+ * - FilterBottomSheet와 연동하여 필터 선택 UI 제공
+ *
+ */
+export const ChipFilter = () => {
+  const { selectedFilters, handleFilterApply } = useChipFilter();
+  const [isFilterOpen, setIsFilterOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState<FilterTabType>("location");
+
+  const handleChipClick = (tab: FilterTabType) => {
+    setActiveTab(tab);
+    setIsFilterOpen(true);
+  };
+
+  const filterConfigs = [
+    {
+      type: "location" as const,
+      getActiveState: () => selectedFilters.locations.length > 0,
+    },
+    {
+      type: "mood" as const,
+      getActiveState: () => selectedFilters.atmosphereTags.length > 0,
+    },
+    {
+      type: "utility" as const,
+      getActiveState: () => selectedFilters.utilityTags.length > 0,
+    },
+  ];
+
+  return (
+    <>
+      <HStack gap={8} className={styles.container}>
+        {filterConfigs.map(({ type, getActiveState }) => (
+          <Chip
+            key={type}
+            active={getActiveState()}
+            onClick={() => handleChipClick(type)}
+          >
+            {getChipDisplayText(type, selectedFilters)}
+            <ChevronDownIcon width={16} height={16} />
+          </Chip>
+        ))}
+      </HStack>
+
+      <FilterBottomSheet
+        open={isFilterOpen}
+        onOpenChange={setIsFilterOpen}
+        onApply={handleFilterApply}
+        defaultTab={activeTab}
+        defaultValues={selectedFilters}
+      />
+    </>
+  );
+};

src/app/_shared/ChipFilter/chipFilter.types.ts

@@ -0,0 +1 @@
+export type FilterTabType = "location" | "mood" | "utility";

src/app/_shared/ChipFilter/chipFilterUtils.ts

@@ -0,0 +1,75 @@
+import { type FilterValues } from "@/app/_shared/FilterBottomSheet";
+import { LOCATIONS } from "@/constants/location.constants";
+import { ALL_TAGS } from "@/constants/tag.constants";
+
+import { type FilterTabType } from "./chipFilter.types";
+
+/**
+ * 지역별 라벨 매핑 (value -> districts[0] 또는 label)
+ */
+const LOCATION_LABEL: Record<string, string> = Object.fromEntries(
+  LOCATIONS.map(location => [
+    location.value,
+    location.districts[0] ?? location.label,
+  ])
+);
+
+/**
+ * 태그별 라벨 매핑 (name -> label)
+ */
+const TAG_LABEL: Record<string, string> = Object.fromEntries(
+  ALL_TAGS.map(tag => [tag.name, tag.label])
+);
+
+/**
+ * 각 필터 타입별 기본 표시 텍스트
+ */
+const DEFAULT_TEXT: Record<FilterTabType, string> = {
+  location: "서울 전체",
+  mood: "분위기",
+  utility: "실용도",
+} as const;
+
+/**
+ * 필터 타입에 따라 해당하는 값들을 선택
+ */
+const pickValues = (type: FilterTabType, selected: FilterValues): string[] => {
+  switch (type) {
+    case "location":
+      return selected.locations;
+    case "mood":
+      return selected.atmosphereTags;
+    case "utility":
+      return selected.utilityTags;
+  }
+};
+
+/**
+ * 필터 값에 대한 실제 표시 라벨을 반환
+ */
+const labelFor = (type: FilterTabType, value: string): string => {
+  if (type === "location") {
+    return LOCATION_LABEL[value] ?? value;
+  }
+
+  return TAG_LABEL[value] ?? value;
+};
+
+/**
+ * Chip에 표시할 텍스트를 생성
+ * 선택된 필터 개수에 따라 "외 N개" 형태로 표시
+ */
+export const getChipDisplayText = (
+  type: FilterTabType,
+  selected: FilterValues
+): string => {
+  const values = pickValues(type, selected);
+  if (values.length === 0) {
+    return DEFAULT_TEXT[type];
+  }
+
+  const firstLabel = labelFor(type, values[0] ?? "");
+  return values.length === 1
+    ? firstLabel
+    : `${firstLabel} 외 ${values.length - 1}개`;
+};

src/app/_shared/ChipFilter/index.ts

@@ -0,0 +1,4 @@
+export { ChipFilter } from "./ChipFilter";
+export * from "./chipFilter.types";
+export * from "./chipFilterUtils";
+export { useChipFilter } from "./useChipFilter";

src/app/_shared/ChipFilter/useChipFilter.ts

@@ -0,0 +1,67 @@
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+
+import { type FilterValues } from "@/app/_shared/FilterBottomSheet";
+import { ATMOSPHERE_TAGS, UTILITY_TAGS } from "@/constants/tag.constants";
+
+/**
+ * useChipFilter 훅
+ *
+ * @description
+ * ChipFilter 컴포넌트에서 사용하는 필터 상태를 관리하고 URL 파라미터와 동기화하는 훅입니다.
+ * 지역, 분위기, 실용도 필터의 선택 상태를 URL 쿼리 파라미터로 관리하며,
+ * 필터 적용 시 URL을 업데이트하고 다른 컴포넌트에서 필터 상태를 읽을 수 있도록 합니다.
+ *
+ * @returns {FilterValues} selectedFilters - 현재 선택된 모든 필터 값들
+ * @returns {Function} handleFilterApply - 필터 적용 시 호출되는 함수
+ *
+ */
+export const useChipFilter = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+
+  const selectedFilters: FilterValues = {
+    locations: searchParams.get("location")?.split(",").filter(Boolean) || [],
+    atmosphereTags:
+      searchParams
+        .get("tag")
+        ?.split(",")
+        .filter(tag =>
+          ATMOSPHERE_TAGS.some(atmosphereTag => atmosphereTag.name === tag)
+        ) || [],
+    utilityTags:
+      searchParams
+        .get("tag")
+        ?.split(",")
+        .filter(tag =>
+          UTILITY_TAGS.some(utilityTag => utilityTag.name === tag)
+        ) || [],
+  };
+
+  const handleFilterApply = (filters: FilterValues) => {
+    const params = new URLSearchParams(searchParams.toString());
+
+    if (filters.locations.length > 0) {
+      params.set("location", filters.locations.join(","));
+    } else {
+      params.delete("location");
+    }
+
+    const allTags = [...filters.atmosphereTags, ...filters.utilityTags];
+    if (allTags.length > 0) {
+      params.set("tag", allTags.join(","));
+    } else {
+      params.delete("tag");
+    }
+
+    const newUrl = params.toString()
+      ? `${pathname}?${params.toString()}`
+      : pathname;
+    router.replace(newUrl);
+  };
+
+  return {
+    selectedFilters,
+    handleFilterApply,
+  };
+};

src/app/_shared/FilterBottomSheet/FilterBottomSheet.tsx

@@ -13,6 +13,7 @@ import { Tabs } from "@/components/ui/Tabs";
 import { LOCATIONS } from "@/constants/location.constants";
 import { ATMOSPHERE_TAGS, UTILITY_TAGS } from "@/constants/tag.constants";
 
+import { type FilterTabType } from "../ChipFilter";
 import * as styles from "./FilterBottomSheet.css";
 
 export type FilterValues = {
@@ -34,6 +35,10 @@ export type FilterBottomSheetProps = {
    * 실시간 필터 변경 시 호출되는 콜백 (제공되면 자동으로 실시간 업데이트 활성화)
    */
   onChange?: (filters: FilterValues) => void;
+  /**
+   * 기본적으로 열릴 탭 (location, mood, utility)
+   */
+  defaultTab?: FilterTabType;
 } & Omit<BottomSheetRootProps, "children">;
 
 /**
@@ -109,6 +114,7 @@ export const FilterBottomSheet = ({
   onApply,
   defaultValues,
   onChange,
+  defaultTab,
 }: FilterBottomSheetProps) => {
   const [selectedLocations, setSelectedLocations] = useState<string[]>(
     defaultValues?.locations ?? []
@@ -174,7 +180,7 @@ export const FilterBottomSheet = ({
         <BottomSheet.Title>
           <></>
         </BottomSheet.Title>
-        <Tabs.Root defaultValue='location'>
+        <Tabs.Root defaultValue={defaultTab ?? "location"}>
           <Tabs.List>
             <Tabs.Trigger value='location'>지역</Tabs.Trigger>
             <Tabs.Trigger value='mood'>분위기</Tabs.Trigger>