fix: QA

checkList 디폴트 사진, 삭제 및 복구 로직 수정, 자동 저장 로직 수정 #70
Amattang · Apr 4, 2022 · 90fbe4d · 90fbe4d
1 parent 4adcf33
commit 90fbe4d
Show file tree

Hide file tree

Showing 15 changed files with 97 additions and 65 deletions.
diff --git a/Context/CheckListByServer.tsx b/Context/CheckListByServer.tsx
@@ -1,5 +1,6 @@
 import React, { createContext, Dispatch, SetStateAction, useState } from 'react';
 import { choseCheckListByServerType, deletedCheckListByServerType } from '../types/checkListTypes';
+import axios from 'axios';
 
 interface contextType {
   deletedCheckListByServer: deletedCheckListByServerType;
@@ -8,6 +9,8 @@ interface contextType {
   setChoseCheckListByServer: Dispatch<SetStateAction<choseCheckListByServerType>>;
   checkListId: number | false;
   setCheckListId: Dispatch<SetStateAction<number | false>>;
+  onChoseCheckListHandler: () => void;
+  onDeleteCheckListHandler: (data: deletedCheckListByServerType) => void;
 }
 
 export const checkListCtx = createContext<contextType | null>(null);
@@ -22,6 +25,21 @@ const CheckListStore: React.FC = (props) => {
     typeM: {},
   });
   const [checkListId, setCheckListId] = useState<number | false>(false);
+  const onDeleteCheckListHandler = (data: deletedCheckListByServerType) => {
+    axios
+      .put(`/api/check-list/${checkListId}/common/question/status`, data)
+      .then(() => setDeletedCheckListByServer({ question: [] }));
+  };
+  const onChoseCheckListHandler = () => {
+    axios.put(`/api/check-list/${checkListId}/common/question`, choseCheckListByServer).then(() => {
+      setChoseCheckListByServer({
+        typeA: [],
+        typeB: [],
+        typeD: [],
+        typeM: {},
+      });
+    });
+  };
 
   return (
     <checkListCtx.Provider
@@ -32,6 +50,8 @@ const CheckListStore: React.FC = (props) => {
         setChoseCheckListByServer,
         checkListId,
         setCheckListId,
+        onChoseCheckListHandler,
+        onDeleteCheckListHandler,
       }}
     >
       {props.children}

