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 e014c5272..46af5b7c7 100644
--- a/package.json
+++ b/package.json
@@ -5,15 +5,20 @@
   "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",
+    "postbuild": "cp dist/index.html dist/404.html"
   },
   "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 6b2a40d18..1374df5d0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,12 +8,18 @@ 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
       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
@@ -103,10 +109,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 +932,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'}
@@ -2345,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': {}
@@ -2362,12 +2390,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 +3103,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 +3376,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':
@@ -4473,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
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/entities/comment/api/CommentAPI.ts b/src/entities/comment/api/CommentAPI.ts
new file mode 100644
index 000000000..ab7f1a002
--- /dev/null
+++ b/src/entities/comment/api/CommentAPI.ts
@@ -0,0 +1,56 @@
+import { ApiClient } from "../../../shared/api/api"
+import { CreateComment, CommentList, UpdateComment, LikeComment, Comment } from "../model/types"
+
+class CommentAPI extends ApiClient {
+  constructor() {
+    super("/comments")
+  }
+
+  /**
+   * 댓글 목록 조회
+   * @param postId - 게시글 ID
+   * @returns 댓글 목록
+   */
+  async getComments(postId: number): Promise<CommentList> {
+    return await this.get<CommentList>(`/post/${postId}`)
+  }
+
+  /**
+   * 댓글 추가
+   * @param comment - 추가할 댓글 정보
+   * @returns 추가된 댓글 정보
+   */
+  async createComment(comment: CreateComment): Promise<Comment> {
+    return await this.post<Comment>("/add", comment)
+  }
+
+  /**
+   * 댓글 수정
+   * @param id - 수정할 댓글 ID
+   * @param comment - 수정할 댓글 정보
+   * @returns 수정된 댓글 정보
+   */
+  async updateComment(id: number, comment: UpdateComment): Promise<Comment> {
+    return await this.put<Comment>(`/${id}`, comment)
+  }
+
+  /**
+   * 댓글 삭제
+   * @param id - 삭제할 댓글 ID
+   * @returns 삭제된 댓글 정보
+   */
+  async deleteComment(id: number): Promise<Comment> {
+    return await this.delete<Comment>(`/${id}`)
+  }
+
+  /**
+   * 댓글 좋아요
+   * @param id - 좋아요할 댓글 ID
+   * @returns 좋아요된 댓글 정보
+   */
+  async likeComment(id: number): Promise<Comment> {
+    return await this.patch<Comment>(`/${id}`, { likes: 1 })
+  }
+}
+
+export default new CommentAPI()
diff --git a/src/entities/comment/model/hooks.ts b/src/entities/comment/model/hooks.ts
new file mode 100644
index 000000000..ac0f561a9
--- /dev/null
+++ b/src/entities/comment/model/hooks.ts
@@ -0,0 +1,38 @@
+import { useMutation, useQuery } from "@tanstack/react-query"
+import CommentAPI from "../api/CommentAPI"
+import { CreateComment, UpdateComment } from "./types"
+
+export const useComments = (postId: number) => {
+  return useQuery({
+    queryKey: ["comments", postId],
+    queryFn: () => CommentAPI.getComments(postId),
+  })
+}
+
+export const useCreateComment = () => {
+  return useMutation({
+    mutationFn: (comment: CreateComment) => CommentAPI.createComment(comment),
+    // invalidateQueries 제거 - setQueryData로 직접 처리
+  })
+}
+
+export const useUpdateComment = () => {
+  return useMutation({
+    mutationFn: ({ id, comment }: { id: number; comment: UpdateComment }) => CommentAPI.updateComment(id, comment),
+    // invalidateQueries 제거 - setQueryData로 직접 처리
+  })
+}
+
+export const useDeleteComment = () => {
+  return useMutation({
+    mutationFn: (id: number) => CommentAPI.deleteComment(id),
+    // invalidateQueries 제거 - setQueryData로 직접 처리
+  })
+}
+
+export const useLikeComment = () => {
+  return useMutation({
+    mutationFn: (id: number) => CommentAPI.likeComment(id),
+    // invalidateQueries 제거 - setQueryData로 직접 처리
+  })
+}
diff --git a/src/entities/comment/model/types.ts b/src/entities/comment/model/types.ts
new file mode 100644
index 000000000..aa7a0ce5f
--- /dev/null
+++ b/src/entities/comment/model/types.ts
@@ -0,0 +1,31 @@
+export interface Comment {
+  id: number
+  body: string
+  postId: number
+  likes: number
+  user: {
+    id: number
+    username: string
+  }
+}
+
+export interface CommentList {
+  comments: Comment[]
+  limit: number
+  skip: number
+  total: number
+}
+
+export interface CreateComment {
+  body: string
+  postId: number
+  userId: number
+}
+
+export interface UpdateComment {
+  body: string
+}
+
+export interface LikeComment {
+  likes: number
+}
diff --git a/src/entities/post/api/PostAPI.ts b/src/entities/post/api/PostAPI.ts
new file mode 100644
index 000000000..b7cf55b89
--- /dev/null
+++ b/src/entities/post/api/PostAPI.ts
@@ -0,0 +1,116 @@
+import { ApiClient } from "../../../shared/api/api"
+import { Post, PostItem, CreatePost, UpdatePost, Tag } from "../model/types"
+
+/**
+ * PostAPI 클래스는 ApiClient를 상속받아 기본 경로를 설정하고,
+ * 각 메서드에 대한 요청을 처리합니다.
+ */
+class PostAPI extends ApiClient {
+  constructor() {
+    super("/posts")
+  }
+
+  /**
+   * 게시글 목록 조회
+   * @param limit - 한 페이지에 표시할 게시글 수
+   * @param skip - 건너뛸 게시글 수
+   * @param sortBy - 정렬 기준
+   * @param order - 정렬 순서
+   * @returns 게시글 목록
+   */
+  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,
+    limit: number,
+    skip: number,
+    sortBy?: string,
+    order?: string,
+  ): Promise<Post> {
+    const params = new URLSearchParams()
+    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(): Promise<Tag[]> {
+    return await this.get("/tags")
+  }
+
+  /**
+   * 태그로 게시글 목록 조회
+   * @param tag - 태그
+   * @param limit - 한 페이지에 표시할 게시글 수
+   * @param skip - 건너뛸 게시글 수
+   * @param sortBy - 정렬 기준
+   * @param order - 정렬 순서
+   * @returns 태그 결과
+   */
+  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()}`)
+  }
+
+  /**
+   * 게시글 추가
+   * @param post - 추가할 게시글 정보
+   * @returns 추가된 게시글 정보
+   */
+  async createPost(post: CreatePost): Promise<PostItem> {
+    return await this.post("/add", post)
+  }
+
+  /**
+   * 게시글 업데이트
+   * @param id - 게시글 ID
+   * @param post - 수정할 게시글 정보
+   * @returns 수정된 게시글 정보
+   */
+  async updatePost(id: number, post: Partial<UpdatePost>): Promise<PostItem> {
+    return await this.put(`/${id}`, post)
+  }
+
+  /**
+   * 게시글 삭제
+   * @param id - 게시글 ID
+   * @returns 삭제 성공 여부
+   */
+  async deletePost(id: number): Promise<void> {
+    return await this.delete(`/${id}`)
+  }
+}
+
+/**
+ * 싱글톤 인스턴스 생성
+ */
+export default new PostAPI()
diff --git a/src/entities/post/model/hooks.ts b/src/entities/post/model/hooks.ts
new file mode 100644
index 000000000..9b7462e59
--- /dev/null
+++ b/src/entities/post/model/hooks.ts
@@ -0,0 +1,101 @@
+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 = {
+  POSTS: "posts",
+  TAGS: "tags",
+} as const
+
+/**
+ * 게시글 목록 조회
+ * @param limit - 한 페이지에 표시할 게시글 수
+ * @param skip - 건너뛸 게시글 수
+ * @param sortBy - 정렬 기준
+ * @param Order - 정렬 순서
+ * @param tag - 태그 (선택사항)
+ * @param searchQuery - 검색어 (선택사항)
+ * @returns 게시글 목록
+ */
+export const usePosts = (
+  limit: number,
+  skip: number,
+  sortBy?: string,
+  order?: string,
+  tag?: string,
+  searchQuery?: string,
+) => {
+  return useQuery({
+    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)
+    },
+  })
+}
+
+/**
+ * 게시글 추가
+ * @param post - 추가할 게시글 정보
+ * @returns 추가된 게시글 정보
+ */
+export const useCreatePost = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (post: CreatePost) => PostAPI.createPost(post),
+    onSuccess: (newPost) => {
+      addPostToCache(queryClient, newPost)
+    },
+  })
+}
+
+/**
+ * 게시글 업데이트
+ * @param post - 업데이트할 게시글 정보
+ * @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)
+    },
+  })
+}
+
+/**
+ * 게시글 삭제
+ * @param id - 삭제할 게시글 ID
+ * @returns 삭제된 게시글 정보
+ */
+export const useDeletePost = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (id: number) => PostAPI.deletePost(id),
+    onSuccess: (deletedPost, variables) => {
+      deletePostFromCache(queryClient, variables)
+    },
+  })
+}
+
+/**
+ * 태그 목록 조회
+ * @returns 태그 목록
+ */
+export const useGetTags = () => {
+  return useQuery({
+    queryKey: [QUERY_KEYS.TAGS],
+    queryFn: () => PostAPI.getTags(),
+  })
+}
diff --git a/src/entities/post/model/types.ts b/src/entities/post/model/types.ts
new file mode 100644
index 000000000..6fcaf61b9
--- /dev/null
+++ b/src/entities/post/model/types.ts
@@ -0,0 +1,45 @@
+// 게시물 타입
+export interface Post {
+  posts: PostItem[]
+  total: number
+  limit: number
+  skip: number
+}
+
+export interface PostItem {
+  id: number
+  reactions: {
+    dislikes: number
+    likes: number
+  }
+  title: string
+  body: string
+  userId: number
+  views: number
+  tags: string[]
+}
+export interface CreatePost {
+  title: string
+  body: string
+  userId: number
+}
+
+export interface UpdatePost {
+  body: string
+  reactions: {
+    dislikes: number
+    likes: number
+  }
+  tags: string[]
+  title: string
+  userId: number
+}
+
+/**
+ * 태그 타입
+ */
+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..d5fe80456
--- /dev/null
+++ b/src/entities/user/api/UserAPI.ts
@@ -0,0 +1,29 @@
+import { ApiClient } from "../../../shared/api/api"
+import { User } from "../model/types"
+
+class UserAPI extends ApiClient {
+  constructor() {
+    super("/users")
+  }
+
+  /**
+   * 사용자 목록 조회
+   * @param limit - 한 페이지에 표시할 사용자 수
+   * @param select - 선택할 필드
+   * @returns 사용자 목록
+   */
+  async getUserList(limit: number, select: string): Promise<User[]> {
+    return await this.get<User[]>(`?limit=${limit}&select=${select}`)
+  }
+
+  /**
+   * 사용자 정보 조회
+   * @param id - 사용자 ID
+   * @returns 사용자 정보
+   */
+  async getUserInfo(id: number): Promise<User> {
+    return await this.get<User>(`/${id}`)
+  }
+}
+
+export default new UserAPI()
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/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/entities/user/model/types.ts b/src/entities/user/model/types.ts
new file mode 100644
index 000000000..26b69bee2
--- /dev/null
+++ b/src/entities/user/model/types.ts
@@ -0,0 +1,6 @@
+export interface User {
+  id: number
+  image: string
+  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..e693b539a
--- /dev/null
+++ b/src/features/comment/add-comments/hooks.ts
@@ -0,0 +1,22 @@
+import { useCreateComment } from "../../../entities/comment/model/hooks"
+import { CreateComment, Comment } from "../../../entities/comment/model/types"
+
+export const useAddComment = () => {
+  const createCommentMutation = useCreateComment()
+
+  const addComment = async (comment: CreateComment) => {
+    try {
+      const result = await createCommentMutation.mutateAsync(comment)
+      return { success: true, data: result }
+    } 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/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/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/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>
+  )
+}
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/features/post/get-posts/hooks.ts b/src/features/post/get-posts/hooks.ts
new file mode 100644
index 000000000..ea0584c16
--- /dev/null
+++ b/src/features/post/get-posts/hooks.ts
@@ -0,0 +1,26 @@
+import { usePosts } from "../../../entities/post/model/hooks"
+import { useUserList } from "../../../entities/user/hooks"
+import { joinPostsWithUsers } from "./util"
+
+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 {
+    loading: posts.isLoading || users.isLoading,
+    posts: postsWithUsers || [],
+    total: posts.data?.total || 0,
+  }
+}
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),
+  }))
+}
diff --git a/src/features/post/update-posts/UpdatePostForm.tsx b/src/features/post/update-posts/UpdatePostForm.tsx
new file mode 100644
index 000000000..ed454b4de
--- /dev/null
+++ b/src/features/post/update-posts/UpdatePostForm.tsx
@@ -0,0 +1,80 @@
+import { useState, useEffect } from "react"
+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 [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 || [],
+      })
+
+      // 캐시 업데이트는 useUpdatePost 훅에서 자동으로 처리됨
+      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/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/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>,
 )
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
index f80eb91ef..5c7152838 100644
--- a/src/pages/PostsManagerPage.tsx
+++ b/src/pages/PostsManagerPage.tsx
@@ -1,6 +1,8 @@
-import { useEffect, useState } from "react"
-import { Edit2, MessageSquare, Plus, Search, ThumbsDown, ThumbsUp, Trash2 } from "lucide-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"
+
 import {
   Button,
   Card,
@@ -11,49 +13,77 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
-  Input,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  Textarea,
-} from "../components"
+} from "../shared/ui"
+import { useGetPosts } from "../features/post/get-posts/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"
+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 { useAddComment } from "../features/comment/add-comments/hooks"
+import { useCurrentUser } from "../entities/user/model/hooks"
+import { CommentAddForm, CommentEditForm, PostDetailDialog, UserInfoModal, Pagination } from "../widget"
+import { useUpdateCommentFeature } from "../features/comment/update-comments/hooks"
+
+// 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()
   const queryParams = new URLSearchParams(location.search)
+  const queryClient = useQueryClient()
+
+  // 현재 사용자 정보 가져오기
+  const { data: currentUser } = useCurrentUser()
+
+  // Zustand store 사용
+  const {
+    showAddDialog,
+    showEditDialog,
+    showAddCommentDialog,
+    showEditCommentDialog,
+    showPostDetailDialog,
+    showUserModal,
+    openAddDialog,
+    closeAddDialog,
+    openEditDialog,
+    closeEditDialog,
+    openAddCommentDialog,
+    closeAddCommentDialog,
+    openEditCommentDialog,
+    closeEditCommentDialog,
+    openPostDetailDialog,
+    closePostDetailDialog,
+    openUserModal,
+    closeUserModal,
+  } = useDialogStore()
 
   // 상태 관리
-  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 [selectedPost, setSelectedPost] = useState(null)
+  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")
-  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)
-  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)
+  const [selectedComment, setSelectedComment] = useState<Comment | null>(null)
+  const [newComment, setNewComment] = useState<CommentForm>({ body: "", postId: null, userId: 1 })
+  const [selectedUserId, setSelectedUserId] = useState<number | null>(null)
 
   // URL 업데이트 함수
   const updateURL = () => {
@@ -67,254 +97,189 @@ const PostsManager = () => {
     navigate(`?${params.toString()}`)
   }
 
-  // 게시물 가져오기
-  const fetchPosts = () => {
-    setLoading(true)
-    let postsData
-    let usersData
-
-    fetch(`/api/posts?limit=${limit}&skip=${skip}`)
-      .then((response) => response.json())
-      .then((data) => {
-        postsData = data
-        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 fetchTags = async () => {
-    try {
-      const response = await fetch("/api/posts/tags")
-      const data = await response.json()
-      setTags(data)
-    } catch (error) {
-      console.error("태그 가져오기 오류:", error)
-    }
-  }
+  const { posts, total, loading } = useGetPosts(limit, skip, sortBy, sortOrder, selectedTag, searchQuery)
 
   // 게시물 검색
   const searchPosts = async () => {
-    if (!searchQuery) {
-      fetchPosts()
-      return
-    }
-    setLoading(true)
-    try {
-      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 fetchPostsByTag = async (tag) => {
-    if (!tag || tag === "all") {
-      fetchPosts()
-      return
-    }
-    setLoading(true)
-    try {
-      const [postsResponse, usersResponse] = await Promise.all([
-        fetch(`/api/posts/tag/${tag}`),
-        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)
+    if (!searchInputValue) return
+    setSearchQuery(searchInputValue)
+    setSelectedTag("")
+    setSkip(0)
   }
 
-  // 게시물 추가
-  const addPost = async () => {
-    try {
-      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 {
-      const response = await fetch(`/api/posts/${selectedPost.id}`, {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(selectedPost),
-      })
-      const data = await response.json()
-      setPosts(posts.map((post) => (post.id === data.id ? data : post)))
-      setShowEditDialog(false)
-    } catch (error) {
-      console.error("게시물 업데이트 오류:", error)
-    }
-  }
+  // 게시물 삭제 훅 사용
+  const deletePostMutation = useDeletePost()
 
   // 게시물 삭제
-  const deletePost = async (id) => {
+  const deletePost = async (id: number) => {
     try {
-      await fetch(`/api/posts/${id}`, {
-        method: "DELETE",
-      })
-      setPosts(posts.filter((post) => post.id !== id))
+      await deletePostMutation.mutateAsync(id)
     } catch (error) {
       console.error("게시물 삭제 오류:", error)
     }
   }
 
-  // 댓글 가져오기
-  const fetchComments = async (postId) => {
-    if (comments[postId]) return // 이미 불러온 댓글이 있으면 다시 불러오지 않음
-    try {
-      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: 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 () => {
-    try {
-      const response = 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],
-      }))
-      setShowAddCommentDialog(false)
-      setNewComment({ body: "", postId: null, userId: 1 })
-    } catch (error) {
-      console.error("댓글 추가 오류:", error)
+    if (!newComment.body.trim() || !newComment.postId) {
+      console.error("댓글 내용이나 게시물 ID가 없습니다.")
+      return
+    }
+
+    if (!currentUser) {
+      console.error("사용자 정보를 가져올 수 없습니다.")
+      return
     }
-  }
 
-  // 댓글 업데이트
-  const updateComment = async () => {
     try {
-      const response = await fetch(`/api/comments/${selectedComment.id}`, {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ body: selectedComment.body }),
+      // 낙관적 업데이트: 댓글 추가 전에 임시 댓글을 UI에 표시
+      const tempComment: Comment = {
+        id: Date.now(),
+        body: newComment.body,
+        postId: newComment.postId,
+        likes: 0,
+        user: {
+          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],
+        }
       })
-      const data = await response.json()
-      setComments((prev) => ({
-        ...prev,
-        [data.postId]: prev[data.postId].map((comment) => (comment.id === data.id ? data : comment)),
-      }))
-      setShowEditCommentDialog(false)
+
+      const result = (await addCommentMutation({
+        body: newComment.body,
+        postId: newComment.postId,
+        userId: currentUser.id, // currentUser.id 사용
+      })) as { success: boolean; data?: Comment; error?: unknown }
+
+      if (result.success) {
+        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 } : comment,
+              ),
+            }
+          })
+        }
+      } else {
+        console.error("댓글 추가 실패:", result.error)
+        // 실패 시 임시 댓글 제거
+        removeTempComment(tempComment.id)
+      }
     } catch (error) {
-      console.error("댓글 업데이트 오류:", error)
+      console.error("댓글 추가 오류:", error)
+      removeTempComment(Date.now())
     }
   }
 
-  // 댓글 삭제
-  const deleteComment = async (id, postId) => {
-    try {
-      await fetch(`/api/comments/${id}`, {
-        method: "DELETE",
+  // 임시 댓글 제거 헬퍼 함수
+  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),
+        }
       })
-      setComments((prev) => ({
-        ...prev,
-        [postId]: prev[postId].filter((comment) => comment.id !== id),
-      }))
-    } catch (error) {
-      console.error("댓글 삭제 오류:", error)
     }
   }
 
-  // 댓글 좋아요
-  const likeComment = async (id, postId) => {
-    try {
+  // ✅ 올바른 훅 사용
+  const { updateComment: updateCommentMutation } = useUpdateCommentFeature()
 
-      const response = await fetch(`/api/comments/${id}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ likes: comments[postId].find((c) => c.id === id).likes + 1 }),
-      })
-      const data = await response.json()
-      setComments((prev) => ({
-        ...prev,
-        [postId]: prev[postId].map((comment) => (comment.id === data.id ? {...data, likes: comment.likes + 1} : comment)),
-      }))
+  // 댓글 업데이트
+  const updateComment = async () => {
+    if (!selectedComment) return
+
+    try {
+      const result = await updateCommentMutation(
+        selectedComment.id,
+        { body: selectedComment.body },
+        selectedPost?.id || 0,
+      )
+
+      if (result.success) {
+        // 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()
+      } else {
+        console.error("댓글 수정 실패:", result.error)
+      }
     } catch (error) {
-      console.error("댓글 좋아요 오류:", error)
+      console.error("댓글 업데이트 오류:", error)
     }
   }
 
   // 게시물 상세 보기
