Tailwind v4로 올리면서 디자인 시스템 클래스 정리하기
· 약 2분
CRM을 Next.js 16으로 올리는 브랜치에서 Tailwind도 v3에서 v4로 올렸다. 공식 업그레이드 도구 한 번에 295개 파일이 바뀌었고 빌드도 통과했다. 그런데 화면을 보니 조건부 색상 몇 군데가 의도와 다르게 나왔다.
화면 설계와 사용자 경험
모든 태그 보기CRM을 Next.js 16으로 올리는 브랜치에서 Tailwind도 v3에서 v4로 올렸다. 공식 업그레이드 도구 한 번에 295개 파일이 바뀌었고 빌드도 통과했다. 그런데 화면을 보니 조건부 색상 몇 군데가 의도와 다르게 나왔다.
새 랜딩 페이지에서 메인 페이지를 맡았다. 다른 페이지는 팀원들이 나눠 맡아 release 브랜치로 모으고 있다. 이번 주는 메인 섹션의 스크롤 애니메이션을 마무리하고 반응형 처리를 정리했다.
로그인하고 센터를 고르면 지금까지는 센터 정보 페이지로 들어갔다. 이번에 그 자리에 대시보드를 만들었다. 날짜별로 가입 고객, 이용 고객, 매출, 개인 레슨 현황을 한 화면에 모아 보여주는 페이지다.
어드민 작업이 일단락되고 피트니스 센터용 CRM 웹 개발로 넘어왔다. 마침 디자인 가이드가 나와서, 화면마다 색과 크기를 그때그때 넣던 방식을 버리고 가이드부터 코드로 옮긴 다음 화면을 그 위에 다시 쌓기로 했다.