[Feat] WTH-136 : 마크다운 기반 게시글 작성 기능 구현

package.json

@@ -12,7 +12,35 @@
     "format:check": "prettier --check ."
   },
   "dependencies": {
+    "@tailwindcss/typography": "^0.5.19",
     "@tanstack/react-query": "^5.62.11",
+    "@tiptap/core": "2.4.0",
+    "@tiptap/extension-blockquote": "2.4.0",
+    "@tiptap/extension-bold": "2.4.0",
+    "@tiptap/extension-bubble-menu": "2.4.0",
+    "@tiptap/extension-bullet-list": "2.4.0",
+    "@tiptap/extension-code": "2.4.0",
+    "@tiptap/extension-code-block": "2.4.0",
+    "@tiptap/extension-document": "2.4.0",
+    "@tiptap/extension-dropcursor": "2.4.0",
+    "@tiptap/extension-floating-menu": "2.4.0",
+    "@tiptap/extension-gapcursor": "2.4.0",
+    "@tiptap/extension-hard-break": "2.4.0",
+    "@tiptap/extension-heading": "2.4.0",
+    "@tiptap/extension-history": "2.4.0",
+    "@tiptap/extension-horizontal-rule": "2.4.0",
+    "@tiptap/extension-italic": "2.4.0",
+    "@tiptap/extension-list-item": "2.4.0",
+    "@tiptap/extension-ordered-list": "2.4.0",
+    "@tiptap/extension-paragraph": "2.4.0",
+    "@tiptap/extension-placeholder": "2.4.0",
+    "@tiptap/extension-strike": "2.4.0",
+    "@tiptap/extension-task-item": "2.4.0",
+    "@tiptap/extension-task-list": "2.4.0",
+    "@tiptap/extension-text": "2.4.0",
+    "@tiptap/extension-typography": "2.4.0",
+    "@tiptap/pm": "2.4.0",
+    "@tiptap/react": "2.4.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.468.0",
@@ -22,6 +50,7 @@
     "react-dom": "19.2.3",
     "tailwind-merge": "^2.6.0",
     "tw-animate-css": "^1.4.0",
+    "tippy.js": "^6.3.7",
     "zustand": "^5.0.2"
   },
   "devDependencies": {

src/app/(private)/(main)/board/page.tsx

@@ -1,3 +1,13 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+const Editor = dynamic(() => import('@/components/board/Editor'), { ssr: false });
+
 export default function BoardPage() {
-  return <div>BoardPage</div>;
+  return (
+    <main className="mx-auto max-w-3xl p-8">
+      <Editor />
+    </main>
+  );
 }

src/app/globals.css

@@ -1,7 +1,7 @@
 @import 'tailwindcss';
-@import "tw-animate-css";
-
+@import 'tw-animate-css';
 @custom-variant dark (&:is(.dark *));
+@plugin "@tailwindcss/typography";
 
 @font-face {
   font-family: 'Pretendard Variable';
@@ -487,11 +487,65 @@ select:focus {
   background-clip: content-box;
 }
 
+.ProseMirror {
+  color: var(--text-normal);
+}
+
+/* 인용 */
+.ProseMirror blockquote {
+  font-style: italic;
+  border-left: 3px solid var(--line);
+  padding-left: 1rem;
+  margin: 1rem 0;
+  font-weight: normal;
+}
+
+.ProseMirror blockquote p::before,
+.ProseMirror blockquote p::after {
+  content: none !important;
+}
+
+/* 인라인 코드 */
+.ProseMirror code:not(pre code) {
+  background-color: var(--container-neutral-alternative);
+  color: var(--text-normal);
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-weight: normal;
+}
+
+.ProseMirror code::before,
+.ProseMirror code::after {
+  content: none;
+}
+
+/* 코드 블록 */
+.ProseMirror pre {
+  background-color: var(--container-neutral-alternative);
+  border-radius: 0.5rem;
+  padding: 0.75rem 1rem;
+}
+
+.ProseMirror pre code {
+  background-color: transparent;
+  color: var(--text-normal);
+  padding: 0;
+}
+
+.ProseMirror ul[data-type='taskList'] {
+  padding-left: 0;
+}
+
+.ProseMirror ul[data-type='taskList'] li p {
+  margin-top: 8px !important;
+  margin-bottom: 8px !important;
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
   }
   body {
     @apply bg-background text-foreground;
   }
-}
+}