-  const openPostDetail = (post) => {
+  const openPostDetail = (post: PostWithAuthor) => {
     setSelectedPost(post)
-    fetchComments(post.id)
-    setShowPostDetailDialog(true)
+    openPostDetailDialog()
   }
 
   // 사용자 모달 열기
-  const openUserModal = async (user) => {
-    try {
-      const response = await fetch(`/api/users/${user.id}`)
-      const userData = await response.json()
-      setSelectedUser(userData)
-      setShowUserModal(true)
-    } catch (error) {
-      console.error("사용자 정보 가져오기 오류:", error)
-    }
+  const handleOpenUserModal = (user: User) => {
+    // 사용자 ID를 직접 전달
+    setSelectedUserId(user.id)
+    openUserModal()
   }
 
-  useEffect(() => {
-    fetchTags()
-  }, [])
+  // 페이지네이션 핸들러
+  const handleSkipChange = (newSkip: number) => {
+    setSkip(newSkip)
+  }
+
+  const handleLimitChange = (newLimit: number) => {
+    setLimit(newLimit)
+    setSkip(0) // 페이지 크기 변경 시 첫 페이지로 이동
+  }
 
   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)
@@ -326,155 +291,12 @@ 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">
-      <div className="flex items-center justify-between mb-2">
-        <h3 className="text-sm font-semibold">댓글</h3>
-        <Button
-          size="sm"
-          onClick={() => {
-            setNewComment((prev) => ({ ...prev, postId }))
-            setShowAddCommentDialog(true)
-          }}
-        >
-          <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">{highlightText(comment.body, searchQuery)}</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)
-                  setShowEditCommentDialog(true)
-                }}
-              >
-                <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>
-  )
-
   return (
     <Card className="w-full max-w-6xl mx-auto">
       <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>
@@ -483,224 +305,172 @@ 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={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  onKeyPress={(e) => e.key === "Enter" && searchPosts()}
-                />
-              </div>
-            </div>
-            <Select
-              value={selectedTag}
-              onValueChange={(value) => {
-                setSelectedTag(value)
-                fetchPostsByTag(value)
-                updateURL()
-              }}
-            >
-              <SelectTrigger className="w-[180px]">
-                <SelectValue placeholder="태그 선택" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">모든 태그</SelectItem>
-                {tags.map((tag) => (
-                  <SelectItem key={tag.url} value={tag.slug}>
-                    {tag.slug}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <Select value={sortBy} onValueChange={setSortBy}>
-              <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={setSortOrder}>
-              <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 ? <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={handleOpenUserModal}
+              openPostDetail={openPostDetail}
+              setSelectedPost={setSelectedPost}
+              setShowEditDialog={(post: PostWithAuthor) => {
+                setSelectedPost(post)
+                openEditDialog()
+              }}
+              deletePost={deletePost}
+            />
+          )}
 
           {/* 페이지네이션 */}
-          <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>
 
       {/* 게시물 추가 대화상자 */}
-      <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
+      <Dialog
+        open={showAddDialog}
+        onOpenChange={(open) => {
+          if (open) {
+            openAddDialog()
+          } else {
+            closeAddDialog()
+          }
+        }}
+      >
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>새 게시물 추가</DialogTitle>
+            <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
-              type="number"
-              placeholder="사용자 ID"
-              value={newPost.userId}
-              onChange={(e) => setNewPost({ ...newPost, userId: Number(e.target.value) })}
-            />
-            <Button onClick={addPost}>게시물 추가</Button>
-          </div>
+          <AddPostForm />
         </DialogContent>
       </Dialog>
 
       {/* 게시물 수정 대화상자 */}
-      <Dialog open={showEditDialog} onOpenChange={setShowEditDialog}>
+      <Dialog
+        open={showEditDialog}
+        onOpenChange={(open) => {
+          if (open) {
+            openEditDialog()
+          } else {
+            closeEditDialog()
+          }
+        }}
+      >
         <DialogContent>
           <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>
 
       {/* 댓글 추가 대화상자 */}
-      <Dialog open={showAddCommentDialog} onOpenChange={setShowAddCommentDialog}>
+      <Dialog
+        open={showAddCommentDialog}
+        onOpenChange={(open) => {
+          if (open) {
+            openAddCommentDialog()
+          } else {
+            closeAddCommentDialog()
+          }
+        }}
+      >
         <DialogContent>
           <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}>댓글 추가</Button>
-          </div>
+          <CommentAddForm
+            comment={newComment}
+            onCommentChange={setNewComment}
+            onSubmit={addComment}
+            isLoading={isAddingComment}
+          />
         </DialogContent>
       </Dialog>
 
       {/* 댓글 수정 대화상자 */}
-      <Dialog open={showEditCommentDialog} onOpenChange={setShowEditCommentDialog}>
+      <Dialog
+        open={showEditCommentDialog}
+        onOpenChange={(open) => {
+          if (open) {
+            openEditCommentDialog()
+          } else {
+            closeEditCommentDialog()
+          }
+        }}
+      >
         <DialogContent>
           <DialogHeader>
             <DialogTitle>댓글 수정</DialogTitle>
           </DialogHeader>
-          <div className="space-y-4">
-            <Textarea
-              placeholder="댓글 내용"
-              value={selectedComment?.body || ""}
-              onChange={(e) => setSelectedComment({ ...selectedComment, body: e.target.value })}
-            />
-            <Button onClick={updateComment}>댓글 업데이트</Button>
-          </div>
+          {/* ✅ 에러 메시지 표시 */}
+          {/* {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>
 
       {/* 게시물 상세 보기 대화상자 */}
-      <Dialog open={showPostDetailDialog} onOpenChange={setShowPostDetailDialog}>
-        <DialogContent className="max-w-3xl">
-          <DialogHeader>
-            <DialogTitle>{highlightText(selectedPost?.title, searchQuery)}</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <p>{highlightText(selectedPost?.body, searchQuery)}</p>
-            {renderComments(selectedPost?.id)}
-          </div>
-        </DialogContent>
-      </Dialog>
+      <PostDetailDialog
+        open={showPostDetailDialog}
+        onOpenChange={(open) => {
+          if (open) {
+            openPostDetailDialog()
+          } else {
+            closePostDetailDialog()
+          }
+        }}
+        post={selectedPost}
+        onAddComment={handleAddComment}
+        onEditComment={handleEditComment}
+      />
 
       {/* 사용자 모달 */}
-      <Dialog open={showUserModal} onOpenChange={setShowUserModal}>
-        <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>이름:</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}
-              </p>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
+      <UserInfoModal
+        open={showUserModal}
+        onOpenChange={(open) => {
+          if (open) {
+            openUserModal()
+          } else {
+            closeUserModal()
+          }
+        }}
+        userId={selectedUserId}
+      />
     </Card>
   )
 }
