[DESIGN] 폴더 화면 UI 개편

[kbh0218]

Closes #81

개요

폴더 화면의 폴더 카드 UI를 Figma 디자인 방향에 맞춰 개편했습니다.

기존 폴더 카드는 그라데이션 배경을 사용하는 단일 카드 형태였지만, 이번 작업에서는 폴더의 형태가 더 직접적으로 드러나도록 상단 탭과 카드 body가 분리된 구조로 변경했습니다.

또한 작은 화면에서 카드가 과하게 크게 보이지 않도록 카드 폭 기준 compact 스타일을 적용했습니다. PR #65에서 적용했던 폴더 화면의 반응형 카드 폭 계산 흐름은 유지하면서, 새 폴더 카드 UI 내부의 높이, padding, 폰트 크기, 메뉴 아이콘 크기가 좁은 화면에서 자연스럽게 줄어들도록 보완했습니다.

폴더 카드를 길게 눌렀을 때 뒤에 가려진 탭 영역이 비쳐 보이지 않도록 눌림 효과도 opacity 방식에서 scale 방식으로 변경했습니다.

마지막으로 폴더 카드의 색상과 치수 값을 컴포넌트 내부에 직접 하드코딩하지 않고, constants/theme.ts의 토큰으로 분리해 관리하도록 정리했습니다.

주요 구현 내용

• 폴더 카드를 상단 tab + body 형태의 UI로 변경
• FolderCard에 icon, variant, disabled 기반 표시 옵션 추가
• 폴더 카드 더보기 버튼과 카드 눌림 동작 유지
• 카드 눌림 효과를 opacity에서 scale 방식으로 변경
• 작은 화면에서 폴더 카드 높이, padding, 탭 너비, 메뉴 아이콘, 폴더명 typography를 compact하게 조정
• 폴더 카드 body 색상을 Colors.brand.folderCard.body 토큰으로 분리
• 폴더 카드 치수, 간격, radius, 눌림 scale 값을 ComponentTokens.folderCard로 분리
• 컴포넌트 내부 hex/rgba 색상 하드코딩 제거

파일별 역할

• components/ui/folder-card.tsx: 폴더 카드 UI 구조 개편, compact 크기 대응, 눌림 효과 보정, 디자인 토큰 참조 적용
• constants/theme.ts: 폴더 카드 body 색상 및 카드 치수/간격 관련 component token 추가

해결한 이슈 목록

• 기존 폴더 카드 UI를 Figma 방향에 맞춰 폴더 형태의 카드로 개편
• 폴더 카드 상단 tab과 body가 자연스럽게 맞물리도록 조정
• 폴더 카드를 길게 눌렀을 때 뒤쪽 탭 영역이 비쳐 보이지 않도록 수정
• 작은 화면에서 폴더 카드가 과하게 크게 보이지 않도록 compact 크기 적용
• 폴더명, URL 개수, 더보기 아이콘 표시 흐름 유지
• 폴더 카드 클릭 및 더보기 메뉴 anchor 측정 흐름 유지
• 폴더 카드 색상과 치수 값을 theme.ts 토큰으로 분리
• 컴포넌트 내부 색상 하드코딩 없이 Colors.brand.* 참조 사용

체크 사항

• 커밋/코딩 컨벤션에 맞게 작성
• 기존 폴더 목록/상세 이동 흐름 유지
• 기존 폴더명 수정/삭제 메뉴 흐름 유지

참고사항

• PR #65에서 적용된 폴더 화면의 카드 폭 반응형 계산 흐름을 유지했습니다.
• 이번 PR에서는 폴더 카드 컴포넌트와 관련 디자인 토큰만 수정했습니다.
• 폴더 생성, 수정, 삭제 API 흐름은 변경하지 않았습니다.
• 실제 기기에서 최종 색상과 카드 크기 확인 후 필요하면 추가 미세 조정이 필요할 수 있습니다.

Screenshots or Video

• 수정한 폴더 캡쳐입니다.

• 작은 화면에서 폴더 캡쳐입니다.

[minsoo0506]

넵 확인해습니다! 고생 많으셨습니다 :)