[REFACTOR] qa반영 및 bug 수정

src/hooks/useGetInfiniteActivityPostList.ts

@@ -0,0 +1,27 @@
+import { useSuspenseInfiniteQuery } from "@tanstack/react-query";
+import { getActivityPostList, type ActivityPostType } from "../lib/activity";
+
+export const useInfiniteActivityPosts = (type: ActivityPostType, size = 20) => {
+  return useSuspenseInfiniteQuery({
+    queryKey: ["posts", "activity", type],
+
+    queryFn: ({ pageParam }) =>
+      getActivityPostList(type, {
+        pageParam,
+        size,
+      }),
+
+    initialPageParam: undefined,
+
+    getNextPageParam: lastPage => {
+      if (!lastPage.data.hasNext) return undefined;
+
+      return type === "bookmark"
+        ? lastPage.data.lastBookmarkId
+        : lastPage.data.lastReadPostId;
+    },
+
+    select: res => res.pages,
+    gcTime: 1000 * 60 * 5,
+  });
+};

src/hooks/useGetInfiniteCompaniesList.ts

@@ -31,5 +31,7 @@ export const useInfiniteCompaniesPosts = ({
     },
 
     select: res => res.pages,
+     staleTime: 1000 * 60 * 5, 
+    gcTime: 1000 * 60 * 10,
   });
 };

src/hooks/useGetInfinitePostList.ts

