New : 홈화면 인기게시글 토글 추가 (#89)

potenday-project · Jan 4, 2024 · 7d10e31 · 7d10e31
1 parent f7fbb5a
commit 7d10e31
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 17 deletions.
diff --git a/client/src/app/(protectedRoute)/edit-post/[pid]/page.tsx b/client/src/app/(protectedRoute)/edit-post/[pid]/page.tsx
@@ -11,18 +11,26 @@ import CustomAppbar from "@/components/layout/CustomAppbar";
 import CustomContainer from "@/components/layout/CustomContainer";
 import useSubmitEditPostMutation from "@/queries/newPost/useSubmitEditPostMutation";
 import PostEditor from "@/components/newpost/PostEditor";
-import useGetPostDetailQuery, { useInvalidatePostDetail } from "@/queries/post/useGetPostDetailQuery";
+import useGetPostDetailQuery, {
+  useInvalidatePostDetail,
+} from "@/queries/post/useGetPostDetailQuery";
 
 export default function EditPostPage({ params }: { params: { pid: string } }) {
   const { setLoading } = useGlobalLoadingStore();
 
   const router = useRouter();
   const invalidatePreviousPost = useInvalidatePostList();
-  const invalidatePostDetail = useInvalidatePostDetail()
+  const invalidatePostDetail = useInvalidatePostDetail();
 
   const { data: initialData } = useGetPostDetailQuery(params.pid);
-  const { alcoholName, alcoholNo, alcoholType, postContent, postAttachUrls,postNo } =
-    initialData;
+  const {
+    alcoholName,
+    alcoholNo,
+    alcoholType,
+    postContent,
+    postAttachUrls,
+    postNo,
+  } = initialData;
 
   const [formData, setFormData] = useState<NewPostRequestInterface>();
   const [file, setFile] = useState<File>();
@@ -31,7 +39,7 @@ export default function EditPostPage({ params }: { params: { pid: string } }) {
     onMutate: () => setLoading(true),
     onSuccess: () => {
       invalidatePreviousPost();
-      invalidatePostDetail(String(postNo))
+      invalidatePostDetail(String(postNo));
       router.push(HOME);
     },
     onSettled: () => setLoading(false),

diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
@@ -1,6 +1,6 @@
 "use server";
-import CustomContainer from "@/components/layout/CustomContainer";
-import PostCardList from "@/components/post/PostCardList";
+
+import MainPagePostList from "@/components/post/MainPagePostList";
 import { getPostListQueryFn } from "@/queries/post/useGetPostListInfiniteQuery";
 import getTokenFromCookies from "@/utils/getTokenFromCookies";
 
@@ -13,9 +13,5 @@ export default async function Home() {
     headers: { Authorization: accessToken },
   });
 
-  return (
-    <CustomContainer>
-      <PostCardList initialData={initialData} />
-    </CustomContainer>
-  );
+  return <MainPagePostList initialData={initialData} />;
 }
diff --git a/client/src/components/CustomToggleButtonGroup.tsx b/client/src/components/CustomToggleButtonGroup.tsx
@@ -32,7 +32,7 @@ const CustomToggleButtonGroup = ({
           onChange(val);
         }
       }}
