From c3393a86a8fab142acc15cd2b4d13841a7bfaa44 Mon Sep 17 00:00:00 2001
From: chsua <csj1919@naver.com>
Date: Wed, 9 Aug 2023 16:03:26 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20(#275)=20=EA=B2=8C=EC=8A=A4=ED=8A=B8?=
 =?UTF-8?q?=EC=9A=A9=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20api=20=EC=A0=9C?=
 =?UTF-8?q?=EC=9E=91=20=EB=B0=8F=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 상세페이지에서 로그인 정보가 false라면 게스트용 게시글 상세정보 api로 fetch
---
 frontend/src/api/post.ts                           |  6 ++++++
 .../src/components/comment/CommentList/index.tsx   |  2 +-
 frontend/src/hooks/query/post/usePostDetail.ts     |  8 +++++---
 frontend/src/pages/post/PostDetail/index.tsx       | 14 ++++++--------
 4 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/frontend/src/api/post.ts b/frontend/src/api/post.ts
index 85bdae800..0824c01de 100644
--- a/frontend/src/api/post.ts
+++ b/frontend/src/api/post.ts
@@ -59,6 +59,12 @@ export const getPost = async (postId: number): Promise<PostInfo> => {
   return transformPostResponse(post);
 };
 
+export const getPostForGuest = async (postId: number): Promise<PostInfo> => {
+  const post = await getFetch<PostInfoResponse>(`${BASE_URL}/posts/${postId}/guest`);
+
+  return transformPostResponse(post);
+};
+
 export const createPost = async (newPost: FormData) => {
   return await multiPostFetch(`${BASE_URL}/posts`, newPost);
 };
diff --git a/frontend/src/components/comment/CommentList/index.tsx b/frontend/src/components/comment/CommentList/index.tsx
index 5a90df2f1..0d42cfb2c 100644
--- a/frontend/src/components/comment/CommentList/index.tsx
+++ b/frontend/src/components/comment/CommentList/index.tsx
@@ -14,7 +14,7 @@ import * as S from './style';
 
 interface CommentListProps {
   commentList: Comment[];
-  memberId: number;
+  memberId?: number;
   isGuest: boolean;
   postWriterName: string;
 }
diff --git a/frontend/src/hooks/query/post/usePostDetail.ts b/frontend/src/hooks/query/post/usePostDetail.ts
index 6c9c3e338..10060ae76 100644
--- a/frontend/src/hooks/query/post/usePostDetail.ts
+++ b/frontend/src/hooks/query/post/usePostDetail.ts
@@ -2,14 +2,16 @@ import { useQuery } from '@tanstack/react-query';
 
 import { PostInfo } from '@type/post';
 
-import { getPost } from '@api/post';
+import { getPost, getPostForGuest } from '@api/post';
 
 import { QUERY_KEY } from '@constants/queryKey';
 
-export const usePostDetail = (postId: number) => {
+export const usePostDetail = (isGuest: boolean, postId: number) => {
+  const fetchApi = isGuest ? getPostForGuest : getPost;
+
   const { data, isError, isLoading } = useQuery<PostInfo>(
     [QUERY_KEY.POST_DETAIL, postId],
-    () => getPost(postId),
+    () => fetchApi(postId),
     {
       onSuccess: data => {
         return data;
diff --git a/frontend/src/pages/post/PostDetail/index.tsx b/frontend/src/pages/post/PostDetail/index.tsx
index 3f65ab4b3..92b90a536 100644
--- a/frontend/src/pages/post/PostDetail/index.tsx
+++ b/frontend/src/pages/post/PostDetail/index.tsx
@@ -1,5 +1,7 @@
+import { useContext } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
+import { AuthContext } from '@hooks/context/auth';
 import { useCommentList } from '@hooks/query/comment/useCommentList';
 import { usePostDetail } from '@hooks/query/post/usePostDetail';
 
@@ -10,7 +12,6 @@ import Layout from '@components/common/Layout';
 import NarrowTemplateHeader from '@components/common/NarrowTemplateHeader';
 import Post from '@components/common/Post';
 
-import { getCookieToken, getMemberId } from '@utils/cookie';
 import { checkClosedPost } from '@utils/time';
 
 import BottomButtonPart from './BottomButtonPart';
@@ -23,14 +24,11 @@ export default function PostDetailPage() {
   const params = useParams() as { postId: string };
   const postId = Number(params.postId);
 
-  const token = getCookieToken().accessToken;
-  const decodedPayload = getMemberId(token);
-  const memberId = decodedPayload.memberId;
+  const { loggedInfo } = useContext(AuthContext);
+  const memberId = loggedInfo.id;
 
-  const { data: postData, isError, isLoading } = usePostDetail(postId);
-  // const { data: postData, errorMessage, isLoading, refetch } = useFetch(() => getPost(postId));
+  const { data: postData, isError, isLoading } = usePostDetail(!loggedInfo.isLoggedIn, postId);
   const { data: commentData, isLoading: isCommentLoading } = useCommentList(postId);
-  // const { data: userInfo, isLoading: isUserInfoLoading, error } = useUserInfo(isLoggedIn);
 
   if (!postData) {
     return (
@@ -112,7 +110,7 @@ export default function PostDetailPage() {
         <CommentList
           commentList={commentData}
           memberId={memberId}
-          isGuest={false}
+          isGuest={!!memberId}
           postWriterName={'익명의손님1'}
         />
       )}