feat: 오고 있는 편지 조회 기능 구현 (mock api) (#36)

* style: 홈 페이지 eslint 오류 해결

* remove: 사용하지 않는 파일 삭제

* feat: 오고 있는 편지 조회 mock api 연결

* feat: 오고 있는 편지 클릭 시 편지 상세 페이지로 이동

* feat: 편지 목록 높이 자동 조정 및 스크롤 기능 추가

* fix: 랜덤 응원 메시지 모달 위로 뜨는 오류 해결

* fix: 오고 있는 편지 클릭 시 편지 미리보기로 이동하는 라우팅 오류 해결

* feat: 오고 있는 편지 목록에서 시간이 다 된 항목을 자동으로 삭제하는 기능 추가

* refactor: 오고 있는 편지 파일 구조 수정

* style: 오고 있는 편지 함수 선언을 화살표 함수로 변환

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

Author: tifsy

src/apis/incomingLetters.ts

@@ -0,0 +1,16 @@
+import { client } from '@/apis/client';
+
+export const fetchIncomingLettersApi = async (token: string) => {
+  try {
+    const { data } = await client.get('/api/letters?status=delivery', {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    console.log('불러온 데이터', data);
+    return data;
+  } catch (error) {
+    console.error('❌오고 있는 편지 목록을 불러오던 중 에러 발생', error);
+    throw error;
+  }
+};

src/pages/Home/components/FloatingLetters.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useRef } from 'react';
 import gsap from 'gsap';
+import { useEffect, useRef } from 'react';
+
 import letter1 from '@/assets/images/letter-1.png';
 import letter2 from '@/assets/images/letter-2.png';
 import letter3 from '@/assets/images/letter-3.png';

src/pages/Home/components/GoToLetterBoard.tsx

@@ -1,4 +1,5 @@
 import { Link } from 'react-router';
+
 import goToLetterBoard from '@/assets/images/go-to-letter-board.png';
 
 const GoToLetterBoard = () => {

src/pages/Home/components/GoToLetterBox.tsx

@@ -1,10 +1,11 @@
 import { Link } from 'react-router';
+
 import goToLetterBoxNewLetters from '@/assets/images/go-to-letter-box-new-letters.png';
 import goToLetterBox from '@/assets/images/go-to-letter-box.png';
 
 const GoToLetterBox = () => {
   //TODO : hasNewLetters 전역으로 상태 관리하기
-  let hasNewLetters = true;
+  const hasNewLetters = true;
   return (
     <div className="absolute bottom-10 left-5 z-9 flex w-fit">
       <div className="text-left">

src/pages/Home/components/GoToRandomLetter.tsx

@@ -1,4 +1,5 @@
 import { Link } from 'react-router';
+
 import goToRandomLetter from '@/assets/images/go-to-random-letter.png';
 
 const GoToRandomLetter = () => {

src/pages/Home/components/HomeBackgroundLeft.tsx

@@ -1,5 +1,5 @@
-import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
 import homeLeftMountain from '@/assets/images/home-left-mountain.png';
+import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
 
 const HomeBackgroundLeft = () => {
   return (

src/pages/Home/components/HomeBackgroundRightBottom.tsx

@@ -1,5 +1,6 @@
-import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
 import homeRightMountainBottom from '@/assets/images/home-right-mountain-bottom.png';
+import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
+
 const HomeBackgroundRightBottom = () => {
   return (
     <BackgroundImageWrapper

src/pages/Home/components/HomeBackgroundRightTop.tsx

@@ -1,5 +1,5 @@
-import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
 import homeRightMountainTop from '@/assets/images/home-right-mountain-top.png';
+import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
 const HomeBackgroundRightTop = () => {
   return (
     <BackgroundImageWrapper

src/pages/Home/components/HomeLeft.tsx

@@ -1,6 +1,6 @@
-import RandomCheer from './RandomCheer';
-import GoToWrite from './GoToWrite';
 import GoToRandomLetter from './GoToRandomLetter';
+import GoToWrite from './GoToWrite';
+import RandomCheer from './RandomCheer';
 
 const HomeLeft = () => {
   return (

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 전역으로 상태 관리할지
-  let 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>
   );
 };