diff --git a/.gitea/workflows/deploy.yml b/.gitea/workflows/deploy.yml
index 113062d..e3476cb 100644
--- a/.gitea/workflows/deploy.yml
+++ b/.gitea/workflows/deploy.yml
@@ -6,8 +6,33 @@ on:
       - main
 
 jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 코드 체크아웃
+        uses: actions/checkout@v4
+
+      - name: Node.js 설정
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+
+      - name: 의존성 설치
+        run: npm ci
+
+      - name: 린트 검사
+        run: npm run lint
+
+      - name: 테스트 실행
+        run: npm test
+
+      - name: 프로덕션 빌드 검증
+        run: npm run build
+
   deploy:
     runs-on: ubuntu-latest
+    needs: test
     steps:
       - name: 서버에 배포
         uses: appleboy/ssh-action@v1
diff --git a/package-lock.json b/package-lock.json
index c8b112a..1c1dff2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,9 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.39.1",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.2",
         "@types/react": "^19.2.7",
         "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react": "^5.1.1",
@@ -21,9 +24,83 @@
         "eslint-plugin-react-hooks": "^7.0.1",
         "eslint-plugin-react-refresh": "^0.4.24",
         "globals": "^16.5.0",
-        "vite": "^7.3.1"
+        "jsdom": "^28.1.0",
+        "vite": "^7.3.1",
+        "vitest": "^4.1.0"
       }
     },
+    "node_modules/@acemir/cssom": {
+      "version": "0.9.31",
+      "resolved": "https://registry.npmjs.org/@acemir/cssom/-/cssom-0.9.31.tgz",
+      "integrity": "sha512-ZnR3GSaH+/vJ0YlHau21FjfLYjMpYVIzTD8M8vIEQvIGxeOXyXdzCI140rrCY862p/C/BbzWsjc1dgnM9mkoTA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.4.tgz",
+      "integrity": "sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-5.0.1.tgz",
+      "integrity": "sha512-2SZFvqMyvboVV1d15lMf7XiI3m7SDqXUuKaTymJYLN6dSGadqp+fVojqJlVoMlbZnlTmu3S0TLwLTJpvBMO1Aw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^3.1.1",
+        "@csstools/css-color-parser": "^4.0.2",
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0",
+        "lru-cache": "^11.2.6"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color/node_modules/lru-cache": {
+      "version": "11.2.7",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.7.tgz",
+      "integrity": "sha512-aY/R+aEsRelme17KGQa/1ZSIpLpNYYrhcrepKTZgE+W3WM16YMCaPwOHLHsmopZHELU0Ojin1lPVxKR0MihncA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector": {
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-6.8.1.tgz",
+      "integrity": "sha512-MvRz1nCqW0fsy8Qz4dnLIvhOlMzqDVBabZx6lH+YywFDdjXhMY37SmpV1XFX3JzG5GWHn63j6HX6QPr3lZXHvQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/nwsapi": "^2.3.9",
+        "bidi-js": "^1.0.3",
+        "css-tree": "^3.1.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "lru-cache": "^11.2.6"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector/node_modules/lru-cache": {
+      "version": "11.2.7",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.7.tgz",
+      "integrity": "sha512-aY/R+aEsRelme17KGQa/1ZSIpLpNYYrhcrepKTZgE+W3WM16YMCaPwOHLHsmopZHELU0Ojin1lPVxKR0MihncA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@asamuzakjp/nwsapi": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz",
+      "integrity": "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
@@ -258,6 +335,16 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
@@ -306,6 +393,159 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@bramus/specificity": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
+      "integrity": "sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "^3.0.0"
+      },
+      "bin": {
+        "specificity": "bin/cli.js"
+      }
+    },
+    "node_modules/@csstools/color-helpers": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.0.2.tgz",
+      "integrity": "sha512-LMGQLS9EuADloEFkcTBR3BwV/CGHV7zyDxVRtVDTwdI2Ca4it0CCVTT9wCkxSgokjE5Ho41hEPgb8OEUwoXr6Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.1.1.tgz",
+      "integrity": "sha512-HJ26Z/vmsZQqs/o3a6bgKslXGFAungXGbinULZO3eMsOyNJHeBBZfup5FiZInOghgoM4Hwnmw+OgbJCNg1wwUQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.0.2.tgz",
+      "integrity": "sha512-0GEfbBLmTFf0dJlpsNU7zwxRIH0/BGEMuXLTCvFYxuL1tNhqzTbtnFICyJLTNK4a+RechKP75e7w42ClXSnJQw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^6.0.2",
+        "@csstools/css-calc": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
+      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.1.tgz",
+      "integrity": "sha512-BvqN0AMWNAnLk9G8jnUT77D+mUbY/H2b3uDTvg2isJkHaOufUE2R3AOwxWo7VBQKT1lOdwdvorddo2B/lk64+w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "peerDependencies": {
+        "css-tree": "^3.2.1"
+      },
+      "peerDependenciesMeta": {
+        "css-tree": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
+      "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.27.3",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.3.tgz",
@@ -868,6 +1108,24 @@
         "node": "^20.19.0 || ^22.13.0 || >=24"
       }
     },
+    "node_modules/@exodus/bytes": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.15.0.tgz",
+      "integrity": "sha512-UY0nlA+feH81UGSHv92sLEPLCeZFjXOuHhrIo0HQydScuQc8s0A7kL/UdgwgDq8g8ilksmuoF35YVTNphV2aBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@noble/hashes": "^1.8.0 || ^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@noble/hashes": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1327,6 +1585,105 @@
         "win32"
       ]
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
+      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "picocolors": "1.1.1",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
+      "integrity": "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@adobe/css-tools": "^4.4.0",
+        "aria-query": "^5.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "picocolors": "^1.1.1",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/@testing-library/react": {
+      "version": "16.3.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.2.tgz",
+      "integrity": "sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": "^10.0.0",
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1372,6 +1729,24 @@
         "@babel/types": "^7.28.2"
       }
     },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/esrecurse": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
@@ -1434,6 +1809,119 @@
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
       }
     },
+    "node_modules/@vitest/expect": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.0.tgz",
+      "integrity": "sha512-EIxG7k4wlWweuCLG9Y5InKFwpMEOyrMb6ZJ1ihYu02LVj/bzUwn2VMU+13PinsjRW75XnITeFrQBMH5+dLvCDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.1.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.1.0",
+        "@vitest/utils": "4.1.0",
+        "chai": "^6.2.2",
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.0.tgz",
+      "integrity": "sha512-evxREh+Hork43+Y4IOhTo+h5lGmVRyjqI739Rz4RlUPqwrkFFDF6EMvOOYjTx4E8Tl6gyCLRL8Mu7Ry12a13Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "4.1.0",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.0.tgz",
+      "integrity": "sha512-3RZLZlh88Ib0J7NQTRATfc/3ZPOnSUn2uDBUoGNn5T36+bALixmzphN26OUD3LRXWkJu4H0s5vvUeqBiw+kS0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.0.tgz",
+      "integrity": "sha512-Duvx2OzQ7d6OjchL+trw+aSrb9idh7pnNfxrklo14p3zmNL4qPCDeIJAK+eBKYjkIwG96Bc6vYuxhqDXQOWpoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.1.0",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.0.tgz",
+      "integrity": "sha512-0Vy9euT1kgsnj1CHttwi9i9o+4rRLEaPRSOJ5gyv579GJkNpgJK+B4HSv/rAWixx2wdAFci1X4CEPjiu2bXIMg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.0",
+        "@vitest/utils": "4.1.0",
+        "magic-string": "^0.30.21",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.0.tgz",
+      "integrity": "sha512-pz77k+PgNpyMDv2FV6qmk5ZVau6c3R8HC8v342T2xlFxQKTrSeYw9waIJG8KgV9fFwAtTu4ceRzMivPTH6wSxw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.0.tgz",
+      "integrity": "sha512-XfPXT6a8TZY3dcGY8EdwsBulFCIw+BeeX0RZn2x/BtiY/75YGh8FeWGG8QISN/WhaqSrE2OrlDgtF8q5uhOTmw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.0",
+        "convert-source-map": "^2.0.0",
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.16.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
@@ -1457,6 +1945,16 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.14.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
@@ -1474,6 +1972,49 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
@@ -1497,6 +2038,16 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.3.tgz",
@@ -1565,6 +2116,16 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/chai": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -1600,6 +2161,53 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cssstyle": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-6.2.0.tgz",
+      "integrity": "sha512-Fm5NvhYathRnXNVndkUsCCuR63DCLVVwGOOwQw782coXFi5HhkXdu289l59HlXZBawsyNccXfWRYvLzcDCdDig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^5.0.1",
+        "@csstools/css-syntax-patches-for-csstree": "^1.0.28",
+        "css-tree": "^3.1.0",
+        "lru-cache": "^11.2.6"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/cssstyle/node_modules/lru-cache": {
+      "version": "11.2.7",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.7.tgz",
+      "integrity": "sha512-aY/R+aEsRelme17KGQa/1ZSIpLpNYYrhcrepKTZgE+W3WM16YMCaPwOHLHsmopZHELU0Ojin1lPVxKR0MihncA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -1607,6 +2215,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/data-urls": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-7.0.0.tgz",
+      "integrity": "sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -1625,6 +2247,13 @@
         }
       }
     },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -1632,6 +2261,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.302",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.302.tgz",
