Merge pull request #85 from DearMyPeace/dev/piece-api/#84

feat: piece api/#84

src/api/report/get.ts

@@ -0,0 +1,11 @@
+import instance from '@api/axios';
+
+export const fetchWeekReport = async (targetDate: string) => {
+  const response = await instance.get(`/report/week?${targetDate}`);
+  return response.data;
+};
+
+export const fetchReportPNN = async (targetDate: string) => {
+  const response = await instance.get(`/report/week/${targetDate}`);
+  return response.data;
+};

src/screens/ai/AiLetterLoadingView.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { StyleSheet, View, ActivityIndicator } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import MyText from '@components/common/MyText';
 import { fontLarge } from '@utils/Sizing';
+import CustomLoadingControlWrapper from '@screens/common/CustomLoadingControlWrapper';
 
 const AiLetterLoadingView = () => {
   return (
     <View style={styles.container}>
-      <ActivityIndicator size="large" color="gray" />
+      <CustomLoadingControlWrapper />
       <MyText style={styles.text}> 편지를 가져오고 있어요. </MyText>
     </View>
   );

src/screens/common/CustomLoadingControlWrapper.tsx

@@ -0,0 +1,26 @@
+// src/components/CustomLoadingControlWrapper.tsx
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import CustomRefreshControl from '@screens/common/CustomRefreshControl';
+
+const CustomLoadingControlWrapper: React.FC = () => {
+  return (
+    <View style={styles.container}>
+      <CustomRefreshControl />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: 60,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  image: {
+    width: 50,
+    height: 50,
+  },
+});
+
+export default CustomLoadingControlWrapper;

src/screens/piece/Piece.tsx

@@ -2,8 +2,8 @@ import React, { useRef, useState } from 'react';
 import { View, StyleSheet, Animated, Image, TouchableWithoutFeedback } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import MyText from '@components/common/MyText';
-import stainedglassTranparent from '@assets/images/staindglass_NON.png';
-import stainedglassFrame from '@assets/images/staindglass_frame.png';
+import stainedglassTranparent from '@assets/images/stainedglass_NON.png';
+import stainedglassFrame from '@assets/images/stainedglass_frame.png';
 import { fontBasic } from '@utils/Sizing';
 import Report from '@screens/report/ReportView';
 

src/screens/report/ChartWrapper.tsx

@@ -5,17 +5,47 @@ import { fontBasic } from '@utils/Sizing';
 import ChartView from '@screens/report/ChartView';
 import Dailyreport from '@screens/report/DailyReport';
 
-const ReportWrapper = ({ emotionData, dayEmotionData }) => {
+const ChartWrapper = ({ emotionData, dayEmotionData }) => {
   const [selectedTab, setSelectedTab] = useState('긍정적');
 
   const renderContent = () => {
     switch (selectedTab) {
       case '긍정적':
-        return <ChartView emotionData={emotionData} labels={['즐거움', '사랑', '행복']} />;
+        return (
+          <View style={styles.content}>
+            <ChartView emotionData={emotionData} labels={['즐거움', '사랑', '행복']} />
+            <View style={styles.dailyReportContainer}>
+              <Dailyreport
+                date={dayEmotionData.positiveDate}
+                summary={dayEmotionData.positiveSummary}
+              />
+            </View>
+          </View>
+        );
       case '중립적':
-        return <ChartView emotionData={emotionData} labels={['평온', '호기심', '놀람', '중립']} />;
+        return (
+          <View style={styles.content}>
+            <ChartView emotionData={emotionData} labels={['평온', '호기심', '놀람', '중립']} />
+            <View style={styles.dailyReportContainer}>
+              <Dailyreport
+                date={dayEmotionData.neutralDate}
+                summary={dayEmotionData.neutralSummary}
+              />
+            </View>
+          </View>
+        );
       case '부정적':
-        return <ChartView emotionData={emotionData} labels={['슬픔', '분노', '두려움', '부정']} />;
+        return (
+          <View style={styles.content}>
+            <ChartView emotionData={emotionData} labels={['슬픔', '분노', '두려움', '부정']} />
+            <View style={styles.dailyReportContainer}>
+              <Dailyreport
+                date={dayEmotionData.negativeDate}
+                summary={dayEmotionData.negativeSummary}
+              />
+            </View>
+          </View>
+        );
       default:
         return null;
     }
@@ -49,12 +79,7 @@ const ReportWrapper = ({ emotionData, dayEmotionData }) => {
           </MyText>
         </Pressable>
       </View>
-      <View style={styles.content}>
-        {renderContent()}
-        <View style={styles.dailyReportContainer}>
-          <Dailyreport />
-        </View>
-      </View>
+      {renderContent()}
     </View>
   );
 };
@@ -126,4 +151,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default ReportWrapper;
+export default ChartWrapper;

src/screens/report/DailyReport.tsx

@@ -3,12 +3,11 @@ import React from 'react';
 import MyText from '@components/common/MyText';
 import { fontLarge } from '@utils/Sizing';
 
-const Dailyreport = () => {
+const Dailyreport = (date, summary) => {
   return (
     <View style={styles.container}>
-      <MyText style={styles.title}>2024년 6월 9일</MyText>
-      <MyText>오후 06:14</MyText>
-      <MyText>퇴근 하는 길에 딸기 세일하길래 두팩 구매했다. 내일은 딸기 파티닷 </MyText>
+      <MyText style={styles.title}>{date}</MyText>
+      <MyText>{summary}</MyText>
     </View>
   );
 };

src/screens/report/ReportErrorView.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import MyText from '@components/common/MyText';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import { fontMedium } from '@utils/Sizing';
+
+const ReportErrorView = () => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.emptyContainer}>
+        <AntDesign name="exclamationcircleo" size={120} color="#ccc" />
+        <MyText style={styles.emptyText}>조각을 표시할 수 없어요.</MyText>
+      </View>
+    </View>
+  );
+};
+
+export default ReportErrorView;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  emptyContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  emptyText: {
+    marginTop: 10,
+    fontSize: fontMedium,
+    color: 'gray',
+  },
+});

