feat: (#275) 게스트용 게시글 api 제작 및 연결

- 상세페이지에서 로그인 정보가 false라면 게스트용 게시글 상세정보 api로 fetch
woowacourse-teams · Aug 9, 2023 · c3393a8 · c3393a8
1 parent d96d620
commit c3393a8
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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'}
  />
  )}