diff --git a/backend/package-lock.json b/backend/package-lock.json
new file mode 100644
index 0000000..7b636e6
--- /dev/null
+++ b/backend/package-lock.json
@@ -0,0 +1,944 @@
+{
+    "name": "fromis9-backend",
+    "version": "1.0.0",
+    "lockfileVersion": 3,
+    "requires": true,
+    "packages": {
+        "": {
+            "name": "fromis9-backend",
+            "version": "1.0.0",
+            "dependencies": {
+                "express": "^4.18.2",
+                "mysql2": "^3.11.0"
+            }
+        },
+        "node_modules/accepts": {
+            "version": "1.3.8",
+            "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+            "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+            "license": "MIT",
+            "dependencies": {
+                "mime-types": "~2.1.34",
+                "negotiator": "0.6.3"
+            },
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/array-flatten": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+            "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
+            "license": "MIT"
+        },
+        "node_modules/aws-ssl-profiles": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/aws-ssl-profiles/-/aws-ssl-profiles-1.1.2.tgz",
+            "integrity": "sha512-NZKeq9AfyQvEeNlN0zSYAaWrmBffJh3IELMZfRpJVWgrpEbtEpnjvzqBPf+mxoI287JohRDoa+/nsfqqiZmF6g==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 6.0.0"
+            }
+        },
+        "node_modules/body-parser": {
+            "version": "1.20.4",
+            "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.4.tgz",
+            "integrity": "sha512-ZTgYYLMOXY9qKU/57FAo8F+HA2dGX7bqGc71txDRC1rS4frdFI5R7NhluHxH6M0YItAP0sHB4uqAOcYKxO6uGA==",
+            "license": "MIT",
+            "dependencies": {
+                "bytes": "~3.1.2",
+                "content-type": "~1.0.5",
+                "debug": "2.6.9",
+                "depd": "2.0.0",
+                "destroy": "~1.2.0",
+                "http-errors": "~2.0.1",
+                "iconv-lite": "~0.4.24",
+                "on-finished": "~2.4.1",
+                "qs": "~6.14.0",
+                "raw-body": "~2.5.3",
+                "type-is": "~1.6.18",
+                "unpipe": "~1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.8",
+                "npm": "1.2.8000 || >= 1.4.16"
+            }
+        },
+        "node_modules/bytes": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+            "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/call-bind-apply-helpers": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+            "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+            "license": "MIT",
+            "dependencies": {
+                "es-errors": "^1.3.0",
+                "function-bind": "^1.1.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/call-bound": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+            "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+            "license": "MIT",
+            "dependencies": {
+                "call-bind-apply-helpers": "^1.0.2",
+                "get-intrinsic": "^1.3.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/content-disposition": {
+            "version": "0.5.4",
+            "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+            "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+            "license": "MIT",
+            "dependencies": {
+                "safe-buffer": "5.2.1"
+            },
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/content-type": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+            "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/cookie": {
+            "version": "0.7.2",
+            "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+            "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/cookie-signature": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.7.tgz",
+            "integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==",
+            "license": "MIT"
+        },
+        "node_modules/debug": {
+            "version": "2.6.9",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+            "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+            "license": "MIT",
+            "dependencies": {
+                "ms": "2.0.0"
+            }
+        },
+        "node_modules/denque": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/denque/-/denque-2.1.0.tgz",
+            "integrity": "sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==",
+            "license": "Apache-2.0",
+            "engines": {
+                "node": ">=0.10"
+            }
+        },
+        "node_modules/depd": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+            "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/destroy": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+            "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.8",
+                "npm": "1.2.8000 || >= 1.4.16"
+            }
+        },
+        "node_modules/dunder-proto": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+            "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+            "license": "MIT",
+            "dependencies": {
+                "call-bind-apply-helpers": "^1.0.1",
+                "es-errors": "^1.3.0",
+                "gopd": "^1.2.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/ee-first": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+            "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+            "license": "MIT"
+        },
+        "node_modules/encodeurl": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+            "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/es-define-property": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+            "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/es-errors": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+            "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/es-object-atoms": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+            "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+            "license": "MIT",
+            "dependencies": {
+                "es-errors": "^1.3.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/escape-html": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+            "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+            "license": "MIT"
+        },
+        "node_modules/etag": {
+            "version": "1.8.1",
+            "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+            "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/express": {
+            "version": "4.22.1",
+            "resolved": "https://registry.npmjs.org/express/-/express-4.22.1.tgz",
+            "integrity": "sha512-F2X8g9P1X7uCPZMA3MVf9wcTqlyNp7IhH5qPCI0izhaOIYXaW9L535tGA3qmjRzpH+bZczqq7hVKxTR4NWnu+g==",
+            "license": "MIT",
+            "dependencies": {
+                "accepts": "~1.3.8",
+                "array-flatten": "1.1.1",
+                "body-parser": "~1.20.3",
+                "content-disposition": "~0.5.4",
+                "content-type": "~1.0.4",
+                "cookie": "~0.7.1",
+                "cookie-signature": "~1.0.6",
+                "debug": "2.6.9",
+                "depd": "2.0.0",
+                "encodeurl": "~2.0.0",
+                "escape-html": "~1.0.3",
+                "etag": "~1.8.1",
+                "finalhandler": "~1.3.1",
+                "fresh": "~0.5.2",
+                "http-errors": "~2.0.0",
+                "merge-descriptors": "1.0.3",
+                "methods": "~1.1.2",
+                "on-finished": "~2.4.1",
+                "parseurl": "~1.3.3",
+                "path-to-regexp": "~0.1.12",
+                "proxy-addr": "~2.0.7",
+                "qs": "~6.14.0",
+                "range-parser": "~1.2.1",
+                "safe-buffer": "5.2.1",
+                "send": "~0.19.0",
+                "serve-static": "~1.16.2",
+                "setprototypeof": "1.2.0",
+                "statuses": "~2.0.1",
+                "type-is": "~1.6.18",
+                "utils-merge": "1.0.1",
+                "vary": "~1.1.2"
+            },
+            "engines": {
+                "node": ">= 0.10.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/express"
+            }
+        },
+        "node_modules/finalhandler": {
+            "version": "1.3.2",
+            "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.2.tgz",
+            "integrity": "sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==",
+            "license": "MIT",
+            "dependencies": {
+                "debug": "2.6.9",
+                "encodeurl": "~2.0.0",
+                "escape-html": "~1.0.3",
+                "on-finished": "~2.4.1",
+                "parseurl": "~1.3.3",
+                "statuses": "~2.0.2",
+                "unpipe": "~1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/forwarded": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+            "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/fresh": {
+            "version": "0.5.2",
+            "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+            "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/function-bind": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+            "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/generate-function": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.3.1.tgz",
+            "integrity": "sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==",
+            "license": "MIT",
+            "dependencies": {
+                "is-property": "^1.0.2"
+            }
+        },
+        "node_modules/get-intrinsic": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+            "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+            "license": "MIT",
+            "dependencies": {
+                "call-bind-apply-helpers": "^1.0.2",
+                "es-define-property": "^1.0.1",
+                "es-errors": "^1.3.0",
+                "es-object-atoms": "^1.1.1",
+                "function-bind": "^1.1.2",
+                "get-proto": "^1.0.1",
+                "gopd": "^1.2.0",
+                "has-symbols": "^1.1.0",
+                "hasown": "^2.0.2",
+                "math-intrinsics": "^1.1.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/get-proto": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+            "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+            "license": "MIT",
+            "dependencies": {
+                "dunder-proto": "^1.0.1",
+                "es-object-atoms": "^1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/gopd": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+            "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/has-symbols": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+            "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/hasown": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+            "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+            "license": "MIT",
+            "dependencies": {
+                "function-bind": "^1.1.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/http-errors": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+            "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+            "license": "MIT",
+            "dependencies": {
+                "depd": "~2.0.0",
+                "inherits": "~2.0.4",
+                "setprototypeof": "~1.2.0",
+                "statuses": "~2.0.2",
+                "toidentifier": "~1.0.1"
+            },
+            "engines": {
+                "node": ">= 0.8"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/express"
+            }
+        },
+        "node_modules/iconv-lite": {
+            "version": "0.4.24",
+            "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+            "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+            "license": "MIT",
+            "dependencies": {
+                "safer-buffer": ">= 2.1.2 < 3"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/inherits": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+            "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+            "license": "ISC"
+        },
+        "node_modules/ipaddr.js": {
+            "version": "1.9.1",
+            "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+            "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.10"
+            }
+        },
+        "node_modules/is-property": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
+            "integrity": "sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g==",
+            "license": "MIT"
+        },
+        "node_modules/long": {
+            "version": "5.3.2",
+            "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz",
+            "integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==",
+            "license": "Apache-2.0"
+        },
+        "node_modules/lru.min": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/lru.min/-/lru.min-1.1.3.tgz",
+            "integrity": "sha512-Lkk/vx6ak3rYkRR0Nhu4lFUT2VDnQSxBe8Hbl7f36358p6ow8Bnvr8lrLt98H8J1aGxfhbX4Fs5tYg2+FTwr5Q==",
+            "license": "MIT",
+            "engines": {
+                "bun": ">=1.0.0",
+                "deno": ">=1.30.0",
+                "node": ">=8.0.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wellwelwel"
+            }
+        },
+        "node_modules/math-intrinsics": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+            "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/media-typer": {
+            "version": "0.3.0",
+            "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+            "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/merge-descriptors": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+            "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/methods": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+            "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/mime": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+            "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+            "license": "MIT",
+            "bin": {
+                "mime": "cli.js"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/mime-db": {
+            "version": "1.52.0",
+            "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+            "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/mime-types": {
+            "version": "2.1.35",
+            "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+            "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+            "license": "MIT",
+            "dependencies": {
+                "mime-db": "1.52.0"
+            },
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/ms": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+            "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+            "license": "MIT"
+        },
+        "node_modules/mysql2": {
+            "version": "3.16.0",
+            "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.16.0.tgz",
+            "integrity": "sha512-AEGW7QLLSuSnjCS4pk3EIqOmogegmze9h8EyrndavUQnIUcfkVal/sK7QznE+a3bc6rzPbAiui9Jcb+96tPwYA==",
+            "license": "MIT",
+            "dependencies": {
+                "aws-ssl-profiles": "^1.1.1",
+                "denque": "^2.1.0",
+                "generate-function": "^2.3.1",
+                "iconv-lite": "^0.7.0",
+                "long": "^5.2.1",
+                "lru.min": "^1.0.0",
+                "named-placeholders": "^1.1.3",
+                "seq-queue": "^0.0.5",
+                "sqlstring": "^2.3.2"
+            },
+            "engines": {
+                "node": ">= 8.0"
+            }
+        },
+        "node_modules/mysql2/node_modules/iconv-lite": {
+            "version": "0.7.1",
+            "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.1.tgz",
+            "integrity": "sha512-2Tth85cXwGFHfvRgZWszZSvdo+0Xsqmw8k8ZwxScfcBneNUraK+dxRxRm24nszx80Y0TVio8kKLt5sLE7ZCLlw==",
+            "license": "MIT",
+            "dependencies": {
+                "safer-buffer": ">= 2.1.2 < 3.0.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/express"
+            }
+        },
+        "node_modules/named-placeholders": {
+            "version": "1.1.6",
+            "resolved": "https://registry.npmjs.org/named-placeholders/-/named-placeholders-1.1.6.tgz",
+            "integrity": "sha512-Tz09sEL2EEuv5fFowm419c1+a/jSMiBjI9gHxVLrVdbUkkNUUfjsVYs9pVZu5oCon/kmRh9TfLEObFtkVxmY0w==",
+            "license": "MIT",
+            "dependencies": {
+                "lru.min": "^1.1.0"
+            },
+            "engines": {
+                "node": ">=8.0.0"
+            }
+        },
+        "node_modules/negotiator": {
+            "version": "0.6.3",
+            "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+            "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/object-inspect": {
+            "version": "1.13.4",
+            "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+            "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/on-finished": {
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+            "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+            "license": "MIT",
+            "dependencies": {
+                "ee-first": "1.1.1"
+            },
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/parseurl": {
+            "version": "1.3.3",
+            "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+            "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/path-to-regexp": {
+            "version": "0.1.12",
+            "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+            "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
+            "license": "MIT"
+        },
+        "node_modules/proxy-addr": {
+            "version": "2.0.7",
+            "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+            "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+            "license": "MIT",
+            "dependencies": {
+                "forwarded": "0.2.0",
+                "ipaddr.js": "1.9.1"
+            },
+            "engines": {
+                "node": ">= 0.10"
+            }
+        },
+        "node_modules/qs": {
+            "version": "6.14.1",
+            "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.1.tgz",
+            "integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "side-channel": "^1.1.0"
+            },
+            "engines": {
+                "node": ">=0.6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/range-parser": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+            "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/raw-body": {
+            "version": "2.5.3",
+            "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.3.tgz",
+            "integrity": "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==",
+            "license": "MIT",
+            "dependencies": {
+                "bytes": "~3.1.2",
+                "http-errors": "~2.0.1",
+                "iconv-lite": "~0.4.24",
+                "unpipe": "~1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/safe-buffer": {
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+            "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/feross"
+                },
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/feross"
+                },
+                {
+                    "type": "consulting",
+                    "url": "https://feross.org/support"
+                }
+            ],
+            "license": "MIT"
+        },
+        "node_modules/safer-buffer": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+            "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+            "license": "MIT"
+        },
+        "node_modules/send": {
+            "version": "0.19.2",
+            "resolved": "https://registry.npmjs.org/send/-/send-0.19.2.tgz",
+            "integrity": "sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==",
+            "license": "MIT",
+            "dependencies": {
+                "debug": "2.6.9",
+                "depd": "2.0.0",
+                "destroy": "1.2.0",
+                "encodeurl": "~2.0.0",
+                "escape-html": "~1.0.3",
+                "etag": "~1.8.1",
+                "fresh": "~0.5.2",
+                "http-errors": "~2.0.1",
+                "mime": "1.6.0",
+                "ms": "2.1.3",
+                "on-finished": "~2.4.1",
+                "range-parser": "~1.2.1",
+                "statuses": "~2.0.2"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/send/node_modules/ms": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+            "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+            "license": "MIT"
+        },
+        "node_modules/seq-queue": {
+            "version": "0.0.5",
+            "resolved": "https://registry.npmjs.org/seq-queue/-/seq-queue-0.0.5.tgz",
+            "integrity": "sha512-hr3Wtp/GZIc/6DAGPDcV4/9WoZhjrkXsi5B/07QgX8tsdc6ilr7BFM6PM6rbdAX1kFSDYeZGLipIZZKyQP0O5Q=="
+        },
+        "node_modules/serve-static": {
+            "version": "1.16.3",
+            "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.3.tgz",
+            "integrity": "sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==",
+            "license": "MIT",
+            "dependencies": {
+                "encodeurl": "~2.0.0",
+                "escape-html": "~1.0.3",
+                "parseurl": "~1.3.3",
+                "send": "~0.19.1"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/setprototypeof": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+            "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+            "license": "ISC"
+        },
+        "node_modules/side-channel": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+            "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+            "license": "MIT",
+            "dependencies": {
+                "es-errors": "^1.3.0",
+                "object-inspect": "^1.13.3",
+                "side-channel-list": "^1.0.0",
+                "side-channel-map": "^1.0.1",
+                "side-channel-weakmap": "^1.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/side-channel-list": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+            "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+            "license": "MIT",
+            "dependencies": {
+                "es-errors": "^1.3.0",
+                "object-inspect": "^1.13.3"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/side-channel-map": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+            "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.2",
+                "es-errors": "^1.3.0",
+                "get-intrinsic": "^1.2.5",
+                "object-inspect": "^1.13.3"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/side-channel-weakmap": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+            "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.2",
+                "es-errors": "^1.3.0",
+                "get-intrinsic": "^1.2.5",
+                "object-inspect": "^1.13.3",
+                "side-channel-map": "^1.0.1"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/sqlstring": {
+            "version": "2.3.3",
+            "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.3.tgz",
+            "integrity": "sha512-qC9iz2FlN7DQl3+wjwn3802RTyjCx7sDvfQEXchwa6CWOx07/WVfh91gBmQ9fahw8snwGEWU3xGzOt4tFyHLxg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/statuses": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+            "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/toidentifier": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+            "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.6"
+            }
+        },
+        "node_modules/type-is": {
+            "version": "1.6.18",
+            "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+            "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+            "license": "MIT",
+            "dependencies": {
+                "media-typer": "0.3.0",
+                "mime-types": "~2.1.24"
+            },
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/unpipe": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+            "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/utils-merge": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+            "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4.0"
+            }
+        },
+        "node_modules/vary": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+            "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.8"
+            }
+        }
+    }
+}
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
index 467419b..378f855 100644
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@@ -1,4 +1,5 @@
 services:
