diff --git a/.eslintrc.js b/.eslintrc.js
index cb854af6..a373fb94 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -30,6 +30,8 @@ module.exports = {
     'react/jsx-props-no-spreading': 'off',
     'no-use-before-define': 'off',
     '@typescript-eslint/no-use-before-define': ['off'],
+    "react/require-default-props": 'off',
+    "react/self-closing-comp": 'off',
   },
   settings: {
     react: {
diff --git a/.vscode/settings.json b/.vscode/settings.json
index d5bfa7d4..a9d3f305 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -64,5 +64,8 @@
         }
       ]
     }
-  }
+  },
+  "cSpell.words": [
+    "clsx"
+  ]
 }
diff --git a/next.config.mjs b/next.config.mjs
index d5456a15..49ba09f8 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,6 +1,23 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+    domains: ['sprint-fe-project.s3.ap-northeast-2.amazonaws.com', 'localhost'],
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'via.placeholder.com',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
+  rewrites: async () => [
+    {
+      source: '/api/proxy/:path*',
+      destination: 'https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/:path*',
+    },
+  ],
 };
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index 92e0a253..ce9380b1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@lukemorales/query-key-factory": "^1.3.4",
         "@radix-ui/react-alert-dialog": "^1.1.1",
         "@radix-ui/react-avatar": "^1.1.0",
+        "@radix-ui/react-dialog": "^1.1.1",
         "@radix-ui/react-dropdown-menu": "^2.1.1",
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-radio-group": "^1.2.0",
@@ -23,21 +24,27 @@
         "axios": "^1.7.2",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
+        "date-fns": "^3.6.0",
+        "formik": "^2.4.6",
         "lucide-react": "^0.402.0",
         "next": "14.2.4",
         "qs": "^6.12.2",
         "react": "^18",
         "react-dom": "^18",
         "react-hook-form": "^7.52.1",
+        "react-toastify": "^10.0.5",
+        "sharp": "^0.33.4",
         "tailwind-merge": "^2.4.0",
         "tailwindcss-animate": "^1.0.7",
+        "yup": "^1.4.0",
         "zod": "^3.23.8"
       },
       "devDependencies": {
         "@tanstack/eslint-plugin-query": "^5.50.0",
-        "@types/node": "^20",
+        "@types/lodash": "^4.17.7",
+        "@types/node": "^20.14.10",
         "@types/qs": "^6.9.15",
-        "@types/react": "^18",
+        "@types/react": "^18.3.3",
         "@types/react-dom": "^18",
         "@typescript-eslint/eslint-plugin": "^7.2.0",
         "@typescript-eslint/parser": "^7.2.0",
@@ -56,8 +63,8 @@
         "postcss": "8.4.39",
         "prettier": "^3.2.5",
         "prettier-eslint": "^16.3.0",
-        "tailwindcss": "3.4.4",
-        "typescript": "^5"
+        "tailwindcss": "^3.4.4",
+        "typescript": "^5.5.3"
       },
       "engines": {
         "node": ">=20.15.0"
@@ -74,6 +81,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.2.0.tgz",
+      "integrity": "sha512-bV21/9LQmcQeCPEg3BDFtvwL6cwiTMksYNWQQ4KOxCZikEGalWtenoZ0wCiukJINlGCIi2KXx01g4FoH/LxpzQ==",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -251,6 +267,437 @@
       "deprecated": "Use @eslint/object-schema instead",
       "dev": true
     },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.4.tgz",
+      "integrity": "sha512-p0suNqXufJs9t3RqLBO6vvrgr5OhgbWp76s5gTRvdmxmuv9E1rcaqGUsl3l4mKVmXPkTkTErXediAui4x+8PSA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.4.tgz",
+      "integrity": "sha512-0l7yRObwtTi82Z6ebVI2PnHT8EB2NxBgpK2MiKJZJ7cz32R4lxd001ecMhzzsZig3Yv9oclvqqdV93jo9hy+Dw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.2.tgz",
+      "integrity": "sha512-tcK/41Rq8IKlSaKRCCAuuY3lDJjQnYIW1UXU1kxcEKrfL8WR7N6+rzNoOxoQRJWTAECuKwgAHnPvqXGN8XfkHA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "macos": ">=11",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.2.tgz",
+      "integrity": "sha512-Ofw+7oaWa0HiiMiKWqqaZbaYV3/UGL2wAPeLuJTx+9cXpCRdvQhCLG0IH8YGwM0yGWGLpsF4Su9vM1o6aer+Fw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "macos": ">=10.13",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.2.tgz",
+      "integrity": "sha512-iLWCvrKgeFoglQxdEwzu1eQV04o8YeYGFXtfWU26Zr2wWT3q3MTzC+QTCO3ZQfWd3doKHT4Pm2kRmLbupT+sZw==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.28",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.2.tgz",
+      "integrity": "sha512-x7kCt3N00ofFmmkkdshwj3vGPCnmiDh7Gwnd4nUwZln2YjqPxV1NlTyZOvoDWdKQVDL911487HOueBvrpflagw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.2.tgz",
+      "integrity": "sha512-cmhQ1J4qVhfmS6szYW7RT+gLJq9dH2i4maq+qyXayUSn9/3iY2ZeWpbAgSpSVbV2E1JUL2Gg7pwnYQ1h8rQIog==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.28",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.2.tgz",
+      "integrity": "sha512-E441q4Qdb+7yuyiADVi5J+44x8ctlrqn8XgkDTwr4qPJzWkaHwD489iZ4nGDgcuya4iMN3ULV6NwbhRZJ9Z7SQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.2.tgz",
+      "integrity": "sha512-3CAkndNpYUrlDqkCM5qhksfE+qSIREVpyoeHIU6jd48SJZViAmznoQQLAv4hVXF7xyUB9zf+G++e2v1ABjCbEQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.2.tgz",
+      "integrity": "sha512-VI94Q6khIHqHWNOh6LLdm9s2Ry4zdjWJwH56WoiJU7NTeDwyApdZZ8c+SADC8OH98KWNQXnE01UdJ9CSfZvwZw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.4.tgz",
+      "integrity": "sha512-RUgBD1c0+gCYZGCCe6mMdTiOFS0Zc/XrN0fYd6hISIKcDUbAW5NtSQW9g/powkrXYm6Vzwd6y+fqmExDuCdHNQ==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.28",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.4.tgz",
+      "integrity": "sha512-2800clwVg1ZQtxwSoTlHvtm9ObgAax7V6MTAB/hDT945Tfyy3hVkmiHpeLPCKYqYR1Gcmv1uDZ3a4OFwkdBL7Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.4.tgz",
+      "integrity": "sha512-h3RAL3siQoyzSoH36tUeS0PDmb5wINKGYzcLB5C6DIiAn2F3udeFAum+gj8IbA/82+8RGCTn7XW8WTFnqag4tQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.31",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.4.tgz",
+      "integrity": "sha512-GoR++s0XW9DGVi8SUGQ/U4AeIzLdNjHka6jidVwapQ/JebGVQIpi52OdyxCNVRE++n1FCLzjDovJNozif7w/Aw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.4.tgz",
+      "integrity": "sha512-nhr1yC3BlVrKDTl6cO12gTpXMl4ITBUZieehFvMntlCXFzH2bvKG76tBL2Y/OqhupZt81pR7R+Q5YhJxW0rGgQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.4.tgz",
+      "integrity": "sha512-uCPTku0zwqDmZEOi4ILyGdmW76tH7dm8kKlOIV1XC5cLyJ71ENAAqarOHQh0RLfpIpbV5KOpXzdU6XkJtS0daw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.4.tgz",
+      "integrity": "sha512-Bmmauh4sXUsUqkleQahpdNXKvo+wa1V9KhT2pDA4VJGKwnKMJXiSTGphn0gnJrlooda0QxCtXc6RX1XAU6hMnQ==",
+      "cpu": [
+        "wasm32"
+      ],
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.1.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.4.tgz",
+      "integrity": "sha512-99SJ91XzUhYHbx7uhK3+9Lf7+LjwMGQZMDlO/E/YVJ7Nc3lyDFZPGhjwiYdctoH2BOzW9+TnfqcaMKt0jHLdqw==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.4.tgz",
+      "integrity": "sha512-3QLocdTRVIrFNye5YocZl+KKpYKP+fksi1QhmOArgx7GyhIbQp/WrJRu176jm8IxromS7RIkzMiMINVdBtC8Aw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -1475,16 +1922,31 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
+      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.7",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz",
+      "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==",
+      "dev": true
+    },
     "node_modules/@types/node": {
-      "version": "20.14.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.9.tgz",
-      "integrity": "sha512-06OCtnTXtWOZBJlRApleWndH4JsRVs1pDCc8dLSQp+7PpUpX3ePdHyeNSFTeSe7FtKyQkrlPvHwJOW3SLd8Oyg==",
+      "version": "20.14.10",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.10.tgz",
+      "integrity": "sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
@@ -1493,8 +1955,7 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
-      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "devOptional": true
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
     },
     "node_modules/@types/qs": {
       "version": "6.9.15",
@@ -1506,7 +1967,6 @@
       "version": "18.3.3",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
       "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
-      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -2295,6 +2755,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2311,6 +2783,15 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2378,8 +2859,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -2438,6 +2918,15 @@
         "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==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.5",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
@@ -2493,6 +2982,14 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/define-data-property": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -2534,6 +3031,14 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
+      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/detect-node-es": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
@@ -3695,6 +4200,30 @@
         "node": ">= 6"
       }
     },
+    "node_modules/formik": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.4.6.tgz",
+      "integrity": "sha512-A+2EI7U7aG296q2TLGvNapDNTZp1khVt5Vk0Q/fyfSROss0V/V6+txt2aJnwEos44IxTCW/LYAi/zgWzlevj+g==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://opencollective.com/formik"
+        }
+      ],
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -4020,6 +4549,19 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/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=="
+    },
     "node_modules/husky": {
       "version": "9.0.11",
       "resolved": "https://registry.npmjs.org/husky/-/husky-9.0.11.tgz",
@@ -4149,6 +4691,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/is-async-function": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
@@ -4679,8 +5226,12 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
     },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
@@ -5697,6 +6248,11 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "node_modules/property-expr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
+      "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA=="
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -5767,6 +6323,11 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+    },
     "node_modules/react-hook-form": {
       "version": "7.52.1",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.52.1.tgz",
@@ -5855,6 +6416,18 @@
         }
       }
     },
+    "node_modules/react-toastify": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",
+      "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==",
+      "dependencies": {
+        "clsx": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -6090,7 +6663,6 @@
       "version": "7.6.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
       "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -6129,6 +6701,45 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/sharp": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.4.tgz",
+      "integrity": "sha512-7i/dt5kGl7qR4gwPRD2biwD2/SvBn3O04J77XKFgL2OnZtQw+AG9wnuS/csmu80nPRHLYE9E41fyEiG8nhH6/Q==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.3",
+        "semver": "^7.6.0"
+      },
+      "engines": {
+        "libvips": ">=8.15.2",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.33.4",
+        "@img/sharp-darwin-x64": "0.33.4",
+        "@img/sharp-libvips-darwin-arm64": "1.0.2",
+        "@img/sharp-libvips-darwin-x64": "1.0.2",
+        "@img/sharp-libvips-linux-arm": "1.0.2",
+        "@img/sharp-libvips-linux-arm64": "1.0.2",
+        "@img/sharp-libvips-linux-s390x": "1.0.2",
+        "@img/sharp-libvips-linux-x64": "1.0.2",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.2",
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.2",
+        "@img/sharp-linux-arm": "0.33.4",
+        "@img/sharp-linux-arm64": "0.33.4",
+        "@img/sharp-linux-s390x": "0.33.4",
+        "@img/sharp-linux-x64": "0.33.4",
+        "@img/sharp-linuxmusl-arm64": "0.33.4",
+        "@img/sharp-linuxmusl-x64": "0.33.4",
+        "@img/sharp-wasm32": "0.33.4",
+        "@img/sharp-win32-ia32": "0.33.4",
+        "@img/sharp-win32-x64": "0.33.4"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -6176,6 +6787,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -6571,6 +7190,16 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tiny-case": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+      "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q=="
+    },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -6582,6 +7211,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
+    },
     "node_modules/ts-api-utils": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
@@ -7074,6 +7708,28 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/yup": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.4.0.tgz",
+      "integrity": "sha512-wPbgkJRCqIf+OHyiTBQoJiP5PFuAXaWiJK6AmYkzQAh5/c2K9hzSApBZG5wV9KoKSePF7sAxmNSvh/13YHkFDg==",
+      "dependencies": {
+        "property-expr": "^2.0.5",
+        "tiny-case": "^1.0.3",
+        "toposort": "^2.0.2",
+        "type-fest": "^2.19.0"
+      }
+    },
+    "node_modules/yup/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/zod": {
       "version": "3.23.8",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
diff --git a/package.json b/package.json
index fd0a12f9..450b39fe 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@lukemorales/query-key-factory": "^1.3.4",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-radio-group": "^1.2.0",
@@ -28,21 +29,26 @@
     "axios": "^1.7.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
+    "formik": "^2.4.6",
     "lucide-react": "^0.402.0",
     "next": "14.2.4",
     "qs": "^6.12.2",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.52.1",
+    "react-toastify": "^10.0.5",
+    "sharp": "^0.33.4",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
+    "yup": "^1.4.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^5.50.0",
-    "@types/node": "^20",
+    "@types/node": "^20.14.10",
     "@types/qs": "^6.9.15",
-    "@types/react": "^18",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
@@ -61,7 +67,7 @@
     "postcss": "8.4.39",
     "prettier": "^3.2.5",
     "prettier-eslint": "^16.3.0",
-    "tailwindcss": "3.4.4",
-    "typescript": "^5"
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.5.3"
   }
 }
