feat: 공유 요청 상세 조회 기능 구현

Author: tifsy

src/apis/share.ts

@@ -39,6 +39,24 @@ export interface ShareProposal {
   status: 'REJECTED' | 'APPROVED' | 'PENDING';
 }
 
+//편지 공유 요청 상세 조회
+export interface ShareProposalLetter {
+  id: number;
+  content: string;
+  writerZipCode: string;
+  receiverZipCode: string;
+  createdAt: string;
+}
+
+export interface ShareProposalDetail {
+  shareProposalId: number;
+  requesterZipCode: string;
+  recipientZipCode: string;
+  message: string;
+  status: 'PENDING' | 'ACCEPTED' | 'REJECTED';
+  letters: ShareProposalLetter[];
+}
+
 // 편지 공유 수락 / 거절
 export interface ShareProposalApproval {
   shareProposalId: number;
@@ -106,13 +124,27 @@ export const getShareProposalList = async () => {
   }
 };
 
+// 편지 공유 요청 상세 조회
+export const getShareProposalDetail = async (
+  shareProposalId: number,
+): Promise<ShareProposalDetail> => {
+  try {
+    const response = await client.get(`/api/share-proposals/${shareProposalId}`);
+    console.log(`😎공유 요청 상세 조회 데이터 `, response.data);
+    return response.data.data;
+  } catch (error) {
+    console.error('❌ 편지 공유 요청을 상세 조회하던 중 에러가 발생했습니다', error);
+    throw error;
+  }
+};
+
 // 편지 공유 수락 / 거절
 export const postShareProposalApproval = async (
   shareProposalId: number,
   action: 'approve' | 'reject',
 ): Promise<ShareProposalApproval> => {
   try {
-    const response = await client.patch(`/api/share-proposal/${shareProposalId}/${action}`);
+    const response = await client.patch(`/api/share-proposals/${shareProposalId}/${action}`);
     return response.data;
   } catch (error) {
     console.error(

src/pages/Home/components/ShowShareAccessModal.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router';
 
-import { getSharePostDetail } from '@/apis/share';
+import { getShareProposalDetail } from '@/apis/share';
 import { getShareProposalList } from '@/apis/share';
 import { ShareProposal } from '@/apis/share';
 
@@ -30,9 +30,9 @@ const ShowShareAccessModal = ({ onClose }: ShowShareAccessModalProps) => {
 
   const handleNavigation = async (shareProposalId: number) => {
     try {
-      const postDetail = await getSharePostDetail(shareProposalId);
-      navigate(`/board/letter/${shareProposalId}`, {
-        state: { postDetail, isShareLetterPreview: true },
+      const proposalDetail = await getShareProposalDetail(shareProposalId);
+      navigate(`/board/share/${shareProposalId}`, {
+        state: { proposalDetail },
       });
     } catch (error) {
       console.error('❌ 게시글 상세 페이지로 이동하는 데에 실패했습니다.', error);

src/pages/Share/index.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router';
+
+import { getShareProposalDetail } from '@/apis/share';
+import { postShareProposalApproval, ShareProposalDetail } from '@/apis/share';
+
+import { twMerge } from 'tailwind-merge';
+import Letter from '../LetterBoardDetail/components/Letter';
+
+import BlurImg from '@/assets/images/landing-blur.png';
+
+const ShareApprovalPage = () => {
+  const navigate = useNavigate();
+  const { shareProposalId } = useParams();
+  console.log(shareProposalId);
+
+  const [proposalDetail, setProposalDetail] = useState<ShareProposalDetail>();
+
+  const handleProposalApproval = async (action: 'approve' | 'reject') => {
+    try {
+      const result = await postShareProposalApproval(Number(shareProposalId), action);
+      console.log(`✅ 편지 공유 ${action === 'approve' ? '수락' : '거절'}됨:`, result);
+      navigate('/');
+    } catch (error) {
+      console.error('❌공유 요청 처리 중 에러 발생', error);
+    }
+  };
+  useEffect(() => {
+    const fetchProposalDetail = async (id: string) => {
+      try {
+        const data = await getShareProposalDetail(Number(id));
+        setProposalDetail(data);
+      } catch (error) {
+        console.error('❌ 공유 요청 상세 조회에 실패했습니다.', error);
+        throw error;
+      }
+    };
+
+    if (shareProposalId) {
+      fetchProposalDetail(shareProposalId);
+    }
+  }, [shareProposalId]);
+
+  return (
+    <div className="grow bg-white">
+      <main className="px-5 pt-18 pb-3">
+        <p className="body-b mb-6 px-5">FROM. {proposalDetail?.requesterZipCode}</p>
+        <p
+          className={twMerge(
+            'body-r bg-[repeating-linear-gradient(transparent,transparent_25px,#ffe6e3_26px)] px-5 whitespace-pre-wrap',
+            'leading-[26px]',
+          )}
+        >
+          {proposalDetail?.message}
+        </p>
+        <section className="flex flex-col gap-6.5 px-5 py-6.5">
+          {proposalDetail?.letters.map((letter, index) => (
+            <Letter
+              key={index}
+              letter={letter}
+              isWriter={letter.writerZipCode === proposalDetail.requesterZipCode}
+            />
+          ))}
+        </section>
+
+        {proposalDetail && (
+          <>
+            <img src={BlurImg} alt="landing blur" className="fixed bottom-0 left-0 z-10 w-screen" />
+            <section className="fixed bottom-[30px] left-1/2 z-20 flex w-73 translate-x-[-50%] gap-6">
+              <button
+                type="button"
+                className="body-m secondary-btn h-10 flex-1 basis-1/2"
+                onClick={() => handleProposalApproval('reject')}
+              >
+                거부하기
+              </button>
+
+              <button
+                type="button"
+                className="primary-btn body-m h-10 flex-1 basis-1/2"
+                onClick={() => handleProposalApproval('approve')}
+              >
+                승인하기
+              </button>
+            </section>
+          </>
+        )}
+      </main>
+    </div>
+  );
+};
+
+export default ShareApprovalPage;