Feature: React 쿼리 적용 , MSW 통합 (#19)

potenday-project · Nov 8, 2023 · 481b7fa · 481b7fa
1 parent 45b8df8
commit 481b7fa
Show file tree

Hide file tree

Showing 14 changed files with 213 additions and 88 deletions.
diff --git a/client/public/mockServiceWorker.js b/client/public/mockServiceWorker.js
@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (2.0.3).
+ * Mock Service Worker (2.0.4).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.

diff --git a/client/src/app/@Modal/(.)post/[userId]/[postId]/page.tsx b/client/src/app/@Modal/(.)post/[userId]/[postId]/page.tsx
@@ -1,22 +1,13 @@
 import ModalWrapper from "@/components/ModalWrapper";
 import PostDetail from "@/components/post/PostDetail";
-
-const mockData = {
-  id: "123458",
-  createdAt: "Mon Nov 06 2023 00:13:07",
-  nickname: "testNick",
-  userId: "userID",
-  userImage: "https://source.unsplash.com/random?wallpapers",
-  content:
-    "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos ullam aut minus aliquam quis officia, non dolore omnis, magnam totam tenetur ad harum? Mollitia omnis odit atque blanditiis exercitationem! Voluptatum.",
-  image: ["https://source.unsplash.com/random?wallpapers"],
-  tags: ["해시태그1", "해시태그2"],
-};
+import { Suspense } from "react";
 
 const page = () => {
   return (
     <ModalWrapper disableBox>
-      <PostDetail {...mockData} />
+      <Suspense fallback={<>로딩</>}>
+        <PostDetail />
+      </Suspense>
     </ModalWrapper>
   );
 };

diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
@@ -7,6 +7,7 @@ import Pretendard from "~/assets/font/Pretendard";
 import NavigationBar from "~/components/NavigationBar";
 import "./globals.css";
 import MSWInit from "@/components/mock/MSWInit";
+import CustomQueryClientProvider from "@/components/queryClient/CustomQueryClientProvider";
 
 export const metadata: Metadata = {
   title: `${nameOfApp} | ${oneLineMessage}`,
@@ -27,7 +28,7 @@ export default function RootLayout({
   return (
     <html lang="kr" className={Pretendard.className}>
       <body>
-        <MSWInit>
+        <CustomQueryClientProvider>
           <ThemeRegistry options={{ key: "mui" }}>
             {Modal}
             <GlobalStyles styles={OverrideCSS} />
@@ -37,11 +38,11 @@ export default function RootLayout({
                 overflow: "auto",
               }}
             >
-              {children}
+              <MSWInit>{children}</MSWInit>
             </Box>
             <NavigationBar />
           </ThemeRegistry>
-        </MSWInit>
+        </CustomQueryClientProvider>
       </body>
     </html>
   );

diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
@@ -1,10 +1,19 @@
+"use client";
 import PostCardList from "@/components/post/PostCardList";
+// import { getPostListQueryFn } from "@/queries/post/useGetPostListQuery";
 import { Container } from "@mui/material";
+import { Suspense } from "react";
 
 export default function Home() {
+  // const initialData = await getPostListQueryFn();
   return (
     <Container sx={{ px: { xs: 0, sm: 4 } }} maxWidth={"lg"}>
-      <PostCardList />
+      <Suspense fallback={<>로딩중</>}>
+        {/* FIXME */}{/* @ts-ignore*/}
+        <PostCardList
+        // initialData={initialData}
+        />
+      </Suspense>
     </Container>
   );
 }
diff --git a/client/src/components/post/PostCard.tsx b/client/src/components/post/PostCard.tsx
@@ -17,7 +17,6 @@ import {
   CardMedia,
   Typography,
   ButtonBase,
-  Button,
 } from "@mui/material";
 import PostHashTagList from "./PostHashtagList";
 import { useOpenPostDetailPage } from "@/hooks/useOpenPostDetailPage";
@@ -32,21 +31,20 @@ const PostCard = ({
   tagList,
   postNo,
   likeCount,
+  profileImgUrls
 }: PostInterface) => {
   const openPostDetailPage = useOpenPostDetailPage();
-  // FIXME 유저이미지가 오지 않음
-  const userImage = undefined;
   const hasImage = useMemo(() => postAttachUrl.length !== 0, [postAttachUrl]);
 
   return (
     <Card sx={{ display: "flex", gap: 2, p: 2 }}>
       <Avatar
         sx={{ bgcolor: "secondary.main" }}
         sizes="40"
-        src={userImage}
+        src={profileImgUrls}
         data-testid="avatar"
       >
-        {userImage || id[0].toUpperCase()}
+        {profileImgUrls || id[0].toUpperCase()}
       </Avatar>
       <Box>
         {/* Header */}

diff --git a/client/src/components/post/PostCardList.tsx b/client/src/components/post/PostCardList.tsx
@@ -1,20 +1,19 @@
 "use client";
+
 import PostCard from "@/components/post/PostCard";
 import { PostInterface } from "@/types/post/PostInterface";
-import axios from "@/libs/axios";
-import { useEffect, useState } from "react";
+import useGetPostListQuery from "@/queries/post/useGetPostListQuery";
+
+interface PostCardListProps {
+  initialData: { content: PostInterface[] };
+}
 
-const PostCardList = () => {
-  const [data, setData] = useState<{ content: PostInterface[] }>();
-  useEffect(() => {
-    axios.get<{ content: PostInterface[] }>("/posts").then(({ data }) => {
-      setData(data);
-    });
-  }, []);
+const PostCardList = ({ initialData }: PostCardListProps) => {
+  const { data } = useGetPostListQuery(initialData);
 
   return (
     <>
-      {data?.content.map((post) => (
+      {data.content.map((post) => (
         <PostCard {...post} key={post.postNo} />
       ))}
     </>

diff --git a/client/src/components/post/PostDetail.tsx b/client/src/components/post/PostDetail.tsx
@@ -1,3 +1,5 @@
+// FIXME 실제 서버연결시 바꿔야함
+"use client";
 import { PostInterface } from "@/types/post/PostInterface";
 import {
   Avatar,
@@ -11,53 +13,59 @@ import {
   Typography,
 } from "@mui/material";
 import PostHashTagList from "./PostHashtagList";
+import { FavoriteBorder, ShareOutlined } from "@mui/icons-material";
+import useGetPostDetailQuery from "@/queries/post/useGetPostDetailQuery";
 
-const PostDetail = ({
-  image,
-  createdAt,
-  userId,
-  nickname,
-  content,
-  userImage,
-  tags,
-  id,
-}: PostInterface) => {
+const PostDetail = () => {
+  const { data } = useGetPostDetailQuery('1');
+  const {
+    postAttachUrl,
+    createdAt,
+    id,
+    nickname,
+    postContent,
+    tagList,
+    likeCount,
+    profileImgUrls,
+  }: PostInterface = data
   return (
     <Card sx={{ p: 4 }}>
       <CardHeader
         avatar={
           <Avatar
             sx={{ bgcolor: "secondary.main" }}
-            src={userImage}
+            src={profileImgUrls}
             data-testid="avatar"
           >
-            {userImage || userId[0].toUpperCase()}
+            {profileImgUrls || id[0].toUpperCase()}
           </Avatar>
         }
-        title={`${userId} ${nickname}`}
+        title={`${id} ${nickname}`}
         subheader={createdAt}
         sx={{ p: 0 }}
       />
       <CardContent sx={{ px: 0 }}>
-        <Typography variant="body1">{content}</Typography>
-        <PostHashTagList tags={tags} />
+        <Typography variant="body1">{postContent}</Typography>
+        <PostHashTagList tags={tagList} />
       </CardContent>
       {/* 이미지 */}
-      {image.length !== 0 && (
+      {postAttachUrl.length !== 0 && (
         <CardMedia
           data-testid="postImg"
           component="img"
           height="360px"
-          image={image[0]}
-          alt={`${userId}의 포스트`}
+          image={postAttachUrl[0]}
+          alt={`${id}의 포스트`}
           sx={{ borderRadius: 2, bgcolor: "background.default" }}
         />
       )}
       <CardActions sx={{ justifyContent: "end", gap: 2, px: 0 }}>
         <ButtonBase data-testid="likeBtn" aria-label="add to favorites">
-          <Typography>좋아요</Typography>
+          <FavoriteBorder />
+          <Typography>{likeCount}</Typography>
         </ButtonBase>
         <ButtonBase data-testid="shareBtn" aria-label="share">
+          <ShareOutlined />
           <Typography>공유하기</Typography>
         </ButtonBase>
       </CardActions>

diff --git a/client/src/components/queryClient/CustomQueryClientProvider.tsx b/client/src/components/queryClient/CustomQueryClientProvider.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactNode, useState } from "react";
+
+export default function CustomQueryClientProvider({
+  children,
+}: {
+  children?: ReactNode;
+}) {
+  const [queryClient] = useState(() => new QueryClient());
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}
diff --git a/client/src/mocks/handlers.ts b/client/src/mocks/handlers.ts
@@ -1,38 +1,6 @@
-import { HttpResponse, http } from "msw";
-import { randomNumber, randomSelect } from "./utils/random";
-import { PostInterface } from "@/types/post/PostInterface";
+import getPostList from "./handlers/getPostList";
+import getPostDetail from "./handlers/getPostDetail";
 
 export const handlers = [
-  http.get(`${process.env.NEXT_PUBLIC_BASE_URL}/posts`, () => {
-    return HttpResponse.json({
-      content: Array.from(new Array(5)).map((_data, i):PostInterface => {
-        return {
-          nickname: "testNick",
-          id: "userID",
-          updateDt: "2023-11-08T13:05:09.531Z",
-          createdAt: "2023-11-08T13:05:09.531Z",
-          edited: randomSelect<boolean>(true, false),
-          postNo: i,
-          postContent:
-            "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos ullam aut minus aliquam quis officia, non dolore omnis, magnam totam tenetur ad harum? Mollitia omnis odit atque blanditiis exercitationem! Voluptatum.",
-          positionInfo: "울릉도 동남쪽 뱃길따라 200리",
-          alcoholName: "string",
-          postAttachUrl: ["https://source.unsplash.com/random?wallpapers"],
-          tagList: randomSelect(["tag1", "tag2"], []),
-          quoteInfo: randomSelect(
-            [
-              {
-                quoteNo: 1,
-                quoteContent: "1",
-              },
-            ],
-            []
-          ),
-          likeCount: randomNumber(),
-          quoteCount: randomNumber(),
-          followedByMe: randomSelect(true, false),
-        };
-      }),
-    });
-  }),
+  getPostList,getPostDetail
 ];
diff --git a/client/src/mocks/handlers/getPostDetail.ts b/client/src/mocks/handlers/getPostDetail.ts
@@ -0,0 +1,42 @@
+import { PostInterface } from "@/types/post/PostInterface";
+import { HttpResponse, http } from "msw";
+import { randomBoolean, randomNumber, randomSelect } from "../utils/random";
+/**
+ * 포스트 상세보기 정보를 받아오는 핸들러
+ */
+export default  http.get(`${process.env.NEXT_PUBLIC_BASE_URL}/posts/1`, () => {
+    return HttpResponse.json<PostInterface>({
+      nickname: "testNick",
+      id: "userID",
+      updateDt: "2023-11-08T13:05:09.531Z",
+      createdAt: "2023-11-08T13:05:09.531Z",
+      edited: randomBoolean(),
+      postNo: 135,
+      postContent:
+        "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos ullam aut minus aliquam quis officia, non dolore omnis, magnam totam tenetur ad harum? Mollitia omnis odit atque blanditiis exercitationem! Voluptatum.",
+      positionInfo: "울릉도 동남쪽 뱃길따라 200리",
+      alcoholName: "string",
+      postAttachUrl: randomSelect(
+        ["https://source.unsplash.com/random?wallpapers"],
+        []
+      ),
+      tagList: randomSelect(["tag1", "tag2"], []),
+      quoteInfo: randomSelect(
+        [
+          {
+            quoteNo: 1,
+            quoteContent: "1",
+          },
+        ],
+        []
+      ),
+      likeCount: randomNumber(),
+      quoteCount: randomNumber(),
+      followedByMe: randomBoolean(),
+      likedByme: randomBoolean(),
+      profileImgUrls: randomSelect(
+        "https://source.unsplash.com/random?wallpapers",
+        ""
+      ),
+    });
+  });
diff --git a/client/src/mocks/handlers/getPostList.ts b/client/src/mocks/handlers/getPostList.ts
@@ -0,0 +1,47 @@
+import { PostInterface } from "@/types/post/PostInterface";
+import { HttpResponse, http } from "msw";
+import { randomBoolean, randomNumber, randomSelect } from "../utils/random";
+/**
+ * 포스트 리스트를 받아오는 핸들러
+ */
+export default http.get(`${process.env.NEXT_PUBLIC_BASE_URL}/posts`, () => {
+    return HttpResponse.json({
+      content: Array.from(new Array(5)).map((_data, i): PostInterface => {
+        return {
+          nickname: "testNick",
+          id: "userID",
+          updateDt: "2023-11-08T13:05:09.531Z",
+          createdAt: "2023-11-08T13:05:09.531Z",
+          edited: randomBoolean(),
+          postNo: i,
+          postContent:
+            "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos ullam aut minus aliquam quis officia, non dolore omnis, magnam totam tenetur ad harum? Mollitia omnis odit atque blanditiis exercitationem! Voluptatum.",
+          positionInfo: "울릉도 동남쪽 뱃길따라 200리",
+          alcoholName: "string",
+          postAttachUrl: randomSelect(
+            ["https://source.unsplash.com/random?wallpapers"],
+            []
+          ),
+          tagList: randomSelect(["tag1", "tag2"], []),
+          quoteInfo: randomSelect(
+            [
+              {
+                quoteNo: 1,
+                quoteContent: "1",
+              },
+            ],
+            []
+          ),
+          likeCount: randomNumber(),
+          quoteCount: randomNumber(),
+          followedByMe: randomBoolean(),
+          likedByme: randomBoolean(),
+          profileImgUrls: randomSelect(
+            "https://source.unsplash.com/random?wallpapers",
+            ""
+          ),
+        };
+      }),
+    });
+  });
+