feat: 읽지 않은 편지 수 조회 기능 구현 (#66)

Author: tifsy

src/apis/unreadLetters.ts

@@ -0,0 +1,18 @@
+import client from './client';
+
+export interface UnreadLetters {
+  data: number;
+  message: string;
+  timestamp: string;
+}
+
+export const getUnreadLettersCount = async (): Promise<UnreadLetters> => {
+  try {
+    const response = await client.get('/api/letters/unread/count');
+    console.log('📩 안 읽은 편지 개수 데이터', response);
+    return response.data;
+  } catch (error) {
+    console.error('❌안 읽은 편지 개수를 받아오던 중 에러가 발생했습니다', error);
+    throw new Error('안 읽은 편지 개수 조회 실패');
+  }
+};

src/pages/Home/components/HomeRight.tsx

@@ -1,17 +1,26 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
-import { useIncomingLettersStore } from '@/stores/incomingLettersStore';
+import { getUnreadLettersCount } from '@/apis/unreadLetters';
 
 import FloatingLetters from './FloatingLetters';
 import GoToLetterBoard from './GoToLetterBoard';
 import GoToLetterBox from './GoToLetterBox';
 import NewLetterModal from './NewLetterModal';
 
 const HomeRight = () => {
-  const { arrivedCount, fetchIncomingLetters } = useIncomingLettersStore();
+  const [arrivedCount, setArrivedCount] = useState<number>(0);
+
   useEffect(() => {
-    fetchIncomingLetters();
-  }, [fetchIncomingLetters]);
+    const fetchUnreadCount = async () => {
+      try {
+        const result = await getUnreadLettersCount();
+        setArrivedCount(result.data);
+      } catch (error) {
+        console.error('❌ 안 읽은 편지 개수를 불러오는 데 실패했습니다:', error);
+      }
+    };
+    fetchUnreadCount();
+  }, []);
 
   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">

src/pages/Home/components/NewLetterModal.tsx

@@ -1,8 +1,21 @@
-import { useIncomingLettersStore } from '@/stores/incomingLettersStore';
+import { useEffect, useState } from 'react';
+
+import { getUnreadLettersCount } from '@/apis/unreadLetters';
 
-//TODO: 내 편지함 상세 조회에서 해당 편지를 조회하면 arrivedCount가 1 감소하도록
 const NewLetterModal = () => {
-  const arrivedCount = useIncomingLettersStore((state) => state.arrivedCount);
+  const [arrivedCount, setArrivedCount] = useState<number>(0);
+
+  useEffect(() => {
+    const fetchUnreadCount = async () => {
+      try {
+        const result = await getUnreadLettersCount();
+        setArrivedCount(result.data);
+      } catch (error) {
+        console.error('❌ 안 읽은 편지 개수를 불러오는 데 실패했습니다:', error);
+      }
+    };
+    fetchUnreadCount();
+  }, []);
 
   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">