Skip to content

feat: 대시보드·분석 상세뷰 UI 리프레시 + 레이아웃 폭 결함 수정#29

Merged
trz-21 merged 2 commits into
mainfrom
feature/issue-28-ui-refresh-dashboard-detail
Jun 15, 2026
Merged

feat: 대시보드·분석 상세뷰 UI 리프레시 + 레이아웃 폭 결함 수정#29
trz-21 merged 2 commits into
mainfrom
feature/issue-28-ui-refresh-dashboard-detail

Conversation

@trz-21

@trz-21 trz-21 commented Jun 15, 2026

Copy link
Copy Markdown
Collaborator

Closes #28

작업 요약

서비스 핵심 화면인 대시보드와 분석 상세뷰의 시각 디자인을 네이비/블루 브랜드 위에 깊이·위계·색상 액센트로 개선했다. 라이브 화면 리뷰 중 발견한 레이아웃 폭 깨짐 결함(Tailwind content glob에 ./src/** 누락)과 긴 URL 가로 오버플로도 함께 수정했다.

변경 내용

디자인 리프레시 (1차)

  • 대시보드: 입력 영역을 brand 그라데이션 히어로(rounded-2xl)로, AnalysisCard 상태 dot·아이콘·호버 리프트, EmptyState 아이콘, 헤더 sticky + backdrop-blur
  • 분석 상세: 결과 헤더 스탯 타일 히어로, InsightReport 섹션별 액센트 색·아이콘(TOP3=블루/약점=앰버/구매요인=에메랄드/불만·긍정=red·green), 심각도 한글화(높음/보통/낮음), AnalysisProgress 폴리시

결함 수정 (2차, 스크린샷 리뷰 기반)

  • tailwind.config: content 글롭에 ./src/** 누락 → Containermax-w-5xl 등 src 전용 클래스가 purge되어 본문이 전폭으로 펼쳐지고 헤더가 잘림. ./src/** 추가로 max-w-5xl·min-w-0·액센트 보더 등 정상 생성 (생성 CSS에 64rem 확인)
  • AnalysisCard: 긴 쿠팡 URL이 truncate 안 돼 가로 오버플로 → Link·내부 flex에 min-w-0, 날짜 shrink-0 whitespace-nowrap
  • UrlInput: 줄바꿈되던 "삭 제" → ✕ 아이콘 버튼, URL 추가 + 아이콘, 리뷰수 select 폭 제한(sm:w-48), 제출 w-full sm:w-auto, 간격 정돈
  • ResultHeader: 스탯 3열 그리드로 위계 정리 / InsightReport: 긴 텍스트 break-words·min-w-0 / AnalysisProgress: 반응형 패딩

검증

  • npm run type-check 통과
  • npm test -- --run 전체 통과 (21 파일 / 76 테스트)
  • 생성 CSS에 64rem(max-w-5xl)·min-width:0·text-overflow 존재, /dashboard HTTP 200
  • 기존 테스트가 검증하는 텍스트/aria-label 전부 보존

주요 결정과 이유

  • 공유 프리미티브(Button/Card/Badge)·globals.css 미변경 — 타 페이지 회귀 방지, 컴포넌트 내 className/styled div로만 작업. 단 tailwind.config의 content glob은 누락된 경로를 채우는 버그 수정이라 예외적으로 변경(클래스 생성만 추가 → 안전).
  • 신규 의존성 0 — 아이콘 전부 인라인 SVG.
  • 2개 표면 병렬 작업 — 파일 겹침 없이 대시보드/상세를 분리.

Wiki 반영 예정

  • Frontend 페이지: Design System 섹션에 대시보드/상세 UI 현황, Tailwind content glob에 src 포함 명시

trz-21 and others added 2 commits June 16, 2026 06:29
대시보드와 분석 상세뷰의 시각 디자인을 네이비/블루 브랜드 위에 깊이·위계·
색상 액센트로 개선. 공유 프리미티브/tailwind.config/globals.css 미변경,
신규 의존성 없이 인라인 SVG만 사용. 기존 테스트 텍스트/동작 전부 보존.

- 대시보드: 입력 영역을 brand 그라데이션 히어로(rounded-2xl)로, AnalysisCard
  상태 dot·아이콘·호버 리프트, EmptyState 아이콘, 헤더 sticky+backdrop-blur
- 분석 상세: 결과 헤더 스탯 타일 히어로, InsightReport 섹션별 액센트 색·아이콘
  (TOP3=블루/약점=앰버/구매요인=에메랄드/불만·긍정=red·green), 심각도 한글화
  (높음/보통/낮음), AnalysisProgress 폴리시

Refs #28

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
스크린샷 리뷰에서 발견한 실제 결함 수정.

- tailwind.config: content glob에 ./src/** 누락 → Container의 max-w-5xl 등
  src 전용 클래스가 purge되어 본문이 전폭으로 펼쳐지고 헤더가 잘림.
  ./src/** 추가로 max-w-5xl·min-w-0·액센트 보더 등 전부 정상 생성
- AnalysisCard: 긴 쿠팡 URL이 truncate 안 돼 가로 오버플로 → Link·내부
  flex에 min-w-0, 날짜 shrink-0 whitespace-nowrap로 잘림 처리
- UrlInput: 삭제 버튼 줄바꿈("삭 제") → ✕ 아이콘 버튼, URL 추가 + 아이콘,
  리뷰수 select 폭 제한(sm:w-48), 제출 w-full sm:w-auto, 간격 정돈
- dashboard: 히어로 inner 카드 패딩·그리드 min-w-0 정돈
- 분석 상세: ResultHeader 스탯 3열 그리드로 위계 정리, InsightReport
  긴 텍스트 break-words/min-w-0, AnalysisProgress 패딩 반응형

검증: type-check 통과, 테스트 76/76 통과, 생성 CSS에 64rem 확인
Refs #28

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

대시보드·분석 상세뷰 디자인 개선 (UI 리프레시)

1 participant