src/screens/report/ReportLoadingView.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import MyText from '@components/common/MyText';
+import { fontLarge } from '@utils/Sizing';
+import CustomLoadingControlWrapper from '@screens/common/CustomLoadingControlWrapper';
+
+const ReportLoadingView = () => {
+  return (
+    <View style={styles.container}>
+      <CustomLoadingControlWrapper />
+      <MyText style={styles.text}> 조각을 가져오고 있어요. </MyText>
+    </View>
+  );
+};
+
+export default ReportLoadingView;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingLeft: 36,
+    paddingRight: 36,
+    backgroundColor: 'transparent',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    marginTop: 16,
+    fontSize: fontLarge,
+  },
+});

src/screens/report/ReportView.tsx

@@ -1,29 +1,41 @@
 import React from 'react';
+import { useQuery } from '@tanstack/react-query';
 import { View, StyleSheet } from 'react-native';
 import MyText from '@components/common/MyText';
 import { fontLarge } from '@utils/Sizing';
 import ChartWrapper from '@screens/report/ChartWrapper';
+import { fetchWeekReport, fetchReportPNN } from '@api/report/get';
+import ReportLoadingView from './ReportLoadingView';
+import ReportErrorView from './ReportErrorView';
 
 const Report = () => {
-  const emotionData = {
-    happyCnt: 39,
-    appreciationCnt: 28,
-    loveCnt: 8,
-    tranquilityCnt: 7,
-    curiosityCnt: 28,
-    surpriseCnt: 39,
-    neutralTotalCnt: 15,
-    sadCnt: 10,
-    angryCnt: 5,
-    fearCnt: 20,
-    negativeTotalCnt: 12,
-  };
+  const targetDate = new Date().toISOString().slice(0, 10);
 
-  const dayEmotionData = {
-    positiveMaxCnt: 50,
-    neutralMaxCnt: 30,
-    negativeMaxCnt: 20,
-  };
+  const {
+    data: emotionData,
+    isLoading: isLoadingEmotionData,
+    error: emotionDataError,
+  } = useQuery({
+    queryKey: ['weekReport', targetDate],
+    queryFn: () => fetchWeekReport(targetDate),
+  });
+
+  const {
+    data: dayEmotionData,
+    isLoading: isLoadingDayEmotionData,
+    error: dayEmotionDataError,
+  } = useQuery({
+    queryKey: ['reportPNN', targetDate],
+    queryFn: () => fetchReportPNN(targetDate),
+  });
+
+  if (isLoadingEmotionData || isLoadingDayEmotionData) {
+    return <ReportLoadingView />;
+  }
+
+  if (emotionDataError || dayEmotionDataError) {
+    return <ReportErrorView />;
+  }
 
   return (
     <View style={styles.container}>
@@ -80,6 +92,20 @@ const styles = StyleSheet.create({
     textAlign: 'left',
     marginBottom: 20,
   },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  errorText: {
+    fontSize: 16,
+    color: 'red',
+  },
 });
 
 export default Report;