diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index aeb47f408..123d064de 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -3,6 +3,7 @@
 ### 기본과제
 
 #### 목표 : 전역상태관리를 이용한 적절한 분리와 계층에 대한 이해를 통한 FSD 폴더 구조 적용하기
+
 - 전역상태관리를 사용해서 상태를 분리하고 관리하는 방법에 대한 이해
 - Context API, Jotai, Zustand 등 상태관리 라이브러리 사용하기
 - FSD(Feature-Sliced Design)에 대한 이해
@@ -12,6 +13,7 @@
 - 어디에 무엇을 넣어야 하는가?
 
 #### 체크포인트
+
 - [ ] 전역상태관리를 사용해서 상태를 분리하고 관리했나요?
 - [ ] Props Drilling을 최소화했나요?
 - [ ] shared 공통 컴포넌트를 분리했나요?
@@ -24,10 +26,9 @@
 - [ ] feature를 중심으로 api를 분리했나요?
 - [ ] widget을 중심으로 데이터를 재사용가능한 형태로 분리했나요?
 
-
 ### 심화과제
 
-#### 목표: 서버상태관리 도구인 TanstackQuery를 이용하여 비동기코드를 선언적인 함수형 프로그래밍으로 작성하기 
+#### 목표: 서버상태관리 도구인 TanstackQuery를 이용하여 비동기코드를 선언적인 함수형 프로그래밍으로 작성하기
 
 - TanstackQuery의 사용법에 대한 이해
 - TanstackQuery를 이용한 비동기 코드 작성에 대한 이해
@@ -45,8 +46,8 @@
 - [ ] 코드가 간결하고 유지보수가 용이한 구조로 작성되었는가?
 - [ ] TanStack Query의 Devtools가 정상적으로 작동하는가?
 
-
 ### 최종과제
+
 - [ ] 폴더구조와 나의 멘탈모데일이 일치하나요?
 - [ ] 다른 사람이 봐도 이해하기 쉬운 구조인가요?
 
@@ -60,7 +61,6 @@
 
 ### 이번에 배운 내용 중을 통해 앞으로 개발에 어떻게 적용해보고 싶은지 적어주세요.
 
-
 ## 챕터 셀프회고
 
 > 클린코드와 아키테쳑 챕터 함께 하느라 고생 많으셨습니다!
@@ -68,15 +68,19 @@
 > 아래에 적힌 질문들은 추억(?)을 회상할 수 있도록 도와주려고 만든 질문이며, 꼭 질문에 대한 대답이 아니어도 좋으니 내가 느꼈던 인사이트들을 자유롭게 적어주세요.
 
 ### 클린코드: 읽기 좋고 유지보수하기 좋은 코드 만들기
+
 - 더티코드를 접했을 때 어떤 기분이었나요? ^^; 클린코드의 중요성, 읽기 좋은 코드란 무엇인지, 유지보수하기 쉬운 코드란 무엇인지에 대한 생각을 공유해주세요
 
 ### 결합도 낮추기: 디자인 패턴, 순수함수, 컴포넌트 분리, 전역상태 관리
+
 - 거대한 단일 컴포넌트를 봤을때의 느낌! 처음엔 막막했던 상태관리, 디자인 패턴이라는 말이 어렵게만 느껴졌던 시절, 순수함수로 분리하면서 "아하!"했던 순간, 컴포넌트가 독립적이 되어가는 과정에서의 깨달음을 들려주세요
 
 ### 응집도 높이기: 서버상태관리, 폴더 구조
+
 - "이 코드는 대체 어디에 둬야 하지?"라고 고민했던 시간, FSD를 적용해보면서의 느낌, 나만의 구조를 만들어가는 과정, TanStack Query로 서버 상태를 분리하면서 느낀 해방감(?)등을 공유해주세요
 
+## 리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문
 
+```
 
-## 리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문
-```
\ No newline at end of file
+```
diff --git a/.gitignore b/.gitignore
index a547bf36d..4e26de91f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.cursor/
\ No newline at end of file
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 000000000..2312dc587
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1 @@
+npx lint-staged
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000..89b8e3841
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,93 @@
+# Dependencies
+node_modules/
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+
+# Build outputs
+dist/
+build/
+.next/
+out/
+
+# Environment files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Dependency directories
+jspm_packages/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# Temporary folders
+tmp/
+temp/
diff --git a/.prettierrc b/.prettierrc
index d9ae6b1fb..2948310b8 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,9 +1,32 @@
 {
-  "semi": false,
-  "printWidth": 120,
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 80,
   "tabWidth": 2,
-  "singleQuote": false,
-  "quoteProps": "consistent",
-  "trailingComma": "all",
-  "singleAttributePerLine": false
-}
\ No newline at end of file
+  "useTabs": false,
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": true,
+  "proseWrap": "preserve",
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "importOrder": [
+    "^react$",
+    "^react-router-dom$",
+    "^lucide-react$",
+    "^[a-z]",
+    "<THIRD_PARTY_MODULES>",
+    "^@/",
+    "^[./]",
+    "^.*\\u0000$"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "importOrderGroupNamespaceSpecifiers": true,
+  "importOrderCaseInsensitive": true,
+  "importOrderTypeScriptVersion": "4.4.0",
+  "importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy"]
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 000000000..37f481a25
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,11 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "bradlc.vscode-tailwindcss",
+    "ms-vscode.vscode-typescript-next",
+    "formulahendry.auto-rename-tag",
+    "christian-kohler.path-intellisense",
+    "ms-vscode.vscode-json"
+  ]
+}
diff --git a/PR.md b/PR.md
new file mode 100644
index 000000000..b688312d8
--- /dev/null
+++ b/PR.md
@@ -0,0 +1,97 @@
+## 배포링크
+
+https://angielxx.github.io/front_6th_chapter2-3
+
+## 과제 체크포인트
+
+### 기본과제
+
+#### 목표 : 전역상태관리를 이용한 적절한 분리와 계층에 대한 이해를 통한 FSD 폴더 구조 적용하기
+
+- 전역상태관리를 사용해서 상태를 분리하고 관리하는 방법에 대한 이해
+- Context API, Jotai, Zustand 등 상태관리 라이브러리 사용하기
+- FSD(Feature-Sliced Design)에 대한 이해
+- FSD를 통한 관심사의 분리에 대한 이해
+- 단일책임과 역할이란 무엇인가?
+- 관심사를 하나만 가지고 있는가?
+- 어디에 무엇을 넣어야 하는가?
+
+#### 체크포인트
+
+- [x] 전역상태관리를 사용해서 상태를 분리하고 관리했나요?
+- [x] Props Drilling을 최소화했나요?
+- [x] shared 공통 컴포넌트를 분리했나요?
+- [x] shared 공통 로직을 분리했나요?
+- [x] entities를 중심으로 type을 정의하고 model을 분리했나요?
+- [x] entities를 중심으로 ui를 분리했나요?
+- [x] entities를 중심으로 api를 분리했나요?
+- [x] feature를 중심으로 사용자행동(이벤트 처리)를 분리했나요?
+- [x] feature를 중심으로 ui를 분리했나요?
+- [x] feature를 중심으로 api를 분리했나요?
+- [x] widget을 중심으로 데이터를 재사용가능한 형태로 분리했나요?
+
+### 심화과제
+
+#### 목표: 서버상태관리 도구인 TanstackQuery를 이용하여 비동기코드를 선언적인 함수형 프로그래밍으로 작성하기
+
+- TanstackQuery의 사용법에 대한 이해
+- TanstackQuery를 이용한 비동기 코드 작성에 대한 이해
+- 비동기 코드를 선언적인 함수형 프로그래밍으로 작성하는 방법에 대한 이해
+
+#### 체크포인트
+
+- [x] 모든 API 호출이 TanStack Query의 useQuery와 useMutation으로 대체되었는가?
+- [x] 쿼리 키가 적절히 설정되었는가?
+- [x] fetch와 useState가 아닌 선언적인 함수형 프로그래밍이 적절히 적용되었는가?
+- [x] 캐싱과 리프레시 전략이 올바르게 구현되었는가?
+- [x] 낙관적인 업데이트가 적용되었는가?
+- [x] 에러 핸들링이 적절히 구현되었는가?
+- [x] 서버 상태와 클라이언트 상태가 명확히 분리되었는가?
+- [x] 코드가 간결하고 유지보수가 용이한 구조로 작성되었는가?
+- [x] TanStack Query의 Devtools가 정상적으로 작동하는가?
+
+### 최종과제
+
+- [x] 폴더구조와 나의 멘탈모데일이 일치하나요?
+- [x] 다른 사람이 봐도 이해하기 쉬운 구조인가요?
+
+## 과제 셀프회고
+
+### 이번 과제를 통해 이전에 비해 새롭게 알게 된 점이 있다면 적어주세요.
+
+### 본인이 과제를 하면서 가장 애쓰려고 노력했던 부분은 무엇인가요?
+
+- FSD 사용하기 편한 폴더명과 절대경로 설정
+- 타입안정성
+- 낙관적 업데이트
+
+### 아직은 막연하다거나 더 고민이 필요한 부분을 적어주세요.
+
+- 낙관적 업데이트 최적화 및 공통화
+- FSD 폴더구조
+
+### 이번에 배운 내용 중을 통해 앞으로 개발에 어떻게 적용해보고 싶은지 적어주세요.
+
+## 챕터 셀프회고
+
+> 클린코드와 아키테쳑 챕터 함께 하느라 고생 많으셨습니다!
+> 지난 3주간의 여정을 돌이켜 볼 수 있도록 준비해보았습니다.
+> 아래에 적힌 질문들은 추억(?)을 회상할 수 있도록 도와주려고 만든 질문이며, 꼭 질문에 대한 대답이 아니어도 좋으니 내가 느꼈던 인사이트들을 자유롭게 적어주세요.
+
+### 클린코드: 읽기 좋고 유지보수하기 좋은 코드 만들기
+
+- 더티코드를 접했을 때 어떤 기분이었나요? ^^; 클린코드의 중요성, 읽기 좋은 코드란 무엇인지, 유지보수하기 쉬운 코드란 무엇인지에 대한 생각을 공유해주세요
+
+### 결합도 낮추기: 디자인 패턴, 순수함수, 컴포넌트 분리, 전역상태 관리
+
+- 거대한 단일 컴포넌트를 봤을때의 느낌! 처음엔 막막했던 상태관리, 디자인 패턴이라는 말이 어렵게만 느껴졌던 시절, 순수함수로 분리하면서 "아하!"했던 순간, 컴포넌트가 독립적이 되어가는 과정에서의 깨달음을 들려주세요
+
+### 응집도 높이기: 서버상태관리, 폴더 구조
+
+- "이 코드는 대체 어디에 둬야 하지?"라고 고민했던 시간, FSD를 적용해보면서의 느낌, 나만의 구조를 만들어가는 과정, TanStack Query로 서버 상태를 분리하면서 느낀 해방감(?)등을 공유해주세요
+
+## 리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문
+
+```
+
+```
diff --git a/README.md b/README.md
index 236bcf258..a0ba7be5b 100644
--- a/README.md
+++ b/README.md
@@ -35,12 +35,12 @@
 - FSD(Feature-Sliced Design)에 대한 이해
 
 - FSD를 통한 관심사의 분리에 대한 이해
- - 단일책임과 역할이란 무엇인가?
- - 관심사를 하나만 가지고 있는가?
- - 어디에 무엇을 넣어야 하는가?
-
+- 단일책임과 역할이란 무엇인가?
+- 관심사를 하나만 가지고 있는가?
+- 어디에 무엇을 넣어야 하는가?
 
 체크포인트
+
 - [ ] 전역상태관리를 사용해서 상태를 분리하고 관리했나요?
 - [ ] Props Drilling을 최소화했나요?
 - [ ] shared 공통 컴포넌트를 분리했나요?
@@ -54,8 +54,6 @@
 - [ ] widget을 중심으로 데이터를 재사용가능한 형태로 분리했나요?
 ```
 
-
-
 ## [6주차] 심화과제
 
 여러분들은 비동기 코드가 들어가고 서버와 통신을 하기 시작하니 상태관리가 엄청나게 복잡해진다는 것을 알았습니다. 그래서 서버상태관리를 도입을 하면 보다 함수형 패러다임으로 선언적으로 비동기를 관리할 수 있다는 사실을 알게 되었습니다.
@@ -72,13 +70,14 @@ TanstackQuery를 이용하여 코드를 개선하기
 
 ```markdown
 목표:
-서버상태관리 도구인 TanstackQuery를 이용하여 비동기코드를 선언적인 함수형 프로그래밍으로 작성하기 
+서버상태관리 도구인 TanstackQuery를 이용하여 비동기코드를 선언적인 함수형 프로그래밍으로 작성하기
 
 - TanstackQuery의 사용법에 대한 이해
 - TanstackQuery를 이용한 비동기 코드 작성에 대한 이해
 - 비동기 코드를 선언적인 함수형 프로그래밍으로 작성하는 방법에 대한 이해
 
 체크포인트
+
 - [ ] 모든 API 호출이 TanStack Query의 useQuery와 useMutation으로 대체되었는가?
 - [ ] 쿼리 키가 적절히 설정되었는가?
 - [ ] fetch와 useState가 아닌 선언적인 함수형 프로그래밍이 적절히 적용되었는가?
@@ -90,10 +89,9 @@ TanstackQuery를 이용하여 코드를 개선하기
 - [ ] TanStack Query의 Devtools가 정상적으로 작동하는가?
 ```
 
-
 ## [6주차] 최종 과제
 
-FSD는 하나의 제안이지만, 여러분들은 FSD를 적용해보고 나면 조금 더 나은 구조를 만들 수 있다는 것을 알게 되었습니다. 
+FSD는 하나의 제안이지만, 여러분들은 FSD를 적용해보고 나면 조금 더 나은 구조를 만들 수 있다는 것을 알게 되었습니다.
 그래서 여러분들은 FSD를 적용해보고 나서 다음과 같은 추가적인 목표를 세웠습니다.
 
 **조금 더 현대적이면서도 기능 중심의 폴더 구조를 만들 수 있지 않을까?**
@@ -102,5 +100,6 @@ FSD는 하나의 제안이지만, 여러분들은 FSD를 적용해보고 나면
 FSD가 아닌 자신만의 기능 중심의 폴더 구조를 만들어보세요.
 
 꼭 기억할 점
-1. 자신만의 기능 중심의 폴더라고 했지만, 그 모습이 상당히 유니크하고 독창적이지는 않을 거에요. 아마 적절한 모법사례의 조합으로 수렴될 거에요. 
-2. 그리고 그게 잘하는 거에요. 좋은 코드는? 자신보돠 남들에게 모두에게 이해하기 쉬운 코드니까요.
\ No newline at end of file
+
+1. 자신만의 기능 중심의 폴더라고 했지만, 그 모습이 상당히 유니크하고 독창적이지는 않을 거에요. 아마 적절한 모법사례의 조합으로 수렴될 거에요.
+2. 그리고 그게 잘하는 거에요. 좋은 코드는? 자신보돠 남들에게 모두에게 이해하기 쉬운 코드니까요.
diff --git a/docs/clean-code-analysis.md b/docs/clean-code-analysis.md
new file mode 100644
index 000000000..4f2395b6f
--- /dev/null
+++ b/docs/clean-code-analysis.md
@@ -0,0 +1,474 @@
+# 클린 코드 분석 보고서
+
+## 분석 개요
+
+현재 프로젝트를 Clean Code 원칙과 프론트엔드 디자인 가이드라인을 기반으로 분석한 결과를 정리합니다.
+
+## 주요 문제점 분석
+
+### 1. 단일 책임 원칙(SRP) 위반
+
+#### 문제점
+
+**PostsManagerPage.tsx (815줄)** - 거대한 컴포넌트
+
+- 18개의 useState로 과도한 상태 관리
+- 게시물, 댓글, 사용자, UI 상태를 모두 한 곳에서 처리
+- 함수들이 20줄을 초과하여 단일 책임 원칙 위반
+
+```typescript
+// 현재 문제 상황 (예시)
+const PostsManager = () => {
+  // 18개의 useState - 너무 많은 책임
+  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')
+  );
+  // ... 14개 더
+
+  // 92줄의 fetchPosts 함수 - SRP 위반
+  const fetchPosts = () => {
+    setLoading(true);
+    let postsData;
+    let usersData;
+    // 복잡한 로직...
+  };
+};
+```
+
+#### 개선 방향
+
+- 각 도메인별 컴포넌트 분리 (Posts, Comments, Users)
+- 훅을 통한 로직 분리 (usePostsManager, useCommentsManager)
+- 함수당 20줄 이하로 제한
+
+### 2. 네이밍 규칙 위반
+
+#### 문제점 분석
+
+현재 코드의 네이밍이 일관성 없고 예측 가능하지 않음:
+
+```typescript
+// ❌ 문제가 있는 네이밍
+const openPostDetail = post => {}; // 동사+명사 혼재
+const showAddDialog = false; // boolean은 is/has로 시작해야 함
+const newPost = {}; // 상태의 의미가 불명확
+const selectedPost = null; // null 초기값으로 타입 불명확
+```
+
+#### Clean Code 네이밍 원칙 적용
+
+```typescript
+// ✅ 개선된 네이밍
+const displayPostDetail = post => {}; // 동작: display~()
+const isAddDialogVisible = false; // 상태: is~
+const draftPost = {}; // 명확한 의미
+const currentSelectedPost = null; // 맥락 추가
+```
+
+### 3. 타입 안전성 부족
+
+#### 문제점
+
+```typescript
+// ❌ 타입 정의 부족
+const [posts, setPosts] = useState([]);           // any[]
+const [selectedPost, setSelectedPost] = useState(null); // any | null
+const [comments, setComments] = useState({});     // any
+
+// API 응답 타입 미정의
+.then(response => response.json())
+.then(data => {  // data: any
+  postsData = data;
+});
+```
+
+#### 개선 방향
+
+```typescript
+// ✅ 완전한 타입 정의
+interface Post {
+  id: number;
+  title: string;
+  body: string;
+  userId: number;
+  tags: string[];
+  reactions: {
+    likes: number;
+    dislikes: number;
+  };
+  author?: User;
+}
+
+interface ApiResponse<T> {
+  data: T;
+  total: number;
+  skip: number;
+  limit: number;
+}
+
+const [posts, setPosts] = useState<Post[]>([]);
+const [selectedPost, setSelectedPost] = useState<Post | null>(null);
+```
+
+### 4. 관심사 분리 부족
+
+#### 문제점 - 코드 응집도(Cohesion) 문제
+
+현재 하나의 컴포넌트에서 모든 관심사를 처리:
+
+```typescript
+// ❌ 모든 관심사가 섞여 있음
+const PostsManager = () => {
+  // 1. URL 상태 관리
+  const updateURL = () => {};
+
+  // 2. Posts CRUD
+  const fetchPosts = () => {};
+  const addPost = () => {};
+  const updatePost = () => {};
+  const deletePost = () => {};
+
+  // 3. Comments CRUD
+  const fetchComments = () => {};
+  const addComment = () => {};
+  const updateComment = () => {};
+  const deleteComment = () => {};
+
+  // 4. UI 상태 관리
+  const openPostDetail = () => {};
+  const openUserModal = () => {};
+
+  // 5. 검색/필터링
+  const searchPosts = () => {};
+  const fetchPostsByTag = () => {};
+};
+```
+
+#### 개선 방향 - 도메인별 분리
+
+```typescript
+// ✅ 관심사별 분리
+// features/posts/
+const usePostsManager = () => {};
+const PostsList = () => {};
+const PostDetail = () => {};
+
+// features/comments/
+const useCommentsManager = () => {};
+const CommentsList = () => {};
+const CommentForm = () => {};
+
+// features/search/
+const useSearchManager = () => {};
+const SearchFilters = () => {};
+
+// shared/hooks/
+const useUrlSync = () => {};
+```
+
+### 5. 중복 코드 (DRY 원칙 위반)
+
+#### 문제점
+
+CRUD 패턴이 반복되지만 추상화되지 않음:
+
+```typescript
+// ❌ 중복되는 CRUD 패턴
+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 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);
+  }
+};
+```
+
+#### 개선 방향
+
+```typescript
+// ✅ 공통 API 클라이언트
+const apiClient = {
+  async post<T>(url: string, data: unknown): Promise<T> {
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+    if (!response.ok) throw new Error(`API Error: ${response.status}`);
+    return response.json();
+  },
+};
+
+// ✅ 재사용 가능한 훅
+const useEntityManager = <T>(endpoint: string) => {
+  const add = async (data: Partial<T>) => {
+    return await apiClient.post(`${endpoint}/add`, data);
+  };
+  // ... 다른 CRUD 메서드
+};
+```
+
+### 6. 컴포넌트 결합도(Coupling) 문제
+
+#### 문제점 - 거대한 렌더링 함수
+
+```typescript
+// ❌ 815줄의 거대한 컴포넌트
+return (
+  <Card className='w-full max-w-6xl mx-auto'>
+    {/* 게시물 테이블 */}
+    {loading ? (
+      <div className='flex justify-center p-4'>로딩 중...</div>
+    ) : (
+      <Table>
+        {/* 복잡한 테이블 로직 */}
+      </Table>
+    )}
+
+    {/* 5개의 서로 다른 Dialog */}
+    <Dialog open={showAddDialog}>...</Dialog>
+    <Dialog open={showEditDialog}>...</Dialog>
+    <Dialog open={showAddCommentDialog}>...</Dialog>
+    <Dialog open={showEditCommentDialog}>...</Dialog>
+    <Dialog open={showPostDetailDialog}>...</Dialog>
+    <Dialog open={showUserModal}>...</Dialog>
+  </Card>
+);
+```
+
+#### 개선 방향 - 컴포넌트 조합 패턴
+
+```typescript
+// ✅ 작고 집중된 컴포넌트들의 조합
+const PostsManagerPage = () => {
+  return (
+    <PostsManagerLayout>
+      <PostsSearchFilters />
+      <PostsTable />
+      <PostsPagination />
+      <PostsDialogManager />
+    </PostsManagerLayout>
+  );
+};
+
+const PostsDialogManager = () => {
+  return (
+    <>
+      <AddPostDialog />
+      <EditPostDialog />
+      <PostDetailDialog />
+      <UserInfoDialog />
+    </>
+  );
+};
+```
+
+### 7. 매직 넘버 및 상수 관리
+
+#### 문제점
+
+```typescript
+// ❌ 매직 넘버 남발
+const [limit, setLimit] = useState(parseInt(queryParams.get('limit') || '10'));
+<Textarea rows={30} />
+<Textarea rows={15} />
+```
+
+#### 개선 방향
+
+```typescript
+// ✅ 의미있는 상수 정의
+const DEFAULT_PAGE_LIMIT = 10;
+const TEXTAREA_ROWS = {
+  LARGE: 30,
+  MEDIUM: 15,
+  SMALL: 5,
+} as const;
+
+const [limit, setLimit] = useState(
+  parseInt(queryParams.get('limit') || String(DEFAULT_PAGE_LIMIT))
+);
+```
+
+### 8. 에러 처리 부족
+
+#### 문제점
+
+```typescript
+// ❌ 단순한 에러 처리
+.catch(error => {
+  console.error('게시물 가져오기 오류:', error);
+});
+```
+
+#### 개선 방향
+
+```typescript
+// ✅ 체계적인 에러 처리
+const useErrorHandler = () => {
+  const handleApiError = (error: Error, context: string) => {
+    logError(error, context);
+    showUserFriendlyMessage(error);
+    // 에러 모니터링 서비스로 전송
+  };
+  return { handleApiError };
+};
+```
+
+## 프론트엔드 디자인 원칙 평가
+
+### 1. 가독성 (Readability) 평가
+
+#### 문제점
+
+- ❌ **매직 넘버**: `rows={30}`, `rows={15}` 등 의미 불명확
+- ❌ **복잡한 조건문**: 중첩된 삼항 연산자와 조건문
+- ❌ **구현 세부사항 노출**: API 호출 로직이 컴포넌트에 직접 노출
+
+#### 개선 필요사항
+
+- 매직 넘버를 명명된 상수로 변경
+- 복잡한 조건문을 함수로 추출
+- API 로직을 커스텀 훅으로 추상화
+
+### 2. 예측 가능성 (Predictability) 평가
+
+#### 문제점
+
+- ❌ **타입 일관성 부족**: API 응답이 any 타입으로 예측 불가
+- ❌ **네이밍 혼재**: `openPostDetail` vs `showAddDialog` 등 일관성 없음
+- ❌ **사이드 이펙트**: 함수 내에서 예상치 못한 상태 변경
+
+#### 개선 필요사항
+
+- 모든 API 응답에 타입 정의
+- 네이밍 규칙 통일 (동작: verb+Noun, 상태: is/has+Adjective)
+- 순수 함수와 사이드 이펙트 분리
+
+### 3. 응집도 (Cohesion) 평가
+
+#### 문제점
+
+- ❌ **기능별 분산**: 게시물, 댓글, 사용자 로직이 하나의 파일에 혼재
+- ❌ **폼 응집도 부족**: 관련 없는 상태들이 함께 관리됨
+
+#### 개선 필요사항
+
+- 도메인별 폴더 구조 도입
+- 관련 기능끼리 그룹화
+- Form 레벨 응집도 고려한 상태 관리
+
+### 4. 결합도 (Coupling) 평가
+
+#### 문제점
+
+- ❌ **과도한 Props 전달**: 렌더링 함수 내에서 직접 상태 접근
+- ❌ **하드 코딩된 의존성**: API URL이 하드코딩됨
+
+#### 개선 필요사항
+
+- 컴포넌트 조합 패턴 적용
+- 의존성 주입을 통한 결합도 감소
+
+## 개선 우선순위
+
+### 1순위: 긴급 (Critical)
+
+1. **컴포넌트 분리**: PostsManagerPage 815줄 → 50줄 이하 컴포넌트들로 분리
+2. **타입 정의**: 모든 데이터에 TypeScript 타입 정의
+3. **상태 관리 개선**: 18개 useState → 도메인별 상태 관리
+
+### 2순위: 중요 (High)
+
+1. **네이밍 규칙 통일**: Clean Code 네이밍 패턴 적용
+2. **API 로직 분리**: 커스텀 훅 또는 서비스 레이어로 분리
+3. **에러 처리**: 체계적인 에러 핸들링 구현
+
+### 3순위: 개선 (Medium)
+
+1. **중복 코드 제거**: 공통 CRUD 패턴 추상화
+2. **매직 넘버 상수화**: 의미있는 상수 정의
+3. **폴더 구조**: FSD 아키텍처 적용
+
+### 4순위: 최적화 (Low)
+
+1. **성능 최적화**: React.memo, useMemo 적용
+2. **접근성 개선**: ARIA 속성 추가
+3. **테스트 코드**: 단위 테스트 및 통합 테스트 작성
+
+## 예상 리팩토링 결과
+
+### Before (현재)
+
+```
+src/
+├── pages/
+│   └── PostsManagerPage.tsx (815줄)
+└── components/
+    └── index.tsx (모든 UI 컴포넌트)
+```
+
+### After (개선 후)
+
+```
+src/
+├── entities/
+│   ├── post/
+│   │   ├── model/
+│   │   ├── ui/
+│   │   └── api/
+│   ├── comment/
+│   └── user/
+├── features/
+│   ├── posts-management/
+│   ├── comments-management/
+│   └── search-and-filter/
+├── widgets/
+│   └── posts-manager/
+└── shared/
+    ├── ui/
+    ├── api/
+    └── hooks/
+```
+
+## 결론
+
+현재 코드는 기능적으로는 잘 동작하지만, 클린 코드 관점에서 다음과 같은 주요 개선이 필요합니다:
+
+1. **단일 책임 원칙 적용**: 거대한 컴포넌트를 작은 단위로 분리
+2. **타입 안전성 확보**: 완전한 TypeScript 타입 시스템 도입
+3. **관심사 분리**: 도메인별 로직 분리 및 FSD 아키텍처 적용
+4. **코드 일관성**: 네이밍 규칙 및 패턴 통일
+5. **재사용성 향상**: 공통 로직 추상화 및 컴포넌트 모듈화
+
+이러한 개선을 통해 유지보수성, 확장성, 그리고 개발자 경험을 크게 향상시킬 수 있을 것입니다.
diff --git a/docs/fsd-rules.md b/docs/fsd-rules.md
new file mode 100644
index 000000000..83645edc4
--- /dev/null
+++ b/docs/fsd-rules.md
@@ -0,0 +1,257 @@
+# FSD (Feature-Sliced Design) 레이어 Import 규칙
+
+## 개요
+
+FSD 아키텍처의 핵심 원칙을 ESLint를 통해 강제하는 규칙들입니다. 이 규칙들은 레이어 간 의존성 방향을 제어하고, 아키텍처의 일관성을 유지하는 데 도움을 줍니다.
+
+## 레이어 구조
+
+```
+src/
+├── 1_app/          # 애플리케이션 레이어 (최상위)
+├── 2_pages/        # 페이지 레이어
+├── 3_widgets/      # 위젯 레이어
+├── 4_features/     # 기능 레이어
+├── 5_entities/     # 엔티티 레이어
+└── 6_shared/       # 공유 레이어 (최하위)
+```
+
+## Import 규칙
+
+### 1. `fsd/forbidden-imports` - 금지된 Import
+
+**설정**: `'error'`
+
+**목적**: FSD 레이어 간 올바른 의존성 방향 강제
+
+**규칙**:
+
+- 상위 레이어는 하위 레이어를 import할 수 있음
+- 하위 레이어는 상위 레이어를 import할 수 없음
+- 예: `features`는 `pages`를 import할 수 없음
+
+**예시**:
+
+```typescript
+// ❌ 잘못된 예시
+// src/4_features/user-profile/index.ts
+import { UserProfilePage } from '@/2_pages/user-profile';
+// 금지!
+
+// ✅ 올바른 예시
+// src/2_pages/user-profile/index.ts
+import { UserProfileWidget } from '@/3_widgets/user-profile';
+
+// 허용
+```
+
+### 2. `fsd/no-relative-imports` - 상대 경로 Import 금지
+
+**설정**: `'error'`
+
+**목적**: 절대 경로(@) 사용 강제로 코드 가독성 향상
+
+**규칙**:
+
+- 슬라이스/레이어 간 import 시 상대 경로 사용 금지
+- 별칭(@) 사용 필수
+- 같은 슬라이스 내에서는 상대 경로 허용
+
+**예시**:
+
+```typescript
+// ❌ 잘못된 예시
+import { Button } from '../../../shared/ui/button';
+
+// ✅ 올바른 예시
+import { Button } from '@/6_shared/ui/button';
+```
+
+### 3. `fsd/no-public-api-sidestep` - Public API 우회 금지
+
+**설정**: `'error'`
+
+**목적**: Public API(index 파일)를 통한 import만 허용
+
+**규칙**:
+
+- 각 슬라이스의 내부 구현을 직접 import 금지
+- 반드시 index 파일을 통해 export된 것만 import
+
+**예시**:
+
+```typescript
+// ❌ 잘못된 예시
+import { UserCard } from '@/5_entities/user/ui/user-card';
+
+// ✅ 올바른 예시
+import { UserCard } from '@/5_entities/user';
+```
+
+### 4. `fsd/no-cross-slice-dependency` - 슬라이스 간 직접 의존성 방지
+
+**설정**: `'error'`
+
+**목적**: 같은 레이어 내 슬라이스 간 직접 import 방지
+
+**규칙**:
+
+- 같은 레이어의 다른 슬라이스를 직접 import 금지
+- 공통 기능은 shared 레이어로 이동
+
+**예시**:
+
+```typescript
+// ❌ 잘못된 예시
+// src/4_features/auth/index.ts
+import { userSlice } from '@/4_features/user';
+// 같은 레이어 간 import 금지
+
+// ✅ 올바른 예시
+// 공통 기능을 shared로 이동
+import { authUtils } from '@/6_shared/lib/auth';
+```
+
+### 5. `fsd/no-ui-in-business-logic` - 비즈니스 로직에서 UI Import 방지
+
+**설정**: `'error'`
+
+**목적**: 비즈니스 로직과 UI 로직의 분리
+
+**규칙**:
+
+- 비즈니스 로직 레이어에서 UI 컴포넌트 import 금지
+- UI는 상위 레이어에서만 사용
+
+**예시**:
+
+```typescript
+// ❌ 잘못된 예시
+// src/5_entities/user/model/user-slice.ts
+import { UserCard } from './ui/user-card'; // 비즈니스 로직에서 UI import 금지
+
+// ✅ 올바른 예시
+// UI는 상위 레이어에서 사용
+// src/3_widgets/user-profile/index.ts
+import { UserCard } from '@/5_entities/user';
+```
+
+### 6. `fsd/no-global-store-imports` - 전역 스토어 직접 Import 금지
+
+**설정**: `'error'`
+
+**목적**: 전역 상태 관리의 중앙화
+
+**규칙**:
+
+- 전역 스토어를 직접 import 금지
+- 반드시 shared 레이어를 통해 접근
+
+**예시**:
+
+```typescript
+// ❌ 잘못된 예시
+import { store } from '@/1_app/store';
+// ✅ 올바른 예시
+import { useAppStore } from '@/6_shared/lib/store';
+```
+
+### 7. `fsd/ordered-imports` - Import 순서 강제
+
+**설정**: `'warn'`
+
+**목적**: FSD 레이어 기반으로 import 순서 강제
+
+**규칙**:
+
+- 레이어 순서대로 import 정렬
+- 1_app → 2_pages → 3_widgets → 4_features → 5_entities → 6_shared
+
+**예시**:
+
+```typescript
+// ✅ 올바른 순서
+import { AppProvider } from '@/1_app/providers';
+import { UserProfilePage } from '@/2_pages/user-profile';
+import { UserProfileWidget } from '@/3_widgets/user-profile';
+import { useUserProfile } from '@/4_features/user-profile';
+import { User } from '@/5_entities/user';
+import { Button } from '@/6_shared/ui/button';
+```
+
+## 설정 방법
+
+### ESLint 설정
+
+```javascript
+// eslint.config.js
+import fsdPlugin from 'eslint-plugin-fsd-lint';
+
+export default tseslint.config({
+  extends: [
+    // ... 기존 설정
+    fsdPlugin.configs.recommended,
+  ],
+  plugins: {
+    // ... 기존 플러그인
+    fsd: fsdPlugin,
+  },
+  rules: {
+    // FSD Rules
+    'fsd/forbidden-imports': 'error',
+    'fsd/no-relative-imports': 'error',
+    'fsd/no-public-api-sidestep': 'error',
+    'fsd/no-cross-slice-dependency': 'error',
+    'fsd/no-ui-in-business-logic': 'error',
+    'fsd/no-global-store-imports': 'error',
+    'fsd/ordered-imports': 'warn',
+  },
+});
+```
+
+## 모범 사례
+
+### 1. 슬라이스 구조
+
+```
+src/4_features/user/
+├── index.ts          # Public API
+├── model/
+│   ├── user-slice.ts
+│   └── types.ts
+├── ui/
+│   └── user-card.tsx
+└── lib/
+    └── user-utils.ts
+```
+
+### 2. Public API 작성
+
+```typescript
+// src/4_features/user/index.ts
+export { UserCard } from './ui/user-card';
+export { userSlice } from './model/user-slice';
+export type { User } from './model/types';
+```
+
+### 3. Import 패턴
+
+```typescript
+// ✅ 권장 패턴
+import { type User, UserCard, userSlice } from '@/4_features/user';
+import { Button } from '@/6_shared/ui/button';
+```
+
+## 주의사항
+
+1. **점진적 적용**: 기존 프로젝트에 적용 시 점진적으로 도입
+2. **예외 처리**: 특수한 경우 ESLint disable 주석 사용
+3. **팀 교육**: 팀원들과 FSD 원칙 공유 및 교육
+4. **리뷰**: 코드 리뷰 시 FSD 규칙 준수 여부 확인
+
+## 도구 지원
+
+- **ESLint**: 자동 검사 및 수정
+- **VS Code**: 실시간 오류 표시
+- **Pre-commit hooks**: 커밋 전 자동 검사
+- **CI/CD**: 빌드 시 자동 검사
diff --git a/docs/goal.md b/docs/goal.md
new file mode 100644
index 000000000..75d663de1
--- /dev/null
+++ b/docs/goal.md
@@ -0,0 +1,61 @@
+# 과제 목표
+
+## 개인 목표
+
+### 🎯 학습 목표
+
+- FSD: FSD 아키텍처 충실히 따라가보고 장단점 경험하기
+- Typescript: 타입 야무지게 처리하기. 타입만 봐도 데이터 구조가 상상이 되게
+- SRP: 단일 책임 원칙 철저하게 지키며 컴포넌트, 유틸 등 분리
+- 관심사 분리에 대한 가치관 쌓기: 무엇을 어느 위치에 넣을지 내 기준을 세워보자.
+- 추상화에 대한 평가 진행하고 스스로 검수하기
+  - 비즈니스 개념을 잘 표현하는가?
+  - 변경의 영향을 최소화하는가?
+  - 재사용성
+  - 코드의 의도를 명확하게 전달하는가?
+
+- 코드 자체를 잘 짜고 싶다. 추상화, 관심사 분리, SRP, DRY, Type 신경쓰기
+- 다른 항해러 코드 모두 읽기
+
+## 과제 목표
+
+### 기본과제
+
+> 상태관리
+> 관심사 분리
+> FSD 폴더 구조 적용
+
+- [ ] 전역상태관리를 사용해서 상태를 분리하고 관리했나요?
+- [ ] Props Drilling을 최소화했나요?
+- [ ] shared 공통 컴포넌트를 분리했나요?
+- [ ] shared 공통 로직을 분리했나요?
+- [ ] entities를 중심으로 type을 정의하고 model을 분리했나요?
+- [ ] entities를 중심으로 ui를 분리했나요?
+- [ ] entities를 중심으로 api를 분리했나요?
+- [ ] feature를 중심으로 사용자행동(이벤트 처리)를 분리했나요?
+- [ ] feature를 중심으로 ui를 분리했나요?
+- [ ] feature를 중심으로 api를 분리했나요?
+- [ ] widget을 중심으로 데이터를 재사용가능한 형태로 분리했나요?
+
+### 심화과제
+
+> tanstack 적용
+> api 관리 표준 만들기
+> 낙관적인 업데이트 적용
+
+- [ ] 모든 API 호출이 TanStack Query의 useQuery와 useMutation으로 대체되었는가?
+- [ ] 쿼리 키가 적절히 설정되었는가?
+- [ ] fetch와 useState가 아닌 선언적인 함수형 프로그래밍이 적절히 적용되었는가?
+- [ ] 캐싱과 리프레시 전략이 올바르게 구현되었는가?
+- [ ] 낙관적인 업데이트가 적용되었는가?
+- [ ] 에러 핸들링이 적절히 구현되었는가?
+- [ ] 서버 상태와 클라이언트 상태가 명확히 분리되었는가?
+- [ ] 코드가 간결하고 유지보수가 용이한 구조로 작성되었는가?
+- [ ] TanStack Query의 Devtools가 정상적으로 작동하는가?
+
+### 최종과제
+
+> 현대적인 기능 중심의 폴더 구조
+
+- FSD를 다 느껴보고 내가 생각하는 궁극의 최적 폴더 구조를 생각해보기. 하지만 유니크한게 아니라 적절한 모범 사례일 것!
+- 직관적인 폴더 구조
diff --git a/docs/refactoring-plan.md b/docs/refactoring-plan.md
new file mode 100644
index 000000000..383f50599
--- /dev/null
+++ b/docs/refactoring-plan.md
@@ -0,0 +1,922 @@
+# 클린 코드 리팩토링 계획서
+
+## 전략 개요
+
+### 리팩토링 원칙
+
+- **점진적 개선**: 한 번에 하나씩, 작은 단위로 개선
+- **안정성 우선**: 기능 변경 없이 구조만 개선
+- **영향도 최소화**: 변경 범위를 최소화하여 리스크 감소
+- **우선순위 기반**: 효과 대비 비용이 낮은 작업부터 시작
+
+### 리팩토링 매트릭스
+
+| 우선순위 | 영향도  | 작업 유형        | 예상 시간 |
+| -------- | ------- | ---------------- | --------- |
+| 🔥 최고  | 🟢 낮음 | 매직넘버, 상수화 | 1-2시간   |
+| 🔥 최고  | 🟡 중간 | 타입 정의        | 3-4시간   |
+| 🔴 높음  | 🟢 낮음 | 네이밍 통일      | 2-3시간   |
+| 🔴 높음  | 🟡 중간 | 함수 분리        | 4-6시간   |
+| 🟡 중간  | 🟡 중간 | 컴포넌트 분리    | 8-12시간  |
+| 🟡 중간  | 🔴 높음 | 상태 관리 개선   | 12-16시간 |
+
+## Phase 1: 기초 정리 (영향도 낮음, 우선순위 높음)
+
+### 1.1 매직 넘버 및 상수 정리 ⏱️ 1-2시간
+
+**영향도**: 🟢 매우 낮음 | **우선순위**: 🔥 최고 | **난이도**: ⭐
+
+#### 작업 내용
+
+```typescript
+// ❌ Before
+<Textarea rows={30} />
+<Textarea rows={15} />
+const [limit, setLimit] = useState(parseInt(queryParams.get('limit') || '10'));
+
+// ✅ After
+const TEXTAREA_ROWS = {
+  LARGE: 30,
+  MEDIUM: 15,
+  SMALL: 5,
+} as const;
+
+const PAGINATION = {
+  DEFAULT_LIMIT: 10,
+  DEFAULT_SKIP: 0,
+  LIMITS: [10, 20, 30] as const,
+} as const;
+
+const API_ENDPOINTS = {
+  POSTS: '/api/posts',
+  COMMENTS: '/api/comments',
+  USERS: '/api/users',
+  TAGS: '/api/posts/tags',
+} as const;
+```
+
+#### 체크리스트
+
+- [ ] `src/shared/constants/index.ts` 파일 생성
+- [ ] 모든 매직 넘버 식별 및 상수로 추출
+- [ ] API 엔드포인트 상수화
+- [ ] 페이지네이션 관련 상수 정의
+- [ ] UI 관련 상수 (textarea rows, 버튼 크기 등) 정의
+
+---
+
+### 1.2 TypeScript 타입 정의 ⏱️ 3-4시간
+
+**영향도**: 🟡 중간 | **우선순위**: 🔥 최고 | **난이도**: ⭐⭐
+
+#### 작업 내용
+
+```typescript
+// src/shared/types/index.ts
+export interface Post {
+  id: number;
+  title: string;
+  body: string;
+  userId: number;
+  tags: string[];
+  reactions: {
+    likes: number;
+    dislikes: number;
+  };
+  author?: User;
+}
+
+export interface Comment {
+  id: number;
+  body: string;
+  postId: number;
+  userId: number;
+  user: {
+    id: number;
+    username: string;
+  };
+  likes: number;
+}
+
+export interface User {
+  id: number;
+  username: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  age: number;
+  phone: string;
+  image: string;
+  address: {
+    address: string;
+    city: string;
+    state: string;
+  };
+  company: {
+    name: string;
+    title: string;
+  };
+}
+
+export interface ApiResponse<T> {
+  data?: T;
+  posts?: T[];
+  users?: T[];
+  comments?: T[];
+  total: number;
+  skip: number;
+  limit: number;
+}
+
+export interface PaginationParams {
+  skip: number;
+  limit: number;
+  search?: string;
+  sortBy?: string;
+  sortOrder?: 'asc' | 'desc';
+  tag?: string;
+}
+```
+
+#### 체크리스트
+
+- [ ] `src/shared/types/index.ts` 파일 생성
+- [ ] Post, Comment, User 인터페이스 정의
+- [ ] API 응답 타입 정의
+- [ ] 쿼리 파라미터 타입 정의
+- [ ] 기존 useState 타입 적용
+
+---
+
+## Phase 2: 네이밍 및 함수 정리 (영향도 낮음-중간)
+
+### 2.1 네이밍 규칙 통일 ⏱️ 2-3시간
+
+**영향도**: 🟢 낮음 | **우선순위**: 🔴 높음 | **난이도**: ⭐
+
+#### 작업 내용
+
+```typescript
+// ❌ Before
+const openPostDetail = post => {};
+const showAddDialog = false;
+const newPost = {};
+const selectedPost = null;
+
+// ✅ After - Clean Code 네이밍 패턴 적용
+const displayPostDetail = (post: Post) => {};
+const isAddDialogVisible = false;
+const draftPost: Partial<Post> = {};
+const currentSelectedPost: Post | null = null;
+```
+
+#### 네이밍 규칙
+
+```typescript
+// 액션 함수 패턴
+const fetchPosts = () => {}; // 조회: fetch~, get~
+const createPost = () => {}; // 생성: create~, add~
+const updatePost = () => {}; // 수정: update~, modify~
+const deletePost = () => {}; // 삭제: delete~, remove~
+const displayModal = () => {}; // 표시: display~, show~
+const hideModal = () => {}; // 숨김: hide~, close~
+
+// 상태 변수 패턴
+const isLoading = false; // boolean: is~, has~, can~
+const currentPage = 1; // 현재값: current~
+const selectedItems = []; // 선택된: selected~
+const draftData = {}; // 임시: draft~, temp~
+const totalCount = 0; // 수량: total~, count~
+```
+
+#### 체크리스트
+
+- [ ] 모든 함수명을 Clean Code 패턴으로 변경
+- [ ] boolean 변수는 is/has/can 접두사 사용
+- [ ] 상태 변수는 의미 명확한 이름으로 변경
+- [ ] 일관된 동사 사용 (fetch, create, update, delete)
+
+---
+
+### 2.2 작은 함수로 분리 ⏱️ 4-6시간
+
+**영향도**: 🟡 중간 | **우선순위**: 🔴 높음 | **난이도**: ⭐⭐
+
+#### 작업 내용
+
+```typescript
+// ❌ Before - 92줄의 거대한 fetchPosts 함수
+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);
+    });
+};
+
+// ✅ After - 작은 함수들로 분리 (각각 20줄 이하)
+const fetchPostsData = async (params: PaginationParams): Promise<ApiResponse<Post>> => {
+  const queryString = createQueryString(params);
+  const response = await fetch(`${API_ENDPOINTS.POSTS}?${queryString}`);
+  if (!response.ok) throw new Error(`Failed to fetch posts: ${response.status}`);
+  return response.json();
+};
+
+const fetchUsersData = async (): Promise<ApiResponse<User>> => {
+  const response = await fetch(`${API_ENDPOINTS.USERS}?limit=0&select=username,image`);
+  if (!response.ok) throw new Error(`Failed to fetch users: ${response.status}`);
+  return response.json();
+};
+
+const mergePostsWithAuthors = (posts: Post[], users: User[]): Post[] => {
+  return posts.map(post => ({
+    ...post,
+    author: users.find(user => user.id === post.userId),
+  }));
+};
+
+const createQueryString = (params: PaginationParams): string => {
+  const searchParams = new URLSearchParams();
+  Object.entries(params).forEach(([key, value]) => {
+    if (value !== undefined && value !== null && value !== '') {
+      searchParams.set(key, String(value));
+    }
+  });
+  return searchParams.toString();
+};
+
+const fetchPosts = async () => {
+  try {
+    setIsLoading(true);
+
+    const [postsResponse, usersResponse] = await Promise.all([
+      fetchPostsData({ skip, limit }),
+      fetchUsersData(),
+    ]);
+
+    const postsWithAuthors = mergePostsWithAuthors(
+      postsResponse.posts || [],
+      usersResponse.users || []
+    );
+
+    setPosts(postsWithAuthors);
+    setTotal(postsResponse.total);
+  } catch (error) {
+    handleApiError(error, 'fetchPosts');
+  } finally {
+    setIsLoading(false);
+  }
+};
+```
+
+#### 체크리스트
+
+- [ ] 20줄 이상인 모든 함수 식별
+- [ ] 각 함수를 단일 책임으로 분리
+- [ ] API 호출 로직 분리
+- [ ] 데이터 변환 로직 분리
+- [ ] 에러 처리 로직 분리
+- [ ] Promise.all을 활용한 병렬 처리 적용
+
+---
+
+## Phase 3: 로직 분리 (영향도 중간)
+
+### 3.1 에러 처리 표준화 ⏱️ 2-3시간
+
+**영향도**: 🟡 중간 | **우선순위**: 🔴 높음 | **난이도**: ⭐⭐
+
+#### 작업 내용
+
+```typescript
+// src/shared/utils/error-handler.ts
+export interface ApiError {
+  message: string;
+  status?: number;
+  context?: string;
+}
+
+export const createApiError = (error: unknown, context: string): ApiError => {
+  if (error instanceof Error) {
+    return {
+      message: error.message,
+      context,
+      status: (error as any).status,
+    };
+  }
+
+  return {
+    message: 'Unknown error occurred',
+    context,
+  };
+};
+
+export const handleApiError = (error: unknown, context: string): void => {
+  const apiError = createApiError(error, context);
+
+  // 콘솔 로깅
+  console.error(`[${apiError.context}] ${apiError.message}`, apiError);
+
+  // 사용자에게 알림 (추후 토스트 시스템으로 대체)
+  alert(`오류가 발생했습니다: ${apiError.message}`);
+
+  // 에러 모니터링 서비스로 전송 (추후 Sentry 등)
+  // sendErrorToMonitoring(apiError);
+};
+```
+
+#### 체크리스트
+
+- [ ] `src/shared/utils/error-handler.ts` 생성
+- [ ] 모든 try-catch를 표준 에러 핸들러로 교체
+- [ ] API 에러 타입 정의
+- [ ] 사용자 친화적 에러 메시지 표시
+
+---
+
+### 3.2 API 클라이언트 표준화 ⏱️ 3-4시간
+
+**영향도**: 🟡 중간 | **우선순위**: 🔴 높음 | **난이도**: ⭐⭐
+
+#### 작업 내용
+
+```typescript
+// src/shared/api/client.ts
+interface RequestConfig {
+  method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+  headers?: Record<string, string>;
+  body?: unknown;
+}
+
+export class ApiClient {
+  private baseURL: string;
+  private defaultHeaders: Record<string, string>;
+
+  constructor(baseURL = '', defaultHeaders = {}) {
+    this.baseURL = baseURL;
+    this.defaultHeaders = {
+      'Content-Type': 'application/json',
+      ...defaultHeaders,
+    };
+  }
+
+  private async request<T>(url: string, config: RequestConfig): Promise<T> {
+    const response = await fetch(`${this.baseURL}${url}`, {
+      method: config.method,
+      headers: { ...this.defaultHeaders, ...config.headers },
+      body: config.body ? JSON.stringify(config.body) : undefined,
+    });
+
+    if (!response.ok) {
+      throw new Error(`API Error: ${response.status} ${response.statusText}`);
+    }
+
+    return response.json();
+  }
+
+  async get<T>(url: string): Promise<T> {
+    return this.request<T>(url, { method: 'GET' });
+  }
+
+  async post<T>(url: string, data: unknown): Promise<T> {
+    return this.request<T>(url, { method: 'POST', body: data });
+  }
+
+  async put<T>(url: string, data: unknown): Promise<T> {
+    return this.request<T>(url, { method: 'PUT', body: data });
+  }
+
+  async patch<T>(url: string, data: unknown): Promise<T> {
+    return this.request<T>(url, { method: 'PATCH', body: data });
+  }
+
+  async delete<T>(url: string): Promise<T> {
+    return this.request<T>(url, { method: 'DELETE' });
+  }
+}
+
+export const apiClient = new ApiClient();
+
+// src/shared/api/posts.ts
+export const postsApi = {
+  async fetchPosts(params: PaginationParams): Promise<ApiResponse<Post>> {
+    const queryString = createQueryString(params);
+    return apiClient.get(`${API_ENDPOINTS.POSTS}?${queryString}`);
+  },
+
+  async fetchPostById(id: number): Promise<Post> {
+    return apiClient.get(`${API_ENDPOINTS.POSTS}/${id}`);
+  },
+
+  async createPost(post: Partial<Post>): Promise<Post> {
+    return apiClient.post(`${API_ENDPOINTS.POSTS}/add`, post);
+  },
+
+  async updatePost(id: number, post: Partial<Post>): Promise<Post> {
+    return apiClient.put(`${API_ENDPOINTS.POSTS}/${id}`, post);
+  },
+
+  async deletePost(id: number): Promise<void> {
+    return apiClient.delete(`${API_ENDPOINTS.POSTS}/${id}`);
+  },
+
+  async searchPosts(query: string): Promise<ApiResponse<Post>> {
+    return apiClient.get(
+      `${API_ENDPOINTS.POSTS}/search?q=${encodeURIComponent(query)}`
+    );
+  },
+
+  async fetchPostsByTag(tag: string): Promise<ApiResponse<Post>> {
+    return apiClient.get(
+      `${API_ENDPOINTS.POSTS}/tag/${encodeURIComponent(tag)}`
+    );
+  },
+};
+```
+
+#### 체크리스트
+
+- [ ] `src/shared/api/client.ts` 생성
+- [ ] `src/shared/api/posts.ts`, `comments.ts`, `users.ts` 생성
+- [ ] 모든 fetch 호출을 API 클라이언트로 교체
+- [ ] API 응답 타입 적용
+
+---
+
+## Phase 4: 컴포넌트 분리 (영향도 중간-높음)
+
+### 4.1 렌더링 함수 분리 ⏱️ 4-6시간
+
+**영향도**: 🟡 중간 | **우선순위**: 🟡 중간 | **난이도**: ⭐⭐⭐
+
+#### 작업 내용
+
+```typescript
+// ❌ Before - 거대한 return 문
+return (
+  <Card className='w-full max-w-6xl mx-auto'>
+    {/* 200줄의 복잡한 JSX */}
+  </Card>
+);
+
+// ✅ After - 작은 컴포넌트들로 분리
+const PostsManagerPage = () => {
+  return (
+    <PostsManagerLayout>
+      <PostsManagerHeader />
+      <PostsSearchAndFilters />
+      <PostsTable />
+      <PostsPagination />
+      <PostsDialogManager />
+    </PostsManagerLayout>
+  );
+};
+
+// src/pages/PostsManagerPage/components/PostsManagerHeader.tsx
+const PostsManagerHeader = () => {
+  const { openAddDialog } = usePostsDialog();
+
+  return (
+    <CardHeader>
+      <CardTitle className='flex items-center justify-between'>
+        <span>게시물 관리자</span>
+        <Button onClick={openAddDialog}>
+          <Plus className='w-4 h-4 mr-2' />
+          게시물 추가
+        </Button>
+      </CardTitle>
+    </CardHeader>
+  );
+};
+
+// src/pages/PostsManagerPage/components/PostsSearchAndFilters.tsx
+const PostsSearchAndFilters = () => {
+  const { searchQuery, setSearchQuery, handleSearch } = usePostsSearch();
+  const { selectedTag, setSelectedTag, tags } = usePostsTags();
+  const { sortBy, setSortBy, sortOrder, setSortOrder } = usePostsSort();
+
+  return (
+    <div className='flex gap-4'>
+      <PostsSearchInput
+        value={searchQuery}
+        onChange={setSearchQuery}
+        onSearch={handleSearch}
+      />
+      <PostsTagFilter
+        selectedTag={selectedTag}
+        onTagChange={setSelectedTag}
+        tags={tags}
+      />
+      <PostsSortControls
+        sortBy={sortBy}
+        sortOrder={sortOrder}
+        onSortByChange={setSortBy}
+        onSortOrderChange={setSortOrder}
+      />
+    </div>
+  );
+};
+```
+
+#### 체크리스트
+
+- [ ] PostsManagerHeader 컴포넌트 분리
+- [ ] PostsSearchAndFilters 컴포넌트 분리
+- [ ] PostsTable 컴포넌트 분리
+- [ ] PostsPagination 컴포넌트 분리
+- [ ] PostsDialogManager 컴포넌트 분리
+- [ ] 각 컴포넌트별 파일 생성
+
+---
+
+### 4.2 커스텀 훅 분리 ⏱️ 6-8시간
+
+**영향도**: 🟡 중간 | **우선순위**: 🟡 중간 | **난이도**: ⭐⭐⭐
+
+#### 작업 내용
+
+```typescript
+// src/pages/PostsManagerPage/hooks/usePostsManager.ts
+export const usePostsManager = () => {
+  const [posts, setPosts] = useState<Post[]>([]);
+  const [totalCount, setTotalCount] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const fetchPosts = async (params: PaginationParams) => {
+    try {
+      setIsLoading(true);
+      const [postsResponse, usersResponse] = await Promise.all([
+        postsApi.fetchPosts(params),
+        usersApi.fetchUsers({ limit: 0, select: 'username,image' }),
+      ]);
+
+      const postsWithAuthors = mergePostsWithAuthors(
+        postsResponse.posts || [],
+        usersResponse.users || []
+      );
+
+      setPosts(postsWithAuthors);
+      setTotalCount(postsResponse.total);
+    } catch (error) {
+      handleApiError(error, 'fetchPosts');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const createPost = async (postData: Partial<Post>) => {
+    try {
+      const newPost = await postsApi.createPost(postData);
+      setPosts(prevPosts => [newPost, ...prevPosts]);
+      return newPost;
+    } catch (error) {
+      handleApiError(error, 'createPost');
+      throw error;
+    }
+  };
+
+  const updatePost = async (id: number, postData: Partial<Post>) => {
+    try {
+      const updatedPost = await postsApi.updatePost(id, postData);
+      setPosts(prevPosts =>
+        prevPosts.map(post => post.id === id ? updatedPost : post)
+      );
+      return updatedPost;
+    } catch (error) {
+      handleApiError(error, 'updatePost');
+      throw error;
+    }
+  };
+
+  const deletePost = async (id: number) => {
+    try {
+      await postsApi.deletePost(id);
+      setPosts(prevPosts => prevPosts.filter(post => post.id !== id));
+    } catch (error) {
+      handleApiError(error, 'deletePost');
+      throw error;
+    }
+  };
+
+  return {
+    posts,
+    totalCount,
+    isLoading,
+    fetchPosts,
+    createPost,
+    updatePost,
+    deletePost,
+  };
+};
+
+// src/pages/PostsManagerPage/hooks/usePostsSearch.ts
+export const usePostsSearch = () => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const { fetchPosts } = usePostsManager();
+  const { currentParams } = usePagination();
+
+  const handleSearch = async () => {
+    if (!searchQuery.trim()) {
+      await fetchPosts(currentParams);
+      return;
+    }
+
+    try {
+      const response = await postsApi.searchPosts(searchQuery);
+      // 검색 결과 처리
+    } catch (error) {
+      handleApiError(error, 'searchPosts');
+    }
+  };
+
+  const highlightText = (text: string, highlight: string) => {
+    if (!text || !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>
+    );
+  };
+
+  return {
+    searchQuery,
+    setSearchQuery,
+    handleSearch,
+    highlightText,
+  };
+};
+
+// src/pages/PostsManagerPage/hooks/usePagination.ts
+export const usePagination = () => {
+  const [currentSkip, setCurrentSkip] = useState(0);
+  const [currentLimit, setCurrentLimit] = useState(PAGINATION.DEFAULT_LIMIT);
+
+  const { updateURL } = useUrlSync();
+
+  const goToNextPage = () => {
+    setCurrentSkip(prevSkip => prevSkip + currentLimit);
+    updateURL();
+  };
+
+  const goToPreviousPage = () => {
+    setCurrentSkip(prevSkip => Math.max(0, prevSkip - currentLimit));
+    updateURL();
+  };
+
+  const changeLimit = (newLimit: number) => {
+    setCurrentLimit(newLimit);
+    setCurrentSkip(0); // 페이지 크기 변경 시 첫 페이지로
+    updateURL();
+  };
+
+  const currentParams: PaginationParams = {
+    skip: currentSkip,
+    limit: currentLimit,
+  };
+
+  return {
+    currentSkip,
+    currentLimit,
+    currentParams,
+    goToNextPage,
+    goToPreviousPage,
+    changeLimit,
+  };
+};
+```
+
+#### 체크리스트
+
+- [ ] usePostsManager 훅 생성
+- [ ] useCommentsManager 훅 생성
+- [ ] usePostsSearch 훅 생성
+- [ ] usePagination 훅 생성
+- [ ] usePostsDialog 훅 생성
+- [ ] useUrlSync 훅 생성
+- [ ] 기존 로직을 훅으로 이전
+
+---
+
+## Phase 5: 상태 관리 개선 (영향도 높음)
+
+### 5.1 전역 상태 관리 도입 ⏱️ 8-12시간
+
+**영향도**: 🔴 높음 | **우선순위**: 🟡 중간 | **난이도**: ⭐⭐⭐⭐
+
+#### 작업 내용
+
+```typescript
+// src/shared/store/posts.ts
+import { atom } from 'jotai';
+
+export const postsAtom = atom<Post[]>([]);
+export const postsLoadingAtom = atom<boolean>(false);
+export const postsTotalCountAtom = atom<number>(0);
+export const selectedPostAtom = atom<Post | null>(null);
+
+// Derived atoms
+export const postsCountAtom = atom(get => get(postsAtom).length);
+
+// Action atoms
+export const fetchPostsAtom = atom(
+  null,
+  async (get, set, params: PaginationParams) => {
+    set(postsLoadingAtom, true);
+    try {
+      const [postsResponse, usersResponse] = await Promise.all([
+        postsApi.fetchPosts(params),
+        usersApi.fetchUsers({ limit: 0, select: 'username,image' }),
+      ]);
+
+      const postsWithAuthors = mergePostsWithAuthors(
+        postsResponse.posts || [],
+        usersResponse.users || []
+      );
+
+      set(postsAtom, postsWithAuthors);
+      set(postsTotalCountAtom, postsResponse.total);
+    } catch (error) {
+      handleApiError(error, 'fetchPosts');
+    } finally {
+      set(postsLoadingAtom, false);
+    }
+  }
+);
+
+// src/shared/store/ui.ts
+export const dialogsAtom = atom({
+  isAddPostDialogOpen: false,
+  isEditPostDialogOpen: false,
+  isPostDetailDialogOpen: false,
+  isUserModalOpen: false,
+  isAddCommentDialogOpen: false,
+  isEditCommentDialogOpen: false,
+});
+
+export const searchAtom = atom({
+  query: '',
+  selectedTag: '',
+  sortBy: '',
+  sortOrder: 'asc' as const,
+});
+```
+
+#### 체크리스트
+
+- [ ] Jotai atoms 정의
+- [ ] Posts 관련 상태를 atom으로 이전
+- [ ] Comments 관련 상태를 atom으로 이전
+- [ ] UI 상태를 atom으로 이전
+- [ ] 컴포넌트에서 useAtom 사용
+- [ ] 기존 useState 제거
+
+---
+
+## Phase 6: 폴더 구조 개편 (영향도 높음)
+
+### 6.1 FSD 아키텍처 적용 ⏱️ 12-16시간
+
+**영향도**: 🔴 높음 | **우선순위**: 🟡 중간 | **난이도**: ⭐⭐⭐⭐⭐
+
+#### 최종 폴더 구조
+
+```
+src/
+├── app/                          # 앱 설정 및 프로바이더
+│   ├── providers/
+│   └── App.tsx
+├── pages/                        # 페이지 컴포넌트
+│   └── posts-manager/
+│       ├── ui/
+│       └── index.ts
+├── widgets/                      # 복합 UI 블록
+│   ├── posts-table/
+│   ├── posts-search/
+│   └── posts-pagination/
+├── features/                     # 사용자 시나리오
+│   ├── posts-management/
+│   │   ├── ui/
+│   │   ├── model/
+│   │   └── api/
+│   ├── comments-management/
+│   └── search-and-filter/
+├── entities/                     # 비즈니스 엔티티
+│   ├── post/
+│   │   ├── model/
+│   │   ├── ui/
+│   │   └── api/
+│   ├── comment/
+│   └── user/
+└── shared/                       # 공통 코드
+    ├── ui/
+    ├── api/
+    ├── hooks/
+    ├── utils/
+    ├── constants/
+    └── types/
+```
+
+## 성공 지표 및 검증 방법
+
+### 정량적 지표
+
+- [ ] 컴포넌트당 평균 줄 수: 815줄 → 50줄 이하
+- [ ] 함수당 평균 줄 수: 20줄 이하
+- [ ] TypeScript 에러 0개
+- [ ] ESLint 에러 0개
+- [ ] 테스트 통과율 100%
+
+### 정성적 지표
+
+- [ ] 코드 가독성 향상
+- [ ] 컴포넌트 재사용성 증가
+- [ ] 개발자 경험 개선
+- [ ] 유지보수성 향상
+
+### 각 Phase별 검증 체크리스트
+
+#### Phase 1 완료 후
+
+- [ ] 모든 매직 넘버가 상수로 정의됨
+- [ ] 모든 데이터 타입이 정의됨
+- [ ] TypeScript 컴파일 에러 없음
+
+#### Phase 2 완료 후
+
+- [ ] 모든 함수명이 Clean Code 패턴을 따름
+- [ ] 20줄 이상인 함수가 없음
+- [ ] 에러 처리가 표준화됨
+
+#### Phase 3 완료 후
+
+- [ ] API 호출이 표준화됨
+- [ ] 중복 코드가 제거됨
+- [ ] 각 모듈의 책임이 명확함
+
+#### Phase 4 완료 후
+
+- [ ] 컴포넌트가 50줄 이하로 분리됨
+- [ ] 커스텀 훅으로 로직이 분리됨
+- [ ] 컴포넌트 재사용성이 높아짐
+
+#### Phase 5 완료 후
+
+- [ ] 전역 상태가 적절히 관리됨
+- [ ] Props drilling이 제거됨
+- [ ] 상태 변경이 예측 가능함
+
+#### Phase 6 완료 후
+
+- [ ] FSD 아키텍처가 적용됨
+- [ ] 모듈 간 의존성이 명확함
+- [ ] 확장성이 확보됨
+
+## 위험 요소 및 대응 방안
+
+### 주요 위험 요소
+
+1. **기능 회귀**: 리팩토링 중 기존 기능 손상
+2. **타입 에러**: TypeScript 도입 시 예상치 못한 타입 에러
+3. **상태 동기화**: 전역 상태 도입 시 상태 동기화 문제
+
+### 대응 방안
+
+1. **점진적 개선**: 한 번에 하나씩, 작은 단위로 진행
+2. **기능 테스트**: 각 단계마다 기능 테스트 수행
+3. **백업 유지**: Git을 통한 각 단계별 커밋
+4. **단계별 검증**: 각 Phase 완료 후 전체 기능 검증
+
+이 계획을 따라 단계별로 진행하면 안전하고 체계적인 리팩토링을 수행할 수 있습니다.
diff --git a/docs/refactoring-process.md b/docs/refactoring-process.md
new file mode 100644
index 000000000..935a4cae9
--- /dev/null
+++ b/docs/refactoring-process.md
@@ -0,0 +1,302 @@
+# 📈 진행 상황
+
+## ✅ Phase 1: 개발 환경 설정
+
+### 1) eslint, prettier 설정
+
+#### 요구사항
+
+- @ 그룹 내에서 FSD 순서 유지
+- 폴더구조상으론 레이어 계층을 이해하기 위해 1_app, 2_pages으로 폴더를 만들었지만 절대 경로 상으론 `@/app`, `@/pages`로 사용
+- `@/widgets`, `@/widgets/Component` 모두 사용 가능 (index 파일 + 개별 파일 접근)
+- 외부 라이브러리, 내부 라이브러리, 타입 임포트 문끼리 그룹화
+- scoped package(@로 시작하는 외부 라이브러리) 별도 그룹화
+
+#### **Import 정렬 설정**
+
+- `@trivago/prettier-plugin-sort-imports` 플러그인 설정
+- Import 순서: React → 외부 라이브러리 → scoped 외부 라이브러리 → FSD 내부 라이브러리 → 상대경로 → 타입
+- 그룹 간 자동 공백 추가 (`importOrderSeparation: true`)
+- scoped package 예외 처리: `^@(?!(app|pages|widgets|features|entities|shared)/)`
+
+#### **Path Alias 설정**
+
+- TypeScript: `tsconfig.app.json`에 index 파일 및 와일드카드 매핑
+- ESLint: `import/resolver`에 index 파일 + 와일드카드 경로 설정
+- Vite: `vite.config.ts`에 index 파일 + 와일드카드 alias 설정
+
+#### **현재 Import 순서**
+
+```typescript
+// 1. React 생태계
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+// 2. 외부 라이브러리 (일반)
+import axios from 'axios';
+import lodash from 'lodash';
+
+// 3. 외부 라이브러리 (scoped packages)
+import { useQuery } from '@tanstack/react-query';
+import styled from '@emotion/styled';
+import { Button } from '@mui/material';
+import { BrowserRouter } from 'react-router-dom';
+
+// 4. FSD 내부 라이브러리 (index 파일 접근)
+import { App } from '@/app';
+import { PostsManagerPage } from '@/pages';
+import { Header, Footer } from '@/widgets';
+import { LoginForm } from '@/features';
+import { User } from '@/entities';
+import { Button } from '@/shared';
+
+// 5. 상대 경로
+import { Component } from '../Component';
+import './App.css';
+
+// 6. 타입 Import
+import type { User } from '@/entities/User';
+import type { Props } from './types';
+```
+
+## ✅ Phase 2: FSD 아키텍처 적용
+
+### 1) 디렉토리 구조 변경
+
+#### **레이어별 디렉토리 구성**
+
+- `src/1_app/` - 애플리케이션 레이어 (App.tsx)
+- `src/2_pages/` - 페이지 레이어 (PostsManagerPage.tsx)
+- `src/3_widgets/` - 위젯 레이어 (Header.tsx, Footer.tsx)
+- `src/4_features/` - 기능 레이어 (준비됨)
+- `src/5_entities/` - 엔티티 레이어 (준비됨)
+- `src/6_shared/` - 공유 레이어 (준비됨)
+
+#### **파일 이동 및 정리**
+
+- `src/App.tsx` → `src/1_app/App.tsx`
+- `src/pages/PostsManagerPage.tsx` → `src/2_pages/PostsManagerPage.tsx`
+- `src/components/Header.tsx` → `src/3_widgets/Header.tsx`
+- `src/components/Footer.tsx` → `src/3_widgets/Footer.tsx`
+
+#### **Public API 설정**
+
+- 모든 FSD 레이어에 index.ts 파일 생성
+- 각 레이어의 public API를 통한 import/export
+- 지원되는 경로 패턴:
+  - `@/widgets` → `src/3_widgets/index.ts`
+  - `@/widgets/*` → `src/3_widgets/*` (개별 파일 접근)
+
+#### **설정된 절대 경로**
+
+```typescript
+// Index 파일 접근
+'@/app'      → 'src/1_app/index.ts'
+'@/pages'    → 'src/2_pages/index.ts'
+'@/widgets'  → 'src/3_widgets/index.ts'
+'@/features' → 'src/4_features/index.ts'
+'@/entities' → 'src/5_entities/index.ts'
+'@/shared'   → 'src/6_shared/index.ts'
+
+// 개별 파일 접근
+'@/widgets/*' → 'src/3_widgets/*'
+'@/shared/*'  → 'src/6_shared/*'
+'@/*'         → 'src/*' (루트 접근)
+```
+
+#### 🎯 **현재 상태**
+
+- **Path Alias**: TypeScript, ESLint, Vite 모든 환경에서 정상 동작
+- **Index 파일**: 모든 FSD 레이어에 public API 구성 완료
+- **Import Order**: 6단계 그룹화 자동 정렬 적용
+- **Staged**: FSD 구조 변경 및 설정 파일들 준비 완료
+
+## ✅ Phase 3: 클린 코드 리팩토링
+
+### 1) 매직넘버 상수화
+
+#### **상수 관리 구조 구축**
+
+FSD 아키텍처에 따라 `6_shared/constants/` 디렉토리에 상수 관리 시스템 구축:
+
+```typescript
+src/6_shared/constants/
+├── ui.ts          # UI 관련 상수 (크기, 스타일, 레이아웃)
+├── api.ts         # API 관련 상수 (엔드포인트, 기본값)
+└── index.ts       # 배럴 파일 (통합 export)
+```
+
+#### **UI 상수 정의**
+
+```typescript
+// src/6_shared/constants/ui.ts
+export const UI_CONSTANTS = {
+  TEXTAREA_ROWS: {
+    LARGE: 30, // 게시물 작성용
+    MEDIUM: 15, // 게시물 수정용
+    SMALL: 5, // 댓글 작성용
+  },
+  ICON_SIZES: {
+    SMALL: 'w-3 h-3', // 댓글 버튼용
+    MEDIUM: 'w-4 h-4', // 일반 버튼용
+    LARGE: 'w-8 h-8', // 프로필 이미지용
+  },
+  PAGINATION: {
+    DEFAULT_LIMIT: 10,
+    DEFAULT_SKIP: 0,
+    LIMIT_OPTIONS: [10, 20, 30] as const,
+  },
+  STYLES: {
+    TAG_SELECTED: 'text-white bg-blue-500 hover:bg-blue-600',
+    TAG_DEFAULT: 'text-blue-800 bg-blue-100 hover:bg-blue-200',
+    TAG_SIZE: 'px-1 text-[9px] font-semibold rounded-[4px] cursor-pointer',
+  },
+} as const;
+```
+
+#### **API 상수 정의**
+
+```typescript
+// src/6_shared/constants/api.ts
+export const API_CONSTANTS = {
+  ENDPOINTS: {
+    POSTS: '/api/posts',
+    USERS: '/api/users',
+    COMMENTS: '/api/comments',
+  },
+  DEFAULT_USER_ID: 1,
+  QUERY_PARAMS: {
+    USERS_SELECT: 'limit=0&select=username,image',
+  },
+  REACTIONS: {
+    DEFAULT_LIKES: 0,
+    DEFAULT_DISLIKES: 0,
+    LIKE_INCREMENT: 1,
+  },
+} as const;
+```
+
+#### **PostsManagerPage 리팩토링**
+
+매직넘버 → 상수 교체 완료:
+
+**UI 관련 매직넘버**:
+
+- ✅ `rows={30}` → `rows={UI_CONSTANTS.TEXTAREA_ROWS.LARGE}`
+- ✅ `rows={15}` → `rows={UI_CONSTANTS.TEXTAREA_ROWS.MEDIUM}`
+- ✅ `className='w-4 h-4'` → `className={UI_CONSTANTS.ICON_SIZES.MEDIUM}`
+- ✅ `className='w-3 h-3'` → `className={UI_CONSTANTS.ICON_SIZES.SMALL}`
+- ✅ `className='w-8 h-8'` → `className={UI_CONSTANTS.ICON_SIZES.LARGE}`
+- ✅ 페이지네이션 `[10, 20, 30]` → `UI_CONSTANTS.PAGINATION.LIMIT_OPTIONS`
+- ✅ 태그 스타일 인라인 클래스 → `UI_CONSTANTS.STYLES.*`
+
+**API 관련 매직넘버**:
+
+- ✅ `userId: 1` → `userId: API_CONSTANTS.DEFAULT_USER_ID`
+- ✅ `likes + 1` → `likes + API_CONSTANTS.REACTIONS.LIKE_INCREMENT`
+- ✅ `|| 0` → `|| API_CONSTANTS.REACTIONS.DEFAULT_LIKES`
+- ✅ `parseInt('10')` → `parseInt(String(UI_CONSTANTS.PAGINATION.DEFAULT_LIMIT))`
+- ✅ `parseInt('0')` → `parseInt(String(UI_CONSTANTS.PAGINATION.DEFAULT_SKIP))`
+
+#### **Import 구문 추가**
+
+```typescript
+// src/2_pages/PostsManagerPage.tsx
+import { API_CONSTANTS, UI_CONSTANTS } from '@/shared/constants';
+```
+
+#### **Public API 등록**
+
+```typescript
+// src/6_shared/index.ts
+export * from './ui';
+export * from './constants';
+```
+
+#### 🎯 **현재 상태**
+
+- **상수 구조**: FSD 아키텍처 기반 체계적 상수 관리 시스템 구축
+- **매직넘버 제거**: PostsManagerPage의 모든 매직넘버 상수화 완료
+- **타입 안정성**: `as const` 어서션으로 타입 안정성 확보
+- **유지보수성**: 의미 있는 이름으로 코드 가독성 향상
+- **일관성**: UI 요소와 API 설정값의 중앙 집중식 관리
+
+#### **다음 단계**
+
+1. **타입 정의**: TypeScript 타입 에러 해결
+2. **도메인별 상수**: Post, Comment, User 엔티티별 상수 분리
+3. **기능별 상수**: 검색, 정렬, 필터링 관련 상수 세분화
+
+### 2) api, api용 타입 등을 엔티티에 넣은 이유
+
+> feature와 1:1 관계가 아니다
+
+- 1:N 일 때가 더 많고 api의 포함관계는 변동성이 높다.
+
+## ✅ Phase 4: TanStack Query 도입 및 서버상태관리
+
+### 1) TanStack Query 기본 설정
+
+#### 🎯 **커밋 944778b**: feat: tanstack query 설정
+
+- TanStack Query 의존성 추가 (`@tanstack/react-query`)
+- App.tsx에 QueryClient 및 QueryClientProvider 설정
+- 기본 옵션 구성 (staleTime: 5분, retry: 1회)
+
+### 2) FSD 엔티티 구조 구성
+
+#### **엔티티별 디렉토리 구조**
+
+FSD 아키텍처에 따라 `5_entities` 레이어에 도메인별 엔티티 구성:
+
+- `post/`: post.api.ts, post.type.ts, post.constant.ts, post.model.ts, index.ts
+- `user/`: user.api.ts, user.type.ts, user.constant.ts, user.model.ts, index.ts
+
+#### **구현 내용**
+
+- **Post 엔티티**: PostReactions, Post 인터페이스 및 getPosts API 함수
+- **User 엔티티**: User 인터페이스 및 getUsers API 함수
+- **공유 타입**: PaginationMeta, PaginationParams, Nullable, Undefinable 등
+
+#### 🎯 **커밋 895e518**: refactor: FSD 엔티티 폴더 구조 구성 및 게시물 조회, 사용자조회 API 작성
+
+- Post, User 엔티티 도메인별 구조 분리
+- API 함수 및 타입 정의 분리
+- 공유 타입 시스템 구축 (PaginationMeta, 유틸리티 타입)
+- Public API 인덱스 파일 구성
+
+### 3) React Query 훅 및 QueryKey 구조적 관리
+
+#### **QueryKey 팩토리 패턴**
+
+- `QUERY_DOMAINS`: posts, users, comments, tags 도메인 상수
+- `QUERY_OPERATIONS`: list, detail, infinite, search, count 작업 상수
+- 도메인별 QueryKey 팩토리 함수 구현 (postQueryKeys, userQueryKeys)
+
+#### **복합 쿼리 훅**
+
+- `useGetPostsWithAuthor`: useQueries를 활용한 Post+User 데이터 조합
+- useMemo를 통한 데이터 조합 최적화
+- 로딩/에러 상태 통합 관리
+
+#### **QueryKey 구조적 관리의 장점**
+
+1. **일관성**: 도메인별 통일된 QueryKey 패턴
+2. **타입 안전성**: TypeScript 기반 QueryKey 타입 검증
+3. **유지보수성**: 중앙 집중식 QueryKey 관리
+4. **확장성**: 새로운 도메인/작업 추가 용이
+
+#### 🎯 **커밋 ff5f870**: feat: useGetPostsWithAuthor 구현 및 queryKeys 구조 설계
+
+- QueryKey 팩토리 패턴 설계 및 구현
+- useQueries를 활용한 복합 쿼리 훅 구현
+- useMemo를 통한 데이터 조합 최적화
+- 구조적 QueryKey 관리 시스템 구축
+
+#### **현재 상태**
+
+- **서버상태관리**: TanStack Query 기반 서버상태관리 구축
+- **FSD 아키텍처**: 엔티티별 API/타입/쿼리 분리 완료
+- **QueryKey 관리**: 팩토리 패턴 기반 구조적 관리 시스템
+- **복합 쿼리**: useQueries를 활용한 데이터 조합 로직 구현
+- **타입 안전성**: TypeScript 기반 강타입 시스템 구축
diff --git a/docs/requirements.md b/docs/requirements.md
new file mode 100644
index 000000000..f0801386d
--- /dev/null
+++ b/docs/requirements.md
@@ -0,0 +1,194 @@
+# 프로젝트 요구사항 분석서
+
+## 프로젝트 개요
+
+### 프로젝트명
+
+게시물 관리 시스템 (Posts Management System)
+
+### 프로젝트 설명
+
+게시판을 관리할 수 있는 Admin 시스템으로, 게시물과 댓글의 CRUD 기능을 제공하는 웹 애플리케이션입니다.
+
+## 현재 기능 분석
+
+### 1. 게시물 관리 기능
+
+- **게시물 목록 조회**: 페이지네이션과 함께 게시물 목록 표시
+- **게시물 검색**: 제목과 내용 기반 검색 기능
+- **게시물 필터링**: 태그별 게시물 필터링
+- **게시물 정렬**: ID, 제목, 반응 수 기준 정렬 (오름차순/내림차순)
+- **게시물 추가**: 새 게시물 작성 기능
+- **게시물 수정**: 기존 게시물 편집 기능
+- **게시물 삭제**: 게시물 삭제 기능
+- **게시물 상세보기**: 게시물 내용과 댓글을 함께 볼 수 있는 모달
+
+### 2. 댓글 관리 기능
+
+- **댓글 목록 조회**: 특정 게시물의 댓글 목록 표시
+- **댓글 추가**: 새 댓글 작성 기능
+- **댓글 수정**: 기존 댓글 편집 기능
+- **댓글 삭제**: 댓글 삭제 기능
+- **댓글 좋아요**: 댓글에 좋아요 기능
+
+### 3. 사용자 정보 기능
+
+- **사용자 정보 조회**: 작성자 클릭 시 사용자 상세 정보 모달 표시
+- **사용자 프로필**: 사용자 이미지, 이름, 연락처, 주소, 직장 정보 표시
+
+### 4. UI/UX 기능
+
+- **하이라이트**: 검색어 하이라이트 표시
+- **반응형 디자인**: 다양한 화면 크기 지원
+- **로딩 상태**: 데이터 로딩 중 상태 표시
+- **URL 동기화**: 검색, 필터, 페이지네이션 상태를 URL에 반영
+
+### 5. 태그 시스템
+
+- **태그 조회**: 사용 가능한 태그 목록 조회
+- **태그 필터링**: 선택한 태그로 게시물 필터링
+- **태그 표시**: 게시물에 연결된 태그들을 시각적으로 표시
+
+## 기술 스택 분석
+
+### 프론트엔드
+
+- **React 19.1.1**: 메인 UI 라이브러리
+- **TypeScript**: 타입 안정성 제공 (현재 부분적 적용)
+- **React Router DOM**: 클라이언트 사이드 라우팅
+- **Vite**: 빌드 도구
+- **Tailwind CSS**: 스타일링 (className 기반)
+
+### UI 컴포넌트
+
+- **Radix UI**: 접근성이 좋은 헤드리스 컴포넌트 (@radix-ui/react-dialog, @radix-ui/react-select)
+- **Lucide React**: 아이콘 라이브러리
+- **CVA (Class Variance Authority)**: 컴포넌트 variant 관리
+
+### 상태 관리
+
+- **React useState**: 로컬 상태 관리
+- **Jotai**: 전역 상태 관리 라이브러리 (설치되어 있으나 미사용)
+
+### 개발 도구
+
+- **ESLint**: 코드 품질 관리
+- **Prettier**: 코드 포맷팅
+- **Vitest**: 테스트 프레임워크
+- **Husky**: Git 훅 관리
+- **MSW**: API 모킹
+
+## 현재 아키텍처 분석
+
+### 폴더 구조
+
+```
+src/
+├── App.tsx                    # 메인 앱 컴포넌트
+├── main.tsx                   # 앱 진입점
+├── index.tsx                  # React DOM 렌더링
+├── index.css                  # 글로벌 스타일
+├── components/
+│   ├── index.tsx             # 모든 UI 컴포넌트 정의
+│   ├── Header.tsx            # 헤더 컴포넌트
+│   └── Footer.tsx            # 푸터 컴포넌트
+├── pages/
+│   └── PostsManagerPage.tsx  # 메인 페이지 (815줄의 거대한 컴포넌트)
+└── assets/
+    └── react.svg             # 정적 자산
+```
+
+### 데이터 흐름
+
+- **API 통신**: Fetch API 사용한 REST API 호출
+- **상태 관리**: React useState를 통한 컴포넌트 레벨 상태 관리
+- **URL 동기화**: URLSearchParams를 통한 쿼리 파라미터 관리
+
+## 개선이 필요한 영역
+
+### 1. 코드 구조 문제점
+
+- **거대한 컴포넌트**: PostsManagerPage가 815줄로 너무 크고 복잡함
+- **단일 책임 원칙 위반**: 하나의 컴포넌트가 너무 많은 책임을 가짐
+- **관심사 분리 부족**: UI, 비즈니스 로직, 데이터 처리가 모두 섞여 있음
+
+### 2. TypeScript 활용 부족
+
+- **타입 정의 부족**: any 타입 사용, 인터페이스 정의 부족
+- **타입 안정성 부족**: 런타임 에러 발생 가능성
+- **API 응답 타입 미정의**: 서버 응답에 대한 타입 정의 없음
+
+### 3. 상태 관리 문제
+
+- **과도한 useState**: 18개의 useState로 복잡한 상태 관리
+- **전역 상태 부재**: Props drilling은 없지만 전역 상태 활용 안 함
+- **상태 동기화 문제**: 여러 상태 간의 의존성 관리 어려움
+
+### 4. 비동기 처리 문제
+
+- **복잡한 useEffect**: 여러 의존성을 가진 복잡한 useEffect
+- **에러 처리 부족**: try-catch만으로 단순한 에러 처리
+- **로딩 상태 관리**: 각 API별 개별 로딩 상태 부재
+
+### 5. 코드 재사용성 부족
+
+- **중복 로직**: 유사한 CRUD 로직의 반복
+- **컴포넌트 분리 부족**: 재사용 가능한 작은 컴포넌트 부족
+- **유틸 함수 부재**: 공통 로직의 유틸화 필요
+
+## 과제별 개선 목표
+
+### 기본 과제 목표
+
+1. **전역 상태 관리 도입**: Jotai를 활용한 상태 분리
+2. **FSD 아키텍처 적용**: Feature-Sliced Design 폴더 구조
+3. **컴포넌트 분리**: 단일 책임 원칙에 따른 컴포넌트 세분화
+4. **TypeScript 강화**: 완전한 타입 정의 및 타입 안정성 확보
+
+### 심화 과제 목표
+
+1. **TanStack Query 도입**: 서버 상태 관리 개선
+2. **API 표준화**: 일관된 API 관리 방식 구축
+3. **낙관적 업데이트**: 사용자 경험 개선
+
+### 최종 과제 목표
+
+1. **현대적 폴더 구조**: FSD를 넘어선 기능 중심 구조
+2. **직관적 구조**: 개발자 친화적인 폴더 구조
+
+## 예상 개발 범위
+
+### Phase 1: 기본 리팩토링
+
+- TypeScript 타입 정의 완료
+- 컴포넌트 분리 및 재구성
+- 전역 상태 관리 도입
+- FSD 폴더 구조 적용
+
+### Phase 2: 고급 기능 도입
+
+- TanStack Query 마이그레이션
+- API 레이어 표준화
+- 에러 처리 및 로딩 상태 개선
+
+### Phase 3: 최적화 및 개선
+
+- 성능 최적화
+- 사용자 경험 개선
+- 코드 품질 향상
+
+## 성공 지표
+
+### 기술적 지표
+
+- 컴포넌트당 평균 줄 수 50줄 이하
+- TypeScript 타입 커버리지 100%
+- 테스트 커버리지 80% 이상
+- ESLint 에러 0개
+
+### 비즈니스 지표
+
+- 페이지 로딩 시간 단축
+- 사용자 인터랙션 응답성 향상
+- 개발자 생산성 향상
+- 유지보수성 개선
diff --git a/eslint.config.js b/eslint.config.js
index 092408a9f..2cf1b3421 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,28 +1,129 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import importPlugin from 'eslint-plugin-import';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+import js from '@eslint/js';
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ['dist', 'vite.config.ts', 'vitest.config.ts', 'vite-env.d.ts'] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
     files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
     plugins: {
+      react,
       'react-hooks': reactHooks,
       'react-refresh': reactRefresh,
+      import: importPlugin,
+    },
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: {
+        ...globals.browser,
+        ...globals.es2020,
+      },
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+        project: './tsconfig.app.json',
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+      'import/resolver': {
+        typescript: {
+          alwaysTryTypes: true,
+          project: './tsconfig.app.json',
+        },
+        alias: {
+          map: [
+            ['@', './src'],
+            ['@/app', './src/1_app/index.ts'],
+            ['@/app/*', './src/1_app/*'],
+            ['@/pages', './src/2_pages/index.ts'],
+            ['@/pages/*', './src/2_pages/*'],
+            ['@/widgets', './src/3_widgets/index.ts'],
+            ['@/widgets/*', './src/3_widgets/*'],
+            ['@/features', './src/4_features/index.ts'],
+            ['@/features/*', './src/4_features/*'],
+            ['@/entities', './src/5_entities/index.ts'],
+            ['@/shared', './src/6_shared/index.ts'],
+            ['@final_src', './src/final_src'],
+            ['@final_src/*', './src/final_src/*'],
+          ],
+          extensions: ['.ts', '.tsx', '.js', '.jsx'],
+        },
+      },
     },
     rules: {
-      ...reactHooks.configs.recommended.rules,
+      // Airbnb 스타일 규칙들을 직접 정의
+      'react/jsx-uses-react': 'off',
+      'react/react-in-jsx-scope': 'off',
+      'react/prop-types': 'off',
+      'react/jsx-props-no-spreading': 'off',
+      'react/require-default-props': 'off',
+      'react/jsx-filename-extension': [
+        'error',
+        { extensions: ['.tsx', '.jsx'] },
+      ],
+      'react/function-component-definition': [
+        'error',
+        {
+          namedComponents: 'arrow-function',
+          unnamedComponents: 'arrow-function',
+        },
+      ],
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
       'react-refresh/only-export-components': [
         'warn',
         { allowConstantExport: true },
       ],
+      'import/extensions': [
+        'error',
+        'ignorePackages',
+        {
+          js: 'never',
+          jsx: 'never',
+          ts: 'never',
+          tsx: 'never',
+        },
+      ],
+      'import/prefer-default-export': 'off',
+      'import/no-unresolved': 'error',
+      'import/no-duplicates': 'error',
+
+      // TypeScript 관련 규칙
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        { argsIgnorePattern: '^_' },
+      ],
+      '@typescript-eslint/no-explicit-any': 'warn',
+
+      // General
+      'no-console': 'off',
+      'no-debugger': 'error',
+      'prefer-const': 'error',
+      'no-var': 'error',
+      'object-shorthand': 'error',
+      'prefer-template': 'error',
+      'arrow-spacing': 'error',
+      'no-duplicate-imports': 'error',
+      'max-len': [
+        'error',
+        {
+          code: 100,
+          ignoreUrls: true,
+          ignoreStrings: true,
+          ignoreTemplateLiterals: true,
+        },
+      ],
     },
-  },
-)
+  }
+);
diff --git a/final_src/1_app/App.tsx b/final_src/1_app/App.tsx
new file mode 100644
index 000000000..666f12e04
--- /dev/null
+++ b/final_src/1_app/App.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { PostsManagerPage } from '@/pages';
+import { Footer, Header } from '@/widgets';
+
+/**
+ * 메인 애플리케이션 컴포넌트
+ *
+ * FSD Best Practice:
+ * - 레이아웃 구조만 담당
+ * - 비즈니스 로직 제외
+ * - 위젯과 페이지 조합
+ * - 반응형 디자인 적용
+ */
+export const App: React.FC = () => {
+  return (
+    <div className='flex flex-col min-h-screen'>
+      <Header />
+      <main className='flex-grow container mx-auto px-4 py-8'>
+        <PostsManagerPage />
+      </main>
+      <Footer />
+    </div>
+  );
+};
diff --git a/final_src/1_app/index.ts b/final_src/1_app/index.ts
new file mode 100644
index 000000000..36fd434c7
--- /dev/null
+++ b/final_src/1_app/index.ts
@@ -0,0 +1,2 @@
+export { App } from './App';
+export { AppProvider } from './providers';
diff --git a/final_src/1_app/providers/AppProvider.tsx b/final_src/1_app/providers/AppProvider.tsx
new file mode 100644
index 000000000..16d34d9b9
--- /dev/null
+++ b/final_src/1_app/providers/AppProvider.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { Provider } from 'jotai';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
+interface AppProviderProps {
+  children: React.ReactNode;
+}
+
+// 애플리케이션 레벨의 QueryClient 설정
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000, // 5분
+      gcTime: 10 * 60 * 1000, // 10분 (이전 cacheTime)
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+    mutations: {
+      retry: 1,
+    },
+  },
+});
+
+/**
+ * 애플리케이션 레벨 프로바이더
+ *
+ * FSD Best Practice:
+ * - 애플리케이션 초기화 로직을 중앙화
+ * - 전역 상태 관리 설정
+ * - 라우팅 설정
+ * - 개발 도구 설정
+ */
+export const AppProvider: React.FC<AppProviderProps> = ({ children }) => {
+  return (
+    <Provider>
+      <QueryClientProvider client={queryClient}>
+        <ReactQueryDevtools initialIsOpen={false} />
+        <Router>{children}</Router>
+      </QueryClientProvider>
+    </Provider>
+  );
+};
diff --git a/final_src/1_app/providers/index.ts b/final_src/1_app/providers/index.ts
new file mode 100644
index 000000000..5114e85a5
--- /dev/null
+++ b/final_src/1_app/providers/index.ts
@@ -0,0 +1 @@
+export { AppProvider } from './AppProvider';
diff --git a/final_src/2_pages/PostsManagerPage.tsx b/final_src/2_pages/PostsManagerPage.tsx
new file mode 100644
index 000000000..c7b640715
--- /dev/null
+++ b/final_src/2_pages/PostsManagerPage.tsx
@@ -0,0 +1,42 @@
+import { AddCommentDialog } from '@/features/comment-management';
+import { EditCommentFormDialog } from '@/features/comment-management/ui/EditCommentFormDialog';
+import { Filters } from '@/features/filter-posts';
+import {
+  AddPostButton,
+  PostDetailDialog,
+  PostTable,
+} from '@/features/post-management';
+import { AddPostFormDialog } from '@/features/post-management/ui/AddPostFormDialog';
+import { EditPostFormDialog } from '@/features/post-management/ui/EditPostFormDialog';
+import { PostPagination } from '@/features/post-management/ui/PostPagination';
+import { UserProfileDialog } from '@/features/user-profile';
+import { Card, CardContent, CardHeader, CardTitle } from '@/shared/ui';
+
+const PostsManager = () => {
+  return (
+    <Card className='w-full max-w-6xl mx-auto'>
+      <CardHeader>
+        <CardTitle className='flex items-center justify-between'>
+          <span>게시물 관리자</span>
+          <AddPostButton />
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className='flex flex-col gap-4'>
+          <Filters />
+          <PostTable />
+          <PostPagination />
+        </div>
+      </CardContent>
+
+      <AddPostFormDialog />
+      <EditPostFormDialog />
+      <AddCommentDialog />
+      <EditCommentFormDialog />
+      <PostDetailDialog />
+      <UserProfileDialog />
+    </Card>
+  );
+};
+
+export default PostsManager;
diff --git a/final_src/2_pages/index.ts b/final_src/2_pages/index.ts
new file mode 100644
index 000000000..5e47e3f90
--- /dev/null
+++ b/final_src/2_pages/index.ts
@@ -0,0 +1 @@
+export { default as PostsManagerPage } from './PostsManagerPage';
diff --git a/final_src/3_widgets/Footer.tsx b/final_src/3_widgets/Footer.tsx
new file mode 100644
index 000000000..b6619c879
--- /dev/null
+++ b/final_src/3_widgets/Footer.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Footer: React.FC = () => {
+  return (
+    <footer className='bg-gray-100 text-gray-600 py-4 mt-8'>
+      <div className='container mx-auto text-center'>
+        <p>&copy; 2023 Post Management System. All rights reserved.</p>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/final_src/3_widgets/Header.tsx b/final_src/3_widgets/Header.tsx
new file mode 100644
index 000000000..ef674f518
--- /dev/null
+++ b/final_src/3_widgets/Header.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { MessageSquare } from 'lucide-react';
+
+const Header: React.FC = () => {
+  return (
+    <header className='bg-blue-600 text-white p-4 shadow-md'>
+      <div className='container mx-auto flex justify-between items-center'>
+        <div className='flex items-center space-x-2'>
+          <MessageSquare className='w-6 h-6' />
+          <h1 className='text-xl font-bold'>게시물 관리 시스템</h1>
+        </div>
+        <nav>
+          <ul className='flex space-x-4'>
+            <li>
+              <a href='#' className='hover:underline'>
+                홈
+              </a>
+            </li>
+            <li>
+              <a href='#' className='hover:underline'>
+                대시보드
+              </a>
+            </li>
+            <li>
+              <a href='#' className='hover:underline'>
+                설정
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/final_src/3_widgets/index.ts b/final_src/3_widgets/index.ts
new file mode 100644
index 000000000..88d58dcef
--- /dev/null
+++ b/final_src/3_widgets/index.ts
@@ -0,0 +1,2 @@
+export { default as Footer } from './Footer';
+export { default as Header } from './Header';
diff --git a/final_src/4_features/comment-management/hooks/useAddCommentForm.ts b/final_src/4_features/comment-management/hooks/useAddCommentForm.ts
new file mode 100644
index 000000000..76de6bbaa
--- /dev/null
+++ b/final_src/4_features/comment-management/hooks/useAddCommentForm.ts
@@ -0,0 +1,47 @@
+import { useState } from 'react';
+
+import { useCreateCommentMutation } from '@/entities/comment';
+import { useUIStore } from '@/shared/lib';
+
+export const useAddCommentForm = () => {
+  const { selectedPost, setShowAddCommentDialog } = useUIStore();
+  const { mutate: createComment } = useCreateCommentMutation({
+    onSuccess: () => {
+      resetForm();
+    },
+    onError: error => {
+      console.error('댓글 추가 오류:', error);
+      // ! 모달 다시 열어서 사용자가 수정
+      setShowAddCommentDialog(true);
+    },
+  });
+
+  const [commentBody, setCommentBody] = useState<string>('');
+
+  const handleChangeBody = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setCommentBody(e.target.value);
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    // ! 모달 먼저 닫고 UI 낙관적 업데이트 보여주기
+    setShowAddCommentDialog(false);
+    createComment({
+      body: commentBody,
+      postId: selectedPost?.id ?? 0,
+      userId: 1,
+    });
+  };
+
+  const resetForm = () => {
+    setCommentBody('');
+  };
+
+  return {
+    commentBody,
+    handleChangeBody,
+    handleSubmit,
+    resetForm,
+  };
+};
diff --git a/final_src/4_features/comment-management/hooks/useEditCommentForm.ts b/final_src/4_features/comment-management/hooks/useEditCommentForm.ts
new file mode 100644
index 000000000..a8edf670b
--- /dev/null
+++ b/final_src/4_features/comment-management/hooks/useEditCommentForm.ts
@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+
+import { useUpdateCommentMutation } from '@/entities/comment';
+import { useUIStore } from '@/shared/lib';
+
+export const useEditCommentForm = () => {
+  const { selectedComment, setSelectedComment, setShowEditCommentDialog } =
+    useUIStore();
+  const { mutate: updateComment } = useUpdateCommentMutation({
+    onSuccess: () => {
+      setSelectedComment(null);
+    },
+    onError: error => {
+      console.error('댓글 수정 오류:', error);
+      // ! 모달 다시 열어서 사용자가 수정하기
+      setShowEditCommentDialog(true);
+    },
+  });
+
+  const [commentBody, setCommentBody] = useState<string>(
+    selectedComment?.body || ''
+  );
+
+  const handleChangeBody = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setCommentBody(e.target.value);
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (!selectedComment) return;
+
+    // ! 모달 먼저 닫고 UI 낙관적 업데이트 보여주기
+    setShowEditCommentDialog(false);
+    updateComment({
+      ...selectedComment,
+      body: commentBody,
+    });
+  };
+
+  const resetForm = () => {
+    setCommentBody('');
+  };
+
+  useEffect(() => {
+    setCommentBody(selectedComment?.body || '');
+  }, [selectedComment]);
+
+  return {
+    commentBody,
+    handleChangeBody,
+    handleSubmit,
+    resetForm,
+  };
+};
diff --git a/final_src/4_features/comment-management/index.ts b/final_src/4_features/comment-management/index.ts
new file mode 100644
index 000000000..713937378
--- /dev/null
+++ b/final_src/4_features/comment-management/index.ts
@@ -0,0 +1 @@
+export * from './ui/AddCommentFormDialog';
diff --git a/final_src/4_features/comment-management/ui/AddCommentFormDialog.tsx b/final_src/4_features/comment-management/ui/AddCommentFormDialog.tsx
new file mode 100644
index 000000000..97b3bb2a3
--- /dev/null
+++ b/final_src/4_features/comment-management/ui/AddCommentFormDialog.tsx
@@ -0,0 +1,29 @@
+import { useUIStore } from '@/shared/lib';
+import { Button, ContentDialog, Textarea } from '@/shared/ui';
+
+import { useAddCommentForm } from '../hooks/useAddCommentForm';
+
+export const AddCommentDialog = () => {
+  const { showAddCommentDialog, setShowAddCommentDialog } = useUIStore();
+
+  const { commentBody, handleChangeBody, handleSubmit, resetForm } =
+    useAddCommentForm();
+
+  return (
+    <ContentDialog
+      open={showAddCommentDialog}
+      onOpenChange={setShowAddCommentDialog}
+      onClose={resetForm}
+      title='새 댓글 추가'
+    >
+      <form className='space-y-4' onSubmit={handleSubmit}>
+        <Textarea
+          placeholder='댓글 내용'
+          value={commentBody}
+          onChange={handleChangeBody}
+        />
+        <Button type='submit'>댓글 추가</Button>
+      </form>
+    </ContentDialog>
+  );
+};
diff --git a/final_src/4_features/comment-management/ui/CommentItem.tsx b/final_src/4_features/comment-management/ui/CommentItem.tsx
new file mode 100644
index 000000000..baa949d5f
--- /dev/null
+++ b/final_src/4_features/comment-management/ui/CommentItem.tsx
@@ -0,0 +1,80 @@
+import { Edit2, ThumbsUp, Trash2 } from 'lucide-react';
+
+import {
+  Comment,
+  useDeleteCommentMutation,
+  useLikeCommentMutation,
+} from '@/entities/comment';
+import { UI_CONSTANTS } from '@/shared/constants';
+import { highlightText, usePostsFilterStore, useUIStore } from '@/shared/lib';
+import { Button } from '@/shared/ui';
+
+interface CommentItemProps {
+  comment: Comment;
+}
+
+export const CommentItem = ({ comment }: CommentItemProps) => {
+  const { setSelectedComment, setShowEditCommentDialog } = useUIStore();
+  const { searchQuery } = usePostsFilterStore();
+  const { mutate: likeComment, isPending } = useLikeCommentMutation({
+    onError: error => {
+      console.error('댓글 좋아요 오류:', error);
+    },
+  });
+  const { mutate: deleteComment, isPending: isDeleting } =
+    useDeleteCommentMutation({
+      onError: error => {
+        console.error('댓글 삭제 오류:', error);
+      },
+    });
+
+  const handleClickLikeComment = () => {
+    if (isPending) return;
+    likeComment({ commentId: comment.id, postId: comment.postId });
+  };
+
+  const handleClickEditComment = () => {
+    setSelectedComment(comment);
+    setShowEditCommentDialog(true);
+  };
+
+  const handleClickDeleteComment = () => {
+    if (isDeleting) return;
+    deleteComment({ commentId: comment.id, postId: comment.postId });
+  };
+
+  return (
+    <div className='flex items-center justify-between text-sm border-b pb-1 gap-2'>
+      <div className='flex items-center space-x-2 min-w-0 flex-1'>
+        <span className='font-medium shrink-0'>{comment.user.username}:</span>
+        <span className='truncate'>
+          {highlightText(comment.body, searchQuery)}
+        </span>
+      </div>
+      <div className='flex items-center space-x-1 shrink-0'>
+        <Button
+          variant='ghost'
+          size='sm'
+          onClick={() => handleClickLikeComment()}
+        >
+          <ThumbsUp className={UI_CONSTANTS.ICON_SIZES.SMALL} />
+          <span className='ml-1 text-xs'>{comment.likes}</span>
+        </Button>
+        <Button
+          variant='ghost'
+          size='sm'
+          onClick={() => handleClickEditComment()}
+        >
+          <Edit2 className={UI_CONSTANTS.ICON_SIZES.SMALL} />
+        </Button>
+        <Button
+          variant='ghost'
+          size='sm'
+          onClick={() => handleClickDeleteComment()}
+        >
+          <Trash2 className={UI_CONSTANTS.ICON_SIZES.SMALL} />
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/final_src/4_features/comment-management/ui/CommentList.tsx b/final_src/4_features/comment-management/ui/CommentList.tsx
new file mode 100644
index 000000000..c7868a3fd
--- /dev/null
+++ b/final_src/4_features/comment-management/ui/CommentList.tsx
@@ -0,0 +1,24 @@
+import { useGetCommentsQuery } from '@/entities/comment';
+import { useUIStore } from '@/shared/lib';
+import { LoadingSpinner } from '@/shared/ui';
+
+import { CommentItem } from './CommentItem';
+
+export const CommentList = () => {
+  const { selectedPost } = useUIStore();
+  const { data: commentsData, isLoading } = useGetCommentsQuery(
+    selectedPost?.id ?? null
+  );
+
+  return (
+    <div className='space-y-1 w-full'>
+      {isLoading ? (
+        <LoadingSpinner />
+      ) : (
+        commentsData?.comments.map(comment => (
+          <CommentItem key={comment.id} comment={comment} />
+        ))
+      )}
+    </div>
+  );
+};
diff --git a/final_src/4_features/comment-management/ui/EditCommentFormDialog.tsx b/final_src/4_features/comment-management/ui/EditCommentFormDialog.tsx
new file mode 100644
index 000000000..eef997fce
--- /dev/null
+++ b/final_src/4_features/comment-management/ui/EditCommentFormDialog.tsx
@@ -0,0 +1,28 @@
+import { useUIStore } from '@/shared/lib';
+import { Button, ContentDialog, Textarea } from '@/shared/ui';
+
+import { useEditCommentForm } from '../hooks/useEditCommentForm';
+
+export const EditCommentFormDialog = () => {
+  const { showEditCommentDialog, setShowEditCommentDialog } = useUIStore();
+  const { commentBody, handleChangeBody, handleSubmit, resetForm } =
+    useEditCommentForm();
+
+  return (
+    <ContentDialog
+      open={showEditCommentDialog}
+      onOpenChange={setShowEditCommentDialog}
+      onClose={resetForm}
+      title='댓글 수정'
+    >
+      <form className='space-y-4' onSubmit={handleSubmit}>
+        <Textarea
+          placeholder='댓글 내용'
+          value={commentBody}
+          onChange={handleChangeBody}
+        />
+        <Button type='submit'>댓글 업데이트</Button>
+      </form>
+    </ContentDialog>
+  );
+};
diff --git a/final_src/4_features/filter-posts/hooks/useFilteredPosts.ts b/final_src/4_features/filter-posts/hooks/useFilteredPosts.ts
new file mode 100644
index 000000000..89a0dbcb3
--- /dev/null
+++ b/final_src/4_features/filter-posts/hooks/useFilteredPosts.ts
@@ -0,0 +1,162 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import {
+  AllFilterParams,
+  useGetPostsBySearchQuery,
+  useGetPostsByTagQuery,
+  useGetPostsQuery,
+} from '@/entities/post';
+import { useGetUsersQuery } from '@/entities/user';
+import { POST_QUERY_TYPE, usePostsFilterStore } from '@/shared/lib';
+
+import { getPostsWithAuthor } from '../../post-management/lib/post.util';
+import { PostWithAuthor } from '../../post-management/types';
+
+export type SelectedUserProperties = 'id' | 'username' | 'image';
+
+export const useFilteredPosts = () => {
+  const {
+    selectedTag,
+    searchQuery,
+    limit,
+    skip,
+    sortBy,
+    sortOrder,
+    pagination,
+    setQueryType,
+    setPagination,
+  } = usePostsFilterStore();
+
+  const [posts, setPosts] = useState<PostWithAuthor<SelectedUserProperties>[]>(
+    []
+  );
+
+  const filters: AllFilterParams = {
+    limit,
+    skip,
+    sortBy,
+    sortOrder,
+    searchQuery,
+    selectedTag,
+  };
+
+  const { data: usersData, isLoading: isLoadingUsers } =
+    useGetUsersQuery<SelectedUserProperties>({
+      limit: 0,
+      select: ['id', 'username', 'image'],
+    });
+
+  const { data: postsData, isLoading: isLoadingPosts } = useGetPostsQuery({
+    limit,
+    skip,
+    sortBy,
+    sortOrder,
+  });
+
+  const { data: postsByTagData, isLoading: isLoadingPostsByTag } =
+    useGetPostsByTagQuery({
+      limit,
+      skip,
+      sortBy,
+      sortOrder,
+      selectedTag,
+    });
+
+  const { data: postsBySearchData, isLoading: isLoadingPostsBySearch } =
+    useGetPostsBySearchQuery({
+      limit,
+      skip,
+      sortBy,
+      sortOrder,
+      searchQuery,
+    });
+
+  const postsWithAuthor = useMemo(() => {
+    return getPostsWithAuthor<SelectedUserProperties>(
+      postsData?.posts ?? [],
+      usersData?.users ?? []
+    );
+  }, [postsData?.posts, usersData?.users, ...[Object.values(filters)]]);
+
+  const postsWithAuthorByTag = useMemo(() => {
+    return getPostsWithAuthor<SelectedUserProperties>(
+      postsByTagData?.posts ?? [],
+      usersData?.users ?? []
+    );
+  }, [
+    postsByTagData?.posts,
+    usersData?.users,
+    selectedTag,
+    ...[Object.values(filters)],
+  ]);
+
+  const postsWithAuthorBySearch = useMemo(() => {
+    return getPostsWithAuthor<SelectedUserProperties>(
+      postsBySearchData?.posts ?? [],
+      usersData?.users ?? []
+    );
+  }, [postsBySearchData?.posts, usersData?.users, ...[Object.values(filters)]]);
+
+  const isLoading =
+    isLoadingUsers ||
+    isLoadingPosts ||
+    isLoadingPostsByTag ||
+    isLoadingPostsBySearch;
+
+  useEffect(() => {
+    // 검색어가 있으면 검색 결과 사용
+    if (searchQuery && searchQuery.trim()) {
+      setPosts(postsWithAuthorBySearch);
+      setQueryType(POST_QUERY_TYPE.SEARCH);
+      return;
+    }
+
+    // 태그가 있고 'all'이 아니면 태그 결과 사용
+    if (selectedTag && selectedTag !== 'all' && selectedTag.trim()) {
+      setPosts(postsWithAuthorByTag);
+      setQueryType(POST_QUERY_TYPE.TAG);
+      return;
+    }
+
+    // 기본 게시물 목록 사용
+    setPosts(postsWithAuthor);
+    setQueryType(POST_QUERY_TYPE.BASE);
+  }, [
+    postsWithAuthor,
+    postsWithAuthorByTag,
+    postsWithAuthorBySearch,
+    searchQuery,
+    selectedTag,
+  ]);
+
+  useEffect(() => {
+    if (searchQuery && searchQuery.trim()) {
+      setPagination({
+        ...pagination,
+        total: postsBySearchData?.total ?? 0,
+      });
+      return;
+    }
+
+    // 태그가 있고 'all'이 아니면 태그 결과 사용
+    if (selectedTag && selectedTag !== 'all' && selectedTag.trim()) {
+      setPagination({
+        ...pagination,
+        total: postsByTagData?.total ?? 0,
+      });
+      return;
+    }
+
+    // 기본 게시물 목록 사용
+    setPagination({
+      ...pagination,
+      total: postsData?.total ?? 0,
+    });
+  }, [postsBySearchData, postsByTagData, postsData]);
+
+  return {
+    posts,
+    setPosts,
+    isLoading,
+  };
+};
diff --git a/final_src/4_features/filter-posts/index.ts b/final_src/4_features/filter-posts/index.ts
new file mode 100644
index 000000000..57f2b15ab
--- /dev/null
+++ b/final_src/4_features/filter-posts/index.ts
@@ -0,0 +1,10 @@
+// UI Components - 사용자 인터페이스 컴포넌트
+export { Filters } from './ui/Filters';
+export { SearchInput } from './ui/SearchInput';
+export { SelectLimit } from './ui/SelectLimit';
+export { SelectSortBy } from './ui/SelectSortBy';
+export { SelectSortOrder } from './ui/SelectSortOrder';
+export { SelectTag } from './ui/SelectTag';
+
+// Hooks - 비즈니스 로직 훅
+export { useFilteredPosts } from './hooks/useFilteredPosts';
diff --git a/final_src/4_features/filter-posts/ui/Filters.tsx b/final_src/4_features/filter-posts/ui/Filters.tsx
new file mode 100644
index 000000000..16bafecb0
--- /dev/null
+++ b/final_src/4_features/filter-posts/ui/Filters.tsx
@@ -0,0 +1,15 @@
+import { SearchInput } from './SearchInput';
+import { SelectSortBy } from './SelectSortBy';
+import { SelectSortOrder } from './SelectSortOrder';
+import { SelectTag } from './SelectTag';
+
+export const Filters = () => {
+  return (
+    <div className='flex gap-4'>
+      <SearchInput />
+      <SelectTag />
+      <SelectSortBy />
+      <SelectSortOrder />
+    </div>
+  );
+};
diff --git a/final_src/4_features/filter-posts/ui/SearchInput.tsx b/final_src/4_features/filter-posts/ui/SearchInput.tsx
new file mode 100644
index 000000000..29cc8c124
--- /dev/null
+++ b/final_src/4_features/filter-posts/ui/SearchInput.tsx
@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+
+import { Search } from 'lucide-react';
+
+import { UI_CONSTANTS } from '@/shared/constants';
+import { useDebounce, usePostsFilterStore } from '@/shared/lib';
+import { Input } from '@/shared/ui';
+
+export const SearchInput = () => {
+  const { searchQuery, setSearchQuery } = usePostsFilterStore();
+  const debouncedSetSearchQuery = useDebounce((searchQuery: string) => {
+    setSearchQuery(searchQuery);
+  }, 500);
+
+  const [originalSearchQuery, setOriginalSearchQuery] = useState(searchQuery);
+
+  const handleChangeSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setOriginalSearchQuery(e.target.value);
+  };
+
+  const handleKeyDownSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      setOriginalSearchQuery(e.currentTarget.value);
+    }
+  };
+
+  useEffect(() => {
+    debouncedSetSearchQuery(originalSearchQuery);
+  }, [originalSearchQuery]);
+
+  return (
+    <div className='flex-1'>
+      <div className='relative'>
+        <Search
+          className={`absolute left-2 top-2.5 ${UI_CONSTANTS.ICON_SIZES.MEDIUM} text-muted-foreground`}
+        />
+        <Input
+          placeholder='게시물 검색...'
+          className='pl-8'
+          value={originalSearchQuery}
+          onChange={handleChangeSearch}
+          onKeyDown={handleKeyDownSearch}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/final_src/4_features/filter-posts/ui/SelectLimit.tsx b/final_src/4_features/filter-posts/ui/SelectLimit.tsx
new file mode 100644
index 000000000..c42827701
--- /dev/null
+++ b/final_src/4_features/filter-posts/ui/SelectLimit.tsx
@@ -0,0 +1,31 @@
+import { UI_CONSTANTS } from '@/shared/constants';
+import { usePostsFilterStore } from '@/shared/lib';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/shared/ui';
+
+export const SelectLimit = () => {
+  const { limit, setLimit } = usePostsFilterStore();
+
+  return (
+    <Select
+      value={limit.toString()}
+      onValueChange={value => setLimit(Number(value))}
+    >
+      <SelectTrigger className='w-[180px]'>
+        <SelectValue placeholder='10' />
+      </SelectTrigger>
+      <SelectContent>
+        {UI_CONSTANTS.PAGINATION.LIMIT_OPTIONS.map(option => (
+          <SelectItem key={option} value={String(option)}>
+            {option}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};
diff --git a/final_src/4_features/filter-posts/ui/SelectSortBy.tsx b/final_src/4_features/filter-posts/ui/SelectSortBy.tsx
new file mode 100644
index 000000000..2a06dc535
--- /dev/null
+++ b/final_src/4_features/filter-posts/ui/SelectSortBy.tsx
@@ -0,0 +1,35 @@
+import { SORT_BY } from '@/entities/post';
+import { usePostsFilterStore } from '@/shared/lib';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/shared/ui';
+
+const SORT_BY_OPTIONS: { value: SORT_BY; label: string }[] = [
+  { value: SORT_BY.NONE, label: '없음' },
+  { value: SORT_BY.ID, label: 'ID' },
+  { value: SORT_BY.TITLE, label: '제목' },
+  { value: SORT_BY.REACTIONS, label: '반응' },
+];
+
+export const SelectSortBy = () => {
+  const { sortBy, setSortBy } = usePostsFilterStore();
+
+  return (
+    <Select value={sortBy} onValueChange={setSortBy}>
+      <SelectTrigger className='w-[180px]'>
+        <SelectValue placeholder='정렬 기준' />
+      </SelectTrigger>
+      <SelectContent>
+        {SORT_BY_OPTIONS.map(option => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};
diff --git a/final_src/4_features/filter-posts/ui/SelectSortOrder.tsx b/final_src/4_features/filter-posts/ui/SelectSortOrder.tsx
new file mode 100644
index 000000000..bff9b08cf
--- /dev/null
+++ b/final_src/4_features/filter-posts/ui/SelectSortOrder.tsx
@@ -0,0 +1,33 @@
+import { SORT_ORDER } from '@/entities/post';
+import { usePostsFilterStore } from '@/shared/lib';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/shared/ui';
+
+const SORT_ORDER_OPTIONS: { value: SORT_ORDER; label: string }[] = [
+  { value: SORT_ORDER.ASC, label: '오름차순' },
+  { value: SORT_ORDER.DESC, label: '내림차순' },
+];
+
+export const SelectSortOrder = () => {
+  const { sortOrder, setSortOrder } = usePostsFilterStore();
+
+  return (
+    <Select value={sortOrder} onValueChange={setSortOrder}>
+      <SelectTrigger className='w-[180px]'>
+        <SelectValue placeholder='정렬 순서' />
+      </SelectTrigger>
+      <SelectContent>
+        {SORT_ORDER_OPTIONS.map(option => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};
diff --git a/final_src/4_features/filter-posts/ui/SelectTag.tsx b/final_src/4_features/filter-posts/ui/SelectTag.tsx
new file mode 100644
index 000000000..eeeb3b10b
--- /dev/null
+++ b/final_src/4_features/filter-posts/ui/SelectTag.tsx
@@ -0,0 +1,45 @@
+import { useGetTagsQuery } from '@/entities/tag';
+import { usePostsFilterStore } from '@/shared/lib';
+import {
+  LoadingSpinner,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/shared/ui';
+
+export const SelectTag = () => {
+  const { selectedTag, setSelectedTag } = usePostsFilterStore();
+  const { data: tags, isLoading } = useGetTagsQuery();
+
+  const handleTagChange = (value: string) => {
+    setSelectedTag(value);
+  };
+
+  return (
+    <Select value={selectedTag} onValueChange={handleTagChange}>
+      {isLoading ? (
+        <SelectTrigger className='w-[180px]'>
+          <LoadingSpinner size='sm' />
+        </SelectTrigger>
+      ) : (
+        <>
+          <SelectTrigger className='w-[180px]'>
+            <SelectValue placeholder='태그 선택' />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value='all'>모든 태그</SelectItem>
+            {tags &&
+              tags.length > 0 &&
+              tags.map(tag => (
+                <SelectItem key={tag.url} value={tag.slug}>
+                  {tag.slug}
+                </SelectItem>
+              ))}
+          </SelectContent>
+        </>
+      )}
+    </Select>
+  );
+};
diff --git a/final_src/4_features/post-management/hooks/useCreatePostForm.ts b/final_src/4_features/post-management/hooks/useCreatePostForm.ts
new file mode 100644
index 000000000..dbce9ae11
--- /dev/null
+++ b/final_src/4_features/post-management/hooks/useCreatePostForm.ts
@@ -0,0 +1,66 @@
+import { useState } from 'react';
+
+import { useCreatePostMutation } from '@/entities/post';
+import { API_CONSTANTS } from '@/shared/constants';
+import { useUIStore } from '@/shared/lib';
+
+export const useCreatePostForm = () => {
+  const { setShowAddDialog } = useUIStore();
+  const { mutate: createPost } = useCreatePostMutation({
+    onSuccess: () => {
+      resetForm();
+    },
+    onError: (error: Error) => {
+      console.error('게시물 추가 오류:', error);
+      // ! 모달 다시 열어서 사용자가 수정하기
+      setShowAddDialog(true);
+    },
+  });
+
+  const [postTitle, setPostTitle] = useState<string>('');
+  const [postBody, setPostBody] = useState<string>('');
+  const [postUserId, setPostUserId] = useState<number>(
+    API_CONSTANTS.DEFAULT_USER_ID
+  );
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    // ! 다이얼로그 먼저 닫고 UI 낙관적 업데이트 보여주기
+    setShowAddDialog(false);
+    createPost({
+      title: postTitle,
+      body: postBody,
+      userId: postUserId,
+    });
+  };
+
+  const resetForm = () => {
+    setPostTitle('');
+    setPostBody('');
+    setPostUserId(API_CONSTANTS.DEFAULT_USER_ID);
+  };
+
+  const handleChangeTitle = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPostTitle(e.target.value);
+  };
+
+  const handleChangeBody = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setPostBody(e.target.value);
+  };
+
+  const handleChangeUserId = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPostUserId(Number(e.target.value));
+  };
+
+  return {
+    postTitle,
+    postBody,
+    postUserId,
+    handleSubmit,
+    resetForm,
+    handleChangeTitle,
+    handleChangeBody,
+    handleChangeUserId,
+  };
+};
diff --git a/final_src/4_features/post-management/hooks/useEditPostForm.ts b/final_src/4_features/post-management/hooks/useEditPostForm.ts
new file mode 100644
index 000000000..2886181eb
--- /dev/null
+++ b/final_src/4_features/post-management/hooks/useEditPostForm.ts
@@ -0,0 +1,60 @@
+import { ChangeEvent, useEffect, useState } from 'react';
+
+import { usePutPostMutation } from '@/entities/post';
+import { useUIStore } from '@/shared/lib';
+
+export const useEditPostForm = () => {
+  const { selectedPost, setShowEditDialog } = useUIStore();
+  const { mutate: updatePost } = usePutPostMutation({
+    onSuccess: () => {
+      resetForm();
+    },
+    onError: error => {
+      console.error('게시물 수정 오류:', error);
+      // ! 모달 다시 열어서 사용자가 수정하기
+      setShowEditDialog(true);
+    },
+  });
+
+  const [title, setTitle] = useState(selectedPost?.title || '');
+  const [body, setBody] = useState(selectedPost?.body || '');
+
+  const handleChangeTitle = (e: ChangeEvent<HTMLInputElement>) => {
+    setTitle(e.target.value);
+  };
+
+  const handleChangeBody = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setBody(e.target.value);
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    // ! 모달 먼저 닫고 UI 낙관적 업데이트 보여주기
+    setShowEditDialog(false);
+    updatePost({
+      id: selectedPost?.id ?? 0,
+      title,
+      body,
+      userId: selectedPost?.userId ?? 0,
+    });
+  };
+
+  useEffect(() => {
+    setTitle(selectedPost?.title || '');
+    setBody(selectedPost?.body || '');
+  }, [selectedPost]);
+
+  const resetForm = () => {
+    setTitle('');
+    setBody('');
+  };
+
+  return {
+    title,
+    body,
+    handleChangeTitle,
+    handleChangeBody,
+    handleSubmit,
+  };
+};
diff --git a/final_src/4_features/post-management/index.ts b/final_src/4_features/post-management/index.ts
new file mode 100644
index 000000000..ecfdede3e
--- /dev/null
+++ b/final_src/4_features/post-management/index.ts
@@ -0,0 +1,4 @@
+export * from './ui/AddPostFormDialog';
+export * from './ui/AddPostButton';
+export * from './ui/PostDetailDialog';
+export * from './ui/PostTable';
diff --git a/final_src/4_features/post-management/lib/post.util.ts b/final_src/4_features/post-management/lib/post.util.ts
new file mode 100644
index 000000000..f4f9774a5
--- /dev/null
+++ b/final_src/4_features/post-management/lib/post.util.ts
@@ -0,0 +1,18 @@
+import type { Post } from '@/entities/post';
+import type { User, UserPick } from '@/entities/user';
+
+import { PostWithAuthor } from '../types';
+
+export const getPostsWithAuthor = <K extends keyof User>(
+  posts: Post[],
+  users: UserPick<K | 'id'>[]
+): PostWithAuthor<K>[] => {
+  return posts.map(post => {
+    const author = users.find(user => user.id === post.userId);
+
+    return {
+      ...post,
+      author,
+    };
+  });
+};
diff --git a/final_src/4_features/post-management/types.ts b/final_src/4_features/post-management/types.ts
new file mode 100644
index 000000000..a911eb348
--- /dev/null
+++ b/final_src/4_features/post-management/types.ts
@@ -0,0 +1,6 @@
+import type { Post } from '@/entities/post';
+import type { User, UserPick } from '@/entities/user';
+
+export interface PostWithAuthor<K extends keyof User> extends Post {
+  author?: UserPick<K>;
+}
diff --git a/final_src/4_features/post-management/ui/AddPostButton.tsx b/final_src/4_features/post-management/ui/AddPostButton.tsx
new file mode 100644
index 000000000..76eb1dcb0
--- /dev/null
+++ b/final_src/4_features/post-management/ui/AddPostButton.tsx
@@ -0,0 +1,16 @@
+import { Plus } from 'lucide-react';
+
+import { UI_CONSTANTS } from '@/shared/constants';
+import { useUIStore } from '@/shared/lib';
+import { Button } from '@/shared/ui';
+
+export const AddPostButton = () => {
+  const { setShowAddDialog } = useUIStore();
+
+  return (
+    <Button onClick={() => setShowAddDialog(true)}>
+      <Plus className={`${UI_CONSTANTS.ICON_SIZES.MEDIUM} mr-2`} />
+      게시물 추가
+    </Button>
+  );
+};
diff --git a/final_src/4_features/post-management/ui/AddPostFormDialog.tsx b/final_src/4_features/post-management/ui/AddPostFormDialog.tsx
new file mode 100644
index 000000000..f0947207e
--- /dev/null
+++ b/final_src/4_features/post-management/ui/AddPostFormDialog.tsx
@@ -0,0 +1,60 @@
+import { UI_CONSTANTS } from '@/shared/constants';
+import { useUIStore } from '@/shared/lib';
+import { Button, ContentDialog, Input, Textarea } from '@/shared/ui';
+
+import { useCreatePostForm } from '../hooks/useCreatePostForm';
+
+export const AddPostFormDialog = () => {
+  const { setShowAddDialog, showAddDialog } = useUIStore();
+  const {
+    postTitle,
+    postBody,
+    postUserId,
+    handleSubmit,
+    resetForm,
+    handleChangeTitle,
+    handleChangeBody,
+    handleChangeUserId,
+  } = useCreatePostForm();
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      resetForm();
+      setShowAddDialog(open);
+      return;
+    }
+
+    setShowAddDialog(open);
+  };
+
+  return (
+    <ContentDialog
+      title='새 게시물 추가'
+      open={showAddDialog}
+      onOpenChange={handleOpenChange}
+    >
+      <form className='space-y-4' onSubmit={handleSubmit}>
+        <Input
+          placeholder='제목'
+          value={postTitle}
+          onChange={handleChangeTitle}
+        />
+
+        <Textarea
+          rows={UI_CONSTANTS.TEXTAREA_ROWS.LARGE}
+          placeholder='내용'
+          value={postBody}
+          onChange={handleChangeBody}
+        />
+
+        <Input
+          type='number'
+          placeholder='사용자 ID'
+          value={postUserId}
+          onChange={handleChangeUserId}
+        />
+        <Button type='submit'>게시물 추가</Button>
+      </form>
+    </ContentDialog>
+  );
+};
diff --git a/final_src/4_features/post-management/ui/EditPostFormDialog.tsx b/final_src/4_features/post-management/ui/EditPostFormDialog.tsx
new file mode 100644
index 000000000..5a3e1a9e7
--- /dev/null
+++ b/final_src/4_features/post-management/ui/EditPostFormDialog.tsx
@@ -0,0 +1,30 @@
+import { UI_CONSTANTS } from '@/shared/constants';
+import { useUIStore } from '@/shared/lib';
+import { Button, ContentDialog, Input, Textarea } from '@/shared/ui';
+
+import { useEditPostForm } from '../hooks/useEditPostForm';
+
+export const EditPostFormDialog = () => {
+  const { title, body, handleChangeTitle, handleChangeBody, handleSubmit } =
+    useEditPostForm();
+  const { showEditDialog, setShowEditDialog } = useUIStore();
+
+  return (
+    <ContentDialog
+      open={showEditDialog}
+      onOpenChange={setShowEditDialog}
+      title='게시물 수정'
+    >
+      <form className='space-y-4' onSubmit={handleSubmit}>
+        <Input placeholder='제목' value={title} onChange={handleChangeTitle} />
+        <Textarea
+          rows={UI_CONSTANTS.TEXTAREA_ROWS.MEDIUM}
+          placeholder='내용'
+          value={body}
+          onChange={handleChangeBody}
+        />
+        <Button type='submit'>게시물 업데이트</Button>
+      </form>
+    </ContentDialog>
+  );
+};
diff --git a/final_src/4_features/post-management/ui/PostDetailDialog.tsx b/final_src/4_features/post-management/ui/PostDetailDialog.tsx
new file mode 100644
index 000000000..dca78d1c7
--- /dev/null
+++ b/final_src/4_features/post-management/ui/PostDetailDialog.tsx
@@ -0,0 +1,44 @@
+import { Plus } from 'lucide-react';
+
+import { CommentList } from '@/features/comment-management/ui/CommentList';
+import { UI_CONSTANTS } from '@/shared/constants';
+import { highlightText, usePostsFilterStore, useUIStore } from '@/shared/lib';
+import { Button, ContentDialog } from '@/shared/ui';
+
+export const PostDetailDialog = () => {
+  const {
+    showPostDetailDialog,
+    setShowPostDetailDialog,
+    selectedPost,
+    setShowAddCommentDialog,
+  } = useUIStore();
+  const { searchQuery } = usePostsFilterStore();
+
+  if (!selectedPost) return null;
+
+  const handleClickAddComment = () => {
+    setShowAddCommentDialog(true);
+  };
+
+  return (
+    <ContentDialog
+      open={showPostDetailDialog}
+      onOpenChange={setShowPostDetailDialog}
+      title={highlightText(selectedPost.title, searchQuery)}
+    >
+      <div className='space-y-4 w-full'>
+        <p>{highlightText(selectedPost?.body, searchQuery)}</p>
+        <div className='mt-2'>
+          <div className='flex items-center justify-between mb-2'>
+            <h3 className='text-sm font-semibold'>댓글</h3>
+            <Button size='sm' onClick={handleClickAddComment}>
+              <Plus className={`${UI_CONSTANTS.ICON_SIZES.SMALL} mr-1`} />
+              댓글 추가
+            </Button>
+          </div>
+          <CommentList />
+        </div>
+      </div>
+    </ContentDialog>
+  );
+};
diff --git a/final_src/4_features/post-management/ui/PostPagination.tsx b/final_src/4_features/post-management/ui/PostPagination.tsx
new file mode 100644
index 000000000..4951e1397
--- /dev/null
+++ b/final_src/4_features/post-management/ui/PostPagination.tsx
@@ -0,0 +1,39 @@
+import { SelectLimit } from '@/features/filter-posts/ui/SelectLimit';
+import { UI_CONSTANTS } from '@/shared/constants';
+import { usePostsFilterStore } from '@/shared/lib';
+import { Button } from '@/shared/ui';
+
+export const PostPagination = () => {
+  const {
+    setSkip,
+    pagination: { total, limit, skip },
+  } = usePostsFilterStore();
+
+  return (
+    <div className='flex justify-between items-center'>
+      <div className='flex items-center gap-2'>
+        <span>표시</span>
+        <SelectLimit />
+        <span>항목</span>
+      </div>
+      <div className='flex gap-2'>
+        <Button
+          disabled={skip === UI_CONSTANTS.PAGINATION.DEFAULT_SKIP}
+          onClick={() =>
+            setSkip(
+              Math.max(UI_CONSTANTS.PAGINATION.DEFAULT_SKIP, skip - limit)
+            )
+          }
+        >
+          이전
+        </Button>
+        <Button
+          disabled={skip + limit >= total}
+          onClick={() => setSkip(skip + limit)}
+        >
+          다음
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/final_src/4_features/post-management/ui/PostTable.tsx b/final_src/4_features/post-management/ui/PostTable.tsx
new file mode 100644
index 000000000..a95797afa
--- /dev/null
+++ b/final_src/4_features/post-management/ui/PostTable.tsx
@@ -0,0 +1,172 @@
+import {
+  Edit2,
+  MessageSquare,
+  ThumbsDown,
+  ThumbsUp,
+  Trash2,
+} from 'lucide-react';
+
+import { Post, useDeletePostMutation } from '@/entities/post';
+import { User, UserPick } from '@/entities/user';
+import { API_CONSTANTS, UI_CONSTANTS } from '@/shared/constants';
+import { highlightText, usePostsFilterStore, useUIStore } from '@/shared/lib';
+import {
+  Button,
+  LoadingSpinner,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/shared/ui';
+
+import {
+  SelectedUserProperties,
+  useFilteredPosts,
+} from '../../filter-posts/hooks/useFilteredPosts';
+
+export const PostTable = () => {
+  const { posts, isLoading } = useFilteredPosts();
+  const { selectedTag, setSelectedTag, searchQuery, limit } =
+    usePostsFilterStore();
+  const {
+    setShowUserModal,
+    setSelectedUser,
+    setSelectedPost,
+    setShowPostDetailDialog,
+    setShowEditDialog,
+  } = useUIStore();
+  const { mutate: deletePost } = useDeletePostMutation({
+    onError: error => {
+      console.error('게시물 삭제 오류:', error);
+    },
+  });
+
+  const handleClickTag = (tag: string) => {
+    setSelectedTag(tag);
+  };
+
+  const handleClickDeletePost = (id: number) => {
+    deletePost(id);
+  };
+
+  const handleClickEditPost = (post: Post) => {
+    setSelectedPost(post);
+    setShowEditDialog(true);
+  };
+
+  const handleClickDetailPost = (post: Post) => {
+    setSelectedPost(post);
+    setShowPostDetailDialog(true);
+  };
+
+  const handleClickUser = (user: UserPick<SelectedUserProperties>) => {
+    setShowUserModal(true);
+    setSelectedUser(user as User);
+  };
+
+  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>
+        {isLoading ? (
+          <TableRow>
+            <TableCell className={`h-[${80 * limit}px]`} {...{ colSpan: 5 }}>
+              <div className='flex justify-center items-center w-full h-full'>
+                <LoadingSpinner />
+              </div>
+            </TableCell>
+          </TableRow>
+        ) : (
+          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={`${UI_CONSTANTS.STYLES.TAG_SIZE} ${
+                          selectedTag === tag
+                            ? UI_CONSTANTS.STYLES.TAG_SELECTED
+                            : UI_CONSTANTS.STYLES.TAG_DEFAULT
+                        }`}
+                        onClick={() => handleClickTag(tag)}
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </TableCell>
+              <TableCell>
+                <div
+                  className='flex items-center space-x-2 cursor-pointer'
+                  onClick={() => post.author && handleClickUser(post.author)}
+                >
+                  <img
+                    src={post.author?.image}
+                    alt={post.author?.username}
+                    className={`${UI_CONSTANTS.ICON_SIZES.LARGE} rounded-full`}
+                  />
+                  <span>{post.author?.username}</span>
+                </div>
+              </TableCell>
+              <TableCell>
+                <div className='flex items-center gap-2'>
+                  <ThumbsUp className={UI_CONSTANTS.ICON_SIZES.MEDIUM} />
+                  <span>
+                    {post.reactions?.likes ||
+                      API_CONSTANTS.REACTIONS.DEFAULT_LIKES}
+                  </span>
+                  <ThumbsDown className={UI_CONSTANTS.ICON_SIZES.MEDIUM} />
+                  <span>
+                    {post.reactions?.dislikes ||
+                      API_CONSTANTS.REACTIONS.DEFAULT_DISLIKES}
+                  </span>
+                </div>
+              </TableCell>
+              <TableCell>
+                <div className='flex items-center gap-2'>
+                  <Button
+                    variant='ghost'
+                    size='sm'
+                    onClick={() => handleClickDetailPost(post)}
+                  >
+                    <MessageSquare className={UI_CONSTANTS.ICON_SIZES.MEDIUM} />
+                  </Button>
+                  <Button
+                    variant='ghost'
+                    size='sm'
+                    onClick={() => handleClickEditPost(post)}
+                  >
+                    <Edit2 className={UI_CONSTANTS.ICON_SIZES.MEDIUM} />
+                  </Button>
+                  <Button
+                    variant='ghost'
+                    size='sm'
+                    onClick={() => handleClickDeletePost(post.id)}
+                  >
+                    <Trash2 className={UI_CONSTANTS.ICON_SIZES.MEDIUM} />
+                  </Button>
+                </div>
+              </TableCell>
+            </TableRow>
+          ))
+        )}
+      </TableBody>
+    </Table>
+  );
+};
diff --git a/final_src/4_features/user-profile/index.ts b/final_src/4_features/user-profile/index.ts
new file mode 100644
index 000000000..830c625d4
--- /dev/null
+++ b/final_src/4_features/user-profile/index.ts
@@ -0,0 +1 @@
+export * from './ui/UseProfileDialog';
diff --git a/final_src/4_features/user-profile/ui/UseProfileDialog.tsx b/final_src/4_features/user-profile/ui/UseProfileDialog.tsx
new file mode 100644
index 000000000..62898262a
--- /dev/null
+++ b/final_src/4_features/user-profile/ui/UseProfileDialog.tsx
@@ -0,0 +1,60 @@
+import { Loader2 } from 'lucide-react';
+
+import { useGetUserQuery } from '@/entities/user';
+import { useUIStore } from '@/shared/lib';
+import { ContentDialog } from '@/shared/ui';
+
+export const UserProfileDialog = () => {
+  const { selectedUser, showUserModal, setShowUserModal } = useUIStore();
+
+  const { data: user, isLoading } = useGetUserQuery(selectedUser?.id ?? null);
+
+  if (!selectedUser) return null;
+
+  return (
+    <ContentDialog
+      open={showUserModal}
+      onOpenChange={setShowUserModal}
+      title='사용자 정보'
+    >
+      {isLoading ? (
+        <div className='flex justify-center items-center h-full'>
+          <Loader2 className='w-6 h-6 animate-spin' />
+        </div>
+      ) : (
+        <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>
+      )}
+    </ContentDialog>
+  );
+};
diff --git a/final_src/5_entities/comment/comment.api.ts b/final_src/5_entities/comment/comment.api.ts
new file mode 100644
index 000000000..ad45e832e
--- /dev/null
+++ b/final_src/5_entities/comment/comment.api.ts
@@ -0,0 +1,42 @@
+import { ApiService } from '@/shared/lib';
+
+import {
+  Comment,
+  CommentToCreate,
+  CreatedComment,
+  DeletedComment,
+  GetCommentsResponse,
+} from './comment.type';
+
+export const getComments = async (
+  postId: number
+): Promise<GetCommentsResponse> => {
+  return ApiService.get<GetCommentsResponse>(`/comments/post/${postId}`);
+};
+
+export const createComment = async (
+  newComment: CommentToCreate
+): Promise<CreatedComment> => {
+  return ApiService.post<CreatedComment>('/comments/add', newComment);
+};
+
+export const updateComment = async (
+  updatedComment: Comment
+): Promise<{ body: string }> => {
+  return ApiService.put<{ body: string }>(`/comments/${updatedComment.id}`, {
+    body: updatedComment.body,
+  });
+};
+
+export const patchComment = async (
+  updatedComment: Partial<Comment>,
+  commentId: number
+): Promise<Comment> => {
+  return ApiService.put<Comment>(`/comments/${commentId}`, updatedComment);
+};
+
+export const deleteComment = async (
+  commentId: number
+): Promise<DeletedComment> => {
+  return ApiService.delete<DeletedComment>(`/comments/${commentId}`);
+};
diff --git a/final_src/5_entities/comment/comment.queries.ts b/final_src/5_entities/comment/comment.queries.ts
new file mode 100644
index 000000000..ff7fd3088
--- /dev/null
+++ b/final_src/5_entities/comment/comment.queries.ts
@@ -0,0 +1,317 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { queryKeys } from '@/shared/lib';
+import { MutationProps, Nullable } from '@/shared/types';
+
+import {
+  createComment,
+  deleteComment,
+  getComments,
+  patchComment,
+  updateComment,
+} from './comment.api';
+import {
+  Comment,
+  CommentToCreate,
+  CreatedComment,
+  DeletedComment,
+  GetCommentsResponse,
+} from './comment.type';
+
+export const useGetCommentsQuery = (postId: Nullable<number>) => {
+  return useQuery({
+    queryKey: queryKeys.comments.list(postId ?? 0),
+    queryFn: () => getComments(postId ?? 0),
+    enabled: !!postId,
+  });
+};
+
+export const useCreateCommentMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<CreatedComment>) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (newComment: CommentToCreate) => createComment(newComment),
+    onMutate: async newComment => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.comments.list(newComment.postId),
+      });
+
+      const previousCommentData = queryClient.getQueryData<GetCommentsResponse>(
+        queryKeys.comments.list(newComment.postId)
+      );
+
+      const commentToAdd: Comment = {
+        ...newComment,
+        id: Math.floor(Math.random() * 1000000),
+        likes: 0,
+        user: {
+          id: 1,
+          username: 'John Doe',
+          image: 'john.doe@example.com',
+        },
+      };
+
+      // ! 이전 데이터 캐시에 새 댓글 추가하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(
+        queryKeys.comments.list(newComment.postId),
+        (old: GetCommentsResponse) => {
+          return {
+            ...old,
+            comments: [commentToAdd, ...(old.comments || [])],
+          };
+        }
+      );
+
+      return { previousCommentData };
+    },
+    onError: (error, { postId }, context) => {
+      queryClient.setQueryData(
+        queryKeys.comments.list(postId),
+        context?.previousCommentData
+      );
+      onError?.(error);
+    },
+    onSuccess: (data, _, { previousCommentData }) => {
+      // ! 성공 시 이전 데이터에 성공 데이터 추가
+      queryClient.setQueryData(
+        queryKeys.comments.list(data.postId),
+        (old: any) => {
+          return {
+            ...old,
+            comments: [data, ...(previousCommentData?.comments || [])],
+          };
+        }
+      );
+      onSuccess?.(data);
+    },
+  });
+};
+
+export const useUpdateCommentMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<{ body: string }>) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (updatedComment: Comment) => updateComment(updatedComment),
+    onMutate: async updatedComment => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.comments.list(updatedComment.postId),
+      });
+
+      const previousComments = queryClient.getQueryData<GetCommentsResponse>(
+        queryKeys.comments.list(updatedComment.postId)
+      );
+
+      // ! 이전 데이터 캐시에 수정된 댓글 업데이트하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(
+        queryKeys.comments.list(updatedComment.postId),
+        (old: GetCommentsResponse) => {
+          if (!old) {
+            return {
+              comments: [updatedComment],
+              total: 1,
+              skip: 0,
+              limit: 10,
+            };
+          }
+
+          return {
+            ...old,
+            comments: old.comments.map((comment: Comment) =>
+              comment.id === updatedComment.id ? updatedComment : comment
+            ),
+          };
+        }
+      );
+
+      return { previousComments };
+    },
+    onError: (error, updatedComment, context) => {
+      queryClient.setQueryData(
+        queryKeys.comments.list(updatedComment.postId),
+        context?.previousComments
+      );
+      onError?.(error);
+    },
+    onSuccess: (data, updatedComment, { previousComments }) => {
+      // ! 성공 시 이전 데이터에 성공 데이터 추가
+      queryClient.setQueryData(
+        queryKeys.comments.list(updatedComment.postId),
+        (old: any) => {
+          return {
+            ...old,
+            comments: previousComments?.comments.map((comment: Comment) =>
+              comment.id === updatedComment.id
+                ? { ...comment, body: data.body }
+                : comment
+            ),
+          };
+        }
+      );
+      onSuccess?.(data);
+    },
+  });
+};
+
+export const useDeleteCommentMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<DeletedComment>) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ commentId }: { commentId: number; postId: number }) =>
+      deleteComment(commentId),
+    onMutate: async ({ commentId, postId }) => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.comments.list(postId),
+      });
+
+      const previousComments = queryClient.getQueryData<GetCommentsResponse>(
+        queryKeys.comments.list(postId)
+      );
+
+      // ! 이전 데이터 캐시에 삭제된 댓글 제외하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(queryKeys.comments.list(postId), (old: any) => {
+        if (!old) {
+          return {
+            comments: [],
+            total: 1,
+            skip: 0,
+            limit: 10,
+          };
+        }
+
+        return {
+          ...old,
+          comments: old.comments.filter(
+            (comment: Comment) => comment.id !== commentId
+          ),
+        };
+      });
+
+      return { previousComments };
+    },
+    onError: (error, { postId }, context) => {
+      queryClient.setQueryData(
+        queryKeys.comments.list(postId),
+        context?.previousComments
+      );
+      onError?.(error);
+    },
+    onSuccess: (data, { postId }, { previousComments }) => {
+      // ! 성공 시 이전 데이터에서 삭제된 댓글 제외
+      queryClient.setQueryData(queryKeys.comments.list(postId), (old: any) => {
+        return {
+          ...old,
+          comments: previousComments?.comments.filter(
+            (comment: Comment) => comment.id !== data.id
+          ),
+        };
+      });
+      onSuccess?.(data);
+    },
+  });
+};
+
+export const useLikeCommentMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<Comment>) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      commentId,
+      postId,
+    }: {
+      commentId: number;
+      postId: number;
+    }) => {
+      const commentsData = queryClient.getQueryData<GetCommentsResponse>(
+        queryKeys.comments.list(postId)
+      );
+
+      if (!commentsData) {
+        throw new Error('Comments not found');
+      }
+
+      const commentToUpdate = commentsData.comments.find(
+        (comment: Comment) => comment.id === commentId
+      );
+
+      if (!commentToUpdate) {
+        throw new Error('Comment not found');
+      }
+
+      return patchComment(
+        {
+          likes: commentToUpdate.likes + 1,
+        },
+        commentId
+      );
+    },
+    onMutate: async ({ commentId, postId }) => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.comments.list(postId),
+      });
+
+      const previousComments = queryClient.getQueryData<GetCommentsResponse>(
+        queryKeys.comments.list(postId)
+      );
+
+      // ! 이전 데이터 캐시에 좋아요 누른 댓글 업데이트하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(
+        queryKeys.comments.list(postId),
+        (old: GetCommentsResponse) => {
+          if (!old) {
+            return {
+              comments: [],
+              total: 0,
+              skip: 0,
+              limit: 10,
+            };
+          }
+
+          return {
+            ...old,
+            comments: old.comments.map((comment: Comment) =>
+              comment.id === commentId
+                ? { ...comment, likes: comment.likes + 1 }
+                : comment
+            ),
+          };
+        }
+      );
+
+      return { previousComments };
+    },
+    onError: (error, { postId }, context) => {
+      queryClient.setQueryData(
+        queryKeys.comments.list(postId),
+        context?.previousComments
+      );
+      onError?.(error);
+    },
+    onSuccess: (data, _, { previousComments }) => {
+      // ! 성공 시 이전 데이터에 좋아요 누른 댓글 업데이트
+      // ! 실무에선 응답 데이터의 좋아요 수가 증가해야하지만, 더미 데이터라 증가하지 않으므로 좋아요수가 증가한 것으로 가정하여 업데이트
+      queryClient.setQueryData(queryKeys.comments.list(data.postId), () => {
+        return {
+          ...previousComments,
+          comments: previousComments?.comments.map((comment: Comment) =>
+            comment.id === data.id
+              ? { ...data, likes: comment.likes + 1 }
+              : comment
+          ),
+        };
+      });
+      onSuccess?.(data);
+    },
+  });
+};
diff --git a/final_src/5_entities/comment/comment.type.ts b/final_src/5_entities/comment/comment.type.ts
new file mode 100644
index 000000000..0608de1b4
--- /dev/null
+++ b/final_src/5_entities/comment/comment.type.ts
@@ -0,0 +1,29 @@
+import { PaginationMeta } from '@/shared/types';
+
+import { BaseUser } from '../user';
+
+// ? Comment에 User도 포함되는데 Entity에 넣는게 맞나?
+export interface Comment {
+  id: number;
+  postId: number;
+  body: string;
+  user: BaseUser;
+  likes: number;
+}
+
+export interface CommentToCreate {
+  body: string;
+  postId: number;
+  userId: number;
+}
+
+export interface DeletedComment extends Comment {
+  isDeleted: boolean;
+  deletedOn: string;
+}
+
+export type CreatedComment = CommentToCreate;
+
+export interface GetCommentsResponse extends PaginationMeta {
+  comments: Comment[];
+}
diff --git a/final_src/5_entities/comment/index.ts b/final_src/5_entities/comment/index.ts
new file mode 100644
index 000000000..74af32942
--- /dev/null
+++ b/final_src/5_entities/comment/index.ts
@@ -0,0 +1,3 @@
+export * from './comment.type';
+export * from './comment.queries';
+export * from './comment.api';
diff --git a/final_src/5_entities/post/index.ts b/final_src/5_entities/post/index.ts
new file mode 100644
index 000000000..43e99fa54
--- /dev/null
+++ b/final_src/5_entities/post/index.ts
@@ -0,0 +1,14 @@
+// Types - 타입 정의
+export * from './post.type';
+
+// API - API 통신 함수
+export * from './post.api';
+
+// Queries - React Query 훅
+export * from './post.queries';
+
+// Models - 비즈니스 로직 모델
+export * from './post.model';
+
+// Constants - 상수 정의
+export * from './post.constant';
diff --git a/final_src/5_entities/post/post.api.ts b/final_src/5_entities/post/post.api.ts
new file mode 100644
index 000000000..71b669e90
--- /dev/null
+++ b/final_src/5_entities/post/post.api.ts
@@ -0,0 +1,74 @@
+import {
+  BaseFilterParams,
+  DeletedPost,
+  GetPostsResponse,
+  ParamsWithSearch,
+  ParamsWithTag,
+  Post,
+  POST_CONSTANTS,
+  SORT_ORDER,
+} from '@/entities/post';
+import { ApiService } from '@/shared/lib';
+
+export const getPosts = async ({
+  limit = POST_CONSTANTS.DEFAULT_LIMIT,
+  skip = POST_CONSTANTS.DEFAULT_SKIP,
+  sortBy,
+  sortOrder,
+}: BaseFilterParams): Promise<GetPostsResponse> => {
+  const params = {
+    limit: limit.toString(),
+    skip: skip.toString(),
+    sortBy: sortBy || '',
+    sortOrder: sortOrder || SORT_ORDER.ASC,
+  };
+
+  return ApiService.get<GetPostsResponse>('/posts', params);
+};
+
+export const getPostsByTag = async ({
+  selectedTag,
+  limit,
+  skip,
+  sortBy,
+  sortOrder,
+}: ParamsWithTag): Promise<GetPostsResponse> => {
+  const params = {
+    limit: limit?.toString() || '0',
+    skip: skip?.toString() || '0',
+    sortBy: sortBy || '',
+    sortOrder: sortOrder || SORT_ORDER.ASC,
+  };
+
+  return ApiService.get<GetPostsResponse>(`/posts/tag/${selectedTag}`, params);
+};
+
+export const getPostsBySearch = async ({
+  searchQuery,
+  limit,
+  skip,
+  sortBy,
+  sortOrder,
+}: ParamsWithSearch): Promise<GetPostsResponse> => {
+  const params = {
+    limit: limit?.toString() || '0',
+    skip: skip?.toString() || '0',
+    searchQuery,
+    sortBy: sortBy || '',
+    sortOrder: sortOrder || SORT_ORDER.ASC,
+  };
+
+  return ApiService.get<GetPostsResponse>('/posts/search', params);
+};
+
+export const createPost = async (newPost: Omit<Post, 'id'>): Promise<Post> => {
+  return ApiService.post<Post>('/posts/add', newPost);
+};
+
+export const putPost = async (updatedPost: Post): Promise<Post> => {
+  return ApiService.put<Post>(`/posts/${updatedPost.id}`, updatedPost);
+};
+
+export const deletePost = async (postId: number): Promise<DeletedPost> => {
+  return ApiService.delete(`/posts/${postId}`);
+};
diff --git a/final_src/5_entities/post/post.constant.ts b/final_src/5_entities/post/post.constant.ts
new file mode 100644
index 000000000..cdbe5654d
--- /dev/null
+++ b/final_src/5_entities/post/post.constant.ts
@@ -0,0 +1,4 @@
+export const POST_CONSTANTS = {
+  DEFAULT_LIMIT: 10,
+  DEFAULT_SKIP: 0,
+} as const;
diff --git a/final_src/5_entities/post/post.model.ts b/final_src/5_entities/post/post.model.ts
new file mode 100644
index 000000000..93e32aeaf
--- /dev/null
+++ b/final_src/5_entities/post/post.model.ts
@@ -0,0 +1,5 @@
+// Post 엔티티의 순수한 비즈니스 로직만 포함
+export const postModel = {
+  // Post 관련 순수 함수들만 정의
+  // 다른 엔티티와의 조합 로직은 Features 레이어로 이동
+};
diff --git a/final_src/5_entities/post/post.queries.ts b/final_src/5_entities/post/post.queries.ts
new file mode 100644
index 000000000..8298c5682
--- /dev/null
+++ b/final_src/5_entities/post/post.queries.ts
@@ -0,0 +1,195 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { queryKeys } from '@/shared/lib';
+import { useCachedPostsQueryKey } from '@/shared/lib/hooks/useCachedPostsQueryKey';
+import { MutationProps } from '@/shared/types';
+
+import {
+  createPost,
+  deletePost,
+  getPosts,
+  getPostsBySearch,
+  getPostsByTag,
+  putPost,
+} from './post.api';
+import {
+  BaseFilterParams,
+  GetPostsResponse,
+  ParamsWithSearch,
+  ParamsWithTag,
+  Post,
+} from './post.type';
+
+export const useGetPostsQuery = (params: BaseFilterParams) => {
+  return useQuery({
+    queryKey: queryKeys.posts.list(params),
+    queryFn: () => getPosts(params),
+  });
+};
+
+export const useGetPostsByTagQuery = (params: ParamsWithTag) => {
+  return useQuery({
+    queryKey: queryKeys.posts.list(params),
+    queryFn: () => getPostsByTag(params),
+    enabled: !!params.selectedTag && params.selectedTag !== 'all',
+  });
+};
+
+export const useGetPostsBySearchQuery = (params: ParamsWithSearch) => {
+  return useQuery({
+    queryKey: queryKeys.posts.list(params),
+    queryFn: () => getPostsBySearch(params),
+    enabled: !!params.searchQuery && params.searchQuery.trim() !== '',
+  });
+};
+
+export const useCreatePostMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<Post>) => {
+  const queryClient = useQueryClient();
+  const cachedPostsQueryKey = useCachedPostsQueryKey();
+
+  return useMutation({
+    mutationFn: (newPost: Omit<Post, 'id'>) => createPost(newPost),
+    onMutate: async newPost => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.posts.all,
+      });
+
+      const previousPosts =
+        queryClient.getQueryData<GetPostsResponse>(cachedPostsQueryKey);
+
+      // ! 이전 데이터 캐시에 새 게시물 추가하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(cachedPostsQueryKey, (old: any) => {
+        const postToAdd: Post = {
+          ...newPost,
+          id: previousPosts?.total ? previousPosts.total + 1 : 1,
+        };
+
+        if (!old) {
+          return {
+            posts: [postToAdd],
+            total: 1,
+            skip: 0,
+            limit: 10,
+          };
+        }
+
+        return {
+          ...old,
+          posts: [postToAdd, ...(old.posts || [])],
+        };
+      });
+
+      return { previousPosts };
+    },
+    onError: (error, __, context) => {
+      queryClient.setQueryData(cachedPostsQueryKey, context?.previousPosts);
+      onError?.(error);
+    },
+    onSuccess: (data, _, { previousPosts }) => {
+      // ! 성공 시 이전 데이터에 성공 데이터 추가
+      queryClient.setQueryData(cachedPostsQueryKey, (old: any) => {
+        return {
+          ...old,
+          posts: [data, ...(previousPosts?.posts || [])],
+        };
+      });
+      onSuccess?.(data);
+    },
+  });
+};
+
+export const usePutPostMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<Post>) => {
+  const queryClient = useQueryClient();
+  const cachedPostsQueryKey = useCachedPostsQueryKey();
+
+  return useMutation({
+    mutationFn: (updatedPost: Post) => putPost(updatedPost),
+    onMutate: async updatedPost => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.posts.all,
+      });
+
+      const previousPosts =
+        queryClient.getQueryData<GetPostsResponse>(cachedPostsQueryKey);
+
+      // ! 이전 데이터 캐시에 수정된 게시물 업데이트하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(cachedPostsQueryKey, (old: any) => {
+        if (!old || !old.posts) {
+          return old;
+        }
+
+        return {
+          ...old,
+          posts: old.posts.map((post: Post) =>
+            post.id === updatedPost.id ? updatedPost : post
+          ),
+        };
+      });
+
+      return { previousPosts };
+    },
+    onError: (error, __, context) => {
+      queryClient.setQueryData(cachedPostsQueryKey, context?.previousPosts);
+      onError?.(error);
+    },
+    onSuccess: (data, updatedPost, { previousPosts }) => {
+      // ! 성공 시 이전 데이터에 성공 데이터로 수정
+      queryClient.setQueryData(cachedPostsQueryKey, (old: any) => {
+        return {
+          ...old,
+          posts: previousPosts?.posts.map((post: Post) =>
+            post.id === updatedPost.id ? updatedPost : post
+          ),
+        };
+      });
+      onSuccess?.(data);
+    },
+  });
+};
+
+export const useDeletePostMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<Post>) => {
+  const queryClient = useQueryClient();
+  const cachedPostsQueryKey = useCachedPostsQueryKey();
+
+  return useMutation({
+    mutationFn: (postId: number) => deletePost(postId),
+    onMutate: async postId => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.posts.all,
+      });
+
+      const previousPosts =
+        queryClient.getQueryData<GetPostsResponse>(cachedPostsQueryKey);
+
+      // ! 이전 데이터 캐시에 삭제된 게시물 제외하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(cachedPostsQueryKey, (old: any) => {
+        if (!old || !old.posts) {
+          return old;
+        }
+        return {
+          ...old,
+          posts: old.posts.filter((post: Post) => post.id !== postId),
+        };
+      });
+
+      return { previousPosts };
+    },
+
+    onError: (error, __, context) => {
+      queryClient.setQueryData(cachedPostsQueryKey, context?.previousPosts);
+      onError?.(error);
+    },
+    onSuccess: data => {
+      onSuccess?.(data);
+    },
+  });
+};
diff --git a/final_src/5_entities/post/post.type.ts b/final_src/5_entities/post/post.type.ts
new file mode 100644
index 000000000..dda18e22c
--- /dev/null
+++ b/final_src/5_entities/post/post.type.ts
@@ -0,0 +1,63 @@
+import { EmptyStringable, PaginationMeta, SortOrder } from '@/shared/types';
+
+export interface Post {
+  id: number;
+  title: string;
+  body: string;
+  userId: number;
+  tags?: string[];
+  reactions?: PostReactions;
+}
+
+export interface DeletedPost {
+  id: number;
+  title: string;
+  body: string;
+  tags: string[];
+  reactions: PostReactions;
+  views: number;
+  userId: number;
+  isDeleted: boolean;
+  deletedOn: string;
+}
+
+export interface PostReactions {
+  likes: number;
+  dislikes: number;
+}
+
+export interface GetPostsResponse extends PaginationMeta {
+  posts: Post[];
+}
+
+export interface BaseFilterParams {
+  limit: number;
+  skip: number;
+  sortBy?: EmptyStringable<SORT_BY>;
+  sortOrder?: SortOrder;
+}
+
+export interface AllFilterParams extends BaseFilterParams {
+  searchQuery: EmptyStringable<string>;
+  selectedTag: EmptyStringable<string>;
+}
+
+export interface ParamsWithTag extends BaseFilterParams {
+  selectedTag: EmptyStringable<string>;
+}
+
+export interface ParamsWithSearch extends BaseFilterParams {
+  searchQuery: EmptyStringable<string>;
+}
+
+export enum SORT_ORDER {
+  ASC = 'asc',
+  DESC = 'desc',
+}
+
+export enum SORT_BY {
+  NONE = 'none',
+  ID = 'id',
+  TITLE = 'title',
+  REACTIONS = 'reactions',
+}
diff --git a/final_src/5_entities/tag/index.ts b/final_src/5_entities/tag/index.ts
new file mode 100644
index 000000000..9673f1651
--- /dev/null
+++ b/final_src/5_entities/tag/index.ts
@@ -0,0 +1,3 @@
+export * from './tag.api';
+export * from './tag.queries';
+export * from './tag.type';
diff --git a/final_src/5_entities/tag/tag.api.ts b/final_src/5_entities/tag/tag.api.ts
new file mode 100644
index 000000000..708f6b900
--- /dev/null
+++ b/final_src/5_entities/tag/tag.api.ts
@@ -0,0 +1,6 @@
+import { Tag } from '@/entities/tag';
+import { ApiService } from '@/shared/lib';
+
+export const getTags = async (): Promise<Tag[]> => {
+  return ApiService.get<Tag[]>('/posts/tags');
+};
diff --git a/final_src/5_entities/tag/tag.queries.ts b/final_src/5_entities/tag/tag.queries.ts
new file mode 100644
index 000000000..c6495791f
--- /dev/null
+++ b/final_src/5_entities/tag/tag.queries.ts
@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getTags } from '@/entities/tag';
+import { queryKeys } from '@/shared/lib';
+
+export const useGetTagsQuery = () => {
+  return useQuery({
+    queryKey: queryKeys.tags.lists(),
+    queryFn: getTags,
+  });
+};
diff --git a/final_src/5_entities/tag/tag.type.ts b/final_src/5_entities/tag/tag.type.ts
new file mode 100644
index 000000000..0d066ec88
--- /dev/null
+++ b/final_src/5_entities/tag/tag.type.ts
@@ -0,0 +1,7 @@
+interface Tag {
+  name: string;
+  slug: string;
+  url: string;
+}
+
+export type { Tag };
diff --git a/final_src/5_entities/user/index.ts b/final_src/5_entities/user/index.ts
new file mode 100644
index 000000000..ae6eaea64
--- /dev/null
+++ b/final_src/5_entities/user/index.ts
@@ -0,0 +1,3 @@
+export * from './user.type';
+export * from './user.api';
+export * from './user.queries';
diff --git a/final_src/5_entities/user/user.api.ts b/final_src/5_entities/user/user.api.ts
new file mode 100644
index 000000000..bb1a85140
--- /dev/null
+++ b/final_src/5_entities/user/user.api.ts
@@ -0,0 +1,36 @@
+import { User, UserPick } from '@/entities/user';
+import { ApiService } from '@/shared/lib';
+import { PaginationMeta } from '@/shared/types';
+
+export interface GetUsersResponse<T> extends PaginationMeta {
+  users: T[];
+}
+
+export interface GetUsersParams<K extends keyof User> {
+  limit: number;
+  select: K[];
+}
+
+// select에 따라 UserPick 타입을 동적으로 만들 수 없으므로,
+// 반환 타입을 런타임에 맞게 제네릭으로 받도록 getUsers를 제네릭 함수로 변경합니다.
+
+export const getUsers = async <K extends keyof User>({
+  limit,
+  select,
+}: GetUsersParams<K>): Promise<GetUsersResponse<UserPick<K>>> => {
+  const params = {
+    limit: limit.toString(),
+    select: select.join(','),
+  };
+  return ApiService.get<GetUsersResponse<UserPick<K>>>('/users', params);
+};
+
+export const postUser = async () => {};
+
+export const putUser = async () => {};
+
+export const deleteUser = async () => {};
+
+export const getUser = async (userId: number): Promise<User> => {
+  return ApiService.get<User>(`/users/${userId}`);
+};
diff --git a/final_src/5_entities/user/user.constant.ts b/final_src/5_entities/user/user.constant.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/final_src/5_entities/user/user.model.ts b/final_src/5_entities/user/user.model.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/final_src/5_entities/user/user.queries.ts b/final_src/5_entities/user/user.queries.ts
new file mode 100644
index 000000000..0921cf30f
--- /dev/null
+++ b/final_src/5_entities/user/user.queries.ts
@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getUser, getUsers, GetUsersParams, User } from '@/entities/user';
+import { queryKeys } from '@/shared/lib';
+import { Nullable } from '@/shared/types';
+
+export const useGetUsersQuery = <K extends keyof User>(
+  params: GetUsersParams<K>
+) => {
+  return useQuery({
+    queryKey: queryKeys.users.list(params),
+    queryFn: () => getUsers(params),
+  });
+};
+
+export const useGetUserQuery = (userId: Nullable<number>) => {
+  return useQuery({
+    queryKey: queryKeys.users.detail(userId ?? 0),
+    queryFn: () => getUser(userId ?? 0),
+    enabled: !!userId,
+  });
+};
diff --git a/final_src/5_entities/user/user.type.ts b/final_src/5_entities/user/user.type.ts
new file mode 100644
index 000000000..d4a23b87e
--- /dev/null
+++ b/final_src/5_entities/user/user.type.ts
@@ -0,0 +1,24 @@
+export interface BaseUser {
+  id: number;
+  image: string;
+  username: string;
+}
+
+export interface User extends BaseUser {
+  firstName: string;
+  lastName: string;
+  age: number;
+  email: string;
+  phone: string;
+  address: {
+    address: string;
+    city: string;
+    state: string;
+  };
+  company: {
+    name: string;
+    title: string;
+  };
+}
+
+export type UserPick<T extends keyof User> = Pick<User, T>;
diff --git a/final_src/6_shared/api/axios.ts b/final_src/6_shared/api/axios.ts
new file mode 100644
index 000000000..a7459b1e0
--- /dev/null
+++ b/final_src/6_shared/api/axios.ts
@@ -0,0 +1,9 @@
+import axios from 'axios';
+
+export const axiosInstance = axios.create({
+  baseURL: '/api',
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
diff --git a/src/assets/react.svg b/final_src/6_shared/assets/react.svg
similarity index 100%
rename from src/assets/react.svg
rename to final_src/6_shared/assets/react.svg
diff --git a/final_src/6_shared/constants/api.ts b/final_src/6_shared/constants/api.ts
new file mode 100644
index 000000000..ab201b693
--- /dev/null
+++ b/final_src/6_shared/constants/api.ts
@@ -0,0 +1,19 @@
+/**
+ * API 관련 상수 정의
+ *
+ * API 엔드포인트, 기본값, 쿼리 파라미터 등을 관리
+ */
+
+export const API_CONSTANTS = {
+  // 기본 사용자 ID
+  DEFAULT_USER_ID: 1,
+
+  // 기본 반응 수치
+  REACTIONS: {
+    DEFAULT_LIKES: 0,
+    DEFAULT_DISLIKES: 0,
+    LIKE_INCREMENT: 1,
+  },
+} as const;
+
+export type APIConstants = typeof API_CONSTANTS;
diff --git a/final_src/6_shared/constants/index.ts b/final_src/6_shared/constants/index.ts
new file mode 100644
index 000000000..beadb7376
--- /dev/null
+++ b/final_src/6_shared/constants/index.ts
@@ -0,0 +1,2 @@
+export * from './ui';
+export * from './api';
diff --git a/final_src/6_shared/constants/ui.ts b/final_src/6_shared/constants/ui.ts
new file mode 100644
index 000000000..4445d87b7
--- /dev/null
+++ b/final_src/6_shared/constants/ui.ts
@@ -0,0 +1,45 @@
+/**
+ * UI 관련 상수 정의
+ *
+ * 전역적으로 사용되는 UI 요소들의 크기, 스타일, 설정값 등을 관리
+ */
+
+export const UI_CONSTANTS = {
+  // 텍스트 영역 행 수
+  TEXTAREA_ROWS: {
+    LARGE: 30, // 게시물 작성용
+    MEDIUM: 15, // 게시물 수정용
+    SMALL: 5, // 댓글 작성용
+  },
+
+  // 아이콘 크기 (Tailwind CSS 클래스)
+  ICON_SIZES: {
+    SMALL: 'w-3 h-3', // 댓글 버튼용
+    MEDIUM: 'w-4 h-4', // 일반 버튼용
+    LARGE: 'w-8 h-8', // 프로필 이미지용
+  },
+
+  // 페이지네이션 설정
+  PAGINATION: {
+    DEFAULT_LIMIT: 10,
+    DEFAULT_SKIP: 0,
+    LIMIT_OPTIONS: [10, 20, 30] as const,
+  },
+
+  // 스타일링 관련
+  STYLES: {
+    TAG_SELECTED: 'text-white bg-blue-500 hover:bg-blue-600',
+    TAG_DEFAULT: 'text-blue-800 bg-blue-100 hover:bg-blue-200',
+    TAG_SIZE: 'px-1 text-[9px] font-semibold rounded-[4px] cursor-pointer',
+  },
+
+  // 레이아웃 관련
+  LAYOUT: {
+    SPACE_Y_1: 'space-y-1',
+    SPACE_Y_2: 'space-y-2',
+    FLEX_GAP_1: 'gap-1',
+    FLEX_GAP_2: 'gap-2',
+  },
+} as const;
+
+export type UIConstants = typeof UI_CONSTANTS;
diff --git a/final_src/6_shared/lib/api/apiService.ts b/final_src/6_shared/lib/api/apiService.ts
new file mode 100644
index 000000000..db45dffb6
--- /dev/null
+++ b/final_src/6_shared/lib/api/apiService.ts
@@ -0,0 +1,23 @@
+import { apiClient } from './axios';
+
+export const ApiService = {
+  get: async <T>(url: string, params?: Record<string, any>): Promise<T> => {
+    const response = await apiClient.get<T>(url, { params });
+    return response.data;
+  },
+
+  post: async <T>(url: string, data?: any): Promise<T> => {
+    const response = await apiClient.post<T>(url, data);
+    return response.data;
+  },
+
+  put: async <T>(url: string, data?: any): Promise<T> => {
+    const response = await apiClient.put<T>(url, data);
+    return response.data;
+  },
+
+  delete: async <T>(url: string): Promise<T> => {
+    const response = await apiClient.delete<T>(url);
+    return response.data;
+  },
+};
diff --git a/final_src/6_shared/lib/api/axios.ts b/final_src/6_shared/lib/api/axios.ts
new file mode 100644
index 000000000..975c604e9
--- /dev/null
+++ b/final_src/6_shared/lib/api/axios.ts
@@ -0,0 +1,12 @@
+import axios from 'axios';
+
+const baseURL = 'https://dummyjson.com';
+
+// 기본 axios 인스턴스 생성
+export const apiClient = axios.create({
+  baseURL,
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
diff --git a/final_src/6_shared/lib/api/index.ts b/final_src/6_shared/lib/api/index.ts
new file mode 100644
index 000000000..9e8a50de0
--- /dev/null
+++ b/final_src/6_shared/lib/api/index.ts
@@ -0,0 +1,2 @@
+export { apiClient } from './axios';
+export { ApiService } from './apiService';
diff --git a/final_src/6_shared/lib/hooks/index.ts b/final_src/6_shared/lib/hooks/index.ts
new file mode 100644
index 000000000..2d0b501e2
--- /dev/null
+++ b/final_src/6_shared/lib/hooks/index.ts
@@ -0,0 +1,5 @@
+// Custom Hooks - 재사용 가능한 커스텀 훅
+export * from './useCachedPostsQueryKey';
+export * from './useDebounce';
+export * from './useOptimisticMutation';
+export * from './usePostsFilterStore';
diff --git a/final_src/6_shared/lib/hooks/useCachedPostsQueryKey.ts b/final_src/6_shared/lib/hooks/useCachedPostsQueryKey.ts
new file mode 100644
index 000000000..7ef629d11
--- /dev/null
+++ b/final_src/6_shared/lib/hooks/useCachedPostsQueryKey.ts
@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+
+import {
+  AllFilterParams,
+  BaseFilterParams,
+  ParamsWithSearch,
+  ParamsWithTag,
+} from '@/entities/post';
+
+import { queryKeys } from '../query/queryKeys';
+import { POST_QUERY_TYPE } from '../store/postsFilterStore';
+import { usePostsFilterStore } from './usePostsFilterStore';
+
+export const useCachedPostsQueryKey = () => {
+  const {
+    queryType,
+    filters: { searchQuery, selectedTag, sortBy, sortOrder },
+    pagination: { limit, skip },
+  } = usePostsFilterStore();
+
+  const [params, setParams] = useState<Partial<AllFilterParams>>({
+    limit,
+    skip,
+    sortBy,
+    sortOrder,
+  });
+
+  useEffect(() => {
+    if (queryType === POST_QUERY_TYPE.SEARCH) {
+      const paramsWithSearch: ParamsWithSearch = {
+        limit,
+        skip,
+        sortBy,
+        sortOrder,
+        searchQuery,
+      };
+      setParams(paramsWithSearch);
+      return;
+    }
+
+    if (queryType === POST_QUERY_TYPE.TAG) {
+      const paramsWithTag: ParamsWithTag = {
+        limit,
+        skip,
+        sortBy,
+        sortOrder,
+        selectedTag,
+      };
+      setParams(paramsWithTag);
+      return;
+    }
+
+    const baseParams: BaseFilterParams = {
+      limit,
+      skip,
+      sortBy,
+      sortOrder,
+    };
+    setParams(baseParams);
+  }, [queryType, limit, skip, sortBy, sortOrder, searchQuery, selectedTag]);
+
+  return queryKeys.posts.list(params);
+};
diff --git a/final_src/6_shared/lib/hooks/useDebounce.ts b/final_src/6_shared/lib/hooks/useDebounce.ts
new file mode 100644
index 000000000..f737f854a
--- /dev/null
+++ b/final_src/6_shared/lib/hooks/useDebounce.ts
@@ -0,0 +1,23 @@
+import { useCallback, useRef } from 'react';
+
+export const useDebounce = <T extends (...args: any[]) => any>(
+  callback: T,
+  delay: number
+) => {
+  const timeoutRef = useRef<number | undefined>(undefined);
+
+  const debouncedCallback = useCallback(
+    (...args: Parameters<T>) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      timeoutRef.current = window.setTimeout(() => {
+        callback(...args);
+      }, delay);
+    },
+    [callback, delay]
+  );
+
+  return debouncedCallback;
+};
diff --git a/final_src/6_shared/lib/hooks/useOptimisticMutation.ts b/final_src/6_shared/lib/hooks/useOptimisticMutation.ts
new file mode 100644
index 000000000..f8fd73d76
--- /dev/null
+++ b/final_src/6_shared/lib/hooks/useOptimisticMutation.ts
@@ -0,0 +1,110 @@
+import React from 'react';
+
+import {
+  QueryKey,
+  useMutation,
+  UseMutationOptions,
+  useQueryClient,
+} from '@tanstack/react-query';
+
+// 타입 정의
+export interface OptimisticMutationConfig<TCacheData, TData, TVariables>
+  extends Omit<
+    UseMutationOptions<TData, Error, TVariables>,
+    'onMutate' | 'onSuccess' | 'onError' | 'onSettled'
+  > {
+  queryKey: QueryKey;
+  queryKeyToCancel?: QueryKey;
+  optimisticUpdate: (
+    variables: TVariables,
+    oldData: TCacheData | undefined
+  ) => TCacheData;
+  onSuccess?: (data: TData, variables: TVariables) => void;
+  onError?: (error: Error, variables: TVariables) => void;
+  onSettled?: (
+    data: TData | undefined,
+    error: Error | null,
+    variables: TVariables
+  ) => void;
+}
+
+export interface OptimisticContext<TCacheData, TData, TVariables> {
+  previousData: TCacheData | undefined;
+  variables: TVariables;
+}
+
+/**
+ * 낙관적 업데이트를 위한 커스텀 훅
+ *
+ * FSD Best Practice:
+ * - 재사용 가능한 로직 추상화
+ * - 타입 안전성 보장
+ * - 일관된 에러 처리
+ * - 자동 롤백 기능
+ */
+export const useOptimisticMutation = <TCacheData, TData, TVariables>({
+  queryKey,
+  queryKeyToCancel,
+  optimisticUpdate,
+  onSuccess,
+  onError,
+  onSettled,
+  ...mutationOptions
+}: OptimisticMutationConfig<TCacheData, TData, TVariables>) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    ...mutationOptions,
+    onMutate: async (variables: TVariables) => {
+      // 진행 중인 쿼리 취소
+      await queryClient.cancelQueries({
+        queryKey: queryKeyToCancel || queryKey,
+      });
+
+      // 이전 데이터 백업
+      const previousData = queryClient.getQueryData<TCacheData>(queryKey);
+
+      // 낙관적 업데이트 적용
+      queryClient.setQueryData(
+        queryKey,
+        optimisticUpdate(variables, previousData)
+      );
+
+      // 롤백을 위한 컨텍스트 반환
+      return { previousData, variables };
+    },
+    onError: (
+      error: Error,
+      variables: TVariables,
+      _context: OptimisticContext<TCacheData, TData, TVariables> | undefined
+    ) => {
+      // 에러 발생 시 이전 데이터로 롤백
+      if (_context?.previousData !== undefined) {
+        queryClient.setQueryData(queryKey, _context.previousData);
+      }
+
+      // 사용자 정의 에러 처리
+      onError?.(error, variables);
+    },
+    onSuccess: (
+      data: TData,
+      variables: TVariables,
+      _context: OptimisticContext<TCacheData, TData, TVariables> | undefined
+    ) => {
+      // 성공 시 서버 데이터로 업데이트 (필요시)
+      queryClient.setQueryData(queryKey, data as any);
+
+      // 사용자 정의 성공 처리
+      onSuccess?.(data, variables);
+    },
+    onSettled: (
+      data: TData | undefined,
+      error: Error | null,
+      variables: TVariables,
+      _context: OptimisticContext<TCacheData, TData, TVariables> | undefined
+    ) => {
+      // 완료 시 사용자 정의 처리
+      onSettled?.(data, error, variables);
+    },
+  });
+};
diff --git a/final_src/6_shared/lib/hooks/usePostsFilterStore.ts b/final_src/6_shared/lib/hooks/usePostsFilterStore.ts
new file mode 100644
index 000000000..1cff6398b
--- /dev/null
+++ b/final_src/6_shared/lib/hooks/usePostsFilterStore.ts
@@ -0,0 +1,71 @@
+import { useEffect } from 'react';
+
+import { useAtom } from 'jotai';
+
+import {
+  filtersAtom,
+  limitAtom,
+  paginationAtom,
+  queryTypeAtom,
+  searchQueryAtom,
+  selectedTagAtom,
+  skipAtom,
+  sortByAtom,
+  sortOrderAtom,
+  useURLSync,
+} from '../store/postsFilterStore';
+
+export const usePostsFilterStore = () => {
+  const [queryType, setQueryType] = useAtom(queryTypeAtom);
+  const [searchQuery, setSearchQuery] = useAtom(searchQueryAtom);
+  const [selectedTag, setSelectedTag] = useAtom(selectedTagAtom);
+  const [sortBy, setSortBy] = useAtom(sortByAtom);
+  const [sortOrder, setSortOrder] = useAtom(sortOrderAtom);
+  const [skip, setSkip] = useAtom(skipAtom);
+  const [limit, setLimit] = useAtom(limitAtom);
+  const [pagination, setPagination] = useAtom(paginationAtom);
+  const [filters, setFilters] = useAtom(filtersAtom);
+
+  const { updateURL, syncFromURL } = useURLSync();
+
+  // 컴포넌트 마운트 시 URL에서 상태 복원
+  useEffect(() => {
+    syncFromURL();
+  }, []);
+
+  // 필터 상태 변경 시 URL 업데이트
+  useEffect(() => {
+    updateURL();
+  }, [searchQuery, selectedTag, sortBy, sortOrder, skip, limit]);
+
+  // 브라우저 뒤로가기/앞으로가기 처리
+  useEffect(() => {
+    const handlePopState = () => {
+      syncFromURL();
+    };
+
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, []);
+
+  return {
+    queryType,
+    setQueryType,
+    searchQuery,
+    setSearchQuery,
+    selectedTag,
+    setSelectedTag,
+    sortBy,
+    setSortBy,
+    sortOrder,
+    setSortOrder,
+    skip,
+    setSkip,
+    limit,
+    setLimit,
+    pagination,
+    setPagination,
+    filters,
+    setFilters,
+  };
+};
diff --git a/final_src/6_shared/lib/index.ts b/final_src/6_shared/lib/index.ts
new file mode 100644
index 000000000..bbeff7af1
--- /dev/null
+++ b/final_src/6_shared/lib/index.ts
@@ -0,0 +1,5 @@
+export * from './api';
+export * from './hooks';
+export * from './query';
+export * from './store';
+export * from './utils';
diff --git a/final_src/6_shared/lib/query/index.ts b/final_src/6_shared/lib/query/index.ts
new file mode 100644
index 000000000..e08035cc8
--- /dev/null
+++ b/final_src/6_shared/lib/query/index.ts
@@ -0,0 +1 @@
+export * from './queryKeys';
diff --git a/final_src/6_shared/lib/query/queryKeys.ts b/final_src/6_shared/lib/query/queryKeys.ts
new file mode 100644
index 000000000..6e5eb276d
--- /dev/null
+++ b/final_src/6_shared/lib/query/queryKeys.ts
@@ -0,0 +1,55 @@
+import { AllFilterParams } from '@/entities/post';
+import { GetUsersParams, User } from '@/entities/user';
+
+export const QUERY_DOMAINS = {
+  POSTS: 'posts',
+  USERS: 'users',
+  COMMENTS: 'comments',
+  TAGS: 'tags',
+} as const;
+
+export const QUERY_OPERATIONS = {
+  LIST: 'list',
+  DETAIL: 'detail',
+  INFINITE: 'infinite',
+  SEARCH: 'search',
+  COUNT: 'count',
+} as const;
+
+const postQueryKeys = {
+  all: [QUERY_DOMAINS.POSTS] as const,
+
+  lists: () => [QUERY_DOMAINS.POSTS, QUERY_OPERATIONS.LIST] as const,
+  list: (params: Partial<AllFilterParams>) =>
+    [...postQueryKeys.lists(), params] as const,
+} as const;
+
+const userQueryKeys = {
+  all: [QUERY_DOMAINS.USERS] as const,
+
+  lists: () => [QUERY_DOMAINS.USERS, QUERY_OPERATIONS.LIST] as const,
+  list: (params: GetUsersParams<keyof User>) =>
+    [QUERY_DOMAINS.USERS, QUERY_OPERATIONS.LIST, params] as const,
+  details: () => [...userQueryKeys.lists(), 'detail'] as const,
+  detail: (userId: number) => [...userQueryKeys.details(), userId] as const,
+} as const;
+
+const tagQueryKeys = {
+  all: [QUERY_DOMAINS.TAGS] as const,
+
+  lists: () => [QUERY_DOMAINS.TAGS, QUERY_OPERATIONS.LIST] as const,
+} as const;
+
+const commentQueryKeys = {
+  all: [QUERY_DOMAINS.COMMENTS] as const,
+
+  lists: () => [QUERY_DOMAINS.COMMENTS, QUERY_OPERATIONS.LIST] as const,
+  list: (postId: number) => [...commentQueryKeys.lists(), postId] as const,
+} as const;
+
+export const queryKeys = {
+  posts: postQueryKeys,
+  users: userQueryKeys,
+  tags: tagQueryKeys,
+  comments: commentQueryKeys,
+} as const;
diff --git a/final_src/6_shared/lib/store/UIStore.ts b/final_src/6_shared/lib/store/UIStore.ts
new file mode 100644
index 000000000..8711ce404
--- /dev/null
+++ b/final_src/6_shared/lib/store/UIStore.ts
@@ -0,0 +1,134 @@
+import { atom, useAtom } from 'jotai';
+
+import { Comment } from '@/entities/comment';
+import { Post } from '@/entities/post';
+import { User } from '@/entities/user';
+import { Nullable } from '@/shared/types';
+
+export interface UIState {
+  showAddDialog: boolean;
+  showEditDialog: boolean;
+  showAddCommentDialog: boolean;
+  showEditCommentDialog: boolean;
+  showPostDetailDialog: boolean;
+  showUserModifyDialog: boolean;
+  selectedPost: Nullable<Post>;
+  selectedComment: Nullable<Comment>;
+  selectedUser: Nullable<Partial<User>>;
+}
+
+const initialUIState: UIState = {
+  showAddDialog: false,
+  showEditDialog: false,
+  showAddCommentDialog: false,
+  showEditCommentDialog: false,
+  showPostDetailDialog: false,
+  showUserModifyDialog: false,
+  selectedPost: null,
+  selectedComment: null,
+  selectedUser: null,
+};
+
+export const dialogAtom = atom<UIState>(initialUIState);
+
+const showAddDialogAtom = atom(
+  get => get(dialogAtom).showAddDialog,
+  (get, set, newValue: boolean) => {
+    set(dialogAtom, { ...get(dialogAtom), showAddDialog: newValue });
+  }
+);
+
+const showEditDialogAtom = atom(
+  get => get(dialogAtom).showEditDialog,
+  (get, set, newValue: boolean) => {
+    set(dialogAtom, { ...get(dialogAtom), showEditDialog: newValue });
+  }
+);
+
+const showAddCommentDialogAtom = atom(
+  get => get(dialogAtom).showAddCommentDialog,
+  (get, set, newValue: boolean) => {
+    set(dialogAtom, { ...get(dialogAtom), showAddCommentDialog: newValue });
+  }
+);
+
+const showEditCommentDialogAtom = atom(
+  get => get(dialogAtom).showEditCommentDialog,
+  (get, set, newValue: boolean) => {
+    set(dialogAtom, { ...get(dialogAtom), showEditCommentDialog: newValue });
+  }
+);
+
+const showPostDetailDialogAtom = atom(
+  get => get(dialogAtom).showPostDetailDialog,
+  (get, set, newValue: boolean) => {
+    set(dialogAtom, { ...get(dialogAtom), showPostDetailDialog: newValue });
+  }
+);
+
+const showUserModalAtom = atom(
+  get => get(dialogAtom).showUserModifyDialog,
+  (get, set, newValue: boolean) => {
+    set(dialogAtom, { ...get(dialogAtom), showUserModifyDialog: newValue });
+  }
+);
+
+const selectedPostAtom = atom(
+  get => get(dialogAtom).selectedPost,
+  (get, set, newValue: Nullable<Post>) => {
+    set(dialogAtom, { ...get(dialogAtom), selectedPost: newValue });
+  }
+);
+
+const selectedCommentAtom = atom(
+  get => get(dialogAtom).selectedComment,
+  (get, set, newValue: Nullable<Comment>) => {
+    set(dialogAtom, { ...get(dialogAtom), selectedComment: newValue });
+  }
+);
+
+const selectedUserAtom = atom(
+  get => get(dialogAtom).selectedUser,
+  (get, set, newValue: Nullable<User>) => {
+    set(dialogAtom, { ...get(dialogAtom), selectedUser: newValue });
+  }
+);
+
+export const useUIStore = () => {
+  const [showAddDialog, setShowAddDialog] = useAtom(showAddDialogAtom);
+  const [showEditDialog, setShowEditDialog] = useAtom(showEditDialogAtom);
+  const [showAddCommentDialog, setShowAddCommentDialog] = useAtom(
+    showAddCommentDialogAtom
+  );
+  const [showEditCommentDialog, setShowEditCommentDialog] = useAtom(
+    showEditCommentDialogAtom
+  );
+  const [showPostDetailDialog, setShowPostDetailDialog] = useAtom(
+    showPostDetailDialogAtom
+  );
+  const [showUserModal, setShowUserModal] = useAtom(showUserModalAtom);
+  const [selectedPost, setSelectedPost] = useAtom(selectedPostAtom);
+  const [selectedComment, setSelectedComment] = useAtom(selectedCommentAtom);
+  const [selectedUser, setSelectedUser] = useAtom(selectedUserAtom);
+
+  return {
+    showAddDialog,
+    setShowAddDialog,
+    showEditDialog,
+    setShowEditDialog,
+    showAddCommentDialog,
+    setShowAddCommentDialog,
+    showEditCommentDialog,
+    setShowEditCommentDialog,
+    showPostDetailDialog,
+    setShowPostDetailDialog,
+    showUserModal,
+    setShowUserModal,
+    selectedPost,
+    setSelectedPost,
+    selectedComment,
+    setSelectedComment,
+    selectedUser,
+    setSelectedUser,
+  };
+};
diff --git a/final_src/6_shared/lib/store/index.ts b/final_src/6_shared/lib/store/index.ts
new file mode 100644
index 000000000..8b3807bec
--- /dev/null
+++ b/final_src/6_shared/lib/store/index.ts
@@ -0,0 +1,2 @@
+export * from './postsFilterStore';
+export * from './UIStore';
diff --git a/final_src/6_shared/lib/store/postsFilterStore.ts b/final_src/6_shared/lib/store/postsFilterStore.ts
new file mode 100644
index 000000000..2eb7515d1
--- /dev/null
+++ b/final_src/6_shared/lib/store/postsFilterStore.ts
@@ -0,0 +1,223 @@
+import { atom, useAtom } from 'jotai';
+
+import { AllFilterParams, SORT_BY } from '@/entities/post';
+import { UI_CONSTANTS } from '@/shared/constants';
+import { EmptyStringable, PaginationMeta, SortOrder } from '@/shared/types';
+
+export enum POST_QUERY_TYPE {
+  BASE = 'base',
+  SEARCH = 'search',
+  TAG = 'tag',
+}
+
+export interface PostsFilterState {
+  queryType: POST_QUERY_TYPE;
+  filters: Omit<AllFilterParams, 'limit' | 'skip'>;
+  pagination: {
+    limit: number;
+    skip: number;
+    total: number;
+  };
+}
+
+const initialFilterState: PostsFilterState = {
+  queryType: POST_QUERY_TYPE.BASE,
+  filters: {
+    searchQuery: '',
+    selectedTag: '',
+    sortBy: '',
+    sortOrder: SortOrder.ASC,
+  },
+  pagination: {
+    limit: UI_CONSTANTS.PAGINATION.DEFAULT_LIMIT,
+    skip: UI_CONSTANTS.PAGINATION.DEFAULT_SKIP,
+    total: 0,
+  },
+};
+
+// URL에서 초기 상태를 읽어오는 함수
+const getInitialStateFromURL = (): PostsFilterState => {
+  if (typeof window === 'undefined') return initialFilterState;
+
+  const params = new URLSearchParams(window.location.search);
+  return {
+    queryType: POST_QUERY_TYPE.BASE,
+    filters: {
+      searchQuery: params.get('search') || '',
+      selectedTag: params.get('tag') || '',
+      sortBy: (params.get('sortBy') as SORT_BY) || '',
+      sortOrder: (params.get('sortOrder') as SortOrder) || SortOrder.ASC,
+    },
+    pagination: {
+      skip: parseInt(params.get('skip') || '0'),
+      limit: parseInt(params.get('limit') || '10'),
+      total: parseInt(params.get('total') || '0'),
+    },
+  };
+};
+
+export const postsFilterAtom = atom<PostsFilterState>(getInitialStateFromURL());
+
+// 개별 필터 atoms (더 세밀한 제어를 위해)
+export const searchQueryAtom = atom(
+  get => get(postsFilterAtom).filters.searchQuery,
+  (get, set, newValue: string) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      filters: {
+        ...get(postsFilterAtom).filters,
+        searchQuery: newValue,
+      },
+    });
+  }
+);
+
+export const selectedTagAtom = atom(
+  get => get(postsFilterAtom).filters.selectedTag,
+  (get, set, newValue: string) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      filters: {
+        ...get(postsFilterAtom).filters,
+        selectedTag: newValue,
+      },
+    });
+  }
+);
+
+export const sortByAtom = atom(
+  get => get(postsFilterAtom).filters.sortBy,
+  (get, set, newValue: EmptyStringable<SORT_BY>) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      filters: {
+        ...get(postsFilterAtom).filters,
+        sortBy: newValue,
+      },
+    });
+  }
+);
+
+export const sortOrderAtom = atom(
+  get => get(postsFilterAtom).filters.sortOrder,
+  (get, set, newValue: SortOrder) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      filters: {
+        ...get(postsFilterAtom).filters,
+        sortOrder: newValue,
+      },
+    });
+  }
+);
+
+export const limitAtom = atom(
+  get => get(postsFilterAtom).pagination.limit,
+  (get, set, newValue: number) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      pagination: {
+        ...get(postsFilterAtom).pagination,
+        limit: newValue,
+      },
+    });
+  }
+);
+
+export const skipAtom = atom(
+  get => get(postsFilterAtom).pagination.skip,
+  (get, set, newValue: number) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      pagination: {
+        ...get(postsFilterAtom).pagination,
+        skip: newValue,
+      },
+    });
+  }
+);
+
+export const resetFiltersAtom = atom(null, (_, set) => {
+  set(postsFilterAtom, initialFilterState);
+});
+
+export const paginationAtom = atom(
+  get => get(postsFilterAtom).pagination,
+  (get, set, newValue: PaginationMeta) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      pagination: newValue,
+    });
+  }
+);
+
+export const filtersAtom = atom(
+  get => get(postsFilterAtom).filters,
+  (get, set, newValue: AllFilterParams) => {
+    set(postsFilterAtom, { ...get(postsFilterAtom), filters: newValue });
+  }
+);
+
+export const queryTypeAtom = atom(
+  get => get(postsFilterAtom).queryType,
+  (get, set, newValue: POST_QUERY_TYPE) => {
+    set(postsFilterAtom, { ...get(postsFilterAtom), queryType: newValue });
+  }
+);
+
+// URL 동기화를 위한 atom
+export const urlSyncAtom = atom(
+  get => {
+    const filter = get(postsFilterAtom);
+    const params = new URLSearchParams();
+
+    const { searchQuery, selectedTag, sortBy, sortOrder } = filter.filters;
+    const { skip, limit } = filter.pagination;
+
+    if (skip > 0) params.set('skip', skip.toString());
+    if (limit !== 10) params.set('limit', limit.toString());
+    if (searchQuery) params.set('search', searchQuery);
+    if (sortBy) params.set('sortBy', sortBy);
+    if (sortOrder) params.set('sortOrder', sortOrder);
+    if (selectedTag) params.set('tag', selectedTag);
+
+    return params.toString();
+  },
+  (_, set, urlParams: string) => {
+    const params = new URLSearchParams(urlParams);
+    const newState: PostsFilterState = {
+      queryType: POST_QUERY_TYPE.BASE,
+      filters: {
+        searchQuery: params.get('search') || '',
+        selectedTag: params.get('tag') || '',
+        sortBy: (params.get('sortBy') as SORT_BY) || '',
+        sortOrder: (params.get('sortOrder') as SortOrder) || SortOrder.ASC,
+      },
+      pagination: {
+        skip: parseInt(params.get('skip') || '0'),
+        limit: parseInt(params.get('limit') || '10'),
+        total: parseInt(params.get('total') || '0'),
+      },
+    };
+
+    set(postsFilterAtom, newState);
+  }
+);
+
+export const useURLSync = () => {
+  const [urlSync, setUrlSync] = useAtom(urlSyncAtom);
+
+  const updateURL = () => {
+    const newURL = `${window.location.pathname}?${urlSync}`;
+    window.history.pushState({}, '', newURL);
+  };
+
+  const syncFromURL = () => {
+    const currentParams = window.location.search;
+    if (currentParams) {
+      setUrlSync(currentParams.substring(1));
+    }
+  };
+
+  return { updateURL, syncFromURL };
+};
diff --git a/final_src/6_shared/lib/utils/index.ts b/final_src/6_shared/lib/utils/index.ts
new file mode 100644
index 000000000..dcc594f47
--- /dev/null
+++ b/final_src/6_shared/lib/utils/index.ts
@@ -0,0 +1,8 @@
+// Optimistic Updates - 낙관적 업데이트 유틸리티
+export * from './optimisticUpdates';
+
+// UI Utils - UI 관련 유틸리티
+export * from './ui.util';
+
+// URL Utils - URL 관련 유틸리티
+export * from './url.util';
diff --git a/final_src/6_shared/lib/utils/optimisticUpdates.ts b/final_src/6_shared/lib/utils/optimisticUpdates.ts
new file mode 100644
index 000000000..a36e271a3
--- /dev/null
+++ b/final_src/6_shared/lib/utils/optimisticUpdates.ts
@@ -0,0 +1,176 @@
+import { Comment, GetCommentsResponse } from '@/entities/comment';
+import { GetPostsResponse, Post } from '@/entities/post';
+
+/**
+ * 게시물 낙관적 업데이트 유틸리티
+ *
+ * FSD Best Practice:
+ * - 도메인별 로직 분리
+ * - 타입 안전성 보장
+ * - 재사용 가능한 함수
+ * - 일관된 반환 타입
+ */
+export const optimisticPostUpdates = {
+  /**
+   * 게시물 생성 낙관적 업데이트
+   */
+  create: (
+    newPost: Omit<Post, 'id'>,
+    oldData: GetPostsResponse | undefined
+  ): GetPostsResponse => {
+    if (!oldData) {
+      return {
+        posts: [{ ...newPost, id: Date.now() }],
+        total: 1,
+        skip: 0,
+        limit: 10,
+      };
+    }
+
+    const postToAdd: Post = {
+      ...newPost,
+      id: oldData.total ? oldData.total + 1 : Date.now(),
+    };
+
+    return {
+      ...oldData,
+      posts: [postToAdd, ...(oldData.posts || [])],
+      total: oldData.total + 1,
+    };
+  },
+
+  /**
+   * 게시물 수정 낙관적 업데이트
+   */
+  update: (
+    updatedPost: Post,
+    oldData: GetPostsResponse | undefined
+  ): GetPostsResponse => {
+    if (!oldData || !oldData.posts) {
+      return {
+        posts: [],
+        total: 0,
+        skip: 0,
+        limit: 10,
+      };
+    }
+
+    return {
+      ...oldData,
+      posts: oldData.posts.map((post: Post) =>
+        post.id === updatedPost.id ? updatedPost : post
+      ),
+    };
+  },
+
+  /**
+   * 게시물 삭제 낙관적 업데이트
+   */
+  delete: (
+    postId: number,
+    oldData: GetPostsResponse | undefined
+  ): GetPostsResponse => {
+    if (!oldData || !oldData.posts) {
+      return {
+        posts: [],
+        total: 0,
+        skip: 0,
+        limit: 10,
+      };
+    }
+
+    return {
+      ...oldData,
+      posts: oldData.posts.filter((post: Post) => post.id !== postId),
+      total: Math.max(0, oldData.total - 1),
+    };
+  },
+};
+
+/**
+ * 댓글 낙관적 업데이트 유틸리티
+ *
+ * FSD Best Practice:
+ * - 도메인별 로직 분리
+ * - 타입 안전성 보장
+ * - 재사용 가능한 함수
+ * - 일관된 반환 타입
+ */
+export const optimisticCommentUpdates = {
+  /**
+   * 댓글 생성 낙관적 업데이트
+   */
+  create: (
+    newComment: Omit<Comment, 'id'>,
+    oldData: GetCommentsResponse | undefined
+  ): GetCommentsResponse => {
+    if (!oldData) {
+      return {
+        comments: [{ ...newComment, id: Date.now() }],
+        total: 1,
+        skip: 0,
+        limit: 10,
+      };
+    }
+
+    const commentToAdd: Comment = {
+      ...newComment,
+      id: oldData.total ? oldData.total + 1 : Date.now(),
+    };
+
+    return {
+      ...oldData,
+      comments: [commentToAdd, ...(oldData.comments || [])],
+      total: oldData.total + 1,
+    };
+  },
+
+  /**
+   * 댓글 수정 낙관적 업데이트
+   */
+  update: (
+    updatedComment: Comment,
+    oldData: GetCommentsResponse | undefined
+  ): GetCommentsResponse => {
+    if (!oldData || !oldData.comments) {
+      return {
+        comments: [],
+        total: 0,
+        skip: 0,
+        limit: 10,
+      };
+    }
+
+    return {
+      ...oldData,
+      comments: oldData.comments.map((comment: Comment) =>
+        comment.id === updatedComment.id ? updatedComment : comment
+      ),
+    };
+  },
+
+  /**
+   * 댓글 삭제 낙관적 업데이트
+   */
+  delete: (
+    commentId: number,
+    oldData: GetCommentsResponse | undefined
+  ): GetCommentsResponse => {
+    if (!oldData || !oldData.comments) {
+      return {
+        comments: [],
+        total: 0,
+        skip: 0,
+        limit: 10,
+      };
+    }
+
+    return {
+      ...oldData,
+      comments: oldData.comments.filter(
+        (comment: Comment) => comment.id !== commentId
+      ),
+      total: Math.max(0, oldData.total - 1),
+    };
+  },
+};
diff --git a/final_src/6_shared/lib/utils/ui.util.tsx b/final_src/6_shared/lib/utils/ui.util.tsx
new file mode 100644
index 000000000..07db97a45
--- /dev/null
+++ b/final_src/6_shared/lib/utils/ui.util.tsx
@@ -0,0 +1,21 @@
+export const highlightText = (text: string, highlight: string) => {
+  if (!text) return null;
+  if (!highlight.trim()) {
+    return <span>{text}</span>;
+  }
+
+  const regex = new RegExp(`(${highlight})`, 'gi');
+  const parts = text.split(regex);
+
+  return (
+    <span>
+      {parts.map((part, i) =>
+        regex.test(part) ? (
+          <mark key={i}>{part}</mark>
+        ) : (
+          <span key={i}>{part}</span>
+        )
+      )}
+    </span>
+  );
+};
diff --git a/final_src/6_shared/lib/utils/url.util.ts b/final_src/6_shared/lib/utils/url.util.ts
new file mode 100644
index 000000000..3f3f3c7b6
--- /dev/null
+++ b/final_src/6_shared/lib/utils/url.util.ts
@@ -0,0 +1,3 @@
+export const getUrlParams = (params: Record<string, string>) => {
+  return new URLSearchParams(params).toString();
+};
diff --git a/final_src/6_shared/types/api.type.ts b/final_src/6_shared/types/api.type.ts
new file mode 100644
index 000000000..81d16a56e
--- /dev/null
+++ b/final_src/6_shared/types/api.type.ts
@@ -0,0 +1,16 @@
+export interface PaginationMeta {
+  total: number;
+  skip: number;
+  limit: number;
+}
+
+export interface MutationProps<T> {
+  onError?: (error: Error) => void;
+  onSuccess?: (data: T) => void;
+}
+
+export interface ApiResponse<T> {
+  data: T;
+  message?: string;
+  code?: string;
+}
diff --git a/final_src/6_shared/types/index.ts b/final_src/6_shared/types/index.ts
new file mode 100644
index 000000000..f132a0e22
--- /dev/null
+++ b/final_src/6_shared/types/index.ts
@@ -0,0 +1,2 @@
+export * from './api.type';
+export * from './utility.type';
diff --git a/final_src/6_shared/types/utility.type.ts b/final_src/6_shared/types/utility.type.ts
new file mode 100644
index 000000000..620d835c2
--- /dev/null
+++ b/final_src/6_shared/types/utility.type.ts
@@ -0,0 +1,46 @@
+/**
+ * 공통으로 사용되는 유틸리티 타입들
+ */
+
+/**
+ * T 또는 null을 허용하는 타입
+ */
+export type Nullable<T> = T | null;
+
+export type EmptyStringable<T> = T | '';
+
+/**
+ * T 또는 undefined를 허용하는 타입
+ */
+export type Undefinable<T> = T | undefined;
+
+/**
+ * T, null, undefined 모두 허용하는 타입
+ */
+export type Optional<T> = T | null | undefined;
+
+/**
+ * 객체의 모든 속성을 옵셔널로 만드는 타입 (Partial과 유사하지만 명시적)
+ */
+export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+
+/**
+ * 객체의 특정 속성을 필수로 만드는 타입
+ */
+export type RequiredBy<T, K extends keyof T> = T & Required<Pick<T, K>>;
+
+/**
+ * 배열 타입에서 단일 요소 타입 추출
+ */
+export type ArrayElement<T extends readonly unknown[]> =
+  T extends readonly (infer U)[] ? U : never;
+
+/**
+ * 함수의 반환 타입이 Promise인 경우 래핑된 타입 추출
+ */
+export type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
+
+export enum SortOrder {
+  ASC = 'asc',
+  DESC = 'desc',
+}
diff --git a/final_src/6_shared/ui/controls/Button.tsx b/final_src/6_shared/ui/controls/Button.tsx
new file mode 100644
index 000000000..a99d86cc9
--- /dev/null
+++ b/final_src/6_shared/ui/controls/Button.tsx
@@ -0,0 +1,62 @@
+import { cva, VariantProps } from 'class-variance-authority';
+
+/**
+ * 버튼 컴포넌트 variant 정의
+ * - CVA를 사용한 조건부 스타일링
+ * - variant: 용도별 스타일 (default, destructive, outline, secondary, ghost, link)
+ * - size: 크기별 스타일 (default, sm, lg, icon)
+ * - 접근성 기본 스타일 포함 (focus-visible, disabled)
+ */
+
+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;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export const Button = ({
+  variant,
+  size,
+  className,
+  children,
+  onClick,
+  ...props
+}: ButtonProps) => {
+  return (
+    <button
+      className={buttonVariants({ variant, size, className })}
+      onClick={onClick}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
diff --git a/final_src/6_shared/ui/data/Table.tsx b/final_src/6_shared/ui/data/Table.tsx
new file mode 100644
index 000000000..2646e0e04
--- /dev/null
+++ b/final_src/6_shared/ui/data/Table.tsx
@@ -0,0 +1,99 @@
+import { forwardRef } from 'react';
+
+/**
+ * 테이블 컴포넌트 계열
+ * - 데이터를 구조화된 표 형태로 표시하는 컴포넌트들
+ * - Table, TableHeader, TableBody, TableRow, TableHead, TableCell로 구성
+ * - 반응형 스크롤 지원과 일관된 스타일링 제공
+ */
+
+interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+  className?: string;
+}
+
+export const Table = forwardRef<HTMLTableElement, TableProps>(
+  ({ 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';
+
+interface TableHeaderProps
+  extends React.HTMLAttributes<HTMLTableSectionElement> {
+  className?: string;
+}
+
+export const TableHeader = forwardRef<
+  HTMLTableSectionElement,
+  TableHeaderProps
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={`[&_tr]:border-b ${className}`} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
+
+interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+  className?: string;
+}
+
+export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
+  ({ className, ...props }, ref) => (
+    <tbody
+      ref={ref}
+      className={`[&_tr:last-child]:border-0 ${className}`}
+      {...props}
+    />
+  )
+);
+TableBody.displayName = 'TableBody';
+
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  className?: string;
+}
+
+export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
+  ({ 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';
+
+interface TableHeadProps
+  extends React.HTMLAttributes<HTMLTableHeaderCellElement> {
+  className?: string;
+}
+
+export const TableHead = forwardRef<HTMLTableHeaderCellElement, TableHeadProps>(
+  ({ 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';
+
+interface TableCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+  className?: string;
+}
+
+export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
+  ({ className, ...props }, ref) => (
+    <td
+      ref={ref}
+      className={`p-2 align-middle [&:has([role=checkbox])]:pr-0 ${className}`}
+      {...props}
+    />
+  )
+);
+TableCell.displayName = 'TableCell';
diff --git a/final_src/6_shared/ui/feedback/LoadingSpinner.tsx b/final_src/6_shared/ui/feedback/LoadingSpinner.tsx
new file mode 100644
index 000000000..2248d17e1
--- /dev/null
+++ b/final_src/6_shared/ui/feedback/LoadingSpinner.tsx
@@ -0,0 +1,28 @@
+import { Loader2 } from 'lucide-react';
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  text?: string;
+}
+
+const sizeClasses = {
+  sm: 'w-4 h-4',
+  md: 'w-6 h-6',
+  lg: 'w-8 h-8',
+};
+
+export const LoadingSpinner = ({
+  size = 'md',
+  className = '',
+  text = '로딩 중...',
+}: LoadingSpinnerProps) => {
+  return (
+    <div
+      className={`flex items-center justify-center gap-2 w-full h-full ${className}`}
+    >
+      <Loader2 className={`animate-spin ${sizeClasses[size]}`} />
+      {text && <span className='text-sm text-muted-foreground'>{text}</span>}
+    </div>
+  );
+};
diff --git a/final_src/6_shared/ui/feedback/index.ts b/final_src/6_shared/ui/feedback/index.ts
new file mode 100644
index 000000000..8f6c207e0
--- /dev/null
+++ b/final_src/6_shared/ui/feedback/index.ts
@@ -0,0 +1 @@
+export { LoadingSpinner } from './LoadingSpinner';
diff --git a/final_src/6_shared/ui/forms/Input.tsx b/final_src/6_shared/ui/forms/Input.tsx
new file mode 100644
index 000000000..98c3b89c6
--- /dev/null
+++ b/final_src/6_shared/ui/forms/Input.tsx
@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+
+/**
+ * 입력 컴포넌트
+ * - 기본 HTML input 요소를 확장한 커스텀 입력 컴포넌트
+ * - 일관된 스타일링과 접근성 기능 제공
+ * - forwardRef를 통한 ref 전달로 포커스 관리 지원
+ */
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  className?: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={`flex h-10 w-full rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
diff --git a/final_src/6_shared/ui/forms/Select.tsx b/final_src/6_shared/ui/forms/Select.tsx
new file mode 100644
index 000000000..53fbb2c2b
--- /dev/null
+++ b/final_src/6_shared/ui/forms/Select.tsx
@@ -0,0 +1,80 @@
+import { forwardRef } from 'react';
+
+import { Check, ChevronDown } from 'lucide-react';
+
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+/**
+ * 선택 컴포넌트 계열
+ * - Radix UI Select를 기반으로 한 드롭다운 선택 컴포넌트들
+ * - Select, SelectTrigger, SelectContent, SelectItem으로 구성
+ * - 키보드 네비게이션과 접근성 기능 내장
+ */
+export const Select = SelectPrimitive.Root;
+export const SelectGroup = SelectPrimitive.Group;
+export const SelectValue = SelectPrimitive.Value;
+
+interface SelectTriggerProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string;
+}
+
+export const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(
+  ({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      className={`flex h-10 items-center justify-between rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+      {...props}
+    >
+      {children}
+      <ChevronDown className='h-4 w-4 opacity-50' />
+    </SelectPrimitive.Trigger>
+  )
+);
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  position?: 'popper';
+}
+
+export const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
+  ({ className, children, position = 'popper', ...props }, ref) => (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={ref}
+        className={`relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ${className}`}
+        position={position}
+        {...props}
+      >
+        <SelectPrimitive.Viewport className='p-1'>
+          {children}
+        </SelectPrimitive.Viewport>
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+);
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+interface SelectItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  value: string;
+}
+
+export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
+  ({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Item
+      ref={ref}
+      className={`relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ${className}`}
+      {...props}
+    >
+      <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
+        <SelectPrimitive.ItemIndicator>
+          <Check className='h-4 w-4' />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+);
+SelectItem.displayName = SelectPrimitive.Item.displayName;
diff --git a/final_src/6_shared/ui/forms/Textarea.tsx b/final_src/6_shared/ui/forms/Textarea.tsx
new file mode 100644
index 000000000..fbb6c981d
--- /dev/null
+++ b/final_src/6_shared/ui/forms/Textarea.tsx
@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+
+/**
+ * 텍스트 영역 컴포넌트
+ * - 여러 줄 텍스트 입력을 위한 textarea 컴포넌트
+ * - Input 컴포넌트와 일관된 스타일링 유지
+ * - 최소 높이 설정으로 사용성 향상
+ */
+
+interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  className?: string;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={`flex min-h-[150px] w-full rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = 'Textarea';
diff --git a/final_src/6_shared/ui/index.ts b/final_src/6_shared/ui/index.ts
new file mode 100644
index 000000000..604a95c0c
--- /dev/null
+++ b/final_src/6_shared/ui/index.ts
@@ -0,0 +1,20 @@
+// controls
+export * from './controls/Button';
+
+// data
+export * from './data/Table';
+
+// forms
+export * from './forms/Input';
+export * from './forms/Select';
+export * from './forms/Textarea';
+
+// layout
+export * from './layout/Card';
+
+// overlays
+export * from './overlays/Dialog';
+export * from './overlays/ContentDialog';
+
+// feedback
+export * from './feedback';
diff --git a/final_src/6_shared/ui/layout/Card.tsx b/final_src/6_shared/ui/layout/Card.tsx
new file mode 100644
index 000000000..f7124bb07
--- /dev/null
+++ b/final_src/6_shared/ui/layout/Card.tsx
@@ -0,0 +1,64 @@
+import { forwardRef } from 'react';
+
+/**
+ * 카드 컴포넌트 계열
+ * - 콘텐츠를 그룹화하고 시각적으로 구분하는 컨테이너 컴포넌트들
+ * - Card, CardHeader, CardTitle, CardContent로 구성된 복합 컴포넌트
+ * - 일관된 간격과 스타일을 통한 계층적 정보 표현
+ */
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={`rounded-lg border bg-card text-card-foreground shadow-sm ${className}`}
+      {...props}
+    />
+  )
+);
+
+Card.displayName = 'Card';
+
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={`flex flex-col space-y-1.5 p-6 ${className}`}
+      {...props}
+    />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string;
+}
+
+export const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={`text-2xl font-semibold leading-none tracking-tight ${className}`}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={`p-6 pt-0 ${className}`} {...props} />
+  )
+);
+CardContent.displayName = 'CardContent';
diff --git a/final_src/6_shared/ui/overlays/ContentDialog.tsx b/final_src/6_shared/ui/overlays/ContentDialog.tsx
new file mode 100644
index 000000000..61d040d9b
--- /dev/null
+++ b/final_src/6_shared/ui/overlays/ContentDialog.tsx
@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+
+import { DialogProps } from '@radix-ui/react-dialog';
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from './Dialog';
+
+interface ContentDialogProps extends DialogProps {
+  title: ReactNode;
+  onClose?: () => void;
+}
+
+export const ContentDialog = ({
+  title,
+  children,
+  onClose,
+  onOpenChange,
+  ...props
+}: ContentDialogProps) => {
+  const handleOpenChange = (open: boolean) => {
+    onOpenChange?.(open);
+    if (!open) {
+      onClose?.();
+    }
+  };
+
+  return (
+    <Dialog {...props} onOpenChange={handleOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        {children}
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/final_src/6_shared/ui/overlays/Dialog.tsx b/final_src/6_shared/ui/overlays/Dialog.tsx
new file mode 100644
index 000000000..0d69bbc5c
--- /dev/null
+++ b/final_src/6_shared/ui/overlays/Dialog.tsx
@@ -0,0 +1,70 @@
+import { forwardRef } from 'react';
+
+import { X } from 'lucide-react';
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+/**
+ * 대화상자 컴포넌트 계열
+ * - Radix UI Dialog를 기반으로 한 모달 및 팝업 컴포넌트들
+ * - Dialog, DialogContent, DialogHeader, DialogTitle로 구성
+ * - 포커스 트랩, ESC 키 닫기, 오버레이 클릭 닫기 등 UX 기능 내장
+ */
+export const Dialog = DialogPrimitive.Root;
+export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogPortal = DialogPrimitive.Portal;
+export const DialogOverlay = DialogPrimitive.Overlay;
+
+interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
+  ({ className, children, ...props }, ref) => (
+    <DialogPortal>
+      <DialogOverlay className='fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0' />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={`fixed left-[50%] top-[50%] z-50 grid w-full max-w-2xl 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;
+
+interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={`flex flex-col space-y-1.5 text-center sm:text-left ${className}`}
+      {...props}
+    />
+  )
+);
+DialogHeader.displayName = 'DialogHeader';
+
+interface DialogTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string;
+}
+
+export const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
+  ({ className, ...props }, ref) => (
+    <DialogPrimitive.Title
+      ref={ref}
+      className={`text-lg font-semibold leading-none tracking-tight ${className}`}
+      {...props}
+    />
+  )
+);
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
diff --git a/final_src/README.md b/final_src/README.md
new file mode 100644
index 000000000..69ae474ec
--- /dev/null
+++ b/final_src/README.md
@@ -0,0 +1,198 @@
+# Post Management System - FSD Best Practice Architecture
+
+## 📁 프로젝트 구조
+
+이 프로젝트는 **Feature-Sliced Design (FSD)** 아키텍처의 **Best Practice**를 적용하여 구성되어 있습니다.
+
+```
+final_src/
+├── 1_app/                    # 애플리케이션 레이어 (최상위)
+│   ├── App.tsx              # 메인 애플리케이션 컴포넌트
+│   ├── index.ts             # Public API
+│   └── providers/           # 애플리케이션 프로바이더
+│       ├── AppProvider.tsx  # 전역 프로바이더 설정
+│       └── index.ts
+├── 2_pages/                 # 페이지 레이어
+│   ├── PostsManagerPage.tsx # 게시물 관리 페이지
+│   └── index.ts
+├── 3_widgets/               # 위젯 레이어
+│   ├── Header.tsx           # 애플리케이션 헤더
+│   ├── Footer.tsx           # 애플리케이션 푸터
+│   └── index.ts
+├── 4_features/              # 기능 레이어
+│   ├── comment-management/  # 댓글 관리 기능
+│   ├── filter-posts/        # 게시물 필터링 기능
+│   ├── post-management/     # 게시물 관리 기능
+│   └── user-profile/        # 사용자 프로필 기능
+├── 5_entities/              # 엔티티 레이어
+│   ├── comment/             # 댓글 엔티티
+│   ├── post/                # 게시물 엔티티
+│   ├── tag/                 # 태그 엔티티
+│   └── user/                # 사용자 엔티티
+├── 6_shared/                # 공유 레이어 (최하위)
+│   ├── api/                 # API 관련 설정
+│   ├── assets/              # 정적 자산
+│   ├── constants/           # 상수 정의
+│   ├── lib/                 # 공통 라이브러리
+│   ├── types/               # 공통 타입 정의
+│   └── ui/                  # 공통 UI 컴포넌트
+├── main.tsx                 # 애플리케이션 진입점
+├── global.d.ts              # 전역 타입 정의
+└── index.css                # 전역 스타일
+```
+
+## 🏗️ FSD Best Practice 원칙
+
+### 1. 레이어 의존성 규칙
+
+- **상위 레이어는 하위 레이어를 import할 수 있음**
+- **하위 레이어는 상위 레이어를 import할 수 없음**
+- **같은 레이어 내에서는 직접 의존성 방지**
+
+### 2. 각 레이어의 역할
+
+#### 1_app (애플리케이션 레이어)
+
+- 애플리케이션 초기화 및 설정
+- 전역 프로바이더 설정 (React Query, Jotai, Router)
+- 애플리케이션 레이아웃 구조
+- 라우팅 설정
+
+#### 2_pages (페이지 레이어)
+
+- 라우팅 가능한 페이지 컴포넌트
+- 위젯과 기능을 조합하여 완전한 페이지 구성
+- 비즈니스 로직은 포함하지 않음
+- 레이아웃과 네비게이션 담당
+
+#### 3_widgets (위젯 레이어)
+
+- 독립적인 UI 블록
+- 여러 기능을 조합한 복합 컴포넌트
+- 재사용 가능한 레이아웃 요소
+- 비즈니스 로직과 UI 로직 분리
+
+#### 4_features (기능 레이어)
+
+- 사용자 행동과 관련된 기능
+- 비즈니스 로직과 UI 로직 포함
+- 특정 도메인에 종속된 기능
+- 재사용 가능한 기능 단위
+
+#### 5_entities (엔티티 레이어)
+
+- 비즈니스 엔티티 정의
+- API 통신, 데이터 모델, 타입 정의
+- 도메인 로직 포함
+- 순수한 비즈니스 로직
+
+#### 6_shared (공유 레이어)
+
+- 애플리케이션 전체에서 공통으로 사용되는 코드
+- UI 컴포넌트, 유틸리티, 타입, 상수
+- 특정 도메인에 종속되지 않음
+- 재사용 가능한 공통 요소
+
+## 🚀 주요 Best Practice 적용사항
+
+### 1. 프로바이더 분리 및 중앙화
+
+- `AppProvider`를 통한 전역 상태 관리 설정
+- React Query, Jotai, Router 설정 중앙화
+- 개발 도구 설정 통합
+
+### 2. 타입 안전성 강화
+
+- 완전한 TypeScript 지원
+- 제네릭을 활용한 타입 추론
+- 컴파일 타임 타입 체크
+
+### 3. 낙관적 업데이트 시스템
+
+- `useOptimisticMutation` 훅으로 일관된 낙관적 업데이트
+- 자동 롤백 기능
+- 타입 안전한 낙관적 업데이트 유틸리티
+
+### 4. 명명 규칙 통일
+
+- 모든 컴포넌트를 named export로 통일
+- 일관된 파일 및 폴더 명명 규칙
+- 명확한 역할과 책임 분리
+
+### 5. 문서화 개선
+
+- 각 컴포넌트와 함수에 JSDoc 주석 추가
+- 역할과 책임을 명확히 정의
+- FSD 원칙에 따른 구조 설명
+
+### 6. 구조 최적화
+
+- 각 레이어별 명확한 책임 분리
+- 의존성 방향 준수
+- 재사용 가능한 컴포넌트 구조
+
+## 📦 사용된 기술 스택
+
+- **React 18** - UI 라이브러리
+- **TypeScript** - 타입 안전성
+- **React Query** - 서버 상태 관리
+- **Jotai** - 클라이언트 상태 관리
+- **React Router** - 클라이언트 사이드 라우팅
+- **Tailwind CSS** - 스타일링
+- **Lucide React** - 아이콘 라이브러리
+
+## 🔧 개발 가이드라인
+
+### 1. 컴포넌트 작성 시
+
+- 단일 책임 원칙 준수
+- 명확한 props 인터페이스 정의
+- 적절한 타입 정의
+- 재사용 가능한 구조 설계
+
+### 2. 상태 관리 시
+
+- 로컬 상태는 `useState` 사용
+- 전역 상태는 Jotai 사용
+- 서버 상태는 React Query 사용
+- 낙관적 업데이트는 `useOptimisticMutation` 사용
+
+### 3. 파일 구조 시
+
+- FSD 레이어 규칙 준수
+- 관련 파일들을 같은 폴더에 배치
+- 명확한 파일 명명
+- Public API를 통한 export
+
+### 4. Import/Export 시
+
+- 절대 경로 사용 (`@/` 별칭)
+- Public API를 통한 export
+- 순환 의존성 방지
+- 명시적 import 사용
+
+### 5. 성능 최적화
+
+- React.memo, useMemo, useCallback 활용
+- 불필요한 리렌더링 방지
+- 코드 스플리팅 적용
+- 지연 로딩 구현
+
+## 🎯 다음 단계
+
+1. **테스트 코드 추가** - 각 레이어별 단위 테스트
+2. **성능 최적화** - React.memo, useMemo, useCallback 활용
+3. **접근성 개선** - ARIA 속성 및 키보드 네비게이션
+4. **국제화** - 다국어 지원 구조 추가
+5. **에러 바운더리** - 에러 처리 및 복구 메커니즘
+6. **코드 스플리팅** - 동적 import를 통한 번들 최적화
+7. **PWA 지원** - 서비스 워커 및 오프라인 기능
+8. **성능 모니터링** - 성능 메트릭 수집 및 분석
+
+## 📚 참고 자료
+
+- [Feature-Sliced Design Methodology](https://feature-sliced.design/)
+- [React Query Documentation](https://tanstack.com/query/latest)
+- [Jotai Documentation](https://jotai.org/)
+- [TypeScript Handbook](https://www.typescriptlang.org/docs/)
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
diff --git a/final_src/final_src/1_app/App.tsx b/final_src/final_src/1_app/App.tsx
new file mode 100644
index 000000000..6ca34ad31
--- /dev/null
+++ b/final_src/final_src/1_app/App.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { PostsManagerPage } from '@/pages';
+import { Footer, Header } from '@/widgets';
+
+export const App = () => {
+  return (
+    <div className='flex flex-col min-h-screen'>
+      <Header />
+      <main className='flex-grow container mx-auto px-4 py-8'>
+        <PostsManagerPage />
+      </main>
+      <Footer />
+    </div>
+  );
+};
diff --git a/final_src/final_src/1_app/index.ts b/final_src/final_src/1_app/index.ts
new file mode 100644
index 000000000..36fd434c7
--- /dev/null
+++ b/final_src/final_src/1_app/index.ts
@@ -0,0 +1,2 @@
+export { App } from './App';
+export { AppProvider } from './providers';
diff --git a/final_src/final_src/1_app/providers/AppProvider.tsx b/final_src/final_src/1_app/providers/AppProvider.tsx
new file mode 100644
index 000000000..9873b4952
--- /dev/null
+++ b/final_src/final_src/1_app/providers/AppProvider.tsx
@@ -0,0 +1,31 @@
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { Provider } from 'jotai';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
+interface AppProviderProps {
+  children: React.ReactNode;
+}
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000, // 5분
+      gcTime: 10 * 60 * 1000, // 10분
+      retry: 1,
+    },
+  },
+});
+
+export const AppProvider = ({ children }: AppProviderProps) => {
+  return (
+    <Provider>
+      <QueryClientProvider client={queryClient}>
+        <ReactQueryDevtools initialIsOpen={false} />
+        <Router>{children}</Router>
+      </QueryClientProvider>
+    </Provider>
+  );
+};
diff --git a/final_src/final_src/1_app/providers/index.ts b/final_src/final_src/1_app/providers/index.ts
new file mode 100644
index 000000000..5114e85a5
--- /dev/null
+++ b/final_src/final_src/1_app/providers/index.ts
@@ -0,0 +1 @@
+export { AppProvider } from './AppProvider';
diff --git a/final_src/final_src/2_pages/PostsManagerPage.tsx b/final_src/final_src/2_pages/PostsManagerPage.tsx
new file mode 100644
index 000000000..5f87aac80
--- /dev/null
+++ b/final_src/final_src/2_pages/PostsManagerPage.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { AddCommentDialog } from '@/features/comment-management';
+import { EditCommentFormDialog } from '@/features/comment-management/ui/EditCommentFormDialog';
+import { Filters } from '@/features/filter-posts';
+import {
+  AddPostButton,
+  PostDetailDialog,
+  PostTable,
+} from '@/features/post-management';
+import { AddPostFormDialog } from '@/features/post-management/ui/AddPostFormDialog';
+import { EditPostFormDialog } from '@/features/post-management/ui/EditPostFormDialog';
+import { PostPagination } from '@/features/post-management/ui/PostPagination';
+import { UserProfileDialog } from '@/features/user-profile';
+import { Card, CardContent, CardHeader, CardTitle } from '@/shared/ui';
+
+export const PostsManagerPage = () => {
+  return (
+    <Card className='w-full max-w-6xl mx-auto'>
+      <CardHeader>
+        <CardTitle className='flex items-center justify-between'>
+          <span>게시물 관리자</span>
+          <AddPostButton />
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className='flex flex-col gap-4'>
+          <Filters />
+          <PostTable />
+          <PostPagination />
+        </div>
+      </CardContent>
+
+      {/* 다이얼로그 컴포넌트들 */}
+      <AddPostFormDialog />
+      <EditPostFormDialog />
+      <AddCommentDialog />
+      <EditCommentFormDialog />
+      <PostDetailDialog />
+      <UserProfileDialog />
+    </Card>
+  );
+};
diff --git a/final_src/final_src/2_pages/index.ts b/final_src/final_src/2_pages/index.ts
new file mode 100644
index 000000000..f9dcc291d
--- /dev/null
+++ b/final_src/final_src/2_pages/index.ts
@@ -0,0 +1 @@
+export { PostsManagerPage } from './PostsManagerPage';
diff --git a/final_src/final_src/3_widgets/Footer.tsx b/final_src/final_src/3_widgets/Footer.tsx
new file mode 100644
index 000000000..1f477487c
--- /dev/null
+++ b/final_src/final_src/3_widgets/Footer.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export const Footer: React.FC = () => {
+  return (
+    <footer className='bg-gray-100 text-gray-600 py-4 mt-8'>
+      <div className='container mx-auto text-center'>
+        <p>&copy; 2024 Post Management System. All rights reserved.</p>
+      </div>
+    </footer>
+  );
+};
diff --git a/final_src/final_src/3_widgets/Header.tsx b/final_src/final_src/3_widgets/Header.tsx
new file mode 100644
index 000000000..4f904e744
--- /dev/null
+++ b/final_src/final_src/3_widgets/Header.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { MessageSquare } from 'lucide-react';
+
+export const Header: React.FC = () => {
+  return (
+    <header className='bg-blue-600 text-white p-4 shadow-md'>
+      <div className='container mx-auto flex justify-between items-center'>
+        <div className='flex items-center space-x-2'>
+          <MessageSquare className='w-6 h-6' />
+          <h1 className='text-xl font-bold'>게시물 관리 시스템</h1>
+        </div>
+        <nav>
+          <ul className='flex space-x-4'>
+            <li>
+              <a href='#' className='hover:underline'>
+                홈
+              </a>
+            </li>
+            <li>
+              <a href='#' className='hover:underline'>
+                대시보드
+              </a>
+            </li>
+            <li>
+              <a href='#' className='hover:underline'>
+                설정
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+  );
+};
diff --git a/final_src/final_src/3_widgets/index.ts b/final_src/final_src/3_widgets/index.ts
new file mode 100644
index 000000000..7e2c603fc
--- /dev/null
+++ b/final_src/final_src/3_widgets/index.ts
@@ -0,0 +1,2 @@
+export { Header } from './Header';
+export { Footer } from './Footer';
diff --git a/final_src/final_src/4_features/comment-management/hooks/useAddCommentForm.ts b/final_src/final_src/4_features/comment-management/hooks/useAddCommentForm.ts
new file mode 100644
index 000000000..76de6bbaa
--- /dev/null
+++ b/final_src/final_src/4_features/comment-management/hooks/useAddCommentForm.ts
@@ -0,0 +1,47 @@
+import { useState } from 'react';
+
+import { useCreateCommentMutation } from '@/entities/comment';
+import { useUIStore } from '@/shared/lib';
+
+export const useAddCommentForm = () => {
+  const { selectedPost, setShowAddCommentDialog } = useUIStore();
+  const { mutate: createComment } = useCreateCommentMutation({
+    onSuccess: () => {
+      resetForm();
+    },
+    onError: error => {
+      console.error('댓글 추가 오류:', error);
+      // ! 모달 다시 열어서 사용자가 수정
+      setShowAddCommentDialog(true);
+    },
+  });
+
+  const [commentBody, setCommentBody] = useState<string>('');
+
+  const handleChangeBody = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setCommentBody(e.target.value);
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    // ! 모달 먼저 닫고 UI 낙관적 업데이트 보여주기
+    setShowAddCommentDialog(false);
+    createComment({
+      body: commentBody,
+      postId: selectedPost?.id ?? 0,
+      userId: 1,
+    });
+  };
+
+  const resetForm = () => {
+    setCommentBody('');
+  };
+
+  return {
+    commentBody,
+    handleChangeBody,
+    handleSubmit,
+    resetForm,
+  };
+};
diff --git a/final_src/final_src/4_features/comment-management/hooks/useEditCommentForm.ts b/final_src/final_src/4_features/comment-management/hooks/useEditCommentForm.ts
new file mode 100644
index 000000000..a8edf670b
--- /dev/null
+++ b/final_src/final_src/4_features/comment-management/hooks/useEditCommentForm.ts
@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+
+import { useUpdateCommentMutation } from '@/entities/comment';
+import { useUIStore } from '@/shared/lib';
+
+export const useEditCommentForm = () => {
+  const { selectedComment, setSelectedComment, setShowEditCommentDialog } =
+    useUIStore();
+  const { mutate: updateComment } = useUpdateCommentMutation({
+    onSuccess: () => {
+      setSelectedComment(null);
+    },
+    onError: error => {
+      console.error('댓글 수정 오류:', error);
+      // ! 모달 다시 열어서 사용자가 수정하기
+      setShowEditCommentDialog(true);
+    },
+  });
+
+  const [commentBody, setCommentBody] = useState<string>(
+    selectedComment?.body || ''
+  );
+
+  const handleChangeBody = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setCommentBody(e.target.value);
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (!selectedComment) return;
+
+    // ! 모달 먼저 닫고 UI 낙관적 업데이트 보여주기
+    setShowEditCommentDialog(false);
+    updateComment({
+      ...selectedComment,
+      body: commentBody,
+    });
+  };
+
+  const resetForm = () => {
+    setCommentBody('');
+  };
+
+  useEffect(() => {
+    setCommentBody(selectedComment?.body || '');
+  }, [selectedComment]);
+
+  return {
+    commentBody,
+    handleChangeBody,
+    handleSubmit,
+    resetForm,
+  };
+};
diff --git a/final_src/final_src/4_features/comment-management/index.ts b/final_src/final_src/4_features/comment-management/index.ts
new file mode 100644
index 000000000..713937378
--- /dev/null
+++ b/final_src/final_src/4_features/comment-management/index.ts
@@ -0,0 +1 @@
+export * from './ui/AddCommentFormDialog';
diff --git a/final_src/final_src/4_features/comment-management/ui/AddCommentFormDialog.tsx b/final_src/final_src/4_features/comment-management/ui/AddCommentFormDialog.tsx
new file mode 100644
index 000000000..97b3bb2a3
--- /dev/null
+++ b/final_src/final_src/4_features/comment-management/ui/AddCommentFormDialog.tsx
@@ -0,0 +1,29 @@
+import { useUIStore } from '@/shared/lib';
+import { Button, ContentDialog, Textarea } from '@/shared/ui';
+
+import { useAddCommentForm } from '../hooks/useAddCommentForm';
+
+export const AddCommentDialog = () => {
+  const { showAddCommentDialog, setShowAddCommentDialog } = useUIStore();
+
+  const { commentBody, handleChangeBody, handleSubmit, resetForm } =
+    useAddCommentForm();
+
+  return (
+    <ContentDialog
+      open={showAddCommentDialog}
+      onOpenChange={setShowAddCommentDialog}
+      onClose={resetForm}
+      title='새 댓글 추가'
+    >
+      <form className='space-y-4' onSubmit={handleSubmit}>
+        <Textarea
+          placeholder='댓글 내용'
+          value={commentBody}
+          onChange={handleChangeBody}
+        />
+        <Button type='submit'>댓글 추가</Button>
+      </form>
+    </ContentDialog>
+  );
+};
diff --git a/final_src/final_src/4_features/comment-management/ui/CommentItem.tsx b/final_src/final_src/4_features/comment-management/ui/CommentItem.tsx
new file mode 100644
index 000000000..baa949d5f
--- /dev/null
+++ b/final_src/final_src/4_features/comment-management/ui/CommentItem.tsx
@@ -0,0 +1,80 @@
+import { Edit2, ThumbsUp, Trash2 } from 'lucide-react';
+
+import {
+  Comment,
+  useDeleteCommentMutation,
+  useLikeCommentMutation,
+} from '@/entities/comment';
+import { UI_CONSTANTS } from '@/shared/constants';
+import { highlightText, usePostsFilterStore, useUIStore } from '@/shared/lib';
+import { Button } from '@/shared/ui';
+
+interface CommentItemProps {
+  comment: Comment;
+}
+
+export const CommentItem = ({ comment }: CommentItemProps) => {
+  const { setSelectedComment, setShowEditCommentDialog } = useUIStore();
+  const { searchQuery } = usePostsFilterStore();
+  const { mutate: likeComment, isPending } = useLikeCommentMutation({
+    onError: error => {
+      console.error('댓글 좋아요 오류:', error);
+    },
+  });
+  const { mutate: deleteComment, isPending: isDeleting } =
+    useDeleteCommentMutation({
+      onError: error => {
+        console.error('댓글 삭제 오류:', error);
+      },
+    });
+
+  const handleClickLikeComment = () => {
+    if (isPending) return;
+    likeComment({ commentId: comment.id, postId: comment.postId });
+  };
+
+  const handleClickEditComment = () => {
+    setSelectedComment(comment);
+    setShowEditCommentDialog(true);
+  };
+
+  const handleClickDeleteComment = () => {
+    if (isDeleting) return;
+    deleteComment({ commentId: comment.id, postId: comment.postId });
+  };
+
+  return (
+    <div className='flex items-center justify-between text-sm border-b pb-1 gap-2'>
+      <div className='flex items-center space-x-2 min-w-0 flex-1'>
+        <span className='font-medium shrink-0'>{comment.user.username}:</span>
+        <span className='truncate'>
+          {highlightText(comment.body, searchQuery)}
+        </span>
+      </div>
+      <div className='flex items-center space-x-1 shrink-0'>
+        <Button
+          variant='ghost'
+          size='sm'
+          onClick={() => handleClickLikeComment()}
+        >
+          <ThumbsUp className={UI_CONSTANTS.ICON_SIZES.SMALL} />
+          <span className='ml-1 text-xs'>{comment.likes}</span>
+        </Button>
+        <Button
+          variant='ghost'
+          size='sm'
+          onClick={() => handleClickEditComment()}
+        >
+          <Edit2 className={UI_CONSTANTS.ICON_SIZES.SMALL} />
+        </Button>
+        <Button
+          variant='ghost'
+          size='sm'
+          onClick={() => handleClickDeleteComment()}
+        >
+          <Trash2 className={UI_CONSTANTS.ICON_SIZES.SMALL} />
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/final_src/final_src/4_features/comment-management/ui/CommentList.tsx b/final_src/final_src/4_features/comment-management/ui/CommentList.tsx
new file mode 100644
index 000000000..c7868a3fd
--- /dev/null
+++ b/final_src/final_src/4_features/comment-management/ui/CommentList.tsx
@@ -0,0 +1,24 @@
+import { useGetCommentsQuery } from '@/entities/comment';
+import { useUIStore } from '@/shared/lib';
+import { LoadingSpinner } from '@/shared/ui';
+
+import { CommentItem } from './CommentItem';
+
+export const CommentList = () => {
+  const { selectedPost } = useUIStore();
+  const { data: commentsData, isLoading } = useGetCommentsQuery(
+    selectedPost?.id ?? null
+  );
+
+  return (
+    <div className='space-y-1 w-full'>
+      {isLoading ? (
+        <LoadingSpinner />
+      ) : (
+        commentsData?.comments.map(comment => (
+          <CommentItem key={comment.id} comment={comment} />
+        ))
+      )}
+    </div>
+  );
+};
diff --git a/final_src/final_src/4_features/comment-management/ui/EditCommentFormDialog.tsx b/final_src/final_src/4_features/comment-management/ui/EditCommentFormDialog.tsx
new file mode 100644
index 000000000..eef997fce
--- /dev/null
+++ b/final_src/final_src/4_features/comment-management/ui/EditCommentFormDialog.tsx
@@ -0,0 +1,28 @@
+import { useUIStore } from '@/shared/lib';
+import { Button, ContentDialog, Textarea } from '@/shared/ui';
+
+import { useEditCommentForm } from '../hooks/useEditCommentForm';
+
+export const EditCommentFormDialog = () => {
+  const { showEditCommentDialog, setShowEditCommentDialog } = useUIStore();
+  const { commentBody, handleChangeBody, handleSubmit, resetForm } =
+    useEditCommentForm();
+
+  return (
+    <ContentDialog
+      open={showEditCommentDialog}
+      onOpenChange={setShowEditCommentDialog}
+      onClose={resetForm}
+      title='댓글 수정'
+    >
+      <form className='space-y-4' onSubmit={handleSubmit}>
+        <Textarea
+          placeholder='댓글 내용'
+          value={commentBody}
+          onChange={handleChangeBody}
+        />
+        <Button type='submit'>댓글 업데이트</Button>
+      </form>
+    </ContentDialog>
+  );
+};
diff --git a/final_src/final_src/4_features/filter-posts/hooks/useFilteredPosts.ts b/final_src/final_src/4_features/filter-posts/hooks/useFilteredPosts.ts
new file mode 100644
index 000000000..89a0dbcb3
--- /dev/null
+++ b/final_src/final_src/4_features/filter-posts/hooks/useFilteredPosts.ts
@@ -0,0 +1,162 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import {
+  AllFilterParams,
+  useGetPostsBySearchQuery,
+  useGetPostsByTagQuery,
+  useGetPostsQuery,
+} from '@/entities/post';
+import { useGetUsersQuery } from '@/entities/user';
+import { POST_QUERY_TYPE, usePostsFilterStore } from '@/shared/lib';
+
+import { getPostsWithAuthor } from '../../post-management/lib/post.util';
+import { PostWithAuthor } from '../../post-management/types';
+
+export type SelectedUserProperties = 'id' | 'username' | 'image';
+
+export const useFilteredPosts = () => {
+  const {
+    selectedTag,
+    searchQuery,
+    limit,
+    skip,
+    sortBy,
+    sortOrder,
+    pagination,
+    setQueryType,
+    setPagination,
+  } = usePostsFilterStore();
+
+  const [posts, setPosts] = useState<PostWithAuthor<SelectedUserProperties>[]>(
+    []
+  );
+
+  const filters: AllFilterParams = {
+    limit,
+    skip,
+    sortBy,
+    sortOrder,
+    searchQuery,
+    selectedTag,
+  };
+
+  const { data: usersData, isLoading: isLoadingUsers } =
+    useGetUsersQuery<SelectedUserProperties>({
+      limit: 0,
+      select: ['id', 'username', 'image'],
+    });
+
+  const { data: postsData, isLoading: isLoadingPosts } = useGetPostsQuery({
+    limit,
+    skip,
+    sortBy,
+    sortOrder,
+  });
+
+  const { data: postsByTagData, isLoading: isLoadingPostsByTag } =
+    useGetPostsByTagQuery({
+      limit,
+      skip,
+      sortBy,
+      sortOrder,
+      selectedTag,
+    });
+
+  const { data: postsBySearchData, isLoading: isLoadingPostsBySearch } =
+    useGetPostsBySearchQuery({
+      limit,
+      skip,
+      sortBy,
+      sortOrder,
+      searchQuery,
+    });
+
+  const postsWithAuthor = useMemo(() => {
+    return getPostsWithAuthor<SelectedUserProperties>(
+      postsData?.posts ?? [],
+      usersData?.users ?? []
+    );
+  }, [postsData?.posts, usersData?.users, ...[Object.values(filters)]]);
+
+  const postsWithAuthorByTag = useMemo(() => {
+    return getPostsWithAuthor<SelectedUserProperties>(
+      postsByTagData?.posts ?? [],
+      usersData?.users ?? []
+    );
+  }, [
+    postsByTagData?.posts,
+    usersData?.users,
+    selectedTag,
+    ...[Object.values(filters)],
+  ]);
+
+  const postsWithAuthorBySearch = useMemo(() => {
+    return getPostsWithAuthor<SelectedUserProperties>(
+      postsBySearchData?.posts ?? [],
+      usersData?.users ?? []
+    );
+  }, [postsBySearchData?.posts, usersData?.users, ...[Object.values(filters)]]);
+
+  const isLoading =
+    isLoadingUsers ||
+    isLoadingPosts ||
+    isLoadingPostsByTag ||
+    isLoadingPostsBySearch;
+
+  useEffect(() => {
+    // 검색어가 있으면 검색 결과 사용
+    if (searchQuery && searchQuery.trim()) {
+      setPosts(postsWithAuthorBySearch);
+      setQueryType(POST_QUERY_TYPE.SEARCH);
+      return;
+    }
+
+    // 태그가 있고 'all'이 아니면 태그 결과 사용
+    if (selectedTag && selectedTag !== 'all' && selectedTag.trim()) {
+      setPosts(postsWithAuthorByTag);
+      setQueryType(POST_QUERY_TYPE.TAG);
+      return;
+    }
+
+    // 기본 게시물 목록 사용
+    setPosts(postsWithAuthor);
+    setQueryType(POST_QUERY_TYPE.BASE);
+  }, [
+    postsWithAuthor,
+    postsWithAuthorByTag,
+    postsWithAuthorBySearch,
+    searchQuery,
+    selectedTag,
+  ]);
+
+  useEffect(() => {
+    if (searchQuery && searchQuery.trim()) {
+      setPagination({
+        ...pagination,
+        total: postsBySearchData?.total ?? 0,
+      });
+      return;
+    }
+
+    // 태그가 있고 'all'이 아니면 태그 결과 사용
+    if (selectedTag && selectedTag !== 'all' && selectedTag.trim()) {
+      setPagination({
+        ...pagination,
+        total: postsByTagData?.total ?? 0,
+      });
+      return;
+    }
+
+    // 기본 게시물 목록 사용
+    setPagination({
+      ...pagination,
+      total: postsData?.total ?? 0,
+    });
+  }, [postsBySearchData, postsByTagData, postsData]);
+
+  return {
+    posts,
+    setPosts,
+    isLoading,
+  };
+};
diff --git a/final_src/final_src/4_features/filter-posts/index.ts b/final_src/final_src/4_features/filter-posts/index.ts
new file mode 100644
index 000000000..eaa97cd92
--- /dev/null
+++ b/final_src/final_src/4_features/filter-posts/index.ts
@@ -0,0 +1,10 @@
+// UI Components
+export { Filters } from './ui/Filters';
+export { SearchInput } from './ui/SearchInput';
+export { SelectLimit } from './ui/SelectLimit';
+export { SelectSortBy } from './ui/SelectSortBy';
+export { SelectSortOrder } from './ui/SelectSortOrder';
+export { SelectTag } from './ui/SelectTag';
+
+// Hooks
+export { useFilteredPosts } from './hooks/useFilteredPosts';
diff --git a/final_src/final_src/4_features/filter-posts/ui/Filters.tsx b/final_src/final_src/4_features/filter-posts/ui/Filters.tsx
new file mode 100644
index 000000000..16bafecb0
--- /dev/null
+++ b/final_src/final_src/4_features/filter-posts/ui/Filters.tsx
@@ -0,0 +1,15 @@
+import { SearchInput } from './SearchInput';
+import { SelectSortBy } from './SelectSortBy';
+import { SelectSortOrder } from './SelectSortOrder';
+import { SelectTag } from './SelectTag';
+
+export const Filters = () => {
+  return (
+    <div className='flex gap-4'>
+      <SearchInput />
+      <SelectTag />
+      <SelectSortBy />
+      <SelectSortOrder />
+    </div>
+  );
+};
diff --git a/final_src/final_src/4_features/filter-posts/ui/SearchInput.tsx b/final_src/final_src/4_features/filter-posts/ui/SearchInput.tsx
new file mode 100644
index 000000000..29cc8c124
--- /dev/null
+++ b/final_src/final_src/4_features/filter-posts/ui/SearchInput.tsx
@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+
+import { Search } from 'lucide-react';
+
+import { UI_CONSTANTS } from '@/shared/constants';
+import { useDebounce, usePostsFilterStore } from '@/shared/lib';
+import { Input } from '@/shared/ui';
+
+export const SearchInput = () => {
+  const { searchQuery, setSearchQuery } = usePostsFilterStore();
+  const debouncedSetSearchQuery = useDebounce((searchQuery: string) => {
+    setSearchQuery(searchQuery);
+  }, 500);
+
+  const [originalSearchQuery, setOriginalSearchQuery] = useState(searchQuery);
+
+  const handleChangeSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setOriginalSearchQuery(e.target.value);
+  };
+
+  const handleKeyDownSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      setOriginalSearchQuery(e.currentTarget.value);
+    }
+  };
+
+  useEffect(() => {
+    debouncedSetSearchQuery(originalSearchQuery);
+  }, [originalSearchQuery]);
+
+  return (
+    <div className='flex-1'>
+      <div className='relative'>
+        <Search
+          className={`absolute left-2 top-2.5 ${UI_CONSTANTS.ICON_SIZES.MEDIUM} text-muted-foreground`}
+        />
+        <Input
+          placeholder='게시물 검색...'
+          className='pl-8'
+          value={originalSearchQuery}
+          onChange={handleChangeSearch}
+          onKeyDown={handleKeyDownSearch}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/final_src/final_src/4_features/filter-posts/ui/SelectLimit.tsx b/final_src/final_src/4_features/filter-posts/ui/SelectLimit.tsx
new file mode 100644
index 000000000..c42827701
--- /dev/null
+++ b/final_src/final_src/4_features/filter-posts/ui/SelectLimit.tsx
@@ -0,0 +1,31 @@
+import { UI_CONSTANTS } from '@/shared/constants';
+import { usePostsFilterStore } from '@/shared/lib';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/shared/ui';
+
+export const SelectLimit = () => {
+  const { limit, setLimit } = usePostsFilterStore();
+
+  return (
+    <Select
+      value={limit.toString()}
+      onValueChange={value => setLimit(Number(value))}
+    >
+      <SelectTrigger className='w-[180px]'>
+        <SelectValue placeholder='10' />
+      </SelectTrigger>
+      <SelectContent>
+        {UI_CONSTANTS.PAGINATION.LIMIT_OPTIONS.map(option => (
+          <SelectItem key={option} value={String(option)}>
+            {option}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};
diff --git a/final_src/final_src/4_features/filter-posts/ui/SelectSortBy.tsx b/final_src/final_src/4_features/filter-posts/ui/SelectSortBy.tsx
new file mode 100644
index 000000000..2a06dc535
--- /dev/null
+++ b/final_src/final_src/4_features/filter-posts/ui/SelectSortBy.tsx
@@ -0,0 +1,35 @@
+import { SORT_BY } from '@/entities/post';
+import { usePostsFilterStore } from '@/shared/lib';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/shared/ui';
+
+const SORT_BY_OPTIONS: { value: SORT_BY; label: string }[] = [
+  { value: SORT_BY.NONE, label: '없음' },
+  { value: SORT_BY.ID, label: 'ID' },
+  { value: SORT_BY.TITLE, label: '제목' },
+  { value: SORT_BY.REACTIONS, label: '반응' },
+];
+
+export const SelectSortBy = () => {
+  const { sortBy, setSortBy } = usePostsFilterStore();
+
+  return (
+    <Select value={sortBy} onValueChange={setSortBy}>
+      <SelectTrigger className='w-[180px]'>
+        <SelectValue placeholder='정렬 기준' />
+      </SelectTrigger>
+      <SelectContent>
+        {SORT_BY_OPTIONS.map(option => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};
diff --git a/final_src/final_src/4_features/filter-posts/ui/SelectSortOrder.tsx b/final_src/final_src/4_features/filter-posts/ui/SelectSortOrder.tsx
new file mode 100644
index 000000000..bff9b08cf
--- /dev/null
+++ b/final_src/final_src/4_features/filter-posts/ui/SelectSortOrder.tsx
@@ -0,0 +1,33 @@
+import { SORT_ORDER } from '@/entities/post';
+import { usePostsFilterStore } from '@/shared/lib';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/shared/ui';
+
+const SORT_ORDER_OPTIONS: { value: SORT_ORDER; label: string }[] = [
+  { value: SORT_ORDER.ASC, label: '오름차순' },
+  { value: SORT_ORDER.DESC, label: '내림차순' },
+];
+
+export const SelectSortOrder = () => {
+  const { sortOrder, setSortOrder } = usePostsFilterStore();
+
+  return (
+    <Select value={sortOrder} onValueChange={setSortOrder}>
+      <SelectTrigger className='w-[180px]'>
+        <SelectValue placeholder='정렬 순서' />
+      </SelectTrigger>
+      <SelectContent>
+        {SORT_ORDER_OPTIONS.map(option => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};
diff --git a/final_src/final_src/4_features/filter-posts/ui/SelectTag.tsx b/final_src/final_src/4_features/filter-posts/ui/SelectTag.tsx
new file mode 100644
index 000000000..eeeb3b10b
--- /dev/null
+++ b/final_src/final_src/4_features/filter-posts/ui/SelectTag.tsx
@@ -0,0 +1,45 @@
+import { useGetTagsQuery } from '@/entities/tag';
+import { usePostsFilterStore } from '@/shared/lib';
+import {
+  LoadingSpinner,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/shared/ui';
+
+export const SelectTag = () => {
+  const { selectedTag, setSelectedTag } = usePostsFilterStore();
+  const { data: tags, isLoading } = useGetTagsQuery();
+
+  const handleTagChange = (value: string) => {
+    setSelectedTag(value);
+  };
+
+  return (
+    <Select value={selectedTag} onValueChange={handleTagChange}>
+      {isLoading ? (
+        <SelectTrigger className='w-[180px]'>
+          <LoadingSpinner size='sm' />
+        </SelectTrigger>
+      ) : (
+        <>
+          <SelectTrigger className='w-[180px]'>
+            <SelectValue placeholder='태그 선택' />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value='all'>모든 태그</SelectItem>
+            {tags &&
+              tags.length > 0 &&
+              tags.map(tag => (
+                <SelectItem key={tag.url} value={tag.slug}>
+                  {tag.slug}
+                </SelectItem>
+              ))}
+          </SelectContent>
+        </>
+      )}
+    </Select>
+  );
+};
diff --git a/final_src/final_src/4_features/post-management/hooks/useCreatePostForm.ts b/final_src/final_src/4_features/post-management/hooks/useCreatePostForm.ts
new file mode 100644
index 000000000..dbce9ae11
--- /dev/null
+++ b/final_src/final_src/4_features/post-management/hooks/useCreatePostForm.ts
@@ -0,0 +1,66 @@
+import { useState } from 'react';
+
+import { useCreatePostMutation } from '@/entities/post';
+import { API_CONSTANTS } from '@/shared/constants';
+import { useUIStore } from '@/shared/lib';
+
+export const useCreatePostForm = () => {
+  const { setShowAddDialog } = useUIStore();
+  const { mutate: createPost } = useCreatePostMutation({
+    onSuccess: () => {
+      resetForm();
+    },
+    onError: (error: Error) => {
+      console.error('게시물 추가 오류:', error);
+      // ! 모달 다시 열어서 사용자가 수정하기
+      setShowAddDialog(true);
+    },
+  });
+
+  const [postTitle, setPostTitle] = useState<string>('');
+  const [postBody, setPostBody] = useState<string>('');
+  const [postUserId, setPostUserId] = useState<number>(
+    API_CONSTANTS.DEFAULT_USER_ID
+  );
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    // ! 다이얼로그 먼저 닫고 UI 낙관적 업데이트 보여주기
+    setShowAddDialog(false);
+    createPost({
+      title: postTitle,
+      body: postBody,
+      userId: postUserId,
+    });
+  };
+
+  const resetForm = () => {
+    setPostTitle('');
+    setPostBody('');
+    setPostUserId(API_CONSTANTS.DEFAULT_USER_ID);
+  };
+
+  const handleChangeTitle = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPostTitle(e.target.value);
+  };
+
+  const handleChangeBody = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setPostBody(e.target.value);
+  };
+
+  const handleChangeUserId = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPostUserId(Number(e.target.value));
+  };
+
+  return {
+    postTitle,
+    postBody,
+    postUserId,
+    handleSubmit,
+    resetForm,
+    handleChangeTitle,
+    handleChangeBody,
+    handleChangeUserId,
+  };
+};
diff --git a/final_src/final_src/4_features/post-management/hooks/useEditPostForm.ts b/final_src/final_src/4_features/post-management/hooks/useEditPostForm.ts
new file mode 100644
index 000000000..2886181eb
--- /dev/null
+++ b/final_src/final_src/4_features/post-management/hooks/useEditPostForm.ts
@@ -0,0 +1,60 @@
+import { ChangeEvent, useEffect, useState } from 'react';
+
+import { usePutPostMutation } from '@/entities/post';
+import { useUIStore } from '@/shared/lib';
+
+export const useEditPostForm = () => {
+  const { selectedPost, setShowEditDialog } = useUIStore();
+  const { mutate: updatePost } = usePutPostMutation({
+    onSuccess: () => {
+      resetForm();
+    },
+    onError: error => {
+      console.error('게시물 수정 오류:', error);
+      // ! 모달 다시 열어서 사용자가 수정하기
+      setShowEditDialog(true);
+    },
+  });
+
+  const [title, setTitle] = useState(selectedPost?.title || '');
+  const [body, setBody] = useState(selectedPost?.body || '');
+
+  const handleChangeTitle = (e: ChangeEvent<HTMLInputElement>) => {
+    setTitle(e.target.value);
+  };
+
+  const handleChangeBody = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setBody(e.target.value);
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    // ! 모달 먼저 닫고 UI 낙관적 업데이트 보여주기
+    setShowEditDialog(false);
+    updatePost({
+      id: selectedPost?.id ?? 0,
+      title,
+      body,
+      userId: selectedPost?.userId ?? 0,
+    });
+  };
+
+  useEffect(() => {
+    setTitle(selectedPost?.title || '');
+    setBody(selectedPost?.body || '');
+  }, [selectedPost]);
+
+  const resetForm = () => {
+    setTitle('');
+    setBody('');
+  };
+
+  return {
+    title,
+    body,
+    handleChangeTitle,
+    handleChangeBody,
+    handleSubmit,
+  };
+};
diff --git a/final_src/final_src/4_features/post-management/index.ts b/final_src/final_src/4_features/post-management/index.ts
new file mode 100644
index 000000000..ecfdede3e
--- /dev/null
+++ b/final_src/final_src/4_features/post-management/index.ts
@@ -0,0 +1,4 @@
+export * from './ui/AddPostFormDialog';
+export * from './ui/AddPostButton';
+export * from './ui/PostDetailDialog';
+export * from './ui/PostTable';
diff --git a/final_src/final_src/4_features/post-management/lib/post.util.ts b/final_src/final_src/4_features/post-management/lib/post.util.ts
new file mode 100644
index 000000000..f4f9774a5
--- /dev/null
+++ b/final_src/final_src/4_features/post-management/lib/post.util.ts
@@ -0,0 +1,18 @@
+import type { Post } from '@/entities/post';
+import type { User, UserPick } from '@/entities/user';
+
+import { PostWithAuthor } from '../types';
+
+export const getPostsWithAuthor = <K extends keyof User>(
+  posts: Post[],
+  users: UserPick<K | 'id'>[]
+): PostWithAuthor<K>[] => {
+  return posts.map(post => {
+    const author = users.find(user => user.id === post.userId);
+
+    return {
+      ...post,
+      author,
+    };
+  });
+};
diff --git a/final_src/final_src/4_features/post-management/types.ts b/final_src/final_src/4_features/post-management/types.ts
new file mode 100644
index 000000000..a911eb348
--- /dev/null
+++ b/final_src/final_src/4_features/post-management/types.ts
@@ -0,0 +1,6 @@
+import type { Post } from '@/entities/post';
+import type { User, UserPick } from '@/entities/user';
+
+export interface PostWithAuthor<K extends keyof User> extends Post {
+  author?: UserPick<K>;
+}
diff --git a/final_src/final_src/4_features/post-management/ui/AddPostButton.tsx b/final_src/final_src/4_features/post-management/ui/AddPostButton.tsx
new file mode 100644
index 000000000..76eb1dcb0
--- /dev/null
+++ b/final_src/final_src/4_features/post-management/ui/AddPostButton.tsx
@@ -0,0 +1,16 @@
+import { Plus } from 'lucide-react';
+
+import { UI_CONSTANTS } from '@/shared/constants';
+import { useUIStore } from '@/shared/lib';
+import { Button } from '@/shared/ui';
+
+export const AddPostButton = () => {
+  const { setShowAddDialog } = useUIStore();
+
+  return (
+    <Button onClick={() => setShowAddDialog(true)}>
+      <Plus className={`${UI_CONSTANTS.ICON_SIZES.MEDIUM} mr-2`} />
+      게시물 추가
+    </Button>
+  );
+};
diff --git a/final_src/final_src/4_features/post-management/ui/AddPostFormDialog.tsx b/final_src/final_src/4_features/post-management/ui/AddPostFormDialog.tsx
new file mode 100644
index 000000000..f0947207e
--- /dev/null
+++ b/final_src/final_src/4_features/post-management/ui/AddPostFormDialog.tsx
@@ -0,0 +1,60 @@
+import { UI_CONSTANTS } from '@/shared/constants';
+import { useUIStore } from '@/shared/lib';
+import { Button, ContentDialog, Input, Textarea } from '@/shared/ui';
+
+import { useCreatePostForm } from '../hooks/useCreatePostForm';
+
+export const AddPostFormDialog = () => {
+  const { setShowAddDialog, showAddDialog } = useUIStore();
+  const {
+    postTitle,
+    postBody,
+    postUserId,
+    handleSubmit,
+    resetForm,
+    handleChangeTitle,
+    handleChangeBody,
+    handleChangeUserId,
+  } = useCreatePostForm();
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      resetForm();
+      setShowAddDialog(open);
+      return;
+    }
+
+    setShowAddDialog(open);
+  };
+
+  return (
+    <ContentDialog
+      title='새 게시물 추가'
+      open={showAddDialog}
+      onOpenChange={handleOpenChange}
+    >
+      <form className='space-y-4' onSubmit={handleSubmit}>
+        <Input
+          placeholder='제목'
+          value={postTitle}
+          onChange={handleChangeTitle}
+        />
+
+        <Textarea
+          rows={UI_CONSTANTS.TEXTAREA_ROWS.LARGE}
+          placeholder='내용'
+          value={postBody}
+          onChange={handleChangeBody}
+        />
+
+        <Input
+          type='number'
+          placeholder='사용자 ID'
+          value={postUserId}
+          onChange={handleChangeUserId}
+        />
+        <Button type='submit'>게시물 추가</Button>
+      </form>
+    </ContentDialog>
+  );
+};
diff --git a/final_src/final_src/4_features/post-management/ui/EditPostFormDialog.tsx b/final_src/final_src/4_features/post-management/ui/EditPostFormDialog.tsx
new file mode 100644
index 000000000..5a3e1a9e7
--- /dev/null
+++ b/final_src/final_src/4_features/post-management/ui/EditPostFormDialog.tsx
@@ -0,0 +1,30 @@
+import { UI_CONSTANTS } from '@/shared/constants';
+import { useUIStore } from '@/shared/lib';
+import { Button, ContentDialog, Input, Textarea } from '@/shared/ui';
+
+import { useEditPostForm } from '../hooks/useEditPostForm';
+
+export const EditPostFormDialog = () => {
+  const { title, body, handleChangeTitle, handleChangeBody, handleSubmit } =
+    useEditPostForm();
+  const { showEditDialog, setShowEditDialog } = useUIStore();
+
+  return (
+    <ContentDialog
+      open={showEditDialog}
+      onOpenChange={setShowEditDialog}
+      title='게시물 수정'
+    >
+      <form className='space-y-4' onSubmit={handleSubmit}>
+        <Input placeholder='제목' value={title} onChange={handleChangeTitle} />
+        <Textarea
+          rows={UI_CONSTANTS.TEXTAREA_ROWS.MEDIUM}
+          placeholder='내용'
+          value={body}
+          onChange={handleChangeBody}
+        />
+        <Button type='submit'>게시물 업데이트</Button>
+      </form>
+    </ContentDialog>
+  );
+};
diff --git a/final_src/final_src/4_features/post-management/ui/PostDetailDialog.tsx b/final_src/final_src/4_features/post-management/ui/PostDetailDialog.tsx
new file mode 100644
index 000000000..dca78d1c7
--- /dev/null
+++ b/final_src/final_src/4_features/post-management/ui/PostDetailDialog.tsx
@@ -0,0 +1,44 @@
+import { Plus } from 'lucide-react';
+
+import { CommentList } from '@/features/comment-management/ui/CommentList';
+import { UI_CONSTANTS } from '@/shared/constants';
+import { highlightText, usePostsFilterStore, useUIStore } from '@/shared/lib';
+import { Button, ContentDialog } from '@/shared/ui';
+
+export const PostDetailDialog = () => {
+  const {
+    showPostDetailDialog,
+    setShowPostDetailDialog,
+    selectedPost,
+    setShowAddCommentDialog,
+  } = useUIStore();
+  const { searchQuery } = usePostsFilterStore();
+
+  if (!selectedPost) return null;
+
+  const handleClickAddComment = () => {
+    setShowAddCommentDialog(true);
+  };
+
+  return (
+    <ContentDialog
+      open={showPostDetailDialog}
+      onOpenChange={setShowPostDetailDialog}
+      title={highlightText(selectedPost.title, searchQuery)}
+    >
+      <div className='space-y-4 w-full'>
+        <p>{highlightText(selectedPost?.body, searchQuery)}</p>
+        <div className='mt-2'>
+          <div className='flex items-center justify-between mb-2'>
+            <h3 className='text-sm font-semibold'>댓글</h3>
+            <Button size='sm' onClick={handleClickAddComment}>
+              <Plus className={`${UI_CONSTANTS.ICON_SIZES.SMALL} mr-1`} />
+              댓글 추가
+            </Button>
+          </div>
+          <CommentList />
+        </div>
+      </div>
+    </ContentDialog>
+  );
+};
diff --git a/final_src/final_src/4_features/post-management/ui/PostPagination.tsx b/final_src/final_src/4_features/post-management/ui/PostPagination.tsx
new file mode 100644
index 000000000..4951e1397
--- /dev/null
+++ b/final_src/final_src/4_features/post-management/ui/PostPagination.tsx
@@ -0,0 +1,39 @@
+import { SelectLimit } from '@/features/filter-posts/ui/SelectLimit';
+import { UI_CONSTANTS } from '@/shared/constants';
+import { usePostsFilterStore } from '@/shared/lib';
+import { Button } from '@/shared/ui';
+
+export const PostPagination = () => {
+  const {
+    setSkip,
+    pagination: { total, limit, skip },
+  } = usePostsFilterStore();
+
+  return (
+    <div className='flex justify-between items-center'>
+      <div className='flex items-center gap-2'>
+        <span>표시</span>
+        <SelectLimit />
+        <span>항목</span>
+      </div>
+      <div className='flex gap-2'>
+        <Button
+          disabled={skip === UI_CONSTANTS.PAGINATION.DEFAULT_SKIP}
+          onClick={() =>
+            setSkip(
+              Math.max(UI_CONSTANTS.PAGINATION.DEFAULT_SKIP, skip - limit)
+            )
+          }
+        >
+          이전
+        </Button>
+        <Button
+          disabled={skip + limit >= total}
+          onClick={() => setSkip(skip + limit)}
+        >
+          다음
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/final_src/final_src/4_features/post-management/ui/PostTable.tsx b/final_src/final_src/4_features/post-management/ui/PostTable.tsx
new file mode 100644
index 000000000..a95797afa
--- /dev/null
+++ b/final_src/final_src/4_features/post-management/ui/PostTable.tsx
@@ -0,0 +1,172 @@
+import {
+  Edit2,
+  MessageSquare,
+  ThumbsDown,
+  ThumbsUp,
+  Trash2,
+} from 'lucide-react';
+
+import { Post, useDeletePostMutation } from '@/entities/post';
+import { User, UserPick } from '@/entities/user';
+import { API_CONSTANTS, UI_CONSTANTS } from '@/shared/constants';
+import { highlightText, usePostsFilterStore, useUIStore } from '@/shared/lib';
+import {
+  Button,
+  LoadingSpinner,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/shared/ui';
+
+import {
+  SelectedUserProperties,
+  useFilteredPosts,
+} from '../../filter-posts/hooks/useFilteredPosts';
+
+export const PostTable = () => {
+  const { posts, isLoading } = useFilteredPosts();
+  const { selectedTag, setSelectedTag, searchQuery, limit } =
+    usePostsFilterStore();
+  const {
+    setShowUserModal,
+    setSelectedUser,
+    setSelectedPost,
+    setShowPostDetailDialog,
+    setShowEditDialog,
+  } = useUIStore();
+  const { mutate: deletePost } = useDeletePostMutation({
+    onError: error => {
+      console.error('게시물 삭제 오류:', error);
+    },
+  });
+
+  const handleClickTag = (tag: string) => {
+    setSelectedTag(tag);
+  };
+
+  const handleClickDeletePost = (id: number) => {
+    deletePost(id);
+  };
+
+  const handleClickEditPost = (post: Post) => {
+    setSelectedPost(post);
+    setShowEditDialog(true);
+  };
+
+  const handleClickDetailPost = (post: Post) => {
+    setSelectedPost(post);
+    setShowPostDetailDialog(true);
+  };
+
+  const handleClickUser = (user: UserPick<SelectedUserProperties>) => {
+    setShowUserModal(true);
+    setSelectedUser(user as User);
+  };
+
+  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>
+        {isLoading ? (
+          <TableRow>
+            <TableCell className={`h-[${80 * limit}px]`} {...{ colSpan: 5 }}>
+              <div className='flex justify-center items-center w-full h-full'>
+                <LoadingSpinner />
+              </div>
+            </TableCell>
+          </TableRow>
+        ) : (
+          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={`${UI_CONSTANTS.STYLES.TAG_SIZE} ${
+                          selectedTag === tag
+                            ? UI_CONSTANTS.STYLES.TAG_SELECTED
+                            : UI_CONSTANTS.STYLES.TAG_DEFAULT
+                        }`}
+                        onClick={() => handleClickTag(tag)}
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </TableCell>
+              <TableCell>
+                <div
+                  className='flex items-center space-x-2 cursor-pointer'
+                  onClick={() => post.author && handleClickUser(post.author)}
+                >
+                  <img
+                    src={post.author?.image}
+                    alt={post.author?.username}
+                    className={`${UI_CONSTANTS.ICON_SIZES.LARGE} rounded-full`}
+                  />
+                  <span>{post.author?.username}</span>
+                </div>
+              </TableCell>
+              <TableCell>
+                <div className='flex items-center gap-2'>
+                  <ThumbsUp className={UI_CONSTANTS.ICON_SIZES.MEDIUM} />
+                  <span>
+                    {post.reactions?.likes ||
+                      API_CONSTANTS.REACTIONS.DEFAULT_LIKES}
+                  </span>
+                  <ThumbsDown className={UI_CONSTANTS.ICON_SIZES.MEDIUM} />
+                  <span>
+                    {post.reactions?.dislikes ||
+                      API_CONSTANTS.REACTIONS.DEFAULT_DISLIKES}
+                  </span>
+                </div>
+              </TableCell>
+              <TableCell>
+                <div className='flex items-center gap-2'>
+                  <Button
+                    variant='ghost'
+                    size='sm'
+                    onClick={() => handleClickDetailPost(post)}
+                  >
+                    <MessageSquare className={UI_CONSTANTS.ICON_SIZES.MEDIUM} />
+                  </Button>
+                  <Button
+                    variant='ghost'
+                    size='sm'
+                    onClick={() => handleClickEditPost(post)}
+                  >
+                    <Edit2 className={UI_CONSTANTS.ICON_SIZES.MEDIUM} />
+                  </Button>
+                  <Button
+                    variant='ghost'
+                    size='sm'
+                    onClick={() => handleClickDeletePost(post.id)}
+                  >
+                    <Trash2 className={UI_CONSTANTS.ICON_SIZES.MEDIUM} />
+                  </Button>
+                </div>
+              </TableCell>
+            </TableRow>
+          ))
+        )}
+      </TableBody>
+    </Table>
+  );
+};
diff --git a/final_src/final_src/4_features/user-profile/index.ts b/final_src/final_src/4_features/user-profile/index.ts
new file mode 100644
index 000000000..830c625d4
--- /dev/null
+++ b/final_src/final_src/4_features/user-profile/index.ts
@@ -0,0 +1 @@
+export * from './ui/UseProfileDialog';
diff --git a/final_src/final_src/4_features/user-profile/ui/UseProfileDialog.tsx b/final_src/final_src/4_features/user-profile/ui/UseProfileDialog.tsx
new file mode 100644
index 000000000..62898262a
--- /dev/null
+++ b/final_src/final_src/4_features/user-profile/ui/UseProfileDialog.tsx
@@ -0,0 +1,60 @@
+import { Loader2 } from 'lucide-react';
+
+import { useGetUserQuery } from '@/entities/user';
+import { useUIStore } from '@/shared/lib';
+import { ContentDialog } from '@/shared/ui';
+
+export const UserProfileDialog = () => {
+  const { selectedUser, showUserModal, setShowUserModal } = useUIStore();
+
+  const { data: user, isLoading } = useGetUserQuery(selectedUser?.id ?? null);
+
+  if (!selectedUser) return null;
+
+  return (
+    <ContentDialog
+      open={showUserModal}
+      onOpenChange={setShowUserModal}
+      title='사용자 정보'
+    >
+      {isLoading ? (
+        <div className='flex justify-center items-center h-full'>
+          <Loader2 className='w-6 h-6 animate-spin' />
+        </div>
+      ) : (
+        <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>
+      )}
+    </ContentDialog>
+  );
+};
diff --git a/final_src/final_src/5_entities/comment/comment.api.ts b/final_src/final_src/5_entities/comment/comment.api.ts
new file mode 100644
index 000000000..ad45e832e
--- /dev/null
+++ b/final_src/final_src/5_entities/comment/comment.api.ts
@@ -0,0 +1,42 @@
+import { ApiService } from '@/shared/lib';
+
+import {
+  Comment,
+  CommentToCreate,
+  CreatedComment,
+  DeletedComment,
+  GetCommentsResponse,
+} from './comment.type';
+
+export const getComments = async (
+  postId: number
+): Promise<GetCommentsResponse> => {
+  return ApiService.get<GetCommentsResponse>(`/comments/post/${postId}`);
+};
+
+export const createComment = async (
+  newComment: CommentToCreate
+): Promise<CreatedComment> => {
+  return ApiService.post<CreatedComment>('/comments/add', newComment);
+};
+
+export const updateComment = async (
+  updatedComment: Comment
+): Promise<{ body: string }> => {
+  return ApiService.put<{ body: string }>(`/comments/${updatedComment.id}`, {
+    body: updatedComment.body,
+  });
+};
+
+export const patchComment = async (
+  updatedComment: Partial<Comment>,
+  commentId: number
+): Promise<Comment> => {
+  return ApiService.put<Comment>(`/comments/${commentId}`, updatedComment);
+};
+
+export const deleteComment = async (
+  commentId: number
+): Promise<DeletedComment> => {
+  return ApiService.delete<DeletedComment>(`/comments/${commentId}`);
+};
diff --git a/final_src/final_src/5_entities/comment/comment.queries.ts b/final_src/final_src/5_entities/comment/comment.queries.ts
new file mode 100644
index 000000000..ff7fd3088
--- /dev/null
+++ b/final_src/final_src/5_entities/comment/comment.queries.ts
@@ -0,0 +1,317 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { queryKeys } from '@/shared/lib';
+import { MutationProps, Nullable } from '@/shared/types';
+
+import {
+  createComment,
+  deleteComment,
+  getComments,
+  patchComment,
+  updateComment,
+} from './comment.api';
+import {
+  Comment,
+  CommentToCreate,
+  CreatedComment,
+  DeletedComment,
+  GetCommentsResponse,
+} from './comment.type';
+
+export const useGetCommentsQuery = (postId: Nullable<number>) => {
+  return useQuery({
+    queryKey: queryKeys.comments.list(postId ?? 0),
+    queryFn: () => getComments(postId ?? 0),
+    enabled: !!postId,
+  });
+};
+
+export const useCreateCommentMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<CreatedComment>) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (newComment: CommentToCreate) => createComment(newComment),
+    onMutate: async newComment => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.comments.list(newComment.postId),
+      });
+
+      const previousCommentData = queryClient.getQueryData<GetCommentsResponse>(
+        queryKeys.comments.list(newComment.postId)
+      );
+
+      const commentToAdd: Comment = {
+        ...newComment,
+        id: Math.floor(Math.random() * 1000000),
+        likes: 0,
+        user: {
+          id: 1,
+          username: 'John Doe',
+          image: 'john.doe@example.com',
+        },
+      };
+
+      // ! 이전 데이터 캐시에 새 댓글 추가하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(
+        queryKeys.comments.list(newComment.postId),
+        (old: GetCommentsResponse) => {
+          return {
+            ...old,
+            comments: [commentToAdd, ...(old.comments || [])],
+          };
+        }
+      );
+
+      return { previousCommentData };
+    },
+    onError: (error, { postId }, context) => {
+      queryClient.setQueryData(
+        queryKeys.comments.list(postId),
+        context?.previousCommentData
+      );
+      onError?.(error);
+    },
+    onSuccess: (data, _, { previousCommentData }) => {
+      // ! 성공 시 이전 데이터에 성공 데이터 추가
+      queryClient.setQueryData(
+        queryKeys.comments.list(data.postId),
+        (old: any) => {
+          return {
+            ...old,
+            comments: [data, ...(previousCommentData?.comments || [])],
+          };
+        }
+      );
+      onSuccess?.(data);
+    },
+  });
+};
+
+export const useUpdateCommentMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<{ body: string }>) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (updatedComment: Comment) => updateComment(updatedComment),
+    onMutate: async updatedComment => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.comments.list(updatedComment.postId),
+      });
+
+      const previousComments = queryClient.getQueryData<GetCommentsResponse>(
+        queryKeys.comments.list(updatedComment.postId)
+      );
+
+      // ! 이전 데이터 캐시에 수정된 댓글 업데이트하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(
+        queryKeys.comments.list(updatedComment.postId),
+        (old: GetCommentsResponse) => {
+          if (!old) {
+            return {
+              comments: [updatedComment],
+              total: 1,
+              skip: 0,
+              limit: 10,
+            };
+          }
+
+          return {
+            ...old,
+            comments: old.comments.map((comment: Comment) =>
+              comment.id === updatedComment.id ? updatedComment : comment
+            ),
+          };
+        }
+      );
+
+      return { previousComments };
+    },
+    onError: (error, updatedComment, context) => {
+      queryClient.setQueryData(
+        queryKeys.comments.list(updatedComment.postId),
+        context?.previousComments
+      );
+      onError?.(error);
+    },
+    onSuccess: (data, updatedComment, { previousComments }) => {
+      // ! 성공 시 이전 데이터에 성공 데이터 추가
+      queryClient.setQueryData(
+        queryKeys.comments.list(updatedComment.postId),
+        (old: any) => {
+          return {
+            ...old,
+            comments: previousComments?.comments.map((comment: Comment) =>
+              comment.id === updatedComment.id
+                ? { ...comment, body: data.body }
+                : comment
+            ),
+          };
+        }
+      );
+      onSuccess?.(data);
+    },
+  });
+};
+
+export const useDeleteCommentMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<DeletedComment>) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ commentId }: { commentId: number; postId: number }) =>
+      deleteComment(commentId),
+    onMutate: async ({ commentId, postId }) => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.comments.list(postId),
+      });
+
+      const previousComments = queryClient.getQueryData<GetCommentsResponse>(
+        queryKeys.comments.list(postId)
+      );
+
+      // ! 이전 데이터 캐시에 삭제된 댓글 제외하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(queryKeys.comments.list(postId), (old: any) => {
+        if (!old) {
+          return {
+            comments: [],
+            total: 1,
+            skip: 0,
+            limit: 10,
+          };
+        }
+
+        return {
+          ...old,
+          comments: old.comments.filter(
+            (comment: Comment) => comment.id !== commentId
+          ),
+        };
+      });
+
+      return { previousComments };
+    },
+    onError: (error, { postId }, context) => {
+      queryClient.setQueryData(
+        queryKeys.comments.list(postId),
+        context?.previousComments
+      );
+      onError?.(error);
+    },
+    onSuccess: (data, { postId }, { previousComments }) => {
+      // ! 성공 시 이전 데이터에서 삭제된 댓글 제외
+      queryClient.setQueryData(queryKeys.comments.list(postId), (old: any) => {
+        return {
+          ...old,
+          comments: previousComments?.comments.filter(
+            (comment: Comment) => comment.id !== data.id
+          ),
+        };
+      });
+      onSuccess?.(data);
+    },
+  });
+};
+
+export const useLikeCommentMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<Comment>) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      commentId,
+      postId,
+    }: {
+      commentId: number;
+      postId: number;
+    }) => {
+      const commentsData = queryClient.getQueryData<GetCommentsResponse>(
+        queryKeys.comments.list(postId)
+      );
+
+      if (!commentsData) {
+        throw new Error('Comments not found');
+      }
+
+      const commentToUpdate = commentsData.comments.find(
+        (comment: Comment) => comment.id === commentId
+      );
+
+      if (!commentToUpdate) {
+        throw new Error('Comment not found');
+      }
+
+      return patchComment(
+        {
+          likes: commentToUpdate.likes + 1,
+        },
+        commentId
+      );
+    },
+    onMutate: async ({ commentId, postId }) => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.comments.list(postId),
+      });
+
+      const previousComments = queryClient.getQueryData<GetCommentsResponse>(
+        queryKeys.comments.list(postId)
+      );
+
+      // ! 이전 데이터 캐시에 좋아요 누른 댓글 업데이트하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(
+        queryKeys.comments.list(postId),
+        (old: GetCommentsResponse) => {
+          if (!old) {
+            return {
+              comments: [],
+              total: 0,
+              skip: 0,
+              limit: 10,
+            };
+          }
+
+          return {
+            ...old,
+            comments: old.comments.map((comment: Comment) =>
+              comment.id === commentId
+                ? { ...comment, likes: comment.likes + 1 }
+                : comment
+            ),
+          };
+        }
+      );
+
+      return { previousComments };
+    },
+    onError: (error, { postId }, context) => {
+      queryClient.setQueryData(
+        queryKeys.comments.list(postId),
+        context?.previousComments
+      );
+      onError?.(error);
+    },
+    onSuccess: (data, _, { previousComments }) => {
+      // ! 성공 시 이전 데이터에 좋아요 누른 댓글 업데이트
+      // ! 실무에선 응답 데이터의 좋아요 수가 증가해야하지만, 더미 데이터라 증가하지 않으므로 좋아요수가 증가한 것으로 가정하여 업데이트
+      queryClient.setQueryData(queryKeys.comments.list(data.postId), () => {
+        return {
+          ...previousComments,
+          comments: previousComments?.comments.map((comment: Comment) =>
+            comment.id === data.id
+              ? { ...data, likes: comment.likes + 1 }
+              : comment
+          ),
+        };
+      });
+      onSuccess?.(data);
+    },
+  });
+};
diff --git a/final_src/final_src/5_entities/comment/comment.type.ts b/final_src/final_src/5_entities/comment/comment.type.ts
new file mode 100644
index 000000000..0608de1b4
--- /dev/null
+++ b/final_src/final_src/5_entities/comment/comment.type.ts
@@ -0,0 +1,29 @@
+import { PaginationMeta } from '@/shared/types';
+
+import { BaseUser } from '../user';
+
+// ? Comment에 User도 포함되는데 Entity에 넣는게 맞나?
+export interface Comment {
+  id: number;
+  postId: number;
+  body: string;
+  user: BaseUser;
+  likes: number;
+}
+
+export interface CommentToCreate {
+  body: string;
+  postId: number;
+  userId: number;
+}
+
+export interface DeletedComment extends Comment {
+  isDeleted: boolean;
+  deletedOn: string;
+}
+
+export type CreatedComment = CommentToCreate;
+
+export interface GetCommentsResponse extends PaginationMeta {
+  comments: Comment[];
+}
diff --git a/final_src/final_src/5_entities/comment/index.ts b/final_src/final_src/5_entities/comment/index.ts
new file mode 100644
index 000000000..74af32942
--- /dev/null
+++ b/final_src/final_src/5_entities/comment/index.ts
@@ -0,0 +1,3 @@
+export * from './comment.type';
+export * from './comment.queries';
+export * from './comment.api';
diff --git a/final_src/final_src/5_entities/post/index.ts b/final_src/final_src/5_entities/post/index.ts
new file mode 100644
index 000000000..7341cce55
--- /dev/null
+++ b/final_src/final_src/5_entities/post/index.ts
@@ -0,0 +1,14 @@
+// Types
+export * from './post.type';
+
+// API
+export * from './post.api';
+
+// Queries
+export * from './post.queries';
+
+// Models
+export * from './post.model';
+
+// Constants
+export * from './post.constant';
diff --git a/final_src/final_src/5_entities/post/post.api.ts b/final_src/final_src/5_entities/post/post.api.ts
new file mode 100644
index 000000000..71b669e90
--- /dev/null
+++ b/final_src/final_src/5_entities/post/post.api.ts
@@ -0,0 +1,74 @@
+import {
+  BaseFilterParams,
+  DeletedPost,
+  GetPostsResponse,
+  ParamsWithSearch,
+  ParamsWithTag,
+  Post,
+  POST_CONSTANTS,
+  SORT_ORDER,
+} from '@/entities/post';
+import { ApiService } from '@/shared/lib';
+
+export const getPosts = async ({
+  limit = POST_CONSTANTS.DEFAULT_LIMIT,
+  skip = POST_CONSTANTS.DEFAULT_SKIP,
+  sortBy,
+  sortOrder,
+}: BaseFilterParams): Promise<GetPostsResponse> => {
+  const params = {
+    limit: limit.toString(),
+    skip: skip.toString(),
+    sortBy: sortBy || '',
+    sortOrder: sortOrder || SORT_ORDER.ASC,
+  };
+
+  return ApiService.get<GetPostsResponse>('/posts', params);
+};
+
+export const getPostsByTag = async ({
+  selectedTag,
+  limit,
+  skip,
+  sortBy,
+  sortOrder,
+}: ParamsWithTag): Promise<GetPostsResponse> => {
+  const params = {
+    limit: limit?.toString() || '0',
+    skip: skip?.toString() || '0',
+    sortBy: sortBy || '',
+    sortOrder: sortOrder || SORT_ORDER.ASC,
+  };
+
+  return ApiService.get<GetPostsResponse>(`/posts/tag/${selectedTag}`, params);
+};
+
+export const getPostsBySearch = async ({
+  searchQuery,
+  limit,
+  skip,
+  sortBy,
+  sortOrder,
+}: ParamsWithSearch): Promise<GetPostsResponse> => {
+  const params = {
+    limit: limit?.toString() || '0',
+    skip: skip?.toString() || '0',
+    searchQuery,
+    sortBy: sortBy || '',
+    sortOrder: sortOrder || SORT_ORDER.ASC,
+  };
+
+  return ApiService.get<GetPostsResponse>('/posts/search', params);
+};
+
+export const createPost = async (newPost: Omit<Post, 'id'>): Promise<Post> => {
+  return ApiService.post<Post>('/posts/add', newPost);
+};
+
+export const putPost = async (updatedPost: Post): Promise<Post> => {
+  return ApiService.put<Post>(`/posts/${updatedPost.id}`, updatedPost);
+};
+
+export const deletePost = async (postId: number): Promise<DeletedPost> => {
+  return ApiService.delete(`/posts/${postId}`);
+};
diff --git a/final_src/final_src/5_entities/post/post.constant.ts b/final_src/final_src/5_entities/post/post.constant.ts
new file mode 100644
index 000000000..cdbe5654d
--- /dev/null
+++ b/final_src/final_src/5_entities/post/post.constant.ts
@@ -0,0 +1,4 @@
+export const POST_CONSTANTS = {
+  DEFAULT_LIMIT: 10,
+  DEFAULT_SKIP: 0,
+} as const;
diff --git a/final_src/final_src/5_entities/post/post.model.ts b/final_src/final_src/5_entities/post/post.model.ts
new file mode 100644
index 000000000..93e32aeaf
--- /dev/null
+++ b/final_src/final_src/5_entities/post/post.model.ts
@@ -0,0 +1,5 @@
+// Post 엔티티의 순수한 비즈니스 로직만 포함
+export const postModel = {
+  // Post 관련 순수 함수들만 정의
+  // 다른 엔티티와의 조합 로직은 Features 레이어로 이동
+};
diff --git a/final_src/final_src/5_entities/post/post.queries.ts b/final_src/final_src/5_entities/post/post.queries.ts
new file mode 100644
index 000000000..8298c5682
--- /dev/null
+++ b/final_src/final_src/5_entities/post/post.queries.ts
@@ -0,0 +1,195 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { queryKeys } from '@/shared/lib';
+import { useCachedPostsQueryKey } from '@/shared/lib/hooks/useCachedPostsQueryKey';
+import { MutationProps } from '@/shared/types';
+
+import {
+  createPost,
+  deletePost,
+  getPosts,
+  getPostsBySearch,
+  getPostsByTag,
+  putPost,
+} from './post.api';
+import {
+  BaseFilterParams,
+  GetPostsResponse,
+  ParamsWithSearch,
+  ParamsWithTag,
+  Post,
+} from './post.type';
+
+export const useGetPostsQuery = (params: BaseFilterParams) => {
+  return useQuery({
+    queryKey: queryKeys.posts.list(params),
+    queryFn: () => getPosts(params),
+  });
+};
+
+export const useGetPostsByTagQuery = (params: ParamsWithTag) => {
+  return useQuery({
+    queryKey: queryKeys.posts.list(params),
+    queryFn: () => getPostsByTag(params),
+    enabled: !!params.selectedTag && params.selectedTag !== 'all',
+  });
+};
+
+export const useGetPostsBySearchQuery = (params: ParamsWithSearch) => {
+  return useQuery({
+    queryKey: queryKeys.posts.list(params),
+    queryFn: () => getPostsBySearch(params),
+    enabled: !!params.searchQuery && params.searchQuery.trim() !== '',
+  });
+};
+
+export const useCreatePostMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<Post>) => {
+  const queryClient = useQueryClient();
+  const cachedPostsQueryKey = useCachedPostsQueryKey();
+
+  return useMutation({
+    mutationFn: (newPost: Omit<Post, 'id'>) => createPost(newPost),
+    onMutate: async newPost => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.posts.all,
+      });
+
+      const previousPosts =
+        queryClient.getQueryData<GetPostsResponse>(cachedPostsQueryKey);
+
+      // ! 이전 데이터 캐시에 새 게시물 추가하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(cachedPostsQueryKey, (old: any) => {
+        const postToAdd: Post = {
+          ...newPost,
+          id: previousPosts?.total ? previousPosts.total + 1 : 1,
+        };
+
+        if (!old) {
+          return {
+            posts: [postToAdd],
+            total: 1,
+            skip: 0,
+            limit: 10,
+          };
+        }
+
+        return {
+          ...old,
+          posts: [postToAdd, ...(old.posts || [])],
+        };
+      });
+
+      return { previousPosts };
+    },
+    onError: (error, __, context) => {
+      queryClient.setQueryData(cachedPostsQueryKey, context?.previousPosts);
+      onError?.(error);
+    },
+    onSuccess: (data, _, { previousPosts }) => {
+      // ! 성공 시 이전 데이터에 성공 데이터 추가
+      queryClient.setQueryData(cachedPostsQueryKey, (old: any) => {
+        return {
+          ...old,
+          posts: [data, ...(previousPosts?.posts || [])],
+        };
+      });
+      onSuccess?.(data);
+    },
+  });
+};
+
+export const usePutPostMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<Post>) => {
+  const queryClient = useQueryClient();
+  const cachedPostsQueryKey = useCachedPostsQueryKey();
+
+  return useMutation({
+    mutationFn: (updatedPost: Post) => putPost(updatedPost),
+    onMutate: async updatedPost => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.posts.all,
+      });
+
+      const previousPosts =
+        queryClient.getQueryData<GetPostsResponse>(cachedPostsQueryKey);
+
+      // ! 이전 데이터 캐시에 수정된 게시물 업데이트하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(cachedPostsQueryKey, (old: any) => {
+        if (!old || !old.posts) {
+          return old;
+        }
+
+        return {
+          ...old,
+          posts: old.posts.map((post: Post) =>
+            post.id === updatedPost.id ? updatedPost : post
+          ),
+        };
+      });
+
+      return { previousPosts };
+    },
+    onError: (error, __, context) => {
+      queryClient.setQueryData(cachedPostsQueryKey, context?.previousPosts);
+      onError?.(error);
+    },
+    onSuccess: (data, updatedPost, { previousPosts }) => {
+      // ! 성공 시 이전 데이터에 성공 데이터로 수정
+      queryClient.setQueryData(cachedPostsQueryKey, (old: any) => {
+        return {
+          ...old,
+          posts: previousPosts?.posts.map((post: Post) =>
+            post.id === updatedPost.id ? updatedPost : post
+          ),
+        };
+      });
+      onSuccess?.(data);
+    },
+  });
+};
+
+export const useDeletePostMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<Post>) => {
+  const queryClient = useQueryClient();
+  const cachedPostsQueryKey = useCachedPostsQueryKey();
+
+  return useMutation({
+    mutationFn: (postId: number) => deletePost(postId),
+    onMutate: async postId => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.posts.all,
+      });
+
+      const previousPosts =
+        queryClient.getQueryData<GetPostsResponse>(cachedPostsQueryKey);
+
+      // ! 이전 데이터 캐시에 삭제된 게시물 제외하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(cachedPostsQueryKey, (old: any) => {
+        if (!old || !old.posts) {
+          return old;
+        }
+        return {
+          ...old,
+          posts: old.posts.filter((post: Post) => post.id !== postId),
+        };
+      });
+
+      return { previousPosts };
+    },
+
+    onError: (error, __, context) => {
+      queryClient.setQueryData(cachedPostsQueryKey, context?.previousPosts);
+      onError?.(error);
+    },
+    onSuccess: data => {
+      onSuccess?.(data);
+    },
+  });
+};
diff --git a/final_src/final_src/5_entities/post/post.type.ts b/final_src/final_src/5_entities/post/post.type.ts
new file mode 100644
index 000000000..dda18e22c
--- /dev/null
+++ b/final_src/final_src/5_entities/post/post.type.ts
@@ -0,0 +1,63 @@
+import { EmptyStringable, PaginationMeta, SortOrder } from '@/shared/types';
+
+export interface Post {
+  id: number;
+  title: string;
+  body: string;
+  userId: number;
+  tags?: string[];
+  reactions?: PostReactions;
+}
+
+export interface DeletedPost {
+  id: number;
+  title: string;
+  body: string;
+  tags: string[];
+  reactions: PostReactions;
+  views: number;
+  userId: number;
+  isDeleted: boolean;
+  deletedOn: string;
+}
+
+export interface PostReactions {
+  likes: number;
+  dislikes: number;
+}
+
+export interface GetPostsResponse extends PaginationMeta {
+  posts: Post[];
+}
+
+export interface BaseFilterParams {
+  limit: number;
+  skip: number;
+  sortBy?: EmptyStringable<SORT_BY>;
+  sortOrder?: SortOrder;
+}
+
+export interface AllFilterParams extends BaseFilterParams {
+  searchQuery: EmptyStringable<string>;
+  selectedTag: EmptyStringable<string>;
+}
+
+export interface ParamsWithTag extends BaseFilterParams {
+  selectedTag: EmptyStringable<string>;
+}
+
+export interface ParamsWithSearch extends BaseFilterParams {
+  searchQuery: EmptyStringable<string>;
+}
+
+export enum SORT_ORDER {
+  ASC = 'asc',
+  DESC = 'desc',
+}
+
+export enum SORT_BY {
+  NONE = 'none',
+  ID = 'id',
+  TITLE = 'title',
+  REACTIONS = 'reactions',
+}
diff --git a/final_src/final_src/5_entities/tag/index.ts b/final_src/final_src/5_entities/tag/index.ts
new file mode 100644
index 000000000..9673f1651
--- /dev/null
+++ b/final_src/final_src/5_entities/tag/index.ts
@@ -0,0 +1,3 @@
+export * from './tag.api';
+export * from './tag.queries';
+export * from './tag.type';
diff --git a/final_src/final_src/5_entities/tag/tag.api.ts b/final_src/final_src/5_entities/tag/tag.api.ts
new file mode 100644
index 000000000..708f6b900
--- /dev/null
+++ b/final_src/final_src/5_entities/tag/tag.api.ts
@@ -0,0 +1,6 @@
+import { Tag } from '@/entities/tag';
+import { ApiService } from '@/shared/lib';
+
+export const getTags = async (): Promise<Tag[]> => {
+  return ApiService.get<Tag[]>('/posts/tags');
+};
diff --git a/final_src/final_src/5_entities/tag/tag.queries.ts b/final_src/final_src/5_entities/tag/tag.queries.ts
new file mode 100644
index 000000000..c6495791f
--- /dev/null
+++ b/final_src/final_src/5_entities/tag/tag.queries.ts
@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getTags } from '@/entities/tag';
+import { queryKeys } from '@/shared/lib';
+
+export const useGetTagsQuery = () => {
+  return useQuery({
+    queryKey: queryKeys.tags.lists(),
+    queryFn: getTags,
+  });
+};
diff --git a/final_src/final_src/5_entities/tag/tag.type.ts b/final_src/final_src/5_entities/tag/tag.type.ts
new file mode 100644
index 000000000..0d066ec88
--- /dev/null
+++ b/final_src/final_src/5_entities/tag/tag.type.ts
@@ -0,0 +1,7 @@
+interface Tag {
+  name: string;
+  slug: string;
+  url: string;
+}
+
+export type { Tag };
diff --git a/final_src/final_src/5_entities/user/index.ts b/final_src/final_src/5_entities/user/index.ts
new file mode 100644
index 000000000..ae6eaea64
--- /dev/null
+++ b/final_src/final_src/5_entities/user/index.ts
@@ -0,0 +1,3 @@
+export * from './user.type';
+export * from './user.api';
+export * from './user.queries';
diff --git a/final_src/final_src/5_entities/user/user.api.ts b/final_src/final_src/5_entities/user/user.api.ts
new file mode 100644
index 000000000..bb1a85140
--- /dev/null
+++ b/final_src/final_src/5_entities/user/user.api.ts
@@ -0,0 +1,36 @@
+import { User, UserPick } from '@/entities/user';
+import { ApiService } from '@/shared/lib';
+import { PaginationMeta } from '@/shared/types';
+
+export interface GetUsersResponse<T> extends PaginationMeta {
+  users: T[];
+}
+
+export interface GetUsersParams<K extends keyof User> {
+  limit: number;
+  select: K[];
+}
+
+// select에 따라 UserPick 타입을 동적으로 만들 수 없으므로,
+// 반환 타입을 런타임에 맞게 제네릭으로 받도록 getUsers를 제네릭 함수로 변경합니다.
+
+export const getUsers = async <K extends keyof User>({
+  limit,
+  select,
+}: GetUsersParams<K>): Promise<GetUsersResponse<UserPick<K>>> => {
+  const params = {
+    limit: limit.toString(),
+    select: select.join(','),
+  };
+  return ApiService.get<GetUsersResponse<UserPick<K>>>('/users', params);
+};
+
+export const postUser = async () => {};
+
+export const putUser = async () => {};
+
+export const deleteUser = async () => {};
+
+export const getUser = async (userId: number): Promise<User> => {
+  return ApiService.get<User>(`/users/${userId}`);
+};
diff --git a/final_src/final_src/5_entities/user/user.constant.ts b/final_src/final_src/5_entities/user/user.constant.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/final_src/final_src/5_entities/user/user.model.ts b/final_src/final_src/5_entities/user/user.model.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/final_src/final_src/5_entities/user/user.queries.ts b/final_src/final_src/5_entities/user/user.queries.ts
new file mode 100644
index 000000000..0921cf30f
--- /dev/null
+++ b/final_src/final_src/5_entities/user/user.queries.ts
@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getUser, getUsers, GetUsersParams, User } from '@/entities/user';
+import { queryKeys } from '@/shared/lib';
+import { Nullable } from '@/shared/types';
+
+export const useGetUsersQuery = <K extends keyof User>(
+  params: GetUsersParams<K>
+) => {
+  return useQuery({
+    queryKey: queryKeys.users.list(params),
+    queryFn: () => getUsers(params),
+  });
+};
+
+export const useGetUserQuery = (userId: Nullable<number>) => {
+  return useQuery({
+    queryKey: queryKeys.users.detail(userId ?? 0),
+    queryFn: () => getUser(userId ?? 0),
+    enabled: !!userId,
+  });
+};
diff --git a/final_src/final_src/5_entities/user/user.type.ts b/final_src/final_src/5_entities/user/user.type.ts
new file mode 100644
index 000000000..d4a23b87e
--- /dev/null
+++ b/final_src/final_src/5_entities/user/user.type.ts
@@ -0,0 +1,24 @@
+export interface BaseUser {
+  id: number;
+  image: string;
+  username: string;
+}
+
+export interface User extends BaseUser {
+  firstName: string;
+  lastName: string;
+  age: number;
+  email: string;
+  phone: string;
+  address: {
+    address: string;
+    city: string;
+    state: string;
+  };
+  company: {
+    name: string;
+    title: string;
+  };
+}
+
+export type UserPick<T extends keyof User> = Pick<User, T>;
diff --git a/final_src/final_src/6_shared/api/axios.ts b/final_src/final_src/6_shared/api/axios.ts
new file mode 100644
index 000000000..a7459b1e0
--- /dev/null
+++ b/final_src/final_src/6_shared/api/axios.ts
@@ -0,0 +1,9 @@
+import axios from 'axios';
+
+export const axiosInstance = axios.create({
+  baseURL: '/api',
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
diff --git a/final_src/final_src/6_shared/assets/react.svg b/final_src/final_src/6_shared/assets/react.svg
new file mode 100644
index 000000000..6c87de9bb
--- /dev/null
+++ b/final_src/final_src/6_shared/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/final_src/final_src/6_shared/constants/api.ts b/final_src/final_src/6_shared/constants/api.ts
new file mode 100644
index 000000000..ab201b693
--- /dev/null
+++ b/final_src/final_src/6_shared/constants/api.ts
@@ -0,0 +1,19 @@
+/**
+ * API 관련 상수 정의
+ *
+ * API 엔드포인트, 기본값, 쿼리 파라미터 등을 관리
+ */
+
+export const API_CONSTANTS = {
+  // 기본 사용자 ID
+  DEFAULT_USER_ID: 1,
+
+  // 기본 반응 수치
+  REACTIONS: {
+    DEFAULT_LIKES: 0,
+    DEFAULT_DISLIKES: 0,
+    LIKE_INCREMENT: 1,
+  },
+} as const;
+
+export type APIConstants = typeof API_CONSTANTS;
diff --git a/final_src/final_src/6_shared/constants/index.ts b/final_src/final_src/6_shared/constants/index.ts
new file mode 100644
index 000000000..beadb7376
--- /dev/null
+++ b/final_src/final_src/6_shared/constants/index.ts
@@ -0,0 +1,2 @@
+export * from './ui';
+export * from './api';
diff --git a/final_src/final_src/6_shared/constants/ui.ts b/final_src/final_src/6_shared/constants/ui.ts
new file mode 100644
index 000000000..4445d87b7
--- /dev/null
+++ b/final_src/final_src/6_shared/constants/ui.ts
@@ -0,0 +1,45 @@
+/**
+ * UI 관련 상수 정의
+ *
+ * 전역적으로 사용되는 UI 요소들의 크기, 스타일, 설정값 등을 관리
+ */
+
+export const UI_CONSTANTS = {
+  // 텍스트 영역 행 수
+  TEXTAREA_ROWS: {
+    LARGE: 30, // 게시물 작성용
+    MEDIUM: 15, // 게시물 수정용
+    SMALL: 5, // 댓글 작성용
+  },
+
+  // 아이콘 크기 (Tailwind CSS 클래스)
+  ICON_SIZES: {
+    SMALL: 'w-3 h-3', // 댓글 버튼용
+    MEDIUM: 'w-4 h-4', // 일반 버튼용
+    LARGE: 'w-8 h-8', // 프로필 이미지용
+  },
+
+  // 페이지네이션 설정
+  PAGINATION: {
+    DEFAULT_LIMIT: 10,
+    DEFAULT_SKIP: 0,
+    LIMIT_OPTIONS: [10, 20, 30] as const,
+  },
+
+  // 스타일링 관련
+  STYLES: {
+    TAG_SELECTED: 'text-white bg-blue-500 hover:bg-blue-600',
+    TAG_DEFAULT: 'text-blue-800 bg-blue-100 hover:bg-blue-200',
+    TAG_SIZE: 'px-1 text-[9px] font-semibold rounded-[4px] cursor-pointer',
+  },
+
+  // 레이아웃 관련
+  LAYOUT: {
+    SPACE_Y_1: 'space-y-1',
+    SPACE_Y_2: 'space-y-2',
+    FLEX_GAP_1: 'gap-1',
+    FLEX_GAP_2: 'gap-2',
+  },
+} as const;
+
+export type UIConstants = typeof UI_CONSTANTS;
diff --git a/final_src/final_src/6_shared/lib/api/apiService.ts b/final_src/final_src/6_shared/lib/api/apiService.ts
new file mode 100644
index 000000000..6665f9fa1
--- /dev/null
+++ b/final_src/final_src/6_shared/lib/api/apiService.ts
@@ -0,0 +1,24 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { apiClient } from './axios';
+
+export const ApiService = {
+  get: async <T>(url: string, params?: Record<string, any>): Promise<T> => {
+    const response = await apiClient.get<T>(url, { params });
+    return response.data;
+  },
+
+  post: async <T>(url: string, data?: any): Promise<T> => {
+    const response = await apiClient.post<T>(url, data);
+    return response.data;
+  },
+
+  put: async <T>(url: string, data?: any): Promise<T> => {
+    const response = await apiClient.put<T>(url, data);
+    return response.data;
+  },
+
+  delete: async <T>(url: string): Promise<T> => {
+    const response = await apiClient.delete<T>(url);
+    return response.data;
+  },
+};
diff --git a/final_src/final_src/6_shared/lib/api/axios.ts b/final_src/final_src/6_shared/lib/api/axios.ts
new file mode 100644
index 000000000..975c604e9
--- /dev/null
+++ b/final_src/final_src/6_shared/lib/api/axios.ts
@@ -0,0 +1,12 @@
+import axios from 'axios';
+
+const baseURL = 'https://dummyjson.com';
+
+// 기본 axios 인스턴스 생성
+export const apiClient = axios.create({
+  baseURL,
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
diff --git a/final_src/final_src/6_shared/lib/api/index.ts b/final_src/final_src/6_shared/lib/api/index.ts
new file mode 100644
index 000000000..9e8a50de0
--- /dev/null
+++ b/final_src/final_src/6_shared/lib/api/index.ts
@@ -0,0 +1,2 @@
+export { apiClient } from './axios';
+export { ApiService } from './apiService';
diff --git a/final_src/final_src/6_shared/lib/hooks/index.ts b/final_src/final_src/6_shared/lib/hooks/index.ts
new file mode 100644
index 000000000..5a6a3c3ed
--- /dev/null
+++ b/final_src/final_src/6_shared/lib/hooks/index.ts
@@ -0,0 +1,3 @@
+export * from './useCachedPostsQueryKey';
+export * from './usePostsFilterStore';
+export * from './useDebounce';
diff --git a/final_src/final_src/6_shared/lib/hooks/useCachedPostsQueryKey.ts b/final_src/final_src/6_shared/lib/hooks/useCachedPostsQueryKey.ts
new file mode 100644
index 000000000..7ef629d11
--- /dev/null
+++ b/final_src/final_src/6_shared/lib/hooks/useCachedPostsQueryKey.ts
@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+
+import {
+  AllFilterParams,
+  BaseFilterParams,
+  ParamsWithSearch,
+  ParamsWithTag,
+} from '@/entities/post';
+
+import { queryKeys } from '../query/queryKeys';
+import { POST_QUERY_TYPE } from '../store/postsFilterStore';
+import { usePostsFilterStore } from './usePostsFilterStore';
+
+export const useCachedPostsQueryKey = () => {
+  const {
+    queryType,
+    filters: { searchQuery, selectedTag, sortBy, sortOrder },
+    pagination: { limit, skip },
+  } = usePostsFilterStore();
+
+  const [params, setParams] = useState<Partial<AllFilterParams>>({
+    limit,
+    skip,
+    sortBy,
+    sortOrder,
+  });
+
+  useEffect(() => {
+    if (queryType === POST_QUERY_TYPE.SEARCH) {
+      const paramsWithSearch: ParamsWithSearch = {
+        limit,
+        skip,
+        sortBy,
+        sortOrder,
+        searchQuery,
+      };
+      setParams(paramsWithSearch);
+      return;
+    }
+
+    if (queryType === POST_QUERY_TYPE.TAG) {
+      const paramsWithTag: ParamsWithTag = {
+        limit,
+        skip,
+        sortBy,
+        sortOrder,
+        selectedTag,
+      };
+      setParams(paramsWithTag);
+      return;
+    }
+
+    const baseParams: BaseFilterParams = {
+      limit,
+      skip,
+      sortBy,
+      sortOrder,
+    };
+    setParams(baseParams);
+  }, [queryType, limit, skip, sortBy, sortOrder, searchQuery, selectedTag]);
+
+  return queryKeys.posts.list(params);
+};
diff --git a/final_src/final_src/6_shared/lib/hooks/useDebounce.ts b/final_src/final_src/6_shared/lib/hooks/useDebounce.ts
new file mode 100644
index 000000000..aaa1f977f
--- /dev/null
+++ b/final_src/final_src/6_shared/lib/hooks/useDebounce.ts
@@ -0,0 +1,24 @@
+import { useCallback, useRef } from 'react';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const useDebounce = <T extends (...args: any[]) => any>(
+  callback: T,
+  delay: number
+) => {
+  const timeoutRef = useRef<number | undefined>(undefined);
+
+  const debouncedCallback = useCallback(
+    (...args: Parameters<T>) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      timeoutRef.current = window.setTimeout(() => {
+        callback(...args);
+      }, delay);
+    },
+    [callback, delay]
+  );
+
+  return debouncedCallback;
+};
diff --git a/final_src/final_src/6_shared/lib/hooks/usePostsFilterStore.ts b/final_src/final_src/6_shared/lib/hooks/usePostsFilterStore.ts
new file mode 100644
index 000000000..c1fca7fd8
--- /dev/null
+++ b/final_src/final_src/6_shared/lib/hooks/usePostsFilterStore.ts
@@ -0,0 +1,72 @@
+import { useEffect } from 'react';
+
+import { useAtom } from 'jotai';
+
+import {
+  filtersAtom,
+  limitAtom,
+  paginationAtom,
+  queryTypeAtom,
+  searchQueryAtom,
+  selectedTagAtom,
+  skipAtom,
+  sortByAtom,
+  sortOrderAtom,
+  useURLSync,
+} from '../store/postsFilterStore';
+
+export const usePostsFilterStore = () => {
+  const [queryType, setQueryType] = useAtom(queryTypeAtom);
+  const [searchQuery, setSearchQuery] = useAtom(searchQueryAtom);
+  const [selectedTag, setSelectedTag] = useAtom(selectedTagAtom);
+  const [sortBy, setSortBy] = useAtom(sortByAtom);
+  const [sortOrder, setSortOrder] = useAtom(sortOrderAtom);
+  const [skip, setSkip] = useAtom(skipAtom);
+  const [limit, setLimit] = useAtom(limitAtom);
+  const [pagination, setPagination] = useAtom(paginationAtom);
+  const [filters, setFilters] = useAtom(filtersAtom);
+
+  const { updateURL, syncFromURL } = useURLSync();
+
+  // 컴포넌트 마운트 시 URL에서 상태 복원
+  useEffect(() => {
+    syncFromURL();
+  }, []);
+
+  // 필터 상태 변경 시 URL 업데이트
+  useEffect(() => {
+    updateURL();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery, selectedTag, sortBy, sortOrder, skip, limit]);
+
+  // 브라우저 뒤로가기/앞으로가기 처리
+  useEffect(() => {
+    const handlePopState = () => {
+      syncFromURL();
+    };
+
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, []);
+
+  return {
+    queryType,
+    setQueryType,
+    searchQuery,
+    setSearchQuery,
+    selectedTag,
+    setSelectedTag,
+    sortBy,
+    setSortBy,
+    sortOrder,
+    setSortOrder,
+    skip,
+    setSkip,
+    limit,
+    setLimit,
+    pagination,
+    setPagination,
+    filters,
+    setFilters,
+  };
+};
diff --git a/final_src/final_src/6_shared/lib/index.ts b/final_src/final_src/6_shared/lib/index.ts
new file mode 100644
index 000000000..6fa5065a2
--- /dev/null
+++ b/final_src/final_src/6_shared/lib/index.ts
@@ -0,0 +1,14 @@
+// API - HTTP 클라이언트 및 API 관련 유틸리티
+export * from './api';
+
+// Hooks - 재사용 가능한 커스텀 훅
+export * from './hooks';
+
+// Query - React Query 관련 설정 및 유틸리티
+export * from './query';
+
+// Store - 상태 관리 관련 설정 및 스토어
+export * from './store';
+
+// Utils - 공통 유틸리티 함수
+export * from './utils';
diff --git a/final_src/final_src/6_shared/lib/query/index.ts b/final_src/final_src/6_shared/lib/query/index.ts
new file mode 100644
index 000000000..e08035cc8
--- /dev/null
+++ b/final_src/final_src/6_shared/lib/query/index.ts
@@ -0,0 +1 @@
+export * from './queryKeys';
diff --git a/final_src/final_src/6_shared/lib/query/queryKeys.ts b/final_src/final_src/6_shared/lib/query/queryKeys.ts
new file mode 100644
index 000000000..6e5eb276d
--- /dev/null
+++ b/final_src/final_src/6_shared/lib/query/queryKeys.ts
@@ -0,0 +1,55 @@
+import { AllFilterParams } from '@/entities/post';
+import { GetUsersParams, User } from '@/entities/user';
+
+export const QUERY_DOMAINS = {
+  POSTS: 'posts',
+  USERS: 'users',
+  COMMENTS: 'comments',
+  TAGS: 'tags',
+} as const;
+
+export const QUERY_OPERATIONS = {
+  LIST: 'list',
+  DETAIL: 'detail',
+  INFINITE: 'infinite',
+  SEARCH: 'search',
+  COUNT: 'count',
+} as const;
+
+const postQueryKeys = {
+  all: [QUERY_DOMAINS.POSTS] as const,
+
+  lists: () => [QUERY_DOMAINS.POSTS, QUERY_OPERATIONS.LIST] as const,
+  list: (params: Partial<AllFilterParams>) =>
+    [...postQueryKeys.lists(), params] as const,
+} as const;
+
+const userQueryKeys = {
+  all: [QUERY_DOMAINS.USERS] as const,
+
+  lists: () => [QUERY_DOMAINS.USERS, QUERY_OPERATIONS.LIST] as const,
+  list: (params: GetUsersParams<keyof User>) =>
+    [QUERY_DOMAINS.USERS, QUERY_OPERATIONS.LIST, params] as const,
+  details: () => [...userQueryKeys.lists(), 'detail'] as const,
+  detail: (userId: number) => [...userQueryKeys.details(), userId] as const,
+} as const;
+
+const tagQueryKeys = {
+  all: [QUERY_DOMAINS.TAGS] as const,
+
+  lists: () => [QUERY_DOMAINS.TAGS, QUERY_OPERATIONS.LIST] as const,
+} as const;
+
+const commentQueryKeys = {
+  all: [QUERY_DOMAINS.COMMENTS] as const,
+
+  lists: () => [QUERY_DOMAINS.COMMENTS, QUERY_OPERATIONS.LIST] as const,
+  list: (postId: number) => [...commentQueryKeys.lists(), postId] as const,
+} as const;
+
+export const queryKeys = {
+  posts: postQueryKeys,
+  users: userQueryKeys,
+  tags: tagQueryKeys,
+  comments: commentQueryKeys,
+} as const;
diff --git a/final_src/final_src/6_shared/lib/store/UIStore.ts b/final_src/final_src/6_shared/lib/store/UIStore.ts
new file mode 100644
index 000000000..8711ce404
--- /dev/null
+++ b/final_src/final_src/6_shared/lib/store/UIStore.ts
@@ -0,0 +1,134 @@
+import { atom, useAtom } from 'jotai';
+
+import { Comment } from '@/entities/comment';
+import { Post } from '@/entities/post';
+import { User } from '@/entities/user';
+import { Nullable } from '@/shared/types';
+
+export interface UIState {
+  showAddDialog: boolean;
+  showEditDialog: boolean;
+  showAddCommentDialog: boolean;
+  showEditCommentDialog: boolean;
+  showPostDetailDialog: boolean;
+  showUserModifyDialog: boolean;
+  selectedPost: Nullable<Post>;
+  selectedComment: Nullable<Comment>;
+  selectedUser: Nullable<Partial<User>>;
+}
+
+const initialUIState: UIState = {
+  showAddDialog: false,
+  showEditDialog: false,
+  showAddCommentDialog: false,
+  showEditCommentDialog: false,
+  showPostDetailDialog: false,
+  showUserModifyDialog: false,
+  selectedPost: null,
+  selectedComment: null,
+  selectedUser: null,
+};
+
+export const dialogAtom = atom<UIState>(initialUIState);
+
+const showAddDialogAtom = atom(
+  get => get(dialogAtom).showAddDialog,
+  (get, set, newValue: boolean) => {
+    set(dialogAtom, { ...get(dialogAtom), showAddDialog: newValue });
+  }
+);
+
+const showEditDialogAtom = atom(
+  get => get(dialogAtom).showEditDialog,
+  (get, set, newValue: boolean) => {
+    set(dialogAtom, { ...get(dialogAtom), showEditDialog: newValue });
+  }
+);
+
+const showAddCommentDialogAtom = atom(
+  get => get(dialogAtom).showAddCommentDialog,
+  (get, set, newValue: boolean) => {
+    set(dialogAtom, { ...get(dialogAtom), showAddCommentDialog: newValue });
+  }
+);
+
+const showEditCommentDialogAtom = atom(
+  get => get(dialogAtom).showEditCommentDialog,
+  (get, set, newValue: boolean) => {
+    set(dialogAtom, { ...get(dialogAtom), showEditCommentDialog: newValue });
+  }
+);
+
+const showPostDetailDialogAtom = atom(
+  get => get(dialogAtom).showPostDetailDialog,
+  (get, set, newValue: boolean) => {
+    set(dialogAtom, { ...get(dialogAtom), showPostDetailDialog: newValue });
+  }
+);
+
+const showUserModalAtom = atom(
+  get => get(dialogAtom).showUserModifyDialog,
+  (get, set, newValue: boolean) => {
+    set(dialogAtom, { ...get(dialogAtom), showUserModifyDialog: newValue });
+  }
+);
+
+const selectedPostAtom = atom(
+  get => get(dialogAtom).selectedPost,
+  (get, set, newValue: Nullable<Post>) => {
+    set(dialogAtom, { ...get(dialogAtom), selectedPost: newValue });
+  }
+);
+
+const selectedCommentAtom = atom(
+  get => get(dialogAtom).selectedComment,
+  (get, set, newValue: Nullable<Comment>) => {
+    set(dialogAtom, { ...get(dialogAtom), selectedComment: newValue });
+  }
+);
+
+const selectedUserAtom = atom(
+  get => get(dialogAtom).selectedUser,
+  (get, set, newValue: Nullable<User>) => {
+    set(dialogAtom, { ...get(dialogAtom), selectedUser: newValue });
+  }
+);
+
+export const useUIStore = () => {
+  const [showAddDialog, setShowAddDialog] = useAtom(showAddDialogAtom);
+  const [showEditDialog, setShowEditDialog] = useAtom(showEditDialogAtom);
+  const [showAddCommentDialog, setShowAddCommentDialog] = useAtom(
+    showAddCommentDialogAtom
+  );
+  const [showEditCommentDialog, setShowEditCommentDialog] = useAtom(
+    showEditCommentDialogAtom
+  );
+  const [showPostDetailDialog, setShowPostDetailDialog] = useAtom(
+    showPostDetailDialogAtom
+  );
+  const [showUserModal, setShowUserModal] = useAtom(showUserModalAtom);
+  const [selectedPost, setSelectedPost] = useAtom(selectedPostAtom);
+  const [selectedComment, setSelectedComment] = useAtom(selectedCommentAtom);
+  const [selectedUser, setSelectedUser] = useAtom(selectedUserAtom);
+
+  return {
+    showAddDialog,
+    setShowAddDialog,
+    showEditDialog,
+    setShowEditDialog,
+    showAddCommentDialog,
+    setShowAddCommentDialog,
+    showEditCommentDialog,
+    setShowEditCommentDialog,
+    showPostDetailDialog,
+    setShowPostDetailDialog,
+    showUserModal,
+    setShowUserModal,
+    selectedPost,
+    setSelectedPost,
+    selectedComment,
+    setSelectedComment,
+    selectedUser,
+    setSelectedUser,
+  };
+};
diff --git a/final_src/final_src/6_shared/lib/store/index.ts b/final_src/final_src/6_shared/lib/store/index.ts
new file mode 100644
index 000000000..8b3807bec
--- /dev/null
+++ b/final_src/final_src/6_shared/lib/store/index.ts
@@ -0,0 +1,2 @@
+export * from './postsFilterStore';
+export * from './UIStore';
diff --git a/final_src/final_src/6_shared/lib/store/postsFilterStore.ts b/final_src/final_src/6_shared/lib/store/postsFilterStore.ts
new file mode 100644
index 000000000..2eb7515d1
--- /dev/null
+++ b/final_src/final_src/6_shared/lib/store/postsFilterStore.ts
@@ -0,0 +1,223 @@
+import { atom, useAtom } from 'jotai';
+
+import { AllFilterParams, SORT_BY } from '@/entities/post';
+import { UI_CONSTANTS } from '@/shared/constants';
+import { EmptyStringable, PaginationMeta, SortOrder } from '@/shared/types';
+
+export enum POST_QUERY_TYPE {
+  BASE = 'base',
+  SEARCH = 'search',
+  TAG = 'tag',
+}
+
+export interface PostsFilterState {
+  queryType: POST_QUERY_TYPE;
+  filters: Omit<AllFilterParams, 'limit' | 'skip'>;
+  pagination: {
+    limit: number;
+    skip: number;
+    total: number;
+  };
+}
+
+const initialFilterState: PostsFilterState = {
+  queryType: POST_QUERY_TYPE.BASE,
+  filters: {
+    searchQuery: '',
+    selectedTag: '',
+    sortBy: '',
+    sortOrder: SortOrder.ASC,
+  },
+  pagination: {
+    limit: UI_CONSTANTS.PAGINATION.DEFAULT_LIMIT,
+    skip: UI_CONSTANTS.PAGINATION.DEFAULT_SKIP,
+    total: 0,
+  },
+};
+
+// URL에서 초기 상태를 읽어오는 함수
+const getInitialStateFromURL = (): PostsFilterState => {
+  if (typeof window === 'undefined') return initialFilterState;
+
+  const params = new URLSearchParams(window.location.search);
+  return {
+    queryType: POST_QUERY_TYPE.BASE,
+    filters: {
+      searchQuery: params.get('search') || '',
+      selectedTag: params.get('tag') || '',
+      sortBy: (params.get('sortBy') as SORT_BY) || '',
+      sortOrder: (params.get('sortOrder') as SortOrder) || SortOrder.ASC,
+    },
+    pagination: {
+      skip: parseInt(params.get('skip') || '0'),
+      limit: parseInt(params.get('limit') || '10'),
+      total: parseInt(params.get('total') || '0'),
+    },
+  };
+};
+
+export const postsFilterAtom = atom<PostsFilterState>(getInitialStateFromURL());
+
+// 개별 필터 atoms (더 세밀한 제어를 위해)
+export const searchQueryAtom = atom(
+  get => get(postsFilterAtom).filters.searchQuery,
+  (get, set, newValue: string) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      filters: {
+        ...get(postsFilterAtom).filters,
+        searchQuery: newValue,
+      },
+    });
+  }
+);
+
+export const selectedTagAtom = atom(
+  get => get(postsFilterAtom).filters.selectedTag,
+  (get, set, newValue: string) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      filters: {
+        ...get(postsFilterAtom).filters,
+        selectedTag: newValue,
+      },
+    });
+  }
+);
+
+export const sortByAtom = atom(
+  get => get(postsFilterAtom).filters.sortBy,
+  (get, set, newValue: EmptyStringable<SORT_BY>) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      filters: {
+        ...get(postsFilterAtom).filters,
+        sortBy: newValue,
+      },
+    });
+  }
+);
+
+export const sortOrderAtom = atom(
+  get => get(postsFilterAtom).filters.sortOrder,
+  (get, set, newValue: SortOrder) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      filters: {
+        ...get(postsFilterAtom).filters,
+        sortOrder: newValue,
+      },
+    });
+  }
+);
+
+export const limitAtom = atom(
+  get => get(postsFilterAtom).pagination.limit,
+  (get, set, newValue: number) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      pagination: {
+        ...get(postsFilterAtom).pagination,
+        limit: newValue,
+      },
+    });
+  }
+);
+
+export const skipAtom = atom(
+  get => get(postsFilterAtom).pagination.skip,
+  (get, set, newValue: number) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      pagination: {
+        ...get(postsFilterAtom).pagination,
+        skip: newValue,
+      },
+    });
+  }
+);
+
+export const resetFiltersAtom = atom(null, (_, set) => {
+  set(postsFilterAtom, initialFilterState);
+});
+
+export const paginationAtom = atom(
+  get => get(postsFilterAtom).pagination,
+  (get, set, newValue: PaginationMeta) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      pagination: newValue,
+    });
+  }
+);
+
+export const filtersAtom = atom(
+  get => get(postsFilterAtom).filters,
+  (get, set, newValue: AllFilterParams) => {
+    set(postsFilterAtom, { ...get(postsFilterAtom), filters: newValue });
+  }
+);
+
+export const queryTypeAtom = atom(
+  get => get(postsFilterAtom).queryType,
+  (get, set, newValue: POST_QUERY_TYPE) => {
+    set(postsFilterAtom, { ...get(postsFilterAtom), queryType: newValue });
+  }
+);
+
+// URL 동기화를 위한 atom
+export const urlSyncAtom = atom(
+  get => {
+    const filter = get(postsFilterAtom);
+    const params = new URLSearchParams();
+
+    const { searchQuery, selectedTag, sortBy, sortOrder } = filter.filters;
+    const { skip, limit } = filter.pagination;
+
+    if (skip > 0) params.set('skip', skip.toString());
+    if (limit !== 10) params.set('limit', limit.toString());
+    if (searchQuery) params.set('search', searchQuery);
+    if (sortBy) params.set('sortBy', sortBy);
+    if (sortOrder) params.set('sortOrder', sortOrder);
+    if (selectedTag) params.set('tag', selectedTag);
+
+    return params.toString();
+  },
+  (_, set, urlParams: string) => {
+    const params = new URLSearchParams(urlParams);
+    const newState: PostsFilterState = {
+      queryType: POST_QUERY_TYPE.BASE,
+      filters: {
+        searchQuery: params.get('search') || '',
+        selectedTag: params.get('tag') || '',
+        sortBy: (params.get('sortBy') as SORT_BY) || '',
+        sortOrder: (params.get('sortOrder') as SortOrder) || SortOrder.ASC,
+      },
+      pagination: {
+        skip: parseInt(params.get('skip') || '0'),
+        limit: parseInt(params.get('limit') || '10'),
+        total: parseInt(params.get('total') || '0'),
+      },
+    };
+
+    set(postsFilterAtom, newState);
+  }
+);
+
+export const useURLSync = () => {
+  const [urlSync, setUrlSync] = useAtom(urlSyncAtom);
+
+  const updateURL = () => {
+    const newURL = `${window.location.pathname}?${urlSync}`;
+    window.history.pushState({}, '', newURL);
+  };
+
+  const syncFromURL = () => {
+    const currentParams = window.location.search;
+    if (currentParams) {
+      setUrlSync(currentParams.substring(1));
+    }
+  };
+
+  return { updateURL, syncFromURL };
+};
diff --git a/final_src/final_src/6_shared/lib/utils/index.ts b/final_src/final_src/6_shared/lib/utils/index.ts
new file mode 100644
index 000000000..0926742d1
--- /dev/null
+++ b/final_src/final_src/6_shared/lib/utils/index.ts
@@ -0,0 +1,2 @@
+export * from './url.util';
+export * from './ui.util';
diff --git a/final_src/final_src/6_shared/lib/utils/ui.util.tsx b/final_src/final_src/6_shared/lib/utils/ui.util.tsx
new file mode 100644
index 000000000..07db97a45
--- /dev/null
+++ b/final_src/final_src/6_shared/lib/utils/ui.util.tsx
@@ -0,0 +1,21 @@
+export const highlightText = (text: string, highlight: string) => {
+  if (!text) return null;
+  if (!highlight.trim()) {
+    return <span>{text}</span>;
+  }
+
+  const regex = new RegExp(`(${highlight})`, 'gi');
+  const parts = text.split(regex);
+
+  return (
+    <span>
+      {parts.map((part, i) =>
+        regex.test(part) ? (
+          <mark key={i}>{part}</mark>
+        ) : (
+          <span key={i}>{part}</span>
+        )
+      )}
+    </span>
+  );
+};
diff --git a/final_src/final_src/6_shared/lib/utils/url.util.ts b/final_src/final_src/6_shared/lib/utils/url.util.ts
new file mode 100644
index 000000000..3f3f3c7b6
--- /dev/null
+++ b/final_src/final_src/6_shared/lib/utils/url.util.ts
@@ -0,0 +1,3 @@
+export const getUrlParams = (params: Record<string, string>) => {
+  return new URLSearchParams(params).toString();
+};
diff --git a/final_src/final_src/6_shared/types/api.type.ts b/final_src/final_src/6_shared/types/api.type.ts
new file mode 100644
index 000000000..81d16a56e
--- /dev/null
+++ b/final_src/final_src/6_shared/types/api.type.ts
@@ -0,0 +1,16 @@
+export interface PaginationMeta {
+  total: number;
+  skip: number;
+  limit: number;
+}
+
+export interface MutationProps<T> {
+  onError?: (error: Error) => void;
+  onSuccess?: (data: T) => void;
+}
+
+export interface ApiResponse<T> {
+  data: T;
+  message?: string;
+  code?: string;
+}
diff --git a/final_src/final_src/6_shared/types/index.ts b/final_src/final_src/6_shared/types/index.ts
new file mode 100644
index 000000000..f132a0e22
--- /dev/null
+++ b/final_src/final_src/6_shared/types/index.ts
@@ -0,0 +1,2 @@
+export * from './api.type';
+export * from './utility.type';
diff --git a/final_src/final_src/6_shared/types/utility.type.ts b/final_src/final_src/6_shared/types/utility.type.ts
new file mode 100644
index 000000000..620d835c2
--- /dev/null
+++ b/final_src/final_src/6_shared/types/utility.type.ts
@@ -0,0 +1,46 @@
+/**
+ * 공통으로 사용되는 유틸리티 타입들
+ */
+
+/**
+ * T 또는 null을 허용하는 타입
+ */
+export type Nullable<T> = T | null;
+
+export type EmptyStringable<T> = T | '';
+
+/**
+ * T 또는 undefined를 허용하는 타입
+ */
+export type Undefinable<T> = T | undefined;
+
+/**
+ * T, null, undefined 모두 허용하는 타입
+ */
+export type Optional<T> = T | null | undefined;
+
+/**
+ * 객체의 모든 속성을 옵셔널로 만드는 타입 (Partial과 유사하지만 명시적)
+ */
+export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+
+/**
+ * 객체의 특정 속성을 필수로 만드는 타입
+ */
+export type RequiredBy<T, K extends keyof T> = T & Required<Pick<T, K>>;
+
+/**
+ * 배열 타입에서 단일 요소 타입 추출
+ */
+export type ArrayElement<T extends readonly unknown[]> =
+  T extends readonly (infer U)[] ? U : never;
+
+/**
+ * 함수의 반환 타입이 Promise인 경우 래핑된 타입 추출
+ */
+export type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
+
+export enum SortOrder {
+  ASC = 'asc',
+  DESC = 'desc',
+}
diff --git a/final_src/final_src/6_shared/ui/controls/Button.tsx b/final_src/final_src/6_shared/ui/controls/Button.tsx
new file mode 100644
index 000000000..a99d86cc9
--- /dev/null
+++ b/final_src/final_src/6_shared/ui/controls/Button.tsx
@@ -0,0 +1,62 @@
+import { cva, VariantProps } from 'class-variance-authority';
+
+/**
+ * 버튼 컴포넌트 variant 정의
+ * - CVA를 사용한 조건부 스타일링
+ * - variant: 용도별 스타일 (default, destructive, outline, secondary, ghost, link)
+ * - size: 크기별 스타일 (default, sm, lg, icon)
+ * - 접근성 기본 스타일 포함 (focus-visible, disabled)
+ */
+
+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;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export const Button = ({
+  variant,
+  size,
+  className,
+  children,
+  onClick,
+  ...props
+}: ButtonProps) => {
+  return (
+    <button
+      className={buttonVariants({ variant, size, className })}
+      onClick={onClick}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
diff --git a/final_src/final_src/6_shared/ui/data/Table.tsx b/final_src/final_src/6_shared/ui/data/Table.tsx
new file mode 100644
index 000000000..2646e0e04
--- /dev/null
+++ b/final_src/final_src/6_shared/ui/data/Table.tsx
@@ -0,0 +1,99 @@
+import { forwardRef } from 'react';
+
+/**
+ * 테이블 컴포넌트 계열
+ * - 데이터를 구조화된 표 형태로 표시하는 컴포넌트들
+ * - Table, TableHeader, TableBody, TableRow, TableHead, TableCell로 구성
+ * - 반응형 스크롤 지원과 일관된 스타일링 제공
+ */
+
+interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+  className?: string;
+}
+
+export const Table = forwardRef<HTMLTableElement, TableProps>(
+  ({ 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';
+
+interface TableHeaderProps
+  extends React.HTMLAttributes<HTMLTableSectionElement> {
+  className?: string;
+}
+
+export const TableHeader = forwardRef<
+  HTMLTableSectionElement,
+  TableHeaderProps
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={`[&_tr]:border-b ${className}`} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
+
+interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+  className?: string;
+}
+
+export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
+  ({ className, ...props }, ref) => (
+    <tbody
+      ref={ref}
+      className={`[&_tr:last-child]:border-0 ${className}`}
+      {...props}
+    />
+  )
+);
+TableBody.displayName = 'TableBody';
+
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  className?: string;
+}
+
+export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
+  ({ 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';
+
+interface TableHeadProps
+  extends React.HTMLAttributes<HTMLTableHeaderCellElement> {
+  className?: string;
+}
+
+export const TableHead = forwardRef<HTMLTableHeaderCellElement, TableHeadProps>(
+  ({ 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';
+
+interface TableCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+  className?: string;
+}
+
+export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
+  ({ className, ...props }, ref) => (
+    <td
+      ref={ref}
+      className={`p-2 align-middle [&:has([role=checkbox])]:pr-0 ${className}`}
+      {...props}
+    />
+  )
+);
+TableCell.displayName = 'TableCell';
diff --git a/final_src/final_src/6_shared/ui/feedback/LoadingSpinner.tsx b/final_src/final_src/6_shared/ui/feedback/LoadingSpinner.tsx
new file mode 100644
index 000000000..2248d17e1
--- /dev/null
+++ b/final_src/final_src/6_shared/ui/feedback/LoadingSpinner.tsx
@@ -0,0 +1,28 @@
+import { Loader2 } from 'lucide-react';
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  text?: string;
+}
+
+const sizeClasses = {
+  sm: 'w-4 h-4',
+  md: 'w-6 h-6',
+  lg: 'w-8 h-8',
+};
+
+export const LoadingSpinner = ({
+  size = 'md',
+  className = '',
+  text = '로딩 중...',
+}: LoadingSpinnerProps) => {
+  return (
+    <div
+      className={`flex items-center justify-center gap-2 w-full h-full ${className}`}
+    >
+      <Loader2 className={`animate-spin ${sizeClasses[size]}`} />
+      {text && <span className='text-sm text-muted-foreground'>{text}</span>}
+    </div>
+  );
+};
diff --git a/final_src/final_src/6_shared/ui/feedback/index.ts b/final_src/final_src/6_shared/ui/feedback/index.ts
new file mode 100644
index 000000000..8f6c207e0
--- /dev/null
+++ b/final_src/final_src/6_shared/ui/feedback/index.ts
@@ -0,0 +1 @@
+export { LoadingSpinner } from './LoadingSpinner';
diff --git a/final_src/final_src/6_shared/ui/forms/Input.tsx b/final_src/final_src/6_shared/ui/forms/Input.tsx
new file mode 100644
index 000000000..98c3b89c6
--- /dev/null
+++ b/final_src/final_src/6_shared/ui/forms/Input.tsx
@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+
+/**
+ * 입력 컴포넌트
+ * - 기본 HTML input 요소를 확장한 커스텀 입력 컴포넌트
+ * - 일관된 스타일링과 접근성 기능 제공
+ * - forwardRef를 통한 ref 전달로 포커스 관리 지원
+ */
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  className?: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={`flex h-10 w-full rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
diff --git a/final_src/final_src/6_shared/ui/forms/Select.tsx b/final_src/final_src/6_shared/ui/forms/Select.tsx
new file mode 100644
index 000000000..53fbb2c2b
--- /dev/null
+++ b/final_src/final_src/6_shared/ui/forms/Select.tsx
@@ -0,0 +1,80 @@
+import { forwardRef } from 'react';
+
+import { Check, ChevronDown } from 'lucide-react';
+
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+/**
+ * 선택 컴포넌트 계열
+ * - Radix UI Select를 기반으로 한 드롭다운 선택 컴포넌트들
+ * - Select, SelectTrigger, SelectContent, SelectItem으로 구성
+ * - 키보드 네비게이션과 접근성 기능 내장
+ */
+export const Select = SelectPrimitive.Root;
+export const SelectGroup = SelectPrimitive.Group;
+export const SelectValue = SelectPrimitive.Value;
+
+interface SelectTriggerProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string;
+}
+
+export const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(
+  ({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      className={`flex h-10 items-center justify-between rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+      {...props}
+    >
+      {children}
+      <ChevronDown className='h-4 w-4 opacity-50' />
+    </SelectPrimitive.Trigger>
+  )
+);
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  position?: 'popper';
+}
+
+export const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
+  ({ className, children, position = 'popper', ...props }, ref) => (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={ref}
+        className={`relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ${className}`}
+        position={position}
+        {...props}
+      >
+        <SelectPrimitive.Viewport className='p-1'>
+          {children}
+        </SelectPrimitive.Viewport>
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+);
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+interface SelectItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  value: string;
+}
+
+export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
+  ({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Item
+      ref={ref}
+      className={`relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ${className}`}
+      {...props}
+    >
+      <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
+        <SelectPrimitive.ItemIndicator>
+          <Check className='h-4 w-4' />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+);
+SelectItem.displayName = SelectPrimitive.Item.displayName;
diff --git a/final_src/final_src/6_shared/ui/forms/Textarea.tsx b/final_src/final_src/6_shared/ui/forms/Textarea.tsx
new file mode 100644
index 000000000..fbb6c981d
--- /dev/null
+++ b/final_src/final_src/6_shared/ui/forms/Textarea.tsx
@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+
+/**
+ * 텍스트 영역 컴포넌트
+ * - 여러 줄 텍스트 입력을 위한 textarea 컴포넌트
+ * - Input 컴포넌트와 일관된 스타일링 유지
+ * - 최소 높이 설정으로 사용성 향상
+ */
+
+interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  className?: string;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={`flex min-h-[150px] w-full rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = 'Textarea';
diff --git a/final_src/final_src/6_shared/ui/index.ts b/final_src/final_src/6_shared/ui/index.ts
new file mode 100644
index 000000000..b968e389f
--- /dev/null
+++ b/final_src/final_src/6_shared/ui/index.ts
@@ -0,0 +1,20 @@
+// Controls - 사용자 상호작용을 위한 컨트롤 컴포넌트
+export * from './controls/Button';
+
+// Data - 데이터 표시를 위한 컴포넌트
+export * from './data/Table';
+
+// Forms - 폼 입력을 위한 컴포넌트
+export * from './forms/Input';
+export * from './forms/Select';
+export * from './forms/Textarea';
+
+// Layout - 레이아웃을 위한 컴포넌트
+export * from './layout/Card';
+
+// Overlays - 오버레이 및 모달 컴포넌트
+export * from './overlays/Dialog';
+export * from './overlays/ContentDialog';
+
+// Feedback - 사용자 피드백을 위한 컴포넌트
+export * from './feedback';
diff --git a/final_src/final_src/6_shared/ui/layout/Card.tsx b/final_src/final_src/6_shared/ui/layout/Card.tsx
new file mode 100644
index 000000000..f7124bb07
--- /dev/null
+++ b/final_src/final_src/6_shared/ui/layout/Card.tsx
@@ -0,0 +1,64 @@
+import { forwardRef } from 'react';
+
+/**
+ * 카드 컴포넌트 계열
+ * - 콘텐츠를 그룹화하고 시각적으로 구분하는 컨테이너 컴포넌트들
+ * - Card, CardHeader, CardTitle, CardContent로 구성된 복합 컴포넌트
+ * - 일관된 간격과 스타일을 통한 계층적 정보 표현
+ */
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={`rounded-lg border bg-card text-card-foreground shadow-sm ${className}`}
+      {...props}
+    />
+  )
+);
+
+Card.displayName = 'Card';
+
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={`flex flex-col space-y-1.5 p-6 ${className}`}
+      {...props}
+    />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string;
+}
+
+export const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={`text-2xl font-semibold leading-none tracking-tight ${className}`}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={`p-6 pt-0 ${className}`} {...props} />
+  )
+);
+CardContent.displayName = 'CardContent';
diff --git a/final_src/final_src/6_shared/ui/overlays/ContentDialog.tsx b/final_src/final_src/6_shared/ui/overlays/ContentDialog.tsx
new file mode 100644
index 000000000..61d040d9b
--- /dev/null
+++ b/final_src/final_src/6_shared/ui/overlays/ContentDialog.tsx
@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+
+import { DialogProps } from '@radix-ui/react-dialog';
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from './Dialog';
+
+interface ContentDialogProps extends DialogProps {
+  title: ReactNode;
+  onClose?: () => void;
+}
+
+export const ContentDialog = ({
+  title,
+  children,
+  onClose,
+  onOpenChange,
+  ...props
+}: ContentDialogProps) => {
+  const handleOpenChange = (open: boolean) => {
+    onOpenChange?.(open);
+    if (!open) {
+      onClose?.();
+    }
+  };
+
+  return (
+    <Dialog {...props} onOpenChange={handleOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        {children}
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/final_src/final_src/6_shared/ui/overlays/Dialog.tsx b/final_src/final_src/6_shared/ui/overlays/Dialog.tsx
new file mode 100644
index 000000000..0d69bbc5c
--- /dev/null
+++ b/final_src/final_src/6_shared/ui/overlays/Dialog.tsx
@@ -0,0 +1,70 @@
+import { forwardRef } from 'react';
+
+import { X } from 'lucide-react';
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+/**
+ * 대화상자 컴포넌트 계열
+ * - Radix UI Dialog를 기반으로 한 모달 및 팝업 컴포넌트들
+ * - Dialog, DialogContent, DialogHeader, DialogTitle로 구성
+ * - 포커스 트랩, ESC 키 닫기, 오버레이 클릭 닫기 등 UX 기능 내장
+ */
+export const Dialog = DialogPrimitive.Root;
+export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogPortal = DialogPrimitive.Portal;
+export const DialogOverlay = DialogPrimitive.Overlay;
+
+interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
+  ({ className, children, ...props }, ref) => (
+    <DialogPortal>
+      <DialogOverlay className='fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0' />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={`fixed left-[50%] top-[50%] z-50 grid w-full max-w-2xl 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;
+
+interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={`flex flex-col space-y-1.5 text-center sm:text-left ${className}`}
+      {...props}
+    />
+  )
+);
+DialogHeader.displayName = 'DialogHeader';
+
+interface DialogTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string;
+}
+
+export const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
+  ({ className, ...props }, ref) => (
+    <DialogPrimitive.Title
+      ref={ref}
+      className={`text-lg font-semibold leading-none tracking-tight ${className}`}
+      {...props}
+    />
+  )
+);
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
diff --git a/final_src/final_src/README.md b/final_src/final_src/README.md
new file mode 100644
index 000000000..50d62c8ae
--- /dev/null
+++ b/final_src/final_src/README.md
@@ -0,0 +1,155 @@
+# Post Management System - FSD Architecture
+
+## 📁 프로젝트 구조
+
+이 프로젝트는 **Feature-Sliced Design (FSD)** 아키텍처를 기반으로 구성되어 있습니다.
+
+```
+final_src/
+├── 1_app/                    # 애플리케이션 레이어 (최상위)
+│   ├── App.tsx              # 메인 애플리케이션 컴포넌트
+│   ├── index.ts             # Public API
+│   └── providers/           # 애플리케이션 프로바이더
+│       ├── AppProvider.tsx  # 전역 프로바이더 설정
+│       └── index.ts
+├── 2_pages/                 # 페이지 레이어
+│   ├── PostsManagerPage.tsx # 게시물 관리 페이지
+│   └── index.ts
+├── 3_widgets/               # 위젯 레이어
+│   ├── Header.tsx           # 애플리케이션 헤더
+│   ├── Footer.tsx           # 애플리케이션 푸터
+│   └── index.ts
+├── 4_features/              # 기능 레이어
+│   ├── comment-management/  # 댓글 관리 기능
+│   ├── filter-posts/        # 게시물 필터링 기능
+│   ├── post-management/     # 게시물 관리 기능
+│   └── user-profile/        # 사용자 프로필 기능
+├── 5_entities/              # 엔티티 레이어
+│   ├── comment/             # 댓글 엔티티
+│   ├── post/                # 게시물 엔티티
+│   ├── tag/                 # 태그 엔티티
+│   └── user/                # 사용자 엔티티
+├── 6_shared/                # 공유 레이어 (최하위)
+│   ├── api/                 # API 관련 설정
+│   ├── assets/              # 정적 자산
+│   ├── constants/           # 상수 정의
+│   ├── lib/                 # 공통 라이브러리
+│   ├── types/               # 공통 타입 정의
+│   └── ui/                  # 공통 UI 컴포넌트
+├── main.tsx                 # 애플리케이션 진입점
+├── global.d.ts              # 전역 타입 정의
+└── index.css                # 전역 스타일
+```
+
+## 🏗️ FSD 아키텍처 원칙
+
+### 1. 레이어 의존성 규칙
+
+- **상위 레이어는 하위 레이어를 import할 수 있음**
+- **하위 레이어는 상위 레이어를 import할 수 없음**
+- 예: `features`는 `pages`를 import할 수 없음
+
+### 2. 각 레이어의 역할
+
+#### 1_app (애플리케이션 레이어)
+
+- 애플리케이션 초기화 및 설정
+- 전역 프로바이더 설정 (React Query, Jotai, Router)
+- 애플리케이션 레이아웃 구조
+
+#### 2_pages (페이지 레이어)
+
+- 라우팅 가능한 페이지 컴포넌트
+- 위젯과 기능을 조합하여 완전한 페이지 구성
+- 비즈니스 로직은 포함하지 않음
+
+#### 3_widgets (위젯 레이어)
+
+- 독립적인 UI 블록
+- 여러 기능을 조합한 복합 컴포넌트
+- 재사용 가능한 레이아웃 요소
+
+#### 4_features (기능 레이어)
+
+- 사용자 행동과 관련된 기능
+- 비즈니스 로직과 UI 로직 포함
+- 특정 도메인에 종속된 기능
+
+#### 5_entities (엔티티 레이어)
+
+- 비즈니스 엔티티 정의
+- API 통신, 데이터 모델, 타입 정의
+- 도메인 로직 포함
+
+#### 6_shared (공유 레이어)
+
+- 애플리케이션 전체에서 공통으로 사용되는 코드
+- UI 컴포넌트, 유틸리티, 타입, 상수
+- 특정 도메인에 종속되지 않음
+
+## 🚀 주요 개선사항
+
+### 1. 프로바이더 분리
+
+- `AppProvider`를 통한 전역 상태 관리 설정
+- React Query, Jotai, Router 설정 중앙화
+
+### 2. 명명 규칙 통일
+
+- 모든 컴포넌트를 named export로 통일
+- 일관된 파일 및 폴더 명명 규칙
+
+### 3. 문서화 개선
+
+- 각 컴포넌트와 함수에 JSDoc 주석 추가
+- 역할과 책임을 명확히 정의
+
+### 4. 구조 최적화
+
+- 각 레이어별 명확한 책임 분리
+- 의존성 방향 준수
+- 재사용 가능한 컴포넌트 구조
+
+## 📦 사용된 기술 스택
+
+- **React 18** - UI 라이브러리
+- **TypeScript** - 타입 안전성
+- **React Query** - 서버 상태 관리
+- **Jotai** - 클라이언트 상태 관리
+- **React Router** - 클라이언트 사이드 라우팅
+- **Tailwind CSS** - 스타일링
+- **Lucide React** - 아이콘 라이브러리
+
+## 🔧 개발 가이드라인
+
+### 1. 컴포넌트 작성 시
+
+- 단일 책임 원칙 준수
+- 명확한 props 인터페이스 정의
+- 적절한 타입 정의
+
+### 2. 상태 관리 시
+
+- 로컬 상태는 `useState` 사용
+- 전역 상태는 Jotai 사용
+- 서버 상태는 React Query 사용
+
+### 3. 파일 구조 시
+
+- FSD 레이어 규칙 준수
+- 관련 파일들을 같은 폴더에 배치
+- 명확한 파일 명명
+
+### 4. Import/Export 시
+
+- 절대 경로 사용 (`@/` 별칭)
+- Public API를 통한 export
+- 순환 의존성 방지
+
+## 🎯 다음 단계
+
+1. **테스트 코드 추가** - 각 레이어별 단위 테스트
+2. **성능 최적화** - React.memo, useMemo, useCallback 활용
+3. **접근성 개선** - ARIA 속성 및 키보드 네비게이션
+4. **국제화** - 다국어 지원 구조 추가
+5. **에러 바운더리** - 에러 처리 및 복구 메커니즘
diff --git a/final_src/final_src/global.d.ts b/final_src/final_src/global.d.ts
new file mode 100644
index 000000000..64a633d3c
--- /dev/null
+++ b/final_src/final_src/global.d.ts
@@ -0,0 +1,14 @@
+declare module '*.css' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.scss' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.sass' {
+  const content: string;
+  export default content;
+}
diff --git a/final_src/final_src/index.css b/final_src/final_src/index.css
new file mode 100644
index 000000000..8e1047cca
--- /dev/null
+++ b/final_src/final_src/index.css
@@ -0,0 +1,5 @@
+html,
+body {
+  background: #fff;
+  color: #000;
+}
diff --git a/final_src/final_src/main.tsx b/final_src/final_src/main.tsx
new file mode 100644
index 000000000..2191df79a
--- /dev/null
+++ b/final_src/final_src/main.tsx
@@ -0,0 +1,14 @@
+import { StrictMode } from 'react';
+
+import { createRoot } from 'react-dom/client';
+
+import { App, AppProvider } from '@/app';
+import '@/index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <AppProvider>
+      <App />
+    </AppProvider>
+  </StrictMode>
+);
diff --git a/final_src/global.d.ts b/final_src/global.d.ts
new file mode 100644
index 000000000..64a633d3c
--- /dev/null
+++ b/final_src/global.d.ts
@@ -0,0 +1,14 @@
+declare module '*.css' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.scss' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.sass' {
+  const content: string;
+  export default content;
+}
diff --git a/final_src/index.css b/final_src/index.css
new file mode 100644
index 000000000..8e1047cca
--- /dev/null
+++ b/final_src/index.css
@@ -0,0 +1,5 @@
+html,
+body {
+  background: #fff;
+  color: #000;
+}
diff --git a/final_src/main.tsx b/final_src/main.tsx
new file mode 100644
index 000000000..61d48e415
--- /dev/null
+++ b/final_src/main.tsx
@@ -0,0 +1,25 @@
+import React, { StrictMode } from 'react';
+
+import { createRoot } from 'react-dom/client';
+
+import { App, AppProvider } from '@/app';
+import '@/index.css';
+
+/**
+ * 애플리케이션 진입점
+ *
+ * FSD Best Practice:
+ * - 애플리케이션 초기화
+ * - 프로바이더 설정
+ * - 개발 모드 설정
+ * - 에러 바운더리 설정 (필요시)
+ */
+const root = createRoot(document.getElementById('root')!);
+
+root.render(
+  <StrictMode>
+    <AppProvider>
+      <App />
+    </AppProvider>
+  </StrictMode>
+);
diff --git a/package.json b/package.json
index e014c5272..25959e7cd 100644
--- a/package.json
+++ b/package.json
@@ -6,12 +6,22 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "lint": "eslint .",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "format:fix": "prettier --write \"**/*.{ts,tsx,js,jsx,json,css,md}\" && eslint . --ext .ts,.tsx --fix",
     "preview": "vite preview",
     "test": "vitest",
-    "coverage": "vitest run --coverage"
+    "coverage": "vitest run --coverage",
+    "prepare": "husky",
+    "gh-pages": "pnpm run build && gh-pages -d dist"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.85.0",
+    "@tanstack/react-query-devtools": "^5.85.0",
+    "gh-pages": "^6.3.0",
+    "jotai": "^2.13.1",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   },
@@ -19,19 +29,35 @@
     "@eslint/js": "^9.33.0",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-select": "^2.2.5",
+    "@tanstack/eslint-plugin-query": "^5.83.1",
     "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@types/axios": "^0.14.4",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
+    "@typescript-eslint/eslint-plugin": "^8.39.1",
+    "@typescript-eslint/parser": "^8.39.1",
     "@vitejs/plugin-react": "^5.0.0",
     "axios": "^1.11.0",
     "class-variance-authority": "^0.7.1",
     "eslint": "^9.33.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^18.0.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
+    "husky": "^9.1.7",
     "jsdom": "^26.1.0",
+    "lint-staged": "^16.1.5",
     "lucide-react": "^0.539.0",
     "msw": "^2.10.4",
     "prettier": "^3.6.2",
@@ -41,5 +67,14 @@
     "vite": "^7.1.1",
     "vitest": "^3.2.4",
     "vitest-browser-react": "^1.0.1"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{json,css,md}": [
+      "prettier --write"
+    ]
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6b2a40d18..4a88dfa06 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,18 @@ importers:
 
   .:
     dependencies:
+      '@tanstack/react-query':
+        specifier: ^5.85.0
+        version: 5.85.0(react@19.1.1)
+      '@tanstack/react-query-devtools':
+        specifier: ^5.85.0
+        version: 5.85.0(@tanstack/react-query@5.85.0(react@19.1.1))(react@19.1.1)
+      gh-pages:
+        specifier: ^6.3.0
+        version: 6.3.0
+      jotai:
+        specifier: ^2.13.1
+        version: 2.13.1(@babel/core@7.28.0)(@babel/template@7.27.2)(@types/react@19.1.9)(react@19.1.1)
       react:
         specifier: ^19.1.1
         version: 19.1.1
@@ -24,6 +36,9 @@ importers:
       '@radix-ui/react-select':
         specifier: ^2.2.5
         version: 2.2.5(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@tanstack/eslint-plugin-query':
+        specifier: ^5.83.1
+        version: 5.83.1(eslint@9.33.0)(typescript@5.9.2)
       '@testing-library/jest-dom':
         specifier: ^6.6.4
         version: 6.6.4
@@ -33,15 +48,27 @@ importers:
       '@testing-library/user-event':
         specifier: ^14.6.1
         version: 14.6.1(@testing-library/dom@10.4.0)
+      '@trivago/prettier-plugin-sort-imports':
+        specifier: ^5.2.2
+        version: 5.2.2(prettier@3.6.2)
+      '@types/axios':
+        specifier: ^0.14.4
+        version: 0.14.4
       '@types/react':
         specifier: ^19.1.9
         version: 19.1.9
       '@types/react-dom':
         specifier: ^19.1.7
         version: 19.1.7(@types/react@19.1.9)
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^8.39.1
+        version: 8.39.1(@typescript-eslint/parser@8.39.1(eslint@9.33.0)(typescript@5.9.2))(eslint@9.33.0)(typescript@5.9.2)
+      '@typescript-eslint/parser':
+        specifier: ^8.39.1
+        version: 8.39.1(eslint@9.33.0)(typescript@5.9.2)
       '@vitejs/plugin-react':
         specifier: ^5.0.0
-        version: 5.0.0(vite@7.1.1(@types/node@22.8.1))
+        version: 5.0.0(vite@7.1.1(@types/node@22.8.1)(yaml@2.8.1))
       axios:
         specifier: ^1.11.0
         version: 1.11.0
@@ -51,6 +78,33 @@ importers:
       eslint:
         specifier: ^9.33.0
         version: 9.33.0
+      eslint-config-airbnb:
+        specifier: ^19.0.4
+        version: 19.0.4(eslint-plugin-import@2.32.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@9.33.0))(eslint-plugin-react-hooks@5.2.0(eslint@9.33.0))(eslint-plugin-react@7.37.5(eslint@9.33.0))(eslint@9.33.0)
+      eslint-config-airbnb-typescript:
+        specifier: ^18.0.0
+        version: 18.0.0(@typescript-eslint/eslint-plugin@8.39.1(@typescript-eslint/parser@8.39.1(eslint@9.33.0)(typescript@5.9.2))(eslint@9.33.0)(typescript@5.9.2))(@typescript-eslint/parser@8.39.1(eslint@9.33.0)(typescript@5.9.2))(eslint-plugin-import@2.32.0)(eslint@9.33.0)
+      eslint-config-prettier:
+        specifier: ^10.1.8
+        version: 10.1.8(eslint@9.33.0)
+      eslint-import-resolver-alias:
+        specifier: ^1.1.2
+        version: 1.1.2(eslint-plugin-import@2.32.0)
+      eslint-import-resolver-typescript:
+        specifier: ^4.4.4
+        version: 4.4.4(eslint-plugin-import@2.32.0)(eslint@9.33.0)
+      eslint-plugin-import:
+        specifier: ^2.32.0
+        version: 2.32.0(@typescript-eslint/parser@8.39.1(eslint@9.33.0)(typescript@5.9.2))(eslint-import-resolver-typescript@4.4.4)(eslint@9.33.0)
+      eslint-plugin-jsx-a11y:
+        specifier: ^6.10.2
+        version: 6.10.2(eslint@9.33.0)
+      eslint-plugin-prettier:
+        specifier: ^5.5.4
+        version: 5.5.4(eslint-config-prettier@10.1.8(eslint@9.33.0))(eslint@9.33.0)(prettier@3.6.2)
+      eslint-plugin-react:
+        specifier: ^7.37.5
+        version: 7.37.5(eslint@9.33.0)
       eslint-plugin-react-hooks:
         specifier: ^5.2.0
         version: 5.2.0(eslint@9.33.0)
@@ -60,9 +114,15 @@ importers:
       globals:
         specifier: ^16.3.0
         version: 16.3.0
+      husky:
+        specifier: ^9.1.7
+        version: 9.1.7
       jsdom:
         specifier: ^26.1.0
         version: 26.1.0
+      lint-staged:
+        specifier: ^16.1.5
+        version: 16.1.5
       lucide-react:
         specifier: ^0.539.0
         version: 0.539.0(react@19.1.1)
@@ -83,10 +143,10 @@ importers:
         version: 8.39.0(eslint@9.33.0)(typescript@5.9.2)
       vite:
         specifier: ^7.1.1
-        version: 7.1.1(@types/node@22.8.1)
+        version: 7.1.1(@types/node@22.8.1)(yaml@2.8.1)
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/node@22.8.1)(@vitest/browser@2.1.3)(jsdom@26.1.0)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))
+        version: 3.2.4(@types/node@22.8.1)(@vitest/browser@2.1.3)(jsdom@26.1.0)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))(yaml@2.8.1)
       vitest-browser-react:
         specifier: ^1.0.1
         version: 1.0.1(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(@vitest/browser@2.1.3)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vitest@3.2.4)
@@ -103,10 +163,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'}
@@ -248,6 +304,15 @@ packages:
     resolution: {integrity: sha512-UJnjoFsmxfKUdNYdWgOB0mWUypuLvAfQPH1+pyvRJs6euowbFkFC6P13w1l8mJyi3vxYMxc9kld5jZEGRQs6bw==}
     engines: {node: '>=18'}
 
+  '@emnapi/core@1.4.5':
+    resolution: {integrity: sha512-XsLw1dEOpkSX/WucdqUhPWP7hDxSvZiY+fsUC14h+FtQ2Ifni4znbBt8punRX+Uj2JG/uDb8nEHVKvrVlvdZ5Q==}
+
+  '@emnapi/runtime@1.4.5':
+    resolution: {integrity: sha512-++LApOtY0pEEz1zrd9vy1/zXVaVJJ/EbAF3u0fXIzPJEDtnITsBGbbK0EkM72amhl/R5b+5xx0Y/QhcVOpuulg==}
+
+  '@emnapi/wasi-threads@1.0.4':
+    resolution: {integrity: sha512-PJR+bOmMOPH8AtcTGAyYNiuJ3/Fcoj2XN/gBEWzDIKh254XO+mM9XoXHk5GNEhodxeMznbg7BlRojVbKN+gC6g==}
+
   '@esbuild/aix-ppc64@0.25.3':
     resolution: {integrity: sha512-W8bFfPA8DowP8l//sxjJLSLkD8iEjMc7cBVyP+u4cEv9sM7mdUCkgsj+t0n/BWPFtv7WWCN5Yzj0N6FJNUUqBQ==}
     engines: {node: '>=18'}
@@ -525,6 +590,9 @@ packages:
     resolution: {integrity: sha512-B9nHSJYtsv79uo7QdkZ/b/WoKm20IkVSmTc/WCKarmDtFwM0dRx2ouEniqwNkzCSLn3fydzKmnMzjtfdOWt3VQ==}
     engines: {node: '>=18'}
 
+  '@napi-rs/wasm-runtime@0.2.12':
+    resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -546,6 +614,10 @@ packages:
   '@open-draft/until@2.1.0':
     resolution: {integrity: sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==}
 
+  '@pkgr/core@0.2.9':
+    resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+
   '@polka/url@1.0.0-next.28':
     resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
 
@@ -930,6 +1002,31 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@rtsao/scc@1.1.0':
+    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
+
+  '@tanstack/eslint-plugin-query@5.83.1':
+    resolution: {integrity: sha512-tdkpPFfzkTksN9BIlT/qjixSAtKrsW6PUVRwdKWaOcag7DrD1vpki3UzzdfMQGDRGeg1Ue1Dg+rcl5FJGembNg==}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+
+  '@tanstack/query-core@5.83.1':
+    resolution: {integrity: sha512-OG69LQgT7jSp+5pPuCfzltq/+7l2xoweggjme9vlbCPa/d7D7zaqv5vN/S82SzSYZ4EDLTxNO1PWrv49RAS64Q==}
+
+  '@tanstack/query-devtools@5.84.0':
+    resolution: {integrity: sha512-fbF3n+z1rqhvd9EoGp5knHkv3p5B2Zml1yNRjh7sNXklngYI5RVIWUrUjZ1RIcEoscarUb0+bOvIs5x9dwzOXQ==}
+
+  '@tanstack/react-query-devtools@5.85.0':
+    resolution: {integrity: sha512-Q/lmGAY2I3KkhxSJKLKQUeUBOc9Mv/OrCTw4CfUCq2Za+XhDsB5ZfVTOANAJyDZ+SiUu27Cw1eHNE+xJdACJiw==}
+    peerDependencies:
+      '@tanstack/react-query': ^5.85.0
+      react: ^18 || ^19
+
+  '@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'}
@@ -959,9 +1056,32 @@ packages:
     peerDependencies:
       '@testing-library/dom': '>=7.21.4'
 
+  '@trivago/prettier-plugin-sort-imports@5.2.2':
+    resolution: {integrity: sha512-fYDQA9e6yTNmA13TLVSA+WMQRc5Bn/c0EUBditUHNfMMxN7M82c38b1kEggVE3pLpZ0FwkwJkUEKMiOi52JXFA==}
+    engines: {node: '>18.12'}
+    peerDependencies:
+      '@vue/compiler-sfc': 3.x
+      prettier: 2.x - 3.x
+      prettier-plugin-svelte: 3.x
+      svelte: 4.x || 5.x
+    peerDependenciesMeta:
+      '@vue/compiler-sfc':
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+      svelte:
+        optional: true
+
+  '@tybys/wasm-util@0.10.0':
+    resolution: {integrity: sha512-VyyPYFlOMNylG45GoAe0xDoLwWuowvf92F9kySqzYh8vmYm7D2u4iUJKa1tOUpS70Ku13ASrOkS4ScXFsTaCNQ==}
+
   '@types/aria-query@5.0.4':
     resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
 
+  '@types/axios@0.14.4':
+    resolution: {integrity: sha512-9JgOaunvQdsQ/qW2OPmE5+hCeUB52lQSolecrFrthct55QekhmXEwT203s20RL+UHtCQc15y3VXpby9E7Kkh/g==}
+    deprecated: This is a stub types definition. axios provides its own type definitions, so you do not need this installed.
+
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
@@ -992,6 +1112,9 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/json5@0.0.29':
+    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
+
   '@types/node@22.8.1':
     resolution: {integrity: sha512-k6Gi8Yyo8EtrNtkHXutUu2corfDf9su95VYVP10aGYMMROM6SAItZi0w1XszA6RtWTHSVp5OeFof37w0IEqCQg==}
 
@@ -1017,6 +1140,14 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
+  '@typescript-eslint/eslint-plugin@8.39.1':
+    resolution: {integrity: sha512-yYegZ5n3Yr6eOcqgj2nJH8cH/ZZgF+l0YIdKILSDjYFRjgYQMgv/lRjV5Z7Up04b9VYUondt8EPMqg7kTWgJ2g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^8.39.1
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
   '@typescript-eslint/parser@8.39.0':
     resolution: {integrity: sha512-g3WpVQHngx0aLXn6kfIYCZxM6rRJlWzEkVpqEFLT3SgEDsp9cpCbxxgwnE504q4H+ruSDh/VGS6nqZIDynP+vg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1024,22 +1155,45 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
+  '@typescript-eslint/parser@8.39.1':
+    resolution: {integrity: sha512-pUXGCuHnnKw6PyYq93lLRiZm3vjuslIy7tus1lIQTYVK9bL8XBgJnCWm8a0KcTtHC84Yya1Q6rtll+duSMj0dg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
   '@typescript-eslint/project-service@8.39.0':
     resolution: {integrity: sha512-CTzJqaSq30V/Z2Og9jogzZt8lJRR5TKlAdXmWgdu4hgcC9Kww5flQ+xFvMxIBWVNdxJO7OifgdOK4PokMIWPew==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
+  '@typescript-eslint/project-service@8.39.1':
+    resolution: {integrity: sha512-8fZxek3ONTwBu9ptw5nCKqZOSkXshZB7uAxuFF0J/wTMkKydjXCzqqga7MlFMpHi9DoG4BadhmTkITBcg8Aybw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
   '@typescript-eslint/scope-manager@8.39.0':
     resolution: {integrity: sha512-8QOzff9UKxOh6npZQ/4FQu4mjdOCGSdO3p44ww0hk8Vu+IGbg0tB/H1LcTARRDzGCC8pDGbh2rissBuuoPgH8A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@typescript-eslint/scope-manager@8.39.1':
+    resolution: {integrity: sha512-RkBKGBrjgskFGWuyUGz/EtD8AF/GW49S21J8dvMzpJitOF1slLEbbHnNEtAHtnDAnx8qDEdRrULRnWVx27wGBw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@typescript-eslint/tsconfig-utils@8.39.0':
     resolution: {integrity: sha512-Fd3/QjmFV2sKmvv3Mrj8r6N8CryYiCS8Wdb/6/rgOXAWGcFuc+VkQuG28uk/4kVNVZBQuuDHEDUpo/pQ32zsIQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
+  '@typescript-eslint/tsconfig-utils@8.39.1':
+    resolution: {integrity: sha512-ePUPGVtTMR8XMU2Hee8kD0Pu4NDE1CN9Q1sxGSGd/mbOtGZDM7pnhXNJnzW63zk/q+Z54zVzj44HtwXln5CvHA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
   '@typescript-eslint/type-utils@8.39.0':
     resolution: {integrity: sha512-6B3z0c1DXVT2vYA9+z9axjtc09rqKUPRmijD5m9iv8iQpHBRYRMBcgxSiKTZKm6FwWw1/cI4v6em35OsKCiN5Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1047,16 +1201,33 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
+  '@typescript-eslint/type-utils@8.39.1':
+    resolution: {integrity: sha512-gu9/ahyatyAdQbKeHnhT4R+y3YLtqqHyvkfDxaBYk97EcbfChSJXyaJnIL3ygUv7OuZatePHmQvuH5ru0lnVeA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
   '@typescript-eslint/types@8.39.0':
     resolution: {integrity: sha512-ArDdaOllnCj3yn/lzKn9s0pBQYmmyme/v1HbGIGB0GB/knFI3fWMHloC+oYTJW46tVbYnGKTMDK4ah1sC2v0Kg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@typescript-eslint/types@8.39.1':
+    resolution: {integrity: sha512-7sPDKQQp+S11laqTrhHqeAbsCfMkwJMrV7oTDvtDds4mEofJYir414bYKUEb8YPUm9QL3U+8f6L6YExSoAGdQw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@typescript-eslint/typescript-estree@8.39.0':
     resolution: {integrity: sha512-ndWdiflRMvfIgQRpckQQLiB5qAKQ7w++V4LlCHwp62eym1HLB/kw7D9f2e8ytONls/jt89TEasgvb+VwnRprsw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
+  '@typescript-eslint/typescript-estree@8.39.1':
+    resolution: {integrity: sha512-EKkpcPuIux48dddVDXyQBlKdeTPMmALqBUbEk38McWv0qVEZwOpVJBi7ugK5qVNgeuYjGNQxrrnoM/5+TI/BPw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
   '@typescript-eslint/utils@8.39.0':
     resolution: {integrity: sha512-4GVSvNA0Vx1Ktwvf4sFE+exxJ3QGUorQG1/A5mRfRNZtkBT2xrA/BCO2H0eALx/PnvCS6/vmYwRdDA41EoffkQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1064,10 +1235,116 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
+  '@typescript-eslint/utils@8.39.1':
+    resolution: {integrity: sha512-VF5tZ2XnUSTuiqZFXCZfZs1cgkdd3O/sSYmdo2EpSyDlC86UM/8YytTmKnehOW3TGAlivqTDT6bS87B/GQ/jyg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
   '@typescript-eslint/visitor-keys@8.39.0':
     resolution: {integrity: sha512-ldgiJ+VAhQCfIjeOgu8Kj5nSxds0ktPOSO9p4+0VDH2R2pLvQraaM5Oen2d7NxzMCm+Sn/vJT+mv2H5u6b/3fA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@typescript-eslint/visitor-keys@8.39.1':
+    resolution: {integrity: sha512-W8FQi6kEh2e8zVhQ0eeRnxdvIoOkAp/CPAahcNio6nO9dsIwb9b34z90KOlheoyuVf6LSOEdjlkxSkapNEc+4A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
+    resolution: {integrity: sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==}
+    cpu: [arm]
+    os: [android]
+
+  '@unrs/resolver-binding-android-arm64@1.11.1':
+    resolution: {integrity: sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==}
+    cpu: [arm64]
+    os: [android]
+
+  '@unrs/resolver-binding-darwin-arm64@1.11.1':
+    resolution: {integrity: sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@unrs/resolver-binding-darwin-x64@1.11.1':
+    resolution: {integrity: sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@unrs/resolver-binding-freebsd-x64@1.11.1':
+    resolution: {integrity: sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
+    resolution: {integrity: sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
+    resolution: {integrity: sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
+    resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
+    resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
+    resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
+    resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
+    resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
+    resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
+    resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
+    cpu: [x64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
+    resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
+    cpu: [x64]
+    os: [linux]
+
+  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
+    resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
+    resolution: {integrity: sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
+    resolution: {integrity: sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
+    resolution: {integrity: sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==}
+    cpu: [x64]
+    os: [win32]
+
   '@vitejs/plugin-react@5.0.0':
     resolution: {integrity: sha512-Jx9JfsTa05bYkS9xo0hkofp2dCmp1blrKjw9JONs5BTHOvJCgLbaPSuZLGSVJW6u2qe0tc4eevY0+gSNNi0YCw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1157,10 +1434,18 @@ packages:
     resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
     engines: {node: '>=8'}
 
+  ansi-escapes@7.0.0:
+    resolution: {integrity: sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw==}
+    engines: {node: '>=18'}
+
   ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
 
+  ansi-regex@6.1.0:
+    resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
+    engines: {node: '>=12'}
+
   ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
@@ -1169,6 +1454,10 @@ packages:
     resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
     engines: {node: '>=10'}
 
+  ansi-styles@6.2.1:
+    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
+    engines: {node: '>=12'}
+
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
@@ -1179,16 +1468,78 @@ packages:
   aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
 
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
+
+  array-buffer-byte-length@1.0.2:
+    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
+    engines: {node: '>= 0.4'}
+
+  array-includes@3.1.9:
+    resolution: {integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==}
+    engines: {node: '>= 0.4'}
+
+  array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+
+  array.prototype.findlast@1.2.5:
+    resolution: {integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.findlastindex@1.2.6:
+    resolution: {integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.flat@1.3.3:
+    resolution: {integrity: sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.flatmap@1.3.3:
+    resolution: {integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.tosorted@1.1.4:
+    resolution: {integrity: sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==}
+    engines: {node: '>= 0.4'}
+
+  arraybuffer.prototype.slice@1.0.4:
+    resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
+    engines: {node: '>= 0.4'}
+
   assertion-error@2.0.1:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
+  ast-types-flow@0.0.8:
+    resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
+
+  async-function@1.0.0:
+    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
+    engines: {node: '>= 0.4'}
+
+  async@3.2.6:
+    resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
+
   asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
 
+  available-typed-arrays@1.0.7:
+    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
+    engines: {node: '>= 0.4'}
+
+  axe-core@4.10.3:
+    resolution: {integrity: sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==}
+    engines: {node: '>=4'}
+
   axios@1.11.0:
     resolution: {integrity: sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==}
 
+  axobject-query@4.1.0:
+    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
+    engines: {node: '>= 0.4'}
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -1215,6 +1566,14 @@ packages:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
     engines: {node: '>= 0.4'}
 
+  call-bind@1.0.8:
+    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
+    engines: {node: '>= 0.4'}
+
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
+
   callsites@3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
@@ -1230,6 +1589,10 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+  chalk@5.5.0:
+    resolution: {integrity: sha512-1tm8DTaJhPBG3bIkVeZt1iZM9GfSX2lzOeDVZH9R9ffRHpmHvxZ/QhgQH/aDTkswQVt+YHdXAdS/In/30OjCbg==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
   check-error@2.1.1:
     resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
     engines: {node: '>= 16'}
@@ -1237,6 +1600,14 @@ packages:
   class-variance-authority@0.7.1:
     resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
 
+  cli-cursor@5.0.0:
+    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
+    engines: {node: '>=18'}
+
+  cli-truncate@4.0.0:
+    resolution: {integrity: sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==}
+    engines: {node: '>=18'}
+
   cli-width@4.1.0:
     resolution: {integrity: sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==}
     engines: {node: '>= 12'}
@@ -1256,13 +1627,30 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  colorette@2.0.20:
+    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
+
   combined-stream@1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
 
+  commander@13.1.0:
+    resolution: {integrity: sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==}
+    engines: {node: '>=18'}
+
+  commander@14.0.0:
+    resolution: {integrity: sha512-2uM9rYjPvyq39NwLRqaiLtWHyDC1FvryJDa2ATTVims5YAS4PupsEQsDvP14FqhFr0P49CYDugi59xaxJlTXRA==}
+    engines: {node: '>=20'}
+
+  commondir@1.0.1:
+    resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
+
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
+  confusing-browser-globals@1.0.11:
+    resolution: {integrity: sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==}
+
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -1288,10 +1676,33 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  damerau-levenshtein@1.0.8:
+    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
+
   data-urls@5.0.0:
     resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
     engines: {node: '>=18'}
 
+  data-view-buffer@1.0.2:
+    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
+    engines: {node: '>= 0.4'}
+
+  data-view-byte-length@1.0.2:
+    resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
+    engines: {node: '>= 0.4'}
+
+  data-view-byte-offset@1.0.1:
+    resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
+    engines: {node: '>= 0.4'}
+
+  debug@3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
   debug@4.4.0:
     resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
     engines: {node: '>=6.0'}
@@ -1320,6 +1731,14 @@ packages:
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
+  define-data-property@1.1.4:
+    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
+    engines: {node: '>= 0.4'}
+
+  define-properties@1.2.1:
+    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
+    engines: {node: '>= 0.4'}
+
   delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
@@ -1331,6 +1750,14 @@ packages:
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
+  dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+
+  doctrine@2.1.0:
+    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
+    engines: {node: '>=0.10.0'}
+
   dom-accessibility-api@0.5.16:
     resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
 
@@ -1344,13 +1771,30 @@ packages:
   electron-to-chromium@1.5.45:
     resolution: {integrity: sha512-vOzZS6uZwhhbkZbcRyiy99Wg+pYFV5hk+5YaECvx0+Z31NR3Tt5zS6dze2OepT6PCTzVzT0dIJItti+uAW5zmw==}
 
+  email-addresses@5.0.0:
+    resolution: {integrity: sha512-4OIPYlA6JXqtVn8zpHpGiI7vE6EQOAg16aGnDMIAlZVinnoZ8208tW1hAbjWydgN/4PLTT9q+O1K6AH/vALJGw==}
+
+  emoji-regex@10.4.0:
+    resolution: {integrity: sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==}
+
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
   entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
+  environment@1.1.0:
+    resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==}
+    engines: {node: '>=18'}
+
+  es-abstract@1.24.0:
+    resolution: {integrity: sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==}
+    engines: {node: '>= 0.4'}
+
   es-define-property@1.0.1:
     resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
@@ -1359,6 +1803,10 @@ packages:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
+  es-iterator-helpers@1.2.1:
+    resolution: {integrity: sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==}
+    engines: {node: '>= 0.4'}
+
   es-module-lexer@1.7.0:
     resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
 
@@ -1370,6 +1818,14 @@ packages:
     resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
     engines: {node: '>= 0.4'}
 
+  es-shim-unscopables@1.1.0:
+    resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
+    engines: {node: '>= 0.4'}
+
+  es-to-primitive@1.3.0:
+    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
+    engines: {node: '>= 0.4'}
+
   esbuild@0.25.3:
     resolution: {integrity: sha512-qKA6Pvai73+M2FtftpNKRxJ78GIjmFXFxd/1DVBqGo/qNhLSfv+G12n9pNoWdytJC8U00TrViOwpjT0zgqQS8Q==}
     engines: {node: '>=18'}
@@ -1379,10 +1835,126 @@ packages:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
 
+  escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+
   escape-string-regexp@4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
+  eslint-config-airbnb-base@15.0.0:
+    resolution: {integrity: sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    peerDependencies:
+      eslint: ^7.32.0 || ^8.2.0
+      eslint-plugin-import: ^2.25.2
+
+  eslint-config-airbnb-typescript@18.0.0:
+    resolution: {integrity: sha512-oc+Lxzgzsu8FQyFVa4QFaVKiitTYiiW3frB9KYW5OWdPrqFc7FzxgB20hP4cHMlr+MBzGcLl3jnCOVOydL9mIg==}
+    peerDependencies:
+      '@typescript-eslint/eslint-plugin': ^7.0.0
+      '@typescript-eslint/parser': ^7.0.0
+      eslint: ^8.56.0
+
+  eslint-config-airbnb@19.0.4:
+    resolution: {integrity: sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==}
+    engines: {node: ^10.12.0 || ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^7.32.0 || ^8.2.0
+      eslint-plugin-import: ^2.25.3
+      eslint-plugin-jsx-a11y: ^6.5.1
+      eslint-plugin-react: ^7.28.0
+      eslint-plugin-react-hooks: ^4.3.0
+
+  eslint-config-prettier@10.1.8:
+    resolution: {integrity: sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==}
+    hasBin: true
+    peerDependencies:
+      eslint: '>=7.0.0'
+
+  eslint-import-context@0.1.9:
+    resolution: {integrity: sha512-K9Hb+yRaGAGUbwjhFNHvSmmkZs9+zbuoe3kFQ4V1wYjrepUFYM2dZAfNtjbbj3qsPfUfsA68Bx/ICWQMi+C8Eg==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      unrs-resolver: ^1.0.0
+    peerDependenciesMeta:
+      unrs-resolver:
+        optional: true
+
+  eslint-import-resolver-alias@1.1.2:
+    resolution: {integrity: sha512-WdviM1Eu834zsfjHtcGHtGfcu+F30Od3V7I9Fi57uhBEwPkjDcii7/yW8jAT+gOhn4P/vOxxNAXbFAKsrrc15w==}
+    engines: {node: '>= 4'}
+    peerDependencies:
+      eslint-plugin-import: '>=1.4.0'
+
+  eslint-import-resolver-node@0.3.9:
+    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
+
+  eslint-import-resolver-typescript@4.4.4:
+    resolution: {integrity: sha512-1iM2zeBvrYmUNTj2vSC/90JTHDth+dfOfiNKkxApWRsTJYNrc8rOdxxIf5vazX+BiAXTeOT0UvWpGI/7qIWQOw==}
+    engines: {node: ^16.17.0 || >=18.6.0}
+    peerDependencies:
+      eslint: '*'
+      eslint-plugin-import: '*'
+      eslint-plugin-import-x: '*'
+    peerDependenciesMeta:
+      eslint-plugin-import:
+        optional: true
+      eslint-plugin-import-x:
+        optional: true
+
+  eslint-module-utils@2.12.1:
+    resolution: {integrity: sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+
+  eslint-plugin-import@2.32.0:
+    resolution: {integrity: sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+
+  eslint-plugin-jsx-a11y@6.10.2:
+    resolution: {integrity: sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
+
+  eslint-plugin-prettier@5.5.4:
+    resolution: {integrity: sha512-swNtI95SToIz05YINMA6Ox5R057IMAmWZ26GqPxusAp1TZzj+IdY9tXNWWD3vkF/wEqydCONcwjTFpxybBqZsg==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      '@types/eslint': '>=8.0.0'
+      eslint: '>=8.0.0'
+      eslint-config-prettier: '>= 7.0.0 <10.0.0 || >=10.1.0'
+      prettier: '>=3.0.0'
+    peerDependenciesMeta:
+      '@types/eslint':
+        optional: true
+      eslint-config-prettier:
+        optional: true
+
   eslint-plugin-react-hooks@5.2.0:
     resolution: {integrity: sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==}
     engines: {node: '>=10'}
@@ -1394,6 +1966,12 @@ packages:
     peerDependencies:
       eslint: '>=8.40'
 
+  eslint-plugin-react@7.37.5:
+    resolution: {integrity: sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
+
   eslint-scope@8.4.0:
     resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1439,6 +2017,9 @@ packages:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
+  eventemitter3@5.0.1:
+    resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
+
   expect-type@1.2.1:
     resolution: {integrity: sha512-/kP8CAwxzLVEeFrMm4kMmy4CCDlpipyA7MYLVrdJIkV0fYF0UaigQHRsxHiuY/GEea+bh4KSv3TIlgr+2UL6bw==}
     engines: {node: '>=12.0.0'}
@@ -1446,6 +2027,9 @@ packages:
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
+  fast-diff@1.3.0:
+    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
+
   fast-glob@3.3.2:
     resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
     engines: {node: '>=8.6.0'}
@@ -1471,10 +2055,26 @@ packages:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
 
-  fill-range@7.1.1:
+  filename-reserved-regex@2.0.0:
+    resolution: {integrity: sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==}
+    engines: {node: '>=4'}
+
+  filenamify@4.3.0:
+    resolution: {integrity: sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==}
+    engines: {node: '>=8'}
+
+  fill-range@7.1.1:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
+  find-cache-dir@3.3.2:
+    resolution: {integrity: sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==}
+    engines: {node: '>=8'}
+
+  find-up@4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
+
   find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -1495,10 +2095,18 @@ packages:
       debug:
         optional: true
 
+  for-each@0.3.5:
+    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
+    engines: {node: '>= 0.4'}
+
   form-data@4.0.4:
     resolution: {integrity: sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==}
     engines: {node: '>= 6'}
 
+  fs-extra@11.3.1:
+    resolution: {integrity: sha512-eXvGGwZ5CL17ZSwHWd3bbgk7UUpF6IFHtP57NYYakPvHOs8GDgDe5KJI36jIJzDkJ6eJjuzRA8eBQb6SkKue0g==}
+    engines: {node: '>=14.14'}
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -1507,6 +2115,13 @@ packages:
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
+  function.prototype.name@1.1.8:
+    resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
+    engines: {node: '>= 0.4'}
+
+  functions-have-names@1.2.3:
+    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+
   gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
@@ -1515,6 +2130,10 @@ packages:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
 
+  get-east-asian-width@1.3.0:
+    resolution: {integrity: sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ==}
+    engines: {node: '>=18'}
+
   get-intrinsic@1.3.0:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
@@ -1527,6 +2146,18 @@ packages:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
 
+  get-symbol-description@1.1.0:
+    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
+    engines: {node: '>= 0.4'}
+
+  get-tsconfig@4.10.1:
+    resolution: {integrity: sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==}
+
+  gh-pages@6.3.0:
+    resolution: {integrity: sha512-Ot5lU6jK0Eb+sszG8pciXdjMXdBJ5wODvgjR+imihTqsUWF2K6dJ9HST55lgqcs8wWcw6o6wAsUzfcYRhJPXbA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -1543,10 +2174,21 @@ packages:
     resolution: {integrity: sha512-bqWEnJ1Nt3neqx2q5SFfGS8r/ahumIakg3HcwtNlrVlwXIeNumWn/c7Pn/wKzGhf6SaW6H6uWXLqC30STCMchQ==}
     engines: {node: '>=18'}
 
+  globalthis@1.0.4:
+    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
+    engines: {node: '>= 0.4'}
+
+  globby@11.1.0:
+    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
+    engines: {node: '>=10'}
+
   gopd@1.2.0:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
 
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
@@ -1554,10 +2196,21 @@ packages:
     resolution: {integrity: sha512-GGTKBX4SD7Wdb8mqeDLni2oaRGYQWjWHGKPQ24ZMnUtKfcsVoiv4uX8+LJr1K6U5VW2Lu1BwJnj7uiori0YtRw==}
     engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
 
+  has-bigints@1.1.0:
+    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
+    engines: {node: '>= 0.4'}
+
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
 
+  has-property-descriptors@1.0.2:
+    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+
+  has-proto@1.2.0:
+    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
+    engines: {node: '>= 0.4'}
+
   has-symbols@1.1.0:
     resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
     engines: {node: '>= 0.4'}
@@ -1585,6 +2238,11 @@ packages:
     resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
     engines: {node: '>= 14'}
 
+  husky@9.1.7:
+    resolution: {integrity: sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   iconv-lite@0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
@@ -1609,21 +2267,88 @@ packages:
     resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
     engines: {node: '>=8'}
 
+  internal-slot@1.1.0:
+    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
+    engines: {node: '>= 0.4'}
+
+  is-array-buffer@3.0.5:
+    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
+    engines: {node: '>= 0.4'}
+
+  is-async-function@2.1.1:
+    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
+    engines: {node: '>= 0.4'}
+
+  is-bigint@1.1.0:
+    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
+    engines: {node: '>= 0.4'}
+
+  is-boolean-object@1.2.2:
+    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
+    engines: {node: '>= 0.4'}
+
+  is-bun-module@2.0.0:
+    resolution: {integrity: sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==}
+
+  is-callable@1.2.7:
+    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
+    engines: {node: '>= 0.4'}
+
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
+
+  is-data-view@1.0.2:
+    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
+    engines: {node: '>= 0.4'}
+
+  is-date-object@1.1.0:
+    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
+    engines: {node: '>= 0.4'}
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
 
+  is-finalizationregistry@1.1.1:
+    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
+    engines: {node: '>= 0.4'}
+
   is-fullwidth-code-point@3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
 
+  is-fullwidth-code-point@4.0.0:
+    resolution: {integrity: sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==}
+    engines: {node: '>=12'}
+
+  is-fullwidth-code-point@5.0.0:
+    resolution: {integrity: sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==}
+    engines: {node: '>=18'}
+
+  is-generator-function@1.1.0:
+    resolution: {integrity: sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==}
+    engines: {node: '>= 0.4'}
+
   is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
+  is-map@2.0.3:
+    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
+    engines: {node: '>= 0.4'}
+
+  is-negative-zero@2.0.3:
+    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
+    engines: {node: '>= 0.4'}
+
   is-node-process@1.2.0:
     resolution: {integrity: sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==}
 
+  is-number-object@1.1.1:
+    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
+    engines: {node: '>= 0.4'}
+
   is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
@@ -1631,9 +2356,73 @@ packages:
   is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
+  is-regex@1.2.1:
+    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
+    engines: {node: '>= 0.4'}
+
+  is-set@2.0.3:
+    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
+    engines: {node: '>= 0.4'}
+
+  is-shared-array-buffer@1.0.4:
+    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
+    engines: {node: '>= 0.4'}
+
+  is-string@1.1.1:
+    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
+    engines: {node: '>= 0.4'}
+
+  is-symbol@1.1.1:
+    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
+    engines: {node: '>= 0.4'}
+
+  is-typed-array@1.1.15:
+    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
+    engines: {node: '>= 0.4'}
+
+  is-weakmap@2.0.2:
+    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
+    engines: {node: '>= 0.4'}
+
+  is-weakref@1.1.1:
+    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
+    engines: {node: '>= 0.4'}
+
+  is-weakset@2.0.4:
+    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
+    engines: {node: '>= 0.4'}
+
+  isarray@2.0.5:
+    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
+  iterator.prototype@1.1.5:
+    resolution: {integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==}
+    engines: {node: '>= 0.4'}
+
+  javascript-natural-sort@0.7.1:
+    resolution: {integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==}
+
+  jotai@2.13.1:
+    resolution: {integrity: sha512-cRsw6kFeGC9Z/D3egVKrTXRweycZ4z/k7i2MrfCzPYsL9SIWcPXTyqv258/+Ay8VUEcihNiE/coBLE6Kic6b8A==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@babel/core': '>=7.0.0'
+      '@babel/template': '>=7.0.0'
+      '@types/react': '>=17.0.0'
+      react: '>=17.0.0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      '@babel/template':
+        optional: true
+      '@types/react':
+        optional: true
+      react:
+        optional: true
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -1667,18 +2456,53 @@ packages:
   json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
+  json5@1.0.2:
+    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
+    hasBin: true
+
   json5@2.2.3:
     resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
     engines: {node: '>=6'}
     hasBin: true
 
+  jsonfile@6.2.0:
+    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
+
+  jsx-ast-utils@3.3.5:
+    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
+    engines: {node: '>=4.0'}
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
+  language-subtag-registry@0.3.23:
+    resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
+
+  language-tags@1.0.9:
+    resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
+    engines: {node: '>=0.10'}
+
   levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  lilconfig@3.1.3:
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
+    engines: {node: '>=14'}
+
+  lint-staged@16.1.5:
+    resolution: {integrity: sha512-uAeQQwByI6dfV7wpt/gVqg+jAPaSp8WwOA8kKC/dv1qw14oGpnpAisY65ibGHUGDUv0rYaZ8CAJZ/1U8hUvC2A==}
+    engines: {node: '>=20.17'}
+    hasBin: true
+
+  listr2@9.0.1:
+    resolution: {integrity: sha512-SL0JY3DaxylDuo/MecFeiC+7pedM0zia33zl0vcjgwcq1q1FWWF1To9EIauPbl8GbMCU0R2e0uJ8bZunhYKD2g==}
+    engines: {node: '>=20.0.0'}
+
+  locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -1689,6 +2513,14 @@ packages:
   lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
+  log-update@6.1.0:
+    resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
+    engines: {node: '>=18'}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
   loupe@3.1.3:
     resolution: {integrity: sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==}
 
@@ -1713,6 +2545,10 @@ packages:
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
+  make-dir@3.1.0:
+    resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
+    engines: {node: '>=8'}
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -1733,6 +2569,10 @@ packages:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
 
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+
   min-indent@1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
@@ -1744,6 +2584,9 @@ packages:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
   mrmime@2.0.0:
     resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
     engines: {node: '>=10'}
@@ -1765,11 +2608,20 @@ packages:
     resolution: {integrity: sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==}
     engines: {node: ^18.17.0 || >=20.5.0}
 
+  nano-spawn@1.0.2:
+    resolution: {integrity: sha512-21t+ozMQDAL/UGgQVBbZ/xXvNO10++ZPuTmKRO8k9V3AClVRht49ahtDjfY8l1q6nSHOrE5ASfthzH3ol6R/hg==}
+    engines: {node: '>=20.17'}
+
   nanoid@3.3.11:
     resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  napi-postinstall@0.3.3:
+    resolution: {integrity: sha512-uTp172LLXSxuSYHv/kou+f6KW3SMppU9ivthaVTXian9sOt3XM/zHYHpRZiLgQoxeWfYUnslNWQHF1+G71xcow==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    hasBin: true
+
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
@@ -1779,6 +2631,42 @@ packages:
   nwsapi@2.2.16:
     resolution: {integrity: sha512-F1I/bimDpj3ncaNDhfyMWuFqmQDBwDB0Fogc2qpL3BWvkQteFD/8BzWuIRl83rq0DXfm8SGt/HFhLXZyljTXcQ==}
 
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+    engines: {node: '>= 0.4'}
+
+  object-keys@1.1.1:
+    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
+    engines: {node: '>= 0.4'}
+
+  object.assign@4.1.7:
+    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
+    engines: {node: '>= 0.4'}
+
+  object.entries@1.1.9:
+    resolution: {integrity: sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==}
+    engines: {node: '>= 0.4'}
+
+  object.fromentries@2.0.8:
+    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
+    engines: {node: '>= 0.4'}
+
+  object.groupby@1.0.3:
+    resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
+    engines: {node: '>= 0.4'}
+
+  object.values@1.2.1:
+    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
+    engines: {node: '>= 0.4'}
+
+  onetime@7.0.0:
+    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
+    engines: {node: '>=18'}
+
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
@@ -1786,14 +2674,30 @@ packages:
   outvariant@1.4.3:
     resolution: {integrity: sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==}
 
+  own-keys@1.0.1:
+    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
+    engines: {node: '>= 0.4'}
+
+  p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+
   p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
 
+  p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+
   p-locate@5.0.0:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
+  p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -1809,9 +2713,16 @@ packages:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
 
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
   path-to-regexp@6.3.0:
     resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==}
 
+  path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
@@ -1834,6 +2745,19 @@ packages:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
 
+  pidtree@0.6.0:
+    resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+
+  pkg-dir@4.2.0:
+    resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
+    engines: {node: '>=8'}
+
+  possible-typed-array-names@1.1.0:
+    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
+    engines: {node: '>= 0.4'}
+
   postcss@8.5.6:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -1842,6 +2766,10 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  prettier-linter-helpers@1.0.0:
+    resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
+    engines: {node: '>=6.0.0'}
+
   prettier@3.6.2:
     resolution: {integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==}
     engines: {node: '>=14'}
@@ -1851,6 +2779,9 @@ packages:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
 
+  prop-types@15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+
   proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
 
@@ -1872,6 +2803,9 @@ packages:
     peerDependencies:
       react: ^19.1.1
 
+  react-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
@@ -1934,9 +2868,17 @@ packages:
     resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
     engines: {node: '>=8'}
 
+  reflect.getprototypeof@1.0.10:
+    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
+    engines: {node: '>= 0.4'}
+
   regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
 
+  regexp.prototype.flags@1.5.4:
+    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
+    engines: {node: '>= 0.4'}
+
   require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -1948,10 +2890,29 @@ packages:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
 
+  resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+
+  resolve@1.22.10:
+    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
+  resolve@2.0.0-next.5:
+    resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
+    hasBin: true
+
+  restore-cursor@5.1.0:
+    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
+    engines: {node: '>=18'}
+
   reusify@1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
+  rfdc@1.4.1:
+    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
+
   rollup@4.46.2:
     resolution: {integrity: sha512-WMmLFI+Boh6xbop+OAGo9cQ3OgX9MIg7xOQjn+pTCwOkk+FNDAeAemXkJ3HzDJrVXleLOFVa1ipuc1AmEx1Dwg==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -1963,6 +2924,18 @@ packages:
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
+  safe-array-concat@1.1.3:
+    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
+    engines: {node: '>=0.4'}
+
+  safe-push-apply@1.0.0:
+    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
+    engines: {node: '>= 0.4'}
+
+  safe-regex-test@1.1.0:
+    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
+    engines: {node: '>= 0.4'}
+
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
@@ -1982,9 +2955,26 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  semver@7.7.2:
+    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   set-cookie-parser@2.7.1:
     resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==}
 
+  set-function-length@1.2.2:
+    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
+    engines: {node: '>= 0.4'}
+
+  set-function-name@2.0.2:
+    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
+    engines: {node: '>= 0.4'}
+
+  set-proto@1.0.0:
+    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
+    engines: {node: '>= 0.4'}
+
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -1993,6 +2983,22 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  side-channel-list@1.0.0:
+    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
+  side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+    engines: {node: '>= 0.4'}
+
   siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
 
@@ -2004,10 +3010,26 @@ packages:
     resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
     engines: {node: '>= 10'}
 
+  slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+
+  slice-ansi@5.0.0:
+    resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
+    engines: {node: '>=12'}
+
+  slice-ansi@7.1.0:
+    resolution: {integrity: sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==}
+    engines: {node: '>=18'}
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  stable-hash-x@0.2.0:
+    resolution: {integrity: sha512-o3yWv49B/o4QZk5ZcsALc6t0+eCelPc44zZsLtCQnZPDwFpDYSWcDnrv2TtMmMbQ7uKo3J0HTURCqckw23czNQ==}
+    engines: {node: '>=12.0.0'}
+
   stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
 
@@ -2018,17 +3040,60 @@ packages:
   std-env@3.9.0:
     resolution: {integrity: sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==}
 
+  stop-iteration-iterator@1.1.0:
+    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
+    engines: {node: '>= 0.4'}
+
   strict-event-emitter@0.5.1:
     resolution: {integrity: sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==}
 
+  string-argv@0.3.2:
+    resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
+    engines: {node: '>=0.6.19'}
+
   string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
 
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+
+  string.prototype.includes@2.0.1:
+    resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.matchall@4.0.12:
+    resolution: {integrity: sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.repeat@1.0.0:
+    resolution: {integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==}
+
+  string.prototype.trim@1.2.10:
+    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimend@1.0.9:
+    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimstart@1.0.8:
+    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
+    engines: {node: '>= 0.4'}
+
   strip-ansi@6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
 
+  strip-ansi@7.1.0:
+    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
+    engines: {node: '>=12'}
+
+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+
   strip-indent@3.0.0:
     resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
     engines: {node: '>=8'}
@@ -2040,13 +3105,25 @@ packages:
   strip-literal@3.0.0:
     resolution: {integrity: sha512-TcccoMhJOM3OebGhSBEmp3UZ2SfDMZUEBdRA/9ynfLi8yYajyWX3JiXArcJt4Umh4vISpspkQIY8ZZoCqjbviA==}
 
+  strip-outer@1.0.1:
+    resolution: {integrity: sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==}
+    engines: {node: '>=0.10.0'}
+
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
 
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
+  synckit@0.11.11:
+    resolution: {integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
@@ -2100,12 +3177,19 @@ packages:
     resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==}
     engines: {node: '>=18'}
 
+  trim-repeated@1.0.0:
+    resolution: {integrity: sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==}
+    engines: {node: '>=0.10.0'}
+
   ts-api-utils@2.1.0:
     resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
     engines: {node: '>=18.12'}
     peerDependencies:
       typescript: '>=4.8.4'
 
+  tsconfig-paths@3.15.0:
+    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
+
   tslib@2.8.0:
     resolution: {integrity: sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==}
 
@@ -2121,6 +3205,22 @@ packages:
     resolution: {integrity: sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==}
     engines: {node: '>=16'}
 
+  typed-array-buffer@1.0.3:
+    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-length@1.0.3:
+    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-offset@1.0.4:
+    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-length@1.0.7:
+    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
+    engines: {node: '>= 0.4'}
+
   typescript-eslint@8.39.0:
     resolution: {integrity: sha512-lH8FvtdtzcHJCkMOKnN73LIn6SLTpoojgJqDAxPm1jCR14eWSGPX8ul/gggBdPMk/d5+u9V854vTYQ8T5jF/1Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2133,6 +3233,10 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  unbox-primitive@1.1.0:
+    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
+    engines: {node: '>= 0.4'}
+
   undici-types@6.19.8:
     resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
 
@@ -2140,6 +3244,13 @@ packages:
     resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
     engines: {node: '>= 4.0.0'}
 
+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+
+  unrs-resolver@1.11.1:
+    resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
+
   update-browserslist-db@1.1.1:
     resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==}
     hasBin: true
@@ -2281,10 +3392,26 @@ packages:
     resolution: {integrity: sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==}
     engines: {node: '>=18'}
 
-  which@2.0.2:
-    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
-    engines: {node: '>= 8'}
-    hasBin: true
+  which-boxed-primitive@1.1.1:
+    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
+    engines: {node: '>= 0.4'}
+
+  which-builtin-type@1.2.1:
+    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
+    engines: {node: '>= 0.4'}
+
+  which-collection@1.0.2:
+    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
+    engines: {node: '>= 0.4'}
+
+  which-typed-array@1.1.19:
+    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
+    engines: {node: '>= 0.4'}
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
 
   why-is-node-running@2.3.0:
     resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
@@ -2303,6 +3430,10 @@ packages:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
 
+  wrap-ansi@9.0.0:
+    resolution: {integrity: sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==}
+    engines: {node: '>=18'}
+
   ws@8.18.0:
     resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==}
     engines: {node: '>=10.0.0'}
@@ -2329,6 +3460,11 @@ packages:
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
+  yaml@2.8.1:
+    resolution: {integrity: sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==}
+    engines: {node: '>= 14.6'}
+    hasBin: true
+
   yargs-parser@21.1.1:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
     engines: {node: '>=12'}
@@ -2362,12 +3498,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
@@ -2530,6 +3660,22 @@ snapshots:
 
   '@csstools/css-tokenizer@3.0.3': {}
 
+  '@emnapi/core@1.4.5':
+    dependencies:
+      '@emnapi/wasi-threads': 1.0.4
+      tslib: 2.8.0
+    optional: true
+
+  '@emnapi/runtime@1.4.5':
+    dependencies:
+      tslib: 2.8.0
+    optional: true
+
+  '@emnapi/wasi-threads@1.0.4':
+    dependencies:
+      tslib: 2.8.0
+    optional: true
+
   '@esbuild/aix-ppc64@0.25.3':
     optional: true
 
@@ -2746,6 +3892,13 @@ snapshots:
       outvariant: 1.4.3
       strict-event-emitter: 0.5.1
 
+  '@napi-rs/wasm-runtime@0.2.12':
+    dependencies:
+      '@emnapi/core': 1.4.5
+      '@emnapi/runtime': 1.4.5
+      '@tybys/wasm-util': 0.10.0
+    optional: true
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -2767,6 +3920,8 @@ snapshots:
 
   '@open-draft/until@2.1.0': {}
 
+  '@pkgr/core@0.2.9': {}
+
   '@polka/url@1.0.0-next.28': {}
 
   '@radix-ui/number@1.1.1': {}
@@ -3081,9 +4236,34 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.46.2':
     optional: true
 
+  '@rtsao/scc@1.1.0': {}
+
+  '@tanstack/eslint-plugin-query@5.83.1(eslint@9.33.0)(typescript@5.9.2)':
+    dependencies:
+      '@typescript-eslint/utils': 8.39.1(eslint@9.33.0)(typescript@5.9.2)
+      eslint: 9.33.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  '@tanstack/query-core@5.83.1': {}
+
+  '@tanstack/query-devtools@5.84.0': {}
+
+  '@tanstack/react-query-devtools@5.85.0(@tanstack/react-query@5.85.0(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@tanstack/query-devtools': 5.84.0
+      '@tanstack/react-query': 5.85.0(react@19.1.1)
+      react: 19.1.1
+
+  '@tanstack/react-query@5.85.0(react@19.1.1)':
+    dependencies:
+      '@tanstack/query-core': 5.83.1
+      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
@@ -3116,8 +4296,31 @@ snapshots:
     dependencies:
       '@testing-library/dom': 10.4.0
 
+  '@trivago/prettier-plugin-sort-imports@5.2.2(prettier@3.6.2)':
+    dependencies:
+      '@babel/generator': 7.28.0
+      '@babel/parser': 7.28.0
+      '@babel/traverse': 7.28.0
+      '@babel/types': 7.28.2
+      javascript-natural-sort: 0.7.1
+      lodash: 4.17.21
+      prettier: 3.6.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@tybys/wasm-util@0.10.0':
+    dependencies:
+      tslib: 2.8.0
+    optional: true
+
   '@types/aria-query@5.0.4': {}
 
+  '@types/axios@0.14.4':
+    dependencies:
+      axios: 1.11.0
+    transitivePeerDependencies:
+      - debug
+
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.27.0
@@ -3153,6 +4356,8 @@ snapshots:
 
   '@types/json-schema@7.0.15': {}
 
+  '@types/json5@0.0.29': {}
+
   '@types/node@22.8.1':
     dependencies:
       undici-types: 6.19.8
@@ -3186,13 +4391,42 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/eslint-plugin@8.39.1(@typescript-eslint/parser@8.39.1(eslint@9.33.0)(typescript@5.9.2))(eslint@9.33.0)(typescript@5.9.2)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+      '@typescript-eslint/parser': 8.39.1(eslint@9.33.0)(typescript@5.9.2)
+      '@typescript-eslint/scope-manager': 8.39.1
+      '@typescript-eslint/type-utils': 8.39.1(eslint@9.33.0)(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.39.1(eslint@9.33.0)(typescript@5.9.2)
+      '@typescript-eslint/visitor-keys': 8.39.1
+      eslint: 9.33.0
+      graphemer: 1.4.0
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.1.0(typescript@5.9.2)
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/parser@8.39.0(eslint@9.33.0)(typescript@5.9.2)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.39.0
       '@typescript-eslint/types': 8.39.0
       '@typescript-eslint/typescript-estree': 8.39.0(typescript@5.9.2)
       '@typescript-eslint/visitor-keys': 8.39.0
-      debug: 4.4.0
+      debug: 4.4.1
+      eslint: 9.33.0
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@8.39.1(eslint@9.33.0)(typescript@5.9.2)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.39.1
+      '@typescript-eslint/types': 8.39.1
+      '@typescript-eslint/typescript-estree': 8.39.1(typescript@5.9.2)
+      '@typescript-eslint/visitor-keys': 8.39.1
+      debug: 4.4.1
       eslint: 9.33.0
       typescript: 5.9.2
     transitivePeerDependencies:
@@ -3202,7 +4436,16 @@ snapshots:
     dependencies:
       '@typescript-eslint/tsconfig-utils': 8.39.0(typescript@5.9.2)
       '@typescript-eslint/types': 8.39.0
-      debug: 4.4.0
+      debug: 4.4.1
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/project-service@8.39.1(typescript@5.9.2)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.39.1(typescript@5.9.2)
+      '@typescript-eslint/types': 8.39.1
+      debug: 4.4.1
       typescript: 5.9.2
     transitivePeerDependencies:
       - supports-color
@@ -3212,16 +4455,37 @@ snapshots:
       '@typescript-eslint/types': 8.39.0
       '@typescript-eslint/visitor-keys': 8.39.0
 
+  '@typescript-eslint/scope-manager@8.39.1':
+    dependencies:
+      '@typescript-eslint/types': 8.39.1
+      '@typescript-eslint/visitor-keys': 8.39.1
+
   '@typescript-eslint/tsconfig-utils@8.39.0(typescript@5.9.2)':
     dependencies:
       typescript: 5.9.2
 
+  '@typescript-eslint/tsconfig-utils@8.39.1(typescript@5.9.2)':
+    dependencies:
+      typescript: 5.9.2
+
   '@typescript-eslint/type-utils@8.39.0(eslint@9.33.0)(typescript@5.9.2)':
     dependencies:
       '@typescript-eslint/types': 8.39.0
       '@typescript-eslint/typescript-estree': 8.39.0(typescript@5.9.2)
       '@typescript-eslint/utils': 8.39.0(eslint@9.33.0)(typescript@5.9.2)
-      debug: 4.4.0
+      debug: 4.4.1
+      eslint: 9.33.0
+      ts-api-utils: 2.1.0(typescript@5.9.2)
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/type-utils@8.39.1(eslint@9.33.0)(typescript@5.9.2)':
+    dependencies:
+      '@typescript-eslint/types': 8.39.1
+      '@typescript-eslint/typescript-estree': 8.39.1(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.39.1(eslint@9.33.0)(typescript@5.9.2)
+      debug: 4.4.1
       eslint: 9.33.0
       ts-api-utils: 2.1.0(typescript@5.9.2)
       typescript: 5.9.2
@@ -3230,13 +4494,31 @@ snapshots:
 
   '@typescript-eslint/types@8.39.0': {}
 
+  '@typescript-eslint/types@8.39.1': {}
+
   '@typescript-eslint/typescript-estree@8.39.0(typescript@5.9.2)':
     dependencies:
       '@typescript-eslint/project-service': 8.39.0(typescript@5.9.2)
       '@typescript-eslint/tsconfig-utils': 8.39.0(typescript@5.9.2)
       '@typescript-eslint/types': 8.39.0
       '@typescript-eslint/visitor-keys': 8.39.0
-      debug: 4.4.0
+      debug: 4.4.1
+      fast-glob: 3.3.2
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.6.3
+      ts-api-utils: 2.1.0(typescript@5.9.2)
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/typescript-estree@8.39.1(typescript@5.9.2)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.39.1(typescript@5.9.2)
+      '@typescript-eslint/tsconfig-utils': 8.39.1(typescript@5.9.2)
+      '@typescript-eslint/types': 8.39.1
+      '@typescript-eslint/visitor-keys': 8.39.1
+      debug: 4.4.1
       fast-glob: 3.3.2
       is-glob: 4.0.3
       minimatch: 9.0.5
@@ -3257,12 +4539,87 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/utils@8.39.1(eslint@9.33.0)(typescript@5.9.2)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.33.0)
+      '@typescript-eslint/scope-manager': 8.39.1
+      '@typescript-eslint/types': 8.39.1
+      '@typescript-eslint/typescript-estree': 8.39.1(typescript@5.9.2)
+      eslint: 9.33.0
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/visitor-keys@8.39.0':
     dependencies:
       '@typescript-eslint/types': 8.39.0
       eslint-visitor-keys: 4.2.1
 
-  '@vitejs/plugin-react@5.0.0(vite@7.1.1(@types/node@22.8.1))':
+  '@typescript-eslint/visitor-keys@8.39.1':
+    dependencies:
+      '@typescript-eslint/types': 8.39.1
+      eslint-visitor-keys: 4.2.1
+
+  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-android-arm64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-darwin-arm64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-darwin-x64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-freebsd-x64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
+    dependencies:
+      '@napi-rs/wasm-runtime': 0.2.12
+    optional: true
+
+  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
+    optional: true
+
+  '@vitejs/plugin-react@5.0.0(vite@7.1.1(@types/node@22.8.1)(yaml@2.8.1))':
     dependencies:
       '@babel/core': 7.28.0
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.0)
@@ -3270,21 +4627,21 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-beta.30
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
-      vite: 7.1.1(@types/node@22.8.1)
+      vite: 7.1.1(@types/node@22.8.1)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/browser@2.1.3(@types/node@22.8.1)(@vitest/spy@3.2.4)(typescript@5.9.2)(vite@7.1.1(@types/node@22.8.1))(vitest@3.2.4)':
+  '@vitest/browser@2.1.3(@types/node@22.8.1)(@vitest/spy@3.2.4)(typescript@5.9.2)(vite@7.1.1(@types/node@22.8.1)(yaml@2.8.1))(vitest@3.2.4)':
     dependencies:
       '@testing-library/dom': 10.4.0
       '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.0)
-      '@vitest/mocker': 2.1.3(@vitest/spy@3.2.4)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))(vite@7.1.1(@types/node@22.8.1))
+      '@vitest/mocker': 2.1.3(@vitest/spy@3.2.4)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))(vite@7.1.1(@types/node@22.8.1)(yaml@2.8.1))
       '@vitest/utils': 2.1.3
       magic-string: 0.30.17
       msw: 2.10.4(@types/node@22.8.1)(typescript@5.9.2)
       sirv: 2.0.4
       tinyrainbow: 1.2.0
-      vitest: 3.2.4(@types/node@22.8.1)(@vitest/browser@2.1.3)(jsdom@26.1.0)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))
+      vitest: 3.2.4(@types/node@22.8.1)(@vitest/browser@2.1.3)(jsdom@26.1.0)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))(yaml@2.8.1)
       ws: 8.18.0
     transitivePeerDependencies:
       - '@types/node'
@@ -3302,23 +4659,23 @@ snapshots:
       chai: 5.2.0
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@2.1.3(@vitest/spy@3.2.4)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))(vite@7.1.1(@types/node@22.8.1))':
+  '@vitest/mocker@2.1.3(@vitest/spy@3.2.4)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))(vite@7.1.1(@types/node@22.8.1)(yaml@2.8.1))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
       msw: 2.10.4(@types/node@22.8.1)(typescript@5.9.2)
-      vite: 7.1.1(@types/node@22.8.1)
+      vite: 7.1.1(@types/node@22.8.1)(yaml@2.8.1)
 
-  '@vitest/mocker@3.2.4(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))(vite@7.1.1(@types/node@22.8.1))':
+  '@vitest/mocker@3.2.4(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))(vite@7.1.1(@types/node@22.8.1)(yaml@2.8.1))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
       msw: 2.10.4(@types/node@22.8.1)(typescript@5.9.2)
-      vite: 7.1.1(@types/node@22.8.1)
+      vite: 7.1.1(@types/node@22.8.1)(yaml@2.8.1)
 
   '@vitest/pretty-format@2.1.3':
     dependencies:
@@ -3347,7 +4704,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':
@@ -3375,14 +4732,22 @@ snapshots:
     dependencies:
       type-fest: 0.21.3
 
+  ansi-escapes@7.0.0:
+    dependencies:
+      environment: 1.1.0
+
   ansi-regex@5.0.1: {}
 
+  ansi-regex@6.1.0: {}
+
   ansi-styles@4.3.0:
     dependencies:
       color-convert: 2.0.1
 
   ansi-styles@5.2.0: {}
 
+  ansi-styles@6.2.1: {}
+
   argparse@2.0.1: {}
 
   aria-hidden@1.2.4:
@@ -3393,10 +4758,93 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
+  aria-query@5.3.2: {}
+
+  array-buffer-byte-length@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      is-array-buffer: 3.0.5
+
+  array-includes@3.1.9:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      is-string: 1.1.1
+      math-intrinsics: 1.1.0
+
+  array-union@2.1.0: {}
+
+  array.prototype.findlast@1.2.5:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.findlastindex@1.2.6:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.flat@1.3.3:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.flatmap@1.3.3:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.tosorted@1.1.4:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-shim-unscopables: 1.1.0
+
+  arraybuffer.prototype.slice@1.0.4:
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      is-array-buffer: 3.0.5
+
   assertion-error@2.0.1: {}
 
+  ast-types-flow@0.0.8: {}
+
+  async-function@1.0.0: {}
+
+  async@3.2.6: {}
+
   asynckit@0.4.0: {}
 
+  available-typed-arrays@1.0.7:
+    dependencies:
+      possible-typed-array-names: 1.1.0
+
+  axe-core@4.10.3: {}
+
   axios@1.11.0:
     dependencies:
       follow-redirects: 1.15.9
@@ -3405,6 +4853,8 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
+  axobject-query@4.1.0: {}
+
   balanced-match@1.0.2: {}
 
   brace-expansion@1.1.11:
@@ -3434,6 +4884,18 @@ snapshots:
       es-errors: 1.3.0
       function-bind: 1.1.2
 
+  call-bind@1.0.8:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      get-intrinsic: 1.3.0
+      set-function-length: 1.2.2
+
+  call-bound@1.0.4:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+
   callsites@3.1.0: {}
 
   caniuse-lite@1.0.30001669: {}
@@ -3451,12 +4913,23 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  chalk@5.5.0: {}
+
   check-error@2.1.1: {}
 
   class-variance-authority@0.7.1:
     dependencies:
       clsx: 2.1.1
 
+  cli-cursor@5.0.0:
+    dependencies:
+      restore-cursor: 5.1.0
+
+  cli-truncate@4.0.0:
+    dependencies:
+      slice-ansi: 5.0.0
+      string-width: 7.2.0
+
   cli-width@4.1.0: {}
 
   cliui@8.0.1:
@@ -3473,12 +4946,22 @@ snapshots:
 
   color-name@1.1.4: {}
 
+  colorette@2.0.20: {}
+
   combined-stream@1.0.8:
     dependencies:
       delayed-stream: 1.0.0
 
+  commander@13.1.0: {}
+
+  commander@14.0.0: {}
+
+  commondir@1.0.1: {}
+
   concat-map@0.0.1: {}
 
+  confusing-browser-globals@1.0.11: {}
+
   convert-source-map@2.0.0: {}
 
   cookie@0.7.2: {}
@@ -3500,11 +4983,35 @@ snapshots:
 
   csstype@3.1.3: {}
 
+  damerau-levenshtein@1.0.8: {}
+
   data-urls@5.0.0:
     dependencies:
       whatwg-mimetype: 4.0.0
       whatwg-url: 14.2.0
 
+  data-view-buffer@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-length@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-offset@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  debug@3.2.7:
+    dependencies:
+      ms: 2.1.3
+
   debug@4.4.0:
     dependencies:
       ms: 2.1.3
@@ -3519,12 +5026,32 @@ snapshots:
 
   deep-is@0.1.4: {}
 
+  define-data-property@1.1.4:
+    dependencies:
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  define-properties@1.2.1:
+    dependencies:
+      define-data-property: 1.1.4
+      has-property-descriptors: 1.0.2
+      object-keys: 1.1.1
+
   delayed-stream@1.0.0: {}
 
   dequal@2.0.3: {}
 
   detect-node-es@1.1.0: {}
 
+  dir-glob@3.0.1:
+    dependencies:
+      path-type: 4.0.0
+
+  doctrine@2.1.0:
+    dependencies:
+      esutils: 2.0.3
+
   dom-accessibility-api@0.5.16: {}
 
   dom-accessibility-api@0.6.3: {}
@@ -3537,14 +5064,98 @@ snapshots:
 
   electron-to-chromium@1.5.45: {}
 
+  email-addresses@5.0.0: {}
+
+  emoji-regex@10.4.0: {}
+
   emoji-regex@8.0.0: {}
 
+  emoji-regex@9.2.2: {}
+
   entities@4.5.0: {}
 
+  environment@1.1.0: {}
+
+  es-abstract@1.24.0:
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      arraybuffer.prototype.slice: 1.0.4
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      data-view-buffer: 1.0.2
+      data-view-byte-length: 1.0.2
+      data-view-byte-offset: 1.0.1
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-set-tostringtag: 2.1.0
+      es-to-primitive: 1.3.0
+      function.prototype.name: 1.1.8
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      get-symbol-description: 1.1.0
+      globalthis: 1.0.4
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+      has-proto: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      internal-slot: 1.1.0
+      is-array-buffer: 3.0.5
+      is-callable: 1.2.7
+      is-data-view: 1.0.2
+      is-negative-zero: 2.0.3
+      is-regex: 1.2.1
+      is-set: 2.0.3
+      is-shared-array-buffer: 1.0.4
+      is-string: 1.1.1
+      is-typed-array: 1.1.15
+      is-weakref: 1.1.1
+      math-intrinsics: 1.1.0
+      object-inspect: 1.13.4
+      object-keys: 1.1.1
+      object.assign: 4.1.7
+      own-keys: 1.0.1
+      regexp.prototype.flags: 1.5.4
+      safe-array-concat: 1.1.3
+      safe-push-apply: 1.0.0
+      safe-regex-test: 1.1.0
+      set-proto: 1.0.0
+      stop-iteration-iterator: 1.1.0
+      string.prototype.trim: 1.2.10
+      string.prototype.trimend: 1.0.9
+      string.prototype.trimstart: 1.0.8
+      typed-array-buffer: 1.0.3
+      typed-array-byte-length: 1.0.3
+      typed-array-byte-offset: 1.0.4
+      typed-array-length: 1.0.7
+      unbox-primitive: 1.1.0
+      which-typed-array: 1.1.19
+
   es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}
 
+  es-iterator-helpers@1.2.1:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-set-tostringtag: 2.1.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.3.0
+      globalthis: 1.0.4
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+      has-proto: 1.2.0
+      has-symbols: 1.1.0
+      internal-slot: 1.1.0
+      iterator.prototype: 1.1.5
+      safe-array-concat: 1.1.3
+
   es-module-lexer@1.7.0: {}
 
   es-object-atoms@1.1.1:
@@ -3558,6 +5169,16 @@ snapshots:
       has-tostringtag: 1.0.2
       hasown: 2.0.2
 
+  es-shim-unscopables@1.1.0:
+    dependencies:
+      hasown: 2.0.2
+
+  es-to-primitive@1.3.0:
+    dependencies:
+      is-callable: 1.2.7
+      is-date-object: 1.1.0
+      is-symbol: 1.1.1
+
   esbuild@0.25.3:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.25.3
@@ -3588,8 +5209,145 @@ snapshots:
 
   escalade@3.2.0: {}
 
+  escape-string-regexp@1.0.5: {}
+
   escape-string-regexp@4.0.0: {}
 
+  eslint-config-airbnb-base@15.0.0(eslint-plugin-import@2.32.0)(eslint@9.33.0):
+    dependencies:
+      confusing-browser-globals: 1.0.11
+      eslint: 9.33.0
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.39.1(eslint@9.33.0)(typescript@5.9.2))(eslint-import-resolver-typescript@4.4.4)(eslint@9.33.0)
+      object.assign: 4.1.7
+      object.entries: 1.1.9
+      semver: 6.3.1
+
+  eslint-config-airbnb-typescript@18.0.0(@typescript-eslint/eslint-plugin@8.39.1(@typescript-eslint/parser@8.39.1(eslint@9.33.0)(typescript@5.9.2))(eslint@9.33.0)(typescript@5.9.2))(@typescript-eslint/parser@8.39.1(eslint@9.33.0)(typescript@5.9.2))(eslint-plugin-import@2.32.0)(eslint@9.33.0):
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.39.1(@typescript-eslint/parser@8.39.1(eslint@9.33.0)(typescript@5.9.2))(eslint@9.33.0)(typescript@5.9.2)
+      '@typescript-eslint/parser': 8.39.1(eslint@9.33.0)(typescript@5.9.2)
+      eslint: 9.33.0
+      eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.32.0)(eslint@9.33.0)
+    transitivePeerDependencies:
+      - eslint-plugin-import
+
+  eslint-config-airbnb@19.0.4(eslint-plugin-import@2.32.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@9.33.0))(eslint-plugin-react-hooks@5.2.0(eslint@9.33.0))(eslint-plugin-react@7.37.5(eslint@9.33.0))(eslint@9.33.0):
+    dependencies:
+      eslint: 9.33.0
+      eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.32.0)(eslint@9.33.0)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.39.1(eslint@9.33.0)(typescript@5.9.2))(eslint-import-resolver-typescript@4.4.4)(eslint@9.33.0)
+      eslint-plugin-jsx-a11y: 6.10.2(eslint@9.33.0)
+      eslint-plugin-react: 7.37.5(eslint@9.33.0)
+      eslint-plugin-react-hooks: 5.2.0(eslint@9.33.0)
+      object.assign: 4.1.7
+      object.entries: 1.1.9
+
+  eslint-config-prettier@10.1.8(eslint@9.33.0):
+    dependencies:
+      eslint: 9.33.0
+
+  eslint-import-context@0.1.9(unrs-resolver@1.11.1):
+    dependencies:
+      get-tsconfig: 4.10.1
+      stable-hash-x: 0.2.0
+    optionalDependencies:
+      unrs-resolver: 1.11.1
+
+  eslint-import-resolver-alias@1.1.2(eslint-plugin-import@2.32.0):
+    dependencies:
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.39.1(eslint@9.33.0)(typescript@5.9.2))(eslint-import-resolver-typescript@4.4.4)(eslint@9.33.0)
+
+  eslint-import-resolver-node@0.3.9:
+    dependencies:
+      debug: 3.2.7
+      is-core-module: 2.16.1
+      resolve: 1.22.10
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0)(eslint@9.33.0):
+    dependencies:
+      debug: 4.4.1
+      eslint: 9.33.0
+      eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
+      get-tsconfig: 4.10.1
+      is-bun-module: 2.0.0
+      stable-hash-x: 0.2.0
+      tinyglobby: 0.2.14
+      unrs-resolver: 1.11.1
+    optionalDependencies:
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.39.1(eslint@9.33.0)(typescript@5.9.2))(eslint-import-resolver-typescript@4.4.4)(eslint@9.33.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.39.1(eslint@9.33.0)(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.4.4)(eslint@9.33.0):
+    dependencies:
+      debug: 3.2.7
+    optionalDependencies:
+      '@typescript-eslint/parser': 8.39.1(eslint@9.33.0)(typescript@5.9.2)
+      eslint: 9.33.0
+      eslint-import-resolver-node: 0.3.9
+      eslint-import-resolver-typescript: 4.4.4(eslint-plugin-import@2.32.0)(eslint@9.33.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.39.1(eslint@9.33.0)(typescript@5.9.2))(eslint-import-resolver-typescript@4.4.4)(eslint@9.33.0):
+    dependencies:
+      '@rtsao/scc': 1.1.0
+      array-includes: 3.1.9
+      array.prototype.findlastindex: 1.2.6
+      array.prototype.flat: 1.3.3
+      array.prototype.flatmap: 1.3.3
+      debug: 3.2.7
+      doctrine: 2.1.0
+      eslint: 9.33.0
+      eslint-import-resolver-node: 0.3.9
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.39.1(eslint@9.33.0)(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.4.4)(eslint@9.33.0)
+      hasown: 2.0.2
+      is-core-module: 2.16.1
+      is-glob: 4.0.3
+      minimatch: 3.1.2
+      object.fromentries: 2.0.8
+      object.groupby: 1.0.3
+      object.values: 1.2.1
+      semver: 6.3.1
+      string.prototype.trimend: 1.0.9
+      tsconfig-paths: 3.15.0
+    optionalDependencies:
+      '@typescript-eslint/parser': 8.39.1(eslint@9.33.0)(typescript@5.9.2)
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+
+  eslint-plugin-jsx-a11y@6.10.2(eslint@9.33.0):
+    dependencies:
+      aria-query: 5.3.2
+      array-includes: 3.1.9
+      array.prototype.flatmap: 1.3.3
+      ast-types-flow: 0.0.8
+      axe-core: 4.10.3
+      axobject-query: 4.1.0
+      damerau-levenshtein: 1.0.8
+      emoji-regex: 9.2.2
+      eslint: 9.33.0
+      hasown: 2.0.2
+      jsx-ast-utils: 3.3.5
+      language-tags: 1.0.9
+      minimatch: 3.1.2
+      object.fromentries: 2.0.8
+      safe-regex-test: 1.1.0
+      string.prototype.includes: 2.0.1
+
+  eslint-plugin-prettier@5.5.4(eslint-config-prettier@10.1.8(eslint@9.33.0))(eslint@9.33.0)(prettier@3.6.2):
+    dependencies:
+      eslint: 9.33.0
+      prettier: 3.6.2
+      prettier-linter-helpers: 1.0.0
+      synckit: 0.11.11
+    optionalDependencies:
+      eslint-config-prettier: 10.1.8(eslint@9.33.0)
+
   eslint-plugin-react-hooks@5.2.0(eslint@9.33.0):
     dependencies:
       eslint: 9.33.0
@@ -3598,6 +5356,28 @@ snapshots:
     dependencies:
       eslint: 9.33.0
 
+  eslint-plugin-react@7.37.5(eslint@9.33.0):
+    dependencies:
+      array-includes: 3.1.9
+      array.prototype.findlast: 1.2.5
+      array.prototype.flatmap: 1.3.3
+      array.prototype.tosorted: 1.1.4
+      doctrine: 2.1.0
+      es-iterator-helpers: 1.2.1
+      eslint: 9.33.0
+      estraverse: 5.3.0
+      hasown: 2.0.2
+      jsx-ast-utils: 3.3.5
+      minimatch: 3.1.2
+      object.entries: 1.1.9
+      object.fromentries: 2.0.8
+      object.values: 1.2.1
+      prop-types: 15.8.1
+      resolve: 2.0.0-next.5
+      semver: 6.3.1
+      string.prototype.matchall: 4.0.12
+      string.prototype.repeat: 1.0.0
+
   eslint-scope@8.4.0:
     dependencies:
       esrecurse: 4.3.0
@@ -3669,10 +5449,14 @@ snapshots:
 
   esutils@2.0.3: {}
 
+  eventemitter3@5.0.1: {}
+
   expect-type@1.2.1: {}
 
   fast-deep-equal@3.1.3: {}
 
+  fast-diff@1.3.0: {}
+
   fast-glob@3.3.2:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -3697,10 +5481,29 @@ snapshots:
     dependencies:
       flat-cache: 4.0.1
 
+  filename-reserved-regex@2.0.0: {}
+
+  filenamify@4.3.0:
+    dependencies:
+      filename-reserved-regex: 2.0.0
+      strip-outer: 1.0.1
+      trim-repeated: 1.0.0
+
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
 
+  find-cache-dir@3.3.2:
+    dependencies:
+      commondir: 1.0.1
+      make-dir: 3.1.0
+      pkg-dir: 4.2.0
+
+  find-up@4.1.0:
+    dependencies:
+      locate-path: 5.0.0
+      path-exists: 4.0.0
+
   find-up@5.0.0:
     dependencies:
       locate-path: 6.0.0
@@ -3715,6 +5518,10 @@ snapshots:
 
   follow-redirects@1.15.9: {}
 
+  for-each@0.3.5:
+    dependencies:
+      is-callable: 1.2.7
+
   form-data@4.0.4:
     dependencies:
       asynckit: 0.4.0
@@ -3723,15 +5530,34 @@ snapshots:
       hasown: 2.0.2
       mime-types: 2.1.35
 
+  fs-extra@11.3.1:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.0
+      universalify: 2.0.1
+
   fsevents@2.3.3:
     optional: true
 
   function-bind@1.1.2: {}
 
+  function.prototype.name@1.1.8:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      functions-have-names: 1.2.3
+      hasown: 2.0.2
+      is-callable: 1.2.7
+
+  functions-have-names@1.2.3: {}
+
   gensync@1.0.0-beta.2: {}
 
   get-caller-file@2.0.5: {}
 
+  get-east-asian-width@1.3.0: {}
+
   get-intrinsic@1.3.0:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -3752,6 +5578,26 @@ snapshots:
       dunder-proto: 1.0.1
       es-object-atoms: 1.1.1
 
+  get-symbol-description@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+
+  get-tsconfig@4.10.1:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
+  gh-pages@6.3.0:
+    dependencies:
+      async: 3.2.6
+      commander: 13.1.0
+      email-addresses: 5.0.0
+      filenamify: 4.3.0
+      find-cache-dir: 3.3.2
+      fs-extra: 11.3.1
+      globby: 11.1.0
+
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
@@ -3764,14 +5610,40 @@ snapshots:
 
   globals@16.3.0: {}
 
+  globalthis@1.0.4:
+    dependencies:
+      define-properties: 1.2.1
+      gopd: 1.2.0
+
+  globby@11.1.0:
+    dependencies:
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.2
+      ignore: 5.3.2
+      merge2: 1.4.1
+      slash: 3.0.0
+
   gopd@1.2.0: {}
 
+  graceful-fs@4.2.11: {}
+
   graphemer@1.4.0: {}
 
   graphql@16.9.0: {}
 
+  has-bigints@1.1.0: {}
+
   has-flag@4.0.0: {}
 
+  has-property-descriptors@1.0.2:
+    dependencies:
+      es-define-property: 1.0.1
+
+  has-proto@1.2.0:
+    dependencies:
+      dunder-proto: 1.0.1
+
   has-symbols@1.1.0: {}
 
   has-tostringtag@1.0.2:
@@ -3802,6 +5674,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  husky@9.1.7: {}
+
   iconv-lite@0.6.3:
     dependencies:
       safer-buffer: 2.1.2
@@ -3819,22 +5693,157 @@ snapshots:
 
   indent-string@4.0.0: {}
 
+  internal-slot@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      hasown: 2.0.2
+      side-channel: 1.1.0
+
+  is-array-buffer@3.0.5:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+
+  is-async-function@2.1.1:
+    dependencies:
+      async-function: 1.0.0
+      call-bound: 1.0.4
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+
+  is-bigint@1.1.0:
+    dependencies:
+      has-bigints: 1.1.0
+
+  is-boolean-object@1.2.2:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-bun-module@2.0.0:
+    dependencies:
+      semver: 7.7.2
+
+  is-callable@1.2.7: {}
+
+  is-core-module@2.16.1:
+    dependencies:
+      hasown: 2.0.2
+
+  is-data-view@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      is-typed-array: 1.1.15
+
+  is-date-object@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
   is-extglob@2.1.1: {}
 
+  is-finalizationregistry@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+
   is-fullwidth-code-point@3.0.0: {}
 
+  is-fullwidth-code-point@4.0.0: {}
+
+  is-fullwidth-code-point@5.0.0:
+    dependencies:
+      get-east-asian-width: 1.3.0
+
+  is-generator-function@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+
   is-glob@4.0.3:
     dependencies:
       is-extglob: 2.1.1
 
+  is-map@2.0.3: {}
+
+  is-negative-zero@2.0.3: {}
+
   is-node-process@1.2.0: {}
 
+  is-number-object@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
   is-number@7.0.0: {}
 
   is-potential-custom-element-name@1.0.1: {}
 
+  is-regex@1.2.1:
+    dependencies:
+      call-bound: 1.0.4
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  is-set@2.0.3: {}
+
+  is-shared-array-buffer@1.0.4:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-string@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-symbol@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-symbols: 1.1.0
+      safe-regex-test: 1.1.0
+
+  is-typed-array@1.1.15:
+    dependencies:
+      which-typed-array: 1.1.19
+
+  is-weakmap@2.0.2: {}
+
+  is-weakref@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-weakset@2.0.4:
+    dependencies:
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+
+  isarray@2.0.5: {}
+
   isexe@2.0.0: {}
 
+  iterator.prototype@1.1.5:
+    dependencies:
+      define-data-property: 1.1.4
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      has-symbols: 1.1.0
+      set-function-name: 2.0.2
+
+  javascript-natural-sort@0.7.1: {}
+
+  jotai@2.13.1(@babel/core@7.28.0)(@babel/template@7.27.2)(@types/react@19.1.9)(react@19.1.1):
+    optionalDependencies:
+      '@babel/core': 7.28.0
+      '@babel/template': 7.27.2
+      '@types/react': 19.1.9
+      react: 19.1.1
+
   js-tokens@4.0.0: {}
 
   js-tokens@9.0.1: {}
@@ -3878,17 +5887,70 @@ snapshots:
 
   json-stable-stringify-without-jsonify@1.0.1: {}
 
+  json5@1.0.2:
+    dependencies:
+      minimist: 1.2.8
+
   json5@2.2.3: {}
 
+  jsonfile@6.2.0:
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
+  jsx-ast-utils@3.3.5:
+    dependencies:
+      array-includes: 3.1.9
+      array.prototype.flat: 1.3.3
+      object.assign: 4.1.7
+      object.values: 1.2.1
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
 
+  language-subtag-registry@0.3.23: {}
+
+  language-tags@1.0.9:
+    dependencies:
+      language-subtag-registry: 0.3.23
+
   levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  lilconfig@3.1.3: {}
+
+  lint-staged@16.1.5:
+    dependencies:
+      chalk: 5.5.0
+      commander: 14.0.0
+      debug: 4.4.1
+      lilconfig: 3.1.3
+      listr2: 9.0.1
+      micromatch: 4.0.8
+      nano-spawn: 1.0.2
+      pidtree: 0.6.0
+      string-argv: 0.3.2
+      yaml: 2.8.1
+    transitivePeerDependencies:
+      - supports-color
+
+  listr2@9.0.1:
+    dependencies:
+      cli-truncate: 4.0.0
+      colorette: 2.0.20
+      eventemitter3: 5.0.1
+      log-update: 6.1.0
+      rfdc: 1.4.1
+      wrap-ansi: 9.0.0
+
+  locate-path@5.0.0:
+    dependencies:
+      p-locate: 4.1.0
+
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
@@ -3897,6 +5959,18 @@ snapshots:
 
   lodash@4.17.21: {}
 
+  log-update@6.1.0:
+    dependencies:
+      ansi-escapes: 7.0.0
+      cli-cursor: 5.0.0
+      slice-ansi: 7.1.0
+      strip-ansi: 7.1.0
+      wrap-ansi: 9.0.0
+
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
   loupe@3.1.3: {}
 
   loupe@3.2.0: {}
@@ -3917,6 +5991,10 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  make-dir@3.1.0:
+    dependencies:
+      semver: 6.3.1
+
   math-intrinsics@1.1.0: {}
 
   merge2@1.4.1: {}
@@ -3932,6 +6010,8 @@ snapshots:
     dependencies:
       mime-db: 1.52.0
 
+  mimic-function@5.0.1: {}
+
   min-indent@1.0.1: {}
 
   minimatch@3.1.2:
@@ -3942,6 +6022,8 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.1
 
+  minimist@1.2.8: {}
+
   mrmime@2.0.0: {}
 
   ms@2.1.3: {}
@@ -3973,14 +6055,64 @@ snapshots:
 
   mute-stream@2.0.0: {}
 
+  nano-spawn@1.0.2: {}
+
   nanoid@3.3.11: {}
 
+  napi-postinstall@0.3.3: {}
+
   natural-compare@1.4.0: {}
 
   node-releases@2.0.18: {}
 
   nwsapi@2.2.16: {}
 
+  object-assign@4.1.1: {}
+
+  object-inspect@1.13.4: {}
+
+  object-keys@1.1.1: {}
+
+  object.assign@4.1.7:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+      has-symbols: 1.1.0
+      object-keys: 1.1.1
+
+  object.entries@1.1.9:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  object.fromentries@2.0.8:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-object-atoms: 1.1.1
+
+  object.groupby@1.0.3:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+
+  object.values@1.2.1:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  onetime@7.0.0:
+    dependencies:
+      mimic-function: 5.0.1
+
   optionator@0.9.4:
     dependencies:
       deep-is: 0.1.4
@@ -3992,14 +6124,30 @@ snapshots:
 
   outvariant@1.4.3: {}
 
+  own-keys@1.0.1:
+    dependencies:
+      get-intrinsic: 1.3.0
+      object-keys: 1.1.1
+      safe-push-apply: 1.0.0
+
+  p-limit@2.3.0:
+    dependencies:
+      p-try: 2.2.0
+
   p-limit@3.1.0:
     dependencies:
       yocto-queue: 0.1.0
 
+  p-locate@4.1.0:
+    dependencies:
+      p-limit: 2.3.0
+
   p-locate@5.0.0:
     dependencies:
       p-limit: 3.1.0
 
+  p-try@2.2.0: {}
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -4012,8 +6160,12 @@ snapshots:
 
   path-key@3.1.1: {}
 
+  path-parse@1.0.7: {}
+
   path-to-regexp@6.3.0: {}
 
+  path-type@4.0.0: {}
+
   pathe@2.0.3: {}
 
   pathval@2.0.0: {}
@@ -4026,6 +6178,14 @@ snapshots:
 
   picomatch@4.0.3: {}
 
+  pidtree@0.6.0: {}
+
+  pkg-dir@4.2.0:
+    dependencies:
+      find-up: 4.1.0
+
+  possible-typed-array-names@1.1.0: {}
+
   postcss@8.5.6:
     dependencies:
       nanoid: 3.3.11
@@ -4034,6 +6194,10 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
+  prettier-linter-helpers@1.0.0:
+    dependencies:
+      fast-diff: 1.3.0
+
   prettier@3.6.2: {}
 
   pretty-format@27.5.1:
@@ -4042,6 +6206,12 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 17.0.2
 
+  prop-types@15.8.1:
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+
   proxy-from-env@1.1.0: {}
 
   psl@1.9.0: {}
@@ -4057,6 +6227,8 @@ snapshots:
       react: 19.1.1
       scheduler: 0.26.0
 
+  react-is@16.13.1: {}
+
   react-is@17.0.2: {}
 
   react-refresh@0.17.0: {}
@@ -4109,16 +6281,57 @@ snapshots:
       indent-string: 4.0.0
       strip-indent: 3.0.0
 
+  reflect.getprototypeof@1.0.10:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      which-builtin-type: 1.2.1
+
   regenerator-runtime@0.14.1: {}
 
+  regexp.prototype.flags@1.5.4:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-errors: 1.3.0
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      set-function-name: 2.0.2
+
   require-directory@2.1.1: {}
 
   requires-port@1.0.0: {}
 
   resolve-from@4.0.0: {}
 
+  resolve-pkg-maps@1.0.0: {}
+
+  resolve@1.22.10:
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  resolve@2.0.0-next.5:
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  restore-cursor@5.1.0:
+    dependencies:
+      onetime: 7.0.0
+      signal-exit: 4.1.0
+
   reusify@1.0.4: {}
 
+  rfdc@1.4.1: {}
+
   rollup@4.46.2:
     dependencies:
       '@types/estree': 1.0.8
@@ -4151,6 +6364,25 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
+  safe-array-concat@1.1.3:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      has-symbols: 1.1.0
+      isarray: 2.0.5
+
+  safe-push-apply@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      isarray: 2.0.5
+
+  safe-regex-test@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-regex: 1.2.1
+
   safer-buffer@2.1.2: {}
 
   saxes@6.0.0:
@@ -4163,14 +6395,66 @@ snapshots:
 
   semver@7.6.3: {}
 
+  semver@7.7.2: {}
+
   set-cookie-parser@2.7.1: {}
 
+  set-function-length@1.2.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.3.0
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+
+  set-function-name@2.0.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      functions-have-names: 1.2.3
+      has-property-descriptors: 1.0.2
+
+  set-proto@1.0.0:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
 
   shebang-regex@3.0.0: {}
 
+  side-channel-list@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-map@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-weakmap@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-map: 1.0.1
+
+  side-channel@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-list: 1.0.0
+      side-channel-map: 1.0.1
+      side-channel-weakmap: 1.0.2
+
   siginfo@2.0.0: {}
 
   signal-exit@4.1.0: {}
@@ -4181,26 +6465,109 @@ snapshots:
       mrmime: 2.0.0
       totalist: 3.0.1
 
+  slash@3.0.0: {}
+
+  slice-ansi@5.0.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      is-fullwidth-code-point: 4.0.0
+
+  slice-ansi@7.1.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      is-fullwidth-code-point: 5.0.0
+
   source-map-js@1.2.1: {}
 
+  stable-hash-x@0.2.0: {}
+
   stackback@0.0.2: {}
 
   statuses@2.0.1: {}
 
   std-env@3.9.0: {}
 
+  stop-iteration-iterator@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      internal-slot: 1.1.0
+
   strict-event-emitter@0.5.1: {}
 
+  string-argv@0.3.2: {}
+
   string-width@4.2.3:
     dependencies:
       emoji-regex: 8.0.0
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
 
+  string-width@7.2.0:
+    dependencies:
+      emoji-regex: 10.4.0
+      get-east-asian-width: 1.3.0
+      strip-ansi: 7.1.0
+
+  string.prototype.includes@2.0.1:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+
+  string.prototype.matchall@4.0.12:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      internal-slot: 1.1.0
+      regexp.prototype.flags: 1.5.4
+      set-function-name: 2.0.2
+      side-channel: 1.1.0
+
+  string.prototype.repeat@1.0.0:
+    dependencies:
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+
+  string.prototype.trim@1.2.10:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-data-property: 1.1.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-object-atoms: 1.1.1
+      has-property-descriptors: 1.0.2
+
+  string.prototype.trimend@1.0.9:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  string.prototype.trimstart@1.0.8:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
   strip-ansi@6.0.1:
     dependencies:
       ansi-regex: 5.0.1
 
+  strip-ansi@7.1.0:
+    dependencies:
+      ansi-regex: 6.1.0
+
+  strip-bom@3.0.0: {}
+
   strip-indent@3.0.0:
     dependencies:
       min-indent: 1.0.1
@@ -4211,12 +6578,22 @@ snapshots:
     dependencies:
       js-tokens: 9.0.1
 
+  strip-outer@1.0.1:
+    dependencies:
+      escape-string-regexp: 1.0.5
+
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
 
+  supports-preserve-symlinks-flag@1.0.0: {}
+
   symbol-tree@3.2.4: {}
 
+  synckit@0.11.11:
+    dependencies:
+      '@pkgr/core': 0.2.9
+
   tinybench@2.9.0: {}
 
   tinyexec@0.3.2: {}
@@ -4261,10 +6638,21 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  trim-repeated@1.0.0:
+    dependencies:
+      escape-string-regexp: 1.0.5
+
   ts-api-utils@2.1.0(typescript@5.9.2):
     dependencies:
       typescript: 5.9.2
 
+  tsconfig-paths@3.15.0:
+    dependencies:
+      '@types/json5': 0.0.29
+      json5: 1.0.2
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+
   tslib@2.8.0: {}
 
   type-check@0.4.0:
@@ -4275,6 +6663,39 @@ snapshots:
 
   type-fest@4.26.1: {}
 
+  typed-array-buffer@1.0.3:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-typed-array: 1.1.15
+
+  typed-array-byte-length@1.0.3:
+    dependencies:
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+
+  typed-array-byte-offset@1.0.4:
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+      reflect.getprototypeof: 1.0.10
+
+  typed-array-length@1.0.7:
+    dependencies:
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      is-typed-array: 1.1.15
+      possible-typed-array-names: 1.1.0
+      reflect.getprototypeof: 1.0.10
+
   typescript-eslint@8.39.0(eslint@9.33.0)(typescript@5.9.2):
     dependencies:
       '@typescript-eslint/eslint-plugin': 8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.33.0)(typescript@5.9.2))(eslint@9.33.0)(typescript@5.9.2)
@@ -4288,10 +6709,43 @@ snapshots:
 
   typescript@5.9.2: {}
 
+  unbox-primitive@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      has-bigints: 1.1.0
+      has-symbols: 1.1.0
+      which-boxed-primitive: 1.1.1
+
   undici-types@6.19.8: {}
 
   universalify@0.2.0: {}
 
+  universalify@2.0.1: {}
+
+  unrs-resolver@1.11.1:
+    dependencies:
+      napi-postinstall: 0.3.3
+    optionalDependencies:
+      '@unrs/resolver-binding-android-arm-eabi': 1.11.1
+      '@unrs/resolver-binding-android-arm64': 1.11.1
+      '@unrs/resolver-binding-darwin-arm64': 1.11.1
+      '@unrs/resolver-binding-darwin-x64': 1.11.1
+      '@unrs/resolver-binding-freebsd-x64': 1.11.1
+      '@unrs/resolver-binding-linux-arm-gnueabihf': 1.11.1
+      '@unrs/resolver-binding-linux-arm-musleabihf': 1.11.1
+      '@unrs/resolver-binding-linux-arm64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-arm64-musl': 1.11.1
+      '@unrs/resolver-binding-linux-ppc64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-riscv64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-riscv64-musl': 1.11.1
+      '@unrs/resolver-binding-linux-s390x-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-x64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-x64-musl': 1.11.1
+      '@unrs/resolver-binding-wasm32-wasi': 1.11.1
+      '@unrs/resolver-binding-win32-arm64-msvc': 1.11.1
+      '@unrs/resolver-binding-win32-ia32-msvc': 1.11.1
+      '@unrs/resolver-binding-win32-x64-msvc': 1.11.1
+
   update-browserslist-db@1.1.1(browserslist@4.24.2):
     dependencies:
       browserslist: 4.24.2
@@ -4322,13 +6776,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.9
 
-  vite-node@3.2.4(@types/node@22.8.1):
+  vite-node@3.2.4(@types/node@22.8.1)(yaml@2.8.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.1
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 7.1.1(@types/node@22.8.1)
+      vite: 7.1.1(@types/node@22.8.1)(yaml@2.8.1)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -4343,7 +6797,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite@7.1.1(@types/node@22.8.1):
+  vite@7.1.1(@types/node@22.8.1)(yaml@2.8.1):
     dependencies:
       esbuild: 0.25.3
       fdir: 6.4.6(picomatch@4.0.3)
@@ -4354,22 +6808,23 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.8.1
       fsevents: 2.3.3
+      yaml: 2.8.1
 
   vitest-browser-react@1.0.1(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(@vitest/browser@2.1.3)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vitest@3.2.4):
     dependencies:
-      '@vitest/browser': 2.1.3(@types/node@22.8.1)(@vitest/spy@3.2.4)(typescript@5.9.2)(vite@7.1.1(@types/node@22.8.1))(vitest@3.2.4)
+      '@vitest/browser': 2.1.3(@types/node@22.8.1)(@vitest/spy@3.2.4)(typescript@5.9.2)(vite@7.1.1(@types/node@22.8.1)(yaml@2.8.1))(vitest@3.2.4)
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
-      vitest: 3.2.4(@types/node@22.8.1)(@vitest/browser@2.1.3)(jsdom@26.1.0)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))
+      vitest: 3.2.4(@types/node@22.8.1)(@vitest/browser@2.1.3)(jsdom@26.1.0)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))(yaml@2.8.1)
     optionalDependencies:
       '@types/react': 19.1.9
       '@types/react-dom': 19.1.7(@types/react@19.1.9)
 
-  vitest@3.2.4(@types/node@22.8.1)(@vitest/browser@2.1.3)(jsdom@26.1.0)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2)):
+  vitest@3.2.4(@types/node@22.8.1)(@vitest/browser@2.1.3)(jsdom@26.1.0)(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))(yaml@2.8.1):
     dependencies:
       '@types/chai': 5.2.2
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))(vite@7.1.1(@types/node@22.8.1))
+      '@vitest/mocker': 3.2.4(msw@2.10.4(@types/node@22.8.1)(typescript@5.9.2))(vite@7.1.1(@types/node@22.8.1)(yaml@2.8.1))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4
@@ -4387,12 +6842,12 @@ snapshots:
       tinyglobby: 0.2.14
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 7.1.1(@types/node@22.8.1)
-      vite-node: 3.2.4(@types/node@22.8.1)
+      vite: 7.1.1(@types/node@22.8.1)(yaml@2.8.1)
+      vite-node: 3.2.4(@types/node@22.8.1)(yaml@2.8.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 22.8.1
-      '@vitest/browser': 2.1.3(@types/node@22.8.1)(@vitest/spy@3.2.4)(typescript@5.9.2)(vite@7.1.1(@types/node@22.8.1))(vitest@3.2.4)
+      '@vitest/browser': 2.1.3(@types/node@22.8.1)(@vitest/spy@3.2.4)(typescript@5.9.2)(vite@7.1.1(@types/node@22.8.1)(yaml@2.8.1))(vitest@3.2.4)
       jsdom: 26.1.0
     transitivePeerDependencies:
       - jiti
@@ -4425,6 +6880,47 @@ snapshots:
       tr46: 5.1.1
       webidl-conversions: 7.0.0
 
+  which-boxed-primitive@1.1.1:
+    dependencies:
+      is-bigint: 1.1.0
+      is-boolean-object: 1.2.2
+      is-number-object: 1.1.1
+      is-string: 1.1.1
+      is-symbol: 1.1.1
+
+  which-builtin-type@1.2.1:
+    dependencies:
+      call-bound: 1.0.4
+      function.prototype.name: 1.1.8
+      has-tostringtag: 1.0.2
+      is-async-function: 2.1.1
+      is-date-object: 1.1.0
+      is-finalizationregistry: 1.1.1
+      is-generator-function: 1.1.0
+      is-regex: 1.2.1
+      is-weakref: 1.1.1
+      isarray: 2.0.5
+      which-boxed-primitive: 1.1.1
+      which-collection: 1.0.2
+      which-typed-array: 1.1.19
+
+  which-collection@1.0.2:
+    dependencies:
+      is-map: 2.0.3
+      is-set: 2.0.3
+      is-weakmap: 2.0.2
+      is-weakset: 2.0.4
+
+  which-typed-array@1.1.19:
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      for-each: 0.3.5
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+
   which@2.0.2:
     dependencies:
       isexe: 2.0.0
@@ -4448,6 +6944,12 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
+  wrap-ansi@9.0.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      string-width: 7.2.0
+      strip-ansi: 7.1.0
+
   ws@8.18.0: {}
 
   xml-name-validator@5.0.0: {}
@@ -4458,6 +6960,8 @@ snapshots:
 
   yallist@3.1.1: {}
 
+  yaml@2.8.1: {}
+
   yargs-parser@21.1.1: {}
 
   yargs@17.7.2:
diff --git a/public/404.html b/public/404.html
new file mode 100644
index 000000000..0519ecba6
--- /dev/null
+++ b/public/404.html
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/src/1_app/App.tsx b/src/1_app/App.tsx
new file mode 100644
index 000000000..cf463bdcb
--- /dev/null
+++ b/src/1_app/App.tsx
@@ -0,0 +1,32 @@
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { Provider } from 'jotai';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
+import { PostsManagerPage } from '@/pages';
+import { Footer, Header } from '@/widgets';
+
+const queryClient = new QueryClient();
+
+const App = () => {
+  return (
+    <Provider>
+      <QueryClientProvider client={queryClient}>
+        <ReactQueryDevtools initialIsOpen={true} />
+        <Router>
+          <div className='flex flex-col min-h-screen'>
+            <Header />
+            <main className='flex-grow container mx-auto px-4 py-8'>
+              <PostsManagerPage />
+            </main>
+            <Footer />
+          </div>
+        </Router>
+      </QueryClientProvider>
+    </Provider>
+  );
+};
+
+export default App;
diff --git a/src/1_app/index.ts b/src/1_app/index.ts
new file mode 100644
index 000000000..c866729a6
--- /dev/null
+++ b/src/1_app/index.ts
@@ -0,0 +1 @@
+export { default as App } from './App';
diff --git a/src/2_pages/PostsManagerPage.tsx b/src/2_pages/PostsManagerPage.tsx
new file mode 100644
index 000000000..c7b640715
--- /dev/null
+++ b/src/2_pages/PostsManagerPage.tsx
@@ -0,0 +1,42 @@
+import { AddCommentDialog } from '@/features/comment-management';
+import { EditCommentFormDialog } from '@/features/comment-management/ui/EditCommentFormDialog';
+import { Filters } from '@/features/filter-posts';
+import {
+  AddPostButton,
+  PostDetailDialog,
+  PostTable,
+} from '@/features/post-management';
+import { AddPostFormDialog } from '@/features/post-management/ui/AddPostFormDialog';
+import { EditPostFormDialog } from '@/features/post-management/ui/EditPostFormDialog';
+import { PostPagination } from '@/features/post-management/ui/PostPagination';
+import { UserProfileDialog } from '@/features/user-profile';
+import { Card, CardContent, CardHeader, CardTitle } from '@/shared/ui';
+
+const PostsManager = () => {
+  return (
+    <Card className='w-full max-w-6xl mx-auto'>
+      <CardHeader>
+        <CardTitle className='flex items-center justify-between'>
+          <span>게시물 관리자</span>
+          <AddPostButton />
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className='flex flex-col gap-4'>
+          <Filters />
+          <PostTable />
+          <PostPagination />
+        </div>
+      </CardContent>
+
+      <AddPostFormDialog />
+      <EditPostFormDialog />
+      <AddCommentDialog />
+      <EditCommentFormDialog />
+      <PostDetailDialog />
+      <UserProfileDialog />
+    </Card>
+  );
+};
+
+export default PostsManager;
diff --git a/src/2_pages/index.ts b/src/2_pages/index.ts
new file mode 100644
index 000000000..5e47e3f90
--- /dev/null
+++ b/src/2_pages/index.ts
@@ -0,0 +1 @@
+export { default as PostsManagerPage } from './PostsManagerPage';
diff --git a/src/3_widgets/Footer.tsx b/src/3_widgets/Footer.tsx
new file mode 100644
index 000000000..b6619c879
--- /dev/null
+++ b/src/3_widgets/Footer.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Footer: React.FC = () => {
+  return (
+    <footer className='bg-gray-100 text-gray-600 py-4 mt-8'>
+      <div className='container mx-auto text-center'>
+        <p>&copy; 2023 Post Management System. All rights reserved.</p>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/3_widgets/Header.tsx b/src/3_widgets/Header.tsx
new file mode 100644
index 000000000..ef674f518
--- /dev/null
+++ b/src/3_widgets/Header.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { MessageSquare } from 'lucide-react';
+
+const Header: React.FC = () => {
+  return (
+    <header className='bg-blue-600 text-white p-4 shadow-md'>
+      <div className='container mx-auto flex justify-between items-center'>
+        <div className='flex items-center space-x-2'>
+          <MessageSquare className='w-6 h-6' />
+          <h1 className='text-xl font-bold'>게시물 관리 시스템</h1>
+        </div>
+        <nav>
+          <ul className='flex space-x-4'>
+            <li>
+              <a href='#' className='hover:underline'>
+                홈
+              </a>
+            </li>
+            <li>
+              <a href='#' className='hover:underline'>
+                대시보드
+              </a>
+            </li>
+            <li>
+              <a href='#' className='hover:underline'>
+                설정
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/src/3_widgets/index.ts b/src/3_widgets/index.ts
new file mode 100644
index 000000000..88d58dcef
--- /dev/null
+++ b/src/3_widgets/index.ts
@@ -0,0 +1,2 @@
+export { default as Footer } from './Footer';
+export { default as Header } from './Header';
diff --git a/src/4_features/comment-management/hooks/useAddCommentForm.ts b/src/4_features/comment-management/hooks/useAddCommentForm.ts
new file mode 100644
index 000000000..76de6bbaa
--- /dev/null
+++ b/src/4_features/comment-management/hooks/useAddCommentForm.ts
@@ -0,0 +1,47 @@
+import { useState } from 'react';
+
+import { useCreateCommentMutation } from '@/entities/comment';
+import { useUIStore } from '@/shared/lib';
+
+export const useAddCommentForm = () => {
+  const { selectedPost, setShowAddCommentDialog } = useUIStore();
+  const { mutate: createComment } = useCreateCommentMutation({
+    onSuccess: () => {
+      resetForm();
+    },
+    onError: error => {
+      console.error('댓글 추가 오류:', error);
+      // ! 모달 다시 열어서 사용자가 수정
+      setShowAddCommentDialog(true);
+    },
+  });
+
+  const [commentBody, setCommentBody] = useState<string>('');
+
+  const handleChangeBody = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setCommentBody(e.target.value);
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    // ! 모달 먼저 닫고 UI 낙관적 업데이트 보여주기
+    setShowAddCommentDialog(false);
+    createComment({
+      body: commentBody,
+      postId: selectedPost?.id ?? 0,
+      userId: 1,
+    });
+  };
+
+  const resetForm = () => {
+    setCommentBody('');
+  };
+
+  return {
+    commentBody,
+    handleChangeBody,
+    handleSubmit,
+    resetForm,
+  };
+};
diff --git a/src/4_features/comment-management/hooks/useEditCommentForm.ts b/src/4_features/comment-management/hooks/useEditCommentForm.ts
new file mode 100644
index 000000000..a8edf670b
--- /dev/null
+++ b/src/4_features/comment-management/hooks/useEditCommentForm.ts
@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+
+import { useUpdateCommentMutation } from '@/entities/comment';
+import { useUIStore } from '@/shared/lib';
+
+export const useEditCommentForm = () => {
+  const { selectedComment, setSelectedComment, setShowEditCommentDialog } =
+    useUIStore();
+  const { mutate: updateComment } = useUpdateCommentMutation({
+    onSuccess: () => {
+      setSelectedComment(null);
+    },
+    onError: error => {
+      console.error('댓글 수정 오류:', error);
+      // ! 모달 다시 열어서 사용자가 수정하기
+      setShowEditCommentDialog(true);
+    },
+  });
+
+  const [commentBody, setCommentBody] = useState<string>(
+    selectedComment?.body || ''
+  );
+
+  const handleChangeBody = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setCommentBody(e.target.value);
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (!selectedComment) return;
+
+    // ! 모달 먼저 닫고 UI 낙관적 업데이트 보여주기
+    setShowEditCommentDialog(false);
+    updateComment({
+      ...selectedComment,
+      body: commentBody,
+    });
+  };
+
+  const resetForm = () => {
+    setCommentBody('');
+  };
+
+  useEffect(() => {
+    setCommentBody(selectedComment?.body || '');
+  }, [selectedComment]);
+
+  return {
+    commentBody,
+    handleChangeBody,
+    handleSubmit,
+    resetForm,
+  };
+};
diff --git a/src/4_features/comment-management/index.ts b/src/4_features/comment-management/index.ts
new file mode 100644
index 000000000..713937378
--- /dev/null
+++ b/src/4_features/comment-management/index.ts
@@ -0,0 +1 @@
+export * from './ui/AddCommentFormDialog';
diff --git a/src/4_features/comment-management/ui/AddCommentFormDialog.tsx b/src/4_features/comment-management/ui/AddCommentFormDialog.tsx
new file mode 100644
index 000000000..97b3bb2a3
--- /dev/null
+++ b/src/4_features/comment-management/ui/AddCommentFormDialog.tsx
@@ -0,0 +1,29 @@
+import { useUIStore } from '@/shared/lib';
+import { Button, ContentDialog, Textarea } from '@/shared/ui';
+
+import { useAddCommentForm } from '../hooks/useAddCommentForm';
+
+export const AddCommentDialog = () => {
+  const { showAddCommentDialog, setShowAddCommentDialog } = useUIStore();
+
+  const { commentBody, handleChangeBody, handleSubmit, resetForm } =
+    useAddCommentForm();
+
+  return (
+    <ContentDialog
+      open={showAddCommentDialog}
+      onOpenChange={setShowAddCommentDialog}
+      onClose={resetForm}
+      title='새 댓글 추가'
+    >
+      <form className='space-y-4' onSubmit={handleSubmit}>
+        <Textarea
+          placeholder='댓글 내용'
+          value={commentBody}
+          onChange={handleChangeBody}
+        />
+        <Button type='submit'>댓글 추가</Button>
+      </form>
+    </ContentDialog>
+  );
+};
diff --git a/src/4_features/comment-management/ui/CommentItem.tsx b/src/4_features/comment-management/ui/CommentItem.tsx
new file mode 100644
index 000000000..baa949d5f
--- /dev/null
+++ b/src/4_features/comment-management/ui/CommentItem.tsx
@@ -0,0 +1,80 @@
+import { Edit2, ThumbsUp, Trash2 } from 'lucide-react';
+
+import {
+  Comment,
+  useDeleteCommentMutation,
+  useLikeCommentMutation,
+} from '@/entities/comment';
+import { UI_CONSTANTS } from '@/shared/constants';
+import { highlightText, usePostsFilterStore, useUIStore } from '@/shared/lib';
+import { Button } from '@/shared/ui';
+
+interface CommentItemProps {
+  comment: Comment;
+}
+
+export const CommentItem = ({ comment }: CommentItemProps) => {
+  const { setSelectedComment, setShowEditCommentDialog } = useUIStore();
+  const { searchQuery } = usePostsFilterStore();
+  const { mutate: likeComment, isPending } = useLikeCommentMutation({
+    onError: error => {
+      console.error('댓글 좋아요 오류:', error);
+    },
+  });
+  const { mutate: deleteComment, isPending: isDeleting } =
+    useDeleteCommentMutation({
+      onError: error => {
+        console.error('댓글 삭제 오류:', error);
+      },
+    });
+
+  const handleClickLikeComment = () => {
+    if (isPending) return;
+    likeComment({ commentId: comment.id, postId: comment.postId });
+  };
+
+  const handleClickEditComment = () => {
+    setSelectedComment(comment);
+    setShowEditCommentDialog(true);
+  };
+
+  const handleClickDeleteComment = () => {
+    if (isDeleting) return;
+    deleteComment({ commentId: comment.id, postId: comment.postId });
+  };
+
+  return (
+    <div className='flex items-center justify-between text-sm border-b pb-1 gap-2'>
+      <div className='flex items-center space-x-2 min-w-0 flex-1'>
+        <span className='font-medium shrink-0'>{comment.user.username}:</span>
+        <span className='truncate'>
+          {highlightText(comment.body, searchQuery)}
+        </span>
+      </div>
+      <div className='flex items-center space-x-1 shrink-0'>
+        <Button
+          variant='ghost'
+          size='sm'
+          onClick={() => handleClickLikeComment()}
+        >
+          <ThumbsUp className={UI_CONSTANTS.ICON_SIZES.SMALL} />
+          <span className='ml-1 text-xs'>{comment.likes}</span>
+        </Button>
+        <Button
+          variant='ghost'
+          size='sm'
+          onClick={() => handleClickEditComment()}
+        >
+          <Edit2 className={UI_CONSTANTS.ICON_SIZES.SMALL} />
+        </Button>
+        <Button
+          variant='ghost'
+          size='sm'
+          onClick={() => handleClickDeleteComment()}
+        >
+          <Trash2 className={UI_CONSTANTS.ICON_SIZES.SMALL} />
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/src/4_features/comment-management/ui/CommentList.tsx b/src/4_features/comment-management/ui/CommentList.tsx
new file mode 100644
index 000000000..c7868a3fd
--- /dev/null
+++ b/src/4_features/comment-management/ui/CommentList.tsx
@@ -0,0 +1,24 @@
+import { useGetCommentsQuery } from '@/entities/comment';
+import { useUIStore } from '@/shared/lib';
+import { LoadingSpinner } from '@/shared/ui';
+
+import { CommentItem } from './CommentItem';
+
+export const CommentList = () => {
+  const { selectedPost } = useUIStore();
+  const { data: commentsData, isLoading } = useGetCommentsQuery(
+    selectedPost?.id ?? null
+  );
+
+  return (
+    <div className='space-y-1 w-full'>
+      {isLoading ? (
+        <LoadingSpinner />
+      ) : (
+        commentsData?.comments.map(comment => (
+          <CommentItem key={comment.id} comment={comment} />
+        ))
+      )}
+    </div>
+  );
+};
diff --git a/src/4_features/comment-management/ui/EditCommentFormDialog.tsx b/src/4_features/comment-management/ui/EditCommentFormDialog.tsx
new file mode 100644
index 000000000..eef997fce
--- /dev/null
+++ b/src/4_features/comment-management/ui/EditCommentFormDialog.tsx
@@ -0,0 +1,28 @@
+import { useUIStore } from '@/shared/lib';
+import { Button, ContentDialog, Textarea } from '@/shared/ui';
+
+import { useEditCommentForm } from '../hooks/useEditCommentForm';
+
+export const EditCommentFormDialog = () => {
+  const { showEditCommentDialog, setShowEditCommentDialog } = useUIStore();
+  const { commentBody, handleChangeBody, handleSubmit, resetForm } =
+    useEditCommentForm();
+
+  return (
+    <ContentDialog
+      open={showEditCommentDialog}
+      onOpenChange={setShowEditCommentDialog}
+      onClose={resetForm}
+      title='댓글 수정'
+    >
+      <form className='space-y-4' onSubmit={handleSubmit}>
+        <Textarea
+          placeholder='댓글 내용'
+          value={commentBody}
+          onChange={handleChangeBody}
+        />
+        <Button type='submit'>댓글 업데이트</Button>
+      </form>
+    </ContentDialog>
+  );
+};
diff --git a/src/4_features/filter-posts/hooks/useFilteredPosts.ts b/src/4_features/filter-posts/hooks/useFilteredPosts.ts
new file mode 100644
index 000000000..89a0dbcb3
--- /dev/null
+++ b/src/4_features/filter-posts/hooks/useFilteredPosts.ts
@@ -0,0 +1,162 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import {
+  AllFilterParams,
+  useGetPostsBySearchQuery,
+  useGetPostsByTagQuery,
+  useGetPostsQuery,
+} from '@/entities/post';
+import { useGetUsersQuery } from '@/entities/user';
+import { POST_QUERY_TYPE, usePostsFilterStore } from '@/shared/lib';
+
+import { getPostsWithAuthor } from '../../post-management/lib/post.util';
+import { PostWithAuthor } from '../../post-management/types';
+
+export type SelectedUserProperties = 'id' | 'username' | 'image';
+
+export const useFilteredPosts = () => {
+  const {
+    selectedTag,
+    searchQuery,
+    limit,
+    skip,
+    sortBy,
+    sortOrder,
+    pagination,
+    setQueryType,
+    setPagination,
+  } = usePostsFilterStore();
+
+  const [posts, setPosts] = useState<PostWithAuthor<SelectedUserProperties>[]>(
+    []
+  );
+
+  const filters: AllFilterParams = {
+    limit,
+    skip,
+    sortBy,
+    sortOrder,
+    searchQuery,
+    selectedTag,
+  };
+
+  const { data: usersData, isLoading: isLoadingUsers } =
+    useGetUsersQuery<SelectedUserProperties>({
+      limit: 0,
+      select: ['id', 'username', 'image'],
+    });
+
+  const { data: postsData, isLoading: isLoadingPosts } = useGetPostsQuery({
+    limit,
+    skip,
+    sortBy,
+    sortOrder,
+  });
+
+  const { data: postsByTagData, isLoading: isLoadingPostsByTag } =
+    useGetPostsByTagQuery({
+      limit,
+      skip,
+      sortBy,
+      sortOrder,
+      selectedTag,
+    });
+
+  const { data: postsBySearchData, isLoading: isLoadingPostsBySearch } =
+    useGetPostsBySearchQuery({
+      limit,
+      skip,
+      sortBy,
+      sortOrder,
+      searchQuery,
+    });
+
+  const postsWithAuthor = useMemo(() => {
+    return getPostsWithAuthor<SelectedUserProperties>(
+      postsData?.posts ?? [],
+      usersData?.users ?? []
+    );
+  }, [postsData?.posts, usersData?.users, ...[Object.values(filters)]]);
+
+  const postsWithAuthorByTag = useMemo(() => {
+    return getPostsWithAuthor<SelectedUserProperties>(
+      postsByTagData?.posts ?? [],
+      usersData?.users ?? []
+    );
+  }, [
+    postsByTagData?.posts,
+    usersData?.users,
+    selectedTag,
+    ...[Object.values(filters)],
+  ]);
+
+  const postsWithAuthorBySearch = useMemo(() => {
+    return getPostsWithAuthor<SelectedUserProperties>(
+      postsBySearchData?.posts ?? [],
+      usersData?.users ?? []
+    );
+  }, [postsBySearchData?.posts, usersData?.users, ...[Object.values(filters)]]);
+
+  const isLoading =
+    isLoadingUsers ||
+    isLoadingPosts ||
+    isLoadingPostsByTag ||
+    isLoadingPostsBySearch;
+
+  useEffect(() => {
+    // 검색어가 있으면 검색 결과 사용
+    if (searchQuery && searchQuery.trim()) {
+      setPosts(postsWithAuthorBySearch);
+      setQueryType(POST_QUERY_TYPE.SEARCH);
+      return;
+    }
+
+    // 태그가 있고 'all'이 아니면 태그 결과 사용
+    if (selectedTag && selectedTag !== 'all' && selectedTag.trim()) {
+      setPosts(postsWithAuthorByTag);
+      setQueryType(POST_QUERY_TYPE.TAG);
+      return;
+    }
+
+    // 기본 게시물 목록 사용
+    setPosts(postsWithAuthor);
+    setQueryType(POST_QUERY_TYPE.BASE);
+  }, [
+    postsWithAuthor,
+    postsWithAuthorByTag,
+    postsWithAuthorBySearch,
+    searchQuery,
+    selectedTag,
+  ]);
+
+  useEffect(() => {
+    if (searchQuery && searchQuery.trim()) {
+      setPagination({
+        ...pagination,
+        total: postsBySearchData?.total ?? 0,
+      });
+      return;
+    }
+
+    // 태그가 있고 'all'이 아니면 태그 결과 사용
+    if (selectedTag && selectedTag !== 'all' && selectedTag.trim()) {
+      setPagination({
+        ...pagination,
+        total: postsByTagData?.total ?? 0,
+      });
+      return;
+    }
+
+    // 기본 게시물 목록 사용
+    setPagination({
+      ...pagination,
+      total: postsData?.total ?? 0,
+    });
+  }, [postsBySearchData, postsByTagData, postsData]);
+
+  return {
+    posts,
+    setPosts,
+    isLoading,
+  };
+};
diff --git a/src/4_features/filter-posts/index.ts b/src/4_features/filter-posts/index.ts
new file mode 100644
index 000000000..49a5c0779
--- /dev/null
+++ b/src/4_features/filter-posts/index.ts
@@ -0,0 +1,4 @@
+export * from './ui/SelectTag';
+export * from './ui/SelectSortBy';
+export * from './ui/SelectSortOrder';
+export * from './ui/Filters';
diff --git a/src/4_features/filter-posts/ui/Filters.tsx b/src/4_features/filter-posts/ui/Filters.tsx
new file mode 100644
index 000000000..16bafecb0
--- /dev/null
+++ b/src/4_features/filter-posts/ui/Filters.tsx
@@ -0,0 +1,15 @@
+import { SearchInput } from './SearchInput';
+import { SelectSortBy } from './SelectSortBy';
+import { SelectSortOrder } from './SelectSortOrder';
+import { SelectTag } from './SelectTag';
+
+export const Filters = () => {
+  return (
+    <div className='flex gap-4'>
+      <SearchInput />
+      <SelectTag />
+      <SelectSortBy />
+      <SelectSortOrder />
+    </div>
+  );
+};
diff --git a/src/4_features/filter-posts/ui/SearchInput.tsx b/src/4_features/filter-posts/ui/SearchInput.tsx
new file mode 100644
index 000000000..29cc8c124
--- /dev/null
+++ b/src/4_features/filter-posts/ui/SearchInput.tsx
@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+
+import { Search } from 'lucide-react';
+
+import { UI_CONSTANTS } from '@/shared/constants';
+import { useDebounce, usePostsFilterStore } from '@/shared/lib';
+import { Input } from '@/shared/ui';
+
+export const SearchInput = () => {
+  const { searchQuery, setSearchQuery } = usePostsFilterStore();
+  const debouncedSetSearchQuery = useDebounce((searchQuery: string) => {
+    setSearchQuery(searchQuery);
+  }, 500);
+
+  const [originalSearchQuery, setOriginalSearchQuery] = useState(searchQuery);
+
+  const handleChangeSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setOriginalSearchQuery(e.target.value);
+  };
+
+  const handleKeyDownSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      setOriginalSearchQuery(e.currentTarget.value);
+    }
+  };
+
+  useEffect(() => {
+    debouncedSetSearchQuery(originalSearchQuery);
+  }, [originalSearchQuery]);
+
+  return (
+    <div className='flex-1'>
+      <div className='relative'>
+        <Search
+          className={`absolute left-2 top-2.5 ${UI_CONSTANTS.ICON_SIZES.MEDIUM} text-muted-foreground`}
+        />
+        <Input
+          placeholder='게시물 검색...'
+          className='pl-8'
+          value={originalSearchQuery}
+          onChange={handleChangeSearch}
+          onKeyDown={handleKeyDownSearch}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/src/4_features/filter-posts/ui/SelectLimit.tsx b/src/4_features/filter-posts/ui/SelectLimit.tsx
new file mode 100644
index 000000000..c42827701
--- /dev/null
+++ b/src/4_features/filter-posts/ui/SelectLimit.tsx
@@ -0,0 +1,31 @@
+import { UI_CONSTANTS } from '@/shared/constants';
+import { usePostsFilterStore } from '@/shared/lib';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/shared/ui';
+
+export const SelectLimit = () => {
+  const { limit, setLimit } = usePostsFilterStore();
+
+  return (
+    <Select
+      value={limit.toString()}
+      onValueChange={value => setLimit(Number(value))}
+    >
+      <SelectTrigger className='w-[180px]'>
+        <SelectValue placeholder='10' />
+      </SelectTrigger>
+      <SelectContent>
+        {UI_CONSTANTS.PAGINATION.LIMIT_OPTIONS.map(option => (
+          <SelectItem key={option} value={String(option)}>
+            {option}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};
diff --git a/src/4_features/filter-posts/ui/SelectSortBy.tsx b/src/4_features/filter-posts/ui/SelectSortBy.tsx
new file mode 100644
index 000000000..2a06dc535
--- /dev/null
+++ b/src/4_features/filter-posts/ui/SelectSortBy.tsx
@@ -0,0 +1,35 @@
+import { SORT_BY } from '@/entities/post';
+import { usePostsFilterStore } from '@/shared/lib';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/shared/ui';
+
+const SORT_BY_OPTIONS: { value: SORT_BY; label: string }[] = [
+  { value: SORT_BY.NONE, label: '없음' },
+  { value: SORT_BY.ID, label: 'ID' },
+  { value: SORT_BY.TITLE, label: '제목' },
+  { value: SORT_BY.REACTIONS, label: '반응' },
+];
+
+export const SelectSortBy = () => {
+  const { sortBy, setSortBy } = usePostsFilterStore();
+
+  return (
+    <Select value={sortBy} onValueChange={setSortBy}>
+      <SelectTrigger className='w-[180px]'>
+        <SelectValue placeholder='정렬 기준' />
+      </SelectTrigger>
+      <SelectContent>
+        {SORT_BY_OPTIONS.map(option => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};
diff --git a/src/4_features/filter-posts/ui/SelectSortOrder.tsx b/src/4_features/filter-posts/ui/SelectSortOrder.tsx
new file mode 100644
index 000000000..bff9b08cf
--- /dev/null
+++ b/src/4_features/filter-posts/ui/SelectSortOrder.tsx
@@ -0,0 +1,33 @@
+import { SORT_ORDER } from '@/entities/post';
+import { usePostsFilterStore } from '@/shared/lib';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/shared/ui';
+
+const SORT_ORDER_OPTIONS: { value: SORT_ORDER; label: string }[] = [
+  { value: SORT_ORDER.ASC, label: '오름차순' },
+  { value: SORT_ORDER.DESC, label: '내림차순' },
+];
+
+export const SelectSortOrder = () => {
+  const { sortOrder, setSortOrder } = usePostsFilterStore();
+
+  return (
+    <Select value={sortOrder} onValueChange={setSortOrder}>
+      <SelectTrigger className='w-[180px]'>
+        <SelectValue placeholder='정렬 순서' />
+      </SelectTrigger>
+      <SelectContent>
+        {SORT_ORDER_OPTIONS.map(option => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};
diff --git a/src/4_features/filter-posts/ui/SelectTag.tsx b/src/4_features/filter-posts/ui/SelectTag.tsx
new file mode 100644
index 000000000..eeeb3b10b
--- /dev/null
+++ b/src/4_features/filter-posts/ui/SelectTag.tsx
@@ -0,0 +1,45 @@
+import { useGetTagsQuery } from '@/entities/tag';
+import { usePostsFilterStore } from '@/shared/lib';
+import {
+  LoadingSpinner,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/shared/ui';
+
+export const SelectTag = () => {
+  const { selectedTag, setSelectedTag } = usePostsFilterStore();
+  const { data: tags, isLoading } = useGetTagsQuery();
+
+  const handleTagChange = (value: string) => {
+    setSelectedTag(value);
+  };
+
+  return (
+    <Select value={selectedTag} onValueChange={handleTagChange}>
+      {isLoading ? (
+        <SelectTrigger className='w-[180px]'>
+          <LoadingSpinner size='sm' />
+        </SelectTrigger>
+      ) : (
+        <>
+          <SelectTrigger className='w-[180px]'>
+            <SelectValue placeholder='태그 선택' />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value='all'>모든 태그</SelectItem>
+            {tags &&
+              tags.length > 0 &&
+              tags.map(tag => (
+                <SelectItem key={tag.url} value={tag.slug}>
+                  {tag.slug}
+                </SelectItem>
+              ))}
+          </SelectContent>
+        </>
+      )}
+    </Select>
+  );
+};
diff --git a/src/4_features/post-management/hooks/useCreatePostForm.ts b/src/4_features/post-management/hooks/useCreatePostForm.ts
new file mode 100644
index 000000000..dbce9ae11
--- /dev/null
+++ b/src/4_features/post-management/hooks/useCreatePostForm.ts
@@ -0,0 +1,66 @@
+import { useState } from 'react';
+
+import { useCreatePostMutation } from '@/entities/post';
+import { API_CONSTANTS } from '@/shared/constants';
+import { useUIStore } from '@/shared/lib';
+
+export const useCreatePostForm = () => {
+  const { setShowAddDialog } = useUIStore();
+  const { mutate: createPost } = useCreatePostMutation({
+    onSuccess: () => {
+      resetForm();
+    },
+    onError: (error: Error) => {
+      console.error('게시물 추가 오류:', error);
+      // ! 모달 다시 열어서 사용자가 수정하기
+      setShowAddDialog(true);
+    },
+  });
+
+  const [postTitle, setPostTitle] = useState<string>('');
+  const [postBody, setPostBody] = useState<string>('');
+  const [postUserId, setPostUserId] = useState<number>(
+    API_CONSTANTS.DEFAULT_USER_ID
+  );
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    // ! 다이얼로그 먼저 닫고 UI 낙관적 업데이트 보여주기
+    setShowAddDialog(false);
+    createPost({
+      title: postTitle,
+      body: postBody,
+      userId: postUserId,
+    });
+  };
+
+  const resetForm = () => {
+    setPostTitle('');
+    setPostBody('');
+    setPostUserId(API_CONSTANTS.DEFAULT_USER_ID);
+  };
+
+  const handleChangeTitle = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPostTitle(e.target.value);
+  };
+
+  const handleChangeBody = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setPostBody(e.target.value);
+  };
+
+  const handleChangeUserId = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPostUserId(Number(e.target.value));
+  };
+
+  return {
+    postTitle,
+    postBody,
+    postUserId,
+    handleSubmit,
+    resetForm,
+    handleChangeTitle,
+    handleChangeBody,
+    handleChangeUserId,
+  };
+};
diff --git a/src/4_features/post-management/hooks/useEditPostForm.ts b/src/4_features/post-management/hooks/useEditPostForm.ts
new file mode 100644
index 000000000..2886181eb
--- /dev/null
+++ b/src/4_features/post-management/hooks/useEditPostForm.ts
@@ -0,0 +1,60 @@
+import { ChangeEvent, useEffect, useState } from 'react';
+
+import { usePutPostMutation } from '@/entities/post';
+import { useUIStore } from '@/shared/lib';
+
+export const useEditPostForm = () => {
+  const { selectedPost, setShowEditDialog } = useUIStore();
+  const { mutate: updatePost } = usePutPostMutation({
+    onSuccess: () => {
+      resetForm();
+    },
+    onError: error => {
+      console.error('게시물 수정 오류:', error);
+      // ! 모달 다시 열어서 사용자가 수정하기
+      setShowEditDialog(true);
+    },
+  });
+
+  const [title, setTitle] = useState(selectedPost?.title || '');
+  const [body, setBody] = useState(selectedPost?.body || '');
+
+  const handleChangeTitle = (e: ChangeEvent<HTMLInputElement>) => {
+    setTitle(e.target.value);
+  };
+
+  const handleChangeBody = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setBody(e.target.value);
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    // ! 모달 먼저 닫고 UI 낙관적 업데이트 보여주기
+    setShowEditDialog(false);
+    updatePost({
+      id: selectedPost?.id ?? 0,
+      title,
+      body,
+      userId: selectedPost?.userId ?? 0,
+    });
+  };
+
+  useEffect(() => {
+    setTitle(selectedPost?.title || '');
+    setBody(selectedPost?.body || '');
+  }, [selectedPost]);
+
+  const resetForm = () => {
+    setTitle('');
+    setBody('');
+  };
+
+  return {
+    title,
+    body,
+    handleChangeTitle,
+    handleChangeBody,
+    handleSubmit,
+  };
+};
diff --git a/src/4_features/post-management/index.ts b/src/4_features/post-management/index.ts
new file mode 100644
index 000000000..ecfdede3e
--- /dev/null
+++ b/src/4_features/post-management/index.ts
@@ -0,0 +1,4 @@
+export * from './ui/AddPostFormDialog';
+export * from './ui/AddPostButton';
+export * from './ui/PostDetailDialog';
+export * from './ui/PostTable';
diff --git a/src/4_features/post-management/lib/post.util.ts b/src/4_features/post-management/lib/post.util.ts
new file mode 100644
index 000000000..f4f9774a5
--- /dev/null
+++ b/src/4_features/post-management/lib/post.util.ts
@@ -0,0 +1,18 @@
+import type { Post } from '@/entities/post';
+import type { User, UserPick } from '@/entities/user';
+
+import { PostWithAuthor } from '../types';
+
+export const getPostsWithAuthor = <K extends keyof User>(
+  posts: Post[],
+  users: UserPick<K | 'id'>[]
+): PostWithAuthor<K>[] => {
+  return posts.map(post => {
+    const author = users.find(user => user.id === post.userId);
+
+    return {
+      ...post,
+      author,
+    };
+  });
+};
diff --git a/src/4_features/post-management/types.ts b/src/4_features/post-management/types.ts
new file mode 100644
index 000000000..a911eb348
--- /dev/null
+++ b/src/4_features/post-management/types.ts
@@ -0,0 +1,6 @@
+import type { Post } from '@/entities/post';
+import type { User, UserPick } from '@/entities/user';
+
+export interface PostWithAuthor<K extends keyof User> extends Post {
+  author?: UserPick<K>;
+}
diff --git a/src/4_features/post-management/ui/AddPostButton.tsx b/src/4_features/post-management/ui/AddPostButton.tsx
new file mode 100644
index 000000000..76eb1dcb0
--- /dev/null
+++ b/src/4_features/post-management/ui/AddPostButton.tsx
@@ -0,0 +1,16 @@
+import { Plus } from 'lucide-react';
+
+import { UI_CONSTANTS } from '@/shared/constants';
+import { useUIStore } from '@/shared/lib';
+import { Button } from '@/shared/ui';
+
+export const AddPostButton = () => {
+  const { setShowAddDialog } = useUIStore();
+
+  return (
+    <Button onClick={() => setShowAddDialog(true)}>
+      <Plus className={`${UI_CONSTANTS.ICON_SIZES.MEDIUM} mr-2`} />
+      게시물 추가
+    </Button>
+  );
+};
diff --git a/src/4_features/post-management/ui/AddPostFormDialog.tsx b/src/4_features/post-management/ui/AddPostFormDialog.tsx
new file mode 100644
index 000000000..f0947207e
--- /dev/null
+++ b/src/4_features/post-management/ui/AddPostFormDialog.tsx
@@ -0,0 +1,60 @@
+import { UI_CONSTANTS } from '@/shared/constants';
+import { useUIStore } from '@/shared/lib';
+import { Button, ContentDialog, Input, Textarea } from '@/shared/ui';
+
+import { useCreatePostForm } from '../hooks/useCreatePostForm';
+
+export const AddPostFormDialog = () => {
+  const { setShowAddDialog, showAddDialog } = useUIStore();
+  const {
+    postTitle,
+    postBody,
+    postUserId,
+    handleSubmit,
+    resetForm,
+    handleChangeTitle,
+    handleChangeBody,
+    handleChangeUserId,
+  } = useCreatePostForm();
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      resetForm();
+      setShowAddDialog(open);
+      return;
+    }
+
+    setShowAddDialog(open);
+  };
+
+  return (
+    <ContentDialog
+      title='새 게시물 추가'
+      open={showAddDialog}
+      onOpenChange={handleOpenChange}
+    >
+      <form className='space-y-4' onSubmit={handleSubmit}>
+        <Input
+          placeholder='제목'
+          value={postTitle}
+          onChange={handleChangeTitle}
+        />
+
+        <Textarea
+          rows={UI_CONSTANTS.TEXTAREA_ROWS.LARGE}
+          placeholder='내용'
+          value={postBody}
+          onChange={handleChangeBody}
+        />
+
+        <Input
+          type='number'
+          placeholder='사용자 ID'
+          value={postUserId}
+          onChange={handleChangeUserId}
+        />
+        <Button type='submit'>게시물 추가</Button>
+      </form>
+    </ContentDialog>
+  );
+};
diff --git a/src/4_features/post-management/ui/EditPostFormDialog.tsx b/src/4_features/post-management/ui/EditPostFormDialog.tsx
new file mode 100644
index 000000000..5a3e1a9e7
--- /dev/null
+++ b/src/4_features/post-management/ui/EditPostFormDialog.tsx
@@ -0,0 +1,30 @@
+import { UI_CONSTANTS } from '@/shared/constants';
+import { useUIStore } from '@/shared/lib';
+import { Button, ContentDialog, Input, Textarea } from '@/shared/ui';
+
+import { useEditPostForm } from '../hooks/useEditPostForm';
+
+export const EditPostFormDialog = () => {
+  const { title, body, handleChangeTitle, handleChangeBody, handleSubmit } =
+    useEditPostForm();
+  const { showEditDialog, setShowEditDialog } = useUIStore();
+
+  return (
+    <ContentDialog
+      open={showEditDialog}
+      onOpenChange={setShowEditDialog}
+      title='게시물 수정'
+    >
+      <form className='space-y-4' onSubmit={handleSubmit}>
+        <Input placeholder='제목' value={title} onChange={handleChangeTitle} />
+        <Textarea
+          rows={UI_CONSTANTS.TEXTAREA_ROWS.MEDIUM}
+          placeholder='내용'
+          value={body}
+          onChange={handleChangeBody}
+        />
+        <Button type='submit'>게시물 업데이트</Button>
+      </form>
+    </ContentDialog>
+  );
+};
diff --git a/src/4_features/post-management/ui/PostDetailDialog.tsx b/src/4_features/post-management/ui/PostDetailDialog.tsx
new file mode 100644
index 000000000..dca78d1c7
--- /dev/null
+++ b/src/4_features/post-management/ui/PostDetailDialog.tsx
@@ -0,0 +1,44 @@
+import { Plus } from 'lucide-react';
+
+import { CommentList } from '@/features/comment-management/ui/CommentList';
+import { UI_CONSTANTS } from '@/shared/constants';
+import { highlightText, usePostsFilterStore, useUIStore } from '@/shared/lib';
+import { Button, ContentDialog } from '@/shared/ui';
+
+export const PostDetailDialog = () => {
+  const {
+    showPostDetailDialog,
+    setShowPostDetailDialog,
+    selectedPost,
+    setShowAddCommentDialog,
+  } = useUIStore();
+  const { searchQuery } = usePostsFilterStore();
+
+  if (!selectedPost) return null;
+
+  const handleClickAddComment = () => {
+    setShowAddCommentDialog(true);
+  };
+
+  return (
+    <ContentDialog
+      open={showPostDetailDialog}
+      onOpenChange={setShowPostDetailDialog}
+      title={highlightText(selectedPost.title, searchQuery)}
+    >
+      <div className='space-y-4 w-full'>
+        <p>{highlightText(selectedPost?.body, searchQuery)}</p>
+        <div className='mt-2'>
+          <div className='flex items-center justify-between mb-2'>
+            <h3 className='text-sm font-semibold'>댓글</h3>
+            <Button size='sm' onClick={handleClickAddComment}>
+              <Plus className={`${UI_CONSTANTS.ICON_SIZES.SMALL} mr-1`} />
+              댓글 추가
+            </Button>
+          </div>
+          <CommentList />
+        </div>
+      </div>
+    </ContentDialog>
+  );
+};
diff --git a/src/4_features/post-management/ui/PostPagination.tsx b/src/4_features/post-management/ui/PostPagination.tsx
new file mode 100644
index 000000000..4951e1397
--- /dev/null
+++ b/src/4_features/post-management/ui/PostPagination.tsx
@@ -0,0 +1,39 @@
+import { SelectLimit } from '@/features/filter-posts/ui/SelectLimit';
+import { UI_CONSTANTS } from '@/shared/constants';
+import { usePostsFilterStore } from '@/shared/lib';
+import { Button } from '@/shared/ui';
+
+export const PostPagination = () => {
+  const {
+    setSkip,
+    pagination: { total, limit, skip },
+  } = usePostsFilterStore();
+
+  return (
+    <div className='flex justify-between items-center'>
+      <div className='flex items-center gap-2'>
+        <span>표시</span>
+        <SelectLimit />
+        <span>항목</span>
+      </div>
+      <div className='flex gap-2'>
+        <Button
+          disabled={skip === UI_CONSTANTS.PAGINATION.DEFAULT_SKIP}
+          onClick={() =>
+            setSkip(
+              Math.max(UI_CONSTANTS.PAGINATION.DEFAULT_SKIP, skip - limit)
+            )
+          }
+        >
+          이전
+        </Button>
+        <Button
+          disabled={skip + limit >= total}
+          onClick={() => setSkip(skip + limit)}
+        >
+          다음
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/src/4_features/post-management/ui/PostTable.tsx b/src/4_features/post-management/ui/PostTable.tsx
new file mode 100644
index 000000000..a95797afa
--- /dev/null
+++ b/src/4_features/post-management/ui/PostTable.tsx
@@ -0,0 +1,172 @@
+import {
+  Edit2,
+  MessageSquare,
+  ThumbsDown,
+  ThumbsUp,
+  Trash2,
+} from 'lucide-react';
+
+import { Post, useDeletePostMutation } from '@/entities/post';
+import { User, UserPick } from '@/entities/user';
+import { API_CONSTANTS, UI_CONSTANTS } from '@/shared/constants';
+import { highlightText, usePostsFilterStore, useUIStore } from '@/shared/lib';
+import {
+  Button,
+  LoadingSpinner,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/shared/ui';
+
+import {
+  SelectedUserProperties,
+  useFilteredPosts,
+} from '../../filter-posts/hooks/useFilteredPosts';
+
+export const PostTable = () => {
+  const { posts, isLoading } = useFilteredPosts();
+  const { selectedTag, setSelectedTag, searchQuery, limit } =
+    usePostsFilterStore();
+  const {
+    setShowUserModal,
+    setSelectedUser,
+    setSelectedPost,
+    setShowPostDetailDialog,
+    setShowEditDialog,
+  } = useUIStore();
+  const { mutate: deletePost } = useDeletePostMutation({
+    onError: error => {
+      console.error('게시물 삭제 오류:', error);
+    },
+  });
+
+  const handleClickTag = (tag: string) => {
+    setSelectedTag(tag);
+  };
+
+  const handleClickDeletePost = (id: number) => {
+    deletePost(id);
+  };
+
+  const handleClickEditPost = (post: Post) => {
+    setSelectedPost(post);
+    setShowEditDialog(true);
+  };
+
+  const handleClickDetailPost = (post: Post) => {
+    setSelectedPost(post);
+    setShowPostDetailDialog(true);
+  };
+
+  const handleClickUser = (user: UserPick<SelectedUserProperties>) => {
+    setShowUserModal(true);
+    setSelectedUser(user as User);
+  };
+
+  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>
+        {isLoading ? (
+          <TableRow>
+            <TableCell className={`h-[${80 * limit}px]`} {...{ colSpan: 5 }}>
+              <div className='flex justify-center items-center w-full h-full'>
+                <LoadingSpinner />
+              </div>
+            </TableCell>
+          </TableRow>
+        ) : (
+          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={`${UI_CONSTANTS.STYLES.TAG_SIZE} ${
+                          selectedTag === tag
+                            ? UI_CONSTANTS.STYLES.TAG_SELECTED
+                            : UI_CONSTANTS.STYLES.TAG_DEFAULT
+                        }`}
+                        onClick={() => handleClickTag(tag)}
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </TableCell>
+              <TableCell>
+                <div
+                  className='flex items-center space-x-2 cursor-pointer'
+                  onClick={() => post.author && handleClickUser(post.author)}
+                >
+                  <img
+                    src={post.author?.image}
+                    alt={post.author?.username}
+                    className={`${UI_CONSTANTS.ICON_SIZES.LARGE} rounded-full`}
+                  />
+                  <span>{post.author?.username}</span>
+                </div>
+              </TableCell>
+              <TableCell>
+                <div className='flex items-center gap-2'>
+                  <ThumbsUp className={UI_CONSTANTS.ICON_SIZES.MEDIUM} />
+                  <span>
+                    {post.reactions?.likes ||
+                      API_CONSTANTS.REACTIONS.DEFAULT_LIKES}
+                  </span>
+                  <ThumbsDown className={UI_CONSTANTS.ICON_SIZES.MEDIUM} />
+                  <span>
+                    {post.reactions?.dislikes ||
+                      API_CONSTANTS.REACTIONS.DEFAULT_DISLIKES}
+                  </span>
+                </div>
+              </TableCell>
+              <TableCell>
+                <div className='flex items-center gap-2'>
+                  <Button
+                    variant='ghost'
+                    size='sm'
+                    onClick={() => handleClickDetailPost(post)}
+                  >
+                    <MessageSquare className={UI_CONSTANTS.ICON_SIZES.MEDIUM} />
+                  </Button>
+                  <Button
+                    variant='ghost'
+                    size='sm'
+                    onClick={() => handleClickEditPost(post)}
+                  >
+                    <Edit2 className={UI_CONSTANTS.ICON_SIZES.MEDIUM} />
+                  </Button>
+                  <Button
+                    variant='ghost'
+                    size='sm'
+                    onClick={() => handleClickDeletePost(post.id)}
+                  >
+                    <Trash2 className={UI_CONSTANTS.ICON_SIZES.MEDIUM} />
+                  </Button>
+                </div>
+              </TableCell>
+            </TableRow>
+          ))
+        )}
+      </TableBody>
+    </Table>
+  );
+};
diff --git a/src/4_features/user-profile/index.ts b/src/4_features/user-profile/index.ts
new file mode 100644
index 000000000..830c625d4
--- /dev/null
+++ b/src/4_features/user-profile/index.ts
@@ -0,0 +1 @@
+export * from './ui/UseProfileDialog';
diff --git a/src/4_features/user-profile/ui/UseProfileDialog.tsx b/src/4_features/user-profile/ui/UseProfileDialog.tsx
new file mode 100644
index 000000000..62898262a
--- /dev/null
+++ b/src/4_features/user-profile/ui/UseProfileDialog.tsx
@@ -0,0 +1,60 @@
+import { Loader2 } from 'lucide-react';
+
+import { useGetUserQuery } from '@/entities/user';
+import { useUIStore } from '@/shared/lib';
+import { ContentDialog } from '@/shared/ui';
+
+export const UserProfileDialog = () => {
+  const { selectedUser, showUserModal, setShowUserModal } = useUIStore();
+
+  const { data: user, isLoading } = useGetUserQuery(selectedUser?.id ?? null);
+
+  if (!selectedUser) return null;
+
+  return (
+    <ContentDialog
+      open={showUserModal}
+      onOpenChange={setShowUserModal}
+      title='사용자 정보'
+    >
+      {isLoading ? (
+        <div className='flex justify-center items-center h-full'>
+          <Loader2 className='w-6 h-6 animate-spin' />
+        </div>
+      ) : (
+        <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>
+      )}
+    </ContentDialog>
+  );
+};
diff --git a/src/5_entities/comment/comment.api.ts b/src/5_entities/comment/comment.api.ts
new file mode 100644
index 000000000..ad45e832e
--- /dev/null
+++ b/src/5_entities/comment/comment.api.ts
@@ -0,0 +1,42 @@
+import { ApiService } from '@/shared/lib';
+
+import {
+  Comment,
+  CommentToCreate,
+  CreatedComment,
+  DeletedComment,
+  GetCommentsResponse,
+} from './comment.type';
+
+export const getComments = async (
+  postId: number
+): Promise<GetCommentsResponse> => {
+  return ApiService.get<GetCommentsResponse>(`/comments/post/${postId}`);
+};
+
+export const createComment = async (
+  newComment: CommentToCreate
+): Promise<CreatedComment> => {
+  return ApiService.post<CreatedComment>('/comments/add', newComment);
+};
+
+export const updateComment = async (
+  updatedComment: Comment
+): Promise<{ body: string }> => {
+  return ApiService.put<{ body: string }>(`/comments/${updatedComment.id}`, {
+    body: updatedComment.body,
+  });
+};
+
+export const patchComment = async (
+  updatedComment: Partial<Comment>,
+  commentId: number
+): Promise<Comment> => {
+  return ApiService.put<Comment>(`/comments/${commentId}`, updatedComment);
+};
+
+export const deleteComment = async (
+  commentId: number
+): Promise<DeletedComment> => {
+  return ApiService.delete<DeletedComment>(`/comments/${commentId}`);
+};
diff --git a/src/5_entities/comment/comment.queries.ts b/src/5_entities/comment/comment.queries.ts
new file mode 100644
index 000000000..ff7fd3088
--- /dev/null
+++ b/src/5_entities/comment/comment.queries.ts
@@ -0,0 +1,317 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { queryKeys } from '@/shared/lib';
+import { MutationProps, Nullable } from '@/shared/types';
+
+import {
+  createComment,
+  deleteComment,
+  getComments,
+  patchComment,
+  updateComment,
+} from './comment.api';
+import {
+  Comment,
+  CommentToCreate,
+  CreatedComment,
+  DeletedComment,
+  GetCommentsResponse,
+} from './comment.type';
+
+export const useGetCommentsQuery = (postId: Nullable<number>) => {
+  return useQuery({
+    queryKey: queryKeys.comments.list(postId ?? 0),
+    queryFn: () => getComments(postId ?? 0),
+    enabled: !!postId,
+  });
+};
+
+export const useCreateCommentMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<CreatedComment>) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (newComment: CommentToCreate) => createComment(newComment),
+    onMutate: async newComment => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.comments.list(newComment.postId),
+      });
+
+      const previousCommentData = queryClient.getQueryData<GetCommentsResponse>(
+        queryKeys.comments.list(newComment.postId)
+      );
+
+      const commentToAdd: Comment = {
+        ...newComment,
+        id: Math.floor(Math.random() * 1000000),
+        likes: 0,
+        user: {
+          id: 1,
+          username: 'John Doe',
+          image: 'john.doe@example.com',
+        },
+      };
+
+      // ! 이전 데이터 캐시에 새 댓글 추가하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(
+        queryKeys.comments.list(newComment.postId),
+        (old: GetCommentsResponse) => {
+          return {
+            ...old,
+            comments: [commentToAdd, ...(old.comments || [])],
+          };
+        }
+      );
+
+      return { previousCommentData };
+    },
+    onError: (error, { postId }, context) => {
+      queryClient.setQueryData(
+        queryKeys.comments.list(postId),
+        context?.previousCommentData
+      );
+      onError?.(error);
+    },
+    onSuccess: (data, _, { previousCommentData }) => {
+      // ! 성공 시 이전 데이터에 성공 데이터 추가
+      queryClient.setQueryData(
+        queryKeys.comments.list(data.postId),
+        (old: any) => {
+          return {
+            ...old,
+            comments: [data, ...(previousCommentData?.comments || [])],
+          };
+        }
+      );
+      onSuccess?.(data);
+    },
+  });
+};
+
+export const useUpdateCommentMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<{ body: string }>) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (updatedComment: Comment) => updateComment(updatedComment),
+    onMutate: async updatedComment => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.comments.list(updatedComment.postId),
+      });
+
+      const previousComments = queryClient.getQueryData<GetCommentsResponse>(
+        queryKeys.comments.list(updatedComment.postId)
+      );
+
+      // ! 이전 데이터 캐시에 수정된 댓글 업데이트하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(
+        queryKeys.comments.list(updatedComment.postId),
+        (old: GetCommentsResponse) => {
+          if (!old) {
+            return {
+              comments: [updatedComment],
+              total: 1,
+              skip: 0,
+              limit: 10,
+            };
+          }
+
+          return {
+            ...old,
+            comments: old.comments.map((comment: Comment) =>
+              comment.id === updatedComment.id ? updatedComment : comment
+            ),
+          };
+        }
+      );
+
+      return { previousComments };
+    },
+    onError: (error, updatedComment, context) => {
+      queryClient.setQueryData(
+        queryKeys.comments.list(updatedComment.postId),
+        context?.previousComments
+      );
+      onError?.(error);
+    },
+    onSuccess: (data, updatedComment, { previousComments }) => {
+      // ! 성공 시 이전 데이터에 성공 데이터 추가
+      queryClient.setQueryData(
+        queryKeys.comments.list(updatedComment.postId),
+        (old: any) => {
+          return {
+            ...old,
+            comments: previousComments?.comments.map((comment: Comment) =>
+              comment.id === updatedComment.id
+                ? { ...comment, body: data.body }
+                : comment
+            ),
+          };
+        }
+      );
+      onSuccess?.(data);
+    },
+  });
+};
+
+export const useDeleteCommentMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<DeletedComment>) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ commentId }: { commentId: number; postId: number }) =>
+      deleteComment(commentId),
+    onMutate: async ({ commentId, postId }) => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.comments.list(postId),
+      });
+
+      const previousComments = queryClient.getQueryData<GetCommentsResponse>(
+        queryKeys.comments.list(postId)
+      );
+
+      // ! 이전 데이터 캐시에 삭제된 댓글 제외하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(queryKeys.comments.list(postId), (old: any) => {
+        if (!old) {
+          return {
+            comments: [],
+            total: 1,
+            skip: 0,
+            limit: 10,
+          };
+        }
+
+        return {
+          ...old,
+          comments: old.comments.filter(
+            (comment: Comment) => comment.id !== commentId
+          ),
+        };
+      });
+
+      return { previousComments };
+    },
+    onError: (error, { postId }, context) => {
+      queryClient.setQueryData(
+        queryKeys.comments.list(postId),
+        context?.previousComments
+      );
+      onError?.(error);
+    },
+    onSuccess: (data, { postId }, { previousComments }) => {
+      // ! 성공 시 이전 데이터에서 삭제된 댓글 제외
+      queryClient.setQueryData(queryKeys.comments.list(postId), (old: any) => {
+        return {
+          ...old,
+          comments: previousComments?.comments.filter(
+            (comment: Comment) => comment.id !== data.id
+          ),
+        };
+      });
+      onSuccess?.(data);
+    },
+  });
+};
+
+export const useLikeCommentMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<Comment>) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      commentId,
+      postId,
+    }: {
+      commentId: number;
+      postId: number;
+    }) => {
+      const commentsData = queryClient.getQueryData<GetCommentsResponse>(
+        queryKeys.comments.list(postId)
+      );
+
+      if (!commentsData) {
+        throw new Error('Comments not found');
+      }
+
+      const commentToUpdate = commentsData.comments.find(
+        (comment: Comment) => comment.id === commentId
+      );
+
+      if (!commentToUpdate) {
+        throw new Error('Comment not found');
+      }
+
+      return patchComment(
+        {
+          likes: commentToUpdate.likes + 1,
+        },
+        commentId
+      );
+    },
+    onMutate: async ({ commentId, postId }) => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.comments.list(postId),
+      });
+
+      const previousComments = queryClient.getQueryData<GetCommentsResponse>(
+        queryKeys.comments.list(postId)
+      );
+
+      // ! 이전 데이터 캐시에 좋아요 누른 댓글 업데이트하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(
+        queryKeys.comments.list(postId),
+        (old: GetCommentsResponse) => {
+          if (!old) {
+            return {
+              comments: [],
+              total: 0,
+              skip: 0,
+              limit: 10,
+            };
+          }
+
+          return {
+            ...old,
+            comments: old.comments.map((comment: Comment) =>
+              comment.id === commentId
+                ? { ...comment, likes: comment.likes + 1 }
+                : comment
+            ),
+          };
+        }
+      );
+
+      return { previousComments };
+    },
+    onError: (error, { postId }, context) => {
+      queryClient.setQueryData(
+        queryKeys.comments.list(postId),
+        context?.previousComments
+      );
+      onError?.(error);
+    },
+    onSuccess: (data, _, { previousComments }) => {
+      // ! 성공 시 이전 데이터에 좋아요 누른 댓글 업데이트
+      // ! 실무에선 응답 데이터의 좋아요 수가 증가해야하지만, 더미 데이터라 증가하지 않으므로 좋아요수가 증가한 것으로 가정하여 업데이트
+      queryClient.setQueryData(queryKeys.comments.list(data.postId), () => {
+        return {
+          ...previousComments,
+          comments: previousComments?.comments.map((comment: Comment) =>
+            comment.id === data.id
+              ? { ...data, likes: comment.likes + 1 }
+              : comment
+          ),
+        };
+      });
+      onSuccess?.(data);
+    },
+  });
+};
diff --git a/src/5_entities/comment/comment.type.ts b/src/5_entities/comment/comment.type.ts
new file mode 100644
index 000000000..0608de1b4
--- /dev/null
+++ b/src/5_entities/comment/comment.type.ts
@@ -0,0 +1,29 @@
+import { PaginationMeta } from '@/shared/types';
+
+import { BaseUser } from '../user';
+
+// ? Comment에 User도 포함되는데 Entity에 넣는게 맞나?
+export interface Comment {
+  id: number;
+  postId: number;
+  body: string;
+  user: BaseUser;
+  likes: number;
+}
+
+export interface CommentToCreate {
+  body: string;
+  postId: number;
+  userId: number;
+}
+
+export interface DeletedComment extends Comment {
+  isDeleted: boolean;
+  deletedOn: string;
+}
+
+export type CreatedComment = CommentToCreate;
+
+export interface GetCommentsResponse extends PaginationMeta {
+  comments: Comment[];
+}
diff --git a/src/5_entities/comment/index.ts b/src/5_entities/comment/index.ts
new file mode 100644
index 000000000..74af32942
--- /dev/null
+++ b/src/5_entities/comment/index.ts
@@ -0,0 +1,3 @@
+export * from './comment.type';
+export * from './comment.queries';
+export * from './comment.api';
diff --git a/src/5_entities/post/index.ts b/src/5_entities/post/index.ts
new file mode 100644
index 000000000..50b56028e
--- /dev/null
+++ b/src/5_entities/post/index.ts
@@ -0,0 +1,5 @@
+export * from './post.type';
+export * from './post.api';
+export * from './post.queries';
+export * from './post.model';
+export * from './post.constant';
diff --git a/src/5_entities/post/post.api.ts b/src/5_entities/post/post.api.ts
new file mode 100644
index 000000000..71b669e90
--- /dev/null
+++ b/src/5_entities/post/post.api.ts
@@ -0,0 +1,74 @@
+import {
+  BaseFilterParams,
+  DeletedPost,
+  GetPostsResponse,
+  ParamsWithSearch,
+  ParamsWithTag,
+  Post,
+  POST_CONSTANTS,
+  SORT_ORDER,
+} from '@/entities/post';
+import { ApiService } from '@/shared/lib';
+
+export const getPosts = async ({
+  limit = POST_CONSTANTS.DEFAULT_LIMIT,
+  skip = POST_CONSTANTS.DEFAULT_SKIP,
+  sortBy,
+  sortOrder,
+}: BaseFilterParams): Promise<GetPostsResponse> => {
+  const params = {
+    limit: limit.toString(),
+    skip: skip.toString(),
+    sortBy: sortBy || '',
+    sortOrder: sortOrder || SORT_ORDER.ASC,
+  };
+
+  return ApiService.get<GetPostsResponse>('/posts', params);
+};
+
+export const getPostsByTag = async ({
+  selectedTag,
+  limit,
+  skip,
+  sortBy,
+  sortOrder,
+}: ParamsWithTag): Promise<GetPostsResponse> => {
+  const params = {
+    limit: limit?.toString() || '0',
+    skip: skip?.toString() || '0',
+    sortBy: sortBy || '',
+    sortOrder: sortOrder || SORT_ORDER.ASC,
+  };
+
+  return ApiService.get<GetPostsResponse>(`/posts/tag/${selectedTag}`, params);
+};
+
+export const getPostsBySearch = async ({
+  searchQuery,
+  limit,
+  skip,
+  sortBy,
+  sortOrder,
+}: ParamsWithSearch): Promise<GetPostsResponse> => {
+  const params = {
+    limit: limit?.toString() || '0',
+    skip: skip?.toString() || '0',
+    searchQuery,
+    sortBy: sortBy || '',
+    sortOrder: sortOrder || SORT_ORDER.ASC,
+  };
+
+  return ApiService.get<GetPostsResponse>('/posts/search', params);
+};
+
+export const createPost = async (newPost: Omit<Post, 'id'>): Promise<Post> => {
+  return ApiService.post<Post>('/posts/add', newPost);
+};
+
+export const putPost = async (updatedPost: Post): Promise<Post> => {
+  return ApiService.put<Post>(`/posts/${updatedPost.id}`, updatedPost);
+};
+
+export const deletePost = async (postId: number): Promise<DeletedPost> => {
+  return ApiService.delete(`/posts/${postId}`);
+};
diff --git a/src/5_entities/post/post.constant.ts b/src/5_entities/post/post.constant.ts
new file mode 100644
index 000000000..cdbe5654d
--- /dev/null
+++ b/src/5_entities/post/post.constant.ts
@@ -0,0 +1,4 @@
+export const POST_CONSTANTS = {
+  DEFAULT_LIMIT: 10,
+  DEFAULT_SKIP: 0,
+} as const;
diff --git a/src/5_entities/post/post.model.ts b/src/5_entities/post/post.model.ts
new file mode 100644
index 000000000..93e32aeaf
--- /dev/null
+++ b/src/5_entities/post/post.model.ts
@@ -0,0 +1,5 @@
+// Post 엔티티의 순수한 비즈니스 로직만 포함
+export const postModel = {
+  // Post 관련 순수 함수들만 정의
+  // 다른 엔티티와의 조합 로직은 Features 레이어로 이동
+};
diff --git a/src/5_entities/post/post.queries.ts b/src/5_entities/post/post.queries.ts
new file mode 100644
index 000000000..8298c5682
--- /dev/null
+++ b/src/5_entities/post/post.queries.ts
@@ -0,0 +1,195 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { queryKeys } from '@/shared/lib';
+import { useCachedPostsQueryKey } from '@/shared/lib/hooks/useCachedPostsQueryKey';
+import { MutationProps } from '@/shared/types';
+
+import {
+  createPost,
+  deletePost,
+  getPosts,
+  getPostsBySearch,
+  getPostsByTag,
+  putPost,
+} from './post.api';
+import {
+  BaseFilterParams,
+  GetPostsResponse,
+  ParamsWithSearch,
+  ParamsWithTag,
+  Post,
+} from './post.type';
+
+export const useGetPostsQuery = (params: BaseFilterParams) => {
+  return useQuery({
+    queryKey: queryKeys.posts.list(params),
+    queryFn: () => getPosts(params),
+  });
+};
+
+export const useGetPostsByTagQuery = (params: ParamsWithTag) => {
+  return useQuery({
+    queryKey: queryKeys.posts.list(params),
+    queryFn: () => getPostsByTag(params),
+    enabled: !!params.selectedTag && params.selectedTag !== 'all',
+  });
+};
+
+export const useGetPostsBySearchQuery = (params: ParamsWithSearch) => {
+  return useQuery({
+    queryKey: queryKeys.posts.list(params),
+    queryFn: () => getPostsBySearch(params),
+    enabled: !!params.searchQuery && params.searchQuery.trim() !== '',
+  });
+};
+
+export const useCreatePostMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<Post>) => {
+  const queryClient = useQueryClient();
+  const cachedPostsQueryKey = useCachedPostsQueryKey();
+
+  return useMutation({
+    mutationFn: (newPost: Omit<Post, 'id'>) => createPost(newPost),
+    onMutate: async newPost => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.posts.all,
+      });
+
+      const previousPosts =
+        queryClient.getQueryData<GetPostsResponse>(cachedPostsQueryKey);
+
+      // ! 이전 데이터 캐시에 새 게시물 추가하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(cachedPostsQueryKey, (old: any) => {
+        const postToAdd: Post = {
+          ...newPost,
+          id: previousPosts?.total ? previousPosts.total + 1 : 1,
+        };
+
+        if (!old) {
+          return {
+            posts: [postToAdd],
+            total: 1,
+            skip: 0,
+            limit: 10,
+          };
+        }
+
+        return {
+          ...old,
+          posts: [postToAdd, ...(old.posts || [])],
+        };
+      });
+
+      return { previousPosts };
+    },
+    onError: (error, __, context) => {
+      queryClient.setQueryData(cachedPostsQueryKey, context?.previousPosts);
+      onError?.(error);
+    },
+    onSuccess: (data, _, { previousPosts }) => {
+      // ! 성공 시 이전 데이터에 성공 데이터 추가
+      queryClient.setQueryData(cachedPostsQueryKey, (old: any) => {
+        return {
+          ...old,
+          posts: [data, ...(previousPosts?.posts || [])],
+        };
+      });
+      onSuccess?.(data);
+    },
+  });
+};
+
+export const usePutPostMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<Post>) => {
+  const queryClient = useQueryClient();
+  const cachedPostsQueryKey = useCachedPostsQueryKey();
+
+  return useMutation({
+    mutationFn: (updatedPost: Post) => putPost(updatedPost),
+    onMutate: async updatedPost => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.posts.all,
+      });
+
+      const previousPosts =
+        queryClient.getQueryData<GetPostsResponse>(cachedPostsQueryKey);
+
+      // ! 이전 데이터 캐시에 수정된 게시물 업데이트하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(cachedPostsQueryKey, (old: any) => {
+        if (!old || !old.posts) {
+          return old;
+        }
+
+        return {
+          ...old,
+          posts: old.posts.map((post: Post) =>
+            post.id === updatedPost.id ? updatedPost : post
+          ),
+        };
+      });
+
+      return { previousPosts };
+    },
+    onError: (error, __, context) => {
+      queryClient.setQueryData(cachedPostsQueryKey, context?.previousPosts);
+      onError?.(error);
+    },
+    onSuccess: (data, updatedPost, { previousPosts }) => {
+      // ! 성공 시 이전 데이터에 성공 데이터로 수정
+      queryClient.setQueryData(cachedPostsQueryKey, (old: any) => {
+        return {
+          ...old,
+          posts: previousPosts?.posts.map((post: Post) =>
+            post.id === updatedPost.id ? updatedPost : post
+          ),
+        };
+      });
+      onSuccess?.(data);
+    },
+  });
+};
+
+export const useDeletePostMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<Post>) => {
+  const queryClient = useQueryClient();
+  const cachedPostsQueryKey = useCachedPostsQueryKey();
+
+  return useMutation({
+    mutationFn: (postId: number) => deletePost(postId),
+    onMutate: async postId => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.posts.all,
+      });
+
+      const previousPosts =
+        queryClient.getQueryData<GetPostsResponse>(cachedPostsQueryKey);
+
+      // ! 이전 데이터 캐시에 삭제된 게시물 제외하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(cachedPostsQueryKey, (old: any) => {
+        if (!old || !old.posts) {
+          return old;
+        }
+        return {
+          ...old,
+          posts: old.posts.filter((post: Post) => post.id !== postId),
+        };
+      });
+
+      return { previousPosts };
+    },
+
+    onError: (error, __, context) => {
+      queryClient.setQueryData(cachedPostsQueryKey, context?.previousPosts);
+      onError?.(error);
+    },
+    onSuccess: data => {
+      onSuccess?.(data);
+    },
+  });
+};
diff --git a/src/5_entities/post/post.type.ts b/src/5_entities/post/post.type.ts
new file mode 100644
index 000000000..dda18e22c
--- /dev/null
+++ b/src/5_entities/post/post.type.ts
@@ -0,0 +1,63 @@
+import { EmptyStringable, PaginationMeta, SortOrder } from '@/shared/types';
+
+export interface Post {
+  id: number;
+  title: string;
+  body: string;
+  userId: number;
+  tags?: string[];
+  reactions?: PostReactions;
+}
+
+export interface DeletedPost {
+  id: number;
+  title: string;
+  body: string;
+  tags: string[];
+  reactions: PostReactions;
+  views: number;
+  userId: number;
+  isDeleted: boolean;
+  deletedOn: string;
+}
+
+export interface PostReactions {
+  likes: number;
+  dislikes: number;
+}
+
+export interface GetPostsResponse extends PaginationMeta {
+  posts: Post[];
+}
+
+export interface BaseFilterParams {
+  limit: number;
+  skip: number;
+  sortBy?: EmptyStringable<SORT_BY>;
+  sortOrder?: SortOrder;
+}
+
+export interface AllFilterParams extends BaseFilterParams {
+  searchQuery: EmptyStringable<string>;
+  selectedTag: EmptyStringable<string>;
+}
+
+export interface ParamsWithTag extends BaseFilterParams {
+  selectedTag: EmptyStringable<string>;
+}
+
+export interface ParamsWithSearch extends BaseFilterParams {
+  searchQuery: EmptyStringable<string>;
+}
+
+export enum SORT_ORDER {
+  ASC = 'asc',
+  DESC = 'desc',
+}
+
+export enum SORT_BY {
+  NONE = 'none',
+  ID = 'id',
+  TITLE = 'title',
+  REACTIONS = 'reactions',
+}
diff --git a/src/5_entities/tag/index.ts b/src/5_entities/tag/index.ts
new file mode 100644
index 000000000..9673f1651
--- /dev/null
+++ b/src/5_entities/tag/index.ts
@@ -0,0 +1,3 @@
+export * from './tag.api';
+export * from './tag.queries';
+export * from './tag.type';
diff --git a/src/5_entities/tag/tag.api.ts b/src/5_entities/tag/tag.api.ts
new file mode 100644
index 000000000..708f6b900
--- /dev/null
+++ b/src/5_entities/tag/tag.api.ts
@@ -0,0 +1,6 @@
+import { Tag } from '@/entities/tag';
+import { ApiService } from '@/shared/lib';
+
+export const getTags = async (): Promise<Tag[]> => {
+  return ApiService.get<Tag[]>('/posts/tags');
+};
diff --git a/src/5_entities/tag/tag.queries.ts b/src/5_entities/tag/tag.queries.ts
new file mode 100644
index 000000000..c6495791f
--- /dev/null
+++ b/src/5_entities/tag/tag.queries.ts
@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getTags } from '@/entities/tag';
+import { queryKeys } from '@/shared/lib';
+
+export const useGetTagsQuery = () => {
+  return useQuery({
+    queryKey: queryKeys.tags.lists(),
+    queryFn: getTags,
+  });
+};
diff --git a/src/5_entities/tag/tag.type.ts b/src/5_entities/tag/tag.type.ts
new file mode 100644
index 000000000..0d066ec88
--- /dev/null
+++ b/src/5_entities/tag/tag.type.ts
@@ -0,0 +1,7 @@
+interface Tag {
+  name: string;
+  slug: string;
+  url: string;
+}
+
+export type { Tag };
diff --git a/src/5_entities/user/index.ts b/src/5_entities/user/index.ts
new file mode 100644
index 000000000..ae6eaea64
--- /dev/null
+++ b/src/5_entities/user/index.ts
@@ -0,0 +1,3 @@
+export * from './user.type';
+export * from './user.api';
+export * from './user.queries';
diff --git a/src/5_entities/user/user.api.ts b/src/5_entities/user/user.api.ts
new file mode 100644
index 000000000..bb1a85140
--- /dev/null
+++ b/src/5_entities/user/user.api.ts
@@ -0,0 +1,36 @@
+import { User, UserPick } from '@/entities/user';
+import { ApiService } from '@/shared/lib';
+import { PaginationMeta } from '@/shared/types';
+
+export interface GetUsersResponse<T> extends PaginationMeta {
+  users: T[];
+}
+
+export interface GetUsersParams<K extends keyof User> {
+  limit: number;
+  select: K[];
+}
+
+// select에 따라 UserPick 타입을 동적으로 만들 수 없으므로,
+// 반환 타입을 런타임에 맞게 제네릭으로 받도록 getUsers를 제네릭 함수로 변경합니다.
+
+export const getUsers = async <K extends keyof User>({
+  limit,
+  select,
+}: GetUsersParams<K>): Promise<GetUsersResponse<UserPick<K>>> => {
+  const params = {
+    limit: limit.toString(),
+    select: select.join(','),
+  };
+  return ApiService.get<GetUsersResponse<UserPick<K>>>('/users', params);
+};
+
+export const postUser = async () => {};
+
+export const putUser = async () => {};
+
+export const deleteUser = async () => {};
+
+export const getUser = async (userId: number): Promise<User> => {
+  return ApiService.get<User>(`/users/${userId}`);
+};
diff --git a/src/5_entities/user/user.constant.ts b/src/5_entities/user/user.constant.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/5_entities/user/user.model.ts b/src/5_entities/user/user.model.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/5_entities/user/user.queries.ts b/src/5_entities/user/user.queries.ts
new file mode 100644
index 000000000..0921cf30f
--- /dev/null
+++ b/src/5_entities/user/user.queries.ts
@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getUser, getUsers, GetUsersParams, User } from '@/entities/user';
+import { queryKeys } from '@/shared/lib';
+import { Nullable } from '@/shared/types';
+
+export const useGetUsersQuery = <K extends keyof User>(
+  params: GetUsersParams<K>
+) => {
+  return useQuery({
+    queryKey: queryKeys.users.list(params),
+    queryFn: () => getUsers(params),
+  });
+};
+
+export const useGetUserQuery = (userId: Nullable<number>) => {
+  return useQuery({
+    queryKey: queryKeys.users.detail(userId ?? 0),
+    queryFn: () => getUser(userId ?? 0),
+    enabled: !!userId,
+  });
+};
diff --git a/src/5_entities/user/user.type.ts b/src/5_entities/user/user.type.ts
new file mode 100644
index 000000000..d4a23b87e
--- /dev/null
+++ b/src/5_entities/user/user.type.ts
@@ -0,0 +1,24 @@
+export interface BaseUser {
+  id: number;
+  image: string;
+  username: string;
+}
+
+export interface User extends BaseUser {
+  firstName: string;
+  lastName: string;
+  age: number;
+  email: string;
+  phone: string;
+  address: {
+    address: string;
+    city: string;
+    state: string;
+  };
+  company: {
+    name: string;
+    title: string;
+  };
+}
+
+export type UserPick<T extends keyof User> = Pick<User, T>;
diff --git a/src/6_shared/api/axios.ts b/src/6_shared/api/axios.ts
new file mode 100644
index 000000000..a7459b1e0
--- /dev/null
+++ b/src/6_shared/api/axios.ts
@@ -0,0 +1,9 @@
+import axios from 'axios';
+
+export const axiosInstance = axios.create({
+  baseURL: '/api',
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
diff --git a/src/6_shared/assets/react.svg b/src/6_shared/assets/react.svg
new file mode 100644
index 000000000..6c87de9bb
--- /dev/null
+++ b/src/6_shared/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/src/6_shared/constants/api.ts b/src/6_shared/constants/api.ts
new file mode 100644
index 000000000..ab201b693
--- /dev/null
+++ b/src/6_shared/constants/api.ts
@@ -0,0 +1,19 @@
+/**
+ * API 관련 상수 정의
+ *
+ * API 엔드포인트, 기본값, 쿼리 파라미터 등을 관리
+ */
+
+export const API_CONSTANTS = {
+  // 기본 사용자 ID
+  DEFAULT_USER_ID: 1,
+
+  // 기본 반응 수치
+  REACTIONS: {
+    DEFAULT_LIKES: 0,
+    DEFAULT_DISLIKES: 0,
+    LIKE_INCREMENT: 1,
+  },
+} as const;
+
+export type APIConstants = typeof API_CONSTANTS;
diff --git a/src/6_shared/constants/index.ts b/src/6_shared/constants/index.ts
new file mode 100644
index 000000000..beadb7376
--- /dev/null
+++ b/src/6_shared/constants/index.ts
@@ -0,0 +1,2 @@
+export * from './ui';
+export * from './api';
diff --git a/src/6_shared/constants/ui.ts b/src/6_shared/constants/ui.ts
new file mode 100644
index 000000000..4445d87b7
--- /dev/null
+++ b/src/6_shared/constants/ui.ts
@@ -0,0 +1,45 @@
+/**
+ * UI 관련 상수 정의
+ *
+ * 전역적으로 사용되는 UI 요소들의 크기, 스타일, 설정값 등을 관리
+ */
+
+export const UI_CONSTANTS = {
+  // 텍스트 영역 행 수
+  TEXTAREA_ROWS: {
+    LARGE: 30, // 게시물 작성용
+    MEDIUM: 15, // 게시물 수정용
+    SMALL: 5, // 댓글 작성용
+  },
+
+  // 아이콘 크기 (Tailwind CSS 클래스)
+  ICON_SIZES: {
+    SMALL: 'w-3 h-3', // 댓글 버튼용
+    MEDIUM: 'w-4 h-4', // 일반 버튼용
+    LARGE: 'w-8 h-8', // 프로필 이미지용
+  },
+
+  // 페이지네이션 설정
+  PAGINATION: {
+    DEFAULT_LIMIT: 10,
+    DEFAULT_SKIP: 0,
+    LIMIT_OPTIONS: [10, 20, 30] as const,
+  },
+
+  // 스타일링 관련
+  STYLES: {
+    TAG_SELECTED: 'text-white bg-blue-500 hover:bg-blue-600',
+    TAG_DEFAULT: 'text-blue-800 bg-blue-100 hover:bg-blue-200',
+    TAG_SIZE: 'px-1 text-[9px] font-semibold rounded-[4px] cursor-pointer',
+  },
+
+  // 레이아웃 관련
+  LAYOUT: {
+    SPACE_Y_1: 'space-y-1',
+    SPACE_Y_2: 'space-y-2',
+    FLEX_GAP_1: 'gap-1',
+    FLEX_GAP_2: 'gap-2',
+  },
+} as const;
+
+export type UIConstants = typeof UI_CONSTANTS;
diff --git a/src/6_shared/lib/api/apiService.ts b/src/6_shared/lib/api/apiService.ts
new file mode 100644
index 000000000..6665f9fa1
--- /dev/null
+++ b/src/6_shared/lib/api/apiService.ts
@@ -0,0 +1,24 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { apiClient } from './axios';
+
+export const ApiService = {
+  get: async <T>(url: string, params?: Record<string, any>): Promise<T> => {
+    const response = await apiClient.get<T>(url, { params });
+    return response.data;
+  },
+
+  post: async <T>(url: string, data?: any): Promise<T> => {
+    const response = await apiClient.post<T>(url, data);
+    return response.data;
+  },
+
+  put: async <T>(url: string, data?: any): Promise<T> => {
+    const response = await apiClient.put<T>(url, data);
+    return response.data;
+  },
+
+  delete: async <T>(url: string): Promise<T> => {
+    const response = await apiClient.delete<T>(url);
+    return response.data;
+  },
+};
diff --git a/src/6_shared/lib/api/axios.ts b/src/6_shared/lib/api/axios.ts
new file mode 100644
index 000000000..975c604e9
--- /dev/null
+++ b/src/6_shared/lib/api/axios.ts
@@ -0,0 +1,12 @@
+import axios from 'axios';
+
+const baseURL = 'https://dummyjson.com';
+
+// 기본 axios 인스턴스 생성
+export const apiClient = axios.create({
+  baseURL,
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
diff --git a/src/6_shared/lib/api/index.ts b/src/6_shared/lib/api/index.ts
new file mode 100644
index 000000000..9e8a50de0
--- /dev/null
+++ b/src/6_shared/lib/api/index.ts
@@ -0,0 +1,2 @@
+export { apiClient } from './axios';
+export { ApiService } from './apiService';
diff --git a/src/6_shared/lib/hooks/index.ts b/src/6_shared/lib/hooks/index.ts
new file mode 100644
index 000000000..5a6a3c3ed
--- /dev/null
+++ b/src/6_shared/lib/hooks/index.ts
@@ -0,0 +1,3 @@
+export * from './useCachedPostsQueryKey';
+export * from './usePostsFilterStore';
+export * from './useDebounce';
diff --git a/src/6_shared/lib/hooks/useCachedPostsQueryKey.ts b/src/6_shared/lib/hooks/useCachedPostsQueryKey.ts
new file mode 100644
index 000000000..7ef629d11
--- /dev/null
+++ b/src/6_shared/lib/hooks/useCachedPostsQueryKey.ts
@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+
+import {
+  AllFilterParams,
+  BaseFilterParams,
+  ParamsWithSearch,
+  ParamsWithTag,
+} from '@/entities/post';
+
+import { queryKeys } from '../query/queryKeys';
+import { POST_QUERY_TYPE } from '../store/postsFilterStore';
+import { usePostsFilterStore } from './usePostsFilterStore';
+
+export const useCachedPostsQueryKey = () => {
+  const {
+    queryType,
+    filters: { searchQuery, selectedTag, sortBy, sortOrder },
+    pagination: { limit, skip },
+  } = usePostsFilterStore();
+
+  const [params, setParams] = useState<Partial<AllFilterParams>>({
+    limit,
+    skip,
+    sortBy,
+    sortOrder,
+  });
+
+  useEffect(() => {
+    if (queryType === POST_QUERY_TYPE.SEARCH) {
+      const paramsWithSearch: ParamsWithSearch = {
+        limit,
+        skip,
+        sortBy,
+        sortOrder,
+        searchQuery,
+      };
+      setParams(paramsWithSearch);
+      return;
+    }
+
+    if (queryType === POST_QUERY_TYPE.TAG) {
+      const paramsWithTag: ParamsWithTag = {
+        limit,
+        skip,
+        sortBy,
+        sortOrder,
+        selectedTag,
+      };
+      setParams(paramsWithTag);
+      return;
+    }
+
+    const baseParams: BaseFilterParams = {
+      limit,
+      skip,
+      sortBy,
+      sortOrder,
+    };
+    setParams(baseParams);
+  }, [queryType, limit, skip, sortBy, sortOrder, searchQuery, selectedTag]);
+
+  return queryKeys.posts.list(params);
+};
diff --git a/src/6_shared/lib/hooks/useDebounce.ts b/src/6_shared/lib/hooks/useDebounce.ts
new file mode 100644
index 000000000..f737f854a
--- /dev/null
+++ b/src/6_shared/lib/hooks/useDebounce.ts
@@ -0,0 +1,23 @@
+import { useCallback, useRef } from 'react';
+
+export const useDebounce = <T extends (...args: any[]) => any>(
+  callback: T,
+  delay: number
+) => {
+  const timeoutRef = useRef<number | undefined>(undefined);
+
+  const debouncedCallback = useCallback(
+    (...args: Parameters<T>) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      timeoutRef.current = window.setTimeout(() => {
+        callback(...args);
+      }, delay);
+    },
+    [callback, delay]
+  );
+
+  return debouncedCallback;
+};
diff --git a/src/6_shared/lib/hooks/usePostsFilterStore.ts b/src/6_shared/lib/hooks/usePostsFilterStore.ts
new file mode 100644
index 000000000..1cff6398b
--- /dev/null
+++ b/src/6_shared/lib/hooks/usePostsFilterStore.ts
@@ -0,0 +1,71 @@
+import { useEffect } from 'react';
+
+import { useAtom } from 'jotai';
+
+import {
+  filtersAtom,
+  limitAtom,
+  paginationAtom,
+  queryTypeAtom,
+  searchQueryAtom,
+  selectedTagAtom,
+  skipAtom,
+  sortByAtom,
+  sortOrderAtom,
+  useURLSync,
+} from '../store/postsFilterStore';
+
+export const usePostsFilterStore = () => {
+  const [queryType, setQueryType] = useAtom(queryTypeAtom);
+  const [searchQuery, setSearchQuery] = useAtom(searchQueryAtom);
+  const [selectedTag, setSelectedTag] = useAtom(selectedTagAtom);
+  const [sortBy, setSortBy] = useAtom(sortByAtom);
+  const [sortOrder, setSortOrder] = useAtom(sortOrderAtom);
+  const [skip, setSkip] = useAtom(skipAtom);
+  const [limit, setLimit] = useAtom(limitAtom);
+  const [pagination, setPagination] = useAtom(paginationAtom);
+  const [filters, setFilters] = useAtom(filtersAtom);
+
+  const { updateURL, syncFromURL } = useURLSync();
+
+  // 컴포넌트 마운트 시 URL에서 상태 복원
+  useEffect(() => {
+    syncFromURL();
+  }, []);
+
+  // 필터 상태 변경 시 URL 업데이트
+  useEffect(() => {
+    updateURL();
+  }, [searchQuery, selectedTag, sortBy, sortOrder, skip, limit]);
+
+  // 브라우저 뒤로가기/앞으로가기 처리
+  useEffect(() => {
+    const handlePopState = () => {
+      syncFromURL();
+    };
+
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, []);
+
+  return {
+    queryType,
+    setQueryType,
+    searchQuery,
+    setSearchQuery,
+    selectedTag,
+    setSelectedTag,
+    sortBy,
+    setSortBy,
+    sortOrder,
+    setSortOrder,
+    skip,
+    setSkip,
+    limit,
+    setLimit,
+    pagination,
+    setPagination,
+    filters,
+    setFilters,
+  };
+};
diff --git a/src/6_shared/lib/index.ts b/src/6_shared/lib/index.ts
new file mode 100644
index 000000000..bbeff7af1
--- /dev/null
+++ b/src/6_shared/lib/index.ts
@@ -0,0 +1,5 @@
+export * from './api';
+export * from './hooks';
+export * from './query';
+export * from './store';
+export * from './utils';
diff --git a/src/6_shared/lib/query/index.ts b/src/6_shared/lib/query/index.ts
new file mode 100644
index 000000000..e08035cc8
--- /dev/null
+++ b/src/6_shared/lib/query/index.ts
@@ -0,0 +1 @@
+export * from './queryKeys';
diff --git a/src/6_shared/lib/query/queryKeys.ts b/src/6_shared/lib/query/queryKeys.ts
new file mode 100644
index 000000000..6e5eb276d
--- /dev/null
+++ b/src/6_shared/lib/query/queryKeys.ts
@@ -0,0 +1,55 @@
+import { AllFilterParams } from '@/entities/post';
+import { GetUsersParams, User } from '@/entities/user';
+
+export const QUERY_DOMAINS = {
+  POSTS: 'posts',
+  USERS: 'users',
+  COMMENTS: 'comments',
+  TAGS: 'tags',
+} as const;
+
+export const QUERY_OPERATIONS = {
+  LIST: 'list',
+  DETAIL: 'detail',
+  INFINITE: 'infinite',
+  SEARCH: 'search',
+  COUNT: 'count',
+} as const;
+
+const postQueryKeys = {
+  all: [QUERY_DOMAINS.POSTS] as const,
+
+  lists: () => [QUERY_DOMAINS.POSTS, QUERY_OPERATIONS.LIST] as const,
+  list: (params: Partial<AllFilterParams>) =>
+    [...postQueryKeys.lists(), params] as const,
+} as const;
+
+const userQueryKeys = {
+  all: [QUERY_DOMAINS.USERS] as const,
+
+  lists: () => [QUERY_DOMAINS.USERS, QUERY_OPERATIONS.LIST] as const,
+  list: (params: GetUsersParams<keyof User>) =>
+    [QUERY_DOMAINS.USERS, QUERY_OPERATIONS.LIST, params] as const,
+  details: () => [...userQueryKeys.lists(), 'detail'] as const,
+  detail: (userId: number) => [...userQueryKeys.details(), userId] as const,
+} as const;
+
+const tagQueryKeys = {
+  all: [QUERY_DOMAINS.TAGS] as const,
+
+  lists: () => [QUERY_DOMAINS.TAGS, QUERY_OPERATIONS.LIST] as const,
+} as const;
+
+const commentQueryKeys = {
+  all: [QUERY_DOMAINS.COMMENTS] as const,
+
+  lists: () => [QUERY_DOMAINS.COMMENTS, QUERY_OPERATIONS.LIST] as const,
+  list: (postId: number) => [...commentQueryKeys.lists(), postId] as const,
+} as const;
+
+export const queryKeys = {
+  posts: postQueryKeys,
+  users: userQueryKeys,
+  tags: tagQueryKeys,
+  comments: commentQueryKeys,
+} as const;
diff --git a/src/6_shared/lib/store/UIStore.ts b/src/6_shared/lib/store/UIStore.ts
new file mode 100644
index 000000000..8711ce404
--- /dev/null
+++ b/src/6_shared/lib/store/UIStore.ts
@@ -0,0 +1,134 @@
+import { atom, useAtom } from 'jotai';
+
+import { Comment } from '@/entities/comment';
+import { Post } from '@/entities/post';
+import { User } from '@/entities/user';
+import { Nullable } from '@/shared/types';
+
+export interface UIState {
+  showAddDialog: boolean;
+  showEditDialog: boolean;
+  showAddCommentDialog: boolean;
+  showEditCommentDialog: boolean;
+  showPostDetailDialog: boolean;
+  showUserModifyDialog: boolean;
+  selectedPost: Nullable<Post>;
+  selectedComment: Nullable<Comment>;
+  selectedUser: Nullable<Partial<User>>;
+}
+
+const initialUIState: UIState = {
+  showAddDialog: false,
+  showEditDialog: false,
+  showAddCommentDialog: false,
+  showEditCommentDialog: false,
+  showPostDetailDialog: false,
+  showUserModifyDialog: false,
+  selectedPost: null,
+  selectedComment: null,
+  selectedUser: null,
+};
+
+export const dialogAtom = atom<UIState>(initialUIState);
+
+const showAddDialogAtom = atom(
+  get => get(dialogAtom).showAddDialog,
+  (get, set, newValue: boolean) => {
+    set(dialogAtom, { ...get(dialogAtom), showAddDialog: newValue });
+  }
+);
+
+const showEditDialogAtom = atom(
+  get => get(dialogAtom).showEditDialog,
+  (get, set, newValue: boolean) => {
+    set(dialogAtom, { ...get(dialogAtom), showEditDialog: newValue });
+  }
+);
+
+const showAddCommentDialogAtom = atom(
+  get => get(dialogAtom).showAddCommentDialog,
+  (get, set, newValue: boolean) => {
+    set(dialogAtom, { ...get(dialogAtom), showAddCommentDialog: newValue });
+  }
+);
+
+const showEditCommentDialogAtom = atom(
+  get => get(dialogAtom).showEditCommentDialog,
+  (get, set, newValue: boolean) => {
+    set(dialogAtom, { ...get(dialogAtom), showEditCommentDialog: newValue });
+  }
+);
+
+const showPostDetailDialogAtom = atom(
+  get => get(dialogAtom).showPostDetailDialog,
+  (get, set, newValue: boolean) => {
+    set(dialogAtom, { ...get(dialogAtom), showPostDetailDialog: newValue });
+  }
+);
+
+const showUserModalAtom = atom(
+  get => get(dialogAtom).showUserModifyDialog,
+  (get, set, newValue: boolean) => {
+    set(dialogAtom, { ...get(dialogAtom), showUserModifyDialog: newValue });
+  }
+);
+
+const selectedPostAtom = atom(
+  get => get(dialogAtom).selectedPost,
+  (get, set, newValue: Nullable<Post>) => {
+    set(dialogAtom, { ...get(dialogAtom), selectedPost: newValue });
+  }
+);
+
+const selectedCommentAtom = atom(
+  get => get(dialogAtom).selectedComment,
+  (get, set, newValue: Nullable<Comment>) => {
+    set(dialogAtom, { ...get(dialogAtom), selectedComment: newValue });
+  }
+);
+
+const selectedUserAtom = atom(
+  get => get(dialogAtom).selectedUser,
+  (get, set, newValue: Nullable<User>) => {
+    set(dialogAtom, { ...get(dialogAtom), selectedUser: newValue });
+  }
+);
+
+export const useUIStore = () => {
+  const [showAddDialog, setShowAddDialog] = useAtom(showAddDialogAtom);
+  const [showEditDialog, setShowEditDialog] = useAtom(showEditDialogAtom);
+  const [showAddCommentDialog, setShowAddCommentDialog] = useAtom(
+    showAddCommentDialogAtom
+  );
+  const [showEditCommentDialog, setShowEditCommentDialog] = useAtom(
+    showEditCommentDialogAtom
+  );
+  const [showPostDetailDialog, setShowPostDetailDialog] = useAtom(
+    showPostDetailDialogAtom
+  );
+  const [showUserModal, setShowUserModal] = useAtom(showUserModalAtom);
+  const [selectedPost, setSelectedPost] = useAtom(selectedPostAtom);
+  const [selectedComment, setSelectedComment] = useAtom(selectedCommentAtom);
+  const [selectedUser, setSelectedUser] = useAtom(selectedUserAtom);
+
+  return {
+    showAddDialog,
+    setShowAddDialog,
+    showEditDialog,
+    setShowEditDialog,
+    showAddCommentDialog,
+    setShowAddCommentDialog,
+    showEditCommentDialog,
+    setShowEditCommentDialog,
+    showPostDetailDialog,
+    setShowPostDetailDialog,
+    showUserModal,
+    setShowUserModal,
+    selectedPost,
+    setSelectedPost,
+    selectedComment,
+    setSelectedComment,
+    selectedUser,
+    setSelectedUser,
+  };
+};
diff --git a/src/6_shared/lib/store/index.ts b/src/6_shared/lib/store/index.ts
new file mode 100644
index 000000000..8b3807bec
--- /dev/null
+++ b/src/6_shared/lib/store/index.ts
@@ -0,0 +1,2 @@
+export * from './postsFilterStore';
+export * from './UIStore';
diff --git a/src/6_shared/lib/store/postsFilterStore.ts b/src/6_shared/lib/store/postsFilterStore.ts
new file mode 100644
index 000000000..2eb7515d1
--- /dev/null
+++ b/src/6_shared/lib/store/postsFilterStore.ts
@@ -0,0 +1,223 @@
+import { atom, useAtom } from 'jotai';
+
+import { AllFilterParams, SORT_BY } from '@/entities/post';
+import { UI_CONSTANTS } from '@/shared/constants';
+import { EmptyStringable, PaginationMeta, SortOrder } from '@/shared/types';
+
+export enum POST_QUERY_TYPE {
+  BASE = 'base',
+  SEARCH = 'search',
+  TAG = 'tag',
+}
+
+export interface PostsFilterState {
+  queryType: POST_QUERY_TYPE;
+  filters: Omit<AllFilterParams, 'limit' | 'skip'>;
+  pagination: {
+    limit: number;
+    skip: number;
+    total: number;
+  };
+}
+
+const initialFilterState: PostsFilterState = {
+  queryType: POST_QUERY_TYPE.BASE,
+  filters: {
+    searchQuery: '',
+    selectedTag: '',
+    sortBy: '',
+    sortOrder: SortOrder.ASC,
+  },
+  pagination: {
+    limit: UI_CONSTANTS.PAGINATION.DEFAULT_LIMIT,
+    skip: UI_CONSTANTS.PAGINATION.DEFAULT_SKIP,
+    total: 0,
+  },
+};
+
+// URL에서 초기 상태를 읽어오는 함수
+const getInitialStateFromURL = (): PostsFilterState => {
+  if (typeof window === 'undefined') return initialFilterState;
+
+  const params = new URLSearchParams(window.location.search);
+  return {
+    queryType: POST_QUERY_TYPE.BASE,
+    filters: {
+      searchQuery: params.get('search') || '',
+      selectedTag: params.get('tag') || '',
+      sortBy: (params.get('sortBy') as SORT_BY) || '',
+      sortOrder: (params.get('sortOrder') as SortOrder) || SortOrder.ASC,
+    },
+    pagination: {
+      skip: parseInt(params.get('skip') || '0'),
+      limit: parseInt(params.get('limit') || '10'),
+      total: parseInt(params.get('total') || '0'),
+    },
+  };
+};
+
+export const postsFilterAtom = atom<PostsFilterState>(getInitialStateFromURL());
+
+// 개별 필터 atoms (더 세밀한 제어를 위해)
+export const searchQueryAtom = atom(
+  get => get(postsFilterAtom).filters.searchQuery,
+  (get, set, newValue: string) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      filters: {
+        ...get(postsFilterAtom).filters,
+        searchQuery: newValue,
+      },
+    });
+  }
+);
+
+export const selectedTagAtom = atom(
+  get => get(postsFilterAtom).filters.selectedTag,
+  (get, set, newValue: string) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      filters: {
+        ...get(postsFilterAtom).filters,
+        selectedTag: newValue,
+      },
+    });
+  }
+);
+
+export const sortByAtom = atom(
+  get => get(postsFilterAtom).filters.sortBy,
+  (get, set, newValue: EmptyStringable<SORT_BY>) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      filters: {
+        ...get(postsFilterAtom).filters,
+        sortBy: newValue,
+      },
+    });
+  }
+);
+
+export const sortOrderAtom = atom(
+  get => get(postsFilterAtom).filters.sortOrder,
+  (get, set, newValue: SortOrder) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      filters: {
+        ...get(postsFilterAtom).filters,
+        sortOrder: newValue,
+      },
+    });
+  }
+);
+
+export const limitAtom = atom(
+  get => get(postsFilterAtom).pagination.limit,
+  (get, set, newValue: number) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      pagination: {
+        ...get(postsFilterAtom).pagination,
+        limit: newValue,
+      },
+    });
+  }
+);
+
+export const skipAtom = atom(
+  get => get(postsFilterAtom).pagination.skip,
+  (get, set, newValue: number) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      pagination: {
+        ...get(postsFilterAtom).pagination,
+        skip: newValue,
+      },
+    });
+  }
+);
+
+export const resetFiltersAtom = atom(null, (_, set) => {
+  set(postsFilterAtom, initialFilterState);
+});
+
+export const paginationAtom = atom(
+  get => get(postsFilterAtom).pagination,
+  (get, set, newValue: PaginationMeta) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      pagination: newValue,
+    });
+  }
+);
+
+export const filtersAtom = atom(
+  get => get(postsFilterAtom).filters,
+  (get, set, newValue: AllFilterParams) => {
+    set(postsFilterAtom, { ...get(postsFilterAtom), filters: newValue });
+  }
+);
+
+export const queryTypeAtom = atom(
+  get => get(postsFilterAtom).queryType,
+  (get, set, newValue: POST_QUERY_TYPE) => {
+    set(postsFilterAtom, { ...get(postsFilterAtom), queryType: newValue });
+  }
+);
+
+// URL 동기화를 위한 atom
+export const urlSyncAtom = atom(
+  get => {
+    const filter = get(postsFilterAtom);
+    const params = new URLSearchParams();
+
+    const { searchQuery, selectedTag, sortBy, sortOrder } = filter.filters;
+    const { skip, limit } = filter.pagination;
+
+    if (skip > 0) params.set('skip', skip.toString());
+    if (limit !== 10) params.set('limit', limit.toString());
+    if (searchQuery) params.set('search', searchQuery);
+    if (sortBy) params.set('sortBy', sortBy);
+    if (sortOrder) params.set('sortOrder', sortOrder);
+    if (selectedTag) params.set('tag', selectedTag);
+
+    return params.toString();
+  },
+  (_, set, urlParams: string) => {
+    const params = new URLSearchParams(urlParams);
+    const newState: PostsFilterState = {
+      queryType: POST_QUERY_TYPE.BASE,
+      filters: {
+        searchQuery: params.get('search') || '',
+        selectedTag: params.get('tag') || '',
+        sortBy: (params.get('sortBy') as SORT_BY) || '',
+        sortOrder: (params.get('sortOrder') as SortOrder) || SortOrder.ASC,
+      },
+      pagination: {
+        skip: parseInt(params.get('skip') || '0'),
+        limit: parseInt(params.get('limit') || '10'),
+        total: parseInt(params.get('total') || '0'),
+      },
+    };
+
+    set(postsFilterAtom, newState);
+  }
+);
+
+export const useURLSync = () => {
+  const [urlSync, setUrlSync] = useAtom(urlSyncAtom);
+
+  const updateURL = () => {
+    const newURL = `${window.location.pathname}?${urlSync}`;
+    window.history.pushState({}, '', newURL);
+  };
+
+  const syncFromURL = () => {
+    const currentParams = window.location.search;
+    if (currentParams) {
+      setUrlSync(currentParams.substring(1));
+    }
+  };
+
+  return { updateURL, syncFromURL };
+};
diff --git a/src/6_shared/lib/utils/index.ts b/src/6_shared/lib/utils/index.ts
new file mode 100644
index 000000000..0926742d1
--- /dev/null
+++ b/src/6_shared/lib/utils/index.ts
@@ -0,0 +1,2 @@
+export * from './url.util';
+export * from './ui.util';
diff --git a/src/6_shared/lib/utils/ui.util.tsx b/src/6_shared/lib/utils/ui.util.tsx
new file mode 100644
index 000000000..07db97a45
--- /dev/null
+++ b/src/6_shared/lib/utils/ui.util.tsx
@@ -0,0 +1,21 @@
+export const highlightText = (text: string, highlight: string) => {
+  if (!text) return null;
+  if (!highlight.trim()) {
+    return <span>{text}</span>;
+  }
+
+  const regex = new RegExp(`(${highlight})`, 'gi');
+  const parts = text.split(regex);
+
+  return (
+    <span>
+      {parts.map((part, i) =>
+        regex.test(part) ? (
+          <mark key={i}>{part}</mark>
+        ) : (
+          <span key={i}>{part}</span>
+        )
+      )}
+    </span>
+  );
+};
diff --git a/src/6_shared/lib/utils/url.util.ts b/src/6_shared/lib/utils/url.util.ts
new file mode 100644
index 000000000..3f3f3c7b6
--- /dev/null
+++ b/src/6_shared/lib/utils/url.util.ts
@@ -0,0 +1,3 @@
+export const getUrlParams = (params: Record<string, string>) => {
+  return new URLSearchParams(params).toString();
+};
diff --git a/src/6_shared/types/api.type.ts b/src/6_shared/types/api.type.ts
new file mode 100644
index 000000000..81d16a56e
--- /dev/null
+++ b/src/6_shared/types/api.type.ts
@@ -0,0 +1,16 @@
+export interface PaginationMeta {
+  total: number;
+  skip: number;
+  limit: number;
+}
+
+export interface MutationProps<T> {
+  onError?: (error: Error) => void;
+  onSuccess?: (data: T) => void;
+}
+
+export interface ApiResponse<T> {
+  data: T;
+  message?: string;
+  code?: string;
+}
diff --git a/src/6_shared/types/index.ts b/src/6_shared/types/index.ts
new file mode 100644
index 000000000..f132a0e22
--- /dev/null
+++ b/src/6_shared/types/index.ts
@@ -0,0 +1,2 @@
+export * from './api.type';
+export * from './utility.type';
diff --git a/src/6_shared/types/utility.type.ts b/src/6_shared/types/utility.type.ts
new file mode 100644
index 000000000..620d835c2
--- /dev/null
+++ b/src/6_shared/types/utility.type.ts
@@ -0,0 +1,46 @@
+/**
+ * 공통으로 사용되는 유틸리티 타입들
+ */
+
+/**
+ * T 또는 null을 허용하는 타입
+ */
+export type Nullable<T> = T | null;
+
+export type EmptyStringable<T> = T | '';
+
+/**
+ * T 또는 undefined를 허용하는 타입
+ */
+export type Undefinable<T> = T | undefined;
+
+/**
+ * T, null, undefined 모두 허용하는 타입
+ */
+export type Optional<T> = T | null | undefined;
+
+/**
+ * 객체의 모든 속성을 옵셔널로 만드는 타입 (Partial과 유사하지만 명시적)
+ */
+export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+
+/**
+ * 객체의 특정 속성을 필수로 만드는 타입
+ */
+export type RequiredBy<T, K extends keyof T> = T & Required<Pick<T, K>>;
+
+/**
+ * 배열 타입에서 단일 요소 타입 추출
+ */
+export type ArrayElement<T extends readonly unknown[]> =
+  T extends readonly (infer U)[] ? U : never;
+
+/**
+ * 함수의 반환 타입이 Promise인 경우 래핑된 타입 추출
+ */
+export type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
+
+export enum SortOrder {
+  ASC = 'asc',
+  DESC = 'desc',
+}
diff --git a/src/6_shared/ui/controls/Button.tsx b/src/6_shared/ui/controls/Button.tsx
new file mode 100644
index 000000000..a99d86cc9
--- /dev/null
+++ b/src/6_shared/ui/controls/Button.tsx
@@ -0,0 +1,62 @@
+import { cva, VariantProps } from 'class-variance-authority';
+
+/**
+ * 버튼 컴포넌트 variant 정의
+ * - CVA를 사용한 조건부 스타일링
+ * - variant: 용도별 스타일 (default, destructive, outline, secondary, ghost, link)
+ * - size: 크기별 스타일 (default, sm, lg, icon)
+ * - 접근성 기본 스타일 포함 (focus-visible, disabled)
+ */
+
+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;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export const Button = ({
+  variant,
+  size,
+  className,
+  children,
+  onClick,
+  ...props
+}: ButtonProps) => {
+  return (
+    <button
+      className={buttonVariants({ variant, size, className })}
+      onClick={onClick}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
diff --git a/src/6_shared/ui/data/Table.tsx b/src/6_shared/ui/data/Table.tsx
new file mode 100644
index 000000000..2646e0e04
--- /dev/null
+++ b/src/6_shared/ui/data/Table.tsx
@@ -0,0 +1,99 @@
+import { forwardRef } from 'react';
+
+/**
+ * 테이블 컴포넌트 계열
+ * - 데이터를 구조화된 표 형태로 표시하는 컴포넌트들
+ * - Table, TableHeader, TableBody, TableRow, TableHead, TableCell로 구성
+ * - 반응형 스크롤 지원과 일관된 스타일링 제공
+ */
+
+interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+  className?: string;
+}
+
+export const Table = forwardRef<HTMLTableElement, TableProps>(
+  ({ 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';
+
+interface TableHeaderProps
+  extends React.HTMLAttributes<HTMLTableSectionElement> {
+  className?: string;
+}
+
+export const TableHeader = forwardRef<
+  HTMLTableSectionElement,
+  TableHeaderProps
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={`[&_tr]:border-b ${className}`} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
+
+interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+  className?: string;
+}
+
+export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
+  ({ className, ...props }, ref) => (
+    <tbody
+      ref={ref}
+      className={`[&_tr:last-child]:border-0 ${className}`}
+      {...props}
+    />
+  )
+);
+TableBody.displayName = 'TableBody';
+
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  className?: string;
+}
+
+export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
+  ({ 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';
+
+interface TableHeadProps
+  extends React.HTMLAttributes<HTMLTableHeaderCellElement> {
+  className?: string;
+}
+
+export const TableHead = forwardRef<HTMLTableHeaderCellElement, TableHeadProps>(
+  ({ 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';
+
+interface TableCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+  className?: string;
+}
+
+export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
+  ({ 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/6_shared/ui/feedback/LoadingSpinner.tsx b/src/6_shared/ui/feedback/LoadingSpinner.tsx
new file mode 100644
index 000000000..2248d17e1
--- /dev/null
+++ b/src/6_shared/ui/feedback/LoadingSpinner.tsx
@@ -0,0 +1,28 @@
+import { Loader2 } from 'lucide-react';
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  text?: string;
+}
+
+const sizeClasses = {
+  sm: 'w-4 h-4',
+  md: 'w-6 h-6',
+  lg: 'w-8 h-8',
+};
+
+export const LoadingSpinner = ({
+  size = 'md',
+  className = '',
+  text = '로딩 중...',
+}: LoadingSpinnerProps) => {
+  return (
+    <div
+      className={`flex items-center justify-center gap-2 w-full h-full ${className}`}
+    >
+      <Loader2 className={`animate-spin ${sizeClasses[size]}`} />
+      {text && <span className='text-sm text-muted-foreground'>{text}</span>}
+    </div>
+  );
+};
diff --git a/src/6_shared/ui/feedback/index.ts b/src/6_shared/ui/feedback/index.ts
new file mode 100644
index 000000000..8f6c207e0
--- /dev/null
+++ b/src/6_shared/ui/feedback/index.ts
@@ -0,0 +1 @@
+export { LoadingSpinner } from './LoadingSpinner';
diff --git a/src/6_shared/ui/forms/Input.tsx b/src/6_shared/ui/forms/Input.tsx
new file mode 100644
index 000000000..98c3b89c6
--- /dev/null
+++ b/src/6_shared/ui/forms/Input.tsx
@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+
+/**
+ * 입력 컴포넌트
+ * - 기본 HTML input 요소를 확장한 커스텀 입력 컴포넌트
+ * - 일관된 스타일링과 접근성 기능 제공
+ * - forwardRef를 통한 ref 전달로 포커스 관리 지원
+ */
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  className?: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={`flex h-10 w-full rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
diff --git a/src/6_shared/ui/forms/Select.tsx b/src/6_shared/ui/forms/Select.tsx
new file mode 100644
index 000000000..53fbb2c2b
--- /dev/null
+++ b/src/6_shared/ui/forms/Select.tsx
@@ -0,0 +1,80 @@
+import { forwardRef } from 'react';
+
+import { Check, ChevronDown } from 'lucide-react';
+
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+/**
+ * 선택 컴포넌트 계열
+ * - Radix UI Select를 기반으로 한 드롭다운 선택 컴포넌트들
+ * - Select, SelectTrigger, SelectContent, SelectItem으로 구성
+ * - 키보드 네비게이션과 접근성 기능 내장
+ */
+export const Select = SelectPrimitive.Root;
+export const SelectGroup = SelectPrimitive.Group;
+export const SelectValue = SelectPrimitive.Value;
+
+interface SelectTriggerProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string;
+}
+
+export const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(
+  ({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      className={`flex h-10 items-center justify-between rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+      {...props}
+    >
+      {children}
+      <ChevronDown className='h-4 w-4 opacity-50' />
+    </SelectPrimitive.Trigger>
+  )
+);
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  position?: 'popper';
+}
+
+export const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
+  ({ className, children, position = 'popper', ...props }, ref) => (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={ref}
+        className={`relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ${className}`}
+        position={position}
+        {...props}
+      >
+        <SelectPrimitive.Viewport className='p-1'>
+          {children}
+        </SelectPrimitive.Viewport>
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+);
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+interface SelectItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  value: string;
+}
+
+export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
+  ({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Item
+      ref={ref}
+      className={`relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ${className}`}
+      {...props}
+    >
+      <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
+        <SelectPrimitive.ItemIndicator>
+          <Check className='h-4 w-4' />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+);
+SelectItem.displayName = SelectPrimitive.Item.displayName;
diff --git a/src/6_shared/ui/forms/Textarea.tsx b/src/6_shared/ui/forms/Textarea.tsx
new file mode 100644
index 000000000..fbb6c981d
--- /dev/null
+++ b/src/6_shared/ui/forms/Textarea.tsx
@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+
+/**
+ * 텍스트 영역 컴포넌트
+ * - 여러 줄 텍스트 입력을 위한 textarea 컴포넌트
+ * - Input 컴포넌트와 일관된 스타일링 유지
+ * - 최소 높이 설정으로 사용성 향상
+ */
+
+interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  className?: string;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={`flex min-h-[150px] w-full rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = 'Textarea';
diff --git a/src/6_shared/ui/index.ts b/src/6_shared/ui/index.ts
new file mode 100644
index 000000000..604a95c0c
--- /dev/null
+++ b/src/6_shared/ui/index.ts
@@ -0,0 +1,20 @@
+// controls
+export * from './controls/Button';
+
+// data
+export * from './data/Table';
+
+// forms
+export * from './forms/Input';
+export * from './forms/Select';
+export * from './forms/Textarea';
+
+// layout
+export * from './layout/Card';
+
+// overlays
+export * from './overlays/Dialog';
+export * from './overlays/ContentDialog';
+
+// feedback
+export * from './feedback';
diff --git a/src/6_shared/ui/layout/Card.tsx b/src/6_shared/ui/layout/Card.tsx
new file mode 100644
index 000000000..f7124bb07
--- /dev/null
+++ b/src/6_shared/ui/layout/Card.tsx
@@ -0,0 +1,64 @@
+import { forwardRef } from 'react';
+
+/**
+ * 카드 컴포넌트 계열
+ * - 콘텐츠를 그룹화하고 시각적으로 구분하는 컨테이너 컴포넌트들
+ * - Card, CardHeader, CardTitle, CardContent로 구성된 복합 컴포넌트
+ * - 일관된 간격과 스타일을 통한 계층적 정보 표현
+ */
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={`rounded-lg border bg-card text-card-foreground shadow-sm ${className}`}
+      {...props}
+    />
+  )
+);
+
+Card.displayName = 'Card';
+
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={`flex flex-col space-y-1.5 p-6 ${className}`}
+      {...props}
+    />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string;
+}
+
+export const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={`text-2xl font-semibold leading-none tracking-tight ${className}`}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={`p-6 pt-0 ${className}`} {...props} />
+  )
+);
+CardContent.displayName = 'CardContent';
diff --git a/src/6_shared/ui/overlays/ContentDialog.tsx b/src/6_shared/ui/overlays/ContentDialog.tsx
new file mode 100644
index 000000000..61d040d9b
--- /dev/null
+++ b/src/6_shared/ui/overlays/ContentDialog.tsx
@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+
+import { DialogProps } from '@radix-ui/react-dialog';
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from './Dialog';
+
+interface ContentDialogProps extends DialogProps {
+  title: ReactNode;
+  onClose?: () => void;
+}
+
+export const ContentDialog = ({
+  title,
+  children,
+  onClose,
+  onOpenChange,
+  ...props
+}: ContentDialogProps) => {
+  const handleOpenChange = (open: boolean) => {
+    onOpenChange?.(open);
+    if (!open) {
+      onClose?.();
+    }
+  };
+
+  return (
+    <Dialog {...props} onOpenChange={handleOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        {children}
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/src/6_shared/ui/overlays/Dialog.tsx b/src/6_shared/ui/overlays/Dialog.tsx
new file mode 100644
index 000000000..0d69bbc5c
--- /dev/null
+++ b/src/6_shared/ui/overlays/Dialog.tsx
@@ -0,0 +1,70 @@
+import { forwardRef } from 'react';
+
+import { X } from 'lucide-react';
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+/**
+ * 대화상자 컴포넌트 계열
+ * - Radix UI Dialog를 기반으로 한 모달 및 팝업 컴포넌트들
+ * - Dialog, DialogContent, DialogHeader, DialogTitle로 구성
+ * - 포커스 트랩, ESC 키 닫기, 오버레이 클릭 닫기 등 UX 기능 내장
+ */
+export const Dialog = DialogPrimitive.Root;
+export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogPortal = DialogPrimitive.Portal;
+export const DialogOverlay = DialogPrimitive.Overlay;
+
+interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
+  ({ className, children, ...props }, ref) => (
+    <DialogPortal>
+      <DialogOverlay className='fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0' />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={`fixed left-[50%] top-[50%] z-50 grid w-full max-w-2xl 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;
+
+interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={`flex flex-col space-y-1.5 text-center sm:text-left ${className}`}
+      {...props}
+    />
+  )
+);
+DialogHeader.displayName = 'DialogHeader';
+
+interface DialogTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string;
+}
+
+export const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
+  ({ className, ...props }, ref) => (
+    <DialogPrimitive.Title
+      ref={ref}
+      className={`text-lg font-semibold leading-none tracking-tight ${className}`}
+      {...props}
+    />
+  )
+);
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
diff --git a/src/App.tsx b/src/App.tsx
deleted file mode 100644
index 0c0032aab..000000000
--- a/src/App.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { BrowserRouter as Router } from "react-router-dom"
-import Header from "./components/Header.tsx"
-import Footer from "./components/Footer.tsx"
-import PostsManagerPage from "./pages/PostsManagerPage.tsx"
-
-const App = () => {
-  return (
-    <Router>
-      <div className="flex flex-col min-h-screen">
-        <Header />
-        <main className="flex-grow container mx-auto px-4 py-8">
-          <PostsManagerPage />
-        </main>
-        <Footer />
-      </div>
-    </Router>
-  )
-}
-
-export default App
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
deleted file mode 100644
index 91af02f8c..000000000
--- a/src/components/Footer.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-
-const Footer: React.FC = () => {
-    return (
-        <footer className="bg-gray-100 text-gray-600 py-4 mt-8">
-            <div className="container mx-auto text-center">
-                <p>&copy; 2023 Post Management System. All rights reserved.</p>
-            </div>
-        </footer>
-    );
-};
-
-export default Footer;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
deleted file mode 100644
index 63ecec168..000000000
--- a/src/components/Header.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { MessageSquare } from 'lucide-react';
-
-const Header: React.FC = () => {
-    return (
-        <header className="bg-blue-600 text-white p-4 shadow-md">
-            <div className="container mx-auto flex justify-between items-center">
-                <div className="flex items-center space-x-2">
-                    <MessageSquare className="w-6 h-6" />
-                    <h1 className="text-xl font-bold">게시물 관리 시스템</h1>
-                </div>
-                <nav>
-                    <ul className="flex space-x-4">
-                        <li><a href="#" className="hover:underline">홈</a></li>
-                        <li><a href="#" className="hover:underline">대시보드</a></li>
-                        <li><a href="#" className="hover:underline">설정</a></li>
-                    </ul>
-                </nav>
-            </div>
-        </header>
-    );
-};
-
-export default Header;
-
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/final_src/1_app/App.tsx b/src/final_src/1_app/App.tsx
new file mode 100644
index 000000000..6ca34ad31
--- /dev/null
+++ b/src/final_src/1_app/App.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { PostsManagerPage } from '@/pages';
+import { Footer, Header } from '@/widgets';
+
+export const App = () => {
+  return (
+    <div className='flex flex-col min-h-screen'>
+      <Header />
+      <main className='flex-grow container mx-auto px-4 py-8'>
+        <PostsManagerPage />
+      </main>
+      <Footer />
+    </div>
+  );
+};
diff --git a/src/final_src/1_app/index.ts b/src/final_src/1_app/index.ts
new file mode 100644
index 000000000..36fd434c7
--- /dev/null
+++ b/src/final_src/1_app/index.ts
@@ -0,0 +1,2 @@
+export { App } from './App';
+export { AppProvider } from './providers';
diff --git a/src/final_src/1_app/providers/AppProvider.tsx b/src/final_src/1_app/providers/AppProvider.tsx
new file mode 100644
index 000000000..9873b4952
--- /dev/null
+++ b/src/final_src/1_app/providers/AppProvider.tsx
@@ -0,0 +1,31 @@
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { Provider } from 'jotai';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
+interface AppProviderProps {
+  children: React.ReactNode;
+}
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000, // 5분
+      gcTime: 10 * 60 * 1000, // 10분
+      retry: 1,
+    },
+  },
+});
+
+export const AppProvider = ({ children }: AppProviderProps) => {
+  return (
+    <Provider>
+      <QueryClientProvider client={queryClient}>
+        <ReactQueryDevtools initialIsOpen={false} />
+        <Router>{children}</Router>
+      </QueryClientProvider>
+    </Provider>
+  );
+};
diff --git a/src/final_src/1_app/providers/index.ts b/src/final_src/1_app/providers/index.ts
new file mode 100644
index 000000000..5114e85a5
--- /dev/null
+++ b/src/final_src/1_app/providers/index.ts
@@ -0,0 +1 @@
+export { AppProvider } from './AppProvider';
diff --git a/src/final_src/2_pages/PostsManagerPage.tsx b/src/final_src/2_pages/PostsManagerPage.tsx
new file mode 100644
index 000000000..5f87aac80
--- /dev/null
+++ b/src/final_src/2_pages/PostsManagerPage.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { AddCommentDialog } from '@/features/comment-management';
+import { EditCommentFormDialog } from '@/features/comment-management/ui/EditCommentFormDialog';
+import { Filters } from '@/features/filter-posts';
+import {
+  AddPostButton,
+  PostDetailDialog,
+  PostTable,
+} from '@/features/post-management';
+import { AddPostFormDialog } from '@/features/post-management/ui/AddPostFormDialog';
+import { EditPostFormDialog } from '@/features/post-management/ui/EditPostFormDialog';
+import { PostPagination } from '@/features/post-management/ui/PostPagination';
+import { UserProfileDialog } from '@/features/user-profile';
+import { Card, CardContent, CardHeader, CardTitle } from '@/shared/ui';
+
+export const PostsManagerPage = () => {
+  return (
+    <Card className='w-full max-w-6xl mx-auto'>
+      <CardHeader>
+        <CardTitle className='flex items-center justify-between'>
+          <span>게시물 관리자</span>
+          <AddPostButton />
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className='flex flex-col gap-4'>
+          <Filters />
+          <PostTable />
+          <PostPagination />
+        </div>
+      </CardContent>
+
+      {/* 다이얼로그 컴포넌트들 */}
+      <AddPostFormDialog />
+      <EditPostFormDialog />
+      <AddCommentDialog />
+      <EditCommentFormDialog />
+      <PostDetailDialog />
+      <UserProfileDialog />
+    </Card>
+  );
+};
diff --git a/src/final_src/2_pages/index.ts b/src/final_src/2_pages/index.ts
new file mode 100644
index 000000000..f9dcc291d
--- /dev/null
+++ b/src/final_src/2_pages/index.ts
@@ -0,0 +1 @@
+export { PostsManagerPage } from './PostsManagerPage';
diff --git a/src/final_src/3_widgets/Footer.tsx b/src/final_src/3_widgets/Footer.tsx
new file mode 100644
index 000000000..1f477487c
--- /dev/null
+++ b/src/final_src/3_widgets/Footer.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export const Footer: React.FC = () => {
+  return (
+    <footer className='bg-gray-100 text-gray-600 py-4 mt-8'>
+      <div className='container mx-auto text-center'>
+        <p>&copy; 2024 Post Management System. All rights reserved.</p>
+      </div>
+    </footer>
+  );
+};
diff --git a/src/final_src/3_widgets/Header.tsx b/src/final_src/3_widgets/Header.tsx
new file mode 100644
index 000000000..4f904e744
--- /dev/null
+++ b/src/final_src/3_widgets/Header.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { MessageSquare } from 'lucide-react';
+
+export const Header: React.FC = () => {
+  return (
+    <header className='bg-blue-600 text-white p-4 shadow-md'>
+      <div className='container mx-auto flex justify-between items-center'>
+        <div className='flex items-center space-x-2'>
+          <MessageSquare className='w-6 h-6' />
+          <h1 className='text-xl font-bold'>게시물 관리 시스템</h1>
+        </div>
+        <nav>
+          <ul className='flex space-x-4'>
+            <li>
+              <a href='#' className='hover:underline'>
+                홈
+              </a>
+            </li>
+            <li>
+              <a href='#' className='hover:underline'>
+                대시보드
+              </a>
+            </li>
+            <li>
+              <a href='#' className='hover:underline'>
+                설정
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+  );
+};
diff --git a/src/final_src/3_widgets/index.ts b/src/final_src/3_widgets/index.ts
new file mode 100644
index 000000000..7e2c603fc
--- /dev/null
+++ b/src/final_src/3_widgets/index.ts
@@ -0,0 +1,2 @@
+export { Header } from './Header';
+export { Footer } from './Footer';
diff --git a/src/final_src/4_features/comment-management/hooks/useAddCommentForm.ts b/src/final_src/4_features/comment-management/hooks/useAddCommentForm.ts
new file mode 100644
index 000000000..76de6bbaa
--- /dev/null
+++ b/src/final_src/4_features/comment-management/hooks/useAddCommentForm.ts
@@ -0,0 +1,47 @@
+import { useState } from 'react';
+
+import { useCreateCommentMutation } from '@/entities/comment';
+import { useUIStore } from '@/shared/lib';
+
+export const useAddCommentForm = () => {
+  const { selectedPost, setShowAddCommentDialog } = useUIStore();
+  const { mutate: createComment } = useCreateCommentMutation({
+    onSuccess: () => {
+      resetForm();
+    },
+    onError: error => {
+      console.error('댓글 추가 오류:', error);
+      // ! 모달 다시 열어서 사용자가 수정
+      setShowAddCommentDialog(true);
+    },
+  });
+
+  const [commentBody, setCommentBody] = useState<string>('');
+
+  const handleChangeBody = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setCommentBody(e.target.value);
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    // ! 모달 먼저 닫고 UI 낙관적 업데이트 보여주기
+    setShowAddCommentDialog(false);
+    createComment({
+      body: commentBody,
+      postId: selectedPost?.id ?? 0,
+      userId: 1,
+    });
+  };
+
+  const resetForm = () => {
+    setCommentBody('');
+  };
+
+  return {
+    commentBody,
+    handleChangeBody,
+    handleSubmit,
+    resetForm,
+  };
+};
diff --git a/src/final_src/4_features/comment-management/hooks/useEditCommentForm.ts b/src/final_src/4_features/comment-management/hooks/useEditCommentForm.ts
new file mode 100644
index 000000000..a8edf670b
--- /dev/null
+++ b/src/final_src/4_features/comment-management/hooks/useEditCommentForm.ts
@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+
+import { useUpdateCommentMutation } from '@/entities/comment';
+import { useUIStore } from '@/shared/lib';
+
+export const useEditCommentForm = () => {
+  const { selectedComment, setSelectedComment, setShowEditCommentDialog } =
+    useUIStore();
+  const { mutate: updateComment } = useUpdateCommentMutation({
+    onSuccess: () => {
+      setSelectedComment(null);
+    },
+    onError: error => {
+      console.error('댓글 수정 오류:', error);
+      // ! 모달 다시 열어서 사용자가 수정하기
+      setShowEditCommentDialog(true);
+    },
+  });
+
+  const [commentBody, setCommentBody] = useState<string>(
+    selectedComment?.body || ''
+  );
+
+  const handleChangeBody = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setCommentBody(e.target.value);
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (!selectedComment) return;
+
+    // ! 모달 먼저 닫고 UI 낙관적 업데이트 보여주기
+    setShowEditCommentDialog(false);
+    updateComment({
+      ...selectedComment,
+      body: commentBody,
+    });
+  };
+
+  const resetForm = () => {
+    setCommentBody('');
+  };
+
+  useEffect(() => {
+    setCommentBody(selectedComment?.body || '');
+  }, [selectedComment]);
+
+  return {
+    commentBody,
+    handleChangeBody,
+    handleSubmit,
+    resetForm,
+  };
+};
diff --git a/src/final_src/4_features/comment-management/index.ts b/src/final_src/4_features/comment-management/index.ts
new file mode 100644
index 000000000..713937378
--- /dev/null
+++ b/src/final_src/4_features/comment-management/index.ts
@@ -0,0 +1 @@
+export * from './ui/AddCommentFormDialog';
diff --git a/src/final_src/4_features/comment-management/ui/AddCommentFormDialog.tsx b/src/final_src/4_features/comment-management/ui/AddCommentFormDialog.tsx
new file mode 100644
index 000000000..97b3bb2a3
--- /dev/null
+++ b/src/final_src/4_features/comment-management/ui/AddCommentFormDialog.tsx
@@ -0,0 +1,29 @@
+import { useUIStore } from '@/shared/lib';
+import { Button, ContentDialog, Textarea } from '@/shared/ui';
+
+import { useAddCommentForm } from '../hooks/useAddCommentForm';
+
+export const AddCommentDialog = () => {
+  const { showAddCommentDialog, setShowAddCommentDialog } = useUIStore();
+
+  const { commentBody, handleChangeBody, handleSubmit, resetForm } =
+    useAddCommentForm();
+
+  return (
+    <ContentDialog
+      open={showAddCommentDialog}
+      onOpenChange={setShowAddCommentDialog}
+      onClose={resetForm}
+      title='새 댓글 추가'
+    >
+      <form className='space-y-4' onSubmit={handleSubmit}>
+        <Textarea
+          placeholder='댓글 내용'
+          value={commentBody}
+          onChange={handleChangeBody}
+        />
+        <Button type='submit'>댓글 추가</Button>
+      </form>
+    </ContentDialog>
+  );
+};
diff --git a/src/final_src/4_features/comment-management/ui/CommentItem.tsx b/src/final_src/4_features/comment-management/ui/CommentItem.tsx
new file mode 100644
index 000000000..baa949d5f
--- /dev/null
+++ b/src/final_src/4_features/comment-management/ui/CommentItem.tsx
@@ -0,0 +1,80 @@
+import { Edit2, ThumbsUp, Trash2 } from 'lucide-react';
+
+import {
+  Comment,
+  useDeleteCommentMutation,
+  useLikeCommentMutation,
+} from '@/entities/comment';
+import { UI_CONSTANTS } from '@/shared/constants';
+import { highlightText, usePostsFilterStore, useUIStore } from '@/shared/lib';
+import { Button } from '@/shared/ui';
+
+interface CommentItemProps {
+  comment: Comment;
+}
+
+export const CommentItem = ({ comment }: CommentItemProps) => {
+  const { setSelectedComment, setShowEditCommentDialog } = useUIStore();
+  const { searchQuery } = usePostsFilterStore();
+  const { mutate: likeComment, isPending } = useLikeCommentMutation({
+    onError: error => {
+      console.error('댓글 좋아요 오류:', error);
+    },
+  });
+  const { mutate: deleteComment, isPending: isDeleting } =
+    useDeleteCommentMutation({
+      onError: error => {
+        console.error('댓글 삭제 오류:', error);
+      },
+    });
+
+  const handleClickLikeComment = () => {
+    if (isPending) return;
+    likeComment({ commentId: comment.id, postId: comment.postId });
+  };
+
+  const handleClickEditComment = () => {
+    setSelectedComment(comment);
+    setShowEditCommentDialog(true);
+  };
+
+  const handleClickDeleteComment = () => {
+    if (isDeleting) return;
+    deleteComment({ commentId: comment.id, postId: comment.postId });
+  };
+
+  return (
+    <div className='flex items-center justify-between text-sm border-b pb-1 gap-2'>
+      <div className='flex items-center space-x-2 min-w-0 flex-1'>
+        <span className='font-medium shrink-0'>{comment.user.username}:</span>
+        <span className='truncate'>
+          {highlightText(comment.body, searchQuery)}
+        </span>
+      </div>
+      <div className='flex items-center space-x-1 shrink-0'>
+        <Button
+          variant='ghost'
+          size='sm'
+          onClick={() => handleClickLikeComment()}
+        >
+          <ThumbsUp className={UI_CONSTANTS.ICON_SIZES.SMALL} />
+          <span className='ml-1 text-xs'>{comment.likes}</span>
+        </Button>
+        <Button
+          variant='ghost'
+          size='sm'
+          onClick={() => handleClickEditComment()}
+        >
+          <Edit2 className={UI_CONSTANTS.ICON_SIZES.SMALL} />
+        </Button>
+        <Button
+          variant='ghost'
+          size='sm'
+          onClick={() => handleClickDeleteComment()}
+        >
+          <Trash2 className={UI_CONSTANTS.ICON_SIZES.SMALL} />
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/src/final_src/4_features/comment-management/ui/CommentList.tsx b/src/final_src/4_features/comment-management/ui/CommentList.tsx
new file mode 100644
index 000000000..c7868a3fd
--- /dev/null
+++ b/src/final_src/4_features/comment-management/ui/CommentList.tsx
@@ -0,0 +1,24 @@
+import { useGetCommentsQuery } from '@/entities/comment';
+import { useUIStore } from '@/shared/lib';
+import { LoadingSpinner } from '@/shared/ui';
+
+import { CommentItem } from './CommentItem';
+
+export const CommentList = () => {
+  const { selectedPost } = useUIStore();
+  const { data: commentsData, isLoading } = useGetCommentsQuery(
+    selectedPost?.id ?? null
+  );
+
+  return (
+    <div className='space-y-1 w-full'>
+      {isLoading ? (
+        <LoadingSpinner />
+      ) : (
+        commentsData?.comments.map(comment => (
+          <CommentItem key={comment.id} comment={comment} />
+        ))
+      )}
+    </div>
+  );
+};
diff --git a/src/final_src/4_features/comment-management/ui/EditCommentFormDialog.tsx b/src/final_src/4_features/comment-management/ui/EditCommentFormDialog.tsx
new file mode 100644
index 000000000..eef997fce
--- /dev/null
+++ b/src/final_src/4_features/comment-management/ui/EditCommentFormDialog.tsx
@@ -0,0 +1,28 @@
+import { useUIStore } from '@/shared/lib';
+import { Button, ContentDialog, Textarea } from '@/shared/ui';
+
+import { useEditCommentForm } from '../hooks/useEditCommentForm';
+
+export const EditCommentFormDialog = () => {
+  const { showEditCommentDialog, setShowEditCommentDialog } = useUIStore();
+  const { commentBody, handleChangeBody, handleSubmit, resetForm } =
+    useEditCommentForm();
+
+  return (
+    <ContentDialog
+      open={showEditCommentDialog}
+      onOpenChange={setShowEditCommentDialog}
+      onClose={resetForm}
+      title='댓글 수정'
+    >
+      <form className='space-y-4' onSubmit={handleSubmit}>
+        <Textarea
+          placeholder='댓글 내용'
+          value={commentBody}
+          onChange={handleChangeBody}
+        />
+        <Button type='submit'>댓글 업데이트</Button>
+      </form>
+    </ContentDialog>
+  );
+};
diff --git a/src/final_src/4_features/filter-posts/hooks/useFilteredPosts.ts b/src/final_src/4_features/filter-posts/hooks/useFilteredPosts.ts
new file mode 100644
index 000000000..89a0dbcb3
--- /dev/null
+++ b/src/final_src/4_features/filter-posts/hooks/useFilteredPosts.ts
@@ -0,0 +1,162 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import {
+  AllFilterParams,
+  useGetPostsBySearchQuery,
+  useGetPostsByTagQuery,
+  useGetPostsQuery,
+} from '@/entities/post';
+import { useGetUsersQuery } from '@/entities/user';
+import { POST_QUERY_TYPE, usePostsFilterStore } from '@/shared/lib';
+
+import { getPostsWithAuthor } from '../../post-management/lib/post.util';
+import { PostWithAuthor } from '../../post-management/types';
+
+export type SelectedUserProperties = 'id' | 'username' | 'image';
+
+export const useFilteredPosts = () => {
+  const {
+    selectedTag,
+    searchQuery,
+    limit,
+    skip,
+    sortBy,
+    sortOrder,
+    pagination,
+    setQueryType,
+    setPagination,
+  } = usePostsFilterStore();
+
+  const [posts, setPosts] = useState<PostWithAuthor<SelectedUserProperties>[]>(
+    []
+  );
+
+  const filters: AllFilterParams = {
+    limit,
+    skip,
+    sortBy,
+    sortOrder,
+    searchQuery,
+    selectedTag,
+  };
+
+  const { data: usersData, isLoading: isLoadingUsers } =
+    useGetUsersQuery<SelectedUserProperties>({
+      limit: 0,
+      select: ['id', 'username', 'image'],
+    });
+
+  const { data: postsData, isLoading: isLoadingPosts } = useGetPostsQuery({
+    limit,
+    skip,
+    sortBy,
+    sortOrder,
+  });
+
+  const { data: postsByTagData, isLoading: isLoadingPostsByTag } =
+    useGetPostsByTagQuery({
+      limit,
+      skip,
+      sortBy,
+      sortOrder,
+      selectedTag,
+    });
+
+  const { data: postsBySearchData, isLoading: isLoadingPostsBySearch } =
+    useGetPostsBySearchQuery({
+      limit,
+      skip,
+      sortBy,
+      sortOrder,
+      searchQuery,
+    });
+
+  const postsWithAuthor = useMemo(() => {
+    return getPostsWithAuthor<SelectedUserProperties>(
+      postsData?.posts ?? [],
+      usersData?.users ?? []
+    );
+  }, [postsData?.posts, usersData?.users, ...[Object.values(filters)]]);
+
+  const postsWithAuthorByTag = useMemo(() => {
+    return getPostsWithAuthor<SelectedUserProperties>(
+      postsByTagData?.posts ?? [],
+      usersData?.users ?? []
+    );
+  }, [
+    postsByTagData?.posts,
+    usersData?.users,
+    selectedTag,
+    ...[Object.values(filters)],
+  ]);
+
+  const postsWithAuthorBySearch = useMemo(() => {
+    return getPostsWithAuthor<SelectedUserProperties>(
+      postsBySearchData?.posts ?? [],
+      usersData?.users ?? []
+    );
+  }, [postsBySearchData?.posts, usersData?.users, ...[Object.values(filters)]]);
+
+  const isLoading =
+    isLoadingUsers ||
+    isLoadingPosts ||
+    isLoadingPostsByTag ||
+    isLoadingPostsBySearch;
+
+  useEffect(() => {
+    // 검색어가 있으면 검색 결과 사용
+    if (searchQuery && searchQuery.trim()) {
+      setPosts(postsWithAuthorBySearch);
+      setQueryType(POST_QUERY_TYPE.SEARCH);
+      return;
+    }
+
+    // 태그가 있고 'all'이 아니면 태그 결과 사용
+    if (selectedTag && selectedTag !== 'all' && selectedTag.trim()) {
+      setPosts(postsWithAuthorByTag);
+      setQueryType(POST_QUERY_TYPE.TAG);
+      return;
+    }
+
+    // 기본 게시물 목록 사용
+    setPosts(postsWithAuthor);
+    setQueryType(POST_QUERY_TYPE.BASE);
+  }, [
+    postsWithAuthor,
+    postsWithAuthorByTag,
+    postsWithAuthorBySearch,
+    searchQuery,
+    selectedTag,
+  ]);
+
+  useEffect(() => {
+    if (searchQuery && searchQuery.trim()) {
+      setPagination({
+        ...pagination,
+        total: postsBySearchData?.total ?? 0,
+      });
+      return;
+    }
+
+    // 태그가 있고 'all'이 아니면 태그 결과 사용
+    if (selectedTag && selectedTag !== 'all' && selectedTag.trim()) {
+      setPagination({
+        ...pagination,
+        total: postsByTagData?.total ?? 0,
+      });
+      return;
+    }
+
+    // 기본 게시물 목록 사용
+    setPagination({
+      ...pagination,
+      total: postsData?.total ?? 0,
+    });
+  }, [postsBySearchData, postsByTagData, postsData]);
+
+  return {
+    posts,
+    setPosts,
+    isLoading,
+  };
+};
diff --git a/src/final_src/4_features/filter-posts/index.ts b/src/final_src/4_features/filter-posts/index.ts
new file mode 100644
index 000000000..eaa97cd92
--- /dev/null
+++ b/src/final_src/4_features/filter-posts/index.ts
@@ -0,0 +1,10 @@
+// UI Components
+export { Filters } from './ui/Filters';
+export { SearchInput } from './ui/SearchInput';
+export { SelectLimit } from './ui/SelectLimit';
+export { SelectSortBy } from './ui/SelectSortBy';
+export { SelectSortOrder } from './ui/SelectSortOrder';
+export { SelectTag } from './ui/SelectTag';
+
+// Hooks
+export { useFilteredPosts } from './hooks/useFilteredPosts';
diff --git a/src/final_src/4_features/filter-posts/ui/Filters.tsx b/src/final_src/4_features/filter-posts/ui/Filters.tsx
new file mode 100644
index 000000000..16bafecb0
--- /dev/null
+++ b/src/final_src/4_features/filter-posts/ui/Filters.tsx
@@ -0,0 +1,15 @@
+import { SearchInput } from './SearchInput';
+import { SelectSortBy } from './SelectSortBy';
+import { SelectSortOrder } from './SelectSortOrder';
+import { SelectTag } from './SelectTag';
+
+export const Filters = () => {
+  return (
+    <div className='flex gap-4'>
+      <SearchInput />
+      <SelectTag />
+      <SelectSortBy />
+      <SelectSortOrder />
+    </div>
+  );
+};
diff --git a/src/final_src/4_features/filter-posts/ui/SearchInput.tsx b/src/final_src/4_features/filter-posts/ui/SearchInput.tsx
new file mode 100644
index 000000000..29cc8c124
--- /dev/null
+++ b/src/final_src/4_features/filter-posts/ui/SearchInput.tsx
@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+
+import { Search } from 'lucide-react';
+
+import { UI_CONSTANTS } from '@/shared/constants';
+import { useDebounce, usePostsFilterStore } from '@/shared/lib';
+import { Input } from '@/shared/ui';
+
+export const SearchInput = () => {
+  const { searchQuery, setSearchQuery } = usePostsFilterStore();
+  const debouncedSetSearchQuery = useDebounce((searchQuery: string) => {
+    setSearchQuery(searchQuery);
+  }, 500);
+
+  const [originalSearchQuery, setOriginalSearchQuery] = useState(searchQuery);
+
+  const handleChangeSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setOriginalSearchQuery(e.target.value);
+  };
+
+  const handleKeyDownSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      setOriginalSearchQuery(e.currentTarget.value);
+    }
+  };
+
+  useEffect(() => {
+    debouncedSetSearchQuery(originalSearchQuery);
+  }, [originalSearchQuery]);
+
+  return (
+    <div className='flex-1'>
+      <div className='relative'>
+        <Search
+          className={`absolute left-2 top-2.5 ${UI_CONSTANTS.ICON_SIZES.MEDIUM} text-muted-foreground`}
+        />
+        <Input
+          placeholder='게시물 검색...'
+          className='pl-8'
+          value={originalSearchQuery}
+          onChange={handleChangeSearch}
+          onKeyDown={handleKeyDownSearch}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/src/final_src/4_features/filter-posts/ui/SelectLimit.tsx b/src/final_src/4_features/filter-posts/ui/SelectLimit.tsx
new file mode 100644
index 000000000..c42827701
--- /dev/null
+++ b/src/final_src/4_features/filter-posts/ui/SelectLimit.tsx
@@ -0,0 +1,31 @@
+import { UI_CONSTANTS } from '@/shared/constants';
+import { usePostsFilterStore } from '@/shared/lib';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/shared/ui';
+
+export const SelectLimit = () => {
+  const { limit, setLimit } = usePostsFilterStore();
+
+  return (
+    <Select
+      value={limit.toString()}
+      onValueChange={value => setLimit(Number(value))}
+    >
+      <SelectTrigger className='w-[180px]'>
+        <SelectValue placeholder='10' />
+      </SelectTrigger>
+      <SelectContent>
+        {UI_CONSTANTS.PAGINATION.LIMIT_OPTIONS.map(option => (
+          <SelectItem key={option} value={String(option)}>
+            {option}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};
diff --git a/src/final_src/4_features/filter-posts/ui/SelectSortBy.tsx b/src/final_src/4_features/filter-posts/ui/SelectSortBy.tsx
new file mode 100644
index 000000000..2a06dc535
--- /dev/null
+++ b/src/final_src/4_features/filter-posts/ui/SelectSortBy.tsx
@@ -0,0 +1,35 @@
+import { SORT_BY } from '@/entities/post';
+import { usePostsFilterStore } from '@/shared/lib';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/shared/ui';
+
+const SORT_BY_OPTIONS: { value: SORT_BY; label: string }[] = [
+  { value: SORT_BY.NONE, label: '없음' },
+  { value: SORT_BY.ID, label: 'ID' },
+  { value: SORT_BY.TITLE, label: '제목' },
+  { value: SORT_BY.REACTIONS, label: '반응' },
+];
+
+export const SelectSortBy = () => {
+  const { sortBy, setSortBy } = usePostsFilterStore();
+
+  return (
+    <Select value={sortBy} onValueChange={setSortBy}>
+      <SelectTrigger className='w-[180px]'>
+        <SelectValue placeholder='정렬 기준' />
+      </SelectTrigger>
+      <SelectContent>
+        {SORT_BY_OPTIONS.map(option => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};
diff --git a/src/final_src/4_features/filter-posts/ui/SelectSortOrder.tsx b/src/final_src/4_features/filter-posts/ui/SelectSortOrder.tsx
new file mode 100644
index 000000000..bff9b08cf
--- /dev/null
+++ b/src/final_src/4_features/filter-posts/ui/SelectSortOrder.tsx
@@ -0,0 +1,33 @@
+import { SORT_ORDER } from '@/entities/post';
+import { usePostsFilterStore } from '@/shared/lib';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/shared/ui';
+
+const SORT_ORDER_OPTIONS: { value: SORT_ORDER; label: string }[] = [
+  { value: SORT_ORDER.ASC, label: '오름차순' },
+  { value: SORT_ORDER.DESC, label: '내림차순' },
+];
+
+export const SelectSortOrder = () => {
+  const { sortOrder, setSortOrder } = usePostsFilterStore();
+
+  return (
+    <Select value={sortOrder} onValueChange={setSortOrder}>
+      <SelectTrigger className='w-[180px]'>
+        <SelectValue placeholder='정렬 순서' />
+      </SelectTrigger>
+      <SelectContent>
+        {SORT_ORDER_OPTIONS.map(option => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};
diff --git a/src/final_src/4_features/filter-posts/ui/SelectTag.tsx b/src/final_src/4_features/filter-posts/ui/SelectTag.tsx
new file mode 100644
index 000000000..eeeb3b10b
--- /dev/null
+++ b/src/final_src/4_features/filter-posts/ui/SelectTag.tsx
@@ -0,0 +1,45 @@
+import { useGetTagsQuery } from '@/entities/tag';
+import { usePostsFilterStore } from '@/shared/lib';
+import {
+  LoadingSpinner,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/shared/ui';
+
+export const SelectTag = () => {
+  const { selectedTag, setSelectedTag } = usePostsFilterStore();
+  const { data: tags, isLoading } = useGetTagsQuery();
+
+  const handleTagChange = (value: string) => {
+    setSelectedTag(value);
+  };
+
+  return (
+    <Select value={selectedTag} onValueChange={handleTagChange}>
+      {isLoading ? (
+        <SelectTrigger className='w-[180px]'>
+          <LoadingSpinner size='sm' />
+        </SelectTrigger>
+      ) : (
+        <>
+          <SelectTrigger className='w-[180px]'>
+            <SelectValue placeholder='태그 선택' />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value='all'>모든 태그</SelectItem>
+            {tags &&
+              tags.length > 0 &&
+              tags.map(tag => (
+                <SelectItem key={tag.url} value={tag.slug}>
+                  {tag.slug}
+                </SelectItem>
+              ))}
+          </SelectContent>
+        </>
+      )}
+    </Select>
+  );
+};
diff --git a/src/final_src/4_features/post-management/hooks/useCreatePostForm.ts b/src/final_src/4_features/post-management/hooks/useCreatePostForm.ts
new file mode 100644
index 000000000..dbce9ae11
--- /dev/null
+++ b/src/final_src/4_features/post-management/hooks/useCreatePostForm.ts
@@ -0,0 +1,66 @@
+import { useState } from 'react';
+
+import { useCreatePostMutation } from '@/entities/post';
+import { API_CONSTANTS } from '@/shared/constants';
+import { useUIStore } from '@/shared/lib';
+
+export const useCreatePostForm = () => {
+  const { setShowAddDialog } = useUIStore();
+  const { mutate: createPost } = useCreatePostMutation({
+    onSuccess: () => {
+      resetForm();
+    },
+    onError: (error: Error) => {
+      console.error('게시물 추가 오류:', error);
+      // ! 모달 다시 열어서 사용자가 수정하기
+      setShowAddDialog(true);
+    },
+  });
+
+  const [postTitle, setPostTitle] = useState<string>('');
+  const [postBody, setPostBody] = useState<string>('');
+  const [postUserId, setPostUserId] = useState<number>(
+    API_CONSTANTS.DEFAULT_USER_ID
+  );
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    // ! 다이얼로그 먼저 닫고 UI 낙관적 업데이트 보여주기
+    setShowAddDialog(false);
+    createPost({
+      title: postTitle,
+      body: postBody,
+      userId: postUserId,
+    });
+  };
+
+  const resetForm = () => {
+    setPostTitle('');
+    setPostBody('');
+    setPostUserId(API_CONSTANTS.DEFAULT_USER_ID);
+  };
+
+  const handleChangeTitle = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPostTitle(e.target.value);
+  };
+
+  const handleChangeBody = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setPostBody(e.target.value);
+  };
+
+  const handleChangeUserId = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPostUserId(Number(e.target.value));
+  };
+
+  return {
+    postTitle,
+    postBody,
+    postUserId,
+    handleSubmit,
+    resetForm,
+    handleChangeTitle,
+    handleChangeBody,
+    handleChangeUserId,
+  };
+};
diff --git a/src/final_src/4_features/post-management/hooks/useEditPostForm.ts b/src/final_src/4_features/post-management/hooks/useEditPostForm.ts
new file mode 100644
index 000000000..2886181eb
--- /dev/null
+++ b/src/final_src/4_features/post-management/hooks/useEditPostForm.ts
@@ -0,0 +1,60 @@
+import { ChangeEvent, useEffect, useState } from 'react';
+
+import { usePutPostMutation } from '@/entities/post';
+import { useUIStore } from '@/shared/lib';
+
+export const useEditPostForm = () => {
+  const { selectedPost, setShowEditDialog } = useUIStore();
+  const { mutate: updatePost } = usePutPostMutation({
+    onSuccess: () => {
+      resetForm();
+    },
+    onError: error => {
+      console.error('게시물 수정 오류:', error);
+      // ! 모달 다시 열어서 사용자가 수정하기
+      setShowEditDialog(true);
+    },
+  });
+
+  const [title, setTitle] = useState(selectedPost?.title || '');
+  const [body, setBody] = useState(selectedPost?.body || '');
+
+  const handleChangeTitle = (e: ChangeEvent<HTMLInputElement>) => {
+    setTitle(e.target.value);
+  };
+
+  const handleChangeBody = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setBody(e.target.value);
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    // ! 모달 먼저 닫고 UI 낙관적 업데이트 보여주기
+    setShowEditDialog(false);
+    updatePost({
+      id: selectedPost?.id ?? 0,
+      title,
+      body,
+      userId: selectedPost?.userId ?? 0,
+    });
+  };
+
+  useEffect(() => {
+    setTitle(selectedPost?.title || '');
+    setBody(selectedPost?.body || '');
+  }, [selectedPost]);
+
+  const resetForm = () => {
+    setTitle('');
+    setBody('');
+  };
+
+  return {
+    title,
+    body,
+    handleChangeTitle,
+    handleChangeBody,
+    handleSubmit,
+  };
+};
diff --git a/src/final_src/4_features/post-management/index.ts b/src/final_src/4_features/post-management/index.ts
new file mode 100644
index 000000000..ecfdede3e
--- /dev/null
+++ b/src/final_src/4_features/post-management/index.ts
@@ -0,0 +1,4 @@
+export * from './ui/AddPostFormDialog';
+export * from './ui/AddPostButton';
+export * from './ui/PostDetailDialog';
+export * from './ui/PostTable';
diff --git a/src/final_src/4_features/post-management/lib/post.util.ts b/src/final_src/4_features/post-management/lib/post.util.ts
new file mode 100644
index 000000000..f4f9774a5
--- /dev/null
+++ b/src/final_src/4_features/post-management/lib/post.util.ts
@@ -0,0 +1,18 @@
+import type { Post } from '@/entities/post';
+import type { User, UserPick } from '@/entities/user';
+
+import { PostWithAuthor } from '../types';
+
+export const getPostsWithAuthor = <K extends keyof User>(
+  posts: Post[],
+  users: UserPick<K | 'id'>[]
+): PostWithAuthor<K>[] => {
+  return posts.map(post => {
+    const author = users.find(user => user.id === post.userId);
+
+    return {
+      ...post,
+      author,
+    };
+  });
+};
diff --git a/src/final_src/4_features/post-management/types.ts b/src/final_src/4_features/post-management/types.ts
new file mode 100644
index 000000000..a911eb348
--- /dev/null
+++ b/src/final_src/4_features/post-management/types.ts
@@ -0,0 +1,6 @@
+import type { Post } from '@/entities/post';
+import type { User, UserPick } from '@/entities/user';
+
+export interface PostWithAuthor<K extends keyof User> extends Post {
+  author?: UserPick<K>;
+}
diff --git a/src/final_src/4_features/post-management/ui/AddPostButton.tsx b/src/final_src/4_features/post-management/ui/AddPostButton.tsx
new file mode 100644
index 000000000..76eb1dcb0
--- /dev/null
+++ b/src/final_src/4_features/post-management/ui/AddPostButton.tsx
@@ -0,0 +1,16 @@
+import { Plus } from 'lucide-react';
+
+import { UI_CONSTANTS } from '@/shared/constants';
+import { useUIStore } from '@/shared/lib';
+import { Button } from '@/shared/ui';
+
+export const AddPostButton = () => {
+  const { setShowAddDialog } = useUIStore();
+
+  return (
+    <Button onClick={() => setShowAddDialog(true)}>
+      <Plus className={`${UI_CONSTANTS.ICON_SIZES.MEDIUM} mr-2`} />
+      게시물 추가
+    </Button>
+  );
+};
diff --git a/src/final_src/4_features/post-management/ui/AddPostFormDialog.tsx b/src/final_src/4_features/post-management/ui/AddPostFormDialog.tsx
new file mode 100644
index 000000000..f0947207e
--- /dev/null
+++ b/src/final_src/4_features/post-management/ui/AddPostFormDialog.tsx
@@ -0,0 +1,60 @@
+import { UI_CONSTANTS } from '@/shared/constants';
+import { useUIStore } from '@/shared/lib';
+import { Button, ContentDialog, Input, Textarea } from '@/shared/ui';
+
+import { useCreatePostForm } from '../hooks/useCreatePostForm';
+
+export const AddPostFormDialog = () => {
+  const { setShowAddDialog, showAddDialog } = useUIStore();
+  const {
+    postTitle,
+    postBody,
+    postUserId,
+    handleSubmit,
+    resetForm,
+    handleChangeTitle,
+    handleChangeBody,
+    handleChangeUserId,
+  } = useCreatePostForm();
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      resetForm();
+      setShowAddDialog(open);
+      return;
+    }
+
+    setShowAddDialog(open);
+  };
+
+  return (
+    <ContentDialog
+      title='새 게시물 추가'
+      open={showAddDialog}
+      onOpenChange={handleOpenChange}
+    >
+      <form className='space-y-4' onSubmit={handleSubmit}>
+        <Input
+          placeholder='제목'
+          value={postTitle}
+          onChange={handleChangeTitle}
+        />
+
+        <Textarea
+          rows={UI_CONSTANTS.TEXTAREA_ROWS.LARGE}
+          placeholder='내용'
+          value={postBody}
+          onChange={handleChangeBody}
+        />
+
+        <Input
+          type='number'
+          placeholder='사용자 ID'
+          value={postUserId}
+          onChange={handleChangeUserId}
+        />
+        <Button type='submit'>게시물 추가</Button>
+      </form>
+    </ContentDialog>
+  );
+};
diff --git a/src/final_src/4_features/post-management/ui/EditPostFormDialog.tsx b/src/final_src/4_features/post-management/ui/EditPostFormDialog.tsx
new file mode 100644
index 000000000..5a3e1a9e7
--- /dev/null
+++ b/src/final_src/4_features/post-management/ui/EditPostFormDialog.tsx
@@ -0,0 +1,30 @@
+import { UI_CONSTANTS } from '@/shared/constants';
+import { useUIStore } from '@/shared/lib';
+import { Button, ContentDialog, Input, Textarea } from '@/shared/ui';
+
+import { useEditPostForm } from '../hooks/useEditPostForm';
+
+export const EditPostFormDialog = () => {
+  const { title, body, handleChangeTitle, handleChangeBody, handleSubmit } =
+    useEditPostForm();
+  const { showEditDialog, setShowEditDialog } = useUIStore();
+
+  return (
+    <ContentDialog
+      open={showEditDialog}
+      onOpenChange={setShowEditDialog}
+      title='게시물 수정'
+    >
+      <form className='space-y-4' onSubmit={handleSubmit}>
+        <Input placeholder='제목' value={title} onChange={handleChangeTitle} />
+        <Textarea
+          rows={UI_CONSTANTS.TEXTAREA_ROWS.MEDIUM}
+          placeholder='내용'
+          value={body}
+          onChange={handleChangeBody}
+        />
+        <Button type='submit'>게시물 업데이트</Button>
+      </form>
+    </ContentDialog>
+  );
+};
diff --git a/src/final_src/4_features/post-management/ui/PostDetailDialog.tsx b/src/final_src/4_features/post-management/ui/PostDetailDialog.tsx
new file mode 100644
index 000000000..dca78d1c7
--- /dev/null
+++ b/src/final_src/4_features/post-management/ui/PostDetailDialog.tsx
@@ -0,0 +1,44 @@
+import { Plus } from 'lucide-react';
+
+import { CommentList } from '@/features/comment-management/ui/CommentList';
+import { UI_CONSTANTS } from '@/shared/constants';
+import { highlightText, usePostsFilterStore, useUIStore } from '@/shared/lib';
+import { Button, ContentDialog } from '@/shared/ui';
+
+export const PostDetailDialog = () => {
+  const {
+    showPostDetailDialog,
+    setShowPostDetailDialog,
+    selectedPost,
+    setShowAddCommentDialog,
+  } = useUIStore();
+  const { searchQuery } = usePostsFilterStore();
+
+  if (!selectedPost) return null;
+
+  const handleClickAddComment = () => {
+    setShowAddCommentDialog(true);
+  };
+
+  return (
+    <ContentDialog
+      open={showPostDetailDialog}
+      onOpenChange={setShowPostDetailDialog}
+      title={highlightText(selectedPost.title, searchQuery)}
+    >
+      <div className='space-y-4 w-full'>
+        <p>{highlightText(selectedPost?.body, searchQuery)}</p>
+        <div className='mt-2'>
+          <div className='flex items-center justify-between mb-2'>
+            <h3 className='text-sm font-semibold'>댓글</h3>
+            <Button size='sm' onClick={handleClickAddComment}>
+              <Plus className={`${UI_CONSTANTS.ICON_SIZES.SMALL} mr-1`} />
+              댓글 추가
+            </Button>
+          </div>
+          <CommentList />
+        </div>
+      </div>
+    </ContentDialog>
+  );
+};
diff --git a/src/final_src/4_features/post-management/ui/PostPagination.tsx b/src/final_src/4_features/post-management/ui/PostPagination.tsx
new file mode 100644
index 000000000..4951e1397
--- /dev/null
+++ b/src/final_src/4_features/post-management/ui/PostPagination.tsx
@@ -0,0 +1,39 @@
+import { SelectLimit } from '@/features/filter-posts/ui/SelectLimit';
+import { UI_CONSTANTS } from '@/shared/constants';
+import { usePostsFilterStore } from '@/shared/lib';
+import { Button } from '@/shared/ui';
+
+export const PostPagination = () => {
+  const {
+    setSkip,
+    pagination: { total, limit, skip },
+  } = usePostsFilterStore();
+
+  return (
+    <div className='flex justify-between items-center'>
+      <div className='flex items-center gap-2'>
+        <span>표시</span>
+        <SelectLimit />
+        <span>항목</span>
+      </div>
+      <div className='flex gap-2'>
+        <Button
+          disabled={skip === UI_CONSTANTS.PAGINATION.DEFAULT_SKIP}
+          onClick={() =>
+            setSkip(
+              Math.max(UI_CONSTANTS.PAGINATION.DEFAULT_SKIP, skip - limit)
+            )
+          }
+        >
+          이전
+        </Button>
+        <Button
+          disabled={skip + limit >= total}
+          onClick={() => setSkip(skip + limit)}
+        >
+          다음
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/src/final_src/4_features/post-management/ui/PostTable.tsx b/src/final_src/4_features/post-management/ui/PostTable.tsx
new file mode 100644
index 000000000..a95797afa
--- /dev/null
+++ b/src/final_src/4_features/post-management/ui/PostTable.tsx
@@ -0,0 +1,172 @@
+import {
+  Edit2,
+  MessageSquare,
+  ThumbsDown,
+  ThumbsUp,
+  Trash2,
+} from 'lucide-react';
+
+import { Post, useDeletePostMutation } from '@/entities/post';
+import { User, UserPick } from '@/entities/user';
+import { API_CONSTANTS, UI_CONSTANTS } from '@/shared/constants';
+import { highlightText, usePostsFilterStore, useUIStore } from '@/shared/lib';
+import {
+  Button,
+  LoadingSpinner,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/shared/ui';
+
+import {
+  SelectedUserProperties,
+  useFilteredPosts,
+} from '../../filter-posts/hooks/useFilteredPosts';
+
+export const PostTable = () => {
+  const { posts, isLoading } = useFilteredPosts();
+  const { selectedTag, setSelectedTag, searchQuery, limit } =
+    usePostsFilterStore();
+  const {
+    setShowUserModal,
+    setSelectedUser,
+    setSelectedPost,
+    setShowPostDetailDialog,
+    setShowEditDialog,
+  } = useUIStore();
+  const { mutate: deletePost } = useDeletePostMutation({
+    onError: error => {
+      console.error('게시물 삭제 오류:', error);
+    },
+  });
+
+  const handleClickTag = (tag: string) => {
+    setSelectedTag(tag);
+  };
+
+  const handleClickDeletePost = (id: number) => {
+    deletePost(id);
+  };
+
+  const handleClickEditPost = (post: Post) => {
+    setSelectedPost(post);
+    setShowEditDialog(true);
+  };
+
+  const handleClickDetailPost = (post: Post) => {
+    setSelectedPost(post);
+    setShowPostDetailDialog(true);
+  };
+
+  const handleClickUser = (user: UserPick<SelectedUserProperties>) => {
+    setShowUserModal(true);
+    setSelectedUser(user as User);
+  };
+
+  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>
+        {isLoading ? (
+          <TableRow>
+            <TableCell className={`h-[${80 * limit}px]`} {...{ colSpan: 5 }}>
+              <div className='flex justify-center items-center w-full h-full'>
+                <LoadingSpinner />
+              </div>
+            </TableCell>
+          </TableRow>
+        ) : (
+          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={`${UI_CONSTANTS.STYLES.TAG_SIZE} ${
+                          selectedTag === tag
+                            ? UI_CONSTANTS.STYLES.TAG_SELECTED
+                            : UI_CONSTANTS.STYLES.TAG_DEFAULT
+                        }`}
+                        onClick={() => handleClickTag(tag)}
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </TableCell>
+              <TableCell>
+                <div
+                  className='flex items-center space-x-2 cursor-pointer'
+                  onClick={() => post.author && handleClickUser(post.author)}
+                >
+                  <img
+                    src={post.author?.image}
+                    alt={post.author?.username}
+                    className={`${UI_CONSTANTS.ICON_SIZES.LARGE} rounded-full`}
+                  />
+                  <span>{post.author?.username}</span>
+                </div>
+              </TableCell>
+              <TableCell>
+                <div className='flex items-center gap-2'>
+                  <ThumbsUp className={UI_CONSTANTS.ICON_SIZES.MEDIUM} />
+                  <span>
+                    {post.reactions?.likes ||
+                      API_CONSTANTS.REACTIONS.DEFAULT_LIKES}
+                  </span>
+                  <ThumbsDown className={UI_CONSTANTS.ICON_SIZES.MEDIUM} />
+                  <span>
+                    {post.reactions?.dislikes ||
+                      API_CONSTANTS.REACTIONS.DEFAULT_DISLIKES}
+                  </span>
+                </div>
+              </TableCell>
+              <TableCell>
+                <div className='flex items-center gap-2'>
+                  <Button
+                    variant='ghost'
+                    size='sm'
+                    onClick={() => handleClickDetailPost(post)}
+                  >
+                    <MessageSquare className={UI_CONSTANTS.ICON_SIZES.MEDIUM} />
+                  </Button>
+                  <Button
+                    variant='ghost'
+                    size='sm'
+                    onClick={() => handleClickEditPost(post)}
+                  >
+                    <Edit2 className={UI_CONSTANTS.ICON_SIZES.MEDIUM} />
+                  </Button>
+                  <Button
+                    variant='ghost'
+                    size='sm'
+                    onClick={() => handleClickDeletePost(post.id)}
+                  >
+                    <Trash2 className={UI_CONSTANTS.ICON_SIZES.MEDIUM} />
+                  </Button>
+                </div>
+              </TableCell>
+            </TableRow>
+          ))
+        )}
+      </TableBody>
+    </Table>
+  );
+};
diff --git a/src/final_src/4_features/user-profile/index.ts b/src/final_src/4_features/user-profile/index.ts
new file mode 100644
index 000000000..830c625d4
--- /dev/null
+++ b/src/final_src/4_features/user-profile/index.ts
@@ -0,0 +1 @@
+export * from './ui/UseProfileDialog';
diff --git a/src/final_src/4_features/user-profile/ui/UseProfileDialog.tsx b/src/final_src/4_features/user-profile/ui/UseProfileDialog.tsx
new file mode 100644
index 000000000..62898262a
--- /dev/null
+++ b/src/final_src/4_features/user-profile/ui/UseProfileDialog.tsx
@@ -0,0 +1,60 @@
+import { Loader2 } from 'lucide-react';
+
+import { useGetUserQuery } from '@/entities/user';
+import { useUIStore } from '@/shared/lib';
+import { ContentDialog } from '@/shared/ui';
+
+export const UserProfileDialog = () => {
+  const { selectedUser, showUserModal, setShowUserModal } = useUIStore();
+
+  const { data: user, isLoading } = useGetUserQuery(selectedUser?.id ?? null);
+
+  if (!selectedUser) return null;
+
+  return (
+    <ContentDialog
+      open={showUserModal}
+      onOpenChange={setShowUserModal}
+      title='사용자 정보'
+    >
+      {isLoading ? (
+        <div className='flex justify-center items-center h-full'>
+          <Loader2 className='w-6 h-6 animate-spin' />
+        </div>
+      ) : (
+        <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>
+      )}
+    </ContentDialog>
+  );
+};
diff --git a/src/final_src/5_entities/comment/comment.api.ts b/src/final_src/5_entities/comment/comment.api.ts
new file mode 100644
index 000000000..ad45e832e
--- /dev/null
+++ b/src/final_src/5_entities/comment/comment.api.ts
@@ -0,0 +1,42 @@
+import { ApiService } from '@/shared/lib';
+
+import {
+  Comment,
+  CommentToCreate,
+  CreatedComment,
+  DeletedComment,
+  GetCommentsResponse,
+} from './comment.type';
+
+export const getComments = async (
+  postId: number
+): Promise<GetCommentsResponse> => {
+  return ApiService.get<GetCommentsResponse>(`/comments/post/${postId}`);
+};
+
+export const createComment = async (
+  newComment: CommentToCreate
+): Promise<CreatedComment> => {
+  return ApiService.post<CreatedComment>('/comments/add', newComment);
+};
+
+export const updateComment = async (
+  updatedComment: Comment
+): Promise<{ body: string }> => {
+  return ApiService.put<{ body: string }>(`/comments/${updatedComment.id}`, {
+    body: updatedComment.body,
+  });
+};
+
+export const patchComment = async (
+  updatedComment: Partial<Comment>,
+  commentId: number
+): Promise<Comment> => {
+  return ApiService.put<Comment>(`/comments/${commentId}`, updatedComment);
+};
+
+export const deleteComment = async (
+  commentId: number
+): Promise<DeletedComment> => {
+  return ApiService.delete<DeletedComment>(`/comments/${commentId}`);
+};
diff --git a/src/final_src/5_entities/comment/comment.queries.ts b/src/final_src/5_entities/comment/comment.queries.ts
new file mode 100644
index 000000000..ff7fd3088
--- /dev/null
+++ b/src/final_src/5_entities/comment/comment.queries.ts
@@ -0,0 +1,317 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { queryKeys } from '@/shared/lib';
+import { MutationProps, Nullable } from '@/shared/types';
+
+import {
+  createComment,
+  deleteComment,
+  getComments,
+  patchComment,
+  updateComment,
+} from './comment.api';
+import {
+  Comment,
+  CommentToCreate,
+  CreatedComment,
+  DeletedComment,
+  GetCommentsResponse,
+} from './comment.type';
+
+export const useGetCommentsQuery = (postId: Nullable<number>) => {
+  return useQuery({
+    queryKey: queryKeys.comments.list(postId ?? 0),
+    queryFn: () => getComments(postId ?? 0),
+    enabled: !!postId,
+  });
+};
+
+export const useCreateCommentMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<CreatedComment>) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (newComment: CommentToCreate) => createComment(newComment),
+    onMutate: async newComment => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.comments.list(newComment.postId),
+      });
+
+      const previousCommentData = queryClient.getQueryData<GetCommentsResponse>(
+        queryKeys.comments.list(newComment.postId)
+      );
+
+      const commentToAdd: Comment = {
+        ...newComment,
+        id: Math.floor(Math.random() * 1000000),
+        likes: 0,
+        user: {
+          id: 1,
+          username: 'John Doe',
+          image: 'john.doe@example.com',
+        },
+      };
+
+      // ! 이전 데이터 캐시에 새 댓글 추가하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(
+        queryKeys.comments.list(newComment.postId),
+        (old: GetCommentsResponse) => {
+          return {
+            ...old,
+            comments: [commentToAdd, ...(old.comments || [])],
+          };
+        }
+      );
+
+      return { previousCommentData };
+    },
+    onError: (error, { postId }, context) => {
+      queryClient.setQueryData(
+        queryKeys.comments.list(postId),
+        context?.previousCommentData
+      );
+      onError?.(error);
+    },
+    onSuccess: (data, _, { previousCommentData }) => {
+      // ! 성공 시 이전 데이터에 성공 데이터 추가
+      queryClient.setQueryData(
+        queryKeys.comments.list(data.postId),
+        (old: any) => {
+          return {
+            ...old,
+            comments: [data, ...(previousCommentData?.comments || [])],
+          };
+        }
+      );
+      onSuccess?.(data);
+    },
+  });
+};
+
+export const useUpdateCommentMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<{ body: string }>) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (updatedComment: Comment) => updateComment(updatedComment),
+    onMutate: async updatedComment => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.comments.list(updatedComment.postId),
+      });
+
+      const previousComments = queryClient.getQueryData<GetCommentsResponse>(
+        queryKeys.comments.list(updatedComment.postId)
+      );
+
+      // ! 이전 데이터 캐시에 수정된 댓글 업데이트하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(
+        queryKeys.comments.list(updatedComment.postId),
+        (old: GetCommentsResponse) => {
+          if (!old) {
+            return {
+              comments: [updatedComment],
+              total: 1,
+              skip: 0,
+              limit: 10,
+            };
+          }
+
+          return {
+            ...old,
+            comments: old.comments.map((comment: Comment) =>
+              comment.id === updatedComment.id ? updatedComment : comment
+            ),
+          };
+        }
+      );
+
+      return { previousComments };
+    },
+    onError: (error, updatedComment, context) => {
+      queryClient.setQueryData(
+        queryKeys.comments.list(updatedComment.postId),
+        context?.previousComments
+      );
+      onError?.(error);
+    },
+    onSuccess: (data, updatedComment, { previousComments }) => {
+      // ! 성공 시 이전 데이터에 성공 데이터 추가
+      queryClient.setQueryData(
+        queryKeys.comments.list(updatedComment.postId),
+        (old: any) => {
+          return {
+            ...old,
+            comments: previousComments?.comments.map((comment: Comment) =>
+              comment.id === updatedComment.id
+                ? { ...comment, body: data.body }
+                : comment
+            ),
+          };
+        }
+      );
+      onSuccess?.(data);
+    },
+  });
+};
+
+export const useDeleteCommentMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<DeletedComment>) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ commentId }: { commentId: number; postId: number }) =>
+      deleteComment(commentId),
+    onMutate: async ({ commentId, postId }) => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.comments.list(postId),
+      });
+
+      const previousComments = queryClient.getQueryData<GetCommentsResponse>(
+        queryKeys.comments.list(postId)
+      );
+
+      // ! 이전 데이터 캐시에 삭제된 댓글 제외하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(queryKeys.comments.list(postId), (old: any) => {
+        if (!old) {
+          return {
+            comments: [],
+            total: 1,
+            skip: 0,
+            limit: 10,
+          };
+        }
+
+        return {
+          ...old,
+          comments: old.comments.filter(
+            (comment: Comment) => comment.id !== commentId
+          ),
+        };
+      });
+
+      return { previousComments };
+    },
+    onError: (error, { postId }, context) => {
+      queryClient.setQueryData(
+        queryKeys.comments.list(postId),
+        context?.previousComments
+      );
+      onError?.(error);
+    },
+    onSuccess: (data, { postId }, { previousComments }) => {
+      // ! 성공 시 이전 데이터에서 삭제된 댓글 제외
+      queryClient.setQueryData(queryKeys.comments.list(postId), (old: any) => {
+        return {
+          ...old,
+          comments: previousComments?.comments.filter(
+            (comment: Comment) => comment.id !== data.id
+          ),
+        };
+      });
+      onSuccess?.(data);
+    },
+  });
+};
+
+export const useLikeCommentMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<Comment>) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      commentId,
+      postId,
+    }: {
+      commentId: number;
+      postId: number;
+    }) => {
+      const commentsData = queryClient.getQueryData<GetCommentsResponse>(
+        queryKeys.comments.list(postId)
+      );
+
+      if (!commentsData) {
+        throw new Error('Comments not found');
+      }
+
+      const commentToUpdate = commentsData.comments.find(
+        (comment: Comment) => comment.id === commentId
+      );
+
+      if (!commentToUpdate) {
+        throw new Error('Comment not found');
+      }
+
+      return patchComment(
+        {
+          likes: commentToUpdate.likes + 1,
+        },
+        commentId
+      );
+    },
+    onMutate: async ({ commentId, postId }) => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.comments.list(postId),
+      });
+
+      const previousComments = queryClient.getQueryData<GetCommentsResponse>(
+        queryKeys.comments.list(postId)
+      );
+
+      // ! 이전 데이터 캐시에 좋아요 누른 댓글 업데이트하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(
+        queryKeys.comments.list(postId),
+        (old: GetCommentsResponse) => {
+          if (!old) {
+            return {
+              comments: [],
+              total: 0,
+              skip: 0,
+              limit: 10,
+            };
+          }
+
+          return {
+            ...old,
+            comments: old.comments.map((comment: Comment) =>
+              comment.id === commentId
+                ? { ...comment, likes: comment.likes + 1 }
+                : comment
+            ),
+          };
+        }
+      );
+
+      return { previousComments };
+    },
+    onError: (error, { postId }, context) => {
+      queryClient.setQueryData(
+        queryKeys.comments.list(postId),
+        context?.previousComments
+      );
+      onError?.(error);
+    },
+    onSuccess: (data, _, { previousComments }) => {
+      // ! 성공 시 이전 데이터에 좋아요 누른 댓글 업데이트
+      // ! 실무에선 응답 데이터의 좋아요 수가 증가해야하지만, 더미 데이터라 증가하지 않으므로 좋아요수가 증가한 것으로 가정하여 업데이트
+      queryClient.setQueryData(queryKeys.comments.list(data.postId), () => {
+        return {
+          ...previousComments,
+          comments: previousComments?.comments.map((comment: Comment) =>
+            comment.id === data.id
+              ? { ...data, likes: comment.likes + 1 }
+              : comment
+          ),
+        };
+      });
+      onSuccess?.(data);
+    },
+  });
+};
diff --git a/src/final_src/5_entities/comment/comment.type.ts b/src/final_src/5_entities/comment/comment.type.ts
new file mode 100644
index 000000000..0608de1b4
--- /dev/null
+++ b/src/final_src/5_entities/comment/comment.type.ts
@@ -0,0 +1,29 @@
+import { PaginationMeta } from '@/shared/types';
+
+import { BaseUser } from '../user';
+
+// ? Comment에 User도 포함되는데 Entity에 넣는게 맞나?
+export interface Comment {
+  id: number;
+  postId: number;
+  body: string;
+  user: BaseUser;
+  likes: number;
+}
+
+export interface CommentToCreate {
+  body: string;
+  postId: number;
+  userId: number;
+}
+
+export interface DeletedComment extends Comment {
+  isDeleted: boolean;
+  deletedOn: string;
+}
+
+export type CreatedComment = CommentToCreate;
+
+export interface GetCommentsResponse extends PaginationMeta {
+  comments: Comment[];
+}
diff --git a/src/final_src/5_entities/comment/index.ts b/src/final_src/5_entities/comment/index.ts
new file mode 100644
index 000000000..74af32942
--- /dev/null
+++ b/src/final_src/5_entities/comment/index.ts
@@ -0,0 +1,3 @@
+export * from './comment.type';
+export * from './comment.queries';
+export * from './comment.api';
diff --git a/src/final_src/5_entities/post/index.ts b/src/final_src/5_entities/post/index.ts
new file mode 100644
index 000000000..7341cce55
--- /dev/null
+++ b/src/final_src/5_entities/post/index.ts
@@ -0,0 +1,14 @@
+// Types
+export * from './post.type';
+
+// API
+export * from './post.api';
+
+// Queries
+export * from './post.queries';
+
+// Models
+export * from './post.model';
+
+// Constants
+export * from './post.constant';
diff --git a/src/final_src/5_entities/post/post.api.ts b/src/final_src/5_entities/post/post.api.ts
new file mode 100644
index 000000000..71b669e90
--- /dev/null
+++ b/src/final_src/5_entities/post/post.api.ts
@@ -0,0 +1,74 @@
+import {
+  BaseFilterParams,
+  DeletedPost,
+  GetPostsResponse,
+  ParamsWithSearch,
+  ParamsWithTag,
+  Post,
+  POST_CONSTANTS,
+  SORT_ORDER,
+} from '@/entities/post';
+import { ApiService } from '@/shared/lib';
+
+export const getPosts = async ({
+  limit = POST_CONSTANTS.DEFAULT_LIMIT,
+  skip = POST_CONSTANTS.DEFAULT_SKIP,
+  sortBy,
+  sortOrder,
+}: BaseFilterParams): Promise<GetPostsResponse> => {
+  const params = {
+    limit: limit.toString(),
+    skip: skip.toString(),
+    sortBy: sortBy || '',
+    sortOrder: sortOrder || SORT_ORDER.ASC,
+  };
+
+  return ApiService.get<GetPostsResponse>('/posts', params);
+};
+
+export const getPostsByTag = async ({
+  selectedTag,
+  limit,
+  skip,
+  sortBy,
+  sortOrder,
+}: ParamsWithTag): Promise<GetPostsResponse> => {
+  const params = {
+    limit: limit?.toString() || '0',
+    skip: skip?.toString() || '0',
+    sortBy: sortBy || '',
+    sortOrder: sortOrder || SORT_ORDER.ASC,
+  };
+
+  return ApiService.get<GetPostsResponse>(`/posts/tag/${selectedTag}`, params);
+};
+
+export const getPostsBySearch = async ({
+  searchQuery,
+  limit,
+  skip,
+  sortBy,
+  sortOrder,
+}: ParamsWithSearch): Promise<GetPostsResponse> => {
+  const params = {
+    limit: limit?.toString() || '0',
+    skip: skip?.toString() || '0',
+    searchQuery,
+    sortBy: sortBy || '',
+    sortOrder: sortOrder || SORT_ORDER.ASC,
+  };
+
+  return ApiService.get<GetPostsResponse>('/posts/search', params);
+};
+
+export const createPost = async (newPost: Omit<Post, 'id'>): Promise<Post> => {
+  return ApiService.post<Post>('/posts/add', newPost);
+};
+
+export const putPost = async (updatedPost: Post): Promise<Post> => {
+  return ApiService.put<Post>(`/posts/${updatedPost.id}`, updatedPost);
+};
+
+export const deletePost = async (postId: number): Promise<DeletedPost> => {
+  return ApiService.delete(`/posts/${postId}`);
+};
diff --git a/src/final_src/5_entities/post/post.constant.ts b/src/final_src/5_entities/post/post.constant.ts
new file mode 100644
index 000000000..cdbe5654d
--- /dev/null
+++ b/src/final_src/5_entities/post/post.constant.ts
@@ -0,0 +1,4 @@
+export const POST_CONSTANTS = {
+  DEFAULT_LIMIT: 10,
+  DEFAULT_SKIP: 0,
+} as const;
diff --git a/src/final_src/5_entities/post/post.model.ts b/src/final_src/5_entities/post/post.model.ts
new file mode 100644
index 000000000..93e32aeaf
--- /dev/null
+++ b/src/final_src/5_entities/post/post.model.ts
@@ -0,0 +1,5 @@
+// Post 엔티티의 순수한 비즈니스 로직만 포함
+export const postModel = {
+  // Post 관련 순수 함수들만 정의
+  // 다른 엔티티와의 조합 로직은 Features 레이어로 이동
+};
diff --git a/src/final_src/5_entities/post/post.queries.ts b/src/final_src/5_entities/post/post.queries.ts
new file mode 100644
index 000000000..8298c5682
--- /dev/null
+++ b/src/final_src/5_entities/post/post.queries.ts
@@ -0,0 +1,195 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { queryKeys } from '@/shared/lib';
+import { useCachedPostsQueryKey } from '@/shared/lib/hooks/useCachedPostsQueryKey';
+import { MutationProps } from '@/shared/types';
+
+import {
+  createPost,
+  deletePost,
+  getPosts,
+  getPostsBySearch,
+  getPostsByTag,
+  putPost,
+} from './post.api';
+import {
+  BaseFilterParams,
+  GetPostsResponse,
+  ParamsWithSearch,
+  ParamsWithTag,
+  Post,
+} from './post.type';
+
+export const useGetPostsQuery = (params: BaseFilterParams) => {
+  return useQuery({
+    queryKey: queryKeys.posts.list(params),
+    queryFn: () => getPosts(params),
+  });
+};
+
+export const useGetPostsByTagQuery = (params: ParamsWithTag) => {
+  return useQuery({
+    queryKey: queryKeys.posts.list(params),
+    queryFn: () => getPostsByTag(params),
+    enabled: !!params.selectedTag && params.selectedTag !== 'all',
+  });
+};
+
+export const useGetPostsBySearchQuery = (params: ParamsWithSearch) => {
+  return useQuery({
+    queryKey: queryKeys.posts.list(params),
+    queryFn: () => getPostsBySearch(params),
+    enabled: !!params.searchQuery && params.searchQuery.trim() !== '',
+  });
+};
+
+export const useCreatePostMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<Post>) => {
+  const queryClient = useQueryClient();
+  const cachedPostsQueryKey = useCachedPostsQueryKey();
+
+  return useMutation({
+    mutationFn: (newPost: Omit<Post, 'id'>) => createPost(newPost),
+    onMutate: async newPost => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.posts.all,
+      });
+
+      const previousPosts =
+        queryClient.getQueryData<GetPostsResponse>(cachedPostsQueryKey);
+
+      // ! 이전 데이터 캐시에 새 게시물 추가하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(cachedPostsQueryKey, (old: any) => {
+        const postToAdd: Post = {
+          ...newPost,
+          id: previousPosts?.total ? previousPosts.total + 1 : 1,
+        };
+
+        if (!old) {
+          return {
+            posts: [postToAdd],
+            total: 1,
+            skip: 0,
+            limit: 10,
+          };
+        }
+
+        return {
+          ...old,
+          posts: [postToAdd, ...(old.posts || [])],
+        };
+      });
+
+      return { previousPosts };
+    },
+    onError: (error, __, context) => {
+      queryClient.setQueryData(cachedPostsQueryKey, context?.previousPosts);
+      onError?.(error);
+    },
+    onSuccess: (data, _, { previousPosts }) => {
+      // ! 성공 시 이전 데이터에 성공 데이터 추가
+      queryClient.setQueryData(cachedPostsQueryKey, (old: any) => {
+        return {
+          ...old,
+          posts: [data, ...(previousPosts?.posts || [])],
+        };
+      });
+      onSuccess?.(data);
+    },
+  });
+};
+
+export const usePutPostMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<Post>) => {
+  const queryClient = useQueryClient();
+  const cachedPostsQueryKey = useCachedPostsQueryKey();
+
+  return useMutation({
+    mutationFn: (updatedPost: Post) => putPost(updatedPost),
+    onMutate: async updatedPost => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.posts.all,
+      });
+
+      const previousPosts =
+        queryClient.getQueryData<GetPostsResponse>(cachedPostsQueryKey);
+
+      // ! 이전 데이터 캐시에 수정된 게시물 업데이트하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(cachedPostsQueryKey, (old: any) => {
+        if (!old || !old.posts) {
+          return old;
+        }
+
+        return {
+          ...old,
+          posts: old.posts.map((post: Post) =>
+            post.id === updatedPost.id ? updatedPost : post
+          ),
+        };
+      });
+
+      return { previousPosts };
+    },
+    onError: (error, __, context) => {
+      queryClient.setQueryData(cachedPostsQueryKey, context?.previousPosts);
+      onError?.(error);
+    },
+    onSuccess: (data, updatedPost, { previousPosts }) => {
+      // ! 성공 시 이전 데이터에 성공 데이터로 수정
+      queryClient.setQueryData(cachedPostsQueryKey, (old: any) => {
+        return {
+          ...old,
+          posts: previousPosts?.posts.map((post: Post) =>
+            post.id === updatedPost.id ? updatedPost : post
+          ),
+        };
+      });
+      onSuccess?.(data);
+    },
+  });
+};
+
+export const useDeletePostMutation = ({
+  onError,
+  onSuccess,
+}: MutationProps<Post>) => {
+  const queryClient = useQueryClient();
+  const cachedPostsQueryKey = useCachedPostsQueryKey();
+
+  return useMutation({
+    mutationFn: (postId: number) => deletePost(postId),
+    onMutate: async postId => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.posts.all,
+      });
+
+      const previousPosts =
+        queryClient.getQueryData<GetPostsResponse>(cachedPostsQueryKey);
+
+      // ! 이전 데이터 캐시에 삭제된 게시물 제외하여 UI 낙관적 업데이트 선행
+      queryClient.setQueryData(cachedPostsQueryKey, (old: any) => {
+        if (!old || !old.posts) {
+          return old;
+        }
+        return {
+          ...old,
+          posts: old.posts.filter((post: Post) => post.id !== postId),
+        };
+      });
+
+      return { previousPosts };
+    },
+
+    onError: (error, __, context) => {
+      queryClient.setQueryData(cachedPostsQueryKey, context?.previousPosts);
+      onError?.(error);
+    },
+    onSuccess: data => {
+      onSuccess?.(data);
+    },
+  });
+};
diff --git a/src/final_src/5_entities/post/post.type.ts b/src/final_src/5_entities/post/post.type.ts
new file mode 100644
index 000000000..dda18e22c
--- /dev/null
+++ b/src/final_src/5_entities/post/post.type.ts
@@ -0,0 +1,63 @@
+import { EmptyStringable, PaginationMeta, SortOrder } from '@/shared/types';
+
+export interface Post {
+  id: number;
+  title: string;
+  body: string;
+  userId: number;
+  tags?: string[];
+  reactions?: PostReactions;
+}
+
+export interface DeletedPost {
+  id: number;
+  title: string;
+  body: string;
+  tags: string[];
+  reactions: PostReactions;
+  views: number;
+  userId: number;
+  isDeleted: boolean;
+  deletedOn: string;
+}
+
+export interface PostReactions {
+  likes: number;
+  dislikes: number;
+}
+
+export interface GetPostsResponse extends PaginationMeta {
+  posts: Post[];
+}
+
+export interface BaseFilterParams {
+  limit: number;
+  skip: number;
+  sortBy?: EmptyStringable<SORT_BY>;
+  sortOrder?: SortOrder;
+}
+
+export interface AllFilterParams extends BaseFilterParams {
+  searchQuery: EmptyStringable<string>;
+  selectedTag: EmptyStringable<string>;
+}
+
+export interface ParamsWithTag extends BaseFilterParams {
+  selectedTag: EmptyStringable<string>;
+}
+
+export interface ParamsWithSearch extends BaseFilterParams {
+  searchQuery: EmptyStringable<string>;
+}
+
+export enum SORT_ORDER {
+  ASC = 'asc',
+  DESC = 'desc',
+}
+
+export enum SORT_BY {
+  NONE = 'none',
+  ID = 'id',
+  TITLE = 'title',
+  REACTIONS = 'reactions',
+}
diff --git a/src/final_src/5_entities/tag/index.ts b/src/final_src/5_entities/tag/index.ts
new file mode 100644
index 000000000..9673f1651
--- /dev/null
+++ b/src/final_src/5_entities/tag/index.ts
@@ -0,0 +1,3 @@
+export * from './tag.api';
+export * from './tag.queries';
+export * from './tag.type';
diff --git a/src/final_src/5_entities/tag/tag.api.ts b/src/final_src/5_entities/tag/tag.api.ts
new file mode 100644
index 000000000..708f6b900
--- /dev/null
+++ b/src/final_src/5_entities/tag/tag.api.ts
@@ -0,0 +1,6 @@
+import { Tag } from '@/entities/tag';
+import { ApiService } from '@/shared/lib';
+
+export const getTags = async (): Promise<Tag[]> => {
+  return ApiService.get<Tag[]>('/posts/tags');
+};
diff --git a/src/final_src/5_entities/tag/tag.queries.ts b/src/final_src/5_entities/tag/tag.queries.ts
new file mode 100644
index 000000000..c6495791f
--- /dev/null
+++ b/src/final_src/5_entities/tag/tag.queries.ts
@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getTags } from '@/entities/tag';
+import { queryKeys } from '@/shared/lib';
+
+export const useGetTagsQuery = () => {
+  return useQuery({
+    queryKey: queryKeys.tags.lists(),
+    queryFn: getTags,
+  });
+};
diff --git a/src/final_src/5_entities/tag/tag.type.ts b/src/final_src/5_entities/tag/tag.type.ts
new file mode 100644
index 000000000..0d066ec88
--- /dev/null
+++ b/src/final_src/5_entities/tag/tag.type.ts
@@ -0,0 +1,7 @@
+interface Tag {
+  name: string;
+  slug: string;
+  url: string;
+}
+
+export type { Tag };
diff --git a/src/final_src/5_entities/user/index.ts b/src/final_src/5_entities/user/index.ts
new file mode 100644
index 000000000..ae6eaea64
--- /dev/null
+++ b/src/final_src/5_entities/user/index.ts
@@ -0,0 +1,3 @@
+export * from './user.type';
+export * from './user.api';
+export * from './user.queries';
diff --git a/src/final_src/5_entities/user/user.api.ts b/src/final_src/5_entities/user/user.api.ts
new file mode 100644
index 000000000..bb1a85140
--- /dev/null
+++ b/src/final_src/5_entities/user/user.api.ts
@@ -0,0 +1,36 @@
+import { User, UserPick } from '@/entities/user';
+import { ApiService } from '@/shared/lib';
+import { PaginationMeta } from '@/shared/types';
+
+export interface GetUsersResponse<T> extends PaginationMeta {
+  users: T[];
+}
+
+export interface GetUsersParams<K extends keyof User> {
+  limit: number;
+  select: K[];
+}
+
+// select에 따라 UserPick 타입을 동적으로 만들 수 없으므로,
+// 반환 타입을 런타임에 맞게 제네릭으로 받도록 getUsers를 제네릭 함수로 변경합니다.
+
+export const getUsers = async <K extends keyof User>({
+  limit,
+  select,
+}: GetUsersParams<K>): Promise<GetUsersResponse<UserPick<K>>> => {
+  const params = {
+    limit: limit.toString(),
+    select: select.join(','),
+  };
+  return ApiService.get<GetUsersResponse<UserPick<K>>>('/users', params);
+};
+
+export const postUser = async () => {};
+
+export const putUser = async () => {};
+
+export const deleteUser = async () => {};
+
+export const getUser = async (userId: number): Promise<User> => {
+  return ApiService.get<User>(`/users/${userId}`);
+};
diff --git a/src/final_src/5_entities/user/user.constant.ts b/src/final_src/5_entities/user/user.constant.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/final_src/5_entities/user/user.model.ts b/src/final_src/5_entities/user/user.model.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/final_src/5_entities/user/user.queries.ts b/src/final_src/5_entities/user/user.queries.ts
new file mode 100644
index 000000000..0921cf30f
--- /dev/null
+++ b/src/final_src/5_entities/user/user.queries.ts
@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getUser, getUsers, GetUsersParams, User } from '@/entities/user';
+import { queryKeys } from '@/shared/lib';
+import { Nullable } from '@/shared/types';
+
+export const useGetUsersQuery = <K extends keyof User>(
+  params: GetUsersParams<K>
+) => {
+  return useQuery({
+    queryKey: queryKeys.users.list(params),
+    queryFn: () => getUsers(params),
+  });
+};
+
+export const useGetUserQuery = (userId: Nullable<number>) => {
+  return useQuery({
+    queryKey: queryKeys.users.detail(userId ?? 0),
+    queryFn: () => getUser(userId ?? 0),
+    enabled: !!userId,
+  });
+};
diff --git a/src/final_src/5_entities/user/user.type.ts b/src/final_src/5_entities/user/user.type.ts
new file mode 100644
index 000000000..d4a23b87e
--- /dev/null
+++ b/src/final_src/5_entities/user/user.type.ts
@@ -0,0 +1,24 @@
+export interface BaseUser {
+  id: number;
+  image: string;
+  username: string;
+}
+
+export interface User extends BaseUser {
+  firstName: string;
+  lastName: string;
+  age: number;
+  email: string;
+  phone: string;
+  address: {
+    address: string;
+    city: string;
+    state: string;
+  };
+  company: {
+    name: string;
+    title: string;
+  };
+}
+
+export type UserPick<T extends keyof User> = Pick<User, T>;
diff --git a/src/final_src/6_shared/api/axios.ts b/src/final_src/6_shared/api/axios.ts
new file mode 100644
index 000000000..a7459b1e0
--- /dev/null
+++ b/src/final_src/6_shared/api/axios.ts
@@ -0,0 +1,9 @@
+import axios from 'axios';
+
+export const axiosInstance = axios.create({
+  baseURL: '/api',
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
diff --git a/src/final_src/6_shared/assets/react.svg b/src/final_src/6_shared/assets/react.svg
new file mode 100644
index 000000000..6c87de9bb
--- /dev/null
+++ b/src/final_src/6_shared/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/src/final_src/6_shared/constants/api.ts b/src/final_src/6_shared/constants/api.ts
new file mode 100644
index 000000000..ab201b693
--- /dev/null
+++ b/src/final_src/6_shared/constants/api.ts
@@ -0,0 +1,19 @@
+/**
+ * API 관련 상수 정의
+ *
+ * API 엔드포인트, 기본값, 쿼리 파라미터 등을 관리
+ */
+
+export const API_CONSTANTS = {
+  // 기본 사용자 ID
+  DEFAULT_USER_ID: 1,
+
+  // 기본 반응 수치
+  REACTIONS: {
+    DEFAULT_LIKES: 0,
+    DEFAULT_DISLIKES: 0,
+    LIKE_INCREMENT: 1,
+  },
+} as const;
+
+export type APIConstants = typeof API_CONSTANTS;
diff --git a/src/final_src/6_shared/constants/index.ts b/src/final_src/6_shared/constants/index.ts
new file mode 100644
index 000000000..beadb7376
--- /dev/null
+++ b/src/final_src/6_shared/constants/index.ts
@@ -0,0 +1,2 @@
+export * from './ui';
+export * from './api';
diff --git a/src/final_src/6_shared/constants/ui.ts b/src/final_src/6_shared/constants/ui.ts
new file mode 100644
index 000000000..4445d87b7
--- /dev/null
+++ b/src/final_src/6_shared/constants/ui.ts
@@ -0,0 +1,45 @@
+/**
+ * UI 관련 상수 정의
+ *
+ * 전역적으로 사용되는 UI 요소들의 크기, 스타일, 설정값 등을 관리
+ */
+
+export const UI_CONSTANTS = {
+  // 텍스트 영역 행 수
+  TEXTAREA_ROWS: {
+    LARGE: 30, // 게시물 작성용
+    MEDIUM: 15, // 게시물 수정용
+    SMALL: 5, // 댓글 작성용
+  },
+
+  // 아이콘 크기 (Tailwind CSS 클래스)
+  ICON_SIZES: {
+    SMALL: 'w-3 h-3', // 댓글 버튼용
+    MEDIUM: 'w-4 h-4', // 일반 버튼용
+    LARGE: 'w-8 h-8', // 프로필 이미지용
+  },
+
+  // 페이지네이션 설정
+  PAGINATION: {
+    DEFAULT_LIMIT: 10,
+    DEFAULT_SKIP: 0,
+    LIMIT_OPTIONS: [10, 20, 30] as const,
+  },
+
+  // 스타일링 관련
+  STYLES: {
+    TAG_SELECTED: 'text-white bg-blue-500 hover:bg-blue-600',
+    TAG_DEFAULT: 'text-blue-800 bg-blue-100 hover:bg-blue-200',
+    TAG_SIZE: 'px-1 text-[9px] font-semibold rounded-[4px] cursor-pointer',
+  },
+
+  // 레이아웃 관련
+  LAYOUT: {
+    SPACE_Y_1: 'space-y-1',
+    SPACE_Y_2: 'space-y-2',
+    FLEX_GAP_1: 'gap-1',
+    FLEX_GAP_2: 'gap-2',
+  },
+} as const;
+
+export type UIConstants = typeof UI_CONSTANTS;
diff --git a/src/final_src/6_shared/lib/api/apiService.ts b/src/final_src/6_shared/lib/api/apiService.ts
new file mode 100644
index 000000000..db45dffb6
--- /dev/null
+++ b/src/final_src/6_shared/lib/api/apiService.ts
@@ -0,0 +1,23 @@
+import { apiClient } from './axios';
+
+export const ApiService = {
+  get: async <T>(url: string, params?: Record<string, any>): Promise<T> => {
+    const response = await apiClient.get<T>(url, { params });
+    return response.data;
+  },
+
+  post: async <T>(url: string, data?: any): Promise<T> => {
+    const response = await apiClient.post<T>(url, data);
+    return response.data;
+  },
+
+  put: async <T>(url: string, data?: any): Promise<T> => {
+    const response = await apiClient.put<T>(url, data);
+    return response.data;
+  },
+
+  delete: async <T>(url: string): Promise<T> => {
+    const response = await apiClient.delete<T>(url);
+    return response.data;
+  },
+};
diff --git a/src/final_src/6_shared/lib/api/axios.ts b/src/final_src/6_shared/lib/api/axios.ts
new file mode 100644
index 000000000..975c604e9
--- /dev/null
+++ b/src/final_src/6_shared/lib/api/axios.ts
@@ -0,0 +1,12 @@
+import axios from 'axios';
+
+const baseURL = 'https://dummyjson.com';
+
+// 기본 axios 인스턴스 생성
+export const apiClient = axios.create({
+  baseURL,
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
diff --git a/src/final_src/6_shared/lib/api/index.ts b/src/final_src/6_shared/lib/api/index.ts
new file mode 100644
index 000000000..9e8a50de0
--- /dev/null
+++ b/src/final_src/6_shared/lib/api/index.ts
@@ -0,0 +1,2 @@
+export { apiClient } from './axios';
+export { ApiService } from './apiService';
diff --git a/src/final_src/6_shared/lib/hooks/index.ts b/src/final_src/6_shared/lib/hooks/index.ts
new file mode 100644
index 000000000..5a6a3c3ed
--- /dev/null
+++ b/src/final_src/6_shared/lib/hooks/index.ts
@@ -0,0 +1,3 @@
+export * from './useCachedPostsQueryKey';
+export * from './usePostsFilterStore';
+export * from './useDebounce';
diff --git a/src/final_src/6_shared/lib/hooks/useCachedPostsQueryKey.ts b/src/final_src/6_shared/lib/hooks/useCachedPostsQueryKey.ts
new file mode 100644
index 000000000..7ef629d11
--- /dev/null
+++ b/src/final_src/6_shared/lib/hooks/useCachedPostsQueryKey.ts
@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+
+import {
+  AllFilterParams,
+  BaseFilterParams,
+  ParamsWithSearch,
+  ParamsWithTag,
+} from '@/entities/post';
+
+import { queryKeys } from '../query/queryKeys';
+import { POST_QUERY_TYPE } from '../store/postsFilterStore';
+import { usePostsFilterStore } from './usePostsFilterStore';
+
+export const useCachedPostsQueryKey = () => {
+  const {
+    queryType,
+    filters: { searchQuery, selectedTag, sortBy, sortOrder },
+    pagination: { limit, skip },
+  } = usePostsFilterStore();
+
+  const [params, setParams] = useState<Partial<AllFilterParams>>({
+    limit,
+    skip,
+    sortBy,
+    sortOrder,
+  });
+
+  useEffect(() => {
+    if (queryType === POST_QUERY_TYPE.SEARCH) {
+      const paramsWithSearch: ParamsWithSearch = {
+        limit,
+        skip,
+        sortBy,
+        sortOrder,
+        searchQuery,
+      };
+      setParams(paramsWithSearch);
+      return;
+    }
+
+    if (queryType === POST_QUERY_TYPE.TAG) {
+      const paramsWithTag: ParamsWithTag = {
+        limit,
+        skip,
+        sortBy,
+        sortOrder,
+        selectedTag,
+      };
+      setParams(paramsWithTag);
+      return;
+    }
+
+    const baseParams: BaseFilterParams = {
+      limit,
+      skip,
+      sortBy,
+      sortOrder,
+    };
+    setParams(baseParams);
+  }, [queryType, limit, skip, sortBy, sortOrder, searchQuery, selectedTag]);
+
+  return queryKeys.posts.list(params);
+};
diff --git a/src/final_src/6_shared/lib/hooks/useDebounce.ts b/src/final_src/6_shared/lib/hooks/useDebounce.ts
new file mode 100644
index 000000000..f737f854a
--- /dev/null
+++ b/src/final_src/6_shared/lib/hooks/useDebounce.ts
@@ -0,0 +1,23 @@
+import { useCallback, useRef } from 'react';
+
+export const useDebounce = <T extends (...args: any[]) => any>(
+  callback: T,
+  delay: number
+) => {
+  const timeoutRef = useRef<number | undefined>(undefined);
+
+  const debouncedCallback = useCallback(
+    (...args: Parameters<T>) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      timeoutRef.current = window.setTimeout(() => {
+        callback(...args);
+      }, delay);
+    },
+    [callback, delay]
+  );
+
+  return debouncedCallback;
+};
diff --git a/src/final_src/6_shared/lib/hooks/usePostsFilterStore.ts b/src/final_src/6_shared/lib/hooks/usePostsFilterStore.ts
new file mode 100644
index 000000000..1cff6398b
--- /dev/null
+++ b/src/final_src/6_shared/lib/hooks/usePostsFilterStore.ts
@@ -0,0 +1,71 @@
+import { useEffect } from 'react';
+
+import { useAtom } from 'jotai';
+
+import {
+  filtersAtom,
+  limitAtom,
+  paginationAtom,
+  queryTypeAtom,
+  searchQueryAtom,
+  selectedTagAtom,
+  skipAtom,
+  sortByAtom,
+  sortOrderAtom,
+  useURLSync,
+} from '../store/postsFilterStore';
+
+export const usePostsFilterStore = () => {
+  const [queryType, setQueryType] = useAtom(queryTypeAtom);
+  const [searchQuery, setSearchQuery] = useAtom(searchQueryAtom);
+  const [selectedTag, setSelectedTag] = useAtom(selectedTagAtom);
+  const [sortBy, setSortBy] = useAtom(sortByAtom);
+  const [sortOrder, setSortOrder] = useAtom(sortOrderAtom);
+  const [skip, setSkip] = useAtom(skipAtom);
+  const [limit, setLimit] = useAtom(limitAtom);
+  const [pagination, setPagination] = useAtom(paginationAtom);
+  const [filters, setFilters] = useAtom(filtersAtom);
+
+  const { updateURL, syncFromURL } = useURLSync();
+
+  // 컴포넌트 마운트 시 URL에서 상태 복원
+  useEffect(() => {
+    syncFromURL();
+  }, []);
+
+  // 필터 상태 변경 시 URL 업데이트
+  useEffect(() => {
+    updateURL();
+  }, [searchQuery, selectedTag, sortBy, sortOrder, skip, limit]);
+
+  // 브라우저 뒤로가기/앞으로가기 처리
+  useEffect(() => {
+    const handlePopState = () => {
+      syncFromURL();
+    };
+
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, []);
+
+  return {
+    queryType,
+    setQueryType,
+    searchQuery,
+    setSearchQuery,
+    selectedTag,
+    setSelectedTag,
+    sortBy,
+    setSortBy,
+    sortOrder,
+    setSortOrder,
+    skip,
+    setSkip,
+    limit,
+    setLimit,
+    pagination,
+    setPagination,
+    filters,
+    setFilters,
+  };
+};
diff --git a/src/final_src/6_shared/lib/index.ts b/src/final_src/6_shared/lib/index.ts
new file mode 100644
index 000000000..6fa5065a2
--- /dev/null
+++ b/src/final_src/6_shared/lib/index.ts
@@ -0,0 +1,14 @@
+// API - HTTP 클라이언트 및 API 관련 유틸리티
+export * from './api';
+
+// Hooks - 재사용 가능한 커스텀 훅
+export * from './hooks';
+
+// Query - React Query 관련 설정 및 유틸리티
+export * from './query';
+
+// Store - 상태 관리 관련 설정 및 스토어
+export * from './store';
+
+// Utils - 공통 유틸리티 함수
+export * from './utils';
diff --git a/src/final_src/6_shared/lib/query/index.ts b/src/final_src/6_shared/lib/query/index.ts
new file mode 100644
index 000000000..e08035cc8
--- /dev/null
+++ b/src/final_src/6_shared/lib/query/index.ts
@@ -0,0 +1 @@
+export * from './queryKeys';
diff --git a/src/final_src/6_shared/lib/query/queryKeys.ts b/src/final_src/6_shared/lib/query/queryKeys.ts
new file mode 100644
index 000000000..6e5eb276d
--- /dev/null
+++ b/src/final_src/6_shared/lib/query/queryKeys.ts
@@ -0,0 +1,55 @@
+import { AllFilterParams } from '@/entities/post';
+import { GetUsersParams, User } from '@/entities/user';
+
+export const QUERY_DOMAINS = {
+  POSTS: 'posts',
+  USERS: 'users',
+  COMMENTS: 'comments',
+  TAGS: 'tags',
+} as const;
+
+export const QUERY_OPERATIONS = {
+  LIST: 'list',
+  DETAIL: 'detail',
+  INFINITE: 'infinite',
+  SEARCH: 'search',
+  COUNT: 'count',
+} as const;
+
+const postQueryKeys = {
+  all: [QUERY_DOMAINS.POSTS] as const,
+
+  lists: () => [QUERY_DOMAINS.POSTS, QUERY_OPERATIONS.LIST] as const,
+  list: (params: Partial<AllFilterParams>) =>
+    [...postQueryKeys.lists(), params] as const,
+} as const;
+
+const userQueryKeys = {
+  all: [QUERY_DOMAINS.USERS] as const,
+
+  lists: () => [QUERY_DOMAINS.USERS, QUERY_OPERATIONS.LIST] as const,
+  list: (params: GetUsersParams<keyof User>) =>
+    [QUERY_DOMAINS.USERS, QUERY_OPERATIONS.LIST, params] as const,
+  details: () => [...userQueryKeys.lists(), 'detail'] as const,
+  detail: (userId: number) => [...userQueryKeys.details(), userId] as const,
+} as const;
+
+const tagQueryKeys = {
+  all: [QUERY_DOMAINS.TAGS] as const,
+
+  lists: () => [QUERY_DOMAINS.TAGS, QUERY_OPERATIONS.LIST] as const,
+} as const;
+
+const commentQueryKeys = {
+  all: [QUERY_DOMAINS.COMMENTS] as const,
+
+  lists: () => [QUERY_DOMAINS.COMMENTS, QUERY_OPERATIONS.LIST] as const,
+  list: (postId: number) => [...commentQueryKeys.lists(), postId] as const,
+} as const;
+
+export const queryKeys = {
+  posts: postQueryKeys,
+  users: userQueryKeys,
+  tags: tagQueryKeys,
+  comments: commentQueryKeys,
+} as const;
diff --git a/src/final_src/6_shared/lib/store/UIStore.ts b/src/final_src/6_shared/lib/store/UIStore.ts
new file mode 100644
index 000000000..8711ce404
--- /dev/null
+++ b/src/final_src/6_shared/lib/store/UIStore.ts
@@ -0,0 +1,134 @@
+import { atom, useAtom } from 'jotai';
+
+import { Comment } from '@/entities/comment';
+import { Post } from '@/entities/post';
+import { User } from '@/entities/user';
+import { Nullable } from '@/shared/types';
+
+export interface UIState {
+  showAddDialog: boolean;
+  showEditDialog: boolean;
+  showAddCommentDialog: boolean;
+  showEditCommentDialog: boolean;
+  showPostDetailDialog: boolean;
+  showUserModifyDialog: boolean;
+  selectedPost: Nullable<Post>;
+  selectedComment: Nullable<Comment>;
+  selectedUser: Nullable<Partial<User>>;
+}
+
+const initialUIState: UIState = {
+  showAddDialog: false,
+  showEditDialog: false,
+  showAddCommentDialog: false,
+  showEditCommentDialog: false,
+  showPostDetailDialog: false,
+  showUserModifyDialog: false,
+  selectedPost: null,
+  selectedComment: null,
+  selectedUser: null,
+};
+
+export const dialogAtom = atom<UIState>(initialUIState);
+
+const showAddDialogAtom = atom(
+  get => get(dialogAtom).showAddDialog,
+  (get, set, newValue: boolean) => {
+    set(dialogAtom, { ...get(dialogAtom), showAddDialog: newValue });
+  }
+);
+
+const showEditDialogAtom = atom(
+  get => get(dialogAtom).showEditDialog,
+  (get, set, newValue: boolean) => {
+    set(dialogAtom, { ...get(dialogAtom), showEditDialog: newValue });
+  }
+);
+
+const showAddCommentDialogAtom = atom(
+  get => get(dialogAtom).showAddCommentDialog,
+  (get, set, newValue: boolean) => {
+    set(dialogAtom, { ...get(dialogAtom), showAddCommentDialog: newValue });
+  }
+);
+
+const showEditCommentDialogAtom = atom(
+  get => get(dialogAtom).showEditCommentDialog,
+  (get, set, newValue: boolean) => {
+    set(dialogAtom, { ...get(dialogAtom), showEditCommentDialog: newValue });
+  }
+);
+
+const showPostDetailDialogAtom = atom(
+  get => get(dialogAtom).showPostDetailDialog,
+  (get, set, newValue: boolean) => {
+    set(dialogAtom, { ...get(dialogAtom), showPostDetailDialog: newValue });
+  }
+);
+
+const showUserModalAtom = atom(
+  get => get(dialogAtom).showUserModifyDialog,
+  (get, set, newValue: boolean) => {
+    set(dialogAtom, { ...get(dialogAtom), showUserModifyDialog: newValue });
+  }
+);
+
+const selectedPostAtom = atom(
+  get => get(dialogAtom).selectedPost,
+  (get, set, newValue: Nullable<Post>) => {
+    set(dialogAtom, { ...get(dialogAtom), selectedPost: newValue });
+  }
+);
+
+const selectedCommentAtom = atom(
+  get => get(dialogAtom).selectedComment,
+  (get, set, newValue: Nullable<Comment>) => {
+    set(dialogAtom, { ...get(dialogAtom), selectedComment: newValue });
+  }
+);
+
+const selectedUserAtom = atom(
+  get => get(dialogAtom).selectedUser,
+  (get, set, newValue: Nullable<User>) => {
+    set(dialogAtom, { ...get(dialogAtom), selectedUser: newValue });
+  }
+);
+
+export const useUIStore = () => {
+  const [showAddDialog, setShowAddDialog] = useAtom(showAddDialogAtom);
+  const [showEditDialog, setShowEditDialog] = useAtom(showEditDialogAtom);
+  const [showAddCommentDialog, setShowAddCommentDialog] = useAtom(
+    showAddCommentDialogAtom
+  );
+  const [showEditCommentDialog, setShowEditCommentDialog] = useAtom(
+    showEditCommentDialogAtom
+  );
+  const [showPostDetailDialog, setShowPostDetailDialog] = useAtom(
+    showPostDetailDialogAtom
+  );
+  const [showUserModal, setShowUserModal] = useAtom(showUserModalAtom);
+  const [selectedPost, setSelectedPost] = useAtom(selectedPostAtom);
+  const [selectedComment, setSelectedComment] = useAtom(selectedCommentAtom);
+  const [selectedUser, setSelectedUser] = useAtom(selectedUserAtom);
+
+  return {
+    showAddDialog,
+    setShowAddDialog,
+    showEditDialog,
+    setShowEditDialog,
+    showAddCommentDialog,
+    setShowAddCommentDialog,
+    showEditCommentDialog,
+    setShowEditCommentDialog,
+    showPostDetailDialog,
+    setShowPostDetailDialog,
+    showUserModal,
+    setShowUserModal,
+    selectedPost,
+    setSelectedPost,
+    selectedComment,
+    setSelectedComment,
+    selectedUser,
+    setSelectedUser,
+  };
+};
diff --git a/src/final_src/6_shared/lib/store/index.ts b/src/final_src/6_shared/lib/store/index.ts
new file mode 100644
index 000000000..8b3807bec
--- /dev/null
+++ b/src/final_src/6_shared/lib/store/index.ts
@@ -0,0 +1,2 @@
+export * from './postsFilterStore';
+export * from './UIStore';
diff --git a/src/final_src/6_shared/lib/store/postsFilterStore.ts b/src/final_src/6_shared/lib/store/postsFilterStore.ts
new file mode 100644
index 000000000..2eb7515d1
--- /dev/null
+++ b/src/final_src/6_shared/lib/store/postsFilterStore.ts
@@ -0,0 +1,223 @@
+import { atom, useAtom } from 'jotai';
+
+import { AllFilterParams, SORT_BY } from '@/entities/post';
+import { UI_CONSTANTS } from '@/shared/constants';
+import { EmptyStringable, PaginationMeta, SortOrder } from '@/shared/types';
+
+export enum POST_QUERY_TYPE {
+  BASE = 'base',
+  SEARCH = 'search',
+  TAG = 'tag',
+}
+
+export interface PostsFilterState {
+  queryType: POST_QUERY_TYPE;
+  filters: Omit<AllFilterParams, 'limit' | 'skip'>;
+  pagination: {
+    limit: number;
+    skip: number;
+    total: number;
+  };
+}
+
+const initialFilterState: PostsFilterState = {
+  queryType: POST_QUERY_TYPE.BASE,
+  filters: {
+    searchQuery: '',
+    selectedTag: '',
+    sortBy: '',
+    sortOrder: SortOrder.ASC,
+  },
+  pagination: {
+    limit: UI_CONSTANTS.PAGINATION.DEFAULT_LIMIT,
+    skip: UI_CONSTANTS.PAGINATION.DEFAULT_SKIP,
+    total: 0,
+  },
+};
+
+// URL에서 초기 상태를 읽어오는 함수
+const getInitialStateFromURL = (): PostsFilterState => {
+  if (typeof window === 'undefined') return initialFilterState;
+
+  const params = new URLSearchParams(window.location.search);
+  return {
+    queryType: POST_QUERY_TYPE.BASE,
+    filters: {
+      searchQuery: params.get('search') || '',
+      selectedTag: params.get('tag') || '',
+      sortBy: (params.get('sortBy') as SORT_BY) || '',
+      sortOrder: (params.get('sortOrder') as SortOrder) || SortOrder.ASC,
+    },
+    pagination: {
+      skip: parseInt(params.get('skip') || '0'),
+      limit: parseInt(params.get('limit') || '10'),
+      total: parseInt(params.get('total') || '0'),
+    },
+  };
+};
+
+export const postsFilterAtom = atom<PostsFilterState>(getInitialStateFromURL());
+
+// 개별 필터 atoms (더 세밀한 제어를 위해)
+export const searchQueryAtom = atom(
+  get => get(postsFilterAtom).filters.searchQuery,
+  (get, set, newValue: string) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      filters: {
+        ...get(postsFilterAtom).filters,
+        searchQuery: newValue,
+      },
+    });
+  }
+);
+
+export const selectedTagAtom = atom(
+  get => get(postsFilterAtom).filters.selectedTag,
+  (get, set, newValue: string) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      filters: {
+        ...get(postsFilterAtom).filters,
+        selectedTag: newValue,
+      },
+    });
+  }
+);
+
+export const sortByAtom = atom(
+  get => get(postsFilterAtom).filters.sortBy,
+  (get, set, newValue: EmptyStringable<SORT_BY>) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      filters: {
+        ...get(postsFilterAtom).filters,
+        sortBy: newValue,
+      },
+    });
+  }
+);
+
+export const sortOrderAtom = atom(
+  get => get(postsFilterAtom).filters.sortOrder,
+  (get, set, newValue: SortOrder) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      filters: {
+        ...get(postsFilterAtom).filters,
+        sortOrder: newValue,
+      },
+    });
+  }
+);
+
+export const limitAtom = atom(
+  get => get(postsFilterAtom).pagination.limit,
+  (get, set, newValue: number) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      pagination: {
+        ...get(postsFilterAtom).pagination,
+        limit: newValue,
+      },
+    });
+  }
+);
+
+export const skipAtom = atom(
+  get => get(postsFilterAtom).pagination.skip,
+  (get, set, newValue: number) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      pagination: {
+        ...get(postsFilterAtom).pagination,
+        skip: newValue,
+      },
+    });
+  }
+);
+
+export const resetFiltersAtom = atom(null, (_, set) => {
+  set(postsFilterAtom, initialFilterState);
+});
+
+export const paginationAtom = atom(
+  get => get(postsFilterAtom).pagination,
+  (get, set, newValue: PaginationMeta) => {
+    set(postsFilterAtom, {
+      ...get(postsFilterAtom),
+      pagination: newValue,
+    });
+  }
+);
+
+export const filtersAtom = atom(
+  get => get(postsFilterAtom).filters,
+  (get, set, newValue: AllFilterParams) => {
+    set(postsFilterAtom, { ...get(postsFilterAtom), filters: newValue });
+  }
+);
+
+export const queryTypeAtom = atom(
+  get => get(postsFilterAtom).queryType,
+  (get, set, newValue: POST_QUERY_TYPE) => {
+    set(postsFilterAtom, { ...get(postsFilterAtom), queryType: newValue });
+  }
+);
+
+// URL 동기화를 위한 atom
+export const urlSyncAtom = atom(
+  get => {
+    const filter = get(postsFilterAtom);
+    const params = new URLSearchParams();
+
+    const { searchQuery, selectedTag, sortBy, sortOrder } = filter.filters;
+    const { skip, limit } = filter.pagination;
+
+    if (skip > 0) params.set('skip', skip.toString());
+    if (limit !== 10) params.set('limit', limit.toString());
+    if (searchQuery) params.set('search', searchQuery);
+    if (sortBy) params.set('sortBy', sortBy);
+    if (sortOrder) params.set('sortOrder', sortOrder);
+    if (selectedTag) params.set('tag', selectedTag);
+
+    return params.toString();
+  },
+  (_, set, urlParams: string) => {
+    const params = new URLSearchParams(urlParams);
+    const newState: PostsFilterState = {
+      queryType: POST_QUERY_TYPE.BASE,
+      filters: {
+        searchQuery: params.get('search') || '',
+        selectedTag: params.get('tag') || '',
+        sortBy: (params.get('sortBy') as SORT_BY) || '',
+        sortOrder: (params.get('sortOrder') as SortOrder) || SortOrder.ASC,
+      },
+      pagination: {
+        skip: parseInt(params.get('skip') || '0'),
+        limit: parseInt(params.get('limit') || '10'),
+        total: parseInt(params.get('total') || '0'),
+      },
+    };
+
+    set(postsFilterAtom, newState);
+  }
+);
+
+export const useURLSync = () => {
+  const [urlSync, setUrlSync] = useAtom(urlSyncAtom);
+
+  const updateURL = () => {
+    const newURL = `${window.location.pathname}?${urlSync}`;
+    window.history.pushState({}, '', newURL);
+  };
+
+  const syncFromURL = () => {
+    const currentParams = window.location.search;
+    if (currentParams) {
+      setUrlSync(currentParams.substring(1));
+    }
+  };
+
+  return { updateURL, syncFromURL };
+};
diff --git a/src/final_src/6_shared/lib/utils/index.ts b/src/final_src/6_shared/lib/utils/index.ts
new file mode 100644
index 000000000..0926742d1
--- /dev/null
+++ b/src/final_src/6_shared/lib/utils/index.ts
@@ -0,0 +1,2 @@
+export * from './url.util';
+export * from './ui.util';
diff --git a/src/final_src/6_shared/lib/utils/ui.util.tsx b/src/final_src/6_shared/lib/utils/ui.util.tsx
new file mode 100644
index 000000000..07db97a45
--- /dev/null
+++ b/src/final_src/6_shared/lib/utils/ui.util.tsx
@@ -0,0 +1,21 @@
+export const highlightText = (text: string, highlight: string) => {
+  if (!text) return null;
+  if (!highlight.trim()) {
+    return <span>{text}</span>;
+  }
+
+  const regex = new RegExp(`(${highlight})`, 'gi');
+  const parts = text.split(regex);
+
+  return (
+    <span>
+      {parts.map((part, i) =>
+        regex.test(part) ? (
+          <mark key={i}>{part}</mark>
+        ) : (
+          <span key={i}>{part}</span>
+        )
+      )}
+    </span>
+  );
+};
diff --git a/src/final_src/6_shared/lib/utils/url.util.ts b/src/final_src/6_shared/lib/utils/url.util.ts
new file mode 100644
index 000000000..3f3f3c7b6
--- /dev/null
+++ b/src/final_src/6_shared/lib/utils/url.util.ts
@@ -0,0 +1,3 @@
+export const getUrlParams = (params: Record<string, string>) => {
+  return new URLSearchParams(params).toString();
+};
diff --git a/src/final_src/6_shared/types/api.type.ts b/src/final_src/6_shared/types/api.type.ts
new file mode 100644
index 000000000..81d16a56e
--- /dev/null
+++ b/src/final_src/6_shared/types/api.type.ts
@@ -0,0 +1,16 @@
+export interface PaginationMeta {
+  total: number;
+  skip: number;
+  limit: number;
+}
+
+export interface MutationProps<T> {
+  onError?: (error: Error) => void;
+  onSuccess?: (data: T) => void;
+}
+
+export interface ApiResponse<T> {
+  data: T;
+  message?: string;
+  code?: string;
+}
diff --git a/src/final_src/6_shared/types/index.ts b/src/final_src/6_shared/types/index.ts
new file mode 100644
index 000000000..f132a0e22
--- /dev/null
+++ b/src/final_src/6_shared/types/index.ts
@@ -0,0 +1,2 @@
+export * from './api.type';
+export * from './utility.type';
diff --git a/src/final_src/6_shared/types/utility.type.ts b/src/final_src/6_shared/types/utility.type.ts
new file mode 100644
index 000000000..620d835c2
--- /dev/null
+++ b/src/final_src/6_shared/types/utility.type.ts
@@ -0,0 +1,46 @@
+/**
+ * 공통으로 사용되는 유틸리티 타입들
+ */
+
+/**
+ * T 또는 null을 허용하는 타입
+ */
+export type Nullable<T> = T | null;
+
+export type EmptyStringable<T> = T | '';
+
+/**
+ * T 또는 undefined를 허용하는 타입
+ */
+export type Undefinable<T> = T | undefined;
+
+/**
+ * T, null, undefined 모두 허용하는 타입
+ */
+export type Optional<T> = T | null | undefined;
+
+/**
+ * 객체의 모든 속성을 옵셔널로 만드는 타입 (Partial과 유사하지만 명시적)
+ */
+export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+
+/**
+ * 객체의 특정 속성을 필수로 만드는 타입
+ */
+export type RequiredBy<T, K extends keyof T> = T & Required<Pick<T, K>>;
+
+/**
+ * 배열 타입에서 단일 요소 타입 추출
+ */
+export type ArrayElement<T extends readonly unknown[]> =
+  T extends readonly (infer U)[] ? U : never;
+
+/**
+ * 함수의 반환 타입이 Promise인 경우 래핑된 타입 추출
+ */
+export type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
+
+export enum SortOrder {
+  ASC = 'asc',
+  DESC = 'desc',
+}
diff --git a/src/final_src/6_shared/ui/controls/Button.tsx b/src/final_src/6_shared/ui/controls/Button.tsx
new file mode 100644
index 000000000..a99d86cc9
--- /dev/null
+++ b/src/final_src/6_shared/ui/controls/Button.tsx
@@ -0,0 +1,62 @@
+import { cva, VariantProps } from 'class-variance-authority';
+
+/**
+ * 버튼 컴포넌트 variant 정의
+ * - CVA를 사용한 조건부 스타일링
+ * - variant: 용도별 스타일 (default, destructive, outline, secondary, ghost, link)
+ * - size: 크기별 스타일 (default, sm, lg, icon)
+ * - 접근성 기본 스타일 포함 (focus-visible, disabled)
+ */
+
+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;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export const Button = ({
+  variant,
+  size,
+  className,
+  children,
+  onClick,
+  ...props
+}: ButtonProps) => {
+  return (
+    <button
+      className={buttonVariants({ variant, size, className })}
+      onClick={onClick}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
diff --git a/src/final_src/6_shared/ui/data/Table.tsx b/src/final_src/6_shared/ui/data/Table.tsx
new file mode 100644
index 000000000..2646e0e04
--- /dev/null
+++ b/src/final_src/6_shared/ui/data/Table.tsx
@@ -0,0 +1,99 @@
+import { forwardRef } from 'react';
+
+/**
+ * 테이블 컴포넌트 계열
+ * - 데이터를 구조화된 표 형태로 표시하는 컴포넌트들
+ * - Table, TableHeader, TableBody, TableRow, TableHead, TableCell로 구성
+ * - 반응형 스크롤 지원과 일관된 스타일링 제공
+ */
+
+interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+  className?: string;
+}
+
+export const Table = forwardRef<HTMLTableElement, TableProps>(
+  ({ 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';
+
+interface TableHeaderProps
+  extends React.HTMLAttributes<HTMLTableSectionElement> {
+  className?: string;
+}
+
+export const TableHeader = forwardRef<
+  HTMLTableSectionElement,
+  TableHeaderProps
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={`[&_tr]:border-b ${className}`} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
+
+interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+  className?: string;
+}
+
+export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
+  ({ className, ...props }, ref) => (
+    <tbody
+      ref={ref}
+      className={`[&_tr:last-child]:border-0 ${className}`}
+      {...props}
+    />
+  )
+);
+TableBody.displayName = 'TableBody';
+
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  className?: string;
+}
+
+export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
+  ({ 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';
+
+interface TableHeadProps
+  extends React.HTMLAttributes<HTMLTableHeaderCellElement> {
+  className?: string;
+}
+
+export const TableHead = forwardRef<HTMLTableHeaderCellElement, TableHeadProps>(
+  ({ 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';
+
+interface TableCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+  className?: string;
+}
+
+export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
+  ({ 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/final_src/6_shared/ui/feedback/LoadingSpinner.tsx b/src/final_src/6_shared/ui/feedback/LoadingSpinner.tsx
new file mode 100644
index 000000000..2248d17e1
--- /dev/null
+++ b/src/final_src/6_shared/ui/feedback/LoadingSpinner.tsx
@@ -0,0 +1,28 @@
+import { Loader2 } from 'lucide-react';
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  text?: string;
+}
+
+const sizeClasses = {
+  sm: 'w-4 h-4',
+  md: 'w-6 h-6',
+  lg: 'w-8 h-8',
+};
+
+export const LoadingSpinner = ({
+  size = 'md',
+  className = '',
+  text = '로딩 중...',
+}: LoadingSpinnerProps) => {
+  return (
+    <div
+      className={`flex items-center justify-center gap-2 w-full h-full ${className}`}
+    >
+      <Loader2 className={`animate-spin ${sizeClasses[size]}`} />
+      {text && <span className='text-sm text-muted-foreground'>{text}</span>}
+    </div>
+  );
+};
diff --git a/src/final_src/6_shared/ui/feedback/index.ts b/src/final_src/6_shared/ui/feedback/index.ts
new file mode 100644
index 000000000..8f6c207e0
--- /dev/null
+++ b/src/final_src/6_shared/ui/feedback/index.ts
@@ -0,0 +1 @@
+export { LoadingSpinner } from './LoadingSpinner';
diff --git a/src/final_src/6_shared/ui/forms/Input.tsx b/src/final_src/6_shared/ui/forms/Input.tsx
new file mode 100644
index 000000000..98c3b89c6
--- /dev/null
+++ b/src/final_src/6_shared/ui/forms/Input.tsx
@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+
+/**
+ * 입력 컴포넌트
+ * - 기본 HTML input 요소를 확장한 커스텀 입력 컴포넌트
+ * - 일관된 스타일링과 접근성 기능 제공
+ * - forwardRef를 통한 ref 전달로 포커스 관리 지원
+ */
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  className?: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={`flex h-10 w-full rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
diff --git a/src/final_src/6_shared/ui/forms/Select.tsx b/src/final_src/6_shared/ui/forms/Select.tsx
new file mode 100644
index 000000000..53fbb2c2b
--- /dev/null
+++ b/src/final_src/6_shared/ui/forms/Select.tsx
@@ -0,0 +1,80 @@
+import { forwardRef } from 'react';
+
+import { Check, ChevronDown } from 'lucide-react';
+
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+/**
+ * 선택 컴포넌트 계열
+ * - Radix UI Select를 기반으로 한 드롭다운 선택 컴포넌트들
+ * - Select, SelectTrigger, SelectContent, SelectItem으로 구성
+ * - 키보드 네비게이션과 접근성 기능 내장
+ */
+export const Select = SelectPrimitive.Root;
+export const SelectGroup = SelectPrimitive.Group;
+export const SelectValue = SelectPrimitive.Value;
+
+interface SelectTriggerProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string;
+}
+
+export const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(
+  ({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      className={`flex h-10 items-center justify-between rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+      {...props}
+    >
+      {children}
+      <ChevronDown className='h-4 w-4 opacity-50' />
+    </SelectPrimitive.Trigger>
+  )
+);
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  position?: 'popper';
+}
+
+export const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
+  ({ className, children, position = 'popper', ...props }, ref) => (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={ref}
+        className={`relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ${className}`}
+        position={position}
+        {...props}
+      >
+        <SelectPrimitive.Viewport className='p-1'>
+          {children}
+        </SelectPrimitive.Viewport>
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+);
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+interface SelectItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  value: string;
+}
+
+export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
+  ({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Item
+      ref={ref}
+      className={`relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ${className}`}
+      {...props}
+    >
+      <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
+        <SelectPrimitive.ItemIndicator>
+          <Check className='h-4 w-4' />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+);
+SelectItem.displayName = SelectPrimitive.Item.displayName;
diff --git a/src/final_src/6_shared/ui/forms/Textarea.tsx b/src/final_src/6_shared/ui/forms/Textarea.tsx
new file mode 100644
index 000000000..fbb6c981d
--- /dev/null
+++ b/src/final_src/6_shared/ui/forms/Textarea.tsx
@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+
+/**
+ * 텍스트 영역 컴포넌트
+ * - 여러 줄 텍스트 입력을 위한 textarea 컴포넌트
+ * - Input 컴포넌트와 일관된 스타일링 유지
+ * - 최소 높이 설정으로 사용성 향상
+ */
+
+interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  className?: string;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={`flex min-h-[150px] w-full rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = 'Textarea';
diff --git a/src/final_src/6_shared/ui/index.ts b/src/final_src/6_shared/ui/index.ts
new file mode 100644
index 000000000..b968e389f
--- /dev/null
+++ b/src/final_src/6_shared/ui/index.ts
@@ -0,0 +1,20 @@
+// Controls - 사용자 상호작용을 위한 컨트롤 컴포넌트
+export * from './controls/Button';
+
+// Data - 데이터 표시를 위한 컴포넌트
+export * from './data/Table';
+
+// Forms - 폼 입력을 위한 컴포넌트
+export * from './forms/Input';
+export * from './forms/Select';
+export * from './forms/Textarea';
+
+// Layout - 레이아웃을 위한 컴포넌트
+export * from './layout/Card';
+
+// Overlays - 오버레이 및 모달 컴포넌트
+export * from './overlays/Dialog';
+export * from './overlays/ContentDialog';
+
+// Feedback - 사용자 피드백을 위한 컴포넌트
+export * from './feedback';
diff --git a/src/final_src/6_shared/ui/layout/Card.tsx b/src/final_src/6_shared/ui/layout/Card.tsx
new file mode 100644
index 000000000..f7124bb07
--- /dev/null
+++ b/src/final_src/6_shared/ui/layout/Card.tsx
@@ -0,0 +1,64 @@
+import { forwardRef } from 'react';
+
+/**
+ * 카드 컴포넌트 계열
+ * - 콘텐츠를 그룹화하고 시각적으로 구분하는 컨테이너 컴포넌트들
+ * - Card, CardHeader, CardTitle, CardContent로 구성된 복합 컴포넌트
+ * - 일관된 간격과 스타일을 통한 계층적 정보 표현
+ */
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={`rounded-lg border bg-card text-card-foreground shadow-sm ${className}`}
+      {...props}
+    />
+  )
+);
+
+Card.displayName = 'Card';
+
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={`flex flex-col space-y-1.5 p-6 ${className}`}
+      {...props}
+    />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string;
+}
+
+export const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={`text-2xl font-semibold leading-none tracking-tight ${className}`}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={`p-6 pt-0 ${className}`} {...props} />
+  )
+);
+CardContent.displayName = 'CardContent';
diff --git a/src/final_src/6_shared/ui/overlays/ContentDialog.tsx b/src/final_src/6_shared/ui/overlays/ContentDialog.tsx
new file mode 100644
index 000000000..61d040d9b
--- /dev/null
+++ b/src/final_src/6_shared/ui/overlays/ContentDialog.tsx
@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+
+import { DialogProps } from '@radix-ui/react-dialog';
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from './Dialog';
+
+interface ContentDialogProps extends DialogProps {
+  title: ReactNode;
+  onClose?: () => void;
+}
+
+export const ContentDialog = ({
+  title,
+  children,
+  onClose,
+  onOpenChange,
+  ...props
+}: ContentDialogProps) => {
+  const handleOpenChange = (open: boolean) => {
+    onOpenChange?.(open);
+    if (!open) {
+      onClose?.();
+    }
+  };
+
+  return (
+    <Dialog {...props} onOpenChange={handleOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        {children}
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/src/final_src/6_shared/ui/overlays/Dialog.tsx b/src/final_src/6_shared/ui/overlays/Dialog.tsx
new file mode 100644
index 000000000..0d69bbc5c
--- /dev/null
+++ b/src/final_src/6_shared/ui/overlays/Dialog.tsx
@@ -0,0 +1,70 @@
+import { forwardRef } from 'react';
+
+import { X } from 'lucide-react';
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+/**
+ * 대화상자 컴포넌트 계열
+ * - Radix UI Dialog를 기반으로 한 모달 및 팝업 컴포넌트들
+ * - Dialog, DialogContent, DialogHeader, DialogTitle로 구성
+ * - 포커스 트랩, ESC 키 닫기, 오버레이 클릭 닫기 등 UX 기능 내장
+ */
+export const Dialog = DialogPrimitive.Root;
+export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogPortal = DialogPrimitive.Portal;
+export const DialogOverlay = DialogPrimitive.Overlay;
+
+interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
+  ({ className, children, ...props }, ref) => (
+    <DialogPortal>
+      <DialogOverlay className='fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0' />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={`fixed left-[50%] top-[50%] z-50 grid w-full max-w-2xl 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;
+
+interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={`flex flex-col space-y-1.5 text-center sm:text-left ${className}`}
+      {...props}
+    />
+  )
+);
+DialogHeader.displayName = 'DialogHeader';
+
+interface DialogTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string;
+}
+
+export const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
+  ({ className, ...props }, ref) => (
+    <DialogPrimitive.Title
+      ref={ref}
+      className={`text-lg font-semibold leading-none tracking-tight ${className}`}
+      {...props}
+    />
+  )
+);
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
diff --git a/src/final_src/README.md b/src/final_src/README.md
new file mode 100644
index 000000000..50d62c8ae
--- /dev/null
+++ b/src/final_src/README.md
@@ -0,0 +1,155 @@
+# Post Management System - FSD Architecture
+
+## 📁 프로젝트 구조
+
+이 프로젝트는 **Feature-Sliced Design (FSD)** 아키텍처를 기반으로 구성되어 있습니다.
+
+```
+final_src/
+├── 1_app/                    # 애플리케이션 레이어 (최상위)
+│   ├── App.tsx              # 메인 애플리케이션 컴포넌트
+│   ├── index.ts             # Public API
+│   └── providers/           # 애플리케이션 프로바이더
+│       ├── AppProvider.tsx  # 전역 프로바이더 설정
+│       └── index.ts
+├── 2_pages/                 # 페이지 레이어
+│   ├── PostsManagerPage.tsx # 게시물 관리 페이지
+│   └── index.ts
+├── 3_widgets/               # 위젯 레이어
+│   ├── Header.tsx           # 애플리케이션 헤더
+│   ├── Footer.tsx           # 애플리케이션 푸터
+│   └── index.ts
+├── 4_features/              # 기능 레이어
+│   ├── comment-management/  # 댓글 관리 기능
+│   ├── filter-posts/        # 게시물 필터링 기능
+│   ├── post-management/     # 게시물 관리 기능
+│   └── user-profile/        # 사용자 프로필 기능
+├── 5_entities/              # 엔티티 레이어
+│   ├── comment/             # 댓글 엔티티
+│   ├── post/                # 게시물 엔티티
+│   ├── tag/                 # 태그 엔티티
+│   └── user/                # 사용자 엔티티
+├── 6_shared/                # 공유 레이어 (최하위)
+│   ├── api/                 # API 관련 설정
+│   ├── assets/              # 정적 자산
+│   ├── constants/           # 상수 정의
+│   ├── lib/                 # 공통 라이브러리
+│   ├── types/               # 공통 타입 정의
+│   └── ui/                  # 공통 UI 컴포넌트
+├── main.tsx                 # 애플리케이션 진입점
+├── global.d.ts              # 전역 타입 정의
+└── index.css                # 전역 스타일
+```
+
+## 🏗️ FSD 아키텍처 원칙
+
+### 1. 레이어 의존성 규칙
+
+- **상위 레이어는 하위 레이어를 import할 수 있음**
+- **하위 레이어는 상위 레이어를 import할 수 없음**
+- 예: `features`는 `pages`를 import할 수 없음
+
+### 2. 각 레이어의 역할
+
+#### 1_app (애플리케이션 레이어)
+
+- 애플리케이션 초기화 및 설정
+- 전역 프로바이더 설정 (React Query, Jotai, Router)
+- 애플리케이션 레이아웃 구조
+
+#### 2_pages (페이지 레이어)
+
+- 라우팅 가능한 페이지 컴포넌트
+- 위젯과 기능을 조합하여 완전한 페이지 구성
+- 비즈니스 로직은 포함하지 않음
+
+#### 3_widgets (위젯 레이어)
+
+- 독립적인 UI 블록
+- 여러 기능을 조합한 복합 컴포넌트
+- 재사용 가능한 레이아웃 요소
+
+#### 4_features (기능 레이어)
+
+- 사용자 행동과 관련된 기능
+- 비즈니스 로직과 UI 로직 포함
+- 특정 도메인에 종속된 기능
+
+#### 5_entities (엔티티 레이어)
+
+- 비즈니스 엔티티 정의
+- API 통신, 데이터 모델, 타입 정의
+- 도메인 로직 포함
+
+#### 6_shared (공유 레이어)
+
+- 애플리케이션 전체에서 공통으로 사용되는 코드
+- UI 컴포넌트, 유틸리티, 타입, 상수
+- 특정 도메인에 종속되지 않음
+
+## 🚀 주요 개선사항
+
+### 1. 프로바이더 분리
+
+- `AppProvider`를 통한 전역 상태 관리 설정
+- React Query, Jotai, Router 설정 중앙화
+
+### 2. 명명 규칙 통일
+
+- 모든 컴포넌트를 named export로 통일
+- 일관된 파일 및 폴더 명명 규칙
+
+### 3. 문서화 개선
+
+- 각 컴포넌트와 함수에 JSDoc 주석 추가
+- 역할과 책임을 명확히 정의
+
+### 4. 구조 최적화
+
+- 각 레이어별 명확한 책임 분리
+- 의존성 방향 준수
+- 재사용 가능한 컴포넌트 구조
+
+## 📦 사용된 기술 스택
+
+- **React 18** - UI 라이브러리
+- **TypeScript** - 타입 안전성
+- **React Query** - 서버 상태 관리
+- **Jotai** - 클라이언트 상태 관리
+- **React Router** - 클라이언트 사이드 라우팅
+- **Tailwind CSS** - 스타일링
+- **Lucide React** - 아이콘 라이브러리
+
+## 🔧 개발 가이드라인
+
+### 1. 컴포넌트 작성 시
+
+- 단일 책임 원칙 준수
+- 명확한 props 인터페이스 정의
+- 적절한 타입 정의
+
+### 2. 상태 관리 시
+
+- 로컬 상태는 `useState` 사용
+- 전역 상태는 Jotai 사용
+- 서버 상태는 React Query 사용
+
+### 3. 파일 구조 시
+
+- FSD 레이어 규칙 준수
+- 관련 파일들을 같은 폴더에 배치
+- 명확한 파일 명명
+
+### 4. Import/Export 시
+
+- 절대 경로 사용 (`@/` 별칭)
+- Public API를 통한 export
+- 순환 의존성 방지
+
+## 🎯 다음 단계
+
+1. **테스트 코드 추가** - 각 레이어별 단위 테스트
+2. **성능 최적화** - React.memo, useMemo, useCallback 활용
+3. **접근성 개선** - ARIA 속성 및 키보드 네비게이션
+4. **국제화** - 다국어 지원 구조 추가
+5. **에러 바운더리** - 에러 처리 및 복구 메커니즘
diff --git a/src/final_src/global.d.ts b/src/final_src/global.d.ts
new file mode 100644
index 000000000..64a633d3c
--- /dev/null
+++ b/src/final_src/global.d.ts
@@ -0,0 +1,14 @@
+declare module '*.css' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.scss' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.sass' {
+  const content: string;
+  export default content;
+}
diff --git a/src/final_src/index.css b/src/final_src/index.css
new file mode 100644
index 000000000..8e1047cca
--- /dev/null
+++ b/src/final_src/index.css
@@ -0,0 +1,5 @@
+html,
+body {
+  background: #fff;
+  color: #000;
+}
diff --git a/src/final_src/main.tsx b/src/final_src/main.tsx
new file mode 100644
index 000000000..2191df79a
--- /dev/null
+++ b/src/final_src/main.tsx
@@ -0,0 +1,14 @@
+import { StrictMode } from 'react';
+
+import { createRoot } from 'react-dom/client';
+
+import { App, AppProvider } from '@/app';
+import '@/index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <AppProvider>
+      <App />
+    </AppProvider>
+  </StrictMode>
+);
diff --git a/src/global.d.ts b/src/global.d.ts
new file mode 100644
index 000000000..64a633d3c
--- /dev/null
+++ b/src/global.d.ts
@@ -0,0 +1,14 @@
+declare module '*.css' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.scss' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.sass' {
+  const content: string;
+  export default content;
+}
diff --git a/src/index.css b/src/index.css
index 62d46a326..8e1047cca 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
   background: #fff;
   color: #000;
-}
\ No newline at end of file
+}
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..934f55124 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,12 @@
-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';
+import '@/index.css';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />
-  </StrictMode>,
-)
+  </StrictMode>
+);
diff --git a/src/pages/PostsManagerPage.tsx b/src/pages/PostsManagerPage.tsx
deleted file mode 100644
index f80eb91ef..000000000
--- a/src/pages/PostsManagerPage.tsx
+++ /dev/null
@@ -1,708 +0,0 @@
-import { useEffect, useState } from "react"
-import { Edit2, MessageSquare, Plus, Search, ThumbsDown, ThumbsUp, Trash2 } from "lucide-react"
-import { useLocation, useNavigate } from "react-router-dom"
-import {
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  Input,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  Textarea,
-} from "../components"
-
-const PostsManager = () => {
-  const navigate = useNavigate()
-  const location = useLocation()
-  const queryParams = new URLSearchParams(location.search)
-
-  // 상태 관리
-  const [posts, setPosts] = useState([])
-  const [total, setTotal] = useState(0)
-  const [skip, setSkip] = useState(parseInt(queryParams.get("skip") || "0"))
-  const [limit, setLimit] = useState(parseInt(queryParams.get("limit") || "10"))
-  const [searchQuery, setSearchQuery] = useState(queryParams.get("search") || "")
-  const [selectedPost, setSelectedPost] = useState(null)
-  const [sortBy, setSortBy] = useState(queryParams.get("sortBy") || "")
-  const [sortOrder, setSortOrder] = useState(queryParams.get("sortOrder") || "asc")
-  const [showAddDialog, setShowAddDialog] = useState(false)
-  const [showEditDialog, setShowEditDialog] = useState(false)
-  const [newPost, setNewPost] = useState({ title: "", body: "", userId: 1 })
-  const [loading, setLoading] = useState(false)
-  const [tags, setTags] = useState([])
-  const [selectedTag, setSelectedTag] = useState(queryParams.get("tag") || "")
-  const [comments, setComments] = useState({})
-  const [selectedComment, setSelectedComment] = useState(null)
-  const [newComment, setNewComment] = useState({ body: "", postId: null, userId: 1 })
-  const [showAddCommentDialog, setShowAddCommentDialog] = useState(false)
-  const [showEditCommentDialog, setShowEditCommentDialog] = useState(false)
-  const [showPostDetailDialog, setShowPostDetailDialog] = useState(false)
-  const [showUserModal, setShowUserModal] = useState(false)
-  const [selectedUser, setSelectedUser] = useState(null)
-
-  // URL 업데이트 함수
-  const updateURL = () => {
-    const params = new URLSearchParams()
-    if (skip) params.set("skip", skip.toString())
-    if (limit) params.set("limit", limit.toString())
-    if (searchQuery) params.set("search", searchQuery)
-    if (sortBy) params.set("sortBy", sortBy)
-    if (sortOrder) params.set("sortOrder", sortOrder)
-    if (selectedTag) params.set("tag", selectedTag)
-    navigate(`?${params.toString()}`)
-  }
-
-  // 게시물 가져오기
-  const 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 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)
-  }
-
-  // 게시물 추가
-  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 deletePost = async (id) => {
-    try {
-      await fetch(`/api/posts/${id}`, {
-        method: "DELETE",
-      })
-      setPosts(posts.filter((post) => post.id !== 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 = 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)
-    }
-  }
-
-  // 댓글 업데이트
-  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 }),
-      })
-      const data = await response.json()
-      setComments((prev) => ({
-        ...prev,
-        [data.postId]: prev[data.postId].map((comment) => (comment.id === data.id ? data : comment)),
-      }))
-      setShowEditCommentDialog(false)
-    } catch (error) {
-      console.error("댓글 업데이트 오류:", error)
-    }
-  }
-
-  // 댓글 삭제
-  const deleteComment = async (id, postId) => {
-    try {
-      await fetch(`/api/comments/${id}`, {
-        method: "DELETE",
-      })
-      setComments((prev) => ({
-        ...prev,
-        [postId]: prev[postId].filter((comment) => comment.id !== id),
-      }))
-    } catch (error) {
-      console.error("댓글 삭제 오류:", error)
-    }
-  }
-
-  // 댓글 좋아요
-  const likeComment = async (id, postId) => {
-    try {
-
-      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)),
-      }))
-    } catch (error) {
-      console.error("댓글 좋아요 오류:", error)
-    }
-  }
-
-  // 게시물 상세 보기
-  const openPostDetail = (post) => {
-    setSelectedPost(post)
-    fetchComments(post.id)
-    setShowPostDetailDialog(true)
-  }
-
-  // 사용자 모달 열기
-  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)
-    }
-  }
-
-  useEffect(() => {
-    fetchTags()
-  }, [])
-
-  useEffect(() => {
-    if (selectedTag) {
-      fetchPostsByTag(selectedTag)
-    } else {
-      fetchPosts()
-    }
-    updateURL()
-  }, [skip, limit, sortBy, sortOrder, selectedTag])
-
-  useEffect(() => {
-    const params = new URLSearchParams(location.search)
-    setSkip(parseInt(params.get("skip") || "0"))
-    setLimit(parseInt(params.get("limit") || "10"))
-    setSearchQuery(params.get("search") || "")
-    setSortBy(params.get("sortBy") || "")
-    setSortOrder(params.get("sortOrder") || "asc")
-    setSelectedTag(params.get("tag") || "")
-  }, [location.search])
-
-  // 하이라이트 함수 추가
-  const 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)}>
-            <Plus className="w-4 h-4 mr-2" />
-            게시물 추가
-          </Button>
-        </CardTitle>
-      </CardHeader>
-      <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>
-
-          {/* 게시물 테이블 */}
-          {loading ? <div className="flex justify-center p-4">로딩 중...</div> : renderPostTable()}
-
-          {/* 페이지네이션 */}
-          <div className="flex justify-between items-center">
-            <div className="flex items-center gap-2">
-              <span>표시</span>
-              <Select 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>
-        </div>
-      </CardContent>
-
-      {/* 게시물 추가 대화상자 */}
-      <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>새 게시물 추가</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <Input
-              placeholder="제목"
-              value={newPost.title}
-              onChange={(e) => setNewPost({ ...newPost, title: e.target.value })}
-            />
-            <Textarea
-              rows={30}
-              placeholder="내용"
-              value={newPost.body}
-              onChange={(e) => setNewPost({ ...newPost, body: e.target.value })}
-            />
-            <Input
-              type="number"
-              placeholder="사용자 ID"
-              value={newPost.userId}
-              onChange={(e) => setNewPost({ ...newPost, userId: Number(e.target.value) })}
-            />
-            <Button onClick={addPost}>게시물 추가</Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      {/* 게시물 수정 대화상자 */}
-      <Dialog open={showEditDialog} onOpenChange={setShowEditDialog}>
-        <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>
-        </DialogContent>
-      </Dialog>
-
-      {/* 댓글 추가 대화상자 */}
-      <Dialog open={showAddCommentDialog} onOpenChange={setShowAddCommentDialog}>
-        <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>
-        </DialogContent>
-      </Dialog>
-
-      {/* 댓글 수정 대화상자 */}
-      <Dialog open={showEditCommentDialog} onOpenChange={setShowEditCommentDialog}>
-        <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>
-        </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>
-
-      {/* 사용자 모달 */}
-      <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>
-    </Card>
-  )
-}
-
-export default PostsManager
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 5a2def4b7..f03318afc 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -19,7 +19,26 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+
+    /* Path mapping */
+    "baseUrl": ".",
+    "paths": {
+      "@/app/*": ["src/1_app/*"],
+      "@/app": ["src/1_app/index.ts"],
+      "@/pages/*": ["src/2_pages/*"],
+      "@/pages": ["src/2_pages/index.ts"],
+      "@/widgets/*": ["src/3_widgets/*"],
+      "@/widgets": ["src/3_widgets/index.ts"],
+      "@/features/*": ["src/4_features/*"],
+      "@/features": ["src/4_features/index.ts"],
+      "@/entities/*": ["src/5_entities/*"],
+      "@/entities": ["src/5_entities/index.ts"],
+      "@/shared/*": ["src/6_shared/*"],
+      "@/shared": ["src/6_shared/index.ts"],
+      "@final_src/*": ["src/final_src/*"],
+      "@final_src": ["src/final_src/index.ts"],
+      "@/*": ["src/*"]
+    }
   },
-  "include": ["src"]
+  "include": ["src", "final_src"]
 }
diff --git a/tsconfig.app.tsbuildinfo b/tsconfig.app.tsbuildinfo
new file mode 100644
index 000000000..78eec4b31
--- /dev/null
+++ b/tsconfig.app.tsbuildinfo
@@ -0,0 +1 @@
+{"root":["./src/global.d.ts","./src/main.tsx","./src/1_app/app.tsx","./src/1_app/index.ts","./src/2_pages/postsmanagerpage.tsx","./src/2_pages/index.ts","./src/3_widgets/footer.tsx","./src/3_widgets/header.tsx","./src/3_widgets/index.ts","./src/4_features/comment-management/index.ts","./src/4_features/comment-management/hooks/useaddcommentform.ts","./src/4_features/comment-management/hooks/useeditcommentform.ts","./src/4_features/comment-management/ui/addcommentformdialog.tsx","./src/4_features/comment-management/ui/commentitem.tsx","./src/4_features/comment-management/ui/commentlist.tsx","./src/4_features/comment-management/ui/editcommentformdialog.tsx","./src/4_features/filter-posts/index.ts","./src/4_features/filter-posts/hooks/usefilteredposts.ts","./src/4_features/filter-posts/ui/filters.tsx","./src/4_features/filter-posts/ui/searchinput.tsx","./src/4_features/filter-posts/ui/selectlimit.tsx","./src/4_features/filter-posts/ui/selectsortby.tsx","./src/4_features/filter-posts/ui/selectsortorder.tsx","./src/4_features/filter-posts/ui/selecttag.tsx","./src/4_features/post-management/index.ts","./src/4_features/post-management/types.ts","./src/4_features/post-management/hooks/usecreatepostform.ts","./src/4_features/post-management/hooks/useeditpostform.ts","./src/4_features/post-management/lib/post.util.ts","./src/4_features/post-management/ui/addpostbutton.tsx","./src/4_features/post-management/ui/addpostformdialog.tsx","./src/4_features/post-management/ui/editpostformdialog.tsx","./src/4_features/post-management/ui/postdetaildialog.tsx","./src/4_features/post-management/ui/postpagination.tsx","./src/4_features/post-management/ui/posttable.tsx","./src/4_features/user-profile/index.ts","./src/4_features/user-profile/ui/useprofiledialog.tsx","./src/5_entities/comment/comment.api.ts","./src/5_entities/comment/comment.queries.ts","./src/5_entities/comment/comment.type.ts","./src/5_entities/comment/index.ts","./src/5_entities/post/index.ts","./src/5_entities/post/post.api.ts","./src/5_entities/post/post.constant.ts","./src/5_entities/post/post.model.ts","./src/5_entities/post/post.queries.ts","./src/5_entities/post/post.type.ts","./src/5_entities/tag/index.ts","./src/5_entities/tag/tag.api.ts","./src/5_entities/tag/tag.queries.ts","./src/5_entities/tag/tag.type.ts","./src/5_entities/user/index.ts","./src/5_entities/user/user.api.ts","./src/5_entities/user/user.constant.ts","./src/5_entities/user/user.model.ts","./src/5_entities/user/user.queries.ts","./src/5_entities/user/user.type.ts","./src/6_shared/api/axios.ts","./src/6_shared/constants/api.ts","./src/6_shared/constants/index.ts","./src/6_shared/constants/ui.ts","./src/6_shared/lib/index.ts","./src/6_shared/lib/api/apiservice.ts","./src/6_shared/lib/api/axios.ts","./src/6_shared/lib/api/index.ts","./src/6_shared/lib/hooks/index.ts","./src/6_shared/lib/hooks/usecachedpostsquerykey.ts","./src/6_shared/lib/hooks/usedebounce.ts","./src/6_shared/lib/hooks/usepostsfilterstore.ts","./src/6_shared/lib/query/index.ts","./src/6_shared/lib/query/querykeys.ts","./src/6_shared/lib/store/uistore.ts","./src/6_shared/lib/store/index.ts","./src/6_shared/lib/store/postsfilterstore.ts","./src/6_shared/lib/utils/index.ts","./src/6_shared/lib/utils/ui.util.tsx","./src/6_shared/lib/utils/url.util.ts","./src/6_shared/types/api.type.ts","./src/6_shared/types/index.ts","./src/6_shared/types/utility.type.ts","./src/6_shared/ui/index.ts","./src/6_shared/ui/controls/button.tsx","./src/6_shared/ui/data/table.tsx","./src/6_shared/ui/feedback/loadingspinner.tsx","./src/6_shared/ui/feedback/index.ts","./src/6_shared/ui/forms/input.tsx","./src/6_shared/ui/forms/select.tsx","./src/6_shared/ui/forms/textarea.tsx","./src/6_shared/ui/layout/card.tsx","./src/6_shared/ui/overlays/contentdialog.tsx","./src/6_shared/ui/overlays/dialog.tsx"],"version":"5.9.2"}
\ No newline at end of file
diff --git a/tsconfig.node.json b/tsconfig.node.json
index 9dad70185..9e8556624 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -16,8 +16,7 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noFallthroughCasesInSwitch": true
   },
   "include": ["vite.config.ts"]
 }
diff --git a/tsconfig.node.tsbuildinfo b/tsconfig.node.tsbuildinfo
new file mode 100644
index 000000000..240b89231
--- /dev/null
+++ b/tsconfig.node.tsbuildinfo
@@ -0,0 +1 @@
+{"root":["./vite.config.ts"],"version":"5.9.2"}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index be7b7a3d4..3c4a95422 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,17 +1,45 @@
-import { defineConfig } from "vite"
-import react from "@vitejs/plugin-react"
+import path from 'path';
+import { defineConfig } from 'vite';
+
+import react from '@vitejs/plugin-react';
+
+const base =
+  process.env.NODE_ENV === 'production' ? '/front_6th_chapter2-3/' : '';
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
-  server: {
-    proxy: {
-      "/api": {
-        // target: 'https://jsonplaceholder.typicode.com',
-        target: "https://dummyjson.com",
-        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, ""),
+  base,
+  publicDir: 'public',
+  build: {
+    outDir: 'dist',
+    rollupOptions: {
+      input: {
+        main: path.resolve(__dirname, 'index.html'),
+      },
+      output: {
+        entryFileNames: 'assets/[name]-[hash].js',
+        chunkFileNames: 'assets/[name]-[hash].js',
+        assetFileNames: 'assets/[name]-[hash].[ext]',
       },
     },
   },
-})
+  resolve: {
+    alias: {
+      '@/app': path.resolve(__dirname, './src/1_app'),
+      '@/app/*': path.resolve(__dirname, './src/1_app/*'),
+      '@/pages': path.resolve(__dirname, './src/2_pages'),
+      '@/pages/*': path.resolve(__dirname, './src/2_pages/*'),
+      '@/widgets': path.resolve(__dirname, './src/3_widgets'),
+      '@/widgets/*': path.resolve(__dirname, './src/3_widgets/*'),
+      '@/features': path.resolve(__dirname, './src/4_features'),
+      '@/features/*': path.resolve(__dirname, './src/4_features/*'),
+      '@/entities': path.resolve(__dirname, './src/5_entities'),
+      '@/entities/*': path.resolve(__dirname, './src/5_entities/*'),
+      '@/shared': path.resolve(__dirname, './src/6_shared'),
+      '@/shared/*': path.resolve(__dirname, './src/6_shared/*'),
+      '@final_src': path.resolve(__dirname, './src/final_src'),
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+});
diff --git a/vitest.config.ts b/vitest.config.ts
index fa9992fb4..860a390c5 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,11 +1,12 @@
 /// <reference types="vitest" />
-import { defineConfig } from "vitest/config"
-import react from "@vitejs/plugin-react"
+import { defineConfig } from 'vitest/config';
+
+import react from '@vitejs/plugin-react';
 
 export default defineConfig({
   plugins: [react()],
   test: {
     globals: true,
-    environment: "jsdom",
+    environment: 'jsdom',
   },
-})
+});