From 936583ad41260033856da347d27752eaddf2ab52 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Sun, 10 Aug 2025 20:11:38 +0900
Subject: [PATCH 01/71] =?UTF-8?q?build:=20ai=EB=A5=BC=20=EC=82=AC=EC=9A=A9?=
 =?UTF-8?q?=ED=95=98=EC=97=AC=20=ED=85=8C=EC=8A=A4=ED=8A=B8=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=ED=99=98=EA=B2=BD=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                   |   2 +
 pnpm-lock.yaml                 |  62 ++++++++---
 src/App.test.tsx               | 115 +++++++++++++++++++++
 src/components/index.tsx       |  87 +++++++++++-----
 src/pages/PostsManagerPage.tsx | 180 +++++++++++++++++++++-----------
 src/test/handlers.ts           | 181 +++++++++++++++++++++++++++++++++
 src/test/setup.ts              |  20 ++++
 tsconfig.app.json              |   3 +-
 tsconfig.app.tsbuildinfo       |   1 +
 tsconfig.node.tsbuildinfo      |   1 +
 vitest.config.ts               |   1 +
 11 files changed, 554 insertions(+), 99 deletions(-)
 create mode 100644 src/App.test.tsx
 create mode 100644 src/test/handlers.ts
 create mode 100644 src/test/setup.ts
 create mode 100644 tsconfig.app.tsbuildinfo
 create mode 100644 tsconfig.node.tsbuildinfo

diff --git a/package.json b/package.json
index e014c5272..b97f9a0aa 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "eslint .",
     "preview": "vite preview",
     "test": "vitest",
+    "test:ui": "vitest --ui",
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
@@ -25,6 +26,7 @@
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "^5.0.0",
+    "@vitest/ui": "3.2.4",
     "axios": "^1.11.0",
     "class-variance-authority": "^0.7.1",
     "eslint": "^9.33.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6b2a40d18..64c6a4b1c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -42,6 +42,9 @@ importers:
       '@vitejs/plugin-react':
         specifier: ^5.0.0
         version: 5.0.0(vite@7.1.1(@types/node@22.8.1))
+      '@vitest/ui':
+        specifier: 3.2.4
+        version: 3.2.4(vitest@3.2.4)
       axios:
         specifier: ^1.11.0
         version: 1.11.0
@@ -86,7 +89,7 @@ importers:
         version: 7.1.1(@types/node@22.8.1)
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/node@22.8.1)(@vitest/browser@2.1.3)(jsdom@26.1.0)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))
+        version: 3.2.4(@types/node@22.8.1)(@vitest/browser@2.1.3)(@vitest/ui@3.2.4)(jsdom@26.1.0)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))
       vitest-browser-react:
         specifier: ^1.0.1
         version: 1.0.1(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(@vitest/browser@2.1.3)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vitest@3.2.4)
@@ -103,10 +106,6 @@ packages:
   '@asamuzakjp/css-color@2.8.3':
     resolution: {integrity: sha512-GIc76d9UI1hCvOATjZPyHFmE5qhRccp3/zGfMPapK3jBi+yocEzp6BBB0UnfRYP9NP4FANqUZYb0hnfs3TM3hw==}
 
-  '@babel/code-frame@7.26.2':
-    resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/code-frame@7.27.1':
     resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
@@ -1130,6 +1129,11 @@ packages:
   '@vitest/spy@3.2.4':
     resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
 
+  '@vitest/ui@3.2.4':
+    resolution: {integrity: sha512-hGISOaP18plkzbWEcP/QvtRW1xDXF2+96HbEX6byqQhAUbiS5oH6/9JwW+QsQCIYON2bI6QZBF+2PvOmrRZ9wA==}
+    peerDependencies:
+      vitest: 3.2.4
+
   '@vitest/utils@2.1.3':
     resolution: {integrity: sha512-xpiVfDSg1RrYT0tX6czgerkpcKFmFOF/gCr30+Mve5V2kewCy4Prn1/NDMSRwaSmT7PRaOF83wu+bEtsY1wrvA==}
 
@@ -1467,6 +1471,9 @@ packages:
       picomatch:
         optional: true
 
+  fflate@0.8.2:
+    resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
+
   file-entry-cache@8.0.0:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
@@ -1486,6 +1493,9 @@ packages:
   flatted@3.3.1:
     resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
 
+  flatted@3.3.3:
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+
   follow-redirects@1.15.9:
     resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
     engines: {node: '>=4.0'}
@@ -2004,6 +2014,10 @@ packages:
     resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
     engines: {node: '>= 10'}
 
+  sirv@3.0.1:
+    resolution: {integrity: sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A==}
+    engines: {node: '>=18'}
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -2362,12 +2376,6 @@ snapshots:
       '@csstools/css-tokenizer': 3.0.3
       lru-cache: 10.4.3
 
-  '@babel/code-frame@7.26.2':
-    dependencies:
-      '@babel/helper-validator-identifier': 7.25.9
-      js-tokens: 4.0.0
-      picocolors: 1.1.1
-
   '@babel/code-frame@7.27.1':
     dependencies:
       '@babel/helper-validator-identifier': 7.27.1
@@ -3083,7 +3091,7 @@ snapshots:
 
   '@testing-library/dom@10.4.0':
     dependencies:
-      '@babel/code-frame': 7.26.2
+      '@babel/code-frame': 7.27.1
       '@babel/runtime': 7.26.0
       '@types/aria-query': 5.0.4
       aria-query: 5.3.0
@@ -3284,7 +3292,7 @@ snapshots:
       msw: 2.10.4(@types/node@22.8.1)(typescript@5.9.2)
       sirv: 2.0.4
       tinyrainbow: 1.2.0
-      vitest: 3.2.4(@types/node@22.8.1)(@vitest/browser@2.1.3)(jsdom@26.1.0)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))
+      vitest: 3.2.4(@types/node@22.8.1)(@vitest/browser@2.1.3)(@vitest/ui@3.2.4)(jsdom@26.1.0)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))
       ws: 8.18.0
     transitivePeerDependencies:
       - '@types/node'
@@ -3344,10 +3352,21 @@ snapshots:
     dependencies:
       tinyspy: 4.0.3
 
+  '@vitest/ui@3.2.4(vitest@3.2.4)':
+    dependencies:
+      '@vitest/utils': 3.2.4
+      fflate: 0.8.2
+      flatted: 3.3.3
+      pathe: 2.0.3
+      sirv: 3.0.1
+      tinyglobby: 0.2.14
+      tinyrainbow: 2.0.0
+      vitest: 3.2.4(@types/node@22.8.1)(@vitest/browser@2.1.3)(@vitest/ui@3.2.4)(jsdom@26.1.0)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))
+
   '@vitest/utils@2.1.3':
     dependencies:
       '@vitest/pretty-format': 2.1.3
-      loupe: 3.1.3
+      loupe: 3.2.0
       tinyrainbow: 1.2.0
 
   '@vitest/utils@3.2.4':
@@ -3693,6 +3712,8 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.3
 
+  fflate@0.8.2: {}
+
   file-entry-cache@8.0.0:
     dependencies:
       flat-cache: 4.0.1
@@ -3713,6 +3734,8 @@ snapshots:
 
   flatted@3.3.1: {}
 
+  flatted@3.3.3: {}
+
   follow-redirects@1.15.9: {}
 
   form-data@4.0.4:
@@ -4181,6 +4204,12 @@ snapshots:
       mrmime: 2.0.0
       totalist: 3.0.1
 
+  sirv@3.0.1:
+    dependencies:
+      '@polka/url': 1.0.0-next.28
+      mrmime: 2.0.0
+      totalist: 3.0.1
+
   source-map-js@1.2.1: {}
 
   stackback@0.0.2: {}
@@ -4360,12 +4389,12 @@ snapshots:
       '@vitest/browser': 2.1.3(@types/node@22.8.1)(@vitest/spy@3.2.4)(typescript@5.9.2)(vite@7.1.1(@types/node@22.8.1))(vitest@3.2.4)
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
-      vitest: 3.2.4(@types/node@22.8.1)(@vitest/browser@2.1.3)(jsdom@26.1.0)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))
+      vitest: 3.2.4(@types/node@22.8.1)(@vitest/browser@2.1.3)(@vitest/ui@3.2.4)(jsdom@26.1.0)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))
     optionalDependencies:
       '@types/react': 19.1.9
       '@types/react-dom': 19.1.7(@types/react@19.1.9)
 
-  vitest@3.2.4(@types/node@22.8.1)(@vitest/browser@2.1.3)(jsdom@26.1.0)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2)):
+  vitest@3.2.4(@types/node@22.8.1)(@vitest/browser@2.1.3)(@vitest/ui@3.2.4)(jsdom@26.1.0)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2)):
     dependencies:
       '@types/chai': 5.2.2
       '@vitest/expect': 3.2.4
@@ -4393,6 +4422,7 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.8.1
       '@vitest/browser': 2.1.3(@types/node@22.8.1)(@vitest/spy@3.2.4)(typescript@5.9.2)(vite@7.1.1(@types/node@22.8.1))(vitest@3.2.4)
+      '@vitest/ui': 3.2.4(vitest@3.2.4)
       jsdom: 26.1.0
     transitivePeerDependencies:
       - jiti
diff --git a/src/App.test.tsx b/src/App.test.tsx
new file mode 100644
index 000000000..813925622
--- /dev/null
+++ b/src/App.test.tsx
@@ -0,0 +1,115 @@
+import { render, screen, within } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import App from "./App"
+
+// 통합 시나리오: 목록 로딩 → 태그 필터 → 검색 → 상세 댓글 로드/추가/수정/삭제/좋아요 → 게시물 추가/수정/삭제
+
+const renderApp = () => render(<App />)
+
+describe("App - 기본 동작", () => {
+  test("초기 로딩 후 게시물 목록과 페이지네이션이 나타난다", async () => {
+    renderApp()
+
+    // 로딩
+    expect(screen.getByText("로딩 중...")).toBeInTheDocument()
+
+    // 목록 렌더링
+    const firstTitleCell = await screen.findByText(/^Post 1$/)
+    expect(firstTitleCell).toBeInTheDocument()
+    const row = firstTitleCell.closest("tr")!
+
+    // 페이지네이션 버튼
+    expect(screen.getByRole("button", { name: "다음" })).toBeEnabled()
+    expect(screen.getByRole("button", { name: "이전" })).toBeDisabled()
+    expect(row).toBeInTheDocument()
+  })
+
+  test("태그 필터링이 동작한다", async () => {
+    renderApp()
+
+    await screen.findByText(/^Post 1$/)
+
+    // 드롭다운 대신 테이블 내 태그 칩 클릭으로 필터 적용 (jsdom pointer 이슈 회피)
+    const tagChip = await screen.findAllByText("tag-a")
+    await userEvent.click(tagChip[0])
+
+    // URL 쿼리 파라미터로 태그가 반영되었는지 확인
+    expect(window.location.search).toContain("tag=tag-a")
+
+    // 필터 적용 이후에도 리스트가 렌더링되는지 간단 확인 (여러 항목 허용)
+    const titles = await screen.findAllByText(/^Post \d+$/)
+    expect(titles.length).toBeGreaterThan(0)
+  })
+
+  test("검색이 동작한다", async () => {
+    renderApp()
+    await screen.findByText(/^Post 1$/)
+
+    const input = screen.getByRole("textbox", { name: "게시물 검색" })
+    await userEvent.clear(input)
+    await userEvent.type(input, "Post 2{enter}")
+
+    const results = await screen.findAllByText(/Post 2/)
+    expect(results.length).toBeGreaterThan(0)
+  })
+})
+
+describe("App - 댓글", () => {
+  test("게시물 상세 열고 댓글을 로드하고 새 댓글을 추가할 수 있다", async () => {
+    renderApp()
+    const firstTitleCell = await screen.findByText(/^Post 1$/)
+    const row = firstTitleCell.closest("tr")!
+    await userEvent.click(within(row).getByRole("button", { name: "댓글 보기" }))
+
+    // 상세 다이얼로그 열림 + 댓글 보임
+    const dialog = await screen.findByRole("dialog")
+    expect(within(dialog).getByRole("heading", { name: /^댓글$/ })).toBeInTheDocument()
+
+    // 댓글 추가
+    const addCommentBtn = within(dialog).getByRole("button", { name: /댓글 추가/ })
+    await userEvent.click(addCommentBtn)
+    const addDialog = await screen.findByRole("dialog", { name: /새 댓글 추가/i })
+    const textarea = within(addDialog).getByPlaceholderText("댓글 내용")
+    await userEvent.type(textarea, "great!")
+    await userEvent.click(within(addDialog).getByRole("button", { name: "댓글 추가" }))
+    expect(await within(dialog).findByText(/great!/)).toBeInTheDocument()
+  })
+})
+
+describe("App - 게시물 CRUD", () => {
+  test("게시물 추가/수정/삭제가 가능하다", async () => {
+    renderApp()
+    await screen.findByText(/^Post 1$/)
+
+    // 추가
+    await userEvent.click(screen.getByRole("button", { name: /게시물 추가/ }))
+    const addDialog = await screen.findByRole("dialog", { name: /새 게시물 추가/i })
+    await userEvent.type(within(addDialog).getByPlaceholderText("제목"), "New Title")
+    const body = within(addDialog).getByPlaceholderText("내용")
+    await userEvent.type(body, "Body")
+    const userId = within(addDialog).getByPlaceholderText("사용자 ID")
+    await userEvent.clear(userId)
+    await userEvent.type(userId, "1")
+    await userEvent.click(within(addDialog).getByRole("button", { name: "게시물 추가" }))
+
+    expect(await screen.findByText("New Title")).toBeInTheDocument()
+
+    // 수정
+    const titleCell = screen.getByText("New Title")
+    const row = titleCell.closest("tr")!
+    await userEvent.click(within(row).getByRole("button", { name: "게시물 수정" }))
+    const editDialog = await screen.findByRole("dialog", { name: /게시물 수정/i })
+    const titleInput = within(editDialog).getByPlaceholderText("제목")
+    await userEvent.clear(titleInput)
+    await userEvent.type(titleInput, "Updated Title")
+    await userEvent.click(within(editDialog).getByRole("button", { name: "게시물 업데이트" }))
+    expect(await screen.findByText("Updated Title")).toBeInTheDocument()
+
+    // 삭제
+    const updatedTitleCell = screen.getByText("Updated Title")
+    const updatedRow = updatedTitleCell.closest("tr")!
+    await userEvent.click(within(updatedRow).getByRole("button", { name: "게시물 삭제" }))
+
+    expect(screen.queryByText("Updated Title")).not.toBeInTheDocument()
+  }, 15000)
+})
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 8495817d3..24f022e77 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -42,7 +42,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({ className, v
 Button.displayName = "Button"
 
 // 입력 컴포넌트
-export const Input = forwardRef(({ className, type, ...props }, ref) => {
+type InputProps = React.InputHTMLAttributes<HTMLInputElement> & { className?: string }
+export const Input = forwardRef<HTMLInputElement, InputProps>(({ className = "", type, ...props }, ref) => {
   return (
     <input
       type={type}
@@ -55,28 +56,33 @@ export const Input = forwardRef(({ className, type, ...props }, ref) => {
 Input.displayName = "Input"
 
 // 카드 컴포넌트
-export const Card = forwardRef(({ className, ...props }, ref) => (
+type DivProps = React.HTMLAttributes<HTMLDivElement> & { className?: string }
+export const Card = forwardRef<HTMLDivElement, DivProps>(({ className = "", ...props }, ref) => (
   <div ref={ref} className={`rounded-lg border bg-card text-card-foreground shadow-sm ${className}`} {...props} />
 ))
 Card.displayName = "Card"
 
-export const CardHeader = forwardRef(({ className, ...props }, ref) => (
+export const CardHeader = forwardRef<HTMLDivElement, DivProps>(({ className = "", ...props }, ref) => (
   <div ref={ref} className={`flex flex-col space-y-1.5 p-6 ${className}`} {...props} />
 ))
 CardHeader.displayName = "CardHeader"
 
-export const CardTitle = forwardRef(({ className, ...props }, ref) => (
+export const CardTitle = forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement> & { className?: string }
+>(({ className = "", ...props }, ref) => (
   <h3 ref={ref} className={`text-2xl font-semibold leading-none tracking-tight ${className}`} {...props} />
 ))
 CardTitle.displayName = "CardTitle"
 
-export const CardContent = forwardRef(({ className, ...props }, ref) => (
+export const CardContent = forwardRef<HTMLDivElement, DivProps>(({ className = "", ...props }, ref) => (
   <div ref={ref} className={`p-6 pt-0 ${className}`} {...props} />
 ))
 CardContent.displayName = "CardContent"
 
 // 텍스트 영역 컴포넌트
-export const Textarea = forwardRef(({ className, ...props }, ref) => {
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & { className?: string }
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(({ className = "", ...props }, ref) => {
   return (
     <textarea
       className={`flex min-h-[150px] w-full rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
@@ -92,7 +98,10 @@ export const Select = SelectPrimitive.Root
 export const SelectGroup = SelectPrimitive.Group
 export const SelectValue = SelectPrimitive.Value
 
-export const SelectTrigger = forwardRef(({ className, children, ...props }, ref) => (
+export const SelectTrigger = forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & { className?: string }
+>(({ className = "", children, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     className={`flex h-10 items-center justify-between rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
@@ -104,7 +113,10 @@ export const SelectTrigger = forwardRef(({ className, children, ...props }, ref)
 ))
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 
-export const SelectContent = forwardRef(({ className, children, position = "popper", ...props }, ref) => (
+export const SelectContent = forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & { className?: string }
+>(({ className = "", children, position = "popper", ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       ref={ref}
@@ -118,7 +130,10 @@ export const SelectContent = forwardRef(({ className, children, position = "popp
 ))
 SelectContent.displayName = SelectPrimitive.Content.displayName
 
-export const SelectItem = forwardRef(({ className, children, ...props }, ref) => (
+export const SelectItem = forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & { className?: string }
+>(({ className = "", children, ...props }, ref) => (
   <SelectPrimitive.Item
     ref={ref}
     className={`relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ${className}`}
@@ -140,7 +155,10 @@ export const DialogTrigger = DialogPrimitive.Trigger
 export const DialogPortal = DialogPrimitive.Portal
 export const DialogOverlay = DialogPrimitive.Overlay
 
-export const DialogContent = forwardRef(({ className, children, ...props }, ref) => (
+export const DialogContent = forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { className?: string }
+>(({ className = "", children, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay className="fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
     <DialogPrimitive.Content
@@ -158,12 +176,18 @@ export const DialogContent = forwardRef(({ className, children, ...props }, ref)
 ))
 DialogContent.displayName = DialogPrimitive.Content.displayName
 
-export const DialogHeader = ({ className, ...props }) => (
+export const DialogHeader = ({
+  className = "",
+  ...props
+}: { className?: string } & React.HTMLAttributes<HTMLDivElement>) => (
   <div className={`flex flex-col space-y-1.5 text-center sm:text-left ${className}`} {...props} />
 )
 DialogHeader.displayName = "DialogHeader"
 
-export const DialogTitle = forwardRef(({ className, ...props }, ref) => (
+export const DialogTitle = forwardRef<
+  HTMLHeadingElement,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & { className?: string }
+>(({ className = "", ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
     className={`text-lg font-semibold leading-none tracking-tight ${className}`}
@@ -173,24 +197,33 @@ export const DialogTitle = forwardRef(({ className, ...props }, ref) => (
 DialogTitle.displayName = DialogPrimitive.Title.displayName
 
 // 테이블 컴포넌트
-export const Table = forwardRef(({ className, ...props }, ref) => (
-  <div className="w-full overflow-auto">
-    <table ref={ref} className={`table-fixed w-full caption-bottom text-sm ${className}`} {...props} />
-  </div>
-))
+export const Table = forwardRef<HTMLTableElement, React.TableHTMLAttributes<HTMLTableElement> & { className?: string }>(
+  ({ className = "", ...props }, ref) => (
+    <div className="w-full overflow-auto">
+      <table ref={ref} className={`table-fixed w-full caption-bottom text-sm ${className}`} {...props} />
+    </div>
+  ),
+)
 Table.displayName = "Table"
 
-export const TableHeader = forwardRef(({ className, ...props }, ref) => (
-  <thead ref={ref} className={`[&_tr]:border-b ${className}`} {...props} />
-))
+export const TableHeader = forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement> & { className?: string }
+>(({ className = "", ...props }, ref) => <thead ref={ref} className={`[&_tr]:border-b ${className}`} {...props} />)
 TableHeader.displayName = "TableHeader"
 
-export const TableBody = forwardRef(({ className, ...props }, ref) => (
+export const TableBody = forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement> & { className?: string }
+>(({ className = "", ...props }, ref) => (
   <tbody ref={ref} className={`[&_tr:last-child]:border-0 ${className}`} {...props} />
 ))
 TableBody.displayName = "TableBody"
 
-export const TableRow = forwardRef(({ className, ...props }, ref) => (
+export const TableRow = forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement> & { className?: string }
+>(({ className = "", ...props }, ref) => (
   <tr
     ref={ref}
     className={`border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted h-14 ${className}`}
@@ -199,7 +232,10 @@ export const TableRow = forwardRef(({ className, ...props }, ref) => (
 ))
 TableRow.displayName = "TableRow"
 
-export const TableHead = forwardRef(({ className, ...props }, ref) => (
+export const TableHead = forwardRef<
+  HTMLTableHeaderCellElement,
+  React.ThHTMLAttributes<HTMLTableHeaderCellElement> & { className?: string }
+>(({ className = "", ...props }, ref) => (
   <th
     ref={ref}
     className={`h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 ${className}`}
@@ -208,7 +244,10 @@ export const TableHead = forwardRef(({ className, ...props }, ref) => (
 ))
 TableHead.displayName = "TableHead"
 
-export const TableCell = forwardRef(({ className, ...props }, ref) => (
+export const TableCell = forwardRef<
+  HTMLTableDataCellElement,
+  React.TdHTMLAttributes<HTMLTableDataCellElement> & { className?: string }
+>(({ className = "", ...props }, ref) => (
   <td ref={ref} className={`p-2 align-middle [&:has([role=checkbox])]:pr-0 ${className}`} {...props} />
 ))
 TableCell.displayName = "TableCell"
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index f80eb91ef..0eae7f768 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -26,34 +26,68 @@ import {
   Textarea,
 } from "../components"
 
+// Types
+type Reaction = { likes: number; dislikes: number }
+type UserSummary = { id: number; username?: string; image?: string }
+type Address = { address?: string; city?: string; state?: string }
+type Company = { name?: string; title?: string }
+type User = UserSummary & {
+  firstName?: string
+  lastName?: string
+  age?: number
+  email?: string
+  phone?: string
+  address?: Address
+  company?: Company
+}
+type Post = {
+  id: number
+  title: string
+  body: string
+  userId: number
+  tags?: string[]
+  reactions?: Reaction
+  author?: UserSummary
+}
+type Comment = { id: number; postId: number; body: string; user: { username: string }; likes: number }
+type Tag = { slug: string; url: string }
+
 const PostsManager = () => {
   const navigate = useNavigate()
   const location = useLocation()
   const queryParams = new URLSearchParams(location.search)
 
   // 상태 관리
-  const [posts, setPosts] = useState([])
-  const [total, setTotal] = useState(0)
+  const [posts, setPosts] = useState<Post[]>([])
+  const [total, setTotal] = useState<number>(0)
   const [skip, setSkip] = useState(parseInt(queryParams.get("skip") || "0"))
   const [limit, setLimit] = useState(parseInt(queryParams.get("limit") || "10"))
   const [searchQuery, setSearchQuery] = useState(queryParams.get("search") || "")
-  const [selectedPost, setSelectedPost] = useState(null)
+  const [selectedPost, setSelectedPost] = useState<Post | null>(null)
   const [sortBy, setSortBy] = useState(queryParams.get("sortBy") || "")
   const [sortOrder, setSortOrder] = useState(queryParams.get("sortOrder") || "asc")
   const [showAddDialog, setShowAddDialog] = useState(false)
   const [showEditDialog, setShowEditDialog] = useState(false)
-  const [newPost, setNewPost] = useState({ title: "", body: "", userId: 1 })
-  const [loading, setLoading] = useState(false)
-  const [tags, setTags] = useState([])
+  const [newPost, setNewPost] = useState<{ title: string; body: string; userId: number }>({
+    title: "",
+    body: "",
+    userId: 1,
+  })
+  const [loading, setLoading] = useState<boolean>(false)
+  const [tags, setTags] = useState<Tag[]>([])
   const [selectedTag, setSelectedTag] = useState(queryParams.get("tag") || "")
-  const [comments, setComments] = useState({})
-  const [selectedComment, setSelectedComment] = useState(null)
-  const [newComment, setNewComment] = useState({ body: "", postId: null, userId: 1 })
+  const [comments, setComments] = useState<Record<number, Comment[]>>({})
+  const [selectedComment, setSelectedComment] = useState<Comment | null>(null)
+  const [newComment, setNewComment] = useState<{ body: string; postId: number | null; userId: number }>({
+    body: "",
+    postId: null,
+    userId: 1,
+  })
   const [showAddCommentDialog, setShowAddCommentDialog] = useState(false)
   const [showEditCommentDialog, setShowEditCommentDialog] = useState(false)
   const [showPostDetailDialog, setShowPostDetailDialog] = useState(false)
   const [showUserModal, setShowUserModal] = useState(false)
-  const [selectedUser, setSelectedUser] = useState(null)
+  const [selectedUser, setSelectedUser] = useState<User | null>(null)
 
   // URL 업데이트 함수
   const updateURL = () => {
@@ -70,19 +104,19 @@ const PostsManager = () => {
   // 게시물 가져오기
   const fetchPosts = () => {
     setLoading(true)
-    let postsData
-    let usersData
+    let postsData: { posts: Post[]; total: number }
+    let usersData: Array<Pick<User, "id" | "username" | "image">>
 
     fetch(`/api/posts?limit=${limit}&skip=${skip}`)
       .then((response) => response.json())
-      .then((data) => {
+      .then((data: { posts: Post[]; total: number }) => {
         postsData = data
         return fetch("/api/users?limit=0&select=username,image")
       })
       .then((response) => response.json())
-      .then((users) => {
+      .then((users: { users: Array<Pick<User, "id" | "username" | "image">> }) => {
         usersData = users.users
-        const postsWithUsers = postsData.posts.map((post) => ({
+        const postsWithUsers = postsData.posts.map((post: Post) => ({
           ...post,
           author: usersData.find((user) => user.id === post.userId),
         }))
@@ -101,7 +135,7 @@ const PostsManager = () => {
   const fetchTags = async () => {
     try {
       const response = await fetch("/api/posts/tags")
-      const data = await response.json()
+      const data: Tag[] = await response.json()
       setTags(data)
     } catch (error) {
       console.error("태그 가져오기 오류:", error)
@@ -117,7 +151,7 @@ const PostsManager = () => {
     setLoading(true)
     try {
       const response = await fetch(`/api/posts/search?q=${searchQuery}`)
-      const data = await response.json()
+      const data: { posts: Post[]; total: number } = await response.json()
       setPosts(data.posts)
       setTotal(data.total)
     } catch (error) {
@@ -127,7 +161,7 @@ const PostsManager = () => {
   }
 
   // 태그별 게시물 가져오기
-  const fetchPostsByTag = async (tag) => {
+  const fetchPostsByTag = async (tag: string) => {
     if (!tag || tag === "all") {
       fetchPosts()
       return
@@ -138,10 +172,10 @@ const PostsManager = () => {
         fetch(`/api/posts/tag/${tag}`),
         fetch("/api/users?limit=0&select=username,image"),
       ])
-      const postsData = await postsResponse.json()
-      const usersData = await usersResponse.json()
+      const postsData: { posts: Post[]; total: number } = await postsResponse.json()
+      const usersData: { users: Array<Pick<User, "id" | "username" | "image">> } = await usersResponse.json()
 
-      const postsWithUsers = postsData.posts.map((post) => ({
+      const postsWithUsers = postsData.posts.map((post: Post) => ({
         ...post,
         author: usersData.users.find((user) => user.id === post.userId),
       }))
@@ -162,7 +196,7 @@ const PostsManager = () => {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(newPost),
       })
-      const data = await response.json()
+      const data: Post = await response.json()
       setPosts([data, ...posts])
       setShowAddDialog(false)
       setNewPost({ title: "", body: "", userId: 1 })
@@ -173,13 +207,14 @@ const PostsManager = () => {
 
   // 게시물 업데이트
   const updatePost = async () => {
+    if (!selectedPost) return
     try {
       const response = await fetch(`/api/posts/${selectedPost.id}`, {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(selectedPost),
       })
-      const data = await response.json()
+      const data: Post = await response.json()
       setPosts(posts.map((post) => (post.id === data.id ? data : post)))
       setShowEditDialog(false)
     } catch (error) {
@@ -188,7 +223,7 @@ const PostsManager = () => {
   }
 
   // 게시물 삭제
-  const deletePost = async (id) => {
+  const deletePost = async (id: number) => {
     try {
       await fetch(`/api/posts/${id}`, {
         method: "DELETE",
@@ -200,11 +235,11 @@ const PostsManager = () => {
   }
 
   // 댓글 가져오기
-  const fetchComments = async (postId) => {
+  const fetchComments = async (postId: number) => {
     if (comments[postId]) return // 이미 불러온 댓글이 있으면 다시 불러오지 않음
     try {
       const response = await fetch(`/api/comments/post/${postId}`)
-      const data = await response.json()
+      const data: { comments: Comment[] } = await response.json()
       setComments((prev) => ({ ...prev, [postId]: data.comments }))
     } catch (error) {
       console.error("댓글 가져오기 오류:", error)
@@ -219,7 +254,7 @@ const PostsManager = () => {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(newComment),
       })
-      const data = await response.json()
+      const data: Comment = await response.json()
       setComments((prev) => ({
         ...prev,
         [data.postId]: [...(prev[data.postId] || []), data],
@@ -233,13 +268,14 @@ const PostsManager = () => {
 
   // 댓글 업데이트
   const updateComment = async () => {
+    if (!selectedComment) return
     try {
       const response = await fetch(`/api/comments/${selectedComment.id}`, {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ body: selectedComment.body }),
       })
-      const data = await response.json()
+      const data: Comment = await response.json()
       setComments((prev) => ({
         ...prev,
         [data.postId]: prev[data.postId].map((comment) => (comment.id === data.id ? data : comment)),
@@ -251,14 +287,14 @@ const PostsManager = () => {
   }
 
   // 댓글 삭제
-  const deleteComment = async (id, postId) => {
+  const deleteComment = async (id: number, postId: number) => {
     try {
       await fetch(`/api/comments/${id}`, {
         method: "DELETE",
       })
       setComments((prev) => ({
         ...prev,
-        [postId]: prev[postId].filter((comment) => comment.id !== id),
+        [postId]: (prev[postId] || []).filter((comment) => comment.id !== id),
       }))
     } catch (error) {
       console.error("댓글 삭제 오류:", error)
@@ -266,18 +302,20 @@ const PostsManager = () => {
   }
 
   // 댓글 좋아요
-  const likeComment = async (id, postId) => {
+  const likeComment = async (id: number, postId: number) => {
     try {
-
+      const currentLikes = comments[postId]?.find((c) => c.id === id)?.likes ?? 0
       const response = await fetch(`/api/comments/${id}`, {
         method: "PATCH",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ likes: comments[postId].find((c) => c.id === id).likes + 1 }),
+        body: JSON.stringify({ likes: currentLikes + 1 }),
       })
-      const data = await response.json()
+      const data: Comment = await response.json()
       setComments((prev) => ({
         ...prev,
-        [postId]: prev[postId].map((comment) => (comment.id === data.id ? {...data, likes: comment.likes + 1} : comment)),
+        [postId]: (prev[postId] || []).map((comment) =>
+          comment.id === data.id ? { ...data, likes: comment.likes + 1 } : comment,
+        ),
       }))
     } catch (error) {
       console.error("댓글 좋아요 오류:", error)
@@ -285,17 +323,17 @@ const PostsManager = () => {
   }
 
   // 게시물 상세 보기
-  const openPostDetail = (post) => {
+  const openPostDetail = (post: Post) => {
     setSelectedPost(post)
     fetchComments(post.id)
     setShowPostDetailDialog(true)
   }
 
   // 사용자 모달 열기
-  const openUserModal = async (user) => {
+  const openUserModal = async (user: UserSummary) => {
     try {
       const response = await fetch(`/api/users/${user.id}`)
-      const userData = await response.json()
+      const userData: User = await response.json()
       setSelectedUser(userData)
       setShowUserModal(true)
     } catch (error) {
@@ -327,7 +365,7 @@ const PostsManager = () => {
   }, [location.search])
 
   // 하이라이트 함수 추가
-  const highlightText = (text: string, highlight: string) => {
+  const highlightText = (text: string | undefined, highlight: string) => {
     if (!text) return null
     if (!highlight.trim()) {
       return <span>{text}</span>
@@ -354,7 +392,7 @@ const PostsManager = () => {
         </TableRow>
       </TableHeader>
       <TableBody>
-        {posts.map((post) => (
+        {posts.map((post: Post) => (
           <TableRow key={post.id}>
             <TableCell>{post.id}</TableCell>
             <TableCell>
@@ -362,7 +400,7 @@ const PostsManager = () => {
                 <div>{highlightText(post.title, searchQuery)}</div>
 
                 <div className="flex flex-wrap gap-1">
-                  {post.tags?.map((tag) => (
+                  {post.tags?.map((tag: string) => (
                     <span
                       key={tag}
                       className={`px-1 text-[9px] font-semibold rounded-[4px] cursor-pointer ${
@@ -382,7 +420,10 @@ const PostsManager = () => {
               </div>
             </TableCell>
             <TableCell>
-              <div className="flex items-center space-x-2 cursor-pointer" onClick={() => openUserModal(post.author)}>
+              <div
+                className="flex items-center space-x-2 cursor-pointer"
+                onClick={() => post.author && openUserModal(post.author)}
+              >
                 <img src={post.author?.image} alt={post.author?.username} className="w-8 h-8 rounded-full" />
                 <span>{post.author?.username}</span>
               </div>
@@ -397,10 +438,11 @@ const PostsManager = () => {
             </TableCell>
             <TableCell>
               <div className="flex items-center gap-2">
-                <Button variant="ghost" size="sm" onClick={() => openPostDetail(post)}>
+                <Button aria-label="댓글 보기" variant="ghost" size="sm" onClick={() => openPostDetail(post)}>
                   <MessageSquare className="w-4 h-4" />
                 </Button>
                 <Button
+                  aria-label="게시물 수정"
                   variant="ghost"
                   size="sm"
                   onClick={() => {
@@ -410,7 +452,7 @@ const PostsManager = () => {
                 >
                   <Edit2 className="w-4 h-4" />
                 </Button>
-                <Button variant="ghost" size="sm" onClick={() => deletePost(post.id)}>
+                <Button aria-label="게시물 삭제" variant="ghost" size="sm" onClick={() => deletePost(post.id)}>
                   <Trash2 className="w-4 h-4" />
                 </Button>
               </div>
@@ -422,7 +464,7 @@ const PostsManager = () => {
   )
 
   // 댓글 렌더링
-  const renderComments = (postId) => (
+  const renderComments = (postId: number) => (
     <div className="mt-2">
       <div className="flex items-center justify-between mb-2">
         <h3 className="text-sm font-semibold">댓글</h3>
@@ -445,11 +487,17 @@ const PostsManager = () => {
               <span className="truncate">{highlightText(comment.body, searchQuery)}</span>
             </div>
             <div className="flex items-center space-x-1">
-              <Button variant="ghost" size="sm" onClick={() => likeComment(comment.id, postId)}>
+              <Button
+                aria-label="댓글 좋아요"
+                variant="ghost"
+                size="sm"
+                onClick={() => likeComment(comment.id, postId)}
+              >
                 <ThumbsUp className="w-3 h-3" />
                 <span className="ml-1 text-xs">{comment.likes}</span>
               </Button>
               <Button
+                aria-label="댓글 수정"
                 variant="ghost"
                 size="sm"
                 onClick={() => {
@@ -459,7 +507,12 @@ const PostsManager = () => {
               >
                 <Edit2 className="w-3 h-3" />
               </Button>
-              <Button variant="ghost" size="sm" onClick={() => deleteComment(comment.id, postId)}>
+              <Button
+                aria-label="댓글 삭제"
+                variant="ghost"
+                size="sm"
+                onClick={() => deleteComment(comment.id, postId)}
+              >
                 <Trash2 className="w-3 h-3" />
               </Button>
             </div>
@@ -489,10 +542,11 @@ const PostsManager = () => {
                 <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                 <Input
                   placeholder="게시물 검색..."
+                  aria-label="게시물 검색"
                   className="pl-8"
                   value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  onKeyPress={(e) => e.key === "Enter" && searchPosts()}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
+                  onKeyPress={(e: React.KeyboardEvent<HTMLInputElement>) => e.key === "Enter" && searchPosts()}
                 />
               </div>
             </div>
@@ -509,7 +563,7 @@ const PostsManager = () => {
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="all">모든 태그</SelectItem>
-                {tags.map((tag) => (
+                {tags.map((tag: Tag) => (
                   <SelectItem key={tag.url} value={tag.slug}>
                     {tag.slug}
                   </SelectItem>
@@ -579,19 +633,21 @@ const PostsManager = () => {
             <Input
               placeholder="제목"
               value={newPost.title}
-              onChange={(e) => setNewPost({ ...newPost, title: e.target.value })}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNewPost({ ...newPost, title: e.target.value })}
             />
             <Textarea
               rows={30}
               placeholder="내용"
               value={newPost.body}
-              onChange={(e) => setNewPost({ ...newPost, body: e.target.value })}
+              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setNewPost({ ...newPost, body: e.target.value })}
             />
             <Input
               type="number"
               placeholder="사용자 ID"
               value={newPost.userId}
-              onChange={(e) => setNewPost({ ...newPost, userId: Number(e.target.value) })}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setNewPost({ ...newPost, userId: Number(e.target.value) })
+              }
             />
             <Button onClick={addPost}>게시물 추가</Button>
           </div>
@@ -608,13 +664,17 @@ const PostsManager = () => {
             <Input
               placeholder="제목"
               value={selectedPost?.title || ""}
-              onChange={(e) => setSelectedPost({ ...selectedPost, title: e.target.value })}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setSelectedPost((prev) => (prev ? { ...prev, title: e.target.value } : prev))
+              }
             />
             <Textarea
               rows={15}
               placeholder="내용"
               value={selectedPost?.body || ""}
-              onChange={(e) => setSelectedPost({ ...selectedPost, body: e.target.value })}
+              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                setSelectedPost((prev) => (prev ? { ...prev, body: e.target.value } : prev))
+              }
             />
             <Button onClick={updatePost}>게시물 업데이트</Button>
           </div>
@@ -631,7 +691,9 @@ const PostsManager = () => {
             <Textarea
               placeholder="댓글 내용"
               value={newComment.body}
-              onChange={(e) => setNewComment({ ...newComment, body: e.target.value })}
+              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                setNewComment({ ...newComment, body: e.target.value })
+              }
             />
             <Button onClick={addComment}>댓글 추가</Button>
           </div>
@@ -648,7 +710,9 @@ const PostsManager = () => {
             <Textarea
               placeholder="댓글 내용"
               value={selectedComment?.body || ""}
-              onChange={(e) => setSelectedComment({ ...selectedComment, body: e.target.value })}
+              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                setSelectedComment((prev) => (prev ? { ...prev, body: e.target.value } : prev))
+              }
             />
             <Button onClick={updateComment}>댓글 업데이트</Button>
           </div>
@@ -663,7 +727,7 @@ const PostsManager = () => {
           </DialogHeader>
           <div className="space-y-4">
             <p>{highlightText(selectedPost?.body, searchQuery)}</p>
-            {renderComments(selectedPost?.id)}
+            {selectedPost && renderComments(selectedPost.id)}
           </div>
         </DialogContent>
       </Dialog>
diff --git a/src/test/handlers.ts b/src/test/handlers.ts
new file mode 100644
index 000000000..1f90e44d8
--- /dev/null
+++ b/src/test/handlers.ts
@@ -0,0 +1,181 @@
+import { http, HttpResponse } from "msw"
+
+// 간단한 메모리 상태 - 각 테스트에서 setup에서 재설정 가능
+export const createDb = () => {
+  const users = Array.from({ length: 5 }).map((_, i) => ({
+    id: i + 1,
+    username: `user${i + 1}`,
+    image: `https://picsum.photos/seed/u${i + 1}/64/64`,
+    firstName: `First${i + 1}`,
+    lastName: `Last${i + 1}`,
+    age: 20 + i,
+    email: `user${i + 1}@example.com`,
+    phone: `010-0000-00${i + 1}`,
+    address: { address: `Addr ${i + 1}`, city: "Seoul", state: "KR" },
+    company: { name: "ACME", title: "Engineer" },
+  }))
+
+  let posts = Array.from({ length: 25 }).map((_, i) => ({
+    id: i + 1,
+    title: `Post ${i + 1}`,
+    body: `Post body ${i + 1}`,
+    userId: (i % users.length) + 1,
+    tags: ["tag-a", i % 2 === 0 ? "tag-b" : "tag-c"],
+    reactions: { likes: i, dislikes: Math.floor(i / 3) },
+  }))
+
+  const commentsByPost: Record<
+    number,
+    Array<{ id: number; postId: number; body: string; user: { username: string }; likes: number }>
+  > = {}
+  let nextCommentId = 1
+
+  const ensureComments = (postId: number) => {
+    if (!commentsByPost[postId]) {
+      commentsByPost[postId] = Array.from({ length: 2 }).map((_, i) => ({
+        id: nextCommentId++,
+        postId,
+        body: `Comment ${i + 1} for post ${postId}`,
+        user: { username: users[(postId + i) % users.length].username },
+        likes: 0,
+      }))
+    }
+    return commentsByPost[postId]
+  }
+
+  return { users, posts, commentsByPost, ensureComments }
+}
+
+export const buildHandlers = (db = createDb()) => [
+  // posts
+  http.get("/api/posts", ({ request }) => {
+    const url = new URL(request.url)
+    const limit = Number(url.searchParams.get("limit") ?? 10)
+    const skip = Number(url.searchParams.get("skip") ?? 0)
+    const slice = db.posts.slice(skip, skip + limit)
+    return HttpResponse.json({ posts: slice, total: db.posts.length, skip, limit })
+  }),
+
+  http.get("/api/posts/tags", () => {
+    const uniq = Array.from(new Set(db.posts.flatMap((p) => p.tags)))
+    return HttpResponse.json(uniq.map((t) => ({ slug: t, url: `/tags/${t}` })))
+  }),
+
+  http.get("/api/posts/tag/:tag", ({ params }) => {
+    const tag = String(params.tag)
+    const filtered = db.posts.filter((p) => p.tags.includes(tag))
+    return HttpResponse.json({ posts: filtered, total: filtered.length })
+  }),
+
+  http.get("/api/posts/search", ({ request }) => {
+    const url = new URL(request.url)
+    const q = (url.searchParams.get("q") ?? "").toLowerCase()
+    const filtered = db.posts.filter((p) => p.title.toLowerCase().includes(q) || p.body.toLowerCase().includes(q))
+    return HttpResponse.json({ posts: filtered, total: filtered.length })
+  }),
+
+  http.post("/api/posts/add", async ({ request }) => {
+    const body = (await request.json()) as any
+    const newPost = { id: db.posts.length + 1, reactions: { likes: 0, dislikes: 0 }, tags: [], ...body }
+    db.posts = [newPost, ...db.posts]
+    return HttpResponse.json(newPost)
+  }),
+
+  http.put("/api/posts/:id", async ({ params, request }) => {
+    const id = Number(params.id)
+    const update = (await request.json()) as any
+    db.posts = db.posts.map((p) => (p.id === id ? { ...p, ...update } : p))
+    const found = db.posts.find((p) => p.id === id)
+    return HttpResponse.json(found)
+  }),
+
+  http.delete("/api/posts/:id", ({ params }) => {
+    const id = Number(params.id)
+    db.posts = db.posts.filter((p) => p.id !== id)
+    return HttpResponse.json({ success: true })
+  }),
+
+  // users
+  http.get("/api/users", ({ request }) => {
+    const url = new URL(request.url)
+    const select = (url.searchParams.get("select") ?? "").split(",")
+    const users = db.users.map((u) => {
+      const base: any = { id: u.id }
+      for (const key of select) {
+        if (!key) continue
+        base[key] = (u as any)[key]
+      }
+      return base
+    })
+    return HttpResponse.json({ users })
+  }),
+
+  http.get("/api/users/:id", ({ params }) => {
+    const id = Number(params.id)
+    const user = db.users.find((u) => u.id === id)
+    if (!user) return new HttpResponse(null, { status: 404 })
+    return HttpResponse.json(user)
+  }),
+
+  // comments
+  http.get("/api/comments/post/:postId", ({ params }) => {
+    const postId = Number(params.postId)
+    const comments = db.ensureComments(postId)
+    return HttpResponse.json({ comments })
+  }),
+
+  http.post("/api/comments/add", async ({ request }) => {
+    const { body, postId } = (await request.json()) as any
+    const comments = db.ensureComments(postId)
+    const newComment = {
+      id: comments.length ? Math.max(...comments.map((c) => c.id)) + 1 : 1,
+      postId,
+      body,
+      user: { username: "me" },
+      likes: 0,
+    }
+    comments.push(newComment)
+    return HttpResponse.json(newComment)
+  }),
+
+  http.put("/api/comments/:id", async ({ params, request }) => {
+    const id = Number(params.id)
+    const update = (await request.json()) as any
+    for (const postId of Object.keys(db.commentsByPost)) {
+      const pid = Number(postId)
+      const list = db.commentsByPost[pid]
+      const idx = list?.findIndex((c) => c.id === id) ?? -1
+      if (idx >= 0) {
+        list[idx] = { ...list[idx], ...update }
+        return HttpResponse.json(list[idx])
+      }
+    }
+    return new HttpResponse(null, { status: 404 })
+  }),
+
+  http.delete("/api/comments/:id", ({ params }) => {
+    const id = Number(params.id)
+    for (const postId of Object.keys(db.commentsByPost)) {
+      const pid = Number(postId)
+      const list = db.commentsByPost[pid]
+      const next = list?.filter((c) => c.id !== id) ?? []
+      db.commentsByPost[pid] = next
+    }
+    return HttpResponse.json({ success: true })
+  }),
+
+  http.patch("/api/comments/:id", async ({ params, request }) => {
+    const id = Number(params.id)
+    const update = (await request.json()) as any
+    for (const postId of Object.keys(db.commentsByPost)) {
+      const pid = Number(postId)
+      const list = db.commentsByPost[pid]
+      const idx = list?.findIndex((c) => c.id === id) ?? -1
+      if (idx >= 0) {
+        list[idx] = { ...list[idx], ...update }
+        return HttpResponse.json(list[idx])
+      }
+    }
+    return new HttpResponse(null, { status: 404 })
+  }),
+]
diff --git a/src/test/setup.ts b/src/test/setup.ts
new file mode 100644
index 000000000..1e38cdaea
--- /dev/null
+++ b/src/test/setup.ts
@@ -0,0 +1,20 @@
+import "@testing-library/jest-dom"
+import { setupServer } from "msw/node"
+import { buildHandlers, createDb } from "./handlers"
+import { cleanup } from "@testing-library/react"
+
+// 각 테스트가 독립적으로 동작하도록 핸들러를 매 테스트에 재설정
+export const server = setupServer(...buildHandlers(createDb()))
+
+beforeAll(() => server.listen({ onUnhandledRequest: "error" }))
+
+beforeEach(() => {
+  server.resetHandlers(...buildHandlers(createDb()))
+})
+
+afterEach(() => {
+  cleanup()
+  window.history.replaceState({}, "", "/")
+})
+
+afterAll(() => server.close())
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 5a2def4b7..ad9704274 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -13,6 +13,7 @@
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
+    "types": ["vite/client", "vitest/globals"],
 
     /* Linting */
     "strict": true,
@@ -21,5 +22,5 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["src"]
+  "include": ["src", "vite-env.d.ts"]
 }
diff --git a/tsconfig.app.tsbuildinfo b/tsconfig.app.tsbuildinfo
new file mode 100644
index 000000000..bbf6c661e
--- /dev/null
+++ b/tsconfig.app.tsbuildinfo
@@ -0,0 +1 @@
+{"root":["./src/app.tsx","./src/index.tsx","./src/main.tsx","./src/components/footer.tsx","./src/components/header.tsx","./src/components/index.tsx","./src/pages/postsmanagerpage.test.tsx","./src/pages/postsmanagerpage.tsx","./src/test/handlers.ts","./src/test/setup.ts","./vite-env.d.ts"],"version":"5.9.2"}
\ No newline at end of file
diff --git a/tsconfig.node.tsbuildinfo b/tsconfig.node.tsbuildinfo
new file mode 100644
index 000000000..240b89231
--- /dev/null
+++ b/tsconfig.node.tsbuildinfo
@@ -0,0 +1 @@
+{"root":["./vite.config.ts"],"version":"5.9.2"}
\ No newline at end of file
diff --git a/vitest.config.ts b/vitest.config.ts
index fa9992fb4..b4f9d3b9a 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -7,5 +7,6 @@ export default defineConfig({
   test: {
     globals: true,
     environment: "jsdom",
+    setupFiles: "src/test/setup.ts",
   },
 })

From 544f96270499fb0f7342162a471a81558c4684ab Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Sun, 10 Aug 2025 21:29:08 +0900
Subject: [PATCH 02/71] =?UTF-8?q?build:=20eslint=20=EC=84=A4=EC=A0=95=20?=
 =?UTF-8?q?=EC=84=B8=ED=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 eslint.config.js     |   63 ++-
 package.json         |    7 +
 pnpm-lock.yaml       | 1173 +++++++++++++++++++++++++++++++++++++++++-
 src/test/handlers.ts |    2 +
 vite.config.ts       |   14 +-
 5 files changed, 1226 insertions(+), 33 deletions(-)

diff --git a/eslint.config.js b/eslint.config.js
index 092408a9f..a2db8266f 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,28 +1,63 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+// eslint.config.js
+import js from "@eslint/js"
+import perfectionist from "eslint-plugin-perfectionist"
+import reactHooks from "eslint-plugin-react-hooks"
+import reactRefresh from "eslint-plugin-react-refresh"
+import globals from "globals"
+import tseslint from "typescript-eslint"
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ["dist"] },
   {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
+    extends: [js.configs.recommended, ...tseslint.configs.recommended, perfectionist.configs["recommended-natural"]],
+    files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
     plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+      "perfectionist": perfectionist,
     },
     rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
+      // ... 기존 규칙들
+
+      // Perfectionist 규칙 커스터마이징
+      "perfectionist/sort-imports": [
+        "error",
+        {
+          "type": "natural",
+          "order": "asc",
+          "groups": [
+            "builtin",
+            "external",
+            "internal-type",
+            "internal",
+            ["parent-type", "sibling-type", "index-type"],
+            ["parent", "sibling", "index"],
+            "object",
+            "unknown",
+          ],
+          "custom-groups": {
+            value: {
+              "react": ["react", "react-*"],
+              "@app": "@/app/**",
+              "@pages": "@/pages/**",
+              "@widgets": "@/widgets/**",
+              "@features": "@/features/**",
+              "@entities": "@/entities/**",
+              "@shared": "@/shared/**",
+            },
+          },
+          "newlines-between": "always",
+        },
       ],
+      "perfectionist/sort-named-imports": ["error", { type: "natural" }],
+      "perfectionist/sort-exports": ["error", { type: "natural" }],
+      "perfectionist/sort-object-types": ["error", { type: "natural" }],
+      "perfectionist/sort-interfaces": ["error", { type: "natural" }],
+      "perfectionist/sort-jsx-props": ["error", { type: "natural" }],
     },
   },
 )
diff --git a/package.json b/package.json
index b97f9a0aa..0163a68ea 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
+    "lint:fix": "eslint . --ext ts,tsx --fix",
     "preview": "vite preview",
     "test": "vitest",
     "test:ui": "vitest --ui",
@@ -18,6 +19,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
+    "@feature-sliced/eslint-config": "^0.1.1",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-select": "^2.2.5",
     "@testing-library/jest-dom": "^6.6.4",
@@ -25,11 +27,16 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
+    "@typescript-eslint/eslint-plugin": "^8.39.0",
+    "@typescript-eslint/parser": "^8.39.0",
     "@vitejs/plugin-react": "^5.0.0",
     "@vitest/ui": "3.2.4",
     "axios": "^1.11.0",
     "class-variance-authority": "^0.7.1",
     "eslint": "^9.33.0",
+    "eslint-plugin-boundaries": "^5.0.1",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-perfectionist": "^4.15.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 64c6a4b1c..7b7f8f92b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,6 +18,9 @@ importers:
       '@eslint/js':
         specifier: ^9.33.0
         version: 9.33.0
+      '@feature-sliced/eslint-config':
+        specifier: ^0.1.1
+        version: 0.1.1(eslint-plugin-boundaries@5.0.1(@typescript-eslint/parser@8.39.0(eslint@9.33.0)(typescript@5.9.2))(eslint@9.33.0))(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.39.0(eslint@9.33.0)(typescript@5.9.2))(eslint@9.33.0))
       '@radix-ui/react-dialog':
         specifier: ^1.1.14
         version: 1.1.14(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
@@ -39,6 +42,12 @@ importers:
       '@types/react-dom':
         specifier: ^19.1.7
         version: 19.1.7(@types/react@19.1.9)
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^8.39.0
+        version: 8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.33.0)(typescript@5.9.2))(eslint@9.33.0)(typescript@5.9.2)
+      '@typescript-eslint/parser':
+        specifier: ^8.39.0
+        version: 8.39.0(eslint@9.33.0)(typescript@5.9.2)
       '@vitejs/plugin-react':
         specifier: ^5.0.0
         version: 5.0.0(vite@7.1.1(@types/node@22.8.1))
@@ -54,6 +63,15 @@ importers:
       eslint:
         specifier: ^9.33.0
         version: 9.33.0
+      eslint-plugin-boundaries:
+        specifier: ^5.0.1
+        version: 5.0.1(@typescript-eslint/parser@8.39.0(eslint@9.33.0)(typescript@5.9.2))(eslint@9.33.0)
+      eslint-plugin-import:
+        specifier: ^2.32.0
+        version: 2.32.0(@typescript-eslint/parser@8.39.0(eslint@9.33.0)(typescript@5.9.2))(eslint@9.33.0)
+      eslint-plugin-perfectionist:
+        specifier: ^4.15.0
+        version: 4.15.0(eslint@9.33.0)(typescript@5.9.2)
       eslint-plugin-react-hooks:
         specifier: ^5.2.0
         version: 5.2.0(eslint@9.33.0)
@@ -441,6 +459,12 @@ packages:
     resolution: {integrity: sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@feature-sliced/eslint-config@0.1.1':
+    resolution: {integrity: sha512-6g2xgY3TVv24N1828U5gnfT7/R2aNiRghhCs45j6mbltLQik0CR7puKJhZSmhLqczMDM8TRqLVNhaCdvdgZpWw==}
+    peerDependencies:
+      eslint-plugin-boundaries: '>=2'
+      eslint-plugin-import: '>=2'
+
   '@floating-ui/core@1.6.8':
     resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==}
 
@@ -929,6 +953,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@rtsao/scc@1.1.0':
+    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
+
   '@testing-library/dom@10.4.0':
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
     engines: {node: '>=18'}
@@ -991,6 +1018,9 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/json5@0.0.29':
+    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
+
   '@types/node@22.8.1':
     resolution: {integrity: sha512-k6Gi8Yyo8EtrNtkHXutUu2corfDf9su95VYVP10aGYMMROM6SAItZi0w1XszA6RtWTHSVp5OeFof37w0IEqCQg==}
 
@@ -1183,13 +1213,45 @@ packages:
   aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
 
+  array-buffer-byte-length@1.0.2:
+    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
+    engines: {node: '>= 0.4'}
+
+  array-includes@3.1.9:
+    resolution: {integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.findlastindex@1.2.6:
+    resolution: {integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.flat@1.3.3:
+    resolution: {integrity: sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.flatmap@1.3.3:
+    resolution: {integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==}
+    engines: {node: '>= 0.4'}
+
+  arraybuffer.prototype.slice@1.0.4:
+    resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
+    engines: {node: '>= 0.4'}
+
   assertion-error@2.0.1:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
+  async-function@1.0.0:
+    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
+    engines: {node: '>= 0.4'}
+
   asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
 
+  available-typed-arrays@1.0.7:
+    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
+    engines: {node: '>= 0.4'}
+
   axios@1.11.0:
     resolution: {integrity: sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==}
 
@@ -1219,6 +1281,14 @@ packages:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
     engines: {node: '>= 0.4'}
 
+  call-bind@1.0.8:
+    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
+    engines: {node: '>= 0.4'}
+
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
+
   callsites@3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
@@ -1296,6 +1366,26 @@ packages:
     resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
     engines: {node: '>=18'}
 
+  data-view-buffer@1.0.2:
+    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
+    engines: {node: '>= 0.4'}
+
+  data-view-byte-length@1.0.2:
+    resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
+    engines: {node: '>= 0.4'}
+
+  data-view-byte-offset@1.0.1:
+    resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
+    engines: {node: '>= 0.4'}
+
+  debug@3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
   debug@4.4.0:
     resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
     engines: {node: '>=6.0'}
@@ -1324,6 +1414,14 @@ packages:
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
+  define-data-property@1.1.4:
+    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
+    engines: {node: '>= 0.4'}
+
+  define-properties@1.2.1:
+    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
+    engines: {node: '>= 0.4'}
+
   delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
@@ -1335,6 +1433,10 @@ packages:
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
+  doctrine@2.1.0:
+    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
+    engines: {node: '>=0.10.0'}
+
   dom-accessibility-api@0.5.16:
     resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
 
@@ -1355,6 +1457,10 @@ packages:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
+  es-abstract@1.24.0:
+    resolution: {integrity: sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==}
+    engines: {node: '>= 0.4'}
+
   es-define-property@1.0.1:
     resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
@@ -1374,6 +1480,14 @@ packages:
     resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
     engines: {node: '>= 0.4'}
 
+  es-shim-unscopables@1.1.0:
+    resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
+    engines: {node: '>= 0.4'}
+
+  es-to-primitive@1.3.0:
+    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
+    engines: {node: '>= 0.4'}
+
   esbuild@0.25.3:
     resolution: {integrity: sha512-qKA6Pvai73+M2FtftpNKRxJ78GIjmFXFxd/1DVBqGo/qNhLSfv+G12n9pNoWdytJC8U00TrViOwpjT0zgqQS8Q==}
     engines: {node: '>=18'}
@@ -1387,6 +1501,73 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
+  eslint-import-resolver-node@0.3.9:
+    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
+
+  eslint-module-utils@2.12.0:
+    resolution: {integrity: sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+
+  eslint-module-utils@2.12.1:
+    resolution: {integrity: sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+
+  eslint-plugin-boundaries@5.0.1:
+    resolution: {integrity: sha512-QBw1TgoA3JnD+AQ8EHqZL8LtiFVREnFmD2BnHzVl38UKtRTds8rawIg03ZLwFs/90yKSh+DVVXRpvVK631Z/0w==}
+    engines: {node: '>=18.18'}
+    peerDependencies:
+      eslint: '>=6.0.0'
+
+  eslint-plugin-import@2.32.0:
+    resolution: {integrity: sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+
+  eslint-plugin-perfectionist@4.15.0:
+    resolution: {integrity: sha512-pC7PgoXyDnEXe14xvRUhBII8A3zRgggKqJFx2a82fjrItDs1BSI7zdZnQtM2yQvcyod6/ujmzb7ejKPx8lZTnw==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      eslint: '>=8.45.0'
+
   eslint-plugin-react-hooks@5.2.0:
     resolution: {integrity: sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==}
     engines: {node: '>=10'}
@@ -1505,6 +1686,10 @@ packages:
       debug:
         optional: true
 
+  for-each@0.3.5:
+    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
+    engines: {node: '>= 0.4'}
+
   form-data@4.0.4:
     resolution: {integrity: sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==}
     engines: {node: '>= 6'}
@@ -1517,6 +1702,13 @@ packages:
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
+  function.prototype.name@1.1.8:
+    resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
+    engines: {node: '>= 0.4'}
+
+  functions-have-names@1.2.3:
+    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+
   gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
@@ -1537,6 +1729,10 @@ packages:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
 
+  get-symbol-description@1.1.0:
+    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
+    engines: {node: '>= 0.4'}
+
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -1553,6 +1749,10 @@ packages:
     resolution: {integrity: sha512-bqWEnJ1Nt3neqx2q5SFfGS8r/ahumIakg3HcwtNlrVlwXIeNumWn/c7Pn/wKzGhf6SaW6H6uWXLqC30STCMchQ==}
     engines: {node: '>=18'}
 
+  globalthis@1.0.4:
+    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
+    engines: {node: '>= 0.4'}
+
   gopd@1.2.0:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
@@ -1564,10 +1764,21 @@ packages:
     resolution: {integrity: sha512-GGTKBX4SD7Wdb8mqeDLni2oaRGYQWjWHGKPQ24ZMnUtKfcsVoiv4uX8+LJr1K6U5VW2Lu1BwJnj7uiori0YtRw==}
     engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
 
+  has-bigints@1.1.0:
+    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
+    engines: {node: '>= 0.4'}
+
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
 
+  has-property-descriptors@1.0.2:
+    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+
+  has-proto@1.2.0:
+    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
+    engines: {node: '>= 0.4'}
+
   has-symbols@1.1.0:
     resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
     engines: {node: '>= 0.4'}
@@ -1619,21 +1830,77 @@ packages:
     resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
     engines: {node: '>=8'}
 
+  internal-slot@1.1.0:
+    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
+    engines: {node: '>= 0.4'}
+
+  is-array-buffer@3.0.5:
+    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
+    engines: {node: '>= 0.4'}
+
+  is-async-function@2.1.1:
+    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
+    engines: {node: '>= 0.4'}
+
+  is-bigint@1.1.0:
+    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
+    engines: {node: '>= 0.4'}
+
+  is-boolean-object@1.2.2:
+    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
+    engines: {node: '>= 0.4'}
+
+  is-callable@1.2.7:
+    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
+    engines: {node: '>= 0.4'}
+
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
+
+  is-data-view@1.0.2:
+    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
+    engines: {node: '>= 0.4'}
+
+  is-date-object@1.1.0:
+    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
+    engines: {node: '>= 0.4'}
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
 
+  is-finalizationregistry@1.1.1:
+    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
+    engines: {node: '>= 0.4'}
+
   is-fullwidth-code-point@3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
 
+  is-generator-function@1.1.0:
+    resolution: {integrity: sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==}
+    engines: {node: '>= 0.4'}
+
   is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
+  is-map@2.0.3:
+    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
+    engines: {node: '>= 0.4'}
+
+  is-negative-zero@2.0.3:
+    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
+    engines: {node: '>= 0.4'}
+
   is-node-process@1.2.0:
     resolution: {integrity: sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==}
 
+  is-number-object@1.1.1:
+    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
+    engines: {node: '>= 0.4'}
+
   is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
@@ -1641,6 +1908,45 @@ packages:
   is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
+  is-regex@1.2.1:
+    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
+    engines: {node: '>= 0.4'}
+
+  is-set@2.0.3:
+    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
+    engines: {node: '>= 0.4'}
+
+  is-shared-array-buffer@1.0.4:
+    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
+    engines: {node: '>= 0.4'}
+
+  is-string@1.1.1:
+    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
+    engines: {node: '>= 0.4'}
+
+  is-symbol@1.1.1:
+    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
+    engines: {node: '>= 0.4'}
+
+  is-typed-array@1.1.15:
+    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
+    engines: {node: '>= 0.4'}
+
+  is-weakmap@2.0.2:
+    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
+    engines: {node: '>= 0.4'}
+
+  is-weakref@1.1.1:
+    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
+    engines: {node: '>= 0.4'}
+
+  is-weakset@2.0.4:
+    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
+    engines: {node: '>= 0.4'}
+
+  isarray@2.0.5:
+    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
@@ -1677,6 +1983,10 @@ packages:
   json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
+  json5@1.0.2:
+    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
+    hasBin: true
+
   json5@2.2.3:
     resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
     engines: {node: '>=6'}
@@ -1754,6 +2064,9 @@ packages:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
   mrmime@2.0.0:
     resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
     engines: {node: '>=10'}
@@ -1783,12 +2096,40 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  natural-orderby@5.0.0:
+    resolution: {integrity: sha512-kKHJhxwpR/Okycz4HhQKKlhWe4ASEfPgkSWNmKFHd7+ezuQlxkA5cM3+XkBPvm1gmHen3w53qsYAv+8GwRrBlg==}
+    engines: {node: '>=18'}
+
   node-releases@2.0.18:
     resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==}
 
   nwsapi@2.2.16:
     resolution: {integrity: sha512-F1I/bimDpj3ncaNDhfyMWuFqmQDBwDB0Fogc2qpL3BWvkQteFD/8BzWuIRl83rq0DXfm8SGt/HFhLXZyljTXcQ==}
 
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+    engines: {node: '>= 0.4'}
+
+  object-keys@1.1.1:
+    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
+    engines: {node: '>= 0.4'}
+
+  object.assign@4.1.7:
+    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
+    engines: {node: '>= 0.4'}
+
+  object.fromentries@2.0.8:
+    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
+    engines: {node: '>= 0.4'}
+
+  object.groupby@1.0.3:
+    resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
+    engines: {node: '>= 0.4'}
+
+  object.values@1.2.1:
+    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
+    engines: {node: '>= 0.4'}
+
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
@@ -1796,6 +2137,10 @@ packages:
   outvariant@1.4.3:
     resolution: {integrity: sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==}
 
+  own-keys@1.0.1:
+    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
+    engines: {node: '>= 0.4'}
+
   p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
@@ -1819,6 +2164,9 @@ packages:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
 
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
   path-to-regexp@6.3.0:
     resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==}
 
@@ -1844,6 +2192,10 @@ packages:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
 
+  possible-typed-array-names@1.1.0:
+    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
+    engines: {node: '>= 0.4'}
+
   postcss@8.5.6:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -1944,9 +2296,17 @@ packages:
     resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
     engines: {node: '>=8'}
 
+  reflect.getprototypeof@1.0.10:
+    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
+    engines: {node: '>= 0.4'}
+
   regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
 
+  regexp.prototype.flags@1.5.4:
+    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
+    engines: {node: '>= 0.4'}
+
   require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -1958,6 +2318,11 @@ packages:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
 
+  resolve@1.22.10:
+    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
   reusify@1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -1973,6 +2338,18 @@ packages:
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
+  safe-array-concat@1.1.3:
+    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
+    engines: {node: '>=0.4'}
+
+  safe-push-apply@1.0.0:
+    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
+    engines: {node: '>= 0.4'}
+
+  safe-regex-test@1.1.0:
+    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
+    engines: {node: '>= 0.4'}
+
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
@@ -1995,6 +2372,18 @@ packages:
   set-cookie-parser@2.7.1:
     resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==}
 
+  set-function-length@1.2.2:
+    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
+    engines: {node: '>= 0.4'}
+
+  set-function-name@2.0.2:
+    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
+    engines: {node: '>= 0.4'}
+
+  set-proto@1.0.0:
+    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
+    engines: {node: '>= 0.4'}
+
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -2003,6 +2392,22 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  side-channel-list@1.0.0:
+    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
+  side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+    engines: {node: '>= 0.4'}
+
   siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
 
@@ -2032,6 +2437,10 @@ packages:
   std-env@3.9.0:
     resolution: {integrity: sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==}
 
+  stop-iteration-iterator@1.1.0:
+    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
+    engines: {node: '>= 0.4'}
+
   strict-event-emitter@0.5.1:
     resolution: {integrity: sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==}
 
@@ -2039,10 +2448,26 @@ packages:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
 
+  string.prototype.trim@1.2.10:
+    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimend@1.0.9:
+    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimstart@1.0.8:
+    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
+    engines: {node: '>= 0.4'}
+
   strip-ansi@6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
 
+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+
   strip-indent@3.0.0:
     resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
     engines: {node: '>=8'}
@@ -2058,6 +2483,10 @@ packages:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
 
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
@@ -2120,6 +2549,9 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4'
 
+  tsconfig-paths@3.15.0:
+    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
+
   tslib@2.8.0:
     resolution: {integrity: sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==}
 
@@ -2135,6 +2567,22 @@ packages:
     resolution: {integrity: sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==}
     engines: {node: '>=16'}
 
+  typed-array-buffer@1.0.3:
+    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-length@1.0.3:
+    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-offset@1.0.4:
+    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-length@1.0.7:
+    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
+    engines: {node: '>= 0.4'}
+
   typescript-eslint@8.39.0:
     resolution: {integrity: sha512-lH8FvtdtzcHJCkMOKnN73LIn6SLTpoojgJqDAxPm1jCR14eWSGPX8ul/gggBdPMk/d5+u9V854vTYQ8T5jF/1Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2147,6 +2595,10 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  unbox-primitive@1.1.0:
+    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
+    engines: {node: '>= 0.4'}
+
   undici-types@6.19.8:
     resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
 
@@ -2295,6 +2747,22 @@ packages:
     resolution: {integrity: sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==}
     engines: {node: '>=18'}
 
+  which-boxed-primitive@1.1.1:
+    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
+    engines: {node: '>= 0.4'}
+
+  which-builtin-type@1.2.1:
+    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
+    engines: {node: '>= 0.4'}
+
+  which-collection@1.0.2:
+    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
+    engines: {node: '>= 0.4'}
+
+  which-typed-array@1.1.19:
+    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
+    engines: {node: '>= 0.4'}
+
   which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
@@ -2491,7 +2959,7 @@ snapshots:
       '@babel/parser': 7.28.0
       '@babel/template': 7.27.2
       '@babel/types': 7.28.2
-      debug: 4.4.0
+      debug: 4.4.1
     transitivePeerDependencies:
       - supports-color
 
@@ -2628,7 +3096,7 @@ snapshots:
   '@eslint/config-array@0.21.0':
     dependencies:
       '@eslint/object-schema': 2.1.6
-      debug: 4.4.0
+      debug: 4.4.1
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -2642,7 +3110,7 @@ snapshots:
   '@eslint/eslintrc@3.3.1':
     dependencies:
       ajv: 6.12.6
-      debug: 4.4.0
+      debug: 4.4.1
       espree: 10.4.0
       globals: 14.0.0
       ignore: 5.3.2
@@ -2662,6 +3130,11 @@ snapshots:
       '@eslint/core': 0.15.2
       levn: 0.4.1
 
+  '@feature-sliced/eslint-config@0.1.1(eslint-plugin-boundaries@5.0.1(@typescript-eslint/parser@8.39.0(eslint@9.33.0)(typescript@5.9.2))(eslint@9.33.0))(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.39.0(eslint@9.33.0)(typescript@5.9.2))(eslint@9.33.0))':
+    dependencies:
+      eslint-plugin-boundaries: 5.0.1(@typescript-eslint/parser@8.39.0(eslint@9.33.0)(typescript@5.9.2))(eslint@9.33.0)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.39.0(eslint@9.33.0)(typescript@5.9.2))(eslint@9.33.0)
+
   '@floating-ui/core@1.6.8':
     dependencies:
       '@floating-ui/utils': 0.2.8
@@ -3089,6 +3562,8 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.46.2':
     optional: true
 
+  '@rtsao/scc@1.1.0': {}
+
   '@testing-library/dom@10.4.0':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -3161,6 +3636,8 @@ snapshots:
 
   '@types/json-schema@7.0.15': {}
 
+  '@types/json5@0.0.29': {}
+
   '@types/node@22.8.1':
     dependencies:
       undici-types: 6.19.8
@@ -3200,7 +3677,7 @@ snapshots:
       '@typescript-eslint/types': 8.39.0
       '@typescript-eslint/typescript-estree': 8.39.0(typescript@5.9.2)
       '@typescript-eslint/visitor-keys': 8.39.0
-      debug: 4.4.0
+      debug: 4.4.1
       eslint: 9.33.0
       typescript: 5.9.2
     transitivePeerDependencies:
@@ -3210,7 +3687,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/tsconfig-utils': 8.39.0(typescript@5.9.2)
       '@typescript-eslint/types': 8.39.0
-      debug: 4.4.0
+      debug: 4.4.1
       typescript: 5.9.2
     transitivePeerDependencies:
       - supports-color
@@ -3229,7 +3706,7 @@ snapshots:
       '@typescript-eslint/types': 8.39.0
       '@typescript-eslint/typescript-estree': 8.39.0(typescript@5.9.2)
       '@typescript-eslint/utils': 8.39.0(eslint@9.33.0)(typescript@5.9.2)
-      debug: 4.4.0
+      debug: 4.4.1
       eslint: 9.33.0
       ts-api-utils: 2.1.0(typescript@5.9.2)
       typescript: 5.9.2
@@ -3244,7 +3721,7 @@ snapshots:
       '@typescript-eslint/tsconfig-utils': 8.39.0(typescript@5.9.2)
       '@typescript-eslint/types': 8.39.0
       '@typescript-eslint/visitor-keys': 8.39.0
-      debug: 4.4.0
+      debug: 4.4.1
       fast-glob: 3.3.2
       is-glob: 4.0.3
       minimatch: 9.0.5
@@ -3412,17 +3889,73 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
-  assertion-error@2.0.1: {}
+  array-buffer-byte-length@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      is-array-buffer: 3.0.5
 
-  asynckit@0.4.0: {}
+  array-includes@3.1.9:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      is-string: 1.1.1
+      math-intrinsics: 1.1.0
 
-  axios@1.11.0:
+  array.prototype.findlastindex@1.2.6:
     dependencies:
-      follow-redirects: 1.15.9
-      form-data: 4.0.4
-      proxy-from-env: 1.1.0
-    transitivePeerDependencies:
-      - debug
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.flat@1.3.3:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.flatmap@1.3.3:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-shim-unscopables: 1.1.0
+
+  arraybuffer.prototype.slice@1.0.4:
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      is-array-buffer: 3.0.5
+
+  assertion-error@2.0.1: {}
+
+  async-function@1.0.0: {}
+
+  asynckit@0.4.0: {}
+
+  available-typed-arrays@1.0.7:
+    dependencies:
+      possible-typed-array-names: 1.1.0
+
+  axios@1.11.0:
+    dependencies:
+      follow-redirects: 1.15.9
+      form-data: 4.0.4
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
 
   balanced-match@1.0.2: {}
 
@@ -3453,6 +3986,18 @@ snapshots:
       es-errors: 1.3.0
       function-bind: 1.1.2
 
+  call-bind@1.0.8:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      get-intrinsic: 1.3.0
+      set-function-length: 1.2.2
+
+  call-bound@1.0.4:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+
   callsites@3.1.0: {}
 
   caniuse-lite@1.0.30001669: {}
@@ -3524,6 +4069,28 @@ snapshots:
       whatwg-mimetype: 4.0.0
       whatwg-url: 14.2.0
 
+  data-view-buffer@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-length@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-offset@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  debug@3.2.7:
+    dependencies:
+      ms: 2.1.3
+
   debug@4.4.0:
     dependencies:
       ms: 2.1.3
@@ -3538,12 +4105,28 @@ snapshots:
 
   deep-is@0.1.4: {}
 
+  define-data-property@1.1.4:
+    dependencies:
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  define-properties@1.2.1:
+    dependencies:
+      define-data-property: 1.1.4
+      has-property-descriptors: 1.0.2
+      object-keys: 1.1.1
+
   delayed-stream@1.0.0: {}
 
   dequal@2.0.3: {}
 
   detect-node-es@1.1.0: {}
 
+  doctrine@2.1.0:
+    dependencies:
+      esutils: 2.0.3
+
   dom-accessibility-api@0.5.16: {}
 
   dom-accessibility-api@0.6.3: {}
@@ -3560,6 +4143,63 @@ snapshots:
 
   entities@4.5.0: {}
 
+  es-abstract@1.24.0:
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      arraybuffer.prototype.slice: 1.0.4
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      data-view-buffer: 1.0.2
+      data-view-byte-length: 1.0.2
+      data-view-byte-offset: 1.0.1
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-set-tostringtag: 2.1.0
+      es-to-primitive: 1.3.0
+      function.prototype.name: 1.1.8
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      get-symbol-description: 1.1.0
+      globalthis: 1.0.4
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+      has-proto: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      internal-slot: 1.1.0
+      is-array-buffer: 3.0.5
+      is-callable: 1.2.7
+      is-data-view: 1.0.2
+      is-negative-zero: 2.0.3
+      is-regex: 1.2.1
+      is-set: 2.0.3
+      is-shared-array-buffer: 1.0.4
+      is-string: 1.1.1
+      is-typed-array: 1.1.15
+      is-weakref: 1.1.1
+      math-intrinsics: 1.1.0
+      object-inspect: 1.13.4
+      object-keys: 1.1.1
+      object.assign: 4.1.7
+      own-keys: 1.0.1
+      regexp.prototype.flags: 1.5.4
+      safe-array-concat: 1.1.3
+      safe-push-apply: 1.0.0
+      safe-regex-test: 1.1.0
+      set-proto: 1.0.0
+      stop-iteration-iterator: 1.1.0
+      string.prototype.trim: 1.2.10
+      string.prototype.trimend: 1.0.9
+      string.prototype.trimstart: 1.0.8
+      typed-array-buffer: 1.0.3
+      typed-array-byte-length: 1.0.3
+      typed-array-byte-offset: 1.0.4
+      typed-array-length: 1.0.7
+      unbox-primitive: 1.1.0
+      which-typed-array: 1.1.19
+
   es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}
@@ -3577,6 +4217,16 @@ snapshots:
       has-tostringtag: 1.0.2
       hasown: 2.0.2
 
+  es-shim-unscopables@1.1.0:
+    dependencies:
+      hasown: 2.0.2
+
+  es-to-primitive@1.3.0:
+    dependencies:
+      is-callable: 1.2.7
+      is-date-object: 1.1.0
+      is-symbol: 1.1.1
+
   esbuild@0.25.3:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.25.3
@@ -3609,6 +4259,86 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
+  eslint-import-resolver-node@0.3.9:
+    dependencies:
+      debug: 3.2.7
+      is-core-module: 2.16.1
+      resolve: 1.22.10
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.39.0(eslint@9.33.0)(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint@9.33.0):
+    dependencies:
+      debug: 3.2.7
+    optionalDependencies:
+      '@typescript-eslint/parser': 8.39.0(eslint@9.33.0)(typescript@5.9.2)
+      eslint: 9.33.0
+      eslint-import-resolver-node: 0.3.9
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.39.0(eslint@9.33.0)(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint@9.33.0):
+    dependencies:
+      debug: 3.2.7
+    optionalDependencies:
+      '@typescript-eslint/parser': 8.39.0(eslint@9.33.0)(typescript@5.9.2)
+      eslint: 9.33.0
+      eslint-import-resolver-node: 0.3.9
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-plugin-boundaries@5.0.1(@typescript-eslint/parser@8.39.0(eslint@9.33.0)(typescript@5.9.2))(eslint@9.33.0):
+    dependencies:
+      chalk: 4.1.2
+      eslint: 9.33.0
+      eslint-import-resolver-node: 0.3.9
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.39.0(eslint@9.33.0)(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint@9.33.0)
+      micromatch: 4.0.8
+    transitivePeerDependencies:
+      - '@typescript-eslint/parser'
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.39.0(eslint@9.33.0)(typescript@5.9.2))(eslint@9.33.0):
+    dependencies:
+      '@rtsao/scc': 1.1.0
+      array-includes: 3.1.9
+      array.prototype.findlastindex: 1.2.6
+      array.prototype.flat: 1.3.3
+      array.prototype.flatmap: 1.3.3
+      debug: 3.2.7
+      doctrine: 2.1.0
+      eslint: 9.33.0
+      eslint-import-resolver-node: 0.3.9
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.39.0(eslint@9.33.0)(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint@9.33.0)
+      hasown: 2.0.2
+      is-core-module: 2.16.1
+      is-glob: 4.0.3
+      minimatch: 3.1.2
+      object.fromentries: 2.0.8
+      object.groupby: 1.0.3
+      object.values: 1.2.1
+      semver: 6.3.1
+      string.prototype.trimend: 1.0.9
+      tsconfig-paths: 3.15.0
+    optionalDependencies:
+      '@typescript-eslint/parser': 8.39.0(eslint@9.33.0)(typescript@5.9.2)
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+
+  eslint-plugin-perfectionist@4.15.0(eslint@9.33.0)(typescript@5.9.2):
+    dependencies:
+      '@typescript-eslint/types': 8.39.0
+      '@typescript-eslint/utils': 8.39.0(eslint@9.33.0)(typescript@5.9.2)
+      eslint: 9.33.0
+      natural-orderby: 5.0.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   eslint-plugin-react-hooks@5.2.0(eslint@9.33.0):
     dependencies:
       eslint: 9.33.0
@@ -3738,6 +4468,10 @@ snapshots:
 
   follow-redirects@1.15.9: {}
 
+  for-each@0.3.5:
+    dependencies:
+      is-callable: 1.2.7
+
   form-data@4.0.4:
     dependencies:
       asynckit: 0.4.0
@@ -3751,6 +4485,17 @@ snapshots:
 
   function-bind@1.1.2: {}
 
+  function.prototype.name@1.1.8:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      functions-have-names: 1.2.3
+      hasown: 2.0.2
+      is-callable: 1.2.7
+
+  functions-have-names@1.2.3: {}
+
   gensync@1.0.0-beta.2: {}
 
   get-caller-file@2.0.5: {}
@@ -3775,6 +4520,12 @@ snapshots:
       dunder-proto: 1.0.1
       es-object-atoms: 1.1.1
 
+  get-symbol-description@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
@@ -3787,14 +4538,29 @@ snapshots:
 
   globals@16.3.0: {}
 
+  globalthis@1.0.4:
+    dependencies:
+      define-properties: 1.2.1
+      gopd: 1.2.0
+
   gopd@1.2.0: {}
 
   graphemer@1.4.0: {}
 
   graphql@16.9.0: {}
 
+  has-bigints@1.1.0: {}
+
   has-flag@4.0.0: {}
 
+  has-property-descriptors@1.0.2:
+    dependencies:
+      es-define-property: 1.0.1
+
+  has-proto@1.2.0:
+    dependencies:
+      dunder-proto: 1.0.1
+
   has-symbols@1.1.0: {}
 
   has-tostringtag@1.0.2:
@@ -3814,14 +4580,14 @@ snapshots:
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.3
-      debug: 4.4.0
+      debug: 4.4.1
     transitivePeerDependencies:
       - supports-color
 
   https-proxy-agent@7.0.6:
     dependencies:
       agent-base: 7.1.3
-      debug: 4.4.0
+      debug: 4.4.1
     transitivePeerDependencies:
       - supports-color
 
@@ -3842,20 +4608,127 @@ snapshots:
 
   indent-string@4.0.0: {}
 
+  internal-slot@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      hasown: 2.0.2
+      side-channel: 1.1.0
+
+  is-array-buffer@3.0.5:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+
+  is-async-function@2.1.1:
+    dependencies:
+      async-function: 1.0.0
+      call-bound: 1.0.4
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+
+  is-bigint@1.1.0:
+    dependencies:
+      has-bigints: 1.1.0
+
+  is-boolean-object@1.2.2:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-callable@1.2.7: {}
+
+  is-core-module@2.16.1:
+    dependencies:
+      hasown: 2.0.2
+
+  is-data-view@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      is-typed-array: 1.1.15
+
+  is-date-object@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
   is-extglob@2.1.1: {}
 
+  is-finalizationregistry@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+
   is-fullwidth-code-point@3.0.0: {}
 
+  is-generator-function@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+
   is-glob@4.0.3:
     dependencies:
       is-extglob: 2.1.1
 
+  is-map@2.0.3: {}
+
+  is-negative-zero@2.0.3: {}
+
   is-node-process@1.2.0: {}
 
+  is-number-object@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
   is-number@7.0.0: {}
 
   is-potential-custom-element-name@1.0.1: {}
 
+  is-regex@1.2.1:
+    dependencies:
+      call-bound: 1.0.4
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  is-set@2.0.3: {}
+
+  is-shared-array-buffer@1.0.4:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-string@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-symbol@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-symbols: 1.1.0
+      safe-regex-test: 1.1.0
+
+  is-typed-array@1.1.15:
+    dependencies:
+      which-typed-array: 1.1.19
+
+  is-weakmap@2.0.2: {}
+
+  is-weakref@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-weakset@2.0.4:
+    dependencies:
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+
+  isarray@2.0.5: {}
+
   isexe@2.0.0: {}
 
   js-tokens@4.0.0: {}
@@ -3901,6 +4774,10 @@ snapshots:
 
   json-stable-stringify-without-jsonify@1.0.1: {}
 
+  json5@1.0.2:
+    dependencies:
+      minimist: 1.2.8
+
   json5@2.2.3: {}
 
   keyv@4.5.4:
@@ -3965,6 +4842,8 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.1
 
+  minimist@1.2.8: {}
+
   mrmime@2.0.0: {}
 
   ms@2.1.3: {}
@@ -4000,10 +4879,45 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
+  natural-orderby@5.0.0: {}
+
   node-releases@2.0.18: {}
 
   nwsapi@2.2.16: {}
 
+  object-inspect@1.13.4: {}
+
+  object-keys@1.1.1: {}
+
+  object.assign@4.1.7:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+      has-symbols: 1.1.0
+      object-keys: 1.1.1
+
+  object.fromentries@2.0.8:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-object-atoms: 1.1.1
+
+  object.groupby@1.0.3:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+
+  object.values@1.2.1:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
   optionator@0.9.4:
     dependencies:
       deep-is: 0.1.4
@@ -4015,6 +4929,12 @@ snapshots:
 
   outvariant@1.4.3: {}
 
+  own-keys@1.0.1:
+    dependencies:
+      get-intrinsic: 1.3.0
+      object-keys: 1.1.1
+      safe-push-apply: 1.0.0
+
   p-limit@3.1.0:
     dependencies:
       yocto-queue: 0.1.0
@@ -4035,6 +4955,8 @@ snapshots:
 
   path-key@3.1.1: {}
 
+  path-parse@1.0.7: {}
+
   path-to-regexp@6.3.0: {}
 
   pathe@2.0.3: {}
@@ -4049,6 +4971,8 @@ snapshots:
 
   picomatch@4.0.3: {}
 
+  possible-typed-array-names@1.1.0: {}
+
   postcss@8.5.6:
     dependencies:
       nanoid: 3.3.11
@@ -4132,14 +5056,40 @@ snapshots:
       indent-string: 4.0.0
       strip-indent: 3.0.0
 
+  reflect.getprototypeof@1.0.10:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      which-builtin-type: 1.2.1
+
   regenerator-runtime@0.14.1: {}
 
+  regexp.prototype.flags@1.5.4:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-errors: 1.3.0
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      set-function-name: 2.0.2
+
   require-directory@2.1.1: {}
 
   requires-port@1.0.0: {}
 
   resolve-from@4.0.0: {}
 
+  resolve@1.22.10:
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
   reusify@1.0.4: {}
 
   rollup@4.46.2:
@@ -4174,6 +5124,25 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
+  safe-array-concat@1.1.3:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      has-symbols: 1.1.0
+      isarray: 2.0.5
+
+  safe-push-apply@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      isarray: 2.0.5
+
+  safe-regex-test@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-regex: 1.2.1
+
   safer-buffer@2.1.2: {}
 
   saxes@6.0.0:
@@ -4188,12 +5157,62 @@ snapshots:
 
   set-cookie-parser@2.7.1: {}
 
+  set-function-length@1.2.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.3.0
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+
+  set-function-name@2.0.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      functions-have-names: 1.2.3
+      has-property-descriptors: 1.0.2
+
+  set-proto@1.0.0:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
 
   shebang-regex@3.0.0: {}
 
+  side-channel-list@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-map@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-weakmap@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-map: 1.0.1
+
+  side-channel@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-list: 1.0.0
+      side-channel-map: 1.0.1
+      side-channel-weakmap: 1.0.2
+
   siginfo@2.0.0: {}
 
   signal-exit@4.1.0: {}
@@ -4218,6 +5237,11 @@ snapshots:
 
   std-env@3.9.0: {}
 
+  stop-iteration-iterator@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      internal-slot: 1.1.0
+
   strict-event-emitter@0.5.1: {}
 
   string-width@4.2.3:
@@ -4226,10 +5250,35 @@ snapshots:
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
 
+  string.prototype.trim@1.2.10:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-data-property: 1.1.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-object-atoms: 1.1.1
+      has-property-descriptors: 1.0.2
+
+  string.prototype.trimend@1.0.9:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  string.prototype.trimstart@1.0.8:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
   strip-ansi@6.0.1:
     dependencies:
       ansi-regex: 5.0.1
 
+  strip-bom@3.0.0: {}
+
   strip-indent@3.0.0:
     dependencies:
       min-indent: 1.0.1
@@ -4244,6 +5293,8 @@ snapshots:
     dependencies:
       has-flag: 4.0.0
 
+  supports-preserve-symlinks-flag@1.0.0: {}
+
   symbol-tree@3.2.4: {}
 
   tinybench@2.9.0: {}
@@ -4294,6 +5345,13 @@ snapshots:
     dependencies:
       typescript: 5.9.2
 
+  tsconfig-paths@3.15.0:
+    dependencies:
+      '@types/json5': 0.0.29
+      json5: 1.0.2
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+
   tslib@2.8.0: {}
 
   type-check@0.4.0:
@@ -4304,6 +5362,39 @@ snapshots:
 
   type-fest@4.26.1: {}
 
+  typed-array-buffer@1.0.3:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-typed-array: 1.1.15
+
+  typed-array-byte-length@1.0.3:
+    dependencies:
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+
+  typed-array-byte-offset@1.0.4:
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+      reflect.getprototypeof: 1.0.10
+
+  typed-array-length@1.0.7:
+    dependencies:
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      is-typed-array: 1.1.15
+      possible-typed-array-names: 1.1.0
+      reflect.getprototypeof: 1.0.10
+
   typescript-eslint@8.39.0(eslint@9.33.0)(typescript@5.9.2):
     dependencies:
       '@typescript-eslint/eslint-plugin': 8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.33.0)(typescript@5.9.2))(eslint@9.33.0)(typescript@5.9.2)
@@ -4317,6 +5408,13 @@ snapshots:
 
   typescript@5.9.2: {}
 
+  unbox-primitive@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      has-bigints: 1.1.0
+      has-symbols: 1.1.0
+      which-boxed-primitive: 1.1.1
+
   undici-types@6.19.8: {}
 
   universalify@0.2.0: {}
@@ -4455,6 +5553,47 @@ snapshots:
       tr46: 5.1.1
       webidl-conversions: 7.0.0
 
+  which-boxed-primitive@1.1.1:
+    dependencies:
+      is-bigint: 1.1.0
+      is-boolean-object: 1.2.2
+      is-number-object: 1.1.1
+      is-string: 1.1.1
+      is-symbol: 1.1.1
+
+  which-builtin-type@1.2.1:
+    dependencies:
+      call-bound: 1.0.4
+      function.prototype.name: 1.1.8
+      has-tostringtag: 1.0.2
+      is-async-function: 2.1.1
+      is-date-object: 1.1.0
+      is-finalizationregistry: 1.1.1
+      is-generator-function: 1.1.0
+      is-regex: 1.2.1
+      is-weakref: 1.1.1
+      isarray: 2.0.5
+      which-boxed-primitive: 1.1.1
+      which-collection: 1.0.2
+      which-typed-array: 1.1.19
+
+  which-collection@1.0.2:
+    dependencies:
+      is-map: 2.0.3
+      is-set: 2.0.3
+      is-weakmap: 2.0.2
+      is-weakset: 2.0.4
+
+  which-typed-array@1.1.19:
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      for-each: 0.3.5
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+
   which@2.0.2:
     dependencies:
       isexe: 2.0.0
diff --git a/src/test/handlers.ts b/src/test/handlers.ts
index 1f90e44d8..17e6c2e83 100644
--- a/src/test/handlers.ts
+++ b/src/test/handlers.ts
@@ -1,3 +1,5 @@
+/* eslint-disable prefer-const */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { http, HttpResponse } from "msw"
 
 // 간단한 메모리 상태 - 각 테스트에서 setup에서 재설정 가능
diff --git a/vite.config.ts b/vite.config.ts
index be7b7a3d4..1e47a65f8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,13 +1,23 @@
 import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react"
+import path from "path"
 
-// https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      "~": path.resolve(__dirname, "src"),
+      "@/app": path.resolve(__dirname, "src/app"),
+      "@/pages": path.resolve(__dirname, "src/pages"),
+      "@/widgets": path.resolve(__dirname, "src/widgets"),
+      "@/features": path.resolve(__dirname, "src/features"),
+      "@/entities": path.resolve(__dirname, "src/entities"),
+      "@/shared": path.resolve(__dirname, "src/shared"),
+    },
+  },
   server: {
     proxy: {
       "/api": {
-        // target: 'https://jsonplaceholder.typicode.com',
         target: "https://dummyjson.com",
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, ""),

From 31bacf021d2ddcd929512b01e3f396f1fa4e2f44 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Sun, 10 Aug 2025 22:01:10 +0900
Subject: [PATCH 03/71] =?UTF-8?q?chore:=20=ED=95=B4=EB=8B=B9=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=A3=BC=EC=84=9D=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PostsManagerPage.tsx | 51 +++++++++++++++++++++++++---------
 1 file changed, 38 insertions(+), 13 deletions(-)

diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 0eae7f768..0b9a77b5c 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react"
 import { Edit2, MessageSquare, Plus, Search, ThumbsDown, ThumbsUp, Trash2 } from "lucide-react"
+import { useEffect, useState } from "react"
 import { useLocation, useNavigate } from "react-router-dom"
 import {
   Button,
@@ -60,34 +60,58 @@ const PostsManager = () => {
   // 상태 관리
   const [posts, setPosts] = useState<Post[]>([])
   const [total, setTotal] = useState<number>(0)
-  const [skip, setSkip] = useState(parseInt(queryParams.get("skip") || "0"))
-  const [limit, setLimit] = useState(parseInt(queryParams.get("limit") || "10"))
-  const [searchQuery, setSearchQuery] = useState(queryParams.get("search") || "")
+
+  // 필터 상태
+  const [skip, setSkip] = useState(parseInt(queryParams.get("skip") || "0")) // 건너 뛸 게시물 수
+  const [limit, setLimit] = useState(parseInt(queryParams.get("limit") || "10")) // 페이지당 게시물 수
+  const [searchQuery, setSearchQuery] = useState(queryParams.get("search") || "") // 검색어
+  const [sortBy, setSortBy] = useState(queryParams.get("sortBy") || "") // 정렬 기준
+  const [sortOrder, setSortOrder] = useState(queryParams.get("sortOrder") || "asc") // 오름 차순 또는 내림 차순
+
+  // 선택된 게시물 상태
   const [selectedPost, setSelectedPost] = useState<Post | null>(null)
-  const [sortBy, setSortBy] = useState(queryParams.get("sortBy") || "")
-  const [sortOrder, setSortOrder] = useState(queryParams.get("sortOrder") || "asc")
+
+  // 모달 상태
   const [showAddDialog, setShowAddDialog] = useState(false)
   const [showEditDialog, setShowEditDialog] = useState(false)
+
+  // 새 게시물 상태
   const [newPost, setNewPost] = useState<{ title: string; body: string; userId: number }>({
     title: "",
     body: "",
     userId: 1,
   })
+
+  // 로딩 상태
   const [loading, setLoading] = useState<boolean>(false)
+
+  // 태그 상태
   const [tags, setTags] = useState<Tag[]>([])
+
+  // 선택된 태그 상태
   const [selectedTag, setSelectedTag] = useState(queryParams.get("tag") || "")
+
+  // 댓글 상태
   const [comments, setComments] = useState<Record<number, Comment[]>>({})
+
+  // 선택된 댓글 상태
   const [selectedComment, setSelectedComment] = useState<Comment | null>(null)
+
+  // 코멘트 모달 새 댓글 상태
   const [newComment, setNewComment] = useState<{ body: string; postId: number | null; userId: number }>({
     body: "",
     postId: null,
     userId: 1,
   })
-  const [showAddCommentDialog, setShowAddCommentDialog] = useState(false)
-  const [showEditCommentDialog, setShowEditCommentDialog] = useState(false)
-  const [showPostDetailDialog, setShowPostDetailDialog] = useState(false)
-  const [showUserModal, setShowUserModal] = useState(false)
-  const [selectedUser, setSelectedUser] = useState<User | null>(null)
+
+  // 코멘트 모달 내부 상태
+  const [showAddCommentDialog, setShowAddCommentDialog] = useState(false) // 댓글 추가 모달 상태
+  const [showEditCommentDialog, setShowEditCommentDialog] = useState(false) // 댓글 수정 모달 상태
+
+  // 모달 상태
+  const [showPostDetailDialog, setShowPostDetailDialog] = useState(false) // 게시물 상세 보기 모달 상태
+  const [showUserModal, setShowUserModal] = useState(false) // 사용자 정보 모달 상태
+  const [selectedUser, setSelectedUser] = useState<User | null>(null) // 선택된 사용자 상태 (모달 정보)
 
   // URL 업데이트 함수
   const updateURL = () => {
@@ -107,14 +131,15 @@ const PostsManager = () => {
     let postsData: { posts: Post[]; total: number }
     let usersData: Array<Pick<User, "id" | "username" | "image">>
 
-    fetch(`/api/posts?limit=${limit}&skip=${skip}`)
+    fetch(`/api/posts?limit=${limit}&skip=${skip}`) // 게시물 목록
       .then((response) => response.json())
       .then((data: { posts: Post[]; total: number }) => {
         postsData = data
-        return fetch("/api/users?limit=0&select=username,image")
+        return fetch("/api/users?limit=0&select=username,image") // 사용자 목록
       })
       .then((response) => response.json())
       .then((users: { users: Array<Pick<User, "id" | "username" | "image">> }) => {
+        // 포맷팅
         usersData = users.users
         const postsWithUsers = postsData.posts.map((post: Post) => ({
           ...post,

From 08d5eeba5b8098988257946f605ecf96f1acc3ac Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Sun, 10 Aug 2025 22:59:28 +0900
Subject: [PATCH 04/71] =?UTF-8?q?chore:=20=EB=A6=B0=ED=8A=B8=20=EB=B0=8F?=
 =?UTF-8?q?=20=ED=8F=AC=EB=A7=B7=ED=8C=85=20=EC=9E=AC=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 eslint.config.js               |  25 +++---
 src/App.test.tsx               |   1 +
 src/App.tsx                    |   3 +-
 src/components/Footer.tsx      |  20 ++---
 src/components/Header.tsx      |  55 +++++++-----
 src/components/index.tsx       |  78 ++++++++--------
 src/index.tsx                  |   1 +
 src/main.tsx                   |  11 +--
 src/pages/PostsManagerPage.tsx | 157 +++++++++++++++++----------------
 src/test/handlers.ts           |  34 +++----
 src/test/setup.ts              |   3 +-
 vite.config.ts                 |  15 ++--
 vitest.config.ts               |   4 +-
 13 files changed, 212 insertions(+), 195 deletions(-)

diff --git a/eslint.config.js b/eslint.config.js
index a2db8266f..287ef706e 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -18,7 +18,6 @@ export default tseslint.config(
     plugins: {
       "react-hooks": reactHooks,
       "react-refresh": reactRefresh,
-      "perfectionist": perfectionist,
     },
     rules: {
       // ... 기존 규칙들
@@ -27,9 +26,9 @@ export default tseslint.config(
       "perfectionist/sort-imports": [
         "error",
         {
-          "type": "natural",
-          "order": "asc",
-          "groups": [
+          type: "natural",
+          order: "asc",
+          groups: [
             "builtin",
             "external",
             "internal-type",
@@ -39,18 +38,18 @@ export default tseslint.config(
             "object",
             "unknown",
           ],
-          "custom-groups": {
+          customGroups: {
             value: {
-              "react": ["react", "react-*"],
-              "@app": "@/app/**",
-              "@pages": "@/pages/**",
-              "@widgets": "@/widgets/**",
-              "@features": "@/features/**",
-              "@entities": "@/entities/**",
-              "@shared": "@/shared/**",
+              "react": ["^react$", "^react-.+"],
+              "@app": "^@/app",
+              "@pages": "^@/pages",
+              "@widgets": "^@/widgets",
+              "@features": "^@/features",
+              "@entities": "^@/entities",
+              "@shared": "^@/shared",
             },
           },
-          "newlines-between": "always",
+          newlinesBetween: "always",
         },
       ],
       "perfectionist/sort-named-imports": ["error", { type: "natural" }],
diff --git a/src/App.test.tsx b/src/App.test.tsx
index 813925622..5be711086 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -1,5 +1,6 @@
 import { render, screen, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+
 import App from "./App"
 
 // 통합 시나리오: 목록 로딩 → 태그 필터 → 검색 → 상세 댓글 로드/추가/수정/삭제/좋아요 → 게시물 추가/수정/삭제
diff --git a/src/App.tsx b/src/App.tsx
index 0c0032aab..6d2b25000 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import { BrowserRouter as Router } from "react-router-dom"
-import Header from "./components/Header.tsx"
+
 import Footer from "./components/Footer.tsx"
+import Header from "./components/Header.tsx"
 import PostsManagerPage from "./pages/PostsManagerPage.tsx"
 
 const App = () => {
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 91af02f8c..82af077b9 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
+import React from "react"
 
 const Footer: React.FC = () => {
-    return (
-        <footer className="bg-gray-100 text-gray-600 py-4 mt-8">
-            <div className="container mx-auto text-center">
-                <p>&copy; 2023 Post Management System. All rights reserved.</p>
-            </div>
-        </footer>
-    );
-};
+  return (
+    <footer className="bg-gray-100 text-gray-600 py-4 mt-8">
+      <div className="container mx-auto text-center">
+        <p>&copy; 2023 Post Management System. All rights reserved.</p>
+      </div>
+    </footer>
+  )
+}
 
-export default Footer;
+export default Footer
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 63ecec168..9a323d9cb 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,25 +1,36 @@
-import React from 'react';
-import { MessageSquare } from 'lucide-react';
+import { MessageSquare } from "lucide-react"
+import React from "react"
 
 const Header: React.FC = () => {
-    return (
-        <header className="bg-blue-600 text-white p-4 shadow-md">
-            <div className="container mx-auto flex justify-between items-center">
-                <div className="flex items-center space-x-2">
-                    <MessageSquare className="w-6 h-6" />
-                    <h1 className="text-xl font-bold">게시물 관리 시스템</h1>
-                </div>
-                <nav>
-                    <ul className="flex space-x-4">
-                        <li><a href="#" className="hover:underline">홈</a></li>
-                        <li><a href="#" className="hover:underline">대시보드</a></li>
-                        <li><a href="#" className="hover:underline">설정</a></li>
-                    </ul>
-                </nav>
-            </div>
-        </header>
-    );
-};
-
-export default Header;
+  return (
+    <header className="bg-blue-600 text-white p-4 shadow-md">
+      <div className="container mx-auto flex justify-between items-center">
+        <div className="flex items-center space-x-2">
+          <MessageSquare className="w-6 h-6" />
+          <h1 className="text-xl font-bold">게시물 관리 시스템</h1>
+        </div>
+        <nav>
+          <ul className="flex space-x-4">
+            <li>
+              <a className="hover:underline" href="#">
+                홈
+              </a>
+            </li>
+            <li>
+              <a className="hover:underline" href="#">
+                대시보드
+              </a>
+            </li>
+            <li>
+              <a className="hover:underline" href="#">
+                설정
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+  )
+}
 
+export default Header
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 24f022e77..8be9b40f5 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -1,32 +1,32 @@
-import * as React from "react"
-import { forwardRef } from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { Check, ChevronDown, X } from "lucide-react"
+import * as SelectPrimitive from "@radix-ui/react-select"
 import { cva, VariantProps } from "class-variance-authority"
+import { Check, ChevronDown, X } from "lucide-react"
+import * as React from "react"
+import { forwardRef } from "react"
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
   {
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
     variants: {
+      size: {
+        default: "h-10 py-2 px-4",
+        icon: "h-9 w-9",
+        lg: "h-11 px-8 rounded-md",
+        sm: "h-8 px-3 rounded-md text-xs",
+      },
       variant: {
         default: "bg-blue-500 text-white hover:bg-blue-600",
         destructive: "bg-red-500 text-white hover:bg-red-600",
-        outline: "border border-gray-300 bg-transparent text-gray-700 hover:bg-gray-100",
-        secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
         ghost: "bg-transparent text-gray-700 hover:bg-gray-100",
         link: "underline-offset-4 hover:underline text-blue-500",
+        outline: "border border-gray-300 bg-transparent text-gray-700 hover:bg-gray-100",
+        secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
       },
-      size: {
-        default: "h-10 py-2 px-4",
-        sm: "h-8 px-3 rounded-md text-xs",
-        lg: "h-11 px-8 rounded-md",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
     },
   },
 )
@@ -35,8 +35,8 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Var
   className?: string
 }
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, ...props }, ref) => {
-  return <button className={buttonVariants({ variant, size, className })} ref={ref} {...props} />
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({ className, size, variant, ...props }, ref) => {
+  return <button className={buttonVariants({ className, size, variant })} ref={ref} {...props} />
 })
 
 Button.displayName = "Button"
@@ -46,9 +46,9 @@ type InputProps = React.InputHTMLAttributes<HTMLInputElement> & { className?: st
 export const Input = forwardRef<HTMLInputElement, InputProps>(({ className = "", type, ...props }, ref) => {
   return (
     <input
-      type={type}
       className={`flex h-10 w-full rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
       ref={ref}
+      type={type}
       {...props}
     />
   )
@@ -58,12 +58,12 @@ Input.displayName = "Input"
 // 카드 컴포넌트
 type DivProps = React.HTMLAttributes<HTMLDivElement> & { className?: string }
 export const Card = forwardRef<HTMLDivElement, DivProps>(({ className = "", ...props }, ref) => (
-  <div ref={ref} className={`rounded-lg border bg-card text-card-foreground shadow-sm ${className}`} {...props} />
+  <div className={`rounded-lg border bg-card text-card-foreground shadow-sm ${className}`} ref={ref} {...props} />
 ))
 Card.displayName = "Card"
 
 export const CardHeader = forwardRef<HTMLDivElement, DivProps>(({ className = "", ...props }, ref) => (
-  <div ref={ref} className={`flex flex-col space-y-1.5 p-6 ${className}`} {...props} />
+  <div className={`flex flex-col space-y-1.5 p-6 ${className}`} ref={ref} {...props} />
 ))
 CardHeader.displayName = "CardHeader"
 
@@ -71,12 +71,12 @@ export const CardTitle = forwardRef<
   HTMLHeadingElement,
   React.HTMLAttributes<HTMLHeadingElement> & { className?: string }
 >(({ className = "", ...props }, ref) => (
-  <h3 ref={ref} className={`text-2xl font-semibold leading-none tracking-tight ${className}`} {...props} />
+  <h3 className={`text-2xl font-semibold leading-none tracking-tight ${className}`} ref={ref} {...props} />
 ))
 CardTitle.displayName = "CardTitle"
 
 export const CardContent = forwardRef<HTMLDivElement, DivProps>(({ className = "", ...props }, ref) => (
-  <div ref={ref} className={`p-6 pt-0 ${className}`} {...props} />
+  <div className={`p-6 pt-0 ${className}`} ref={ref} {...props} />
 ))
 CardContent.displayName = "CardContent"
 
@@ -101,10 +101,10 @@ export const SelectValue = SelectPrimitive.Value
 export const SelectTrigger = forwardRef<
   HTMLButtonElement,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & { className?: string }
->(({ className = "", children, ...props }, ref) => (
+>(({ children, className = "", ...props }, ref) => (
   <SelectPrimitive.Trigger
-    ref={ref}
     className={`flex h-10 items-center justify-between rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+    ref={ref}
     {...props}
   >
     {children}
@@ -116,12 +116,12 @@ SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 export const SelectContent = forwardRef<
   HTMLDivElement,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & { className?: string }
->(({ className = "", children, position = "popper", ...props }, ref) => (
+>(({ children, className = "", position = "popper", ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
-      ref={ref}
       className={`relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ${className}`}
       position={position}
+      ref={ref}
       {...props}
     >
       <SelectPrimitive.Viewport className="p-1">{children}</SelectPrimitive.Viewport>
@@ -133,10 +133,10 @@ SelectContent.displayName = SelectPrimitive.Content.displayName
 export const SelectItem = forwardRef<
   HTMLDivElement,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & { className?: string }
->(({ className = "", children, ...props }, ref) => (
+>(({ children, className = "", ...props }, ref) => (
   <SelectPrimitive.Item
-    ref={ref}
     className={`relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ${className}`}
+    ref={ref}
     {...props}
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
@@ -158,12 +158,12 @@ export const DialogOverlay = DialogPrimitive.Overlay
 export const DialogContent = forwardRef<
   HTMLDivElement,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { className?: string }
->(({ className = "", children, ...props }, ref) => (
+>(({ children, className = "", ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay className="fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
     <DialogPrimitive.Content
-      ref={ref}
       className={`fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full ${className}`}
+      ref={ref}
       {...props}
     >
       {children}
@@ -179,7 +179,7 @@ DialogContent.displayName = DialogPrimitive.Content.displayName
 export const DialogHeader = ({
   className = "",
   ...props
-}: { className?: string } & React.HTMLAttributes<HTMLDivElement>) => (
+}: React.HTMLAttributes<HTMLDivElement> & { className?: string }) => (
   <div className={`flex flex-col space-y-1.5 text-center sm:text-left ${className}`} {...props} />
 )
 DialogHeader.displayName = "DialogHeader"
@@ -189,8 +189,8 @@ export const DialogTitle = forwardRef<
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & { className?: string }
 >(({ className = "", ...props }, ref) => (
   <DialogPrimitive.Title
-    ref={ref}
     className={`text-lg font-semibold leading-none tracking-tight ${className}`}
+    ref={ref}
     {...props}
   />
 ))
@@ -200,7 +200,7 @@ DialogTitle.displayName = DialogPrimitive.Title.displayName
 export const Table = forwardRef<HTMLTableElement, React.TableHTMLAttributes<HTMLTableElement> & { className?: string }>(
   ({ className = "", ...props }, ref) => (
     <div className="w-full overflow-auto">
-      <table ref={ref} className={`table-fixed w-full caption-bottom text-sm ${className}`} {...props} />
+      <table className={`table-fixed w-full caption-bottom text-sm ${className}`} ref={ref} {...props} />
     </div>
   ),
 )
@@ -209,14 +209,14 @@ Table.displayName = "Table"
 export const TableHeader = forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement> & { className?: string }
->(({ className = "", ...props }, ref) => <thead ref={ref} className={`[&_tr]:border-b ${className}`} {...props} />)
+>(({ className = "", ...props }, ref) => <thead className={`[&_tr]:border-b ${className}`} ref={ref} {...props} />)
 TableHeader.displayName = "TableHeader"
 
 export const TableBody = forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement> & { className?: string }
 >(({ className = "", ...props }, ref) => (
-  <tbody ref={ref} className={`[&_tr:last-child]:border-0 ${className}`} {...props} />
+  <tbody className={`[&_tr:last-child]:border-0 ${className}`} ref={ref} {...props} />
 ))
 TableBody.displayName = "TableBody"
 
@@ -225,8 +225,8 @@ export const TableRow = forwardRef<
   React.HTMLAttributes<HTMLTableRowElement> & { className?: string }
 >(({ className = "", ...props }, ref) => (
   <tr
-    ref={ref}
     className={`border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted h-14 ${className}`}
+    ref={ref}
     {...props}
   />
 ))
@@ -237,8 +237,8 @@ export const TableHead = forwardRef<
   React.ThHTMLAttributes<HTMLTableHeaderCellElement> & { className?: string }
 >(({ className = "", ...props }, ref) => (
   <th
-    ref={ref}
     className={`h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 ${className}`}
+    ref={ref}
     {...props}
   />
 ))
@@ -248,6 +248,6 @@ export const TableCell = forwardRef<
   HTMLTableDataCellElement,
   React.TdHTMLAttributes<HTMLTableDataCellElement> & { className?: string }
 >(({ className = "", ...props }, ref) => (
-  <td ref={ref} className={`p-2 align-middle [&:has([role=checkbox])]:pr-0 ${className}`} {...props} />
+  <td className={`p-2 align-middle [&:has([role=checkbox])]:pr-0 ${className}`} ref={ref} {...props} />
 ))
 TableCell.displayName = "TableCell"
diff --git a/src/index.tsx b/src/index.tsx
index 369e197bb..fb160fc1a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,6 +1,7 @@
 import React from "react"
 import ReactDOM from "react-dom/client"
 import { BrowserRouter as Router } from "react-router-dom"
+
 import App from "./App"
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
diff --git a/src/main.tsx b/src/main.tsx
index bef5202a3..adf30fea6 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,9 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
 
-createRoot(document.getElementById('root')!).render(
+import App from "./App.tsx"
+import "./index.css"
+
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
   </StrictMode>,
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 0b9a77b5c..70a8d9666 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -1,6 +1,7 @@
 import { Edit2, MessageSquare, Plus, Search, ThumbsDown, ThumbsUp, Trash2 } from "lucide-react"
 import { useEffect, useState } from "react"
 import { useLocation, useNavigate } from "react-router-dom"
+
 import {
   Button,
   Card,
@@ -26,31 +27,31 @@ import {
   Textarea,
 } from "../components"
 
-// Types
-type Reaction = { likes: number; dislikes: number }
-type UserSummary = { id: number; username?: string; image?: string }
 type Address = { address?: string; city?: string; state?: string }
+type Comment = { body: string; id: number; likes: number; postId: number; user: { username: string } }
 type Company = { name?: string; title?: string }
-type User = UserSummary & {
-  firstName?: string
-  lastName?: string
-  age?: number
-  email?: string
-  phone?: string
-  address?: Address
-  company?: Company
-}
 type Post = {
+  author?: UserSummary
+  body: string
   id: number
+  reactions?: Reaction
+  tags?: string[]
   title: string
-  body: string
   userId: number
-  tags?: string[]
-  reactions?: Reaction
-  author?: UserSummary
 }
-type Comment = { id: number; postId: number; body: string; user: { username: string }; likes: number }
+// Types
+type Reaction = { dislikes: number; likes: number }
 type Tag = { slug: string; url: string }
+type User = UserSummary & {
+  address?: Address
+  age?: number
+  company?: Company
+  email?: string
+  firstName?: string
+  lastName?: string
+  phone?: string
+}
+type UserSummary = { id: number; image?: string; username?: string }
 
 const PostsManager = () => {
   const navigate = useNavigate()
@@ -69,16 +70,16 @@ const PostsManager = () => {
   const [sortOrder, setSortOrder] = useState(queryParams.get("sortOrder") || "asc") // 오름 차순 또는 내림 차순
 
   // 선택된 게시물 상태
-  const [selectedPost, setSelectedPost] = useState<Post | null>(null)
+  const [selectedPost, setSelectedPost] = useState<null | Post>(null)
 
   // 모달 상태
   const [showAddDialog, setShowAddDialog] = useState(false)
   const [showEditDialog, setShowEditDialog] = useState(false)
 
   // 새 게시물 상태
-  const [newPost, setNewPost] = useState<{ title: string; body: string; userId: number }>({
-    title: "",
+  const [newPost, setNewPost] = useState<{ body: string; title: string; userId: number }>({
     body: "",
+    title: "",
     userId: 1,
   })
 
@@ -98,7 +99,7 @@ const PostsManager = () => {
   const [selectedComment, setSelectedComment] = useState<Comment | null>(null)
 
   // 코멘트 모달 새 댓글 상태
-  const [newComment, setNewComment] = useState<{ body: string; postId: number | null; userId: number }>({
+  const [newComment, setNewComment] = useState<{ body: string; postId: null | number; userId: number }>({
     body: "",
     postId: null,
     userId: 1,
@@ -111,7 +112,7 @@ const PostsManager = () => {
   // 모달 상태
   const [showPostDetailDialog, setShowPostDetailDialog] = useState(false) // 게시물 상세 보기 모달 상태
   const [showUserModal, setShowUserModal] = useState(false) // 사용자 정보 모달 상태
-  const [selectedUser, setSelectedUser] = useState<User | null>(null) // 선택된 사용자 상태 (모달 정보)
+  const [selectedUser, setSelectedUser] = useState<null | User>(null) // 선택된 사용자 상태 (모달 정보)
 
   // URL 업데이트 함수
   const updateURL = () => {
@@ -129,7 +130,7 @@ const PostsManager = () => {
   const fetchPosts = () => {
     setLoading(true)
     let postsData: { posts: Post[]; total: number }
-    let usersData: Array<Pick<User, "id" | "username" | "image">>
+    let usersData: Array<Pick<User, "id" | "image" | "username">>
 
     fetch(`/api/posts?limit=${limit}&skip=${skip}`) // 게시물 목록
       .then((response) => response.json())
@@ -138,7 +139,7 @@ const PostsManager = () => {
         return fetch("/api/users?limit=0&select=username,image") // 사용자 목록
       })
       .then((response) => response.json())
-      .then((users: { users: Array<Pick<User, "id" | "username" | "image">> }) => {
+      .then((users: { users: Array<Pick<User, "id" | "image" | "username">> }) => {
         // 포맷팅
         usersData = users.users
         const postsWithUsers = postsData.posts.map((post: Post) => ({
@@ -198,7 +199,7 @@ const PostsManager = () => {
         fetch("/api/users?limit=0&select=username,image"),
       ])
       const postsData: { posts: Post[]; total: number } = await postsResponse.json()
-      const usersData: { users: Array<Pick<User, "id" | "username" | "image">> } = await usersResponse.json()
+      const usersData: { users: Array<Pick<User, "id" | "image" | "username">> } = await usersResponse.json()
 
       const postsWithUsers = postsData.posts.map((post: Post) => ({
         ...post,
@@ -217,14 +218,14 @@ const PostsManager = () => {
   const addPost = async () => {
     try {
       const response = await fetch("/api/posts/add", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
         body: JSON.stringify(newPost),
+        headers: { "Content-Type": "application/json" },
+        method: "POST",
       })
       const data: Post = await response.json()
       setPosts([data, ...posts])
       setShowAddDialog(false)
-      setNewPost({ title: "", body: "", userId: 1 })
+      setNewPost({ body: "", title: "", userId: 1 })
     } catch (error) {
       console.error("게시물 추가 오류:", error)
     }
@@ -235,9 +236,9 @@ const PostsManager = () => {
     if (!selectedPost) return
     try {
       const response = await fetch(`/api/posts/${selectedPost.id}`, {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
         body: JSON.stringify(selectedPost),
+        headers: { "Content-Type": "application/json" },
+        method: "PUT",
       })
       const data: Post = await response.json()
       setPosts(posts.map((post) => (post.id === data.id ? data : post)))
@@ -275,9 +276,9 @@ const PostsManager = () => {
   const addComment = async () => {
     try {
       const response = await fetch("/api/comments/add", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
         body: JSON.stringify(newComment),
+        headers: { "Content-Type": "application/json" },
+        method: "POST",
       })
       const data: Comment = await response.json()
       setComments((prev) => ({
@@ -296,9 +297,9 @@ const PostsManager = () => {
     if (!selectedComment) return
     try {
       const response = await fetch(`/api/comments/${selectedComment.id}`, {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ body: selectedComment.body }),
+        headers: { "Content-Type": "application/json" },
+        method: "PUT",
       })
       const data: Comment = await response.json()
       setComments((prev) => ({
@@ -331,9 +332,9 @@ const PostsManager = () => {
     try {
       const currentLikes = comments[postId]?.find((c) => c.id === id)?.likes ?? 0
       const response = await fetch(`/api/comments/${id}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ likes: currentLikes + 1 }),
+        headers: { "Content-Type": "application/json" },
+        method: "PATCH",
       })
       const data: Comment = await response.json()
       setComments((prev) => ({
@@ -427,12 +428,12 @@ const PostsManager = () => {
                 <div className="flex flex-wrap gap-1">
                   {post.tags?.map((tag: string) => (
                     <span
-                      key={tag}
                       className={`px-1 text-[9px] font-semibold rounded-[4px] cursor-pointer ${
                         selectedTag === tag
                           ? "text-white bg-blue-500 hover:bg-blue-600"
                           : "text-blue-800 bg-blue-100 hover:bg-blue-200"
                       }`}
+                      key={tag}
                       onClick={() => {
                         setSelectedTag(tag)
                         updateURL()
@@ -449,7 +450,7 @@ const PostsManager = () => {
                 className="flex items-center space-x-2 cursor-pointer"
                 onClick={() => post.author && openUserModal(post.author)}
               >
-                <img src={post.author?.image} alt={post.author?.username} className="w-8 h-8 rounded-full" />
+                <img alt={post.author?.username} className="w-8 h-8 rounded-full" src={post.author?.image} />
                 <span>{post.author?.username}</span>
               </div>
             </TableCell>
@@ -463,21 +464,21 @@ const PostsManager = () => {
             </TableCell>
             <TableCell>
               <div className="flex items-center gap-2">
-                <Button aria-label="댓글 보기" variant="ghost" size="sm" onClick={() => openPostDetail(post)}>
+                <Button aria-label="댓글 보기" onClick={() => openPostDetail(post)} size="sm" variant="ghost">
                   <MessageSquare className="w-4 h-4" />
                 </Button>
                 <Button
                   aria-label="게시물 수정"
-                  variant="ghost"
-                  size="sm"
                   onClick={() => {
                     setSelectedPost(post)
                     setShowEditDialog(true)
                   }}
+                  size="sm"
+                  variant="ghost"
                 >
                   <Edit2 className="w-4 h-4" />
                 </Button>
-                <Button aria-label="게시물 삭제" variant="ghost" size="sm" onClick={() => deletePost(post.id)}>
+                <Button aria-label="게시물 삭제" onClick={() => deletePost(post.id)} size="sm" variant="ghost">
                   <Trash2 className="w-4 h-4" />
                 </Button>
               </div>
@@ -494,11 +495,11 @@ const PostsManager = () => {
       <div className="flex items-center justify-between mb-2">
         <h3 className="text-sm font-semibold">댓글</h3>
         <Button
-          size="sm"
           onClick={() => {
             setNewComment((prev) => ({ ...prev, postId }))
             setShowAddCommentDialog(true)
           }}
+          size="sm"
         >
           <Plus className="w-3 h-3 mr-1" />
           댓글 추가
@@ -506,7 +507,7 @@ const PostsManager = () => {
       </div>
       <div className="space-y-1">
         {comments[postId]?.map((comment) => (
-          <div key={comment.id} className="flex items-center justify-between text-sm border-b pb-1">
+          <div className="flex items-center justify-between text-sm border-b pb-1" key={comment.id}>
             <div className="flex items-center space-x-2 overflow-hidden">
               <span className="font-medium truncate">{comment.user.username}:</span>
               <span className="truncate">{highlightText(comment.body, searchQuery)}</span>
@@ -514,29 +515,29 @@ const PostsManager = () => {
             <div className="flex items-center space-x-1">
               <Button
                 aria-label="댓글 좋아요"
-                variant="ghost"
-                size="sm"
                 onClick={() => likeComment(comment.id, postId)}
+                size="sm"
+                variant="ghost"
               >
                 <ThumbsUp className="w-3 h-3" />
                 <span className="ml-1 text-xs">{comment.likes}</span>
               </Button>
               <Button
                 aria-label="댓글 수정"
-                variant="ghost"
-                size="sm"
                 onClick={() => {
                   setSelectedComment(comment)
                   setShowEditCommentDialog(true)
                 }}
+                size="sm"
+                variant="ghost"
               >
                 <Edit2 className="w-3 h-3" />
               </Button>
               <Button
                 aria-label="댓글 삭제"
-                variant="ghost"
-                size="sm"
                 onClick={() => deleteComment(comment.id, postId)}
+                size="sm"
+                variant="ghost"
               >
                 <Trash2 className="w-3 h-3" />
               </Button>
@@ -566,22 +567,22 @@ const PostsManager = () => {
               <div className="relative">
                 <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                 <Input
-                  placeholder="게시물 검색..."
                   aria-label="게시물 검색"
                   className="pl-8"
-                  value={searchQuery}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
                   onKeyPress={(e: React.KeyboardEvent<HTMLInputElement>) => e.key === "Enter" && searchPosts()}
+                  placeholder="게시물 검색..."
+                  value={searchQuery}
                 />
               </div>
             </div>
             <Select
-              value={selectedTag}
               onValueChange={(value) => {
                 setSelectedTag(value)
                 fetchPostsByTag(value)
                 updateURL()
               }}
+              value={selectedTag}
             >
               <SelectTrigger className="w-[180px]">
                 <SelectValue placeholder="태그 선택" />
@@ -595,7 +596,7 @@ const PostsManager = () => {
                 ))}
               </SelectContent>
             </Select>
-            <Select value={sortBy} onValueChange={setSortBy}>
+            <Select onValueChange={setSortBy} value={sortBy}>
               <SelectTrigger className="w-[180px]">
                 <SelectValue placeholder="정렬 기준" />
               </SelectTrigger>
@@ -606,7 +607,7 @@ const PostsManager = () => {
                 <SelectItem value="reactions">반응</SelectItem>
               </SelectContent>
             </Select>
-            <Select value={sortOrder} onValueChange={setSortOrder}>
+            <Select onValueChange={setSortOrder} value={sortOrder}>
               <SelectTrigger className="w-[180px]">
                 <SelectValue placeholder="정렬 순서" />
               </SelectTrigger>
@@ -624,7 +625,7 @@ const PostsManager = () => {
           <div className="flex justify-between items-center">
             <div className="flex items-center gap-2">
               <span>표시</span>
-              <Select value={limit.toString()} onValueChange={(value) => setLimit(Number(value))}>
+              <Select onValueChange={(value) => setLimit(Number(value))} value={limit.toString()}>
                 <SelectTrigger className="w-[180px]">
                   <SelectValue placeholder="10" />
                 </SelectTrigger>
@@ -649,30 +650,30 @@ const PostsManager = () => {
       </CardContent>
 
       {/* 게시물 추가 대화상자 */}
-      <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
+      <Dialog onOpenChange={setShowAddDialog} open={showAddDialog}>
         <DialogContent>
           <DialogHeader>
             <DialogTitle>새 게시물 추가</DialogTitle>
           </DialogHeader>
           <div className="space-y-4">
             <Input
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNewPost({ ...newPost, title: e.target.value })}
               placeholder="제목"
               value={newPost.title}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNewPost({ ...newPost, title: e.target.value })}
             />
             <Textarea
-              rows={30}
+              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setNewPost({ ...newPost, body: e.target.value })}
               placeholder="내용"
+              rows={30}
               value={newPost.body}
-              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setNewPost({ ...newPost, body: e.target.value })}
             />
             <Input
-              type="number"
-              placeholder="사용자 ID"
-              value={newPost.userId}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                 setNewPost({ ...newPost, userId: Number(e.target.value) })
               }
+              placeholder="사용자 ID"
+              type="number"
+              value={newPost.userId}
             />
             <Button onClick={addPost}>게시물 추가</Button>
           </div>
@@ -680,26 +681,26 @@ const PostsManager = () => {
       </Dialog>
 
       {/* 게시물 수정 대화상자 */}
-      <Dialog open={showEditDialog} onOpenChange={setShowEditDialog}>
+      <Dialog onOpenChange={setShowEditDialog} open={showEditDialog}>
         <DialogContent>
           <DialogHeader>
             <DialogTitle>게시물 수정</DialogTitle>
           </DialogHeader>
           <div className="space-y-4">
             <Input
-              placeholder="제목"
-              value={selectedPost?.title || ""}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                 setSelectedPost((prev) => (prev ? { ...prev, title: e.target.value } : prev))
               }
+              placeholder="제목"
+              value={selectedPost?.title || ""}
             />
             <Textarea
-              rows={15}
-              placeholder="내용"
-              value={selectedPost?.body || ""}
               onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
                 setSelectedPost((prev) => (prev ? { ...prev, body: e.target.value } : prev))
               }
+              placeholder="내용"
+              rows={15}
+              value={selectedPost?.body || ""}
             />
             <Button onClick={updatePost}>게시물 업데이트</Button>
           </div>
@@ -707,18 +708,18 @@ const PostsManager = () => {
       </Dialog>
 
       {/* 댓글 추가 대화상자 */}
-      <Dialog open={showAddCommentDialog} onOpenChange={setShowAddCommentDialog}>
+      <Dialog onOpenChange={setShowAddCommentDialog} open={showAddCommentDialog}>
         <DialogContent>
           <DialogHeader>
             <DialogTitle>새 댓글 추가</DialogTitle>
           </DialogHeader>
           <div className="space-y-4">
             <Textarea
-              placeholder="댓글 내용"
-              value={newComment.body}
               onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
                 setNewComment({ ...newComment, body: e.target.value })
               }
+              placeholder="댓글 내용"
+              value={newComment.body}
             />
             <Button onClick={addComment}>댓글 추가</Button>
           </div>
@@ -726,18 +727,18 @@ const PostsManager = () => {
       </Dialog>
 
       {/* 댓글 수정 대화상자 */}
-      <Dialog open={showEditCommentDialog} onOpenChange={setShowEditCommentDialog}>
+      <Dialog onOpenChange={setShowEditCommentDialog} open={showEditCommentDialog}>
         <DialogContent>
           <DialogHeader>
             <DialogTitle>댓글 수정</DialogTitle>
           </DialogHeader>
           <div className="space-y-4">
             <Textarea
-              placeholder="댓글 내용"
-              value={selectedComment?.body || ""}
               onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
                 setSelectedComment((prev) => (prev ? { ...prev, body: e.target.value } : prev))
               }
+              placeholder="댓글 내용"
+              value={selectedComment?.body || ""}
             />
             <Button onClick={updateComment}>댓글 업데이트</Button>
           </div>
@@ -745,7 +746,7 @@ const PostsManager = () => {
       </Dialog>
 
       {/* 게시물 상세 보기 대화상자 */}
-      <Dialog open={showPostDetailDialog} onOpenChange={setShowPostDetailDialog}>
+      <Dialog onOpenChange={setShowPostDetailDialog} open={showPostDetailDialog}>
         <DialogContent className="max-w-3xl">
           <DialogHeader>
             <DialogTitle>{highlightText(selectedPost?.title, searchQuery)}</DialogTitle>
@@ -758,13 +759,13 @@ const PostsManager = () => {
       </Dialog>
 
       {/* 사용자 모달 */}
-      <Dialog open={showUserModal} onOpenChange={setShowUserModal}>
+      <Dialog onOpenChange={setShowUserModal} open={showUserModal}>
         <DialogContent>
           <DialogHeader>
             <DialogTitle>사용자 정보</DialogTitle>
           </DialogHeader>
           <div className="space-y-4">
-            <img src={selectedUser?.image} alt={selectedUser?.username} className="w-24 h-24 rounded-full mx-auto" />
+            <img alt={selectedUser?.username} className="w-24 h-24 rounded-full mx-auto" src={selectedUser?.image} />
             <h3 className="text-xl font-semibold text-center">{selectedUser?.username}</h3>
             <div className="space-y-2">
               <p>
diff --git a/src/test/handlers.ts b/src/test/handlers.ts
index 17e6c2e83..04122acbd 100644
--- a/src/test/handlers.ts
+++ b/src/test/handlers.ts
@@ -5,47 +5,47 @@ import { http, HttpResponse } from "msw"
 // 간단한 메모리 상태 - 각 테스트에서 setup에서 재설정 가능
 export const createDb = () => {
   const users = Array.from({ length: 5 }).map((_, i) => ({
+    address: { address: `Addr ${i + 1}`, city: "Seoul", state: "KR" },
+    age: 20 + i,
+    company: { name: "ACME", title: "Engineer" },
+    email: `user${i + 1}@example.com`,
+    firstName: `First${i + 1}`,
     id: i + 1,
-    username: `user${i + 1}`,
     image: `https://picsum.photos/seed/u${i + 1}/64/64`,
-    firstName: `First${i + 1}`,
     lastName: `Last${i + 1}`,
-    age: 20 + i,
-    email: `user${i + 1}@example.com`,
     phone: `010-0000-00${i + 1}`,
-    address: { address: `Addr ${i + 1}`, city: "Seoul", state: "KR" },
-    company: { name: "ACME", title: "Engineer" },
+    username: `user${i + 1}`,
   }))
 
   let posts = Array.from({ length: 25 }).map((_, i) => ({
+    body: `Post body ${i + 1}`,
     id: i + 1,
+    reactions: { dislikes: Math.floor(i / 3), likes: i },
+    tags: ["tag-a", i % 2 === 0 ? "tag-b" : "tag-c"],
     title: `Post ${i + 1}`,
-    body: `Post body ${i + 1}`,
     userId: (i % users.length) + 1,
-    tags: ["tag-a", i % 2 === 0 ? "tag-b" : "tag-c"],
-    reactions: { likes: i, dislikes: Math.floor(i / 3) },
   }))
 
   const commentsByPost: Record<
     number,
-    Array<{ id: number; postId: number; body: string; user: { username: string }; likes: number }>
+    Array<{ body: string; id: number; likes: number; postId: number; user: { username: string } }>
   > = {}
   let nextCommentId = 1
 
   const ensureComments = (postId: number) => {
     if (!commentsByPost[postId]) {
       commentsByPost[postId] = Array.from({ length: 2 }).map((_, i) => ({
+        body: `Comment ${i + 1} for post ${postId}`,
         id: nextCommentId++,
+        likes: 0,
         postId,
-        body: `Comment ${i + 1} for post ${postId}`,
         user: { username: users[(postId + i) % users.length].username },
-        likes: 0,
       }))
     }
     return commentsByPost[postId]
   }
 
-  return { users, posts, commentsByPost, ensureComments }
+  return { commentsByPost, ensureComments, posts, users }
 }
 
 export const buildHandlers = (db = createDb()) => [
@@ -55,7 +55,7 @@ export const buildHandlers = (db = createDb()) => [
     const limit = Number(url.searchParams.get("limit") ?? 10)
     const skip = Number(url.searchParams.get("skip") ?? 0)
     const slice = db.posts.slice(skip, skip + limit)
-    return HttpResponse.json({ posts: slice, total: db.posts.length, skip, limit })
+    return HttpResponse.json({ limit, posts: slice, skip, total: db.posts.length })
   }),
 
   http.get("/api/posts/tags", () => {
@@ -78,7 +78,7 @@ export const buildHandlers = (db = createDb()) => [
 
   http.post("/api/posts/add", async ({ request }) => {
     const body = (await request.json()) as any
-    const newPost = { id: db.posts.length + 1, reactions: { likes: 0, dislikes: 0 }, tags: [], ...body }
+    const newPost = { id: db.posts.length + 1, reactions: { dislikes: 0, likes: 0 }, tags: [], ...body }
     db.posts = [newPost, ...db.posts]
     return HttpResponse.json(newPost)
   }),
@@ -130,11 +130,11 @@ export const buildHandlers = (db = createDb()) => [
     const { body, postId } = (await request.json()) as any
     const comments = db.ensureComments(postId)
     const newComment = {
+      body,
       id: comments.length ? Math.max(...comments.map((c) => c.id)) + 1 : 1,
+      likes: 0,
       postId,
-      body,
       user: { username: "me" },
-      likes: 0,
     }
     comments.push(newComment)
     return HttpResponse.json(newComment)
diff --git a/src/test/setup.ts b/src/test/setup.ts
index 1e38cdaea..b4e5a65e3 100644
--- a/src/test/setup.ts
+++ b/src/test/setup.ts
@@ -1,7 +1,8 @@
 import "@testing-library/jest-dom"
+import { cleanup } from "@testing-library/react"
 import { setupServer } from "msw/node"
+
 import { buildHandlers, createDb } from "./handlers"
-import { cleanup } from "@testing-library/react"
 
 // 각 테스트가 독립적으로 동작하도록 핸들러를 매 테스트에 재설정
 export const server = setupServer(...buildHandlers(createDb()))
diff --git a/vite.config.ts b/vite.config.ts
index 1e47a65f8..b16a5dc19 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,26 +1,27 @@
-import { defineConfig } from "vite"
-import react from "@vitejs/plugin-react"
 import path from "path"
 
+import react from "@vitejs/plugin-react"
+import { defineConfig } from "vite"
+
 export default defineConfig({
   plugins: [react()],
   resolve: {
     alias: {
-      "~": path.resolve(__dirname, "src"),
       "@/app": path.resolve(__dirname, "src/app"),
-      "@/pages": path.resolve(__dirname, "src/pages"),
-      "@/widgets": path.resolve(__dirname, "src/widgets"),
-      "@/features": path.resolve(__dirname, "src/features"),
       "@/entities": path.resolve(__dirname, "src/entities"),
+      "@/features": path.resolve(__dirname, "src/features"),
+      "@/pages": path.resolve(__dirname, "src/pages"),
       "@/shared": path.resolve(__dirname, "src/shared"),
+      "@/widgets": path.resolve(__dirname, "src/widgets"),
+      "~": path.resolve(__dirname, "src"),
     },
   },
   server: {
     proxy: {
       "/api": {
-        target: "https://dummyjson.com",
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, ""),
+        target: "https://dummyjson.com",
       },
     },
   },
diff --git a/vitest.config.ts b/vitest.config.ts
index b4f9d3b9a..be7774df9 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,12 +1,12 @@
+import react from "@vitejs/plugin-react"
 /// <reference types="vitest" />
 import { defineConfig } from "vitest/config"
-import react from "@vitejs/plugin-react"
 
 export default defineConfig({
   plugins: [react()],
   test: {
-    globals: true,
     environment: "jsdom",
+    globals: true,
     setupFiles: "src/test/setup.ts",
   },
 })

From f959f57c641ecc03fae4f83281f0e04c243f49ad Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Sun, 10 Aug 2025 23:23:56 +0900
Subject: [PATCH 05/71] =?UTF-8?q?feat:=20=EA=B8=B0=EB=B3=B8=20api=20client?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/api/apiClient.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 src/shared/api/apiClient.ts

diff --git a/src/shared/api/apiClient.ts b/src/shared/api/apiClient.ts
new file mode 100644
index 000000000..75a1e06de
--- /dev/null
+++ b/src/shared/api/apiClient.ts
@@ -0,0 +1,13 @@
+import axios from "axios"
+
+export const apiClient = axios.create({
+  baseURL: "/api",
+  headers: {
+    "Content-Type": "application/json",
+  },
+})
+
+apiClient.interceptors.response.use((response) => {
+  console.log(response)
+  return response
+})

From 6ef81d6e061d6989599d53f648ef1c90b5e05312 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Mon, 11 Aug 2025 01:45:08 +0900
Subject: [PATCH 06/71] =?UTF-8?q?chore:=20=EC=A0=88=EB=8C=80=EA=B2=BD?=
 =?UTF-8?q?=EB=A1=9C=20=EC=84=B8=ED=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.test.tsx               | 2 +-
 src/App.tsx                    | 6 +++---
 src/index.tsx                  | 2 +-
 src/main.tsx                   | 2 +-
 src/pages/PostsManagerPage.tsx | 2 +-
 src/test/setup.ts              | 2 +-
 tsconfig.app.json              | 4 ++++
 vite.config.ts                 | 1 +
 8 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/App.test.tsx b/src/App.test.tsx
index 5be711086..8e3673b5d 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 
-import App from "./App"
+import App from "@/App"
 
 // 통합 시나리오: 목록 로딩 → 태그 필터 → 검색 → 상세 댓글 로드/추가/수정/삭제/좋아요 → 게시물 추가/수정/삭제
 
diff --git a/src/App.tsx b/src/App.tsx
index 6d2b25000..f83543fe7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,8 @@
 import { BrowserRouter as Router } from "react-router-dom"
 
-import Footer from "./components/Footer.tsx"
-import Header from "./components/Header.tsx"
-import PostsManagerPage from "./pages/PostsManagerPage.tsx"
+import Footer from "@/components/Footer.tsx"
+import Header from "@/components/Header.tsx"
+import PostsManagerPage from "@/pages/PostsManagerPage.tsx"
 
 const App = () => {
   return (
diff --git a/src/index.tsx b/src/index.tsx
index fb160fc1a..0a93cf54d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,7 +2,7 @@ import React from "react"
 import ReactDOM from "react-dom/client"
 import { BrowserRouter as Router } from "react-router-dom"
 
-import App from "./App"
+import App from "@/App"
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
diff --git a/src/main.tsx b/src/main.tsx
index adf30fea6..d8f4fe15d 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,7 +1,7 @@
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
 
-import App from "./App.tsx"
+import App from "@/App.tsx"
 import "./index.css"
 
 createRoot(document.getElementById("root")!).render(
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 70a8d9666..0dee643b1 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -25,7 +25,7 @@ import {
   TableHeader,
   TableRow,
   Textarea,
-} from "../components"
+} from "@/components"
 
 type Address = { address?: string; city?: string; state?: string }
 type Comment = { body: string; id: number; likes: number; postId: number; user: { username: string } }
diff --git a/src/test/setup.ts b/src/test/setup.ts
index b4e5a65e3..49433787d 100644
--- a/src/test/setup.ts
+++ b/src/test/setup.ts
@@ -2,7 +2,7 @@ import "@testing-library/jest-dom"
 import { cleanup } from "@testing-library/react"
 import { setupServer } from "msw/node"
 
-import { buildHandlers, createDb } from "./handlers"
+import { buildHandlers, createDb } from "@/test/handlers"
 
 // 각 테스트가 독립적으로 동작하도록 핸들러를 매 테스트에 재설정
 export const server = setupServer(...buildHandlers(createDb()))
diff --git a/tsconfig.app.json b/tsconfig.app.json
index ad9704274..3794bb759 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -14,6 +14,10 @@
     "noEmit": true,
     "jsx": "react-jsx",
     "types": ["vite/client", "vitest/globals"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
 
     /* Linting */
     "strict": true,
diff --git a/vite.config.ts b/vite.config.ts
index b16a5dc19..1e8449b91 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -7,6 +7,7 @@ export default defineConfig({
   plugins: [react()],
   resolve: {
     alias: {
+      "@": path.resolve(__dirname, "src"),
       "@/app": path.resolve(__dirname, "src/app"),
       "@/entities": path.resolve(__dirname, "src/entities"),
       "@/features": path.resolve(__dirname, "src/features"),

From 3bcf96c22e0e8f80b696274ac159864a70177dec Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Tue, 12 Aug 2025 00:11:37 +0900
Subject: [PATCH 07/71] =?UTF-8?q?feat:=20entities/comment=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/comment/api/index.ts   | 22 ++++++++++++++++++++++
 src/entities/comment/index.ts       |  2 ++
 src/entities/comment/model/types.ts |  1 +
 3 files changed, 25 insertions(+)
 create mode 100644 src/entities/comment/api/index.ts
 create mode 100644 src/entities/comment/index.ts
 create mode 100644 src/entities/comment/model/types.ts

diff --git a/src/entities/comment/api/index.ts b/src/entities/comment/api/index.ts
new file mode 100644
index 000000000..917691d84
--- /dev/null
+++ b/src/entities/comment/api/index.ts
@@ -0,0 +1,22 @@
+import { apiClient } from "@/shared/api/apiClient"
+
+import { Comment } from "../model/types"
+
+export const commentApi = {
+  async create() {
+    const result = await apiClient.post("/comments/add")
+    return result.data
+  },
+  async delete(commentId: number) {
+    const result = await apiClient.delete(`/comments/${commentId}`)
+    return result.data
+  },
+  async fetchById(postId: number) {
+    const result = await apiClient.get<Comment>(`/comments/post/${postId}`)
+    return result.data
+  },
+  async update(comment: Comment) {
+    const result = await apiClient.put(`/comments/${comment.id}`)
+    return result.data
+  },
+}
diff --git a/src/entities/comment/index.ts b/src/entities/comment/index.ts
new file mode 100644
index 000000000..479e13dd7
--- /dev/null
+++ b/src/entities/comment/index.ts
@@ -0,0 +1,2 @@
+export { commentApi } from "./api/index"
+export type { Comment } from "./model/types"
diff --git a/src/entities/comment/model/types.ts b/src/entities/comment/model/types.ts
new file mode 100644
index 000000000..ff10af0c8
--- /dev/null
+++ b/src/entities/comment/model/types.ts
@@ -0,0 +1 @@
+export type Comment = { body: string; id: number; likes: number; postId: number; user: { username: string } }

From 4683758f8779de2fcf18ef9b05488ec3cd059811 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Tue, 12 Aug 2025 00:11:53 +0900
Subject: [PATCH 08/71] =?UTF-8?q?feat:=20entities/post=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/post/api/index.ts   | 30 ++++++++++++++++++++++++++++++
 src/entities/post/index.ts       |  2 ++
 src/entities/post/model/types.ts | 10 ++++++++++
 3 files changed, 42 insertions(+)
 create mode 100644 src/entities/post/api/index.ts
 create mode 100644 src/entities/post/index.ts
 create mode 100644 src/entities/post/model/types.ts

diff --git a/src/entities/post/api/index.ts b/src/entities/post/api/index.ts
new file mode 100644
index 000000000..e0b409b78
--- /dev/null
+++ b/src/entities/post/api/index.ts
@@ -0,0 +1,30 @@
+import type { Post } from "@/entities/post/model/types"
+
+import { apiClient } from "@/shared/api/apiClient"
+
+export interface PostQuery {
+  limit: number
+  search: string
+  skip: number
+  sortBy: "id" | "none" | "reactions" | "title"
+  sortOrder: "asc" | "desc"
+}
+
+export const PostApi = {
+  async create(post: Pick<Post, "body" | "title" | "userId">) {
+    const result = await apiClient.post("/posts/add", post)
+    return result.data
+  },
+  async delete(postId: number) {
+    const result = await apiClient.delete(`/posts/${postId}`)
+    return result.data
+  },
+  async fetchAll(params: PostQuery) {
+    const result = await apiClient.get<Post[]>("/posts", { params })
+    return result.data
+  },
+  async update(post: Post) {
+    const result = await apiClient.put(`/posts/${post.id}`, post)
+    return result.data
+  },
+}
diff --git a/src/entities/post/index.ts b/src/entities/post/index.ts
new file mode 100644
index 000000000..912f63ce9
--- /dev/null
+++ b/src/entities/post/index.ts
@@ -0,0 +1,2 @@
+export { PostApi, type PostQuery } from "./api/index"
+export type { Post } from "./model/types"
diff --git a/src/entities/post/model/types.ts b/src/entities/post/model/types.ts
new file mode 100644
index 000000000..4bedefbf4
--- /dev/null
+++ b/src/entities/post/model/types.ts
@@ -0,0 +1,10 @@
+export interface Post {
+  body: string
+  id: number
+  reactions?: Reaction
+  tags?: string[]
+  title: string
+  userId: number
+}
+
+type Reaction = { dislikes: number; likes: number }

From 400273e135970b8cb84a9017d411865bb1944f04 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Tue, 12 Aug 2025 00:12:20 +0900
Subject: [PATCH 09/71] =?UTF-8?q?feat:=20entities/user=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/user/api/index.ts   | 16 ++++++++++++++++
 src/entities/user/index.ts       |  2 ++
 src/entities/user/model/types.ts | 17 +++++++++++++++++
 3 files changed, 35 insertions(+)
 create mode 100644 src/entities/user/api/index.ts
 create mode 100644 src/entities/user/index.ts
 create mode 100644 src/entities/user/model/types.ts

diff --git a/src/entities/user/api/index.ts b/src/entities/user/api/index.ts
new file mode 100644
index 000000000..f254985c0
--- /dev/null
+++ b/src/entities/user/api/index.ts
@@ -0,0 +1,16 @@
+import { apiClient } from "@/shared/api/apiClient"
+
+import { FetchUserParams, User } from "../model/types"
+
+export const userApi = {
+  async fetchAll(params: FetchUserParams) {
+    const result = await apiClient.get<Array<User>>("/users", {
+      params,
+    })
+    return result.data
+  },
+  async fetchById(userId: number) {
+    const result = await apiClient.get<User>(`/users/${userId}`)
+    return result.data
+  },
+}
diff --git a/src/entities/user/index.ts b/src/entities/user/index.ts
new file mode 100644
index 000000000..027139133
--- /dev/null
+++ b/src/entities/user/index.ts
@@ -0,0 +1,2 @@
+export { userApi } from "./api/index"
+export type { User } from "./model/types"
diff --git a/src/entities/user/model/types.ts b/src/entities/user/model/types.ts
new file mode 100644
index 000000000..2217ced2b
--- /dev/null
+++ b/src/entities/user/model/types.ts
@@ -0,0 +1,17 @@
+export type FetchUserParams = { limit: number; select: string }
+export type User = {
+  address?: Address
+  age?: number
+  company?: Company
+  email?: string
+  firstName?: string
+  id: number
+  image?: string
+  lastName?: string
+  phone?: string
+  username?: string
+}
+
+type Address = { address?: string; city?: string; state?: string }
+
+type Company = { name?: string; title?: string }

From 363f068c278a8a659f2df0eab5e57b9db0c862ec Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Tue, 12 Aug 2025 00:22:45 +0900
Subject: [PATCH 10/71] =?UTF-8?q?feat:=20feature/fetch-user-summary=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/feature/fetch-users-summary/api/index.ts   | 12 ++++++++++++
 src/feature/fetch-users-summary/index.ts       |  2 ++
 src/feature/fetch-users-summary/model/types.ts |  3 +++
 3 files changed, 17 insertions(+)
 create mode 100644 src/feature/fetch-users-summary/api/index.ts
 create mode 100644 src/feature/fetch-users-summary/index.ts
 create mode 100644 src/feature/fetch-users-summary/model/types.ts

diff --git a/src/feature/fetch-users-summary/api/index.ts b/src/feature/fetch-users-summary/api/index.ts
new file mode 100644
index 000000000..b9418eb74
--- /dev/null
+++ b/src/feature/fetch-users-summary/api/index.ts
@@ -0,0 +1,12 @@
+import { userApi } from "@/entities/user"
+
+import { UserSummaryParams } from "../model/types"
+
+export const fetchUsersSummary = async (params?: UserSummaryParams) => {
+  const queryParams = {
+    limit: params?.limit ?? 0,
+    select: params?.select?.join(",") ?? "username,image",
+  }
+
+  return userApi.fetchAll(queryParams)
+}
diff --git a/src/feature/fetch-users-summary/index.ts b/src/feature/fetch-users-summary/index.ts
new file mode 100644
index 000000000..3d536070a
--- /dev/null
+++ b/src/feature/fetch-users-summary/index.ts
@@ -0,0 +1,2 @@
+export { fetchUsersSummary } from "./api"
+export type { UserSummaryParams } from "./model/types"
diff --git a/src/feature/fetch-users-summary/model/types.ts b/src/feature/fetch-users-summary/model/types.ts
new file mode 100644
index 000000000..119208d38
--- /dev/null
+++ b/src/feature/fetch-users-summary/model/types.ts
@@ -0,0 +1,3 @@
+import { User } from "@/entities/user"
+
+export type UserSummaryParams = { limit: number; select: (keyof User)[] }

From bbcecb3068e67042b60725d1c54e572e95b48982 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Tue, 12 Aug 2025 00:28:43 +0900
Subject: [PATCH 11/71] =?UTF-8?q?feat:=20fetchUsersSummary=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PostsManagerPage.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 0dee643b1..9126ed1c4 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -26,6 +26,7 @@ import {
   TableRow,
   Textarea,
 } from "@/components"
+import { fetchUsersSummary } from "@/feature/fetch-users-summary"
 
 type Address = { address?: string; city?: string; state?: string }
 type Comment = { body: string; id: number; likes: number; postId: number; user: { username: string } }
@@ -136,12 +137,12 @@ const PostsManager = () => {
       .then((response) => response.json())
       .then((data: { posts: Post[]; total: number }) => {
         postsData = data
-        return fetch("/api/users?limit=0&select=username,image") // 사용자 목록
+        return fetchUsersSummary() // 사용자 목록
       })
-      .then((response) => response.json())
-      .then((users: { users: Array<Pick<User, "id" | "image" | "username">> }) => {
+      .then((users) => {
         // 포맷팅
-        usersData = users.users
+        console.log(users)
+        usersData = users
         const postsWithUsers = postsData.posts.map((post: Post) => ({
           ...post,
           author: usersData.find((user) => user.id === post.userId),

From 3181ace7b9d134f6966e4a94ce785fcec559adbc Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Tue, 12 Aug 2025 00:54:16 +0900
Subject: [PATCH 12/71] =?UTF-8?q?feat:=20shared/ui=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/index.tsx         | 253 -------------------------------
 src/shared/ui/Button/index.tsx   |  39 +++++
 src/shared/ui/Card/index.tsx     |  27 ++++
 src/shared/ui/Dialog/index.tsx   |  50 ++++++
 src/shared/ui/Input/index.tsx    |  15 ++
 src/shared/ui/Select/index.tsx   |  58 +++++++
 src/shared/ui/Table/index.tsx    |  57 +++++++
 src/shared/ui/TextArea/index.tsx |  14 ++
 src/shared/ui/index.ts           |   7 +
 9 files changed, 267 insertions(+), 253 deletions(-)
 delete mode 100644 src/components/index.tsx
 create mode 100644 src/shared/ui/Button/index.tsx
 create mode 100644 src/shared/ui/Card/index.tsx
 create mode 100644 src/shared/ui/Dialog/index.tsx
 create mode 100644 src/shared/ui/Input/index.tsx
 create mode 100644 src/shared/ui/Select/index.tsx
 create mode 100644 src/shared/ui/Table/index.tsx
 create mode 100644 src/shared/ui/TextArea/index.tsx
 create mode 100644 src/shared/ui/index.ts

diff --git a/src/components/index.tsx b/src/components/index.tsx
deleted file mode 100644
index 8be9b40f5..000000000
--- a/src/components/index.tsx
+++ /dev/null
@@ -1,253 +0,0 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { cva, VariantProps } from "class-variance-authority"
-import { Check, ChevronDown, X } from "lucide-react"
-import * as React from "react"
-import { forwardRef } from "react"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
-  {
-    defaultVariants: {
-      size: "default",
-      variant: "default",
-    },
-    variants: {
-      size: {
-        default: "h-10 py-2 px-4",
-        icon: "h-9 w-9",
-        lg: "h-11 px-8 rounded-md",
-        sm: "h-8 px-3 rounded-md text-xs",
-      },
-      variant: {
-        default: "bg-blue-500 text-white hover:bg-blue-600",
-        destructive: "bg-red-500 text-white hover:bg-red-600",
-        ghost: "bg-transparent text-gray-700 hover:bg-gray-100",
-        link: "underline-offset-4 hover:underline text-blue-500",
-        outline: "border border-gray-300 bg-transparent text-gray-700 hover:bg-gray-100",
-        secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
-      },
-    },
-  },
-)
-
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-  className?: string
-}
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({ className, size, variant, ...props }, ref) => {
-  return <button className={buttonVariants({ className, size, variant })} ref={ref} {...props} />
-})
-
-Button.displayName = "Button"
-
-// 입력 컴포넌트
-type InputProps = React.InputHTMLAttributes<HTMLInputElement> & { className?: string }
-export const Input = forwardRef<HTMLInputElement, InputProps>(({ className = "", type, ...props }, ref) => {
-  return (
-    <input
-      className={`flex h-10 w-full rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
-      ref={ref}
-      type={type}
-      {...props}
-    />
-  )
-})
-Input.displayName = "Input"
-
-// 카드 컴포넌트
-type DivProps = React.HTMLAttributes<HTMLDivElement> & { className?: string }
-export const Card = forwardRef<HTMLDivElement, DivProps>(({ className = "", ...props }, ref) => (
-  <div className={`rounded-lg border bg-card text-card-foreground shadow-sm ${className}`} ref={ref} {...props} />
-))
-Card.displayName = "Card"
-
-export const CardHeader = forwardRef<HTMLDivElement, DivProps>(({ className = "", ...props }, ref) => (
-  <div className={`flex flex-col space-y-1.5 p-6 ${className}`} ref={ref} {...props} />
-))
-CardHeader.displayName = "CardHeader"
-
-export const CardTitle = forwardRef<
-  HTMLHeadingElement,
-  React.HTMLAttributes<HTMLHeadingElement> & { className?: string }
->(({ className = "", ...props }, ref) => (
-  <h3 className={`text-2xl font-semibold leading-none tracking-tight ${className}`} ref={ref} {...props} />
-))
-CardTitle.displayName = "CardTitle"
-
-export const CardContent = forwardRef<HTMLDivElement, DivProps>(({ className = "", ...props }, ref) => (
-  <div className={`p-6 pt-0 ${className}`} ref={ref} {...props} />
-))
-CardContent.displayName = "CardContent"
-
-// 텍스트 영역 컴포넌트
-type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & { className?: string }
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(({ className = "", ...props }, ref) => {
-  return (
-    <textarea
-      className={`flex min-h-[150px] w-full rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
-      ref={ref}
-      {...props}
-    />
-  )
-})
-Textarea.displayName = "Textarea"
-
-// 선택 컴포넌트
-export const Select = SelectPrimitive.Root
-export const SelectGroup = SelectPrimitive.Group
-export const SelectValue = SelectPrimitive.Value
-
-export const SelectTrigger = forwardRef<
-  HTMLButtonElement,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & { className?: string }
->(({ children, className = "", ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    className={`flex h-10 items-center justify-between rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
-    ref={ref}
-    {...props}
-  >
-    {children}
-    <ChevronDown className="h-4 w-4 opacity-50" />
-  </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
-
-export const SelectContent = forwardRef<
-  HTMLDivElement,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & { className?: string }
->(({ children, className = "", position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      className={`relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ${className}`}
-      position={position}
-      ref={ref}
-      {...props}
-    >
-      <SelectPrimitive.Viewport className="p-1">{children}</SelectPrimitive.Viewport>
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
-
-export const SelectItem = forwardRef<
-  HTMLDivElement,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & { className?: string }
->(({ children, className = "", ...props }, ref) => (
-  <SelectPrimitive.Item
-    className={`relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ${className}`}
-    ref={ref}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
-
-// 대화상자 컴포넌트
-export const Dialog = DialogPrimitive.Root
-export const DialogTrigger = DialogPrimitive.Trigger
-export const DialogPortal = DialogPrimitive.Portal
-export const DialogOverlay = DialogPrimitive.Overlay
-
-export const DialogContent = forwardRef<
-  HTMLDivElement,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { className?: string }
->(({ children, className = "", ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay className="fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
-    <DialogPrimitive.Content
-      className={`fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full ${className}`}
-      ref={ref}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">닫기</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
-
-export const DialogHeader = ({
-  className = "",
-  ...props
-}: React.HTMLAttributes<HTMLDivElement> & { className?: string }) => (
-  <div className={`flex flex-col space-y-1.5 text-center sm:text-left ${className}`} {...props} />
-)
-DialogHeader.displayName = "DialogHeader"
-
-export const DialogTitle = forwardRef<
-  HTMLHeadingElement,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & { className?: string }
->(({ className = "", ...props }, ref) => (
-  <DialogPrimitive.Title
-    className={`text-lg font-semibold leading-none tracking-tight ${className}`}
-    ref={ref}
-    {...props}
-  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
-
-// 테이블 컴포넌트
-export const Table = forwardRef<HTMLTableElement, React.TableHTMLAttributes<HTMLTableElement> & { className?: string }>(
-  ({ className = "", ...props }, ref) => (
-    <div className="w-full overflow-auto">
-      <table className={`table-fixed w-full caption-bottom text-sm ${className}`} ref={ref} {...props} />
-    </div>
-  ),
-)
-Table.displayName = "Table"
-
-export const TableHeader = forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement> & { className?: string }
->(({ className = "", ...props }, ref) => <thead className={`[&_tr]:border-b ${className}`} ref={ref} {...props} />)
-TableHeader.displayName = "TableHeader"
-
-export const TableBody = forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement> & { className?: string }
->(({ className = "", ...props }, ref) => (
-  <tbody className={`[&_tr:last-child]:border-0 ${className}`} ref={ref} {...props} />
-))
-TableBody.displayName = "TableBody"
-
-export const TableRow = forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement> & { className?: string }
->(({ className = "", ...props }, ref) => (
-  <tr
-    className={`border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted h-14 ${className}`}
-    ref={ref}
-    {...props}
-  />
-))
-TableRow.displayName = "TableRow"
-
-export const TableHead = forwardRef<
-  HTMLTableHeaderCellElement,
-  React.ThHTMLAttributes<HTMLTableHeaderCellElement> & { className?: string }
->(({ className = "", ...props }, ref) => (
-  <th
-    className={`h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 ${className}`}
-    ref={ref}
-    {...props}
-  />
-))
-TableHead.displayName = "TableHead"
-
-export const TableCell = forwardRef<
-  HTMLTableDataCellElement,
-  React.TdHTMLAttributes<HTMLTableDataCellElement> & { className?: string }
->(({ className = "", ...props }, ref) => (
-  <td className={`p-2 align-middle [&:has([role=checkbox])]:pr-0 ${className}`} ref={ref} {...props} />
-))
-TableCell.displayName = "TableCell"
diff --git a/src/shared/ui/Button/index.tsx b/src/shared/ui/Button/index.tsx
new file mode 100644
index 000000000..c3c11e069
--- /dev/null
+++ b/src/shared/ui/Button/index.tsx
@@ -0,0 +1,39 @@
+import { cva, VariantProps } from "class-variance-authority"
+import * as React from "react"
+import { forwardRef } from "react"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
+  {
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+    variants: {
+      size: {
+        default: "h-10 py-2 px-4",
+        icon: "h-9 w-9",
+        lg: "h-11 px-8 rounded-md",
+        sm: "h-8 px-3 rounded-md text-xs",
+      },
+      variant: {
+        default: "bg-blue-500 text-white hover:bg-blue-600",
+        destructive: "bg-red-500 text-white hover:bg-red-600",
+        ghost: "bg-transparent text-gray-700 hover:bg-gray-100",
+        link: "underline-offset-4 hover:underline text-blue-500",
+        outline: "border border-gray-300 bg-transparent text-gray-700 hover:bg-gray-100",
+        secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
+      },
+    },
+  },
+)
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  className?: string
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({ className, size, variant, ...props }, ref) => {
+  return <button className={buttonVariants({ className, size, variant })} ref={ref} {...props} />
+})
+
+Button.displayName = "Button"
diff --git a/src/shared/ui/Card/index.tsx b/src/shared/ui/Card/index.tsx
new file mode 100644
index 000000000..c4963149d
--- /dev/null
+++ b/src/shared/ui/Card/index.tsx
@@ -0,0 +1,27 @@
+import * as React from "react"
+import { forwardRef } from "react"
+
+// 카드 컴포넌트
+type DivProps = React.HTMLAttributes<HTMLDivElement> & { className?: string }
+export const Card = forwardRef<HTMLDivElement, DivProps>(({ className = "", ...props }, ref) => (
+  <div className={`rounded-lg border bg-card text-card-foreground shadow-sm ${className}`} ref={ref} {...props} />
+))
+Card.displayName = "Card"
+
+export const CardHeader = forwardRef<HTMLDivElement, DivProps>(({ className = "", ...props }, ref) => (
+  <div className={`flex flex-col space-y-1.5 p-6 ${className}`} ref={ref} {...props} />
+))
+CardHeader.displayName = "CardHeader"
+
+export const CardTitle = forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement> & { className?: string }
+>(({ className = "", ...props }, ref) => (
+  <h3 className={`text-2xl font-semibold leading-none tracking-tight ${className}`} ref={ref} {...props} />
+))
+CardTitle.displayName = "CardTitle"
+
+export const CardContent = forwardRef<HTMLDivElement, DivProps>(({ className = "", ...props }, ref) => (
+  <div className={`p-6 pt-0 ${className}`} ref={ref} {...props} />
+))
+CardContent.displayName = "CardContent"
diff --git a/src/shared/ui/Dialog/index.tsx b/src/shared/ui/Dialog/index.tsx
new file mode 100644
index 000000000..f21473ae9
--- /dev/null
+++ b/src/shared/ui/Dialog/index.tsx
@@ -0,0 +1,50 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+import * as React from "react"
+import { forwardRef } from "react"
+
+export const Dialog = DialogPrimitive.Root
+export const DialogTrigger = DialogPrimitive.Trigger
+export const DialogPortal = DialogPrimitive.Portal
+export const DialogOverlay = DialogPrimitive.Overlay
+
+export const DialogContent = forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { className?: string }
+>(({ children, className = "", ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay className="fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+    <DialogPrimitive.Content
+      className={`fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full ${className}`}
+      ref={ref}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">닫기</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+export const DialogHeader = ({
+  className = "",
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & { className?: string }) => (
+  <div className={`flex flex-col space-y-1.5 text-center sm:text-left ${className}`} {...props} />
+)
+DialogHeader.displayName = "DialogHeader"
+
+export const DialogTitle = forwardRef<
+  HTMLHeadingElement,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & { className?: string }
+>(({ className = "", ...props }, ref) => (
+  <DialogPrimitive.Title
+    className={`text-lg font-semibold leading-none tracking-tight ${className}`}
+    ref={ref}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
diff --git a/src/shared/ui/Input/index.tsx b/src/shared/ui/Input/index.tsx
new file mode 100644
index 000000000..ef9718d7d
--- /dev/null
+++ b/src/shared/ui/Input/index.tsx
@@ -0,0 +1,15 @@
+import * as React from "react"
+import { forwardRef } from "react"
+
+type InputProps = React.InputHTMLAttributes<HTMLInputElement> & { className?: string }
+export const Input = forwardRef<HTMLInputElement, InputProps>(({ className = "", type, ...props }, ref) => {
+  return (
+    <input
+      className={`flex h-10 w-full rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+      ref={ref}
+      type={type}
+      {...props}
+    />
+  )
+})
+Input.displayName = "Input"
diff --git a/src/shared/ui/Select/index.tsx b/src/shared/ui/Select/index.tsx
new file mode 100644
index 000000000..8a5e95317
--- /dev/null
+++ b/src/shared/ui/Select/index.tsx
@@ -0,0 +1,58 @@
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown } from "lucide-react"
+import { forwardRef } from "react"
+
+export const Select = SelectPrimitive.Root
+export const SelectGroup = SelectPrimitive.Group
+export const SelectValue = SelectPrimitive.Value
+
+export const SelectTrigger = forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & { className?: string }
+>(({ children, className = "", ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    className={`flex h-10 items-center justify-between rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+    ref={ref}
+    {...props}
+  >
+    {children}
+    <ChevronDown className="h-4 w-4 opacity-50" />
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+export const SelectContent = forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & { className?: string }
+>(({ children, className = "", position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      className={`relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ${className}`}
+      position={position}
+      ref={ref}
+      {...props}
+    >
+      <SelectPrimitive.Viewport className="p-1">{children}</SelectPrimitive.Viewport>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+export const SelectItem = forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & { className?: string }
+>(({ children, className = "", ...props }, ref) => (
+  <SelectPrimitive.Item
+    className={`relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ${className}`}
+    ref={ref}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
diff --git a/src/shared/ui/Table/index.tsx b/src/shared/ui/Table/index.tsx
new file mode 100644
index 000000000..38d69ca2d
--- /dev/null
+++ b/src/shared/ui/Table/index.tsx
@@ -0,0 +1,57 @@
+import * as React from "react"
+import { forwardRef } from "react"
+
+export const Table = forwardRef<HTMLTableElement, React.TableHTMLAttributes<HTMLTableElement> & { className?: string }>(
+  ({ className = "", ...props }, ref) => (
+    <div className="w-full overflow-auto">
+      <table className={`table-fixed w-full caption-bottom text-sm ${className}`} ref={ref} {...props} />
+    </div>
+  ),
+)
+Table.displayName = "Table"
+
+export const TableHeader = forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement> & { className?: string }
+>(({ className = "", ...props }, ref) => <thead className={`[&_tr]:border-b ${className}`} ref={ref} {...props} />)
+TableHeader.displayName = "TableHeader"
+
+export const TableBody = forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement> & { className?: string }
+>(({ className = "", ...props }, ref) => (
+  <tbody className={`[&_tr:last-child]:border-0 ${className}`} ref={ref} {...props} />
+))
+TableBody.displayName = "TableBody"
+
+export const TableRow = forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement> & { className?: string }
+>(({ className = "", ...props }, ref) => (
+  <tr
+    className={`border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted h-14 ${className}`}
+    ref={ref}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+export const TableHead = forwardRef<
+  HTMLTableHeaderCellElement,
+  React.ThHTMLAttributes<HTMLTableHeaderCellElement> & { className?: string }
+>(({ className = "", ...props }, ref) => (
+  <th
+    className={`h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 ${className}`}
+    ref={ref}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+export const TableCell = forwardRef<
+  HTMLTableDataCellElement,
+  React.TdHTMLAttributes<HTMLTableDataCellElement> & { className?: string }
+>(({ className = "", ...props }, ref) => (
+  <td className={`p-2 align-middle [&:has([role=checkbox])]:pr-0 ${className}`} ref={ref} {...props} />
+))
+TableCell.displayName = "TableCell"
diff --git a/src/shared/ui/TextArea/index.tsx b/src/shared/ui/TextArea/index.tsx
new file mode 100644
index 000000000..966a5a595
--- /dev/null
+++ b/src/shared/ui/TextArea/index.tsx
@@ -0,0 +1,14 @@
+import * as React from "react"
+import { forwardRef } from "react"
+
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & { className?: string }
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(({ className = "", ...props }, ref) => {
+  return (
+    <textarea
+      className={`flex min-h-[150px] w-full rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
new file mode 100644
index 000000000..d8bdad34c
--- /dev/null
+++ b/src/shared/ui/index.ts
@@ -0,0 +1,7 @@
+export * from "./Button"
+export * from "./Card"
+export * from "./Dialog"
+export * from "./Input"
+export * from "./Select"
+export * from "./Table"
+export * from "./TextArea"

From cf08b332481a49175a2edc8a0d86ee8b9bba40dd Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Tue, 12 Aug 2025 01:48:52 +0900
Subject: [PATCH 13/71] =?UTF-8?q?feat:=20apiClient=20=EB=9E=98=ED=95=91=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/comment/api/index.ts | 12 ++++-------
 src/entities/post/api/index.ts    | 12 ++++-------
 src/entities/user/api/index.ts    |  6 ++----
 src/shared/api/apiClient.ts       | 34 +++++++++++++++++++++++++------
 4 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/src/entities/comment/api/index.ts b/src/entities/comment/api/index.ts
index 917691d84..b0d399df7 100644
--- a/src/entities/comment/api/index.ts
+++ b/src/entities/comment/api/index.ts
@@ -4,19 +4,15 @@ import { Comment } from "../model/types"
 
 export const commentApi = {
   async create() {
-    const result = await apiClient.post("/comments/add")
-    return result.data
+    return apiClient.post("/comments/add")
   },
   async delete(commentId: number) {
-    const result = await apiClient.delete(`/comments/${commentId}`)
-    return result.data
+    return apiClient.delete(`/comments/${commentId}`)
   },
   async fetchById(postId: number) {
-    const result = await apiClient.get<Comment>(`/comments/post/${postId}`)
-    return result.data
+    return apiClient.get<Comment>(`/comments/post/${postId}`)
   },
   async update(comment: Comment) {
-    const result = await apiClient.put(`/comments/${comment.id}`)
-    return result.data
+    return apiClient.put(`/comments/${comment.id}`)
   },
 }
diff --git a/src/entities/post/api/index.ts b/src/entities/post/api/index.ts
index e0b409b78..a1e24f6be 100644
--- a/src/entities/post/api/index.ts
+++ b/src/entities/post/api/index.ts
@@ -12,19 +12,15 @@ export interface PostQuery {
 
 export const PostApi = {
   async create(post: Pick<Post, "body" | "title" | "userId">) {
-    const result = await apiClient.post("/posts/add", post)
-    return result.data
+    return apiClient.post("/posts/add", post)
   },
   async delete(postId: number) {
-    const result = await apiClient.delete(`/posts/${postId}`)
-    return result.data
+    return apiClient.delete(`/posts/${postId}`)
   },
   async fetchAll(params: PostQuery) {
-    const result = await apiClient.get<Post[]>("/posts", { params })
-    return result.data
+    return apiClient.get<Post[]>("/posts", { params })
   },
   async update(post: Post) {
-    const result = await apiClient.put(`/posts/${post.id}`, post)
-    return result.data
+    return apiClient.put(`/posts/${post.id}`, post)
   },
 }
diff --git a/src/entities/user/api/index.ts b/src/entities/user/api/index.ts
index f254985c0..f327a447c 100644
--- a/src/entities/user/api/index.ts
+++ b/src/entities/user/api/index.ts
@@ -4,13 +4,11 @@ import { FetchUserParams, User } from "../model/types"
 
 export const userApi = {
   async fetchAll(params: FetchUserParams) {
-    const result = await apiClient.get<Array<User>>("/users", {
+    return apiClient.get<Array<User>>("/users", {
       params,
     })
-    return result.data
   },
   async fetchById(userId: number) {
-    const result = await apiClient.get<User>(`/users/${userId}`)
-    return result.data
+    return apiClient.get<User>(`/users/${userId}`)
   },
 }
diff --git a/src/shared/api/apiClient.ts b/src/shared/api/apiClient.ts
index 75a1e06de..4f0842978 100644
--- a/src/shared/api/apiClient.ts
+++ b/src/shared/api/apiClient.ts
@@ -1,13 +1,35 @@
-import axios from "axios"
+import axios, { AxiosRequestConfig, AxiosResponse } from "axios"
 
-export const apiClient = axios.create({
+export const axiosInstance = axios.create({
   baseURL: "/api",
   headers: {
     "Content-Type": "application/json",
   },
 })
 
-apiClient.interceptors.response.use((response) => {
-  console.log(response)
-  return response
-})
+export const apiClient = {
+  delete: async <TResponse>(url: string, config?: AxiosRequestConfig) => {
+    const response: AxiosResponse<TResponse> = await axiosInstance.delete(url, config)
+    return response.data
+  },
+
+  get: async <TResponse>(url: string, config?: AxiosRequestConfig) => {
+    const response: AxiosResponse<TResponse> = await axiosInstance.get(url, config)
+    return response.data
+  },
+
+  patch: async <TResponse, TRequest = unknown>(url: string, data?: TRequest, config?: AxiosRequestConfig) => {
+    const response: AxiosResponse<TResponse> = await axiosInstance.patch(url, data, config)
+    return response.data
+  },
+
+  post: async <TResponse, TRequest = unknown>(url: string, data?: TRequest, config?: AxiosRequestConfig) => {
+    const response: AxiosResponse<TResponse> = await axiosInstance.post(url, data, config)
+    return response.data
+  },
+
+  put: async <TResponse, TRequest = unknown>(url: string, data?: TRequest, config?: AxiosRequestConfig) => {
+    const response: AxiosResponse<TResponse> = await axiosInstance.put(url, data, config)
+    return response.data
+  },
+}

From 3067318abe43946570193f2e7a75513240b49a5a Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Tue, 12 Aug 2025 20:25:08 +0900
Subject: [PATCH 14/71] =?UTF-8?q?chore:=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=ED=99=98=EA=B2=BD=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json      |  1 +
 pnpm-lock.yaml    | 95 ++++++++++++++++++++++++-----------------------
 src/test/setup.ts |  2 +-
 vite.config.ts    |  6 +++
 vitest.config.ts  | 14 +++++++
 5 files changed, 71 insertions(+), 47 deletions(-)

diff --git a/package.json b/package.json
index 0163a68ea..37d89126a 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.2.1",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
     "@typescript-eslint/eslint-plugin": "^8.39.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7b7f8f92b..ea23f8a46 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,6 +36,9 @@ importers:
       '@testing-library/user-event':
         specifier: ^14.6.1
         version: 14.6.1(@testing-library/dom@10.4.0)
+      '@types/node':
+        specifier: ^24.2.1
+        version: 24.2.1
       '@types/react':
         specifier: ^19.1.9
         version: 19.1.9
@@ -50,7 +53,7 @@ importers:
         version: 8.39.0(eslint@9.33.0)(typescript@5.9.2)
       '@vitejs/plugin-react':
         specifier: ^5.0.0
-        version: 5.0.0(vite@7.1.1(@types/node@22.8.1))
+        version: 5.0.0(vite@7.1.1(@types/node@24.2.1))
       '@vitest/ui':
         specifier: 3.2.4
         version: 3.2.4(vitest@3.2.4)
@@ -89,7 +92,7 @@ importers:
         version: 0.539.0(react@19.1.1)
       msw:
         specifier: ^2.10.4
-        version: 2.10.4(@types/node@22.8.1)(typescript@5.9.2)
+        version: 2.10.4(@types/node@24.2.1)(typescript@5.9.2)
       prettier:
         specifier: ^3.6.2
         version: 3.6.2
@@ -104,10 +107,10 @@ importers:
         version: 8.39.0(eslint@9.33.0)(typescript@5.9.2)
       vite:
         specifier: ^7.1.1
-        version: 7.1.1(@types/node@22.8.1)
+        version: 7.1.1(@types/node@24.2.1)
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/node@22.8.1)(@vitest/browser@2.1.3)(@vitest/ui@3.2.4)(jsdom@26.1.0)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))
+        version: 3.2.4(@types/node@24.2.1)(@vitest/browser@2.1.3)(@vitest/ui@3.2.4)(jsdom@26.1.0)(msw@2.10.4(@types/node@24.2.1)(typescript@5.9.2))
       vitest-browser-react:
         specifier: ^1.0.1
         version: 1.0.1(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(@vitest/browser@2.1.3)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vitest@3.2.4)
@@ -1021,8 +1024,8 @@ packages:
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
-  '@types/node@22.8.1':
-    resolution: {integrity: sha512-k6Gi8Yyo8EtrNtkHXutUu2corfDf9su95VYVP10aGYMMROM6SAItZi0w1XszA6RtWTHSVp5OeFof37w0IEqCQg==}
+  '@types/node@24.2.1':
+    resolution: {integrity: sha512-DRh5K+ka5eJic8CjH7td8QpYEV6Zo10gfRkjHCO3weqZHWDtAaSTFtl4+VMqOJ4N5jcuhZ9/l+yy8rVgw7BQeQ==}
 
   '@types/react-dom@19.1.7':
     resolution: {integrity: sha512-i5ZzwYpqjmrKenzkoLM2Ibzt6mAsM7pxB6BCIouEVVmgiqaMj1TjaK7hnA36hbW5aZv20kx7Lw6hWzPWg0Rurw==}
@@ -2599,8 +2602,8 @@ packages:
     resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
     engines: {node: '>= 0.4'}
 
-  undici-types@6.19.8:
-    resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
+  undici-types@7.10.0:
+    resolution: {integrity: sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag==}
 
   universalify@0.2.0:
     resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
@@ -3165,16 +3168,16 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.2': {}
 
-  '@inquirer/confirm@5.0.1(@types/node@22.8.1)':
+  '@inquirer/confirm@5.0.1(@types/node@24.2.1)':
     dependencies:
-      '@inquirer/core': 10.0.1(@types/node@22.8.1)
-      '@inquirer/type': 3.0.0(@types/node@22.8.1)
-      '@types/node': 22.8.1
+      '@inquirer/core': 10.0.1(@types/node@24.2.1)
+      '@inquirer/type': 3.0.0(@types/node@24.2.1)
+      '@types/node': 24.2.1
 
-  '@inquirer/core@10.0.1(@types/node@22.8.1)':
+  '@inquirer/core@10.0.1(@types/node@24.2.1)':
     dependencies:
       '@inquirer/figures': 1.0.7
-      '@inquirer/type': 3.0.0(@types/node@22.8.1)
+      '@inquirer/type': 3.0.0(@types/node@24.2.1)
       ansi-escapes: 4.3.2
       cli-width: 4.1.0
       mute-stream: 2.0.0
@@ -3187,9 +3190,9 @@ snapshots:
 
   '@inquirer/figures@1.0.7': {}
 
-  '@inquirer/type@3.0.0(@types/node@22.8.1)':
+  '@inquirer/type@3.0.0(@types/node@24.2.1)':
     dependencies:
-      '@types/node': 22.8.1
+      '@types/node': 24.2.1
 
   '@jridgewell/gen-mapping@0.3.12':
     dependencies:
@@ -3638,9 +3641,9 @@ snapshots:
 
   '@types/json5@0.0.29': {}
 
-  '@types/node@22.8.1':
+  '@types/node@24.2.1':
     dependencies:
-      undici-types: 6.19.8
+      undici-types: 7.10.0
 
   '@types/react-dom@19.1.7(@types/react@19.1.9)':
     dependencies:
@@ -3747,7 +3750,7 @@ snapshots:
       '@typescript-eslint/types': 8.39.0
       eslint-visitor-keys: 4.2.1
 
-  '@vitejs/plugin-react@5.0.0(vite@7.1.1(@types/node@22.8.1))':
+  '@vitejs/plugin-react@5.0.0(vite@7.1.1(@types/node@24.2.1))':
     dependencies:
       '@babel/core': 7.28.0
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.0)
@@ -3755,21 +3758,21 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-beta.30
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
-      vite: 7.1.1(@types/node@22.8.1)
+      vite: 7.1.1(@types/node@24.2.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/browser@2.1.3(@types/node@22.8.1)(@vitest/spy@3.2.4)(typescript@5.9.2)(vite@7.1.1(@types/node@22.8.1))(vitest@3.2.4)':
+  '@vitest/browser@2.1.3(@types/node@24.2.1)(@vitest/spy@3.2.4)(typescript@5.9.2)(vite@7.1.1(@types/node@24.2.1))(vitest@3.2.4)':
     dependencies:
       '@testing-library/dom': 10.4.0
       '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.0)
-      '@vitest/mocker': 2.1.3(@vitest/spy@3.2.4)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))(vite@7.1.1(@types/node@22.8.1))
+      '@vitest/mocker': 2.1.3(@vitest/spy@3.2.4)(msw@2.10.4(@types/node@24.2.1)(typescript@5.9.2))(vite@7.1.1(@types/node@24.2.1))
       '@vitest/utils': 2.1.3
       magic-string: 0.30.17
-      msw: 2.10.4(@types/node@22.8.1)(typescript@5.9.2)
+      msw: 2.10.4(@types/node@24.2.1)(typescript@5.9.2)
       sirv: 2.0.4
       tinyrainbow: 1.2.0
-      vitest: 3.2.4(@types/node@22.8.1)(@vitest/browser@2.1.3)(@vitest/ui@3.2.4)(jsdom@26.1.0)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))
+      vitest: 3.2.4(@types/node@24.2.1)(@vitest/browser@2.1.3)(@vitest/ui@3.2.4)(jsdom@26.1.0)(msw@2.10.4(@types/node@24.2.1)(typescript@5.9.2))
       ws: 8.18.0
     transitivePeerDependencies:
       - '@types/node'
@@ -3787,23 +3790,23 @@ snapshots:
       chai: 5.2.0
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@2.1.3(@vitest/spy@3.2.4)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))(vite@7.1.1(@types/node@22.8.1))':
+  '@vitest/mocker@2.1.3(@vitest/spy@3.2.4)(msw@2.10.4(@types/node@24.2.1)(typescript@5.9.2))(vite@7.1.1(@types/node@24.2.1))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      msw: 2.10.4(@types/node@22.8.1)(typescript@5.9.2)
-      vite: 7.1.1(@types/node@22.8.1)
+      msw: 2.10.4(@types/node@24.2.1)(typescript@5.9.2)
+      vite: 7.1.1(@types/node@24.2.1)
 
-  '@vitest/mocker@3.2.4(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))(vite@7.1.1(@types/node@22.8.1))':
+  '@vitest/mocker@3.2.4(msw@2.10.4(@types/node@24.2.1)(typescript@5.9.2))(vite@7.1.1(@types/node@24.2.1))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      msw: 2.10.4(@types/node@22.8.1)(typescript@5.9.2)
-      vite: 7.1.1(@types/node@22.8.1)
+      msw: 2.10.4(@types/node@24.2.1)(typescript@5.9.2)
+      vite: 7.1.1(@types/node@24.2.1)
 
   '@vitest/pretty-format@2.1.3':
     dependencies:
@@ -3838,7 +3841,7 @@ snapshots:
       sirv: 3.0.1
       tinyglobby: 0.2.14
       tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/node@22.8.1)(@vitest/browser@2.1.3)(@vitest/ui@3.2.4)(jsdom@26.1.0)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))
+      vitest: 3.2.4(@types/node@24.2.1)(@vitest/browser@2.1.3)(@vitest/ui@3.2.4)(jsdom@26.1.0)(msw@2.10.4(@types/node@24.2.1)(typescript@5.9.2))
 
   '@vitest/utils@2.1.3':
     dependencies:
@@ -4848,12 +4851,12 @@ snapshots:
 
   ms@2.1.3: {}
 
-  msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2):
+  msw@2.10.4(@types/node@24.2.1)(typescript@5.9.2):
     dependencies:
       '@bundled-es-modules/cookie': 2.0.1
       '@bundled-es-modules/statuses': 1.0.1
       '@bundled-es-modules/tough-cookie': 0.1.6
-      '@inquirer/confirm': 5.0.1(@types/node@22.8.1)
+      '@inquirer/confirm': 5.0.1(@types/node@24.2.1)
       '@mswjs/interceptors': 0.39.5
       '@open-draft/deferred-promise': 2.2.0
       '@open-draft/until': 2.1.0
@@ -5415,7 +5418,7 @@ snapshots:
       has-symbols: 1.1.0
       which-boxed-primitive: 1.1.1
 
-  undici-types@6.19.8: {}
+  undici-types@7.10.0: {}
 
   universalify@0.2.0: {}
 
@@ -5449,13 +5452,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.9
 
-  vite-node@3.2.4(@types/node@22.8.1):
+  vite-node@3.2.4(@types/node@24.2.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.1
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 7.1.1(@types/node@22.8.1)
+      vite: 7.1.1(@types/node@24.2.1)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -5470,7 +5473,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite@7.1.1(@types/node@22.8.1):
+  vite@7.1.1(@types/node@24.2.1):
     dependencies:
       esbuild: 0.25.3
       fdir: 6.4.6(picomatch@4.0.3)
@@ -5479,24 +5482,24 @@ snapshots:
       rollup: 4.46.2
       tinyglobby: 0.2.14
     optionalDependencies:
-      '@types/node': 22.8.1
+      '@types/node': 24.2.1
       fsevents: 2.3.3
 
   vitest-browser-react@1.0.1(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(@vitest/browser@2.1.3)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vitest@3.2.4):
     dependencies:
-      '@vitest/browser': 2.1.3(@types/node@22.8.1)(@vitest/spy@3.2.4)(typescript@5.9.2)(vite@7.1.1(@types/node@22.8.1))(vitest@3.2.4)
+      '@vitest/browser': 2.1.3(@types/node@24.2.1)(@vitest/spy@3.2.4)(typescript@5.9.2)(vite@7.1.1(@types/node@24.2.1))(vitest@3.2.4)
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
-      vitest: 3.2.4(@types/node@22.8.1)(@vitest/browser@2.1.3)(@vitest/ui@3.2.4)(jsdom@26.1.0)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))
+      vitest: 3.2.4(@types/node@24.2.1)(@vitest/browser@2.1.3)(@vitest/ui@3.2.4)(jsdom@26.1.0)(msw@2.10.4(@types/node@24.2.1)(typescript@5.9.2))
     optionalDependencies:
       '@types/react': 19.1.9
       '@types/react-dom': 19.1.7(@types/react@19.1.9)
 
-  vitest@3.2.4(@types/node@22.8.1)(@vitest/browser@2.1.3)(@vitest/ui@3.2.4)(jsdom@26.1.0)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2)):
+  vitest@3.2.4(@types/node@24.2.1)(@vitest/browser@2.1.3)(@vitest/ui@3.2.4)(jsdom@26.1.0)(msw@2.10.4(@types/node@24.2.1)(typescript@5.9.2)):
     dependencies:
       '@types/chai': 5.2.2
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))(vite@7.1.1(@types/node@22.8.1))
+      '@vitest/mocker': 3.2.4(msw@2.10.4(@types/node@24.2.1)(typescript@5.9.2))(vite@7.1.1(@types/node@24.2.1))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4
@@ -5514,12 +5517,12 @@ snapshots:
       tinyglobby: 0.2.14
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 7.1.1(@types/node@22.8.1)
-      vite-node: 3.2.4(@types/node@22.8.1)
+      vite: 7.1.1(@types/node@24.2.1)
+      vite-node: 3.2.4(@types/node@24.2.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 22.8.1
-      '@vitest/browser': 2.1.3(@types/node@22.8.1)(@vitest/spy@3.2.4)(typescript@5.9.2)(vite@7.1.1(@types/node@22.8.1))(vitest@3.2.4)
+      '@types/node': 24.2.1
+      '@vitest/browser': 2.1.3(@types/node@24.2.1)(@vitest/spy@3.2.4)(typescript@5.9.2)(vite@7.1.1(@types/node@24.2.1))(vitest@3.2.4)
       '@vitest/ui': 3.2.4(vitest@3.2.4)
       jsdom: 26.1.0
     transitivePeerDependencies:
diff --git a/src/test/setup.ts b/src/test/setup.ts
index 49433787d..b4e5a65e3 100644
--- a/src/test/setup.ts
+++ b/src/test/setup.ts
@@ -2,7 +2,7 @@ import "@testing-library/jest-dom"
 import { cleanup } from "@testing-library/react"
 import { setupServer } from "msw/node"
 
-import { buildHandlers, createDb } from "@/test/handlers"
+import { buildHandlers, createDb } from "./handlers"
 
 // 각 테스트가 독립적으로 동작하도록 핸들러를 매 테스트에 재설정
 export const server = setupServer(...buildHandlers(createDb()))
diff --git a/vite.config.ts b/vite.config.ts
index 1e8449b91..2ff4a9734 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,3 +1,4 @@
+/// <reference types="vitest" />
 import path from "path"
 
 import react from "@vitejs/plugin-react"
@@ -26,4 +27,9 @@ export default defineConfig({
       },
     },
   },
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: ["./src/test/setup.ts"],
+  },
 })
diff --git a/vitest.config.ts b/vitest.config.ts
index be7774df9..87d0962ab 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,9 +1,23 @@
+import path from "path"
+
 import react from "@vitejs/plugin-react"
 /// <reference types="vitest" />
 import { defineConfig } from "vitest/config"
 
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+      "@/app": path.resolve(__dirname, "src/app"),
+      "@/entities": path.resolve(__dirname, "src/entities"),
+      "@/features": path.resolve(__dirname, "src/features"),
+      "@/pages": path.resolve(__dirname, "src/pages"),
+      "@/shared": path.resolve(__dirname, "src/shared"),
+      "@/widgets": path.resolve(__dirname, "src/widgets"),
+      "~": path.resolve(__dirname, "src"),
+    },
+  },
   test: {
     environment: "jsdom",
     globals: true,

From d3ffa18dec8b78654bde2517bfdd486981abaca8 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Tue, 12 Aug 2025 21:40:42 +0900
Subject: [PATCH 15/71] =?UTF-8?q?feat:=20entities/comment=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/comment/api/index.ts   | 17 ++++++++++-------
 src/entities/comment/model/types.ts |  6 ++++++
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/entities/comment/api/index.ts b/src/entities/comment/api/index.ts
index b0d399df7..865741eae 100644
--- a/src/entities/comment/api/index.ts
+++ b/src/entities/comment/api/index.ts
@@ -1,18 +1,21 @@
 import { apiClient } from "@/shared/api/apiClient"
 
-import { Comment } from "../model/types"
+import { Comment, CommentRequest } from "../model/types"
 
 export const commentApi = {
-  async create() {
-    return apiClient.post("/comments/add")
+  async create(newComment: CommentRequest) {
+    return apiClient.post<Comment>("/comments/add", newComment)
   },
   async delete(commentId: number) {
     return apiClient.delete(`/comments/${commentId}`)
   },
-  async fetchById(postId: number) {
-    return apiClient.get<Comment>(`/comments/post/${postId}`)
+  async fetchByPostId(postId: number) {
+    return apiClient.get<{ comments: Comment[] }>(`/comments/post/${postId}`)
   },
-  async update(comment: Comment) {
-    return apiClient.put(`/comments/${comment.id}`)
+  async update(comment: Pick<Comment, "body" | "id">) {
+    return apiClient.put<Comment>(`/comments/${comment.id}`, { body: comment.body })
+  },
+  async updateLike(comment: Pick<Comment, "id" | "likes">) {
+    return apiClient.patch<Comment>(`/comments/${comment.id}`, { likes: comment.likes })
   },
 }
diff --git a/src/entities/comment/model/types.ts b/src/entities/comment/model/types.ts
index ff10af0c8..6bcc82240 100644
--- a/src/entities/comment/model/types.ts
+++ b/src/entities/comment/model/types.ts
@@ -1 +1,7 @@
 export type Comment = { body: string; id: number; likes: number; postId: number; user: { username: string } }
+
+export type CommentRequest = {
+  body: string
+  postId: null | number
+  userId: number
+}

From 7c2d171331fa41fbdcffd1023d7a2dc05f04b0c1 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Tue, 12 Aug 2025 21:41:39 +0900
Subject: [PATCH 16/71] =?UTF-8?q?feat:=20entities/post=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/post/api/index.ts | 12 +++++++++---
 src/entities/post/index.ts     |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/entities/post/api/index.ts b/src/entities/post/api/index.ts
index a1e24f6be..356720a78 100644
--- a/src/entities/post/api/index.ts
+++ b/src/entities/post/api/index.ts
@@ -10,9 +10,9 @@ export interface PostQuery {
   sortOrder: "asc" | "desc"
 }
 
-export const PostApi = {
+export const postApi = {
   async create(post: Pick<Post, "body" | "title" | "userId">) {
-    return apiClient.post("/posts/add", post)
+    return apiClient.post<Post>("/posts/add", post)
   },
   async delete(postId: number) {
     return apiClient.delete(`/posts/${postId}`)
@@ -20,7 +20,13 @@ export const PostApi = {
   async fetchAll(params: PostQuery) {
     return apiClient.get<Post[]>("/posts", { params })
   },
+  async fetchAllByTag(tag: string) {
+    return apiClient.get<{ posts: Post[]; total: number }>(`/posts/tag/${tag}`)
+  },
+  async search(params: string) {
+    return apiClient.get("/posts/search", { params })
+  },
   async update(post: Post) {
-    return apiClient.put(`/posts/${post.id}`, post)
+    return apiClient.put<Post>(`/posts/${post.id}`, post)
   },
 }
diff --git a/src/entities/post/index.ts b/src/entities/post/index.ts
index 912f63ce9..f31152d45 100644
--- a/src/entities/post/index.ts
+++ b/src/entities/post/index.ts
@@ -1,2 +1,2 @@
-export { PostApi, type PostQuery } from "./api/index"
+export { postApi, type PostQuery } from "./api/index"
 export type { Post } from "./model/types"

From 19692e203a4be902c1d379b26e9bb3e7f4a03a88 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Tue, 12 Aug 2025 21:46:54 +0900
Subject: [PATCH 17/71] =?UTF-8?q?feat:=20entities/tag=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=20=EB=B0=8F=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/tag/api/index.ts   | 9 +++++++++
 src/entities/tag/index.ts       | 2 ++
 src/entities/tag/model/types.ts | 1 +
 3 files changed, 12 insertions(+)
 create mode 100644 src/entities/tag/api/index.ts
 create mode 100644 src/entities/tag/index.ts
 create mode 100644 src/entities/tag/model/types.ts

diff --git a/src/entities/tag/api/index.ts b/src/entities/tag/api/index.ts
new file mode 100644
index 000000000..cb54ec2c9
--- /dev/null
+++ b/src/entities/tag/api/index.ts
@@ -0,0 +1,9 @@
+import { apiClient } from "@/shared/api/apiClient"
+
+import { Tag } from "../model/types"
+
+export const TagApi = {
+  async fetchAll() {
+    return apiClient.get<Tag[]>("/posts/tags")
+  },
+}
diff --git a/src/entities/tag/index.ts b/src/entities/tag/index.ts
new file mode 100644
index 000000000..05b8ceefe
--- /dev/null
+++ b/src/entities/tag/index.ts
@@ -0,0 +1,2 @@
+export * from "./api"
+export * from "./model/types"
diff --git a/src/entities/tag/model/types.ts b/src/entities/tag/model/types.ts
new file mode 100644
index 000000000..70896d524
--- /dev/null
+++ b/src/entities/tag/model/types.ts
@@ -0,0 +1 @@
+export type Tag = { name: string; slug: string; url: string }

From 99f56ab1cc719d9527563993e3143aad24be72d6 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Tue, 12 Aug 2025 21:47:21 +0900
Subject: [PATCH 18/71] =?UTF-8?q?feat:=20entities/user=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/user/api/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/entities/user/api/index.ts b/src/entities/user/api/index.ts
index f327a447c..d9b3f674e 100644
--- a/src/entities/user/api/index.ts
+++ b/src/entities/user/api/index.ts
@@ -4,7 +4,7 @@ import { FetchUserParams, User } from "../model/types"
 
 export const userApi = {
   async fetchAll(params: FetchUserParams) {
-    return apiClient.get<Array<User>>("/users", {
+    return apiClient.get<{ users: Array<User> }>("/users", {
       params,
     })
   },

From 8911b95471d7343e19b418f60d28e04548ba67ed Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Tue, 12 Aug 2025 21:48:47 +0900
Subject: [PATCH 19/71] =?UTF-8?q?feat:=20feature/comment-lik=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/feature/comment-like/api/index.ts | 9 +++++++++
 src/feature/comment-like/index.ts     | 1 +
 2 files changed, 10 insertions(+)
 create mode 100644 src/feature/comment-like/api/index.ts
 create mode 100644 src/feature/comment-like/index.ts

diff --git a/src/feature/comment-like/api/index.ts b/src/feature/comment-like/api/index.ts
new file mode 100644
index 000000000..862be83b1
--- /dev/null
+++ b/src/feature/comment-like/api/index.ts
@@ -0,0 +1,9 @@
+import type { Comment } from "@/entities/comment"
+
+import { commentApi } from "@/entities/comment"
+
+export const commentLikeApi = {
+  async incrementLike(comment: Pick<Comment, "id" | "likes">) {
+    return commentApi.updateLike(comment)
+  },
+}
diff --git a/src/feature/comment-like/index.ts b/src/feature/comment-like/index.ts
new file mode 100644
index 000000000..e1a716605
--- /dev/null
+++ b/src/feature/comment-like/index.ts
@@ -0,0 +1 @@
+export * from "./api"

From 51b1e016471afabd070f21896c446b9243df462e Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Tue, 12 Aug 2025 21:51:57 +0900
Subject: [PATCH 20/71] =?UTF-8?q?refactor:=20post=20manager=20page=20?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20api=20=ED=98=B8=EC=B6=9C=20=EB=B6=80?=
 =?UTF-8?q?=EB=B6=84=20=EC=A0=84=EC=B2=B4=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PostsManagerPage.tsx | 72 ++++++++++------------------------
 1 file changed, 20 insertions(+), 52 deletions(-)

diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 9126ed1c4..a5d139d6e 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -2,6 +2,12 @@ import { Edit2, MessageSquare, Plus, Search, ThumbsDown, ThumbsUp, Trash2 } from
 import { useEffect, useState } from "react"
 import { useLocation, useNavigate } from "react-router-dom"
 
+import { commentApi } from "@/entities/comment"
+import { postApi } from "@/entities/post"
+import { TagApi } from "@/entities/tag"
+import { userApi } from "@/entities/user"
+import { commentLikeApi } from "@/feature/comment-like"
+import { fetchUsersSummary } from "@/feature/fetch-users-summary"
 import {
   Button,
   Card,
@@ -25,8 +31,7 @@ import {
   TableHeader,
   TableRow,
   Textarea,
-} from "@/components"
-import { fetchUsersSummary } from "@/feature/fetch-users-summary"
+} from "@/shared/ui"
 
 type Address = { address?: string; city?: string; state?: string }
 type Comment = { body: string; id: number; likes: number; postId: number; user: { username: string } }
@@ -141,8 +146,8 @@ const PostsManager = () => {
       })
       .then((users) => {
         // 포맷팅
-        console.log(users)
-        usersData = users
+        console.log("user=====", users)
+        usersData = users.users
         const postsWithUsers = postsData.posts.map((post: Post) => ({
           ...post,
           author: usersData.find((user) => user.id === post.userId),
@@ -161,8 +166,7 @@ const PostsManager = () => {
   // 태그 가져오기
   const fetchTags = async () => {
     try {
-      const response = await fetch("/api/posts/tags")
-      const data: Tag[] = await response.json()
+      const data: Tag[] = await TagApi.fetchAll()
       setTags(data)
     } catch (error) {
       console.error("태그 가져오기 오류:", error)
@@ -195,12 +199,7 @@ const PostsManager = () => {
     }
     setLoading(true)
     try {
-      const [postsResponse, usersResponse] = await Promise.all([
-        fetch(`/api/posts/tag/${tag}`),
-        fetch("/api/users?limit=0&select=username,image"),
-      ])
-      const postsData: { posts: Post[]; total: number } = await postsResponse.json()
-      const usersData: { users: Array<Pick<User, "id" | "image" | "username">> } = await usersResponse.json()
+      const [postsData, usersData] = await Promise.all([postApi.fetchAllByTag(tag), fetchUsersSummary()])
 
       const postsWithUsers = postsData.posts.map((post: Post) => ({
         ...post,
@@ -218,12 +217,7 @@ const PostsManager = () => {
   // 게시물 추가
   const addPost = async () => {
     try {
-      const response = await fetch("/api/posts/add", {
-        body: JSON.stringify(newPost),
-        headers: { "Content-Type": "application/json" },
-        method: "POST",
-      })
-      const data: Post = await response.json()
+      const data = await postApi.create(newPost)
       setPosts([data, ...posts])
       setShowAddDialog(false)
       setNewPost({ body: "", title: "", userId: 1 })
@@ -236,12 +230,7 @@ const PostsManager = () => {
   const updatePost = async () => {
     if (!selectedPost) return
     try {
-      const response = await fetch(`/api/posts/${selectedPost.id}`, {
-        body: JSON.stringify(selectedPost),
-        headers: { "Content-Type": "application/json" },
-        method: "PUT",
-      })
-      const data: Post = await response.json()
+      const data = await postApi.update(selectedPost)
       setPosts(posts.map((post) => (post.id === data.id ? data : post)))
       setShowEditDialog(false)
     } catch (error) {
@@ -252,9 +241,7 @@ const PostsManager = () => {
   // 게시물 삭제
   const deletePost = async (id: number) => {
     try {
-      await fetch(`/api/posts/${id}`, {
-        method: "DELETE",
-      })
+      await postApi.delete(id)
       setPosts(posts.filter((post) => post.id !== id))
     } catch (error) {
       console.error("게시물 삭제 오류:", error)
@@ -265,8 +252,7 @@ const PostsManager = () => {
   const fetchComments = async (postId: number) => {
     if (comments[postId]) return // 이미 불러온 댓글이 있으면 다시 불러오지 않음
     try {
-      const response = await fetch(`/api/comments/post/${postId}`)
-      const data: { comments: Comment[] } = await response.json()
+      const data = await commentApi.fetchByPostId(postId)
       setComments((prev) => ({ ...prev, [postId]: data.comments }))
     } catch (error) {
       console.error("댓글 가져오기 오류:", error)
@@ -276,12 +262,7 @@ const PostsManager = () => {
   // 댓글 추가
   const addComment = async () => {
     try {
-      const response = await fetch("/api/comments/add", {
-        body: JSON.stringify(newComment),
-        headers: { "Content-Type": "application/json" },
-        method: "POST",
-      })
-      const data: Comment = await response.json()
+      const data: Comment = await commentApi.create(newComment)
       setComments((prev) => ({
         ...prev,
         [data.postId]: [...(prev[data.postId] || []), data],
@@ -297,12 +278,7 @@ const PostsManager = () => {
   const updateComment = async () => {
     if (!selectedComment) return
     try {
-      const response = await fetch(`/api/comments/${selectedComment.id}`, {
-        body: JSON.stringify({ body: selectedComment.body }),
-        headers: { "Content-Type": "application/json" },
-        method: "PUT",
-      })
-      const data: Comment = await response.json()
+      const data: Comment = await commentApi.update({ body: newComment.body, id: selectedComment.id })
       setComments((prev) => ({
         ...prev,
         [data.postId]: prev[data.postId].map((comment) => (comment.id === data.id ? data : comment)),
@@ -316,9 +292,7 @@ const PostsManager = () => {
   // 댓글 삭제
   const deleteComment = async (id: number, postId: number) => {
     try {
-      await fetch(`/api/comments/${id}`, {
-        method: "DELETE",
-      })
+      await commentApi.delete(id)
       setComments((prev) => ({
         ...prev,
         [postId]: (prev[postId] || []).filter((comment) => comment.id !== id),
@@ -332,12 +306,7 @@ const PostsManager = () => {
   const likeComment = async (id: number, postId: number) => {
     try {
       const currentLikes = comments[postId]?.find((c) => c.id === id)?.likes ?? 0
-      const response = await fetch(`/api/comments/${id}`, {
-        body: JSON.stringify({ likes: currentLikes + 1 }),
-        headers: { "Content-Type": "application/json" },
-        method: "PATCH",
-      })
-      const data: Comment = await response.json()
+      const data: Comment = await commentLikeApi.incrementLike({ id, likes: currentLikes })
       setComments((prev) => ({
         ...prev,
         [postId]: (prev[postId] || []).map((comment) =>
@@ -359,8 +328,7 @@ const PostsManager = () => {
   // 사용자 모달 열기
   const openUserModal = async (user: UserSummary) => {
     try {
-      const response = await fetch(`/api/users/${user.id}`)
-      const userData: User = await response.json()
+      const userData: User = await userApi.fetchById(user.id)
       setSelectedUser(userData)
       setShowUserModal(true)
     } catch (error) {

From d6115f53d64174f13bdbb3a6809f23f3c5094889 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Tue, 12 Aug 2025 21:54:04 +0900
Subject: [PATCH 21/71] =?UTF-8?q?refactor:=20highlighText=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.tsx                     |  1 +
 src/pages/PostsManagerPage.tsx   | 16 +---------------
 src/shared/lib/highlightText.tsx | 13 +++++++++++++
 src/shared/lib/index.ts          |  1 +
 4 files changed, 16 insertions(+), 15 deletions(-)
 create mode 100644 src/shared/lib/highlightText.tsx
 create mode 100644 src/shared/lib/index.ts

diff --git a/src/main.tsx b/src/main.tsx
index d8f4fe15d..3df4691ec 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,6 +2,7 @@ import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
 
 import App from "@/App.tsx"
+
 import "./index.css"
 
 createRoot(document.getElementById("root")!).render(
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index a5d139d6e..dbad95d6d 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -8,6 +8,7 @@ import { TagApi } from "@/entities/tag"
 import { userApi } from "@/entities/user"
 import { commentLikeApi } from "@/feature/comment-like"
 import { fetchUsersSummary } from "@/feature/fetch-users-summary"
+import { highlightText } from "@/shared/lib"
 import {
   Button,
   Card,
@@ -359,21 +360,6 @@ const PostsManager = () => {
     setSelectedTag(params.get("tag") || "")
   }, [location.search])
 
-  // 하이라이트 함수 추가
-  const highlightText = (text: string | undefined, highlight: string) => {
-    if (!text) return null
-    if (!highlight.trim()) {
-      return <span>{text}</span>
-    }
-    const regex = new RegExp(`(${highlight})`, "gi")
-    const parts = text.split(regex)
-    return (
-      <span>
-        {parts.map((part, i) => (regex.test(part) ? <mark key={i}>{part}</mark> : <span key={i}>{part}</span>))}
-      </span>
-    )
-  }
-
   // 게시물 테이블 렌더링
   const renderPostTable = () => (
     <Table>
diff --git a/src/shared/lib/highlightText.tsx b/src/shared/lib/highlightText.tsx
new file mode 100644
index 000000000..1efb6f35c
--- /dev/null
+++ b/src/shared/lib/highlightText.tsx
@@ -0,0 +1,13 @@
+export const highlightText = (text: string | undefined, highlight: string) => {
+  if (!text) return null
+  if (!highlight.trim()) {
+    return <span>{text}</span>
+  }
+  const regex = new RegExp(`(${highlight})`, "gi")
+  const parts = text.split(regex)
+  return (
+    <span>
+      {parts.map((part, i) => (regex.test(part) ? <mark key={i}>{part}</mark> : <span key={i}>{part}</span>))}
+    </span>
+  )
+}
diff --git a/src/shared/lib/index.ts b/src/shared/lib/index.ts
new file mode 100644
index 000000000..168acbc8b
--- /dev/null
+++ b/src/shared/lib/index.ts
@@ -0,0 +1 @@
+export { highlightText } from "./highlightText"

From d6c6e0760d1be4f6f53cfd664949bfc232301a02 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Tue, 12 Aug 2025 23:02:01 +0900
Subject: [PATCH 22/71] =?UTF-8?q?chore:=20fetch=20->=20get=20=EC=9B=8C?=
 =?UTF-8?q?=EB=94=A9=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/comment/api/index.ts                  |  2 +-
 src/entities/post/api/index.ts                     | 14 +++-----------
 src/entities/post/model/types.ts                   |  8 ++++++++
 src/entities/tag/api/index.ts                      |  2 +-
 src/entities/user/api/index.ts                     |  6 +++---
 src/entities/user/model/types.ts                   |  2 +-
 src/feature/get-posts/api/index.ts                 | 10 ++++++++++
 src/feature/get-posts/index.ts                     |  1 +
 .../api/index.ts                                   |  4 ++--
 .../index.ts                                       |  2 +-
 .../model/types.ts                                 |  0
 src/pages/PostsManagerPage.tsx                     | 14 ++++++--------
 12 files changed, 37 insertions(+), 28 deletions(-)
 create mode 100644 src/feature/get-posts/api/index.ts
 create mode 100644 src/feature/get-posts/index.ts
 rename src/feature/{fetch-users-summary => get-users-summary}/api/index.ts (65%)
 rename src/feature/{fetch-users-summary => get-users-summary}/index.ts (56%)
 rename src/feature/{fetch-users-summary => get-users-summary}/model/types.ts (100%)

diff --git a/src/entities/comment/api/index.ts b/src/entities/comment/api/index.ts
index 865741eae..ded30ee8f 100644
--- a/src/entities/comment/api/index.ts
+++ b/src/entities/comment/api/index.ts
@@ -9,7 +9,7 @@ export const commentApi = {
   async delete(commentId: number) {
     return apiClient.delete(`/comments/${commentId}`)
   },
-  async fetchByPostId(postId: number) {
+  async getByPostId(postId: number) {
     return apiClient.get<{ comments: Comment[] }>(`/comments/post/${postId}`)
   },
   async update(comment: Pick<Comment, "body" | "id">) {
diff --git a/src/entities/post/api/index.ts b/src/entities/post/api/index.ts
index 356720a78..ed45d44ed 100644
--- a/src/entities/post/api/index.ts
+++ b/src/entities/post/api/index.ts
@@ -1,15 +1,7 @@
-import type { Post } from "@/entities/post/model/types"
+import type { Post, PostQueryParams } from "@/entities/post/model/types"
 
 import { apiClient } from "@/shared/api/apiClient"
 
-export interface PostQuery {
-  limit: number
-  search: string
-  skip: number
-  sortBy: "id" | "none" | "reactions" | "title"
-  sortOrder: "asc" | "desc"
-}
-
 export const postApi = {
   async create(post: Pick<Post, "body" | "title" | "userId">) {
     return apiClient.post<Post>("/posts/add", post)
@@ -17,10 +9,10 @@ export const postApi = {
   async delete(postId: number) {
     return apiClient.delete(`/posts/${postId}`)
   },
-  async fetchAll(params: PostQuery) {
+  async getAll(params: Partial<PostQueryParams>) {
     return apiClient.get<Post[]>("/posts", { params })
   },
-  async fetchAllByTag(tag: string) {
+  async getAllByTag(tag: string) {
     return apiClient.get<{ posts: Post[]; total: number }>(`/posts/tag/${tag}`)
   },
   async search(params: string) {
diff --git a/src/entities/post/model/types.ts b/src/entities/post/model/types.ts
index 4bedefbf4..d5ff4d681 100644
--- a/src/entities/post/model/types.ts
+++ b/src/entities/post/model/types.ts
@@ -7,4 +7,12 @@ export interface Post {
   userId: number
 }
 
+export interface PostQueryParams {
+  limit: number
+  search: string
+  skip: number
+  sortBy: "id" | "none" | "reactions" | "title"
+  sortOrder: "asc" | "desc"
+}
+
 type Reaction = { dislikes: number; likes: number }
diff --git a/src/entities/tag/api/index.ts b/src/entities/tag/api/index.ts
index cb54ec2c9..479a39460 100644
--- a/src/entities/tag/api/index.ts
+++ b/src/entities/tag/api/index.ts
@@ -3,7 +3,7 @@ import { apiClient } from "@/shared/api/apiClient"
 import { Tag } from "../model/types"
 
 export const TagApi = {
-  async fetchAll() {
+  async getAll() {
     return apiClient.get<Tag[]>("/posts/tags")
   },
 }
diff --git a/src/entities/user/api/index.ts b/src/entities/user/api/index.ts
index d9b3f674e..85d6d7ceb 100644
--- a/src/entities/user/api/index.ts
+++ b/src/entities/user/api/index.ts
@@ -1,14 +1,14 @@
 import { apiClient } from "@/shared/api/apiClient"
 
-import { FetchUserParams, User } from "../model/types"
+import { User, UserQueryParams } from "../model/types"
 
 export const userApi = {
-  async fetchAll(params: FetchUserParams) {
+  async getAll(params: UserQueryParams) {
     return apiClient.get<{ users: Array<User> }>("/users", {
       params,
     })
   },
-  async fetchById(userId: number) {
+  async getById(userId: number) {
     return apiClient.get<User>(`/users/${userId}`)
   },
 }
diff --git a/src/entities/user/model/types.ts b/src/entities/user/model/types.ts
index 2217ced2b..92810dad7 100644
--- a/src/entities/user/model/types.ts
+++ b/src/entities/user/model/types.ts
@@ -1,4 +1,3 @@
-export type FetchUserParams = { limit: number; select: string }
 export type User = {
   address?: Address
   age?: number
@@ -11,6 +10,7 @@ export type User = {
   phone?: string
   username?: string
 }
+export type UserQueryParams = { limit: number; select: string }
 
 type Address = { address?: string; city?: string; state?: string }
 
diff --git a/src/feature/get-posts/api/index.ts b/src/feature/get-posts/api/index.ts
new file mode 100644
index 000000000..959b2c892
--- /dev/null
+++ b/src/feature/get-posts/api/index.ts
@@ -0,0 +1,10 @@
+import { postApi } from "@/entities/post"
+import { PostQueryParams } from "@/entities/post/model/types"
+
+export const getPosts = async (params?: Partial<PostQueryParams>) => {
+  const defaultParams = {
+    limit: 10,
+    skip: 0,
+  }
+  return postApi.getAll({ ...defaultParams, ...params })
+}
diff --git a/src/feature/get-posts/index.ts b/src/feature/get-posts/index.ts
new file mode 100644
index 000000000..e1a716605
--- /dev/null
+++ b/src/feature/get-posts/index.ts
@@ -0,0 +1 @@
+export * from "./api"
diff --git a/src/feature/fetch-users-summary/api/index.ts b/src/feature/get-users-summary/api/index.ts
similarity index 65%
rename from src/feature/fetch-users-summary/api/index.ts
rename to src/feature/get-users-summary/api/index.ts
index b9418eb74..9b128f20c 100644
--- a/src/feature/fetch-users-summary/api/index.ts
+++ b/src/feature/get-users-summary/api/index.ts
@@ -2,11 +2,11 @@ import { userApi } from "@/entities/user"
 
 import { UserSummaryParams } from "../model/types"
 
-export const fetchUsersSummary = async (params?: UserSummaryParams) => {
+export const getUsersSummary = async (params?: UserSummaryParams) => {
   const queryParams = {
     limit: params?.limit ?? 0,
     select: params?.select?.join(",") ?? "username,image",
   }
 
-  return userApi.fetchAll(queryParams)
+  return userApi.getAll(queryParams)
 }
diff --git a/src/feature/fetch-users-summary/index.ts b/src/feature/get-users-summary/index.ts
similarity index 56%
rename from src/feature/fetch-users-summary/index.ts
rename to src/feature/get-users-summary/index.ts
index 3d536070a..3246f1eb8 100644
--- a/src/feature/fetch-users-summary/index.ts
+++ b/src/feature/get-users-summary/index.ts
@@ -1,2 +1,2 @@
-export { fetchUsersSummary } from "./api"
+export { getUsersSummary } from "./api"
 export type { UserSummaryParams } from "./model/types"
diff --git a/src/feature/fetch-users-summary/model/types.ts b/src/feature/get-users-summary/model/types.ts
similarity index 100%
rename from src/feature/fetch-users-summary/model/types.ts
rename to src/feature/get-users-summary/model/types.ts
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index dbad95d6d..d54607b0b 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -7,7 +7,7 @@ import { postApi } from "@/entities/post"
 import { TagApi } from "@/entities/tag"
 import { userApi } from "@/entities/user"
 import { commentLikeApi } from "@/feature/comment-like"
-import { fetchUsersSummary } from "@/feature/fetch-users-summary"
+import { getUsersSummary } from "@/feature/get-users-summary"
 import { highlightText } from "@/shared/lib"
 import {
   Button,
@@ -138,16 +138,14 @@ const PostsManager = () => {
     setLoading(true)
     let postsData: { posts: Post[]; total: number }
     let usersData: Array<Pick<User, "id" | "image" | "username">>
-
     fetch(`/api/posts?limit=${limit}&skip=${skip}`) // 게시물 목록
       .then((response) => response.json())
       .then((data: { posts: Post[]; total: number }) => {
         postsData = data
-        return fetchUsersSummary() // 사용자 목록
+        return getUsersSummary() // 사용자 목록
       })
       .then((users) => {
         // 포맷팅
-        console.log("user=====", users)
         usersData = users.users
         const postsWithUsers = postsData.posts.map((post: Post) => ({
           ...post,
@@ -167,7 +165,7 @@ const PostsManager = () => {
   // 태그 가져오기
   const fetchTags = async () => {
     try {
-      const data: Tag[] = await TagApi.fetchAll()
+      const data: Tag[] = await TagApi.getAll()
       setTags(data)
     } catch (error) {
       console.error("태그 가져오기 오류:", error)
@@ -200,7 +198,7 @@ const PostsManager = () => {
     }
     setLoading(true)
     try {
-      const [postsData, usersData] = await Promise.all([postApi.fetchAllByTag(tag), fetchUsersSummary()])
+      const [postsData, usersData] = await Promise.all([postApi.getAllByTag(tag), getUsersSummary()])
 
       const postsWithUsers = postsData.posts.map((post: Post) => ({
         ...post,
@@ -253,7 +251,7 @@ const PostsManager = () => {
   const fetchComments = async (postId: number) => {
     if (comments[postId]) return // 이미 불러온 댓글이 있으면 다시 불러오지 않음
     try {
-      const data = await commentApi.fetchByPostId(postId)
+      const data = await commentApi.getByPostId(postId)
       setComments((prev) => ({ ...prev, [postId]: data.comments }))
     } catch (error) {
       console.error("댓글 가져오기 오류:", error)
@@ -329,7 +327,7 @@ const PostsManager = () => {
   // 사용자 모달 열기
   const openUserModal = async (user: UserSummary) => {
     try {
-      const userData: User = await userApi.fetchById(user.id)
+      const userData: User = await userApi.getById(user.id)
       setSelectedUser(userData)
       setShowUserModal(true)
     } catch (error) {

From 3da893493118efda16de1f1014284592902b97ae Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Tue, 12 Aug 2025 23:11:22 +0900
Subject: [PATCH 23/71] =?UTF-8?q?feat:=20pagination=20response=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20getPosts=20?=
 =?UTF-8?q?=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/post/api/index.ts | 5 +++--
 src/pages/PostsManagerPage.tsx | 4 ++--
 src/shared/api/index.ts        | 2 ++
 src/shared/api/types.ts        | 1 +
 4 files changed, 8 insertions(+), 4 deletions(-)
 create mode 100644 src/shared/api/index.ts
 create mode 100644 src/shared/api/types.ts

diff --git a/src/entities/post/api/index.ts b/src/entities/post/api/index.ts
index ed45d44ed..aa86195d3 100644
--- a/src/entities/post/api/index.ts
+++ b/src/entities/post/api/index.ts
@@ -1,5 +1,6 @@
 import type { Post, PostQueryParams } from "@/entities/post/model/types"
 
+import { PaginationResponse } from "@/shared/api"
 import { apiClient } from "@/shared/api/apiClient"
 
 export const postApi = {
@@ -10,10 +11,10 @@ export const postApi = {
     return apiClient.delete(`/posts/${postId}`)
   },
   async getAll(params: Partial<PostQueryParams>) {
-    return apiClient.get<Post[]>("/posts", { params })
+    return apiClient.get<PaginationResponse<Post>>("/posts", { params })
   },
   async getAllByTag(tag: string) {
-    return apiClient.get<{ posts: Post[]; total: number }>(`/posts/tag/${tag}`)
+    return apiClient.get<PaginationResponse<Post>>(`/posts/tag/${tag}`)
   },
   async search(params: string) {
     return apiClient.get("/posts/search", { params })
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index d54607b0b..82ca4967a 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -7,6 +7,7 @@ import { postApi } from "@/entities/post"
 import { TagApi } from "@/entities/tag"
 import { userApi } from "@/entities/user"
 import { commentLikeApi } from "@/feature/comment-like"
+import { getPosts } from "@/feature/get-posts"
 import { getUsersSummary } from "@/feature/get-users-summary"
 import { highlightText } from "@/shared/lib"
 import {
@@ -138,8 +139,7 @@ const PostsManager = () => {
     setLoading(true)
     let postsData: { posts: Post[]; total: number }
     let usersData: Array<Pick<User, "id" | "image" | "username">>
-    fetch(`/api/posts?limit=${limit}&skip=${skip}`) // 게시물 목록
-      .then((response) => response.json())
+    getPosts({ limit, skip })
       .then((data: { posts: Post[]; total: number }) => {
         postsData = data
         return getUsersSummary() // 사용자 목록
diff --git a/src/shared/api/index.ts b/src/shared/api/index.ts
new file mode 100644
index 000000000..800ee8558
--- /dev/null
+++ b/src/shared/api/index.ts
@@ -0,0 +1,2 @@
+export * from "./apiClient"
+export * from "./types"
diff --git a/src/shared/api/types.ts b/src/shared/api/types.ts
new file mode 100644
index 000000000..113e17bdd
--- /dev/null
+++ b/src/shared/api/types.ts
@@ -0,0 +1 @@
+export type PaginationResponse<DATA> = { posts: DATA[]; total: number }

From 642952d22c7045630ebdcbfb0645d350b1917a43 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Tue, 12 Aug 2025 23:32:20 +0900
Subject: [PATCH 24/71] =?UTF-8?q?refactor:=20posts=20manager=20page=20?=
 =?UTF-8?q?=EB=82=B4=EC=9D=98=20=ED=83=80=EC=9E=85=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/feature/get-users-summary/index.ts       |  4 +-
 src/feature/get-users-summary/model/types.ts |  1 +
 src/pages/PostsManagerPage.tsx               | 44 +++++---------------
 3 files changed, 14 insertions(+), 35 deletions(-)

diff --git a/src/feature/get-users-summary/index.ts b/src/feature/get-users-summary/index.ts
index 3246f1eb8..05b8ceefe 100644
--- a/src/feature/get-users-summary/index.ts
+++ b/src/feature/get-users-summary/index.ts
@@ -1,2 +1,2 @@
-export { getUsersSummary } from "./api"
-export type { UserSummaryParams } from "./model/types"
+export * from "./api"
+export * from "./model/types"
diff --git a/src/feature/get-users-summary/model/types.ts b/src/feature/get-users-summary/model/types.ts
index 119208d38..8934b4efe 100644
--- a/src/feature/get-users-summary/model/types.ts
+++ b/src/feature/get-users-summary/model/types.ts
@@ -1,3 +1,4 @@
 import { User } from "@/entities/user"
 
+export type UserSummary = { id: number; image?: string; username?: string }
 export type UserSummaryParams = { limit: number; select: (keyof User)[] }
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 82ca4967a..d6f67910d 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -2,13 +2,13 @@ import { Edit2, MessageSquare, Plus, Search, ThumbsDown, ThumbsUp, Trash2 } from
 import { useEffect, useState } from "react"
 import { useLocation, useNavigate } from "react-router-dom"
 
-import { commentApi } from "@/entities/comment"
-import { postApi } from "@/entities/post"
-import { TagApi } from "@/entities/tag"
-import { userApi } from "@/entities/user"
+import { Comment, commentApi } from "@/entities/comment"
+import { Post, postApi } from "@/entities/post"
+import { Tag, TagApi } from "@/entities/tag"
+import { User, userApi } from "@/entities/user"
 import { commentLikeApi } from "@/feature/comment-like"
 import { getPosts } from "@/feature/get-posts"
-import { getUsersSummary } from "@/feature/get-users-summary"
+import { getUsersSummary, UserSummary } from "@/feature/get-users-summary"
 import { highlightText } from "@/shared/lib"
 import {
   Button,
@@ -35,39 +35,17 @@ import {
   Textarea,
 } from "@/shared/ui"
 
-type Address = { address?: string; city?: string; state?: string }
-type Comment = { body: string; id: number; likes: number; postId: number; user: { username: string } }
-type Company = { name?: string; title?: string }
-type Post = {
-  author?: UserSummary
-  body: string
-  id: number
-  reactions?: Reaction
-  tags?: string[]
-  title: string
-  userId: number
-}
-// Types
-type Reaction = { dislikes: number; likes: number }
-type Tag = { slug: string; url: string }
-type User = UserSummary & {
-  address?: Address
-  age?: number
-  company?: Company
-  email?: string
-  firstName?: string
-  lastName?: string
-  phone?: string
-}
-type UserSummary = { id: number; image?: string; username?: string }
-
 const PostsManager = () => {
   const navigate = useNavigate()
   const location = useLocation()
   const queryParams = new URLSearchParams(location.search)
 
+  interface PostWithUserSummary extends Post {
+    author?: UserSummary
+  }
+
   // 상태 관리
-  const [posts, setPosts] = useState<Post[]>([])
+  const [posts, setPosts] = useState<PostWithUserSummary[]>([])
   const [total, setTotal] = useState<number>(0)
 
   // 필터 상태
@@ -371,7 +349,7 @@ const PostsManager = () => {
         </TableRow>
       </TableHeader>
       <TableBody>
-        {posts.map((post: Post) => (
+        {posts.map((post: PostWithUserSummary) => (
           <TableRow key={post.id}>
             <TableCell>{post.id}</TableCell>
             <TableCell>

From ad2a220b42778bfa290bae40ab76b13acb95c93f Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Tue, 12 Aug 2025 23:41:24 +0900
Subject: [PATCH 25/71] =?UTF-8?q?feat:=20feature/search-posts=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=20=EB=B0=8F=20=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/post/api/index.ts        | 6 +++---
 src/entities/post/model/types.ts      | 4 ++++
 src/feature/search-posts/api/index.ts | 8 ++++++++
 src/feature/search-posts/index.ts     | 1 +
 src/pages/PostsManagerPage.tsx        | 4 ++--
 5 files changed, 18 insertions(+), 5 deletions(-)
 create mode 100644 src/feature/search-posts/api/index.ts
 create mode 100644 src/feature/search-posts/index.ts

diff --git a/src/entities/post/api/index.ts b/src/entities/post/api/index.ts
index aa86195d3..5a3e05ef6 100644
--- a/src/entities/post/api/index.ts
+++ b/src/entities/post/api/index.ts
@@ -1,4 +1,4 @@
-import type { Post, PostQueryParams } from "@/entities/post/model/types"
+import type { Post, PostQueryParams, SearchQueryParams } from "@/entities/post/model/types"
 
 import { PaginationResponse } from "@/shared/api"
 import { apiClient } from "@/shared/api/apiClient"
@@ -16,8 +16,8 @@ export const postApi = {
   async getAllByTag(tag: string) {
     return apiClient.get<PaginationResponse<Post>>(`/posts/tag/${tag}`)
   },
-  async search(params: string) {
-    return apiClient.get("/posts/search", { params })
+  async search(params: SearchQueryParams) {
+    return apiClient.get<PaginationResponse<Post>>("/posts/search", { params })
   },
   async update(post: Post) {
     return apiClient.put<Post>(`/posts/${post.id}`, post)
diff --git a/src/entities/post/model/types.ts b/src/entities/post/model/types.ts
index d5ff4d681..4b2d6829a 100644
--- a/src/entities/post/model/types.ts
+++ b/src/entities/post/model/types.ts
@@ -15,4 +15,8 @@ export interface PostQueryParams {
   sortOrder: "asc" | "desc"
 }
 
+export interface SearchQueryParams {
+  q?: string
+}
+
 type Reaction = { dislikes: number; likes: number }
diff --git a/src/feature/search-posts/api/index.ts b/src/feature/search-posts/api/index.ts
new file mode 100644
index 000000000..fdcabbe3b
--- /dev/null
+++ b/src/feature/search-posts/api/index.ts
@@ -0,0 +1,8 @@
+import { postApi } from "@/entities/post"
+
+export const searchPostsByKeyword = async (keyword: string) => {
+  const queryParams = {
+    q: keyword,
+  }
+  return postApi.search(queryParams)
+}
diff --git a/src/feature/search-posts/index.ts b/src/feature/search-posts/index.ts
new file mode 100644
index 000000000..e1a716605
--- /dev/null
+++ b/src/feature/search-posts/index.ts
@@ -0,0 +1 @@
+export * from "./api"
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index d6f67910d..1de562177 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -9,6 +9,7 @@ import { User, userApi } from "@/entities/user"
 import { commentLikeApi } from "@/feature/comment-like"
 import { getPosts } from "@/feature/get-posts"
 import { getUsersSummary, UserSummary } from "@/feature/get-users-summary"
+import { searchPostsByKeyword } from "@/feature/search-posts"
 import { highlightText } from "@/shared/lib"
 import {
   Button,
@@ -158,8 +159,7 @@ const PostsManager = () => {
     }
     setLoading(true)
     try {
-      const response = await fetch(`/api/posts/search?q=${searchQuery}`)
-      const data: { posts: Post[]; total: number } = await response.json()
+      const data: { posts: Post[]; total: number } = await searchPostsByKeyword(searchQuery)
       setPosts(data.posts)
       setTotal(data.total)
     } catch (error) {

From 54e7e5c8cc2c914379e8b7f407a2a0019769bf09 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Tue, 12 Aug 2025 23:57:28 +0900
Subject: [PATCH 26/71] =?UTF-8?q?build:=20zustand=20=EC=84=A4=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json   |  3 ++-
 pnpm-lock.yaml | 26 ++++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 37d89126a..7536d9d9b 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
   },
   "dependencies": {
     "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react-dom": "^19.1.1",
+    "zustand": "^5.0.7"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ea23f8a46..695736e68 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       react-dom:
         specifier: ^19.1.1
         version: 19.1.1(react@19.1.1)
+      zustand:
+        specifier: ^5.0.7
+        version: 5.0.7(@types/react@19.1.9)(react@19.1.1)
     devDependencies:
       '@eslint/js':
         specifier: ^9.33.0
@@ -2830,6 +2833,24 @@ packages:
     resolution: {integrity: sha512-cYVsTjKl8b+FrnidjibDWskAv7UKOfcwaVZdp/it9n1s9fU3IkgDbhdIRKCW4JDsAlECJY0ytoVPT3sK6kideA==}
     engines: {node: '>=18'}
 
+  zustand@5.0.7:
+    resolution: {integrity: sha512-Ot6uqHDW/O2VdYsKLLU8GQu8sCOM1LcoE8RwvLv9uuRT9s6SOHCKs0ZEOhxg+I1Ld+A1Q5lwx+UlKXXUoCZITg==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+
 snapshots:
 
   '@adobe/css-tools@4.4.0': {}
@@ -5645,3 +5666,8 @@ snapshots:
   yocto-queue@0.1.0: {}
 
   yoctocolors-cjs@2.1.2: {}
+
+  zustand@5.0.7(@types/react@19.1.9)(react@19.1.1):
+    optionalDependencies:
+      '@types/react': 19.1.9
+      react: 19.1.1

From e52a098fd8d24413cdf9a0bb758d8af7e1a0e6b3 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Wed, 13 Aug 2025 00:29:47 +0900
Subject: [PATCH 27/71] =?UTF-8?q?build:=20tanstack-query=20=EC=84=A4?=
 =?UTF-8?q?=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json   |  1 +
 pnpm-lock.yaml | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/package.json b/package.json
index 7536d9d9b..b2c226dc4 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.85.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "zustand": "^5.0.7"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 695736e68..e2c76e705 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@tanstack/react-query':
+        specifier: ^5.85.0
+        version: 5.85.0(react@19.1.1)
       react:
         specifier: ^19.1.1
         version: 19.1.1
@@ -962,6 +965,14 @@ packages:
   '@rtsao/scc@1.1.0':
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
+  '@tanstack/query-core@5.83.1':
+    resolution: {integrity: sha512-OG69LQgT7jSp+5pPuCfzltq/+7l2xoweggjme9vlbCPa/d7D7zaqv5vN/S82SzSYZ4EDLTxNO1PWrv49RAS64Q==}
+
+  '@tanstack/react-query@5.85.0':
+    resolution: {integrity: sha512-t1HMfToVMGfwEJRya6GG7gbK0luZJd+9IySFNePL1BforU1F3LqQ3tBC2Rpvr88bOrlU6PXyMLgJD0Yzn4ztUw==}
+    peerDependencies:
+      react: ^18 || ^19
+
   '@testing-library/dom@10.4.0':
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
     engines: {node: '>=18'}
@@ -3588,6 +3599,13 @@ snapshots:
 
   '@rtsao/scc@1.1.0': {}
 
+  '@tanstack/query-core@5.83.1': {}
+
+  '@tanstack/react-query@5.85.0(react@19.1.1)':
+    dependencies:
+      '@tanstack/query-core': 5.83.1
+      react: 19.1.1
+
   '@testing-library/dom@10.4.0':
     dependencies:
       '@babel/code-frame': 7.27.1

From e4fb71b19d299889518506618814a74066d870b4 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Wed, 13 Aug 2025 00:30:29 +0900
Subject: [PATCH 28/71] =?UTF-8?q?feat:=20app=20router=20=EC=84=B8=ED=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/{ => app}/App.test.tsx           |  2 +-
 src/{ => app}/App.tsx                | 12 ++++++------
 src/app/providers/RouterProvider.tsx | 10 ++++++++++
 src/app/providers/index.tsx          | 11 +++++++++++
 src/app/routing/AppRouter.tsx        | 11 +++++++++++
 src/index.tsx                        | 13 -------------
 src/main.tsx                         |  3 +--
 src/pages/PostsManagerPage.tsx       |  4 +---
 src/pages/index.tsx                  |  1 +
 9 files changed, 42 insertions(+), 25 deletions(-)
 rename src/{ => app}/App.test.tsx (99%)
 rename src/{ => app}/App.tsx (65%)
 create mode 100644 src/app/providers/RouterProvider.tsx
 create mode 100644 src/app/providers/index.tsx
 create mode 100644 src/app/routing/AppRouter.tsx
 delete mode 100644 src/index.tsx
 create mode 100644 src/pages/index.tsx

diff --git a/src/App.test.tsx b/src/app/App.test.tsx
similarity index 99%
rename from src/App.test.tsx
rename to src/app/App.test.tsx
index 8e3673b5d..5be711086 100644
--- a/src/App.test.tsx
+++ b/src/app/App.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 
-import App from "@/App"
+import App from "./App"
 
 // 통합 시나리오: 목록 로딩 → 태그 필터 → 검색 → 상세 댓글 로드/추가/수정/삭제/좋아요 → 게시물 추가/수정/삭제
 
diff --git a/src/App.tsx b/src/app/App.tsx
similarity index 65%
rename from src/App.tsx
rename to src/app/App.tsx
index f83543fe7..644f130ba 100644
--- a/src/App.tsx
+++ b/src/app/App.tsx
@@ -1,20 +1,20 @@
-import { BrowserRouter as Router } from "react-router-dom"
-
 import Footer from "@/components/Footer.tsx"
 import Header from "@/components/Header.tsx"
-import PostsManagerPage from "@/pages/PostsManagerPage.tsx"
+
+import { AppProvider } from "./providers"
+import { AppRouter } from "./routing/AppRouter"
 
 const App = () => {
   return (
-    <Router>
+    <AppProvider>
       <div className="flex flex-col min-h-screen">
         <Header />
         <main className="flex-grow container mx-auto px-4 py-8">
-          <PostsManagerPage />
+          <AppRouter />
         </main>
         <Footer />
       </div>
-    </Router>
+    </AppProvider>
   )
 }
 
diff --git a/src/app/providers/RouterProvider.tsx b/src/app/providers/RouterProvider.tsx
new file mode 100644
index 000000000..a9b66a133
--- /dev/null
+++ b/src/app/providers/RouterProvider.tsx
@@ -0,0 +1,10 @@
+import { ReactNode } from "react"
+import { BrowserRouter } from "react-router-dom"
+
+interface RouterProviderProps {
+  children: ReactNode
+}
+
+export const RouterProvider = ({ children }: RouterProviderProps) => {
+  return <BrowserRouter>{children}</BrowserRouter>
+}
diff --git a/src/app/providers/index.tsx b/src/app/providers/index.tsx
new file mode 100644
index 000000000..54dcee1c2
--- /dev/null
+++ b/src/app/providers/index.tsx
@@ -0,0 +1,11 @@
+import { ReactNode } from "react"
+
+import { RouterProvider } from "./RouterProvider"
+
+interface AppProvidersProps {
+  children: ReactNode
+}
+
+export const AppProvider = ({ children }: AppProvidersProps) => {
+  return <RouterProvider>{children}</RouterProvider>
+}
diff --git a/src/app/routing/AppRouter.tsx b/src/app/routing/AppRouter.tsx
new file mode 100644
index 000000000..dbdb4c6ce
--- /dev/null
+++ b/src/app/routing/AppRouter.tsx
@@ -0,0 +1,11 @@
+import { Route, Routes } from "react-router-dom"
+
+import { PostsManagerPage } from "@/pages"
+
+export const AppRouter = () => {
+  return (
+    <Routes>
+      <Route element={<PostsManagerPage />} path="/" />
+    </Routes>
+  )
+}
diff --git a/src/index.tsx b/src/index.tsx
deleted file mode 100644
index 0a93cf54d..000000000
--- a/src/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react"
-import ReactDOM from "react-dom/client"
-import { BrowserRouter as Router } from "react-router-dom"
-
-import App from "@/App"
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <Router>
-      <App />
-    </Router>
-  </React.StrictMode>,
-)
diff --git a/src/main.tsx b/src/main.tsx
index 3df4691ec..38190ced1 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,8 +1,7 @@
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
 
-import App from "@/App.tsx"
-
+import App from "./app/App"
 import "./index.css"
 
 createRoot(document.getElementById("root")!).render(
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 1de562177..962e64fa4 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -36,7 +36,7 @@ import {
   Textarea,
 } from "@/shared/ui"
 
-const PostsManager = () => {
+export const PostsManagerPage = () => {
   const navigate = useNavigate()
   const location = useLocation()
   const queryParams = new URLSearchParams(location.search)
@@ -725,5 +725,3 @@ const PostsManager = () => {
     </Card>
   )
 }
-
-export default PostsManager
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
new file mode 100644
index 000000000..bb013ed3f
--- /dev/null
+++ b/src/pages/index.tsx
@@ -0,0 +1 @@
+export * from "./PostsManagerPage"

From b6b528a53279ea1436df18f91f61556b5f57d7e2 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Wed, 13 Aug 2025 00:38:59 +0900
Subject: [PATCH 29/71] =?UTF-8?q?feat:=20shared/ui/layout=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/App.tsx                      | 13 ++++---------
 src/shared/ui/index.ts               |  2 ++
 src/shared/ui/layouts/MainLayout.tsx | 18 ++++++++++++++++++
 3 files changed, 24 insertions(+), 9 deletions(-)
 create mode 100644 src/shared/ui/layouts/MainLayout.tsx

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 644f130ba..5814fb78c 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,5 +1,4 @@
-import Footer from "@/components/Footer.tsx"
-import Header from "@/components/Header.tsx"
+import { Layout } from "@/shared/ui"
 
 import { AppProvider } from "./providers"
 import { AppRouter } from "./routing/AppRouter"
@@ -7,13 +6,9 @@ import { AppRouter } from "./routing/AppRouter"
 const App = () => {
   return (
     <AppProvider>
-      <div className="flex flex-col min-h-screen">
-        <Header />
-        <main className="flex-grow container mx-auto px-4 py-8">
-          <AppRouter />
-        </main>
-        <Footer />
-      </div>
+      <Layout>
+        <AppRouter />
+      </Layout>
     </AppProvider>
   )
 }
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
index d8bdad34c..8bf6692d0 100644
--- a/src/shared/ui/index.ts
+++ b/src/shared/ui/index.ts
@@ -2,6 +2,8 @@ export * from "./Button"
 export * from "./Card"
 export * from "./Dialog"
 export * from "./Input"
+export * from "./layouts/MainLayout"
 export * from "./Select"
 export * from "./Table"
+
 export * from "./TextArea"
diff --git a/src/shared/ui/layouts/MainLayout.tsx b/src/shared/ui/layouts/MainLayout.tsx
new file mode 100644
index 000000000..45ed25e29
--- /dev/null
+++ b/src/shared/ui/layouts/MainLayout.tsx
@@ -0,0 +1,18 @@
+import { ReactNode } from "react"
+
+import Footer from "@/components/Footer"
+import Header from "@/components/Header"
+
+interface LayoutProps {
+  children: ReactNode
+}
+
+export const Layout = ({ children }: LayoutProps) => {
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Header />
+      <main className="flex-grow container mx-auto px-4 py-8">{children}</main>
+      <Footer />
+    </div>
+  )
+}

From 90cb60e4f1d72a601fa936fcd16c7896386cc91a Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Wed, 13 Aug 2025 00:42:20 +0900
Subject: [PATCH 30/71] =?UTF-8?q?feat:=20queryprovider=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/providers/QueryProvider.tsx | 21 +++++++++++++++++++++
 src/app/providers/index.tsx         |  7 ++++++-
 2 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 src/app/providers/QueryProvider.tsx

diff --git a/src/app/providers/QueryProvider.tsx b/src/app/providers/QueryProvider.tsx
new file mode 100644
index 000000000..8c09b92d5
--- /dev/null
+++ b/src/app/providers/QueryProvider.tsx
@@ -0,0 +1,21 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { ReactNode } from "react"
+
+interface QueryProviderProps {
+  children: ReactNode
+}
+
+const queyrClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 1000 * 60 * 10,
+      refetchOnWindowFocus: false,
+      retry: 1,
+      staleTime: 1000 * 60 * 5,
+    },
+  },
+})
+
+export const QueryProvider = ({ children }: QueryProviderProps) => {
+  return <QueryClientProvider client={queyrClient}>{children}</QueryClientProvider>
+}
diff --git a/src/app/providers/index.tsx b/src/app/providers/index.tsx
index 54dcee1c2..c25e1473b 100644
--- a/src/app/providers/index.tsx
+++ b/src/app/providers/index.tsx
@@ -1,5 +1,6 @@
 import { ReactNode } from "react"
 
+import { QueryProvider } from "./QueryProvider"
 import { RouterProvider } from "./RouterProvider"
 
 interface AppProvidersProps {
@@ -7,5 +8,9 @@ interface AppProvidersProps {
 }
 
 export const AppProvider = ({ children }: AppProvidersProps) => {
-  return <RouterProvider>{children}</RouterProvider>
+  return (
+    <RouterProvider>
+      <QueryProvider>{children}</QueryProvider>
+    </RouterProvider>
+  )
 }

From bc383aad7337a9204e382c4fcdb7d85715769238 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Wed, 13 Aug 2025 23:42:04 +0900
Subject: [PATCH 31/71] =?UTF-8?q?chore:=20msw=20api=20=EC=8A=A4=ED=8E=99?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/test/handlers.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/test/handlers.ts b/src/test/handlers.ts
index 04122acbd..9a00f12d8 100644
--- a/src/test/handlers.ts
+++ b/src/test/handlers.ts
@@ -93,8 +93,9 @@ export const buildHandlers = (db = createDb()) => [
 
   http.delete("/api/posts/:id", ({ params }) => {
     const id = Number(params.id)
+    const deletedPost = db.posts.find((p) => p.id === id)
     db.posts = db.posts.filter((p) => p.id !== id)
-    return HttpResponse.json({ success: true })
+    return HttpResponse.json(deletedPost) // 삭제된 게시물 객체 반환
   }),
 
   // users

From 139a597981245bb6c76554ef4ca520731127c9cf Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Thu, 14 Aug 2025 01:08:18 +0900
Subject: [PATCH 32/71] =?UTF-8?q?feat:=20entities/post=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/post/api/index.ts        | 2 +-
 src/entities/post/config/constants.ts | 2 ++
 src/entities/post/index.ts            | 5 +++--
 src/entities/post/model/types.ts      | 2 +-
 4 files changed, 7 insertions(+), 4 deletions(-)
 create mode 100644 src/entities/post/config/constants.ts

diff --git a/src/entities/post/api/index.ts b/src/entities/post/api/index.ts
index 5a3e05ef6..42157b538 100644
--- a/src/entities/post/api/index.ts
+++ b/src/entities/post/api/index.ts
@@ -8,7 +8,7 @@ export const postApi = {
     return apiClient.post<Post>("/posts/add", post)
   },
   async delete(postId: number) {
-    return apiClient.delete(`/posts/${postId}`)
+    return apiClient.delete<Post>(`/posts/${postId}`)
   },
   async getAll(params: Partial<PostQueryParams>) {
     return apiClient.get<PaginationResponse<Post>>("/posts", { params })
diff --git a/src/entities/post/config/constants.ts b/src/entities/post/config/constants.ts
new file mode 100644
index 000000000..b48c26db2
--- /dev/null
+++ b/src/entities/post/config/constants.ts
@@ -0,0 +1,2 @@
+export const SORT_BY = ["id", "none", "reactions", "title"]
+export const SORT_ORDER = ["asc", "desc"]
diff --git a/src/entities/post/index.ts b/src/entities/post/index.ts
index f31152d45..2177672ca 100644
--- a/src/entities/post/index.ts
+++ b/src/entities/post/index.ts
@@ -1,2 +1,3 @@
-export { postApi, type PostQuery } from "./api/index"
-export type { Post } from "./model/types"
+export * from "./api/index"
+export * from "./config/constants"
+export * from "./model/types"
diff --git a/src/entities/post/model/types.ts b/src/entities/post/model/types.ts
index 4b2d6829a..1402b5dad 100644
--- a/src/entities/post/model/types.ts
+++ b/src/entities/post/model/types.ts
@@ -11,7 +11,7 @@ export interface PostQueryParams {
   limit: number
   search: string
   skip: number
-  sortBy: "id" | "none" | "reactions" | "title"
+  sortBy: "" | "id" | "none" | "reactions" | "title"
   sortOrder: "asc" | "desc"
 }
 

From abc3fb37b1ded679188f60599032958d488de361 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Thu, 14 Aug 2025 01:13:30 +0900
Subject: [PATCH 33/71] =?UTF-8?q?feat:=20feature/post=20=EA=B4=80=EB=A0=A8?=
 =?UTF-8?q?crud,=20=ED=95=84=ED=84=B0=20=EA=B8=B0=EB=8A=A5=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/feature/add-post/api/queries.ts           | 20 ++++++++
 src/feature/add-post/index.ts                 |  1 +
 src/feature/delete-post/api/queries.ts        | 20 ++++++++
 src/feature/delete-post/index.ts              |  1 +
 src/feature/filter-posts/index.ts             |  1 +
 .../filter-posts/model/usePostsFilter.ts      | 48 +++++++++++++++++++
 src/feature/get-posts/api/index.ts            | 16 +++++--
 src/feature/search-posts/api/index.ts         |  8 ----
 src/feature/search-posts/index.ts             |  1 -
 src/feature/update-post/api/queries.ts        | 20 ++++++++
 src/feature/update-post/index.ts              |  1 +
 11 files changed, 123 insertions(+), 14 deletions(-)
 create mode 100644 src/feature/add-post/api/queries.ts
 create mode 100644 src/feature/add-post/index.ts
 create mode 100644 src/feature/delete-post/api/queries.ts
 create mode 100644 src/feature/delete-post/index.ts
 create mode 100644 src/feature/filter-posts/index.ts
 create mode 100644 src/feature/filter-posts/model/usePostsFilter.ts
 delete mode 100644 src/feature/search-posts/api/index.ts
 delete mode 100644 src/feature/search-posts/index.ts
 create mode 100644 src/feature/update-post/api/queries.ts
 create mode 100644 src/feature/update-post/index.ts

diff --git a/src/feature/add-post/api/queries.ts b/src/feature/add-post/api/queries.ts
new file mode 100644
index 000000000..d66ff5753
--- /dev/null
+++ b/src/feature/add-post/api/queries.ts
@@ -0,0 +1,20 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+
+import { Post, postApi } from "@/entities/post"
+import { PaginationResponse } from "@/shared/api"
+
+export const useAddPostMutation = () => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (newPost: Pick<Post, "body" | "title" | "userId">) => postApi.create(newPost),
+    onSuccess: (newPost) => {
+      queryClient.setQueriesData({ queryKey: ["posts-with-users"] }, (prevResponse: PaginationResponse<Post>) => {
+        if (!prevResponse) return prevResponse
+        return {
+          posts: [newPost, ...prevResponse.posts],
+          total: prevResponse.total + 1,
+        }
+      })
+    },
+  })
+}
diff --git a/src/feature/add-post/index.ts b/src/feature/add-post/index.ts
new file mode 100644
index 000000000..c98ebcdc0
--- /dev/null
+++ b/src/feature/add-post/index.ts
@@ -0,0 +1 @@
+export * from "./api/queries"
diff --git a/src/feature/delete-post/api/queries.ts b/src/feature/delete-post/api/queries.ts
new file mode 100644
index 000000000..9059b0433
--- /dev/null
+++ b/src/feature/delete-post/api/queries.ts
@@ -0,0 +1,20 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+
+import { Post, postApi } from "@/entities/post"
+import { PaginationResponse } from "@/shared/api"
+
+export const useDeletePostMutation = () => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: postApi.delete,
+    onSuccess: (deletedPost) => {
+      queryClient.setQueriesData({ queryKey: ["posts-with-users"] }, (prevResponse: PaginationResponse<Post>) => {
+        if (!prevResponse) return prevResponse
+        return {
+          ...prevResponse,
+          posts: prevResponse.posts.filter((post) => post.id !== deletedPost.id),
+        }
+      })
+    },
+  })
+}
diff --git a/src/feature/delete-post/index.ts b/src/feature/delete-post/index.ts
new file mode 100644
index 000000000..c98ebcdc0
--- /dev/null
+++ b/src/feature/delete-post/index.ts
@@ -0,0 +1 @@
+export * from "./api/queries"
diff --git a/src/feature/filter-posts/index.ts b/src/feature/filter-posts/index.ts
new file mode 100644
index 000000000..dcca9db95
--- /dev/null
+++ b/src/feature/filter-posts/index.ts
@@ -0,0 +1 @@
+export * from "./model/usePostsFilter"
diff --git a/src/feature/filter-posts/model/usePostsFilter.ts b/src/feature/filter-posts/model/usePostsFilter.ts
new file mode 100644
index 000000000..55c38e6b1
--- /dev/null
+++ b/src/feature/filter-posts/model/usePostsFilter.ts
@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useMemo, useState } from "react"
+import { useSearchParams } from "react-router-dom"
+
+import { PostQueryParams } from "@/entities/post/model/types"
+
+export const usePostsFilter = () => {
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  const current = useMemo(
+    () =>
+      ({
+        limit: parseInt(searchParams.get("limit") || "10"),
+        search: searchParams.get("search") || "",
+        skip: parseInt(searchParams.get("skip") || "0"),
+        sortBy: searchParams.get("sortBy") || "",
+        sortOrder: searchParams.get("sortOrder") || "asc",
+        tag: searchParams.get("tag") || "",
+      }) as PostQueryParams & { tag: string },
+    [searchParams],
+  )
+
+  const updateQuery = useCallback(
+    (newParams: Partial<PostQueryParams & { tag: string }>) => {
+      const params = new URLSearchParams()
+      Object.entries({ ...current, ...newParams }).forEach(([key, value]) => {
+        if (value && value !== "" && value !== 0) {
+          params.set(key, value.toString())
+        }
+      })
+      setSearchParams(params, { replace: true })
+    },
+    [setSearchParams],
+  )
+
+  const [previous, setPrevious] = useState(current)
+
+  useEffect(() => {
+    setPrevious(current)
+  }, [current])
+
+  const getChangedField = useCallback(() => {
+    return Object.keys(current).filter(
+      (key) => current[key as keyof PostQueryParams] !== previous[key as keyof PostQueryParams],
+    )
+  }, [current, previous])
+
+  return { current, getChangedField, updateQuery }
+}
diff --git a/src/feature/get-posts/api/index.ts b/src/feature/get-posts/api/index.ts
index 959b2c892..d3913fd0e 100644
--- a/src/feature/get-posts/api/index.ts
+++ b/src/feature/get-posts/api/index.ts
@@ -1,10 +1,16 @@
 import { postApi } from "@/entities/post"
 import { PostQueryParams } from "@/entities/post/model/types"
 
-export const getPosts = async (params?: Partial<PostQueryParams>) => {
-  const defaultParams = {
-    limit: 10,
-    skip: 0,
+export const getPosts = async (params: Partial<PostQueryParams & { tag: string }>, changedFields: string[]) => {
+  const { limit, search, skip, sortBy, sortOrder, tag } = params
+
+  if (changedFields.includes("search") && search && search.trim()) {
+    return await postApi.search({ q: search })
+  }
+
+  if (changedFields.includes("tag") && tag && tag !== "all") {
+    return await postApi.getAllByTag(tag)
   }
-  return postApi.getAll({ ...defaultParams, ...params })
+
+  return await postApi.getAll({ limit, skip, sortBy, sortOrder })
 }
diff --git a/src/feature/search-posts/api/index.ts b/src/feature/search-posts/api/index.ts
deleted file mode 100644
index fdcabbe3b..000000000
--- a/src/feature/search-posts/api/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { postApi } from "@/entities/post"
-
-export const searchPostsByKeyword = async (keyword: string) => {
-  const queryParams = {
-    q: keyword,
-  }
-  return postApi.search(queryParams)
-}
diff --git a/src/feature/search-posts/index.ts b/src/feature/search-posts/index.ts
deleted file mode 100644
index e1a716605..000000000
--- a/src/feature/search-posts/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./api"
diff --git a/src/feature/update-post/api/queries.ts b/src/feature/update-post/api/queries.ts
new file mode 100644
index 000000000..851b0aefd
--- /dev/null
+++ b/src/feature/update-post/api/queries.ts
@@ -0,0 +1,20 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+
+import { Post, postApi } from "@/entities/post"
+import { PaginationResponse } from "@/shared/api"
+
+export const useUpdatePostMutation = () => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (updatedPost: Post) => postApi.update(updatedPost),
+    onSuccess: (updatedPost) => {
+      queryClient.setQueriesData({ queryKey: ["posts-with-users"] }, (prevResponse: PaginationResponse<Post>) => {
+        if (!prevResponse) return prevResponse
+        return {
+          ...prevResponse,
+          posts: prevResponse.posts.map((post) => (post.id === updatedPost.id ? updatedPost : post)),
+        }
+      })
+    },
+  })
+}
diff --git a/src/feature/update-post/index.ts b/src/feature/update-post/index.ts
new file mode 100644
index 000000000..c98ebcdc0
--- /dev/null
+++ b/src/feature/update-post/index.ts
@@ -0,0 +1 @@
+export * from "./api/queries"

From da1347c42f4907387d8fb011a4b1f197e45ea024 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Thu, 14 Aug 2025 01:17:19 +0900
Subject: [PATCH 34/71] =?UTF-8?q?feat:=20feature/comment-like=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/feature/comment-like/api/index.ts | 36 ++++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/feature/comment-like/api/index.ts b/src/feature/comment-like/api/index.ts
index 862be83b1..73859127f 100644
--- a/src/feature/comment-like/api/index.ts
+++ b/src/feature/comment-like/api/index.ts
@@ -1,9 +1,37 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+
 import type { Comment } from "@/entities/comment"
 
 import { commentApi } from "@/entities/comment"
 
-export const commentLikeApi = {
-  async incrementLike(comment: Pick<Comment, "id" | "likes">) {
-    return commentApi.updateLike(comment)
-  },
+export const useCommentLikeMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (comment: Pick<Comment, "id" | "likes" | "postId">) => commentApi.updateLike(comment),
+
+    onError: (err, variables, context) => {
+      const typedContext = context as { previousComments?: Comment[] }
+      if (typedContext.previousComments) {
+        queryClient.setQueryData(["comments", variables.postId], typedContext.previousComments)
+      }
+    },
+
+    onMutate: async ({ id, likes, postId }) => {
+      await queryClient.cancelQueries({ queryKey: ["comments", postId] })
+
+      const previousComments = queryClient.getQueryData(["comments", postId])
+
+      queryClient.setQueryData(["coments", postId], (old: Comment[]) =>
+        old?.map((comment) => (comment.id === id ? { ...comment, likes: likes + 1 } : comment)),
+      )
+      return previousComments
+    },
+
+    onSettled: (data, error, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["comments", variables.postId],
+      })
+    },
+  })
 }

From 6738ccf6cbcd4d15caccdf1589c7ce3b52ca924c Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Thu, 14 Aug 2025 01:17:39 +0900
Subject: [PATCH 35/71] =?UTF-8?q?feat:=20feature/get-tags=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/feature/get-tags/api/queries.ts | 10 ++++++++++
 src/feature/get-tags/index.ts       |  1 +
 2 files changed, 11 insertions(+)
 create mode 100644 src/feature/get-tags/api/queries.ts
 create mode 100644 src/feature/get-tags/index.ts

diff --git a/src/feature/get-tags/api/queries.ts b/src/feature/get-tags/api/queries.ts
new file mode 100644
index 000000000..32e5e3450
--- /dev/null
+++ b/src/feature/get-tags/api/queries.ts
@@ -0,0 +1,10 @@
+import { useQuery } from "@tanstack/react-query"
+
+import { TagApi } from "@/entities/tag"
+
+export const useGetTags = () => {
+  return useQuery({
+    queryFn: TagApi.getAll,
+    queryKey: ["tags"],
+  })
+}
diff --git a/src/feature/get-tags/index.ts b/src/feature/get-tags/index.ts
new file mode 100644
index 000000000..c98ebcdc0
--- /dev/null
+++ b/src/feature/get-tags/index.ts
@@ -0,0 +1 @@
+export * from "./api/queries"

From 81d01bc50cd4f9a709794acbcb04dada8f970173 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Thu, 14 Aug 2025 01:18:03 +0900
Subject: [PATCH 36/71] =?UTF-8?q?feat:=20widgets/posts-with-users=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/widgets/posts-with-users/api/queries.ts | 27 +++++++++++++++++++++
 src/widgets/posts-with-users/index.ts       |  1 +
 2 files changed, 28 insertions(+)
 create mode 100644 src/widgets/posts-with-users/api/queries.ts
 create mode 100644 src/widgets/posts-with-users/index.ts

diff --git a/src/widgets/posts-with-users/api/queries.ts b/src/widgets/posts-with-users/api/queries.ts
new file mode 100644
index 000000000..4feccc711
--- /dev/null
+++ b/src/widgets/posts-with-users/api/queries.ts
@@ -0,0 +1,27 @@
+import { useQuery } from "@tanstack/react-query"
+
+import { usePostsFilter } from "@/feature/filter-posts/model/usePostsFilter"
+import { getPosts } from "@/feature/get-posts/api"
+import { getUsersSummary } from "@/feature/get-users-summary"
+
+export const usePostsWithUserSummaryQuery = () => {
+  const { current, getChangedField } = usePostsFilter()
+  const { limit, search, skip, sortBy, sortOrder, tag } = current
+
+  return useQuery({
+    queryFn: async () => {
+      const postsData = await getPosts(current, getChangedField())
+
+      const userData = await getUsersSummary()
+
+      return {
+        posts: postsData.posts.map((post) => ({
+          ...post,
+          author: userData.users.find((user) => user.id === post.userId),
+        })),
+        total: postsData.total,
+      }
+    },
+    queryKey: ["posts-with-users", { limit, search, skip, sortBy, sortOrder, tag }],
+  })
+}
diff --git a/src/widgets/posts-with-users/index.ts b/src/widgets/posts-with-users/index.ts
new file mode 100644
index 000000000..c98ebcdc0
--- /dev/null
+++ b/src/widgets/posts-with-users/index.ts
@@ -0,0 +1 @@
+export * from "./api/queries"

From e43da92a4fe7600c782e72360af083ab7b7f5b4a Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Thu, 14 Aug 2025 01:18:33 +0900
Subject: [PATCH 37/71] =?UTF-8?q?feat:=20PostManagerPage=20=EC=97=90=20fea?=
 =?UTF-8?q?ture,=20widget=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PostsManagerPage.tsx | 272 ++++++++++-----------------------
 1 file changed, 84 insertions(+), 188 deletions(-)

diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 962e64fa4..a4063e2e4 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -1,15 +1,17 @@
 import { Edit2, MessageSquare, Plus, Search, ThumbsDown, ThumbsUp, Trash2 } from "lucide-react"
-import { useEffect, useState } from "react"
-import { useLocation, useNavigate } from "react-router-dom"
+import { useState } from "react"
 
 import { Comment, commentApi } from "@/entities/comment"
-import { Post, postApi } from "@/entities/post"
-import { Tag, TagApi } from "@/entities/tag"
+import { Post, PostQueryParams } from "@/entities/post"
+import { Tag } from "@/entities/tag"
 import { User, userApi } from "@/entities/user"
-import { commentLikeApi } from "@/feature/comment-like"
-import { getPosts } from "@/feature/get-posts"
-import { getUsersSummary, UserSummary } from "@/feature/get-users-summary"
-import { searchPostsByKeyword } from "@/feature/search-posts"
+import { useAddPostMutation } from "@/feature/add-post"
+import { useCommentLikeMutation } from "@/feature/comment-like"
+import { useDeletePostMutation } from "@/feature/delete-post"
+import { usePostsFilter } from "@/feature/filter-posts/model/usePostsFilter"
+import { useGetTags } from "@/feature/get-tags"
+import { UserSummary } from "@/feature/get-users-summary"
+import { useUpdatePostMutation } from "@/feature/update-post"
 import { highlightText } from "@/shared/lib"
 import {
   Button,
@@ -35,27 +37,15 @@ import {
   TableRow,
   Textarea,
 } from "@/shared/ui"
+import { usePostsWithUserSummaryQuery } from "@/widgets/posts-with-users"
 
 export const PostsManagerPage = () => {
-  const navigate = useNavigate()
-  const location = useLocation()
-  const queryParams = new URLSearchParams(location.search)
+  const { current, updateQuery } = usePostsFilter()
 
   interface PostWithUserSummary extends Post {
     author?: UserSummary
   }
 
-  // 상태 관리
-  const [posts, setPosts] = useState<PostWithUserSummary[]>([])
-  const [total, setTotal] = useState<number>(0)
-
-  // 필터 상태
-  const [skip, setSkip] = useState(parseInt(queryParams.get("skip") || "0")) // 건너 뛸 게시물 수
-  const [limit, setLimit] = useState(parseInt(queryParams.get("limit") || "10")) // 페이지당 게시물 수
-  const [searchQuery, setSearchQuery] = useState(queryParams.get("search") || "") // 검색어
-  const [sortBy, setSortBy] = useState(queryParams.get("sortBy") || "") // 정렬 기준
-  const [sortOrder, setSortOrder] = useState(queryParams.get("sortOrder") || "asc") // 오름 차순 또는 내림 차순
-
   // 선택된 게시물 상태
   const [selectedPost, setSelectedPost] = useState<null | Post>(null)
 
@@ -70,15 +60,6 @@ export const PostsManagerPage = () => {
     userId: 1,
   })
 
-  // 로딩 상태
-  const [loading, setLoading] = useState<boolean>(false)
-
-  // 태그 상태
-  const [tags, setTags] = useState<Tag[]>([])
-
-  // 선택된 태그 상태
-  const [selectedTag, setSelectedTag] = useState(queryParams.get("tag") || "")
-
   // 댓글 상태
   const [comments, setComments] = useState<Record<number, Comment[]>>({})
 
@@ -101,125 +82,48 @@ export const PostsManagerPage = () => {
   const [showUserModal, setShowUserModal] = useState(false) // 사용자 정보 모달 상태
   const [selectedUser, setSelectedUser] = useState<null | User>(null) // 선택된 사용자 상태 (모달 정보)
 
-  // URL 업데이트 함수
-  const updateURL = () => {
-    const params = new URLSearchParams()
-    if (skip) params.set("skip", skip.toString())
-    if (limit) params.set("limit", limit.toString())
-    if (searchQuery) params.set("search", searchQuery)
-    if (sortBy) params.set("sortBy", sortBy)
-    if (sortOrder) params.set("sortOrder", sortOrder)
-    if (selectedTag) params.set("tag", selectedTag)
-    navigate(`?${params.toString()}`)
-  }
+  const { data: postsWithUsers, isLoading, refetch } = usePostsWithUserSummaryQuery()
 
-  // 게시물 가져오기
-  const fetchPosts = () => {
-    setLoading(true)
-    let postsData: { posts: Post[]; total: number }
-    let usersData: Array<Pick<User, "id" | "image" | "username">>
-    getPosts({ limit, skip })
-      .then((data: { posts: Post[]; total: number }) => {
-        postsData = data
-        return getUsersSummary() // 사용자 목록
-      })
-      .then((users) => {
-        // 포맷팅
-        usersData = users.users
-        const postsWithUsers = postsData.posts.map((post: Post) => ({
-          ...post,
-          author: usersData.find((user) => user.id === post.userId),
-        }))
-        setPosts(postsWithUsers)
-        setTotal(postsData.total)
-      })
-      .catch((error) => {
-        console.error("게시물 가져오기 오류:", error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }
-
-  // 태그 가져오기
-  const fetchTags = async () => {
-    try {
-      const data: Tag[] = await TagApi.getAll()
-      setTags(data)
-    } catch (error) {
-      console.error("태그 가져오기 오류:", error)
-    }
-  }
+  const { data: tagsData } = useGetTags()
 
   // 게시물 검색
   const searchPosts = async () => {
-    if (!searchQuery) {
-      fetchPosts()
-      return
-    }
-    setLoading(true)
-    try {
-      const data: { posts: Post[]; total: number } = await searchPostsByKeyword(searchQuery)
-      setPosts(data.posts)
-      setTotal(data.total)
-    } catch (error) {
-      console.error("게시물 검색 오류:", error)
-    }
-    setLoading(false)
-  }
-
-  // 태그별 게시물 가져오기
-  const fetchPostsByTag = async (tag: string) => {
-    if (!tag || tag === "all") {
-      fetchPosts()
+    if (!current.search) {
+      refetch()
       return
     }
-    setLoading(true)
-    try {
-      const [postsData, usersData] = await Promise.all([postApi.getAllByTag(tag), getUsersSummary()])
-
-      const postsWithUsers = postsData.posts.map((post: Post) => ({
-        ...post,
-        author: usersData.users.find((user) => user.id === post.userId),
-      }))
-
-      setPosts(postsWithUsers)
-      setTotal(postsData.total)
-    } catch (error) {
-      console.error("태그별 게시물 가져오기 오류:", error)
-    }
-    setLoading(false)
   }
-
+  const { mutate: addPostMuate } = useAddPostMutation()
   // 게시물 추가
+
   const addPost = async () => {
     try {
-      const data = await postApi.create(newPost)
-      setPosts([data, ...posts])
+      addPostMuate(newPost)
       setShowAddDialog(false)
-      setNewPost({ body: "", title: "", userId: 1 })
     } catch (error) {
       console.error("게시물 추가 오류:", error)
     }
   }
 
+  const { mutate: updatePostMutate } = useUpdatePostMutation()
+
   // 게시물 업데이트
   const updatePost = async () => {
     if (!selectedPost) return
     try {
-      const data = await postApi.update(selectedPost)
-      setPosts(posts.map((post) => (post.id === data.id ? data : post)))
+      updatePostMutate(selectedPost)
       setShowEditDialog(false)
     } catch (error) {
       console.error("게시물 업데이트 오류:", error)
     }
   }
 
+  const { mutate: deletePostMutate } = useDeletePostMutation()
+
   // 게시물 삭제
   const deletePost = async (id: number) => {
     try {
-      await postApi.delete(id)
-      setPosts(posts.filter((post) => post.id !== id))
+      await deletePostMutate(id)
     } catch (error) {
       console.error("게시물 삭제 오류:", error)
     }
@@ -278,16 +182,17 @@ export const PostsManagerPage = () => {
       console.error("댓글 삭제 오류:", error)
     }
   }
-
+  const commentLikes = useCommentLikeMutation()
   // 댓글 좋아요
   const likeComment = async (id: number, postId: number) => {
     try {
       const currentLikes = comments[postId]?.find((c) => c.id === id)?.likes ?? 0
-      const data: Comment = await commentLikeApi.incrementLike({ id, likes: currentLikes })
+      commentLikes.mutate({ id, likes: currentLikes, postId })
+
       setComments((prev) => ({
         ...prev,
         [postId]: (prev[postId] || []).map((comment) =>
-          comment.id === data.id ? { ...data, likes: comment.likes + 1 } : comment,
+          comment.id === commentLikes.data?.id ? { ...commentLikes.data, likes: comment.likes + 1 } : comment,
         ),
       }))
     } catch (error) {
@@ -313,29 +218,6 @@ export const PostsManagerPage = () => {
     }
   }
 
-  useEffect(() => {
-    fetchTags()
-  }, [])
-
-  useEffect(() => {
-    if (selectedTag) {
-      fetchPostsByTag(selectedTag)
-    } else {
-      fetchPosts()
-    }
-    updateURL()
-  }, [skip, limit, sortBy, sortOrder, selectedTag])
-
-  useEffect(() => {
-    const params = new URLSearchParams(location.search)
-    setSkip(parseInt(params.get("skip") || "0"))
-    setLimit(parseInt(params.get("limit") || "10"))
-    setSearchQuery(params.get("search") || "")
-    setSortBy(params.get("sortBy") || "")
-    setSortOrder(params.get("sortOrder") || "asc")
-    setSelectedTag(params.get("tag") || "")
-  }, [location.search])
-
   // 게시물 테이블 렌더링
   const renderPostTable = () => (
     <Table>
@@ -349,25 +231,24 @@ export const PostsManagerPage = () => {
         </TableRow>
       </TableHeader>
       <TableBody>
-        {posts.map((post: PostWithUserSummary) => (
+        {postsWithUsers?.posts.map((post: PostWithUserSummary) => (
           <TableRow key={post.id}>
             <TableCell>{post.id}</TableCell>
             <TableCell>
               <div className="space-y-1">
-                <div>{highlightText(post.title, searchQuery)}</div>
+                <div>{highlightText(post.title, current.search)}</div>
 
                 <div className="flex flex-wrap gap-1">
                   {post.tags?.map((tag: string) => (
                     <span
                       className={`px-1 text-[9px] font-semibold rounded-[4px] cursor-pointer ${
-                        selectedTag === tag
+                        current.tag === tag
                           ? "text-white bg-blue-500 hover:bg-blue-600"
                           : "text-blue-800 bg-blue-100 hover:bg-blue-200"
                       }`}
                       key={tag}
                       onClick={() => {
-                        setSelectedTag(tag)
-                        updateURL()
+                        updateQuery({ tag })
                       }}
                     >
                       {tag}
@@ -441,7 +322,7 @@ export const PostsManagerPage = () => {
           <div className="flex items-center justify-between text-sm border-b pb-1" key={comment.id}>
             <div className="flex items-center space-x-2 overflow-hidden">
               <span className="font-medium truncate">{comment.user.username}:</span>
-              <span className="truncate">{highlightText(comment.body, searchQuery)}</span>
+              <span className="truncate">{highlightText(comment.body, current.search)}</span>
             </div>
             <div className="flex items-center space-x-1">
               <Button
@@ -500,34 +381,35 @@ export const PostsManagerPage = () => {
                 <Input
                   aria-label="게시물 검색"
                   className="pl-8"
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateQuery({ search: e.target.value })}
                   onKeyPress={(e: React.KeyboardEvent<HTMLInputElement>) => e.key === "Enter" && searchPosts()}
                   placeholder="게시물 검색..."
-                  value={searchQuery}
+                  value={current.search}
                 />
               </div>
             </div>
             <Select
               onValueChange={(value) => {
-                setSelectedTag(value)
-                fetchPostsByTag(value)
-                updateURL()
+                updateQuery({ tag: value })
               }}
-              value={selectedTag}
+              value={current.tag}
             >
               <SelectTrigger className="w-[180px]">
                 <SelectValue placeholder="태그 선택" />
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="all">모든 태그</SelectItem>
-                {tags.map((tag: Tag) => (
+                {tagsData?.map((tag: Tag) => (
                   <SelectItem key={tag.url} value={tag.slug}>
                     {tag.slug}
                   </SelectItem>
                 ))}
               </SelectContent>
             </Select>
-            <Select onValueChange={setSortBy} value={sortBy}>
+            <Select
+              onValueChange={(value: string) => updateQuery({ sortBy: value as PostQueryParams["sortBy"] })}
+              value={current.sortBy}
+            >
               <SelectTrigger className="w-[180px]">
                 <SelectValue placeholder="정렬 기준" />
               </SelectTrigger>
@@ -538,7 +420,10 @@ export const PostsManagerPage = () => {
                 <SelectItem value="reactions">반응</SelectItem>
               </SelectContent>
             </Select>
-            <Select onValueChange={setSortOrder} value={sortOrder}>
+            <Select
+              onValueChange={(value) => updateQuery({ sortOrder: value as PostQueryParams["sortOrder"] })}
+              value={current.sortOrder}
+            >
               <SelectTrigger className="w-[180px]">
                 <SelectValue placeholder="정렬 순서" />
               </SelectTrigger>
@@ -550,33 +435,44 @@ export const PostsManagerPage = () => {
           </div>
 
           {/* 게시물 테이블 */}
-          {loading ? <div className="flex justify-center p-4">로딩 중...</div> : renderPostTable()}
+          {isLoading ? <div className="flex justify-center p-4">로딩 중...</div> : renderPostTable()}
 
           {/* 페이지네이션 */}
-          <div className="flex justify-between items-center">
-            <div className="flex items-center gap-2">
-              <span>표시</span>
-              <Select onValueChange={(value) => setLimit(Number(value))} value={limit.toString()}>
-                <SelectTrigger className="w-[180px]">
-                  <SelectValue placeholder="10" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="10">10</SelectItem>
-                  <SelectItem value="20">20</SelectItem>
-                  <SelectItem value="30">30</SelectItem>
-                </SelectContent>
-              </Select>
-              <span>항목</span>
-            </div>
-            <div className="flex gap-2">
-              <Button disabled={skip === 0} onClick={() => setSkip(Math.max(0, skip - limit))}>
-                이전
-              </Button>
-              <Button disabled={skip + limit >= total} onClick={() => setSkip(skip + limit)}>
-                다음
-              </Button>
+          {postsWithUsers && (
+            <div className="flex justify-between items-center">
+              <div className="flex items-center gap-2">
+                <span>표시</span>
+                <Select
+                  onValueChange={(value) => updateQuery({ limit: Number(value) })}
+                  value={current.limit.toString()}
+                >
+                  <SelectTrigger className="w-[180px]">
+                    <SelectValue placeholder="10" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="10">10</SelectItem>
+                    <SelectItem value="20">20</SelectItem>
+                    <SelectItem value="30">30</SelectItem>
+                  </SelectContent>
+                </Select>
+                <span>항목</span>
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  disabled={current.skip === 0}
+                  onClick={() => updateQuery({ skip: Math.max(0, current.skip - current.limit) })}
+                >
+                  이전
+                </Button>
+                <Button
+                  disabled={current.skip + current.limit >= postsWithUsers.total}
+                  onClick={() => updateQuery({ skip: current.skip + current.limit })}
+                >
+                  다음
+                </Button>
+              </div>
             </div>
-          </div>
+          )}
         </div>
       </CardContent>
 
@@ -680,10 +576,10 @@ export const PostsManagerPage = () => {
       <Dialog onOpenChange={setShowPostDetailDialog} open={showPostDetailDialog}>
         <DialogContent className="max-w-3xl">
           <DialogHeader>
-            <DialogTitle>{highlightText(selectedPost?.title, searchQuery)}</DialogTitle>
+            <DialogTitle>{highlightText(selectedPost?.title, current.search)}</DialogTitle>
           </DialogHeader>
           <div className="space-y-4">
-            <p>{highlightText(selectedPost?.body, searchQuery)}</p>
+            <p>{highlightText(selectedPost?.body, current.search)}</p>
             {selectedPost && renderComments(selectedPost.id)}
           </div>
         </DialogContent>

From c020b7ffa93a59f6846d99c562b25a8523d4a559 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Thu, 14 Aug 2025 19:31:40 +0900
Subject: [PATCH 38/71] =?UTF-8?q?fix:=20=EC=A0=95=EB=A0=AC=20=ED=95=84?=
 =?UTF-8?q?=EB=93=9C=EB=AA=85=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/post/model/types.ts                 | 2 +-
 src/feature/filter-posts/model/usePostsFilter.ts | 2 +-
 src/feature/get-posts/api/index.ts               | 4 ++--
 src/widgets/posts-with-users/api/queries.ts      | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/entities/post/model/types.ts b/src/entities/post/model/types.ts
index 1402b5dad..0befcb12b 100644
--- a/src/entities/post/model/types.ts
+++ b/src/entities/post/model/types.ts
@@ -9,10 +9,10 @@ export interface Post {
 
 export interface PostQueryParams {
   limit: number
+  order: "asc" | "desc"
   search: string
   skip: number
   sortBy: "" | "id" | "none" | "reactions" | "title"
-  sortOrder: "asc" | "desc"
 }
 
 export interface SearchQueryParams {
diff --git a/src/feature/filter-posts/model/usePostsFilter.ts b/src/feature/filter-posts/model/usePostsFilter.ts
index 55c38e6b1..e307f8717 100644
--- a/src/feature/filter-posts/model/usePostsFilter.ts
+++ b/src/feature/filter-posts/model/usePostsFilter.ts
@@ -10,10 +10,10 @@ export const usePostsFilter = () => {
     () =>
       ({
         limit: parseInt(searchParams.get("limit") || "10"),
+        order: searchParams.get("order") || "asc",
         search: searchParams.get("search") || "",
         skip: parseInt(searchParams.get("skip") || "0"),
         sortBy: searchParams.get("sortBy") || "",
-        sortOrder: searchParams.get("sortOrder") || "asc",
         tag: searchParams.get("tag") || "",
       }) as PostQueryParams & { tag: string },
     [searchParams],
diff --git a/src/feature/get-posts/api/index.ts b/src/feature/get-posts/api/index.ts
index d3913fd0e..e72bc9e01 100644
--- a/src/feature/get-posts/api/index.ts
+++ b/src/feature/get-posts/api/index.ts
@@ -2,7 +2,7 @@ import { postApi } from "@/entities/post"
 import { PostQueryParams } from "@/entities/post/model/types"
 
 export const getPosts = async (params: Partial<PostQueryParams & { tag: string }>, changedFields: string[]) => {
-  const { limit, search, skip, sortBy, sortOrder, tag } = params
+  const { limit, order, search, skip, sortBy, tag } = params
 
   if (changedFields.includes("search") && search && search.trim()) {
     return await postApi.search({ q: search })
@@ -12,5 +12,5 @@ export const getPosts = async (params: Partial<PostQueryParams & { tag: string }
     return await postApi.getAllByTag(tag)
   }
 
-  return await postApi.getAll({ limit, skip, sortBy, sortOrder })
+  return await postApi.getAll({ limit, order, skip, sortBy })
 }
diff --git a/src/widgets/posts-with-users/api/queries.ts b/src/widgets/posts-with-users/api/queries.ts
index 4feccc711..56066af47 100644
--- a/src/widgets/posts-with-users/api/queries.ts
+++ b/src/widgets/posts-with-users/api/queries.ts
@@ -6,7 +6,7 @@ import { getUsersSummary } from "@/feature/get-users-summary"
 
 export const usePostsWithUserSummaryQuery = () => {
   const { current, getChangedField } = usePostsFilter()
-  const { limit, search, skip, sortBy, sortOrder, tag } = current
+  const { limit, order, search, skip, sortBy, tag } = current
 
   return useQuery({
     queryFn: async () => {
@@ -22,6 +22,6 @@ export const usePostsWithUserSummaryQuery = () => {
         total: postsData.total,
       }
     },
-    queryKey: ["posts-with-users", { limit, search, skip, sortBy, sortOrder, tag }],
+    queryKey: ["posts-with-users", { limit, order, search, skip, sortBy, tag }],
   })
 }

From f47266715e39ebec3b968f7d9103780b20f1f4aa Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 01:03:55 +0900
Subject: [PATCH 39/71] =?UTF-8?q?feat:=20posts=20types=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/post/api/index.ts         | 9 ++++-----
 src/entities/post/model/types.ts       | 2 ++
 src/feature/add-post/api/queries.ts    | 5 ++---
 src/feature/delete-post/api/queries.ts | 5 ++---
 src/feature/update-post/api/queries.ts | 5 ++---
 src/shared/api/index.ts                | 1 -
 src/shared/api/types.ts                | 1 -
 7 files changed, 12 insertions(+), 16 deletions(-)
 delete mode 100644 src/shared/api/types.ts

diff --git a/src/entities/post/api/index.ts b/src/entities/post/api/index.ts
index 42157b538..928109016 100644
--- a/src/entities/post/api/index.ts
+++ b/src/entities/post/api/index.ts
@@ -1,6 +1,5 @@
-import type { Post, PostQueryParams, SearchQueryParams } from "@/entities/post/model/types"
+import type { Post, PostQueryParams, PostsResponse, SearchQueryParams } from "@/entities/post/model/types"
 
-import { PaginationResponse } from "@/shared/api"
 import { apiClient } from "@/shared/api/apiClient"
 
 export const postApi = {
@@ -11,13 +10,13 @@ export const postApi = {
     return apiClient.delete<Post>(`/posts/${postId}`)
   },
   async getAll(params: Partial<PostQueryParams>) {
-    return apiClient.get<PaginationResponse<Post>>("/posts", { params })
+    return apiClient.get<PostsResponse>("/posts", { params })
   },
   async getAllByTag(tag: string) {
-    return apiClient.get<PaginationResponse<Post>>(`/posts/tag/${tag}`)
+    return apiClient.get<PostsResponse>(`/posts/tag/${tag}`)
   },
   async search(params: SearchQueryParams) {
-    return apiClient.get<PaginationResponse<Post>>("/posts/search", { params })
+    return apiClient.get<PostsResponse>("/posts/search", { params })
   },
   async update(post: Post) {
     return apiClient.put<Post>(`/posts/${post.id}`, post)
diff --git a/src/entities/post/model/types.ts b/src/entities/post/model/types.ts
index 0befcb12b..2b366804b 100644
--- a/src/entities/post/model/types.ts
+++ b/src/entities/post/model/types.ts
@@ -15,6 +15,8 @@ export interface PostQueryParams {
   sortBy: "" | "id" | "none" | "reactions" | "title"
 }
 
+export type PostsResponse = { limit: number; posts: Post[]; skip: number; total: number }
+
 export interface SearchQueryParams {
   q?: string
 }
diff --git a/src/feature/add-post/api/queries.ts b/src/feature/add-post/api/queries.ts
index d66ff5753..1ceb0e790 100644
--- a/src/feature/add-post/api/queries.ts
+++ b/src/feature/add-post/api/queries.ts
@@ -1,14 +1,13 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 
-import { Post, postApi } from "@/entities/post"
-import { PaginationResponse } from "@/shared/api"
+import { Post, postApi, PostsResponse } from "@/entities/post"
 
 export const useAddPostMutation = () => {
   const queryClient = useQueryClient()
   return useMutation({
     mutationFn: (newPost: Pick<Post, "body" | "title" | "userId">) => postApi.create(newPost),
     onSuccess: (newPost) => {
-      queryClient.setQueriesData({ queryKey: ["posts-with-users"] }, (prevResponse: PaginationResponse<Post>) => {
+      queryClient.setQueriesData({ queryKey: ["posts-with-users"] }, (prevResponse: PostsResponse) => {
         if (!prevResponse) return prevResponse
         return {
           posts: [newPost, ...prevResponse.posts],
diff --git a/src/feature/delete-post/api/queries.ts b/src/feature/delete-post/api/queries.ts
index 9059b0433..ac38e3d20 100644
--- a/src/feature/delete-post/api/queries.ts
+++ b/src/feature/delete-post/api/queries.ts
@@ -1,14 +1,13 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 
-import { Post, postApi } from "@/entities/post"
-import { PaginationResponse } from "@/shared/api"
+import { postApi, PostsResponse } from "@/entities/post"
 
 export const useDeletePostMutation = () => {
   const queryClient = useQueryClient()
   return useMutation({
     mutationFn: postApi.delete,
     onSuccess: (deletedPost) => {
-      queryClient.setQueriesData({ queryKey: ["posts-with-users"] }, (prevResponse: PaginationResponse<Post>) => {
+      queryClient.setQueriesData({ queryKey: ["posts-with-users"] }, (prevResponse: PostsResponse): PostsResponse => {
         if (!prevResponse) return prevResponse
         return {
           ...prevResponse,
diff --git a/src/feature/update-post/api/queries.ts b/src/feature/update-post/api/queries.ts
index 851b0aefd..90720838c 100644
--- a/src/feature/update-post/api/queries.ts
+++ b/src/feature/update-post/api/queries.ts
@@ -1,14 +1,13 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 
-import { Post, postApi } from "@/entities/post"
-import { PaginationResponse } from "@/shared/api"
+import { Post, postApi, PostsResponse } from "@/entities/post"
 
 export const useUpdatePostMutation = () => {
   const queryClient = useQueryClient()
   return useMutation({
     mutationFn: (updatedPost: Post) => postApi.update(updatedPost),
     onSuccess: (updatedPost) => {
-      queryClient.setQueriesData({ queryKey: ["posts-with-users"] }, (prevResponse: PaginationResponse<Post>) => {
+      queryClient.setQueriesData({ queryKey: ["posts-with-users"] }, (prevResponse: PostsResponse) => {
         if (!prevResponse) return prevResponse
         return {
           ...prevResponse,
diff --git a/src/shared/api/index.ts b/src/shared/api/index.ts
index 800ee8558..71e703fc4 100644
--- a/src/shared/api/index.ts
+++ b/src/shared/api/index.ts
@@ -1,2 +1 @@
 export * from "./apiClient"
-export * from "./types"
diff --git a/src/shared/api/types.ts b/src/shared/api/types.ts
deleted file mode 100644
index 113e17bdd..000000000
--- a/src/shared/api/types.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type PaginationResponse<DATA> = { posts: DATA[]; total: number }

From 89262bdeb2a6910dac55c9da12c124931a2e97ae Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 01:04:32 +0900
Subject: [PATCH 40/71] =?UTF-8?q?feat:=20commen=20types=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/comment/api/index.ts   | 14 +++++++-------
 src/entities/comment/model/types.ts | 20 +++++++++++++++++++-
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/entities/comment/api/index.ts b/src/entities/comment/api/index.ts
index ded30ee8f..1d8df3d64 100644
--- a/src/entities/comment/api/index.ts
+++ b/src/entities/comment/api/index.ts
@@ -1,21 +1,21 @@
 import { apiClient } from "@/shared/api/apiClient"
 
-import { Comment, CommentRequest } from "../model/types"
+import { AddCommentResponse, Comment, CommentRequest, CommentResponse, DeleteCommentResponse } from "../model/types"
 
 export const commentApi = {
   async create(newComment: CommentRequest) {
-    return apiClient.post<Comment>("/comments/add", newComment)
+    return apiClient.post<AddCommentResponse>("/comments/add", newComment)
   },
   async delete(commentId: number) {
-    return apiClient.delete(`/comments/${commentId}`)
+    return apiClient.delete<DeleteCommentResponse>(`/comments/${commentId}`)
   },
   async getByPostId(postId: number) {
-    return apiClient.get<{ comments: Comment[] }>(`/comments/post/${postId}`)
+    return apiClient.get<CommentResponse>(`/comments/post/${postId}`)
   },
-  async update(comment: Pick<Comment, "body" | "id">) {
-    return apiClient.put<Comment>(`/comments/${comment.id}`, { body: comment.body })
+  async update(comment: Comment) {
+    return apiClient.put<Comment>(`/comments/${comment.id}`, comment)
   },
-  async updateLike(comment: Pick<Comment, "id" | "likes">) {
+  async updateLike(comment: Comment) {
     return apiClient.patch<Comment>(`/comments/${comment.id}`, { likes: comment.likes })
   },
 }
diff --git a/src/entities/comment/model/types.ts b/src/entities/comment/model/types.ts
index 6bcc82240..674a2dbb2 100644
--- a/src/entities/comment/model/types.ts
+++ b/src/entities/comment/model/types.ts
@@ -1,7 +1,25 @@
-export type Comment = { body: string; id: number; likes: number; postId: number; user: { username: string } }
+export type AddCommentResponse = Omit<Comment, "likes">
+
+export type Comment = {
+  body: string
+  id: number
+  likes: number
+  postId: number
+  user: {
+    fullName: string
+    id: number
+    username: string
+  }
+}
 
 export type CommentRequest = {
   body: string
   postId: null | number
   userId: number
 }
+
+export type CommentResponse = { comments: Comment[]; limit: number; skip: number; total: number }
+
+export type DeleteCommentResponse = Comment & {
+  isDeleted: boolean
+}

From cee9e8208cf7e34afb454c949ae036d1e610d3ab Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 01:08:35 +0900
Subject: [PATCH 41/71] =?UTF-8?q?feat:=20feature/comment=20=EA=B4=80?=
 =?UTF-8?q?=EB=A0=A8=20curd=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/feature/add-comment/api/queries.ts    | 25 ++++++++++++++++++
 src/feature/add-comment/index.ts          |  1 +
 src/feature/comment-like/api/index.ts     | 32 ++++++++++++++---------
 src/feature/delete-comment/api/queries.ts | 23 ++++++++++++++++
 src/feature/delete-comment/index.ts       |  1 +
 src/feature/get-comments/api/queries.ts   | 11 ++++++++
 src/feature/get-comments/index.ts         |  1 +
 src/feature/update-comment/api/queries.ts | 25 ++++++++++++++++++
 src/feature/update-comment/index.ts       |  1 +
 9 files changed, 108 insertions(+), 12 deletions(-)
 create mode 100644 src/feature/add-comment/api/queries.ts
 create mode 100644 src/feature/add-comment/index.ts
 create mode 100644 src/feature/delete-comment/api/queries.ts
 create mode 100644 src/feature/delete-comment/index.ts
 create mode 100644 src/feature/get-comments/api/queries.ts
 create mode 100644 src/feature/get-comments/index.ts
 create mode 100644 src/feature/update-comment/api/queries.ts
 create mode 100644 src/feature/update-comment/index.ts

diff --git a/src/feature/add-comment/api/queries.ts b/src/feature/add-comment/api/queries.ts
new file mode 100644
index 000000000..701085b7c
--- /dev/null
+++ b/src/feature/add-comment/api/queries.ts
@@ -0,0 +1,25 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+
+import { commentApi } from "@/entities/comment"
+import { CommentRequest, CommentResponse } from "@/entities/comment/model/types"
+
+export const useAddCommentMutation = () => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (newComment: CommentRequest) => commentApi.create(newComment),
+    onSuccess: (newComment) => {
+      queryClient.setQueriesData(
+        { queryKey: ["comments", newComment.postId] },
+        (prevResponse: CommentResponse): CommentResponse => {
+          if (!prevResponse) return prevResponse
+
+          return {
+            ...prevResponse,
+            comments: [...prevResponse.comments, { ...newComment, likes: 0 }],
+            total: prevResponse.total + 1,
+          }
+        },
+      )
+    },
+  })
+}
diff --git a/src/feature/add-comment/index.ts b/src/feature/add-comment/index.ts
new file mode 100644
index 000000000..c98ebcdc0
--- /dev/null
+++ b/src/feature/add-comment/index.ts
@@ -0,0 +1 @@
+export * from "./api/queries"
diff --git a/src/feature/comment-like/api/index.ts b/src/feature/comment-like/api/index.ts
index 73859127f..569854423 100644
--- a/src/feature/comment-like/api/index.ts
+++ b/src/feature/comment-like/api/index.ts
@@ -3,12 +3,13 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"
 import type { Comment } from "@/entities/comment"
 
 import { commentApi } from "@/entities/comment"
+import { CommentResponse } from "@/entities/comment/model/types"
 
 export const useCommentLikeMutation = () => {
   const queryClient = useQueryClient()
 
   return useMutation({
-    mutationFn: (comment: Pick<Comment, "id" | "likes" | "postId">) => commentApi.updateLike(comment),
+    mutationFn: (comment: Comment) => commentApi.updateLike(comment),
 
     onError: (err, variables, context) => {
       const typedContext = context as { previousComments?: Comment[] }
@@ -17,21 +18,28 @@ export const useCommentLikeMutation = () => {
       }
     },
 
-    onMutate: async ({ id, likes, postId }) => {
-      await queryClient.cancelQueries({ queryKey: ["comments", postId] })
+    onMutate: async (comment) => {
+      await queryClient.cancelQueries({ queryKey: ["comments", comment.postId] })
 
-      const previousComments = queryClient.getQueryData(["comments", postId])
+      const previousComments = queryClient.getQueryData(["comments", comment.postId])
 
-      queryClient.setQueryData(["coments", postId], (old: Comment[]) =>
-        old?.map((comment) => (comment.id === id ? { ...comment, likes: likes + 1 } : comment)),
-      )
+      queryClient.setQueryData(["comments", comment.postId], (prevResponse: CommentResponse): CommentResponse => {
+        if (!prevResponse) return prevResponse
+        return {
+          ...prevResponse,
+          comments: prevResponse.comments.map((prevComment) =>
+            prevComment.id === comment.id ? { ...prevComment, likes: comment.likes + 1 } : prevComment,
+          ),
+        }
+      })
       return previousComments
     },
 
-    onSettled: (data, error, variables) => {
-      queryClient.invalidateQueries({
-        queryKey: ["comments", variables.postId],
-      })
-    },
+    // 리페치 할경우 다시 롤백
+    // onSettled: (data, error, variables) => {
+    //   queryClient.invalidateQueries({
+    //     queryKey: ["comments", variables.postId],
+    //   })
+    // },
   })
 }
diff --git a/src/feature/delete-comment/api/queries.ts b/src/feature/delete-comment/api/queries.ts
new file mode 100644
index 000000000..0579d2a48
--- /dev/null
+++ b/src/feature/delete-comment/api/queries.ts
@@ -0,0 +1,23 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+
+import { commentApi } from "@/entities/comment"
+import { CommentResponse } from "@/entities/comment/model/types"
+
+export const useDeleteCommentMutation = () => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: commentApi.delete,
+    onSuccess: (deletedComment) => {
+      queryClient.setQueriesData(
+        { queryKey: ["comments", deletedComment.postId] },
+        (prevResponse: CommentResponse): CommentResponse => {
+          if (!prevResponse) return prevResponse
+          return {
+            ...prevResponse,
+            comments: prevResponse.comments.filter((post) => post.id !== deletedComment.id),
+          }
+        },
+      )
+    },
+  })
+}
diff --git a/src/feature/delete-comment/index.ts b/src/feature/delete-comment/index.ts
new file mode 100644
index 000000000..c98ebcdc0
--- /dev/null
+++ b/src/feature/delete-comment/index.ts
@@ -0,0 +1 @@
+export * from "./api/queries"
diff --git a/src/feature/get-comments/api/queries.ts b/src/feature/get-comments/api/queries.ts
new file mode 100644
index 000000000..7f3268ee0
--- /dev/null
+++ b/src/feature/get-comments/api/queries.ts
@@ -0,0 +1,11 @@
+import { useQuery } from "@tanstack/react-query"
+
+import { commentApi } from "@/entities/comment"
+
+export const useGetComments = (postId?: number) => {
+  return useQuery({
+    enabled: !!postId,
+    queryFn: () => commentApi.getByPostId(postId!),
+    queryKey: ["comments", postId],
+  })
+}
diff --git a/src/feature/get-comments/index.ts b/src/feature/get-comments/index.ts
new file mode 100644
index 000000000..c98ebcdc0
--- /dev/null
+++ b/src/feature/get-comments/index.ts
@@ -0,0 +1 @@
+export * from "./api/queries"
diff --git a/src/feature/update-comment/api/queries.ts b/src/feature/update-comment/api/queries.ts
new file mode 100644
index 000000000..efefed69c
--- /dev/null
+++ b/src/feature/update-comment/api/queries.ts
@@ -0,0 +1,25 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+
+import { commentApi } from "@/entities/comment"
+import { Comment, CommentResponse } from "@/entities/comment/model/types"
+
+export const useUpdateCommentMutation = () => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (updatedComment: Comment) => commentApi.update(updatedComment),
+    onSuccess: (updatedComment) => {
+      queryClient.setQueriesData(
+        { queryKey: ["comments", updatedComment.postId] },
+        (prevResponse: CommentResponse): CommentResponse => {
+          if (!prevResponse) return prevResponse
+          return {
+            ...prevResponse,
+            comments: prevResponse.comments.map((comment) =>
+              comment.id === updatedComment.id ? updatedComment : comment,
+            ),
+          }
+        },
+      )
+    },
+  })
+}
diff --git a/src/feature/update-comment/index.ts b/src/feature/update-comment/index.ts
new file mode 100644
index 000000000..c98ebcdc0
--- /dev/null
+++ b/src/feature/update-comment/index.ts
@@ -0,0 +1 @@
+export * from "./api/queries"

From 09e6bc5f2be8f05b6c540d94077e3ef66a8a21bf Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 01:09:14 +0900
Subject: [PATCH 42/71] =?UTF-8?q?feat:=20post=20manager=20page=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20comment=20=EB=B6=80=EB=B6=84=20=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PostsManagerPage.tsx | 100 +++++++++++----------------------
 1 file changed, 33 insertions(+), 67 deletions(-)

diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index a4063e2e4..5a0a0b951 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -1,16 +1,20 @@
 import { Edit2, MessageSquare, Plus, Search, ThumbsDown, ThumbsUp, Trash2 } from "lucide-react"
 import { useState } from "react"
 
-import { Comment, commentApi } from "@/entities/comment"
+import { Comment } from "@/entities/comment"
 import { Post, PostQueryParams } from "@/entities/post"
 import { Tag } from "@/entities/tag"
 import { User, userApi } from "@/entities/user"
+import { useAddCommentMutation } from "@/feature/add-comment"
 import { useAddPostMutation } from "@/feature/add-post"
 import { useCommentLikeMutation } from "@/feature/comment-like"
+import { useDeleteCommentMutation } from "@/feature/delete-comment"
 import { useDeletePostMutation } from "@/feature/delete-post"
 import { usePostsFilter } from "@/feature/filter-posts/model/usePostsFilter"
+import { useGetComments } from "@/feature/get-comments"
 import { useGetTags } from "@/feature/get-tags"
 import { UserSummary } from "@/feature/get-users-summary"
+import { useUpdateCommentMutation } from "@/feature/update-comment"
 import { useUpdatePostMutation } from "@/feature/update-post"
 import { highlightText } from "@/shared/lib"
 import {
@@ -47,7 +51,7 @@ export const PostsManagerPage = () => {
   }
 
   // 선택된 게시물 상태
-  const [selectedPost, setSelectedPost] = useState<null | Post>(null)
+  const [selectedPost, setSelectedPost] = useState<Post>()
 
   // 모달 상태
   const [showAddDialog, setShowAddDialog] = useState(false)
@@ -60,9 +64,6 @@ export const PostsManagerPage = () => {
     userId: 1,
   })
 
-  // 댓글 상태
-  const [comments, setComments] = useState<Record<number, Comment[]>>({})
-
   // 선택된 댓글 상태
   const [selectedComment, setSelectedComment] = useState<Comment | null>(null)
 
@@ -130,71 +131,41 @@ export const PostsManagerPage = () => {
   }
 
   // 댓글 가져오기
-  const fetchComments = async (postId: number) => {
-    if (comments[postId]) return // 이미 불러온 댓글이 있으면 다시 불러오지 않음
-    try {
-      const data = await commentApi.getByPostId(postId)
-      setComments((prev) => ({ ...prev, [postId]: data.comments }))
-    } catch (error) {
-      console.error("댓글 가져오기 오류:", error)
-    }
-  }
+  const { data: comment } = useGetComments(selectedPost?.id)
 
   // 댓글 추가
-  const addComment = async () => {
-    try {
-      const data: Comment = await commentApi.create(newComment)
-      setComments((prev) => ({
-        ...prev,
-        [data.postId]: [...(prev[data.postId] || []), data],
-      }))
-      setShowAddCommentDialog(false)
-      setNewComment({ body: "", postId: null, userId: 1 })
-    } catch (error) {
-      console.error("댓글 추가 오류:", error)
-    }
-  }
+  const { mutate: addCommentMutate } = useAddCommentMutation()
 
+  const { mutate: updatedCommentMutate } = useUpdateCommentMutation()
   // 댓글 업데이트
   const updateComment = async () => {
-    if (!selectedComment) return
+    if (!selectedComment || !selectedPost) return
     try {
-      const data: Comment = await commentApi.update({ body: newComment.body, id: selectedComment.id })
-      setComments((prev) => ({
-        ...prev,
-        [data.postId]: prev[data.postId].map((comment) => (comment.id === data.id ? data : comment)),
-      }))
+      updatedCommentMutate({
+        ...selectedComment,
+        body: selectedComment.body,
+        postId: selectedPost.id,
+      })
       setShowEditCommentDialog(false)
     } catch (error) {
       console.error("댓글 업데이트 오류:", error)
     }
   }
 
+  const { mutate: deleteCommentMutate } = useDeleteCommentMutation()
   // 댓글 삭제
-  const deleteComment = async (id: number, postId: number) => {
+  const deleteComment = async (id: number) => {
     try {
-      await commentApi.delete(id)
-      setComments((prev) => ({
-        ...prev,
-        [postId]: (prev[postId] || []).filter((comment) => comment.id !== id),
-      }))
+      deleteCommentMutate(id)
     } catch (error) {
       console.error("댓글 삭제 오류:", error)
     }
   }
   const commentLikes = useCommentLikeMutation()
   // 댓글 좋아요
-  const likeComment = async (id: number, postId: number) => {
+  const likeComment = async (comment: Comment) => {
     try {
-      const currentLikes = comments[postId]?.find((c) => c.id === id)?.likes ?? 0
-      commentLikes.mutate({ id, likes: currentLikes, postId })
-
-      setComments((prev) => ({
-        ...prev,
-        [postId]: (prev[postId] || []).map((comment) =>
-          comment.id === commentLikes.data?.id ? { ...commentLikes.data, likes: comment.likes + 1 } : comment,
-        ),
-      }))
+      commentLikes.mutate(comment)
     } catch (error) {
       console.error("댓글 좋아요 오류:", error)
     }
@@ -203,7 +174,6 @@ export const PostsManagerPage = () => {
   // 게시물 상세 보기
   const openPostDetail = (post: Post) => {
     setSelectedPost(post)
-    fetchComments(post.id)
     setShowPostDetailDialog(true)
   }
 
@@ -217,7 +187,6 @@ export const PostsManagerPage = () => {
       console.error("사용자 정보 가져오기 오류:", error)
     }
   }
-
   // 게시물 테이블 렌더링
   const renderPostTable = () => (
     <Table>
@@ -318,19 +287,14 @@ export const PostsManagerPage = () => {
         </Button>
       </div>
       <div className="space-y-1">
-        {comments[postId]?.map((comment) => (
+        {comment?.comments?.map((comment) => (
           <div className="flex items-center justify-between text-sm border-b pb-1" key={comment.id}>
             <div className="flex items-center space-x-2 overflow-hidden">
               <span className="font-medium truncate">{comment.user.username}:</span>
               <span className="truncate">{highlightText(comment.body, current.search)}</span>
             </div>
             <div className="flex items-center space-x-1">
-              <Button
-                aria-label="댓글 좋아요"
-                onClick={() => likeComment(comment.id, postId)}
-                size="sm"
-                variant="ghost"
-              >
+              <Button aria-label="댓글 좋아요" onClick={() => likeComment(comment)} size="sm" variant="ghost">
                 <ThumbsUp className="w-3 h-3" />
                 <span className="ml-1 text-xs">{comment.likes}</span>
               </Button>
@@ -345,12 +309,7 @@ export const PostsManagerPage = () => {
               >
                 <Edit2 className="w-3 h-3" />
               </Button>
-              <Button
-                aria-label="댓글 삭제"
-                onClick={() => deleteComment(comment.id, postId)}
-                size="sm"
-                variant="ghost"
-              >
+              <Button aria-label="댓글 삭제" onClick={() => deleteComment(comment.id)} size="sm" variant="ghost">
                 <Trash2 className="w-3 h-3" />
               </Button>
             </div>
@@ -421,8 +380,8 @@ export const PostsManagerPage = () => {
               </SelectContent>
             </Select>
             <Select
-              onValueChange={(value) => updateQuery({ sortOrder: value as PostQueryParams["sortOrder"] })}
-              value={current.sortOrder}
+              onValueChange={(value) => updateQuery({ order: value as PostQueryParams["order"] })}
+              value={current.order}
             >
               <SelectTrigger className="w-[180px]">
                 <SelectValue placeholder="정렬 순서" />
@@ -548,7 +507,14 @@ export const PostsManagerPage = () => {
               placeholder="댓글 내용"
               value={newComment.body}
             />
-            <Button onClick={addComment}>댓글 추가</Button>
+            <Button
+              onClick={() => {
+                addCommentMutate(newComment)
+                setShowAddCommentDialog(false)
+              }}
+            >
+              댓글 추가
+            </Button>
           </div>
         </DialogContent>
       </Dialog>

From c19d228759f3eff64ab2201805783400935aea94 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 01:36:30 +0900
Subject: [PATCH 43/71] =?UTF-8?q?feat:=20feature/getUserById=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/user/api/index.ts            |  4 ++--
 src/entities/user/model/types.ts          |  2 ++
 src/feature/get-user-by-id/api/queries.ts | 11 +++++++++++
 src/feature/get-user-by-id/index.ts       |  1 +
 4 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 src/feature/get-user-by-id/api/queries.ts
 create mode 100644 src/feature/get-user-by-id/index.ts

diff --git a/src/entities/user/api/index.ts b/src/entities/user/api/index.ts
index 85d6d7ceb..5a88c5037 100644
--- a/src/entities/user/api/index.ts
+++ b/src/entities/user/api/index.ts
@@ -1,10 +1,10 @@
 import { apiClient } from "@/shared/api/apiClient"
 
-import { User, UserQueryParams } from "../model/types"
+import { User, UserQueryParams, UsersResponse } from "../model/types"
 
 export const userApi = {
   async getAll(params: UserQueryParams) {
-    return apiClient.get<{ users: Array<User> }>("/users", {
+    return apiClient.get<UsersResponse>("/users", {
       params,
     })
   },
diff --git a/src/entities/user/model/types.ts b/src/entities/user/model/types.ts
index 92810dad7..1289b8cf8 100644
--- a/src/entities/user/model/types.ts
+++ b/src/entities/user/model/types.ts
@@ -12,6 +12,8 @@ export type User = {
 }
 export type UserQueryParams = { limit: number; select: string }
 
+export type UsersResponse = { limit: number; skip: number; total: number; users: User[] }
+
 type Address = { address?: string; city?: string; state?: string }
 
 type Company = { name?: string; title?: string }
diff --git a/src/feature/get-user-by-id/api/queries.ts b/src/feature/get-user-by-id/api/queries.ts
new file mode 100644
index 000000000..44bc265db
--- /dev/null
+++ b/src/feature/get-user-by-id/api/queries.ts
@@ -0,0 +1,11 @@
+import { useQuery } from "@tanstack/react-query"
+
+import { userApi } from "@/entities/user"
+
+export const useGetUserById = (userId?: number) => {
+  return useQuery({
+    enabled: !!userId,
+    queryFn: () => userApi.getById(userId!),
+    queryKey: ["users", userId],
+  })
+}
diff --git a/src/feature/get-user-by-id/index.ts b/src/feature/get-user-by-id/index.ts
new file mode 100644
index 000000000..c98ebcdc0
--- /dev/null
+++ b/src/feature/get-user-by-id/index.ts
@@ -0,0 +1 @@
+export * from "./api/queries"

From 09c4f667de041161f98cbb81bef4a646721800ed Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 01:36:48 +0900
Subject: [PATCH 44/71] =?UTF-8?q?feat:=20post=20manager=20page=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20user=20=EB=B6=80=EB=B6=84=20=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PostsManagerPage.tsx | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 5a0a0b951..a8fb70c63 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -4,7 +4,7 @@ import { useState } from "react"
 import { Comment } from "@/entities/comment"
 import { Post, PostQueryParams } from "@/entities/post"
 import { Tag } from "@/entities/tag"
-import { User, userApi } from "@/entities/user"
+import { User } from "@/entities/user"
 import { useAddCommentMutation } from "@/feature/add-comment"
 import { useAddPostMutation } from "@/feature/add-post"
 import { useCommentLikeMutation } from "@/feature/comment-like"
@@ -13,6 +13,7 @@ import { useDeletePostMutation } from "@/feature/delete-post"
 import { usePostsFilter } from "@/feature/filter-posts/model/usePostsFilter"
 import { useGetComments } from "@/feature/get-comments"
 import { useGetTags } from "@/feature/get-tags"
+import { useGetUserById } from "@/feature/get-user-by-id"
 import { UserSummary } from "@/feature/get-users-summary"
 import { useUpdateCommentMutation } from "@/feature/update-comment"
 import { useUpdatePostMutation } from "@/feature/update-post"
@@ -81,7 +82,7 @@ export const PostsManagerPage = () => {
   // 모달 상태
   const [showPostDetailDialog, setShowPostDetailDialog] = useState(false) // 게시물 상세 보기 모달 상태
   const [showUserModal, setShowUserModal] = useState(false) // 사용자 정보 모달 상태
-  const [selectedUser, setSelectedUser] = useState<null | User>(null) // 선택된 사용자 상태 (모달 정보)
+  const [selectedUser, setSelectedUser] = useState<User>() // 선택된 사용자 상태 (모달 정보)
 
   const { data: postsWithUsers, isLoading, refetch } = usePostsWithUserSummaryQuery()
 
@@ -177,11 +178,12 @@ export const PostsManagerPage = () => {
     setShowPostDetailDialog(true)
   }
 
+  const { data: userData } = useGetUserById(selectedUser?.id)
+
   // 사용자 모달 열기
   const openUserModal = async (user: UserSummary) => {
     try {
-      const userData: User = await userApi.getById(user.id)
-      setSelectedUser(userData)
+      setSelectedUser(user)
       setShowUserModal(true)
     } catch (error) {
       console.error("사용자 정보 가져오기 오류:", error)
@@ -558,27 +560,27 @@ export const PostsManagerPage = () => {
             <DialogTitle>사용자 정보</DialogTitle>
           </DialogHeader>
           <div className="space-y-4">
-            <img alt={selectedUser?.username} className="w-24 h-24 rounded-full mx-auto" src={selectedUser?.image} />
-            <h3 className="text-xl font-semibold text-center">{selectedUser?.username}</h3>
+            <img alt={userData?.username} className="w-24 h-24 rounded-full mx-auto" src={userData?.image} />
+            <h3 className="text-xl font-semibold text-center">{userData?.username}</h3>
             <div className="space-y-2">
               <p>
-                <strong>이름:</strong> {selectedUser?.firstName} {selectedUser?.lastName}
+                <strong>이름:</strong> {userData?.firstName} {userData?.lastName}
               </p>
               <p>
-                <strong>나이:</strong> {selectedUser?.age}
+                <strong>나이:</strong> {userData?.age}
               </p>
               <p>
-                <strong>이메일:</strong> {selectedUser?.email}
+                <strong>이메일:</strong> {userData?.email}
               </p>
               <p>
-                <strong>전화번호:</strong> {selectedUser?.phone}
+                <strong>전화번호:</strong> {userData?.phone}
               </p>
               <p>
-                <strong>주소:</strong> {selectedUser?.address?.address}, {selectedUser?.address?.city},{" "}
-                {selectedUser?.address?.state}
+                <strong>주소:</strong> {userData?.address?.address}, {userData?.address?.city},{" "}
+                {userData?.address?.state}
               </p>
               <p>
-                <strong>직장:</strong> {selectedUser?.company?.name} - {selectedUser?.company?.title}
+                <strong>직장:</strong> {userData?.company?.name} - {userData?.company?.title}
               </p>
             </div>
           </div>

From 762a2e82237c54b55dbf353cac9fe43b1639edfa Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 02:59:02 +0900
Subject: [PATCH 45/71] =?UTF-8?q?feat:=20useDebounceValue=20=ED=9B=85=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PostsManagerPage.tsx       | 38 +++++++++++++++++++---------
 src/shared/hooks/index.ts            |  1 +
 src/shared/hooks/useDebounceValue.ts | 15 +++++++++++
 3 files changed, 42 insertions(+), 12 deletions(-)
 create mode 100644 src/shared/hooks/index.ts
 create mode 100644 src/shared/hooks/useDebounceValue.ts

diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index a8fb70c63..6f190eede 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -1,5 +1,5 @@
 import { Edit2, MessageSquare, Plus, Search, ThumbsDown, ThumbsUp, Trash2 } from "lucide-react"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 
 import { Comment } from "@/entities/comment"
 import { Post, PostQueryParams } from "@/entities/post"
@@ -17,6 +17,7 @@ import { useGetUserById } from "@/feature/get-user-by-id"
 import { UserSummary } from "@/feature/get-users-summary"
 import { useUpdateCommentMutation } from "@/feature/update-comment"
 import { useUpdatePostMutation } from "@/feature/update-post"
+import { useDebounceValue } from "@/shared/hooks/useDebounceValue"
 import { highlightText } from "@/shared/lib"
 import {
   Button,
@@ -84,17 +85,10 @@ export const PostsManagerPage = () => {
   const [showUserModal, setShowUserModal] = useState(false) // 사용자 정보 모달 상태
   const [selectedUser, setSelectedUser] = useState<User>() // 선택된 사용자 상태 (모달 정보)
 
-  const { data: postsWithUsers, isLoading, refetch } = usePostsWithUserSummaryQuery()
+  const { data: postsWithUsers, isLoading } = usePostsWithUserSummaryQuery()
 
   const { data: tagsData } = useGetTags()
 
-  // 게시물 검색
-  const searchPosts = async () => {
-    if (!current.search) {
-      refetch()
-      return
-    }
-  }
   const { mutate: addPostMuate } = useAddPostMutation()
   // 게시물 추가
 
@@ -320,6 +314,26 @@ export const PostsManagerPage = () => {
       </div>
     </div>
   )
+  const [inputValue, setInputValue] = useState(current.search || "")
+  const debouncedSearchQuery = useDebounceValue(inputValue, 500)
+
+  useEffect(() => {
+    updateQuery({ search: debouncedSearchQuery })
+  }, [debouncedSearchQuery, updateQuery])
+
+  useEffect(() => {
+    setInputValue(current.search || "")
+  }, [current.search])
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value)
+  }
+
+  const handleSearchKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      updateQuery({ search: inputValue })
+    }
+  }
 
   return (
     <Card className="w-full max-w-6xl mx-auto">
@@ -342,10 +356,10 @@ export const PostsManagerPage = () => {
                 <Input
                   aria-label="게시물 검색"
                   className="pl-8"
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateQuery({ search: e.target.value })}
-                  onKeyPress={(e: React.KeyboardEvent<HTMLInputElement>) => e.key === "Enter" && searchPosts()}
+                  onChange={handleSearchChange}
+                  onKeyPress={handleSearchKeyPress}
                   placeholder="게시물 검색..."
-                  value={current.search}
+                  value={inputValue}
                 />
               </div>
             </div>
diff --git a/src/shared/hooks/index.ts b/src/shared/hooks/index.ts
new file mode 100644
index 000000000..645adb5d8
--- /dev/null
+++ b/src/shared/hooks/index.ts
@@ -0,0 +1 @@
+export * from "./useDebounceValue"
diff --git a/src/shared/hooks/useDebounceValue.ts b/src/shared/hooks/useDebounceValue.ts
new file mode 100644
index 000000000..612ff6c26
--- /dev/null
+++ b/src/shared/hooks/useDebounceValue.ts
@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react"
+
+export const useDebounceValue = <T>(value: T, delay = 300) => {
+  const [debouncedValue, setDbouncedValue] = useState(value)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDbouncedValue(value)
+    }, delay)
+
+    return () => clearTimeout(timer)
+  }, [delay, value])
+
+  return debouncedValue
+}

From c07db4183393d8da53c2a1feff3c32d261b3b640 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 03:32:03 +0900
Subject: [PATCH 46/71] =?UTF-8?q?feat:=20tag,=20pagination=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/post/model/types.ts              |  5 ++-
 src/entities/tag/index.ts                     |  1 +
 src/entities/tag/ui/Tag.tsx                   | 18 ++++++++
 src/pages/PostsManagerPage.tsx                | 45 ++-----------------
 src/widgets/posts-with-users/api/queries.ts   |  2 +-
 src/widgets/posts-with-users/model/types.ts   |  8 ++++
 .../posts-with-users/ui/Paginaition.tsx       | 41 +++++++++++++++++
 7 files changed, 76 insertions(+), 44 deletions(-)
 create mode 100644 src/entities/tag/ui/Tag.tsx
 create mode 100644 src/widgets/posts-with-users/model/types.ts
 create mode 100644 src/widgets/posts-with-users/ui/Paginaition.tsx

diff --git a/src/entities/post/model/types.ts b/src/entities/post/model/types.ts
index 2b366804b..dcc2714c0 100644
--- a/src/entities/post/model/types.ts
+++ b/src/entities/post/model/types.ts
@@ -7,6 +7,8 @@ export interface Post {
   userId: number
 }
 
+export type PostPagiantionReponse<T> = { limit: number; posts: T[]; skip: number; total: number }
+
 export interface PostQueryParams {
   limit: number
   order: "asc" | "desc"
@@ -14,8 +16,7 @@ export interface PostQueryParams {
   skip: number
   sortBy: "" | "id" | "none" | "reactions" | "title"
 }
-
-export type PostsResponse = { limit: number; posts: Post[]; skip: number; total: number }
+export type PostsResponse = PostPagiantionReponse<Post>
 
 export interface SearchQueryParams {
   q?: string
diff --git a/src/entities/tag/index.ts b/src/entities/tag/index.ts
index 05b8ceefe..399c5e1df 100644
--- a/src/entities/tag/index.ts
+++ b/src/entities/tag/index.ts
@@ -1,2 +1,3 @@
 export * from "./api"
 export * from "./model/types"
+export { TagItem } from "./ui/Tag"
diff --git a/src/entities/tag/ui/Tag.tsx b/src/entities/tag/ui/Tag.tsx
new file mode 100644
index 000000000..a40ee6ed1
--- /dev/null
+++ b/src/entities/tag/ui/Tag.tsx
@@ -0,0 +1,18 @@
+import { PropsWithChildren } from "react"
+
+export const TagItem = ({
+  children,
+  isActive = false,
+  onClick,
+}: PropsWithChildren<{ isActive: boolean; onClick: VoidFunction }>) => {
+  return (
+    <span
+      className={`px-1 text-[9px] font-semibold rounded-[4px] cursor-pointer ${
+        isActive ? "text-white bg-blue-500 hover:bg-blue-600" : "text-blue-800 bg-blue-100 hover:bg-blue-200"
+      }`}
+      onClick={onClick}
+    >
+      {children}
+    </span>
+  )
+}
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 6f190eede..33ad96f97 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -44,6 +44,7 @@ import {
   Textarea,
 } from "@/shared/ui"
 import { usePostsWithUserSummaryQuery } from "@/widgets/posts-with-users"
+import { Pagination } from "@/widgets/posts-with-users/ui/Paginaition"
 
 export const PostsManagerPage = () => {
   const { current, updateQuery } = usePostsFilter()
@@ -176,12 +177,8 @@ export const PostsManagerPage = () => {
 
   // 사용자 모달 열기
   const openUserModal = async (user: UserSummary) => {
-    try {
-      setSelectedUser(user)
-      setShowUserModal(true)
-    } catch (error) {
-      console.error("사용자 정보 가져오기 오류:", error)
-    }
+    setSelectedUser(user)
+    setShowUserModal(true)
   }
   // 게시물 테이블 렌더링
   const renderPostTable = () => (
@@ -413,41 +410,7 @@ export const PostsManagerPage = () => {
           {isLoading ? <div className="flex justify-center p-4">로딩 중...</div> : renderPostTable()}
 
           {/* 페이지네이션 */}
-          {postsWithUsers && (
-            <div className="flex justify-between items-center">
-              <div className="flex items-center gap-2">
-                <span>표시</span>
-                <Select
-                  onValueChange={(value) => updateQuery({ limit: Number(value) })}
-                  value={current.limit.toString()}
-                >
-                  <SelectTrigger className="w-[180px]">
-                    <SelectValue placeholder="10" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="10">10</SelectItem>
-                    <SelectItem value="20">20</SelectItem>
-                    <SelectItem value="30">30</SelectItem>
-                  </SelectContent>
-                </Select>
-                <span>항목</span>
-              </div>
-              <div className="flex gap-2">
-                <Button
-                  disabled={current.skip === 0}
-                  onClick={() => updateQuery({ skip: Math.max(0, current.skip - current.limit) })}
-                >
-                  이전
-                </Button>
-                <Button
-                  disabled={current.skip + current.limit >= postsWithUsers.total}
-                  onClick={() => updateQuery({ skip: current.skip + current.limit })}
-                >
-                  다음
-                </Button>
-              </div>
-            </div>
-          )}
+          {postsWithUsers && <Pagination postsWithUsers={postsWithUsers} />}
         </div>
       </CardContent>
 
diff --git a/src/widgets/posts-with-users/api/queries.ts b/src/widgets/posts-with-users/api/queries.ts
index 56066af47..50832e12d 100644
--- a/src/widgets/posts-with-users/api/queries.ts
+++ b/src/widgets/posts-with-users/api/queries.ts
@@ -15,11 +15,11 @@ export const usePostsWithUserSummaryQuery = () => {
       const userData = await getUsersSummary()
 
       return {
+        ...postsData,
         posts: postsData.posts.map((post) => ({
           ...post,
           author: userData.users.find((user) => user.id === post.userId),
         })),
-        total: postsData.total,
       }
     },
     queryKey: ["posts-with-users", { limit, order, search, skip, sortBy, tag }],
diff --git a/src/widgets/posts-with-users/model/types.ts b/src/widgets/posts-with-users/model/types.ts
new file mode 100644
index 000000000..81acfe000
--- /dev/null
+++ b/src/widgets/posts-with-users/model/types.ts
@@ -0,0 +1,8 @@
+import { Post, PostPagiantionReponse } from "@/entities/post"
+import { UserSummary } from "@/feature/get-users-summary"
+
+export interface PostWithUserSummary extends Post {
+  author?: UserSummary
+}
+
+export type PostWithUserSummaryReseponse = PostPagiantionReponse<PostWithUserSummary>
diff --git a/src/widgets/posts-with-users/ui/Paginaition.tsx b/src/widgets/posts-with-users/ui/Paginaition.tsx
new file mode 100644
index 000000000..b98c00304
--- /dev/null
+++ b/src/widgets/posts-with-users/ui/Paginaition.tsx
@@ -0,0 +1,41 @@
+import { usePostsFilter } from "@/feature/filter-posts"
+import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/ui"
+
+import { PostWithUserSummaryReseponse } from "../model/types"
+
+export const Pagination = ({ postsWithUsers }: { postsWithUsers: PostWithUserSummaryReseponse }) => {
+  const { current, updateQuery } = usePostsFilter()
+
+  return (
+    <div className="flex justify-between items-center">
+      <div className="flex items-center gap-2">
+        <span>표시</span>
+        <Select onValueChange={(value) => updateQuery({ limit: Number(value) })} value={current.limit.toString()}>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="10" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="10">10</SelectItem>
+            <SelectItem value="20">20</SelectItem>
+            <SelectItem value="30">30</SelectItem>
+          </SelectContent>
+        </Select>
+        <span>항목</span>
+      </div>
+      <div className="flex gap-2">
+        <Button
+          disabled={current.skip === 0}
+          onClick={() => updateQuery({ skip: Math.max(0, current.skip - current.limit) })}
+        >
+          이전
+        </Button>
+        <Button
+          disabled={current.skip + current.limit >= postsWithUsers.total}
+          onClick={() => updateQuery({ skip: current.skip + current.limit })}
+        >
+          다음
+        </Button>
+      </div>
+    </div>
+  )
+}

From dbe2fa321b3624621ca59022511a15ddf6ff54fa Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 06:22:16 +0900
Subject: [PATCH 47/71] =?UTF-8?q?feat:=20modal=20store=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/store/index.ts |  1 +
 src/shared/store/modal.ts | 57 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+)
 create mode 100644 src/shared/store/index.ts
 create mode 100644 src/shared/store/modal.ts

diff --git a/src/shared/store/index.ts b/src/shared/store/index.ts
new file mode 100644
index 000000000..a30909e18
--- /dev/null
+++ b/src/shared/store/index.ts
@@ -0,0 +1 @@
+export * from "./modal"
diff --git a/src/shared/store/modal.ts b/src/shared/store/modal.ts
new file mode 100644
index 000000000..374eec6fd
--- /dev/null
+++ b/src/shared/store/modal.ts
@@ -0,0 +1,57 @@
+import { create } from "zustand"
+
+interface ModalState {
+  closeAllModals: () => void
+
+  closeModal: (modalId: string) => void
+  getModalData: <T = unknown>(modalId: string) => T | undefined
+  isModalOpen: (modalId: string) => boolean
+  modals: Record<
+    string,
+    {
+      data?: unknown
+      isOpen: boolean
+    }
+  >
+  openModal: (modalId: string, data?: unknown) => void
+}
+
+export const useModalStore = create<ModalState>((set, get) => ({
+  closeAllModals: () => {
+    set({ modals: {} })
+  },
+
+  closeModal: (modalId) => {
+    set((state) => ({
+      modals: {
+        ...state.modals,
+        [modalId]: {
+          data: undefined,
+          isOpen: false,
+        },
+      },
+    }))
+  },
+
+  getModalData: <T>(modalId: string) => {
+    return get().modals[modalId]?.data as T
+  },
+
+  isModalOpen: (modalId) => {
+    return get().modals[modalId]?.isOpen ?? false
+  },
+
+  modals: {},
+
+  openModal: (modalId, data) => {
+    set((state) => ({
+      modals: {
+        ...state.modals,
+        [modalId]: {
+          data,
+          isOpen: true,
+        },
+      },
+    }))
+  },
+}))

From 76235a064338359848cb5515ac4b143921c0e029 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 06:23:44 +0900
Subject: [PATCH 48/71] =?UTF-8?q?feat:=20useModal=ED=9B=85=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/hooks/useModal.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 src/shared/hooks/useModal.ts

diff --git a/src/shared/hooks/useModal.ts b/src/shared/hooks/useModal.ts
new file mode 100644
index 000000000..b3523dc27
--- /dev/null
+++ b/src/shared/hooks/useModal.ts
@@ -0,0 +1,17 @@
+import { useModalStore } from "@/shared/store/modal"
+
+export const useModal = <T = unknown>(modalId: string) => {
+  const { closeModal, getModalData, isModalOpen, openModal } = useModalStore()
+
+  const open = (data?: T) => openModal(modalId, data)
+  const close = () => closeModal(modalId)
+  const isOpen = isModalOpen(modalId)
+  const data = getModalData<T>(modalId)
+
+  return {
+    close,
+    data,
+    isOpen,
+    open,
+  }
+}

From 50868158f5a1191215d3bfe073345237482acd01 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 06:24:02 +0900
Subject: [PATCH 49/71] =?UTF-8?q?feat:=20add=20post=20modal,=20edit=20post?=
 =?UTF-8?q?=20modal=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/widgets/add-post-modal/index.ts           |  2 +
 .../add-post-modal/model/useAddPostModal.ts   |  5 ++
 .../add-post-modal/ui/AddPostModal.tsx        | 60 +++++++++++++++++
 src/widgets/edit-post-modal/index.ts          |  2 +
 .../edit-post-modal/model/useEditPostModal.ts |  6 ++
 .../edit-post-modal/ui/EditPostModal.tsx      | 65 +++++++++++++++++++
 6 files changed, 140 insertions(+)
 create mode 100644 src/widgets/add-post-modal/index.ts
 create mode 100644 src/widgets/add-post-modal/model/useAddPostModal.ts
 create mode 100644 src/widgets/add-post-modal/ui/AddPostModal.tsx
 create mode 100644 src/widgets/edit-post-modal/index.ts
 create mode 100644 src/widgets/edit-post-modal/model/useEditPostModal.ts
 create mode 100644 src/widgets/edit-post-modal/ui/EditPostModal.tsx

diff --git a/src/widgets/add-post-modal/index.ts b/src/widgets/add-post-modal/index.ts
new file mode 100644
index 000000000..6230b2afd
--- /dev/null
+++ b/src/widgets/add-post-modal/index.ts
@@ -0,0 +1,2 @@
+export { useAddPostModal } from "./model/useAddPostModal"
+export { AddPostModal } from "./ui/AddPostModal"
diff --git a/src/widgets/add-post-modal/model/useAddPostModal.ts b/src/widgets/add-post-modal/model/useAddPostModal.ts
new file mode 100644
index 000000000..0f42db18b
--- /dev/null
+++ b/src/widgets/add-post-modal/model/useAddPostModal.ts
@@ -0,0 +1,5 @@
+import { useModal } from "@/shared/hooks/useModal"
+
+export const useAddPostModal = () => {
+  return useModal<void>("addPost")
+}
diff --git a/src/widgets/add-post-modal/ui/AddPostModal.tsx b/src/widgets/add-post-modal/ui/AddPostModal.tsx
new file mode 100644
index 000000000..75b5b7dba
--- /dev/null
+++ b/src/widgets/add-post-modal/ui/AddPostModal.tsx
@@ -0,0 +1,60 @@
+import { useState } from "react"
+
+import { useAddPostMutation } from "@/feature/add-post"
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Input, Textarea } from "@/shared/ui"
+
+import { useAddPostModal } from "../model/useAddPostModal"
+
+export const AddPostModal = () => {
+  const { close, isOpen } = useAddPostModal()
+  const { mutate: addPostMutate } = useAddPostMutation()
+
+  const [newPost, setNewPost] = useState({
+    body: "",
+    title: "",
+    userId: 1,
+  })
+
+  const handleAddPost = () => {
+    if (newPost.title.trim() && newPost.body.trim()) {
+      addPostMutate(newPost)
+      setNewPost({ body: "", title: "", userId: 1 })
+      close()
+    }
+  }
+
+  const handleClose = () => {
+    setNewPost({ body: "", title: "", userId: 1 })
+    close()
+  }
+
+  return (
+    <Dialog onOpenChange={handleClose} open={isOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>새 게시물 추가</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <Input
+            onChange={(e) => setNewPost({ ...newPost, title: e.target.value })}
+            placeholder="제목"
+            value={newPost.title}
+          />
+          <Textarea
+            onChange={(e) => setNewPost({ ...newPost, body: e.target.value })}
+            placeholder="내용"
+            rows={10}
+            value={newPost.body}
+          />
+          <Input
+            onChange={(e) => setNewPost({ ...newPost, userId: Number(e.target.value) })}
+            placeholder="사용자 ID"
+            type="number"
+            value={newPost.userId}
+          />
+          <Button onClick={handleAddPost}>게시물 추가</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/widgets/edit-post-modal/index.ts b/src/widgets/edit-post-modal/index.ts
new file mode 100644
index 000000000..b575379a2
--- /dev/null
+++ b/src/widgets/edit-post-modal/index.ts
@@ -0,0 +1,2 @@
+export { useEditPostModal } from "./model/useEditPostModal"
+export { EditPostModal } from "./ui/EditPostModal"
diff --git a/src/widgets/edit-post-modal/model/useEditPostModal.ts b/src/widgets/edit-post-modal/model/useEditPostModal.ts
new file mode 100644
index 000000000..710a0c616
--- /dev/null
+++ b/src/widgets/edit-post-modal/model/useEditPostModal.ts
@@ -0,0 +1,6 @@
+import { Post } from "@/entities/post"
+import { useModal } from "@/shared/hooks/useModal"
+
+export const useEditPostModal = () => {
+  return useModal<Post>("editPost")
+}
diff --git a/src/widgets/edit-post-modal/ui/EditPostModal.tsx b/src/widgets/edit-post-modal/ui/EditPostModal.tsx
new file mode 100644
index 000000000..6b8ae6dbf
--- /dev/null
+++ b/src/widgets/edit-post-modal/ui/EditPostModal.tsx
@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react"
+
+import { useUpdatePostMutation } from "@/feature/update-post"
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Input, Textarea } from "@/shared/ui"
+
+import { useEditPostModal } from "../model/useEditPostModal"
+
+export const EditPostModal = () => {
+  const { close, data: selectedPost, isOpen } = useEditPostModal()
+  const { mutate: updatePostMutate } = useUpdatePostMutation()
+
+  const [postData, setPostData] = useState({
+    body: "",
+    title: "",
+  })
+
+  useEffect(() => {
+    if (selectedPost) {
+      setPostData({
+        body: selectedPost.body,
+        title: selectedPost.title,
+      })
+    }
+  }, [selectedPost])
+
+  const handleUpdatePost = () => {
+    if (selectedPost && postData.title.trim() && postData.body.trim()) {
+      updatePostMutate({
+        ...selectedPost,
+        body: postData.body,
+        title: postData.title,
+      })
+      close()
+    }
+  }
+
+  const handleClose = () => {
+    setPostData({ body: "", title: "" })
+    close()
+  }
+
+  return (
+    <Dialog onOpenChange={handleClose} open={isOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>게시물 수정</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <Input
+            onChange={(e) => setPostData({ ...postData, title: e.target.value })}
+            placeholder="제목"
+            value={postData.title}
+          />
+          <Textarea
+            onChange={(e) => setPostData({ ...postData, body: e.target.value })}
+            placeholder="내용"
+            rows={15}
+            value={postData.body}
+          />
+          <Button onClick={handleUpdatePost}>게시물 업데이트</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

From 98439631424ea71099c5014e307ce1ac480d4935 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 06:24:26 +0900
Subject: [PATCH 50/71] =?UTF-8?q?feat:=20post=20detail=20modal=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/widgets/post-detail-modal/index.ts        |  2 +
 .../model/usePostDetailModal.ts               |  6 ++
 .../post-detail-modal/ui/PostComments.tsx     | 77 +++++++++++++++++++
 .../post-detail-modal/ui/PostDetailModal.tsx  | 25 ++++++
 4 files changed, 110 insertions(+)
 create mode 100644 src/widgets/post-detail-modal/index.ts
 create mode 100644 src/widgets/post-detail-modal/model/usePostDetailModal.ts
 create mode 100644 src/widgets/post-detail-modal/ui/PostComments.tsx
 create mode 100644 src/widgets/post-detail-modal/ui/PostDetailModal.tsx

diff --git a/src/widgets/post-detail-modal/index.ts b/src/widgets/post-detail-modal/index.ts
new file mode 100644
index 000000000..1eba33e7f
--- /dev/null
+++ b/src/widgets/post-detail-modal/index.ts
@@ -0,0 +1,2 @@
+export * from "./model/usePostDetailModal"
+export * from "./ui/PostDetailModal"
diff --git a/src/widgets/post-detail-modal/model/usePostDetailModal.ts b/src/widgets/post-detail-modal/model/usePostDetailModal.ts
new file mode 100644
index 000000000..4269b95c1
--- /dev/null
+++ b/src/widgets/post-detail-modal/model/usePostDetailModal.ts
@@ -0,0 +1,6 @@
+import { Post } from "@/entities/post"
+import { useModal } from "@/shared/hooks/useModal"
+
+export const usePostDetailModal = () => {
+  return useModal<Post>("postDetail")
+}
diff --git a/src/widgets/post-detail-modal/ui/PostComments.tsx b/src/widgets/post-detail-modal/ui/PostComments.tsx
new file mode 100644
index 000000000..b930ddd3e
--- /dev/null
+++ b/src/widgets/post-detail-modal/ui/PostComments.tsx
@@ -0,0 +1,77 @@
+import { Edit2, Plus, ThumbsUp, Trash2 } from "lucide-react"
+
+import { Comment } from "@/entities/comment"
+import { useCommentLikeMutation } from "@/feature/comment-like"
+import { useDeleteCommentMutation } from "@/feature/delete-comment"
+import { usePostsFilter } from "@/feature/filter-posts"
+import { useGetComments } from "@/feature/get-comments"
+import { highlightText } from "@/shared/lib"
+import { Button } from "@/shared/ui"
+import { useAddCommentModal } from "@/widgets/add-comment-modal"
+import { useEditCommentModal } from "@/widgets/edit-comment-modal"
+
+interface PostCommentsProps {
+  postId: number
+}
+
+export const PostComments = ({ postId }: PostCommentsProps) => {
+  const { data: comments } = useGetComments(postId)
+  const { current } = usePostsFilter()
+
+  const addCommentModal = useAddCommentModal()
+  const editCommentModal = useEditCommentModal()
+
+  const commentLikes = useCommentLikeMutation()
+  const { mutate: deleteCommentMutate } = useDeleteCommentMutation()
+
+  const handleAddComment = () => {
+    addCommentModal.open({ postId })
+  }
+
+  const handleEditComment = (comment: Comment) => {
+    editCommentModal.open(comment)
+  }
+
+  const handleLikeComment = (comment: Comment) => {
+    commentLikes.mutate(comment)
+  }
+
+  const handleDeleteComment = (commentId: number) => {
+    deleteCommentMutate(commentId)
+  }
+
+  return (
+    <div className="mt-2">
+      <div className="flex items-center justify-between mb-2">
+        <h3 className="text-sm font-semibold">댓글</h3>
+        <Button onClick={handleAddComment} size="sm">
+          <Plus className="w-3 h-3 mr-1" />
+          댓글 추가
+        </Button>
+      </div>
+
+      <div className="space-y-1">
+        {comments?.comments?.map((comment) => (
+          <div className="flex items-center justify-between text-sm border-b pb-1" key={comment.id}>
+            <div className="flex items-center space-x-2 overflow-hidden">
+              <span className="font-medium truncate">{comment.user.username}:</span>
+              <span className="truncate">{highlightText(comment.body, current.search)}</span>
+            </div>
+            <div className="flex items-center space-x-1">
+              <Button aria-label="댓글 좋아요" onClick={() => handleLikeComment(comment)} size="sm" variant="ghost">
+                <ThumbsUp className="w-3 h-3" />
+                <span className="ml-1 text-xs">{comment.likes}</span>
+              </Button>
+              <Button aria-label="댓글 수정" onClick={() => handleEditComment(comment)} size="sm" variant="ghost">
+                <Edit2 className="w-3 h-3" />
+              </Button>
+              <Button aria-label="댓글 삭제" onClick={() => handleDeleteComment(comment.id)} size="sm" variant="ghost">
+                <Trash2 className="w-3 h-3" />
+              </Button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/src/widgets/post-detail-modal/ui/PostDetailModal.tsx b/src/widgets/post-detail-modal/ui/PostDetailModal.tsx
new file mode 100644
index 000000000..49808f58e
--- /dev/null
+++ b/src/widgets/post-detail-modal/ui/PostDetailModal.tsx
@@ -0,0 +1,25 @@
+import { usePostsFilter } from "@/feature/filter-posts"
+import { highlightText } from "@/shared/lib"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/ui"
+
+import { usePostDetailModal } from "../model/usePostDetailModal"
+import { PostComments } from "./PostComments"
+
+export const DetailPostModal = () => {
+  const { close, data: selectedPost, isOpen } = usePostDetailModal()
+  const { current } = usePostsFilter()
+
+  return (
+    <Dialog onOpenChange={close} open={isOpen}>
+      <DialogContent className="max-w-3xl">
+        <DialogHeader>
+          <DialogTitle>{highlightText(selectedPost?.title, current.search)}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <p>{highlightText(selectedPost?.body, current.search)}</p>
+          {selectedPost && <PostComments postId={selectedPost.id} />}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

From 22e8e55c0f7bc34b6885ed2a7015bfc7b677997f Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 06:24:47 +0900
Subject: [PATCH 51/71] =?UTF-8?q?feat:=20user=20profile=20modal=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/widgets/user-profile-modal/index.ts       |  2 +
 .../model/useUserProfileModal.ts              |  6 +++
 .../ui/UserProfileModal.tsx                   | 43 +++++++++++++++++++
 3 files changed, 51 insertions(+)
 create mode 100644 src/widgets/user-profile-modal/index.ts
 create mode 100644 src/widgets/user-profile-modal/model/useUserProfileModal.ts
 create mode 100644 src/widgets/user-profile-modal/ui/UserProfileModal.tsx

diff --git a/src/widgets/user-profile-modal/index.ts b/src/widgets/user-profile-modal/index.ts
new file mode 100644
index 000000000..43f718d05
--- /dev/null
+++ b/src/widgets/user-profile-modal/index.ts
@@ -0,0 +1,2 @@
+export * from "./model/useUserProfileModal"
+export * from "./ui/UserProfileModal"
diff --git a/src/widgets/user-profile-modal/model/useUserProfileModal.ts b/src/widgets/user-profile-modal/model/useUserProfileModal.ts
new file mode 100644
index 000000000..d74c1dc27
--- /dev/null
+++ b/src/widgets/user-profile-modal/model/useUserProfileModal.ts
@@ -0,0 +1,6 @@
+import { User } from "@/entities/user"
+import { useModal } from "@/shared/hooks/useModal"
+
+export const useUserProfileModal = () => {
+  return useModal<User>("userProfile")
+}
diff --git a/src/widgets/user-profile-modal/ui/UserProfileModal.tsx b/src/widgets/user-profile-modal/ui/UserProfileModal.tsx
new file mode 100644
index 000000000..8742bb87c
--- /dev/null
+++ b/src/widgets/user-profile-modal/ui/UserProfileModal.tsx
@@ -0,0 +1,43 @@
+import { useGetUserById } from "@/feature/get-user-by-id"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/ui"
+
+import { useUserProfileModal } from "../model/useUserProfileModal"
+
+export const UserProfileModal = () => {
+  const { close, data: selectedUser, isOpen } = useUserProfileModal()
+  const { data: userData } = useGetUserById(selectedUser?.id)
+
+  return (
+    <Dialog onOpenChange={close} open={isOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>사용자 정보</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <img alt={userData?.username} className="w-24 h-24 rounded-full mx-auto" src={userData?.image} />
+          <h3 className="text-xl font-semibold text-center">{userData?.username}</h3>
+          <div className="space-y-2">
+            <p>
+              <strong>이름:</strong> {userData?.firstName} {userData?.lastName}
+            </p>
+            <p>
+              <strong>나이:</strong> {userData?.age}
+            </p>
+            <p>
+              <strong>이메일:</strong> {userData?.email}
+            </p>
+            <p>
+              <strong>전화번호:</strong> {userData?.phone}
+            </p>
+            <p>
+              <strong>주소:</strong> {userData?.address?.address}, {userData?.address?.city}, {userData?.address?.state}
+            </p>
+            <p>
+              <strong>직장:</strong> {userData?.company?.name} - {userData?.company?.title}
+            </p>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

From c1e0315491f434a23ad94654356e328d9b3886cd Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 06:25:16 +0900
Subject: [PATCH 52/71] =?UTF-8?q?feat:=20add=20comment,=20edit=20comment?=
 =?UTF-8?q?=20modal=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/widgets/add-comment-modal/index.ts        |  2 +
 .../model/useAddCommentModal.ts               |  9 ++++
 .../add-comment-modal/ui/AddCommentModal.tsx  | 43 +++++++++++++++++
 src/widgets/edit-comment-modal/index.ts       |  2 +
 .../model/useEditCommentModal.ts              |  6 +++
 .../ui/EditCommentModal.tsx                   | 48 +++++++++++++++++++
 6 files changed, 110 insertions(+)
 create mode 100644 src/widgets/add-comment-modal/index.ts
 create mode 100644 src/widgets/add-comment-modal/model/useAddCommentModal.ts
 create mode 100644 src/widgets/add-comment-modal/ui/AddCommentModal.tsx
 create mode 100644 src/widgets/edit-comment-modal/index.ts
 create mode 100644 src/widgets/edit-comment-modal/model/useEditCommentModal.ts
 create mode 100644 src/widgets/edit-comment-modal/ui/EditCommentModal.tsx

diff --git a/src/widgets/add-comment-modal/index.ts b/src/widgets/add-comment-modal/index.ts
new file mode 100644
index 000000000..6f3e3755c
--- /dev/null
+++ b/src/widgets/add-comment-modal/index.ts
@@ -0,0 +1,2 @@
+export { useAddCommentModal } from "./model/useAddCommentModal"
+export { AddCommentModal } from "./ui/AddCommentModal"
diff --git a/src/widgets/add-comment-modal/model/useAddCommentModal.ts b/src/widgets/add-comment-modal/model/useAddCommentModal.ts
new file mode 100644
index 000000000..0bb780d95
--- /dev/null
+++ b/src/widgets/add-comment-modal/model/useAddCommentModal.ts
@@ -0,0 +1,9 @@
+import { useModal } from "@/shared/hooks/useModal"
+
+export interface AddCommentData {
+  postId: number
+}
+
+export const useAddCommentModal = () => {
+  return useModal<AddCommentData>("addComment")
+}
diff --git a/src/widgets/add-comment-modal/ui/AddCommentModal.tsx b/src/widgets/add-comment-modal/ui/AddCommentModal.tsx
new file mode 100644
index 000000000..de6a023ae
--- /dev/null
+++ b/src/widgets/add-comment-modal/ui/AddCommentModal.tsx
@@ -0,0 +1,43 @@
+import { useState } from "react"
+
+import { useAddCommentMutation } from "@/feature/add-comment"
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Textarea } from "@/shared/ui"
+
+import { useAddCommentModal } from "../model/useAddCommentModal"
+
+export const AddCommentModal = () => {
+  const { close, data, isOpen } = useAddCommentModal()
+  const { mutate: addCommentMutate } = useAddCommentMutation()
+  const [commentBody, setCommentBody] = useState("")
+
+  const handleAddComment = () => {
+    if (data?.postId && commentBody.trim()) {
+      addCommentMutate({
+        body: commentBody,
+        postId: data.postId,
+        userId: 1,
+      })
+      setCommentBody("")
+      close()
+    }
+  }
+
+  const handleClose = () => {
+    setCommentBody("")
+    close()
+  }
+
+  return (
+    <Dialog onOpenChange={handleClose} open={isOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>새 댓글 추가</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <Textarea onChange={(e) => setCommentBody(e.target.value)} placeholder="댓글 내용" value={commentBody} />
+          <Button onClick={handleAddComment}>댓글 추가</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/widgets/edit-comment-modal/index.ts b/src/widgets/edit-comment-modal/index.ts
new file mode 100644
index 000000000..a97232f30
--- /dev/null
+++ b/src/widgets/edit-comment-modal/index.ts
@@ -0,0 +1,2 @@
+export { useEditCommentModal } from "./model/useEditCommentModal"
+export { EditCommentModal } from "./ui/EditCommentModal"
diff --git a/src/widgets/edit-comment-modal/model/useEditCommentModal.ts b/src/widgets/edit-comment-modal/model/useEditCommentModal.ts
new file mode 100644
index 000000000..a11471d70
--- /dev/null
+++ b/src/widgets/edit-comment-modal/model/useEditCommentModal.ts
@@ -0,0 +1,6 @@
+import { Comment } from "@/entities/comment"
+import { useModal } from "@/shared/hooks/useModal"
+
+export const useEditCommentModal = () => {
+  return useModal<Comment>("editComment")
+}
diff --git a/src/widgets/edit-comment-modal/ui/EditCommentModal.tsx b/src/widgets/edit-comment-modal/ui/EditCommentModal.tsx
new file mode 100644
index 000000000..73267de86
--- /dev/null
+++ b/src/widgets/edit-comment-modal/ui/EditCommentModal.tsx
@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react"
+
+import { useUpdateCommentMutation } from "@/feature/update-comment"
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Textarea } from "@/shared/ui"
+
+import { useEditCommentModal } from "../model/useEditCommentModal"
+
+export const EditCommentModal = () => {
+  const { close, data: selectedComment, isOpen } = useEditCommentModal()
+  const { mutate: updateCommentMutate } = useUpdateCommentMutation()
+  const [commentBody, setCommentBody] = useState("")
+
+  // 모달이 열릴 때 기존 댓글 내용 설정
+  useEffect(() => {
+    if (selectedComment) {
+      setCommentBody(selectedComment.body)
+    }
+  }, [selectedComment])
+
+  const handleUpdateComment = () => {
+    if (selectedComment && commentBody.trim()) {
+      updateCommentMutate({
+        ...selectedComment,
+        body: commentBody,
+      })
+      close()
+    }
+  }
+
+  const handleClose = () => {
+    setCommentBody("")
+    close()
+  }
+
+  return (
+    <Dialog onOpenChange={handleClose} open={isOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>댓글 수정</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <Textarea onChange={(e) => setCommentBody(e.target.value)} placeholder="댓글 내용" value={commentBody} />
+          <Button onClick={handleUpdateComment}>댓글 업데이트</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

From b81e1bef71a6ef4a35cbf9cffff2ca3c90d99c5a Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 06:38:00 +0900
Subject: [PATCH 53/71] =?UTF-8?q?chore:=20=ED=85=8C=EC=8A=A4=ED=8A=B8?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/App.test.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/app/App.test.tsx b/src/app/App.test.tsx
index 5be711086..d6f2bdcf2 100644
--- a/src/app/App.test.tsx
+++ b/src/app/App.test.tsx
@@ -74,13 +74,20 @@ describe("App - 댓글", () => {
     await userEvent.type(textarea, "great!")
     await userEvent.click(within(addDialog).getByRole("button", { name: "댓글 추가" }))
     expect(await within(dialog).findByText(/great!/)).toBeInTheDocument()
+
+    // 테스트 후 다이얼로그 닫기
+    const closeBtn = within(dialog).getByRole("button", { name: "닫기" })
+    await userEvent.click(closeBtn)
   })
 })
 
 describe("App - 게시물 CRUD", () => {
   test("게시물 추가/수정/삭제가 가능하다", async () => {
     renderApp()
-    await screen.findByText(/^Post 1$/)
+
+    // 게시물 목록이 로드될 때까지 대기 (중복 요소 처리)
+    const titleCells = await screen.findAllByText(/^Post 1$/)
+    expect(titleCells.length).toBeGreaterThan(0)
 
     // 추가
     await userEvent.click(screen.getByRole("button", { name: /게시물 추가/ }))

From b1cbfdb62a818730973732319a219d66d41c5d15 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 06:38:36 +0900
Subject: [PATCH 54/71] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=20=EC=9C=84?=
 =?UTF-8?q?=EC=A0=AF=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PostsManagerPage.tsx | 365 +++------------------------------
 1 file changed, 31 insertions(+), 334 deletions(-)

diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 33ad96f97..7f364487a 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -1,22 +1,12 @@
 import { Edit2, MessageSquare, Plus, Search, ThumbsDown, ThumbsUp, Trash2 } from "lucide-react"
 import { useEffect, useState } from "react"
 
-import { Comment } from "@/entities/comment"
 import { Post, PostQueryParams } from "@/entities/post"
 import { Tag } from "@/entities/tag"
-import { User } from "@/entities/user"
-import { useAddCommentMutation } from "@/feature/add-comment"
-import { useAddPostMutation } from "@/feature/add-post"
-import { useCommentLikeMutation } from "@/feature/comment-like"
-import { useDeleteCommentMutation } from "@/feature/delete-comment"
 import { useDeletePostMutation } from "@/feature/delete-post"
 import { usePostsFilter } from "@/feature/filter-posts/model/usePostsFilter"
-import { useGetComments } from "@/feature/get-comments"
 import { useGetTags } from "@/feature/get-tags"
-import { useGetUserById } from "@/feature/get-user-by-id"
 import { UserSummary } from "@/feature/get-users-summary"
-import { useUpdateCommentMutation } from "@/feature/update-comment"
-import { useUpdatePostMutation } from "@/feature/update-post"
 import { useDebounceValue } from "@/shared/hooks/useDebounceValue"
 import { highlightText } from "@/shared/lib"
 import {
@@ -25,10 +15,6 @@ import {
   CardContent,
   CardHeader,
   CardTitle,
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
   Input,
   Select,
   SelectContent,
@@ -41,10 +27,15 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-  Textarea,
 } from "@/shared/ui"
+import { AddCommentModal } from "@/widgets/add-comment-modal"
+import { AddPostModal, useAddPostModal } from "@/widgets/add-post-modal"
+import { EditCommentModal } from "@/widgets/edit-comment-modal"
+import { EditPostModal, useEditPostModal } from "@/widgets/edit-post-modal"
+import { DetailPostModal, usePostDetailModal } from "@/widgets/post-detail-modal"
 import { usePostsWithUserSummaryQuery } from "@/widgets/posts-with-users"
 import { Pagination } from "@/widgets/posts-with-users/ui/Paginaition"
+import { UserProfileModal, useUserProfileModal } from "@/widgets/user-profile-modal"
 
 export const PostsManagerPage = () => {
   const { current, updateQuery } = usePostsFilter()
@@ -53,133 +44,37 @@ export const PostsManagerPage = () => {
     author?: UserSummary
   }
 
-  // 선택된 게시물 상태
-  const [selectedPost, setSelectedPost] = useState<Post>()
-
-  // 모달 상태
-  const [showAddDialog, setShowAddDialog] = useState(false)
-  const [showEditDialog, setShowEditDialog] = useState(false)
-
-  // 새 게시물 상태
-  const [newPost, setNewPost] = useState<{ body: string; title: string; userId: number }>({
-    body: "",
-    title: "",
-    userId: 1,
-  })
-
-  // 선택된 댓글 상태
-  const [selectedComment, setSelectedComment] = useState<Comment | null>(null)
-
-  // 코멘트 모달 새 댓글 상태
-  const [newComment, setNewComment] = useState<{ body: string; postId: null | number; userId: number }>({
-    body: "",
-    postId: null,
-    userId: 1,
-  })
-
-  // 코멘트 모달 내부 상태
-  const [showAddCommentDialog, setShowAddCommentDialog] = useState(false) // 댓글 추가 모달 상태
-  const [showEditCommentDialog, setShowEditCommentDialog] = useState(false) // 댓글 수정 모달 상태
-
-  // 모달 상태
-  const [showPostDetailDialog, setShowPostDetailDialog] = useState(false) // 게시물 상세 보기 모달 상태
-  const [showUserModal, setShowUserModal] = useState(false) // 사용자 정보 모달 상태
-  const [selectedUser, setSelectedUser] = useState<User>() // 선택된 사용자 상태 (모달 정보)
+  const addPostModal = useAddPostModal()
+  const editPostModal = useEditPostModal()
+  const postDetailModal = usePostDetailModal()
+  const userProfileModal = useUserProfileModal()
 
   const { data: postsWithUsers, isLoading } = usePostsWithUserSummaryQuery()
-
   const { data: tagsData } = useGetTags()
+  const { mutate: deletePostMutate } = useDeletePostMutation()
 
-  const { mutate: addPostMuate } = useAddPostMutation()
-  // 게시물 추가
-
-  const addPost = async () => {
-    try {
-      addPostMuate(newPost)
-      setShowAddDialog(false)
-    } catch (error) {
-      console.error("게시물 추가 오류:", error)
-    }
+  // 모달 핸들러들
+  const openPostDetail = (post: Post) => {
+    postDetailModal.open(post)
   }
 
-  const { mutate: updatePostMutate } = useUpdatePostMutation()
-
-  // 게시물 업데이트
-  const updatePost = async () => {
-    if (!selectedPost) return
-    try {
-      updatePostMutate(selectedPost)
-      setShowEditDialog(false)
-    } catch (error) {
-      console.error("게시물 업데이트 오류:", error)
-    }
+  const handleOpenUserProfile = (user: UserSummary) => {
+    userProfileModal.open(user)
   }
 
-  const { mutate: deletePostMutate } = useDeletePostMutation()
+  const handleEditPost = (post: Post) => {
+    editPostModal.open(post)
+  }
 
   // 게시물 삭제
-  const deletePost = async (id: number) => {
+  const deletePost = (id: number) => {
     try {
-      await deletePostMutate(id)
+      deletePostMutate(id)
     } catch (error) {
       console.error("게시물 삭제 오류:", error)
     }
   }
 
-  // 댓글 가져오기
-  const { data: comment } = useGetComments(selectedPost?.id)
-
-  // 댓글 추가
-  const { mutate: addCommentMutate } = useAddCommentMutation()
-
-  const { mutate: updatedCommentMutate } = useUpdateCommentMutation()
-  // 댓글 업데이트
-  const updateComment = async () => {
-    if (!selectedComment || !selectedPost) return
-    try {
-      updatedCommentMutate({
-        ...selectedComment,
-        body: selectedComment.body,
-        postId: selectedPost.id,
-      })
-      setShowEditCommentDialog(false)
-    } catch (error) {
-      console.error("댓글 업데이트 오류:", error)
-    }
-  }
-
-  const { mutate: deleteCommentMutate } = useDeleteCommentMutation()
-  // 댓글 삭제
-  const deleteComment = async (id: number) => {
-    try {
-      deleteCommentMutate(id)
-    } catch (error) {
-      console.error("댓글 삭제 오류:", error)
-    }
-  }
-  const commentLikes = useCommentLikeMutation()
-  // 댓글 좋아요
-  const likeComment = async (comment: Comment) => {
-    try {
-      commentLikes.mutate(comment)
-    } catch (error) {
-      console.error("댓글 좋아요 오류:", error)
-    }
-  }
-
-  // 게시물 상세 보기
-  const openPostDetail = (post: Post) => {
-    setSelectedPost(post)
-    setShowPostDetailDialog(true)
-  }
-
-  const { data: userData } = useGetUserById(selectedUser?.id)
-
-  // 사용자 모달 열기
-  const openUserModal = async (user: UserSummary) => {
-    setSelectedUser(user)
-    setShowUserModal(true)
-  }
   // 게시물 테이블 렌더링
   const renderPostTable = () => (
     <Table>
@@ -222,7 +117,7 @@ export const PostsManagerPage = () => {
             <TableCell>
               <div
                 className="flex items-center space-x-2 cursor-pointer"
-                onClick={() => post.author && openUserModal(post.author)}
+                onClick={() => post.author && handleOpenUserProfile(post.author)}
               >
                 <img alt={post.author?.username} className="w-8 h-8 rounded-full" src={post.author?.image} />
                 <span>{post.author?.username}</span>
@@ -241,15 +136,7 @@ export const PostsManagerPage = () => {
                 <Button aria-label="댓글 보기" onClick={() => openPostDetail(post)} size="sm" variant="ghost">
                   <MessageSquare className="w-4 h-4" />
                 </Button>
-                <Button
-                  aria-label="게시물 수정"
-                  onClick={() => {
-                    setSelectedPost(post)
-                    setShowEditDialog(true)
-                  }}
-                  size="sm"
-                  variant="ghost"
-                >
+                <Button aria-label="게시물 수정" onClick={() => handleEditPost(post)} size="sm" variant="ghost">
                   <Edit2 className="w-4 h-4" />
                 </Button>
                 <Button aria-label="게시물 삭제" onClick={() => deletePost(post.id)} size="sm" variant="ghost">
@@ -263,54 +150,7 @@ export const PostsManagerPage = () => {
     </Table>
   )
 
-  // 댓글 렌더링
-  const renderComments = (postId: number) => (
-    <div className="mt-2">
-      <div className="flex items-center justify-between mb-2">
-        <h3 className="text-sm font-semibold">댓글</h3>
-        <Button
-          onClick={() => {
-            setNewComment((prev) => ({ ...prev, postId }))
-            setShowAddCommentDialog(true)
-          }}
-          size="sm"
-        >
-          <Plus className="w-3 h-3 mr-1" />
-          댓글 추가
-        </Button>
-      </div>
-      <div className="space-y-1">
-        {comment?.comments?.map((comment) => (
-          <div className="flex items-center justify-between text-sm border-b pb-1" key={comment.id}>
-            <div className="flex items-center space-x-2 overflow-hidden">
-              <span className="font-medium truncate">{comment.user.username}:</span>
-              <span className="truncate">{highlightText(comment.body, current.search)}</span>
-            </div>
-            <div className="flex items-center space-x-1">
-              <Button aria-label="댓글 좋아요" onClick={() => likeComment(comment)} size="sm" variant="ghost">
-                <ThumbsUp className="w-3 h-3" />
-                <span className="ml-1 text-xs">{comment.likes}</span>
-              </Button>
-              <Button
-                aria-label="댓글 수정"
-                onClick={() => {
-                  setSelectedComment(comment)
-                  setShowEditCommentDialog(true)
-                }}
-                size="sm"
-                variant="ghost"
-              >
-                <Edit2 className="w-3 h-3" />
-              </Button>
-              <Button aria-label="댓글 삭제" onClick={() => deleteComment(comment.id)} size="sm" variant="ghost">
-                <Trash2 className="w-3 h-3" />
-              </Button>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
+  // 검색 관련 상태와 핸들러
   const [inputValue, setInputValue] = useState(current.search || "")
   const debouncedSearchQuery = useDebounceValue(inputValue, 500)
 
@@ -337,7 +177,7 @@ export const PostsManagerPage = () => {
       <CardHeader>
         <CardTitle className="flex items-center justify-between">
           <span>게시물 관리자</span>
-          <Button onClick={() => setShowAddDialog(true)}>
+          <Button onClick={() => addPostModal.open()}>
             <Plus className="w-4 h-4 mr-2" />
             게시물 추가
           </Button>
@@ -414,155 +254,12 @@ export const PostsManagerPage = () => {
         </div>
       </CardContent>
 
-      {/* 게시물 추가 대화상자 */}
-      <Dialog onOpenChange={setShowAddDialog} open={showAddDialog}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>새 게시물 추가</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <Input
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNewPost({ ...newPost, title: e.target.value })}
-              placeholder="제목"
-              value={newPost.title}
-            />
-            <Textarea
-              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setNewPost({ ...newPost, body: e.target.value })}
-              placeholder="내용"
-              rows={30}
-              value={newPost.body}
-            />
-            <Input
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                setNewPost({ ...newPost, userId: Number(e.target.value) })
-              }
-              placeholder="사용자 ID"
-              type="number"
-              value={newPost.userId}
-            />
-            <Button onClick={addPost}>게시물 추가</Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      {/* 게시물 수정 대화상자 */}
-      <Dialog onOpenChange={setShowEditDialog} open={showEditDialog}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>게시물 수정</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <Input
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                setSelectedPost((prev) => (prev ? { ...prev, title: e.target.value } : prev))
-              }
-              placeholder="제목"
-              value={selectedPost?.title || ""}
-            />
-            <Textarea
-              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-                setSelectedPost((prev) => (prev ? { ...prev, body: e.target.value } : prev))
-              }
-              placeholder="내용"
-              rows={15}
-              value={selectedPost?.body || ""}
-            />
-            <Button onClick={updatePost}>게시물 업데이트</Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      {/* 댓글 추가 대화상자 */}
-      <Dialog onOpenChange={setShowAddCommentDialog} open={showAddCommentDialog}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>새 댓글 추가</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <Textarea
-              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-                setNewComment({ ...newComment, body: e.target.value })
-              }
-              placeholder="댓글 내용"
-              value={newComment.body}
-            />
-            <Button
-              onClick={() => {
-                addCommentMutate(newComment)
-                setShowAddCommentDialog(false)
-              }}
-            >
-              댓글 추가
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      {/* 댓글 수정 대화상자 */}
-      <Dialog onOpenChange={setShowEditCommentDialog} open={showEditCommentDialog}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>댓글 수정</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <Textarea
-              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-                setSelectedComment((prev) => (prev ? { ...prev, body: e.target.value } : prev))
-              }
-              placeholder="댓글 내용"
-              value={selectedComment?.body || ""}
-            />
-            <Button onClick={updateComment}>댓글 업데이트</Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      {/* 게시물 상세 보기 대화상자 */}
-      <Dialog onOpenChange={setShowPostDetailDialog} open={showPostDetailDialog}>
-        <DialogContent className="max-w-3xl">
-          <DialogHeader>
-            <DialogTitle>{highlightText(selectedPost?.title, current.search)}</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <p>{highlightText(selectedPost?.body, current.search)}</p>
-            {selectedPost && renderComments(selectedPost.id)}
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      {/* 사용자 모달 */}
-      <Dialog onOpenChange={setShowUserModal} open={showUserModal}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>사용자 정보</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <img alt={userData?.username} className="w-24 h-24 rounded-full mx-auto" src={userData?.image} />
-            <h3 className="text-xl font-semibold text-center">{userData?.username}</h3>
-            <div className="space-y-2">
-              <p>
-                <strong>이름:</strong> {userData?.firstName} {userData?.lastName}
-              </p>
-              <p>
-                <strong>나이:</strong> {userData?.age}
-              </p>
-              <p>
-                <strong>이메일:</strong> {userData?.email}
-              </p>
-              <p>
-                <strong>전화번호:</strong> {userData?.phone}
-              </p>
-              <p>
-                <strong>주소:</strong> {userData?.address?.address}, {userData?.address?.city},{" "}
-                {userData?.address?.state}
-              </p>
-              <p>
-                <strong>직장:</strong> {userData?.company?.name} - {userData?.company?.title}
-              </p>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
+      <AddPostModal />
+      <EditPostModal />
+      <AddCommentModal />
+      <EditCommentModal />
+      <DetailPostModal />
+      <UserProfileModal />
     </Card>
   )
 }

From f9fcb06da017e4c7d8d1bdf6d17ae507e5a9557b Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 06:45:15 +0900
Subject: [PATCH 55/71] =?UTF-8?q?feat:=20post=20table=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20=EA=B5=90?=
 =?UTF-8?q?=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PostsManagerPage.tsx                | 113 ++----------------
 src/widgets/posts-with-users/index.ts         |   4 +-
 src/widgets/posts-with-users/ui/PostTable.tsx | 101 ++++++++++++++++
 3 files changed, 116 insertions(+), 102 deletions(-)
 create mode 100644 src/widgets/posts-with-users/ui/PostTable.tsx

diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 7f364487a..7ff8334b2 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -1,14 +1,12 @@
-import { Edit2, MessageSquare, Plus, Search, ThumbsDown, ThumbsUp, Trash2 } from "lucide-react"
+import { Plus, Search } from "lucide-react"
 import { useEffect, useState } from "react"
 
 import { Post, PostQueryParams } from "@/entities/post"
 import { Tag } from "@/entities/tag"
-import { useDeletePostMutation } from "@/feature/delete-post"
 import { usePostsFilter } from "@/feature/filter-posts/model/usePostsFilter"
 import { useGetTags } from "@/feature/get-tags"
 import { UserSummary } from "@/feature/get-users-summary"
 import { useDebounceValue } from "@/shared/hooks/useDebounceValue"
-import { highlightText } from "@/shared/lib"
 import {
   Button,
   Card,
@@ -21,29 +19,19 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
 } from "@/shared/ui"
 import { AddCommentModal } from "@/widgets/add-comment-modal"
 import { AddPostModal, useAddPostModal } from "@/widgets/add-post-modal"
 import { EditCommentModal } from "@/widgets/edit-comment-modal"
 import { EditPostModal, useEditPostModal } from "@/widgets/edit-post-modal"
 import { DetailPostModal, usePostDetailModal } from "@/widgets/post-detail-modal"
-import { usePostsWithUserSummaryQuery } from "@/widgets/posts-with-users"
+import { PostsTable, usePostsWithUserSummaryQuery } from "@/widgets/posts-with-users"
 import { Pagination } from "@/widgets/posts-with-users/ui/Paginaition"
 import { UserProfileModal, useUserProfileModal } from "@/widgets/user-profile-modal"
 
 export const PostsManagerPage = () => {
   const { current, updateQuery } = usePostsFilter()
 
-  interface PostWithUserSummary extends Post {
-    author?: UserSummary
-  }
-
   const addPostModal = useAddPostModal()
   const editPostModal = useEditPostModal()
   const postDetailModal = usePostDetailModal()
@@ -51,7 +39,6 @@ export const PostsManagerPage = () => {
 
   const { data: postsWithUsers, isLoading } = usePostsWithUserSummaryQuery()
   const { data: tagsData } = useGetTags()
-  const { mutate: deletePostMutate } = useDeletePostMutation()
 
   // 모달 핸들러들
   const openPostDetail = (post: Post) => {
@@ -66,90 +53,6 @@ export const PostsManagerPage = () => {
     editPostModal.open(post)
   }
 
-  // 게시물 삭제
-  const deletePost = (id: number) => {
-    try {
-      deletePostMutate(id)
-    } catch (error) {
-      console.error("게시물 삭제 오류:", error)
-    }
-  }
-
-  // 게시물 테이블 렌더링
-  const renderPostTable = () => (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          <TableHead className="w-[50px]">ID</TableHead>
-          <TableHead>제목</TableHead>
-          <TableHead className="w-[150px]">작성자</TableHead>
-          <TableHead className="w-[150px]">반응</TableHead>
-          <TableHead className="w-[150px]">작업</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {postsWithUsers?.posts.map((post: PostWithUserSummary) => (
-          <TableRow key={post.id}>
-            <TableCell>{post.id}</TableCell>
-            <TableCell>
-              <div className="space-y-1">
-                <div>{highlightText(post.title, current.search)}</div>
-
-                <div className="flex flex-wrap gap-1">
-                  {post.tags?.map((tag: string) => (
-                    <span
-                      className={`px-1 text-[9px] font-semibold rounded-[4px] cursor-pointer ${
-                        current.tag === tag
-                          ? "text-white bg-blue-500 hover:bg-blue-600"
-                          : "text-blue-800 bg-blue-100 hover:bg-blue-200"
-                      }`}
-                      key={tag}
-                      onClick={() => {
-                        updateQuery({ tag })
-                      }}
-                    >
-                      {tag}
-                    </span>
-                  ))}
-                </div>
-              </div>
-            </TableCell>
-            <TableCell>
-              <div
-                className="flex items-center space-x-2 cursor-pointer"
-                onClick={() => post.author && handleOpenUserProfile(post.author)}
-              >
-                <img alt={post.author?.username} className="w-8 h-8 rounded-full" src={post.author?.image} />
-                <span>{post.author?.username}</span>
-              </div>
-            </TableCell>
-            <TableCell>
-              <div className="flex items-center gap-2">
-                <ThumbsUp className="w-4 h-4" />
-                <span>{post.reactions?.likes || 0}</span>
-                <ThumbsDown className="w-4 h-4" />
-                <span>{post.reactions?.dislikes || 0}</span>
-              </div>
-            </TableCell>
-            <TableCell>
-              <div className="flex items-center gap-2">
-                <Button aria-label="댓글 보기" onClick={() => openPostDetail(post)} size="sm" variant="ghost">
-                  <MessageSquare className="w-4 h-4" />
-                </Button>
-                <Button aria-label="게시물 수정" onClick={() => handleEditPost(post)} size="sm" variant="ghost">
-                  <Edit2 className="w-4 h-4" />
-                </Button>
-                <Button aria-label="게시물 삭제" onClick={() => deletePost(post.id)} size="sm" variant="ghost">
-                  <Trash2 className="w-4 h-4" />
-                </Button>
-              </div>
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  )
-
   // 검색 관련 상태와 핸들러
   const [inputValue, setInputValue] = useState(current.search || "")
   const debouncedSearchQuery = useDebounceValue(inputValue, 500)
@@ -247,8 +150,16 @@ export const PostsManagerPage = () => {
           </div>
 
           {/* 게시물 테이블 */}
-          {isLoading ? <div className="flex justify-center p-4">로딩 중...</div> : renderPostTable()}
-
+          {isLoading ? (
+            <div className="flex justify-center p-4">로딩 중...</div>
+          ) : (
+            <PostsTable
+              onEditPost={handleEditPost}
+              onPostDetail={openPostDetail}
+              onUserClick={handleOpenUserProfile}
+              posts={postsWithUsers?.posts || []}
+            />
+          )}
           {/* 페이지네이션 */}
           {postsWithUsers && <Pagination postsWithUsers={postsWithUsers} />}
         </div>
diff --git a/src/widgets/posts-with-users/index.ts b/src/widgets/posts-with-users/index.ts
index c98ebcdc0..20c438080 100644
--- a/src/widgets/posts-with-users/index.ts
+++ b/src/widgets/posts-with-users/index.ts
@@ -1 +1,3 @@
-export * from "./api/queries"
+export { usePostsWithUserSummaryQuery } from "./api/queries"
+export { Pagination } from "./ui/Paginaition"
+export { PostsTable } from "./ui/PostTable"
diff --git a/src/widgets/posts-with-users/ui/PostTable.tsx b/src/widgets/posts-with-users/ui/PostTable.tsx
new file mode 100644
index 000000000..1e04d7e4d
--- /dev/null
+++ b/src/widgets/posts-with-users/ui/PostTable.tsx
@@ -0,0 +1,101 @@
+import { Edit2, MessageSquare, ThumbsDown, ThumbsUp, Trash2 } from "lucide-react"
+
+import { Post } from "@/entities/post"
+import { useDeletePostMutation } from "@/feature/delete-post"
+import { usePostsFilter } from "@/feature/filter-posts/model/usePostsFilter"
+import { UserSummary } from "@/feature/get-users-summary"
+import { highlightText } from "@/shared/lib"
+import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/ui"
+
+import { PostWithUserSummary } from "../model/types"
+
+interface PostsTableProps {
+  onEditPost: (post: Post) => void
+  onPostDetail: (post: Post) => void
+  onUserClick: (user: UserSummary) => void
+  posts: PostWithUserSummary[]
+}
+
+export const PostsTable = ({ onEditPost, onPostDetail, onUserClick, posts }: PostsTableProps) => {
+  const { current, updateQuery } = usePostsFilter()
+  const { mutate: deletePostMutate } = useDeletePostMutation()
+
+  const handleDeletePost = (id: number) => {
+    try {
+      deletePostMutate(id)
+    } catch (error) {
+      console.error("게시물 삭제 오류:", error)
+    }
+  }
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[50px]">ID</TableHead>
+          <TableHead>제목</TableHead>
+          <TableHead className="w-[150px]">작성자</TableHead>
+          <TableHead className="w-[150px]">반응</TableHead>
+          <TableHead className="w-[150px]">작업</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {posts.map((post) => (
+          <TableRow key={post.id}>
+            <TableCell>{post.id}</TableCell>
+            <TableCell>
+              <div className="space-y-1">
+                <div>{highlightText(post.title, current.search)}</div>
+                <div className="flex flex-wrap gap-1">
+                  {post.tags?.map((tag: string) => (
+                    <span
+                      className={`px-1 text-[9px] font-semibold rounded-[4px] cursor-pointer ${
+                        current.tag === tag
+                          ? "text-white bg-blue-500 hover:bg-blue-600"
+                          : "text-blue-800 bg-blue-100 hover:bg-blue-200"
+                      }`}
+                      key={tag}
+                      onClick={() => updateQuery({ tag })}
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </TableCell>
+            <TableCell>
+              <div
+                className="flex items-center space-x-2 cursor-pointer"
+                onClick={() => post.author && onUserClick(post.author)}
+              >
+                <img alt={post.author?.username} className="w-8 h-8 rounded-full" src={post.author?.image} />
+                <span>{post.author?.username}</span>
+              </div>
+            </TableCell>
+            <TableCell>
+              <div className="flex items-center gap-2">
+                <ThumbsUp className="w-4 h-4" />
+                <span>{post.reactions?.likes || 0}</span>
+                <ThumbsDown className="w-4 h-4" />
+                <span>{post.reactions?.dislikes || 0}</span>
+              </div>
+            </TableCell>
+            <TableCell>
+              <div className="flex items-center gap-2">
+                <Button aria-label="댓글 보기" onClick={() => onPostDetail(post)} size="sm" variant="ghost">
+                  <MessageSquare className="w-4 h-4" />
+                </Button>
+                <Button aria-label="게시물 수정" onClick={() => onEditPost(post)} size="sm" variant="ghost">
+                  <Edit2 className="w-4 h-4" />
+                </Button>
+                <Button aria-label="게시물 삭제" onClick={() => handleDeletePost(post.id)} size="sm" variant="ghost">
+                  <Trash2 className="w-4 h-4" />
+                </Button>
+              </div>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}

From a2a54908336397cc7b0b726c78edc4e311936e1a Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 06:49:32 +0900
Subject: [PATCH 56/71] =?UTF-8?q?chore:=20=ED=9B=85=20=EC=9D=B4=EB=A6=84?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/feature/filter-posts/index.ts                             | 1 -
 src/feature/post-query/index.ts                               | 1 +
 .../usePostsFilter.ts => post-query/model/usePostsQuery.ts}   | 2 +-
 src/pages/PostsManagerPage.tsx                                | 4 ++--
 src/widgets/post-detail-modal/ui/PostComments.tsx             | 4 ++--
 src/widgets/post-detail-modal/ui/PostDetailModal.tsx          | 4 ++--
 src/widgets/posts-with-users/api/queries.ts                   | 4 ++--
 src/widgets/posts-with-users/ui/Paginaition.tsx               | 4 ++--
 src/widgets/posts-with-users/ui/PostTable.tsx                 | 4 ++--
 9 files changed, 14 insertions(+), 14 deletions(-)
 delete mode 100644 src/feature/filter-posts/index.ts
 create mode 100644 src/feature/post-query/index.ts
 rename src/feature/{filter-posts/model/usePostsFilter.ts => post-query/model/usePostsQuery.ts} (97%)

diff --git a/src/feature/filter-posts/index.ts b/src/feature/filter-posts/index.ts
deleted file mode 100644
index dcca9db95..000000000
--- a/src/feature/filter-posts/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./model/usePostsFilter"
diff --git a/src/feature/post-query/index.ts b/src/feature/post-query/index.ts
new file mode 100644
index 000000000..60966a8b8
--- /dev/null
+++ b/src/feature/post-query/index.ts
@@ -0,0 +1 @@
+export * from "./model/usePostsQuery"
diff --git a/src/feature/filter-posts/model/usePostsFilter.ts b/src/feature/post-query/model/usePostsQuery.ts
similarity index 97%
rename from src/feature/filter-posts/model/usePostsFilter.ts
rename to src/feature/post-query/model/usePostsQuery.ts
index e307f8717..9b4f18f8a 100644
--- a/src/feature/filter-posts/model/usePostsFilter.ts
+++ b/src/feature/post-query/model/usePostsQuery.ts
@@ -3,7 +3,7 @@ import { useSearchParams } from "react-router-dom"
 
 import { PostQueryParams } from "@/entities/post/model/types"
 
-export const usePostsFilter = () => {
+export const usePostsQuery = () => {
   const [searchParams, setSearchParams] = useSearchParams()
 
   const current = useMemo(
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 7ff8334b2..2584bfca4 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -3,9 +3,9 @@ import { useEffect, useState } from "react"
 
 import { Post, PostQueryParams } from "@/entities/post"
 import { Tag } from "@/entities/tag"
-import { usePostsFilter } from "@/feature/filter-posts/model/usePostsFilter"
 import { useGetTags } from "@/feature/get-tags"
 import { UserSummary } from "@/feature/get-users-summary"
+import { usePostsQuery } from "@/feature/post-query/model/usePostsQuery"
 import { useDebounceValue } from "@/shared/hooks/useDebounceValue"
 import {
   Button,
@@ -30,7 +30,7 @@ import { Pagination } from "@/widgets/posts-with-users/ui/Paginaition"
 import { UserProfileModal, useUserProfileModal } from "@/widgets/user-profile-modal"
 
 export const PostsManagerPage = () => {
-  const { current, updateQuery } = usePostsFilter()
+  const { current, updateQuery } = usePostsQuery()
 
   const addPostModal = useAddPostModal()
   const editPostModal = useEditPostModal()
diff --git a/src/widgets/post-detail-modal/ui/PostComments.tsx b/src/widgets/post-detail-modal/ui/PostComments.tsx
index b930ddd3e..9a1083250 100644
--- a/src/widgets/post-detail-modal/ui/PostComments.tsx
+++ b/src/widgets/post-detail-modal/ui/PostComments.tsx
@@ -3,8 +3,8 @@ import { Edit2, Plus, ThumbsUp, Trash2 } from "lucide-react"
 import { Comment } from "@/entities/comment"
 import { useCommentLikeMutation } from "@/feature/comment-like"
 import { useDeleteCommentMutation } from "@/feature/delete-comment"
-import { usePostsFilter } from "@/feature/filter-posts"
 import { useGetComments } from "@/feature/get-comments"
+import { usePostsQuery } from "@/feature/post-query"
 import { highlightText } from "@/shared/lib"
 import { Button } from "@/shared/ui"
 import { useAddCommentModal } from "@/widgets/add-comment-modal"
@@ -16,7 +16,7 @@ interface PostCommentsProps {
 
 export const PostComments = ({ postId }: PostCommentsProps) => {
   const { data: comments } = useGetComments(postId)
-  const { current } = usePostsFilter()
+  const { current } = usePostsQuery()
 
   const addCommentModal = useAddCommentModal()
   const editCommentModal = useEditCommentModal()
diff --git a/src/widgets/post-detail-modal/ui/PostDetailModal.tsx b/src/widgets/post-detail-modal/ui/PostDetailModal.tsx
index 49808f58e..032488e96 100644
--- a/src/widgets/post-detail-modal/ui/PostDetailModal.tsx
+++ b/src/widgets/post-detail-modal/ui/PostDetailModal.tsx
@@ -1,4 +1,4 @@
-import { usePostsFilter } from "@/feature/filter-posts"
+import { usePostsQuery } from "@/feature/post-query"
 import { highlightText } from "@/shared/lib"
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/ui"
 
@@ -7,7 +7,7 @@ import { PostComments } from "./PostComments"
 
 export const DetailPostModal = () => {
   const { close, data: selectedPost, isOpen } = usePostDetailModal()
-  const { current } = usePostsFilter()
+  const { current } = usePostsQuery()
 
   return (
     <Dialog onOpenChange={close} open={isOpen}>
diff --git a/src/widgets/posts-with-users/api/queries.ts b/src/widgets/posts-with-users/api/queries.ts
index 50832e12d..67dda93b0 100644
--- a/src/widgets/posts-with-users/api/queries.ts
+++ b/src/widgets/posts-with-users/api/queries.ts
@@ -1,11 +1,11 @@
 import { useQuery } from "@tanstack/react-query"
 
-import { usePostsFilter } from "@/feature/filter-posts/model/usePostsFilter"
 import { getPosts } from "@/feature/get-posts/api"
 import { getUsersSummary } from "@/feature/get-users-summary"
+import { usePostsQuery } from "@/feature/post-query/model/usePostsQuery"
 
 export const usePostsWithUserSummaryQuery = () => {
-  const { current, getChangedField } = usePostsFilter()
+  const { current, getChangedField } = usePostsQuery()
   const { limit, order, search, skip, sortBy, tag } = current
 
   return useQuery({
diff --git a/src/widgets/posts-with-users/ui/Paginaition.tsx b/src/widgets/posts-with-users/ui/Paginaition.tsx
index b98c00304..95ff2d26a 100644
--- a/src/widgets/posts-with-users/ui/Paginaition.tsx
+++ b/src/widgets/posts-with-users/ui/Paginaition.tsx
@@ -1,10 +1,10 @@
-import { usePostsFilter } from "@/feature/filter-posts"
+import { usePostsQuery } from "@/feature/post-query"
 import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/ui"
 
 import { PostWithUserSummaryReseponse } from "../model/types"
 
 export const Pagination = ({ postsWithUsers }: { postsWithUsers: PostWithUserSummaryReseponse }) => {
-  const { current, updateQuery } = usePostsFilter()
+  const { current, updateQuery } = usePostsQuery()
 
   return (
     <div className="flex justify-between items-center">
diff --git a/src/widgets/posts-with-users/ui/PostTable.tsx b/src/widgets/posts-with-users/ui/PostTable.tsx
index 1e04d7e4d..4742d75d4 100644
--- a/src/widgets/posts-with-users/ui/PostTable.tsx
+++ b/src/widgets/posts-with-users/ui/PostTable.tsx
@@ -2,8 +2,8 @@ import { Edit2, MessageSquare, ThumbsDown, ThumbsUp, Trash2 } from "lucide-react
 
 import { Post } from "@/entities/post"
 import { useDeletePostMutation } from "@/feature/delete-post"
-import { usePostsFilter } from "@/feature/filter-posts/model/usePostsFilter"
 import { UserSummary } from "@/feature/get-users-summary"
+import { usePostsQuery } from "@/feature/post-query/model/usePostsQuery"
 import { highlightText } from "@/shared/lib"
 import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/ui"
 
@@ -17,7 +17,7 @@ interface PostsTableProps {
 }
 
 export const PostsTable = ({ onEditPost, onPostDetail, onUserClick, posts }: PostsTableProps) => {
-  const { current, updateQuery } = usePostsFilter()
+  const { current, updateQuery } = usePostsQuery()
   const { mutate: deletePostMutate } = useDeletePostMutation()
 
   const handleDeletePost = (id: number) => {

From 4d8fc9ac98dca8e8f01fc9b3aedf7c24ec1d2663 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 07:00:59 +0900
Subject: [PATCH 57/71] =?UTF-8?q?feat:=20post=20filter=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=20=EB=B0=8F=20=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/feature/posts-filter/index.ts           |   1 +
 src/feature/posts-filter/ui/PostsFilter.tsx |  99 ++++++++++++++++++
 src/pages/PostsManagerPage.tsx              | 110 ++------------------
 3 files changed, 106 insertions(+), 104 deletions(-)
 create mode 100644 src/feature/posts-filter/index.ts
 create mode 100644 src/feature/posts-filter/ui/PostsFilter.tsx

diff --git a/src/feature/posts-filter/index.ts b/src/feature/posts-filter/index.ts
new file mode 100644
index 000000000..b4a7c560e
--- /dev/null
+++ b/src/feature/posts-filter/index.ts
@@ -0,0 +1 @@
+export { PostsFilter } from "./ui/PostsFilter"
diff --git a/src/feature/posts-filter/ui/PostsFilter.tsx b/src/feature/posts-filter/ui/PostsFilter.tsx
new file mode 100644
index 000000000..45aa07f5b
--- /dev/null
+++ b/src/feature/posts-filter/ui/PostsFilter.tsx
@@ -0,0 +1,99 @@
+import { Search } from "lucide-react"
+import { useEffect, useState } from "react"
+
+import { PostQueryParams } from "@/entities/post"
+import { Tag } from "@/entities/tag"
+import { useGetTags } from "@/feature/get-tags"
+import { usePostsQuery } from "@/feature/post-query/model/usePostsQuery"
+import { useDebounceValue } from "@/shared/hooks/useDebounceValue"
+import { Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/ui"
+
+export const PostsFilter = () => {
+  const { current, updateQuery } = usePostsQuery()
+  const { data: tagsData } = useGetTags()
+
+  const [inputValue, setInputValue] = useState(current.search || "")
+  const debouncedSearchQuery = useDebounceValue(inputValue, 500)
+
+  useEffect(() => {
+    updateQuery({ search: debouncedSearchQuery })
+  }, [debouncedSearchQuery, updateQuery])
+
+  useEffect(() => {
+    setInputValue(current.search || "")
+  }, [current.search])
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value)
+  }
+
+  const handleSearchKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      updateQuery({ search: inputValue })
+    }
+  }
+
+  return (
+    <div className="flex gap-4">
+      {/* 검색 입력 */}
+      <div className="flex-1">
+        <div className="relative">
+          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            aria-label="게시물 검색"
+            className="pl-8"
+            onChange={handleSearchChange}
+            onKeyPress={handleSearchKeyPress}
+            placeholder="게시물 검색..."
+            value={inputValue}
+          />
+        </div>
+      </div>
+
+      {/* 태그 필터 */}
+      <Select onValueChange={(value) => updateQuery({ tag: value })} value={current.tag}>
+        <SelectTrigger className="w-[180px]">
+          <SelectValue placeholder="태그 선택" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">모든 태그</SelectItem>
+          {tagsData?.map((tag: Tag) => (
+            <SelectItem key={tag.url} value={tag.slug}>
+              {tag.slug}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      {/* 정렬 기준 */}
+      <Select
+        onValueChange={(value: string) => updateQuery({ sortBy: value as PostQueryParams["sortBy"] })}
+        value={current.sortBy}
+      >
+        <SelectTrigger className="w-[180px]">
+          <SelectValue placeholder="정렬 기준" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="none">없음</SelectItem>
+          <SelectItem value="id">ID</SelectItem>
+          <SelectItem value="title">제목</SelectItem>
+          <SelectItem value="reactions">반응</SelectItem>
+        </SelectContent>
+      </Select>
+
+      {/* 정렬 순서 */}
+      <Select
+        onValueChange={(value) => updateQuery({ order: value as PostQueryParams["order"] })}
+        value={current.order}
+      >
+        <SelectTrigger className="w-[180px]">
+          <SelectValue placeholder="정렬 순서" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="asc">오름차순</SelectItem>
+          <SelectItem value="desc">내림차순</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 2584bfca4..c6050cc3c 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -1,25 +1,9 @@
-import { Plus, Search } from "lucide-react"
-import { useEffect, useState } from "react"
+import { Plus } from "lucide-react"
 
-import { Post, PostQueryParams } from "@/entities/post"
-import { Tag } from "@/entities/tag"
-import { useGetTags } from "@/feature/get-tags"
+import { Post } from "@/entities/post"
 import { UserSummary } from "@/feature/get-users-summary"
-import { usePostsQuery } from "@/feature/post-query/model/usePostsQuery"
-import { useDebounceValue } from "@/shared/hooks/useDebounceValue"
-import {
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Input,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/shared/ui"
+import { PostsFilter } from "@/feature/posts-filter"
+import { Button, Card, CardContent, CardHeader, CardTitle } from "@/shared/ui"
 import { AddCommentModal } from "@/widgets/add-comment-modal"
 import { AddPostModal, useAddPostModal } from "@/widgets/add-post-modal"
 import { EditCommentModal } from "@/widgets/edit-comment-modal"
@@ -30,15 +14,12 @@ import { Pagination } from "@/widgets/posts-with-users/ui/Paginaition"
 import { UserProfileModal, useUserProfileModal } from "@/widgets/user-profile-modal"
 
 export const PostsManagerPage = () => {
-  const { current, updateQuery } = usePostsQuery()
-
   const addPostModal = useAddPostModal()
   const editPostModal = useEditPostModal()
   const postDetailModal = usePostDetailModal()
   const userProfileModal = useUserProfileModal()
 
   const { data: postsWithUsers, isLoading } = usePostsWithUserSummaryQuery()
-  const { data: tagsData } = useGetTags()
 
   // 모달 핸들러들
   const openPostDetail = (post: Post) => {
@@ -53,28 +34,6 @@ export const PostsManagerPage = () => {
     editPostModal.open(post)
   }
 
-  // 검색 관련 상태와 핸들러
-  const [inputValue, setInputValue] = useState(current.search || "")
-  const debouncedSearchQuery = useDebounceValue(inputValue, 500)
-
-  useEffect(() => {
-    updateQuery({ search: debouncedSearchQuery })
-  }, [debouncedSearchQuery, updateQuery])
-
-  useEffect(() => {
-    setInputValue(current.search || "")
-  }, [current.search])
-
-  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value)
-  }
-
-  const handleSearchKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
-      updateQuery({ search: inputValue })
-    }
-  }
-
   return (
     <Card className="w-full max-w-6xl mx-auto">
       <CardHeader>
@@ -89,65 +48,7 @@ export const PostsManagerPage = () => {
       <CardContent>
         <div className="flex flex-col gap-4">
           {/* 검색 및 필터 컨트롤 */}
-          <div className="flex gap-4">
-            <div className="flex-1">
-              <div className="relative">
-                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-                <Input
-                  aria-label="게시물 검색"
-                  className="pl-8"
-                  onChange={handleSearchChange}
-                  onKeyPress={handleSearchKeyPress}
-                  placeholder="게시물 검색..."
-                  value={inputValue}
-                />
-              </div>
-            </div>
-            <Select
-              onValueChange={(value) => {
-                updateQuery({ tag: value })
-              }}
-              value={current.tag}
-            >
-              <SelectTrigger className="w-[180px]">
-                <SelectValue placeholder="태그 선택" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">모든 태그</SelectItem>
-                {tagsData?.map((tag: Tag) => (
-                  <SelectItem key={tag.url} value={tag.slug}>
-                    {tag.slug}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <Select
-              onValueChange={(value: string) => updateQuery({ sortBy: value as PostQueryParams["sortBy"] })}
-              value={current.sortBy}
-            >
-              <SelectTrigger className="w-[180px]">
-                <SelectValue placeholder="정렬 기준" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="none">없음</SelectItem>
-                <SelectItem value="id">ID</SelectItem>
-                <SelectItem value="title">제목</SelectItem>
-                <SelectItem value="reactions">반응</SelectItem>
-              </SelectContent>
-            </Select>
-            <Select
-              onValueChange={(value) => updateQuery({ order: value as PostQueryParams["order"] })}
-              value={current.order}
-            >
-              <SelectTrigger className="w-[180px]">
-                <SelectValue placeholder="정렬 순서" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="asc">오름차순</SelectItem>
-                <SelectItem value="desc">내림차순</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
+          <PostsFilter />
 
           {/* 게시물 테이블 */}
           {isLoading ? (
@@ -160,6 +61,7 @@ export const PostsManagerPage = () => {
               posts={postsWithUsers?.posts || []}
             />
           )}
+
           {/* 페이지네이션 */}
           {postsWithUsers && <Pagination postsWithUsers={postsWithUsers} />}
         </div>

From b16d6c673f041ffd93478a61ea9d1ffe3c9a786b Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 07:19:42 +0900
Subject: [PATCH 58/71] =?UTF-8?q?refactor:=20props=20=EB=A5=BC=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=82=B4=EB=B6=80=EB=A1=9C=20?=
 =?UTF-8?q?=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PostsManagerPage.tsx                | 46 +++----------------
 .../posts-with-users/ui/Paginaition.tsx       |  7 +--
 src/widgets/posts-with-users/ui/PostTable.tsx | 44 ++++++++++++------
 3 files changed, 41 insertions(+), 56 deletions(-)

diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index c6050cc3c..751ffa789 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -1,38 +1,18 @@
 import { Plus } from "lucide-react"
 
-import { Post } from "@/entities/post"
-import { UserSummary } from "@/feature/get-users-summary"
 import { PostsFilter } from "@/feature/posts-filter"
 import { Button, Card, CardContent, CardHeader, CardTitle } from "@/shared/ui"
 import { AddCommentModal } from "@/widgets/add-comment-modal"
 import { AddPostModal, useAddPostModal } from "@/widgets/add-post-modal"
 import { EditCommentModal } from "@/widgets/edit-comment-modal"
-import { EditPostModal, useEditPostModal } from "@/widgets/edit-post-modal"
-import { DetailPostModal, usePostDetailModal } from "@/widgets/post-detail-modal"
-import { PostsTable, usePostsWithUserSummaryQuery } from "@/widgets/posts-with-users"
+import { EditPostModal } from "@/widgets/edit-post-modal"
+import { DetailPostModal } from "@/widgets/post-detail-modal"
+import { PostsTable } from "@/widgets/posts-with-users"
 import { Pagination } from "@/widgets/posts-with-users/ui/Paginaition"
-import { UserProfileModal, useUserProfileModal } from "@/widgets/user-profile-modal"
+import { UserProfileModal } from "@/widgets/user-profile-modal"
 
 export const PostsManagerPage = () => {
   const addPostModal = useAddPostModal()
-  const editPostModal = useEditPostModal()
-  const postDetailModal = usePostDetailModal()
-  const userProfileModal = useUserProfileModal()
-
-  const { data: postsWithUsers, isLoading } = usePostsWithUserSummaryQuery()
-
-  // 모달 핸들러들
-  const openPostDetail = (post: Post) => {
-    postDetailModal.open(post)
-  }
-
-  const handleOpenUserProfile = (user: UserSummary) => {
-    userProfileModal.open(user)
-  }
-
-  const handleEditPost = (post: Post) => {
-    editPostModal.open(post)
-  }
 
   return (
     <Card className="w-full max-w-6xl mx-auto">
@@ -47,23 +27,9 @@ export const PostsManagerPage = () => {
       </CardHeader>
       <CardContent>
         <div className="flex flex-col gap-4">
-          {/* 검색 및 필터 컨트롤 */}
           <PostsFilter />
-
-          {/* 게시물 테이블 */}
-          {isLoading ? (
-            <div className="flex justify-center p-4">로딩 중...</div>
-          ) : (
-            <PostsTable
-              onEditPost={handleEditPost}
-              onPostDetail={openPostDetail}
-              onUserClick={handleOpenUserProfile}
-              posts={postsWithUsers?.posts || []}
-            />
-          )}
-
-          {/* 페이지네이션 */}
-          {postsWithUsers && <Pagination postsWithUsers={postsWithUsers} />}
+          <PostsTable />
+          <Pagination />
         </div>
       </CardContent>
 
diff --git a/src/widgets/posts-with-users/ui/Paginaition.tsx b/src/widgets/posts-with-users/ui/Paginaition.tsx
index 95ff2d26a..731e60ee8 100644
--- a/src/widgets/posts-with-users/ui/Paginaition.tsx
+++ b/src/widgets/posts-with-users/ui/Paginaition.tsx
@@ -1,10 +1,11 @@
 import { usePostsQuery } from "@/feature/post-query"
 import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/ui"
 
-import { PostWithUserSummaryReseponse } from "../model/types"
+import { usePostsWithUserSummaryQuery } from "../api/queries"
 
-export const Pagination = ({ postsWithUsers }: { postsWithUsers: PostWithUserSummaryReseponse }) => {
+export const Pagination = () => {
   const { current, updateQuery } = usePostsQuery()
+  const { data: postsWithUsers } = usePostsWithUserSummaryQuery()
 
   return (
     <div className="flex justify-between items-center">
@@ -30,7 +31,7 @@ export const Pagination = ({ postsWithUsers }: { postsWithUsers: PostWithUserSum
           이전
         </Button>
         <Button
-          disabled={current.skip + current.limit >= postsWithUsers.total}
+          disabled={current.skip + current.limit >= (postsWithUsers?.total || 0)}
           onClick={() => updateQuery({ skip: current.skip + current.limit })}
         >
           다음
diff --git a/src/widgets/posts-with-users/ui/PostTable.tsx b/src/widgets/posts-with-users/ui/PostTable.tsx
index 4742d75d4..6e423f7d3 100644
--- a/src/widgets/posts-with-users/ui/PostTable.tsx
+++ b/src/widgets/posts-with-users/ui/PostTable.tsx
@@ -6,19 +6,33 @@ import { UserSummary } from "@/feature/get-users-summary"
 import { usePostsQuery } from "@/feature/post-query/model/usePostsQuery"
 import { highlightText } from "@/shared/lib"
 import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/ui"
+import { useEditPostModal } from "@/widgets/edit-post-modal"
+import { usePostDetailModal } from "@/widgets/post-detail-modal"
+import { useUserProfileModal } from "@/widgets/user-profile-modal"
 
-import { PostWithUserSummary } from "../model/types"
+import { usePostsWithUserSummaryQuery } from "../api/queries"
 
-interface PostsTableProps {
-  onEditPost: (post: Post) => void
-  onPostDetail: (post: Post) => void
-  onUserClick: (user: UserSummary) => void
-  posts: PostWithUserSummary[]
-}
-
-export const PostsTable = ({ onEditPost, onPostDetail, onUserClick, posts }: PostsTableProps) => {
+export const PostsTable = () => {
   const { current, updateQuery } = usePostsQuery()
   const { mutate: deletePostMutate } = useDeletePostMutation()
+  const { data: postsWithUsers, isLoading } = usePostsWithUserSummaryQuery()
+
+  const editPostModal = useEditPostModal()
+  const postDetailModal = usePostDetailModal()
+  const userProfileModal = useUserProfileModal()
+
+  // 모달 핸들러들
+  const openPostDetail = (post: Post) => {
+    postDetailModal.open(post)
+  }
+
+  const handleOpenUserProfile = (user: UserSummary) => {
+    userProfileModal.open(user)
+  }
+
+  const handleEditPost = (post: Post) => {
+    editPostModal.open(post)
+  }
 
   const handleDeletePost = (id: number) => {
     try {
@@ -28,6 +42,10 @@ export const PostsTable = ({ onEditPost, onPostDetail, onUserClick, posts }: Pos
     }
   }
 
+  if (isLoading) {
+    return <div className="flex justify-center p-4">로딩 중...</div>
+  }
+
   return (
     <Table>
       <TableHeader>
@@ -40,7 +58,7 @@ export const PostsTable = ({ onEditPost, onPostDetail, onUserClick, posts }: Pos
         </TableRow>
       </TableHeader>
       <TableBody>
-        {posts.map((post) => (
+        {postsWithUsers?.posts.map((post) => (
           <TableRow key={post.id}>
             <TableCell>{post.id}</TableCell>
             <TableCell>
@@ -66,7 +84,7 @@ export const PostsTable = ({ onEditPost, onPostDetail, onUserClick, posts }: Pos
             <TableCell>
               <div
                 className="flex items-center space-x-2 cursor-pointer"
-                onClick={() => post.author && onUserClick(post.author)}
+                onClick={() => post.author && handleOpenUserProfile(post.author)}
               >
                 <img alt={post.author?.username} className="w-8 h-8 rounded-full" src={post.author?.image} />
                 <span>{post.author?.username}</span>
@@ -82,10 +100,10 @@ export const PostsTable = ({ onEditPost, onPostDetail, onUserClick, posts }: Pos
             </TableCell>
             <TableCell>
               <div className="flex items-center gap-2">
-                <Button aria-label="댓글 보기" onClick={() => onPostDetail(post)} size="sm" variant="ghost">
+                <Button aria-label="댓글 보기" onClick={() => openPostDetail(post)} size="sm" variant="ghost">
                   <MessageSquare className="w-4 h-4" />
                 </Button>
-                <Button aria-label="게시물 수정" onClick={() => onEditPost(post)} size="sm" variant="ghost">
+                <Button aria-label="게시물 수정" onClick={() => handleEditPost(post)} size="sm" variant="ghost">
                   <Edit2 className="w-4 h-4" />
                 </Button>
                 <Button aria-label="게시물 삭제" onClick={() => handleDeletePost(post.id)} size="sm" variant="ghost">

From a71e3aa76ee99dc810b8621ad8d84cef1ce1f9f2 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 08:33:24 +0900
Subject: [PATCH 59/71] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=20=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/feature/add-post/index.ts                 |  2 +
 .../add-post}/model/useAddPostModal.ts        |  0
 src/feature/add-post/ui/AddPostButton.tsx     | 20 +++++++
 .../add-post}/ui/AddPostModal.tsx             |  5 +-
 src/feature/update-post/index.ts              |  2 +
 .../update-post/model/useUpdatePostModal.ts}  |  4 +-
 .../update-post/ui/UpdatePostButton.tsx       | 24 ++++++++
 .../update-post/ui/UpdatePostModal.tsx}       | 12 ++--
 src/pages/PostsManagerPage.tsx                | 25 +--------
 src/widgets/add-comment-modal/index.ts        |  5 +-
 .../add-comment-modal/ui/AddCommentButton.tsx | 29 ++++++++++
 .../add-comment-modal/ui/AddCommentModal.tsx  | 11 ++--
 src/widgets/add-post-modal/index.ts           |  2 -
 src/widgets/edit-comment-modal/index.ts       |  5 +-
 ...mmentModal.ts => useUpdateCommentModal.ts} |  4 +-
 .../ui/UpdateCommentButton.tsx                | 30 ++++++++++
 ...ommentModal.tsx => UpdateCommentModal.tsx} | 11 ++--
 src/widgets/edit-post-modal/index.ts          |  2 -
 src/widgets/post-detail-modal/index.ts        |  2 +
 .../post-detail-modal/ui/PostComments.tsx     | 26 ++-------
 .../post-detail-modal/ui/PostDetailButton.tsx | 29 ++++++++++
 .../post-detail-modal/ui/PostDetailModal.tsx  | 11 +++-
 src/widgets/posts-with-users/ui/PostTable.tsx | 55 +++----------------
 src/widgets/user-profile-modal/index.ts       |  1 +
 .../ui/UserProfileButton.tsx                  | 32 +++++++++++
 .../ui/UserProfileModal.tsx                   | 10 +++-
 26 files changed, 236 insertions(+), 123 deletions(-)
 rename src/{widgets/add-post-modal => feature/add-post}/model/useAddPostModal.ts (100%)
 create mode 100644 src/feature/add-post/ui/AddPostButton.tsx
 rename src/{widgets/add-post-modal => feature/add-post}/ui/AddPostModal.tsx (92%)
 rename src/{widgets/edit-post-modal/model/useEditPostModal.ts => feature/update-post/model/useUpdatePostModal.ts} (53%)
 create mode 100644 src/feature/update-post/ui/UpdatePostButton.tsx
 rename src/{widgets/edit-post-modal/ui/EditPostModal.tsx => feature/update-post/ui/UpdatePostModal.tsx} (82%)
 create mode 100644 src/widgets/add-comment-modal/ui/AddCommentButton.tsx
 delete mode 100644 src/widgets/add-post-modal/index.ts
 rename src/widgets/edit-comment-modal/model/{useEditCommentModal.ts => useUpdateCommentModal.ts} (52%)
 create mode 100644 src/widgets/edit-comment-modal/ui/UpdateCommentButton.tsx
 rename src/widgets/edit-comment-modal/ui/{EditCommentModal.tsx => UpdateCommentModal.tsx} (81%)
 delete mode 100644 src/widgets/edit-post-modal/index.ts
 create mode 100644 src/widgets/post-detail-modal/ui/PostDetailButton.tsx
 create mode 100644 src/widgets/user-profile-modal/ui/UserProfileButton.tsx

diff --git a/src/feature/add-post/index.ts b/src/feature/add-post/index.ts
index c98ebcdc0..fdabef4a4 100644
--- a/src/feature/add-post/index.ts
+++ b/src/feature/add-post/index.ts
@@ -1 +1,3 @@
 export * from "./api/queries"
+export * from "./ui/AddPostButton"
+export * from "./ui/AddPostModal"
diff --git a/src/widgets/add-post-modal/model/useAddPostModal.ts b/src/feature/add-post/model/useAddPostModal.ts
similarity index 100%
rename from src/widgets/add-post-modal/model/useAddPostModal.ts
rename to src/feature/add-post/model/useAddPostModal.ts
diff --git a/src/feature/add-post/ui/AddPostButton.tsx b/src/feature/add-post/ui/AddPostButton.tsx
new file mode 100644
index 000000000..7e248f818
--- /dev/null
+++ b/src/feature/add-post/ui/AddPostButton.tsx
@@ -0,0 +1,20 @@
+import { Plus } from "lucide-react"
+
+import { Button } from "@/shared/ui"
+
+import { useAddPostModal } from "../model/useAddPostModal"
+import { AddPostModal } from "./AddPostModal"
+
+export const AddPostButton = () => {
+  const addPostModal = useAddPostModal()
+
+  return (
+    <>
+      <Button onClick={() => addPostModal.open()}>
+        <Plus className="w-4 h-4 mr-2" />
+        게시물 추가
+      </Button>
+      <AddPostModal />
+    </>
+  )
+}
diff --git a/src/widgets/add-post-modal/ui/AddPostModal.tsx b/src/feature/add-post/ui/AddPostModal.tsx
similarity index 92%
rename from src/widgets/add-post-modal/ui/AddPostModal.tsx
rename to src/feature/add-post/ui/AddPostModal.tsx
index 75b5b7dba..bd03b7d1f 100644
--- a/src/widgets/add-post-modal/ui/AddPostModal.tsx
+++ b/src/feature/add-post/ui/AddPostModal.tsx
@@ -1,10 +1,9 @@
 import { useState } from "react"
 
 import { useAddPostMutation } from "@/feature/add-post"
+import { useAddPostModal } from "@/feature/add-post/model/useAddPostModal"
 import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Input, Textarea } from "@/shared/ui"
 
-import { useAddPostModal } from "../model/useAddPostModal"
-
 export const AddPostModal = () => {
   const { close, isOpen } = useAddPostModal()
   const { mutate: addPostMutate } = useAddPostMutation()
@@ -30,7 +29,7 @@ export const AddPostModal = () => {
 
   return (
     <Dialog onOpenChange={handleClose} open={isOpen}>
-      <DialogContent>
+      <DialogContent aria-label="새 게시물 추가">
         <DialogHeader>
           <DialogTitle>새 게시물 추가</DialogTitle>
         </DialogHeader>
diff --git a/src/feature/update-post/index.ts b/src/feature/update-post/index.ts
index c98ebcdc0..bcfc7b78c 100644
--- a/src/feature/update-post/index.ts
+++ b/src/feature/update-post/index.ts
@@ -1 +1,3 @@
 export * from "./api/queries"
+export * from "./ui/UpdatePostButton"
+export * from "./ui/UpdatePostModal"
diff --git a/src/widgets/edit-post-modal/model/useEditPostModal.ts b/src/feature/update-post/model/useUpdatePostModal.ts
similarity index 53%
rename from src/widgets/edit-post-modal/model/useEditPostModal.ts
rename to src/feature/update-post/model/useUpdatePostModal.ts
index 710a0c616..ba92ad6b2 100644
--- a/src/widgets/edit-post-modal/model/useEditPostModal.ts
+++ b/src/feature/update-post/model/useUpdatePostModal.ts
@@ -1,6 +1,6 @@
 import { Post } from "@/entities/post"
 import { useModal } from "@/shared/hooks/useModal"
 
-export const useEditPostModal = () => {
-  return useModal<Post>("editPost")
+export const useUpdatePostModal = () => {
+  return useModal<Post>("updatePost")
 }
diff --git a/src/feature/update-post/ui/UpdatePostButton.tsx b/src/feature/update-post/ui/UpdatePostButton.tsx
new file mode 100644
index 000000000..dc17837e7
--- /dev/null
+++ b/src/feature/update-post/ui/UpdatePostButton.tsx
@@ -0,0 +1,24 @@
+import { Edit2 } from "lucide-react"
+
+import { Post } from "@/entities/post"
+import { useModal } from "@/shared/hooks/useModal"
+import { Button } from "@/shared/ui"
+
+import { UpdatePostModal } from "./UpdatePostModal"
+
+export const UpdatePostButton = ({ post }: { post: Post }) => {
+  const editPostModal = useModal<Post>(`update-post-${post.id}`)
+
+  const handleEditPost = (post: Post) => {
+    editPostModal.open(post)
+  }
+
+  return (
+    <>
+      <Button aria-label="게시물 수정" onClick={() => handleEditPost(post)} size="sm" variant="ghost">
+        <Edit2 className="w-3 h-3" />
+      </Button>
+      <UpdatePostModal modalId={`update-post-${post.id}`} />
+    </>
+  )
+}
diff --git a/src/widgets/edit-post-modal/ui/EditPostModal.tsx b/src/feature/update-post/ui/UpdatePostModal.tsx
similarity index 82%
rename from src/widgets/edit-post-modal/ui/EditPostModal.tsx
rename to src/feature/update-post/ui/UpdatePostModal.tsx
index 6b8ae6dbf..997a5e1f5 100644
--- a/src/widgets/edit-post-modal/ui/EditPostModal.tsx
+++ b/src/feature/update-post/ui/UpdatePostModal.tsx
@@ -1,12 +1,16 @@
 import { useEffect, useState } from "react"
 
+import { Post } from "@/entities/post"
 import { useUpdatePostMutation } from "@/feature/update-post"
+import { useModal } from "@/shared/hooks/useModal"
 import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Input, Textarea } from "@/shared/ui"
 
-import { useEditPostModal } from "../model/useEditPostModal"
+interface UpdatePostModalProps {
+  modalId: string
+}
 
-export const EditPostModal = () => {
-  const { close, data: selectedPost, isOpen } = useEditPostModal()
+export const UpdatePostModal = ({ modalId }: UpdatePostModalProps) => {
+  const { close, data: selectedPost, isOpen } = useModal<Post>(modalId)
   const { mutate: updatePostMutate } = useUpdatePostMutation()
 
   const [postData, setPostData] = useState({
@@ -41,7 +45,7 @@ export const EditPostModal = () => {
 
   return (
     <Dialog onOpenChange={handleClose} open={isOpen}>
-      <DialogContent>
+      <DialogContent aria-label="게시물 수정">
         <DialogHeader>
           <DialogTitle>게시물 수정</DialogTitle>
         </DialogHeader>
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 751ffa789..f0effee8a 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -1,28 +1,16 @@
-import { Plus } from "lucide-react"
-
+import { AddPostButton } from "@/feature/add-post"
 import { PostsFilter } from "@/feature/posts-filter"
-import { Button, Card, CardContent, CardHeader, CardTitle } from "@/shared/ui"
-import { AddCommentModal } from "@/widgets/add-comment-modal"
-import { AddPostModal, useAddPostModal } from "@/widgets/add-post-modal"
-import { EditCommentModal } from "@/widgets/edit-comment-modal"
-import { EditPostModal } from "@/widgets/edit-post-modal"
-import { DetailPostModal } from "@/widgets/post-detail-modal"
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/ui"
 import { PostsTable } from "@/widgets/posts-with-users"
 import { Pagination } from "@/widgets/posts-with-users/ui/Paginaition"
-import { UserProfileModal } from "@/widgets/user-profile-modal"
 
 export const PostsManagerPage = () => {
-  const addPostModal = useAddPostModal()
-
   return (
     <Card className="w-full max-w-6xl mx-auto">
       <CardHeader>
         <CardTitle className="flex items-center justify-between">
           <span>게시물 관리자</span>
-          <Button onClick={() => addPostModal.open()}>
-            <Plus className="w-4 h-4 mr-2" />
-            게시물 추가
-          </Button>
+          <AddPostButton />
         </CardTitle>
       </CardHeader>
       <CardContent>
@@ -32,13 +20,6 @@ export const PostsManagerPage = () => {
           <Pagination />
         </div>
       </CardContent>
-
-      <AddPostModal />
-      <EditPostModal />
-      <AddCommentModal />
-      <EditCommentModal />
-      <DetailPostModal />
-      <UserProfileModal />
     </Card>
   )
 }
diff --git a/src/widgets/add-comment-modal/index.ts b/src/widgets/add-comment-modal/index.ts
index 6f3e3755c..02411db0b 100644
--- a/src/widgets/add-comment-modal/index.ts
+++ b/src/widgets/add-comment-modal/index.ts
@@ -1,2 +1,3 @@
-export { useAddCommentModal } from "./model/useAddCommentModal"
-export { AddCommentModal } from "./ui/AddCommentModal"
+export * from "./model/useAddCommentModal"
+export * from "./ui/AddCommentButton"
+export * from "./ui/AddCommentModal"
diff --git a/src/widgets/add-comment-modal/ui/AddCommentButton.tsx b/src/widgets/add-comment-modal/ui/AddCommentButton.tsx
new file mode 100644
index 000000000..17a184dda
--- /dev/null
+++ b/src/widgets/add-comment-modal/ui/AddCommentButton.tsx
@@ -0,0 +1,29 @@
+import { MessageSquarePlus } from "lucide-react"
+import { PropsWithChildren } from "react"
+
+import { useModal } from "@/shared/hooks/useModal"
+import { Button } from "@/shared/ui"
+
+import { AddCommentModal } from "./AddCommentModal"
+
+interface Props {
+  postId: number
+}
+
+export const AddCommentButton = ({ children, postId }: PropsWithChildren<Props>) => {
+  const addCommentModal = useModal<{ postId: number }>(`add-comment-${postId}`)
+
+  const handleAddComment = () => {
+    addCommentModal.open({ postId })
+  }
+
+  return (
+    <>
+      <Button onClick={handleAddComment} size="sm" variant="ghost">
+        <MessageSquarePlus className="w-4 h-4 mr-2" />
+        {children || "댓글 추가"}
+      </Button>
+      <AddCommentModal modalId={`add-comment-${postId}`} />
+    </>
+  )
+}
diff --git a/src/widgets/add-comment-modal/ui/AddCommentModal.tsx b/src/widgets/add-comment-modal/ui/AddCommentModal.tsx
index de6a023ae..4535e1972 100644
--- a/src/widgets/add-comment-modal/ui/AddCommentModal.tsx
+++ b/src/widgets/add-comment-modal/ui/AddCommentModal.tsx
@@ -1,12 +1,15 @@
 import { useState } from "react"
 
 import { useAddCommentMutation } from "@/feature/add-comment"
+import { useModal } from "@/shared/hooks/useModal"
 import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Textarea } from "@/shared/ui"
 
-import { useAddCommentModal } from "../model/useAddCommentModal"
+interface Props {
+  modalId: string
+}
 
-export const AddCommentModal = () => {
-  const { close, data, isOpen } = useAddCommentModal()
+export const AddCommentModal = ({ modalId }: Props) => {
+  const { close, data, isOpen } = useModal<{ postId: number }>(modalId)
   const { mutate: addCommentMutate } = useAddCommentMutation()
   const [commentBody, setCommentBody] = useState("")
 
@@ -29,7 +32,7 @@ export const AddCommentModal = () => {
 
   return (
     <Dialog onOpenChange={handleClose} open={isOpen}>
-      <DialogContent>
+      <DialogContent aria-label="새 댓글 추가">
         <DialogHeader>
           <DialogTitle>새 댓글 추가</DialogTitle>
         </DialogHeader>
diff --git a/src/widgets/add-post-modal/index.ts b/src/widgets/add-post-modal/index.ts
deleted file mode 100644
index 6230b2afd..000000000
--- a/src/widgets/add-post-modal/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { useAddPostModal } from "./model/useAddPostModal"
-export { AddPostModal } from "./ui/AddPostModal"
diff --git a/src/widgets/edit-comment-modal/index.ts b/src/widgets/edit-comment-modal/index.ts
index a97232f30..4e671e45f 100644
--- a/src/widgets/edit-comment-modal/index.ts
+++ b/src/widgets/edit-comment-modal/index.ts
@@ -1,2 +1,3 @@
-export { useEditCommentModal } from "./model/useEditCommentModal"
-export { EditCommentModal } from "./ui/EditCommentModal"
+export * from "./model/useUpdateCommentModal"
+export * from "./ui/UpdateCommentButton"
+export * from "./ui/UpdateCommentModal"
diff --git a/src/widgets/edit-comment-modal/model/useEditCommentModal.ts b/src/widgets/edit-comment-modal/model/useUpdateCommentModal.ts
similarity index 52%
rename from src/widgets/edit-comment-modal/model/useEditCommentModal.ts
rename to src/widgets/edit-comment-modal/model/useUpdateCommentModal.ts
index a11471d70..8a852adb3 100644
--- a/src/widgets/edit-comment-modal/model/useEditCommentModal.ts
+++ b/src/widgets/edit-comment-modal/model/useUpdateCommentModal.ts
@@ -1,6 +1,6 @@
 import { Comment } from "@/entities/comment"
 import { useModal } from "@/shared/hooks/useModal"
 
-export const useEditCommentModal = () => {
-  return useModal<Comment>("editComment")
+export const useUpdateCommentModal = () => {
+  return useModal<Comment>("updateComment")
 }
diff --git a/src/widgets/edit-comment-modal/ui/UpdateCommentButton.tsx b/src/widgets/edit-comment-modal/ui/UpdateCommentButton.tsx
new file mode 100644
index 000000000..89408a9f8
--- /dev/null
+++ b/src/widgets/edit-comment-modal/ui/UpdateCommentButton.tsx
@@ -0,0 +1,30 @@
+import { Edit2 } from "lucide-react"
+import { PropsWithChildren } from "react"
+
+import { Comment } from "@/entities/comment"
+import { useModal } from "@/shared/hooks/useModal"
+import { Button } from "@/shared/ui"
+
+import { UpdateCommentModal } from "./UpdateCommentModal"
+
+interface Props {
+  comment: Comment
+}
+
+export const UpdateCommentButton = ({ children, comment }: PropsWithChildren<Props>) => {
+  const updateCommentModal = useModal<Comment>(`update-comment-${comment.id}`)
+
+  const handleUpdateComment = () => {
+    updateCommentModal.open(comment)
+  }
+
+  return (
+    <>
+      <Button onClick={handleUpdateComment} size="sm" variant="ghost">
+        <Edit2 className="w-4 h-4 mr-2" />
+        {children || "댓글 수정"}
+      </Button>
+      <UpdateCommentModal modalId={`update-comment-${comment.id}`} />
+    </>
+  )
+}
diff --git a/src/widgets/edit-comment-modal/ui/EditCommentModal.tsx b/src/widgets/edit-comment-modal/ui/UpdateCommentModal.tsx
similarity index 81%
rename from src/widgets/edit-comment-modal/ui/EditCommentModal.tsx
rename to src/widgets/edit-comment-modal/ui/UpdateCommentModal.tsx
index 73267de86..a33d862e5 100644
--- a/src/widgets/edit-comment-modal/ui/EditCommentModal.tsx
+++ b/src/widgets/edit-comment-modal/ui/UpdateCommentModal.tsx
@@ -1,16 +1,19 @@
 import { useEffect, useState } from "react"
 
+import { Comment } from "@/entities/comment"
 import { useUpdateCommentMutation } from "@/feature/update-comment"
+import { useModal } from "@/shared/hooks/useModal"
 import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Textarea } from "@/shared/ui"
 
-import { useEditCommentModal } from "../model/useEditCommentModal"
+interface Props {
+  modalId: string
+}
 
-export const EditCommentModal = () => {
-  const { close, data: selectedComment, isOpen } = useEditCommentModal()
+export const UpdateCommentModal = ({ modalId }: Props) => {
+  const { close, data: selectedComment, isOpen } = useModal<Comment>(modalId)
   const { mutate: updateCommentMutate } = useUpdateCommentMutation()
   const [commentBody, setCommentBody] = useState("")
 
-  // 모달이 열릴 때 기존 댓글 내용 설정
   useEffect(() => {
     if (selectedComment) {
       setCommentBody(selectedComment.body)
diff --git a/src/widgets/edit-post-modal/index.ts b/src/widgets/edit-post-modal/index.ts
deleted file mode 100644
index b575379a2..000000000
--- a/src/widgets/edit-post-modal/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { useEditPostModal } from "./model/useEditPostModal"
-export { EditPostModal } from "./ui/EditPostModal"
diff --git a/src/widgets/post-detail-modal/index.ts b/src/widgets/post-detail-modal/index.ts
index 1eba33e7f..e0ef9d832 100644
--- a/src/widgets/post-detail-modal/index.ts
+++ b/src/widgets/post-detail-modal/index.ts
@@ -1,2 +1,4 @@
 export * from "./model/usePostDetailModal"
+export * from "./ui/PostComments"
+export * from "./ui/PostDetailButton"
 export * from "./ui/PostDetailModal"
diff --git a/src/widgets/post-detail-modal/ui/PostComments.tsx b/src/widgets/post-detail-modal/ui/PostComments.tsx
index 9a1083250..cb7742b3d 100644
--- a/src/widgets/post-detail-modal/ui/PostComments.tsx
+++ b/src/widgets/post-detail-modal/ui/PostComments.tsx
@@ -1,4 +1,4 @@
-import { Edit2, Plus, ThumbsUp, Trash2 } from "lucide-react"
+import { ThumbsUp, Trash2 } from "lucide-react"
 
 import { Comment } from "@/entities/comment"
 import { useCommentLikeMutation } from "@/feature/comment-like"
@@ -7,8 +7,8 @@ import { useGetComments } from "@/feature/get-comments"
 import { usePostsQuery } from "@/feature/post-query"
 import { highlightText } from "@/shared/lib"
 import { Button } from "@/shared/ui"
-import { useAddCommentModal } from "@/widgets/add-comment-modal"
-import { useEditCommentModal } from "@/widgets/edit-comment-modal"
+import { AddCommentButton } from "@/widgets/add-comment-modal"
+import { UpdateCommentButton } from "@/widgets/edit-comment-modal"
 
 interface PostCommentsProps {
   postId: number
@@ -18,20 +18,9 @@ export const PostComments = ({ postId }: PostCommentsProps) => {
   const { data: comments } = useGetComments(postId)
   const { current } = usePostsQuery()
 
-  const addCommentModal = useAddCommentModal()
-  const editCommentModal = useEditCommentModal()
-
   const commentLikes = useCommentLikeMutation()
   const { mutate: deleteCommentMutate } = useDeleteCommentMutation()
 
-  const handleAddComment = () => {
-    addCommentModal.open({ postId })
-  }
-
-  const handleEditComment = (comment: Comment) => {
-    editCommentModal.open(comment)
-  }
-
   const handleLikeComment = (comment: Comment) => {
     commentLikes.mutate(comment)
   }
@@ -44,10 +33,7 @@ export const PostComments = ({ postId }: PostCommentsProps) => {
     <div className="mt-2">
       <div className="flex items-center justify-between mb-2">
         <h3 className="text-sm font-semibold">댓글</h3>
-        <Button onClick={handleAddComment} size="sm">
-          <Plus className="w-3 h-3 mr-1" />
-          댓글 추가
-        </Button>
+        <AddCommentButton postId={postId} />
       </div>
 
       <div className="space-y-1">
@@ -62,9 +48,7 @@ export const PostComments = ({ postId }: PostCommentsProps) => {
                 <ThumbsUp className="w-3 h-3" />
                 <span className="ml-1 text-xs">{comment.likes}</span>
               </Button>
-              <Button aria-label="댓글 수정" onClick={() => handleEditComment(comment)} size="sm" variant="ghost">
-                <Edit2 className="w-3 h-3" />
-              </Button>
+              <UpdateCommentButton comment={comment} />
               <Button aria-label="댓글 삭제" onClick={() => handleDeleteComment(comment.id)} size="sm" variant="ghost">
                 <Trash2 className="w-3 h-3" />
               </Button>
diff --git a/src/widgets/post-detail-modal/ui/PostDetailButton.tsx b/src/widgets/post-detail-modal/ui/PostDetailButton.tsx
new file mode 100644
index 000000000..1ba88b7b9
--- /dev/null
+++ b/src/widgets/post-detail-modal/ui/PostDetailButton.tsx
@@ -0,0 +1,29 @@
+import { MessageSquare } from "lucide-react"
+import { PropsWithChildren } from "react"
+
+import { Post } from "@/entities/post"
+import { useModal } from "@/shared/hooks/useModal"
+import { Button } from "@/shared/ui"
+
+import { DetailPostModal } from "./PostDetailModal"
+
+interface Props {
+  post: Post
+}
+
+export const PostDetailButton = ({ children, post }: PropsWithChildren<Props>) => {
+  const postDetailModal = useModal<Post>(`post-detail-${post.id}`)
+
+  const handleOpenPostDetail = () => {
+    postDetailModal.open(post)
+  }
+
+  return (
+    <>
+      <Button aria-label="댓글 보기" onClick={handleOpenPostDetail} size="sm" variant="ghost">
+        {children || <MessageSquare className="w-4 h-4" />}
+      </Button>
+      <DetailPostModal modalId={`post-detail-${post.id}`} />
+    </>
+  )
+}
diff --git a/src/widgets/post-detail-modal/ui/PostDetailModal.tsx b/src/widgets/post-detail-modal/ui/PostDetailModal.tsx
index 032488e96..2e7746117 100644
--- a/src/widgets/post-detail-modal/ui/PostDetailModal.tsx
+++ b/src/widgets/post-detail-modal/ui/PostDetailModal.tsx
@@ -1,12 +1,17 @@
+import { Post } from "@/entities/post"
 import { usePostsQuery } from "@/feature/post-query"
+import { useModal } from "@/shared/hooks/useModal"
 import { highlightText } from "@/shared/lib"
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/ui"
 
-import { usePostDetailModal } from "../model/usePostDetailModal"
 import { PostComments } from "./PostComments"
 
-export const DetailPostModal = () => {
-  const { close, data: selectedPost, isOpen } = usePostDetailModal()
+interface Props {
+  modalId: string
+}
+
+export const DetailPostModal = ({ modalId }: Props) => {
+  const { close, data: selectedPost, isOpen } = useModal<Post>(modalId)
   const { current } = usePostsQuery()
 
   return (
diff --git a/src/widgets/posts-with-users/ui/PostTable.tsx b/src/widgets/posts-with-users/ui/PostTable.tsx
index 6e423f7d3..9a85d0960 100644
--- a/src/widgets/posts-with-users/ui/PostTable.tsx
+++ b/src/widgets/posts-with-users/ui/PostTable.tsx
@@ -1,14 +1,12 @@
-import { Edit2, MessageSquare, ThumbsDown, ThumbsUp, Trash2 } from "lucide-react"
+import { ThumbsDown, ThumbsUp, Trash2 } from "lucide-react"
 
-import { Post } from "@/entities/post"
 import { useDeletePostMutation } from "@/feature/delete-post"
-import { UserSummary } from "@/feature/get-users-summary"
 import { usePostsQuery } from "@/feature/post-query/model/usePostsQuery"
+import { UpdatePostButton } from "@/feature/update-post"
 import { highlightText } from "@/shared/lib"
 import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/ui"
-import { useEditPostModal } from "@/widgets/edit-post-modal"
-import { usePostDetailModal } from "@/widgets/post-detail-modal"
-import { useUserProfileModal } from "@/widgets/user-profile-modal"
+import { PostDetailButton } from "@/widgets/post-detail-modal"
+import { UserProfileButton } from "@/widgets/user-profile-modal"
 
 import { usePostsWithUserSummaryQuery } from "../api/queries"
 
@@ -17,31 +15,6 @@ export const PostsTable = () => {
   const { mutate: deletePostMutate } = useDeletePostMutation()
   const { data: postsWithUsers, isLoading } = usePostsWithUserSummaryQuery()
 
-  const editPostModal = useEditPostModal()
-  const postDetailModal = usePostDetailModal()
-  const userProfileModal = useUserProfileModal()
-
-  // 모달 핸들러들
-  const openPostDetail = (post: Post) => {
-    postDetailModal.open(post)
-  }
-
-  const handleOpenUserProfile = (user: UserSummary) => {
-    userProfileModal.open(user)
-  }
-
-  const handleEditPost = (post: Post) => {
-    editPostModal.open(post)
-  }
-
-  const handleDeletePost = (id: number) => {
-    try {
-      deletePostMutate(id)
-    } catch (error) {
-      console.error("게시물 삭제 오류:", error)
-    }
-  }
-
   if (isLoading) {
     return <div className="flex justify-center p-4">로딩 중...</div>
   }
@@ -81,15 +54,7 @@ export const PostsTable = () => {
                 </div>
               </div>
             </TableCell>
-            <TableCell>
-              <div
-                className="flex items-center space-x-2 cursor-pointer"
-                onClick={() => post.author && handleOpenUserProfile(post.author)}
-              >
-                <img alt={post.author?.username} className="w-8 h-8 rounded-full" src={post.author?.image} />
-                <span>{post.author?.username}</span>
-              </div>
-            </TableCell>
+            <TableCell>{post.author && <UserProfileButton user={post.author} />}</TableCell>
             <TableCell>
               <div className="flex items-center gap-2">
                 <ThumbsUp className="w-4 h-4" />
@@ -100,13 +65,9 @@ export const PostsTable = () => {
             </TableCell>
             <TableCell>
               <div className="flex items-center gap-2">
-                <Button aria-label="댓글 보기" onClick={() => openPostDetail(post)} size="sm" variant="ghost">
-                  <MessageSquare className="w-4 h-4" />
-                </Button>
-                <Button aria-label="게시물 수정" onClick={() => handleEditPost(post)} size="sm" variant="ghost">
-                  <Edit2 className="w-4 h-4" />
-                </Button>
-                <Button aria-label="게시물 삭제" onClick={() => handleDeletePost(post.id)} size="sm" variant="ghost">
+                <PostDetailButton post={post} />
+                <UpdatePostButton post={post} />
+                <Button aria-label="게시물 삭제" onClick={() => deletePostMutate(post.id)} size="sm" variant="ghost">
                   <Trash2 className="w-4 h-4" />
                 </Button>
               </div>
diff --git a/src/widgets/user-profile-modal/index.ts b/src/widgets/user-profile-modal/index.ts
index 43f718d05..49d4218f5 100644
--- a/src/widgets/user-profile-modal/index.ts
+++ b/src/widgets/user-profile-modal/index.ts
@@ -1,2 +1,3 @@
 export * from "./model/useUserProfileModal"
+export * from "./ui/UserProfileButton"
 export * from "./ui/UserProfileModal"
diff --git a/src/widgets/user-profile-modal/ui/UserProfileButton.tsx b/src/widgets/user-profile-modal/ui/UserProfileButton.tsx
new file mode 100644
index 000000000..7b054c473
--- /dev/null
+++ b/src/widgets/user-profile-modal/ui/UserProfileButton.tsx
@@ -0,0 +1,32 @@
+import { PropsWithChildren } from "react"
+
+import { UserSummary } from "@/feature/get-users-summary"
+import { useModal } from "@/shared/hooks/useModal"
+
+import { UserProfileModal } from "./UserProfileModal"
+
+interface Props {
+  user: UserSummary
+}
+
+export const UserProfileButton = ({ children, user }: PropsWithChildren<Props>) => {
+  const userProfileModal = useModal<UserSummary>(`user-profile-${user.id}`)
+
+  const handleOpenUserProfile = () => {
+    userProfileModal.open(user)
+  }
+
+  return (
+    <>
+      <div className="flex items-center space-x-2 cursor-pointer" onClick={handleOpenUserProfile}>
+        {children || (
+          <>
+            <img alt={user.username} className="w-8 h-8 rounded-full" src={user.image} />
+            <span>{user.username}</span>
+          </>
+        )}
+      </div>
+      <UserProfileModal modalId={`user-profile-${user.id}`} />
+    </>
+  )
+}
diff --git a/src/widgets/user-profile-modal/ui/UserProfileModal.tsx b/src/widgets/user-profile-modal/ui/UserProfileModal.tsx
index 8742bb87c..c1216edd8 100644
--- a/src/widgets/user-profile-modal/ui/UserProfileModal.tsx
+++ b/src/widgets/user-profile-modal/ui/UserProfileModal.tsx
@@ -1,10 +1,14 @@
 import { useGetUserById } from "@/feature/get-user-by-id"
+import { UserSummary } from "@/feature/get-users-summary"
+import { useModal } from "@/shared/hooks/useModal"
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/ui"
 
-import { useUserProfileModal } from "../model/useUserProfileModal"
+interface Props {
+  modalId: string
+}
 
-export const UserProfileModal = () => {
-  const { close, data: selectedUser, isOpen } = useUserProfileModal()
+export const UserProfileModal = ({ modalId }: Props) => {
+  const { close, data: selectedUser, isOpen } = useModal<UserSummary>(modalId)
   const { data: userData } = useGetUserById(selectedUser?.id)
 
   return (

From 228b9e58fb4aa4e5670ce2ee78fc04823ccbe8ed Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 08:35:04 +0900
Subject: [PATCH 60/71] =?UTF-8?q?chore:=20edit=EC=97=90=EC=84=9C=20update?=
 =?UTF-8?q?=EB=A1=9C=20=EC=9B=8C=EB=94=A9=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/feature/update-post/ui/UpdatePostButton.tsx           | 8 ++++----
 src/widgets/post-detail-modal/ui/PostComments.tsx         | 2 +-
 .../{edit-comment-modal => update-comment-modal}/index.ts | 0
 .../model/useUpdateCommentModal.ts                        | 0
 .../ui/UpdateCommentButton.tsx                            | 0
 .../ui/UpdateCommentModal.tsx                             | 0
 6 files changed, 5 insertions(+), 5 deletions(-)
 rename src/widgets/{edit-comment-modal => update-comment-modal}/index.ts (100%)
 rename src/widgets/{edit-comment-modal => update-comment-modal}/model/useUpdateCommentModal.ts (100%)
 rename src/widgets/{edit-comment-modal => update-comment-modal}/ui/UpdateCommentButton.tsx (100%)
 rename src/widgets/{edit-comment-modal => update-comment-modal}/ui/UpdateCommentModal.tsx (100%)

diff --git a/src/feature/update-post/ui/UpdatePostButton.tsx b/src/feature/update-post/ui/UpdatePostButton.tsx
index dc17837e7..7fddd727f 100644
--- a/src/feature/update-post/ui/UpdatePostButton.tsx
+++ b/src/feature/update-post/ui/UpdatePostButton.tsx
@@ -7,15 +7,15 @@ import { Button } from "@/shared/ui"
 import { UpdatePostModal } from "./UpdatePostModal"
 
 export const UpdatePostButton = ({ post }: { post: Post }) => {
-  const editPostModal = useModal<Post>(`update-post-${post.id}`)
+  const updatePostModal = useModal<Post>(`update-post-${post.id}`)
 
-  const handleEditPost = (post: Post) => {
-    editPostModal.open(post)
+  const handleUpdatePost = (post: Post) => {
+    updatePostModal.open(post)
   }
 
   return (
     <>
-      <Button aria-label="게시물 수정" onClick={() => handleEditPost(post)} size="sm" variant="ghost">
+      <Button aria-label="게시물 수정" onClick={() => handleUpdatePost(post)} size="sm" variant="ghost">
         <Edit2 className="w-3 h-3" />
       </Button>
       <UpdatePostModal modalId={`update-post-${post.id}`} />
diff --git a/src/widgets/post-detail-modal/ui/PostComments.tsx b/src/widgets/post-detail-modal/ui/PostComments.tsx
index cb7742b3d..189fb0048 100644
--- a/src/widgets/post-detail-modal/ui/PostComments.tsx
+++ b/src/widgets/post-detail-modal/ui/PostComments.tsx
@@ -8,7 +8,7 @@ import { usePostsQuery } from "@/feature/post-query"
 import { highlightText } from "@/shared/lib"
 import { Button } from "@/shared/ui"
 import { AddCommentButton } from "@/widgets/add-comment-modal"
-import { UpdateCommentButton } from "@/widgets/edit-comment-modal"
+import { UpdateCommentButton } from "@/widgets/update-comment-modal"
 
 interface PostCommentsProps {
   postId: number
diff --git a/src/widgets/edit-comment-modal/index.ts b/src/widgets/update-comment-modal/index.ts
similarity index 100%
rename from src/widgets/edit-comment-modal/index.ts
rename to src/widgets/update-comment-modal/index.ts
diff --git a/src/widgets/edit-comment-modal/model/useUpdateCommentModal.ts b/src/widgets/update-comment-modal/model/useUpdateCommentModal.ts
similarity index 100%
rename from src/widgets/edit-comment-modal/model/useUpdateCommentModal.ts
rename to src/widgets/update-comment-modal/model/useUpdateCommentModal.ts
diff --git a/src/widgets/edit-comment-modal/ui/UpdateCommentButton.tsx b/src/widgets/update-comment-modal/ui/UpdateCommentButton.tsx
similarity index 100%
rename from src/widgets/edit-comment-modal/ui/UpdateCommentButton.tsx
rename to src/widgets/update-comment-modal/ui/UpdateCommentButton.tsx
diff --git a/src/widgets/edit-comment-modal/ui/UpdateCommentModal.tsx b/src/widgets/update-comment-modal/ui/UpdateCommentModal.tsx
similarity index 100%
rename from src/widgets/edit-comment-modal/ui/UpdateCommentModal.tsx
rename to src/widgets/update-comment-modal/ui/UpdateCommentModal.tsx

From e72b0da29eb2c0a792c895a61e03e7905ea7fe93 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 08:42:17 +0900
Subject: [PATCH 61/71] =?UTF-8?q?chore:=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/feature/comment-like/api/index.ts | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/feature/comment-like/api/index.ts b/src/feature/comment-like/api/index.ts
index 569854423..7142af0c3 100644
--- a/src/feature/comment-like/api/index.ts
+++ b/src/feature/comment-like/api/index.ts
@@ -11,7 +11,7 @@ export const useCommentLikeMutation = () => {
   return useMutation({
     mutationFn: (comment: Comment) => commentApi.updateLike(comment),
 
-    onError: (err, variables, context) => {
+    onError: (_err, variables, context) => {
       const typedContext = context as { previousComments?: Comment[] }
       if (typedContext.previousComments) {
         queryClient.setQueryData(["comments", variables.postId], typedContext.previousComments)
@@ -34,12 +34,5 @@ export const useCommentLikeMutation = () => {
       })
       return previousComments
     },
-
-    // 리페치 할경우 다시 롤백
-    // onSettled: (data, error, variables) => {
-    //   queryClient.invalidateQueries({
-    //     queryKey: ["comments", variables.postId],
-    //   })
-    // },
   })
 }

From c6f9367f098e8a6d611fb59a8e3b54ed8d30e83e Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 08:42:36 +0900
Subject: [PATCH 62/71] =?UTF-8?q?chore:=20=EB=B0=B0=ED=8F=AC=20=EC=84=B8?=
 =?UTF-8?q?=ED=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                         |   6 +-
 pnpm-lock.yaml                       | 496 +++++++++++++++++++++++++++
 src/app/providers/RouterProvider.tsx |   4 +-
 src/shared/api/apiClient.ts          |   4 +-
 tsconfig.app.tsbuildinfo             |   2 +-
 vite.config.ts                       |   6 +-
 6 files changed, 513 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index b2c226dc4..0ca75b79f 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "preview": "vite preview",
     "test": "vitest",
     "test:ui": "vitest --ui",
-    "coverage": "vitest run --coverage"
+    "coverage": "vitest run --coverage",
+    "deploy": "pnpm build && gh-pages -d dist"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.85.0",
@@ -33,6 +34,7 @@
     "@typescript-eslint/eslint-plugin": "^8.39.0",
     "@typescript-eslint/parser": "^8.39.0",
     "@vitejs/plugin-react": "^5.0.0",
+    "@vitest/coverage-v8": "3.2.4",
     "@vitest/ui": "3.2.4",
     "axios": "^1.11.0",
     "class-variance-authority": "^0.7.1",
@@ -42,6 +44,7 @@
     "eslint-plugin-perfectionist": "^4.15.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
+    "gh-pages": "^6.3.0",
     "globals": "^16.3.0",
     "jsdom": "^26.1.0",
     "lucide-react": "^0.539.0",
@@ -51,6 +54,7 @@
     "typescript": "~5.9.2",
     "typescript-eslint": "^8.39.0",
     "vite": "^7.1.1",
+    "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4",
     "vitest-browser-react": "^1.0.1"
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e2c76e705..61f624cfc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -60,6 +60,9 @@ importers:
       '@vitejs/plugin-react':
         specifier: ^5.0.0
         version: 5.0.0(vite@7.1.1(@types/node@24.2.1))
+      '@vitest/coverage-v8':
+        specifier: 3.2.4
+        version: 3.2.4(@vitest/browser@2.1.3)(vitest@3.2.4)
       '@vitest/ui':
         specifier: 3.2.4
         version: 3.2.4(vitest@3.2.4)
@@ -87,6 +90,9 @@ importers:
       eslint-plugin-react-refresh:
         specifier: ^0.4.20
         version: 0.4.20(eslint@9.33.0)
+      gh-pages:
+        specifier: ^6.3.0
+        version: 6.3.0
       globals:
         specifier: ^16.3.0
         version: 16.3.0
@@ -114,6 +120,9 @@ importers:
       vite:
         specifier: ^7.1.1
         version: 7.1.1(@types/node@24.2.1)
+      vite-tsconfig-paths:
+        specifier: ^5.1.4
+        version: 5.1.4(typescript@5.9.2)(vite@7.1.1(@types/node@24.2.1))
       vitest:
         specifier: ^3.2.4
         version: 3.2.4(@types/node@24.2.1)(@vitest/browser@2.1.3)(@vitest/ui@3.2.4)(jsdom@26.1.0)(msw@2.10.4(@types/node@24.2.1)(typescript@5.9.2))
@@ -237,6 +246,10 @@ packages:
     resolution: {integrity: sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==}
     engines: {node: '>=6.9.0'}
 
+  '@bcoe/v8-coverage@1.0.2':
+    resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
+    engines: {node: '>=18'}
+
   '@bundled-es-modules/cookie@2.0.1':
     resolution: {integrity: sha512-8o+5fRPLNbjbdGRRmJj3h6Hh1AQJf2dk3qQ/5ZFb+PXkRNiSoMGGUKlsgLfrxneb72axVJyIYji64E2+nNfYyw==}
 
@@ -529,6 +542,14 @@ packages:
     peerDependencies:
       '@types/node': '>=18'
 
+  '@isaacs/cliui@8.0.2':
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+
+  '@istanbuljs/schema@0.1.3':
+    resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
+    engines: {node: '>=8'}
+
   '@jridgewell/gen-mapping@0.3.12':
     resolution: {integrity: sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==}
 
@@ -578,6 +599,10 @@ packages:
   '@open-draft/until@2.1.0':
     resolution: {integrity: sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==}
 
+  '@pkgjs/parseargs@0.11.0':
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    engines: {node: '>=14'}
+
   '@polka/url@1.0.0-next.28':
     resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
 
@@ -1135,6 +1160,15 @@ packages:
       webdriverio:
         optional: true
 
+  '@vitest/coverage-v8@3.2.4':
+    resolution: {integrity: sha512-EyF9SXU6kS5Ku/U82E259WSnvg6c8KTjppUncuNdm5QHpe17mwREHnjDzozC8x9MZ0xfBUFSaLkRv4TMA75ALQ==}
+    peerDependencies:
+      '@vitest/browser': 3.2.4
+      vitest: 3.2.4
+    peerDependenciesMeta:
+      '@vitest/browser':
+        optional: true
+
   '@vitest/expect@3.2.4':
     resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
 
@@ -1212,6 +1246,10 @@ packages:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
 
+  ansi-regex@6.1.0:
+    resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
+    engines: {node: '>=12'}
+
   ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
@@ -1220,6 +1258,10 @@ packages:
     resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
     engines: {node: '>=10'}
 
+  ansi-styles@6.2.1:
+    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
+    engines: {node: '>=12'}
+
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
@@ -1238,6 +1280,10 @@ packages:
     resolution: {integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==}
     engines: {node: '>= 0.4'}
 
+  array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+
   array.prototype.findlastindex@1.2.6:
     resolution: {integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==}
     engines: {node: '>= 0.4'}
@@ -1258,10 +1304,16 @@ packages:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
+  ast-v8-to-istanbul@0.3.4:
+    resolution: {integrity: sha512-cxrAnZNLBnQwBPByK4CeDaw5sWZtMilJE/Q3iDA0aamgaIVNDF9T6K2/8DfYDZEejZ2jNnDrG9m8MY72HFd0KA==}
+
   async-function@1.0.0:
     resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
     engines: {node: '>= 0.4'}
 
+  async@3.2.6:
+    resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
+
   asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
 
@@ -1351,6 +1403,13 @@ packages:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
 
+  commander@13.1.0:
+    resolution: {integrity: sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==}
+    engines: {node: '>=18'}
+
+  commondir@1.0.1:
+    resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
+
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
@@ -1450,6 +1509,10 @@ packages:
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
+  dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+
   doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
@@ -1464,12 +1527,21 @@ packages:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
 
+  eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+
   electron-to-chromium@1.5.45:
     resolution: {integrity: sha512-vOzZS6uZwhhbkZbcRyiy99Wg+pYFV5hk+5YaECvx0+Z31NR3Tt5zS6dze2OepT6PCTzVzT0dIJItti+uAW5zmw==}
 
+  email-addresses@5.0.0:
+    resolution: {integrity: sha512-4OIPYlA6JXqtVn8zpHpGiI7vE6EQOAg16aGnDMIAlZVinnoZ8208tW1hAbjWydgN/4PLTT9q+O1K6AH/vALJGw==}
+
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
   entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -1514,6 +1586,10 @@ packages:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
 
+  escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+
   escape-string-regexp@4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
@@ -1676,10 +1752,26 @@ packages:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
 
+  filename-reserved-regex@2.0.0:
+    resolution: {integrity: sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==}
+    engines: {node: '>=4'}
+
+  filenamify@4.3.0:
+    resolution: {integrity: sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==}
+    engines: {node: '>=8'}
+
   fill-range@7.1.1:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
+  find-cache-dir@3.3.2:
+    resolution: {integrity: sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==}
+    engines: {node: '>=8'}
+
+  find-up@4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
+
   find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -1707,10 +1799,18 @@ packages:
     resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
     engines: {node: '>= 0.4'}
 
+  foreground-child@3.3.1:
+    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
+    engines: {node: '>=14'}
+
   form-data@4.0.4:
     resolution: {integrity: sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==}
     engines: {node: '>= 6'}
 
+  fs-extra@11.3.1:
+    resolution: {integrity: sha512-eXvGGwZ5CL17ZSwHWd3bbgk7UUpF6IFHtP57NYYakPvHOs8GDgDe5KJI36jIJzDkJ6eJjuzRA8eBQb6SkKue0g==}
+    engines: {node: '>=14.14'}
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -1750,6 +1850,11 @@ packages:
     resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
     engines: {node: '>= 0.4'}
 
+  gh-pages@6.3.0:
+    resolution: {integrity: sha512-Ot5lU6jK0Eb+sszG8pciXdjMXdBJ5wODvgjR+imihTqsUWF2K6dJ9HST55lgqcs8wWcw6o6wAsUzfcYRhJPXbA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -1758,6 +1863,10 @@ packages:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
 
+  glob@10.4.5:
+    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
+    hasBin: true
+
   globals@14.0.0:
     resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
     engines: {node: '>=18'}
@@ -1770,10 +1879,20 @@ packages:
     resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
     engines: {node: '>= 0.4'}
 
+  globby@11.1.0:
+    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
+    engines: {node: '>=10'}
+
+  globrex@0.1.2:
+    resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
+
   gopd@1.2.0:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
 
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
@@ -1815,6 +1934,9 @@ packages:
     resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
     engines: {node: '>=18'}
 
+  html-escaper@2.0.2:
+    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
+
   http-proxy-agent@7.0.2:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
@@ -1967,6 +2089,25 @@ packages:
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
+  istanbul-lib-coverage@3.2.2:
+    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
+    engines: {node: '>=8'}
+
+  istanbul-lib-report@3.0.1:
+    resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
+    engines: {node: '>=10'}
+
+  istanbul-lib-source-maps@5.0.6:
+    resolution: {integrity: sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==}
+    engines: {node: '>=10'}
+
+  istanbul-reports@3.1.7:
+    resolution: {integrity: sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==}
+    engines: {node: '>=8'}
+
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -2009,6 +2150,9 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  jsonfile@6.2.0:
+    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
@@ -2016,6 +2160,10 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -2050,6 +2198,17 @@ packages:
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
+  magicast@0.3.5:
+    resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
+
+  make-dir@3.1.0:
+    resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
+    engines: {node: '>=8'}
+
+  make-dir@4.0.0:
+    resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
+    engines: {node: '>=10'}
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -2084,6 +2243,10 @@ packages:
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
   mrmime@2.0.0:
     resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
     engines: {node: '>=10'}
@@ -2158,14 +2321,29 @@ packages:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
 
+  p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+
   p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
 
+  p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+
   p-locate@5.0.0:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
+  p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -2184,9 +2362,17 @@ packages:
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
+
   path-to-regexp@6.3.0:
     resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==}
 
+  path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
@@ -2209,6 +2395,10 @@ packages:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
 
+  pkg-dir@4.2.0:
+    resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
+    engines: {node: '>=8'}
+
   possible-typed-array-names@1.1.0:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
@@ -2440,6 +2630,10 @@ packages:
     resolution: {integrity: sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A==}
     engines: {node: '>=18'}
 
+  slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -2465,6 +2659,10 @@ packages:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
 
+  string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+
   string.prototype.trim@1.2.10:
     resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
     engines: {node: '>= 0.4'}
@@ -2481,6 +2679,10 @@ packages:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
 
+  strip-ansi@7.1.0:
+    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
+    engines: {node: '>=12'}
+
   strip-bom@3.0.0:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
     engines: {node: '>=4'}
@@ -2496,6 +2698,10 @@ packages:
   strip-literal@3.0.0:
     resolution: {integrity: sha512-TcccoMhJOM3OebGhSBEmp3UZ2SfDMZUEBdRA/9ynfLi8yYajyWX3JiXArcJt4Umh4vISpspkQIY8ZZoCqjbviA==}
 
+  strip-outer@1.0.1:
+    resolution: {integrity: sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==}
+    engines: {node: '>=0.10.0'}
+
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -2507,6 +2713,10 @@ packages:
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
+  test-exclude@7.0.1:
+    resolution: {integrity: sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg==}
+    engines: {node: '>=18'}
+
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
@@ -2560,12 +2770,26 @@ packages:
     resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==}
     engines: {node: '>=18'}
 
+  trim-repeated@1.0.0:
+    resolution: {integrity: sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==}
+    engines: {node: '>=0.10.0'}
+
   ts-api-utils@2.1.0:
     resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
     engines: {node: '>=18.12'}
     peerDependencies:
       typescript: '>=4.8.4'
 
+  tsconfck@3.1.6:
+    resolution: {integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+    peerDependencies:
+      typescript: ^5.0.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   tsconfig-paths@3.15.0:
     resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
 
@@ -2623,6 +2847,10 @@ packages:
     resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
     engines: {node: '>= 4.0.0'}
 
+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+
   update-browserslist-db@1.1.1:
     resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==}
     hasBin: true
@@ -2660,6 +2888,14 @@ packages:
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
 
+  vite-tsconfig-paths@5.1.4:
+    resolution: {integrity: sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w==}
+    peerDependencies:
+      vite: '*'
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
   vite@7.1.1:
     resolution: {integrity: sha512-yJ+Mp7OyV+4S+afWo+QyoL9jFWD11QFH0i5i7JypnfTcA1rmgxCbiA8WwAICDEtZ1Z1hzrVhN8R8rGTqkTY8ZQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2802,6 +3038,10 @@ packages:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
 
+  wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+
   ws@8.18.0:
     resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==}
     engines: {node: '>=10.0.0'}
@@ -3008,6 +3248,8 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.27.1
 
+  '@bcoe/v8-coverage@1.0.2': {}
+
   '@bundled-es-modules/cookie@2.0.1':
     dependencies:
       cookie: 0.7.2
@@ -3226,6 +3468,17 @@ snapshots:
     dependencies:
       '@types/node': 24.2.1
 
+  '@isaacs/cliui@8.0.2':
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.1.0
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
+
+  '@istanbuljs/schema@0.1.3': {}
+
   '@jridgewell/gen-mapping@0.3.12':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -3283,6 +3536,9 @@ snapshots:
 
   '@open-draft/until@2.1.0': {}
 
+  '@pkgjs/parseargs@0.11.0':
+    optional: true
+
   '@polka/url@1.0.0-next.28': {}
 
   '@radix-ui/number@1.1.1': {}
@@ -3821,6 +4077,27 @@ snapshots:
       - utf-8-validate
       - vite
 
+  '@vitest/coverage-v8@3.2.4(@vitest/browser@2.1.3)(vitest@3.2.4)':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@bcoe/v8-coverage': 1.0.2
+      ast-v8-to-istanbul: 0.3.4
+      debug: 4.4.1
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-report: 3.0.1
+      istanbul-lib-source-maps: 5.0.6
+      istanbul-reports: 3.1.7
+      magic-string: 0.30.17
+      magicast: 0.3.5
+      std-env: 3.9.0
+      test-exclude: 7.0.1
+      tinyrainbow: 2.0.0
+      vitest: 3.2.4(@types/node@24.2.1)(@vitest/browser@2.1.3)(@vitest/ui@3.2.4)(jsdom@26.1.0)(msw@2.10.4(@types/node@24.2.1)(typescript@5.9.2))
+    optionalDependencies:
+      '@vitest/browser': 2.1.3(@types/node@24.2.1)(@vitest/spy@3.2.4)(typescript@5.9.2)(vite@7.1.1(@types/node@24.2.1))(vitest@3.2.4)
+    transitivePeerDependencies:
+      - supports-color
+
   '@vitest/expect@3.2.4':
     dependencies:
       '@types/chai': 5.2.2
@@ -3915,12 +4192,16 @@ snapshots:
 
   ansi-regex@5.0.1: {}
 
+  ansi-regex@6.1.0: {}
+
   ansi-styles@4.3.0:
     dependencies:
       color-convert: 2.0.1
 
   ansi-styles@5.2.0: {}
 
+  ansi-styles@6.2.1: {}
+
   argparse@2.0.1: {}
 
   aria-hidden@1.2.4:
@@ -3947,6 +4228,8 @@ snapshots:
       is-string: 1.1.1
       math-intrinsics: 1.1.0
 
+  array-union@2.1.0: {}
+
   array.prototype.findlastindex@1.2.6:
     dependencies:
       call-bind: 1.0.8
@@ -3983,8 +4266,16 @@ snapshots:
 
   assertion-error@2.0.1: {}
 
+  ast-v8-to-istanbul@0.3.4:
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.29
+      estree-walker: 3.0.3
+      js-tokens: 9.0.1
+
   async-function@1.0.0: {}
 
+  async@3.2.6: {}
+
   asynckit@0.4.0: {}
 
   available-typed-arrays@1.0.7:
@@ -4083,6 +4374,10 @@ snapshots:
     dependencies:
       delayed-stream: 1.0.0
 
+  commander@13.1.0: {}
+
+  commondir@1.0.1: {}
+
   concat-map@0.0.1: {}
 
   convert-source-map@2.0.0: {}
@@ -4165,6 +4460,10 @@ snapshots:
 
   detect-node-es@1.1.0: {}
 
+  dir-glob@3.0.1:
+    dependencies:
+      path-type: 4.0.0
+
   doctrine@2.1.0:
     dependencies:
       esutils: 2.0.3
@@ -4179,10 +4478,16 @@ snapshots:
       es-errors: 1.3.0
       gopd: 1.2.0
 
+  eastasianwidth@0.2.0: {}
+
   electron-to-chromium@1.5.45: {}
 
+  email-addresses@5.0.0: {}
+
   emoji-regex@8.0.0: {}
 
+  emoji-regex@9.2.2: {}
+
   entities@4.5.0: {}
 
   es-abstract@1.24.0:
@@ -4299,6 +4604,8 @@ snapshots:
 
   escalade@3.2.0: {}
 
+  escape-string-regexp@1.0.5: {}
+
   escape-string-regexp@4.0.0: {}
 
   eslint-import-resolver-node@0.3.9:
@@ -4490,10 +4797,29 @@ snapshots:
     dependencies:
       flat-cache: 4.0.1
 
+  filename-reserved-regex@2.0.0: {}
+
+  filenamify@4.3.0:
+    dependencies:
+      filename-reserved-regex: 2.0.0
+      strip-outer: 1.0.1
+      trim-repeated: 1.0.0
+
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
 
+  find-cache-dir@3.3.2:
+    dependencies:
+      commondir: 1.0.1
+      make-dir: 3.1.0
+      pkg-dir: 4.2.0
+
+  find-up@4.1.0:
+    dependencies:
+      locate-path: 5.0.0
+      path-exists: 4.0.0
+
   find-up@5.0.0:
     dependencies:
       locate-path: 6.0.0
@@ -4514,6 +4840,11 @@ snapshots:
     dependencies:
       is-callable: 1.2.7
 
+  foreground-child@3.3.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+
   form-data@4.0.4:
     dependencies:
       asynckit: 0.4.0
@@ -4522,6 +4853,12 @@ snapshots:
       hasown: 2.0.2
       mime-types: 2.1.35
 
+  fs-extra@11.3.1:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.0
+      universalify: 2.0.1
+
   fsevents@2.3.3:
     optional: true
 
@@ -4568,6 +4905,16 @@ snapshots:
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
 
+  gh-pages@6.3.0:
+    dependencies:
+      async: 3.2.6
+      commander: 13.1.0
+      email-addresses: 5.0.0
+      filenamify: 4.3.0
+      find-cache-dir: 3.3.2
+      fs-extra: 11.3.1
+      globby: 11.1.0
+
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
@@ -4576,6 +4923,15 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
+  glob@10.4.5:
+    dependencies:
+      foreground-child: 3.3.1
+      jackspeak: 3.4.3
+      minimatch: 9.0.5
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.1
+      path-scurry: 1.11.1
+
   globals@14.0.0: {}
 
   globals@16.3.0: {}
@@ -4585,8 +4941,21 @@ snapshots:
       define-properties: 1.2.1
       gopd: 1.2.0
 
+  globby@11.1.0:
+    dependencies:
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.2
+      ignore: 5.3.2
+      merge2: 1.4.1
+      slash: 3.0.0
+
+  globrex@0.1.2: {}
+
   gopd@1.2.0: {}
 
+  graceful-fs@4.2.11: {}
+
   graphemer@1.4.0: {}
 
   graphql@16.9.0: {}
@@ -4619,6 +4988,8 @@ snapshots:
     dependencies:
       whatwg-encoding: 3.1.1
 
+  html-escaper@2.0.2: {}
+
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.3
@@ -4773,6 +5144,33 @@ snapshots:
 
   isexe@2.0.0: {}
 
+  istanbul-lib-coverage@3.2.2: {}
+
+  istanbul-lib-report@3.0.1:
+    dependencies:
+      istanbul-lib-coverage: 3.2.2
+      make-dir: 4.0.0
+      supports-color: 7.2.0
+
+  istanbul-lib-source-maps@5.0.6:
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.29
+      debug: 4.4.1
+      istanbul-lib-coverage: 3.2.2
+    transitivePeerDependencies:
+      - supports-color
+
+  istanbul-reports@3.1.7:
+    dependencies:
+      html-escaper: 2.0.2
+      istanbul-lib-report: 3.0.1
+
+  jackspeak@3.4.3:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
   js-tokens@4.0.0: {}
 
   js-tokens@9.0.1: {}
@@ -4822,6 +5220,12 @@ snapshots:
 
   json5@2.2.3: {}
 
+  jsonfile@6.2.0:
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
@@ -4831,6 +5235,10 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  locate-path@5.0.0:
+    dependencies:
+      p-locate: 4.1.0
+
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
@@ -4859,6 +5267,20 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  magicast@0.3.5:
+    dependencies:
+      '@babel/parser': 7.28.0
+      '@babel/types': 7.28.2
+      source-map-js: 1.2.1
+
+  make-dir@3.1.0:
+    dependencies:
+      semver: 6.3.1
+
+  make-dir@4.0.0:
+    dependencies:
+      semver: 7.6.3
+
   math-intrinsics@1.1.0: {}
 
   merge2@1.4.1: {}
@@ -4886,6 +5308,8 @@ snapshots:
 
   minimist@1.2.8: {}
 
+  minipass@7.1.2: {}
+
   mrmime@2.0.0: {}
 
   ms@2.1.3: {}
@@ -4977,14 +5401,26 @@ snapshots:
       object-keys: 1.1.1
       safe-push-apply: 1.0.0
 
+  p-limit@2.3.0:
+    dependencies:
+      p-try: 2.2.0
+
   p-limit@3.1.0:
     dependencies:
       yocto-queue: 0.1.0
 
+  p-locate@4.1.0:
+    dependencies:
+      p-limit: 2.3.0
+
   p-locate@5.0.0:
     dependencies:
       p-limit: 3.1.0
 
+  p-try@2.2.0: {}
+
+  package-json-from-dist@1.0.1: {}
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -4999,8 +5435,15 @@ snapshots:
 
   path-parse@1.0.7: {}
 
+  path-scurry@1.11.1:
+    dependencies:
+      lru-cache: 10.4.3
+      minipass: 7.1.2
+
   path-to-regexp@6.3.0: {}
 
+  path-type@4.0.0: {}
+
   pathe@2.0.3: {}
 
   pathval@2.0.0: {}
@@ -5013,6 +5456,10 @@ snapshots:
 
   picomatch@4.0.3: {}
 
+  pkg-dir@4.2.0:
+    dependencies:
+      find-up: 4.1.0
+
   possible-typed-array-names@1.1.0: {}
 
   postcss@8.5.6:
@@ -5271,6 +5718,8 @@ snapshots:
       mrmime: 2.0.0
       totalist: 3.0.1
 
+  slash@3.0.0: {}
+
   source-map-js@1.2.1: {}
 
   stackback@0.0.2: {}
@@ -5292,6 +5741,12 @@ snapshots:
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
 
+  string-width@5.1.2:
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.1.0
+
   string.prototype.trim@1.2.10:
     dependencies:
       call-bind: 1.0.8
@@ -5319,6 +5774,10 @@ snapshots:
     dependencies:
       ansi-regex: 5.0.1
 
+  strip-ansi@7.1.0:
+    dependencies:
+      ansi-regex: 6.1.0
+
   strip-bom@3.0.0: {}
 
   strip-indent@3.0.0:
@@ -5331,6 +5790,10 @@ snapshots:
     dependencies:
       js-tokens: 9.0.1
 
+  strip-outer@1.0.1:
+    dependencies:
+      escape-string-regexp: 1.0.5
+
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
@@ -5339,6 +5802,12 @@ snapshots:
 
   symbol-tree@3.2.4: {}
 
+  test-exclude@7.0.1:
+    dependencies:
+      '@istanbuljs/schema': 0.1.3
+      glob: 10.4.5
+      minimatch: 9.0.5
+
   tinybench@2.9.0: {}
 
   tinyexec@0.3.2: {}
@@ -5383,10 +5852,18 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  trim-repeated@1.0.0:
+    dependencies:
+      escape-string-regexp: 1.0.5
+
   ts-api-utils@2.1.0(typescript@5.9.2):
     dependencies:
       typescript: 5.9.2
 
+  tsconfck@3.1.6(typescript@5.9.2):
+    optionalDependencies:
+      typescript: 5.9.2
+
   tsconfig-paths@3.15.0:
     dependencies:
       '@types/json5': 0.0.29
@@ -5461,6 +5938,8 @@ snapshots:
 
   universalify@0.2.0: {}
 
+  universalify@2.0.1: {}
+
   update-browserslist-db@1.1.1(browserslist@4.24.2):
     dependencies:
       browserslist: 4.24.2
@@ -5512,6 +5991,17 @@ snapshots:
       - tsx
       - yaml
 
+  vite-tsconfig-paths@5.1.4(typescript@5.9.2)(vite@7.1.1(@types/node@24.2.1)):
+    dependencies:
+      debug: 4.4.1
+      globrex: 0.1.2
+      tsconfck: 3.1.6(typescript@5.9.2)
+    optionalDependencies:
+      vite: 7.1.1(@types/node@24.2.1)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   vite@7.1.1(@types/node@24.2.1):
     dependencies:
       esbuild: 0.25.3
@@ -5659,6 +6149,12 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
+  wrap-ansi@8.1.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      string-width: 5.1.2
+      strip-ansi: 7.1.0
+
   ws@8.18.0: {}
 
   xml-name-validator@5.0.0: {}
diff --git a/src/app/providers/RouterProvider.tsx b/src/app/providers/RouterProvider.tsx
index a9b66a133..a6e557323 100644
--- a/src/app/providers/RouterProvider.tsx
+++ b/src/app/providers/RouterProvider.tsx
@@ -6,5 +6,7 @@ interface RouterProviderProps {
 }
 
 export const RouterProvider = ({ children }: RouterProviderProps) => {
-  return <BrowserRouter>{children}</BrowserRouter>
+  const basename = import.meta.env.PROD ? "/front_6th_chapter2-3" : ""
+
+  return <BrowserRouter basename={basename}>{children}</BrowserRouter>
 }
diff --git a/src/shared/api/apiClient.ts b/src/shared/api/apiClient.ts
index 4f0842978..b64f99647 100644
--- a/src/shared/api/apiClient.ts
+++ b/src/shared/api/apiClient.ts
@@ -1,7 +1,9 @@
 import axios, { AxiosRequestConfig, AxiosResponse } from "axios"
 
+const API_BASE_URL = import.meta.env.PROD ? "https://dummyjson.com" : "/api"
+
 export const axiosInstance = axios.create({
-  baseURL: "/api",
+  baseURL: API_BASE_URL,
   headers: {
     "Content-Type": "application/json",
   },
diff --git a/tsconfig.app.tsbuildinfo b/tsconfig.app.tsbuildinfo
index bbf6c661e..a29a765fb 100644
--- a/tsconfig.app.tsbuildinfo
+++ b/tsconfig.app.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/index.tsx","./src/main.tsx","./src/components/footer.tsx","./src/components/header.tsx","./src/components/index.tsx","./src/pages/postsmanagerpage.test.tsx","./src/pages/postsmanagerpage.tsx","./src/test/handlers.ts","./src/test/setup.ts","./vite-env.d.ts"],"version":"5.9.2"}
\ No newline at end of file
+{"root":["./src/main.tsx","./src/app/app.test.tsx","./src/app/app.tsx","./src/app/providers/queryprovider.tsx","./src/app/providers/routerprovider.tsx","./src/app/providers/index.tsx","./src/app/routing/approuter.tsx","./src/components/footer.tsx","./src/components/header.tsx","./src/entities/comment/index.ts","./src/entities/comment/api/index.ts","./src/entities/comment/model/types.ts","./src/entities/post/index.ts","./src/entities/post/api/index.ts","./src/entities/post/config/constants.ts","./src/entities/post/model/types.ts","./src/entities/tag/index.ts","./src/entities/tag/api/index.ts","./src/entities/tag/model/types.ts","./src/entities/tag/ui/tag.tsx","./src/entities/user/index.ts","./src/entities/user/api/index.ts","./src/entities/user/model/types.ts","./src/feature/add-comment/index.ts","./src/feature/add-comment/api/queries.ts","./src/feature/add-post/index.ts","./src/feature/add-post/api/queries.ts","./src/feature/add-post/model/useaddpostmodal.ts","./src/feature/add-post/ui/addpostbutton.tsx","./src/feature/add-post/ui/addpostmodal.tsx","./src/feature/comment-like/index.ts","./src/feature/comment-like/api/index.ts","./src/feature/delete-comment/index.ts","./src/feature/delete-comment/api/queries.ts","./src/feature/delete-post/index.ts","./src/feature/delete-post/api/queries.ts","./src/feature/get-comments/index.ts","./src/feature/get-comments/api/queries.ts","./src/feature/get-posts/index.ts","./src/feature/get-posts/api/index.ts","./src/feature/get-tags/index.ts","./src/feature/get-tags/api/queries.ts","./src/feature/get-user-by-id/index.ts","./src/feature/get-user-by-id/api/queries.ts","./src/feature/get-users-summary/index.ts","./src/feature/get-users-summary/api/index.ts","./src/feature/get-users-summary/model/types.ts","./src/feature/post-query/index.ts","./src/feature/post-query/model/usepostsquery.ts","./src/feature/posts-filter/index.ts","./src/feature/posts-filter/ui/postsfilter.tsx","./src/feature/update-comment/index.ts","./src/feature/update-comment/api/queries.ts","./src/feature/update-post/index.ts","./src/feature/update-post/api/queries.ts","./src/feature/update-post/model/useupdatepostmodal.ts","./src/feature/update-post/ui/updatepostbutton.tsx","./src/feature/update-post/ui/updatepostmodal.tsx","./src/pages/postsmanagerpage.tsx","./src/pages/index.tsx","./src/shared/api/apiclient.ts","./src/shared/api/index.ts","./src/shared/hooks/index.ts","./src/shared/hooks/usedebouncevalue.ts","./src/shared/hooks/usemodal.ts","./src/shared/lib/highlighttext.tsx","./src/shared/lib/index.ts","./src/shared/store/index.ts","./src/shared/store/modal.ts","./src/shared/ui/index.ts","./src/shared/ui/button/index.tsx","./src/shared/ui/card/index.tsx","./src/shared/ui/dialog/index.tsx","./src/shared/ui/input/index.tsx","./src/shared/ui/select/index.tsx","./src/shared/ui/table/index.tsx","./src/shared/ui/textarea/index.tsx","./src/shared/ui/layouts/mainlayout.tsx","./src/test/handlers.ts","./src/test/setup.ts","./src/widgets/add-comment-modal/index.ts","./src/widgets/add-comment-modal/model/useaddcommentmodal.ts","./src/widgets/add-comment-modal/ui/addcommentbutton.tsx","./src/widgets/add-comment-modal/ui/addcommentmodal.tsx","./src/widgets/post-detail-modal/index.ts","./src/widgets/post-detail-modal/model/usepostdetailmodal.ts","./src/widgets/post-detail-modal/ui/postcomments.tsx","./src/widgets/post-detail-modal/ui/postdetailbutton.tsx","./src/widgets/post-detail-modal/ui/postdetailmodal.tsx","./src/widgets/posts-with-users/index.ts","./src/widgets/posts-with-users/api/queries.ts","./src/widgets/posts-with-users/model/types.ts","./src/widgets/posts-with-users/ui/paginaition.tsx","./src/widgets/posts-with-users/ui/posttable.tsx","./src/widgets/update-comment-modal/index.ts","./src/widgets/update-comment-modal/model/useupdatecommentmodal.ts","./src/widgets/update-comment-modal/ui/updatecommentbutton.tsx","./src/widgets/update-comment-modal/ui/updatecommentmodal.tsx","./src/widgets/user-profile-modal/index.ts","./src/widgets/user-profile-modal/model/useuserprofilemodal.ts","./src/widgets/user-profile-modal/ui/userprofilebutton.tsx","./src/widgets/user-profile-modal/ui/userprofilemodal.tsx","./vite-env.d.ts"],"version":"5.9.2"}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 2ff4a9734..61e3369b7 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,9 +3,13 @@ import path from "path"
 
 import react from "@vitejs/plugin-react"
 import { defineConfig } from "vite"
+import tsconfigPaths from "vite-tsconfig-paths"
+
+const base = process.env.NODE_ENV === "production" ? "/front_6th_chapter2-3/" : ""
 
 export default defineConfig({
-  plugins: [react()],
+  base,
+  plugins: [react(), tsconfigPaths()],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "src"),

From ef920da0d1ec5cedb268ffcd2d64e5e073e470b2 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 09:08:18 +0900
Subject: [PATCH 63/71] =?UTF-8?q?fix:=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=B0=8F=20api=ED=98=B8=EC=B6=9C=20?=
 =?UTF-8?q?=EB=B6=80=EB=B6=84=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/comment/api/index.ts                     | 2 +-
 src/widgets/add-comment-modal/ui/AddCommentButton.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/entities/comment/api/index.ts b/src/entities/comment/api/index.ts
index 1d8df3d64..576f2b75c 100644
--- a/src/entities/comment/api/index.ts
+++ b/src/entities/comment/api/index.ts
@@ -13,7 +13,7 @@ export const commentApi = {
     return apiClient.get<CommentResponse>(`/comments/post/${postId}`)
   },
   async update(comment: Comment) {
-    return apiClient.put<Comment>(`/comments/${comment.id}`, comment)
+    return apiClient.put<Comment>(`/comments/${comment.id}`, { body: comment.body })
   },
   async updateLike(comment: Comment) {
     return apiClient.patch<Comment>(`/comments/${comment.id}`, { likes: comment.likes })
diff --git a/src/widgets/add-comment-modal/ui/AddCommentButton.tsx b/src/widgets/add-comment-modal/ui/AddCommentButton.tsx
index 17a184dda..4cf64fed0 100644
--- a/src/widgets/add-comment-modal/ui/AddCommentButton.tsx
+++ b/src/widgets/add-comment-modal/ui/AddCommentButton.tsx
@@ -1,4 +1,4 @@
-import { MessageSquarePlus } from "lucide-react"
+import { Plus } from "lucide-react"
 import { PropsWithChildren } from "react"
 
 import { useModal } from "@/shared/hooks/useModal"
@@ -19,8 +19,8 @@ export const AddCommentButton = ({ children, postId }: PropsWithChildren<Props>)
 
   return (
     <>
-      <Button onClick={handleAddComment} size="sm" variant="ghost">
-        <MessageSquarePlus className="w-4 h-4 mr-2" />
+      <Button onClick={handleAddComment} size="sm">
+        <Plus className="w-3 h-3 mr-1" />
         {children || "댓글 추가"}
       </Button>
       <AddCommentModal modalId={`add-comment-${postId}`} />

From 9c6643ce668a633e08b883dfe858ecf20e991d66 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 09:27:23 +0900
Subject: [PATCH 64/71] =?UTF-8?q?chore:=20tasntack-qeury=20devtools=20?=
 =?UTF-8?q?=EC=84=A4=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                        |  1 +
 pnpm-lock.yaml                      | 20 ++++++++++++++++++++
 src/app/providers/QueryProvider.tsx |  8 +++++++-
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0ca75b79f..0a73a6320 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.85.0",
+    "@tanstack/react-query-devtools": "^5.85.3",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "zustand": "^5.0.7"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 61f624cfc..e20af99c4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@tanstack/react-query':
         specifier: ^5.85.0
         version: 5.85.0(react@19.1.1)
+      '@tanstack/react-query-devtools':
+        specifier: ^5.85.3
+        version: 5.85.3(@tanstack/react-query@5.85.0(react@19.1.1))(react@19.1.1)
       react:
         specifier: ^19.1.1
         version: 19.1.1
@@ -993,6 +996,15 @@ packages:
   '@tanstack/query-core@5.83.1':
     resolution: {integrity: sha512-OG69LQgT7jSp+5pPuCfzltq/+7l2xoweggjme9vlbCPa/d7D7zaqv5vN/S82SzSYZ4EDLTxNO1PWrv49RAS64Q==}
 
+  '@tanstack/query-devtools@5.84.0':
+    resolution: {integrity: sha512-fbF3n+z1rqhvd9EoGp5knHkv3p5B2Zml1yNRjh7sNXklngYI5RVIWUrUjZ1RIcEoscarUb0+bOvIs5x9dwzOXQ==}
+
+  '@tanstack/react-query-devtools@5.85.3':
+    resolution: {integrity: sha512-WSVweCE1Kh1BVvPDHAmLgGT+GGTJQ9+a7bVqzD+zUiUTht+salJjYm5nikpMNaHFPJV102TCYdvgHgBXtURRNg==}
+    peerDependencies:
+      '@tanstack/react-query': ^5.85.3
+      react: ^18 || ^19
+
   '@tanstack/react-query@5.85.0':
     resolution: {integrity: sha512-t1HMfToVMGfwEJRya6GG7gbK0luZJd+9IySFNePL1BforU1F3LqQ3tBC2Rpvr88bOrlU6PXyMLgJD0Yzn4ztUw==}
     peerDependencies:
@@ -3857,6 +3869,14 @@ snapshots:
 
   '@tanstack/query-core@5.83.1': {}
 
+  '@tanstack/query-devtools@5.84.0': {}
+
+  '@tanstack/react-query-devtools@5.85.3(@tanstack/react-query@5.85.0(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@tanstack/query-devtools': 5.84.0
+      '@tanstack/react-query': 5.85.0(react@19.1.1)
+      react: 19.1.1
+
   '@tanstack/react-query@5.85.0(react@19.1.1)':
     dependencies:
       '@tanstack/query-core': 5.83.1
diff --git a/src/app/providers/QueryProvider.tsx b/src/app/providers/QueryProvider.tsx
index 8c09b92d5..cc199f97f 100644
--- a/src/app/providers/QueryProvider.tsx
+++ b/src/app/providers/QueryProvider.tsx
@@ -1,4 +1,5 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 import { ReactNode } from "react"
 
 interface QueryProviderProps {
@@ -17,5 +18,10 @@ const queyrClient = new QueryClient({
 })
 
 export const QueryProvider = ({ children }: QueryProviderProps) => {
-  return <QueryClientProvider client={queyrClient}>{children}</QueryClientProvider>
+  return (
+    <QueryClientProvider client={queyrClient}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={true} />
+    </QueryClientProvider>
+  )
 }

From 4fac550b2697c74e4d3f9aaab435fec9ad855bd2 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 10:50:38 +0900
Subject: [PATCH 65/71] =?UTF-8?q?chore:=20=EC=82=AC=EC=9A=A9=ED=95=98?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=A0=95?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/react.svg | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 src/assets/react.svg

diff --git a/src/assets/react.svg b/src/assets/react.svg
deleted file mode 100644
index 6c87de9bb..000000000
--- a/src/assets/react.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file

From 1d9c812fba9f4eb091d14349a9406cc81a25363d Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 10:50:59 +0900
Subject: [PATCH 66/71] =?UTF-8?q?feat:=20=ED=8C=8C=EC=9D=BC=20=EA=B2=BD?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index.tsx                                       | 2 +-
 src/{components => pages/post-manager-page/ui}/Footer.tsx | 0
 src/{components => pages/post-manager-page/ui}/Header.tsx | 0
 src/pages/{ => post-manager-page/ui}/PostsManagerPage.tsx | 0
 src/shared/ui/layouts/MainLayout.tsx                      | 4 ++--
 5 files changed, 3 insertions(+), 3 deletions(-)
 rename src/{components => pages/post-manager-page/ui}/Footer.tsx (100%)
 rename src/{components => pages/post-manager-page/ui}/Header.tsx (100%)
 rename src/pages/{ => post-manager-page/ui}/PostsManagerPage.tsx (100%)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index bb013ed3f..94d0f65f7 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1 +1 @@
-export * from "./PostsManagerPage"
+export * from "./post-manager-page/ui/PostsManagerPage"
diff --git a/src/components/Footer.tsx b/src/pages/post-manager-page/ui/Footer.tsx
similarity index 100%
rename from src/components/Footer.tsx
rename to src/pages/post-manager-page/ui/Footer.tsx
diff --git a/src/components/Header.tsx b/src/pages/post-manager-page/ui/Header.tsx
similarity index 100%
rename from src/components/Header.tsx
rename to src/pages/post-manager-page/ui/Header.tsx
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/post-manager-page/ui/PostsManagerPage.tsx
similarity index 100%
rename from src/pages/PostsManagerPage.tsx
rename to src/pages/post-manager-page/ui/PostsManagerPage.tsx
diff --git a/src/shared/ui/layouts/MainLayout.tsx b/src/shared/ui/layouts/MainLayout.tsx
index 45ed25e29..6bcabbfe8 100644
--- a/src/shared/ui/layouts/MainLayout.tsx
+++ b/src/shared/ui/layouts/MainLayout.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from "react"
 
-import Footer from "@/components/Footer"
-import Header from "@/components/Header"
+import Footer from "@/pages/post-manager-page/ui/Footer"
+import Header from "@/pages/post-manager-page/ui/Header"
 
 interface LayoutProps {
   children: ReactNode

From ef151de671de751e329f3fcd2e32df54d0215b97 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 11:06:40 +0900
Subject: [PATCH 67/71] =?UTF-8?q?chore:=20=ED=8C=8C=EC=9D=BC=20=EA=B2=BD?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/feature/add-comment/index.ts                              | 2 ++
 .../add-comment}/model/useAddCommentModal.ts                  | 0
 .../add-comment}/ui/AddCommentButton.tsx                      | 0
 .../add-comment}/ui/AddCommentModal.tsx                       | 0
 .../get-users-summary}/model/useUserProfileModal.ts           | 0
 .../get-users-summary}/ui/UserProfileButton.tsx               | 0
 .../get-users-summary}/ui/UserProfileModal.tsx                | 0
 .../update-comment}/model/useUpdateCommentModal.ts            | 0
 .../update-comment}/ui/UpdateCommentButton.tsx                | 0
 .../update-comment}/ui/UpdateCommentModal.tsx                 | 0
 src/widgets/add-comment-modal/index.ts                        | 3 ---
 src/widgets/post-detail-modal/ui/PostComments.tsx             | 4 ++--
 src/widgets/posts-with-users/ui/PostTable.tsx                 | 2 +-
 src/widgets/update-comment-modal/index.ts                     | 3 ---
 src/widgets/user-profile-modal/index.ts                       | 3 ---
 15 files changed, 5 insertions(+), 12 deletions(-)
 rename src/{widgets/add-comment-modal => feature/add-comment}/model/useAddCommentModal.ts (100%)
 rename src/{widgets/add-comment-modal => feature/add-comment}/ui/AddCommentButton.tsx (100%)
 rename src/{widgets/add-comment-modal => feature/add-comment}/ui/AddCommentModal.tsx (100%)
 rename src/{widgets/user-profile-modal => feature/get-users-summary}/model/useUserProfileModal.ts (100%)
 rename src/{widgets/user-profile-modal => feature/get-users-summary}/ui/UserProfileButton.tsx (100%)
 rename src/{widgets/user-profile-modal => feature/get-users-summary}/ui/UserProfileModal.tsx (100%)
 rename src/{widgets/update-comment-modal => feature/update-comment}/model/useUpdateCommentModal.ts (100%)
 rename src/{widgets/update-comment-modal => feature/update-comment}/ui/UpdateCommentButton.tsx (100%)
 rename src/{widgets/update-comment-modal => feature/update-comment}/ui/UpdateCommentModal.tsx (100%)
 delete mode 100644 src/widgets/add-comment-modal/index.ts
 delete mode 100644 src/widgets/update-comment-modal/index.ts
 delete mode 100644 src/widgets/user-profile-modal/index.ts

diff --git a/src/feature/add-comment/index.ts b/src/feature/add-comment/index.ts
index c98ebcdc0..f8ef4f7de 100644
--- a/src/feature/add-comment/index.ts
+++ b/src/feature/add-comment/index.ts
@@ -1 +1,3 @@
 export * from "./api/queries"
+export * from "./ui/AddCommentButton"
+export * from "./ui/AddCommentModal"
diff --git a/src/widgets/add-comment-modal/model/useAddCommentModal.ts b/src/feature/add-comment/model/useAddCommentModal.ts
similarity index 100%
rename from src/widgets/add-comment-modal/model/useAddCommentModal.ts
rename to src/feature/add-comment/model/useAddCommentModal.ts
diff --git a/src/widgets/add-comment-modal/ui/AddCommentButton.tsx b/src/feature/add-comment/ui/AddCommentButton.tsx
similarity index 100%
rename from src/widgets/add-comment-modal/ui/AddCommentButton.tsx
rename to src/feature/add-comment/ui/AddCommentButton.tsx
diff --git a/src/widgets/add-comment-modal/ui/AddCommentModal.tsx b/src/feature/add-comment/ui/AddCommentModal.tsx
similarity index 100%
rename from src/widgets/add-comment-modal/ui/AddCommentModal.tsx
rename to src/feature/add-comment/ui/AddCommentModal.tsx
diff --git a/src/widgets/user-profile-modal/model/useUserProfileModal.ts b/src/feature/get-users-summary/model/useUserProfileModal.ts
similarity index 100%
rename from src/widgets/user-profile-modal/model/useUserProfileModal.ts
rename to src/feature/get-users-summary/model/useUserProfileModal.ts
diff --git a/src/widgets/user-profile-modal/ui/UserProfileButton.tsx b/src/feature/get-users-summary/ui/UserProfileButton.tsx
similarity index 100%
rename from src/widgets/user-profile-modal/ui/UserProfileButton.tsx
rename to src/feature/get-users-summary/ui/UserProfileButton.tsx
diff --git a/src/widgets/user-profile-modal/ui/UserProfileModal.tsx b/src/feature/get-users-summary/ui/UserProfileModal.tsx
similarity index 100%
rename from src/widgets/user-profile-modal/ui/UserProfileModal.tsx
rename to src/feature/get-users-summary/ui/UserProfileModal.tsx
diff --git a/src/widgets/update-comment-modal/model/useUpdateCommentModal.ts b/src/feature/update-comment/model/useUpdateCommentModal.ts
similarity index 100%
rename from src/widgets/update-comment-modal/model/useUpdateCommentModal.ts
rename to src/feature/update-comment/model/useUpdateCommentModal.ts
diff --git a/src/widgets/update-comment-modal/ui/UpdateCommentButton.tsx b/src/feature/update-comment/ui/UpdateCommentButton.tsx
similarity index 100%
rename from src/widgets/update-comment-modal/ui/UpdateCommentButton.tsx
rename to src/feature/update-comment/ui/UpdateCommentButton.tsx
diff --git a/src/widgets/update-comment-modal/ui/UpdateCommentModal.tsx b/src/feature/update-comment/ui/UpdateCommentModal.tsx
similarity index 100%
rename from src/widgets/update-comment-modal/ui/UpdateCommentModal.tsx
rename to src/feature/update-comment/ui/UpdateCommentModal.tsx
diff --git a/src/widgets/add-comment-modal/index.ts b/src/widgets/add-comment-modal/index.ts
deleted file mode 100644
index 02411db0b..000000000
--- a/src/widgets/add-comment-modal/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./model/useAddCommentModal"
-export * from "./ui/AddCommentButton"
-export * from "./ui/AddCommentModal"
diff --git a/src/widgets/post-detail-modal/ui/PostComments.tsx b/src/widgets/post-detail-modal/ui/PostComments.tsx
index 189fb0048..32bb67281 100644
--- a/src/widgets/post-detail-modal/ui/PostComments.tsx
+++ b/src/widgets/post-detail-modal/ui/PostComments.tsx
@@ -1,14 +1,14 @@
 import { ThumbsUp, Trash2 } from "lucide-react"
 
 import { Comment } from "@/entities/comment"
+import { AddCommentButton } from "@/feature/add-comment"
 import { useCommentLikeMutation } from "@/feature/comment-like"
 import { useDeleteCommentMutation } from "@/feature/delete-comment"
 import { useGetComments } from "@/feature/get-comments"
 import { usePostsQuery } from "@/feature/post-query"
+import { UpdateCommentButton } from "@/feature/update-comment/ui/UpdateCommentButton"
 import { highlightText } from "@/shared/lib"
 import { Button } from "@/shared/ui"
-import { AddCommentButton } from "@/widgets/add-comment-modal"
-import { UpdateCommentButton } from "@/widgets/update-comment-modal"
 
 interface PostCommentsProps {
   postId: number
diff --git a/src/widgets/posts-with-users/ui/PostTable.tsx b/src/widgets/posts-with-users/ui/PostTable.tsx
index 9a85d0960..03367adb7 100644
--- a/src/widgets/posts-with-users/ui/PostTable.tsx
+++ b/src/widgets/posts-with-users/ui/PostTable.tsx
@@ -1,12 +1,12 @@
 import { ThumbsDown, ThumbsUp, Trash2 } from "lucide-react"
 
 import { useDeletePostMutation } from "@/feature/delete-post"
+import { UserProfileButton } from "@/feature/get-users-summary/ui/UserProfileButton"
 import { usePostsQuery } from "@/feature/post-query/model/usePostsQuery"
 import { UpdatePostButton } from "@/feature/update-post"
 import { highlightText } from "@/shared/lib"
 import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/ui"
 import { PostDetailButton } from "@/widgets/post-detail-modal"
-import { UserProfileButton } from "@/widgets/user-profile-modal"
 
 import { usePostsWithUserSummaryQuery } from "../api/queries"
 
diff --git a/src/widgets/update-comment-modal/index.ts b/src/widgets/update-comment-modal/index.ts
deleted file mode 100644
index 4e671e45f..000000000
--- a/src/widgets/update-comment-modal/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./model/useUpdateCommentModal"
-export * from "./ui/UpdateCommentButton"
-export * from "./ui/UpdateCommentModal"
diff --git a/src/widgets/user-profile-modal/index.ts b/src/widgets/user-profile-modal/index.ts
deleted file mode 100644
index 49d4218f5..000000000
--- a/src/widgets/user-profile-modal/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./model/useUserProfileModal"
-export * from "./ui/UserProfileButton"
-export * from "./ui/UserProfileModal"

From 92d12e11e112d1701316203a6d3d7a692deb8cab Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 11:27:50 +0900
Subject: [PATCH 68/71] =?UTF-8?q?refactor:=20loader,=20error=20=ED=91=9C?=
 =?UTF-8?q?=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../add-comment/ui/AddCommentModal.tsx        |  3 +-
 src/feature/add-post/ui/AddPostModal.tsx      | 10 +++-
 .../get-users-summary/ui/UserProfileModal.tsx | 59 +++++++++++--------
 src/feature/posts-filter/ui/PostsFilter.tsx   |  4 +-
 .../update-comment/ui/UpdateCommentModal.tsx  |  7 ++-
 .../update-post/ui/UpdatePostModal.tsx        |  7 ++-
 src/shared/config/constants.ts                |  1 +
 src/shared/index.ts                           |  3 +
 src/shared/lib/index.ts                       |  1 -
 src/shared/ui/Loader/index.tsx                | 11 ++++
 src/shared/ui/index.ts                        |  2 +-
 .../post-detail-modal/ui/PostComments.tsx     | 24 ++++++--
 .../post-detail-modal/ui/PostDetailModal.tsx  |  2 +-
 .../posts-with-users/ui/Paginaition.tsx       | 10 +++-
 src/widgets/posts-with-users/ui/PostTable.tsx |  2 +-
 15 files changed, 101 insertions(+), 45 deletions(-)
 create mode 100644 src/shared/config/constants.ts
 create mode 100644 src/shared/index.ts
 delete mode 100644 src/shared/lib/index.ts
 create mode 100644 src/shared/ui/Loader/index.tsx

diff --git a/src/feature/add-comment/ui/AddCommentModal.tsx b/src/feature/add-comment/ui/AddCommentModal.tsx
index 4535e1972..08ff816d6 100644
--- a/src/feature/add-comment/ui/AddCommentModal.tsx
+++ b/src/feature/add-comment/ui/AddCommentModal.tsx
@@ -10,7 +10,7 @@ interface Props {
 
 export const AddCommentModal = ({ modalId }: Props) => {
   const { close, data, isOpen } = useModal<{ postId: number }>(modalId)
-  const { mutate: addCommentMutate } = useAddCommentMutation()
+  const { isError, mutate: addCommentMutate } = useAddCommentMutation()
   const [commentBody, setCommentBody] = useState("")
 
   const handleAddComment = () => {
@@ -40,6 +40,7 @@ export const AddCommentModal = ({ modalId }: Props) => {
           <Textarea onChange={(e) => setCommentBody(e.target.value)} placeholder="댓글 내용" value={commentBody} />
           <Button onClick={handleAddComment}>댓글 추가</Button>
         </div>
+        {isError && <div className="text-red-500">댓글 추가에 실패했습니다.</div>}
       </DialogContent>
     </Dialog>
   )
diff --git a/src/feature/add-post/ui/AddPostModal.tsx b/src/feature/add-post/ui/AddPostModal.tsx
index bd03b7d1f..9303629bd 100644
--- a/src/feature/add-post/ui/AddPostModal.tsx
+++ b/src/feature/add-post/ui/AddPostModal.tsx
@@ -6,7 +6,7 @@ import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Input, Textar
 
 export const AddPostModal = () => {
   const { close, isOpen } = useAddPostModal()
-  const { mutate: addPostMutate } = useAddPostMutation()
+  const { isError, isPending, mutate: addPostMutate } = useAddPostMutation()
 
   const [newPost, setNewPost] = useState({
     body: "",
@@ -35,24 +35,30 @@ export const AddPostModal = () => {
         </DialogHeader>
         <div className="space-y-4">
           <Input
+            disabled={isPending}
             onChange={(e) => setNewPost({ ...newPost, title: e.target.value })}
             placeholder="제목"
             value={newPost.title}
           />
           <Textarea
+            disabled={isPending}
             onChange={(e) => setNewPost({ ...newPost, body: e.target.value })}
             placeholder="내용"
             rows={10}
             value={newPost.body}
           />
           <Input
+            disabled={isPending}
             onChange={(e) => setNewPost({ ...newPost, userId: Number(e.target.value) })}
             placeholder="사용자 ID"
             type="number"
             value={newPost.userId}
           />
-          <Button onClick={handleAddPost}>게시물 추가</Button>
+          <Button disabled={isPending} onClick={handleAddPost}>
+            게시물 추가
+          </Button>
         </div>
+        {isError && <div className="text-red-500">게시물 추가에 실패했습니다.</div>}
       </DialogContent>
     </Dialog>
   )
diff --git a/src/feature/get-users-summary/ui/UserProfileModal.tsx b/src/feature/get-users-summary/ui/UserProfileModal.tsx
index c1216edd8..659976b60 100644
--- a/src/feature/get-users-summary/ui/UserProfileModal.tsx
+++ b/src/feature/get-users-summary/ui/UserProfileModal.tsx
@@ -1,7 +1,7 @@
 import { useGetUserById } from "@/feature/get-user-by-id"
 import { UserSummary } from "@/feature/get-users-summary"
 import { useModal } from "@/shared/hooks/useModal"
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/ui"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, Loader } from "@/shared/ui"
 
 interface Props {
   modalId: string
@@ -9,7 +9,11 @@ interface Props {
 
 export const UserProfileModal = ({ modalId }: Props) => {
   const { close, data: selectedUser, isOpen } = useModal<UserSummary>(modalId)
-  const { data: userData } = useGetUserById(selectedUser?.id)
+  const { data: userData, isError, isLoading } = useGetUserById(selectedUser?.id)
+
+  if (isError) {
+    return <div className="text-red-500">사용자 정보 조회에 실패했습니다.</div>
+  }
 
   return (
     <Dialog onOpenChange={close} open={isOpen}>
@@ -17,30 +21,35 @@ export const UserProfileModal = ({ modalId }: Props) => {
         <DialogHeader>
           <DialogTitle>사용자 정보</DialogTitle>
         </DialogHeader>
-        <div className="space-y-4">
-          <img alt={userData?.username} className="w-24 h-24 rounded-full mx-auto" src={userData?.image} />
-          <h3 className="text-xl font-semibold text-center">{userData?.username}</h3>
-          <div className="space-y-2">
-            <p>
-              <strong>이름:</strong> {userData?.firstName} {userData?.lastName}
-            </p>
-            <p>
-              <strong>나이:</strong> {userData?.age}
-            </p>
-            <p>
-              <strong>이메일:</strong> {userData?.email}
-            </p>
-            <p>
-              <strong>전화번호:</strong> {userData?.phone}
-            </p>
-            <p>
-              <strong>주소:</strong> {userData?.address?.address}, {userData?.address?.city}, {userData?.address?.state}
-            </p>
-            <p>
-              <strong>직장:</strong> {userData?.company?.name} - {userData?.company?.title}
-            </p>
+        {isLoading ? (
+          <Loader />
+        ) : (
+          <div className="space-y-4">
+            <img alt={userData?.username} className="w-24 h-24 rounded-full mx-auto" src={userData?.image} />
+            <h3 className="text-xl font-semibold text-center">{userData?.username}</h3>
+            <div className="space-y-2">
+              <p>
+                <strong>이름:</strong> {userData?.firstName} {userData?.lastName}
+              </p>
+              <p>
+                <strong>나이:</strong> {userData?.age}
+              </p>
+              <p>
+                <strong>이메일:</strong> {userData?.email}
+              </p>
+              <p>
+                <strong>전화번호:</strong> {userData?.phone}
+              </p>
+              <p>
+                <strong>주소:</strong> {userData?.address?.address}, {userData?.address?.city},{" "}
+                {userData?.address?.state}
+              </p>
+              <p>
+                <strong>직장:</strong> {userData?.company?.name} - {userData?.company?.title}
+              </p>
+            </div>
           </div>
-        </div>
+        )}
       </DialogContent>
     </Dialog>
   )
diff --git a/src/feature/posts-filter/ui/PostsFilter.tsx b/src/feature/posts-filter/ui/PostsFilter.tsx
index 45aa07f5b..86603e957 100644
--- a/src/feature/posts-filter/ui/PostsFilter.tsx
+++ b/src/feature/posts-filter/ui/PostsFilter.tsx
@@ -5,6 +5,7 @@ import { PostQueryParams } from "@/entities/post"
 import { Tag } from "@/entities/tag"
 import { useGetTags } from "@/feature/get-tags"
 import { usePostsQuery } from "@/feature/post-query/model/usePostsQuery"
+import { DEBOUNCE_DELAY_TIME } from "@/shared"
 import { useDebounceValue } from "@/shared/hooks/useDebounceValue"
 import { Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/ui"
 
@@ -13,7 +14,7 @@ export const PostsFilter = () => {
   const { data: tagsData } = useGetTags()
 
   const [inputValue, setInputValue] = useState(current.search || "")
-  const debouncedSearchQuery = useDebounceValue(inputValue, 500)
+  const debouncedSearchQuery = useDebounceValue(inputValue, DEBOUNCE_DELAY_TIME)
 
   useEffect(() => {
     updateQuery({ search: debouncedSearchQuery })
@@ -35,7 +36,6 @@ export const PostsFilter = () => {
 
   return (
     <div className="flex gap-4">
-      {/* 검색 입력 */}
       <div className="flex-1">
         <div className="relative">
           <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
diff --git a/src/feature/update-comment/ui/UpdateCommentModal.tsx b/src/feature/update-comment/ui/UpdateCommentModal.tsx
index a33d862e5..ff5912b5c 100644
--- a/src/feature/update-comment/ui/UpdateCommentModal.tsx
+++ b/src/feature/update-comment/ui/UpdateCommentModal.tsx
@@ -11,7 +11,7 @@ interface Props {
 
 export const UpdateCommentModal = ({ modalId }: Props) => {
   const { close, data: selectedComment, isOpen } = useModal<Comment>(modalId)
-  const { mutate: updateCommentMutate } = useUpdateCommentMutation()
+  const { isError, isPending, mutate: updateCommentMutate } = useUpdateCommentMutation()
   const [commentBody, setCommentBody] = useState("")
 
   useEffect(() => {
@@ -43,8 +43,11 @@ export const UpdateCommentModal = ({ modalId }: Props) => {
         </DialogHeader>
         <div className="space-y-4">
           <Textarea onChange={(e) => setCommentBody(e.target.value)} placeholder="댓글 내용" value={commentBody} />
-          <Button onClick={handleUpdateComment}>댓글 업데이트</Button>
+          <Button disabled={isPending} onClick={handleUpdateComment}>
+            댓글 업데이트
+          </Button>
         </div>
+        {isError && <div className="text-red-500">댓글 수정에 실패했습니다.</div>}
       </DialogContent>
     </Dialog>
   )
diff --git a/src/feature/update-post/ui/UpdatePostModal.tsx b/src/feature/update-post/ui/UpdatePostModal.tsx
index 997a5e1f5..7e151bfd8 100644
--- a/src/feature/update-post/ui/UpdatePostModal.tsx
+++ b/src/feature/update-post/ui/UpdatePostModal.tsx
@@ -11,7 +11,7 @@ interface UpdatePostModalProps {
 
 export const UpdatePostModal = ({ modalId }: UpdatePostModalProps) => {
   const { close, data: selectedPost, isOpen } = useModal<Post>(modalId)
-  const { mutate: updatePostMutate } = useUpdatePostMutation()
+  const { isError, isPending, mutate: updatePostMutate } = useUpdatePostMutation()
 
   const [postData, setPostData] = useState({
     body: "",
@@ -61,8 +61,11 @@ export const UpdatePostModal = ({ modalId }: UpdatePostModalProps) => {
             rows={15}
             value={postData.body}
           />
-          <Button onClick={handleUpdatePost}>게시물 업데이트</Button>
+          <Button disabled={isPending} onClick={handleUpdatePost}>
+            게시물 업데이트
+          </Button>
         </div>
+        {isError && <div className="text-red-500">게시물 수정에 실패했습니다.</div>}
       </DialogContent>
     </Dialog>
   )
diff --git a/src/shared/config/constants.ts b/src/shared/config/constants.ts
new file mode 100644
index 000000000..b1c24aa2f
--- /dev/null
+++ b/src/shared/config/constants.ts
@@ -0,0 +1 @@
+export const DEBOUNCE_DELAY_TIME = 500
diff --git a/src/shared/index.ts b/src/shared/index.ts
new file mode 100644
index 000000000..aada1baa6
--- /dev/null
+++ b/src/shared/index.ts
@@ -0,0 +1,3 @@
+export { DEBOUNCE_DELAY_TIME } from "./config/constants"
+export { useDebounceValue } from "./hooks/useDebounceValue"
+export { highlightText } from "./lib/highlightText"
diff --git a/src/shared/lib/index.ts b/src/shared/lib/index.ts
deleted file mode 100644
index 168acbc8b..000000000
--- a/src/shared/lib/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { highlightText } from "./highlightText"
diff --git a/src/shared/ui/Loader/index.tsx b/src/shared/ui/Loader/index.tsx
new file mode 100644
index 000000000..9c6aeb5b6
--- /dev/null
+++ b/src/shared/ui/Loader/index.tsx
@@ -0,0 +1,11 @@
+import { Loader2 } from "lucide-react"
+
+export const Loader = () => {
+  return (
+    <div className="flex justify-center items-center h-screen">
+      <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-gray-900">
+        <Loader2 className="w-6 h-6" />
+      </div>
+    </div>
+  )
+}
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
index 8bf6692d0..fdece24d3 100644
--- a/src/shared/ui/index.ts
+++ b/src/shared/ui/index.ts
@@ -3,7 +3,7 @@ export * from "./Card"
 export * from "./Dialog"
 export * from "./Input"
 export * from "./layouts/MainLayout"
+export * from "./Loader"
 export * from "./Select"
 export * from "./Table"
-
 export * from "./TextArea"
diff --git a/src/widgets/post-detail-modal/ui/PostComments.tsx b/src/widgets/post-detail-modal/ui/PostComments.tsx
index 32bb67281..05b1e36b8 100644
--- a/src/widgets/post-detail-modal/ui/PostComments.tsx
+++ b/src/widgets/post-detail-modal/ui/PostComments.tsx
@@ -7,7 +7,7 @@ import { useDeleteCommentMutation } from "@/feature/delete-comment"
 import { useGetComments } from "@/feature/get-comments"
 import { usePostsQuery } from "@/feature/post-query"
 import { UpdateCommentButton } from "@/feature/update-comment/ui/UpdateCommentButton"
-import { highlightText } from "@/shared/lib"
+import { highlightText } from "@/shared"
 import { Button } from "@/shared/ui"
 
 interface PostCommentsProps {
@@ -19,7 +19,7 @@ export const PostComments = ({ postId }: PostCommentsProps) => {
   const { current } = usePostsQuery()
 
   const commentLikes = useCommentLikeMutation()
-  const { mutate: deleteCommentMutate } = useDeleteCommentMutation()
+  const { isError, isPending, mutate: deleteCommentMutate } = useDeleteCommentMutation()
 
   const handleLikeComment = (comment: Comment) => {
     commentLikes.mutate(comment)
@@ -29,6 +29,10 @@ export const PostComments = ({ postId }: PostCommentsProps) => {
     deleteCommentMutate(commentId)
   }
 
+  if (isError) {
+    return <div className="text-red-500">댓글 삭제에 실패했습니다.</div>
+  }
+
   return (
     <div className="mt-2">
       <div className="flex items-center justify-between mb-2">
@@ -44,12 +48,24 @@ export const PostComments = ({ postId }: PostCommentsProps) => {
               <span className="truncate">{highlightText(comment.body, current.search)}</span>
             </div>
             <div className="flex items-center space-x-1">
-              <Button aria-label="댓글 좋아요" onClick={() => handleLikeComment(comment)} size="sm" variant="ghost">
+              <Button
+                aria-label="댓글 좋아요"
+                disabled={isPending}
+                onClick={() => handleLikeComment(comment)}
+                size="sm"
+                variant="ghost"
+              >
                 <ThumbsUp className="w-3 h-3" />
                 <span className="ml-1 text-xs">{comment.likes}</span>
               </Button>
               <UpdateCommentButton comment={comment} />
-              <Button aria-label="댓글 삭제" onClick={() => handleDeleteComment(comment.id)} size="sm" variant="ghost">
+              <Button
+                aria-label="댓글 삭제"
+                disabled={isPending}
+                onClick={() => handleDeleteComment(comment.id)}
+                size="sm"
+                variant="ghost"
+              >
                 <Trash2 className="w-3 h-3" />
               </Button>
             </div>
diff --git a/src/widgets/post-detail-modal/ui/PostDetailModal.tsx b/src/widgets/post-detail-modal/ui/PostDetailModal.tsx
index 2e7746117..a95c71c87 100644
--- a/src/widgets/post-detail-modal/ui/PostDetailModal.tsx
+++ b/src/widgets/post-detail-modal/ui/PostDetailModal.tsx
@@ -1,7 +1,7 @@
 import { Post } from "@/entities/post"
 import { usePostsQuery } from "@/feature/post-query"
+import { highlightText } from "@/shared"
 import { useModal } from "@/shared/hooks/useModal"
-import { highlightText } from "@/shared/lib"
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/ui"
 
 import { PostComments } from "./PostComments"
diff --git a/src/widgets/posts-with-users/ui/Paginaition.tsx b/src/widgets/posts-with-users/ui/Paginaition.tsx
index 731e60ee8..55bdbcdfe 100644
--- a/src/widgets/posts-with-users/ui/Paginaition.tsx
+++ b/src/widgets/posts-with-users/ui/Paginaition.tsx
@@ -5,7 +5,11 @@ import { usePostsWithUserSummaryQuery } from "../api/queries"
 
 export const Pagination = () => {
   const { current, updateQuery } = usePostsQuery()
-  const { data: postsWithUsers } = usePostsWithUserSummaryQuery()
+  const { data: postsWithUsers, isError, isPending } = usePostsWithUserSummaryQuery()
+
+  if (isError) {
+    return <div className="text-red-500">게시물 목록 조회에 실패했습니다.</div>
+  }
 
   return (
     <div className="flex justify-between items-center">
@@ -25,13 +29,13 @@ export const Pagination = () => {
       </div>
       <div className="flex gap-2">
         <Button
-          disabled={current.skip === 0}
+          disabled={current.skip === 0 || isPending}
           onClick={() => updateQuery({ skip: Math.max(0, current.skip - current.limit) })}
         >
           이전
         </Button>
         <Button
-          disabled={current.skip + current.limit >= (postsWithUsers?.total || 0)}
+          disabled={current.skip + current.limit >= (postsWithUsers?.total || 0) || isPending}
           onClick={() => updateQuery({ skip: current.skip + current.limit })}
         >
           다음
diff --git a/src/widgets/posts-with-users/ui/PostTable.tsx b/src/widgets/posts-with-users/ui/PostTable.tsx
index 03367adb7..5b2f57d7d 100644
--- a/src/widgets/posts-with-users/ui/PostTable.tsx
+++ b/src/widgets/posts-with-users/ui/PostTable.tsx
@@ -4,7 +4,7 @@ import { useDeletePostMutation } from "@/feature/delete-post"
 import { UserProfileButton } from "@/feature/get-users-summary/ui/UserProfileButton"
 import { usePostsQuery } from "@/feature/post-query/model/usePostsQuery"
 import { UpdatePostButton } from "@/feature/update-post"
-import { highlightText } from "@/shared/lib"
+import { highlightText } from "@/shared"
 import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/ui"
 import { PostDetailButton } from "@/widgets/post-detail-modal"
 

From d0e64eabc751ea577906b6bc1956ae0de29cc680 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 12:16:09 +0900
Subject: [PATCH 69/71] =?UTF-8?q?refactor:=20type,=20interface=20=ED=86=B5?=
 =?UTF-8?q?=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/comment/model/types.ts          | 13 +++++++---
 src/entities/tag/model/types.ts              |  6 ++++-
 src/entities/user/model/types.ts             | 26 ++++++++++++++++----
 src/feature/get-users-summary/model/types.ts | 12 +++++++--
 4 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/src/entities/comment/model/types.ts b/src/entities/comment/model/types.ts
index 674a2dbb2..21ea9264e 100644
--- a/src/entities/comment/model/types.ts
+++ b/src/entities/comment/model/types.ts
@@ -1,6 +1,6 @@
 export type AddCommentResponse = Omit<Comment, "likes">
 
-export type Comment = {
+export interface Comment {
   body: string
   id: number
   likes: number
@@ -12,14 +12,19 @@ export type Comment = {
   }
 }
 
-export type CommentRequest = {
+export interface CommentRequest {
   body: string
   postId: null | number
   userId: number
 }
 
-export type CommentResponse = { comments: Comment[]; limit: number; skip: number; total: number }
+export interface CommentResponse {
+  comments: Comment[]
+  limit: number
+  skip: number
+  total: number
+}
 
-export type DeleteCommentResponse = Comment & {
+export interface DeleteCommentResponse extends Comment {
   isDeleted: boolean
 }
diff --git a/src/entities/tag/model/types.ts b/src/entities/tag/model/types.ts
index 70896d524..28fac11d2 100644
--- a/src/entities/tag/model/types.ts
+++ b/src/entities/tag/model/types.ts
@@ -1 +1,5 @@
-export type Tag = { name: string; slug: string; url: string }
+export interface Tag {
+  name: string
+  slug: string
+  url: string
+}
diff --git a/src/entities/user/model/types.ts b/src/entities/user/model/types.ts
index 1289b8cf8..1370cf2a1 100644
--- a/src/entities/user/model/types.ts
+++ b/src/entities/user/model/types.ts
@@ -1,4 +1,4 @@
-export type User = {
+export interface User {
   address?: Address
   age?: number
   company?: Company
@@ -10,10 +10,26 @@ export type User = {
   phone?: string
   username?: string
 }
-export type UserQueryParams = { limit: number; select: string }
 
-export type UsersResponse = { limit: number; skip: number; total: number; users: User[] }
+export interface UserQueryParams {
+  limit: number
+  select: string
+}
 
-type Address = { address?: string; city?: string; state?: string }
+export interface UsersResponse {
+  limit: number
+  skip: number
+  total: number
+  users: User[]
+}
 
-type Company = { name?: string; title?: string }
+interface Address {
+  address?: string
+  city?: string
+  state?: string
+}
+
+interface Company {
+  name?: string
+  title?: string
+}
diff --git a/src/feature/get-users-summary/model/types.ts b/src/feature/get-users-summary/model/types.ts
index 8934b4efe..02e70823b 100644
--- a/src/feature/get-users-summary/model/types.ts
+++ b/src/feature/get-users-summary/model/types.ts
@@ -1,4 +1,12 @@
 import { User } from "@/entities/user"
 
-export type UserSummary = { id: number; image?: string; username?: string }
-export type UserSummaryParams = { limit: number; select: (keyof User)[] }
+export interface UserSummary {
+  id: number
+  image?: string
+  username?: string
+}
+
+export interface UserSummaryParams {
+  limit: number
+  select: (keyof User)[]
+}

From b188f75e9d7d17a912fc92d471374a90e26ef1e3 Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 14:51:39 +0900
Subject: [PATCH 70/71] =?UTF-8?q?refactor:=20=EB=B2=A0=EB=9F=B4=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=20=EC=A1=B0=EC=A0=95=20=EB=B0=8F=20import=20=EA=B2=BD?=
 =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/post/index.ts                     |  6 +++---
 src/entities/tag/index.ts                      |  4 ++--
 src/feature/add-comment/index.ts               |  6 +++---
 src/feature/add-post/index.ts                  |  6 +++---
 src/feature/comment-like/index.ts              |  2 +-
 src/feature/delete-comment/index.ts            |  2 +-
 src/feature/delete-post/index.ts               |  2 +-
 src/feature/get-comments/index.ts              |  2 +-
 src/feature/get-posts/index.ts                 |  2 +-
 src/feature/get-tags/index.ts                  |  2 +-
 src/feature/get-user-by-id/index.ts            |  2 +-
 src/feature/get-users-summary/index.ts         |  4 ++--
 src/feature/post-query/index.ts                |  2 +-
 src/feature/update-comment/index.ts            |  2 +-
 src/feature/update-post/index.ts               |  6 +++---
 .../post-manager-page/ui/PostsManagerPage.tsx  |  3 +--
 src/shared/api/index.ts                        |  2 +-
 src/shared/hooks/index.ts                      |  2 +-
 src/shared/store/index.ts                      |  2 +-
 src/shared/ui/index.ts                         | 18 +++++++++---------
 src/widgets/post-detail-modal/index.ts         |  8 ++++----
 21 files changed, 42 insertions(+), 43 deletions(-)

diff --git a/src/entities/post/index.ts b/src/entities/post/index.ts
index 2177672ca..7fe26cff2 100644
--- a/src/entities/post/index.ts
+++ b/src/entities/post/index.ts
@@ -1,3 +1,3 @@
-export * from "./api/index"
-export * from "./config/constants"
-export * from "./model/types"
+export { postApi } from "./api/index"
+export { SORT_BY, SORT_ORDER } from "./config/constants"
+export type { Post, PostQueryParams, PostsResponse, SearchQueryParams } from "./model/types"
diff --git a/src/entities/tag/index.ts b/src/entities/tag/index.ts
index 399c5e1df..e1a0df0c7 100644
--- a/src/entities/tag/index.ts
+++ b/src/entities/tag/index.ts
@@ -1,3 +1,3 @@
-export * from "./api"
-export * from "./model/types"
+export { TagApi } from "./api/index"
+export type { Tag } from "./model/types"
 export { TagItem } from "./ui/Tag"
diff --git a/src/feature/add-comment/index.ts b/src/feature/add-comment/index.ts
index f8ef4f7de..8f1ef6c3c 100644
--- a/src/feature/add-comment/index.ts
+++ b/src/feature/add-comment/index.ts
@@ -1,3 +1,3 @@
-export * from "./api/queries"
-export * from "./ui/AddCommentButton"
-export * from "./ui/AddCommentModal"
+export { useAddCommentMutation } from "./api/queries"
+export { AddCommentButton } from "./ui/AddCommentButton"
+export { AddCommentModal } from "./ui/AddCommentModal"
diff --git a/src/feature/add-post/index.ts b/src/feature/add-post/index.ts
index fdabef4a4..f29f915a6 100644
--- a/src/feature/add-post/index.ts
+++ b/src/feature/add-post/index.ts
@@ -1,3 +1,3 @@
-export * from "./api/queries"
-export * from "./ui/AddPostButton"
-export * from "./ui/AddPostModal"
+export { useAddPostMutation } from "./api/queries"
+export { AddPostButton } from "./ui/AddPostButton"
+export { AddPostModal } from "./ui/AddPostModal"
diff --git a/src/feature/comment-like/index.ts b/src/feature/comment-like/index.ts
index e1a716605..96dae255d 100644
--- a/src/feature/comment-like/index.ts
+++ b/src/feature/comment-like/index.ts
@@ -1 +1 @@
-export * from "./api"
+export { useCommentLikeMutation } from "./api"
diff --git a/src/feature/delete-comment/index.ts b/src/feature/delete-comment/index.ts
index c98ebcdc0..394664ccd 100644
--- a/src/feature/delete-comment/index.ts
+++ b/src/feature/delete-comment/index.ts
@@ -1 +1 @@
-export * from "./api/queries"
+export { useDeleteCommentMutation } from "./api/queries"
diff --git a/src/feature/delete-post/index.ts b/src/feature/delete-post/index.ts
index c98ebcdc0..94f437db0 100644
--- a/src/feature/delete-post/index.ts
+++ b/src/feature/delete-post/index.ts
@@ -1 +1 @@
-export * from "./api/queries"
+export { useDeletePostMutation } from "./api/queries"
diff --git a/src/feature/get-comments/index.ts b/src/feature/get-comments/index.ts
index c98ebcdc0..0c6a3bd89 100644
--- a/src/feature/get-comments/index.ts
+++ b/src/feature/get-comments/index.ts
@@ -1 +1 @@
-export * from "./api/queries"
+export { useGetComments } from "./api/queries"
diff --git a/src/feature/get-posts/index.ts b/src/feature/get-posts/index.ts
index e1a716605..cd237d36b 100644
--- a/src/feature/get-posts/index.ts
+++ b/src/feature/get-posts/index.ts
@@ -1 +1 @@
-export * from "./api"
+export { getPosts } from "./api"
diff --git a/src/feature/get-tags/index.ts b/src/feature/get-tags/index.ts
index c98ebcdc0..f50706543 100644
--- a/src/feature/get-tags/index.ts
+++ b/src/feature/get-tags/index.ts
@@ -1 +1 @@
-export * from "./api/queries"
+export { useGetTags } from "./api/queries"
diff --git a/src/feature/get-user-by-id/index.ts b/src/feature/get-user-by-id/index.ts
index c98ebcdc0..c5f5198ea 100644
--- a/src/feature/get-user-by-id/index.ts
+++ b/src/feature/get-user-by-id/index.ts
@@ -1 +1 @@
-export * from "./api/queries"
+export { useGetUserById } from "./api/queries"
diff --git a/src/feature/get-users-summary/index.ts b/src/feature/get-users-summary/index.ts
index 05b8ceefe..c5a027dc2 100644
--- a/src/feature/get-users-summary/index.ts
+++ b/src/feature/get-users-summary/index.ts
@@ -1,2 +1,2 @@
-export * from "./api"
-export * from "./model/types"
+export { getUsersSummary } from "./api"
+export type { UserSummary, UserSummaryParams } from "./model/types"
diff --git a/src/feature/post-query/index.ts b/src/feature/post-query/index.ts
index 60966a8b8..2c914fdad 100644
--- a/src/feature/post-query/index.ts
+++ b/src/feature/post-query/index.ts
@@ -1 +1 @@
-export * from "./model/usePostsQuery"
+export { usePostsQuery } from "./model/usePostsQuery"
diff --git a/src/feature/update-comment/index.ts b/src/feature/update-comment/index.ts
index c98ebcdc0..066197f87 100644
--- a/src/feature/update-comment/index.ts
+++ b/src/feature/update-comment/index.ts
@@ -1 +1 @@
-export * from "./api/queries"
+export { useUpdateCommentMutation } from "./api/queries"
diff --git a/src/feature/update-post/index.ts b/src/feature/update-post/index.ts
index bcfc7b78c..1c29b3942 100644
--- a/src/feature/update-post/index.ts
+++ b/src/feature/update-post/index.ts
@@ -1,3 +1,3 @@
-export * from "./api/queries"
-export * from "./ui/UpdatePostButton"
-export * from "./ui/UpdatePostModal"
+export { useUpdatePostMutation } from "./api/queries"
+export { UpdatePostButton } from "./ui/UpdatePostButton"
+export { UpdatePostModal } from "./ui/UpdatePostModal"
diff --git a/src/pages/post-manager-page/ui/PostsManagerPage.tsx b/src/pages/post-manager-page/ui/PostsManagerPage.tsx
index f0effee8a..75e533d61 100644
--- a/src/pages/post-manager-page/ui/PostsManagerPage.tsx
+++ b/src/pages/post-manager-page/ui/PostsManagerPage.tsx
@@ -1,8 +1,7 @@
 import { AddPostButton } from "@/feature/add-post"
 import { PostsFilter } from "@/feature/posts-filter"
 import { Card, CardContent, CardHeader, CardTitle } from "@/shared/ui"
-import { PostsTable } from "@/widgets/posts-with-users"
-import { Pagination } from "@/widgets/posts-with-users/ui/Paginaition"
+import { Pagination, PostsTable } from "@/widgets/posts-with-users"
 
 export const PostsManagerPage = () => {
   return (
diff --git a/src/shared/api/index.ts b/src/shared/api/index.ts
index 71e703fc4..6113dde12 100644
--- a/src/shared/api/index.ts
+++ b/src/shared/api/index.ts
@@ -1 +1 @@
-export * from "./apiClient"
+export { apiClient } from "./apiClient"
diff --git a/src/shared/hooks/index.ts b/src/shared/hooks/index.ts
index 645adb5d8..5fdf7a9ac 100644
--- a/src/shared/hooks/index.ts
+++ b/src/shared/hooks/index.ts
@@ -1 +1 @@
-export * from "./useDebounceValue"
+export { useDebounceValue } from "./useDebounceValue"
diff --git a/src/shared/store/index.ts b/src/shared/store/index.ts
index a30909e18..8a0013cc4 100644
--- a/src/shared/store/index.ts
+++ b/src/shared/store/index.ts
@@ -1 +1 @@
-export * from "./modal"
+export { useModalStore } from "./modal"
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
index fdece24d3..b1e9e7913 100644
--- a/src/shared/ui/index.ts
+++ b/src/shared/ui/index.ts
@@ -1,9 +1,9 @@
-export * from "./Button"
-export * from "./Card"
-export * from "./Dialog"
-export * from "./Input"
-export * from "./layouts/MainLayout"
-export * from "./Loader"
-export * from "./Select"
-export * from "./Table"
-export * from "./TextArea"
+export { Button } from "./Button"
+export { Card, CardContent, CardHeader, CardTitle } from "./Card"
+export { Dialog, DialogContent, DialogHeader, DialogTitle } from "./Dialog"
+export { Input } from "./Input"
+export { Layout } from "./layouts/MainLayout"
+export { Loader } from "./Loader"
+export { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./Select"
+export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./Table"
+export { Textarea } from "./TextArea"
diff --git a/src/widgets/post-detail-modal/index.ts b/src/widgets/post-detail-modal/index.ts
index e0ef9d832..c4d3904e9 100644
--- a/src/widgets/post-detail-modal/index.ts
+++ b/src/widgets/post-detail-modal/index.ts
@@ -1,4 +1,4 @@
-export * from "./model/usePostDetailModal"
-export * from "./ui/PostComments"
-export * from "./ui/PostDetailButton"
-export * from "./ui/PostDetailModal"
+export { usePostDetailModal } from "./model/usePostDetailModal"
+export { PostComments } from "./ui/PostComments"
+export { PostDetailButton } from "./ui/PostDetailButton"
+export { DetailPostModal } from "./ui/PostDetailModal"

From 5cbb67ee77a9a29229e7d81b50ec0e5a046be4fd Mon Sep 17 00:00:00 2001
From: jihyeon <rachel2148072@gmail.com>
Date: Fri, 15 Aug 2025 21:55:44 +0900
Subject: [PATCH 71/71] =?UTF-8?q?chore:=20=ED=8F=B4=EB=8D=94=20=EC=9D=B4?=
 =?UTF-8?q?=EB=A6=84=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/feature/comment-like/index.ts                             | 1 -
 .../{comment-like => update-comment-like}/api/index.ts        | 2 +-
 src/feature/update-comment-like/index.ts                      | 1 +
 src/widgets/post-detail-modal/ui/PostComments.tsx             | 4 ++--
 src/widgets/posts-with-users/model/types.ts                   | 3 ++-
 tsconfig.app.tsbuildinfo                                      | 2 +-
 6 files changed, 7 insertions(+), 6 deletions(-)
 delete mode 100644 src/feature/comment-like/index.ts
 rename src/feature/{comment-like => update-comment-like}/api/index.ts (96%)
 create mode 100644 src/feature/update-comment-like/index.ts

diff --git a/src/feature/comment-like/index.ts b/src/feature/comment-like/index.ts
deleted file mode 100644
index 96dae255d..000000000
--- a/src/feature/comment-like/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { useCommentLikeMutation } from "./api"
diff --git a/src/feature/comment-like/api/index.ts b/src/feature/update-comment-like/api/index.ts
similarity index 96%
rename from src/feature/comment-like/api/index.ts
rename to src/feature/update-comment-like/api/index.ts
index 7142af0c3..b6fa1212b 100644
--- a/src/feature/comment-like/api/index.ts
+++ b/src/feature/update-comment-like/api/index.ts
@@ -5,7 +5,7 @@ import type { Comment } from "@/entities/comment"
 import { commentApi } from "@/entities/comment"
 import { CommentResponse } from "@/entities/comment/model/types"
 
-export const useCommentLikeMutation = () => {
+export const useUpdateCommentLikeMutation = () => {
   const queryClient = useQueryClient()
 
   return useMutation({
diff --git a/src/feature/update-comment-like/index.ts b/src/feature/update-comment-like/index.ts
new file mode 100644
index 000000000..34e3272cf
--- /dev/null
+++ b/src/feature/update-comment-like/index.ts
@@ -0,0 +1 @@
+export { useUpdateCommentLikeMutation } from "./api"
diff --git a/src/widgets/post-detail-modal/ui/PostComments.tsx b/src/widgets/post-detail-modal/ui/PostComments.tsx
index 05b1e36b8..8f92fd396 100644
--- a/src/widgets/post-detail-modal/ui/PostComments.tsx
+++ b/src/widgets/post-detail-modal/ui/PostComments.tsx
@@ -2,10 +2,10 @@ import { ThumbsUp, Trash2 } from "lucide-react"
 
 import { Comment } from "@/entities/comment"
 import { AddCommentButton } from "@/feature/add-comment"
-import { useCommentLikeMutation } from "@/feature/comment-like"
 import { useDeleteCommentMutation } from "@/feature/delete-comment"
 import { useGetComments } from "@/feature/get-comments"
 import { usePostsQuery } from "@/feature/post-query"
+import { useUpdateCommentLikeMutation } from "@/feature/update-comment-like"
 import { UpdateCommentButton } from "@/feature/update-comment/ui/UpdateCommentButton"
 import { highlightText } from "@/shared"
 import { Button } from "@/shared/ui"
@@ -18,7 +18,7 @@ export const PostComments = ({ postId }: PostCommentsProps) => {
   const { data: comments } = useGetComments(postId)
   const { current } = usePostsQuery()
 
-  const commentLikes = useCommentLikeMutation()
+  const commentLikes = useUpdateCommentLikeMutation()
   const { isError, isPending, mutate: deleteCommentMutate } = useDeleteCommentMutation()
 
   const handleLikeComment = (comment: Comment) => {
diff --git a/src/widgets/posts-with-users/model/types.ts b/src/widgets/posts-with-users/model/types.ts
index 81acfe000..c4bf4fa90 100644
--- a/src/widgets/posts-with-users/model/types.ts
+++ b/src/widgets/posts-with-users/model/types.ts
@@ -1,4 +1,5 @@
-import { Post, PostPagiantionReponse } from "@/entities/post"
+import { Post } from "@/entities/post"
+import { PostPagiantionReponse } from "@/entities/post/model/types"
 import { UserSummary } from "@/feature/get-users-summary"
 
 export interface PostWithUserSummary extends Post {
diff --git a/tsconfig.app.tsbuildinfo b/tsconfig.app.tsbuildinfo
index a29a765fb..2047e5a88 100644
--- a/tsconfig.app.tsbuildinfo
+++ b/tsconfig.app.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/main.tsx","./src/app/app.test.tsx","./src/app/app.tsx","./src/app/providers/queryprovider.tsx","./src/app/providers/routerprovider.tsx","./src/app/providers/index.tsx","./src/app/routing/approuter.tsx","./src/components/footer.tsx","./src/components/header.tsx","./src/entities/comment/index.ts","./src/entities/comment/api/index.ts","./src/entities/comment/model/types.ts","./src/entities/post/index.ts","./src/entities/post/api/index.ts","./src/entities/post/config/constants.ts","./src/entities/post/model/types.ts","./src/entities/tag/index.ts","./src/entities/tag/api/index.ts","./src/entities/tag/model/types.ts","./src/entities/tag/ui/tag.tsx","./src/entities/user/index.ts","./src/entities/user/api/index.ts","./src/entities/user/model/types.ts","./src/feature/add-comment/index.ts","./src/feature/add-comment/api/queries.ts","./src/feature/add-post/index.ts","./src/feature/add-post/api/queries.ts","./src/feature/add-post/model/useaddpostmodal.ts","./src/feature/add-post/ui/addpostbutton.tsx","./src/feature/add-post/ui/addpostmodal.tsx","./src/feature/comment-like/index.ts","./src/feature/comment-like/api/index.ts","./src/feature/delete-comment/index.ts","./src/feature/delete-comment/api/queries.ts","./src/feature/delete-post/index.ts","./src/feature/delete-post/api/queries.ts","./src/feature/get-comments/index.ts","./src/feature/get-comments/api/queries.ts","./src/feature/get-posts/index.ts","./src/feature/get-posts/api/index.ts","./src/feature/get-tags/index.ts","./src/feature/get-tags/api/queries.ts","./src/feature/get-user-by-id/index.ts","./src/feature/get-user-by-id/api/queries.ts","./src/feature/get-users-summary/index.ts","./src/feature/get-users-summary/api/index.ts","./src/feature/get-users-summary/model/types.ts","./src/feature/post-query/index.ts","./src/feature/post-query/model/usepostsquery.ts","./src/feature/posts-filter/index.ts","./src/feature/posts-filter/ui/postsfilter.tsx","./src/feature/update-comment/index.ts","./src/feature/update-comment/api/queries.ts","./src/feature/update-post/index.ts","./src/feature/update-post/api/queries.ts","./src/feature/update-post/model/useupdatepostmodal.ts","./src/feature/update-post/ui/updatepostbutton.tsx","./src/feature/update-post/ui/updatepostmodal.tsx","./src/pages/postsmanagerpage.tsx","./src/pages/index.tsx","./src/shared/api/apiclient.ts","./src/shared/api/index.ts","./src/shared/hooks/index.ts","./src/shared/hooks/usedebouncevalue.ts","./src/shared/hooks/usemodal.ts","./src/shared/lib/highlighttext.tsx","./src/shared/lib/index.ts","./src/shared/store/index.ts","./src/shared/store/modal.ts","./src/shared/ui/index.ts","./src/shared/ui/button/index.tsx","./src/shared/ui/card/index.tsx","./src/shared/ui/dialog/index.tsx","./src/shared/ui/input/index.tsx","./src/shared/ui/select/index.tsx","./src/shared/ui/table/index.tsx","./src/shared/ui/textarea/index.tsx","./src/shared/ui/layouts/mainlayout.tsx","./src/test/handlers.ts","./src/test/setup.ts","./src/widgets/add-comment-modal/index.ts","./src/widgets/add-comment-modal/model/useaddcommentmodal.ts","./src/widgets/add-comment-modal/ui/addcommentbutton.tsx","./src/widgets/add-comment-modal/ui/addcommentmodal.tsx","./src/widgets/post-detail-modal/index.ts","./src/widgets/post-detail-modal/model/usepostdetailmodal.ts","./src/widgets/post-detail-modal/ui/postcomments.tsx","./src/widgets/post-detail-modal/ui/postdetailbutton.tsx","./src/widgets/post-detail-modal/ui/postdetailmodal.tsx","./src/widgets/posts-with-users/index.ts","./src/widgets/posts-with-users/api/queries.ts","./src/widgets/posts-with-users/model/types.ts","./src/widgets/posts-with-users/ui/paginaition.tsx","./src/widgets/posts-with-users/ui/posttable.tsx","./src/widgets/update-comment-modal/index.ts","./src/widgets/update-comment-modal/model/useupdatecommentmodal.ts","./src/widgets/update-comment-modal/ui/updatecommentbutton.tsx","./src/widgets/update-comment-modal/ui/updatecommentmodal.tsx","./src/widgets/user-profile-modal/index.ts","./src/widgets/user-profile-modal/model/useuserprofilemodal.ts","./src/widgets/user-profile-modal/ui/userprofilebutton.tsx","./src/widgets/user-profile-modal/ui/userprofilemodal.tsx","./vite-env.d.ts"],"version":"5.9.2"}
\ No newline at end of file
+{"root":["./src/main.tsx","./src/app/app.test.tsx","./src/app/app.tsx","./src/app/providers/queryprovider.tsx","./src/app/providers/routerprovider.tsx","./src/app/providers/index.tsx","./src/app/routing/approuter.tsx","./src/entities/comment/index.ts","./src/entities/comment/api/index.ts","./src/entities/comment/model/types.ts","./src/entities/post/index.ts","./src/entities/post/api/index.ts","./src/entities/post/config/constants.ts","./src/entities/post/model/types.ts","./src/entities/tag/index.ts","./src/entities/tag/api/index.ts","./src/entities/tag/model/types.ts","./src/entities/tag/ui/tag.tsx","./src/entities/user/index.ts","./src/entities/user/api/index.ts","./src/entities/user/model/types.ts","./src/feature/add-comment/index.ts","./src/feature/add-comment/api/queries.ts","./src/feature/add-comment/model/useaddcommentmodal.ts","./src/feature/add-comment/ui/addcommentbutton.tsx","./src/feature/add-comment/ui/addcommentmodal.tsx","./src/feature/add-post/index.ts","./src/feature/add-post/api/queries.ts","./src/feature/add-post/model/useaddpostmodal.ts","./src/feature/add-post/ui/addpostbutton.tsx","./src/feature/add-post/ui/addpostmodal.tsx","./src/feature/delete-comment/index.ts","./src/feature/delete-comment/api/queries.ts","./src/feature/delete-post/index.ts","./src/feature/delete-post/api/queries.ts","./src/feature/get-comments/index.ts","./src/feature/get-comments/api/queries.ts","./src/feature/get-posts/index.ts","./src/feature/get-posts/api/index.ts","./src/feature/get-tags/index.ts","./src/feature/get-tags/api/queries.ts","./src/feature/get-user-by-id/index.ts","./src/feature/get-user-by-id/api/queries.ts","./src/feature/get-users-summary/index.ts","./src/feature/get-users-summary/api/index.ts","./src/feature/get-users-summary/model/types.ts","./src/feature/get-users-summary/model/useuserprofilemodal.ts","./src/feature/get-users-summary/ui/userprofilebutton.tsx","./src/feature/get-users-summary/ui/userprofilemodal.tsx","./src/feature/post-query/index.ts","./src/feature/post-query/model/usepostsquery.ts","./src/feature/posts-filter/index.ts","./src/feature/posts-filter/ui/postsfilter.tsx","./src/feature/update-comment/index.ts","./src/feature/update-comment/api/queries.ts","./src/feature/update-comment/model/useupdatecommentmodal.ts","./src/feature/update-comment/ui/updatecommentbutton.tsx","./src/feature/update-comment/ui/updatecommentmodal.tsx","./src/feature/update-comment-like/index.ts","./src/feature/update-comment-like/api/index.ts","./src/feature/update-post/index.ts","./src/feature/update-post/api/queries.ts","./src/feature/update-post/model/useupdatepostmodal.ts","./src/feature/update-post/ui/updatepostbutton.tsx","./src/feature/update-post/ui/updatepostmodal.tsx","./src/pages/index.tsx","./src/pages/post-manager-page/ui/footer.tsx","./src/pages/post-manager-page/ui/header.tsx","./src/pages/post-manager-page/ui/postsmanagerpage.tsx","./src/shared/index.ts","./src/shared/api/apiclient.ts","./src/shared/api/index.ts","./src/shared/config/constants.ts","./src/shared/hooks/index.ts","./src/shared/hooks/usedebouncevalue.ts","./src/shared/hooks/usemodal.ts","./src/shared/lib/highlighttext.tsx","./src/shared/store/index.ts","./src/shared/store/modal.ts","./src/shared/ui/index.ts","./src/shared/ui/button/index.tsx","./src/shared/ui/card/index.tsx","./src/shared/ui/dialog/index.tsx","./src/shared/ui/input/index.tsx","./src/shared/ui/loader/index.tsx","./src/shared/ui/select/index.tsx","./src/shared/ui/table/index.tsx","./src/shared/ui/textarea/index.tsx","./src/shared/ui/layouts/mainlayout.tsx","./src/test/handlers.ts","./src/test/setup.ts","./src/widgets/post-detail-modal/index.ts","./src/widgets/post-detail-modal/model/usepostdetailmodal.ts","./src/widgets/post-detail-modal/ui/postcomments.tsx","./src/widgets/post-detail-modal/ui/postdetailbutton.tsx","./src/widgets/post-detail-modal/ui/postdetailmodal.tsx","./src/widgets/posts-with-users/index.ts","./src/widgets/posts-with-users/api/queries.ts","./src/widgets/posts-with-users/model/types.ts","./src/widgets/posts-with-users/ui/paginaition.tsx","./src/widgets/posts-with-users/ui/posttable.tsx","./vite-env.d.ts"],"version":"5.9.2"}
\ No newline at end of file