@@ -1639,6 +2285,26 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
+      "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/esbuild": {
       "version": "0.27.3",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.3.tgz",
@@ -1876,6 +2542,16 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -1886,6 +2562,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/expect-type": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
+      "integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2044,6 +2730,47 @@
         "hermes-estree": "0.25.1"
       }
     },
+    "node_modules/html-encoding-sniffer": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
+      "integrity": "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.6.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2064,6 +2791,16 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -2087,6 +2824,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -2101,6 +2845,47 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/jsdom": {
+      "version": "28.1.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-28.1.0.tgz",
+      "integrity": "sha512-0+MoQNYyr2rBHqO1xilltfDjV9G7ymYGlAUazgcDLQaUf8JDHbuGwsxN6U9qWaElZ4w1B2r7yEGIL3GdeW3Rug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@acemir/cssom": "^0.9.31",
+        "@asamuzakjp/dom-selector": "^6.8.1",
+        "@bramus/specificity": "^2.4.2",
+        "@exodus/bytes": "^1.11.0",
+        "cssstyle": "^6.0.1",
+        "data-urls": "^7.0.0",
+        "decimal.js": "^10.6.0",
+        "html-encoding-sniffer": "^6.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.6",
+        "is-potential-custom-element-name": "^1.0.1",
+        "parse5": "^8.0.0",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^6.0.0",
+        "undici": "^7.21.0",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^8.0.1",
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.0",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
@@ -2198,6 +2983,43 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
+    "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==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/minimatch": {
       "version": "10.2.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.2.tgz",
@@ -2254,6 +3076,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/obug": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",
+      "integrity": "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT"
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -2304,6 +3137,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parse5": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.0.tgz",
+      "integrity": "sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -2324,6 +3170,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -2383,6 +3236,21 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -2414,6 +3282,13 @@
         "react": "^19.2.4"
       }
     },
+    "node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/react-refresh": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz",
@@ -2462,6 +3337,30 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.59.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
@@ -2507,6 +3406,19 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
@@ -2552,6 +3464,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -2562,6 +3481,57 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/std-env": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.0.0.tgz",
+      "integrity": "sha512-zUMPtQ/HBY3/50VbpkupYHbRroTRZJPRLvreamgErJVys0ceuzMkD44J/QjqhHjOzK42GQ3QZIeFG1OYfOtKqQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.4.tgz",
+      "integrity": "sha512-u9r3uZC0bdpGOXtlxUIdwf9pkmvhqJdrVCH9fapQtgy/OeTTMZ1nqH7agtvEfmGui6e1XxjcdrlxvxJvc3sMqw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -2579,6 +3549,62 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tinyrainbow": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz",
+      "integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tldts": {
+      "version": "7.0.25",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.0.25.tgz",
+      "integrity": "sha512-keinCnPbwXEUG3ilrWQZU+CqcTTzHq9m2HhoUP2l7Xmi8l1LuijAXLpAJ5zRW+ifKTNscs4NdCkfkDCBYm352w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^7.0.25"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "7.0.25",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.0.25.tgz",
+      "integrity": "sha512-ZjCZK0rppSBu7rjHYDYsEaMOIbbT+nWF57hKkv4IUmZWBNrBWBOjIElc0mKRgLM8bm7x/BBlof6t2gi/Oq/Asw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tough-cookie": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.1.tgz",
+      "integrity": "sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^7.0.5"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -2592,6 +3618,16 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/undici": {
+      "version": "7.24.3",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.24.3.tgz",
+      "integrity": "sha512-eJdUmK/Wrx2d+mnWWmwwLRyA7OQCkLap60sk3dOK4ViZR7DKwwptwuIvFBg2HaiP9ESaEdhtpSymQPvytpmkCA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.1"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
@@ -2708,6 +3744,136 @@
         }
       }
     },
+    "node_modules/vitest": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.0.tgz",
+      "integrity": "sha512-YbDrMF9jM2Lqc++2530UourxZHmkKLxrs4+mYhEwqWS97WJ7wOYEkcr+QfRgJ3PW9wz3odRijLZjHEaRLTNbqw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/expect": "4.1.0",
+        "@vitest/mocker": "4.1.0",
+        "@vitest/pretty-format": "4.1.0",
+        "@vitest/runner": "4.1.0",
+        "@vitest/snapshot": "4.1.0",
+        "@vitest/spy": "4.1.0",
+        "@vitest/utils": "4.1.0",
+        "es-module-lexer": "^2.0.0",
+        "expect-type": "^1.3.0",
+        "magic-string": "^0.30.21",
+        "obug": "^2.1.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^4.0.0-rc.1",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.0.3",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0-0",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.1.0",
+        "@vitest/browser-preview": "4.1.0",
+        "@vitest/browser-webdriverio": "4.1.0",
+        "@vitest/ui": "4.1.0",
+        "happy-dom": "*",
+        "jsdom": "*",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        },
+        "vite": {
+          "optional": false
+        }
+      }
+    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
+      "integrity": "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-16.0.1.tgz",
+      "integrity": "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.11.0",
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -2724,6 +3890,23 @@
         "node": ">= 8"
       }
     },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -2734,6 +3917,23 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
diff --git a/package.json b/package.json
index 32cc121..ac3348c 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,9 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "react": "^19.2.0",
@@ -16,6 +18,9 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
@@ -23,6 +28,8 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
-    "vite": "^7.3.1"
+    "jsdom": "^28.1.0",
+    "vite": "^7.3.1",
+    "vitest": "^4.1.0"
   }
 }
diff --git a/src/App.jsx b/src/App.jsx
index d1cbae7..d6ef0cb 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,8 +1,9 @@
-import { BrowserRouter, Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, Navigate, useNavigate } from 'react-router-dom';
 import { useEffect, useRef } from 'react';
 import { AuthProvider } from './context/AuthContext';
 import { ToastProvider } from './components/toast/ToastProvider';
 import { useAuth } from './context/useAuth';
+import ErrorBoundary from './components/ErrorBoundary';
 import LoginPage from './pages/LoginPage';
 import RegisterPage from './pages/RegisterPage';
 import HomePage from './pages/HomePage';
@@ -12,19 +13,14 @@ import SSAFYCallbackPage from './pages/SSAFYCallbackPage';
 function AuthRedirect() {
   const { user } = useAuth();
   const navigate = useNavigate();
-  const location = useLocation();
   const prevUserRef = useRef(user);
 
   useEffect(() => {
     if (prevUserRef.current && !user) {
-      if (location.pathname.startsWith('/admin')) {
-        navigate('/', { replace: true });
-      } else {
-        navigate('/login', { replace: true });
-      }
+      navigate('/login', { replace: true });
     }
     prevUserRef.current = user;
-  }, [user, navigate, location.pathname]);
+  }, [user, navigate]);
 
   return null;
 }