diff --git a/public/ProfileTestImage.jpg b/public/ProfileTestImage.jpg
new file mode 100644
index 00000000..3d7e85d8
Binary files /dev/null and b/public/ProfileTestImage.jpg differ
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index 718d6fea..00000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/icon/BW/AngryFaceBWIcon.svg b/public/icon/BW/AngryFaceBWIcon.svg
new file mode 100644
index 00000000..c499add3
--- /dev/null
+++ b/public/icon/BW/AngryFaceBWIcon.svg
@@ -0,0 +1,19 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 65">
+<g id="Group 51">
+<path id="Vector" d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#DDE2E9"/>
+<path id="Vector_2" d="M26.8385 19.0977H5.16116C4.59103 19.0977 4.12891 19.5598 4.12891 20.1299V27.3557C4.12891 27.9258 4.59109 28.388 5.16116 28.388H26.8386C27.4087 28.388 27.8708 27.9258 27.8708 27.3557V20.13C27.8708 19.5598 27.4087 19.0977 26.8385 19.0977Z" fill="#BABFC8"/>
+<path id="Vector_3" d="M24.7298 25.033L25.1391 24.6238C25.3407 24.4222 25.3407 24.0955 25.1391 23.894C24.9374 23.6924 24.6108 23.6924 24.4092 23.894L24 24.3032L23.6384 23.9416C24.0123 23.6587 24.2581 23.2145 24.2581 22.7105C24.2581 21.8567 23.5635 21.1621 22.7097 21.1621C21.8559 21.1621 21.1613 21.8567 21.1613 22.7105C21.1613 22.8759 21.1942 23.0322 21.2425 23.1818C20.832 23.5559 20.6041 24.1058 20.6517 24.6732C20.7304 25.5985 21.555 26.3234 22.5292 26.3234C23.0682 26.3234 23.5914 26.1132 23.9917 25.7545L24.4092 26.1721C24.5101 26.2729 24.6421 26.3233 24.7742 26.3233C24.9062 26.3233 25.0383 26.2729 25.1391 26.1721C25.3407 25.9705 25.3407 25.6439 25.1391 25.4423L24.7298 25.033ZM22.7097 22.1944C22.9944 22.1944 23.2258 22.4257 23.2258 22.7105C23.2258 22.9952 22.9944 23.2266 22.7097 23.2266C22.4249 23.2266 22.1936 22.9952 22.1936 22.7105C22.1936 22.4257 22.4249 22.1944 22.7097 22.1944ZM22.5292 25.2911C22.0942 25.2911 21.7132 24.9745 21.6799 24.5865C21.6619 24.3689 21.7349 24.1646 21.8717 24.0089C22.0499 24.1243 22.2536 24.2008 22.4719 24.2349L23.2618 25.0247C23.0554 25.1922 22.7965 25.2911 22.5292 25.2911Z" fill="#EBEFF4"/>
+<path id="Vector_4" d="M11.148 21.2651C10.9202 21.0948 10.5966 21.1401 10.4258 21.3684L7.32904 25.4975C7.15766 25.7253 7.20404 26.0489 7.43235 26.2198C7.5251 26.2893 7.63348 26.3231 7.74135 26.3231C7.8986 26.3231 8.05335 26.252 8.15466 26.1164L11.2514 21.9874C11.4227 21.7596 11.3764 21.436 11.148 21.2651Z" fill="#EBEFF4"/>
+<path id="Vector_5" d="M13.4194 24.775C13.7048 24.775 13.9356 24.5441 13.9356 24.2589V21.6782C13.9356 21.3929 13.7047 21.1621 13.4194 21.1621C13.1341 21.1621 12.9033 21.393 12.9033 21.6782V24.2589C12.9033 24.5442 13.1341 24.775 13.4194 24.775Z" fill="#EBEFF4"/>
+<path id="Vector_6" d="M13.4194 25.291C13.1341 25.291 12.9033 25.5219 12.9033 25.8071C12.9033 26.0924 13.1342 26.3233 13.4194 26.3233H13.4245C13.7098 26.3233 13.9381 26.0924 13.9381 25.8071C13.9381 25.5219 13.7047 25.291 13.4194 25.291Z" fill="#EBEFF4"/>
+<path id="Vector_7" d="M19.6129 22.1932H19.4995L19.5973 21.802C19.6668 21.5258 19.4985 21.2456 19.2218 21.1765C18.9451 21.105 18.6653 21.2748 18.5963 21.552L18.436 22.1932H17.435L17.5328 21.802C17.6024 21.5258 17.434 21.2456 17.1573 21.1765C16.8796 21.105 16.6004 21.2748 16.5318 21.552L16.3715 22.1932H16C15.7147 22.1932 15.4839 22.424 15.4839 22.7093C15.4839 22.9945 15.7148 23.2254 16 23.2254H16.1135L15.8554 24.2577H15.4839C15.1986 24.2577 14.9678 24.4885 14.9678 24.7738C14.9678 25.059 15.1986 25.2899 15.4839 25.2899H15.5973L15.4995 25.681C15.43 25.9572 15.5983 26.2375 15.875 26.3065C15.9168 26.3171 15.9592 26.3222 16.0005 26.3222C16.2319 26.3222 16.4421 26.1659 16.5005 25.931L16.6608 25.2899H17.6618L17.564 25.681C17.4945 25.9572 17.6628 26.2375 17.9395 26.3065C17.9813 26.3171 18.0237 26.3222 18.065 26.3222C18.2964 26.3222 18.5066 26.1659 18.565 25.931L18.7253 25.2899H19.0968C19.3821 25.2899 19.613 25.059 19.613 24.7738C19.613 24.4885 19.3821 24.2577 19.0968 24.2577H18.9834L19.2415 23.2254H19.613C19.8983 23.2254 20.1291 22.9945 20.1291 22.7093C20.1291 22.424 19.8982 22.1932 19.6129 22.1932ZM17.9199 24.2577H16.9189L17.177 23.2254H18.178L17.9199 24.2577Z" fill="#EBEFF4"/>
+<path id="Vector_8" d="M8.77397 22.1944C8.77397 21.6253 8.31079 21.1621 7.74172 21.1621C7.17266 21.1621 6.70947 21.6253 6.70947 22.1944C6.70947 22.7634 7.17266 23.2266 7.74172 23.2266C8.31079 23.2266 8.77397 22.7634 8.77397 22.1944Z" fill="#EBEFF4"/>
+<path id="Vector_9" d="M10.8389 24.2578C10.2698 24.2578 9.80664 24.721 9.80664 25.2901C9.80664 25.8591 10.2698 26.3223 10.8389 26.3223C11.408 26.3223 11.8711 25.8591 11.8711 25.2901C11.8711 24.721 11.408 24.2578 10.8389 24.2578Z" fill="#EBEFF4"/>
+</g>
+<path id="Vector 8 (Stroke)" d="M23.8412 8.71678C23.6652 8.46134 23.3727 8.4522 23.0599 8.5721C23.0599 8.5721 21.6467 9.2191 20.7788 9.43949C19.911 9.65988 18.4976 9.8635 18.4976 9.8635C18.2141 9.91933 17.8926 10.1629 17.9113 10.4729C17.9299 10.783 18.1963 11.0193 18.5064 11.0007L18.5649 10.9966C18.6005 10.9939 18.6518 10.9897 18.7174 10.9835C18.8486 10.9713 19.0371 10.9512 19.2716 10.9199C19.7402 10.8572 20.395 10.7489 21.1449 10.566C21.9191 10.3772 22.5494 10.1154 22.9883 9.89956C23.208 9.7915 23.3808 9.69447 23.5007 9.62304C23.5606 9.58731 23.6075 9.55792 23.6405 9.53669L23.6973 9.49914C23.9531 9.32285 24.0175 8.97258 23.8412 8.71678Z" fill="#BABFC8"/>
+<path id="Vector 8 (Stroke)_2" d="M8.1451 8.71678C8.32114 8.46134 8.61358 8.4522 8.9264 8.5721C8.9264 8.5721 10.3396 9.2191 11.2075 9.43949C12.0754 9.65988 13.4887 9.8635 13.4887 9.8635C13.7722 9.91933 14.0937 10.1629 14.0751 10.4729C14.0565 10.783 13.79 11.0193 13.4799 11.0007L13.4214 10.9966C13.3858 10.9939 13.3345 10.9897 13.2689 10.9835C13.1377 10.9713 12.9492 10.9512 12.7147 10.9199C12.2461 10.8572 11.5914 10.7489 10.8414 10.566C10.0672 10.3772 9.43692 10.1154 8.99808 9.89956C8.77833 9.7915 8.60557 9.69447 8.48568 9.62304C8.4257 9.58731 8.37885 9.55792 8.34586 9.53669L8.28905 9.49914C8.03326 9.32285 7.96881 8.97258 8.1451 8.71678Z" fill="#BABFC8"/>
+<path id="Eye_01" d="M11.875 16C12.8415 16 13.625 15.2165 13.625 14.25C13.625 13.2835 12.8415 12.5 11.875 12.5C10.9085 12.5 10.125 13.2835 10.125 14.25C10.125 15.2165 10.9085 16 11.875 16Z" fill="#BABFC8"/>
+<path id="Eye_01_2" d="M20.125 16C21.0915 16 21.875 15.2165 21.875 14.25C21.875 13.2835 21.0915 12.5 20.125 12.5C19.1585 12.5 18.375 13.2835 18.375 14.25C18.375 15.2165 19.1585 16 20.125 16Z" fill="#BABFC8"/>
+</g>
+</svg>
diff --git a/public/icon/BW/HeartFaceBWIcon.svg b/public/icon/BW/HeartFaceBWIcon.svg
new file mode 100644
index 00000000..5702c0f9
--- /dev/null
+++ b/public/icon/BW/HeartFaceBWIcon.svg
@@ -0,0 +1,13 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="012-heart face" clip-path="url(#clip0_0_9806)">
+<path id="Background" d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#DDE2E9"/>
+<path id="Mouth" d="M21.8103 21.7776C21.7958 22.5118 21.1514 24.2955 18.8702 25.4008C17.9754 25.8363 16.9941 26.0625 16 26.0625C15.0059 26.0625 14.0246 25.8363 13.1298 25.4008C10.8446 24.2995 10.2042 22.5118 10.1897 21.7776C10.1633 21.3654 10.3742 20.8724 10.9329 21.0301C11.8449 21.3641 13.276 21.5602 14.3857 21.6623C15.4595 21.7643 16.5405 21.7643 17.6143 21.6623C18.724 21.5562 20.1551 21.3641 21.0671 21.0301C21.6258 20.8724 21.8367 21.3654 21.8103 21.7776Z" fill="#BABFC8"/>
+<path id="Eye 02" d="M17.6765 10.0602C17.445 10.9293 17.5549 11.8106 18.0259 12.8363C18.4454 13.7541 19.1351 14.755 19.9347 15.9136C20.2076 16.3094 20.5152 16.759 20.8337 17.2327C20.9183 17.358 21.045 17.4489 21.1908 17.4887C21.3376 17.5292 21.4941 17.5138 21.6301 17.4454C22.144 17.1927 22.6254 16.9533 23.0699 16.753C24.3416 16.1485 25.4394 15.6267 26.2615 15.0434C27.1817 14.3889 27.718 13.6816 27.9517 12.8119C28.1824 12.0057 28.0999 11.1421 27.7208 10.3941C27.5366 10.0394 27.2798 9.72749 26.9673 9.47843C26.6547 9.22937 26.2933 9.04876 25.9065 8.94833C25.3195 8.78754 24.6951 8.83233 24.1371 9.07528C23.8354 9.20246 23.5537 9.37284 23.301 9.58109C23.1863 9.27451 23.0285 8.98584 22.8324 8.7238C22.4699 8.23815 21.9538 7.88942 21.368 7.73432C20.9825 7.62864 20.5793 7.60469 20.1841 7.66401C19.7889 7.72332 19.4104 7.86459 19.073 8.07874C18.3752 8.54044 17.8767 9.2478 17.6765 10.0602Z" fill="#BABFC8"/>
+<path id="Eye 01" d="M12.9234 8.08763C12.586 7.87347 12.2076 7.73221 11.8123 7.67289C11.4171 7.61358 11.0139 7.63753 10.6284 7.7432C10.0426 7.89831 9.52652 8.24704 9.16404 8.73269C8.96788 8.99473 8.81008 9.2834 8.69538 9.58997C8.44269 9.38173 8.16105 9.21135 7.85932 9.08417C7.30127 8.84122 6.67693 8.79642 6.08991 8.95721C5.70309 9.05765 5.34168 9.23825 5.02912 9.48731C4.71657 9.73637 4.45983 10.0483 4.27557 10.403C3.89648 11.151 3.81404 12.0146 4.04475 12.8208C4.27837 13.6905 4.81473 14.3977 5.73491 15.0523C6.55699 15.6355 7.65476 16.1574 8.9265 16.7619C9.36037 16.9683 9.85241 17.2016 10.3663 17.4543C10.5023 17.5226 10.6588 17.5381 10.8056 17.4976C10.9514 17.4577 11.0781 17.3669 11.1627 17.2416C11.4812 16.7679 11.7888 16.3183 12.0617 15.9225C12.8613 14.7639 13.5426 13.7607 13.9706 12.8452C14.4415 11.8195 14.5514 10.9382 14.3199 10.0691C14.1198 9.25669 13.6212 8.54933 12.9234 8.08763Z" fill="#BABFC8"/>
+</g>
+<defs>
+<clipPath id="clip0_0_9806">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/icon/BW/SadFaceBWIcon.svg b/public/icon/BW/SadFaceBWIcon.svg
new file mode 100644
index 00000000..90df96bd
--- /dev/null
+++ b/public/icon/BW/SadFaceBWIcon.svg
@@ -0,0 +1,14 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="034-sad" clip-path="url(#clip0_0_9861)">
+<path id="Background" d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#DDE2E9"/>
+<path id="Watter Drop" d="M12.8861 23.0795C12.8861 24.9263 11.4964 26.4221 9.77752 26.4221C8.05866 26.4221 6.66895 24.9263 6.66895 23.0795C6.66895 21.6166 8.6054 18.967 9.4118 17.9156C9.45257 17.86 9.50584 17.8148 9.56731 17.7837C9.62878 17.7526 9.69672 17.7363 9.76563 17.7363C9.83454 17.7363 9.90248 17.7526 9.96395 17.7837C10.0254 17.8148 10.0787 17.86 10.1195 17.9156C10.9496 18.967 12.8861 21.6221 12.8861 23.0795Z" fill="#BABFC8"/>
+<path id="Eye_01" d="M11.875 14.5C12.8415 14.5 13.625 13.7165 13.625 12.75C13.625 11.7835 12.8415 11 11.875 11C10.9085 11 10.125 11.7835 10.125 12.75C10.125 13.7165 10.9085 14.5 11.875 14.5Z" fill="#BABFC8"/>
+<path id="Eye_01_2" d="M20.125 14.5C21.0915 14.5 21.875 13.7165 21.875 12.75C21.875 11.7835 21.0915 11 20.125 11C19.1585 11 18.375 11.7835 18.375 12.75C18.375 13.7165 19.1585 14.5 20.125 14.5Z" fill="#BABFC8"/>
+<path id="Ellipse 22" d="M20.5 23.375C19.3291 22.2893 17.7581 21.625 16.0312 21.625C15.6804 21.625 15.3359 21.6524 15 21.7052" stroke="#BABFC8" stroke-width="2.15054" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_0_9861">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/icon/BW/SmileFaceBWIcon.svg b/public/icon/BW/SmileFaceBWIcon.svg
new file mode 100644
index 00000000..58be6715
--- /dev/null
+++ b/public/icon/BW/SmileFaceBWIcon.svg
@@ -0,0 +1,13 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="035-smiling face" clip-path="url(#clip0_0_9822)">
+<path id="Background" d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#DDE2E9"/>
+<path id="Eye_01" d="M11.875 14.5C12.8415 14.5 13.625 13.7165 13.625 12.75C13.625 11.7835 12.8415 11 11.875 11C10.9085 11 10.125 11.7835 10.125 12.75C10.125 13.7165 10.9085 14.5 11.875 14.5Z" fill="#BABFC8"/>
+<path id="Eye_01_2" d="M20.125 14.5C21.0915 14.5 21.875 13.7165 21.875 12.75C21.875 11.7835 21.0915 11 20.125 11C19.1585 11 18.375 11.7835 18.375 12.75C18.375 13.7165 19.1585 14.5 20.125 14.5Z" fill="#BABFC8"/>
+<path id="Ellipse 22" d="M23 19.9375C21.6756 22.3914 19.0518 24.0625 16.0312 24.0625C13.0107 24.0625 10.3869 22.3914 9.0625 19.9375" stroke="#BABFC8" stroke-width="2.15054" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_0_9822">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/icon/BW/ThinkFaceBWIcon.svg b/public/icon/BW/ThinkFaceBWIcon.svg
new file mode 100644
index 00000000..2ac21adc
--- /dev/null
+++ b/public/icon/BW/ThinkFaceBWIcon.svg
@@ -0,0 +1,11 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="044-thinking">
+<path id="Background" d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#DDE2E9"/>
+<path id="Hand" d="M13.8851 27.5607L13.7023 26.6574L16.0209 26.1856C16.1937 26.1473 16.3568 26.0736 16.4997 25.9691C16.6425 25.8646 16.7622 25.7316 16.8511 25.5785C17.0344 25.2801 17.0996 24.9241 17.0339 24.5801C17.0325 24.5655 17.0325 24.5508 17.0339 24.5362C16.9512 24.2011 16.744 23.9101 16.4543 23.7225C16.3113 23.6265 16.1509 23.5597 15.9821 23.5258C15.8133 23.4919 15.6394 23.4916 15.4705 23.525L8.95714 24.8507C8.90644 24.8626 8.85379 24.8636 8.8027 24.8535C8.75162 24.8434 8.70327 24.8225 8.66091 24.7922C8.57832 24.7334 8.52037 24.6461 8.49817 24.5472C8.48473 24.4788 8.48978 24.4081 8.5128 24.3424L9.07051 22.7735V22.7588C9.13889 22.5033 9.14093 22.2346 9.07645 21.9781C9.01196 21.7216 8.88308 21.4857 8.702 21.2929C8.52092 21.1001 8.29363 20.9567 8.04165 20.8763C7.78968 20.7959 7.52134 20.7811 7.26205 20.8334C7.04878 20.8763 6.84693 20.9637 6.66958 21.0897C6.49222 21.2157 6.34334 21.3775 6.23257 21.5648L4.71485 24.1431C3.91751 25.499 3.65044 27.102 3.96514 28.6432C4.25162 30.0542 5.08673 31.2938 6.28686 32.0893C7.487 32.8848 8.95392 33.1712 10.3651 32.8855C11.5384 32.6475 12.5692 31.9532 13.2307 30.9553C13.8921 29.9574 14.1302 28.7377 13.8925 27.5643L13.8851 27.5607Z" fill="#BABFC8"/>
+<path id="Vector 8" d="M22.0234 8.5002C22.0234 8.5002 20.9334 8.70078 19.6546 9.47807C18.3759 10.2553 17.5626 10.9766 17.5626 10.9766" stroke="#BABFC8" stroke-width="1.79211" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector 9" d="M8.93741 12.5069C8.93741 12.5069 9.99721 12.2652 11.4921 12.1978C12.0193 12.1741 12.4915 12.2019 12.8819 12.248" stroke="#BABFC8" stroke-width="1.79211" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Eye_01" d="M11.375 17C12.3415 17 13.125 16.2165 13.125 15.25C13.125 14.2835 12.3415 13.5 11.375 13.5C10.4085 13.5 9.625 14.2835 9.625 15.25C9.625 16.2165 10.4085 17 11.375 17Z" fill="#BABFC8"/>
+<rect id="Rectangle 258" x="19.3125" y="12" width="2.6875" height="4.6875" rx="1.34375" fill="#BABFC8"/>
+<path id="Ellipse 22" d="M19.9136 22.0098C18.5912 21.1146 16.9376 20.6969 15.2307 20.9594C14.884 21.0127 14.5477 21.0922 14.2237 21.1954" stroke="#BABFC8" stroke-width="2.15054" stroke-linecap="round"/>
+</g>
+</svg>
diff --git a/public/icon/Color/AngryFaceColorIcon.svg b/public/icon/Color/AngryFaceColorIcon.svg
new file mode 100644
index 00000000..ca6e754a
--- /dev/null
+++ b/public/icon/Color/AngryFaceColorIcon.svg
@@ -0,0 +1,19 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 65">
+<g id="Group 51">
+<path id="Vector" d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#E46E80"/>
+<path id="Vector_2" d="M26.8385 19.0977H5.16116C4.59103 19.0977 4.12891 19.5598 4.12891 20.1299V27.3557C4.12891 27.9258 4.59109 28.388 5.16116 28.388H26.8386C27.4087 28.388 27.8708 27.9258 27.8708 27.3557V20.13C27.8708 19.5598 27.4087 19.0977 26.8385 19.0977Z" fill="#494D59"/>
+<path id="Vector_3" d="M24.7298 25.033L25.1391 24.6238C25.3407 24.4222 25.3407 24.0955 25.1391 23.894C24.9374 23.6924 24.6108 23.6924 24.4092 23.894L24 24.3032L23.6384 23.9416C24.0123 23.6587 24.2581 23.2145 24.2581 22.7105C24.2581 21.8567 23.5635 21.1621 22.7097 21.1621C21.8559 21.1621 21.1613 21.8567 21.1613 22.7105C21.1613 22.8759 21.1942 23.0322 21.2425 23.1818C20.832 23.5559 20.6041 24.1058 20.6517 24.6732C20.7304 25.5985 21.555 26.3234 22.5292 26.3234C23.0682 26.3234 23.5914 26.1132 23.9917 25.7545L24.4092 26.1721C24.5101 26.2729 24.6421 26.3233 24.7742 26.3233C24.9062 26.3233 25.0383 26.2729 25.1391 26.1721C25.3407 25.9705 25.3407 25.6439 25.1391 25.4423L24.7298 25.033ZM22.7097 22.1944C22.9944 22.1944 23.2258 22.4257 23.2258 22.7105C23.2258 22.9952 22.9944 23.2266 22.7097 23.2266C22.4249 23.2266 22.1936 22.9952 22.1936 22.7105C22.1936 22.4257 22.4249 22.1944 22.7097 22.1944ZM22.5292 25.2911C22.0942 25.2911 21.7132 24.9745 21.6799 24.5865C21.6619 24.3689 21.7349 24.1646 21.8717 24.0089C22.0499 24.1243 22.2536 24.2008 22.4719 24.2349L23.2618 25.0247C23.0554 25.1922 22.7965 25.2911 22.5292 25.2911Z" fill="#F9FAFC"/>
+<path id="Vector_4" d="M11.148 21.2651C10.9202 21.0948 10.5966 21.1401 10.4258 21.3684L7.32904 25.4975C7.15766 25.7253 7.20404 26.0489 7.43235 26.2198C7.5251 26.2893 7.63348 26.3231 7.74135 26.3231C7.8986 26.3231 8.05335 26.252 8.15466 26.1164L11.2514 21.9874C11.4227 21.7596 11.3764 21.436 11.148 21.2651Z" fill="#F9FAFC"/>
+<path id="Vector_5" d="M13.4194 24.775C13.7048 24.775 13.9356 24.5441 13.9356 24.2589V21.6782C13.9356 21.3929 13.7047 21.1621 13.4194 21.1621C13.1341 21.1621 12.9033 21.393 12.9033 21.6782V24.2589C12.9033 24.5442 13.1341 24.775 13.4194 24.775Z" fill="#F9FAFC"/>
+<path id="Vector_6" d="M13.4194 25.291C13.1341 25.291 12.9033 25.5219 12.9033 25.8071C12.9033 26.0924 13.1342 26.3233 13.4194 26.3233H13.4245C13.7098 26.3233 13.9381 26.0924 13.9381 25.8071C13.9381 25.5219 13.7047 25.291 13.4194 25.291Z" fill="#F9FAFC"/>
+<path id="Vector_7" d="M19.6129 22.1932H19.4995L19.5973 21.802C19.6668 21.5258 19.4985 21.2456 19.2218 21.1765C18.9451 21.105 18.6653 21.2748 18.5963 21.552L18.436 22.1932H17.435L17.5328 21.802C17.6024 21.5258 17.434 21.2456 17.1573 21.1765C16.8796 21.105 16.6004 21.2748 16.5318 21.552L16.3715 22.1932H16C15.7147 22.1932 15.4839 22.424 15.4839 22.7093C15.4839 22.9945 15.7148 23.2254 16 23.2254H16.1135L15.8554 24.2577H15.4839C15.1986 24.2577 14.9678 24.4885 14.9678 24.7738C14.9678 25.059 15.1986 25.2899 15.4839 25.2899H15.5973L15.4995 25.681C15.43 25.9572 15.5983 26.2375 15.875 26.3065C15.9168 26.3171 15.9592 26.3222 16.0005 26.3222C16.2319 26.3222 16.4421 26.1659 16.5005 25.931L16.6608 25.2899H17.6618L17.564 25.681C17.4945 25.9572 17.6628 26.2375 17.9395 26.3065C17.9813 26.3171 18.0237 26.3222 18.065 26.3222C18.2964 26.3222 18.5066 26.1659 18.565 25.931L18.7253 25.2899H19.0968C19.3821 25.2899 19.613 25.059 19.613 24.7738C19.613 24.4885 19.3821 24.2577 19.0968 24.2577H18.9834L19.2415 23.2254H19.613C19.8983 23.2254 20.1291 22.9945 20.1291 22.7093C20.1291 22.424 19.8982 22.1932 19.6129 22.1932ZM17.9199 24.2577H16.9189L17.177 23.2254H18.178L17.9199 24.2577Z" fill="#F9FAFC"/>
+<path id="Vector_8" d="M8.77397 22.1944C8.77397 21.6253 8.31079 21.1621 7.74172 21.1621C7.17266 21.1621 6.70947 21.6253 6.70947 22.1944C6.70947 22.7634 7.17266 23.2266 7.74172 23.2266C8.31079 23.2266 8.77397 22.7634 8.77397 22.1944Z" fill="#F9FAFC"/>
+<path id="Vector_9" d="M10.8389 24.2578C10.2698 24.2578 9.80664 24.721 9.80664 25.2901C9.80664 25.8591 10.2698 26.3223 10.8389 26.3223C11.408 26.3223 11.8711 25.8591 11.8711 25.2901C11.8711 24.721 11.408 24.2578 10.8389 24.2578Z" fill="#F9FAFC"/>
+</g>
+<path id="Vector 8 (Stroke)" d="M23.8412 8.71678C23.6652 8.46134 23.3727 8.4522 23.0599 8.5721C23.0599 8.5721 21.6467 9.2191 20.7788 9.43949C19.911 9.65988 18.4976 9.8635 18.4976 9.8635C18.2141 9.91933 17.8926 10.1629 17.9113 10.4729C17.9299 10.783 18.1963 11.0193 18.5064 11.0007L18.5649 10.9966C18.6005 10.9939 18.6518 10.9897 18.7174 10.9835C18.8486 10.9713 19.0371 10.9512 19.2716 10.9199C19.7402 10.8572 20.395 10.7489 21.1449 10.566C21.9191 10.3772 22.5494 10.1154 22.9883 9.89956C23.208 9.7915 23.3808 9.69447 23.5007 9.62304C23.5606 9.58731 23.6075 9.55792 23.6405 9.53669L23.6973 9.49914C23.9531 9.32285 24.0175 8.97258 23.8412 8.71678Z" fill="#3E414D"/>
+<path id="Vector 8 (Stroke)_2" d="M8.1451 8.71678C8.32114 8.46134 8.61358 8.4522 8.9264 8.5721C8.9264 8.5721 10.3396 9.2191 11.2075 9.43949C12.0754 9.65988 13.4887 9.8635 13.4887 9.8635C13.7722 9.91933 14.0937 10.1629 14.0751 10.4729C14.0565 10.783 13.79 11.0193 13.4799 11.0007L13.4214 10.9966C13.3858 10.9939 13.3345 10.9897 13.2689 10.9835C13.1377 10.9713 12.9492 10.9512 12.7147 10.9199C12.2461 10.8572 11.5914 10.7489 10.8414 10.566C10.0672 10.3772 9.43692 10.1154 8.99808 9.89956C8.77833 9.7915 8.60557 9.69447 8.48568 9.62304C8.4257 9.58731 8.37885 9.55792 8.34586 9.53669L8.28905 9.49914C8.03326 9.32285 7.96881 8.97258 8.1451 8.71678Z" fill="#3E414D"/>
+<path id="Eye_01" d="M11.875 16C12.8415 16 13.625 15.2165 13.625 14.25C13.625 13.2835 12.8415 12.5 11.875 12.5C10.9085 12.5 10.125 13.2835 10.125 14.25C10.125 15.2165 10.9085 16 11.875 16Z" fill="#3E414D"/>
+<path id="Eye_01_2" d="M20.125 16C21.0915 16 21.875 15.2165 21.875 14.25C21.875 13.2835 21.0915 12.5 20.125 12.5C19.1585 12.5 18.375 13.2835 18.375 14.25C18.375 15.2165 19.1585 16 20.125 16Z" fill="#3E414D"/>
+</g>
+</svg>
diff --git a/public/icon/Color/HeartFaceColorIcon.svg b/public/icon/Color/HeartFaceColorIcon.svg
new file mode 100644
index 00000000..9db0bbd0
--- /dev/null
+++ b/public/icon/Color/HeartFaceColorIcon.svg
@@ -0,0 +1,13 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="012-heart face" clip-path="url(#clip0_0_9582)">
+<path id="Background" d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#FBC85B"/>
+<path id="Mouth" d="M21.8103 21.7776C21.7958 22.5118 21.1514 24.2955 18.8702 25.4008C17.9754 25.8363 16.9941 26.0625 16 26.0625C15.0059 26.0625 14.0246 25.8363 13.1298 25.4008C10.8446 24.2995 10.2042 22.5118 10.1897 21.7776C10.1633 21.3654 10.3742 20.8724 10.9329 21.0301C11.8449 21.3641 13.276 21.5602 14.3857 21.6623C15.4595 21.7643 16.5405 21.7643 17.6143 21.6623C18.724 21.5562 20.1551 21.3641 21.0671 21.0301C21.6258 20.8724 21.8367 21.3654 21.8103 21.7776Z" fill="#9A695E"/>
+<path id="Eye 02" d="M17.6765 10.0602C17.445 10.9293 17.5549 11.8106 18.0259 12.8363C18.4454 13.7541 19.1351 14.755 19.9347 15.9136C20.2076 16.3094 20.5152 16.759 20.8337 17.2327C20.9183 17.358 21.045 17.4489 21.1908 17.4887C21.3376 17.5292 21.4941 17.5138 21.6301 17.4454C22.144 17.1927 22.6254 16.9533 23.0699 16.753C24.3416 16.1485 25.4394 15.6267 26.2615 15.0434C27.1817 14.3889 27.718 13.6816 27.9517 12.8119C28.1824 12.0057 28.0999 11.1421 27.7208 10.3941C27.5366 10.0394 27.2798 9.72749 26.9673 9.47843C26.6547 9.22937 26.2933 9.04876 25.9065 8.94833C25.3195 8.78754 24.6951 8.83233 24.1371 9.07528C23.8354 9.20246 23.5537 9.37284 23.301 9.58109C23.1863 9.27451 23.0285 8.98584 22.8324 8.7238C22.4699 8.23815 21.9538 7.88942 21.368 7.73432C20.9825 7.62864 20.5793 7.60469 20.1841 7.66401C19.7889 7.72332 19.4104 7.86459 19.073 8.07874C18.3752 8.54044 17.8767 9.2478 17.6765 10.0602Z" fill="#E46E80"/>
+<path id="Eye 01" d="M12.9234 8.08763C12.586 7.87347 12.2076 7.73221 11.8123 7.67289C11.4171 7.61358 11.0139 7.63753 10.6284 7.7432C10.0426 7.89831 9.52652 8.24704 9.16404 8.73269C8.96788 8.99473 8.81008 9.2834 8.69538 9.58997C8.44269 9.38173 8.16105 9.21135 7.85932 9.08417C7.30127 8.84122 6.67693 8.79642 6.08991 8.95721C5.70309 9.05765 5.34168 9.23825 5.02912 9.48731C4.71657 9.73637 4.45983 10.0483 4.27557 10.403C3.89648 11.151 3.81404 12.0146 4.04475 12.8208C4.27837 13.6905 4.81473 14.3977 5.73491 15.0523C6.55699 15.6355 7.65476 16.1574 8.9265 16.7619C9.36037 16.9683 9.85241 17.2016 10.3663 17.4543C10.5023 17.5226 10.6588 17.5381 10.8056 17.4976C10.9514 17.4577 11.0781 17.3669 11.1627 17.2416C11.4812 16.7679 11.7888 16.3183 12.0617 15.9225C12.8613 14.7639 13.5426 13.7607 13.9706 12.8452C14.4415 11.8195 14.5514 10.9382 14.3199 10.0691C14.1198 9.25669 13.6212 8.54933 12.9234 8.08763Z" fill="#E46E80"/>
+</g>
+<defs>
+<clipPath id="clip0_0_9582">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/icon/Color/SadFaceColorIcon.svg b/public/icon/Color/SadFaceColorIcon.svg
new file mode 100644
index 00000000..58e96e31
--- /dev/null
+++ b/public/icon/Color/SadFaceColorIcon.svg
@@ -0,0 +1,14 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="034-sad" clip-path="url(#clip0_0_9852)">
+<path id="Background" d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#FBC85B"/>
+<path id="Watter Drop" d="M12.8861 23.0795C12.8861 24.9263 11.4964 26.4221 9.77752 26.4221C8.05866 26.4221 6.66895 24.9263 6.66895 23.0795C6.66895 21.6166 8.6054 18.967 9.4118 17.9156C9.45257 17.86 9.50584 17.8148 9.56731 17.7837C9.62878 17.7526 9.69672 17.7363 9.76563 17.7363C9.83454 17.7363 9.90248 17.7526 9.96395 17.7837C10.0254 17.8148 10.0787 17.86 10.1195 17.9156C10.9496 18.967 12.8861 21.6221 12.8861 23.0795Z" fill="#5195EE"/>
+<path id="Eye_01" d="M11.875 14.5C12.8415 14.5 13.625 13.7165 13.625 12.75C13.625 11.7835 12.8415 11 11.875 11C10.9085 11 10.125 11.7835 10.125 12.75C10.125 13.7165 10.9085 14.5 11.875 14.5Z" fill="#3E414D"/>
+<path id="Eye_01_2" d="M20.125 14.5C21.0915 14.5 21.875 13.7165 21.875 12.75C21.875 11.7835 21.0915 11 20.125 11C19.1585 11 18.375 11.7835 18.375 12.75C18.375 13.7165 19.1585 14.5 20.125 14.5Z" fill="#3E414D"/>
+<path id="Ellipse 22" d="M20.5 23.375C19.3291 22.2893 17.7581 21.625 16.0312 21.625C15.6804 21.625 15.3359 21.6524 15 21.7052" stroke="#9A695E" stroke-width="2.15054" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_0_9852">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/icon/Color/SmileFaceColorIcon.svg b/public/icon/Color/SmileFaceColorIcon.svg
new file mode 100644
index 00000000..3e66c738
--- /dev/null
+++ b/public/icon/Color/SmileFaceColorIcon.svg
@@ -0,0 +1,13 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="035-smiling face" clip-path="url(#clip0_0_9814)">
+<path id="Background" d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#FBC85B"/>
+<path id="Eye_01" d="M11.875 14.5C12.8415 14.5 13.625 13.7165 13.625 12.75C13.625 11.7835 12.8415 11 11.875 11C10.9085 11 10.125 11.7835 10.125 12.75C10.125 13.7165 10.9085 14.5 11.875 14.5Z" fill="#3E414D"/>
+<path id="Eye_01_2" d="M20.125 14.5C21.0915 14.5 21.875 13.7165 21.875 12.75C21.875 11.7835 21.0915 11 20.125 11C19.1585 11 18.375 11.7835 18.375 12.75C18.375 13.7165 19.1585 14.5 20.125 14.5Z" fill="#3E414D"/>
+<path id="Ellipse 22" d="M23 19.9375C21.6756 22.3914 19.0518 24.0625 16.0312 24.0625C13.0107 24.0625 10.3869 22.3914 9.0625 19.9375" stroke="#9A695E" stroke-width="2.15054" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_0_9814">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/icon/Color/ThinkFaceColorIcon.svg b/public/icon/Color/ThinkFaceColorIcon.svg
new file mode 100644
index 00000000..0e2bab7d
--- /dev/null
+++ b/public/icon/Color/ThinkFaceColorIcon.svg
@@ -0,0 +1,11 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="044-thinking">
+<path id="Background" d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#FBC85B"/>
+<path id="Hand" d="M13.8851 27.5607L13.7023 26.6574L16.0209 26.1856C16.1937 26.1473 16.3568 26.0736 16.4997 25.9691C16.6425 25.8646 16.7622 25.7316 16.8511 25.5785C17.0344 25.2801 17.0996 24.9241 17.0339 24.5801C17.0325 24.5655 17.0325 24.5508 17.0339 24.5362C16.9512 24.2011 16.744 23.9101 16.4543 23.7225C16.3113 23.6265 16.1509 23.5597 15.9821 23.5258C15.8133 23.4919 15.6394 23.4916 15.4705 23.525L8.95714 24.8507C8.90644 24.8626 8.85379 24.8636 8.8027 24.8535C8.75162 24.8434 8.70327 24.8225 8.66091 24.7922C8.57832 24.7334 8.52037 24.6461 8.49817 24.5472C8.48473 24.4788 8.48978 24.4081 8.5128 24.3424L9.07051 22.7735V22.7588C9.13889 22.5033 9.14093 22.2346 9.07645 21.9781C9.01196 21.7216 8.88308 21.4857 8.702 21.2929C8.52092 21.1001 8.29363 20.9567 8.04165 20.8763C7.78968 20.7959 7.52134 20.7811 7.26205 20.8334C7.04878 20.8763 6.84693 20.9637 6.66958 21.0897C6.49222 21.2157 6.34334 21.3775 6.23257 21.5648L4.71485 24.1431C3.91751 25.499 3.65044 27.102 3.96514 28.6432C4.25162 30.0542 5.08673 31.2938 6.28686 32.0893C7.487 32.8848 8.95392 33.1712 10.3651 32.8855C11.5384 32.6475 12.5692 31.9532 13.2307 30.9553C13.8921 29.9574 14.1302 28.7377 13.8925 27.5643L13.8851 27.5607Z" fill="#E8AA26"/>
+<path id="Vector 8" d="M22.0234 8.5002C22.0234 8.5002 20.9334 8.70078 19.6546 9.47807C18.3759 10.2553 17.5626 10.9766 17.5626 10.9766" stroke="#3E414D" stroke-width="1.79211" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector 9" d="M8.93741 12.5069C8.93741 12.5069 9.99721 12.2652 11.4921 12.1978C12.0193 12.1741 12.4915 12.2019 12.8819 12.248" stroke="#3E414D" stroke-width="1.79211" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Eye_01" d="M11.375 17C12.3415 17 13.125 16.2165 13.125 15.25C13.125 14.2835 12.3415 13.5 11.375 13.5C10.4085 13.5 9.625 14.2835 9.625 15.25C9.625 16.2165 10.4085 17 11.375 17Z" fill="#3E414D"/>
+<rect id="Rectangle 258" x="19.3125" y="12" width="2.6875" height="4.6875" rx="1.34375" fill="#494D59"/>
+<path id="Ellipse 22" d="M19.9136 22.0098C18.5912 21.1146 16.9376 20.6969 15.2307 20.9594C14.884 21.0127 14.5477 21.0922 14.2237 21.1954" stroke="#9A695E" stroke-width="2.15054" stroke-linecap="round"/>
+</g>
+</svg>
diff --git a/public/icon/arrow-bottom-icon.svg b/public/icon/arrow-bottom-icon.svg
new file mode 100644
index 00000000..8e0e4d20
--- /dev/null
+++ b/public/icon/arrow-bottom-icon.svg
@@ -0,0 +1,5 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ic/chevron-down/md">
+<path id="Vector" d="M28 13L18 23L8 13" stroke="#C4C4C4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/public/icon/arrow-left-icon.svg b/public/icon/arrow-left-icon.svg
new file mode 100644
index 00000000..a54a7cb4
--- /dev/null
+++ b/public/icon/arrow-left-icon.svg
@@ -0,0 +1,5 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ic/chevron-left/md">
+<path id="Vector" d="M23 28L13 18L23 8" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/public/icon/arrow-right-icon.svg b/public/icon/arrow-right-icon.svg
new file mode 100644
index 00000000..dc5959d5
--- /dev/null
+++ b/public/icon/arrow-right-icon.svg
@@ -0,0 +1,5 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ic/chevron-right/md">
+<path id="Vector" d="M13 8L23 18L13 28" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/public/icon/profile-icon.svg b/public/icon/profile-icon.svg
new file mode 100644
index 00000000..e7109ea6
--- /dev/null
+++ b/public/icon/profile-icon.svg
@@ -0,0 +1,6 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ic/search/md">
+<path id="Vector" d="M28 29.25V26.75C28 25.4239 27.4732 24.1521 26.5355 23.2145C25.5978 22.2768 24.3261 21.75 23 21.75H13C11.6739 21.75 10.4021 22.2768 9.46447 23.2145C8.52678 24.1521 8 25.4239 8 26.75V29.25" stroke="#050505" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M18 16.75C20.7614 16.75 23 14.5114 23 11.75C23 8.98858 20.7614 6.75 18 6.75C15.2386 6.75 13 8.98858 13 11.75C13 14.5114 15.2386 16.75 18 16.75Z" stroke="#050505" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/public/icon/search-icon.svg b/public/icon/search-icon.svg
new file mode 100644
index 00000000..02de48b2
--- /dev/null
+++ b/public/icon/search-icon.svg
@@ -0,0 +1,6 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ic/search/md">
+<path id="Vector" d="M16.75 26.75C22.2728 26.75 26.75 22.2728 26.75 16.75C26.75 11.2272 22.2728 6.75 16.75 6.75C11.2272 6.75 6.75 11.2272 6.75 16.75C6.75 22.2728 11.2272 26.75 16.75 26.75Z" stroke="#050505" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M29.25 29.25L23.8125 23.8125" stroke="#050505" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/public/icon/share-icon.svg b/public/icon/share-icon.svg
new file mode 100644
index 00000000..4d1c6d03
--- /dev/null
+++ b/public/icon/share-icon.svg
@@ -0,0 +1,7 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ic/share/md">
+<path id="Vector" d="M9 18V26C9 26.5304 9.23705 27.0391 9.65901 27.4142C10.081 27.7893 10.6533 28 11.25 28H24.75C25.3467 28 25.919 27.7893 26.341 27.4142C26.7629 27.0391 27 26.5304 27 26V18" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M22 11L18 7L14 11" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M18 7V21" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/public/lg.svg b/public/lg.svg
new file mode 100644
index 00000000..a4d3364f
--- /dev/null
+++ b/public/lg.svg
@@ -0,0 +1,5 @@
+<svg width="172" height="48" viewBox="0 0 172 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42 14L25.9583 6.20066C25.6963 6.07327 25.3918 6.06648 25.1243 6.18205L7.03437 14L25.0813 22.7743C25.3726 22.9159 25.7144 22.9077 25.9985 22.7523L42 14Z" fill="#2B2B2B"/>
+<path d="M7.03437 14L25.0813 22.7743C25.3726 22.9159 25.7144 22.9077 25.9985 22.7523L42 14L25.9583 6.20066C25.6963 6.07327 25.3918 6.06648 25.1243 6.18205L7.03437 14ZM7.03437 14C7.03437 14 6.08474 16.3916 6.00597 18C5.90857 19.989 7.03437 23 7.03437 23M42 23L25.9985 31.7523C25.7144 31.9077 25.3726 31.9159 25.0813 31.7743L7.03437 23M7.03437 23C7.03437 23 6.00597 26.0087 6.00597 28C6.00597 29.9913 7.03437 33 7.03437 33L25.0813 41.7743C25.3726 41.9159 25.7144 41.9077 25.9985 41.7523L42 33" stroke="#2B2B2B" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M69.208 18.712H63.15V21.988H68.87V26.304H63.15V29.684H69.208V34H58.054V14.396H69.208V18.712ZM83.0741 27.37C83.0741 26.954 82.9961 26.564 82.8401 26.2C82.7015 25.8187 82.4935 25.4893 82.2161 25.212C81.9388 24.9347 81.6095 24.718 81.2281 24.562C80.8641 24.3887 80.4655 24.302 80.0321 24.302C79.6161 24.302 79.2261 24.38 78.8621 24.536C78.4981 24.692 78.1775 24.9087 77.9001 25.186C77.6401 25.4633 77.4235 25.7927 77.2501 26.174C77.0941 26.538 77.0161 26.928 77.0161 27.344C77.0161 27.76 77.0941 28.15 77.2501 28.514C77.4061 28.878 77.6228 29.1987 77.9001 29.476C78.1775 29.736 78.4981 29.9527 78.8621 30.126C79.2435 30.282 79.6421 30.36 80.0581 30.36C80.4741 30.36 80.8641 30.282 81.2281 30.126C81.5921 29.97 81.9041 29.7533 82.1641 29.476C82.4415 29.1987 82.6581 28.878 82.8141 28.514C82.9875 28.15 83.0741 27.7687 83.0741 27.37ZM77.1461 40.656H72.4401V20.662H77.1461V22.144C78.1515 20.8787 79.5208 20.246 81.2541 20.246C82.2075 20.246 83.0915 20.4367 83.9061 20.818C84.7381 21.182 85.4575 21.6847 86.0641 22.326C86.6708 22.9673 87.1388 23.7213 87.4681 24.588C87.8148 25.4547 87.9881 26.382 87.9881 27.37C87.9881 28.358 87.8148 29.2767 87.4681 30.126C87.1388 30.9753 86.6708 31.7207 86.0641 32.362C85.4748 33.0033 84.7728 33.506 83.9581 33.87C83.1435 34.234 82.2595 34.416 81.3061 34.416C79.6421 34.416 78.2555 33.844 77.1461 32.7V40.656ZM95.3766 20.662V34H90.6706V20.662H95.3766ZM90.3586 15.54C90.3586 15.176 90.4279 14.838 90.5666 14.526C90.7053 14.1967 90.8959 13.9107 91.1386 13.668C91.3813 13.4253 91.6586 13.2347 91.9706 13.096C92.2999 12.9573 92.6466 12.888 93.0106 12.888C93.3746 12.888 93.7126 12.9573 94.0246 13.096C94.3539 13.2347 94.6399 13.4253 94.8826 13.668C95.1253 13.9107 95.3159 14.1967 95.4546 14.526C95.5933 14.838 95.6626 15.176 95.6626 15.54C95.6626 15.904 95.5933 16.2507 95.4546 16.58C95.3159 16.892 95.1253 17.1693 94.8826 17.412C94.6399 17.6547 94.3539 17.8453 94.0246 17.984C93.7126 18.1227 93.3746 18.192 93.0106 18.192C92.6466 18.192 92.2999 18.1227 91.9706 17.984C91.6586 17.8453 91.3813 17.6547 91.1386 17.412C90.8959 17.1693 90.7053 16.892 90.5666 16.58C90.4279 16.2507 90.3586 15.904 90.3586 15.54ZM102.96 27.266C102.96 27.6993 103.038 28.1067 103.194 28.488C103.35 28.852 103.558 29.1727 103.818 29.45C104.096 29.7273 104.416 29.944 104.78 30.1C105.162 30.256 105.569 30.334 106.002 30.334C106.418 30.334 106.808 30.256 107.172 30.1C107.554 29.944 107.874 29.7273 108.134 29.45C108.412 29.1727 108.628 28.852 108.784 28.488C108.958 28.1067 109.044 27.708 109.044 27.292C109.044 26.8587 108.958 26.46 108.784 26.096C108.628 25.732 108.412 25.4113 108.134 25.134C107.857 24.8567 107.528 24.64 107.146 24.484C106.782 24.328 106.401 24.25 106.002 24.25C105.586 24.25 105.196 24.3367 104.832 24.51C104.468 24.666 104.148 24.8827 103.87 25.16C103.593 25.42 103.368 25.732 103.194 26.096C103.038 26.46 102.96 26.85 102.96 27.266ZM113.516 20.662V33.09C113.516 33.8353 113.473 34.5027 113.386 35.092C113.3 35.6813 113.178 36.2013 113.022 36.652C112.814 37.224 112.485 37.7527 112.034 38.238C111.601 38.7407 111.072 39.174 110.448 39.538C109.824 39.902 109.114 40.188 108.316 40.396C107.536 40.604 106.687 40.708 105.768 40.708C104.728 40.708 103.775 40.578 102.908 40.318C102.042 40.058 101.279 39.694 100.62 39.226C99.9791 38.7753 99.4505 38.238 99.0345 37.614C98.6185 37.0073 98.3411 36.34 98.2025 35.612H103.506C103.836 36.496 104.581 36.938 105.742 36.938C106.73 36.938 107.484 36.6607 108.004 36.106C108.542 35.5513 108.81 34.78 108.81 33.792V32.518C108.464 32.8473 108.126 33.1247 107.796 33.35C107.484 33.558 107.164 33.7313 106.834 33.87C106.505 34.0087 106.158 34.104 105.794 34.156C105.43 34.2253 105.032 34.26 104.598 34.26C103.645 34.26 102.77 34.0953 101.972 33.766C101.175 33.4367 100.482 32.9773 99.8925 32.388C99.3205 31.7987 98.8698 31.0967 98.5405 30.282C98.2285 29.45 98.0725 28.5313 98.0725 27.526C98.0725 26.5033 98.2458 25.5587 98.5925 24.692C98.9391 23.808 99.4071 23.0453 99.9965 22.404C100.603 21.7453 101.314 21.234 102.128 20.87C102.96 20.4887 103.862 20.298 104.832 20.298C106.41 20.298 107.736 20.8873 108.81 22.066V20.662H113.516ZM117.178 20.662H121.884V22.846C122.387 22.0487 123.002 21.442 123.73 21.026C124.458 20.5927 125.308 20.376 126.278 20.376C126.4 20.376 126.53 20.376 126.668 20.376C126.824 20.376 126.998 20.3933 127.188 20.428V24.926C126.564 24.614 125.888 24.458 125.16 24.458C124.068 24.458 123.245 24.7873 122.69 25.446C122.153 26.0873 121.884 27.032 121.884 28.28V34H117.178V20.662ZM133.81 27.292C133.81 27.7253 133.888 28.1327 134.044 28.514C134.2 28.878 134.408 29.1987 134.668 29.476C134.945 29.7533 135.266 29.97 135.63 30.126C136.011 30.282 136.419 30.36 136.852 30.36C137.268 30.36 137.658 30.282 138.022 30.126C138.403 29.97 138.724 29.7533 138.984 29.476C139.261 29.1987 139.478 28.878 139.634 28.514C139.807 28.15 139.894 27.76 139.894 27.344C139.894 26.928 139.807 26.538 139.634 26.174C139.478 25.7927 139.261 25.4633 138.984 25.186C138.724 24.9087 138.403 24.692 138.022 24.536C137.658 24.38 137.268 24.302 136.852 24.302C136.419 24.302 136.011 24.38 135.63 24.536C135.266 24.692 134.945 24.9087 134.668 25.186C134.408 25.4633 134.2 25.784 134.044 26.148C133.888 26.4947 133.81 26.876 133.81 27.292ZM139.738 20.662H144.47V34H139.738V32.518C138.733 33.7833 137.372 34.416 135.656 34.416C134.685 34.416 133.793 34.2427 132.978 33.896C132.163 33.532 131.453 33.0293 130.846 32.388C130.239 31.7467 129.763 30.9927 129.416 30.126C129.087 29.2593 128.922 28.3147 128.922 27.292C128.922 26.3387 129.087 25.4373 129.416 24.588C129.745 23.7213 130.205 22.9673 130.794 22.326C131.383 21.6847 132.085 21.182 132.9 20.818C133.715 20.4367 134.616 20.246 135.604 20.246C137.268 20.246 138.646 20.8267 139.738 21.988V20.662ZM147.673 20.662H152.379V22.3C153.661 21.0693 155.1 20.454 156.695 20.454C158.671 20.454 160.179 21.286 161.219 22.95C162.276 21.2687 163.784 20.428 165.743 20.428C166.367 20.428 166.956 20.5233 167.511 20.714C168.065 20.8873 168.542 21.1733 168.941 21.572C169.339 21.9533 169.651 22.456 169.877 23.08C170.119 23.704 170.241 24.458 170.241 25.342V34H165.535V27.422C165.535 26.746 165.483 26.1913 165.379 25.758C165.292 25.3247 165.153 24.9867 164.963 24.744C164.789 24.5013 164.581 24.3367 164.339 24.25C164.096 24.1633 163.836 24.12 163.559 24.12C162.051 24.12 161.297 25.2207 161.297 27.422V34H156.591V27.422C156.591 26.746 156.547 26.1913 156.461 25.758C156.374 25.3073 156.244 24.952 156.071 24.692C155.915 24.432 155.707 24.2587 155.447 24.172C155.187 24.068 154.883 24.016 154.537 24.016C154.242 24.016 153.965 24.0593 153.705 24.146C153.445 24.2327 153.211 24.406 153.003 24.666C152.812 24.9087 152.656 25.2553 152.535 25.706C152.431 26.1393 152.379 26.7113 152.379 27.422V34H147.673V20.662Z" fill="#2B2B2B"/>
+</svg>
diff --git a/public/logo-google.svg b/public/logo-google.svg
new file mode 100644
index 00000000..5b169484
--- /dev/null
+++ b/public/logo-google.svg
@@ -0,0 +1,15 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 59.25C3.105 59.25 0.75 56.895 0.75 54V6C0.75 3.105 3.105 0.75 6 0.75H54C56.895 0.75 59.25 3.105 59.25 6V54C59.25 56.895 56.895 59.25 54 59.25H6Z" fill="#F5F7FA"/>
+<path d="M54 1.5C56.475 1.5 58.5 3.525 58.5 6V54C58.5 56.475 56.475 58.5 54 58.5H6C3.525 58.5 1.5 56.475 1.5 54V6C1.5 3.525 3.525 1.5 6 1.5H54ZM54 0H6C2.7 0 0 2.7 0 6V54C0 57.3 2.7 60 6 60H54C57.3 60 60 57.3 60 54V6C60 2.7 57.3 0 54 0Z" fill="#E6E6EA"/>
+<g clip-path="url(#clip0_2103_2506)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.5001 30.3072C43.5012 29.381 43.4174 28.4565 43.2496 27.5449H30.272V32.7669H37.6861C37.5322 33.592 37.2093 34.378 36.7369 35.0775C36.2645 35.777 35.6524 36.3754 34.9374 36.8366V40.2246H39.3888C41.9934 37.8744 43.4962 34.4126 43.4962 30.3047L43.5001 30.3072Z" fill="#3E82F1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.2759 43.4993C33.9953 43.4993 37.1139 42.2911 39.3927 40.2295L34.9414 36.8415C33.7072 37.6516 32.1291 38.1311 30.2759 38.1311C26.6876 38.1311 23.6508 35.7554 22.5685 32.5645H17.9653V36.0631C19.112 38.2993 20.8706 40.1789 23.0445 41.4921C25.2185 42.8053 27.7222 43.5002 30.2759 43.4993Z" fill="#32A753"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.5683 32.5633C21.9921 30.9003 21.9921 29.0973 22.5683 27.4342V23.9355H17.9651C17.0017 25.8173 16.5 27.8935 16.5 29.9988C16.5 32.1041 17.0017 34.1803 17.9651 36.062L22.5683 32.5633Z" fill="#F9BB00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.2758 21.8682C32.299 21.8682 34.1146 22.5499 35.5421 23.8878L39.4925 20.0152C37.1072 17.8366 33.9887 16.5 30.2784 16.5C27.7246 16.4991 25.2209 17.194 23.047 18.5072C20.873 19.8203 19.1145 21.7 17.9678 23.9361L22.5709 27.4348C23.6533 24.2439 26.6901 21.8682 30.2784 21.8682H30.2758Z" fill="#E74133"/>
+</g>
+<defs>
+<clipPath id="clip0_2103_2506">
+<rect width="27" height="27" fill="white" transform="translate(16.5 16.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/logo-kakao.svg b/public/logo-kakao.svg
new file mode 100644
index 00000000..f546e64d
--- /dev/null
+++ b/public/logo-kakao.svg
@@ -0,0 +1,13 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 59.25C3.105 59.25 0.75 56.895 0.75 54V6C0.75 3.105 3.105 0.75 6 0.75H54C56.895 0.75 59.25 3.105 59.25 6V54C59.25 56.895 56.895 59.25 54 59.25H6Z" fill="#F5F7FA"/>
+<path d="M54 1.5C56.475 1.5 58.5 3.525 58.5 6V54C58.5 56.475 56.475 58.5 54 58.5H6C3.525 58.5 1.5 56.475 1.5 54V6C1.5 3.525 3.525 1.5 6 1.5H54ZM54 0H6C2.7 0 0 2.7 0 6V54C0 57.3 2.7 60 6 60H54C57.3 60 60 57.3 60 54V6C60 2.7 57.3 0 54 0Z" fill="#E6E6EA"/>
+<g clip-path="url(#clip0_2103_2515)">
+<path d="M25.9629 30.5875H27.6908L26.8268 28.1934L25.9629 30.5875Z" fill="#331D1E"/>
+<path d="M30 18C21.7154 18 15 23.164 15 29.5349C15 33.6536 17.8082 37.2716 22.0312 39.3085C21.8019 40.0808 20.5543 44.2798 20.5053 44.6103C20.5053 44.6103 20.475 44.8579 20.6394 44.9522C20.6944 44.9792 20.7545 44.9951 20.816 44.9987C20.8775 45.0023 20.9392 44.9937 20.9971 44.9733C21.4702 44.9086 26.4779 41.4833 27.3433 40.8939C28.2235 41.0131 29.1113 41.0718 30 41.0697C38.2846 41.0697 45 35.9058 45 29.5349C45 23.164 38.2846 18 30 18ZM22.5764 27.7441C22.5577 29.3759 22.5909 31.0921 22.5635 32.6985C22.5548 33.2119 22.2519 33.3653 21.8423 33.5116C21.796 33.5275 21.7462 33.5309 21.6981 33.5214C21.2293 33.4314 20.8558 33.2682 20.8442 32.6999C20.8111 31.0949 20.8543 29.3759 20.8313 27.7441C20.4346 27.7287 19.8692 27.7596 19.5014 27.7441C18.9909 27.7118 18.6361 27.3953 18.6577 26.924C18.6793 26.4528 18.9375 26.1138 19.5101 26.1053C20.863 26.0857 22.5389 26.0857 23.8918 26.1053C24.4688 26.1138 24.7255 26.4542 24.7428 26.924C24.7601 27.3939 24.4111 27.7118 23.9019 27.7441C23.5385 27.7596 22.9745 27.7287 22.5764 27.7441ZM29.8457 33.4342C29.6727 33.511 29.4848 33.5508 29.2947 33.551C28.9341 33.551 28.6587 33.4103 28.5736 33.1782L28.1409 32.0838H25.5072L25.0745 33.1782C24.9909 33.4075 24.7154 33.551 24.3534 33.551C24.1637 33.551 23.9763 33.5111 23.8038 33.4342C23.5644 33.3273 23.3351 33.0319 23.5976 32.2357L25.6731 26.9212C25.7601 26.6871 25.916 26.4833 26.1212 26.3351C26.3265 26.187 26.5719 26.1012 26.8269 26.0885C27.0817 26.1026 27.3267 26.1891 27.5317 26.3373C27.7367 26.4855 27.8928 26.689 27.9808 26.9226L30.049 32.2343C30.313 33.0319 30.0837 33.3329 29.8457 33.4342ZM34.2188 33.4342H31.4423C31.2273 33.4384 31.0193 33.3593 30.8639 33.2143C30.7085 33.0693 30.6183 32.8702 30.613 32.6605V26.9325C30.6222 26.71 30.7193 26.4996 30.884 26.3454C31.0486 26.1911 31.2681 26.105 31.4964 26.105C31.7247 26.105 31.9442 26.1911 32.1088 26.3454C32.2735 26.4996 32.3706 26.71 32.3798 26.9325V31.8911H34.2188C34.3269 31.8847 34.4353 31.9 34.5373 31.936C34.6392 31.972 34.7325 32.0279 34.8114 32.1004C34.8903 32.1729 34.9532 32.2603 34.9962 32.3574C35.0391 32.4544 35.0613 32.559 35.0613 32.6647C35.0613 32.7705 35.0391 32.8751 34.9962 32.9721C34.9532 33.0692 34.8903 33.1566 34.8114 33.2291C34.7325 33.3015 34.6392 33.3575 34.5373 33.3935C34.4353 33.4295 34.3269 33.4448 34.2188 33.4384V33.4342ZM40.9976 32.7984C40.9751 32.9649 40.9022 33.121 40.7881 33.2469C40.6741 33.3727 40.5242 33.4625 40.3576 33.5048C40.1909 33.5471 40.0152 33.54 39.8527 33.4843C39.6903 33.4286 39.5485 33.3269 39.4457 33.1922L37.4163 30.5716L37.1163 30.8642V32.7055C37.1163 32.9294 37.0252 33.1441 36.8629 33.3023C36.7006 33.4606 36.4805 33.5495 36.251 33.5495C36.0214 33.5495 35.8013 33.4606 35.639 33.3023C35.4768 33.1441 35.3856 32.9294 35.3856 32.7055V26.9381C35.3856 26.7143 35.4768 26.4996 35.639 26.3413C35.8013 26.183 36.0214 26.0941 36.251 26.0941C36.4805 26.0941 36.7006 26.183 36.8629 26.3413C37.0252 26.4996 37.1163 26.7143 37.1163 26.9381V28.7471L39.5308 26.3923C39.594 26.3314 39.669 26.2833 39.7515 26.2509C39.8339 26.2186 39.9222 26.2025 40.0111 26.2038C40.2272 26.2093 40.4335 26.2925 40.5906 26.4374C40.7477 26.5823 40.8443 26.7786 40.862 26.9887C40.8698 27.0825 40.857 27.1768 40.8244 27.2654C40.7918 27.3539 40.7402 27.4346 40.6731 27.5022L38.6971 29.4251L40.8274 32.178C40.9653 32.3566 41.025 32.5812 40.9933 32.8026L40.9976 32.7984Z" fill="#331D1E"/>
+</g>
+<defs>
+<clipPath id="clip0_2103_2515">
+<rect width="30" height="27" fill="white" transform="translate(15 18)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/logo-naver.svg b/public/logo-naver.svg
new file mode 100644
index 00000000..dbec93dd
--- /dev/null
+++ b/public/logo-naver.svg
@@ -0,0 +1,5 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 59.25C3.105 59.25 0.75 56.895 0.75 54V6C0.75 3.105 3.105 0.75 6 0.75H54C56.895 0.75 59.25 3.105 59.25 6V54C59.25 56.895 56.895 59.25 54 59.25H6Z" fill="#F5F7FA"/>
+<path d="M54 1.5C56.475 1.5 58.5 3.525 58.5 6V54C58.5 56.475 56.475 58.5 54 58.5H6C3.525 58.5 1.5 56.475 1.5 54V6C1.5 3.525 3.525 1.5 6 1.5H54ZM54 0H6C2.7 0 0 2.7 0 6V54C0 57.3 2.7 60 6 60H54C57.3 60 60 57.3 60 54V6C60 2.7 57.3 0 54 0Z" fill="#E6E6EA"/>
+<path d="M34.0952 30.8096L25.5752 18.5996H18.5103V41.3996H25.9052V29.1896L34.4252 41.3996H41.4902V18.5996H34.0952V30.8096Z" fill="#03C75A"/>
+</svg>
diff --git a/public/md.svg b/public/md.svg
new file mode 100644
index 00000000..9ada4505
--- /dev/null
+++ b/public/md.svg
@@ -0,0 +1,6 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ic/search/md">
+<path id="Vector" d="M16.75 26.75C22.2728 26.75 26.75 22.2728 26.75 16.75C26.75 11.2272 22.2728 6.75 16.75 6.75C11.2272 6.75 6.75 11.2272 6.75 16.75C6.75 22.2728 11.2272 26.75 16.75 26.75Z" stroke="#40516E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M29.25 29.25L23.8125 23.8125" stroke="#40516E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/public/next.svg b/public/next.svg
deleted file mode 100644
index 5174b28c..00000000
--- a/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/public/vercel.svg b/public/vercel.svg
deleted file mode 100644
index d2f84222..00000000
--- a/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
\ No newline at end of file
diff --git a/src/apis/.http b/src/apis/.http
new file mode 100644
index 00000000..e69de29b
diff --git a/src/apis/add.ts b/src/apis/add.ts
new file mode 100644
index 00000000..66a6b010
--- /dev/null
+++ b/src/apis/add.ts
@@ -0,0 +1,9 @@
+import { AddEpigramRequestType, AddEpigramResponseType } from '@/schema/addEpigram';
+import httpClient from '.';
+
+const postEpigram = async (request: AddEpigramRequestType): Promise<AddEpigramResponseType> => {
+  const response = await httpClient.post<AddEpigramResponseType>('/epigrams', request);
+  return response.data;
+};
+
+export default postEpigram;
diff --git a/src/apis/auth.ts b/src/apis/auth.ts
new file mode 100644
index 00000000..e13efb7d
--- /dev/null
+++ b/src/apis/auth.ts
@@ -0,0 +1,12 @@
+import type { PostSigninRequestType, PostSigninResponseType, PostSignUpRequestType, PostSignUpResponseType } from '@/schema/auth';
+import httpClient from '.';
+
+export const postSignin = async (request: PostSigninRequestType): Promise<PostSigninResponseType> => {
+  const response = await httpClient.post('/auth/signIn', request);
+  return response.data;
+};
+
+export const postSignup = async (request: PostSignUpRequestType): Promise<PostSignUpResponseType> => {
+  const response = await httpClient.post('/auth/signUp', request);
+  return response.data;
+};
diff --git a/src/apis/emotion.ts b/src/apis/emotion.ts
new file mode 100644
index 00000000..8158e5a1
--- /dev/null
+++ b/src/apis/emotion.ts
@@ -0,0 +1,12 @@
+import { GetMonthlyEmotionLogsRequestType, GetMonthlyEmotionLogsResponseType } from '@/schema/emotion';
+
+import httpClient from '.';
+
+const getMonthlyEmotionLogs = async (request: GetMonthlyEmotionLogsRequestType): Promise<GetMonthlyEmotionLogsResponseType> => {
+  const response = await httpClient.get(`/emotionLogs/monthly`, {
+    params: request,
+  });
+  return response.data;
+};
+
+export default getMonthlyEmotionLogs;
diff --git a/src/apis/epigramComment.ts b/src/apis/epigramComment.ts
new file mode 100644
index 00000000..4368fb9a
--- /dev/null
+++ b/src/apis/epigramComment.ts
@@ -0,0 +1,46 @@
+import httpClient from '@/apis/index';
+import { CommentRequestSchema, CommentRequestType, CommentResponseSchema, CommentResponseType } from '@/schema/comment';
+import { PostCommentRequest, PatchCommentRequest } from '@/types/epigram.types';
+
+export const getEpigramComments = async (params: CommentRequestType): Promise<CommentResponseType> => {
+  try {
+    // 요청 파라미터 유효성 검사
+    const validatedParams = CommentRequestSchema.parse(params);
+
+    const { id, limit, cursor } = validatedParams;
+
+    // NOTE: URL의 쿼리 문자열을 사용
+    // NOTE : cursor값이 있다면 ?limit=3&cursor=100, 없다면 ?limit=3,(숫자는 임의로 지정한 것)
+    const queryParams = new URLSearchParams({
+      limit: limit.toString(),
+      ...(cursor !== undefined && { cursor: cursor.toString() }),
+    });
+
+    const response = await httpClient.get<CommentResponseType>(`/epigrams/${id}/comments?${queryParams.toString()}`);
+
+    // 응답 데이터 유효성 검사
+    const validatedData = CommentResponseSchema.parse(response.data);
+
+    return validatedData;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new Error(`댓글을 불러오는데 실패했습니다: ${error.message}`);
+    }
+    throw error;
+  }
+};
+
+export const postComment = async (commentData: PostCommentRequest) => {
+  const response = await httpClient.post('/comments', commentData);
+  return response.data;
+};
+
+export const patchComment = async (commentId: number, commentData: PatchCommentRequest) => {
+  const response = await httpClient.patch(`/comments/${commentId}`, commentData);
+  return response.data;
+};
+
+export const deleteComment = async (commentId: number) => {
+  const response = await httpClient.delete(`/comments/${commentId}`);
+  return response.data;
+};
diff --git a/src/apis/getEmotion.ts b/src/apis/getEmotion.ts
new file mode 100644
index 00000000..044ff3c3
--- /dev/null
+++ b/src/apis/getEmotion.ts
@@ -0,0 +1,25 @@
+import { EmotionType } from '@/types/emotion';
+import type { GetEmotionResponseType } from '@/schema/emotion';
+import { translateEmotionToKorean } from '@/utils/emotionMap';
+import httpClient from '.';
+import { getMe } from './user';
+
+const getEmotion = async (): Promise<EmotionType | null> => {
+  const user = await getMe();
+  if (!user) {
+    throw new Error('로그인이 필요합니다.');
+  }
+
+  const response = await httpClient.get<GetEmotionResponseType>('/emotionLogs/today', {
+    params: { userId: user.id },
+  });
+
+  if (response.status === 204) {
+    return null; // No content
+  }
+
+  const koreanEmotion = translateEmotionToKorean(response.data.emotion);
+  return koreanEmotion;
+};
+
+export default getEmotion;
diff --git a/src/apis/getEpigrams.ts b/src/apis/getEpigrams.ts
new file mode 100644
index 00000000..9685bc60
--- /dev/null
+++ b/src/apis/getEpigrams.ts
@@ -0,0 +1,12 @@
+import { GetEpigramsParamsType, GetEpigramsResponseType, GetEpigramsResponse } from '@/schema/epigrams';
+import httpClient from '.';
+
+const getEpigrams = async (params: GetEpigramsParamsType): Promise<GetEpigramsResponseType> => {
+  const response = await httpClient.get(`/epigrams`, { params });
+
+  // 데이터 일치하는지 확인
+  const parsedResponse = GetEpigramsResponse.parse(response.data);
+  return parsedResponse;
+};
+
+export default getEpigrams;
diff --git a/src/apis/index.ts b/src/apis/index.ts
index 29949fc2..0a4b7625 100644
--- a/src/apis/index.ts
+++ b/src/apis/index.ts
@@ -1,10 +1,94 @@
 import axios from 'axios';
 import qs from 'qs';
 
