From 0e3d630907903977607c542ab2e9c091b2b67ab8 Mon Sep 17 00:00:00 2001
From: 11t518s <11t518s20161759@gmail.com>
Date: Thu, 31 Mar 2022 14:48:05 +0900
Subject: [PATCH] fix: checkListTypeC
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

사진을 터치했을 때 해당 사진으로 바로 이동
#70
---
 components/CheckListComponent/ButtonsOfTypeC.tsx | 11 +++++++++--
 components/CheckListComponent/CheckListImage.tsx | 10 ++++++++--
 components/CheckListComponent/styles.tsx         |  2 +-
 types/checkListTypes.ts                          |  1 +
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/components/CheckListComponent/ButtonsOfTypeC.tsx b/components/CheckListComponent/ButtonsOfTypeC.tsx
index 7bd1ee8..960906e 100644
--- 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/CheckListImage.tsx b/components/CheckListComponent/CheckListImage.tsx
index 18996fd..4899f4e 100644
--- 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,10 +12,11 @@ interface IProps {
   checkList: answerButtonType[];
   setModal?: Dispatch<SetStateAction<boolean>>;
   modal?: boolean;
+  order: number;
 }
 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);
@@ -33,11 +34,15 @@ function CheckListImage({ checkList, setModal, modal }: IProps) {
       setModal ? setModal(false) : null;
     }
   };
+  console.log(checkList);
 
   const renderItem = ({ item }: any) => {
     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 +62,7 @@ function CheckListImage({ checkList, setModal, modal }: IProps) {
           <Image source={require('../../assets/images/common/X.png')} />
         </Pressable>
         <Carousel
+          firstItem={order}
           ref={isCarousel}
           data={checkList}
           sliderWidth={windowWidth}
diff --git a/components/CheckListComponent/styles.tsx b/components/CheckListComponent/styles.tsx
index c66421b..36b5289 100644
--- a/components/CheckListComponent/styles.tsx
+++ b/components/CheckListComponent/styles.tsx
@@ -42,7 +42,7 @@ const styles = StyleSheet.create({
   imageSelectButtonWrapper: {
     marginHorizontal: 17,
     backgroundColor: 'white',
-    marginTop: 100,
+    marginTop: 80,
     paddingVertical: 20,
     width: windowWidth - 34,
     alignItems: 'center',
diff --git a/types/checkListTypes.ts b/types/checkListTypes.ts
index a712507..ba0fc44 100644
--- a/types/checkListTypes.ts
+++ b/types/checkListTypes.ts
@@ -6,6 +6,7 @@ export interface answerButtonType {
   id?: number;
   main?: boolean;
   url?: string;
+  order?: number;
 }
 
 export interface answerListType {