feat: [키링/뭉치] 탭 분류 - 3 (퀵필터 구현 및 카테고리 탭바 개선)

[giljihun]

🎯 PR 내용

Summary

• 퀵필터 (무료, 마이) 기능 구현
• CategoryTabBar UI/UX 개선
• 만들기 메뉴 위치 고정 이슈 해결

1. 퀵필터 구현 (라디오버튼 스타일)

  enum QuickFilter: CaseIterable {
      case free   // 무료
      case owned  // 마이 (보유 아이템)

      var title: String { ... }
      var icon: ImageResource? { ... }
  }

• 무료 / 마이 필터 중 하나만 선택 가능
• 키링, 뭉치 탭 모두에서 동작

2. 만들기 메뉴 위치 고정

  // Before: 버튼 기준 상대 위치 → 스크롤 시 메뉴가 안 보임
  // After: SafeArea 기준 고정 위치
  .position(
      x: geometry.size.width - menuWidth / 2 - 16,
      y: geometry.safeAreaInsets.top + menuHeight / 2 - 5
  )

3. CategoryTabBar 개선

• .contentShape(Rectangle()) 추가로 터치 영역 확대
• 언더바 크기가 텍스트 길이에 맞춰지도록 수정

4. 파일 구조

  Workshop/Views/
  ├── Keyring/
  │   └── WorkshopKeyringGridView.swift  ← 키링 탭 전용
  ├── Bundle/
  │   └── WorkshopBundleGridView.swift   ← 뭉치 탭 전용
  └── Components/
      └── WorkshopFilterBar.swift

5. 참고: tabBarMinimizeBehavior 미동작 이슈

.tabBarMinimizeBehavior(.onScrollDown)이 Workshop에서 동작하지 않음.

원인:

// Collection (동작함) - 수직 배치, 겹치지 않음
  ┌─────────────────────────────┐
  │  headerSection (고정)        │
  ├─────────────────────────────┤
  │  tagSection (고정)           │
  ├─────────────────────────────┤
  │                             │
  │  ┌───────────────────────┐  │
  │  │   ScrollView          │  │  ← 독립 영역
  │  │   LazyVGrid           │  │
  │  └───────────────────────┘  │
  │                             │
  └─────────────────────────────┘

  // Workshop (미동작) - 오버레이가 ScrollView 위에 겹침
  ┌─────────────────────────────┐
  │░░░░░ topGradientOverlay ░░░░│  ← 겹침
  │  ┌───────────────────────┐  │
  │  │ stickyHeaderSection   │  │  ← 겹침
  │  │ ┌─────────────────┐   │  │
  │  │ │ topTitleBar     │   │  │  ← 겹침
  │  │ │ ┌─────────────┐ │   │  │
  │  │ │ │ ScrollView  │ │   │  │  ← 맨 아래 (가려짐)
  │  │ │ └─────────────┘ │   │  │
  │  │ └─────────────────┘   │  │
  │  └───────────────────────┘  │
  └─────────────────────────────┘

  // Collection: 헤더가 ScrollView와 나란히 (VStack)
  VStack {
      headerSection      // 고정
      ScrollView { ... } // 여기만 스크롤
  }

  // Workshop: 오버레이가 ScrollView 위에 겹침 (ZStack)
  ZStack {
      ScrollView { ... }   // 전체 화면
      stickyHeaderSection  // 위에 겹침
  }

스티키 헤더 등 복잡한 구조로 인해 적용 불가.

📱 스크린샷 (UI 변경 시)

ScreenRecording_01-25-2026.20-52-37_1.MP4

임시로 몇가지 아이템을 유료로 전환하였음.

거의 다 왔다. 다른 사람 코드를 리팩하는건 역시나 정말 쉽지 않네..

🔗 관련 이슈

• Feature: [키링/뭉치] 탭 분류 - 3 #18

✅ 체크리스트

• 빌드 성공
• 테스트 완료
• Self-review 완료

[freshfresh22]

싱싱이의

[freshfresh22]

    /\_/\ 
   ( >ᴗ< )👍
   /      \👍
  |        |👍
  |  따봉  |
   \______/
      ||

[freshfresh22]

타이틀 [키링/뭉치]에서
Gray100 -> Gray 200 으로 바뀜
(뭉치 배경 적용하니까 잘 안보여서)