[fix] 메인페이지 UI 개선

[seongwon030]

변경사항

수정 전	수정 후

작업내용

1. 하단 탭 바 UI 개선

• 탭 바의 높이를 60에서 70으로 늘리고, 상하 여백(padding)을 추가
• 기존에 숨겨져 있던 탭 라벨(tabBarShowLabel: true)을 활성화하여 라벨 보이도록 변경
• 아이콘 위치 변경: 알림 | 홈 | 메뉴 => 메뉴 | 홈 | 알림
• SVG 아이콘 적용: Home 및 Menu 탭 아이콘을 기존 PNG 이미지에서 SVG 컴포넌트로 교체

2. 메인 헤더 스타일 수정

• theme.ts의 theme.Colors.light에서 하단 탭바 아이콘과 글자 색상에 맞춰 color를 변경했습니다.
• theme.Colors.light를 가져다 쓰던 검색창의 placeholder와 icon의 색상과 불일치하여 인라인에서 직접 color를 적용했습니다.

3. 메인 UI 자잘한 수정

• 양옆 여백 16px -> 20px로 변경
• 카테고리 버튼 크기 48px -> 40px 로 변경
• 카드 간 gap 12px -> 6px로 변경

✨ 리뷰받고 싶은 부분

하단 탑바 아이콘 위치를 변경했는데 기존의 아이콘 위치 설정에서 의도가 있었는지 궁금합니다.

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • 탭 클릭 추적 기능이 추가되었습니다.

• 개선사항

  • 하단 탭 레이아웃이 재구성되었습니다 (홈, 메뉴, 알림).
  • 탭 아이콘 및 레이블 스타일이 개선되었습니다.
  • 전체 UI의 간격과 색상이 조정되었습니다.
  • 검색 입력 필드의 시각적 스타일이 업데이트되었습니다.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

요약

탭 레이아웃 재구성, Mixpanel 이벤트 추적 추가, 테마 색상 업데이트, 그리고 홈 화면 컴포넌트 전반의 패딩과 스타일 조정이 이루어졌습니다.

변경 사항

코호트 / 파일(들)	변경 요약
탭 레이아웃 및 이벤트 추적 app/(tabs)/_layout.tsx	탭 스크린 이름 및 제목 재매핑(index ↔ more ↔ explore); 아이콘 렌더링 방식 변경(Image 및 SVG 컴포넌트); Mixpanel 이벤트 추적 추가(useMixpanelTrack, trackEvent); 탭바 스타일 확장(높이, 패딩, 레이블 스타일)
테마 색상 업데이트 constants/theme.ts	icon 및 tabIconDefault 색상값 #687076에서 #C5C5C5로 변경
홈 컴포넌트 스타일 조정 ui/home/components/category-filter.tsx, club-card.tsx, main-header.tsx, tab.tsx	전체 패딩 값 16px에서 20px로 증가; IconContainer 크기 48×48에서 40×40으로 축소; LabelText 폰트 스타일 추가(12px, 400 weight); SearchInput 색상을 명시적 RGBA 값으로 변경; MainHeader searchValue 파라미터에 기본값('') 추가

예상 코드 리뷰 노력

🎯 3 (중간) | ⏱️ ~20분

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	제목은 주요 변경사항인 메인페이지 UI 개선을 명확하게 요약하고 있으며, 전체 변경사항과 직접적으로 관련이 있습니다.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

app/(tabs)/_layout.tsx (1)

16-21: 홈 탭 클릭 트래킹 URL이 실제 라우트와 불일치합니다.

홈 탭의 screen name은 index인데 handleTabPress("home")로 전달되어 URL이 /home으로 기록됩니다. 라우트명과 표시명을 분리해 기록하는 방식이 안전합니다.

🔧 수정 제안

-  const handleTabPress = (tabName: string) => {
+  const handleTabPress = (tabName: string, routeName: string = tabName) => {
     trackEvent(USER_EVENT.BOTTOM_TAB_CLICKED, {
       tab: tabName,
-      url: `app://moadong/(tabs)/${tabName}`,
+      url: `app://moadong/(tabs)/${routeName}`,
     });
   };

-        listeners={{
-          tabPress: () => handleTabPress("home"),
-        }}
+        listeners={{
+          tabPress: () => handleTabPress("home", "index"),
+        }}

Also applies to: 81-83