refactor: Refactor ssg for post list, detail page

eeennsu · eeennsu · commit 36a13a58c29f · 2025-03-02T17:25:45.000+09:00
diff --git a/prisma/initialize-data/admin.ts b/prisma/initialize-data/admin.ts
@@ -1,5 +1,6 @@
 import { assertValue } from '@/lib/utils'
 import { PrismaClient } from '@prisma/client'
+
 import bcrypt from 'bcryptjs'
 
 export const createDefaultAdmin = async (prisma: PrismaClient) => {
diff --git a/src/app/api/post/[id]/comment/route.ts b/src/app/api/post/[id]/comment/route.ts
@@ -1,8 +1,8 @@
 import { getServerAuth } from '@/lib/auth'
-import { NextResponseData, REVALIDATE_TAGS } from '@/lib/fetch'
+import { NextResponseData } from '@/lib/fetch'
 import { mainPath } from '@/lib/route'
 import { Comment } from '@prisma/client'
-import { revalidatePath, revalidateTag } from 'next/cache'
+import { revalidatePath } from 'next/cache'
 import { NextRequest, NextResponse } from 'next/server'
 import prisma from '../../../../../../prisma/prisma-client'
 
@@ -117,7 +117,6 @@ export const POST = async (request: NextRequest, { params }: Params) => {
             return NextResponse.json({ error: 'Failed to create comment' }, { status: 500 })
         }
 
-        revalidateTag(REVALIDATE_TAGS.POST_COMMENT)
         revalidatePath(mainPath.post.detail(postId))
 
         return NextResponse.json({ comment: createdComment }, { status: 201 })
@@ -169,7 +168,6 @@ export const PATCH = async (request: NextRequest, { params }: Params) => {
             return NextResponse.json({ error: 'Failed to edit comment' }, { status: 500 })
         }
 
-        revalidateTag(REVALIDATE_TAGS.POST_COMMENT)
         revalidatePath(mainPath.post.detail(postId))
 
         return NextResponse.json({ comment: editedComment })
@@ -220,7 +218,6 @@ export const DELETE = async (request: NextRequest, { params }: Params) => {
             return NextResponse.json({ error: 'Failed to delete comment' }, { status: 500 })
         }
 
-        revalidateTag(REVALIDATE_TAGS.POST_COMMENT)
         revalidatePath(mainPath.post.detail(postId))
 
         return new NextResponse(null, { status: 204 })
diff --git a/src/app/post/[id]/layout.tsx b/src/app/post/[id]/layout.tsx
@@ -9,21 +9,21 @@ interface Props {
     }>
 }
 
