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

## 📌 개요

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

---

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

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

---

## 🧭 사용자 흐름

1. 사용자가 인트로 화면에서 "게스트로 시작하기" 선택 시 홈 화면(`main.tsx`)으로 진입
2. 상단에는 앱 타이틀 및 환경설정 버튼 표시
3. 메인 영역에서 다음 기능들을 사용 가능:

    * 노래방 곡 검색 기능
    * 카테고리별 즐겨찾기 등록 및 관리
    * 공지사항 확인 영역
    * 후원(Donate) 버튼 표시

---

## 📱 UI 구성 요소

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

---

## ⚙️ 개발 세부 명세

### 노래방 번호 검색 기능

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

### 즐겨찾기/카테고리 기능

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

### 공지사항 기능

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

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

### 환경설정 버튼

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

### 후원(Donate) 버튼

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

---

## ✅ 체크리스트

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