fix: QA

기본 정보 텝 메인화면과 체크리스트 핀 로직 구현 #70
Amattang · Mar 30, 2022 · d5febb2 · d5febb2
1 parent 8dec265
commit d5febb2
Show file tree

Hide file tree

Showing 10 changed files with 163 additions and 31 deletions.
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/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/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: {

diff --git a/components/Home/CheckListHome.tsx b/components/Home/CheckListHome.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ScrollView, View } from 'react-native';
+import { RefreshControl, ScrollView, View } from 'react-native';
 
 import { DefaultText } from '../../CustomText';
 import styles from './styles';
@@ -9,17 +9,23 @@ import { homeScreenTypes } from '../../types/homeScreenTypes';
 
 interface IProps {
   homeCheckList: homeScreenTypes[];
+  onRefresh: any;
+  refreshing: boolean;
 }
 
-function CheckListHome({ homeCheckList }: IProps) {
+function CheckListHome({ homeCheckList, refreshing, onRefresh }: IProps) {
   return (
     <View style={styles.fullScreenWrapper}>
       <DefaultText style={[styles.welcomeTitle]}>
         Find your{'\n'}
         home sweet home 🏠
       </DefaultText>
       <View style={styles.unpinnedChecklistWrapper}>
-        <ScrollView>
+        <ScrollView
+          refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
+        >
+          <DefaultText style={[styles.pinnedText]}>📌 고정된 리스트</DefaultText>
+
           <ScrollView horizontal={true}>
             {homeCheckList
               .filter((item) => item.pinned)

diff --git a/components/Home/PinnedCheckList.tsx b/components/Home/PinnedCheckList.tsx
@@ -20,7 +20,6 @@ function PinnedCheckList({ pinnedCheckList }: iProps) {
   };
   return (
     <>
-      <DefaultText style={[styles.pinnedText]}>📌 고정된 리스트</DefaultText>
       {pinnedCheckList ? (
         <Pressable
           onPress={onCheckListMoveHandler}

diff --git a/screens/BasicCheckList/BasicInfoOfBasicCheckList.tsx b/screens/BasicCheckList/BasicInfoOfBasicCheckList.tsx
@@ -23,6 +23,7 @@ import axios from 'axios';
 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';
 
 interface IProps {
   isEdit: boolean;
@@ -36,12 +37,14 @@ function BasicInfoOfBasicCheckList({ isEdit, setIsBottomSheet }: IProps) {
   const [onServerData, setOnServerData] = useState(false);
   const [checkLists, setCheckLists] = useState<checkListTypes[]>([]);
   const [deletedCheckLists, setDeletedCheckLists] = useState<checkListTypes[]>([]);
+  const [checkListSummary, setCheckListSummary] = useState<any>({});
 
   const getServerData = async () => {
     try {
       const serverResponse = await axios.get(
         `/api/check-list/${checkListContext?.checkListId}/common?mainCategory=기본정보`
       );
+      setCheckListSummary(serverResponse.data.data.information);
       setCheckLists([
         ...serverResponse.data.data.questionList.map((item: checkListTypes) => ({
           ...item,
@@ -85,30 +88,29 @@ function BasicInfoOfBasicCheckList({ isEdit, setIsBottomSheet }: IProps) {
           <BottomSheetModalProvider>
             <KeyboardAwareScrollView extraHeight={150}>
               <ScrollView>
-                <View>
-                  {checkLists
-                    .filter((item) => item.visibility)
-                    .map((mainQuestionItem: checkListTypes) => (
-                      <CheckListComponent
-                        modal={modal}
-                        setModal={setModal}
-                        key={mainQuestionItem.questionId}
-                        deletedCheckLists={deletedCheckLists}
-                        setDeletedCheckLists={setDeletedCheckLists}
-                        onBoarding={false}
-                        checkLists={checkLists}
-                        isEdit={isEdit}
-                        checkList={mainQuestionItem}
-                        setCheckLists={setCheckLists}
-                      />
-                    ))}
-
-                  {deletedCheckLists.length !== 0 && (
-                    <ButtonOfBringBackDeletedCheckList
-                      handlePresentModalPress={handlePresentModalPress}
+                <CheckListSummaryComponenet checkListSummary={checkListSummary} />
+                {checkLists
+                  .filter((item) => item.visibility)
+                  .map((mainQuestionItem: checkListTypes) => (
+                    <CheckListComponent
+                      modal={modal}
+                      setModal={setModal}
+                      key={mainQuestionItem.questionId}
+                      deletedCheckLists={deletedCheckLists}
+                      setDeletedCheckLists={setDeletedCheckLists}
+                      onBoarding={false}
+                      checkLists={checkLists}
+                      isEdit={isEdit}
+                      checkList={mainQuestionItem}
+                      setCheckLists={setCheckLists}
                     />
-                  )}
-                </View>
+                  ))}
+
+                {deletedCheckLists.length !== 0 && (
+                  <ButtonOfBringBackDeletedCheckList
+                    handlePresentModalPress={handlePresentModalPress}
+                  />
+                )}
               </ScrollView>
             </KeyboardAwareScrollView>
             <BottomSheetsOfDeletedCheckList

diff --git a/screens/BasicCheckList/MyItemOfBasicCheckList.tsx b/screens/BasicCheckList/MyItemOfBasicCheckList.tsx
@@ -124,6 +124,7 @@ function MyItemOfBasicCheckList({ isEdit, setIsBottomSheet }: IProps) {
                 />
                 {myItems.map((myItem) => (
                   <MyItem
+                    key={myItem.categoryId}
                     isEdit={isEdit}
                     elementClickedHandler={elementClickedHandler}
                     myItems={myItems}

diff --git a/screens/bottomTab/Home.tsx b/screens/bottomTab/Home.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import EmptyHome from '../../components/Home/EmptyHome';
 import CheckListHome from '../../components/Home/CheckListHome';
@@ -9,6 +9,14 @@ function Home() {
   const [loading, setLoading] = useState(false);
   const [isCheckList, setIsCheckList] = useState(false);
   const [homeCheckList, setHomeCheckList] = useState([]);
+  const [refreshing, setRefreshing] = useState(false);
+
+  //refreshcontrol을 호출할 때 실행되는 callback함수
+  const onRefresh = useCallback(async () => {
+    setRefreshing(true);
+    await getHomeDataHandler();
+    setRefreshing(false);
+  }, []);
 
   const getHomeDataHandler = async () => {
     try {
@@ -29,7 +37,11 @@ function Home() {
     <>
       {loading ? (
         isCheckList ? (
-          <CheckListHome homeCheckList={homeCheckList} />
+          <CheckListHome
+            homeCheckList={homeCheckList}
+            onRefresh={onRefresh}
+            refreshing={refreshing}
+          />
         ) : (
           <EmptyHome />
         )