Merge pull request #21 from Amattang/feat/#14-onboarding

Feat/#14 onboarding

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 (
     <>
       <NavigationContainer>
-        <RootNav />
+        {isLogin ? <RootNav /> : <OnBoardingStack setIsLogin={setIsLogin} />}
       </NavigationContainer>
     </>
   );

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';

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<SetStateAction<checkList[]>>;
+}
+
+function ButtonsOfTypeA({ mainQuestionItem, setCheckLists, checkLists }: IProps) {
+  return (
+    <>
+      {mainQuestionItem.answer.ans.map((answer) => (
+        <Pressable
+          onPress={() =>
+            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]
+          }
+        >
+          <View>
+            <Text style={answer.val ? styles.checkListWhiteText : styles.checkListGrayText}>
+              {answer.type}
+            </Text>
+          </View>
+        </Pressable>
+      ))}
+    </>
+  );
+}
+
+export default ButtonsOfTypeA;

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<SetStateAction<checkList[]>>;
+}
+
+function ButtonsOfTypeD({ mainQuestionItem, setCheckLists, checkLists }: IProps) {
+  return (
+    <>
+      {mainQuestionItem.answer.ans.map((answer) => (
+        <Pressable
+          onPress={() =>
+            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]
+          }
+        >
+          <View>
+            <Text style={answer.val ? styles.checkListWhiteText : styles.checkListGrayText}>
+              {answer.type}
+            </Text>
+          </View>
+        </Pressable>
+      ))}
+    </>
+  );
+}
+
+export default ButtonsOfTypeD;

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<SetStateAction<checkList[]>>;
+}
+
+function CheckListComponent({ checkLists, setCheckLists }: IProps) {
+  return (
+    <>
+      {checkLists.map((mainQuestionItem: checkList) => (
+        <View style={styles.whiteCard} key={mainQuestionItem.questionId}>
+          <Text style={styles.checkListMainTitle}>{mainQuestionItem.question}</Text>
+          <View style={styles.subTitles}>
+            {mainQuestionItem.subCategory && (
+              <View style={styles.checkListSubTitle}>
+                <Text style={styles.emoji}>📘 </Text>
+                <Text style={styles.checkListGrayText}>{mainQuestionItem.subCategory}</Text>
+              </View>
+            )}
+            {mainQuestionItem.description && (
+              <View style={styles.checkListSubTitle}>
+                <Text style={styles.emoji}>👀 </Text>
+                <Text style={styles.checkListGrayText}>{mainQuestionItem.description}</Text>
+              </View>
+            )}
+          </View>
+          <View style={styles.buttonsOfCheckList}>
+            {mainQuestionItem.type === 'A' && (
+              <ButtonsOfTypeA
+                mainQuestionItem={mainQuestionItem}
+                setCheckLists={setCheckLists}
+                checkLists={checkLists}
+              />
+            )}
+            {mainQuestionItem.type === 'B' && <Text>b</Text>}
+            {mainQuestionItem.type === 'C' && <Text>c</Text>}
+            {mainQuestionItem.type === 'D' && (
+              <ButtonsOfTypeD
+                mainQuestionItem={mainQuestionItem}
+                setCheckLists={setCheckLists}
+                checkLists={checkLists}
+              />
+            )}
+          </View>
+        </View>
+      ))}
+    </>
+  );
+}
+
+export default CheckListComponent;

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;

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

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";