기능 명세서: 앱 최초 실행 화면 (index.tsx)
📌 개요
앱을 처음 실행했을 때 사용자에게 표시되는 인트로 화면입니다. 사용자는 로그인 없이 앱을 게스트로 사용할 수 있으며, 추후 개발될 Gmail 로그인 버튼도 포함되어 있습니다. 배경 이미지와 버튼 UI를 통해 앱의 정체성을 전달합니다.
🛠️ 사용 기술/라이브러리
| 기술/라이브러리 |
설명 |
| React Native |
UI 컴포넌트 구성 |
| Expo Router |
파일 기반 라우팅 및 화면 전환 |
| TypeScript |
정적 타입 검증 |
| AsyncStorage |
로컬 상태 저장 (isGuest) |
| React Navigation (Stack) |
_layout.tsx를 통한 화면 구조 |
| Dimensions API |
전체 화면 배경 이미지 사이즈 계산 |
| StyleSheet API |
스타일 구성 |
| Image |
음악 관련 배경 이미지 사용 |
| TouchableOpacity |
사용자 인터랙션이 가능한 버튼 구현 |
🧭 사용자 흐름
- 앱 최초 실행 시
/index.tsx 화면이 나타남.
useEffect에서 AsyncStorage를 통해 isGuest 여부를 확인함.
- 값이
"true"일 경우, 자동으로 /main 화면으로 이동.
- 사용자 선택지:
- "게스트로 시작하기":
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 기반으로 배경 및 버튼 스타일 통일
✅ 체크리스트