+  # 프론트엔드 - Vite 개발 서버
   fromis9-web:
     image: node:20-alpine
     container_name: fromis9-web
@@ -8,8 +9,28 @@ services:
       - ./frontend:/app
     networks:
       - app
+      - db
+    restart: unless-stopped
+
+  # 백엔드 - Express API 서버
+  fromis9-backend:
+    image: node:20-alpine
+    container_name: fromis9-backend
+    working_dir: /app
+    command: sh -c "npm install && node server.js"
+    env_file:
+      - .env
+    environment:
+      - PORT=3000
+    volumes:
+      - ./backend:/app
+    networks:
+      - app
+      - db
     restart: unless-stopped
 
 networks:
   app:
     external: true
+  db:
+    external: true
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 580b84f..c278788 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -5,6 +5,7 @@ import { BrowserView, MobileView } from 'react-device-detect';
 import PCHome from './pages/pc/Home';
 import PCMembers from './pages/pc/Members';
 import PCDiscography from './pages/pc/Discography';
+import PCAlbumDetail from './pages/pc/AlbumDetail';
 import PCSchedule from './pages/pc/Schedule';
 
 // PC 레이아웃
@@ -19,6 +20,7 @@ function App() {
                         <Route path="/" element={<PCHome />} />
                         <Route path="/members" element={<PCMembers />} />
                         <Route path="/discography" element={<PCDiscography />} />
+                        <Route path="/discography/:id" element={<PCAlbumDetail />} />
                         <Route path="/schedule" element={<PCSchedule />} />
                     </Routes>
                 </PCLayout>
diff --git a/frontend/src/components/pc/Header.jsx b/frontend/src/components/pc/Header.jsx
index 03cd3f5..4fb60bd 100644
--- a/frontend/src/components/pc/Header.jsx
+++ b/frontend/src/components/pc/Header.jsx
@@ -13,7 +13,7 @@ function Header() {
     const navItems = [
         { path: '/', label: '홈' },
         { path: '/members', label: '멤버' },
-        { path: '/discography', label: '디스코그래피' },
+        { path: '/discography', label: '앨범' },
         { path: '/schedule', label: '스케줄' },
     ];
 
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 782554d..921b81e 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -35,3 +35,41 @@ body {
 ::-webkit-scrollbar-thumb:hover {
   background: #456e50;
 }
+
+/* View Transitions API - 앨범 커버 이미지 부드러운 전환 */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-duration: 0.3s;
+}
+
+/* 앨범 커버 트랜지션 */
+::view-transition-group(*) {
+  animation-duration: 0.4s;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+::view-transition-old(*) {
+  animation: fade-out 0.3s ease-out both;
+}
+
+::view-transition-new(*) {
+  animation: fade-in 0.3s ease-in both;
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
diff --git a/frontend/src/pages/pc/AlbumDetail.jsx b/frontend/src/pages/pc/AlbumDetail.jsx
new file mode 100644
index 0000000..2ed31e3
--- /dev/null
+++ b/frontend/src/pages/pc/AlbumDetail.jsx
@@ -0,0 +1,209 @@
+import { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { ArrowLeft, Calendar, Music2, Play, Clock } from 'lucide-react';
+
+function AlbumDetail() {
+    const { id } = useParams();
+    const navigate = useNavigate();
+    const [album, setAlbum] = useState(null);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        fetch(`/api/albums/${id}`)
+            .then(res => res.json())
+            .then(data => {
+                setAlbum(data);
+                setLoading(false);
+            })
+            .catch(error => {
+                console.error('앨범 데이터 로드 오류:', error);
+                setLoading(false);
+            });
+    }, [id]);
+
+    // 날짜 포맷팅
+    const formatDate = (dateStr) => {
+        if (!dateStr) return '';
+        const date = new Date(dateStr);
+        return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, '0')}.${String(date.getDate()).padStart(2, '0')}`;
+    };
+
+    // 총 재생 시간 계산
+    const getTotalDuration = () => {
+        if (!album?.tracks) return '';
+        let totalSeconds = 0;
+        album.tracks.forEach(track => {
+            if (track.duration) {
+                const parts = track.duration.split(':');
+                totalSeconds += parseInt(parts[0]) * 60 + parseInt(parts[1]);
+            }
+        });
+        const mins = Math.floor(totalSeconds / 60);
+        const secs = totalSeconds % 60;
+        return `${mins}:${String(secs).padStart(2, '0')}`;
+    };
+
+    // 뒤로가기
+    const handleBack = () => {
+        navigate('/discography');
+    };
+
+    if (loading) {
+        return (
+            <motion.div 
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                className="py-16 flex justify-center items-center min-h-[60vh]"
+            >
+                <div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent"></div>
+            </motion.div>
+        );
+    }
+
+    if (!album) {
+        return (
+            <div className="py-16 text-center">
+                <p className="text-gray-500">앨범을 찾을 수 없습니다.</p>
+            </div>
+        );
+    }
+
+    return (
+        <motion.div 
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.3 }}
+            className="py-16"
+        >
+            <div className="max-w-7xl mx-auto px-6">
+                {/* 뒤로가기 버튼 */}
+                <motion.button
+                    initial={{ opacity: 0, x: -20 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    onClick={handleBack}
+                    className="flex items-center gap-2 text-gray-500 hover:text-primary mb-8 transition-colors"
+                >
+                    <ArrowLeft size={20} />
+                    <span>앨범으로 돌아가기</span>
+                </motion.button>
+
+                {/* 앨범 정보 헤더 */}
+                <div className="flex gap-10 mb-10">
+                    {/* 앨범 커버 */}
+                    <motion.div
+                        initial={{ opacity: 0, scale: 0.9 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        transition={{ duration: 0.4 }}
+                        className="w-72 h-72 flex-shrink-0 rounded-2xl overflow-hidden shadow-2xl"
+                    >
+                        <img
+                            src={album.cover_url}
+                            alt={album.title}
+                            className="w-full h-full object-cover"
+                        />
+                    </motion.div>
+
+                    {/* 앨범 정보 */}
+                    <motion.div
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ delay: 0.1, duration: 0.4 }}
+                        className="flex-1 pt-2"
+                    >
+                        <span className="inline-block w-fit px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full mb-3">
+                            {album.album_type}
+                        </span>
+                        <h1 className="text-4xl font-bold mb-4">{album.title}</h1>
+                        
+                        <div className="flex items-center gap-6 text-gray-500 mb-4">
+                            <div className="flex items-center gap-2">
+                                <Calendar size={18} />
+                                <span>{formatDate(album.release_date)}</span>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <Music2 size={18} />
+                                <span>{album.tracks?.length || 0}곡</span>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <Clock size={18} />
+                                <span>{getTotalDuration()}</span>
+                            </div>
+                        </div>
+
+                        <p className="text-sm text-primary font-medium">
+                            타이틀곡: {album.tracks?.find(t => t.is_title_track === 1)?.title || album.tracks?.[0]?.title}
+                        </p>
+                    </motion.div>
+                </div>
+
+                {/* 2열 그리드: 소개글 + 트랙 리스트 */}
+                <div className="grid grid-cols-3 gap-8">
+                    {/* 소개글 */}
+                    {album.description && (
+                        <motion.div
+                            initial={{ opacity: 0, y: 30 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ delay: 0.2, duration: 0.4 }}
+                            className="col-span-1"
+                        >
+                            <h2 className="text-xl font-bold mb-4">앨범 소개</h2>
+                            <div className="bg-white rounded-2xl shadow-lg p-6">
+                                <p className="text-gray-600 leading-relaxed text-sm whitespace-pre-line">
+                                    {album.description}
+                                </p>
+                            </div>
+                        </motion.div>
+                    )}
+
+                    {/* 트랙 리스트 */}
+                    <motion.div
+                        initial={{ opacity: 0, y: 30 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ delay: 0.3, duration: 0.4 }}
+                        className={album.description ? "col-span-2" : "col-span-3"}
+                    >
+                        <h2 className="text-xl font-bold mb-4">수록곡</h2>
+                        <div className="bg-white rounded-2xl shadow-lg overflow-hidden">
+                            {album.tracks?.map((track, index) => (
+                                <div
+                                    key={track.id}
+                                    className={`group flex items-center gap-4 p-4 hover:bg-primary/5 transition-all duration-200 cursor-pointer ${
+                                        index !== album.tracks.length - 1 ? 'border-b border-gray-100' : ''
+                                    }`}
+                                >
+                                    {/* 트랙 번호 */}
+                                    <div className="w-10 h-10 flex items-center justify-center rounded-full bg-gray-100 group-hover:bg-primary/10 transition-colors">
+                                        <span className="text-gray-500 group-hover:text-primary transition-colors">
+                                            {String(track.track_number).padStart(2, '0')}
+                                        </span>
+                                    </div>
+
+                                    {/* 트랙 정보 */}
+                                    <div className="flex-1">
+                                        <div className="flex items-center gap-2">
+                                            <h3 className="font-semibold group-hover:text-primary transition-colors">{track.title}</h3>
+                                            {track.is_title_track === 1 && (
+                                                <span className="px-2 py-0.5 bg-primary text-white text-xs font-medium rounded-full">
+                                                    타이틀
+                                                </span>
+                                            )}
+                                        </div>
+                                    </div>
+
+                                    {/* 재생 시간 */}
+                                    <div className="text-gray-400 tabular-nums text-sm">
+                                        {track.duration || '-'}
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </motion.div>
+                </div>
+            </div>
+        </motion.div>
+    );
+}
+
+export default AlbumDetail;
+
diff --git a/frontend/src/pages/pc/Discography.jsx b/frontend/src/pages/pc/Discography.jsx
index 003ca5f..d606147 100644
--- a/frontend/src/pages/pc/Discography.jsx
+++ b/frontend/src/pages/pc/Discography.jsx
@@ -1,8 +1,10 @@
 import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import { Calendar, Music } from 'lucide-react';
 
 function Discography() {
+    const navigate = useNavigate();
     const [albums, setAlbums] = useState([]);
     const [loading, setLoading] = useState(true);
 
@@ -41,6 +43,11 @@ function Discography() {
         총: albums.length
     };
 
+    // 앨범 클릭 핸들러
+    const handleAlbumClick = (albumId) => {
+        navigate(`/discography/${albumId}`);
+    };
+
     if (loading) {
         return (
             <div className="py-16 flex justify-center items-center min-h-[60vh]">
@@ -53,13 +60,13 @@ function Discography() {
         <div className="py-16">
             <div className="max-w-7xl mx-auto px-6">
                 {/* 헤더 */}
-                <div className="text-center mb-12">
+                <div className="text-center mb-8">
                     <motion.h1
                         initial={{ opacity: 0, y: -20 }}
                         animate={{ opacity: 1, y: 0 }}
                         className="text-4xl font-bold mb-4"
                     >
-                        디스코그래피
+                        앨범
                     </motion.h1>
                     <motion.p
                         initial={{ opacity: 0 }}
@@ -71,6 +78,31 @@ function Discography() {
                     </motion.p>
                 </div>
 
+                {/* 통계 - 상단 배치 */}
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.3 }}
+                    className="mb-12 grid grid-cols-4 gap-4"
+                >
+                    <div className="bg-gray-50 rounded-xl p-4 text-center">
+                        <p className="text-2xl font-bold text-primary mb-1">{albumStats.정규}</p>
+                        <p className="text-gray-500 text-sm">정규 앨범</p>
+                    </div>
+                    <div className="bg-gray-50 rounded-xl p-4 text-center">
+                        <p className="text-2xl font-bold text-primary mb-1">{albumStats.미니}</p>
+                        <p className="text-gray-500 text-sm">미니 앨범</p>
+                    </div>
+                    <div className="bg-gray-50 rounded-xl p-4 text-center">
+                        <p className="text-2xl font-bold text-primary mb-1">{albumStats.싱글}</p>
+                        <p className="text-gray-500 text-sm">싱글 앨범</p>
+                    </div>
+                    <div className="bg-gray-50 rounded-xl p-4 text-center">
+                        <p className="text-2xl font-bold text-primary mb-1">{albumStats.총}</p>
+                        <p className="text-gray-500 text-sm">총 앨범</p>
+                    </div>
+                </motion.div>
+
                 {/* 앨범 그리드 */}
                 <div className="grid grid-cols-4 gap-8">
                     {albums.map((album, index) => (
@@ -79,20 +111,19 @@ function Discography() {
                             initial={{ opacity: 0, y: 30 }}
                             animate={{ opacity: 1, y: 0 }}
                             transition={{ delay: index * 0.1 }}
-                            className="group bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300"
+                            className="group bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 cursor-pointer"
+                            onClick={() => handleAlbumClick(album.id)}
                         >
                             {/* 앨범 커버 */}
-                            <div className="relative aspect-square bg-gray-100 overflow-hidden">
+                            <div 
+                                className="relative aspect-square bg-gray-100 overflow-hidden"
+                                style={{ viewTransitionName: `album-cover-${album.id}` }}
+                            >
                                 <img
                                     src={album.cover_url}
                                     alt={album.title}
                                     className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                                 />
-                                
-                                {/* 앨범 타입 배지 */}
-                                <span className="absolute top-4 left-4 px-3 py-1 bg-primary text-white text-xs font-medium rounded-full">
-                                    {album.album_type}
-                                </span>
 
                                 {/* 호버 오버레이 */}
                                 <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
@@ -105,7 +136,12 @@ function Discography() {
 
                             {/* 앨범 정보 */}
                             <div className="p-6">
-                                <h3 className="font-bold text-lg mb-1 truncate">{album.title}</h3>
+                                <div className="flex items-center gap-2 mb-1">
+                                    <h3 className="font-bold text-lg truncate flex-1">{album.title}</h3>
+                                    <span className="px-2 py-0.5 bg-primary/10 text-primary text-xs font-medium rounded-full flex-shrink-0">
+                                        {album.album_type}
+                                    </span>
+                                </div>
                                 <p className="text-primary text-sm font-medium mb-3">
                                     {getTitleTrack(album.tracks)}
                                 </p>
@@ -117,31 +153,6 @@ function Discography() {
                         </motion.div>
                     ))}
                 </div>
-
-                {/* 통계 */}
-                <motion.div
-                    initial={{ opacity: 0, y: 30 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ delay: 0.5 }}
-                    className="mt-16 grid grid-cols-4 gap-6"
-                >
-                    <div className="bg-gray-50 rounded-2xl p-6 text-center">
-                        <p className="text-3xl font-bold text-primary mb-1">{albumStats.정규}</p>
-                        <p className="text-gray-500 text-sm">정규 앨범</p>
-                    </div>
-                    <div className="bg-gray-50 rounded-2xl p-6 text-center">
-                        <p className="text-3xl font-bold text-primary mb-1">{albumStats.미니}</p>
-                        <p className="text-gray-500 text-sm">미니 앨범</p>
-                    </div>
-                    <div className="bg-gray-50 rounded-2xl p-6 text-center">
-                        <p className="text-3xl font-bold text-primary mb-1">{albumStats.싱글}</p>
-                        <p className="text-gray-500 text-sm">싱글 앨범</p>
-                    </div>
-                    <div className="bg-gray-50 rounded-2xl p-6 text-center">
-                        <p className="text-3xl font-bold text-primary mb-1">{albumStats.총}</p>
-                        <p className="text-gray-500 text-sm">총 앨범</p>
-                    </div>
-                </motion.div>
             </div>
         </div>
     );
diff --git a/frontend/src/pages/pc/Home.jsx b/frontend/src/pages/pc/Home.jsx
index 44a5b0c..1e195f9 100644
--- a/frontend/src/pages/pc/Home.jsx
+++ b/frontend/src/pages/pc/Home.jsx
@@ -67,7 +67,7 @@ function Home() {
                             className="group p-8 bg-gray-50 rounded-2xl hover:bg-primary hover:text-white transition-all duration-300"
                         >
                             <Disc3 size={40} className="mb-4 text-primary group-hover:text-white" />
-                            <h3 className="text-xl font-bold mb-2">디스코그래피</h3>
+                            <h3 className="text-xl font-bold mb-2">앨범</h3>
                             <p className="text-gray-500 group-hover:text-white/80">앨범과 음악을 확인하세요</p>
                         </Link>
                         <Link
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 5ac51f1..b7e6236 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -7,5 +7,11 @@ export default defineConfig({
     host: true,
     port: 5173,
     allowedHosts: ["fromis9.caadiq.co.kr"],
+    proxy: {
+      "/api": {
+        target: "http://fromis9-backend:3000",
+        changeOrigin: true,
+      },
+    },
   },
 });
diff --git a/update_descriptions.sql b/update_descriptions.sql
new file mode 100644
index 0000000..ed0d48d
--- /dev/null
+++ b/update_descriptions.sql
@@ -0,0 +1,34 @@
+-- 하얀 그리움 앨범 소개글
+UPDATE albums SET description = '하얗게 내리는 겨울, 그 안에 다시 피어난 따뜻한 기억.
+
+프로미스나인이 김민종의 명곡 "하얀 그리움"을 지금의 계절과 감성으로 다시 피워냈다.
+프로미스나인 특유의 맑고 투명한 음색과 섬세한 감정 표현으로, 한층 현대적이고 따뜻한 감성을 완성했다.
+부드럽게 흐르는 신스 리프와 맑은 톤의 기타, 리드미컬한 드럼이 어우러져 겨울의 청량함과 온기를 동시에 담은 미디엄 템포 팝 트랙으로 완성되었다.
+
+눈처럼 흩날리는 멜로디 위로 멤버들의 보컬이 차곡히 쌓이며, "그리움"이라는 단어가 차가움이 아닌 사랑스러운 감정의 잔상으로 다가온다.
+
+사랑이 끝난 뒤에도 남아 있는 마음의 온기를 노래하며,
+한때는 사랑이었고 지금은 추억이 된 감정이 겨울 햇살처럼 포근하게 번져 간다.
+후반부로 갈수록 깊어지는 보컬 하모니와 풍성한 편곡은 원곡의 정서를 그대로 품으면서도, 프로미스나인만의 따뜻하고 서정적인 팝 감성으로 다시 빛난다.
+
+마치 오래된 사진 속 장면이 현재의 색으로 복원되듯 익숙한 멜로디가 새로운 온기로 피어나며, 단순한 리메이크를 넘어 사랑의 기억을 포근하게 감싸는 계절의 이야기이자 과거와 현재를 잇는 다리로 완성된다.' WHERE id = 2;
+
+-- From Our 20's 앨범 소개글
+UPDATE albums SET description = '[From Our 20''s] "어디로든 갈 수 있고 무엇이든 될 수 있는 아름다운 20대의 이야기"
+
+"여전히 서툴지만, 그래서 더 아름다운 시간.
+지금 이 순간, 우리는 우리 자신을 살아간다."
+
+프로미스나인의 6번째 미니 앨범 [From Our 20''s]는 "20대의 우리"가 마주한 감정과 순간들을 솔직하게 풀어낸 기록이다.
+
+타이틀곡 "LIKE YOU BETTER"를 포함해 총 6개의 트랙으로 구성된 미니 앨범으로, 아름다운 20대를 살아가는 "프로미스나인"의 감정과 이야기를 음악 속에 진솔하게 담아냈다.
+
+그동안 "프로미스나인"이 꾸준히 구축해온 팀 고유의 음악적 색채를 바탕으로, 보다 팝적인 요소를 세련되게 녹여내며 익숙하면서도 새로운 질감의 완성도를 선보인다.
+
+이는 팀의 정체성을 견고히 유지하면서도 한층 넓어진 음악적 스펙트럼을 제시하며, "20대의 우리"가 전하는 다채로운 감정의 결을 감각적으로 풀어낸 앨범으로 성장하고 변화한 프로미스나인을 볼 수 있다.
+
+앨범을 관통하는 메시지는 "20대의 삶" 그 자체이다.
+
+여전히 덜 익은 마음을 품은 채, 어른들의 세상에 놓여 모든 것이 변할 것을 알면서도 영원을 꿈꾸고, 끝이 있다는 걸 알면서도 온 힘을 다해 사랑하며, 불안과 기대, 순수함과 복잡함이 공존하는 시간 속의 20대 소녀들은 누구보다 자신을 돌보며, 나를 나로서 있게 해줄 수 있는 사랑하는 이들과 함께하는 시간 그 자체가 삶이라 믿는다.
+
+우리는 이제 어디든 갈 수 있고 무엇이든 될 수 있다.' WHERE id = 1;