feat: 앨범 상세 페이지 추가 및 UI 개선

- 앨범 상세 페이지 (AlbumDetail.jsx) 신규 생성 - 앨범 목록에서 클릭 시 상세 페이지로 이동 - 소개글/트랙 리스트 2열 그리드 레이아웃 - 트랙 호버 효과 및 총 재생시간 표시 - 페이지 전환 fade 애니메이션 적용 - '디스코그래피' -> '앨범' 텍스트 변경 - albums 테이블 description 컬럼 추가 - 트랙 duration 데이터 입력
feat: 앨범 데이터 API 연동
2026-01-01 10:20:54 +09:00 · 2026-01-01 09:32:38 +09:00 · 2026-01-01 00:26:04 +09:00 · 2026-01-01 00:20:33 +09:00
19 changed files with 4322 additions and 65 deletions
--- a/backend/lib/db.js
+++ b/backend/lib/db.js
@ -0,0 +1,15 @@
+import mysql from "mysql2/promise";
+
+// MariaDB 연결 풀 생성
+const pool = mysql.createPool({
+  host: process.env.DB_HOST || "mariadb",
+  port: parseInt(process.env.DB_PORT) || 3306,
+  user: process.env.DB_USER || "fromis9",
+  password: process.env.DB_PASSWORD,
+  database: process.env.DB_NAME || "fromis9",
+  waitForConnections: true,
+  connectionLimit: 10,
+  queueLimit: 0,
+});
+
+export default pool;
--- a/backend/package-lock.json
+++ 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"
+            }
+        }
+    }
+}
--- a/backend/routes/albums.js
+++ b/backend/routes/albums.js
@ -0,0 +1,57 @@
+import express from "express";
+import pool from "../lib/db.js";
+
+const router = express.Router();
+
+// 전체 앨범 조회 (트랙 포함)
+router.get("/", async (req, res) => {
+  try {
+    // 앨범 목록 조회
+    const [albums] = await pool.query(
+      "SELECT id, title, album_type, release_date, cover_url FROM albums ORDER BY release_date DESC"
+    );
+
+    // 각 앨범에 트랙 정보 추가
+    for (const album of albums) {
+      const [tracks] = await pool.query(
+        "SELECT id, track_number, title, is_title_track, duration, lyricist, composer, arranger FROM tracks WHERE album_id = ? ORDER BY track_number",
+        [album.id]
+      );
+      album.tracks = tracks;
+    }
+
+    res.json(albums);
+  } catch (error) {
+    console.error("앨범 조회 오류:", error);
+    res.status(500).json({ error: "앨범 정보를 가져오는데 실패했습니다." });
+  }
+});
+
+// 특정 앨범 조회 (트랙 및 상세 정보 포함)
+router.get("/:id", async (req, res) => {
+  try {
+    const [albums] = await pool.query("SELECT * FROM albums WHERE id = ?", [
+      req.params.id,
+    ]);
+
+    if (albums.length === 0) {
+      return res.status(404).json({ error: "앨범을 찾을 수 없습니다." });
+    }
+
+    const album = albums[0];
+
+    // 트랙 정보 조회 (가사 포함)
+    const [tracks] = await pool.query(
+      "SELECT * FROM tracks WHERE album_id = ? ORDER BY track_number",
+      [album.id]
+    );
+    album.tracks = tracks;
+
+    res.json(album);
+  } catch (error) {
+    console.error("앨범 조회 오류:", error);
+    res.status(500).json({ error: "앨범 정보를 가져오는데 실패했습니다." });
+  }
+});
+
+export default router;
--- a/backend/routes/members.js
+++ b/backend/routes/members.js
@ -0,0 +1,35 @@
+import express from "express";
+import pool from "../lib/db.js";
+
+const router = express.Router();
+
+// 전체 멤버 조회
+router.get("/", async (req, res) => {
+  try {
+    const [rows] = await pool.query(
+      "SELECT id, name, name_en, birth_date, position, image_url, instagram FROM members ORDER BY id"
+    );
+    res.json(rows);
+  } catch (error) {
+    console.error("멤버 조회 오류:", error);
+    res.status(500).json({ error: "멤버 정보를 가져오는데 실패했습니다." });
+  }
+});
+
+// 특정 멤버 조회
+router.get("/:id", async (req, res) => {
+  try {
+    const [rows] = await pool.query("SELECT * FROM members WHERE id = ?", [
+      req.params.id,
+    ]);
+    if (rows.length === 0) {
+      return res.status(404).json({ error: "멤버를 찾을 수 없습니다." });
+    }
+    res.json(rows[0]);
+  } catch (error) {
+    console.error("멤버 조회 오류:", error);
+    res.status(500).json({ error: "멤버 정보를 가져오는데 실패했습니다." });
+  }
+});
+
+export default router;
--- a/backend/routes/stats.js
+++ b/backend/routes/stats.js
@ -0,0 +1,28 @@
+import express from "express";
+import pool from "../lib/db.js";
+
+const router = express.Router();
+
+// 통계 조회 (멤버 수, 앨범 수)
+router.get("/", async (req, res) => {
+  try {
+    const [memberCount] = await pool.query(
+      "SELECT COUNT(*) as count FROM members"
+    );
+    const [albumCount] = await pool.query(
+      "SELECT COUNT(*) as count FROM albums"
+    );
+
+    res.json({
+      memberCount: memberCount[0].count,
+      albumCount: albumCount[0].count,
+      debutYear: 2018,
+      fandomName: "flover",
+    });
+  } catch (error) {
+    console.error("통계 조회 오류:", error);
+    res.status(500).json({ error: "통계 정보를 가져오는데 실패했습니다." });
+  }
+});
+
+export default router;
--- a/backend/server.js
+++ b/backend/server.js
@ -1,6 +1,9 @@
 import express from "express";
 import path from "path";
 import { fileURLToPath } from "url";
