Feat: 리포트 화면 교체

src/api/report/get.ts

@@ -1,5 +1,5 @@
 import instance from '@api/axios';
-import { DayEmotionData, EmotionData, IReportContent, IReportData } from '@type/IReport';
+import { DayEmotionData, EmotionData, IReportData } from '@type/IReport';
 
 export const fetchWeekReport = async (targetDate: string): Promise<EmotionData> => {
   const response = await instance.get(`/report/week?targetDate=${targetDate}`);
@@ -11,51 +11,7 @@ export const fetchReportPNN = async (targetDate: string): Promise<DayEmotionData
   return response.data;
 };
 
-const mockReportData = [
-  {
-    rate: 0.3,
-    keyword: '건강',
-    content:
-      '날씨가 추워질수록 건강에 대한 언급이 많아졌어요. 다음주부터는 더 춥다고 하니, 따뜻하게 입는다면 건강에 대한 걱정이 덜 할 것 같아요.',
-  },
-  {
-    rate: 0.2,
-    keyword: '영화',
-    content: '영화를 보는 것은 영화를 보는 것이 아니라 영화를 보는 것입니다.',
-  },
-  {
-    rate: 0.15,
-    keyword: '날씨',
-    content:
-      '날씨가 추워질수록 건강에 대한 언급이 많아졌어요. 다음주부터는 더 춥다고 하니, 따뜻하게 입는다면 건강에 대한 걱정이 덜 할 것 같아요.',
-  },
-  {
-    rate: 0.15,
-    keyword: '요리하다',
-    content: '요리하다는 것은 요리하는 것이 아니라 요리하는 것입니다.',
-  },
-  {
-    rate: 0.1,
-    keyword: '독서',
-    content: '독서는 독서하는 것이 아니라 독서하는 것입니다.',
-  },
-];
-
-export const fetchMockReportData = async (targetDate: string): Promise<IReportData[]> => {
-  console.log(`fetchMockReportData: ${targetDate}`);
-  return mockReportData;
-};
-
-export const fetchMockReportKeyword = async ({
-  targetDate,
-  rank,
-}: {
-  targetDate: string;
-  rank: number;
-}): Promise<IReportContent> => {
-  console.log(`fetchMockReportKeyword: ${targetDate}, ${rank}`);
-  return {
-    keyword: mockReportData[rank - 1].keyword,
-    content: mockReportData[rank - 1].content,
-  };
+export const fetchMonthlyReport = async (targetDate: string): Promise<IReportData[]> => {
+  const response = await instance.get(`/report/monthly/${targetDate}`);
+  return response.data;
 };

src/components/diary/carousel/DiaryCard.tsx

@@ -161,7 +161,7 @@ const DiaryCard = ({
         setIsVisible={setSendModalVisible}
         onConfirm={onConfirmSend}
         content={`이 날의 기록을 모두 보내시겠습니까?\n수정 후 기록을 다시 보내면\n이전 편지는 사라집니다.`}
-        confirmText="보내기"
+        confirmText="편지 받기"
       />
       {sendDiary.isPending && <DiaryLoading />}
     </>

src/components/diary/carousel/DiaryCardHeader.tsx

@@ -68,7 +68,7 @@ const DiaryCardHeader = ({
                   disabled={isLetterSent}
                   loading={loadingButton === 'SEND'}
                 >
-                  보내기
+                  편지 받기
                 </TextButton>
               )}
               <TextButton

src/components/diary/carousel/DiaryCarousel.web.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import DiaryCard from '@components/diary/carousel/DiaryCard';
-import DiaryArrowIcons from '@components/diary/carousel/DiaryArrowIcons';
+// import DiaryArrowIcons from '@components/diary/carousel/DiaryArrowIcons';
 import { NEW_DIARY } from '@type/Diary';
 import useDiaryHook from '@hooks/diary/diaryHook';
 import { useRecoilValue } from 'recoil';
@@ -18,25 +18,25 @@ const DiaryCarousel = () => {
     setIsEditing(false);
   }, [selectedDate]);
 
-  const onLeftPress = () => {
-    if (activeIndex === 0) return;
-    setActiveIndex(activeIndex - 1);
-  };
+  // const onLeftPress = () => {
+  //   if (activeIndex === 0) return;
+  //   setActiveIndex(activeIndex - 1);
+  // };
 
-  const onRightPress = () => {
-    if (activeIndex === data.length - 1) return;
-    setActiveIndex(activeIndex + 1);
-  };
+  // const onRightPress = () => {
+  //   if (activeIndex === data.length - 1) return;
+  //   setActiveIndex(activeIndex + 1);
+  // };
 
   return (
     <View style={styles.container}>
       <View style={styles.cardContainer}>
-        {isSuccess && !isEditing && activeIndex > 0 && (
+        {/* {isSuccess && !isEditing && activeIndex > 0 && (
           <DiaryArrowIcons direction="left" onPress={onLeftPress} />
         )}
         {isSuccess && !isEditing && activeIndex < data.length - 1 && (
           <DiaryArrowIcons direction="right" onPress={onRightPress} />
-        )}
+        )} */}
         <DiaryCard
           id={data[activeIndex]?.id || NEW_DIARY}
           content={data[activeIndex]?.content || ''}

src/hooks/diary/useDiaryActions.ts

@@ -100,6 +100,8 @@ export const useDiaryActions = ({ setIsEditing, setTimeStartWriting }: IUseDiary
       queryClient.invalidateQueries({ queryKey: ['userInfo'] });
       queryClient.invalidateQueries({ queryKey: ['fetchAiLettersMonthSummary'] });
       queryClient.invalidateQueries({ queryKey: ['fetchAiLetterByID'] });
+      const [year, month] = targetDate.split('-').map((date) => Number(date));
+      queryClient.invalidateQueries({ queryKey: ['reportList', { year, month }] });
     },
     onError: (error: any) => {
       setSnackbar(error.response.data.message || '오류가 발생했습니다.');

src/hooks/report/useReportData.ts

@@ -1,12 +1,14 @@
 import { useQuery } from '@tanstack/react-query';
-import { fetchMockReportData, fetchMockReportKeyword } from '@api/report/get';
+import { fetchMonthlyReport } from '@api/report/get';
 import { ICalendarModalDate } from '@type/Diary';
 
 export const useReportData = (selectedDate: ICalendarModalDate) => {
   return useQuery({
     queryKey: ['reportList', selectedDate],
     queryFn: () =>
-      fetchMockReportData(`${selectedDate.year}${selectedDate.month.toString().padStart(2, '0')}`),
+      fetchMonthlyReport(`${selectedDate.year}${selectedDate.month.toString().padStart(2, '0')}`),
+    placeholderData: undefined,
+    staleTime: Infinity,
   });
 };
 
@@ -17,12 +19,10 @@ export const useReportKeyword = ({
   selectedDate: ICalendarModalDate;
   rank: number;
 }) => {
-  return useQuery({
-    queryKey: ['reportKeyword', selectedDate, rank],
-    queryFn: () =>
-      fetchMockReportKeyword({
-        targetDate: `${selectedDate.year}${selectedDate.month.toString().padStart(2, '0')}`,
-        rank: rank,
-      }),
-  });
+  const { data: reportData } = useReportData(selectedDate);
+
+  return {
+    keyword: reportData?.[rank - 1]?.keyword,
+    comment: reportData?.[rank - 1]?.comment,
+  };
 };

src/navigators/PieceStackNavigator.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';
-import Piece from '@screens/piece/Piece';
 import useUserSetup from '@hooks/user/useUserSetup';
 import NewReportView from '@screens/report/NewReportView';
 const Stack = createStackNavigator();
@@ -42,8 +41,7 @@ const PieceStackNavigator = () => {
           title: '마음조각',
         }}
         name="Piece"
-        component={Piece}
-        // component={NewReportView}
+        component={NewReportView}
       />
     </Stack.Navigator>
   );

src/screens/report/NewReportContent.tsx

@@ -1,12 +1,10 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { StyleSheet, ScrollView, Pressable } from 'react-native';
 import MyText from '@components/common/MyText';
 import { fontMedium } from '@utils/Sizing';
 import { appColor1 } from '@utils/colors';
 import { ICalendarModalDate } from '@type/Diary';
 import { useReportKeyword } from '@hooks/report/useReportData';
-import ReportLoadingView from './ReportLoadingView';
-import ReportErrorView from './ReportErrorView';
 
 interface INewReportContentProps {
   selectedDate: ICalendarModalDate;
@@ -15,31 +13,15 @@ interface INewReportContentProps {
 }
 
 const NewReportContent = ({ selectedDate, rank, onPress }: INewReportContentProps) => {
-  const { data, isPending, isError } = useReportKeyword({ selectedDate, rank });
-
-  useEffect(() => {
-    console.log(`rank: ${rank}`);
-    console.log(data);
-  }, [rank, data]);
-
-  // const onPress = () => {
-  //   setSelectedRank(null);
-  // };
-
-  if (isPending) {
-    return <ReportLoadingView />;
-  }
-  if (isError || !data) {
-    return <ReportErrorView />;
-  }
+  const { keyword, comment } = useReportKeyword({ selectedDate, rank });
 
   return (
     <Pressable onPress={onPress} style={styles.container}>
       <MyText size={fontMedium} bold>
-        {data?.keyword}
+        {keyword}
       </MyText>
       <ScrollView contentContainerStyle={{ maxHeight: 300 }} style={{ marginTop: 5 }}>
-        <MyText>{data?.content}</MyText>
+        <MyText>{comment}</MyText>
       </ScrollView>
     </Pressable>
   );

src/types/IReport.ts

@@ -28,7 +28,7 @@ export interface DayEmotionData {
 
 export interface IReportContent {
   keyword: string;
-  content: string;
+  comment: string;
 }
 
 export interface IReportData extends IReportContent {