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 => { return transformPostResponse(post); }; +export const getPostForGuest = async (postId: number): Promise => { + const post = await getFetch(`${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( [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() { )}