feat: Frontend

backend/app/configs/app.py

@@ -26,8 +26,8 @@ async def lifespan(app: FastAPI) -> AsyncIterator[None]:
         await conn.run_sync(lambda _: None)  # 연결 테스트
 
     # 스케줄러 시작
-    scheduler.add_job(trade_execution_job, "interval", seconds=30)
-    scheduler.start()
+    # scheduler.add_job(trade_execution_job, "interval", seconds=30)
+    # scheduler.start()
 
     yield
 

docker-compose.yml

@@ -9,7 +9,7 @@ services:
       - "3306:3306"
     volumes:
       - db-data:/var/lib/mysql
-      # - ./infra/init.sql:/docker-entrypoint-initdb.d/init.sql
+      - ./init.sql:/docker-entrypoint-initdb.d/init.sql
     networks:
       - joo-coin
     healthcheck:
@@ -47,6 +47,21 @@ services:
       "
     restart: unless-stopped
 
+  joo-coin-frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    container_name: joo-coin-frontend
+    ports:
+      - "5173:5173"
+    volumes:
+      - ./frontend:/app
+      - /app/node_modules
+    depends_on:
+      - joo-coin-backend
+    networks:
+      - joo-coin
+
 volumes:
   db-data:
 

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/.vite/deps/_metadata.json

@@ -0,0 +1,8 @@
+{
+  "hash": "3e5e4128",
+  "configHash": "f8ff4908",
+  "lockfileHash": "608c272f",
+  "browserHash": "94f0d377",
+  "optimized": {},
+  "chunks": {}
+}

frontend/.vite/deps/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

frontend/Dockerfile

@@ -0,0 +1,19 @@
+FROM node:22-alpine
+
+WORKDIR /app
+
+# Install pnpm
+RUN corepack enable && corepack prepare pnpm@latest --activate
+
+# Copy package files
+COPY package.json pnpm-lock.yaml ./
+
+# Install dependencies
+RUN pnpm install --frozen-lockfile
+
+# Copy source code
+COPY . .
+
+EXPOSE 5173
+
+CMD ["pnpm", "dev", "--host"]

frontend/README.md

@@ -0,0 +1,54 @@
+# Joo Coin Frontend
+
+React + TypeScript + Vite 기반의 암호화폐 거래소 프론트엔드 애플리케이션입니다.
+
+## 기술 스택
+
+- **React 19** - UI 라이브러리
+- **TypeScript** - 타입 안정성
+- **Vite** - 빌드 도구
+- **TailwindCSS** - 스타일링
+- **shadcn/ui** - UI 컴포넌트
+- **Recharts** - 차트 라이브러리
+- **Axios** - HTTP 클라이언트
+
+## 주요 기능
+
+### 1. 코인 관리
+
+[x] 내 거래 코인 목록 조회
+[x] 코인 추가/삭제
+[x] 코인 검색
+
+### 2. 차트 조회
+
+[x] 선택한 코인의 OHLCV 데이터 시각화
+[x] 캔들스틱 차트 및 라인 차트 전환
+[x] 거래량 차트
+
+### 3. 거래 내역
+
+[x] 거래 내역 조회 (페이지네이션)
+[x] 즉시 거래 실행
+[x] 거래 상태 및 상세 정보 표시
+
+## 프로젝트 구조
+
+```
+src/
+├── components/          # React 컴포넌트
+│   ├── ui/             # shadcn/ui 컴포넌트
+│   ├── CoinList.tsx   # 코인 목록 컴포넌트
+│   ├── CoinChart.tsx  # 차트 컴포넌트
+│   ├── TransactionHistory.tsx  # 거래 내역 컴포넌트
+│   └── Toaster.tsx    # 토스트 알림 컴포넌트
+├── contexts/          # React Context
+│   └── ToastContext.tsx  # 토스트 컨텍스트
+├── lib/               # 유틸리티 및 API
+│   ├── api.ts         # API 클라이언트
+│   └── utils.ts      # 유틸리티 함수
+├── hooks/             # 커스텀 훅
+│   └── use-toast.ts   # 토스트 훅 (재export)
+├── App.tsx            # 메인 앱 컴포넌트
+└── main.tsx           # 진입점
+```

frontend/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
+

frontend/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>frontend</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.13.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.554.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.9.6",
+    "recharts": "^3.4.1",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.22",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "tailwindcss": "^4.1.17",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}