diff --git a/.eslintrc.json b/.eslintrc.json
index 786aab69..55e7e8e6 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,9 +1,10 @@
 {
   "extends": ["next/core-web-vitals", "prettier"],
-  "plugins": ["prettier", "react-hooks"],
+  "plugins": ["prettier", "react-hooks", "@typescript-eslint"],
   "rules": {
     "prettier/prettier": "error",
-    "no-unused-vars": "error"
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "error"
   },
   "settings": {
     "import/resolver": {
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 00000000..5fd9f3b0
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+*.ts    text eol=lf
+*.tsx   text eol=lf
\ No newline at end of file
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
index 8eaf3b2b..10a5504a 100644
--- a/.github/workflows/chromatic.yml
+++ b/.github/workflows/chromatic.yml
@@ -2,7 +2,14 @@
 name: 'Chromatic Deployment'
 
 # Event for the workflow
-on: push
+on:
+  push:
+    branches:
+      - develop
+  pull_request:
+    branches:
+      - '**'
+      - '!main'
 
 # List of jobs
 jobs:
diff --git a/.github/workflows/ci-develop.yml b/.github/workflows/ci-develop.yml
deleted file mode 100644
index 548bb7e7..00000000
--- a/.github/workflows/ci-develop.yml
+++ /dev/null
@@ -1,40 +0,0 @@
-name: CI for develop
-
-on:
-  pull_request:
-    branches:
-      - develop
-  push:
-    branches:
-      - develop
-
-jobs:
-  ci-develop:
-    name: Lint, Test, and Build (develop)
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [18, 20]
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-
-      - name: Install dependencies
-        run: npm install
-
-      - name: Run ESLint
-        run: npm run lint
-
-      - name: Run Tests
-        run: npm test
-
-      - name: Build Next.js app
-        run: npm run build
-
-      - name: Build Storybook
-        run: npm run build-storybook
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 00000000..c239d990
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,91 @@
+name: CI
+
+on:
+  pull_request:
+    branches:
+      - '**'
+      - '!main'
+  push:
+    branches:
+      - develop
+
+jobs:
+  ci:
+    name: Lint, Test, and Build
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18, 20]
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run ESLint
+        run: npm run lint
+
+      - name: Run Tests
+        run: npm test
+
+      - name: Build Next.js app
+        run: npm run build
+
+      - name: Build Storybook
+        run: npm run build-storybook
+
+  notify-discord:
+    needs: ci
+    runs-on: ubuntu-latest
+    if: success()
+    steps:
+      - name: Send Discord Notification
+        env:
+          WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          DATA: >
+            {
+              "embeds": [
+                {
+                  "title": "${{ 
+                    format('{0}', 
+                      (github.base_ref == 'develop' || github.ref_name == 'develop') 
+                      && '🚀 Develop 브랜치 CI 알림' 
+                      || '🎉 새 작업 CI 알림'
+                    )
+                  }}",
+                  "description": "${{ 
+                    format('{0}',
+                      github.event_name == 'pull_request' 
+                      && (github.base_ref == 'develop' 
+                        && format('Develop 브랜치로 새로운 PR이 등록되었습니다! ({0} → develop)', github.head_ref)
+                        || format('새로운 PR이 등록되었습니다! ({0} → {1})', github.head_ref, github.base_ref)
+                      )
+                      || 'Develop 브랜치에 Push가 완료되었습니다!'
+                    )
+                  }}",
+                  "url": "${{ github.event.pull_request.html_url || github.event.head_commit.url }}",
+                  "color": 5814783,
+                  "fields": [
+                    {
+                      "name": "Repository",
+                      "value": "${{ github.repository }}"
+                    },
+                    {
+                      "name": "Branch",
+                      "value": "${{ github.event_name == 'pull_request' && github.head_ref || github.ref_name }}"
+                    }
+                  ]
+                }
+              ]
+            }
+        run: |
+          curl -X POST \
+            -H "Content-Type: application/json" \
+            -d "$DATA" \
+            $WEBHOOK_URL
diff --git a/.github/workflows/main-deploy.yml b/.github/workflows/main-deploy.yml
index 9359507a..0d2b828b 100644
--- a/.github/workflows/main-deploy.yml
+++ b/.github/workflows/main-deploy.yml
@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x, 20.x]  # Node.js 18.x와 20.x 버전으로 테스트
+        node-version: [18.x, 20.x]
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
@@ -22,10 +22,41 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node-version }}  # 매트릭스를 사용하여 버전 설정
+          node-version: ${{ matrix.node-version }}
 
       - name: Install dependencies
         run: npm install
 
       - name: Build Next.js app
         run: npm run build
+
+  notify-discord:
+    needs: deploy-production
+    runs-on: ubuntu-latest
+    if: success()
+    steps:
+      - name: Send Discord Notification
+        env:
+          WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          DATA: >
+            {
+              "embeds": [
+                {
+                  "title": "🚀 main 브랜치 알림",
+                  "description": "${{ github.event_name == 'pull_request' && '새로운 PR이 성공적으로 등록되었습니다!' || 'Push가 성공적으로 완료되었습니다!' }}",
+                  "url": "${{ github.event.pull_request.html_url || github.event.head_commit.url }}",
+                  "color": 5814783,
+                  "fields": [
+                    {
+                      "name": "Repository",
+                      "value": "${{ github.repository }}"
+                    }
+                  ]
+                }
+              ]
+            }
+        run: |
+          curl -X POST \
+            -H "Content-Type: application/json" \
+            -d "$DATA" \
+            $WEBHOOK_URL
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 6aa6b1f8..4580843a 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -9,6 +9,31 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    viewport: {
+      viewports: {
+        mobile: {
+          name: 'Mobile',
+          styles: {
+            width: '375px',
+            height: '1168px',
+          },
+        },
+        tablet: {
+          name: 'Tablet',
+          styles: {
+            width: '744px',
+            height: '1343px',
+          },
+        },
+        desktop: {
+          name: 'Desktop',
+          styles: {
+            width: '1920px',
+            height: '1080px',
+          },
+        },
+      },
+    },
   },
 };
 
diff --git a/global.d.ts b/global.d.ts
new file mode 100644
index 00000000..776b4da1
--- /dev/null
+++ b/global.d.ts
@@ -0,0 +1,9 @@
+declare global {
+  interface Window {
+    daum: {
+      Postcode: new (config: any) => any;
+    };
+  }
+}
+
+export {};
diff --git a/jest.config.js b/jest.config.js
index 1b1168b9..679e6597 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,9 +1,18 @@
-module.exports = {
-  testEnvironment: "jest-environment-jsdom",
-  transform: {
-    "^.+.tsx?$": "ts-jest",
-  },
-  moduleNameMapper: {
-    "^@/(.*)$": "<rootDir>/$1",
-  },
+const nextJest = require('next/jest');
+
+/** @type {import('jest').Config} */
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+});
+
+// Add any custom config to be passed to Jest
+const config = {
+  coverageProvider: 'v8',
+  testEnvironment: 'jsdom',
+  // Add more setup options before each test is run
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 };
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(config);
diff --git a/next.config.ts b/next.config.ts
index e9ffa308..0ccb0755 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,7 +1,9 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  images: {
+    domains: ['sprint-fe-project.s3.ap-northeast-2.amazonaws.com'],
+  },
 };
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index a5a85c96..ebe27e49 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,3 +1,4 @@
+
 {
   "name": "codeit3-fe",
   "version": "0.1.0",
@@ -9,12 +10,18 @@
       "version": "0.1.0",
       "dependencies": {
         "@headlessui/react": "^2.2.0",
+        "@hookform/resolvers": "^3.9.1",
         "@tanstack/react-query": "^5.61.3",
         "@tanstack/react-query-devtools": "^5.61.3",
+        "@types/react-datepicker": "^6.2.0",
         "axios": "^1.7.8",
         "next": "15.0.3",
         "react": "^18.3.1",
+        "react-datepicker": "^7.5.0",
         "react-dom": "^18.3.1",
+        "react-hook-form": "^7.53.2",
+        "tailwind-merge": "^2.5.5",
+        "zod": "^3.23.8",
         "zustand": "^5.0.1"
       },
       "devDependencies": {
@@ -34,6 +41,8 @@
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
+        "@typescript-eslint/eslint-plugin": "^8.16.0",
+        "@typescript-eslint/parser": "^8.16.0",
         "autoprefixer": "^10.4.20",
         "chromatic": "^11.19.0",
         "eslint": "^8.57.1",
@@ -2752,6 +2761,15 @@
         "react-dom": "^18 || ^19 || ^19.0.0-rc"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.9.1.tgz",
+      "integrity": "sha512-ud2HqmGBM0P0IABqoskKWI6PEf6ZDDBZkFqe2Vnl+mTHCEHzr3ISjjZyCwTjC/qpL25JC9aIDkloQejvMeq0ug==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -5494,20 +5512,29 @@
       "version": "15.7.13",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
       "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.3.12",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz",
       "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-datepicker": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-6.2.0.tgz",
+      "integrity": "sha512-+JtO4Fm97WLkJTH8j8/v3Ldh7JCNRwjMYjRaKh4KHH0M3jJoXtwiD3JBCsdlg3tsFIw9eQSqyAPeVDN2H2oM9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.2",
+        "@types/react": "*",
+        "date-fns": "^3.3.1"
+      }
+    },
     "node_modules/@types/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
@@ -5560,31 +5587,495 @@
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/yargs-parser": "*"
+        "@types/yargs-parser": "*"
+      }
+    },
+    "node_modules/@types/yargs-parser": {
+      "version": "21.0.3",
+      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz",
+      "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.16.0.tgz",
+      "integrity": "sha512-5YTHKV8MYlyMI6BaEG7crQ9BhSc8RxzshOReKwZwRWN0+XvvTOm+L/UYLCYxFpfwYuAAqhxiq4yae0CMFwbL7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "8.16.0",
+        "@typescript-eslint/type-utils": "8.16.0",
+        "@typescript-eslint/utils": "8.16.0",
+        "@typescript-eslint/visitor-keys": "8.16.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.3.1",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0",
+        "eslint": "^8.57.0 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.16.0.tgz",
+      "integrity": "sha512-mwsZWubQvBki2t5565uxF0EYvG+FwdFb8bMtDuGQLdCCnGPrDEDvm1gtfynuKlnpzeBRqdFCkMf9jg1fnAK8sg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/visitor-keys": "8.16.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/types": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.16.0.tgz",
+      "integrity": "sha512-NzrHj6thBAOSE4d9bsuRNMvk+BvaQvmY4dDglgkgGC0EW/tB3Kelnp3tAKH87GEwzoxgeQn9fNGRyFJM/xd+GQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.16.0.tgz",
+      "integrity": "sha512-E2+9IzzXMc1iaBy9zmo+UYvluE3TW7bCGWSF41hVWUE01o8nzr1rvOQYSxelxr6StUvRcTMe633eY8mXASMaNw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/visitor-keys": "8.16.0",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/utils": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.16.0.tgz",
+      "integrity": "sha512-C1zRy/mOL8Pj157GiX4kaw7iyRLKfJXBR3L82hk5kS/GyHcOFmy4YUq/zfZti72I9wnuQtA/+xzft4wCC8PJdA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@typescript-eslint/scope-manager": "8.16.0",
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/typescript-estree": "8.16.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.16.0.tgz",
+      "integrity": "sha512-pq19gbaMOmFE3CbL0ZB8J8BFCo2ckfHBfaIsaOZgBIF4EoISJIdLX5xRhd0FGB0LlHReNRuzoJoMGpTjq8F2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.16.0",
+        "eslint-visitor-keys": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/eslint-visitor-keys": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/fast-glob": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.16.0.tgz",
+      "integrity": "sha512-D7DbgGFtsqIPIFMPJwCad9Gfi/hC0PWErRRHFnaCWoEDYi5tQUDiJCTmGUbBiLzjqAck4KcXt9Ayj0CNlIrF+w==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.16.0",
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/typescript-estree": "8.16.0",
+        "@typescript-eslint/visitor-keys": "8.16.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.16.0.tgz",
+      "integrity": "sha512-mwsZWubQvBki2t5565uxF0EYvG+FwdFb8bMtDuGQLdCCnGPrDEDvm1gtfynuKlnpzeBRqdFCkMf9jg1fnAK8sg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/visitor-keys": "8.16.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/types": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.16.0.tgz",
+      "integrity": "sha512-NzrHj6thBAOSE4d9bsuRNMvk+BvaQvmY4dDglgkgGC0EW/tB3Kelnp3tAKH87GEwzoxgeQn9fNGRyFJM/xd+GQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.16.0.tgz",
+      "integrity": "sha512-E2+9IzzXMc1iaBy9zmo+UYvluE3TW7bCGWSF41hVWUE01o8nzr1rvOQYSxelxr6StUvRcTMe633eY8mXASMaNw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/visitor-keys": "8.16.0",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.16.0.tgz",
+      "integrity": "sha512-pq19gbaMOmFE3CbL0ZB8J8BFCo2ckfHBfaIsaOZgBIF4EoISJIdLX5xRhd0FGB0LlHReNRuzoJoMGpTjq8F2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.16.0",
+        "eslint-visitor-keys": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/eslint-visitor-keys": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/fast-glob": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.15.0.tgz",
+      "integrity": "sha512-QRGy8ADi4J7ii95xz4UoiymmmMd/zuy9azCaamnZ3FM8T5fZcex8UfJcjkiEZjJSztKfEBe3dZ5T/5RHAmw2mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.15.0",
+        "@typescript-eslint/visitor-keys": "8.15.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.16.0.tgz",
+      "integrity": "sha512-IqZHGG+g1XCWX9NyqnI/0CX5LL8/18awQqmkZSl2ynn8F76j579dByc0jhfVSnSnhf7zv76mKBQv9HQFKvDCgg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/typescript-estree": "8.16.0",
+        "@typescript-eslint/utils": "8.16.0",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.16.0.tgz",
+      "integrity": "sha512-mwsZWubQvBki2t5565uxF0EYvG+FwdFb8bMtDuGQLdCCnGPrDEDvm1gtfynuKlnpzeBRqdFCkMf9jg1fnAK8sg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/visitor-keys": "8.16.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@types/yargs-parser": {
-      "version": "21.0.3",
-      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz",
-      "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==",
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/types": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.16.0.tgz",
+      "integrity": "sha512-NzrHj6thBAOSE4d9bsuRNMvk+BvaQvmY4dDglgkgGC0EW/tB3Kelnp3tAKH87GEwzoxgeQn9fNGRyFJM/xd+GQ==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
     },
-    "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.15.0.tgz",
-      "integrity": "sha512-+zkm9AR1Ds9uLWN3fkoeXgFppaQ+uEVtfOV62dDmsy9QCNqlRHWNEck4yarvRNrvRcHQLGfqBNui3cimoz8XAg==",
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.16.0.tgz",
+      "integrity": "sha512-E2+9IzzXMc1iaBy9zmo+UYvluE3TW7bCGWSF41hVWUE01o8nzr1rvOQYSxelxr6StUvRcTMe633eY8mXASMaNw==",
       "dev": true,
-      "license": "MIT",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.15.0",
-        "@typescript-eslint/type-utils": "8.15.0",
-        "@typescript-eslint/utils": "8.15.0",
-        "@typescript-eslint/visitor-keys": "8.15.0",
-        "graphemer": "^1.4.0",
-        "ignore": "^5.3.1",
-        "natural-compare": "^1.4.0",
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/visitor-keys": "8.16.0",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
         "ts-api-utils": "^1.3.0"
       },
       "engines": {
@@ -5594,28 +6085,23 @@
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
-      "peerDependencies": {
-        "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0",
-        "eslint": "^8.57.0 || ^9.0.0"
-      },
       "peerDependenciesMeta": {
         "typescript": {
           "optional": true
         }
       }
     },
-    "node_modules/@typescript-eslint/parser": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.15.0.tgz",
-      "integrity": "sha512-7n59qFpghG4uazrF9qtGKBZXn7Oz4sOMm8dwNWDQY96Xlm2oX67eipqcblDj+oY1lLCbf1oltMZFpUso66Kl1A==",
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/utils": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.16.0.tgz",
+      "integrity": "sha512-C1zRy/mOL8Pj157GiX4kaw7iyRLKfJXBR3L82hk5kS/GyHcOFmy4YUq/zfZti72I9wnuQtA/+xzft4wCC8PJdA==",
       "dev": true,
-      "license": "BSD-2-Clause",
+      "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.15.0",
-        "@typescript-eslint/types": "8.15.0",
-        "@typescript-eslint/typescript-estree": "8.15.0",
-        "@typescript-eslint/visitor-keys": "8.15.0",
-        "debug": "^4.3.4"
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@typescript-eslint/scope-manager": "8.16.0",
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/typescript-estree": "8.16.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -5633,15 +6119,15 @@
         }
       }
     },
-    "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.15.0.tgz",
-      "integrity": "sha512-QRGy8ADi4J7ii95xz4UoiymmmMd/zuy9azCaamnZ3FM8T5fZcex8UfJcjkiEZjJSztKfEBe3dZ5T/5RHAmw2mA==",
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.16.0.tgz",
+      "integrity": "sha512-pq19gbaMOmFE3CbL0ZB8J8BFCo2ckfHBfaIsaOZgBIF4EoISJIdLX5xRhd0FGB0LlHReNRuzoJoMGpTjq8F2CQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.15.0",
-        "@typescript-eslint/visitor-keys": "8.15.0"
+        "@typescript-eslint/types": "8.16.0",
+        "eslint-visitor-keys": "^4.2.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -5651,32 +6137,73 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.15.0.tgz",
-      "integrity": "sha512-UU6uwXDoI3JGSXmcdnP5d8Fffa2KayOhUUqr/AiBnG1Gl7+7ut/oyagVeSkh7bxQ0zSXV9ptRh/4N15nkCqnpw==",
+    "node_modules/@typescript-eslint/type-utils/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "8.15.0",
-        "@typescript-eslint/utils": "8.15.0",
-        "debug": "^4.3.4",
-        "ts-api-utils": "^1.3.0"
-      },
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/eslint-visitor-keys": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "dev": true,
+      "license": "Apache-2.0",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/fast-glob": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
       },
-      "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0"
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
       },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/@typescript-eslint/types": {
@@ -8276,7 +8803,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
@@ -8355,6 +8881,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
@@ -14014,7 +14550,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -15153,7 +15688,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -15332,6 +15866,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-datepicker": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-7.5.0.tgz",
+      "integrity": "sha512-6MzeamV8cWSOcduwePHfGqY40acuGlS1cG//ePHT6bVbLxWyqngaStenfH03n1wbzOibFggF66kWaBTb1SbTtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.23",
+        "clsx": "^2.1.1",
+        "date-fns": "^3.6.0",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17 || ^18",
+        "react-dom": "^16.9.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-docgen": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-7.1.0.tgz",
@@ -15377,11 +15927,26 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.53.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.2.tgz",
+      "integrity": "sha512-YVel6fW5sOeedd1524pltpHX+jgU2u3DSDtXEaBORNdqiNrsX/nUI/iGXONegttg0mJVnfrIkiV0cmTU6Oo2xw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/react-refresh": {
@@ -16940,6 +17505,15 @@
       "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
       "license": "MIT"
     },
+    "node_modules/tailwind-merge": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.5.tgz",
+      "integrity": "sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.15",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.15.tgz",
@@ -17581,6 +18155,97 @@
         }
       }
     },
