-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* refactor: 변경된 Onboarding Flow를 반영합니다. * fix: font 반영이 안되는 현상을 수정합니다. * fix: test를 위해 useAppOpen으로 분리한다. * fix: 잘못된 경로명을 변경합니다.
- Loading branch information
Showing
25 changed files
with
329 additions
and
157 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,88 +1,18 @@ | ||
| import { router } from 'expo-router'; | ||
| import { useCallback, useState } from 'react'; | ||
| import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated'; | ||
| import { useCallback } from 'react'; | ||
|
|
||
| import SolidButton from '@/components/common/button/SolidButton'; | ||
| import ProgressBar from '@/components/common/progress-bar'; | ||
| import Typography from '@/components/common/typography'; | ||
| import { ON_BOARDING } from '@/constants'; | ||
| import OnboardingScreen from '@/components/onboarding/OnboardingScreen'; | ||
| import { useOnboarding } from '@/store/useOnboarding'; | ||
| import { color } from '@/styles/theme'; | ||
| import { getSize } from '@/utils'; | ||
|
|
||
| import * as S from './onboarding.styles'; | ||
|
|
||
| function Onboarding() { | ||
| const { checkOnBoarding } = useOnboarding(); | ||
| const [step, setStep] = useState(0); | ||
|
|
||
| const handleStep = () => { | ||
| if (step === ON_BOARDING.length - 1) { | ||
| return handleLastStep(); | ||
| } | ||
| setStep((prevStep) => prevStep + 1); | ||
| }; | ||
|
|
||
| const handleLastStep = useCallback(() => { | ||
| checkOnBoarding(); | ||
| router.replace('sign-in'); | ||
| }, [checkOnBoarding]); | ||
|
|
||
| const backgroundStyle = useAnimatedStyle(() => ({ | ||
| position: 'absolute', | ||
| flex: 1, | ||
| width: getSize.deviceWidth * ON_BOARDING.length, | ||
| height: '100%', | ||
| left: withTiming(step * -getSize.deviceWidth), | ||
| })); | ||
|
|
||
| return ( | ||
| <S.Container> | ||
| <Animated.Image | ||
| source={require('../../assets/images/onboarding-bg.png')} | ||
| style={backgroundStyle} | ||
| /> | ||
| <S.OnBoardingWrapper> | ||
| {ON_BOARDING.map(({ heading, title }, index) => { | ||
| return step === index ? ( | ||
| <S.ContentBox key={index}> | ||
| <S.TextWrapper> | ||
| <Typography | ||
| variant='Heading1' | ||
| color={color.Label.Alternative}> | ||
| {title} | ||
| </Typography> | ||
| <Typography | ||
| color={color.Label.Normal} | ||
| variant='Title3'> | ||
| {heading} | ||
| </Typography> | ||
| </S.TextWrapper> | ||
| </S.ContentBox> | ||
| ) : null; | ||
| })} | ||
| <ProgressBar | ||
| currentStep={step} | ||
| stepLength={ON_BOARDING.length} | ||
| /> | ||
| </S.OnBoardingWrapper> | ||
| <S.ButtonBox> | ||
| <SolidButton | ||
| size='large' | ||
| full | ||
| onPress={handleStep}> | ||
| 다음 | ||
| </SolidButton> | ||
| <S.SkipButton onPress={handleLastStep}> | ||
| <Typography | ||
| variant='Body1/Normal' | ||
| color='#878A93'> | ||
| 건너뛰기 | ||
| </Typography> | ||
| </S.SkipButton> | ||
| </S.ButtonBox> | ||
| </S.Container> | ||
| ); | ||
| return <OnboardingScreen handleLastStep={handleLastStep} />; | ||
| } | ||
|
|
||
| export default Onboarding; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 37 additions & 0 deletions
37
src/components/onboarding/OnboardingScreen/OnboardingScreen.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
| import { View } from 'react-native'; | ||
|
|
||
| import { SCREEN_SIZE } from '@/constants'; | ||
|
|
||
| import OnboardingScreen from './'; | ||
|
|
||
| const ProjectInviteModalMeta: Meta<typeof OnboardingScreen> = { | ||
| title: 'screens/Onboarding', | ||
| component: OnboardingScreen, | ||
| argTypes: { | ||
| handleLastStep: { | ||
| action: '마지막 페이지로 이동합니다.', | ||
| description: '마지막 페이지로 이동될 때 실행되는 함수', | ||
| }, | ||
| }, | ||
| parameters: { | ||
| layout: 'centered', | ||
| }, | ||
| }; | ||
|
|
||
| export default ProjectInviteModalMeta; | ||
|
|
||
| export const Preview: StoryObj<typeof OnboardingScreen> = { | ||
| args: { | ||
| handleLastStep: () => { | ||
| console.log('마지막 페이지로 이동합니다.'); | ||
| }, | ||
| }, | ||
| render: (args) => { | ||
| return ( | ||
| <View style={{ flex: 1, width: SCREEN_SIZE.WEB_WIDTH, height: SCREEN_SIZE.WEB_HEIGHT }}> | ||
| <OnboardingScreen {...args} /> | ||
| </View> | ||
| ); | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import { useCallback, useState } from 'react'; | ||
| import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated'; | ||
|
|
||
| import SolidButton from '@/components/common/button/SolidButton'; | ||
| import ProgressBar from '@/components/common/progress-bar'; | ||
| import Typography from '@/components/common/typography'; | ||
| import OnboardingSection from '@/components/onboarding/OnboardingSection'; | ||
| import OnboardingTitle, { ON_BOARDING } from '@/components/onboarding/OnboardingTitle'; | ||
| import { getSize } from '@/utils'; | ||
|
|
||
| import * as S from './style'; | ||
|
|
||
| type Props = { | ||
| handleLastStep: () => void; | ||
| }; | ||
|
|
||
| function OnboardingScreen({ handleLastStep }: Props) { | ||
| const [step, setStep] = useState(0); | ||
|
|
||
| const handleStep = useCallback(() => { | ||
| if (step === ON_BOARDING.length - 1) { | ||
| return handleLastStep(); | ||
| } | ||
| setStep((prevStep) => prevStep + 1); | ||
| }, [step]); | ||
|
|
||
| const backgroundStyle = useAnimatedStyle(() => ({ | ||
| position: 'absolute', | ||
| flex: 1, | ||
| width: getSize.deviceWidth * ON_BOARDING.length, | ||
| height: '100%', | ||
| left: withTiming(step * -getSize.deviceWidth), | ||
| })); | ||
|
|
||
| return ( | ||
| <S.Container> | ||
| <Animated.Image | ||
| source={require('../../../../assets/images/onboarding-bg.png')} | ||
| style={backgroundStyle} | ||
| /> | ||
| <S.OnBoardingWrapper> | ||
| <OnboardingTitle step={step} /> | ||
| <S.ContentWrapperBox> | ||
| <OnboardingSection step={step} /> | ||
| </S.ContentWrapperBox> | ||
| </S.OnBoardingWrapper> | ||
| <S.ButtonBox> | ||
| <ProgressBar | ||
| currentStep={step} | ||
| stepLength={ON_BOARDING.length} | ||
| /> | ||
| <SolidButton | ||
| size='large' | ||
| full | ||
| onPress={handleStep}> | ||
| 다음 | ||
| </SolidButton> | ||
| <S.SkipButton onPress={handleLastStep}> | ||
| <Typography | ||
| variant='Body1/Normal' | ||
| color='#878A93'> | ||
| 건너뛰기 | ||
| </Typography> | ||
| </S.SkipButton> | ||
| </S.ButtonBox> | ||
| </S.Container> | ||
| ); | ||
| } | ||
|
|
||
| export default OnboardingScreen; |
Oops, something went wrong.