+// NOTE: axios 선언
 const httpClient = axios.create({
   baseURL: process.env.NEXT_PUBLIC_BASE_URL,
-  headers: { 'Content-Type': 'application/json' },
   paramsSerializer: (parameters) => qs.stringify(parameters, { arrayFormat: 'repeat', encode: false }),
 });
 
+// NOTE: eslint-disable no-param-reassign 미해결로 인한 설정
+httpClient.interceptors.request.use((config) => {
+  const accessToken = localStorage.getItem('accessToken');
+  /* eslint-disable no-param-reassign */
+  if (accessToken) config.headers.Authorization = `Bearer ${accessToken}`;
+  /* eslint-enable no-param-reassign */
+  return config;
+});
+
+httpClient.interceptors.response.use(
+  (response) => response,
+
+  (error) => {
+    if (error.response && error.response.status === 401) {
+      const refreshToken = localStorage.getItem('refreshToken');
+
+      if (!refreshToken) {
+        window.location.href = '/auth/SignIn';
+        return Promise.reject(error);
+      }
+
+      return httpClient
+        .post('/auth/refresh-token', null, {
+          headers: { Authorization: `Bearer ${refreshToken}` },
+        })
+        .then((response) => {
+          const { accessToken, refreshToken: newRefreshToken } = response.data;
+          localStorage.setItem('accessToken', accessToken);
+          localStorage.setItem('refreshToken', newRefreshToken);
+
+          const originalRequest = error.config;
+          return httpClient(originalRequest);
+        })
+        .catch(() => {
+          window.location.href = '/auth/SignIn';
+          return Promise.reject(error);
+        });
+    }
+    return Promise.reject(error);
+  },
+);
+
 export default httpClient;