@@ -39,7 +35,7 @@ function AdminRoute({ children }) {
 function AppRoutes() {
   const { user } = useAuth();
   return (
-    <>
+    <ErrorBoundary>
       <AuthRedirect />
       <Routes>
         <Route path="/login" element={user ? <Navigate to="/" replace /> : <LoginPage />} />
@@ -54,8 +50,15 @@ function AppRoutes() {
             </AdminRoute>
           }
         />
+        <Route path="*" element={
+          <div style={{ padding: '2rem', textAlign: 'center', color: '#aaa' }}>
+            <h2>404</h2>
+            <p>페이지를 찾을 수 없습니다</p>
+            <a href="/" style={{ color: '#4ea8de' }}>홈으로 돌아가기</a>
+          </div>
+        } />
       </Routes>
-    </>
+    </ErrorBoundary>
   );
 }
 
diff --git a/src/api/auth.js b/src/api/auth.js
index fe9d6ed..db09468 100644
--- a/src/api/auth.js
+++ b/src/api/auth.js
@@ -32,3 +32,9 @@ export async function ssafyCallback(code) {
 // 토큰을 리프레시하고 새 access token을 반환 (동시 호출 방지 포함)
 export { tryRefresh as refreshToken } from './client';
 
+// 게임 런처용 일회용 티켓 발급 (JWT를 URL에 노출하지 않기 위해 사용)
+export async function createLaunchTicket() {
+  const data = await apiFetch('/api/auth/launch-ticket', { method: 'POST' });
+  return data.ticket;
+}
+
diff --git a/src/api/client.js b/src/api/client.js
index c7d9f84..6cad6f9 100644
--- a/src/api/client.js
+++ b/src/api/client.js
@@ -7,20 +7,16 @@ export async function tryRefresh() {
   if (refreshingPromise) return refreshingPromise;
 
   refreshingPromise = (async () => {
-    const rt = localStorage.getItem('refreshToken');
-    if (!rt) throw new Error('no_refresh_token');
-
     const res = await fetch(BASE + '/api/auth/refresh', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ refreshToken: rt }),
+      credentials: 'include',
     });
 
     if (!res.ok) throw new Error('refresh_failed');
 
     const data = await res.json();
     localStorage.setItem('token', data.token);
-    localStorage.setItem('refreshToken', data.refreshToken);
     return data.token;
   })().finally(() => {
     refreshingPromise = null;
@@ -32,7 +28,7 @@ export async function tryRefresh() {
 async function doFetch(path, options, token) {
   const headers = { 'Content-Type': 'application/json', ...options.headers };
   if (token) headers['Authorization'] = `Bearer ${token}`;
-  return fetch(BASE + path, { ...options, headers });
+  return fetch(BASE + path, { ...options, headers, credentials: 'include' });
 }
 
 async function parseError(res) {
@@ -103,3 +99,56 @@ export async function apiFetch(path, options = {}, _retryCount = 0) {
 function delay(ms) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }
+
+/**
+ * XHR 기반 파일 업로드 (progress 지원 + 401 자동 갱신)
+ * @param {string} path - API 경로 (예: '/api/download/upload/game?filename=...')
+ * @param {File} file - 업로드할 파일
+ * @param {function} onProgress - progress 콜백 (percent: number)
+ * @returns {Promise<{status: number, body: object}>}
+ */
+export function apiUpload(path, file, onProgress) {
+  function send(token) {
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      xhr.open('POST', BASE + path);
+      xhr.withCredentials = true;
+      if (token) xhr.setRequestHeader('Authorization', `Bearer ${token}`);
+      xhr.setRequestHeader('Content-Type', 'application/octet-stream');
+
+      xhr.upload.onprogress = (event) => {
+        if (event.lengthComputable && onProgress) {
+          onProgress(Math.round((event.loaded / event.total) * 100));
+        }
+      };
+
+      xhr.onload = () => resolve(xhr);
+      xhr.onerror = () => reject(new Error('네트워크 오류가 발생했습니다.'));
+      xhr.send(file);
+    });
+  }
+
+  return (async () => {
+    const token = localStorage.getItem('token');
+    const xhr = await send(token);
+
+    if (xhr.status === 401) {
+      try {
+        const newToken = await tryRefresh();
+        const retryXhr = await send(newToken);
+        if (retryXhr.status === 401) {
+          window.dispatchEvent(new Event('auth:unauthorized'));
+          throw new Error('인증이 필요합니다');
+        }
+        return { status: retryXhr.status, body: JSON.parse(retryXhr.responseText || '{}') };
+      } catch (e) {
+        if (e.message === 'no_refresh_token' || e.message === 'refresh_failed') {
+          window.dispatchEvent(new Event('auth:unauthorized'));
+        }
+        throw e;
+      }
+    }
+
+    return { status: xhr.status, body: JSON.parse(xhr.responseText || '{}') };
+  })();
+}
diff --git a/src/api/client.test.js b/src/api/client.test.js
new file mode 100644
index 0000000..f3fcc77
--- /dev/null
+++ b/src/api/client.test.js
@@ -0,0 +1,156 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { apiFetch, tryRefresh } from './client';
+
+// Stub import.meta.env
+// Vitest handles import.meta.env automatically via vite config
+
+describe('apiFetch', () => {
+  let fetchSpy;
+
+  beforeEach(() => {
+    localStorage.clear();
+    fetchSpy = vi.spyOn(globalThis, 'fetch');
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('adds Authorization header when token exists in localStorage', async () => {
+    localStorage.setItem('token', 'test-token-123');
+
+    fetchSpy.mockResolvedValueOnce(
+      new Response(JSON.stringify({ ok: true }), { status: 200 }),
+    );
+
+    await apiFetch('/api/test');
+
+    expect(fetchSpy).toHaveBeenCalledOnce();
+    const [, options] = fetchSpy.mock.calls[0];
+    expect(options.headers['Authorization']).toBe('Bearer test-token-123');
+  });
+
+  it('does not add Authorization header when no token exists', async () => {
+    fetchSpy.mockResolvedValueOnce(
+      new Response(JSON.stringify({ data: 1 }), { status: 200 }),
+    );
+
+    await apiFetch('/api/test');
+
+    const [, options] = fetchSpy.mock.calls[0];
+    expect(options.headers['Authorization']).toBeUndefined();
+  });
+
+  it('attempts token refresh on 401 response', async () => {
+    localStorage.setItem('token', 'expired-token');
+
+    // First call: 401
+    fetchSpy.mockResolvedValueOnce(
+      new Response(JSON.stringify({ error: 'unauthorized' }), { status: 401 }),
+    );
+
+    // Refresh call: success (refresh token sent via HttpOnly cookie by browser)
+    fetchSpy.mockResolvedValueOnce(
+      new Response(
+        JSON.stringify({ token: 'new-token' }),
+        { status: 200 },
+      ),
+    );
+
+    // Retry with new token: success
+    fetchSpy.mockResolvedValueOnce(
+      new Response(JSON.stringify({ data: 'ok' }), { status: 200 }),
+    );
+
+    const result = await apiFetch('/api/protected');
+
+    expect(result).toEqual({ data: 'ok' });
+    // After refresh, localStorage should have new access token
+    expect(localStorage.getItem('token')).toBe('new-token');
+  });
+
+  it('dispatches auth:unauthorized when refresh fails', async () => {
+    localStorage.setItem('token', 'expired-token');
+    // Refresh will fail (no HttpOnly cookie set in test env)
+
+    fetchSpy.mockResolvedValueOnce(
+      new Response(JSON.stringify({ error: 'unauthorized' }), { status: 401 }),
+    );
+
+    // Refresh call: fail
+    fetchSpy.mockResolvedValueOnce(
+      new Response(JSON.stringify({ error: 'refreshToken이 필요합니다' }), { status: 400 }),
+    );
+
+    const dispatchSpy = vi.spyOn(window, 'dispatchEvent');
+
+    await expect(apiFetch('/api/protected')).rejects.toThrow();
+
+    expect(dispatchSpy).toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'auth:unauthorized' }),
+    );
+  });
+
+  it('retries on 5xx errors up to 2 times', async () => {
+    // Mock delay to be instant for faster tests
+    const originalSetTimeout = globalThis.setTimeout;
+    vi.spyOn(globalThis, 'setTimeout').mockImplementation((fn) => originalSetTimeout(fn, 0));
+
+    fetchSpy
+      .mockResolvedValueOnce(
+        new Response('', { status: 500, statusText: 'Internal Server Error' }),
+      )
+      .mockResolvedValueOnce(
+        new Response('', { status: 502, statusText: 'Bad Gateway' }),
+      )
+      .mockResolvedValueOnce(
+        new Response(JSON.stringify({ data: 'recovered' }), { status: 200 }),
+      );
+
+    const result = await apiFetch('/api/flaky');
+    expect(result).toEqual({ data: 'recovered' });
+    expect(fetchSpy).toHaveBeenCalledTimes(3);
+  });
+
+  it('throws after exhausting 5xx retries', async () => {
+    const originalSetTimeout = globalThis.setTimeout;
+    vi.spyOn(globalThis, 'setTimeout').mockImplementation((fn) => originalSetTimeout(fn, 0));
+
+    fetchSpy
+      .mockResolvedValue(
+        new Response('', { status: 500, statusText: 'Internal Server Error' }),
+      );
+
+    await expect(apiFetch('/api/broken')).rejects.toThrow();
+    // 1 original + 2 retries = 3
+    expect(fetchSpy).toHaveBeenCalledTimes(3);
+  });
+});
+
+describe('tryRefresh', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it('throws when refresh request fails', async () => {
+    vi.spyOn(globalThis, 'fetch').mockResolvedValueOnce(
+      new Response(JSON.stringify({ error: 'refreshToken이 필요합니다' }), { status: 400 }),
+    );
+
+    await expect(tryRefresh()).rejects.toThrow('refresh_failed');
+  });
+
+  it('stores new access token on successful refresh', async () => {
+    vi.spyOn(globalThis, 'fetch').mockResolvedValueOnce(
+      new Response(
+        JSON.stringify({ token: 'fresh-token' }),
+        { status: 200 },
+      ),
+    );
+
+    const token = await tryRefresh();
+    expect(token).toBe('fresh-token');
+    expect(localStorage.getItem('token')).toBe('fresh-token');
+  });
+});
diff --git a/src/components/DownloadSection.jsx b/src/components/DownloadSection.jsx
index 5865e37..f94b75e 100644
--- a/src/components/DownloadSection.jsx
+++ b/src/components/DownloadSection.jsx
@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/useAuth';
 import { getDownloadInfo } from '../api/download';
