feat : 편지작성, 랜덤편지, 상세페이지 3차 기능구현 (#94)

* feat : 게시글 신고기능 구현

* feat : 카테고리 전체 선택 안되는 오류 수정 + 답장 전송시 도착시간 1시간으로 텍스트 고정

* feat : getPrevLetter api 엔드포인트 변경

* feat : 디테일 페이지 답장버튼 분기처리

* feat : 편지상세페이지 zipCode바인딩

* refactor : 편지상세 페이지 컴포넌트 분리

* feat : 편지 상세 컴포넌트 추가 분리 + 편지 평가 기능 구현 완료

* refactor : 신고모달 타입에서 null 제거 + 이전편지 가져오기, 타입 조금 수정

* feat : 랜덤편지 편지 없을 경우 예외처리 UI 추가

* design : 편지작성, 편지상세 resize속성 제거

* feat : 랜덤편지 데이터가 없을시 예외처리 UI 추가 + 쿨타임 상태일때 예외처리 UI 수정

* chore : 랜덤편지 api console 제거

* feat : 임시저장 api 생성(연결 테스트 아직 안함)

* feat : 편지 작성 페이지 임시저장 버튼 구현

* feat : 편지 임시저장 80% 구현(승연님 작업 이후 임시저장 업데이트 분기 나눠야함)

* feat : 임시저장 최초답장 예외처리

Author: wldnjs990

src/apis/client.ts

@@ -102,8 +102,8 @@ client.interceptors.response.use(
         }
       }
     }
-    if (isLoggedIn) logout();
-    console.error('Failed to refresh token', error);
+    // if (isLoggedIn) logout();
+    // console.error('Failed to refresh token', error);
     return Promise.reject(error);
   },
 );

src/apis/letterDetail.ts

@@ -23,4 +23,17 @@ const deleteLetter = async (letterId: string) => {
   }
 };
 
