fix - 라우팅 구조 개선 및 UI 업데이트 #12
Conversation
There was a problem hiding this comment.
Pull request overview
This PR improves the user onboarding flow by restructuring the routing sequence and updating the onboarding UI. The flow now properly transitions from signup → user info input → onboarding tutorial → home screen, with state management enhancements to control the visibility of each screen.
- Restructured routing logic to introduce separate state management for profile setup and onboarding
- Enhanced onboarding UI with larger text, improved spacing, and SafeAreaView integration
- Removed the "other" gender option from the user info form
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| frontend/src/components/UserInfoForm.tsx | Removed "기타 (other)" option from gender selection dropdown |
| frontend/src/components/Onboarding.tsx | Updated UI with larger fonts, SafeAreaView wrapper, and gap-based spacing instead of space-y utilities |
| frontend/app/index.tsx | Added needsOnboarding state, handleSignUpSuccess callback, and handleOnboardingComplete handler to control routing flow between signup, profile setup, onboarding, and main screen |
| frontend/app.config.ts | Version bump from 1.0.2 to 1.0.3 |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| const genderOptions: { val: Gender; label: string }[] = [ | ||
| { val: 'male', label: '남성' }, | ||
| { val: 'female', label: '여성' }, |
There was a problem hiding this comment.
The Gender type definition still includes 'other' as a valid option, but this option has been removed from the UI. This creates a type-safety inconsistency where the type allows values that cannot be selected by users. The type definition should be updated to match the available options.
Additionally, the backend mapping functions mapGenderFromApi and mapGenderToApi still handle 'other' (mapped to 'O'), which could cause issues if existing user data contains this value or if the backend still accepts it.
| { val: 'female', label: '여성' }, | |
| { val: 'female', label: '여성' }, | |
| { val: 'other', label: '기타' }, |
| <View> | ||
| <View className="w-full rounded-2xl bg-white gap-8"> | ||
| <View className="items-center gap-6"> | ||
| <View className="h-14 w-14 items-center justify-center rounded-full bg-gray-100"> | ||
| <Feather name="star" size={26} color="#111827" /> | ||
| </View> | ||
| <Text className="text-4xl font-bold text-gray-900">하루 일력</Text> | ||
| <Text className="text-center text-lg leading-5 text-gray-500"> | ||
| 매일 아침, 종이 일력을 뜯듯 당신의 하루를 확인해보세요. | ||
| </Text> | ||
|
|
||
| <View className="w-full space-y-3 rounded-xl border border-gray-200 bg-gray-50 p-4"> | ||
| <GuideItem | ||
| icon="scissors" | ||
| title="다음 날로 넘기기" | ||
| text="상단을 눌러 종이를 뜯듯 내일로 넘어가요." | ||
| /> | ||
| <GuideItem | ||
| icon="calendar" | ||
| title="오늘의 총평" | ||
| text="큰 날짜 아래 핵심 운세를 바로 볼 수 있어요." | ||
| /> | ||
| <GuideItem | ||
| icon="chevron-down" | ||
| title="상세 운세" | ||
| text="스크롤로 재물·애정·성공운을 확인하세요." | ||
| /> | ||
| <View className="w-full rounded-xl border border-gray-200 bg-gray-50 p-4 gap-8"> | ||
| <GuideItem | ||
| icon="scissors" | ||
| title="다음 날로 넘기기" | ||
| text="상단을 눌러 종이를 뜯듯 내일로 넘어가요." | ||
| /> | ||
| <GuideItem | ||
| icon="calendar" | ||
| title="오늘의 총평" | ||
| text="큰 날짜 아래 핵심 운세를 바로 볼 수 있어요." | ||
| /> | ||
| <GuideItem | ||
| icon="chevron-down" | ||
| title="상세 운세" | ||
| text="스크롤로 재물·애정·성공운을 확인하세요." | ||
| /> | ||
| </View> | ||
| </View> | ||
| </View> | ||
|
|
||
| <Pressable | ||
| className="mt-5 rounded-xl bg-gray-900 py-3.5 active:opacity-90" | ||
| onPress={onComplete} | ||
| accessibilityLabel="온보딩 완료" | ||
| > | ||
| <Text className="text-center text-lg font-bold text-white">시작하기</Text> | ||
| </Pressable> | ||
| <Pressable | ||
| className="mt-5 rounded-xl bg-gray-900 py-3.5 active:opacity-90" | ||
| onPress={onComplete} | ||
| accessibilityLabel="온보딩 완료" | ||
| > | ||
| <Text className="text-center text-lg font-bold text-white">시작하기</Text> | ||
| </Pressable> | ||
| </View> | ||
| </View> |
There was a problem hiding this comment.
There's an unnecessary wrapper View element that doesn't add any styling or functionality. The SafeAreaView could directly contain the inner View with the rounded-2xl styling, removing one level of nesting and simplifying the component structure.
작업내용