@@ -36,6 +36,12 @@ export const useInfinitePosts = ({
 
     getNextPageParam: lastPage => {
       if (!lastPage.data?.hasNext) return undefined;
+      if (sortBy === "POPULAR") {
+        return {
+          lastViewCount: lastPage.data.lastViewCount,
+          lastPostId: lastPage.data.lastPostId,
+        };
+      }
 
       return {
         lastPublishedAt: lastPage.data.lastPublishedAt,
@@ -44,5 +50,7 @@ export const useInfinitePosts = ({
     },
 
     select: res => res.pages,
+    staleTime: 1000 * 60 * 5,
+    gcTime: 1000 * 60 * 10,
   });
 };

src/lib/activity.ts

@@ -2,13 +2,13 @@
 
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import api from "./api";
-import type {
-  ReadPostType,
-  UseInfiniteBookmarkPostsParams,
-} from "../types/post";
+import type { ReadPostType } from "../types/post";
 import { updateBookmarkState } from "../utils/queryUpdata";
 
-//1. 북마크 추가
+//무한스크롤
+export type ActivityPostType = "bookmark" | "read";
+
+// 북마크 추가
 export const postBookmark = async (postId: number) => {
   const { data } = await api.post("/api/v1/activities/bookmarks", { postId });
   return data;
@@ -20,11 +20,14 @@ export const usePostBookmark = () => {
   return useMutation({
     mutationFn: (postId: number) => postBookmark(postId),
     onMutate: async postId => {
+      //post로 시작하는 query모두 취소
       await queryClient.cancelQueries({ queryKey: ["posts"] });
 
+      //복구위한 데이터 백업
       const previousQueries = queryClient.getQueriesData({
         queryKey: ["posts"],
       });
+
       queryClient.setQueriesData(
         { queryKey: ["posts"], exact: false },
         (old: any) => updateBookmarkState(old, postId, true),
@@ -33,10 +36,11 @@ export const usePostBookmark = () => {
       return { previousQueries };
     },
     onError: () => queryClient.invalidateQueries({ queryKey: ["posts"] }),
-    onSettled: () => queryClient.invalidateQueries({ queryKey: ["posts"] }),
+    // onSettled: () => queryClient.invalidateQueries({ queryKey: ["posts"] }),
   });
 };
-//1. 북마크 제거
+
+//북마크 제거
 export const deleteBookmark = async (postId: number) => {
   const { data } = await api.delete("/api/v1/activities/bookmarks", {
     data: { postId },
@@ -63,14 +67,33 @@ export const useDeleteBookmark = () => {
       return { previousQueries };
     },
     onError: () => queryClient.invalidateQueries({ queryKey: ["posts"] }),
-    onSettled: () => queryClient.invalidateQueries({ queryKey: ["posts"] }),
+    // onSettled: () => queryClient.invalidateQueries({ queryKey: ["posts"] }),
   });
 };
-//북마크 목록 조회
-export const getBookmarkList = async (
-  params: UseInfiniteBookmarkPostsParams,
+
+export type UseInfiniteActivityPostsParams = {
+  lastBookmarkId?: number;
+  lastReadPostId?: number;
+  size: number;
+};
+
+//읽은게시글 + 북마크 목록 통합
+export const getActivityPostList = async (
+  type: ActivityPostType,
+  { pageParam, size }: { pageParam?: number; size: number },
 ) => {
-  const { data } = await api.get("/api/v1/activities/bookmarks", { params });
+  const url =
+    type === "bookmark"
+      ? "/api/v1/activities/bookmarks"
+      : "/api/v1/activities/read-posts";
+
+  const params = {
+    size,
+    ...(pageParam !== undefined && {
+      [type === "bookmark" ? "lastBookmarkId" : "lastReadPostId"]: pageParam,
+    }),
+  };
+  const { data } = await api.get(url, { params });
   return data;
 };
 
@@ -88,7 +111,7 @@ export const usePostReadPost = () => {
     onSuccess: () => {
       console.log("읽은 게시글 저장");
       queryClient.invalidateQueries({
-        queryKey: ["posts"],
+        queryKey: ["posts", "read"],
       });
     },
     onError: err => console.log(err),

src/lib/post.ts

@@ -8,6 +8,7 @@ export interface GetPostListParams {
   size?: number;
   lastPublishedAt?: string;
   lastPostId?: number;
+  lastViewCount?: number;
 }
 export const getPostList = async (
   params: GetPostListParams,

src/pages/Login/LoginPage.tsx

@@ -1,3 +1,6 @@
+import Apple from "@/assets/images/apple.png";
+import Kakao from "@/assets/images/kakao.png";
+
 export const LoginPage = () => {
   const handleKakaoLogin = () => {
     window.location.href =
@@ -21,19 +24,11 @@ export const LoginPage = () => {
             className="w-80 bg-kakao h-13 text-black rounded-xl body-r-16 flex gap-2 items-center justify-center cursor-pointer"
             onClick={handleKakaoLogin}
           >
-            <img
-              src="/src/assets/images/kakao.png"
-              alt="kakao login"
-              className="size-7"
-            />
+            <img src={Kakao} alt="kakao login" className="size-7" />
             카카오 로그인
           </button>
           <button className="w-80 bg-black h-13 text-white rounded-xl body-r-16 flex gap-2 items-center justify-center cursor-pointer">
-            <img
-              src="/src/assets/images/apple.png"
-              alt="apple login"
-              className="size-7 "
-            />
+            <img src={Apple} alt="apple login" className="size-7 " />
             Apple 로그인
           </button>
         </div>

src/pages/home/HomePage.tsx

@@ -1,12 +1,11 @@
 import { TabSelectList } from "./components/TabSelectList";
 import { CompanyFilterList } from "./components/CompanyFilterList";
 import { PostCardList } from "./components/PostCardList";
-import { Suspense, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { useCompanyStore } from "../../store/uesCompanyStore";
 import { useGetCompany } from "../../lib/company";
 import { usePostRecommendPostList } from "../../lib/recommendation";
 import { TAB_MAP } from "../../constants/tab";
-import { Loading } from "../../shared/Loading";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { useDebounce } from "../../hooks/useDebouce";
 import { SearchPostList } from "./components/SearchPostList";
@@ -15,51 +14,66 @@ import { toast } from "react-toastify";
 import Alert from "@/assets/icons/alert2.svg";
 import { SkeletonList } from "../../shared/SkeletonList";
 import { InterestPage } from "./components/InterestPage";
+import { Loading } from "../../shared/Loading";
 export const HomePage = () => {
   const [selectedTab, setSelectedTab] = useState(0);
   const [modal, setModal] = useState(false);
-  const { companies, toggleCompany } = useCompanyStore();
+  const { companies, toggleCompany, resetCompanies } = useCompanyStore();
 
   const { data: companyData } = useGetCompany();
   const { mutate: postRecommendList, isPending: isRefreshing } =
     usePostRecommendPostList();
 
   const maxCompany = companyData?.companies.slice(0, 8) ?? [];
 
-  const [searchParams] = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
   const searchQuery = searchParams.get("search");
-  // console.log(searchQuery);
   const debouncedInput = useDebounce(searchQuery, 200);
+  const isSearching = debouncedInput && debouncedInput.trim() !== "";
   const { user } = useUserStore();
   const isLogin = !!user?.accessToken;
   const navigate = useNavigate();
+
   const handleTabChange = (tab: number) => {
     if (tab === 1 && !isLogin) {
+      // resetCompanies();
       toast.info("로그인이 필요한 서비스입니다.", {
         icon: <img src={Alert} alt="login으로 이동" />,
       });
+
       navigate("/login");
+
       return;
     }
+    setSearchParams({});
     setSelectedTab(tab);
   };
 
+  useEffect(() => {
+    //store비우긴
+    return () => {
+      resetCompanies();
+    };
+  }, []);
+
   return (
     <div className="bg-bgPrimary py-12 " onClick={() => setModal(false)}>
-      {/* <SkeletonCard /> */}
+      <TabSelectList
+        className={
+          isSearching || [2, 3].includes(selectedTab) ? "mb-20" : "mb-8"
+        }
+        onChange={handleTabChange}
+        selected={isSearching ? null : selectedTab}
+        tagList={TAB_MAP}
+      />
       {debouncedInput && debouncedInput.trim() !== "" ? (
-        <Suspense fallback={<Loading />}>
-          <SearchPostList query={debouncedInput ?? ""} />
-        </Suspense>
+        <>
+          <Suspense fallback={<SkeletonList />}>
+            <SearchPostList query={debouncedInput ?? ""} />
+          </Suspense>
+        </>
       ) : (
         <>
-          <TabSelectList
-            className={[2, 3].includes(selectedTab) ? "mb-20" : "mb-8"}
-            onChange={handleTabChange}
-            selected={selectedTab}
-            tagList={TAB_MAP}
-          />
-
           {selectedTab === 0 && (
             <>
               <CompanyFilterList
@@ -75,7 +89,7 @@ export const HomePage = () => {
           )}
           {/* 나와맞는 게시글 */}
           {selectedTab === 1 && isLogin && (
-            <Suspense fallback={<SkeletonList />}>
+            <Suspense fallback={<Loading />}>
               <InterestPage
                 onRefresh={postRecommendList}
                 isRefreshing={isRefreshing}

src/pages/home/components/InterestPage.tsx

@@ -17,11 +17,7 @@ export const InterestPage = ({
   return (
     <>
       <InterestFilterList myInterest={myInterest} onRefresh={onRefresh} />
-      {isRefreshing ? (
-        <SkeletonList /> // 반복되는 Skeleton UI는 별도 컴포넌트로 빼면 깔끔합니다.
-      ) : (
-        <PostCardList selectedTab={1} />
-      )}
+      {isRefreshing ? <SkeletonList /> : <PostCardList selectedTab={1} />}
     </>
   );
 };

src/pages/home/components/TabSelectList.tsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 
 interface TabSelectList {
   className?: string;
-  selected?: number;
+  selected?: number | null;
   onChange: (idx: number) => void;
   tagList: string[];
 }

src/pages/mypage/AskPage.tsx

@@ -23,7 +23,7 @@ export const AskPage = () => {
   const [confirmModal, setIsConfirmModal] = useState(false);
 
   const activeBtn =
-    title.length > 2 && content.length > 2 && askContent.length > 0; //모두 true여야함, + 다 true면 마지막꺼
+    title.length > 2 && content.length > 2 && askContent.length > 0;
 
   const handleAsk = (e: React.MouseEvent, value: string) => {
     e.stopPropagation();
@@ -71,7 +71,7 @@ export const AskPage = () => {
                   {ASK_MAP.map(askItem => {
                     return (
                       <p
-                        className="body-r-14 cursor-pointer p-4"
+                        className="body-r-14 cursor-pointer p-4 hover:bg-[#579AEB] rounded-xl"
                         onClick={e => handleAsk(e, askItem)}
                       >
                         {askItem}

src/pages/mypage/EditInterestPage.tsx

@@ -105,7 +105,7 @@ export const EditInterestPage = () => {
             </div>
             <button
               className={cn(
-                "ml-auto rounded-xl px-3 py-2 body-sb-14 text-white items-start shrink-0 cursor-pointer",
+                "ml-auto rounded-xl px-3 py-2 body-r-14 text-white items-start shrink-0 cursor-pointer",
                 isEqual ? "bg-sub-900" : "bg-blue-500",
               )}
               onClick={handleSave}