feat:글작성 페이지 쿼리스트링으로 이전편지 가져오기 API연결

Author: wldnjs990

src/apis/letterDetail.ts

@@ -0,0 +1,16 @@
+import { client } from './client';
+
+const getLetter = async (
+  letterId: string,
+  setLetterState: React.Dispatch<React.SetStateAction<LetterDetail | null>>,
+) => {
+  try {
+    const res = await client.get(`/api/letters/${letterId}`);
+    setLetterState(res.data.data);
+    console.log(res);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export { getLetter };

src/apis/write.ts

@@ -1,12 +1,12 @@
 import { client } from './client';
 
-const postLetterApi = async (
+const postLetter = async (
   data: LetterRequest,
-  setState: React.Dispatch<React.SetStateAction<boolean>>,
+  setState?: React.Dispatch<React.SetStateAction<boolean>>,
 ) => {
   try {
     const res = await client.post('/api/letters', data);
-    setState(true);
+    if (setState) setState(true);
     console.log(res);
   } catch (error) {
     console.error(error);
@@ -26,4 +26,4 @@ const getPrevLetter = async (
   }
 };
 
-export { postLetterApi, getPrevLetter };
+export { postLetter, getPrevLetter };

src/pages/LetterDetail/index.tsx

@@ -1,10 +1,16 @@
 import { useEffect, useRef, useState } from 'react';
+import { useParams } from 'react-router';
 import { twMerge } from 'tailwind-merge';
 
+import { getLetter } from '@/apis/letterDetail';
 import { CloudIcon, SirenOutlinedIcon, SnowIcon, ThermostatIcon, WarmIcon } from '@/assets/icons';
 import ReportModal from '@/components/ReportModal';
 
 const LetterDetailPage = () => {
+  const params = useParams();
+  // 일단 api 받아왔는데 목 데이터의 enum이 잘못 설정되어있어서 데이터 바인딩이 안됨 -> 진영님이 수정해주시면 그때 바인딩 해보기!
+  const [letterDetail, setLetterDetail] = useState<LetterDetail | null>(null);
+
   const DUMMY = {
     title: '나에게 햄버거 햄부기우기우가 햄북스따스 함부르크 햄버거링고를 대령하거라 ',
     text: '이 편지는 영국에서 최초로 시작되어 일년에 한바퀴를 돌면서 받는 사람에게 행운을 주었고 지금은 당신에게로 옮겨진 이 편지는 4일 안에 당신 곁을 떠나야 합니다. 이 편지를 포함해서 7통을 행운이 필요한 사람에게 보내 주셔야 합니다. 복사를 해도 좋습니다. 혹 미신이라 하실지 모르지만 사실입니다.영국에서 HGXWCH이라는 사람은 1930년에 이 편지를 받았습니다. 그는 비서에게 복사해서 보내라고 했습니다. 며칠 뒤에 복권이 당첨되어 20억을 받았습니다. 어떤 이는 이 편지를 받았으나 96시간 이내 자신의 손에서 떠나야 한다는 사실을 잊었습니다. 그는 곧 사직되었습니다. 나중에야 이 사실을 알고 7통의 편지를 보냈는데 다시 좋은 직장을 얻었습니다. 미국의 케네디 대통령은 이 편지를 받았지만 그냥 버렸습니다. 결국 9일 후 그는 암살당했습니다. 기억해 주세요. 이 편지를 보내면 7년의 행운이 있을 것이고 그렇지 않으면 3년의 불행이 있을 것입니다. ',
@@ -29,11 +35,14 @@ const LetterDetailPage = () => {
   };
   useEffect(() => {
     document.body.addEventListener('click', handleOutsideClick);
+    if (params.id) {
+      getLetter(params.id, setLetterDetail);
+    }
 
     return () => {
       document.body.removeEventListener('click', handleOutsideClick);
     };
-  }, []);
+  }, [params.id]);
   return (
     <>
       {reportModalOpen && <ReportModal onClose={() => setReportModalOpen(false)} />}

src/pages/Write/CategorySelect.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Link } from 'react-router';
 
-import { postLetterApi } from '@/apis/write';
+import { postLetter } from '@/apis/write';
 import PageTitle from '@/components/PageTitle';
 import useWrite from '@/stores/writeStore';
 
@@ -93,7 +93,7 @@ export default function CategorySelect({
             className="bg-primary-3 body-m mt-auto flex h-10 w-full items-center justify-center rounded-lg"
             onClick={() => {
               if (category) {
-                postLetterApi(LETTER_REQUEST, setSend);
+                postLetter(LETTER_REQUEST, setSend);
               } else {
                 alert('우표 선택을 해주세요');
               }

src/types/letterDetail.d.ts

@@ -0,0 +1,8 @@
+interface LetterDetail {
+  letterId: number;
+  title: string;
+  content: string;
+  category: 'CONSOLATION' | 'CELEBRATION' | 'CONSULT' | 'ETC';
+  paperType: PaperType;
+  fontType: FontType;
+}