diff --git a/src/apis/unreadLetters.ts b/src/apis/unreadLetters.ts index d828441..d7bccc9 100644 --- a/src/apis/unreadLetters.ts +++ b/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 => { try { const response = await client.get('/api/letters/unread/count'); diff --git a/src/pages/Home/components/GoToLetterBox.tsx b/src/pages/Home/components/GoToLetterBox.tsx index 54bef21..ca8b3fe 100644 --- a/src/pages/Home/components/GoToLetterBox.tsx +++ b/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(0); + + useEffect(() => { + const fetchUnreadCount = async () => { + try { + const result = await getUnreadLettersCount(); + setArrivedCount(result.data); + } catch (error) { + console.error('❌ 안 읽은 편지 개수를 불러오는 데 실패했습니다:', error); + } + }; + fetchUnreadCount(); + }, []); return (
diff --git a/src/pages/Home/components/HomeRight.tsx b/src/pages/Home/components/HomeRight.tsx index 0ec0f9a..8182517 100644 --- a/src/pages/Home/components/HomeRight.tsx +++ b/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(0); @@ -27,7 +27,7 @@ const HomeRight = () => { {arrivedCount !== 0 && } - {arrivedCount !== 0 && } + {arrivedCount !== 0 && }
); }; diff --git a/src/pages/Home/components/ShowIncomingLettersModal.tsx b/src/pages/Home/components/ShowIncomingLettersModal.tsx index abc14f8..219015b 100644 --- a/src/pages/Home/components/ShowIncomingLettersModal.tsx +++ b/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 ( @@ -42,7 +33,6 @@ const ShowIncomingLettersModal = ({ onClose }: ShowIncomingLettersModalProps) =>
handleNavigation(letter.letterId)} >

{letter.title}

{letter.remainingTime}

diff --git a/src/pages/Home/components/NewLetterModal.tsx b/src/pages/Home/components/UnreadLetterModal.tsx similarity index 91% rename from src/pages/Home/components/NewLetterModal.tsx rename to src/pages/Home/components/UnreadLetterModal.tsx index b5ccf7a..c3491a3 100644 --- a/src/pages/Home/components/NewLetterModal.tsx +++ b/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(0); useEffect(() => { @@ -24,4 +24,4 @@ const NewLetterModal = () => { ); }; -export default NewLetterModal; +export default UnreadLetterModal; diff --git a/src/types/unreadLetters.d.ts b/src/types/unreadLetters.d.ts new file mode 100644 index 0000000..77ca598 --- /dev/null +++ b/src/types/unreadLetters.d.ts @@ -0,0 +1,4 @@ +interface UnreadLetters { + data: number; + message: string; +}