diff --git a/src/shared/api/api.ts b/src/shared/api/api.ts
new file mode 100644
index 000000000..f5c805ae4
--- /dev/null
+++ b/src/shared/api/api.ts
@@ -0,0 +1,154 @@
+// 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>),
+  // post/put/delete 등...
+}
+
+type Params = Record<string, string | number | boolean | undefined | null>
+type BaseOpts = { params?: Params; headers?: Record<string, string> }
+
+/**
+ * 쿼리 스트링 생성
+ * @param params - 쿼리 파라미터
+ * @returns 쿼리 스트링
+ */
+function queryString(params?: Params): string {
+  if (!params) return ""
+  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}` : ""
+}
+
+/**
+ * API 클라이언트 클래스
+ * 기본 경로를 설정하고 HTTP 메서드를 제공합니다.
+ */
+export class ApiClient {
+  private basePath: string
+
+  constructor(basePath: string = "") {
+    this.basePath = basePath
+  }
+
+  /**
+   * 전체 URL 생성
+   * @param path - 상대 경로
+   * @returns 전체 URL
+   */
+  private buildUrl(path: string): string {
+    // 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
+    }
+    return "/api" + this.basePath + path
+  }
+
+  /**
+   * 요청 처리
+   * @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 (!res.ok) {
+      throw new Error(`API ${res.status} ${res.statusText}`)
+    }
+
+    if (res.status === 204) {
+      return undefined as unknown as T
+    }
+
+    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),
+    })
+  }
+
+  /**
+   * 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,
+    })
+  }
+}
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,
+    }
+  })
+}
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,
+    }),
+}))
diff --git a/src/shared/ui/Button.tsx b/src/shared/ui/Button.tsx
new file mode 100644
index 000000000..975900743
--- /dev/null
+++ b/src/shared/ui/Button.tsx
@@ -0,0 +1,38 @@
+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)
+      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 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
new file mode 100644
index 000000000..0dfcba112
--- /dev/null
+++ b/src/shared/ui/Card.tsx
@@ -0,0 +1,31 @@
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string
+}
+
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string
+}
+
+interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string
+}
+
+interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string
+}
+
+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
new file mode 100644
index 000000000..2487d5e26
--- /dev/null
+++ b/src/shared/ui/Dialog.tsx
@@ -0,0 +1,53 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+// 대화상자 컴포넌트
+export const Dialog = DialogPrimitive.Root
+export const DialogTrigger = DialogPrimitive.Trigger
+export const DialogPortal = DialogPrimitive.Portal
+export const DialogOverlay = DialogPrimitive.Overlay
+
+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
+        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>
+  )
+}
+
+// 대화상자 헤더 컴포넌트
+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} />
+}
+
+// 대화상자 제목 컴포넌트
+interface DialogTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string
+}
+
+export function DialogTitle({ className, ...props }: DialogTitleProps) {
+  return (
+    <DialogPrimitive.Title
+      className={`text-lg font-semibold leading-none tracking-tight ${className || ""}`}
+      {...props}
+    />
+  )
+}
diff --git a/src/shared/ui/HighlightText.tsx b/src/shared/ui/HighlightText.tsx
new file mode 100644
index 000000000..2f22faf49
--- /dev/null
+++ b/src/shared/ui/HighlightText.tsx
@@ -0,0 +1,13 @@
+export const HighlightText = ({ text, highlight }: { 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/Input.tsx b/src/shared/ui/Input.tsx
new file mode 100644
index 000000000..6eb5f2ee2
--- /dev/null
+++ b/src/shared/ui/Input.tsx
@@ -0,0 +1,14 @@
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  className?: string
+}
+
+// 입력 컴포넌트
+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
new file mode 100644
index 000000000..3306e9319
--- /dev/null
+++ b/src/shared/ui/Select.tsx
@@ -0,0 +1,60 @@
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown } from "lucide-react"
+
+export const Select = SelectPrimitive.Root
+export const SelectGroup = SelectPrimitive.Group
+export const SelectValue = SelectPrimitive.Value
+
+interface SelectTriggerProps extends SelectPrimitive.SelectTriggerProps {
+  className?: string
+}
+
+export function SelectTrigger({ className, children, ...props }: SelectTriggerProps) {
+  return (
+    <SelectPrimitive.Trigger
+      className={`flex h-10 items-center justify-between rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className || ""}`}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Trigger>
+  )
+}
+
+interface SelectContentProps extends SelectPrimitive.SelectContentProps {
+  className?: string
+}
+
+export function SelectContent({ className, children, position = "popper", ...props }: SelectContentProps) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        className={`relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ${className || ""}`}
+        position={position}
+        {...props}
+      >
+        <SelectPrimitive.Viewport className="p-1">{children}</SelectPrimitive.Viewport>
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+interface SelectItemProps extends SelectPrimitive.SelectItemProps {
+  className?: string
+}
+
+export function SelectItem({ className, children, ...props }: SelectItemProps) {
+  return (
+    <SelectPrimitive.Item
+      className={`relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ${className || ""}`}
+      {...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>
+  )
+}
diff --git a/src/shared/ui/Table.tsx b/src/shared/ui/Table.tsx
new file mode 100644
index 000000000..ef27c39c3
--- /dev/null
+++ b/src/shared/ui/Table.tsx
@@ -0,0 +1,67 @@
+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 function Table({ className, ...props }: TableProps) {
+  return (
+    <div className="w-full overflow-auto">
+      <table className={`table-fixed w-full caption-bottom text-sm ${className || ""}`} {...props} />
+    </div>
+  )
+}
+
+// 테이블 헤더 컴포넌트
+export function TableHeader({ className, ...props }: TableHeaderProps) {
+  return <thead className={`[&_tr]:border-b ${className || ""}`} {...props} />
+}
+
+// 테이블 바디 컴포넌트
+export function TableBody({ className, ...props }: TableBodyProps) {
+  return <tbody className={`[&_tr:last-child]:border-0 ${className || ""}`} {...props} />
+}
+
+// 테이블 행 컴포넌트
+export function TableRow({ className, ...props }: TableRowProps) {
+  return (
+    <tr
+      className={`border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted h-14 ${className || ""}`}
+      {...props}
+    />
+  )
+}
+
+// 테이블 헤드 컴포넌트
+export function TableHead({ className, ...props }: TableHeadProps) {
+  return (
+    <th
+      className={`h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 ${className || ""}`}
+      {...props}
+    />
+  )
+}
+
+// 테이블 셀 컴포넌트
+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
new file mode 100644
index 000000000..6b35a7e60
--- /dev/null
+++ b/src/shared/ui/Textarea.tsx
@@ -0,0 +1,12 @@
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  className?: string
+}
+
+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}
+    />
+  )
+}
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
new file mode 100644
index 000000000..a8b7acc9e
--- /dev/null
+++ b/src/shared/ui/index.ts
@@ -0,0 +1,8 @@
+export * from "./Button"
+export * from "./Card"
+export * from "./Dialog"
+export * from "./Input"
+export * from "./Select"
+export * from "./Table"
+export * from "./Textarea"
+export * from "./HighlightText"
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/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
new file mode 100644
index 000000000..94568b729
--- /dev/null
+++ b/src/widget/comment-list/CommentEditForm.tsx
@@ -0,0 +1,35 @@
+import { Button, Textarea } from "../../shared/ui"
+import { Comment } from "../../entities/comment/model/types"
+
+interface CommentEditFormProps {
+  comment: Comment | null
+  onCommentChange: (comment: Comment | null) => void
+  onSubmit: () => void
+  isLoading?: boolean
+}
+
+export const CommentEditForm = ({ comment, onCommentChange, onSubmit, isLoading }: CommentEditFormProps) => {
+  if (!comment) return null
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (comment.body.trim()) {
+      onSubmit()
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <Textarea
+        placeholder="댓글 내용"
+        value={comment.body}
+        onChange={(e) => onCommentChange({ ...comment, body: e.target.value })}
+        required
+        disabled={isLoading}
+      />
+      <Button type="submit" disabled={!comment.body.trim() || isLoading}>
+        {isLoading ? "업데이트 중..." : "댓글 업데이트"}
+      </Button>
+    </form>
+  )
+}
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
new file mode 100644
index 000000000..cd0c25701
--- /dev/null
+++ b/src/widget/comment-list/CommentList.tsx
@@ -0,0 +1,114 @@
+import { useState } from "react"
+import { Edit2, Plus, ThumbsUp, Trash2, X } from "lucide-react"
+import { Button } from "../../shared/ui"
+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
+  userId?: number
+  onEditComment?: (comment: Comment) => void
+}
+
+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-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>
+
+      {/* 댓글 추가 폼 */}
+      {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="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>
+        ))}
+      </div>
+    </div>
+  )
+}
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
new file mode 100644
index 000000000..41e58dd7a
--- /dev/null
+++ b/src/widget/comment-list/index.ts
@@ -0,0 +1,5 @@
+export { CommentList } from "./CommentList"
+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/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>
+  )
+}
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/PostTable.tsx b/src/widget/post-table/PostTable.tsx
new file mode 100644
index 000000000..1b2f98814
--- /dev/null
+++ b/src/widget/post-table/PostTable.tsx
@@ -0,0 +1,118 @@
+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"
+
+// PostItem에 author 속성이 추가된 타입
+interface PostWithAuthor extends PostItem {
+  author?: User
+}
+
+export const PostTable = ({
+  posts,
+  searchQuery,
+  selectedTag,
+  setSelectedTag,
+  updateURL,
+  openUserModal,
+  openPostDetail,
+  setSelectedPost,
+  setShowEditDialog,
+  deletePost,
+}: {
+  posts: PostWithAuthor[]
+  searchQuery: string
+  selectedTag: string
+  setSelectedTag: (tag: string) => void
+  updateURL: () => void
+  openUserModal: (user: User) => void
+  openPostDetail: (post: PostWithAuthor) => void
+  setSelectedPost: (post: PostWithAuthor) => void
+  setShowEditDialog: (post: PostWithAuthor) => 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={() => 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>
+            </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(post)
+                  }}
+                >
+                  <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>
+  )
+}
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..bd7a7bd59
--- /dev/null
+++ b/src/widget/user-info/UserInfoModal.tsx
@@ -0,0 +1,46 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../shared/ui"
+import { useUserInfo } from "../../features/user/get-user-info"
+
+interface UserInfoModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  userId: number | null
+}
+
+export const UserInfoModal = ({ open, onOpenChange, userId }: UserInfoModalProps) => {
+  const { data: user } = useUserInfo(userId)
+  console.log(user)
+  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>이름:</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>
+          </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"
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 be7b7a3d4..ce38778bf 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" ? "/front_6th_chapter2-3/" : "/",
   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/, ""),
       },
     },
   },
-})
+}))