-import { refreshToken } from '../api/auth';
+import { createLaunchTicket } from '../api/auth';
 import './DownloadSection.css';
 
 export default function DownloadSection() {
@@ -30,24 +30,18 @@ export default function DownloadSection() {
       return;
     }
 
-    // 토큰이 없으면 (다른 탭에서 로그아웃 등) 로그인 유도
-    let token = localStorage.getItem('token');
-    if (!token) {
+    setLaunching(true);
+
+    // JWT를 URL에 직접 노출하지 않고, 일회용 티켓을 발급받아 전달
+    try {
+      const ticket = await createLaunchTicket();
+      window.location.href = 'a301://launch?ticket=' + encodeURIComponent(ticket);
+    } catch {
+      // 티켓 발급 실패 시 로그인 유도
       navigate('/login');
       return;
     }
 
-    setLaunching(true);
-
-    // 토큰 만료 대비: 런처에 전달하기 전에 리프레시 시도
-    try {
-      token = await refreshToken();
-    } catch {
-      // 리프레시 실패해도 기존 토큰으로 시도 (아직 유효할 수 있음)
-    }
-
-    window.location.href = 'a301://launch?token=' + encodeURIComponent(token);
-
     // 런처가 실행되지 않았을 수 있으므로 안내 표시
     setLaunched(true);
     setLaunching(false);
@@ -58,7 +52,9 @@ export default function DownloadSection() {
       const a = document.createElement('a');
       a.href = info.launcherUrl;
       a.download = 'launcher.exe';
+      document.body.appendChild(a);
       a.click();
+      document.body.removeChild(a);
     }
   };
 
diff --git a/src/components/ErrorBoundary.jsx b/src/components/ErrorBoundary.jsx
new file mode 100644
index 0000000..0fb7ebb
--- /dev/null
+++ b/src/components/ErrorBoundary.jsx
@@ -0,0 +1,31 @@
+import { Component } from 'react';
+
+export default class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('Uncaught error:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ padding: '2rem', textAlign: 'center', color: '#ccc' }}>
+          <h2>문제가 발생했습니다</h2>
+          <p>페이지를 새로고침하거나 잠시 후 다시 시도해주세요.</p>
+          <button onClick={() => window.location.reload()} style={{ marginTop: '1rem', padding: '0.5rem 1rem', cursor: 'pointer' }}>
+            새로고침
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
diff --git a/src/components/admin/AnnouncementAdmin.jsx b/src/components/admin/AnnouncementAdmin.jsx
index e5ad8d7..51b4bbf 100644
--- a/src/components/admin/AnnouncementAdmin.jsx
+++ b/src/components/admin/AnnouncementAdmin.jsx
@@ -1,3 +1,4 @@
+// TODO: Add tests for CRUD operations (create, update, delete announcements)
 import { useState, useEffect, useCallback } from 'react';
 import { getAnnouncements, createAnnouncement, updateAnnouncement, deleteAnnouncement } from '../../api/announcements';
 import { useToast } from '../toast/useToast';
@@ -57,6 +58,7 @@ export default function AnnouncementAdmin() {
   };
 
   const handleDelete = async (id) => {
+    // TODO: Replace window.confirm() with a custom confirmation modal for consistent UI
     if (!confirm('삭제하시겠습니까?')) return;
     try {
       await deleteAnnouncement(id);
@@ -103,6 +105,7 @@ export default function AnnouncementAdmin() {
           value={form.title}
           onChange={(e) => setForm({ ...form, title: e.target.value })}
           maxLength={200}
+          aria-label="공지사항 제목"
         />
         <textarea
           className="admin-textarea"
@@ -111,6 +114,7 @@ export default function AnnouncementAdmin() {
           value={form.content}
           onChange={(e) => setForm({ ...form, content: e.target.value })}
           maxLength={10000}
+          aria-label="공지사항 내용"
         />
         {error && <p className="admin-error">{error}</p>}
         <div className="admin-form-actions">
diff --git a/src/components/admin/DownloadAdmin.jsx b/src/components/admin/DownloadAdmin.jsx
index 0b8d883..b4073fe 100644
--- a/src/components/admin/DownloadAdmin.jsx
+++ b/src/components/admin/DownloadAdmin.jsx
@@ -1,144 +1,9 @@
+// TODO: Add tests for CRUD operations (load download info, upload launcher, upload game)
 import { useState, useEffect } from 'react';
 import { getDownloadInfo } from '../../api/download';
-import { tryRefresh } from '../../api/client';
+import UploadForm from './UploadForm';
 import './AdminCommon.css';
 
-const BASE = import.meta.env.VITE_API_BASE_URL || '';
-
-function sendXhr(url, token, file, { onProgress, onDone, onError }) {
-  const xhr = new XMLHttpRequest();
-
-  xhr.upload.onprogress = (event) => {
-    if (event.lengthComputable) {
-      onProgress(Math.round((event.loaded / event.total) * 100));
-    }
-  };
-
-  xhr.onload = () => onDone(xhr);
-  xhr.onerror = () => onError();
-
-  xhr.open('POST', url);
-  xhr.setRequestHeader('Authorization', `Bearer ${token}`);
-  xhr.setRequestHeader('Content-Type', 'application/octet-stream');
-  xhr.send(file);
-}
-
-function UploadForm({ title, hint, accept, endpoint, onSuccess }) {
-  const [file, setFile] = useState(null);
-  const [uploading, setUploading] = useState(false);
-  const [progress, setProgress] = useState(0);
-  const [error, setError] = useState('');
-
-  const handleFileChange = (e) => {
-    setFile(e.target.files[0] || null);
-    setError('');
-    setProgress(0);
-  };
-
-  const handleUpload = (e) => {
-    e.preventDefault();
-    if (!file) return;
-
-    const token = localStorage.getItem('token');
-    const url = `${BASE}${endpoint}?filename=${encodeURIComponent(file.name)}`;
-
-    setUploading(true);
-    setError('');
-
-    const handleDone = (xhr) => {
-      // 401 시 토큰 갱신 후 재시도
-      if (xhr.status === 401) {
-        tryRefresh()
-          .then((newToken) => {
-            sendXhr(url, newToken, file, {
-              onProgress: (p) => setProgress(p),
-              onDone: (retryXhr) => {
-                setUploading(false);
-                if (retryXhr.status === 401) {
-                  window.dispatchEvent(new Event('auth:unauthorized'));
-                  return;
-                }
-                parseXhrResponse(retryXhr);
-              },
-              onError: handleError,
-            });
-          })
-          .catch(() => {
-            setUploading(false);
-            window.dispatchEvent(new Event('auth:unauthorized'));
-          });
-        return;
-      }
-      setUploading(false);
-      parseXhrResponse(xhr);
-    };
-
-    const parseXhrResponse = (xhr) => {
-      try {
-        const body = JSON.parse(xhr.responseText || '{}');
-        if (xhr.status >= 200 && xhr.status < 300) {
-          onSuccess(body);
-          setFile(null);
-          setProgress(0);
-        } else {
-          setError(body.error || '업로드에 실패했습니다.');
-          setProgress(0);
-        }
-      } catch {
-        if (xhr.status >= 200 && xhr.status < 300) {
-          setError('응답을 처리할 수 없습니다.');
-        } else {
-          setError('업로드에 실패했습니다.');
-        }
-        setProgress(0);
-      }
-    };
-
-    const handleError = () => {
-      setUploading(false);
-      setError('네트워크 오류가 발생했습니다.');
-      setProgress(0);
-    };
-
-    sendXhr(url, token, file, {
-      onProgress: (p) => setProgress(p),
-      onDone: handleDone,
-      onError: handleError,
-    });
-  };
-
-  return (
-    <form className="admin-form" onSubmit={handleUpload}>
-      <div className="admin-field">
-        <label className="admin-label">{title}</label>
-        <input
-          type="file"
-          accept={accept}
-          className="admin-input-file"
-          onChange={handleFileChange}
-          disabled={uploading}
-        />
-        <span className="admin-field-hint">{hint}</span>
-      </div>
-
-      {uploading && (
-        <div className="admin-upload-progress">
-          <div className="admin-upload-bar" style={{ width: `${progress}%` }} />
-          <span className="admin-upload-pct">{progress}%</span>
-        </div>
-      )}
-
-      {error && <p className="admin-error">{error}</p>}
-
-      <div className="admin-form-actions">
-        <button className="btn-admin-primary" type="submit" disabled={uploading || !file}>
-          {uploading ? `업로드 중... (${progress}%)` : '업로드'}
-        </button>
-      </div>
-    </form>
-  );
-}
-
 export default function DownloadAdmin() {
   const [info, setInfo] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -166,11 +31,27 @@ export default function DownloadAdmin() {
     );
   }
 
+  const reload = () => {
+    setLoading(true);
+    setLoadError('');
+    getDownloadInfo()
+      .then((data) => {
+        setInfo(data);
+        setLoadError('');
+      })
+      .catch((err) => {
+        console.error('다운로드 정보 로드 실패:', err);
+        setLoadError('배포 정보를 불러올 수 없습니다.');
+      })
+      .finally(() => setLoading(false));
+  };
+
   if (loadError) {
     return (
       <div className="admin-section">
         <h2 className="admin-section-title">게임 배포 관리</h2>
         <p className="admin-error">{loadError}</p>
+        <button className="btn-admin-secondary" onClick={reload}>다시 시도</button>
       </div>
     );
   }
diff --git a/src/components/admin/UploadForm.jsx b/src/components/admin/UploadForm.jsx
new file mode 100644
index 0000000..7b9a0d4
--- /dev/null
+++ b/src/components/admin/UploadForm.jsx
@@ -0,0 +1,76 @@
+import { useState, useRef } from 'react';
+import { apiUpload } from '../../api/client';
+
+export default function UploadForm({ title, hint, accept, endpoint, onSuccess }) {
+  const [file, setFile] = useState(null);
+  const [uploading, setUploading] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [error, setError] = useState('');
+  const fileInputRef = useRef(null);
+
+  const handleFileChange = (e) => {
+    setFile(e.target.files[0] || null);
+    setError('');
+    setProgress(0);
+  };
+
+  const handleUpload = async (e) => {
+    e.preventDefault();
+    if (!file) return;
+
+    const path = `${endpoint}?filename=${encodeURIComponent(file.name)}`;
+
+    setUploading(true);
+    setError('');
+
+    try {
+      const { status, body } = await apiUpload(path, file, (p) => setProgress(p));
+      if (status >= 200 && status < 300) {
+        onSuccess(body);
+        setFile(null);
+        if (fileInputRef.current) fileInputRef.current.value = '';
+        setProgress(0);
+      } else {
+        setError(body.error || '업로드에 실패했습니다.');
+        setProgress(0);
+      }
+    } catch {
+      setError('네트워크 오류가 발생했습니다.');
+      setProgress(0);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  return (
+    <form className="admin-form" onSubmit={handleUpload}>
+      <div className="admin-field">
+        <label className="admin-label">{title}</label>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept={accept}
+          className="admin-input-file"
+          onChange={handleFileChange}
+          disabled={uploading}
+        />
+        <span className="admin-field-hint">{hint}</span>
+      </div>
+
+      {uploading && (
+        <div className="admin-upload-progress">
+          <div className="admin-upload-bar" style={{ width: `${progress}%` }} />
+          <span className="admin-upload-pct">{progress}%</span>
+        </div>
+      )}
+
+      {error && <p className="admin-error">{error}</p>}
+
+      <div className="admin-form-actions">
+        <button className="btn-admin-primary" type="submit" disabled={uploading || !file}>
+          {uploading ? `업로드 중... (${progress}%)` : '업로드'}
+        </button>
+      </div>
+    </form>
+  );
+}
diff --git a/src/components/admin/UserAdmin.jsx b/src/components/admin/UserAdmin.jsx
index 210a72c..e46dd63 100644
--- a/src/components/admin/UserAdmin.jsx
+++ b/src/components/admin/UserAdmin.jsx
@@ -1,3 +1,4 @@
+// TODO: Add tests for CRUD operations (list users, update role, delete user)
 import { useState, useEffect, useCallback } from 'react';
 import { getUsers, updateUserRole, deleteUser } from '../../api/users';
 import { useAuth } from '../../context/useAuth';
@@ -7,22 +8,27 @@ import './AdminCommon.css';
 export default function UserAdmin() {
   const [users, setUsers] = useState([]);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
+  const [fetchError, setFetchError] = useState(false);
   const { user: me } = useAuth();
   const toast = useToast();
 
   const load = useCallback(() => {
+    setLoading(true);
+    setFetchError(false);
     getUsers()
       .then(setUsers)
-      .catch((err) => { console.error('유저 목록 로드 실패:', err); })
+      .catch((err) => {
+        console.error('유저 목록 로드 실패:', err);
+        setFetchError(true);
+      })
       .finally(() => setLoading(false));
   }, []);
   useEffect(() => { load(); }, [load]);
 
   const handleRoleToggle = async (u) => {
     const newRole = u.role === 'admin' ? 'user' : 'admin';
+    // TODO: Replace window.confirm() with a custom confirmation modal for consistent UI
     if (!confirm(`${u.username}의 권한을 ${newRole}로 변경하시겠습니까?`)) return;
-    setError('');
     try {
       await updateUserRole(u.id, newRole);
       toast.success(`${u.username}의 권한이 ${newRole}로 변경되었습니다.`);
@@ -33,8 +39,8 @@ export default function UserAdmin() {
   };
 
   const handleDelete = async (u) => {
+    // TODO: Replace window.confirm() with a custom confirmation modal for consistent UI
     if (!confirm(`${u.username} 계정을 삭제하시겠습니까?`)) return;
-    setError('');
     try {
       await deleteUser(u.id);
       toast.success(`${u.username} 계정이 삭제되었습니다.`);
@@ -47,7 +53,12 @@ export default function UserAdmin() {
   return (
     <div className="admin-section">
       <h2 className="admin-section-title">유저 관리</h2>
-      {error && <p className="admin-error">{error}</p>}
+      {fetchError && (
+        <div className="admin-error-block">
+          <p className="admin-error">유저 목록을 불러올 수 없습니다.</p>
+          <button className="btn-admin-secondary" onClick={load}>다시 시도</button>
+        </div>
+      )}
       {loading && <p className="admin-list-empty">불러오는 중...</p>}
       {!loading && users.length === 0 && <p className="admin-list-empty">등록된 유저가 없습니다.</p>}
       <ul className="admin-list">
diff --git a/src/components/toast/Toast.css b/src/components/toast/Toast.css
new file mode 100644
index 0000000..7bc9509
--- /dev/null
+++ b/src/components/toast/Toast.css
@@ -0,0 +1,38 @@
+.toast-container {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: none;
+}
+
+.toast-item {
+  padding: 12px 20px;
+  border-radius: 8px;
+  color: #fff;
+  font-size: 14px;
+  max-width: 360px;
+  cursor: pointer;
+  pointer-events: auto;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  animation: toast-in 0.25s ease-out;
+}
+
+.toast-item.info {
+  background-color: #3a3a3a;
+}
+
+.toast-item.success {
+  background-color: #2d6a4f;
+}
+
+.toast-item.error {
+  background-color: #9b2226;
+}
+
+.toast-item.warn {
+  background-color: #7f5539;
+}
diff --git a/src/components/toast/ToastProvider.jsx b/src/components/toast/ToastProvider.jsx
index dfa2e70..53bca35 100644
--- a/src/components/toast/ToastProvider.jsx
+++ b/src/components/toast/ToastProvider.jsx
@@ -1,11 +1,11 @@
 import { useState, useCallback, useRef } from 'react';
 import { ToastContext } from './toastContextValue';
-
-let toastId = 0;
+import './Toast.css';
 
 export function ToastProvider({ children }) {
   const [toasts, setToasts] = useState([]);
   const timersRef = useRef({});
+  const toastIdRef = useRef(0);
 
   const removeToast = useCallback((id) => {
     clearTimeout(timersRef.current[id]);
@@ -14,12 +14,19 @@ export function ToastProvider({ children }) {
   }, []);
 
   const addToast = useCallback((message, type = 'info', duration = 3000) => {
-    const id = ++toastId;
+    const id = ++toastIdRef.current;
     setToasts((prev) => [...prev, { id, message, type }]);
     timersRef.current[id] = setTimeout(() => removeToast(id), duration);
     return id;
   }, [removeToast]);
 
+  // Attaching methods to the toast function works because useCallback keeps
+  // the reference stable across renders, so the .success/.error/.warn properties
+  // persist. This is a pragmatic pattern — a plain object would be cleaner but
+  // would change the public API consumed by useToast() callers.
+  // IMPORTANT: This pattern relies on `addToast` being stable (no dependencies that change).
+  // If addToast gains new dependencies, toast.success/error/warn will be stale on the old ref.
+  // In that case, refactor to return an object { info, success, error, warn } from context.
   const toast = useCallback((message) => addToast(message, 'info'), [addToast]);
   toast.success = useCallback((message) => addToast(message, 'success'), [addToast]);
   toast.error = useCallback((message) => addToast(message, 'error'), [addToast]);
@@ -28,9 +35,9 @@ export function ToastProvider({ children }) {
   return (
     <ToastContext.Provider value={toast}>
       {children}
-      <div style={containerStyle}>
+      <div className="toast-container" role="status" aria-live="polite">
         {toasts.map((t) => (
-          <div key={t.id} style={{ ...itemStyle, ...typeStyles[t.type] }} onClick={() => removeToast(t.id)}>
+          <div key={t.id} className={`toast-item ${t.type}`} onClick={() => removeToast(t.id)}>
             {t.message}
           </div>
         ))}
@@ -38,33 +45,3 @@ export function ToastProvider({ children }) {
     </ToastContext.Provider>
   );
 }
-
-const containerStyle = {
-  position: 'fixed',
-  top: 16,
-  right: 16,
-  zIndex: 10000,
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 8,
-  pointerEvents: 'none',
-};
-
-const itemStyle = {
-  padding: '12px 20px',
-  borderRadius: 8,
-  color: '#fff',
-  fontSize: 14,
-  maxWidth: 360,
-  cursor: 'pointer',
-  pointerEvents: 'auto',
-  boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
-  animation: 'toast-in 0.25s ease-out',
-};
-
-const typeStyles = {
-  info: { backgroundColor: '#3a3a3a' },
-  success: { backgroundColor: '#2d6a4f' },
-  error: { backgroundColor: '#9b2226' },
-  warn: { backgroundColor: '#7f5539' },
-};
diff --git a/src/components/toast/index.js b/src/components/toast/index.js
new file mode 100644
index 0000000..b61e0d1
--- /dev/null
+++ b/src/components/toast/index.js
@@ -0,0 +1,2 @@
+export { ToastProvider } from './ToastProvider';
+export { useToast } from './useToast';
diff --git a/src/context/AuthContext.jsx b/src/context/AuthContext.jsx
index fe6e881..1144c8d 100644
--- a/src/context/AuthContext.jsx
+++ b/src/context/AuthContext.jsx
@@ -2,38 +2,45 @@ import { useState, useCallback, useEffect } from 'react';
 import { login as apiLogin, logout as apiLogout } from '../api/auth';
 import { AuthContext } from './authContextValue';
 
+function decodeTokenPayload(token) {
+  try {
+    const payload = token.split('.')[1];
+    return JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
+  } catch { return null; }
+}
+
 export function AuthProvider({ children }) {
   const [user, setUser] = useState(() => {
     const token = localStorage.getItem('token');
     const username = localStorage.getItem('username');
-    const role = localStorage.getItem('role');
-    return token ? { token, username, role } : null;
+    if (!token) return null;
+    const payload = decodeTokenPayload(token);
+    const role = payload?.role || 'user';
+    return { token, username, role };
   });
 
   const login = useCallback(async (username, password) => {
     const data = await apiLogin(username, password);
     localStorage.setItem('token', data.token);
-    localStorage.setItem('refreshToken', data.refreshToken);
     localStorage.setItem('username', data.username);
-    localStorage.setItem('role', data.role);
-    setUser({ token: data.token, username: data.username, role: data.role });
+    const decoded = decodeTokenPayload(data.token);
+    const role = decoded?.role || 'user';
+    setUser({ token: data.token, username: data.username, role });
   }, []);
 
   // SSAFY OAuth 콜백에서 받은 토큰으로 로그인 처리
   const setUserFromSSAFY = useCallback((data) => {
     localStorage.setItem('token', data.token);
-    localStorage.setItem('refreshToken', data.refreshToken);
     localStorage.setItem('username', data.username);
-    localStorage.setItem('role', data.role);
-    setUser({ token: data.token, username: data.username, role: data.role });
+    const decoded = decodeTokenPayload(data.token);
+    const role = decoded?.role || 'user';
+    setUser({ token: data.token, username: data.username, role });
   }, []);
 
   // 로컬 세션만 정리 (토큰 만료·강제 로그아웃 시)
   const clearSession = useCallback(() => {
     localStorage.removeItem('token');
-    localStorage.removeItem('refreshToken');
     localStorage.removeItem('username');
-    localStorage.removeItem('role');
     setUser(null);
   }, []);
 
diff --git a/src/pages/AdminPage.jsx b/src/pages/AdminPage.jsx
index fec1ebb..cfbc3f7 100644
--- a/src/pages/AdminPage.jsx
+++ b/src/pages/AdminPage.jsx
@@ -29,10 +29,14 @@ export default function AdminPage() {
         </div>
       </header>
 
-      <div className="admin-tabs">
+      <div className="admin-tabs" role="tablist">
         {TABS.map((t) => (
           <button
             key={t.key}
+            role="tab"
+            id={`tab-${t.key}`}
+            aria-selected={tab === t.key}
+            aria-controls={`tabpanel-${t.key}`}
             className={`admin-tab${tab === t.key ? ' active' : ''}`}
             onClick={() => setTab(t.key)}
           >
@@ -41,7 +45,8 @@ export default function AdminPage() {
         ))}
       </div>
 
-      <main className="admin-main">
+      {/* Tabs are conditionally rendered (not hidden) to avoid stale data. Each panel re-fetches on mount. */}
+      <main className="admin-main" role="tabpanel" id={`tabpanel-${tab}`} aria-labelledby={`tab-${tab}`}>
         {tab === 'announcement' && <AnnouncementAdmin />}
         {tab === 'download' && <DownloadAdmin />}
         {tab === 'user' && <UserAdmin />}
diff --git a/src/pages/AuthPage.css b/src/pages/AuthPage.css
new file mode 100644
index 0000000..1a00ba8
--- /dev/null
+++ b/src/pages/AuthPage.css
@@ -0,0 +1,176 @@
+.login-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #2E2C2F;
+  background-image:
+    radial-gradient(ellipse at 20% 50%, rgba(186, 205, 176, 0.08) 0%, transparent 50%),
+    radial-gradient(ellipse at 80% 50%, rgba(186, 205, 176, 0.05) 0%, transparent 50%);
+}
+
+.login-panel {
+  width: 100%;
+  max-width: 400px;
+  padding: 48px 40px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(186, 205, 176, 0.15);
+  border-radius: 12px;
+  backdrop-filter: blur(10px);
+}
+
+.login-header {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.game-title {
+  font-size: 3rem;
+  font-weight: 800;
+  color: #BACDB0;
+  letter-spacing: 0.15em;
+  margin: 0;
+  line-height: 1;
+}
+
+.game-subtitle {
+  font-size: 0.85rem;
+  color: rgba(186, 205, 176, 0.6);
+  letter-spacing: 0.5em;
+  margin: 8px 0 0;
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.input-group label {
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.6);
+  font-weight: 500;
+}
+
+.input-group input {
+  padding: 12px 16px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(186, 205, 176, 0.2);
+  border-radius: 8px;
+  color: #fff;
+  font-size: 0.95rem;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.input-group input::placeholder {
+  color: rgba(255, 255, 255, 0.25);
+}
+
+.input-group input:focus {
+  border-color: #BACDB0;
+}
+
+.login-success {
+  color: #81c784;
+  font-size: 0.85rem;
+  margin: 0;
+  text-align: center;
+}
+
+.login-error {
+  color: #e57373;
+  font-size: 0.85rem;
+  margin: 0;
+  text-align: center;
+}
+
+.btn-login {
+  padding: 14px;
+  background: #BACDB0;
+  color: #2E2C2F;
+  border: none;
+  border-radius: 8px;
+  font-size: 1rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  margin-top: 4px;
+}
+
+.btn-login:hover {
+  opacity: 0.9;
+}
+
+.btn-login:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.login-divider {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin: 24px 0;
+}
+
+.login-divider::before,
+.login-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.login-divider span {
+  font-size: 0.8rem;
+  color: rgba(255, 255, 255, 0.35);
+}
+
+.btn-ssafy {
+  width: 100%;
+  padding: 12px;
+  background: transparent;
+  color: rgba(186, 205, 176, 0.8);
+  border: 1px solid rgba(186, 205, 176, 0.3);
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.btn-ssafy:hover {
+  background: rgba(186, 205, 176, 0.08);
+  border-color: rgba(186, 205, 176, 0.5);
+}
+
+.login-back {
+  display: block;
+  text-align: center;
+  margin-top: 24px;
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.4);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.login-back:hover {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.password-strength {
+  font-size: 0.8rem;
+  color: rgba(186, 205, 176, 0.7);
+  margin: -12px 0 0;
+}
+
+.password-strength.strength-weak {
+  color: #e57373;
+}
diff --git a/src/pages/LoginPage.css b/src/pages/LoginPage.css
index 1a00ba8..5a8af71 100644
--- a/src/pages/LoginPage.css
+++ b/src/pages/LoginPage.css
@@ -1,176 +1 @@
-.login-page {
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #2E2C2F;
-  background-image:
-    radial-gradient(ellipse at 20% 50%, rgba(186, 205, 176, 0.08) 0%, transparent 50%),
-    radial-gradient(ellipse at 80% 50%, rgba(186, 205, 176, 0.05) 0%, transparent 50%);
-}
-
-.login-panel {
-  width: 100%;
-  max-width: 400px;
-  padding: 48px 40px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(186, 205, 176, 0.15);
-  border-radius: 12px;
-  backdrop-filter: blur(10px);
-}
-
-.login-header {
-  text-align: center;
-  margin-bottom: 40px;
-}
-
-.game-title {
-  font-size: 3rem;
-  font-weight: 800;
-  color: #BACDB0;
-  letter-spacing: 0.15em;
-  margin: 0;
-  line-height: 1;
-}
-
-.game-subtitle {
-  font-size: 0.85rem;
-  color: rgba(186, 205, 176, 0.6);
-  letter-spacing: 0.5em;
-  margin: 8px 0 0;
-}
-
-.login-form {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.input-group {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.input-group label {
-  font-size: 0.85rem;
-  color: rgba(255, 255, 255, 0.6);
-  font-weight: 500;
-}
-
-.input-group input {
-  padding: 12px 16px;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(186, 205, 176, 0.2);
-  border-radius: 8px;
-  color: #fff;
-  font-size: 0.95rem;
-  outline: none;
-  transition: border-color 0.2s;
-}
-
-.input-group input::placeholder {
-  color: rgba(255, 255, 255, 0.25);
-}
-
-.input-group input:focus {
-  border-color: #BACDB0;
-}
-
-.login-success {
-  color: #81c784;
-  font-size: 0.85rem;
-  margin: 0;
-  text-align: center;
-}
-
-.login-error {
-  color: #e57373;
-  font-size: 0.85rem;
-  margin: 0;
-  text-align: center;
-}
-
-.btn-login {
-  padding: 14px;
-  background: #BACDB0;
-  color: #2E2C2F;
-  border: none;
-  border-radius: 8px;
-  font-size: 1rem;
-  font-weight: 700;
-  cursor: pointer;
-  transition: opacity 0.2s;
-  margin-top: 4px;
-}
-
-.btn-login:hover {
-  opacity: 0.9;
-}
-
-.btn-login:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.login-divider {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin: 24px 0;
-}
-
-.login-divider::before,
-.login-divider::after {
-  content: '';
-  flex: 1;
-  height: 1px;
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.login-divider span {
-  font-size: 0.8rem;
-  color: rgba(255, 255, 255, 0.35);
-}
-
-.btn-ssafy {
-  width: 100%;
-  padding: 12px;
-  background: transparent;
-  color: rgba(186, 205, 176, 0.8);
-  border: 1px solid rgba(186, 205, 176, 0.3);
-  border-radius: 8px;
-  font-size: 0.9rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.2s, border-color 0.2s;
-}
-
-.btn-ssafy:hover {
-  background: rgba(186, 205, 176, 0.08);
-  border-color: rgba(186, 205, 176, 0.5);
-}
-
-.login-back {
-  display: block;
-  text-align: center;
-  margin-top: 24px;
-  font-size: 0.85rem;
-  color: rgba(255, 255, 255, 0.4);
-  text-decoration: none;
-  transition: color 0.2s;
-}
-
-.login-back:hover {
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.password-strength {
-  font-size: 0.8rem;
-  color: rgba(186, 205, 176, 0.7);
-  margin: -12px 0 0;
-}
-
-.password-strength.strength-weak {
-  color: #e57373;
-}
+/* This file is deprecated. Both LoginPage and RegisterPage now use AuthPage.css */
diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx
index e55ae65..209a774 100644
--- a/src/pages/LoginPage.jsx
+++ b/src/pages/LoginPage.jsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { useNavigate, Link, useLocation } from 'react-router-dom';
 import { useAuth } from '../context/useAuth';
 import { getSSAFYLoginURL } from '../api/auth';
-import './LoginPage.css';
+import './AuthPage.css';
 
 export default function LoginPage() {
   const [username, setUsername] = useState('');
diff --git a/src/pages/LoginPage.test.jsx b/src/pages/LoginPage.test.jsx
new file mode 100644
index 0000000..a97603c
--- /dev/null
+++ b/src/pages/LoginPage.test.jsx
@@ -0,0 +1,129 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import LoginPage from './LoginPage';
+
+// Mock useAuth
+const mockLogin = vi.fn();
+vi.mock('../context/useAuth', () => ({
+  useAuth: () => ({ login: mockLogin }),
+}));
+
+// Mock auth API
+vi.mock('../api/auth', () => ({
+  getSSAFYLoginURL: vi.fn(),
+}));
+
+// Mock useNavigate
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+function renderLoginPage() {
+  return render(
+    <MemoryRouter>
+      <LoginPage />
+    </MemoryRouter>,
+  );
+}
+
+describe('LoginPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the login form with all elements', () => {
+    renderLoginPage();
+    expect(screen.getByText('One of the plans')).toBeInTheDocument();
+    expect(screen.getByLabelText('아이디')).toBeInTheDocument();
+    expect(screen.getByLabelText('비밀번호')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: '로그인' })).toBeInTheDocument();
+    expect(screen.getByText('SSAFY 계정으로 로그인')).toBeInTheDocument();
+    expect(screen.getByText(/회원가입/)).toBeInTheDocument();
+  });
+
+  describe('validation', () => {
+    it('shows error when both fields are empty', async () => {
+      renderLoginPage();
+      fireEvent.click(screen.getByRole('button', { name: '로그인' }));
+      expect(
+        await screen.findByText('아이디와 비밀번호를 입력해주세요.'),
+      ).toBeInTheDocument();
+    });
+
+    it('shows error when username is empty (whitespace only)', async () => {
+      renderLoginPage();
+      fireEvent.change(screen.getByLabelText('아이디'), { target: { value: '   ' } });
+      fireEvent.change(screen.getByLabelText('비밀번호'), { target: { value: 'pass' } });
+      fireEvent.click(screen.getByRole('button', { name: '로그인' }));
+      expect(
+        await screen.findByText('아이디와 비밀번호를 입력해주세요.'),
+      ).toBeInTheDocument();
+    });
+
+    it('shows error when password is empty', async () => {
+      renderLoginPage();
+      fireEvent.change(screen.getByLabelText('아이디'), { target: { value: 'user' } });
+      fireEvent.click(screen.getByRole('button', { name: '로그인' }));
+      expect(
+        await screen.findByText('아이디와 비밀번호를 입력해주세요.'),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('login flow', () => {
+    it('calls login and navigates on success', async () => {
+      mockLogin.mockResolvedValueOnce({});
+
+      renderLoginPage();
+      fireEvent.change(screen.getByLabelText('아이디'), { target: { value: 'testuser' } });
+      fireEvent.change(screen.getByLabelText('비밀번호'), { target: { value: 'password1' } });
+      fireEvent.click(screen.getByRole('button', { name: '로그인' }));
+
+      await waitFor(() => {
+        expect(mockLogin).toHaveBeenCalledWith('testuser', 'password1');
+      });
+      await waitFor(() => {
+        expect(mockNavigate).toHaveBeenCalledWith('/', { replace: true });
+      });
+    });
+
+    it('displays error on login failure', async () => {
+      mockLogin.mockRejectedValueOnce(new Error('잘못된 아이디 또는 비밀번호입니다.'));
+
+      renderLoginPage();
+      fireEvent.change(screen.getByLabelText('아이디'), { target: { value: 'testuser' } });
+      fireEvent.change(screen.getByLabelText('비밀번호'), { target: { value: 'wrong' } });
+      fireEvent.click(screen.getByRole('button', { name: '로그인' }));
+
+      expect(
+        await screen.findByText('잘못된 아이디 또는 비밀번호입니다.'),
+      ).toBeInTheDocument();
+    });
+
+    it('shows loading state while submitting', async () => {
+      // Make login hang so we can observe the loading state
+      let resolveLogin;
+      mockLogin.mockReturnValueOnce(new Promise((r) => { resolveLogin = r; }));
+
+      renderLoginPage();
+      fireEvent.change(screen.getByLabelText('아이디'), { target: { value: 'user' } });
+      fireEvent.change(screen.getByLabelText('비밀번호'), { target: { value: 'pass' } });
+      fireEvent.click(screen.getByRole('button', { name: '로그인' }));
+
+      expect(await screen.findByText('로그인 중...')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: '로그인 중...' })).toBeDisabled();
+
+      // Resolve to clean up
+      resolveLogin({});
+      await waitFor(() => {
+        expect(screen.queryByText('로그인 중...')).not.toBeInTheDocument();
+      });
+    });
+  });
+});
diff --git a/src/pages/RegisterPage.jsx b/src/pages/RegisterPage.jsx
index 08fac2e..029ef6e 100644
--- a/src/pages/RegisterPage.jsx
+++ b/src/pages/RegisterPage.jsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import { register } from '../api/auth';
-import './LoginPage.css';
+import './AuthPage.css';
 
 export default function RegisterPage() {
   const [username, setUsername] = useState('');
diff --git a/src/pages/RegisterPage.test.jsx b/src/pages/RegisterPage.test.jsx
new file mode 100644
index 0000000..55020e6
--- /dev/null
+++ b/src/pages/RegisterPage.test.jsx
@@ -0,0 +1,139 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import RegisterPage from './RegisterPage';
+
+// Mock the auth API
+vi.mock('../api/auth', () => ({
+  register: vi.fn(),
+}));
+
+// Mock useNavigate
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+function renderRegisterPage() {
+  return render(
+    <MemoryRouter>
+      <RegisterPage />
+    </MemoryRouter>,
+  );
+}
+
+describe('RegisterPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the registration form', () => {
+    renderRegisterPage();
+    expect(screen.getByLabelText('아이디')).toBeInTheDocument();
+    expect(screen.getByLabelText('비밀번호')).toBeInTheDocument();
+    expect(screen.getByLabelText('비밀번호 확인')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: '회원가입' })).toBeInTheDocument();
+  });
+
+  describe('username validation', () => {
+    it('shows error when username is empty', async () => {
+      renderRegisterPage();
+      fireEvent.click(screen.getByRole('button', { name: '회원가입' }));
+      expect(await screen.findByText('아이디를 입력해주세요.')).toBeInTheDocument();
+    });
+
+    it('shows error when username is less than 3 characters', async () => {
+      renderRegisterPage();
+      fireEvent.change(screen.getByLabelText('아이디'), { target: { value: 'ab' } });
+      fireEvent.change(screen.getByLabelText('비밀번호'), { target: { value: 'password1' } });
+      fireEvent.change(screen.getByLabelText('비밀번호 확인'), { target: { value: 'password1' } });
+      fireEvent.click(screen.getByRole('button', { name: '회원가입' }));
+      expect(await screen.findByText('아이디는 3자 이상이어야 합니다.')).toBeInTheDocument();
+    });
+
+    it('shows error when username contains invalid characters', async () => {
+      renderRegisterPage();
+      fireEvent.change(screen.getByLabelText('아이디'), { target: { value: 'user@name' } });
+      fireEvent.change(screen.getByLabelText('비밀번호'), { target: { value: 'password1' } });
+      fireEvent.change(screen.getByLabelText('비밀번호 확인'), { target: { value: 'password1' } });
+      fireEvent.click(screen.getByRole('button', { name: '회원가입' }));
+      expect(
+        await screen.findByText('아이디는 영문 소문자, 숫자, _, -만 사용 가능합니다.'),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('password strength', () => {
+    it('shows weak indicator for short passwords', () => {
+      renderRegisterPage();
+      fireEvent.change(screen.getByLabelText('비밀번호'), { target: { value: 'abc' } });
+      expect(screen.getByText(/비밀번호는 6자 이상이어야 합니다/)).toBeInTheDocument();
+    });
+
+    it('shows "약함" for lowercase-only password of 6+ chars', () => {
+      renderRegisterPage();
+      fireEvent.change(screen.getByLabelText('비밀번호'), { target: { value: 'abcdef' } });
+      expect(screen.getByText(/약함/)).toBeInTheDocument();
+    });
+
+    it('shows "보통" for mixed-case password', () => {
+      renderRegisterPage();
+      fireEvent.change(screen.getByLabelText('비밀번호'), { target: { value: 'abcDEF' } });
+      expect(screen.getByText(/보통/)).toBeInTheDocument();
+    });
+
+    it('shows "강함" for password with multiple character types', () => {
+      renderRegisterPage();
+      fireEvent.change(screen.getByLabelText('비밀번호'), { target: { value: 'abcD1!' } });
+      expect(screen.getByText(/강함/)).toBeInTheDocument();
+    });
+  });
+
+  describe('password confirmation', () => {
+    it('shows error when passwords do not match', async () => {
+      renderRegisterPage();
+      fireEvent.change(screen.getByLabelText('아이디'), { target: { value: 'testuser' } });
+      fireEvent.change(screen.getByLabelText('비밀번호'), { target: { value: 'password1' } });
+      fireEvent.change(screen.getByLabelText('비밀번호 확인'), { target: { value: 'different' } });
+      fireEvent.click(screen.getByRole('button', { name: '회원가입' }));
+      expect(await screen.findByText('비밀번호가 일치하지 않습니다.')).toBeInTheDocument();
+    });
+  });
+
+  describe('form submission', () => {
+    it('calls register and navigates on success', async () => {
+      const { register } = await import('../api/auth');
+      register.mockResolvedValueOnce({});
+
+      renderRegisterPage();
+      fireEvent.change(screen.getByLabelText('아이디'), { target: { value: 'testuser' } });
+      fireEvent.change(screen.getByLabelText('비밀번호'), { target: { value: 'password1' } });
+      fireEvent.change(screen.getByLabelText('비밀번호 확인'), { target: { value: 'password1' } });
+      fireEvent.click(screen.getByRole('button', { name: '회원가입' }));
+
+      await waitFor(() => {
+        expect(register).toHaveBeenCalledWith('testuser', 'password1');
+      });
+      await waitFor(() => {
+        expect(mockNavigate).toHaveBeenCalledWith('/login', { state: { registered: true } });
+      });
+    });
+
+    it('displays error message on registration failure', async () => {
+      const { register } = await import('../api/auth');
+      register.mockRejectedValueOnce(new Error('이미 존재하는 아이디입니다.'));
+
+      renderRegisterPage();
+      fireEvent.change(screen.getByLabelText('아이디'), { target: { value: 'existing' } });
+      fireEvent.change(screen.getByLabelText('비밀번호'), { target: { value: 'password1' } });
+      fireEvent.change(screen.getByLabelText('비밀번호 확인'), { target: { value: 'password1' } });
+      fireEvent.click(screen.getByRole('button', { name: '회원가입' }));
+
+      expect(await screen.findByText('이미 존재하는 아이디입니다.')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/pages/SSAFYCallbackPage.jsx b/src/pages/SSAFYCallbackPage.jsx
index c167a47..096a138 100644
--- a/src/pages/SSAFYCallbackPage.jsx
+++ b/src/pages/SSAFYCallbackPage.jsx
@@ -3,11 +3,15 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useAuth } from '../context/useAuth';
 import { ssafyCallback } from '../api/auth';
 
+// Inline styles are intentional for this simple callback/loading page — not worth a separate CSS file.
 export default function SSAFYCallbackPage() {
   const [error, setError] = useState('');
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const { setUserFromSSAFY } = useAuth();
+  // useRef(false) prevents double-execution in React 18+ StrictMode,
+  // which remounts components in development. The ref persists across
+  // the StrictMode remount, ensuring the OAuth callback runs only once.
   const called = useRef(false);
 
   useEffect(() => {
diff --git a/src/test/setup.js b/src/test/setup.js
new file mode 100644
index 0000000..7b0828b
--- /dev/null
+++ b/src/test/setup.js
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
diff --git a/vite.config.js b/vite.config.js
index 8b0f57b..6ad85a6 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,4 +4,9 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/test/setup.js',
+  },
 })