design: 홈 페이지 공유 미리보기 퍼블리싱

src/pages/Home/components/GoToLetterBoard.tsx

@@ -6,7 +6,7 @@ const GoToLetterBoard = () => {
     <div className="absolute bottom-48 left-[calc(var(--vh)*36)] z-9 flex w-full">
       <div className="text-left">
         <p className="text-gray-60 body-r mb-1 ml-2">게시판</p>
-        <Link to="/letter/board">
+        <Link to="/board/letter">
           <img src={goToLetterBoard} alt="go to letter board" className="w-[177px]" />
         </Link>
       </div>

src/pages/Home/components/RandomCheer.tsx

@@ -11,7 +11,7 @@ const RandomCheer = () => {
   const [randomCheer, setRandomCheer] = useState(getRandomCheer());
 
   return (
-    <div className="flex flex-col items-end pr-20">
+    <div className="z-30 flex flex-col items-end pr-20">
       <div
         className="relative mb-3 w-fit rounded-lg border-1 border-white bg-white px-6 py-[7px] text-center"
         onClick={() => setRandomCheer(getRandomCheer())}

src/pages/Home/components/ShowShareAccessModal.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ModalBg from '@/assets/images/modal-yellow.png';
 import ModalOverlay from '@/components/ModalOverlay';
+import { useNavigate } from 'react-router';
 
 interface ShowShareAccessModalProps {
   children?: React.ReactNode;
@@ -15,6 +16,13 @@ const DUMMY_SHARE_ACCESS = [
 ];
 
 const ShowShareAccessModal = ({ onClose }: ShowShareAccessModalProps) => {
+  const navigate = useNavigate();
+
+  const handleNavigation = (accessId: number) => {
+    navigate(`/board/letter/${accessId}`, {
+      state: { isShareLetterPreview: true },
+    });
+  };
   return (
     <ModalOverlay closeOnOutsideClick onClose={onClose}>
       <div className="flex h-full flex-col items-center justify-center">
@@ -33,13 +41,13 @@ const ShowShareAccessModal = ({ onClose }: ShowShareAccessModalProps) => {
             </div>
             <div className="mt-6 flex w-[251px] flex-col gap-[10px]">
               {DUMMY_SHARE_ACCESS.map((access) => (
-                <div
+                <button
                   className="text-gray-80 body-m flex h-10 w-full items-center justify-between gap-1 rounded-lg bg-white p-3"
-                  // onClick={openLetterPreview}
                   key={access.id}
+                  onClick={() => handleNavigation(access.id)}
                 >
                   <p>{access.zip_code}님의 공유 요청</p>
-                </div>
+                </button>
               ))}
             </div>
           </section>

src/pages/LetterBoardDetail/components/Header.tsx

@@ -1,4 +1,4 @@
-import { Link } from 'react-router';
+import { Link, useNavigate } from 'react-router';
 
 import {
   ArrowLeftIcon,
@@ -14,34 +14,53 @@ interface HeaderProps {
   isWriter: boolean;
   onToggleLike: () => void;
   onOpenReportModal: () => void;
+  isShareLetterPreview?: boolean;
 }
 
-const Header = ({ likeCount, isLike, isWriter, onToggleLike, onOpenReportModal }: HeaderProps) => {
+const Header = ({
+  likeCount,
+  isLike,
+  isWriter,
+  onToggleLike,
+  onOpenReportModal,
+  isShareLetterPreview = false,
+}: HeaderProps) => {
+  const navigate = useNavigate();
+
   return (
     <header className="fixed top-0 z-40 w-full max-w-150">
       <div className="flex h-16 items-center justify-between bg-white p-5">
-        <Link to="/board/letter">
-          <ArrowLeftIcon className="text-primary-1 h-6 w-6" />
-        </Link>
-        <div className="flex items-center gap-3">
-          <div className="flex items-center gap-1">
-            <button type="button" onClick={onToggleLike}>
-              {isLike ? (
-                <LikeFilledIcon className="text-primary-1 h-6 w-6" />
-              ) : (
-                <LikeOutlinedIcon className="text-primary-1 h-6 w-6" />
-              )}
-            </button>
-            <p className="body-l-m text-primary-1">{likeCount}</p>
+        {isShareLetterPreview ? (
+          <button onClick={() => navigate(-1)}>
+            <ArrowLeftIcon className="text-primary-1 h-6 w-6" />
+          </button>
+        ) : (
+          <Link to="/board/letter">
+            <ArrowLeftIcon className="text-primary-1 h-6 w-6" />
+          </Link>
+        )}
+
+        {!isShareLetterPreview && (
+          <div className="flex items-center gap-3">
+            <div className="flex items-center gap-1">
+              <button type="button" onClick={onToggleLike}>
+                {isLike ? (
+                  <LikeFilledIcon className="text-primary-1 h-6 w-6" />
+                ) : (
+                  <LikeOutlinedIcon className="text-primary-1 h-6 w-6" />
+                )}
+              </button>
+              <p className="body-l-m text-primary-1">{likeCount}</p>
+            </div>
+            {isWriter ? (
+              <DeleteIcon className="text-primary-1 h-6 w-6" />
+            ) : (
+              <button type="button" onClick={onOpenReportModal}>
+                <SirenOutlinedIcon className="text-primary-1 h-6 w-6" />
+              </button>
+            )}
           </div>
-          {isWriter ? (
-            <DeleteIcon className="text-primary-1 h-6 w-6" />
-          ) : (
-            <button type="button" onClick={onOpenReportModal}>
-              <SirenOutlinedIcon className="text-primary-1 h-6 w-6" />
-            </button>
-          )}
-        </div>
+        )}
       </div>
       <div className="h-4 w-full bg-gradient-to-b from-white to-white/0" />
     </header>

src/pages/LetterBoardDetail/index.tsx

@@ -1,19 +1,34 @@
 import { useState } from 'react';
+import { useLocation } from 'react-router';
+
 import { twMerge } from 'tailwind-merge';
 
 import ReportModal from '@/components/ReportModal';
 
 import Header from './components/Header';
 import Letter from './components/Letter';
 
+import landingBlur from '@/assets/images/landing_blur.png';
+
 const DUMMY_LETTER = {
   receiver: '12E21',
   content:
     '편지 내용 어쩌구저쩌구 뾰로롱 편지 내용 어쩌구저쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 저쩌구 끝~!!',
   sender: '12345',
 };
 
-const LetterBoardDetailPage = () => {
+interface ShareLetterPreviewProps {
+  confirmDisabled?: boolean;
+  children?: React.ReactNode;
+  onCancel?: () => void;
+  onConfirm?: () => void;
+}
+
+const LetterBoardDetailPage = ({
+  confirmDisabled,
+  onCancel,
+  onConfirm,
+}: ShareLetterPreviewProps) => {
   const [likeCount, setLikeCount] = useState(122);
   const [isLike, setIsLike] = useState(false);
   const isWriter = false;
@@ -24,6 +39,11 @@ const LetterBoardDetailPage = () => {
     setIsLike((prev) => !prev);
   };
 
+  const location = useLocation();
+
+  const isShareLetterPreview = location.state?.isShareLetterPreview || false; // state가 없다면 false로 기본값 설정
+  console.log(location);
+
   return (
     <>
       {activeReportModal && <ReportModal onClose={() => setActiveReportModal(false)} />}
@@ -34,6 +54,7 @@ const LetterBoardDetailPage = () => {
           isWriter={isWriter}
           onToggleLike={handleToggleLike}
           onOpenReportModal={() => setActiveReportModal(true)}
+          isShareLetterPreview={isShareLetterPreview}
         />
         <main className="px-5 pt-18 pb-3">
           <p className="body-b mb-6 px-5">FROM. 12E31</p>
@@ -56,6 +77,29 @@ const LetterBoardDetailPage = () => {
             <Letter letter={DUMMY_LETTER} isSender />
             <Letter letter={DUMMY_LETTER} />
           </section>
+
+          {isShareLetterPreview && (
+            <>
+              <img src={landingBlur} alt="landing blur" className="fixed bottom-0 w-screen" />
+              <section className="fixed bottom-[30px] left-1/2 flex w-73 translate-x-[-50%] gap-6">
+                <button
+                  type="button"
+                  className="body-m secondary-btn h-10 flex-1 basis-1/2"
+                  onClick={onCancel}
+                >
+                  거부하기
+                </button>
+                <button
+                  type="button"
+                  className="primary-btn body-m h-10 flex-1 basis-1/2"
+                  disabled={confirmDisabled}
+                  onClick={onConfirm}
+                >
+                  승인하기
+                </button>
+              </section>
+            </>
+          )}
         </main>
       </div>
     </>