기능 명세서: 메인 화면 (`main.tsx`)

📌 개요

인트로 화면에서 "게스트로 시작하기"를 선택한 사용자에게 표시되는 홈 화면입니다. 사용자는 노래 검색 및 즐겨찾기 기능을 사용할 수 있으며, 환경설정 및 후원 기능도 포함될 예정입니다.

🛠️ 사용 기술/라이브러리

기술/라이브러리	설명
React Native	기본 컴포넌트(View, Text, ScrollView 등) 사용
Expo Router	파일 기반 라우팅 (`main.tsx`)
TypeScript	정적 타입 검사
AsyncStorage	즐겨찾기 등 사용자 로컬 데이터 저장에 사용
React Navigation	스택 내비게이션 구성 예정
FlatList	노래 리스트 및 페이지네이션 구현에 사용
Gesture Handler & Reanimated	스와이프 기능 구현
StyleSheet 또는 Tailwind CSS	UI 스타일 구성

🧭 사용자 흐름

사용자가 인트로 화면에서 "게스트로 시작하기" 선택 시 홈 화면(main.tsx)으로 진입
상단에는 앱 타이틀 및 환경설정 버튼 표시
메인 영역에서 다음 기능들을 사용 가능:
- 노래방 곡 검색 기능
- 카테고리별 즐겨찾기 등록 및 관리
- 공지사항 확인 영역
- 후원(Donate) 버튼 표시

📱 UI 구성 요소

요소	유형	설명
상단 바	`View`, `Text`, `TouchableOpacity`	앱 타이틀, 환경설정 아이콘 포함
노래 검색 영역	`TextInput`, `Button`	제목/가수 키워드 검색 입력 및 검색 실행
검색 결과 리스트	`FlatList`	곡번호, 제목, 가수 형태로 표시. 스와이프 가능한 페이지네이션 포함
즐겨찾기/폴더 영역	`ScrollView`, `TouchableOpacity`	관심사별 노래 그룹핑 저장 UI
공지사항 영역	`View`, `Text`	상단 또는 리스트 상단에 고정 공지 형태로 노출
Donate 버튼	`TouchableOpacity`	하단 고정 혹은 사이드 버튼으로 후원 요청 액션 연결 예정

⚙️ 개발 세부 명세

노래방 번호 검색 기능

키워드 입력 시 제목 또는 가수 기준으로 로컬에서 검색
검색 버튼 클릭 시 FlatList에 검색 결과 표시
스와이프 기반 페이지 전환 구현 예정

즐겨찾기/카테고리 기능

폴더(또는 태그) 기반으로 노래 저장 가능
검색 리스트 아이템을 눌러 해당 카테고리에 저장 가능
저장 구조는 AsyncStorage에 JSON 형태로 저장

공지사항 기능

공지 텍스트를 별도 영역 또는 검색창 위에 노출
서버 연동 가능성이 있으므로, 후속 작업에 대비하여 컴포넌트 분리 구조로 설계

상단 네비게이션 바 UI

👤, ⭐️, ⚙️ 아이콘을 오른쪽 끝 정렬
앱 타이틀(Sing Song)은 네비게이션 바 아래에 위치

환경설정 버튼

우측 상단에 위치
아이콘 버튼으로 표시하며, 현재는 비동작 처리

후원(Donate) 버튼

화면 하단 고정 또는 Floating 버튼 형태로 배치 고려
클릭 시 안내 모달 또는 외부 링크 이동 (후속 개발 예정)

✅ 체크리스트

기본 레이아웃 구성
환경설정 버튼 UI 추가
노래 검색 영역 구성
FlatList를 이용한 결과 리스트 렌더링
카테고리/즐겨찾기 UI 기본 틀 마련
스와이프 기반 페이지 전환 기능
공지사항 및 Donate 영역 UI 추가 및 기획
상태 저장을 위한 AsyncStorage 연동
검색, 저장, 불러오기 로직 구현
UI 반응형 대응 및 스타일링 마무리