diff --git a/client/.prettierrc b/client/.prettierrc
index a661f29c2..94ad823ef 100644
--- a/client/.prettierrc
+++ b/client/.prettierrc
@@ -9,4 +9,4 @@
 	"jsxSingleQuote": false,
 	"bracketSpacing": false,
 	"proseWrap": "preserve"
-}
+}
\ No newline at end of file
diff --git a/client/package-lock.json b/client/package-lock.json
index 781d96620..2fda2f9e6 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -10,6 +10,9 @@
       "license": "ISC",
       "dependencies": {
         "@emotion/react": "^11.11.4",
+        "@types/dotenv-webpack": "^7.0.7",
+        "dotenv-webpack": "^8.1.0",
+        "haengdong-design": "^0.1.3",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-router-dom": "^6.24.1"
@@ -2529,7 +2532,6 @@
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
       "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25"
@@ -2990,11 +2992,20 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/dotenv-webpack": {
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/@types/dotenv-webpack/-/dotenv-webpack-7.0.7.tgz",
+      "integrity": "sha512-tltVokFUeYuSjNmHc6N892Asu/JIQcnH2iUF5A29/VKqv9opq6KlrmnKd/Lt/bBikV/z0YN2K0kguTwWirYCMQ==",
+      "dependencies": {
+        "@types/node": "*",
+        "tapable": "^2.2.0",
+        "webpack": "^5"
+      }
+    },
     "node_modules/@types/eslint": {
       "version": "8.56.10",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.10.tgz",
       "integrity": "sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==",
-      "dev": true,
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -3004,7 +3015,6 @@
       "version": "3.7.7",
       "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
       "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
-      "dev": true,
       "dependencies": {
         "@types/eslint": "*",
         "@types/estree": "*"
@@ -3013,8 +3023,7 @@
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-      "dev": true
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
     },
     "node_modules/@types/express": {
       "version": "4.17.21",
@@ -3064,8 +3073,7 @@
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
-      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "dev": true
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="
     },
     "node_modules/@types/json5": {
       "version": "0.0.29",
@@ -3083,7 +3091,6 @@
       "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"
       }
@@ -3451,7 +3458,6 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz",
       "integrity": "sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==",
-      "dev": true,
       "dependencies": {
         "@webassemblyjs/helper-numbers": "1.11.6",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.6"
@@ -3460,26 +3466,22 @@
     "node_modules/@webassemblyjs/floating-point-hex-parser": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz",
-      "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==",
-      "dev": true
+      "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw=="
     },
     "node_modules/@webassemblyjs/helper-api-error": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz",
-      "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==",
-      "dev": true
+      "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q=="
     },
     "node_modules/@webassemblyjs/helper-buffer": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz",
-      "integrity": "sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==",
-      "dev": true
+      "integrity": "sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw=="
     },
     "node_modules/@webassemblyjs/helper-numbers": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz",
       "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==",
-      "dev": true,
       "dependencies": {
         "@webassemblyjs/floating-point-hex-parser": "1.11.6",
         "@webassemblyjs/helper-api-error": "1.11.6",
@@ -3489,14 +3491,12 @@
     "node_modules/@webassemblyjs/helper-wasm-bytecode": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz",
-      "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==",
-      "dev": true
+      "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA=="
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz",
       "integrity": "sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==",
-      "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.12.1",
         "@webassemblyjs/helper-buffer": "1.12.1",
@@ -3508,7 +3508,6 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz",
       "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==",
-      "dev": true,
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
       }
@@ -3517,7 +3516,6 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz",
       "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==",
-      "dev": true,
       "dependencies": {
         "@xtuc/long": "4.2.2"
       }
@@ -3525,14 +3523,12 @@
     "node_modules/@webassemblyjs/utf8": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz",
-      "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==",
-      "dev": true
+      "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA=="
     },
     "node_modules/@webassemblyjs/wasm-edit": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz",
       "integrity": "sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==",
-      "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.12.1",
         "@webassemblyjs/helper-buffer": "1.12.1",
@@ -3548,7 +3544,6 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz",
       "integrity": "sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==",
-      "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.12.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
@@ -3561,7 +3556,6 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz",
       "integrity": "sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==",
-      "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.12.1",
         "@webassemblyjs/helper-buffer": "1.12.1",
@@ -3573,7 +3567,6 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz",
       "integrity": "sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==",
-      "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.12.1",
         "@webassemblyjs/helper-api-error": "1.11.6",
