From bc66b775701f673dff100b0dbc4c90fc4c509559 Mon Sep 17 00:00:00 2001
From: Seungyeon Han <tiffanyhansy@gmail.com>
Date: Tue, 4 Mar 2025 16:48:40 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9D=BD=EC=A7=80=20=EC=95=8A=EC=9D=80?=
 =?UTF-8?q?=20=ED=8E=B8=EC=A7=80=20=EC=88=98=20=EC=A1=B0=ED=9A=8C=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/unreadLetters.ts                    | 18 ++++++++++++++++++
 src/pages/Home/components/HomeRight.tsx      | 19 ++++++++++++++-----
 src/pages/Home/components/NewLetterModal.tsx | 19 ++++++++++++++++---
 3 files changed, 48 insertions(+), 8 deletions(-)
 create mode 100644 src/apis/unreadLetters.ts

diff --git a/src/apis/unreadLetters.ts b/src/apis/unreadLetters.ts
new file mode 100644
index 0000000..d828441
--- /dev/null
+++ b/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('안 읽은 편지 개수 조회 실패');
+  }
+};
diff --git a/src/pages/Home/components/HomeRight.tsx b/src/pages/Home/components/HomeRight.tsx
index 9d20d0b..0ec0f9a 100644
--- a/src/pages/Home/components/HomeRight.tsx
+++ b/src/pages/Home/components/HomeRight.tsx
@@ -1,6 +1,6 @@
-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';
@@ -8,10 +8,19 @@ 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">
diff --git a/src/pages/Home/components/NewLetterModal.tsx b/src/pages/Home/components/NewLetterModal.tsx
index 03614c0..b5ccf7a 100644
--- a/src/pages/Home/components/NewLetterModal.tsx
+++ b/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">