fix: 게시판 편지 공유 모달 오류 해결 (#73)

* fix: ShowShareAccessModal에서 undefined 배열 map 호출 오류 해결

* fix: 공유 상세 보기 페이지에서 발신자 데이터 바인딩 문제 해결

* fix: 글 작성자 배경색이 적용되지 않는 오류 해결

* design: 공유 상세 보기 페이지 하단 블러 이미지 위치 조정

Author: tifsy

src/apis/share.ts

@@ -10,13 +10,14 @@ interface ShareLetter {
 
 // 공유 게시글 목록 조회 타입
 export interface SharePost {
-  writerZipCode: number;
-  receiverZipCode: number;
+  writerZipCode: string;
+  receiverZipCode: string;
   content: string;
   createdAt: string;
   active: boolean;
   sharePostId: number;
   sharePostContent: string;
+  zipCode: string;
   letters: ShareLetter[];
 }
 
@@ -45,9 +46,9 @@ export const getSharePostList = async (
     const response = await client.get('/api/share-posts', {
       params: { page, size },
     });
-    console.log(`🌟공유 게시글 목록`, response.data);
+    console.log(`🌟공유 게시글 목록`, response.data.data);
 
-    return response.data;
+    return response.data.data;
   } catch (error) {
     console.error('❌ 편지 공유 게시글 목록을 조회하던 중 에러가 발생했습니다', error);
     throw new Error('편지 공유 게시글 목록 조회 실패');

src/pages/LetterBoardDetail/index.tsx

@@ -82,7 +82,7 @@ const LetterBoardDetailPage = ({ confirmDisabled }: ShareLetterPreviewProps) =>
           isShareLetterPreview={isShareLetterPreview}
         />
         <main className="px-5 pt-18 pb-3">
-          <p className="body-b mb-6 px-5">FROM. {postDetail?.writerZipCode}</p>
+          <p className="body-b mb-6 px-5">FROM. {postDetail?.zipCode}</p>
           <p
             className={twMerge(
               'body-r bg-[repeating-linear-gradient(transparent,transparent_25px,#ffe6e3_26px)] px-5 whitespace-pre-wrap',
@@ -96,14 +96,18 @@ const LetterBoardDetailPage = ({ confirmDisabled }: ShareLetterPreviewProps) =>
               <Letter
                 key={index}
                 letter={letter}
-                isWriter={letter.writerZipCode === String(postDetail.receiverZipCode)}
+                isWriter={letter.writerZipCode === postDetail.zipCode}
               />
             ))}
           </section>
 
           {isShareLetterPreview && (
             <>
-              <img src={BlurImg} alt="landing blur" className="fixed bottom-0 z-10 w-screen" />
+              <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"