fix: checkListTypeC

사진을 터치했을 때 해당 사진으로 바로 이동
#70

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}
     </>
   );

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}

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

types/checkListTypes.ts

@@ -6,6 +6,7 @@ export interface answerButtonType {
   id?: number;
   main?: boolean;
   url?: string;
+  order?: number;
 }
 
 export interface answerListType {