diff --git a/assets/images/checkList/checkLIstDefaultImg.png b/assets/images/checkList/checkLIstDefaultImg.png
diff --git a/components/CheckListComponent/BottomSheetsOfDeletedCheckList.tsx b/components/CheckListComponent/BottomSheetsOfDeletedCheckList.tsx
@@ -47,7 +47,7 @@ function BottomSheetsOfDeletedCheckList({
         deletedCheckLists.filter((CheckLists: checkListTypes) => !CheckLists.visibility)
       );
       setCheckLists([...checkLists.filter((item) => item.visibility), ...deletedCheckLists]);
-      checkListContext?.setDeletedCheckListByServer({
+      checkListContext?.onDeleteCheckListHandler({
         question: [
           ...checkListContext?.deletedCheckListByServer.question,
           ...deletedCheckLists.map((item) => ({ questionId: item.questionId, visibility: true })),

diff --git a/components/CheckListComponent/ButtonOfGoToTrash.tsx b/components/CheckListComponent/ButtonOfGoToTrash.tsx
@@ -36,18 +36,18 @@ function ButtonOfGoToTrash({
       isEdit &&
       deletedCheckLists &&
       setTimeout(async () => {
-        await checkListContext?.setDeletedCheckListByServer({
+        await checkListContext?.onDeleteCheckListHandler({
           question: [
             ...checkListContext?.deletedCheckListByServer.question,
             { questionId: checkList.questionId, visibility: false },
           ],
         });
-        await setCheckLists(
+        setCheckLists(
           checkLists.map((item) =>
             item.questionId === checkList.questionId ? { ...item, visibility: false } : { ...item }
           )
         );
-        await setDeletedCheckLists([...deletedCheckLists, { ...checkList, visibility: false }]);
+        setDeletedCheckLists([...deletedCheckLists, { ...checkList, visibility: false }]);
       }, 500);
   };
 

diff --git a/components/CheckListComponent/CheckListSummaryComponenet.tsx b/components/CheckListComponent/CheckListSummaryComponenet.tsx
@@ -20,7 +20,7 @@ function CheckListSummaryComponenet({ checkListSummary }: IProps) {
   return (
     <>
       <View style={styles.summaryWrapper}>
-        <Pressable onPress={pinCheckListHandler}>
+        <Pressable onPress={pinCheckListHandler} style={styles.summaryImageWrapper}>
           <Image
             style={styles.summaryPinImg}
             source={
@@ -35,7 +35,7 @@ function CheckListSummaryComponenet({ checkListSummary }: IProps) {
             source={
               checkListSummary.imgUri
                 ? { uri: checkListSummary.imgUri }
-                : require('../../assets/images/home/homeMainImg.png')
+                : require('../../assets/images/checkList/checkLIstDefaultImg.png')
             }
           />
         </Pressable>

diff --git a/components/CheckListComponent/styles.tsx b/components/CheckListComponent/styles.tsx
@@ -4,13 +4,23 @@ import { mainBlue, mainLightBlue, mainOrange } from '../../color';
 const windowWidth = Dimensions.get('window').width;
 
 const styles = StyleSheet.create({
+  summaryImageWrapper: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#CFCFCF',
+    width: windowWidth - 34,
+    height: 260,
+    borderRadius: 10,
+    marginTop: 15,
+    marginBottom: 15,
+  },
   textWrap: {
     flexDirection: 'row',
     flexWrap: 'wrap',
   },
   textWrapWrapper: { flexDirection: 'row', flexWrap: 'wrap' },
   summaryPinImg: { position: 'absolute', zIndex: 1000, top: 30, right: 15 },
-  summaryMainImg: { width: windowWidth - 34, height: 260, borderRadius: 10, marginTop: 15 },
+  summaryMainImg: { marginBottom: 25 },
   summaryContentImg: { marginRight: 5 },
   distanceImg: { marginRight: 9 },
   summaryRightContents: { flexDirection: 'row' },

diff --git a/components/Home/CheckListHome.tsx b/components/Home/CheckListHome.tsx
@@ -24,8 +24,9 @@ function CheckListHome({ homeCheckList, refreshing, onRefresh }: IProps) {
         <ScrollView
           refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
         >
-          <DefaultText style={[styles.pinnedText]}>📌 고정된 리스트</DefaultText>
-
+          {homeCheckList.some((item) => item.pinned) ? (
+            <DefaultText style={[styles.pinnedText]}>📌 고정된 리스트</DefaultText>
+          ) : null}
           <ScrollView horizontal={true}>
             {homeCheckList
               .filter((item) => item.pinned)

diff --git a/components/Home/PinnedCheckList.tsx b/components/Home/PinnedCheckList.tsx
@@ -33,11 +33,12 @@ function PinnedCheckList({ pinnedCheckList }: iProps) {
               resizeMode="cover"
             />
           ) : (
-            <Image
-              style={[styles.pinnedChecklistImg]}
-              source={require('../../assets/images/home/mainLogo.png')}
-              resizeMode="contain"
-            />
+            <View style={styles.pinnedDefaultImgWrapper}>
+              <Image
+                style={styles.pinnedDefaultImg}
+                source={require('../../assets/images/checkList/checkLIstDefaultImg.png')}
+              />
+            </View>
           )}
           <View style={styles.pinnedChecklistSummaryCard}>
             <View>

diff --git a/components/Home/UnPinnedCheckList.tsx b/components/Home/UnPinnedCheckList.tsx
@@ -33,11 +33,13 @@ function UnPinnedCheckList({ unPinnedCheckList }: iProps) {
               resizeMode="cover"
             />
           ) : (
-            <Image
-              style={[styles.unpinnedChecklistImg]}
-              source={require('../../assets/images/home/mainLogo.png')}
-              resizeMode="contain"
-            />
+            <View style={styles.unpinnedDefaultImgWrapper}>
+              <Image
+                style={[styles.unpinnedChecklistImg]}
+                source={require('../../assets/images/checkList/checkLIstDefaultImg.png')}
+                resizeMode="contain"
+              />
+            </View>
           )}
           <View style={styles.unpinnedChecklistSummaryCard}>
             <View>
@@ -66,10 +68,14 @@ function UnPinnedCheckList({ unPinnedCheckList }: iProps) {
                 </View>
               )}
               <View style={[styles.bottomElement]}>
-                <Image source={require('../../assets/images/home/distanceImg.png')} />
-                <DefaultText style={[styles.blueText, styles.bottomElementText]}>
-                  {unPinnedCheckList.distance && unPinnedCheckList.distance}
-                </DefaultText>
+                {unPinnedCheckList.distance && (
+                  <>
+                    <Image source={require('../../assets/images/home/distanceImg.png')} />
+                    <DefaultText style={[styles.blueText, styles.bottomElementText]}>
+                      {unPinnedCheckList.distance}
+                    </DefaultText>
+                  </>
+                )}
               </View>
             </View>
           </View>

diff --git a/components/Home/styles.tsx b/components/Home/styles.tsx
@@ -2,6 +2,17 @@ import { Platform, StyleSheet } from 'react-native';
 import { mainBlue, mainLightBlue } from '../../color';
 
 const styles = StyleSheet.create({
+  unpinnedDefaultImgWrapper: { backgroundColor: '#F1F1F6', borderRadius: 6 },
+  pinnedDefaultImg: { width: 150, height: 100 },
+  pinnedDefaultImgWrapper: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingBottom: 45,
+    backgroundColor: '#CFCFCF',
+    width: 240,
+    height: 180,
+    borderRadius: 10,
+  },
   fullScreenWrapper: { flex: 1, backgroundColor: 'white' },
   welcomeTitle:
     Platform.OS === 'ios'
@@ -31,7 +42,7 @@ const styles = StyleSheet.create({
 
   pinnedChecklistWrapper: { height: 260, marginLeft: 17 },
   pinnedChecklistCard: { marginRight: 14 },
-  pinnedChecklistImg: { width: 240, height: 180, borderRadius: 10 },
+  pinnedChecklistImg: {},
   pinnedChecklistSummaryCard: {
     width: 240,
     height: 110,

diff --git a/components/camera/CameraAndGallery.tsx b/components/camera/CameraAndGallery.tsx
@@ -26,11 +26,9 @@ function CameraAndGallery({ setOnModal, onModal }: IProps) {
     await axios
       .post(`/api/check-list/${checkListContext?.checkListId}/image`, imageData)
       .then((e) => {
-        console.log('t');
         console.log(e);
       })
       .catch((e) => {
-        console.log('c');
         console.log(e);
       });
   };

diff --git a/navigation/Main/StackNavigation/BasicCheckList/BasiclCheckList.tsx b/navigation/Main/StackNavigation/BasicCheckList/BasiclCheckList.tsx
@@ -14,24 +14,19 @@ const Tab = createMaterialTopTabNavigator();
 interface IProps {
   setIsEdit: Dispatch<SetStateAction<boolean>>;
   isEdit: boolean;
-  onSubmitHandler: () => void;
 }
 
-function BasicCheckList({ setIsEdit, isEdit, onSubmitHandler }: IProps) {
+function BasicCheckList({ setIsEdit, isEdit }: IProps) {
   const [isBottomSheet, setIsBottomSheet] = useState(true);
   const [onModal, setOnModal] = useState(false);
-  const onEditHandler = () => {
+  const onEditHandler = async () => {
     setIsEdit(true);
   };
 
   const onCameraHandler = () => {
     setOnModal(!onModal);
   };
 
-  setInterval(() => {
-    onSubmitHandler();
-  }, 100000);
-
   return (
     <>
       <Tab.Navigator

diff --git a/navigation/Main/StackNavigation/StackNavigationOfCheckList.tsx b/navigation/Main/StackNavigation/StackNavigationOfCheckList.tsx
@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useContext, useState } from 'react';
+import React, { Dispatch, SetStateAction, useContext, useEffect, useState } from 'react';
 import { Image, Pressable, Share } from 'react-native';
 
 import BasicCheckList from './BasicCheckList/BasiclCheckList';
@@ -12,7 +12,6 @@ import {
   NativeStackNavigationOptions,
 } from '@react-navigation/native-stack';
 import { checkListCtx } from '../../../Context/CheckListByServer';
-import axios from 'axios';
 import { useNavigation } from '@react-navigation/native';
 import Map from '../../../screens/bottomTab/Map';
 
@@ -47,27 +46,7 @@ function CheckListStackNav({ setIsLogin }: IProps) {
   };
 
   const onSubmitHandler = async () => {
-    axios
-      .put(
-        `/api/check-list/${checkListContext?.checkListId}/common/question/status`,
-        checkListContext?.deletedCheckListByServer
-      )
-      .then(() => checkListContext?.setDeletedCheckListByServer({ question: [] }));
-
-    axios
-      .put(
-        `/api/check-list/${checkListContext?.checkListId}/common/question`,
-        checkListContext?.choseCheckListByServer
-      )
-      .then(() => {
-        checkListContext?.setChoseCheckListByServer({
-          typeA: [],
-          typeB: [],
-          typeD: [],
-          typeM: {},
-        });
-      });
-
+    checkListContext?.onChoseCheckListHandler();
     setIsEdit(false);
   };
 
@@ -87,6 +66,12 @@ function CheckListStackNav({ setIsLogin }: IProps) {
     headerShadowVisible: false,
   };
 
+  useEffect(() => {
+    setInterval(() => {
+      onSubmitHandler();
+    }, 100000);
+  }, []);
+
   return (
     <>
       <NativeStack.Navigator screenOptions={screenOptions}>
@@ -100,13 +85,7 @@ function CheckListStackNav({ setIsLogin }: IProps) {
         />
         <NativeStack.Screen
           name="basicCheckList"
-          children={() => (
-            <BasicCheckList
-              isEdit={isEdit}
-              setIsEdit={setIsEdit}
-              onSubmitHandler={onSubmitHandler}
-            />
-          )}
+          children={() => <BasicCheckList isEdit={isEdit} setIsEdit={setIsEdit} />}
           options={() => ({
             animationTypeForReplace: 'pop',
             animation: 'slide_from_bottom',

diff --git a/screens/BasicCheckList/BasicInfoOfBasicCheckList.tsx b/screens/BasicCheckList/BasicInfoOfBasicCheckList.tsx
@@ -1,6 +1,7 @@
 import React, {
   Dispatch,
   SetStateAction,
+  useCallback,
   useContext,
   useEffect,
   useMemo,
@@ -24,6 +25,7 @@ import { ActivityIndicator, View } from 'react-native';
 import { checkListCtx } from '../../Context/CheckListByServer';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import CheckListSummaryComponenet from '../../components/CheckListComponent/CheckListSummaryComponenet';
+import { useFocusEffect } from '@react-navigation/native';
 
 interface IProps {
   isEdit: boolean;
@@ -40,7 +42,6 @@ function BasicInfoOfBasicCheckList({ isEdit, setIsBottomSheet }: IProps) {
   const [checkListSummary, setCheckListSummary] = useState<any>({});
 
   const getServerData = async () => {
-    console.log(checkListContext?.checkListId);
     try {
       const serverResponse = await axios.get(
         `/api/check-list/${checkListContext?.checkListId}/common?mainCategory=기본정보`
@@ -63,6 +64,11 @@ function BasicInfoOfBasicCheckList({ isEdit, setIsBottomSheet }: IProps) {
   useEffect(() => {
     getServerData();
   }, [modal]);
+  useFocusEffect(
+    useCallback(() => {
+      getServerData();
+    }, [modal])
+  );
   // setCheckLists(response.data);
   // 바텀시트 동작을 위한 코드
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);

diff --git a/screens/bottomTab/Home.tsx b/screens/bottomTab/Home.tsx
@@ -4,6 +4,7 @@ import EmptyHome from '../../components/Home/EmptyHome';
 import CheckListHome from '../../components/Home/CheckListHome';
 import axios from 'axios';
 import { ActivityIndicator, RefreshControl, ScrollView } from 'react-native';
+import { useFocusEffect } from '@react-navigation/native';
 
 function Home() {
   const [loading, setLoading] = useState(false);
@@ -32,7 +33,11 @@ function Home() {
   useEffect(() => {
     getHomeDataHandler();
   }, []);
-
+  useFocusEffect(
+    useCallback(() => {
+      getHomeDataHandler();
+    }, [])
+  );
   return (
     <>
       {loading ? (