commit d682e9a3822e4a34638bd22489e6c393edc1d18c Author: chyoo Date: Tue Jul 7 17:23:40 2026 +0900 chore: init lms adm fe diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..9fa4f28 --- /dev/null +++ b/.env.example @@ -0,0 +1,3 @@ +VITE_API_BASE_URL=http://localhost:4400/api +VITE_LAUNCHER_API_BASE_URL=http://localhost:4200/api +VITE_ADS_IDE_AUTH_URL=http://localhost:4100 \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..225489c --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +node_modules +dist +.env +.env.local +*.tsbuildinfo diff --git a/README.md b/README.md new file mode 100644 index 0000000..3a22c2f --- /dev/null +++ b/README.md @@ -0,0 +1,19 @@ +# LMS Instructor Admin + +React 기반 강사용 LMS 관리 프론트엔드입니다. 학생용 Electron 앱(`/home/chyoo/tmp/lms`)과 같은 백엔드를 바라보는 웹 관리자 콘솔로 분리하는 구조를 기준으로 만들었습니다. + +## Scripts + +```bash +npm install +npm run dev +npm run build +``` + +## Environment + +`.env.example`을 참고해 API 서버 주소를 설정합니다. + +```bash +VITE_API_BASE_URL=http://localhost:4400/api +``` diff --git a/index.html b/index.html new file mode 100644 index 0000000..2c77dfe --- /dev/null +++ b/index.html @@ -0,0 +1,12 @@ + + + + + + 오토노미스튜디오 LMS | 강사로그인 + + +

+ + + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..3834567 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,2502 @@ +{ + "name": "lms-adm-fe", + "version": "0.1.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "lms-adm-fe", + "version": "0.1.0", + "dependencies": { + "@tailwindcss/vite": "^4.3.0", + "@vitejs/plugin-react": "^4.4.1", + "lucide-react": "^1.14.0", + "react": "^19.1.0", + "react-dom": "^19.1.0", + "react-router-dom": "^7.18.0", + "socket.io-client": "^4.8.3", + "tailwindcss": "^4.3.0", + "vite": "^6.3.5" + }, + "devDependencies": { + "@types/react": "^19.1.2", + "@types/react-dom": "^19.1.2", + "typescript": "^5.8.3" + } + }, + "node_modules/@babel/code-frame": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz", + "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==", + "license": "MIT", + "dependencies": { + "@babel/helper-validator-identifier": "^7.29.7", + "js-tokens": "^4.0.0", + "picocolors": "^1.1.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/compat-data": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz", + "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/core": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz", + "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==", + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.7", + "@babel/generator": "^7.29.7", + "@babel/helper-compilation-targets": "^7.29.7", + "@babel/helper-module-transforms": "^7.29.7", + "@babel/helpers": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/template": "^7.29.7", + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7", + "@jridgewell/remapping": "^2.3.5", + "convert-source-map": "^2.0.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.2", + "json5": "^2.2.3", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/babel" + } + }, + "node_modules/@babel/generator": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz", + "integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==", + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.29.7", + "@babel/types": "^7.29.7", + "@jridgewell/gen-mapping": "^0.3.12", + "@jridgewell/trace-mapping": "^0.3.28", + "jsesc": "^3.0.2" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-compilation-targets": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz", + "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==", + "license": "MIT", + "dependencies": { + "@babel/compat-data": "^7.29.7", + "@babel/helper-validator-option": "^7.29.7", + "browserslist": "^4.24.0", + "lru-cache": "^5.1.1", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-globals": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz", + "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-imports": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz", + "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==", + "license": "MIT", + "dependencies": { + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-transforms": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz", + "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==", + "license": "MIT", + "dependencies": { + "@babel/helper-module-imports": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7", + "@babel/traverse": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/helper-plugin-utils": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.29.7.tgz", + "integrity": "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-string-parser": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz", + "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz", + "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-option": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz", + "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helpers": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz", + "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==", + "license": "MIT", + "dependencies": { + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/parser": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz", + "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==", + "license": "MIT", + "dependencies": { + "@babel/types": "^7.29.7" + }, + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-self": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.29.7.tgz", + "integrity": "sha512-TL0hMc9xzy86VD31nUiwzd5otRAcyEPcsegCxolO0PvcXuH1v0kECe/UIznYFihpkvU5wg/jk4v0TTEFfm53fw==", + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-source": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.29.7.tgz", + "integrity": "sha512-06IyK09H3wi4cGbhDBwp5gUGo0IKtnYa8tyTiephirPCK6fbobVGiXMMI5zLQ4aKEYP3wZ3ArU44o+8KMrSG/Q==", + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/template": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz", + "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==", + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.7.tgz", + "integrity": "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==", + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.7", + "@babel/generator": "^7.29.7", + "@babel/helper-globals": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.7", + "debug": "^4.3.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/types": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz", + "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==", + "license": "MIT", + "dependencies": { + "@babel/helper-string-parser": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@esbuild/aix-ppc64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz", + "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==", + "cpu": [ + "ppc64" + ], + "license": "MIT", + "optional": true, + "os": [ + "aix" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-arm": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz", + "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==", + "cpu": [ + "arm" + ], + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz", + "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz", + "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz", + "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz", + "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz", + "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz", + "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz", + "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==", + "cpu": [ + "arm" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz", + "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz", + "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==", + "cpu": [ + "ia32" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz", + "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==", + "cpu": [ + "loong64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz", + "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==", + "cpu": [ + "mips64el" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz", + "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==", + "cpu": [ + "ppc64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz", + "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==", + "cpu": [ + "riscv64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz", + "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==", + "cpu": [ + "s390x" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz", + "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/netbsd-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz", + "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz", + "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openbsd-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz", + "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz", + "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openharmony-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz", + "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "openharmony" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz", + "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz", + "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz", + "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==", + "cpu": [ + "ia32" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz", + "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.3.13", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", + "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==", + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.0", + "@jridgewell/trace-mapping": "^0.3.24" + } + }, + "node_modules/@jridgewell/remapping": { + "version": "2.3.5", + "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz", + "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==", + "license": "MIT", + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.24" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", + "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "license": "MIT", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.5.5", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz", + "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==", + "license": "MIT" + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.31", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz", + "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==", + "license": "MIT", + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, + "node_modules/@rolldown/pluginutils": { + "version": "1.0.0-beta.27", + "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz", + "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==", + "license": "MIT" + }, + "node_modules/@rollup/rollup-android-arm-eabi": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.4.tgz", + "integrity": "sha512-F5QXMSiFebS9hKZj02XhWLLnRpJ3B3AROP0tWbFBSj+6kCbg5m9j5JoHKd4mmSVy5mS/IMQloYgYxCuJC0fxEQ==", + "cpu": [ + "arm" + ], + "license": "MIT", + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-android-arm64": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.60.4.tgz", + "integrity": "sha512-GxxTKApUpzRhof7poWvCJHRF51C67u1R7D6DiluBE8wKU1u5GWE8t+v81JvJYtbawoBFX1hLv5Ei4eVjkWokaw==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.60.4.tgz", + "integrity": "sha512-tua0TaJxMOB1R0V0RS1jFZ/RpURFDJIOR2A6jWwQeawuFyS4gBW+rntLRaQd0EQ4bd6Vp44Z2rXW+YYDBsj6IA==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-darwin-x64": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.60.4.tgz", + "integrity": "sha512-CSKq7MsP+5PFIcydhAiR1K0UhEI1A2jWXVKHPCBZ151yOutENwvnPocgVHkivu2kviURtCEB6zUQw0vs8RrhMg==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-freebsd-arm64": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.60.4.tgz", + "integrity": "sha512-+O8OkVdyvXMtJEciu2wS/pzm1IxntEEQx3z5TAVy4l32G0etZn+RsA48ARRrFm6Ri8fvqPQfgrvNxSjKAbnd3g==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ] + }, + "node_modules/@rollup/rollup-freebsd-x64": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.60.4.tgz", + "integrity": "sha512-Iw3oMskH3AfNuhU0MSN7vNbdi4me/NiYo2azqPz/Le16zHSa+3RRmliCMWWQmh4lcndccU40xcJuTYJZxNo/lw==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ] + }, + "node_modules/@rollup/rollup-linux-arm-gnueabihf": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.60.4.tgz", + "integrity": "sha512-EIPRXTVQpHyF8WOo219AD2yEltPehLTcTMz2fn6JsatLYSzQf00hj3rulF+yauOlF9/FtM2WpkT/hJh/KJFGhA==", + "cpu": [ + "arm" + ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm-musleabihf": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.60.4.tgz", + "integrity": "sha512-J3Yh9PzzF1Ovah2At+lHiGQdsYgArxBbXv/zHfSyaiFQEqvNv7DcW98pCrmdjCZBrqBiKrKKe2V+aaSGWuBe/w==", + "cpu": [ + "arm" + ], + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-gnu": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.60.4.tgz", + "integrity": "sha512-BFDEZMYfUvLn37ONE1yMBojPxnMlTFsdyNoqncT0qFq1mAfllL+ATMMJd8TeuVMiX84s1KbcxcZbXInmcO2mRg==", + "cpu": [ + "arm64" + ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-musl": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.60.4.tgz", + "integrity": "sha512-pc9EYOSlOgdQ2uPl1o9PF6/kLSgaUosia7gOuS8mB69IxJvlclko1MECXysjs5ryez1/5zjYqx3+xYU0TU6R1A==", + "cpu": [ + "arm64" + ], + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-loong64-gnu": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.60.4.tgz", + "integrity": "sha512-NxnomyxYerDh5n4iLrNa+sH+Z+U4BMEE46V2PgQ/hoB909i8gV1M5wPojWg9fk1jWpO3IQnOs20K4wyZuFLEFQ==", + "cpu": [ + "loong64" + ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-loong64-musl": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.60.4.tgz", + "integrity": "sha512-nbJnQ8a3z1mtmrwImCYhc6BGpThAyYVRQxw9uKSKG4wR6aAYno9sVjJ0zaZcW9BPJX1GbrDPf+SvdWjgTuDmnw==", + "cpu": [ + "loong64" + ], + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-ppc64-gnu": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.60.4.tgz", + "integrity": "sha512-2EU6acNrQLd8tYvo/LXW535wupT3m6fo7HKo6lr7ktQoItxTyOL1ZCR/GfGCuXl2vR+zmfI6eRXkSemafv+iVg==", + "cpu": [ + "ppc64" + ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-ppc64-musl": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.60.4.tgz", + "integrity": "sha512-WeBtoMuaMxiiIrO2IYP3xs6GMWkJP2C0EoT8beTLkUPmzV1i/UcOSVw1d5r9KBODtHKilG5yFxsGRnBbK3wJ4A==", + "cpu": [ + "ppc64" + ], + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-riscv64-gnu": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.60.4.tgz", + "integrity": "sha512-FJHFfqpKUI3A10WrWKiFbBZ7yVbGT4q4B5o1qKFFojqpaYoh9LrQgqWCmmcxQzVSXYtyB5bzkXrYzlHTs21MYA==", + "cpu": [ + "riscv64" + ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-riscv64-musl": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.60.4.tgz", + "integrity": "sha512-mcEl6CUT5IAUmQf1m9FYSmVqCJlpQ8r8eyftFUHG8i9OhY7BkBXSUdnLH5DOf0wCOjcP9v/QO93zpmF1SptCCw==", + "cpu": [ + "riscv64" + ], + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-s390x-gnu": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.60.4.tgz", + "integrity": "sha512-ynt3JxVd2w2buzoKDWIyiV1pJW93xlQic1THVLXilz429oijRpSHivZAgp65KBu+cMcgf1eVVjdnTLvPxgCuoQ==", + "cpu": [ + "s390x" + ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.60.4.tgz", + "integrity": "sha512-Boiz5+MsaROEWDf+GGEwF8VMHGhlUoQMtIPjOgA5fv4osupqTVnJteQNKJwUcnUog2G55jYXH7KZFFiJe0TEzQ==", + "cpu": [ + "x64" + ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.60.4.tgz", + "integrity": "sha512-+qfSY27qIrFfI/Hom04KYFw3GKZSGU4lXus51wsb5EuySfFlWRwjkKWoE9emgRw/ukoT4Udsj4W/+xxG8VbPKg==", + "cpu": [ + "x64" + ], + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-openbsd-x64": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.60.4.tgz", + "integrity": "sha512-VpTfOPHgVXEBeeR8hZ2O0F3aSso+JDWqTWmTmzcQKted54IAdUVbxE+j/MVxUsKa8L20HJhv3vUezVPoquqWjA==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ] + }, + "node_modules/@rollup/rollup-openharmony-arm64": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.60.4.tgz", + "integrity": "sha512-IPOsh5aRYuLv/nkU51X10Bf75Bsf6+gZdx1X+QP5QM6lIJFHHqbHLG0uJn/hWthzo13UAc2umiUorqZy3axoZg==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "openharmony" + ] + }, + "node_modules/@rollup/rollup-win32-arm64-msvc": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.60.4.tgz", + "integrity": "sha512-4QzE9E81OohJ/HKzHhsqU+zcYYojVOXlFMs1DdyMT6qXl/niOH7AVElmmEdUNHHS/oRkc++d5k6Vy85zFs0DEw==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-ia32-msvc": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.60.4.tgz", + "integrity": "sha512-zTPgT1YuHHcd+Tmx7h8aml0FWFVelV5N54oHow9SLj+GfoDy/huQ+UV396N/C7KpMDMiPspRktzM1/0r1usYEA==", + "cpu": [ + "ia32" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-x64-gnu": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.60.4.tgz", + "integrity": "sha512-DRS4G7mi9lJxqEDezIkKCaUIKCrLUUDCUaCsTPCi/rtqaC6D/jjwslMQyiDU50Ka0JKpeXeRBFBAXwArY52vBw==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-x64-msvc": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.60.4.tgz", + "integrity": "sha512-QVTUovf40zgTqlFVrKA1uXMVvU2QWEFWfAH8Wdc48IxLvrJMQVMBRjuQyUpzZCDkakImib9eVazbWlC6ksWtJw==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@socket.io/component-emitter": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz", + "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==", + "license": "MIT" + }, + "node_modules/@tailwindcss/node": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.0.tgz", + "integrity": "sha512-aFb4gUhFOgdh9AXo4IzBEOzBkkAxm9VigwDJnMIYv3lcfXCJVesNfbEaBl4BNgVRyid92AmdviqwBUBRKSeY3g==", + "license": "MIT", + "dependencies": { + "@jridgewell/remapping": "^2.3.5", + "enhanced-resolve": "^5.21.0", + "jiti": "^2.6.1", + "lightningcss": "1.32.0", + "magic-string": "^0.30.21", + "source-map-js": "^1.2.1", + "tailwindcss": "4.3.0" + } + }, + "node_modules/@tailwindcss/oxide": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.0.tgz", + "integrity": "sha512-F7HZGBeN9I0/AuuJS5PwcD8xayx5ri5GhjYUDBEVYUkexyA/giwbDNjRVrxSezE3T250OU2K/wp/ltWx3UOefg==", + "license": "MIT", + "engines": { + "node": ">= 20" + }, + "optionalDependencies": { + "@tailwindcss/oxide-android-arm64": "4.3.0", + "@tailwindcss/oxide-darwin-arm64": "4.3.0", + "@tailwindcss/oxide-darwin-x64": "4.3.0", + "@tailwindcss/oxide-freebsd-x64": "4.3.0", + "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.0", + "@tailwindcss/oxide-linux-arm64-gnu": "4.3.0", + "@tailwindcss/oxide-linux-arm64-musl": "4.3.0", + "@tailwindcss/oxide-linux-x64-gnu": "4.3.0", + "@tailwindcss/oxide-linux-x64-musl": "4.3.0", + "@tailwindcss/oxide-wasm32-wasi": "4.3.0", + "@tailwindcss/oxide-win32-arm64-msvc": "4.3.0", + "@tailwindcss/oxide-win32-x64-msvc": "4.3.0" + } + }, + "node_modules/@tailwindcss/oxide-android-arm64": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.0.tgz", + "integrity": "sha512-TJPiq67tKlLuObP6RkwvVGDoxCMBVtDgKkLfa/uyj7/FyxvQwHS+UOnVrXXgbEsfUaMgiVvC4KbJnRr26ho4Ng==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-darwin-arm64": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.0.tgz", + "integrity": "sha512-oMN/WZRb+SO37BmUElEgeEWuU8E/HXRkiODxJxLe1UTHVXLrdVSgfaJV7pSlhRGMSOiXLuxTIjfsF3wYvz8cgQ==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-darwin-x64": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.0.tgz", + "integrity": "sha512-N6CUmu4a6bKVADfw77p+iw6Yd9Q3OBhe0veaDX+QazfuVYlQsHfDgxBrsjQ/IW+zywL8mTrNd0SdJT/zgtvMdA==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-freebsd-x64": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.0.tgz", + "integrity": "sha512-zDL5hBkQdH5C6MpqbK3gQAgP80tsMwSI26vjOzjJtNCMUo0lFgOItzHKBIupOZNQxt3ouPH7RPhvNhiTfCe5CQ==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.0.tgz", + "integrity": "sha512-R06HdNi7A7OEoMsf6d4tjZ71RCWnZQPHj2mnotSFURjNLdBC+cIgXQ7l81CqeoiQftjf6OOblxXMInMgN2VzMA==", + "cpu": [ + "arm" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-arm64-gnu": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.0.tgz", + "integrity": "sha512-qTJHELX8jetjhRQHCLilkVLmybpzNQAtaI/gaoVoidn/ufbNDbAo8KlK2J+yPoc8wQxvDxCmh/5lr8nC1+lTbg==", + "cpu": [ + "arm64" + ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-arm64-musl": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.0.tgz", + "integrity": "sha512-Z6sukiQsngnWO+l39X4pPbiWT81IC+PLKF+PHxIlyZbGNb9MODfYlXEVlFvej5BOZInWX01kVyzeLvHsXhfczQ==", + "cpu": [ + "arm64" + ], + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-x64-gnu": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.0.tgz", + "integrity": "sha512-DRNdQRpSGzRGfARVuVkxvM8Q12nh19l4BF/G7zGA1oe+9wcC6saFBHTISrpIcKzhiXtSrlSrluCfvMuledoCTQ==", + "cpu": [ + "x64" + ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-x64-musl": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.0.tgz", + "integrity": "sha512-Z0IADbDo8bh6I7h2IQMx601AdXBLfFpEdUotft86evd/8ZPflZe9COPO8Q1vw+pfLWIUo9zN/JGZvwuAJqduqg==", + "cpu": [ + "x64" + ], + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.0.tgz", + "integrity": "sha512-HNZGOUxEmElksYR7S6sC5jTeNGpobAsy9u7Gu0AskJ8/20FR9GqebUyB+HBcU/ax6BHuiuJi+Oda4B+YX6H1yA==", + "bundleDependencies": [ + "@napi-rs/wasm-runtime", + "@emnapi/core", + "@emnapi/runtime", + "@tybys/wasm-util", + "@emnapi/wasi-threads", + "tslib" + ], + "cpu": [ + "wasm32" + ], + "license": "MIT", + "optional": true, + "dependencies": { + "@emnapi/core": "^1.10.0", + "@emnapi/runtime": "^1.10.0", + "@emnapi/wasi-threads": "^1.2.1", + "@napi-rs/wasm-runtime": "^1.1.4", + "@tybys/wasm-util": "^0.10.1", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/@tailwindcss/oxide-win32-arm64-msvc": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.0.tgz", + "integrity": "sha512-Pe+RPVTi1T+qymuuRpcdvwSVZjnll/f7n8gBxMMh3xLTctMDKqpdfGimbMyioqtLhUYZxdJ9wGNhV7MKHvgZsQ==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-win32-x64-msvc": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.0.tgz", + "integrity": "sha512-Mvrf2kXW/yeW/OTezZlCGOirXRcUuLIBx/5Y12BaPM7wJoryG6dfS/NJL8aBPqtTEx/Vm4T4vKzFUcKDT+TKUA==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/vite": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.3.0.tgz", + "integrity": "sha512-t6J3OrB5Fc0ExuhohouH0fWUGMYL6PTLhW+E7zIk/pdbnJARZDCwjBznFnkh5ynRnIRSI4YjtTH0t6USjJISrw==", + "license": "MIT", + "dependencies": { + "@tailwindcss/node": "4.3.0", + "@tailwindcss/oxide": "4.3.0", + "tailwindcss": "4.3.0" + }, + "peerDependencies": { + "vite": "^5.2.0 || ^6 || ^7 || ^8" + } + }, + "node_modules/@types/babel__core": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", + "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==", + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.20.7", + "@babel/types": "^7.20.7", + "@types/babel__generator": "*", + "@types/babel__template": "*", + "@types/babel__traverse": "*" + } + }, + "node_modules/@types/babel__generator": { + "version": "7.27.0", + "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz", + "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==", + "license": "MIT", + "dependencies": { + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__template": { + "version": "7.4.4", + "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz", + "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==", + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.1.0", + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__traverse": { + "version": "7.28.0", + "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz", + "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==", + "license": "MIT", + "dependencies": { + "@babel/types": "^7.28.2" + } + }, + "node_modules/@types/estree": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz", + "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==", + "license": "MIT" + }, + "node_modules/@types/react": { + "version": "19.2.15", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.15.tgz", + "integrity": "sha512-eRwcGNHve+E8qtEQSSRl6urh+rFop4v8gm6O8rGv25CodbvFdLjA1vVQ1KkiFE0w0UPOnb8tDiFKL5lp0rtY5Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "csstype": "^3.2.2" + } + }, + "node_modules/@types/react-dom": { + "version": "19.2.3", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz", + "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "@types/react": "^19.2.0" + } + }, + "node_modules/@vitejs/plugin-react": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz", + "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==", + "license": "MIT", + "dependencies": { + "@babel/core": "^7.28.0", + "@babel/plugin-transform-react-jsx-self": "^7.27.1", + "@babel/plugin-transform-react-jsx-source": "^7.27.1", + "@rolldown/pluginutils": "1.0.0-beta.27", + "@types/babel__core": "^7.20.5", + "react-refresh": "^0.17.0" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "peerDependencies": { + "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" + } + }, + "node_modules/baseline-browser-mapping": { + "version": "2.10.33", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.33.tgz", + "integrity": "sha512-bA6+tcSLpz2tIEdDXZPpPTIuxBcC4+w6SieaYyfigIa4h8GlFxbA17v22Vx3JUtuZQj9SgOsnbK+aTBzyDyEuw==", + "license": "Apache-2.0", + "bin": { + "baseline-browser-mapping": "dist/cli.cjs" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/browserslist": { + "version": "4.28.2", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz", + "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "baseline-browser-mapping": "^2.10.12", + "caniuse-lite": "^1.0.30001782", + "electron-to-chromium": "^1.5.328", + "node-releases": "^2.0.36", + "update-browserslist-db": "^1.2.3" + }, + "bin": { + "browserslist": "cli.js" + }, + "engines": { + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" + } + }, + "node_modules/caniuse-lite": { + "version": "1.0.30001793", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001793.tgz", + "integrity": "sha512-iwSsYWaCOoh26cV8NwNRViHlrfUvYsHDfRVcbtmw0Kg6PJIZZXwMkj1442FYLBGkeUf1juAsU3DTfxW579mrPA==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "CC-BY-4.0" + }, + "node_modules/convert-source-map": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", + "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", + "license": "MIT" + }, + "node_modules/cookie": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz", + "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==", + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/csstype": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", + "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/debug": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", + "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==", + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/detect-libc": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", + "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", + "license": "Apache-2.0", + "engines": { + "node": ">=8" + } + }, + "node_modules/electron-to-chromium": { + "version": "1.5.364", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.364.tgz", + "integrity": "sha512-G/dYE3+AYhyHwzTwg8UbnXf7zqMERYh7l2jJ3QujhFsH8agSYwtnGAR2aZ7f0AakIKJXd5En/Hre4igIUrdlYw==", + "license": "ISC" + }, + "node_modules/engine.io-client": { + "version": "6.6.5", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.5.tgz", + "integrity": "sha512-QCwxUDULPlXv8F6tqMMKx5dNkTe6OaBYRMPYeXKBlyOoKvAmE0ac6pW7fFhSscJ/5SI7666/U/B+MElbsrJlIg==", + "license": "MIT", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.4.1", + "engine.io-parser": "~5.2.1", + "ws": "~8.20.1", + "xmlhttprequest-ssl": "~2.1.1" + } + }, + "node_modules/engine.io-parser": { + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz", + "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==", + "license": "MIT", + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/enhanced-resolve": { + "version": "5.22.1", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.22.1.tgz", + "integrity": "sha512-6QEuw3zoX1SJQc7b87aBXke/no+mG2bTBgw29gWMQonLmpEkWoCAVkl+M49e48AZlWzxiDzDZzYdp6kobcyLww==", + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.2.4", + "tapable": "^2.3.3" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/esbuild": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz", + "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==", + "hasInstallScript": true, + "license": "MIT", + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.25.12", + "@esbuild/android-arm": "0.25.12", + "@esbuild/android-arm64": "0.25.12", + "@esbuild/android-x64": "0.25.12", + "@esbuild/darwin-arm64": "0.25.12", + "@esbuild/darwin-x64": "0.25.12", + "@esbuild/freebsd-arm64": "0.25.12", + "@esbuild/freebsd-x64": "0.25.12", + "@esbuild/linux-arm": "0.25.12", + "@esbuild/linux-arm64": "0.25.12", + "@esbuild/linux-ia32": "0.25.12", + "@esbuild/linux-loong64": "0.25.12", + "@esbuild/linux-mips64el": "0.25.12", + "@esbuild/linux-ppc64": "0.25.12", + "@esbuild/linux-riscv64": "0.25.12", + "@esbuild/linux-s390x": "0.25.12", + "@esbuild/linux-x64": "0.25.12", + "@esbuild/netbsd-arm64": "0.25.12", + "@esbuild/netbsd-x64": "0.25.12", + "@esbuild/openbsd-arm64": "0.25.12", + "@esbuild/openbsd-x64": "0.25.12", + "@esbuild/openharmony-arm64": "0.25.12", + "@esbuild/sunos-x64": "0.25.12", + "@esbuild/win32-arm64": "0.25.12", + "@esbuild/win32-ia32": "0.25.12", + "@esbuild/win32-x64": "0.25.12" + } + }, + "node_modules/escalade": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", + "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/fdir": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", + "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==", + "license": "MIT", + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "picomatch": "^3 || ^4" + }, + "peerDependenciesMeta": { + "picomatch": { + "optional": true + } + } + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/gensync": { + "version": "1.0.0-beta.2", + "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", + "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/graceful-fs": { + "version": "4.2.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", + "license": "ISC" + }, + "node_modules/jiti": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz", + "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==", + "license": "MIT", + "bin": { + "jiti": "lib/jiti-cli.mjs" + } + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "license": "MIT" + }, + "node_modules/jsesc": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz", + "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==", + "license": "MIT", + "bin": { + "jsesc": "bin/jsesc" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/json5": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", + "license": "MIT", + "bin": { + "json5": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/lightningcss": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz", + "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==", + "license": "MPL-2.0", + "dependencies": { + "detect-libc": "^2.0.3" + }, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "lightningcss-android-arm64": "1.32.0", + "lightningcss-darwin-arm64": "1.32.0", + "lightningcss-darwin-x64": "1.32.0", + "lightningcss-freebsd-x64": "1.32.0", + "lightningcss-linux-arm-gnueabihf": "1.32.0", + "lightningcss-linux-arm64-gnu": "1.32.0", + "lightningcss-linux-arm64-musl": "1.32.0", + "lightningcss-linux-x64-gnu": "1.32.0", + "lightningcss-linux-x64-musl": "1.32.0", + "lightningcss-win32-arm64-msvc": "1.32.0", + "lightningcss-win32-x64-msvc": "1.32.0" + } + }, + "node_modules/lightningcss-android-arm64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz", + "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==", + "cpu": [ + "arm64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-arm64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz", + "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==", + "cpu": [ + "arm64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-x64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz", + "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==", + "cpu": [ + "x64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-freebsd-x64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz", + "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==", + "cpu": [ + "x64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm-gnueabihf": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz", + "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==", + "cpu": [ + "arm" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-gnu": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz", + "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==", + "cpu": [ + "arm64" + ], + "libc": [ + "glibc" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-musl": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz", + "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==", + "cpu": [ + "arm64" + ], + "libc": [ + "musl" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-gnu": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz", + "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==", + "cpu": [ + "x64" + ], + "libc": [ + "glibc" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-musl": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz", + "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==", + "cpu": [ + "x64" + ], + "libc": [ + "musl" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-arm64-msvc": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz", + "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==", + "cpu": [ + "arm64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-x64-msvc": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz", + "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==", + "cpu": [ + "x64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lru-cache": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", + "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", + "license": "ISC", + "dependencies": { + "yallist": "^3.0.2" + } + }, + "node_modules/lucide-react": { + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.17.0.tgz", + "integrity": "sha512-9FA9evdox/JQL5PT57fdA1x/yg8T7knJ98+zjTL3UfKza6pflQUUh3XtaQIHKvnsJw1lmsEyHVlt5jchYxOQ5w==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/magic-string": { + "version": "0.30.21", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", + "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==", + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.5" + } + }, + "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/nanoid": { + "version": "3.3.12", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz", + "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/node-releases": { + "version": "2.0.46", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.46.tgz", + "integrity": "sha512-GYVXHE2KnrzAfsAjl4uP++evGFCrAU1jta4ubEjIG7YWt/64Gqv66a30yKwWczVjA6j3bM4nBwH7Pk1JmDHaxQ==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/picocolors": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", + "license": "ISC" + }, + "node_modules/picomatch": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", + "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/postcss": { + "version": "8.5.15", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz", + "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.12", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/react": { + "version": "19.2.6", + "resolved": "https://registry.npmjs.org/react/-/react-19.2.6.tgz", + "integrity": "sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "19.2.6", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.6.tgz", + "integrity": "sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g==", + "license": "MIT", + "dependencies": { + "scheduler": "^0.27.0" + }, + "peerDependencies": { + "react": "^19.2.6" + } + }, + "node_modules/react-refresh": { + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz", + "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-router": { + "version": "7.18.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.0.tgz", + "integrity": "sha512-pTTGt8J+ji1NOmYnjzT+bAJy/1zD+Jp4ziO6cL7T3ZLvXKtusO7BpFqlRXitqpcPVqllsIXFHRMt+2/k3Xn6HQ==", + "license": "MIT", + "dependencies": { + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.18.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.0.tgz", + "integrity": "sha512-Fi0yY6kgtKae/Th2xibdWK0KSdYZ4B53Gyf6wRtomOKWgpNm7H7+DyfDhncdz9FKbpS+1jmDhg3F4WoGJ+yFOA==", + "license": "MIT", + "dependencies": { + "react-router": "7.18.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, + "node_modules/rollup": { + "version": "4.60.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.4.tgz", + "integrity": "sha512-WHeFSbZYsPu3+bLoNRUuAO+wavNlocOPf3wSHTP7hcFKVnJeWsYlCDbr3mTS14FCizf9ccIxXA8sGL8zKeQN3g==", + "license": "MIT", + "dependencies": { + "@types/estree": "1.0.8" + }, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=18.0.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "@rollup/rollup-android-arm-eabi": "4.60.4", + "@rollup/rollup-android-arm64": "4.60.4", + "@rollup/rollup-darwin-arm64": "4.60.4", + "@rollup/rollup-darwin-x64": "4.60.4", + "@rollup/rollup-freebsd-arm64": "4.60.4", + "@rollup/rollup-freebsd-x64": "4.60.4", + "@rollup/rollup-linux-arm-gnueabihf": "4.60.4", + "@rollup/rollup-linux-arm-musleabihf": "4.60.4", + "@rollup/rollup-linux-arm64-gnu": "4.60.4", + "@rollup/rollup-linux-arm64-musl": "4.60.4", + "@rollup/rollup-linux-loong64-gnu": "4.60.4", + "@rollup/rollup-linux-loong64-musl": "4.60.4", + "@rollup/rollup-linux-ppc64-gnu": "4.60.4", + "@rollup/rollup-linux-ppc64-musl": "4.60.4", + "@rollup/rollup-linux-riscv64-gnu": "4.60.4", + "@rollup/rollup-linux-riscv64-musl": "4.60.4", + "@rollup/rollup-linux-s390x-gnu": "4.60.4", + "@rollup/rollup-linux-x64-gnu": "4.60.4", + "@rollup/rollup-linux-x64-musl": "4.60.4", + "@rollup/rollup-openbsd-x64": "4.60.4", + "@rollup/rollup-openharmony-arm64": "4.60.4", + "@rollup/rollup-win32-arm64-msvc": "4.60.4", + "@rollup/rollup-win32-ia32-msvc": "4.60.4", + "@rollup/rollup-win32-x64-gnu": "4.60.4", + "@rollup/rollup-win32-x64-msvc": "4.60.4", + "fsevents": "~2.3.2" + } + }, + "node_modules/scheduler": { + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", + "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", + "license": "MIT" + }, + "node_modules/semver": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/set-cookie-parser": { + "version": "2.7.2", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz", + "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==", + "license": "MIT" + }, + "node_modules/socket.io-client": { + "version": "4.8.3", + "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.3.tgz", + "integrity": "sha512-uP0bpjWrjQmUt5DTHq9RuoCBdFJF10cdX9X+a368j/Ft0wmaVgxlrjvK3kjvgCODOMMOz9lcaRzxmso0bTWZ/g==", + "license": "MIT", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.4.1", + "engine.io-client": "~6.6.1", + "socket.io-parser": "~4.2.4" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/socket.io-parser": { + "version": "4.2.6", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.6.tgz", + "integrity": "sha512-asJqbVBDsBCJx0pTqw3WfesSY0iRX+2xzWEWzrpcH7L6fLzrhyF8WPI8UaeM4YCuDfpwA/cgsdugMsmtz8EJeg==", + "license": "MIT", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.4.1" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/source-map-js": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/tailwindcss": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.0.tgz", + "integrity": "sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==", + "license": "MIT" + }, + "node_modules/tapable": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz", + "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==", + "license": "MIT", + "engines": { + "node": ">=6" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, + "node_modules/tinyglobby": { + "version": "0.2.17", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz", + "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==", + "license": "MIT", + "dependencies": { + "fdir": "^6.5.0", + "picomatch": "^4.0.4" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/SuperchupuDev" + } + }, + "node_modules/typescript": { + "version": "5.9.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", + "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, + "node_modules/update-browserslist-db": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz", + "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "escalade": "^3.2.0", + "picocolors": "^1.1.1" + }, + "bin": { + "update-browserslist-db": "cli.js" + }, + "peerDependencies": { + "browserslist": ">= 4.21.0" + } + }, + "node_modules/vite": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.2.tgz", + "integrity": "sha512-2N/55r4JDJ4gdrCvGgINMy+HH3iRpNIz8K6SFwVsA+JbQScLiC+clmAxBgwiSPgcG9U15QmvqCGWzMbqda5zGQ==", + "license": "MIT", + "dependencies": { + "esbuild": "^0.25.0", + "fdir": "^6.4.4", + "picomatch": "^4.0.2", + "postcss": "^8.5.3", + "rollup": "^4.34.9", + "tinyglobby": "^0.2.13" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^18.0.0 || ^20.0.0 || >=22.0.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + }, + "peerDependencies": { + "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", + "jiti": ">=1.21.0", + "less": "*", + "lightningcss": "^1.21.0", + "sass": "*", + "sass-embedded": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.16.0", + "tsx": "^4.8.1", + "yaml": "^2.4.2" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "jiti": { + "optional": true + }, + "less": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + }, + "tsx": { + "optional": true + }, + "yaml": { + "optional": true + } + } + }, + "node_modules/ws": { + "version": "8.20.1", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.20.1.tgz", + "integrity": "sha512-It4dO0K5v//JtTXuPkfEOaI3uUN87iYPnqo/ZzqCoG3g8uhA66QUMs/SrM0YK7/NAu+r4LMh/9dq2A7k+rHs+w==", + "license": "MIT", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": ">=5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/xmlhttprequest-ssl": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz", + "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==", + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/yallist": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", + "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", + "license": "ISC" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..b231ed8 --- /dev/null +++ b/package.json @@ -0,0 +1,28 @@ +{ + "name": "lms-adm-fe", + "version": "0.1.0", + "private": true, + "description": "Instructor web admin for Autonomy Studio LMS", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc -b && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@tailwindcss/vite": "^4.3.0", + "@vitejs/plugin-react": "^4.4.1", + "lucide-react": "^1.14.0", + "react": "^19.1.0", + "react-dom": "^19.1.0", + "react-router-dom": "^7.18.0", + "socket.io-client": "^4.8.3", + "tailwindcss": "^4.3.0", + "vite": "^6.3.5" + }, + "devDependencies": { + "@types/react": "^19.1.2", + "@types/react-dom": "^19.1.2", + "typescript": "^5.8.3" + } +} diff --git a/public/assets/fonts/NanumSquare.woff2 b/public/assets/fonts/NanumSquare.woff2 new file mode 100644 index 0000000..4ba197c Binary files /dev/null and b/public/assets/fonts/NanumSquare.woff2 differ diff --git a/public/assets/fonts/NanumSquareB.woff2 b/public/assets/fonts/NanumSquareB.woff2 new file mode 100644 index 0000000..e28946d Binary files /dev/null and b/public/assets/fonts/NanumSquareB.woff2 differ diff --git a/public/assets/fonts/NanumSquareEB.woff2 b/public/assets/fonts/NanumSquareEB.woff2 new file mode 100644 index 0000000..52f4f70 Binary files /dev/null and b/public/assets/fonts/NanumSquareEB.woff2 differ diff --git a/public/assets/fonts/NanumSquareL.woff2 b/public/assets/fonts/NanumSquareL.woff2 new file mode 100644 index 0000000..648f3c0 Binary files /dev/null and b/public/assets/fonts/NanumSquareL.woff2 differ diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..c070612 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,256 @@ +import { useEffect, useState } from 'react'; +import { Navigate, useLocation, useNavigate } from 'react-router-dom'; +import { ToastProvider } from './components/ToastProvider'; +import { InstructorLayout } from './layouts/InstructorLayout'; +import { clearStoredSession, loadStoredSession, logoutInstructor, refreshCurrentUser, refreshInstructorSession } from './lib/auth'; +import { listInstructorCourses, type InstructorCourse } from './lib/courses'; +import { AnalyticsPage } from './pages/analytics/AnalyticsPage'; +import { CurriculumPage } from './pages/curriculum/CurriculumPage'; +import { DashboardPage } from './pages/dashboard/DashboardPage'; +import { GroupsPage } from './pages/groups/GroupsPage'; +import { LoginPage } from './pages/login/LoginPage'; +import { PlatformsPage } from './pages/platforms/PlatformsPage'; +import { ProfilePage } from './pages/profile/ProfilePage'; +import { SettingsPage } from './pages/settings/SettingsPage'; +import { SubmissionsPage } from './pages/submissions/SubmissionsPage'; +import { StudentsPage } from './pages/students/StudentsPage'; +import { defaultRoute, getRouteFromPathname, getRoutePath, type AppRoute } from './routes'; +import type { AuthSession } from './types/auth'; + +function App() { + const [session, setSession] = useState(() => loadStoredSession()); + const [courses, setCourses] = useState([]); + const [selectedCourseId, setSelectedCourseId] = useState(() => window.localStorage.getItem('lms-admin-selected-course-id') ?? ''); + const [sessionExpired, setSessionExpired] = useState(false); + const [chatThreadOpenRequest, setChatThreadOpenRequest] = useState<{ threadId: string; requestId: number } | null>(null); + const location = useLocation(); + const navigate = useNavigate(); + const route = getRouteFromPathname(location.pathname); + const activeRoute = route ?? defaultRoute; + const [visibleRoute, setVisibleRoute] = useState(activeRoute); + const [transitionState, setTransitionState] = useState<'entering' | 'leaving'>('entering'); + + const setRoute = (nextRoute: AppRoute) => { + navigate(getRoutePath(nextRoute)); + }; + + const handleLogout = async () => { + await logoutInstructor(); + setSession(null); + setSessionExpired(false); + }; + + const expireSession = () => { + clearStoredSession(); + setSession(null); + setSessionExpired(true); + }; + + const moveToLogin = () => { + clearStoredSession(); + setSession(null); + setSessionExpired(false); + }; + + useEffect(() => { + if (activeRoute === visibleRoute) return; + + setTransitionState('leaving'); + const leaveTimer = window.setTimeout(() => { + setVisibleRoute(activeRoute); + setTransitionState('entering'); + }, 120); + + return () => window.clearTimeout(leaveTimer); + }, [activeRoute, visibleRoute]); + + useEffect(() => { + if (!session) return; + + let cancelled = false; + + refreshCurrentUser(session) + .then((nextSession) => { + if (!cancelled) setSession(nextSession); + }) + .catch(async () => { + if (!cancelled) { + try { + const nextSession = await refreshInstructorSession(session); + if (!cancelled) setSession(nextSession); + } catch { + if (!cancelled) expireSession(); + } + } + }); + + return () => { + cancelled = true; + }; + }, [session?.accessToken]); + + useEffect(() => { + if (!session?.accessToken) return; + let cancelled = false; + listInstructorCourses(session.accessToken) + .then((payload) => { + if (cancelled) return; + setCourses(payload.courses); + setSelectedCourseId((current) => { + const next = payload.courses.some((course) => course.id === current) + ? current + : payload.courses[0]?.id ?? ''; + if (next) window.localStorage.setItem('lms-admin-selected-course-id', next); + return next; + }); + }) + .catch(() => { + if (!cancelled) setCourses([]); + }); + return () => { + cancelled = true; + }; + }, [session?.accessToken]); + + const handleSelectCourse = (courseId: string) => { + setSelectedCourseId(courseId); + if (courseId) window.localStorage.setItem('lms-admin-selected-course-id', courseId); + }; + + useEffect(() => { + if (!session?.accessToken || !session.refreshToken) return; + + const obtainedAt = session.obtainedAt ?? Date.now(); + const expiresInMs = (session.accessTokenExpiresIn ?? 3600) * 1000; + const refreshAt = obtainedAt + expiresInMs - 60_000; + const delayMs = Math.max(5_000, refreshAt - Date.now()); + + const timer = window.setTimeout(() => { + refreshInstructorSession(session) + .then((nextSession) => { + setSession(nextSession); + setSessionExpired(false); + }) + .catch(() => expireSession()); + }, delayMs); + + return () => window.clearTimeout(timer); + }, [session?.accessToken, session?.refreshToken, session?.obtainedAt, session?.accessTokenExpiresIn]); + + useEffect(() => { + if (!session) return; + + const handleExpired = () => expireSession(); + window.addEventListener('lms-admin-session-expired', handleExpired); + + return () => { + window.removeEventListener('lms-admin-session-expired', handleExpired); + }; + }, [session]); + + useEffect(() => { + if (!session) return; + + const originalFetch = window.fetch.bind(window); + const wrappedFetch = async (input: RequestInfo | URL, init?: RequestInit) => { + const response = await originalFetch(input, init); + const url = typeof input === 'string' ? input : input instanceof URL ? input.toString() : input.url; + const isAuthMutation = url.includes('/auth/login') || url.includes('/auth/refresh') || url.includes('/auth/logout'); + if (response.status === 401 && !isAuthMutation) { + window.dispatchEvent(new Event('lms-admin-session-expired')); + } + return response; + }; + window.fetch = wrappedFetch as typeof window.fetch; + + return () => { + window.fetch = originalFetch as typeof window.fetch; + }; + }, [session?.accessToken]); + + if (sessionExpired) { + return ; + } + + if (!session) { + return ; + } + + if (!route) { + return ; + } + + return ( + + +

+ setChatThreadOpenRequest({ threadId, requestId: Date.now() })} + /> +

+ + + ); +} + +function SessionExpiredPage({ onLogin }: { onLogin: () => void }) { + return ( +

+ ! +

세션이 만료되었습니다

+ 보안을 위해 현재 로그인 세션을 사용할 수 없습니다. 새로고침 후 다시 로그인해 주세요. +

+ +

+ ); +} + +function RoutePage({ route, session, selectedCourseId, onNavigate, onOpenChatThread }: { route: AppRoute; session: AuthSession; selectedCourseId: string; onNavigate: (route: AppRoute) => void; onOpenChatThread: (threadId: string) => void }) { + switch (route) { + case 'dashboard': + return ; + case 'curriculum': + return ; + case 'groups': + return ; + case 'platforms': + return ; + case 'students': + return ; + case 'submissions': + return ; + case 'analytics': + return ; + case 'settings': + return ; + case 'profile': + return ; + } +} + +export default App; diff --git a/src/assets/fonts/NanumGothic.woff2 b/src/assets/fonts/NanumGothic.woff2 new file mode 100644 index 0000000..d82b08a Binary files /dev/null and b/src/assets/fonts/NanumGothic.woff2 differ diff --git a/src/assets/fonts/NanumGothicBold.woff2 b/src/assets/fonts/NanumGothicBold.woff2 new file mode 100644 index 0000000..7960d9a Binary files /dev/null and b/src/assets/fonts/NanumGothicBold.woff2 differ diff --git a/src/assets/fonts/NanumGothicExtraBold.woff2 b/src/assets/fonts/NanumGothicExtraBold.woff2 new file mode 100644 index 0000000..168d086 Binary files /dev/null and b/src/assets/fonts/NanumGothicExtraBold.woff2 differ diff --git a/src/assets/fonts/NanumGothicLight.woff2 b/src/assets/fonts/NanumGothicLight.woff2 new file mode 100644 index 0000000..bb6eb30 Binary files /dev/null and b/src/assets/fonts/NanumGothicLight.woff2 differ diff --git a/src/assets/icon.png b/src/assets/icon.png new file mode 100644 index 0000000..3696a87 Binary files /dev/null and b/src/assets/icon.png differ diff --git a/src/assets/main.css b/src/assets/main.css new file mode 100644 index 0000000..277c89f --- /dev/null +++ b/src/assets/main.css @@ -0,0 +1,779 @@ +@import "tailwindcss"; + +/* @font-face { + font-family: 'NanumGothic'; + src: url('./fonts/NanumGothicLight.woff2') format('woff2'); + font-weight: 300; + font-style: normal; +} +@font-face { + font-family: 'NanumGothic'; + src: url('./fonts/NanumGothic.woff2') format('woff2'); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: 'NanumGothic'; + src: url('./fonts/NanumGothicBold.woff2') format('woff2'); + font-weight: 700; + font-style: normal; +} +@font-face { + font-family: 'NanumGothic'; + src: url('./fonts/NanumGothicExtraBold.woff2') format('woff2'); + font-weight: 800; + font-style: normal; +} */ + +::-webkit-scrollbar { + width: 4px; + height: 4px; +} +::-webkit-scrollbar-track { + background: transparent; +} +::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.15); + border-radius: 99px; +} +::-webkit-scrollbar-thumb:hover { + background: rgba(255, 255, 255, 0.28); +} + +:root { + --bg-deep: #0a0b0e; + --bg-sidebar: #0d0f14; + --bg-main: #0f1117; + --border: rgba(255, 255, 255, 0.06); + --accent: #3b7ffa; + --accent-glow: rgba(59, 127, 250, 0.35); + --text-primary: #e8eaf0; + --text-secondary: rgba(200, 205, 220, 0.65); + --text-muted: rgba(157, 163, 175, 0.911); + --text-soft: #d6dae3; + --sidebar-width: 280px; +} + +html, +body, +#root { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + background: #000; + font-family: 'NanumSquare', sans-serif; +} + +/* ── Sidebar ── */ +.sidebar { + background: var(--bg-sidebar); + border-right: 1px solid var(--border); + display: flex; + flex-direction: column; + padding: 8px 0; + flex-shrink: 0; + position: relative; + z-index: 20; + overflow: visible; +} +.sidebar::after { + content: ''; + position: absolute; + right: 0; + top: 0; + bottom: 0; + width: 1px; + background: linear-gradient( + to bottom, + transparent, + rgba(59, 127, 250, 0.15) 40%, + rgba(59, 127, 250, 0.15) 60%, + transparent + ); + pointer-events: none; +} + +.nav-item { + display: flex; + align-items: center; + padding: 13px 24px; + font-size: 13.5px; + font-weight: 400; + color: var(--text-secondary); + cursor: pointer; + position: relative; + letter-spacing: 0.01em; + transition: color 0.2s, background 0.2s; +} +.nav-item:hover { + color: var(--text-primary); + background: rgba(255, 255, 255, 0.03); +} +.nav-item.active { + color: var(--accent); + font-weight: 500; + background: rgba(59, 127, 250, 0.07); +} +.nav-item.active::before { + content: ''; + position: absolute; + left: 0; + top: 8px; + bottom: 8px; + width: 3px; + background: var(--accent); + border-radius: 0 3px 3px 0; + box-shadow: 0 0 12px var(--accent-glow); +} +.nav-item-icon { + display: flex; + align-items: center; + justify-content: center; + width: 16px; + margin-right: 10px; + opacity: 0.55; + flex-shrink: 0; + transition: opacity 0.2s; +} +.nav-item:hover .nav-item-icon { + opacity: 0.8; +} +.nav-item.active .nav-item-icon { + opacity: 1; +} +.nav-item-collapsed { + justify-content: center; + padding-left: 0; + padding-right: 0; +} + +/* ── Sidebar Collapse Toggle Button ── */ +.sidebar-collapse-btn { + position: absolute; + right: -10px; + top: 50%; + transform: translateY(-50%); + z-index: 50; + width: 20px; + height: 20px; + border-radius: 50%; + background: var(--bg-sidebar); + border: 1px solid var(--border); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + color: var(--text-muted); + transition: color 0.2s, background 0.2s, border-color 0.2s; +} +.sidebar-collapse-btn:hover { + color: var(--text-primary); + background: rgba(255,255,255,0.06); + border-color: rgba(255,255,255,0.2); +} + +/* ── Main Content ── */ +.main-content { + flex: 1; + background: var(--bg-main); + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; +} +.main-content::before { + content: ''; + position: absolute; + inset: 0; + background: + radial-gradient(ellipse 80% 60% at 65% 50%, rgba(20, 25, 40, 0.9) 0%, transparent 70%), + radial-gradient(ellipse 50% 50% at 20% 50%, rgba(15, 30, 60, 0.3) 0%, transparent 60%); + pointer-events: none; +} + +/* ── Update Button ── */ +.update-btn { + display: flex; + align-items: center; + gap: 7px; + padding: 7px 16px; + background: var(--accent); + border: 1px solid var(--accent); + border-radius: 6px; + color: #fff; + font-family: 'NanumGothic', sans-serif; + font-size: 13px; + font-weight: 600; + letter-spacing: 0.03em; + cursor: pointer; + transition: background 0.2s, box-shadow 0.2s, transform 0.15s; + box-shadow: 0 4px 20px rgba(59, 127, 250, 0.35); +} +.update-btn:hover { + background: #5592ff; + box-shadow: 0 6px 28px rgba(59, 127, 250, 0.55); + transform: translateY(-1px); +} +.update-btn:active { + transform: translateY(0); +} + +/* ── Updating Button (in-progress state) ── */ +.updating-btn { + display: flex; + align-items: center; + gap: 7px; + padding: 7px 16px; + background: rgba(59, 127, 250, 0.15); + border: 1px solid rgba(59, 127, 250, 0.3); + border-radius: 6px; + color: rgba(255, 255, 255, 0.5); + font-family: 'NanumGothic', sans-serif; + font-size: 13px; + font-weight: 600; + letter-spacing: 0.03em; + cursor: default; +} + +/* ── Update Progress Bar ── */ +.update-progress-wrap { + display: flex; + align-items: center; + gap: 8px; + width: 100%; +} +.update-progress-track { + flex: 1; + height: 3px; + background: rgba(255,255,255,0.08); + border-radius: 99px; + overflow: hidden; +} +.update-progress-fill { + height: 100%; + background: var(--accent); + border-radius: 99px; + transition: width 0.2s ease; + box-shadow: 0 0 6px rgba(59,127,250,0.6); +} +.update-progress-pct { + font-size: 11px; + color: var(--text-muted); + min-width: 30px; + text-align: right; + font-variant-numeric: tabular-nums; +} + +/* ── Spinner ── */ +@keyframes spin { + to { transform: rotate(360deg); } +} +.spin { + animation: spin 0.8s linear infinite; +} + +/* ── Launch Button ── */ +.launch-btn { + display: flex; + align-items: center; + gap: 7px; + padding: 7px 16px; + background: var(--accent); + border: 1px solid var(--accent); + border-radius: 6px; + color: #fff; + font-family: 'NanumGothic', sans-serif; + font-size: 13px; + font-weight: 600; + letter-spacing: 0.03em; + cursor: pointer; + transition: background 0.2s, box-shadow 0.2s, transform 0.15s; + box-shadow: 0 4px 20px rgba(59, 127, 250, 0.35); +} +.launch-btn:hover { + background: #5592ff; + box-shadow: 0 6px 28px rgba(59, 127, 250, 0.55); + transform: translateY(-1px); +} +.launch-btn:active { + transform: translateY(0); +} + +/* ── Car Video ── */ +.car-video { + position: absolute; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center bottom; + opacity: 0; + animation: carFadeIn 1.4s 0.5s ease forwards; + z-index: 2; +} + +.car-video-shadow { + position: absolute; + inset: 0; + background: + linear-gradient(to right, var(--bg-main) 0%, var(--bg-main) 14%, rgba(15, 17, 23, 0.45) 32%, transparent 52%), + linear-gradient(to left, var(--bg-main) 0%, rgba(15, 17, 23, 0.6) 8%, transparent 35%), + linear-gradient(to top, rgba(5, 7, 12, 0.9) 0%, transparent 45%), + radial-gradient(ellipse 60% 60% at 100% 100%, rgba(5, 7, 12, 0.8) 0%, transparent 70%), + radial-gradient(ellipse 100% 100% at 80% 40%, transparent 40%, rgba(5, 7, 12, 0.5) 100%); + pointer-events: none; + z-index: 3; +} + +.floor-reflection { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 120px; + background: linear-gradient(to top, rgba(8, 10, 18, 0.8) 0%, transparent 100%); + pointer-events: none; + z-index: 1; +} + +/* ── Text Content ── */ +.text-content { + position: relative; + z-index: 10; + max-width: 480px; + animation: textReveal 1s 0.2s ease both; +} + +.brand-title { + font-family: 'Rajdhani', sans-serif; + font-size: 52px; + font-weight: 700; + color: var(--text-primary); + letter-spacing: 0.02em; + line-height: 1.0; + margin-bottom: 20px; + text-shadow: 0 0 60px rgba(59, 127, 250, 0.1); +} +.brand-title span { + color: var(--accent); +} + +.subtitle { + font-size: 17px; + font-weight: 400; + color: var(--text-primary); + line-height: 1.7; + margin-bottom: 28px; + letter-spacing: 0.01em; +} + +.divider { + width: 140px; + height: 2px; + background: linear-gradient(to right, var(--accent), transparent); + margin-bottom: 22px; + border-radius: 2px; + box-shadow: 0 0 10px var(--accent-glow); +} + +.description { + font-size: 13.5px; + color: rgba(200, 210, 230, 0.85); + line-height: 2.0; + letter-spacing: 0.005em; +} + +/* ── Verify Code Button ── */ +.verify-code-btn { + flex-shrink: 0; + padding: 0 12px; + font-size: 12px; + font-weight: 500; + border-radius: 6px; + border: 1px solid rgba(59, 127, 250, 0.35); + background: rgba(59, 127, 250, 0.10); + color: var(--accent); + white-space: nowrap; + cursor: pointer; + transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s; + font-family: 'NanumGothic', sans-serif; +} +.verify-code-btn:hover:not(:disabled) { + background: rgba(59, 127, 250, 0.2); + border-color: rgba(59, 127, 250, 0.6); + box-shadow: 0 0 12px rgba(59, 127, 250, 0.25); +} +.verify-code-btn:disabled { + background: rgba(255, 255, 255, 0.03); + border-color: rgba(255, 255, 255, 0.07); + color: var(--text-muted); + cursor: not-allowed; +} + +/* ── Notice Icon Button ── */ +.notice-icon-btn { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + background: rgba(255, 255, 255, 0.2); + border: 1px solid rgba(255, 255, 255, 0.07); + border-radius: 8px; + color: var(--text-secondary); + cursor: pointer; + transition: background 0.2s, border-color 0.2s, color 0.2s; +} +.notice-icon-btn:hover { + background: rgba(255, 255, 255, 0.08); + border-color: rgba(255, 255, 255, 0.12); + color: var(--text-primary); +} + +.notice-badge { + position: absolute; + top: 7px; + right: 7px; + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--accent); + box-shadow: 0 0 6px var(--accent-glow); +} + +.notice-dropdown { + position: absolute; + top: calc(100% + 10px); + right: 0; + width: 320px; + background: rgba(13, 15, 22, 0.96); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 10px; + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); + overflow: hidden; +} + +.notice-item { + padding: 12px 16px; +} + +.notice-item-border { + border-bottom: 1px solid rgba(255, 255, 255, 0.05); +} + +/* ── Notice Panel ── */ +.notice-panel { + padding: 14px 16px; + background: rgba(13, 15, 20, 0.75); + border: 1px solid rgba(255, 255, 255, 0.07); + border-radius: 10px; + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); +} + +.notice-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--accent); + box-shadow: 0 0 6px var(--accent-glow); + flex-shrink: 0; +} + +.notice-label { + font-size: 10px; + font-weight: 600; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--accent); +} + +.notice-date { + font-size: 10px; + color: var(--text-muted); + letter-spacing: 0.04em; +} + +.notice-title { + font-size: 12.5px; + font-weight: 600; + color: var(--text-primary); + margin-bottom: 5px; + line-height: 1.4; +} + +.notice-body { + font-size: 11.5px; + color: var(--text-secondary); + line-height: 1.7; + letter-spacing: 0.01em; +} + +/* ── Dashboard ── */ +.car-bg-radial { + position: absolute; + inset: 0; + background: radial-gradient(ellipse 90% 70% at 60% 55%, rgba(25, 35, 70, 0.15) 0%, transparent 60%); +} + +.version-label { + position: absolute; + bottom: 16px; + right: 24px; + font-size: 11px; + font-weight: 500; + letter-spacing: 0.12em; + color: var(--text-soft); + z-index: 5; +} + +/* ── Login ── */ +.login-video { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center bottom; + opacity: 0; + animation: carFadeIn 1.4s 0.3s ease forwards; + z-index: 0; +} + +.login-video-overlay { + position: absolute; + inset: 0; + background: + linear-gradient(to bottom, var(--bg-deep) 0%, rgba(10, 11, 14, 0.5) 35%, transparent 60%), + linear-gradient(to top, var(--bg-deep) 0%, transparent 40%), + linear-gradient(to right, rgba(10, 11, 14, 0.3) 0%, transparent 60%), + linear-gradient(to left, rgba(10, 11, 14, 0.5) 0%, transparent 55%), + radial-gradient(ellipse 60% 50% at 100% 100%, rgba(10, 11, 14, 0.7) 0%, transparent 70%); + z-index: 1; + pointer-events: none; +} + +.login-panel { + border-left: 1px solid rgba(255, 255, 255, 0.07); + background: rgba(13, 15, 20, 0.6); + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); +} + +.login-panel-edge { + position: absolute; + left: 0; top: 0; bottom: 0; + width: 1px; + background: linear-gradient(to bottom, transparent, rgba(59, 127, 250, 0.2) 30%, rgba(59, 127, 250, 0.2) 70%, transparent); + pointer-events: none; +} + +.login-panel-glow { + position: absolute; + top: 0; left: 0; right: 0; + height: 200px; + background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(59, 127, 250, 0.06) 0%, transparent 100%); + pointer-events: none; +} + +.animate-reveal { + animation: textReveal 0.8s 0.2s ease both; +} + +.animate-reveal-late { + animation: textReveal 0.8s 0.3s ease both; +} + +/* ── Login inputs ── */ +.login-input-wrap { + position: relative; + display: flex; + align-items: center; +} + +.login-input-icon { + position: absolute; + left: 14px; + width: 15px; + height: 15px; + color: var(--text-muted); + pointer-events: none; + flex-shrink: 0; +} + +.login-input-field { + width: 100%; + padding: 11px 16px 11px 40px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid var(--border); + border-radius: 6px; + color: var(--text-primary); + font-family: 'NanumGothic', sans-serif; + font-size: 13px; + outline: none; + transition: border-color 0.2s, background 0.2s; + box-sizing: border-box; +} +.login-input-field::placeholder { color: var(--text-muted); } +.login-input-field:focus { + border-color: rgba(59, 127, 250, 0.5); + background: rgba(59, 127, 250, 0.04); +} + +.login-input-eye { + position: absolute; + right: 12px; + width: 16px; + height: 16px; + color: var(--text-muted); + background: none; + border: none; + cursor: pointer; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + transition: color 0.2s; +} +.login-input-eye:hover { color: var(--text-secondary); } +.login-input-eye svg { width: 16px; height: 16px; } + +.login-checkbox { + width: 14px; + height: 14px; + accent-color: var(--accent); + cursor: pointer; +} + +.login-google-btn { + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + padding: 10px 0; + background: rgba(255, 255, 255, 0.04); + border: 1px solid var(--border); + border-radius: 6px; + color: var(--text-secondary); + font-family: 'NanumGothic', sans-serif; + font-size: 13px; + font-weight: 500; + cursor: pointer; + transition: background 0.2s, border-color 0.2s; +} +.login-google-btn:hover { + background: rgba(255, 255, 255, 0.07); + border-color: rgba(255, 255, 255, 0.12); +} + +/* ── Login ── */ +.login-input { + width: 100%; + padding: 11px 16px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid var(--border); + border-radius: 6px; + color: var(--text-primary); + font-family: 'NanumGothic', sans-serif; + font-size: 13px; + outline: none; + transition: border-color 0.2s, background 0.2s; + box-sizing: border-box; +} +.login-input::placeholder { + color: var(--text-muted); +} +.login-input:focus { + border-color: rgba(59, 127, 250, 0.5); + background: rgba(59, 127, 250, 0.04); +} + +.login-btn { + display: flex; + align-items: center; + justify-content: center; + padding: 11px 0; + background: var(--accent); + border: 1px solid var(--accent); + border-radius: 6px; + color: #fff; + font-family: 'NanumGothic', sans-serif; + font-size: 13px; + font-weight: 600; + letter-spacing: 0.03em; + cursor: pointer; + transition: background 0.2s, box-shadow 0.2s, transform 0.15s; + box-shadow: 0 4px 20px rgba(59, 127, 250, 0.3); +} +.login-btn:hover:not(:disabled) { + background: #5592ff; + box-shadow: 0 6px 28px rgba(59, 127, 250, 0.5); + transform: translateY(-1px); +} +.login-btn:active:not(:disabled) { + transform: translateY(0); +} + +/* ── Typing Cursor ── */ +.typing-cursor { + display: inline-block; + width: 2px; + height: 1em; + background: var(--text-muted); + border-radius: 1px; + animation: cursorBlink 0.9s step-end infinite; + transform: translateY(2px); +} + +@keyframes cursorBlink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0; } +} + +/* ── Running State ── */ +.running-badge { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 6px 14px 6px 10px; + border-radius: 20px; + background: rgba(34, 197, 94, 0.07); + border: 1px solid rgba(34, 197, 94, 0.2); + margin-bottom: 24px; +} + +.running-dot { + width: 7px; + height: 7px; + border-radius: 50%; + background: #22c55e; + box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); + animation: running-pulse 1.8s ease infinite; + flex-shrink: 0; +} + +@keyframes running-pulse { + 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); } + 55% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); } + 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } +} + +/* ── Animations ── */ +@keyframes textReveal { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } +} +@keyframes carFadeIn { + from { opacity: 0; transform: translateX(30px); } + to { opacity: 1; transform: translateX(0); } +} +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} diff --git a/src/components/BrandMark.tsx b/src/components/BrandMark.tsx new file mode 100644 index 0000000..1f5e81c --- /dev/null +++ b/src/components/BrandMark.tsx @@ -0,0 +1,14 @@ +import autonomyLogo from '../assets/icon.png'; + +export function BrandMark({ dark = false }: { dark?: boolean }) { + return ( +

+ +

+ + + Autonomy Studio + +

+ ); +} diff --git a/src/components/ConfirmDialog.tsx b/src/components/ConfirmDialog.tsx new file mode 100644 index 0000000..96cfeec --- /dev/null +++ b/src/components/ConfirmDialog.tsx @@ -0,0 +1,73 @@ +import { createPortal } from 'react-dom'; +import { Loader2, type LucideIcon } from 'lucide-react'; +import type { ReactNode } from 'react'; + +type ConfirmDialogProps = { + open: boolean; + title: string; + message: string; + detail?: ReactNode; + confirmLabel?: string; + cancelLabel?: string; + loading?: boolean; + danger?: boolean; + icon?: LucideIcon; + onCancel: () => void; + onConfirm: () => void; +}; + +export function ConfirmDialog({ + open, + title, + message, + detail, + confirmLabel = '확인', + cancelLabel = '취소', + loading = false, + danger = false, + icon: Icon, + onCancel, + onConfirm, +}: ConfirmDialogProps) { + if (!open) return null; + + const confirmClass = danger + ? 'bg-[#e11d48] text-white hover:bg-[#be123c]' + : 'bg-[#2563eb] text-white hover:bg-[#1d4ed8]'; + + return createPortal( +

{title}

{message}

+ {detail ?

{detail}

: null} +

+ +

, + document.body, + ); +} diff --git a/src/components/InstructorChatPanel.tsx b/src/components/InstructorChatPanel.tsx new file mode 100644 index 0000000..cdd20a4 --- /dev/null +++ b/src/components/InstructorChatPanel.tsx @@ -0,0 +1,468 @@ +import { useEffect, useMemo, useRef, useState } from 'react'; +import { ArrowLeft, ChevronRight, Loader2, MessageCircle, Send, UserRound, X } from 'lucide-react'; +import { io } from 'socket.io-client'; +import type { Socket } from 'socket.io-client'; +import { + CHAT_SOCKET_BASE_URL, + createInstructorChatMessage, + getInstructorChatThread, + listInstructorChatThreads, + type InstructorChatMessage, + type InstructorChatThread, +} from '../lib/chat'; +import type { AuthSession } from '../types/auth'; + +type InstructorChatPanelProps = { + session: AuthSession; + open: boolean; + initialThreadId?: string | null; + initialThreadRequestId?: number; + onClose: () => void; +}; + +type ChatNotificationPayload = { + type: 'chat.message.created'; + threadId: string; + messageId: string; + senderType: 'STUDENT' | 'AI' | 'INSTRUCTOR' | 'SYSTEM'; + preview: string; + createdAt: string; +}; + +export function InstructorChatPanel({ session, open, initialThreadId = null, initialThreadRequestId = 0, onClose }: InstructorChatPanelProps) { + const [threads, setThreads] = useState([]); + const [selectedThreadId, setSelectedThreadId] = useState(null); + const [loading, setLoading] = useState(false); + const [roomLoading, setRoomLoading] = useState(false); + const [error, setError] = useState(null); + const [mounted, setMounted] = useState(open); + + const selectedThread = useMemo(() => threads.find((thread) => thread.id === selectedThreadId) ?? null, [selectedThreadId, threads]); + + const refreshThreadList = (showLoading = false) => { + let cancelled = false; + if (showLoading) setLoading(true); + setError(null); + + const request = listInstructorChatThreads(session.accessToken) + .then((items) => { + if (!cancelled) setThreads(items); + }) + .catch((reason: Error) => { + if (!cancelled) { + setThreads([]); + setError(reason.message); + } + }) + .finally(() => { + if (!cancelled && showLoading) setLoading(false); + }); + + return { + cancel: () => { + cancelled = true; + }, + request, + }; + }; + + const refreshSelectedThread = (threadId: string, showLoading = false) => { + if (showLoading) setRoomLoading(true); + setError(null); + + return getInstructorChatThread(session.accessToken, threadId) + .then((thread) => { + setThreads((current) => replaceThread(current, thread)); + }) + .catch((reason: Error) => { + setError(reason.message); + }) + .finally(() => { + if (showLoading) setRoomLoading(false); + }); + }; + + useEffect(() => { + if (!open) return; + + const refresh = refreshThreadList(true); + + return () => { + refresh.cancel(); + }; + }, [open, session.accessToken]); + + useEffect(() => { + if (!open || !initialThreadId) return; + setSelectedThreadId(initialThreadId); + void refreshSelectedThread(initialThreadId, true); + }, [open, initialThreadId, initialThreadRequestId, session.accessToken]); + + useEffect(() => { + if (!open) return; + const socket: Socket = io(CHAT_SOCKET_BASE_URL, { + auth: { token: session.accessToken }, + transports: ['websocket', 'polling'], + }); + + const handleMessageCreated = (payload: ChatNotificationPayload) => { + void refreshThreadList(false).request; + if (selectedThreadId && payload.threadId === selectedThreadId) { + void refreshSelectedThread(selectedThreadId, false); + } + }; + + socket.on('connect', () => { + void refreshThreadList(false).request; + if (selectedThreadId) void refreshSelectedThread(selectedThreadId, false); + }); + socket.on('chat.message.created', handleMessageCreated); + + return () => { + socket.off('chat.message.created', handleMessageCreated); + socket.disconnect(); + }; + }, [open, selectedThreadId, session.accessToken]); + + useEffect(() => { + if (!open) setSelectedThreadId(null); + }, [open]); + + useEffect(() => { + if (open) { + setMounted(true); + return; + } + + const timer = window.setTimeout(() => setMounted(false), 220); + return () => window.clearTimeout(timer); + }, [open]); + + const handleOpenThread = (threadId: string) => { + setSelectedThreadId(threadId); + void refreshSelectedThread(threadId, true); + }; + + const handleSendMessage = async (threadId: string, content: string) => { + const updatedThread = await createInstructorChatMessage(session.accessToken, threadId, content); + setThreads((current) => replaceThread(current, updatedThread)); + }; + + if (!mounted) return null; + + return ( + + ); +} + +function ThreadCard({ accessToken, thread, onOpen }: { accessToken: string; thread: InstructorChatThread; onOpen: () => void }) { + return ( + + ); +} + +function StudentAvatar({ accessToken, thread }: { accessToken: string; thread: InstructorChatThread }) { + const [avatarSource, setAvatarSource] = useState(null); + + useEffect(() => { + if (!thread.studentAvatarUrl) { + setAvatarSource(null); + return; + } + + let revoked = false; + let objectUrl: string | null = null; + + fetch(thread.studentAvatarUrl, { + headers: { + Authorization: `Bearer ${accessToken}`, + }, + }) + .then((response) => (response.ok ? response.blob() : null)) + .then((blob) => { + if (!blob || revoked) return; + objectUrl = URL.createObjectURL(blob); + setAvatarSource(objectUrl); + }) + .catch(() => { + if (!revoked) setAvatarSource(null); + }); + + return () => { + revoked = true; + if (objectUrl) URL.revokeObjectURL(objectUrl); + }; + }, [accessToken, thread.studentAvatarUrl]); + + return ( + + {avatarSource ? ( +

+ ) : ( + + ); +} + +function ChatRoom({ + thread, + loading, + onBack, + onClose, + onSend, +}: { + thread: InstructorChatThread; + loading: boolean; + onBack: () => void; + onClose: () => void; + onSend: (threadId: string, content: string) => Promise; +}) { + const messages = thread.messages.length > 0 ? thread.messages : createFallbackMessages(thread); + const [draft, setDraft] = useState(''); + const [sending, setSending] = useState(false); + const [sendError, setSendError] = useState(null); + const messageScrollRef = useRef(null); + + useEffect(() => { + const target = messageScrollRef.current; + if (!target || loading) return; + + target.scrollTo({ + top: target.scrollHeight, + behavior: 'smooth', + }); + }, [loading, messages.length, thread.id]); + + const handleSubmit = async () => { + const content = draft.trim(); + if (!content || sending) return; + + setSending(true); + setSendError(null); + try { + await onSend(thread.id, content); + setDraft(''); + } catch (reason) { + setSendError(reason instanceof Error ? reason.message : '강사 답변을 저장하지 못했습니다.'); + } finally { + setSending(false); + } + }; + + return ( + <> +

+ +

{thread.studentName}

+ {thread.status === 'WAITING_INSTRUCTOR' ? : null} +

+ {[thread.groupName, thread.week ? `${thread.week}주차` : null].filter(Boolean).join(' · ') || '강사 문의'} +

+ +

+ {loading ? ( +

+ ) : ( +

+ {messages.map((message) => ( + + ))} +

+ )} +

+ +

setDraft(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter' && !event.shiftKey) {
+                  event.preventDefault();
+                  void handleSubmit();
+                }
+              }}
+            />
+            <button
+              className="grid w-12 shrink-0 place-items-center bg-[#4f46e5] text-white hover:bg-[#4338ca] disabled:bg-[#cbd5e1]"
+              type="button"
+              disabled={!draft.trim() || sending}
+              onClick={handleSubmit}
+              aria-label={sending ? '전송 중' : '전송'}
+              title={sending ? '전송 중' : '전송'}
+            >
+              {sending ? <Loader2 className="animate-spin" size={16} aria-hidden="true" /> : <Send size={16} aria-hidden="true" />}
+            </button>
+          </div>
+          {sendError ? <p className="mt-1 text-[11px] font-bold text-[#e11d48]">{sendError}</p> : null}
+        </div>
+      </div>
+    </>
+  );
+}
+
+function MessageBubble({ message }: { message: InstructorChatMessage }) {
+  const isInstructor = message.senderType === 'INSTRUCTOR';
+  const isStudent = message.senderType === 'STUDENT';
+  const senderLabel = message.senderName?.trim() || getSenderLabel(message.senderType);
+
+  return (
+    <div className={`flex ${isInstructor ? 'justify-end' : 'justify-start'}`}>
+      <div
+        className={`max-w-[82%] rounded-lg px-3.5 py-2.5 ${
+          isInstructor
+            ? 'bg-[#4f46e5] text-white'
+            : isStudent
+              ? 'border border-[#c7d2e0] bg-white text-[#111827]'
+              : 'border border-[#e0e7ff] bg-[#eef2ff] text-[#3730a3]'
+        }`}
+      >
+        <div className="mb-1 flex items-center gap-2">
+          <span className={`text-[10px] font-black ${isInstructor ? 'text-white/78' : 'text-[#64748b]'}`}>{senderLabel}</span>
+          {message.createdAt ? <span className={`text-[10px] font-bold ${isInstructor ? 'text-white/58' : 'text-[#94a3b8]'}`}>{formatDate(message.createdAt)}</span> : null}
+        </div>
+        <p className="whitespace-pre-wrap text-[13px] font-bold leading-5">{message.content}</p>
+      </div>
+    </div>
+  );
+}
+
+function EmptyState({ title, description }: { title: string; description: string }) {
+  return (
+    <div className="flex h-full flex-col items-center justify-center rounded-lg border border-dashed border-[#cbd5e1] bg-white/58 px-6 text-center">
+      <span className="mb-3 grid h-11 w-11 place-items-center rounded-full bg-[#eef2ff] text-[#4f46e5]">
+        <MessageCircle size={20} aria-hidden="true" />
+      </span>
+      <p className="text-[14px] font-black text-[#111827]">{title}</p>
+      <p className="mt-2 text-[12px] font-bold leading-5 text-[#64748b]">{description}</p>
+    </div>
+  );
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const label = getStatusLabel(status);
+  const tone = status === 'WAITING_INSTRUCTOR' ? 'bg-[#fff1f2] text-[#be123c] border-[#fecdd3]' : 'bg-[#eef2ff] text-[#4f46e5] border-[#c7d2fe]';
+
+  return <span className={`shrink-0 rounded-full border px-2 py-0.5 text-[10px] font-black ${tone}`}>{label}</span>;
+}
+
+function getStatusLabel(status: string): string {
+  if (status === 'WAITING_INSTRUCTOR') return '답변 대기';
+  if (status === 'OPEN') return '진행 중';
+  if (status === 'RESOLVED') return '완료';
+  if (status === 'ARCHIVED') return '보관';
+  return status;
+}
+
+function getSenderLabel(senderType: string): string {
+  if (senderType === 'STUDENT') return '수강생';
+  if (senderType === 'INSTRUCTOR') return '강사';
+  if (senderType === 'AI') return 'AI';
+  return '시스템';
+}
+
+function createFallbackMessages(thread: InstructorChatThread): InstructorChatMessage[] {
+  return [
+    {
+      id: `${thread.id}-last`,
+      senderType: 'STUDENT',
+      content: thread.lastMessage,
+      createdAt: thread.lastMessageAt,
+    },
+  ];
+}
+
+function replaceThread(threads: InstructorChatThread[], thread: InstructorChatThread): InstructorChatThread[] {
+  const exists = threads.some((item) => item.id === thread.id);
+  if (!exists) return [thread, ...threads];
+
+  return threads.map((item) => (item.id === thread.id ? thread : item));
+}
+
+function formatDate(value: string): string {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+
+  return new Intl.DateTimeFormat('ko-KR', {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(date);
+}
diff --git a/src/components/PageHeader.tsx b/src/components/PageHeader.tsx
new file mode 100644
index 0000000..83e6c17
--- /dev/null
+++ b/src/components/PageHeader.tsx
@@ -0,0 +1,21 @@
+import type { AppRoute } from '../routes';
+import { pageMeta } from '../pageMeta';
+
+type PageHeaderProps = {
+  route: AppRoute;
+  action?: React.ReactNode;
+};
+
+export function PageHeader({ route, action }: PageHeaderProps) {
+  const meta = pageMeta[route];
+
+  return (
+    <div className={`mb-7 ${action ? 'flex flex-wrap items-end justify-between gap-4' : ''}`}>
+      <div>
+        <h1 className="text-[24px] font-black tracking-[0] text-[#0f172a]">{meta.title}</h1>
+        <p className="mt-2 text-[13px] font-bold text-[#64748b]">{meta.description}</p>
+      </div>
+      {action}
+    </div>
+  );
+}
diff --git a/src/components/PaginationBar.tsx b/src/components/PaginationBar.tsx
new file mode 100644
index 0000000..7f9c5c1
--- /dev/null
+++ b/src/components/PaginationBar.tsx
@@ -0,0 +1,72 @@
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+type PaginationBarProps = {
+  totalLabel: string;
+  page: number;
+  pageSize: number;
+  totalItems: number;
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (pageSize: number) => void;
+};
+
+const pageSizeOptions = [10, 20, 50];
+
+export function PaginationBar({ totalLabel, page, pageSize, totalItems, onPageChange, onPageSizeChange }: PaginationBarProps) {
+  const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
+  const pages = Array.from({ length: Math.min(totalPages, 5) }, (_, index) => {
+    if (totalPages <= 5) return index + 1;
+    const start = Math.min(Math.max(page - 2, 1), totalPages - 4);
+    return start + index;
+  });
+
+  return (
+    <div className="flex flex-wrap items-center justify-between gap-3 border-t border-[#cbd5e1] px-4 pb-3 pt-6">
+      <p className="text-[12px] font-bold text-[#64748b]">{totalLabel}</p>
+
+      <div className="flex items-center gap-1.5">
+        <button
+          className="grid h-8 w-8 place-items-center rounded-md border border-[#d1d9e6] bg-white text-[#94a3b8] hover:bg-[#f8fafc] disabled:cursor-default disabled:opacity-35"
+          type="button"
+          aria-label="이전 페이지"
+          disabled={page <= 1}
+          onClick={() => onPageChange(Math.max(1, page - 1))}
+        >
+          <ChevronLeft size={15} aria-hidden="true" />
+        </button>
+        {pages.map((item) => (
+          <button
+            key={item}
+            className={`grid h-8 w-8 place-items-center rounded-md text-[12px] font-bold ${
+              item === page ? 'bg-[#4f46e5] text-white' : 'border border-[#d1d9e6] bg-white text-[#64748b] hover:bg-[#f8fafc]'
+            }`}
+            type="button"
+            aria-current={item === page ? 'page' : undefined}
+            onClick={() => onPageChange(item)}
+          >
+            {item}
+          </button>
+        ))}
+        <button
+          className="grid h-8 w-8 place-items-center rounded-md border border-[#d1d9e6] bg-white text-[#94a3b8] hover:bg-[#f8fafc] disabled:cursor-default disabled:opacity-35"
+          type="button"
+          aria-label="다음 페이지"
+          disabled={page >= totalPages}
+          onClick={() => onPageChange(Math.min(totalPages, page + 1))}
+        >
+          <ChevronRight size={15} aria-hidden="true" />
+        </button>
+      </div>
+
+      <select
+        aria-label="페이지당 표시 개수"
+        className="h-8 rounded-md border border-[#d1d9e6] bg-white px-2 text-[12px] font-bold text-[#64748b] outline-none hover:bg-[#f8fafc] focus:border-[#4f46e5] focus:ring-2 focus:ring-[#4f46e5]/10"
+        value={pageSize}
+        onChange={(event) => onPageSizeChange(Number(event.target.value))}
+      >
+        {pageSizeOptions.map((option) => (
+          <option key={option} value={option}>{option}개씩 보기</option>
+        ))}
+      </select>
+    </div>
+  );
+}
diff --git a/src/components/ToastProvider.tsx b/src/components/ToastProvider.tsx
new file mode 100644
index 0000000..3469ba4
--- /dev/null
+++ b/src/components/ToastProvider.tsx
@@ -0,0 +1,88 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { CheckCircle2, CircleAlert, X } from 'lucide-react';
+
+type Toast = {
+  id: number;
+  title: string;
+  message?: string;
+  variant?: 'success' | 'error';
+  entering?: boolean;
+  closing?: boolean;
+};
+
+type ToastContextValue = {
+  showToast: (toast: Omit<Toast, 'id'>) => void;
+};
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+const TOAST_DURATION_MS = 2800;
+const TOAST_EXIT_MS = 180;
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const removeToast = useCallback((id: number) => {
+    setToasts((current) => current.map((toast) => (toast.id === id ? { ...toast, closing: true } : toast)));
+    window.setTimeout(() => {
+      setToasts((current) => current.filter((toast) => toast.id !== id));
+    }, TOAST_EXIT_MS);
+  }, []);
+
+  const showToast = useCallback((toast: Omit<Toast, 'id'>) => {
+    const id = Date.now() + Math.floor(Math.random() * 1000);
+    setToasts((current) => [...current, { ...toast, id, entering: true }]);
+    window.setTimeout(() => {
+      setToasts((current) => current.map((item) => (item.id === id ? { ...item, entering: false } : item)));
+    }, 20);
+  }, []);
+
+  const value = useMemo(() => ({ showToast }), [showToast]);
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      {createPortal(
+        <div className="fixed bottom-5 right-5 z-[80] flex w-[calc(100vw-40px)] max-w-[360px] flex-col gap-2">
+          {toasts.map((toast) => (
+            <ToastItem key={toast.id} toast={toast} onClose={() => removeToast(toast.id)} />
+          ))}
+        </div>,
+        document.body,
+      )}
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) throw new Error('useToast must be used within ToastProvider');
+  return context;
+}
+
+function ToastItem({ toast, onClose }: { toast: Toast; onClose: () => void }) {
+  useEffect(() => {
+    const timer = window.setTimeout(onClose, TOAST_DURATION_MS);
+    return () => window.clearTimeout(timer);
+  }, [onClose]);
+
+  const Icon = toast.variant === 'error' ? CircleAlert : CheckCircle2;
+  const iconTone = toast.variant === 'error' ? 'bg-[#e11d48] text-white' : 'bg-[#4f46e5] text-white';
+
+  return (
+    <div className={`rounded-lg border border-[#1e293b] bg-[#111827] px-4 py-3 shadow-[0_22px_54px_rgba(15,23,42,0.32)] transition duration-180 ease-out ${toast.closing || toast.entering ? 'translate-y-2 opacity-0' : 'translate-y-0 opacity-100'}`}>
+      <div className="flex items-start gap-3">
+        <span className={`mt-0.5 grid h-8 w-8 shrink-0 place-items-center rounded-md ${iconTone}`}>
+          <Icon size={17} aria-hidden="true" />
+        </span>
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-[13px] font-black text-white">{toast.title}</p>
+          {toast.message ? <p className="mt-1 truncate text-[12px] font-bold text-[#cbd5e1]">{toast.message}</p> : null}
+        </div>
+        <button className="grid h-7 w-7 shrink-0 place-items-center rounded-md text-[#cbd5e1] hover:bg-white/10 hover:text-white" type="button" onClick={onClose} aria-label="토스트 닫기" title="토스트 닫기">
+          <X size={14} aria-hidden="true" />
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/hooks/useProfileAvatar.ts b/src/hooks/useProfileAvatar.ts
new file mode 100644
index 0000000..327b170
--- /dev/null
+++ b/src/hooks/useProfileAvatar.ts
@@ -0,0 +1,115 @@
+import { useCallback, useEffect, useState } from 'react';
+import { fetchProfileAvatar } from '../lib/profileAvatar';
+
+type ProfileAvatarState = {
+  avatarObjectUrl: string | null;
+  avatarMissing: boolean;
+  avatarLoading: boolean;
+  refreshAvatar: () => void;
+  setAvatarMissing: (missing: boolean) => void;
+};
+
+export function useProfileAvatar(accessToken: string): ProfileAvatarState {
+  const [avatarVersion, setAvatarVersion] = useState(() => Date.now());
+  const [avatarObjectUrl, setAvatarObjectUrl] = useState<string | null>(null);
+  const [avatarMissing, setAvatarMissing] = useState(false);
+  const [avatarLoading, setAvatarLoading] = useState(false);
+
+  const refreshAvatar = useCallback(() => {
+    setAvatarMissing(false);
+    setAvatarVersion(Date.now());
+  }, []);
+
+  useEffect(() => {
+    const handleAvatarUpdated = () => refreshAvatar();
+    const handleAvatarDeleted = () => {
+      setAvatarObjectUrl((previous) => {
+        if (previous) URL.revokeObjectURL(previous);
+        return null;
+      });
+      setAvatarMissing(true);
+      setAvatarLoading(false);
+    };
+    window.addEventListener('profile-avatar-updated', handleAvatarUpdated);
+    window.addEventListener('profile-avatar-deleted', handleAvatarDeleted);
+    return () => {
+      window.removeEventListener('profile-avatar-updated', handleAvatarUpdated);
+      window.removeEventListener('profile-avatar-deleted', handleAvatarDeleted);
+    };
+  }, [refreshAvatar]);
+
+  useEffect(() => {
+    let cancelled = false;
+    let nextObjectUrl: string | null = null;
+
+    const loadAvatar = async () => {
+      if (!accessToken) {
+        setAvatarObjectUrl((previous) => {
+          if (previous) URL.revokeObjectURL(previous);
+          return null;
+        });
+        setAvatarMissing(true);
+        return;
+      }
+
+      setAvatarLoading(true);
+
+      try {
+        const blob = await fetchProfileAvatar(accessToken, avatarVersion);
+        if (!blob) {
+          if (!cancelled) {
+            setAvatarObjectUrl((previous) => {
+              if (previous) URL.revokeObjectURL(previous);
+              return null;
+            });
+            setAvatarMissing(true);
+          }
+          return;
+        }
+
+        nextObjectUrl = URL.createObjectURL(blob);
+        if (!cancelled) {
+          setAvatarObjectUrl((previous) => {
+            if (previous) URL.revokeObjectURL(previous);
+            return nextObjectUrl;
+          });
+          setAvatarMissing(false);
+        }
+      } catch {
+        if (!cancelled) {
+          setAvatarObjectUrl((previous) => {
+            if (previous) URL.revokeObjectURL(previous);
+            return null;
+          });
+          setAvatarMissing(true);
+        }
+      } finally {
+        if (!cancelled) setAvatarLoading(false);
+      }
+    };
+
+    void loadAvatar();
+
+    return () => {
+      cancelled = true;
+      if (nextObjectUrl) URL.revokeObjectURL(nextObjectUrl);
+    };
+  }, [accessToken, avatarVersion]);
+
+  useEffect(() => {
+    return () => {
+      setAvatarObjectUrl((previous) => {
+        if (previous) URL.revokeObjectURL(previous);
+        return null;
+      });
+    };
+  }, []);
+
+  return {
+    avatarObjectUrl,
+    avatarMissing,
+    avatarLoading,
+    refreshAvatar,
+    setAvatarMissing,
+  };
+}
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..b0d6aa3
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,189 @@
+@import "tailwindcss";
+
+@font-face {
+  font-family: "NanumSquare";
+  src: url("/assets/fonts/NanumSquareL.woff2") format("woff2");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "NanumSquare";
+  src: url("/assets/fonts/NanumSquare.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "NanumSquare";
+  src: url("/assets/fonts/NanumSquareB.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "NanumSquare";
+  src: url("/assets/fonts/NanumSquareEB.woff2") format("woff2");
+  font-weight: 800 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@theme {
+  --font-sans: "NanumSquare", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+@layer base {
+  :root {
+    color: #17171f;
+    background: #fafafa;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    scrollbar-gutter: stable;
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: #cbd5e1 transparent;
+  }
+
+  *::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 999px;
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
+  }
+
+  body {
+    min-width: 320px;
+    min-height: 100vh;
+    margin: 0;
+    font-family: var(--font-sans);
+  }
+
+  button {
+    cursor: pointer;
+  }
+
+  input[type="password"] {
+    color: #111827;
+    caret-color: #111827;
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    -webkit-text-fill-color: #111827;
+  }
+
+  input::placeholder {
+    color: #a0a7b7;
+    font-family: var(--font-sans);
+    font-weight: 700;
+  }
+
+  input[type="password"]::placeholder {
+    color: #a0a7b7;
+    font-family: var(--font-sans);
+    font-weight: 700;
+    -webkit-text-fill-color: #a0a7b7;
+  }
+}
+
+@layer components {
+  .icon-ripple-button {
+    transition: color 150ms ease;
+  }
+
+  .icon-ripple-button::after {
+    position: absolute;
+    inset: 5px;
+    content: "";
+    pointer-events: none;
+    border: 1px solid rgba(79, 70, 229, 0.42);
+    border-radius: 9999px;
+    opacity: 0;
+    transform: scale(0.72);
+  }
+
+  .icon-ripple-button:active::after {
+    animation: icon-ripple 340ms ease-out;
+  }
+
+  .icon-chat-blink {
+    animation: icon-chat-blink 1.05s ease-in-out infinite;
+  }
+
+  @keyframes icon-ripple {
+    0% {
+      opacity: 0.42;
+      transform: scale(0.72);
+    }
+
+    100% {
+      opacity: 0;
+      transform: scale(1.75);
+    }
+  }
+
+  @keyframes icon-chat-blink {
+    0% {
+      opacity: 1;
+      filter: drop-shadow(0 0 0 rgba(37, 99, 235, 0));
+    }
+
+    45% {
+      opacity: 0.34;
+      filter: drop-shadow(0 0 7px rgba(37, 99, 235, 0.82));
+    }
+
+    100% {
+      opacity: 1;
+      filter: drop-shadow(0 0 0 rgba(37, 99, 235, 0));
+    }
+  }
+
+  .page-transition {
+    will-change: opacity, transform;
+    transition:
+      opacity 120ms ease,
+      transform 120ms ease;
+  }
+
+  .page-transition-in {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .page-transition-out {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .icon-ripple-button:active::after {
+    animation: none;
+  }
+
+  .icon-chat-blink {
+    animation: none;
+  }
+
+  .page-transition {
+    transition: none;
+    transform: none;
+  }
+}
diff --git a/src/layouts/InstructorLayout.tsx b/src/layouts/InstructorLayout.tsx
new file mode 100644
index 0000000..23b449b
--- /dev/null
+++ b/src/layouts/InstructorLayout.tsx
@@ -0,0 +1,797 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Bell,
+  BookOpenText,
+  Building2,
+  Camera,
+  CheckCheck,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ExternalLink,
+  Loader2,
+  LogOut,
+  MessageCircle,
+  Search,
+  Settings,
+  ShieldCheck,
+  Trash2,
+  X,
+  type LucideIcon,
+} from 'lucide-react';
+import { io } from 'socket.io-client';
+import type { Socket } from 'socket.io-client';
+import { ConfirmDialog } from '../components/ConfirmDialog';
+import { InstructorChatPanel } from '../components/InstructorChatPanel';
+import { useToast } from '../components/ToastProvider';
+import autonomyLogo from '../assets/icon.png';
+import { useProfileAvatar } from '../hooks/useProfileAvatar';
+import { CHAT_SOCKET_BASE_URL } from '../lib/chat';
+import type { InstructorCourse } from '../lib/courses';
+import { deleteProfileAvatar, notifyProfileAvatarDeleted, notifyProfileAvatarUpdated, resizeImageToWebp, uploadProfileAvatar } from '../lib/profileAvatar';
+import { navItems, type AppRoute } from '../routes';
+import type { AuthSession } from '../types/auth';
+
+type InstructorLayoutProps = {
+  session: AuthSession;
+  route: AppRoute;
+  onNavigate: (route: AppRoute) => void;
+  onLogout: () => void;
+  courses: InstructorCourse[];
+  selectedCourseId: string;
+  onSelectCourse: (courseId: string) => void;
+  chatThreadId?: string | null;
+  chatThreadRequestId?: number;
+  children: React.ReactNode;
+};
+
+type NotificationMessage = {
+  id: string;
+  title: string;
+  body: string;
+  category: string;
+  categoryLabel?: string;
+  audience?: string;
+  createdAt: string;
+  date: string;
+  read: boolean;
+};
+
+type ChatNotificationPayload = {
+  type: 'chat.message.created';
+  threadId: string;
+  messageId: string;
+  senderType: 'STUDENT' | 'AI' | 'INSTRUCTOR' | 'SYSTEM';
+  preview: string;
+  createdAt: string;
+};
+
+const NOTIFICATION_API_BASE_URL = (import.meta.env.VITE_LAUNCHER_API_BASE_URL ?? 'http://localhost:4200/api').replace(/\/+$/, '');
+const NOTIFICATION_DROPDOWN_LIMIT = 10;
+const NOTIFICATION_DRAWER_PAGE_SIZE = 8;
+
+export function InstructorLayout({ session, route, onNavigate, onLogout, courses, selectedCourseId, onSelectCourse, chatThreadId = null, chatThreadRequestId = 0, children }: InstructorLayoutProps) {
+  const [profileOpen, setProfileOpen] = useState(false);
+  const [notificationOpen, setNotificationOpen] = useState(false);
+  const [notificationDrawerOpen, setNotificationDrawerOpen] = useState(false);
+  const [notificationQuery, setNotificationQuery] = useState('');
+  const [notificationTab, setNotificationTab] = useState<'unread' | 'read'>('unread');
+  const [notificationPage, setNotificationPage] = useState(1);
+  const [chatOpen, setChatOpen] = useState(false);
+  const [hasUnreadChat, setHasUnreadChat] = useState(false);
+  const [notifications, setNotifications] = useState<NotificationMessage[]>([]);
+  const profileRef = useRef<HTMLDivElement | null>(null);
+  const avatarInputRef = useRef<HTMLInputElement | null>(null);
+  const { showToast } = useToast();
+  const [avatarUploading, setAvatarUploading] = useState(false);
+  const [avatarDeleting, setAvatarDeleting] = useState(false);
+  const [avatarDeleteConfirmOpen, setAvatarDeleteConfirmOpen] = useState(false);
+  const displayName = getDisplayName(session);
+  const affiliation = getAffiliation(session);
+  const roleLabel = getRoleLabel(session.user.role);
+  const { avatarObjectUrl, avatarMissing, avatarLoading, refreshAvatar, setAvatarMissing } = useProfileAvatar(session.accessToken);
+  const hasAvatar = !avatarMissing && Boolean(avatarObjectUrl);
+  const avatarBusy = avatarLoading || avatarUploading || avatarDeleting;
+  const unreadCount = notifications.filter((notification) => !notification.read).length;
+  const hasUnreadNotifications = unreadCount > 0;
+  const dropdownNotifications = notifications.slice(0, NOTIFICATION_DROPDOWN_LIMIT);
+  const filteredDrawerNotifications = useMemo(() => {
+    const query = notificationQuery.trim().toLowerCase();
+    return notifications.filter((notification) => {
+      if (notificationTab === 'unread' && notification.read) return false;
+      if (notificationTab === 'read' && !notification.read) return false;
+      if (!query) return true;
+      return [notification.title, notification.body, notification.categoryLabel ?? notification.category]
+        .join(' ')
+        .toLowerCase()
+        .includes(query);
+    });
+  }, [notificationQuery, notificationTab, notifications]);
+  const notificationTotalPages = Math.max(1, Math.ceil(filteredDrawerNotifications.length / NOTIFICATION_DRAWER_PAGE_SIZE));
+  const drawerNotifications = filteredDrawerNotifications.slice(
+    (notificationPage - 1) * NOTIFICATION_DRAWER_PAGE_SIZE,
+    notificationPage * NOTIFICATION_DRAWER_PAGE_SIZE,
+  );
+
+  useEffect(() => {
+    const handlePointerDown = (event: PointerEvent) => {
+      if (!profileRef.current?.contains(event.target as Node)) {
+        setProfileOpen(false);
+        setNotificationOpen(false);
+      }
+    };
+
+    window.addEventListener('pointerdown', handlePointerDown);
+    return () => window.removeEventListener('pointerdown', handlePointerDown);
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    fetch(`${NOTIFICATION_API_BASE_URL}/notifications?appKey=LMS&audience=instructor&page=1&pageSize=100`, {
+      headers: {
+        Authorization: `Bearer ${session.accessToken}`,
+      },
+    })
+      .then((response) => (response.ok ? response.json() : null))
+      .then((payload: { notifications?: NotificationMessage[] } | null) => {
+        if (!cancelled) {
+          setNotifications((payload?.notifications ?? []).map((notification) => ({ ...notification, read: Boolean(notification.read) })));
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setNotifications([]);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [session.accessToken]);
+
+  useEffect(() => {
+    setNotificationPage(1);
+  }, [notificationQuery, notificationTab]);
+
+  useEffect(() => {
+    if (notificationPage > notificationTotalPages) setNotificationPage(notificationTotalPages);
+  }, [notificationPage, notificationTotalPages]);
+
+  useEffect(() => {
+    const socket: Socket = io(CHAT_SOCKET_BASE_URL, {
+      auth: { token: session.accessToken },
+      transports: ['websocket', 'polling'],
+    });
+
+    const handleMessageCreated = (payload: ChatNotificationPayload) => {
+      if (payload.senderType === 'STUDENT' && !chatOpen) setHasUnreadChat(true);
+    };
+
+    socket.on('chat.message.created', handleMessageCreated);
+
+    return () => {
+      socket.off('chat.message.created', handleMessageCreated);
+      socket.disconnect();
+    };
+  }, [chatOpen, session.accessToken]);
+
+  useEffect(() => {
+    if (chatOpen) setHasUnreadChat(false);
+  }, [chatOpen]);
+
+  const handleNotificationClick = () => {
+    setNotificationOpen((current) => !current);
+    setProfileOpen(false);
+    setChatOpen(false);
+    setNotificationDrawerOpen(false);
+  };
+
+  const handleChatClick = () => {
+    setChatOpen((current) => !current);
+    setHasUnreadChat(false);
+    setNotificationOpen(false);
+    setNotificationDrawerOpen(false);
+    setProfileOpen(false);
+  };
+
+  useEffect(() => {
+    if (!chatThreadId) return;
+    setChatOpen(true);
+    setHasUnreadChat(false);
+    setNotificationOpen(false);
+    setNotificationDrawerOpen(false);
+    setProfileOpen(false);
+  }, [chatThreadId, chatThreadRequestId]);
+
+  const handleOpenNotificationDrawer = () => {
+    setNotificationDrawerOpen(true);
+    setNotificationOpen(false);
+    setChatOpen(false);
+    setProfileOpen(false);
+  };
+
+  const handleMarkAllNotificationsRead = async () => {
+    if (!session.accessToken || unreadCount === 0) return;
+
+    try {
+      const response = await fetch(`${NOTIFICATION_API_BASE_URL}/notifications/read-all`, {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${session.accessToken}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          appKey: 'LMS',
+          audience: 'instructor',
+        }),
+      });
+
+      if (!response.ok) throw new Error('mark_read_failed');
+      setNotifications((current) => current.map((notification) => ({ ...notification, read: true })));
+    } catch {
+      // 다음 조회에서 서버 상태와 다시 동기화된다.
+    }
+  };
+
+  const handleMarkNotificationRead = async (notificationId: string) => {
+    const target = notifications.find((notification) => notification.id === notificationId);
+    if (!session.accessToken || !target || target.read) return;
+
+    setNotifications((current) =>
+      current.map((notification) => (notification.id === notificationId ? { ...notification, read: true } : notification)),
+    );
+
+    try {
+      const response = await fetch(`${NOTIFICATION_API_BASE_URL}/notifications/${notificationId}/read`, {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${session.accessToken}`,
+        },
+      });
+
+      if (!response.ok) throw new Error('mark_read_failed');
+    } catch {
+      setNotifications((current) =>
+        current.map((notification) => (notification.id === notificationId ? { ...notification, read: false } : notification)),
+      );
+    }
+  };
+
+  const handleAvatarSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    event.target.value = '';
+    if (!file) return;
+
+    setAvatarUploading(true);
+
+    try {
+      const imageBlob = await resizeImageToWebp(file, 128);
+      await uploadProfileAvatar(session.accessToken, imageBlob);
+      refreshAvatar();
+      notifyProfileAvatarUpdated();
+      showToast({ title: '프로필 이미지가 변경되었습니다.', variant: 'success' });
+    } catch (error) {
+      showToast({
+        title: '프로필 이미지 변경 실패',
+        message: error instanceof Error ? error.message : '이미지를 다시 확인해주세요.',
+        variant: 'error',
+      });
+    } finally {
+      setAvatarUploading(false);
+    }
+  };
+
+  const handleAvatarDelete = async () => {
+    setAvatarDeleting(true);
+
+    try {
+      await deleteProfileAvatar(session.accessToken);
+      setAvatarMissing(true);
+      notifyProfileAvatarDeleted();
+      setAvatarDeleteConfirmOpen(false);
+      showToast({ title: '프로필 이미지가 삭제되었습니다.', variant: 'success' });
+    } catch {
+      showToast({ title: '프로필 이미지 삭제 실패', message: '잠시 후 다시 시도해주세요.', variant: 'error' });
+    } finally {
+      setAvatarDeleting(false);
+    }
+  };
+
+  return (
+    <div className="relative min-h-screen overflow-hidden bg-[#f7f9ff] text-[#111827]">
+      <div className="pointer-events-none fixed inset-x-0 top-0 h-[260px] bg-[radial-gradient(circle_at_42%_36%,rgba(124,58,237,0.13),transparent_22%),radial-gradient(circle_at_80%_28%,rgba(37,99,235,0.12),transparent_24%),linear-gradient(180deg,rgba(239,246,255,0.94)_0%,rgba(247,249,255,0)_100%)] lg:left-[252px]" />
+      <div className="pointer-events-none fixed inset-x-0 bottom-0 h-[420px] bg-[linear-gradient(0deg,rgba(124,58,237,0.14)_0%,rgba(167,139,250,0.07)_44%,rgba(247,249,255,0)_100%)] lg:left-[252px]" />
+      <div className="pointer-events-none fixed right-[8%] top-[78px] h-2 w-2 rounded-full bg-[#93c5fd]/70" />
+      <div className="pointer-events-none fixed left-[53%] top-[92px] h-3 w-3 rounded-full bg-[#c4b5fd]/70" />
+
+      <header className="fixed right-0 top-0 z-40 flex h-[60px] items-center border-b border-[#94a3b8]/55 bg-white/[0.04] shadow-[inset_0_1px_0_rgba(255,255,255,0.28)] backdrop-blur-[4px] lg:left-[252px]">
+        <div className="min-w-0 flex-1" />
+
+        <div className="relative flex h-full items-center gap-2 px-6" ref={profileRef}>
+          <button
+            className={`icon-ripple-button relative grid h-9 w-9 cursor-pointer place-items-center rounded-md ${
+              notificationOpen ? 'text-[#4f46e5]' : 'text-[#64748b] hover:text-[#111827]'
+            }`}
+            type="button"
+            aria-label="알림"
+            aria-expanded={notificationOpen}
+            onClick={handleNotificationClick}
+          >
+            <Bell
+              size={17}
+              aria-hidden="true"
+              className={notificationOpen ? 'fill-[#4f46e5] stroke-[#4f46e5]' : ''}
+            />
+            {hasUnreadNotifications ? <span className="absolute right-2 top-2 h-1.5 w-1.5 rounded-full bg-[#e11d48]" /> : null}
+          </button>
+
+          {notificationOpen ? (
+            <div className="absolute right-[176px] top-[48px] w-[360px] overflow-hidden rounded-lg border border-[#dfe5ee] bg-white shadow-[0_18px_50px_rgba(15,23,42,0.14)]">
+              <div className="border-b border-[#cbd5e1] px-4 py-3">
+                <div className="flex items-center justify-between">
+                  <p className="text-[13px] font-black text-[#111827]">알림</p>
+                  <span className="text-[11px] font-bold text-[#64748b]">안읽음 {unreadCount}건</span>
+                </div>
+                <div className="mt-3 flex items-center justify-end gap-2">
+                  <button
+                    className="inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-md border border-[#dbe3ef] px-2.5 text-[11px] font-bold text-[#64748b] hover:bg-[#f8fafc] hover:text-[#111827] disabled:cursor-default disabled:opacity-40"
+                    type="button"
+                    disabled={unreadCount === 0}
+                    onClick={() => void handleMarkAllNotificationsRead()}
+                  >
+                    <CheckCheck size={13} aria-hidden="true" />
+                    모두 읽음
+                  </button>
+                  <button
+                    className="h-7 cursor-pointer rounded-md border border-[#c7d2fe] bg-[#eef2ff] px-2.5 text-[11px] font-black text-[#4f46e5] hover:bg-[#e0e7ff]"
+                    type="button"
+                    onClick={handleOpenNotificationDrawer}
+                  >
+                    전체 보기
+                  </button>
+                </div>
+              </div>
+              <div className="max-h-[320px] overflow-y-auto pb-3">
+                {dropdownNotifications.length > 0 ? (
+                  dropdownNotifications.map((notification, index) => (
+                    <NotificationRow
+                      key={notification.id}
+                      notification={notification}
+                      bordered={index < dropdownNotifications.length - 1}
+                      onClick={() => void handleMarkNotificationRead(notification.id)}
+                    />
+                  ))
+                ) : (
+                  <div className="px-4 py-8 text-center">
+                    <p className="text-[13px] font-bold text-[#64748b]">표시할 알림이 없습니다.</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          ) : null}
+
+          <button
+            className={`icon-ripple-button relative grid h-9 w-9 cursor-pointer place-items-center rounded-md ${
+              chatOpen || hasUnreadChat ? 'text-[#2563eb]' : 'text-[#64748b] hover:text-[#111827]'
+            }`}
+            type="button"
+            aria-label="강사 채팅"
+            aria-expanded={chatOpen}
+            onClick={handleChatClick}
+          >
+            <MessageCircle
+              size={17}
+              aria-hidden="true"
+              className={[
+                chatOpen || hasUnreadChat ? 'fill-[#2563eb] stroke-[#2563eb] text-white' : '',
+                hasUnreadChat && !chatOpen ? 'icon-chat-blink' : ''
+              ].join(' ')}
+            />
+          </button>
+
+          <button
+            className="flex h-10 items-center gap-1.5 rounded-md px-2 text-left hover:bg-[#f8fafc] cursor-pointer"
+            type="button"
+            aria-expanded={profileOpen}
+            onClick={() => setProfileOpen((current) => !current)}
+          >
+            <div className="hidden min-w-0 text-right sm:block">
+              <p className="truncate text-[13px] font-extrabold text-[#1f2937]">
+                {displayName} <span className="font-semibold text-[#64748b]">님</span>
+              </p>
+            </div>
+            <ChevronDown className={`text-[#94a3b8] transition-transform ${profileOpen ? 'rotate-180' : ''}`} size={14} aria-hidden="true" />
+          </button>
+
+          {profileOpen ? (
+            <div className="absolute right-6 top-[48px] w-[292px] overflow-hidden rounded-lg border border-[#dfe5ee] bg-white shadow-[0_18px_50px_rgba(15,23,42,0.14)]">
+              <div className="border-b border-[#cbd5e1] px-4 py-4">
+                <div className="flex items-center gap-3">
+                  <div className="relative h-12 w-12 shrink-0">
+                    <span className="grid h-full w-full place-items-center overflow-hidden rounded-full border border-[#dbe3ef] bg-[#2563eb] text-[15px] font-extrabold text-white">
+                      {hasAvatar ? (
+                        <img
+                          src={avatarObjectUrl ?? undefined}
+                          alt=""
+                          className="h-full w-full object-cover"
+                          onError={() => setAvatarMissing(true)}
+                        />
+                      ) : (
+                        displayName.slice(0, 1)
+                      )}
+                    </span>
+                    {avatarBusy ? (
+                      <span className="absolute inset-0 grid place-items-center rounded-full bg-white/65 text-[#2563eb] backdrop-blur-[2px]">
+                        <Loader2 size={16} className="animate-spin" aria-hidden="true" />
+                      </span>
+                    ) : null}
+                    <input ref={avatarInputRef} type="file" accept="image/*" className="hidden" onChange={handleAvatarSelect} />
+                    <button
+                      type="button"
+                      className="absolute bottom-0 right-0 z-10 grid h-6 w-6 translate-x-1 translate-y-1 cursor-pointer place-items-center rounded-full border border-white bg-[#2563eb] text-white shadow-[0_8px_18px_rgba(37,99,235,0.28)] transition hover:bg-[#1d4ed8] disabled:cursor-not-allowed disabled:opacity-60"
+                      disabled={avatarBusy}
+                      onClick={() => avatarInputRef.current?.click()}
+                      aria-label="프로필 이미지 등록"
+                    >
+                      <Camera size={12} aria-hidden="true" />
+                    </button>
+                    {hasAvatar ? (
+                      <button
+                        type="button"
+                        className="absolute right-0 top-0 z-10 grid h-6 w-6 translate-x-1 -translate-y-1 cursor-pointer place-items-center rounded-full border border-white bg-[#fff1f2] text-[#e11d48] shadow-[0_8px_18px_rgba(225,29,72,0.18)] transition hover:bg-[#ffe4e6] disabled:cursor-not-allowed disabled:opacity-60"
+                        disabled={avatarBusy}
+                        onClick={() => setAvatarDeleteConfirmOpen(true)}
+                        aria-label="프로필 이미지 삭제"
+                      >
+                        <Trash2 size={12} aria-hidden="true" />
+                      </button>
+                    ) : null}
+                  </div>
+                  <div className="min-w-0">
+                    <p className="truncate text-[14px] font-black text-[#111827]">{displayName}</p>
+                  </div>
+                </div>
+
+	                <div className="mt-4 grid gap-2 text-[12px] font-bold text-[#64748b]">
+	                  <ProfileMeta icon={Building2} label={affiliation} />
+	                  <ProfileMeta icon={ShieldCheck} label={roleLabel} />
+	                </div>
+                  <label className="mt-4 block">
+                    <span className="text-[11px] font-black text-[#64748b]">강좌 선택</span>
+                    <select
+                      className="mt-1 h-9 w-full rounded-md border border-[#d1d9e6] bg-white px-3 text-[12px] font-bold text-[#111827] outline-none transition focus:border-[#2563eb]"
+                      value={selectedCourseId}
+                      onChange={(event) => onSelectCourse(event.target.value)}
+                    >
+                      {courses.length ? courses.map((course) => (
+                        <option key={course.id} value={course.id}>
+                          {course.title}
+                        </option>
+                      )) : (
+                        <option value="">등록된 강좌 없음</option>
+                      )}
+                    </select>
+                  </label>
+	              </div>
+
+              <div className="p-2">
+                <ProfileAction
+                  icon={Settings}
+                  label="설정"
+                  onClick={() => {
+                    setProfileOpen(false);
+                    onNavigate('settings');
+                  }}
+                />
+                <ProfileAction icon={LogOut} label="로그아웃" danger onClick={onLogout} />
+              </div>
+            </div>
+          ) : null}
+
+        </div>
+      </header>
+
+      <ConfirmDialog
+        open={avatarDeleteConfirmOpen}
+        title="프로필 이미지 삭제"
+        message="등록된 썸네일 이미지를 삭제하시겠습니까?"
+        confirmLabel="삭제"
+        loading={avatarDeleting}
+        danger
+        icon={Trash2}
+        onCancel={() => setAvatarDeleteConfirmOpen(false)}
+        onConfirm={() => void handleAvatarDelete()}
+      />
+
+      <InstructorChatPanel
+        session={session}
+        open={chatOpen}
+        initialThreadId={chatThreadId}
+        initialThreadRequestId={chatThreadRequestId}
+        onClose={() => setChatOpen(false)}
+      />
+      <NotificationDrawer
+        notifications={drawerNotifications}
+        filteredCount={filteredDrawerNotifications.length}
+        notificationPage={notificationPage}
+        notificationTab={notificationTab}
+        notificationTotalPages={notificationTotalPages}
+        notificationQuery={notificationQuery}
+        open={notificationDrawerOpen}
+        unreadCount={unreadCount}
+        readCount={notifications.length - unreadCount}
+        onClose={() => setNotificationDrawerOpen(false)}
+        onMarkAllRead={() => void handleMarkAllNotificationsRead()}
+        onMarkRead={(notificationId) => void handleMarkNotificationRead(notificationId)}
+        onPageChange={setNotificationPage}
+        onQueryChange={setNotificationQuery}
+        onTabChange={setNotificationTab}
+      />
+
+      <aside className="fixed bottom-0 left-0 top-0 z-50 hidden w-[252px] overflow-hidden bg-[linear-gradient(180deg,#071126_0%,#0b1630_56%,#101a3a_100%)] text-white lg:flex lg:flex-col">
+        <div className="flex h-[82px] items-center gap-3 px-5">
+          <img className="h-8 w-8 rounded-md object-contain" src={autonomyLogo} alt="" />
+          <div className="min-w-0">
+            <p className="truncate text-[16px] font-black tracking-[0] text-white">Autonomy <span className="text-[#67e8f9]">Studio</span></p>
+            <p className="text-[11px] font-semibold leading-tight text-white/68">Instructor Portal</p>
+          </div>
+        </div>
+
+        <nav className="flex-1 space-y-2 px-5 py-3">
+          {navItems.map((item) => {
+            const Icon = item.icon;
+            const active = item.id === route;
+            return (
+              <div key={item.id}>
+                <button
+                  className={`flex h-11 w-full items-center rounded-lg px-4 text-left text-[13px] transition ${
+                    active
+                      ? 'bg-[linear-gradient(135deg,#6366f1_0%,#7c3aed_100%)] font-black text-white shadow-[0_12px_28px_rgba(79,70,229,0.32)]'
+                      : 'font-bold text-white/72 hover:bg-white/8 hover:text-white'
+                  }`}
+                  type="button"
+                  onClick={() => onNavigate(item.id)}
+                >
+                  <span className="flex min-w-0 items-center gap-3">
+                    <Icon className={active ? 'text-white' : 'text-white/72'} size={16} aria-hidden="true" />
+                    {item.label}
+                  </span>
+                </button>
+              </div>
+            );
+          })}
+        </nav>
+
+        <div className="px-5 pb-5">
+          <div className="rounded-lg border border-white/10 bg-white/8 p-3 shadow-[0_18px_46px_rgba(0,0,0,0.16)] backdrop-blur">
+            <div className="mb-3 flex items-start gap-2.5">
+              <span className="grid h-7 w-7 shrink-0 place-items-center rounded-md bg-white/12 text-[#8b5cf6]">
+                <BookOpenText size={15} aria-hidden="true" />
+              </span>
+              <div className="min-w-0">
+                <p className="text-[12px] font-black text-white">도움이 필요하신가요?</p>
+                <p className="mt-1 text-[11px] font-bold leading-5 text-white/62">가이드를 확인하거나 문의해 보세요.</p>
+              </div>
+            </div>
+
+            <button className="flex h-8 w-full items-center justify-center gap-2 rounded-md bg-white/10 text-[12px] font-bold text-[#a78bfa] hover:bg-white/14" type="button">
+              가이드 보기
+              <ExternalLink size={13} aria-hidden="true" />
+            </button>
+          </div>
+        </div>
+      </aside>
+
+      <main className="relative min-w-0 lg:pl-[252px]">
+        <div className="relative px-6 pb-24 pt-[100px] lg:px-12 lg:pb-32">{children}</div>
+      </main>
+    </div>
+  );
+}
+
+function getDisplayName(session: AuthSession): string {
+  const name = session.user.name?.trim();
+  if (name && name !== 'ATNMY Studio Admin') return name;
+  return session.user.email.split('@')[0] || '강사';
+}
+
+function getAffiliation(session: AuthSession): string {
+  const affiliation = session.user.primaryAffiliation;
+  if (!affiliation) return '소속 미지정';
+
+  return [affiliation.organizationName, affiliation.department, affiliation.position].filter(Boolean).join(' · ');
+}
+
+function getRoleLabel(role: string): string {
+  const normalized = role.toUpperCase();
+  if (normalized === 'LMS_ADMIN') return '관리자';
+  if (normalized === 'INSTRUCTOR') return '강사';
+  return role;
+}
+
+function NotificationDrawer({
+  filteredCount,
+  notificationPage,
+  notificationQuery,
+  notificationTab,
+  notificationTotalPages,
+  notifications,
+  open,
+  readCount,
+  unreadCount,
+  onClose,
+  onMarkAllRead,
+  onMarkRead,
+  onPageChange,
+  onQueryChange,
+  onTabChange,
+}: {
+  filteredCount: number;
+  notificationPage: number;
+  notificationQuery: string;
+  notificationTab: 'unread' | 'read';
+  notificationTotalPages: number;
+  notifications: NotificationMessage[];
+  open: boolean;
+  readCount: number;
+  unreadCount: number;
+  onClose: () => void;
+  onMarkAllRead: () => void;
+  onMarkRead: (notificationId: string) => void;
+  onPageChange: React.Dispatch<React.SetStateAction<number>>;
+  onQueryChange: (query: string) => void;
+  onTabChange: (tab: 'unread' | 'read') => void;
+}) {
+  if (!open) return null;
+
+  return (
+    <aside className="fixed bottom-0 right-0 top-[60px] z-30 flex w-full max-w-[420px] flex-col border-l border-[#cbd5e1] bg-white/94 shadow-[0_22px_70px_rgba(15,23,42,0.18)] backdrop-blur-md">
+      <header className="flex h-[72px] shrink-0 items-center justify-between border-b border-[#cbd5e1] px-5">
+        <div>
+          <h2 className="text-[16px] font-black text-[#0f172a]">전체 알림</h2>
+          <p className="mt-1 text-[12px] font-bold text-[#64748b]">최근 알림을 확인하고 읽음 처리합니다.</p>
+        </div>
+        <button className="grid h-9 w-9 place-items-center rounded-md text-[#64748b] hover:bg-[#f8fafc] hover:text-[#111827]" type="button" aria-label="알림 닫기" title="알림 닫기" onClick={onClose}>
+          <X size={17} aria-hidden="true" />
+        </button>
+      </header>
+
+      <div className="shrink-0 border-b border-[#cbd5e1] px-5 py-4">
+        <div className="flex items-center gap-2">
+          <div className="relative min-w-0 flex-1">
+            <Search className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[#94a3b8]" size={15} aria-hidden="true" />
+            <input
+              className="h-9 w-full rounded-md border border-[#dbe3ef] bg-white pl-9 pr-3 text-[13px] font-bold text-[#111827] outline-none placeholder:text-[#94a3b8] focus:border-[#a5b4fc]"
+              value={notificationQuery}
+              placeholder="알림 검색"
+              onChange={(event) => onQueryChange(event.target.value)}
+            />
+          </div>
+          <button
+            className="inline-flex h-9 shrink-0 cursor-pointer items-center gap-1.5 rounded-md border border-[#dbe3ef] px-3 text-[12px] font-bold text-[#64748b] hover:bg-[#f8fafc] hover:text-[#111827] disabled:cursor-default disabled:opacity-40"
+            type="button"
+            disabled={unreadCount === 0}
+            onClick={onMarkAllRead}
+          >
+            <CheckCheck size={14} aria-hidden="true" />
+            모두 읽음
+          </button>
+        </div>
+
+        <div className="mt-3 flex items-center justify-between">
+          <div className="inline-flex rounded-md border border-[#dbe3ef] bg-[#f8fafc] p-1">
+            {(['unread', 'read'] as const).map((tab) => (
+              <button
+                key={tab}
+                className={`h-8 cursor-pointer rounded px-3 text-[12px] font-black transition ${
+                  notificationTab === tab ? 'bg-white text-[#4f46e5] shadow-[0_6px_16px_rgba(15,23,42,0.08)]' : 'text-[#64748b] hover:text-[#111827]'
+                }`}
+                type="button"
+                onClick={() => onTabChange(tab)}
+              >
+                {tab === 'unread' ? `안 읽음 ${unreadCount}` : `읽음 ${readCount}`}
+              </button>
+            ))}
+          </div>
+          <span className="text-[11px] font-bold text-[#94a3b8]">{filteredCount}건</span>
+        </div>
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto px-4 pb-6 pt-4">
+        {notifications.length > 0 ? (
+          <div className="overflow-hidden rounded-lg border border-[#c7d2e0] bg-white shadow-[0_10px_28px_rgba(15,23,42,0.05)]">
+            {notifications.map((notification, index) => (
+              <NotificationRow
+                key={notification.id}
+                notification={notification}
+                bordered={index < notifications.length - 1}
+                onClick={() => onMarkRead(notification.id)}
+              />
+            ))}
+          </div>
+        ) : (
+          <div className="flex h-full items-center justify-center rounded-lg border border-dashed border-[#cbd5e1] bg-white/58 px-6 text-center">
+            <p className="text-[13px] font-bold text-[#64748b]">표시할 알림이 없습니다.</p>
+          </div>
+        )}
+      </div>
+
+      <footer className="flex h-[54px] shrink-0 items-center justify-between border-t border-[#cbd5e1] px-5">
+        <span className="text-[12px] font-bold text-[#94a3b8]">
+          {notificationPage}/{notificationTotalPages}
+        </span>
+        <div className="flex items-center gap-2">
+          <button
+            className="grid h-8 w-8 cursor-pointer place-items-center rounded-md border border-[#dbe3ef] text-[#64748b] hover:bg-[#f8fafc] hover:text-[#111827] disabled:cursor-default disabled:opacity-35 disabled:hover:bg-transparent"
+            type="button"
+            aria-label="이전 페이지"
+            disabled={notificationPage <= 1}
+            onClick={() => onPageChange((page) => Math.max(1, page - 1))}
+          >
+            <ChevronLeft size={16} aria-hidden="true" />
+          </button>
+          <button
+            className="grid h-8 w-8 cursor-pointer place-items-center rounded-md border border-[#dbe3ef] text-[#64748b] hover:bg-[#f8fafc] hover:text-[#111827] disabled:cursor-default disabled:opacity-35 disabled:hover:bg-transparent"
+            type="button"
+            aria-label="다음 페이지"
+            disabled={notificationPage >= notificationTotalPages}
+            onClick={() => onPageChange((page) => Math.min(notificationTotalPages, page + 1))}
+          >
+            <ChevronRight size={16} aria-hidden="true" />
+          </button>
+        </div>
+      </footer>
+    </aside>
+  );
+}
+
+function NotificationRow({ notification, bordered, onClick }: { notification: NotificationMessage; bordered: boolean; onClick: () => void }) {
+  return (
+    <button
+      className={`block w-full cursor-pointer px-4 py-3 text-left transition hover:bg-[#f8fafc] ${bordered ? 'border-b border-[#cbd5e1]' : ''} ${
+        notification.read ? 'opacity-70' : ''
+      }`}
+      type="button"
+      onClick={onClick}
+    >
+      <div className="mb-1.5 flex items-center justify-between gap-3">
+        <div className="flex min-w-0 items-center gap-2">
+          {!notification.read ? <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-[#4f46e5]" /> : null}
+          <span
+            className={`rounded-full px-2 py-0.5 text-[10px] font-black uppercase tracking-[0.02em] ${
+              notification.read ? 'bg-[#f1f5f9] text-[#94a3b8]' : 'bg-[#eef2ff] text-[#4f46e5]'
+            }`}
+          >
+            {notification.categoryLabel ?? notification.category}
+          </span>
+        </div>
+        <span className="shrink-0 text-[11px] font-bold text-[#94a3b8]">{notification.date}</span>
+      </div>
+      <p className={`text-[13px] leading-5 ${notification.read ? 'font-bold text-[#64748b]' : 'font-black text-[#111827]'}`}>{notification.title}</p>
+      <p className={`mt-1 text-[12px] font-semibold leading-5 ${notification.read ? 'text-[#94a3b8]' : 'text-[#64748b]'}`}>{notification.body}</p>
+    </button>
+  );
+}
+
+function ProfileMeta({ icon: Icon, label }: { icon: LucideIcon; label: string }) {
+  return (
+    <div className="flex min-w-0 items-center gap-2">
+      <Icon className="shrink-0 text-[#94a3b8]" size={14} aria-hidden="true" />
+      <span className="truncate">{label}</span>
+    </div>
+  );
+}
+
+function ProfileAction({ icon: Icon, label, danger = false, onClick }: { icon: LucideIcon; label: string; danger?: boolean; onClick: () => void }) {
+  return (
+    <button
+      className={`flex h-9 w-full items-center gap-3 rounded-md px-3 text-left text-[13px] font-bold ${
+        danger ? 'text-[#e11d48] hover:bg-[#fff1f2]' : 'text-[#111827] hover:bg-[#f8fafc]'
+      }`}
+      type="button"
+      onClick={onClick}
+    >
+      <Icon size={15} aria-hidden="true" />
+      {label}
+    </button>
+  );
+}
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
new file mode 100644
index 0000000..fbc9319
--- /dev/null
+++ b/src/lib/auth.ts
@@ -0,0 +1,167 @@
+import type { AuthAppRole, AuthSession } from '../types/auth';
+
+const AUTH_BASE_URL = (import.meta.env.VITE_ATNMY_AUTH_URL ?? import.meta.env.VITE_ADS_IDE_AUTH_URL ?? 'http://localhost:4100').replace(/\/+$/, '');
+const ADMIN_SESSION_STORAGE_KEY = 'atnmy.lms.admin.auth.session';
+const INSTRUCTOR_ROLES = new Set(['INSTRUCTOR', 'LMS_ADMIN']);
+
+export const isInstructorSession = (session: AuthSession): boolean => {
+  const roles = new Set(getSessionRoles(session));
+  return [...INSTRUCTOR_ROLES].some((role) => roles.has(role));
+};
+
+const getSessionRoles = (session: AuthSession): string[] => {
+  return [
+    session.user.role,
+    ...(session.user.roles ?? []),
+    ...(session.roles ?? []),
+    ...getAppRoleCodes(session.user.appRoles),
+    ...getAppRoleCodes(session.user.app_roles),
+    ...getAppRoleCodes(session.appRoles),
+    ...getAppRoleCodes(session.app_roles),
+  ]
+    .filter((role): role is string => Boolean(role))
+    .map((role) => role.toUpperCase());
+};
+
+const getAppRoleCodes = (roles: AuthAppRole[] | undefined): string[] => {
+  if (!Array.isArray(roles)) return [];
+
+  return roles
+    .filter((role) => {
+      const appKey = role.appKey ?? role.app_key;
+      return !appKey || appKey.toUpperCase() === 'LMS';
+    })
+    .map((role) => role.roleCode ?? role.role_code ?? role.role ?? role.code)
+    .filter((role): role is string => Boolean(role));
+};
+
+export const loadStoredSession = (): AuthSession | null => {
+  try {
+    const raw = window.localStorage.getItem(ADMIN_SESSION_STORAGE_KEY);
+    if (!raw) return null;
+
+    const session = JSON.parse(raw) as AuthSession;
+    if (!isInstructorSession(session) || isStoredSessionExpired(session)) {
+      clearStoredSession();
+      return null;
+    }
+
+    return session;
+  } catch {
+    return null;
+  }
+};
+
+export const storeSession = (session: AuthSession): void => {
+  window.localStorage.setItem(ADMIN_SESSION_STORAGE_KEY, JSON.stringify({
+    ...session,
+    obtainedAt: session.obtainedAt ?? Date.now(),
+  }));
+};
+
+export const clearStoredSession = (): void => {
+  window.localStorage.removeItem(ADMIN_SESSION_STORAGE_KEY);
+};
+
+export const isStoredSessionExpired = (session: AuthSession): boolean => {
+  const obtainedAt = session.obtainedAt ?? 0;
+  if (!obtainedAt) return false;
+
+  if (session.refreshToken && session.refreshTokenExpiresIn) {
+    return Date.now() >= obtainedAt + session.refreshTokenExpiresIn * 1000;
+  }
+
+  return Date.now() >= obtainedAt + (session.accessTokenExpiresIn ?? 0) * 1000;
+};
+
+export const loginInstructor = async (email: string, password: string): Promise<AuthSession> => {
+  const response = await fetch(`${AUTH_BASE_URL}/auth/login`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include',
+    body: JSON.stringify({ email, password })
+  });
+
+  if (!response.ok) {
+    throw new Error(response.status === 429 ? '로그인 시도가 너무 많습니다. 잠시 후 다시 시도해주세요.' : '이메일 또는 비밀번호를 확인해주세요.');
+  }
+
+  const session = {
+    ...(await response.json()) as AuthSession,
+    obtainedAt: Date.now(),
+  };
+  if (!isInstructorSession(session)) {
+    clearStoredSession();
+    throw new Error('강사 계정만 로그인할 수 있습니다.');
+  }
+
+  storeSession(session);
+  return session;
+};
+
+export const refreshInstructorSession = async (session: AuthSession): Promise<AuthSession> => {
+  if (!session.refreshToken) {
+    throw new Error('리프레시 토큰이 없습니다.');
+  }
+
+  const response = await fetch(`${AUTH_BASE_URL}/auth/refresh`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include',
+    body: JSON.stringify({ refreshToken: session.refreshToken })
+  });
+
+  if (!response.ok) {
+    throw new Error('세션을 갱신하지 못했습니다.');
+  }
+
+  const nextSession = {
+    ...(await response.json()) as AuthSession,
+    obtainedAt: Date.now(),
+  };
+
+  if (!isInstructorSession(nextSession)) {
+    clearStoredSession();
+    throw new Error('강사 계정만 로그인할 수 있습니다.');
+  }
+
+  storeSession(nextSession);
+  return nextSession;
+};
+
+export const refreshCurrentUser = async (session: AuthSession): Promise<AuthSession> => {
+  const response = await fetch(`${AUTH_BASE_URL}/auth/me`, {
+    headers: {
+      Authorization: `Bearer ${session.accessToken}`
+    }
+  });
+
+  if (!response.ok) {
+    throw new Error('사용자 정보를 다시 가져오지 못했습니다.');
+  }
+
+  const payload = (await response.json()) as { user?: AuthSession['user'] };
+  const nextSession = {
+    ...session,
+    user: payload.user ?? session.user
+  };
+
+  if (!isInstructorSession(nextSession)) {
+    clearStoredSession();
+    throw new Error('강사 계정만 로그인할 수 있습니다.');
+  }
+
+  storeSession(nextSession);
+  return nextSession;
+};
+
+export const logoutInstructor = async (): Promise<void> => {
+  try {
+    await fetch(`${AUTH_BASE_URL}/auth/logout`, {
+      method: 'POST',
+      credentials: 'include'
+    });
+  } finally {
+    clearStoredSession();
+  }
+};
diff --git a/src/lib/chat.ts b/src/lib/chat.ts
new file mode 100644
index 0000000..26f0b0e
--- /dev/null
+++ b/src/lib/chat.ts
@@ -0,0 +1,129 @@
+export type ChatSenderType = 'STUDENT' | 'AI' | 'INSTRUCTOR' | 'SYSTEM' | string;
+
+export type InstructorChatMessage = {
+  id: string;
+  senderType: ChatSenderType;
+  senderName?: string;
+  senderAvatarUrl?: string | null;
+  content: string;
+  createdAt?: string;
+};
+
+export type InstructorChatThread = {
+  id: string;
+  title: string;
+  studentName: string;
+  studentAvatarUrl?: string | null;
+  groupName?: string;
+  week?: number | string;
+  status: string;
+  lastMessage: string;
+  lastMessageAt?: string;
+  messages: InstructorChatMessage[];
+};
+
+const CHAT_API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:4400/api').replace(/\/+$/, '');
+export const CHAT_SOCKET_BASE_URL = CHAT_API_BASE_URL.replace(/\/api$/, '');
+
+type ChatThreadsPayload = {
+  threads?: unknown[];
+  data?: unknown[];
+};
+
+export async function listInstructorChatThreads(accessToken: string, week?: number): Promise<InstructorChatThread[]> {
+  const params = new URLSearchParams();
+  if (week) params.set('week', String(week));
+  const queryString = params.toString();
+
+  const response = await fetch(`${CHAT_API_BASE_URL}/chat/instructor/threads${queryString ? `?${queryString}` : ''}`, {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`강사 채팅 목록을 불러오지 못했습니다. (${response.status})`);
+  }
+
+  const payload = (await response.json()) as ChatThreadsPayload | unknown[];
+  const items = Array.isArray(payload) ? payload : Array.isArray(payload?.threads) ? payload.threads : Array.isArray(payload?.data) ? payload.data : [];
+  return items.map(normalizeThread).filter((thread): thread is InstructorChatThread => Boolean(thread));
+}
+
+export async function getInstructorChatThread(accessToken: string, threadId: string): Promise<InstructorChatThread> {
+  const response = await fetch(`${CHAT_API_BASE_URL}/chat/instructor/threads/${threadId}`, {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`강사 채팅방을 불러오지 못했습니다. (${response.status})`);
+  }
+
+  const payload = await response.json();
+  const thread = normalizeThread(payload?.thread ?? payload);
+  if (!thread) throw new Error('강사 채팅방 응답이 올바르지 않습니다.');
+
+  return thread;
+}
+
+export async function createInstructorChatMessage(accessToken: string, threadId: string, content: string): Promise<InstructorChatThread> {
+  const response = await fetch(`${CHAT_API_BASE_URL}/chat/instructor/threads/${threadId}/messages`, {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ content }),
+  });
+
+  if (!response.ok) {
+    throw new Error(`강사 답변을 저장하지 못했습니다. (${response.status})`);
+  }
+
+  const payload = await response.json();
+  const thread = normalizeThread(payload?.thread ?? payload);
+  if (!thread) throw new Error('강사 답변 응답이 올바르지 않습니다.');
+
+  return thread;
+}
+
+function normalizeThread(raw: unknown): InstructorChatThread | null {
+  if (!raw || typeof raw !== 'object') return null;
+  const item = raw as Record<string, any>;
+
+  const messages = Array.isArray(item.messages) ? item.messages.map(normalizeMessage).filter((message): message is InstructorChatMessage => Boolean(message)) : [];
+  const lastMessageFromList = messages.length > 0 ? messages[messages.length - 1]?.content : undefined;
+  const rawLastMessage = item.lastMessage?.content ?? item.lastMessageContent ?? item.lastMessage;
+  const studentName = item.student?.name ?? item.studentName ?? item.student?.email ?? item.studentEmail ?? item.studentId ?? '수강생';
+  const title = item.title ?? item.threadTitle ?? studentName;
+  const weekValue = typeof item.week === 'object' && item.week ? item.week.week : item.week;
+
+  return {
+    id: String(item.id ?? item.threadId ?? title),
+    title: String(title),
+    studentName: String(studentName),
+    studentAvatarUrl: typeof item.studentAvatarUrl === 'string' ? item.studentAvatarUrl : null,
+    groupName: item.group?.name ?? item.groupName ?? item.metadata?.groupName,
+    week: weekValue ?? item.weekId ?? item.metadata?.week,
+    status: String(item.status ?? 'WAITING_INSTRUCTOR'),
+    lastMessage: String(rawLastMessage ?? lastMessageFromList ?? '저장된 문의 내용을 확인해 주세요.'),
+    lastMessageAt: item.lastMessageAt ?? item.updatedAt ?? item.createdAt,
+    messages,
+  };
+}
+
+function normalizeMessage(raw: unknown): InstructorChatMessage | null {
+  if (!raw || typeof raw !== 'object') return null;
+  const item = raw as Record<string, any>;
+
+  return {
+    id: String(item.id ?? `${item.senderType ?? 'MESSAGE'}-${item.createdAt ?? item.content ?? 'unknown'}`),
+    senderType: String(item.senderType ?? 'STUDENT'),
+    senderName: item.senderName ?? item.sender?.name,
+    senderAvatarUrl: typeof item.senderAvatarUrl === 'string' ? item.senderAvatarUrl : null,
+    content: String(item.content ?? ''),
+    createdAt: item.createdAt,
+  };
+}
diff --git a/src/lib/courses.ts b/src/lib/courses.ts
new file mode 100644
index 0000000..dfe6a86
--- /dev/null
+++ b/src/lib/courses.ts
@@ -0,0 +1,26 @@
+export type InstructorCourse = {
+  id: string;
+  slug: string;
+  title: string;
+  subtitle?: string | null;
+  description?: string | null;
+  organizationName: string;
+  teacher?: {
+    id: string;
+    name?: string | null;
+    email: string;
+  };
+};
+
+const LMS_API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:4400/api').replace(/\/+$/, '');
+
+export async function listInstructorCourses(accessToken: string): Promise<{ courses: InstructorCourse[] }> {
+  const response = await fetch(`${LMS_API_BASE_URL}/instructor/courses`, {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+
+  if (!response.ok) throw new Error(`강좌 목록을 불러오지 못했습니다. (${response.status})`);
+  return response.json() as Promise<{ courses: InstructorCourse[] }>;
+}
diff --git a/src/lib/curriculum.ts b/src/lib/curriculum.ts
new file mode 100644
index 0000000..4cfe273
--- /dev/null
+++ b/src/lib/curriculum.ts
@@ -0,0 +1,275 @@
+export type CurriculumWeek = {
+  week: number;
+  title: string;
+  tags: string[];
+  progress: number;
+  state: string;
+  topics: string[];
+  duration: string;
+  github: string;
+  detail: {
+    overview: string;
+    learningSteps?: Array<{
+      title: string;
+      description: string;
+      videoEnabled?: boolean;
+      videoUrl?: string;
+      concepts?: string[];
+    }>;
+    topicDetails: string[];
+    topicVideoUrls?: string[];
+    practiceContents?: Array<{
+      title: string;
+      description: string;
+    }>;
+    references?: CurriculumReference[];
+    exampleCodes?: CurriculumReference[];
+    deliverable: string;
+    requiresSourceSubmission: boolean;
+  };
+  modules?: CurriculumModule[];
+  visualizationPlatforms?: CurriculumVisualizationPlatform[];
+};
+
+export type CurriculumModule = {
+  id: string;
+  sortOrder: number;
+  category: string;
+  name: string;
+  folderName: string;
+  templateRepositoryUrl?: string | null;
+  dockerImage?: string | null;
+  enabled?: boolean;
+};
+
+export type CurriculumReference = {
+  id: string;
+  kind?: string;
+  title: string;
+  description?: string | null;
+  fileName: string;
+  contentType?: string | null;
+  fileSizeBytes?: number | string | null;
+  week?: number | string | null;
+  weekNumber?: number | string | null;
+  downloadUrl: string;
+  createdAt?: string;
+};
+
+export type CurriculumVisualizationPlatform = {
+  key: string;
+  type: string;
+  displayName: string;
+  description?: string | null;
+  config?: unknown;
+};
+
+export type CurriculumTagOption = {
+  key: string;
+  label: string;
+};
+
+export type InstructorCurriculumResponse = {
+  course: {
+    id: string;
+    title: string;
+    subtitle?: string | null;
+    description?: string | null;
+    organizationName: string;
+  } | null;
+  weeks: CurriculumWeek[];
+  setting: {
+    groupId?: string | null;
+    activeWeek: number;
+    activeLearningStep?: string | null;
+  } | null;
+  tagOptions?: CurriculumTagOption[];
+  visualizationPlatforms?: CurriculumVisualizationPlatform[];
+};
+
+const LMS_API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:4400/api').replace(/\/+$/, '');
+
+export async function getInstructorCurriculum(accessToken: string, groupId?: string | null, courseId?: string | null): Promise<InstructorCurriculumResponse> {
+  const params = new URLSearchParams();
+  if (groupId) params.set('groupId', groupId);
+  if (courseId) params.set('courseId', courseId);
+  const query = params.toString() ? `?${params.toString()}` : '';
+  const response = await fetch(`${LMS_API_BASE_URL}/instructor/curriculum${query}`, {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+
+  if (!response.ok) throw new Error(`커리큘럼을 불러오지 못했습니다. (${response.status})`);
+  return response.json() as Promise<InstructorCurriculumResponse>;
+}
+
+export async function updateInstructorCurriculum(
+  accessToken: string,
+  input: {
+    courseId?: string | null;
+    groupId?: string | null;
+    activeWeek: number;
+    activeLearningStep?: string | null;
+    applyToStudents?: boolean;
+    completed?: boolean;
+    tagLabel?: string;
+    title?: string;
+    duration?: string;
+    overview?: string;
+    deliverable?: string;
+    requiresSourceSubmission?: boolean;
+    topics?: string[];
+    learningSteps?: Array<{
+      title?: string;
+      description?: string;
+      videoEnabled?: boolean;
+      videoUrl?: string;
+      concepts?: string[];
+    }>;
+    topicDetails?: string[];
+    topicVideoUrls?: string[];
+    practiceContents?: Array<{
+      title?: string;
+      description?: string;
+    }>;
+    disabledModuleIds?: string[];
+    visualizationPlatformKeys?: string[];
+  },
+): Promise<InstructorCurriculumResponse> {
+  const response = await fetch(`${LMS_API_BASE_URL}/instructor/curriculum`, {
+    method: 'PUT',
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify(input),
+  });
+
+  if (!response.ok) {
+    const payload = await response.json().catch((): null => null);
+    const message =
+      payload && typeof payload === 'object' && 'message' in payload
+        ? String(payload.message)
+        : `커리큘럼을 적용하지 못했습니다. (${response.status})`;
+    throw new Error(message);
+  }
+
+  return response.json() as Promise<InstructorCurriculumResponse>;
+}
+
+export async function deleteInstructorCurriculumWeek(
+  accessToken: string,
+  week: number,
+): Promise<InstructorCurriculumResponse> {
+  const response = await fetch(`${LMS_API_BASE_URL}/instructor/curriculum/weeks/${week}`, {
+    method: 'DELETE',
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+
+  if (!response.ok) {
+    const payload = await response.json().catch((): null => null);
+    const message =
+      payload && typeof payload === 'object' && 'message' in payload
+        ? String(payload.message)
+        : `주차를 삭제하지 못했습니다. (${response.status})`;
+    throw new Error(message);
+  }
+
+  return response.json() as Promise<InstructorCurriculumResponse>;
+}
+
+export async function uploadCurriculumReference(
+  accessToken: string,
+  input: {
+    courseId?: string | null;
+    week: number;
+    title?: string;
+    file: File;
+  },
+): Promise<InstructorCurriculumResponse> {
+  const formData = new FormData();
+  formData.set('file', input.file);
+  formData.set('courseId', input.courseId ?? '');
+  formData.set('title', input.title?.trim() || input.file.name);
+
+  const response = await fetch(`${LMS_API_BASE_URL}/instructor/curriculum/weeks/${input.week}/references`, {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+    body: formData,
+  });
+
+  if (!response.ok) {
+    const payload = await response.json().catch((): null => null);
+    const message =
+      payload && typeof payload === 'object' && 'message' in payload
+        ? String(payload.message)
+        : `참고자료를 업로드하지 못했습니다. (${response.status})`;
+    throw new Error(message);
+  }
+
+  return response.json() as Promise<InstructorCurriculumResponse>;
+}
+
+export async function uploadCurriculumExampleCode(
+  accessToken: string,
+  input: {
+    courseId?: string | null;
+    week: number;
+    title?: string;
+    file: File;
+  },
+): Promise<InstructorCurriculumResponse> {
+  const formData = new FormData();
+  formData.set('file', input.file);
+  formData.set('courseId', input.courseId ?? '');
+  formData.set('title', input.title?.trim() || input.file.name);
+
+  const response = await fetch(`${LMS_API_BASE_URL}/instructor/curriculum/weeks/${input.week}/example-codes`, {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+    body: formData,
+  });
+
+  if (!response.ok) {
+    const payload = await response.json().catch((): null => null);
+    const message =
+      payload && typeof payload === 'object' && 'message' in payload
+        ? String(payload.message)
+        : `예제 코드를 업로드하지 못했습니다. (${response.status})`;
+    throw new Error(message);
+  }
+
+  return response.json() as Promise<InstructorCurriculumResponse>;
+}
+
+export async function deleteCurriculumReference(
+  accessToken: string,
+  referenceId: string,
+  courseId?: string | null,
+): Promise<InstructorCurriculumResponse> {
+  const query = courseId ? `?courseId=${encodeURIComponent(courseId)}` : '';
+  const response = await fetch(`${LMS_API_BASE_URL}/instructor/curriculum/references/${referenceId}${query}`, {
+    method: 'DELETE',
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+
+  if (!response.ok) {
+    const payload = await response.json().catch((): null => null);
+    const message =
+      payload && typeof payload === 'object' && 'message' in payload
+        ? String(payload.message)
+        : `참고자료를 삭제하지 못했습니다. (${response.status})`;
+    throw new Error(message);
+  }
+
+  return response.json() as Promise<InstructorCurriculumResponse>;
+}
diff --git a/src/lib/groups.ts b/src/lib/groups.ts
new file mode 100644
index 0000000..f9bb64f
--- /dev/null
+++ b/src/lib/groups.ts
@@ -0,0 +1,127 @@
+export type GroupStudentOption = {
+  id: string;
+  name: string;
+  email: string;
+};
+
+export type InstructorGroup = {
+  id: string;
+  name: string;
+  week: string;
+  status: string;
+  members: string[];
+  membersDetailed?: GroupStudentOption[];
+  instructorPlatformId?: string | null;
+  platform: string;
+  progress: number;
+  completedMissions: number;
+  activeUsers: number;
+};
+
+export type InstructorGroupsSummary = {
+  totalGroups: number;
+  assignedPlatforms: number;
+  totalStudents: number;
+  averageProgress: number;
+};
+
+export type InstructorGroupsResponse = {
+  summary: InstructorGroupsSummary;
+  groups: InstructorGroup[];
+  unassignedStudents?: GroupStudentOption[];
+  platformOptions?: GroupPlatformOption[];
+};
+
+export type GroupPlatformOption = {
+  id: string;
+  name: string;
+};
+
+export type SaveInstructorGroupInput = {
+  courseId?: string | null;
+  name: string;
+  instructorPlatformId?: string | null;
+  platformName?: string | null;
+  memberIds: string[];
+};
+
+const LMS_API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:4400/api').replace(/\/+$/, '');
+
+export async function listInstructorGroups(accessToken: string, courseId?: string | null): Promise<InstructorGroupsResponse> {
+  const params = new URLSearchParams();
+  if (courseId) params.set('courseId', courseId);
+  const query = params.toString() ? `?${params.toString()}` : '';
+  const response = await fetch(`${LMS_API_BASE_URL}/instructor/groups${query}`, {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`그룹 현황을 불러오지 못했습니다. (${response.status})`);
+  }
+
+  return response.json() as Promise<InstructorGroupsResponse>;
+}
+
+export async function createInstructorGroup(
+  accessToken: string,
+  input: SaveInstructorGroupInput,
+): Promise<InstructorGroupsResponse> {
+  const response = await fetch(`${LMS_API_BASE_URL}/instructor/groups`, {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify(input),
+  });
+
+  if (!response.ok) throw new Error(await groupErrorMessage(response, '그룹을 추가하지 못했습니다.'));
+  return response.json() as Promise<InstructorGroupsResponse>;
+}
+
+export async function updateInstructorGroup(
+  accessToken: string,
+  groupId: string,
+  input: SaveInstructorGroupInput,
+): Promise<InstructorGroupsResponse> {
+  const response = await fetch(`${LMS_API_BASE_URL}/instructor/groups/${groupId}`, {
+    method: 'PUT',
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify(input),
+  });
+
+  if (!response.ok) throw new Error(await groupErrorMessage(response, '그룹을 수정하지 못했습니다.'));
+  return response.json() as Promise<InstructorGroupsResponse>;
+}
+
+export async function deleteInstructorGroup(
+  accessToken: string,
+  groupId: string,
+  courseId?: string | null,
+): Promise<InstructorGroupsResponse> {
+  const params = new URLSearchParams();
+  if (courseId) params.set('courseId', courseId);
+  const query = params.toString() ? `?${params.toString()}` : '';
+  const response = await fetch(`${LMS_API_BASE_URL}/instructor/groups/${groupId}${query}`, {
+    method: 'DELETE',
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+
+  if (!response.ok) throw new Error(await groupErrorMessage(response, '그룹을 삭제하지 못했습니다.'));
+  return response.json() as Promise<InstructorGroupsResponse>;
+}
+
+async function groupErrorMessage(response: Response, fallback: string) {
+  const payload = await response.json().catch((): null => null);
+  if (payload && typeof payload === 'object' && 'message' in payload) {
+    return String(payload.message);
+  }
+  return `${fallback} (${response.status})`;
+}
diff --git a/src/lib/platforms.ts b/src/lib/platforms.ts
new file mode 100644
index 0000000..3acd5b9
--- /dev/null
+++ b/src/lib/platforms.ts
@@ -0,0 +1,262 @@
+export type InstructorPlatform = {
+  id: string;
+  masterPlatformId: string;
+  name: string;
+  type: string;
+  status: string;
+  battery: number;
+  uptime: string;
+  speed: string;
+  errors: number;
+  group: string | null;
+  user: string | null;
+  emergencyStop: boolean;
+  vehicleType: string;
+  wheelbaseMeters: number;
+  maxSpeedMetersPerSecond: number;
+  maxSteeringAngleDegrees: number;
+  sensors: PlatformSettingItem[];
+  drivers: PlatformSettingItem[];
+  algorithms: PlatformAlgorithms;
+  controlDurationMinutes: number;
+  controlWarningMinutes: number;
+  agent: InstructorPlatformAgentBinding | null;
+};
+
+export type InstructorPlatformAgentBinding = {
+  nodeId: string | null;
+  hostname: string | null;
+  ownerEmail: string | null;
+  ip: string | null;
+  connected: boolean;
+  lastSeenAt: string | null;
+};
+
+export type PlatformInUseSession = {
+  id: string;
+  holderUserId: string;
+  holderName: string | null;
+  holderEmail: string | null;
+  startedAt: string;
+  endsAt: string;
+};
+
+export class PlatformInUseError extends Error {
+  activeSession: PlatformInUseSession;
+
+  constructor(message: string, activeSession: PlatformInUseSession) {
+    super(message);
+    this.name = 'PlatformInUseError';
+    this.activeSession = activeSession;
+  }
+}
+
+export type TeachingAgent = {
+  id: string;
+  hostname: string;
+  name: string;
+  user: string;
+  tags: string[];
+  ip: string;
+  sshUser?: string | null;
+  workspaceRoot?: string | null;
+  connected: boolean;
+  expired: boolean;
+  lastSeenAt: string | null;
+};
+
+export type PlatformSettingItem = {
+  title: string;
+  description: string;
+  enabled?: boolean;
+  installed?: boolean;
+};
+
+export type PlatformAlgorithms = {
+  slam: string;
+  planning: string;
+  control: string;
+};
+
+export type MasterPlatform = {
+  id: string;
+  name: string;
+  description: string;
+  iconKey: string;
+};
+
+export type InstructorPlatformsSummary = {
+  totalPlatforms: number;
+  activePlatforms: number;
+  standbyPlatforms: number;
+  errorPlatforms: number;
+};
+
+export type InstructorPlatformsResponse = {
+  summary: InstructorPlatformsSummary;
+  platforms: InstructorPlatform[];
+  masterPlatforms: MasterPlatform[];
+  agents: TeachingAgent[];
+};
+
+const LMS_API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:4400/api').replace(/\/+$/, '');
+
+export async function listInstructorPlatforms(accessToken: string): Promise<InstructorPlatformsResponse> {
+  const response = await fetch(`${LMS_API_BASE_URL}/instructor/platforms`, {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`플랫폼 현황을 불러오지 못했습니다. (${response.status})`);
+  }
+
+  return response.json() as Promise<InstructorPlatformsResponse>;
+}
+
+export async function listInstructorPlatformAgents(accessToken: string): Promise<{ agents: TeachingAgent[] }> {
+  const response = await fetch(`${LMS_API_BASE_URL}/instructor/platforms/agents`, {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`에이전트 목록을 불러오지 못했습니다. (${response.status})`);
+  }
+
+  return response.json() as Promise<{ agents: TeachingAgent[] }>;
+}
+
+export async function createInstructorPlatform(
+  accessToken: string,
+  platformId: string,
+  displayName?: string,
+  agent?: TeachingAgent | null,
+  ssh?: { user?: string; port?: string },
+): Promise<InstructorPlatformsResponse> {
+  const response = await fetch(`${LMS_API_BASE_URL}/instructor/platforms`, {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify({
+      platformId,
+      displayName,
+      agentNodeId: agent?.id,
+      agentHostname: agent?.hostname || agent?.name,
+      agentOwnerEmail: agent?.user,
+      sshUser: ssh?.user ?? agent?.sshUser ?? undefined,
+      sshPort: ssh?.port,
+      workspaceRoot: agent?.workspaceRoot ?? undefined,
+    }),
+  });
+
+  if (!response.ok) throw new Error(await platformErrorMessage(response, '플랫폼을 등록하지 못했습니다.'));
+  return response.json() as Promise<InstructorPlatformsResponse>;
+}
+
+export async function updateInstructorPlatform(
+  accessToken: string,
+  platformId: string,
+  displayName: string,
+  vehicleType: string,
+  wheelbaseMeters: number,
+  maxSpeedMetersPerSecond: number,
+  maxSteeringAngleDegrees: number,
+  sensors: PlatformSettingItem[],
+  algorithms: PlatformAlgorithms,
+  controlDurationMinutes: number,
+  controlWarningMinutes: number,
+): Promise<InstructorPlatformsResponse> {
+  const response = await fetch(`${LMS_API_BASE_URL}/instructor/platforms/${platformId}`, {
+    method: 'PUT',
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify({
+      displayName,
+      vehicleType,
+      wheelbaseMeters,
+      maxSpeedMetersPerSecond,
+      maxSteeringAngleDegrees,
+      sensors,
+      algorithms,
+      controlDurationMinutes,
+      controlWarningMinutes,
+    }),
+  });
+
+  if (!response.ok) throw new Error(await platformErrorMessage(response, '플랫폼 설정을 저장하지 못했습니다.'));
+  return response.json() as Promise<InstructorPlatformsResponse>;
+}
+
+export async function deleteInstructorPlatform(
+  accessToken: string,
+  platformId: string,
+  options?: { force?: boolean },
+): Promise<InstructorPlatformsResponse> {
+  const query = options?.force ? '?force=true' : '';
+  const response = await fetch(`${LMS_API_BASE_URL}/instructor/platforms/${platformId}${query}`, {
+    method: 'DELETE',
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+
+  if (!response.ok) {
+    const payload = await response.json().catch((): null => null);
+    if (response.status === 409 && payload && typeof payload === 'object' && (payload as { code?: unknown }).code === 'PLATFORM_IN_USE') {
+      const activeSession = (payload as { activeSession?: PlatformInUseSession }).activeSession;
+      if (activeSession) {
+        throw new PlatformInUseError(String((payload as { message?: unknown }).message ?? '현재 학생이 플랫폼을 사용 중입니다.'), activeSession);
+      }
+    }
+    throw new Error(platformErrorMessageFromPayload(response, payload, '플랫폼을 삭제하지 못했습니다.'));
+  }
+  return response.json() as Promise<InstructorPlatformsResponse>;
+}
+
+export async function assignInstructorPlatform(
+  accessToken: string,
+  platformId: string,
+  groupId: string,
+  options?: { force?: boolean },
+): Promise<InstructorPlatformsResponse> {
+  const query = options?.force ? '?force=true' : '';
+  const response = await fetch(`${LMS_API_BASE_URL}/instructor/platforms/${platformId}/assignment${query}`, {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify({ groupId }),
+  });
+
+  if (!response.ok) {
+    const payload = await response.json().catch((): null => null);
+    if (response.status === 409 && payload && typeof payload === 'object' && (payload as { code?: unknown }).code === 'PLATFORM_IN_USE') {
+      const activeSession = (payload as { activeSession?: PlatformInUseSession }).activeSession;
+      if (activeSession) {
+        throw new PlatformInUseError(String((payload as { message?: unknown }).message ?? '현재 학생이 플랫폼을 사용 중입니다.'), activeSession);
+      }
+    }
+    throw new Error(platformErrorMessageFromPayload(response, payload, '플랫폼을 배정하지 못했습니다.'));
+  }
+  return response.json() as Promise<InstructorPlatformsResponse>;
+}
+
+async function platformErrorMessage(response: Response, fallback: string) {
+  const payload = await response.json().catch((): null => null);
+  return platformErrorMessageFromPayload(response, payload, fallback);
+}
+
+function platformErrorMessageFromPayload(response: Response, payload: unknown, fallback: string) {
+  if (payload && typeof payload === 'object' && 'message' in payload) {
+    return String((payload as { message?: unknown }).message);
+  }
+  return `${fallback} (${response.status})`;
+}
diff --git a/src/lib/profileAvatar.ts b/src/lib/profileAvatar.ts
new file mode 100644
index 0000000..dace347
--- /dev/null
+++ b/src/lib/profileAvatar.ts
@@ -0,0 +1,86 @@
+const PROFILE_API_BASE_URL = (import.meta.env.VITE_LAUNCHER_API_BASE_URL ?? 'http://localhost:4200/api').replace(/\/+$/, '');
+const AVATAR_MAX_BYTES = 80 * 1024;
+
+export async function fetchProfileAvatar(accessToken: string, version: number): Promise<Blob | null> {
+  const response = await fetch(`${PROFILE_API_BASE_URL}/auth/profile/avatar?v=${version}`, {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+    credentials: 'include',
+  });
+
+  if (response.status === 404) return null;
+  if (!response.ok) throw new Error('avatar_load_failed');
+  return response.blob();
+}
+
+export async function uploadProfileAvatar(accessToken: string, imageBlob: Blob): Promise<void> {
+  const response = await fetch(`${PROFILE_API_BASE_URL}/auth/profile/avatar`, {
+    method: 'PUT',
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      'Content-Type': imageBlob.type,
+    },
+    credentials: 'include',
+    body: imageBlob,
+  });
+
+  if (!response.ok) throw new Error('avatar_upload_failed');
+}
+
+export async function deleteProfileAvatar(accessToken: string): Promise<void> {
+  const response = await fetch(`${PROFILE_API_BASE_URL}/auth/profile/avatar`, {
+    method: 'DELETE',
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+    credentials: 'include',
+  });
+
+  if (!response.ok) throw new Error('avatar_delete_failed');
+}
+
+export async function resizeImageToWebp(file: File, size = 128): Promise<Blob> {
+  if (!file.type.startsWith('image/')) throw new Error('이미지 파일만 등록할 수 있습니다.');
+
+  const dataUrl = await new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result));
+    reader.onerror = () => reject(new Error('이미지를 읽을 수 없습니다.'));
+    reader.readAsDataURL(file);
+  });
+
+  const image = await new Promise<HTMLImageElement>((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error('이미지를 불러올 수 없습니다.'));
+    img.src = dataUrl;
+  });
+
+  const sourceSize = Math.min(image.naturalWidth, image.naturalHeight);
+  const sourceX = Math.max(0, (image.naturalWidth - sourceSize) / 2);
+  const sourceY = Math.max(0, (image.naturalHeight - sourceSize) / 2);
+  const canvas = document.createElement('canvas');
+  canvas.width = size;
+  canvas.height = size;
+  const context = canvas.getContext('2d');
+  if (!context) throw new Error('이미지를 처리할 수 없습니다.');
+
+  context.drawImage(image, sourceX, sourceY, sourceSize, sourceSize, 0, 0, size, size);
+
+  const blob = await new Promise<Blob | null>((resolve) => {
+    canvas.toBlob(resolve, 'image/webp', 0.82);
+  });
+
+  if (!blob) throw new Error('이미지를 압축할 수 없습니다.');
+  if (blob.size > AVATAR_MAX_BYTES) throw new Error('이미지 용량이 너무 큽니다.');
+  return blob;
+}
+
+export function notifyProfileAvatarUpdated(): void {
+  window.dispatchEvent(new Event('profile-avatar-updated'));
+}
+
+export function notifyProfileAvatarDeleted(): void {
+  window.dispatchEvent(new Event('profile-avatar-deleted'));
+}
diff --git a/src/lib/students.ts b/src/lib/students.ts
new file mode 100644
index 0000000..fcc01fe
--- /dev/null
+++ b/src/lib/students.ts
@@ -0,0 +1,109 @@
+export type InstructorStudentIssue = {
+  type: 'MISSING_SUBMISSION' | 'COMPLETED_WITHOUT_SUBMISSION' | 'LOW_AVERAGE_SCORE';
+  title: string;
+  detail: string;
+  week?: number;
+};
+
+export type InstructorStudent = {
+  id: string;
+  name: string;
+  email: string;
+  group: string;
+  week: string;
+  progress: number;
+  commits: number;
+  issues: number;
+  issueItems: InstructorStudentIssue[];
+  lastActive: string;
+  online: boolean;
+  courseTitle?: string;
+};
+
+export type InstructorStudentsSummary = {
+  totalStudents: number;
+  onlineStudents: number;
+  averageProgress: number;
+  unresolvedIssues: number;
+};
+
+export type InstructorStudentsResponse = {
+  organization: {
+    id?: string;
+    name: string;
+  } | null;
+  summary: InstructorStudentsSummary;
+  students: InstructorStudent[];
+};
+
+export type CreateInstructorStudentInput = {
+  courseId?: string | null;
+  email: string;
+  name: string;
+  groupId?: string | null;
+};
+
+const LMS_API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:4400/api').replace(/\/+$/, '');
+
+export async function listInstructorStudents(accessToken: string, courseId?: string | null): Promise<InstructorStudentsResponse> {
+  const query = courseId ? `?courseId=${encodeURIComponent(courseId)}` : '';
+  const response = await fetch(`${LMS_API_BASE_URL}/instructor/students${query}`, {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`수강생 현황을 불러오지 못했습니다. (${response.status})`);
+  }
+
+  return response.json() as Promise<InstructorStudentsResponse>;
+}
+
+export async function createInstructorStudent(
+  accessToken: string,
+  input: CreateInstructorStudentInput,
+): Promise<InstructorStudentsResponse> {
+  const response = await fetch(`${LMS_API_BASE_URL}/instructor/students`, {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify(input),
+  });
+
+  if (!response.ok) {
+    const payload = await response.json().catch((): null => null);
+    const message =
+      payload && typeof payload === 'object' && 'message' in payload
+        ? String(payload.message)
+        : `수강생을 등록하지 못했습니다. (${response.status})`;
+    throw new Error(message);
+  }
+
+  return response.json() as Promise<InstructorStudentsResponse>;
+}
+
+export async function removeInstructorStudent(
+  accessToken: string,
+  studentId: string,
+): Promise<InstructorStudentsResponse> {
+  const response = await fetch(`${LMS_API_BASE_URL}/instructor/students/${studentId}`, {
+    method: 'DELETE',
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+
+  if (!response.ok) {
+    const payload = await response.json().catch((): null => null);
+    const message =
+      payload && typeof payload === 'object' && 'message' in payload
+        ? String(payload.message)
+        : `수강생을 제외하지 못했습니다. (${response.status})`;
+    throw new Error(message);
+  }
+
+  return response.json() as Promise<InstructorStudentsResponse>;
+}
diff --git a/src/lib/submissions.ts b/src/lib/submissions.ts
new file mode 100644
index 0000000..ad6bfbb
--- /dev/null
+++ b/src/lib/submissions.ts
@@ -0,0 +1,127 @@
+export type InstructorSubmissionCommitFile = {
+  path: string;
+  status: string;
+  patch: string;
+};
+
+export type InstructorSubmissionCommit = {
+  hash: string;
+  shortHash: string;
+  message: string;
+  author: string;
+  authorEmail: string;
+  date: string | null;
+  files: InstructorSubmissionCommitFile[];
+};
+
+export type InstructorSubmissionItem = {
+  id: string;
+  status: 'NOT_INSTALLED' | 'PENDING' | 'SUBMITTED';
+  submitted: boolean;
+  submittedAt: string | null;
+  commitCount: number;
+  score: number;
+  course: {
+    id: string;
+    title: string;
+    slug: string;
+  };
+  week: {
+    id: string;
+    week: number;
+    title: string;
+  };
+  module: {
+    id: string;
+    name: string;
+    folderName: string;
+    sortOrder: number;
+  };
+  student: {
+    id: string;
+    name: string;
+    email: string;
+    group: string;
+  };
+  repository: {
+    id: string;
+    owner: string;
+    name: string;
+    url: string;
+  } | null;
+  commits: InstructorSubmissionCommit[];
+  finalFiles: InstructorSubmissionCommitFile[];
+};
+
+export type InstructorSubmissionsResponse = {
+  organization: {
+    id?: string;
+    name: string;
+  } | null;
+  summary: {
+    totalItems: number;
+    submittedItems: number;
+    pendingItems: number;
+    notInstalledItems: number;
+    totalCommits: number;
+  };
+  courses: Array<{
+    id: string;
+    title: string;
+    slug: string;
+    weeks: Array<{
+      id: string;
+      week: number;
+      title: string;
+      modules: Array<{
+        id: string;
+        name: string;
+        folderName: string;
+        sortOrder: number;
+      }>;
+    }>;
+  }>;
+  students: Array<{
+    id: string;
+    name: string;
+    email: string;
+    group: string;
+  }>;
+  items: InstructorSubmissionItem[];
+};
+
+const LMS_API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:4400/api').replace(/\/+$/, '');
+
+export async function listInstructorSubmissions(accessToken: string): Promise<InstructorSubmissionsResponse> {
+  const response = await fetch(`${LMS_API_BASE_URL}/instructor/submissions`, {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`제출 현황을 불러오지 못했습니다. (${response.status})`);
+  }
+
+  return response.json() as Promise<InstructorSubmissionsResponse>;
+}
+
+export async function saveInstructorSubmissionScore(
+  accessToken: string,
+  input: { studentId: string; weekId: string; score: number },
+): Promise<{ score: number }> {
+  const response = await fetch(`${LMS_API_BASE_URL}/instructor/submissions/score`, {
+    method: 'PUT',
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(input),
+  });
+
+  if (!response.ok) {
+    throw new Error(`점수를 저장하지 못했습니다. (${response.status})`);
+  }
+
+  return response.json() as Promise<{ score: number }>;
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..9576dda
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>
+);
diff --git a/src/pageMeta.ts b/src/pageMeta.ts
new file mode 100644
index 0000000..af76996
--- /dev/null
+++ b/src/pageMeta.ts
@@ -0,0 +1,45 @@
+import type { AppRoute } from './routes';
+
+type PageMeta = {
+  title: string;
+  description: string;
+};
+
+export const pageMeta: Record<AppRoute, PageMeta> = {
+  dashboard: {
+    title: '대시보드',
+    description: '실시간 모니터링 및 통합 관리 시스템'
+  },
+  curriculum: {
+    title: '커리큘럼 관리',
+    description: '강사별 진행 주차 및 학습단계 적용'
+  },
+  groups: {
+    title: '그룹 관리',
+    description: '수강생 그룹 및 플랫폼 할당'
+  },
+  platforms: {
+    title: '플랫폼 관리',
+    description: '자율주행 하드웨어 및 시뮬레이션 상태 조회'
+  },
+  students: {
+    title: '수강생 현황',
+    description: '개별 학습 진행 상황'
+  },
+  submissions: {
+    title: '제출 현황',
+    description: '강좌별 수강생 제출 여부와 변경 파일 조회'
+  },
+  analytics: {
+    title: '통계 분석',
+    description: '그룹별 진도와 플랫폼 사용 데이터를 분석합니다.'
+  },
+  settings: {
+    title: '설정',
+    description: '강사 포털의 운영 정책과 계정 설정을 관리합니다.'
+  },
+  profile: {
+    title: '프로필',
+    description: '강사 계정과 소속 정보를 확인합니다.'
+  }
+};
diff --git a/src/pages/analytics/AnalyticsPage.tsx b/src/pages/analytics/AnalyticsPage.tsx
new file mode 100644
index 0000000..0000f5f
--- /dev/null
+++ b/src/pages/analytics/AnalyticsPage.tsx
@@ -0,0 +1,6 @@
+import { BarChart3 } from 'lucide-react';
+import { PlaceholderPage } from '../common/PlaceholderPage';
+
+export function AnalyticsPage() {
+  return <PlaceholderPage icon={BarChart3} route="analytics" items={['평균 진도', '플랫폼 사용률', '에스컬레이션 추이']} />;
+}
diff --git a/src/pages/common/PlaceholderPage.tsx b/src/pages/common/PlaceholderPage.tsx
new file mode 100644
index 0000000..304be80
--- /dev/null
+++ b/src/pages/common/PlaceholderPage.tsx
@@ -0,0 +1,41 @@
+import type { LucideIcon } from 'lucide-react';
+import { PageHeader } from '../../components/PageHeader';
+import { pageMeta } from '../../pageMeta';
+import type { AppRoute } from '../../routes';
+
+type PlaceholderPageProps = {
+  icon: LucideIcon;
+  route: AppRoute;
+  items: string[];
+};
+
+export function PlaceholderPage({ icon: Icon, route, items }: PlaceholderPageProps) {
+  const title = pageMeta[route].title;
+
+  return (
+    <div className="mx-auto max-w-[1220px]">
+      <PageHeader route={route} />
+
+      <section className="rounded-lg border border-[#e5e7eb] bg-white p-5">
+        <div className="mb-5 flex items-center gap-3">
+          <div className="grid h-10 w-10 place-items-center rounded-lg bg-[#eef2ff] text-[#4f46e5]">
+            <Icon size={18} aria-hidden="true" />
+          </div>
+          <div>
+            <h2 className="text-[15px] font-black">{title} 준비 영역</h2>
+            <p className="mt-1 text-[12px] font-bold text-[#64748b]">메뉴별 라우팅과 페이지 경계가 분리되어 있습니다.</p>
+          </div>
+        </div>
+
+        <div className="grid gap-3 md:grid-cols-3">
+          {items.map((item) => (
+            <article className="rounded-lg border border-[#e5e7eb] bg-[#fbfcfe] p-4" key={item}>
+              <p className="text-[13px] font-black text-[#111827]">{item}</p>
+              <p className="mt-2 text-[12px] font-bold leading-5 text-[#64748b]">후속 API와 상세 UI를 이 페이지 폴더 안에서 확장합니다.</p>
+            </article>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/pages/curriculum/CurriculumPage.tsx b/src/pages/curriculum/CurriculumPage.tsx
new file mode 100644
index 0000000..aff9bad
--- /dev/null
+++ b/src/pages/curriculum/CurriculumPage.tsx
@@ -0,0 +1,1270 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { CheckCircle2, CirclePlay, Clock3, FileCode2, FileText, Loader2, Plus, RadioTower, Save, Target, Trash2, Upload, type LucideIcon } from 'lucide-react';
+import { ConfirmDialog } from '../../components/ConfirmDialog';
+import { PageHeader } from '../../components/PageHeader';
+import { useToast } from '../../components/ToastProvider';
+import { deleteCurriculumReference, deleteInstructorCurriculumWeek, getInstructorCurriculum, updateInstructorCurriculum, uploadCurriculumExampleCode, uploadCurriculumReference, type CurriculumWeek, type InstructorCurriculumResponse } from '../../lib/curriculum';
+import { listInstructorGroups, type InstructorGroup } from '../../lib/groups';
+import type { AuthSession } from '../../types/auth';
+
+const CURRICULUM_SELECTED_GROUP_STORAGE_PREFIX = 'lms-admin-curriculum-selected-group-id';
+
+export function CurriculumPage({ session, selectedCourseId }: { session: AuthSession; selectedCourseId: string }) {
+  const { showToast } = useToast();
+  const [weeks, setWeeks] = useState<CurriculumWeek[]>([]);
+  const [groups, setGroups] = useState<InstructorGroup[]>([]);
+  const [selectedGroupId, setSelectedGroupId] = useState<string>('');
+  const [activeWeek, setActiveWeek] = useState(1);
+  const [activeLearningStep, setActiveLearningStep] = useState<string | null>(null);
+  const [currentProgressWeek, setCurrentProgressWeek] = useState(1);
+  const [currentProgressLearningStep, setCurrentProgressLearningStep] = useState<string | null>(null);
+  const [draftTagLabel, setDraftTagLabel] = useState('');
+  const [draftTitle, setDraftTitle] = useState('');
+  const [draftDuration, setDraftDuration] = useState('');
+  const [draftOverview, setDraftOverview] = useState('');
+  const [draftDeliverable, setDraftDeliverable] = useState('');
+  const [draftRequiresSourceSubmission, setDraftRequiresSourceSubmission] = useState(true);
+  const [draftTopics, setDraftTopics] = useState<string[]>([]);
+  const [draftTopicDetails, setDraftTopicDetails] = useState<string[]>([]);
+  const [draftTopicVideoUrls, setDraftTopicVideoUrls] = useState<string[]>([]);
+  const [draftTopicVideoEnabled, setDraftTopicVideoEnabled] = useState<boolean[]>([]);
+  const [draftTopicConcepts, setDraftTopicConcepts] = useState<string[]>([]);
+  const [draftPracticeContents, setDraftPracticeContents] = useState<Array<{ title: string; description: string }>>([]);
+  const [moduleEnabledById, setModuleEnabledById] = useState<Record<string, boolean>>({});
+  const [tagOptions, setTagOptions] = useState<NonNullable<InstructorCurriculumResponse['tagOptions']>>([]);
+  const [visualizationPlatforms, setVisualizationPlatforms] = useState<NonNullable<InstructorCurriculumResponse['visualizationPlatforms']>>([]);
+  const [visualizationEnabledByKey, setVisualizationEnabledByKey] = useState<Record<string, boolean>>({});
+  const [referenceTitle, setReferenceTitle] = useState('');
+  const [referenceFile, setReferenceFile] = useState<File | null>(null);
+  const [exampleCodeTitle, setExampleCodeTitle] = useState('');
+  const [exampleCodeFile, setExampleCodeFile] = useState<File | null>(null);
+  const [activeTab, setActiveTab] = useState<'apply' | 'edit' | 'modules' | 'examples'>('apply');
+  const [error, setError] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+  const [completeConfirmOpen, setCompleteConfirmOpen] = useState(false);
+  const referenceFileInputRef = useRef<HTMLInputElement>(null);
+  const exampleCodeFileInputRef = useRef<HTMLInputElement>(null);
+  const selectedWeek = useMemo(() => weeks.find((week) => week.week === activeWeek) ?? weeks[0] ?? null, [activeWeek, weeks]);
+  const selectedGroup = useMemo(() => groups.find((group) => group.id === selectedGroupId) ?? null, [groups, selectedGroupId]);
+  const hasGroups = groups.length > 0;
+  const applyTabDisabled = !hasGroups;
+  const selectedWeekCompleted = selectedWeek?.state === 'done';
+  const primaryActionDisabled = saving || !selectedWeek || (activeTab === 'apply' && !selectedGroup);
+  const selectedTopics = activeTab === 'edit' ? draftTopics : selectedWeek?.topics ?? [];
+  const selectedTopicDetails = activeTab === 'edit' ? draftTopicDetails : selectedWeek?.detail.topicDetails ?? [];
+  const selectedWeekDeletable = Boolean(selectedWeek?.tags.includes('추가'));
+  const tagOptionLabels = useMemo(() => new Set(tagOptions.map((option) => option.label)), [tagOptions]);
+  const selectedTagLabel = tagOptionLabels.has(draftTagLabel)
+    ? draftTagLabel
+    : tagOptions[0]?.label ?? '없음';
+  const selectedGroupStorageKey = useMemo(
+    () => `${CURRICULUM_SELECTED_GROUP_STORAGE_PREFIX}:${session.user.id}:${selectedCourseId || 'default'}`,
+    [selectedCourseId, session.user.id],
+  );
+
+  const resolveProgressSelection = (nextWeeks: CurriculumWeek[], setting: InstructorCurriculumResponse['setting']) => {
+    const nextWeek = nextWeeks.find((week) => week.state === 'current')?.week
+      ?? nextWeeks.find((week) => week.state !== 'done')?.week
+      ?? setting?.activeWeek
+      ?? nextWeeks[0]?.week
+      ?? 1;
+    const nextWeekData = nextWeeks.find((week) => week.week === nextWeek) ?? nextWeeks[0];
+    return {
+      week: nextWeek,
+      learningStep: setting?.activeLearningStep ?? nextWeekData?.topics[0] ?? null,
+    };
+  };
+
+  const selectProgressWeek = (nextWeeks = weeks, setting?: InstructorCurriculumResponse['setting'] | null) => {
+    const progress = setting === undefined
+      ? { week: currentProgressWeek, learningStep: currentProgressLearningStep }
+      : resolveProgressSelection(nextWeeks, setting);
+    const progressWeek = nextWeeks.find((week) => week.week === progress.week) ?? nextWeeks[0] ?? null;
+    setActiveWeek(progressWeek?.week ?? progress.week);
+    setActiveLearningStep(progress.learningStep ?? progressWeek?.topics[0] ?? null);
+  };
+
+  const applyPayload = (payload: InstructorCurriculumResponse, options: { selectProgress?: boolean } = {}) => {
+    setError(null);
+    setWeeks(payload.weeks);
+    setTagOptions(payload.tagOptions ?? []);
+    setVisualizationPlatforms(payload.visualizationPlatforms ?? []);
+    const progress = resolveProgressSelection(payload.weeks, payload.setting);
+    setCurrentProgressWeek(progress.week);
+    setCurrentProgressLearningStep(progress.learningStep);
+    if (options.selectProgress) {
+      selectProgressWeek(payload.weeks, payload.setting);
+    }
+  };
+
+  useEffect(() => {
+    let cancelled = false;
+    listInstructorGroups(session.accessToken, selectedCourseId || null)
+      .then((payload) => {
+        if (cancelled) return;
+        setGroups(payload.groups);
+        if (!payload.groups.length) {
+          window.localStorage.removeItem(selectedGroupStorageKey);
+        }
+        setSelectedGroupId((current) => {
+          if (payload.groups.some((group) => group.id === current)) return current;
+          const storedGroupId = window.localStorage.getItem(selectedGroupStorageKey) ?? '';
+          if (payload.groups.some((group) => group.id === storedGroupId)) return storedGroupId;
+          return payload.groups[0]?.id || '';
+        });
+      })
+      .catch((reason: Error) => {
+        if (cancelled) return;
+        setGroups([]);
+        setError(reason.message);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [session.accessToken, selectedCourseId, selectedGroupStorageKey]);
+
+  useEffect(() => {
+    if (selectedGroupId) {
+      window.localStorage.setItem(selectedGroupStorageKey, selectedGroupId);
+    }
+  }, [selectedGroupId, selectedGroupStorageKey]);
+
+  useEffect(() => {
+    let cancelled = false;
+    getInstructorCurriculum(session.accessToken, selectedGroupId || null, selectedCourseId || null)
+      .then((payload) => {
+        if (!cancelled) applyPayload(payload, { selectProgress: true });
+      })
+      .catch((reason: Error) => {
+        if (cancelled) return;
+        setWeeks([]);
+        setError(reason.message);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [session.accessToken, selectedGroupId, selectedCourseId]);
+
+  useEffect(() => {
+    if (!selectedWeek) return;
+    setDraftTagLabel(selectedWeek.tags[0] ?? '');
+    setDraftTitle(selectedWeek.title);
+    setDraftDuration(selectedWeek.duration);
+    setDraftOverview(selectedWeek.detail.overview);
+    setDraftDeliverable(selectedWeek.detail.deliverable);
+    setDraftRequiresSourceSubmission(selectedWeek.detail.requiresSourceSubmission ?? true);
+    setDraftTopics(selectedWeek.topics.length ? selectedWeek.topics : ['']);
+    setDraftTopicDetails(selectedWeek.detail.topicDetails.length ? selectedWeek.detail.topicDetails : ['']);
+    const topicVideoUrls = selectedWeek.topics.map((_, index) => selectedWeek.detail.topicVideoUrls?.[index] ?? '');
+    setDraftTopicVideoUrls(topicVideoUrls);
+    setDraftTopicVideoEnabled(topicVideoUrls.map((url) => Boolean(url.trim())));
+    setDraftTopicConcepts(selectedWeek.topics.map((_, index) => selectedWeek.detail.learningSteps?.[index]?.concepts?.join('\n') ?? ''));
+    setDraftPracticeContents(selectedWeek.detail.practiceContents?.length ? selectedWeek.detail.practiceContents : []);
+    setModuleEnabledById(Object.fromEntries((selectedWeek.modules ?? []).map((module) => [module.id, module.enabled !== false])));
+    setVisualizationEnabledByKey(Object.fromEntries((selectedWeek.visualizationPlatforms ?? []).map((platform) => [platform.key, true])));
+    setReferenceTitle('');
+    setReferenceFile(null);
+    setExampleCodeTitle('');
+    setExampleCodeFile(null);
+    if (referenceFileInputRef.current) referenceFileInputRef.current.value = '';
+    if (exampleCodeFileInputRef.current) exampleCodeFileInputRef.current.value = '';
+  }, [selectedWeek?.week]);
+
+  useEffect(() => {
+    if (!selectedWeek) return;
+    if (!activeLearningStep || !selectedTopics.includes(activeLearningStep)) {
+      setActiveLearningStep(selectedTopics[0] ?? null);
+    }
+  }, [activeLearningStep, selectedTopics, selectedWeek]);
+
+  const buildDraftLearningSteps = () => draftTopics
+    .map((topic, index) => {
+      const title = topic.trim();
+      const description = draftTopicDetails[index]?.trim() ?? '';
+      const videoEnabled = draftTopicVideoEnabled[index] || Boolean(draftTopicVideoUrls[index]?.trim());
+      const videoUrl = videoEnabled ? (draftTopicVideoUrls[index]?.trim() ?? '') : '';
+      const concepts = (draftTopicConcepts[index] ?? '')
+        .split('\n')
+        .map((concept) => concept.trim())
+        .filter(Boolean);
+      return title || description || videoUrl || concepts.length
+        ? { title, description, videoEnabled, videoUrl, concepts }
+        : null;
+    })
+    .filter((step): step is { title: string; description: string; videoEnabled: boolean; videoUrl: string; concepts: string[] } => Boolean(step));
+
+  const handleApply = async () => {
+    if (!selectedWeek || !selectedGroup) return;
+    setSaving(true);
+    setError(null);
+
+    try {
+      const payload = await updateInstructorCurriculum(session.accessToken, {
+        courseId: selectedCourseId || null,
+        groupId: selectedGroupId || null,
+        activeWeek: selectedWeek.week,
+        activeLearningStep,
+        applyToStudents: true,
+        tagLabel: selectedTagLabel,
+        title: draftTitle,
+        duration: draftDuration,
+        overview: draftOverview,
+        deliverable: draftDeliverable,
+        requiresSourceSubmission: draftRequiresSourceSubmission,
+        topics: draftTopics.map((topic) => topic.trim()).filter(Boolean),
+        learningSteps: buildDraftLearningSteps(),
+        topicDetails: draftTopicDetails,
+        topicVideoUrls: draftTopicVideoUrls.map((url, index) => draftTopicVideoEnabled[index] ? url.trim() : ''),
+        practiceContents: draftPracticeContents,
+      });
+      applyPayload(payload, { selectProgress: true });
+      showToast({
+        title: '커리큘럼이 적용되었습니다.',
+        message: `${selectedGroup.name} · ${selectedWeek.week}주차 · ${activeLearningStep ?? '학습단계 미선택'}`,
+      });
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : '커리큘럼을 적용하지 못했습니다.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleChangeGroup = (groupId: string) => {
+    setSelectedGroupId(groupId);
+    if (groupId) {
+      window.localStorage.setItem(selectedGroupStorageKey, groupId);
+    } else {
+      window.localStorage.removeItem(selectedGroupStorageKey);
+    }
+  };
+
+  const handleCompleteWeek = async () => {
+    if (!selectedWeek || !selectedGroup) return;
+    const topics = draftTopics.map((topic) => topic.trim()).filter(Boolean);
+    const finalLearningStep = topics[topics.length - 1] ?? selectedWeek.topics[selectedWeek.topics.length - 1] ?? activeLearningStep;
+    setSaving(true);
+    setError(null);
+
+    try {
+      const payload = await updateInstructorCurriculum(session.accessToken, {
+        courseId: selectedCourseId || null,
+        groupId: selectedGroupId || null,
+        activeWeek: selectedWeek.week,
+        activeLearningStep: finalLearningStep,
+        applyToStudents: true,
+        completed: true,
+        tagLabel: selectedTagLabel,
+        title: draftTitle,
+        duration: draftDuration,
+        overview: draftOverview,
+        deliverable: draftDeliverable,
+        requiresSourceSubmission: draftRequiresSourceSubmission,
+        topics,
+        learningSteps: buildDraftLearningSteps(),
+        topicDetails: draftTopicDetails,
+        topicVideoUrls: draftTopicVideoUrls.map((url, index) => draftTopicVideoEnabled[index] ? url.trim() : ''),
+        practiceContents: draftPracticeContents,
+      });
+      applyPayload(payload, { selectProgress: true });
+      showToast({
+        title: '주차가 완료되었습니다.',
+        message: `${selectedGroup.name} · ${selectedWeek.week}주차`,
+      });
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : '주차를 완료하지 못했습니다.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleRequestCompleteWeek = () => {
+    if (!selectedWeek || !selectedGroup) return;
+    setCompleteConfirmOpen(true);
+  };
+
+  const handleSaveContent = async () => {
+    if (!selectedWeek) return;
+    setSaving(true);
+    setError(null);
+
+    try {
+      const payload = await updateInstructorCurriculum(session.accessToken, {
+        courseId: selectedCourseId || null,
+        groupId: selectedGroupId || null,
+        activeWeek: selectedWeek.week,
+        activeLearningStep,
+        applyToStudents: false,
+        tagLabel: selectedTagLabel,
+        title: draftTitle,
+        duration: draftDuration,
+        overview: draftOverview,
+        deliverable: draftDeliverable,
+        requiresSourceSubmission: draftRequiresSourceSubmission,
+        topics: draftTopics.map((topic) => topic.trim()).filter(Boolean),
+        learningSteps: buildDraftLearningSteps(),
+        topicDetails: draftTopicDetails,
+        topicVideoUrls: draftTopicVideoUrls.map((url, index) => draftTopicVideoEnabled[index] ? url.trim() : ''),
+        practiceContents: draftPracticeContents,
+      });
+      applyPayload(payload);
+      showToast({
+        title: '커리큘럼 내용이 저장되었습니다.',
+        message: `${selectedWeek.week}주차`,
+      });
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : '커리큘럼을 저장하지 못했습니다.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleSaveModules = async () => {
+    if (!selectedWeek) return;
+    setSaving(true);
+    setError(null);
+
+    try {
+      const disabledModuleIds = (selectedWeek.modules ?? [])
+        .filter((module) => moduleEnabledById[module.id] === false)
+        .map((module) => module.id);
+      const payload = await updateInstructorCurriculum(session.accessToken, {
+        courseId: selectedCourseId || null,
+        groupId: selectedGroupId || null,
+        activeWeek: selectedWeek.week,
+        activeLearningStep,
+        applyToStudents: false,
+        disabledModuleIds,
+        visualizationPlatformKeys: visualizationPlatforms
+          .filter((platform) => visualizationEnabledByKey[platform.key])
+          .map((platform) => platform.key),
+      });
+      applyPayload(payload);
+      setActiveWeek(selectedWeek.week);
+      showToast({
+        title: '모듈 설정이 저장되었습니다.',
+        message: `${selectedWeek.week}주차`,
+      });
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : '모듈 설정을 저장하지 못했습니다.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleAddWeek = async () => {
+    const nextWeek = Math.max(0, ...weeks.map((week) => week.week)) + 1;
+    setSaving(true);
+    setError(null);
+
+    try {
+      const payload = await updateInstructorCurriculum(session.accessToken, {
+        courseId: selectedCourseId || null,
+        groupId: selectedGroupId || null,
+        activeWeek: nextWeek,
+        activeLearningStep: '학습단계 1',
+        applyToStudents: false,
+        tagLabel: tagOptions[0]?.label ?? '없음',
+        title: `${nextWeek}주차 커리큘럼`,
+        duration: '-',
+        overview: '',
+        deliverable: '',
+        requiresSourceSubmission: true,
+        topics: ['학습단계 1'],
+        learningSteps: [{ title: '학습단계 1', description: '', videoEnabled: false, videoUrl: '', concepts: [] }],
+        topicDetails: [''],
+        topicVideoUrls: [''],
+        practiceContents: [],
+      });
+      applyPayload(payload);
+      setActiveWeek(nextWeek);
+      setActiveLearningStep('학습단계 1');
+      setActiveTab('edit');
+      showToast({
+        title: '주차가 추가되었습니다.',
+        message: `${nextWeek}주차`,
+      });
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : '주차를 추가하지 못했습니다.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeleteWeek = async () => {
+    if (!selectedWeek || !selectedWeekDeletable) return;
+
+    setSaving(true);
+    setError(null);
+
+    try {
+      const payload = await deleteInstructorCurriculumWeek(session.accessToken, selectedWeek.week);
+      applyPayload(payload, { selectProgress: true });
+      showToast({
+        title: '주차가 삭제되었습니다.',
+        message: `${selectedWeek.week}주차`,
+      });
+      setDeleteConfirmOpen(false);
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : '주차를 삭제하지 못했습니다.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleAddLearningStep = () => {
+    const nextIndex = draftTopics.length + 1;
+    const nextTopic = `학습단계 ${nextIndex}`;
+    setDraftTopics((current) => [...current, nextTopic]);
+    setDraftTopicDetails((current) => [...current, '']);
+    setDraftTopicVideoUrls((current) => [...current, '']);
+    setDraftTopicVideoEnabled((current) => [...current, false]);
+    setDraftTopicConcepts((current) => [...current, '']);
+  };
+
+  const handleDeleteLearningStep = (index: number) => {
+    setDraftTopics((currentTopics) => {
+      const removedTopic = currentTopics[index];
+      const nextTopics = currentTopics.filter((_, topicIndex) => topicIndex !== index);
+      setActiveLearningStep((currentStep) => {
+        if (currentStep && currentStep !== removedTopic && nextTopics.includes(currentStep)) return currentStep;
+        return nextTopics[Math.min(index, nextTopics.length - 1)] ?? null;
+      });
+      return nextTopics;
+    });
+    setDraftTopicDetails((currentDetails) => currentDetails.filter((_, detailIndex) => detailIndex !== index));
+    setDraftTopicVideoUrls((currentUrls) => currentUrls.filter((_, urlIndex) => urlIndex !== index));
+    setDraftTopicVideoEnabled((currentEnabled) => currentEnabled.filter((_, enabledIndex) => enabledIndex !== index));
+    setDraftTopicConcepts((currentConcepts) => currentConcepts.filter((_, conceptIndex) => conceptIndex !== index));
+  };
+
+  const handleAddPracticeContent = () => {
+    setDraftPracticeContents((current) => [...current, { title: '', description: '' }]);
+  };
+
+  const handleUpdatePracticeContent = (index: number, field: 'title' | 'description', value: string) => {
+    setDraftPracticeContents((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, [field]: value } : item));
+  };
+
+  const handleDeletePracticeContent = (index: number) => {
+    setDraftPracticeContents((current) => current.filter((_, itemIndex) => itemIndex !== index));
+  };
+
+  const handleUploadReference = async () => {
+    if (!selectedWeek || !referenceFile) return;
+    setSaving(true);
+    setError(null);
+
+    try {
+      const payload = await uploadCurriculumReference(session.accessToken, {
+        courseId: selectedCourseId || null,
+        week: selectedWeek.week,
+        title: referenceTitle,
+        file: referenceFile,
+      });
+      applyPayload(payload);
+      setActiveWeek(selectedWeek.week);
+      setReferenceTitle('');
+      setReferenceFile(null);
+      if (referenceFileInputRef.current) referenceFileInputRef.current.value = '';
+      showToast({
+        title: '참고자료가 업로드되었습니다.',
+        message: referenceFile.name,
+      });
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : '참고자료를 업로드하지 못했습니다.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleUploadExampleCode = async () => {
+    if (!selectedWeek || !exampleCodeFile) return;
+    setSaving(true);
+    setError(null);
+
+    try {
+      const payload = await uploadCurriculumExampleCode(session.accessToken, {
+        courseId: selectedCourseId || null,
+        week: selectedWeek.week,
+        title: exampleCodeTitle,
+        file: exampleCodeFile,
+      });
+      applyPayload(payload);
+      setActiveWeek(selectedWeek.week);
+      setExampleCodeTitle('');
+      setExampleCodeFile(null);
+      if (exampleCodeFileInputRef.current) exampleCodeFileInputRef.current.value = '';
+      showToast({
+        title: '예제 코드가 업로드되었습니다.',
+        message: exampleCodeFile.name,
+      });
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : '예제 코드를 업로드하지 못했습니다.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeleteReference = async (referenceId: string, label = '참고자료') => {
+    if (!selectedWeek) return;
+    setSaving(true);
+    setError(null);
+
+    try {
+      const payload = await deleteCurriculumReference(session.accessToken, referenceId, selectedCourseId || null);
+      applyPayload(payload);
+      setActiveWeek(selectedWeek.week);
+      showToast({
+        title: `${label}가 삭제되었습니다.`,
+        message: `${selectedWeek.week}주차`,
+      });
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : `${label}를 삭제하지 못했습니다.`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="mx-auto max-w-[1220px]">
+      <PageHeader route="curriculum" />
+
+      <section className="mb-4 grid gap-3 md:grid-cols-3">
+        <SummaryCard label="선택 그룹" value={selectedGroup?.name ?? '등록된 그룹 없음'} icon={Target} />
+        <SummaryCard label="현재 진행 주차" value={currentProgressWeek ? `${currentProgressWeek}주차` : '-'} icon={RadioTower} />
+        <SummaryCard label="현재 학습단계" value={currentProgressLearningStep ?? '-'} icon={Target} />
+      </section>
+
+      {error ? (
+        <div className="mb-4 rounded-lg border border-[#fecdd3] bg-[#fff1f2] px-4 py-3 text-[13px] font-bold text-[#e11d48]">{error}</div>
+      ) : null}
+
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
+        <div className="flex flex-wrap items-center gap-3">
+          <div className="inline-flex rounded-lg border border-[#cbd5e1] bg-white p-1 shadow-sm">
+            <button
+              type="button"
+              disabled={applyTabDisabled}
+              className={`h-8 rounded-md px-4 text-[13px] font-black transition disabled:cursor-not-allowed disabled:opacity-45 ${activeTab === 'apply' ? 'bg-[#2563eb] text-white shadow-[0_8px_18px_rgba(37,99,235,0.18)]' : 'text-[#475569] hover:bg-[#e2e8f0] hover:text-[#111827]'}`}
+              onClick={() => {
+                if (applyTabDisabled) return;
+                setActiveTab('apply');
+                selectProgressWeek();
+              }}
+            >
+              강의 진행
+            </button>
+            <button
+              type="button"
+              className={`h-8 rounded-md px-4 text-[13px] font-black transition ${activeTab === 'edit' ? 'bg-[#2563eb] text-white shadow-[0_8px_18px_rgba(37,99,235,0.18)]' : 'text-[#475569] hover:bg-[#e2e8f0] hover:text-[#111827]'}`}
+              onClick={() => setActiveTab('edit')}
+            >
+              내용 편집
+            </button>
+            <button
+              type="button"
+              className={`h-8 rounded-md px-4 text-[13px] font-black transition ${activeTab === 'modules' ? 'bg-[#2563eb] text-white shadow-[0_8px_18px_rgba(37,99,235,0.18)]' : 'text-[#475569] hover:bg-[#e2e8f0] hover:text-[#111827]'}`}
+              onClick={() => setActiveTab('modules')}
+            >
+              모듈 관리
+            </button>
+            <button
+              type="button"
+              className={`h-8 rounded-md px-4 text-[13px] font-black transition ${activeTab === 'examples' ? 'bg-[#2563eb] text-white shadow-[0_8px_18px_rgba(37,99,235,0.18)]' : 'text-[#475569] hover:bg-[#e2e8f0] hover:text-[#111827]'}`}
+              onClick={() => setActiveTab('examples')}
+            >
+              예제 코드
+            </button>
+          </div>
+          <select
+            className="h-10 min-w-[190px] rounded-md border border-[#cbd5e1] bg-white px-3 text-[13px] font-bold text-[#111827] shadow-sm outline-none transition hover:border-[#94a3b8] focus:border-[#2563eb] focus:ring-2 focus:ring-[#bfdbfe] disabled:border-[#d1d9e6] disabled:bg-[#f8fafc] disabled:text-[#94a3b8]"
+            value={selectedGroupId}
+            onChange={(event) => handleChangeGroup(event.target.value)}
+            disabled={saving || !hasGroups}
+          >
+            {groups.length ? groups.map((group) => (
+              <option key={group.id} value={group.id}>{group.name}</option>
+            )) : (
+              <option value="">등록된 그룹 없음</option>
+            )}
+          </select>
+        </div>
+        <div className="flex items-center gap-2">
+          {activeTab !== 'examples' && !(activeTab === 'apply' && selectedWeekCompleted) ? (
+            <button className="inline-flex h-10 items-center gap-2 rounded-md bg-[#2563eb] px-4 text-[13px] font-bold text-white hover:bg-[#1d4ed8] disabled:cursor-not-allowed disabled:opacity-60" type="button" onClick={() => void (activeTab === 'apply' ? handleApply() : activeTab === 'modules' ? handleSaveModules() : handleSaveContent())} disabled={primaryActionDisabled}>
+              {saving ? <Loader2 className="animate-spin" size={15} aria-hidden="true" /> : activeTab === 'apply' ? <CirclePlay size={15} aria-hidden="true" /> : <Save size={15} aria-hidden="true" />}
+              {activeTab === 'apply' ? '진행하기' : activeTab === 'modules' ? '모듈 저장' : '내용 저장'}
+            </button>
+          ) : null}
+          {activeTab === 'apply' ? (
+            <button className="inline-flex h-10 items-center gap-2 rounded-md border border-[#2fbda0] bg-white px-4 text-[13px] font-bold text-[#178c78] transition hover:bg-[#effbf7] disabled:cursor-not-allowed disabled:opacity-60" type="button" onClick={handleRequestCompleteWeek} disabled={primaryActionDisabled || selectedWeekCompleted}>
+              {saving ? <Loader2 className="animate-spin" size={15} aria-hidden="true" /> : <CheckCircle2 size={15} aria-hidden="true" />}
+              완료처리
+            </button>
+          ) : null}
+        </div>
+      </div>
+
+      <section className="grid items-start gap-4 xl:grid-cols-[360px_minmax(0,1fr)]">
+        <div className="rounded-lg border border-[#c7d2e0] bg-white">
+          <div className="border-b border-[#cbd5e1] px-4 py-3">
+            <h2 className="text-[15px] font-black text-[#111827]">주차별 커리큘럼</h2>
+            <p className="mt-1 text-[12px] font-bold text-[#64748b]">강사가 선택한 주차가 학생 앱에서 자동 선택됩니다.</p>
+          </div>
+          <div className="p-3">
+            {weeks.length ? (
+              weeks.map((week) => {
+                const completed = week.state === 'done';
+                return (
+                  <button
+                    key={week.week}
+                    type="button"
+                    className={`mb-2 w-full rounded-lg border px-4 py-3 text-left transition last:mb-0 ${
+                      week.week === activeWeek
+                        ? 'border-[#2563eb] bg-[#eff6ff] shadow-[0_12px_28px_rgba(37,99,235,0.12)]'
+                        : 'border-[#d1d9e6] bg-white hover:bg-[#f8fafc]'
+                    }`}
+                    onClick={() => {
+                      setActiveWeek(week.week);
+                      setActiveLearningStep(week.topics[0] ?? null);
+                    }}
+                  >
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="min-w-0">
+                        <p className="text-[12px] font-black text-[#4f46e5]">{week.week}주차</p>
+                        <h3 className="mt-1 truncate text-[14px] font-black text-[#111827]">{week.title}</h3>
+                        <p className="mt-2 line-clamp-2 text-[12px] font-semibold leading-relaxed text-[#64748b]">{week.detail.overview}</p>
+                      </div>
+                      {week.week === activeWeek ? <CheckCircle2 className="shrink-0 text-[#2563eb]" size={18} aria-hidden="true" /> : null}
+                      {completed ? <span className="shrink-0 rounded-md bg-[#e2e8f0] px-2 py-1 text-[11px] font-black text-[#64748b]">완료</span> : null}
+                    </div>
+                  </button>
+                );
+              })
+            ) : (
+              <div className="grid h-[220px] place-items-center text-center">
+                <p className="text-[13px] font-bold text-[#64748b]">등록된 커리큘럼이 없습니다.</p>
+              </div>
+            )}
+            {activeTab === 'edit' ? (
+              <button
+                type="button"
+                className="mt-2 flex min-h-[104px] w-full items-center justify-center gap-2 rounded-lg border border-dashed border-[#b7c4d8] bg-[#f8fafc] px-4 py-3 text-[13px] font-black text-[#64748b] transition hover:border-[#2563eb] hover:bg-[#eff6ff] hover:text-[#2563eb] disabled:cursor-not-allowed disabled:opacity-60"
+                onClick={() => void handleAddWeek()}
+                disabled={saving}
+              >
+                {saving ? <Loader2 className="animate-spin" size={16} aria-hidden="true" /> : <Plus size={16} aria-hidden="true" />}
+                추가
+              </button>
+            ) : null}
+          </div>
+        </div>
+
+        <div className="rounded-lg border border-[#c7d2e0] bg-white">
+          <div className="border-b border-[#cbd5e1] px-5 py-4">
+            <div className="flex items-start justify-between gap-3">
+              <div className="min-w-0">
+                <p className="text-[12px] font-black text-[#4f46e5]">{selectedWeek ? `${selectedWeek.week}주차` : '-'}</p>
+                <h2 className="mt-1 truncate text-[18px] font-black text-[#111827]">{draftTitle || selectedWeek?.title || '커리큘럼 없음'}</h2>
+              </div>
+              {activeTab === 'edit' ? (
+                <button
+                  type="button"
+                  onClick={() => setDeleteConfirmOpen(true)}
+                  disabled={saving || !selectedWeekDeletable}
+                  title={selectedWeekDeletable ? '선택한 추가 주차 삭제' : '기본 커리큘럼 주차는 삭제할 수 없습니다'}
+                  className="inline-flex h-9 shrink-0 items-center gap-1.5 rounded-md border border-[#fecdd3] bg-white px-3 text-[12px] font-black text-[#e11d48] transition hover:bg-[#fff1f2] disabled:cursor-not-allowed disabled:border-[#cbd5e1] disabled:text-[#94a3b8] disabled:hover:bg-white"
+                >
+                  {saving ? <Loader2 className="animate-spin" size={14} aria-hidden="true" /> : <Trash2 size={14} aria-hidden="true" />}
+                  삭제
+                </button>
+              ) : null}
+            </div>
+	          </div>
+
+	          {activeTab === 'apply' ? (
+              !hasGroups ? (
+                <div className="grid min-h-[360px] place-items-center p-5 text-center">
+                  <div>
+                    <h3 className="text-[16px] font-black text-[#111827]">등록된 그룹이 없습니다</h3>
+                    <p className="mt-2 text-[13px] font-bold leading-relaxed text-[#64748b]">
+                      강의 진행을 적용하려면 먼저 그룹을 생성해 주세요.
+                    </p>
+                  </div>
+                </div>
+              ) : (
+	            <div className="grid gap-4 p-5">
+              <section>
+                <h3 className="text-[15px] font-black text-[#111827]">현재 진행 학습단계</h3>
+                <div className="mt-3 grid gap-2">
+                  {selectedTopics.length ? (
+                    selectedTopics.map((topic, index) => {
+                      const selected = topic === activeLearningStep;
+                      return (
+                        <button
+                          key={`${selectedWeek?.week}-apply-${index}`}
+                          type="button"
+                          disabled={selectedWeekCompleted}
+                          className={`flex items-start gap-3 rounded-lg border px-4 py-3 text-left transition disabled:cursor-default ${
+                            selected
+                              ? selectedWeekCompleted
+                                ? 'border-[#d1d9e6] bg-[#f8fafc]'
+                                : 'border-[#4f46e5] bg-[#f0efff]'
+                              : selectedWeekCompleted
+                                ? 'border-[#cbd5e1] bg-white'
+                                : 'border-[#d1d9e6] bg-white hover:bg-[#f8fafc]'
+                          }`}
+                          onClick={() => {
+                            if (selectedWeekCompleted) return;
+                            setActiveLearningStep(topic);
+                          }}
+                        >
+                          <span className={`grid h-7 w-7 shrink-0 place-items-center rounded-md text-[12px] font-black ${selected && !selectedWeekCompleted ? 'bg-[#4f46e5] text-white' : 'bg-[#f1f5f9] text-[#64748b]'}`}>{index + 1}</span>
+                          <span className="min-w-0">
+                            <span className="block text-[14px] font-black text-[#111827]">{topic}</span>
+                            <span className="mt-1 block text-[12px] font-semibold leading-relaxed text-[#64748b]">{selectedTopicDetails[index] ?? ''}</span>
+                          </span>
+                        </button>
+                      );
+                    })
+                  ) : (
+                    <p className="rounded-lg border border-dashed border-[#d1d9e6] px-4 py-8 text-center text-[13px] font-bold text-[#64748b]">학습단계가 없습니다.</p>
+                  )}
+                </div>
+	              </section>
+	            </div>
+              )
+	          ) : activeTab === 'modules' ? (
+          <div className="grid gap-4 p-5">
+            <section>
+              <div className="flex items-center justify-between gap-3">
+                <div>
+                  <h3 className="text-[15px] font-black text-[#111827]">모듈 관리</h3>
+                  <p className="mt-1 text-[12px] font-bold text-[#64748b]">체크된 모듈만 학생 앱의 모듈 리스트에 표시됩니다.</p>
+                </div>
+                {selectedWeek?.modules?.length ? (
+                  <span className="rounded-md bg-[#eff6ff] px-3 py-1.5 text-[12px] font-black text-[#2563eb]">
+                    {(selectedWeek.modules ?? []).filter((module) => moduleEnabledById[module.id] !== false).length}/{selectedWeek.modules.length}
+                  </span>
+                ) : null}
+              </div>
+              <div className="mt-3 grid gap-2">
+                {selectedWeek?.modules?.length ? selectedWeek.modules.map((module) => {
+                  const enabled = moduleEnabledById[module.id] !== false;
+                  return (
+                    <label
+                      key={module.id}
+                      className={`flex cursor-pointer items-center gap-3 rounded-lg border px-4 py-3 transition ${enabled ? 'border-[#d1d9e6] bg-white hover:bg-[#f8fafc]' : 'border-[#cbd5e1] bg-[#f8fafc] opacity-70 hover:bg-[#f1f5f9]'}`}
+                    >
+                      <input
+                        type="checkbox"
+                        className="h-4 w-4 shrink-0 cursor-pointer rounded border-[#cbd5e1] text-[#2563eb] focus:ring-[#2563eb]"
+                        checked={enabled}
+                        onChange={(event) => {
+                          const checked = event.target.checked;
+                          setModuleEnabledById((current) => ({ ...current, [module.id]: checked }));
+                        }}
+                      />
+                      <span className="grid h-8 w-8 shrink-0 place-items-center rounded-md bg-[#ede9ff] text-[12px] font-black text-[#4f46e5]">{module.sortOrder}</span>
+                      <span className="min-w-0 flex-1">
+                        <span className="block truncate text-[14px] font-black text-[#111827]">{module.name}</span>
+                        <span className="mt-1 block truncate text-[12px] font-bold text-[#64748b]">{module.category} · {module.folderName}</span>
+                      </span>
+                      <span className={`shrink-0 rounded-md px-2.5 py-1 text-[11px] font-black ${enabled ? 'bg-[#dcfce7] text-[#15803d]' : 'bg-[#e2e8f0] text-[#64748b]'}`}>
+                        {enabled ? '사용' : '미사용'}
+                      </span>
+                    </label>
+                  );
+                }) : (
+                  <p className="rounded-lg border border-dashed border-[#d1d9e6] px-4 py-10 text-center text-[13px] font-bold text-[#64748b]">등록된 모듈이 없습니다.</p>
+                )}
+              </div>
+            </section>
+            <section className="border-t border-[#cbd5e1] pt-4">
+              <div className="flex items-center justify-between gap-3">
+                <div>
+                  <h3 className="text-[15px] font-black text-[#111827]">시각화 플랫폼</h3>
+                  <p className="mt-1 text-[12px] font-bold text-[#64748b]">시각화 화면을 사용할 플랫폼을 선택하세요.</p>
+                </div>
+                {visualizationPlatforms.length ? (
+                  <span className="rounded-md bg-[#f1f5f9] px-3 py-1.5 text-[12px] font-black text-[#475569]">
+                    {visualizationPlatforms.filter((platform) => visualizationEnabledByKey[platform.key]).length}/{visualizationPlatforms.length}
+                  </span>
+                ) : null}
+              </div>
+              <div className="mt-3 grid gap-2">
+                {visualizationPlatforms.length ? visualizationPlatforms.map((platform) => {
+                  const enabled = Boolean(visualizationEnabledByKey[platform.key]);
+                  return (
+                    <label
+                      key={platform.key}
+                      className={`flex cursor-pointer items-center gap-3 rounded-lg border px-4 py-3 transition ${enabled ? 'border-[#d1d9e6] bg-white hover:bg-[#f8fafc]' : 'border-[#cbd5e1] bg-[#f8fafc] opacity-75 hover:bg-[#f1f5f9]'}`}
+                    >
+                      <input
+                        type="checkbox"
+                        className="h-4 w-4 shrink-0 cursor-pointer rounded border-[#cbd5e1] text-[#2563eb] focus:ring-[#2563eb]"
+                        checked={enabled}
+                        onChange={(event) => {
+                          const checked = event.target.checked;
+                          setVisualizationEnabledByKey((current) => ({ ...current, [platform.key]: checked }));
+                        }}
+                      />
+                      <span className="min-w-0 flex-1">
+                        <span className="block truncate text-[14px] font-black text-[#111827]">{platform.displayName}</span>
+                        <span className="mt-1 block truncate text-[12px] font-bold text-[#64748b]">{platform.description ?? '실행 설정 정보 없음'}</span>
+                      </span>
+                      <span className={`shrink-0 rounded-md px-2.5 py-1 text-[11px] font-black ${enabled ? 'bg-[#dcfce7] text-[#15803d]' : 'bg-[#e2e8f0] text-[#64748b]'}`}>
+                        {enabled ? '사용' : '미사용'}
+                      </span>
+                    </label>
+                  );
+                }) : (
+                  <p className="rounded-lg border border-dashed border-[#d1d9e6] px-4 py-10 text-center text-[13px] font-bold text-[#64748b]">등록된 시각화 플랫폼이 없습니다.</p>
+                )}
+              </div>
+            </section>
+          </div>
+	          ) : activeTab === 'examples' ? (
+          <div className="grid gap-4 p-5">
+            <section>
+              <div className="flex items-center justify-between gap-3">
+                <div>
+                  <h3 className="text-[15px] font-black text-[#111827]">예제 코드</h3>
+                  <p className="mt-1 text-[12px] font-bold text-[#64748b]">학생 앱의 예제 코드 화면에 표시할 주차별 파일을 업로드합니다.</p>
+                </div>
+                <button
+                  type="button"
+                  className="inline-flex h-8 items-center gap-1.5 rounded-md border border-[#d1d9e6] bg-white px-3 text-[12px] font-black text-[#475569] transition hover:border-[#2563eb] hover:bg-[#eff6ff] hover:text-[#2563eb]"
+                  onClick={() => exampleCodeFileInputRef.current?.click()}
+                >
+                  <FileText size={14} aria-hidden="true" />
+                  파일 선택
+                </button>
+              </div>
+
+              <input
+                ref={exampleCodeFileInputRef}
+                type="file"
+                className="hidden"
+                onChange={(event) => {
+                  const file = event.target.files?.[0] ?? null;
+                  setExampleCodeFile(file);
+                  if (file && !exampleCodeTitle.trim()) setExampleCodeTitle(file.name);
+                }}
+              />
+
+              <div className="mt-3 grid gap-2 rounded-lg border border-[#d1d9e6] bg-[#f8fafc] p-3">
+                <div className="grid gap-2 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]">
+                  <input
+                    className="h-10 rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-bold text-[#111827] outline-none focus:border-[#2563eb]"
+                    value={exampleCodeTitle}
+                    placeholder="파일 표시명"
+                    onChange={(event) => setExampleCodeTitle(event.target.value)}
+                  />
+                  <div className="flex h-10 min-w-0 items-center rounded-md border border-[#d1d9e6] bg-white px-3 text-[12px] font-bold text-[#64748b]">
+                    <span className="truncate">{exampleCodeFile?.name ?? '선택된 파일 없음'}</span>
+                  </div>
+                  <button
+                    type="button"
+                    disabled={saving || !exampleCodeFile}
+                    onClick={() => void handleUploadExampleCode()}
+                    className="inline-flex h-10 items-center justify-center gap-1.5 rounded-md bg-[#2563eb] px-4 text-[13px] font-black text-white transition hover:bg-[#1d4ed8] disabled:cursor-not-allowed disabled:opacity-45"
+                  >
+                    {saving ? <Loader2 className="animate-spin" size={14} aria-hidden="true" /> : <Upload size={14} aria-hidden="true" />}
+                    업로드
+                  </button>
+                </div>
+
+                <div className="grid gap-2">
+                  {selectedWeek.detail.exampleCodes?.length ? selectedWeek.detail.exampleCodes.map((example) => (
+                    <div key={example.id} className="flex items-center gap-3 rounded-md border border-[#cbd5e1] bg-white px-3 py-2">
+                      <FileCode2 className="shrink-0 text-[#64748b]" size={16} aria-hidden="true" />
+                      <div className="min-w-0 flex-1">
+                        <p className="truncate text-[13px] font-black text-[#111827]">{example.title}</p>
+                        <p className="mt-0.5 truncate text-[11px] font-bold text-[#64748b]">
+                          {example.fileName}
+                          {example.fileSizeBytes ? ` · ${formatFileSize(Number(example.fileSizeBytes))}` : ''}
+                        </p>
+                      </div>
+                      <button
+                        type="button"
+                        disabled={saving}
+                        onClick={() => void handleDeleteReference(example.id, '예제 코드')}
+                        className="grid h-8 w-8 shrink-0 place-items-center rounded-md text-[#94a3b8] transition hover:bg-[#fff1f2] hover:text-[#e11d48] disabled:cursor-not-allowed disabled:opacity-45"
+                        aria-label={`${example.title} 삭제`}
+                        title="예제 코드 삭제"
+                      >
+                        <Trash2 size={14} aria-hidden="true" />
+                      </button>
+                    </div>
+                  )) : (
+                    <p className="rounded-md border border-dashed border-[#d1d9e6] bg-white px-4 py-10 text-center text-[13px] font-bold text-[#64748b]">등록된 예제 코드가 없습니다.</p>
+                  )}
+                </div>
+              </div>
+            </section>
+          </div>
+	          ) : (
+          <div className="grid gap-4 p-5">
+            <section className="grid gap-3 pb-2">
+              <label className="block">
+                <span className="text-[12px] font-black text-[#475569]">주차 제목</span>
+                <input
+                  className="mt-1.5 h-10 w-full rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-bold text-[#111827] outline-none focus:border-[#2563eb]"
+                  value={draftTitle}
+                  onChange={(event) => setDraftTitle(event.target.value)}
+                />
+              </label>
+              <label className="block">
+                <span className="text-[12px] font-black text-[#475569]">플랫폼 배지</span>
+                <select
+                  className="mt-1.5 h-10 w-full rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-bold text-[#111827] outline-none focus:border-[#2563eb]"
+                  value={selectedTagLabel}
+                  onChange={(event) => setDraftTagLabel(event.target.value)}
+                >
+                  {tagOptions.length ? tagOptions.map((option) => (
+                    <option key={option.key} value={option.label}>{option.label}</option>
+                  )) : (
+                    <option value="없음">없음</option>
+                  )}
+                </select>
+              </label>
+              <label className="block h-[100px]">
+                <span className="text-[12px] font-black text-[#475569]">주차 개요</span>
+                <textarea
+                  className="mt-1.5 h-[76px] w-full resize-none rounded-md border border-[#d1d9e6] bg-white px-3 pb-0 pt-2 text-[13px] font-semibold leading-relaxed text-[#111827] outline-none focus:border-[#2563eb]"
+                  value={draftOverview}
+                  onChange={(event) => setDraftOverview(event.target.value)}
+                />
+              </label>
+              <label className="block">
+                <span className="text-[12px] font-black text-[#475569]">예상 학습 시간</span>
+                <input
+                  className="mt-1.5 h-10 w-full rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-bold text-[#111827] outline-none focus:border-[#2563eb]"
+                  value={draftDuration}
+                  placeholder="예: 8-10시간"
+                  onChange={(event) => setDraftDuration(event.target.value)}
+                />
+              </label>
+            </section>
+
+            <section>
+              <div className="flex items-center justify-between gap-3">
+                <h3 className="text-[15px] font-black text-[#111827]">학습단계</h3>
+                <button
+                  type="button"
+                  className="inline-flex h-8 items-center gap-1.5 rounded-md border border-[#d1d9e6] bg-white px-3 text-[12px] font-black text-[#475569] transition hover:border-[#2563eb] hover:bg-[#eff6ff] hover:text-[#2563eb]"
+                  onClick={handleAddLearningStep}
+                >
+                  <Plus size={14} aria-hidden="true" />
+                  추가
+                </button>
+              </div>
+              <div className="mt-3 grid gap-2">
+                {selectedTopics.length ? (
+                  selectedTopics.map((topic, index) => (
+                    <div
+                      key={`${selectedWeek?.week}-${index}`}
+                      className="flex items-start gap-3 rounded-lg border border-[#d1d9e6] bg-white px-4 py-3 text-left transition hover:bg-[#f8fafc]"
+                    >
+                      <span className="grid h-7 w-7 shrink-0 place-items-center rounded-md bg-[#f1f5f9] text-[12px] font-black text-[#64748b]">
+                        {index + 1}
+                      </span>
+                      <span className="grid min-w-0 flex-1 gap-2">
+                        <input
+                          className="h-9 rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-black text-[#111827] outline-none focus:border-[#2563eb]"
+                          value={topic}
+                          placeholder="제목"
+                          onChange={(event) => {
+                            const next = [...draftTopics];
+                            next[index] = event.target.value;
+                            setDraftTopics(next);
+                          }}
+                        />
+                        <textarea
+                          className="min-h-[58px] resize-none rounded-md border border-[#d1d9e6] bg-white px-3 py-2 text-[12px] font-semibold leading-relaxed text-[#64748b] outline-none focus:border-[#2563eb]"
+                          value={draftTopicDetails[index] ?? ''}
+                          placeholder="내용"
+                          onChange={(event) => {
+                            const next = [...draftTopicDetails];
+                            next[index] = event.target.value;
+                            setDraftTopicDetails(next);
+                          }}
+                        />
+                        <label className="inline-flex w-fit cursor-pointer items-center gap-2 text-[12px] font-black text-[#475569]">
+                          <input
+                            type="checkbox"
+                            className="h-4 w-4 rounded border-[#cbd5e1] text-[#2563eb] focus:ring-[#2563eb]"
+                            checked={draftTopicVideoEnabled[index] || Boolean(draftTopicVideoUrls[index]?.trim())}
+                            onChange={(event) => {
+                              const checked = event.target.checked;
+                              setDraftTopicVideoEnabled((current) => {
+                                const next = [...current];
+                                next[index] = checked;
+                                return next;
+                              });
+                              if (!checked) {
+                                setDraftTopicVideoUrls((current) => {
+                                  const next = [...current];
+                                  next[index] = '';
+                                  return next;
+                                });
+                              }
+                            }}
+                          />
+                          동영상강의
+                        </label>
+                        {(draftTopicVideoEnabled[index] || Boolean(draftTopicVideoUrls[index]?.trim())) && (
+                          <input
+                            className="h-9 rounded-md border border-[#d1d9e6] bg-white px-3 text-[12px] font-semibold text-[#111827] outline-none focus:border-[#2563eb]"
+                            value={draftTopicVideoUrls[index] ?? ''}
+                            placeholder="YouTube URL"
+                            onChange={(event) => {
+                              const next = [...draftTopicVideoUrls];
+                              next[index] = event.target.value;
+                              setDraftTopicVideoUrls(next);
+                            }}
+                          />
+                        )}
+                        <label className="grid gap-1.5">
+                          <span className="text-[12px] font-black text-[#475569]">핵심개념</span>
+                          <textarea
+                            className="min-h-[70px] resize-y rounded-md border border-[#d1d9e6] bg-white px-3 py-2 text-[12px] font-semibold leading-relaxed text-[#64748b] outline-none focus:border-[#2563eb]"
+                            value={draftTopicConcepts[index] ?? ''}
+                            placeholder="한 줄에 하나씩 입력"
+                            onChange={(event) => {
+                              const next = [...draftTopicConcepts];
+                              next[index] = event.target.value;
+                              setDraftTopicConcepts(next);
+                            }}
+                          />
+                        </label>
+                      </span>
+                      <button
+                        type="button"
+                        onClick={() => handleDeleteLearningStep(index)}
+                        className="grid h-8 w-8 shrink-0 place-items-center rounded-md text-[#94a3b8] transition hover:bg-[#fff1f2] hover:text-[#e11d48]"
+                        aria-label={`${index + 1}번 학습단계 삭제`}
+                        title="학습단계 삭제"
+                      >
+                        <Trash2 size={14} aria-hidden="true" />
+                      </button>
+                    </div>
+                  ))
+                ) : (
+                  <p className="rounded-lg border border-dashed border-[#d1d9e6] px-4 py-8 text-center text-[13px] font-bold text-[#64748b]">학습단계가 없습니다.</p>
+                )}
+              </div>
+            </section>
+
+            <section>
+              <div className="flex items-center justify-between gap-3">
+                <div>
+                  <h3 className="text-[15px] font-black text-[#111827]">실습 내용</h3>
+                </div>
+                <button
+                  type="button"
+                  className="inline-flex h-8 items-center gap-1.5 rounded-md border border-[#d1d9e6] bg-white px-3 text-[12px] font-black text-[#475569] transition hover:border-[#2563eb] hover:bg-[#eff6ff] hover:text-[#2563eb]"
+                  onClick={handleAddPracticeContent}
+                >
+                  <Plus size={14} aria-hidden="true" />
+                  추가
+                </button>
+              </div>
+              <div className="mt-3 grid gap-2">
+                {draftPracticeContents.length ? draftPracticeContents.map((item, index) => (
+                  <div key={`practice-${index}`} className="flex items-start gap-3 rounded-lg border border-[#d1d9e6] bg-white px-4 py-3">
+                    <span className="grid h-7 w-7 shrink-0 place-items-center rounded-md bg-[#ede9ff] text-[12px] font-black text-[#4f46e5]">{index + 1}</span>
+                    <span className="grid min-w-0 flex-1 gap-2">
+                      <input
+                        className="h-9 rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-black text-[#111827] outline-none focus:border-[#2563eb]"
+                        value={item.title}
+                        placeholder="제목"
+                        onChange={(event) => handleUpdatePracticeContent(index, 'title', event.target.value)}
+                      />
+                      <textarea
+                        className="min-h-[58px] resize-none rounded-md border border-[#d1d9e6] bg-white px-3 py-2 text-[12px] font-semibold leading-relaxed text-[#64748b] outline-none focus:border-[#2563eb]"
+                        value={item.description}
+                        placeholder="설명"
+                        onChange={(event) => handleUpdatePracticeContent(index, 'description', event.target.value)}
+                      />
+                    </span>
+                    <button
+                      type="button"
+                      onClick={() => handleDeletePracticeContent(index)}
+                      className="grid h-8 w-8 shrink-0 place-items-center rounded-md text-[#94a3b8] transition hover:bg-[#fff1f2] hover:text-[#e11d48]"
+                      aria-label={`${index + 1}번 실습 내용 삭제`}
+                      title="실습 내용 삭제"
+                    >
+                      <Trash2 size={14} aria-hidden="true" />
+                    </button>
+                  </div>
+                )) : (
+                  <p className="rounded-lg border border-dashed border-[#d1d9e6] px-4 py-8 text-center text-[13px] font-bold text-[#64748b]">실습 내용이 없습니다.</p>
+                )}
+              </div>
+            </section>
+            <label className="block">
+              <div className="flex items-center justify-between gap-3">
+                <h3 className="text-[15px] font-black text-[#111827]">제출 기준</h3>
+                <label className="inline-flex cursor-pointer items-center gap-2 text-[12px] font-black text-[#475569]">
+                  <input
+                    type="checkbox"
+                    className="h-4 w-4 cursor-pointer rounded border-[#cbd5e1] text-[#2563eb] focus:ring-[#2563eb]"
+                    checked={draftRequiresSourceSubmission}
+                    onChange={(event) => setDraftRequiresSourceSubmission(event.target.checked)}
+                  />
+                  소스제출
+                </label>
+              </div>
+              <textarea
+                className="mt-1.5 min-h-[84px] w-full resize-none rounded-md border border-[#d1d9e6] bg-white px-3 py-2 text-[13px] font-semibold leading-relaxed text-[#111827] outline-none focus:border-[#2563eb]"
+                value={draftDeliverable}
+                onChange={(event) => setDraftDeliverable(event.target.value)}
+              />
+            </label>
+
+            <section>
+              <div className="flex items-center justify-between gap-3">
+                <h3 className="text-[15px] font-black text-[#111827]">참고자료</h3>
+                <button
+                  type="button"
+                  className="inline-flex h-8 items-center gap-1.5 rounded-md border border-[#d1d9e6] bg-white px-3 text-[12px] font-black text-[#475569] transition hover:border-[#2563eb] hover:bg-[#eff6ff] hover:text-[#2563eb]"
+                  onClick={() => referenceFileInputRef.current?.click()}
+                >
+                  <FileText size={14} aria-hidden="true" />
+                  파일 선택
+                </button>
+              </div>
+
+              <input
+                ref={referenceFileInputRef}
+                type="file"
+                className="hidden"
+                onChange={(event) => {
+                  const file = event.target.files?.[0] ?? null;
+                  setReferenceFile(file);
+                  if (file && !referenceTitle.trim()) setReferenceTitle(file.name);
+                }}
+              />
+
+              <div className="mt-3 grid gap-2 rounded-lg border border-[#d1d9e6] bg-[#f8fafc] p-3">
+                <div className="grid gap-2 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]">
+                  <input
+                    className="h-10 rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-bold text-[#111827] outline-none focus:border-[#2563eb]"
+                    value={referenceTitle}
+                    placeholder="자료명"
+                    onChange={(event) => setReferenceTitle(event.target.value)}
+                  />
+                  <div className="flex h-10 min-w-0 items-center rounded-md border border-[#d1d9e6] bg-white px-3 text-[12px] font-bold text-[#64748b]">
+                    <span className="truncate">{referenceFile?.name ?? '선택된 파일 없음'}</span>
+                  </div>
+                  <button
+                    type="button"
+                    disabled={saving || !referenceFile}
+                    onClick={() => void handleUploadReference()}
+                    className="inline-flex h-10 items-center justify-center gap-1.5 rounded-md bg-[#2563eb] px-4 text-[13px] font-black text-white transition hover:bg-[#1d4ed8] disabled:cursor-not-allowed disabled:opacity-45"
+                  >
+                    {saving ? <Loader2 className="animate-spin" size={14} aria-hidden="true" /> : <Upload size={14} aria-hidden="true" />}
+                    업로드
+                  </button>
+                </div>
+
+                <div className="grid gap-2">
+                  {selectedWeek.detail.references?.length ? selectedWeek.detail.references.map((reference) => (
+                    <div key={reference.id} className="flex items-center gap-3 rounded-md border border-[#cbd5e1] bg-white px-3 py-2">
+                      <FileText className="shrink-0 text-[#64748b]" size={16} aria-hidden="true" />
+                      <div className="min-w-0 flex-1">
+                        <p className="truncate text-[13px] font-black text-[#111827]">{reference.title}</p>
+                        <p className="mt-0.5 truncate text-[11px] font-bold text-[#64748b]">
+                          {reference.fileName}
+                          {reference.fileSizeBytes ? ` · ${formatFileSize(Number(reference.fileSizeBytes))}` : ''}
+                        </p>
+                      </div>
+                      <button
+                        type="button"
+                        disabled={saving}
+                        onClick={() => void handleDeleteReference(reference.id)}
+                        className="grid h-8 w-8 shrink-0 place-items-center rounded-md text-[#94a3b8] transition hover:bg-[#fff1f2] hover:text-[#e11d48] disabled:cursor-not-allowed disabled:opacity-45"
+                        aria-label={`${reference.title} 삭제`}
+                        title="참고자료 삭제"
+                      >
+                        <Trash2 size={14} aria-hidden="true" />
+                      </button>
+                    </div>
+                  )) : (
+                    <p className="rounded-md border border-dashed border-[#d1d9e6] bg-white px-4 py-6 text-center text-[13px] font-bold text-[#64748b]">등록된 참고자료가 없습니다.</p>
+                  )}
+                </div>
+              </div>
+            </section>
+          </div>
+          )}
+        </div>
+      </section>
+
+      <ConfirmDialog
+        open={deleteConfirmOpen && Boolean(selectedWeek)}
+        title={selectedWeek ? `${selectedWeek.week}주차를 삭제할까요?` : '주차를 삭제할까요?'}
+        message="삭제한 주차는 강의 진행 목록과 학생 앱에서 사라집니다. 이 작업은 바로 적용됩니다."
+        detail={selectedWeek ? (
+          <div className="rounded-lg border border-[#fee2e2] bg-[#fff1f2] px-4 py-3">
+            <p className="truncate text-[13px] font-black text-[#111827]">{selectedWeek.title}</p>
+            <p className="mt-1 text-[12px] font-bold text-[#e11d48]">추가 주차만 삭제할 수 있습니다.</p>
+          </div>
+        ) : null}
+        confirmLabel="삭제"
+        loading={saving}
+        danger
+        icon={Trash2}
+        onCancel={() => setDeleteConfirmOpen(false)}
+        onConfirm={() => void handleDeleteWeek()}
+      />
+      <ConfirmDialog
+        open={completeConfirmOpen && Boolean(selectedWeek)}
+        title={selectedWeek ? `${selectedWeek.week}주차를 완료할까요?` : '주차를 완료할까요?'}
+        message="확인하면 선택한 그룹의 해당 주차가 완료 처리됩니다."
+        detail={selectedWeek ? (
+          <div className="rounded-lg border border-[#dbeafe] bg-[#eff6ff] px-4 py-3">
+            <p className="truncate text-[13px] font-black text-[#111827]">{selectedWeek.title}</p>
+            <p className="mt-1 text-[12px] font-bold text-[#2563eb]">현재 단계: {activeLearningStep ?? '미선택'}</p>
+          </div>
+        ) : null}
+        confirmLabel="완료처리"
+        loading={saving}
+        icon={CheckCircle2}
+        onCancel={() => setCompleteConfirmOpen(false)}
+        onConfirm={() => {
+          setCompleteConfirmOpen(false);
+          void handleCompleteWeek();
+        }}
+      />
+    </div>
+  );
+}
+
+function SummaryCard({ label, value, icon: Icon }: { label: string; value: string; icon: LucideIcon }) {
+  return (
+    <article className="rounded-lg border border-[#c7d2e0] bg-white px-5 py-4">
+      <div className="flex items-center justify-between gap-3">
+        <div className="min-w-0">
+          <p className="text-[12px] font-semibold text-[#64748b]">{label}</p>
+          <p className="mt-2 truncate text-[18px] font-black leading-none text-[#111827]">{value}</p>
+        </div>
+        <span className="grid h-11 w-11 shrink-0 place-items-center rounded-md bg-[#eff6ff] text-[#2563eb]">
+          <Icon size={24} aria-hidden="true" />
+        </span>
+      </div>
+    </article>
+  );
+}
+
+function formatFileSize(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes <= 0) return '0 B';
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
diff --git a/src/pages/dashboard/DashboardPage.tsx b/src/pages/dashboard/DashboardPage.tsx
new file mode 100644
index 0000000..9181400
--- /dev/null
+++ b/src/pages/dashboard/DashboardPage.tsx
@@ -0,0 +1,348 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Activity, BarChart3, Car, ChevronRight, CircleAlert, Loader2, Users, Wifi, type LucideIcon } from 'lucide-react';
+import { PageHeader } from '../../components/PageHeader';
+import { useToast } from '../../components/ToastProvider';
+import { listInstructorChatThreads, type InstructorChatThread } from '../../lib/chat';
+import { listInstructorGroups, type InstructorGroup, type InstructorGroupsSummary } from '../../lib/groups';
+import { listInstructorPlatforms, type InstructorPlatform, type InstructorPlatformsSummary } from '../../lib/platforms';
+import type { AppRoute } from '../../routes';
+import type { AuthSession } from '../../types/auth';
+
+const emptyPlatformSummary: InstructorPlatformsSummary = {
+  totalPlatforms: 0,
+  activePlatforms: 0,
+  standbyPlatforms: 0,
+  errorPlatforms: 0,
+};
+
+const emptyGroupSummary: InstructorGroupsSummary = {
+  totalGroups: 0,
+  assignedPlatforms: 0,
+  totalStudents: 0,
+  averageProgress: 0,
+};
+
+export function DashboardPage({ session, selectedCourseId, onNavigate, onOpenChatThread }: { session: AuthSession; selectedCourseId: string; onNavigate?: (route: AppRoute) => void; onOpenChatThread?: (threadId: string) => void }) {
+  const { showToast } = useToast();
+  const [platforms, setPlatforms] = useState<InstructorPlatform[]>([]);
+  const [platformSummary, setPlatformSummary] = useState<InstructorPlatformsSummary>(emptyPlatformSummary);
+  const [groups, setGroups] = useState<InstructorGroup[]>([]);
+  const [groupSummary, setGroupSummary] = useState<InstructorGroupsSummary>(emptyGroupSummary);
+  const [threads, setThreads] = useState<InstructorChatThread[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+
+    Promise.allSettled([
+      listInstructorPlatforms(session.accessToken),
+      listInstructorGroups(session.accessToken, selectedCourseId || null),
+      listInstructorChatThreads(session.accessToken),
+    ])
+      .then(([platformResult, groupResult, chatResult]) => {
+        if (cancelled) return;
+
+        if (platformResult.status === 'fulfilled') {
+          setPlatforms(platformResult.value.platforms);
+          setPlatformSummary(platformResult.value.summary);
+        } else {
+          setPlatforms([]);
+          setPlatformSummary(emptyPlatformSummary);
+        }
+
+        if (groupResult.status === 'fulfilled') {
+          setGroups(groupResult.value.groups);
+          setGroupSummary(groupResult.value.summary);
+        } else {
+          setGroups([]);
+          setGroupSummary(emptyGroupSummary);
+        }
+
+        if (chatResult.status === 'fulfilled') {
+          setThreads(chatResult.value);
+        } else {
+          setThreads([]);
+        }
+
+        const failed = [platformResult, groupResult].filter((result) => result.status === 'rejected');
+        setError(failed.length > 0 ? '대시보드 일부 데이터를 불러오지 못했습니다.' : null);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [session.accessToken, selectedCourseId]);
+
+  const waitingThreads = useMemo(() => threads.filter((thread) => thread.status === 'WAITING_INSTRUCTOR'), [threads]);
+  const activeUsers = useMemo(() => {
+    const groupActiveUsers = groups.reduce((sum, group) => sum + group.activeUsers, 0);
+    if (groupActiveUsers > 0) return groupActiveUsers;
+    return platforms.filter((platform) => platform.user).length;
+  }, [groups, platforms]);
+
+  const metrics = [
+    { label: '활성 플랫폼', value: `${platformSummary.activePlatforms}/${platformSummary.totalPlatforms}`, icon: Activity, tone: 'bg-[#f0efff] text-[#4f46e5]' },
+    { label: '총 수강생', value: `${groupSummary.totalStudents}명`, icon: Users, tone: 'bg-[#eff6ff] text-[#2563eb]' },
+    { label: '현재 접속', value: `${activeUsers}명`, icon: Wifi, tone: 'bg-[#f8fafc] text-[#64748b]' },
+    { label: '평균 진도', value: `${groupSummary.averageProgress}%`, icon: BarChart3, tone: 'bg-[#fff7ed] text-[#f97316]' },
+  ];
+
+  return (
+    <div className="mx-auto max-w-[1220px]">
+      <PageHeader route="dashboard" />
+
+      {error ? <p className="mb-4 rounded-md border border-[#fecdd3] bg-[#fff1f2] px-4 py-3 text-[13px] font-bold text-[#e11d48]">{error}</p> : null}
+
+      <section className="mb-4 grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+        {metrics.map((metric) => (
+          <MetricCard key={metric.label} {...metric} loading={loading} />
+        ))}
+      </section>
+
+      <section className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
+        <div className="rounded-lg border border-[#c7d2e0] bg-white">
+          <div className="flex items-start justify-between gap-3 border-b border-[#cbd5e1] px-4 py-4">
+            <div>
+              <h2 className="text-[15px] font-black text-[#111827]">플랫폼 실시간 상태</h2>
+              <p className="mt-1 text-[12px] font-bold text-[#64748b]">하드웨어 모니터링</p>
+            </div>
+            <button
+              type="button"
+              className="grid h-8 w-8 shrink-0 place-items-center rounded-md border border-[#dbe3ef] bg-white text-[#64748b] transition hover:border-[#bfdbfe] hover:bg-[#eff6ff] hover:text-[#2563eb]"
+              onClick={() => onNavigate?.('platforms')}
+              aria-label="플랫폼 관리로 이동"
+              title="플랫폼 관리로 이동"
+            >
+              <ChevronRight size={17} aria-hidden="true" />
+            </button>
+          </div>
+
+          <div className="max-h-[490px] space-y-3 overflow-y-auto p-4">
+            {loading ? (
+              <LoadingState message="플랫폼 상태를 불러오는 중입니다." />
+            ) : platforms.length > 0 ? (
+              platforms.map((platform) => (
+                <PlatformStatusCard
+                  key={platform.id}
+                  platform={platform}
+                  onEmergencyStop={() => {
+                    showToast({
+                      title: '긴급 정지 요청이 전송되었습니다.',
+                      message: platform.name,
+                      variant: 'error',
+                    });
+                  }}
+                />
+              ))
+            ) : (
+              <EmptyState message="등록된 플랫폼이 없습니다." />
+            )}
+          </div>
+        </div>
+
+        <div className="rounded-lg border border-[#c7d2e0] bg-white">
+          <div className="flex items-start justify-between gap-3 border-b border-[#cbd5e1] px-4 py-4">
+            <div>
+              <h2 className="text-[15px] font-black text-[#111827]">그룹 진행 요약</h2>
+              <p className="mt-1 text-[12px] font-bold text-[#64748b]">그룹 구성, 플랫폼 배정, 진행률 조회</p>
+            </div>
+            <button
+              type="button"
+              className="grid h-8 w-8 shrink-0 place-items-center rounded-md border border-[#dbe3ef] bg-white text-[#64748b] transition hover:border-[#bfdbfe] hover:bg-[#eff6ff] hover:text-[#2563eb]"
+              onClick={() => onNavigate?.('groups')}
+              aria-label="그룹 관리로 이동"
+              title="그룹 관리로 이동"
+            >
+              <ChevronRight size={17} aria-hidden="true" />
+            </button>
+          </div>
+
+          <div className="max-h-[490px] space-y-3 overflow-y-auto p-4">
+            {loading ? (
+              <LoadingState message="그룹 진행 정보를 불러오는 중입니다." />
+            ) : groups.length > 0 ? (
+              groups.map((group) => (
+                <GroupSummaryCard key={group.id} group={group} />
+              ))
+            ) : (
+              <EmptyState message="등록된 그룹이 없습니다." />
+            )}
+          </div>
+        </div>
+      </section>
+
+      <section className="mt-4 rounded-lg border border-[#c7d2e0] bg-white">
+        <div className="flex items-start justify-between gap-4 border-b border-[#cbd5e1] px-4 py-4">
+          <div>
+            <h2 className="text-[15px] font-black text-[#111827]">AI 가이드 에스컬레이션</h2>
+            <p className="mt-1 text-[12px] font-bold text-[#64748b]">강사 지원이 필요한 질문</p>
+          </div>
+          <span className="rounded-full bg-[#fff1f2] px-2.5 py-1 text-[13px] font-bold text-[#e11d48]">{waitingThreads.length} 건</span>
+        </div>
+
+        <div className="divide-y divide-[#e2e8f0]">
+          {loading ? (
+            <LoadingState message="문의 목록을 불러오는 중입니다." />
+          ) : waitingThreads.length > 0 ? (
+            waitingThreads.slice(0, 5).map((thread) => (
+              <EscalationRow key={thread.id} thread={thread} onRespond={() => onOpenChatThread?.(thread.id)} />
+            ))
+          ) : (
+            <EmptyState message="강사 지원이 필요한 질문이 없습니다." />
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function PlatformStatusCard({ platform, onEmergencyStop }: { platform: InstructorPlatform; onEmergencyStop: () => void }) {
+  return (
+    <article className="flex min-h-[72px] items-center gap-3 rounded-lg border border-[#c7d2e0] bg-white px-3 py-3">
+      <div className={`grid h-10 w-10 shrink-0 place-items-center rounded-md ${platform.status === '오류' ? 'bg-[#fff1f2] text-[#e11d48]' : 'bg-[#f0efff] text-[#4f46e5]'}`}>
+        <Car size={18} aria-hidden="true" />
+      </div>
+
+      <div className="min-w-0 flex-1">
+        <div className="flex flex-wrap items-center gap-2">
+          <h3 className="truncate text-[14px] font-bold text-[#111827]">{platform.name}</h3>
+          <span className={`inline-flex h-6 items-center rounded-full border border-current/20 px-2 text-[11px] font-bold ${statusTone(platform.status)}`}>{platform.status}</span>
+        </div>
+        <p className="mt-1 truncate text-[12px] font-bold text-[#64748b]">
+          {platform.user ? `사용자: ${platform.user}   배터리: ${platform.battery}%   속도: ${platform.speed}` : `배터리: ${platform.battery}%`}
+        </p>
+      </div>
+
+      {platform.emergencyStop ? (
+        <button className="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md bg-[#e11d48] px-3 text-[12px] font-bold text-white hover:bg-[#be123c]" type="button" onClick={onEmergencyStop}>
+          <CircleAlert size={14} aria-hidden="true" />
+          긴급 정지
+        </button>
+      ) : null}
+    </article>
+  );
+}
+
+function GroupSummaryCard({ group }: { group: InstructorGroup }) {
+  return (
+    <article className="rounded-lg border border-[#c7d2e0] bg-white px-4 py-3">
+      <div className="mb-3 flex items-start justify-between gap-4">
+        <div className="min-w-0">
+          <div className="flex flex-wrap items-center gap-2">
+            <h3 className="text-[14px] font-black text-[#111827]">{group.name}</h3>
+            <span className="inline-flex h-6 items-center rounded-full border border-[#c7d2e0] bg-[#f8fafc] px-2 text-[11px] font-bold text-[#64748b]">{group.status}</span>
+          </div>
+          <p className="mt-1 text-[12px] font-bold text-[#64748b]">{group.members.length}명 | {group.week}</p>
+        </div>
+        <span className={`inline-flex h-7 shrink-0 items-center rounded-full border px-2.5 text-[11px] font-black ${group.platform === '미배정' ? 'border-[#d1d9e6] bg-[#f8fafc] text-[#94a3b8]' : 'border-[#c7d2fe] bg-[#eef2ff] text-[#4f46e5]'}`}>{group.platform}</span>
+      </div>
+
+      <div className="mb-2 flex items-center justify-between text-[12px] font-bold text-[#475569]">
+        <span>진행률</span>
+        <span className="text-[#4f46e5]">{group.progress}%</span>
+      </div>
+      <div className="h-1.5 overflow-hidden rounded-full bg-[#dbe3ef]">
+        <div className="h-full rounded-full bg-[#4f46e5]" style={{ width: `${group.progress}%` }} />
+      </div>
+
+      <div className="mt-3 flex items-center gap-4 text-[11px] font-bold text-[#94a3b8]">
+        <span>
+          완료 <strong className="text-[#64748b]">{group.completedMissions}</strong>
+        </span>
+        <span>
+          활동 <strong className={group.activeUsers > 0 ? 'text-[#4f46e5]' : 'text-[#94a3b8]'}>{group.activeUsers}</strong>
+        </span>
+      </div>
+    </article>
+  );
+}
+
+function EscalationRow({ thread, onRespond }: { thread: InstructorChatThread; onRespond?: () => void }) {
+  return (
+    <article className="grid gap-3 px-4 py-4 lg:grid-cols-[minmax(150px,180px)_minmax(0,1fr)_auto] lg:items-center">
+      <div className="flex min-w-0 items-center gap-2">
+        <span className="grid h-8 w-8 shrink-0 place-items-center rounded-md bg-[#fff1f2] text-[#e11d48]">
+          <CircleAlert size={16} aria-hidden="true" />
+        </span>
+        <div className="min-w-0">
+          <div className="flex flex-wrap items-center gap-2">
+            <h3 className="truncate text-[14px] font-bold text-[#111827]">{thread.studentName}</h3>
+            <span className="rounded border border-[#d1d9e6] px-1.5 py-0.5 text-[11px] font-bold text-[#475569]">{thread.groupName ?? (thread.week ? `${thread.week}주차` : '미배정')}</span>
+          </div>
+          <p className="mt-1 text-[12px] font-medium text-[#94a3b8]">{formatRelativeTime(thread.lastMessageAt)}</p>
+        </div>
+      </div>
+
+      <p className="min-w-0 text-[13px] font-semibold leading-6 text-[#111827]">{thread.lastMessage}</p>
+
+      <button
+        className="h-8 cursor-pointer justify-self-start rounded-md border border-[#c7d2fe] bg-[#eef2ff] px-3 text-[12px] font-bold text-[#4f46e5] hover:bg-[#e0e7ff] lg:justify-self-end"
+        type="button"
+        onClick={onRespond}
+      >
+        응답하기
+      </button>
+    </article>
+  );
+}
+
+function MetricCard({ label, value, icon: Icon, tone, loading = false }: { label: string; value: string; icon: LucideIcon; tone: string; loading?: boolean }) {
+  return (
+    <article className="rounded-lg border border-[#c7d2e0] bg-white px-5 py-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-[12px] font-semibold text-[#64748b]">{label}</p>
+          <p className="mt-2 text-[20px] font-black leading-none text-[#111827]">{loading ? '-' : value}</p>
+        </div>
+        <span className={`grid h-11 w-11 shrink-0 place-items-center rounded-md ${tone}`}>
+          <Icon size={28} aria-hidden="true" />
+        </span>
+      </div>
+    </article>
+  );
+}
+
+function LoadingState({ message }: { message: string }) {
+  return (
+    <div className="flex h-[180px] items-center justify-center text-[#64748b]">
+      <Loader2 className="mr-2 animate-spin" size={18} aria-hidden="true" />
+      <span className="text-[13px] font-bold">{message}</span>
+    </div>
+  );
+}
+
+function EmptyState({ message }: { message: string }) {
+  return (
+    <div className="flex h-[180px] items-center justify-center px-4 text-center">
+      <p className="text-[13px] font-bold text-[#64748b]">{message}</p>
+    </div>
+  );
+}
+
+function statusTone(status: string) {
+  if (status === '활성') return 'bg-[#f0efff] text-[#4f46e5]';
+  if (status === '오류') return 'bg-[#fff1f2] text-[#e11d48]';
+  return 'bg-[#f1f5f9] text-[#64748b]';
+}
+
+function formatRelativeTime(value: string | undefined) {
+  if (!value) return '-';
+  const time = new Date(value).getTime();
+  if (Number.isNaN(time)) return '-';
+
+  const diffMinutes = Math.max(0, Math.floor((Date.now() - time) / 60000));
+  if (diffMinutes < 1) return '방금 전';
+  if (diffMinutes < 60) return `${diffMinutes}분 전`;
+
+  const diffHours = Math.floor(diffMinutes / 60);
+  if (diffHours < 24) return `${diffHours}시간 전`;
+
+  const diffDays = Math.floor(diffHours / 24);
+  return `${diffDays}일 전`;
+}
diff --git a/src/pages/groups/GroupsPage.tsx b/src/pages/groups/GroupsPage.tsx
new file mode 100644
index 0000000..924cde5
--- /dev/null
+++ b/src/pages/groups/GroupsPage.tsx
@@ -0,0 +1,471 @@
+import { useEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Activity, BarChart3, Car, Edit3, Loader2, Plus, Search, Trash2, Users, X, type LucideIcon } from 'lucide-react';
+import { PageHeader } from '../../components/PageHeader';
+import { PaginationBar } from '../../components/PaginationBar';
+import { useToast } from '../../components/ToastProvider';
+import {
+  createInstructorGroup,
+  deleteInstructorGroup,
+  listInstructorGroups,
+  updateInstructorGroup,
+  type GroupStudentOption,
+  type GroupPlatformOption,
+  type InstructorGroup,
+  type InstructorGroupsResponse,
+  type InstructorGroupsSummary,
+} from '../../lib/groups';
+import type { AuthSession } from '../../types/auth';
+
+const emptySummary: InstructorGroupsSummary = {
+  totalGroups: 0,
+  assignedPlatforms: 0,
+  totalStudents: 0,
+  averageProgress: 0,
+};
+
+export function GroupsPage({ session, selectedCourseId }: { session: AuthSession; selectedCourseId: string }) {
+  const { showToast } = useToast();
+  const [groups, setGroups] = useState<InstructorGroup[]>([]);
+  const [summary, setSummary] = useState<InstructorGroupsSummary>(emptySummary);
+  const [unassignedStudents, setUnassignedStudents] = useState<GroupStudentOption[]>([]);
+  const [platformOptions, setPlatformOptions] = useState<GroupPlatformOption[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [query, setQuery] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [modalMode, setModalMode] = useState<'create' | 'edit' | null>(null);
+  const [editingGroup, setEditingGroup] = useState<InstructorGroup | null>(null);
+  const [groupName, setGroupName] = useState('');
+  const [selectedPlatform, setSelectedPlatform] = useState('unassigned');
+  const [selectedMemberIds, setSelectedMemberIds] = useState<string[]>([]);
+  const [formError, setFormError] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<InstructorGroup | null>(null);
+  const [deletingGroupId, setDeletingGroupId] = useState<string | null>(null);
+  const filteredGroups = useMemo(() => {
+    const keyword = query.trim().toLowerCase();
+    if (!keyword) return groups;
+    return groups.filter((group) =>
+      [group.name, group.platform, ...group.members]
+        .join(' ')
+        .toLowerCase()
+        .includes(keyword),
+    );
+  }, [groups, query]);
+  const pagedGroups = useMemo(() => filteredGroups.slice((page - 1) * pageSize, page * pageSize), [filteredGroups, page, pageSize]);
+  const summaryItems = [
+    { label: '전체 그룹', value: `${summary.totalGroups}개`, icon: Users, tone: 'bg-[#f0efff] text-[#4f46e5]' },
+    { label: '배정 플랫폼', value: `${summary.assignedPlatforms}대`, icon: Car, tone: 'bg-[#eff6ff] text-[#2563eb]' },
+    { label: '수강생', value: `${summary.totalStudents}명`, icon: Activity, tone: 'bg-[#fff7ed] text-[#f97316]' },
+    { label: '평균 진도', value: `${summary.averageProgress}%`, icon: BarChart3, tone: 'bg-[#f8fafc] text-[#64748b]' }
+  ];
+
+  const applyGroupsPayload = (payload: InstructorGroupsResponse) => {
+    setError(null);
+    setGroups(payload.groups);
+    setSummary(payload.summary);
+    setUnassignedStudents(payload.unassignedStudents ?? []);
+    setPlatformOptions(payload.platformOptions ?? []);
+  };
+
+  useEffect(() => {
+    let cancelled = false;
+    listInstructorGroups(session.accessToken, selectedCourseId || null)
+      .then((payload) => {
+        if (cancelled) return;
+        applyGroupsPayload(payload);
+      })
+      .catch((reason: Error) => {
+        if (cancelled) return;
+        setGroups([]);
+        setSummary(emptySummary);
+        setError(reason.message);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [session.accessToken, selectedCourseId]);
+
+  useEffect(() => {
+    setPage(1);
+  }, [query]);
+
+  useEffect(() => {
+    const totalPages = Math.max(1, Math.ceil(filteredGroups.length / pageSize));
+    if (page > totalPages) setPage(totalPages);
+  }, [filteredGroups.length, page, pageSize]);
+
+  useEffect(() => {
+    if (!modalMode && !deleteTarget) return;
+
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, [deleteTarget, modalMode]);
+
+  const handlePageSizeChange = (nextPageSize: number) => {
+    setPageSize(nextPageSize);
+    setPage(1);
+  };
+
+  const openCreateModal = () => {
+    setModalMode('create');
+    setEditingGroup(null);
+    setGroupName('');
+    setSelectedPlatform('unassigned');
+    setSelectedMemberIds([]);
+    setFormError(null);
+  };
+
+  const openEditModal = (group: InstructorGroup) => {
+    setModalMode('edit');
+    setEditingGroup(group);
+    setGroupName(group.name);
+    setSelectedPlatform(group.instructorPlatformId ?? 'unassigned');
+    setSelectedMemberIds((group.membersDetailed ?? []).map((member) => member.id));
+    setFormError(null);
+  };
+
+  const closeGroupModal = () => {
+    if (saving) return;
+    setModalMode(null);
+    setEditingGroup(null);
+  };
+
+  const availableStudents = useMemo(() => {
+    const currentMembers = editingGroup?.membersDetailed ?? [];
+    const byId = new Map<string, GroupStudentOption>();
+    [...currentMembers, ...unassignedStudents].forEach((student) => byId.set(student.id, student));
+    return [...byId.values()].sort((left, right) => left.name.localeCompare(right.name, 'ko'));
+  }, [editingGroup, unassignedStudents]);
+
+  const availablePlatforms = useMemo(() => {
+    const byId = new Map<string, GroupPlatformOption>();
+    if (editingGroup?.instructorPlatformId && editingGroup.platform !== '미배정') {
+      byId.set(editingGroup.instructorPlatformId, {
+        id: editingGroup.instructorPlatformId,
+        name: editingGroup.platform,
+      });
+    }
+    platformOptions.forEach((platform) => byId.set(platform.id, platform));
+    return [...byId.values()].sort((left, right) => left.name.localeCompare(right.name, 'ko'));
+  }, [editingGroup, platformOptions]);
+
+  const toggleMember = (studentId: string) => {
+    setSelectedMemberIds((current) =>
+      current.includes(studentId)
+        ? current.filter((id) => id !== studentId)
+        : [...current, studentId],
+    );
+  };
+
+  const handleSaveGroup = async () => {
+    const name = groupName.trim();
+    if (!name) {
+      setFormError('그룹명을 입력해 주세요.');
+      return;
+    }
+
+    setSaving(true);
+    setFormError(null);
+    try {
+      const input = {
+        courseId: selectedCourseId || null,
+        name,
+        instructorPlatformId: selectedPlatform === 'unassigned' ? null : selectedPlatform,
+        platformName: availablePlatforms.find((platform) => platform.id === selectedPlatform)?.name ?? null,
+        memberIds: selectedMemberIds,
+      };
+      const payload = modalMode === 'edit' && editingGroup
+        ? await updateInstructorGroup(session.accessToken, editingGroup.id, input)
+        : await createInstructorGroup(session.accessToken, input);
+      applyGroupsPayload(payload);
+      showToast({
+        title: modalMode === 'edit' ? '그룹이 수정되었습니다.' : '그룹이 추가되었습니다.',
+        message: name,
+      });
+      setModalMode(null);
+      setEditingGroup(null);
+      setPage(1);
+    } catch (reason) {
+      setFormError(reason instanceof Error ? reason.message : '그룹을 저장하지 못했습니다.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeleteGroup = async (group: InstructorGroup) => {
+    setDeletingGroupId(group.id);
+    setError(null);
+    try {
+      const payload = await deleteInstructorGroup(session.accessToken, group.id, selectedCourseId || null);
+      applyGroupsPayload(payload);
+      showToast({
+        title: '그룹이 삭제되었습니다.',
+        message: group.name,
+      });
+      setDeleteTarget(null);
+      setPage(1);
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : '그룹을 삭제하지 못했습니다.');
+    } finally {
+      setDeletingGroupId(null);
+    }
+  };
+
+  return (
+    <div className="mx-auto max-w-[1220px]">
+      <PageHeader
+        route="groups"
+        action={
+          <button className="inline-flex h-9 items-center gap-2 rounded-md bg-[#2563eb] px-3 text-[13px] font-bold text-white hover:bg-[#1d4ed8]" type="button" onClick={openCreateModal}>
+          <Plus size={15} aria-hidden="true" />
+          그룹 추가
+          </button>
+        }
+      />
+
+      <section className="mb-4 grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+        {summaryItems.map((item) => (
+          <SummaryCard key={item.label} {...item} />
+        ))}
+      </section>
+
+      <section className="rounded-lg border border-[#c7d2e0] bg-white">
+        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-[#cbd5e1] px-4 py-3">
+          <div>
+            <h2 className="text-[15px] font-black text-[#111827]">그룹 리스트</h2>
+            <p className="mt-1 text-[12px] font-bold text-[#64748b]">그룹 구성, 플랫폼 배정, 진행률 조회</p>
+          </div>
+
+          <label className="flex h-9 w-full max-w-[260px] items-center gap-2 rounded-md border border-[#d1d9e6] bg-white px-3 text-[#94a3b8]">
+            <Search size={15} aria-hidden="true" />
+            <input className="min-w-0 flex-1 bg-transparent text-[13px] font-bold text-[#111827] outline-none placeholder:text-[#94a3b8]" placeholder="그룹 검색" value={query} onChange={(event) => setQuery(event.target.value)} />
+          </label>
+        </div>
+
+        <div>
+          <div className="hidden gap-4 grid-cols-[44px_190px_minmax(220px,1fr)_170px_190px_74px] items-center border-b border-[#cbd5e1] bg-[#f8fafc] px-4 py-3 text-center text-[11px] font-bold text-[#64748b] xl:grid">
+            <span>No.</span>
+            <span>그룹</span>
+            <span>그룹원</span>
+            <span>플랫폼</span>
+            <span>진행률</span>
+            <span>관리</span>
+          </div>
+
+          <div className="divide-y divide-[#e2e8f0]">
+          {error ? (
+            <div className="flex h-[220px] items-center justify-center px-4 text-center">
+              <p className="text-[13px] font-bold text-[#64748b]">{error}</p>
+            </div>
+          ) : pagedGroups.length > 0 ? (
+            pagedGroups.map((group, index) => (
+            <article className="grid gap-4 px-4 py-4 xl:grid-cols-[44px_190px_minmax(220px,1fr)_170px_190px_74px] xl:items-center" key={group.name}>
+              <div className="text-center">
+                <p className="mb-2 text-[11px] font-bold text-[#94a3b8] xl:hidden">번호</p>
+                <span className="text-[13px] font-bold text-[#64748b]">{filteredGroups.length - ((page - 1) * pageSize + index)}</span>
+              </div>
+
+              <div className="flex min-w-0 items-center gap-3">
+                <span className="grid h-10 w-10 shrink-0 place-items-center rounded-md bg-[#f0efff] text-[#4f46e5]">
+                  <Users size={17} aria-hidden="true" />
+                </span>
+                <div className="min-w-0">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <h3 className="text-[14px] font-black text-[#111827]">{group.name}</h3>
+                    <span className="rounded bg-[#f1f5f9] px-1.5 py-0.5 text-[11px] font-bold text-[#64748b]">{group.status}</span>
+                  </div>
+                  <p className="mt-1 text-[12px] font-bold text-[#64748b]">
+                    {group.members.length}명 | {group.week}
+                  </p>
+                </div>
+              </div>
+
+              <div className="min-w-0">
+                <p className="mb-2 text-[11px] font-bold text-[#94a3b8]">그룹원</p>
+                <div className="flex flex-wrap gap-1.5">
+                  {group.members.map((member) => (
+                    <span className="rounded bg-[#f8fafc] px-2 py-1 text-[12px] font-bold text-[#334155]" key={member}>
+                      {member}
+                    </span>
+                  ))}
+                </div>
+              </div>
+
+              <div className="text-center">
+                <p className="mb-2 text-[11px] font-bold text-[#94a3b8]">플랫폼</p>
+                <span className="inline-flex h-7 items-center rounded-md bg-[#f1f5f9] px-2.5 text-[12px] font-bold text-[#111827]">{group.platform}</span>
+              </div>
+
+              <div>
+                <div className="mb-2 flex items-center justify-between text-[12px] font-bold text-[#475569]">
+                  <span>진행률</span>
+                  <span className="text-[#4f46e5]">{group.progress}%</span>
+                </div>
+                <div className="h-1.5 overflow-hidden rounded-full bg-[#dbe3ef]">
+                  <div className="h-full rounded-full bg-[#4f46e5]" style={{ width: `${group.progress}%` }} />
+                </div>
+                <p className="mt-2 text-center text-[11px] font-bold text-[#94a3b8]">
+                  완료 {group.completedMissions} · 활동 {group.activeUsers}
+                </p>
+              </div>
+
+              <div className="flex items-center justify-center gap-2">
+                <button className="grid h-8 w-8 place-items-center rounded-md border border-[#c7d2fe] bg-[#eef2ff] text-[#4f46e5] hover:bg-[#e0e7ff]" type="button" aria-label={`${group.name} 수정`} title="수정" onClick={() => openEditModal(group)}>
+                  <Edit3 size={15} aria-hidden="true" />
+                </button>
+                <button className="grid h-8 w-8 place-items-center rounded-md border border-[#fecdd3] bg-[#fff1f2] text-[#e11d48] hover:bg-[#ffe4e6] disabled:cursor-not-allowed disabled:opacity-60" type="button" aria-label={`${group.name} 삭제`} title="삭제" onClick={() => setDeleteTarget(group)} disabled={deletingGroupId === group.id}>
+                  {deletingGroupId === group.id ? <Loader2 className="animate-spin" size={15} aria-hidden="true" /> : <Trash2 size={15} aria-hidden="true" />}
+                </button>
+              </div>
+            </article>
+            ))
+          ) : (
+            <div className="flex h-[220px] items-center justify-center px-4 text-center">
+              <p className="text-[13px] font-bold text-[#64748b]">조회된 그룹이 없습니다.</p>
+            </div>
+          )}
+          </div>
+        </div>
+
+        <PaginationBar
+          page={page}
+          pageSize={pageSize}
+          totalItems={filteredGroups.length}
+          totalLabel={`전체 ${filteredGroups.length}개`}
+          onPageChange={setPage}
+          onPageSizeChange={handlePageSizeChange}
+        />
+      </section>
+
+      {modalMode ? createPortal((
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#0f172a]/25 px-4">
+          <div className="flex max-h-[86vh] w-full max-w-[620px] flex-col rounded-lg border border-[#c7d2e0] bg-white shadow-[0_24px_70px_rgba(15,23,42,0.18)]">
+            <div className="flex items-center justify-between border-b border-[#cbd5e1] px-5 py-4">
+              <div>
+                <h2 className="text-[16px] font-black text-[#111827]">{modalMode === 'edit' ? '그룹 수정' : '그룹 추가'}</h2>
+                <p className="mt-1 text-[12px] font-bold text-[#64748b]">그룹 정보와 배정 인원을 설정해 주세요.</p>
+              </div>
+              <button className="grid h-8 w-8 place-items-center rounded-md text-[#64748b] hover:bg-[#f1f5f9] hover:text-[#111827]" type="button" onClick={closeGroupModal} disabled={saving} aria-label="닫기" title="닫기">
+                <X size={17} aria-hidden="true" />
+              </button>
+            </div>
+
+            <div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-5 py-5">
+              <label className="block">
+                <span className="mb-2 block text-[12px] font-black text-[#334155]">그룹명</span>
+                <input
+                  className="h-10 w-full rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-semibold text-[#111827] outline-none placeholder:text-[#94a3b8] focus:border-[#2563eb] focus:ring-2 focus:ring-[#dbeafe]"
+                  placeholder="그룹명 입력"
+                  value={groupName}
+                  onChange={(event) => setGroupName(event.target.value)}
+                />
+              </label>
+
+              <label className="block">
+                <span className="mb-2 block text-[12px] font-black text-[#334155]">플랫폼</span>
+                <select
+                  className="h-10 w-full rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-semibold text-[#111827] outline-none focus:border-[#2563eb] focus:ring-2 focus:ring-[#dbeafe]"
+                  value={selectedPlatform}
+                  onChange={(event) => setSelectedPlatform(event.target.value)}
+                >
+                  <option value="unassigned">미배정</option>
+                  {availablePlatforms.map((platform) => (
+                    <option key={platform.id} value={platform.id}>{platform.name}</option>
+                  ))}
+                </select>
+              </label>
+
+              <div>
+                <div className="mb-2 flex items-center justify-between">
+                  <span className="text-[12px] font-black text-[#334155]">그룹원</span>
+                  <span className="text-[12px] font-bold text-[#64748b]">선택 {selectedMemberIds.length}명</span>
+                </div>
+                <div className="max-h-[260px] space-y-2 overflow-y-auto rounded-lg border border-[#d1d9e6] bg-[#f8fafc] p-2">
+                  {availableStudents.length > 0 ? availableStudents.map((student) => (
+                    <label className="flex cursor-pointer items-center gap-3 rounded-md bg-white px-3 py-2 hover:bg-[#f8faff]" key={student.id}>
+                      <input
+                        className="h-4 w-4 accent-[#4f46e5]"
+                        type="checkbox"
+                        checked={selectedMemberIds.includes(student.id)}
+                        onChange={() => toggleMember(student.id)}
+                      />
+                      <span className="min-w-0 flex-1">
+                        <span className="block truncate text-[13px] font-black text-[#111827]">{student.name}</span>
+                        <span className="mt-0.5 block truncate text-[12px] font-semibold text-[#64748b]">{student.email}</span>
+                      </span>
+                    </label>
+                  )) : (
+                    <div className="flex h-[120px] items-center justify-center text-[13px] font-bold text-[#64748b]">배정 가능한 수강생이 없습니다.</div>
+                  )}
+                </div>
+              </div>
+
+              {formError ? <p className="rounded-md bg-[#fff1f2] px-3 py-2 text-[12px] font-bold text-[#e11d48]">{formError}</p> : null}
+            </div>
+
+            <div className="flex justify-end gap-2 border-t border-[#cbd5e1] px-5 py-4">
+              <button className="h-9 rounded-md border border-[#d1d9e6] bg-white px-4 text-[13px] font-bold text-[#475569] hover:bg-[#f8fafc]" type="button" onClick={closeGroupModal} disabled={saving}>취소</button>
+              <button className="inline-flex h-9 items-center gap-2 rounded-md bg-[#2563eb] px-4 text-[13px] font-bold text-white hover:bg-[#1d4ed8] disabled:cursor-not-allowed disabled:opacity-60" type="button" onClick={handleSaveGroup} disabled={saving}>
+                {saving ? <Loader2 className="animate-spin" size={15} aria-hidden="true" /> : <Plus size={15} aria-hidden="true" />}
+                저장
+              </button>
+            </div>
+          </div>
+        </div>
+      ), document.body) : null}
+
+      {deleteTarget ? createPortal((
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#0f172a]/25 px-4">
+          <div className="w-full max-w-[420px] rounded-lg border border-[#c7d2e0] bg-white shadow-[0_24px_70px_rgba(15,23,42,0.18)]">
+            <div className="flex items-center justify-between border-b border-[#cbd5e1] px-5 py-4">
+              <div>
+                <h2 className="text-[16px] font-black text-[#111827]">그룹 삭제</h2>
+                <p className="mt-1 text-[12px] font-bold text-[#64748b]">그룹원은 모두 미배정 상태가 됩니다.</p>
+              </div>
+              <button className="grid h-8 w-8 place-items-center rounded-md text-[#64748b] hover:bg-[#f1f5f9] hover:text-[#111827]" type="button" onClick={() => setDeleteTarget(null)} disabled={deletingGroupId === deleteTarget.id} aria-label="닫기" title="닫기">
+                <X size={17} aria-hidden="true" />
+              </button>
+            </div>
+            <div className="px-5 py-5">
+              <div className="rounded-lg border border-[#cbd5e1] bg-[#f8fafc] px-4 py-3">
+                <p className="text-[14px] font-black text-[#111827]">{deleteTarget.name}</p>
+                <p className="mt-1 text-[12px] font-semibold text-[#64748b]">{deleteTarget.members.length}명 | {deleteTarget.platform}</p>
+              </div>
+              <p className="mt-4 text-[13px] font-bold leading-relaxed text-[#475569]">그룹만 삭제되고 수강생 계정과 수강 등록은 유지됩니다.</p>
+            </div>
+            <div className="flex justify-end gap-2 border-t border-[#cbd5e1] px-5 py-4">
+              <button className="h-9 rounded-md border border-[#d1d9e6] bg-white px-4 text-[13px] font-bold text-[#475569] hover:bg-[#f8fafc] disabled:opacity-60" type="button" onClick={() => setDeleteTarget(null)} disabled={deletingGroupId === deleteTarget.id}>취소</button>
+              <button className="inline-flex h-9 items-center gap-2 rounded-md border border-[#fecdd3] bg-[#fff1f2] px-4 text-[13px] font-bold text-[#e11d48] hover:bg-[#ffe4e6] disabled:opacity-60" type="button" onClick={() => handleDeleteGroup(deleteTarget)} disabled={deletingGroupId === deleteTarget.id}>
+                {deletingGroupId === deleteTarget.id ? <Loader2 className="animate-spin" size={15} aria-hidden="true" /> : <Trash2 size={15} aria-hidden="true" />}
+                삭제
+              </button>
+            </div>
+          </div>
+        </div>
+      ), document.body) : null}
+    </div>
+  );
+}
+
+function SummaryCard({ label, value, icon: Icon, tone }: { label: string; value: string; icon: LucideIcon; tone: string }) {
+  return (
+    <article className="rounded-lg border border-[#c7d2e0] bg-white px-5 py-4">
+      <div className="flex items-center justify-between gap-3">
+        <div className="min-w-0">
+          <p className="text-[12px] font-semibold text-[#64748b]">{label}</p>
+          <p className="mt-2 text-[20px] font-black leading-none text-[#111827]">{value}</p>
+        </div>
+        <span className={`grid h-11 w-11 shrink-0 place-items-center rounded-md ${tone}`}>
+          <Icon size={28} aria-hidden="true" />
+        </span>
+      </div>
+    </article>
+  );
+}
diff --git a/src/pages/login/LoginPage.tsx b/src/pages/login/LoginPage.tsx
new file mode 100644
index 0000000..bfbb9d3
--- /dev/null
+++ b/src/pages/login/LoginPage.tsx
@@ -0,0 +1,166 @@
+import { useState, type FormEvent } from 'react';
+import { ArrowRight, CheckCircle2 } from 'lucide-react';
+import { BrandMark } from '../../components/BrandMark';
+import { loginInstructor } from '../../lib/auth';
+import type { AuthSession } from '../../types/auth';
+
+type LoginPageProps = {
+  onLogin: (session: AuthSession) => void;
+};
+
+const REMEMBERED_EMAIL_STORAGE_KEY = 'atnmy.lms.admin.login.rememberedEmail';
+const DEFAULT_EMAIL = '';
+const DEFAULT_PASSWORD = 'qwer1234';
+
+export function LoginPage({ onLogin }: LoginPageProps) {
+  const rememberedEmail = window.localStorage.getItem(REMEMBERED_EMAIL_STORAGE_KEY);
+  const [email, setEmail] = useState(rememberedEmail ?? DEFAULT_EMAIL);
+  const [password, setPassword] = useState(DEFAULT_PASSWORD);
+  const [rememberEmail, setRememberEmail] = useState(Boolean(rememberedEmail));
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      const session = await loginInstructor(email, password);
+      if (rememberEmail) {
+        window.localStorage.setItem(REMEMBERED_EMAIL_STORAGE_KEY, email);
+      } else {
+        window.localStorage.removeItem(REMEMBERED_EMAIL_STORAGE_KEY);
+      }
+      onLogin(session);
+    } catch (loginError) {
+      setError(loginError instanceof Error ? loginError.message : '로그인에 실패했습니다.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <main className="grid min-h-screen bg-white text-[#111827] lg:grid-cols-[minmax(420px,58%)_minmax(360px,42%)]">
+      <section className="relative flex min-h-[42vh] overflow-hidden bg-[linear-gradient(145deg,#3b82f6_0%,#7048e8_54%,#4f46e5_100%)] px-7 py-8 text-white sm:px-12 lg:min-h-screen lg:px-[60px]">
+        <div className="absolute inset-0 opacity-25">
+          <div className="absolute left-[14%] top-[18%] h-40 w-40 rounded-full bg-white blur-3xl" />
+          <div className="absolute bottom-[18%] right-[12%] h-56 w-56 rounded-full bg-[#93c5fd] blur-3xl" />
+        </div>
+
+        <div className="relative z-10 flex w-full max-w-[580px] flex-col">
+          <BrandMark />
+
+          <div className="my-auto py-12 lg:py-0">
+            <p className="mb-4 text-[11px] font-extrabold uppercase tracking-[0.16em] text-white/70">Learning Management System</p>
+            <h1 className="max-w-[520px] text-[34px] font-black leading-[1.12] tracking-[0] sm:text-[44px]">
+              <span className="text-[#67e8f9]">자율주행</span> 교육 플랫폼
+            </h1>
+            <p className="mt-5 max-w-[410px] text-[14px] font-bold leading-6 text-white/82">
+              실제 하드웨어와 시뮬레이션을 활용한 차세대 학습 관리 시스템
+            </p>
+
+            <div className="mt-8 grid max-w-[410px] gap-2.5 rounded-xl bg-white/12 p-4 ring-1 ring-white/18 backdrop-blur">
+              {['실시간 모니터링 및 통합 관리', '하드웨어 플랫폼 상태 추적', 'AI 가이드 에스컬레이션'].map((item) => (
+                <div className="flex items-center gap-3 text-[12px] font-bold text-white/88" key={item}>
+                  <CheckCircle2 size={16} aria-hidden="true" />
+                  {item}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <p className="text-[12px] font-bold text-white/55">© 2026. All rights reserved.</p>
+        </div>
+      </section>
+
+      <section className="flex min-h-[58vh] items-center justify-center px-7 py-10 sm:px-12 lg:min-h-screen">
+        <div className="w-full max-w-[420px]">
+          <div className="mb-8">
+            <h2 className="text-[26px] font-black tracking-[0] text-[#4f46e5]">강사 로그인</h2>
+            <p className="mt-2.5 text-[13px] font-bold text-[#6b7280]">이메일과 비밀번호를 입력해주세요.</p>
+          </div>
+
+          <form className="grid gap-4" onSubmit={handleSubmit}>
+            <label className="grid gap-2 text-[13px] font-extrabold text-[#303747]">
+              이메일
+              <input
+                className="h-11 rounded-lg border border-[#d8dde8] bg-white px-4 text-[14px] font-bold text-[#111827] outline-none transition placeholder:text-[#a0a7b7] focus:border-[#4f46e5] focus:ring-4 focus:ring-[#4f46e5]/12"
+                name="email"
+                placeholder="이메일을 입력하세요"
+                type="email"
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+                required
+              />
+            </label>
+
+            <label className="grid gap-2 text-[13px] font-extrabold text-[#303747]">
+              비밀번호
+              <input
+                className="h-11 rounded-lg border border-[#d8dde8] bg-white px-4 text-[14px] font-bold text-[#111827] outline-none transition placeholder:text-[#a0a7b7] focus:border-[#4f46e5] focus:ring-4 focus:ring-[#4f46e5]/12"
+                name="password"
+                placeholder="비밀번호를 입력하세요"
+                type="password"
+                value={password}
+                onChange={(event) => setPassword(event.target.value)}
+                required
+              />
+            </label>
+
+            <div className="flex items-center justify-between gap-3">
+              <label className="flex items-center gap-2 text-[12px] font-bold text-[#64748b]">
+                <input
+                  className="h-4 w-4 rounded border-[#d8dde8] accent-[#4f46e5]"
+                  type="checkbox"
+                  checked={rememberEmail}
+                  onChange={(event) => setRememberEmail(event.target.checked)}
+                />
+                아이디 기억
+              </label>
+              <button className="text-[12px] font-extrabold text-[#4f46e5]" type="button">
+                비밀번호를 잊으셨나요?
+              </button>
+            </div>
+
+            <button
+              className="h-12 rounded-lg bg-[#4f46e5] text-[14px] font-extrabold text-white shadow-[0_10px_24px_rgba(79,70,229,0.22)] transition hover:bg-[#4338ca] focus:outline-none focus:ring-4 focus:ring-[#4f46e5]/20 disabled:cursor-not-allowed disabled:opacity-70"
+              type="submit"
+              disabled={loading}
+            >
+              {loading ? '로그인 중...' : '로그인'}
+            </button>
+
+            {error ? <p className="text-center text-[12px] font-bold text-[#dc2626]">{error}</p> : null}
+          </form>
+
+          <div className="my-7 flex items-center gap-4">
+            <span className="h-px flex-1 bg-[#e3e7ef]" />
+            <span className="text-[12px] font-bold text-[#9aa2b1]">또는</span>
+            <span className="h-px flex-1 bg-[#e3e7ef]" />
+          </div>
+
+          <button
+            className="group flex h-12 w-full items-center justify-center gap-3 rounded-lg border border-[#d8dde8] bg-white px-4 text-[14px] font-extrabold text-[#263141] shadow-sm transition hover:border-[#b8c0d0] hover:bg-[#fafbff] focus:outline-none focus:ring-4 focus:ring-[#4f46e5]/15"
+            type="button"
+            onClick={() => setError('Google 로그인은 공통 인증 서버에 엔드포인트가 준비된 뒤 연결됩니다.')}
+          >
+            <GoogleMark />
+            Google로 계속
+            <ArrowRight className="ml-auto text-[#98a1b2] transition group-hover:translate-x-0.5 group-hover:text-[#4f46e5]" size={16} aria-hidden="true" />
+          </button>
+
+          <p className="mt-7 text-center text-[11px] font-bold leading-5 text-[#8b93a3]">접근 권한이 없는 계정은 관리자에게 문의하세요.</p>
+        </div>
+      </section>
+    </main>
+  );
+}
+
+function GoogleMark() {
+  return (
+    <span className="grid h-5 w-5 place-items-center rounded-full border border-[#dbe1eb] bg-[#f8fafc] text-[15px] font-black leading-none text-[#4285f4]" aria-hidden="true">
+      <span>G</span>
+    </span>
+  );
+}
diff --git a/src/pages/platforms/PlatformsPage.tsx b/src/pages/platforms/PlatformsPage.tsx
new file mode 100644
index 0000000..3b02a5a
--- /dev/null
+++ b/src/pages/platforms/PlatformsPage.tsx
@@ -0,0 +1,1045 @@
+import { useEffect, useMemo, useState, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { Activity, Battery, Car, CircleAlert, Loader2, Plus, Search, Settings, ShieldAlert, Timer, Trash2, Users, X, type LucideIcon } from 'lucide-react';
+import { ConfirmDialog } from '../../components/ConfirmDialog';
+import { PageHeader } from '../../components/PageHeader';
+import { PaginationBar } from '../../components/PaginationBar';
+import { useToast } from '../../components/ToastProvider';
+import {
+  assignInstructorPlatform,
+  createInstructorPlatform,
+  deleteInstructorPlatform,
+  listInstructorPlatformAgents,
+  listInstructorPlatforms,
+  PlatformInUseError,
+  updateInstructorPlatform,
+  type InstructorPlatform,
+  type InstructorPlatformsResponse,
+  type InstructorPlatformsSummary,
+  type MasterPlatform,
+  type PlatformAlgorithms,
+  type PlatformSettingItem,
+  type TeachingAgent,
+} from '../../lib/platforms';
+import { listInstructorGroups, type InstructorGroup } from '../../lib/groups';
+import type { AuthSession } from '../../types/auth';
+
+const emptySummary: InstructorPlatformsSummary = {
+  totalPlatforms: 0,
+  activePlatforms: 0,
+  standbyPlatforms: 0,
+  errorPlatforms: 0,
+};
+
+const defaultSensors: PlatformSettingItem[] = [
+  { title: 'LiDAR', description: 'Robosense Helios 16채널', enabled: true },
+  { title: 'RGB-D 카메라', description: 'Intel Realsense D435', enabled: true },
+  { title: 'IMU 센서', description: '9축 관성측정장치', enabled: true },
+];
+
+const defaultDrivers: PlatformSettingItem[] = [
+  { title: 'LiDAR 드라이버', description: 'robosense_driver v1.5.0' },
+  { title: 'Camera 드라이버', description: 'realsense2_camera v4.55.1' },
+  { title: 'IMU 드라이버', description: 'xsens_driver v2.2.0' },
+];
+
+const defaultAlgorithms: PlatformAlgorithms = {
+  slam: 'Cartographer',
+  planning: 'A* + DWA',
+  control: 'PID Control',
+};
+
+export function PlatformsPage({ session }: { session: AuthSession }) {
+  const { showToast } = useToast();
+  const [platforms, setPlatforms] = useState<InstructorPlatform[]>([]);
+  const [masterPlatforms, setMasterPlatforms] = useState<MasterPlatform[]>([]);
+  const [agents, setAgents] = useState<TeachingAgent[]>([]);
+  const [summary, setSummary] = useState<InstructorPlatformsSummary>(emptySummary);
+  const [query, setQuery] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [settingsTarget, setSettingsTarget] = useState<InstructorPlatform | null>(null);
+  const [selectedMasterId, setSelectedMasterId] = useState('');
+  const [selectedAgentId, setSelectedAgentId] = useState('');
+  const [platformName, setPlatformName] = useState('');
+  const [agentsLoading, setAgentsLoading] = useState(false);
+  const [agentsError, setAgentsError] = useState<string | null>(null);
+  const [settingsName, setSettingsName] = useState('');
+  const [settingsVehicleType, setSettingsVehicleType] = useState('MK-mini');
+  const [settingsWheelbaseMeters, setSettingsWheelbaseMeters] = useState(0.325);
+  const [settingsMaxSpeedMetersPerSecond, setSettingsMaxSpeedMetersPerSecond] = useState(7);
+  const [settingsMaxSteeringAngleDegrees, setSettingsMaxSteeringAngleDegrees] = useState(30);
+  const [settingsSensors, setSettingsSensors] = useState<PlatformSettingItem[]>([]);
+  const [settingsDrivers, setSettingsDrivers] = useState<PlatformSettingItem[]>([]);
+  const [settingsAlgorithms, setSettingsAlgorithms] = useState<PlatformAlgorithms>({
+    slam: 'Cartographer',
+    planning: 'A* + DWA',
+    control: 'PID Control',
+  });
+  const [settingsControlDurationMinutes, setSettingsControlDurationMinutes] = useState(30);
+  const [settingsControlWarningMinutes, setSettingsControlWarningMinutes] = useState(5);
+  const [saving, setSaving] = useState(false);
+  const [deletingPlatformId, setDeletingPlatformId] = useState<string | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<InstructorPlatform | null>(null);
+  const [forceDeleteTarget, setForceDeleteTarget] = useState<{ platform: InstructorPlatform; session: PlatformInUseError['activeSession'] } | null>(null);
+  const [assignmentTarget, setAssignmentTarget] = useState<InstructorPlatform | null>(null);
+  const [assignmentGroups, setAssignmentGroups] = useState<InstructorGroup[]>([]);
+  const [assignmentGroupsLoading, setAssignmentGroupsLoading] = useState(false);
+  const [assignmentGroupsError, setAssignmentGroupsError] = useState<string | null>(null);
+  const [selectedAssignmentGroupId, setSelectedAssignmentGroupId] = useState('');
+  const [assigningPlatformId, setAssigningPlatformId] = useState<string | null>(null);
+  const [forceAssignmentTarget, setForceAssignmentTarget] = useState<{ platform: InstructorPlatform; group: InstructorGroup; session: PlatformInUseError['activeSession'] } | null>(null);
+
+  const filteredPlatforms = useMemo(() => {
+    const keyword = query.trim().toLowerCase();
+    if (!keyword) return platforms;
+    return platforms.filter((platform) =>
+      [platform.name, platform.type, platform.group ?? '', platform.user ?? '', platform.status, platform.agent?.hostname ?? '', platform.agent?.ip ?? '']
+        .join(' ')
+        .toLowerCase()
+        .includes(keyword),
+    );
+  }, [platforms, query]);
+  const registeredAgentKeys = useMemo(() => {
+    const keys = new Set<string>();
+    platforms.forEach((platform) => {
+      if (!platform.agent) return;
+      [platform.agent.nodeId, platform.agent.hostname, platform.agent.ip, platform.agent.ownerEmail]
+        .map(normalizeAgentKey)
+        .filter(Boolean)
+        .forEach((key) => keys.add(key));
+    });
+    return keys;
+  }, [platforms]);
+  const pagedPlatforms = useMemo(() => filteredPlatforms.slice((page - 1) * pageSize, page * pageSize), [filteredPlatforms, page, pageSize]);
+  const summaryItems = [
+    { label: '전체 플랫폼', value: `${summary.totalPlatforms}대`, icon: Car, tone: 'bg-[#eff6ff] text-[#2563eb]' },
+    { label: '활성 플랫폼', value: `${summary.activePlatforms}대`, icon: Activity, tone: 'bg-[#f0efff] text-[#4f46e5]' },
+    { label: '대기 플랫폼', value: `${summary.standbyPlatforms}대`, icon: Timer, tone: 'bg-[#f8fafc] text-[#64748b]' },
+    { label: '오류 발생', value: `${summary.errorPlatforms}대`, icon: CircleAlert, tone: 'bg-[#fff1f2] text-[#e11d48]' },
+  ];
+  const selectedAssignmentGroup = assignmentGroups.find((group) => group.id === selectedAssignmentGroupId) ?? null;
+
+  const applyPayload = (payload: InstructorPlatformsResponse) => {
+    setError(null);
+    setPlatforms(payload.platforms);
+    setMasterPlatforms(payload.masterPlatforms);
+    setSummary(payload.summary);
+    setSelectedMasterId((current) => current || payload.masterPlatforms[0]?.id || '');
+  };
+
+  useEffect(() => {
+    let cancelled = false;
+    listInstructorPlatforms(session.accessToken)
+      .then((payload) => {
+        if (!cancelled) applyPayload(payload);
+      })
+      .catch((reason: Error) => {
+        if (cancelled) return;
+        setPlatforms([]);
+        setMasterPlatforms([]);
+        setSummary(emptySummary);
+        setError(reason.message);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [session.accessToken]);
+
+  useEffect(() => {
+    setPage(1);
+  }, [query]);
+
+  useEffect(() => {
+    const totalPages = Math.max(1, Math.ceil(filteredPlatforms.length / pageSize));
+    if (page > totalPages) setPage(totalPages);
+  }, [filteredPlatforms.length, page, pageSize]);
+
+  useEffect(() => {
+    if (!modalOpen && !settingsTarget && !deleteTarget && !assignmentTarget) return;
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, [assignmentTarget, modalOpen, settingsTarget, deleteTarget]);
+
+  useEffect(() => {
+    if (!modalOpen) return;
+    setPlatformName(getNextPlatformName(masterPlatforms, platforms, selectedMasterId));
+  }, [masterPlatforms, modalOpen, platforms, selectedMasterId]);
+
+  useEffect(() => {
+    setSettingsName(settingsTarget?.name ?? '');
+    setSettingsVehicleType(settingsTarget?.vehicleType ?? 'MK-mini');
+    setSettingsWheelbaseMeters(settingsTarget?.wheelbaseMeters ?? 0.325);
+    setSettingsMaxSpeedMetersPerSecond(settingsTarget?.maxSpeedMetersPerSecond ?? 7);
+    setSettingsMaxSteeringAngleDegrees(settingsTarget?.maxSteeringAngleDegrees ?? 30);
+    setSettingsSensors(normalizeSensorItems(settingsTarget?.sensors?.length ? settingsTarget.sensors : defaultSensors));
+    setSettingsDrivers(settingsTarget?.drivers?.length ? settingsTarget.drivers : defaultDrivers);
+    setSettingsAlgorithms(settingsTarget?.algorithms ?? defaultAlgorithms);
+    setSettingsControlDurationMinutes(settingsTarget?.controlDurationMinutes ?? 30);
+    setSettingsControlWarningMinutes(settingsTarget?.controlWarningMinutes ?? 5);
+  }, [settingsTarget]);
+
+  const handlePageSizeChange = (nextPageSize: number) => {
+    setPageSize(nextPageSize);
+    setPage(1);
+  };
+
+  const handleOpenCreateModal = () => {
+    setModalOpen(true);
+    setSelectedAgentId('');
+    setAgents([]);
+    setAgentsError(null);
+    setAgentsLoading(true);
+    listInstructorPlatformAgents(session.accessToken)
+      .then((payload) => {
+        setAgents(payload.agents ?? []);
+      })
+      .catch((reason) => {
+        setAgents([]);
+        setAgentsError(reason instanceof Error ? reason.message : '에이전트 목록을 불러오지 못했습니다.');
+      })
+      .finally(() => {
+        setAgentsLoading(false);
+      });
+  };
+
+  const handleCreatePlatform = async () => {
+    if (!selectedMasterId) return;
+    if (!selectedAgentId) {
+      setAgentsError('플랫폼에 연결할 에이전트를 선택해 주세요.');
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+    try {
+      const selectedAgent = agents.find((agent) => agent.id === selectedAgentId) ?? null;
+      const payload = await createInstructorPlatform(session.accessToken, selectedMasterId, platformName, selectedAgent);
+      const before = new Set(platforms.map((platform) => platform.id));
+      const created = payload.platforms.find((platform) => !before.has(platform.id));
+      applyPayload(payload);
+      setModalOpen(false);
+      setSelectedAgentId('');
+      setPage(1);
+      showToast({
+        title: '플랫폼이 등록되었습니다.',
+        message: created?.name ?? masterPlatforms.find((platform) => platform.id === selectedMasterId)?.name,
+      });
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : '플랫폼을 등록하지 못했습니다.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeletePlatform = async (platform: InstructorPlatform, force = false) => {
+    setDeletingPlatformId(platform.id);
+    setError(null);
+    try {
+      const payload = await deleteInstructorPlatform(session.accessToken, platform.id, { force });
+      applyPayload(payload);
+      setDeleteTarget(null);
+      setForceDeleteTarget(null);
+      showToast({
+        title: '플랫폼이 삭제되었습니다.',
+        message: platform.name,
+      });
+    } catch (reason) {
+      if (reason instanceof PlatformInUseError) {
+        setDeleteTarget(null);
+        setForceDeleteTarget({ platform, session: reason.activeSession });
+        return;
+      }
+      setError(reason instanceof Error ? reason.message : '플랫폼을 삭제하지 못했습니다.');
+    } finally {
+      setDeletingPlatformId(null);
+    }
+  };
+
+  const handleOpenAssignmentModal = (platform: InstructorPlatform) => {
+    setAssignmentTarget(platform);
+    setSelectedAssignmentGroupId('');
+    setAssignmentGroups([]);
+    setAssignmentGroupsError(null);
+    setAssignmentGroupsLoading(true);
+    listInstructorGroups(session.accessToken)
+      .then((payload) => {
+        setAssignmentGroups(payload.groups ?? []);
+      })
+      .catch((reason) => {
+        setAssignmentGroups([]);
+        setAssignmentGroupsError(reason instanceof Error ? reason.message : '그룹 목록을 불러오지 못했습니다.');
+      })
+      .finally(() => {
+        setAssignmentGroupsLoading(false);
+      });
+  };
+
+  const handleAssignPlatform = async (
+    platform: InstructorPlatform,
+    group: InstructorGroup,
+    force = false,
+  ) => {
+    setAssigningPlatformId(platform.id);
+    setError(null);
+    try {
+      const payload = await assignInstructorPlatform(session.accessToken, platform.id, group.id, { force });
+      applyPayload(payload);
+      setAssignmentTarget(null);
+      setForceAssignmentTarget(null);
+      setSelectedAssignmentGroupId('');
+      showToast({
+        title: '플랫폼이 배정되었습니다.',
+        message: `${platform.name} · ${group.name}`,
+      });
+    } catch (reason) {
+      if (reason instanceof PlatformInUseError) {
+        setAssignmentTarget(null);
+        setForceAssignmentTarget({ platform, group, session: reason.activeSession });
+        return;
+      }
+      setError(reason instanceof Error ? reason.message : '플랫폼을 배정하지 못했습니다.');
+    } finally {
+      setAssigningPlatformId(null);
+    }
+  };
+
+  const handleSaveSettings = async () => {
+    if (!settingsTarget) return;
+    const nextName = settingsName.trim();
+    if (!nextName) {
+      setError('플랫폼명을 입력해 주세요.');
+      return;
+    }
+    if (settingsControlWarningMinutes >= settingsControlDurationMinutes) {
+      setError('자동 반납 경고 시간은 1회 제어 시간보다 짧아야 합니다.');
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+    try {
+      const payload = await updateInstructorPlatform(
+        session.accessToken,
+        settingsTarget.id,
+        nextName,
+        settingsVehicleType,
+        settingsWheelbaseMeters,
+        settingsMaxSpeedMetersPerSecond,
+        settingsMaxSteeringAngleDegrees,
+        settingsSensors,
+        settingsAlgorithms,
+        settingsControlDurationMinutes,
+        settingsControlWarningMinutes,
+      );
+      applyPayload(payload);
+      showToast({ title: '플랫폼 설정이 저장되었습니다.', message: nextName });
+      setSettingsTarget(null);
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : '플랫폼 설정을 저장하지 못했습니다.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="mx-auto max-w-[1220px]">
+      <PageHeader
+        route="platforms"
+        action={
+          <button className="inline-flex h-9 items-center gap-2 rounded-md bg-[#2563eb] px-3 text-[13px] font-bold text-white hover:bg-[#1d4ed8]" type="button" onClick={handleOpenCreateModal}>
+            <Plus size={15} aria-hidden="true" />
+            플랫폼 추가
+          </button>
+        }
+      />
+
+      <section className="mb-4 grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+        {summaryItems.map((item) => (
+          <SummaryCard key={item.label} {...item} />
+        ))}
+      </section>
+
+      <section className="rounded-lg border border-[#c7d2e0] bg-white">
+        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-[#cbd5e1] px-4 py-3">
+          <div>
+            <h2 className="text-[15px] font-black text-[#111827]">플랫폼 리스트</h2>
+            <p className="mt-1 text-[12px] font-bold text-[#64748b]">배터리, 가동 시간, 할당 그룹, 오류 상태 조회</p>
+          </div>
+
+          <label className="flex h-9 w-full max-w-[260px] items-center gap-2 rounded-md border border-[#d1d9e6] bg-white px-3 text-[#94a3b8]">
+            <Search size={15} aria-hidden="true" />
+            <input className="min-w-0 flex-1 bg-transparent text-[13px] font-bold text-[#111827] outline-none placeholder:text-[#94a3b8]" placeholder="플랫폼 검색" value={query} onChange={(event) => setQuery(event.target.value)} />
+          </label>
+        </div>
+
+        <div className="overflow-x-auto">
+          <div className="xl:min-w-[1100px]">
+            <div className="hidden select-none gap-4 grid-cols-[44px_200px_110px_92px_90px_110px_80px_150px_184px] items-center border-b border-[#cbd5e1] bg-[#f8fafc] px-4 py-3 text-center text-[11px] font-bold text-[#64748b] xl:grid">
+              <span>No.</span>
+              <span>플랫폼</span>
+              <span>연결</span>
+              <span>상태</span>
+              <span>배터리</span>
+              <span>가동 시간</span>
+              <span>오류</span>
+              <span>할당</span>
+              <span>관리</span>
+            </div>
+
+            <div className="divide-y divide-[#e2e8f0]">
+              {error ? (
+                <div className="flex h-[220px] items-center justify-center px-4 text-center">
+                  <p className="text-[13px] font-bold text-[#64748b]">{error}</p>
+                </div>
+              ) : pagedPlatforms.length > 0 ? (
+                pagedPlatforms.map((platform, index) => (
+                  <article className="grid select-none gap-4 px-4 py-4 xl:grid-cols-[44px_200px_110px_92px_90px_110px_80px_150px_184px] xl:items-center" key={platform.id}>
+                    <div className="text-center">
+                      <p className="mb-2 text-[11px] font-bold text-[#94a3b8] xl:hidden">번호</p>
+                      <span className="text-[13px] font-bold text-[#64748b]">{filteredPlatforms.length - ((page - 1) * pageSize + index)}</span>
+                    </div>
+
+                    <div className="flex min-w-0 items-center gap-3">
+                      <span className={`grid h-8 w-8 shrink-0 place-items-center rounded-md ${platform.status === '오류' ? 'bg-[#fff1f2] text-[#e11d48]' : 'bg-[#f0efff] text-[#4f46e5]'}`}>
+                        <Car size={15} aria-hidden="true" />
+                      </span>
+                      <div className="min-w-0">
+                        <h3 className="truncate text-[14px] font-black text-[#111827]">{platform.name}</h3>
+                        <p className="mt-1 text-[12px] font-bold text-[#64748b]">{platform.type}</p>
+                      </div>
+                    </div>
+
+                    <div className="text-center">
+                      <p className="mb-2 text-[11px] font-bold text-[#94a3b8] xl:hidden">연결</p>
+                      {platform.agent ? (
+                        <div className="flex items-center justify-center">
+                          <span className={`inline-flex h-6 items-center gap-1.5 rounded-md px-2 text-[11px] font-black ${platform.agent.connected ? 'bg-[#dcfce7] text-[#15803d]' : 'bg-[#f1f5f9] text-[#64748b]'}`}>
+                            <span className={`h-1.5 w-1.5 rounded-full ${platform.agent.connected ? 'bg-[#22c55e]' : 'bg-[#94a3b8]'}`} />
+                            {platform.agent.connected ? '연결됨' : '끊김'}
+                          </span>
+                        </div>
+                      ) : (
+                        <span className="text-[12px] font-bold text-[#94a3b8]">미연결</span>
+                      )}
+                    </div>
+
+                    <div className="text-center">
+                      <p className="mb-2 text-[11px] font-bold text-[#94a3b8] xl:hidden">상태</p>
+                      <span className={`rounded px-1.5 py-0.5 text-[11px] font-bold ${statusTone(platform.status)}`}>{platform.status}</span>
+                    </div>
+
+                    <div>
+                      <div className="mb-2 flex items-center justify-between text-[12px] font-bold text-[#475569] xl:justify-center">
+                        <span className="inline-flex items-center gap-1.5 xl:hidden">
+                          <Battery size={13} aria-hidden="true" />
+                          배터리
+                        </span>
+                        <span className="font-semibold text-[#4f46e5]">{platform.battery}%</span>
+                      </div>
+                      <div className="h-1.5 overflow-hidden rounded-full bg-[#dbe3ef]">
+                        <div className="h-full rounded-full bg-[#4f46e5]" style={{ width: `${platform.battery}%` }} />
+                      </div>
+                    </div>
+
+                    <PlatformMeta icon={Timer} label="가동 시간" value={platform.uptime} />
+                    <PlatformMeta icon={CircleAlert} label="오류" value={`${platform.errors}건`} danger={platform.errors > 0} />
+
+                    <div className="text-center">
+                      <p className="mb-2 text-[11px] font-bold text-[#94a3b8] xl:hidden">할당</p>
+                      <div className="flex flex-wrap items-center justify-center gap-2">
+                        {platform.group ? (
+                          <span className="inline-flex h-7 items-center rounded-md bg-[#f0efff] px-2.5 text-[12px] font-semibold text-[#4f46e5]">{platform.group}</span>
+                        ) : (
+                          <span className="text-[12px] font-bold text-[#94a3b8]">미할당</span>
+                        )}
+                        <span className="text-[12px] font-semibold text-[#64748b]">{platform.user ?? '-'}</span>
+                      </div>
+                    </div>
+
+                    <div className="flex flex-wrap items-center justify-center gap-2">
+                      <button className="grid h-8 w-8 place-items-center rounded-md border border-[#bfdbfe] bg-[#eff6ff] text-[#2563eb] hover:bg-[#dbeafe]" type="button" onClick={() => handleOpenAssignmentModal(platform)} aria-label={`${platform.name} 배정`} title="배정">
+                        <Users size={14} aria-hidden="true" />
+                      </button>
+                      <button className="grid h-8 w-8 place-items-center rounded-md border border-[#d1d9e6] bg-white text-[#475569] hover:bg-[#f8fafc] hover:text-[#111827]" type="button" onClick={() => setSettingsTarget(platform)} aria-label={`${platform.name} 설정`} title="설정">
+                        <Settings size={14} aria-hidden="true" />
+                      </button>
+                      <button className="grid h-8 w-8 place-items-center rounded-md border border-[#fecdd3] bg-[#fff1f2] text-[#e11d48] hover:bg-[#ffe4e6]" type="button" aria-label={`${platform.name} 긴급 정지`} title="긴급 정지">
+                        <ShieldAlert size={14} aria-hidden="true" />
+                      </button>
+                      <button className="grid h-8 w-8 place-items-center rounded-md border border-[#fecdd3] bg-[#fff1f2] text-[#e11d48] hover:bg-[#ffe4e6] disabled:cursor-not-allowed disabled:opacity-60" type="button" aria-label={`${platform.name} 삭제`} title="삭제" onClick={() => setDeleteTarget(platform)} disabled={deletingPlatformId === platform.id}>
+                        {deletingPlatformId === platform.id ? <Loader2 className="animate-spin" size={15} aria-hidden="true" /> : <Trash2 size={15} aria-hidden="true" />}
+                      </button>
+                    </div>
+                  </article>
+                ))
+              ) : (
+                <div className="flex h-[220px] items-center justify-center px-4 text-center">
+                  <p className="text-[13px] font-bold text-[#64748b]">등록된 플랫폼이 없습니다.</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <PaginationBar
+          page={page}
+          pageSize={pageSize}
+          totalItems={filteredPlatforms.length}
+          totalLabel={`전체 ${filteredPlatforms.length}대`}
+          onPageChange={setPage}
+          onPageSizeChange={handlePageSizeChange}
+        />
+      </section>
+
+      {modalOpen ? createPortal(
+        <div className="fixed inset-0 z-[70] grid place-items-center bg-[#0f172a]/24 px-4 backdrop-blur-[2px]">
+          <section className="w-full max-w-[420px] rounded-lg border border-[#dbe3ef] bg-white shadow-[0_24px_70px_rgba(15,23,42,0.22)]">
+            <div className="flex items-start justify-between gap-4 border-b border-[#cbd5e1] px-5 py-4">
+              <div>
+                <h3 className="text-[16px] font-black text-[#111827]">플랫폼 추가</h3>
+                <p className="mt-1 text-[12px] font-bold text-[#64748b]">추가할 플랫폼 유형을 선택해 주세요.</p>
+              </div>
+              <button className="grid h-8 w-8 place-items-center rounded-md text-[#64748b] hover:bg-[#f1f5f9] hover:text-[#111827]" type="button" onClick={() => setModalOpen(false)} disabled={saving} aria-label="닫기" title="닫기">
+                <X size={17} aria-hidden="true" />
+              </button>
+            </div>
+
+            <div className="p-5">
+              <div>
+                <div className="flex items-center justify-between">
+                  <span className="text-[12px] font-black text-[#475569]">등록된 에이전트</span>
+                  <span className="text-[11px] font-bold text-[#94a3b8]">
+                    {agentsLoading ? '조회 중' : `${agents.filter((agent) => agent.connected && !agent.expired).length}/${agents.length} 연결`}
+                  </span>
+                </div>
+                <div className="mt-2 max-h-[146px] space-y-2 overflow-y-auto pr-1">
+                  {agentsLoading ? (
+                    <div className="flex items-center justify-center gap-2 rounded-md border border-dashed border-[#d1d9e6] px-3 py-8 text-center text-[12px] font-bold text-[#64748b]">
+                      <Loader2 className="animate-spin" size={15} aria-hidden="true" />
+                      에이전트를 불러오는 중입니다.
+                    </div>
+                  ) : agentsError ? (
+                    <div className="rounded-md border border-dashed border-[#fecdd3] bg-[#fff1f2] px-3 py-8 text-center text-[12px] font-bold text-[#e11d48]">{agentsError}</div>
+                  ) : agents.length ? agents.map((agent) => {
+                    const selected = selectedAgentId === agent.id;
+                    const available = agent.connected && !agent.expired;
+                    const registered = isRegisteredAgent(agent, registeredAgentKeys);
+                    const selectable = available && !registered;
+                    return (
+                      <button
+                        key={agent.id}
+                        type="button"
+                        className={`flex w-full items-center justify-between gap-3 rounded-md border px-3 py-2 text-left transition-colors ${selected ? 'border-[#2563eb] bg-[#eff6ff]' : 'border-[#d1d9e6] bg-white'} ${selectable ? 'cursor-pointer hover:bg-[#f8fafc]' : 'cursor-not-allowed opacity-60'}`}
+                        disabled={!selectable}
+                        onClick={() => {
+                          if (!selectable) return;
+                          setSelectedAgentId(selected ? '' : agent.id);
+                        }}
+                      >
+                        <span className="min-w-0">
+                          <span className="block truncate text-[12px] font-black text-[#111827]">{agent.hostname || agent.name}</span>
+                          <span className="mt-0.5 block truncate text-[11px] font-bold text-[#64748b]">
+                            {agent.user} · {agent.ip}{agent.sshUser ? ` · SSH ${agent.sshUser}` : ''}
+                          </span>
+                        </span>
+                        <span className={`shrink-0 rounded px-2 py-1 text-[10px] font-black ${registered ? 'bg-[#ede9fe] text-[#6d28d9]' : available ? 'bg-[#dcfce7] text-[#15803d]' : 'bg-[#f1f5f9] text-[#64748b]'}`}>
+                          {registered ? '등록됨' : available ? '연결됨' : '끊김'}
+                        </span>
+                      </button>
+                    );
+                  }) : (
+                    <div className="rounded-md border border-dashed border-[#d1d9e6] px-3 py-8 text-center text-[12px] font-bold text-[#94a3b8]">발견된 에이전트가 없습니다.</div>
+                  )}
+                </div>
+              </div>
+
+              <div className="my-5 border-t border-[#cbd5e1]" />
+
+              <label className="block">
+                <span className="text-[12px] font-black text-[#475569]">플랫폼 유형</span>
+                <select
+                  className="mt-2 h-10 w-full rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-bold text-[#111827] outline-none focus:border-[#2563eb]"
+                  value={selectedMasterId}
+                  onChange={(event) => setSelectedMasterId(event.target.value)}
+                >
+                  {masterPlatforms.map((platform) => (
+                    <option key={platform.id} value={platform.id}>
+                      {platform.name}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <label className="mt-4 block">
+                <span className="text-[12px] font-black text-[#475569]">플랫폼명</span>
+                <input
+                  className="mt-2 h-10 w-full rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-bold text-[#111827] outline-none focus:border-[#2563eb]"
+                  value={platformName}
+                  onChange={(event) => setPlatformName(event.target.value)}
+                  placeholder="예: F1Tenth #01"
+                />
+              </label>
+            </div>
+
+            <div className="flex justify-end gap-2 border-t border-[#cbd5e1] px-5 py-4">
+              <button className="h-9 rounded-md border border-[#d1d9e6] bg-white px-4 text-[13px] font-bold text-[#475569] hover:bg-[#f8fafc]" type="button" onClick={() => setModalOpen(false)} disabled={saving}>취소</button>
+              <button className="inline-flex h-9 items-center gap-2 rounded-md bg-[#2563eb] px-4 text-[13px] font-bold text-white hover:bg-[#1d4ed8] disabled:cursor-not-allowed disabled:opacity-60" type="button" onClick={() => void handleCreatePlatform()} disabled={saving || agentsLoading || !selectedAgentId || !selectedMasterId || !platformName.trim()}>
+                {saving ? <Loader2 className="animate-spin" size={15} aria-hidden="true" /> : <Plus size={15} aria-hidden="true" />}
+                등록
+              </button>
+            </div>
+          </section>
+        </div>,
+        document.body,
+      ) : null}
+
+      {assignmentTarget ? createPortal(
+        <div className="fixed inset-0 z-[70] grid place-items-center bg-[#0f172a]/24 px-4 backdrop-blur-[2px]">
+          <section className="w-full max-w-[520px] rounded-lg border border-[#dbe3ef] bg-white shadow-[0_24px_70px_rgba(15,23,42,0.22)]">
+            <div className="flex items-start justify-between gap-4 border-b border-[#cbd5e1] px-5 py-4">
+              <div className="min-w-0">
+                <h3 className="truncate text-[16px] font-black text-[#111827]">플랫폼 배정</h3>
+                <p className="mt-1 text-[12px] font-bold text-[#64748b]">{assignmentTarget.name}을 배정할 그룹을 선택해 주세요.</p>
+              </div>
+              <button className="grid h-8 w-8 place-items-center rounded-md text-[#64748b] hover:bg-[#f1f5f9] hover:text-[#111827]" type="button" onClick={() => setAssignmentTarget(null)} disabled={Boolean(assigningPlatformId)} aria-label="닫기" title="닫기">
+                <X size={17} aria-hidden="true" />
+              </button>
+            </div>
+
+            <div className="p-5">
+              <div className="rounded-md border border-[#d1d9e6] bg-[#f8fafc] px-3 py-2">
+                <p className="text-[12px] font-black text-[#111827]">{assignmentTarget.name}</p>
+                <p className="mt-1 text-[11px] font-bold text-[#64748b]">
+                  현재 배정: {assignmentTarget.group ?? '미배정'} · 상태: {assignmentTarget.status}
+                </p>
+              </div>
+
+              <div className="mt-4">
+                <div className="mb-2 flex items-center justify-between">
+                  <span className="text-[12px] font-black text-[#475569]">그룹 목록</span>
+                  <span className="text-[11px] font-bold text-[#94a3b8]">미배정 그룹만 선택 가능</span>
+                </div>
+                <div className="max-h-[280px] space-y-2 overflow-y-auto pr-1">
+                  {assignmentGroupsLoading ? (
+                    <div className="flex items-center justify-center gap-2 rounded-md border border-dashed border-[#d1d9e6] px-3 py-10 text-center text-[12px] font-bold text-[#64748b]">
+                      <Loader2 className="animate-spin" size={15} aria-hidden="true" />
+                      그룹을 불러오는 중입니다.
+                    </div>
+                  ) : assignmentGroupsError ? (
+                    <div className="rounded-md border border-dashed border-[#fecdd3] bg-[#fff1f2] px-3 py-10 text-center text-[12px] font-bold text-[#e11d48]">{assignmentGroupsError}</div>
+                  ) : assignmentGroups.length ? assignmentGroups.map((group) => {
+                    const selected = selectedAssignmentGroupId === group.id;
+                    const assigned = Boolean(group.instructorPlatformId);
+                    return (
+                      <button
+                        key={group.id}
+                        type="button"
+                        className={`flex w-full items-center justify-between gap-3 rounded-md border px-3 py-2.5 text-left transition-colors ${selected ? 'border-[#2563eb] bg-[#eff6ff]' : 'border-[#d1d9e6] bg-white'} ${assigned ? 'cursor-not-allowed opacity-60' : 'cursor-pointer hover:bg-[#f8fafc]'}`}
+                        disabled={assigned}
+                        onClick={() => setSelectedAssignmentGroupId(selected ? '' : group.id)}
+                      >
+                        <span className="min-w-0">
+                          <span className="block truncate text-[13px] font-black text-[#111827]">{group.name}</span>
+                          <span className="mt-0.5 block truncate text-[11px] font-bold text-[#64748b]">
+                            {group.members.length}명 · {group.week} · 진행률 {group.progress}%
+                          </span>
+                        </span>
+                        <span className={`shrink-0 rounded px-2 py-1 text-[10px] font-black ${assigned ? 'bg-[#f1f5f9] text-[#64748b]' : 'bg-[#dcfce7] text-[#15803d]'}`}>
+                          {assigned ? group.platform : '미배정'}
+                        </span>
+                      </button>
+                    );
+                  }) : (
+                    <div className="rounded-md border border-dashed border-[#d1d9e6] px-3 py-10 text-center text-[12px] font-bold text-[#94a3b8]">등록된 그룹이 없습니다.</div>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex justify-end gap-2 border-t border-[#cbd5e1] px-5 py-4">
+              <button className="h-9 rounded-md border border-[#d1d9e6] bg-white px-4 text-[13px] font-bold text-[#475569] hover:bg-[#f8fafc]" type="button" onClick={() => setAssignmentTarget(null)} disabled={Boolean(assigningPlatformId)}>취소</button>
+              <button
+                className="inline-flex h-9 items-center gap-2 rounded-md bg-[#2563eb] px-4 text-[13px] font-bold text-white hover:bg-[#1d4ed8] disabled:cursor-not-allowed disabled:opacity-60"
+                type="button"
+                onClick={() => {
+                  if (assignmentTarget && selectedAssignmentGroup) void handleAssignPlatform(assignmentTarget, selectedAssignmentGroup);
+                }}
+                disabled={Boolean(assigningPlatformId) || !assignmentTarget || !selectedAssignmentGroup || Boolean(selectedAssignmentGroup.instructorPlatformId)}
+              >
+                {assigningPlatformId === assignmentTarget.id ? <Loader2 className="animate-spin" size={15} aria-hidden="true" /> : <Users size={15} aria-hidden="true" />}
+                배정
+              </button>
+            </div>
+          </section>
+        </div>,
+        document.body,
+      ) : null}
+
+      {settingsTarget ? createPortal(
+        <div className="fixed inset-0 z-[70] grid place-items-center bg-[#0f172a]/24 px-4 py-8 backdrop-blur-[2px]">
+          <section className="flex max-h-[calc(100vh-64px)] w-full max-w-[720px] flex-col overflow-hidden rounded-lg border border-[#c7d2e0] bg-white shadow-[0_24px_70px_rgba(15,23,42,0.18)]">
+            <div className="flex items-start justify-between gap-4 border-b border-[#c7d2e0] bg-[#f8fbff] px-5 py-4">
+              <div>
+                <h3 className="text-[16px] font-black text-[#111827]">{settingsTarget.name}</h3>
+                <p className="mt-1 text-[13px] font-semibold text-[#64748b]">센서 드라이버 및 위치 설정</p>
+              </div>
+              <button className="grid h-8 w-8 place-items-center rounded-md text-[#64748b] hover:bg-[#f1f5f9] hover:text-[#111827]" type="button" onClick={() => setSettingsTarget(null)} aria-label="닫기" title="닫기">
+                <X size={17} aria-hidden="true" />
+              </button>
+            </div>
+
+            <div className="flex-1 overflow-y-auto bg-white px-6 py-6">
+              <SettingsSection title="차량 제원">
+                <div className="grid gap-3 md:grid-cols-2">
+                  <SettingsField label="플랫폼명">
+                    <input className="h-10 w-full rounded-md border border-[#d1d9e6] px-3 text-[13px] font-semibold text-[#111827] outline-none focus:border-[#2563eb]" value={settingsName} onChange={(event) => setSettingsName(event.target.value)} />
+                  </SettingsField>
+                  <SettingsField label="차량 타입">
+                    <select className="h-10 w-full rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-semibold text-[#111827] outline-none focus:border-[#2563eb]" value={settingsVehicleType} onChange={(event) => setSettingsVehicleType(event.target.value)}>
+                      <option>F1tenth</option>
+                      <option>MK-mini</option>
+                      <option>Simulator</option>
+                    </select>
+                  </SettingsField>
+                  <SettingsField label="휠베이스 (m)">
+                    <input type="number" step="0.001" min={0} max={10} className="h-10 w-full rounded-md border border-[#d1d9e6] px-3 text-[13px] font-semibold text-[#111827] outline-none focus:border-[#2563eb]" value={settingsWheelbaseMeters} onChange={(event) => setSettingsWheelbaseMeters(Number(event.target.value))} />
+                  </SettingsField>
+                  <SettingsField label="최대 속도 (m/s)">
+                    <input type="number" step="0.1" min={0} max={100} className="h-10 w-full rounded-md border border-[#d1d9e6] px-3 text-[13px] font-semibold text-[#111827] outline-none focus:border-[#2563eb]" value={settingsMaxSpeedMetersPerSecond} onChange={(event) => setSettingsMaxSpeedMetersPerSecond(Number(event.target.value))} />
+                  </SettingsField>
+                  <SettingsField label="최대 조향각 (deg)">
+                    <input type="number" step="0.1" min={0} max={90} className="h-10 w-full rounded-md border border-[#d1d9e6] px-3 text-[13px] font-semibold text-[#111827] outline-none focus:border-[#2563eb]" value={settingsMaxSteeringAngleDegrees} onChange={(event) => setSettingsMaxSteeringAngleDegrees(Number(event.target.value))} />
+                  </SettingsField>
+                </div>
+              </SettingsSection>
+
+              <SettingsSection title="부착 센서">
+                {settingsSensors.map((sensor, index) => (
+                  <SensorSettingRow
+                    key={`sensor-${index}`}
+                    title={sensor.title}
+                    description={sensor.description}
+                    enabled={sensor.enabled !== false}
+                    onEnabledChange={(enabled) => setSettingsSensors((items) => updateSettingItem(items, index, 'enabled', enabled))}
+                  />
+                ))}
+              </SettingsSection>
+
+              <SettingsSection title="센서 드라이버">
+                {settingsDrivers.map((driver, index) => (
+                  <ReadonlyInfoRow
+                    key={`driver-${index}`}
+                    title={driver.title}
+                    description={driver.description}
+                    installed={driver.installed !== false}
+                  />
+                ))}
+              </SettingsSection>
+
+              <SettingsSection title="자율주행 알고리즘 조합">
+                <div className="grid gap-3">
+                  <AlgorithmSelect label="SLAM 알고리즘" value={settingsAlgorithms.slam} options={['Cartographer', 'GMapping', 'Hector SLAM']} onChange={(value) => setSettingsAlgorithms((current) => ({ ...current, slam: value }))} />
+                  <AlgorithmSelect label="경로 계획 알고리즘" value={settingsAlgorithms.planning} options={['A* + DWA', 'RRT', 'Pure Pursuit']} onChange={(value) => setSettingsAlgorithms((current) => ({ ...current, planning: value }))} />
+                  <AlgorithmSelect label="제어 알고리즘" value={settingsAlgorithms.control} options={['PID Control', 'MPC', 'LQR']} onChange={(value) => setSettingsAlgorithms((current) => ({ ...current, control: value }))} />
+                </div>
+              </SettingsSection>
+
+              <SettingsSection title="제어 시간 설정">
+                <div className="grid gap-3 md:grid-cols-2">
+                  <SettingsField label="1회 제어 시간 (분)">
+                    <input
+                      type="number"
+                      min={1}
+                      max={240}
+                      className="h-10 w-full rounded-md border border-[#d1d9e6] px-3 text-[13px] font-semibold text-[#111827] outline-none focus:border-[#2563eb]"
+                      value={settingsControlDurationMinutes}
+                      onChange={(event) => setSettingsControlDurationMinutes(Number(event.target.value))}
+                    />
+                  </SettingsField>
+                  <SettingsField label="자동 반납 경고 (분 전)">
+                    <input
+                      type="number"
+                      min={0}
+                      max={60}
+                      className="h-10 w-full rounded-md border border-[#d1d9e6] px-3 text-[13px] font-semibold text-[#111827] outline-none focus:border-[#2563eb]"
+                      value={settingsControlWarningMinutes}
+                      onChange={(event) => setSettingsControlWarningMinutes(Number(event.target.value))}
+                    />
+                  </SettingsField>
+                </div>
+                <p className="mt-3 rounded-md border border-[#d1d9e6] bg-[#f8fafc] px-3 py-2 text-[12px] font-semibold leading-relaxed text-[#64748b]">
+                  제어 시간이 만료되면 자동으로 제어권이 반납되며, 대기 중인 다음 학생에게 제어권이 할당됩니다.
+                </p>
+              </SettingsSection>
+            </div>
+
+            <div className="flex justify-end gap-2 border-t border-[#c7d2e0] bg-[#f8fbff] px-5 py-4">
+              <button className="h-9 rounded-md border border-[#d1d9e6] bg-white px-4 text-[13px] font-bold text-[#475569] hover:bg-[#f8fafc]" type="button" onClick={() => setSettingsTarget(null)}>취소</button>
+              <button
+                className="inline-flex h-9 items-center gap-2 rounded-md bg-[#2563eb] px-4 text-[13px] font-bold text-white hover:bg-[#1d4ed8] disabled:cursor-not-allowed disabled:opacity-60"
+                type="button"
+                onClick={() => void handleSaveSettings()}
+                disabled={saving || !settingsName.trim()}
+              >
+                {saving ? <Loader2 className="animate-spin" size={15} aria-hidden="true" /> : null}
+                저장
+              </button>
+            </div>
+          </section>
+        </div>,
+        document.body,
+      ) : null}
+
+      <ConfirmDialog
+        open={Boolean(deleteTarget)}
+        title="플랫폼을 삭제할까요?"
+        message="삭제하면 해당 플랫폼은 강사 소속 플랫폼 목록에서 제거되고, 연결된 그룹은 미배정으로 변경됩니다."
+        detail={deleteTarget ? (
+          <div className="rounded-lg border border-[#fecdd3] bg-[#fff1f2] px-3 py-2">
+            <p className="text-[13px] font-black text-[#be123c]">{deleteTarget.name}</p>
+            <p className="mt-1 text-[12px] font-semibold text-[#e11d48]">{deleteTarget.type}</p>
+          </div>
+        ) : null}
+        confirmLabel="삭제"
+        danger
+        icon={Trash2}
+        loading={Boolean(deleteTarget && deletingPlatformId === deleteTarget.id)}
+        onCancel={() => {
+          if (!deletingPlatformId) setDeleteTarget(null);
+        }}
+        onConfirm={() => {
+          if (deleteTarget) void handleDeletePlatform(deleteTarget);
+        }}
+      />
+
+      <ConfirmDialog
+        open={Boolean(forceDeleteTarget)}
+        title="사용 중인 플랫폼입니다"
+        message="삭제하면 학생의 제어권과 실행 중인 플랫폼 세션이 강제로 종료됩니다. 계속 삭제할까요?"
+        detail={forceDeleteTarget ? (
+          <div className="rounded-lg border border-[#fed7aa] bg-[#fff7ed] px-3 py-2">
+            <p className="text-[13px] font-black text-[#9a3412]">{forceDeleteTarget.platform.name}</p>
+            <p className="mt-1 text-[12px] font-semibold text-[#c2410c]">
+              사용 중: {forceDeleteTarget.session.holderName ?? forceDeleteTarget.session.holderEmail ?? '알 수 없음'}
+            </p>
+            <p className="mt-1 text-[11px] font-semibold text-[#ea580c]">
+              종료 예정: {new Date(forceDeleteTarget.session.endsAt).toLocaleString('ko-KR')}
+            </p>
+          </div>
+        ) : null}
+        confirmLabel="강제 종료 후 삭제"
+        danger
+        icon={ShieldAlert}
+        loading={Boolean(forceDeleteTarget && deletingPlatformId === forceDeleteTarget.platform.id)}
+        onCancel={() => {
+          if (!deletingPlatformId) setForceDeleteTarget(null);
+        }}
+        onConfirm={() => {
+          if (forceDeleteTarget) void handleDeletePlatform(forceDeleteTarget.platform, true);
+        }}
+      />
+
+      <ConfirmDialog
+        open={Boolean(forceAssignmentTarget)}
+        title="사용 중인 플랫폼입니다"
+        message="배정을 변경하면 학생의 제어권과 실행 중인 플랫폼 세션이 강제로 종료됩니다. 계속 배정할까요?"
+        detail={forceAssignmentTarget ? (
+          <div className="rounded-lg border border-[#fed7aa] bg-[#fff7ed] px-3 py-2">
+            <p className="text-[13px] font-black text-[#9a3412]">{forceAssignmentTarget.platform.name}</p>
+            <p className="mt-1 text-[12px] font-semibold text-[#c2410c]">
+              배정 대상: {forceAssignmentTarget.group.name}
+            </p>
+            <p className="mt-1 text-[12px] font-semibold text-[#c2410c]">
+              사용 중: {forceAssignmentTarget.session.holderName ?? forceAssignmentTarget.session.holderEmail ?? '알 수 없음'}
+            </p>
+            <p className="mt-1 text-[11px] font-semibold text-[#ea580c]">
+              종료 예정: {new Date(forceAssignmentTarget.session.endsAt).toLocaleString('ko-KR')}
+            </p>
+          </div>
+        ) : null}
+        confirmLabel="강제 종료 후 배정"
+        danger
+        icon={ShieldAlert}
+        loading={Boolean(forceAssignmentTarget && assigningPlatformId === forceAssignmentTarget.platform.id)}
+        onCancel={() => {
+          if (!assigningPlatformId) setForceAssignmentTarget(null);
+        }}
+        onConfirm={() => {
+          if (forceAssignmentTarget) void handleAssignPlatform(forceAssignmentTarget.platform, forceAssignmentTarget.group, true);
+        }}
+      />
+    </div>
+  );
+}
+
+function PlatformMeta({ icon: Icon, label, value, danger = false }: { icon: LucideIcon; label: string; value: string; danger?: boolean }) {
+  return (
+    <div className="min-w-0 text-center">
+      <div className="flex items-center justify-center gap-1.5 text-[11px] font-bold text-[#94a3b8] xl:hidden">
+        <Icon size={13} aria-hidden="true" />
+        {label}
+      </div>
+      <p className={`mt-1 truncate text-[13px] font-semibold xl:mt-0 ${danger ? 'text-[#e11d48]' : 'text-[#111827]'}`}>{value}</p>
+    </div>
+  );
+}
+
+function getNextPlatformName(masterPlatforms: MasterPlatform[], platforms: InstructorPlatform[], selectedMasterId: string) {
+  const master = masterPlatforms.find((platform) => platform.id === selectedMasterId);
+  if (!master) return '';
+
+  const usedNumbers = platforms
+    .filter((platform) => platform.masterPlatformId === selectedMasterId || platform.name.startsWith(master.name))
+    .map((platform) => {
+      const match = platform.name.match(/#(\d+)$/);
+      return match ? Number(match[1]) : 0;
+    });
+  let nextNo = 1;
+  while (usedNumbers.includes(nextNo)) nextNo += 1;
+  return `${master.name} #${String(nextNo).padStart(2, '0')}`;
+}
+
+function normalizeAgentKey(value: string | null | undefined) {
+  return value?.trim().toLowerCase().replace(/\s+/g, '-') ?? '';
+}
+
+function isRegisteredAgent(agent: TeachingAgent, registeredAgentKeys: Set<string>) {
+  const registeredKeys = Array.from(registeredAgentKeys);
+  return [agent.id, agent.hostname, agent.name, agent.ip, agent.user]
+    .map(normalizeAgentKey)
+    .filter(Boolean)
+    .some((agentKey) => registeredKeys.some((registeredKey) => (
+      agentKey === registeredKey ||
+      agentKey.includes(registeredKey) ||
+      registeredKey.includes(agentKey)
+    )));
+}
+
+function SummaryCard({ label, value, icon: Icon, tone }: { label: string; value: string; icon: LucideIcon; tone: string }) {
+  return (
+    <article className="rounded-lg border border-[#c7d2e0] bg-white px-5 py-4">
+      <div className="flex items-center justify-between gap-3">
+        <div className="min-w-0">
+          <p className="text-[12px] font-semibold text-[#64748b]">{label}</p>
+          <p className="mt-2 text-[20px] font-black leading-none text-[#111827]">{value}</p>
+        </div>
+        <span className={`grid h-11 w-11 shrink-0 place-items-center rounded-md ${tone}`}>
+          <Icon size={28} aria-hidden="true" />
+        </span>
+      </div>
+    </article>
+  );
+}
+
+function statusTone(status: string) {
+  if (status === '활성') return 'bg-[#f0efff] text-[#4f46e5]';
+  if (status === '오류') return 'bg-[#fff1f2] text-[#e11d48]';
+  return 'bg-[#f1f5f9] text-[#64748b]';
+}
+
+function SettingsSection({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <section className="mb-6 last:mb-0">
+      <h4 className="mb-3.5 text-[14px] font-black text-[#111827]">{title}</h4>
+      {children}
+    </section>
+  );
+}
+
+function SettingsField({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <label className="block">
+      <span className="text-[12px] font-bold text-[#64748b]">{label}</span>
+      <span className="mt-1.5 block">{children}</span>
+    </label>
+  );
+}
+
+function updateSettingItem(
+  items: PlatformSettingItem[],
+  index: number,
+  key: keyof PlatformSettingItem,
+  value: string | boolean,
+) {
+  return items.map((item, itemIndex) => itemIndex === index ? { ...item, [key]: value } : item);
+}
+
+function normalizeSensorItems(items: PlatformSettingItem[]) {
+  return items.map((item) => ({
+    ...item,
+    enabled: item.enabled !== false,
+  }));
+}
+
+function SensorSettingRow({
+  title,
+  description,
+  enabled,
+  onEnabledChange,
+}: {
+  title: string;
+  description: string;
+  enabled: boolean;
+  onEnabledChange: (value: boolean) => void;
+}) {
+  return (
+    <div className="mb-2 flex items-center justify-between gap-3 rounded-lg border border-[#d1d9e6] bg-white px-3 py-3 last:mb-0">
+      <label className="flex min-w-0 items-center gap-3">
+        <input
+          className="h-4 w-4 shrink-0 accent-[#2563eb]"
+          type="checkbox"
+          checked={enabled}
+          onChange={(event) => onEnabledChange(event.target.checked)}
+        />
+        <span className="min-w-0">
+          <span className="block text-[13px] font-black text-[#111827]">{title}</span>
+          <span className="mt-0.5 block truncate text-[12px] font-semibold text-[#64748b]">{description}</span>
+        </span>
+      </label>
+      <span className={`shrink-0 rounded-md border px-2 py-1 text-[11px] font-bold ${enabled ? 'border-[#bfdbfe] bg-[#eff6ff] text-[#2563eb]' : 'border-[#cbd5e1] bg-[#f8fafc] text-[#94a3b8]'}`}>
+        {enabled ? '활성' : '비활성'}
+      </span>
+    </div>
+  );
+}
+
+function ReadonlyInfoRow({
+  title,
+  description,
+  installed,
+}: {
+  title: string;
+  description: string;
+  installed: boolean;
+}) {
+  return (
+    <div className="mb-2 flex items-center justify-between gap-3 rounded-lg border border-[#d1d9e6] bg-white px-3 py-3 last:mb-0">
+      <div className="min-w-0">
+        <p className="text-[13px] font-black text-[#111827]">{title}</p>
+        <p className="mt-0.5 truncate text-[12px] font-semibold text-[#64748b]">{description}</p>
+      </div>
+      <span className={`shrink-0 rounded-md border px-2 py-1 text-[11px] font-bold ${installed ? 'border-[#c7d2fe] bg-[#eef2ff] text-[#4f46e5]' : 'border-[#cbd5e1] bg-[#f8fafc] text-[#94a3b8]'}`}>
+        {installed ? '설치됨' : '미설치'}
+      </span>
+    </div>
+  );
+}
+
+function AlgorithmSelect({ label, value, options, onChange }: { label: string; value: string; options: string[]; onChange: (value: string) => void }) {
+  return (
+    <label className="block rounded-lg border border-[#d1d9e6] bg-white p-3 hover:border-[#bfdbfe] hover:bg-[#f8fbff]">
+      <span className="text-[12px] font-bold text-[#64748b]">{label}</span>
+      <select className="mt-2 h-10 w-full rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-semibold text-[#111827] outline-none focus:border-[#2563eb]" value={value} onChange={(event) => onChange(event.target.value)}>
+        {options.map((option) => (
+          <option key={option}>{option}</option>
+        ))}
+      </select>
+    </label>
+  );
+}
diff --git a/src/pages/profile/ProfilePage.tsx b/src/pages/profile/ProfilePage.tsx
new file mode 100644
index 0000000..4876ed9
--- /dev/null
+++ b/src/pages/profile/ProfilePage.tsx
@@ -0,0 +1,199 @@
+import { useRef, useState, type ChangeEvent } from 'react';
+import { Building2, Camera, Loader2, Mail, ShieldCheck, Trash2, type LucideIcon } from 'lucide-react';
+import { ConfirmDialog } from '../../components/ConfirmDialog';
+import { PageHeader } from '../../components/PageHeader';
+import { useToast } from '../../components/ToastProvider';
+import { useProfileAvatar } from '../../hooks/useProfileAvatar';
+import { deleteProfileAvatar, notifyProfileAvatarDeleted, notifyProfileAvatarUpdated, resizeImageToWebp, uploadProfileAvatar } from '../../lib/profileAvatar';
+import type { AuthSession } from '../../types/auth';
+
+type ProfilePageProps = {
+  session: AuthSession;
+};
+
+export function ProfilePage({ session }: ProfilePageProps) {
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const { showToast } = useToast();
+  const { avatarObjectUrl, avatarMissing, avatarLoading, refreshAvatar, setAvatarMissing } = useProfileAvatar(session.accessToken);
+  const [avatarUploading, setAvatarUploading] = useState(false);
+  const [avatarDeleting, setAvatarDeleting] = useState(false);
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+  const displayName = getDisplayName(session);
+  const affiliation = getAffiliation(session);
+  const roleLabel = getRoleLabel(session.user.role);
+  const organizationName = session.user.primaryAffiliation?.organizationName ?? '소속 미지정';
+  const department = session.user.primaryAffiliation?.department ?? '부서 미지정';
+  const position = session.user.primaryAffiliation?.position ?? '직책 미지정';
+  const hasAvatar = !avatarMissing && Boolean(avatarObjectUrl);
+  const avatarBusy = avatarLoading || avatarUploading || avatarDeleting;
+
+  const handleAvatarSelect = async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    event.target.value = '';
+    if (!file) return;
+
+    setAvatarUploading(true);
+
+    try {
+      const imageBlob = await resizeImageToWebp(file, 128);
+      await uploadProfileAvatar(session.accessToken, imageBlob);
+      refreshAvatar();
+      notifyProfileAvatarUpdated();
+      showToast({ title: '프로필 이미지가 변경되었습니다.', variant: 'success' });
+    } catch (error) {
+      showToast({
+        title: '프로필 이미지 변경 실패',
+        message: error instanceof Error ? error.message : '이미지를 다시 확인해주세요.',
+        variant: 'error',
+      });
+    } finally {
+      setAvatarUploading(false);
+    }
+  };
+
+  const handleAvatarDelete = async () => {
+    setAvatarDeleting(true);
+
+    try {
+      await deleteProfileAvatar(session.accessToken);
+      setAvatarMissing(true);
+      notifyProfileAvatarDeleted();
+      setDeleteConfirmOpen(false);
+      showToast({ title: '프로필 이미지가 삭제되었습니다.', variant: 'success' });
+    } catch {
+      showToast({ title: '프로필 이미지 삭제 실패', message: '잠시 후 다시 시도해주세요.', variant: 'error' });
+    } finally {
+      setAvatarDeleting(false);
+    }
+  };
+
+  return (
+    <div className="mx-auto max-w-[1220px]">
+      <PageHeader route="profile" />
+
+      <section className="grid gap-4 xl:grid-cols-[360px_minmax(0,1fr)]">
+        <div className="rounded-lg border border-[#c7d2e0] bg-white p-5">
+          <div className="flex items-center gap-4">
+            <div className="relative h-16 w-16 shrink-0">
+              <div className="grid h-full w-full place-items-center overflow-hidden rounded-full border border-[#dbe3ef] bg-[#2563eb] text-[22px] font-black text-white shadow-[0_12px_24px_rgba(37,99,235,0.18)]">
+                {hasAvatar ? (
+                  <img
+                    src={avatarObjectUrl ?? undefined}
+                    alt=""
+                    className="h-full w-full object-cover"
+                    onError={() => setAvatarMissing(true)}
+                  />
+                ) : (
+                  displayName.slice(0, 1)
+                )}
+              </div>
+              {avatarBusy ? (
+                <span className="absolute inset-0 grid place-items-center rounded-full bg-white/65 text-[#2563eb] backdrop-blur-[2px]">
+                  <Loader2 size={18} className="animate-spin" aria-hidden="true" />
+                </span>
+              ) : null}
+              <input ref={fileInputRef} type="file" accept="image/*" className="hidden" onChange={handleAvatarSelect} />
+              <button
+                type="button"
+                className="absolute bottom-0 right-0 z-10 grid h-7 w-7 translate-x-0.5 translate-y-0.5 cursor-pointer place-items-center rounded-full border border-white bg-[#2563eb] text-white shadow-[0_8px_18px_rgba(37,99,235,0.28)] transition hover:bg-[#1d4ed8] disabled:cursor-not-allowed disabled:opacity-60"
+                disabled={avatarBusy}
+                onClick={() => fileInputRef.current?.click()}
+                aria-label="프로필 이미지 등록"
+              >
+                <Camera size={14} aria-hidden="true" />
+              </button>
+              {hasAvatar ? (
+                <button
+                  type="button"
+                  className="absolute right-0 top-0 z-10 grid h-7 w-7 translate-x-0.5 -translate-y-0.5 cursor-pointer place-items-center rounded-full border border-white bg-[#fff1f2] text-[#e11d48] shadow-[0_8px_18px_rgba(225,29,72,0.18)] transition hover:bg-[#ffe4e6] disabled:cursor-not-allowed disabled:opacity-60"
+                  disabled={avatarBusy}
+                  onClick={() => setDeleteConfirmOpen(true)}
+                  aria-label="프로필 이미지 삭제"
+                >
+                  <Trash2 size={13} aria-hidden="true" />
+                </button>
+              ) : null}
+            </div>
+            <div className="min-w-0">
+              <h2 className="truncate text-[18px] font-black text-[#111827]">{displayName}</h2>
+              <p className="mt-1 truncate text-[12px] font-bold text-[#64748b]">{roleLabel}</p>
+            </div>
+          </div>
+
+          <div className="mt-6 space-y-3">
+            <ProfileRow icon={Building2} label="소속" value={affiliation} />
+            <ProfileRow icon={Mail} label="이메일" value={session.user.email} />
+            <ProfileRow icon={ShieldCheck} label="권한" value={roleLabel} />
+          </div>
+        </div>
+
+        <div className="rounded-lg border border-[#c7d2e0] bg-white">
+          <div className="border-b border-[#cbd5e1] px-5 py-4">
+            <h2 className="text-[15px] font-black text-[#111827]">계정 정보</h2>
+            <p className="mt-1 text-[12px] font-bold text-[#64748b]">공통 인증 서버에서 전달된 로그인 정보입니다.</p>
+          </div>
+
+          <div className="grid gap-3 p-5 md:grid-cols-2">
+            <InfoCard label="소속 기관" value={organizationName} />
+            <InfoCard label="부서" value={department} />
+            <InfoCard label="직책" value={position} />
+            <InfoCard label="계정 상태" value="활성" />
+          </div>
+        </div>
+      </section>
+
+      <ConfirmDialog
+        open={deleteConfirmOpen}
+        title="프로필 이미지 삭제"
+        message="등록된 썸네일 이미지를 삭제하시겠습니까?"
+        confirmLabel="삭제"
+        loading={avatarDeleting}
+        danger
+        icon={Trash2}
+        onCancel={() => setDeleteConfirmOpen(false)}
+        onConfirm={() => void handleAvatarDelete()}
+      />
+    </div>
+  );
+}
+
+function ProfileRow({ icon: Icon, label, value }: { icon: LucideIcon; label: string; value: string }) {
+  return (
+    <div className="flex items-start gap-3 rounded-lg bg-[#f8fafc] px-3 py-3">
+      <Icon className="mt-0.5 shrink-0 text-[#64748b]" size={16} aria-hidden="true" />
+      <div className="min-w-0">
+        <p className="text-[11px] font-bold text-[#94a3b8]">{label}</p>
+        <p className="mt-1 break-words text-[13px] font-bold text-[#111827]">{value}</p>
+      </div>
+    </div>
+  );
+}
+
+function InfoCard({ label, value, wide = false }: { label: string; value: string; wide?: boolean }) {
+  return (
+    <article className={`rounded-lg border border-[#c7d2e0] bg-white p-4 ${wide ? 'md:col-span-2' : ''}`}>
+      <p className="text-[12px] font-semibold text-[#64748b]">{label}</p>
+      <p className="mt-2 text-[14px] font-bold text-[#111827]">{value}</p>
+    </article>
+  );
+}
+
+function getDisplayName(session: AuthSession): string {
+  const name = session.user.name?.trim();
+  if (name && name !== 'ATNMY Studio Admin') return name;
+  return session.user.email.split('@')[0] || '강사';
+}
+
+function getAffiliation(session: AuthSession): string {
+  const affiliation = session.user.primaryAffiliation;
+  if (!affiliation) return '소속 미지정';
+
+  return [affiliation.organizationName, affiliation.department, affiliation.position].filter(Boolean).join(' · ');
+}
+
+function getRoleLabel(role: string): string {
+  const normalized = role.toUpperCase();
+  if (normalized === 'LMS_ADMIN') return '관리자';
+  if (normalized === 'INSTRUCTOR') return '강사';
+  return role;
+}
diff --git a/src/pages/settings/SettingsPage.tsx b/src/pages/settings/SettingsPage.tsx
new file mode 100644
index 0000000..64d723e
--- /dev/null
+++ b/src/pages/settings/SettingsPage.tsx
@@ -0,0 +1,6 @@
+import { Settings } from 'lucide-react';
+import { PlaceholderPage } from '../common/PlaceholderPage';
+
+export function SettingsPage() {
+  return <PlaceholderPage icon={Settings} route="settings" items={['권한 정책', '알림 설정', '서비스 연결']} />;
+}
diff --git a/src/pages/students/StudentsPage.tsx b/src/pages/students/StudentsPage.tsx
new file mode 100644
index 0000000..8697530
--- /dev/null
+++ b/src/pages/students/StudentsPage.tsx
@@ -0,0 +1,611 @@
+import { useCallback, useEffect, useMemo, useState, type FormEvent } from 'react';
+import { createPortal } from 'react-dom';
+import { BarChart3, CircleAlert, GitBranch, Loader2, Plus, Search, Trash2, UserRound, Wifi, X, type LucideIcon } from 'lucide-react';
+import { PageHeader } from '../../components/PageHeader';
+import { PaginationBar } from '../../components/PaginationBar';
+import { useToast } from '../../components/ToastProvider';
+import { listInstructorGroups, type InstructorGroup } from '../../lib/groups';
+import { createInstructorStudent, listInstructorStudents, removeInstructorStudent, type InstructorStudent, type InstructorStudentsSummary } from '../../lib/students';
+import type { AuthSession } from '../../types/auth';
+
+const emptySummary: InstructorStudentsSummary = {
+  totalStudents: 0,
+  onlineStudents: 0,
+  averageProgress: 0,
+  unresolvedIssues: 0,
+};
+
+export function StudentsPage({ session, selectedCourseId }: { session: AuthSession; selectedCourseId: string }) {
+  const { showToast } = useToast();
+  const [students, setStudents] = useState<InstructorStudent[]>([]);
+  const [summary, setSummary] = useState<InstructorStudentsSummary>(emptySummary);
+  const [query, setQuery] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [groups, setGroups] = useState<InstructorGroup[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [studentModalOpen, setStudentModalOpen] = useState(false);
+  const [newStudentEmail, setNewStudentEmail] = useState('');
+  const [newStudentName, setNewStudentName] = useState('');
+  const [newStudentGroupId, setNewStudentGroupId] = useState('unassigned');
+  const [studentSaving, setStudentSaving] = useState(false);
+  const [studentFormError, setStudentFormError] = useState<string | null>(null);
+  const [removingStudentId, setRemovingStudentId] = useState<string | null>(null);
+  const [removeTarget, setRemoveTarget] = useState<InstructorStudent | null>(null);
+  const [issueTarget, setIssueTarget] = useState<InstructorStudent | null>(null);
+
+  const loadStudents = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const payload = await listInstructorStudents(session.accessToken, selectedCourseId || null);
+      setStudents(payload.students);
+      setSummary(payload.summary);
+    } catch (reason) {
+      setStudents([]);
+      setSummary(emptySummary);
+      setError(reason instanceof Error ? reason.message : '수강생 현황을 불러오지 못했습니다.');
+    } finally {
+      setLoading(false);
+    }
+  }, [session.accessToken, selectedCourseId]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    loadStudents();
+    listInstructorGroups(session.accessToken, selectedCourseId || null)
+      .then((payload) => {
+        if (!cancelled) setGroups(payload.groups);
+      })
+      .catch(() => {
+        if (!cancelled) setGroups([]);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [loadStudents, session.accessToken, selectedCourseId]);
+
+  const filteredStudents = useMemo(() => {
+    const keyword = query.trim().toLowerCase();
+    if (!keyword) return students;
+
+    return students.filter((student) =>
+      [student.name, student.email, student.group, student.week, student.courseTitle]
+        .filter(Boolean)
+        .join(' ')
+        .toLowerCase()
+        .includes(keyword),
+    );
+  }, [query, students]);
+
+  const pagedStudents = useMemo(() => filteredStudents.slice((page - 1) * pageSize, page * pageSize), [filteredStudents, page, pageSize]);
+
+  useEffect(() => {
+    setPage(1);
+  }, [query]);
+
+  useEffect(() => {
+    const totalPages = Math.max(1, Math.ceil(filteredStudents.length / pageSize));
+    if (page > totalPages) setPage(totalPages);
+  }, [filteredStudents.length, page, pageSize]);
+
+  useEffect(() => {
+    if (!studentModalOpen && !removeTarget && !issueTarget) return;
+
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, [issueTarget, removeTarget, studentModalOpen]);
+
+  const handlePageSizeChange = (nextPageSize: number) => {
+    setPageSize(nextPageSize);
+    setPage(1);
+  };
+
+  const openStudentModal = () => {
+    setNewStudentEmail('');
+    setNewStudentName('');
+    setNewStudentGroupId('unassigned');
+    setStudentFormError(null);
+    setStudentModalOpen(true);
+  };
+
+  const closeStudentModal = () => {
+    if (studentSaving) return;
+    setStudentModalOpen(false);
+  };
+
+  const handleCreateStudent = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const email = newStudentEmail.trim();
+    const name = newStudentName.trim();
+
+    if (!email || !name) {
+      setStudentFormError('이메일과 이름을 입력해 주세요.');
+      return;
+    }
+
+    setStudentSaving(true);
+    setStudentFormError(null);
+
+    try {
+      const payload = await createInstructorStudent(session.accessToken, {
+        courseId: selectedCourseId || null,
+        email,
+        name,
+        groupId: newStudentGroupId === 'unassigned' ? null : newStudentGroupId,
+      });
+      setStudents(payload.students);
+      setSummary(payload.summary);
+      setStudentModalOpen(false);
+      setPage(1);
+      showToast({
+        title: '수강생이 추가되었습니다.',
+        message: name,
+      });
+    } catch (reason) {
+      const message = reason instanceof Error ? reason.message : '수강생을 등록하지 못했습니다.';
+      setStudentFormError(message);
+      showToast({
+        title: '수강생 추가에 실패했습니다.',
+        message,
+        variant: 'error',
+      });
+    } finally {
+      setStudentSaving(false);
+    }
+  };
+
+  const handleRemoveStudent = async (student: InstructorStudent) => {
+    setRemovingStudentId(student.id);
+    setError(null);
+
+    try {
+      const payload = await removeInstructorStudent(session.accessToken, student.id);
+      setStudents(payload.students);
+      setSummary(payload.summary);
+      showToast({
+        title: '수강생이 제외되었습니다.',
+        message: student.name,
+      });
+    } catch (reason) {
+      const message = reason instanceof Error ? reason.message : '수강생을 제외하지 못했습니다.';
+      setError(message);
+      showToast({
+        title: '수강생 제외에 실패했습니다.',
+        message,
+        variant: 'error',
+      });
+    } finally {
+      setRemovingStudentId(null);
+      setRemoveTarget(null);
+    }
+  };
+
+  const summaryItems = [
+    { label: '전체 수강생', value: `${summary.totalStudents}명`, icon: UserRound, tone: 'bg-[#f0efff] text-[#4f46e5]' },
+    { label: '현재 접속', value: `${summary.onlineStudents}명`, icon: Wifi, tone: 'bg-[#eff6ff] text-[#2563eb]' },
+    { label: '평균 진도', value: `${summary.averageProgress}%`, icon: BarChart3, tone: 'bg-[#fff7ed] text-[#f97316]' },
+    { label: '이슈', value: `${summary.unresolvedIssues}건`, icon: CircleAlert, tone: 'bg-[#fff1f2] text-[#e11d48]' },
+  ];
+
+  return (
+    <div className="mx-auto max-w-[1220px]">
+      <PageHeader
+        route="students"
+        action={
+          <button className="inline-flex h-9 items-center gap-2 rounded-md bg-[#2563eb] px-3 text-[13px] font-bold text-white hover:bg-[#1d4ed8]" type="button" onClick={openStudentModal}>
+            <Plus size={15} aria-hidden="true" />
+            수강생 추가
+          </button>
+        }
+      />
+
+      <section className="mb-4 grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+        {summaryItems.map((item) => (
+          <SummaryCard key={item.label} {...item} />
+        ))}
+      </section>
+
+      <section className="rounded-lg border border-[#c7d2e0] bg-white">
+        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-[#cbd5e1] px-4 py-3">
+          <div>
+            <h2 className="text-[15px] font-black text-[#111827]">수강생 리스트</h2>
+            <p className="mt-1 text-[12px] font-bold text-[#64748b]">그룹, 주차, 진도, 커밋, 이슈, 최근 활동 조회</p>
+          </div>
+
+          <label className="flex h-9 w-full max-w-[260px] items-center gap-2 rounded-md border border-[#d1d9e6] bg-white px-3 text-[#94a3b8]">
+            <Search size={15} aria-hidden="true" />
+            <input
+              className="min-w-0 flex-1 bg-transparent text-[13px] font-bold text-[#111827] outline-none placeholder:text-[#94a3b8]"
+              placeholder="수강생 검색"
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+            />
+          </label>
+        </div>
+
+        <div>
+          <div>
+            <div className="hidden gap-4 grid-cols-[44px_108px_minmax(160px,1fr)_minmax(116px,0.7fr)_78px_minmax(150px,1fr)_58px_58px_118px_70px_42px] items-center border-b border-[#cbd5e1] bg-[#f8fafc] px-4 py-3 text-center text-[11px] font-bold text-[#64748b] xl:grid">
+              <span>No.</span>
+              <span>이름</span>
+              <span>이메일</span>
+              <span>그룹</span>
+              <span>주차</span>
+              <span>진행률</span>
+              <span>커밋</span>
+              <span>이슈</span>
+              <span>최근 활동</span>
+              <span>상태</span>
+              <span>제외</span>
+            </div>
+
+            <div className="divide-y divide-[#e2e8f0]">
+              {loading ? (
+                <div className="flex h-[220px] items-center justify-center text-[#64748b]">
+                  <Loader2 className="mr-2 animate-spin" size={18} aria-hidden="true" />
+                  <span className="text-[13px] font-bold">수강생 현황을 불러오는 중입니다.</span>
+                </div>
+              ) : error ? (
+                <EmptyState message={error} />
+              ) : filteredStudents.length > 0 ? (
+                pagedStudents.map((student, index) => (
+                  <article className="grid gap-4 px-4 py-4 xl:grid-cols-[44px_108px_minmax(160px,1fr)_minmax(116px,0.7fr)_78px_minmax(150px,1fr)_58px_58px_118px_70px_42px] xl:items-center" key={student.id}>
+                    <Cell label="번호">
+                      <span className="text-[13px] font-bold text-[#64748b]">{filteredStudents.length - ((page - 1) * pageSize + index)}</span>
+                    </Cell>
+
+                    <div className="min-w-0 text-center">
+                      <p className="mb-2 text-[11px] font-bold text-[#94a3b8] xl:hidden">이름</p>
+                      <h3 className="truncate text-[14px] font-black text-[#111827]">{student.name}</h3>
+                    </div>
+
+                    <Cell label="이메일">
+                      <span className="block truncate text-[12px] font-semibold text-[#64748b]">{student.email}</span>
+                    </Cell>
+
+                    <Cell label="그룹">
+                      <span className={`inline-flex h-7 items-center rounded-md px-2.5 text-[12px] font-semibold ${
+                        student.group === '미배정' ? 'bg-[#f1f5f9] text-[#64748b]' : 'bg-[#f0efff] text-[#4f46e5]'
+                      }`}>{student.group}</span>
+                    </Cell>
+
+                    <Cell label="주차">
+                      <span className="text-[13px] font-semibold text-[#111827]">{student.week}</span>
+                    </Cell>
+
+                    <div>
+                      <div className="mb-2 flex items-center justify-between text-[12px] font-bold text-[#475569]">
+                        <span className="xl:hidden">진행률</span>
+                        <span className="font-semibold text-[#4f46e5]">{student.progress}%</span>
+                      </div>
+                      <div className="h-1.5 overflow-hidden rounded-full bg-[#dbe3ef]">
+                        <div className="h-full rounded-full bg-[#4f46e5]" style={{ width: `${student.progress}%` }} />
+                      </div>
+                    </div>
+
+                    <StudentMetric icon={GitBranch} label="커밋" value={student.commits} />
+                    <StudentIssueMetric student={student} onOpen={setIssueTarget} />
+
+                    <Cell label="최근 활동">
+                      <span className="text-[13px] font-semibold text-[#64748b]">{student.lastActive}</span>
+                    </Cell>
+
+                    <Cell label="상태">
+                      <span className={`inline-flex h-7 items-center justify-center rounded-md px-2.5 text-[12px] font-bold ${student.online ? 'bg-[#eef2ff] text-[#4f46e5]' : 'bg-[#f1f5f9] text-[#64748b]'}`}>
+                        {student.online ? '온라인' : '오프라인'}
+                      </span>
+                    </Cell>
+
+                    <div className="flex justify-center">
+                      <button
+                        className="grid h-8 w-8 place-items-center rounded-md border border-[#fecdd3] bg-[#fff1f2] text-[#e11d48] hover:bg-[#ffe4e6]"
+                        type="button"
+                        aria-label={`${student.name} 수강 제외`}
+                        title="수강 제외"
+                        onClick={() => setRemoveTarget(student)}
+                        disabled={removingStudentId === student.id}
+                      >
+                        {removingStudentId === student.id ? <Loader2 className="animate-spin" size={15} aria-hidden="true" /> : <Trash2 size={15} aria-hidden="true" />}
+                      </button>
+                    </div>
+                  </article>
+                ))
+              ) : (
+                <EmptyState message="조회된 수강생이 없습니다." />
+              )}
+            </div>
+          </div>
+        </div>
+
+        <PaginationBar
+          page={page}
+          pageSize={pageSize}
+          totalItems={filteredStudents.length}
+          totalLabel={`전체 ${filteredStudents.length}명`}
+          onPageChange={setPage}
+          onPageSizeChange={handlePageSizeChange}
+        />
+      </section>
+
+      {studentModalOpen ? createPortal((
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#0f172a]/25 px-4">
+          <form
+            className="w-full max-w-[440px] rounded-lg border border-[#c7d2e0] bg-white shadow-[0_24px_70px_rgba(15,23,42,0.18)]"
+            onSubmit={handleCreateStudent}
+          >
+            <div className="flex items-center justify-between border-b border-[#cbd5e1] px-5 py-4">
+              <div>
+                <h2 className="text-[16px] font-black text-[#111827]">수강생 추가</h2>
+                <p className="mt-1 text-[12px] font-bold text-[#64748b]">수강생 정보를 입력해 주세요.</p>
+              </div>
+              <button
+                className="grid h-8 w-8 place-items-center rounded-md text-[#64748b] hover:bg-[#f1f5f9] hover:text-[#111827]"
+                type="button"
+                onClick={closeStudentModal}
+                aria-label="닫기"
+                title="닫기"
+              >
+                <X size={17} aria-hidden="true" />
+              </button>
+            </div>
+
+            <div className="space-y-4 px-5 py-5">
+              <label className="block">
+                <span className="mb-2 block text-[12px] font-black text-[#334155]">이메일</span>
+                <input
+                  className="h-10 w-full rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-semibold text-[#111827] outline-none placeholder:text-[#94a3b8] focus:border-[#2563eb] focus:ring-2 focus:ring-[#dbeafe]"
+                  type="email"
+                  placeholder="student@futuredrive.net"
+                  value={newStudentEmail}
+                  onChange={(event) => setNewStudentEmail(event.target.value)}
+                />
+              </label>
+
+              <label className="block">
+                <span className="mb-2 block text-[12px] font-black text-[#334155]">이름</span>
+                <input
+                  className="h-10 w-full rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-semibold text-[#111827] outline-none placeholder:text-[#94a3b8] focus:border-[#2563eb] focus:ring-2 focus:ring-[#dbeafe]"
+                  placeholder="홍길동"
+                  value={newStudentName}
+                  onChange={(event) => setNewStudentName(event.target.value)}
+                />
+              </label>
+
+              <label className="block">
+                <span className="mb-2 block text-[12px] font-black text-[#334155]">그룹</span>
+                <select
+                  className="h-10 w-full rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-semibold text-[#111827] outline-none focus:border-[#2563eb] focus:ring-2 focus:ring-[#dbeafe]"
+                  value={newStudentGroupId}
+                  onChange={(event) => setNewStudentGroupId(event.target.value)}
+                >
+                  <option value="unassigned">미배정</option>
+                  {groups.map((group) => (
+                    <option key={group.id} value={group.id}>
+                      {group.name}
+                    </option>
+                  ))}
+                </select>
+              </label>
+
+              {studentFormError ? (
+                <p className="rounded-md bg-[#fff1f2] px-3 py-2 text-[12px] font-bold text-[#e11d48]">{studentFormError}</p>
+              ) : null}
+            </div>
+
+            <div className="flex justify-end gap-2 border-t border-[#cbd5e1] px-5 py-4">
+              <button
+                className="h-9 rounded-md border border-[#d1d9e6] bg-white px-4 text-[13px] font-bold text-[#475569] hover:bg-[#f8fafc]"
+                type="button"
+                onClick={closeStudentModal}
+                disabled={studentSaving}
+              >
+                취소
+              </button>
+              <button
+                className="inline-flex h-9 items-center gap-2 rounded-md bg-[#2563eb] px-4 text-[13px] font-bold text-white hover:bg-[#1d4ed8] disabled:cursor-not-allowed disabled:opacity-60"
+                type="submit"
+                disabled={studentSaving}
+              >
+                {studentSaving ? <Loader2 className="animate-spin" size={15} aria-hidden="true" /> : <Plus size={15} aria-hidden="true" />}
+                등록
+              </button>
+            </div>
+          </form>
+        </div>
+      ), document.body) : null}
+
+      {removeTarget ? createPortal((
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#0f172a]/25 px-4">
+          <div className="w-full max-w-[420px] rounded-lg border border-[#c7d2e0] bg-white shadow-[0_24px_70px_rgba(15,23,42,0.18)]">
+            <div className="flex items-center justify-between border-b border-[#cbd5e1] px-5 py-4">
+              <div>
+                <h2 className="text-[16px] font-black text-[#111827]">수강생 제외</h2>
+                <p className="mt-1 text-[12px] font-bold text-[#64748b]">현재 소속의 수강 목록에서 제외합니다.</p>
+              </div>
+              <button
+                className="grid h-8 w-8 place-items-center rounded-md text-[#64748b] hover:bg-[#f1f5f9] hover:text-[#111827]"
+                type="button"
+                onClick={() => setRemoveTarget(null)}
+                aria-label="닫기"
+                title="닫기"
+                disabled={removingStudentId === removeTarget.id}
+              >
+                <X size={17} aria-hidden="true" />
+              </button>
+            </div>
+
+            <div className="px-5 py-5">
+              <div className="rounded-lg border border-[#cbd5e1] bg-[#f8fafc] px-4 py-3">
+                <p className="truncate text-[14px] font-black text-[#111827]">{removeTarget.name}</p>
+                <p className="mt-1 truncate text-[12px] font-semibold text-[#64748b]">{removeTarget.email}</p>
+              </div>
+            </div>
+
+            <div className="flex justify-end gap-2 border-t border-[#cbd5e1] px-5 py-4">
+              <button
+                className="h-9 rounded-md border border-[#d1d9e6] bg-white px-4 text-[13px] font-bold text-[#475569] hover:bg-[#f8fafc] disabled:cursor-not-allowed disabled:opacity-60"
+                type="button"
+                onClick={() => setRemoveTarget(null)}
+                disabled={removingStudentId === removeTarget.id}
+              >
+                취소
+              </button>
+              <button
+                className="inline-flex h-9 items-center gap-2 rounded-md border border-[#fecdd3] bg-[#fff1f2] px-4 text-[13px] font-bold text-[#e11d48] hover:bg-[#ffe4e6] disabled:cursor-not-allowed disabled:opacity-60"
+                type="button"
+                onClick={() => handleRemoveStudent(removeTarget)}
+                disabled={removingStudentId === removeTarget.id}
+              >
+                {removingStudentId === removeTarget.id ? <Loader2 className="animate-spin" size={15} aria-hidden="true" /> : <Trash2 size={15} aria-hidden="true" />}
+                제외
+              </button>
+            </div>
+          </div>
+        </div>
+      ), document.body) : null}
+
+      {issueTarget ? createPortal((
+        <IssueModal student={issueTarget} onClose={() => setIssueTarget(null)} />
+      ), document.body) : null}
+    </div>
+  );
+}
+
+function EmptyState({ message }: { message: string }) {
+  return (
+    <div className="flex h-[220px] items-center justify-center px-4 text-center">
+      <p className="text-[13px] font-bold text-[#64748b]">{message}</p>
+    </div>
+  );
+}
+
+function Cell({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="min-w-0 text-center">
+      <p className="mb-2 text-[11px] font-bold text-[#94a3b8] xl:hidden">{label}</p>
+      {children}
+    </div>
+  );
+}
+
+function StudentMetric({ icon: Icon, label, value, danger = false }: { icon: typeof GitBranch; label: string; value: number; danger?: boolean }) {
+  return (
+    <div className="min-w-0 text-center">
+      <div className="flex items-center justify-center gap-1.5 text-[11px] font-bold text-[#94a3b8] xl:hidden">
+        <Icon size={13} aria-hidden="true" />
+        {label}
+      </div>
+      <p className={`mt-1 text-[13px] font-semibold xl:mt-0 ${danger ? 'text-[#e11d48]' : 'text-[#111827]'}`}>{value}</p>
+    </div>
+  );
+}
+
+function StudentIssueMetric({ student, onOpen }: { student: InstructorStudent; onOpen: (student: InstructorStudent) => void }) {
+  const hasIssues = student.issues > 0;
+
+  return (
+    <div className="min-w-0 text-center">
+      <div className="flex items-center justify-center gap-1.5 text-[11px] font-bold text-[#94a3b8] xl:hidden">
+        <CircleAlert size={13} aria-hidden="true" />
+        이슈
+      </div>
+      <button
+        type="button"
+        onClick={() => {
+          if (hasIssues) onOpen(student);
+        }}
+        disabled={!hasIssues}
+        className={[
+          'mt-1 inline-flex h-7 min-w-7 items-center justify-center rounded-md px-2 text-[13px] font-black xl:mt-0',
+          hasIssues
+            ? 'cursor-pointer bg-[#fff1f2] text-[#e11d48] transition-colors hover:bg-[#ffe4e6]'
+            : 'cursor-default bg-transparent text-[#111827]',
+        ].join(' ')}
+        title={hasIssues ? '이슈 상세 보기' : undefined}
+      >
+        {student.issues}
+      </button>
+    </div>
+  );
+}
+
+function IssueModal({ student, onClose }: { student: InstructorStudent; onClose: () => void }) {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#0f172a]/25 px-4">
+      <section className="w-full max-w-[520px] overflow-hidden rounded-lg border border-[#c7d2e0] bg-white shadow-[0_24px_70px_rgba(15,23,42,0.18)]">
+        <header className="flex items-center justify-between border-b border-[#cbd5e1] px-5 py-4">
+          <div className="min-w-0">
+            <h2 className="text-[16px] font-black text-[#111827]">이슈 상세</h2>
+            <p className="mt-1 truncate text-[12px] font-bold text-[#64748b]">{student.name} · {student.email}</p>
+          </div>
+          <button
+            className="grid h-8 w-8 place-items-center rounded-md text-[#64748b] hover:bg-[#f1f5f9] hover:text-[#111827]"
+            type="button"
+            onClick={onClose}
+            aria-label="닫기"
+            title="닫기"
+          >
+            <X size={17} aria-hidden="true" />
+          </button>
+        </header>
+
+        <div className="max-h-[520px] overflow-y-auto px-5 py-4">
+          {student.issueItems.length ? (
+            <div className="grid gap-2">
+              {student.issueItems.map((issue, index) => (
+                <article key={`${issue.type}-${issue.week ?? 'score'}-${index}`} className="rounded-lg border border-[#cbd5e1] bg-[#f8fafc] px-4 py-3">
+                  <div className="flex items-start gap-3">
+                    <span className="mt-0.5 grid h-7 w-7 shrink-0 place-items-center rounded-md bg-[#fff1f2] text-[#e11d48]">
+                      <CircleAlert size={15} aria-hidden="true" />
+                    </span>
+                    <div className="min-w-0">
+                      <p className="text-[13px] font-black text-[#111827]">{issue.title}</p>
+                      <p className="mt-1 text-[12px] font-semibold leading-5 text-[#64748b]">{issue.detail}</p>
+                    </div>
+                  </div>
+                </article>
+              ))}
+            </div>
+          ) : (
+            <div className="grid h-[180px] place-items-center text-[13px] font-bold text-[#94a3b8]">표시할 이슈가 없습니다.</div>
+          )}
+        </div>
+
+        <footer className="flex justify-end border-t border-[#cbd5e1] px-5 py-4">
+          <button
+            type="button"
+            onClick={onClose}
+            className="h-9 rounded-md bg-[#2563eb] px-4 text-[13px] font-bold text-white hover:bg-[#1d4ed8]"
+          >
+            확인
+          </button>
+        </footer>
+      </section>
+    </div>
+  );
+}
+
+function SummaryCard({ label, value, icon: Icon, tone }: { label: string; value: string; icon: LucideIcon; tone: string }) {
+  return (
+    <article className="rounded-lg border border-[#c7d2e0] bg-white px-5 py-4">
+      <div className="flex items-center justify-between gap-3">
+        <div className="min-w-0">
+          <p className="text-[12px] font-semibold text-[#64748b]">{label}</p>
+          <p className="mt-2 text-[20px] font-black leading-none text-[#111827]">{value}</p>
+        </div>
+        <span className={`grid h-11 w-11 shrink-0 place-items-center rounded-md ${tone}`}>
+          <Icon size={28} aria-hidden="true" />
+        </span>
+      </div>
+    </article>
+  );
+}
diff --git a/src/pages/submissions/SubmissionsPage.tsx b/src/pages/submissions/SubmissionsPage.tsx
new file mode 100644
index 0000000..809ee51
--- /dev/null
+++ b/src/pages/submissions/SubmissionsPage.tsx
@@ -0,0 +1,935 @@
+import { useEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { BookOpen, CalendarDays, CheckCircle2, Clock3, FileCode2, FolderOpen, GitCommitHorizontal, Loader2, Save, UsersRound, UserRound, X, XCircle } from 'lucide-react';
+
+import { useToast } from '../../components/ToastProvider';
+import { PageHeader } from '../../components/PageHeader';
+import { listInstructorSubmissions, saveInstructorSubmissionScore, type InstructorSubmissionItem } from '../../lib/submissions';
+import type { AuthSession } from '../../types/auth';
+
+type CommitFile = InstructorSubmissionItem['commits'][number]['files'][number];
+type DiffViewLine = {
+  key: string;
+  type: 'file' | 'hunk' | 'context' | 'add' | 'delete' | 'note';
+  oldLine: number | null;
+  newLine: number | null;
+  content: string;
+};
+type PatchModalState = {
+  title: string;
+  subtitle: string;
+  files: CommitFile[];
+  activePath: string;
+} | null;
+
+const statusLabel: Record<InstructorSubmissionItem['status'], string> = {
+  SUBMITTED: '제출완료',
+  PENDING: '미제출',
+  NOT_INSTALLED: '미설치',
+};
+
+const statusTone: Record<InstructorSubmissionItem['status'], string> = {
+  SUBMITTED: 'bg-[#ecfdf5] text-[#15803d]',
+  PENDING: 'bg-[#fff7ed] text-[#c2410c]',
+  NOT_INSTALLED: 'bg-[#f1f5f9] text-[#64748b]',
+};
+
+const parseDiffViewLines = (diff: string): DiffViewLine[] => {
+  const viewLines: DiffViewLine[] = [];
+  let oldLine = 0;
+  let newLine = 0;
+
+  diff.split('\n').forEach((line, index) => {
+    if (line.startsWith('diff --git ')) {
+      const match = line.match(/^diff --git a\/(.+) b\/(.+)$/);
+      viewLines.push({
+        key: `file-${index}`,
+        type: 'file',
+        oldLine: null,
+        newLine: null,
+        content: match?.[2] ?? line.replace(/^diff --git\s+/, ''),
+      });
+      return;
+    }
+
+    if (
+      line.startsWith('index ') ||
+      line.startsWith('--- ') ||
+      line.startsWith('+++ ') ||
+      line.startsWith('new file mode ') ||
+      line.startsWith('deleted file mode ')
+    ) {
+      return;
+    }
+
+    if (line.startsWith('\\ No newline')) {
+      viewLines.push({
+        key: `note-${index}`,
+        type: 'note',
+        oldLine: null,
+        newLine: null,
+        content: '파일 끝 줄바꿈 없음',
+      });
+      return;
+    }
+
+    if (line.startsWith('@@')) {
+      const match = line.match(/@@\s+-(\d+)(?:,\d+)?\s+\+(\d+)(?:,\d+)?\s+@@(.*)$/);
+      oldLine = Number(match?.[1] ?? 0);
+      newLine = Number(match?.[2] ?? 0);
+      viewLines.push({
+        key: `hunk-${index}`,
+        type: 'hunk',
+        oldLine: null,
+        newLine: null,
+        content: match?.[3]?.trim() || line,
+      });
+      return;
+    }
+
+    if (!viewLines.length) return;
+
+    if (line.startsWith('+')) {
+      viewLines.push({
+        key: `add-${index}`,
+        type: 'add',
+        oldLine: null,
+        newLine,
+        content: line.slice(1),
+      });
+      newLine += 1;
+      return;
+    }
+
+    if (line.startsWith('-')) {
+      viewLines.push({
+        key: `delete-${index}`,
+        type: 'delete',
+        oldLine,
+        newLine: null,
+        content: line.slice(1),
+      });
+      oldLine += 1;
+      return;
+    }
+
+    viewLines.push({
+      key: `context-${index}`,
+      type: 'context',
+      oldLine,
+      newLine,
+      content: line.startsWith(' ') ? line.slice(1) : line,
+    });
+    oldLine += 1;
+    newLine += 1;
+  });
+
+  return viewLines;
+};
+
+export function SubmissionsPage({ session }: { session: AuthSession }) {
+  const [items, setItems] = useState<InstructorSubmissionItem[]>([]);
+  const [students, setStudents] = useState<Array<{ id: string; name: string; email: string }>>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedCourseId, setSelectedCourseId] = useState<string | null>(null);
+  const [selectedWeekId, setSelectedWeekId] = useState<string | null>(null);
+  const [selectedGroupName, setSelectedGroupName] = useState<string | null>(null);
+  const [selectedStudentId, setSelectedStudentId] = useState<string | null>(null);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [patchModal, setPatchModal] = useState<PatchModalState>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+
+    listInstructorSubmissions(session.accessToken)
+      .then((payload) => {
+        if (cancelled) return;
+        setItems(payload.items);
+        setStudents(payload.students);
+        setSelectedCourseId((current) => current && payload.courses.some((course) => course.id === current) ? current : payload.courses[0]?.id ?? null);
+        setSelectedWeekId(null);
+        setSelectedGroupName(null);
+        setSelectedStudentId(null);
+        setSelectedId(null);
+      })
+      .catch((reason) => {
+        if (cancelled) return;
+        setError(reason instanceof Error ? reason.message : '제출 현황을 불러오지 못했습니다.');
+        setItems([]);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [session.accessToken]);
+
+  const courseNodes = useMemo(() => items.length
+    ? Array.from(new Map(items.map((item) => [item.course.id, item.course])).values())
+    : [], [items]);
+  const selectedCourse = courseNodes.find((course) => course.id === selectedCourseId) ?? null;
+  const courseItems = useMemo(() => selectedCourse ? items.filter((item) => item.course.id === selectedCourse.id) : [], [items, selectedCourse]);
+  const weekNodes = useMemo(() => {
+    const byWeek = new Map<string, {
+      id: string;
+      week: number;
+      title: string;
+      total: number;
+      submitted: number;
+      pending: number;
+      notInstalled: number;
+    }>();
+    courseItems.forEach((item) => {
+      const current = byWeek.get(item.week.id) ?? {
+        id: item.week.id,
+        week: item.week.week,
+        title: item.week.title,
+        total: 0,
+        submitted: 0,
+        pending: 0,
+        notInstalled: 0,
+      };
+      current.total += 1;
+      if (item.status === 'SUBMITTED') current.submitted += 1;
+      if (item.status === 'PENDING') current.pending += 1;
+      if (item.status === 'NOT_INSTALLED') current.notInstalled += 1;
+      byWeek.set(item.week.id, current);
+    });
+    return Array.from(byWeek.values()).sort((a, b) => a.week - b.week);
+  }, [courseItems]);
+  const selectedWeek = weekNodes.find((week) => week.id === selectedWeekId) ?? null;
+  const weekItems = useMemo(() => selectedWeek ? courseItems.filter((item) => item.week.id === selectedWeek.id) : [], [courseItems, selectedWeek]);
+  const groupNodes = useMemo(() => {
+    const groupMap = new Map<string, { name: string; total: number; submitted: number; pending: number; notInstalled: number }>();
+    weekItems.forEach((item) => {
+      const group = item.student.group || '미배정';
+      const current = groupMap.get(group) ?? { name: group, total: 0, submitted: 0, pending: 0, notInstalled: 0 };
+      current.total += 1;
+      if (item.status === 'SUBMITTED') current.submitted += 1;
+      if (item.status === 'PENDING') current.pending += 1;
+      if (item.status === 'NOT_INSTALLED') current.notInstalled += 1;
+      groupMap.set(group, current);
+    });
+    return Array.from(groupMap.values()).sort((a, b) => a.name.localeCompare(b.name, 'ko'));
+  }, [weekItems]);
+  const selectedGroup = groupNodes.find((group) => group.name === selectedGroupName) ?? null;
+  const studentNodes = useMemo(() => students.map((student) => {
+    const studentItems = weekItems.filter((item) => item.student.group === selectedGroup?.name && item.student.id === student.id);
+    return {
+      ...student,
+      total: studentItems.length,
+      submitted: studentItems.filter((item) => item.status === 'SUBMITTED').length,
+      pending: studentItems.filter((item) => item.status === 'PENDING').length,
+      notInstalled: studentItems.filter((item) => item.status === 'NOT_INSTALLED').length,
+    };
+  }).filter((student) => student.total > 0), [selectedGroup?.name, students, weekItems]);
+  const selectedStudent = studentNodes.find((student) => student.id === selectedStudentId) ?? null;
+  const detailItems = weekItems.filter((item) => item.student.id === selectedStudent?.id);
+  const selectedItem = detailItems.find((item) => item.id === selectedId) ?? null;
+
+  useEffect(() => {
+    if (selectedCourseId && courseNodes.some((course) => course.id === selectedCourseId)) return;
+    setSelectedCourseId(courseNodes[0]?.id ?? null);
+    setSelectedWeekId(null);
+    setSelectedGroupName(null);
+    setSelectedStudentId(null);
+    setSelectedId(null);
+  }, [courseNodes, selectedCourseId]);
+
+  useEffect(() => {
+    if (selectedWeekId && weekNodes.some((week) => week.id === selectedWeekId)) return;
+    setSelectedWeekId(null);
+    setSelectedGroupName(null);
+    setSelectedId(null);
+    setSelectedStudentId(null);
+  }, [selectedWeekId, weekNodes]);
+
+  useEffect(() => {
+    if (selectedGroupName && groupNodes.some((group) => group.name === selectedGroupName)) return;
+    setSelectedGroupName(null);
+    setSelectedStudentId(null);
+    setSelectedId(null);
+  }, [groupNodes, selectedGroupName]);
+
+  useEffect(() => {
+    if (selectedStudentId && studentNodes.some((student) => student.id === selectedStudentId)) return;
+    setSelectedStudentId(null);
+    setSelectedId(null);
+  }, [selectedStudentId, studentNodes, weekItems]);
+
+  useEffect(() => {
+    if (selectedId && detailItems.some((item) => item.id === selectedId)) return;
+    setSelectedId(null);
+  }, [detailItems, selectedId]);
+
+  const handleSaveScore = async (item: InstructorSubmissionItem, score: number) => {
+    const result = await saveInstructorSubmissionScore(session.accessToken, {
+      studentId: item.student.id,
+      weekId: item.week.id,
+      score,
+    });
+
+    setItems((current) => current.map((entry) => (
+      entry.student.id === item.student.id && entry.week.id === item.week.id
+        ? { ...entry, score: result.score }
+        : entry
+    )));
+
+    return result.score;
+  };
+
+  return (
+    <div className="mx-auto max-w-[1320px]">
+      <PageHeader route="submissions" />
+
+      <section className="grid gap-4">
+        <div className="grid gap-3 rounded-lg border border-[#c7d2e0] bg-white p-3 xl:grid-cols-4">
+          <SelectionPanel icon={<BookOpen size={15} />} title="강좌" count={courseNodes.length}>
+            {loading ? <PanelLoadingState message="강좌를 불러오는 중입니다." /> : error ? <EmptyState message={error} /> : courseNodes.length ? courseNodes.map((course) => {
+              const courseItemCount = items.filter((item) => item.course.id === course.id).length;
+              const submittedCount = items.filter((item) => item.course.id === course.id && item.status === 'SUBMITTED').length;
+              return (
+                <button
+                  key={course.id}
+                  type="button"
+                  onClick={() => {
+                    setSelectedCourseId(course.id);
+                    setSelectedWeekId(null);
+                    setSelectedGroupName(null);
+                    setSelectedStudentId(null);
+                    setSelectedId(null);
+                  }}
+                  className={selectionButtonClass(selectedCourse?.id === course.id)}
+                >
+                  <span className="min-w-0">
+                    <span className="block truncate text-[13px] font-black text-[#111827]">{course.title}</span>
+                    <span className="mt-1 block text-[11px] font-bold text-[#64748b]">제출 {submittedCount}/{courseItemCount}</span>
+                  </span>
+                </button>
+              );
+            }) : <EmptyState message="조회된 강좌가 없습니다." />}
+          </SelectionPanel>
+
+          <SelectionPanel icon={<CalendarDays size={15} />} title="주차" count={weekNodes.length}>
+            {loading ? <PanelLoadingState message="주차를 불러오는 중입니다." /> : !selectedCourse ? <EmptyState message="강좌를 선택하세요." /> : weekNodes.length ? weekNodes.map((week) => (
+              <button
+                key={week.id}
+                type="button"
+                onClick={() => {
+                  setSelectedWeekId(week.id);
+                  setSelectedGroupName(null);
+                  setSelectedStudentId(null);
+                  setSelectedId(null);
+                }}
+                className={selectionButtonClass(selectedWeek?.id === week.id)}
+              >
+                <span className="grid h-8 w-8 shrink-0 place-items-center rounded-md bg-[#eef2ff] text-[12px] font-black text-[#4f46e5]">{week.week}</span>
+                <span className="min-w-0">
+                  <span className="block truncate text-[13px] font-black text-[#111827]">{week.title}</span>
+                  <span className="mt-1 block text-[11px] font-bold text-[#64748b]">제출 {week.submitted}/{week.total} · 미제출 {week.pending}</span>
+                </span>
+              </button>
+            )) : <EmptyState message="조회된 주차가 없습니다." />}
+          </SelectionPanel>
+
+          <SelectionPanel icon={<UsersRound size={15} />} title="그룹" count={groupNodes.length}>
+            {!selectedWeek ? <EmptyState message="주차를 선택하세요." /> : groupNodes.length ? groupNodes.map((group) => (
+              <button
+                key={group.name}
+                type="button"
+                onClick={() => {
+                  setSelectedGroupName(group.name);
+                  setSelectedStudentId(null);
+                  setSelectedId(null);
+                }}
+                className={selectionButtonClass(selectedGroup?.name === group.name)}
+              >
+                <span className="min-w-0">
+                  <span className="block truncate text-[13px] font-black text-[#111827]">{group.name}</span>
+                  <span className="mt-1 block text-[11px] font-bold text-[#64748b]">제출 {group.submitted}/{group.total} · 미제출 {group.pending} · 미설치 {group.notInstalled}</span>
+                </span>
+              </button>
+            )) : <EmptyState message="조회된 그룹이 없습니다." />}
+          </SelectionPanel>
+
+          <SelectionPanel icon={<UserRound size={15} />} title="수강생" count={studentNodes.length}>
+            {!selectedGroup ? <EmptyState message="그룹을 선택하세요." /> : studentNodes.length ? studentNodes.map((student) => (
+              <button
+                key={student.id}
+                type="button"
+                onClick={() => {
+                  setSelectedStudentId(student.id);
+                  const firstItem = weekItems.find((item) => item.student.id === student.id);
+                  setSelectedId(firstItem?.id ?? null);
+                }}
+                className={selectionButtonClass(selectedStudent?.id === student.id)}
+              >
+                <span className="min-w-0">
+                  <span className="block truncate text-[13px] font-black text-[#111827]">{student.name}</span>
+                  <span className="mt-1 block truncate text-[11px] font-bold text-[#64748b]">{student.email}</span>
+                  <span className="mt-1 block text-[11px] font-bold text-[#64748b]">제출 {student.submitted}/{student.total} · 미제출 {student.pending}</span>
+                </span>
+              </button>
+            )) : <EmptyState message="조회된 수강생이 없습니다." />}
+          </SelectionPanel>
+        </div>
+
+        <section className="overflow-hidden rounded-lg border border-[#c7d2e0] bg-white">
+          <SubmissionDetail
+            item={selectedItem}
+            items={detailItems}
+            emptyMessage={selectedStudent ? '제출 내역이 없습니다.' : '수강생을 선택하세요.'}
+            onSelect={setSelectedId}
+            onSaveScore={handleSaveScore}
+            onOpenPatch={(title, subtitle, files, activePath) => setPatchModal({ title, subtitle, files, activePath })}
+          />
+        </section>
+      </section>
+
+      {patchModal ? createPortal(
+        <PatchModal
+          modal={patchModal}
+          onChangeActivePath={(activePath) => setPatchModal((current) => current ? { ...current, activePath } : current)}
+          onClose={() => setPatchModal(null)}
+        />,
+        document.body,
+      ) : null}
+    </div>
+  );
+}
+
+function SubmissionDetail({
+  item,
+  items,
+  emptyMessage,
+  onSelect,
+  onSaveScore,
+  onOpenPatch,
+}: {
+  item: InstructorSubmissionItem | null;
+  items: InstructorSubmissionItem[];
+  emptyMessage: string;
+  onSelect: (id: string) => void;
+  onSaveScore: (item: InstructorSubmissionItem, score: number) => Promise<number>;
+  onOpenPatch: (title: string, subtitle: string, files: CommitFile[], activePath: string) => void;
+}) {
+  const [detailTab, setDetailTab] = useState<'final' | 'history'>('final');
+  const [scoreDraft, setScoreDraft] = useState('0');
+  const [scoreSaving, setScoreSaving] = useState(false);
+  const [scoreMessage, setScoreMessage] = useState<{ tone: 'success' | 'error'; text: string } | null>(null);
+  const { showToast } = useToast();
+
+  useEffect(() => {
+    setScoreDraft(String(item?.score ?? 0));
+    setScoreMessage(null);
+  }, [item?.id, item?.score]);
+
+  const handleScoreSave = async () => {
+    if (!item) return;
+    const score = Number(scoreDraft);
+    if (!Number.isInteger(score) || score < 1 || score > 100) {
+      setScoreMessage({ tone: 'error', text: '1~100점으로 입력해 주세요.' });
+      showToast({
+        title: '점수 저장 실패',
+        message: '총점은 1~100점으로 입력해 주세요.',
+        variant: 'error',
+      });
+      return;
+    }
+
+    setScoreSaving(true);
+    setScoreMessage(null);
+    try {
+      const savedScore = await onSaveScore(item, score);
+      setScoreDraft(String(savedScore));
+      setScoreMessage({ tone: 'success', text: '점수가 저장되었습니다.' });
+      showToast({
+        title: '점수가 저장되었습니다.',
+        message: `${item.student.name} · ${item.week.week}주차 과정 총점 ${savedScore}점`,
+        variant: 'success',
+      });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : '점수를 저장하지 못했습니다.';
+      setScoreMessage({
+        tone: 'error',
+        text: message,
+      });
+      showToast({
+        title: '점수 저장 실패',
+        message,
+        variant: 'error',
+      });
+    } finally {
+      setScoreSaving(false);
+    }
+  };
+
+  if (!item) {
+    return <div className="grid min-h-[420px] place-items-center text-[13px] font-bold text-[#94a3b8]">{emptyMessage}</div>;
+  }
+
+  return (
+    <div className="min-w-0">
+      <div className="border-b border-[#cbd5e1] px-5 py-4">
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div className="min-w-0">
+            <p className="text-[12px] font-black text-[#4f46e5]">{item.course.title}</p>
+            <h2 className="mt-1 truncate text-[17px] font-black text-[#111827]">{item.student.name} · {item.module.name}</h2>
+            <p className="mt-1 text-[12px] font-bold text-[#64748b]">{item.week.week}주차 {item.week.title} · {item.student.email}</p>
+          </div>
+          <span className={`inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-[12px] font-black ${statusTone[item.status]}`}>
+            {item.status === 'SUBMITTED' ? <CheckCircle2 size={14} /> : item.status === 'PENDING' ? <Clock3 size={14} /> : <XCircle size={14} />}
+            {statusLabel[item.status]}
+          </span>
+        </div>
+      </div>
+
+      <div className="grid max-h-[760px] overflow-hidden lg:grid-cols-[280px_minmax(0,1fr)]">
+        <div className="flex min-h-0 flex-col border-r border-[#cbd5e1] p-3">
+          <p className="mb-2 px-1 text-[11px] font-black text-[#64748b]">제출 내역</p>
+          <div className="min-h-0 flex-1 overflow-y-auto">
+            {items.map((entry) => (
+              <button
+                key={entry.id}
+                type="button"
+                onClick={() => onSelect(entry.id)}
+                className={`${selectionButtonClass(entry.id === item.id)} mb-2 min-h-[62px]`}
+              >
+                <span className="min-w-0 flex-1">
+                  <span className="flex items-start justify-between gap-2">
+                    <span className="min-w-0 truncate text-[12px] font-black text-[#111827]">{entry.module.name}</span>
+                    <span className={`shrink-0 rounded px-1.5 py-0.5 text-[10px] font-black ${statusTone[entry.status]}`}>{statusLabel[entry.status]}</span>
+                  </span>
+                  <span className="mt-1 block text-[11px] font-bold text-[#64748b]">{entry.commitCount}개 커밋 · {formatDate(entry.submittedAt)}</span>
+                </span>
+              </button>
+            ))}
+          </div>
+          <section className="mt-3 rounded-lg border border-[#d1d9e6] bg-[#f8fafc] p-3">
+            <div className="flex items-center justify-between gap-3">
+              <p className="text-[12px] font-black text-[#334155]">과정 총점</p>
+            </div>
+            <div className="mt-2 flex items-center gap-2">
+              <input
+                type="text"
+                inputMode="numeric"
+                pattern="[0-9]*"
+                maxLength={3}
+                value={scoreDraft}
+                onChange={(event) => {
+                  const digits = event.target.value.replace(/\D/g, '');
+                  if (!digits) {
+                    setScoreDraft('');
+                    return;
+                  }
+                  setScoreDraft(String(Math.min(100, Number(digits))));
+                }}
+                onBlur={() => {
+                  if (!scoreDraft) setScoreDraft('0');
+                }}
+                className="h-10 min-w-0 flex-1 rounded-md border border-[#cbd5e1] bg-white px-3 text-right text-[14px] font-black text-[#111827] outline-none transition-colors focus:border-[#4f46e5]"
+                aria-label="총점"
+              />
+              <span className="text-[12px] font-black text-[#64748b]">점</span>
+              <button
+                type="button"
+                onClick={handleScoreSave}
+                disabled={scoreSaving}
+                className="inline-flex h-10 cursor-pointer items-center gap-1.5 rounded-md bg-[#4f46e5] px-3 text-[12px] font-black text-white transition-colors hover:bg-[#4338ca] disabled:cursor-wait disabled:bg-[#a5b4fc]"
+              >
+                {scoreSaving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
+                저장
+              </button>
+            </div>
+            {scoreMessage ? (
+              <p className={[
+                'mt-2 text-[11px] font-bold',
+                scoreMessage.tone === 'success' ? 'text-[#15803d]' : 'text-[#dc2626]',
+              ].join(' ')}
+              >
+                {scoreMessage.text}
+              </p>
+            ) : null}
+          </section>
+        </div>
+
+        <div className="min-w-0 overflow-y-auto px-5 py-4">
+          <div className="mb-4 flex items-center justify-between gap-3">
+            <div className="inline-flex rounded-lg bg-[#eef2f7] p-1">
+              <button
+                type="button"
+                onClick={() => setDetailTab('final')}
+                className={[
+                  'h-8 cursor-pointer rounded-md px-3 text-[12px] font-black transition-colors',
+                  detailTab === 'final' ? 'bg-white text-[#4f46e5] shadow-sm' : 'text-[#64748b] hover:text-[#111827]',
+                ].join(' ')}
+              >
+                최종 변경사항
+              </button>
+              <button
+                type="button"
+                onClick={() => setDetailTab('history')}
+                className={[
+                  'h-8 cursor-pointer rounded-md px-3 text-[12px] font-black transition-colors',
+                  detailTab === 'history' ? 'bg-white text-[#4f46e5] shadow-sm' : 'text-[#64748b] hover:text-[#111827]',
+                ].join(' ')}
+              >
+                제출 이력
+              </button>
+            </div>
+            <p className="text-[11px] font-bold text-[#94a3b8]">
+              최종 {item.finalFiles.length}개 파일 · 제출 {item.commitCount}회
+            </p>
+          </div>
+
+          {detailTab === 'final' ? (
+            item.finalFiles.length ? (
+              <article className="min-w-0 overflow-hidden rounded-lg border border-[#d1d9e6] transition-[border-color,box-shadow] hover:border-[#c7d2fe] hover:shadow-[0_10px_26px_rgba(15,23,42,0.10)]">
+                <div className="border-b border-[#cbd5e1] bg-[#f8fafc] px-4 py-3">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="min-w-0">
+                      <p className="truncate text-[13px] font-black text-[#111827]">원본 대비 최종 변경사항</p>
+                      <p className="mt-1 text-[12px] font-semibold text-[#64748b]">마지막 제출 기준 · {formatDate(item.submittedAt)}</p>
+                    </div>
+                    <span className="shrink-0 rounded bg-[#eef2ff] px-2.5 py-1 text-[11px] font-black text-[#4f46e5]">{item.finalFiles.length}개 파일</span>
+                  </div>
+                </div>
+                <div className="divide-y divide-[#edf2f7]">
+                  {item.finalFiles.map((file) => (
+                    <button
+                      key={`${item.id}-final-${file.path}`}
+                      type="button"
+                      onClick={() => onOpenPatch(
+                        `${item.module.name} · 최종 변경사항`,
+                        `${item.student.name} · ${formatDate(item.submittedAt)}`,
+                        item.finalFiles,
+                        file.path,
+                      )}
+                      className="group flex w-full cursor-pointer items-center justify-between gap-3 px-4 py-3 text-left transition-[background-color,color] hover:bg-[#e2e8f0]"
+                    >
+                      <span className="inline-flex min-w-0 items-center gap-2">
+                        <FileCode2 size={14} className="shrink-0 text-[#64748b]" />
+                        <span className="truncate font-mono text-[12px] font-bold text-[#334155]">{file.path}</span>
+                      </span>
+                      <span className="shrink-0 rounded bg-[#f1f5f9] px-2 py-1 text-[10px] font-black uppercase text-[#64748b] transition-colors group-hover:bg-white">{file.status}</span>
+                    </button>
+                  ))}
+                </div>
+              </article>
+            ) : (
+              <div className="grid h-[360px] place-items-center text-center text-[13px] font-bold text-[#94a3b8]">
+                {item.status === 'NOT_INSTALLED' ? '아직 모듈 저장소가 생성되지 않았습니다.' : '최종 변경 파일이 없습니다.'}
+              </div>
+            )
+          ) : item.commits.length ? (
+            <div className="grid gap-4">
+              {item.commits.map((commit) => (
+                <article key={commit.hash} className="min-w-0 overflow-hidden rounded-lg border border-[#d1d9e6] transition-[border-color,box-shadow] hover:border-[#c7d2fe] hover:shadow-[0_10px_26px_rgba(15,23,42,0.10)]">
+                  <div className="border-b border-[#cbd5e1] bg-[#f8fafc] px-4 py-3">
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="min-w-0">
+                        <p className="truncate text-[13px] font-black text-[#111827]">{commit.message}</p>
+                        <p className="mt-1 text-[12px] font-semibold text-[#64748b]">{formatDate(commit.date)}</p>
+                      </div>
+                      <span className="inline-flex items-center gap-1.5 rounded-md bg-white px-2.5 py-1 font-mono text-[11px] font-black text-[#4f46e5]">
+                        <GitCommitHorizontal size={13} />
+                        {commit.shortHash}
+                      </span>
+                    </div>
+                  </div>
+                  <div className="divide-y divide-[#edf2f7]">
+                    {commit.files.length ? commit.files.map((file) => (
+	                      <button
+	                        key={`${commit.hash}-${file.path}`}
+	                        type="button"
+	                        onClick={() => onOpenPatch(
+	                          `${item.module.name} · ${commit.shortHash}`,
+	                          `${item.student.name} · ${formatDate(commit.date)}`,
+	                          commit.files,
+	                          file.path,
+	                        )}
+		                        className="group flex w-full cursor-pointer items-center justify-between gap-3 px-4 py-3 text-left transition-[background-color,color] hover:bg-[#e2e8f0]"
+	                      >
+	                          <span className="inline-flex min-w-0 items-center gap-2">
+	                            <FileCode2 size={14} className="shrink-0 text-[#64748b]" />
+	                            <span className="truncate font-mono text-[12px] font-bold text-[#334155]">{file.path}</span>
+	                          </span>
+	                          <span className="shrink-0 rounded bg-[#f1f5f9] px-2 py-1 text-[10px] font-black uppercase text-[#64748b] transition-colors group-hover:bg-white">{file.status}</span>
+	                      </button>
+                    )) : (
+                      <p className="px-4 py-4 text-[12px] font-bold text-[#94a3b8]">파일 목록 없음</p>
+                    )}
+                  </div>
+                </article>
+              ))}
+            </div>
+          ) : (
+            <div className="grid h-[360px] place-items-center text-center text-[13px] font-bold text-[#94a3b8]">
+              {item.status === 'NOT_INSTALLED' ? '아직 모듈 저장소가 생성되지 않았습니다.' : '아직 제출된 커밋이 없습니다.'}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SelectionPanel({ icon, title, count, children }: { icon: React.ReactNode; title: string; count: number; children: React.ReactNode }) {
+  return (
+    <section className="min-w-0 overflow-hidden rounded-lg border border-[#d1d9e6] bg-[#f8fafc]">
+      <div className="flex h-10 items-center justify-between border-b border-[#cbd5e1] px-3">
+        <span className="inline-flex items-center gap-2 text-[12px] font-black text-[#475569]">{icon}{title}</span>
+        <span className="text-[11px] font-black text-[#94a3b8]">{count}개</span>
+      </div>
+      <div className="grid max-h-[340px] min-h-[340px] gap-2 overflow-y-auto p-2 content-start">
+        {children}
+      </div>
+    </section>
+  );
+}
+
+function selectionButtonClass(active: boolean) {
+  return [
+    'relative flex min-h-[66px] w-full cursor-pointer items-center gap-3 overflow-hidden rounded-lg border py-2 pl-4 pr-3 text-left transition-[background-color,border-color,box-shadow] before:absolute before:left-0 before:top-0 before:h-full before:w-1.5 before:content-[""]',
+    active
+      ? 'border-[#c7d2fe] bg-[#eef2ff] shadow-[0_8px_20px_rgba(79,70,229,0.10)] before:bg-[#2563eb]'
+      : 'border-[#cbd5e1] bg-white before:bg-transparent hover:border-[#c7d2fe] hover:bg-[#f8faff] hover:shadow-[0_8px_20px_rgba(79,70,229,0.10)] hover:before:bg-[#bfdbfe]',
+  ].join(' ');
+}
+
+function PanelLoadingState({ message }: { message: string }) {
+  return (
+    <div className="grid min-h-[180px] place-items-center px-4 text-center text-[13px] font-bold text-[#64748b]">
+      <span className="inline-flex items-center gap-2">
+        <Loader2 className="animate-spin" size={17} aria-hidden="true" />
+        {message}
+      </span>
+    </div>
+  );
+}
+
+function PatchModal({
+  modal,
+  onChangeActivePath,
+  onClose,
+}: {
+  modal: NonNullable<PatchModalState>;
+  onChangeActivePath: (path: string) => void;
+  onClose: () => void;
+}) {
+  const activeFile = modal.files.find((file) => file.path === modal.activePath) ?? modal.files[0] ?? null;
+  const visibleFiles = modal.files.filter((file) => !isIgnoredSubmissionFile(file.path));
+  const visibleActiveFile = visibleFiles.find((file) => file.path === activeFile?.path) ?? visibleFiles[0] ?? null;
+  const treeNodes = buildFileTree(visibleFiles);
+
+  return (
+    <div className="fixed inset-0 z-[80] grid place-items-center bg-[#0f172a]/34 px-6 py-6 backdrop-blur-[2px]">
+      <section className="grid h-[min(760px,calc(100vh-48px))] w-full max-w-[1240px] grid-rows-[78px_minmax(0,1fr)] overflow-hidden rounded-[14px] border border-white/70 bg-[#fbfdff] shadow-[0_34px_100px_rgba(15,23,42,0.30)]">
+        <header className="flex items-center justify-between border-b border-[#dfe6f1] bg-[#fbfdff] px-5">
+          <div className="flex min-w-0 items-center gap-3">
+            <span className="grid h-9 w-9 shrink-0 place-items-center rounded-md bg-[#eef2ff] text-[#4f46e5] shadow-[inset_0_0_0_1px_rgba(79,70,229,0.08)]">
+              <FileCode2 size={18} />
+            </span>
+            <div className="min-w-0">
+              <h2 className="truncate text-[16px] font-black text-[#111827]">{modal.title}</h2>
+              <p className="mt-1 truncate text-[12px] font-bold text-[#64748b]">{modal.subtitle}</p>
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="grid h-9 w-9 cursor-pointer place-items-center rounded-md border border-[#dbe3ef] bg-white text-[#475569] shadow-sm transition-[background-color,border-color,color] hover:border-[#c7d2fe] hover:bg-[#f8faff] hover:text-[#111827]"
+            aria-label="닫기"
+          >
+            <X size={17} />
+          </button>
+        </header>
+
+        <div className="grid min-h-0 grid-cols-[320px_minmax(0,1fr)]">
+          <aside className="min-h-0 border-r border-[#dfe6f1] bg-[#fbfdff]">
+            <div className="flex h-[52px] items-center justify-between px-5">
+              <span className="text-[13px] font-black text-[#334155]">파일 목록</span>
+              <span className="rounded-full bg-[#eef2f7] px-2.5 py-1 text-[11px] font-black text-[#475569]">{visibleFiles.length}개</span>
+            </div>
+            <div className="h-[calc(100%-52px)] overflow-auto px-4 pb-4">
+              {treeNodes.map((node) => (
+                <FileTreeNode
+                  key={node.path}
+                  node={node}
+                  activePath={visibleActiveFile?.path ?? ''}
+                  onSelect={onChangeActivePath}
+                />
+              ))}
+            </div>
+          </aside>
+
+          <main className="grid min-h-0 grid-rows-[60px_minmax(0,1fr)] bg-[#fbfdff]">
+            <div className="flex items-center justify-between gap-3 px-5">
+              <div className="flex min-w-0 items-center gap-2.5">
+                <span className="grid h-8 w-8 shrink-0 place-items-center rounded-md border border-[#d1d9e6] bg-white text-[#334155]">
+                  <FileCode2 size={16} />
+                </span>
+                <span
+                  className="min-w-0 truncate text-[14px] font-black text-[#1f2937]"
+                  title={visibleActiveFile?.path ?? undefined}
+                >
+                  {visibleActiveFile?.path.split('/').slice(-1)[0] ?? '파일 없음'}
+                </span>
+              </div>
+              {visibleActiveFile ? <span className="rounded-full bg-[#eef2ff] px-2.5 py-1 text-[10px] font-black uppercase text-[#4f46e5]">{visibleActiveFile.status}</span> : null}
+            </div>
+            <div className="min-h-0 overflow-auto px-5 pb-5">
+              {visibleActiveFile?.patch ? (
+                <div className="w-full min-w-0 overflow-hidden rounded-lg border border-[#d5deea] bg-white font-mono text-[11px] shadow-[0_8px_24px_rgba(15,23,42,0.06)]">
+                  {parseDiffViewLines(visibleActiveFile.patch).map(renderDiffLine)}
+                </div>
+              ) : (
+                <div className="grid h-full place-items-center text-[12px] font-bold text-[#94a3b8]">변경 내용 없음</div>
+              )}
+            </div>
+          </main>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function isIgnoredSubmissionFile(path: string) {
+  return path === '.gitignore' || path.endsWith('/.gitignore') || path === '.autonomy-studio-git.json';
+}
+
+function renderDiffLine(line: DiffViewLine) {
+  const rowClass = line.type === 'file'
+    ? 'bg-[#edf4ff] text-[#4169e1]'
+    : line.type === 'hunk'
+      ? 'bg-[#eef5ff] text-[#4169e1]'
+      : line.type === 'note'
+        ? 'bg-[#fff7d6] text-[#9a5200]'
+      : line.type === 'add'
+        ? 'bg-[#e8fff0] text-[#166534]'
+      : line.type === 'delete'
+        ? 'bg-[#ffe3ea] text-[#9f1239]'
+        : 'bg-white text-[#263247]';
+  const marker = line.type === 'file' ? 'file' : line.type === 'add' ? '+' : line.type === 'delete' ? '-' : line.type === 'hunk' ? '@' : line.type === 'note' ? '!' : ' ';
+
+  return (
+    <div key={line.key} className={`grid min-w-0 grid-cols-[48px_48px_34px_minmax(0,1fr)] border-b border-[#dfe6f1] last:border-b-0 ${rowClass}`}>
+      <span className="px-2 py-1.5 text-right font-normal tabular-nums text-[#8b99ad]">{line.oldLine ?? ''}</span>
+      <span className="px-2 py-1.5 text-right font-normal tabular-nums text-[#8b99ad]">{line.newLine ?? ''}</span>
+      <span className="px-2 py-1.5 text-center font-semibold">{marker}</span>
+      <code className={`min-w-0 max-w-full whitespace-pre-wrap break-all px-3 py-1.5 font-normal ${line.type === 'file' || line.type === 'hunk' ? 'font-sans' : ''}`}>
+        {line.content || ' '}
+      </code>
+    </div>
+  );
+}
+
+type FileTreeNodeModel = {
+  name: string;
+  path: string;
+  kind: 'folder' | 'file';
+  file?: CommitFile;
+  children: FileTreeNodeModel[];
+};
+
+function buildFileTree(files: CommitFile[]): FileTreeNodeModel[] {
+  const roots: FileTreeNodeModel[] = [];
+  const nodeMap = new Map<string, FileTreeNodeModel>();
+
+  files.forEach((file) => {
+    const parts = file.path.split('/').filter(Boolean);
+    parts.forEach((part, index) => {
+      const path = parts.slice(0, index + 1).join('/');
+      const isFile = index === parts.length - 1;
+      if (!nodeMap.has(path)) {
+        const node: FileTreeNodeModel = {
+          name: part,
+          path,
+          kind: isFile ? 'file' : 'folder',
+          file: isFile ? file : undefined,
+          children: [],
+        };
+        nodeMap.set(path, node);
+        const parentPath = parts.slice(0, index).join('/');
+        const parent = parentPath ? nodeMap.get(parentPath) : null;
+        if (parent) parent.children.push(node);
+        else roots.push(node);
+      }
+    });
+  });
+
+  return roots;
+}
+
+function FileTreeNode({
+  node,
+  activePath,
+  onSelect,
+  depth = 0,
+}: {
+  node: FileTreeNodeModel;
+  activePath: string;
+  onSelect: (path: string) => void;
+  depth?: number;
+}) {
+  const active = node.kind === 'file' && node.path === activePath;
+  if (node.kind === 'folder') {
+    return (
+      <div>
+        <div
+	          className="mb-1 flex h-7 items-center gap-2 rounded-md pr-2 text-[11px] font-black text-[#64748b] transition-colors hover:bg-[#f8faff] hover:text-[#334155]"
+          style={{ paddingLeft: depth * 14 }}
+          title={node.path}
+        >
+          <FolderOpen size={14} className="shrink-0 text-[#94a3b8]" />
+          <span className="truncate">{node.name}</span>
+        </div>
+        {node.children.map((child) => (
+          <FileTreeNode key={child.path} node={child} activePath={activePath} onSelect={onSelect} depth={depth + 1} />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(node.path)}
+      className={[
+	        'mb-1.5 grid min-h-[58px] w-full cursor-pointer grid-cols-[24px_minmax(0,1fr)_auto] items-center gap-2 rounded-md border py-2 pr-2.5 text-left transition-[background-color,border-color,box-shadow,color]',
+	        active ? 'border-[#c7d2fe] bg-[#eef2ff] text-[#4f46e5] shadow-[inset_4px_0_0_#4f46e5]' : 'border-transparent bg-transparent text-[#334155] hover:border-[#cbd5e1] hover:bg-[#f1f5f9] hover:shadow-[0_8px_18px_rgba(15,23,42,0.08)]',
+      ].join(' ')}
+      style={{ paddingLeft: depth * 12 + 10 }}
+      title={node.path}
+    >
+      <FileCode2 size={14} className="shrink-0 text-[#64748b]" />
+      <span className="min-w-0 flex-1">
+        <span className="block truncate text-[12px] font-black text-[#111827]">{node.name}</span>
+        <span className="mt-0.5 block truncate font-mono text-[10px] font-semibold text-[#64748b]">{node.path}</span>
+      </span>
+      {node.file ? <span className="shrink-0 rounded bg-[#eef2ff] px-1.5 py-0.5 text-[9px] font-black uppercase text-[#4f46e5]">{node.file.status}</span> : null}
+    </button>
+  );
+}
+
+function EmptyState({ message }: { message: string }) {
+  return <div className="grid min-h-[180px] place-items-center px-4 text-center text-[13px] font-bold text-[#94a3b8]">{message}</div>;
+}
+
+function formatDate(value: string | null) {
+  if (!value) return '-';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleString('ko-KR', {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  });
+}
diff --git a/src/routes.ts b/src/routes.ts
new file mode 100644
index 0000000..e74dad0
--- /dev/null
+++ b/src/routes.ts
@@ -0,0 +1,57 @@
+import { Activity, BarChart3, BookOpen, Car, ClipboardList, GitPullRequest, Settings, Users, type LucideIcon } from 'lucide-react';
+
+export type AppRoute = 'dashboard' | 'curriculum' | 'groups' | 'platforms' | 'students' | 'submissions' | 'analytics' | 'settings' | 'profile';
+
+export type NavItem = {
+  id: AppRoute;
+  label: string;
+  icon: LucideIcon;
+  // children?: string[];
+};
+
+export const defaultRoute: AppRoute = 'dashboard';
+
+export const routePaths: Record<AppRoute, string> = {
+  dashboard: '/dashboard',
+  curriculum: '/curriculum',
+  groups: '/groups',
+  platforms: '/platforms',
+  students: '/students',
+  submissions: '/submissions',
+  analytics: '/analytics',
+  settings: '/settings',
+  profile: '/profile'
+};
+
+export const navItems: NavItem[] = [
+  { id: 'dashboard', label: '대시보드', icon: Activity },
+  { id: 'curriculum', label: '커리큘럼 관리', icon: ClipboardList },
+  { id: 'groups', label: '그룹 관리', icon: Users },
+  { id: 'platforms', label: '플랫폼 관리', icon: Car },
+  { id: 'students', label: '수강생 현황', icon: BookOpen },
+  { id: 'submissions', label: '제출 현황', icon: GitPullRequest },
+  { id: 'analytics', label: '통계 분석', icon: BarChart3 },
+  { id: 'settings', label: '설정', icon: Settings }
+];
+
+// 2depth menu candidates. Keep this until the left menu structure is finalized.
+// export const navItemChildren: Record<Exclude<AppRoute, 'profile'>, string[]> = {
+//   dashboard: ['운영 요약', '오늘 할 일', '빠른 설정'],
+//   groups: ['그룹 목록', '플랫폼 배정', '실습 주차'],
+//   platforms: ['실시간 상태', '긴급 정지 로그', '장비 설정'],
+//   students: ['수강생 목록', '접속 현황', '과제 제출'],
+//   analytics: ['진도 분석', '플랫폼 사용률', '질문 추이'],
+//   settings: ['권한 정책', '알림 설정', '서비스 연결']
+// };
+
+const appRoutes: AppRoute[] = [...navItems.map((item) => item.id), 'profile'];
+
+export const isAppRoute = (value: string): value is AppRoute => appRoutes.includes(value as AppRoute);
+
+export const getRoutePath = (route: AppRoute) => routePaths[route];
+
+export const getRouteFromPathname = (pathname: string): AppRoute | null => {
+  const normalizedPath = pathname === '/' ? routePaths[defaultRoute] : pathname.replace(/\/+$/, '');
+  const entry = Object.entries(routePaths).find(([, path]) => path === normalizedPath);
+  return entry ? (entry[0] as AppRoute) : null;
+};
diff --git a/src/types/auth.ts b/src/types/auth.ts
new file mode 100644
index 0000000..aba4c2a
--- /dev/null
+++ b/src/types/auth.ts
@@ -0,0 +1,38 @@
+export type AuthAppRole = {
+  appKey?: string;
+  app_key?: string;
+  roleCode?: string;
+  role_code?: string;
+  role?: string;
+  code?: string;
+};
+
+export type AuthUser = {
+  id: string;
+  email: string;
+  name: string | null;
+  role: string;
+  roles?: string[];
+  appRoles?: AuthAppRole[];
+  app_roles?: AuthAppRole[];
+  primaryAffiliation?: {
+    id: string;
+    organizationId: string;
+    organizationName: string;
+    organizationType: string;
+    department: string | null;
+    position: string | null;
+  } | null;
+};
+
+export type AuthSession = {
+  accessToken: string;
+  obtainedAt?: number;
+  accessTokenExpiresIn?: number;
+  refreshToken?: string;
+  refreshTokenExpiresIn?: number;
+  roles?: string[];
+  appRoles?: AuthAppRole[];
+  app_roles?: AuthAppRole[];
+  user: AuthUser;
+};
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..f70e477
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_BASE_URL?: string;
+  readonly VITE_LAUNCHER_API_BASE_URL?: string;
+  readonly VITE_ATNMY_AUTH_URL?: string;
+  readonly VITE_ADS_IDE_AUTH_URL?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/temp.png b/temp.png
new file mode 100644
index 0000000..560c4f5
Binary files /dev/null and b/temp.png differ
diff --git a/temp2.png b/temp2.png
new file mode 100644
index 0000000..f70fb1f
Binary files /dev/null and b/temp2.png differ
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..9762a25
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..9b1174d
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..d9892d8
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    host: '0.0.0.0',
+    port: 5174
+  }
+});