From 3f47c62423bf05c8654c94066a99bbb553648165 Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Tue, 12 Aug 2025 19:08:42 +0900
Subject: [PATCH 01/34] =?UTF-8?q?feat:=20shared=20=EB=82=B4=EB=B6=80?=
 =?UTF-8?q?=EC=97=90=20UI=20=EA=B4=80=EB=A0=A8=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/index.tsx       | 214 ---------------------------------
 src/pages/PostsManagerPage.tsx |   7 +-
 src/shared/ui/Button.tsx       |  41 +++++++
 src/shared/ui/Card.tsx         |  25 ++++
 src/shared/ui/Dialog.tsx       |  49 ++++++++
 src/shared/ui/Input.tsx        |  16 +++
 src/shared/ui/Select.tsx       |  55 +++++++++
 src/shared/ui/Table.tsx        |  57 +++++++++
 src/shared/ui/Textarea.tsx     |  14 +++
 src/shared/ui/index.ts         |   7 ++
 10 files changed, 268 insertions(+), 217 deletions(-)
 delete mode 100644 src/components/index.tsx
 create mode 100644 src/shared/ui/Button.tsx
 create mode 100644 src/shared/ui/Card.tsx
 create mode 100644 src/shared/ui/Dialog.tsx
 create mode 100644 src/shared/ui/Input.tsx
 create mode 100644 src/shared/ui/Select.tsx
 create mode 100644 src/shared/ui/Table.tsx
 create mode 100644 src/shared/ui/Textarea.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 8495817d3..000000000
