diff --git a/android/app/src/main/assets/fonts/AntDesign.ttf b/android/app/src/main/assets/fonts/AntDesign.ttf new file mode 100644 index 0000000..2abf035 Binary files /dev/null and b/android/app/src/main/assets/fonts/AntDesign.ttf differ diff --git a/android/app/src/main/assets/fonts/Entypo.ttf b/android/app/src/main/assets/fonts/Entypo.ttf new file mode 100644 index 0000000..76d91cb Binary files /dev/null and b/android/app/src/main/assets/fonts/Entypo.ttf differ diff --git a/android/app/src/main/assets/fonts/EvilIcons.ttf b/android/app/src/main/assets/fonts/EvilIcons.ttf new file mode 100644 index 0000000..6868f7b Binary files /dev/null and b/android/app/src/main/assets/fonts/EvilIcons.ttf differ diff --git a/android/app/src/main/assets/fonts/Feather.ttf b/android/app/src/main/assets/fonts/Feather.ttf new file mode 100644 index 0000000..49698e7 Binary files /dev/null and b/android/app/src/main/assets/fonts/Feather.ttf differ diff --git a/android/app/src/main/assets/fonts/FontAwesome.ttf b/android/app/src/main/assets/fonts/FontAwesome.ttf new file mode 100644 index 0000000..35acda2 Binary files /dev/null and b/android/app/src/main/assets/fonts/FontAwesome.ttf differ diff --git a/android/app/src/main/assets/fonts/FontAwesome5_Brands.ttf b/android/app/src/main/assets/fonts/FontAwesome5_Brands.ttf new file mode 100644 index 0000000..fc567cd Binary files /dev/null and b/android/app/src/main/assets/fonts/FontAwesome5_Brands.ttf differ diff --git a/android/app/src/main/assets/fonts/FontAwesome5_Regular.ttf b/android/app/src/main/assets/fonts/FontAwesome5_Regular.ttf new file mode 100644 index 0000000..d1ac9ba Binary files /dev/null and b/android/app/src/main/assets/fonts/FontAwesome5_Regular.ttf differ diff --git a/android/app/src/main/assets/fonts/FontAwesome5_Solid.ttf b/android/app/src/main/assets/fonts/FontAwesome5_Solid.ttf new file mode 100644 index 0000000..f33e816 Binary files /dev/null and b/android/app/src/main/assets/fonts/FontAwesome5_Solid.ttf differ diff --git a/android/app/src/main/assets/fonts/Fontisto.ttf b/android/app/src/main/assets/fonts/Fontisto.ttf new file mode 100644 index 0000000..96e2e81 Binary files /dev/null and b/android/app/src/main/assets/fonts/Fontisto.ttf differ diff --git a/android/app/src/main/assets/fonts/Foundation.ttf b/android/app/src/main/assets/fonts/Foundation.ttf new file mode 100644 index 0000000..6cce217 Binary files /dev/null and b/android/app/src/main/assets/fonts/Foundation.ttf differ diff --git a/android/app/src/main/assets/fonts/Ionicons.ttf b/android/app/src/main/assets/fonts/Ionicons.ttf new file mode 100644 index 0000000..719442d Binary files /dev/null and b/android/app/src/main/assets/fonts/Ionicons.ttf differ diff --git a/android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf b/android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf new file mode 100644 index 0000000..ba87359 Binary files /dev/null and b/android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf differ diff --git a/android/app/src/main/assets/fonts/MaterialIcons.ttf b/android/app/src/main/assets/fonts/MaterialIcons.ttf new file mode 100644 index 0000000..e50801b Binary files /dev/null and b/android/app/src/main/assets/fonts/MaterialIcons.ttf differ diff --git a/android/app/src/main/assets/fonts/Octicons.ttf b/android/app/src/main/assets/fonts/Octicons.ttf new file mode 100644 index 0000000..f8daedc Binary files /dev/null and b/android/app/src/main/assets/fonts/Octicons.ttf differ diff --git a/android/app/src/main/assets/fonts/SimpleLineIcons.ttf b/android/app/src/main/assets/fonts/SimpleLineIcons.ttf new file mode 100644 index 0000000..6ecb686 Binary files /dev/null and b/android/app/src/main/assets/fonts/SimpleLineIcons.ttf differ diff --git a/android/app/src/main/assets/fonts/Zocial.ttf b/android/app/src/main/assets/fonts/Zocial.ttf new file mode 100644 index 0000000..e2b5fbb Binary files /dev/null and b/android/app/src/main/assets/fonts/Zocial.ttf differ diff --git a/ios/BOB_FrontEnd.xcodeproj/project.pbxproj b/ios/BOB_FrontEnd.xcodeproj/project.pbxproj index 86716ca..abfb757 100644 --- a/ios/BOB_FrontEnd.xcodeproj/project.pbxproj +++ b/ios/BOB_FrontEnd.xcodeproj/project.pbxproj @@ -20,6 +20,22 @@ D6D041C14C1D4CC0B3849B2B /* Pretendard-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 11C955E157164BEF96CBCC24 /* Pretendard-Regular.ttf */; }; DAD7698A2860A37300C84CF1 /* GoogleService-Info.plist in Resources */ = {isa = PBXBuildFile; fileRef = DAD769892860A37300C84CF1 /* GoogleService-Info.plist */; }; F2D1474B88BC47BDBF1013E0 /* Poppins-Bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 193D3C47DC2D49CAB80AA0A8 /* Poppins-Bold.ttf */; }; + CE83DF01E7E745B992164AD0 /* AntDesign.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 80A923A32DF442BFA087A2B3 /* AntDesign.ttf */; }; + EF305D57FDDC42AB96867A9B /* Entypo.ttf in Resources */ = {isa = PBXBuildFile; fileRef = F1BF3EBCD9CE4FA0B27F07BC /* Entypo.ttf */; }; + 21DD42BE52AF427BB9E10AED /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 699226D02CF14DAE943516B4 /* EvilIcons.ttf */; }; + 3E69BEAB4FA14945B9B5567F /* Feather.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 5947CD02578948D38A2B3B10 /* Feather.ttf */; }; + 3492FF5AF0834AF0B6EE9330 /* FontAwesome.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 930D026C73444611B9433E3E /* FontAwesome.ttf */; }; + 7B8A3B9E5AB54DF69CD5459C /* FontAwesome5_Brands.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 93CBA7981FF34DC2AD115C78 /* FontAwesome5_Brands.ttf */; }; + 169967ADAB644C6AAF90147C /* FontAwesome5_Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7E0D934535CF41D9838CA1CF /* FontAwesome5_Regular.ttf */; }; + 4684C9ECBE014B7D84DED310 /* FontAwesome5_Solid.ttf in Resources */ = {isa = PBXBuildFile; fileRef = A7F4E295569E4828B5EE5F83 /* FontAwesome5_Solid.ttf */; }; + 2AF90D6EBED24249A2A4D331 /* Fontisto.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 31AA64C227684DA7B8D6996F /* Fontisto.ttf */; }; + DF35045D253A4766835F368C /* Foundation.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 9CE1B1A6EB514980BEA545D4 /* Foundation.ttf */; }; + FE5C7B455C894083BD435F55 /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 607C2FD2A1A74934A70C7B88 /* Ionicons.ttf */; }; + 66FAC7B967C149C79FBBF872 /* MaterialCommunityIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 39F579AF87BD4A83AFE3F70E /* MaterialCommunityIcons.ttf */; }; + D82FC3AE98B24E1380D8C3E1 /* MaterialIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 881E8B0D20F84E30A1D4EF6F /* MaterialIcons.ttf */; }; + DE21697214D2483A8BDB9661 /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 89EACDD9ACE54A2F98F89F55 /* Octicons.ttf */; }; + 8AA843AEDE214EECA8ECF36D /* SimpleLineIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = F39926296CF3463485E2A6F9 /* SimpleLineIcons.ttf */; }; + AC45C8F9AA954BE2A48F744A /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 716A396D734549099970F2D4 /* Zocial.ttf */; }; /* End PBXBuildFile section */ /* Begin PBXContainerItemProxy section */ @@ -57,6 +73,22 @@ DA4D399328742AD400BCAFF5 /* BOB_FrontEnd.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; name = BOB_FrontEnd.entitlements; path = BOB_FrontEnd/BOB_FrontEnd.entitlements; sourceTree = ""; }; DAD769892860A37300C84CF1 /* GoogleService-Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = "GoogleService-Info.plist"; sourceTree = ""; }; ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; }; + 80A923A32DF442BFA087A2B3 /* AntDesign.ttf */ = {isa = PBXFileReference; name = "AntDesign.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + F1BF3EBCD9CE4FA0B27F07BC /* Entypo.ttf */ = {isa = PBXFileReference; name = "Entypo.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Entypo.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 699226D02CF14DAE943516B4 /* EvilIcons.ttf */ = {isa = PBXFileReference; name = "EvilIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 5947CD02578948D38A2B3B10 /* Feather.ttf */ = {isa = PBXFileReference; name = "Feather.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Feather.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 930D026C73444611B9433E3E /* FontAwesome.ttf */ = {isa = PBXFileReference; name = "FontAwesome.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 93CBA7981FF34DC2AD115C78 /* FontAwesome5_Brands.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Brands.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Brands.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 7E0D934535CF41D9838CA1CF /* FontAwesome5_Regular.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Regular.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + A7F4E295569E4828B5EE5F83 /* FontAwesome5_Solid.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Solid.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Solid.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 31AA64C227684DA7B8D6996F /* Fontisto.ttf */ = {isa = PBXFileReference; name = "Fontisto.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Fontisto.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 9CE1B1A6EB514980BEA545D4 /* Foundation.ttf */ = {isa = PBXFileReference; name = "Foundation.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Foundation.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 607C2FD2A1A74934A70C7B88 /* Ionicons.ttf */ = {isa = PBXFileReference; name = "Ionicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 39F579AF87BD4A83AFE3F70E /* MaterialCommunityIcons.ttf */ = {isa = PBXFileReference; name = "MaterialCommunityIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 881E8B0D20F84E30A1D4EF6F /* MaterialIcons.ttf */ = {isa = PBXFileReference; name = "MaterialIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 89EACDD9ACE54A2F98F89F55 /* Octicons.ttf */ = {isa = PBXFileReference; name = "Octicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + F39926296CF3463485E2A6F9 /* SimpleLineIcons.ttf */ = {isa = PBXFileReference; name = "SimpleLineIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 716A396D734549099970F2D4 /* Zocial.ttf */ = {isa = PBXFileReference; name = "Zocial.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Zocial.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; /* End PBXFileReference section */ /* Begin PBXFrameworksBuildPhase section */ @@ -161,6 +193,22 @@ 11C955E157164BEF96CBCC24 /* Pretendard-Regular.ttf */, 4752C974ABD44F989EB7740B /* Pretendard-SemiBold.ttf */, 193D3C47DC2D49CAB80AA0A8 /* Poppins-Bold.ttf */, + 80A923A32DF442BFA087A2B3 /* AntDesign.ttf */, + F1BF3EBCD9CE4FA0B27F07BC /* Entypo.ttf */, + 699226D02CF14DAE943516B4 /* EvilIcons.ttf */, + 5947CD02578948D38A2B3B10 /* Feather.ttf */, + 930D026C73444611B9433E3E /* FontAwesome.ttf */, + 93CBA7981FF34DC2AD115C78 /* FontAwesome5_Brands.ttf */, + 7E0D934535CF41D9838CA1CF /* FontAwesome5_Regular.ttf */, + A7F4E295569E4828B5EE5F83 /* FontAwesome5_Solid.ttf */, + 31AA64C227684DA7B8D6996F /* Fontisto.ttf */, + 9CE1B1A6EB514980BEA545D4 /* Foundation.ttf */, + 607C2FD2A1A74934A70C7B88 /* Ionicons.ttf */, + 39F579AF87BD4A83AFE3F70E /* MaterialCommunityIcons.ttf */, + 881E8B0D20F84E30A1D4EF6F /* MaterialIcons.ttf */, + 89EACDD9ACE54A2F98F89F55 /* Octicons.ttf */, + F39926296CF3463485E2A6F9 /* SimpleLineIcons.ttf */, + 716A396D734549099970F2D4 /* Zocial.ttf */, ); name = Resources; sourceTree = ""; @@ -279,6 +327,22 @@ 1361569F6A8C4E128DF3EC4A /* Pretendard-SemiBold.ttf in Resources */, DAD7698A2860A37300C84CF1 /* GoogleService-Info.plist in Resources */, F2D1474B88BC47BDBF1013E0 /* Poppins-Bold.ttf in Resources */, + CE83DF01E7E745B992164AD0 /* AntDesign.ttf in Resources */, + EF305D57FDDC42AB96867A9B /* Entypo.ttf in Resources */, + 21DD42BE52AF427BB9E10AED /* EvilIcons.ttf in Resources */, + 3E69BEAB4FA14945B9B5567F /* Feather.ttf in Resources */, + 3492FF5AF0834AF0B6EE9330 /* FontAwesome.ttf in Resources */, + 7B8A3B9E5AB54DF69CD5459C /* FontAwesome5_Brands.ttf in Resources */, + 169967ADAB644C6AAF90147C /* FontAwesome5_Regular.ttf in Resources */, + 4684C9ECBE014B7D84DED310 /* FontAwesome5_Solid.ttf in Resources */, + 2AF90D6EBED24249A2A4D331 /* Fontisto.ttf in Resources */, + DF35045D253A4766835F368C /* Foundation.ttf in Resources */, + FE5C7B455C894083BD435F55 /* Ionicons.ttf in Resources */, + 66FAC7B967C149C79FBBF872 /* MaterialCommunityIcons.ttf in Resources */, + D82FC3AE98B24E1380D8C3E1 /* MaterialIcons.ttf in Resources */, + DE21697214D2483A8BDB9661 /* Octicons.ttf in Resources */, + 8AA843AEDE214EECA8ECF36D /* SimpleLineIcons.ttf in Resources */, + AC45C8F9AA954BE2A48F744A /* Zocial.ttf in Resources */, ); runOnlyForDeploymentPostprocessing = 0; }; diff --git a/ios/BOB_FrontEnd/Info.plist b/ios/BOB_FrontEnd/Info.plist index 6cb8550..b6513ad 100644 --- a/ios/BOB_FrontEnd/Info.plist +++ b/ios/BOB_FrontEnd/Info.plist @@ -68,6 +68,22 @@ Pretendard-Medium.ttf Pretendard-Regular.ttf Pretendard-SemiBold.ttf + AntDesign.ttf + Entypo.ttf + EvilIcons.ttf + Feather.ttf + FontAwesome.ttf + FontAwesome5_Brands.ttf + FontAwesome5_Regular.ttf + FontAwesome5_Solid.ttf + Fontisto.ttf + Foundation.ttf + Ionicons.ttf + MaterialCommunityIcons.ttf + MaterialIcons.ttf + Octicons.ttf + SimpleLineIcons.ttf + Zocial.ttf UILaunchStoryboardName LaunchScreen diff --git a/src/assets/images/onBoarding/ob3.png b/src/assets/images/onBoarding/ob3.png new file mode 100644 index 0000000..9463384 Binary files /dev/null and b/src/assets/images/onBoarding/ob3.png differ diff --git a/src/assets/images/onBoarding/ob4.png b/src/assets/images/onBoarding/ob4.png new file mode 100644 index 0000000..acdb1e4 Binary files /dev/null and b/src/assets/images/onBoarding/ob4.png differ diff --git a/src/assets/images/onBoarding/ob5.png b/src/assets/images/onBoarding/ob5.png new file mode 100644 index 0000000..c33ee61 Binary files /dev/null and b/src/assets/images/onBoarding/ob5.png differ diff --git a/src/assets/images/onBoarding/ob6.png b/src/assets/images/onBoarding/ob6.png new file mode 100644 index 0000000..2b014ba Binary files /dev/null and b/src/assets/images/onBoarding/ob6.png differ diff --git a/src/assets/images/onBoarding/obBob1.png b/src/assets/images/onBoarding/obBob1.png new file mode 100644 index 0000000..6692383 Binary files /dev/null and b/src/assets/images/onBoarding/obBob1.png differ diff --git a/src/assets/images/onBoarding/obBob2cheek.png b/src/assets/images/onBoarding/obBob2cheek.png new file mode 100644 index 0000000..c1e975b Binary files /dev/null and b/src/assets/images/onBoarding/obBob2cheek.png differ diff --git a/src/assets/images/onBoarding/obDot1.png b/src/assets/images/onBoarding/obDot1.png new file mode 100644 index 0000000..44ab699 Binary files /dev/null and b/src/assets/images/onBoarding/obDot1.png differ diff --git a/src/assets/images/onBoarding/obText1.png b/src/assets/images/onBoarding/obText1.png new file mode 100644 index 0000000..0103b4f Binary files /dev/null and b/src/assets/images/onBoarding/obText1.png differ diff --git a/src/assets/images/onBoarding/obText2.png b/src/assets/images/onBoarding/obText2.png new file mode 100644 index 0000000..f5c4514 Binary files /dev/null and b/src/assets/images/onBoarding/obText2.png differ diff --git a/src/components/OnBoardingHeader.tsx b/src/components/OnBoardingHeader.tsx new file mode 100644 index 0000000..4887da1 --- /dev/null +++ b/src/components/OnBoardingHeader.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import type {FC} from 'react'; +import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'; +import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; +import {DesignSystem} from '../assets/DesignSystem'; +import {useNavigation} from '@react-navigation/native'; + +export type OnBoardingHeaderProps = { + goBack?: () => void; +}; + +export const OnBoardingHeader: FC = ({goBack}) => { + const navigation = useNavigation(); + return ( + + {goBack !== undefined ? ( + + + + + + ) : ( + + )} + navigation.reset({routes: [{name: 'MainNavigator'}]})}> + 건너뛰기 + + + ); +}; + +const styles = StyleSheet.create({ + headerWrap: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + marginLeft: 16, + marginRight: 16, + height: 50, + }, + backButton: { + zIndex: 1, + // width: 16, + // height: 15.56, + justifyContent: 'center', + alignItems: 'center', + }, + disable: {opacity: 0}, + progressText: { + color: '#949494', + fontSize: 16, + }, +}); diff --git a/src/components/OnBoardingNextButton.tsx b/src/components/OnBoardingNextButton.tsx new file mode 100644 index 0000000..91c76cf --- /dev/null +++ b/src/components/OnBoardingNextButton.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import type {FC} from 'react'; +import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'; + +export type OnBoardingNextButtonProps = { + goNext: () => void; + text: string; +}; + +export const OnBoardingNextButton: FC = ({goNext, text}) => { + return ( + + + + {text} + + + + ); +}; + +const styles = StyleSheet.create({ + buttonWrap: {justifyContent: 'center', alignItems: 'center', margin: 20}, + buttonStyle: { + width: '100%', + height: 56, + justifyContent: 'center', + alignItems: 'center', + borderRadius: 10, + }, + blackButton: { + backgroundColor: '#2A2A2A', + }, + stateNextButton: {backgroundColor: '#2A2A2A'}, + purpleButton: {backgroundColor: '#6C69FF'}, +}); diff --git a/src/nav/AuthNavigator.tsx b/src/nav/AuthNavigator.tsx index ea288e0..515a43e 100644 --- a/src/nav/AuthNavigator.tsx +++ b/src/nav/AuthNavigator.tsx @@ -6,6 +6,13 @@ import {MainNavigator} from './MainNavigator'; import Register from '../screens/Register'; import RegisterForm from '../screens/RegisterForm'; import RegisterCategory from '../screens/RegisterCategory'; +import RegisterDone from '../screens/onBoarding/RegisterDone'; +import HowTo1 from '../screens/onBoarding/HowTo1'; +import HowTo2 from '../screens/onBoarding/HowTo2'; +import HowTo3 from '../screens/onBoarding/HowTo3'; +import HowTo4 from '../screens/onBoarding/HowTo4'; +import HowTo5 from '../screens/onBoarding/HowTo5'; +import HowTo6 from '../screens/onBoarding/HowTo6'; import {RegisterInterface} from '../data'; export type AuthStackParamList = { @@ -14,6 +21,13 @@ export type AuthStackParamList = { Register: undefined; RegisterForm: {registerData: RegisterInterface}; RegisterCategory: {registerData: RegisterInterface}; + RegisterDone: undefined; + HowTo1: undefined; + HowTo2: undefined; + HowTo3: undefined; + HowTo4: undefined; + HowTo5: undefined; + HowTo6: undefined; MainNavigator: undefined; }; @@ -29,6 +43,14 @@ export const AuthNavigator = () => { + + + + + + + + {/* 온보딩페이지들여기쭉 */} ); diff --git a/src/screens/RegisterCategory.tsx b/src/screens/RegisterCategory.tsx index da8de72..22b6f01 100644 --- a/src/screens/RegisterCategory.tsx +++ b/src/screens/RegisterCategory.tsx @@ -64,7 +64,8 @@ const RegisterCategory = ({navigation, route}: Props) => { const goNext = () => { postRegister(); postCategories(); - navigation.reset({routes: [{name: 'MainNavigator'}]}); + // navigation.reset({routes: [{name: 'MainNavigator'}]}); + navigation.navigate('RegisterDone'); }; const goBack = () => { navigation.navigate('RegisterForm', {registerData}); diff --git a/src/screens/RegisterForm.tsx b/src/screens/RegisterForm.tsx index 34d686a..b71056f 100644 --- a/src/screens/RegisterForm.tsx +++ b/src/screens/RegisterForm.tsx @@ -52,7 +52,7 @@ const RegisterForm = ({navigation, route}: Props) => { style={[{flex: 1}]} behavior={Platform.OS === 'ios' ? 'padding' : 'height'} > - + {/* { {errors.address?.type === 'required' && ( 필수 입력사항입니다. )} - + */} - + ); }; diff --git a/src/screens/onBoarding/HowTo1.tsx b/src/screens/onBoarding/HowTo1.tsx new file mode 100644 index 0000000..0fff438 --- /dev/null +++ b/src/screens/onBoarding/HowTo1.tsx @@ -0,0 +1,45 @@ +import {NativeStackScreenProps} from '@react-navigation/native-stack'; +import React, {useEffect, useState} from 'react'; +import {View, StyleSheet, Text, Image} from 'react-native'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import {RegisterHeader, RegisterNextButton} from '../../components'; +import {OnBoardingHeader} from '../../components/OnBoardingHeader'; +import {OnBoardingNextButton} from '../../components/OnBoardingNextButton'; +import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; +import {DesignSystem} from '../../assets/DesignSystem'; + +const HowTo1 = ({navigation, route}: Props) => { + const [loading, setLoading] = useState(false); + const goNext = () => { + navigation.navigate('HowTo2'); + }; + useEffect(() => { + const id = setTimeout(() => { + setLoading(true); + }, 1000); + return () => { + clearTimeout(id); + }; + }, []); + return ( + + console.log('back')} /> + + + + + {loading ? ( + + ) : ( + + )} + + ); +}; + +const styles = StyleSheet.create({ + flex: {flex: 1, backgroundColor: '#FFFFFF'}, + +}); + +export default HowTo1; diff --git a/src/screens/onBoarding/HowTo2.tsx b/src/screens/onBoarding/HowTo2.tsx new file mode 100644 index 0000000..2ff33d8 --- /dev/null +++ b/src/screens/onBoarding/HowTo2.tsx @@ -0,0 +1,51 @@ +import {NativeStackScreenProps} from '@react-navigation/native-stack'; +import React, {useEffect, useState} from 'react'; +import {View, StyleSheet, Text, Image} from 'react-native'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import {RegisterHeader, RegisterNextButton} from '../../components'; +import {OnBoardingHeader} from '../../components/OnBoardingHeader'; +import {OnBoardingNextButton} from '../../components/OnBoardingNextButton'; +import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; +import {DesignSystem} from '../../assets/DesignSystem'; + +const HowTo2 = ({navigation, route}: Props) => { + const [loading, setLoading] = useState(false); + const goNext = () => { + navigation.navigate('HowTo3'); + }; + useEffect(() => { + const id = setTimeout(() => { + setLoading(true); + }, 1000); + return () => { + clearTimeout(id); + }; + }, []); + return ( + + navigation.navigate('HowTo1')} /> + + + + + + + + {loading ? ( + + ) : ( + + )} + + ); +}; + +const styles = StyleSheet.create({ + flex: {flex: 1, backgroundColor: '#FFFFFF'}, + bobCheek: { + position: 'relative', + bottom: 115, // + }, +}); + +export default HowTo2; diff --git a/src/screens/onBoarding/HowTo3.tsx b/src/screens/onBoarding/HowTo3.tsx new file mode 100644 index 0000000..a05763d --- /dev/null +++ b/src/screens/onBoarding/HowTo3.tsx @@ -0,0 +1,66 @@ +import React, {useEffect, useState} from 'react'; +import {View, StyleSheet, Text, Image, Dimensions} from 'react-native'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import {OnBoardingHeader} from '../../components/OnBoardingHeader'; +import {OnBoardingNextButton} from '../../components/OnBoardingNextButton'; +import {DesignSystem} from '../../assets/DesignSystem'; + +const HowTo3 = ({navigation, route}: Props) => { + const [loading, setLoading] = useState(false); + const goNext = () => { + navigation.navigate('HowTo4'); + }; + const HEIGHT = Dimensions.get('window').height; + useEffect(() => { + const id = setTimeout(() => { + setLoading(true); + }, 1000); + return () => { + clearTimeout(id); + }; + }, []); + return ( + + navigation.navigate('HowTo2')} /> + + + 매주 3개의 미션을 확인하세요! + + + + + + + + + + + + {loading ? ( + + ) : ( + + )} + + ); +}; + +const styles = StyleSheet.create({ + flex: {flex: 1, backgroundColor: '#FFFFFF'}, + obText: { + color: '#2A2A2A', + }, + obDotView: { + marginTop: 38, + flexDirection: 'row', + }, + obDotEach: { + width: 9, + height: 9, + borderRadius: 4.5, + marginLeft: 4, + marginRight: 4, + }, +}); + +export default HowTo3; diff --git a/src/screens/onBoarding/HowTo4.tsx b/src/screens/onBoarding/HowTo4.tsx new file mode 100644 index 0000000..c4fa920 --- /dev/null +++ b/src/screens/onBoarding/HowTo4.tsx @@ -0,0 +1,67 @@ +import React, {useEffect, useState} from 'react'; +import {View, StyleSheet, Text, Image, Dimensions} from 'react-native'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import {OnBoardingHeader} from '../../components/OnBoardingHeader'; +import {OnBoardingNextButton} from '../../components/OnBoardingNextButton'; +import {DesignSystem} from '../../assets/DesignSystem'; + +const HowTo4 = ({navigation, route}: Props) => { + const [loading, setLoading] = useState(false); + const goNext = () => { + navigation.navigate('HowTo5'); + }; + const HEIGHT = Dimensions.get('window').height; + useEffect(() => { + const id = setTimeout(() => { + setLoading(true); + }, 1000); + return () => { + clearTimeout(id); + }; + }, []); + return ( + + navigation.navigate('HowTo3')} /> + + 미션 장소와 내용을 확인하고, + + 미션 도전을 누르세요! + + + + + + + + + + + + {loading ? ( + + ) : ( + + )} + + ); +}; + +const styles = StyleSheet.create({ + flex: {flex: 1, backgroundColor: '#FFFFFF'}, + obText: { + color: '#2A2A2A', + }, + obDotView: { + marginTop: 38, + flexDirection: 'row', + }, + obDotEach: { + width: 9, + height: 9, + borderRadius: 4.5, + marginLeft: 4, + marginRight: 4, + }, +}); + +export default HowTo4; diff --git a/src/screens/onBoarding/HowTo5.tsx b/src/screens/onBoarding/HowTo5.tsx new file mode 100644 index 0000000..2b7367a --- /dev/null +++ b/src/screens/onBoarding/HowTo5.tsx @@ -0,0 +1,67 @@ +import React, {useEffect, useState} from 'react'; +import {View, StyleSheet, Text, Image, Dimensions} from 'react-native'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import {OnBoardingHeader} from '../../components/OnBoardingHeader'; +import {OnBoardingNextButton} from '../../components/OnBoardingNextButton'; +import {DesignSystem} from '../../assets/DesignSystem'; + +const HowTo5 = ({navigation, route}: Props) => { + const [loading, setLoading] = useState(false); + const goNext = () => { + navigation.navigate('HowTo6'); + }; + const HEIGHT = Dimensions.get('window').height; + useEffect(() => { + const id = setTimeout(() => { + setLoading(true); + }, 1000); + return () => { + clearTimeout(id); + }; + }, []); + return ( + + navigation.navigate('HowTo4')} /> + + 미션을 수행한 다음, + + 사장님께 성공요청을 보내요! + + + + + + + + + + + + {loading ? ( + + ) : ( + + )} + + ); +}; + +const styles = StyleSheet.create({ + flex: {flex: 1, backgroundColor: '#FFFFFF'}, + obText: { + color: '#2A2A2A', + }, + obDotView: { + marginTop: 38, + flexDirection: 'row', + }, + obDotEach: { + width: 9, + height: 9, + borderRadius: 4.5, + marginLeft: 4, + marginRight: 4, + }, +}); + +export default HowTo5; diff --git a/src/screens/onBoarding/HowTo6.tsx b/src/screens/onBoarding/HowTo6.tsx new file mode 100644 index 0000000..7d60edc --- /dev/null +++ b/src/screens/onBoarding/HowTo6.tsx @@ -0,0 +1,65 @@ +import React, {useEffect, useState} from 'react'; +import {View, StyleSheet, Text, Image, Dimensions} from 'react-native'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import {OnBoardingHeader} from '../../components/OnBoardingHeader'; +import {OnBoardingNextButton} from '../../components/OnBoardingNextButton'; +import {DesignSystem} from '../../assets/DesignSystem'; + +const HowTo5 = ({navigation, route}: Props) => { + const [loading, setLoading] = useState(false); + const goNext = () => { + navigation.reset({routes: [{name: 'MainNavigator'}]}); + }; + const HEIGHT = Dimensions.get('window').height; + useEffect(() => { + const id = setTimeout(() => { + setLoading(true); + }, 1000); + return () => { + clearTimeout(id); + }; + }, []); + return ( + + navigation.navigate('HowTo5')} /> + + 사장님이 미션성공 확인 시 + 미션 성공! + + + + + + + + + + + {loading ? ( + + ) : ( + + )} + + ); +}; + +const styles = StyleSheet.create({ + flex: {flex: 1, backgroundColor: '#FFFFFF'}, + obText: { + color: '#2A2A2A', + }, + obDotView: { + marginTop: 38, + flexDirection: 'row', + }, + obDotEach: { + width: 9, + height: 9, + borderRadius: 4.5, + marginLeft: 4, + marginRight: 4, + }, +}); + +export default HowTo5; diff --git a/src/screens/onBoarding/RegisterDone.tsx b/src/screens/onBoarding/RegisterDone.tsx new file mode 100644 index 0000000..b86b3ba --- /dev/null +++ b/src/screens/onBoarding/RegisterDone.tsx @@ -0,0 +1,72 @@ +import {NativeStackScreenProps} from '@react-navigation/native-stack'; +import React, {useEffect, useState} from 'react'; +import {View, StyleSheet, Text} from 'react-native'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import {RegisterHeader, RegisterNextButton} from '../../components'; +import axios from 'axios'; +import {OnBoardingHeader} from '../../components/OnBoardingHeader'; +import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; +import {DesignSystem} from '../../assets/DesignSystem'; + +const RegisterDone = ({navigation, route}: Props) => { + const goNext = () => { + navigation.reset({routes: [{name: 'MainNavigator'}]}); + }; + + useEffect(() => { + const id = setTimeout(() => { + navigation.navigate('HowTo1'); + }, 1500); + return () => { + clearTimeout(id); + }; + }, []); + + return ( + + console.log('back')} /> + + + 가입완료 + + + ); +}; + +const styles = StyleSheet.create({ + flex: {flex: 1, backgroundColor: '#FFFFFF'}, + backButton: { + position: 'absolute', + width: 24, + height: 24, + left: 12, + top: 44, + }, + categoryWrap: { + margin: 16, + }, + categoryHead: { + width: 205, + marginBottom: 56, + }, + categoryHeadText: { + fontSize: 24, + fontWeight: '600', + lineHeight: 34, + }, + categorySubHeadText: { + fontSize: 14, + fontWeight: '300', + lineHeight: 22, + marginTop: 8, + color: '#616161', + }, + categoryBox: { + flex: 1, + flexDirection: 'row', + flexWrap: 'wrap', + justifyContent: 'space-between', + }, +}); + +export default RegisterDone;