🚀[기능개선][홈] 홈 피드 UI 씀(Sseum) 스타일 리디자인

[Cassiiopeia]

📝 현재 문제점

• 현재 홈 화면이 다크 테마(검정 배경)로 되어 있어 앱의 전체적인 톤과 맞지 않음
• 최신 장소와 인기 장소가 하나의 스크롤에 섹션으로 나뉘어 있어 탐색이 불편함
• 카드 디자인이 라운드 스타일로 깔끔한 느낌이 부족함

🛠️ 해결 방안 / 제안 기능

• 씀(Sseum) 앱의 미니멀 디자인 컨셉을 차용하여 홈 피드 전면 리디자인
• 다크 테마 → 라이트 모노톤(화이트 배경 + 블랙/그레이 텍스트) 전환
• 2섹션 스크롤 → TabBar(최신순/인기순) 탭 전환 구조로 변경
• 카드 스타일: 직각 보더(radius 0) + 얇은 보더(#E5E5E5) + 넓은 여백(20px)
• 태그: pill shape 적용
• 상태 위젯(로딩/빈/에러) 미니멀화

⚙️ 작업 내용

• HomeColors 컬러 팔레트를 라이트 모노톤으로 전면 교체
• PlaceCard 위젯을 씀 스타일로 수정 (직각, 3:2 이미지 비율, 넓은 여백)
• 로딩 스켈레톤을 직각 카드 형태로 단순화
• 빈 상태 위젯 아이콘 축소, 에러 위젯 아이콘 제거 (텍스트 중심)
• HomePage를 TabBar + TabBarView 탭 전환 구조로 재작성
• PopularPlaceTile 삭제 (PlaceCard로 통합)

🙋‍♂️ 담당자

• 백엔드: 이름
• 프론트엔드: @Cassiiopeia
• 디자인: 이름

[Cassiiopeia]

Guide by SUH-LAB

브랜치

20260223_#36_홈_피드_UI_씀_Sseum_스타일_리디자인

커밋 메시지

홈 피드 UI 씀(Sseum) 스타일 리디자인 : feat : {변경 사항에 대한 설명} https://github.com/MapSee-Lab/MapSy-FE/issues/36

[Cassiiopeia]

📌 작업 개요

홈 피드 화면을 씀(Sseum) 앱의 미니멀 디자인 컨셉으로 전면 리디자인. 다크 테마(검정 배경)에서 라이트 모노톤(화이트 배경 + 블랙/그레이)으로 전환하고, 2섹션 스크롤 구조를 TabBar 탭 전환 구조로 변경.

이슈: #36 홈 피드 UI 씀(Sseum) 스타일 리디자인

---

🎯 구현 목표

• 씀 앱의 "빈 공간이 곧 디자인" 미니멀 철학 적용
• 흑백 모노톤 컬러 팔레트로 전면 교체 (채도 있는 색상 미사용)
• 홈 화면 구조를 탭 전환 방식으로 개선하여 탐색 편의성 향상
• 카드/태그/상태 위젯을 씀 스타일에 맞게 미니멀화

---

✅ 구현 내용

1. HomeColors 컬러 팔레트 전면 교체

• 파일: lib/common/constants/home_colors.dart
• 변경 내용: 전체 16개 컬러 값을 다크 → 라이트 모노톤으로 변경
• 이유: 씀 앱의 화이트 기반 미니멀 디자인 적용

컬러	변경 전 (다크)	변경 후 (라이트)
background	#000000 (검정)	#FFFFFF (화이트)
textPrimary	#FFFFFF (화이트)	#1A1A1A (거의 블랙)
cardBackground	#1A1A1A	#FFFFFF
tagBackground	#2A2A2A	#F5F5F5
shimmerBase	#1A1A1A	#F5F5F5
error	#FF4D4D	#D32F2F (차분한 톤)
retryButton	#4A90E2 (파랑)	#1A1A1A (블랙)

• cardOverlayStart, cardOverlayEnd 삭제 (그라데이션 오버레이 미사용)
• border 삭제, cardBorder(#E5E5E5) 신규 추가

2. HomePage 탭 전환 구조로 재작성

• 파일: lib/features/home/presentation/pages/home_page.dart
• 변경 내용: CustomScrollView 2섹션(최신 SliverList + 인기 SliverGrid) 구조를 TabBar + TabBarView 탭 전환 구조로 전면 재작성
• 이유: 최신순/인기순을 탭으로 분리하여 탐색 편의성 향상

주요 변경:

• SingleTickerProviderStateMixin 추가하여 TabController 지원
• AppBar에 TabBar 배치 (최신순/인기순 2탭)
• 활성 탭: #1A1A1A + 2px 하단 인디케이터 / 비활성: #AAAAAA
• elevation: 0, scrolledUnderElevation: 0 적용 (씀 스타일 플랫 AppBar)
• 각 탭에 독립적인 RefreshIndicator + ListView.builder 구성
• 최신순 탭에만 무한 스크롤(200px 도달 시 추가 로드) 유지
• PopularPlaceTile import 제거 → 인기순 탭도 PlaceCard 사용

3. PlaceCard 씀 스타일 적용

• 파일: lib/features/home/presentation/widgets/place_card.dart
• 변경 내용: 카드 디자인을 씀 앱 스타일로 전면 수정
• 이유: 직각 보더 + 넓은 여백으로 미니멀한 느낌 강조

주요 변경:

• borderRadius: 12.r → 제거 (직각, radius 0)
• border: Border.all(color: HomeColors.cardBorder) 추가 (얇은 보더)
• margin 좌우 16 → 20 (넓은 여백)
• 이미지 비율 16:9 → 3:2
• 정보 영역 패딩 all(12) → horizontal(20), vertical(16)
• 태그 borderRadius: 4.r → 100.r (pill shape)
• placeholder 배경 surface → surfaceLight

4. 로딩 스켈레톤 미니멀화

• 파일: lib/features/home/presentation/widgets/home_loading_shimmer.dart
• 변경 내용: 직각 카드 스켈레톤 3개만 표시하도록 단순화
• 이유: 탭 구조 전환으로 그리드 스켈레톤 불필요, 씀 스타일에 맞게 최소화

주요 변경:

• _buildSectionTitleShimmer(), _buildGridShimmer() 제거
• 카드 스켈레톤: 직각 보더, 3:2 비율 이미지 영역, 넓은 패딩

5. 빈 상태 위젯 미니멀화

• 파일: lib/features/home/presentation/widgets/home_empty_state.dart
• 변경 내용: 아이콘 축소 및 컬러 조정
• 이유: 씀 스타일의 절제된 빈 화면 표현

주요 변경:

• 아이콘 Icons.explore_off_outlined → Icons.explore_outlined
• 아이콘 크기 64sp → 48sp
• 아이콘 색상 iconSecondary → textDisabled
• 텍스트 크기 15sp → 14sp

6. 에러 상태 위젯 텍스트 중심으로 변경

• 파일: lib/features/home/presentation/widgets/home_error_state.dart
• 변경 내용: 에러 아이콘 제거, 텍스트+언더라인 재시도 버튼으로 변경
• 이유: 씀 앱의 텍스트 중심 미니멀 디자인 적용

주요 변경:

• Icons.error_outline 아이콘 완전 제거
• 기본 메시지 '데이터를 불러올 수 없습니다' → '불러오기에 실패했습니다'
• 재시도: TextButton → GestureDetector + TextDecoration.underline

7. PopularPlaceTile 삭제

• 파일: lib/features/home/presentation/widgets/popular_place_tile.dart
• 변경 내용: 파일 삭제
• 이유: 탭 전환 구조에서 인기순도 PlaceCard를 사용하므로 별도 위젯 불필요

---

🔧 주요 변경사항 상세

컬러 시스템 전환

기존 블랙 모노톤(다크 테마) 팔레트를 화이트 모노톤(라이트 테마)으로 완전 교체. 채도 있는 색상을 일절 사용하지 않고 흑-회-백 그라데이션만으로 전체 UI를 구성. 씀 앱의 "빈 공간이 곧 디자인" 철학을 반영.

레이아웃 구조 변경

기존 CustomScrollView 내부에 최신 장소(SliverList) + 인기 장소(3열 SliverGrid)를 세로로 나열하던 구조에서, AppBar.bottom에 TabBar를 배치하고 TabBarView로 탭 전환하는 구조로 변경. 각 탭은 독립적인 ListView.builder를 사용하며 동일한 PlaceCard 위젯으로 통일.

특이사항:

• data 레이어(models, datasource, repository, provider 로직)는 변경 없음 - UI/컬러만 변경
• PopularPlaceTile 삭제로 위젯 수 감소 (코드 단순화)
• 무한 스크롤은 최신순 탭에만 적용 (기존과 동일)

---

📦 의존성 변경

• 없음 (기존 라이브러리만 사용)

---

🧪 테스트 및 검증

• dart format 적용 완료 (3개 파일 포맷팅)
• data 레이어 미변경으로 API 호출 로직 영향 없음
• flutter pub run build_runner 실행 불필요 (provider/model 코드 미변경)

---

📌 참고사항

• 디자인 컨셉 참고: 씀(Sseum) 앱 - brunch.co.kr/@boldydesign/225
• 상세 디자인 문서: docs/plans/2026-02-23-home-feed-sseum-redesign.md
• build_runner 실행이 필요한 경우 별도 환경에서 실행 필요

[Cassiiopeia]

Stable 적용 완료