+import membersRouter from "./routes/members.js";
+import albumsRouter from "./routes/albums.js";
+import statsRouter from "./routes/stats.js";

 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@ -14,11 +17,15 @@ app.use(express.json());
 // 정적 파일 서빙 (프론트엔드 빌드 결과물)
 app.use(express.static(path.join(__dirname, "dist")));

-// API 라우트 (추후 구현)
+// API 라우트
 app.get("/api/health", (req, res) => {
  res.json({ status: "ok", timestamp: new Date().toISOString() });
 });

+app.use("/api/members", membersRouter);
+app.use("/api/albums", albumsRouter);
+app.use("/api/stats", statsRouter);
+
 // SPA 폴백 - 모든 요청을 index.html로
 app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "dist", "index.html"));
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@ -0,0 +1,36 @@
+services:
+  # 프론트엔드 - Vite 개발 서버
+  fromis9-web:
+    image: node:20-alpine
+    container_name: fromis9-web
+    working_dir: /app
+    command: sh -c "npm install && npm run dev -- --host 0.0.0.0 --port 80"
+    volumes:
+      - ./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
--- a/frontend/index.html
+++ b/frontend/index.html
@ -4,11 +4,11 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>fromis_9 - 프로미스나인</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
-      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
    />
  </head>
  <body>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- 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>
--- 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: '스케줄' },
    ];

--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@ -8,7 +8,6 @@ html {
 }

 body {
-  font-family: "Noto Sans KR", sans-serif;
  background-color: #fafafa;
  color: #1a1a1a;
 }
@ -36,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;
+  }
+}
--- a/frontend/src/pages/pc/AlbumDetail.jsx
+++ 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;
+
--- a/frontend/src/pages/pc/Discography.jsx
+++ b/frontend/src/pages/pc/Discography.jsx
@ -1,19 +1,72 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import { Calendar, Music } from 'lucide-react';
-import { albums } from '../../data/dummy';

 function Discography() {
+    const navigate = useNavigate();
+    const [albums, setAlbums] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        fetch('/api/albums')
+            .then(res => res.json())
+            .then(data => {
+                setAlbums(data);
+                setLoading(false);
+            })
+            .catch(error => {
+                console.error('앨범 데이터 로드 오류:', error);
+                setLoading(false);
+            });
+    }, []);
+
+    // 날짜 포맷팅
+    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 getTitleTrack = (tracks) => {
+        if (!tracks || tracks.length === 0) return '';
+        const titleTrack = tracks.find(t => t.is_title_track);
+        return titleTrack ? titleTrack.title : tracks[0].title;
+    };
+
+    // 앨범 타입별 개수 계산
+    const albumStats = {
+        정규: albums.filter(a => a.album_type === '정규').length,
+        미니: albums.filter(a => a.album_type === '미니').length,
+        싱글: albums.filter(a => a.album_type === '싱글').length,
+        총: albums.length
+    };
+
+    // 앨범 클릭 핸들러
+    const handleAlbumClick = (albumId) => {
+        navigate(`/discography/${albumId}`);
+    };
+
+    if (loading) {
+        return (
+            <div 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>
+            </div>
+        );
+    }
+
    return (
        <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 }}
