# 기능 명세서: 앱 최초 실행 화면 (index.tsx)

## 📌 개요
앱을 처음 실행했을 때 사용자에게 표시되는 인트로 화면입니다. 사용자는 로그인 없이 앱을 게스트로 사용할 수 있으며, 추후 개발될 Gmail 로그인 버튼도 포함되어 있습니다. 배경 이미지와 버튼 UI를 통해 앱의 정체성을 전달합니다.

---

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

| 기술/라이브러리              | 설명                                               |
|-----------------------------|----------------------------------------------------|
| React Native                | UI 컴포넌트 구성                                   |
| Expo Router                 | 파일 기반 라우팅 및 화면 전환                      |
| TypeScript                  | 정적 타입 검증                                     |
| AsyncStorage                | 로컬 상태 저장 (`isGuest`)                         |
| React Navigation (Stack)   | `_layout.tsx`를 통한 화면 구조                     |
| Dimensions API             | 전체 화면 배경 이미지 사이즈 계산                  |
| StyleSheet API             | 스타일 구성                                        |
| Image                      | 음악 관련 배경 이미지 사용                         |
| TouchableOpacity           | 사용자 인터랙션이 가능한 버튼 구현                |

---

## 🧭 사용자 흐름

1. 앱 최초 실행 시 `/index.tsx` 화면이 나타남.
2. `useEffect`에서 `AsyncStorage`를 통해 `isGuest` 여부를 확인함.
   - 값이 `"true"`일 경우, 자동으로 `/main` 화면으로 이동.
3. 사용자 선택지:
   - "게스트로 시작하기":
      - `isGuest = "true"`로 로컬 저장
      - `/main` 화면으로 이동
   - "Gmail로 로그인":
      - 현재는 `alert()` 호출
      - 추후 `/login` 화면으로 이동하도록 변경 예정

---

## 📱 UI 구성 요소

| 요소                   | 유형             | 설명                                                    |
|------------------------|------------------|----------------------------------------------------------|
| `Image`                | 배경 이미지       | 음악/노래방 분위기의 앱 목적 표현                        |
| `TouchableOpacity`     | 버튼              | 게스트로 앱을 시작하거나, Gmail 로그인 버튼 선택 가능     |
| `useEffect`            | 사이드 이펙트     | 앱 시작 시 게스트 상태를 확인 후 자동 이동 처리          |
| `AsyncStorage`         | 로컬 스토리지     | 게스트 여부(`isGuest`) 저장 및 조회                       |

---

## ⚙️ 개발 세부 명세

- `useEffect`로 앱 진입 시 `isGuest` 상태를 체크함
- `"게스트로 시작하기"` 버튼 클릭 시:
   - `AsyncStorage.setItem("isGuest", "true")`
   - `router.replace("/main")`으로 이동
- `"Gmail로 로그인"` 클릭 시:
   - `alert()` 호출만 수행 (로그인 미구현 상태)
- `Image`를 `Dimensions` 기반으로 전체 화면 렌더링
- `View`와 `overlay` 스타일을 통해 버튼 위에 배경 이미지 배치
- `StyleSheet` 기반으로 배경 및 버튼 스타일 통일

---

## ✅ 체크리스트

- [x] 게스트 진입 상태 저장
- [x] 자동 리다이렉션 처리
- [x] Gmail 로그인 버튼 UI 제공
- [x] 배경 이미지 적용
- [x] 버튼 터치 인터랙션 구현 완료