+
+// NOTE: eslint-disable no-param-reassign 미해결로 인한 설정
+httpClient.interceptors.request.use((config) => {
+  const accessToken = localStorage.getItem('accessToken');
+  /* eslint-disable no-param-reassign */
+  if (accessToken) config.headers.Authorization = `Bearer ${accessToken}`;
+  /* eslint-enable no-param-reassign */
+  return config;
+});
+
+httpClient.interceptors.response.use(
+  (response) => response,
+
+  (error) => {
+    if (error.response && error.response.status === 401) {
+      const refreshToken = localStorage.getItem('refreshToken');
+
+      if (!refreshToken) {
+        window.location.href = '/auth/SignIn';
+        return Promise.reject(error);
+      }
+
+      return httpClient
+        .post('/auth/refresh-token', null, {
+          headers: { Authorization: `Bearer ${refreshToken}` },
+        })
+        .then((response) => {
+          const { accessToken, refreshToken: newRefreshToken } = response.data;
+          localStorage.setItem('accessToken', accessToken);
+          localStorage.setItem('refreshToken', newRefreshToken);
+
+          const originalRequest = error.config;
+          return httpClient(originalRequest);
+        })
+        .catch(() => {
+          window.location.href = '/auth/SignIn';
+          return Promise.reject(error);
+        });
+    }
+    return Promise.reject(error);
+  },
+);
diff --git a/src/apis/oauth.ts b/src/apis/oauth.ts
new file mode 100644
index 00000000..ae6bd068
--- /dev/null
+++ b/src/apis/oauth.ts
@@ -0,0 +1,11 @@
+import axios from 'axios';
+
+const postOauth = async (code: string) => {
+  const response = await axios.post(`${process.env.NEXT_PUBLIC_BASE_URL}/auth/signIn/KAKAO`, {
+    redirectUri: process.env.NEXT_PUBLIC_REDIRECT_URI,
+    token: code,
+  });
+  return response.data;
+};
+
+export default postOauth;
diff --git a/src/apis/postEmotion.ts b/src/apis/postEmotion.ts
new file mode 100644
index 00000000..168a8c13
--- /dev/null
+++ b/src/apis/postEmotion.ts
@@ -0,0 +1,15 @@
+import { EmotionType } from '@/types/emotion';
+import type { PostEmotionRequestType, PostEmotionResponseType } from '@/schema/emotion';
+import { translateEmotionToEnglish } from '@/utils/emotionMap';
+import httpClient from '.';
+
+const postEmotion = async (emotion: EmotionType): Promise<PostEmotionResponseType> => {
+  const englishEmotion = translateEmotionToEnglish(emotion);
+  const request: PostEmotionRequestType = { emotion: englishEmotion };
+
+  const response = await httpClient.post<PostEmotionResponseType>('/emotionLogs/today', request);
+
+  return response.data;
+};
+
+export default postEmotion;
diff --git a/src/apis/queries.ts b/src/apis/queries.ts
index 1f84081c..0010c375 100644
--- a/src/apis/queries.ts
+++ b/src/apis/queries.ts
@@ -1,6 +1,8 @@
 import { createQueryKeyStore } from '@lukemorales/query-key-factory';
 import { GetUserRequestType } from '@/schema/user';
+import { GetMonthlyEmotionLogsRequestType } from '@/schema/emotion';
 import { getMe, getUser } from './user';
+import getMonthlyEmotionLogs from './emotion';
 
 const quries = createQueryKeyStore({
   user: {
@@ -13,6 +15,12 @@ const quries = createQueryKeyStore({
       queryFn: () => getUser(request),
     }),
   },
+  emotion: {
+    getMonthlyEmotionLogs: (request: GetMonthlyEmotionLogsRequestType) => ({
+      queryKey: ['getMonthlyEmotionLogs', request],
+      queryFn: () => getMonthlyEmotionLogs(request),
+    }),
+  },
 });
 
 export default quries;
diff --git a/src/apis/user.ts b/src/apis/user.ts
index 395b0167..5f924dea 100644
--- a/src/apis/user.ts
+++ b/src/apis/user.ts
@@ -1,18 +1,25 @@
-import type { GetUserReponseType, GetUserRequestType, PatchMeRequestType } from '@/schema/user';
+import type { GetUserResponseType, GetUserRequestType, PatchMeRequestType, PostPresignedUrlRequestType, PostPresignedUrlResponseType } from '@/schema/user';
 import httpClient from '.';
 