@@ -3587,7 +3580,6 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz",
       "integrity": "sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==",
-      "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.12.1",
         "@xtuc/long": "4.2.2"
@@ -3640,14 +3632,12 @@
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "dev": true
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
     },
     "node_modules/@xtuc/long": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "dev": true
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
     "node_modules/accepts": {
       "version": "1.3.8",
@@ -3666,7 +3656,6 @@
       "version": "8.12.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
       "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
-      "dev": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3678,7 +3667,6 @@
       "version": "1.9.5",
       "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
       "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
-      "dev": true,
       "peerDependencies": {
         "acorn": "^8"
       }
@@ -3696,7 +3684,6 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -3751,7 +3738,6 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true,
       "peerDependencies": {
         "ajv": "^6.9.1"
       }
@@ -3808,8 +3794,7 @@
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
     "node_modules/aria-query": {
       "version": "5.1.3",
@@ -4192,8 +4177,7 @@
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
-      "dev": true
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
@@ -4220,7 +4204,6 @@
       "version": "4.23.2",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.2.tgz",
       "integrity": "sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -4251,8 +4234,7 @@
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "dev": true
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
     },
     "node_modules/bundle-name": {
       "version": "4.1.0",
@@ -4331,7 +4313,6 @@
       "version": "1.0.30001642",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001642.tgz",
       "integrity": "sha512-3XQ0DoRgLijXJErLSl+bLnJ+Et4KqV1PY6JJBGAFlsNsz31zeAIncyeZfLCabHK/jtSh+671RM9YMldxjUPZtA==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -4403,7 +4384,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
       "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
-      "dev": true,
       "engines": {
         "node": ">=6.0"
       }
@@ -4461,8 +4441,7 @@
     "node_modules/commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
     },
     "node_modules/compressible": {
       "version": "2.0.18",
@@ -4579,7 +4558,6 @@
       "version": "8.3.6",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
       "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
-      "dev": true,
       "dependencies": {
         "import-fresh": "^3.3.0",
         "js-yaml": "^4.1.0",
@@ -4683,7 +4661,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
       "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       },
@@ -4855,7 +4832,6 @@
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
       "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5034,7 +5010,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
       "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -5075,12 +5050,41 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
       "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
-      "dev": true,
       "dependencies": {
         "no-case": "^3.0.4",
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/dotenv": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
+      "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/dotenv-defaults": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz",
+      "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==",
+      "dependencies": {
+        "dotenv": "^8.2.0"
+      }
+    },
+    "node_modules/dotenv-webpack": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-8.1.0.tgz",
+      "integrity": "sha512-owK1JcsPkIobeqjVrk6h7jPED/W6ZpdFsMPR+5ursB7/SdgDyO+VzAU+szK8C8u3qUhtENyYnj8eyXMR5kkGag==",
+      "dependencies": {
+        "dotenv-defaults": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "webpack": "^4 || ^5"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -5096,8 +5100,7 @@
     "node_modules/electron-to-chromium": {
       "version": "1.4.827",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.827.tgz",
-      "integrity": "sha512-VY+J0e4SFcNfQy19MEoMdaIcZLmDCprqvBtkii1WTCTQHpRvf5N8+3kTYCgL/PcntvwQvmMJWTuDPsq+IlhWKQ==",
-      "dev": true
+      "integrity": "sha512-VY+J0e4SFcNfQy19MEoMdaIcZLmDCprqvBtkii1WTCTQHpRvf5N8+3kTYCgL/PcntvwQvmMJWTuDPsq+IlhWKQ=="
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
@@ -5127,7 +5130,6 @@
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.0.tgz",
       "integrity": "sha512-dwDPwZL0dmye8Txp2gzFmA6sxALaSvdRDjPH0viLcKrtlOL3tw62nWWweVD1SdILDTJrbrL6tdWVN58Wo6U3eA==",
-      "dev": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -5300,8 +5302,7 @@
     "node_modules/es-module-lexer": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.4.tgz",
-      "integrity": "sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==",
-      "dev": true
+      "integrity": "sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw=="
     },
     "node_modules/es-object-atoms": {
       "version": "1.0.0",
@@ -5359,7 +5360,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
       "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -5799,7 +5799,6 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "dev": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
@@ -6041,7 +6040,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-      "dev": true,
       "dependencies": {
         "estraverse": "^5.2.0"
       },
@@ -6053,7 +6051,6 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -6062,7 +6059,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "dev": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -6071,7 +6067,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6095,7 +6090,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-      "dev": true,
       "engines": {
         "node": ">=0.8.x"
       }
@@ -6168,8 +6162,7 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-diff": {
       "version": "1.3.0",
@@ -6196,8 +6189,7 @@
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
@@ -6639,8 +6631,7 @@
     "node_modules/glob-to-regexp": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "dev": true
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
     },
     "node_modules/globals": {
       "version": "15.8.0",
@@ -6705,8 +6696,7 @@
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
     "node_modules/graphemer": {
       "version": "1.4.0",
@@ -6714,6 +6704,22 @@
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
       "dev": true
     },
+    "node_modules/haengdong-design": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/haengdong-design/-/haengdong-design-0.1.3.tgz",
+      "integrity": "sha512-l/ED7kcE/LAZkuXxEFDU0j5k7Bac+t4dTJIxAAH8Ij9byaxdblzJF4DiRQ10AZ2RfuDzHYuI5MULq+18sU2cXA==",
+      "dependencies": {
+        "@emotion/react": "^11.11.4",
+        "@svgr/webpack": "^8.1.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.24.1"
+      },
+      "engines": {
+        "node": ">=20.15.1",
+        "npm": ">=10.7.0"
+      }
+    },
     "node_modules/handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -6733,7 +6739,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -7763,7 +7768,6 @@
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
       "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
-      "dev": true,
       "dependencies": {
         "@types/node": "*",
         "merge-stream": "^2.0.0",
@@ -7782,7 +7786,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
       "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
       "dependencies": {
         "argparse": "^2.0.1"
       },
@@ -7815,8 +7818,7 @@
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -7931,7 +7933,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
       "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
-      "dev": true,
       "engines": {
         "node": ">=6.11.5"
       }
@@ -8008,7 +8009,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
       "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
-      "dev": true,
       "dependencies": {
         "tslib": "^2.0.3"
       }
@@ -8062,8 +8062,7 @@
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
     },
     "node_modules/merge2": {
       "version": "1.4.1",
@@ -8112,7 +8111,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -8121,7 +8119,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -8298,14 +8295,12 @@
     "node_modules/neo-async": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "dev": true
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
     "node_modules/no-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
       "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
-      "dev": true,
       "dependencies": {
         "lower-case": "^2.0.2",
         "tslib": "^2.0.3"
@@ -8329,8 +8324,7 @@
     "node_modules/node-releases": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
-      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
-      "dev": true
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
@@ -8357,7 +8351,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
       "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
-      "dev": true,
       "dependencies": {
         "boolbase": "^1.0.0"
       },
@@ -9012,7 +9005,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -9056,7 +9048,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
       "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-      "dev": true,
       "dependencies": {
         "safe-buffer": "^5.1.0"
       }
@@ -9482,7 +9473,6 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -9533,7 +9523,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
       "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
-      "dev": true,
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
@@ -9612,7 +9601,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
       "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
-      "dev": true,
       "dependencies": {
         "randombytes": "^2.1.0"
       }
@@ -9833,7 +9821,6 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9842,7 +9829,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
       "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9851,7 +9837,6 @@
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "dev": true,
       "dependencies": {
         "buffer-from": "^1.0.0",
         "source-map": "^0.6.0"
@@ -10193,7 +10178,6 @@
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
       "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -10346,7 +10330,6 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
       "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -10355,7 +10338,6 @@
       "version": "5.31.2",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.31.2.tgz",
       "integrity": "sha512-LGyRZVFm/QElZHy/CPr/O4eNZOZIzsrQ92y4v9UJe/pFJjypje2yI3C2FmPtvUEnhadlSbmG2nXtdcjHOjCfxw==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.8.2",
@@ -10373,7 +10355,6 @@
       "version": "5.3.10",
       "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz",
       "integrity": "sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.20",
         "jest-worker": "^27.4.5",
@@ -10528,8 +10509,7 @@
     "node_modules/tslib": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
-      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
-      "dev": true
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -10773,7 +10753,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
       "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -10803,7 +10782,6 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
       "dependencies": {
         "punycode": "^2.1.0"
       }
@@ -10851,7 +10829,6 @@
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz",
       "integrity": "sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==",
-      "dev": true,
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"
@@ -10873,7 +10850,6 @@
       "version": "5.93.0",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.93.0.tgz",
       "integrity": "sha512-Y0m5oEY1LRuwly578VqluorkXbvXKh7U3rLoQCEO04M97ScRr44afGVkI0FQFsXzysk5OgFAxjZAb9rsGQVihA==",
-      "dev": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.5",
@@ -11182,7 +11158,6 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
       "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
-      "dev": true,
       "engines": {
         "node": ">=10.13.0"
       }
@@ -11467,4 +11442,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/client/package.json b/client/package.json
index 7b5875adc..f25247dc3 100644
--- a/client/package.json
+++ b/client/package.json
@@ -44,6 +44,9 @@
   },
   "dependencies": {
     "@emotion/react": "^11.11.4",
+    "@types/dotenv-webpack": "^7.0.7",
+    "dotenv-webpack": "^8.1.0",
+    "haengdong-design": "^0.1.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.24.1"
diff --git a/client/src/App.tsx b/client/src/App.tsx
index b6c73d8be..46618d881 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,7 +1,12 @@
+import {HDesignProvider} from 'haengdong-design';
 import {Outlet} from 'react-router-dom';
 
 const App: React.FC = () => {
-  return <Outlet />;
+  return (
+    <HDesignProvider>
+      <Outlet />
+    </HDesignProvider>
+  );
 };
 
 export default App;
diff --git a/client/src/apis/fetcher.ts b/client/src/apis/fetcher.ts
index 55c28d708..8df81a2c2 100644
--- a/client/src/apis/fetcher.ts
+++ b/client/src/apis/fetcher.ts
@@ -6,7 +6,7 @@ type HeadersType = [string, string][] | Record<string, string> | Headers;
 export type ObjectQueryParams = Record<string, string | number | boolean>;
 
 type RequestProps = {
-  baseUrl: string;
+  baseUrl?: string;
   endpoint: string;
   headers?: HeadersType;
   body?: Body | object | null;
@@ -24,6 +24,8 @@ type Options = {
   body?: Body | null;
 };
 
+const API_BASE_URL = process.env.API_BASE_URL;
+
 const objectToQueryString = (params: ObjectQueryParams): string => {
   return Object.entries(params)
     .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
@@ -57,7 +59,7 @@ export const requestDelete = ({headers = {}, ...args}: RequestProps) => {
   return fetcher({method: 'DELETE', headers, ...args});
 };
 
-const fetcher = ({method, baseUrl, endpoint, headers, body, queryParams}: FetcherProps) => {
+const fetcher = ({baseUrl = API_BASE_URL, method, endpoint, headers, body, queryParams}: FetcherProps) => {
   // const token = generateBasicToken(USER_ID, USER_PASSWORD);
   const options = {
     method,
diff --git a/client/src/apis/requestPostEvent.ts b/client/src/apis/requestPostEvent.ts
new file mode 100644
index 000000000..cf6b4716e
--- /dev/null
+++ b/client/src/apis/requestPostEvent.ts
@@ -0,0 +1,13 @@
+import {requestPost} from './fetcher';
+
+interface RequestPostEventProps {
+  name: string;
+}
+
+export const requestPostEvent = async ({name}: RequestPostEventProps) => {
+  requestPost({
+    headers: {'Content-Type': 'application/json'},
+    body: {name},
+    endpoint: '/api/events',
+  });
+};
diff --git a/client/src/constants/routerUrls.ts b/client/src/constants/routerUrls.ts
index c93f9fefe..eb4f6938b 100644
--- a/client/src/constants/routerUrls.ts
+++ b/client/src/constants/routerUrls.ts
@@ -1,7 +1,7 @@
 export const ROUTER_URLS = {
   main: '',
-  createEvent: '/create-event',
-  completeCreateEvent: '/create-event/complete',
+  eventCreateName: '/event/create/name',
+  eventCreateComplete: '/event/create/complete',
   event: '/event',
   eventManage: '/event/:eventId',
 };
diff --git a/client/src/index.css b/client/src/index.css
index c6eed01ac..936bdd319 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,5 +1,9 @@
 body {
   max-width: 768px;
+  height: 100lvh;
   margin: 0 auto;
-  border: 1px solid gray;
+}
+
+section {
+  width: 100%;
 }
diff --git a/client/src/pages/CompleteCreateEvent/index.ts b/client/src/pages/CompleteCreateEvent/index.ts
deleted file mode 100644
index a1e4fa117..000000000
--- a/client/src/pages/CompleteCreateEvent/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export {default as CompleteCreateEventPage} from './CompleteCreateEvent';
diff --git a/client/src/pages/CompleteCreateEvent/CompleteCreateEvent.tsx b/client/src/pages/Create/Complete.tsx
similarity index 50%
rename from client/src/pages/CompleteCreateEvent/CompleteCreateEvent.tsx
rename to client/src/pages/Create/Complete.tsx
index 083273c8a..c2f499cb6 100644
--- a/client/src/pages/CompleteCreateEvent/CompleteCreateEvent.tsx
+++ b/client/src/pages/Create/Complete.tsx
@@ -1,5 +1,6 @@
 import {useEffect, useState} from 'react';
 import {useLocation, useNavigate} from 'react-router-dom';
+import {FixedButton, MainLayout, Title} from 'haengdong-design';
 
 import {ROUTER_URLS} from '@constants/routerUrls';
 
@@ -11,7 +12,7 @@ const CompleteCreateEvent = () => {
   useEffect(() => {
     const getUrl = async () => {
       const eventTitle = location.search;
-      console.log(eventTitle);
+      // console.log(eventTitle);
 
       // const url = await fetch();
       setUrl('hangsapage');
@@ -21,14 +22,15 @@ const CompleteCreateEvent = () => {
   }, []);
 
   return (
-    <section>
-      <h1>행사 개시</h1>
-      <h3>
-        행사가 성공적으로 개시됐어요 :) 행사 링크를 통해서 참여자 관리가 가능해요. 관리를 위해서 행사 관리 링크를 보관해
-        주세요.
-      </h3>
-      <button onClick={() => navigate(`${ROUTER_URLS.event}/${url}`)}>관리 페이지로 이동</button>
-    </section>
+    <MainLayout>
+      {/* <TopNav navType="back" /> */}
+      <Title
+        title="행사 개시"
+        description="행사가 성공적으로 개시됐어요 :) 행사 링크를 통해서 참여자 관리가 가능해요. 관리를 위해서 행사 관리 링크를 보관해
+        주세요."
+      />
+      <FixedButton onClick={() => navigate(`${ROUTER_URLS.event}/${url}`)}>관리 페이지로 이동</FixedButton>
+    </MainLayout>
   );
 };
 
diff --git a/client/src/pages/Create/Name.tsx b/client/src/pages/Create/Name.tsx
new file mode 100644
index 000000000..ee847e258
--- /dev/null
+++ b/client/src/pages/Create/Name.tsx
@@ -0,0 +1,36 @@
+import {useState} from 'react';
+import {useNavigate} from 'react-router-dom';
+import {FixedButton, Input, MainLayout, TextButton, Title, TopNav} from 'haengdong-design';
+
+import {requestPostEvent} from '@apis/requestPostEvent';
+
+import {ROUTER_URLS} from '@constants/routerUrls';
+
+const CreateEvent = () => {
+  const [eventTitle, setEventTitle] = useState('');
+  const navigate = useNavigate();
+
+  const submitEventTitle = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const result = await requestPostEvent({name: eventTitle});
+
+    navigate(`${ROUTER_URLS.eventCreateComplete}?${new URLSearchParams({title: eventTitle})}`);
+  };
+
+  return (
+    <MainLayout>
+      <TopNav navType="back" />
+      <Title title="행사 이름 입력" description="시작할 행사 이름을 입력해 주세요." />
+      <form onSubmit={submitEventTitle}>
+        <Input
+          value={eventTitle}
+          onChange={event => setEventTitle(event.target.value)}
+          placeholder="ex) 행동대장 야유회"
+        />
+        <FixedButton>행동 개시!</FixedButton>
+      </form>
+    </MainLayout>
+  );
+};
+
+export default CreateEvent;
diff --git a/client/src/pages/Create/index.ts b/client/src/pages/Create/index.ts
new file mode 100644
index 000000000..5ce37a93e
--- /dev/null
+++ b/client/src/pages/Create/index.ts
@@ -0,0 +1,2 @@
+export {default as CreateNamePage} from './Name';
+export {default as CreateCompletePage} from './Complete';
diff --git a/client/src/pages/CreateEvent/CreateEvent.tsx b/client/src/pages/CreateEvent/CreateEvent.tsx
deleted file mode 100644
index 5ae0c8d5b..000000000
--- a/client/src/pages/CreateEvent/CreateEvent.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import {useState} from 'react';
-import {useNavigate} from 'react-router-dom';
-
-import {ROUTER_URLS} from '@constants/routerUrls';
-
-const CreateEvent = () => {
-  const [eventTitle, setEventTitle] = useState('');
-  const navigate = useNavigate();
-
-  const submitEventTitle = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    navigate(`${ROUTER_URLS.completeCreateEvent}?${new URLSearchParams({title: eventTitle})}`);
-  };
-
-  return (
-    <section>
-      <h1>행사 생성하기</h1>
-      <h3>시작할 행사 이름을 입력해 주세요.</h3>
-      <form onSubmit={submitEventTitle}>
-        <input value={eventTitle} onChange={event => setEventTitle(event.target.value)} />
-        <button>행동 개시!</button>
-      </form>
-    </section>
-  );
-};
-
-export default CreateEvent;
diff --git a/client/src/pages/CreateEvent/index.ts b/client/src/pages/CreateEvent/index.ts
deleted file mode 100644
index ac2c26d0c..000000000
--- a/client/src/pages/CreateEvent/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export {default as CreateEventPage} from './CreateEvent';
diff --git a/client/src/pages/Main/Main.tsx b/client/src/pages/Main/Main.tsx
index acaa4a167..1cb9f6b26 100644
--- a/client/src/pages/Main/Main.tsx
+++ b/client/src/pages/Main/Main.tsx
@@ -1,4 +1,5 @@
 import {useNavigate} from 'react-router-dom';
+import {FixedButton, MainLayout, Title} from 'haengdong-design';
 
 import {ROUTER_URLS} from '@constants/routerUrls';
 
@@ -6,10 +7,11 @@ const Main = () => {
   const navigate = useNavigate();
 
   return (
-    <section>
-      <h1>행동대장</h1>
-      <button onClick={() => navigate(ROUTER_URLS.createEvent)}>행사 생성하기</button>
-    </section>
+    <MainLayout>
+      {/* <TopNav navType="back" /> */}
+      <Title title="행동대장" description="랜딩페이지입니다." />
+      <FixedButton onClick={() => navigate(ROUTER_URLS.eventCreateName)}>행사 생성하기</FixedButton>
+    </MainLayout>
   );
 };
 
diff --git a/client/src/router.tsx b/client/src/router.tsx
index 04e1dfc5e..b6883623b 100644
--- a/client/src/router.tsx
+++ b/client/src/router.tsx
@@ -1,8 +1,7 @@
 import {createBrowserRouter} from 'react-router-dom';
 
 import {MainPage} from '@pages/Main';
-import {CreateEventPage} from '@pages/CreateEvent';
-import {CompleteCreateEventPage} from '@pages/CompleteCreateEvent';
+import {CreateNamePage, CreateCompletePage} from '@pages/Create';
 import {EventPage} from '@pages/Event';
 
 import {ROUTER_URLS} from '@constants/routerUrls';
@@ -20,12 +19,12 @@ const router = createBrowserRouter([
         element: <MainPage />,
       },
       {
-        path: ROUTER_URLS.createEvent,
-        element: <CreateEventPage />,
+        path: ROUTER_URLS.eventCreateName,
+        element: <CreateNamePage />,
       },
       {
-        path: ROUTER_URLS.completeCreateEvent,
-        element: <CompleteCreateEventPage />,
+        path: ROUTER_URLS.eventCreateComplete,
+        element: <CreateCompletePage />,
       },
       {
         path: ROUTER_URLS.eventManage,
diff --git a/client/tsconfig.json b/client/tsconfig.json
index f285f4d89..b049bf464 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -20,7 +20,7 @@
     // "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": ["jest"],
+    "types": ["node", "jest"],
     "esModuleInterop": true,
     "strictNullChecks": true,
     "strictFunctionTypes": true,
@@ -46,5 +46,6 @@
     },
     "outDir": "./dist"
   },
+  "node": true,
   "include": ["src"]
 }
diff --git a/client/webpack.config.js b/client/webpack.config.js
index 69df113fe..b729f1020 100644
--- a/client/webpack.config.js
+++ b/client/webpack.config.js
@@ -3,6 +3,7 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import {ModifySourcePlugin, ConcatOperation} from 'modify-source-webpack-plugin';
 import {fileURLToPath} from 'url';
+import Dotenv from 'dotenv-webpack';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -62,6 +63,7 @@ export default {
         },
       ],
     }),
+    new Dotenv(),
   ],
   devServer: {
     port: 3000,