-export { getLetter, deleteLetter };
+const postEvaluateLetter = async (letterId: number, evaluation: LetterEvaluation) => {
+  try {
+    const res = await client.post(`/api/letters/${letterId}/evaluate`, {
+      evaluation: evaluation,
+    });
+    if (!res) throw new Error('편지 삭제 요청 도중 에러가 발생했습니다.');
+    console.log(res);
+    return res;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export { getLetter, deleteLetter, postEvaluateLetter };

src/apis/randomLetter.ts

@@ -4,7 +4,6 @@ const getRandomLetters = async (category: string | null) => {
   try {
     const res = await client.get(`/api/random-letters/${category}`);
     if (!res) throw new Error('랜덤 편지 데이터를 가져오는 도중 에러가 발생했습니다.');
-    console.log(res);
     return res;
   } catch (error) {
     console.error(error);
@@ -13,8 +12,6 @@ const getRandomLetters = async (category: string | null) => {
 
 const postRandomLettersApprove = async (approveRequest: ApproveRequest, callBack?: () => void) => {
   try {
-    console.log('엔드포인트 : /api/random-letters/approve');
-    console.log('request', approveRequest);
     const res = await client.post('/api/random-letters/approve', approveRequest);
     if (!res) throw new Error('랜덤편지 매칭수락 도중 에러가 발생했습니다.');
     if (callBack) callBack();
@@ -30,7 +27,6 @@ const getRandomLetterMatched = async (callBack?: () => void) => {
     if (!res)
       throw new Error('랜덤 편지 최종 매칭 시간 검증 데이터를 가자오는 도중 에러가 발생했습니다.');
     if (callBack) callBack();
-    console.log(res);
     return res;
   } catch (error) {
     console.error(error);
@@ -43,7 +39,6 @@ const getRandomLetterCoolTime = async (callBack?: () => void) => {
     if (!res)
       throw new Error('랜덤 편지 최종 매칭 시간 검증 데이터를 가자오는 도중 에러가 발생했습니다.');
     if (callBack) callBack();
-    console.log(res);
     return res;
   } catch (error) {
     console.error(error);
@@ -54,7 +49,6 @@ const deleteRandomLetterMatching = async () => {
   try {
     const res = await client.delete('/api/random-letters/matching/cancel');
     if (!res) throw new Error('매칭 취소 도중 에러가 발생했습니다.');
-    console.log(res);
     return res;
   } catch (error) {
     console.log(error);

src/apis/write.ts

@@ -2,22 +2,21 @@
 import client from './client';
 
 const postLetter = async (data: LetterRequest) => {
+  console.log('request', data);
   try {
     const res = await client.post('/api/letters', data);
-    if (!res) throw new Error('편지 전송과정중에서 오류가 발생했습니다.');
-    console.log(`api 주소 : /api/letters, 전송타입 : post`);
+    if (!res) throw new Error('편지 전송과정에서 오류가 발생했습니다.');
     return res;
   } catch (error) {
     console.error(error);
   }
 };
 
 const postFirstReply = async (data: FirstReplyRequest) => {
+  console.log('Firstrequest', data);
   try {
     const res = await client.post('/api/random-letters/matching', data);
-    if (!res) throw new Error('최초 답장 전송과정중에서 오류가 발생했습니다.');
-    console.log(`api 주소 : /api/random-letters/matching, 전송타입 : post`);
-    console.log(res);
+    if (!res) throw new Error('최초 답장 전송과정에서 오류가 발생했습니다.');
     return res;
   } catch (error) {
     console.error(error);
@@ -27,11 +26,33 @@ const postFirstReply = async (data: FirstReplyRequest) => {
 const getPrevLetter = async (letterId: string) => {
   try {
     const res = await client.get(`/api/letters/${letterId}/previous`);
-    console.log(res);
+    if (!res) throw new Error('이전편지를 불러오는중 오류가 발생했습니다.');
     return res;
   } catch (error) {
     console.error(error);
   }
 };
 
-export { postLetter, postFirstReply, getPrevLetter };
+// 임시저장 최초 생성
+const postTemporarySave = async (data: TemporaryRequest) => {
+  try {
+    const res = client.post(`/api/letters/temporary-save`, data);
+    if (!res) throw new Error('편지 임시저장과정에서 오류가 발생했습니다.');
+    return res;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+// 임시저장 수정
+const PatchTemporarySave = async (data: TemporaryRequest) => {
+  try {
+    const res = client.post(`/api/letters/temporary-save`, data);
+    if (!res) throw new Error('편지 임시저장과정에서 오류가 발생했습니다.');
+    return res;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export { postLetter, postFirstReply, getPrevLetter, postTemporarySave, PatchTemporarySave };

src/components/ReportModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import { postReports } from '@/apis/admin';
@@ -8,7 +8,7 @@ import TextareaField from './TextareaField';
 
 interface ReportModalProps {
   reportType: ReportType;
-  letterId: number | null;
+  letterId: number;
   onClose: () => void;
 }
 
@@ -42,20 +42,14 @@ const ReportModal = ({ reportType, letterId, onClose }: ReportModalProps) => {
     const res = await postReports(postReportRequest);
     if (res?.status === 200) {
       alert('신고 처리되었습니다.');
+      console.log(res);
       onClose();
     } else if (res?.status === 409) {
       alert('신고한 이력이 있습니다.');
       onClose();
     }
   };
 
-  useEffect(() => {
-    if (!postReportRequest.letterId) {
-      alert('신고 모달을 여는 과정에서 오류가 발생했습니다. 새로고침을 눌러주세요');
-      onClose();
-    }
-  });
-
   return (
     <ConfirmModal
       title="신고 사유를 선택해주세요"

src/pages/LetterDetail/components/DegreeSelector.tsx

@@ -0,0 +1,61 @@
+import { postEvaluateLetter } from '@/apis/letterDetail';
+import { CloudIcon, SnowIcon, WarmIcon } from '@/assets/icons';
+
+interface DegreeSelector {
+  letterDetail: LetterDetail | null;
+  setLetterDetail: React.Dispatch<React.SetStateAction<LetterDetail>>;
+}
+export default function DegreeSelector({ letterDetail, setLetterDetail }: DegreeSelector) {
+  const handlePostEvaluateLetter = async (
+    letterId: number | undefined,
+    evaluation: LetterEvaluation,
+  ) => {
+    if (!letterId) return alert('편지id값이 담겨있지 않습니다.');
+    const res = await postEvaluateLetter(letterId, evaluation);
+    if (res?.status === 200) {
+      console.log('평가완료');
+      setLetterDetail((cur) => ({ ...cur, evaluated: true }));
+    }
+  };
+  const DEGREES = [
+    {
+      icon: <WarmIcon className="h-5 w-5" />,
+      title: '따뜻해요',
+      onClick: () => {
+        handlePostEvaluateLetter(letterDetail?.letterId, 'GOOD');
+      },
+    },
+    {
+      icon: <CloudIcon className="h-5 w-5" />,
+      title: '그럭저럭',
+      onClick: () => {
+        handlePostEvaluateLetter(letterDetail?.letterId, 'SOSO');
+      },
+    },
+    {
+      icon: <SnowIcon className="h-5 w-5" />,
+      title: '앗! 차가워',
+      onClick: () => {
+        handlePostEvaluateLetter(letterDetail?.letterId, 'BAD');
+      },
+    },
+  ];
+  return (
+    <div className="caption-b text-primary-1 bg-primary-5 absolute top-7 z-40 flex flex-col gap-1 p-2 shadow">
+      {DEGREES.map((degree, idx) => {
+        return (
+          <button
+            key={idx}
+            className="flex items-center justify-start gap-1"
+            onClick={() => {
+              degree.onClick();
+            }}
+          >
+            {degree.icon}
+            {degree.title}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

src/pages/LetterDetail/components/LetterDetailContent.tsx

@@ -0,0 +1,26 @@
+import { twMerge } from 'tailwind-merge';
+
+import { FONT_TYPE_OBJ } from '@/pages/Write/constants';
+
+interface LetterDetailContent {
+  letterDetail: LetterDetail;
+}
+export default function LetterDetailContent({ letterDetail }: LetterDetailContent) {
+  return (
+    <>
+      <div className="flex flex-col gap-3 px-5">
+        <span className="body-b mt-[55px]">TO. 따숨이</span>
+        <span className="body-sb">{letterDetail.title}</span>
+      </div>
+      <textarea
+        readOnly
+        value={letterDetail.content}
+        className={twMerge(
+          `body-r basic-theme min-h-full w-full grow resize-none px-6`,
+          letterDetail && FONT_TYPE_OBJ[letterDetail.fontType],
+        )}
+      ></textarea>
+      <span className="body-sb mt-10 flex justify-end">FROM. {letterDetail.zipCode}</span>
+    </>
+  );
+}

src/pages/LetterDetail/components/LetterDetailDegreeButton.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useRef } from 'react';
+
+import { ThermostatIcon } from '@/assets/icons';
+
+interface LetterDetailDegreeButton {
+  letterDetail: LetterDetail | null;
+  setDegreeModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export default function LetterDetailDegreeButton({
+  letterDetail,
+  setDegreeModalOpen,
+}: LetterDetailDegreeButton) {
+  const degreeButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    const handleOutsideClick = (event: MouseEvent) => {
+      const target = event.target as Node;
+      if (!target || degreeButtonRef.current?.contains(target)) {
+        return;
+      }
+      setDegreeModalOpen(false);
+    };
+
+    document.body.addEventListener('click', handleOutsideClick);
+
+    return () => {
+      document.body.removeEventListener('click', handleOutsideClick);
+    };
+  }, [setDegreeModalOpen]);
+  return (
+    <>
+      {letterDetail?.evaluated ? (
+        <div>
+          <span className="caption-b text-primary-1">온도 측정된 편지에요!</span>
+        </div>
+      ) : (
+        <button
+          ref={degreeButtonRef}
+          className="flex items-center justify-center gap-1"
+          onClick={() => {
+            setDegreeModalOpen((cur) => !cur);
+          }}
+        >
+          <ThermostatIcon className="h-6 w-6" />
+          <span className="caption-b text-primary-1">편지 온도</span>
+        </button>
+      )}
+    </>
+  );
+}

src/pages/LetterDetail/components/LetterDetailHeader.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+
+import { DeleteIcon, SirenOutlinedIcon } from '@/assets/icons';
+import BackButton from '@/components/BackButton';
+import useAuthStore from '@/stores/authStore';
+
+import DegreeSelector from './DegreeSelector';
+import LetterDetailDegreeButton from './LetterDetailDegreeButton';
+
+interface LetterDetailHeader {
+  letterDetail: LetterDetail;
+  setLetterDetail: React.Dispatch<React.SetStateAction<LetterDetail>>;
+  setDeleteModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setReportModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export default function LetterDetailHeader({
+  letterDetail,
+  setLetterDetail,
+  setDeleteModalOpen,
+  setReportModalOpen,
+}: LetterDetailHeader) {
+  const [degreeModalOpen, setDegreeModalOpen] = useState<boolean>(false);
+
+  const userZipCode = useAuthStore((state) => state.zipCode);
+
+  return (
+    <div className="absolute top-5 left-0 flex w-full justify-between px-5">
+      <BackButton />
+      <div className="flex gap-2">
+        {userZipCode !== letterDetail?.zipCode && (
+          <LetterDetailDegreeButton
+            letterDetail={letterDetail}
+            setDegreeModalOpen={setDegreeModalOpen}
+          />
+        )}
+        {userZipCode === letterDetail?.zipCode && (
+          <button
+            onClick={() => {
+              setDeleteModalOpen(true);
+            }}
+          >
+            <DeleteIcon className="text-primary-1 h-6 w-6" />
+          </button>
+        )}
+        {userZipCode !== letterDetail?.zipCode && (
+          <button
+            onClick={() => {
+              setReportModalOpen(true);
+            }}
+          >
+            <SirenOutlinedIcon className="text-primary-1 h-6 w-6" />
+          </button>
+        )}
+        {degreeModalOpen && (
+          <DegreeSelector letterDetail={letterDetail} setLetterDetail={setLetterDetail} />
+        )}
+      </div>
+    </div>
+  );
+}

src/pages/LetterDetail/components/LetterDetailReplyButton.tsx

@@ -0,0 +1,19 @@
+import { useNavigate } from 'react-router';
+
+interface LetterDetailReplyButton {
+  letterDetail: LetterDetail;
+}
+export default function LetterDetailReplyButton({ letterDetail }: LetterDetailReplyButton) {
+  const navigate = useNavigate();
+  return (
+    <button
+      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>
+  );
+}