diff --git a/App.tsx b/App.tsx index bd6404a..b25fa42 100644 --- a/App.tsx +++ b/App.tsx @@ -1,18 +1,27 @@ import { NavigationContainer } from '@react-navigation/native'; -import React, { useEffect } from 'react'; -import RootNav from './navigation/RootNav'; -import 'react-native-gesture-handler'; +import React, { useEffect, useState } from 'react'; import SplashScreen from 'react-native-splash-screen'; +import 'react-native-gesture-handler'; + +import RootNav from './navigation/Main/RootNav'; +import OnBoardingStack from './navigation/OnBoarding/StackNavigationOfOnBoarding'; function App() { + const [isLogin, setIsLogin] = useState(false); + + // splash screen useEffect(() => { setTimeout(() => SplashScreen.hide(), 1000); }, []); + useEffect(() => { + // setIsLogin(); + }, []); + return ( <> - + {isLogin ? : } ); diff --git a/assets/images/common/rightArrow.png b/assets/images/common/rightArrow.png new file mode 100644 index 0000000..c03a097 Binary files /dev/null and b/assets/images/common/rightArrow.png differ diff --git a/assets/images/landing/apple.png b/assets/images/landing/apple.png new file mode 100644 index 0000000..6130a65 Binary files /dev/null and b/assets/images/landing/apple.png differ diff --git a/assets/images/landing/kakao.png b/assets/images/landing/kakao.png new file mode 100644 index 0000000..7d45e52 Binary files /dev/null and b/assets/images/landing/kakao.png differ diff --git a/assets/images/landing/landingImage.png b/assets/images/landing/landingImage.png new file mode 100644 index 0000000..817af7e Binary files /dev/null and b/assets/images/landing/landingImage.png differ diff --git a/assets/images/landing/loginImage.png b/assets/images/landing/loginImage.png new file mode 100644 index 0000000..3a69b47 Binary files /dev/null and b/assets/images/landing/loginImage.png differ diff --git a/assets/images/landing/map.png b/assets/images/landing/map.png new file mode 100644 index 0000000..5f1f5ee Binary files /dev/null and b/assets/images/landing/map.png differ diff --git a/assets/images/login/mainLogo.png b/assets/images/login/mainLogo.png deleted file mode 100644 index e5a441c..0000000 Binary files a/assets/images/login/mainLogo.png and /dev/null differ diff --git a/color.ts b/color.ts index 47fbd14..68e2d5e 100644 --- a/color.ts +++ b/color.ts @@ -1,7 +1,5 @@ export const mainBlue = '#373772'; export const mainBlack = '#191919'; -export const mainGray = '#7C7C7C'; +export const mainLightBlue = '#F1F1F6'; export const mainOrange = '#FF5D53'; - -export const backgroundBlue = '#F1F1F6'; export const inactivateGray = '#D6D4D4'; diff --git a/components/checkListComponent/ButtonsOfTypeA.tsx b/components/checkListComponent/ButtonsOfTypeA.tsx new file mode 100644 index 0000000..6a5ed92 --- /dev/null +++ b/components/checkListComponent/ButtonsOfTypeA.tsx @@ -0,0 +1,56 @@ +import React, { Dispatch, SetStateAction } from 'react'; +import { Pressable, Text, View } from 'react-native'; +import { checkList } from '../../types/checkListTypes'; +import styles from './style'; + +interface IProps { + mainQuestionItem: checkList; + checkLists: checkList[]; + setCheckLists: Dispatch>; +} + +function ButtonsOfTypeA({ mainQuestionItem, setCheckLists, checkLists }: IProps) { + return ( + <> + {mainQuestionItem.answer.ans.map((answer) => ( + + setCheckLists( + checkLists.map((questionItem) => + questionItem.questionId === mainQuestionItem.questionId + ? ({ + ...questionItem, + answer: { + ans: [ + ...questionItem.answer.ans.map((answerItem) => + answerItem.type === answer.type + ? { ...answerItem, val: true } + : { ...answerItem, val: false } + ), + ], + }, + } as checkList) + : ({ ...questionItem } as checkList) + ) + ) + } + style={ + answer.val + ? answer.redType + ? [styles.typeABtnWrapper, styles.checkListFocusedOrange] + : [styles.typeABtnWrapper, styles.checkListFocusedBlue] + : [styles.typeABtnWrapper] + } + > + + + {answer.type} + + + + ))} + + ); +} + +export default ButtonsOfTypeA; diff --git a/components/checkListComponent/ButtonsOfTypeD.tsx b/components/checkListComponent/ButtonsOfTypeD.tsx new file mode 100644 index 0000000..1031b1c --- /dev/null +++ b/components/checkListComponent/ButtonsOfTypeD.tsx @@ -0,0 +1,54 @@ +import React, { Dispatch, SetStateAction } from 'react'; +import { Pressable, Text, View } from 'react-native'; +import { checkList } from '../../types/checkListTypes'; +import styles from './style'; + +interface IProps { + mainQuestionItem: checkList; + checkLists: checkList[]; + setCheckLists: Dispatch>; +} + +function ButtonsOfTypeD({ mainQuestionItem, setCheckLists, checkLists }: IProps) { + return ( + <> + {mainQuestionItem.answer.ans.map((answer) => ( + + setCheckLists( + checkLists.map((questionItem) => + questionItem.questionId === mainQuestionItem.questionId + ? ({ + ...questionItem, + answer: { + ans: [ + ...questionItem.answer.ans.map((answerItem) => + answerItem.type === answer.type + ? { ...answerItem, val: !answerItem.val } + : { ...answerItem } + ), + ], + }, + } as checkList) + : ({ ...questionItem } as checkList) + ) + ) + } + style={ + answer.val + ? [styles.typeDBtnWrapper, styles.checkListFocusedBlue] + : [styles.typeDBtnWrapper] + } + > + + + {answer.type} + + + + ))} + + ); +} + +export default ButtonsOfTypeD; diff --git a/components/checkListComponent/CheckListComponent.tsx b/components/checkListComponent/CheckListComponent.tsx new file mode 100644 index 0000000..c1746f3 --- /dev/null +++ b/components/checkListComponent/CheckListComponent.tsx @@ -0,0 +1,57 @@ +import React, { Dispatch, SetStateAction } from 'react'; +import { Text, View } from 'react-native'; +import { checkList } from '../../types/checkListTypes'; +import styles from './style'; +import ButtonsOfTypeA from './ButtonsOfTypeA'; +import ButtonsOfTypeD from './ButtonsOfTypeD'; + +interface IProps { + checkLists: checkList[]; + setCheckLists: Dispatch>; +} + +function CheckListComponent({ checkLists, setCheckLists }: IProps) { + return ( + <> + {checkLists.map((mainQuestionItem: checkList) => ( + + {mainQuestionItem.question} + + {mainQuestionItem.subCategory && ( + + ๐Ÿ“˜ + {mainQuestionItem.subCategory} + + )} + {mainQuestionItem.description && ( + + ๐Ÿ‘€ + {mainQuestionItem.description} + + )} + + + {mainQuestionItem.type === 'A' && ( + + )} + {mainQuestionItem.type === 'B' && b} + {mainQuestionItem.type === 'C' && c} + {mainQuestionItem.type === 'D' && ( + + )} + + + ))} + + ); +} + +export default CheckListComponent; diff --git a/components/checkListComponent/style.tsx b/components/checkListComponent/style.tsx new file mode 100644 index 0000000..f52a7ad --- /dev/null +++ b/components/checkListComponent/style.tsx @@ -0,0 +1,67 @@ +import { StyleSheet } from 'react-native'; +import { mainBlue, mainLightBlue, mainOrange } from '../../color'; + +const styles = StyleSheet.create({ + checkListCards: { marginVertical: 30, marginHorizontal: 17 }, + whiteCard: { + backgroundColor: 'white', + padding: 30, + borderRadius: 14, + marginVertical: 12, + }, + checkListMainTitle: { fontSize: 20 }, + buttonsOfCheckList: { + marginTop: 50, + flexDirection: 'row', + flexWrap: 'wrap', + }, + buttonOfCheckList: { + backgroundColor: mainLightBlue, + borderRadius: 5, + justifyContent: 'center', + alignItems: 'center', + }, + + subTitles: { marginTop: 19 }, + checkListSubTitle: { flexDirection: 'row' }, + checkListGrayText: { color: '#7C7C7C', lineHeight: 24 }, + checkListWhiteText: { color: 'white', lineHeight: 24 }, + typeABtnWrapper: { + marginRight: 19, + borderRadius: 4, + width: 100, + height: 44, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: mainLightBlue, + }, + checkListFocusedBlue: { backgroundColor: mainBlue }, + checkListFocusedOrange: { backgroundColor: mainOrange }, + + rightArrowWrapper: { + width: 55, + height: 55, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: mainBlue, + borderRadius: 55, + position: 'absolute', + right: 20, + bottom: 50, + }, + + emoji: { lineHeight: 24, fontSize: 12 }, + + typeDBtnWrapper: { + flexDirection: 'row', + margin: 5, + borderRadius: 4, + paddingHorizontal: 15, + height: 44, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: mainLightBlue, + }, +}); + +export default styles; diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 3b60c73..9e8157a 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -278,6 +278,8 @@ PODS: - React-Core - react-native-splash-screen (3.3.0): - React-Core + - react-native-webview (11.17.2): + - React-Core - React-perflogger (0.67.2) - React-RCTActionSheet (0.67.2): - React-Core/RCTActionSheetHeaders (= 0.67.2) @@ -427,6 +429,7 @@ DEPENDENCIES: - react-native-pager-view (from `../node_modules/react-native-pager-view`) - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`) - react-native-splash-screen (from `../node_modules/react-native-splash-screen`) + - react-native-webview (from `../node_modules/react-native-webview`) - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`) - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`) - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`) @@ -503,6 +506,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native-safe-area-context" react-native-splash-screen: :path: "../node_modules/react-native-splash-screen" + react-native-webview: + :path: "../node_modules/react-native-webview" React-perflogger: :path: "../node_modules/react-native/ReactCommon/reactperflogger" React-RCTActionSheet: @@ -572,6 +577,7 @@ SPEC CHECKSUMS: react-native-pager-view: 7f00d63688f7df9fad86dfb0154814419cc5eb8d react-native-safe-area-context: 584dc04881deb49474363f3be89e4ca0e854c057 react-native-splash-screen: 4312f786b13a81b5169ef346d76d33bc0c6dc457 + react-native-webview: 380c1a03ec94b7ed764dac8db1e7c9952d08c93a React-perflogger: 3c9bb7372493e49036f07a82c44c8cf65cbe88db React-RCTActionSheet: 052606483045a408693aa7e864410b4a052f541a React-RCTAnimation: 08d4cac13222bb1348c687a0158dfd3b577cdb63 diff --git a/ios/amattang.xcodeproj/project.pbxproj b/ios/amattang.xcodeproj/project.pbxproj index eea3f33..b371255 100644 --- a/ios/amattang.xcodeproj/project.pbxproj +++ b/ios/amattang.xcodeproj/project.pbxproj @@ -484,7 +484,7 @@ ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; CLANG_ENABLE_MODULES = YES; CURRENT_PROJECT_VERSION = 1; - DEVELOPMENT_TEAM = BK8MHM4TGL; + DEVELOPMENT_TEAM = ""; ENABLE_BITCODE = NO; "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64; INFOPLIST_FILE = amattang/Info.plist; @@ -497,7 +497,7 @@ "-ObjC", "-lc++", ); - PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; + PRODUCT_BUNDLE_IDENTIFIER = com.ninano.amattang; PRODUCT_NAME = amattang; SWIFT_OPTIMIZATION_LEVEL = "-Onone"; SWIFT_VERSION = 5.0; @@ -524,7 +524,7 @@ "-ObjC", "-lc++", ); - PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; + PRODUCT_BUNDLE_IDENTIFIER = com.ninano.amattang; PRODUCT_NAME = amattang; SWIFT_VERSION = 5.0; VERSIONING_SYSTEM = "apple-generic"; diff --git a/navigation/BottomNavigation/BottomNavigation.tsx b/navigation/Main/BottomNavigation/BottomNavigation.tsx similarity index 63% rename from navigation/BottomNavigation/BottomNavigation.tsx rename to navigation/Main/BottomNavigation/BottomNavigation.tsx index c7d9eb3..b42b230 100644 --- a/navigation/BottomNavigation/BottomNavigation.tsx +++ b/navigation/Main/BottomNavigation/BottomNavigation.tsx @@ -1,13 +1,12 @@ import React from 'react'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { useNavigation } from '@react-navigation/native'; -import { Image, StyleSheet, Text, View } from 'react-native'; - -import Home from '../../screens/bottomTab/Home'; -import Map from '../../screens/bottomTab/Map'; -import { BottomTabParams, NestedProps } from '../navigationTypes'; -import { mainBlue, mainGray } from '../../color'; +import { Image, Text, View } from 'react-native'; +import Home from '../../../screens/bottomTab/Home'; +import Map from '../../../screens/bottomTab/Map'; +import { BottomTabParams, NestedProps } from '../../../types/navigationTypes'; +import styles from './styles'; const Tab = createBottomTabNavigator(); function BottomNavigation() { @@ -30,9 +29,9 @@ function BottomNavigation() { ), tabBarIcon: ({ focused }) => focused ? ( - + ) : ( - + ), }} /> @@ -69,9 +68,9 @@ function BottomNavigation() { ), tabBarIcon: ({ focused }) => focused ? ( - + ) : ( - + ), }} /> @@ -79,28 +78,4 @@ function BottomNavigation() { ); } -const styles = StyleSheet.create({ - activeColor: { color: mainBlue }, - inactiveColor: { color: mainGray }, - title: { fontSize: 12, fontWeight: 'normal' }, - btnWrapper: { - position: 'absolute', - width: 55, - height: 55, - backgroundColor: mainBlue, - borderRadius: 50, - marginHorizontal: 170, - bottom: 5, - justifyContent: 'center', - alignItems: 'center', - }, - BtnText: { - color: 'white', - fontSize: 35, - fontWeight: '300', - paddingBottom: 2.5, - paddingLeft: 2.5, - }, -}); - export default BottomNavigation; diff --git a/navigation/Main/BottomNavigation/styles.tsx b/navigation/Main/BottomNavigation/styles.tsx new file mode 100644 index 0000000..840f3dd --- /dev/null +++ b/navigation/Main/BottomNavigation/styles.tsx @@ -0,0 +1,28 @@ +import { StyleSheet } from 'react-native'; +import { mainBlue, mainLightBlue } from '../../../color'; + +const styles = StyleSheet.create({ + activeColor: { color: mainBlue }, + inactiveColor: { color: mainLightBlue }, + title: { fontSize: 12, fontWeight: 'normal' }, + btnWrapper: { + position: 'absolute', + width: 55, + height: 55, + backgroundColor: mainBlue, + borderRadius: 50, + marginHorizontal: 170, + bottom: 5, + justifyContent: 'center', + alignItems: 'center', + }, + BtnText: { + color: 'white', + fontSize: 35, + fontWeight: '300', + paddingBottom: 2.5, + paddingLeft: 2.5, + }, +}); + +export default styles; diff --git a/navigation/RootNav.tsx b/navigation/Main/RootNav.tsx similarity index 90% rename from navigation/RootNav.tsx rename to navigation/Main/RootNav.tsx index c345e57..63782b7 100644 --- a/navigation/RootNav.tsx +++ b/navigation/Main/RootNav.tsx @@ -3,7 +3,7 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack'; import BottomNavigation from './BottomNavigation/BottomNavigation'; import CheckListStackNav from './StackNavigation/StackNavigationOfCheckList'; -import { RootStackProps } from './navigationTypes'; +import { RootStackProps } from '../../types/navigationTypes'; const RootNav = createNativeStackNavigator(); diff --git a/navigation/StackNavigation/BasicCheckList/BasiclCheckList.tsx b/navigation/Main/StackNavigation/BasicCheckList/BasiclCheckList.tsx similarity index 70% rename from navigation/StackNavigation/BasicCheckList/BasiclCheckList.tsx rename to navigation/Main/StackNavigation/BasicCheckList/BasiclCheckList.tsx index 08b3337..e2bcf4c 100644 --- a/navigation/StackNavigation/BasicCheckList/BasiclCheckList.tsx +++ b/navigation/Main/StackNavigation/BasicCheckList/BasiclCheckList.tsx @@ -1,10 +1,10 @@ import React from 'react'; import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'; -import BasicInfoOfBasicCheckList from '../../../screens/BasicCheckList/BasicInfoOfBasicCheckList'; -import OutsideOfBasicCheckList from '../../../screens/BasicCheckList/OutsideOfBasicCheckList'; -import InsideOfBasicCheckList from '../../../screens/BasicCheckList/InsideOfBasicCheckList'; -import MyItemOfBasicCheckList from '../../../screens/BasicCheckList/MyItemOfBasicCheckList'; +import BasicInfoOfBasicCheckList from '../../../../screens/BasicCheckList/BasicInfoOfBasicCheckList'; +import OutsideOfBasicCheckList from '../../../../screens/BasicCheckList/OutsideOfBasicCheckList'; +import InsideOfBasicCheckList from '../../../../screens/BasicCheckList/InsideOfBasicCheckList'; +import MyItemOfBasicCheckList from '../../../../screens/BasicCheckList/MyItemOfBasicCheckList'; const Tab = createMaterialTopTabNavigator(); diff --git a/navigation/StackNavigation/StackNavigationOfCheckList.tsx b/navigation/Main/StackNavigation/StackNavigationOfCheckList.tsx similarity index 79% rename from navigation/StackNavigation/StackNavigationOfCheckList.tsx rename to navigation/Main/StackNavigation/StackNavigationOfCheckList.tsx index ba1165a..3772cef 100644 --- a/navigation/StackNavigation/StackNavigationOfCheckList.tsx +++ b/navigation/Main/StackNavigation/StackNavigationOfCheckList.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import { Image, Pressable, StyleSheet, Text } from 'react-native'; +import { Image, Pressable } from 'react-native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import BasicCheckList from './BasicCheckList/BasiclCheckList'; -import { CheckListStackParamsList, CheckListStackProps } from '../navigationTypes'; - +import { CheckListStackParamsList, CheckListStackProps } from '../../../types/navigationTypes'; +import styles from './styles'; const NativeStack = createNativeStackNavigator(); function CheckListStackNav({ navigation }: CheckListStackProps) { @@ -22,7 +22,7 @@ function CheckListStackNav({ navigation }: CheckListStackProps) { navigation.goBack()}> ), @@ -33,11 +33,4 @@ function CheckListStackNav({ navigation }: CheckListStackProps) { ); } -const styles = StyleSheet.create({ - leftArrowImg: { - width: 11, - height: 19, - }, -}); - export default CheckListStackNav; diff --git a/navigation/Main/StackNavigation/styles.tsx b/navigation/Main/StackNavigation/styles.tsx new file mode 100644 index 0000000..076c19c --- /dev/null +++ b/navigation/Main/StackNavigation/styles.tsx @@ -0,0 +1,10 @@ +import { StyleSheet } from 'react-native'; + +const styles = StyleSheet.create({ + leftArrowImg: { + width: 11, + height: 19, + }, +}); + +export default styles; diff --git a/navigation/OnBoarding/StackNavigationOfOnBoarding.tsx b/navigation/OnBoarding/StackNavigationOfOnBoarding.tsx new file mode 100644 index 0000000..6f85c53 --- /dev/null +++ b/navigation/OnBoarding/StackNavigationOfOnBoarding.tsx @@ -0,0 +1,73 @@ +import React, { Dispatch, SetStateAction } from 'react'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; + +import { OnBoardingStackParamsList, OnBoardingStackProps } from '../../types/navigationTypes'; +import Login from '../../screens/landing/Login'; +import OnBoarding from '../../screens/landing/OnBoarding'; +import Landing from '../../screens/landing/Landing'; +import { Image, Pressable } from 'react-native'; +import Map from '../../screens/landing/Map'; +import { useNavigation } from '@react-navigation/native'; + +const Stack = createNativeStackNavigator(); + +interface IProps { + setIsLogin: Dispatch>; +} + +function OnBoardingStack({ setIsLogin }: IProps) { + const navigation = useNavigation(); + + return ( + + + } + options={{ + headerTransparent: true, + title: '', + headerLeft: () => ( + navigation.goBack()}> + + + ), + }} + /> + ( + navigation.goBack()}> + + + ), + }} + /> + ( + navigation.goBack()}> + + + ), + }} + /> + + ); +} + +export default OnBoardingStack; diff --git a/package-lock.json b/package-lock.json index dc9f13b..9e56e2f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "amattang", "version": "0.0.1", "dependencies": { + "@actbase/react-daum-postcode": "^1.0.4", "@react-native-community/masked-view": "^0.1.11", "@react-navigation/bottom-tabs": "^6.2.0", "@react-navigation/drawer": "^6.3.1", @@ -24,7 +25,8 @@ "react-native-safe-area-context": "^3.3.2", "react-native-screens": "^3.11.1", "react-native-splash-screen": "^3.3.0", - "react-native-tab-view": "^3.1.1" + "react-native-tab-view": "^3.1.1", + "react-native-webview": "^11.17.2" }, "devDependencies": { "@babel/core": "^7.12.9", @@ -44,6 +46,11 @@ "typescript": "^4.5.5" } }, + "node_modules/@actbase/react-daum-postcode": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@actbase/react-daum-postcode/-/react-daum-postcode-1.0.4.tgz", + "integrity": "sha512-cTUnwfnKLM9LMh4dBPxbfGeCjpbJQcq/R6oW2aEJO20qz4i8cA7sPf0HkUyYqENfuGFU+vbsSJ8LJwNhTYoFLQ==" + }, "node_modules/@ampproject/remapping": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.1.tgz", @@ -10369,6 +10376,27 @@ "react-native-pager-view": "*" } }, + "node_modules/react-native-webview": { + "version": "11.17.2", + "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-11.17.2.tgz", + "integrity": "sha512-7Sac02xq11qFACJmSUuCnH0aUFtSWUvSRC09EZ2qwNXq4IvT05xlX6978nlKUXf2ljw/0qZIzqbKzuXnu6Wq8Q==", + "dependencies": { + "escape-string-regexp": "2.0.0", + "invariant": "2.2.4" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, + "node_modules/react-native-webview/node_modules/escape-string-regexp": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz", + "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==", + "engines": { + "node": ">=8" + } + }, "node_modules/react-native/node_modules/ws": { "version": "6.2.2", "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz", @@ -12791,6 +12819,11 @@ } }, "dependencies": { + "@actbase/react-daum-postcode": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@actbase/react-daum-postcode/-/react-daum-postcode-1.0.4.tgz", + "integrity": "sha512-cTUnwfnKLM9LMh4dBPxbfGeCjpbJQcq/R6oW2aEJO20qz4i8cA7sPf0HkUyYqENfuGFU+vbsSJ8LJwNhTYoFLQ==" + }, "@ampproject/remapping": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.1.tgz", @@ -20030,6 +20063,22 @@ "integrity": "sha512-M5pRN6utQfytKWoKlKVzg5NbkYu308qNoW1khGTtEOTs1k14p2dHJ/BWOJoJYHKbPVUyZldbG9MFT7gUl4YHnw==", "requires": {} }, + "react-native-webview": { + "version": "11.17.2", + "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-11.17.2.tgz", + "integrity": "sha512-7Sac02xq11qFACJmSUuCnH0aUFtSWUvSRC09EZ2qwNXq4IvT05xlX6978nlKUXf2ljw/0qZIzqbKzuXnu6Wq8Q==", + "requires": { + "escape-string-regexp": "2.0.0", + "invariant": "2.2.4" + }, + "dependencies": { + "escape-string-regexp": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz", + "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==" + } + } + }, "react-refresh": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.4.3.tgz", diff --git a/package.json b/package.json index c57dcb1..9581f6d 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "lint": "eslint . --ext .js,.jsx,.ts,.tsx" }, "dependencies": { + "@actbase/react-daum-postcode": "^1.0.4", "@react-native-community/masked-view": "^0.1.11", "@react-navigation/bottom-tabs": "^6.2.0", "@react-navigation/drawer": "^6.3.1", @@ -26,7 +27,8 @@ "react-native-safe-area-context": "^3.3.2", "react-native-screens": "^3.11.1", "react-native-splash-screen": "^3.3.0", - "react-native-tab-view": "^3.1.1" + "react-native-tab-view": "^3.1.1", + "react-native-webview": "^11.17.2" }, "devDependencies": { "@babel/core": "^7.12.9", diff --git a/react-native.config.js b/react-native.config.js new file mode 100644 index 0000000..240776e --- /dev/null +++ b/react-native.config.js @@ -0,0 +1,3 @@ +module.exports = { + assets: ['./src/assets/fonts'], +}; diff --git a/screens/landing/Landing.tsx b/screens/landing/Landing.tsx new file mode 100644 index 0000000..ea0e7f4 --- /dev/null +++ b/screens/landing/Landing.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { Image, Pressable, Text, View } from 'react-native'; +import styles from './styles'; +import { OnBoardingStackProps } from '../../types/navigationTypes'; + +function Landing({ navigation }: OnBoardingStackProps) { + const onLoginHandler = () => { + navigation.navigate('login'); + }; + + const onOnBoardingHandler = () => { + navigation.navigate('onBoarding'); + }; + + return ( + + + + ์•„๋งž๋•…๊ณผ ํ•จ๊ป˜ ๊ผผ๊ผผํ•œ ์ž์ทจ์ƒํ™œ์„ + {'\n'}์‹œ์ž‘ํ•ด๋ณผ๊นŒ์š”? + + + 50์—ฌ๊ฐ€์ง€์˜ ์ฒดํฌ๋ฆฌ์ŠคํŠธ ํ•ญ๋ชฉ์œผ๋กœ + {'\n'}๊ฟˆ๊พธ๋˜ ์ง‘์„ ๋งŒ๋‚  ์ˆ˜ ์žˆ์–ด์š” + + + + + + + + ์‹œ์ž‘ํ•˜๊ธฐ + + + ์•„๋งž๋•… ๋ง›๋ณด๊ธฐ + + + + ); +} + +export default Landing; diff --git a/screens/landing/Login.tsx b/screens/landing/Login.tsx new file mode 100644 index 0000000..1e92754 --- /dev/null +++ b/screens/landing/Login.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { Image, Pressable, Text, View } from 'react-native'; +import styles from './styles'; + +function Login({ setIsLogin }: any) { + const onAppleLoginHandler = () => { + setIsLogin(true); + }; + + const onKakaoLoginHandler = () => { + setIsLogin(true); + }; + + return ( + + + + ๋‚˜๋งŒ์˜ ์ฒดํฌ๋ฆฌ์ŠคํŠธ๋ฅผ ์œ„ํ•ด + {'\n'}๊ณ„์ •์ด ํ•„์š”ํ•ด์š” + + ๋กœ๊ทธ์ธ ํ•˜๊ณ  ๋” ๋งŽ์€ ์ฒดํฌ๋ฆฌ์ŠคํŠธ๋ฅผ ๋ฐ›์•„๋ณด์„ธ์š” + + + + + + + + + + Apple๋กœ ์‹œ์ž‘ํ•˜๊ธฐ + + + + + + ์นด์นด์˜คํ†ก์œผ๋กœ ์‹œ์ž‘ํ•˜๊ธฐ + + + + ); +} + +export default Login; diff --git a/screens/landing/Map.tsx b/screens/landing/Map.tsx new file mode 100644 index 0000000..af3d9f7 --- /dev/null +++ b/screens/landing/Map.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { Text, View } from 'react-native'; +import styles from './styles'; + +function Map() { + return ( + <> + + asdf + + + ); +} + +export default Map; diff --git a/screens/landing/OnBoarding.tsx b/screens/landing/OnBoarding.tsx new file mode 100644 index 0000000..2100eea --- /dev/null +++ b/screens/landing/OnBoarding.tsx @@ -0,0 +1,53 @@ +import React, { useState } from 'react'; +import { Image, Pressable, ScrollView, Text, View } from 'react-native'; +import styles from './styles'; +import { OnBoardingStackProps } from '../../types/navigationTypes'; +import { checkList } from '../../types/checkListTypes'; +import { response } from './onBoardingMockUpData'; +import CheckListComponent from '../../components/checkListComponent/CheckListComponent'; + +function OnBoarding({ navigation }: OnBoardingStackProps) { + const [checkLists, setCheckLists] = useState(response); + const onMapHandler = () => { + navigation.navigate('map'); + }; + + return ( + <> + + + ์šฐ๋ฆฌ์ง‘์„ ์ฒดํฌํ•˜๋ฉฐ {'\n'}์•„๋งž๋•…์„ ๋ฏธ๋ฆฌ ๊ฒฝํ—˜ํ•ด๋ณด์„ธ์š” + + + + ์ฃผ์†Œ๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š” + + console.log('์—ฌ๊ธฐ์— ๋ˆ„๋ฅด๋ฉด ์ด์ œ ์ง€๋„ ๊ฒ€์ƒ‰ ๊ถˆ๊ถˆ')} + style={[styles.directInputOfAddress, styles.buttonOfCheckList]} + > + ์ง์ ‘ ์ž…๋ ฅ + + + + ํ˜„์œ„์น˜ + + + + + + + navigation.navigate('login')} style={styles.rightArrowWrapper}> + + + + ); +} + +export default OnBoarding; diff --git a/screens/landing/onBoardingMockUpData.ts b/screens/landing/onBoardingMockUpData.ts new file mode 100644 index 0000000..c481ef8 --- /dev/null +++ b/screens/landing/onBoardingMockUpData.ts @@ -0,0 +1,111 @@ +import { checkList } from '../../types/checkListTypes'; + +export const response: checkList[] = [ + { + questionId: 'question1', + question: '์ฐฝํ‹€์ด ๊นจ๋—ํ•œ๊ฐ€์š”?', + mainCategory: '์™ธ๋ถ€ ์‹œ์„ค', + subCategory: null, + rule: null, + description: '๊ณฐํŒก์ด๊ฐ€ ์—†๋Š”์ง€ ํ™•์ธ ํ›„ ์ฒญ์†Œ๋ฅผ ์š”์ฒญํ•˜์„ธ์š”', + emoji: ':)', + type: 'A', + answer: { + answerId: 'answerId1', + ans: [ + { type: '์˜ˆ', val: false, redType: false }, + { type: '์•„๋‹ˆ์˜ค', val: false, redType: true }, + ], + }, + }, + { + questionId: 'question2', + question: '๊ฐˆ๋ผ์ง„ ํ‹ˆ์ด ์žˆ๋‚˜์š”?', + mainCategory: '์™ธ๋ถ€ ์‹œ์„ค', + subCategory: null, + rule: null, + description: '๋ฒฝ์˜ ํ‹ˆ์ƒˆ๋ฅผ ํ†ตํ•ด ๋ฒŒ๋ ˆ๊ฐ€ ์ถœ๋ชฐํ•œ๋‹ค', + emoji: ':)', + type: 'A', + answer: { + answerId: 'answerId2', + ans: [ + { type: '์˜ˆ', val: false, redType: false }, + { type: '์•„๋‹ˆ์˜ค', val: false, redType: true }, + ], + }, + }, + { + questionId: 'question3', + question: '๋ณ€๊ธฐ์˜ ๋ฌผ์ด ์ž˜ ๋‚ด๋ ค๊ฐ€๋‚˜์š”?', + mainCategory: '์™ธ๋ถ€ ์‹œ์„ค', + subCategory: '์„ธ๋ฉด๋Œ€ ๋ฌผ์„ ํ‹€์–ด ๋†“์€ ์ƒํƒœ๋กœ ๋ณ€๊ธฐ ๋ฌผ์„ ๋‚ด๋ ค๋ณด์„ธ์š”์š”์š”์š”์š”์š” ', + rule: null, + description: '์˜ค๋ž˜๋œ ๊ฑด๋ฌผ์˜ ๊ณ ์ธต์ด๋ผ๋ฉด ํŠนํžˆ ์ฃผ์˜ํ•ด์ฃผ์„ธ์š”', + emoji: ':)', + type: 'A', + answer: { + answerId: 'answerId3', + ans: [ + { type: '์˜ˆ', val: false, redType: false }, + { type: '์•„๋‹ˆ์˜ค', val: false, redType: true }, + ], + }, + }, + { + questionId: 'question4', + question: '์ด์ค‘ ์ž ๊ธˆ ์žฅ์น˜๊ฐ€ ์„ค์น˜ ๋˜์–ด ์žˆ๋‚˜์š”?', + mainCategory: '์™ธ๋ถ€ ์‹œ์„ค', + subCategory: null, + rule: null, + description: '์„ค์น˜๋ฅผ ์š”๊ตฌํ•  ์ˆ˜ ์žˆ์–ด์š”', + emoji: ':)', + type: 'A', + answer: { + answerId: 'answerId4', + ans: [ + { type: '์˜ˆ', val: false, redType: false }, + { type: '์•„๋‹ˆ์˜ค', val: false, redType: true }, + ], + }, + }, + { + questionId: 'question5', + question: '์ฃผ๋ณ€ ํŽธ์˜์‹œ์„ค์„ ํ™•์ธํ•˜์„ธ์š”', + mainCategory: '์™ธ๋ถ€ ์‹œ์„ค', + subCategory: null, + rule: '', + description: '์ฃผ์†Œ ์ž…๋ ฅ์‹œ ํ‘œ์‹œ๋˜๋Š” ์ง€๋„๋ฅผ ํ™œ์šฉํ•˜์„ธ์š”', + emoji: ':)', + type: 'D', + answer: { + answerId: 'answer5', + ans: [ + { + type: '๋ณ‘์›', + val: false, + }, + { + type: 'ํŽธ์˜์ ', + val: false, + }, + { + type: '๋งˆํŠธ', + val: false, + }, + { + type: '์•ฝ๊ตญ', + val: false, + }, + { + type: '๊ณต์›', + val: false, + }, + { + type: '์„ธํƒ์†Œ', + val: false, + }, + ], + }, + }, +]; diff --git a/screens/landing/styles.tsx b/screens/landing/styles.tsx new file mode 100644 index 0000000..80d62e9 --- /dev/null +++ b/screens/landing/styles.tsx @@ -0,0 +1,113 @@ +import { StyleSheet, Platform } from 'react-native'; +import { mainBlack, mainBlue, mainLightBlue, mainOrange } from '../../color'; + +const styles = StyleSheet.create({ + landingPageFullScreen: { backgroundColor: 'white', flex: 1, fontFamily: 'AppleSDGothicNeoM' }, + onBoardingFullScreen: { + backgroundColor: mainLightBlue, + flex: 1, + fontFamily: 'AppleSDGothicNeoM', + }, + upperElement: + Platform.OS === 'ios' + ? { marginTop: 110, marginHorizontal: 17 } + : { marginTop: 50, marginHorizontal: 17 }, + lowerElement: + Platform.OS === 'ios' + ? { position: 'absolute', bottom: 60, marginHorizontal: '5%', width: '90%' } + : { position: 'absolute', bottom: 40, marginHorizontal: '5%', width: '90%' }, + mainText: { fontSize: 24, lineHeight: 40, color: mainBlack }, + subText: { marginTop: 32, lineHeight: 30, color: mainBlack }, + + mainImage: { alignItems: 'flex-end', marginTop: 30 }, + loginImage: { alignItems: 'flex-end', marginRight: 30, marginTop: 80 }, + + bottomBtn: { + height: 56, + borderRadius: 8, + justifyContent: 'center', + alignItems: 'center', + flexDirection: 'row', + }, + bottomImg: { marginRight: 10 }, + + loginBtn: { backgroundColor: mainBlue }, + loginText: { color: 'white' }, + onBoardingBtn: { backgroundColor: mainLightBlue, marginTop: 12 }, + onBoardingText: { color: mainBlack }, + + appleLoginBtn: { backgroundColor: 'black' }, + appleLoginText: { color: 'white' }, + kakaoLoginBtn: { backgroundColor: '#FEE500', marginTop: 12 }, + kakaoLoginText: {}, + + checkListCards: { marginVertical: 30, marginHorizontal: 17 }, + whiteCard: { + backgroundColor: 'white', + padding: 30, + borderRadius: 14, + marginVertical: 12, + }, + checkListMainTitle: { fontSize: 20 }, + buttonsOfCheckList: { + marginTop: 50, + flexDirection: 'row', + flexWrap: 'wrap', + }, + buttonOfCheckList: { + backgroundColor: mainLightBlue, + borderRadius: 5, + justifyContent: 'center', + alignItems: 'center', + }, + directInputOfAddress: { + width: 127, + height: 44, + }, + directInputTextOfAddress: { color: 'gray' }, + mapInputOfAddress: { width: 89, marginLeft: 14, flexDirection: 'row' }, + mapInputImageOfAddress: { marginRight: 8 }, + + subTitles: { marginTop: 19 }, + checkListSubTitle: { flexDirection: 'row' }, + checkListGrayText: { color: '#7C7C7C', lineHeight: 24 }, + checkListWhiteText: { color: 'white', lineHeight: 24 }, + typeABtnWrapper: { + marginRight: 19, + borderRadius: 4, + width: 100, + height: 44, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: mainLightBlue, + }, + checkListFocusedBlue: { backgroundColor: mainBlue }, + checkListFocusedOrange: { backgroundColor: mainOrange }, + + rightArrowWrapper: { + width: 55, + height: 55, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: mainBlue, + borderRadius: 55, + position: 'absolute', + right: 20, + bottom: 50, + }, + + emoji: { lineHeight: 24, fontSize: 12 }, + + typeDBtnWrapper: { + flexDirection: 'row', + margin: 5, + borderRadius: 4, + paddingHorizontal: 15, + height: 44, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: mainLightBlue, + }, +}); + +export default styles; diff --git a/types/checkListTypes.ts b/types/checkListTypes.ts new file mode 100644 index 0000000..750b2dc --- /dev/null +++ b/types/checkListTypes.ts @@ -0,0 +1,23 @@ +export interface answerButtonOfType { + val: boolean; + redType?: boolean; + type: string; +} + +export interface answerOfType { + answer: { + answerId: string; + ans: Array; + }; +} + +export interface checkList extends answerOfType { + subCategory: string | null; + questionId: string; + question: string; + emoji: string; + mainCategory: string | null; + rule: string | null; + description: string; + type: 'A' | 'B' | 'C' | 'D'; +} diff --git a/navigation/navigationTypes.tsx b/types/navigationTypes.ts similarity index 83% rename from navigation/navigationTypes.tsx rename to types/navigationTypes.ts index 68cc2e2..b44e2ac 100644 --- a/navigation/navigationTypes.tsx +++ b/types/navigationTypes.ts @@ -3,7 +3,16 @@ import { BottomTabNavigationProp, BottomTabScreenProps } from '@react-navigation import { CompositeNavigationProp, NavigatorScreenParams } from '@react-navigation/native'; import { MaterialTopTabScreenProps } from '@react-navigation/material-top-tabs'; -// checkListstack +// onBoardingStack +export type OnBoardingStackParamsList = { + landing: undefined; + login: undefined; + onBoarding: undefined; + map: undefined; +}; +export type OnBoardingStackProps = NativeStackScreenProps; + +// checkListStack export type CheckListStackParamsList = { basicCheckList: undefined; }; diff --git a/yarn.lock b/yarn.lock index 06366b6..3ba4f39 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,11 @@ # yarn lockfile v1 +"@actbase/react-daum-postcode@^1.0.4": + "integrity" "sha512-cTUnwfnKLM9LMh4dBPxbfGeCjpbJQcq/R6oW2aEJO20qz4i8cA7sPf0HkUyYqENfuGFU+vbsSJ8LJwNhTYoFLQ==" + "resolved" "https://registry.npmjs.org/@actbase/react-daum-postcode/-/react-daum-postcode-1.0.4.tgz" + "version" "1.0.4" + "@ampproject/remapping@^2.0.0": "integrity" "sha512-Aolwjd7HSC2PyY0fDj/wA/EimQT4HfEnFYNp5s9CQlrdhyvWTtvZ5YzrUPu6R6/1jKiUlxu8bUhkdSnKHNAHMA==" "resolved" "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.1.tgz" @@ -2858,6 +2863,11 @@ "resolved" "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz" "version" "4.0.0" +"escape-string-regexp@2.0.0": + "integrity" "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==" + "resolved" "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz" + "version" "2.0.0" + "escodegen@^2.0.0": "integrity" "sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw==" "resolved" "https://registry.npmjs.org/escodegen/-/escodegen-2.0.0.tgz" @@ -3704,7 +3714,7 @@ "has" "^1.0.3" "side-channel" "^1.0.4" -"invariant@^2.2.4": +"invariant@^2.2.4", "invariant@2.2.4": "integrity" "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==" "resolved" "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz" "version" "2.2.4" @@ -5847,6 +5857,14 @@ "resolved" "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-3.1.1.tgz" "version" "3.1.1" +"react-native-webview@^11.17.2": + "integrity" "sha512-7Sac02xq11qFACJmSUuCnH0aUFtSWUvSRC09EZ2qwNXq4IvT05xlX6978nlKUXf2ljw/0qZIzqbKzuXnu6Wq8Q==" + "resolved" "https://registry.npmjs.org/react-native-webview/-/react-native-webview-11.17.2.tgz" + "version" "11.17.2" + dependencies: + "escape-string-regexp" "2.0.0" + "invariant" "2.2.4" + "react-native@*", "react-native@>=0.57", "react-native@>=0.57.0", "react-native@>=0.65.0", "react-native@0.67.2": "integrity" "sha512-grEtpOLLvtSg8Bivg0ffVRCjTkresqMt7Jdog/geF6VAYhb4RnLaaUCWvyrfyB9buf135FKnqg5BIuve/XQNXA==" "resolved" "https://registry.npmjs.org/react-native/-/react-native-0.67.2.tgz"