Merge pull request #59 from DearMyPeace/56-fix-axios-interceptor-오류-수정

fix, feat: intercepor 오류 수정 및 다이어리 스크린 모달 추가
DearMyPeace · Jul 4, 2024 · 00ef98e · 00ef98e
2 parents 2cbcd97 + 88b6dba
commit 00ef98e
Show file tree

Hide file tree

Showing 24 changed files with 315 additions and 90 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -20,6 +20,9 @@ const App = () => {
         staleTime: 1000 * 60 * 5,
         placeholderData: keepPreviousData,
       },
+      mutations: {
+        retry: 1,
+      },
     },
   });
 

diff --git a/src/api/ai/post.ts b/src/api/ai/post.ts
@@ -2,6 +2,6 @@ import instance from '@api/axios';
 import { IAiLetterRequest } from '@type/IAiLetterRequest';
 
 export const postAiLetters = async (data: IAiLetterRequest) => {
-  const response = await instance.post(`/aiLetters/save`, data);
+  const response = await instance.post(`/aiLetters/save`, data, { timeout: 1000 * 15 });
   return response.data;
 };
diff --git a/src/api/diary/get.ts b/src/api/diary/get.ts
@@ -2,34 +2,32 @@ import React from 'react';
 import instance from '@api/axios';
 import { DateStatus, IDate, IDiaryCount, IDiaryListResponse, NEW_DIARY } from '@type/Diary';
 import { useQuery, UseQueryResult } from '@tanstack/react-query';
-import { isToday } from 'date-fns';
 
