[feat] 커뮤니티 게시판 CRUD 및 에디터 기능 구현

package.json

@@ -12,6 +12,15 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.96.2",
+    "@tiptap/core": "^3.31.3",
+    "@tiptap/extension-character-count": "^3.31.3",
+    "@tiptap/extension-color": "^3.31.3",
+    "@tiptap/extension-placeholder": "^3.31.3",
+    "@tiptap/extension-text-style": "^3.31.3",
+    "@tiptap/pm": "^3.31.3",
+    "@tiptap/react": "^3.31.3",
+    "@tiptap/starter-kit": "^3.31.3",
+    "@tiptap/suggestion": "^3.31.3",
     "@vercel/analytics": "^2.0.1",
     "@vercel/speed-insights": "^2.0.0",
     "axios": "^1.14.0",

src/App.jsx

@@ -20,6 +20,9 @@ import ConcertDetailPage from '@/pages/ConcertDetailPage'
 import ConcertsPage from '@/pages/ConcertsPage'
 import ReleaseDetailPage from '@/pages/ReleaseDetailPage'
 import ReleasesPage from '@/pages/ReleasesPage'
+import PostDetailPage from '@/pages/PostDetailPage'
+import PostsPage from '@/pages/PostsPage'
+import PostWritePage from '@/pages/PostWritePage'
 import HomePage from '@/pages/HomePage'
 import MyPage from '@/pages/MyPage'
 import NotFoundPage from '@/pages/NotFoundPage'
@@ -65,6 +68,10 @@ function App() {
         <Route path="/releases/:id" element={<ReleaseDetailPage />} />
         <Route path={ROUTES.CALENDAR} element={<CalendarPage />} />
         <Route path={ROUTES.SEARCH} element={<div>통합 검색</div>} />
+        <Route path={ROUTES.COMMUNITY} element={<PostsPage />} />
+        <Route path={ROUTES.COMMUNITY_WRITE} element={<PrivateRoute><PostWritePage /></PrivateRoute>} />
+        <Route path="/community/:id/edit" element={<PrivateRoute><PostWritePage /></PrivateRoute>} />
+        <Route path="/community/:id" element={<PostDetailPage />} />
         <Route path={ROUTES.TERMS} element={<PolicyPage title="서비스 이용약관" content={TERMS_CONTENT} />} />
         <Route path={ROUTES.PRIVACY} element={<PolicyPage title="개인정보처리방침" content={PRIVACY_CONTENT} />} />
         <Route path={ROUTES.ME} element={<PrivateRoute><MyPage /></PrivateRoute>} />

src/components/auth/LoginModal.module.css

@@ -158,6 +158,10 @@
   cursor: pointer;
 }
 
+.devSelect:focus-visible {
+  border-color: var(--color-accent-light);
+}
+
 .devBtn {
   padding: 0.5rem 0.75rem;
   font-size: 0.875rem;

src/components/concert/AddArtistModal.module.css

@@ -66,8 +66,6 @@
   transition: border-color 0.15s;
 }
 
