Merge pull request #71 from Amattang/fix/#70-QA

Fix/#70 qa
Amattang · Mar 31, 2022 · 7354ee9 · 7354ee9
2 parents 8dec265 + a9c2691
commit 7354ee9
Show file tree

Hide file tree

Showing 35 changed files with 537 additions and 281 deletions.
diff --git a/App.tsx b/App.tsx
@@ -5,11 +5,9 @@ import 'react-native-gesture-handler';
 import RootNav from './navigation/Main/RootNav';
 import OnBoardingStack from './navigation/OnBoarding/StackNavigationOfOnBoarding';
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
-import { getAccessToken, getRefreshToken, isLoggedIn } from 'react-native-axios-jwt';
+import { getAccessToken, isLoggedIn } from 'react-native-axios-jwt';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import CheckListStore from './Context/CheckListByServer';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import KakaoLoginBtn from './components/Login/KakaoLoginBtn';
 import axios from 'axios';
 
 const queryClient = new QueryClient();
@@ -39,7 +37,11 @@ function App() {
         <NavigationContainer independent={true}>
           <BottomSheetModalProvider>
             <QueryClientProvider client={queryClient}>
-              {isLogin ? <RootNav /> : <OnBoardingStack setIsLogin={setIsLogin} />}
+              {isLogin ? (
+                <RootNav setIsLogin={setIsLogin} />
+              ) : (
+                <OnBoardingStack setIsLogin={setIsLogin} />
+              )}
             </QueryClientProvider>
           </BottomSheetModalProvider>
         </NavigationContainer>

diff --git a/assets/images/checkList/pinnedCheckList.png b/assets/images/checkList/pinnedCheckList.png
diff --git a/assets/images/checkList/unPinnedCheckList.png b/assets/images/checkList/unPinnedCheckList.png
diff --git a/components/CheckListComponent/ButtonsOfTypeB.tsx b/components/CheckListComponent/ButtonsOfTypeB.tsx
@@ -98,6 +98,7 @@ function ButtonsOfTypeB({ isEdit, checkList, setCheckLists, checkLists }: IProps
             onChangeText={onChangeText}
             onEndEditing={() => onEndEditing(answer)}
             placeholder={answer.type ? answer.type : '직접 입력'}
+            placeholderTextColor={'#D6D4D4'}
             style={[styles.typeDBtnWrapper]}
           />
           <DefaultText style={[styles.checkListGrayText, { marginRight: 10 }]}>

diff --git a/components/CheckListComponent/ButtonsOfTypeC.tsx b/components/CheckListComponent/ButtonsOfTypeC.tsx
@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction } from 'react';
+import React, { Dispatch, SetStateAction, useState } from 'react';
 import { DefaultText } from '../../CustomText';
 import { checkListTypes } from '../../types/checkListTypes';
 import { Image, Pressable, View } from 'react-native';
@@ -12,6 +12,7 @@ interface IProps {
 }
 
 function ButtonsOfTypeC({ setModal, modal, checkList }: IProps) {
+  const [order, setOrder] = useState<number | undefined>(0);
   return (
     <>
       <View style={styles.imageWrapper}>
@@ -21,6 +22,7 @@ function ButtonsOfTypeC({ setModal, modal, checkList }: IProps) {
               key={item.id}
               onPress={() => {
                 setModal ? setModal(true) : null;
+                setOrder(item.order);
               }}
             >
               <Image
@@ -38,7 +40,12 @@ function ButtonsOfTypeC({ setModal, modal, checkList }: IProps) {
         ))}
       </View>
       {checkList?.answer?.some((item) => item.id) ? (
-        <CheckListImage checkList={checkList.answer} setModal={setModal} modal={modal} />
+        <CheckListImage
+          order={order}
+          checkList={checkList.answer}
+          setModal={setModal}
+          modal={modal}
+        />
       ) : null}
     </>
   );

diff --git a/components/CheckListComponent/ButtonsOfTypeD.tsx b/components/CheckListComponent/ButtonsOfTypeD.tsx
@@ -157,6 +157,7 @@ function ButtonsOfTypeD({ isEdit, checkList, setCheckLists, checkLists }: IProps
         onChangeText={onChangeTextHandler}
         onEndEditing={onEndEditing}
         placeholder={'+ 직접 입력'}
+        placeholderTextColor={'#D6D4D4'}
         value={newCheckListElement}
         style={[styles.typeDBtnWrapper, styles.typeDInputBtnWrapper]}
       />

diff --git a/components/CheckListComponent/CheckListComponent.tsx b/components/CheckListComponent/CheckListComponent.tsx
@@ -1,5 +1,5 @@
-import React, { Dispatch, SetStateAction, useEffect } from 'react';
-import { View } from 'react-native';
+import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { Pressable, View } from 'react-native';
 import { checkListTypes } from '../../types/checkListTypes';
 import styles from './styles';
 import ButtonsOfTypeA from './ButtonsOfTypeA';
@@ -30,6 +30,10 @@ interface IProps {
   setCheckLists: Dispatch<SetStateAction<checkListTypes[]>>;
   onBoarding: boolean;
 }
+type ContextType = {
+  translateX: number;
+  translateY: number;
+};
 
 function CheckListComponent({
   modal,
@@ -43,10 +47,20 @@ function CheckListComponent({
   onBoarding,
 }: IProps) {
   const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
 
-  const panGesture = useAnimatedGestureHandler<PanGestureHandlerGestureEvent>({
-    onActive: (event) => {
-      translateX.value = event.translationX;
+  const panGesture = useAnimatedGestureHandler<PanGestureHandlerGestureEvent, ContextType>({
+    onStart: (event, context) => {
+      context.translateX = translateX.value;
+      context.translateY = translateY.value;
+    },
+    onActive: (event, context) => {
+      translateX.value = event.translationX + context.translateX;
+      translateY.value = event.translationY;
+
+      if (event.translationX + context.translateX > 0) {
+        translateX.value = 0;
+      }
     },
     onEnd: () => {
       const shouldBeDismissed = translateX.value > -40;
@@ -67,18 +81,18 @@ function CheckListComponent({
   }));
 
   useEffect(() => {
-    translateX.value = 0;
-  }, [isEdit]);
+    translateX.value = withTiming(0);
+  });
 
   return (
     <View style={styles.checkListWrapper}>
       <PanGestureHandler
         enabled={!onBoarding && isEdit}
         onGestureEvent={panGesture}
-        activeOffsetX={[-0, 100]}
+        activeOffsetX={[-10, 10]}
       >
         <Animated.View style={[rStyle]}>
-          <View style={styles.whiteCard} key={checkList.questionId}>
+          <Pressable style={styles.whiteCard} key={checkList.questionId}>
             <DefaultText style={styles.checkListMainTitle}>{checkList.question}</DefaultText>
             <View style={styles.subTitles}>
               {checkList.rule ? (
@@ -133,7 +147,7 @@ function CheckListComponent({
                 />
               ) : null}
             </View>
-          </View>
+          </Pressable>
         </Animated.View>
       </PanGestureHandler>
       <ButtonOfGoToTrash

diff --git a/components/CheckListComponent/CheckListImage.tsx b/components/CheckListComponent/CheckListImage.tsx
@@ -2,7 +2,7 @@ import React, { Dispatch, SetStateAction, useContext, useRef, useState } from 'r
 import { DefaultText } from '../../CustomText';
 import Modal from 'react-native-modal';
 import { Dimensions, Image, Pressable, View } from 'react-native';
-import Carousel, { Pagination } from 'react-native-snap-carousel';
+import Carousel from 'react-native-snap-carousel';
 import { answerButtonType } from '../../types/checkListTypes';
 import styles from './styles';
 import axios from 'axios';
@@ -12,12 +12,12 @@ interface IProps {
   checkList: answerButtonType[];
   setModal?: Dispatch<SetStateAction<boolean>>;
   modal?: boolean;
+  order: number | undefined;
 }
 const windowWidth = Dimensions.get('window').width;
 
-function CheckListImage({ checkList, setModal, modal }: IProps) {
+function CheckListImage({ checkList, setModal, modal, order }: IProps) {
   const checkListContext = useContext(checkListCtx);
-  const [index, setIndex] = useState(0);
   const isCarousel = useRef(null);
 
   const mainImageHandler = async (item: answerButtonType) => {
@@ -38,6 +38,9 @@ function CheckListImage({ checkList, setModal, modal }: IProps) {
     return (
       <View style={styles.selectedImageWrapper}>
         <Image style={styles.selectedImage} resizeMode="cover" source={{ uri: item.url }} />
+        <DefaultText style={{ color: 'white', marginTop: 20 }}>
+          {item.order + 1} / {checkList.length}
+        </DefaultText>
         <Pressable style={styles.imageSelectButtonWrapper} onPress={() => mainImageHandler(item)}>
           <DefaultText style={styles.selectMainImageText}>대표 사진으로 설정</DefaultText>
         </Pressable>
@@ -57,6 +60,8 @@ function CheckListImage({ checkList, setModal, modal }: IProps) {
           <Image source={require('../../assets/images/common/X.png')} />
         </Pressable>
         <Carousel
+          keyExtractor={(item) => item.toString()}
+          firstItem={order}
           ref={isCarousel}
           data={checkList}
           sliderWidth={windowWidth}

diff --git a/components/CheckListComponent/CheckListSummaryComponenet.tsx b/components/CheckListComponent/CheckListSummaryComponenet.tsx
@@ -0,0 +1,89 @@
+import React, { useContext, useState } from 'react';
+import { Image, Pressable, View } from 'react-native';
+import { DefaultText } from '../../CustomText';
+import styles from './styles';
+import axios from 'axios';
+import { checkListCtx } from '../../Context/CheckListByServer';
+interface IProps {
+  checkListSummary: any;
+}
+function CheckListSummaryComponenet({ checkListSummary }: IProps) {
+  const checkListContext = useContext(checkListCtx);
+
+  const [pin, setPin] = useState(checkListSummary.pinned);
+  const pinCheckListHandler = () => {
+    axios
+      .put(`api/check-list/main`, { checkListId: checkListContext?.checkListId, pinned: !pin })
+      .then(() => setPin(!pin))
+      .catch((e) => console.error(e));
+  };
+  return (
+    <>
+      <View style={styles.summaryWrapper}>
+        <Pressable onPress={pinCheckListHandler}>
+          <Image
+            style={styles.summaryPinImg}
+            source={
+              pin
+                ? require('../../assets/images/checkList/pinnedCheckList.png')
+                : require('../../assets/images/checkList/unPinnedCheckList.png')
+            }
+          />
+          <Image
+            resizeMode={'cover'}
+            style={styles.summaryMainImg}
+            source={
+              checkListSummary.imgUri
+                ? { uri: checkListSummary.imgUri }
+                : require('../../assets/images/home/homeMainImg.png')
+            }
+          />
+        </Pressable>
+        <View style={styles.summaryWhiteCardWrapper}>
+          <View style={[styles.summayWhiteCardContentWrapper]}>
+            <DefaultText style={[styles.summaryContentText, styles.summaryContentTitle]}>
+              {checkListSummary.title
+                ? checkListSummary.title.length > 20
+                  ? `${checkListSummary.title.slice(0, 20)}...`
+                  : checkListSummary.title
+                : '체크리스트 이름을 정해주세요!'}
+            </DefaultText>
+            <DefaultText style={[styles.summaryContentText, styles.summaryContentAddress]}>
+              {checkListSummary.address
+                ? checkListSummary.address.length > 20
+                  ? `${checkListSummary.address.slice(0, 20)}...`
+                  : checkListSummary.address
+                : '해당 매물 위치를 입력해주세요!'}
+            </DefaultText>
+          </View>
+          <View style={[styles.summayWhiteCardContentWrapper]}>
+            {checkListSummary.address}
+            {checkListSummary.roomType && checkListSummary.area && checkListSummary.form ? (
+              <View style={styles.summaryRightContents}>
+                <Image
+                  style={styles.summaryContentImg}
+                  source={require('../../assets/images/home/roomTypeImg.png')}
+                />
+                <DefaultText style={[styles.summaryContentText]}>
+                  {checkListSummary.roomType} / {checkListSummary.area} / {checkListSummary.form}
+                </DefaultText>
+              </View>
+            ) : null}
+            {checkListSummary.distance ? (
+              <View style={styles.summaryRightContents}>
+                <Image
+                  style={[styles.summaryContentImg, styles.distanceImg]}
+                  source={require('../../assets/images/home/distanceImg.png')}
+                />
+                <DefaultText style={[styles.summaryContentText]}>
+                  {checkListSummary.distance}
+                </DefaultText>
+              </View>
+            ) : null}
+          </View>
+        </View>
+      </View>
+    </>
+  );
+}
+export default CheckListSummaryComponenet;
diff --git a/components/CheckListComponent/myItem/MyItemElement.tsx b/components/CheckListComponent/myItem/MyItemElement.tsx
@@ -18,8 +18,6 @@ interface IProps {
 }
 
 function MyItemElement({ myItemElement, elementClickedHandler, myItem, isEdit }: IProps) {
-  const checkListContext = useContext(checkListCtx);
-
   const myItemElementOnPressHandler = () => {
     isEdit && elementClickedHandler({ myItem, myItemElement });
   };

diff --git a/components/CheckListComponent/myItem/MyItemOfBottomSheets.tsx b/components/CheckListComponent/myItem/MyItemOfBottomSheets.tsx
@@ -81,6 +81,7 @@ function MyItemOfBottomSheets({
         <BottomSheetTextInput
           style={styles.myItemCategoryName}
           value={clickedMyItem?.categoryName}
+          placeholderTextColor={'#D6D4D4'}
           placeholder={'새 그룹'}
           editable={isEdit}
           onChangeText={(newCategoryName) => onCategoryNameHandler(newCategoryName)}
@@ -98,6 +99,7 @@ function MyItemOfBottomSheets({
           <BottomSheetTextInput
             style={styles.addMyItemEachElementOfBottomSheets}
             placeholder={'+ 항목 추가'}
+            placeholderTextColor={'#999999'}
             value={newElement}
             editable={isEdit}
             onChangeText={(elementText) => onCreateQuestionElementTextHandler(elementText)}

diff --git a/components/CheckListComponent/styles.tsx b/components/CheckListComponent/styles.tsx
@@ -4,6 +4,31 @@ import { mainBlue, mainLightBlue, mainOrange } from '../../color';
 const windowWidth = Dimensions.get('window').width;
 
 const styles = StyleSheet.create({
+  summaryPinImg: { position: 'absolute', zIndex: 1000, top: 30, right: 15 },
+  summaryMainImg: { width: windowWidth - 34, height: 260, borderRadius: 10, marginTop: 15 },
+  summaryContentImg: { marginRight: 5 },
+  distanceImg: { marginRight: 9 },
+  summaryRightContents: { flexDirection: 'row' },
+  summaryWrapper: { justifyContent: 'center', alignItems: 'center' },
+  summaryContentAddress: { color: '#8C8CA1' },
+  summaryContentTitle: { fontSize: 18 },
+  summaryWhiteCardWrapper: {
+    position: 'relative',
+    marginBottom: -30,
+    backgroundColor: 'white',
+    width: windowWidth - 68,
+    bottom: 50,
+    padding: 19,
+    borderRadius: 10,
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+  },
+  summaryContentText: { fontSize: 12, lineHeight: 18 },
+  summayWhiteCardContentWrapper: {
+    justifyContent: 'space-between',
+    height: 50,
+    lineHeight: 18,
+  },
   selectMainImageText: { fontSize: 16, color: mainBlue, fontFamily: 'AppleSDGothicNeoEB00' },
   imageModal: { position: 'absolute', right: -17 },
   selectedimageCancleButton: {
@@ -17,7 +42,7 @@ const styles = StyleSheet.create({
   imageSelectButtonWrapper: {
     marginHorizontal: 17,
     backgroundColor: 'white',
-    marginTop: 100,
+    marginTop: 80,
     paddingVertical: 20,
     width: windowWidth - 34,
     alignItems: 'center',
@@ -65,7 +90,7 @@ const styles = StyleSheet.create({
     width: windowWidth - 34,
     borderRadius: 14,
   },
-  checkListMainTitle: { fontSize: 20 },
+  checkListMainTitle: { fontSize: 20, lineHeight: 32 },
   buttonsOfCheckList: {
     marginTop: 40,
     flexDirection: 'row',
@@ -79,7 +104,7 @@ const styles = StyleSheet.create({
   },
 
   subTitles: { marginTop: 14 },
-  checkListSubTitle: { flexDirection: 'row' },
+  checkListSubTitle: { flexDirection: 'row', marginRight: 15 },
   checkListGrayText: { color: '#7C7C7C', lineHeight: 24 },
   checkListWhiteText: { color: 'white', lineHeight: 24 },
   typeABtnWrapper: {