-export const generateMetadata = async ({ params }: Props): Promise<Metadata> => {
-    const postId = (await params)?.id
-    const responsePost = await serverRequestGetDetailPost({ postId: postId, isPublished: true })
+// export const generateMetadata = async ({ params }: Props): Promise<Metadata> => {
+//     const postId = (await params)?.id
+//     const responsePost = await serverRequestGetDetailPost({ postId: postId, isPublished: true })
 
-    if ('error' in responsePost) {
-        return {
-            title: '방은수 블로그',
-        }
-    }
+//     if ('error' in responsePost) {
+//         return {
+//             title: '방은수 블로그',
+//         }
+//     }
 
-    return {
-        title: responsePost.post.title,
-        description: responsePost.post.summary,
-    }
-}
+//     return {
+//         title: responsePost.post.title,
+//         description: responsePost.post.summary,
+//     }
+// }
 
 const DetailPostLayout: FC<PropsWithChildren> = ({ children }) => {
     return (
diff --git a/src/app/post/[id]/page.tsx b/src/app/post/[id]/page.tsx
@@ -1,4 +1,4 @@
-import { serverRequestGetDetailPost } from '@/entities/post'
+import { serverRequestGetDetailPost, serverRequestGetSomePostList } from '@/entities/post'
 import { UserCommentWidget, DetailPostWidget, PostNavigationWidget } from '@/widgets/post/detail'
 import type { FC } from 'react'
 
@@ -35,18 +35,18 @@ const DetailPostPage: FC<Props> = async ({ params }) => {
 
 export default DetailPostPage
 
-// export const generateStaticParams = async () => {
-//     const responsePosts = await serverRequestGetSomePostList({
-//         curPage: 1,
-//         perPage: 5,
-//         isPublished: true,
-//     })
-
-//     if ('error' in responsePosts) {
-//         return []
-//     }
-
-//     return responsePosts?.posts.map((post) => ({
-//         id: post?.id || '',
-//     }))
-// }
+export const generateStaticParams = async () => {
+    const responsePosts = await serverRequestGetSomePostList({
+        curPage: 1,
+        perPage: 5,
+        isPublished: true,
+    })
+
+    if ('error' in responsePosts) {
+        return []
+    }
+
+    return responsePosts?.posts.map((post) => ({
+        id: post?.id || '',
+    }))
+}
diff --git a/src/entities/post-comment/post-comment.api.client.ts b/src/entities/post-comment/post-comment.api.client.ts
@@ -7,6 +7,12 @@ import {
 } from '@/app/api/post/[id]/comment/route'
 import { generateRequest } from '@/lib/fetch'
 
+export const requestGetCommentList = async ({ postId }: { postId: string }) => {
+    return generateRequest<undefined, ResponseGetPostCommentListType>({
+        url: `/post/${postId}/comment`,
+    })
+}
+
 export const requestCreatePostComment = async ({
     postId,
     comment,
diff --git a/src/entities/post-comment/post-comment.api.server.ts b/src/entities/post-comment/post-comment.api.server.ts
diff --git a/src/entities/post/post.api.server.ts b/src/entities/post/post.api.server.ts
@@ -75,41 +75,41 @@ export const serverRequestGetPostListBySearch = async (keyword: string) => {
     })
 }
 
-export const serverRequestGetDetailPost = async ({ postId, isPublished }: { postId: string; isPublished: boolean }) => {
-    if (!postId) {
-        throw new Error(`Post id must be required`)
-    }
-
-    const params = new URLSearchParams()
-    params.append('isPublished', isPublished.toString())
-
-    return generateRequest<undefined, ResponseGetDetailPostType>({
-        url: `/post/${postId}?${params.toString()}`,
-    })
-}
-
 // export const serverRequestGetDetailPost = async ({ postId, isPublished }: { postId: string; isPublished: boolean }) => {
 //     if (!postId) {
 //         throw new Error(`Post id must be required`)
 //     }
 
-//     try {
-//         const post = await prisma.post.findFirst({
-//             where: {
-//                 id: postId,
-//                 ...(isPublished && { order: { not: null } }),
-//             },
-//         })
+//     const params = new URLSearchParams()
+//     params.append('isPublished', isPublished.toString())
 
-//         if (!post) {
-//             throw new Error(`Post not found`)
-//         }
+//     return generateRequest<undefined, ResponseGetDetailPostType>({
+//         url: `/post/${postId}?${params.toString()}`,
+//     })
+// }
 
-//         console.log('success detail post title :', post.title)
+export const serverRequestGetDetailPost = async ({ postId, isPublished }: { postId: string; isPublished: boolean }) => {
+    if (!postId) {
+        throw new Error(`Post id must be required`)
+    }
 
-//         return { post }
-//     } catch (error) {
-//         console.error('❌ serverRequestGetDetailPost error:', error)
-//         return { error: 'Internal Server Error' }
-//     }
-// }
+    try {
+        const post = await prisma.post.findFirst({
+            where: {
+                id: postId,
+                ...(isPublished && { order: { not: null } }),
+            },
+        })
+
+        if (!post) {
+            throw new Error(`Post not found`)
+        }
+
+        console.log('success detail post title :', post.title)
+
+        return { post }
+    } catch (error) {
+        console.error('❌ serverRequestGetDetailPost error:', error)
+        return { error: 'Internal Server Error' }
+    }
+}
diff --git a/src/features/post/detail/comment/comment-list.tsx b/src/features/post/detail/comment/comment-list.tsx
@@ -2,14 +2,14 @@ import type { FC } from 'react'
 import { CommentItem } from './comment-item'
 import { getServerAuth } from '@/lib/auth'
 import { PostComment } from '@/entities/post-comment/post-comment.types'
+import { useAdminSession } from '@/lib/hooks'
 
 interface Props {
     comments: PostComment[]
 }
 
-export const CommentList: FC<Props> = async ({ comments }) => {
-    const { user } = await getServerAuth()
-    const currentUserId = user?.['@id']
+export const CommentList: FC<Props> = ({ comments }) => {
+    const { sessionUserId } = useAdminSession()
 
     const reducedComment = comments.reduce<PostComment[]>((acc, cur) => {
         if (!cur.parentId) {
@@ -31,7 +31,7 @@ export const CommentList: FC<Props> = async ({ comments }) => {
                     <CommentItem
                         key={comment?.id}
                         comment={comment}
-                        currentUserId={currentUserId}
+                        currentUserId={sessionUserId}
                     />
                 ))}
         </section>
diff --git a/src/lib/fetch/index.ts b/src/lib/fetch/index.ts
@@ -1,4 +1,3 @@
 export * from './error-codes'
 export * from './return-type'
 export * from './client-instance'
-export * from './revalidate-tags'
diff --git a/src/lib/fetch/revalidate-tags.ts b/src/lib/fetch/revalidate-tags.ts
diff --git a/src/lib/hooks/use-admin-session.ts b/src/lib/hooks/use-admin-session.ts
@@ -33,7 +33,8 @@ export const useAdminSession = ({ isProtectedRoute = false, options = { required
     })
 
     const isAdminAuthorized = status === 'authenticated' && session?.user?.isAdmin === true
-    const adminId = (!!session?.user['@id'] && session?.user?.isAdmin === true && session.user['@id']) || undefined
+    const sessionUserId =
+        (!!session?.user['@id'] && session?.user?.isAdmin === true && session.user['@id']) || undefined
 
-    return { isAdminAuthorized, adminId, status }
+    return { isAdminAuthorized, sessionUserId, status }
 }
diff --git a/src/widgets/post/common/post-form-widget.tsx b/src/widgets/post/common/post-form-widget.tsx
@@ -27,7 +27,7 @@ export const PostFormWidget: FC<Props> = ({ prevPost }) => {
     const pathname = usePathname()
     const temporarySavedPostId = params.get('id')
 
-    const { adminId: authorId, isAdminAuthorized } = useAdminSession()
+    const { sessionUserId: authorId, isAdminAuthorized } = useAdminSession()
     const { executeWithProgress, barRouter } = useProgressBar()
     const { toast } = useToast()
     const [isPreviewOpen, setIsPreviewOpen] = useState<boolean>(false)
diff --git a/src/widgets/post/detail/user-comment-widget.tsx b/src/widgets/post/detail/user-comment-widget.tsx
@@ -1,28 +1,38 @@
-import { serverRequestGetCommentList } from '@/entities/post-comment/post-comment.api.server'
+'use client'
+
+import { requestGetCommentList } from '@/entities/post-comment/post-comment.api.client'
 import { PostComment } from '@/entities/post-comment/post-comment.types'
 import { CommentInput, CommentList } from '@/features/post/detail/comment'
-import type { FC } from 'react'
+import { useAsync } from '@/lib/hooks'
+import { EllipsisLoading } from '@/shared/common'
+import { useState, type FC } from 'react'
 
 interface Props {
     postId: string
 }
 
-export const UserCommentWidget: FC<Props> = async ({ postId }) => {
-    const responseCommentList = await serverRequestGetCommentList({ postId })
+export const UserCommentWidget: FC<Props> = ({ postId }) => {
+    const [commentCount, setCommentCount] = useState<number>(0)
+    const [commentList, setCommentList] = useState<PostComment[]>([])
+
+    const { isLoading, error } = useAsync(async () => {
+        const responseCommentList = await requestGetCommentList({ postId })
+
+        if ('error' in responseCommentList) {
+            throw responseCommentList.error
+        }
 
-    if ('error' in responseCommentList) {
-        throw responseCommentList.error
-    }
+        setCommentList(responseCommentList?.commentList as PostComment[])
+        setCommentCount(responseCommentList?.commentCount || 0)
+    }, [])
 
     return (
         <section className='flex flex-col gap-3'>
             <CommentInput
                 postId={postId}
-                commentCount={responseCommentList.commentCount}
+                commentCount={commentCount}
             />
-            {!!responseCommentList.commentList.length && (
-                <CommentList comments={responseCommentList.commentList as PostComment[]} />
-            )}
+            {isLoading ? <EllipsisLoading /> : !error && <CommentList comments={commentList as PostComment[]} />}
         </section>
     )
 }
