Merge pull request #58 from DearMyPeace/dev/ai-letter-변경-요청-사항/#57

fix: ai letter 변경 요청 사항/#57

package.json

@@ -27,6 +27,7 @@
     "date-fns": "^3.6.0",
     "html-webpack-plugin": "^5.6.0",
     "jwt-decode": "^4.0.0",
+    "lodash": "^4.17.21",
     "react": "18.2.0",
     "react-apple-signin-auth": "^1.1.0",
     "react-dom": "^18.2.0",
@@ -62,6 +63,7 @@
     "@react-native/eslint-config": "0.74.84",
     "@react-native/metro-config": "0.74.84",
     "@react-native/typescript-config": "0.74.84",
+    "@types/lodash": "^4.17.6",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-native": "^0.73.0",

src/App.tsx

@@ -34,7 +34,7 @@ const App = () => {
         <GoogleOAuthProviderWrapper>
           <QueryClientProvider client={queryClient}>
             <SafeAreaProvider>
-              <SafeAreaView style={styles.safeArea} edges={['bottom', 'left', 'right']}>
+              <SafeAreaView style={styles.safeArea} edges={['left', 'right']}>
                 {isLoading ? (
                   <SplashScreen onFinish={() => setIsLoading(false)} />
                 ) : (

src/api/ai/get.ts

@@ -1,14 +1,40 @@
 // src/api/ai/get.ts
 import instance from '@api/axios';
 import { IAiPersonaData } from '@type/AiPersona';
+import { IDate, IDay } from '@type/Diary';
+import { IID } from '@type/IAiLetterEntry';
 
-export const fetchTodayAiLetters = async (total) => {
-  const response = await instance.get(`/aiLetters?total=${total}`);
+interface IAiLettersContent {
+  id: number;
+  date: string;
+  content: string;
+}
+
+export const fetchAiLettersViaID = async ({ id }: IID): Promise<IAiLettersContent[]> => {
+  const response = await instance.get(`/aiLetters?id=${id}`);
   return response.data;
 };
 
-export const fetchNextAiLetter = async (offset, total) => {
-  const response = await instance.get(`/aiLetters?offset=${offset}&total=${total}`);
+export const fetchAiLettersViaDate = async ({
+  year,
+  month,
+  day,
+}: IDay): Promise<IAiLettersContent[]> => {
+  const response = await instance.get(`/aiLetters/${year}/${month}/${day}`);
+  return response.data;
+};
+
+interface IAiLettersMonthSummary {
+  id: number;
+  date: string;
+  summary: string;
+}
+
+export const fetchAiLettersMonthSummary = async ({
+  year,
+  month,
+}: IDate): Promise<IAiLettersMonthSummary[]> => {
+  const response = await instance.get(`/aiLetters/${year}/${month}`);
   return response.data;
 };
 

src/api/mock/AiLetterEntries.ts

@@ -100,6 +100,24 @@ const AiLetterEntries = [
     content:
       '한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지한글로만쓰는편지',
   },
+  {
+    id: '20',
+    date: '2024-07-01',
+    summary: 'Today was great!',
+    content: 'Today was great because I went hiking and enjoyed the outdoors.',
+  },
+  {
+    id: '22',
+    date: '2024-07-02',
+    summary: 'Challenging day at workChallenging day at workChallenging day at work',
+    content: 'Work was tough today, but I managed to get through it.',
+  },
+  {
+    id: '23',
+    date: '2024-07-04',
+    summary: 'Challenging day at workChallenging day at workChallenging day at work',
+    content: 'Work was tough today, but I managed to get through it.',
+  },
 ];
 
 export default AiLetterEntries;

src/components/ai/AiLetterEntryHeader.tsx

@@ -40,19 +40,23 @@ const AiLetterEntryHeader: React.FC<AiLetterEntryHeaderProps> = ({
       style={({ pressed }) => [{ backgroundColor: pressed ? 'transparent' : 'transparent' }]}
     >
       <View style={styles.incoming}>
-        <MyText style={styles.date}>
-          {new Date(section.date).toLocaleDateString('ko-KR', {
-            month: 'long',
-            day: '2-digit',
-          })}
-        </MyText>
+        <View style={styles.dateWrapper}>
+          <MyText style={styles.date}>
+            {new Date(section.date).toLocaleDateString('ko-KR', {
+              month: 'long',
+              day: '2-digit',
+            })}
+          </MyText>
+          {section.replyStatus === 'N' && <View style={styles.badge} />}
+        </View>
         <MyText
           style={[styles.summary, isPressed && styles.summaryPressed]}
           numberOfLines={1}
           ellipsizeMode="tail"
         >
           {section.summary}
         </MyText>
+
         <Animated.View style={{ transform: [{ rotate }] }}>
           <Entypo name="chevron-small-right" size={24} color="gray" />
         </Animated.View>
@@ -71,6 +75,11 @@ const styles = StyleSheet.create({
     borderBottomColor: '#ccc',
     backgroundColor: 'transparent',
   },
+  dateWrapper: {
+    position: 'relative',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
   date: {
     fontSize: fontMedium,
     fontFamily: 'GowunBatang-Bold',
@@ -88,6 +97,17 @@ const styles = StyleSheet.create({
   summaryPressed: {
     color: 'lightgray',
   },
+  badge: {
+    position: 'absolute',
+    top: 1,
+    right: -4,
+    backgroundColor: '#EB6D52',
+    borderRadius: 4,
+    width: 4,
+    height: 4,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 });
 
 export default AiLetterEntryHeader;

src/components/common/TabIcons.tsx

@@ -1,36 +1,41 @@
-import React from 'react';
-import { Platform, Image } from 'react-native';
+import React, { memo } from 'react';
+import { View, StyleSheet, Platform, Image } from 'react-native';
 import { ITabBarIconProps } from '@type/ITabBarIconProps';
 import CalendarIconSVG from '@assets/images/diary.svg';
 import PieceIconSVG from '@assets/images/piece.svg';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import AntDesign from 'react-native-vector-icons/AntDesign';
 import MyIconButtons from '@components/common/MyIconButtons';
-import Svg, { Circle } from 'react-native-svg';
 
-export const CalendarIcon = ({ focused, color, size }: ITabBarIconProps) => {
+export const CalendarIcon = memo(({ color }: ITabBarIconProps) => {
   if (Platform.OS === 'web') {
     return <Image source={CalendarIconSVG} tintColor={color} style={{ width: 24, height: 24 }} />;
   }
   return <CalendarIconSVG style={{ color: color }} width={24} height={24} />;
-};
+});
 
-export const AiLetterIcon = ({ focused, color, size }: ITabBarIconProps) => {
-  const currentHour = new Date().getHours();
-  const iconName = currentHour < 12 ? 'mail-outline' : 'mail-open-outline';
-  return <Ionicons name={iconName} color={color} size={26} />;
-};
+export const AiLetterIcon = memo(({ color, userInfo }: ITabBarIconProps & { userInfo: any }) => {
+  const iconName = userInfo.replyStatus === 'C' ? 'mail-open-outline' : 'mail-outline';
+  const showBadge = userInfo.replyStatus === 'R';
 
-export const ShopIcon = ({ focused, color, size }: ITabBarIconProps) => (
+  return (
+    <View>
+      <Ionicons name={iconName} color={color} size={26} />
+      {showBadge && <View style={styles.badge} />}
+    </View>
+  );
+});
+
+export const ShopIcon = memo(({ color }: ITabBarIconProps) => (
   <AntDesign name="isv" color={color} size={24.5} />
-);
+));
 
-export const PieceIcon = ({ focused, color, size }: ITabBarIconProps) => {
+export const PieceIcon = memo(({ color }: ITabBarIconProps) => {
   if (Platform.OS === 'web') {
     return <Image source={PieceIconSVG} tintColor={color} style={{ width: 34, height: 34 }} />;
   }
   return <PieceIconSVG style={{ color: color }} width={34} height={34} />;
-};
+});
 
 export const CloseIcon = ({ onPress }: { onPress: () => {} }) => (
   <MyIconButtons
@@ -41,3 +46,17 @@ export const CloseIcon = ({ onPress }: { onPress: () => {} }) => (
     style={{ paddingHorizontal: 16 }}
   />
 );
+
+const styles = StyleSheet.create({
+  badge: {
+    position: 'absolute',
+    right: -1,
+    top: 1,
+    backgroundColor: '#EB6D52',
+    borderRadius: 8,
+    width: 7,
+    height: 7,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});