feat:랜덤 편지 + 편지 상세 1차 기능 구현

src/apis/letterDetail.ts

@@ -6,6 +6,7 @@ const getLetter = async (
 ) => {
   try {
     const res = await client.get(`/api/letters/${letterId}`);
+    if (!res) throw new Error('편지 데이터를 가져오는 도중 에러가 발생했습니다.');
     setLetterState(res.data.data);
     console.log(res);
   } catch (error) {
@@ -17,6 +18,7 @@ const deleteLetter = async (letterId: string) => {
   try {
     console.log(`/api/letters/${letterId}`);
     const res = await client.delete(`/api/letters/${letterId}`);
+    if (!res) throw new Error('편지 삭제 요청 도중 에러가 발생했습니다.');
     console.log(res);
   } catch (error) {
     console.error(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,11 +5,12 @@ import LetterWrapper from './LetterWrapper';
 export default function ResultLetter({
   categoryName = 'CONSOLATION',
   title,
+  zipCode = 'ERROR',
 }: {
   categoryName: Category;
   title: string;
+  zipCode?: string;
 }) {
-  const address = '1A3E2';
   const date = new Date();
   const today = `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일`;
 
@@ -26,14 +27,16 @@ export default function ResultLetter({
         <div className="flex flex-col gap-[5px]">
           <span className="caption-sb text-gray-60">{today}</span>
           <div className="flex gap-1">
-            {address.split('').map((spell, idx) => (
-              <span
-                className="caption-r flex h-6 w-6 items-center justify-center rounded-sm bg-white/40"
-                key={idx}
-              >
-                {spell}
-              </span>
-            ))}
+            {zipCode.split('').map((spell, idx) => {
+              return (
+                <span
+                  className="caption-r flex h-6 w-6 items-center justify-center rounded-sm bg-white/40"
+                  key={idx}
+                >
+                  {spell}
+                </span>
+              );
+            })}
           </div>
         </div>
       </div>

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/components/CoolTime.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router';
+
+import LetterWrapper from '@/components/LetterWrapper';
+
+// 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),
+  });
+
+  const formatNumber = (num: number) => {
+    return num.toString().padStart(2, '0');
+  };
+
+  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>
+  );
+}