-export const getMe = async (): Promise<GetUserReponseType> => {
+export const getMe = async (): Promise<GetUserResponseType> => {
   const response = await httpClient.get('/users/me');
   return response.data;
 };
 
-export const getUser = async (request: GetUserRequestType): Promise<GetUserReponseType> => {
+export const getUser = async (request: GetUserRequestType): Promise<GetUserResponseType> => {
   const { id } = request;
   const response = await httpClient.get(`/users/${id}`);
   return response.data;
 };
 
-export const updateMe = async (request: PatchMeRequestType): Promise<GetUserReponseType> => {
+export const updateMe = async (request: PatchMeRequestType): Promise<GetUserResponseType> => {
   const response = await httpClient.patch('/users/me', { ...request });
   return response.data;
 };
+
+export const createPresignedUrl = async (request: PostPresignedUrlRequestType): Promise<PostPresignedUrlResponseType> => {
+  const formData = new FormData();
+  formData.append('image', request.image);
+  const response = await httpClient.post('/images/upload', formData);
+  return response.data;
+};
diff --git a/src/components/Card/CommentCard.tsx b/src/components/Card/CommentCard.tsx
new file mode 100644
index 00000000..a58f0e6f
--- /dev/null
+++ b/src/components/Card/CommentCard.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import Image from 'next/image';
+import { sizeStyles, textSizeStyles, gapStyles, paddingStyles, contentWidthStyles } from '@/styles/CommentCardStyles';
+
+export interface CommentCardProps {
+  status: 'edit' | 'complete';
+}
+
+function CommentCard({ status }: CommentCardProps) {
+  return (
+    <div
+      className={`bg-slate-100 border-t border-slate-300 flex-col justify-start items-start gap-2.5 inline-flex ${sizeStyles.sm} ${sizeStyles.md} ${sizeStyles.lg} ${paddingStyles.sm} ${paddingStyles.md} ${paddingStyles.lg}`}
+    >
+      <div className='justify-start items-start gap-4 inline-flex'>
+        <div className='w-12 h-12 relative'>
+          <div className='w-12 h-12 bg-zinc-300 rounded-full overflow-hidden flex items-center justify-center'>
+            <Image src='/ProfileTestImage.jpg' alt='프로필 이미지' layout='fill' objectFit='cover' className='rounded-full' />{' '}
+          </div>
+        </div>
+        <div className={`flex-col justify-start items-start ${gapStyles.sm} ${gapStyles.md} ${gapStyles.lg} inline-flex ${contentWidthStyles.sm} ${contentWidthStyles.md} ${contentWidthStyles.lg}`}>
+          <div className='justify-between items-center w-full inline-flex'>
+            <div className='justify-start items-start gap-2 flex'>
+              <div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.name} ${textSizeStyles.md.name} ${textSizeStyles.lg.name}`}>
+                {/* 테스트 텍스트입니다. */}
+                지킬과 하이드
+              </div>
+              <div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.time} ${textSizeStyles.md.time} ${textSizeStyles.lg.time}`}>
+                {/* 테스트 텍스트입니다. */}
+                1시간 전
+              </div>
+            </div>
+            {status === 'edit' && (
+              <div className='justify-start items-start gap-4 flex'>
+                <div className={`text-neutral-700 underline leading-[18px] cursor-pointer ${textSizeStyles.sm.action} ${textSizeStyles.md.action} ${textSizeStyles.lg.action}`}>수정</div>
+                <div className={`text-red-400 underline leading-[18px] cursor-pointer ${textSizeStyles.sm.action} ${textSizeStyles.md.action} ${textSizeStyles.lg.action}`}>삭제</div>
+              </div>
+            )}
+          </div>
+          <div
+            className={`w-full text-zinc-800 font-normal font-pretendard ${textSizeStyles.sm.content} ${textSizeStyles.md.content} ${textSizeStyles.lg.content} ${contentWidthStyles.sm} ${contentWidthStyles.md} ${contentWidthStyles.lg}`}
+          >
+            {/* 테스트 텍스트입니다. */}
+            오늘 하루 우울했었는데 덕분에 많은 힘 얻고 갑니다. 연금술사 책 다시 사서 오랜만에 읽어봐야겠어요!
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CommentCard;
diff --git a/src/components/Card/EpigramCard.tsx b/src/components/Card/EpigramCard.tsx
new file mode 100644
index 00000000..07ceb392
--- /dev/null
+++ b/src/components/Card/EpigramCard.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+
+// figma 상으로는 sm ~ 3xl 사이즈로 구현되어 있는데, tailwind 환경을 반영해
+// xs ~ 2xl 으로 정의했습니다.
+const sizeStyles = {
+  xs: 'w-[286px] max-h-[132px]',
+  sm: 'sm:w-[312px] sm:max-h-[152px]',
+  md: 'md:w-[384px] md:max-h-[180px]',
+  lg: 'lg:w-[540px] lg:max-h-[160px]',
+  xl: 'xl:w-[640px] xl:max-h-[196px]',
+  '2xl': '2xl:w-[744px] 2xl:max-h-[196px]',
+};
+
+const textSizeStyles = {
+  xs: 'text-xs',
+  sm: 'sm:text-sm',
+  md: 'md:text-base',
+  lg: 'lg:text-xl',
+  xl: 'xl:text-2xl',
+  '2xl': '2xl:text-2xl',
+};
+
+function EpigramCard() {
+  return (
+    <div className={`relative flex-col justify-start items-end gap-2 inline-flex ${sizeStyles.xs} ${sizeStyles.sm} ${sizeStyles.md} ${sizeStyles.lg} ${sizeStyles.xl} ${sizeStyles['2xl']}`}>
+      <div className='w-full p-[22px] bg-white rounded-[14.67px] shadow border border-zinc-100 flex-col justify-start items-start flex relative overflow-hidden'>
+        {/* eslint-disable-next-line */}
+        <div className='absolute inset-0 bg-stripes w-full h-full'></div> {/* 줄무늬를 만들려면 비어있는 div가 필요합니다. */}
+        <div className='relative w-full z-10 flex flex-col justify-start items-start flex-1'>
+          <div className='self-stretch flex-col justify-start items-start gap-2 flex'>
+            <div
+              className={`self-stretch ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-neutral-700 font-normal font-iropkeBatang leading-normal`}
+            >
+              {/* 테스트 텍스트입니다. */}
+              오랫동안 꿈을 그리는 사람은 마침내 그 꿈을 닮아 간다.
+            </div>
+            <div
+              className={`self-stretch ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-right text-slate-400 font-normal font-iropkeBatang leading-normal`}
+            >
+              {/* 테스트 텍스트입니다. */}- 앙드레 말로 -
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className='justify-start items-start gap-2 inline-flex'>
+        <div
+          className={`text-right ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-slate-400 font-normal font-iropkeBatang leading-normal`}
+        >
+          {/* 테스트 텍스트입니다. */}
+          #나아가야할때
+        </div>
+        <div
+          className={`text-right ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-slate-400 font-normal font-iropkeBatang leading-normal`}
+        >
+          {/* 테스트 텍스트입니다. */}
+          #꿈을이루고싶을때
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default EpigramCard;
diff --git a/src/components/Emotion/EmotionCard.tsx b/src/components/Emotion/EmotionCard.tsx
new file mode 100644
index 00000000..74134281
--- /dev/null
+++ b/src/components/Emotion/EmotionCard.tsx
@@ -0,0 +1,113 @@
+/*
+  1개의 감정 아이콘 카드를 랜더링 합니다.
+  아이콘의 타입, 상태, 크기, 클릭 이벤트를 관리합니다.
+  아이콘 타입과 상태에 따라 아이콘의 모양과 스타일을 조정합니다.
+ */
+
+import React from 'react';
+import cn from '@/lib/utils';
+import Image from 'next/image';
+import { EmotionIconCardProps } from '@/types/emotion';
+
+// 아이콘 파일 경로 매핑
+const iconPaths = {
+  Color: {
+    감동: '/icon/Color/HeartFaceColorIcon.svg',
+    기쁨: '/icon/Color/SmileFaceColorIcon.svg',
+    고민: '/icon/Color/ThinkFaceColorIcon.svg',
+    슬픔: '/icon/Color/SadFaceColorIcon.svg',
+    분노: '/icon/Color/AngryFaceColorIcon.svg',
+  },
+  BW: {
+    감동: '/icon/BW/HeartFaceBWIcon.svg',
+    기쁨: '/icon/BW/SmileFaceBWIcon.svg',
+    고민: '/icon/BW/ThinkFaceBWIcon.svg',
+    슬픔: '/icon/BW/SadFaceBWIcon.svg',
+    분노: '/icon/BW/AngryFaceBWIcon.svg',
+  },
+};
+
+// EmotionIconCard 컴포넌트 함수 선언
+function EmotionIconCard({ iconType = '감동', state = 'Default', size = 'sm', onClick }: EmotionIconCardProps) {
+  // 크기에 따른 클래스 설정
+  let sizeClass = '';
+  let iconSizeClass = '';
+  let textSizeClass = '';
+  switch (size) {
+    case 'lg':
+      sizeClass = 'w-20 h-28';
+      iconSizeClass = 'w-12 h-12';
+      textSizeClass = 'text-base leading-relaxed';
+      break;
+    case 'md':
+      sizeClass = 'w-16 h-24';
+      iconSizeClass = 'w-10 h-10';
+      textSizeClass = 'text-sm leading-normal';
+      break;
+    case 'sm':
+    default:
+      sizeClass = 'w-14 h-21';
+      iconSizeClass = 'w-8 h-8';
+      textSizeClass = 'text-xs leading-tight';
+      break;
+  }
+
+  // 상태에 따른 아이콘 경로 설정
+  const iconPath = state === 'Clicked' || state === 'Default' ? iconPaths.Color[iconType] : iconPaths.BW[iconType];
+
+  // 상태에 따른 클래스 설정
+  let borderClass = '';
+  const textColorClass = 'text-neutral-400';
+  let backgroundClass = 'bg-slate-400/20';
+  let textVisibilityClass = '';
+
+  if (state === 'Clicked') {
+    textVisibilityClass = 'hidden';
+    backgroundClass = 'bg-transparent';
+
+    // iconType에 따라 다른 border 색상을 설정
+    switch (iconType) {
+      case '감동':
+        borderClass = 'border-4 border-illust-yellow';
+        break;
+      case '기쁨':
+        borderClass = 'border-4 border-illust-green';
+        break;
+      case '고민':
+        borderClass = 'border-4 border-illust-purple';
+        break;
+      case '슬픔':
+        borderClass = 'border-4 border-illust-blue';
+        break;
+      case '분노':
+        borderClass = 'border-4 border-illust-red';
+        break;
+      default:
+        borderClass = 'border-4 border-sub_blue_1';
+        break;
+    }
+  }
+
+  return (
+    <div
+      className={cn(sizeClass, 'flex-col justify-start items-center gap-2 inline-flex')}
+      onClick={onClick}
+      role='button'
+      tabIndex={0}
+      onKeyPress={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          if (onClick) {
+            onClick();
+          }
+        }
+      }}
+    >
+      <div className={cn('w-full aspect-square rounded-2xl justify-center items-center gap-2 inline-flex', borderClass, backgroundClass)}>
+        <Image src={iconPath} alt={iconType} width={32} height={32} className={iconSizeClass} />
+      </div>
+      <div className={cn('text-center font-semibold font-["Pretendard"]', textColorClass, textSizeClass, textVisibilityClass)}>{iconType}</div>
+    </div>
+  );
+}
+
+export default EmotionIconCard;
diff --git a/src/components/Emotion/EmotionSaveToast.tsx b/src/components/Emotion/EmotionSaveToast.tsx
new file mode 100644
index 00000000..e7d24105
--- /dev/null
+++ b/src/components/Emotion/EmotionSaveToast.tsx
@@ -0,0 +1,34 @@
+/*
+ * 오늘의 감정을 선택하면 표시되는 toast입니다.
+ * 감정을 확인하기 위해 마이페이지로 연결됩니다.
+ */
+
+import React, { useEffect } from 'react';
+import { useToast } from '@/components/ui/use-toast';
+import { ToastAction } from '@/components/ui/toast';
+import { useRouter } from 'next/router';
+
+interface EmotionSaveToastProps {
+  iconType: string;
+}
+
+function EmotionSaveToast({ iconType }: EmotionSaveToastProps) {
+  const { toast } = useToast();
+  const router = useRouter();
+
+  useEffect(() => {
+    toast({
+      title: '오늘의 감정이 저장되었습니다.',
+      description: `오늘의 감정: ${iconType}`,
+      action: (
+        <ToastAction altText='확인하기' onClick={() => router.push('/mypage')}>
+          확인하기
+        </ToastAction>
+      ),
+    });
+  }, [iconType, toast, router]);
+
+  return null;
+}
+
+export default EmotionSaveToast;
diff --git a/src/components/Emotion/EmotionSelector.tsx b/src/components/Emotion/EmotionSelector.tsx
new file mode 100644
index 00000000..4375c3ca
--- /dev/null
+++ b/src/components/Emotion/EmotionSelector.tsx
@@ -0,0 +1,111 @@
+import React, { useState, useEffect } from 'react';
+import useMediaQuery from '@/hooks/useMediaQuery';
+import EmotionIconCard from '@/components/Emotion/EmotionCard';
+import { EmotionType, EmotionState } from '@/types/emotion';
+import usePostEmotion from '@/hooks/usePostEmotion';
+import { useGetEmotion } from '@/hooks/useGetEmotion';
+import EmotionSaveToast from './EmotionSaveToast';
+
+/**
+ * EmotionSelector 컴포넌트는 여러 개의 EmotionIconCard를 관리하고
+ * 사용자의 오늘의 감정을 선택하고 저장하고 출력합니다.
+ */
+function EmotionSelector() {
+  // 반응형 디자인을 위한 미디어 쿼리 훅
+  const isTablet = useMediaQuery('(min-width: 768px) and (max-width: 1024px)');
+  const isMobile = useMediaQuery('(max-width: 767px)');
+
+  // 감정 카드 상태 관리를 위한 useState 훅
+  const [states, setStates] = useState<Record<EmotionType, EmotionState>>({
+    감동: 'Default',
+    기쁨: 'Default',
+    고민: 'Default',
+    슬픔: 'Default',
+    분노: 'Default',
+  });
+
+  // 현재 선택된 감정을 관리하는 useState 훅
+  const [selectedEmotion, setSelectedEmotion] = useState<EmotionType | null>(null);
+  // 오늘의 감정을 조회하기 위한 훅
+  const { data: emotion, error: getError, isLoading: isGetLoading } = useGetEmotion();
+  // 감정을 저장하기 위한 훅
+  const postEmotionMutation = usePostEmotion();
+
+  // 컴포넌트가 마운트될 때 한 번만 실행되는 useEffect 훅
+  // 오늘의 감정을 조회하고 상태를 업데이트합니다.
+  useEffect(() => {
+    if (emotion) {
+      setStates((prevStates) => ({
+        ...prevStates,
+        [emotion]: 'Clicked',
+      }));
+    }
+  }, [emotion]);
+
+  /**
+   * 감정 카드 클릭 핸들러
+   * 사용자가 감정 카드를 클릭했을 때 호출됩니다.
+   * 클릭된 감정 카드를 'Clicked' 상태로 설정하고 나머지 카드는 'Unclicked' 상태로 설정합니다.
+   * 감정을 서버에 저장합니다.
+   * @param iconType - 클릭된 감정의 타입
+   */
+  const handleCardClick = async (iconType: EmotionType) => {
+    setStates((prevStates) => {
+      const newStates = { ...prevStates };
+
+      if (prevStates[iconType] === 'Clicked') {
+        // 현재 클릭된 카드가 다시 클릭되면 모든 카드를 Default로 설정
+        Object.keys(newStates).forEach((key) => {
+          newStates[key as EmotionType] = 'Default';
+        });
+      } else {
+        // 하나의 카드가 클릭되면 그 카드만 Clicked, 나머지는 Unclicked로 설정
+        Object.keys(newStates).forEach((key) => {
+          newStates[key as EmotionType] = key === iconType ? 'Clicked' : 'Unclicked';
+        });
+      }
+
+      return newStates;
+    });
+
+    // 오늘의 감정 저장
+    postEmotionMutation.mutate(iconType, {
+      onSuccess: (_, clickedIconType) => {
+        setSelectedEmotion(clickedIconType);
+      },
+      onError: (error: unknown) => {
+        // eslint-disable-next-line
+        console.error(error);
+      },
+    });
+  };
+
+  // 반응형 디자인을 위한 카드 크기 설정
+  let containerClass = 'w-[544px] h-[136px] gap-4';
+  let cardSize: 'lg' | 'md' | 'sm' = 'lg';
+
+  if (isTablet) {
+    containerClass = 'w-[352px] h-[96px] gap-2';
+    cardSize = 'md';
+  } else if (isMobile) {
+    containerClass = 'w-[312px] h-[84px] gap-2';
+    cardSize = 'sm';
+  }
+
+  if (isGetLoading) return <p>Loading...</p>;
+  if (getError) return <p>{getError.message}</p>;
+
+  return (
+    <>
+      <div className={`justify-start items-start inline-flex ${containerClass}`}>
+        {(['감동', '기쁨', '고민', '슬픔', '분노'] as const).map((iconType) => (
+          <EmotionIconCard key={iconType} iconType={iconType} size={cardSize} state={states[iconType]} onClick={() => handleCardClick(iconType)} />
+        ))}
+      </div>
+      {/* 감정이 선택되었을 때 토스트 메시지 표시 */}
+      {selectedEmotion && <EmotionSaveToast iconType={selectedEmotion} />}
+    </>
+  );
+}
+
+export default EmotionSelector;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
new file mode 100644
index 00000000..d342347f
--- /dev/null
+++ b/src/components/Header/Header.tsx
@@ -0,0 +1,119 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import Image from 'next/image';
+import { useToast } from '../ui/use-toast';
+import LOGO_ICON from '../../../public/epigram-icon.png';
+import ARROW_LEFT_ICON from '../../../public/icon/arrow-left-icon.svg';
+import PROFILE_ICON from '../../../public/icon/profile-icon.svg';
+import SEARCH_ICON from '../../../public/icon/search-icon.svg';
+import SHARE_ICON from '../../../public/icon/share-icon.svg';
+
+// NOTE 네비게이션 바를 나타내는 컴포넌트 입니다.
+// NOTE 상위 컴포넌트에서 Props를 받아 원하는 스타일을 보여줍니다.
+// NOTE 사용 예시
+// NOTE <Header icon='back' routerPage='원하는 페이지 주소' isLogo={false} insteadOfLogo='센터 텍스트' isProfileIcon={false} isShareIcon={false} isButton textInButton='버튼 텍스트' disabled={false} onClick={동작할 함수} />
+// NOTE <Header icon='search' routerPage='/search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />;
+// NOTE icon: 'back'을 사용할 경우 routerPage의 값을 무조건 지정해줘야 합니다.
+// NOTE isLogo={false}일 경우 insteadOfLogo의 값을 무조건 지정해줘야 합니다.
+// NOTE isButton 일 경우 textInButton의 값을 무조건 지정해줘야 합니다.
+// NOTE SHARE_ICON 추가 시 토스트 기능도 사용하려면 해당 컴포넌트 아래 <Toaster /> 를 추가해주세요.
+
+export interface HeaderProps {
+  icon: 'back' | 'search' | '';
+  routerPage: string;
+  isLogo: boolean;
+  insteadOfLogo: string;
+  isProfileIcon: boolean;
+  isShareIcon: boolean;
+  isButton: boolean;
+  textInButton: string;
+  disabled: boolean;
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+function Header({ isLogo, icon, insteadOfLogo, isButton, isProfileIcon, isShareIcon, textInButton, routerPage, disabled, onClick }: HeaderProps) {
+  const router = useRouter();
+  const { toast } = useToast();
+
+  // 페이지 이동 함수
+  const handleNavigateTo = (path: string) => {
+    router.push(path);
+  };
+
+  // 현재 링크 복사 함수
+  const handleCopyToClipboard = async () => {
+    try {
+      // 현재 URL 가져오기
+      const currentURL = window.location.href;
+      // 클립보드에 복사하기
+      await navigator.clipboard.writeText(currentURL);
+      toast({
+        title: '성공',
+        description: '링크가 클립보드에 복사되었습니다!',
+      });
+    } catch (err) {
+      toast({
+        title: '실패',
+        description: '링크 복사에 실패했습니다. 다시 시도해 주세요.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <nav className='bg-white h-13 px-6 py-4 md:px-28 md:py-5 lg:px-30 lg:py-6'>
+      <div className='container flex justify-between items-center'>
+        <div className='flex items-center space-x-4'>
+          {icon === 'back' && (
+            <button className='w-5 h-5 lg:w-9 lg:h-9' type='button' onClick={() => handleNavigateTo(routerPage)} aria-label='뒤로가기 버튼'>
+              <Image src={ARROW_LEFT_ICON} alt='뒤로가기 버튼 이미지' />
+            </button>
+          )}
+          {icon === 'search' && (
+            <button className='w-5 h-5 lg:w-9 lg:h-9' type='button' onClick={() => handleNavigateTo('/search')} aria-label='검색 버튼'>
+              <Image src={SEARCH_ICON} alt='검색 버튼 이미지' />
+            </button>
+          )}
+        </div>
+        <div className='flex-grow flex justify-center'>
+          {isLogo ? (
+            <button className='flex items-center gap-2' type='button' onClick={() => handleNavigateTo('/')} aria-label='홈으로 이동'>
+              <Image className='w-5 h-5 lg:w-9 lg:h-9' src={LOGO_ICON} alt='logo' />
+              <span className='text-black-700 text-6 lg:text-[26px] leading-6 font-bold'>Epigram</span>
+            </button>
+          ) : (
+            <span className='text-black-700 text-6 lg:text-[26px] leading-6 font-bold'>{insteadOfLogo}</span>
+          )}
+        </div>
+        <div className='flex items-center space-x-4'>
+          {isProfileIcon && (
+            <button className='w-5 h-5 lg:w-9 lg:h-9' type='button' onClick={() => handleNavigateTo('/mypage')} aria-label='프로필 페이지로 이동'>
+              <Image src={PROFILE_ICON} alt='프로필 이미지' />
+            </button>
+          )}
+          {isShareIcon && (
+            <button className='w-5 h-5 lg:w-9 lg:h-9' type='button' onClick={handleCopyToClipboard} aria-label='링크 복사'>
+              <Image src={SHARE_ICON} alt='프로필 이미지' />
+            </button>
+          )}
+          {isButton && (
+            <button
+              className='flex justify-center items-center h-8 lg:h-11 px-4 rounded-lg bg-black-500 
+                      hover:bg-black-600 
+                      active:bg-black-700 
+                      disabled:bg-blue-400 border-blue-300
+                      disabled:cursor-not-allowed'
+              type='button'
+              disabled={disabled}
+              onClick={onClick}
+            >
+              <span className='text-blue-100 text-xs lg:text-base font-pretendard font-semibold leading-5'>{textInButton}</span>
+            </button>
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+export default Header;
diff --git a/src/components/index.tsx b/src/components/index.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx
new file mode 100644
index 00000000..0b71f086
--- /dev/null
+++ b/src/components/search/RecentSearches.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+interface RecentSearchesProps {
+  searches: string[];
+  onSearch: (search: string) => void;
+  onClear: () => void;
+}
+
+function RecentSearches({ searches, onSearch, onClear }: RecentSearchesProps) {
+  const handleSearchClick = (search: string) => {
+    onSearch(search);
+  };
+
+  const handleClearAll = () => {
+    onClear();
+  };
+
+  return (
+    <div className='flex flex-col items-start gap-4 md:gap-6 lg:gap-10 my-6 md:my-8 lg:my-10 px-6'>
+      <div className='flex flex- justify-between items-center w-full'>
+        <span className='text-black-700 font-pretendard pretendard-lg-medium md:pretendard-xl-medium lg:pretendard-2xl-medium'>최근 검색어</span>
+        <button
+          className='text-state-error font-pretendard pretendard-xs-semibold md:pretendard-md-semibold lg:pretendard-lg-semibold bg-transparent border-none cursor-pointer'
+          type='button'
+          onClick={handleClearAll}
+        >
+          모두 지우기
+        </button>
+      </div>
+      <div className='flex flex-col items-start gap-4 md:gap-6 lg:gap-10'>
+        <div className='flex flex-row flex-wrap items-start gap-2 md:gap-4 text-black-300 font-pretendard pretendard-2xl-regular'>
+          {searches.map((search) => (
+            <button className='flex justify-center items-center p-3 px-[14px] gap-2 rounded-[22px] bg-background-100' type='button' key={search} onClick={() => handleSearchClick(search)}>
+              {search}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default RecentSearches;
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
new file mode 100644
index 00000000..accf11f1
--- /dev/null
+++ b/src/components/search/SearchBar.tsx
@@ -0,0 +1,58 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import SEARCH_ICON from '../../../public/md.svg';
+
+// TODO react-hook-form 사용
+
+interface SearchBarProps {
+  onSearch: (search: string) => void;
+  currentSearch: string;
+}
+
+function SearchBar({ onSearch, currentSearch }: SearchBarProps) {
+  const [searchInput, setSearchInput] = useState<string>('');
+  const [isFocused, setIsFocused] = useState<boolean>(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchInput(e.target.value);
+  };
+
+  const handleFocus = () => {
+    setIsFocused(true);
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (searchInput.trim()) {
+      onSearch(searchInput);
+      setSearchInput('');
+    }
+  };
+
+  // 최근 검색어 클릭 시 setSearchInput 상태 업데이트
+  useEffect(() => {
+    setSearchInput(currentSearch);
+  }, [currentSearch]);
+
+  return (
+    <form onSubmit={handleSubmit} className='flex justify-between items-center h-[52px] md:h-15 lg:h-20 mt-6 mx-6 py-4 md:py-[19px] lg:py-[26px] gap-[10px] border-b-[4px] border-blue-800'>
+      <input
+        className='flex-grow border-none text-left text-black-700 font-pretendard pretendard-lg-regular md:pretendard-xl-regular lg:pretendard-2xl-regular focus:outline-none'
+        placeholder={isFocused ? '' : '검색어를 입력해주세요.'}
+        value={searchInput}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+      />
+      <button type='submit' className='flex justify-center items-center bg-transparent'>
+        <Image className='w-5 lg:w-9 h-5 lg:h-9' src={SEARCH_ICON} alt='검색 아이콘' />
+      </button>
+    </form>
+  );
+}
+
+export default SearchBar;
diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx
new file mode 100644
index 00000000..8ecb893a
--- /dev/null
+++ b/src/components/search/SearchResults.tsx
@@ -0,0 +1,101 @@
+import React, { useMemo } from 'react';
+import Link from 'next/link';
+import { GetEpigramsResponseType } from '@/schema/epigrams';
+
+// TODO highlightedSections의 key 설정 부분에 더 나은 방법이 생각나면 변경
+
+interface SearchResultsProps {
+  results: GetEpigramsResponseType | null;
+  query: string;
+  isLoading: boolean;
+}
+
+// 텍스트 하이라이팅 함수
+function handleHighlightText(text: string, highlight: string) {
+  if (!highlight.trim()) {
+    return text;
+  }
+
+  // 검색어(highlight)기준으로 검색 결과를 배열로 나눔(g: 중복 O, i: 대소문자 구분 X)
+  const highlightedSections = text.split(new RegExp(`(${highlight})`, 'gi'));
+
+  // 검색어와 비교해서 같으면 하이라이팅, 다르면 그냥 반환
+  return (
+    <>
+      {highlightedSections.map((section, index) => {
+        const key = `${section}-${index}-${section.length}`;
+        return section.toLowerCase() === highlight.toLowerCase() ? (
+          <span key={key} className='text-illust-blue'>
+            {section}
+          </span>
+        ) : (
+          section
+        );
+      })}
+    </>
+  );
+}
+
+function SearchResults({ results, query, isLoading }: SearchResultsProps) {
+  // 태그와 내용 순서로 정렬 - 항상 useMemo를 호출하고, results가 null인 경우 빈 배열 반환
+  const sortedResults = useMemo(() => {
+    if (!results) return [];
+    return results.list.sort((a, b) => {
+      const aHasTag = a.tags.some((tag) => tag.name.includes(query));
+      const bHasTag = b.tags.some((tag) => tag.name.includes(query));
+
+      if (aHasTag && !bHasTag) return -1;
+      if (!aHasTag && bHasTag) return 1;
+      return 0;
+    });
+  }, [results, query]);
+
+  const filteredResults = useMemo(
+    () => sortedResults.filter((item) => item.content.includes(query) || item.author.includes(query) || item.tags.some((tag) => tag.name.includes(query))),
+    [sortedResults, query],
+  );
+
+  if (isLoading) {
+    return (
+      <div className='flex flex-col py-4 px-6 lg:p-6 gap-2 lg:gap-[16px]'>
+        <div className='flex flex-col gap-1 md:gap-2 lg:gap-6'>
+          <span className='text-black-600 font-iropkeBatang iropke-lg lg:iropke-xl'>검색 결과를 불러오는 중 입니다...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (!results || filteredResults.length === 0) {
+    return (
+      <div className='flex flex-col py-4 px-6 lg:p-6 gap-2 lg:gap-[16px]'>
+        <div className='flex flex-col gap-1 md:gap-2 lg:gap-6'>
+          <span className='text-black-600 font-iropkeBatang iropke-lg lg:iropke-xl'>해당 검색어에 대한 결과가 없습니다.</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {filteredResults.map((item) => (
+        <Link href={`/epigrams/${item.id}`} key={item.id}>
+          <div className='flex flex-col py-4 px-6 lg:p-6 gap-2 lg:gap-[16px] border-b border-gray-100'>
+            <div className='flex flex-col gap-1 md:gap-2 lg:gap-6'>
+              <span className='text-black-600 font-iropkeBatang iropke-lg lg:iropke-xl'>{handleHighlightText(item.content, query)}</span>
+              <span className='text-blue-400 font-iropkeBatang iropke-lg lg:iropke-xl'>- {handleHighlightText(item.author, query)} -</span>
+            </div>
+            <div className='flex flex-row justify-end gap-3'>
+              {item.tags.map((tag) => (
+                <span key={tag.id} className='text-blue-400 font-pretendard iropke-lg lg:iropke-xl'>
+                  {handleHighlightText(`#${tag.name}`, query)}
+                </span>
+              ))}
+            </div>
+          </div>
+        </Link>
+      ))}
+    </div>
+  );
+}
+
+export default SearchResults;
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 00000000..f44152fd
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+
+import cn from '@/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Overlay>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn('fixed inset-0 z-50 bg-background-100  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', className)}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className='absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground'>
+        <X className='h-4 w-4' />
+        <span className='sr-only'>Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />;
+}
+DialogHeader.displayName = 'DialogHeader';
+
+function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />;
+}
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Title>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Description>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription };
diff --git a/src/hooks/epigramQueryHook.ts b/src/hooks/epigramQueryHook.ts
new file mode 100644
index 00000000..e2ca6679
--- /dev/null
+++ b/src/hooks/epigramQueryHook.ts
@@ -0,0 +1,24 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { AddEpigramFormType, AddEpigramResponseType } from '@/schema/addEpigram';
+import { MutationOptions } from '@/types/query';
+import postEpigram from '@/apis/add';
+import { AxiosError } from 'axios';
+
+// TODO: 에피그램 수정과 삭제에도 사용 가능하게 훅 수정 예정
+
+const useAddEpigram = (options?: MutationOptions<AddEpigramFormType, AddEpigramResponseType>) => {
+  const queryClient = useQueryClient();
+
+  return useMutation<AddEpigramResponseType, AxiosError, AddEpigramFormType>({
+    mutationFn: (newEpigram: AddEpigramFormType) => postEpigram(newEpigram),
+    ...options,
+    onSuccess: (...args) => {
+      queryClient.invalidateQueries({ queryKey: ['epigrams'] });
+      if (options?.onSuccess) {
+        options.onSuccess(...args);
+      }
+    },
+  });
+};
+
+export default useAddEpigram;
diff --git a/src/hooks/useCalendar.ts b/src/hooks/useCalendar.ts
new file mode 100644
index 00000000..44afc6a6
--- /dev/null
+++ b/src/hooks/useCalendar.ts
@@ -0,0 +1,67 @@
+import { getDaysInMonth } from 'date-fns';
+import { CALENDAR_LENGTH, DAY_OF_WEEK } from '../user/utill/constants';
+
+interface CalendarData {
+  weekCalendarList: number[][]; // 주별 날짜 리스트
+}
+
+// 이전 달의 날짜를 계산하는 함수
+const getPreviousDays = (firstDayOfCurrentMonth: Date, totalPrevMonthDays: number): number[] =>
+  // 현재 월의 첫 번째 날의 요일을 기준으로 이전 달의 날짜를 배열로 반환
+  Array.from({ length: firstDayOfCurrentMonth.getDay() }, (_, index) => totalPrevMonthDays - firstDayOfCurrentMonth.getDay() + index + 1);
+// 현재 월의 날짜를 배열로 반환하는 함수
+const getCurrentDays = (totalMonthDays: number): number[] => Array.from({ length: totalMonthDays }, (_, i) => i + 1); // 1부터 totalMonthDays까지의 배열 생성
+// 다음 달의 날짜를 계산하는 함수
+const getNextDays = (currentDayList: number[], prevDayList: number[]): number[] => {
+  // 다음 달의 날짜 수를 계산하여 배열로 반환
+  const nextDayCount = CALENDAR_LENGTH - currentDayList.length - prevDayList.length;
+  return Array.from({ length: Math.max(nextDayCount, 0) }, (_, index) => index + 1);
+};
+
+const useCalendar = (currentDate: Date): CalendarData => {
+  // 현재 월의 총 날짜 수를 가져옴
+  const totalMonthDays = getDaysInMonth(currentDate);
+
+  // 이전 달의 마지막 날짜를 계산
+  const prevMonthLastDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0);
+  // 이전 달의 총 날짜 수를 가져옴
+  const totalPrevMonthDays = getDaysInMonth(prevMonthLastDate);
+
+  // 현재 월의 첫 번째 날짜를 계산
+  const firstDayOfCurrentMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
+  // 이전 달의 날짜 리스트
+  const prevDayList = getPreviousDays(firstDayOfCurrentMonth, totalPrevMonthDays);
+  // 현재 월의 날짜 리스트
+  const currentDayList = getCurrentDays(totalMonthDays);
+  // 다음 달의 날짜 리스트
+  const nextDayList = getNextDays(currentDayList, prevDayList);
+
+  // 전체 날짜 리스트 (이전 / 현재 / 다음 달 날짜 포함)
+  const currentCalendarList = [...prevDayList, ...currentDayList, ...nextDayList];
+
+  // 주별로 날짜 리스트를 분할
+  const weekCalendarList: number[][] = [];
+  currentCalendarList.forEach((currDate, index) => {
+    const chunkIndex = Math.floor(index / DAY_OF_WEEK);
+    if (!weekCalendarList[chunkIndex]) {
+      weekCalendarList[chunkIndex] = []; // 주 배열이 없으면 초기화
+    }
+    weekCalendarList[chunkIndex].push(currDate); // 누적값 반환
+  });
+
+  // NOTE: 한 달이 5주 일 수도, 6주 일 수도 있을 때 5주인 경우 해당 달에 필요없는 다음 달의 날짜가 출력되기 때문에 (CALENDAR_LENGTH를 최대치인 42로 잡아서) 마지막 주의 첫 번째 숫자가 10이하의 날짜로 시작한다면 해당 배열을 삭제하도록 추가.
+  // TODO: 추후 다른 방법이 있다면 변경 할 예정
+  if (weekCalendarList.length > 0) {
+    const lastWeek = weekCalendarList[weekCalendarList.length - 1];
+    if (lastWeek[0] <= 10) {
+      weekCalendarList.pop();
+    }
+  }
+
+  // 캘린더 정보를 반환
+  return {
+    weekCalendarList, // 주별 날짜 리스트
+  };
+};
+
+export default useCalendar;
diff --git a/src/hooks/useDeleteCommentHook.ts b/src/hooks/useDeleteCommentHook.ts
new file mode 100644
index 00000000..006019b5
--- /dev/null
+++ b/src/hooks/useDeleteCommentHook.ts
@@ -0,0 +1,31 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { deleteComment } from '@/apis/epigramComment';
+import { toast } from '@/components/ui/use-toast';
+
+const useDeleteCommentMutation = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (commentId: number) => deleteComment(commentId),
+    onSuccess: () => {
+      // 댓글 목록 쿼리 무효화
+      queryClient.invalidateQueries({ queryKey: ['epigramComments'] });
+
+      // 성공 메시지 표시
+      toast({
+        title: '댓글 삭제 성공',
+        description: '댓글이 성공적으로 삭제되었습니다.',
+      });
+    },
+    onError: (error) => {
+      // 에러 메시지 표시
+      toast({
+        title: '댓글 삭제 실패',
+        description: `댓글 삭제 중 오류가 발생했습니다: ${error instanceof Error ? error.message : '알 수 없는 오류'}`,
+        variant: 'destructive',
+      });
+    },
+  });
+};
+
+export default useDeleteCommentMutation;
diff --git a/src/hooks/useGetEmotion.ts b/src/hooks/useGetEmotion.ts
new file mode 100644
index 00000000..e8555101
--- /dev/null
+++ b/src/hooks/useGetEmotion.ts
@@ -0,0 +1,13 @@
+import quries from '@/apis/queries';
+import getEmotion from '@/apis/getEmotion';
+import { EmotionType } from '@/types/emotion';
+import { GetMonthlyEmotionLogsRequestType } from '@/schema/emotion';
+import { useQuery } from '@tanstack/react-query';
+
+export const useMonthlyEmotionLogs = (requset: GetMonthlyEmotionLogsRequestType) => useQuery(quries.emotion.getMonthlyEmotionLogs(requset));
+
+export const useGetEmotion = () =>
+  useQuery<EmotionType | null, Error>({
+    queryKey: ['emotion'],
+    queryFn: getEmotion,
+  });
diff --git a/src/hooks/useGetEpigramsHooks.ts b/src/hooks/useGetEpigramsHooks.ts
new file mode 100644
index 00000000..04c5554c
--- /dev/null
+++ b/src/hooks/useGetEpigramsHooks.ts
@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+import getEpigrams from '@/apis/getEpigrams';
+import { GetEpigramsResponseType } from '@/schema/epigrams';
+
+const useEpigrams = (query: string, page: number, limit: number = 10) =>
+  useQuery<GetEpigramsResponseType, Error>({
+    queryKey: ['epigrams', query, page, limit],
+    queryFn: () => getEpigrams({ keyword: query, limit, cursor: page * limit }),
+    enabled: !!query,
+    staleTime: 5 * 60 * 1000, // 데이터 신선도 설정
+  });
+
+export default useEpigrams;
diff --git a/src/hooks/useKakaoLogin.ts b/src/hooks/useKakaoLogin.ts
new file mode 100644
index 00000000..14d8d81b
--- /dev/null
+++ b/src/hooks/useKakaoLogin.ts
@@ -0,0 +1,42 @@
+import postOauth from '@/apis/oauth';
+import { toast } from '@/components/ui/use-toast';
+import { useMutation } from '@tanstack/react-query';
+import { isAxiosError } from 'axios';
+import { useRouter } from 'next/router';
+
+const useKakaoLogin = () => {
+  const router = useRouter();
+
+  return useMutation({
+    mutationFn: async (code: string) => {
+      const result = await postOauth(code);
+      localStorage.setItem('accessToken', result.accessToken);
+      localStorage.setItem('refreshToken', result.refreshToken);
+      return result;
+    },
+    onSuccess: () => {
+      router.push('/');
+    },
+    onError: (error) => {
+      if (isAxiosError(error)) {
+        const status = error.response?.status;
+
+        if (!status) return;
+
+        if (status === 400) {
+          toast({ description: '잘못된 요청입니다. 요청을 확인해 주세요.', className: 'bg-state-error text-white font-semibold' });
+          router.push('/auth/SignIn');
+          return;
+        }
+
+        if (status >= 500) {
+          toast({ description: '서버에 문제가 발생했습니다. 잠시 후 다시 시도해 주세요.', className: 'bg-state-error text-white font-semibold' });
+        }
+      }
+
+      toast({ description: '알 수 없는 에러가 발생했습니다.', className: 'bg-state-error text-white font-semibold' });
+    },
+  });
+};
+
+export default useKakaoLogin;
diff --git a/src/hooks/useMediaQuery.ts b/src/hooks/useMediaQuery.ts
new file mode 100644
index 00000000..899c0fce
--- /dev/null
+++ b/src/hooks/useMediaQuery.ts
@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => setMatches(media.matches);
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [matches, query]);
+
+  return matches;
+}
+
+export default useMediaQuery;
diff --git a/src/hooks/usePatchCommentHook.ts b/src/hooks/usePatchCommentHook.ts
new file mode 100644
index 00000000..b215624d
--- /dev/null
+++ b/src/hooks/usePatchCommentHook.ts
@@ -0,0 +1,32 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { patchComment } from '@/apis/epigramComment';
+import { PatchCommentRequest } from '@/types/epigram.types';
+import { toast } from '@/components/ui/use-toast';
+
+const usePatchCommentMutation = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ commentId, ...commentData }: { commentId: number } & PatchCommentRequest) => patchComment(commentId, commentData),
+    onSuccess: () => {
+      // 댓글 목록 쿼리 무효화
+      queryClient.invalidateQueries({ queryKey: ['epigramComments'] });
+
+      // 성공 메시지 표시
+      toast({
+        title: '댓글 수정 성공',
+        description: '댓글이 성공적으로 수정되었습니다.',
+      });
+    },
+    onError: (error) => {
+      // 에러 메시지 표시
+      toast({
+        title: '댓글 수정 실패',
+        description: `댓글 수정 중 오류가 발생했습니다: ${error instanceof Error ? error.message : '알 수 없는 오류'}`,
+        variant: 'destructive',
+      });
+    },
+  });
+};
+
+export default usePatchCommentMutation;
diff --git a/src/hooks/usePostEmotion.ts b/src/hooks/usePostEmotion.ts
new file mode 100644
index 00000000..f13540ae
--- /dev/null
+++ b/src/hooks/usePostEmotion.ts
@@ -0,0 +1,11 @@
+import { useMutation } from '@tanstack/react-query';
+import postEmotion from '@/apis/postEmotion';
+import { EmotionType } from '@/types/emotion';
+import { PostEmotionResponseType } from '@/schema/emotion';
+
+const usePostEmotion = () =>
+  useMutation<PostEmotionResponseType, Error, EmotionType>({
+    mutationFn: postEmotion,
+  });
+
+export default usePostEmotion;
diff --git a/src/hooks/useRegisterMutation.ts b/src/hooks/useRegisterMutation.ts
new file mode 100644
index 00000000..8cbe5fe7
--- /dev/null
+++ b/src/hooks/useRegisterMutation.ts
@@ -0,0 +1,77 @@
+import { postSignup } from '@/apis/auth';
+import { toast } from '@/components/ui/use-toast';
+import { useMutation } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
+import { isAxiosError } from 'axios';
+
+const useRegisterMutation = () => {
+  const router = useRouter();
+
+  return useMutation({
+    mutationFn: postSignup,
+    onSuccess: (data) => {
+      localStorage.setItem('accessToken', data.accessToken);
+      localStorage.setItem('refreshToken', data.refreshToken);
+      router.push('/');
+    },
+    onError: (error) => {
+      if (isAxiosError(error)) {
+        const { status, data } = error.response || {};
+
+        if (!status) return;
+
+        if (status === 400) {
+          const errorMessage = data?.message || '잘못된 요청입니다. 입력 값을 확인해주세요.';
+
+          if (errorMessage.includes('이미 사용중인 이메일')) {
+            toast({
+              description: '이미 사용중인 이메일입니다.',
+              className: 'border-state-error text-state-error font-semibold',
+            });
+            return;
+          }
+
+          toast({
+            description: errorMessage,
+            className: 'border-state-error text-state-error font-semibold',
+          });
+          return;
+        }
+
+        if (status === 500) {
+          const errorMessage = data?.message || '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.';
+
+          // NOTE: swagger 문서에서 중복된 닉네임은 500에러와 함께 "Internal Server Error" 메시지로 응답 옴
+          if (errorMessage.includes('Internal Server Error')) {
+            toast({
+              description: '이미 존재하는 닉네임입니다.',
+              className: 'border-state-error text-state-error font-semibold',
+            });
+            return;
+          }
+
+          toast({
+            description: errorMessage,
+            className: 'border-state-error text-state-error font-semibold',
+          });
+          return;
+        }
+
+        if (status >= 500) {
+          toast({
+            description: '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
+            className: 'border-state-error text-state-error font-semibold',
+          });
+          return;
+        }
+
+        toast({
+          description: '알 수 없는 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
+          className: 'border-state-error text-state-error font-semibold',
+        });
+      }
+    },
+  });
+};
+
+export default useRegisterMutation;
diff --git a/src/hooks/useSignInMutation.ts b/src/hooks/useSignInMutation.ts
new file mode 100644
index 00000000..2f4ebb5e
--- /dev/null
+++ b/src/hooks/useSignInMutation.ts
@@ -0,0 +1,22 @@
+import { postSignin } from '@/apis/auth';
+import { toast } from '@/components/ui/use-toast';
+import { useMutation } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
+
+const useSigninMutation = () => {
+  const router = useRouter();
+
+  return useMutation({
+    mutationFn: postSignin,
+    onSuccess: (data) => {
+      localStorage.setItem('accessToken', data.accessToken);
+      localStorage.setItem('refreshToken', data.refreshToken);
+      router.push('/');
+    },
+    onError: () => {
+      toast({ description: '이메일 혹은 비밀번호를 확인해주세요.', className: 'border-state-error text-state-error font-semibold' });
+    },
+  });
+};
+
+export default useSigninMutation;
diff --git a/src/hooks/useTagManagementHook.ts b/src/hooks/useTagManagementHook.ts
new file mode 100644
index 00000000..dd0082de
--- /dev/null
+++ b/src/hooks/useTagManagementHook.ts
@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { UseFormSetValue, UseFormGetValues, UseFormSetError } from 'react-hook-form';
+import { AddEpigramFormType } from '@/schema/addEpigram';
+
+// NOTE: setError메서드로 FormField에 에러 설정 가능
+const useTagManagement = ({
+  setValue,
+  getValues,
+  setError,
+}: {
+  setValue: UseFormSetValue<AddEpigramFormType>;
+  getValues: UseFormGetValues<AddEpigramFormType>;
+  setError: UseFormSetError<AddEpigramFormType>;
+}) => {
+  const [currentTag, setCurrentTag] = useState('');
+
+  const handleAddTag = () => {
+    if (!currentTag || currentTag.length > 10) {
+      return;
+    }
+    const currentTags = getValues('tags') || [];
+
+    if (currentTags.length >= 3) {
+      return;
+    }
+    if (currentTags.includes(currentTag)) {
+      setError('tags', { type: 'manual', message: '이미 저장된 태그입니다.' });
+      return;
+    }
+
+    setValue('tags', [...currentTags, currentTag]);
+    setCurrentTag('');
+    setError('tags', { type: 'manual', message: '' });
+  };
+
+  const handleRemoveTag = (tagToRemove: string) => {
+    const currentTags = getValues('tags') || [];
+    setValue(
+      'tags',
+      currentTags.filter((tag) => tag !== tagToRemove),
+    );
+  };
+
+  return { currentTag, setCurrentTag, handleAddTag, handleRemoveTag };
+};
+
+export default useTagManagement;
diff --git a/src/hooks/userQueryHooks.ts b/src/hooks/userQueryHooks.ts
index 7c28fe75..f5043b15 100644
--- a/src/hooks/userQueryHooks.ts
+++ b/src/hooks/userQueryHooks.ts
@@ -1,6 +1,6 @@
 import quries from '@/apis/queries';
-import { updateMe } from '@/apis/user';
-import { GetUserReponseType, GetUserRequestType, PatchMeRequestType } from '@/schema/user';
+import { updateMe, createPresignedUrl } from '@/apis/user';
+import { GetUserRequestType, PatchMeRequestType, PostPresignedUrlRequestType, PostPresignedUrlResponseType } from '@/schema/user';
 import { MutationOptions } from '@/types/query';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
@@ -8,7 +8,7 @@ export const useMeQuery = () => useQuery(quries.user.getMe());
 
 export const useUserQuery = (requset: GetUserRequestType) => useQuery(quries.user.getUser(requset));
 
-export const useUpdateMe = (options: MutationOptions<GetUserReponseType>) => {
+export const useUpdateMe = (options: MutationOptions<PatchMeRequestType>) => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: (request: PatchMeRequestType) => updateMe(request),
@@ -21,3 +21,13 @@ export const useUpdateMe = (options: MutationOptions<GetUserReponseType>) => {
     },
   });
 };
+
+// presignedUrl 생성
+export const useCreatePresignedUrl = (options?: MutationOptions<PostPresignedUrlRequestType>) =>
+  useMutation({
+    mutationFn: (request: PostPresignedUrlRequestType) => createPresignedUrl(request),
+    ...options,
+    onSuccess: (data: PostPresignedUrlResponseType) =>
+      // 이미지 URL 반환
+      data.url,
+  });
diff --git a/src/pageLayout/Epigram/AddEpigram.tsx b/src/pageLayout/Epigram/AddEpigram.tsx
new file mode 100644
index 00000000..f314c730
--- /dev/null
+++ b/src/pageLayout/Epigram/AddEpigram.tsx
@@ -0,0 +1,316 @@
+import React, { KeyboardEvent, useCallback, useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import Header from '@/components/Header/Header';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Textarea } from '@/components/ui/textarea';
+import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form';
+import { AddEpigramFormSchema, AddEpigramFormType } from '@/schema/addEpigram';
+import useAddEpigram from '@/hooks/epigramQueryHook';
+import { useRouter } from 'next/router';
+import { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog';
+import useTagManagement from '@/hooks/useTagManagementHook';
+import { useMeQuery } from '@/hooks/userQueryHooks';
+
+function AddEpigram() {
+  const router = useRouter();
+  const { data: userData, isPending, isError } = useMeQuery();
+  const [isAlertOpen, setIsAlertOpen] = useState(false);
+  const [alertContent, setAlertContent] = useState({ title: '', description: '' });
+  const [selectedAuthorOption, setSelectedAuthorOption] = useState('directly'); // 기본값을 'directly'로 설정
+  const [isFormValid, setIsFormValid] = useState(false);
+
+  const form = useForm<AddEpigramFormType>({
+    resolver: zodResolver(AddEpigramFormSchema),
+    defaultValues: {
+      content: '',
+      author: '',
+      referenceTitle: '',
+      referenceUrl: '',
+      tags: [],
+    },
+  });
+
+  // NOTE: 필수항목들에 값이 들어있는지 확인 함수
+  const checkFormEmpty = useCallback(() => {
+    const { content, author, tags } = form.getValues();
+    return content.trim() !== '' && author.trim() !== '' && tags.length > 0;
+  }, [form]);
+
+  // NOTE: form값이 변경될때 필수항목들이 들어있는지 확인
+  const watchForm = useCallback(() => {
+    setIsFormValid(checkFormEmpty());
+  }, [checkFormEmpty]);
+
+  useEffect(() => {
+    const subscription = form.watch(watchForm);
+    return () => subscription.unsubscribe();
+  }, [form, watchForm]);
+
+  const { currentTag, setCurrentTag, handleAddTag, handleRemoveTag } = useTagManagement({
+    setValue: form.setValue,
+    getValues: form.getValues,
+    setError: form.setError,
+  });
+  const addEpigramMutation = useAddEpigram({
+    onSuccess: () => {
+      setAlertContent({
+        title: '등록 완료',
+        description: '등록이 완료되었습니다.',
+      });
+      setIsAlertOpen(true);
+      form.reset();
+    },
+    onError: () => {
+      setAlertContent({
+        title: '등록 실패',
+        description: '다시 시도해주세요.',
+      });
+      setIsAlertOpen(true);
+    },
+  });
+
+  const handleAlertClose = () => {
+    setIsAlertOpen(false);
+    if (alertContent.title === '등록 완료') {
+      router.push(`/epigram/${addEpigramMutation.data?.id}`);
+    }
+  };
+
+  const AUTHOR_OPTIONS = [
+    { value: 'directly', label: '직접 입력' },
+    { value: 'unknown', label: '알 수 없음' },
+    { value: 'me', label: '본인' },
+  ];
+
+  // NOTE: default를 직접 입력으로 설정
+  // NOTE: 본인을 선택 시 유저의 nickname이 들어감
+  const handleAuthorChange = async (value: string) => {
+    setSelectedAuthorOption(value);
+    let authorValue: string;
+
+    switch (value) {
+      case 'unknown':
+        authorValue = '알 수 없음';
+        break;
+      case 'me':
+        if (isPending) {
+          authorValue = '로딩 중...';
+        } else if (userData) {
+          authorValue = userData.nickname;
+        } else {
+          authorValue = '본인 (정보 없음)';
+        }
+        break;
+      default:
+        authorValue = '';
+    }
+    form.setValue('author', authorValue);
+  };
+
+  if (isPending) {
+    return <div>사용자 정보를 불러오는 중...</div>;
+  }
+
+  if (isError) {
+    return <div>사용자 정보를 불러오는 데 실패했습니다. 페이지를 새로고침 해주세요.</div>;
+  }
+
+  // NOTE: 태그를 저장하려고 할때 enter키를 누르면 폼제출이 되는걸 방지
+  const handleKeyUp = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleAddTag();
+    }
+  };
+
+  // NOTE: url와title은 필수 항목이 아니라서 빈칸으로 제출할 때 항목에서 제외
+  const handleSubmit = (data: AddEpigramFormType) => {
+    const submitData = { ...data };
+
+    if (!submitData.referenceUrl) {
+      delete submitData.referenceUrl;
+    }
+
+    if (!submitData.referenceTitle) {
+      delete submitData.referenceTitle;
+    }
+
+    addEpigramMutation.mutate(submitData);
+  };
+
+  return (
+    <>
+      <Header icon='search' routerPage='/search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
+      <div className='border-t-2 w-full flex flex-col justify-center items-center'>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(handleSubmit)} className='flex flex-col justify-center item-center gap-6 lg:gap-8 w-[312px] md:w-[384px] lg:w-[640px] py-6'>
+            <FormField
+              control={form.control}
+              name='content'
+              render={({ field }) => (
+                <FormItem className='flex flex-col gap-2 lg:gap-4 h-44 lg:h-52'>
+                  <FormLabel htmlFor='content' className='text-semibold lg:text-2xl text-black-600'>
+                    내용
+                    <span className='text-state-error'>*</span>
+                  </FormLabel>
+                  <FormControl>
+                    <Textarea className='h-[132px] lg:h-[148px] lg:text-xl border-blue-300 border-2 rounded-xl resize-none p-2' id='content' placeholder='500자 이내로 입력해주세요.' {...field} />
+                  </FormControl>
+                  <FormMessage className='text-state-error text-right' />
+                </FormItem>
+              )}
+            />
+            <div className='flex flex-col gap-2 lg:gap-4'>
+              <FormLabel className='text-semibold lg:text-2xl text-black-600'>
+                저자
+                <span className='text-state-error'>*</span>
+              </FormLabel>
+              <RadioGroup onValueChange={handleAuthorChange} value={selectedAuthorOption}>
+                <div className='flex gap-2'>
+                  {AUTHOR_OPTIONS.map((option) => (
+                    <div key={option.value} className='flex items-center space-x-2 text-xl'>
+                      <RadioGroupItem value={option.value} id={option.value} />
+                      <FormLabel htmlFor={option.value} className='font-medium lg:text-xl'>
+                        {option.label}
+                      </FormLabel>
+                    </div>
+                  ))}
+                </div>
+              </RadioGroup>
+            </div>
+            <FormField
+              control={form.control}
+              name='author'
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    {/* NOTE: 직접 입력 radio버튼을 선택하지않으면 수정 불가 */}
+                    <Input
+                      className='w-full h-11 lg:h-16 lg:text-2xl border-blue-300 border-2 rounded-xl p-2'
+                      id='author'
+                      type='text'
+                      placeholder='저자 이름 입력'
+                      {...field}
+                      disabled={selectedAuthorOption !== 'directly'}
+                    />
+                  </FormControl>
+                  <FormMessage className='text-state-error text-right' />
+                </FormItem>
+              )}
+            />
+            <fieldset className='flex flex-col gap-2 lg:gap-4'>
+              <legend className='text-semibold lg:text-2xl text-black-600 mb-1'>출처</legend>
+              <FormField
+                control={form.control}
+                name='referenceTitle'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        className='h-11 lg:h-16 lg:text-2xl border-blue-300 border-2 rounded-xl p-2'
+                        id='referenceTitle'
+                        type='text'
+                        placeholder='출처 제목 입력'
+                        aria-label='출처 제목'
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage className='text-state-error text-right' />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='referenceUrl'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        className='h-11 lg:h-16 lg:text-2xl border-blue-300 border-2 rounded-xl p-2'
+                        id='referenceUrl'
+                        type='text'
+                        placeholder='URL (ex.http://www.website.com)'
+                        aria-label='출처 URL'
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage className='text-state-error text-right' />
+                  </FormItem>
+                )}
+              />
+            </fieldset>
+            <FormField
+              control={form.control}
+              name='tags'
+              render={({ field }) => (
+                <FormItem className='flex flex-col gap-2 lg:gap-4'>
+                  <FormLabel htmlFor='tags' className='text-semibold lg:text-2xl text-black-600'>
+                    태그
+                    <span className='text-state-error'>*</span>
+                  </FormLabel>
+                  <div className='relative'>
+                    <Input
+                      className='h-11 lg:h-16 lg:text-2xl border-blue-300 border-2 rounded-xl p-2 pr-20'
+                      id='tags'
+                      type='text'
+                      placeholder='입력하여 태그 추가(최대10자)'
+                      value={currentTag}
+                      onChange={(e) => {
+                        setCurrentTag(e.target.value);
+                        form.clearErrors('tags');
+                      }}
+                      onKeyUp={handleKeyUp}
+                      maxLength={10}
+                    />
+
+                    <Button
+                      type='button'
+                      className='absolute right-2 top-1/2 transform -translate-y-1/2 h-8 px-3 bg-blue-500 text-white rounded'
+                      onClick={handleAddTag}
+                      disabled={field.value.length >= 3 || currentTag.length === 0}
+                    >
+                      저장
+                    </Button>
+                  </div>
+                  <FormMessage className='text-state-error text-right' />
+                  {/* NOTE: 태그의 키값을 변경하는 대신 중복된 태그를 저장 못하게 설정 */}
+                  <div className='flex flex-wrap gap-2 mt-2'>
+                    {field.value.map((tag) => (
+                      <div key={tag} className='bg-background-100 px-2 py-1 rounded-full flex items-center'>
+                        <span className='text-sm md:text-lg lg:text-2xl'>{tag}</span>
+                        <Button type='button' className='text-red-500 text-sm md:text-lg lg:text-2xl p-0 px-2' onClick={() => handleRemoveTag(tag)}>
+                          ×
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                </FormItem>
+              )}
+            />
+            {/* NOTE: 필수항목들에 값이 채워져있으면 폼제출 버튼 활성화 */}
+            <Button className='h-11 lg:h-16 rounded-xl text-semibold lg:text-2xl text-white bg-black-500 disabled:bg-blue-400 ' type='submit' disabled={addEpigramMutation.isPending || !isFormValid}>
+              {addEpigramMutation.isPending ? '제출 중...' : '작성 완료'}
+            </Button>
+          </form>
+        </Form>
+      </div>
+
+      <AlertDialog open={isAlertOpen} onOpenChange={setIsAlertOpen}>
+        <AlertDialogContent className='bg-white'>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{alertContent.title}</AlertDialogTitle>
+            <AlertDialogDescription>{alertContent.description}</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogAction onClick={handleAlertClose}>확인</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
+
+export default AddEpigram;
diff --git a/src/pageLayout/MypageLayout/MyPageLayout.tsx b/src/pageLayout/MypageLayout/MyPageLayout.tsx
new file mode 100644
index 00000000..12627ade
--- /dev/null
+++ b/src/pageLayout/MypageLayout/MyPageLayout.tsx
@@ -0,0 +1,47 @@
+import Header from '@/components/Header/Header';
+import { useMeQuery } from '@/hooks/userQueryHooks';
+import UserInfo from '@/types/user';
+import EmotionMonthlyLogs from '@/user/ui-profile/EmotionMonthlyLogs';
+import Profile from '@/user/ui-profile/Profile';
+import { useRouter } from 'next/navigation';
+
+export default function MyPageLayout() {
+  const { data, isLoading, isError }: { data: UserInfo | undefined; isLoading: boolean; isError: boolean } = useMeQuery();
+
+  const router = useRouter();
+
+  if (isError) {
+    return <div>error</div>;
+  }
+
+  if (isLoading) {
+    return <div>loading</div>;
+  }
+
+  // NOTE: 회원정보가 확인되지 않는다면 로그인 페이지로 이동
+  if (!data) {
+    router.push('/login');
+    return false;
+  }
+
+  return (
+    <div className='bg-background-100 w-full relative h-dvh'>
+      <Header icon='back' routerPage='/mypage' isLogo={false} insteadOfLogo='' isProfileIcon={false} isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
+      <div className='bg-background-100 w-full h-[200px]'></div>
+      <div className='w-full flex flex-col items-center bg-blue-100 rounded-3xl relative shadow-3xl'>
+        <Profile image={data.image} nickname={data.nickname} />
+        <div className='flex flex-col w-full lg:max-w-[640px] md:max-w-[640px] mt-[160px] space-y-0 md:mb-10 mb-5 border border-black'>오늘의 감정</div>
+        <EmotionMonthlyLogs userId={data.id} />
+      </div>
+      <div className='bg-background-100 flex flex-col items-center w-full py-[100px]'>
+        <div className='flex flex-col w-full lg:max-w-[640px] md:max-w-[640px] gap-12'>
+          <div className='inline-flex gap-6'>
+            <p className='text-neutral-400 font-semibold text-2xl'>내 에피그램(19)</p>
+            <p className='text-black-600 font-semibold text-2xl'>내 댓글(110)</p>
+          </div>
+          <div className='w-full'>댓글 컴포넌트</div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pageLayout/SearchLayout/SearchLayout.tsx b/src/pageLayout/SearchLayout/SearchLayout.tsx
new file mode 100644
index 00000000..02c68db9
--- /dev/null
+++ b/src/pageLayout/SearchLayout/SearchLayout.tsx
@@ -0,0 +1,114 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useRouter } from 'next/router';
+import Header from '@/components/Header/Header';
+import SearchBar from '@/components/search/SearchBar';
+import RecentSearches from '@/components/search/RecentSearches';
+import SearchResults from '@/components/search/SearchResults';
+import useEpigrams from '@/hooks/useGetEpigramsHooks';
+import { GetEpigramsResponseType } from '@/schema/epigrams';
+
+function SearchLayout() {
+  const [searches, setSearches] = useState<string[]>([]);
+  const [currentSearch, setCurrentSearch] = useState<string>('');
+  const [page, setPage] = useState(0);
+  const [allResults, setAllResults] = useState<GetEpigramsResponseType['list']>([]);
+  const [totalCount, setTotalCount] = useState<number>(0);
+  const [nextCursor, setNextCursor] = useState<number | null>(null);
+  const observerRef = useRef<IntersectionObserver | null>(null);
+  const loadMoreRef = useRef<HTMLDivElement | null>(null);
+  const router = useRouter();
+
+  const isBrowser = typeof window !== 'undefined'; // 브라우저 환경에서만 localStorage에 접근
+  const accessToken = isBrowser ? localStorage.getItem('accessToken') : null;
+  const isUserLoggedIn = !!accessToken;
+  const userId = isUserLoggedIn ? 'loggedInUser' : 'guest'; // 사용자 ID를 기반으로 저장 키 생성
+  const recentSearchesKey = `recentSearches_${userId}`;
+
+  const { data: searchResults, isLoading } = useEpigrams(currentSearch, page);
+
+  // 새로운 검색 결과를 allResults에 누적, 총 결과 개수와 다음 커서를 업데이트
+  useEffect(() => {
+    if (searchResults?.list) {
+      setAllResults((prevResults) => [...prevResults, ...searchResults.list]);
+      setTotalCount(searchResults.totalCount);
+      setNextCursor(searchResults.nextCursor);
+    }
+  }, [searchResults]);
+
+  // observerRef가 화면에 나타날 때 페이지 증가,추가 데이터 로드
+  useEffect(() => {
+    if (observerRef.current) observerRef.current.disconnect();
+
+    observerRef.current = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting && !isLoading && nextCursor !== null) {
+        setPage((prevPage) => prevPage + 1);
+      }
+    });
+
+    if (loadMoreRef.current) {
+      observerRef.current.observe(loadMoreRef.current);
+    }
+
+    // 옵저버 클린업 (메모리 누수 방지)
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+    };
+  }, [allResults.length, isLoading, nextCursor]);
+
+  // 컴포넌트가 처음 렌더링 될 때 저장된 최근 검색어 불러오기, 로그인된 사용자 별로 최근 검색어를 구분하여 URL에 데이터 저장
+  useEffect(() => {
+    if (isBrowser) {
+      const storedSearches = JSON.parse(localStorage.getItem(recentSearchesKey) || '[]');
+      setSearches(storedSearches);
+    }
+
+    const searchParams = new URLSearchParams(window.location.search);
+    const query = searchParams.get('q');
+    if (query) {
+      setCurrentSearch(query);
+    }
+  }, [recentSearchesKey]);
+
+  // 모두지우기 클릭 시 저장된 최근 검색어 삭제
+  const handleClearAll = () => {
+    setSearches([]);
+    if (isBrowser) {
+      localStorage.removeItem(recentSearchesKey);
+    }
+  };
+
+  // 검색어가 제출될 때 작동
+  const handleSearch = (search: string) => {
+    setPage(0);
+    setAllResults([]);
+    setSearches((prevSearches) => {
+      const updatedSearches = [search, ...prevSearches.filter((item) => item !== search)].slice(0, 10);
+      if (isBrowser) {
+        localStorage.setItem(recentSearchesKey, JSON.stringify(updatedSearches));
+      }
+      return updatedSearches;
+    });
+    setCurrentSearch(search);
+
+    const searchParams = new URLSearchParams(window.location.search);
+    searchParams.set('q', search);
+    router.push(`/search?${searchParams.toString()}`);
+  };
+
+  return (
+    <>
+      <Header icon='search' routerPage='/search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />;
+      <div className='container mx-auto max-w-screen-sm bg-blue-100'>
+        <SearchBar onSearch={handleSearch} currentSearch={currentSearch} />
+        <RecentSearches searches={searches} onSearch={handleSearch} onClear={handleClearAll} />
+        {currentSearch && <SearchResults results={{ totalCount, nextCursor: nextCursor ?? 0, list: allResults }} query={currentSearch} isLoading={isLoading} />}
+        <div ref={loadMoreRef} />
+      </div>
+    </>
+  );
+}
+
+export default SearchLayout;
diff --git a/src/pageLayout/index.ts b/src/pageLayout/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 37d2f8d3..107acf01 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -3,6 +3,7 @@ import '@/styles/globals.css';
 import type { AppProps } from 'next/app';
 import { HydrationBoundary, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import Toaster from '@/components/ui/toaster';
 
 export default function App({ Component, pageProps }: AppProps) {
   const [queryClient] = React.useState(() => new QueryClient());
@@ -10,6 +11,7 @@ export default function App({ Component, pageProps }: AppProps) {
     <QueryClientProvider client={queryClient}>
       <HydrationBoundary state={pageProps.dehydratedState}>
         <Component {...pageProps} />
+        <Toaster />
       </HydrationBoundary>
       <ReactQueryDevtools />
     </QueryClientProvider>
diff --git a/src/pages/addEpigram.tsx b/src/pages/addEpigram.tsx
new file mode 100644
index 00000000..28e1645e
--- /dev/null
+++ b/src/pages/addEpigram.tsx
@@ -0,0 +1,7 @@
+import AddEpigram from '@/pageLayout/Epigram/AddEpigram';
+
+function Add() {
+  return <AddEpigram />;
+}
+
+export default Add;
diff --git a/src/pages/auth/SignIn.tsx b/src/pages/auth/SignIn.tsx
new file mode 100644
index 00000000..c1bfd025
--- /dev/null
+++ b/src/pages/auth/SignIn.tsx
@@ -0,0 +1,99 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form';
+import { PostSigninRequest, PostSigninRequestType } from '@/schema/auth';
+import useSigninMutation from '@/hooks/useSignInMutation';
+
+export default function SignIn() {
+  const mutationSignin = useSigninMutation();
+  // 폼 정의
+  const form = useForm<PostSigninRequestType>({
+    resolver: zodResolver(PostSigninRequest),
+    mode: 'onBlur',
+    defaultValues: {
+      email: '',
+      password: '',
+    },
+  });
+
+  // TODO: 나중에 컴포넌트 분리하기
+  return (
+    <div className='flex flex-col justify-center items-center bg-background-100 w-full h-screen'>
+      <header className='mb-[50px] md:mb-[60px]'>
+        <Link href='/'>
+          <Image src='/lg.svg' alt='logo' width={172} height={48} />
+        </Link>
+      </header>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit((values: PostSigninRequestType) => mutationSignin.mutate(values))} className='flex flex-col items-center lg:gap-6 gap-5 w-full px-6'>
+          <div className='flex flex-col items-center lg:gap-4 gap-[10px] w-full lg:max-w-[640px] md:max-w-[384px]'>
+            <FormField
+              control={form.control}
+              name='email'
+              render={({ field, fieldState }) => (
+                <FormItem className='w-full space-y-0'>
+                  <FormControl>
+                    <Input
+                      type='text'
+                      placeholder='이메일'
+                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 ${fieldState.invalid ? 'border-2 border-state-error' : ''}`}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage className='flex justify-end text-[13px] text-state-error' />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='password'
+              render={({ field, fieldState }) => (
+                <FormItem className='w-full space-y-0'>
+                  <FormControl>
+                    <Input
+                      type='password'
+                      placeholder='비밀번호'
+                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 ${fieldState.invalid ? 'border-2 border-state-error' : ''}`}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage className='flex justify-end font-pretendard text-[13px] text-state-error' />
+                </FormItem>
+              )}
+            />
+          </div>
+          <Button
+            type='submit'
+            disabled={!form.formState.isValid}
+            className={`w-full lg:max-w-[640px] md:max-w-[384px] lg:h-16 h-11 bg-black-500 text-white lg:text-xl md:text-base rounded-xl md:mb-[10px] mb-[11px] ${!form.formState.isValid ? 'bg-blue-300' : 'bg-black-500'}`}
+          >
+            로그인
+          </Button>
+        </form>
+      </Form>
+      <div className=' flex justify-end items-center gap-2 w-full lg:max-w-[640px] md:max-w-[384px] md:px-0 px-6 md:mb-[60px] mb-[50px]'>
+        <h2 className=' text-blue-400 lg:text-xl md:text-base sm:text-sm'>회원이 아니신가요?</h2>
+        <Link href='/'>
+          <Button type='button' variant='link' className='lg:text-xl md:text-base sm:text-sm p-0 underline'>
+            가입하기
+          </Button>
+        </Link>
+      </div>
+      <div className='flex gap-4'>
+        <Link href={`https://nid.naver.com/oauth2.0/authorize?client_id=${process.env.NEXT_PUBLIC_NAVER_CLIENT_ID}&redirect_uri=http://localhost:3000&response_type=code`}>
+          <Image src='/logo-naver.svg' alt='logo-naver' width={60} height={60} className='md:size-[60px] size-10' />
+        </Link>
+        <Link href={`https://accounts.google.com/o/oauth2/v2/auth?client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}&redirect_uri=http://localhost:3000&response_type=code&scope=email%20profile`}>
+          <Image src='/logo-google.svg' alt='logo-google' width={60} height={60} className='md:size-[60px] size-10' />
+        </Link>
+        <Link href={`https://kauth.kakao.com/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_KAKAO_CLIENT_ID}&redirect_uri=${process.env.NEXT_PUBLIC_REDIRECT_URI}&response_type=code`}>
+          <Image src='/logo-kakao.svg' alt='logo-kakao' width={60} height={60} className='md:size-[60px] size-10' />
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/auth/SignUp.tsx b/src/pages/auth/SignUp.tsx
new file mode 100644
index 00000000..e6c52906
--- /dev/null
+++ b/src/pages/auth/SignUp.tsx
@@ -0,0 +1,129 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { PostSignUpRequest, PostSignUpRequestType } from '@/schema/auth';
+import { useForm } from 'react-hook-form';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import useRegisterMutation from '@/hooks/useRegisterMutation';
+
+export default function SignUp() {
+  const mutationRegister = useRegisterMutation();
+
+  const form = useForm<PostSignUpRequestType>({
+    resolver: zodResolver(PostSignUpRequest),
+    mode: 'onBlur',
+    defaultValues: {
+      email: '',
+      password: '',
+      passwordConfirmation: '',
+      nickname: '',
+    },
+  });
+
+  return (
+    <div className='flex flex-col justify-center items-center bg-background-100 w-full min-h-screen'>
+      <header className='h-full mb-[50px] md:mb-[60px]'>
+        <Link href='/'>
+          <Image src='/lg.svg' alt='logo' width={172} height={48} />
+        </Link>
+      </header>
+      <div className='w-full'>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit((values: PostSignUpRequestType) => mutationRegister.mutate(values))} className='flex flex-col items-center w-full h-full px-6'>
+            <FormField
+              control={form.control}
+              name='email'
+              render={({ field, fieldState }) => (
+                <FormItem className='flex flex-col w-full lg:max-w-[640px] md:max-w-[384px] space-y-0 md:mb-10 mb-5'>
+                  <FormLabel className={`md:mb-5 mb-4 font-pretendard lg:text-xl md:text-base sm:text-sm ${fieldState.invalid ? 'text-state-error' : 'text-blue-900'}`}>이메일</FormLabel>
+                  <FormControl>
+                    <Input
+                      type='text'
+                      placeholder='이메일'
+                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid ? 'border-2 border-state-error' : ''}`}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage className='flex justify-end text-[13px] text-state-error' />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='password'
+              render={({ field, fieldState }) => (
+                <FormItem className='flex flex-col w-full lg:max-w-[640px] md:max-w-[384px] space-y-0 md:mb-4 mb-[10px]'>
+                  <FormLabel className={`md:mb-5 mb-4 font-pretendard lg:text-xl md:text-base sm:text-sm ${fieldState.invalid ? 'text-state-error' : 'text-blue-900'}`}>비밀번호</FormLabel>
+                  <FormControl>
+                    <Input
+                      type='password'
+                      placeholder='비밀번호'
+                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid ? 'border-2 border-state-error' : ''}`}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage className='flex justify-end text-[13px] text-state-error' />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='passwordConfirmation'
+              render={({ field, fieldState }) => (
+                <FormItem className='flex flex-col w-full lg:max-w-[640px] md:max-w-[384px] space-y-0 md:mb-10 mb-5'>
+                  <FormControl>
+                    <Input
+                      type='password'
+                      placeholder='비밀번호 확인'
+                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid ? 'border-2 border-state-error' : ''}`}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage className='flex justify-end text-[13px] text-state-error' />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='nickname'
+              render={({ field, fieldState }) => (
+                <FormItem className='flex flex-col w-full lg:max-w-[640px] md:max-w-[384px] md:mb-10 mb-[30px] space-y-0'>
+                  <FormLabel className={`md:mb-5 mb-4 font-pretendard lg:text-xl md:text-base sm:text-sm ${fieldState.invalid ? 'text-state-error' : 'text-blue-900'}`}>닉네임</FormLabel>
+                  <FormControl>
+                    <Input
+                      type='text'
+                      placeholder='닉네임'
+                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid ? 'border-2 border-state-error' : ''}`}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage className='flex justify-end text-[13px] text-state-error' />
+                </FormItem>
+              )}
+            />
+            <Button
+              disabled={!form.formState.isValid}
+              type='submit'
+              className={`w-full lg:max-w-[640px] md:max-w-[384px] lg:h-16 h-11 md:mb-[60px] mb-[50px] bg-black-500 font-pretendard text-white lg:text-xl md:text-base rounded-xl ${!form.formState.isValid ? 'bg-blue-300' : 'bg-black-500'}`}
+            >
+              가입하기
+            </Button>
+          </form>
+        </Form>
+      </div>
+      <div className='flex justify-center gap-4'>
+        <Button type='button' className='md:size-[60px] p-0'>
+          <Image src='/logo-naver.svg' alt='logo-naver' width={60} height={60} className='md:size-[60px] size-10' />
+        </Button>
+        <Button type='button' className='md:size-[60px] p-0'>
+          <Image src='/logo-google.svg' alt='logo-google' width={60} height={60} className='md:size-[60px] size-10' />
+        </Button>
+        <Button type='button' className='md:size-[60px] p-0'>
+          <Image src='/logo-kakao.svg' alt='logo-kakao' width={60} height={60} className='md:size-[60px] size-10' />
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/auth/redirect/kakao/index.tsx b/src/pages/auth/redirect/kakao/index.tsx
new file mode 100644
index 00000000..46e82db7
--- /dev/null
+++ b/src/pages/auth/redirect/kakao/index.tsx
@@ -0,0 +1,18 @@
+import useKakaoLogin from '@/hooks/useKakaoLogin';
+import { useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
+
+export default function Kakao() {
+  const searchParams = useSearchParams();
+  const code = searchParams.get('code');
+  const { mutate: login } = useKakaoLogin();
+
+  useEffect(() => {
+    if (code) {
+      login(code);
+    } else {
+      /* eslint-disable no-console */
+      console.log(code); // code가 없을 때 콘솔에 출력
+    }
+  }, [code, login]);
+}
diff --git a/src/pages/mypage/index.tsx b/src/pages/mypage/index.tsx
new file mode 100644
index 00000000..69b8c83e
--- /dev/null
+++ b/src/pages/mypage/index.tsx
@@ -0,0 +1,5 @@
+import MyPageLayout from '@/pageLayout/MypageLayout/MyPageLayout';
+
+export default function mypage() {
+  return <MyPageLayout />;
+}
diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx
new file mode 100644
index 00000000..0914e7b7
--- /dev/null
+++ b/src/pages/search/index.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import SearchLayout from '@/pageLayout/SearchLayout/SearchLayout';
+
+function Search() {
+  return <SearchLayout />;
+}
+
+export default Search;
diff --git a/src/schema/addEpigram.ts b/src/schema/addEpigram.ts
new file mode 100644
index 00000000..d12285b1
--- /dev/null
+++ b/src/schema/addEpigram.ts
@@ -0,0 +1,44 @@
+import { z } from 'zod';
+
+const urlRegex = /^https?:\/\/.+/;
+
+export const AddEpigramRequestSchema = z.object({
+  tags: z.array(z.string().min(1).max(10)).max(3),
+  referenceUrl: z.string().url().regex(urlRegex).optional().nullable(),
+  referenceTitle: z.string().max(100).optional().nullable(),
+  author: z.string().min(1).max(30),
+  content: z.string().min(1).max(500),
+});
+
+export const AddEpigramResponseSchema = z.object({
+  likeCount: z.number(),
+  tags: z.array(
+    z.object({
+      name: z.string().min(1).max(10),
+      id: z.number().int().positive(),
+    }),
+  ),
+  writerId: z.number().int().positive(),
+  referenceUrl: z.string().url().regex(urlRegex).nullable(),
+  referenceTitle: z.string().max(100).nullable(),
+  author: z.string().min(1).max(30),
+  content: z.string().min(1).max(500),
+  id: z.number().int().positive(),
+});
+
+export const AddEpigramFormSchema = z
+  .object({
+    tags: z.array(z.string().min(1).max(10)).min(1, { message: '최소 1개의 태그를 추가해주세요.' }).max(3),
+    author: z.string().min(1, { message: '저자의 이름을 입력해주세요' }).max(30, { message: '30자 이내로 입력해주세요.' }),
+    content: z.string().min(1, { message: '내용을 입력해주세요.' }).max(500, { message: '500자 이내로 입력해주세요.' }),
+    referenceUrl: z.union([z.string().regex(urlRegex, { message: '올바른 URL 형식이 아닙니다.' }), z.literal('')]).optional(),
+    referenceTitle: z.union([z.string().max(100, { message: '100자 이내로 입력해주세요.' }), z.literal('')]).optional(),
+  })
+  .refine((data) => (data.referenceUrl === '' && data.referenceTitle === '') || (data.referenceUrl !== '' && data.referenceTitle !== ''), {
+    message: 'URL과 제목을 모두 입력하거나 모두 비워주세요.',
+    path: ['referenceUrl', 'referenceTitle'],
+  });
+
+export type AddEpigramRequestType = z.infer<typeof AddEpigramRequestSchema>;
+export type AddEpigramResponseType = z.infer<typeof AddEpigramResponseSchema>;
+export type AddEpigramFormType = z.infer<typeof AddEpigramFormSchema>;
diff --git a/src/schema/auth.ts b/src/schema/auth.ts
new file mode 100644
index 00000000..5de73332
--- /dev/null
+++ b/src/schema/auth.ts
@@ -0,0 +1,50 @@
+import * as z from 'zod';
+
+const PWD_VALIDATION_REGEX = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,}$/;
+
+// NOTE: 회원가입 스키마
+export const PostSignUpRequest = z
+  .object({
+    email: z.string().min(1, { message: '이메일은 필수 입력입니다.' }).email({ message: '이메일 형식으로 작성해 주세요.' }),
+    password: z
+      .string()
+      .min(1, { message: '비밀번호는 필수 입력입니다.' })
+      .min(8, { message: '비밀번호는 최소 8자 이상입니다.' })
+      .regex(PWD_VALIDATION_REGEX, { message: '비밀번호는 숫자, 영문, 특수문자로만 가능합니다.' }),
+    passwordConfirmation: z.string().min(1, { message: '비밀번호 확인을 입력해주세요.' }),
+    nickname: z.string().min(1, { message: '닉네임은 필수 입력입니다.' }).max(20, { message: '닉네임은 최대 20자까지 가능합니다.' }),
+  })
+  .refine((data) => data.password === data.passwordConfirmation, {
+    message: '비밀번호가 일치하지 않습니다.',
+    path: ['passwordConfirmation'],
+  });
+
+// NOTE: 로그인 스키마
+
+export const PostSigninRequest = z.object({
+  email: z.string().min(1, { message: '이메일은 필수 입력입니다.' }).email({ message: '올바른 이메일 주소가 아닙니다.' }),
+  password: z.string().min(1, { message: '비밀번호는 필수 입력입니다.' }),
+});
+
+const User = z.object({
+  id: z.number(),
+  email: z.string().email(),
+  nickname: z.string(),
+  teamId: z.string(),
+  updatedAt: z.coerce.date(),
+  createdAt: z.coerce.date(),
+  image: z.string(),
+});
+
+export const PostAuthResponse = z.object({
+  accessToken: z.string(),
+  refreshToken: z.string(),
+  user: User,
+});
+
+// NOTE: 회원가입 타입
+export type PostSignUpRequestType = z.infer<typeof PostSignUpRequest>;
+export type PostSignUpResponseType = z.infer<typeof PostAuthResponse>;
+// NOTE: 로그인 타입
+export type PostSigninRequestType = z.infer<typeof PostSigninRequest>;
+export type PostSigninResponseType = z.infer<typeof PostAuthResponse>;
diff --git a/src/schema/comment.ts b/src/schema/comment.ts
new file mode 100644
index 00000000..391557df
--- /dev/null
+++ b/src/schema/comment.ts
@@ -0,0 +1,44 @@
+import { z } from 'zod';
+
+const WriterSchema = z.object({
+  image: z.string().nullable(),
+  nickname: z.string(),
+  id: z.number(),
+});
+
+const CommentContentSchema = z.string().min(1);
+
+const CommentSchema = z.object({
+  epigramId: z.number(),
+  writer: WriterSchema,
+  updatedAt: z.string().datetime(),
+  createdAt: z.string().datetime(),
+  isPrivate: z.boolean(),
+  content: CommentContentSchema,
+  id: z.number(),
+});
+
+const CommentResponseSchema = z.object({
+  totalCount: z.number(),
+  nextCursor: z.number().nullable(),
+  list: z.array(CommentSchema),
+});
+
+const CommentRequestSchema = z.object({
+  id: z.number().int().positive(),
+  limit: z.number().int().positive().max(100),
+  cursor: z.number().optional(),
+});
+
+const CommentFormSchema = z.object({
+  content: z.string().min(1, '댓글을 입력해주세요.').max(100, '100자 이내로 입력해주세요.'),
+  isPrivate: z.boolean().default(true),
+});
+
+export type CommentFormValues = z.infer<typeof CommentFormSchema>;
+export type CommentRequestType = z.infer<typeof CommentRequestSchema>;
+export type CommentResponseType = z.infer<typeof CommentResponseSchema>;
+export type CommentType = z.infer<typeof CommentSchema>;
+export type Writer = z.infer<typeof WriterSchema>;
+
+export { CommentRequestSchema, CommentResponseSchema, CommentFormSchema, CommentSchema, WriterSchema };
diff --git a/src/schema/emotion.ts b/src/schema/emotion.ts
new file mode 100644
index 00000000..35dc2f35
--- /dev/null
+++ b/src/schema/emotion.ts
@@ -0,0 +1,43 @@
+import * as z from 'zod';
+
+/** **************** 감정 달력 ***************** */
+export const GetMonthlyEmotionLogsRequest = z.object({
+  userId: z.number(),
+  year: z.number(),
+  month: z.number(),
+});
+
+// 감정 로그 항목의 스키마 정의
+const EmotionSchema = z.object({
+  id: z.number(),
+  userId: z.number(),
+  emotion: z.enum(['MOVED', 'HAPPY', 'WORRIED', 'SAD', 'ANGRY']),
+  createdAt: z.coerce.date(),
+});
+
+// 감정 로그 배열 정의
+export const GetMonthlyEmotionLogsResponse = z.array(EmotionSchema);
+export type GetMonthlyEmotionLogsRequestType = z.infer<typeof GetMonthlyEmotionLogsRequest>;
+export type GetMonthlyEmotionLogsResponseType = z.infer<typeof GetMonthlyEmotionLogsResponse>;
+
+export const PostEmotionRequest = z.object({
+  emotion: z.enum(['MOVED', 'HAPPY', 'WORRIED', 'SAD', 'ANGRY']),
+});
+
+export const PostEmotionResponse = z.object({
+  createdAt: z.coerce.date(),
+  emotion: z.enum(['MOVED', 'HAPPY', 'WORRIED', 'SAD', 'ANGRY']),
+  userId: z.number(),
+  id: z.number(),
+});
+
+export const GetEmotionResponse = z.object({
+  createdAt: z.coerce.date(),
+  emotion: z.enum(['MOVED', 'HAPPY', 'WORRIED', 'SAD', 'ANGRY']),
+  userId: z.number(),
+  id: z.number(),
+});
+
+export type PostEmotionRequestType = z.infer<typeof PostEmotionRequest>;
+export type PostEmotionResponseType = z.infer<typeof PostEmotionResponse>;
+export type GetEmotionResponseType = z.infer<typeof GetEmotionResponse>;
diff --git a/src/schema/epigram.ts b/src/schema/epigram.ts
new file mode 100644
index 00000000..f72fdec7
--- /dev/null
+++ b/src/schema/epigram.ts
@@ -0,0 +1,30 @@
+import { z } from 'zod';
+
+// Tag 스키마
+const TagSchema = z.object({
+  name: z.string().min(1).max(10),
+  id: z.number().int().positive(),
+});
+
+// GetEpigramResponseType 스키마
+const GetEpigramResponseSchema = z.object({
+  id: z.number().int().positive(),
+  content: z.string().min(1).max(500),
+  author: z.string().min(1).max(30),
+  referenceTitle: z.string().max(100).nullable().optional(),
+  referenceUrl: z.string().url().nullable().optional(),
+  writerId: z.number().int().positive(),
+  tags: z.array(TagSchema),
+  likeCount: z.number(),
+  isLiked: z.boolean().optional(),
+});
+
+const EpigramRequestSchema = z.object({
+  id: z.union([z.string(), z.number(), z.undefined()]),
+});
+
+export type Tag = z.infer<typeof TagSchema>;
+export type GetEpigramResponseType = z.infer<typeof GetEpigramResponseSchema>;
+export type EpigramRequestType = z.infer<typeof EpigramRequestSchema>;
+
+export { TagSchema, GetEpigramResponseSchema, EpigramRequestSchema };
diff --git a/src/schema/epigrams.ts b/src/schema/epigrams.ts
new file mode 100644
index 00000000..46a7cb85
--- /dev/null
+++ b/src/schema/epigrams.ts
@@ -0,0 +1,33 @@
+import * as z from 'zod';
+
+export const GetEpigramsParams = z.object({
+  limit: z.number(),
+  cursor: z.number().optional(),
+  keyword: z.string().optional(),
+  writerId: z.number().optional(),
+});
+
+export const GetEpigramsResponse = z.object({
+  totalCount: z.number(),
+  nextCursor: z.number(),
+  list: z.array(
+    z.object({
+      likeCount: z.number(),
+      tags: z.array(
+        z.object({
+          name: z.string(),
+          id: z.number(),
+        }),
+      ),
+      writerId: z.number(),
+      referenceUrl: z.string(),
+      referenceTitle: z.string(),
+      author: z.string(),
+      content: z.string(),
+      id: z.number(),
+    }),
+  ),
+});
+
+export type GetEpigramsParamsType = z.infer<typeof GetEpigramsParams>;
+export type GetEpigramsResponseType = z.infer<typeof GetEpigramsResponse>;
diff --git a/src/schema/user.ts b/src/schema/user.ts
index 83d1f8d8..5c6881cb 100644
--- a/src/schema/user.ts
+++ b/src/schema/user.ts
@@ -1,4 +1,5 @@
 import * as z from 'zod';
+import { MAX_FILE_SIZE, ACCEPTED_IMAGE_TYPES } from '@/user/utill/constants';
 
 export const PatchMeRequest = z.object({
   image: z.string().url(),
@@ -18,6 +19,20 @@ export const GetUserReponse = z.object({
   id: z.number(),
 });
 
-export type GetUserReponseType = z.infer<typeof GetUserReponse>;
+const PostPresignedUrlRequest = z.object({
+  image: z
+    .instanceof(File)
+    .refine((file) => file.size <= MAX_FILE_SIZE, `업로드 파일의 용량은 최대 ${MAX_FILE_SIZE / (1024 * 1024)}MB 입니다.`)
+    .refine((file) => ACCEPTED_IMAGE_TYPES.includes(file.type), '.jpg, .jpeg, .png 확장자만 업로드 가능합니다.'),
+});
+
+export const PostPresignedUrlResponse = z.object({
+  url: z.string().url(),
+});
+
+export type GetUserResponseType = z.infer<typeof GetUserReponse>;
 export type GetUserRequestType = z.infer<typeof GetUserRequest>;
 export type PatchMeRequestType = z.infer<typeof PatchMeRequest>;
+
+export type PostPresignedUrlRequestType = z.infer<typeof PostPresignedUrlRequest>;
+export type PostPresignedUrlResponseType = z.infer<typeof PostPresignedUrlResponse>;
diff --git a/src/styles/CommentCardStyles.ts b/src/styles/CommentCardStyles.ts
new file mode 100644
index 00000000..6d7a6a66
--- /dev/null
+++ b/src/styles/CommentCardStyles.ts
@@ -0,0 +1,44 @@
+export const sizeStyles = {
+  sm: 'w-[360px] h-[130px]',
+  md: 'md:w-[384px] md:h-[162px]',
+  lg: 'lg:w-[640px] lg:h-[176px]',
+};
+
+export const textSizeStyles = {
+  sm: {
+    name: 'text-xs',
+    time: 'text-xs',
+    action: 'text-xs',
+    content: 'text-sm',
+  },
+  md: {
+    name: 'md:text-sm',
+    time: 'md:text-sm',
+    action: 'md:text-sm',
+    content: 'md:text-base',
+  },
+  lg: {
+    name: 'lg:text-base',
+    time: 'lg:text-base',
+    action: 'lg:text-base',
+    content: 'lg:text-xl',
+  },
+};
+
+export const gapStyles = {
+  sm: 'gap-2',
+  md: 'md:gap-3',
+  lg: 'lg:gap-4',
+};
+
+export const paddingStyles = {
+  sm: 'py-4 px-6', // 위아래 16px, 양 옆 24px
+  md: 'md:p-6', // 위아래, 양옆 24px
+  lg: 'lg:py-[35px] lg:px-6', // 위아래 35px, 양 옆 24px
+};
+
+export const contentWidthStyles = {
+  sm: 'w-[248px]',
+  md: 'md:w-[272px]',
+  lg: 'lg:w-[528px]',
+};
diff --git a/src/types/emotion.ts b/src/types/emotion.ts
new file mode 100644
index 00000000..45b5b78c
--- /dev/null
+++ b/src/types/emotion.ts
@@ -0,0 +1,30 @@
+export interface Emotion {
+  userId: number;
+  year: number;
+  month: number;
+}
+
+// 감정 로그 타입 지정
+export type EmotionTypeEN = 'MOVED' | 'HAPPY' | 'WORRIED' | 'SAD' | 'ANGRY';
+
+export interface EmotionLog {
+  id: number;
+  userId: number;
+  emotion: EmotionTypeEN;
+  createdAt: Date;
+}
+
+export type EmotionType = '감동' | '기쁨' | '고민' | '슬픔' | '분노';
+export type EmotionState = 'Default' | 'Unclicked' | 'Clicked';
+
+export interface EmotionIconCardProps {
+  iconType: EmotionType; // 아이콘 종류
+  state: EmotionState; // 상태
+  size: 'sm' | 'md' | 'lg'; // 크기
+  onClick?: () => void; // 클릭 이벤트 핸들러
+}
+
+export interface InteractiveEmotionIconCardProps extends Omit<EmotionIconCardProps, 'state'> {
+  state: EmotionState;
+  onClick: () => void;
+}
diff --git a/src/types/epigram.types.ts b/src/types/epigram.types.ts
new file mode 100644
index 00000000..226ee9ee
--- /dev/null
+++ b/src/types/epigram.types.ts
@@ -0,0 +1,24 @@
+import { GetEpigramResponseType } from '@/schema/epigram';
+import { GetUserResponseType } from '@/schema/user';
+
+export interface EpigramFigureProps {
+  epigram: GetEpigramResponseType;
+  currentUserId: GetUserResponseType['id'] | undefined;
+}
+
+export interface EpigramCommentProps {
+  epigramId: number;
+  currentUserId: GetUserResponseType['id'] | undefined;
+  userImage?: string | undefined;
+}
+
+export interface PostCommentRequest {
+  epigramId: number;
+  isPrivate: boolean;
+  content: string;
+}
+
+export interface PatchCommentRequest {
+  isPrivate: boolean;
+  content: string;
+}
diff --git a/src/types/user.ts b/src/types/user.ts
new file mode 100644
index 00000000..d821ed31
--- /dev/null
+++ b/src/types/user.ts
@@ -0,0 +1,13 @@
+export default interface UserInfo {
+  nickname: string;
+  image: string;
+  id: number;
+  updatedAt: Date;
+  createdAt: Date;
+  teamId: string;
+}
+
+export interface UserProfileProps {
+  image: string;
+  nickname: string;
+}
diff --git a/src/user/ui-profile/Calendar.tsx b/src/user/ui-profile/Calendar.tsx
new file mode 100644
index 00000000..4ce6d06a
--- /dev/null
+++ b/src/user/ui-profile/Calendar.tsx
@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import Image from 'next/image';
+import { subMonths } from 'date-fns';
+import { EmotionLog, EmotionTypeEN } from '@/types/emotion';
+import useCalendar from '../../hooks/useCalendar';
+import { DAY_LIST, DATE_MONTH_FIXER, iconPaths } from '../utill/constants';
+import CalendarHeader from './CalendarHeader';
+
+interface CalendarProps {
+  currentDate: Date; // 현재 날짜
+  setCurrentDate: React.Dispatch<React.SetStateAction<Date>>; // 현재 날짜를 설정하는 함수
+  monthlyEmotionLogs: EmotionLog[];
+}
+
+export default function Calendar({ currentDate, setCurrentDate, monthlyEmotionLogs }: CalendarProps) {
+  // 캘린더 함수 호출
+  const { weekCalendarList } = useCalendar(currentDate);
+  // 감정 필터
+  const [selectedEmotion, setSelectedEmotion] = useState<EmotionTypeEN | null>(null);
+
+  // 달력에 출력할 수 있게 매핑
+  const emotionMap: Record<string, EmotionTypeEN> = Array.isArray(monthlyEmotionLogs)
+    ? monthlyEmotionLogs.reduce<Record<string, EmotionTypeEN>>((acc, log) => {
+        const date = new Date(log.createdAt);
+        const dateString = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+        acc[dateString] = log.emotion as EmotionTypeEN;
+        return acc;
+      }, {})
+    : {};
+
+  // 이전 달 클릭
+  const handlePrevMonth = () => setCurrentDate((prevDate) => subMonths(prevDate, DATE_MONTH_FIXER));
+  // 다음 달 클릭
+  const handleNextMonth = () => setCurrentDate((prevDate) => subMonths(prevDate, -DATE_MONTH_FIXER));
+
+  // 감정 필터
+  const handleEmotionSelect = (emotion: EmotionTypeEN) => {
+    // 현재 선택된 감정과 같으면 초기화
+    if (selectedEmotion === emotion) {
+      setSelectedEmotion(null);
+    } else {
+      setSelectedEmotion(emotion);
+    }
+  };
+
+  // 필터링된 감정 맵 생성
+  const filteredEmotionMap = selectedEmotion ? Object.fromEntries(Object.entries(emotionMap).filter(([, value]) => value === selectedEmotion)) : emotionMap;
+
+  return (
+    <div className='flex flex-col w-full lg:max-w-[640px] md:max-w-[640px] mt-[160px] space-y-0 md:mb-10 mb-5 gap-[48px]'>
+      {/* 캘린더 헤더 */}
+      <CalendarHeader currentDate={currentDate} onPrevMonth={handlePrevMonth} onNextMonth={handleNextMonth} onEmotionSelect={handleEmotionSelect} selectEmotion={selectedEmotion} />
+      {/* 캘린더 */}
+      <div>
+        <div className='flex'>
+          {DAY_LIST.map((day) => (
+            <div key={day} className='w-[91px] h-[91px] border-t border-b border-gray-100 text-stone-300 font-semibold text-2xl flex items-center justify-center'>
+              {day}
+            </div>
+          ))}
+        </div>
+        {weekCalendarList.map((week, weekIndex) => (
+          // TODO: index 값 Lint error. 임시로 주석 사용. 추후 수정 예정
+          // eslint-disable-next-line react/no-array-index-key
+          <div key={weekIndex} className='flex'>
+            {week.map((day, dayIndex) => {
+              // 현재 날짜와 비교
+              const isToday = day === currentDate.getDate() && currentDate.getMonth() === new Date().getMonth() && currentDate.getFullYear() === new Date().getFullYear();
+              const dateString = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+              const emotion: EmotionTypeEN = filteredEmotionMap[dateString]; // 날짜에 해당하는 감정 가져오기
+              const iconPath = emotion && iconPaths[emotion] ? iconPaths[emotion].path : '/icon/BW/SmileFaceBWIcon.svg';
+
+              return (
+                <div
+                  // TODO: index 값 Lint error. 임시로 주석 사용. 추후 수정 예정
+                  // eslint-disable-next-line react/no-array-index-key
+                  key={dayIndex}
+                  className={`w-[91px] h-[91px] font-semibold flex items-center justify-center ${isToday ? 'border-4 border-red-400 text-red-400 rounded-[3px]' : 'border-b border-gray-100 text-stone-300'}`}
+                >
+                  {emotion ? (
+                    <div className='flex flex-col justify-center items-center gap-2'>
+                      <p>{day}</p>
+                      <Image src={iconPath} alt='감정' width={36} height={36} />
+                    </div>
+                  ) : (
+                    <p className='text-2xl'>{day}</p>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/user/ui-profile/CalendarHeader.tsx b/src/user/ui-profile/CalendarHeader.tsx
new file mode 100644
index 00000000..2c337e1c
--- /dev/null
+++ b/src/user/ui-profile/CalendarHeader.tsx
@@ -0,0 +1,58 @@
+import { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuGroup, DropdownMenu } from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import Image from 'next/image';
+import { EmotionTypeEN } from '@/types/emotion';
+import ARROW_BOTTOM_ICON from '../../../public/icon/arrow-bottom-icon.svg';
+import ARROW_RIGHT_ICON from '../../../public/icon/arrow-right-icon.svg';
+import ARROW_LEFT_ICON from '../../../public/icon/arrow-left-icon.svg';
+import { iconPaths } from '../utill/constants';
+
+interface CalendarHeaderProps {
+  currentDate: Date;
+  onPrevMonth: () => void;
+  onNextMonth: () => void;
+  onEmotionSelect: (emotion: EmotionTypeEN) => void;
+  selectEmotion: EmotionTypeEN | null;
+}
+
+export default function CalendarHeader({ currentDate, onPrevMonth, onNextMonth, onEmotionSelect, selectEmotion }: CalendarHeaderProps) {
+  return (
+    <div className='w-full flex justify-between items-center'>
+      <div className='flex w-full h-[52px] justify-between items-center'>
+        <div className='text-neutral-700 text-2xl font-semibold leading-loose'>{`${currentDate.getFullYear()}년 ${currentDate.getMonth() + 1}월`}</div>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant='outline' className='flex items-center gap-1 bg-slate-100 rounded-[14px] text-center text-stone-300 text-xl'>
+              필터: 감동
+              <div className='w-9 h-9 relative'>
+                <Image src={ARROW_BOTTOM_ICON} alt='필터 선택' width={36} height={36} />
+              </div>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className='bg-white'>
+            <DropdownMenuGroup className='flex flex-row'>
+              {Object.entries(iconPaths).map(([emotionKey, { path, name }]) => (
+                <DropdownMenuItem key={emotionKey}>
+                  <Button
+                    className={`p-0 w-14 h-14 bg-opacity-20 rounded-2xl flex justify-center ${selectEmotion === emotionKey ? 'border-4 border-illust-yellow' : ''}`}
+                    onClick={() => onEmotionSelect(emotionKey as EmotionTypeEN)}
+                  >
+                    <Image src={path} alt={name} width={36} height={36} />
+                  </Button>
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <div className='flex gap-6'>
+        <Button variant='default' className='p-0' onClick={onPrevMonth}>
+          <Image src={ARROW_LEFT_ICON} alt='이전' width={36} height={36} />
+        </Button>
+        <Button variant='default' className='p-0' onClick={onNextMonth}>
+          <Image src={ARROW_RIGHT_ICON} alt='다음' width={36} height={36} />
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/user/ui-profile/Chart.tsx b/src/user/ui-profile/Chart.tsx
new file mode 100644
index 00000000..6e89af4c
--- /dev/null
+++ b/src/user/ui-profile/Chart.tsx
@@ -0,0 +1,96 @@
+import { EmotionLog, EmotionTypeEN } from '@/types/emotion';
+import Image from 'next/image';
+import { iconPaths } from '../utill/constants';
+
+interface ChartProps {
+  monthlyEmotionLogs: EmotionLog[];
+}
+
+export default function Chart({ monthlyEmotionLogs }: ChartProps) {
+  // 감정별 빈도수 계산
+  const emotionCounts = monthlyEmotionLogs.reduce(
+    (count, log) => {
+      const { emotion } = log;
+      return {
+        ...count, // 기존의 count를 복사
+        [emotion]: (count[emotion] || 0) + 1, // 현재 감정의 개수 증가
+      };
+    },
+    {} as Record<string, number>,
+  );
+
+  // 감정 종류 및 총 감정 수 계산
+  const TOTAL_COUNT = monthlyEmotionLogs.length;
+  const EMOTIONS: EmotionTypeEN[] = ['MOVED', 'HAPPY', 'WORRIED', 'SAD', 'ANGRY'];
+  const RADIUS = 90; // 원의 반지름
+  const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+
+  // 가장 많이 나타나는 감정 찾기
+  const maxEmotion = EMOTIONS.reduce((max, emotion) => (emotionCounts[emotion] > emotionCounts[max] ? emotion : max), EMOTIONS[0]);
+
+  // 원형 차트의 각 감정에 대한 strokeDasharray와 strokeDashoffset 계산
+  let offset = 0;
+
+  return (
+    <div className='flex flex-col w-full lg:max-w-[640px] md:max-w-[640px] mt-[160px] space-y-0 md:mb-10 mb-5 gap-[48px]'>
+      <h2 className='text-neutral-700 text-2xl font-semibold leading-loose'>감정 차트</h2>
+      <div className='flex justify-between items-center px-[112px]'>
+        <div className='w-[200px] h-[200px] relative'>
+          <svg viewBox='0 0 200 200'>
+            <circle cx='100' cy='100' r={RADIUS} fill='none' stroke='beige' strokeWidth='20' />
+            {EMOTIONS.map((emotion) => {
+              const count = emotionCounts[emotion] || 0;
+              const percentage = TOTAL_COUNT > 0 ? count / TOTAL_COUNT : 0; // 0으로 나누기 방지
+              const strokeDasharray = `${CIRCUMFERENCE * percentage} ${CIRCUMFERENCE * (1 - percentage)}`;
+
+              // 색상 설정
+              let strokeColor;
+              switch (emotion) {
+                case 'HAPPY':
+                  strokeColor = '#FBC85B';
+                  break;
+                case 'SAD':
+                  strokeColor = '#E3E9F1';
+                  break;
+                case 'WORRIED':
+                  strokeColor = '#C7D1E0';
+                  break;
+                case 'ANGRY':
+                  strokeColor = '#EFF3F8';
+                  break;
+                default:
+                  strokeColor = '#48BB98';
+              }
+
+              const circle = <circle key={emotion} cx='100' cy='100' r={RADIUS} fill='none' stroke={strokeColor} strokeWidth='20' strokeDasharray={strokeDasharray} strokeDashoffset={offset} />;
+
+              offset += CIRCUMFERENCE * percentage; // 다음 원을 위한 offset 업데이트
+              return circle;
+            })}
+          </svg>
+          {/* 중앙에 가장 많이 나타나는 감정 출력 */}
+          <div className='absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center gap-3'>
+            <Image src={iconPaths[maxEmotion].path} alt='감정' width={40} height={40} />
+            <p>{iconPaths[maxEmotion].name}</p>
+          </div>
+        </div>
+        <div>
+          <div className='flex flex-col gap-4'>
+            {EMOTIONS.map((emotion) => {
+              const count = emotionCounts[emotion] || 0;
+              const percentage = TOTAL_COUNT > 0 ? Math.floor((count / TOTAL_COUNT) * 100) : 0; // 퍼센트 계산 및 소수점 버리기
+
+              return (
+                <div key={emotion} className='flex items-center gap-3'>
+                  <p className={`${iconPaths[emotion].color} w-[16px] h-[16px]`}></p>
+                  <Image src={iconPaths[emotion].path} alt='감정' width={24} height={24} />
+                  <p>{percentage}%</p>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/user/ui-profile/EmotionMonthlyLogs.tsx b/src/user/ui-profile/EmotionMonthlyLogs.tsx
new file mode 100644
index 00000000..18d4ada8
--- /dev/null
+++ b/src/user/ui-profile/EmotionMonthlyLogs.tsx
@@ -0,0 +1,40 @@
+import { useMonthlyEmotionLogs } from '@/hooks/useGetEmotion';
+import { Emotion } from '@/types/emotion';
+import { useEffect, useState } from 'react';
+import Calendar from './Calendar';
+import Chart from './Chart';
+
+interface EmotionMonthlyLogsProps {
+  userId: number;
+}
+
+export default function EmotionMonthlyLogs({ userId }: EmotionMonthlyLogsProps) {
+  // 현재 날짜를 상태로 관리
+  const [currentDate, setCurrentDate] = useState<Date>(new Date());
+
+  // 감정 달력 객체 상태 추가
+  const [emotionRequest, setEmotionRequest] = useState<Emotion>({
+    userId,
+    year: currentDate.getFullYear(),
+    month: currentDate.getMonth() + 1,
+  });
+
+  // '월'이 변경될 때마다 request 업데이트
+  useEffect(() => {
+    setEmotionRequest({
+      userId,
+      year: currentDate.getFullYear(),
+      month: currentDate.getMonth() + 1,
+    });
+  }, [currentDate]);
+
+  // 월별 감정 로그 조회
+  const { data: monthlyEmotionLogs = [] } = useMonthlyEmotionLogs(emotionRequest);
+
+  return (
+    <>
+      <Calendar currentDate={currentDate} setCurrentDate={setCurrentDate} monthlyEmotionLogs={monthlyEmotionLogs} />
+      <Chart monthlyEmotionLogs={monthlyEmotionLogs} />
+    </>
+  );
+}
diff --git a/src/user/ui-profile/Profile.tsx b/src/user/ui-profile/Profile.tsx
new file mode 100644
index 00000000..42fd5f74
--- /dev/null
+++ b/src/user/ui-profile/Profile.tsx
@@ -0,0 +1,41 @@
+import Image from 'next/image';
+import { UserProfileProps } from '@/types/user';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogTrigger, DialogContent } from '@/components/ui/dialog';
+import { sampleImage } from '../utill/constants';
+import ProfileEdit from './ProfileEdit';
+
+export default function Profile({ image, nickname }: UserProfileProps) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleProfileEditClose = () => {
+    setIsModalOpen(false);
+  };
+
+  // TODO: 여러개의 샘플 이미지 랜덤하게 뜨도록 추가 할 예정
+  const profileImage = image || sampleImage;
+
+  return (
+    <div className='w-[130px] h-[240px] flex flex-col justify-center items-center absolute top-[-50px]'>
+      <div>
+        <div role='button' tabIndex={0} className='w-[120px] h-[120px] rounded-full overflow-hidden cursor-pointer'>
+          <Image src={profileImage} alt='유저 프로필' className='w-full h-full object-cover' width={120} height={120} priority />
+        </div>
+      </div>
+      <p className='mt-4 mb-6'>{nickname}</p>
+      <div className='w-[130px] h-12 pl-4 pr-3.5 py-1.5 bg-zinc-100 rounded-[100px] justify-center items-center gap-1.5 inline-flex'>
+        <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+          <DialogTrigger asChild>
+            <Button variant='outline' className='border-none'>
+              프로필 수정
+            </Button>
+          </DialogTrigger>
+          <DialogContent className='sm:max-w-[425px] md:max-w-[1200px] bg-white' aria-describedby={undefined}>
+            <ProfileEdit initialValues={{ image: profileImage, nickname }} onModalClose={handleProfileEditClose} />
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+  );
+}
diff --git a/src/user/ui-profile/ProfileEdit.tsx b/src/user/ui-profile/ProfileEdit.tsx
new file mode 100644
index 00000000..218f2c7a
--- /dev/null
+++ b/src/user/ui-profile/ProfileEdit.tsx
@@ -0,0 +1,140 @@
+import Image from 'next/image';
+import { UserProfileProps } from '@/types/user';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import Label from '@/components/ui/label';
+import { DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { useToast } from '@/components/ui/use-toast';
+import { useEffect, useRef } from 'react';
+import { Form, Formik, useFormik } from 'formik';
+import { useCreatePresignedUrl, useUpdateMe } from '@/hooks/userQueryHooks';
+import * as Yup from 'yup';
+import { AxiosError } from 'axios';
+import fileNameChange from '../utill/fileNameChange';
+
+interface UserProfileEditProps {
+  initialValues: {
+    image: string;
+    nickname: string;
+  };
+  onModalClose: () => void;
+}
+
+const validationSchema = Yup.object().shape({
+  nickname: Yup.string().min(1, '닉네임은 1자 이상 30자 이하여야 합니다.').max(30, '닉네임은 1자 이상 30자 이하여야 합니다.').required('닉네임은 필수 항목입니다.'),
+});
+
+export default function ProfileEdit({ initialValues, onModalClose }: UserProfileEditProps) {
+  const createPresignedUrl = useCreatePresignedUrl();
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  const { toast } = useToast();
+
+  const handleSubmit = async () => {
+    await formik.submitForm(); // Formik의 submitForm 함수 호출
+  };
+
+  const { mutate: updateMe } = useUpdateMe({
+    onSuccess: () => {
+      onModalClose();
+      toast({
+        description: '프로필 수정이 완료되었습니다.',
+      });
+    },
+    onError: () => {
+      toast({
+        description: '프로필 수정 실패',
+      });
+    },
+  });
+
+  const formik = useFormik<UserProfileProps>({
+    initialValues: {
+      image: '',
+      nickname: '',
+    },
+    validationSchema,
+    onSubmit: async (values, { setSubmitting }) => {
+      try {
+        // 프로필 업데이트
+        await updateProfile(values);
+        setSubmitting(false);
+      } catch (error) {
+        // 에러 처리
+      } finally {
+        setSubmitting(false);
+      }
+    },
+  });
+
+  const updateProfile = (values: UserProfileProps) => {
+    updateMe(values);
+  };
+
+  // 프로필 사진 변경 클릭
+  const handleImageEditClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
+  // 이미지 변경 시
+  async function handleImageChange(e: React.ChangeEvent<HTMLInputElement>): Promise<void> {
+    const { files } = e.currentTarget;
+    if (files && files.length > 0) {
+      const file = files[0];
+
+      try {
+        // 중복된 파일명 및 한글파일이 저장되지 않도록 파일이름 포멧 변경
+        const newFileName = fileNameChange();
+        const newFile = new File([file], `${newFileName}.${file.name.split('.').pop()}`, { type: file.type });
+
+        // presignedUrl 구하는 함수 (s3 업로드까지 같이)
+        const { url } = await createPresignedUrl.mutateAsync({ image: newFile });
+        formik.setFieldValue('image', url);
+      } catch (error) {
+        // 에러 처리: 실패 시 토스트 메시지
+        const axiosError = error as AxiosError;
+
+        onModalClose();
+        const errorMessage = `(error: ${axiosError.response?.status}) 잘못 된 요청입니다. 관리자에게 문의해주세요`;
+
+        toast({
+          description: errorMessage,
+          className: 'bg-red-400 text-white',
+        });
+      }
+    }
+  }
+
+  useEffect(() => {
+    formik.setValues(initialValues);
+  }, [initialValues]);
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+      {({ isSubmitting }) => (
+        <Form>
+          <DialogHeader>
+            <DialogTitle>프로필 수정</DialogTitle>
+            <div className='flex flex-col justify-center items-center pt-8'>
+              <div className='w-[200px] h-[200px] rounded-full overflow-hidden cursor-pointer border border-gray-300 shadow-sm'>
+                <Image src={formik.values.image || initialValues.image} alt='유저 프로필' className='w-full h-full object-cover' width={200} height={200} priority onClick={handleImageEditClick} />
+                <Input type='file' accept='image/*' name='image' onChange={(e) => handleImageChange(e)} className='hidden' ref={fileInputRef} />
+              </div>
+              <div className='mt-10 flex flex-col items-start gap-4'>
+                <Label htmlFor='name'>닉네임</Label>
+                <Input type='text' name='nickname' value={formik.values.nickname} className='text-lg p-3' onChange={formik.handleChange} />
+              </div>
+            </div>
+            <DialogFooter>
+              <Button type='submit' className='bg-slate-600 text-white' disabled={!formik.isValid || isSubmitting}>
+                수정하기
+              </Button>
+            </DialogFooter>
+          </DialogHeader>
+        </Form>
+      )}
+    </Formik>
+  );
+}
diff --git a/src/user/utill/constants.ts b/src/user/utill/constants.ts
new file mode 100644
index 00000000..9ff423c8
--- /dev/null
+++ b/src/user/utill/constants.ts
@@ -0,0 +1,20 @@
+// 파일 업로드 관련
+export const MAX_FILE_SIZE = 1024 * 1024 * 5; // 파일 업로드 최대 용량 5MB
+export const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/jpg', 'image/png']; // 허용 가능 확장자
+export const sampleImage = '/ProfileTestImage.jpg'; // 초기프로필 이미지
+
+// 캘린더 관련 상수
+export const DAY_LIST = ['일', '월', '화', '수', '목', '금', '토']; // 요일
+export const DATE_MONTH_FIXER = 1; // 날짜 조정 상수 (현재 사용되지 않음, 필요에 따라 활용 가능)
+export const CALENDAR_LENGTH = 42; // 6주에 맞추어 캘린더의 총 길이를 42로 설정
+export const DAY_OF_WEEK = 7; // 한 주의 날 수 (일~토)
+export const DEFAULT_TRASH_VALUE = -1; // 기본값 설정 (필요에 따라 사용 가능)
+
+// 아이콘 파일 경로 매핑
+export const iconPaths = {
+  MOVED: { path: '/icon/Color/HeartFaceColorIcon.svg', name: '기쁨', color: 'bg-illust-green' },
+  HAPPY: { path: '/icon/Color/SmileFaceColorIcon.svg', name: '감동', color: 'bg-illust-yellow' },
+  WORRIED: { path: '/icon/Color/ThinkFaceColorIcon.svg', name: '고민', color: 'bg-sub-gray_1' },
+  SAD: { path: '/icon/Color/SadFaceColorIcon.svg', name: '슬픔', color: 'bg-sub-gray_2' },
+  ANGRY: { path: '/icon/Color/AngryFaceColorIcon.svg', name: '분노', color: 'bg-sub-gray_3' },
+};
diff --git a/src/user/utill/fileNameChange.ts b/src/user/utill/fileNameChange.ts
new file mode 100644
index 00000000..73007d0c
--- /dev/null
+++ b/src/user/utill/fileNameChange.ts
@@ -0,0 +1,8 @@
+function fileNameChange() {
+  const now = new Date();
+  const formattedFileName = `profile${now.getHours()}${now.getMinutes()}${now.getSeconds()}${now.getDate()}${now.getMonth() + 1}${now.getFullYear()}`;
+
+  return formattedFileName;
+}
+
+export default fileNameChange;
diff --git a/src/utils/emotionMap.ts b/src/utils/emotionMap.ts
new file mode 100644
index 00000000..3c9585f7
--- /dev/null
+++ b/src/utils/emotionMap.ts
@@ -0,0 +1,23 @@
+import { EmotionType } from '@/types/emotion';
+
+const emotionMap: Record<EmotionType, 'MOVED' | 'HAPPY' | 'WORRIED' | 'SAD' | 'ANGRY'> = {
+  감동: 'MOVED',
+  기쁨: 'HAPPY',
+  고민: 'WORRIED',
+  슬픔: 'SAD',
+  분노: 'ANGRY',
+};
+
+const reverseEmotionMap: Record<'MOVED' | 'HAPPY' | 'WORRIED' | 'SAD' | 'ANGRY', EmotionType> = {
+  MOVED: '감동',
+  HAPPY: '기쁨',
+  WORRIED: '고민',
+  SAD: '슬픔',
+  ANGRY: '분노',
+};
+
+const translateEmotionToEnglish = (emotion: EmotionType): 'MOVED' | 'HAPPY' | 'WORRIED' | 'SAD' | 'ANGRY' => emotionMap[emotion];
+
+const translateEmotionToKorean = (emotion: 'MOVED' | 'HAPPY' | 'WORRIED' | 'SAD' | 'ANGRY'): EmotionType => reverseEmotionMap[emotion];
+
+export { translateEmotionToEnglish, translateEmotionToKorean };
diff --git a/tsconfig.json b/tsconfig.json
index fb68dc1a..3cb96de7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,6 +12,7 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
     }