+    "node_modules/typescript-eslint/node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.15.0.tgz",
+      "integrity": "sha512-+zkm9AR1Ds9uLWN3fkoeXgFppaQ+uEVtfOV62dDmsy9QCNqlRHWNEck4yarvRNrvRcHQLGfqBNui3cimoz8XAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "8.15.0",
+        "@typescript-eslint/type-utils": "8.15.0",
+        "@typescript-eslint/utils": "8.15.0",
+        "@typescript-eslint/visitor-keys": "8.15.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.3.1",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0",
+        "eslint": "^8.57.0 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/typescript-eslint/node_modules/@typescript-eslint/parser": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.15.0.tgz",
+      "integrity": "sha512-7n59qFpghG4uazrF9qtGKBZXn7Oz4sOMm8dwNWDQY96Xlm2oX67eipqcblDj+oY1lLCbf1oltMZFpUso66Kl1A==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.15.0",
+        "@typescript-eslint/types": "8.15.0",
+        "@typescript-eslint/typescript-estree": "8.15.0",
+        "@typescript-eslint/visitor-keys": "8.15.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/typescript-eslint/node_modules/@typescript-eslint/type-utils": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.15.0.tgz",
+      "integrity": "sha512-UU6uwXDoI3JGSXmcdnP5d8Fffa2KayOhUUqr/AiBnG1Gl7+7ut/oyagVeSkh7bxQ0zSXV9ptRh/4N15nkCqnpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/typescript-estree": "8.15.0",
+        "@typescript-eslint/utils": "8.15.0",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -18423,6 +19088,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zod": {
+      "version": "3.23.8",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/zustand": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.1.tgz",
diff --git a/package.json b/package.json
index 06ec9e28..8209897d 100644
--- a/package.json
+++ b/package.json
@@ -27,12 +27,18 @@
   },
   "dependencies": {
     "@headlessui/react": "^2.2.0",
+    "@hookform/resolvers": "^3.9.1",
     "@tanstack/react-query": "^5.61.3",
     "@tanstack/react-query-devtools": "^5.61.3",
+    "@types/react-datepicker": "^6.2.0",
     "axios": "^1.7.8",
     "next": "15.0.3",
     "react": "^18.3.1",
+    "react-datepicker": "^7.5.0",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.2",
+    "tailwind-merge": "^2.5.5",
+    "zod": "^3.23.8",
     "zustand": "^5.0.1"
   },
   "devDependencies": {
@@ -52,6 +58,8 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@typescript-eslint/eslint-plugin": "^8.16.0",
+    "@typescript-eslint/parser": "^8.16.0",
     "autoprefixer": "^10.4.20",
     "chromatic": "^11.19.0",
     "eslint": "^8.57.1",
diff --git a/public/icons/EditIcon.tsx b/public/icons/EditIcon.tsx
new file mode 100644
index 00000000..da762f81
--- /dev/null
+++ b/public/icons/EditIcon.tsx
@@ -0,0 +1,26 @@
+import { SVGProps } from 'react';
+
+interface EditIconProps extends SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+}
+
+function EditIcon({ width = 7, height = 9, ...props }: EditIconProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 7 9"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M3.12284 0.602564C3.30417 0.199663 3.77368 0.0288589 4.17151 0.221063L5.71719 0.967829C6.11502 1.16003 6.29053 1.64246 6.10919 2.04536L3.37194 8.12719C3.28474 8.32093 3.12502 8.46995 2.92801 8.54138L1.80364 8.94904C1.39456 9.09737 0.939295 8.87741 0.786006 8.4574L0.364689 7.30297C0.290865 7.10069 0.298382 6.87813 0.385582 6.68439L3.12284 0.602564Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default EditIcon;
diff --git a/public/icons/HeartIcon.tsx b/public/icons/HeartIcon.tsx
new file mode 100644
index 00000000..ccabe49b
--- /dev/null
+++ b/public/icons/HeartIcon.tsx
@@ -0,0 +1,40 @@
+import { SVGProps } from 'react';
+
+interface HeartIconProps extends SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+  isLiked: boolean;
+  onClick?: () => void;
+}
+
+function HeartIcon({
+  width = 40,
+  height = 40,
+  isLiked = false,
+  onClick,
+  ...props
+}: HeartIconProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      onClick={onClick}
+      className="cursor-pointer"
+      role="button"
+      aria-label={isLiked ? '좋아요 취소' : '좋아요'}
+      aria-pressed={isLiked}
+      {...props}
+    >
+      <path
+        d="M7.41811 23.1797L19.3157 34.3562C19.6401 34.6609 19.8023 34.8133 20.0003 34.8133C20.1983 34.8133 20.3606 34.6609 20.685 34.3562L32.5825 23.1797C35.8428 20.117 36.2387 15.077 33.4967 11.5428L32.9811 10.8783C29.7008 6.65032 23.1164 7.35937 20.8114 12.1888C20.4859 12.8709 19.5148 12.8709 19.1892 12.1888C16.8843 7.35937 10.2999 6.65032 7.01956 10.8783L6.50397 11.5428C3.7619 15.077 4.15782 20.117 7.41811 23.1797Z"
+        fill={isLiked ? '#FF337E' : 'white'}
+        className={!isLiked ? 'opacity-60' : ''}
+      />
+    </svg>
+  );
+}
+
+export default HeartIcon;
diff --git a/public/icons/HostIcon.tsx b/public/icons/HostIcon.tsx
new file mode 100644
index 00000000..9883640b
--- /dev/null
+++ b/public/icons/HostIcon.tsx
@@ -0,0 +1,26 @@
+import { SVGProps } from 'react';
+
+interface HostIconProps extends SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+}
+
+function HostIcon({ width = 8, height = 8, ...props }: HostIconProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 8 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M3.22758 0.545122C3.48605 -0.181707 4.51395 -0.181707 4.77242 0.545122V0.545122C4.93519 1.00284 5.45804 1.21941 5.89679 1.01085V1.01085C6.5935 0.679671 7.32033 1.4065 6.98915 2.10321V2.10321C6.78059 2.54197 6.99716 3.06481 7.45488 3.22758V3.22758C8.18171 3.48605 8.18171 4.51395 7.45488 4.77242V4.77242C6.99716 4.93519 6.78059 5.45804 6.98915 5.89679V5.89679C7.32033 6.5935 6.5935 7.32033 5.89679 6.98915V6.98915C5.45804 6.78059 4.93519 6.99716 4.77242 7.45488V7.45488C4.51395 8.18171 3.48605 8.18171 3.22758 7.45488V7.45488C3.06481 6.99716 2.54196 6.78059 2.10321 6.98915V6.98915C1.4065 7.32033 0.679671 6.5935 1.01085 5.89679V5.89679C1.21941 5.45804 1.00284 4.93519 0.545122 4.77242V4.77242C-0.181707 4.51395 -0.181707 3.48605 0.545122 3.22758V3.22758C1.00284 3.06481 1.21941 2.54196 1.01085 2.10321V2.10321C0.679671 1.4065 1.4065 0.679672 2.10321 1.01085V1.01085C2.54196 1.21941 3.06481 1.00284 3.22758 0.545122V0.545122Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+export default HostIcon;
diff --git a/public/icons/IcCheck.tsx b/public/icons/IcCheck.tsx
new file mode 100644
index 00000000..e78d9fe7
--- /dev/null
+++ b/public/icons/IcCheck.tsx
@@ -0,0 +1,46 @@
+import { SVGProps } from 'react';
+
+interface IcCheckProps extends SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+  className?: string;
+  filled?: boolean;
+}
+
+function IcCheck({
+  width = 24,
+  height = 24,
+  className = '',
+  filled = false,
+  ...props
+}: IcCheckProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <circle
+        cx="12"
+        cy="12"
+        r="9"
+        fill={filled ? 'currentColor' : 'none'}
+        stroke="currentColor"
+        strokeWidth="1.8"
+      />
+      <path
+        d="M8.5 11.8245L11.0087 14.3333L15.342 10"
+        stroke={filled ? 'white' : 'currentColor'}
+        strokeWidth="1.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default IcCheck;
diff --git a/public/icons/IcClose.tsx b/public/icons/IcClose.tsx
new file mode 100644
index 00000000..7ae8dd0f
--- /dev/null
+++ b/public/icons/IcClose.tsx
@@ -0,0 +1,34 @@
+import { SVGProps } from 'react';
+
+interface IcCloseProps extends SVGProps<SVGElement> {
+  width?: number;
+  height?: number;
+  isActive?: boolean;
+  color?: string;
+}
+
+function IcClose({
+  width = 24,
+  height = 24,
+  isActive = false,
+  color,
+}: IcCloseProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      fill="none"
+      className={`${isActive ? color : 'stroke-gray-dark-02'}`}
+    >
+      <path
+        stroke={isActive ? color : '#909192'}
+        strokeLinecap="round"
+        strokeWidth="1.8"
+        d="m5 5 14.5 14.5M19.5 5 5 19.5"
+      />
+    </svg>
+  );
+}
+
+export default IcClose;
diff --git a/public/icons/IcDropDown.tsx b/public/icons/IcDropDown.tsx
new file mode 100644
index 00000000..7c14ec6a
--- /dev/null
+++ b/public/icons/IcDropDown.tsx
@@ -0,0 +1,36 @@
+import { SVGProps } from 'react';
+
+interface IcDropDownProps extends SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+  isActive?: boolean;
+  color?: string;
+}
+
+function IcDropDown({
+  width = 24,
+  height = 24,
+  isActive = false,
+  color,
+}: IcDropDownProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      className={`${isActive ? color : 'stroke-gray-dark-02'}`}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M17 10L12 15L7 10"
+        stroke={isActive ? color : '#909192'}
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default IcDropDown;
diff --git a/public/icons/IcEdit.tsx b/public/icons/IcEdit.tsx
new file mode 100644
index 00000000..8900b58e
--- /dev/null
+++ b/public/icons/IcEdit.tsx
@@ -0,0 +1,29 @@
+import { SVGProps } from 'react';
+
+interface IcEditProps extends SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+  color?: string;
+}
+
+export default function IcEdit({
+  width = 13,
+  height = 17,
+  color = '#B4B5B6',
+}: IcEditProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 13 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.02081 1.22574C6.20672 0.824923 6.68172 0.652036 7.08177 0.839583L10.525 2.45381C10.9251 2.64135 11.0987 3.11831 10.9128 3.51913L6.14607 13.7962C6.05554 13.9913 5.89037 14.1415 5.68783 14.2128L3.18314 15.094C2.7735 15.2381 2.32329 15.027 2.16979 14.6189L1.23125 12.1235C1.15535 11.9217 1.1636 11.698 1.25413 11.5028L6.02081 1.22574Z"
+        fill={color}
+      />
+      <path d="M2.66699 1.56641L12.2024 6.04014" stroke="white" />
+    </svg>
+  );
+}
diff --git a/public/icons/IcFiltering.tsx b/public/icons/IcFiltering.tsx
new file mode 100644
index 00000000..790cc3c4
--- /dev/null
+++ b/public/icons/IcFiltering.tsx
@@ -0,0 +1,33 @@
+import { SVGProps } from 'react';
+
+interface IcFilteringProps extends SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+  isActive?: boolean;
+  color?: string;
+}
+
+function IcFiltering({
+  width = 24,
+  height = 24,
+  isActive = false,
+  color = '#111827',
+}: IcFilteringProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        stroke={isActive ? '#F9FAFB' : color}
+        d="M12.7151 15.4653C12.3975 15.7654 11.9008 15.7654 11.5832 15.4653L5.8047 10.006C5.26275 9.49404 5.6251 8.58286 6.37066 8.58286L17.9276 8.58286C18.6732 8.58286 19.0355 9.49404 18.4936 10.006L12.7151 15.4653Z"
+        fill={isActive ? '#F9FAFB' : color}
+      />
+    </svg>
+  );
+}
+
+export default IcFiltering;
diff --git a/public/icons/IcSorting.tsx b/public/icons/IcSorting.tsx
new file mode 100644
index 00000000..c5be40d6
--- /dev/null
+++ b/public/icons/IcSorting.tsx
@@ -0,0 +1,41 @@
+import { SVGProps } from 'react';
+
+interface IcSortingProps extends SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+  isActive?: boolean;
+  color?: string;
+}
+
+function IcSorting({
+  width = 24,
+  height = 24,
+  isActive = false,
+  color,
+}: IcSortingProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={`${isActive ? color : 'stroke-gray-dark-02'}`}
+    >
+      <path
+        d="M3 11L7 7M7 7L11 11M7 7V17"
+        stroke={isActive ? color : '#909192'}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M21 13L17 17M17 17L13 13M17 17V7"
+        stroke={isActive ? color : '#909192'}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default IcSorting;
diff --git a/public/icons/LocationIcon.tsx b/public/icons/LocationIcon.tsx
new file mode 100644
index 00000000..606ca39b
--- /dev/null
+++ b/public/icons/LocationIcon.tsx
@@ -0,0 +1,34 @@
+import { SVGProps } from 'react';
+
+interface LocationIconProps extends SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+}
+
+function LocationIcon({
+  width = 24,
+  height = 24,
+  ...props
+}: LocationIconProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M16.2427 15.3429L13.0605 18.5563C12.9213 18.6969 12.7561 18.8085 12.5742 18.8847C12.3923 18.9608 12.1973 19 12.0004 19C11.8035 19 11.6085 18.9608 11.4266 18.8847C11.2447 18.8085 11.0794 18.6969 10.9403 18.5563L7.75725 15.3429C6.91817 14.4955 6.34675 13.4159 6.11527 12.2407C5.88378 11.0654 6.00262 9.84718 6.45675 8.74011C6.91089 7.63303 7.67992 6.6868 8.66661 6.02106C9.6533 5.35533 10.8133 5 12 5C13.1867 5 14.3467 5.35533 15.3334 6.02106C16.3201 6.6868 17.0891 7.63303 17.5432 8.74011C17.9974 9.84718 18.1162 11.0654 17.8847 12.2407C17.6532 13.4159 17.0818 14.4955 16.2427 15.3429Z"
+        fill="#6C6C6D"
+      />
+      <path
+        d="M13.4142 12.4142C13.7893 12.0391 14 11.5304 14 11C14 10.4696 13.7893 9.96086 13.4142 9.58579C13.0391 9.21071 12.5304 9 12 9C11.4696 9 10.9609 9.21071 10.5858 9.58579C10.2107 9.96086 10 10.4696 10 11C10 11.5304 10.2107 12.0391 10.5858 12.4142C10.9609 12.7893 11.4696 13 12 13C12.5304 13 13.0391 12.7893 13.4142 12.4142Z"
+        fill="#FDFDFD"
+      />
+    </svg>
+  );
+}
+
+export default LocationIcon;
diff --git a/public/icons/RatingIcon.tsx b/public/icons/RatingIcon.tsx
new file mode 100644
index 00000000..14ae97b0
--- /dev/null
+++ b/public/icons/RatingIcon.tsx
@@ -0,0 +1,32 @@
+import { SVGProps } from 'react';
+
+interface RatingIconProps extends SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+  checked: boolean;
+}
+
+function RatingIcon({
+  width = 24,
+  height = 24,
+  checked = false,
+  ...props
+}: RatingIconProps) {
+  const heartColor = checked ? '#00a991' : '#d8d9db';
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M22.1 9.1C22 5.7 19.3 3 15.9 3C14.8 3 13.1 3.8 12.4 5.1C12.3 5.4 11.9 5.4 11.8 5.1C11 3.9 9.4 3.1 8.2 3.1C4.9 3.1 2.1 5.8 2 9.1V9.3C2 11 2.7 12.6 3.9 13.8C3.9 13.8 3.9 13.8 3.9 13.9C4 14 8.8 18.2 11 20.1C11.6 20.6 12.5 20.6 13.1 20.1C15.3 18.2 20 14 20.2 13.9C20.2 13.9 20.2 13.9 20.2 13.8C21.4 12.7 22.1 11.1 22.1 9.3V9.1Z"
+        fill={heartColor}
+      />
+    </svg>
+  );
+}
+export default RatingIcon;
diff --git a/public/icons/RightArrow.tsx b/public/icons/RightArrow.tsx
new file mode 100644
index 00000000..9f79fb23
--- /dev/null
+++ b/public/icons/RightArrow.tsx
@@ -0,0 +1,35 @@
+import { SVGProps } from 'react';
+
+interface RightArrowProps extends SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+  strokeColor?: string;
+}
+
+function RightArrow({
+  width = 18,
+  height = 18,
+  strokeColor = '#EA580C',
+  ...props
+}: RightArrowProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M3 9H14.625M14.625 9L8.25 2.625M14.625 9L8.25 15.375"
+        stroke={strokeColor}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default RightArrow;
diff --git a/public/icons/SearchIcon.tsx b/public/icons/SearchIcon.tsx
new file mode 100644
index 00000000..81a0d250
--- /dev/null
+++ b/public/icons/SearchIcon.tsx
@@ -0,0 +1,28 @@
+import { SVGProps } from 'react';
+
+interface SearchIconProps extends SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+}
+
+function SearchIcon({ width = 12, height = 12, ...props }: SearchIconProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M13 13L10.1 10.1M11.6667 6.33333C11.6667 9.27885 9.27885 11.6667 6.33333 11.6667C3.38781 11.6667 1 9.27885 1 6.33333C1 3.38781 3.38781 1 6.33333 1C9.27885 1 11.6667 3.38781 11.6667 6.33333Z"
+        stroke="currentColor"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export default SearchIcon;
diff --git a/public/icons/WaveIcon.tsx b/public/icons/WaveIcon.tsx
new file mode 100644
index 00000000..4bf5c6b6
--- /dev/null
+++ b/public/icons/WaveIcon.tsx
@@ -0,0 +1,52 @@
+import { SVGProps } from 'react';
+
+interface WaveIconProps extends SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+}
+
+function WaveIcon({ width = 20, height = 24, ...props }: WaveIconProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 20 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.58958 7.31498C6.10345 6.82885 6.10345 6.04067 6.58958 5.55454C7.07571 5.06841 7.86389 5.06841 8.35002 5.55454L15.6948 12.8994C15.7334 12.8345 15.7815 12.6994 15.7815 12.4827C15.7815 12.4098 15.6877 12.1807 15.5561 11.8591C15.0741 10.6814 14.0844 8.26305 15.3288 7.72974C16.4963 7.22938 17.418 9.80171 18.094 11.688C18.3353 12.3614 18.5452 12.9473 18.7239 13.2748C18.7451 13.3138 18.7671 13.3539 18.7898 13.3951C19.4904 14.6695 20.7748 17.006 17.7054 20.4043C14.5367 23.9124 9.89692 22.2149 8.3126 20.6306C7.58144 19.8994 6.88792 19.1833 6.26683 18.5344C6.26181 18.5296 6.25681 18.5247 6.25185 18.5197L1.61069 13.8785C1.12456 13.3924 1.12456 12.6042 1.61069 12.1181C2.09682 11.632 2.885 11.632 3.37113 12.1181L6.84618 15.5932L7.01749 15.4382L1.83662 10.2573C1.35049 9.77116 1.35049 8.98298 1.83662 8.49685C2.32275 8.01072 3.11092 8.01072 3.59706 8.49685L8.86595 13.7657L9.03764 13.6104L3.4212 7.99397C2.93507 7.50784 2.93507 6.71966 3.4212 6.23353C3.90733 5.7474 4.6955 5.7474 5.18164 6.23353L10.8861 11.938L11.0575 11.7829L6.58958 7.31498Z"
+        fill="#EA580C"
+      />
+      <path
+        d="M10.3965 2.97119C10.8179 2.95516 11.8202 3.11962 12.4579 3.90569C13.0955 4.69176 13.2707 5.6575 13.2786 6.04211"
+        stroke="#FACC15"
+        strokeWidth="1.19251"
+        strokeLinecap="round"
+      />
+      <path
+        d="M13.1699 1.29346C13.4306 1.28404 14.0509 1.38818 14.4465 1.88013C14.8421 2.37208 14.9518 2.97561 14.9572 3.21588"
+        stroke="#FACC15"
+        strokeWidth="1.19251"
+        strokeLinecap="round"
+      />
+      <path
+        d="M5.33594 20.6328C4.91816 20.6905 3.90451 20.6262 3.19213 19.9071C2.47974 19.1881 2.20977 18.2444 2.16383 17.8625"
+        stroke="#FACC15"
+        strokeWidth="1.19251"
+        strokeLinecap="round"
+      />
+      <path
+        d="M2.74219 22.5767C2.48371 22.6119 1.85617 22.5697 1.4138 22.1193C0.97143 21.669 0.802457 21.0793 0.773266 20.8407"
+        stroke="#FACC15"
+        strokeWidth="1.19251"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export default WaveIcon;
diff --git a/public/icons/index.ts b/public/icons/index.ts
index cb0ff5c3..a3f11b0e 100644
--- a/public/icons/index.ts
+++ b/public/icons/index.ts
@@ -1 +1,15 @@
-export {};
+export { default as IcCheck } from './IcCheck';
+export { default as RatingIcon } from './RatingIcon';
+export { default as IcDropDown } from './IcDropDown';
+export { default as IcSorting } from './IcSorting';
+export { default as IcFiltering } from './IcFiltering';
+export { default as HeartIcon } from './HeartIcon';
+export { default as RightArrow } from './RightArrow';
+export { default as WaveIcon } from './WaveIcon';
+export { default as VisibilityOn } from './visibility_on';
+export { default as VisibilityOff } from './visibility_off';
+export { default as LocationIcon } from './LocationIcon';
+export { default as HostIcon } from './HostIcon';
+export { default as IcClose } from './IcClose';
+export { default as EditIcon } from './EditIcon';
+export { default as IcEdit } from './IcEdit';
diff --git a/public/icons/visibility_off.tsx b/public/icons/visibility_off.tsx
new file mode 100644
index 00000000..669725f1
--- /dev/null
+++ b/public/icons/visibility_off.tsx
@@ -0,0 +1,22 @@
+import { SVGProps } from 'react';
+interface IcCheckProps extends SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+}
+function VisibilityOff({ width = 24, height = 24 }: IcCheckProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.7726 12.9729L14.6496 11.8499C14.8201 10.9601 14.5861 10.2012 13.9477 9.57296C13.3092 8.94476 12.5432 8.70374 11.6496 8.84989L10.5265 7.72684C10.7586 7.61914 10.9974 7.54157 11.2429 7.49414C11.4884 7.44671 11.7406 7.42299 11.9996 7.42299C13.1342 7.42299 14.0973 7.81882 14.889 8.61049C15.6807 9.40216 16.0765 10.3653 16.0765 11.4999C16.0765 11.7589 16.0544 12.0111 16.0101 12.2566C15.9659 12.5021 15.8867 12.7409 15.7726 12.9729ZM18.9534 16.0845L17.8496 15.0499C18.4829 14.5666 19.0496 14.0291 19.5496 13.4374C20.0496 12.8457 20.4663 12.1999 20.7996 11.4999C19.9663 9.81656 18.7621 8.47906 17.1871 7.48739C15.6121 6.49572 13.8829 5.99989 11.9996 5.99989C11.5163 5.99989 11.0454 6.03322 10.5871 6.09989C10.1288 6.16656 9.66625 6.26656 9.19959 6.39989L8.03424 5.23454C8.67012 4.98326 9.31851 4.798 9.97941 4.67877C10.6403 4.55953 11.3137 4.49991 11.9996 4.49991C14.1483 4.49991 16.122 5.05825 17.9207 6.17491C19.7194 7.29158 21.1028 8.80247 22.0707 10.7076C22.1374 10.8345 22.1858 10.9624 22.2159 11.0912C22.246 11.2201 22.2611 11.3563 22.2611 11.4999C22.2611 11.6435 22.2486 11.7797 22.2236 11.9085C22.1986 12.0374 22.1528 12.1653 22.0861 12.2922C21.7322 13.0448 21.288 13.7396 20.7534 14.3768C20.2188 15.014 19.6188 15.5832 18.9534 16.0845ZM11.9996 18.4999C9.89447 18.4999 7.96499 17.9374 6.21116 16.8124C4.45731 15.6874 3.06308 14.2056 2.02846 12.3672C1.94513 12.2403 1.88424 12.1025 1.84579 11.9537C1.80732 11.805 1.78809 11.6537 1.78809 11.4999C1.78809 11.346 1.80475 11.1973 1.83809 11.0537C1.87142 10.9102 1.92975 10.7698 2.01309 10.6326C2.38489 9.95311 2.80604 9.30599 3.27656 8.69124C3.74708 8.07649 4.2881 7.52553 4.89964 7.03837L2.64194 4.76526C2.50347 4.61655 2.4352 4.43995 2.43714 4.23546C2.43905 4.03098 2.51244 3.85631 2.65731 3.71144C2.80218 3.56657 2.97782 3.49414 3.18424 3.49414C3.39064 3.49414 3.56627 3.56657 3.71114 3.71144L20.288 20.2883C20.4265 20.4268 20.4999 20.5983 20.5082 20.8027C20.5165 21.0072 20.4432 21.187 20.288 21.3422C20.1432 21.487 19.9675 21.5595 19.7611 21.5595C19.5547 21.5595 19.3791 21.487 19.2342 21.3422L15.715 17.8537C15.1252 18.0819 14.5191 18.2467 13.8967 18.3479C13.2743 18.4492 12.6419 18.4999 11.9996 18.4999ZM5.95346 8.09216C5.36756 8.54473 4.84095 9.0566 4.37364 9.62777C3.90632 10.1989 3.51497 10.823 3.19959 11.4999C4.03292 13.1832 5.23709 14.5207 6.81209 15.5124C8.38709 16.5041 10.1163 16.9999 11.9996 16.9999C12.4291 16.9999 12.8519 16.971 13.2679 16.9133C13.6839 16.8557 14.0971 16.7666 14.5073 16.646L13.2419 15.3499C13.0393 15.4383 12.8371 15.4982 12.6352 15.5297C12.4332 15.5611 12.2214 15.5768 11.9996 15.5768C10.865 15.5768 9.90185 15.181 9.11019 14.3893C8.31852 13.5976 7.92269 12.6345 7.92269 11.4999C7.92269 11.2781 7.93999 11.0662 7.97461 10.8643C8.00923 10.6624 8.06756 10.4601 8.14961 10.2576L5.95346 8.09216Z"
+        fill="#111827"
+      />
+    </svg>
+  );
+}
+export default VisibilityOff;
diff --git a/public/icons/visibility_on.tsx b/public/icons/visibility_on.tsx
new file mode 100644
index 00000000..408068b1
--- /dev/null
+++ b/public/icons/visibility_on.tsx
@@ -0,0 +1,22 @@
+import { SVGProps } from 'react';
+interface IcCheckProps extends SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+}
+function VisibilityOn({ width = 24, height = 24 }: IcCheckProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.0021 15.5769C13.1352 15.5769 14.0976 15.1803 14.8892 14.3871C15.6809 13.5939 16.0767 12.6308 16.0767 11.4977C16.0767 10.3646 15.6802 9.40224 14.887 8.61058C14.0938 7.81891 13.1307 7.42308 11.9976 7.42308C10.8645 7.42308 9.9021 7.81966 9.11044 8.61282C8.31877 9.40601 7.92294 10.3692 7.92294 11.5023C7.92294 12.6353 8.31952 13.5977 9.11269 14.3894C9.90587 15.181 10.869 15.5769 12.0021 15.5769ZM11.9998 14.2C11.2498 14.2 10.6123 13.9375 10.0873 13.4125C9.56234 12.8875 9.29984 12.25 9.29984 11.5C9.29984 10.75 9.56234 10.1125 10.0873 9.58748C10.6123 9.06248 11.2498 8.79998 11.9998 8.79998C12.7498 8.79998 13.3873 9.06248 13.9123 9.58748C14.4373 10.1125 14.6998 10.75 14.6998 11.5C14.6998 12.25 14.4373 12.8875 13.9123 13.4125C13.3873 13.9375 12.7498 14.2 11.9998 14.2ZM11.9998 18.5C9.89472 18.5 7.96941 17.9384 6.22391 16.8153C4.47839 15.6923 3.08513 14.2147 2.04411 12.3827C1.96078 12.2391 1.89988 12.0944 1.86141 11.9485C1.82294 11.8027 1.80371 11.653 1.80371 11.4995C1.80371 11.346 1.82294 11.1965 1.86141 11.051C1.89988 10.9054 1.96078 10.7609 2.04411 10.6173C3.08513 8.78525 4.47839 7.30769 6.22391 6.18463C7.96941 5.06154 9.89472 4.5 11.9998 4.5C14.105 4.5 16.0303 5.06154 17.7758 6.18463C19.5213 7.30769 20.9145 8.78525 21.9556 10.6173C22.0389 10.7609 22.0998 10.9056 22.1383 11.0514C22.1767 11.1973 22.196 11.347 22.196 11.5005C22.196 11.654 22.1767 11.8035 22.1383 11.949C22.0998 12.0945 22.0389 12.2391 21.9556 12.3827C20.9145 14.2147 19.5213 15.6923 17.7758 16.8153C16.0303 17.9384 14.105 18.5 11.9998 18.5ZM11.9998 17C13.8832 17 15.6123 16.5041 17.1873 15.5125C18.7623 14.5208 19.9665 13.1833 20.7998 11.5C19.9665 9.81664 18.7623 8.47914 17.1873 7.48748C15.6123 6.49581 13.8832 5.99998 11.9998 5.99998C10.1165 5.99998 8.38734 6.49581 6.81234 7.48748C5.23734 8.47914 4.03317 9.81664 3.19984 11.5C4.03317 13.1833 5.23734 14.5208 6.81234 15.5125C8.38734 16.5041 10.1165 17 11.9998 17Z"
+        fill="#111827"
+      />
+    </svg>
+  );
+}
+export default VisibilityOn;
diff --git a/public/images/authImage.png b/public/images/authImage.png
new file mode 100644
index 00000000..6f47a906
Binary files /dev/null and b/public/images/authImage.png differ
diff --git a/public/images/profile.png b/public/images/profile.png
new file mode 100644
index 00000000..d5545356
Binary files /dev/null and b/public/images/profile.png differ
diff --git a/src/api/axios.ts b/src/api/axios.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/bookclub/[id]/page.tsx b/src/app/bookclub/[id]/page.tsx
new file mode 100644
index 00000000..44e3dbf1
--- /dev/null
+++ b/src/app/bookclub/[id]/page.tsx
@@ -0,0 +1,11 @@
+import { BookClubDetailPage } from '@/features/club-details/components';
+
+function BookClubDetail({}) {
+  return (
+    <>
+      <BookClubDetailPage />
+    </>
+  );
+}
+
+export default BookClubDetail;
diff --git a/src/app/bookclub/create/page.tsx b/src/app/bookclub/create/page.tsx
new file mode 100644
index 00000000..fa89244a
--- /dev/null
+++ b/src/app/bookclub/create/page.tsx
@@ -0,0 +1,5 @@
+import { CreateBookClubPage } from '@/features/club-create/container';
+
+export default function BookClubCreate() {
+  return <CreateBookClubPage />;
+}
diff --git a/src/app/bookclub/page.tsx b/src/app/bookclub/page.tsx
index 30cbc4fa..4477773c 100644
--- a/src/app/bookclub/page.tsx
+++ b/src/app/bookclub/page.tsx
@@ -1,9 +1,9 @@
-import Button from '@/components/button/Button';
+import { BookClubMainPage } from '@/features/bookclub/components';
 
 export default function Home() {
   return (
-    <div>
-      <Button />
-    </div>
+    <>
+      <BookClubMainPage />
+    </>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 70cc712d..f8380695 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,7 @@
 import type { Metadata } from 'next';
 import ReactQueryProviders from '@/lib/utils/reactQueryProvider';
+import HeaderBar from '@/components/header/HeaderBar';
+import Script from 'next/script';
 
 import '@/styles/globals.css';
 
@@ -14,9 +16,18 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body>
-        <ReactQueryProviders>{children}</ReactQueryProviders>
+    <html lang="ko">
+      <body className="flex h-full min-h-screen flex-col bg-white">
+        <Script
+          src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"
+          strategy="beforeInteractive"
+        />
+        <ReactQueryProviders>
+          <HeaderBar />
+          <main className="mx-auto flex w-full max-w-[1200px] flex-1 flex-col bg-white">
+            {children}
+          </main>
+        </ReactQueryProviders>
       </body>
     </html>
   );
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 16696478..0c4fff54 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -1,4 +1,15 @@
+import { Suspense } from 'react';
+import LoginForm from '@/features/auth/container/login-form/LoginForm';
+import AuthImage from '@/features/auth/container/auth-image/AuthImage';
+
 function Login() {
-  return <div>Login</div>;
+  return (
+    <div className="mx-auto flex w-full flex-1 flex-col items-center justify-center px-4 lg:flex-row lg:justify-between">
+      <AuthImage isLoginPage={true} />
+      <Suspense fallback={<div>Loading...</div>}>
+        <LoginForm />
+      </Suspense>
+    </div>
+  );
 }
 export default Login;
diff --git a/src/app/profile/[userId]/page.tsx b/src/app/profile/[userId]/page.tsx
new file mode 100644
index 00000000..0dad427c
--- /dev/null
+++ b/src/app/profile/[userId]/page.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Profile() {
+  return (
+    <div>
+      <div className="bg-black">profile page</div>
+    </div>
+  );
+}
+
+export default Profile;
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index e773ca10..673f3881 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -1,7 +1,8 @@
+import ProfilePage from '@/features/profile/components/ProfilePage';
 import React from 'react';
 
 const Profile = () => {
-  return <div>Profile</div>;
+  return <ProfilePage />;
 };
 
 export default Profile;
diff --git a/src/app/sign-up/page.tsx b/src/app/sign-up/page.tsx
new file mode 100644
index 00000000..0d2bc2e9
--- /dev/null
+++ b/src/app/sign-up/page.tsx
@@ -0,0 +1,14 @@
+import React, { Suspense } from 'react';
+import AuthImage from '@/features/auth/container/auth-image/AuthImage';
+import SignUpForm from '@/features/auth/container/sign-up/SignUpForm';
+
+export default function SignUpPage() {
+  return (
+    <div className="flex w-full flex-1 flex-col items-center justify-center px-4 lg:flex-row lg:justify-between">
+      <Suspense fallback={<div>Loading...</div>}>
+        <AuthImage />
+      </Suspense>
+      <SignUpForm />
+    </div>
+  );
+}
diff --git a/src/components/avatar-group/AvatarGroup.stories.tsx b/src/components/avatar-group/AvatarGroup.stories.tsx
new file mode 100644
index 00000000..d21d5e45
--- /dev/null
+++ b/src/components/avatar-group/AvatarGroup.stories.tsx
@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import AvatarGroup from './AvatarGroup';
+import Avatar from '@/components/avatar/Avatar';
+
+const meta = {
+  title: 'Components/AvatarGroup',
+  component: AvatarGroup,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof AvatarGroup>;
+
+export default meta;
+type Story = StoryObj<typeof AvatarGroup>;
+
+const renderAvatars = (count: number) =>
+  Array(count)
+    .fill(null)
+    .map((_, i) => (
+      <Avatar
+        key={i}
+        src={`https://picsum.photos/200/200?random=${i}`}
+        alt={`Avatar ${i + 1}`}
+      />
+    ));
+
+export const Small: Story = {
+  render: () => (
+    <AvatarGroup maxCount={4} size="sm">
+      {renderAvatars(16)}
+    </AvatarGroup>
+  ),
+};
+
+export const Medium: Story = {
+  render: () => (
+    <AvatarGroup maxCount={4} size="md">
+      {renderAvatars(16)}
+    </AvatarGroup>
+  ),
+};
+
+export const Large: Story = {
+  render: () => (
+    <AvatarGroup maxCount={4} size="lg">
+      {renderAvatars(16)}
+    </AvatarGroup>
+  ),
+};
+
+export const ShowMoreAvatars: Story = {
+  render: () => (
+    <AvatarGroup maxCount={6} size="md">
+      {renderAvatars(16)}
+    </AvatarGroup>
+  ),
+};
+
+export const FewAvatars: Story = {
+  render: () => (
+    <AvatarGroup maxCount={4} size="md">
+      {renderAvatars(3)}
+    </AvatarGroup>
+  ),
+};
diff --git a/src/components/avatar-group/AvatarGroup.test.tsx b/src/components/avatar-group/AvatarGroup.test.tsx
new file mode 100644
index 00000000..fc4199e1
--- /dev/null
+++ b/src/components/avatar-group/AvatarGroup.test.tsx
@@ -0,0 +1,70 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import AvatarGroup from './AvatarGroup';
+import Avatar from '../avatar/Avatar';
+
+const createMockAvatars = (count: number) => {
+  return Array.from({ length: count }, (_, index) => (
+    <Avatar
+      key={index}
+      src={`https://example.com/avatar${index}.jpg`}
+      alt={`Avatar ${index}`}
+    />
+  ));
+};
+
+describe('AvatarGroup', () => {
+  it('maxCount만큼의 아바타를 렌더링해야 한다', () => {
+    const maxCount = 3;
+    const totalAvatars = 5;
+
+    render(
+      <AvatarGroup maxCount={maxCount}>
+        {createMockAvatars(totalAvatars)}
+      </AvatarGroup>,
+    );
+
+    const avatarImages = screen.getAllByRole('img');
+    expect(avatarImages).toHaveLength(maxCount);
+  });
+
+  it('남은 아바타 개수를 표시해야 한다', () => {
+    const maxCount = 2;
+    const totalAvatars = 5;
+    const remainingCount = totalAvatars - maxCount;
+
+    render(
+      <AvatarGroup maxCount={maxCount}>
+        {createMockAvatars(totalAvatars)}
+      </AvatarGroup>,
+    );
+
+    const remainingCountElement = screen.getByText(/^\+\d+$/);
+    expect(remainingCountElement).toBeInTheDocument();
+    expect(remainingCountElement.textContent).toBe(`+${remainingCount}`);
+  });
+
+  it('maxCount보다 적은 아바타가 있으면 남은 개수를 표시하지 않아야 한다', () => {
+    const maxCount = 4;
+    const totalAvatars = 3;
+
+    render(
+      <AvatarGroup maxCount={maxCount}>
+        {createMockAvatars(totalAvatars)}
+      </AvatarGroup>,
+    );
+
+    const remainingCountElement = screen.queryByText(/^\+\d+$/);
+    expect(remainingCountElement).not.toBeInTheDocument();
+  });
+
+  it('기본 maxCount는 4여야 한다', () => {
+    const totalAvatars = 6;
+    const defaultMaxCount = 4;
+
+    render(<AvatarGroup>{createMockAvatars(totalAvatars)}</AvatarGroup>);
+
+    const avatarImages = screen.getAllByRole('img');
+    expect(avatarImages).toHaveLength(defaultMaxCount);
+  });
+});
diff --git a/src/components/avatar-group/AvatarGroup.tsx b/src/components/avatar-group/AvatarGroup.tsx
new file mode 100644
index 00000000..715cfaeb
--- /dev/null
+++ b/src/components/avatar-group/AvatarGroup.tsx
@@ -0,0 +1,48 @@
+import Avatar from '@/components/avatar/Avatar';
+import { AVATAR_SIZE, AvatarSize } from '@/constants';
+import { Children, ReactElement, cloneElement } from 'react';
+
+interface AvatarGroupProps {
+  children: ReactElement<typeof Avatar> | ReactElement<typeof Avatar>[];
+  maxCount?: number;
+  size?: AvatarSize;
+  isPast?: boolean;
+}
+
+function AvatarGroup({
+  children,
+  maxCount = 4,
+  size = 'sm',
+  isPast = false,
+}: AvatarGroupProps) {
+  const avatars = Children.toArray(children).slice(0, maxCount);
+  const remainingCount = Children.count(children) - maxCount;
+
+  return (
+    <div className="flex items-center">
+      <div className="flex -space-x-2.5">
+        {avatars.map((avatar, index) =>
+          cloneElement(avatar as ReactElement, {
+            key: index,
+            size,
+            isPast,
+          }),
+        )}
+
+        {remainingCount > 0 && (
+          <div
+            className={`relative flex items-center justify-center rounded-full border border-white bg-gray-normal-01 ${
+              AVATAR_SIZE[size]
+            } ${isPast ? 'opacity-40' : ''}`}
+          >
+            <span className={`text-sm font-medium text-gray-dark-01`}>
+              +{remainingCount}
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default AvatarGroup;
diff --git a/src/components/avatar/Avatar.stories.tsx b/src/components/avatar/Avatar.stories.tsx
new file mode 100644
index 00000000..8735bff5
--- /dev/null
+++ b/src/components/avatar/Avatar.stories.tsx
@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Avatar from './Avatar';
+
+const meta = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+
+export const Small: Story = {
+  args: {
+    src: 'https://picsum.photos/200',
+    alt: 'Avatar image',
+    size: 'sm',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    src: 'https://picsum.photos/200',
+    alt: 'Avatar image',
+    size: 'md',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    src: 'https://picsum.photos/200',
+    alt: 'Avatar image',
+    size: 'lg',
+  },
+};
+
+export const Clickable: Story = {
+  args: {
+    src: 'https://picsum.photos/200',
+    alt: 'Clickable Avatar',
+    size: 'md',
+    onClick: () => alert('Avatar clicked!'),
+  },
+};
diff --git a/src/components/avatar/Avatar.test.tsx b/src/components/avatar/Avatar.test.tsx
new file mode 100644
index 00000000..9d7543fc
--- /dev/null
+++ b/src/components/avatar/Avatar.test.tsx
@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react';
+import Avatar from './Avatar';
+import userEvent from '@testing-library/user-event';
+
+describe('Avatar 컴포넌트', () => {
+  const defaultProps = {
+    src: '/test-image.jpg',
+    alt: '테스트 이미지',
+  };
+
+  it('onClick 이벤트가 정상적으로 동작해야 한다', async () => {
+    const user = userEvent.setup();
+    const handleClick = jest.fn();
+    render(<Avatar {...defaultProps} onClick={handleClick} />);
+
+    const avatarContainer = screen.getByRole('img').parentElement;
+    await user.click(avatarContainer!);
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/components/avatar/Avatar.tsx b/src/components/avatar/Avatar.tsx
new file mode 100644
index 00000000..6f2c97dc
--- /dev/null
+++ b/src/components/avatar/Avatar.tsx
@@ -0,0 +1,34 @@
+import { AVATAR_SIZE, AvatarSize } from '@/constants';
+import Image from 'next/image';
+import { HTMLAttributes } from 'react';
+
+interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
+  src: string;
+  alt: string;
+  size?: AvatarSize;
+  isPast?: boolean;
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+function Avatar({
+  src,
+  alt,
+  size = 'sm',
+  isPast = false,
+  onClick,
+  ...props
+}: AvatarProps) {
+  return (
+    <div
+      className={`relative cursor-pointer overflow-hidden rounded-full ${
+        AVATAR_SIZE[size]
+      } ${isPast ? 'opacity-60 grayscale' : ''} ${props.className || ''}`}
+      onClick={onClick}
+      {...props}
+    >
+      <Image src={src} alt={alt} fill className="object-cover" />
+    </div>
+  );
+}
+
+export default Avatar;
diff --git a/src/components/button/Button.stories.ts b/src/components/button/Button.stories.ts
deleted file mode 100644
index 1a27d296..00000000
--- a/src/components/button/Button.stories.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Button from './Button';
-
-const meta: Meta<typeof Button> = {
-  title: 'Components/Button',
-  component: Button,
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const Primary: Story = {
-  args: {
-    // 버튼 props
-  },
-};
diff --git a/src/components/button/Button.stories.tsx b/src/components/button/Button.stories.tsx
new file mode 100644
index 00000000..3a62c91b
--- /dev/null
+++ b/src/components/button/Button.stories.tsx
@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Button from './Button';
+
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    componentSubtitle: '다양한 스타일과 크기를 지원하는 버튼 컴포넌트',
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Solid: Story = {
+  args: {
+    text: '확인',
+    size: 'medium',
+    fillType: 'solid',
+    themeColor: 'green-normal-01',
+  },
+};
+export const Outline: Story = {
+  args: {
+    text: '확인',
+    size: 'medium',
+    fillType: 'outline',
+    themeColor: 'green-normal-01',
+  },
+};
+
+export const LightSolid: Story = {
+  args: {
+    text: '확인',
+    size: 'modal',
+    fillType: 'lightSolid',
+    themeColor: 'green-normal-01',
+    lightColor: 'green-light-03',
+  },
+};
+export const Small: Story = {
+  args: {
+    text: '확인',
+    size: 'small',
+    fillType: 'outline',
+    themeColor: 'green-light-03',
+  },
+};
+
+export const Submitting: Story = {
+  args: {
+    text: '확인',
+    size: 'large',
+    fillType: 'solid',
+    themeColor: 'gray-normal-03',
+    isSubmitting: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: '로그인 및 회원가입에서 사용하는 버튼입니다.',
+      },
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    text: '생성하기',
+    size: 'large',
+    fillType: 'lightSolid',
+    themeColor: 'gray-dark-01',
+    lightColor: 'gray-normal-01',
+    disabled: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: '비활성화된 버튼입니다. 클릭이 불가능한 상태입니다.',
+      },
+    },
+  },
+};
diff --git a/src/components/button/Button.test.tsx b/src/components/button/Button.test.tsx
index 41fca76a..203d5d9e 100644
--- a/src/components/button/Button.test.tsx
+++ b/src/components/button/Button.test.tsx
@@ -1,3 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import Button from './Button';
+
 describe('Button', () => {
-  it('버튼이 정상적으로 렌더링됩니다', () => {});
+  it('버튼이 정상적으로 렌더링', () => {
+    render(
+      <Button
+        size="small"
+        fillType="solid"
+        themeColor="green-normal-01"
+        text="생성하기"
+      />,
+    );
+    const buttonElement = screen.getByText('생성하기');
+    expect(buttonElement).toBeInTheDocument();
+  });
+
+  it('버튼 클릭시 이벤트 핸들러 호출', async () => {
+    const user = userEvent.setup();
+    const handleClick = jest.fn();
+    render(
+      <Button
+        onClick={handleClick}
+        size="small"
+        fillType="solid"
+        themeColor="green-normal-01"
+        text="제출하기"
+      />,
+    );
+
+    const buttonElement = screen.getByRole('button', { name: '제출하기' });
+    await user.click(buttonElement);
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
index eda2d6e8..4a1b845d 100644
--- a/src/components/button/Button.tsx
+++ b/src/components/button/Button.tsx
@@ -1,7 +1,74 @@
 import React from 'react';
+import { twMerge } from 'tailwind-merge';
+import { COLOR_SCHEMES, SIZE } from '@/constants';
 
-const Button = () => {
-  return <div>Button</div>;
-};
+export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
+  text: string;
+  size: 'large' | 'medium' | 'small' | 'modal';
+  fillType: 'solid' | 'outline' | 'lightSolid';
+  themeColor: keyof typeof COLOR_SCHEMES;
+  lightColor?: keyof typeof COLOR_SCHEMES;
+  isSubmitting?: boolean;
+  className?: string;
+}
 
-export default Button;
+export default function Button({
+  text,
+  size,
+  fillType = 'solid',
+  themeColor = 'green-normal-01',
+  lightColor,
+  isSubmitting,
+  ...buttonProps
+}: ButtonProps) {
+  const { disabled, className } = buttonProps;
+
+  const sizeClasses = SIZE[size];
+  const baseClasses = 'rounded-[12px] font-semibold cursor-pointer';
+
+  const resolvedColor =
+    isSubmitting !== undefined
+      ? isSubmitting
+        ? 'gray-normal-03'
+        : 'green-normal-01'
+      : themeColor;
+
+  const variantClasses = (() => {
+    if (disabled) {
+      return `text-gray-dark-02 bg-gray-normal-02`;
+    }
+
+    switch (fillType) {
+      case 'solid':
+        return `text-gray-white ${COLOR_SCHEMES[resolvedColor]['bg']}`;
+      case 'outline':
+        return `bg-gray-white border ${COLOR_SCHEMES[resolvedColor]['text']} ${COLOR_SCHEMES[resolvedColor]['border']}`;
+      case 'lightSolid':
+        if (lightColor) {
+          return `${COLOR_SCHEMES[resolvedColor]['text']} ${COLOR_SCHEMES[lightColor]['bg']}`;
+        } else {
+          return `${COLOR_SCHEMES[resolvedColor]['text']} bg-gray-white`;
+        }
+    }
+  })();
+
+  const isButtonDisabled = isSubmitting || disabled;
+
+  const buttonClassName = twMerge(
+    sizeClasses,
+    baseClasses,
+    variantClasses,
+    isButtonDisabled && 'cursor-not-allowed',
+    className,
+  );
+
+  return (
+    <button
+      {...buttonProps}
+      className={buttonClassName}
+      disabled={isButtonDisabled}
+    >
+      {text}
+    </button>
+  );
+}
diff --git a/src/components/button2/Button2.stories.ts b/src/components/button2/Button2.stories.ts
deleted file mode 100644
index 50061e2a..00000000
--- a/src/components/button2/Button2.stories.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Button2 from './Button2';
-
-const meta: Meta<typeof Button2> = {
-  title: 'Components/Button',
-  component: Button2,
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Button2>;
-
-export const Primary2: Story = {
-  args: {
-    // 버튼 props
-  },
-};
-
-// 버튼 컴포넌트 스토리 추가
diff --git a/src/components/button2/Button2.tsx b/src/components/button2/Button2.tsx
deleted file mode 100644
index d02aaa5d..00000000
--- a/src/components/button2/Button2.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-const Button2 = () => {
-  return <div>hi</div>;
-};
-
-export default Button2;
diff --git a/src/components/card/Card.stories.tsx b/src/components/card/Card.stories.tsx
new file mode 100644
index 00000000..6965bd21
--- /dev/null
+++ b/src/components/card/Card.stories.tsx
@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Card from './Card';
+
+const meta = {
+  title: 'Components/Card/Elements',
+  component: Card,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+export const Box: Story = {
+  render: () => (
+    <Card.Box>
+      <p>Card Box Content</p>
+    </Card.Box>
+  ),
+};
+
+export const Image: Story = {
+  render: () => (
+    <Card.Image
+      url="https://picsum.photos/400/300"
+      alt="샘플 이미지"
+      isLiked={false}
+      onLikeClick={() => alert('좋아요 클릭!')}
+    />
+  ),
+};
+
+export const Title: Story = {
+  render: () => <Card.Title>모임 제목 예시</Card.Title>,
+};
+
+export const Location: Story = {
+  render: () => <Card.Location>서울특별시 강남구</Card.Location>,
+};
+
+export const DateTime: Story = {
+  render: () => <Card.DateTime>2024.03.15 (금) 19:00</Card.DateTime>,
+};
+
+export const Overlay: Story = {
+  render: () => (
+    <div className="relative h-[200px] w-[336px]">
+      <Card.Overlay onDelete={() => alert('삭제 버튼 클릭!')} />
+    </div>
+  ),
+};
+
+export const ImageWithLike: Story = {
+  render: () => (
+    <Card.Image
+      url="https://picsum.photos/400/300"
+      alt="좋아요된 이미지"
+      isLiked={true}
+      onLikeClick={() => alert('좋아요 클릭!')}
+    />
+  ),
+};
+
+export const BoxWithClick: Story = {
+  render: () => (
+    <Card.Box onClick={() => alert('박스 클릭!')}>
+      <p>클릭 가능한 Card Box</p>
+    </Card.Box>
+  ),
+};
diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx
new file mode 100644
index 00000000..2f8308d1
--- /dev/null
+++ b/src/components/card/Card.tsx
@@ -0,0 +1,618 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+import ParticipantCounter from '../participant-counter/ParticipantCounter';
+import AvatarGroup from '../avatar-group/AvatarGroup';
+import ProgressBar from '../progress-bar/ProgressBar';
+import Avatar from '../avatar/Avatar';
+import {
+  LocationIcon,
+  HostIcon,
+  HeartIcon,
+  RatingIcon,
+} from '../../../public/icons';
+import Image from 'next/image';
+import { twMerge } from 'tailwind-merge';
+import {
+  CardBoxProps,
+  CardTitleProps,
+  CardLocationProps,
+  CardDateTimeProps,
+  CardOverlayProps,
+  CardImageProps,
+  CardProps,
+  DefaultClubCard,
+  HostedClubCard,
+  ParticipatedClubCard,
+  DetailedClubCard,
+  CardHostInfo,
+  CardContextType,
+} from './types';
+import ClubChip from '@/components/chip/club-chip/ClubChip';
+import Button from '@/components/button/Button';
+
+const CardContext = createContext<CardContextType>({ isCanceled: false });
+
+// Box 컴포넌트
+function CardBox({ children, className = '', ...props }: CardBoxProps) {
+  return (
+    <div
+      className={twMerge(
+        'relative flex min-h-[180px] w-[336px] flex-1 flex-col rounded-[20px] border-2 border-gray-normal-01 p-6 md:w-full',
+        props.onClick && 'cursor-pointer',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+function CardImage({
+  url,
+  alt = '모임 이미지',
+  isLiked,
+  onLikeClick,
+  className,
+  isPast,
+  ...props
+}: CardImageProps) {
+  return (
+    <div
+      className={twMerge(
+        'relative min-h-[180px] w-[336px] overflow-hidden rounded-[20px] lg:w-[384px]',
+
+        className,
+      )}
+      {...props}
+    >
+      <Image
+        src={url}
+        alt={alt}
+        fill
+        className={twMerge('object-cover', isPast && 'grayscale')}
+      />
+      {isLiked !== undefined && (
+        <div className="absolute right-5 top-[15px] z-10">
+          <HeartIcon isLiked={isLiked} onClick={onLikeClick} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function CardTitle({ children, className, ...props }: CardTitleProps) {
+  return (
+    <h3
+      className={twMerge('text-xl font-semibold text-gray-black', className)}
+      {...props}
+    >
+      {children}
+    </h3>
+  );
+}
+
+function CardLocation({
+  children,
+  className,
+  textClassName,
+  ...props
+}: CardLocationProps) {
+  return (
+    <div className={twMerge('flex items-center', className)} {...props}>
+      <LocationIcon />
+      <span
+        className={twMerge(
+          'text-sm font-semibold text-gray-dark-03',
+          textClassName,
+        )}
+      >
+        {children}
+      </span>
+    </div>
+  );
+}
+
+function CardDateTime({ children, className, ...props }: CardDateTimeProps) {
+  return (
+    <span
+      className={twMerge('text-sm font-medium text-gray-dark-03', className)}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}
+
+// Overlay (모임 취소시 표시되는 오버레이)
+function CardOverlay({ onDelete }: CardOverlayProps) {
+  const { isCanceled } = useContext(CardContext);
+
+  if (!isCanceled) return null;
+
+  const handleDeleteClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onDelete?.();
+  };
+
+  return (
+    <div className="absolute inset-0 z-10 w-[336px] rounded-2xl bg-black/80 md:w-full">
+      <div className="flex h-full w-full flex-col items-center justify-center gap-3">
+        <p className="whitespace-pre-line text-center text-sm text-white">
+          {'호스트가 모임을 취소했어요.'}
+          <br />
+          {'새로운 모임을 찾아볼까요?'}
+        </p>
+        <Button
+          text="삭제하기"
+          size="small"
+          fillType="lightSolid"
+          themeColor="gray-darker"
+          lightColor="gray-white"
+          onClick={handleDeleteClick}
+        />
+      </div>
+    </div>
+  );
+}
+
+// Host 컴포넌트 (호스트 정보)
+function CardHost({
+  nickname,
+  avatar,
+  className,
+  isHost,
+  onClick,
+  ...props
+}: CardHostInfo) {
+  return (
+    <div className={`flex items-center gap-2 ${className || ''}`} {...props}>
+      <div className="relative">
+        <div className="flex h-10 w-10 items-center justify-center rounded-full border-2 border-gray-normal-01">
+          <Avatar
+            size="md"
+            src={
+              avatar?.src ||
+              `https://picsum.photos/200/200?random=${Math.floor(Math.random() * 1000)}`
+            }
+            alt={avatar?.alt || `${nickname}님의 프로필`}
+            onClick={onClick}
+          />
+        </div>
+        <div className="absolute -bottom-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full border-2 border-gray-normal-01 bg-green-normal-01">
+          <HostIcon />
+        </div>
+      </div>
+      <span className="text-xl font-semibold">
+        <span className="text-green-normal-01">
+          {isHost ? '나' : `${nickname}님`}
+        </span>
+        <span className="text-gray-darker">의 모임</span>
+      </span>
+    </div>
+  );
+}
+
+function Card(props: CardProps) {
+  const renderCardContent = () => {
+    switch (props.variant) {
+      case 'defaultClub':
+      default: {
+        const {
+          imageUrl,
+          imageAlt,
+          title,
+          location,
+          datetime,
+          isLiked,
+          onLikeClick,
+          current,
+          max,
+          isPast,
+          isCanceled,
+          meetingType,
+          onClick,
+          onDelete,
+          status,
+        } = props as DefaultClubCard & { variant: 'defaultClub' };
+
+        return (
+          <div className="flex flex-col gap-6 md:flex-row">
+            <Card.Image
+              url={imageUrl}
+              alt={imageAlt}
+              isLiked={isLiked}
+              isPast={isPast}
+              onLikeClick={onLikeClick}
+            />
+
+            <Card.Box onClick={onClick} className="justify-between">
+              <div className="flex flex-col gap-0.5">
+                <div className="flex justify-between">
+                  <Card.Title>{title}</Card.Title>
+                  <ClubChip variant={meetingType} isPast={isPast} />
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Card.Location>{location}</Card.Location>
+                  <Card.DateTime>{datetime}</Card.DateTime>
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <div className="flex items-center justify-between">
+                  <ParticipantCounter
+                    current={current}
+                    max={max}
+                    isPast={isPast}
+                  />
+                  <ClubChip variant={status} isPast={isPast} />
+                </div>
+                <ProgressBar
+                  percentage={(current / max) * 100}
+                  isPast={isPast}
+                />
+              </div>
+            </Card.Box>
+            {isCanceled && <Card.Overlay onDelete={onDelete} />}
+          </div>
+        );
+      }
+
+      case 'participatedClub': {
+        const {
+          imageUrl,
+          imageAlt,
+          isLiked,
+          onLikeClick,
+          isCanceled,
+          onClick,
+          onDelete,
+          status,
+          meetingType,
+          title,
+          location,
+          datetime,
+          isPast,
+          onWriteReview,
+          onCancel,
+        } = props as ParticipatedClubCard & { variant: 'participatedClub' };
+
+        return (
+          <div className="flex flex-col gap-6 md:flex-row">
+            <Card.Image
+              url={imageUrl}
+              alt={imageAlt}
+              isLiked={isLiked}
+              onLikeClick={onLikeClick}
+            />
+            <Card.Box onClick={onClick} className="justify-between">
+              <div className="flex flex-col gap-2.5">
+                <div className="flex justify-between">
+                  <div className="flex gap-2">
+                    <ClubChip variant={isPast ? 'completed' : 'scheduled'} />
+                    <ClubChip variant={status} />
+                  </div>
+                  <ClubChip variant={meetingType} />
+                </div>
+                <div className="flex flex-col">
+                  <Card.Title>{title}</Card.Title>
+                  <div className="flex items-center gap-1.5">
+                    <Card.Location>{location}</Card.Location>
+                    <Card.DateTime>{datetime}</Card.DateTime>
+                  </div>
+                </div>
+                <div className="w-full">
+                  {isPast ? (
+                    <Button
+                      text="리뷰 작성하기"
+                      size="modal"
+                      fillType="solid"
+                      themeColor="green-normal-01"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onWriteReview();
+                      }}
+                      className="w-full"
+                    />
+                  ) : (
+                    <Button
+                      text="참여 취소하기"
+                      size="modal"
+                      fillType="lightSolid"
+                      themeColor="gray-dark-01"
+                      lightColor="gray-normal-01"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onCancel();
+                      }}
+                      className="w-full"
+                    />
+                  )}
+                </div>
+              </div>
+            </Card.Box>
+            {isCanceled && <Card.Overlay onDelete={onDelete} />}
+          </div>
+        );
+      }
+
+      case 'hostedClub': {
+        const {
+          imageUrl,
+          imageAlt,
+          onClick,
+          status,
+          meetingType,
+          isPast,
+          title,
+          location,
+          datetime,
+          onCancel,
+          reviewScore,
+        } = props as HostedClubCard & { variant: 'hostedClub' };
+
+        return (
+          <div className="flex flex-col gap-6 md:flex-row">
+            <Card.Image url={imageUrl} alt={imageAlt} />
+            <Card.Box onClick={onClick} className="justify-between">
+              <div className="flex flex-col gap-2.5">
+                <div className="flex justify-between">
+                  <ClubChip variant={isPast ? 'completed' : status} />
+                  <ClubChip variant={meetingType} />
+                </div>
+                <div className="flex flex-col">
+                  <Card.Title>{title}</Card.Title>
+                  <div className="flex items-center gap-1.5">
+                    <Card.Location>{location}</Card.Location>
+                    <Card.DateTime>{datetime}</Card.DateTime>
+                  </div>
+                </div>
+                <div className="w-full">
+                  {!isPast ? (
+                    <Button
+                      text="모임 취소하기"
+                      size="modal"
+                      fillType="lightSolid"
+                      themeColor="gray-dark-01"
+                      lightColor="gray-normal-01"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onCancel();
+                      }}
+                      className="w-full"
+                    />
+                  ) : (
+                    <div className="pt-3 font-semibold">
+                      {reviewScore ? (
+                        <div className="flex items-center gap-1">
+                          <span className="text-gray-darker">
+                            북코들의 평점
+                          </span>
+                          <div className="flex items-center gap-1">
+                            <RatingIcon checked={true} />
+                            <span className="text-gray-darker">
+                              {reviewScore}
+                            </span>
+                            <span className="text-gray-dark-01">/ 5</span>
+                          </div>
+                        </div>
+                      ) : (
+                        <span className="text-gray-dark-01">
+                          아직 리뷰가 달리지 않았습니다
+                        </span>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </Card.Box>
+          </div>
+        );
+      }
+
+      case 'detailedClub': {
+        const {
+          imageUrl,
+          imageAlt,
+          title,
+          location,
+          datetime,
+          isLiked,
+          onLikeClick,
+          meetingType,
+          current,
+          max,
+          isPast,
+          host,
+          status,
+          participants,
+          onClick,
+          isHost,
+          isParticipant,
+          hasWrittenReview,
+          onCancel,
+          onParticipate,
+          onCancelParticipation,
+          onWriteReview,
+        } = props as DetailedClubCard & { variant: 'detailedClub' };
+
+        const renderButton = () => {
+          if (isHost) {
+            return (
+              <Button
+                text="취소하기"
+                size="modal"
+                fillType="lightSolid"
+                themeColor="gray-dark-01"
+                lightColor="gray-normal-01"
+                disabled={isPast}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onCancel?.();
+                }}
+                className="w-full"
+              />
+            );
+          }
+
+          if (isPast) {
+            if (!isParticipant) {
+              return (
+                <Button
+                  text="이미 지난 모임입니다"
+                  size="modal"
+                  fillType="lightSolid"
+                  themeColor="gray-dark-01"
+                  lightColor="gray-normal-01"
+                  disabled={true}
+                  className="w-full"
+                />
+              );
+            }
+
+            return (
+              <Button
+                text="리뷰 작성하기"
+                size="modal"
+                fillType="solid"
+                themeColor="green-normal-01"
+                disabled={hasWrittenReview}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onWriteReview?.();
+                }}
+                className="w-full"
+              />
+            );
+          }
+
+          if (isParticipant) {
+            return (
+              <Button
+                text="참여 취소하기"
+                size="modal"
+                fillType="lightSolid"
+                themeColor="gray-dark-01"
+                lightColor="gray-normal-01"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onCancelParticipation?.();
+                }}
+                className="w-full"
+              />
+            );
+          }
+
+          return (
+            <Button
+              text="참여하기"
+              size="modal"
+              fillType="solid"
+              themeColor="green-normal-01"
+              onClick={(e) => {
+                e.stopPropagation();
+                onParticipate?.();
+              }}
+              className="w-full"
+            />
+          );
+        };
+
+        return (
+          <div className="flex flex-col gap-6 md:flex-row">
+            <Card.Image
+              url={imageUrl}
+              alt={imageAlt}
+              isLiked={isLiked}
+              onLikeClick={onLikeClick}
+              isPast={isPast}
+              className="md:h-100%"
+            />
+
+            <div className="flex flex-1 flex-col gap-[14px]">
+              <div className="flex flex-col gap-2">
+                <Card.Host
+                  nickname={host.name}
+                  avatar={{
+                    src: host.profileImage,
+                    alt: `${host.name}님의 프로필`,
+                  }}
+                  isHost={isHost}
+                />
+
+                <Card.Box
+                  onClick={onClick}
+                  className="cursor-default justify-between"
+                >
+                  <div className="flex flex-col gap-0.5">
+                    <div className="flex justify-between">
+                      <Card.Title>{title}</Card.Title>
+                      <ClubChip variant={meetingType} isPast={isPast} />
+                    </div>
+                    <div className="flex items-center gap-1.5">
+                      <Card.Location>{location}</Card.Location>
+                      <Card.DateTime>{datetime}</Card.DateTime>
+                    </div>
+                  </div>
+
+                  <div className="flex flex-col gap-2">
+                    <div className="flex items-center justify-between">
+                      <div className="flex gap-2.5">
+                        <ParticipantCounter
+                          current={current}
+                          max={max}
+                          isPast={isPast}
+                        />
+                        <AvatarGroup isPast={isPast}>
+                          {participants.map((participant, index) => (
+                            <Avatar
+                              key={index}
+                              src={participant.profileImage || ''}
+                              alt={participant.profileImageAlt || ''}
+                            />
+                          ))}
+                        </AvatarGroup>
+                      </div>
+                      <ClubChip variant={status} isPast={isPast} />
+                    </div>
+                    <ProgressBar
+                      percentage={(current / max) * 100}
+                      isPast={isPast}
+                    />
+                  </div>
+                </Card.Box>
+              </div>
+
+              <div className="w-[336px] md:w-full">{renderButton()}</div>
+            </div>
+          </div>
+        );
+      }
+    }
+  };
+
+  return (
+    <CardContext.Provider
+      value={{ isCanceled: 'isCanceled' in props ? props.isCanceled : false }}
+    >
+      <article
+        className={twMerge(
+          'relative flex h-full w-full min-w-[336px] flex-col',
+        )}
+      >
+        {renderCardContent()}
+      </article>
+    </CardContext.Provider>
+  );
+}
+
+Card.Box = CardBox;
+Card.Image = CardImage;
+Card.Title = CardTitle;
+Card.Location = CardLocation;
+Card.DateTime = CardDateTime;
+Card.Overlay = CardOverlay;
+Card.Host = CardHost;
+
+export default Card;
diff --git a/src/components/card/ClubCard.stories.tsx b/src/components/card/ClubCard.stories.tsx
new file mode 100644
index 00000000..f5164924
--- /dev/null
+++ b/src/components/card/ClubCard.stories.tsx
@@ -0,0 +1,316 @@
+// 모임 카드 스토리
+import type { Meta, StoryObj } from '@storybook/react';
+import Card from './Card';
+
+const meta = {
+  title: 'Components/Card/Club',
+  component: Card,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    meetingType: {
+      control: 'select',
+      options: ['FREE', 'FIXED'],
+    },
+    status: {
+      control: 'select',
+      options: ['completed', 'scheduled', 'pending', 'confirmed', 'closed'],
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+const baseArgs = {
+  // ClubCard 기본 인터페이스의 속성들
+  imageUrl: 'https://picsum.photos/400/300',
+  imageAlt: '모임 이미지',
+  title: '을지로 독서 모임',
+  location: '을지로 3가',
+  datetime: '12/14(토) 오전 10:00',
+  meetingType: 'FREE' as const,
+  isPast: false,
+  status: 'confirmed' as const,
+  onClick: () => alert('카드 클릭!'),
+} as const;
+
+const defaultArgs = {
+  ...baseArgs,
+  variant: 'defaultClub',
+  isLiked: false,
+  onLikeClick: () => alert('좋아요 클릭!'),
+  isCanceled: false,
+  onDelete: () => alert('삭제 버튼 클릭!'),
+  current: 5,
+  max: 10,
+} as const;
+
+const hostedArgs = {
+  ...baseArgs,
+  variant: 'hostedClub',
+  onCancel: () => alert('모임 취소하기 클릭!'),
+  reviewScore: 4.5,
+} as const;
+
+const participatedArgs = {
+  ...baseArgs,
+  variant: 'participatedClub',
+  isLiked: false,
+  onLikeClick: () => alert('좋아요 클릭!'),
+  isCanceled: false,
+  onDelete: () => alert('삭제 버튼 클릭!'),
+  onWriteReview: () => alert('리뷰 작성하기 클릭!'),
+  onCancel: () => alert('참여 취소하기 클릭!'),
+} as const;
+
+const detailedArgs = {
+  ...baseArgs,
+  variant: 'detailedClub',
+  isLiked: false,
+  onLikeClick: () => alert('좋아요 클릭!'),
+  current: 5,
+  max: 10,
+  participants: [
+    {
+      id: '1',
+      name: '참여자1',
+      profileImage: 'https://picsum.photos/200/200?random=1',
+      profileImageAlt: '참여자1 프로필 이미지',
+    },
+    {
+      id: '2',
+      name: '참여자2',
+      profileImage: 'https://picsum.photos/200/200?random=2',
+      profileImageAlt: '참여자2 프로필 이미지',
+    },
+    {
+      id: '3',
+      name: '참여자3',
+      profileImage: 'https://picsum.photos/200/200?random=3',
+      profileImageAlt: '참여자3 프로필 이미지',
+    },
+    {
+      id: '4',
+      name: '참여자4',
+      profileImage: 'https://picsum.photos/200/200?random=4',
+      profileImageAlt: '참여자4 프로필 이미지',
+    },
+    {
+      id: '5',
+      name: '참여자5',
+      profileImage: 'https://picsum.photos/200/200?random=5',
+      profileImageAlt: '참여자5 프로필 이미지',
+    },
+  ],
+  host: {
+    id: 'host1',
+    name: '호스트',
+    profileImage: 'https://picsum.photos/200/200?random=host',
+  },
+  isHost: false,
+  isParticipant: true,
+  hasWrittenReview: false,
+  onCancel: () => alert('모임 취소하기 클릭!'),
+  onParticipate: () => alert('모임 참여하기 클릭!'),
+  onCancelParticipation: () => alert('참여 취소하기 클릭!'),
+  onWriteReview: () => alert('리뷰 작성하기 클릭!'),
+} as const;
+
+// 책모임, 찜
+export const DefaultMobile: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+  args: defaultArgs,
+};
+
+export const DefaultTablet: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'tablet',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[700px]">
+        <Story />
+      </div>
+    ),
+  ],
+  args: defaultArgs,
+};
+
+export const DefaultDesktop: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'desktop',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[1000px]">
+        <Story />
+      </div>
+    ),
+  ],
+  args: defaultArgs,
+};
+
+// 내가 만든 모임
+export const HostedMobile: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+  args: hostedArgs,
+};
+
+export const HostedTablet: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'tablet',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[700px]">
+        <Story />
+      </div>
+    ),
+  ],
+  args: hostedArgs,
+};
+
+export const HostedDesktop: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'desktop',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[1000px]">
+        <Story />
+      </div>
+    ),
+  ],
+  args: hostedArgs,
+};
+
+// 나의 모임 (내가 참여한 모임)
+export const ParticipatedMobile: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+  args: participatedArgs,
+};
+
+export const ParticipatedTablet: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'tablet',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[700px]">
+        <Story />
+      </div>
+    ),
+  ],
+  args: participatedArgs,
+};
+
+export const ParticipatedDesktop: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'desktop',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[1000px]">
+        <Story />
+      </div>
+    ),
+  ],
+  args: participatedArgs,
+};
+
+// 상세 모임
+export const DetailedMobile: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+  args: detailedArgs,
+};
+
+export const DetailedTablet: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'tablet',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[700px]">
+        <Story />
+      </div>
+    ),
+  ],
+  args: detailedArgs,
+};
+
+export const DetailedDesktop: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'desktop',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[1000px]">
+        <Story />
+      </div>
+    ),
+  ],
+  args: detailedArgs,
+};
diff --git a/src/components/card/types/card.ts b/src/components/card/types/card.ts
new file mode 100644
index 00000000..710fd308
--- /dev/null
+++ b/src/components/card/types/card.ts
@@ -0,0 +1,75 @@
+import {
+  DefaultClubCard,
+  DetailedClubCard,
+  HostedClubCard,
+  ParticipatedClubCard,
+} from '@/components/card/types/clubCard';
+import { ComponentPropsWithoutRef } from 'react';
+
+interface CardBoxProps extends ComponentPropsWithoutRef<'div'> {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface CardTitleProps extends ComponentPropsWithoutRef<'h3'> {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface CardLocationProps extends ComponentPropsWithoutRef<'div'> {
+  children: React.ReactNode;
+  className?: string;
+  textClassName?: string;
+}
+
+interface CardDateTimeProps extends ComponentPropsWithoutRef<'span'> {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface CardImageProps extends ComponentPropsWithoutRef<'div'> {
+  url: string;
+  alt?: string;
+  isLiked?: boolean;
+  isPast?: boolean;
+  onLikeClick?: () => void;
+}
+
+interface CardOverlayProps extends ComponentPropsWithoutRef<'div'> {
+  onDelete?: () => void;
+}
+
+interface CardHostInfo extends ComponentPropsWithoutRef<'div'> {
+  nickname: string;
+  onHostClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+  isHost: boolean;
+  avatar?: {
+    src?: string;
+    alt?: string;
+  };
+}
+
+interface CardContextType {
+  isCanceled: boolean;
+}
+
+type CardProps = {
+  variant?: 'defaultClub' | 'participatedClub' | 'hostedClub' | 'detailedClub';
+} & (
+  | (DefaultClubCard & { variant?: 'defaultClub' })
+  | (HostedClubCard & { variant?: 'hostedClub' })
+  | (ParticipatedClubCard & { variant?: 'participatedClub' })
+  | (DetailedClubCard & { variant?: 'detailedClub' })
+);
+
+export type {
+  CardBoxProps,
+  CardTitleProps,
+  CardLocationProps,
+  CardDateTimeProps,
+  CardImageProps,
+  CardOverlayProps,
+  CardHostInfo,
+  CardContextType,
+  CardProps,
+};
diff --git a/src/components/card/types/clubCard.ts b/src/components/card/types/clubCard.ts
new file mode 100644
index 00000000..5298db4b
--- /dev/null
+++ b/src/components/card/types/clubCard.ts
@@ -0,0 +1,98 @@
+interface ClubCard {
+  // 이미지 정보
+  imageUrl: string;
+  imageAlt?: string;
+
+  // 모임 정보
+  title: string;
+  location: string;
+  datetime: string;
+  meetingType: 'FREE' | 'FIXED';
+  isPast: boolean; // 지난 모임인지 아닌지
+  status: 'completed' | 'scheduled' | 'pending' | 'confirmed' | 'closed'; // 개설 현황
+
+  // 액션 (카드 클릭시 라우터 처리 등)
+  onClick: () => void;
+}
+
+interface DefaultClubCard extends ClubCard {
+  // 찜 정보
+  isLiked: boolean;
+  onLikeClick: () => void;
+
+  // 취소 정보 (블러)
+  isCanceled: boolean;
+  onDelete: () => void;
+
+  // 참가자 현황
+  current: number;
+  max: number;
+}
+
+interface ParticipatedClubCard extends ClubCard {
+  // 찜 정보
+  isLiked: boolean;
+  onLikeClick: () => void;
+
+  // 취소 정보 (블러)
+  isCanceled: boolean;
+  onDelete: () => void;
+
+  // 버튼 액션
+  onWriteReview: () => void; // 리뷰 작성
+  onCancel: () => void; // 모임 취소
+}
+
+interface HostedClubCard extends ClubCard {
+  // 모임 취소 액션
+  onCancel: () => void;
+
+  // 리뷰 정보
+  reviewScore?: number;
+}
+
+interface DetailedClubCard extends ClubCard {
+  // 찜 정보
+  isLiked: boolean;
+  onLikeClick: () => void;
+
+  // 참가자 정보
+  current: number;
+  max: number;
+  participants: ReadonlyArray<{
+    readonly id?: string;
+    readonly name: string;
+    readonly profileImage?: string;
+    readonly profileImageAlt?: string;
+  }>;
+
+  // 호스트 정보
+  host: {
+    id?: string;
+    name: string;
+    profileImage?: string;
+  };
+
+  // 호스트 여부
+  isHost: boolean;
+
+  // 해당 모임의 참여자인지 여부
+  isParticipant: boolean;
+
+  // 리뷰 작성 여부
+  hasWrittenReview?: boolean;
+
+  // 액션 핸들러
+  onCancel?: () => void; // 모임 취소
+  onParticipate?: () => void; // 참여
+  onCancelParticipation?: () => void; // 참여 취소
+  onWriteReview?: () => void; // 리뷰 작성
+}
+
+export type {
+  ClubCard,
+  DefaultClubCard,
+  HostedClubCard,
+  ParticipatedClubCard,
+  DetailedClubCard,
+};
diff --git a/src/components/card/types/index.ts b/src/components/card/types/index.ts
new file mode 100644
index 00000000..cf51da62
--- /dev/null
+++ b/src/components/card/types/index.ts
@@ -0,0 +1,2 @@
+export * from './card';
+export * from './clubCard';
diff --git a/src/components/chip/Chip.stories.tsx b/src/components/chip/Chip.stories.tsx
new file mode 100644
index 00000000..65e6d013
--- /dev/null
+++ b/src/components/chip/Chip.stories.tsx
@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Chip from './Chip';
+
+const meta = {
+  title: 'Components/Chip/Base',
+  component: Chip,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Chip>;
+
+export default meta;
+type Story = StoryObj<typeof Chip>;
+
+export const RoundedFilled: Story = {
+  args: {
+    text: '모집중',
+    variant: 'rounded-filled',
+  },
+};
+
+export const RoundedLight: Story = {
+  args: {
+    text: '1월 7일',
+    variant: 'rounded-light',
+  },
+};
+
+export const SquareOutlined: Story = {
+  args: {
+    text: '오프라인',
+    variant: 'square-outlined',
+  },
+};
+
+export const SquareFilled: Story = {
+  args: {
+    text: '마감',
+    variant: 'square-filled',
+  },
+};
+
+export const Past: Story = {
+  args: {
+    text: '자유책',
+    variant: 'rounded-filled',
+    isPast: true,
+  },
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex gap-2">
+        <Chip text="모집중" variant="rounded-filled" />
+        <Chip text="1월 7일" variant="rounded-light" />
+        <Chip text="오프라인" variant="square-outlined" />
+        <Chip text="마감" variant="square-filled" />
+      </div>
+      <div className="flex gap-2">
+        <Chip text="자유책" variant="rounded-filled" isPast={true} />
+        <Chip text="1월 7일" variant="rounded-light" isPast={true} />
+        <Chip text="오프라인" variant="square-outlined" isPast={true} />
+        <Chip text="마감" variant="square-filled" isPast={true} />
+      </div>
+    </div>
+  ),
+};
diff --git a/src/components/chip/Chip.test.tsx b/src/components/chip/Chip.test.tsx
new file mode 100644
index 00000000..0611475d
--- /dev/null
+++ b/src/components/chip/Chip.test.tsx
@@ -0,0 +1,18 @@
+import Chip from '@/components/chip/Chip';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+
+describe('Chip', () => {
+  it('텍스트가 올바르게 렌더링되어야 한다', () => {
+    render(<Chip text="테스트" />);
+    const chip = screen.getByText('테스트');
+    expect(chip).toBeInTheDocument();
+  });
+
+  it('className prop으로 스타일을 오버라이드할 수 있어야 한다', () => {
+    render(<Chip text="테스트" className="text-blue-500" />);
+    const chip = screen.getByText('테스트');
+    expect(chip).toHaveClass('text-blue-500');
+    expect(chip).not.toHaveClass('text-green-darker');
+  });
+});
diff --git a/src/components/chip/Chip.tsx b/src/components/chip/Chip.tsx
new file mode 100644
index 00000000..af5810ef
--- /dev/null
+++ b/src/components/chip/Chip.tsx
@@ -0,0 +1,41 @@
+import { twMerge } from 'tailwind-merge';
+
+const CHIP_VARIANTS = {
+  'rounded-filled':
+    'rounded-full bg-green-light-02 text-green-dark-01 font-semibold',
+  'rounded-light':
+    'rounded-full bg-green-normal-01 text-gray-white font-semibold',
+  'square-outlined':
+    'rounded-md border border-green-normal-01 bg-gray-white text-green-normal-01',
+  'square-filled': 'rounded-md bg-green-normal-01 text-gray-white px-2',
+} as const;
+
+type ChipVariant = keyof typeof CHIP_VARIANTS;
+
+interface ChipProps {
+  text: string;
+  variant?: ChipVariant;
+  isPast?: boolean;
+  className?: string;
+}
+
+function Chip({
+  text,
+  variant = 'rounded-filled',
+  isPast = false,
+  className,
+}: ChipProps) {
+  const baseStyles =
+    'inline-flex items-center justify-center px-2.5 py-1 text-sm font-medium';
+
+  const combinedClassName = twMerge(
+    baseStyles,
+    CHIP_VARIANTS[variant],
+    isPast && 'bg-gray-normal-01 text-gray-dark-02',
+    className,
+  );
+
+  return <span className={combinedClassName}>{text}</span>;
+}
+
+export default Chip;
diff --git a/src/components/chip/club-chip/ClubChip.stories.tsx b/src/components/chip/club-chip/ClubChip.stories.tsx
new file mode 100644
index 00000000..e9281ee8
--- /dev/null
+++ b/src/components/chip/club-chip/ClubChip.stories.tsx
@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ClubChip from './ClubChip';
+
+const meta = {
+  title: 'Components/Chip/ClubChip',
+  component: ClubChip,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof ClubChip>;
+
+export default meta;
+type Story = StoryObj<typeof ClubChip>;
+
+export const Completed: Story = {
+  args: {
+    variant: 'completed',
+  },
+};
+
+export const Scheduled: Story = {
+  args: {
+    variant: 'scheduled',
+  },
+};
+
+export const Pending: Story = {
+  args: {
+    variant: 'pending',
+  },
+};
+
+export const Confirmed: Story = {
+  args: {
+    variant: 'confirmed',
+  },
+};
+
+export const FreeBook: Story = {
+  args: {
+    variant: 'FREE',
+  },
+};
+
+export const FixedBook: Story = {
+  args: {
+    variant: 'FIXED',
+  },
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <div className="flex gap-2">
+      <ClubChip variant="completed" />
+      <ClubChip variant="scheduled" />
+      <ClubChip variant="pending" />
+      <ClubChip variant="confirmed" />
+      <ClubChip variant="closed" />
+      <ClubChip variant="FREE" />
+      <ClubChip variant="FIXED" />
+    </div>
+  ),
+};
diff --git a/src/components/chip/club-chip/ClubChip.test.tsx b/src/components/chip/club-chip/ClubChip.test.tsx
new file mode 100644
index 00000000..f511a9a2
--- /dev/null
+++ b/src/components/chip/club-chip/ClubChip.test.tsx
@@ -0,0 +1,29 @@
+import ClubChip from './ClubChip';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+
+describe('ClubChip', () => {
+  it('variant에 따라 올바른 텍스트가 렌더링되어야 한다', () => {
+    render(<ClubChip variant="completed" />);
+    expect(screen.getByText('참여완료')).toBeInTheDocument();
+  });
+
+  it('모든 variant가 올바르게 렌더링되어야 한다', () => {
+    const { rerender } = render(<ClubChip variant="completed" />);
+    expect(screen.getByText('참여완료')).toBeInTheDocument();
+
+    rerender(<ClubChip variant="scheduled" />);
+    expect(screen.getByText('참여예정')).toBeInTheDocument();
+
+    rerender(<ClubChip variant="pending" />);
+    expect(screen.getByText('개설대기')).toBeInTheDocument();
+
+    rerender(<ClubChip variant="confirmed" />);
+    expect(screen.getByText('개설확정')).toBeInTheDocument();
+  });
+
+  it('className prop으로 스타일을 오버라이드할 수 있어야 한다', () => {
+    render(<ClubChip variant="completed" className="custom-class" />);
+    expect(screen.getByText('참여완료')).toHaveClass('custom-class');
+  });
+});
diff --git a/src/components/chip/club-chip/ClubChip.tsx b/src/components/chip/club-chip/ClubChip.tsx
new file mode 100644
index 00000000..08e2e67e
--- /dev/null
+++ b/src/components/chip/club-chip/ClubChip.tsx
@@ -0,0 +1,68 @@
+import Chip from '../Chip';
+import { twMerge } from 'tailwind-merge';
+
+type ClubChipVariant =
+  | 'completed'
+  | 'scheduled'
+  | 'pending'
+  | 'confirmed'
+  | 'closed'
+  | 'FREE'
+  | 'FIXED';
+
+const CLUB_CHIP_TEXT = {
+  completed: '참여완료',
+  scheduled: '참여예정',
+  pending: '개설대기',
+  confirmed: '개설확정',
+  closed: '모집마감',
+  FREE: '자유책',
+  FIXED: '지정책',
+} as const;
+
+const CLUB_CHIP_VARIANT = {
+  completed: 'square-filled',
+  scheduled: 'square-filled',
+  pending: 'square-outlined',
+  confirmed: 'square-filled',
+  closed: 'square-filled',
+  FREE: 'rounded-filled',
+  FIXED: 'rounded-light',
+} as const;
+
+const CLUB_CHIP_STYLE = {
+  completed: 'bg-gray-normal-01 text-gray-dark-02',
+  scheduled: 'bg-green-light-03 text-green-dark-01',
+  pending: 'border-blue-light-active text-blue-light-active',
+  confirmed: 'bg-blue-light text-blue-light-active',
+  closed: 'bg-blue-normal text-gray-white',
+  FREE: '',
+  FIXED: '',
+} as const;
+
+const PAST_STATUS_STYLE = 'bg-gray-dark-02 text-gray-white';
+const PAST_BOOK_TYPE_STYLE = 'bg-gray-normal-01 text-gray-dark-02';
+
+interface ClubChipProps {
+  variant: ClubChipVariant;
+  className?: string;
+  isPast?: boolean;
+}
+
+function ClubChip({ variant, className, isPast = false }: ClubChipProps) {
+  const style = isPast
+    ? ['FREE', 'FIXED'].includes(variant)
+      ? PAST_BOOK_TYPE_STYLE
+      : PAST_STATUS_STYLE
+    : CLUB_CHIP_STYLE[variant];
+
+  return (
+    <Chip
+      text={CLUB_CHIP_TEXT[variant]}
+      variant={CLUB_CHIP_VARIANT[variant]}
+      className={twMerge(style, className)}
+    />
+  );
+}
+
+export default ClubChip;
diff --git a/src/components/confirmed-label/ConfirmedLabel.stories.tsx b/src/components/confirmed-label/ConfirmedLabel.stories.tsx
new file mode 100644
index 00000000..50f68f53
--- /dev/null
+++ b/src/components/confirmed-label/ConfirmedLabel.stories.tsx
@@ -0,0 +1,144 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ConfirmedLabel from './ConfirmedLabel';
+
+const meta = {
+  title: 'Components/ConfirmedLabel',
+  component: ConfirmedLabel,
+  parameters: {
+    componentSubtitle: '개설확정/모집마감 상태를 표시하는 컴포넌트',
+  },
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: ['confirmed', 'closed'],
+      description: '라벨의 상태를 지정합니다.',
+      table: {
+        defaultValue: { summary: 'confirmed' },
+      },
+    },
+    isPast: {
+      control: 'boolean',
+      description: '지난 모임 여부를 지정합니다.',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    visible: {
+      control: 'boolean',
+      description: '컴포넌트의 표시 여부를 지정합니다.',
+      table: {
+        defaultValue: { summary: 'true' },
+      },
+    },
+  },
+} satisfies Meta<typeof ConfirmedLabel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Confirmed: Story = {
+  args: {
+    visible: true,
+    variant: 'confirmed',
+    isPast: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '개설확정 상태입니다. 테두리만 있는 아이콘과 초록색으로 표시됩니다.',
+      },
+    },
+  },
+};
+
+export const Closed: Story = {
+  args: {
+    visible: true,
+    variant: 'closed',
+    isPast: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: '모집마감 상태입니다. 채워진 아이콘과 파란색으로 표시됩니다.',
+      },
+    },
+  },
+};
+
+export const PastConfirmed: Story = {
+  args: {
+    visible: true,
+    variant: 'confirmed',
+    isPast: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: '지난 모임의 개설확정 상태입니다. 회색으로 표시됩니다.',
+      },
+    },
+  },
+};
+
+export const PastClosed: Story = {
+  args: {
+    visible: true,
+    variant: 'closed',
+    isPast: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: '지난 모임의 모집마감 상태입니다. 회색으로 표시됩니다.',
+      },
+    },
+  },
+};
+
+export const Hidden: Story = {
+  args: {
+    visible: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'visible이 false일 경우 컴포넌트가 렌더링되지 않습니다.',
+      },
+    },
+  },
+};
+
+export const AllStates: Story = {
+  args: {
+    visible: true,
+  },
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-2">
+        <ConfirmedLabel variant="confirmed" />
+        <span className="text-sm">개설확정 상태 (테두리만 있는 아이콘)</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <ConfirmedLabel variant="closed" />
+        <span className="text-sm">모집마감 상태 (채워진 아이콘)</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <ConfirmedLabel variant="confirmed" isPast={true} />
+        <span className="text-sm">지난 모임 - 개설확정</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <ConfirmedLabel variant="closed" isPast={true} />
+        <span className="text-sm">지난 모임 - 모집마감</span>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: '모든 상태를 한 번에 보여주는 예시입니다.',
+      },
+    },
+  },
+};
diff --git a/src/components/confirmed-label/ConfirmedLabel.test.tsx b/src/components/confirmed-label/ConfirmedLabel.test.tsx
new file mode 100644
index 00000000..3db5eb73
--- /dev/null
+++ b/src/components/confirmed-label/ConfirmedLabel.test.tsx
@@ -0,0 +1,25 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import ConfirmedLabel from './ConfirmedLabel';
+
+describe('ConfirmedLabel', () => {
+  it('기본 상태에서 개설확정으로 표시되는지 확인', () => {
+    render(<ConfirmedLabel />);
+    expect(screen.getByRole('confirmed-text')).toHaveTextContent('개설확정');
+  });
+
+  it('visible이 false일 때 컴포넌트가 렌더링되지 않는지 확인', () => {
+    render(<ConfirmedLabel visible={false} />);
+    expect(screen.queryByRole('confirmed-text')).not.toBeInTheDocument();
+  });
+
+  it('variant가 closed일 때 모집마감으로 표시되는지 확인', () => {
+    render(<ConfirmedLabel variant="closed" />);
+    expect(screen.getByRole('confirmed-text')).toHaveTextContent('모집마감');
+  });
+
+  it('isPast가 true일 때도 텍스트가 올바르게 표시되는지 확인', () => {
+    render(<ConfirmedLabel variant="closed" isPast={true} />);
+    expect(screen.getByRole('confirmed-text')).toHaveTextContent('모집마감');
+  });
+});
diff --git a/src/components/confirmed-label/ConfirmedLabel.tsx b/src/components/confirmed-label/ConfirmedLabel.tsx
new file mode 100644
index 00000000..528e5dfc
--- /dev/null
+++ b/src/components/confirmed-label/ConfirmedLabel.tsx
@@ -0,0 +1,50 @@
+import { IcCheck } from '../../../public/icons';
+
+const LABEL_VARIANTS = {
+  confirmed: 'confirmed',
+  closed: 'closed',
+} as const;
+
+type LabelVariant = (typeof LABEL_VARIANTS)[keyof typeof LABEL_VARIANTS];
+
+interface ConfirmedLabelProps extends React.ComponentPropsWithoutRef<'div'> {
+  visible?: boolean;
+  variant?: LabelVariant;
+  isPast?: boolean;
+}
+
+function ConfirmedLabel({
+  visible = true,
+  variant = LABEL_VARIANTS.confirmed,
+  isPast = false,
+  className,
+  ...props
+}: ConfirmedLabelProps) {
+  if (!visible) return null;
+
+  const text = variant === LABEL_VARIANTS.confirmed ? '개설확정' : '모집마감';
+  const isConfirmed = variant === LABEL_VARIANTS.confirmed;
+  const colorClass = isPast ? 'text-gray-dark-02' : 'text-[#007aff]'; // TODO: 포인트 컬러 수정될 수 있음
+
+  return (
+    <div className={`flex items-center gap-0.5 ${className || ''}`} {...props}>
+      <IcCheck
+        role="confirmed-icon"
+        aria-label={`${text} 아이콘`}
+        className={colorClass}
+        width={20}
+        height={20}
+        filled={!isConfirmed}
+      />
+      <span
+        role="confirmed-text"
+        aria-label={`${text} 텍스트`}
+        className={`text-sm font-semibold ${colorClass}`}
+      >
+        {text}
+      </span>
+    </div>
+  );
+}
+
+export default ConfirmedLabel;
diff --git a/src/components/drop-down/DropDown.stories.tsx b/src/components/drop-down/DropDown.stories.tsx
new file mode 100644
index 00000000..684e0c99
--- /dev/null
+++ b/src/components/drop-down/DropDown.stories.tsx
@@ -0,0 +1,43 @@
+import { Meta, StoryObj } from '@storybook/react';
+import DropDown from './DropDown';
+
+const meta = {
+  title: 'Components/DropDown',
+  component: DropDown,
+  parameters: {
+    layout: 'centered',
+    componentSubtitle:
+      '드롭다운 컴포넌트. 정렬 기준을 보여줄 때, NavBar에서 프로필 이미지를 눌렀을 때 사용됨',
+  },
+} satisfies Meta<typeof DropDown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const NavBar: Story = {
+  args: {
+    variant: 'navbar',
+    onChangeSelection: (e) => alert(e),
+  },
+};
+
+export const OnOff: Story = {
+  args: {
+    variant: 'onOff',
+    onChangeSelection: (e) => alert(e),
+  },
+};
+
+export const MemberCount: Story = {
+  args: {
+    variant: 'memberCount',
+    onChangeSelection: (e) => alert(e),
+  },
+};
+
+export const SortingReview: Story = {
+  args: {
+    variant: 'sortingReview',
+    onChangeSelection: (e) => alert(e),
+  },
+};
diff --git a/src/components/drop-down/DropDown.test.tsx b/src/components/drop-down/DropDown.test.tsx
new file mode 100644
index 00000000..a57727ec
--- /dev/null
+++ b/src/components/drop-down/DropDown.test.tsx
@@ -0,0 +1,76 @@
+import '@testing-library/jest-dom';
+import DropDown from './DropDown';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MENU_ITEMS } from '@/constants';
+
+describe('DropDown variant:navbar 일 때', () => {
+  const mockHandleSelectionChange = jest.fn();
+
+  it('드롭다운 버튼 클릭 이벤트로 드롭다운 메뉴 아이템 렌더링 확인', () => {
+    render(
+      <DropDown
+        variant="navbar"
+        onChangeSelection={mockHandleSelectionChange}
+      />,
+    );
+    //드롭다운 버튼 렌더링 확인
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+
+    //유저가 드롭다운 클릭 전엔 메뉴 아이템들이 나타나지 않음
+    const menuItems = screen.queryByRole('listbox');
+    expect(menuItems).not.toBeInTheDocument();
+
+    //유저가 드롭다운 클릭 후엔 메뉴 아이템들이 나타남
+    userEvent.click(button);
+    expect(menuItems).toBeInTheDocument;
+  });
+
+  it('드롭다운 메뉴 아이템 클릭 시 해당 아이템 value 값 반환', async () => {
+    const user = userEvent.setup();
+    render(
+      <DropDown
+        variant="navbar"
+        onChangeSelection={mockHandleSelectionChange}
+      />,
+    );
+
+    const button = screen.getByRole('button');
+    //유저가 드롭다운 클릭 전엔 메뉴 아이템들이 나타나지 않음
+    const menuItems = screen.queryByRole('listbox');
+    expect(menuItems).not.toBeInTheDocument();
+
+    //유저가 드롭다운 클릭 후엔 메뉴 아이템들이 나타남
+    userEvent.click(button);
+    expect(menuItems).toBeInTheDocument;
+
+    //유저가 메뉴 아이템의 label을 보고 클릭하면 메뉴 아이템의 value값과 handle 함수를 호출
+    const menuItem = screen.getByText(MENU_ITEMS['navbar'][0].label);
+    await user.click(menuItem);
+
+    expect(mockHandleSelectionChange).toHaveBeenCalledWith(
+      MENU_ITEMS['navbar'][0].value,
+    );
+  });
+
+  it('드롭다운 외부 영역을 클릭했을 때 드롭다운 메뉴가 닫히는지 확인', async () => {
+    const user = userEvent.setup();
+    render(
+      <>
+        <DropDown
+          variant="navbar"
+          onChangeSelection={mockHandleSelectionChange}
+        />
+        <div>드롭다운 외부 영역</div>
+      </>,
+    );
+
+    const button = screen.getByRole('button');
+    user.click(button);
+    expect(button).toBeInTheDocument();
+
+    user.click(screen.getByText('드롭다운 외부 영역'));
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/drop-down/DropDown.tsx b/src/components/drop-down/DropDown.tsx
new file mode 100644
index 00000000..dfa7e548
--- /dev/null
+++ b/src/components/drop-down/DropDown.tsx
@@ -0,0 +1,104 @@
+import React, { useRef, useState } from 'react';
+import { IcDropDown } from '../../../public/icons';
+import Avatar from '../avatar/Avatar';
+import useDropDownClose from './hooks/useDropDownClose';
+import { MENU_ITEMS, DROPDOWN_LABELS } from '@/constants/index';
+
+interface DropDownProps {
+  variant: 'navbar' | 'onOff' | 'memberCount' | 'sortingReview';
+  onChangeSelection: (selectedLabel: string | undefined) => void;
+  imgSrc?: string;
+}
+
+interface DropDownItem {
+  label: string;
+  value: string;
+}
+
+function DropDown({ variant, imgSrc, onChangeSelection }: DropDownProps) {
+  const dropDownRef = useRef(null);
+  const [isOpen, setIsOpen] = useDropDownClose(dropDownRef, false);
+  const [isActive, setIsActive] = useState(false);
+  const [selectedLabel, setSelectedLabel] = useState<string>(
+    DROPDOWN_LABELS[variant],
+  );
+
+  const items = MENU_ITEMS[variant];
+
+  const onClickDropDownItem = (item: DropDownItem): void => {
+    setIsActive(true);
+    setSelectedLabel(item.label);
+
+    if (onChangeSelection) {
+      onChangeSelection(item.value);
+    }
+    setIsOpen(false);
+  };
+
+  const renderButton = (variant: string, isActive: boolean) => {
+    const colorClass = isActive
+      ? 'border-green-normal-01 text-green-normal-01'
+      : 'border-gray-normal-02 text-gray-dark-02';
+
+    switch (variant) {
+      case 'navbar':
+        return (
+          <button
+            className="relative h-[40px] w-[40px] justify-center"
+            onClick={() => setIsOpen(!isOpen)}
+          >
+            <Avatar
+              src={imgSrc || '/images/profile.png'}
+              alt="nav_profile"
+              size="md"
+            />
+          </button>
+        );
+      case 'sortingReview':
+        return (
+          <button
+            className={`flex h-[40px] items-center justify-start py-[8px] pl-[14px] pr-[6px] text-sm font-medium ${colorClass}`}
+            onClick={() => setIsOpen(!isOpen)}
+          >
+            {selectedLabel}
+            <IcDropDown isActive={isActive} color="stroke-green-normal-01" />
+          </button>
+        );
+      default:
+        return (
+          <button
+            className={`box-border flex h-[40px] items-center justify-start rounded-xl border py-[8px] pl-[14px] pr-[6px] text-sm font-medium ${colorClass}`}
+            onClick={() => setIsOpen(!isOpen)}
+          >
+            {selectedLabel}
+            <IcDropDown isActive={isActive} color="stroke-green-normal-01" />
+          </button>
+        );
+    }
+  };
+
+  return (
+    <div
+      ref={dropDownRef}
+      className={`relative z-50 flex w-max min-w-max ${(variant === 'navbar' || variant == 'sortingReview') && 'justify-end'}`}
+    >
+      {renderButton(variant, isActive)}
+
+      <ul
+        className={`absolute top-[50px] w-full min-w-max rounded-xl shadow-[0_10px_10px_-5px_rgba(0,0,0,0.08)] ${isOpen ? 'block' : 'hidden'}`}
+      >
+        {items.map((item) => (
+          <li
+            onClick={() => onClickDropDownItem(item)}
+            key={item.value}
+            className={`flex h-[40px] w-full items-center justify-start bg-gray-white px-[16px] py-[10px] text-sm font-medium text-gray-dark-01 first:rounded-t-xl last:rounded-b-xl hover:bg-gray-light-02 hover:font-semibold hover:text-gray-darker`}
+          >
+            {item.label}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default DropDown;
diff --git a/src/components/drop-down/hooks/useDropDownClose.ts b/src/components/drop-down/hooks/useDropDownClose.ts
new file mode 100644
index 00000000..125022a8
--- /dev/null
+++ b/src/components/drop-down/hooks/useDropDownClose.ts
@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+
+const useDropDownClose = (
+  ref: React.RefObject<HTMLElement>,
+  initialState: boolean,
+) => {
+  const [isOpen, setIsOpen] = useState(initialState);
+
+  useEffect(() => {
+    const onClickPage = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      window.addEventListener('click', onClickPage);
+    }
+
+    return () => {
+      window.removeEventListener('click', onClickPage);
+    };
+  }, [isOpen, ref]);
+  return [isOpen, setIsOpen] as const;
+};
+
+export default useDropDownClose;
diff --git a/src/components/filter-checkbox/FilterCheckbox.stories.tsx b/src/components/filter-checkbox/FilterCheckbox.stories.tsx
new file mode 100644
index 00000000..82556555
--- /dev/null
+++ b/src/components/filter-checkbox/FilterCheckbox.stories.tsx
@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import FilterCheckbox from './FilterCheckbox';
+
+const meta = {
+  title: 'Components/FilterCheckbox',
+  component: FilterCheckbox,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof FilterCheckbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: function FilterCheckboxStory(args) {
+    const [isChecked, setIsChecked] = useState(false);
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setIsChecked(event.target.checked);
+    };
+
+    return (
+      <FilterCheckbox
+        {...args}
+        checked={isChecked}
+        aria-checked={isChecked}
+        onChange={handleChange}
+      />
+    );
+  },
+  args: {
+    label: '신청가능',
+    checked: false,
+    'aria-label': '신청 가능한 모임 필터',
+  },
+};
diff --git a/src/components/filter-checkbox/FilterCheckbox.test.tsx b/src/components/filter-checkbox/FilterCheckbox.test.tsx
new file mode 100644
index 00000000..12a65304
--- /dev/null
+++ b/src/components/filter-checkbox/FilterCheckbox.test.tsx
@@ -0,0 +1,25 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import FilterCheckbox from './FilterCheckbox';
+
+describe('FilterCheckbox 컴포넌트', () => {
+  it('체크박스를 클릭하면 onChange 핸들러가 호출된다', async () => {
+    const mockOnChange = jest.fn();
+    const { debug } = render(
+      <FilterCheckbox
+        label="신청가능"
+        checked={false}
+        onChange={mockOnChange}
+      />,
+    );
+
+    const checkbox = screen.getByRole('checkbox');
+
+    fireEvent.click(checkbox);
+    await waitFor(() => {
+      expect(mockOnChange).toHaveBeenCalledTimes(1);
+      expect(checkbox).toBeChecked();
+      debug();
+    });
+  });
+});
diff --git a/src/components/filter-checkbox/FilterCheckbox.tsx b/src/components/filter-checkbox/FilterCheckbox.tsx
new file mode 100644
index 00000000..327924bb
--- /dev/null
+++ b/src/components/filter-checkbox/FilterCheckbox.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { IcCheck } from '../../../public/icons';
+
+interface FilterCheckboxProps extends React.ComponentPropsWithoutRef<'input'> {
+  label: string;
+  checked: boolean;
+}
+
+function FilterCheckbox({ label, checked, ...props }: FilterCheckboxProps) {
+  return (
+    <label
+      className={`inline-flex h-10 w-fit min-w-24 cursor-pointer items-center gap-x-2 rounded-xl border bg-white px-[14px] py-2 transition duration-200 ${
+        checked ? 'border-green-normal-01' : 'border-gray-normal-02'
+      }`}
+    >
+      <span
+        className={`text-sm font-medium ${
+          checked ? 'text-green-normal-01' : 'text-gray-dark-02'
+        }`}
+      >
+        {label}
+      </span>
+      <div className="relative h-5 w-5">
+        <input
+          type="checkbox"
+          id="checkbox"
+          {...props}
+          className="absolute h-5 w-5 appearance-none rounded-[5px] border border-gray-dark-02 bg-transparent transition duration-200 checked:border-green-normal-01 checked:bg-green-normal-01"
+        />
+        <IcCheck
+          className={`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform transition duration-200 ${
+            checked ? 'opacity-100' : 'opacity-0'
+          }`}
+          width={28}
+          height={28}
+          filled={checked}
+        />
+      </div>
+    </label>
+  );
+}
+
+export default FilterCheckbox;
diff --git a/src/components/header/HeaderBar.stories.tsx b/src/components/header/HeaderBar.stories.tsx
new file mode 100644
index 00000000..a47b22fe
--- /dev/null
+++ b/src/components/header/HeaderBar.stories.tsx
@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import HeaderBar from './HeaderBar';
+
+const mockAuthStore = {
+  isLoggedIn: true,
+  user: {
+    image: 'https://via.placeholder.com/32',
+  },
+};
+
+declare global {
+  var usePathname: () => string;
+  var useRouter: () => Record<string, unknown>;
+  var useAuthStore: () => typeof mockAuthStore;
+}
+
+const meta: Meta<typeof HeaderBar> = {
+  title: 'Components/HeaderBar',
+  component: HeaderBar,
+  parameters: {
+    layout: 'fullscreen',
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+  decorators: [
+    (Story) => {
+      global.useRouter = () => ({
+        push: () => {},
+        replace: () => {},
+        prefetch: () => Promise.resolve(),
+        back: () => {},
+        pathname: '/',
+        route: '/',
+      });
+      global.usePathname = () => '/';
+      global.useAuthStore = () => mockAuthStore;
+
+      return <Story />;
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof HeaderBar>;
+
+export const Default: Story = {
+  render: () => <HeaderBar />,
+};
diff --git a/src/components/header/HeaderBar.test.tsx b/src/components/header/HeaderBar.test.tsx
new file mode 100644
index 00000000..41efdb7e
--- /dev/null
+++ b/src/components/header/HeaderBar.test.tsx
@@ -0,0 +1,106 @@
+import { render, screen } from '@testing-library/react';
+import HeaderBar from './HeaderBar';
+import '@testing-library/jest-dom';
+import { NAV_ITEMS } from '@/constants/navigation';
+import { useAuthStore } from '@/store/authStore';
+
+jest.mock('next/navigation', () => ({
+  usePathname: jest.fn(() => '/exchange'),
+  useRouter: jest.fn(() => ({
+    push: jest.fn(),
+    replace: jest.fn(),
+    back: jest.fn(),
+  })),
+}));
+
+describe('HeaderBar 컴포넌트 테스트', () => {
+  beforeEach(() => {
+    useAuthStore.setState({ isLoggedIn: false, user: null });
+    render(<HeaderBar />);
+  });
+
+  describe('네비게이션 링크', () => {
+    it('NAV_ITEMS의 모든 링크가 올바르게 렌더링되어야 한다', () => {
+      NAV_ITEMS.forEach((item) => {
+        const linkElement = screen.getByRole('link', { name: item.label });
+        expect(linkElement).toBeInTheDocument();
+        expect(linkElement).toHaveAttribute('href', item.href);
+      });
+    });
+
+    it('로그인 링크가 올바르게 렌더링되어야 한다', () => {
+      const loginLink = screen.getByRole('link', { name: '로그인' });
+      expect(loginLink).toBeInTheDocument();
+      expect(loginLink).toHaveAttribute('href', '/login');
+    });
+
+    it('bookco 링크는 항상 활성화되어야 한다', () => {
+      const bookcoItem = NAV_ITEMS.find((item) => item.id === 'bookco');
+      const bookcoLink = screen.getByRole('link', { name: bookcoItem!.label });
+      expect(bookcoLink).toHaveClass('font-bold');
+    });
+
+    it('현재 경로와 일치하는 링크는 활성화되어야 한다', () => {
+      const exchangeItem = NAV_ITEMS.find((item) => item.id === 'exchange');
+      const exchangeLink = screen.getByRole('link', {
+        name: exchangeItem!.label,
+      });
+      expect(exchangeLink).toHaveClass('font-bold');
+    });
+
+    it('현재 경로와 일치하는 않는 링크는 비활성화되어야 한다', () => {
+      const bookclubItem = NAV_ITEMS.find((item) => item.id === 'bookclub');
+      const bookclubLink = screen.getByRole('link', {
+        name: bookclubItem!.label,
+      });
+      expect(bookclubLink).toHaveClass('text-green-light-01');
+    });
+  });
+});
+
+describe('로그인 상태에 따른 버튼 렌더링', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useAuthStore.setState({
+      isLoggedIn: false,
+      user: null,
+      checkLoginStatus: jest.fn(),
+    });
+  });
+
+  it('로그인 상태일 때 드롭다운 버튼이 렌더링되어야 한다', () => {
+    useAuthStore.setState({
+      isLoggedIn: true,
+      user: {
+        image: '/images/profile.png',
+        teamId: 'team-id',
+        id: 1,
+        email: 'user@example.com',
+        name: 'User Name',
+        description: 'description',
+        createdAt: new Date(),
+        updatedAt: new Date(),
+      },
+      checkLoginStatus: jest.fn(),
+    });
+
+    render(<HeaderBar />);
+
+    const avatarElement = screen.getByAltText('nav_profile');
+    expect(avatarElement).toBeInTheDocument();
+
+    const dropDownButton = avatarElement.closest('button');
+    expect(dropDownButton).toBeInTheDocument();
+  });
+
+  it('비로그인 상태일 때 로그인 버튼이 렌더링되어야 한다', () => {
+    render(<HeaderBar />);
+
+    const loginButton = screen.getByRole('link', { name: '로그인' });
+    expect(loginButton).toBeInTheDocument();
+    expect(loginButton).toHaveAttribute('href', '/login');
+
+    const avatarElement = screen.queryByAltText('nav_profile');
+    expect(avatarElement).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/header/HeaderBar.tsx b/src/components/header/HeaderBar.tsx
new file mode 100644
index 00000000..efddc10f
--- /dev/null
+++ b/src/components/header/HeaderBar.tsx
@@ -0,0 +1,64 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import NavButton from './NavButton';
+import { NAV_ITEMS } from '@/constants/navigation';
+import { usePathname, useRouter } from 'next/navigation';
+import { useAuthStore } from '@/store/authStore';
+import DropDown from '../drop-down/DropDown';
+import { logout } from '@/features/auth/api/auth';
+
+function HeaderBar() {
+  const pathname = usePathname();
+  const { isLoggedIn, user, checkLoginStatus } = useAuthStore();
+  const router = useRouter();
+
+  useEffect(() => {
+    checkLoginStatus();
+  }, [checkLoginStatus]);
+
+  const handleDropDownChange = async (value: string | undefined) => {
+    if (value === 'LOGOUT') {
+      try {
+        await logout();
+        router.replace('/exchange');
+      } catch (error) {
+        console.error('로그아웃 실패:', error);
+      }
+    } else if (value === 'MY_PAGE') {
+      router.push('/profile');
+    }
+  };
+
+  return (
+    <nav className="w-full bg-green-normal-01 px-4 text-white md:px-7">
+      <div className="mx-auto flex h-14 max-w-[1200px] items-center justify-between">
+        <div className="flex items-center gap-4 md:gap-6">
+          {NAV_ITEMS.map((item) => (
+            <NavButton
+              key={item.id}
+              href={item.href}
+              isActive={item.id === 'bookco' || pathname === item.href}
+            >
+              {item.label}
+            </NavButton>
+          ))}
+        </div>
+
+        <div className="flex items-center gap-4">
+          {isLoggedIn ? (
+            <DropDown
+              variant="navbar"
+              onChangeSelection={handleDropDownChange}
+              imgSrc={user?.image ?? undefined}
+            />
+          ) : (
+            <NavButton href="/login">로그인</NavButton>
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+export default HeaderBar;
diff --git a/src/components/header/NavButton.tsx b/src/components/header/NavButton.tsx
new file mode 100644
index 00000000..8e9fea68
--- /dev/null
+++ b/src/components/header/NavButton.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+interface NavButtonProps {
+  href: string;
+  children: React.ReactNode;
+  isActive?: boolean;
+}
+
+function NavButton({ href, children, isActive }: NavButtonProps) {
+  const pathname = usePathname();
+
+  const active = isActive ?? pathname === href;
+
+  return (
+    <Link
+      href={href}
+      className={`hover:scale-105 ${active ? 'font-bold' : 'text-green-light-01'}`}
+    >
+      {children}
+    </Link>
+  );
+}
+
+export default NavButton;
diff --git a/src/components/modal/Modal.stories.tsx b/src/components/modal/Modal.stories.tsx
new file mode 100644
index 00000000..7193e05e
--- /dev/null
+++ b/src/components/modal/Modal.stories.tsx
@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Modal from './Modal';
+
+const meta: Meta<typeof Modal> = {
+  title: 'Components/Modal',
+  component: Modal,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    isOpen: {
+      control: 'boolean',
+      description: '모달의 표시 여부를 제어합니다',
+    },
+    title: {
+      control: 'text',
+      description: '모달의 제목',
+    },
+    onClose: { action: '닫기 클릭' },
+    onConfirm: { action: '확인 클릭' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Modal>;
+
+export const Default: Story = {
+  args: {
+    isOpen: true,
+    title: '모달 제목',
+    cancelText: '취소',
+    confirmText: '확인',
+    children: '모달에 넣을 children',
+    onClose: () => console.log('닫기 클릭'),
+    onConfirm: () => console.log('확인 클릭'),
+    cancelButtonProps: {
+      themeColor: 'gray-dark-01',
+      lightColor: 'gray-normal-01',
+      fillType: 'lightSolid',
+    },
+    confirmButtonProps: {
+      themeColor: 'green-normal-01',
+      lightColor: 'green-light-03',
+      fillType: 'lightSolid',
+    },
+  },
+};
diff --git a/src/components/modal/Modal.test.tsx b/src/components/modal/Modal.test.tsx
new file mode 100644
index 00000000..defd2bf0
--- /dev/null
+++ b/src/components/modal/Modal.test.tsx
@@ -0,0 +1,56 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Modal from './Modal';
+
+describe('Modal 컴포넌트', () => {
+  const defaultProps = {
+    isOpen: true,
+    onClose: jest.fn(),
+    title: '테스트 모달',
+    onConfirm: jest.fn(),
+    cancelText: '취소',
+    confirmText: '확인',
+    children: <div>모달 내용</div>,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('isOpen이 true일 때 모달이 렌더링되어야 함', () => {
+    render(<Modal {...defaultProps} />);
+
+    expect(screen.getByText('테스트 모달')).toBeInTheDocument();
+    expect(screen.getByText('모달 내용')).toBeInTheDocument();
+    expect(screen.getByText('취소')).toBeInTheDocument();
+    expect(screen.getByText('확인')).toBeInTheDocument();
+  });
+
+  it('isOpen이 false일 때 모달이 렌더링되지 않아야 함', () => {
+    render(<Modal {...defaultProps} isOpen={false} />);
+
+    expect(screen.queryByText('테스트 모달')).not.toBeInTheDocument();
+  });
+
+  it('닫기 버튼 클릭 시 onClose가 호출되어야 함', () => {
+    render(<Modal {...defaultProps} />);
+
+    const closeButton = screen.getByLabelText('닫기');
+    fireEvent.click(closeButton);
+    expect(defaultProps.onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('취소 버튼 클릭 시 onClose가 호출되어야 함', () => {
+    render(<Modal {...defaultProps} />);
+
+    fireEvent.click(screen.getByText('취소'));
+    expect(defaultProps.onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('확인 버튼 클릭 시 onConfirm이 호출되어야 함', () => {
+    render(<Modal {...defaultProps} />);
+
+    fireEvent.click(screen.getByText('확인'));
+    expect(defaultProps.onConfirm).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
new file mode 100644
index 00000000..8896b800
--- /dev/null
+++ b/src/components/modal/Modal.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import Button, { ButtonProps } from '../button/Button';
+import { IcClose } from '../../../public/icons';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  title: string;
+  onConfirm: () => void;
+  cancelText: string;
+  confirmText: string;
+  cancelButtonProps?: Partial<ButtonProps>;
+  confirmButtonProps?: Partial<ButtonProps>;
+}
+
+function Modal({
+  isOpen,
+  onClose,
+  children,
+  title,
+  onConfirm,
+  cancelText,
+  confirmText,
+  cancelButtonProps,
+  confirmButtonProps,
+}: ModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="fixed inset-0 bg-black bg-opacity-50" onClick={onClose} />
+
+      <div className="relative z-50 mx-4 max-h-[80vh] min-h-[200px] w-full min-w-[336px] max-w-[520px] overflow-y-auto rounded-lg bg-white p-6">
+        <div className="mb-4 flex items-center justify-between">
+          <h2 className="text-xl font-semibold">{title}</h2>
+          <button
+            onClick={onClose}
+            className="cursor-pointer hover:opacity-70"
+            aria-label="닫기"
+          >
+            <IcClose />
+          </button>
+        </div>
+
+        <div className="mb-6">{children}</div>
+
+        <div className="flex justify-between gap-2">
+          <Button
+            text={cancelText}
+            size="modal"
+            fillType="lightSolid"
+            themeColor="gray-normal-03"
+            onClick={onClose}
+            className="w-full"
+            {...cancelButtonProps}
+          />
+          <Button
+            text={confirmText}
+            size="modal"
+            fillType="lightSolid"
+            themeColor="green-light-03"
+            onClick={onConfirm}
+            className="w-full"
+            {...confirmButtonProps}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Modal;
diff --git a/src/components/participant-counter/ParticipantCounter.stories.tsx b/src/components/participant-counter/ParticipantCounter.stories.tsx
new file mode 100644
index 00000000..f72f7851
--- /dev/null
+++ b/src/components/participant-counter/ParticipantCounter.stories.tsx
@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ParticipantCounter from './ParticipantCounter';
+
+const meta = {
+  title: 'Components/ParticipantCounter',
+  component: ParticipantCounter,
+  parameters: {
+    componentSubtitle: '참가자 수를 표시하는 컴포넌트',
+  },
+} satisfies Meta<typeof ParticipantCounter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    current: 5,
+    max: 20,
+    isPast: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '기본 상태입니다. 아이콘과 현재 인원 숫자는 초록색, 최대 인원 숫자는 회색으로 표시됩니다.',
+      },
+    },
+  },
+};
+
+export const Full: Story = {
+  args: {
+    current: 20,
+    max: 20,
+    isPast: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: '정원이 다 찼을 때는 모든 숫자가 초록색으로 표시됩니다.',
+      },
+    },
+  },
+};
+
+export const Past: Story = {
+  args: {
+    current: 15,
+    max: 20,
+    isPast: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '지난 모임의 경우 아이콘과 현재 인원 숫자가 진한 회색으로 표시됩니다.',
+      },
+    },
+  },
+};
+
+export const PastAndFull: Story = {
+  args: {
+    current: 20,
+    max: 20,
+    isPast: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '지난 모임이면서 정원이 다 찼을 때는 모든 요소가 진한 회색으로 표시됩니다.',
+      },
+    },
+  },
+};
+
+export const AllStates: Story = {
+  args: {
+    current: 5,
+    max: 20,
+    isPast: false,
+  },
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-2">
+        <ParticipantCounter current={5} max={20} isPast={false} />
+        <span className="text-sm">기본 상태</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <ParticipantCounter current={20} max={20} isPast={false} />
+        <span className="text-sm">정원 마감</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <ParticipantCounter current={15} max={20} isPast={true} />
+        <span className="text-sm">지난 모임</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <ParticipantCounter current={20} max={20} isPast={true} />
+        <span className="text-sm">지난 모임 & 정원 마감</span>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: '모든 상태를 한 번에 보여주는 예시입니다.',
+      },
+    },
+  },
+};
diff --git a/src/components/participant-counter/ParticipantCounter.test.tsx b/src/components/participant-counter/ParticipantCounter.test.tsx
new file mode 100644
index 00000000..6237d380
--- /dev/null
+++ b/src/components/participant-counter/ParticipantCounter.test.tsx
@@ -0,0 +1,20 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import ParticipantCounter from './ParticipantCounter';
+
+describe('ParticipantCounter', () => {
+  it('참가자 수가 올바르게 표시되는지 확인', () => {
+    render(<ParticipantCounter current={5} max={20} />);
+    expect(screen.getByRole('participant-count')).toHaveTextContent('5/20');
+  });
+
+  it('정원이 다 찼을 때 표시가 올바른지 확인', () => {
+    render(<ParticipantCounter current={20} max={20} isPast={false} />);
+    expect(screen.getByRole('participant-count')).toHaveTextContent('20/20');
+  });
+
+  it('지난 모임일 때 표시가 올바른지 확인', () => {
+    render(<ParticipantCounter current={15} max={20} isPast={true} />);
+    expect(screen.getByRole('participant-count')).toHaveTextContent('15/20');
+  });
+});
diff --git a/src/components/participant-counter/ParticipantCounter.tsx b/src/components/participant-counter/ParticipantCounter.tsx
new file mode 100644
index 00000000..166ab821
--- /dev/null
+++ b/src/components/participant-counter/ParticipantCounter.tsx
@@ -0,0 +1,42 @@
+interface ParticipantCounterProps
+  extends React.ComponentPropsWithoutRef<'div'> {
+  current: number;
+  max: number;
+  isPast?: boolean;
+}
+
+function ParticipantCounter({
+  current,
+  max,
+  isPast = false,
+  ...props
+}: ParticipantCounterProps) {
+  const isFull = current >= max;
+  const primaryColor = isPast ? 'text-gray-dark-02' : 'text-green-normal-01';
+  const maxColor = isFull ? primaryColor : 'text-gray-dark-01';
+
+  return (
+    <div className="flex items-center gap-0.5" {...props}>
+      <svg
+        role="participant-icon"
+        aria-label="참가자 아이콘"
+        className={`h-4 w-4 ${primaryColor}`}
+        fill="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+      </svg>
+      <span
+        role="participant-count"
+        aria-label="참가자 현황"
+        className="text-sm font-medium"
+      >
+        <span className={primaryColor}>{current}</span>
+        <span className={maxColor}>/{max}</span>
+      </span>
+    </div>
+  );
+}
+
+export default ParticipantCounter;
diff --git a/src/components/pop-up/PopUp.stories.tsx b/src/components/pop-up/PopUp.stories.tsx
new file mode 100644
index 00000000..3873bc60
--- /dev/null
+++ b/src/components/pop-up/PopUp.stories.tsx
@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PopUp from './PopUp';
+
+const POPUP_LABEL = {
+  large: `정말 나가시겠어요?\n작성된 내용이 모두 삭제됩니다.`,
+  small: `가입이 완료되었습니다!`,
+};
+
+const meta: Meta<typeof PopUp> = {
+  title: 'components/PopUp',
+  component: PopUp,
+  parameters: {
+    layout: 'centerd',
+  },
+};
+
+type Story = StoryObj<typeof PopUp>;
+export const LargeOneButton: Story = {
+  args: {
+    isOpen: true,
+    isLarge: true,
+    label: POPUP_LABEL.large,
+    handlePopUpClose: (e) => alert(e),
+    handlePopUpConfirm: (e) => alert(e),
+  },
+};
+
+export const LargeTwoButton: Story = {
+  args: {
+    isOpen: true,
+    isLarge: true,
+    isTwoButton: true,
+    label: POPUP_LABEL.large,
+    handlePopUpClose: (e) => alert(e),
+    handlePopUpConfirm: (e) => alert(e),
+  },
+};
+
+export const SmallOneButton: Story = {
+  args: {
+    isOpen: true,
+    label: POPUP_LABEL.small,
+    handlePopUpClose: (e) => alert(e),
+    handlePopUpConfirm: (e) => alert(e),
+  },
+};
+
+export const SmallTwoButton: Story = {
+  args: {
+    isOpen: true,
+    isTwoButton: true,
+    label: POPUP_LABEL.small,
+    handlePopUpClose: (e) => alert(e),
+    handlePopUpConfirm: (e) => alert(e),
+  },
+};
+
+export default meta;
diff --git a/src/components/pop-up/PopUp.test.tsx b/src/components/pop-up/PopUp.test.tsx
new file mode 100644
index 00000000..1bf65050
--- /dev/null
+++ b/src/components/pop-up/PopUp.test.tsx
@@ -0,0 +1,82 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import PopUp from './PopUp';
+
+const POPUP_LABEL = {
+  large: `정말 나가시겠어요?\n작성된 내용이 모두 삭제됩니다.`,
+  small: `가입이 완료되었습니다!`,
+};
+
+const mockHandlePopUpClose = jest.fn();
+const mockHandlePopUpConfirm = jest.fn();
+
+describe('PopUp 렌더링 테스트', () => {
+  it('small, single button 렌더링 테스트', () => {
+    render(
+      <PopUp
+        isOpen={true}
+        label={POPUP_LABEL.small}
+        handlePopUpClose={mockHandlePopUpClose}
+        handlePopUpConfirm={mockHandlePopUpConfirm}
+      />,
+    );
+    const popUp = screen.getByRole('pop-up');
+    const confirm = screen.getByText('확인');
+    const cancel = screen.queryByText('취소');
+    expect(popUp).toBeInTheDocument();
+    expect(confirm).toBeInTheDocument();
+    expect(cancel).not.toBeInTheDocument();
+  });
+  it('small, two button 렌더링 테스트', () => {
+    render(
+      <PopUp
+        isOpen={true}
+        isTwoButton={true}
+        label={POPUP_LABEL.small}
+        handlePopUpClose={mockHandlePopUpClose}
+        handlePopUpConfirm={mockHandlePopUpConfirm}
+      />,
+    );
+    const popUp = screen.getByRole('pop-up');
+    const confirm = screen.getByText('확인');
+    const cancel = screen.getByText('취소');
+    expect(popUp).toBeInTheDocument();
+    expect(confirm).toBeInTheDocument();
+    expect(cancel).toBeInTheDocument();
+  });
+  it('large, single button 렌더링 테스트', () => {
+    render(
+      <PopUp
+        isOpen={true}
+        isLarge={true}
+        label={POPUP_LABEL.large}
+        handlePopUpClose={mockHandlePopUpClose}
+        handlePopUpConfirm={mockHandlePopUpConfirm}
+      />,
+    );
+    const popUp = screen.getByRole('pop-up');
+    const confirm = screen.getByText('확인');
+    const cancel = screen.queryByText('취소');
+    expect(popUp).toBeInTheDocument();
+    expect(confirm).toBeInTheDocument();
+    expect(cancel).not.toBeInTheDocument();
+  });
+  it('large, two button 렌더링 테스트', () => {
+    render(
+      <PopUp
+        isOpen={true}
+        isLarge={false}
+        isTwoButton={true}
+        label={POPUP_LABEL.large}
+        handlePopUpClose={mockHandlePopUpClose}
+        handlePopUpConfirm={mockHandlePopUpConfirm}
+      />,
+    );
+    const popUp = screen.getByRole('pop-up');
+    const confirm = screen.getByText('확인');
+    const cancel = screen.getByText('취소');
+    expect(popUp).toBeInTheDocument();
+    expect(confirm).toBeInTheDocument();
+    expect(cancel).toBeInTheDocument();
+  });
+});
diff --git a/src/components/pop-up/PopUp.tsx b/src/components/pop-up/PopUp.tsx
new file mode 100644
index 00000000..eeb59180
--- /dev/null
+++ b/src/components/pop-up/PopUp.tsx
@@ -0,0 +1,75 @@
+import { IcClose } from '../../../public/icons';
+import Button from '../button/Button';
+
+interface PopUpProps {
+  isOpen: boolean;
+  label: string;
+  handlePopUpClose: (result: boolean) => void;
+  handlePopUpConfirm: (result: boolean) => void;
+  isLarge?: boolean;
+  isTwoButton?: boolean;
+}
+
+function PopUp({
+  isOpen,
+  isLarge = false,
+  isTwoButton = false,
+  label,
+  handlePopUpClose,
+  handlePopUpConfirm,
+}: PopUpProps) {
+  const onClickClose = () => {
+    if (handlePopUpClose) {
+      handlePopUpClose(false);
+    }
+  };
+
+  const onClickConfirm = () => {
+    if (handlePopUpConfirm) {
+      handlePopUpConfirm(true);
+    }
+  };
+  return (
+    <>
+      <div className={`${isOpen ? 'block' : 'hidden'}`}>
+        <div
+          className={`fixed left-0 top-0 h-screen w-screen bg-black bg-opacity-50`}
+        >
+          <div
+            role="pop-up"
+            className={`absolute left-2/4 top-2/4 flex -translate-x-2/4 -translate-y-2/4 flex-col items-center justify-between rounded-lg border opacity-100 ${isLarge ? 'h-[212px] w-[450px]' : 'h-[199px] w-[300px]'} bg-white p-[24px]`}
+          >
+            <button className="ml-auto" onClick={onClickClose}>
+              <IcClose role="close-icon" className="ml-auto" />
+            </button>
+            <div className="flex flex-col items-center whitespace-pre-wrap text-center text-[#111827]">
+              {label}
+            </div>
+            <div
+              className={`${isLarge && !isTwoButton ? 'ml-auto' : 'flex items-center gap-2'} `}
+            >
+              {isTwoButton ? (
+                <Button
+                  text="취소"
+                  size="modal"
+                  fillType="outline"
+                  themeColor="green-normal-01"
+                  onClick={onClickClose}
+                />
+              ) : null}
+              <Button
+                text="확인"
+                size="modal"
+                fillType="solid"
+                themeColor="green-normal-01"
+                onClick={onClickConfirm}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default PopUp;
diff --git a/src/components/progress-bar/ProgressBar.stories.tsx b/src/components/progress-bar/ProgressBar.stories.tsx
new file mode 100644
index 00000000..58a7d58d
--- /dev/null
+++ b/src/components/progress-bar/ProgressBar.stories.tsx
@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ProgressBar from './ProgressBar';
+
+const meta = {
+  title: 'Components/ProgressBar',
+  component: ProgressBar,
+  parameters: {
+    componentSubtitle: '진행률을 시각적으로 표시하는 프로그레스바 컴포넌트',
+  },
+} satisfies Meta<typeof ProgressBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    percentage: 25,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: '기본 상태의 프로그레스바입니다.',
+      },
+    },
+  },
+};
+
+export const Past: Story = {
+  args: {
+    percentage: 75,
+    isPast: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: '지난 모임의 프로그레스바는 회색으로 표시됩니다.',
+      },
+    },
+  },
+};
+
+export const CustomColor: Story = {
+  args: {
+    percentage: 50,
+    color: 'bg-blue-500',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: '커스텀 색상을 적용할 수 있습니다.',
+      },
+    },
+  },
+};
+
+export const WithContainer: Story = {
+  args: {
+    percentage: 75,
+  },
+  render: (args) => (
+    <div className="w-64">
+      <ProgressBar {...args} />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: '컨테이너의 너비에 맞춰 반응형으로 동작합니다.',
+      },
+    },
+  },
+};
+
+export const AllStates: Story = {
+  args: {
+    percentage: 25,
+  },
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div>
+        <p className="mb-2 text-sm">기본 상태</p>
+        <ProgressBar percentage={25} />
+      </div>
+      <div>
+        <p className="mb-2 text-sm">지난 모임</p>
+        <ProgressBar percentage={75} isPast={true} />
+      </div>
+      <div>
+        <p className="mb-2 text-sm">커스텀 색상</p>
+        <ProgressBar percentage={50} color="bg-blue-500" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: '모든 상태를 한 번에 보여주는 예시입니다.',
+      },
+    },
+  },
+};
diff --git a/src/components/progress-bar/ProgressBar.test.tsx b/src/components/progress-bar/ProgressBar.test.tsx
new file mode 100644
index 00000000..67aa3033
--- /dev/null
+++ b/src/components/progress-bar/ProgressBar.test.tsx
@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import ProgressBar from './ProgressBar';
+
+describe('ProgressBar', () => {
+  it('프로그레스바의 percentage가 올바르게 전달되는지 확인', () => {
+    render(<ProgressBar percentage={25} />);
+    const progressbar = screen.getByRole('progressbar');
+    expect(progressbar).toHaveAttribute('aria-valuenow', '25');
+    expect(progressbar).toHaveAttribute('aria-valuemin', '0');
+    expect(progressbar).toHaveAttribute('aria-valuemax', '100');
+  });
+
+  it('프로그레스바의 너비가 percentage로 채워지는지 확인', () => {
+    render(<ProgressBar percentage={25} />);
+    const fillBar = screen.getByRole('progressbar').children[0];
+    expect(fillBar).toHaveStyle({ width: '25%' });
+  });
+});
diff --git a/src/components/progress-bar/ProgressBar.tsx b/src/components/progress-bar/ProgressBar.tsx
new file mode 100644
index 00000000..8041f380
--- /dev/null
+++ b/src/components/progress-bar/ProgressBar.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+interface ProgressBarProps extends React.ComponentPropsWithoutRef<'div'> {
+  percentage: number;
+  isPast?: boolean;
+  color?: string;
+}
+
+function ProgressBar({
+  percentage,
+  isPast = false,
+  color,
+  className,
+  ...props
+}: ProgressBarProps) {
+  const fillColor =
+    color || (isPast ? 'bg-gray-dark-02' : 'bg-green-normal-01');
+
+  return (
+    <div
+      role="progressbar"
+      aria-valuenow={percentage}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      className={`h-1 w-full rounded-md bg-gray-normal-01 ${className || ''}`}
+      {...props}
+    >
+      <div
+        className={`h-full rounded-md transition-all duration-300 ${fillColor}`}
+        style={{
+          width: `${percentage}%`,
+        }}
+      />
+    </div>
+  );
+}
+
+export default ProgressBar;
diff --git a/src/components/rating-display/RatingDisplay.stories.tsx b/src/components/rating-display/RatingDisplay.stories.tsx
new file mode 100644
index 00000000..839e53f3
--- /dev/null
+++ b/src/components/rating-display/RatingDisplay.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import RatingDisplay from './RatingDisplay';
+
+const meta = {
+  title: 'Components/RatingDisplay',
+  component: RatingDisplay,
+} satisfies Meta<typeof RatingDisplay>;
+
+export default meta;
+type Story = StoryObj<typeof RatingDisplay>;
+
+export const FourStarRating: Story = {
+  args: {
+    ratingCount: 4,
+  },
+};
diff --git a/src/components/rating-display/RatingDisplay.tsx b/src/components/rating-display/RatingDisplay.tsx
new file mode 100644
index 00000000..4c17483b
--- /dev/null
+++ b/src/components/rating-display/RatingDisplay.tsx
@@ -0,0 +1,23 @@
+import RatingIcon from '../../../public/icons/RatingIcon';
+
+export default function RatingDisplay({
+  ratingCount,
+}: {
+  ratingCount: number;
+}) {
+  const normalizedRating = Math.min(ratingCount, 5);
+
+  return (
+    <div
+      className="flex items-center gap-x-1"
+      aria-label={`Rating: ${normalizedRating} out of 5`}
+    >
+      {Array.from({ length: normalizedRating }).map((_, index) => (
+        <RatingIcon checked={true} key={`filled-${index}`} aria-hidden="true" />
+      ))}
+      {Array.from({ length: 5 - normalizedRating }).map((_, index) => (
+        <RatingIcon checked={false} key={`empty-${index}`} aria-hidden="true" />
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/search-box/SearchBox.stories.tsx b/src/components/search-box/SearchBox.stories.tsx
new file mode 100644
index 00000000..d4a9446c
--- /dev/null
+++ b/src/components/search-box/SearchBox.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import SearchBox from './SearchBox';
+
+const meta = {
+  title: 'Components/SearchBox',
+  component: SearchBox,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof SearchBox>;
+
+export default meta;
+type Story = StoryObj<typeof SearchBox>;
+
+export const Default: Story = {
+  args: {
+    value: '',
+    onChange: (e) => console.log('Search value:', e.target.value),
+    placeholder: '검색어를 입력해주세요',
+  },
+};
diff --git a/src/components/search-box/SearchBox.test.tsx b/src/components/search-box/SearchBox.test.tsx
new file mode 100644
index 00000000..5e990f2b
--- /dev/null
+++ b/src/components/search-box/SearchBox.test.tsx
@@ -0,0 +1,44 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import SearchBox from './SearchBox';
+
+describe('SearchBox', () => {
+  const mockOnChange = jest.fn();
+  const defaultProps = {
+    value: '',
+    onChange: mockOnChange,
+  };
+
+  beforeEach(() => {
+    mockOnChange.mockClear();
+  });
+
+  it('기본 placeholder 텍스트가 올바르게 렌더링되는지 확인', () => {
+    render(<SearchBox {...defaultProps} />);
+    expect(
+      screen.getByPlaceholderText('검색어를 입력해주세요'),
+    ).toBeInTheDocument();
+  });
+
+  it('사용자 정의 placeholder가 올바르게 렌더링되는지 확인', () => {
+    const customPlaceholder = 'placeholder 테스트';
+    render(<SearchBox {...defaultProps} placeholder={customPlaceholder} />);
+    expect(screen.getByPlaceholderText(customPlaceholder)).toBeInTheDocument();
+  });
+
+  it('입력값이 변경될 때 onChange 핸들러가 호출되는지 확인', () => {
+    render(<SearchBox {...defaultProps} />);
+    const input = screen.getByRole('textbox');
+
+    fireEvent.change(input, { target: { value: '테스트 검색어' } });
+    expect(mockOnChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('초기 value prop이 올바르게 설정되는지 확인', () => {
+    const initialValue = '초기 검색어';
+    render(<SearchBox {...defaultProps} value={initialValue} />);
+
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+    expect(input.value).toBe(initialValue);
+  });
+});
diff --git a/src/components/search-box/SearchBox.tsx b/src/components/search-box/SearchBox.tsx
new file mode 100644
index 00000000..93a3b78e
--- /dev/null
+++ b/src/components/search-box/SearchBox.tsx
@@ -0,0 +1,31 @@
+import React, { ChangeEvent } from 'react';
+import SearchIcon from '../../../public/icons/SearchIcon';
+
+interface SearchBoxProps {
+  value: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+}
+
+const SearchBox = ({
+  value,
+  onChange,
+  placeholder = '검색어를 입력해주세요',
+}: SearchBoxProps) => {
+  return (
+    <div className="flex items-center gap-1 rounded-lg border border-gray-200 px-3 py-2">
+      <div className="flex h-6 w-6 items-center justify-center text-gray-400">
+        <SearchIcon />
+      </div>
+      <input
+        type="text"
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        className="w-full text-sm text-gray-darker placeholder:text-gray-normal-03"
+      />
+    </div>
+  );
+};
+
+export default SearchBox;
diff --git a/src/components/sorting-button/SortingButton.stories.tsx b/src/components/sorting-button/SortingButton.stories.tsx
new file mode 100644
index 00000000..cbc1cafe
--- /dev/null
+++ b/src/components/sorting-button/SortingButton.stories.tsx
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import SortingButton from './SortingButton';
+
+const meta = {
+  title: 'Components/SortingButton',
+  component: SortingButton,
+  parameters: {
+    componentSubtitle: '목록의 아이템들의 순서를 정렬하게 만드는 컴포넌트',
+  },
+} satisfies Meta<typeof SortingButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const byDate: Story = {
+  args: {
+    variant: 'byDate',
+    onClickSorting: (e) => alert(e),
+  },
+};
+
+export const byDeadline: Story = {
+  args: {
+    variant: 'byDeadline',
+    onClickSorting: (e) => alert(e),
+  },
+};
diff --git a/src/components/sorting-button/SortingButton.test.tsx b/src/components/sorting-button/SortingButton.test.tsx
new file mode 100644
index 00000000..edb21c90
--- /dev/null
+++ b/src/components/sorting-button/SortingButton.test.tsx
@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/react';
+import SortingButton from './SortingButton';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
+describe('SortingButton', () => {
+  const mockOnClickSorting = jest.fn();
+
+  it('마감임박순 Sorting Button 렌더링 확인', async () => {
+    render(
+      <SortingButton
+        variant="byDeadline"
+        onClickSorting={mockOnClickSorting}
+      />,
+    );
+
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+
+    //유저가 최초 클릭 시 최신순->마감임박 순으로 전환. 'DEADLINE'으로 onClickSorting 함수 호출
+    await userEvent.click(button);
+    expect(mockOnClickSorting).toHaveBeenCalledWith('DEADLINE');
+    //유저가 두번째 클릭 시 마감임박->최신순 순으로 전환. 'NEWEST'으로 onClickSorting 함수 호출
+    await userEvent.click(button);
+    expect(mockOnClickSorting).toHaveBeenCalledWith('NEWEST');
+  });
+
+  it('날짜순 SortingButton 렌더링 확인', async () => {
+    render(
+      <SortingButton variant="byDate" onClickSorting={mockOnClickSorting} />,
+    );
+
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+
+    //유저가 최초 클릭 시 최신순->오래된 순으로 전환. 'OLDEST'으로 onClickSorting 함수 호출
+    await userEvent.click(button);
+    expect(mockOnClickSorting).toHaveBeenCalledWith('OLDEST');
+    //유저가 두번째 클릭 시 오래된 순->최신순 순으로 전환. 'NEWEST'으로 onClickSorting 함수 호출
+    await userEvent.click(button);
+    expect(mockOnClickSorting).toHaveBeenCalledWith('NEWEST');
+  });
+});
diff --git a/src/components/sorting-button/SortingButton.tsx b/src/components/sorting-button/SortingButton.tsx
new file mode 100644
index 00000000..a17f4d5e
--- /dev/null
+++ b/src/components/sorting-button/SortingButton.tsx
@@ -0,0 +1,63 @@
+'use client';
+import React, { useState } from 'react';
+import { IcSorting } from '../../../public/icons/index';
+
+interface SortingButtonProps extends React.ComponentPropsWithoutRef<'button'> {
+  variant: 'byDeadline' | 'byDate';
+  onClickSorting: (sortBy: string) => void;
+}
+
+function SortingButton({
+  variant,
+  onClickSorting,
+  ...buttonProps
+}: SortingButtonProps) {
+  const [isActive, setIsActive] = useState(false);
+
+  const onClick = (): void => {
+    let sortBy;
+    setIsActive(!isActive);
+    switch (variant) {
+      case 'byDeadline':
+        sortBy = isActive ? 'NEWEST' : 'DEADLINE';
+        break;
+
+      case 'byDate':
+        sortBy = isActive ? 'NEWEST' : 'OLDEST';
+        break;
+    }
+    onClickSorting(sortBy);
+  };
+
+  const renderLabel = () => {
+    switch (variant) {
+      case 'byDeadline':
+        return '마감임박순';
+
+      case 'byDate':
+        return isActive ? '오래된순' : '최신순';
+    }
+  };
+
+  return (
+    <button
+      {...buttonProps}
+      className={`flex h-[40px] items-center rounded-xl border px-[12px] py-[8px] text-sm font-medium ${
+        variant === 'byDeadline' && isActive
+          ? 'border-green-normal-01 text-green-normal-01'
+          : 'border-gray-normal-02 text-gray-dark-02'
+      }`}
+      onClick={onClick}
+    >
+      <span className="pr-[4px]">
+        <IcSorting
+          isActive={variant === 'byDeadline' ? isActive : false}
+          color="stroke-green-normal-02"
+        />
+      </span>
+      {renderLabel()}
+    </button>
+  );
+}
+
+export default SortingButton;
diff --git a/src/components/tab/Tab.stories.tsx b/src/components/tab/Tab.stories.tsx
new file mode 100644
index 00000000..43fbbd0e
--- /dev/null
+++ b/src/components/tab/Tab.stories.tsx
@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Tab from './Tab';
+import {
+  BOOK_TABS,
+  CONTENT_TABS,
+  CLUB_TABS,
+  EXCHANGE_TABS,
+} from '@/constants/tabs';
+
+const meta = {
+  title: 'Components/Tab',
+  component: Tab,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    tabType: {
+      control: 'select',
+      options: ['MAIN_TAB', 'SUB_TAB'],
+      description: '탭의 종류를 선택합니다',
+    },
+    items: {
+      control: 'select',
+      options: [BOOK_TABS, CONTENT_TABS, CLUB_TABS, EXCHANGE_TABS],
+      mapping: {
+        BOOK_TABS: BOOK_TABS,
+        CONTENT_TABS: CONTENT_TABS,
+        CLUB_TABS: CLUB_TABS,
+      },
+      description: '탭 아이템 목록',
+    },
+    activeTab: {
+      control: 'select',
+      options: [...BOOK_TABS, ...CONTENT_TABS, ...CLUB_TABS, ...EXCHANGE_TABS],
+      description: '현재 선택된 탭',
+    },
+  },
+} satisfies Meta<typeof Tab>;
+
+export default meta;
+type Story = StoryObj<typeof Tab>;
+
+export const Default: Story = {
+  args: {
+    items: BOOK_TABS,
+    activeTab: '전체',
+    onTabChange: (tab) => console.log(`Selected tab: ${tab}`),
+    tabType: 'MAIN_TAB',
+  },
+};
diff --git a/src/components/tab/Tab.test.tsx b/src/components/tab/Tab.test.tsx
new file mode 100644
index 00000000..41566077
--- /dev/null
+++ b/src/components/tab/Tab.test.tsx
@@ -0,0 +1,43 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Tab from './Tab';
+
+describe('Tab 컴포넌트', () => {
+  const mockOnTabChange = jest.fn();
+  const items = ['탭1', '탭2', '탭3'] as const;
+
+  beforeEach(() => {
+    mockOnTabChange.mockClear();
+  });
+
+  it('모든 탭 아이템이 렌더링되어야 한다', () => {
+    render(
+      <Tab
+        items={items}
+        activeTab="탭1"
+        onTabChange={mockOnTabChange}
+        tabType="MAIN_TAB"
+      />,
+    );
+
+    items.forEach((item) => {
+      expect(screen.getByText(item)).toBeInTheDocument();
+    });
+  });
+
+  it('탭 클릭시 onTabChange가 호출되어야 한다', () => {
+    render(
+      <Tab
+        items={items}
+        activeTab="탭1"
+        onTabChange={mockOnTabChange}
+        tabType="MAIN_TAB"
+      />,
+    );
+
+    const secondTab = screen.getByText('탭2');
+    fireEvent.click(secondTab);
+
+    expect(mockOnTabChange).toHaveBeenCalledWith('탭2');
+  });
+});
diff --git a/src/components/tab/Tab.tsx b/src/components/tab/Tab.tsx
new file mode 100644
index 00000000..83e1c3b6
--- /dev/null
+++ b/src/components/tab/Tab.tsx
@@ -0,0 +1,60 @@
+import { TabType } from '@/constants/tabs';
+import Button from '@/components/button/Button';
+
+interface TabProps<T extends string> {
+  items: readonly T[];
+  activeTab: T;
+  onTabChange: (tab: T) => void;
+  tabType: TabType;
+}
+
+const getTabStyles = {
+  main: {
+    base: 'text-xl border-b-2 rounded-none px-4 py-2  transition-all',
+    active: 'border-green-dark-01 text-green-dark-01',
+    inactive: 'border-transparent text-gray-dark-02 hover:text-green-dark-01',
+  },
+  container: 'flex gap-2',
+};
+
+function Tab<T extends string>({
+  items,
+  activeTab,
+  onTabChange,
+  tabType,
+}: TabProps<T>) {
+  const renderMainTab = (item: T) => (
+    <button
+      key={item}
+      onClick={() => onTabChange(item)}
+      className={`${getTabStyles.main.base} ${
+        activeTab === item
+          ? getTabStyles.main.active
+          : getTabStyles.main.inactive
+      }`}
+    >
+      {item}
+    </button>
+  );
+
+  const renderSubTab = (item: T) => (
+    <Button
+      key={item}
+      text={item}
+      size="modal"
+      fillType="outline"
+      themeColor={activeTab === item ? 'green-normal-01' : 'gray-normal-02'}
+      onClick={() => onTabChange(item)}
+    />
+  );
+
+  return (
+    <div className={getTabStyles.container}>
+      {items.map((item) =>
+        tabType === 'SUB_TAB' ? renderSubTab(item) : renderMainTab(item),
+      )}
+    </div>
+  );
+}
+
+export default Tab;
diff --git a/src/components/written-review/WrittenReview.stories.tsx b/src/components/written-review/WrittenReview.stories.tsx
new file mode 100644
index 00000000..5e1d2f2c
--- /dev/null
+++ b/src/components/written-review/WrittenReview.stories.tsx
@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import WrittenReview from './WrittenReview';
+
+// 컴파운드 컴포넌트의 모든 props를 포함하는 타입 정의
+interface StoryProps {
+  ratingCount: number;
+  comment: string;
+  profileImage: string;
+  userName: string;
+  createdAt: string;
+  clubImage: string;
+  clubName: string;
+  clubImageAlt: string;
+  location: string;
+}
+
+const meta = {
+  title: 'Components/WrittenReview/Base',
+  component: WrittenReview,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'WrittenReview 컴포넌트는 컴파운드 패턴으로 구성된 리뷰를 렌더링하는 데 사용됩니다. 하위 컴포넌트는 독립적으로도 활용할 수 있습니다.',
+      },
+    },
+  },
+} satisfies Meta<typeof WrittenReview>;
+
+export default meta;
+type Story = StoryObj<StoryProps>;
+
+export const Rating: Story = {
+  render: (args) => <WrittenReview.Rating ratingCount={args.ratingCount} />,
+  args: {
+    ratingCount: 4,
+  },
+};
+
+export const Comment: Story = {
+  render: (args) => <WrittenReview.Comment text={args.comment} />,
+  args: {
+    comment:
+      '아침부터 자기발전을 위한 시간을 가져서 좋았어요. 각자의 길 위에서 달려가는 생생한 순간을 공유해주셔서 감사합니다!',
+  },
+};
+
+export const UserProfile: Story = {
+  render: (args) => (
+    <WrittenReview.UserProfile
+      profileImage={args.profileImage}
+      userName={args.userName}
+      createdAt={args.createdAt}
+    />
+  ),
+  args: {
+    profileImage:
+      'https://cdn.pixabay.com/photo/2024/02/17/00/18/cat-8578562_1280.jpg',
+    userName: '다람쥐',
+    createdAt: '2024.01.25',
+  },
+};
+
+export const ClubImage: Story = {
+  render: (args) => (
+    <WrittenReview.ClubImage src={args.clubImage} alt={args.clubImageAlt} />
+  ),
+  args: {
+    clubImage:
+      'https://cdn.pixabay.com/photo/2024/02/17/00/18/cat-8578562_1280.jpg',
+    clubImageAlt: '모임 이미지',
+  },
+};
+
+export const MypageReview: Story = {
+  render: (args) => (
+    <div className="w-[311px] md:w-full">
+      <WrittenReview>
+        <div className="flex flex-col items-center gap-x-6 sm:items-start sm:gap-y-2 md:flex-row">
+          <WrittenReview.ClubImage
+            src={args.clubImage}
+            alt={args.clubImageAlt}
+          />
+          <div className="flex flex-col justify-start gap-y-1">
+            <WrittenReview.Rating ratingCount={args.ratingCount} />
+            <WrittenReview.ClubInfo
+              clubName={args.clubName}
+              location={args.location}
+            />
+            <WrittenReview.Comment text={args.comment} />
+            <WrittenReview.UserProfile
+              createdAt={args.createdAt}
+              className="gap-x-0"
+            />
+          </div>
+        </div>
+      </WrittenReview>
+    </div>
+  ),
+  args: {
+    profileImage:
+      'https://cdn.pixabay.com/photo/2024/02/17/00/18/cat-8578562_1280.jpg',
+    userName: '다람쥐',
+    ratingCount: 4,
+    comment:
+      '아침부터 자기발전을 위한 시간을 가져서 좋았어요. 각자의 길 위에서 달려가는 생생한 순간을 공유해주셔서 감사합니다!',
+    createdAt: '2024.01.25',
+    clubImage:
+      'https://cdn.pixabay.com/photo/2024/02/17/00/18/cat-8578562_1280.jpg',
+    clubName: '달램핏 오피스 스트레칭',
+    clubImageAlt: '달램핏 이미지',
+    location: '을지로 3가',
+  },
+};
diff --git a/src/components/written-review/WrittenReview.tsx b/src/components/written-review/WrittenReview.tsx
new file mode 100644
index 00000000..c77a5231
--- /dev/null
+++ b/src/components/written-review/WrittenReview.tsx
@@ -0,0 +1,107 @@
+import Image from 'next/image';
+import RatingDisplay from '../rating-display/RatingDisplay';
+import { LocationIcon } from '../../../public/icons';
+import {
+  ClubImageProps,
+  ClubInfoProps,
+  CommentProps,
+  RatingProps,
+  UserProfileProps,
+} from './types/writtenReview';
+
+// 기본 이미지 (변경될 수 있음)
+const defaultProfileImage = '/images/profile.png';
+const defaultClubImage = '/images/profile.png';
+
+function handleImageError(
+  event: React.SyntheticEvent<HTMLImageElement>,
+  defaultSrc: string,
+) {
+  event.currentTarget.src = defaultSrc;
+}
+
+export default function WrittenReview({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <article className="flex w-full max-w-[948px] flex-col items-start sm:justify-center">
+      {children}
+      <hr className="border-t-1 mt-4 w-full border-gray-normal-01" />
+    </article>
+  );
+}
+
+function Rating({ ratingCount }: RatingProps) {
+  return <RatingDisplay ratingCount={ratingCount} />;
+}
+
+function Comment({ text }: CommentProps) {
+  return (
+    <p className="max-w-full flex-wrap text-sm font-medium text-gray-darker">
+      {text}
+    </p>
+  );
+}
+
+function UserProfile({
+  profileImage,
+  userName,
+  createdAt,
+  className,
+}: UserProfileProps) {
+  return (
+    <div className={`flex items-center gap-x-[6px] ${className}`}>
+      {profileImage && (
+        <Image
+          width={24}
+          height={24}
+          src={profileImage || defaultProfileImage}
+          alt={`${userName}'s profile picture`}
+          className="h-6 w-6 rounded-full object-cover"
+          onError={(e) => handleImageError(e, defaultProfileImage)}
+        />
+      )}
+      <p className="flex h-[1em] items-center text-xs font-semibold text-gray-darker">
+        {userName}
+      </p>
+      <p className="text-xs font-medium text-gray-normal-03">{createdAt}</p>
+    </div>
+  );
+}
+
+function ClubImage({ src, alt }: ClubImageProps) {
+  return (
+    <Image
+      src={src}
+      alt={alt || 'Club image'}
+      width={0} // 너비를 Tailwind로 관리하므로 설정하지 않음
+      height={0} // 비율을 유지하며 높이는 자동으로 설정됨
+      sizes="(max-width: 744px) 311px, 280px"
+      className="h-[156px] w-[311px] rounded-3xl object-cover md:w-[280px]"
+      onError={(e) => handleImageError(e, defaultClubImage)}
+    />
+  );
+}
+
+function ClubInfo({ clubName, location }: ClubInfoProps) {
+  return (
+    <div className="flex items-center gap-x-2">
+      <p className="text-sm font-bold">{clubName}</p>
+      <div className="flex items-center">
+        <LocationIcon />
+        <span className="text-sm font-semibold text-gray-dark-03">
+          {location}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+// WrittenReview의 자식 컴포넌트 연결
+WrittenReview.Rating = Rating;
+WrittenReview.Comment = Comment;
+WrittenReview.UserProfile = UserProfile;
+WrittenReview.ClubInfo = ClubInfo;
+WrittenReview.ClubImage = ClubImage;
diff --git a/src/components/written-review/club-review/ClubReview.stories.tsx b/src/components/written-review/club-review/ClubReview.stories.tsx
new file mode 100644
index 00000000..ad6fa079
--- /dev/null
+++ b/src/components/written-review/club-review/ClubReview.stories.tsx
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ClubReview from './ClubReview';
+
+const meta = {
+  title: 'Components/WrittenReview/ClubReview',
+  component: ClubReview,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof ClubReview>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    ratingCount: 4,
+    comment:
+      '아침부터 자기발전을 위한 시간을 가져서 좋았어요. 각자의 길 위에서 달려가는 생생한 순간을 공유해주셔서 감사합니다!',
+    userProfile: {
+      profileImage:
+        'https://cdn.pixabay.com/photo/2024/02/17/00/18/cat-8578562_1280.jpg',
+      userName: '다람쥐',
+      createdAt: '2024.01.25',
+    },
+  },
+};
diff --git a/src/components/written-review/club-review/ClubReview.tsx b/src/components/written-review/club-review/ClubReview.tsx
new file mode 100644
index 00000000..501fb714
--- /dev/null
+++ b/src/components/written-review/club-review/ClubReview.tsx
@@ -0,0 +1,28 @@
+import WrittenReview from '../WrittenReview';
+
+interface ClubReviewProps {
+  ratingCount: number;
+  comment: string;
+  userProfile: {
+    profileImage: string;
+    userName: string;
+    createdAt: string;
+  };
+}
+
+function ClubReview({ ratingCount, comment, userProfile }: ClubReviewProps) {
+  return (
+    <WrittenReview>
+      <div className="flex flex-col gap-y-2">
+        <WrittenReview.Rating ratingCount={ratingCount} />
+        <WrittenReview.Comment text={comment} />
+        <WrittenReview.UserProfile
+          profileImage={userProfile.profileImage}
+          userName={userProfile.userName}
+          createdAt={userProfile.createdAt}
+        />
+      </div>
+    </WrittenReview>
+  );
+}
+export default ClubReview;
diff --git a/src/components/written-review/types/writtenReview.ts b/src/components/written-review/types/writtenReview.ts
new file mode 100644
index 00000000..0f22dacc
--- /dev/null
+++ b/src/components/written-review/types/writtenReview.ts
@@ -0,0 +1,24 @@
+export interface UserProfileProps {
+  profileImage?: string;
+  userName?: string;
+  createdAt: string;
+  className?: string;
+}
+
+export interface ClubImageProps {
+  src: string;
+  alt?: string;
+}
+
+export interface ClubInfoProps {
+  clubName: string;
+  location: string;
+}
+
+export interface CommentProps {
+  text: string;
+}
+
+export interface RatingProps {
+  ratingCount: number;
+}
diff --git a/src/constants/avatar.ts b/src/constants/avatar.ts
new file mode 100644
index 00000000..9087e70f
--- /dev/null
+++ b/src/constants/avatar.ts
@@ -0,0 +1,9 @@
+export const AVATAR_SIZE = {
+  sm: 'h-[29px] w-[29px]',
+  md: 'h-[38px] w-[38px]',
+  lg: 'h-[56px] w-[56px]',
+  xl: 'h-[74px] w-[71px]',
+  max: 'h-[74px] w-[74px]',
+} as const;
+
+export type AvatarSize = keyof typeof AVATAR_SIZE;
diff --git a/src/constants/button.ts b/src/constants/button.ts
new file mode 100644
index 00000000..26326def
--- /dev/null
+++ b/src/constants/button.ts
@@ -0,0 +1,122 @@
+export const SIZE = {
+  modal: 'min-w-[120px] h-[44px] px-4 text-base',
+  large: 'min-w-[402px] h-[44px] px-4 text-base',
+  medium: 'min-w-[332px] h-[44px] px-4 text-base',
+  small: 'min-w-[120px] h-[40px] px-3 text-sm',
+} as const;
+
+export const COLOR_SCHEMES = {
+  'gray-white': {
+    bg: 'bg-gray-white',
+    text: 'text-gray-white',
+    border: 'border-gray-white',
+  },
+  'gray-light-01': {
+    bg: 'bg-gray-light-01',
+    text: 'text-gray-light-01',
+    border: 'border-gray-light-01',
+  },
+  'gray-light-02': {
+    bg: 'bg-gray-light-02',
+    text: 'text-gray-light-02',
+    border: 'border-gray-light-02',
+  },
+  'gray-normal-01': {
+    bg: 'bg-gray-normal-01',
+    text: 'text-gray-normal-01',
+    border: 'border-gray-normal-01',
+  },
+  'gray-normal-02': {
+    bg: 'bg-gray-normal-02',
+    text: 'text-gray-normal-02',
+    border: 'border-gray-normal-02',
+  },
+  'gray-normal-03': {
+    bg: 'bg-gray-normal-03',
+    text: 'text-gray-normal-03',
+    border: 'border-gray-normal-03',
+  },
+  'gray-dark-01': {
+    bg: 'bg-gray-dark-01',
+    text: 'text-gray-dark-01',
+    border: 'border-gray-dark-01',
+  },
+  'gray-dark-02': {
+    bg: 'bg-gray-dark-02',
+    text: 'text-gray-dark-02',
+    border: 'border-gray-dark-02',
+  },
+  'gray-dark-03': {
+    bg: 'bg-gray-dark-03',
+    text: 'text-gray-dark-03',
+    border: 'border-gray-dark-03',
+  },
+  'gray-darker': {
+    bg: 'bg-gray-darker',
+    text: 'text-gray-darker',
+    border: 'border-gray-darker',
+  },
+  'gray-black': {
+    bg: 'bg-gray-black',
+    text: 'text-gray-black',
+    border: 'border-gray-black',
+  },
+  'green-light-01': {
+    bg: 'bg-green-light-01',
+    text: 'text-green-light-01',
+    border: 'border-green-light-01',
+  },
+  'green-light-02': {
+    bg: 'bg-green-light-02',
+    text: 'text-green-light-02',
+    border: 'border-green-light-02',
+  },
+  'green-light-03': {
+    bg: 'bg-green-light-03',
+    text: 'text-green-light-03',
+    border: 'border-green-light-03',
+  },
+  'green-normal-01': {
+    bg: 'bg-green-normal-01',
+    text: 'text-green-normal-01',
+    border: 'border-green-normal-01',
+  },
+  'green-normal-02': {
+    bg: 'bg-green-normal-02',
+    text: 'text-green-normal-02',
+    border: 'border-green-normal-02',
+  },
+  'green-normal-03': {
+    bg: 'bg-green-normal-03',
+    text: 'text-green-normal-03',
+    border: 'border-green-normal-03',
+  },
+  'green-dark-01': {
+    bg: 'bg-green-dark-01',
+    text: 'text-green-dark-01',
+    border: 'border-green-dark-01',
+  },
+  'green-dark-02': {
+    bg: 'bg-green-dark-02',
+    text: 'text-green-dark-02',
+    border: 'border-green-dark-02',
+  },
+  'green-dark-03': {
+    bg: 'bg-green-dark-03',
+    text: 'text-green-dark-03',
+    border: 'border-green-dark-03',
+  },
+  'green-darker': {
+    bg: 'bg-green-darker',
+    text: 'text-green-darker',
+    border: 'border-green-darker',
+  },
+  'blue-normal-01': {
+    bg: 'bg-blue-normal-01',
+    text: 'text-blue-normal-01',
+    border: 'border-blue-normal-01',
+  },
+} as const;
+
+export type ButtonSize = keyof typeof SIZE;
+export type ButtonColorGroup = keyof typeof COLOR_SCHEMES;
diff --git a/src/constants/dropdown.ts b/src/constants/dropdown.ts
new file mode 100644
index 00000000..9a95080d
--- /dev/null
+++ b/src/constants/dropdown.ts
@@ -0,0 +1,33 @@
+export const DROPDOWN_LABELS = {
+  navbar: '',
+  onOff: '온/오프라인',
+  memberCount: '인원수',
+  sortingReview: '최신순',
+} as const;
+
+export const MENU_ITEMS = {
+  navbar: [
+    { value: 'MY_PAGE', label: '마이페이지' },
+    { value: 'LOGOUT', label: '로그아웃' },
+  ],
+  onOff: [
+    { value: 'TOTAL', label: '온/오프라인' },
+    { value: 'ONLINE', label: '온라인' },
+    { value: 'OFFLINE', label: '오프라인' },
+  ],
+  memberCount: [
+    { value: 'TOTAL', label: '전체' },
+    { value: 'TWO_FOUR', label: '2~4명' },
+    { value: 'FIVE_SEVEN', label: '5~7명' },
+    { value: 'EIGHT_TEN', label: '8~10명' },
+    { value: 'OVER_ELEVEN', label: '11명 이상' },
+  ],
+  sortingReview: [
+    { value: 'LATEST', label: '최신순' },
+    { value: 'HIGHEST', label: '리뷰높은순' },
+    { value: 'LOWEST', label: '리뷰낮은순' },
+  ],
+} as const;
+
+export type DropDownLabels = keyof typeof DROPDOWN_LABELS;
+export type MenuItems = keyof typeof MENU_ITEMS;
diff --git a/src/constants/index.ts b/src/constants/index.ts
new file mode 100644
index 00000000..aa898002
--- /dev/null
+++ b/src/constants/index.ts
@@ -0,0 +1,5 @@
+export * from './avatar';
+export * from './navigation';
+export * from './dropdown';
+export * from './tabs';
+export * from './button';
diff --git a/src/constants/navigation.ts b/src/constants/navigation.ts
new file mode 100644
index 00000000..11e5e5a6
--- /dev/null
+++ b/src/constants/navigation.ts
@@ -0,0 +1,8 @@
+export const NAV_ITEMS = [
+  { id: 'bookco', href: '/exchange', label: 'bookco' },
+  { id: 'bookclub', href: '/bookclub', label: '책 모임' },
+  { id: 'exchange', href: '/exchange', label: '책 교환' },
+  { id: 'wish', href: '/wish', label: '찜 목록' },
+] as const;
+
+export type NavItem = (typeof NAV_ITEMS)[number];
diff --git a/src/constants/tabs.ts b/src/constants/tabs.ts
new file mode 100644
index 00000000..5b2b0298
--- /dev/null
+++ b/src/constants/tabs.ts
@@ -0,0 +1,17 @@
+export const BOOK_TABS = ['전체', '자유책', '지정책'] as const;
+
+export const CONTENT_TABS = ['모임', '교환'] as const;
+
+export const CLUB_TABS = ['나의 모임', '내가 만든 모임', '나의 리뷰'] as const;
+
+export const EXCHANGE_TABS = [
+  '나의 교환',
+  '내가 등록한 책',
+  '교환 리뷰',
+] as const;
+
+export type TabType = 'MAIN_TAB' | 'SUB_TAB';
+export type BookTab = (typeof BOOK_TABS)[number];
+export type ContentTab = (typeof CONTENT_TABS)[number];
+export type ClubTab = (typeof CLUB_TABS)[number];
+export type ExchangeTab = (typeof EXCHANGE_TABS)[number];
diff --git a/src/features/auth/api/auth.ts b/src/features/auth/api/auth.ts
new file mode 100644
index 00000000..e735b25c
--- /dev/null
+++ b/src/features/auth/api/auth.ts
@@ -0,0 +1,85 @@
+import apiClient from '@/lib/utils/apiClient';
+import { LoginFormData } from '../types/loginFormSchema';
+import { useAuthStore } from '@/store/authStore';
+import {
+  setCookie,
+  deleteCookie,
+  getCookie,
+} from '@/features/auth/utils/cookies';
+import { User } from '../types/user';
+import { SignUpFormData } from '../types/sign-up.schema';
+
+export const login = async (data: LoginFormData) => {
+  try {
+    const response = await apiClient.post<{
+      accessToken: string;
+      refreshToken: string;
+    }>('/auths/signin', data);
+
+    const { accessToken, refreshToken } = response.data;
+
+    setCookie('auth_token', accessToken);
+    setCookie('refresh_token', refreshToken);
+
+    const { setIsLoggedIn } = useAuthStore.getState();
+    setIsLoggedIn(true);
+
+    await getUserInfo();
+
+    return response.data;
+  } catch (error) {
+    console.error('로그인 에러:', error);
+    throw error;
+  }
+};
+
+export const getUserInfo = async () => {
+  try {
+    const response = await apiClient.get<User>('/auths/user');
+    const { setUser } = useAuthStore.getState();
+    setUser(response.data);
+    return response.data;
+  } catch (error) {
+    console.error('사용자 정보 조회 에러:', error);
+    throw error;
+  }
+};
+
+export const logout = async () => {
+  try {
+    const accessToken = getCookie('auth_token');
+    const refreshToken = getCookie('refresh_token');
+
+    await apiClient.post('/auths/signout', {
+      accessToken,
+      refreshToken,
+    });
+
+    const { setIsLoggedIn, setUser } = useAuthStore.getState();
+    setIsLoggedIn(false);
+    setUser(null);
+
+    deleteCookie('auth_token');
+    deleteCookie('refresh_token');
+  } catch (error) {
+    console.error('로그아웃 에러:', error);
+    throw error;
+  }
+};
+
+export const signup = async (data: SignUpFormData) => {
+  try {
+    const response = await apiClient.post('/auths/signup', {
+      name: data.name,
+      email: data.email,
+      password: data.password,
+      nickname: data.nickname,
+      description: data.description,
+    });
+
+    return response.data;
+  } catch (error) {
+    console.error('회원가입 에러:', error);
+    throw error;
+  }
+};
diff --git a/src/features/auth/components/form-field/FormField.stories.tsx b/src/features/auth/components/form-field/FormField.stories.tsx
new file mode 100644
index 00000000..ef71fe08
--- /dev/null
+++ b/src/features/auth/components/form-field/FormField.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import FormField from './FormField';
+
+const meta: Meta<typeof FormField> = {
+  title: 'Auth/FormField',
+  component: FormField,
+};
+
+export default meta;
+type Story = StoryObj<typeof FormField>;
+
+export const EmailField: Story = {
+  args: {
+    label: '아이디',
+    type: 'text',
+    placeholder: '이메일을 입력해주세요',
+    id: 'email',
+  },
+};
+
+export const PasswordField: Story = {
+  args: {
+    label: '비밀번호',
+    type: 'password',
+    placeholder: '비밀번호를 입력해주세요.',
+    id: 'password',
+  },
+};
diff --git a/src/features/auth/components/form-field/FormField.test.tsx b/src/features/auth/components/form-field/FormField.test.tsx
new file mode 100644
index 00000000..f13d71d9
--- /dev/null
+++ b/src/features/auth/components/form-field/FormField.test.tsx
@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import FormField from './FormField';
+
+describe('FormField', () => {
+  const defaultProps = {
+    label: '아이디',
+    type: 'text',
+    placeholder: '이메일을 입력해주세요',
+    id: 'email',
+    register: {
+      onChange: jest.fn(),
+      onBlur: jest.fn(),
+      ref: jest.fn(),
+      name: 'email',
+    },
+  };
+
+  it('label과 input이 올바르게 렌더링되어야 한다', () => {
+    render(<FormField {...defaultProps} />);
+
+    expect(screen.getByLabelText('아이디')).toBeInTheDocument();
+    expect(
+      screen.getByPlaceholderText('이메일을 입력해주세요'),
+    ).toBeInTheDocument();
+  });
+
+  describe('password type input', () => {
+    const passwordProps = {
+      ...defaultProps,
+      type: 'password',
+      label: '비밀번호',
+      placeholder: '비밀번호를 입력해주세요',
+      id: 'password',
+      register: {
+        onChange: jest.fn(),
+        onBlur: jest.fn(),
+        ref: jest.fn(),
+        name: 'password',
+      },
+    };
+
+    it('토글 버튼 클릭 시 input type이 변경되어야 한다', async () => {
+      render(<FormField {...passwordProps} />);
+
+      const input = screen.getByPlaceholderText('비밀번호를 입력해주세요');
+      const toggleButton = screen.getByRole('button');
+
+      await userEvent.click(toggleButton);
+      expect(input).toHaveAttribute('type', 'text');
+
+      await userEvent.click(toggleButton);
+      expect(input).toHaveAttribute('type', 'password');
+    });
+  });
+});
diff --git a/src/features/auth/components/form-field/FormField.tsx b/src/features/auth/components/form-field/FormField.tsx
new file mode 100644
index 00000000..b587cc6f
--- /dev/null
+++ b/src/features/auth/components/form-field/FormField.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import { VisibilityOn, VisibilityOff } from '../../../../../public/icons';
+import { UseFormRegisterReturn } from 'react-hook-form';
+import { usePasswordVisibility } from '../../hooks/usePasswordVisibility';
+import React from 'react';
+
+interface FormFieldProps {
+  label: string | React.ReactNode;
+  type: string;
+  placeholder: string;
+  id: string;
+  register: UseFormRegisterReturn;
+  error?: string;
+}
+
+function FormField({
+  label,
+  type,
+  placeholder,
+  id,
+  register,
+  error,
+}: FormFieldProps) {
+  const { showPassword, togglePassword, passwordType } =
+    usePasswordVisibility();
+
+  return (
+    <div className="flex w-full flex-col gap-2">
+      <label htmlFor={id} className="font-semibold">
+        {label}
+      </label>
+      <div className="relative w-full">
+        <input
+          {...register}
+          id={id}
+          type={type === 'password' ? passwordType : type}
+          placeholder={placeholder}
+          className={`w-full rounded-lg bg-white p-2 sm:p-3 ${
+            error ? 'border-2 border-red-500' : ''
+          }`}
+        />
+        {type === 'password' && (
+          <button
+            type="button"
+            onClick={togglePassword}
+            className="absolute right-3 top-1/2 -translate-y-1/2"
+            aria-label={showPassword ? '비밀번호 숨기기' : '비밀번호 표시'}
+          >
+            {showPassword ? <VisibilityOn /> : <VisibilityOff />}
+          </button>
+        )}
+      </div>
+      {error && <p className="text-sm text-red-500">{error}</p>}
+    </div>
+  );
+}
+
+export default FormField;
diff --git a/src/features/auth/constants/messages.ts b/src/features/auth/constants/messages.ts
new file mode 100644
index 00000000..1676dfda
--- /dev/null
+++ b/src/features/auth/constants/messages.ts
@@ -0,0 +1,28 @@
+export const AUTH_ERROR_MESSAGES = {
+  USER_NOT_FOUND: '존재하지 않는 아이디입니다.',
+  INVALID_CREDENTIALS: '비밀번호가 아이디와 일치하지 않습니다.',
+  SERVER_ERROR: '서버 오류가 발생했습니다',
+  EMAIL_EXISTS: '이미 사용 중인 이메일입니다',
+  SIGNUP_ERROR: '회원가입 중 오류가 발생했습니다.',
+} as const;
+
+export const LOGIN_FORM_PLACEHOLDERS = {
+  EMAIL: '이메일을 입력해주세요',
+  PASSWORD: '비밀번호를 입력해주세요.',
+} as const;
+
+export const SIGNUP_FORM_PLACEHOLDERS = {
+  NAME: '이름을 입력해주세요.',
+  EMAIL: '이메일을 입력해주세요.',
+  PASSWORD: '비밀번호를 입력해주세요.',
+  DESCRIPTION: '나를 소개해주세요.',
+  NICKNAME: '닉네임을 입력해주세요',
+} as const;
+
+export const SIGNUP_VALIDATION_MESSAGES = {
+  NAME_MIN_LENGTH: '이름은 2글자 이상이어야 합니다',
+  INVALID_EMAIL: '올바른 이메일 형식이 아닙니다',
+  PASSWORD_MIN_LENGTH: '비밀번호는 8자 이상이어야 합니다',
+  PASSWORD_MISMATCH: '비밀번호가 일치하지 않습니다',
+  NICKNAME_MIN_LENGTH: '닉네임은 최소 2자 이상이어야 합니다',
+} as const;
diff --git a/src/features/auth/container/auth-image/AuthImage.tsx b/src/features/auth/container/auth-image/AuthImage.tsx
new file mode 100644
index 00000000..f97cd5cb
--- /dev/null
+++ b/src/features/auth/container/auth-image/AuthImage.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import Image from 'next/image';
+import authImage from '../../../../../public/images/authImage.png';
+
+interface AuthImageProps {
+  isLoginPage?: boolean;
+}
+
+export default function AuthImage({ isLoginPage = false }: AuthImageProps) {
+  return (
+    <div className="flex w-full max-w-[500px] flex-col items-center">
+      <div className="mb-8 flex flex-col items-center">
+        <h1 className="text-[40px] font-bold text-green-normal-01">bookco</h1>
+        <p className="text-center text-xl font-bold text-green-normal-01">
+          책으로 엮는 커뮤니티
+        </p>
+        <p className="mt-2 text-center text-sm text-gray-darker md:text-base">
+          깊이 책을 읽고, 교환하며 독서 경험을 확장해보세요!
+        </p>
+      </div>
+      <div
+        className={`mb-8 w-full max-w-[400px] md:mb-0 ${
+          isLoginPage ? 'block' : 'hidden lg:block'
+        }`}
+      >
+        <Image
+          src={authImage}
+          alt="profile"
+          width={500}
+          height={310}
+          className="h-auto w-[300px] md:w-[400px] lg:w-[500px]"
+          priority
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/auth/container/login-form/LoginForm.stories.tsx b/src/features/auth/container/login-form/LoginForm.stories.tsx
new file mode 100644
index 00000000..07c16169
--- /dev/null
+++ b/src/features/auth/container/login-form/LoginForm.stories.tsx
@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import LoginForm from './LoginForm';
+
+const mockUseRouter = () => ({
+  useRouter: () => ({
+    push: () => {},
+    replace: () => {},
+    refresh: () => {},
+  }),
+});
+
+const meta = {
+  title: 'Auth/LoginForm',
+  component: LoginForm,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: '/login',
+        query: {},
+      },
+    },
+    mockData: {
+      router: mockUseRouter(),
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex min-h-screen items-center justify-center bg-gray-100">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof LoginForm>;
+
+export default meta;
+type Story = StoryObj<typeof LoginForm>;
+
+export const Default: Story = {};
diff --git a/src/features/auth/container/login-form/LoginForm.test.tsx b/src/features/auth/container/login-form/LoginForm.test.tsx
new file mode 100644
index 00000000..2add16e1
--- /dev/null
+++ b/src/features/auth/container/login-form/LoginForm.test.tsx
@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import LoginForm from './LoginForm';
+
+jest.mock('react-hook-form', () => ({
+  useForm: () => ({
+    register: () => ({}),
+    handleSubmit: (fn: any) => fn,
+    formState: {
+      isSubmitting: false,
+      errors: {},
+      isValid: true,
+    },
+    setError: jest.fn(),
+    reset: jest.fn(),
+  }),
+}));
+
+// next/navigation mock
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    replace: jest.fn(),
+  }),
+  useSearchParams: () => null,
+}));
+
+describe('LoginForm', () => {
+  it('폼이 올바르게 렌더링되어야 한다', () => {
+    render(<LoginForm />);
+
+    expect(screen.getByRole('heading', { name: '로그인' })).toBeInTheDocument();
+    expect(screen.getByLabelText('아이디')).toBeInTheDocument();
+    expect(screen.getByLabelText('비밀번호')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: '로그인' })).toBeInTheDocument();
+  });
+
+  it('이메일과 비밀번호를 입력할 수 있어야 한다', async () => {
+    render(<LoginForm />);
+
+    const emailInput = screen.getByLabelText('아이디');
+    const passwordInput = screen.getByLabelText('비밀번호');
+
+    await userEvent.type(emailInput, 'test@example.com');
+    await userEvent.type(passwordInput, 'password123');
+
+    expect(emailInput).toHaveValue('test@example.com');
+    expect(passwordInput).toHaveValue('password123');
+  });
+
+  it('로그인 버튼이 제출 가능한 상태여야 한다', () => {
+    render(<LoginForm />);
+
+    const submitButton = screen.getByRole('button', { name: '로그인' });
+    expect(submitButton).toBeEnabled();
+  });
+});
diff --git a/src/features/auth/container/login-form/LoginForm.tsx b/src/features/auth/container/login-form/LoginForm.tsx
new file mode 100644
index 00000000..89d719e2
--- /dev/null
+++ b/src/features/auth/container/login-form/LoginForm.tsx
@@ -0,0 +1,73 @@
+'use client';
+
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import Link from 'next/link';
+
+import Button from '@/components/button/Button';
+import FormField from '@/features/auth/components/form-field/FormField';
+import { useLoginSubmit } from '@/features/auth/hooks/useLoginSubmit';
+import {
+  loginFormSchema,
+  type LoginFormData,
+} from '@/features/auth/types/loginFormSchema';
+
+export default function LoginForm() {
+  const {
+    register,
+    handleSubmit,
+    setError,
+    reset,
+    formState: { isSubmitting, errors, isValid },
+  } = useForm<LoginFormData>({
+    resolver: zodResolver(loginFormSchema),
+    mode: 'onChange',
+  });
+
+  const onSubmit = useLoginSubmit(setError, reset);
+
+  return (
+    <div className="flex h-auto w-full flex-col items-center justify-center rounded-3xl bg-gray-light-02 px-4 py-8 sm:h-[422px] sm:w-[510px] sm:px-14">
+      <div className="flex w-full flex-col items-center justify-center gap-6">
+        <h3 className="text-2xl font-semibold">로그인</h3>
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="flex w-full flex-col gap-6"
+          data-testid="login-form"
+        >
+          <FormField
+            label="아이디"
+            type="text"
+            placeholder="이메일"
+            id="email"
+            register={register('email')}
+            error={errors.email?.message}
+          />
+          <FormField
+            label="비밀번호"
+            type="password"
+            placeholder="비밀번호"
+            id="password"
+            register={register('password')}
+            error={errors.password?.message}
+          />
+          <Button
+            text="로그인"
+            size="large"
+            fillType="solid"
+            themeColor="green-normal-01"
+            isSubmitting={isSubmitting}
+            disabled={!isValid}
+          />
+        </form>
+        <div className="flex w-full items-center justify-center gap-2 text-gray-normal-03">
+          <span>북코가 처음이신가요?</span>
+          <Link href="/sign-up" className="text-green-dark-01 underline">
+            회원가입
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/auth/container/sign-up/SignUpForm.tsx b/src/features/auth/container/sign-up/SignUpForm.tsx
new file mode 100644
index 00000000..41052e83
--- /dev/null
+++ b/src/features/auth/container/sign-up/SignUpForm.tsx
@@ -0,0 +1,107 @@
+'use client';
+
+import Link from 'next/link';
+import { useForm } from 'react-hook-form';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import Button from '@/components/button/Button';
+import FormField from '@/features/auth/components/form-field/FormField';
+import { useSignUpSubmit } from '@/features/auth/hooks/useSignUpSubmit';
+import {
+  signUpSchema,
+  type SignUpFormData,
+} from '@/features/auth/types/sign-up.schema';
+import { SIGNUP_FORM_PLACEHOLDERS } from '../../constants/messages';
+
+export default function SignUpForm() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting, isValid },
+    setError,
+    reset,
+  } = useForm<SignUpFormData>({
+    resolver: zodResolver(signUpSchema),
+    mode: 'onChange',
+  });
+
+  const onSubmit = useSignUpSubmit(setError, reset);
+  return (
+    <div className="w-full max-w-[400px] rounded-3xl bg-gray-light-02 px-6 py-8 md:min-w-[450px] md:max-w-[558px] md:px-[54px]">
+      <h3 className="mb-8 text-center text-xl font-bold text-gray-darker md:text-2xl">
+        회원가입
+      </h3>
+      <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6">
+        <FormField
+          label="이름"
+          type="text"
+          placeholder={SIGNUP_FORM_PLACEHOLDERS.NAME}
+          id="name"
+          register={register('name')}
+          error={errors.name?.message}
+        />
+        <FormField
+          label="이메일"
+          type="text"
+          placeholder={SIGNUP_FORM_PLACEHOLDERS.EMAIL}
+          id="email"
+          register={register('email')}
+          error={errors.email?.message}
+        />
+        <FormField
+          label="비밀번호"
+          type="password"
+          placeholder={SIGNUP_FORM_PLACEHOLDERS.PASSWORD}
+          id="password"
+          register={register('password')}
+          error={errors.password?.message}
+        />
+        <FormField
+          label="비밀번호 확인"
+          type="password"
+          placeholder={SIGNUP_FORM_PLACEHOLDERS.PASSWORD}
+          id="passwordConfirm"
+          register={register('passwordConfirm')}
+          error={errors.passwordConfirm?.message}
+        />
+        <FormField
+          label="닉네임"
+          type="text"
+          placeholder={SIGNUP_FORM_PLACEHOLDERS.NICKNAME}
+          id="nickname"
+          register={register('nickname')}
+          error={errors.nickname?.message}
+        />
+        <FormField
+          label={
+            <div className="flex items-center gap-1">
+              한 줄 소개
+              <span className="text-sm text-gray-dark-01">(선택)</span>
+            </div>
+          }
+          type="text"
+          placeholder={SIGNUP_FORM_PLACEHOLDERS.DESCRIPTION}
+          id="description"
+          register={register('description')}
+          error={errors.description?.message}
+        />
+        <Button
+          text="회원가입"
+          size="modal"
+          fillType="solid"
+          themeColor="green-normal-01"
+          className="w-full"
+          isSubmitting={isSubmitting}
+          disabled={!isValid}
+        />
+      </form>
+      <div className="mt-6 flex w-full items-center justify-center gap-2 text-gray-normal-03">
+        <span>이미 회원이신가요??</span>
+        <Link href="/login" className="text-green-dark-01 underline">
+          로그인
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/auth/hooks/index.ts b/src/features/auth/hooks/index.ts
deleted file mode 100644
index cb0ff5c3..00000000
--- a/src/features/auth/hooks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export {};
diff --git a/src/features/auth/hooks/useLoginSubmit.ts b/src/features/auth/hooks/useLoginSubmit.ts
new file mode 100644
index 00000000..016dad72
--- /dev/null
+++ b/src/features/auth/hooks/useLoginSubmit.ts
@@ -0,0 +1,28 @@
+import { useRouter, useSearchParams } from 'next/navigation';
+import { UseFormReset, UseFormSetError } from 'react-hook-form';
+import { login } from '../api/auth';
+import { LoginFormData } from '../types/loginFormSchema';
+import { handleAuthError } from '../utils/handleAuthError';
+
+export const useLoginSubmit = (
+  setError: UseFormSetError<LoginFormData>,
+  reset: UseFormReset<LoginFormData>,
+) => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const handleSubmit = async (data: LoginFormData) => {
+    try {
+      const response = await login(data);
+      console.log('로그인 성공:', response);
+      reset();
+
+      const returnUrl = searchParams.get('returnUrl') || '/exchange';
+      router.replace(returnUrl);
+    } catch (error) {
+      handleAuthError(error, setError);
+    }
+  };
+
+  return handleSubmit;
+};
diff --git a/src/features/auth/hooks/usePasswordVisibility.ts b/src/features/auth/hooks/usePasswordVisibility.ts
new file mode 100644
index 00000000..fdeac2c8
--- /dev/null
+++ b/src/features/auth/hooks/usePasswordVisibility.ts
@@ -0,0 +1,13 @@
+import { useState } from 'react';
+
+export const usePasswordVisibility = () => {
+  const [showPassword, setShowPassword] = useState(false);
+
+  const togglePassword = () => setShowPassword((prev) => !prev);
+
+  return {
+    showPassword,
+    togglePassword,
+    passwordType: showPassword ? 'text' : 'password',
+  } as const;
+};
diff --git a/src/features/auth/hooks/useSignUpSubmit.ts b/src/features/auth/hooks/useSignUpSubmit.ts
new file mode 100644
index 00000000..44a404e8
--- /dev/null
+++ b/src/features/auth/hooks/useSignUpSubmit.ts
@@ -0,0 +1,22 @@
+import { UseFormSetError, UseFormReset } from 'react-hook-form';
+import { SignUpFormData } from '../types/sign-up.schema';
+import { signup } from '../api/auth';
+import { useRouter } from 'next/navigation';
+import { handleAuthError } from '../utils/handleAuthError';
+
+export const useSignUpSubmit = (
+  setError: UseFormSetError<SignUpFormData>,
+  reset: UseFormReset<SignUpFormData>,
+) => {
+  const router = useRouter();
+
+  return async (data: SignUpFormData) => {
+    try {
+      await signup(data);
+      reset();
+      router.replace('/login');
+    } catch (error) {
+      handleAuthError(error, setError);
+    }
+  };
+};
diff --git a/src/features/auth/types/errors.ts b/src/features/auth/types/errors.ts
new file mode 100644
index 00000000..c98691ba
--- /dev/null
+++ b/src/features/auth/types/errors.ts
@@ -0,0 +1,13 @@
+export type AuthErrorCode =
+  | 'USER_NOT_FOUND'
+  | 'INVALID_CREDENTIALS'
+  | 'SERVER_ERROR'
+  | 'EMAIL_EXISTS';
+
+export interface AuthError {
+  response: {
+    data: {
+      code: AuthErrorCode;
+    };
+  };
+}
diff --git a/src/features/auth/types/index.ts b/src/features/auth/types/index.ts
deleted file mode 100644
index cb0ff5c3..00000000
--- a/src/features/auth/types/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export {};
diff --git a/src/features/auth/types/loginFormSchema.ts b/src/features/auth/types/loginFormSchema.ts
new file mode 100644
index 00000000..d604ec38
--- /dev/null
+++ b/src/features/auth/types/loginFormSchema.ts
@@ -0,0 +1,13 @@
+import { z } from 'zod';
+
+export const loginFormSchema = z.object({
+  email: z
+    .string()
+    .min(1, '이메일을 입력해주세요.')
+    .email('올바른 이메일 형식이 아닙니다.'),
+  password: z
+    .string()
+    .min(8, { message: '비밀번호는 최소 8자 이상이어야 합니다.' }),
+});
+
+export type LoginFormData = z.infer<typeof loginFormSchema>;
diff --git a/src/features/auth/types/sign-up.schema.ts b/src/features/auth/types/sign-up.schema.ts
new file mode 100644
index 00000000..1846a785
--- /dev/null
+++ b/src/features/auth/types/sign-up.schema.ts
@@ -0,0 +1,18 @@
+import { z } from 'zod';
+import { SIGNUP_VALIDATION_MESSAGES } from '../constants/messages';
+
+export const signUpSchema = z
+  .object({
+    name: z.string().min(2, SIGNUP_VALIDATION_MESSAGES.NAME_MIN_LENGTH),
+    email: z.string().email(SIGNUP_VALIDATION_MESSAGES.INVALID_EMAIL),
+    password: z.string().min(8, SIGNUP_VALIDATION_MESSAGES.PASSWORD_MIN_LENGTH),
+    passwordConfirm: z.string(),
+    nickname: z.string().min(2, '닉네임은 최소 2자 이상이어야 합니다'),
+    description: z.string().optional(),
+  })
+  .refine((data) => data.password === data.passwordConfirm, {
+    message: SIGNUP_VALIDATION_MESSAGES.PASSWORD_MISMATCH,
+    path: ['passwordConfirm'],
+  });
+
+export type SignUpFormData = z.infer<typeof signUpSchema>;
diff --git a/src/features/auth/types/user.ts b/src/features/auth/types/user.ts
new file mode 100644
index 00000000..194cbf3b
--- /dev/null
+++ b/src/features/auth/types/user.ts
@@ -0,0 +1,10 @@
+export interface User {
+  teamId: string;
+  id: number;
+  email: string;
+  name: string;
+  description: string | null;
+  image: string | null;
+  createdAt: Date;
+  updatedAt: Date;
+}
diff --git a/src/features/auth/utils/cookies.ts b/src/features/auth/utils/cookies.ts
new file mode 100644
index 00000000..ca37c320
--- /dev/null
+++ b/src/features/auth/utils/cookies.ts
@@ -0,0 +1,18 @@
+export const setCookie = (name: string, value: string) => {
+  const expirationDate = new Date();
+  expirationDate.setTime(expirationDate.getTime() + 60 * 60 * 1000);
+  document.cookie = `${name}=${value};path=/;expires=${expirationDate.toUTCString()}`;
+};
+
+export const getCookie = (name: string): string | null => {
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2) {
+    return parts.pop()?.split(';').shift() || null;
+  }
+  return null;
+};
+
+export const deleteCookie = (name: string) => {
+  document.cookie = `${name}=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
+};
diff --git a/src/features/auth/utils/handleAuthError.ts b/src/features/auth/utils/handleAuthError.ts
new file mode 100644
index 00000000..6b44957e
--- /dev/null
+++ b/src/features/auth/utils/handleAuthError.ts
@@ -0,0 +1,37 @@
+import { UseFormSetError } from 'react-hook-form';
+import { AuthError } from '../types/errors';
+import { AUTH_ERROR_MESSAGES } from '../constants/messages';
+
+export const handleAuthError = (
+  error: unknown,
+  setError: UseFormSetError<any>,
+) => {
+  const { code } = (error as AuthError).response.data;
+
+  switch (code) {
+    case 'USER_NOT_FOUND':
+      setError('email', {
+        message: AUTH_ERROR_MESSAGES.USER_NOT_FOUND,
+      });
+      break;
+    case 'INVALID_CREDENTIALS':
+      setError('password', {
+        message: AUTH_ERROR_MESSAGES.INVALID_CREDENTIALS,
+      });
+      break;
+    case 'EMAIL_EXISTS':
+      setError('email', {
+        message: AUTH_ERROR_MESSAGES.EMAIL_EXISTS,
+      });
+      break;
+    case 'SERVER_ERROR':
+      setError('root', {
+        message: AUTH_ERROR_MESSAGES.SERVER_ERROR,
+      });
+      break;
+    default:
+      setError('root', {
+        message: AUTH_ERROR_MESSAGES.SIGNUP_ERROR,
+      });
+  }
+};
diff --git a/src/features/bookclub/components/BookClubMainPage.tsx b/src/features/bookclub/components/BookClubMainPage.tsx
new file mode 100644
index 00000000..dcc537db
--- /dev/null
+++ b/src/features/bookclub/components/BookClubMainPage.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import {
+  HeaderSection,
+  FilterSection,
+  ClubListSection,
+} from '@/features/bookclub/components';
+import CategoryTabs from './CategoryTabs';
+
+function BookClubMainPage() {
+  return (
+    <>
+      <HeaderSection />
+      <section className="flex w-full flex-col gap-y-3 px-[20px] pt-[20px] md:px-[24px] lg:px-[102px]">
+        <CategoryTabs />
+        <FilterSection />
+      </section>
+      <ClubListSection />
+    </>
+  );
+}
+
+export default BookClubMainPage;
diff --git a/src/features/bookclub/components/CategoryTabs.tsx b/src/features/bookclub/components/CategoryTabs.tsx
new file mode 100644
index 00000000..74f7e4fb
--- /dev/null
+++ b/src/features/bookclub/components/CategoryTabs.tsx
@@ -0,0 +1,18 @@
+import Tab from '@/components/tab/Tab';
+import { useState } from 'react';
+
+function CategoryTabs() {
+  const [selectedTab, setSelectedTab] = useState('전체');
+  return (
+    <div>
+      <Tab
+        items={['전체', '자유책', '지정책']}
+        activeTab={selectedTab}
+        onTabChange={(item) => setSelectedTab(item)}
+        tabType="MAIN_TAB"
+      />
+      <hr className="-mx-[20px] border-t border-gray-normal-01 md:-mx-[24px] lg:-mx-[102px]" />
+    </div>
+  );
+}
+export default CategoryTabs;
diff --git a/src/features/bookclub/components/ClubListSection.tsx b/src/features/bookclub/components/ClubListSection.tsx
new file mode 100644
index 00000000..219f6afe
--- /dev/null
+++ b/src/features/bookclub/components/ClubListSection.tsx
@@ -0,0 +1,83 @@
+// import { Meeting } from '@/components/card/types';
+
+import Card from '@/components/card/Card';
+import { CardProps } from '@/components/card/types';
+
+// const mockImgSrc = '/images/profile.png';
+
+// const mockMeeting: Meeting = {
+//   meetingInfo: {
+//     title: '을지로에서 만나는 독서 모임',
+//     category: '자유책',
+//     location: '을지로 3가',
+//     datetime: '12/14(토) 오전 10:00',
+//   },
+//   participationStatus: {
+//     currentParticipants: 17,
+//     maxParticipants: 20,
+//     isConfirmed: true,
+//     confirmedVariant: 'confirmed',
+//     participants: [
+//       {
+//         src: mockImgSrc,
+//         alt: '참가자1',
+//       },
+//       {
+//         src: mockImgSrc,
+//         alt: '참가자2',
+//       },
+//       {
+//         src: mockImgSrc,
+//         alt: '참가자3',
+//       },
+//     ],
+//   },
+//   imageInfo: {
+//     url: mockImgSrc,
+//     isLiked: true,
+//     onLikeClick: () => alert('좋아요를 눌렀습니다!'),
+//   },
+//   isPast: false,
+//   isCanceled: false,
+//   actions: {
+//     onClick: () => alert('카드를 클릭했습니다!'),
+//     onDelete: () => alert('모임을 삭제했습니다!'),
+//   },
+// };
+
+const defaultCardProps: CardProps = {
+  imageUrl: '/images/profile.png',
+  imageAlt: '모임 이미지',
+  title: '독서 모임',
+  location: '서울 강남구',
+  datetime: '2024-01-20 14:00',
+  isLiked: false,
+  current: 3,
+  max: 8,
+  isPast: false,
+  isCanceled: false,
+  meetingType: 'FIXED',
+  status: 'pending',
+  onLikeClick: () => {
+    console.log('좋아요 클릭');
+  },
+  onClick: () => {
+    console.log('카드 클릭');
+  },
+  onDelete: () => {
+    console.log('삭제 클릭');
+  },
+};
+
+function ClubListSection() {
+  return (
+    <main className="flex w-full min-w-[336px] flex-col items-center gap-y-[26px] bg-gray-light-01 px-[20px] pt-[18px] sm:justify-between md:px-[24px] lg:px-[102px]">
+      <Card {...defaultCardProps} />
+      <Card {...defaultCardProps} />
+      <Card {...defaultCardProps} />
+      <Card {...defaultCardProps} />
+    </main>
+  );
+}
+
+export default ClubListSection;
diff --git a/src/features/bookclub/components/FilterSection.tsx b/src/features/bookclub/components/FilterSection.tsx
new file mode 100644
index 00000000..e1193ab1
--- /dev/null
+++ b/src/features/bookclub/components/FilterSection.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import DropDown from '@/components/drop-down/DropDown';
+import FilterCheckbox from '@/components/filter-checkbox/FilterCheckbox';
+import SearchBox from '@/components/search-box/SearchBox';
+import { useState } from 'react';
+import SortingButton from '@/components/sorting-button/SortingButton';
+
+function FilterSection() {
+  const [showAvailableOnly, setShowAvailableOnly] = useState(false); // 신청가능
+  const [searchValue, setSearchValue] = useState(''); // 검색
+
+  return (
+    <>
+      <div className="bg-white">
+        <SearchBox
+          value={searchValue}
+          onChange={(e) => setSearchValue(e.target.value)}
+          aria-label="책 검색"
+        />
+      </div>
+      <div className="flex w-full gap-x-2 overflow-x-auto whitespace-nowrap sm:justify-between [&::-webkit-scrollbar]:hidden">
+        <div className="flex items-center gap-x-2">
+          <DropDown
+            variant="onOff"
+            onChangeSelection={() => {}}
+            aria-label="온라인/오프라인 선택"
+          />
+          <DropDown
+            variant="memberCount"
+            onChangeSelection={() => {}}
+            aria-label="인원 수 선택"
+          />
+          <FilterCheckbox
+            label="신청가능"
+            checked={showAvailableOnly}
+            onChange={(e) => setShowAvailableOnly(e.target.checked)}
+            aria-label="신청가능 필터"
+          />
+        </div>
+        <SortingButton
+          variant="byDeadline"
+          onClickSorting={() => {}}
+          aria-label="마감임박 정렬"
+        />
+      </div>
+    </>
+  );
+}
+
+export default FilterSection;
diff --git a/src/features/bookclub/components/HeaderSection.tsx b/src/features/bookclub/components/HeaderSection.tsx
new file mode 100644
index 00000000..851afd19
--- /dev/null
+++ b/src/features/bookclub/components/HeaderSection.tsx
@@ -0,0 +1,23 @@
+import Button from '@/components/button/Button';
+
+function HeaderSection() {
+  return (
+    <header className="flex h-[120px] w-full min-w-[336px] items-end bg-green-light-01 px-[20px] py-[30px] sm:justify-between md:px-[24px] lg:px-[102px]">
+      <h1
+        className="flex-nowrap text-[20px] font-bold leading-[30px] tracking-tighter text-black md:text-2xl"
+        aria-labelledby="header-title"
+      >
+        반가워요, <span className="text-green-normal-01">북코</span>님!
+        <br />책 모임에 참여해 보세요
+      </h1>
+      <Button
+        text="모임 만들기"
+        size="small"
+        fillType="solid"
+        themeColor="green-normal-01"
+      />
+    </header>
+  );
+}
+
+export default HeaderSection;
diff --git a/src/features/bookclub/components/index.ts b/src/features/bookclub/components/index.ts
index cb0ff5c3..030f0e28 100644
--- a/src/features/bookclub/components/index.ts
+++ b/src/features/bookclub/components/index.ts
@@ -1 +1,4 @@
-export {};
+export { default as BookClubMainPage } from './BookClubMainPage';
+export { default as HeaderSection } from './HeaderSection';
+export { default as ClubListSection } from './ClubListSection';
+export { default as FilterSection } from './FilterSection';
diff --git a/src/features/bookclub/container/BookClubContainer.tsx b/src/features/bookclub/container/BookClubContainer.tsx
new file mode 100644
index 00000000..14123f2e
--- /dev/null
+++ b/src/features/bookclub/container/BookClubContainer.tsx
@@ -0,0 +1,59 @@
+// 'use client';
+
+// import React, { useState } from 'react';
+// import { useFetchBookClubList } from '../hooks/useFetchBookClubList';
+// import CategoryTabs from '../components/CategoryTabs';
+// import { FilterSection } from '../components';
+
+// function BookClubMainPage() {
+//   const { bookClubList, isLoading } = useFetchBookClubList();
+
+//   // const [selectedOnOff, setSelectedOnOff] = useState<string | undefined>(
+//   //   undefined,
+//   // );
+
+//   const [selectedSorting, setSelectedSorting] = useState<string | undefined>(
+//     undefined,
+//   );
+//   const [selectedTab, setSelectedTab] = useState('전체'); // 탭
+//   const [searchValue, setSearchValue] = useState(''); // 검색
+//   const [selectedMeetingType, setSelectedMeetingType] = useState('ALL'); // 온/오프라인인
+//   const [selectedMemberCount, setSelectedMemberCount] = useState<
+//     string | undefined
+//   >(undefined);
+//   const [showAvailableOnly, setShowAvailableOnly] = useState(false); // 신청가능
+
+//   // 필요한 데이터 가공
+//   const categoryData = Array.from(
+//     new Set(bookClubList.map((club) => club.meetingType)) // 중복 제거
+//   );
+
+//   const filteredData = bookClubList.filter((club) => {
+//     const matchesTab = selectedTab === '전체' || club.meetingType === selectedTab;
+//     const matchesSearch = club.title.includes(searchValue);
+//     return matchesTab && matchesSearch;
+//   });
+
+//   if (isLoading) {
+//     return <div>Loading...</div>;
+//   }
+
+//   return (
+//     <div>
+//       <CategoryTabs
+//         selectedTab={selectedTab}
+//         setSelectedTab={setSelectedTab}
+//         categoryData={categoryData} // 카테고리 데이터 전달
+//       />
+//       <FilterSection
+//         searchValue={searchValue}
+//         setSearchValue={setSearchValue}
+//         selectedMeetingType={selectedMeetingType}
+//         setSelectedMeetingType={setSelectedMeetingType}
+//         // filterData={filteredData} // 필터링된 데이터 전달
+//       />
+//     </div>
+//   );
+// }
+
+// export default BookClubMainPage;
diff --git a/src/features/bookclub/hooks/useFetchBookClubList.ts b/src/features/bookclub/hooks/useFetchBookClubList.ts
new file mode 100644
index 00000000..1a69f895
--- /dev/null
+++ b/src/features/bookclub/hooks/useFetchBookClubList.ts
@@ -0,0 +1,24 @@
+import apiClient from '@/lib/utils/apiClient';
+import { useEffect, useState } from 'react';
+
+export const useFetchBookClubList = () => {
+  const [bookClubList, setBookClubList] = useState([]); // 목록 데이터 저장
+  const [isLoading, setIsLoading] = useState(false); // 로딩 상태 관리
+
+  useEffect(() => {
+    const fetchBookClubs = async () => {
+      setIsLoading(true);
+      try {
+        const response = await apiClient.get('/api/v1/book-clubs');
+        setBookClubList(response.data.bookClubs);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchBookClubs();
+  }, []);
+
+  return { bookClubList, isLoading };
+};
diff --git a/src/features/club-create/api/index.ts b/src/features/club-create/api/index.ts
index cb0ff5c3..989b1136 100644
--- a/src/features/club-create/api/index.ts
+++ b/src/features/club-create/api/index.ts
@@ -1 +1,39 @@
-export {};
+import apiClient from '@/lib/utils/apiClient';
+import { BookClubForm } from '../types';
+import { toKoreanTime } from '@/lib/utils/dateUtils';
+
+export const createBookClub = async (data: BookClubForm) => {
+  const formData = new FormData();
+
+  const imageFile = data.image instanceof File ? data.image : null;
+  if (imageFile) {
+    formData.append('image', imageFile);
+  }
+
+  const bookClubData = {
+    title: data.title,
+    description: data.description,
+    bookClubType: data.bookClubType,
+    meetingType: data.meetingType,
+    targetDate: toKoreanTime(data.targetDate),
+    endDate: toKoreanTime(data.endDate),
+    memberLimit: data.memberLimit,
+    city: data.city,
+    town: data.town,
+  };
+
+  formData.append(
+    'bookClub',
+    new Blob([JSON.stringify(bookClubData)], {
+      type: 'application/json',
+    }),
+  );
+
+  const response = await apiClient.post('/book-clubs', formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+
+  return response.data;
+};
diff --git a/src/features/club-create/components/CreateClubFormField.tsx b/src/features/club-create/components/CreateClubFormField.tsx
new file mode 100644
index 00000000..eebe70f2
--- /dev/null
+++ b/src/features/club-create/components/CreateClubFormField.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+interface CreateClubFormFieldProps
+  extends React.ComponentPropsWithoutRef<'div'> {
+  label: string;
+  children: React.ReactNode;
+  error?: string;
+  currentLength?: number;
+  maxLength?: number;
+}
+
+function CreateClubFormField({
+  label,
+  children,
+  error,
+  currentLength = 0,
+  maxLength,
+  ...props
+}: CreateClubFormFieldProps) {
+  const isOverMaxLength = maxLength !== undefined && currentLength > maxLength;
+
+  return (
+    <div className="flex w-full flex-col gap-3" {...props}>
+      <div className="flex w-full items-center justify-between">
+        <label className="font-semibold text-gray-black">{label}</label>
+        {maxLength !== undefined && (
+          <span className="text-sm">
+            <span className="text-gray-black">{currentLength}</span>/
+            <span
+              className={isOverMaxLength ? 'text-red-500' : 'text-blue-500'}
+            >
+              {maxLength}
+            </span>
+          </span>
+        )}
+      </div>
+      {children}
+      {error && <p className="mt-1 text-sm text-red-500">{error}</p>}
+    </div>
+  );
+}
+
+export default CreateClubFormField;
diff --git a/src/features/club-create/components/InputField.tsx b/src/features/club-create/components/InputField.tsx
new file mode 100644
index 00000000..7145fed7
--- /dev/null
+++ b/src/features/club-create/components/InputField.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+interface InputFieldProps extends React.ComponentPropsWithoutRef<'input'> {
+  register?: any;
+}
+
+function InputField({
+  type = 'text',
+  placeholder = '',
+  register,
+  className = '',
+  ...props
+}: InputFieldProps) {
+  return (
+    <input
+      type={type}
+      {...(register ? register : {})}
+      className={`w-full rounded-xl bg-gray-light-02 px-4 py-[10px] font-medium placeholder-gray-dark-01 ${className}`}
+      placeholder={placeholder}
+      {...props}
+    />
+  );
+}
+
+export default InputField;
diff --git a/src/features/club-create/components/index.ts b/src/features/club-create/components/index.ts
index cb0ff5c3..f54f959a 100644
--- a/src/features/club-create/components/index.ts
+++ b/src/features/club-create/components/index.ts
@@ -1 +1,2 @@
-export {};
+export { default as CreateClubFormField } from './CreateClubFormField';
+export { default as InputField } from './InputField';
diff --git a/src/features/club-create/container/CreateBookClubPage.tsx b/src/features/club-create/container/CreateBookClubPage.tsx
new file mode 100644
index 00000000..71ab0c11
--- /dev/null
+++ b/src/features/club-create/container/CreateBookClubPage.tsx
@@ -0,0 +1,12 @@
+import { FormContainer } from '@/features/club-create/container';
+
+function CreateBookClubPage() {
+  return (
+    <main className="container mx-auto min-w-[375px] max-w-[1000px] bg-gray-white p-6 pb-20">
+      <h1 className="mb-8 text-2xl font-bold">모임 만들기</h1>
+      <FormContainer />
+    </main>
+  );
+}
+
+export default CreateBookClubPage;
diff --git a/src/features/club-create/container/DatePickerField.tsx b/src/features/club-create/container/DatePickerField.tsx
new file mode 100644
index 00000000..6642b7af
--- /dev/null
+++ b/src/features/club-create/container/DatePickerField.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import DatePicker from 'react-datepicker';
+import { Control, Controller } from 'react-hook-form';
+import { ko } from 'date-fns/locale';
+import { BookClubForm } from '../types';
+import {
+  CreateClubFormField,
+  InputField,
+} from '@/features/club-create/components';
+
+interface DatePickerContainerProps {
+  control: Control<BookClubForm>;
+  name: 'targetDate' | 'endDate';
+  label: string;
+  error?: string;
+  placeholder: string;
+}
+
+function DatePickerContainer({
+  control,
+  name,
+  label,
+  error,
+  placeholder,
+}: DatePickerContainerProps) {
+  return (
+    <CreateClubFormField label={label} error={error}>
+      <Controller
+        control={control}
+        name={name}
+        render={({ field }) => (
+          <DatePicker
+            selected={field.value}
+            onChange={field.onChange}
+            showTimeSelect
+            timeIntervals={10}
+            dateFormat="yyyy-MM-dd a HH:mm"
+            timeFormat="HH:mm"
+            locale={ko}
+            showTimeSelectOnly={false}
+            timeCaption="시간"
+            placeholderText={placeholder}
+            customInput={<InputField />}
+          />
+        )}
+      />
+    </CreateClubFormField>
+  );
+}
+
+export default DatePickerContainer;
diff --git a/src/features/club-create/container/FormContainer.tsx b/src/features/club-create/container/FormContainer.tsx
new file mode 100644
index 00000000..25c0d45d
--- /dev/null
+++ b/src/features/club-create/container/FormContainer.tsx
@@ -0,0 +1,144 @@
+'use client';
+
+import 'react-datepicker/dist/react-datepicker.css';
+import Button from '@/components/button/Button';
+import {
+  CreateClubFormField,
+  InputField,
+} from '@/features/club-create/components';
+import {
+  RadioButtonGroup,
+  DatePickerContainer,
+  ImageField,
+} from '@/features/club-create/container';
+import { useBookClubForm } from '@/features/club-create/hooks';
+
+function FormContainer() {
+  const {
+    register,
+    control,
+    setValue,
+    errors,
+    isValid,
+    watch,
+    onSubmit,
+    isLoading,
+  } = useBookClubForm();
+
+  return (
+    <form onSubmit={onSubmit} className="flex flex-col gap-10">
+      <CreateClubFormField
+        label="모임 이름"
+        error={errors.title?.message}
+        currentLength={watch('title')?.length || 0}
+        maxLength={30}
+      >
+        <InputField
+          register={register('title')}
+          placeholder="지정책 모임인 경우, 책 이름을 넣어주세요"
+        />
+      </CreateClubFormField>
+
+      <CreateClubFormField
+        label="모임 상세 설명"
+        error={errors.description?.message}
+        currentLength={watch('description')?.length || 0}
+        maxLength={30}
+      >
+        <InputField
+          register={register('description')}
+          placeholder="모임에 대한 설명을 입력해 주세요 (오프라인 모임시 만나는 장소도 같이 입력해 주세요!)"
+        />
+      </CreateClubFormField>
+
+      <ImageField
+        register={register}
+        setValue={setValue}
+        error={errors.image?.message?.toString()}
+      />
+
+      <CreateClubFormField
+        label="자유책 / 지정책"
+        error={errors.bookClubType?.message}
+      >
+        <RadioButtonGroup
+          options={[
+            {
+              label: '자유책',
+              value: 'FREE',
+              description:
+                '읽고 싶은 책을 자유롭게 선택하고 각자의 생각을 나눠요.',
+            },
+            {
+              label: '지정책',
+              value: 'FIXED',
+              description: '한 권의 책을 선정해 깊이 있는 토론을 진행해요.',
+            },
+          ]}
+          selectedValue={watch('bookClubType')}
+          register={register('bookClubType')}
+          setValue={setValue}
+          name="bookClubType"
+        />
+      </CreateClubFormField>
+
+      <CreateClubFormField
+        label="온라인 / 오프라인"
+        error={errors.meetingType?.message}
+      >
+        <RadioButtonGroup
+          options={[
+            { label: '온라인', value: 'ONLINE' },
+            { label: '오프라인', value: 'OFFLINE' },
+          ]}
+          selectedValue={watch('meetingType')}
+          register={register('meetingType')}
+          setValue={setValue}
+          name="meetingType"
+          town={watch('town')}
+        />
+      </CreateClubFormField>
+
+      <DatePickerContainer
+        control={control}
+        name="targetDate"
+        label="언제 만나나요?"
+        error={errors.targetDate?.message}
+        placeholder="만나는 날짜를 선택해 주세요!"
+      />
+
+      <DatePickerContainer
+        control={control}
+        name="endDate"
+        label="언제 모임을 마감할까요?"
+        error={errors.endDate?.message}
+        placeholder="모임의 모집 마감 날짜를 선택해 주세요!"
+      />
+
+      <CreateClubFormField
+        label="모임 정원"
+        error={errors.memberLimit?.message}
+        currentLength={watch('memberLimit') || 0}
+        maxLength={20}
+      >
+        <InputField
+          type="number"
+          register={register('memberLimit', { valueAsNumber: true })}
+          placeholder="최소 3인이상 입력해 주세요"
+        />
+      </CreateClubFormField>
+
+      <Button
+        type="submit"
+        text={isLoading ? '생성 중...' : '확인'}
+        size="medium"
+        fillType="solid"
+        themeColor="green-normal-01"
+        disabled={!isValid || isLoading}
+        className="h-14"
+      />
+    </form>
+  );
+}
+
+export default FormContainer;
diff --git a/src/features/club-create/container/ImageField.tsx b/src/features/club-create/container/ImageField.tsx
new file mode 100644
index 00000000..01325f0e
--- /dev/null
+++ b/src/features/club-create/container/ImageField.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
+import { BookClubForm } from '../types';
+import { CreateClubFormField, InputField } from '../components';
+import { useImageField } from '@/features/club-create/hooks';
+
+interface ImageUploadContainerProps {
+  register: UseFormRegister<BookClubForm>;
+  setValue: UseFormSetValue<BookClubForm>;
+  error?: string;
+}
+
+function ImageField({ register, setValue, error }: ImageUploadContainerProps) {
+  const { selectedFileName, handleFileChange, clearFile } =
+    useImageField(setValue);
+
+  return (
+    <CreateClubFormField label="이미지" error={error}>
+      <div className="flex w-full items-center gap-2">
+        <InputField
+          type="text"
+          value={selectedFileName}
+          readOnly
+          placeholder="이미지를 첨부해 주세요"
+          className="flex-1"
+        />
+        <InputField
+          type="file"
+          accept="image/*"
+          register={register('image')}
+          className="hidden"
+          id="image-upload"
+          onChange={handleFileChange}
+        />
+        <label
+          htmlFor="image-upload"
+          className="flex h-10 cursor-pointer items-center rounded-xl border border-green-normal-01 px-4 text-green-normal-01"
+        >
+          파일 찾기
+        </label>
+        {selectedFileName && (
+          <button
+            type="button"
+            onClick={clearFile}
+            className="ml-2 text-gray-dark-02"
+          >
+            ✕
+          </button>
+        )}
+      </div>
+    </CreateClubFormField>
+  );
+}
+
+export default ImageField;
diff --git a/src/features/club-create/container/RadioButtonGroup.tsx b/src/features/club-create/container/RadioButtonGroup.tsx
new file mode 100644
index 00000000..bf32029f
--- /dev/null
+++ b/src/features/club-create/container/RadioButtonGroup.tsx
@@ -0,0 +1,101 @@
+import Card from '@/components/card/Card';
+import { useSelectAddress } from '@/features/club-create/hooks';
+import { BookClubForm } from '@/features/club-create/types';
+import { UseFormSetValue } from 'react-hook-form';
+
+interface RadioButtonGroupProps {
+  options: { label: string; value: string; description?: string }[];
+  selectedValue: string;
+  register: any;
+  setValue?: UseFormSetValue<BookClubForm>;
+  name: keyof BookClubForm;
+  town?: string;
+}
+
+function RadioButtonGroup({
+  options,
+  selectedValue,
+  register,
+  setValue,
+  name,
+  town,
+}: RadioButtonGroupProps) {
+  const { handleRadioChange } = useSelectAddress({ setValue, name });
+
+  return (
+    <div className="flex gap-4 md:gap-6">
+      {options.map((option) => (
+        <label
+          key={option.value}
+          className={`flex w-full cursor-pointer items-start gap-2 rounded-xl px-4 py-5 ${
+            selectedValue === option.value
+              ? 'bg-green-light-02'
+              : 'bg-gray-light-02'
+          }`}
+          onClick={(e) => handleRadioChange(option.value, e)}
+        >
+          <input
+            type="radio"
+            value={option.value}
+            {...register}
+            className="hidden"
+          />
+          <div className="flex h-6 w-6 items-center justify-center">
+            <div
+              className={`flex h-4 w-4 items-center justify-center rounded-[5px] border ${
+                selectedValue === option.value
+                  ? 'border-green-normal-02 bg-green-normal-02'
+                  : 'border-gray-normal-02 bg-white'
+              }`}
+            >
+              {selectedValue === option.value && (
+                <svg
+                  className="h-3 w-3 text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={4}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M5 13l4 4L19 7"
+                  />
+                </svg>
+              )}
+            </div>
+          </div>
+          <div className="flex flex-col gap-0.5">
+            <p
+              className={`font-semibold ${
+                selectedValue === option.value ? 'text-green-normal-02' : ''
+              }`}
+            >
+              {option.label}
+            </p>
+
+            {option.description && (
+              <p
+                className={`text-xs font-medium ${
+                  selectedValue === option.value
+                    ? 'text-green-normal-01'
+                    : 'text-gray-dark-02'
+                }`}
+              >
+                {option.description}
+              </p>
+            )}
+          </div>
+          {option.value === 'OFFLINE' && town && (
+            <div className="ml-auto flex items-center">
+              <Card.Location>{town}</Card.Location>
+            </div>
+          )}
+        </label>
+      ))}
+    </div>
+  );
+}
+
+export default RadioButtonGroup;
diff --git a/src/features/club-create/container/index.ts b/src/features/club-create/container/index.ts
index cb0ff5c3..2de0a843 100644
--- a/src/features/club-create/container/index.ts
+++ b/src/features/club-create/container/index.ts
@@ -1 +1,5 @@
-export {};
+export { default as FormContainer } from './FormContainer';
+export { default as CreateBookClubPage } from './CreateBookClubPage';
+export { default as ImageField } from './ImageField';
+export { default as RadioButtonGroup } from './RadioButtonGroup';
+export { default as DatePickerContainer } from './DatePickerField';
diff --git a/src/features/club-create/hooks/index.ts b/src/features/club-create/hooks/index.ts
index cb0ff5c3..34a3d61e 100644
--- a/src/features/club-create/hooks/index.ts
+++ b/src/features/club-create/hooks/index.ts
@@ -1 +1,4 @@
-export {};
+export { useSelectAddress } from './useSelectAddress';
+export { useCreateBookClub } from './useCreateBookClub';
+export { useBookClubForm } from './useBookClubForm';
+export { useImageField } from './useImageField';
diff --git a/src/features/club-create/hooks/useBookClubForm.ts b/src/features/club-create/hooks/useBookClubForm.ts
new file mode 100644
index 00000000..efe44f2c
--- /dev/null
+++ b/src/features/club-create/hooks/useBookClubForm.ts
@@ -0,0 +1,35 @@
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { BookClubForm, bookClubSchema } from '../types';
+import { useCreateBookClub } from '@/features/club-create/hooks';
+
+export const useBookClubForm = () => {
+  const { onSubmit: createBookClub, isLoading } = useCreateBookClub();
+
+  const form = useForm<BookClubForm>({
+    resolver: zodResolver(bookClubSchema),
+  });
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    setValue,
+    formState: { errors, isValid },
+    watch,
+  } = form;
+
+  const onSubmit = handleSubmit(createBookClub);
+
+  return {
+    form,
+    register,
+    control,
+    setValue,
+    errors,
+    isValid,
+    watch,
+    onSubmit,
+    isLoading,
+  };
+};
diff --git a/src/features/club-create/hooks/useCreateBookClub.ts b/src/features/club-create/hooks/useCreateBookClub.ts
new file mode 100644
index 00000000..74765377
--- /dev/null
+++ b/src/features/club-create/hooks/useCreateBookClub.ts
@@ -0,0 +1,28 @@
+'use client';
+
+import { useState } from 'react';
+import { BookClubForm } from '../types';
+import { createBookClub } from '../api';
+
+export const useCreateBookClub = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const onSubmit = async (data: BookClubForm) => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await createBookClub(data);
+      alert('북클럽이 성공적으로 생성되었습니다!');
+      return response;
+    } catch (error) {
+      setError('북클럽 생성에 실패했습니다.');
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return { onSubmit, isLoading, error };
+};
diff --git a/src/features/club-create/hooks/useImageField.ts b/src/features/club-create/hooks/useImageField.ts
new file mode 100644
index 00000000..44bf2627
--- /dev/null
+++ b/src/features/club-create/hooks/useImageField.ts
@@ -0,0 +1,30 @@
+'use client';
+
+import { useState } from 'react';
+import { UseFormSetValue } from 'react-hook-form';
+import { BookClubForm } from '../types';
+
+export const useImageField = (setValue: UseFormSetValue<BookClubForm>) => {
+  const [selectedFileName, setSelectedFileName] = useState<string>('');
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setSelectedFileName(file.name);
+      setValue('image', file);
+    } else {
+      setSelectedFileName('');
+    }
+  };
+
+  const clearFile = () => {
+    setSelectedFileName('');
+    setValue('image', undefined);
+  };
+
+  return {
+    selectedFileName,
+    handleFileChange,
+    clearFile,
+  };
+};
diff --git a/src/features/club-create/hooks/useSelectAddress.ts b/src/features/club-create/hooks/useSelectAddress.ts
new file mode 100644
index 00000000..d3b5aa15
--- /dev/null
+++ b/src/features/club-create/hooks/useSelectAddress.ts
@@ -0,0 +1,35 @@
+import { BookClubForm } from '@/features/club-create/types';
+import { UseFormSetValue } from 'react-hook-form';
+
+interface UseSelectAddressProps {
+  setValue?: UseFormSetValue<BookClubForm>;
+  name: keyof BookClubForm;
+}
+
+export const useSelectAddress = ({ setValue, name }: UseSelectAddressProps) => {
+  const handleRadioChange = (value: string, e: React.MouseEvent) => {
+    e.preventDefault();
+
+    if (!setValue) return;
+
+    setValue(name, value);
+
+    if (value === 'ONLINE') {
+      setValue('city', undefined);
+      setValue('town', undefined);
+    }
+
+    if (value === 'OFFLINE') {
+      new window.daum.Postcode({
+        oncomplete: function (data: any) {
+          if (setValue) {
+            setValue('city', data.sigungu);
+            setValue('town', data.bname);
+          }
+        },
+      }).open();
+    }
+  };
+
+  return { handleRadioChange };
+};
diff --git a/src/features/club-create/types/bookClubSchema.ts b/src/features/club-create/types/bookClubSchema.ts
new file mode 100644
index 00000000..b42fbe2d
--- /dev/null
+++ b/src/features/club-create/types/bookClubSchema.ts
@@ -0,0 +1,61 @@
+import { z } from 'zod';
+
+export const bookClubSchema = z
+  .object({
+    image: z
+      .custom<File | undefined>((file) => {
+        if (!file || !(file instanceof File)) return true;
+
+        const isValidType = ['image/jpg', 'image/jpeg'].includes(file.type);
+        const isValidSize = file.size <= 10 * 1024 * 1024;
+
+        return isValidType && isValidSize;
+      }, '파일은 JPG/JPEG 형식이며 10MB 이하이어야 합니다')
+      .optional(),
+    title: z
+      .string()
+      .min(1, '모임 이름을 입력해주세요')
+      .max(30, '모임 이름은 최대 30자까지 가능합니다'),
+    description: z
+      .string()
+      .min(1, '상세 설명을 입력해주세요')
+      .max(30, '상세 설명은 최대 30자까지 가능합니다'),
+    bookClubType: z.enum(['FREE', 'FIXED'], {
+      required_error: '모임 유형을 선택해주세요',
+      invalid_type_error: '모임 유형을 선택해주세요',
+    }),
+    meetingType: z.enum(['ONLINE', 'OFFLINE'], {
+      required_error: '모임 방식을 선택해주세요',
+      invalid_type_error: '모임 방식을 선택해주세요',
+    }),
+    targetDate: z.date({
+      required_error: '만나는 날짜를 선택해주세요',
+      invalid_type_error: '올바른 날짜를 선택해주세요',
+    }),
+    endDate: z.date({
+      required_error: '모집 마감 날짜를 선택해주세요',
+      invalid_type_error: '올바른 날짜를 선택해주세요',
+    }),
+    memberLimit: z
+      .number({
+        required_error: '모임 정원을 입력해주세요',
+        invalid_type_error: '모임 정원을 숫자로 입력해주세요',
+      })
+      .min(3, '최소 3명 이상 입력해주세요')
+      .max(20, '최대 20명까지 가능합니다'),
+    city: z.string().optional(),
+    town: z.string().optional(),
+  })
+  .superRefine((data, ctx) => {
+    if (data.meetingType === 'OFFLINE') {
+      if (!data.city?.trim() || !data.town?.trim()) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: '모임 장소를 정해주세요!',
+          path: ['meetingType'],
+        });
+      }
+    }
+  });
+
+export type BookClubForm = z.infer<typeof bookClubSchema>;
diff --git a/src/features/club-create/types/index.ts b/src/features/club-create/types/index.ts
index cb0ff5c3..b6d1d8c8 100644
--- a/src/features/club-create/types/index.ts
+++ b/src/features/club-create/types/index.ts
@@ -1 +1,2 @@
-export {};
+export type { BookClubForm } from './bookClubSchema';
+export { bookClubSchema } from './bookClubSchema';
diff --git a/src/components/header/index.ts b/src/features/club-details/api/index.ts
similarity index 100%
rename from src/components/header/index.ts
rename to src/features/club-details/api/index.ts
diff --git a/src/features/club-details/components/BookClubDetailPage.tsx b/src/features/club-details/components/BookClubDetailPage.tsx
new file mode 100644
index 00000000..87ef0a27
--- /dev/null
+++ b/src/features/club-details/components/BookClubDetailPage.tsx
@@ -0,0 +1,20 @@
+import {
+  DescriptionSection,
+  HeaderSection,
+  ReviewListSection,
+  ReviewSummarySection,
+} from '@/features/club-details/components';
+
+function BookClubDetailPage() {
+  return (
+    <div className="w-full min-w-[336px] px-[20px] md:px-[24px] lg:px-[102px]">
+      <HeaderSection />
+      <main className="flex flex-col gap-y-6">
+        <DescriptionSection />
+        <ReviewSummarySection />
+        <ReviewListSection />
+      </main>
+    </div>
+  );
+}
+export default BookClubDetailPage;
diff --git a/src/features/club-details/components/DescriptionSection.tsx b/src/features/club-details/components/DescriptionSection.tsx
new file mode 100644
index 00000000..b7334c6f
--- /dev/null
+++ b/src/features/club-details/components/DescriptionSection.tsx
@@ -0,0 +1,17 @@
+function DescriptionSection() {
+  return (
+    <section>
+      <h2 className="mb-[10px] text-[20px] font-semibold text-gray-black">
+        모임 상세 설명
+      </h2>
+      <div className="rounded-xl border-2 border-gray-normal-01 px-12 py-6">
+        <p className="text-[16px] font-medium leading-6 text-gray-darker">
+          따듯하게 느껴지는 공간이에요 :) 평소에 달램 이용해보고 싶었는데 이렇게
+          같이 달램 생기니까 너무 좋아요! 프로그램이 더 많이 늘어났으면
+          좋겠어요.
+        </p>
+      </div>
+    </section>
+  );
+}
+export default DescriptionSection;
diff --git a/src/features/club-details/components/HeaderSection.tsx b/src/features/club-details/components/HeaderSection.tsx
new file mode 100644
index 00000000..993267c7
--- /dev/null
+++ b/src/features/club-details/components/HeaderSection.tsx
@@ -0,0 +1,121 @@
+'use client';
+
+import Card from '@/components/card/Card';
+import { CardProps } from '@/components/card/types';
+import PopUp from '@/components/pop-up/PopUp';
+import { useAuthStore } from '@/store/authStore';
+import { useRouter } from 'next/navigation';
+
+import { useEffect, useState } from 'react';
+
+function HeaderSection() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLiked, setIsLiked] = useState(false);
+
+  const { isLoggedIn, checkLoginStatus } = useAuthStore();
+  const router = useRouter();
+
+  let isMember;
+
+  if (isLoggedIn) {
+    isMember = {
+      label: '참여 완료!', // 응답 성공시 로직에 여기서부터
+      // isParticipant: true
+      isTwoButton: false, // 여기까지 추가
+      handlePopUpConfirm: () => setIsOpen(false),
+    };
+  } else {
+    isMember = {
+      label: '로그인 후 이용해주세요!',
+      isTwoButton: true,
+      handlePopUpConfirm: () => router.replace('/login'),
+    };
+  }
+
+  useEffect(() => {
+    checkLoginStatus();
+  }, [checkLoginStatus]);
+
+  const EXAMPLE_IMAGE = '/images/profile.png';
+
+  const defaultCardProps: CardProps = {
+    variant: 'detailedClub',
+    imageUrl: EXAMPLE_IMAGE,
+    imageAlt: '모임 이미지',
+    title: '독서 모임',
+    location: '서울 강남구',
+    datetime: '2024-01-20 14:00',
+    isLiked: isLiked,
+    current: 3,
+    max: 8,
+    isPast: false,
+    meetingType: 'FIXED',
+    status: 'pending',
+    onClick: () => {},
+    onLikeClick: () => {
+      setIsLiked(!isLiked);
+    }, // api 연동 후 수정
+    participants: [
+      {
+        id: '1',
+        name: '참여자1',
+        profileImage: EXAMPLE_IMAGE,
+        profileImageAlt: '참여자1 프로필 이미지',
+      },
+      {
+        id: '2',
+        name: '참여자2',
+        profileImage: EXAMPLE_IMAGE,
+        profileImageAlt: '참여자2 프로필 이미지',
+      },
+      {
+        id: '3',
+        name: '참여자3',
+        profileImage: EXAMPLE_IMAGE,
+        profileImageAlt: '참여자3 프로필 이미지',
+      },
+      {
+        id: '4',
+        name: '참여자4',
+        profileImage: EXAMPLE_IMAGE,
+        profileImageAlt: '참여자4 프로필 이미지',
+      },
+      {
+        id: '5',
+        name: '참여자5',
+        profileImage: EXAMPLE_IMAGE,
+        profileImageAlt: '참여자5 프로필 이미지',
+      },
+    ],
+    host: {
+      id: 'host1',
+      name: '호스트',
+      profileImage: EXAMPLE_IMAGE,
+    },
+    isHost: false,
+    isParticipant: false,
+    hasWrittenReview: false,
+    onCancel: () => alert('모임 취소하기 클릭!'),
+    onParticipate: () => {
+      setIsOpen(true);
+    },
+    onCancelParticipation: () => alert('참여 취소하기 클릭!'),
+    onWriteReview: () => alert('리뷰 작성하기 클릭!'),
+  };
+
+  return (
+    <header className="py-6">
+      <Card {...defaultCardProps} />
+      <PopUp
+        isOpen={isOpen}
+        isTwoButton={isMember.isTwoButton}
+        label={isMember.label}
+        handlePopUpClose={() => {
+          setIsOpen(false);
+        }}
+        handlePopUpConfirm={isMember.handlePopUpConfirm}
+      />
+    </header>
+  );
+}
+export default HeaderSection;
diff --git a/src/features/club-details/components/ReviewListSection.tsx b/src/features/club-details/components/ReviewListSection.tsx
new file mode 100644
index 00000000..0e75079a
--- /dev/null
+++ b/src/features/club-details/components/ReviewListSection.tsx
@@ -0,0 +1,81 @@
+'use client';
+
+import ClubReview from '@/components/written-review/club-review/ClubReview';
+// import DropDown from '@/components/drop-down/DropDown';
+// import { useState } from 'react';
+
+const MOCK_REVIEWS = [
+  {
+    id: '1',
+    ratingCount: 4,
+    comment: '너무 좋았어요! 다음에도 참여할래요~',
+    userProfile: {
+      profileImage: '/images/profile.png',
+      userName: '다람쥐쥐',
+      createdAt: '2024.01.25',
+    },
+  },
+  {
+    id: '2',
+    ratingCount: 4,
+    comment: '두번째 이용이에요! 만족합니다.',
+    userProfile: {
+      profileImage: '/images/profile.png',
+      userName: '동글동글이',
+      createdAt: '2024.01.25',
+    },
+  },
+  {
+    id: '3',
+    ratingCount: 3,
+    comment:
+      '강사분도 하시고 ~ ^^ 너무 좋은 공간에서 긴장과 스트레스 모두 잘 풀고 가요 ~ ^^',
+    userProfile: {
+      profileImage: '/images/profile.png',
+      userName: '모닝러너',
+      createdAt: '2024.01.25',
+    },
+  },
+  {
+    id: '4',
+    ratingCount: 3,
+    comment: '수업이 단조로워요.',
+    userProfile: {
+      profileImage: '/images/profile.png',
+      userName: '해보자고',
+      createdAt: '2024.01.25',
+    },
+  },
+];
+
+function ReviewListSection() {
+  // 상위로 올려함
+  // 레이아웃을 위한 임시 배치
+  // const [selectedMemberCount, setSelectedMemberCount] = useState<
+  //   string | undefined
+  // >(undefined);
+  return (
+    <section>
+      <div className="mb-[10px] flex h-full items-center justify-between">
+        <h2 className="text-[20px] font-semibold text-gray-black">
+          다른 북코들은 이 모임을 이렇게 느꼈어요!
+        </h2>
+        {/* <DropDown
+          variant={'sortingReview'}
+          onChangeSelection={setSelectedMemberCount}
+        /> */}
+      </div>
+      <div className="flex flex-col gap-4 rounded-xl border-2 border-gray-normal-01 p-6">
+        {MOCK_REVIEWS.map((review, index) => (
+          <ClubReview
+            key={`review-${index}`}
+            ratingCount={review.ratingCount}
+            comment={review.comment}
+            userProfile={review.userProfile}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
+export default ReviewListSection;
diff --git a/src/features/club-details/components/ReviewSummarySection.tsx b/src/features/club-details/components/ReviewSummarySection.tsx
new file mode 100644
index 00000000..0b19bafc
--- /dev/null
+++ b/src/features/club-details/components/ReviewSummarySection.tsx
@@ -0,0 +1,48 @@
+import ProgressBar from '@/components/progress-bar/ProgressBar';
+import RatingDisplay from '@/components/rating-display/RatingDisplay';
+
+function ReviewSummarySection() {
+  return (
+    <section>
+      <h2 className="mb-[10px] text-[20px] font-semibold text-gray-black">
+        리뷰 평점 평균
+      </h2>
+      <div
+        className="flex items-center justify-center gap-6 rounded-xl border-2 border-gray-normal-01 p-[30px] md:gap-[120px] lg:gap-[180px]"
+        style={{
+          gap: 'clamp(24px, 5vw, 180px)', // 최소 gap은 24px, 최대는 180px
+        }}
+      >
+        <div className="flex flex-col items-center justify-center gap-2">
+          <div className="text-2xl font-semibold">
+            <span className="text-gray-black">4.0</span>
+            <span className="text-gray-dark-01"> / 5</span>
+          </div>
+          <RatingDisplay ratingCount={4} />
+        </div>
+        <div className="flex flex-col gap-1">
+          {Array.from({ length: 5 }).map((_, index) => (
+            <div
+              className="flex items-center gap-3 text-sm font-medium"
+              key={`rate-${5 - index}`}
+            >
+              <span className="whitespace-nowrap text-gray-dark-03">
+                {5 - index}점
+              </span>
+              <div
+                className="flex-1"
+                style={{
+                  minWidth: 'clamp(62px, 20vw, 240px)',
+                }}
+              >
+                <ProgressBar percentage={5} color="bg-gray-dark-02" />
+              </div>
+              <span className="ml-auto text-gray-dark-01">2</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+export default ReviewSummarySection;
diff --git a/src/features/club-details/components/index.ts b/src/features/club-details/components/index.ts
new file mode 100644
index 00000000..2f3e7f85
--- /dev/null
+++ b/src/features/club-details/components/index.ts
@@ -0,0 +1,5 @@
+export { default as BookClubDetailPage } from './BookClubDetailPage';
+export { default as HeaderSection } from './HeaderSection';
+export { default as DescriptionSection } from './DescriptionSection';
+export { default as ReviewSummarySection } from './ReviewSummarySection';
+export { default as ReviewListSection } from './ReviewListSection';
diff --git a/src/features/auth/api/index.ts b/src/features/club-details/container/index.ts
similarity index 100%
rename from src/features/auth/api/index.ts
rename to src/features/club-details/container/index.ts
diff --git a/src/features/auth/components/index.ts b/src/features/club-details/hooks/index.ts
similarity index 100%
rename from src/features/auth/components/index.ts
rename to src/features/club-details/hooks/index.ts
diff --git a/src/features/auth/container/index.ts b/src/features/club-details/types/index.ts
similarity index 100%
rename from src/features/auth/container/index.ts
rename to src/features/club-details/types/index.ts
diff --git a/src/features/profile/components/MainContent.tsx b/src/features/profile/components/MainContent.tsx
new file mode 100644
index 00000000..cb24dd8c
--- /dev/null
+++ b/src/features/profile/components/MainContent.tsx
@@ -0,0 +1,30 @@
+'use client';
+import Tab from '@/components/tab/Tab';
+import { CONTENT_TABS, ContentTab } from '@/constants';
+import { useState } from 'react';
+import ClubContents from './clubs/ClubContents';
+import ExchangeContents from './exchange/ExchangeContents';
+
+function MainContent() {
+  const [selectedTab, setSelectedTab] = useState<ContentTab>(CONTENT_TABS[0]);
+
+  return (
+    <div>
+      <div className="w-full border-b-2 sm:px-5 md:px-6 lg:px-[102px]">
+        <Tab
+          items={CONTENT_TABS}
+          activeTab={selectedTab}
+          onTabChange={(item) => setSelectedTab(item)}
+          tabType="MAIN_TAB"
+        />
+      </div>
+      {selectedTab === CONTENT_TABS[0] ? (
+        <ClubContents />
+      ) : (
+        <ExchangeContents />
+      )}
+    </div>
+  );
+}
+
+export default MainContent;
diff --git a/src/features/profile/components/ProfileEditModal.tsx b/src/features/profile/components/ProfileEditModal.tsx
new file mode 100644
index 00000000..4091c7d3
--- /dev/null
+++ b/src/features/profile/components/ProfileEditModal.tsx
@@ -0,0 +1,120 @@
+import { useState } from 'react';
+import { useAuthStore } from '@/store/authStore';
+import Avatar from '@/components/avatar/Avatar';
+import EditIcon from '../../../../public/icons/EditIcon';
+import Modal from '@/components/modal/Modal';
+
+interface ProfileData {
+  name: string;
+  description: string;
+  image?: string | null;
+}
+
+interface ProfileEditModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: (updatedData: ProfileData) => void;
+  profileData: ProfileData;
+}
+
+function ProfileEditContent({
+  formData,
+  handleChange,
+}: {
+  formData: ProfileData;
+  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}) {
+  return (
+    <div className="w-full">
+      <div className="flex flex-col items-center gap-4">
+        <div className="relative">
+          <div className="rounded-full border-2 border-gray-normal-01">
+            <Avatar src={formData.image || ''} alt="프로필 이미지" size="xl" />
+          </div>
+          <button
+            className="absolute bottom-0 right-0 translate-x-1/3 rounded-full border border-gray-normal-01 bg-white p-2"
+            onClick={() => {
+              /* 이미지 업로드 로직 추가 필요 */
+              console.log('이미지 업로드 로직 추가 필요');
+            }}
+          >
+            <EditIcon width={14} height={18} className="text-gray-dark-01" />
+          </button>
+        </div>
+
+        <div className="w-full space-y-4">
+          <div className="flex flex-col gap-2">
+            <span className="font-bold">닉네임</span>
+            <input
+              type="text"
+              name="name"
+              aria-label="name"
+              value={formData.name}
+              onChange={handleChange}
+              className="w-full rounded-lg bg-gray-light-02 p-2 font-medium"
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <span className="font-bold">한 줄 소개</span>
+            <input
+              type="text"
+              name="description"
+              aria-label="description"
+              value={formData.description}
+              onChange={handleChange}
+              className="w-full rounded-lg bg-gray-light-02 p-2 font-medium"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ProfileEditModal({
+  isOpen,
+  onClose,
+  onConfirm,
+  profileData,
+}: ProfileEditModalProps) {
+  const { user } = useAuthStore();
+  const [formData, setFormData] = useState<ProfileData>({
+    name: profileData.name || user?.name || '',
+    description: profileData.description || user?.description || '',
+    image: profileData.image || user?.image || '/images/profile.png',
+  });
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleConfirm = () => {
+    onConfirm(formData);
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="프로필 수정하기"
+      onConfirm={handleConfirm}
+      cancelText="취소하기"
+      confirmText="수정하기"
+      cancelButtonProps={{
+        themeColor: 'gray-dark-01',
+        lightColor: 'gray-normal-01',
+        fillType: 'lightSolid',
+      }}
+      confirmButtonProps={{
+        themeColor: 'green-normal-01',
+        lightColor: 'green-light-03',
+        fillType: 'lightSolid',
+      }}
+    >
+      <ProfileEditContent formData={formData} handleChange={handleChange} />
+    </Modal>
+  );
+}
+
+export default ProfileEditModal;
diff --git a/src/features/profile/components/ProfileHeader.tsx b/src/features/profile/components/ProfileHeader.tsx
new file mode 100644
index 00000000..ae12a797
--- /dev/null
+++ b/src/features/profile/components/ProfileHeader.tsx
@@ -0,0 +1,14 @@
+import { ProfilePageProps } from '../types';
+import Profile from './profile/Profile';
+
+export default function ProfileHeader({ user }: ProfilePageProps) {
+  return (
+    <div className="w-fuㅌll flex min-w-[336px] flex-col items-center pb-[20px] pt-[24px] sm:pl-[20px] sm:pr-[19px] md:px-[24px] lg:px-[102px]">
+      {/* TODO: 프로필 페이지가 로그인된 유저의 프로필 페이지와 일치 여부 확인 후 마이페이지 or **님의 페이지 */}
+      <span className="w-full min-w-[336px] text-2xl font-bold text-gray-black">
+        마이 페이지
+      </span>
+      <Profile user={user} />
+    </div>
+  );
+}
diff --git a/src/features/profile/components/ProfilePage.tsx b/src/features/profile/components/ProfilePage.tsx
new file mode 100644
index 00000000..a010bf05
--- /dev/null
+++ b/src/features/profile/components/ProfilePage.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import MainContent from './MainContent';
+import ProfileHeader from './ProfileHeader';
+import { useAuthStore } from '@/store/authStore';
+
+function ProfilePage() {
+  const { user } = useAuthStore();
+
+  return (
+    <div className="flex w-full min-w-[375px] flex-1 flex-col">
+      <ProfileHeader user={user} />
+      <MainContent />
+    </div>
+  );
+}
+
+export default ProfilePage;
diff --git a/src/features/profile/components/WriteReviewModal.tsx b/src/features/profile/components/WriteReviewModal.tsx
new file mode 100644
index 00000000..0f2ba14d
--- /dev/null
+++ b/src/features/profile/components/WriteReviewModal.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import React, { useState } from 'react';
+import Modal from '@/components/modal/Modal';
+import RatingIcon from '../../../../public/icons/RatingIcon';
+
+const INITIAL_RATING = 5;
+const RATING_RANGE = [1, 2, 3, 4, 5] as const;
+
+interface WriteReviewContentProps {
+  rating: number;
+  setRating: (rating: number) => void;
+  review: string;
+  setReview: (review: string) => void;
+}
+
+interface WriteReviewModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: (rating: number, review: string) => void;
+}
+function WriteReviewContent({
+  rating,
+  setRating,
+  review,
+  setReview,
+}: WriteReviewContentProps) {
+  return (
+    <div className="flex flex-col gap-6">
+      <div>
+        <h3 className="mb-4 text-lg font-bold text-gray-darker">
+          모임은 어떠셨나요?
+        </h3>
+        <div className="flex gap-1">
+          {RATING_RANGE.map((heart) => (
+            <button key={heart} onClick={() => setRating(heart)}>
+              <RatingIcon checked={heart <= rating} />
+            </button>
+          ))}
+        </div>
+      </div>
+      <div>
+        <p className="mb-4 text-lg font-bold text-gray-darker">
+          모임에 참여한 경험을 공유해주세요.
+        </p>
+        <textarea
+          value={review}
+          onChange={(e) => setReview(e.target.value)}
+          className="min-h-[120px] w-full resize-none rounded-xl bg-gray-light-02 p-4 text-gray-darker"
+          placeholder="남겨주신 리뷰는 모임 운영에 큰 도움이 될 거에요!"
+        />
+      </div>
+    </div>
+  );
+}
+
+function WriteReviewModal({
+  isOpen,
+  onClose,
+  onConfirm,
+}: WriteReviewModalProps) {
+  const [rating, setRating] = useState(INITIAL_RATING);
+  const [review, setReview] = useState('');
+
+  const handleSubmit = () => {
+    onConfirm(rating, review);
+    onClose();
+    setRating(INITIAL_RATING);
+    setReview('');
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="리뷰 작성하기"
+      onConfirm={handleSubmit}
+      cancelText="취소하기"
+      confirmText="작성완료"
+      cancelButtonProps={{
+        themeColor: 'gray-dark-01',
+        lightColor: 'gray-normal-01',
+        fillType: 'lightSolid',
+      }}
+      confirmButtonProps={{
+        themeColor: 'green-normal-01',
+        lightColor: 'green-light-03',
+        fillType: 'lightSolid',
+      }}
+    >
+      <WriteReviewContent
+        rating={rating}
+        setRating={setRating}
+        review={review}
+        setReview={setReview}
+      />
+    </Modal>
+  );
+}
+
+export default WriteReviewModal;
diff --git a/src/features/profile/components/clubs/ClubContents.tsx b/src/features/profile/components/clubs/ClubContents.tsx
new file mode 100644
index 00000000..6fa42003
--- /dev/null
+++ b/src/features/profile/components/clubs/ClubContents.tsx
@@ -0,0 +1,48 @@
+import SortingButton from '@/components/sorting-button/SortingButton';
+import { CLUB_TABS, ClubTab } from '@/constants';
+import { useState } from 'react';
+import JoinedClubList from './JoinedClubList';
+import MyReviewList from './MyReviewList';
+import HostedClubList from './HostedClubsList';
+import Tab from '@/components/tab/Tab';
+
+export default function ClubContents() {
+  const [sortBy, setSortBy] = useState<string | undefined>('NEWEST');
+  const [selectedList, setSelectedList] = useState<ClubTab>(CLUB_TABS[0]);
+
+  const renderList = (selectedList: ClubTab) => {
+    switch (selectedList) {
+      case CLUB_TABS[0]:
+        return <JoinedClubList />;
+      case CLUB_TABS[1]:
+        return <HostedClubList />;
+      case CLUB_TABS[2]:
+        return <MyReviewList />;
+    }
+  };
+
+  return (
+    <div
+      className="min-h-screen w-full flex-grow bg-gray-light-02 pt-3 sm:px-[20px] sm:pb-[44px] md:px-[24px] md:pb-[45px] lg:px-[102px] lg:pb-[41px]"
+      role="main"
+    >
+      <div className="flex items-center justify-between gap-x-2 sm:overflow-auto sm:whitespace-nowrap sm:[&::-webkit-scrollbar]:hidden">
+        <Tab
+          items={CLUB_TABS}
+          activeTab={selectedList}
+          onTabChange={(item) => setSelectedList(item)}
+          tabType="SUB_TAB"
+        />
+
+        <SortingButton
+          variant="byDate"
+          onClickSorting={(order) => {
+            setSortBy(order);
+            console.log(sortBy);
+          }}
+        />
+      </div>
+      <div className="pt-[18px]">{renderList(selectedList)}</div>
+    </div>
+  );
+}
diff --git a/src/features/profile/components/clubs/HostedClubsList.tsx b/src/features/profile/components/clubs/HostedClubsList.tsx
new file mode 100644
index 00000000..17650279
--- /dev/null
+++ b/src/features/profile/components/clubs/HostedClubsList.tsx
@@ -0,0 +1,3 @@
+export default function HostedClubList() {
+  return <div>내가 만든 모임 뷰</div>;
+}
diff --git a/src/features/profile/components/clubs/JoinedClubList.tsx b/src/features/profile/components/clubs/JoinedClubList.tsx
new file mode 100644
index 00000000..6961689e
--- /dev/null
+++ b/src/features/profile/components/clubs/JoinedClubList.tsx
@@ -0,0 +1,3 @@
+export default function JoinedClubList() {
+  return <div>나의 모임 뷰</div>;
+}
diff --git a/src/features/profile/components/clubs/MyReviewList.tsx b/src/features/profile/components/clubs/MyReviewList.tsx
new file mode 100644
index 00000000..47c32930
--- /dev/null
+++ b/src/features/profile/components/clubs/MyReviewList.tsx
@@ -0,0 +1,3 @@
+export default function MyReviewList() {
+  return <div>나의 리뷰 뷰</div>;
+}
diff --git a/src/features/profile/components/exchange/ExchangeContents.tsx b/src/features/profile/components/exchange/ExchangeContents.tsx
new file mode 100644
index 00000000..b7326c91
--- /dev/null
+++ b/src/features/profile/components/exchange/ExchangeContents.tsx
@@ -0,0 +1,50 @@
+import SortingButton from '@/components/sorting-button/SortingButton';
+import { EXCHANGE_TABS, ExchangeTab } from '@/constants';
+import { useState } from 'react';
+import TradeRecords from './TradeRecords';
+import MyRegisteredBooks from './MyRegisteredBooks';
+import TradeReviews from './TradeReviews';
+import Tab from '@/components/tab/Tab';
+
+export default function ClubContents() {
+  const [sortBy, setSortBy] = useState<string | undefined>('NEWEST');
+  const [selectedList, setSelectedList] = useState<ExchangeTab>(
+    EXCHANGE_TABS[0],
+  );
+
+  const renderList = (selectedList: ExchangeTab) => {
+    switch (selectedList) {
+      case EXCHANGE_TABS[0]:
+        return <TradeRecords />;
+      case EXCHANGE_TABS[1]:
+        return <MyRegisteredBooks />;
+      case EXCHANGE_TABS[2]:
+        return <TradeReviews />;
+    }
+  };
+
+  return (
+    <div
+      className="min-h-screen w-full flex-grow bg-gray-light-02 pt-3 sm:px-[20px] sm:pb-[44px] md:px-[24px] md:pb-[45px] lg:px-[102px] lg:pb-[41px]"
+      role="main"
+    >
+      <div className="flex items-center justify-between gap-x-2 sm:overflow-auto sm:whitespace-nowrap sm:[&::-webkit-scrollbar]:hidden">
+        <Tab
+          items={EXCHANGE_TABS}
+          activeTab={selectedList}
+          onTabChange={(item) => setSelectedList(item)}
+          tabType="SUB_TAB"
+        />
+
+        <SortingButton
+          variant="byDate"
+          onClickSorting={(order) => {
+            setSortBy(order);
+            console.log(sortBy);
+          }}
+        />
+      </div>
+      <div className="pt-[18px]">{renderList(selectedList)}</div>
+    </div>
+  );
+}
diff --git a/src/features/profile/components/exchange/MyRegisteredBooks.tsx b/src/features/profile/components/exchange/MyRegisteredBooks.tsx
new file mode 100644
index 00000000..ca73cfce
--- /dev/null
+++ b/src/features/profile/components/exchange/MyRegisteredBooks.tsx
@@ -0,0 +1,3 @@
+export default function MyRegisteredBooks() {
+  return <div>내가 등록한 책</div>;
+}
diff --git a/src/features/profile/components/exchange/TradeRecords.tsx b/src/features/profile/components/exchange/TradeRecords.tsx
new file mode 100644
index 00000000..e392e0b3
--- /dev/null
+++ b/src/features/profile/components/exchange/TradeRecords.tsx
@@ -0,0 +1,3 @@
+export default function TradeRecords() {
+  return <div>나의 교환 기록</div>;
+}
diff --git a/src/features/profile/components/exchange/TradeReviews.tsx b/src/features/profile/components/exchange/TradeReviews.tsx
new file mode 100644
index 00000000..2af0a973
--- /dev/null
+++ b/src/features/profile/components/exchange/TradeReviews.tsx
@@ -0,0 +1,3 @@
+export default function TradeReviews() {
+  return <div>교환 리뷰</div>;
+}
diff --git a/src/features/profile/components/index.ts b/src/features/profile/components/index.ts
deleted file mode 100644
index cb0ff5c3..00000000
--- a/src/features/profile/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export {};
diff --git a/src/features/profile/components/profile/Profile.stories.tsx b/src/features/profile/components/profile/Profile.stories.tsx
new file mode 100644
index 00000000..fe17b4b2
--- /dev/null
+++ b/src/features/profile/components/profile/Profile.stories.tsx
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Profile from './Profile';
+import User from '../../types/user';
+
+const mockUser: User = {
+  teamId: '1',
+  id: 123,
+  email: 'john.doe@example.com',
+  name: 'John Doe',
+  description: 'Example Company',
+  createdAt: new Date('2024-01-01T00:00:00Z'),
+  updatedAt: new Date('2024-01-10T00:00:00Z'),
+};
+
+const meta = {
+  title: 'Components/Profile',
+  component: Profile,
+  parameters: {
+    componentSubtitle: '목록의 아이템들의 순서를 정렬하게 만드는 컴포넌트',
+  },
+} satisfies Meta<typeof Profile>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    user: mockUser,
+  },
+};
diff --git a/src/features/profile/components/profile/Profile.test.tsx b/src/features/profile/components/profile/Profile.test.tsx
new file mode 100644
index 00000000..973cbd3f
--- /dev/null
+++ b/src/features/profile/components/profile/Profile.test.tsx
@@ -0,0 +1,88 @@
+import '@testing-library/jest-dom';
+import Profile from './Profile';
+import { render, screen } from '@testing-library/react';
+import User from '../../types/user';
+import userEvent from '@testing-library/user-event';
+
+const mockUser: User = {
+  teamId: '1',
+  id: 123,
+  email: 'john.doe@example.com',
+  name: 'John Doe',
+  description: 'Example Company',
+  image: 'https://example.com/profile.jpg',
+  createdAt: new Date('2024-01-01T00:00:00Z'),
+  updatedAt: new Date('2024-01-10T00:00:00Z'),
+};
+// const mockSubmit = jest.fn();
+
+describe('Profile 테스트', () => {
+  it('프로필 컴포넌트의 데이터 렌더링 확인', () => {
+    render(<Profile user={mockUser} />);
+
+    //프로필 컴포넌트 데이터 렌더링 확인
+    expect(screen.getByText('John Doe님의 프로필')).toBeInTheDocument;
+    expect(screen.getByText('john.doe@example.com')).toBeInTheDocument;
+    expect(screen.getByText('Example Company')).toBeInTheDocument;
+  });
+
+  it('수정하기 아이콘 버튼 클릭 후 프로필 수정하기 모달 렌더링 테스트', async () => {
+    render(<Profile user={mockUser} />);
+    const editButton = screen.getByLabelText('프로필 수정');
+
+    expect(screen.queryByText('프로필 수정하기')).not.toBeInTheDocument;
+
+    //수정 아이콘 버튼 클릭 시 프로필 수정하기 모달 표시
+    await userEvent.click(editButton);
+    expect(screen.queryByText('프로필 수정하기')).toBeInTheDocument;
+
+    //취소하기 버튼 클릭 시 프로필 수정하기 모달 닫힘
+    const cancelButton = screen.getByText('취소하기');
+    await userEvent.click(cancelButton);
+    expect(screen.queryByText('프로필 수정하기')).not.toBeInTheDocument;
+
+    //수정 아이콘 버튼 클릭 시 프로필 수정하기 모달 표시
+    await userEvent.click(editButton);
+    expect(screen.queryByText('프로필 수정하기')).toBeInTheDocument;
+
+    //닫기 아이콘 버튼 클릭 시 프로필 수정하기 모달 닫힘
+    const closeButton = screen.getByLabelText('닫기');
+    await userEvent.click(closeButton);
+    expect(screen.queryByText('프로필 수정하기')).not.toBeInTheDocument;
+  });
+
+  it("수정하기 모달에서 프로필 정보 수정 후 닫기 버튼/취소 버튼 클릭 시 '정말 나가시겠어요? 지금까지 작성한 내용이 모두 삭제됩니다.' 팝업창 렌더링 확인", () => {});
+
+  it("수정하기 모달에서 닉네임을 입력하지 않고 수정하기 버튼 클릭 시 '닉네임을 입력해주세요' 팝업창 렌더링 확인", () => {});
+
+  it('수정하기 모달에서 수정 후 수정하기 버튼 클릭 시 onSubmitEditProfile 함수 호출 확인', async () => {
+    render(<Profile user={mockUser} />);
+
+    const editButton = screen.getByLabelText('프로필 수정');
+    await userEvent.click(editButton);
+
+    //닉네임 수정
+    const nameInput = screen.getByRole('textbox', { name: 'name' });
+    await userEvent.clear(nameInput);
+    await userEvent.type(nameInput, 'Edited Name');
+
+    //한 줄 소개 수정
+    const descriptionInput = screen.getByRole('textbox', {
+      name: 'description',
+    });
+    await userEvent.clear(descriptionInput);
+    await userEvent.type(descriptionInput, 'Edited Description');
+
+    //수정하기 버튼 클릭
+    const confirmButton = screen.getByText('수정하기');
+    await userEvent.click(confirmButton);
+
+    //TODO:함수 호출 확인
+
+    // expect(mockSubmit).toHaveBeenCalledTimes(1);
+    // expect(mockSubmit).toHaveBeenCalledWith({
+    //   name: 'Edited Name',
+    //   description: 'Edited Description',
+    // });
+  });
+});
diff --git a/src/features/profile/components/profile/Profile.tsx b/src/features/profile/components/profile/Profile.tsx
new file mode 100644
index 00000000..85bbd5f1
--- /dev/null
+++ b/src/features/profile/components/profile/Profile.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import { useState } from 'react';
+import Avatar from '@/components/avatar/Avatar';
+import { IcEdit } from '../../../../../public/icons/index';
+import ProfileEditModal from '../ProfileEditModal';
+import { ProfileEditData, ProfilePageProps } from '../../types';
+
+function Profile({ user }: ProfilePageProps) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const onSubmitEditProfile = (formData: ProfileEditData) => {
+    alert(`name:${formData.name}, companyName:${formData.companyName}`);
+    setIsModalOpen(false);
+  };
+
+  return (
+    <div className="mt-5 w-full min-w-[336px] flex-col">
+      {isModalOpen && (
+        <ProfileEditModal
+          isOpen={isModalOpen}
+          onClose={() => setIsModalOpen(false)}
+          onConfirm={(formData) => onSubmitEditProfile(formData)}
+          profileData={{
+            name: user?.name || '',
+            description: user?.description || '',
+            image: user?.image,
+          }}
+        />
+      )}
+      {/* 프로필 제목 */}
+      {/* TODO: 프로필 페이지가 로그인된 유저의 프로필 페이지와 일치 여부 확인 후 수정하기 아이콘 hidden or none */}
+      <div
+        className="flex h-[60px] w-full justify-between rounded-t-3xl border-l-2 border-r-2 border-t-2 border-green-light-02 bg-green-light-01 px-6 py-3.5"
+        role="title"
+      >
+        <label className="text-xl font-semibold text-green-dark-01">
+          {user?.name}님의 프로필
+        </label>
+        <button
+          className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-white"
+          aria-label="프로필 수정"
+          onClick={() => setIsModalOpen(true)}
+        >
+          <IcEdit />
+        </button>
+      </div>
+      {/* 프로필 내용 */}
+      <div
+        className="flex w-full justify-between rounded-b-3xl border-b-2 border-l-2 border-r-2 border-gray-normal-01 bg-gray-light-01 px-6 py-[30px]"
+        role="content"
+      >
+        {/* 프로필 이미지 */}
+        <div className="mr-6 h-[80px] w-[80px] rounded-full border-[3px] border-gray-normal-01">
+          <Avatar
+            src={user?.image ?? '/images/profile.png'}
+            alt="profile_page_profile_image"
+            size="max"
+          />
+        </div>
+        {/* 프로필 정보 */}
+        <div className="flex w-full flex-col">
+          <div className="mb-[14px] text-2xl font-bold text-green-normal-01">
+            {user?.name}님
+          </div>
+          <div className="flex flex-col gap-y-2">
+            <div className="flex gap-y-1.5 sm:flex-col md:flex-row lg:flex-row">
+              <span className="mr-1.5 whitespace-nowrap text-base font-semibold text-gray-black">
+                이메일
+              </span>
+              <span className="text-base font-medium text-gray-darker">
+                {user?.email}
+              </span>
+            </div>
+            <div className="flex gap-y-1.5 sm:flex-col md:flex-row lg:flex-row">
+              <span className="mr-1.5 whitespace-nowrap text-base font-semibold text-gray-black">
+                한 줄 소개
+              </span>
+              <p className="whitespace-pre-wrap text-base font-medium text-gray-darker">
+                {user?.description}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+export default Profile;
diff --git a/src/features/profile/types/index.ts b/src/features/profile/types/index.ts
index cb0ff5c3..c948e72e 100644
--- a/src/features/profile/types/index.ts
+++ b/src/features/profile/types/index.ts
@@ -1 +1,11 @@
-export {};
+import User from './user';
+
+export interface ProfilePageProps {
+  user: User | null;
+}
+
+export interface ProfileEditData {
+  name: string;
+  companyName?: string;
+  image?: string | null;
+}
diff --git a/src/features/profile/types/user.ts b/src/features/profile/types/user.ts
new file mode 100644
index 00000000..2c5c42f5
--- /dev/null
+++ b/src/features/profile/types/user.ts
@@ -0,0 +1,10 @@
+export default interface User {
+  teamId: string;
+  id: number;
+  email: string;
+  name: string;
+  description?: string | null;
+  image?: string | null;
+  createdAt: Date;
+  updatedAt: Date;
+}
diff --git a/src/lib/utils/apiClient.ts b/src/lib/utils/apiClient.ts
index ecea7a72..2b9dedbc 100644
--- a/src/lib/utils/apiClient.ts
+++ b/src/lib/utils/apiClient.ts
@@ -1,7 +1,9 @@
 import axios from 'axios';
+import { getCookie, deleteCookie } from '@/features/auth/utils/cookies';
+import { useAuthStore } from '@/store/authStore';
 
 const apiClient = axios.create({
-  baseURL: 'https://api.example.com/',
+  baseURL: process.env.NEXT_PUBLIC_API_URL,
   timeout: 5000,
   headers: {
     'Content-Type': 'application/json',
@@ -11,8 +13,7 @@ const apiClient = axios.create({
 // Request Interceptor
 apiClient.interceptors.request.use(
   (config) => {
-    // 예: 인증 토큰 추가
-    const token = localStorage.getItem('token');
+    const token = getCookie('auth_token');
     if (token) {
       config.headers.Authorization = `Bearer ${token}`;
     }
@@ -27,8 +28,10 @@ apiClient.interceptors.request.use(
 apiClient.interceptors.response.use(
   (response) => response,
   (error) => {
-    // 예: 에러 메시지 처리
     if (error.response?.status === 401) {
+      const { setIsLoggedIn } = useAuthStore.getState();
+      setIsLoggedIn(false);
+      deleteCookie('auth_token');
       alert('로그인이 필요합니다.');
     }
     return Promise.reject(error);
diff --git a/src/lib/utils/dateUtils.ts b/src/lib/utils/dateUtils.ts
new file mode 100644
index 00000000..34915223
--- /dev/null
+++ b/src/lib/utils/dateUtils.ts
@@ -0,0 +1,4 @@
+export const toKoreanTime = (date: Date): string => {
+  const kstDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
+  return kstDate.toISOString().slice(0, 19);
+};
diff --git a/src/middleware.ts b/src/middleware.ts
new file mode 100644
index 00000000..1b764c86
--- /dev/null
+++ b/src/middleware.ts
@@ -0,0 +1,28 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+const AUTH_REQUIRED_PATHS = ['/wish', '/profile'];
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+  const token = request.cookies.get('auth_token');
+
+  if (AUTH_REQUIRED_PATHS.includes(pathname)) {
+    if (!token) {
+      const loginUrl = new URL('/login', request.url);
+
+      loginUrl.searchParams.set('returnUrl', pathname);
+      return NextResponse.redirect(loginUrl);
+    }
+  }
+
+  if (pathname === '/login' && token) {
+    return NextResponse.redirect(new URL('/', request.url));
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ['/wish', '/profile', '/login'],
+};
diff --git a/src/store/authStore.ts b/src/store/authStore.ts
new file mode 100644
index 00000000..a70256d4
--- /dev/null
+++ b/src/store/authStore.ts
@@ -0,0 +1,38 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { getCookie } from '@/features/auth/utils/cookies';
+import { User } from '../features/auth/types/user';
+
+interface AuthState {
+  isLoggedIn: boolean;
+  user: User | null;
+  setIsLoggedIn: (value: boolean) => void;
+  setUser: (user: User | null) => void;
+  checkLoginStatus: () => void;
+}
+
+export const useAuthStore = create<AuthState>()(
+  persist(
+    (set) => ({
+      isLoggedIn: false,
+      user: null,
+      setIsLoggedIn: (value: boolean) => set({ isLoggedIn: value }),
+      setUser: (user: User | null) =>
+        set((state) => {
+          return { ...state, user };
+        }),
+      checkLoginStatus: () => {
+        const token = getCookie('auth_token');
+        set((state) => {
+          if (!token) {
+            return { ...state, isLoggedIn: false, user: null };
+          }
+          return { ...state, isLoggedIn: true };
+        });
+      },
+    }),
+    {
+      name: 'auth-storage',
+    },
+  ),
+);
diff --git a/src/store/index.ts b/src/store/index.ts
deleted file mode 100644
index cb0ff5c3..00000000
--- a/src/store/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export {};
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 79a60d2b..6c63736a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,19 +1,55 @@
 import type { Config } from 'tailwindcss';
 
-export default {
-  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/*/.{html,js}',
-  ],
+const config: Config = {
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
   theme: {
+    screens: {
+      sm: '375px',
+      md: '744px',
+      lg: '1024px',
+    },
     extend: {
       colors: {
         background: 'var(--background)',
         foreground: 'var(--foreground)',
+        gray: {
+          white: '#ffffff',
+          'light-01': '#fdfdfd',
+          'light-02': '#fafbfb',
+          'normal-01': '#f0f1f3',
+          'normal-02': '#d8d9db',
+          'normal-03': '#c0c1c2',
+          'dark-01': '#b4b5b6',
+          'dark-02': '#909192',
+          'dark-03': '#6c6c6d',
+          darker: '#545455',
+          black: '#222222',
+        },
+        green: {
+          'light-01': '#e6f6f4',
+          'light-02': '#d9f2ef',
+          'light-03': '#b0e4dd',
+          'normal-01': '#00a991',
+          'normal-02': '#009883',
+          'normal-03': '#008774',
+          'dark-01': '#007f6d',
+          'dark-02': '#006557',
+          'dark-03': '#004c41',
+          darker: '#003b33',
+        },
+        blue: {
+          light: '#d9ebff',
+          'light-active': '#009cf4',
+          normal: '#007aff',
+        },
+        red: {
+          pink: '#ff337e',
+          normal: '#dc2626',
+        },
       },
     },
   },
   plugins: [],
-} satisfies Config;
+};
+
+export default config;
diff --git a/tsconfig.json b/tsconfig.json
index c8f844c0..0d8430ab 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -23,21 +19,10 @@
       }
     ],
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     }
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ],
-  "types": [
-    "jest"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"],
+  "types": ["jest"]
 }