Merge pull request #376 from boostcampwm-2024/feat/filtering-ui

jungmyunggi · web-flow · commit a60236dc026e · 2025-05-13T21:15:36.000+09:00
✨ feat: 포스트 필터링 및 추천 포스트 구현
diff --git a/client/src/api/services/posts.ts b/client/src/api/services/posts.ts
@@ -4,11 +4,12 @@ import { axiosInstance } from "@/api/instance";
 import { InfiniteScrollResponse, LatestPostsApiResponse, Post, PostDetailType } from "@/types/post";
 
 export const posts = {
-  latest: async (params: { limit: number; lastId: number }): Promise<InfiniteScrollResponse<Post>> => {
+  latest: async (params: { limit: number; lastId: number; tags: string[] }): Promise<InfiniteScrollResponse<Post>> => {
     const response = await axiosInstance.get<LatestPostsApiResponse>(BLOG.POST, {
       params: {
         limit: params.limit,
         lastId: params.lastId || 0,
+        tags: params.tags || [],
       },
     });
     return {
diff --git a/client/src/components/common/Card/PostCard.tsx b/client/src/components/common/Card/PostCard.tsx
@@ -3,6 +3,7 @@ import { useNavigate, useLocation } from "react-router-dom";
 import { Card, MCard } from "@/components/ui/card";
 
 import { usePostCardActions } from "@/hooks/common/usePostCardActions";
+import { useUpdateRecentTags } from "@/hooks/common/useUpdateRecentTag";
 
 import { PostCardContent } from "./PostCardContent";
 import { PostCardImage } from "./PostCardImage";
@@ -26,6 +27,7 @@ const DesktopCard = ({ post, className }: PostCardProps) => {
   const { incrementView } = usePostCardActions(post);
   const openPostDetail = (modalUrl: string) => {
     incrementView({ post, isWindowOpened: true });
+    useUpdateRecentTags(post.tag);
     navigate(modalUrl, { state: { backgroundLocation: location } });
   };
   return (
diff --git a/client/src/components/common/Card/PostCardGrid.tsx b/client/src/components/common/Card/PostCardGrid.tsx
@@ -1,13 +1,13 @@
-import { Post } from "@/types/post";
 import { PostCard } from "./PostCard";
+import { Post } from "@/types/post";
 
 interface PostCardGridProps {
   posts: Post[];
 }
 
 export const PostCardGrid = ({ posts }: PostCardGridProps) => {
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 min-h-[300px]">
       {posts.map((post) => {
         return <PostCard key={post.id} post={post} />;
       })}
diff --git a/client/src/components/common/SectionHeader.tsx b/client/src/components/common/SectionHeader.tsx
@@ -1,22 +1,56 @@
+import clsx from "clsx";
 import { LucideIcon } from "lucide-react";
 
+import { usePostTypeStore } from "@/store/usePostTypeStore";
+
 interface SectionHeaderProps {
   icon: LucideIcon;
   text: string;
   iconColor: string;
   description: string;
+  secondText?: string;
+  secondDescription?: string;
 }
 
-export const SectionHeader = ({ icon: Icon, text, iconColor, description }: SectionHeaderProps) => {
+export const SectionHeader = ({
+  icon: Icon,
+  text,
+  iconColor,
+  description,
+  secondText,
+  secondDescription,
+}: SectionHeaderProps) => {
+  const { postType, setPostType } = usePostTypeStore();
+
+  const hasSecond = !secondText || postType === "latest";
+
   return (
-    <div className="flex items-center gap-2 p-4 md:p-0">
-      {Icon && (
-        <div>
-          <Icon className={`w-5 h-5 ${iconColor}`} />
-        </div>
+    <div className="whitespace-nowrap flex items-center gap-2 p-4 md:p-0">
+      {Icon && <Icon className={`w-5 h-5 ${iconColor}`} />}
+
+      <h2
+        className={clsx(
+          "text-lg md:text-xl font-semibold",
+          secondText && postType !== "latest" && "text-gray-400 cursor-pointer hover:text-black"
+        )}
+        onClick={() => secondText && setPostType("latest")}
+      >
+        {text}
+      </h2>
+
+      {secondText && (
+        <h2
+          className={clsx(
+            "text-lg md:text-xl font-semibold",
+            postType !== "recommend" && "text-gray-400 cursor-pointer hover:text-black"
+          )}
+          onClick={() => setPostType("recommend")}
+        >
+          {secondText}
+        </h2>
       )}
-      <h2 className="text-xl font-semibold">{text}</h2>
-      <p className="text-sm text-gray-400 mt-1">{description}</p>
+
+      <p className="text-xs md:text-sm text-gray-400 mt-1">{hasSecond ? description : secondDescription}</p>
     </div>
   );
 };
diff --git a/client/src/components/filter/Filter.tsx b/client/src/components/filter/Filter.tsx
@@ -0,0 +1,86 @@
+import { useState } from "react";
+
+import clsx from "clsx";
+
+import { CATEGORIES, CATEGORIES_KEY, CATEGORIES_MAP } from "@/constants/filter";
+
+import { useFilterStore } from "@/store/useFilterStore";
+
+export default function Filter() {
+  const [lastActiveCategory, setLastActiveCategory] = useState<string>("FrontEnd");
+  const [filterOpen, setFilterOpen] = useState<boolean>(false);
+  const handleFilterOpen = () => {
+    setFilterOpen(!filterOpen);
+  };
+
+  const handleCategoryChange = (category: string) => {
+    setLastActiveCategory(category);
+  };
+
+  return (
+    <div className={`px-4 md:px-0 mt-0 md:pt-3 rounded-lg flex flex-col gap-1`}>
+      <div className="flex gap-6">
+        <span className="font-bold">카테고리</span>
+        <button className="text-sm text-red-400" onClick={handleFilterOpen}>
+          {filterOpen ? "닫기" : "열기"}
+        </button>
+      </div>
+      {filterOpen && (
+        <Filters
+          filters={CATEGORIES[CATEGORIES_MAP[lastActiveCategory as keyof typeof CATEGORIES_MAP]]}
+          keys={CATEGORIES_KEY}
+          activeCategory={lastActiveCategory}
+          onCategoryChange={handleCategoryChange}
+        />
+      )}
+    </div>
+  );
+}
+
+function Filters({
+  filters,
+  keys,
+  activeCategory,
+  onCategoryChange,
+}: {
+  filters: string[];
+  keys: string[];
+  activeCategory: string;
+  onCategoryChange: (category: string) => void;
+}) {
+  const { filters: pickedFilter, addFilter, removeFilter } = useFilterStore();
+  const commonClass = `w-fit select-none cursor-pointer`;
+  return (
+    <div className="flex flex-col">
+      <ul className="py-2 flex gap-2">
+        {keys.map((category, index) => (
+          <li
+            key={index}
+            onClick={() => onCategoryChange(category)}
+            className={clsx(
+              "px-1 md:px-3 py-1 rounded cursor-pointer transition text-xs md:text-base",
+              category === activeCategory ? "bg-secondary text-white" : "bg-white fext-secondary hover:bg-gray-100"
+            )}
+          >
+            {category}
+          </li>
+        ))}
+      </ul>
+      <ul className="flex flex-wrap gap-x-2 gap-y-2 place-items-start w-fit gap-1 py-2">
+        {filters.map((filter, index) => (
+          <li
+            key={index}
+            className={clsx(
+              pickedFilter.includes(filter) ? "bg-primary text-white" : "bg-gray-200 hover:bg-gray-300 text-gray-800",
+              commonClass,
+              "px-2 md:px-3 text-xs md:text-sm  py-1 rounded-full "
+            )}
+            onClick={() => (pickedFilter.includes(filter) ? removeFilter(filter) : addFilter(filter))}
+          >
+            {filter}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/client/src/components/sections/AnimatedPostGrid.tsx b/client/src/components/sections/AnimatedPostGrid.tsx
@@ -17,7 +17,7 @@ const AnimatedPostGrid = ({ posts = [] }: AnimatedPostGridProps) => {
     return <EmptyPost />;
   }
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 md:gap-6 relative">
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-4 md:gap-6 relative">
       <AnimatePresence initial={false}>
         {posts.map((post) => {
           return (
diff --git a/client/src/components/sections/LatestSection.tsx b/client/src/components/sections/LatestSection.tsx
@@ -1,21 +1,33 @@
 import { useEffect, useRef } from "react";
 
-import { Rss } from "lucide-react";
+import { Rss, SquareX } from "lucide-react";
 
 import { PostCardGrid } from "@/components/common/Card/PostCardGrid";
 import { PostGridSkeleton } from "@/components/common/Card/PostCardSkeleton.tsx";
 import { SectionHeader } from "@/components/common/SectionHeader";
+import Filter from "@/components/filter/Filter";
 
+import { useRecentTag } from "@/hooks/common/useRecentTag";
 import { useInfiniteScrollQuery } from "@/hooks/queries/useInfiniteScrollQuery";
 
+import { Badge } from "../ui/badge";
 import { posts } from "@/api/services/posts";
+import { useFilterStore } from "@/store/useFilterStore";
+import { usePostTypeStore } from "@/store/usePostTypeStore";
 import { Post } from "@/types/post";
 
 export default function LatestSection() {
+  const pickedFilter = useFilterStore((state) => state.filters);
+  const removeFilter = useFilterStore((state) => state.removeAll);
   const observerTarget = useRef<HTMLDivElement>(null);
+  const postType = usePostTypeStore((state) => state.postType);
+  const recentTags = useRecentTag();
+  const tags = postType === "latest" ? pickedFilter : recentTags;
+
   const { items, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } = useInfiniteScrollQuery<Post>({
     queryKey: "latest-posts",
     fetchFn: posts.latest,
+    tags: tags,
   });
 
   useEffect(() => {
@@ -37,7 +49,33 @@ export default function LatestSection() {
 
   return (
     <section className="flex flex-col md:p-4 min-h-[300px]">
-      <SectionHeader icon={Rss} text="최신 포스트" description="최근에 작성된 포스트" iconColor="text-orange-500" />
+      <div className="flex items-center gap-3">
+        <SectionHeader
+          icon={Rss}
+          text="최신 포스트"
+          description="최근에 작성된 포스트"
+          iconColor="text-orange-500"
+          secondText="추천 포스트"
+          secondDescription="사용자 맞춤 추천 포스트"
+        />
+        {pickedFilter.length !== 0 && postType === "latest" && (
+          <div className=" gap-2 items-center hidden md:flex">
+            <ul className="flex flex-wrap gap-x-2 gap-y-2">
+              {pickedFilter.map((filter, index) => (
+                <Badge key={index} className="hover:bg-primary">
+                  {filter}
+                </Badge>
+              ))}
+            </ul>
+            <button onClick={removeFilter}>
+              <SquareX size={13} color="red" />
+            </button>
+
+            <span className="text-gray-400 text-xs">카테고리 지정은 최대 5개까지 가능합니다.</span>
+          </div>
+        )}
+      </div>
+      {postType === "latest" && <Filter />}
       <div className="flex-1 mt-4 md:p-6 md:pt-0 rounded-lg">
         {isLoading ? (
           <PostGridSkeleton count={8} />
diff --git a/client/src/constants/filter.ts b/client/src/constants/filter.ts
@@ -0,0 +1,18 @@
+export const CATEGORIES = [
+  ["Frontend", "React", "Vue.JS", "TypeScript", "JavaScript"],
+  ["Backend", "Nest.JS", "Express.JS", "Spring", "Java"],
+  ["회고"],
+  ["MySQL", "SQLite", "PostgreSQL", "MongoDB", "Redis"],
+  ["Docker", "Infra"],
+  ["Network", "OS", "Algorithm"],
+];
+
+export const CATEGORIES_KEY = ["FrontEnd", "BackEnd", "회고", "데이터베이스", "인프라", "CS"];
+export const CATEGORIES_MAP = {
+  FrontEnd: 0,
+  BackEnd: 1,
+  회고: 2,
+  데이터베이스: 3,
+  인프라: 4,
+  CS: 5,
+};
diff --git a/client/src/hooks/common/useRecentTag.ts b/client/src/hooks/common/useRecentTag.ts
@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+
+export const useRecentTag = () => {
+  const [recentTag, setRecentTag] = useState<string[]>(() => {
+    const stored = localStorage.getItem("recent-tag");
+    return stored ? JSON.parse(stored) : [];
+  });
+
+  useEffect(() => {
+    const handler = (e: StorageEvent) => {
+      if (e.key === "recent-tag") {
+        const newTags = e.newValue ? JSON.parse(e.newValue) : [];
+        setRecentTag(newTags);
+      }
+    };
+
+    window.addEventListener("storage", handler);
+    return () => removeEventListener("storage", handler);
+  }, []);
+
+  return recentTag;
+};
diff --git a/client/src/hooks/common/useUpdateRecentTag.ts b/client/src/hooks/common/useUpdateRecentTag.ts
@@ -0,0 +1,16 @@
+import { CATEGORIES } from "@/constants/filter";
+
+export const useUpdateRecentTags = (newTags: string[]) => {
+  const recentTag = localStorage.getItem("recent-tag");
+  let tags: string[] = recentTag ? JSON.parse(recentTag) : [];
+
+  for (const tag of newTags) {
+    const isValid = CATEGORIES.some((category) => category.includes(tag));
+    if (!isValid) continue;
+
+    tags = [tag, ...tags.filter((t) => t !== tag)];
+    if (tags.length > 3) tags.pop();
+  }
+
+  localStorage.setItem("recent-tag", JSON.stringify(tags));
+};
diff --git a/client/src/hooks/queries/useInfiniteScrollQuery.ts b/client/src/hooks/queries/useInfiniteScrollQuery.ts
@@ -7,19 +7,22 @@ interface Identifiable {
 
 interface UseInfiniteScrollQueryOptions<T extends Identifiable> {
   queryKey: string;
-  fetchFn: (params: { limit: number; lastId: number }) => Promise<InfiniteScrollResponse<T>>;
+  fetchFn: (params: { limit: number; lastId: number; tags: string[] }) => Promise<InfiniteScrollResponse<T>>;
+  tags: string[];
 }
 
 export function useInfiniteScrollQuery<T extends Identifiable>({
   queryKey,
   fetchFn,
+  tags,
 }: UseInfiniteScrollQueryOptions<T>) {
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, isError, error } = useInfiniteQuery({
-    queryKey: [queryKey],
+    queryKey: [queryKey, tags],
     queryFn: ({ pageParam = 0 }) =>
       fetchFn({
         limit: 12,
         lastId: pageParam,
+        tags: tags || [],
       }),
     getNextPageParam: (lastPage) => {
       if (!lastPage.hasMore) return undefined;
diff --git a/client/src/store/useFilterStore.ts b/client/src/store/useFilterStore.ts
@@ -0,0 +1,24 @@
+import { create } from "zustand";
+
+type FilterType = {
+  filters: string[];
+  addFilter: (filter: string) => void;
+  removeFilter: (filter: string) => void;
+  removeAll: () => void;
+};
+
+export const useFilterStore = create<FilterType>((set, get) => ({
+  filters: [],
+  addFilter: (filter) => {
+    const { filters } = get();
+    if (filters.length >= 5) return;
+    set({ filters: [...filters, filter] });
+  },
+  removeFilter: (filter) => {
+    const { filters } = get();
+    set({ filters: filters.filter((f) => f !== filter) });
+  },
+  removeAll: () => {
+    set({ filters: [] });
+  },
+}));
diff --git a/client/src/store/usePostTypeStore.ts b/client/src/store/usePostTypeStore.ts
@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+type State = {
+  postType: "latest" | "recommend";
+};
+type Action = {
+  setPostType: (postType: State["postType"]) => void;
+};
+
+export const usePostTypeStore = create<State & Action>((set) => ({
+  postType: "latest",
+  setPostType: (postType) => set({ postType }),
+}));

Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ const AnimatedPostGrid = ({ posts = [] }: AnimatedPostGridProps) => {`
`17`	`17`	`return <EmptyPost />;`
`18`	`18`	`}`
`19`	`19`	`return (`
`20`		`- <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 md:gap-6 relative">`
	`20`	`+ <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-4 md:gap-6 relative">`
`21`	`21`	`<AnimatePresence initial={false}>`
`22`	`22`	`{posts.map((post) => {`
`23`	`23`	`return (`