zephyrdark
f42f8a685a
Comprehensive redesign plan including: - shadcn/ui + Lucide Icons + Recharts + TradingView charts - Dark/light theme with system preference support - Collapsible sidebar with responsive breakpoints - Dashboard with charts and sparklines - Portfolio pages with TradingView integration - Strategy and backtest page improvements Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
13 KiB
13 KiB
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: 기반 작업
- shadcn/ui 설치 및 설정
- next-themes 다크모드 설정
- Lucide Icons 설치
- 디자인 토큰 (색상, 타이포그래피) 정의
Phase 2: 레이아웃 컴포넌트
- 새로운 Sidebar (접힘, 테마 토글, 사용자 메뉴)
- 새로운 Header (브레드크럼, 액션 버튼)
- 모바일 반응형 Sheet 메뉴
Phase 3: 대시보드
- 요약 카드 + Sparkline
- 자산 추이 AreaChart
- 포트폴리오 비교 BarChart
- 섹터 배분 DonutChart
Phase 4: 포트폴리오 페이지
- 카드형 목록 뷰
- 상세 페이지 + TradingView 차트
- 보유종목 테이블 개선
Phase 5: 전략 & 백테스트
- 전략 카드 리디자인
- 백테스트 분할 레이아웃
- 성과 차트 (수익률, 드로다운)
Phase 6: 마무리
- 로그인 페이지 스타일링
- 로딩 스켈레톤, 토스트 알림
- 전체 QA 및 반응형 테스트