[Design] 전체 UI 다크 테마 리뉴얼 (머지 보류, 리뷰용) - #276
Conversation
기존 플랫한 라이트 티옇 톤을 Linear/Vercel류 다크 SaaS 톤으로 전면 교체. - tokens.css: neutral 다크 배경(surface-page/default/subtle) + 비비드 민트 accent + shadow 스케일 + radius 확장 - Button/Modal/Dropdown/ToastViewport/WorkItemRow/ListRow 등 공용 컴포넌트에 elevation·focus-ring 적용 - AppLayout: 사이드바 확장(208→224px), topBar를 shadow 기반으로, content 여백 확장 - DashboardPage: metricStrip을 dashboardGrid 최상단 전체폭으로 재배치(grid-template-areas), priorityApproval에 warning left-accent - WorkerList/WorkerDetail/WorkList/CaseDetail(+overlays)/DocumentList/DocumentDetail/Profile/TicketDetail/ReviewWork/OnboardingImport 카드 elevation 적용 - 하드코딩 hex 색상 전부 토큰화 Refs #272, #273, #274, #275
|
19:00~ 이후 다시 작업 해야함 |
다크 그라파이트 톤 대신 순백 배경 + 전기 블루 단일 액센트로 재작업. teal 브랜드 컬러 완전히 배제. - tokens.css: surface 전부 화이트/라이트그레이, accent를 #4361EE 블루로, radius 축소(6~8px, 각진 미니멀), 카드는 border 대신 shadow로만 구분 - 사이드바를 다크에서 라이트로 전환 + 아이콘 stroke 색상 재조정(라이트 배경에서 안 보이던 pale mint 아이콘 수정) - WorkerListPage: 목록 패널 폭 520px→340px로 좁혀 상세 영역에 더 넓은 비중 부여 Refs #272, #273, #274, #275
|
방향 피드백 받고 완전히 갈아엎음. 다크 그라파이트+민트 대신 화이트 배경 + 전기 블루(#4361EE) 단일 액센트, 각진 미니멀(6~8px radius), 테두리 없이 그림자로만 카드 구분 — Arc/Raycast 톤으로 재작업. teal 브랜드 컬러는 완전히 뺐음. 추가로 WorkerListPage 목록 패널 폭을 520px→340px로 좁혀서 상세 영역 비중을 키움 (구조 변경, Dashboard의 grid-template-areas 재배치에 이어 두 번째 구조 변경). 로컬 |
AppLayout은 모든 인증된 페이지가 공유하는 뼈대라서, 여기 하나를 바꾸면 전체 사이트의 구조적 인상이 동시에 바뀐다. 왼쪽 고정 사이드바(세로 메뉴)를 없애고 상단 바 안에 브랜드+가로 pill 탭 네비게이션을 넣는 구조로 재작성. - AppLayout.tsx: aside/사이드바 제거, nav를 topBar 내부로 이동 - AppLayout.module.css: 전체 재작성, 콘텐츠 영역이 항상 전체 폭 사용 - 활성 탭은 블루 solid pill + 아이콘 filter invert로 흰색 처리 Refs #272, #273
|
"사이트 구조 자체가 달라 보여야 한다" 피드백 반영 — 왼쪽 고정 사이드바를 완전히 없애고 상단 바 안에 pill 형태 가로 탭 네비게이션으로 뼈대를 갈아엎음. AppLayout은 모든 인증 페이지가 공유하는 셸이라, 이 변경 하나로 로그인 후 모든 화면이 동시에 새 구조로 바뀜.
tsc/lint/vitest(352/352)/build 전부 통과, |
brand-dark를 다크→라이트로 바꾸면서, 원래 다크 배경을 전제로 흰색/연한틸 글자색을 쓰던 곳들이 라이트 배경 위에서 안 보이게 됐음. - 로그인/회원가입/비밀번호 재설정류 6개 페이지의 프로모 패널: 앱 테마와 무관하게 항상 어두워야 하는 곳이라 새 --ink-panel-bg/text/text-secondary 토큰으로 분리 - ToastViewport: 같은 이유로 ink-panel 토큰 적용 - IntroPage·WorkListPage: color: var(--brand-dark)로 텍스트 색을 쓰던 13곳을 var(--text-primary)로 수정 (brand-dark는 이제 배경 전용 토큰) - IntroPage 버튼의 3D shadow도 brand-dark 대신 brand-primary-hover로 교체
|
글자 안 보이던 버그 수정함. tsc/lint/vitest(352/352)/build 통과, 브라우저로 로그인/인트로 페이지 재확인함. |
1 participant
왜
기존 디자인이 플랫하고 올드해 보인다는 피드백. Linear/Vercel/Stripe류 다크 SaaS 톤으로 전면 개편.
무엇이 바뀌나
src/styles/tokens.css가 전체 앱의 색상·radius·spacing 단일 소스라서, 토큰을 다크 테마로 교체하는 것만으로 54개 페이지 전체가 자동으로 새 톤을 상속받음. 여기에 더해:#2dd4bf)로 리프레시dashboardGrid최상단에 전체폭으로 배치(grid-template-areas사용), priorityApproval에 warning left-accent 추가#fff,#3976d3,#95cecb등) 전부 토큰화스코프 관련 투명하게
54개 페이지 전부를 개별적으로 새로 그린 건 아님. 토큰 교체로 전체 페이지가 색상·elevation을 자동 상속받고, 그 중 실제 트래픽이 많은 ~20개 화면은 카드 elevation·radius까지 개별적으로 다듬었음. 구조(DOM/그리드) 자체를 바꾼 건 Dashboard 하나 — 나머지 화면들의 구조 개편이 필요하면 후속 PR로 이어갈 예정.
검증
npx tsc -b✅npm run lint✅npx vitest run— 352/352 통과 ✅npm run build✅관련 이슈
Closes #273, Closes #274, Closes #275 (전부 #272의 서브이슈)