diff --git a/package-lock.json b/package-lock.json
index 1c2bf64..2dd5f25 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,15 @@
       "version": "0.0.0",
       "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",
@@ -969,6 +978,503 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@tiptap/core": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-3.31.3.tgz",
+      "integrity": "sha512-Cz50pvciQrxdSxgTkHOVz0uD0Yl/8Xt0QatGD6ILm47jW8EzyHR9RkUGs/D5IqzXKuVPntfw1ttaT926vXfiRg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/pm": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-blockquote": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-3.31.3.tgz",
+      "integrity": "sha512-fyY2XMbyDDDfOTQ1Qdrnqa1qwC9DWE4n7AfE0EKQI0G8MfLV8RaDlLDcOZDJ9JbMPY7/Gx7EjyK4NKxSW9n2hQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.31.3",
+        "@tiptap/pm": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-bold": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-3.31.3.tgz",
+      "integrity": "sha512-dIuYhKk8TitKU/FeDpoTeWZhU42YgDN5npgWNjAmMmRktPdoxnH3/wGSiwXlqZgJWjehN7kPWDePWpJeAImGpQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-bubble-menu": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-3.31.3.tgz",
+      "integrity": "sha512-EV6ZnwKc++2OM/OcD54n8s1B7C9LP7GKAtdEPwu0t3BYJf3sG8Ueoinf7SgGPO9oMPg96GneOkDNm1urMV167g==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.31.3",
+        "@tiptap/pm": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-bullet-list": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-3.31.3.tgz",
+      "integrity": "sha512-qEyyoPapPef4LO8XKaN83bxtaNzkJ4kFn/IxLnEKd4BJ3Mvi4MH2yJYlyDqwFnMoev4pMA1zBHRAt/C0THRmZw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-list": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-character-count": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-character-count/-/extension-character-count-3.31.3.tgz",
+      "integrity": "sha512-PVYEnEUqzjwSMfhHW+TzgoNB4UqYQQLKsY97CBsfuRswEfsqeViN3kMEuJEMMzN2fFnkB0hkRTpGlnMYcbd6Ag==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extensions": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-code": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-3.31.3.tgz",
+      "integrity": "sha512-SzxOqchrD2AcN3uT67PjKmRFEMOU3vNNiwNaamZJUbZrI6Hmy+bvdHJrc3jrIddyyCrAtsnAfRI0cmorW1jGfg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-code-block": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-3.31.3.tgz",
+      "integrity": "sha512-nvknt4FhyJQjYcvxptmeUlFsIAc8ibua3E5BN4Pim374/9RWepH4cdE9X0/qUTtguHElLx0iKtSIY3rW2qGTFA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.31.3",
+        "@tiptap/pm": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-color": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-color/-/extension-color-3.31.3.tgz",
+      "integrity": "sha512-rsZ/HlCYagMoyqn8kKxLYaZwHvowGUTeHVVxEuMJqTantIrnnQMSQUA3a7+X22l2eD7ec/LlG4bBGPjw+gf3tw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-text-style": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-document": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-3.31.3.tgz",
+      "integrity": "sha512-EexgmqnyDNyGlISxo7SMrp5MygpJYmqD+0cY5jB6L1U6L4CpKKRWUt8OO1sWzEHDE1+TTvwt+WIFoIWAziOtEA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-dropcursor": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-3.31.3.tgz",
+      "integrity": "sha512-NWomSfu5CSC7VacnMSDzKT8qm66SzMfZwVPEtwY5bPpRTJgTiT1rNK0neDrrzfMN27MfylGyKWWf7Q5Qf8w/fg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extensions": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-floating-menu": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-3.31.3.tgz",
+      "integrity": "sha512-rd4VJ9PGSP9Eop8ZTEwaLZcMzMXLuJKe3hUNf58rq+zANpwM+9fI+vB7g9MAc3eXwUNDxNDVACFIL2oeBqpQ3A==",
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@floating-ui/dom": "^1.0.0",
+        "@tiptap/core": "3.31.3",
+        "@tiptap/pm": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-gapcursor": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-3.31.3.tgz",
+      "integrity": "sha512-EBXKb1FrVStsNYCcRGtd9jmzveCvR+eqgg1rVqoONrqFK6U7bga6LN+1dMKroP1kliDVgveYkP3vRYxqw+rFqg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extensions": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-hard-break": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-3.31.3.tgz",
+      "integrity": "sha512-QAdCvNO4+yW9ATwsrej11NTkDYFqPLIEQr3ARNrKOK1qaiS7A0fia2SEukb/hrkP3A6mbozhoQt2r2RGUf/DpQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-heading": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-3.31.3.tgz",
+      "integrity": "sha512-rk5VHMAeQcg06SLauN6EGdD2jc0O2qY8QkZYPd0LxNvLblw2BxBx+lxUQSYwLAT9Ie5914gKIK2YbRyO2Ts3ig==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-horizontal-rule": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-3.31.3.tgz",
+      "integrity": "sha512-YnHGy2KShRwvCseAmmxl9VP7R0qaj8QMp3DA6DJWZqp7r5gLGvDkAqhedxqqefqsE4Y43hjkBdjtB9Ce78LkIw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.31.3",
+        "@tiptap/pm": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-italic": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-3.31.3.tgz",
+      "integrity": "sha512-ibGvdvAPyfxBMUVNRI43eb9h2/Jka1MRG5GtnGqbcCX/2+Y/y0EOfFrPQPkuYphiWQYyu9+FzPKMB/pjuaLuKQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-link": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-link/-/extension-link-3.31.3.tgz",
+      "integrity": "sha512-986wOQzTL9Zr5lf84LCLpm+YOms8A0K39/8DVoqRfebqcOe0/eq4bnztmAlfabOd+kJY92g3AgZERFUx/w+dcw==",
+      "license": "MIT",
+      "dependencies": {
+        "linkifyjs": "^4.3.3"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.31.3",
+        "@tiptap/pm": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-list": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list/-/extension-list-3.31.3.tgz",
+      "integrity": "sha512-LoveGnC0FVdCV4jUNBaG1ZA+KWE07+adzV3kGy6uUYFcJEjbVUHTnPDrBOob3IwOSO3sCwIkvQb6EVYeXn/4yg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.31.3",
+        "@tiptap/pm": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-list-item": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-3.31.3.tgz",
+      "integrity": "sha512-4QlKOriJJMvg95QJTEsy9BUYPBQ6UvJyb8WURRwdUtQUkkqb8h32lg/eyQUv2FzW9IT1AdUyNZfVaxH64kRfQA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-list": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-list-keymap": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-keymap/-/extension-list-keymap-3.31.3.tgz",
+      "integrity": "sha512-If8UOEdDZbPJU6iYTvLtH6DOp2KBy6BKxg9UELL1AevVetGHEF/7lW8hP50Gn1tHMVpPRqmhSzVrJRpEJJgb/Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-list": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-ordered-list": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-3.31.3.tgz",
+      "integrity": "sha512-mp3g11NgA/PYu8rj7J7Ez3l4qBy6WfTSmHIG4PZvEGG5w2oUAIkgb9DU7nPPzjmeme27oazFYZw+AtZA0+u4tw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-list": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-paragraph": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-3.31.3.tgz",
+      "integrity": "sha512-+iPku7wJfy5hbNDNLX8dveFtYVsZMmh7vztjuq8hT3mipSC4IByDehDbU8fzUCjfXiEzmI7mQn7c8LGmHULuzA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-placeholder": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-placeholder/-/extension-placeholder-3.31.3.tgz",
+      "integrity": "sha512-9jYtR8ELEw7GVaruyrm4oFkPcjig9Q+crc+dpmarhBNXUmxagCdlhVzNwCJ2WJRzvBAtx59sEYqNTU38Wx8S3A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extensions": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-strike": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-3.31.3.tgz",
+      "integrity": "sha512-G29bhKttYwcKHT+BI6emWVFol3RO/gUXxQVcmr/iT8LXXy7j8J6HFUnsKM+Kg5YlP1rxMRgsa65dbrQVahZi0A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-text": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-3.31.3.tgz",
+      "integrity": "sha512-gdsWtF+taeaCu6V+5Ct10fGo0ACUy1GnYtbb+mcathBt8OqbT+Ws60p/yEmKesBDz2Hn+B5IcWy6+2BBZl5ZTg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-text-style": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text-style/-/extension-text-style-3.31.3.tgz",
+      "integrity": "sha512-wgjWWrjZwRZHiaDTQPX2am1y/4ePgRgGWF/2MOfSb7g4d5229p4aVtbT1JT7wu9z8OC482pEqcTlhdvgftvW7A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extension-underline": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-3.31.3.tgz",
+      "integrity": "sha512-HghdJaOwRqYzsAxqSyNyb+IWyOMcdCl8IoiBETA9BZCJAqdXzFLcuWp7CqCqJPam9dgkWosSoHqTCAO4nTBfpw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/extensions": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extensions/-/extensions-3.31.3.tgz",
+      "integrity": "sha512-8sJNPGGUe8f3aDojcOW5cfVL7I5NrBbE0UWxG08qoi9Tea6qWbvQJsCR9tsrOapr/DaLr3kpbGZ9s1gEEfcNcA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.31.3",
+        "@tiptap/pm": "3.31.3"
+      }
+    },
+    "node_modules/@tiptap/pm": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-3.31.3.tgz",
+      "integrity": "sha512-sZime0SWsz/k62W2WvHx5Ig7G2h7kVhrrmnqy+wEgIHfDwEfOlelRjaWCiBCFlF7dxGUntJusCh9FxlLhni0Ag==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-changeset": "^2.4.1",
+        "prosemirror-commands": "^1.7.1",
+        "prosemirror-dropcursor": "^1.8.2",
+        "prosemirror-gapcursor": "^1.4.1",
+        "prosemirror-history": "^1.5.0",
+        "prosemirror-inputrules": "^1.5.1",
+        "prosemirror-keymap": "^1.2.3",
+        "prosemirror-model": "^1.25.11",
+        "prosemirror-schema-list": "^1.5.1",
+        "prosemirror-state": "^1.4.4",
+        "prosemirror-tables": "^1.8.5",
+        "prosemirror-transform": "^1.12.0",
+        "prosemirror-view": "^1.42.3"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
+    "node_modules/@tiptap/react": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/react/-/react-3.31.3.tgz",
+      "integrity": "sha512-QiwQqvaLFLm5EMFu5tg7nAgXJxCUiUTLD8EsK+TqVV5P4bqOoMOCM39khbhXTJyahCuYpiFWx5YOSDtC/JiPtg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "fast-equals": "^5.3.3",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "optionalDependencies": {
+        "@tiptap/extension-bubble-menu": "^3.31.3",
+        "@tiptap/extension-floating-menu": "^3.31.3"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.31.3",
+        "@tiptap/pm": "3.31.3",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tiptap/starter-kit": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-3.31.3.tgz",
+      "integrity": "sha512-WKof9RewdmGHvWJ1wn0/HVNG2mV+HOgVRyJkKekuM9fgr6BZAAH/xZsWE1eon+94JnQ+KtK2ThydXQM/qc6b2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@tiptap/core": "3.31.3",
+        "@tiptap/extension-blockquote": "3.31.3",
+        "@tiptap/extension-bold": "3.31.3",
+        "@tiptap/extension-bullet-list": "3.31.3",
+        "@tiptap/extension-code": "3.31.3",
+        "@tiptap/extension-code-block": "3.31.3",
+        "@tiptap/extension-document": "3.31.3",
+        "@tiptap/extension-dropcursor": "3.31.3",
+        "@tiptap/extension-gapcursor": "3.31.3",
+        "@tiptap/extension-hard-break": "3.31.3",
+        "@tiptap/extension-heading": "3.31.3",
+        "@tiptap/extension-horizontal-rule": "3.31.3",
+        "@tiptap/extension-italic": "3.31.3",
+        "@tiptap/extension-link": "3.31.3",
+        "@tiptap/extension-list": "3.31.3",
+        "@tiptap/extension-list-item": "3.31.3",
+        "@tiptap/extension-list-keymap": "3.31.3",
+        "@tiptap/extension-ordered-list": "3.31.3",
+        "@tiptap/extension-paragraph": "3.31.3",
+        "@tiptap/extension-strike": "3.31.3",
+        "@tiptap/extension-text": "3.31.3",
+        "@tiptap/extension-underline": "3.31.3",
+        "@tiptap/extensions": "3.31.3",
+        "@tiptap/pm": "3.31.3"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
+    "node_modules/@tiptap/suggestion": {
+      "version": "3.31.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/suggestion/-/suggestion-3.31.3.tgz",
+      "integrity": "sha512-z1OQ/Yx6seMZehi1AcmNkyJ8qkHQzybArmCyRdmreS4YL9C4bPMBe5lbMfFsArYs+KD5JyHwps5j7J/YE5BIuw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@floating-ui/dom": "^1.0.0",
+        "@tiptap/core": "3.31.3",
+        "@tiptap/pm": "3.31.3"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
@@ -998,7 +1504,6 @@
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -1008,12 +1513,17 @@
       "version": "19.2.3",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
-      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@vercel/analytics": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-2.0.1.tgz",
@@ -1426,7 +1936,6 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/date-fns": {
@@ -1762,6 +2271,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-equals": {
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.4.2.tgz",
+      "integrity": "sha512-Ywe6jodPTWOTL9/k0bV7gdfP8twKL5Y8I8CZ933fAY5gBekICZSUQTbyH6ut2NZCNyB05mSUwAuEqdEIaOOlDQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -2144,9 +2662,9 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.1.tgz",
-      "integrity": "sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==",
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.2.tgz",
+      "integrity": "sha512-SFNOvSJ+Dgf/9An904Yx+CgSlIPCkIpao4qo51lpee25TIRejdH3rhR4EZMGoNx3/TP3O+wzWuiTFl4sqbltzA==",
       "dev": true,
       "funding": [
         {
@@ -2510,6 +3028,12 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/linkifyjs": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.3.3.tgz",
+      "integrity": "sha512-P8aEP5U/D1/IlTY2OeYsErdwh9bGuLE30NcXtKEjgdHcahveQoQwM2yZNsioQHsWFz0P7KKudisbrzCgR0sDHg==",
+      "license": "MIT"
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -2646,6 +3170,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/orderedmap": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.1.tgz",
+      "integrity": "sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==",
+      "license": "MIT"
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -2817,6 +3347,145 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prosemirror-changeset": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.4.2.tgz",
+      "integrity": "sha512-ViYrjMSg3YFiXwIhKaluu+/mi3Yrxt6AR8ri14ulTaGcZtXO1CThl7A2gv79qx5fQnOw8woKwyBU2u+9PVCm3w==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-commands": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.7.2.tgz",
+      "integrity": "sha512-q6Q6szxqdu9Xd6EcdKsqXghu5nQdZTpB4Q9yd04WRc7/jt763e/rT60Owh0L1GYY+T46o5rD+9lEN36dZS43tw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.10.2"
+      }
+    },
+    "node_modules/prosemirror-dropcursor": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.3.tgz",
+      "integrity": "sha512-FoYbsJR8gK+DGlqhNoE29Loa38eIZPzQRIb1VMaDNBoo4OLP6vVof/jR8qFY/6XvUd6Dhug8MDCHl2a/h8RTfQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0",
+        "prosemirror-view": "^1.1.0"
+      }
+    },
+    "node_modules/prosemirror-gapcursor": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.4.1.tgz",
+      "integrity": "sha512-pMdYaEnjNMSwl11yjEGtgTmLkR08m/Vl+Jj443167p9eB3HVQKhYCc4gmHVDsLPODfZfjr/MmirsdyZziXbQKw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-keymap": "^1.0.0",
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-view": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-history": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.5.0.tgz",
+      "integrity": "sha512-zlzTiH01eKA55UAf1MEjtssJeHnGxO0j4K4Dpx+gnmX9n+SHNlDqI2oO1Kv1iPN5B1dm5fsljCfqKF9nFL6HRg==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.2.2",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.31.0",
+        "rope-sequence": "^1.3.0"
+      }
+    },
+    "node_modules/prosemirror-inputrules": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.5.1.tgz",
+      "integrity": "sha512-7wj4uMjKaXWAQ1CDgxNzNtR9AlsuwzHfdFH1ygEHA2KHF2DOEaXl1CJfNPAKCg9qNEh4rum975QLaCiQPyY6Fw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-keymap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.3.tgz",
+      "integrity": "sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "w3c-keyname": "^2.2.0"
+      }
+    },
+    "node_modules/prosemirror-model": {
+      "version": "1.25.11",
+      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.11.tgz",
+      "integrity": "sha512-QWg9RhnpLlogAmp3p96uEFrE5txQpFynd4vhBAELkwgOCWQs/X0yCzB3/hrHqiPwf91RG5KyWq6553zs9JqIOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "orderedmap": "^2.0.0"
+      }
+    },
+    "node_modules/prosemirror-schema-list": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.5.1.tgz",
+      "integrity": "sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.7.3"
+      }
+    },
+    "node_modules/prosemirror-state": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.4.tgz",
+      "integrity": "sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.27.0"
+      }
+    },
+    "node_modules/prosemirror-tables": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.8.5.tgz",
+      "integrity": "sha512-V/0cDCsHKHe/tfWkeCmthNUcEp1IVO3p6vwN8XtwE9PZQLAZJigbw3QoraAdfJPir4NKJtNvOB8oYGKRl+t0Dw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-keymap": "^1.2.3",
+        "prosemirror-model": "^1.25.4",
+        "prosemirror-state": "^1.4.4",
+        "prosemirror-transform": "^1.10.5",
+        "prosemirror-view": "^1.41.4"
+      }
+    },
+    "node_modules/prosemirror-transform": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.12.1.tgz",
+      "integrity": "sha512-t4F5615FycnCqsX7ShTUs8+jfnwcf46kuFRvSl/3qFx2QTZ4DjgowesLHQXcFP7G//TjesqZG3WtgL7vdyVJyA==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.21.0"
+      }
+    },
+    "node_modules/prosemirror-view": {
+      "version": "1.42.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.42.3.tgz",
+      "integrity": "sha512-oTN7EtH+CpwxU9NrwEYWd0UZ4JUx7l048l5A2Xppm4p/60isZYLnth9QVQmC3VRIvdrIWCxwZSd+Uz791G31/w==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.25.8",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
@@ -2967,6 +3636,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/rope-sequence": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
+      "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==",
+      "license": "MIT"
+    },
     "node_modules/scheduler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
