feat: 새로 도착한 편지 개수 계산 구현

Author: tifsy

src/apis/incomingLetters.ts

@@ -7,6 +7,7 @@ export const fetchIncomingLettersApi = async (token: string) => {
         Authorization: `Bearer ${token}`,
       },
     });
+    console.log('불러온 데이터', data);
     return data;
   } catch (error) {
     console.error('❌오고 있는 편지 목록을 불러오던 중 에러 발생', error);

src/pages/Home/components/HomeRight.tsx

@@ -1,18 +1,24 @@
+import { useEffect } from 'react';
+
+import { useIncomingLettersStore } from '@/stores/incomingLettersStore';
+
 import FloatingLetters from './FloatingLetters';
 import GoToLetterBoard from './GoToLetterBoard';
 import GoToLetterBox from './GoToLetterBox';
 import NewLetterModal from './NewLetterModal';
 
 const HomeRight = () => {
-  //TODO : hasNewLetters 전역으로 상태 관리할지
-  const hasNewLetters = true;
+  const { arrivedCount, fetchIncomingLetters } = useIncomingLettersStore();
+  useEffect(() => {
+    fetchIncomingLetters();
+  }, []);
 
   return (
     <div className="flex h-screen w-full max-w-150 min-w-[300px] flex-shrink-0 grow snap-start flex-col items-center overflow-x-hidden pt-5">
-      {hasNewLetters && <FloatingLetters />}
+      {arrivedCount !== 0 && <FloatingLetters />}
       <GoToLetterBox />
       <GoToLetterBoard />
-      {hasNewLetters && <NewLetterModal />}
+      {arrivedCount !== 0 && <NewLetterModal />}
     </div>
   );
 };

src/pages/Home/components/NewLetterModal.tsx

@@ -1,12 +1,18 @@
-// import { useState } from 'react';
+import { useEffect } from 'react';
 
+import { useIncomingLettersStore } from '@/stores/incomingLettersStore';
+
+//TODO: 내 편지함 상세 조회에서 해당 편지를 조회하면 arrivedCount가 1 감소하도록
 const NewLetterModal = () => {
-  // const [newLetterCount, setNewLetterCount] = useState(0);
-  const newLetterCount = 3;
+  const { arrivedCount, fetchIncomingLetters } = useIncomingLettersStore();
+
+  useEffect(() => {
+    fetchIncomingLetters();
+  }, []);
 
   return (
     <p className="text-gray-60 body-b absolute top-30 mb-10 w-fit animate-pulse rounded-full bg-white px-6 py-4">
-      {newLetterCount}통의 편지가 도착했어요!
+      {arrivedCount}통의 편지가 도착했어요!
     </p>
   );
 };

src/stores/incomingLettersStore.ts

@@ -12,6 +12,7 @@ interface IncomingLetters {
 
 interface IncomingLettersStore {
   data: IncomingLetters[];
+  arrivedCount: number;
   message: string;
   timestamp: string;
   fetchIncomingLetters: () => void;
@@ -35,22 +36,28 @@ const calculatingRemainingTime = (deliveryCompletedAt: string): string => {
 
 export const useIncomingLettersStore = create<IncomingLettersStore>((set) => ({
   data: [],
+  arrivedCount: 0,
   message: '',
   timestamp: '',
   fetchIncomingLetters: async () => {
     try {
       const token = localStorage.getItem('token') || '';
       const data = await fetchIncomingLettersApi(token);
 
-      const updatedLetters = data.data
-        .map((letter: IncomingLetters) => ({
-          ...letter,
-          remainingTime: calculatingRemainingTime(letter.deliveryCompletedAt),
-        }))
-        .filter((letter: IncomingLetters) => letter.remainingTime !== '00:00:00');
+      let arrivedCount = 0;
+      const updatedLetters = data.data.map((letter: IncomingLetters) => {
+        const remainingTime = calculatingRemainingTime(letter.deliveryCompletedAt);
+        if (remainingTime === '00:00:00') arrivedCount += 1; // 도착한 편지 카운트
 
+        return { ...letter, remainingTime };
+      });
+
+      const inProgressLetters = updatedLetters.filter(
+        (letter: IncomingLetters) => letter.remainingTime !== '00:00:00',
+      );
       set({
-        data: updatedLetters,
+        data: inProgressLetters,
+        arrivedCount,
         message: data.message,
         timestamp: data.timestamp,
       });