[FEATURE] 공통 UI 컴포넌트 추가

[kbh0218]

Closes #3

개요

LinClean 앱의 주요 화면에서 공통으로 사용할 UI 컴포넌트 기반을 구성합니다. 버튼, 링크 카드, 폴더 카드, 필터 칩, 컨텍스트 메뉴, 토스트, 하단 탭바 등 홈/폴더/설정/스캔 화면에서 반복적으로 사용되는 요소를 컴포넌트화했습니다.

또한 공통 UI 컴포넌트가 사용하는 브랜드 컬러, 카카오 컬러, 타이포그래피 토큰을 constants/theme.ts에 함께 정리하여 이후 화면 구현 PR에서 동일한 디자인 기준을 재사용할 수 있도록 했습니다.

주요 구현 내용

• 공통 버튼, 아이콘 버튼, 스캔 버튼 컴포넌트 추가
• 링크/폴더 카드 및 컨텍스트 메뉴 컴포넌트 추가
• 북마크 칩, 필터 칩, 섹션 헤더, 토스트 UI 추가
• 폴더 탭 아이콘 이미지 에셋 추가

파일별 역할

• components/ui/button.tsx: 앱 전반에서 사용하는 기본 버튼 컴포넌트
• components/ui/action-icon-button.tsx, app-icon.tsx, scan-button.tsx: 아이콘 기반 액션 버튼
• components/ui/card-link.tsx, swipeable-card-link.tsx: 저장 링크 카드 및 스와이프 삭제 UI
• components/ui/folder-card.tsx, folder-icon.tsx, add-folder-button.tsx: 폴더 목록/추가 UI
• components/ui/folder-context-menu.tsx: 링크/폴더 더보기 메뉴
• components/ui/filter-chip.tsx, bookmark-chip.tsx: 필터 및 북마크 상태 UI
• components/ui/bottom-tab-bar.tsx: 커스텀 하단 탭바
• components/ui/result-status-icon.tsx, check-icon.tsx, kakao-icon.tsx: 상태/브랜드 아이콘
• components/ui/section-header.tsx, toast.tsx: 섹션 제목 및 피드백 메시지
• assets/images/folder_active.png, folder_unactive.png: 폴더 탭 아이콘 에셋

해결한 이슈 목록

• 새로운 기능 추가: 앱 전반에서 재사용할 공통 UI 컴포넌트 추가
• CSS 등 사용자 UI 디자인 변경: Figma 기반 브랜드 컬러/타이포그래피 토큰 적용
• 코드 리팩토링: 반복될 UI 요소를 컴포넌트 단위로 분리
• 버그 수정: 공통 UI 컴포넌트가 참조하는 Colors.brand, Colors.kakao, Typography 타입 누락 문제 해결

체크 사항

• 커밋/코딩 컨벤션에 맞게 작성
• 변경 사항에 대한 테스트

Screenshots or Video

위 이미지는 제작한 아이콘과 컴포넌트를 보여주기 위해 만든 디자인시스템 페이지입니다. explore에 임시로 만든 후, 캡쳐했습니다.

[minsoo0506]

수고하셨습니다:) 공통 UI 컴포넌트 분리와 디자인 토큰 정리는 좋지만, 현재 상태로는 새 컴포넌트 사용 시 빌드/렌더링 문제가 발생할 수 있어서 다음 사항들을 머지 전에 확인해보시면 좋을 것 같습니다!

• expo-linear-gradient 의존성을 package.json/lockfile에 추가
• 새 컴포넌트들이 사용하는 모든 아이콘 이름을 IconSymbol 매핑에 반영하거나 직접 vector-icons 사용으로 정리

[minsoo0506]

역시 스크린샷이 있으니 PR 리뷰가 수월한 것 같습니다 👍

[minsoo0506]

확인 후 댓글 남겨주시면 Approve 하겠습니다!

[kbh0218]

좋은 지적 감사합니다!
확인해보니 말씀하신 두 부분 모두 실제로 문제가 될 수 있어서 반영했습니다.

• folder-card.tsx에서 사용하는 expo-linear-gradient를 package.json/package-lock.json에 추가했습니다.
• 새 공통 UI 컴포넌트들이 사용하는 SF Symbol 이름들을 IconSymbol의 Android/web fallback 매핑에 추가했습니다.
• AppIcon의 more 아이콘은 expo-symbols 타입에 없는 ellipsis.vertical 대신 ellipsis로 변경했고, IconSymbolName 타입을 export해서 앞으로 매핑되지 않은 아이콘 이름이 타입 단계에서 드러나도록 정리했습니다.

검증은 npx tsc --noEmit, npm run lint로 확인했습니다.

[minsoo0506]

확인했습니다! 이전에 말씀드린 expo-linear-gradient 의존성 추가와 IconSymbol 매핑 정리가 모두 반영된 것 확인했습니다. 타입으로 매핑 누락을 잡을 수 있게 정리해주신 부분도 좋습니다. tsc/lint 검증까지 확인해주셔서 Approve 하겠습니다!