diff --git a/docs/plans/2026-02-05-frontend-ui-redesign.md b/docs/plans/2026-02-05-frontend-ui-redesign.md new file mode 100644 index 0000000..76e2442 --- /dev/null +++ b/docs/plans/2026-02-05-frontend-ui-redesign.md @@ -0,0 +1,257 @@ +# Frontend UI 리디자인 설계 + +## 개요 + +Galaxy-PO 프론트엔드의 전면 리디자인. 모던 대시보드 스타일(Linear, Vercel Dashboard)로 전환하여 시각적 완성도와 사용자 경험을 개선한다. + +## 기술 스택 + +### 현재 +- Next.js 16 + React 19 + Tailwind CSS 4 +- 외부 UI 라이브러리 없음 +- 이모지 아이콘 + +### 추가 의존성 +``` +shadcn/ui - UI 컴포넌트 라이브러리 +lucide-react - 아이콘 +recharts - 일반 차트 (파이, 바, 에어리어) +lightweight-charts - TradingView 금융 차트 +next-themes - 다크/라이트 모드 +``` + +## 디자인 시스템 + +### 디자인 토큰 +- **색상**: shadcn/ui 기본 테마 기반, 다크/라이트 모드 CSS 변수 +- **Primary**: 파란색 계열 (금융 앱 신뢰감) +- **Semantic colors**: + - Success (초록) - 수익, 상승 + - Destructive (빨강) - 손실, 하락 + - Warning (노랑) - 주의, 리밸런싱 필요 +- **타이포그래피**: Inter (현재 유지), 명확한 계층 (text-xs ~ text-3xl) +- **간격**: Tailwind 기본 스케일 (4px 단위) +- **Border radius**: 부드러운 모서리 (radius-lg 기본) + +### shadcn/ui 컴포넌트 +- Button, Card, Input, Label, Select +- Table, Badge, Dropdown Menu +- Dialog, Sheet (모바일 사이드바) +- Tabs, Tooltip, Skeleton (로딩) +- Toast (알림) + +### 테마 +- 시스템 설정 따름 + 수동 토글 +- 다크/라이트 모드 지원 + +--- + +## 레이아웃 리디자인 + +### 사이드바 +- **너비**: 접힘 가능 (아이콘만 `w-16` ↔ 전체 `w-64`) +- **모바일**: Sheet 컴포넌트로 슬라이드 메뉴 +- **구성**: + ``` + ┌─────────────────┐ + │ 🌌 Galaxy-PO │ ← 로고 + 앱 이름 + ├─────────────────┤ + │ ▢ 대시보드 │ + │ ▢ 포트폴리오 │ + │ ▢ 전략 │ ← Lucide 아이콘 + 라벨 + │ ▢ 백테스트 │ + │ ▢ 데이터 관리 │ + ├─────────────────┤ + │ │ + │ (여백) │ + ├─────────────────┤ + │ 🌙/☀️ 테마 토글 │ ← 하단 고정 + │ 👤 사용자 메뉴 │ + └─────────────────┘ + ``` + +### 헤더 +- 페이지 제목 + 브레드크럼 + 액션 버튼 +- 예: `포트폴리오 > 삼성전자 포트폴리오` + `[리밸런싱]` 버튼 + +### 반응형 브레이크포인트 +- `< 768px`: 사이드바 숨김, 햄버거 메뉴 +- `768px ~ 1024px`: 사이드바 접힘 (아이콘만) +- `> 1024px`: 사이드바 전체 표시 + +--- + +## 페이지별 디자인 + +### 대시보드 (`/`) + +``` +┌─────────────────────────────────────────────────────┐ +│ 대시보드 [기간: 1M ▾] │ +├─────────────┬─────────────┬─────────────┬───────────┤ +│ 총 자산 │ 총 수익률 │ 오늘 손익 │ 포트폴리오 │ +│ ₩12,345,678 │ +15.2% ↑ │ +₩45,000 │ 3개 │ +│ 미니 차트 📈│ 미니 차트 📈 │ vs 어제 │ 1개 리밸런싱│ +├─────────────┴─────────────┴─────────────┴───────────┤ +│ │ +│ [자산 추이 차트 - Recharts Area Chart] │ +│ 6개월간 총 자산 변화 (다크모드 대응) │ +│ │ +├──────────────────────────┬──────────────────────────┤ +│ 포트폴리오 성과 비교 │ 섹터별 배분 │ +│ [Bar Chart] │ [Donut Chart] │ +│ 포트폴리오별 수익률 │ 기술주 40%, 금융 30%... │ +├──────────────────────────┴──────────────────────────┤ +│ 최근 활동 │ +│ • 삼성전자 매수 10주 - 2시간 전 │ +│ • 포트폴리오 A 리밸런싱 완료 - 어제 │ +└─────────────────────────────────────────────────────┘ +``` + +**주요 요소:** +- Sparkline 미니 차트가 포함된 요약 카드 +- 메인 자산 추이 차트 (Recharts AreaChart, 기간 필터) +- 포트폴리오 비교 BarChart +- 섹터 배분 DonutChart +- 최근 활동 피드 + +### 포트폴리오 목록 (`/portfolio`) + +``` +┌─────────────────────────────────────────────────────┐ +│ 포트폴리오 [+ 새 포트폴리오] │ +├─────────────────────────────────────────────────────┤ +│ ┌─────────────────┐ ┌─────────────────┐ │ +│ │ 성장주 포트폴리오 │ │ 배당주 포트폴리오 │ │ +│ │ ₩8,500,000 │ │ ₩3,200,000 │ │ +│ │ +12.5% ↑ │ │ +8.2% ↑ │ │ +│ │ [미니 파이차트] │ │ [미니 파이차트] │ │ +│ │ ─────────── │ │ ─────────── │ │ +│ │ 종목 5개 • MF │ │ 종목 8개 • VQ │ │ +│ │ ⚠️ 리밸런싱 필요 │ │ ✓ 정상 │ │ +│ └─────────────────┘ └─────────────────┘ │ +└─────────────────────────────────────────────────────┘ +``` + +**주요 요소:** +- 카드에 미니 파이차트로 종목 비중 미리보기 +- 상태 배지: 리밸런싱 필요 여부 표시 +- 전략 태그 표시 (MF: Multi-Factor, VQ: Value-Quality 등) + +### 포트폴리오 상세 (`/portfolio/[id]`) + +``` +┌─────────────────────────────────────────────────────┐ +│ ← 성장주 포트폴리오 [편집] [리밸런싱] │ +├───────────────────────┬─────────────────────────────┤ +│ 총 평가액 ₩8,500,000 │ [TradingView 차트] │ +│ 투자원금 ₩7,500,000 │ 포트폴리오 가치 추이 │ +│ 총 수익 +₩1,000,000 │ 벤치마크(KOSPI) 비교 │ +│ 수익률 +13.3% │ │ +├───────────────────────┴─────────────────────────────┤ +│ [Tabs: 보유종목 | 거래내역 | 분석] │ +├─────────────────────────────────────────────────────┤ +│ 종목명 수량 평균단가 현재가 수익률 비중 │ +│ ─────────────────────────────────────────────────── │ +│ 삼성전자 10 ₩70,000 ₩75,000 +7.1% 35% ██▌ │ +│ SK하이닉스 5 ₩120,000 ₩135,000 +12.5% 28% ██ │ +│ ... │ +└─────────────────────────────────────────────────────┘ +``` + +**주요 요소:** +- TradingView 차트로 시계열 데이터 시각화 +- 탭으로 정보 구분 (보유종목 / 거래내역 / 분석) +- 테이블에 비중 바 차트 인라인 표시 + +### 전략 페이지 (`/strategy`) + +``` +┌─────────────────────────────────────────────────────┐ +│ 퀀트 전략 │ +├─────────────────────────────────────────────────────┤ +│ ┌─────────────────────────────────────────────────┐ │ +│ │ 📊 멀티팩터 전략 [적용] │ │ +│ │ 가치, 모멘텀, 퀄리티 팩터 조합 │ │ +│ │ ───────────────────────────────────────────── │ │ +│ │ 기대 CAGR: 12~18% | 리스크: 중간 | 종목: 20개│ │ +│ │ [팩터 가중치 슬라이더 미리보기] │ │ +│ └─────────────────────────────────────────────────┘ │ +│ ┌─────────────────────────────────────────────────┐ │ +│ │ 💎 슈퍼 퀄리티 전략 [적용] │ │ +│ │ ROE, 이익 성장률 기반 우량주 선별 │ │ +│ │ ... │ │ +└─────────────────────────────────────────────────────┘ +``` + +**주요 요소:** +- 전략 카드에 핵심 지표 요약 +- 바로 적용 가능한 CTA 버튼 + +### 백테스트 페이지 (`/backtest`) + +``` +┌─────────────────────────────────────────────────────┐ +│ 백테스트 │ +├──────────────────────────┬──────────────────────────┤ +│ 설정 │ 결과 │ +│ ┌──────────────────────┐ │ │ +│ │ 전략: [멀티팩터 ▾] │ │ (백테스트 실행 전) │ +│ │ 기간: 2020.01~2024.12│ │ │ +│ │ 초기자금: ₩10,000,000│ │ 전략을 선택하고 │ +│ │ 리밸런싱: [월간 ▾] │ │ 백테스트를 실행하세요 │ +│ │ │ │ │ +│ │ [▶ 백테스트 실행] │ │ │ +│ └──────────────────────┘ │ │ +├──────────────────────────┴──────────────────────────┤ +│ (실행 후) │ +│ ┌─────────┬─────────┬─────────┬─────────┐ │ +│ │ CAGR │ MDD │ 샤프비율 │ 총수익률 │ │ +│ │ 15.2% │ -18.5% │ 1.24 │ +89.3% │ │ +│ └─────────┴─────────┴─────────┴─────────┘ │ +│ [Recharts - 수익률 곡선 vs KOSPI 벤치마크] │ +│ [연도별 수익률 Bar Chart] │ +│ [Drawdown 차트] │ +└─────────────────────────────────────────────────────┘ +``` + +**주요 요소:** +- 좌우 분할 레이아웃 (설정 | 결과) +- 핵심 성과 지표 카드 +- 3가지 차트: 수익률 곡선, 연도별 수익, 드로다운 + +--- + +## 구현 단계 + +### Phase 1: 기반 작업 +1. shadcn/ui 설치 및 설정 +2. next-themes 다크모드 설정 +3. Lucide Icons 설치 +4. 디자인 토큰 (색상, 타이포그래피) 정의 + +### Phase 2: 레이아웃 컴포넌트 +1. 새로운 Sidebar (접힘, 테마 토글, 사용자 메뉴) +2. 새로운 Header (브레드크럼, 액션 버튼) +3. 모바일 반응형 Sheet 메뉴 + +### Phase 3: 대시보드 +1. 요약 카드 + Sparkline +2. 자산 추이 AreaChart +3. 포트폴리오 비교 BarChart +4. 섹터 배분 DonutChart + +### Phase 4: 포트폴리오 페이지 +1. 카드형 목록 뷰 +2. 상세 페이지 + TradingView 차트 +3. 보유종목 테이블 개선 + +### Phase 5: 전략 & 백테스트 +1. 전략 카드 리디자인 +2. 백테스트 분할 레이아웃 +3. 성과 차트 (수익률, 드로다운) + +### Phase 6: 마무리 +1. 로그인 페이지 스타일링 +2. 로딩 스켈레톤, 토스트 알림 +3. 전체 QA 및 반응형 테스트