src/components/board/Editor/SlashMenu.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import { Editor as TiptapEditor } from '@tiptap/core';
+import { useEffect, useMemo, useState, useCallback, useRef } from 'react';
+import { STYLE_ITEMS, INSERT_ITEMS } from '@/constants/editor';
+import { MenuItem } from '@/types/editor';
+
+interface SlashMenuContentProps {
+  editor: TiptapEditor;
+  onClose: () => void;
+}
+
+/**
+ * Slash Command 메뉴 UI
+ *
+ * 역할:
+ * - '/' 입력 후 나타나는 커맨드 목록 렌더링
+ * - 키보드 탐색 (↑ ↓ Enter Escape)
+ * - 선택 시 slash 문자 제거 후 해당 command 실행
+ */
+
+export function SlashMenuContent({ editor, onClose }: SlashMenuContentProps) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  /**
+   * 그룹 구조 정의
+   */
+  const GROUPS = useMemo(
+    () => [
+      { title: 'Style', items: STYLE_ITEMS },
+      { title: 'Insert', items: INSERT_ITEMS },
+    ],
+    [],
+  );
+
+  const flatItems = useMemo(() => GROUPS.flatMap((group) => group.items), [GROUPS]);
+
+  useEffect(() => {
+    if (flatItems.length === 0) {
+      setSelectedIndex(0);
+      return;
+    }
+
+    if (selectedIndex >= flatItems.length) {
+      setSelectedIndex(0);
+    }
+  }, [flatItems.length, selectedIndex]);
+
+  // 선택된 아이템이 스크롤 영역 밖에 있을 때 자동 스크롤
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    const selectedEl = container.querySelector<HTMLElement>(`[data-index="${selectedIndex}"]`);
+    selectedEl?.scrollIntoView({ block: 'nearest' });
+  }, [selectedIndex]);
+
+  // 메뉴 선택 시 실행
+  const handleSelect = useCallback(
+    (item: MenuItem) => {
+      const { $anchor } = editor.state.selection;
+
+      const from = $anchor.pos - 1;
+      const to = $anchor.pos;
+
+      editor.chain().focus().deleteRange({ from, to }).run();
+      item.command(editor);
+      onClose();
+    },
+    [editor, onClose],
+  );
+
+  // 키보드 이벤트 핸들링
+  useEffect(() => {
+    if (flatItems.length === 0) return;
+
+    const dom = editor.view.dom;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setSelectedIndex((prev) => (prev + 1) % flatItems.length);
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setSelectedIndex((prev) => (prev - 1 + flatItems.length) % flatItems.length);
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        e.stopPropagation();
+        const item = flatItems[selectedIndex];
+        if (item) handleSelect(item);
+      } else if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    dom.addEventListener('keydown', handleKeyDown);
+    return () => dom.removeEventListener('keydown', handleKeyDown);
+  }, [editor, flatItems, selectedIndex, handleSelect, onClose]);
+
+  if (flatItems.length === 0) return null;
+
+  // runningIndex는 그룹을 넘어서도 연속된 flat index를 부여하기 위해 사용
+  let runningIndex = 0;
+
+  return (
+    <div className="border-line bg-container-neutral w-64 overflow-hidden rounded-lg border shadow-xl">
+      <div ref={scrollContainerRef} className="max-h-80 overflow-x-hidden overflow-y-auto">
+        {GROUPS.map((group, groupIdx) => (
+          <div key={group.title}>
+            <div className={`px-3 pt-2 pb-1 ${groupIdx !== 0 ? 'border-line border-t' : ''}`}>
+              <p className="text-text-disabled text-xs font-semibold tracking-wider uppercase">
+                {group.title}
+              </p>
+            </div>
+
+            {group.items.map((item) => {
+              const currentIndex = runningIndex++;
+              const isSelected = currentIndex === selectedIndex;
+
+              return (
+                <button
+                  key={item.label}
+                  type="button"
+                  data-index={currentIndex}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    handleSelect(item);
+                  }}
+                  className={`flex w-full items-center gap-3 px-3 py-2 text-left transition-colors ${
+                    isSelected
+                      ? 'bg-container-neutral-interaction'
+                      : 'hover:bg-container-neutral-alternative'
+                  }`}
+                >
+                  <span className="border-line bg-container-neutral-alternative text-text-alternative flex h-8 w-8 shrink-0 items-center justify-center rounded border text-sm font-medium">
+                    {item.icon}
+                  </span>
+                  <div>
+                    <p className="text-text-strong text-sm font-medium">{item.label}</p>
+                    <p className="text-text-disabled text-xs">{item.description}</p>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        ))}
+
+        <div className="pb-1" />
+      </div>
+    </div>
+  );
+}