feat: 신고 모달 파라미터 변경으로 인한, 파라미터 추가(게시판 상세)

Author: nirii00

src/apis/share.ts

@@ -53,7 +53,7 @@ export const getSharePostList = async (page: number = 1, size: number = 10) => {
 };
 
 // 공유 게시글 상세 조회
-export const getSharePostDetail = async (sharePostId: number): Promise<SharePost> => {
+export const getSharePostDetail = async (sharePostId: string): Promise<SharePost> => {
   try {
     const response = await client.get(`/api/share-posts/${sharePostId}`);
     console.log(`🔥공유 게시글 상세 데이터`, response.data);
@@ -102,7 +102,7 @@ export const postShareProposalApproval = async (
 };
 
 // 편지 좋아요 추가, 취소
-export const postSharePostLike = async (sharePostId: number) => {
+export const postSharePostLike = async (sharePostId: string) => {
   try {
     const response = await client.post(`/api/share-posts/${sharePostId}/likes`);
     if (!response) throw new Error('error while posting like');
@@ -114,7 +114,7 @@ export const postSharePostLike = async (sharePostId: number) => {
 };
 
 // 편지 좋아요 갯수
-export const getSharePostLikeCount = async (sharePostId: number) => {
+export const getSharePostLikeCount = async (sharePostId: string) => {
   try {
     const response = await client.get(`/api/share-posts/${sharePostId}/likes`);
     if (!response) throw new Error('error while fetching likes');

src/pages/LetterBoardDetail/index.tsx

@@ -25,69 +25,85 @@ const LetterBoardDetailPage = ({ confirmDisabled }: ShareLetterPreviewProps) =>
   const [isLike, setIsLike] = useState(false);
   const isWriter = false;
   const [activeReportModal, setActiveReportModal] = useState(false);
+  const sharePostId: string = location.pathname.split('/')[3];
+  // const location = useLocation();
+  const navigate = useNavigate();
+  // const isShareLetterPreview = location.state?.isShareLetterPreview || false;
+  const isShareLetterPreview = false;
+  const [postDetail, setPostDetail] = useState<SharePost>();
+
+  const postLike = async () => {
+    try {
+      const response = await postSharePostLike(sharePostId);
+      if (!response) throw new Error('error while fetching like count');
+      console.log('✅ 편지 좋아요 추가됨:', response);
+    } catch (error) {
+      console.error('❌ 편지 좋아요 추가 중 에러가 발생했습니다', error);
+      throw new Error('편지 좋아요 추가 실패');
+    }
+  };
 
   const handleToggleLike = () => {
     setLikeCount((prev) => prev + (isLike ? -1 : 1));
     setIsLike((prev) => !prev);
+    postLike();
   };
 
-  const location = useLocation();
-  const navigate = useNavigate();
+  const handleProposalApproval = async (
+    action: 'approve' | 'reject',
+    shareProposalId: number = location.state?.postDetail?.sharePostId,
+  ) => {
+    try {
+      const result = await postShareProposalApproval(shareProposalId, action);
+      console.log(`✅ 편지 공유 ${action === 'approve' ? '수락' : '거절'}됨:`, result);
 
-  const isShareLetterPreview = location.state?.isShareLetterPreview || false;
-  const [postDetail, setPostDetail] = useState<SharePost>();
+      navigate('/');
+    } catch (error) {
+      console.error(error);
+    }
+  };
 
   useEffect(() => {
-    const { sharePostId } = location.state.postDetail;
-    const fetchPostDetail = async (postId: number) => {
+    const fetchPostDetail = async (postId: string) => {
       try {
-        console.log('sharePostId:', postId);
-
         const data = await getSharePostDetail(postId);
-
         setPostDetail(data);
       } catch (error) {
         console.error('❌ 공유 게시글 상세 조회에 실패했습니다.', error);
       }
     };
 
-    const fetchLikeCounts = async (postId: number) => {
+    const fetchLikeCounts = async (postId: string) => {
       try {
         const response = await getSharePostLikeCount(postId);
         if (!response) throw new Error('error while fetching like count');
-        console.log(response);
-        setLikeCount(response.data.likeCount);
+        console.log('✅ 편지 좋아요 갯수:', response);
+        setLikeCount(response.likeCount);
+        setIsLike(response.liked);
       } catch (error) {
         console.error('❌ 편지 좋아요 갯수를 가져오는 중 에러가 발생했습니다', error);
         throw new Error('편지 좋아요 갯수 가져오기 실패');
       }
     };
 
-    if (location.state?.postDetail) {
-      fetchPostDetail(sharePostId);
-      fetchLikeCounts(sharePostId);
-    } else {
-      console.warn('postDetail not found in location.state');
-    }
-  }, [location.state]);
-
-  const handleProposalApproval = async (
-    action: 'approve' | 'reject',
-    shareProposalId: number = location.state?.postDetail?.sharePostId,
-  ) => {
-    try {
-      const result = await postShareProposalApproval(shareProposalId, action);
-      console.log(`✅ 편지 공유 ${action === 'approve' ? '수락' : '거절'}됨:`, result);
-
-      navigate('/');
-    } catch (error) {
-      console.error(error);
-    }
-  };
+    // if (location.state?.postDetail) {
+    fetchPostDetail(sharePostId);
+    fetchLikeCounts(sharePostId);
+    // } else {
+    //   console.warn('postDetail not found in location.state');
+    // }
+    // }, [location.state]);
+  }, []);
 
   return (
     <>
-      {activeReportModal && <ReportModal onClose={() => setActiveReportModal(false)} />}
+      {activeReportModal && (
+        <ReportModal
+          reportType="POST"
+          letterId={sharePostId}
+          onClose={() => setActiveReportModal(false)}
+        />
+      )}
       <div className="grow bg-white">
         <Header
           likeCount={likeCount}