diff --git a/frontend/src/tabs/board/components/BoardDetailView.tsx b/frontend/src/tabs/board/components/BoardDetailView.tsx index 3bf8bfe..6c886ac 100755 --- a/frontend/src/tabs/board/components/BoardDetailView.tsx +++ b/frontend/src/tabs/board/components/BoardDetailView.tsx @@ -1,33 +1,69 @@ -interface BoardPost { - id: number - category: string - title: string - author: string - organization: string - date: string - views: number - content: string - hasAttachment?: boolean - isNotice?: boolean +import { useState, useEffect } from 'react' +import { useAuthStore } from '@common/store/authStore' +import { fetchBoardPost, type BoardPostDetail } from '../services/boardApi' + +// 카테고리 코드 → 표시명 +const CATEGORY_LABELS: Record = { + NOTICE: '공지사항', + DATA: '자료실', + QNA: 'Q&A', + MANUAL: '해경매뉴얼', +} + +// 카테고리별 배지 색상 +const CATEGORY_COLORS: Record = { + NOTICE: 'bg-red-500/20 text-red-400', + DATA: 'bg-green-500/20 text-green-400', + QNA: 'bg-purple-500/20 text-purple-400', + MANUAL: 'bg-blue-500/20 text-blue-400', } interface BoardDetailViewProps { - post: BoardPost + postSn: number onBack: () => void onEdit: () => void onDelete: () => void } -export function BoardDetailView({ post, onBack, onEdit, onDelete }: BoardDetailViewProps) { - const handleDelete = () => { - if (window.confirm('정말로 이 게시글을 삭제하시겠습니까?')) { - onDelete() +export function BoardDetailView({ postSn, onBack, onEdit, onDelete }: BoardDetailViewProps) { + const user = useAuthStore((s) => s.user) + const [post, setPost] = useState(null) + const [isLoading, setIsLoading] = useState(true) + + useEffect(() => { + let cancelled = false + const load = async () => { + setIsLoading(true) + try { + const data = await fetchBoardPost(postSn) + if (!cancelled) setPost(data) + } catch { + if (!cancelled) { + alert('게시글을 불러오는데 실패했습니다.') + onBack() + } + } finally { + if (!cancelled) setIsLoading(false) + } } + load() + return () => { cancelled = true } + }, [postSn, onBack]) + + if (isLoading || !post) { + return ( +
+

게시글을 불러오는 중...

+
+ ) } + // 본인 게시글 여부 + const isAuthor = user?.id === post.authorId + return (
- {/* Header */} + {/* 헤더 */}
-
- - -
+ {isAuthor && ( +
+ + +
+ )}
- {/* Post Content */} + {/* 게시글 내용 */}
- {/* Post Header */} + {/* 게시글 헤더 */}
- - {post.category} + + {CATEGORY_LABELS[post.categoryCd] || post.categoryCd} - {post.isNotice && ( - - 공지 + {post.pinnedYn === 'Y' && ( + + 📌 고정 )}

{post.title}

- 작성자: {post.author} + 작성자: {post.authorName} | - 소속: {post.organization} + 작성일: {new Date(post.regDtm).toLocaleDateString('ko-KR')} | - 작성일: {post.date} - | - 조회수: {post.views} + 조회수: {post.viewCnt} + {post.mdfcnDtm && ( + <> + | + 수정일: {new Date(post.mdfcnDtm).toLocaleDateString('ko-KR')} + + )}
- {/* Post Content */} + {/* 본문 */}
- {post.content} + {post.content || '(내용 없음)'}
- {/* Attachments (if any) */} + {/* 댓글 섹션 (향후 구현 예정) */}
-

첨부파일

-
-
- 📎 - 방제_매뉴얼_2025.pdf - (2.3 MB) -
-
-
- - {/* Comments Section */} -
-

댓글 (3)

- - {/* Comment Input */} -
-