--- a/src/components/index.tsx
+++ /dev/null
@@ -1,214 +0,0 @@
-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 { cva, VariantProps } from "class-variance-authority"
-
-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",
-  {
-    variants: {
-      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",
-      },
-      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",
-    },
-  },
-)
-
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-  className?: string
-}
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, ...props }, ref) => {
-  return <button className={buttonVariants({ variant, size, className })} ref={ref} {...props} />
-})
-
-Button.displayName = "Button"
-
-// 입력 컴포넌트
-export const Input = forwardRef(({ 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}
-      {...props}
-    />
-  )
-})
-Input.displayName = "Input"
-
-// 카드 컴포넌트
-export const Card = forwardRef(({ 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) => (
-  <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) => (
-  <h3 ref={ref} className={`text-2xl font-semibold leading-none tracking-tight ${className}`} {...props} />
-))
-CardTitle.displayName = "CardTitle"
-
-export const CardContent = forwardRef(({ className, ...props }, ref) => (
-  <div ref={ref} className={`p-6 pt-0 ${className}`} {...props} />
-))
-CardContent.displayName = "CardContent"
-
-// 텍스트 영역 컴포넌트
-export const Textarea = forwardRef(({ 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(({ 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}`}
-    {...props}
-  >
-    {children}
-    <ChevronDown className="h-4 w-4 opacity-50" />
-  </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
-
-export const SelectContent = forwardRef(({ className, children, 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}
-      {...props}
-    >
-      <SelectPrimitive.Viewport className="p-1">{children}</SelectPrimitive.Viewport>
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
-
-export const SelectItem = forwardRef(({ 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}`}
-    {...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(({ 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
-      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}`}
-      {...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 }) => (
-  <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) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={`text-lg font-semibold leading-none tracking-tight ${className}`}
-    {...props}
-  />
-))
-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>
-))
-Table.displayName = "Table"
-
-export const TableHeader = forwardRef(({ className, ...props }, ref) => (
-  <thead ref={ref} className={`[&_tr]:border-b ${className}`} {...props} />
-))
-TableHeader.displayName = "TableHeader"
-
-export const TableBody = forwardRef(({ className, ...props }, ref) => (
-  <tbody ref={ref} className={`[&_tr:last-child]:border-0 ${className}`} {...props} />
-))
-TableBody.displayName = "TableBody"
-
-export const TableRow = forwardRef(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={`border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted h-14 ${className}`}
-    {...props}
-  />
-))
-TableRow.displayName = "TableRow"
-
-export const TableHead = forwardRef(({ 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}`}
-    {...props}
-  />
-))
-TableHead.displayName = "TableHead"
-
-export const TableCell = forwardRef(({ 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..c26582a0d 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -24,7 +24,7 @@ import {
   TableHeader,
   TableRow,
   Textarea,
-} from "../components"
+} from "../shared/ui"
 
 const PostsManager = () => {
   const navigate = useNavigate()
@@ -268,7 +268,6 @@ const PostsManager = () => {
   // 댓글 좋아요
   const likeComment = async (id, postId) => {
     try {
-
       const response = await fetch(`/api/comments/${id}`, {
         method: "PATCH",
         headers: { "Content-Type": "application/json" },
@@ -277,7 +276,9 @@ const PostsManager = () => {
       const data = 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)
diff --git a/src/shared/ui/Button.tsx b/src/shared/ui/Button.tsx
new file mode 100644
index 000000000..276069be2
--- /dev/null
+++ b/src/shared/ui/Button.tsx
@@ -0,0 +1,41 @@
+import { cva, VariantProps } from "class-variance-authority"
+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",
+  {
+    variants: {
+      // 색깔 스타일 (variant)
+      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",
+      },
+      // 크기 스타일 (size)
+      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",
+    },
+  },
+)
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  className?: string
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, ...props }, ref) => {
+  return <button className={buttonVariants({ variant, size, className })} ref={ref} {...props} />
+})
+
+Button.displayName = "Button"
diff --git a/src/shared/ui/Card.tsx b/src/shared/ui/Card.tsx
new file mode 100644
index 000000000..9c2791540
--- /dev/null
+++ b/src/shared/ui/Card.tsx
@@ -0,0 +1,25 @@
+import { forwardRef } from "react"
+
+export const Card = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ 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<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ 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<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={`text-2xl font-semibold leading-none tracking-tight ${className}`} {...props} />
+  ),
+)
+CardTitle.displayName = "CardTitle"
+
+export const CardContent = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={`p-6 pt-0 ${className}`} {...props} />,
+)
+CardContent.displayName = "CardContent"
diff --git a/src/shared/ui/Dialog.tsx b/src/shared/ui/Dialog.tsx
new file mode 100644
index 000000000..e55b54b37
--- /dev/null
+++ b/src/shared/ui/Dialog.tsx
@@ -0,0 +1,49 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-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, DialogPrimitive.DialogContentProps>(
+  ({ 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
+        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}`}
+        {...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 = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }) => (
+    <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.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <DialogPrimitive.Title
+      ref={ref}
+      className={`text-lg font-semibold leading-none tracking-tight ${className}`}
+      {...props}
+    />
+  ),
+)
+DialogTitle.displayName = DialogPrimitive.Title.displayName
diff --git a/src/shared/ui/Input.tsx b/src/shared/ui/Input.tsx
new file mode 100644
index 000000000..b10d3fc83
--- /dev/null
+++ b/src/shared/ui/Input.tsx
@@ -0,0 +1,16 @@
+import { forwardRef } from "react"
+
+// 입력 컴포넌트
+export const Input = forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ 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}
+        {...props}
+      />
+    )
+  },
+)
+Input.displayName = "Input"
diff --git a/src/shared/ui/Select.tsx b/src/shared/ui/Select.tsx
new file mode 100644
index 000000000..731d5cb88
--- /dev/null
+++ b/src/shared/ui/Select.tsx
@@ -0,0 +1,55 @@
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { forwardRef } from "react"
+import { Check, ChevronDown } from "lucide-react"
+
+export const Select = SelectPrimitive.Root
+export const SelectGroup = SelectPrimitive.Group
+export const SelectValue = SelectPrimitive.Value
+
+export const SelectTrigger = forwardRef<HTMLButtonElement, SelectPrimitive.SelectTriggerProps>(
+  ({ 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}`}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Trigger>
+  ),
+)
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+export const SelectContent = forwardRef<HTMLDivElement, SelectPrimitive.SelectContentProps>(
+  ({ className, children, 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}
+        {...props}
+      >
+        <SelectPrimitive.Viewport className="p-1">{children}</SelectPrimitive.Viewport>
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  ),
+)
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+export const SelectItem = forwardRef<HTMLDivElement, SelectPrimitive.SelectItemProps>(
+  ({ 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}`}
+      {...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.tsx b/src/shared/ui/Table.tsx
new file mode 100644
index 000000000..8919f3a77
--- /dev/null
+++ b/src/shared/ui/Table.tsx
@@ -0,0 +1,57 @@
+import { forwardRef } from "react"
+
+// 테이블 컴포넌트
+export const Table = forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ 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<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <thead ref={ref} className={`[&_tr]:border-b ${className}`} {...props} />,
+)
+TableHeader.displayName = "TableHeader"
+
+// 테이블 바디 컴포넌트
+export const TableBody = forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody ref={ref} className={`[&_tr:last-child]:border-0 ${className}`} {...props} />
+  ),
+)
+TableBody.displayName = "TableBody"
+
+// 테이블 행 컴포넌트
+export const TableRow = forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={`border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted h-14 ${className}`}
+      {...props}
+    />
+  ),
+)
+TableRow.displayName = "TableRow"
+
+// 테이블 헤드 컴포넌트
+export const TableHead = forwardRef<HTMLTableCellElement, React.HTMLAttributes<HTMLTableCellElement>>(
+  ({ 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}`}
+      {...props}
+    />
+  ),
+)
+TableHead.displayName = "TableHead"
+
+// 테이블 셀 컴포넌트
+export const TableCell = forwardRef<HTMLTableCellElement, React.HTMLAttributes<HTMLTableCellElement>>(
+  ({ 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/shared/ui/Textarea.tsx b/src/shared/ui/Textarea.tsx
new file mode 100644
index 000000000..ecfc0b304
--- /dev/null
+++ b/src/shared/ui/Textarea.tsx
@@ -0,0 +1,14 @@
+import { forwardRef } from "react"
+
+export const Textarea = forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(
+  ({ 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..b7f907a4d
--- /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 034e72458022f0dd9f877975dde7c167c356dda7 Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Wed, 13 Aug 2025 01:10:25 +0900
Subject: [PATCH 02/34] =?UTF-8?q?feat:=20entities=20=ED=8F=B4=EB=8D=94=20?=
 =?UTF-8?q?=EA=B5=AC=EC=A1=B0=20=EC=83=9D=EC=84=B1=20(model,=20api)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/comment/api/CommentAPI.ts | 56 +++++++++++++++++
 src/entities/comment/model/types.ts    | 39 ++++++++++++
 src/entities/post/api/PostAPI.ts       | 81 +++++++++++++++++++++++++
 src/entities/post/model/types.ts       | 20 +++++++
 src/entities/tag/model/types.ts        |  5 ++
 src/entities/user/api/UserAPI.ts       | 28 +++++++++
 src/entities/user/model/types.ts       |  5 ++
 src/pages/PostsManagerPage.tsx         | 25 ++++----
 src/shared/api/api.ts                  | 83 ++++++++++++++++++++++++++
 9 files changed, 331 insertions(+), 11 deletions(-)
 create mode 100644 src/entities/comment/api/CommentAPI.ts
 create mode 100644 src/entities/comment/model/types.ts
 create mode 100644 src/entities/post/api/PostAPI.ts
 create mode 100644 src/entities/post/model/types.ts
 create mode 100644 src/entities/tag/model/types.ts
 create mode 100644 src/entities/user/api/UserAPI.ts
 create mode 100644 src/entities/user/model/types.ts
 create mode 100644 src/shared/api/api.ts

diff --git a/src/entities/comment/api/CommentAPI.ts b/src/entities/comment/api/CommentAPI.ts
new file mode 100644
index 000000000..3d6b47007
--- /dev/null
+++ b/src/entities/comment/api/CommentAPI.ts
@@ -0,0 +1,56 @@
+import { ApiClient } from "../../../shared/api/api"
+import { CreateComment } from "../model/types"
+
+class CommentAPI extends ApiClient {
+  constructor() {
+    super("/api/comments")
+  }
+
+  /**
+   * 댓글 목록 조회
+   * @param postId - 게시글 ID
+   * @returns 댓글 목록
+   */
+  async getComments(postId: number) {
+    return await this.get(`/post/${postId}`)
+  }
+
+  /**
+   * 댓글 추가
+   * @param comment - 추가할 댓글 정보
+   * @returns 추가된 댓글 정보
+   */
+  async createComment(comment: CreateComment) {
+    return await this.post("/add", comment)
+  }
+
+  /**
+   * 댓글 수정
+   * @param id - 수정할 댓글 ID
+   * @param comment - 수정할 댓글 정보
+   * @returns 수정된 댓글 정보
+   */
+  async updateComment(id: number, comment: CreateComment) {
+    return await this.put(`/${id}`, comment)
+  }
+
+  /**
+   * 댓글 삭제
+   * @param id - 삭제할 댓글 ID
+   * @returns 삭제된 댓글 정보
+   */
+  async deleteComment(id: number) {
+    return await this.delete(`/${id}`)
+  }
+
+  /**
+   * 댓글 좋아요
+   * @param id - 좋아요할 댓글 ID
+   * @returns 좋아요된 댓글 정보
+   */
+  async likeComment(id: number) {
+    return await this.patch(`/${id}`, { likes: 1 })
+  }
+}
+
+export default new CommentAPI()
diff --git a/src/entities/comment/model/types.ts b/src/entities/comment/model/types.ts
new file mode 100644
index 000000000..2c154f7dc
--- /dev/null
+++ b/src/entities/comment/model/types.ts
@@ -0,0 +1,39 @@
+export interface Comment {
+  comments: {
+    id: number
+    body: string
+    postId: number
+    likes: number
+    user: {
+      id: number
+      username: string
+      fullName: string
+    }
+  }
+  limit: number
+  skip: number
+  total: number
+}
+
+export interface CreateComment {
+  body: string
+  id: number
+  postId: number
+  user: {
+    id: number
+    username: string
+    fullName: string
+  }
+}
+
+export interface UpdateComment {
+  body: string
+  id: number
+  likes: number
+  postId: number
+  user: {
+    id: number
+    username: string
+    fullName: string
+  }
+}
diff --git a/src/entities/post/api/PostAPI.ts b/src/entities/post/api/PostAPI.ts
new file mode 100644
index 000000000..de1aefda4
--- /dev/null
+++ b/src/entities/post/api/PostAPI.ts
@@ -0,0 +1,81 @@
+import { ApiClient } from "../../../shared/api/api"
+import { CreatePost } from "../model/types"
+
+/**
+ * PostAPI 클래스는 ApiClient를 상속받아 기본 경로를 설정하고,
+ * 각 메서드에 대한 요청을 처리합니다.
+ */
+class PostAPI extends ApiClient {
+  constructor() {
+    super("/api/posts")
+  }
+
+  /**
+   * 게시글 목록 조회
+   * @param limit - 한 페이지에 표시할 게시글 수
+   * @param skip - 건너뛸 게시글 수
+   * @returns 게시글 목록
+   */
+  async getPosts(limit: number, skip: number) {
+    return await this.get(`?limit=${limit}&skip=${skip}`)
+  }
+
+  /**
+   * 검색어로 게시글 목록 조회
+   * @param searchQuery - 검색어
+   * @returns 검색 결과
+   */
+  async getPostsBySearch(searchQuery: string) {
+    return await this.get(`/search?q=${searchQuery}`)
+  }
+
+  /**
+   * 태그 목록 조회
+   * @returns 태그 목록
+   */
+  async getTags() {
+    return await this.get("/tags")
+  }
+
+  /**
+   * 태그로 게시글 목록 조회
+   * @param tag - 태그
+   * @returns 태그 결과
+   */
+  async getPostsByTag(tag: string) {
+    return await this.get(`/tag/${tag}`)
+  }
+
+  /**
+   * 게시글 추가
+   * @param post - 추가할 게시글 정보
+   * @returns 추가된 게시글 정보
+   */
+  async createPost(post: CreatePost) {
+    return await this.post("/add", post)
+  }
+
+  /**
+   * 게시글 업데이트
+   * @param id - 게시글 ID
+   * @param post - 수정할 게시글 정보
+   * @returns 수정된 게시글 정보
+   */
+  async updatePost(id: number, post: CreatePost) {
+    return await this.put(`/${id}`, post)
+  }
+
+  /**
+   * 게시글 삭제
+   * @param id - 게시글 ID
+   * @returns 삭제된 게시글 정보
+   */
+  async deletePost(id: number) {
+    return await this.delete(`/${id}`)
+  }
+}
+
+/**
+ * 싱글톤 인스턴스 생성
+ */
+export default new PostAPI()
diff --git a/src/entities/post/model/types.ts b/src/entities/post/model/types.ts
new file mode 100644
index 000000000..6b5ae6995
--- /dev/null
+++ b/src/entities/post/model/types.ts
@@ -0,0 +1,20 @@
+// 게시물 타입
+export interface Post {
+  body: string
+  id: number
+  reactions: {
+    dislikes: number
+    likes: number
+  }
+  tags: string[]
+  title: string
+  userId: number
+  views: number
+}
+
+export interface CreatePost {
+  id: number
+  title: string
+  body: string
+  userId: number
+}
diff --git a/src/entities/tag/model/types.ts b/src/entities/tag/model/types.ts
new file mode 100644
index 000000000..28fac11d2
--- /dev/null
+++ b/src/entities/tag/model/types.ts
@@ -0,0 +1,5 @@
+export interface Tag {
+  name: string
+  slug: string
+  url: string
+}
diff --git a/src/entities/user/api/UserAPI.ts b/src/entities/user/api/UserAPI.ts
new file mode 100644
index 000000000..407bad4b3
--- /dev/null
+++ b/src/entities/user/api/UserAPI.ts
@@ -0,0 +1,28 @@
+import { ApiClient } from "../../../shared/api/api"
+
+class UserAPI extends ApiClient {
+  constructor() {
+    super("/api/users")
+  }
+
+  /**
+   * 사용자 목록 조회
+   * @param limit - 한 페이지에 표시할 사용자 수
+   * @param select - 선택할 필드
+   * @returns 사용자 목록
+   */
+  async getUsers(limit: number, select: string) {
+    return await this.get(`?limit=${limit}&select=${select}`)
+  }
+
+  /**
+   * 사용자 정보 조회
+   * @param id - 사용자 ID
+   * @returns 사용자 정보
+   */
+  async getUser(id: number) {
+    return await this.get(`/${id}`)
+  }
+}
+
+export default new UserAPI()
diff --git a/src/entities/user/model/types.ts b/src/entities/user/model/types.ts
new file mode 100644
index 000000000..ebcb90c07
--- /dev/null
+++ b/src/entities/user/model/types.ts
@@ -0,0 +1,5 @@
+export interface User {
+  id: number
+  image: string
+  username: string
+}
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index c26582a0d..60025f326 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -73,10 +73,12 @@ const PostsManager = () => {
     let postsData
     let usersData
 
+    // getPosts
     fetch(`/api/posts?limit=${limit}&skip=${skip}`)
       .then((response) => response.json())
       .then((data) => {
         postsData = data
+        // getUsers
         return fetch("/api/users?limit=0&select=username,image")
       })
       .then((response) => response.json())
@@ -97,17 +99,6 @@ const PostsManager = () => {
       })
   }
 
-  // 태그 가져오기
-  const fetchTags = async () => {
-    try {
-      const response = await fetch("/api/posts/tags")
-      const data = await response.json()
-      setTags(data)
-    } catch (error) {
-      console.error("태그 가져오기 오류:", error)
-    }
-  }
-
   // 게시물 검색
   const searchPosts = async () => {
     if (!searchQuery) {
@@ -116,6 +107,7 @@ const PostsManager = () => {
     }
     setLoading(true)
     try {
+      // getPostsBySearch
       const response = await fetch(`/api/posts/search?q=${searchQuery}`)
       const data = await response.json()
       setPosts(data.posts)
@@ -135,7 +127,9 @@ const PostsManager = () => {
     setLoading(true)
     try {
       const [postsResponse, usersResponse] = await Promise.all([
+        // getPostsByTag
         fetch(`/api/posts/tag/${tag}`),
+        // getUsers
         fetch("/api/users?limit=0&select=username,image"),
       ])
       const postsData = await postsResponse.json()
@@ -157,6 +151,7 @@ const PostsManager = () => {
   // 게시물 추가
   const addPost = async () => {
     try {
+      // createPost
       const response = await fetch("/api/posts/add", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -174,6 +169,7 @@ const PostsManager = () => {
   // 게시물 업데이트
   const updatePost = async () => {
     try {
+      // updatePost
       const response = await fetch(`/api/posts/${selectedPost.id}`, {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
@@ -190,6 +186,7 @@ const PostsManager = () => {
   // 게시물 삭제
   const deletePost = async (id) => {
     try {
+      // deletePost
       await fetch(`/api/posts/${id}`, {
         method: "DELETE",
       })
@@ -203,8 +200,10 @@ const PostsManager = () => {
   const fetchComments = async (postId) => {
     if (comments[postId]) return // 이미 불러온 댓글이 있으면 다시 불러오지 않음
     try {
+      // getComments
       const response = await fetch(`/api/comments/post/${postId}`)
       const data = await response.json()
+      console.log("comments", data)
       setComments((prev) => ({ ...prev, [postId]: data.comments }))
     } catch (error) {
       console.error("댓글 가져오기 오류:", error)
@@ -214,6 +213,7 @@ const PostsManager = () => {
   // 댓글 추가
   const addComment = async () => {
     try {
+      // createComment
       const response = await fetch("/api/comments/add", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -253,6 +253,7 @@ const PostsManager = () => {
   // 댓글 삭제
   const deleteComment = async (id, postId) => {
     try {
+      // deleteComment
       await fetch(`/api/comments/${id}`, {
         method: "DELETE",
       })
@@ -268,6 +269,7 @@ const PostsManager = () => {
   // 댓글 좋아요
   const likeComment = async (id, postId) => {
     try {
+      // likeComment
       const response = await fetch(`/api/comments/${id}`, {
         method: "PATCH",
         headers: { "Content-Type": "application/json" },
@@ -295,6 +297,7 @@ const PostsManager = () => {
   // 사용자 모달 열기
   const openUserModal = async (user) => {
     try {
+      // getUser
       const response = await fetch(`/api/users/${user.id}`)
       const userData = await response.json()
       setSelectedUser(userData)
diff --git a/src/shared/api/api.ts b/src/shared/api/api.ts
new file mode 100644
index 000000000..ed46b67b0
--- /dev/null
+++ b/src/shared/api/api.ts
@@ -0,0 +1,83 @@
+type Params = Record<string, string | number | boolean | undefined | null>
+
+/**
+ * API 요청 함수
+ */
+
+type RequestOpts = {
+  params?: Params
+  headers?: Record<string, string>
+}
+
+const toQuery = (params?: Params) => {
+  if (!params) return ""
+  const sp = new URLSearchParams()
+  for (const [k, v] of Object.entries(params)) {
+    if (v !== undefined && v !== null) sp.set(k, String(v))
+  }
+  const qs = sp.toString()
+  return qs ? `?${qs}` : ""
+}
+
+const trimSlashes = (s: string) => s.replace(/(^\/+|\/+$)/g, "")
+const joinPath = (...parts: Array<string | undefined>) =>
+  "/" +
+  parts
+    .filter((p): p is string => !!p && p.length > 0)
+    .map((p) => trimSlashes(p))
+    .join("/")
+
+/** 확장용 베이스 클라이언트 */
+export class ApiClient {
+  protected readonly basePath: string
+  protected readonly defaultHeaders: Record<string, string>
+
+  constructor(basePath = "", defaultHeaders: Record<string, string> = {}) {
+    this.basePath = trimSlashes(basePath) ? "/" + trimSlashes(basePath) : ""
+    this.defaultHeaders = { ...defaultHeaders }
+  }
+
+  /** 하위 클래스에서 응답 처리 커스터마이징 가능 */
+  protected async parseResponse<T>(res: Response): Promise<T> {
+    if (res.status === 204) return undefined as unknown as T
+    const ct = res.headers.get("Content-Type") || ""
+    if (ct.includes("application/json")) return (await res.json()) as T
+    return (await res.text()) as unknown as T
+  }
+
+  protected buildUrl(path: string, params?: Params) {
+    return joinPath(this.basePath, path) + toQuery(params)
+  }
+
+  protected async request<T>(method: string, path: string, body?: unknown, opts: RequestOpts = {}): Promise<T> {
+    const url = this.buildUrl(path, opts.params)
+    const headers: Record<string, string> = { ...this.defaultHeaders, ...(opts.headers || {}) }
+    const init: RequestInit = { method, headers }
+
+    if (body !== undefined) {
+      if (!headers["Content-Type"]) headers["Content-Type"] = "application/json"
+      init.body = headers["Content-Type"].includes("application/json")
+        ? JSON.stringify(body)
+        : (body as string | FormData | URLSearchParams | ReadableStream)
+    }
+
+    const res = await fetch(url, init)
+    if (!res.ok) {
+      let detail = ""
+      try {
+        detail = (await res.text()).slice(0, 300)
+      } catch {
+        // 응답 텍스트 읽기 실패 시 무시
+      }
+      throw new Error(`API ${res.status} ${res.statusText}${detail ? ` - ${detail}` : ""}`)
+    }
+    return this.parseResponse<T>(res)
+  }
+
+  // HTTP verbs
+  get = <T>(path: string, opts?: RequestOpts) => this.request<T>("GET", path, undefined, opts)
+  delete = <T>(path: string, opts?: RequestOpts) => this.request<T>("DELETE", path, undefined, opts)
+  post = <T, B = unknown>(path: string, body?: B, opts?: RequestOpts) => this.request<T>("POST", path, body, opts)
+  put = <T, B = unknown>(path: string, body?: B, opts?: RequestOpts) => this.request<T>("PUT", path, body, opts)
+  patch = <T, B = unknown>(path: string, body?: B, opts?: RequestOpts) => this.request<T>("PATCH", path, body, opts)
+}

From d29a79b60e7896c8530ce9fb6651d91ff7daf71d Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Wed, 13 Aug 2025 01:32:02 +0900
Subject: [PATCH 03/34] =?UTF-8?q?chore:=20tanstack=20query=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 | 32 ++++++++++++++++++++------------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index e014c5272..091b3ac5d 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.85.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6b2a40d18..70c32a693 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
@@ -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'}
@@ -930,6 +929,14 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@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'}
@@ -2362,12 +2369,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
@@ -3081,9 +3082,16 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.46.2':
     optional: true
 
+  '@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.26.2
+      '@babel/code-frame': 7.27.1
       '@babel/runtime': 7.26.0
       '@types/aria-query': 5.0.4
       aria-query: 5.3.0
@@ -3347,7 +3355,7 @@ snapshots:
   '@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':

From 75417f552d8d7fd6645626eb270ccfb91500deab Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Wed, 13 Aug 2025 03:46:30 +0900
Subject: [PATCH 04/34] =?UTF-8?q?feat:=20post=20=EC=97=85=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=8A=B8=20=EB=AA=A8=EB=8D=B8=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/model/types.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/entities/post/model/types.ts b/src/entities/post/model/types.ts
index 6b5ae6995..d7a8e730f 100644
--- a/src/entities/post/model/types.ts
+++ b/src/entities/post/model/types.ts
@@ -18,3 +18,15 @@ export interface CreatePost {
   body: string
   userId: number
 }
+
+export interface UpdatePost {
+  body: string
+  id: number
+  reactions: {
+    dislikes: number
+    likes: number
+  }
+  tags: string[]
+  title: string
+  userId: number
+}

From 2215335bf6e79707af48076e1cca5a757bce474d Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Wed, 13 Aug 2025 03:49:48 +0900
Subject: [PATCH 05/34] =?UTF-8?q?fix:=20fetchTags=20=ED=95=A8=EC=88=98=20?=
 =?UTF-8?q?=EB=B3=B5=EC=9B=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PostsManagerPage.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 60025f326..387cce2e0 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -118,6 +118,17 @@ const PostsManager = () => {
     setLoading(false)
   }
 
+  // 태그 가져오기
+  const fetchTags = async () => {
+    try {
+      const response = await fetch("/api/posts/tags")
+      const data = await response.json()
+      setTags(data)
+    } catch (error) {
+      console.error("태그 가져오기 오류:", error)
+    }
+  }
+
   // 태그별 게시물 가져오기
   const fetchPostsByTag = async (tag) => {
     if (!tag || tag === "all") {

From 001fbbe38d59eb921fd93b93fda7f6d90e0b9b10 Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Wed, 13 Aug 2025 03:53:55 +0900
Subject: [PATCH 06/34] =?UTF-8?q?feat:=20tanstack=20query=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/comment/hooks.ts    | 22 ++++++++
 src/entities/post/hooks.ts       | 90 ++++++++++++++++++++++++++++++++
 src/entities/user/api/UserAPI.ts |  4 +-
 src/entities/user/hooks.ts       | 16 ++++++
 src/pages/PostsManagerPage.tsx   |  6 +--
 5 files changed, 133 insertions(+), 5 deletions(-)
 create mode 100644 src/entities/comment/hooks.ts
 create mode 100644 src/entities/post/hooks.ts
 create mode 100644 src/entities/user/hooks.ts

diff --git a/src/entities/comment/hooks.ts b/src/entities/comment/hooks.ts
new file mode 100644
index 000000000..4ac81f0a6
--- /dev/null
+++ b/src/entities/comment/hooks.ts
@@ -0,0 +1,22 @@
+import { useMutation, useQuery } from "@tanstack/react-query"
+import CommentAPI from "./api/CommentAPI"
+import { CreateComment } from "./model/types"
+
+export const useGetComments = (postId: number) => {
+  return useQuery({
+    queryKey: ["comments", postId],
+    queryFn: () => CommentAPI.getComments(postId),
+  })
+}
+
+export const useCreateComment = () => {
+  return useMutation({
+    mutationFn: (comment: CreateComment) => CommentAPI.createComment(comment),
+  })
+}
+
+export const useUpdateComment = (id: number) => {
+  return useMutation({
+    mutationFn: (comment: CreateComment) => CommentAPI.updateComment(id, comment),
+  })
+}
diff --git a/src/entities/post/hooks.ts b/src/entities/post/hooks.ts
new file mode 100644
index 000000000..5b60c6f76
--- /dev/null
+++ b/src/entities/post/hooks.ts
@@ -0,0 +1,90 @@
+import { useMutation, useQuery } from "@tanstack/react-query"
+import PostAPI from "./api/PostAPI"
+import { CreatePost, UpdatePost } from "./model/types"
+
+// Query Keys 상수 정의
+const QUERY_KEYS = {
+  POSTS: "posts",
+  TAGS: "tags",
+} as const
+
+/**
+ * 게시글 목록 조회
+ * @param limit - 한 페이지에 표시할 게시글 수
+ * @param skip - 건너뛸 게시글 수
+ * @returns 게시글 목록
+ */
+export const usePosts = (limit: number, skip: number) => {
+  return useQuery({
+    queryKey: [QUERY_KEYS.POSTS, { limit, skip }],
+    queryFn: () => PostAPI.getPosts(limit, skip),
+  })
+}
+
+/**
+ * 검색어로 게시글 목록 조회
+ * @param searchQuery - 검색어
+ * @returns 검색 결과
+ */
+export const usePostsBySearch = (searchQuery: string) => {
+  return useQuery({
+    queryKey: [QUERY_KEYS.POSTS, "search", searchQuery],
+    queryFn: () => PostAPI.getPostsBySearch(searchQuery),
+  })
+}
+
+/**
+ * 게시글 추가
+ * @param post - 추가할 게시글 정보
+ * @returns 추가된 게시글 정보
+ */
+export const useCreatePost = () => {
+  return useMutation({
+    mutationFn: (post: CreatePost) => PostAPI.createPost(post),
+  })
+}
+
+/**
+ * 게시글 업데이트
+ * @param post - 업데이트할 게시글 정보
+ * @returns 업데이트된 게시글 정보
+ */
+export const useUpdatePost = (id: number) => {
+  return useMutation({
+    mutationFn: (post: UpdatePost) => PostAPI.updatePost(id, post),
+  })
+}
+
+/**
+ * 게시글 삭제
+ * @param id - 삭제할 게시글 ID
+ * @returns 삭제된 게시글 정보
+ */
+export const useDeletePost = () => {
+  return useMutation({
+    mutationFn: (id: number) => PostAPI.deletePost(id),
+  })
+}
+
+/**
+ * 태그 목록 조회
+ * @returns 태그 목록
+ */
+export const useGetTags = () => {
+  return useQuery({
+    queryKey: [QUERY_KEYS.TAGS],
+    queryFn: () => PostAPI.getTags(),
+  })
+}
+
+/**
+ * 태그별 게시글 목록 조회
+ * @param tag - 태그
+ * @returns 태그별 게시글 목록
+ */
+export const usePostsByTag = (tag: string) => {
+  return useQuery({
+    queryKey: [QUERY_KEYS.POSTS, "tag", tag],
+    queryFn: () => PostAPI.getPostsByTag(tag),
+  })
+}
diff --git a/src/entities/user/api/UserAPI.ts b/src/entities/user/api/UserAPI.ts
index 407bad4b3..56c6d20ad 100644
--- a/src/entities/user/api/UserAPI.ts
+++ b/src/entities/user/api/UserAPI.ts
@@ -11,7 +11,7 @@ class UserAPI extends ApiClient {
    * @param select - 선택할 필드
    * @returns 사용자 목록
    */
-  async getUsers(limit: number, select: string) {
+  async getUserList(limit: number, select: string) {
     return await this.get(`?limit=${limit}&select=${select}`)
   }
 
@@ -20,7 +20,7 @@ class UserAPI extends ApiClient {
    * @param id - 사용자 ID
    * @returns 사용자 정보
    */
-  async getUser(id: number) {
+  async getUserInfo(id: number) {
     return await this.get(`/${id}`)
   }
 }
diff --git a/src/entities/user/hooks.ts b/src/entities/user/hooks.ts
new file mode 100644
index 000000000..ad0fd4b6f
--- /dev/null
+++ b/src/entities/user/hooks.ts
@@ -0,0 +1,16 @@
+import { useQuery } from "@tanstack/react-query"
+import UserAPI from "./api/UserAPI"
+
+export const useUserList = (limit: number, select: string) => {
+  return useQuery({
+    queryKey: ["users", limit, select],
+    queryFn: () => UserAPI.getUserList(limit, select),
+  })
+}
+
+export const useUserInfo = (id: number) => {
+  return useQuery({
+    queryKey: ["user", id],
+    queryFn: () => UserAPI.getUserInfo(id),
+  })
+}
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 387cce2e0..a79f7688d 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -78,7 +78,7 @@ const PostsManager = () => {
       .then((response) => response.json())
       .then((data) => {
         postsData = data
-        // getUsers
+        // getUserList
         return fetch("/api/users?limit=0&select=username,image")
       })
       .then((response) => response.json())
@@ -140,7 +140,7 @@ const PostsManager = () => {
       const [postsResponse, usersResponse] = await Promise.all([
         // getPostsByTag
         fetch(`/api/posts/tag/${tag}`),
-        // getUsers
+        // getUserList
         fetch("/api/users?limit=0&select=username,image"),
       ])
       const postsData = await postsResponse.json()
@@ -308,7 +308,7 @@ const PostsManager = () => {
   // 사용자 모달 열기
   const openUserModal = async (user) => {
     try {
-      // getUser
+      // getUserInfo
       const response = await fetch(`/api/users/${user.id}`)
       const userData = await response.json()
       setSelectedUser(userData)

From dda4040b08e862b70c92f72434c23ca4c31d843f Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Wed, 13 Aug 2025 07:37:41 +0900
Subject: [PATCH 07/34] =?UTF-8?q?feat:=20tanstack=20query=20=EB=A5=BC=20ma?=
 =?UTF-8?q?in.tsx=EC=97=90=20=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20=EB=B6=88?=
 =?UTF-8?q?=ED=95=84=EC=9A=94=ED=95=9C=20=ED=8C=8C=EC=9D=BC=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/index.tsx | 12 ------------
 src/main.tsx  | 16 ++++++++++------
 2 files changed, 10 insertions(+), 18 deletions(-)
 delete mode 100644 src/index.tsx

diff --git a/src/index.tsx b/src/index.tsx
deleted file mode 100644
index 369e197bb..000000000
--- a/src/index.tsx
+++ /dev/null
@@ -1,12 +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 bef5202a3..3966bd77c 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,14 @@
-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"
+import App from "./App.tsx"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 
-createRoot(document.getElementById('root')!).render(
+const queryClient = new QueryClient()
+
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
   </StrictMode>,
 )

From a44068ab3582abe494edad01d9bcea0fe4a5ec06 Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Wed, 13 Aug 2025 07:39:08 +0900
Subject: [PATCH 08/34] =?UTF-8?q?fix:=20shared=EC=97=90=20=EC=9E=88?=
 =?UTF-8?q?=EB=8A=94=20api=20=ED=98=B8=EC=B6=9C=20=ED=81=B4=EB=9E=98?=
 =?UTF-8?q?=EC=8A=A4=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/api/api.ts | 178 +++++++++++++++++++++++++++---------------
 1 file changed, 115 insertions(+), 63 deletions(-)

diff --git a/src/shared/api/api.ts b/src/shared/api/api.ts
index ed46b67b0..3f69dc58f 100644
--- a/src/shared/api/api.ts
+++ b/src/shared/api/api.ts
@@ -1,83 +1,135 @@
 type Params = Record<string, string | number | boolean | undefined | null>
+type BaseOpts = { params?: Params; headers?: Record<string, string> }
 
 /**
- * API 요청 함수
+ * 쿼리 스트링 생성
+ * @param params - 쿼리 파라미터
+ * @returns 쿼리 스트링
  */
-
-type RequestOpts = {
-  params?: Params
-  headers?: Record<string, string>
-}
-
-const toQuery = (params?: Params) => {
+function queryString(params?: Params): string {
   if (!params) return ""
-  const sp = new URLSearchParams()
-  for (const [k, v] of Object.entries(params)) {
-    if (v !== undefined && v !== null) sp.set(k, String(v))
-  }
-  const qs = sp.toString()
-  return qs ? `?${qs}` : ""
+  const urlSearchParams = new URLSearchParams()
+  Object.entries(params).forEach(([k, v]) => {
+    if (v !== undefined && v !== null) urlSearchParams.set(k, String(v))
+  })
+  const queryString = urlSearchParams.toString()
+  return queryString ? `?${queryString}` : ""
 }
 
-const trimSlashes = (s: string) => s.replace(/(^\/+|\/+$)/g, "")
-const joinPath = (...parts: Array<string | undefined>) =>
-  "/" +
-  parts
-    .filter((p): p is string => !!p && p.length > 0)
-    .map((p) => trimSlashes(p))
-    .join("/")
-
-/** 확장용 베이스 클라이언트 */
+/**
+ * API 클라이언트 클래스
+ * 기본 경로를 설정하고 HTTP 메서드를 제공합니다.
+ */
 export class ApiClient {
-  protected readonly basePath: string
-  protected readonly defaultHeaders: Record<string, string>
-
-  constructor(basePath = "", defaultHeaders: Record<string, string> = {}) {
-    this.basePath = trimSlashes(basePath) ? "/" + trimSlashes(basePath) : ""
-    this.defaultHeaders = { ...defaultHeaders }
-  }
+  private basePath: string
 
-  /** 하위 클래스에서 응답 처리 커스터마이징 가능 */
-  protected async parseResponse<T>(res: Response): Promise<T> {
-    if (res.status === 204) return undefined as unknown as T
-    const ct = res.headers.get("Content-Type") || ""
-    if (ct.includes("application/json")) return (await res.json()) as T
-    return (await res.text()) as unknown as T
+  constructor(basePath: string = "") {
+    this.basePath = basePath
   }
 
-  protected buildUrl(path: string, params?: Params) {
-    return joinPath(this.basePath, path) + toQuery(params)
+  /**
+   * 전체 URL 생성
+   * @param path - 상대 경로
+   * @returns 전체 URL
+   */
+  private buildUrl(path: string): string {
+    // basePath가 이미 /api로 시작하면 중복 방지
+    if (this.basePath.startsWith("/api")) {
+      return this.basePath + path
+    }
+    // basePath가 비어있거나 /api로 시작하지 않으면 /api 추가
+    return "/api" + this.basePath + path
   }
 
-  protected async request<T>(method: string, path: string, body?: unknown, opts: RequestOpts = {}): Promise<T> {
-    const url = this.buildUrl(path, opts.params)
-    const headers: Record<string, string> = { ...this.defaultHeaders, ...(opts.headers || {}) }
-    const init: RequestInit = { method, headers }
+  /**
+   * 요청 처리
+   * @param path - 요청 경로
+   * @param init - 요청 옵션
+   * @returns 요청 결과
+   */
+  private async request<T>(path: string, init: RequestInit): Promise<T> {
+    const url = this.buildUrl(path)
+    const res = await fetch(url, init)
 
-    if (body !== undefined) {
-      if (!headers["Content-Type"]) headers["Content-Type"] = "application/json"
-      init.body = headers["Content-Type"].includes("application/json")
-        ? JSON.stringify(body)
-        : (body as string | FormData | URLSearchParams | ReadableStream)
+    if (!res.ok) {
+      throw new Error(`API ${res.status} ${res.statusText}`)
     }
 
-    const res = await fetch(url, init)
-    if (!res.ok) {
-      let detail = ""
-      try {
-        detail = (await res.text()).slice(0, 300)
-      } catch {
-        // 응답 텍스트 읽기 실패 시 무시
-      }
-      throw new Error(`API ${res.status} ${res.statusText}${detail ? ` - ${detail}` : ""}`)
+    if (res.status === 204) {
+      return undefined as unknown as T
     }
-    return this.parseResponse<T>(res)
+
+    return res.json() as Promise<T>
+  }
+
+  /**
+   * GET 요청
+   * @param path - 요청 경로
+   * @param opts - 요청 옵션
+   * @returns 요청 결과
+   */
+  protected get<T>(path: string, opts: BaseOpts = {}): Promise<T> {
+    return this.request<T>(`${path}${queryString(opts.params)}`, {
+      method: "GET",
+      headers: opts.headers,
+    })
+  }
+
+  /**
+   * POST 요청
+   * @param path - 요청 경로
+   * @param body - 요청 본문
+   * @param opts - 요청 옵션
+   * @returns 요청 결과
+   */
+  protected post<T, B = unknown>(path: string, body?: B, opts: BaseOpts = {}): Promise<T> {
+    return this.request<T>(path, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", ...(opts.headers || {}) },
+      body: body == null ? undefined : JSON.stringify(body),
+    })
+  }
+
+  /**
+   * PUT 요청
+   * @param path - 요청 경로
+   * @param body - 요청 본문
+   * @param opts - 요청 옵션
+   * @returns 요청 결과
+   */
+  protected put<T, B = unknown>(path: string, body?: B, opts: BaseOpts = {}): Promise<T> {
+    return this.request<T>(path, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json", ...(opts.headers || {}) },
+      body: body == null ? undefined : JSON.stringify(body),
+    })
   }
 
-  // HTTP verbs
-  get = <T>(path: string, opts?: RequestOpts) => this.request<T>("GET", path, undefined, opts)
-  delete = <T>(path: string, opts?: RequestOpts) => this.request<T>("DELETE", path, undefined, opts)
-  post = <T, B = unknown>(path: string, body?: B, opts?: RequestOpts) => this.request<T>("POST", path, body, opts)
-  put = <T, B = unknown>(path: string, body?: B, opts?: RequestOpts) => this.request<T>("PUT", path, body, opts)
-  patch = <T, B = unknown>(path: string, body?: B, opts?: RequestOpts) => this.request<T>("PATCH", path, body, opts)
+  /**
+   * PATCH 요청
+   * @param path - 요청 경로
+   * @param body - 요청 본문
+   * @param opts - 요청 옵션
+   * @returns 요청 결과
+   */
+  protected patch<T, B = unknown>(path: string, body?: B, opts: BaseOpts = {}): Promise<T> {
+    return this.request<T>(path, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json", ...(opts.headers || {}) },
+      body: body == null ? undefined : JSON.stringify(body),
+    })
+  }
+
+  /**
+   * DELETE 요청
+   * @param path - 요청 경로
+   * @param opts - 요청 옵션
+   * @returns 요청 결과
+   */
+  protected delete<T>(path: string, opts: BaseOpts = {}): Promise<T> {
+    return this.request<T>(path, {
+      method: "DELETE",
+      headers: opts.headers,
+    })
+  }
 }

From 9b787a4ac4f00d88ff2a3d825a203d2735234407 Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Wed, 13 Aug 2025 07:39:46 +0900
Subject: [PATCH 09/34] =?UTF-8?q?feat:=20text=20highlight=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20shared=20=EB=82=B4=EB=B6=80=EC=97=90=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/ui/HighlightText.tsx | 14 ++++++++++++++
 src/shared/ui/index.ts          |  1 +
 2 files changed, 15 insertions(+)
 create mode 100644 src/shared/ui/HighlightText.tsx

diff --git a/src/shared/ui/HighlightText.tsx b/src/shared/ui/HighlightText.tsx
new file mode 100644
index 000000000..ca5316406
--- /dev/null
+++ b/src/shared/ui/HighlightText.tsx
@@ -0,0 +1,14 @@
+// 하이라이트 함수 추가
+export const highlightText = (text: string, 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/ui/index.ts b/src/shared/ui/index.ts
index b7f907a4d..a8b7acc9e 100644
--- a/src/shared/ui/index.ts
+++ b/src/shared/ui/index.ts
@@ -5,3 +5,4 @@ export * from "./Input"
 export * from "./Select"
 export * from "./Table"
 export * from "./Textarea"
+export * from "./HighlightText"

From c0b793955d6d4171d48db9030c7a6ad9e0275bfb Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Wed, 13 Aug 2025 07:40:18 +0900
Subject: [PATCH 10/34] =?UTF-8?q?refactor:=20post=20model=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/model/types.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/entities/post/model/types.ts b/src/entities/post/model/types.ts
index d7a8e730f..b7d5ab72d 100644
--- a/src/entities/post/model/types.ts
+++ b/src/entities/post/model/types.ts
@@ -1,17 +1,23 @@
 // 게시물 타입
 export interface Post {
-  body: string
+  posts: PostItem[]
+  total: number
+  limit: number
+  skip: number
+}
+
+export interface PostItem {
   id: number
   reactions: {
     dislikes: number
     likes: number
   }
-  tags: string[]
   title: string
+  body: string
   userId: number
   views: number
+  tags: string[]
 }
-
 export interface CreatePost {
   id: number
   title: string

From feade45ae360f3c04c102170737f936aebbe113b Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Wed, 13 Aug 2025 07:40:41 +0900
Subject: [PATCH 11/34] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?=
 =?UTF-8?q?=EA=B0=80=EC=A0=B8=EC=98=A4=EB=8A=94=20hook=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/post/get-posts/hooks.ts | 17 +++++++++++++++++
 src/features/post/get-posts/util.ts  |  9 +++++++++
 2 files changed, 26 insertions(+)
 create mode 100644 src/features/post/get-posts/hooks.ts
 create mode 100644 src/features/post/get-posts/util.ts

diff --git a/src/features/post/get-posts/hooks.ts b/src/features/post/get-posts/hooks.ts
new file mode 100644
index 000000000..84f999c83
--- /dev/null
+++ b/src/features/post/get-posts/hooks.ts
@@ -0,0 +1,17 @@
+import { usePosts } from "../../../entities/post/hooks"
+import { useUserList } from "../../../entities/user/hooks"
+import { joinPostsWithUsers } from "./util"
+
+export const useGetPosts = (limit: number, skip: number) => {
+  const posts = usePosts(limit, skip)
+  const users = useUserList(0, "username,image")
+
+  const postsWithUsers = joinPostsWithUsers(posts.data?.posts || [], users.data?.users || [])
+
+  return {
+    isLoading: posts.isLoading || users.isLoading,
+    isError: posts.isError || users.isError,
+    posts: postsWithUsers,
+    total: posts.data?.total,
+  }
+}
diff --git a/src/features/post/get-posts/util.ts b/src/features/post/get-posts/util.ts
new file mode 100644
index 000000000..02e31b7a7
--- /dev/null
+++ b/src/features/post/get-posts/util.ts
@@ -0,0 +1,9 @@
+import { PostItem } from "../../../entities/post/model/types"
+import { User } from "../../../entities/user/model/types"
+
+export const joinPostsWithUsers = (posts: PostItem[], users: User[]) => {
+  return posts.map((post) => ({
+    ...post,
+    author: users.find((user) => user.id === post.userId),
+  }))
+}

From 8b173606f16a2d3958f43e9f28a10035793bcb4a Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Thu, 14 Aug 2025 19:46:29 +0900
Subject: [PATCH 12/34] =?UTF-8?q?chore:=20=EB=B3=80=EC=88=98=EB=AA=85=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/shared/ui/HighlightText.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/shared/ui/HighlightText.tsx b/src/shared/ui/HighlightText.tsx
index ca5316406..2f22faf49 100644
--- a/src/shared/ui/HighlightText.tsx
+++ b/src/shared/ui/HighlightText.tsx
@@ -1,5 +1,4 @@
-// 하이라이트 함수 추가
-export const highlightText = (text: string, highlight: string) => {
+export const HighlightText = ({ text, highlight }: { text: string; highlight: string }) => {
   if (!text) return null
   if (!highlight.trim()) {
     return <span>{text}</span>

From ebec0be0d9d2d2daa19dfd4b926aa1a9d53e8077 Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Thu, 14 Aug 2025 19:47:14 +0900
Subject: [PATCH 13/34] =?UTF-8?q?refactor:=20Tag=20=ED=8F=B4=EB=8D=94=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20=ED=83=80=EC=9E=85=20post?=
 =?UTF-8?q?=EC=97=90=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/model/types.ts | 9 +++++++++
 src/entities/tag/model/types.ts  | 5 -----
 2 files changed, 9 insertions(+), 5 deletions(-)
 delete mode 100644 src/entities/tag/model/types.ts

diff --git a/src/entities/post/model/types.ts b/src/entities/post/model/types.ts
index b7d5ab72d..20cd06649 100644
--- a/src/entities/post/model/types.ts
+++ b/src/entities/post/model/types.ts
@@ -36,3 +36,12 @@ export interface UpdatePost {
   title: string
   userId: number
 }
+
+/**
+ * 태그 타입
+ */
+export interface Tag {
+  name: string
+  slug: string
+  url: string
+}
diff --git a/src/entities/tag/model/types.ts b/src/entities/tag/model/types.ts
deleted file mode 100644
index 28fac11d2..000000000
--- a/src/entities/tag/model/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface Tag {
-  name: string
-  slug: string
-  url: string
-}

From 4bb9f8456adf7fa72fa6d631a3a10b7352f85813 Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Thu, 14 Aug 2025 19:47:46 +0900
Subject: [PATCH 14/34] =?UTF-8?q?feat:=20Post=20API=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/api/PostAPI.ts | 61 +++++++++++++++++++++++++-------
 1 file changed, 49 insertions(+), 12 deletions(-)

diff --git a/src/entities/post/api/PostAPI.ts b/src/entities/post/api/PostAPI.ts
index de1aefda4..e9a2db46f 100644
--- a/src/entities/post/api/PostAPI.ts
+++ b/src/entities/post/api/PostAPI.ts
@@ -1,5 +1,5 @@
 import { ApiClient } from "../../../shared/api/api"
-import { CreatePost } from "../model/types"
+import { Post, PostItem, CreatePost, UpdatePost, Tag } from "../model/types"
 
 /**
  * PostAPI 클래스는 ApiClient를 상속받아 기본 경로를 설정하고,
@@ -14,36 +14,73 @@ class PostAPI extends ApiClient {
    * 게시글 목록 조회
    * @param limit - 한 페이지에 표시할 게시글 수
    * @param skip - 건너뛸 게시글 수
+   * @param sortBy - 정렬 기준
+   * @param order - 정렬 순서
    * @returns 게시글 목록
    */
-  async getPosts(limit: number, skip: number) {
-    return await this.get(`?limit=${limit}&skip=${skip}`)
+  async getPosts(limit: number, skip: number, sortBy?: string, order?: string): Promise<Post> {
+    const params = new URLSearchParams()
+    params.append("limit", limit.toString())
+    params.append("skip", skip.toString())
+    if (sortBy) params.append("sortBy", sortBy)
+    if (order) params.append("order", order)
+
+    return await this.get(`?${params.toString()}`)
   }
 
   /**
    * 검색어로 게시글 목록 조회
    * @param searchQuery - 검색어
+   * @param limit - 한 페이지에 표시할 게시글 수
+   * @param skip - 건너뛸 게시글 수
+   * @param sortBy - 정렬 기준
+   * @param order - 정렬 순서
    * @returns 검색 결과
    */
-  async getPostsBySearch(searchQuery: string) {
-    return await this.get(`/search?q=${searchQuery}`)
+  async getPostsBySearch(
+    searchQuery: string,
+    limit: number,
+    skip: number,
+    sortBy?: string,
+    order?: string,
+  ): Promise<Post> {
+    const params = new URLSearchParams()
+    console.log("searchQuery", searchQuery)
+    console.log("params", params.toString())
+    params.append("q", searchQuery)
+    params.append("limit", limit.toString())
+    params.append("skip", skip.toString())
+    if (sortBy) params.append("sortBy", sortBy)
+    if (order) params.append("order", order)
+
+    return await this.get(`/search?${params.toString()}`)
   }
 
   /**
    * 태그 목록 조회
    * @returns 태그 목록
    */
-  async getTags() {
+  async getTags(): Promise<Tag[]> {
     return await this.get("/tags")
   }
 
   /**
    * 태그로 게시글 목록 조회
    * @param tag - 태그
+   * @param limit - 한 페이지에 표시할 게시글 수
+   * @param skip - 건너뛸 게시글 수
+   * @param sortBy - 정렬 기준
+   * @param order - 정렬 순서
    * @returns 태그 결과
    */
-  async getPostsByTag(tag: string) {
-    return await this.get(`/tag/${tag}`)
+  async getPostsByTag(tag: string, limit: number, skip: number, sortBy?: string, order?: string): Promise<Post> {
+    const params = new URLSearchParams()
+    params.append("limit", limit.toString())
+    params.append("skip", skip.toString())
+    if (sortBy) params.append("sortBy", sortBy)
+    if (order) params.append("order", order)
+
+    return await this.get(`/tag/${tag}?${params.toString()}`)
   }
 
   /**
@@ -51,7 +88,7 @@ class PostAPI extends ApiClient {
    * @param post - 추가할 게시글 정보
    * @returns 추가된 게시글 정보
    */
-  async createPost(post: CreatePost) {
+  async createPost(post: CreatePost): Promise<PostItem> {
     return await this.post("/add", post)
   }
 
@@ -61,16 +98,16 @@ class PostAPI extends ApiClient {
    * @param post - 수정할 게시글 정보
    * @returns 수정된 게시글 정보
    */
-  async updatePost(id: number, post: CreatePost) {
+  async updatePost(id: number, post: Partial<UpdatePost>): Promise<PostItem> {
     return await this.put(`/${id}`, post)
   }
 
   /**
    * 게시글 삭제
    * @param id - 게시글 ID
-   * @returns 삭제된 게시글 정보
+   * @returns 삭제 성공 여부
    */
-  async deletePost(id: number) {
+  async deletePost(id: number): Promise<void> {
     return await this.delete(`/${id}`)
   }
 }

From 1bf2adfddaeb7d49cd6a0a3009544fcb116623d2 Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Thu, 14 Aug 2025 19:48:16 +0900
Subject: [PATCH 15/34] =?UTF-8?q?feat:=20PostTable=20widget=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/widget/post-table/PostTable.tsx | 110 ++++++++++++++++++++++++++++
 1 file changed, 110 insertions(+)
 create mode 100644 src/widget/post-table/PostTable.tsx

diff --git a/src/widget/post-table/PostTable.tsx b/src/widget/post-table/PostTable.tsx
new file mode 100644
index 000000000..e85435a06
--- /dev/null
+++ b/src/widget/post-table/PostTable.tsx
@@ -0,0 +1,110 @@
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../shared/ui"
+import { ThumbsUp, ThumbsDown, MessageSquare, Edit2, Trash2 } from "lucide-react"
+import { Button, HighlightText } from "../../shared/ui"
+import { PostItem } from "../../entities/post/model/types"
+import { User } from "../../entities/user/model/types"
+
+export const PostTable = ({
+  posts,
+  searchQuery,
+  selectedTag,
+  setSelectedTag,
+  updateURL,
+  openUserModal,
+  openPostDetail,
+  setSelectedPost,
+  setShowEditDialog,
+  deletePost,
+}: {
+  posts: PostItem[]
+  searchQuery: string
+  selectedTag: string
+  setSelectedTag: (tag: string) => void
+  updateURL: () => void
+  openUserModal: (user: User) => void
+  openPostDetail: (post: PostItem) => void
+  setSelectedPost: (post: PostItem) => void
+  setShowEditDialog: (show: boolean) => void
+  deletePost: (id: number) => void
+}) => {
+  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 text={post.title} highlight={searchQuery} />
+                </div>
+
+                <div className="flex flex-wrap gap-1">
+                  {post.tags?.map((tag) => (
+                    <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"
+                      }`}
+                      onClick={() => {
+                        setSelectedTag(tag)
+                        updateURL()
+                      }}
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </TableCell>
+            <TableCell>
+              <div className="flex items-center space-x-2 cursor-pointer" onClick={() => 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>
+            </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 variant="ghost" size="sm" onClick={() => openPostDetail(post)}>
+                  <MessageSquare className="w-4 h-4" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => {
+                    setSelectedPost(post)
+                    setShowEditDialog(true)
+                  }}
+                >
+                  <Edit2 className="w-4 h-4" />
+                </Button>
+                <Button variant="ghost" size="sm" onClick={() => deletePost(post.id)}>
+                  <Trash2 className="w-4 h-4" />
+                </Button>
+              </div>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}

From bdf76b29f6ba868ea1dbda0b204a5a49af10efb3 Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Thu, 14 Aug 2025 19:49:13 +0900
Subject: [PATCH 16/34] =?UTF-8?q?feat:=20API=20custom=20hook=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/{ => model}/hooks.ts | 53 ++++++++++++--------------
 src/features/post/get-posts/hooks.ts   | 23 +++++++----
 2 files changed, 40 insertions(+), 36 deletions(-)
 rename src/entities/post/{ => model}/hooks.ts (60%)

diff --git a/src/entities/post/hooks.ts b/src/entities/post/model/hooks.ts
similarity index 60%
rename from src/entities/post/hooks.ts
rename to src/entities/post/model/hooks.ts
index 5b60c6f76..7981f8657 100644
--- a/src/entities/post/hooks.ts
+++ b/src/entities/post/model/hooks.ts
@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from "@tanstack/react-query"
-import PostAPI from "./api/PostAPI"
-import { CreatePost, UpdatePost } from "./model/types"
+import PostAPI from "../api/PostAPI"
+import { CreatePost, UpdatePost } from "./types"
 
 // Query Keys 상수 정의
 const QUERY_KEYS = {
@@ -12,24 +12,31 @@ const QUERY_KEYS = {
  * 게시글 목록 조회
  * @param limit - 한 페이지에 표시할 게시글 수
  * @param skip - 건너뛸 게시글 수
+ * @param sortBy - 정렬 기준
+ * @param Order - 정렬 순서
+ * @param tag - 태그 (선택사항)
+ * @param searchQuery - 검색어 (선택사항)
  * @returns 게시글 목록
  */
-export const usePosts = (limit: number, skip: number) => {
+export const usePosts = (
+  limit: number,
+  skip: number,
+  sortBy?: string,
+  order?: string,
+  tag?: string,
+  searchQuery?: string,
+) => {
   return useQuery({
-    queryKey: [QUERY_KEYS.POSTS, { limit, skip }],
-    queryFn: () => PostAPI.getPosts(limit, skip),
-  })
-}
-
-/**
- * 검색어로 게시글 목록 조회
- * @param searchQuery - 검색어
- * @returns 검색 결과
- */
-export const usePostsBySearch = (searchQuery: string) => {
-  return useQuery({
-    queryKey: [QUERY_KEYS.POSTS, "search", searchQuery],
-    queryFn: () => PostAPI.getPostsBySearch(searchQuery),
+    queryKey: [QUERY_KEYS.POSTS, { limit, skip, sortBy, order, tag, searchQuery }],
+    queryFn: () => {
+      if (tag && tag !== "all") {
+        return PostAPI.getPostsByTag(tag, limit, skip, sortBy, order)
+      }
+      if (searchQuery) {
+        return PostAPI.getPostsBySearch(searchQuery, limit, skip, sortBy, order)
+      }
+      return PostAPI.getPosts(limit, skip, sortBy, order)
+    },
   })
 }
 
@@ -76,15 +83,3 @@ export const useGetTags = () => {
     queryFn: () => PostAPI.getTags(),
   })
 }
-
-/**
- * 태그별 게시글 목록 조회
- * @param tag - 태그
- * @returns 태그별 게시글 목록
- */
-export const usePostsByTag = (tag: string) => {
-  return useQuery({
-    queryKey: [QUERY_KEYS.POSTS, "tag", tag],
-    queryFn: () => PostAPI.getPostsByTag(tag),
-  })
-}
diff --git a/src/features/post/get-posts/hooks.ts b/src/features/post/get-posts/hooks.ts
index 84f999c83..ea0584c16 100644
--- a/src/features/post/get-posts/hooks.ts
+++ b/src/features/post/get-posts/hooks.ts
@@ -1,17 +1,26 @@
-import { usePosts } from "../../../entities/post/hooks"
+import { usePosts } from "../../../entities/post/model/hooks"
 import { useUserList } from "../../../entities/user/hooks"
 import { joinPostsWithUsers } from "./util"
 
-export const useGetPosts = (limit: number, skip: number) => {
-  const posts = usePosts(limit, skip)
+export const useGetPosts = (
+  limit: number,
+  skip: number,
+  sortBy?: string,
+  order?: string,
+  tag?: string,
+  searchQuery?: string,
+) => {
+  const effectiveSortBy = sortBy || undefined
+  const effectiveSortOrder = order || "asc"
+
+  const posts = usePosts(limit, skip, effectiveSortBy, effectiveSortOrder, tag, searchQuery)
   const users = useUserList(0, "username,image")
 
   const postsWithUsers = joinPostsWithUsers(posts.data?.posts || [], users.data?.users || [])
 
   return {
-    isLoading: posts.isLoading || users.isLoading,
-    isError: posts.isError || users.isError,
-    posts: postsWithUsers,
-    total: posts.data?.total,
+    loading: posts.isLoading || users.isLoading,
+    posts: postsWithUsers || [],
+    total: posts.data?.total || 0,
   }
 }

From bdc53b5bdd8cc71997e486b80d939a34bdc590ad Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Thu, 14 Aug 2025 20:36:52 +0900
Subject: [PATCH 17/34] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=20=ED=95=84?=
 =?UTF-8?q?=ED=84=B0=EB=B3=84=EB=A1=9C=20API=20=ED=98=B8=EC=B6=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/post/api/PostAPI.ts |   2 -
 src/pages/PostsManagerPage.tsx   | 265 +++++++------------------------
 2 files changed, 53 insertions(+), 214 deletions(-)

diff --git a/src/entities/post/api/PostAPI.ts b/src/entities/post/api/PostAPI.ts
index e9a2db46f..f8a482369 100644
--- a/src/entities/post/api/PostAPI.ts
+++ b/src/entities/post/api/PostAPI.ts
@@ -45,8 +45,6 @@ class PostAPI extends ApiClient {
     order?: string,
   ): Promise<Post> {
     const params = new URLSearchParams()
-    console.log("searchQuery", searchQuery)
-    console.log("params", params.toString())
     params.append("q", searchQuery)
     params.append("limit", limit.toString())
     params.append("skip", skip.toString())
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index a79f7688d..935d6b002 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react"
-import { Edit2, MessageSquare, Plus, Search, ThumbsDown, ThumbsUp, Trash2 } from "lucide-react"
+import { Edit2, Plus, Search, ThumbsUp, Trash2 } from "lucide-react"
 import { useLocation, useNavigate } from "react-router-dom"
+
 import {
   Button,
   Card,
@@ -17,14 +18,11 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
   Textarea,
 } from "../shared/ui"
+import { useGetPosts } from "../features/post/get-posts/hooks"
+import { PostTable } from "../widget/post-table/PostTable"
+import { useGetTags } from "../entities/post/model/hooks"
 
 const PostsManager = () => {
   const navigate = useNavigate()
@@ -32,19 +30,16 @@ const PostsManager = () => {
   const queryParams = new URLSearchParams(location.search)
 
   // 상태 관리
-  const [posts, setPosts] = useState([])
-  const [total, setTotal] = useState(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 [searchInputValue, setSearchInputValue] = useState(queryParams.get("search") || "") // 검색 입력값을 별도로 관리
   const [selectedPost, setSelectedPost] = useState(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 [selectedTag, setSelectedTag] = useState(queryParams.get("tag") || "")
   const [comments, setComments] = useState({})
   const [selectedComment, setSelectedComment] = useState(null)
@@ -67,97 +62,21 @@ const PostsManager = () => {
     navigate(`?${params.toString()}`)
   }
 
-  // 게시물 가져오기
-  const fetchPosts = () => {
-    setLoading(true)
-    let postsData
-    let usersData
-
-    // getPosts
-    fetch(`/api/posts?limit=${limit}&skip=${skip}`)
-      .then((response) => response.json())
-      .then((data) => {
-        postsData = data
-        // getUserList
-        return fetch("/api/users?limit=0&select=username,image")
-      })
-      .then((response) => response.json())
-      .then((users) => {
-        usersData = users.users
-        const postsWithUsers = postsData.posts.map((post) => ({
-          ...post,
-          author: usersData.find((user) => user.id === post.userId),
-        }))
-        setPosts(postsWithUsers)
-        setTotal(postsData.total)
-      })
-      .catch((error) => {
-        console.error("게시물 가져오기 오류:", error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }
+  const { posts, total, loading } = useGetPosts(limit, skip, sortBy, sortOrder, selectedTag, searchQuery)
 
   // 게시물 검색
   const searchPosts = async () => {
-    if (!searchQuery) {
-      fetchPosts()
+    if (!searchInputValue) {
       return
     }
-    setLoading(true)
-    try {
-      // getPostsBySearch
-      const response = await fetch(`/api/posts/search?q=${searchQuery}`)
-      const data = await response.json()
-      setPosts(data.posts)
-      setTotal(data.total)
-    } catch (error) {
-      console.error("게시물 검색 오류:", error)
-    }
-    setLoading(false)
-  }
 
-  // 태그 가져오기
-  const fetchTags = async () => {
-    try {
-      const response = await fetch("/api/posts/tags")
-      const data = await response.json()
-      setTags(data)
-    } catch (error) {
-      console.error("태그 가져오기 오류:", error)
-    }
+    setSearchQuery(searchInputValue)
+    setSelectedTag("")
+    setSkip(0)
   }
 
-  // 태그별 게시물 가져오기
-  const fetchPostsByTag = async (tag) => {
-    if (!tag || tag === "all") {
-      fetchPosts()
-      return
-    }
-    setLoading(true)
-    try {
-      const [postsResponse, usersResponse] = await Promise.all([
-        // getPostsByTag
-        fetch(`/api/posts/tag/${tag}`),
-        // getUserList
-        fetch("/api/users?limit=0&select=username,image"),
-      ])
-      const postsData = await postsResponse.json()
-      const usersData = await usersResponse.json()
-
-      const postsWithUsers = postsData.posts.map((post) => ({
-        ...post,
-        author: usersData.users.find((user) => user.id === post.userId),
-      }))
-
-      setPosts(postsWithUsers)
-      setTotal(postsData.total)
-    } catch (error) {
-      console.error("태그별 게시물 가져오기 오류:", error)
-    }
-    setLoading(false)
-  }
+  // 태그 가져오기
+  const tags = useGetTags()
 
   // 게시물 추가
   const addPost = async () => {
@@ -214,7 +133,6 @@ const PostsManager = () => {
       // getComments
       const response = await fetch(`/api/comments/post/${postId}`)
       const data = await response.json()
-      console.log("comments", data)
       setComments((prev) => ({ ...prev, [postId]: data.comments }))
     } catch (error) {
       console.error("댓글 가져오기 오류:", error)
@@ -319,17 +237,8 @@ const PostsManager = () => {
   }
 
   useEffect(() => {
-    fetchTags()
-  }, [])
-
-  useEffect(() => {
-    if (selectedTag) {
-      fetchPostsByTag(selectedTag)
-    } else {
-      fetchPosts()
-    }
     updateURL()
-  }, [skip, limit, sortBy, sortOrder, selectedTag])
+  }, [skip, limit, sortBy, sortOrder, selectedTag, searchQuery])
 
   useEffect(() => {
     const params = new URLSearchParams(location.search)
@@ -341,101 +250,6 @@ const PostsManager = () => {
     setSelectedTag(params.get("tag") || "")
   }, [location.search])
 
-  // 하이라이트 함수 추가
-  const highlightText = (text: string, 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>
-      <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, searchQuery)}</div>
-
-                <div className="flex flex-wrap gap-1">
-                  {post.tags?.map((tag) => (
-                    <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"
-                      }`}
-                      onClick={() => {
-                        setSelectedTag(tag)
-                        updateURL()
-                      }}
-                    >
-                      {tag}
-                    </span>
-                  ))}
-                </div>
-              </div>
-            </TableCell>
-            <TableCell>
-              <div className="flex items-center space-x-2 cursor-pointer" onClick={() => 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>
-            </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 variant="ghost" size="sm" onClick={() => openPostDetail(post)}>
-                  <MessageSquare className="w-4 h-4" />
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => {
-                    setSelectedPost(post)
-                    setShowEditDialog(true)
-                  }}
-                >
-                  <Edit2 className="w-4 h-4" />
-                </Button>
-                <Button variant="ghost" size="sm" onClick={() => deletePost(post.id)}>
-                  <Trash2 className="w-4 h-4" />
-                </Button>
-              </div>
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  )
-
   // 댓글 렌더링
   const renderComments = (postId) => (
     <div className="mt-2">
@@ -457,7 +271,7 @@ const PostsManager = () => {
           <div key={comment.id} className="flex items-center justify-between text-sm border-b pb-1">
             <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">{comment.body}</span>
             </div>
             <div className="flex items-center space-x-1">
               <Button variant="ghost" size="sm" onClick={() => likeComment(comment.id, postId)}>
@@ -505,9 +319,9 @@ const PostsManager = () => {
                 <Input
                   placeholder="게시물 검색..."
                   className="pl-8"
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  onKeyPress={(e) => e.key === "Enter" && searchPosts()}
+                  value={searchInputValue}
+                  onChange={(e) => setSearchInputValue(e.target.value)}
+                  onKeyDown={(e) => e.key === "Enter" && searchPosts()}
                 />
               </div>
             </div>
@@ -515,8 +329,8 @@ const PostsManager = () => {
               value={selectedTag}
               onValueChange={(value) => {
                 setSelectedTag(value)
-                fetchPostsByTag(value)
-                updateURL()
+                setSearchQuery("")
+                setSkip(0) // 태그 변경 시 첫 페이지로 이동
               }}
             >
               <SelectTrigger className="w-[180px]">
@@ -524,14 +338,20 @@ const PostsManager = () => {
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="all">모든 태그</SelectItem>
-                {tags.map((tag) => (
+                {tags.data?.map((tag) => (
                   <SelectItem key={tag.url} value={tag.slug}>
                     {tag.slug}
                   </SelectItem>
                 ))}
               </SelectContent>
             </Select>
-            <Select value={sortBy} onValueChange={setSortBy}>
+            <Select
+              value={sortBy}
+              onValueChange={(value) => {
+                setSortBy(value)
+                setSkip(0) // 정렬 변경 시 첫 페이지로 이동
+              }}
+            >
               <SelectTrigger className="w-[180px]">
                 <SelectValue placeholder="정렬 기준" />
               </SelectTrigger>
@@ -542,7 +362,13 @@ const PostsManager = () => {
                 <SelectItem value="reactions">반응</SelectItem>
               </SelectContent>
             </Select>
-            <Select value={sortOrder} onValueChange={setSortOrder}>
+            <Select
+              value={sortOrder}
+              onValueChange={(value) => {
+                setSortOrder(value)
+                setSkip(0) // 정렬 순서 변경 시 첫 페이지로 이동
+              }}
+            >
               <SelectTrigger className="w-[180px]">
                 <SelectValue placeholder="정렬 순서" />
               </SelectTrigger>
@@ -554,7 +380,22 @@ const PostsManager = () => {
           </div>
 
           {/* 게시물 테이블 */}
-          {loading ? <div className="flex justify-center p-4">로딩 중...</div> : renderPostTable()}
+          {loading ? (
+            <div className="flex justify-center p-4">로딩 중...</div>
+          ) : (
+            <PostTable
+              posts={posts}
+              searchQuery={searchQuery}
+              selectedTag={selectedTag}
+              setSelectedTag={setSelectedTag}
+              updateURL={updateURL}
+              openUserModal={openUserModal}
+              openPostDetail={openPostDetail}
+              setSelectedPost={setSelectedPost}
+              setShowEditDialog={setShowEditDialog}
+              deletePost={deletePost}
+            />
+          )}
 
           {/* 페이지네이션 */}
           <div className="flex justify-between items-center">
@@ -674,10 +515,10 @@ const PostsManager = () => {
       <Dialog open={showPostDetailDialog} onOpenChange={setShowPostDetailDialog}>
         <DialogContent className="max-w-3xl">
           <DialogHeader>
-            <DialogTitle>{highlightText(selectedPost?.title, searchQuery)}</DialogTitle>
+            <DialogTitle>{selectedPost?.title}</DialogTitle>
           </DialogHeader>
           <div className="space-y-4">
-            <p>{highlightText(selectedPost?.body, searchQuery)}</p>
+            <p>{selectedPost?.body}</p>
             {renderComments(selectedPost?.id)}
           </div>
         </DialogContent>

From cc1d8ca93aafc94a0529ab0b00611621c3ace1cc Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Thu, 14 Aug 2025 22:53:47 +0900
Subject: [PATCH 18/34] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=ED=95=84?=
 =?UTF-8?q?=ED=84=B0=20UI=20widget=EC=9C=BC=EB=A1=9C=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        | 94 +++++++--------------------
 src/widget/post-filter/PostFilter.tsx | 80 +++++++++++++++++++++++
 2 files changed, 103 insertions(+), 71 deletions(-)
 create mode 100644 src/widget/post-filter/PostFilter.tsx

diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 935d6b002..ac8110730 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react"
-import { Edit2, Plus, Search, ThumbsUp, Trash2 } from "lucide-react"
+import { Edit2, Plus, ThumbsUp, Trash2 } from "lucide-react"
 import { useLocation, useNavigate } from "react-router-dom"
 
 import {
@@ -22,7 +22,7 @@ import {
 } from "../shared/ui"
 import { useGetPosts } from "../features/post/get-posts/hooks"
 import { PostTable } from "../widget/post-table/PostTable"
-import { useGetTags } from "../entities/post/model/hooks"
+import { PostFilter } from "../widget/post-filter/PostFilter"
 
 const PostsManager = () => {
   const navigate = useNavigate()
@@ -75,9 +75,6 @@ const PostsManager = () => {
     setSkip(0)
   }
 
-  // 태그 가져오기
-  const tags = useGetTags()
-
   // 게시물 추가
   const addPost = async () => {
     try {
@@ -312,72 +309,27 @@ const PostsManager = () => {
       <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
-                  placeholder="게시물 검색..."
-                  className="pl-8"
-                  value={searchInputValue}
-                  onChange={(e) => setSearchInputValue(e.target.value)}
-                  onKeyDown={(e) => e.key === "Enter" && searchPosts()}
-                />
-              </div>
-            </div>
-            <Select
-              value={selectedTag}
-              onValueChange={(value) => {
-                setSelectedTag(value)
-                setSearchQuery("")
-                setSkip(0) // 태그 변경 시 첫 페이지로 이동
-              }}
-            >
-              <SelectTrigger className="w-[180px]">
-                <SelectValue placeholder="태그 선택" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">모든 태그</SelectItem>
-                {tags.data?.map((tag) => (
-                  <SelectItem key={tag.url} value={tag.slug}>
-                    {tag.slug}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <Select
-              value={sortBy}
-              onValueChange={(value) => {
-                setSortBy(value)
-                setSkip(0) // 정렬 변경 시 첫 페이지로 이동
-              }}
-            >
-              <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
-              value={sortOrder}
-              onValueChange={(value) => {
-                setSortOrder(value)
-                setSkip(0) // 정렬 순서 변경 시 첫 페이지로 이동
-              }}
-            >
-              <SelectTrigger className="w-[180px]">
-                <SelectValue placeholder="정렬 순서" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="asc">오름차순</SelectItem>
-                <SelectItem value="desc">내림차순</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
+          <PostFilter
+            searchInputValue={searchInputValue}
+            selectedTag={selectedTag}
+            sortBy={sortBy}
+            sortOrder={sortOrder}
+            onSearchInputChange={setSearchInputValue}
+            onSelectedTagChange={(value) => {
+              setSelectedTag(value)
+              setSearchQuery("")
+              setSkip(0) // 태그 변경 시 첫 페이지로 이동
+            }}
+            onSortByChange={(value) => {
+              setSortBy(value)
+              setSkip(0) // 정렬 변경 시 첫 페이지로 이동
+            }}
+            onSortOrderChange={(value) => {
+              setSortOrder(value)
+              setSkip(0) // 정렬 순서 변경 시 첫 페이지로 이동
+            }}
+            onSearch={searchPosts}
+          />
 
           {/* 게시물 테이블 */}
           {loading ? (
diff --git a/src/widget/post-filter/PostFilter.tsx b/src/widget/post-filter/PostFilter.tsx
new file mode 100644
index 000000000..8af54446a
--- /dev/null
+++ b/src/widget/post-filter/PostFilter.tsx
@@ -0,0 +1,80 @@
+import { Search } from "lucide-react"
+import { Input } from "../../shared/ui/Input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../shared/ui/Select"
+import { useGetTags } from "../../entities/post/model/hooks"
+
+interface PostFilterProps {
+  searchInputValue: string
+  selectedTag: string
+  sortBy: string
+  sortOrder: string
+  onSearchInputChange: (value: string) => void
+  onSelectedTagChange: (value: string) => void
+  onSortByChange: (value: string) => void
+  onSortOrderChange: (value: string) => void
+  onSearch: () => void
+}
+
+export const PostFilter = ({
+  searchInputValue,
+  selectedTag,
+  sortBy,
+  sortOrder,
+  onSearchInputChange,
+  onSelectedTagChange,
+  onSortByChange,
+  onSortOrderChange,
+  onSearch,
+}: PostFilterProps) => {
+  const tags = useGetTags()
+
+  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
+            placeholder="게시물 검색..."
+            className="pl-8"
+            value={searchInputValue}
+            onChange={(e) => onSearchInputChange(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && onSearch()}
+          />
+        </div>
+      </div>
+      <Select value={selectedTag} onValueChange={onSelectedTagChange}>
+        <SelectTrigger className="w-[180px]">
+          <SelectValue placeholder="태그 선택" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">모든 태그</SelectItem>
+          {tags.data?.map((tag) => (
+            <SelectItem key={tag.url} value={tag.slug}>
+              {tag.slug}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <Select value={sortBy} onValueChange={onSortByChange}>
+        <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 value={sortOrder} onValueChange={onSortOrderChange}>
+        <SelectTrigger className="w-[180px]">
+          <SelectValue placeholder="정렬 순서" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="asc">오름차순</SelectItem>
+          <SelectItem value="desc">내림차순</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}

From 9ac88c7b0f3ceddd5f4fc3ffde7201ef298f61e8 Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Thu, 14 Aug 2025 23:57:32 +0900
Subject: [PATCH 19/34] =?UTF-8?q?chore:=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 091b3ac5d..f42cb9603 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
   "dependencies": {
     "@tanstack/react-query": "^5.85.0",
     "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 70c32a693..1374df5d0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,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
@@ -2352,6 +2355,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': {}
@@ -4481,3 +4502,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 28eb94985e7260a59a900b844a97e18015660974 Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Fri, 15 Aug 2025 00:06:36 +0900
Subject: [PATCH 20/34] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8B=9C=EB=AC=BC=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=EC=83=81=ED=83=9C=EB=A5=BC=20Zustand=20st?=
 =?UTF-8?q?ore=EB=A1=9C=20=ED=86=B5=ED=95=A9=ED=95=98=EA=B3=A0=20useAddPos?=
 =?UTF-8?q?t=20=ED=9B=85=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/post/model/types.ts     |   1 -
 src/features/post/add-posts/hooks.ts |  66 ++++++++++
 src/pages/PostsManagerPage.tsx       | 183 +++++++++++++++++++--------
 src/shared/stores/dialogStore.ts     |  62 +++++++++
 4 files changed, 255 insertions(+), 57 deletions(-)
 create mode 100644 src/features/post/add-posts/hooks.ts
 create mode 100644 src/shared/stores/dialogStore.ts

diff --git a/src/entities/post/model/types.ts b/src/entities/post/model/types.ts
index 20cd06649..9f5584ec2 100644
--- a/src/entities/post/model/types.ts
+++ b/src/entities/post/model/types.ts
@@ -19,7 +19,6 @@ export interface PostItem {
   tags: string[]
 }
 export interface CreatePost {
-  id: number
   title: string
   body: string
   userId: number
diff --git a/src/features/post/add-posts/hooks.ts b/src/features/post/add-posts/hooks.ts
new file mode 100644
index 000000000..85860790c
--- /dev/null
+++ b/src/features/post/add-posts/hooks.ts
@@ -0,0 +1,66 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { CreatePost, PostItem, Post } from "../../../entities/post/model/types"
+import PostAPI from "../../../entities/post/api/PostAPI"
+import { useState } from "react"
+
+const initialPost: CreatePost = {
+  title: "",
+  body: "",
+  userId: 1,
+}
+
+export const useAddPost = (onSuccess?: () => void) => {
+  const queryClient = useQueryClient()
+  const [newPost, setNewPost] = useState<CreatePost>(initialPost)
+
+  const mutation = useMutation({
+    mutationFn: (post: CreatePost) => PostAPI.createPost(post),
+    onSuccess: (createdPost: PostItem) => {
+      // 모든 posts 관련 쿼리를 찾아서 직접 업데이트
+      const queries = queryClient.getQueriesData({ queryKey: ["posts"] })
+
+      queries.forEach(([queryKey, data]) => {
+        if (data && typeof data === "object" && "posts" in data) {
+          const currentData = data as Post
+          const updatedData: Post = {
+            ...currentData,
+            posts: [createdPost, ...currentData.posts],
+            total: currentData.total + 1,
+          }
+          queryClient.setQueryData(queryKey, updatedData)
+        }
+      })
+
+      // 성공 콜백 실행
+      onSuccess?.()
+      setNewPost(initialPost)
+    },
+    onError: (error) => {
+      console.error("게시물 추가 오류:", error)
+    },
+  })
+
+  const setTitle = (title: string) => setNewPost((prev) => ({ ...prev, title }))
+  const setBody = (body: string) => setNewPost((prev) => ({ ...prev, body }))
+  const setUserId = (userId: number) => setNewPost((prev) => ({ ...prev, userId }))
+
+  const addPost = () => {
+    if (newPost.title.trim() && newPost.body.trim()) {
+      mutation.mutate(newPost)
+    }
+  }
+
+  const resetForm = () => setNewPost(initialPost)
+
+  return {
+    newPost,
+    setTitle,
+    setBody,
+    setUserId,
+    addPost,
+    resetForm,
+    isLoading: mutation.isPending,
+    isError: mutation.isError,
+    error: mutation.error,
+  }
+}
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index ac8110730..37bcf3db6 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react"
 import { Edit2, Plus, ThumbsUp, Trash2 } from "lucide-react"
 import { useLocation, useNavigate } from "react-router-dom"
+import { useQueryClient } from "@tanstack/react-query"
 
 import {
   Button,
@@ -21,6 +22,8 @@ import {
   Textarea,
 } from "../shared/ui"
 import { useGetPosts } from "../features/post/get-posts/hooks"
+import { useAddPost } from "../features/post/add-posts/hooks"
+import { useDialogStore } from "../shared/stores/dialogStore"
 import { PostTable } from "../widget/post-table/PostTable"
 import { PostFilter } from "../widget/post-filter/PostFilter"
 
@@ -29,6 +32,28 @@ const PostsManager = () => {
   const location = useLocation()
   const queryParams = new URLSearchParams(location.search)
 
+  // Zustand store 사용
+  const {
+    showAddDialog,
+    showEditDialog,
+    showAddCommentDialog,
+    showEditCommentDialog,
+    showPostDetailDialog,
+    showUserModal,
+    openAddDialog,
+    closeAddDialog,
+    openEditDialog,
+    closeEditDialog,
+    openAddCommentDialog,
+    closeAddCommentDialog,
+    openEditCommentDialog,
+    closeEditCommentDialog,
+    openPostDetailDialog,
+    closePostDetailDialog,
+    openUserModal,
+    closeUserModal,
+  } = useDialogStore()
+
   // 상태 관리
   const [skip, setSkip] = useState(parseInt(queryParams.get("skip") || "0"))
   const [limit, setLimit] = useState(parseInt(queryParams.get("limit") || "10"))
@@ -37,17 +62,10 @@ const PostsManager = () => {
   const [selectedPost, setSelectedPost] = useState(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 [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 [showAddCommentDialog, setShowAddCommentDialog] = useState(false)
-  const [showEditCommentDialog, setShowEditCommentDialog] = useState(false)
-  const [showPostDetailDialog, setShowPostDetailDialog] = useState(false)
-  const [showUserModal, setShowUserModal] = useState(false)
   const [selectedUser, setSelectedUser] = useState(null)
 
   // URL 업데이트 함수
@@ -62,8 +80,24 @@ const PostsManager = () => {
     navigate(`?${params.toString()}`)
   }
 
+  const queryClient = useQueryClient()
   const { posts, total, loading } = useGetPosts(limit, skip, sortBy, sortOrder, selectedTag, searchQuery)
 
+  // 게시물 추가 custom hook 사용
+  const {
+    newPost,
+    setTitle,
+    setBody,
+    setUserId,
+    addPost,
+    resetForm,
+    isLoading: isAddingPost,
+    isError: isAddError,
+    error: addError,
+  } = useAddPost(() => {
+    closeAddDialog()
+  })
+
   // 게시물 검색
   const searchPosts = async () => {
     if (!searchInputValue) {
@@ -75,24 +109,6 @@ const PostsManager = () => {
     setSkip(0)
   }
 
-  // 게시물 추가
-  const addPost = async () => {
-    try {
-      // createPost
-      const response = await fetch("/api/posts/add", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(newPost),
-      })
-      const data = await response.json()
-      setPosts([data, ...posts])
-      setShowAddDialog(false)
-      setNewPost({ title: "", body: "", userId: 1 })
-    } catch (error) {
-      console.error("게시물 추가 오류:", error)
-    }
-  }
-
   // 게시물 업데이트
   const updatePost = async () => {
     try {
@@ -103,8 +119,9 @@ const PostsManager = () => {
         body: JSON.stringify(selectedPost),
       })
       const data = await response.json()
-      setPosts(posts.map((post) => (post.id === data.id ? data : post)))
-      setShowEditDialog(false)
+      // 게시물 업데이트 후 쿼리 무효화
+      queryClient.invalidateQueries({ queryKey: ["posts"] })
+      closeEditDialog()
     } catch (error) {
       console.error("게시물 업데이트 오류:", error)
     }
@@ -150,7 +167,7 @@ const PostsManager = () => {
         ...prev,
         [data.postId]: [...(prev[data.postId] || []), data],
       }))
-      setShowAddCommentDialog(false)
+      closeAddCommentDialog()
       setNewComment({ body: "", postId: null, userId: 1 })
     } catch (error) {
       console.error("댓글 추가 오류:", error)
@@ -170,7 +187,7 @@ const PostsManager = () => {
         ...prev,
         [data.postId]: prev[data.postId].map((comment) => (comment.id === data.id ? data : comment)),
       }))
-      setShowEditCommentDialog(false)
+      closeEditCommentDialog()
     } catch (error) {
       console.error("댓글 업데이트 오류:", error)
     }
@@ -217,17 +234,17 @@ const PostsManager = () => {
   const openPostDetail = (post) => {
     setSelectedPost(post)
     fetchComments(post.id)
-    setShowPostDetailDialog(true)
+    openPostDetailDialog()
   }
 
   // 사용자 모달 열기
-  const openUserModal = async (user) => {
+  const handleOpenUserModal = async (user) => {
     try {
       // getUserInfo
       const response = await fetch(`/api/users/${user.id}`)
       const userData = await response.json()
       setSelectedUser(userData)
-      setShowUserModal(true)
+      openUserModal()
     } catch (error) {
       console.error("사용자 정보 가져오기 오류:", error)
     }
@@ -256,7 +273,7 @@ const PostsManager = () => {
           size="sm"
           onClick={() => {
             setNewComment((prev) => ({ ...prev, postId }))
-            setShowAddCommentDialog(true)
+            openAddCommentDialog()
           }}
         >
           <Plus className="w-3 h-3 mr-1" />
@@ -280,7 +297,7 @@ const PostsManager = () => {
                 size="sm"
                 onClick={() => {
                   setSelectedComment(comment)
-                  setShowEditCommentDialog(true)
+                  openEditCommentDialog()
                 }}
               >
                 <Edit2 className="w-3 h-3" />
@@ -300,7 +317,7 @@ const PostsManager = () => {
       <CardHeader>
         <CardTitle className="flex items-center justify-between">
           <span>게시물 관리자</span>
-          <Button onClick={() => setShowAddDialog(true)}>
+          <Button onClick={openAddDialog}>
             <Plus className="w-4 h-4 mr-2" />
             게시물 추가
           </Button>
@@ -341,10 +358,13 @@ const PostsManager = () => {
               selectedTag={selectedTag}
               setSelectedTag={setSelectedTag}
               updateURL={updateURL}
-              openUserModal={openUserModal}
+              openUserModal={handleOpenUserModal}
               openPostDetail={openPostDetail}
               setSelectedPost={setSelectedPost}
-              setShowEditDialog={setShowEditDialog}
+              setShowEditDialog={(post) => {
+                setSelectedPost(post)
+                openEditDialog()
+              }}
               deletePost={deletePost}
             />
           )}
@@ -378,36 +398,51 @@ const PostsManager = () => {
       </CardContent>
 
       {/* 게시물 추가 대화상자 */}
-      <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
+      <Dialog
+        open={showAddDialog}
+        onOpenChange={(open) => {
+          if (open) {
+            openAddDialog()
+          } else {
+            closeAddDialog()
+            resetForm()
+          }
+        }}
+      >
         <DialogContent>
           <DialogHeader>
             <DialogTitle>새 게시물 추가</DialogTitle>
           </DialogHeader>
           <div className="space-y-4">
-            <Input
-              placeholder="제목"
-              value={newPost.title}
-              onChange={(e) => setNewPost({ ...newPost, title: e.target.value })}
-            />
-            <Textarea
-              rows={30}
-              placeholder="내용"
-              value={newPost.body}
-              onChange={(e) => setNewPost({ ...newPost, body: e.target.value })}
-            />
+            <Input placeholder="제목" value={newPost.title} onChange={(e) => setTitle(e.target.value)} />
+            <Textarea rows={30} placeholder="내용" value={newPost.body} onChange={(e) => setBody(e.target.value)} />
             <Input
               type="number"
               placeholder="사용자 ID"
               value={newPost.userId}
-              onChange={(e) => setNewPost({ ...newPost, userId: Number(e.target.value) })}
+              onChange={(e) => setUserId(Number(e.target.value))}
             />
-            <Button onClick={addPost}>게시물 추가</Button>
+            <Button onClick={addPost} disabled={isAddingPost}>
+              {isAddingPost ? "추가 중..." : "게시물 추가"}
+            </Button>
+            {isAddError && (
+              <p className="text-red-500 text-sm">게시물 추가 중 오류가 발생했습니다: {addError?.message}</p>
+            )}
           </div>
         </DialogContent>
       </Dialog>
 
       {/* 게시물 수정 대화상자 */}
-      <Dialog open={showEditDialog} onOpenChange={setShowEditDialog}>
+      <Dialog
+        open={showEditDialog}
+        onOpenChange={(open) => {
+          if (open) {
+            openEditDialog()
+          } else {
+            closeEditDialog()
+          }
+        }}
+      >
         <DialogContent>
           <DialogHeader>
             <DialogTitle>게시물 수정</DialogTitle>
@@ -430,7 +465,16 @@ const PostsManager = () => {
       </Dialog>
 
       {/* 댓글 추가 대화상자 */}
-      <Dialog open={showAddCommentDialog} onOpenChange={setShowAddCommentDialog}>
+      <Dialog
+        open={showAddCommentDialog}
+        onOpenChange={(open) => {
+          if (open) {
+            openAddCommentDialog()
+          } else {
+            closeAddCommentDialog()
+          }
+        }}
+      >
         <DialogContent>
           <DialogHeader>
             <DialogTitle>새 댓글 추가</DialogTitle>
@@ -447,7 +491,16 @@ const PostsManager = () => {
       </Dialog>
 
       {/* 댓글 수정 대화상자 */}
-      <Dialog open={showEditCommentDialog} onOpenChange={setShowEditCommentDialog}>
+      <Dialog
+        open={showEditCommentDialog}
+        onOpenChange={(open) => {
+          if (open) {
+            openEditCommentDialog()
+          } else {
+            closeEditCommentDialog()
+          }
+        }}
+      >
         <DialogContent>
           <DialogHeader>
             <DialogTitle>댓글 수정</DialogTitle>
@@ -464,7 +517,16 @@ const PostsManager = () => {
       </Dialog>
 
       {/* 게시물 상세 보기 대화상자 */}
-      <Dialog open={showPostDetailDialog} onOpenChange={setShowPostDetailDialog}>
+      <Dialog
+        open={showPostDetailDialog}
+        onOpenChange={(open) => {
+          if (open) {
+            openPostDetailDialog()
+          } else {
+            closePostDetailDialog()
+          }
+        }}
+      >
         <DialogContent className="max-w-3xl">
           <DialogHeader>
             <DialogTitle>{selectedPost?.title}</DialogTitle>
@@ -477,7 +539,16 @@ const PostsManager = () => {
       </Dialog>
 
       {/* 사용자 모달 */}
-      <Dialog open={showUserModal} onOpenChange={setShowUserModal}>
+      <Dialog
+        open={showUserModal}
+        onOpenChange={(open) => {
+          if (open) {
+            openUserModal()
+          } else {
+            closeUserModal()
+          }
+        }}
+      >
         <DialogContent>
           <DialogHeader>
             <DialogTitle>사용자 정보</DialogTitle>
diff --git a/src/shared/stores/dialogStore.ts b/src/shared/stores/dialogStore.ts
new file mode 100644
index 000000000..d79e2639e
--- /dev/null
+++ b/src/shared/stores/dialogStore.ts
@@ -0,0 +1,62 @@
+import { create } from "zustand"
+
+interface DialogState {
+  showAddDialog: boolean
+  showEditDialog: boolean
+  showAddCommentDialog: boolean
+  showEditCommentDialog: boolean
+  showPostDetailDialog: boolean
+  showUserModal: boolean
+
+  // 다이얼로그 열기
+  openAddDialog: () => void
+  openEditDialog: () => void
+  openAddCommentDialog: () => void
+  openEditCommentDialog: () => void
+  openPostDetailDialog: () => void
+  openUserModal: () => void
+
+  // 다이얼로그 닫기
+  closeAddDialog: () => void
+  closeEditDialog: () => void
+  closeAddCommentDialog: () => void
+  closeEditCommentDialog: () => void
+  closePostDetailDialog: () => void
+  closeUserModal: () => void
+
+  // 모든 다이얼로그 닫기
+  closeAllDialogs: () => void
+}
+
+export const useDialogStore = create<DialogState>((set) => ({
+  showAddDialog: false,
+  showEditDialog: false,
+  showAddCommentDialog: false,
+  showEditCommentDialog: false,
+  showPostDetailDialog: false,
+  showUserModal: false,
+
+  openAddDialog: () => set({ showAddDialog: true }),
+  openEditDialog: () => set({ showEditDialog: true }),
+  openAddCommentDialog: () => set({ showAddCommentDialog: true }),
+  openEditCommentDialog: () => set({ showEditCommentDialog: true }),
+  openPostDetailDialog: () => set({ showPostDetailDialog: true }),
+  openUserModal: () => set({ showUserModal: true }),
+
+  closeAddDialog: () => set({ showAddDialog: false }),
+  closeEditDialog: () => set({ showEditDialog: false }),
+  closeAddCommentDialog: () => set({ showAddCommentDialog: false }),
+  closeEditCommentDialog: () => set({ showEditCommentDialog: false }),
+  closePostDetailDialog: () => set({ showPostDetailDialog: false }),
+  closeUserModal: () => set({ showUserModal: false }),
+
+  closeAllDialogs: () =>
+    set({
+      showAddDialog: false,
+      showEditDialog: false,
+      showAddCommentDialog: false,
+      showEditCommentDialog: false,
+      showPostDetailDialog: false,
+      showUserModal: false,
+    }),
+}))

From d50dfe7b278e503bb0b631c12e8981b0f5795b56 Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Fri, 15 Aug 2025 01:14:23 +0900
Subject: [PATCH 21/34] =?UTF-8?q?chore:=20comment=20hook=20=ED=8F=B4?=
 =?UTF-8?q?=EB=8D=94=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80=EA=B2=BD(entities=20?=
 =?UTF-8?q?model=EC=97=90=20=EC=9C=84=EC=B9=98)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/comment/{ => model}/hooks.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)
 rename src/entities/comment/{ => model}/hooks.ts (86%)

diff --git a/src/entities/comment/hooks.ts b/src/entities/comment/model/hooks.ts
similarity index 86%
rename from src/entities/comment/hooks.ts
rename to src/entities/comment/model/hooks.ts
index 4ac81f0a6..aae1a29f8 100644
--- a/src/entities/comment/hooks.ts
+++ b/src/entities/comment/model/hooks.ts
@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from "@tanstack/react-query"
-import CommentAPI from "./api/CommentAPI"
-import { CreateComment } from "./model/types"
+import CommentAPI from "../api/CommentAPI"
+import { CreateComment } from "./types"
 
 export const useGetComments = (postId: number) => {
   return useQuery({

From 722ea2d9b6db096df2155d9db7cfd4571601d652 Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Fri, 15 Aug 2025 01:15:31 +0900
Subject: [PATCH 22/34] =?UTF-8?q?feat:=20=EC=83=88=20=EA=B2=8C=EC=8B=9C?=
 =?UTF-8?q?=EB=AC=BC=20=EC=B6=94=EA=B0=80=20Dialog=20features=EC=97=90=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/post/add-posts/AddPostForm.tsx | 56 +++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 src/features/post/add-posts/AddPostForm.tsx

diff --git a/src/features/post/add-posts/AddPostForm.tsx b/src/features/post/add-posts/AddPostForm.tsx
new file mode 100644
index 000000000..ee43c961a
--- /dev/null
+++ b/src/features/post/add-posts/AddPostForm.tsx
@@ -0,0 +1,56 @@
+import { useDialogStore } from "../../../shared/stores/dialogStore"
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Input, Textarea } from "../../../shared/ui"
+import { useAddPost } from "./hooks"
+
+export const AddPostForm = () => {
+  const { openAddDialog, closeAddDialog } = useDialogStore()
+  const {
+    newPost,
+    setTitle,
+    setBody,
+    setUserId,
+    addPost,
+    resetForm,
+    isLoading: isAddingPost,
+    isError: isAddError,
+    error: addError,
+  } = useAddPost(() => {
+    closeAddDialog()
+  })
+  const { showAddDialog } = useDialogStore()
+  return (
+    <Dialog
+      open={showAddDialog}
+      onOpenChange={(open) => {
+        if (open) {
+          openAddDialog()
+        } else {
+          closeAddDialog()
+          resetForm()
+        }
+      }}
+    >
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>새 게시물 추가</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <Input placeholder="제목" value={newPost.title} onChange={(e) => setTitle(e.target.value)} />
+          <Textarea rows={30} placeholder="내용" value={newPost.body} onChange={(e) => setBody(e.target.value)} />
+          <Input
+            type="number"
+            placeholder="사용자 ID"
+            value={newPost.userId}
+            onChange={(e) => setUserId(Number(e.target.value))}
+          />
+          <Button onClick={addPost} disabled={isAddingPost}>
+            {isAddingPost ? "추가 중..." : "게시물 추가"}
+          </Button>
+          {isAddError && (
+            <p className="text-red-500 text-sm">게시물 추가 중 오류가 발생했습니다: {addError?.message}</p>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

From 48593dcffdaaa7916980fe4adc94da473a4abec8 Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Fri, 15 Aug 2025 01:50:55 +0900
Subject: [PATCH 23/34] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?=
 =?UTF-8?q?=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8=20features=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/entities/post/model/hooks.ts              |  14 ++-
 src/entities/post/model/types.ts              |   1 -
 .../post/update-posts/UpdatePostForm.tsx      | 100 ++++++++++++++++++
 src/features/post/update-posts/hooks.ts       |  40 +++++++
 src/pages/PostsManagerPage.tsx                |  92 ++++------------
 src/widget/post-table/PostTable.tsx           |  20 ++--
 6 files changed, 185 insertions(+), 82 deletions(-)
 create mode 100644 src/features/post/update-posts/UpdatePostForm.tsx
 create mode 100644 src/features/post/update-posts/hooks.ts

diff --git a/src/entities/post/model/hooks.ts b/src/entities/post/model/hooks.ts
index 7981f8657..229cec311 100644
--- a/src/entities/post/model/hooks.ts
+++ b/src/entities/post/model/hooks.ts
@@ -1,4 +1,4 @@
-import { useMutation, useQuery } from "@tanstack/react-query"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import PostAPI from "../api/PostAPI"
 import { CreatePost, UpdatePost } from "./types"
 
@@ -46,8 +46,14 @@ export const usePosts = (
  * @returns 추가된 게시글 정보
  */
 export const useCreatePost = () => {
+  const queryClient = useQueryClient()
+
   return useMutation({
     mutationFn: (post: CreatePost) => PostAPI.createPost(post),
+    onSuccess: () => {
+      // 게시글 추가 성공 후 모든 posts 관련 쿼리 캐시 무효화
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.POSTS] })
+    },
   })
 }
 
@@ -68,8 +74,14 @@ export const useUpdatePost = (id: number) => {
  * @returns 삭제된 게시글 정보
  */
 export const useDeletePost = () => {
+  const queryClient = useQueryClient()
+
   return useMutation({
     mutationFn: (id: number) => PostAPI.deletePost(id),
+    onSuccess: () => {
+      // 게시글 삭제 성공 후 모든 posts 관련 쿼리 캐시 무효화
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.POSTS] })
+    },
   })
 }
 
diff --git a/src/entities/post/model/types.ts b/src/entities/post/model/types.ts
index 9f5584ec2..6fcaf61b9 100644
--- a/src/entities/post/model/types.ts
+++ b/src/entities/post/model/types.ts
@@ -26,7 +26,6 @@ export interface CreatePost {
 
 export interface UpdatePost {
   body: string
-  id: number
   reactions: {
     dislikes: number
     likes: number
diff --git a/src/features/post/update-posts/UpdatePostForm.tsx b/src/features/post/update-posts/UpdatePostForm.tsx
new file mode 100644
index 000000000..8db95e15a
--- /dev/null
+++ b/src/features/post/update-posts/UpdatePostForm.tsx
@@ -0,0 +1,100 @@
+import { useState, useEffect } from "react"
+import { useQueryClient } from "@tanstack/react-query"
+import { Button, Input, Textarea } from "../../../shared/ui"
+import { useUpdatePost } from "../../../entities/post/model/hooks"
+import { PostItem } from "../../../entities/post/model/types"
+import { useDialogStore } from "../../../shared/stores/dialogStore"
+
+interface UpdatePostFormProps {
+  selectedPost: PostItem
+}
+
+export const UpdatePostForm = ({ selectedPost }: UpdatePostFormProps) => {
+  const { closeEditDialog } = useDialogStore()
+  const queryClient = useQueryClient()
+
+  const [formData, setFormData] = useState({
+    title: "",
+    body: "",
+    userId: 1,
+  })
+
+  const updatePostMutation = useUpdatePost(selectedPost.id)
+
+  // selectedPost가 변경될 때마다 formData 업데이트
+  useEffect(() => {
+    if (selectedPost && selectedPost.title && selectedPost.body) {
+      setFormData({
+        title: selectedPost.title,
+        body: selectedPost.body,
+        userId: selectedPost.userId,
+      })
+    }
+  }, [selectedPost])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    try {
+      await updatePostMutation.mutateAsync({
+        title: formData.title,
+        body: formData.body,
+        userId: formData.userId,
+        reactions: selectedPost.reactions,
+        tags: selectedPost.tags || [],
+      })
+
+      // 캐시를 직접 업데이트하여 UI 즉시 반영
+      queryClient.setQueriesData({ queryKey: ["posts"] }, (oldData: any) => {
+        if (!oldData?.posts) return oldData
+
+        return {
+          ...oldData,
+          posts: oldData.posts.map((p: any) =>
+            p.id === selectedPost.id
+              ? {
+                  ...p,
+                  title: formData.title,
+                  body: formData.body,
+                  userId: formData.userId,
+                }
+              : p,
+          ),
+        }
+      })
+
+      closeEditDialog()
+    } catch (error) {
+      console.error("게시물 업데이트 실패:", error)
+    }
+  }
+
+  const handleInputChange = (field: keyof typeof formData, value: string | number) => {
+    setFormData((prev) => ({ ...prev, [field]: value }))
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <Input placeholder="제목" value={formData.title} onChange={(e) => handleInputChange("title", e.target.value)} />
+      <Textarea
+        rows={15}
+        placeholder="내용"
+        value={formData.body}
+        onChange={(e) => handleInputChange("body", e.target.value)}
+      />
+      <Input
+        type="number"
+        placeholder="사용자 ID"
+        value={formData.userId}
+        onChange={(e) => handleInputChange("userId", Number(e.target.value))}
+      />
+      <Button type="submit" disabled={updatePostMutation.isPending}>
+        {updatePostMutation.isPending ? "업데이트 중..." : "게시물 업데이트"}
+      </Button>
+      {updatePostMutation.isError && (
+        <p className="text-red-500 text-sm">
+          게시물 업데이트 중 오류가 발생했습니다: {updatePostMutation.error?.message}
+        </p>
+      )}
+    </form>
+  )
+}
diff --git a/src/features/post/update-posts/hooks.ts b/src/features/post/update-posts/hooks.ts
new file mode 100644
index 000000000..f9610c984
--- /dev/null
+++ b/src/features/post/update-posts/hooks.ts
@@ -0,0 +1,40 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { PostItem, UpdatePost } from "../../../entities/post/model/types"
+import PostAPI from "../../../entities/post/api/PostAPI"
+import { useState } from "react"
+
+export const useUpdatePost = (post: PostItem, onSuccess?: () => void) => {
+  const queryClient = useQueryClient()
+
+  const initialPost = {
+    id: post.id,
+    title: post.title,
+    body: post.body,
+  }
+
+  const [editPost, setEditPost] = useState<Partial<UpdatePost>>(initialPost)
+
+  const mutation = useMutation({
+    mutationFn: (post: Partial<UpdatePost>) => PostAPI.updatePost(post.id || 0, post),
+
+    onSuccess: (updatedPost) => {
+      queryClient.setQueryData<PostItem[] | undefined>(["posts"], (prev) => {
+        if (!prev) return prev
+        return prev.map((post) => (post.id === updatedPost.id ? updatedPost : post))
+      })
+      onSuccess?.()
+    },
+    onError: (error) => {
+      console.error("게시물 업데이트 오류:", error)
+    },
+  })
+
+  const setTitle = (title: string) => setEditPost((prev) => ({ ...prev, title }))
+  const setBody = (body: string) => setEditPost((prev) => ({ ...prev, body }))
+
+  const updatePost = () => {
+    mutation.mutate(editPost)
+  }
+
+  return { editPost, setTitle, setBody, updatePost }
+}
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 37bcf3db6..8df895211 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react"
 import { Edit2, Plus, ThumbsUp, Trash2 } from "lucide-react"
 import { useLocation, useNavigate } from "react-router-dom"
-import { useQueryClient } from "@tanstack/react-query"
 
 import {
   Button,
@@ -22,10 +21,19 @@ import {
   Textarea,
 } from "../shared/ui"
 import { useGetPosts } from "../features/post/get-posts/hooks"
-import { useAddPost } from "../features/post/add-posts/hooks"
+import { useUpdatePost, useDeletePost } from "../entities/post/model/hooks"
 import { useDialogStore } from "../shared/stores/dialogStore"
 import { PostTable } from "../widget/post-table/PostTable"
 import { PostFilter } from "../widget/post-filter/PostFilter"
+import { AddPostForm } from "../features/post/add-posts/AddPostForm"
+import { UpdatePostForm } from "../features/post/update-posts/UpdatePostForm"
+import { PostItem } from "../entities/post/model/types"
+import { User } from "../entities/user/model/types"
+
+// PostItem에 author 속성이 추가된 타입
+interface PostWithAuthor extends PostItem {
+  author?: User
+}
 
 const PostsManager = () => {
   const navigate = useNavigate()
@@ -59,7 +67,7 @@ const PostsManager = () => {
   const [limit, setLimit] = useState(parseInt(queryParams.get("limit") || "10"))
   const [searchQuery, setSearchQuery] = useState(queryParams.get("search") || "")
   const [searchInputValue, setSearchInputValue] = useState(queryParams.get("search") || "") // 검색 입력값을 별도로 관리
-  const [selectedPost, setSelectedPost] = useState(null)
+  const [selectedPost, setSelectedPost] = useState<PostWithAuthor | null>(null)
   const [sortBy, setSortBy] = useState(queryParams.get("sortBy") || "")
   const [sortOrder, setSortOrder] = useState(queryParams.get("sortOrder") || "asc")
   const [selectedTag, setSelectedTag] = useState(queryParams.get("tag") || "")
@@ -80,24 +88,8 @@ const PostsManager = () => {
     navigate(`?${params.toString()}`)
   }
 
-  const queryClient = useQueryClient()
   const { posts, total, loading } = useGetPosts(limit, skip, sortBy, sortOrder, selectedTag, searchQuery)
 
-  // 게시물 추가 custom hook 사용
-  const {
-    newPost,
-    setTitle,
-    setBody,
-    setUserId,
-    addPost,
-    resetForm,
-    isLoading: isAddingPost,
-    isError: isAddError,
-    error: addError,
-  } = useAddPost(() => {
-    closeAddDialog()
-  })
-
   // 게시물 검색
   const searchPosts = async () => {
     if (!searchInputValue) {
@@ -109,32 +101,13 @@ const PostsManager = () => {
     setSkip(0)
   }
 
-  // 게시물 업데이트
-  const updatePost = async () => {
-    try {
-      // updatePost
-      const response = await fetch(`/api/posts/${selectedPost.id}`, {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(selectedPost),
-      })
-      const data = await response.json()
-      // 게시물 업데이트 후 쿼리 무효화
-      queryClient.invalidateQueries({ queryKey: ["posts"] })
-      closeEditDialog()
-    } catch (error) {
-      console.error("게시물 업데이트 오류:", error)
-    }
-  }
+  // 게시물 삭제 훅 사용
+  const deletePostMutation = useDeletePost()
 
   // 게시물 삭제
   const deletePost = async (id) => {
     try {
-      // deletePost
-      await fetch(`/api/posts/${id}`, {
-        method: "DELETE",
-      })
-      setPosts(posts.filter((post) => post.id !== id))
+      await deletePostMutation.mutateAsync(id)
     } catch (error) {
       console.error("게시물 삭제 오류:", error)
     }
@@ -361,7 +334,7 @@ const PostsManager = () => {
               openUserModal={handleOpenUserModal}
               openPostDetail={openPostDetail}
               setSelectedPost={setSelectedPost}
-              setShowEditDialog={(post) => {
+              setShowEditDialog={(post: PostWithAuthor) => {
                 setSelectedPost(post)
                 openEditDialog()
               }}
@@ -405,30 +378,14 @@ const PostsManager = () => {
             openAddDialog()
           } else {
             closeAddDialog()
-            resetForm()
           }
         }}
       >
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>새 게시물 추가</DialogTitle>
+            <DialogTitle>게시물 추가</DialogTitle>
           </DialogHeader>
-          <div className="space-y-4">
-            <Input placeholder="제목" value={newPost.title} onChange={(e) => setTitle(e.target.value)} />
-            <Textarea rows={30} placeholder="내용" value={newPost.body} onChange={(e) => setBody(e.target.value)} />
-            <Input
-              type="number"
-              placeholder="사용자 ID"
-              value={newPost.userId}
-              onChange={(e) => setUserId(Number(e.target.value))}
-            />
-            <Button onClick={addPost} disabled={isAddingPost}>
-              {isAddingPost ? "추가 중..." : "게시물 추가"}
-            </Button>
-            {isAddError && (
-              <p className="text-red-500 text-sm">게시물 추가 중 오류가 발생했습니다: {addError?.message}</p>
-            )}
-          </div>
+          <AddPostForm />
         </DialogContent>
       </Dialog>
 
@@ -447,20 +404,7 @@ const PostsManager = () => {
           <DialogHeader>
             <DialogTitle>게시물 수정</DialogTitle>
           </DialogHeader>
-          <div className="space-y-4">
-            <Input
-              placeholder="제목"
-              value={selectedPost?.title || ""}
-              onChange={(e) => setSelectedPost({ ...selectedPost, title: e.target.value })}
-            />
-            <Textarea
-              rows={15}
-              placeholder="내용"
-              value={selectedPost?.body || ""}
-              onChange={(e) => setSelectedPost({ ...selectedPost, body: e.target.value })}
-            />
-            <Button onClick={updatePost}>게시물 업데이트</Button>
-          </div>
+          {selectedPost && <UpdatePostForm selectedPost={selectedPost as PostItem} />}
         </DialogContent>
       </Dialog>
 
diff --git a/src/widget/post-table/PostTable.tsx b/src/widget/post-table/PostTable.tsx
index e85435a06..1b2f98814 100644
--- a/src/widget/post-table/PostTable.tsx
+++ b/src/widget/post-table/PostTable.tsx
@@ -4,6 +4,11 @@ import { Button, HighlightText } from "../../shared/ui"
 import { PostItem } from "../../entities/post/model/types"
 import { User } from "../../entities/user/model/types"
 
+// PostItem에 author 속성이 추가된 타입
+interface PostWithAuthor extends PostItem {
+  author?: User
+}
+
 export const PostTable = ({
   posts,
   searchQuery,
@@ -16,15 +21,15 @@ export const PostTable = ({
   setShowEditDialog,
   deletePost,
 }: {
-  posts: PostItem[]
+  posts: PostWithAuthor[]
   searchQuery: string
   selectedTag: string
   setSelectedTag: (tag: string) => void
   updateURL: () => void
   openUserModal: (user: User) => void
-  openPostDetail: (post: PostItem) => void
-  setSelectedPost: (post: PostItem) => void
-  setShowEditDialog: (show: boolean) => void
+  openPostDetail: (post: PostWithAuthor) => void
+  setSelectedPost: (post: PostWithAuthor) => void
+  setShowEditDialog: (post: PostWithAuthor) => void
   deletePost: (id: number) => void
 }) => {
   return (
@@ -69,7 +74,10 @@ export const PostTable = ({
               </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>
@@ -92,7 +100,7 @@ export const PostTable = ({
                   size="sm"
                   onClick={() => {
                     setSelectedPost(post)
-                    setShowEditDialog(true)
+                    setShowEditDialog(post)
                   }}
                 >
                   <Edit2 className="w-4 h-4" />

From b7df9a74a5e0f4a827783adabfb91847804f9ad6 Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Fri, 15 Aug 2025 02:16:39 +0900
Subject: [PATCH 24/34] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8B=9C=EB=AC=BC=20?=
 =?UTF-8?q?=EC=BA=90=EC=8B=9C=20=EA=B4=80=EB=A6=AC=20=ED=97=AC=ED=8D=BC=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20useMutati?=
 =?UTF-8?q?on=20=ED=9B=85=EC=97=90=EC=84=9C=20=EC=BA=90=EC=8B=9C=20?=
 =?UTF-8?q?=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8=20=EB=A1=9C=EC=A7=81=20?=
 =?UTF-8?q?=ED=86=B5=ED=95=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/post/model/hooks.ts              | 16 +++++---
 .../post/update-posts/UpdatePostForm.tsx      | 22 +---------
 src/pages/PostsManagerPage.tsx                |  3 ++
 src/shared/lib/cache/index.ts                 |  2 +
 src/shared/lib/cache/postCache.ts             | 41 +++++++++++++++++++
 5 files changed, 57 insertions(+), 27 deletions(-)
 create mode 100644 src/shared/lib/cache/index.ts
 create mode 100644 src/shared/lib/cache/postCache.ts

diff --git a/src/entities/post/model/hooks.ts b/src/entities/post/model/hooks.ts
index 229cec311..9b7462e59 100644
--- a/src/entities/post/model/hooks.ts
+++ b/src/entities/post/model/hooks.ts
@@ -1,6 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import PostAPI from "../api/PostAPI"
 import { CreatePost, UpdatePost } from "./types"
+import { addPostToCache, updatePostInCache, deletePostFromCache } from "../../../shared/lib/cache"
 
 // Query Keys 상수 정의
 const QUERY_KEYS = {
@@ -50,9 +51,8 @@ export const useCreatePost = () => {
 
   return useMutation({
     mutationFn: (post: CreatePost) => PostAPI.createPost(post),
-    onSuccess: () => {
-      // 게시글 추가 성공 후 모든 posts 관련 쿼리 캐시 무효화
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.POSTS] })
+    onSuccess: (newPost) => {
+      addPostToCache(queryClient, newPost)
     },
   })
 }
@@ -63,8 +63,13 @@ export const useCreatePost = () => {
  * @returns 업데이트된 게시글 정보
  */
 export const useUpdatePost = (id: number) => {
+  const queryClient = useQueryClient()
+
   return useMutation({
     mutationFn: (post: UpdatePost) => PostAPI.updatePost(id, post),
+    onSuccess: (updatedPost, variables) => {
+      updatePostInCache(queryClient, id, variables)
+    },
   })
 }
 
@@ -78,9 +83,8 @@ export const useDeletePost = () => {
 
   return useMutation({
     mutationFn: (id: number) => PostAPI.deletePost(id),
-    onSuccess: () => {
-      // 게시글 삭제 성공 후 모든 posts 관련 쿼리 캐시 무효화
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.POSTS] })
+    onSuccess: (deletedPost, variables) => {
+      deletePostFromCache(queryClient, variables)
     },
   })
 }
diff --git a/src/features/post/update-posts/UpdatePostForm.tsx b/src/features/post/update-posts/UpdatePostForm.tsx
index 8db95e15a..ed454b4de 100644
--- a/src/features/post/update-posts/UpdatePostForm.tsx
+++ b/src/features/post/update-posts/UpdatePostForm.tsx
@@ -1,5 +1,4 @@
 import { useState, useEffect } from "react"
-import { useQueryClient } from "@tanstack/react-query"
 import { Button, Input, Textarea } from "../../../shared/ui"
 import { useUpdatePost } from "../../../entities/post/model/hooks"
 import { PostItem } from "../../../entities/post/model/types"
@@ -11,7 +10,6 @@ interface UpdatePostFormProps {
 
 export const UpdatePostForm = ({ selectedPost }: UpdatePostFormProps) => {
   const { closeEditDialog } = useDialogStore()
-  const queryClient = useQueryClient()
 
   const [formData, setFormData] = useState({
     title: "",
@@ -43,25 +41,7 @@ export const UpdatePostForm = ({ selectedPost }: UpdatePostFormProps) => {
         tags: selectedPost.tags || [],
       })
 
-      // 캐시를 직접 업데이트하여 UI 즉시 반영
-      queryClient.setQueriesData({ queryKey: ["posts"] }, (oldData: any) => {
-        if (!oldData?.posts) return oldData
-
-        return {
-          ...oldData,
-          posts: oldData.posts.map((p: any) =>
-            p.id === selectedPost.id
-              ? {
-                  ...p,
-                  title: formData.title,
-                  body: formData.body,
-                  userId: formData.userId,
-                }
-              : p,
-          ),
-        }
-      })
-
+      // 캐시 업데이트는 useUpdatePost 훅에서 자동으로 처리됨
       closeEditDialog()
     } catch (error) {
       console.error("게시물 업데이트 실패:", error)
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 8df895211..419b14421 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react"
+import { useQueryClient } from "@tanstack/react-query"
 import { Edit2, Plus, ThumbsUp, Trash2 } from "lucide-react"
 import { useLocation, useNavigate } from "react-router-dom"
 
@@ -88,6 +89,7 @@ const PostsManager = () => {
     navigate(`?${params.toString()}`)
   }
 
+  const queryClient = useQueryClient()
   const { posts, total, loading } = useGetPosts(limit, skip, sortBy, sortOrder, selectedTag, searchQuery)
 
   // 게시물 검색
@@ -108,6 +110,7 @@ const PostsManager = () => {
   const deletePost = async (id) => {
     try {
       await deletePostMutation.mutateAsync(id)
+      // 캐시 업데이트는 useDeletePost 훅에서 자동으로 처리됨
     } catch (error) {
       console.error("게시물 삭제 오류:", error)
     }
diff --git a/src/shared/lib/cache/index.ts b/src/shared/lib/cache/index.ts
new file mode 100644
index 000000000..6b20de1a2
--- /dev/null
+++ b/src/shared/lib/cache/index.ts
@@ -0,0 +1,2 @@
+// 캐시 관련 헬퍼 함수들을 export
+export * from "./postCache"
diff --git a/src/shared/lib/cache/postCache.ts b/src/shared/lib/cache/postCache.ts
new file mode 100644
index 000000000..21fadc9f8
--- /dev/null
+++ b/src/shared/lib/cache/postCache.ts
@@ -0,0 +1,41 @@
+import { QueryClient } from "@tanstack/react-query"
+
+// 게시글 캐시 업데이트 헬퍼 함수들
+export const updatePostsCache = (queryClient: QueryClient, updater: (oldData: any) => any) => {
+  queryClient.setQueriesData({ queryKey: ["posts"] }, updater)
+}
+
+export const addPostToCache = (queryClient: QueryClient, newPost: any) => {
+  updatePostsCache(queryClient, (oldData: any) => {
+    if (!oldData?.posts) return oldData
+
+    return {
+      ...oldData,
+      posts: [newPost, ...oldData.posts],
+      total: oldData.total + 1,
+    }
+  })
+}
+
+export const updatePostInCache = (queryClient: QueryClient, id: number, updates: any) => {
+  updatePostsCache(queryClient, (oldData: any) => {
+    if (!oldData?.posts) return oldData
+
+    return {
+      ...oldData,
+      posts: oldData.posts.map((p: any) => (p.id === id ? { ...p, ...updates } : p)),
+    }
+  })
+}
+
+export const deletePostFromCache = (queryClient: QueryClient, id: number) => {
+  updatePostsCache(queryClient, (oldData: any) => {
+    if (!oldData?.posts) return oldData
+
+    return {
+      ...oldData,
+      posts: oldData.posts.filter((p: any) => p.id !== id),
+      total: oldData.total - 1,
+    }
+  })
+}

From d27a166ef3b01036c1a0be1ec663c19997d3463c Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Fri, 15 Aug 2025 02:21:41 +0900
Subject: [PATCH 25/34] =?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=EB=B3=80=EC=88=98=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 419b14421..0a4ec2d2c 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react"
-import { useQueryClient } from "@tanstack/react-query"
 import { Edit2, Plus, ThumbsUp, Trash2 } from "lucide-react"
 import { useLocation, useNavigate } from "react-router-dom"
 
@@ -13,7 +12,6 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
-  Input,
   Select,
   SelectContent,
   SelectItem,
@@ -22,7 +20,7 @@ import {
   Textarea,
 } from "../shared/ui"
 import { useGetPosts } from "../features/post/get-posts/hooks"
-import { useUpdatePost, useDeletePost } from "../entities/post/model/hooks"
+import { useDeletePost } from "../entities/post/model/hooks"
 import { useDialogStore } from "../shared/stores/dialogStore"
 import { PostTable } from "../widget/post-table/PostTable"
 import { PostFilter } from "../widget/post-filter/PostFilter"
@@ -89,7 +87,6 @@ const PostsManager = () => {
     navigate(`?${params.toString()}`)
   }
 
-  const queryClient = useQueryClient()
   const { posts, total, loading } = useGetPosts(limit, skip, sortBy, sortOrder, selectedTag, searchQuery)
 
   // 게시물 검색

From f4f79e7e6ef249ed1bdfc50ff6cc4730470ba506 Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Fri, 15 Aug 2025 03:30:59 +0900
Subject: [PATCH 26/34] =?UTF-8?q?feat:=20=EB=8C=93=EA=B8=80=20API=20?=
 =?UTF-8?q?=EB=B0=8F=20=ED=9B=85=20=EA=B0=9C=EC=84=A0,=20=EB=8C=93?=
 =?UTF-8?q?=EA=B8=80=20=EB=AA=A9=EB=A1=9D=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=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/CommentAPI.ts     |   6 +-
 src/entities/comment/model/hooks.ts        |  18 ++-
 src/entities/comment/model/types.ts        |  20 +--
 src/features/comment/get-comments/hooks.ts |   9 ++
 src/pages/PostsManagerPage.tsx             | 159 ++++++---------------
 src/widget/comment-list/CommentList.tsx    |  56 ++++++++
 6 files changed, 140 insertions(+), 128 deletions(-)
 create mode 100644 src/features/comment/get-comments/hooks.ts
 create mode 100644 src/widget/comment-list/CommentList.tsx

diff --git a/src/entities/comment/api/CommentAPI.ts b/src/entities/comment/api/CommentAPI.ts
index 3d6b47007..ac0ea244d 100644
--- a/src/entities/comment/api/CommentAPI.ts
+++ b/src/entities/comment/api/CommentAPI.ts
@@ -1,5 +1,5 @@
 import { ApiClient } from "../../../shared/api/api"
-import { CreateComment } from "../model/types"
+import { CreateComment, CommentList } from "../model/types"
 
 class CommentAPI extends ApiClient {
   constructor() {
@@ -11,8 +11,8 @@ class CommentAPI extends ApiClient {
    * @param postId - 게시글 ID
    * @returns 댓글 목록
    */
-  async getComments(postId: number) {
-    return await this.get(`/post/${postId}`)
+  async getComments(postId: number): Promise<CommentList> {
+    return await this.get<CommentList>(`/post/${postId}`)
   }
 
   /**
diff --git a/src/entities/comment/model/hooks.ts b/src/entities/comment/model/hooks.ts
index aae1a29f8..cc722693a 100644
--- a/src/entities/comment/model/hooks.ts
+++ b/src/entities/comment/model/hooks.ts
@@ -1,9 +1,9 @@
 import { useMutation, useQuery } from "@tanstack/react-query"
 import CommentAPI from "../api/CommentAPI"
-import { CreateComment } from "./types"
+import { CreateComment, CommentList } from "./types"
 
-export const useGetComments = (postId: number) => {
-  return useQuery({
+export const useComments = (postId: number) => {
+  return useQuery<CommentList>({
     queryKey: ["comments", postId],
     queryFn: () => CommentAPI.getComments(postId),
   })
@@ -20,3 +20,15 @@ export const useUpdateComment = (id: number) => {
     mutationFn: (comment: CreateComment) => CommentAPI.updateComment(id, comment),
   })
 }
+
+export const useDeleteComment = () => {
+  return useMutation({
+    mutationFn: (id: number) => CommentAPI.deleteComment(id),
+  })
+}
+
+export const useLikeComment = () => {
+  return useMutation({
+    mutationFn: (id: number) => CommentAPI.likeComment(id),
+  })
+}
diff --git a/src/entities/comment/model/types.ts b/src/entities/comment/model/types.ts
index 2c154f7dc..e312e3f77 100644
--- a/src/entities/comment/model/types.ts
+++ b/src/entities/comment/model/types.ts
@@ -1,15 +1,17 @@
 export interface Comment {
-  comments: {
+  id: number
+  body: string
+  postId: number
+  likes: number
+  user: {
     id: number
-    body: string
-    postId: number
-    likes: number
-    user: {
-      id: number
-      username: string
-      fullName: string
-    }
+    username: string
+    fullName: string
   }
+}
+
+export interface CommentList {
+  comments: Comment[]
   limit: number
   skip: number
   total: number
diff --git a/src/features/comment/get-comments/hooks.ts b/src/features/comment/get-comments/hooks.ts
new file mode 100644
index 000000000..b6c31a70f
--- /dev/null
+++ b/src/features/comment/get-comments/hooks.ts
@@ -0,0 +1,9 @@
+import { useComments } from "../../../entities/comment/model/hooks"
+
+export const useGetComments = (postId: number) => {
+  const { data } = useComments(postId)
+
+  return {
+    comments: data?.comments || [],
+  }
+}
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 0a4ec2d2c..2c32fcbf8 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react"
-import { Edit2, Plus, ThumbsUp, Trash2 } from "lucide-react"
+import { Plus } from "lucide-react"
 import { useLocation, useNavigate } from "react-router-dom"
 
 import {
@@ -28,12 +28,21 @@ import { AddPostForm } from "../features/post/add-posts/AddPostForm"
 import { UpdatePostForm } from "../features/post/update-posts/UpdatePostForm"
 import { PostItem } from "../entities/post/model/types"
 import { User } from "../entities/user/model/types"
+import { Comment } from "../entities/comment/model/types"
+import { CommentList } from "../widget/comment-list/CommentList"
 
 // PostItem에 author 속성이 추가된 타입
 interface PostWithAuthor extends PostItem {
   author?: User
 }
 
+// 댓글 입력 폼 타입
+interface CommentForm {
+  body: string
+  postId: number | null
+  userId: number
+}
+
 const PostsManager = () => {
   const navigate = useNavigate()
   const location = useLocation()
@@ -70,10 +79,9 @@ const PostsManager = () => {
   const [sortBy, setSortBy] = useState(queryParams.get("sortBy") || "")
   const [sortOrder, setSortOrder] = useState(queryParams.get("sortOrder") || "asc")
   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 [selectedUser, setSelectedUser] = useState(null)
+  const [selectedComment, setSelectedComment] = useState<Comment | null>(null)
+  const [newComment, setNewComment] = useState<CommentForm>({ body: "", postId: null, userId: 1 })
+  const [selectedUser, setSelectedUser] = useState<User | null>(null)
 
   // URL 업데이트 함수
   const updateURL = () => {
@@ -104,7 +112,7 @@ const PostsManager = () => {
   const deletePostMutation = useDeletePost()
 
   // 게시물 삭제
-  const deletePost = async (id) => {
+  const deletePost = async (id: number) => {
     try {
       await deletePostMutation.mutateAsync(id)
       // 캐시 업데이트는 useDeletePost 훅에서 자동으로 처리됨
@@ -113,35 +121,18 @@ const PostsManager = () => {
     }
   }
 
-  // 댓글 가져오기
-  const fetchComments = async (postId) => {
-    if (comments[postId]) return // 이미 불러온 댓글이 있으면 다시 불러오지 않음
-    try {
-      // getComments
-      const response = await fetch(`/api/comments/post/${postId}`)
-      const data = await response.json()
-      setComments((prev) => ({ ...prev, [postId]: data.comments }))
-    } catch (error) {
-      console.error("댓글 가져오기 오류:", error)
-    }
-  }
-
   // 댓글 추가
   const addComment = async () => {
     try {
       // createComment
-      const response = await fetch("/api/comments/add", {
+      await fetch("/api/comments/add", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(newComment),
       })
-      const data = await response.json()
-      setComments((prev) => ({
-        ...prev,
-        [data.postId]: [...(prev[data.postId] || []), data],
-      }))
       closeAddCommentDialog()
       setNewComment({ body: "", postId: null, userId: 1 })
+      // 댓글 추가 후 상세 보기 새로고침 (React Query가 자동으로 처리)
     } catch (error) {
       console.error("댓글 추가 오류:", error)
     }
@@ -150,68 +141,56 @@ const PostsManager = () => {
   // 댓글 업데이트
   const updateComment = async () => {
     try {
-      const response = await fetch(`/api/comments/${selectedComment.id}`, {
+      if (!selectedComment) return
+
+      await fetch(`/api/comments/${selectedComment.id}`, {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ body: selectedComment.body }),
       })
-      const data = await response.json()
-      setComments((prev) => ({
-        ...prev,
-        [data.postId]: prev[data.postId].map((comment) => (comment.id === data.id ? data : comment)),
-      }))
       closeEditCommentDialog()
+      // 댓글 업데이트 후 상세 보기 새로고침 (React Query가 자동으로 처리)
     } catch (error) {
       console.error("댓글 업데이트 오류:", error)
     }
   }
 
   // 댓글 삭제
-  const deleteComment = async (id, postId) => {
+  const deleteComment = async (id: number) => {
     try {
       // deleteComment
       await fetch(`/api/comments/${id}`, {
         method: "DELETE",
       })
-      setComments((prev) => ({
-        ...prev,
-        [postId]: prev[postId].filter((comment) => comment.id !== id),
-      }))
+      // 댓글 삭제 후 상세 보기 새로고침 (React Query가 자동으로 처리)
     } catch (error) {
       console.error("댓글 삭제 오류:", error)
     }
   }
 
   // 댓글 좋아요
-  const likeComment = async (id, postId) => {
+  const likeComment = async (id: number) => {
     try {
       // likeComment
-      const response = await fetch(`/api/comments/${id}`, {
+      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: 1 }),
       })
-      const data = await response.json()
-      setComments((prev) => ({
-        ...prev,
-        [postId]: prev[postId].map((comment) =>
-          comment.id === data.id ? { ...data, likes: comment.likes + 1 } : comment,
-        ),
-      }))
+      // 댓글 좋아요 후 상세 보기 새로고침 (React Query가 자동으로 처리)
     } catch (error) {
       console.error("댓글 좋아요 오류:", error)
     }
   }
 
   // 게시물 상세 보기
-  const openPostDetail = (post) => {
+  const openPostDetail = (post: PostWithAuthor) => {
     setSelectedPost(post)
-    fetchComments(post.id)
     openPostDetailDialog()
   }
 
   // 사용자 모달 열기
-  const handleOpenUserModal = async (user) => {
+  const handleOpenUserModal = async (user: User) => {
     try {
       // getUserInfo
       const response = await fetch(`/api/users/${user.id}`)
@@ -237,53 +216,23 @@ const PostsManager = () => {
     setSelectedTag(params.get("tag") || "")
   }, [location.search])
 
-  // 댓글 렌더링
-  const renderComments = (postId) => (
-    <div className="mt-2">
-      <div className="flex items-center justify-between mb-2">
-        <h3 className="text-sm font-semibold">댓글</h3>
-        <Button
-          size="sm"
-          onClick={() => {
-            setNewComment((prev) => ({ ...prev, postId }))
-            openAddCommentDialog()
-          }}
-        >
-          <Plus className="w-3 h-3 mr-1" />
-          댓글 추가
-        </Button>
-      </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 space-x-2 overflow-hidden">
-              <span className="font-medium truncate">{comment.user.username}:</span>
-              <span className="truncate">{comment.body}</span>
-            </div>
-            <div className="flex items-center space-x-1">
-              <Button 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
-                variant="ghost"
-                size="sm"
-                onClick={() => {
-                  setSelectedComment(comment)
-                  openEditCommentDialog()
-                }}
-              >
-                <Edit2 className="w-3 h-3" />
-              </Button>
-              <Button variant="ghost" size="sm" onClick={() => deleteComment(comment.id, postId)}>
-                <Trash2 className="w-3 h-3" />
-              </Button>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
+  const renderComments = (postId: number) => {
+    return (
+      <CommentList
+        postId={postId}
+        onAddComment={() => {
+          setNewComment((prev) => ({ ...prev, postId }))
+          openAddCommentDialog()
+        }}
+        onEditComment={(comment) => {
+          setSelectedComment(comment)
+          openEditCommentDialog()
+        }}
+        onDeleteComment={deleteComment}
+        onLikeComment={likeComment}
+      />
+    )
+  }
 
   return (
     <Card className="w-full max-w-6xl mx-auto">
@@ -502,23 +451,7 @@ const PostsManager = () => {
             <h3 className="text-xl font-semibold text-center">{selectedUser?.username}</h3>
             <div className="space-y-2">
               <p>
-                <strong>이름:</strong> {selectedUser?.firstName} {selectedUser?.lastName}
-              </p>
-              <p>
-                <strong>나이:</strong> {selectedUser?.age}
-              </p>
-              <p>
-                <strong>이메일:</strong> {selectedUser?.email}
-              </p>
-              <p>
-                <strong>전화번호:</strong> {selectedUser?.phone}
-              </p>
-              <p>
-                <strong>주소:</strong> {selectedUser?.address?.address}, {selectedUser?.address?.city},{" "}
-                {selectedUser?.address?.state}
-              </p>
-              <p>
-                <strong>직장:</strong> {selectedUser?.company?.name} - {selectedUser?.company?.title}
+                <strong>사용자 ID:</strong> {selectedUser?.id}
               </p>
             </div>
           </div>
diff --git a/src/widget/comment-list/CommentList.tsx b/src/widget/comment-list/CommentList.tsx
new file mode 100644
index 000000000..a4f07c0fd
--- /dev/null
+++ b/src/widget/comment-list/CommentList.tsx
@@ -0,0 +1,56 @@
+import { Edit2, Plus, ThumbsUp, Trash2 } from "lucide-react"
+import { Button } from "../../shared/ui"
+import { Comment } from "../../entities/comment/model/types"
+import { useGetComments } from "../../features/comment/get-comments/hooks"
+
+interface CommentListProps {
+  postId: number
+  onAddComment: () => void
+  onEditComment: (comment: Comment) => void
+  onDeleteComment: (id: number) => void
+  onLikeComment: (id: number) => void
+}
+
+export const CommentList = ({
+  postId,
+  onAddComment,
+  onEditComment,
+  onDeleteComment,
+  onLikeComment,
+}: CommentListProps) => {
+  const { comments } = useGetComments(postId)
+
+  return (
+    <div className="mt-2">
+      <div className="flex items-center justify-between mb-2">
+        <h3 className="text-sm font-semibold">댓글</h3>
+        <Button size="sm" onClick={onAddComment}>
+          <Plus className="w-3 h-3 mr-1" />
+          댓글 추가
+        </Button>
+      </div>
+      <div className="space-y-1">
+        {comments.map((comment) => (
+          <div key={comment.id} className="flex items-center justify-between text-sm border-b pb-1">
+            <div className="flex items-center space-x-2 overflow-hidden">
+              <span className="font-medium truncate">{comment.user.username}:</span>
+              <span className="truncate">{comment.body}</span>
+            </div>
+            <div className="flex items-center space-x-1">
+              <Button variant="ghost" size="sm" onClick={() => comment.id && onLikeComment(comment.id)}>
+                <ThumbsUp className="w-3 h-3" />
+                <span className="ml-1 text-xs">{comment.likes}</span>
+              </Button>
+              <Button variant="ghost" size="sm" onClick={() => comment.id && onEditComment(comment)}>
+                <Edit2 className="w-3 h-3" />
+              </Button>
+              <Button variant="ghost" size="sm" onClick={() => comment.id && onDeleteComment(comment.id)}>
+                <Trash2 className="w-3 h-3" />
+              </Button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

From 6dbedd13869e773f9d662d31b8d8b07291ddd164 Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Fri, 15 Aug 2025 04:44:19 +0900
Subject: [PATCH 27/34] =?UTF-8?q?feat:=20=EB=8C=93=EA=B8=80=20API=20?=
 =?UTF-8?q?=EB=B0=8F=20=ED=9B=85=20=EA=B0=9C=EC=84=A0,=20=EB=8C=93?=
 =?UTF-8?q?=EA=B8=80=20=EC=B6=94=EA=B0=80/=EC=88=98=EC=A0=95/=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C/=EC=A2=8B=EC=95=84=EC=9A=94=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84=20=EB=B0=8F=20UI=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=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/CommentAPI.ts        |  18 +-
 src/entities/comment/model/hooks.ts           |  35 +++-
 src/entities/comment/model/types.ts           |  17 +-
 .../comment/add-comments/AddCommentForm.tsx   |  46 +++++
 src/features/comment/add-comments/hooks.ts    |  22 ++
 src/features/comment/add-comments/index.ts    |   1 +
 src/features/comment/del-comments/hooks.ts    |  25 +++
 src/features/comment/del-comments/index.ts    |   1 +
 src/features/comment/get-comments/index.ts    |   1 +
 src/features/comment/index.ts                 |   5 +
 src/features/comment/like-comments/hooks.ts   |  25 +++
 src/features/comment/like-comments/index.ts   |   1 +
 src/features/comment/update-comments/hooks.ts |  22 ++
 src/features/comment/update-comments/index.ts |   1 +
 src/pages/PostsManagerPage.tsx                | 193 +++++++++++++-----
 src/widget/comment-list/CommentEditForm.tsx   |  38 ++++
 src/widget/comment-list/CommentInputForm.tsx  |  58 ++++++
 src/widget/comment-list/CommentList.tsx       | 134 ++++++++----
 src/widget/comment-list/index.ts              |   3 +
 19 files changed, 535 insertions(+), 111 deletions(-)
 create mode 100644 src/features/comment/add-comments/AddCommentForm.tsx
 create mode 100644 src/features/comment/add-comments/hooks.ts
 create mode 100644 src/features/comment/add-comments/index.ts
 create mode 100644 src/features/comment/del-comments/hooks.ts
 create mode 100644 src/features/comment/del-comments/index.ts
 create mode 100644 src/features/comment/get-comments/index.ts
 create mode 100644 src/features/comment/index.ts
 create mode 100644 src/features/comment/like-comments/hooks.ts
 create mode 100644 src/features/comment/like-comments/index.ts
 create mode 100644 src/features/comment/update-comments/hooks.ts
 create mode 100644 src/features/comment/update-comments/index.ts
 create mode 100644 src/widget/comment-list/CommentEditForm.tsx
 create mode 100644 src/widget/comment-list/CommentInputForm.tsx
 create mode 100644 src/widget/comment-list/index.ts

diff --git a/src/entities/comment/api/CommentAPI.ts b/src/entities/comment/api/CommentAPI.ts
index ac0ea244d..cc5af1feb 100644
--- a/src/entities/comment/api/CommentAPI.ts
+++ b/src/entities/comment/api/CommentAPI.ts
@@ -1,5 +1,5 @@
 import { ApiClient } from "../../../shared/api/api"
-import { CreateComment, CommentList } from "../model/types"
+import { CreateComment, CommentList, UpdateComment, LikeComment, Comment } from "../model/types"
 
 class CommentAPI extends ApiClient {
   constructor() {
@@ -20,8 +20,8 @@ class CommentAPI extends ApiClient {
    * @param comment - 추가할 댓글 정보
    * @returns 추가된 댓글 정보
    */
-  async createComment(comment: CreateComment) {
-    return await this.post("/add", comment)
+  async createComment(comment: CreateComment): Promise<Comment> {
+    return await this.post<Comment>("/add", comment)
   }
 
   /**
@@ -30,8 +30,8 @@ class CommentAPI extends ApiClient {
    * @param comment - 수정할 댓글 정보
    * @returns 수정된 댓글 정보
    */
-  async updateComment(id: number, comment: CreateComment) {
-    return await this.put(`/${id}`, comment)
+  async updateComment(id: number, comment: UpdateComment): Promise<Comment> {
+    return await this.put<Comment>(`/${id}`, comment)
   }
 
   /**
@@ -39,8 +39,8 @@ class CommentAPI extends ApiClient {
    * @param id - 삭제할 댓글 ID
    * @returns 삭제된 댓글 정보
    */
-  async deleteComment(id: number) {
-    return await this.delete(`/${id}`)
+  async deleteComment(id: number): Promise<Comment> {
+    return await this.delete<Comment>(`/${id}`)
   }
 
   /**
@@ -48,8 +48,8 @@ class CommentAPI extends ApiClient {
    * @param id - 좋아요할 댓글 ID
    * @returns 좋아요된 댓글 정보
    */
-  async likeComment(id: number) {
-    return await this.patch(`/${id}`, { likes: 1 })
+  async likeComment(id: number): Promise<Comment> {
+    return await this.patch<Comment>(`/${id}`, { likes: 1 })
   }
 }
 
diff --git a/src/entities/comment/model/hooks.ts b/src/entities/comment/model/hooks.ts
index cc722693a..171dd76bb 100644
--- a/src/entities/comment/model/hooks.ts
+++ b/src/entities/comment/model/hooks.ts
@@ -1,34 +1,59 @@
-import { useMutation, useQuery } from "@tanstack/react-query"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import CommentAPI from "../api/CommentAPI"
-import { CreateComment, CommentList } from "./types"
+import { CreateComment, UpdateComment } from "./types"
 
 export const useComments = (postId: number) => {
-  return useQuery<CommentList>({
+  return useQuery({
     queryKey: ["comments", postId],
     queryFn: () => CommentAPI.getComments(postId),
   })
 }
 
 export const useCreateComment = () => {
+  const queryClient = useQueryClient()
+
   return useMutation({
     mutationFn: (comment: CreateComment) => CommentAPI.createComment(comment),
+    onSuccess: (_, variables) => {
+      // 댓글 추가 후 해당 게시물의 댓글 목록 캐시 무효화
+      queryClient.invalidateQueries({ queryKey: ["comments", variables.postId] })
+    },
   })
 }
 
-export const useUpdateComment = (id: number) => {
+export const useUpdateComment = () => {
+  const queryClient = useQueryClient()
+
   return useMutation({
-    mutationFn: (comment: CreateComment) => CommentAPI.updateComment(id, comment),
+    mutationFn: ({ id, comment, postId }: { id: number; comment: UpdateComment; postId: number }) =>
+      CommentAPI.updateComment(id, comment),
+    onSuccess: (_, variables) => {
+      // 댓글 수정 후 해당 게시물의 댓글 목록 캐시 무효화
+      queryClient.invalidateQueries({ queryKey: ["comments", variables.postId] })
+    },
   })
 }
 
 export const useDeleteComment = () => {
+  const queryClient = useQueryClient()
+
   return useMutation({
     mutationFn: (id: number) => CommentAPI.deleteComment(id),
+    onSuccess: () => {
+      // 댓글 삭제 후 모든 댓글 목록 캐시 무효화
+      queryClient.invalidateQueries({ queryKey: ["comments"] })
+    },
   })
 }
 
 export const useLikeComment = () => {
+  const queryClient = useQueryClient()
+
   return useMutation({
     mutationFn: (id: number) => CommentAPI.likeComment(id),
+    onSuccess: () => {
+      // 댓글 좋아요 후 모든 댓글 목록 캐시 무효화
+      queryClient.invalidateQueries({ queryKey: ["comments"] })
+    },
   })
 }
diff --git a/src/entities/comment/model/types.ts b/src/entities/comment/model/types.ts
index e312e3f77..6105a3652 100644
--- a/src/entities/comment/model/types.ts
+++ b/src/entities/comment/model/types.ts
@@ -19,23 +19,14 @@ export interface CommentList {
 
 export interface CreateComment {
   body: string
-  id: number
   postId: number
-  user: {
-    id: number
-    username: string
-    fullName: string
-  }
+  userId: number
 }
 
 export interface UpdateComment {
   body: string
-  id: number
+}
+
+export interface LikeComment {
   likes: number
-  postId: number
-  user: {
-    id: number
-    username: string
-    fullName: string
-  }
 }
diff --git a/src/features/comment/add-comments/AddCommentForm.tsx b/src/features/comment/add-comments/AddCommentForm.tsx
new file mode 100644
index 000000000..c27f78dbd
--- /dev/null
+++ b/src/features/comment/add-comments/AddCommentForm.tsx
@@ -0,0 +1,46 @@
+import { useDialogStore } from "../../../shared/stores/dialogStore"
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Textarea } from "../../../shared/ui"
+import { useCreateComment } from "../../../entities/comment/model/hooks"
+
+export const AddCommentForm = () => {
+  const { openAddCommentDialog, closeAddCommentDialog } = useDialogStore()
+  const {
+    newComment,
+    setBody,
+    addComment,
+    resetForm,
+    isLoading: isAddingComment,
+    isError: isAddError,
+    error: addError,
+  } = useCreateComment(() => {
+    closeAddCommentDialog()
+  })
+  const { showAddCommentDialog } = useDialogStore()
+
+  return (
+    <Dialog
+      open={showAddCommentDialog}
+      onOpenChange={(open) => {
+        if (open) {
+          openAddCommentDialog()
+        } else {
+          closeAddCommentDialog()
+          resetForm()
+        }
+      }}
+    >
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>새 댓글 추가</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <Textarea placeholder="댓글 내용" value={newComment.body} onChange={(e) => setBody(e.target.value)} />
+          <Button onClick={addComment} disabled={isAddingComment}>
+            {isAddingComment ? "추가 중..." : "댓글 추가"}
+          </Button>
+          {isAddError && <p className="text-red-500 text-sm">댓글 추가 중 오류가 발생했습니다: {addError?.message}</p>}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/features/comment/add-comments/hooks.ts b/src/features/comment/add-comments/hooks.ts
new file mode 100644
index 000000000..02bb8650b
--- /dev/null
+++ b/src/features/comment/add-comments/hooks.ts
@@ -0,0 +1,22 @@
+import { useCreateComment } from "../../../entities/comment/model/hooks"
+import { CreateComment } from "../../../entities/comment/model/types"
+
+export const useAddComment = () => {
+  const createCommentMutation = useCreateComment()
+
+  const addComment = async (comment: CreateComment) => {
+    try {
+      await createCommentMutation.mutateAsync(comment)
+      return { success: true }
+    } catch (error) {
+      console.error("댓글 추가 오류:", error)
+      return { success: false, error }
+    }
+  }
+
+  return {
+    addComment,
+    isLoading: createCommentMutation.isPending,
+    error: createCommentMutation.error,
+  }
+}
diff --git a/src/features/comment/add-comments/index.ts b/src/features/comment/add-comments/index.ts
new file mode 100644
index 000000000..a807a4df2
--- /dev/null
+++ b/src/features/comment/add-comments/index.ts
@@ -0,0 +1 @@
+export { useAddComment } from "./hooks"
diff --git a/src/features/comment/del-comments/hooks.ts b/src/features/comment/del-comments/hooks.ts
new file mode 100644
index 000000000..bf70a5495
--- /dev/null
+++ b/src/features/comment/del-comments/hooks.ts
@@ -0,0 +1,25 @@
+import { useMutation } from "@tanstack/react-query"
+import CommentAPI from "../../../entities/comment/api/CommentAPI"
+
+export const useDeleteCommentFeature = () => {
+  const deleteCommentMutation = useMutation({
+    mutationFn: (id: number) => CommentAPI.deleteComment(id),
+    // invalidateQueries 제거 - setQueryData로 직접 캐시 업데이트
+  })
+
+  const deleteComment = async (id: number) => {
+    try {
+      await deleteCommentMutation.mutateAsync(id)
+      return { success: true }
+    } catch (error) {
+      console.error("댓글 삭제 오류:", error)
+      return { success: false, error }
+    }
+  }
+
+  return {
+    deleteComment,
+    isLoading: deleteCommentMutation.isPending,
+    error: deleteCommentMutation.error,
+  }
+}
diff --git a/src/features/comment/del-comments/index.ts b/src/features/comment/del-comments/index.ts
new file mode 100644
index 000000000..9fd3241b0
--- /dev/null
+++ b/src/features/comment/del-comments/index.ts
@@ -0,0 +1 @@
+export { useDeleteCommentFeature } from "./hooks"
diff --git a/src/features/comment/get-comments/index.ts b/src/features/comment/get-comments/index.ts
new file mode 100644
index 000000000..83ce8b937
--- /dev/null
+++ b/src/features/comment/get-comments/index.ts
@@ -0,0 +1 @@
+export { useGetComments } from "./hooks"
diff --git a/src/features/comment/index.ts b/src/features/comment/index.ts
new file mode 100644
index 000000000..af2203227
--- /dev/null
+++ b/src/features/comment/index.ts
@@ -0,0 +1,5 @@
+export { useAddComment } from "./add-comments"
+export { useUpdateCommentFeature } from "./update-comments"
+export { useLikeCommentFeature } from "./like-comments"
+export { useDeleteCommentFeature } from "./del-comments"
+export { useGetComments } from "./get-comments"
diff --git a/src/features/comment/like-comments/hooks.ts b/src/features/comment/like-comments/hooks.ts
new file mode 100644
index 000000000..3eb3e4031
--- /dev/null
+++ b/src/features/comment/like-comments/hooks.ts
@@ -0,0 +1,25 @@
+import { useMutation } from "@tanstack/react-query"
+import CommentAPI from "../../../entities/comment/api/CommentAPI"
+
+export const useLikeCommentFeature = () => {
+  const likeCommentMutation = useMutation({
+    mutationFn: (id: number) => CommentAPI.likeComment(id),
+    // invalidateQueries 제거 - setQueryData로 직접 캐시 업데이트
+  })
+
+  const likeComment = async (id: number) => {
+    try {
+      await likeCommentMutation.mutateAsync(id)
+      return { success: true }
+    } catch (error) {
+      console.error("댓글 좋아요 오류:", error)
+      return { success: false, error }
+    }
+  }
+
+  return {
+    likeComment,
+    isLoading: likeCommentMutation.isPending,
+    error: likeCommentMutation.error,
+  }
+}
diff --git a/src/features/comment/like-comments/index.ts b/src/features/comment/like-comments/index.ts
new file mode 100644
index 000000000..cfb6d2ed6
--- /dev/null
+++ b/src/features/comment/like-comments/index.ts
@@ -0,0 +1 @@
+export { useLikeCommentFeature } from "./hooks"
diff --git a/src/features/comment/update-comments/hooks.ts b/src/features/comment/update-comments/hooks.ts
new file mode 100644
index 000000000..432786497
--- /dev/null
+++ b/src/features/comment/update-comments/hooks.ts
@@ -0,0 +1,22 @@
+import { useUpdateComment } from "../../../entities/comment/model/hooks"
+import { UpdateComment } from "../../../entities/comment/model/types"
+
+export const useUpdateCommentFeature = () => {
+  const updateCommentMutation = useUpdateComment()
+
+  const updateComment = async (id: number, comment: UpdateComment, postId: number) => {
+    try {
+      await updateCommentMutation.mutateAsync({ id, comment, postId })
+      return { success: true }
+    } catch (error) {
+      console.error("댓글 수정 오류:", error)
+      return { success: false, error }
+    }
+  }
+
+  return {
+    updateComment,
+    isLoading: updateCommentMutation.isPending,
+    error: updateCommentMutation.error,
+  }
+}
diff --git a/src/features/comment/update-comments/index.ts b/src/features/comment/update-comments/index.ts
new file mode 100644
index 000000000..79a317101
--- /dev/null
+++ b/src/features/comment/update-comments/index.ts
@@ -0,0 +1 @@
+export { useUpdateCommentFeature } from "./hooks"
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 2c32fcbf8..d11acfdbe 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react"
 import { Plus } from "lucide-react"
 import { useLocation, useNavigate } from "react-router-dom"
+import { useQueryClient } from "@tanstack/react-query"
 
 import {
   Button,
@@ -29,7 +30,10 @@ import { UpdatePostForm } from "../features/post/update-posts/UpdatePostForm"
 import { PostItem } from "../entities/post/model/types"
 import { User } from "../entities/user/model/types"
 import { Comment } from "../entities/comment/model/types"
-import { CommentList } from "../widget/comment-list/CommentList"
+import { useGetComments } from "../features/comment/get-comments/hooks"
+import { useDeleteCommentFeature } from "../features/comment/del-comments/hooks"
+import { useLikeCommentFeature } from "../features/comment/like-comments/hooks"
+import { Edit2, ThumbsUp, Trash2 } from "lucide-react"
 
 // PostItem에 author 속성이 추가된 타입
 interface PostWithAuthor extends PostItem {
@@ -43,10 +47,107 @@ interface CommentForm {
   userId: number
 }
 
+// 댓글 목록 컴포넌트
+const CommentSection = ({
+  postId,
+  onAddComment,
+  onEditComment,
+}: {
+  postId: number
+  onAddComment: () => void
+  onEditComment: (comment: Comment) => void
+}) => {
+  const { comments } = useGetComments(postId)
+  const { deleteComment, isLoading: isDeleting } = useDeleteCommentFeature()
+  const { likeComment, isLoading: isLiking } = useLikeCommentFeature()
+  const queryClient = useQueryClient()
+
+  console.log("CommentSection 렌더링:", { postId, commentsCount: comments.length, isDeleting, isLiking })
+
+  const handleDeleteComment = async (id: number) => {
+    console.log("댓글 삭제 시도:", id)
+    const result = await deleteComment(id)
+    console.log("댓글 삭제 결과:", result)
+    if (result.success) {
+      console.log("댓글 삭제 성공!")
+
+      // setQueryData를 사용하여 댓글 캐시에서 삭제된 댓글 제거
+      queryClient.setQueryData(["comments", postId], (oldData: { comments: Comment[] } | undefined) => {
+        if (!oldData) return oldData
+
+        return {
+          ...oldData,
+          comments: oldData.comments.filter((comment: Comment) => comment.id !== id),
+        }
+      })
+    } else {
+      console.error("댓글 삭제 실패:", result.error)
+    }
+  }
+
+  const handleLikeComment = async (id: number) => {
+    console.log("댓글 좋아요 시도:", id)
+    const result = await likeComment(id)
+    console.log("댓글 좋아요 결과:", result)
+    if (result.success) {
+      console.log("댓글 좋아요 성공!")
+
+      // setQueryData를 사용하여 댓글 캐시에서 좋아요 수 증가
+      queryClient.setQueryData(["comments", postId], (oldData: { comments: Comment[] } | undefined) => {
+        if (!oldData) return oldData
+
+        return {
+          ...oldData,
+          comments: oldData.comments.map((comment: Comment) =>
+            comment.id === id ? { ...comment, likes: comment.likes + 1 } : comment,
+          ),
+        }
+      })
+    } else {
+      console.error("댓글 좋아요 실패:", result.error)
+    }
+  }
+
+  return (
+    <div className="mt-2">
+      <div className="flex items-center justify-between mb-2">
+        <h3 className="text-sm font-semibold">댓글</h3>
+        <Button size="sm" onClick={onAddComment}>
+          <Plus className="w-3 h-3 mr-1" />
+          댓글 추가
+        </Button>
+      </div>
+      <div className="space-y-1">
+        {comments.map((comment) => (
+          <div key={comment.id} className="flex items-center justify-between text-sm border-b pb-1">
+            <div className="flex items-center space-x-2 overflow-hidden">
+              <span className="font-medium truncate">{comment.user.username}:</span>
+              <span className="truncate">{comment.body}</span>
+            </div>
+            <div className="flex items-center space-x-1">
+              <Button variant="ghost" size="sm" onClick={() => handleLikeComment(comment.id)} disabled={isLiking}>
+                <ThumbsUp className="w-3 h-3" />
+                <span className="ml-1 text-xs">{comment.likes}</span>
+              </Button>
+              <Button variant="ghost" size="sm" onClick={() => onEditComment(comment)}>
+                <Edit2 className="w-3 h-3" />
+              </Button>
+              <Button variant="ghost" size="sm" onClick={() => handleDeleteComment(comment.id)} disabled={isDeleting}>
+                <Trash2 className="w-3 h-3" />
+              </Button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
 const PostsManager = () => {
   const navigate = useNavigate()
   const location = useLocation()
   const queryParams = new URLSearchParams(location.search)
+  const queryClient = useQueryClient()
 
   // Zustand store 사용
   const {
@@ -123,6 +224,7 @@ const PostsManager = () => {
 
   // 댓글 추가
   const addComment = async () => {
+    console.log("댓글 추가 시도:", newComment)
     try {
       // createComment
       await fetch("/api/comments/add", {
@@ -130,6 +232,7 @@ const PostsManager = () => {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(newComment),
       })
+      console.log("댓글 추가 성공!")
       closeAddCommentDialog()
       setNewComment({ body: "", postId: null, userId: 1 })
       // 댓글 추가 후 상세 보기 새로고침 (React Query가 자동으로 처리)
@@ -140,6 +243,7 @@ const PostsManager = () => {
 
   // 댓글 업데이트
   const updateComment = async () => {
+    console.log("댓글 수정 시도:", selectedComment)
     try {
       if (!selectedComment) return
 
@@ -148,6 +252,22 @@ const PostsManager = () => {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ body: selectedComment.body }),
       })
+      console.log("댓글 수정 성공!")
+
+      // setQueryData를 사용하여 댓글 캐시만 직접 업데이트
+      if (selectedPost?.id) {
+        queryClient.setQueryData(["comments", selectedPost.id], (oldData: { comments: Comment[] } | undefined) => {
+          if (!oldData) return oldData
+
+          return {
+            ...oldData,
+            comments: oldData.comments.map((comment: Comment) =>
+              comment.id === selectedComment.id ? { ...comment, body: selectedComment.body } : comment,
+            ),
+          }
+        })
+      }
+
       closeEditCommentDialog()
       // 댓글 업데이트 후 상세 보기 새로고침 (React Query가 자동으로 처리)
     } catch (error) {
@@ -155,38 +275,12 @@ const PostsManager = () => {
     }
   }
 
-  // 댓글 삭제
-  const deleteComment = async (id: number) => {
-    try {
-      // deleteComment
-      await fetch(`/api/comments/${id}`, {
-        method: "DELETE",
-      })
-      // 댓글 삭제 후 상세 보기 새로고침 (React Query가 자동으로 처리)
-    } catch (error) {
-      console.error("댓글 삭제 오류:", error)
-    }
-  }
-
-  // 댓글 좋아요
-  const likeComment = async (id: number) => {
-    try {
-      // likeComment
-      await fetch(`/api/comments/${id}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ likes: 1 }),
-      })
-      // 댓글 좋아요 후 상세 보기 새로고침 (React Query가 자동으로 처리)
-    } catch (error) {
-      console.error("댓글 좋아요 오류:", error)
-    }
-  }
-
   // 게시물 상세 보기
   const openPostDetail = (post: PostWithAuthor) => {
+    console.log("openPostDetail 호출됨:", post)
     setSelectedPost(post)
     openPostDetailDialog()
+    console.log("showPostDetailDialog 상태:", showPostDetailDialog)
   }
 
   // 사용자 모달 열기
@@ -216,23 +310,14 @@ const PostsManager = () => {
     setSelectedTag(params.get("tag") || "")
   }, [location.search])
 
-  const renderComments = (postId: number) => {
-    return (
-      <CommentList
-        postId={postId}
-        onAddComment={() => {
-          setNewComment((prev) => ({ ...prev, postId }))
-          openAddCommentDialog()
-        }}
-        onEditComment={(comment) => {
-          setSelectedComment(comment)
-          openEditCommentDialog()
-        }}
-        onDeleteComment={deleteComment}
-        onLikeComment={likeComment}
-      />
-    )
-  }
+  // 디버깅을 위한 상태 변화 추적
+  useEffect(() => {
+    console.log("showPostDetailDialog 상태 변화:", showPostDetailDialog)
+  }, [showPostDetailDialog])
+
+  useEffect(() => {
+    console.log("selectedPost 상태 변화:", selectedPost)
+  }, [selectedPost])
 
   return (
     <Card className="w-full max-w-6xl mx-auto">
@@ -402,7 +487,7 @@ const PostsManager = () => {
             <Textarea
               placeholder="댓글 내용"
               value={selectedComment?.body || ""}
-              onChange={(e) => setSelectedComment({ ...selectedComment, body: e.target.value })}
+              onChange={(e) => selectedComment && setSelectedComment({ ...selectedComment, body: e.target.value })}
             />
             <Button onClick={updateComment}>댓글 업데이트</Button>
           </div>
@@ -426,7 +511,19 @@ const PostsManager = () => {
           </DialogHeader>
           <div className="space-y-4">
             <p>{selectedPost?.body}</p>
-            {renderComments(selectedPost?.id)}
+            {selectedPost?.id && (
+              <CommentSection
+                postId={selectedPost.id}
+                onAddComment={() => {
+                  setNewComment({ ...newComment, postId: selectedPost.id })
+                  openAddCommentDialog()
+                }}
+                onEditComment={(comment) => {
+                  setSelectedComment(comment)
+                  openEditCommentDialog()
+                }}
+              />
+            )}
           </div>
         </DialogContent>
       </Dialog>
diff --git a/src/widget/comment-list/CommentEditForm.tsx b/src/widget/comment-list/CommentEditForm.tsx
new file mode 100644
index 000000000..68c69ae17
--- /dev/null
+++ b/src/widget/comment-list/CommentEditForm.tsx
@@ -0,0 +1,38 @@
+import { useState, useEffect } from "react"
+import { Button, Textarea } from "../../shared/ui"
+import { useUpdateCommentFeature } from "../../features/comment/update-comments/hooks"
+import { Comment, UpdateComment } from "../../entities/comment/model/types"
+
+interface CommentEditFormProps {
+  comment: Comment
+  onSuccess?: () => void
+}
+
+export const CommentEditForm = ({ comment, onSuccess }: CommentEditFormProps) => {
+  const [body, setBody] = useState(comment.body)
+  const { updateComment } = useUpdateCommentFeature()
+
+  useEffect(() => {
+    setBody(comment.body)
+  }, [comment.body])
+
+  const handleSubmit = async () => {
+    if (!body.trim()) return
+
+    const updateData: UpdateComment = {
+      body: body.trim(),
+    }
+
+    const result = await updateComment(comment.id, updateData, comment.postId)
+    if (result.success) {
+      onSuccess?.()
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <Textarea placeholder="댓글 내용" value={body} onChange={(e) => setBody(e.target.value)} />
+      <Button onClick={handleSubmit}>댓글 업데이트</Button>
+    </div>
+  )
+}
diff --git a/src/widget/comment-list/CommentInputForm.tsx b/src/widget/comment-list/CommentInputForm.tsx
new file mode 100644
index 000000000..bc9eeb8af
--- /dev/null
+++ b/src/widget/comment-list/CommentInputForm.tsx
@@ -0,0 +1,58 @@
+import { useState } from "react"
+import { Button, Textarea } from "../../shared/ui"
+import { useAddComment } from "../../features/comment/add-comments/hooks"
+import { CreateComment } from "../../entities/comment/model/types"
+
+interface CommentInputFormProps {
+  postId: number
+  userId: number
+  onSuccess?: () => void
+  onCancel?: () => void
+}
+
+export const CommentInputForm = ({ postId, userId, onSuccess, onCancel }: CommentInputFormProps) => {
+  const [body, setBody] = useState("")
+  const { addComment, isLoading } = useAddComment()
+
+  const handleSubmit = async () => {
+    if (!body.trim()) return
+
+    const comment: CreateComment = {
+      body: body.trim(),
+      postId,
+      userId,
+    }
+
+    const result = await addComment(comment)
+    if (result.success) {
+      setBody("")
+      onSuccess?.()
+    }
+  }
+
+  const handleCancel = () => {
+    setBody("")
+    onCancel?.()
+  }
+
+  return (
+    <div className="space-y-3">
+      <Textarea
+        placeholder="댓글을 입력하세요..."
+        value={body}
+        onChange={(e) => setBody(e.target.value)}
+        className="min-h-[80px]"
+      />
+      <div className="flex justify-end space-x-2">
+        {onCancel && (
+          <Button variant="outline" onClick={handleCancel} disabled={isLoading}>
+            취소
+          </Button>
+        )}
+        <Button onClick={handleSubmit} disabled={!body.trim() || isLoading}>
+          {isLoading ? "추가 중..." : "댓글 추가"}
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/widget/comment-list/CommentList.tsx b/src/widget/comment-list/CommentList.tsx
index a4f07c0fd..ba5b8522d 100644
--- a/src/widget/comment-list/CommentList.tsx
+++ b/src/widget/comment-list/CommentList.tsx
@@ -1,55 +1,117 @@
-import { Edit2, Plus, ThumbsUp, Trash2 } from "lucide-react"
+import { useState } from "react"
+import { Edit2, Plus, ThumbsUp, Trash2, X } from "lucide-react"
 import { Button } from "../../shared/ui"
-import { Comment } from "../../entities/comment/model/types"
 import { useGetComments } from "../../features/comment/get-comments/hooks"
+import { useDeleteCommentFeature } from "../../features/comment/del-comments/hooks"
+import { useLikeCommentFeature } from "../../features/comment/like-comments/hooks"
+import { CommentInputForm } from "./CommentInputForm"
+import { Comment } from "../../entities/comment/model/types"
 
 interface CommentListProps {
   postId: number
-  onAddComment: () => void
-  onEditComment: (comment: Comment) => void
-  onDeleteComment: (id: number) => void
-  onLikeComment: (id: number) => void
+  userId?: number
+  onEditComment?: (comment: Comment) => void
 }
 
-export const CommentList = ({
-  postId,
-  onAddComment,
-  onEditComment,
-  onDeleteComment,
-  onLikeComment,
-}: CommentListProps) => {
+export const CommentList = ({ postId, userId = 1, onEditComment }: CommentListProps) => {
   const { comments } = useGetComments(postId)
+  const { deleteComment, isLoading: isDeleting } = useDeleteCommentFeature()
+  const { likeComment, isLoading: isLiking } = useLikeCommentFeature()
+
+  const [showAddForm, setShowAddForm] = useState(false)
+
+  const handleDeleteComment = async (id: number) => {
+    const result = await deleteComment(id)
+    if (result.success) {
+      // 삭제 성공 시 별도 처리 불필요 (React Query가 자동으로 처리)
+    }
+  }
+
+  const handleLikeComment = async (id: number) => {
+    const result = await likeComment(id)
+    if (result.success) {
+      // 좋아요 성공 시 별도 처리 불필요 (React Query가 자동으로 처리)
+    }
+  }
+
+  const handleAddSuccess = () => {
+    setShowAddForm(false)
+  }
 
   return (
-    <div className="mt-2">
-      <div className="flex items-center justify-between mb-2">
-        <h3 className="text-sm font-semibold">댓글</h3>
-        <Button size="sm" onClick={onAddComment}>
-          <Plus className="w-3 h-3 mr-1" />
-          댓글 추가
+    <div className="mt-4 space-y-4">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold">댓글 ({comments.length})</h3>
+        <Button size="sm" onClick={() => setShowAddForm(!showAddForm)} variant={showAddForm ? "outline" : "default"}>
+          {showAddForm ? (
+            <>
+              <X className="w-4 h-4 mr-1" />
+              취소
+            </>
+          ) : (
+            <>
+              <Plus className="w-4 h-4 mr-1" />
+              댓글 추가
+            </>
+          )}
         </Button>
       </div>
-      <div className="space-y-1">
+
+      {/* 댓글 추가 폼 */}
+      {showAddForm && (
+        <div className="border rounded-lg p-4 bg-gray-50">
+          <CommentInputForm
+            postId={postId}
+            userId={userId}
+            onSuccess={handleAddSuccess}
+            onCancel={() => setShowAddForm(false)}
+          />
+        </div>
+      )}
+
+      {/* 댓글 목록 */}
+      <div className="space-y-3">
         {comments.map((comment) => (
-          <div key={comment.id} className="flex items-center justify-between text-sm border-b pb-1">
-            <div className="flex items-center space-x-2 overflow-hidden">
-              <span className="font-medium truncate">{comment.user.username}:</span>
-              <span className="truncate">{comment.body}</span>
-            </div>
-            <div className="flex items-center space-x-1">
-              <Button variant="ghost" size="sm" onClick={() => comment.id && onLikeComment(comment.id)}>
-                <ThumbsUp className="w-3 h-3" />
-                <span className="ml-1 text-xs">{comment.likes}</span>
-              </Button>
-              <Button variant="ghost" size="sm" onClick={() => comment.id && onEditComment(comment)}>
-                <Edit2 className="w-3 h-3" />
-              </Button>
-              <Button variant="ghost" size="sm" onClick={() => comment.id && onDeleteComment(comment.id)}>
-                <Trash2 className="w-3 h-3" />
-              </Button>
+          <div key={comment.id} className="border rounded-lg p-3">
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-2">
+                  <span className="font-medium text-sm">{comment.user.username}</span>
+                  <span className="text-xs text-gray-500">{new Date().toLocaleDateString()}</span>
+                </div>
+                <div className="flex items-center space-x-1">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleLikeComment(comment.id)}
+                    disabled={isLiking}
+                    className="h-8 px-2"
+                  >
+                    <ThumbsUp className="w-4 h-4" />
+                    <span className="ml-1 text-xs">{comment.likes}</span>
+                  </Button>
+                  <Button variant="ghost" size="sm" onClick={() => onEditComment?.(comment)} className="h-8 px-2">
+                    <Edit2 className="w-4 h-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleDeleteComment(comment.id)}
+                    disabled={isDeleting}
+                    className="h-8 px-2 text-red-600 hover:text-red-700"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </Button>
+                </div>
+              </div>
+              <p className="text-sm text-gray-700">{comment.body}</p>
             </div>
           </div>
         ))}
+
+        {comments.length === 0 && !showAddForm && (
+          <div className="text-center text-gray-500 py-8">아직 댓글이 없습니다. 첫 번째 댓글을 작성해보세요!</div>
+        )}
       </div>
     </div>
   )
diff --git a/src/widget/comment-list/index.ts b/src/widget/comment-list/index.ts
new file mode 100644
index 000000000..871419504
--- /dev/null
+++ b/src/widget/comment-list/index.ts
@@ -0,0 +1,3 @@
+export { CommentList } from "./CommentList"
+export { CommentInputForm } from "./CommentInputForm"
+export { CommentEditForm } from "./CommentEditForm"

From 573ab90e52c7469377ce2c91fc8c5ff254299b3e Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Fri, 15 Aug 2025 04:59:24 +0900
Subject: [PATCH 28/34] =?UTF-8?q?refactor:=20=EB=8C=93=EA=B8=80=20?=
 =?UTF-8?q?=ED=9B=85=EC=97=90=EC=84=9C=20=EC=BA=90=EC=8B=9C=20=EB=AC=B4?=
 =?UTF-8?q?=ED=9A=A8=ED=99=94=20=EB=A1=9C=EC=A7=81=20=EC=A0=9C=EA=B1=B0=20?=
 =?UTF-8?q?=EB=B0=8F=20setQueryData=EB=A1=9C=20=EC=A7=81=EC=A0=91=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC,=20=EB=8C=93=EA=B8=80=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/comment/model/hooks.ts        |  33 +-
 src/features/comment/add-comments/hooks.ts |   6 +-
 src/pages/PostsManagerPage.tsx             | 334 +++++++++++++--------
 src/widget/comment-list/CommentList.tsx    |   4 -
 4 files changed, 223 insertions(+), 154 deletions(-)

diff --git a/src/entities/comment/model/hooks.ts b/src/entities/comment/model/hooks.ts
index 171dd76bb..ac0f561a9 100644
--- a/src/entities/comment/model/hooks.ts
+++ b/src/entities/comment/model/hooks.ts
@@ -1,4 +1,4 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import { useMutation, useQuery } from "@tanstack/react-query"
 import CommentAPI from "../api/CommentAPI"
 import { CreateComment, UpdateComment } from "./types"
 
@@ -10,50 +10,29 @@ export const useComments = (postId: number) => {
 }
 
 export const useCreateComment = () => {
-  const queryClient = useQueryClient()
-
   return useMutation({
     mutationFn: (comment: CreateComment) => CommentAPI.createComment(comment),
-    onSuccess: (_, variables) => {
-      // 댓글 추가 후 해당 게시물의 댓글 목록 캐시 무효화
-      queryClient.invalidateQueries({ queryKey: ["comments", variables.postId] })
-    },
+    // invalidateQueries 제거 - setQueryData로 직접 처리
   })
 }
 
 export const useUpdateComment = () => {
-  const queryClient = useQueryClient()
-
   return useMutation({
-    mutationFn: ({ id, comment, postId }: { id: number; comment: UpdateComment; postId: number }) =>
-      CommentAPI.updateComment(id, comment),
-    onSuccess: (_, variables) => {
-      // 댓글 수정 후 해당 게시물의 댓글 목록 캐시 무효화
-      queryClient.invalidateQueries({ queryKey: ["comments", variables.postId] })
-    },
+    mutationFn: ({ id, comment }: { id: number; comment: UpdateComment }) => CommentAPI.updateComment(id, comment),
+    // invalidateQueries 제거 - setQueryData로 직접 처리
   })
 }
 
 export const useDeleteComment = () => {
-  const queryClient = useQueryClient()
-
   return useMutation({
     mutationFn: (id: number) => CommentAPI.deleteComment(id),
-    onSuccess: () => {
-      // 댓글 삭제 후 모든 댓글 목록 캐시 무효화
-      queryClient.invalidateQueries({ queryKey: ["comments"] })
-    },
+    // invalidateQueries 제거 - setQueryData로 직접 처리
   })
 }
 
 export const useLikeComment = () => {
-  const queryClient = useQueryClient()
-
   return useMutation({
     mutationFn: (id: number) => CommentAPI.likeComment(id),
-    onSuccess: () => {
-      // 댓글 좋아요 후 모든 댓글 목록 캐시 무효화
-      queryClient.invalidateQueries({ queryKey: ["comments"] })
-    },
+    // invalidateQueries 제거 - setQueryData로 직접 처리
   })
 }
diff --git a/src/features/comment/add-comments/hooks.ts b/src/features/comment/add-comments/hooks.ts
index 02bb8650b..e693b539a 100644
--- a/src/features/comment/add-comments/hooks.ts
+++ b/src/features/comment/add-comments/hooks.ts
@@ -1,13 +1,13 @@
 import { useCreateComment } from "../../../entities/comment/model/hooks"
-import { CreateComment } from "../../../entities/comment/model/types"
+import { CreateComment, Comment } from "../../../entities/comment/model/types"
 
 export const useAddComment = () => {
   const createCommentMutation = useCreateComment()
 
   const addComment = async (comment: CreateComment) => {
     try {
-      await createCommentMutation.mutateAsync(comment)
-      return { success: true }
+      const result = await createCommentMutation.mutateAsync(comment)
+      return { success: true, data: result }
     } catch (error) {
       console.error("댓글 추가 오류:", error)
       return { success: false, error }
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index d11acfdbe..9f86a7ac5 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react"
+import { useEffect, useState, memo, useCallback } from "react"
 import { Plus } from "lucide-react"
 import { useLocation, useNavigate } from "react-router-dom"
 import { useQueryClient } from "@tanstack/react-query"
@@ -33,6 +33,7 @@ import { Comment } from "../entities/comment/model/types"
 import { useGetComments } from "../features/comment/get-comments/hooks"
 import { useDeleteCommentFeature } from "../features/comment/del-comments/hooks"
 import { useLikeCommentFeature } from "../features/comment/like-comments/hooks"
+import { useAddComment } from "../features/comment/add-comments/hooks"
 import { Edit2, ThumbsUp, Trash2 } from "lucide-react"
 
 // PostItem에 author 속성이 추가된 타입
@@ -48,100 +49,102 @@ interface CommentForm {
 }
 
 // 댓글 목록 컴포넌트
-const CommentSection = ({
-  postId,
-  onAddComment,
-  onEditComment,
-}: {
-  postId: number
-  onAddComment: () => void
-  onEditComment: (comment: Comment) => void
-}) => {
-  const { comments } = useGetComments(postId)
-  const { deleteComment, isLoading: isDeleting } = useDeleteCommentFeature()
-  const { likeComment, isLoading: isLiking } = useLikeCommentFeature()
-  const queryClient = useQueryClient()
-
-  console.log("CommentSection 렌더링:", { postId, commentsCount: comments.length, isDeleting, isLiking })
-
-  const handleDeleteComment = async (id: number) => {
-    console.log("댓글 삭제 시도:", id)
-    const result = await deleteComment(id)
-    console.log("댓글 삭제 결과:", result)
-    if (result.success) {
-      console.log("댓글 삭제 성공!")
-
-      // setQueryData를 사용하여 댓글 캐시에서 삭제된 댓글 제거
-      queryClient.setQueryData(["comments", postId], (oldData: { comments: Comment[] } | undefined) => {
-        if (!oldData) return oldData
+const CommentSection = memo(
+  ({
+    postId,
+    onAddComment,
+    onEditComment,
+  }: {
+    postId: number
+    onAddComment: () => void
+    onEditComment: (comment: Comment) => void
+  }) => {
+    const { comments } = useGetComments(postId)
+    const { deleteComment, isLoading: isDeleting } = useDeleteCommentFeature()
+    const { likeComment, isLoading: isLiking } = useLikeCommentFeature()
+    const queryClient = useQueryClient()
+
+    console.log("CommentSection 렌더링:", { postId, commentsCount: comments.length, isDeleting, isLiking })
+
+    const handleDeleteComment = async (id: number) => {
+      console.log("댓글 삭제 시도:", id)
+      const result = await deleteComment(id)
+      console.log("댓글 삭제 결과:", result)
+      if (result.success) {
+        console.log("댓글 삭제 성공!")
+
+        // setQueryData를 사용하여 댓글 캐시에서 삭제된 댓글 제거
+        queryClient.setQueryData(["comments", postId], (oldData: { comments: Comment[] } | undefined) => {
+          if (!oldData) return oldData
 
-        return {
-          ...oldData,
-          comments: oldData.comments.filter((comment: Comment) => comment.id !== id),
-        }
-      })
-    } else {
-      console.error("댓글 삭제 실패:", result.error)
+          return {
+            ...oldData,
+            comments: oldData.comments.filter((comment: Comment) => comment.id !== id),
+          }
+        })
+      } else {
+        console.error("댓글 삭제 실패:", result.error)
+      }
     }
-  }
 
-  const handleLikeComment = async (id: number) => {
-    console.log("댓글 좋아요 시도:", id)
-    const result = await likeComment(id)
-    console.log("댓글 좋아요 결과:", result)
-    if (result.success) {
-      console.log("댓글 좋아요 성공!")
+    const handleLikeComment = async (id: number) => {
+      console.log("댓글 좋아요 시도:", id)
+      const result = await likeComment(id)
+      console.log("댓글 좋아요 결과:", result)
+      if (result.success) {
+        console.log("댓글 좋아요 성공!")
 
-      // setQueryData를 사용하여 댓글 캐시에서 좋아요 수 증가
-      queryClient.setQueryData(["comments", postId], (oldData: { comments: Comment[] } | undefined) => {
-        if (!oldData) return oldData
+        // setQueryData를 사용하여 댓글 캐시에서 좋아요 수 증가
+        queryClient.setQueryData(["comments", postId], (oldData: { comments: Comment[] } | undefined) => {
+          if (!oldData) return oldData
 
-        return {
-          ...oldData,
-          comments: oldData.comments.map((comment: Comment) =>
-            comment.id === id ? { ...comment, likes: comment.likes + 1 } : comment,
-          ),
-        }
-      })
-    } else {
-      console.error("댓글 좋아요 실패:", result.error)
+          return {
+            ...oldData,
+            comments: oldData.comments.map((comment: Comment) =>
+              comment.id === id ? { ...comment, likes: comment.likes + 1 } : comment,
+            ),
+          }
+        })
+      } else {
+        console.error("댓글 좋아요 실패:", result.error)
+      }
     }
-  }
 
-  return (
-    <div className="mt-2">
-      <div className="flex items-center justify-between mb-2">
-        <h3 className="text-sm font-semibold">댓글</h3>
-        <Button size="sm" onClick={onAddComment}>
-          <Plus className="w-3 h-3 mr-1" />
-          댓글 추가
-        </Button>
-      </div>
-      <div className="space-y-1">
-        {comments.map((comment) => (
-          <div key={comment.id} className="flex items-center justify-between text-sm border-b pb-1">
-            <div className="flex items-center space-x-2 overflow-hidden">
-              <span className="font-medium truncate">{comment.user.username}:</span>
-              <span className="truncate">{comment.body}</span>
-            </div>
-            <div className="flex items-center space-x-1">
-              <Button variant="ghost" size="sm" onClick={() => handleLikeComment(comment.id)} disabled={isLiking}>
-                <ThumbsUp className="w-3 h-3" />
-                <span className="ml-1 text-xs">{comment.likes}</span>
-              </Button>
-              <Button variant="ghost" size="sm" onClick={() => onEditComment(comment)}>
-                <Edit2 className="w-3 h-3" />
-              </Button>
-              <Button variant="ghost" size="sm" onClick={() => handleDeleteComment(comment.id)} disabled={isDeleting}>
-                <Trash2 className="w-3 h-3" />
-              </Button>
+    return (
+      <div className="mt-2">
+        <div className="flex items-center justify-between mb-2">
+          <h3 className="text-sm font-semibold">댓글</h3>
+          <Button size="sm" onClick={onAddComment}>
+            <Plus className="w-3 h-3 mr-1" />
+            댓글 추가
+          </Button>
+        </div>
+        <div className="space-y-1">
+          {comments.map((comment) => (
+            <div key={comment.id} className="flex items-center justify-between text-sm border-b pb-1">
+              <div className="flex items-center space-x-2 overflow-hidden">
+                <span className="font-medium truncate">{comment.user.username}:</span>
+                <span className="truncate">{comment.body}</span>
+              </div>
+              <div className="flex items-center space-x-1">
+                <Button variant="ghost" size="sm" onClick={() => handleLikeComment(comment.id)} disabled={isLiking}>
+                  <ThumbsUp className="w-3 h-3" />
+                  <span className="ml-1 text-xs">{comment.likes}</span>
+                </Button>
+                <Button variant="ghost" size="sm" onClick={() => onEditComment(comment)}>
+                  <Edit2 className="w-3 h-3" />
+                </Button>
+                <Button variant="ghost" size="sm" onClick={() => handleDeleteComment(comment.id)} disabled={isDeleting}>
+                  <Trash2 className="w-3 h-3" />
+                </Button>
+              </div>
             </div>
-          </div>
-        ))}
+          ))}
+        </div>
       </div>
-    </div>
-  )
-}
+    )
+  },
+)
 
 const PostsManager = () => {
   const navigate = useNavigate()
@@ -222,22 +225,112 @@ const PostsManager = () => {
     }
   }
 
+  // 댓글 추가 훅 사용
+  const { addComment: addCommentMutation, isLoading: isAddingComment } = useAddComment()
+
+  // 댓글 관련 콜백 함수들 메모이제이션
+  const handleAddComment = useCallback(() => {
+    if (selectedPost?.id) {
+      setNewComment({ body: "", postId: selectedPost.id, userId: 1 })
+      openAddCommentDialog()
+    }
+  }, [selectedPost?.id, openAddCommentDialog])
+
+  const handleEditComment = useCallback(
+    (comment: Comment) => {
+      setSelectedComment(comment)
+      openEditCommentDialog()
+    },
+    [openEditCommentDialog],
+  )
+
   // 댓글 추가
   const addComment = async () => {
     console.log("댓글 추가 시도:", newComment)
+
+    if (!newComment.body.trim() || !newComment.postId) {
+      console.error("댓글 내용이나 게시물 ID가 없습니다.")
+      return
+    }
+
     try {
-      // createComment
-      await fetch("/api/comments/add", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(newComment),
+      // 낙관적 업데이트: 댓글 추가 전에 임시 댓글을 UI에 표시
+      const tempComment: Comment = {
+        id: Date.now(), // 임시 ID
+        body: newComment.body,
+        postId: newComment.postId,
+        likes: 0,
+        user: {
+          id: newComment.userId,
+          username: "사용자",
+          fullName: "사용자",
+        },
+      }
+
+      // 임시 댓글을 캐시에 추가
+      queryClient.setQueryData(["comments", newComment.postId], (oldData: { comments: Comment[] } | undefined) => {
+        if (!oldData) return { comments: [tempComment] }
+
+        return {
+          ...oldData,
+          comments: [...oldData.comments, tempComment],
+        }
       })
-      console.log("댓글 추가 성공!")
-      closeAddCommentDialog()
-      setNewComment({ body: "", postId: null, userId: 1 })
-      // 댓글 추가 후 상세 보기 새로고침 (React Query가 자동으로 처리)
+
+      const result = (await addCommentMutation({
+        body: newComment.body,
+        postId: newComment.postId,
+        userId: newComment.userId,
+      })) as { success: boolean; data?: Comment; error?: unknown }
+
+      if (result.success) {
+        console.log("댓글 추가 성공!")
+        closeAddCommentDialog()
+        setNewComment({ body: "", postId: null, userId: 1 })
+
+        // API 재호출 없이 setQueryData로 실제 댓글 데이터로 업데이트
+        if (newComment.postId) {
+          queryClient.setQueryData(["comments", newComment.postId], (oldData: { comments: Comment[] } | undefined) => {
+            if (!oldData) return oldData
+
+            // 임시 댓글을 실제 댓글 데이터로 교체
+            return {
+              ...oldData,
+              comments: oldData.comments.map((comment) =>
+                comment.id === tempComment.id
+                  ? { ...comment, id: result.data?.id || comment.id } // 실제 ID로 교체
+                  : comment,
+              ),
+            }
+          })
+        }
+      } else {
+        console.error("댓글 추가 실패:", result.error)
+
+        // 실패 시 임시 댓글 제거
+        queryClient.setQueryData(["comments", newComment.postId], (oldData: { comments: Comment[] } | undefined) => {
+          if (!oldData) return oldData
+
+          return {
+            ...oldData,
+            comments: oldData.comments.filter((comment) => comment.id !== tempComment.id),
+          }
+        })
+      }
     } catch (error) {
       console.error("댓글 추가 오류:", error)
+
+      // 에러 시에도 임시 댓글 제거
+      if (newComment.postId) {
+        queryClient.setQueryData(["comments", newComment.postId], (oldData: { comments: Comment[] } | undefined) => {
+          if (!oldData) return oldData
+
+          return {
+            ...oldData,
+            comments: oldData.comments.filter((comment) => comment.id !== Date.now()),
+          }
+        })
+      }
     }
   }
 
@@ -247,29 +340,34 @@ const PostsManager = () => {
     try {
       if (!selectedComment) return
 
-      await fetch(`/api/comments/${selectedComment.id}`, {
+      // 댓글 수정 API 호출
+      const response = await fetch(`/api/comments/${selectedComment.id}`, {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ body: selectedComment.body }),
       })
-      console.log("댓글 수정 성공!")
 
-      // setQueryData를 사용하여 댓글 캐시만 직접 업데이트
-      if (selectedPost?.id) {
-        queryClient.setQueryData(["comments", selectedPost.id], (oldData: { comments: Comment[] } | undefined) => {
-          if (!oldData) return oldData
+      if (response.ok) {
+        console.log("댓글 수정 성공!")
+
+        // setQueryData를 사용하여 댓글 캐시만 직접 업데이트 (API 재호출 없음)
+        if (selectedPost?.id) {
+          queryClient.setQueryData(["comments", selectedPost.id], (oldData: { comments: Comment[] } | undefined) => {
+            if (!oldData) return oldData
+
+            return {
+              ...oldData,
+              comments: oldData.comments.map((comment: Comment) =>
+                comment.id === selectedComment.id ? { ...comment, body: selectedComment.body } : comment,
+              ),
+            }
+          })
+        }
 
-          return {
-            ...oldData,
-            comments: oldData.comments.map((comment: Comment) =>
-              comment.id === selectedComment.id ? { ...comment, body: selectedComment.body } : comment,
-            ),
-          }
-        })
+        closeEditCommentDialog()
+      } else {
+        console.error("댓글 수정 실패:", response.statusText)
       }
-
-      closeEditCommentDialog()
-      // 댓글 업데이트 후 상세 보기 새로고침 (React Query가 자동으로 처리)
     } catch (error) {
       console.error("댓글 업데이트 오류:", error)
     }
@@ -463,7 +561,9 @@ const PostsManager = () => {
               value={newComment.body}
               onChange={(e) => setNewComment({ ...newComment, body: e.target.value })}
             />
-            <Button onClick={addComment}>댓글 추가</Button>
+            <Button onClick={addComment} disabled={isAddingComment}>
+              {isAddingComment ? "추가 중..." : "댓글 추가"}
+            </Button>
           </div>
         </DialogContent>
       </Dialog>
@@ -514,14 +614,8 @@ const PostsManager = () => {
             {selectedPost?.id && (
               <CommentSection
                 postId={selectedPost.id}
-                onAddComment={() => {
-                  setNewComment({ ...newComment, postId: selectedPost.id })
-                  openAddCommentDialog()
-                }}
-                onEditComment={(comment) => {
-                  setSelectedComment(comment)
-                  openEditCommentDialog()
-                }}
+                onAddComment={handleAddComment}
+                onEditComment={handleEditComment}
               />
             )}
           </div>
diff --git a/src/widget/comment-list/CommentList.tsx b/src/widget/comment-list/CommentList.tsx
index ba5b8522d..cd0c25701 100644
--- a/src/widget/comment-list/CommentList.tsx
+++ b/src/widget/comment-list/CommentList.tsx
@@ -108,10 +108,6 @@ export const CommentList = ({ postId, userId = 1, onEditComment }: CommentListPr
             </div>
           </div>
         ))}
-
-        {comments.length === 0 && !showAddForm && (
-          <div className="text-center text-gray-500 py-8">아직 댓글이 없습니다. 첫 번째 댓글을 작성해보세요!</div>
-        )}
       </div>
     </div>
   )

From 5113747f4c8e3c4fa5e0054665ccc532334a68ab Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Fri, 15 Aug 2025 05:20:10 +0900
Subject: [PATCH 29/34] =?UTF-8?q?refactor:=20=EB=8C=93=EA=B8=80=20?=
 =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EB=B0=8F=20API=20=ED=83=80=EC=9E=85=20=EA=B0=9C=EC=84=A0,=20Po?=
 =?UTF-8?q?stsManagerPage=EC=97=90=EC=84=9C=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/comment/model/types.ts         |   1 -
 src/entities/user/api/UserAPI.ts            |   9 +-
 src/entities/user/model/hooks.ts            |  20 ++
 src/pages/PostsManagerPage.tsx              | 320 +++++---------------
 src/widget/comment-list/CommentAddForm.tsx  |  32 ++
 src/widget/comment-list/CommentEditForm.tsx |  47 ++-
 src/widget/comment-list/CommentSection.tsx  |  83 +++++
 src/widget/comment-list/index.ts            |   4 +-
 src/widget/index.ts                         |   6 +
 src/widget/pagination/Pagination.tsx        |  46 +++
 src/widget/pagination/index.ts              |   1 +
 src/widget/post-detail/PostDetailDialog.tsx |  31 ++
 src/widget/post-detail/index.ts             |   1 +
 src/widget/post-filter/index.ts             |   1 +
 src/widget/post-table/index.ts              |   1 +
 src/widget/user-info/UserInfoModal.tsx      |  36 +++
 src/widget/user-info/index.ts               |   1 +
 17 files changed, 358 insertions(+), 282 deletions(-)
 create mode 100644 src/entities/user/model/hooks.ts
 create mode 100644 src/widget/comment-list/CommentAddForm.tsx
 create mode 100644 src/widget/comment-list/CommentSection.tsx
 create mode 100644 src/widget/index.ts
 create mode 100644 src/widget/pagination/Pagination.tsx
 create mode 100644 src/widget/pagination/index.ts
 create mode 100644 src/widget/post-detail/PostDetailDialog.tsx
 create mode 100644 src/widget/post-detail/index.ts
 create mode 100644 src/widget/post-filter/index.ts
 create mode 100644 src/widget/post-table/index.ts
 create mode 100644 src/widget/user-info/UserInfoModal.tsx
 create mode 100644 src/widget/user-info/index.ts

diff --git a/src/entities/comment/model/types.ts b/src/entities/comment/model/types.ts
index 6105a3652..aa7a0ce5f 100644
--- a/src/entities/comment/model/types.ts
+++ b/src/entities/comment/model/types.ts
@@ -6,7 +6,6 @@ export interface Comment {
   user: {
     id: number
     username: string
-    fullName: string
   }
 }
 
diff --git a/src/entities/user/api/UserAPI.ts b/src/entities/user/api/UserAPI.ts
index 56c6d20ad..f9de87635 100644
--- a/src/entities/user/api/UserAPI.ts
+++ b/src/entities/user/api/UserAPI.ts
@@ -1,4 +1,5 @@
 import { ApiClient } from "../../../shared/api/api"
+import { User } from "../model/types"
 
 class UserAPI extends ApiClient {
   constructor() {
@@ -11,8 +12,8 @@ class UserAPI extends ApiClient {
    * @param select - 선택할 필드
    * @returns 사용자 목록
    */
-  async getUserList(limit: number, select: string) {
-    return await this.get(`?limit=${limit}&select=${select}`)
+  async getUserList(limit: number, select: string): Promise<User[]> {
+    return await this.get<User[]>(`?limit=${limit}&select=${select}`)
   }
 
   /**
@@ -20,8 +21,8 @@ class UserAPI extends ApiClient {
    * @param id - 사용자 ID
    * @returns 사용자 정보
    */
-  async getUserInfo(id: number) {
-    return await this.get(`/${id}`)
+  async getUserInfo(id: number): Promise<User> {
+    return await this.get<User>(`/${id}`)
   }
 }
 
diff --git a/src/entities/user/model/hooks.ts b/src/entities/user/model/hooks.ts
new file mode 100644
index 000000000..58999e75e
--- /dev/null
+++ b/src/entities/user/model/hooks.ts
@@ -0,0 +1,20 @@
+import { useQuery } from "@tanstack/react-query"
+import UserAPI from "../api/UserAPI"
+import { User } from "./types"
+
+/**
+ * 현재 로그인한 사용자 정보를 가져오는 훅
+ * 실제 구현에서는 인증 토큰이나 세션에서 사용자 ID를 가져와야 함
+ */
+export const useCurrentUser = () => {
+  // TODO: 실제 인증 시스템에서는 여기서 현재 사용자 ID를 가져와야 함
+  // 현재는 임시로 ID 1을 사용 (실제로는 인증 컨텍스트나 로컬 스토리지에서 가져와야 함)
+  const currentUserId = 1
+
+  return useQuery<User>({
+    queryKey: ["currentUser", currentUserId],
+    queryFn: () => UserAPI.getUserInfo(currentUserId),
+    staleTime: 5 * 60 * 1000, // 5분
+    gcTime: 10 * 60 * 1000, // 10분
+  })
+}
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 9f86a7ac5..fc1aa9337 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, memo, useCallback } from "react"
+import { useEffect, useState, useCallback } from "react"
 import { Plus } from "lucide-react"
 import { useLocation, useNavigate } from "react-router-dom"
 import { useQueryClient } from "@tanstack/react-query"
@@ -13,12 +13,6 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Textarea,
 } from "../shared/ui"
 import { useGetPosts } from "../features/post/get-posts/hooks"
 import { useDeletePost } from "../entities/post/model/hooks"
@@ -30,11 +24,9 @@ import { UpdatePostForm } from "../features/post/update-posts/UpdatePostForm"
 import { PostItem } from "../entities/post/model/types"
 import { User } from "../entities/user/model/types"
 import { Comment } from "../entities/comment/model/types"
-import { useGetComments } from "../features/comment/get-comments/hooks"
-import { useDeleteCommentFeature } from "../features/comment/del-comments/hooks"
-import { useLikeCommentFeature } from "../features/comment/like-comments/hooks"
 import { useAddComment } from "../features/comment/add-comments/hooks"
-import { Edit2, ThumbsUp, Trash2 } from "lucide-react"
+import { useCurrentUser } from "../entities/user/model/hooks"
+import { CommentAddForm, CommentEditForm, CommentSection, PostDetailDialog, UserInfoModal, Pagination } from "../widget"
 
 // PostItem에 author 속성이 추가된 타입
 interface PostWithAuthor extends PostItem {
@@ -48,110 +40,15 @@ interface CommentForm {
   userId: number
 }
 
-// 댓글 목록 컴포넌트
-const CommentSection = memo(
-  ({
-    postId,
-    onAddComment,
-    onEditComment,
-  }: {
-    postId: number
-    onAddComment: () => void
-    onEditComment: (comment: Comment) => void
-  }) => {
-    const { comments } = useGetComments(postId)
-    const { deleteComment, isLoading: isDeleting } = useDeleteCommentFeature()
-    const { likeComment, isLoading: isLiking } = useLikeCommentFeature()
-    const queryClient = useQueryClient()
-
-    console.log("CommentSection 렌더링:", { postId, commentsCount: comments.length, isDeleting, isLiking })
-
-    const handleDeleteComment = async (id: number) => {
-      console.log("댓글 삭제 시도:", id)
-      const result = await deleteComment(id)
-      console.log("댓글 삭제 결과:", result)
-      if (result.success) {
-        console.log("댓글 삭제 성공!")
-
-        // setQueryData를 사용하여 댓글 캐시에서 삭제된 댓글 제거
-        queryClient.setQueryData(["comments", postId], (oldData: { comments: Comment[] } | undefined) => {
-          if (!oldData) return oldData
-
-          return {
-            ...oldData,
-            comments: oldData.comments.filter((comment: Comment) => comment.id !== id),
-          }
-        })
-      } else {
-        console.error("댓글 삭제 실패:", result.error)
-      }
-    }
-
-    const handleLikeComment = async (id: number) => {
-      console.log("댓글 좋아요 시도:", id)
-      const result = await likeComment(id)
-      console.log("댓글 좋아요 결과:", result)
-      if (result.success) {
-        console.log("댓글 좋아요 성공!")
-
-        // setQueryData를 사용하여 댓글 캐시에서 좋아요 수 증가
-        queryClient.setQueryData(["comments", postId], (oldData: { comments: Comment[] } | undefined) => {
-          if (!oldData) return oldData
-
-          return {
-            ...oldData,
-            comments: oldData.comments.map((comment: Comment) =>
-              comment.id === id ? { ...comment, likes: comment.likes + 1 } : comment,
-            ),
-          }
-        })
-      } else {
-        console.error("댓글 좋아요 실패:", result.error)
-      }
-    }
-
-    return (
-      <div className="mt-2">
-        <div className="flex items-center justify-between mb-2">
-          <h3 className="text-sm font-semibold">댓글</h3>
-          <Button size="sm" onClick={onAddComment}>
-            <Plus className="w-3 h-3 mr-1" />
-            댓글 추가
-          </Button>
-        </div>
-        <div className="space-y-1">
-          {comments.map((comment) => (
-            <div key={comment.id} className="flex items-center justify-between text-sm border-b pb-1">
-              <div className="flex items-center space-x-2 overflow-hidden">
-                <span className="font-medium truncate">{comment.user.username}:</span>
-                <span className="truncate">{comment.body}</span>
-              </div>
-              <div className="flex items-center space-x-1">
-                <Button variant="ghost" size="sm" onClick={() => handleLikeComment(comment.id)} disabled={isLiking}>
-                  <ThumbsUp className="w-3 h-3" />
-                  <span className="ml-1 text-xs">{comment.likes}</span>
-                </Button>
-                <Button variant="ghost" size="sm" onClick={() => onEditComment(comment)}>
-                  <Edit2 className="w-3 h-3" />
-                </Button>
-                <Button variant="ghost" size="sm" onClick={() => handleDeleteComment(comment.id)} disabled={isDeleting}>
-                  <Trash2 className="w-3 h-3" />
-                </Button>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    )
-  },
-)
-
 const PostsManager = () => {
   const navigate = useNavigate()
   const location = useLocation()
   const queryParams = new URLSearchParams(location.search)
   const queryClient = useQueryClient()
 
+  // 현재 사용자 정보 가져오기
+  const { data: currentUser } = useCurrentUser()
+
   // Zustand store 사용
   const {
     showAddDialog,
@@ -178,7 +75,7 @@ const PostsManager = () => {
   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 [searchInputValue, setSearchInputValue] = useState(queryParams.get("search") || "") // 검색 입력값을 별도로 관리
+  const [searchInputValue, setSearchInputValue] = useState(queryParams.get("search") || "")
   const [selectedPost, setSelectedPost] = useState<PostWithAuthor | null>(null)
   const [sortBy, setSortBy] = useState(queryParams.get("sortBy") || "")
   const [sortOrder, setSortOrder] = useState(queryParams.get("sortOrder") || "asc")
@@ -203,10 +100,7 @@ const PostsManager = () => {
 
   // 게시물 검색
   const searchPosts = async () => {
-    if (!searchInputValue) {
-      return
-    }
-
+    if (!searchInputValue) return
     setSearchQuery(searchInputValue)
     setSelectedTag("")
     setSkip(0)
@@ -219,7 +113,6 @@ const PostsManager = () => {
   const deletePost = async (id: number) => {
     try {
       await deletePostMutation.mutateAsync(id)
-      // 캐시 업데이트는 useDeletePost 훅에서 자동으로 처리됨
     } catch (error) {
       console.error("게시물 삭제 오류:", error)
     }
@@ -246,31 +139,32 @@ const PostsManager = () => {
 
   // 댓글 추가
   const addComment = async () => {
-    console.log("댓글 추가 시도:", newComment)
-
     if (!newComment.body.trim() || !newComment.postId) {
       console.error("댓글 내용이나 게시물 ID가 없습니다.")
       return
     }
 
+    if (!currentUser) {
+      console.error("사용자 정보를 가져올 수 없습니다.")
+      return
+    }
+
     try {
       // 낙관적 업데이트: 댓글 추가 전에 임시 댓글을 UI에 표시
       const tempComment: Comment = {
-        id: Date.now(), // 임시 ID
+        id: Date.now(),
         body: newComment.body,
         postId: newComment.postId,
         likes: 0,
         user: {
-          id: newComment.userId,
-          username: "사용자",
-          fullName: "사용자",
+          id: currentUser.id,
+          username: currentUser.username,
         },
       }
 
       // 임시 댓글을 캐시에 추가
       queryClient.setQueryData(["comments", newComment.postId], (oldData: { comments: Comment[] } | undefined) => {
         if (!oldData) return { comments: [tempComment] }
-
         return {
           ...oldData,
           comments: [...oldData.comments, tempComment],
@@ -280,11 +174,10 @@ const PostsManager = () => {
       const result = (await addCommentMutation({
         body: newComment.body,
         postId: newComment.postId,
-        userId: newComment.userId,
+        userId: currentUser.id, // currentUser.id 사용
       })) as { success: boolean; data?: Comment; error?: unknown }
 
       if (result.success) {
-        console.log("댓글 추가 성공!")
         closeAddCommentDialog()
         setNewComment({ body: "", postId: null, userId: 1 })
 
@@ -292,55 +185,43 @@ const PostsManager = () => {
         if (newComment.postId) {
           queryClient.setQueryData(["comments", newComment.postId], (oldData: { comments: Comment[] } | undefined) => {
             if (!oldData) return oldData
-
-            // 임시 댓글을 실제 댓글 데이터로 교체
             return {
               ...oldData,
               comments: oldData.comments.map((comment) =>
-                comment.id === tempComment.id
-                  ? { ...comment, id: result.data?.id || comment.id } // 실제 ID로 교체
-                  : comment,
+                comment.id === tempComment.id ? { ...comment, id: result.data?.id || comment.id } : comment,
               ),
             }
           })
         }
       } else {
         console.error("댓글 추가 실패:", result.error)
-
         // 실패 시 임시 댓글 제거
-        queryClient.setQueryData(["comments", newComment.postId], (oldData: { comments: Comment[] } | undefined) => {
-          if (!oldData) return oldData
-
-          return {
-            ...oldData,
-            comments: oldData.comments.filter((comment) => comment.id !== tempComment.id),
-          }
-        })
+        removeTempComment(tempComment.id)
       }
     } catch (error) {
       console.error("댓글 추가 오류:", error)
+      removeTempComment(Date.now())
+    }
+  }
 
-      // 에러 시에도 임시 댓글 제거
-      if (newComment.postId) {
-        queryClient.setQueryData(["comments", newComment.postId], (oldData: { comments: Comment[] } | undefined) => {
-          if (!oldData) return oldData
-
-          return {
-            ...oldData,
-            comments: oldData.comments.filter((comment) => comment.id !== Date.now()),
-          }
-        })
-      }
+  // 임시 댓글 제거 헬퍼 함수
+  const removeTempComment = (tempId: number) => {
+    if (newComment.postId) {
+      queryClient.setQueryData(["comments", newComment.postId], (oldData: { comments: Comment[] } | undefined) => {
+        if (!oldData) return oldData
+        return {
+          ...oldData,
+          comments: oldData.comments.filter((comment) => comment.id !== tempId),
+        }
+      })
     }
   }
 
   // 댓글 업데이트
   const updateComment = async () => {
-    console.log("댓글 수정 시도:", selectedComment)
-    try {
-      if (!selectedComment) return
+    if (!selectedComment) return
 
-      // 댓글 수정 API 호출
+    try {
       const response = await fetch(`/api/comments/${selectedComment.id}`, {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
@@ -348,13 +229,10 @@ const PostsManager = () => {
       })
 
       if (response.ok) {
-        console.log("댓글 수정 성공!")
-
-        // setQueryData를 사용하여 댓글 캐시만 직접 업데이트 (API 재호출 없음)
+        // setQueryData를 사용하여 댓글 캐시만 직접 업데이트
         if (selectedPost?.id) {
           queryClient.setQueryData(["comments", selectedPost.id], (oldData: { comments: Comment[] } | undefined) => {
             if (!oldData) return oldData
-
             return {
               ...oldData,
               comments: oldData.comments.map((comment: Comment) =>
@@ -363,7 +241,6 @@ const PostsManager = () => {
             }
           })
         }
-
         closeEditCommentDialog()
       } else {
         console.error("댓글 수정 실패:", response.statusText)
@@ -375,16 +252,13 @@ const PostsManager = () => {
 
   // 게시물 상세 보기
   const openPostDetail = (post: PostWithAuthor) => {
-    console.log("openPostDetail 호출됨:", post)
     setSelectedPost(post)
     openPostDetailDialog()
-    console.log("showPostDetailDialog 상태:", showPostDetailDialog)
   }
 
   // 사용자 모달 열기
   const handleOpenUserModal = async (user: User) => {
     try {
-      // getUserInfo
       const response = await fetch(`/api/users/${user.id}`)
       const userData = await response.json()
       setSelectedUser(userData)
@@ -394,6 +268,16 @@ const PostsManager = () => {
     }
   }
 
+  // 페이지네이션 핸들러
+  const handleSkipChange = (newSkip: number) => {
+    setSkip(newSkip)
+  }
+
+  const handleLimitChange = (newLimit: number) => {
+    setLimit(newLimit)
+    setSkip(0) // 페이지 크기 변경 시 첫 페이지로 이동
+  }
+
   useEffect(() => {
     updateURL()
   }, [skip, limit, sortBy, sortOrder, selectedTag, searchQuery])
@@ -408,15 +292,6 @@ const PostsManager = () => {
     setSelectedTag(params.get("tag") || "")
   }, [location.search])
 
-  // 디버깅을 위한 상태 변화 추적
-  useEffect(() => {
-    console.log("showPostDetailDialog 상태 변화:", showPostDetailDialog)
-  }, [showPostDetailDialog])
-
-  useEffect(() => {
-    console.log("selectedPost 상태 변화:", selectedPost)
-  }, [selectedPost])
-
   return (
     <Card className="w-full max-w-6xl mx-auto">
       <CardHeader>
@@ -440,15 +315,15 @@ const PostsManager = () => {
             onSelectedTagChange={(value) => {
               setSelectedTag(value)
               setSearchQuery("")
-              setSkip(0) // 태그 변경 시 첫 페이지로 이동
+              setSkip(0)
             }}
             onSortByChange={(value) => {
               setSortBy(value)
-              setSkip(0) // 정렬 변경 시 첫 페이지로 이동
+              setSkip(0)
             }}
             onSortOrderChange={(value) => {
               setSortOrder(value)
-              setSkip(0) // 정렬 순서 변경 시 첫 페이지로 이동
+              setSkip(0)
             }}
             onSearch={searchPosts}
           />
@@ -475,30 +350,13 @@ 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))}>
-                <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>
-            </div>
-          </div>
+          <Pagination
+            skip={skip}
+            limit={limit}
+            total={total}
+            onSkipChange={handleSkipChange}
+            onLimitChange={handleLimitChange}
+          />
         </div>
       </CardContent>
 
@@ -555,16 +413,12 @@ const PostsManager = () => {
           <DialogHeader>
             <DialogTitle>새 댓글 추가</DialogTitle>
           </DialogHeader>
-          <div className="space-y-4">
-            <Textarea
-              placeholder="댓글 내용"
-              value={newComment.body}
-              onChange={(e) => setNewComment({ ...newComment, body: e.target.value })}
-            />
-            <Button onClick={addComment} disabled={isAddingComment}>
-              {isAddingComment ? "추가 중..." : "댓글 추가"}
-            </Button>
-          </div>
+          <CommentAddForm
+            comment={newComment}
+            onCommentChange={setNewComment}
+            onSubmit={addComment}
+            isLoading={isAddingComment}
+          />
         </DialogContent>
       </Dialog>
 
@@ -583,19 +437,12 @@ const PostsManager = () => {
           <DialogHeader>
             <DialogTitle>댓글 수정</DialogTitle>
           </DialogHeader>
-          <div className="space-y-4">
-            <Textarea
-              placeholder="댓글 내용"
-              value={selectedComment?.body || ""}
-              onChange={(e) => selectedComment && setSelectedComment({ ...selectedComment, body: e.target.value })}
-            />
-            <Button onClick={updateComment}>댓글 업데이트</Button>
-          </div>
+          <CommentEditForm comment={selectedComment} onCommentChange={setSelectedComment} onSubmit={updateComment} />
         </DialogContent>
       </Dialog>
 
       {/* 게시물 상세 보기 대화상자 */}
-      <Dialog
+      <PostDetailDialog
         open={showPostDetailDialog}
         onOpenChange={(open) => {
           if (open) {
@@ -604,26 +451,13 @@ const PostsManager = () => {
             closePostDetailDialog()
           }
         }}
-      >
-        <DialogContent className="max-w-3xl">
-          <DialogHeader>
-            <DialogTitle>{selectedPost?.title}</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <p>{selectedPost?.body}</p>
-            {selectedPost?.id && (
-              <CommentSection
-                postId={selectedPost.id}
-                onAddComment={handleAddComment}
-                onEditComment={handleEditComment}
-              />
-            )}
-          </div>
-        </DialogContent>
-      </Dialog>
+        post={selectedPost}
+        onAddComment={handleAddComment}
+        onEditComment={handleEditComment}
+      />
 
       {/* 사용자 모달 */}
-      <Dialog
+      <UserInfoModal
         open={showUserModal}
         onOpenChange={(open) => {
           if (open) {
@@ -632,22 +466,8 @@ const PostsManager = () => {
             closeUserModal()
           }
         }}
-      >
-        <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" />
-            <h3 className="text-xl font-semibold text-center">{selectedUser?.username}</h3>
-            <div className="space-y-2">
-              <p>
-                <strong>사용자 ID:</strong> {selectedUser?.id}
-              </p>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
+        user={selectedUser}
+      />
     </Card>
   )
 }
diff --git a/src/widget/comment-list/CommentAddForm.tsx b/src/widget/comment-list/CommentAddForm.tsx
new file mode 100644
index 000000000..eda0e7cb1
--- /dev/null
+++ b/src/widget/comment-list/CommentAddForm.tsx
@@ -0,0 +1,32 @@
+import { Button, Textarea } from "../../shared/ui"
+import { Comment } from "../../entities/comment/model/types"
+
+interface CommentAddFormProps {
+  comment: { body: string; postId: number | null; userId: number }
+  onCommentChange: (comment: { body: string; postId: number | null; userId: number }) => void
+  onSubmit: () => void
+  isLoading: boolean
+}
+
+export const CommentAddForm = ({ comment, onCommentChange, onSubmit, isLoading }: CommentAddFormProps) => {
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (comment.body.trim() && comment.postId) {
+      onSubmit()
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <Textarea
+        placeholder="댓글 내용"
+        value={comment.body}
+        onChange={(e) => onCommentChange({ ...comment, body: e.target.value })}
+        required
+      />
+      <Button type="submit" disabled={isLoading || !comment.body.trim() || !comment.postId}>
+        {isLoading ? "추가 중..." : "댓글 추가"}
+      </Button>
+    </form>
+  )
+}
diff --git a/src/widget/comment-list/CommentEditForm.tsx b/src/widget/comment-list/CommentEditForm.tsx
index 68c69ae17..472110192 100644
--- a/src/widget/comment-list/CommentEditForm.tsx
+++ b/src/widget/comment-list/CommentEditForm.tsx
@@ -1,38 +1,33 @@
-import { useState, useEffect } from "react"
 import { Button, Textarea } from "../../shared/ui"
-import { useUpdateCommentFeature } from "../../features/comment/update-comments/hooks"
-import { Comment, UpdateComment } from "../../entities/comment/model/types"
+import { Comment } from "../../entities/comment/model/types"
 
 interface CommentEditFormProps {
-  comment: Comment
-  onSuccess?: () => void
+  comment: Comment | null
+  onCommentChange: (comment: Comment | null) => void
+  onSubmit: () => void
 }
 
-export const CommentEditForm = ({ comment, onSuccess }: CommentEditFormProps) => {
-  const [body, setBody] = useState(comment.body)
-  const { updateComment } = useUpdateCommentFeature()
+export const CommentEditForm = ({ comment, onCommentChange, onSubmit }: CommentEditFormProps) => {
+  if (!comment) return null
 
-  useEffect(() => {
-    setBody(comment.body)
-  }, [comment.body])
-
-  const handleSubmit = async () => {
-    if (!body.trim()) return
-
-    const updateData: UpdateComment = {
-      body: body.trim(),
-    }
-
-    const result = await updateComment(comment.id, updateData, comment.postId)
-    if (result.success) {
-      onSuccess?.()
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (comment.body.trim()) {
+      onSubmit()
     }
   }
 
   return (
-    <div className="space-y-4">
-      <Textarea placeholder="댓글 내용" value={body} onChange={(e) => setBody(e.target.value)} />
-      <Button onClick={handleSubmit}>댓글 업데이트</Button>
-    </div>
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <Textarea
+        placeholder="댓글 내용"
+        value={comment.body}
+        onChange={(e) => onCommentChange({ ...comment, body: e.target.value })}
+        required
+      />
+      <Button type="submit" disabled={!comment.body.trim()}>
+        댓글 업데이트
+      </Button>
+    </form>
   )
 }
diff --git a/src/widget/comment-list/CommentSection.tsx b/src/widget/comment-list/CommentSection.tsx
new file mode 100644
index 000000000..239f17f6e
--- /dev/null
+++ b/src/widget/comment-list/CommentSection.tsx
@@ -0,0 +1,83 @@
+import { memo } from "react"
+import { Plus, Edit2, ThumbsUp, Trash2 } from "lucide-react"
+import { Button } from "../../shared/ui"
+import { Comment } from "../../entities/comment/model/types"
+import { useGetComments } from "../../features/comment/get-comments/hooks"
+import { useDeleteCommentFeature } from "../../features/comment/del-comments/hooks"
+import { useLikeCommentFeature } from "../../features/comment/like-comments/hooks"
+import { useQueryClient } from "@tanstack/react-query"
+
+interface CommentSectionProps {
+  postId: number
+  onAddComment: () => void
+  onEditComment: (comment: Comment) => void
+}
+
+export const CommentSection = memo(({ postId, onAddComment, onEditComment }: CommentSectionProps) => {
+  const { comments } = useGetComments(postId)
+  const { deleteComment, isLoading: isDeleting } = useDeleteCommentFeature()
+  const { likeComment, isLoading: isLiking } = useLikeCommentFeature()
+  const queryClient = useQueryClient()
+
+  const handleDeleteComment = async (id: number) => {
+    const result = await deleteComment(id)
+    if (result.success) {
+      queryClient.setQueryData(["comments", postId], (oldData: { comments: Comment[] } | undefined) => {
+        if (!oldData) return oldData
+        return {
+          ...oldData,
+          comments: oldData.comments.filter((comment: Comment) => comment.id !== id),
+        }
+      })
+    }
+  }
+
+  const handleLikeComment = async (id: number) => {
+    const result = await likeComment(id)
+    if (result.success) {
+      queryClient.setQueryData(["comments", postId], (oldData: { comments: Comment[] } | undefined) => {
+        if (!oldData) return oldData
+        return {
+          ...oldData,
+          comments: oldData.comments.map((comment: Comment) =>
+            comment.id === id ? { ...comment, likes: comment.likes + 1 } : comment,
+          ),
+        }
+      })
+    }
+  }
+
+  return (
+    <div className="mt-2">
+      <div className="flex items-center justify-between mb-2">
+        <h3 className="text-sm font-semibold">댓글</h3>
+        <Button size="sm" onClick={onAddComment}>
+          <Plus className="w-3 h-3 mr-1" />
+          댓글 추가
+        </Button>
+      </div>
+      <div className="space-y-1">
+        {comments.map((comment) => (
+          <div key={comment.id} className="flex items-center justify-between text-sm border-b pb-1">
+            <div className="flex items-center space-x-2 overflow-hidden">
+              <span className="font-medium truncate">{comment.user.username}:</span>
+              <span className="truncate">{comment.body}</span>
+            </div>
+            <div className="flex items-center space-x-1">
+              <Button variant="ghost" size="sm" onClick={() => handleLikeComment(comment.id)} disabled={isLiking}>
+                <ThumbsUp className="w-3 h-3" />
+                <span className="ml-1 text-xs">{comment.likes}</span>
+              </Button>
+              <Button variant="ghost" size="sm" onClick={() => onEditComment(comment)}>
+                <Edit2 className="w-3 h-3" />
+              </Button>
+              <Button variant="ghost" size="sm" onClick={() => handleDeleteComment(comment.id)} disabled={isDeleting}>
+                <Trash2 className="w-3 h-3" />
+              </Button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+})
diff --git a/src/widget/comment-list/index.ts b/src/widget/comment-list/index.ts
index 871419504..41e58dd7a 100644
--- a/src/widget/comment-list/index.ts
+++ b/src/widget/comment-list/index.ts
@@ -1,3 +1,5 @@
 export { CommentList } from "./CommentList"
-export { CommentInputForm } from "./CommentInputForm"
 export { CommentEditForm } from "./CommentEditForm"
+export { CommentInputForm } from "./CommentInputForm"
+export { CommentAddForm } from "./CommentAddForm"
+export { CommentSection } from "./CommentSection"
diff --git a/src/widget/index.ts b/src/widget/index.ts
new file mode 100644
index 000000000..7c2452fab
--- /dev/null
+++ b/src/widget/index.ts
@@ -0,0 +1,6 @@
+export * from "./comment-list"
+export * from "./post-filter"
+export * from "./post-table"
+export * from "./post-detail"
+export * from "./user-info"
+export * from "./pagination"
diff --git a/src/widget/pagination/Pagination.tsx b/src/widget/pagination/Pagination.tsx
new file mode 100644
index 000000000..2bb19ecc6
--- /dev/null
+++ b/src/widget/pagination/Pagination.tsx
@@ -0,0 +1,46 @@
+import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../shared/ui"
+
+interface PaginationProps {
+  skip: number
+  limit: number
+  total: number
+  onSkipChange: (skip: number) => void
+  onLimitChange: (limit: number) => void
+}
+
+export const Pagination = ({ skip, limit, total, onSkipChange, onLimitChange }: PaginationProps) => {
+  const handlePrevious = () => {
+    onSkipChange(Math.max(0, skip - limit))
+  }
+
+  const handleNext = () => {
+    onSkipChange(skip + limit)
+  }
+
+  return (
+    <div className="flex justify-between items-center">
+      <div className="flex items-center gap-2">
+        <span>표시</span>
+        <Select value={limit.toString()} onValueChange={(value) => onLimitChange(Number(value))}>
+          <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={handlePrevious}>
+          이전
+        </Button>
+        <Button disabled={skip + limit >= total} onClick={handleNext}>
+          다음
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/widget/pagination/index.ts b/src/widget/pagination/index.ts
new file mode 100644
index 000000000..a279b8462
--- /dev/null
+++ b/src/widget/pagination/index.ts
@@ -0,0 +1 @@
+export { Pagination } from "./Pagination"
diff --git a/src/widget/post-detail/PostDetailDialog.tsx b/src/widget/post-detail/PostDetailDialog.tsx
new file mode 100644
index 000000000..ed0fe5de6
--- /dev/null
+++ b/src/widget/post-detail/PostDetailDialog.tsx
@@ -0,0 +1,31 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../shared/ui"
+import { PostItem } from "../../entities/post/model/types"
+import { User } from "../../entities/user/model/types"
+import { CommentSection } from "../comment-list"
+import { Comment } from "../../entities/comment/model/types"
+
+interface PostDetailDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  post: (PostItem & { author?: User }) | null
+  onAddComment: () => void
+  onEditComment: (comment: Comment) => void
+}
+
+export const PostDetailDialog = ({ open, onOpenChange, post, onAddComment, onEditComment }: PostDetailDialogProps) => {
+  if (!post) return null
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl">
+        <DialogHeader>
+          <DialogTitle>{post.title}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <p>{post.body}</p>
+          {post.id && <CommentSection postId={post.id} onAddComment={onAddComment} onEditComment={onEditComment} />}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/widget/post-detail/index.ts b/src/widget/post-detail/index.ts
new file mode 100644
index 000000000..2dd882fa6
--- /dev/null
+++ b/src/widget/post-detail/index.ts
@@ -0,0 +1 @@
+export { PostDetailDialog } from "./PostDetailDialog"
diff --git a/src/widget/post-filter/index.ts b/src/widget/post-filter/index.ts
new file mode 100644
index 000000000..ddde0fb5f
--- /dev/null
+++ b/src/widget/post-filter/index.ts
@@ -0,0 +1 @@
+export { PostFilter } from "./PostFilter"
diff --git a/src/widget/post-table/index.ts b/src/widget/post-table/index.ts
new file mode 100644
index 000000000..5225b405c
--- /dev/null
+++ b/src/widget/post-table/index.ts
@@ -0,0 +1 @@
+export { PostTable } from "./PostTable"
diff --git a/src/widget/user-info/UserInfoModal.tsx b/src/widget/user-info/UserInfoModal.tsx
new file mode 100644
index 000000000..39d612795
--- /dev/null
+++ b/src/widget/user-info/UserInfoModal.tsx
@@ -0,0 +1,36 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../shared/ui"
+import { User } from "../../entities/user/model/types"
+
+interface UserInfoModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  user: User | null
+}
+
+export const UserInfoModal = ({ open, onOpenChange, user }: UserInfoModalProps) => {
+  if (!user) return null
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>사용자 정보</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <img src={user.image} alt={user.username} className="w-24 h-24 rounded-full mx-auto" />
+          <h3 className="text-xl font-semibold text-center">{user.username}</h3>
+          <div className="space-y-2">
+            <p>
+              <strong>사용자 ID:</strong> {user.id}
+            </p>
+            {user.fullName && (
+              <p>
+                <strong>이름:</strong> {user.fullName}
+              </p>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/widget/user-info/index.ts b/src/widget/user-info/index.ts
new file mode 100644
index 000000000..d0bd7d337
--- /dev/null
+++ b/src/widget/user-info/index.ts
@@ -0,0 +1 @@
+export { UserInfoModal } from "./UserInfoModal"

From aff3e91a8a9bd8dbb34d3a4fc672e8a97018e23a Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Fri, 15 Aug 2025 05:53:30 +0900
Subject: [PATCH 30/34] =?UTF-8?q?deploy:=20=EB=B0=B0=ED=8F=AC=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development      | 1 +
 .env.production       | 2 ++
 package.json          | 8 +++++---
 src/shared/api/api.ts | 7 +++++++
 vite.config.ts        | 9 ++++-----
 5 files changed, 19 insertions(+), 8 deletions(-)
 create mode 100644 .env.development
 create mode 100644 .env.production

diff --git a/.env.development b/.env.development
new file mode 100644
index 000000000..d91b6949e
--- /dev/null
+++ b/.env.development
@@ -0,0 +1 @@
+VITE_API_BASE_URL=/api
\ No newline at end of file
diff --git a/.env.production b/.env.production
new file mode 100644
index 000000000..1d5921898
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,2 @@
+VITE_API_BASE_URL=https://dummyjson.com
+
diff --git a/package.json b/package.json
index f42cb9603..503d0f161 100644
--- a/package.json
+++ b/package.json
@@ -5,11 +5,13 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview",
     "test": "vitest",
-    "coverage": "vitest run --coverage"
+    "coverage": "vitest run --coverage",
+    "build": "vite build",
+    "preview": "vite preview",
+    "predeploy": "pnpm run build",
+    "deploy": "npx gh-pages -d dist"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.85.0",
diff --git a/src/shared/api/api.ts b/src/shared/api/api.ts
index 3f69dc58f..eee307291 100644
--- a/src/shared/api/api.ts
+++ b/src/shared/api/api.ts
@@ -1,3 +1,10 @@
+const BASE_URL = import.meta.env.VITE_API_BASE_URL
+export const api = {
+  get: <T>(path: string, init?: RequestInit) =>
+    fetch(`${BASE_URL}${path}`, { ...init }).then((r) => r.json() as Promise<T>),
+  // post/put/delete 등...
+}
+
 type Params = Record<string, string | number | boolean | undefined | null>
 type BaseOpts = { params?: Params; headers?: Record<string, string> }
 
diff --git a/vite.config.ts b/vite.config.ts
index be7b7a3d4..8b60734a7 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,17 +1,16 @@
 import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react"
 
-// https://vite.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
+  base: mode === "production" ? "/<리포지토리명>/" : "/",
   plugins: [react()],
   server: {
     proxy: {
       "/api": {
-        // target: 'https://jsonplaceholder.typicode.com',
         target: "https://dummyjson.com",
         changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, ""),
+        rewrite: (p) => p.replace(/^\/api/, ""),
       },
     },
   },
-})
+}))

From 732d526aa3f06e92619463d5c17ca62001f87936 Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Fri, 15 Aug 2025 06:39:59 +0900
Subject: [PATCH 31/34] Fix API URL for GitHub Pages deployment - use absolute
 URL for production, relative for development

---
 package.json                           |  3 ++-
 src/entities/comment/api/CommentAPI.ts |  2 +-
 src/entities/post/api/PostAPI.ts       |  2 +-
 src/entities/user/api/UserAPI.ts       |  2 +-
 src/shared/api/api.ts                  | 18 +++++++++++++++---
 src/vite-env.d.ts                      | 11 +++++++++++
 tsconfig.app.json                      |  2 +-
 vite.config.ts                         |  2 +-
 8 files changed, 33 insertions(+), 9 deletions(-)
 create mode 100644 src/vite-env.d.ts

diff --git a/package.json b/package.json
index 503d0f161..46af5b7c7 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "build": "vite build",
     "preview": "vite preview",
     "predeploy": "pnpm run build",
-    "deploy": "npx gh-pages -d dist"
+    "deploy": "npx gh-pages -d dist",
+    "postbuild": "cp dist/index.html dist/404.html"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.85.0",
diff --git a/src/entities/comment/api/CommentAPI.ts b/src/entities/comment/api/CommentAPI.ts
index cc5af1feb..ab7f1a002 100644
--- a/src/entities/comment/api/CommentAPI.ts
+++ b/src/entities/comment/api/CommentAPI.ts
@@ -3,7 +3,7 @@ import { CreateComment, CommentList, UpdateComment, LikeComment, Comment } from
 
 class CommentAPI extends ApiClient {
   constructor() {
-    super("/api/comments")
+    super("/comments")
   }
 
   /**
diff --git a/src/entities/post/api/PostAPI.ts b/src/entities/post/api/PostAPI.ts
index f8a482369..b7cf55b89 100644
--- a/src/entities/post/api/PostAPI.ts
+++ b/src/entities/post/api/PostAPI.ts
@@ -7,7 +7,7 @@ import { Post, PostItem, CreatePost, UpdatePost, Tag } from "../model/types"
  */
 class PostAPI extends ApiClient {
   constructor() {
-    super("/api/posts")
+    super("/posts")
   }
 
   /**
diff --git a/src/entities/user/api/UserAPI.ts b/src/entities/user/api/UserAPI.ts
index f9de87635..d5fe80456 100644
--- a/src/entities/user/api/UserAPI.ts
+++ b/src/entities/user/api/UserAPI.ts
@@ -3,7 +3,7 @@ import { User } from "../model/types"
 
 class UserAPI extends ApiClient {
   constructor() {
-    super("/api/users")
+    super("/users")
   }
 
   /**
diff --git a/src/shared/api/api.ts b/src/shared/api/api.ts
index eee307291..f5c805ae4 100644
--- a/src/shared/api/api.ts
+++ b/src/shared/api/api.ts
@@ -1,4 +1,9 @@
-const BASE_URL = import.meta.env.VITE_API_BASE_URL
+// GitHub Pages 배포 환경 감지
+const isGitHubPages = window.location.hostname === 'amelia-shin.github.io'
+
+// GitHub Pages에서는 전체 URL, 개발환경에서는 상대 경로
+const BASE_URL = isGitHubPages ? "https://dummyjson.com" : ""
+
 export const api = {
   get: <T>(path: string, init?: RequestInit) =>
     fetch(`${BASE_URL}${path}`, { ...init }).then((r) => r.json() as Promise<T>),
@@ -40,11 +45,18 @@ export class ApiClient {
    * @returns 전체 URL
    */
   private buildUrl(path: string): string {
-    // basePath가 이미 /api로 시작하면 중복 방지
+    // GitHub Pages 배포 환경 감지
+    const isGitHubPages = window.location.hostname === 'amelia-shin.github.io'
+    
+    // GitHub Pages에서는 전체 URL 사용
+    if (isGitHubPages) {
+      return `https://dummyjson.com${this.basePath}${path}`
+    }
+    
+    // 개발 환경에서는 상대 경로 사용
     if (this.basePath.startsWith("/api")) {
       return this.basePath + path
     }
-    // basePath가 비어있거나 /api로 시작하지 않으면 /api 추가
     return "/api" + this.basePath + path
   }
 
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 000000000..224a63a8d
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_BASE_URL: string
+  // 필요한 VITE_ 변수들 추가
+  // readonly VITE_SOME_FLAG: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 5a2def4b7..4086aa207 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -21,5 +21,5 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["src"]
+  "include": ["src", "src/vite-env.d.ts"]
 }
diff --git a/vite.config.ts b/vite.config.ts
index 8b60734a7..ce38778bf 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,7 +2,7 @@ import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react"
 
 export default defineConfig(({ mode }) => ({
-  base: mode === "production" ? "/<리포지토리명>/" : "/",
+  base: mode === "production" ? "/front_6th_chapter2-3/" : "/",
   plugins: [react()],
   server: {
     proxy: {

From c46a293691370c90802483383a194906cd8ccc91 Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Fri, 15 Aug 2025 07:03:42 +0900
Subject: [PATCH 32/34] =?UTF-8?q?feat:=20=EB=8C=93=EA=B8=80=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EA=B8=B0=EB=8A=A5=20=EA=B0=9C=EC=84=A0=20-=20useUp?=
 =?UTF-8?q?dateCommentFeature=20=ED=9B=85=20=ED=86=B5=ED=95=A9=20=EB=B0=8F?=
 =?UTF-8?q?=20=EB=A1=9C=EB=94=A9=20=EC=83=81=ED=83=9C=20=EC=B2=98=EB=A6=AC?=
 =?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/pages/PostsManagerPage.tsx              | 24 ++++++++++++++-------
 src/widget/comment-list/CommentEditForm.tsx |  8 ++++---
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index fc1aa9337..5b9e06649 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -26,7 +26,8 @@ import { User } from "../entities/user/model/types"
 import { Comment } from "../entities/comment/model/types"
 import { useAddComment } from "../features/comment/add-comments/hooks"
 import { useCurrentUser } from "../entities/user/model/hooks"
-import { CommentAddForm, CommentEditForm, CommentSection, PostDetailDialog, UserInfoModal, Pagination } from "../widget"
+import { CommentAddForm, CommentEditForm, PostDetailDialog, UserInfoModal, Pagination } from "../widget"
+import { useUpdateCommentFeature } from "../features/comment/update-comments/hooks"
 
 // PostItem에 author 속성이 추가된 타입
 interface PostWithAuthor extends PostItem {
@@ -217,18 +218,21 @@ const PostsManager = () => {
     }
   }
 
+  // ✅ 올바른 훅 사용
+  const { updateComment: updateCommentMutation } = useUpdateCommentFeature()
+
   // 댓글 업데이트
   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 result = await updateCommentMutation(
+        selectedComment.id,
+        { body: selectedComment.body },
+        selectedPost?.id || 0,
+      )
 
-      if (response.ok) {
+      if (result.success) {
         // setQueryData를 사용하여 댓글 캐시만 직접 업데이트
         if (selectedPost?.id) {
           queryClient.setQueryData(["comments", selectedPost.id], (oldData: { comments: Comment[] } | undefined) => {
@@ -243,7 +247,7 @@ const PostsManager = () => {
         }
         closeEditCommentDialog()
       } else {
-        console.error("댓글 수정 실패:", response.statusText)
+        console.error("댓글 수정 실패:", result.error)
       }
     } catch (error) {
       console.error("댓글 업데이트 오류:", error)
@@ -437,6 +441,10 @@ const PostsManager = () => {
           <DialogHeader>
             <DialogTitle>댓글 수정</DialogTitle>
           </DialogHeader>
+          {/* ✅ 에러 메시지 표시 */}
+          {/* {errorMessage && (
+            <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">{errorMessage}</div>
+          )} */}
           <CommentEditForm comment={selectedComment} onCommentChange={setSelectedComment} onSubmit={updateComment} />
         </DialogContent>
       </Dialog>
diff --git a/src/widget/comment-list/CommentEditForm.tsx b/src/widget/comment-list/CommentEditForm.tsx
index 472110192..94568b729 100644
--- a/src/widget/comment-list/CommentEditForm.tsx
+++ b/src/widget/comment-list/CommentEditForm.tsx
@@ -5,9 +5,10 @@ interface CommentEditFormProps {
   comment: Comment | null
   onCommentChange: (comment: Comment | null) => void
   onSubmit: () => void
+  isLoading?: boolean
 }
 
-export const CommentEditForm = ({ comment, onCommentChange, onSubmit }: CommentEditFormProps) => {
+export const CommentEditForm = ({ comment, onCommentChange, onSubmit, isLoading }: CommentEditFormProps) => {
   if (!comment) return null
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -24,9 +25,10 @@ export const CommentEditForm = ({ comment, onCommentChange, onSubmit }: CommentE
         value={comment.body}
         onChange={(e) => onCommentChange({ ...comment, body: e.target.value })}
         required
+        disabled={isLoading}
       />
-      <Button type="submit" disabled={!comment.body.trim()}>
-        댓글 업데이트
+      <Button type="submit" disabled={!comment.body.trim() || isLoading}>
+        {isLoading ? "업데이트 중..." : "댓글 업데이트"}
       </Button>
     </form>
   )

From 9cf70ee8f63ded082eeb7f56bcd25a4597490024 Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Fri, 15 Aug 2025 07:32:27 +0900
Subject: [PATCH 33/34] =?UTF-8?q?feat:=20=EC=82=AC=EC=9A=A9=EC=9E=90=20?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EB=AA=A8=EB=8B=AC=20=EA=B0=9C=EC=84=A0=20?=
 =?UTF-8?q?-=20=EC=82=AC=EC=9A=A9=EC=9E=90=20ID=EB=A1=9C=20=EC=A0=95?=
 =?UTF-8?q?=EB=B3=B4=20=EA=B0=80=EC=A0=B8=EC=98=A4=EA=B8=B0=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EC=A0=95=EB=B3=B4=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/user/model/types.ts         |  1 +
 src/features/user/get-user-info/hooks.ts | 18 ++++++++++++
 src/features/user/get-user-info/index.ts |  1 +
 src/pages/PostsManagerPage.tsx           | 17 ++++-------
 src/widget/user-info/UserInfoModal.tsx   | 36 +++++++++++++++---------
 5 files changed, 49 insertions(+), 24 deletions(-)
 create mode 100644 src/features/user/get-user-info/hooks.ts
 create mode 100644 src/features/user/get-user-info/index.ts

diff --git a/src/entities/user/model/types.ts b/src/entities/user/model/types.ts
index ebcb90c07..26b69bee2 100644
--- a/src/entities/user/model/types.ts
+++ b/src/entities/user/model/types.ts
@@ -2,4 +2,5 @@ export interface User {
   id: number
   image: string
   username: string
+  fullName?: string // 선택적 속성으로 추가
 }
diff --git a/src/features/user/get-user-info/hooks.ts b/src/features/user/get-user-info/hooks.ts
new file mode 100644
index 000000000..a411aefc1
--- /dev/null
+++ b/src/features/user/get-user-info/hooks.ts
@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query"
+import UserAPI from "../../../entities/user/api/UserAPI"
+import { User } from "../../../entities/user/model/types"
+
+/**
+ * 특정 사용자 정보를 가져오는 훅
+ * @param userId - 사용자 ID
+ * @returns 사용자 정보 쿼리 결과
+ */
+export const useUserInfo = (userId: number | null) => {
+  return useQuery<User>({
+    queryKey: ["userInfo", userId],
+    queryFn: () => {
+      if (!userId) userId = 1
+      return UserAPI.getUserInfo(userId)
+    },
+  })
+}
diff --git a/src/features/user/get-user-info/index.ts b/src/features/user/get-user-info/index.ts
new file mode 100644
index 000000000..f9ef54e97
--- /dev/null
+++ b/src/features/user/get-user-info/index.ts
@@ -0,0 +1 @@
+export { useUserInfo } from "./hooks"
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index 5b9e06649..5c7152838 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -83,7 +83,7 @@ const PostsManager = () => {
   const [selectedTag, setSelectedTag] = useState(queryParams.get("tag") || "")
   const [selectedComment, setSelectedComment] = useState<Comment | null>(null)
   const [newComment, setNewComment] = useState<CommentForm>({ body: "", postId: null, userId: 1 })
-  const [selectedUser, setSelectedUser] = useState<User | null>(null)
+  const [selectedUserId, setSelectedUserId] = useState<number | null>(null)
 
   // URL 업데이트 함수
   const updateURL = () => {
@@ -261,15 +261,10 @@ const PostsManager = () => {
   }
 
   // 사용자 모달 열기
-  const handleOpenUserModal = async (user: User) => {
-    try {
-      const response = await fetch(`/api/users/${user.id}`)
-      const userData = await response.json()
-      setSelectedUser(userData)
-      openUserModal()
-    } catch (error) {
-      console.error("사용자 정보 가져오기 오류:", error)
-    }
+  const handleOpenUserModal = (user: User) => {
+    // 사용자 ID를 직접 전달
+    setSelectedUserId(user.id)
+    openUserModal()
   }
 
   // 페이지네이션 핸들러
@@ -474,7 +469,7 @@ const PostsManager = () => {
             closeUserModal()
           }
         }}
-        user={selectedUser}
+        userId={selectedUserId}
       />
     </Card>
   )
diff --git a/src/widget/user-info/UserInfoModal.tsx b/src/widget/user-info/UserInfoModal.tsx
index 39d612795..bd7a7bd59 100644
--- a/src/widget/user-info/UserInfoModal.tsx
+++ b/src/widget/user-info/UserInfoModal.tsx
@@ -1,15 +1,15 @@
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../shared/ui"
-import { User } from "../../entities/user/model/types"
+import { useUserInfo } from "../../features/user/get-user-info"
 
 interface UserInfoModalProps {
   open: boolean
   onOpenChange: (open: boolean) => void
-  user: User | null
+  userId: number | null
 }
 
-export const UserInfoModal = ({ open, onOpenChange, user }: UserInfoModalProps) => {
-  if (!user) return null
-
+export const UserInfoModal = ({ open, onOpenChange, userId }: UserInfoModalProps) => {
+  const { data: user } = useUserInfo(userId)
+  console.log(user)
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
@@ -17,17 +17,27 @@ export const UserInfoModal = ({ open, onOpenChange, user }: UserInfoModalProps)
           <DialogTitle>사용자 정보</DialogTitle>
         </DialogHeader>
         <div className="space-y-4">
-          <img src={user.image} alt={user.username} className="w-24 h-24 rounded-full mx-auto" />
-          <h3 className="text-xl font-semibold text-center">{user.username}</h3>
+          <img src={user?.image} alt={user?.username} className="w-24 h-24 rounded-full mx-auto" />
+          <h3 className="text-xl font-semibold text-center">{user?.username}</h3>
           <div className="space-y-2">
             <p>
-              <strong>사용자 ID:</strong> {user.id}
+              <strong>이름:</strong> {user?.firstName} {user?.lastName}
+            </p>
+            <p>
+              <strong>나이:</strong> {user?.age}
+            </p>
+            <p>
+              <strong>이메일:</strong> {user?.email}
+            </p>
+            <p>
+              <strong>전화번호:</strong> {user?.phone}
+            </p>
+            <p>
+              <strong>주소:</strong> {user?.address?.address}, {user?.address?.city}, {user?.address?.state}
+            </p>
+            <p>
+              <strong>직장:</strong> {user?.company?.name} - {user?.company?.title}
             </p>
-            {user.fullName && (
-              <p>
-                <strong>이름:</strong> {user.fullName}
-              </p>
-            )}
           </div>
         </div>
       </DialogContent>

From 14e4f67b8f3d2b2febc28f78f18300319f1f563d Mon Sep 17 00:00:00 2001
From: Amelia-Shin <gmldnjs0402@naver.com>
Date: Fri, 15 Aug 2025 08:23:41 +0900
Subject: [PATCH 34/34] =?UTF-8?q?refactor:=20forwardRef=EB=A5=BC=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=ED=98=95=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=EB=A1=9C=20=EB=B3=80=EA=B2=BD(React19)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/ui/Button.tsx   |  9 ++--
 src/shared/ui/Card.tsx     | 48 ++++++++++++----------
 src/shared/ui/Dialog.tsx   | 46 +++++++++++----------
 src/shared/ui/Input.tsx    | 26 ++++++------
 src/shared/ui/Select.tsx   | 49 ++++++++++++----------
 src/shared/ui/Table.tsx    | 84 +++++++++++++++++++++-----------------
 src/shared/ui/Textarea.tsx | 24 +++++------
 7 files changed, 152 insertions(+), 134 deletions(-)

diff --git a/src/shared/ui/Button.tsx b/src/shared/ui/Button.tsx
index 276069be2..975900743 100644
--- a/src/shared/ui/Button.tsx
+++ b/src/shared/ui/Button.tsx
@@ -1,5 +1,4 @@
 import { cva, VariantProps } from "class-variance-authority"
-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",
@@ -34,8 +33,6 @@ 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} />
-})
-
-Button.displayName = "Button"
+export function Button({ className, variant, size, ...props }: ButtonProps) {
+  return <button className={buttonVariants({ variant, size, className })} {...props} />
+}
diff --git a/src/shared/ui/Card.tsx b/src/shared/ui/Card.tsx
index 9c2791540..0dfcba112 100644
--- a/src/shared/ui/Card.tsx
+++ b/src/shared/ui/Card.tsx
@@ -1,25 +1,31 @@
-import { forwardRef } from "react"
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string
+}
 
-export const Card = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-  <div ref={ref} className={`rounded-lg border bg-card text-card-foreground shadow-sm ${className}`} {...props} />
-))
-Card.displayName = "Card"
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string
+}
 
-export const CardHeader = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={`flex flex-col space-y-1.5 p-6 ${className}`} {...props} />
-  ),
-)
-CardHeader.displayName = "CardHeader"
+interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string
+}
 
-export const CardTitle = forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h3 ref={ref} className={`text-2xl font-semibold leading-none tracking-tight ${className}`} {...props} />
-  ),
-)
-CardTitle.displayName = "CardTitle"
+interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string
+}
 
-export const CardContent = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => <div ref={ref} className={`p-6 pt-0 ${className}`} {...props} />,
-)
-CardContent.displayName = "CardContent"
+export function Card({ className, ...props }: CardProps) {
+  return <div className={`rounded-lg border bg-card text-card-foreground shadow-sm ${className || ""}`} {...props} />
+}
+
+export function CardHeader({ className, ...props }: CardHeaderProps) {
+  return <div className={`flex flex-col space-y-1.5 p-6 ${className || ""}`} {...props} />
+}
+
+export function CardTitle({ className, ...props }: CardTitleProps) {
+  return <h3 className={`text-2xl font-semibold leading-none tracking-tight ${className || ""}`} {...props} />
+}
+
+export function CardContent({ className, ...props }: CardContentProps) {
+  return <div className={`p-6 pt-0 ${className || ""}`} {...props} />
+}
diff --git a/src/shared/ui/Dialog.tsx b/src/shared/ui/Dialog.tsx
index e55b54b37..2487d5e26 100644
--- a/src/shared/ui/Dialog.tsx
+++ b/src/shared/ui/Dialog.tsx
@@ -1,6 +1,5 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { X } from "lucide-react"
-import { forwardRef } from "react"
 
 // 대화상자 컴포넌트
 export const Dialog = DialogPrimitive.Root
@@ -8,13 +7,16 @@ export const DialogTrigger = DialogPrimitive.Trigger
 export const DialogPortal = DialogPrimitive.Portal
 export const DialogOverlay = DialogPrimitive.Overlay
 
-export const DialogContent = forwardRef<HTMLDivElement, DialogPrimitive.DialogContentProps>(
-  ({ className, children, ...props }, ref) => (
+interface DialogContentProps extends DialogPrimitive.DialogContentProps {
+  className?: string
+}
+
+export function DialogContent({ className, children, ...props }: DialogContentProps) {
+  return (
     <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}`}
+        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 || ""}`}
         {...props}
       >
         {children}
@@ -24,26 +26,28 @@ export const DialogContent = forwardRef<HTMLDivElement, DialogPrimitive.DialogCo
         </DialogPrimitive.Close>
       </DialogPrimitive.Content>
     </DialogPortal>
-  ),
-)
-DialogContent.displayName = DialogPrimitive.Content.displayName
+  )
+}
 
 // 대화상자 헤더 컴포넌트
-export const DialogHeader = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }) => (
-    <div className={`flex flex-col space-y-1.5 text-center sm:text-left ${className}`} {...props} />
-  ),
-)
-DialogHeader.displayName = "DialogHeader"
+interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string
+}
+
+export function DialogHeader({ className, ...props }: DialogHeaderProps) {
+  return <div className={`flex flex-col space-y-1.5 text-center sm:text-left ${className || ""}`} {...props} />
+}
 
 // 대화상자 제목 컴포넌트
-export const DialogTitle = forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
+interface DialogTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string
+}
+
+export function DialogTitle({ className, ...props }: DialogTitleProps) {
+  return (
     <DialogPrimitive.Title
-      ref={ref}
-      className={`text-lg font-semibold leading-none tracking-tight ${className}`}
+      className={`text-lg font-semibold leading-none tracking-tight ${className || ""}`}
       {...props}
     />
-  ),
-)
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+  )
+}
diff --git a/src/shared/ui/Input.tsx b/src/shared/ui/Input.tsx
index b10d3fc83..6eb5f2ee2 100644
--- a/src/shared/ui/Input.tsx
+++ b/src/shared/ui/Input.tsx
@@ -1,16 +1,14 @@
-import { forwardRef } from "react"
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  className?: string
+}
 
 // 입력 컴포넌트
-export const Input = forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
-  ({ 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}
-        {...props}
-      />
-    )
-  },
-)
-Input.displayName = "Input"
+export function Input({ className, type, ...props }: InputProps) {
+  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 || ""}`}
+      {...props}
+    />
+  )
+}
diff --git a/src/shared/ui/Select.tsx b/src/shared/ui/Select.tsx
index 731d5cb88..3306e9319 100644
--- a/src/shared/ui/Select.tsx
+++ b/src/shared/ui/Select.tsx
@@ -1,46 +1,52 @@
 import * as SelectPrimitive from "@radix-ui/react-select"
-import { forwardRef } from "react"
 import { Check, ChevronDown } from "lucide-react"
 
 export const Select = SelectPrimitive.Root
 export const SelectGroup = SelectPrimitive.Group
 export const SelectValue = SelectPrimitive.Value
 
-export const SelectTrigger = forwardRef<HTMLButtonElement, SelectPrimitive.SelectTriggerProps>(
-  ({ className, children, ...props }, ref) => (
+interface SelectTriggerProps extends SelectPrimitive.SelectTriggerProps {
+  className?: string
+}
+
+export function SelectTrigger({ className, children, ...props }: SelectTriggerProps) {
+  return (
     <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}`}
+      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 || ""}`}
       {...props}
     >
       {children}
       <ChevronDown className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Trigger>
-  ),
-)
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+  )
+}
+
+interface SelectContentProps extends SelectPrimitive.SelectContentProps {
+  className?: string
+}
 
-export const SelectContent = forwardRef<HTMLDivElement, SelectPrimitive.SelectContentProps>(
-  ({ className, children, position = "popper", ...props }, ref) => (
+export function SelectContent({ className, children, position = "popper", ...props }: SelectContentProps) {
+  return (
     <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}`}
+        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}
         {...props}
       >
         <SelectPrimitive.Viewport className="p-1">{children}</SelectPrimitive.Viewport>
       </SelectPrimitive.Content>
     </SelectPrimitive.Portal>
-  ),
-)
-SelectContent.displayName = SelectPrimitive.Content.displayName
+  )
+}
+
+interface SelectItemProps extends SelectPrimitive.SelectItemProps {
+  className?: string
+}
 
-export const SelectItem = forwardRef<HTMLDivElement, SelectPrimitive.SelectItemProps>(
-  ({ className, children, ...props }, ref) => (
+export function SelectItem({ className, children, ...props }: SelectItemProps) {
+  return (
     <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}`}
+      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 || ""}`}
       {...props}
     >
       <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
@@ -50,6 +56,5 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectPrimitive.SelectItemP
       </span>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
     </SelectPrimitive.Item>
-  ),
-)
-SelectItem.displayName = SelectPrimitive.Item.displayName
+  )
+}
diff --git a/src/shared/ui/Table.tsx b/src/shared/ui/Table.tsx
index 8919f3a77..ef27c39c3 100644
--- a/src/shared/ui/Table.tsx
+++ b/src/shared/ui/Table.tsx
@@ -1,57 +1,67 @@
-import { forwardRef } from "react"
+interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+  className?: string
+}
+
+interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+  className?: string
+}
+
+interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+  className?: string
+}
+
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  className?: string
+}
+
+interface TableHeadProps extends React.HTMLAttributes<HTMLTableCellElement> {
+  className?: string
+}
+
+interface TableCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+  className?: string
+}
 
 // 테이블 컴포넌트
-export const Table = forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
-  ({ className, ...props }, ref) => (
+export function Table({ className, ...props }: TableProps) {
+  return (
     <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 || ""}`} {...props} />
     </div>
-  ),
-)
-Table.displayName = "Table"
+  )
+}
 
 // 테이블 헤더 컴포넌트
-export const TableHeader = forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-  ({ className, ...props }, ref) => <thead ref={ref} className={`[&_tr]:border-b ${className}`} {...props} />,
-)
-TableHeader.displayName = "TableHeader"
+export function TableHeader({ className, ...props }: TableHeaderProps) {
+  return <thead className={`[&_tr]:border-b ${className || ""}`} {...props} />
+}
 
 // 테이블 바디 컴포넌트
-export const TableBody = forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-  ({ className, ...props }, ref) => (
-    <tbody ref={ref} className={`[&_tr:last-child]:border-0 ${className}`} {...props} />
-  ),
-)
-TableBody.displayName = "TableBody"
+export function TableBody({ className, ...props }: TableBodyProps) {
+  return <tbody className={`[&_tr:last-child]:border-0 ${className || ""}`} {...props} />
+}
 
 // 테이블 행 컴포넌트
-export const TableRow = forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
-  ({ className, ...props }, ref) => (
+export function TableRow({ className, ...props }: TableRowProps) {
+  return (
     <tr
-      ref={ref}
-      className={`border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted h-14 ${className}`}
+      className={`border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted h-14 ${className || ""}`}
       {...props}
     />
-  ),
-)
-TableRow.displayName = "TableRow"
+  )
+}
 
 // 테이블 헤드 컴포넌트
-export const TableHead = forwardRef<HTMLTableCellElement, React.HTMLAttributes<HTMLTableCellElement>>(
-  ({ className, ...props }, ref) => (
+export function TableHead({ className, ...props }: TableHeadProps) {
+  return (
     <th
-      ref={ref}
-      className={`h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 ${className}`}
+      className={`h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 ${className || ""}`}
       {...props}
     />
-  ),
-)
-TableHead.displayName = "TableHead"
+  )
+}
 
 // 테이블 셀 컴포넌트
-export const TableCell = forwardRef<HTMLTableCellElement, React.HTMLAttributes<HTMLTableCellElement>>(
-  ({ className, ...props }, ref) => (
-    <td ref={ref} className={`p-2 align-middle [&:has([role=checkbox])]:pr-0 ${className}`} {...props} />
-  ),
-)
-TableCell.displayName = "TableCell"
+export function TableCell({ className, ...props }: TableCellProps) {
+  return <td className={`p-2 align-middle [&:has([role=checkbox])]:pr-0 ${className || ""}`} {...props} />
+}
diff --git a/src/shared/ui/Textarea.tsx b/src/shared/ui/Textarea.tsx
index ecfc0b304..6b35a7e60 100644
--- a/src/shared/ui/Textarea.tsx
+++ b/src/shared/ui/Textarea.tsx
@@ -1,14 +1,12 @@
-import { forwardRef } from "react"
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  className?: string
+}
 
-export const Textarea = forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(
-  ({ 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 function Textarea({ className, ...props }: TextareaProps) {
+  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 || ""}`}
+      {...props}
+    />
+  )
+}