Feature/이지현 clean frontend v2

backend/seed.py

@@ -0,0 +1,82 @@
+"""
+  docker compose exec backend python seed.py
+"""
+
+import asyncio
+
+from sqlalchemy import select
+
+from app.core.security import hash_password
+from app.database import AsyncSessionLocal
+from app.models.models import Admin, Camera
+
+
+# ── 시드 데이터 정의 ─────────────────────────────────────────────────────────
+
+ADMIN_ACCOUNTS = [
+    {
+        "email": "admin@gateguard.com",
+        "password": "admin1234",
+        "employee_id": "EMP00001",
+    },
+    {
+        "email": "station01@gateguard.com",
+        "password": "station1234",
+        "employee_id": "EMP00002",
+    },
+]
+
+# 신분당선
+_SHINBUNDANG_STATIONS = [
+    "광교역", "광교중앙역", "상현역",
+]
+
+TEST_CAMERAS = [
+    {"location": f"개찰구 {g}번 게이트", "station_name": st, "is_active": True}
+    for st in _SHINBUNDANG_STATIONS
+    for g in (1, 2)
+]
+
+
+async def seed():
+    async with AsyncSessionLocal() as session:
+        # ── 관리자 계정 시딩 ──────────────────────────────────────────────
+        for account in ADMIN_ACCOUNTS:
+            exists = await session.execute(
+                select(Admin).where(Admin.email == account["email"])
+            )
+            if exists.scalar_one_or_none():
+                print(f"  [SKIP] 관리자 이미 존재: {account['email']}")
+                continue
+
+            admin = Admin(
+                email=account["email"],
+                password=hash_password(account["password"]),
+                employee_id=account["employee_id"],
+            )
+            session.add(admin)
+            print(f"  [ADD]  관리자 생성: {account['email']} ({account['employee_id']})")
+
+        # ── 카메라 데이터 시딩 ────────────────────────────────────────────
+        for cam in TEST_CAMERAS:
+            exists = await session.execute(
+                select(Camera).where(
+                    Camera.location == cam["location"],
+                    Camera.station_name == cam["station_name"],
+                )
+            )
+            if exists.scalar_one_or_none():
+                print(f"  [SKIP] 카메라 이미 존재: {cam['station_name']} - {cam['location']}")
+                continue
+
+            camera = Camera(**cam)
+            session.add(camera)
+            print(f"  [ADD]  카메라 생성: {cam['station_name']} - {cam['location']}")
+
+        await session.commit()
+        print("\n 시딩 완료")
+
+
+if __name__ == "__main__":
+    print("GateGuard 초기 데이터 시딩 시작...\n")
+    asyncio.run(seed())

frontend/.env.example

@@ -1,2 +1,2 @@
 VITE_API_BASE_URL=http://localhost:8000
-VITE_WS_URL=ws://localhost:8000/ws/events
+VITE_WS_URL=ws://localhost:8000/ws/events

frontend/.expo/README.md

@@ -0,0 +1,15 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

frontend/.expo/settings.json

@@ -0,0 +1,8 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false
+}

frontend/.gitignore

@@ -7,10 +7,21 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+# Dependencies
 node_modules
+
+# Build
 dist
 dist-ssr
-*.local
+build
+coverage
+
+# Environment variables
+.env
+.env.local
+.env.development
+.env.production
+.env.test
 
 # Editor directories and files
 .vscode/*
@@ -22,3 +33,13 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# OS
+Thumbs.db
+
+# Local
+*.local
+
+# Claude
+.claude
+.claudeignore

frontend/README.md

@@ -1,73 +1,51 @@
-# React + TypeScript + Vite
+# GateGuard Frontend
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+지하철 무임승차 실시간 감지 시스템의 관리자 대시보드 프론트엔드.
 
-Currently, two official plugins are available:
+## 기술 스택
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+- React 18 + TypeScript + Vite
+- Tailwind CSS v4
+- shadcn/ui (radix-nova) + lucide-react
+- ECharts (echarts-for-react) — 통계 차트
+- sonner — 토스트 알림
 
-## React Compiler
+## 실행
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+```bash
+npm install
+npm run dev       # 개발 서버 (HMR)
+npm run build     # 프로덕션 빌드
+npm run lint      # ESLint
+```
 
-## Expanding the ESLint configuration
+## 환경 변수 (`.env`)
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+```
+VITE_API_BASE_URL=http://localhost:8000
+VITE_WS_URL=ws://localhost:8000/ws/events
+```
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+실서버: `https://gateguardsystems.com`
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+## 전체 스택 실행
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+```bash
+# 레포 루트에서
+docker-compose up -d
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+## 주요 페이지
 
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
+| 경로 | 설명 |
+|------|------|
+| `/` | 로그인 (회원가입 / 비밀번호 찾기 포함) |
+| `/dashboard` | 실시간 대시보드 (WebSocket, 이벤트 카드, 오탐 신고) |
+| `/events` | 전체 발생내역 (필터, 페이지네이션, CSV 내보내기) |
+| `/stats` | 통계 시각화 (일별 추이, 시간대별, 유형별, 역별 순위) |
+| `/settings` | 내 프로필 + 카메라 관리 |
 
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
+## 문서
+
+- `CLAUDE.md` — Claude Code 작업 가이드 (아키텍처, 데이터 흐름, 구현 현황)
+- `API.md` — 백엔드 API 연동 현황