-      sx={{ backgroundColor: "background.paper",px:2, ...sx }}
+      sx={{ backgroundColor: "background.paper",px:2, borderRadius:0,...sx }}
       {...toggleBtnGroupProps}
     >
       {value.map((val, i) => {

diff --git a/client/src/components/layout/CustomContainer.tsx b/client/src/components/layout/CustomContainer.tsx
@@ -2,17 +2,17 @@ import { appbarHeight, navbarHeight } from "@/const/uiSizes";
 import { Container, ContainerProps, Paper } from "@mui/material";
 
 interface CustomContainerInterface extends ContainerProps {
-  disableMt?: boolean;
+  mt?: number;
 }
 
 const CustomContainer = ({
   sx,
-  disableMt,
+  mt,
   children,
 }: CustomContainerInterface) => {
   return (
     <Container
-      sx={{ ...sx, px: { xs: 0, sm: 4 }, mt: disableMt ? 0 : 8 }}
+      sx={{ ...sx, px: { xs: 0, sm: 4 }, mt: mt!==undefined ? mt : 8 }}
       maxWidth={"lg"}
     >
       <Paper

diff --git a/client/src/components/post/MainPagePostList.tsx b/client/src/components/post/MainPagePostList.tsx
@@ -0,0 +1,32 @@
+"use client";
+import { AugmentedGetPostListResponse } from "@/queries/post/useGetPostListInfiniteQuery";
+import PostCardList from "@/components/post/PostCardList";
+
+import CustomContainer from "@/components/layout/CustomContainer";
+import { useState } from "react";
+import CustomToggleButtonGroup from "@/components/CustomToggleButtonGroup";
+
+type Props = {
+  initialData: AugmentedGetPostListResponse;
+};
+
+const MainPagePostList = ({ initialData }: Props) => {
+  const selectableList = ["전체 캐스크", "인기"];
+  const [currentView, setCurrentView] = useState(selectableList[0]);
+
+  return (
+    <>
+      <CustomToggleButtonGroup
+        value={selectableList}
+        onChange={setCurrentView}
+        sx={{ position: "fixed", top: 0, left: 0, right: 0,zIndex:1 }}
+      />
+      <CustomContainer mt={5}>
+        {currentView==="전체 캐스크"&&<PostCardList initialData={initialData} />}
+        {currentView==="인기"&&<PostCardList sort="likeCount"/>}
+      </CustomContainer>
+    </>
+  );
+};
+
+export default MainPagePostList;
diff --git a/client/src/queries/post/useGetPostListInfiniteQuery.tsx b/client/src/queries/post/useGetPostListInfiniteQuery.tsx
@@ -16,13 +16,19 @@ export const useGetPostListInfiniteQuery = ({
   size,
   searchKeyword,
   searchUserNos,
+  isLikedByMe,
+  isCommentedByMe,
+  searchAlcoholNos,
   sort,
   headers,
 }: UseGetPostListQueryInterface) => {
   return useInfiniteQuery({
     queryKey: getPostListInfiniteQueryKey.byKeyword({
       searchKeyword,
       searchUserNos,
+      isLikedByMe,
+      isCommentedByMe,
+      searchAlcoholNos,
       sort,
     }),
 
@@ -32,6 +38,9 @@ export const useGetPostListInfiniteQuery = ({
         size,
         searchKeyword,
         searchUserNos,
+        isLikedByMe,
+        isCommentedByMe,
+        searchAlcoholNos,
         sort,
         headers: headers?.Authorization
           ? headers
@@ -61,6 +70,9 @@ export interface GetPostListOptions {
   sort?: string;
   searchKeyword?: string;
   searchUserNos?: string;
+  isLikedByMe?: boolean;
+  isCommentedByMe?: boolean;
+  searchAlcoholNos?: number;
 }
 /**
  * 서버응답값 + 무한스크롤을 위해 증강된 값
@@ -75,6 +87,9 @@ export const getPostListQueryFn = async ({
   size = 10,
   searchKeyword,
   searchUserNos,
+  isLikedByMe,
+  isCommentedByMe,
+  searchAlcoholNos,
   sort,
   headers,
 }: GetPostListOptions & {
@@ -90,6 +105,9 @@ export const getPostListQueryFn = async ({
         size,
         searchKeyword,
         searchUserNos,
+        isLikedByMe,
+        isCommentedByMe,
+        searchAlcoholNos,
         sort: sort ?? "lastModifiedDate,desc",
       },
       headers,
@@ -105,6 +123,9 @@ export const getPostListQueryFn = async ({
 export interface PostListInfiniteQueryKey {
   keyword?: string;
   userNo?: string;
+  isLikedByMe?: boolean;
+  isCommentedByMe?: boolean;
+  searchAlcoholNos?: number;
   sort?: string;
 }
 
@@ -113,9 +134,22 @@ export const getPostListInfiniteQueryKey = {
   byKeyword: ({
     searchKeyword,
     searchUserNos,
+    isLikedByMe,
+    isCommentedByMe,
+    searchAlcoholNos,
     sort,
   }: Omit<GetPostListOptions, "page" | "size">) =>
-    ["posts", { searchKeyword, searchUserNos, sort }] as const,
+    [
+      "posts",
+      {
+        searchKeyword,
+        searchUserNos,
+        sort,
+        isLikedByMe,
+        isCommentedByMe,
+        searchAlcoholNos,
+      },
+    ] as const,
 };
 
 /**