-.searchInput:focus { border-color: var(--color-accent); }
-
 .searchBtn {
   padding: 0.5625rem 1rem;
   border-radius: var(--radius-md);

src/components/layout/Header.jsx

@@ -15,6 +15,7 @@ const NAV_LINKS = [
   { to: ROUTES.ARTISTS, label: '아티스트' },
   { to: ROUTES.CALENDAR, label: '캘린더' },
   { to: ROUTES.RELEASES, label: '음악' },
+  { to: ROUTES.COMMUNITY, label: '커뮤니티' },
 ]
 
 function Header() {

src/components/post/PostContentView.jsx

@@ -0,0 +1,27 @@
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import Color from '@tiptap/extension-color'
+import { TextStyle } from '@tiptap/extension-text-style'
+
+import { EntityMentionCard, EntityMentionChip } from './editor/entityMentionExtensions'
+import styles from './PostContentView.module.css'
+
+// 작성 시 저장된 Tiptap JSON을 읽기 전용 에디터로 그대로 다시 렌더링한다 —
+// 멘션 카드 NodeView를 작성/열람 양쪽에서 동일하게 재사용하기 위함
+function PostContentView({ content }) {
+  const editor = useEditor({
+    extensions: [StarterKit, TextStyle, Color, EntityMentionCard, EntityMentionChip],
+    content,
+    editable: false,
+  })
+
+  if (!editor) return null
+
+  return (
+    <div className={styles.prose}>
+      <EditorContent editor={editor} />
+    </div>
+  )
+}
+
+export default PostContentView

src/components/post/PostContentView.module.css

@@ -0,0 +1,79 @@
+.prose {
+  max-width: 42rem;
+  font-size: 0.9375rem;
+  line-height: 1.8;
+  color: var(--color-text);
+}
+
+.prose :global(.ProseMirror) {
+  outline: none;
+}
+
+.prose :global(p) {
+  margin: 0 0 0.875rem;
+}
+
+.prose :global(p:last-child) {
+  margin-bottom: 0;
+}
+
+.prose :global(h1),
+.prose :global(h2),
+.prose :global(h3) {
+  margin: 1.5rem 0 0.75rem;
+  font-weight: 700;
+  line-height: 1.35;
+  color: var(--color-text);
+}
+
+.prose :global(h1:first-child),
+.prose :global(h2:first-child),
+.prose :global(h3:first-child) {
+  margin-top: 0;
+}
+
+.prose :global(h1) {
+  font-size: 1.5rem;
+}
+
+.prose :global(h2) {
+  font-size: 1.3125rem;
+}
+
+.prose :global(h3) {
+  font-size: 1.1875rem;
+}
+
+.prose :global(ul),
+.prose :global(ol) {
+  margin: 0 0 0.875rem;
+  padding-left: 1.25rem;
+}
+
+.prose :global(li) {
+  margin: 0.3125rem 0;
+}
+
+.prose :global(li p) {
+  margin: 0;
+}
+
+.prose :global(blockquote) {
+  margin: 0 0 0.875rem;
+  padding-left: 0.875rem;
+  border-left: 3px solid var(--color-border);
+  color: var(--color-text-muted);
+}
+
+.prose :global(a) {
+  color: var(--color-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* 엔티티 멘션 카드·칩은 NodeViewWrapper로 감싸진 자체 링크 스타일을 쓰므로
+   위 범용 링크 스타일(빨간 밑줄)이 덮어쓰지 않도록 분리한다 */
+.prose :global([data-node-view-wrapper] a) {
+  color: inherit;
+  text-decoration: none;
+}

src/components/post/PostListItem.jsx

@@ -0,0 +1,59 @@
+import { Link } from 'react-router-dom'
+
+import { ROUTES } from '@/constants/routes'
+import { MENTION_TYPE_LABEL, POST_CATEGORY_LABEL } from '@/constants/post'
+import { formatPostDate } from '@/utils/date'
+import styles from './PostListItem.module.css'
+
+const MAX_VISIBLE_TAGS = 2
+
+function PostListItem({ post }) {
+  const { id, category, title, authorNickname, recommendCount, viewCount, createdAt, entityTags } = post
+  const visibleTags = entityTags?.slice(0, MAX_VISIBLE_TAGS) ?? []
+  const hiddenTagCount = (entityTags?.length ?? 0) - visibleTags.length
+
+  return (
+    <Link to={ROUTES.COMMUNITY_DETAIL(id)} className={styles.row}>
+      <div className={styles.main}>
+        <span className={styles.badge}>
+          {POST_CATEGORY_LABEL[category] ?? category}
+        </span>
+        <span className={styles.title}>{title}</span>
+      </div>
+      <div className={styles.bottomRow}>
+        <div className={styles.meta}>
+          <span className={styles.author}>{authorNickname ?? '탈퇴 회원'}</span>
+          <span className={styles.dot} aria-hidden="true">·</span>
+          <span className={styles.date}>{formatPostDate(createdAt)}</span>
+          <span className={styles.dot} aria-hidden="true">·</span>
+          <span className={styles.stat}>
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" />
+              <circle cx="12" cy="12" r="3" />
+            </svg>
+            {viewCount.toLocaleString()}
+          </span>
+          <span className={styles.stat}>
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" />
+            </svg>
+            {recommendCount.toLocaleString()}
+          </span>
+        </div>
+        {visibleTags.length > 0 && (
+          <div className={styles.tags}>
+            <span className={styles.dot} aria-hidden="true">·</span>
+            {visibleTags.map((tag) => (
+              <span key={`${tag.entityType}:${tag.entityId}`} className={styles.tagChip}>
+                {MENTION_TYPE_LABEL[tag.entityType]} · {tag.title}
+              </span>
+            ))}
+            {hiddenTagCount > 0 && <span className={styles.tagChip}>+{hiddenTagCount}</span>}
+          </div>
+        )}
+      </div>
+    </Link>
+  )
+}
+
+export default PostListItem

src/components/post/PostListItem.module.css

@@ -0,0 +1,110 @@
+.row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  padding: 1rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  color: inherit;
+  text-decoration: none;
+  transition: border-color 0.15s;
+}
+
+.row:hover {
+  border-color: var(--color-accent-border);
+}
+
+.main {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  min-width: 0;
+}
+
+.bottomRow {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.tags {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 0.375rem;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.tagChip {
+  flex-shrink: 0;
+  max-width: 9.5rem;
+  padding: 0.125rem 0.5rem;
+  font-size: 0.6875rem;
+  color: var(--color-text-muted);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xs);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.badge {
+  flex-shrink: 0;
+  padding: 0.2em 0.55em;
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  color: var(--color-text-muted);
+  background: var(--color-surface-hover);
+  border-radius: var(--radius-xs);
+  line-height: 1.4;
+}
+
+.title {
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: var(--color-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  flex-shrink: 0;
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.dot {
+  opacity: 0.6;
+}
+
+.stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+@media (max-width: 767px) {
+  .bottomRow {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.375rem;
+  }
+
+  .meta {
+    align-self: stretch;
+  }
+
+  .tags .dot {
+    display: none;
+  }
+}

src/components/post/PostListItemSkeleton.jsx

@@ -0,0 +1,15 @@
+import styles from './PostListItemSkeleton.module.css'
+
+function PostListItemSkeleton() {
+  return (
+    <div className={styles.row}>
+      <div className={styles.main}>
+        <div className={styles.badge} />
+        <div className={styles.title} />
+      </div>
+      <div className={styles.meta} />
+    </div>
+  )
+}
+
+export default PostListItemSkeleton