[Feat] WTH-241 게시글 작성/수정/삭제 API 연결

src/app/(private)/(main)/board/(with-nav)/BoardNavClient.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
 
 import { BoardNav } from '@/components/board';
 import { useActiveBoardId, useSetActiveBoardId } from '@/stores/useBoardNavStore';
@@ -13,6 +14,10 @@ interface BoardNavClientProps {
 function BoardNavClient({ items }: BoardNavClientProps) {
   const activeBoardId = useActiveBoardId();
   const setActiveBoardId = useSetActiveBoardId();
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const isDetailPage = /^\/board\/\d+$/.test(pathname);
 
   useEffect(() => {
     if (activeBoardId === null) return;
@@ -22,7 +27,14 @@ function BoardNavClient({ items }: BoardNavClientProps) {
     }
   }, [items, activeBoardId, setActiveBoardId]);
 
-  return <BoardNav items={items} activeId={activeBoardId} onItemSelect={setActiveBoardId} />;
+  const handleItemSelect = (id: number | null) => {
+    setActiveBoardId(id);
+    if (isDetailPage) {
+      router.push('/board');
+    }
+  };
+
+  return <BoardNav items={items} activeId={activeBoardId} onItemSelect={handleItemSelect} />;
 }
 
 export { BoardNavClient };

src/app/(private)/(main)/board/(with-nav)/[id]/PostDetailContent.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
 import { Divider } from '@/components/ui';
 import {
   PostCard,
@@ -11,6 +13,7 @@
 } from '@/components/board';
 import { formatShortDateTime } from '@/lib/formatTime';
 import { toDisplayFile, isImageFileByType, mapComment } from '@/lib/board';
+import { useSetActiveBoardId } from '@/stores/useBoardNavStore';
 import { useUserId } from '@/stores/useUserStore';
 import type { PostDetail } from '@/types/board';
 import type { UploadFileItem } from '@/stores/usePostStore';
@@ -20,7 +23,13 @@
 }
 
 function PostDetailContent({ post }: PostDetailContentProps) {
+  const router = useRouter();
   const currentUserId = useUserId();
+  const setActiveBoardId = useSetActiveBoardId();
+
+  useEffect(() => {
+    setActiveBoardId(post.boardId);
+  }, [post.boardId, setActiveBoardId]);
 
   const isPostAuthor = currentUserId !== null && post.author.id === currentUserId;
   const imageFiles = post.fileUrls
@@ -30,7 +39,7 @@
     .filter((f) => !isImageFileByType(f.contentType))
     .map(toDisplayFile);
 
   const handleCommentSubmit = (_value: string, _file: UploadFileItem | null) => {
     // TODO: 댓글 작성 API 연동
   };
 
@@ -48,15 +57,16 @@
             date={formatShortDateTime(post.time)}
             hasAttachment={post.fileUrls.length > 0}
           />
-          {isPostAuthor && <PostActionMenu />}
+          {isPostAuthor && (
+            <PostActionMenu
+              postId={post.id}
+              onEdit={() => router.push(`/board/edit/${post.id}`)}
+              onDeleted={() => router.push('/board')}
+            />
+          )}
         </PostCard.Header>
 
-        <PostCard.Content
-          title={post.title}
-          content={post.content}
-          expandable={false}
-          variant="detail"
-        />
+        <PostCard.DetailContent title={post.title} content={post.content} isNew={post.isNew} />
 
         <PostCard.Images files={imageFiles} />
 

src/app/(private)/(main)/board/edit/[id]/EditClientEditor.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+import { CategorySelector, PostEditorShell } from '@/components/board';
+import { useBoardList } from '@/hooks';
+import { toBoardNavItem } from '@/lib/board';
+import { usePostStore } from '@/stores/usePostStore';
+import type { PostDetail } from '@/types/board';
+
+interface EditClientEditorProps {
+  post: PostDetail;
+}
+
+function EditClientEditor({ post }: EditClientEditorProps) {
+  const initializedRef = useRef(false);
+
+  useEffect(() => {
+    if (initializedRef.current) return;
+    initializedRef.current = true;
+    usePostStore.getState().initFromDetail(post);
+  }, [post]);
+
+  const { data: boards } = useBoardList();
+  const items = boards?.map(toBoardNavItem) ?? [];
+
+  const board = usePostStore((s) => s.board);
+  const setBoard = usePostStore((s) => s.setBoard);
+
+  const activeId = board ?? post.boardId;
+
+  return (
+    <PostEditorShell
+      align="center"
+      initialContent={post.content}
+      header={<CategorySelector items={items} activeId={activeId} onItemSelect={setBoard} />}
+    />
+  );
+}
+
+export { EditClientEditor };

src/app/(private)/(main)/board/edit/[id]/page.tsx

@@ -0,0 +1,30 @@
+import { notFound } from 'next/navigation';
+
+import { boardServerApi } from '@/lib/apis/board.server';
+import { EditClientEditor } from './EditClientEditor';
+
+interface PostEditPageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function PostEditPage({ params }: PostEditPageProps) {
+  const { id } = await params;
+  const postId = Number(id);
+
+  if (Number.isNaN(postId)) {
+    notFound();
+  }
+
+  // TODO: 추후 하드코딩된 clubId 제거 예정
+  const response = await boardServerApi.getPostById('YUNJcjFKMO', postId).catch(() => null);
+
+  if (!response?.data) {
+    notFound();
+  }
+
+  return (
+    <main className="w-full">
+      <EditClientEditor post={response.data} />
+    </main>
+  );
+}

src/app/(private)/(main)/board/write/ClientEditor.tsx

@@ -1,41 +1,50 @@
 'use client';
 
-import dynamic from 'next/dynamic';
-import { useEffect } from 'react';
+import { useEffect, useLayoutEffect } from 'react';
 
-import { TitleInput, CategorySelector } from '@/components/board';
+import { CategorySelector, PostEditorShell } from '@/components/board';
 import { useBoardList } from '@/hooks';
 import { toBoardNavItem } from '@/lib/board';
 import { usePostStore } from '@/stores/usePostStore';
-
-const Editor = dynamic(() => import('@/components/board/Editor'), { ssr: false });
+import { useActiveBoardId } from '@/stores/useBoardNavStore';
 
 export default function ClientEditor() {
   const { data: boards } = useBoardList();
   const items = boards?.map(toBoardNavItem) ?? [];
+  const writableItems = items.filter((item) => item.type !== 'ALL');
+  const activeBoardId = useActiveBoardId();
 
   const board = usePostStore((s) => s.board);
   const setBoard = usePostStore((s) => s.setBoard);
+  const reset = usePostStore((s) => s.reset);
 
-  const defaultId = items.find((item) => item.type === 'ALL')?.id ?? items[0]?.id ?? null;
+  const isWritable = (id: number | null) =>
+    id !== null && writableItems.some((item) => item.id === id);
 
-  useEffect(() => {
-    if (board === null && defaultId !== null) {
-      setBoard(defaultId);
+  useLayoutEffect(() => {
+    reset();
+    if (isWritable(activeBoardId)) {
+      setBoard(activeBoardId);
     }
-  }, [board, defaultId, setBoard]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- 마운트 시 1회만 실행
+  }, []);
+
+  const activeId = isWritable(board)
+    ? board
+    : isWritable(activeBoardId)
+      ? activeBoardId
+      : (writableItems[0]?.id ?? null);
 
-  const activeId = board ?? defaultId;
+  useEffect(() => {
+    if (board !== activeId && activeId !== null) {
+      setBoard(activeId);
+    }
+  }, [board, activeId, setBoard]);
 
   return (
-    <div className="mx-auto flex max-w-[1200px] flex-1 flex-col items-center gap-400 p-450">
-      <CategorySelector items={items} activeId={activeId} onItemSelect={setBoard} />
-      <div className="flex w-full flex-col items-start">
-        <TitleInput />
-        <div className="flex w-full items-center gap-200 rounded-lg p-100">
-          <Editor />
-        </div>
-      </div>
-    </div>
+    <PostEditorShell
+      align="center"
+      header={<CategorySelector items={items} activeId={activeId} onItemSelect={setBoard} />}
+    />
   );
 }

src/app/globals.css

@@ -523,11 +523,11 @@ select:focus {
 }
 
 .ProseMirror {
-  @apply text-text-strong min-h-[400px] focus:outline-none;
+  @apply text-text-strong focus:outline-none;
 }
 
-.ProseMirror > * {
-  @apply my-100;
+.ProseMirror:not(.prose-readonly) {
+  @apply flex-1;
 }
 
 /* placeholder */
@@ -541,23 +541,23 @@ select:focus {
 }
 
 .ProseMirror h1 {
-  @apply typo-h3 mt-300;
+  @apply typo-h3 mt-300 mb-100;
 }
 
 .ProseMirror h2 {
-  @apply typo-sub1 mt-300;
+  @apply typo-sub1 mt-300 mb-100;
 }
 
 .ProseMirror h3 {
-  @apply typo-sub2 mt-300;
+  @apply typo-sub2 mt-300 mb-100;
 }
 
 .ProseMirror ul {
-  @apply text-text-alternative my-0 list-disc py-0 pl-500;
+  @apply text-text-alternative my-0 list-disc py-100 pl-500;
 }
 
 .ProseMirror ol {
-  @apply text-text-alternative my-0 list-decimal py-0 pl-500;
+  @apply text-text-alternative my-0 list-decimal py-100 pl-500;
 }
 
 .ProseMirror ul li,
@@ -625,6 +625,10 @@ select:focus {
 }
 
 /* 인라인 코드 */
+.ProseMirror p:has(> code:not(pre code)) {
+  @apply py-100;
+}
+
 .ProseMirror code:not(pre code) {
   background-color: var(--container-code);
   color: var(--text-normal);

src/components/board/ActionMenu.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { MoreVerticalIcon } from '@/assets/icons';
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Icon,
+} from '@/components/ui';
+import { cn } from '@/lib/cn';
+import type { ButtonProps } from '@/components/ui';
+
+interface ActionMenuProps {
+  className?: string;
+  onEdit?: () => void;
+  onDeleteSelect?: (event: Event) => void;
+  triggerVariant?: ButtonProps['variant'];
+  triggerSize?: ButtonProps['size'];
+  triggerClassName?: string;
+}
+
+/**
+ * 수정/삭제 드롭다운 메뉴
+ *
+ * 외부 핸들러에 동작을 위임합니다. post 삭제처럼 확인 다이얼로그 + API 호출이
+ * 내장된 동작이 필요하면 `PostActionMenu`를 사용하세요.
+ */
+function ActionMenu({
+  className,
+  onEdit,
+  onDeleteSelect,
+  triggerVariant = 'tertiary',
+  triggerSize = 'icon-md',
+  triggerClassName,
+}: ActionMenuProps) {
+  return (
+    <DropdownMenu modal>
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          variant={triggerVariant}
+          size={triggerSize}
+          className={cn('h-600 w-600', triggerClassName, className)}
+          aria-label="더보기"
+          onClickCapture={(e) => e.stopPropagation()}
+        >
+          <Icon src={MoreVerticalIcon} size={16} className="text-icon-normal" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[144px]">
+        <DropdownMenuItem onSelect={onEdit}>수정</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem destructive onSelect={onDeleteSelect}>
+          삭제
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export { ActionMenu, type ActionMenuProps };