|
1 |
| -'use client'; |
| 1 | +import { getPostById, mapPostToViewModel } from '@/entities/post'; |
| 2 | +import { PostViewModel } from '@/entities/post/model/post-view-model'; |
2 | 3 |
|
3 |
| -import { Button } from '@workspace/ui/components/button'; |
4 |
| -import { useParams, useRouter } from 'next/navigation'; |
5 |
| -import { useEffect, useState } from 'react'; |
6 |
| - |
7 |
| -import { getPostById } from '@/entities/post'; |
8 |
| -import { Post } from '@/entities/post'; |
9 |
| -import { formatToLocaleDate } from '@/shared/lib'; |
| 4 | +interface PostDetailProps { |
| 5 | + params: { id: string }; |
| 6 | +} |
10 | 7 |
|
11 |
| -// 특정 게시글 페이지 - 게시글 생성 후 넘어가지는지 확인용으로 만든 임시 컴포넌트 |
12 |
| -export function PostDetail() { |
13 |
| - const { id } = useParams(); |
14 |
| - const router = useRouter(); |
15 |
| - const [post, setPost] = useState<Post | null>(null); |
16 |
| - const [isLoading, setIsLoading] = useState(true); |
17 |
| - const [error, setError] = useState<string | null>(null); |
| 8 | +export async function PostDetail({ params }: PostDetailProps) { |
| 9 | + let post: PostViewModel | null = null; |
| 10 | + let error: string | null = null; |
18 | 11 |
|
19 |
| - useEffect(() => { |
20 |
| - if (!id) return; |
| 12 | + const id = (await params).id; |
21 | 13 |
|
22 |
| - async function fetchPost() { |
23 |
| - try { |
24 |
| - setIsLoading(true); |
25 |
| - const data = await getPostById(id as string); |
26 |
| - setPost(data); |
27 |
| - } catch (err) { |
28 |
| - setError('게시글을 불러오는 중 오류가 발생했습니다.'); |
29 |
| - console.error(err); |
30 |
| - } finally { |
31 |
| - setIsLoading(false); |
32 |
| - } |
33 |
| - } |
34 |
| - fetchPost(); |
35 |
| - }, [id]); |
| 14 | + try { |
| 15 | + const data = await getPostById(id); |
| 16 | + post = mapPostToViewModel(data); |
| 17 | + } catch (err) { |
| 18 | + console.error(err); |
| 19 | + error = '게시글을 불러오는 중 오류가 발생했습니다.'; |
| 20 | + } |
36 | 21 |
|
37 |
| - if (isLoading) return <p className="text-center text-gray-500">로딩 중...</p>; |
38 |
| - if (error) return <p className="text-center text-red-500">{error}</p>; |
39 |
| - if (!post) |
40 |
| - return ( |
41 |
| - <p className="text-center text-gray-500">게시글을 찾을 수 없습니다.</p> |
42 |
| - ); |
| 22 | + if (error) return <p>{error}</p>; |
| 23 | + if (!post) return <p>게시글을 찾을 수 없습니다.</p>; |
43 | 24 |
|
44 | 25 | return (
|
45 |
| - <div className="mx-auto max-w-2xl space-y-4 rounded-lg bg-white p-6 shadow-md"> |
46 |
| - <h1 className="text-2xl font-bold text-gray-900">{post.title}</h1> |
47 |
| - <p className="whitespace-pre-line text-gray-700">{post.content}</p> |
48 |
| - <div className="text-sm text-gray-500"> |
49 |
| - <p>작성자: {post.author}</p> |
50 |
| - <p>작성일: {formatToLocaleDate(post.createdAt)}</p> |
51 |
| - </div> |
52 |
| - <div className="mt-4 flex justify-between"> |
53 |
| - <Button variant="outline" onClick={() => router.push('/')}> |
54 |
| - 목록으로 |
55 |
| - </Button> |
56 |
| - <Button onClick={() => router.push(`/posts/edit/${post.id}`)}> |
57 |
| - 수정하기 |
58 |
| - </Button> |
| 26 | + <div className="mx-8 my-4 rounded border border-gray-400 p-4"> |
| 27 | + <h3 className="pb-4 font-semibold">{post.title}</h3> |
| 28 | + <hr /> |
| 29 | + <p className="min-h-[30vh] whitespace-pre-wrap pt-4">{post.content}</p> |
| 30 | + <br /> |
| 31 | + <div className="flex flex-col gap-2"> |
| 32 | + <span className="rounded border border-gray-300 bg-gray-300 px-2 py-0.5 italic"> |
| 33 | + {post.author} |
| 34 | + </span> |
| 35 | + <time>{post.localeCreatedAt}</time> |
59 | 36 | </div>
|
60 | 37 | </div>
|
61 | 38 | );
|
|
0 commit comments