@ -25,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) => (
@ -33,69 +111,48 @@ 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.coverUrl}
+                                    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.albumType}
-                                </span>

                                {/* 호버 오버레이 */}
                                <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                                    <div className="text-center text-white">
                                        <Music size={40} className="mx-auto mb-2" />
-                                        <p className="text-sm">앨범 상세보기</p>
+                                        <p className="text-sm">{album.tracks?.length || 0}곡 수록</p>
                                    </div>
                                </div>
                            </div>

                            {/* 앨범 정보 */}
                            <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">
-                                    {album.titleTrack}
+                                    {getTitleTrack(album.tracks)}
                                </p>
                                <div className="flex items-center gap-2 text-sm text-gray-500">
                                    <Calendar size={14} />
-                                    <span>{album.releaseDate}</span>
+                                    <span>{formatDate(album.release_date)}</span>
                                </div>
                            </div>
                        </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">1</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">2</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">1</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">4+</p>
-                        <p className="text-gray-500 text-sm">총 앨범</p>
-                    </div>
-                </motion.div>
            </div>
        </div>
    );
--- a/frontend/src/pages/pc/Home.jsx
+++ b/frontend/src/pages/pc/Home.jsx
@ -1,9 +1,19 @@
+import { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import { Link } from 'react-router-dom';
 import { Calendar, Users, Disc3, ArrowRight } from 'lucide-react';
-import { members, schedules, albums } from '../../data/dummy';
+import { schedules, albums } from '../../data/dummy';

 function Home() {
+    const [members, setMembers] = useState([]);
+
+    useEffect(() => {
+        fetch('/api/members')
+            .then(res => res.json())
+            .then(data => setMembers(data))
+            .catch(error => console.error('멤버 데이터 로드 오류:', error));
+    }, []);
+
    return (
        <div>
            {/* 히어로 섹션 */}
@ -57,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
@ -92,14 +102,14 @@ function Home() {
                            >
                                <div className="aspect-square bg-gray-100">
                                    <img
-                                        src={member.imageUrl}
+                                        src={member.image_url}
                                        alt={member.name}
                                        className="w-full h-full object-cover"
                                    />
                                </div>
                                <div className="p-4 text-center">
                                    <h3 className="font-bold text-lg">{member.name}</h3>
-                                    <p className="text-sm text-gray-500">{member.position.split(',')[0]}</p>
+                                    <p className="text-sm text-gray-500">{member.position?.split(',')[0]}</p>
                                </div>
                            </motion.div>
                        ))}
--- a/frontend/src/pages/pc/Members.jsx
+++ b/frontend/src/pages/pc/Members.jsx
@ -1,8 +1,43 @@
+import { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import { Instagram, Calendar } from 'lucide-react';
-import { members } from '../../data/dummy';

 function Members() {
+    const [members, setMembers] = useState([]);
+    const [stats, setStats] = useState({ memberCount: 0, albumCount: 0, debutYear: 2018, fandomName: 'flover' });
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        Promise.all([
+            fetch('/api/members').then(res => res.json()),
+            fetch('/api/stats').then(res => res.json())
+        ])
+            .then(([membersData, statsData]) => {
+                setMembers(membersData);
+                setStats(statsData);
+                setLoading(false);
+            })
+            .catch(error => {
+                console.error('데이터 로드 오류:', error);
+                setLoading(false);
+            });
+    }, []);
+
+    // 날짜 포맷팅 함수
+    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')}`;
+    };
+
+    if (loading) {
+        return (
+            <div 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>
+            </div>
+        );
+    }
+
    return (
        <div className="py-16">
            <div className="max-w-7xl mx-auto px-6">
@ -21,7 +56,7 @@ function Members() {
                        transition={{ delay: 0.2 }}
                        className="text-gray-500"
                    >
-                        프로미스나인의 5명의 멤버를 소개합니다
+                        프로미스나인의 {stats.memberCount}명의 멤버를 소개합니다
                    </motion.p>
                </div>

@ -33,26 +68,26 @@ function Members() {
                            initial={{ opacity: 0, y: 30 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: index * 0.1 }}
-                            className="group"
+                            className="group h-full"
                        >
-                            <div className="relative bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300">
+                            <div className="relative bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 h-full flex flex-col">
                                {/* 이미지 */}
-                                <div className="aspect-[3/4] bg-gray-100 overflow-hidden">
+                                <div className="aspect-[3/4] bg-gray-100 overflow-hidden flex-shrink-0">
                                    <img
-                                        src={member.imageUrl}
+                                        src={member.image_url}
                                        alt={member.name}
                                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                                    />
                                </div>

                                {/* 정보 */}
-                                <div className="p-6">
+                                <div className="p-6 flex-1 flex flex-col">
                                    <h3 className="text-xl font-bold mb-1">{member.name}</h3>
-                                    <p className="text-primary text-sm font-medium mb-3">{member.position}</p>
+                                    <p className="text-primary text-sm font-medium mb-3 min-h-[20px]">{member.position || '\u00A0'}</p>
                                    
                                    <div className="flex items-center gap-2 text-sm text-gray-500 mb-4">
                                        <Calendar size={14} />
-                                        <span>{member.birthDate}</span>
+                                        <span>{formatDate(member.birth_date)}</span>
                                    </div>

                                    {/* 인스타그램 링크 */}
@ -60,7 +95,7 @@ function Members() {
                                        href={member.instagram}
                                        target="_blank"
                                        rel="noopener noreferrer"
-                                        className="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-pink-500 transition-colors"
+                                        className="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-pink-500 transition-colors mt-auto"
                                    >
                                        <Instagram size={16} />
                                        <span>Instagram</span>
@ -83,19 +118,19 @@ function Members() {
                >
                    <div className="grid grid-cols-4 gap-8 text-center">
                        <div>
-                            <p className="text-4xl font-bold mb-2">2018</p>
+                            <p className="text-4xl font-bold mb-2">{stats.debutYear}</p>
                            <p className="text-white/70">데뷔 연도</p>
                        </div>
                        <div>
-                            <p className="text-4xl font-bold mb-2">5</p>
+                            <p className="text-4xl font-bold mb-2">{stats.memberCount}</p>
                            <p className="text-white/70">멤버 수</p>
                        </div>
                        <div>
-                            <p className="text-4xl font-bold mb-2">7+</p>
+                            <p className="text-4xl font-bold mb-2">{stats.albumCount}</p>
                            <p className="text-white/70">앨범 수</p>
                        </div>
                        <div>
-                            <p className="text-4xl font-bold mb-2">flover</p>
+                            <p className="text-4xl font-bold mb-2">{stats.fandomName}</p>
                            <p className="text-white/70">팬덤명</p>
                        </div>
                    </div>
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@ -15,7 +15,7 @@ export default {
        accent: "#FFD700",
      },
      fontFamily: {
-        sans: ['"Noto Sans KR"', "sans-serif"],
+        sans: ["Pretendard", "Inter", "sans-serif"],
      },
    },
  },
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@ -6,5 +6,12 @@ export default defineConfig({
  server: {
    host: true,
    port: 5173,
+    allowedHosts: ["fromis9.caadiq.co.kr"],
+    proxy: {
+      "/api": {
+        target: "http://fromis9-backend:3000",
+        changeOrigin: true,
+      },
+    },
  },
 });
--- a/update_descriptions.sql
+++ 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;
Author	SHA1	Message	Date
caadiq	831715da3e	feat: 앨범 상세 페이지 추가 및 UI 개선 - 앨범 상세 페이지 (AlbumDetail.jsx) 신규 생성 - 앨범 목록에서 클릭 시 상세 페이지로 이동 - 소개글/트랙 리스트 2열 그리드 레이아웃 - 트랙 호버 효과 및 총 재생시간 표시 - 페이지 전환 fade 애니메이션 적용 - '디스코그래피' -> '앨범' 텍스트 변경 - albums 테이블 description 컬럼 추가 - 트랙 duration 데이터 입력	2026-01-01 10:20:54 +09:00
caadiq	1ca5640a67	feat: 앨범 데이터 API 연동 - 백엔드: /api/albums 라우트 추가 (routes/albums.js) - 앨범별 트랙 정보 포함 조회 - 프론트엔드: Discography 페이지 API 연동 - 앨범 타입별 통계 동적 계산 - 타이틀곡 자동 표시	2026-01-01 09:32:38 +09:00
caadiq	6ee8e3598a	feat: 멤버 데이터 API 연동 - 백엔드: MariaDB 연결 설정 (lib/db.js) - 백엔드: /api/members 라우트 추가 (routes/members.js) - 프론트엔드: Members 페이지 API 연동 - 프론트엔드: Home 멤버 섹션 API 연동 - 로딩 상태 및 에러 처리 추가	2026-01-01 00:26:04 +09:00
caadiq	91270c2c8b	feat: Pretendard 폰트 적용 및 DB 스키마 완성 - Pretendard 폰트로 변경 (CDN) - albums, tracks 테이블 생성 및 데이터 삽입 - 트랙별 작사/작곡/편곡/설명 정보 추가 - 모든 테이블 및 컬럼에 COMMENT 추가	2026-01-01 00:20:33 +09:00