# 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 및 반응형 테스트