refactor: PR 리뷰를 반영한 리팩토링 (#70)

* refactor: 읽지 않은 편지 수 조회 기능 리팩토링

* rename: NewLetterModal 을 UnreadLetterModal로 파일명 및 함수명 변경

* fix: 읽지 않은 편지가 존재할 때 다른 우체통 이미지 보여주도록 수정

* fix: 오고 있는 편지 모달에서 편지 항목 눌렀을 때 보드로 이동하는 에러 해결

Author: tifsy

src/apis/unreadLetters.ts

@@ -1,11 +1,5 @@
 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');

src/pages/Home/components/GoToLetterBox.tsx

@@ -1,11 +1,24 @@
+import { useState, useEffect } from 'react';
 import { Link } from 'react-router';
 
+import { getUnreadLettersCount } from '@/apis/unreadLetters';
 import goToLetterBoxNewLetters from '@/assets/images/go-to-letter-box-new-letters.png';
 import goToLetterBox from '@/assets/images/go-to-letter-box.png';
-import { useIncomingLettersStore } from '@/stores/incomingLettersStore';
 
 const GoToLetterBox = () => {
-  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 (
     <div className="absolute bottom-15 left-5 z-9 flex">

src/pages/Home/components/HomeRight.tsx

@@ -5,7 +5,7 @@ import { getUnreadLettersCount } from '@/apis/unreadLetters';
 import FloatingLetters from './FloatingLetters';
 import GoToLetterBoard from './GoToLetterBoard';
 import GoToLetterBox from './GoToLetterBox';
-import NewLetterModal from './NewLetterModal';
+import UnreadLetterModal from './UnreadLetterModal';
 
 const HomeRight = () => {
   const [arrivedCount, setArrivedCount] = useState<number>(0);
@@ -27,7 +27,7 @@ const HomeRight = () => {
       {arrivedCount !== 0 && <FloatingLetters />}
       <GoToLetterBox />
       <GoToLetterBoard />
-      {arrivedCount !== 0 && <NewLetterModal />}
+      {arrivedCount !== 0 && <UnreadLetterModal />}
     </div>
   );
 };

src/pages/Home/components/ShowIncomingLettersModal.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect } from 'react';
-import { useNavigate } from 'react-router';
 
 import ModalBackgroundWrapper from '@/components/ModalBackgroundWrapper';
 import ModalOverlay from '@/components/ModalOverlay';
@@ -11,19 +10,11 @@ interface ShowIncomingLettersModalProps {
 }
 
 const ShowIncomingLettersModal = ({ onClose }: ShowIncomingLettersModalProps) => {
-  const navigate = useNavigate();
-
-  const handleNavigation = (incomingId: number) => {
-    navigate(`/board/letter/${incomingId}`, {
-      state: { isShareLetterPreview: false },
-    });
-  };
-
   const { data, fetchIncomingLetters } = useIncomingLettersStore();
 
   useEffect(() => {
     fetchIncomingLetters();
-  }, []);
+  }, [fetchIncomingLetters]);
 
   return (
     <ModalOverlay closeOnOutsideClick onClose={onClose}>
@@ -42,7 +33,6 @@ const ShowIncomingLettersModal = ({ onClose }: ShowIncomingLettersModalProps) =>
                 <div
                   className="text-gray-80 body-m flex h-10 w-full items-center justify-between gap-1 rounded-lg bg-white p-3"
                   key={letter.letterId}
-                  onClick={() => handleNavigation(letter.letterId)}
                 >
                   <p className="truncate">{letter.title}</p>
                   <p>{letter.remainingTime}</p>

src/pages/Home/components/NewLetterModal.tsx renamed to src/pages/Home/components/UnreadLetterModal.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 
 import { getUnreadLettersCount } from '@/apis/unreadLetters';
 
-const NewLetterModal = () => {
+const UnreadLetterModal = () => {
   const [arrivedCount, setArrivedCount] = useState<number>(0);
 
   useEffect(() => {
@@ -24,4 +24,4 @@ const NewLetterModal = () => {
   );
 };
 
-export default NewLetterModal;
+export default UnreadLetterModal;

src/types/unreadLetters.d.ts

@@ -0,0 +1,4 @@
+interface UnreadLetters {
+  data: number;
+  message: string;
+}