@@ -3133,6 +3808,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.7.0.tgz",
+      "integrity": "sha512-6L+EeigHMQhdaIPNIFUKwfWJSwWFQ8gJbJ2DLOs5sDIegTwR9fRxvnM3uciHKjIZhFz+KAv2emhWMRvDmMcY8A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "8.1.3",
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.1.3.tgz",
@@ -3211,6 +3895,12 @@
         }
       }
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index f38f8a0..547c5dd 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.jsx b/src/App.jsx
index f152479..9b1634c 100644
--- a/src/App.jsx
+++ b/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>} />
diff --git a/src/components/auth/LoginModal.module.css b/src/components/auth/LoginModal.module.css
index 805a9f2..1577301 100644
--- a/src/components/auth/LoginModal.module.css
+++ b/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;
diff --git a/src/components/concert/AddArtistModal.module.css b/src/components/concert/AddArtistModal.module.css
index 82c6f6c..df81e30 100644
--- a/src/components/concert/AddArtistModal.module.css
+++ b/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);
diff --git a/src/components/layout/Header.jsx b/src/components/layout/Header.jsx
index 8da5090..72541db 100644
--- a/src/components/layout/Header.jsx
+++ b/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() {
diff --git a/src/components/post/PostContentView.jsx b/src/components/post/PostContentView.jsx
new file mode 100644
index 0000000..a957372
--- /dev/null
+++ b/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
diff --git a/src/components/post/PostContentView.module.css b/src/components/post/PostContentView.module.css
new file mode 100644
index 0000000..edb9d05
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/post/PostListItem.jsx b/src/components/post/PostListItem.jsx
new file mode 100644
index 0000000..eb5b1a5
--- /dev/null
+++ b/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
diff --git a/src/components/post/PostListItem.module.css b/src/components/post/PostListItem.module.css
new file mode 100644
index 0000000..4b59ecb
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/components/post/PostListItemSkeleton.jsx b/src/components/post/PostListItemSkeleton.jsx
new file mode 100644
index 0000000..7693355
--- /dev/null
+++ b/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
diff --git a/src/components/post/PostListItemSkeleton.module.css b/src/components/post/PostListItemSkeleton.module.css
new file mode 100644
index 0000000..260d47c
--- /dev/null
+++ b/src/components/post/PostListItemSkeleton.module.css
@@ -0,0 +1,66 @@
+@keyframes shimmer {
+  0% { background-position: -400px 0; }
+  100% { background-position: 400px 0; }
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+}
+
+.main {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.badge,
+.title,
+.meta {
+  border-radius: var(--radius-sm);
+  background: linear-gradient(
+    90deg,
+    var(--color-surface) 25%,
+    var(--color-surface-hover) 50%,
+    var(--color-surface) 75%
+  );
+  background-size: 800px 100%;
+  animation: shimmer 1.4s infinite linear;
+}
+
+.badge {
+  width: 40px;
+  height: 18px;
+  flex-shrink: 0;
+}
+
+.title {
+  width: 55%;
+  height: 15px;
+}
+
+.meta {
+  width: 140px;
+  height: 13px;
+  flex-shrink: 0;
+}
+
+@media (max-width: 767px) {
+  .row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.625rem;
+  }
+
+  .meta {
+    align-self: flex-start;
+  }
+}
diff --git a/src/components/post/comment/CommentComposer.jsx b/src/components/post/comment/CommentComposer.jsx
new file mode 100644
index 0000000..a7309d2
--- /dev/null
+++ b/src/components/post/comment/CommentComposer.jsx
@@ -0,0 +1,68 @@
+import { useState } from 'react'
+import { COMMENT_MAX_LENGTH } from '@/constants/post'
+import styles from './CommentComposer.module.css'
+
+function CommentComposer({
+  isLoggedIn,
+  onRequireLogin,
+  onSubmit,
+  placeholder = '댓글을 남겨보세요',
+  compact = false,
+  onCancel,
+  pending = false,
+}) {
+  const [value, setValue] = useState('')
+
+  function handleFocus() {
+    if (!isLoggedIn) onRequireLogin()
+  }
+
+  async function handleSubmit() {
+    const trimmed = value.trim()
+    if (!trimmed || trimmed.length > COMMENT_MAX_LENGTH) return
+    try {
+      await onSubmit(trimmed)
+      setValue('')
+    } catch {
+      // 실패 시 입력값 유지 — 에러 안내는 호출부(mutation onError)에서 처리
+    }
+  }
+
+  return (
+    <div className={compact ? `${styles.composer} ${styles.compact}` : styles.composer}>
+      <div className={styles.field}>
+        <textarea
+          className={styles.box}
+          aria-label="댓글 내용"
+          placeholder={placeholder}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onFocus={handleFocus}
+          readOnly={!isLoggedIn}
+          rows={compact ? 2 : 3}
+          maxLength={COMMENT_MAX_LENGTH}
+        />
+        <div className={styles.row}>
+          <span className={value.length > COMMENT_MAX_LENGTH ? styles.countOver : styles.count}>
+            {value.length}/{COMMENT_MAX_LENGTH}자
+          </span>
+          {onCancel && (
+            <button type="button" className={styles.cancelBtn} onClick={onCancel}>
+              취소
+            </button>
+          )}
+          <button
+            type="button"
+            className={styles.submitBtn}
+            onClick={isLoggedIn ? handleSubmit : onRequireLogin}
+            disabled={isLoggedIn && (!value.trim() || value.length > COMMENT_MAX_LENGTH || pending)}
+          >
+            {pending ? '등록 중...' : '등록'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CommentComposer
diff --git a/src/components/post/comment/CommentComposer.module.css b/src/components/post/comment/CommentComposer.module.css
new file mode 100644
index 0000000..5fc051f
--- /dev/null
+++ b/src/components/post/comment/CommentComposer.module.css
@@ -0,0 +1,96 @@
+.composer {
+  display: flex;
+  gap: 0.7rem;
+  align-items: flex-start;
+  margin-bottom: 1.35rem;
+  padding-bottom: 1.35rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.compact {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.field {
+  flex: 1;
+  min-width: 0;
+}
+
+.box {
+  width: 100%;
+  min-height: 4.2rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 0.7rem 0.85rem;
+  font-size: 0.875rem;
+  color: var(--color-text);
+  background: var(--color-bg);
+  resize: none;
+  font-family: inherit;
+}
+
+.compact .box {
+  min-height: 2.6rem;
+}
+
+.box::placeholder {
+  color: var(--color-text-muted);
+}
+
+.box:focus-visible {
+  border-color: var(--color-accent);
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 0.55rem;
+}
+
+.count {
+  margin-right: auto;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--color-text-muted);
+}
+
+.countOver {
+  composes: count;
+  color: var(--color-destructive);
+}
+
+.cancelBtn {
+  padding: 0.5rem 1rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-text-muted);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  transition: border-color 0.15s, color 0.15s;
+}
+
+.cancelBtn:hover {
+  border-color: var(--color-text-muted);
+  color: var(--color-text);
+}
+
+.submitBtn {
+  padding: 0.5rem 1.15rem;
+  border-radius: var(--radius-sm);
+  border: none;
+  background: var(--color-accent);
+  color: var(--color-on-accent);
+  font-size: 0.8125rem;
+  font-weight: 700;
+}
+
+.submitBtn:disabled {
+  background: var(--color-border);
+  color: var(--color-text-muted);
+  cursor: default;
+}
diff --git a/src/components/post/comment/CommentItem.jsx b/src/components/post/comment/CommentItem.jsx
new file mode 100644
index 0000000..834c5fc
--- /dev/null
+++ b/src/components/post/comment/CommentItem.jsx
@@ -0,0 +1,142 @@
+import { useState } from 'react'
+import { formatRelativeDate } from '@/utils/date'
+import CommentComposer from './CommentComposer'
+import styles from './CommentItem.module.css'
+
+function LikeIcon() {
+  return (
+    <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>
+  )
+}
+
+function CommentItem({ comment, isLoggedIn, onRequireLogin, onReply, onToggleLike, onToggleReplyLike, onDelete, onDeleteReply }) {
+  const [showReplyBox, setShowReplyBox] = useState(false)
+  const isDeleted = comment.authorNickname == null
+
+  function guard(action) {
+    if (!isLoggedIn) {
+      onRequireLogin()
+      return
+    }
+    action()
+  }
+
+  async function handleReplySubmit(content) {
+    await onReply(content)
+    setShowReplyBox(false)
+  }
+
+  function handleDelete() {
+    if (!window.confirm('댓글을 삭제하시겠습니까?')) return
+    onDelete()
+  }
+
+  function handleReplyDelete(replyId) {
+    if (!window.confirm('답글을 삭제하시겠습니까?')) return
+    onDeleteReply(replyId)
+  }
+
+  const replyComposer = showReplyBox && (
+    <CommentComposer
+      isLoggedIn={isLoggedIn}
+      onRequireLogin={onRequireLogin}
+      onSubmit={handleReplySubmit}
+      onCancel={() => setShowReplyBox(false)}
+      placeholder={`${comment.authorNickname ?? '탈퇴 회원'}님에게 답글 남기기`}
+      compact
+    />
+  )
+
+  return (
+    <div className={styles.comment}>
+      <div className={styles.body}>
+        <div className={styles.top}>
+          <span className={styles.name}>{comment.authorNickname ?? '탈퇴 회원'}</span>
+          <span className={styles.time}>{formatRelativeDate(comment.createdAt)}</span>
+        </div>
+        <p className={isDeleted ? `${styles.text} ${styles.deletedText}` : styles.text}>{comment.content}</p>
+
+        {!isDeleted && (
+          <div className={styles.actions}>
+            <button
+              type="button"
+              className={styles.actionBtn}
+              onClick={() => guard(onToggleLike)}
+              aria-pressed={comment.isLiked}
+            >
+              <LikeIcon />
+              {comment.likeCount}
+            </button>
+            <button
+              type="button"
+              className={styles.actionBtn}
+              onClick={() => guard(() => setShowReplyBox((v) => !v))}
+            >
+              답글 달기
+            </button>
+            {comment.isAuthor && (
+              <button type="button" className={styles.actionBtn} onClick={handleDelete}>
+                삭제
+              </button>
+            )}
+          </div>
+        )}
+
+        {comment.replies.length === 0 && replyComposer && (
+          <div className={styles.replyComposer}>{replyComposer}</div>
+        )}
+
+        {comment.replies.length > 0 && (
+          <div className={styles.replyList}>
+            {comment.replies.map((reply) => {
+              const replyDeleted = reply.authorNickname == null
+              return (
+                <div key={reply.id} className={styles.reply}>
+                  <div className={styles.body}>
+                    <div className={styles.top}>
+                      <span className={styles.replyName}>{reply.authorNickname ?? '탈퇴 회원'}</span>
+                      <span className={styles.time}>{formatRelativeDate(reply.createdAt)}</span>
+                    </div>
+                    <p className={replyDeleted ? `${styles.text} ${styles.deletedText}` : styles.text}>
+                      {!replyDeleted && (
+                        <span className={styles.mention}>@{comment.authorNickname ?? '탈퇴 회원'}</span>
+                      )}{' '}
+                      {reply.content}
+                    </p>
+                    {!replyDeleted && (
+                      <div className={styles.actions}>
+                        <button
+                          type="button"
+                          className={styles.actionBtn}
+                          onClick={() => guard(() => onToggleReplyLike(reply.id))}
+                          aria-pressed={reply.isLiked}
+                        >
+                          <LikeIcon />
+                          {reply.likeCount}
+                        </button>
+                        {reply.isAuthor && (
+                          <button
+                            type="button"
+                            className={styles.actionBtn}
+                            onClick={() => handleReplyDelete(reply.id)}
+                          >
+                            삭제
+                          </button>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+            {replyComposer}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default CommentItem
diff --git a/src/components/post/comment/CommentItem.module.css b/src/components/post/comment/CommentItem.module.css
new file mode 100644
index 0000000..4758c49
--- /dev/null
+++ b/src/components/post/comment/CommentItem.module.css
@@ -0,0 +1,100 @@
+.comment {
+  padding: 1.1rem 0;
+}
+
+.comment:last-child {
+  padding-bottom: 0.4rem;
+}
+
+.top {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  margin-bottom: 0.3rem;
+  flex-wrap: wrap;
+}
+
+.name {
+  font-size: 0.875rem;
+  font-weight: 800;
+  color: var(--color-text);
+}
+
+.replyName {
+  composes: name;
+  font-size: 0.8rem;
+  font-weight: 700;
+}
+
+.mention {
+  color: var(--color-accent);
+  font-weight: 700;
+}
+
+.time {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
+
+.text {
+  font-size: 0.875rem;
+  line-height: 1.7;
+  color: var(--color-text);
+  margin: 0 0 0.5rem;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.deletedText {
+  color: var(--color-text-muted);
+  font-style: italic;
+}
+
+.actions {
+  display: flex;
+  gap: 0.9rem;
+}
+
+.actionBtn {
+  border: none;
+  background: none;
+  padding: 0;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--color-text-muted);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  transition: color 0.15s;
+}
+
+.actionBtn:hover {
+  color: var(--color-accent);
+}
+
+.actionBtn svg path {
+  fill: none;
+  transition: fill 0.15s;
+}
+
+.actionBtn[aria-pressed='true'] {
+  color: var(--color-accent);
+}
+
+.actionBtn[aria-pressed='true'] svg path {
+  fill: currentColor;
+}
+
+.replyComposer {
+  margin-top: 0.9rem;
+}
+
+.replyList {
+  margin-top: 0.95rem;
+  padding-left: 1.15rem;
+  border-left: 1.5px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  gap: 0.95rem;
+}
+
diff --git a/src/components/post/comment/CommentSection.jsx b/src/components/post/comment/CommentSection.jsx
new file mode 100644
index 0000000..04ea003
--- /dev/null
+++ b/src/components/post/comment/CommentSection.jsx
@@ -0,0 +1,160 @@
+import { useState } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import useAuthStore from '@/stores/authStore'
+import useLoginModalStore from '@/stores/loginModalStore'
+import { createComment, deleteComment, getComments, likeComment, unlikeComment } from '@/services/postApi'
+import CommentItem from './CommentItem'
+import CommentComposer from './CommentComposer'
+import styles from './CommentSection.module.css'
+
+const PAGE_SIZE = 50
+
+function CommentSection({ postId, commentCount }) {
+  const [page, setPage] = useState(0)
+  const [items, setItems] = useState([])
+  const [syncedPostId, setSyncedPostId] = useState(postId)
+  const [syncedData, setSyncedData] = useState(null)
+  const [actionError, setActionError] = useState(null)
+  const user = useAuthStore((s) => s.user)
+  const openLoginModal = useLoginModalStore((s) => s.open)
+  const queryClient = useQueryClient()
+
+  if (postId !== syncedPostId) {
+    setSyncedPostId(postId)
+    setPage(0)
+    setItems([])
+  }
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['comments', postId, page],
+    queryFn: () => getComments(postId, { page, size: PAGE_SIZE }),
+  })
+
+  if (data && data !== syncedData) {
+    setSyncedData(data)
+    setItems((prev) => {
+      if (data.page === 0) return data.content
+      const merged = new Map(prev.map((c) => [c.id, c]))
+      data.content.forEach((c) => merged.set(c.id, c))
+      return Array.from(merged.values())
+    })
+  }
+
+  function requireLogin() {
+    openLoginModal(window.location.pathname + window.location.search)
+  }
+
+  function refreshCommentCount() {
+    queryClient.invalidateQueries({ queryKey: ['post', postId] })
+  }
+
+  const createMutation = useMutation({
+    mutationFn: ({ content, parentCommentId }) => createComment(postId, { content, parentCommentId }),
+    onSuccess: (res, { content, parentCommentId }) => {
+      const comment = {
+        id: res.id,
+        authorNickname: user?.nickname ?? null,
+        isAuthor: true,
+        content,
+        likeCount: 0,
+        isLiked: false,
+        createdAt: new Date().toISOString(),
+        replies: [],
+      }
+      setActionError(null)
+      setItems((prev) => {
+        if (!parentCommentId) return [...prev, comment]
+        return prev.map((c) =>
+          c.id === parentCommentId ? { ...c, replies: [...c.replies, comment] } : c
+        )
+      })
+      refreshCommentCount()
+    },
+    onError: () => {
+      setActionError('댓글 등록에 실패했습니다. 잠시 후 다시 시도해주세요.')
+    },
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: ({ id }) => deleteComment(id),
+    onSuccess: (_res, { id, parentId }) => {
+      function softDelete(c) {
+        return c.id === id ? { ...c, authorNickname: null, isAuthor: false, content: '삭제된 댓글입니다', likeCount: 0, isLiked: false } : c
+      }
+      setActionError(null)
+      setItems((prev) =>
+        prev.map((c) => (!parentId ? softDelete(c) : c.id === parentId ? { ...c, replies: c.replies.map(softDelete) } : c))
+      )
+      refreshCommentCount()
+    },
+    onError: () => {
+      setActionError('댓글 삭제에 실패했습니다. 잠시 후 다시 시도해주세요.')
+    },
+  })
+
+  const likeMutation = useMutation({
+    mutationFn: ({ id, isLiked }) => (isLiked ? unlikeComment(id) : likeComment(id)),
+    onSuccess: (res, { id, parentId }) => {
+      function flip(c) {
+        return c.id === id ? { ...c, isLiked: !c.isLiked, likeCount: res.likeCount } : c
+      }
+      setActionError(null)
+      setItems((prev) =>
+        prev.map((c) => (!parentId ? flip(c) : c.id === parentId ? { ...c, replies: c.replies.map(flip) } : c))
+      )
+    },
+    onError: () => {
+      setActionError('요청 처리에 실패했습니다. 잠시 후 다시 시도해주세요.')
+    },
+  })
+
+  const hasMore = !!data && page + 1 < data.totalPages
+  const topPending = createMutation.isPending && !createMutation.variables?.parentCommentId
+
+  return (
+    <div className={styles.section}>
+      <div className={styles.head}>
+        <h2 className={styles.heading}>댓글</h2>
+        <span className={styles.count}>{commentCount ?? 0}</span>
+      </div>
+
+      <CommentComposer
+        isLoggedIn={!!user}
+        onRequireLogin={requireLogin}
+        onSubmit={(content) => createMutation.mutateAsync({ content })}
+        pending={topPending}
+      />
+
+      {actionError && <p className={styles.error}>{actionError}</p>}
+
+      <div className={styles.list}>
+        {items.map((comment) => (
+          <CommentItem
+            key={comment.id}
+            comment={comment}
+            isLoggedIn={!!user}
+            onRequireLogin={requireLogin}
+            onReply={(content) => createMutation.mutateAsync({ content, parentCommentId: comment.id })}
+            onToggleLike={() => likeMutation.mutate({ id: comment.id, isLiked: comment.isLiked })}
+            onToggleReplyLike={(replyId) => {
+              const reply = comment.replies.find((r) => r.id === replyId)
+              likeMutation.mutate({ id: replyId, parentId: comment.id, isLiked: reply?.isLiked })
+            }}
+            onDelete={() => deleteMutation.mutate({ id: comment.id })}
+            onDeleteReply={(replyId) => deleteMutation.mutate({ id: replyId, parentId: comment.id })}
+          />
+        ))}
+        {isLoading && page === 0 && <p className={styles.status}>댓글을 불러오는 중...</p>}
+        {!isLoading && items.length === 0 && <p className={styles.status}>아직 댓글이 없어요. 첫 댓글을 남겨보세요.</p>}
+      </div>
+
+      {hasMore && (
+        <button type="button" className={styles.moreBtn} onClick={() => setPage((p) => p + 1)}>
+          댓글 더 보기
+        </button>
+      )}
+    </div>
+  )
+}
+
+export default CommentSection
diff --git a/src/components/post/comment/CommentSection.module.css b/src/components/post/comment/CommentSection.module.css
new file mode 100644
index 0000000..db0d07f
--- /dev/null
+++ b/src/components/post/comment/CommentSection.module.css
@@ -0,0 +1,56 @@
+.head {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  margin-bottom: 1.15rem;
+}
+
+.heading {
+  margin: 0;
+  font-size: 1.0625rem;
+  font-weight: 700;
+}
+
+.count {
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+}
+
+.error {
+  margin: 0.75rem 0 0;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--color-destructive);
+}
+
+.status {
+  padding: 1.25rem 0;
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  text-align: center;
+}
+
+.moreBtn {
+  display: block;
+  margin: 0.75rem auto 1.25rem;
+  padding: 0.5rem 1.25rem;
+  border-radius: var(--radius-full);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-text-muted);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  transition: border-color 0.15s, color 0.15s;
+}
+
+.moreBtn:hover {
+  border-color: var(--color-text-muted);
+  color: var(--color-text);
+}
diff --git a/src/components/post/editor/EditorBubbleMenu.jsx b/src/components/post/editor/EditorBubbleMenu.jsx
new file mode 100644
index 0000000..7cfcdf3
--- /dev/null
+++ b/src/components/post/editor/EditorBubbleMenu.jsx
@@ -0,0 +1,146 @@
+import { BubbleMenu } from '@tiptap/react/menus'
+import { TextSelection } from '@tiptap/pm/state'
+import { useCallback, useEffect, useState } from 'react'
+
+import { TEXT_COLORS } from './textColors'
+import styles from './EditorBubbleMenu.module.css'
+
+function shouldShow({ editor, state }) {
+  const { selection } = state
+  if (!(selection instanceof TextSelection) || selection.empty) return false
+  return editor.isEditable
+}
+
+function LinkIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+    </svg>
+  )
+}
+
+function EditorBubbleMenu({ editor }) {
+  const [mode, setMode] = useState('menu')
+  const [linkUrl, setLinkUrl] = useState('')
+
+  // 새로운 선택 영역이 잡힐 때마다 링크 입력/색상 팔레트를 닫아 기본 메뉴로 되돌린다
+  useEffect(() => {
+    if (!editor) return undefined
+    const resetMode = () => setMode('menu')
+    editor.on('selectionUpdate', resetMode)
+    return () => editor.off('selectionUpdate', resetMode)
+  }, [editor])
+
+  const openLinkEditor = useCallback(() => {
+    setLinkUrl(editor.getAttributes('link').href ?? '')
+    setMode('link')
+  }, [editor])
+
+  const applyLink = useCallback(
+    (e) => {
+      e.preventDefault()
+      const url = linkUrl.trim()
+      const chain = editor.chain().focus().extendMarkRange('link')
+      if (url) chain.setLink({ href: url })
+      else chain.unsetLink()
+      chain.run()
+      setMode('menu')
+    },
+    [editor, linkUrl],
+  )
+
+  const applyColor = useCallback(
+    (value) => {
+      const chain = editor.chain().focus()
+      if (value) chain.setColor(value)
+      else chain.unsetColor()
+      chain.run()
+      setMode('menu')
+    },
+    [editor],
+  )
+
+  if (!editor) return null
+
+  return (
+    <BubbleMenu editor={editor} shouldShow={shouldShow} className={styles.menu}>
+      {mode === 'link' && (
+        <form className={styles.linkForm} onSubmit={applyLink}>
+          <input
+            autoFocus
+            className={styles.linkInput}
+            type="text"
+            inputMode="url"
+            placeholder="https://..."
+            value={linkUrl}
+            onChange={(e) => setLinkUrl(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Escape') setMode('menu')
+            }}
+          />
+          <button type="submit" className={styles.linkConfirm}>
+            적용
+          </button>
+        </form>
+      )}
+
+      {mode === 'color' && (
+        <div className={styles.colorRow}>
+          {TEXT_COLORS.map((c) => (
+            <button
+              key={c.name}
+              type="button"
+              className={c.value ? styles.colorSwatch : styles.colorSwatchDefault}
+              style={c.value ? { backgroundColor: c.value } : undefined}
+              aria-label={c.name}
+              onClick={() => applyColor(c.value)}
+            />
+          ))}
+        </div>
+      )}
+
+      {mode === 'menu' && (
+        <div className={styles.row}>
+          <button
+            type="button"
+            className={editor.isActive('bold') ? styles.btnActive : styles.btn}
+            onClick={() => editor.chain().focus().toggleBold().run()}
+            aria-label="굵게"
+            aria-pressed={editor.isActive('bold')}
+          >
+            <strong>B</strong>
+          </button>
+          <button
+            type="button"
+            className={editor.isActive('italic') ? styles.btnActive : styles.btn}
+            onClick={() => editor.chain().focus().toggleItalic().run()}
+            aria-label="기울임"
+            aria-pressed={editor.isActive('italic')}
+          >
+            <em>I</em>
+          </button>
+          <button
+            type="button"
+            className={editor.isActive('link') ? styles.btnActive : styles.btn}
+            onClick={openLinkEditor}
+            aria-label="링크"
+            aria-pressed={editor.isActive('link')}
+          >
+            <LinkIcon />
+          </button>
+          <button type="button" className={styles.btn} onClick={() => setMode('color')} aria-label="글자 색상">
+            <span
+              className={styles.colorGlyph}
+              style={{ color: editor.getAttributes('textStyle').color || undefined }}
+            >
+              A
+            </span>
+          </button>
+        </div>
+      )}
+    </BubbleMenu>
+  )
+}
+
+export default EditorBubbleMenu
diff --git a/src/components/post/editor/EditorBubbleMenu.module.css b/src/components/post/editor/EditorBubbleMenu.module.css
new file mode 100644
index 0000000..b76a42d
--- /dev/null
+++ b/src/components/post/editor/EditorBubbleMenu.module.css
@@ -0,0 +1,115 @@
+.menu {
+  display: flex;
+  padding: 0.25rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+}
+
+.row {
+  display: flex;
+  gap: 0.125rem;
+}
+
+.btn,
+.btnActive {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: var(--radius-sm);
+  background: none;
+  border: none;
+  font-size: 0.9375rem;
+  color: var(--color-text-muted);
+  transition: background-color 0.15s, color 0.15s;
+}
+
+.btn:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text);
+}
+
+.btnActive {
+  background: var(--color-accent-dim);
+  color: var(--color-accent);
+}
+
+.colorGlyph {
+  font-weight: 700;
+  font-size: 0.875rem;
+}
+
+.linkForm {
+  display: flex;
+  gap: 0.375rem;
+  align-items: center;
+  padding: 0.125rem;
+}
+
+.linkInput {
+  width: 220px;
+  padding: 0.375rem 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-size: 0.8125rem;
+}
+
+.linkInput:focus {
+  outline: none;
+  border-color: var(--color-accent);
+}
+
+.linkConfirm {
+  flex-shrink: 0;
+  padding: 0.375rem 0.625rem;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: var(--color-accent);
+  color: var(--color-on-accent);
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.colorRow {
+  display: grid;
+  grid-template-columns: repeat(5, 20px);
+  gap: 0.375rem;
+  padding: 0.125rem;
+}
+
+.colorSwatch,
+.colorSwatchDefault {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 1px solid var(--color-border);
+}
+
+.colorSwatchDefault {
+  background: var(--color-surface);
+  position: relative;
+}
+
+.colorSwatchDefault::before,
+.colorSwatchDefault::after {
+  content: '';
+  position: absolute;
+  left: 3px;
+  right: 3px;
+  top: 50%;
+  height: 1px;
+  background: var(--color-text-muted);
+}
+
+.colorSwatchDefault::before {
+  transform: rotate(45deg);
+}
+
+.colorSwatchDefault::after {
+  transform: rotate(-45deg);
+}
diff --git a/src/components/post/editor/EntityMentionCard.module.css b/src/components/post/editor/EntityMentionCard.module.css
new file mode 100644
index 0000000..987e05c
--- /dev/null
+++ b/src/components/post/editor/EntityMentionCard.module.css
@@ -0,0 +1,122 @@
+.card {
+  display: flex;
+  max-width: 360px;
+  margin: 0.875rem 0 1.25rem;
+  padding: 0.6875rem 0.875rem;
+  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 ease;
+}
+
+.card:hover {
+  border-color: var(--color-text-muted);
+}
+
+.thumb {
+  flex-shrink: 0;
+  background-color: var(--color-surface-hover);
+  background-size: cover;
+  background-position: center;
+}
+
+.txt {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+  justify-content: center;
+}
+
+.type {
+  font-size: 0.625rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+}
+
+.name {
+  font-size: 0.906rem;
+  font-weight: 700;
+  color: var(--color-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sub {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chev {
+  margin-left: auto;
+  align-self: center;
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+  padding-left: 0.5rem;
+}
+
+/* ── 공연: 세로 포스터 (2:3) ── */
+.concert {
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.concert .thumb {
+  width: 54px;
+  height: 78px;
+  border-radius: var(--radius-sm);
+}
+
+.concert .txt {
+  padding-top: 0.125rem;
+  gap: 0.25rem;
+}
+
+/* ── 음악(발매): 정사각 앨범 아트 (1:1) ── */
+.release {
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.release .thumb {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-sm);
+}
+
+/* ── 아티스트: 원형 아바타 인라인 칩 ── */
+.artist {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  max-width: none;
+  width: auto;
+  margin: 0 0.0625rem;
+  padding: 0.125rem 0.625rem 0.125rem 0.1875rem;
+  border-radius: var(--radius-full);
+  vertical-align: middle;
+}
+
+.artist:hover {
+  border-color: var(--color-border);
+  background: var(--color-surface-hover);
+}
+
+.artist .thumb {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+}
+
+.artist .name {
+  font-size: inherit;
+  font-weight: 700;
+}
diff --git a/src/components/post/editor/EntityMentionCardView.jsx b/src/components/post/editor/EntityMentionCardView.jsx
new file mode 100644
index 0000000..99d497a
--- /dev/null
+++ b/src/components/post/editor/EntityMentionCardView.jsx
@@ -0,0 +1,55 @@
+import { Link } from 'react-router-dom'
+import { NodeViewWrapper } from '@tiptap/react'
+
+import { MENTION_TYPE_LABEL } from '@/constants/post'
+import { ROUTES } from '@/constants/routes'
+import styles from './EntityMentionCard.module.css'
+
+function CardInner({ entityType, title, subtitle, thumbnailUrl }) {
+  return (
+    <>
+      <div
+        className={styles.thumb}
+        style={thumbnailUrl ? { backgroundImage: `url(${thumbnailUrl})` } : undefined}
+      />
+      <div className={styles.txt}>
+        <span className={styles.type}>{MENTION_TYPE_LABEL[entityType]}</span>
+        <span className={styles.name}>{title}</span>
+        {subtitle && <span className={styles.sub}>{subtitle}</span>}
+      </div>
+      <span className={styles.chev} aria-hidden="true">
+        <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" fill="none" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M9 18l6-6-6-6" />
+        </svg>
+      </span>
+    </>
+  )
+}
+
+function getDetailPath(entityType, entityId) {
+  return entityType === 'CONCERT' ? ROUTES.CONCERT_DETAIL(entityId) : ROUTES.RELEASE_DETAIL(entityId)
+}
+
+function EntityMentionCardView({ node, editor }) {
+  const { entityType, entityId, title, subtitle, thumbnailUrl } = node.attrs
+  const variantClass = entityType === 'CONCERT' ? styles.concert : styles.release
+  const className = `${styles.card} ${variantClass}`
+
+  if (!editor.isEditable) {
+    return (
+      <NodeViewWrapper as="div">
+        <Link to={getDetailPath(entityType, entityId)} className={className}>
+          <CardInner entityType={entityType} title={title} subtitle={subtitle} thumbnailUrl={thumbnailUrl} />
+        </Link>
+      </NodeViewWrapper>
+    )
+  }
+
+  return (
+    <NodeViewWrapper as="div" className={className} contentEditable={false}>
+      <CardInner entityType={entityType} title={title} subtitle={subtitle} thumbnailUrl={thumbnailUrl} />
+    </NodeViewWrapper>
+  )
+}
+
+export default EntityMentionCardView
diff --git a/src/components/post/editor/EntityMentionChipView.jsx b/src/components/post/editor/EntityMentionChipView.jsx
new file mode 100644
index 0000000..bd68692
--- /dev/null
+++ b/src/components/post/editor/EntityMentionChipView.jsx
@@ -0,0 +1,37 @@
+import { Link } from 'react-router-dom'
+import { NodeViewWrapper } from '@tiptap/react'
+
+import { ROUTES } from '@/constants/routes'
+import styles from './EntityMentionCard.module.css'
+
+function EntityMentionChipView({ node, editor }) {
+  const { entityId, title, thumbnailUrl } = node.attrs
+  const className = `${styles.card} ${styles.artist}`
+
+  const thumb = (
+    <span
+      className={styles.thumb}
+      style={thumbnailUrl ? { backgroundImage: `url(${thumbnailUrl})` } : undefined}
+    />
+  )
+
+  if (!editor.isEditable) {
+    return (
+      <NodeViewWrapper as="span">
+        <Link to={ROUTES.ARTIST_DETAIL(entityId)} className={className}>
+          {thumb}
+          <span className={styles.name}>{title}</span>
+        </Link>
+      </NodeViewWrapper>
+    )
+  }
+
+  return (
+    <NodeViewWrapper as="span" className={className} contentEditable={false}>
+      {thumb}
+      <span className={styles.name}>{title}</span>
+    </NodeViewWrapper>
+  )
+}
+
+export default EntityMentionChipView
diff --git a/src/components/post/editor/PostEditor.jsx b/src/components/post/editor/PostEditor.jsx
new file mode 100644
index 0000000..22a7948
--- /dev/null
+++ b/src/components/post/editor/PostEditor.jsx
@@ -0,0 +1,54 @@
+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 Placeholder from '@tiptap/extension-placeholder'
+import CharacterCount from '@tiptap/extension-character-count'
+
+import { EntityMentionCard, EntityMentionChip } from './entityMentionExtensions'
+import EditorBubbleMenu from './EditorBubbleMenu'
+import SlashCommand from './slashCommand'
+import { POST_CONTENT_MAX_LENGTH } from '@/constants/post'
+import styles from './PostEditor.module.css'
+
+function PostEditor({ content, onChange, onCharacterCountChange }) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({ link: { openOnClick: false } }),
+      TextStyle,
+      Color,
+      EntityMentionCard,
+      EntityMentionChip,
+      SlashCommand,
+      Placeholder.configure({
+        placeholder: ({ editor: e, node }) =>
+          e.isEmpty && node.type.name === 'paragraph'
+            ? "'/' 를 입력해 서식을 지정하거나 공연·아티스트·음악을 태그해보세요"
+            : '',
+      }),
+      CharacterCount.configure({ limit: POST_CONTENT_MAX_LENGTH }),
+    ],
+    content,
+    onCreate: ({ editor: e }) => onCharacterCountChange?.(e.storage.characterCount.characters()),
+    onUpdate: ({ editor: e }) => {
+      onChange?.(e.getJSON())
+      onCharacterCountChange?.(e.storage.characterCount.characters())
+    },
+    editorProps: {
+      attributes: {
+        class: styles.prose,
+      },
+    },
+  })
+
+  if (!editor) return null
+
+  return (
+    <>
+      <EditorBubbleMenu editor={editor} />
+      <EditorContent editor={editor} />
+    </>
+  )
+}
+
+export default PostEditor
diff --git a/src/components/post/editor/PostEditor.module.css b/src/components/post/editor/PostEditor.module.css
new file mode 100644
index 0000000..4bd850a
--- /dev/null
+++ b/src/components/post/editor/PostEditor.module.css
@@ -0,0 +1,83 @@
+.prose {
+  min-height: 280px;
+  max-width: 42rem;
+  padding: 0;
+  font-size: 0.9375rem;
+  line-height: 1.8;
+  color: var(--color-text);
+  outline: none;
+}
+
+.prose:focus-visible {
+  outline: none;
+}
+
+.prose p {
+  margin: 0 0 0.875rem;
+}
+
+.prose p:last-child {
+  margin-bottom: 0;
+}
+
+.prose h1,
+.prose h2,
+.prose h3 {
+  margin: 1.5rem 0 0.75rem;
+  font-weight: 700;
+  line-height: 1.35;
+  color: var(--color-text);
+}
+
+.prose h1:first-child,
+.prose h2:first-child,
+.prose h3:first-child {
+  margin-top: 0;
+}
+
+.prose h1 {
+  font-size: 1.5rem;
+}
+
+.prose h2 {
+  font-size: 1.3125rem;
+}
+
+.prose h3 {
+  font-size: 1.1875rem;
+}
+
+.prose ul,
+.prose ol {
+  margin: 0 0 0.875rem;
+  padding-left: 1.25rem;
+}
+
+.prose li {
+  margin: 0.3125rem 0;
+}
+
+.prose li p {
+  margin: 0;
+}
+
+.prose blockquote {
+  margin: 0 0 0.875rem;
+  padding-left: 0.875rem;
+  border-left: 3px solid var(--color-border);
+  color: var(--color-text-muted);
+}
+
+.prose a {
+  color: var(--color-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.prose p:global(.is-editor-empty):first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  color: var(--color-text-muted);
+  pointer-events: none;
+}
diff --git a/src/components/post/editor/SlashCommandMenu.jsx b/src/components/post/editor/SlashCommandMenu.jsx
new file mode 100644
index 0000000..380d838
--- /dev/null
+++ b/src/components/post/editor/SlashCommandMenu.jsx
@@ -0,0 +1,81 @@
+import { forwardRef, useImperativeHandle, useState } from 'react'
+
+import styles from './SlashCommandMenu.module.css'
+
+const SlashCommandMenu = forwardRef(function SlashCommandMenu({ items, command }, ref) {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [prevItems, setPrevItems] = useState(items)
+
+  if (items !== prevItems) {
+    setPrevItems(items)
+    setSelectedIndex(0)
+  }
+
+  function selectItem(index) {
+    const item = items[index]
+    if (item) command(item)
+  }
+
+  useImperativeHandle(ref, () => ({
+    onKeyDown({ event }) {
+      if (items.length === 0) return false
+      if (event.key === 'ArrowUp') {
+        setSelectedIndex((i) => (i + items.length - 1) % items.length)
+        return true
+      }
+      if (event.key === 'ArrowDown') {
+        setSelectedIndex((i) => (i + 1) % items.length)
+        return true
+      }
+      if (event.key === 'Enter') {
+        selectItem(selectedIndex)
+        return true
+      }
+      return false
+    },
+  }))
+
+  if (items.length === 0) {
+    return (
+      <div className={styles.menu}>
+        <div className={styles.empty}>검색 결과가 없습니다</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={styles.menu}>
+      {items.map((item, i) => (
+        <button
+          key={item.stage === 'format' ? item.format : item.stage === 'type' ? item.type : `${item.type}-${item.id}`}
+          type="button"
+          className={i === selectedIndex ? styles.itemActive : styles.item}
+          onMouseEnter={() => setSelectedIndex(i)}
+          onClick={() => selectItem(i)}
+        >
+          {item.stage === 'format' ? (
+            <>
+              <span className={styles.formatIcon}>{item.icon}</span>
+              <span className={styles.typeLabel}>{item.label}</span>
+            </>
+          ) : item.stage === 'type' ? (
+            <span className={styles.typeLabel}>{item.label}</span>
+          ) : (
+            <>
+              <span
+                className={`${styles.thumb} ${item.type === 'CONCERT' ? styles.thumbPortrait : item.type === 'ARTIST' ? styles.thumbCircle : styles.thumbSquare}`}
+                style={item.thumbnailUrl ? { backgroundImage: `url(${item.thumbnailUrl})` } : undefined}
+              />
+              <span className={styles.resultTxt}>
+                <span className={styles.resultTitle}>{item.title}</span>
+                {item.subtitle && <span className={styles.resultSub}>{item.subtitle}</span>}
+              </span>
+            </>
+          )}
+        </button>
+      ))}
+    </div>
+  )
+})
+
+export default SlashCommandMenu
diff --git a/src/components/post/editor/SlashCommandMenu.module.css b/src/components/post/editor/SlashCommandMenu.module.css
new file mode 100644
index 0000000..1a04a38
--- /dev/null
+++ b/src/components/post/editor/SlashCommandMenu.module.css
@@ -0,0 +1,109 @@
+.menu {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 220px;
+  max-width: 320px;
+  max-height: 320px;
+  overflow-y: auto;
+  padding: 0.375rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+}
+
+.empty {
+  padding: 0.75rem 0.625rem;
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+  text-align: center;
+}
+
+.item,
+.itemActive {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.4375rem 0.5rem;
+  border-radius: var(--radius-sm);
+  background: none;
+  border: none;
+  text-align: left;
+  width: 100%;
+}
+
+.itemActive {
+  background: var(--color-surface-hover);
+}
+
+.typeLabel {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.formatIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-hover);
+  border: 1px solid var(--color-border);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  color: var(--color-text-muted);
+}
+
+.thumb {
+  flex-shrink: 0;
+  background-color: var(--color-surface-hover);
+  background-size: cover;
+  background-position: center;
+  border: 1px solid var(--color-border);
+}
+
+.thumbPortrait {
+  width: 24px;
+  height: 32px;
+  border-radius: var(--radius-xs);
+}
+
+.thumbSquare {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-xs);
+}
+
+.thumbCircle {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+}
+
+.resultTxt {
+  display: flex;
+  flex-direction: column;
+  gap: 0.0625rem;
+  min-width: 0;
+}
+
+.resultTitle {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--color-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.resultSub {
+  font-size: 0.71875rem;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/src/components/post/editor/entityMentionExtensions.js b/src/components/post/editor/entityMentionExtensions.js
new file mode 100644
index 0000000..e0d84b0
--- /dev/null
+++ b/src/components/post/editor/entityMentionExtensions.js
@@ -0,0 +1,62 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+import { ReactNodeViewRenderer } from '@tiptap/react'
+
+import EntityMentionCardView from './EntityMentionCardView'
+import EntityMentionChipView from './EntityMentionChipView'
+
+function entityAttributes() {
+  return {
+    entityType: { default: null },
+    entityId: { default: null },
+    title: { default: '' },
+    subtitle: { default: null },
+    thumbnailUrl: { default: null },
+  }
+}
+
+// 공연·음악(발매) 멘션 — 세로 포스터/정사각 앨범아트 블록 카드로 문단 흐름을 끊고 삽입된다
+export const EntityMentionCard = Node.create({
+  name: 'entityMentionCard',
+  group: 'block',
+  atom: true,
+  selectable: true,
+  draggable: false,
+
+  addAttributes: entityAttributes,
+
+  parseHTML() {
+    return [{ tag: 'div[data-entity-mention-card]' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes(HTMLAttributes, { 'data-entity-mention-card': '' })]
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(EntityMentionCardView)
+  },
+})
+
+// 아티스트 멘션 — 원형 아바타 인라인 칩으로 문장 중간에 자연스럽게 삽입된다
+export const EntityMentionChip = Node.create({
+  name: 'entityMentionChip',
+  group: 'inline',
+  inline: true,
+  atom: true,
+  selectable: true,
+  draggable: false,
+
+  addAttributes: entityAttributes,
+
+  parseHTML() {
+    return [{ tag: 'span[data-entity-mention-chip]' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['span', mergeAttributes(HTMLAttributes, { 'data-entity-mention-chip': '' })]
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(EntityMentionChipView)
+  },
+})
diff --git a/src/components/post/editor/extractEntityTags.js b/src/components/post/editor/extractEntityTags.js
new file mode 100644
index 0000000..b6f9e64
--- /dev/null
+++ b/src/components/post/editor/extractEntityTags.js
@@ -0,0 +1,48 @@
+// Tiptap JSON 트리를 순회해 본문에 삽입된 entityMentionCard·entityMentionChip
+// 노드들을 entityTags 형태({entityType, entityId})로 추출한다 (중복 제거)
+export function extractEntityTags(contentJson) {
+  const tags = []
+  const seen = new Set()
+
+  function walk(node) {
+    if (!node) return
+
+    if (node.type === 'entityMentionCard' || node.type === 'entityMentionChip') {
+      const { entityType, entityId, title } = node.attrs ?? {}
+      const key = `${entityType}:${entityId}`
+      if (entityType && entityId != null && !seen.has(key)) {
+        seen.add(key)
+        tags.push({ entityType, entityId, title })
+      }
+    }
+
+    node.content?.forEach(walk)
+  }
+
+  walk(contentJson)
+  return tags
+}
+
+// 본문에 텍스트나 엔티티 멘션이 하나도 없는 완전히 빈 문서인지 확인한다
+// (BE가 빈 content를 거부하므로, 제출 전 프론트에서 먼저 막아 안내한다)
+export function isContentEmpty(contentJson) {
+  let hasContent = false
+
+  function walk(node) {
+    if (!node || hasContent) return
+
+    if (node.type === 'text' && node.text?.trim()) {
+      hasContent = true
+      return
+    }
+    if (node.type === 'entityMentionCard' || node.type === 'entityMentionChip') {
+      hasContent = true
+      return
+    }
+
+    node.content?.forEach(walk)
+  }
+
+  walk(contentJson)
+  return !hasContent
+}
diff --git a/src/components/post/editor/mentionSearch.js b/src/components/post/editor/mentionSearch.js
new file mode 100644
index 0000000..38b39f5
--- /dev/null
+++ b/src/components/post/editor/mentionSearch.js
@@ -0,0 +1,49 @@
+import { searchMentions as apiSearchMentions } from '@/services/postApi'
+
+export const MENTION_TYPE_OPTIONS = [
+  { stage: 'type', type: 'CONCERT', label: '공연' },
+  { stage: 'type', type: 'ARTIST', label: '아티스트' },
+  { stage: 'type', type: 'RELEASE', label: '음악' },
+]
+
+// 즉시 실행되는 서식 커맨드 — 엔티티 타입과 달리 검색 단계로 넘어가지 않고
+// 선택과 동시에 블록 서식을 적용한다
+export const FORMAT_OPTIONS = [
+  { stage: 'format', format: 'heading1', label: '제목 1', icon: 'H1' },
+  { stage: 'format', format: 'heading2', label: '제목 2', icon: 'H2' },
+  { stage: 'format', format: 'heading3', label: '제목 3', icon: 'H3' },
+  { stage: 'format', format: 'bulletList', label: '글머리 기호 목록', icon: '•' },
+  { stage: 'format', format: 'orderedList', label: '번호 매기기 목록', icon: '1.' },
+  { stage: 'format', format: 'blockquote', label: '인용', icon: '"' },
+]
+
+const TYPE_LABEL_TO_TYPE = { 공연: 'CONCERT', 아티스트: 'ARTIST', 음악: 'RELEASE' }
+
+// '/공연 vaundy' 형태의 슬래시 커맨드 쿼리를 단계별로 해석한다
+// 1단계(type): 타입/서식 선택 전 — 입력값으로 목록을 좁혀 보여준다
+// 2단계(search): '{엔티티 타입} ' 뒤로 검색어를 입력하면 해당 타입 내에서 검색한다
+export function parseSlashQuery(query) {
+  const spaceIdx = query.indexOf(' ')
+  if (spaceIdx === -1) return { stage: 'type', typeQuery: query }
+
+  const typeToken = query.slice(0, spaceIdx)
+  const type = TYPE_LABEL_TO_TYPE[typeToken]
+  if (!type) return { stage: 'type', typeQuery: query }
+
+  return { stage: 'search', type, searchTerm: query.slice(spaceIdx + 1) }
+}
+
+export function filterTypeOptions(typeQuery) {
+  const options = [...FORMAT_OPTIONS, ...MENTION_TYPE_OPTIONS]
+  if (!typeQuery) return options
+  return options.filter((o) => o.label.includes(typeQuery))
+}
+
+const MENTION_SEARCH_LIMIT = 10
+
+export async function searchMentions(type, term) {
+  const q = term.trim()
+  if (!q) return []
+  const results = await apiSearchMentions({ type, q, limit: MENTION_SEARCH_LIMIT })
+  return results.map((item) => ({ stage: 'search', ...item }))
+}
diff --git a/src/components/post/editor/slashCommand.jsx b/src/components/post/editor/slashCommand.jsx
new file mode 100644
index 0000000..512ad7d
--- /dev/null
+++ b/src/components/post/editor/slashCommand.jsx
@@ -0,0 +1,105 @@
+import { Extension } from '@tiptap/core'
+import Suggestion from '@tiptap/suggestion'
+import { createRoot } from 'react-dom/client'
+
+import { filterTypeOptions, parseSlashQuery, searchMentions } from './mentionSearch'
+import SlashCommandMenu from './SlashCommandMenu'
+
+const FORMAT_APPLIERS = {
+  heading1: (chain) => chain.setNode('heading', { level: 1 }),
+  heading2: (chain) => chain.setNode('heading', { level: 2 }),
+  heading3: (chain) => chain.setNode('heading', { level: 3 }),
+  bulletList: (chain) => chain.toggleBulletList(),
+  orderedList: (chain) => chain.toggleOrderedList(),
+  blockquote: (chain) => chain.toggleBlockquote(),
+}
+
+function renderSlashMenu() {
+  let root
+  let container
+  let unmount
+  const menuRef = { current: null }
+
+  return {
+    onStart: (props) => {
+      container = document.createElement('div')
+      root = createRoot(container)
+      root.render(<SlashCommandMenu ref={menuRef} items={props.items} command={props.command} />)
+      unmount = props.mount(container)
+    },
+    onUpdate: (props) => {
+      root.render(<SlashCommandMenu ref={menuRef} items={props.items} command={props.command} />)
+    },
+    onKeyDown: (props) => menuRef.current?.onKeyDown(props) ?? false,
+    onExit: () => {
+      unmount?.()
+      root?.unmount()
+    },
+  }
+}
+
+const SlashCommand = Extension.create({
+  name: 'slashCommand',
+
+  addOptions() {
+    return {
+      suggestion: {
+        char: '/',
+        allowSpaces: true,
+        startOfLine: false,
+        debounce: 200,
+        items: ({ query }) => {
+          const parsed = parseSlashQuery(query)
+          if (parsed.stage === 'type') return filterTypeOptions(parsed.typeQuery)
+          return searchMentions(parsed.type, parsed.searchTerm)
+        },
+        render: renderSlashMenu,
+        command: ({ editor, range, props }) => {
+          if (props.stage === 'format') {
+            const applyFormat = FORMAT_APPLIERS[props.format]
+            applyFormat(editor.chain().focus().deleteRange(range)).run()
+            return
+          }
+
+          if (props.stage === 'type') {
+            // range.from은 트리거 문자('/') 위치 — 그대로 두고 그 뒤의 쿼리만 교체해야
+            // 슬래시 커맨드가 활성 상태를 유지한 채 2단계(검색)로 이어진다
+            editor.chain().focus().insertContentAt({ from: range.from + 1, to: range.to }, `${props.label} `).run()
+            return
+          }
+
+          const mentionNode = {
+            type: props.type === 'ARTIST' ? 'entityMentionChip' : 'entityMentionCard',
+            attrs: {
+              entityType: props.type,
+              entityId: props.id,
+              title: props.title,
+              subtitle: props.subtitle ?? null,
+              thumbnailUrl: props.thumbnailUrl ?? null,
+            },
+          }
+
+          // 블록 카드는 뒤에 빈 문단이 없으면 삽입 후 커서가 카드 자체를 선택한
+          // 상태(NodeSelection)로 남아, 곧바로 타이핑하면 카드가 지워지고 텍스트로
+          // 치환돼버린다 — 항상 빈 문단을 함께 넣어 텍스트 커서 위치를 보장한다
+          const content = mentionNode.type === 'entityMentionCard'
+            ? [mentionNode, { type: 'paragraph' }]
+            : [mentionNode]
+
+          editor.chain().focus().insertContentAt(range, content).run()
+        },
+      },
+    }
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      Suggestion({
+        editor: this.editor,
+        ...this.options.suggestion,
+      }),
+    ]
+  },
+})
+
+export default SlashCommand
diff --git a/src/components/post/editor/textColors.js b/src/components/post/editor/textColors.js
new file mode 100644
index 0000000..6db5137
--- /dev/null
+++ b/src/components/post/editor/textColors.js
@@ -0,0 +1,12 @@
+export const TEXT_COLORS = [
+  { name: '기본', value: null },
+  { name: '레드', value: '#c17177' },
+  { name: '오렌지', value: '#c68a5c' },
+  { name: '옐로우', value: '#b6a052' },
+  { name: '그린', value: '#6a9c78' },
+  { name: '틸', value: '#5c9c94' },
+  { name: '블루', value: '#6488b5' },
+  { name: '퍼플', value: '#8d7cbd' },
+  { name: '핑크', value: '#bf80a6' },
+  { name: '그레이', value: '#868c96' },
+]
diff --git a/src/components/post/sidebar/PopularPostsWidget.jsx b/src/components/post/sidebar/PopularPostsWidget.jsx
new file mode 100644
index 0000000..a3b81a4
--- /dev/null
+++ b/src/components/post/sidebar/PopularPostsWidget.jsx
@@ -0,0 +1,46 @@
+import { Link } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+
+import { ROUTES } from '@/constants/routes'
+import { getPopularPosts } from '@/services/postApi'
+import styles from './PopularPostsWidget.module.css'
+
+const POPULAR_DAYS = 7
+const POPULAR_LIMIT = 5
+
+function PopularPostsWidget() {
+  const { data, isLoading } = useQuery({
+    queryKey: ['popular-posts-sidebar'],
+    queryFn: () => getPopularPosts({ days: POPULAR_DAYS, limit: POPULAR_LIMIT }),
+    staleTime: 5 * 60 * 1000,
+  })
+
+  const posts = data ?? []
+
+  if (!isLoading && posts.length === 0) return null
+
+  return (
+    <div className={styles.widget}>
+      <h2 className={styles.widgetTitle}>이번 주 인기글</h2>
+      {isLoading ? (
+        <div className={styles.widgetList}>
+          {Array.from({ length: POPULAR_LIMIT }).map((_, i) => (
+            <div key={i} className={styles.rankSkeleton} />
+          ))}
+        </div>
+      ) : (
+        <div className={styles.widgetList}>
+          {posts.map((post, i) => (
+            <Link key={post.id} to={ROUTES.COMMUNITY_DETAIL(post.id)} className={styles.rankRow}>
+              <span className={styles.rankNum}>{i + 1}</span>
+              <span className={styles.rankTitle}>{post.title}</span>
+              <span className={styles.rankStat}>추천 {post.recommendCount.toLocaleString()}</span>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default PopularPostsWidget
diff --git a/src/components/post/sidebar/PopularPostsWidget.module.css b/src/components/post/sidebar/PopularPostsWidget.module.css
new file mode 100644
index 0000000..31ab61d
--- /dev/null
+++ b/src/components/post/sidebar/PopularPostsWidget.module.css
@@ -0,0 +1,80 @@
+.widget {
+  padding: 1rem 1.125rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+}
+
+.widgetTitle {
+  margin: 0 0 0.625rem;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+}
+
+.widgetList {
+  display: flex;
+  flex-direction: column;
+}
+
+.rankRow {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  padding: 0.4375rem 0;
+  color: inherit;
+  text-decoration: none;
+  border-top: 1px solid var(--color-border);
+}
+
+.rankRow:first-child {
+  border-top: none;
+}
+
+.rankNum {
+  flex-shrink: 0;
+  width: 0.8125rem;
+  font-size: 0.75rem;
+  font-weight: 800;
+  color: var(--color-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.rankTitle {
+  flex: 1;
+  min-width: 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.rankStat {
+  flex-shrink: 0;
+  font-size: 0.6875rem;
+  color: var(--color-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.rankSkeleton {
+  height: 1.375rem;
+  margin: 0.4375rem 0;
+  border-radius: var(--radius-sm);
+  background: linear-gradient(
+    90deg,
+    var(--color-surface-hover) 25%,
+    var(--color-border) 50%,
+    var(--color-surface-hover) 75%
+  );
+  background-size: 800px 100%;
+  animation: shimmer 1.4s infinite linear;
+}
+
+@keyframes shimmer {
+  0% { background-position: -400px 0; }
+  100% { background-position: 400px 0; }
+}
diff --git a/src/components/post/sidebar/PostsSidebar.jsx b/src/components/post/sidebar/PostsSidebar.jsx
new file mode 100644
index 0000000..5837783
--- /dev/null
+++ b/src/components/post/sidebar/PostsSidebar.jsx
@@ -0,0 +1,16 @@
+import PopularPostsWidget from './PopularPostsWidget'
+import TrendingTagsWidget from './TrendingTagsWidget'
+import UpcomingConcertsWidget from './UpcomingConcertsWidget'
+import styles from './PostsSidebar.module.css'
+
+function PostsSidebar() {
+  return (
+    <aside className={styles.sidebar}>
+      <PopularPostsWidget />
+      <TrendingTagsWidget />
+      <UpcomingConcertsWidget />
+    </aside>
+  )
+}
+
+export default PostsSidebar
diff --git a/src/components/post/sidebar/PostsSidebar.module.css b/src/components/post/sidebar/PostsSidebar.module.css
new file mode 100644
index 0000000..994672e
--- /dev/null
+++ b/src/components/post/sidebar/PostsSidebar.module.css
@@ -0,0 +1,13 @@
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 15.5rem;
+  flex-shrink: 0;
+}
+
+@media (max-width: 1279px) {
+  .sidebar {
+    display: none;
+  }
+}
diff --git a/src/components/post/sidebar/TrendingTagsWidget.jsx b/src/components/post/sidebar/TrendingTagsWidget.jsx
new file mode 100644
index 0000000..9125a82
--- /dev/null
+++ b/src/components/post/sidebar/TrendingTagsWidget.jsx
@@ -0,0 +1,43 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { MENTION_TYPE_LABEL } from '@/constants/post'
+import { getTrendingTags } from '@/services/postApi'
+import styles from './TrendingTagsWidget.module.css'
+
+const TRENDING_DAYS = 7
+const TRENDING_LIMIT = 10
+
+function TrendingTagsWidget() {
+  const { data, isLoading } = useQuery({
+    queryKey: ['trending-tags-sidebar'],
+    queryFn: () => getTrendingTags({ days: TRENDING_DAYS, limit: TRENDING_LIMIT }),
+    staleTime: 5 * 60 * 1000,
+  })
+
+  const tags = data ?? []
+
+  if (!isLoading && tags.length === 0) return null
+
+  return (
+    <div className={styles.widget}>
+      <h2 className={styles.widgetTitle}>지금 많이 언급된 태그</h2>
+      {isLoading ? (
+        <div className={styles.tagCloud}>
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className={styles.tagSkeleton} />
+          ))}
+        </div>
+      ) : (
+        <div className={styles.tagCloud}>
+          {tags.map((tag) => (
+            <span key={`${tag.entityType}:${tag.entityId}`} className={styles.tagCloudChip}>
+              {MENTION_TYPE_LABEL[tag.entityType]} · {tag.title} · {tag.count}
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default TrendingTagsWidget
diff --git a/src/components/post/sidebar/TrendingTagsWidget.module.css b/src/components/post/sidebar/TrendingTagsWidget.module.css
new file mode 100644
index 0000000..97ae726
--- /dev/null
+++ b/src/components/post/sidebar/TrendingTagsWidget.module.css
@@ -0,0 +1,58 @@
+.widget {
+  padding: 1rem 1.125rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+}
+
+.widgetTitle {
+  margin: 0 0 0.625rem;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+}
+
+.tagCloud {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+
+.tagCloudChip {
+  max-width: 100%;
+  padding: 0.1875rem 0.5rem;
+  font-size: 0.6875rem;
+  color: var(--color-text-muted);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tagSkeleton {
+  width: 5.5rem;
+  height: 1.375rem;
+  border-radius: var(--radius-sm);
+  background: linear-gradient(
+    90deg,
+    var(--color-surface-hover) 25%,
+    var(--color-border) 50%,
+    var(--color-surface-hover) 75%
+  );
+  background-size: 800px 100%;
+  animation: shimmer 1.4s infinite linear;
+}
+
+@keyframes shimmer {
+  0% { background-position: -400px 0; }
+  100% { background-position: 400px 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tagSkeleton {
+    animation: none;
+  }
+}
diff --git a/src/components/post/sidebar/UpcomingConcertsWidget.jsx b/src/components/post/sidebar/UpcomingConcertsWidget.jsx
new file mode 100644
index 0000000..104b1de
--- /dev/null
+++ b/src/components/post/sidebar/UpcomingConcertsWidget.jsx
@@ -0,0 +1,52 @@
+import { Link } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+
+import { ROUTES } from '@/constants/routes'
+import { getConcerts } from '@/services/concertApi'
+import styles from './UpcomingConcertsWidget.module.css'
+
+const UPCOMING_COUNT = 3
+
+function formatShortDate(startDate) {
+  const [, month, day] = startDate.split('-').map(Number)
+  return `${month}.${String(day).padStart(2, '0')}`
+}
+
+function UpcomingConcertsWidget() {
+  const { data, isLoading } = useQuery({
+    queryKey: ['upcoming-concerts-sidebar'],
+    queryFn: () => getConcerts({ status: 'UPCOMING', sort: 'startDate,asc', size: UPCOMING_COUNT }),
+    staleTime: 5 * 60 * 1000,
+  })
+
+  const concerts = data?.content ?? []
+
+  if (!isLoading && concerts.length === 0) return null
+
+  return (
+    <div className={styles.widget}>
+      <h2 className={styles.widgetTitle}>다가오는 공연</h2>
+      {isLoading ? (
+        <div className={styles.widgetList}>
+          {Array.from({ length: UPCOMING_COUNT }).map((_, i) => (
+            <div key={i} className={styles.upcomingSkeleton} />
+          ))}
+        </div>
+      ) : (
+        <div className={styles.widgetList}>
+          {concerts.map((concert) => (
+            <Link key={concert.id} to={ROUTES.CONCERT_DETAIL(concert.id)} className={styles.upcomingRow}>
+              <span className={styles.upcomingDate}>{formatShortDate(concert.startDate)}</span>
+              <span className={styles.upcomingInfo}>
+                <span className={styles.upcomingTitle}>{concert.title}</span>
+                <span className={styles.upcomingVenue}>{concert.venue}</span>
+              </span>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default UpcomingConcertsWidget
diff --git a/src/components/post/sidebar/UpcomingConcertsWidget.module.css b/src/components/post/sidebar/UpcomingConcertsWidget.module.css
new file mode 100644
index 0000000..93ab8b0
--- /dev/null
+++ b/src/components/post/sidebar/UpcomingConcertsWidget.module.css
@@ -0,0 +1,90 @@
+.widget {
+  padding: 1rem 1.125rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+}
+
+.widgetTitle {
+  margin: 0 0 0.625rem;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+}
+
+.widgetList {
+  display: flex;
+  flex-direction: column;
+}
+
+.upcomingRow {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+  color: inherit;
+  text-decoration: none;
+  border-top: 1px solid var(--color-border);
+}
+
+.upcomingRow:first-child {
+  border-top: none;
+}
+
+.upcomingDate {
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--color-accent);
+  font-variant-numeric: tabular-nums;
+}
+
+.upcomingInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+}
+
+.upcomingTitle {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--color-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.upcomingVenue {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.upcomingSkeleton {
+  height: 2.375rem;
+  border-radius: var(--radius-sm);
+  background: linear-gradient(
+    90deg,
+    var(--color-surface-hover) 25%,
+    var(--color-border) 50%,
+    var(--color-surface-hover) 75%
+  );
+  background-size: 800px 100%;
+  animation: shimmer 1.4s infinite linear;
+}
+
+@keyframes shimmer {
+  0% { background-position: -400px 0; }
+  100% { background-position: 400px 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .upcomingSkeleton {
+    animation: none;
+  }
+}
diff --git a/src/components/ui/Button.jsx b/src/components/ui/Button.jsx
new file mode 100644
index 0000000..8f0934d
--- /dev/null
+++ b/src/components/ui/Button.jsx
@@ -0,0 +1,8 @@
+import styles from './Button.module.css'
+
+function Button({ variant = 'primary', size = 'md', className = '', ...props }) {
+  const classes = [styles.btn, styles[variant], styles[size], className].filter(Boolean).join(' ')
+  return <button className={classes} {...props} />
+}
+
+export default Button
diff --git a/src/components/ui/Button.module.css b/src/components/ui/Button.module.css
new file mode 100644
index 0000000..158fe29
--- /dev/null
+++ b/src/components/ui/Button.module.css
@@ -0,0 +1,55 @@
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: var(--radius-lg);
+  font-family: var(--font-sans);
+  font-weight: 600;
+  white-space: nowrap;
+  transition: background-color 0.15s, opacity 0.15s;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* ── variant ── */
+.primary {
+  background: var(--color-accent);
+  color: var(--color-on-accent);
+}
+
+.primary:hover:not(:disabled) {
+  background: var(--color-accent-dark);
+}
+
+.outline {
+  background: var(--color-surface);
+  color: var(--color-text-muted);
+  border: 1px solid var(--color-border);
+  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
+}
+
+.outline:hover:not(:disabled) {
+  border-color: var(--color-text-muted);
+  color: var(--color-text);
+}
+
+/* ── size ── */
+.xs {
+  padding: 0.3rem 0.7rem;
+  font-size: 0.8125rem;
+  border-radius: var(--radius-sm);
+}
+
+.sm {
+  padding: 0.5rem 1.125rem;
+  font-size: 0.875rem;
+}
+
+.md {
+  padding: 0.625rem 1.75rem;
+  font-size: 0.9375rem;
+}
diff --git a/src/constants/post.js b/src/constants/post.js
new file mode 100644
index 0000000..3b8a863
--- /dev/null
+++ b/src/constants/post.js
@@ -0,0 +1,15 @@
+export const POST_CONTENT_MAX_LENGTH = 10000
+export const POST_ENTITY_TAG_MAX_COUNT = 10
+export const COMMENT_MAX_LENGTH = 500
+
+export const POST_CATEGORY_LABEL = {
+  FREE: '자유',
+  INFO: '정보',
+  REVIEW: '후기',
+}
+
+export const MENTION_TYPE_LABEL = {
+  CONCERT: '공연',
+  ARTIST: '아티스트',
+  RELEASE: '음악',
+}
diff --git a/src/constants/routes.js b/src/constants/routes.js
index 218df76..0ee796a 100644
--- a/src/constants/routes.js
+++ b/src/constants/routes.js
@@ -10,6 +10,10 @@ export const ROUTES = {
   RELEASE_DETAIL: (id) => `/releases/${id}`,
   CALENDAR: '/calendar',
   SEARCH: '/search',
+  COMMUNITY: '/community',
+  COMMUNITY_DETAIL: (id) => `/community/${id}`,
+  COMMUNITY_WRITE: '/community/write',
+  COMMUNITY_EDIT: (id) => `/community/${id}/edit`,
   ME: '/me',
   ME_UPCOMING: '/me/concerts/upcoming',
   ME_HISTORY: '/me/concerts/history',
diff --git a/src/index.css b/src/index.css
index 1af6458..fd2751f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -229,12 +229,20 @@ button {
 }
 
 /* 전역 포커스 링 — 키보드 탭 이동 시 일관된 포커스 표시 */
-:focus-visible {
+/* input/textarea/select는 클릭만으로도 focus-visible이 걸릴 수 있어 제외 (자체 round 값 유지) */
+:focus-visible:not(input):not(textarea):not(select) {
   outline: 2px solid var(--color-accent);
   outline-offset: 2px;
   border-radius: var(--radius-xs);
 }
 
+/* 텍스트 입력 요소는 자체 테두리로 상태를 표시하므로 전역 포커스 링에서 제외 */
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+  outline: none;
+}
+
 /* 전역 액티브 피드백 — 클릭 시 눌리는 느낌 */
 button:active,
 a:active {
diff --git a/src/pages/ConcertsPage.module.css b/src/pages/ConcertsPage.module.css
index ec19cb5..f9393f4 100644
--- a/src/pages/ConcertsPage.module.css
+++ b/src/pages/ConcertsPage.module.css
@@ -65,10 +65,6 @@
   transition: border-color 0.15s;
 }
 
-.searchInput:focus {
-  border-color: var(--color-accent);
-}
-
 .searchInput::placeholder {
   color: var(--color-text-muted);
 }
diff --git a/src/pages/PostDetailPage.jsx b/src/pages/PostDetailPage.jsx
new file mode 100644
index 0000000..23c98e2
--- /dev/null
+++ b/src/pages/PostDetailPage.jsx
@@ -0,0 +1,173 @@
+import { useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+
+import BackButton from '@/components/ui/BackButton'
+import Button from '@/components/ui/Button'
+import EmptyState from '@/components/ui/EmptyState'
+import PostContentView from '@/components/post/PostContentView'
+import CommentSection from '@/components/post/comment/CommentSection'
+import usePageMeta from '@/hooks/usePageMeta'
+import { deletePost, getPost, recommendPost, unrecommendPost } from '@/services/postApi'
+import { ROUTES } from '@/constants/routes'
+import { POST_CATEGORY_LABEL } from '@/constants/post'
+import { formatDateTime } from '@/utils/date'
+import useAuthStore from '@/stores/authStore'
+import useLoginModalStore from '@/stores/loginModalStore'
+import styles from './PostDetailPage.module.css'
+
+function PostDetailPage() {
+  const { id } = useParams()
+  const postId = Number(id)
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const [isRecommended, setIsRecommended] = useState(false)
+  const [recommendCount, setRecommendCount] = useState(0)
+  const [syncedPost, setSyncedPost] = useState(null)
+  const user = useAuthStore((s) => s.user)
+  const openLoginModal = useLoginModalStore((s) => s.open)
+
+  const { data: post, isLoading, isError } = useQuery({
+    queryKey: ['post', postId],
+    queryFn: () => getPost(postId),
+    retry: false,
+  })
+
+  if (post && post !== syncedPost) {
+    setSyncedPost(post)
+    setIsRecommended(!!post.isRecommended)
+    setRecommendCount(post.recommendCount)
+  }
+
+  const recommendMutation = useMutation({
+    mutationFn: (next) => (next ? recommendPost(postId) : unrecommendPost(postId)),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['posts'] })
+    },
+    onError: (_err, next) => {
+      setIsRecommended(!next)
+      setRecommendCount((prev) => prev + (next ? -1 : 1))
+    },
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: () => deletePost(postId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['posts'] })
+      navigate(ROUTES.COMMUNITY)
+    },
+  })
+
+  usePageMeta({
+    title: post ? `${post.title} - 커밍` : undefined,
+    description: '자유, 정보, 공연 후기 이야기를 나누는 Jpop 팬 커뮤니티입니다.',
+    path: `/community/${postId}`,
+  })
+
+  if (isLoading) {
+    return (
+      <div className={styles.page}>
+        <div className={styles.inner}>
+          <BackButton fallback={ROUTES.COMMUNITY} />
+          <div className={styles.card}>
+            <div className={styles.skeletonMeta} />
+            <div className={styles.skeletonTitle} />
+            <div className={styles.skeletonBody} />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (isError || !post) {
+    return (
+      <EmptyState
+        message="게시글이 존재하지 않습니다"
+        action={{ to: ROUTES.COMMUNITY, label: '커뮤니티 목록으로' }}
+      />
+    )
+  }
+
+  function handleRecommendToggle() {
+    if (!user) {
+      openLoginModal(window.location.pathname + window.location.search)
+      return
+    }
+    const next = !isRecommended
+    setIsRecommended(next)
+    setRecommendCount((prev) => prev + (next ? 1 : -1))
+    recommendMutation.mutate(next)
+  }
+
+  function handleEdit() {
+    navigate(ROUTES.COMMUNITY_EDIT(postId))
+  }
+
+  function handleDelete() {
+    if (!window.confirm('게시글을 삭제하시겠습니까?')) return
+    deleteMutation.mutate()
+  }
+
+  return (
+    <div className={styles.page}>
+      <div className={styles.inner}>
+        <BackButton fallback={ROUTES.COMMUNITY} />
+
+        <div className={styles.card}>
+          <div className={styles.meta}>
+            <span className={styles.badge}>
+              {POST_CATEGORY_LABEL[post.category]}
+            </span>
+            <span className={styles.metaText}>{formatDateTime(post.createdAt)}</span>
+            <span className={styles.dot} aria-hidden="true">·</span>
+            <span className={styles.metaText}>조회 {post.viewCount.toLocaleString()}</span>
+          </div>
+
+          <h1 className={styles.title}>{post.title}</h1>
+
+          <div className={styles.authorRow}>
+            <span className={styles.author}>{post.authorNickname ?? '탈퇴 회원'}</span>
+            {post.isAuthor && (
+              <div className={styles.authorActions}>
+                <Button type="button" variant="outline" size="xs" onClick={handleEdit}>수정</Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="xs"
+                  onClick={handleDelete}
+                  disabled={deleteMutation.isPending}
+                >
+                  {deleteMutation.isPending ? '삭제 중...' : '삭제'}
+                </Button>
+              </div>
+            )}
+          </div>
+
+          <PostContentView content={post.content} />
+
+          <div className={styles.footer}>
+            <button
+              type="button"
+              className={isRecommended ? styles.recommendBtnActive : styles.recommendBtn}
+              onClick={handleRecommendToggle}
+              disabled={recommendMutation.isPending}
+              aria-pressed={isRecommended}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill={isRecommended ? 'currentColor' : '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()}
+            </button>
+          </div>
+
+          <div className={styles.commentsWrap}>
+            <CommentSection postId={postId} commentCount={post.commentCount} />
+          </div>
+        </div>
+
+      </div>
+    </div>
+  )
+}
+
+export default PostDetailPage
diff --git a/src/pages/PostDetailPage.module.css b/src/pages/PostDetailPage.module.css
new file mode 100644
index 0000000..4b123d0
--- /dev/null
+++ b/src/pages/PostDetailPage.module.css
@@ -0,0 +1,165 @@
+.page {
+  min-height: calc(100svh - var(--header-height));
+  padding: 2.5rem 1.5rem 4rem;
+}
+
+.inner {
+  max-width: 840px;
+  margin: 0 auto;
+}
+
+.card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  padding: 2.25rem 2.75rem 2.5rem;
+}
+
+@keyframes shimmer {
+  0% { background-position: -400px 0; }
+  100% { background-position: 400px 0; }
+}
+
+.skeletonMeta,
+.skeletonTitle,
+.skeletonBody {
+  border-radius: var(--radius-sm);
+  background: linear-gradient(
+    90deg,
+    var(--color-surface) 25%,
+    var(--color-surface-hover) 50%,
+    var(--color-surface) 75%
+  );
+  background-size: 800px 100%;
+  animation: shimmer 1.4s infinite linear;
+}
+
+.skeletonMeta {
+  width: 160px;
+  height: 20px;
+  margin: 0 0 1rem;
+}
+
+.skeletonTitle {
+  width: 70%;
+  height: 32px;
+  margin-bottom: 1.5rem;
+}
+
+.skeletonBody {
+  width: 100%;
+  height: 240px;
+}
+
+.meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0 0 0.75rem;
+}
+
+.badge {
+  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;
+}
+
+.metaText {
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.dot {
+  color: var(--color-text-muted);
+  opacity: 0.6;
+}
+
+.title {
+  margin: 0 0 1rem;
+  font-size: 1.625rem;
+  font-weight: 700;
+  color: var(--color-text);
+  letter-spacing: -0.01em;
+  line-height: 1.35;
+}
+
+.authorRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding-bottom: 1.25rem;
+  margin-bottom: 1.5rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.author {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.authorActions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.footer {
+  display: flex;
+  justify-content: center;
+  margin-top: 2.5rem;
+  padding-top: 2rem;
+}
+
+.recommendBtn,
+.recommendBtnActive {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1.5rem;
+  border-radius: var(--radius-full);
+  border: 1.5px solid var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-text-muted);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
+}
+
+.recommendBtn:hover {
+  border-color: var(--color-accent-border);
+  color: var(--color-accent);
+}
+
+.recommendBtnActive {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: var(--color-on-accent);
+}
+
+.commentsWrap {
+  margin-top: 1.5rem;
+  padding-top: 2rem;
+  border-top: 1px solid var(--color-border);
+}
+
+@media (max-width: 767px) {
+  .page {
+    padding: 1.5rem 1rem 3rem;
+  }
+
+  .card {
+    padding: 1.5rem 1.25rem 2rem;
+  }
+
+  .title {
+    font-size: 1.375rem;
+  }
+}
diff --git a/src/pages/PostWritePage.jsx b/src/pages/PostWritePage.jsx
new file mode 100644
index 0000000..42e50c0
--- /dev/null
+++ b/src/pages/PostWritePage.jsx
@@ -0,0 +1,243 @@
+import { useMemo, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+
+import PostEditor from '@/components/post/editor/PostEditor'
+import { extractEntityTags, isContentEmpty } from '@/components/post/editor/extractEntityTags'
+import BackButton from '@/components/ui/BackButton'
+import Button from '@/components/ui/Button'
+import EmptyState from '@/components/ui/EmptyState'
+import usePageMeta from '@/hooks/usePageMeta'
+import { createPost, getPost, updatePost } from '@/services/postApi'
+import { ROUTES } from '@/constants/routes'
+import {
+  MENTION_TYPE_LABEL,
+  POST_CATEGORY_LABEL,
+  POST_CONTENT_MAX_LENGTH,
+  POST_ENTITY_TAG_MAX_COUNT,
+} from '@/constants/post'
+import styles from './PostWritePage.module.css'
+
+const CATEGORIES = ['FREE', 'INFO', 'REVIEW']
+
+function PostWritePage() {
+  const { id } = useParams()
+  const isEditMode = Boolean(id)
+  const postId = isEditMode ? Number(id) : null
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const [title, setTitle] = useState('')
+  const [category, setCategory] = useState('FREE')
+  const [contentJson, setContentJson] = useState(null)
+  const [contentLength, setContentLength] = useState(0)
+  const [error, setError] = useState(null)
+  const [formReady, setFormReady] = useState(!isEditMode)
+
+  const { data: existingPost, isLoading: isLoadingPost, isError: isPostError } = useQuery({
+    queryKey: ['post', postId],
+    queryFn: () => getPost(postId),
+    enabled: isEditMode,
+    retry: false,
+  })
+
+  if (isEditMode && existingPost && !formReady) {
+    setFormReady(true)
+    setTitle(existingPost.title)
+    setCategory(existingPost.category)
+    setContentJson(existingPost.content)
+  }
+
+  const entityTags = useMemo(() => extractEntityTags(contentJson), [contentJson])
+  const backFallback = isEditMode ? ROUTES.COMMUNITY_DETAIL(postId) : ROUTES.COMMUNITY
+
+  usePageMeta({
+    title: isEditMode ? '게시글 수정 - 커밍' : '게시글 작성 - 커밍',
+    description: '자유, 정보, 공연 후기 이야기를 남겨보세요.',
+    path: isEditMode ? `/community/${postId}/edit` : '/community/write',
+  })
+
+  const createMutation = useMutation({
+    mutationFn: createPost,
+    onSuccess: ({ id: newId }) => {
+      queryClient.invalidateQueries({ queryKey: ['posts'] })
+      navigate(ROUTES.COMMUNITY_DETAIL(newId))
+    },
+    onError: () => {
+      setError('게시글 등록에 실패했습니다. 잠시 후 다시 시도해주세요.')
+    },
+  })
+
+  const updateMutation = useMutation({
+    mutationFn: (payload) => updatePost(postId, payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['post', postId] })
+      queryClient.invalidateQueries({ queryKey: ['posts'] })
+      navigate(ROUTES.COMMUNITY_DETAIL(postId))
+    },
+    onError: () => {
+      setError('게시글 수정에 실패했습니다. 잠시 후 다시 시도해주세요.')
+    },
+  })
+
+  const isSubmitting = createMutation.isPending || updateMutation.isPending
+
+  function handleSubmit() {
+    if (!title.trim()) {
+      setError('제목을 입력해주세요.')
+      return
+    }
+    if (isContentEmpty(contentJson)) {
+      setError('본문을 입력해주세요.')
+      return
+    }
+    if (contentLength > POST_CONTENT_MAX_LENGTH) {
+      setError(`본문은 ${POST_CONTENT_MAX_LENGTH.toLocaleString()}자를 초과할 수 없습니다.`)
+      return
+    }
+    if (entityTags.length > POST_ENTITY_TAG_MAX_COUNT) {
+      setError(`태그는 최대 ${POST_ENTITY_TAG_MAX_COUNT}개까지 추가할 수 있습니다.`)
+      return
+    }
+    setError(null)
+
+    const payload = {
+      category,
+      title: title.trim(),
+      content: contentJson,
+      entityTags: entityTags.map(({ entityType, entityId }) => ({ entityType, entityId })),
+    }
+
+    if (isEditMode) {
+      updateMutation.mutate(payload)
+    } else {
+      createMutation.mutate(payload)
+    }
+  }
+
+  if (isEditMode && isPostError) {
+    return (
+      <EmptyState
+        message="게시글이 존재하지 않습니다"
+        action={{ to: ROUTES.COMMUNITY, label: '커뮤니티 목록으로' }}
+      />
+    )
+  }
+
+  if (isEditMode && existingPost && !existingPost.isAuthor) {
+    return (
+      <EmptyState
+        message="게시글을 수정할 권한이 없습니다"
+        action={{ to: ROUTES.COMMUNITY_DETAIL(postId), label: '게시글로 돌아가기' }}
+      />
+    )
+  }
+
+  if (isEditMode && (isLoadingPost || !formReady)) {
+    return (
+      <div className={styles.page}>
+        <div className={styles.inner}>
+          <BackButton fallback={backFallback} />
+          <div className={styles.skeletonTitle} />
+          <div className={styles.skeletonBar} />
+          <div className={styles.card}>
+            <div className={styles.skeletonInput} />
+            <div className={styles.skeletonBody} />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={styles.page}>
+      <div className={styles.inner}>
+        <BackButton fallback={backFallback} />
+
+        <div className={styles.pageHeader}>
+          <h1 className={styles.pageTitle}>{isEditMode ? '게시글 수정' : '게시글 작성'}</h1>
+        </div>
+
+        <div className={styles.categoryBar} role="tablist" aria-label="카테고리 선택">
+          {CATEGORIES.map((c) => (
+            <button
+              key={c}
+              type="button"
+              role="tab"
+              aria-selected={category === c}
+              className={category === c ? styles.categoryTabActive : styles.categoryTab}
+              onClick={() => setCategory(c)}
+            >
+              {POST_CATEGORY_LABEL[c]}
+            </button>
+          ))}
+        </div>
+
+        <div className={styles.card}>
+          <input
+            type="text"
+            className={styles.titleInput}
+            placeholder="제목을 입력하세요"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            maxLength={100}
+          />
+
+          <PostEditor
+            content={contentJson}
+            onChange={setContentJson}
+            onCharacterCountChange={setContentLength}
+          />
+
+          <div
+            className={
+              contentLength > POST_CONTENT_MAX_LENGTH ? styles.contentCountOver : styles.contentCount
+            }
+          >
+            {contentLength.toLocaleString()} / {POST_CONTENT_MAX_LENGTH.toLocaleString()}자
+          </div>
+
+          <div className={styles.tagRow}>
+            <span className={styles.tagRowLabel}>
+              태그된 항목{' '}
+              <span
+                className={
+                  entityTags.length > POST_ENTITY_TAG_MAX_COUNT
+                    ? styles.tagCountOver
+                    : styles.tagCount
+                }
+              >
+                ({entityTags.length}/{POST_ENTITY_TAG_MAX_COUNT})
+              </span>
+            </span>
+            {entityTags.length > 0 ? (
+              <div className={styles.tagList}>
+                {entityTags.map((tag) => (
+                  <span key={`${tag.entityType}:${tag.entityId}`} className={styles.tagChip}>
+                    {MENTION_TYPE_LABEL[tag.entityType]} · {tag.title}
+                  </span>
+                ))}
+              </div>
+            ) : (
+              <span className={styles.tagRowEmpty}>아직 태그한 항목이 없어요</span>
+            )}
+          </div>
+
+          {error && <p className={styles.error}>{error}</p>}
+
+          <div className={styles.submitRow}>
+            <Button
+              type="button"
+              size="md"
+              onClick={handleSubmit}
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? '저장 중...' : isEditMode ? '수정 완료' : '등록'}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PostWritePage
diff --git a/src/pages/PostWritePage.module.css b/src/pages/PostWritePage.module.css
new file mode 100644
index 0000000..ba4826c
--- /dev/null
+++ b/src/pages/PostWritePage.module.css
@@ -0,0 +1,216 @@
+.page {
+  min-height: calc(100svh - var(--header-height));
+  padding: 2.5rem 1.5rem 4rem;
+}
+
+.inner {
+  max-width: 840px;
+  margin: 0 auto;
+}
+
+.pageHeader {
+  margin-bottom: 1.75rem;
+}
+
+.pageTitle {
+  margin: 0;
+  font-size: 1.875rem;
+  font-weight: 700;
+  color: var(--color-text);
+  letter-spacing: -0.02em;
+}
+
+/* ── 로딩 스켈레톤 (수정 모드) ── */
+@keyframes shimmer {
+  0% { background-position: -400px 0; }
+  100% { background-position: 400px 0; }
+}
+
+.skeletonTitle,
+.skeletonBar,
+.skeletonInput,
+.skeletonBody {
+  border-radius: var(--radius-sm);
+  background: linear-gradient(
+    90deg,
+    var(--color-surface) 25%,
+    var(--color-surface-hover) 50%,
+    var(--color-surface) 75%
+  );
+  background-size: 800px 100%;
+  animation: shimmer 1.4s infinite linear;
+}
+
+.skeletonTitle {
+  width: 160px;
+  height: 30px;
+  margin-bottom: 1.75rem;
+}
+
+.skeletonBar {
+  width: 220px;
+  height: 32px;
+  margin-bottom: 1rem;
+}
+
+.skeletonInput {
+  width: 100%;
+  height: 48px;
+  margin-bottom: 0.875rem;
+}
+
+.skeletonBody {
+  width: 100%;
+  height: 240px;
+}
+
+/* ── 카테고리 선택 ── */
+.categoryBar {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.categoryTab,
+.categoryTabActive {
+  padding: 0.375rem 1rem;
+  border-radius: var(--radius-full);
+  font-size: 0.875rem;
+  font-weight: 500;
+  border: 1.5px solid var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-text-muted);
+  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
+}
+
+.categoryTab:hover {
+  border-color: var(--color-accent-border);
+  color: var(--color-accent);
+}
+
+.categoryTabActive {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: var(--color-on-accent);
+  font-weight: 600;
+}
+
+/* ── 작성 카드 (PostDetailPage .card와 동일 토큰) ── */
+.card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  padding: 2.25rem 2.75rem 2.5rem;
+}
+
+/* ── 제목 입력 (카드에 바로 이어지는 무보더 타이틀) ── */
+.titleInput {
+  display: block;
+  width: 100%;
+  padding: 0 0 1rem;
+  margin-bottom: 1.25rem;
+  border: none;
+  border-bottom: 1px solid var(--color-border);
+  background: transparent;
+  color: var(--color-text);
+  font-size: 1.375rem;
+  font-weight: 700;
+  font-family: var(--font-sans);
+  letter-spacing: -0.01em;
+  outline: none;
+}
+
+.titleInput::placeholder {
+  color: var(--color-text-muted);
+  font-weight: 700;
+}
+
+/* ── 본문 글자수 ── */
+.contentCount {
+  margin-top: 0.5rem;
+  text-align: right;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--color-text-muted);
+}
+
+.contentCountOver {
+  composes: contentCount;
+  color: var(--color-destructive);
+}
+
+/* ── 태그 미리보기 (본문과 구분선으로 분리) ── */
+.tagRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 1.25rem;
+  padding-top: 1.125rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.tagRowLabel {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--color-text-muted);
+}
+
+.tagCount {
+  font-weight: 500;
+}
+
+.tagCountOver {
+  composes: tagCount;
+  color: var(--color-destructive);
+}
+
+.tagRowEmpty {
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+}
+
+.tagList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+
+.tagChip {
+  padding: 0.25rem 0.625rem;
+  border-radius: var(--radius-full);
+  background: var(--color-accent-dim);
+  color: var(--color-accent);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+/* ── 에러 ── */
+.error {
+  margin: 0.875rem 0 0;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--color-destructive);
+}
+
+/* ── 제출 ── */
+.submitRow {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1.5rem;
+}
+
+/* ── 반응형 (다른 페이지와 동일 공식) ── */
+@media (max-width: 767px) {
+  .page {
+    padding: 1.5rem 1rem 3rem;
+  }
+
+  .pageTitle {
+    font-size: 1.5rem;
+  }
+
+  .card {
+    padding: 1.5rem 1.25rem 2rem;
+  }
+}
diff --git a/src/pages/PostsPage.jsx b/src/pages/PostsPage.jsx
new file mode 100644
index 0000000..c290906
--- /dev/null
+++ b/src/pages/PostsPage.jsx
@@ -0,0 +1,147 @@
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+
+import Button from '@/components/ui/Button'
+import EmptyState from '@/components/ui/EmptyState'
+import Pagination from '@/components/ui/Pagination'
+import PostListItem from '@/components/post/PostListItem'
+import PostListItemSkeleton from '@/components/post/PostListItemSkeleton'
+import PostsSidebar from '@/components/post/sidebar/PostsSidebar'
+import usePageMeta from '@/hooks/usePageMeta'
+import { getPosts } from '@/services/postApi'
+import { ROUTES } from '@/constants/routes'
+import { POST_CATEGORY_LABEL } from '@/constants/post'
+import useAuthStore from '@/stores/authStore'
+import useLoginModalStore from '@/stores/loginModalStore'
+import styles from './PostsPage.module.css'
+
+const CATEGORY_FILTERS = ['ALL', 'FREE', 'INFO', 'REVIEW']
+const ITEMS_PER_PAGE = 20
+
+function PostsPage() {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const navigate = useNavigate()
+  const user = useAuthStore((s) => s.user)
+  const openLoginModal = useLoginModalStore((s) => s.open)
+
+  const selectedCategory = CATEGORY_FILTERS.includes(searchParams.get('category'))
+    ? searchParams.get('category')
+    : 'ALL'
+  const pageParam = Number(searchParams.get('page') ?? 1)
+  const currentPage = Number.isInteger(pageParam) && pageParam > 0 ? pageParam : 1
+
+  usePageMeta({
+    title: '커뮤니티 - 커밍',
+    description: '자유, 정보, 공연 후기 이야기를 나누는 Jpop 팬 커뮤니티입니다.',
+    path: '/community',
+  })
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['posts', selectedCategory, currentPage],
+    queryFn: () => getPosts({
+      category: selectedCategory === 'ALL' ? undefined : selectedCategory,
+      page: currentPage - 1,
+      size: ITEMS_PER_PAGE,
+    }),
+    placeholderData: (prev) => prev,
+  })
+
+  const posts = data?.content ?? []
+  const totalPages = data?.totalPages ?? 1
+
+  function handleCategoryChange(category) {
+    setSearchParams((prev) => {
+      const next = new URLSearchParams(prev)
+      if (category === 'ALL') next.delete('category')
+      else next.set('category', category)
+      next.delete('page')
+      return next
+    })
+    window.scrollTo(0, 0)
+  }
+
+  function handlePageChange(page) {
+    setSearchParams((prev) => {
+      const next = new URLSearchParams(prev)
+      if (page === 1) next.delete('page')
+      else next.set('page', String(page))
+      return next
+    })
+    window.scrollTo(0, 0)
+  }
+
+  function handleWriteClick() {
+    if (!user) {
+      openLoginModal(ROUTES.COMMUNITY_WRITE)
+      return
+    }
+    navigate(ROUTES.COMMUNITY_WRITE)
+  }
+
+  return (
+    <div className={styles.page}>
+      <div className={styles.inner}>
+
+        <div className={styles.pageHeader}>
+          <h1 className={styles.pageTitle}>커뮤니티</h1>
+          <p className={styles.pageDesc}>자유 · 정보 · 후기를 나누는 Jpop 팬 공간이에요</p>
+        </div>
+
+        <div className={styles.layout}>
+          <div className={styles.toolbar}>
+            <div className={styles.filterBar} role="tablist" aria-label="카테고리 필터">
+              {CATEGORY_FILTERS.map((c) => (
+                <button
+                  key={c}
+                  role="tab"
+                  aria-selected={selectedCategory === c}
+                  className={`${styles.filterTab} ${selectedCategory === c ? styles.filterTabActive : ''}`}
+                  onClick={() => handleCategoryChange(c)}
+                >
+                  {c === 'ALL' ? '전체' : POST_CATEGORY_LABEL[c]}
+                </button>
+              ))}
+            </div>
+            <Button size="sm" className={styles.writeBtn} onClick={handleWriteClick}>
+              게시글 작성
+            </Button>
+          </div>
+
+          <div className={styles.main}>
+
+            {isLoading ? (
+              <div className={styles.list}>
+                {Array.from({ length: 8 }).map((_, i) => (
+                  <PostListItemSkeleton key={i} />
+                ))}
+              </div>
+            ) : posts.length > 0 ? (
+              <div className={styles.list}>
+                {posts.map((post) => (
+                  <PostListItem key={post.id} post={post} />
+                ))}
+              </div>
+            ) : (
+              <EmptyState message="아직 등록된 게시글이 없습니다." />
+            )}
+
+            {!isLoading && totalPages > 1 && (
+              <Pagination
+                currentPage={currentPage}
+                totalPages={totalPages}
+                onPageChange={handlePageChange}
+              />
+            )}
+
+          </div>
+
+          <div className={styles.sidebarCell}>
+            <PostsSidebar />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PostsPage
diff --git a/src/pages/PostsPage.module.css b/src/pages/PostsPage.module.css
new file mode 100644
index 0000000..46dcc81
--- /dev/null
+++ b/src/pages/PostsPage.module.css
@@ -0,0 +1,139 @@
+.page {
+  min-height: calc(100svh - var(--header-height));
+  padding: 2.5rem 1.5rem 4rem;
+}
+
+.inner {
+  max-width: var(--max-width);
+  margin: 0 auto;
+}
+
+/* 2열: 본문(툴바/목록) | 사이드바(15.5rem, PostsSidebar.module.css와 폭 일치) */
+.layout {
+  display: grid;
+  grid-template-columns: 1fr 15.5rem;
+  column-gap: 2rem;
+  row-gap: 1.5rem;
+  align-items: start;
+}
+
+.main {
+  grid-column: 1;
+  grid-row: 2;
+  min-width: 0;
+}
+
+.sidebarCell {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+/* ── 페이지 헤더 ── */
+.pageHeader {
+  margin-bottom: 1.75rem;
+}
+
+.pageTitle {
+  margin: 0 0 0.2rem;
+  font-size: 1.875rem;
+  font-weight: 700;
+  color: var(--color-text);
+  letter-spacing: -0.02em;
+}
+
+.pageDesc {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+}
+
+/* ── 툴바 (카테고리 필터 + 글쓰기, 목록 칸과 동일한 폭) ── */
+.toolbar {
+  grid-column: 1;
+  grid-row: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.writeBtn {
+  flex-shrink: 0;
+}
+
+.filterBar {
+  display: flex;
+  gap: 0.5rem;
+  overflow-x: auto;
+  padding-bottom: 0.25rem;
+  scrollbar-width: none;
+  flex: 1;
+  min-width: 0;
+}
+
+.filterBar::-webkit-scrollbar {
+  display: none;
+}
+
+.filterTab {
+  flex-shrink: 0;
+  padding: 0.375rem 1rem;
+  border-radius: var(--radius-full);
+  font-size: 0.875rem;
+  font-weight: 500;
+  border: 1.5px solid var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-text-muted);
+  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
+  white-space: nowrap;
+}
+
+.filterTab:hover {
+  border-color: var(--color-accent-border);
+  color: var(--color-accent);
+}
+
+.filterTabActive {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: var(--color-on-accent);
+  font-weight: 600;
+  box-shadow: 0 2px 8px var(--color-accent-shadow);
+}
+
+.filterTabActive:hover {
+  color: var(--color-on-accent);
+}
+
+/* ── 목록 ── */
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+@media (max-width: 1279px) {
+  .inner {
+    max-width: 840px;
+  }
+
+  .layout {
+    grid-template-columns: 1fr;
+  }
+
+  .sidebarCell {
+    display: none;
+  }
+}
+
+@media (max-width: 767px) {
+  .toolbar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.75rem;
+  }
+
+  .writeBtn {
+    align-self: stretch;
+  }
+}
diff --git a/src/pages/SignupPage.module.css b/src/pages/SignupPage.module.css
index 2bb554f..594ac95 100644
--- a/src/pages/SignupPage.module.css
+++ b/src/pages/SignupPage.module.css
@@ -162,6 +162,11 @@
   cursor: pointer;
 }
 
+.checkbox:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
 .termLabelAll {
   font-size: 0.9375rem;
   font-weight: 600;
diff --git a/src/services/postApi.js b/src/services/postApi.js
new file mode 100644
index 0000000..4c3e67f
--- /dev/null
+++ b/src/services/postApi.js
@@ -0,0 +1,76 @@
+import api from './api'
+
+export async function getPosts(params) {
+  const { data } = await api.get('/posts', { params })
+  return data
+}
+
+export async function getPost(id) {
+  const { data } = await api.get(`/posts/${id}`)
+  return data
+}
+
+export async function getPopularPosts(params) {
+  const { data } = await api.get('/posts/popular', { params })
+  return data
+}
+
+export async function getTrendingTags(params) {
+  const { data } = await api.get('/posts/trending-tags', { params })
+  return data
+}
+
+export async function createPost(payload) {
+  const { data } = await api.post('/posts', payload)
+  return data
+}
+
+export async function updatePost(id, payload) {
+  const { data } = await api.patch(`/posts/${id}`, payload)
+  return data
+}
+
+export async function deletePost(id) {
+  const { data } = await api.delete(`/posts/${id}`)
+  return data
+}
+
+export async function searchMentions(params) {
+  const { data } = await api.get('/mentions/search', { params })
+  return data
+}
+
+export async function recommendPost(id) {
+  const { data } = await api.post(`/posts/${id}/recommend`)
+  return data
+}
+
+export async function unrecommendPost(id) {
+  const { data } = await api.delete(`/posts/${id}/recommend`)
+  return data
+}
+
+export async function getComments(postId, params) {
+  const { data } = await api.get(`/posts/${postId}/comments`, { params })
+  return data
+}
+
+export async function createComment(postId, payload) {
+  const { data } = await api.post(`/posts/${postId}/comments`, payload)
+  return data
+}
+
+export async function deleteComment(commentId) {
+  const { data } = await api.delete(`/comments/${commentId}`)
+  return data
+}
+
+export async function likeComment(commentId) {
+  const { data } = await api.post(`/comments/${commentId}/like`)
+  return data
+}
+
+export async function unlikeComment(commentId) {
+  const { data } = await api.delete(`/comments/${commentId}/like`)
+  return data
+}
diff --git a/src/utils/date.js b/src/utils/date.js
index 15eb214..afc55d1 100644
--- a/src/utils/date.js
+++ b/src/utils/date.js
@@ -31,3 +31,19 @@ export function formatRelativeDate(isoStr) {
   if (diff < 28) return `${Math.floor(diff / 7)}주 전`
   return `${Math.floor(diff / 30)}개월 전`
 }
+
+// 게시글 목록·백링크용 날짜 표기 정책 (고정 시각 표기 — 재렌더 없이도 값이 낡지 않음)
+// 24시간 이내 → 'HH:mm', 올해 → 'MM.dd', 해가 다르면 → 'yy.MM.dd'
+export function formatPostDate(isoStr) {
+  if (!isoStr) return ''
+  const date = new Date(isoStr)
+  const now = new Date()
+
+  if (now - date >= 0 && now - date < 86400000) {
+    return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
+  }
+  if (date.getFullYear() === now.getFullYear()) {
+    return `${String(date.getMonth() + 1).padStart(2, '0')}.${String(date.getDate()).padStart(2, '0')}`
+  }
+  return `${String(date.getFullYear()).slice(-2)}.${String(date.getMonth() + 1).padStart(2, '0')}.${String(date.getDate()).padStart(2, '0')}`
+}