-export const fetchDiaryList = async (targetDate: string): Promise<IDiaryListResponse[]> => {
+export const fetchDiaryList = async (targetDate: string): Promise<IDiaryListResponse> => {
   const response = await instance.get(`/diary/${targetDate}`);
   return response.data;
 };
 
-export const useDiaryList = (targetDate: string, dateStatus: DateStatus | null) => {
+export const useDiaryList = (targetDate: string, dateStatus: DateStatus) => {
   return useQuery({
     queryKey: ['diary', 'list', targetDate],
     queryFn: () => fetchDiaryList(targetDate),
-    enabled: !!dateStatus,
+    enabled: !!targetDate,
     staleTime: Infinity,
     select: (data) => {
-      const diaryList = data.map((item) => ({
+      const diaryList = data.diaries.map((item) => ({
         id: item.diaryId,
         content: item.content,
         createdTime: item.createdDate,
       }));
-      const today = isToday(new Date(targetDate));
-      today &&
+      dateStatus === 'TODAY' &&
         diaryList.length < 3 &&
         diaryList.push({
           id: NEW_DIARY,
           content: '오늘의 심심기록을 남겨보세요',
           createdTime: '',
         });
-      return diaryList;
+      return { sendStatus: data.sendStatus, diaryList };
     },
   });
 };

diff --git a/src/assets/logo/center.png b/src/assets/logo/center.png
diff --git a/src/assets/logo/left.png b/src/assets/logo/left.png
diff --git a/src/assets/logo/right.png b/src/assets/logo/right.png
diff --git a/src/components/common/BasicConfirmModal.tsx b/src/components/common/BasicConfirmModal.tsx
@@ -11,14 +11,23 @@ const BasicConfirmModal = ({
   onConfirm,
   content,
   confirmText = '확인',
+  children = null,
+  containerStyle,
 }: IBasicModalProps) => {
   const onCancel = () => {
     setIsVisible(false);
   };
 
   return (
-    <MyModal visible={visible} setIsVisible={setIsVisible} transparent={true} animationType="fade">
+    <MyModal
+      visible={visible}
+      setIsVisible={setIsVisible}
+      transparent={true}
+      animationType="fade"
+      containerStyle={containerStyle}
+    >
       <View style={styles.modalContent}>
+        {children}
         <MyText style={{ textAlign: 'center' }}>{content}</MyText>
       </View>
       <View style={styles.modalButtons}>

diff --git a/src/components/common/MyIconButtons.tsx b/src/components/common/MyIconButtons.tsx
@@ -34,6 +34,7 @@ const MyIconButton = ({
   size = 24,
   color = 'black',
   style,
+  disabled,
   ...props
 }: IOcticonsButtonProps) => {
   const IconComponent = iconMap[iconSet];
@@ -42,9 +43,10 @@ const MyIconButton = ({
     <Pressable
       onPress={onPress}
       style={({ pressed }) => [styles.button, pressed && styles.pressed, style]}
+      disabled={disabled}
       {...props}
     >
-      <IconComponent name={name} size={size} color={color} />
+      <IconComponent name={name} size={size} color={disabled ? '#666666' : color} />
     </Pressable>
   );
 };

diff --git a/src/components/diary/carousel/DiaryCard.tsx b/src/components/diary/carousel/DiaryCard.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { View, StyleSheet, Platform, Pressable, Keyboard, TextInput } from 'react-native';
+import { View, StyleSheet, Platform, Pressable, Keyboard } from 'react-native';
 import { IDiaryCardProps, IDiaryPatchRequest, IDiaryPostRequest, NEW_DIARY } from '@type/Diary';
 import { CARD_WIDTH } from '@utils/Sizing';
 import DiaryInput from '@components/diary/carousel/DiaryInput';
@@ -11,16 +11,29 @@ import { deleteDiary } from '@api/diary/delete';
 import { patchDiary } from '@api/diary/patch';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { snackMessage } from '@stores/snackMessage';
-import { tense } from '@stores/tense';
+import { selectedDateStatus, tense } from '@stores/tense';
 import BasicConfirmModal from '@components/common/BasicConfirmModal';
+import { postAiLetters } from '@api/ai/post';
+import { IAiLetterRequest } from '@type/IAiLetterRequest';
+import DiaryLoading from '@components/diary/carousel/DiaryLoading';
 
-const DiaryCard = ({ id, createdTime, content, isEditing, setIsEditing }: IDiaryCardProps) => {
+const DiaryCard = ({
+  id,
+  createdTime,
+  content,
+  isEditing,
+  setIsEditing,
+  isLetterSent,
+}: IDiaryCardProps) => {
   const [diaryInput, setDiaryInput] = useState('');
   const [timeStartWriting, setTimeStartWriting] = useState<string>('');
   const dateStatus = useRecoilValue(tense);
   const setSnackbar = useSetRecoilState(snackMessage);
   const queryClient = useQueryClient();
   const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
+  const [isSendModalVisible, setSendModalVisible] = useState(false);
+  const [isEditModalVisible, setEditModalVisible] = useState(false);
+  const targetDate = useRecoilValue(selectedDateStatus);
 
   useEffect(() => {
     setDiaryInput(id === NEW_DIARY ? '' : content);
@@ -71,14 +84,29 @@ const DiaryCard = ({ id, createdTime, content, isEditing, setIsEditing }: IDiary
     },
   });
 
+  const sendDiary = useMutation({
+    mutationFn: (data: IAiLetterRequest) => postAiLetters(data),
+    onSuccess: (data) => {
+      console.log(data);
+      queryClient.invalidateQueries({ queryKey: ['diary', 'list'] });
+      queryClient.invalidateQueries({ queryKey: ['userInfo'] });
+      // setSnackbar('편지가 도착했습니다');
+    },
+    onError: (error) => {
+      setSnackbar(error.response.data.message || '오류가 발생했습니다.');
+    },
+    onSettled: () => {
+      setSendModalVisible(false);
+    },
+  });
+
   const onClose = () => {
-    if (id === NEW_DIARY) return;
-    if (isEditing) {
-      setIsEditing(false);
-      setDiaryInput(content);
-      setSnackbar('수정이 취소되었습니다.');
-      return;
-    }
+    // 변경된 내용이 없을 땐 모달 띄우지 않음
+    diaryInput === content ? setIsEditing(false) : setEditModalVisible(true);
+  };
+
+  const onSend = () => {
+    setSendModalVisible(true);
   };
 
   const onDelete = () => {
@@ -89,6 +117,17 @@ const DiaryCard = ({ id, createdTime, content, isEditing, setIsEditing }: IDiary
     removeDiary.mutate(id);
   };
 
+  const onConfirmEdit = () => {
+    setIsEditing(false);
+    setDiaryInput(content);
+    setSnackbar('수정이 취소되었습니다.');
+    setEditModalVisible(false);
+  };
+
+  const onConfirmSend = () => {
+    sendDiary.mutate({ targetDate });
+  };
+
   const onSave = () => {
     if (diaryInput === '') {
       setSnackbar('입력된 내용이 없습니다.');
@@ -129,9 +168,11 @@ const DiaryCard = ({ id, createdTime, content, isEditing, setIsEditing }: IDiary
             createdTime={id !== NEW_DIARY ? createdTime : ''}
             timeStartWriting={timeStartWriting}
             isEditing={isEditing}
+            isLetterSent={isLetterSent}
             onClose={onClose}
             onSave={onSave}
             onDelete={onDelete}
+            onSend={onSend}
           />
           {dateStatus === 'TODAY' ? (
             <DiaryInput
@@ -159,6 +200,20 @@ const DiaryCard = ({ id, createdTime, content, isEditing, setIsEditing }: IDiary
         onConfirm={onConfirmDelete}
         content="심심기록을 삭제하시겠습니까?"
       />
+      <BasicConfirmModal
+        visible={isEditModalVisible}
+        setIsVisible={setEditModalVisible}
+        onConfirm={onConfirmEdit}
+        content="수정을 취소하시겠습니까?"
+      />
+      <BasicConfirmModal
+        visible={isSendModalVisible}
+        setIsVisible={setSendModalVisible}
+        onConfirm={onConfirmSend}
+        content="기록을 보내시겠습니까?"
+        confirmText="보내기"
+      />
+      {sendDiary.isPending && <DiaryLoading />}
     </>
   );
 };

diff --git a/src/components/diary/carousel/DiaryCardHeader.tsx b/src/components/diary/carousel/DiaryCardHeader.tsx
@@ -11,9 +11,11 @@ interface DiaryCardHeaderProps {
   createdTime: string;
   timeStartWriting: string;
   isEditing: boolean;
+  isLetterSent: boolean;
   onSave: () => void;
   onClose: () => void;
   onDelete: () => void;
+  onSend: () => void;
 }
 
 const formatTime = (time: string) => {
@@ -26,9 +28,11 @@ const DiaryCardHeader = ({
   createdTime,
   timeStartWriting,
   isEditing,
+  isLetterSent,
   onSave,
   onClose,
   onDelete,
+  onSend,
 }: DiaryCardHeaderProps) => {
   return (
     <View style={styles.header}>
@@ -41,13 +45,23 @@ const DiaryCardHeader = ({
           (isEditing ? (
             <IconButton icon="close" size={16} onPress={onClose} style={styles.icon} />
           ) : (
-            <MyIconButton
-              iconSet="Feather"
-              name="trash-2"
-              size={16}
-              onPress={onDelete}
-              style={styles.icon}
-            />
+            <>
+              <MyIconButton
+                iconSet="Feather"
+                name="send"
+                size={16}
+                onPress={onSend}
+                style={styles.icon}
+                disabled={isLetterSent}
+              />
+              <MyIconButton
+                iconSet="Feather"
+                name="trash-2"
+                size={16}
+                onPress={onDelete}
+                style={styles.icon}
+              />
+            </>
           ))}
       </View>
     </View>

diff --git a/src/components/diary/carousel/DiaryCarousel.native.tsx b/src/components/diary/carousel/DiaryCarousel.native.tsx
@@ -8,7 +8,7 @@ import useDiaryHook from '@hooks/diary/diaryHook';
 import CenterViewText from '@components/common/CenterViewText';
 
 const DiaryCarousel = ({ selectedDate }: IDiaryCarouselProps) => {
-  const { data, isPending, isError } = useDiaryHook(selectedDate);
+  const { data, isPending, isError, sendStatus } = useDiaryHook(selectedDate);
   const [activeIndex, setActiveIndex] = useState(0);
   const [isEditing, setIsEditing] = useState(false);
   const flatListRef = useRef<FlatList<IDiary>>(null);
@@ -27,6 +27,7 @@ const DiaryCarousel = ({ selectedDate }: IDiaryCarouselProps) => {
         content={item.content}
         isEditing={isEditing}
         setIsEditing={setIsEditing}
+        isLetterSent={sendStatus}
       />
     ),
     [data],
@@ -58,6 +59,7 @@ const DiaryCarousel = ({ selectedDate }: IDiaryCarouselProps) => {
           content=""
           isEditing={isEditing}
           setIsEditing={setIsEditing}
+          isLetterSent={sendStatus}
         />
         <DiaryPagination activeIndex={0} diaryList={data} />
       </View>

diff --git a/src/components/diary/carousel/DiaryCarousel.web.tsx b/src/components/diary/carousel/DiaryCarousel.web.tsx
@@ -8,11 +8,12 @@ import CenterViewText from '@components/common/CenterViewText';
 
 const DiaryCarousel = ({ selectedDate }: IDiaryCarouselProps) => {
   const [activeIndex, setActiveIndex] = useState(0);
-  const { data, isPending, isError, isSuccess } = useDiaryHook(selectedDate);
+  const { data, isPending, isError, isSuccess, sendStatus } = useDiaryHook(selectedDate);
   const [isEditing, setIsEditing] = useState(false);
 
   useEffect(() => {
     setActiveIndex(0);
+    setIsEditing(false);
   }, [selectedDate]);
 
   if (isPending) {
@@ -48,6 +49,7 @@ const DiaryCarousel = ({ selectedDate }: IDiaryCarouselProps) => {
           content={data[activeIndex]?.content || ''}
           isEditing={isEditing}
           setIsEditing={setIsEditing}
+          isLetterSent={sendStatus}
         />
       </View>
     </View>