feat:랜덤 편지 + 편지 상세 1차 기능 구현 (#46)

* feat:편지 상세 페이지 삭제 모달 추가

* chore:기존 파일들 컴포넌트파일로 이동

* feat:쿨타임 컴포넌트 생성 + 랜덤편지 타입 수정

* feat:차단된 편지 버튼 disabled처리

* feat:편지 상세보기 모달 생성(매칭편지는 상세페이지와 분리)

* fix:쿨타임 페이지 letterWrapper 적용

* feat:편지 상세, 랜덤 편지 api throw error 예외처리 추가

* feat:편지 매칭 제한시간 구현

* feat:랜덤편지 페이지 매칭 제한시간, 쿨타임 로직 구현

* feat:랜덤편지 페이지 편지 매칭 제한시간, 쿨타임 시간 구현

* feat:매칭된 편지 전달시 location값 전달처리({randomMatched: true})

* feat:코드리뷰 사항 수정

Author: wldnjs990

src/apis/letterDetail.ts

@@ -7,6 +7,7 @@ const getLetter = async (
 ) => {
   try {
     const res = await client.get(`/api/letters/${letterId}`);
+    if (!res) throw new Error('편지 데이터를 가져오는 도중 에러가 발생했습니다.');
     setLetterState(res.data.data);
     if (callBack) callBack();
     console.log(res);
@@ -19,6 +20,7 @@ const deleteLetter = async (letterId: string, callBack?: () => void) => {
   try {
     console.log(`/api/letters/${letterId}`);
     const res = await client.delete(`/api/letters/${letterId}`);
+    if (!res) throw new Error('편지 삭제 요청 도중 에러가 발생했습니다.');
     if (callBack) callBack();
     console.log(res);
   } catch (error) {

src/apis/randomLetter.ts

@@ -0,0 +1,17 @@
+import client from './client';
+
+const getRandomLetters = async (
+  setRandomLettersState: React.Dispatch<React.SetStateAction<RandomLetters[]>>,
+  category: string | null,
+) => {
+  try {
+    const res = await client.get(`/api/random/${category}`);
+    if (!res) throw new Error('랜덤 편지 데이터를 가져오는 도중 에러가 발생했습니다.');
+    setRandomLettersState(res.data.data);
+    console.log(res);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export { getRandomLetters };

src/components/ResultLetter.tsx

@@ -5,7 +5,7 @@ import LetterWrapper from './LetterWrapper';
 export default function ResultLetter({
   categoryName = 'CONSOLATION',
   title,
-  zipCode = 'error',
+  zipCode = 'ERROR',
 }: {
   categoryName: Category;
   title: string;

src/pages/LetterDetail/index.tsx

@@ -12,6 +12,7 @@ import {
   WarmIcon,
 } from '@/assets/icons';
 import BackButton from '@/components/BackButton';
+import ConfirmModal from '@/components/ConfirmModal';
 import ReportModal from '@/components/ReportModal';
 import { FONT_TYPE_OBJ, PAPER_TYPE_OBJ } from '@/pages/Write/constants';
 
@@ -28,6 +29,7 @@ const LetterDetailPage = () => {
   ];
   const [degreeModalOpen, setDegreeModalOpen] = useState<boolean>(false);
   const [reportModalOpen, setReportModalOpen] = useState<boolean>(false);
+  const [deleteModalOpen, setDeleteModalOpen] = useState<boolean>(false);
 
   const degreeButtonRef = useRef<HTMLButtonElement>(null);
   const handleOutsideClick = (event: MouseEvent) => {
@@ -41,7 +43,6 @@ const LetterDetailPage = () => {
     document.body.addEventListener('click', handleOutsideClick);
     if (params.id) {
       getLetter(params.id, setLetterDetail);
-      // 편지 삭제 요청 테스트(내일 삭제 버튼 만들어서 여기다 추가하긔)
     }
 
     return () => {
@@ -72,7 +73,7 @@ const LetterDetailPage = () => {
             </button>
             <button
               onClick={() => {
-                if (params.id) deleteLetter(params.id);
+                setDeleteModalOpen(true);
               }}
             >
               <DeleteIcon className="text-primary-1 h-6 w-6" />
@@ -118,13 +119,29 @@ const LetterDetailPage = () => {
         ></textarea>
         <span className="body-sb mt-10 flex justify-end">FROM. {'12E12'}</span>
         <button
-          className="bg-primary-3 body-m mt-3 w-full rounded-lg py-2"
+          className="bg-primary-3 disabled:bg-gray-30 body-m mt-3 w-full rounded-lg py-2 disabled:text-white"
           onClick={() => {
             navigate(`/letter/write/?letterId=${letterDetail?.letterId}`);
           }}
+          disabled={!letterDetail?.matched}
         >
-          편지 작성하기
+          {letterDetail?.matched ? '편지 작성하기' : '대화가 종료된 편지입니다.'}
         </button>
+        {deleteModalOpen && (
+          <ConfirmModal
+            title="편지를 삭제하시겠습니까?"
+            description="삭제된 편지는 복구할 수 없습니다."
+            cancelText="취소"
+            confirmText="삭제"
+            onCancel={() => {
+              setDeleteModalOpen(false);
+            }}
+            onConfirm={() => {
+              if (params.id) deleteLetter(params.id);
+              navigate(-1);
+            }}
+          />
+        )}
       </div>
     </>
   );

src/pages/RandomLetters/Matched.tsx

@@ -0,0 +1,94 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router';
+
+import LetterWrapper from '@/components/LetterWrapper';
+import { formatNumber } from '@/utils/formatNumber';
+
+// import letterPink from '@/assets/images/letter-pink.png';
+
+export default function CoolTime({
+  setCoolTime,
+}: {
+  setCoolTime: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  const navigate = useNavigate();
+
+  const TIME_STAMP = '2025-02-26T22:13:25.262045608';
+
+  const COMPLETED_DATE = new Date(TIME_STAMP);
+
+  const END_DATE = new Date(COMPLETED_DATE);
+  END_DATE.setHours(COMPLETED_DATE.getHours() + 1);
+
+  const NOW_DATE = new Date();
+
+  const endTime = END_DATE.getTime() - NOW_DATE.getTime();
+
+  const [endTimes, setEndTimes] = useState({
+    hours: Math.floor((endTime / (1000 * 60 * 60)) % 24),
+    minutes: Math.floor((endTime / (1000 * 60)) % 60),
+    seconds: Math.floor((endTime / 1000) % 60),
+  });
+
+  useEffect(() => {
+    if (endTimes.hours < 0 || endTimes.minutes < 0 || endTimes.seconds < 0) {
+      setEndTimes({ hours: 0, minutes: 0, seconds: 0 });
+    }
+    if (endTimes.hours === 0 && endTimes.minutes === 0 && endTimes.seconds === 0) {
+      setCoolTime(false);
+      return;
+    }
+    const endTimeFlow = setInterval(() => {
+      setEndTimes((currentTime) => {
+        if (currentTime.seconds > 0) {
+          return { ...currentTime, seconds: currentTime.seconds - 1 };
+        } //
+        else {
+          if (currentTime.minutes > 0) {
+            return { ...currentTime, minutes: currentTime.minutes - 1, seconds: 59 };
+          } //
+          else {
+            if (currentTime.hours > 0) {
+              return { hours: currentTime.hours - 1, minutes: 59, seconds: 59 };
+            } //
+            else {
+              setCoolTime(false);
+              return { ...currentTime };
+            }
+          }
+        }
+      });
+      if (endTimes.hours === 0 && endTimes.minutes === 0 && endTimes.seconds === 0) {
+        clearInterval(endTimeFlow);
+      }
+    }, 1000);
+
+    return () => {
+      clearInterval(endTimeFlow);
+    };
+  }, [endTimes, setCoolTime]);
+  return (
+    <div className="mt-20 flex flex-col items-center justify-center">
+      <div className="body-m flex flex-col items-center justify-center">
+        <p className="text-gray-60">랜덤 편지 활성화 까지</p>
+        <p className="text-gray-80">
+          {formatNumber(endTimes.hours)} : {formatNumber(endTimes.minutes)} :{' '}
+          {formatNumber(endTimes.seconds)}
+        </p>
+        <div className="mt-2 w-75">
+          <LetterWrapper>
+            <div className="flex h-50 w-full max-w-[300px] flex-col gap-[35px] p-4"></div>
+          </LetterWrapper>
+        </div>
+        <button
+          className="bg-primary-3 body-m mt-12.5 w-full rounded-lg py-2"
+          onClick={() => {
+            navigate('/');
+          }}
+        >
+          홈으로 돌아가기
+        </button>
+      </div>
+    </div>
+  );
+}