51 lines
3.2 KiB
Markdown
51 lines
3.2 KiB
Markdown
|
[계획 문서 경로]
|
||
|
|
- common-docs/improvement/plans/dev-plan-2026-03-04-dashboard-modern-brand-layout-refresh.md
|
||
|
|
|
||
|
|
[요구사항 요약]
|
||
|
|
- /dashboard를 모던하고 현대적인 느낌으로 재배치한다.
|
||
|
|
- 브랜드 컬러(brand 토큰)를 적극 활용해 UI 일관성을 높인다.
|
||
|
|
- 핵심 정보를 한눈에 확인할 수 있도록 정보 우선순위를 재정렬한다.
|
||
|
|
|
||
|
|
[가정]
|
||
|
|
- 기존 정보 구조(시장 탭/내 자산 탭, API/데이터 모델)는 유지하고 UI/레이아웃 중심으로 개선한다.
|
||
|
|
- 기존 브랜드 토큰(--brand-*)을 재사용해 전체 앱 디자인 언어와 일관성을 맞춘다.
|
||
|
|
|
||
|
|
[영향 범위]
|
||
|
|
- 수정:
|
||
|
|
- features/dashboard/components/DashboardContainer.tsx
|
||
|
|
- features/dashboard/components/StatusHeader.tsx
|
||
|
|
- features/dashboard/components/MarketSummary.tsx
|
||
|
|
- features/dashboard/components/MarketHubSection.tsx
|
||
|
|
- features/dashboard/components/HoldingsList.tsx
|
||
|
|
- features/dashboard/components/StockDetailPreview.tsx
|
||
|
|
- features/dashboard/components/ActivitySection.tsx
|
||
|
|
|
||
|
|
[구현 단계]
|
||
|
|
- [x] 1. 대시보드 컨테이너 재배치: 상단 브랜드 히어로/상태 칩 추가, 탭 인터랙션 스타일 강화, 탭별 레이아웃 재정렬.
|
||
|
|
- [x] 2. 자산 헤더 리디자인: 총자산/손익 중심 카드 + 연결 상태/액션 패널 + 핵심 지표 4분할 구성.
|
||
|
|
- [x] 3. 시장 지수 카드 리디자인: 실시간 상태 배지, 지수 카드 시각 톤 강화, 카드 대비 개선.
|
||
|
|
- [x] 4. 시장 허브 리디자인: 급등/급락/인기/거래대금 2x2 구성 및 뉴스 가독성 개선.
|
||
|
|
- [x] 5. 자산 하위 카드 톤 정렬: 보유종목/선택종목/활동내역 카드 스타일 일관화 및 탭 버튼 강조.
|
||
|
|
- [x] 6. 사후 버그 수정: 시장 지수 배지의 실시간 상태 판정을 상단 상태칩과 동일 기준으로 통일.
|
||
|
|
- [x] 7. 사후 버그 수정: Next.js `scroll-behavior` 경고 제거를 위한 루트 html 속성 보완.
|
||
|
|
|
||
|
|
[리스크/회귀 포인트]
|
||
|
|
- 카드 높이/스크롤 높이 조정으로 모바일에서 콘텐츠 길이 체감이 달라질 수 있다.
|
||
|
|
- 탭 스타일 커스터마이징이 다크 모드 대비에 영향을 줄 수 있다.
|
||
|
|
|
||
|
|
[검증 계획]
|
||
|
|
- [x] 1. lint: `npm run lint` 통과.
|
||
|
|
- [x] 2. build: `npm run build` 통과.
|
||
|
|
- [x] 3. 런타임: 로그인 상태에서 /dashboard 시각적 배치/반응형 확인. (Playwright로 데스크톱/모바일, 탭 전환, 메인 왕복 동선 확인)
|
||
|
|
- [x] 4. 런타임: 브라우저 콘솔 경고/오류 확인. (`warning`/`error` 비어있음)
|
||
|
|
- [x] 5. 런타임: API 네트워크 응답 확인. (`/api/kis/domestic/indices`, `/api/kis/domestic/market-hub`, `/api/kis/ws/approval` 모두 200)
|
||
|
|
|
||
|
|
[진행 로그]
|
||
|
|
- 2026-03-04: 대시보드 모던 UI 재배치 구현 완료.
|
||
|
|
- 2026-03-04: `npm run lint` 통과.
|
||
|
|
- 2026-03-04: `npm run build` 통과.
|
||
|
|
- 2026-03-04: Playwright로 `/dashboard` 접근 시 `/login` 리다이렉트 동작 및 모바일 뷰포트(390x844) 렌더링 확인.
|
||
|
|
- 2026-03-04: 시장 지수 배지 상태 문구 불일치(실시간 미연결 vs 수신중) 수정.
|
||
|
|
- 2026-03-04: `app/layout.tsx`에 `data-scroll-behavior=\"smooth\"` 추가로 Next 경고 제거.
|
||
|
|
- 2026-03-04: Playwright 재검증(데스크톱/모바일, 로고->메인, 메인->대시보드, 자산 탭 전환) 완료.
|