[Feat]: 메인 화면 UI 구현

[unib35]

🔮 작업 요약

Figma 디자인을 기반으로 메인 화면을 TCA 패턴으로 구현하고, 로그인 → 메인 화면 네비게이션을 연결했습니다.

🖥️ 상세 작업 내용

AppFeature (루트 상태 관리)

• 앱 레벨 상태 관리 (isLoggedIn)
• LoginFeature, MainFeature 통합
• 로그인 성공 시 메인 화면 전환

MainFeature (TCA Reducer)

• State, Action, Reducer 정의
• 모델 정의: RelayList, ChartSong, Artist, Playlist, YouTubeVideo, Banner
• MainClient Dependency 및 Mock 데이터 구현
• 타이머 기반 릴레이리스트 카운트다운 로직

MainView (UI)

• 릴레이리스트 섹션: 페이지 스와이프 + 인디케이터, 첫 곡 정보, 타이머/완성 상태
• 위플리 TOP 100: 차트 목록 (순위, 앨범아트, 제목, 아티스트)
• 배너 섹션: 가로 스크롤 배너
• 위플리 인기 랭킹: 아티스트 프로필 가로 스크롤
• 위플리 추천 플레이리스트: 플레이리스트 가로 스크롤
• 테마별 플레이리스트: 플레이리스트 가로 스크롤
• YouTube Music: 영상 썸네일 가로 스크롤
• 상단 앱바: 로고, 검색, 알림 버튼
• 상단 safe area 확장: 콘텐츠가 상단 safe area까지 자연스럽게 이어지도록 개선

코드 리팩토링

• Models 분리: MainModels.swift로 모델 타입 추출
• Client 분리: MainClient.swift로 Dependency 추출
• MockData 분리: MainMockData.swift로 목데이터 추출
• Components 분리: 섹션별 뷰 컴포넌트 파일로 분리
  • MainAppBar.swift, RelayListSection.swift, ChartSection.swift
  • BannerSection.swift, ArtistRankingSection.swift
  • PlaylistSection.swift, YouTubeSection.swift
• Extensions 분리: Color+Hex.swift로 공용 확장 추출

📁 파일 구조

Features/Main/
├── MainFeature.swift      # TCA Reducer
├── MainView.swift         # 메인 뷰 조합
├── Models/
│   └── MainModels.swift   # 모델 정의
├── Client/
│   ├── MainClient.swift   # Dependency
│   └── MainMockData.swift # Mock 데이터
└── Components/
    ├── MainAppBar.swift
    ├── RelayListSection.swift
    ├── ChartSection.swift
    ├── BannerSection.swift
    ├── ArtistRankingSection.swift
    ├── PlaylistSection.swift
    └── YouTubeSection.swift

📸 참고 디자인

• Figma: 메인(Main)
• 릴레이리스트 완성 상태: 남은 시간이 0인 경우

📌 이슈 및 특이사항

• 임시 구현: 소셜 로그인 버튼 클릭 시 바로 메인 화면으로 이동 (실제 로그인 로직 미구현)
• 이미지: 현재 플레이스홀더(그라디언트) 사용
• WithPerceptionTracking 패턴 사용 (TCA + SwiftUI 호환)

🚀 관련 이슈

• [Feat]: 실제 Apple/Google 소셜 로그인 연동 #14 실제 Apple/Google 소셜 로그인 연동
• [Feat]: 로그인 화면 앨범 캐러셀에 실제 앨범아트 이미지 적용 #9 실제 앨범아트 이미지 적용