From a74f606fdd0efb21df78b43399ca588d69cd2f6c Mon Sep 17 00:00:00 2001
From: myeongheonhong <ruddyh7076@gmail.com>
Date: Wed, 20 Nov 2024 11:31:37 +0900
Subject: [PATCH] =?UTF-8?q?[=20feat=20]=20=EA=B3=B5=EC=9C=A0=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0=20=EB=AA=A8=EB=8B=AC=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/assets/icons/closeSmallIc.svg          |  28 ++--
 public/assets/images/index.ts                 |   8 +-
 src/app/layout.tsx                            |   9 +-
 src/app/page.tsx                              |   4 +-
 src/app/wishes/create/page.tsx                |   8 +-
 src/app/wishes/page.tsx                       |   8 +
 src/app/wishes/share/page.tsx                 |  27 ----
 src/components/Common/Hedaer.tsx              |   2 +-
 .../Common/Modal/CloseIconInModal.tsx         |  27 ++--
 .../Modal/CloseIconInModalWithVitaminCake.tsx |  25 +++
 .../Common/Modal/ShareLinkModal.tsx           |  57 +++++++
 src/components/UI/CakeTree.tsx                | 147 ------------------
 src/components/UI/GradientShadow.tsx          |  16 +-
 src/components/UI/PresentList.tsx             |   6 +-
 src/constant/init.ts                          |   7 +-
 src/constant/model/cakesTreeData.ts           |   2 +-
 src/constant/model/snsShareList.ts            |  76 +++++++++
 src/container/present/selectPayment.tsx       |  16 +-
 src/domain/home/container.tsx                 |  14 +-
 src/domain/present/[wishId]/component.tsx     |  11 +-
 src/domain/present/[wishId]/container.tsx     | 127 ++++++---------
 src/domain/present/[wishId]/done.tsx          |   2 -
 src/domain/present/[wishId]/payment.tsx       |  10 +-
 src/domain/wishes/component.tsx               |  92 ++++++++++-
 src/domain/wishes/container.tsx               |  94 +++++------
 src/domain/wishes/create/container.tsx        |  71 ++-------
 src/domain/wishes/create/service.tsx          |   9 ++
 src/domain/wishes/share/container.tsx         |   4 +-
 src/hooks/common/useKakaoShare.ts             |  25 ---
 src/hooks/common/useWatchFormValueList.ts     |  22 ---
 src/layouts/MainLayout.tsx                    |   2 +-
 31 files changed, 457 insertions(+), 499 deletions(-)
 delete mode 100644 src/app/wishes/share/page.tsx
 create mode 100644 src/components/Common/Modal/CloseIconInModalWithVitaminCake.tsx
 create mode 100644 src/components/Common/Modal/ShareLinkModal.tsx
 create mode 100644 src/constant/model/snsShareList.ts
 delete mode 100644 src/hooks/common/useKakaoShare.ts
 delete mode 100644 src/hooks/common/useWatchFormValueList.ts

diff --git a/public/assets/icons/closeSmallIc.svg b/public/assets/icons/closeSmallIc.svg
index 9fb4f122..a7dee92b 100644
--- a/public/assets/icons/closeSmallIc.svg
+++ b/public/assets/icons/closeSmallIc.svg
@@ -1,15 +1,15 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="1.71436" y="1.71387" width="1.71429" height="1.71429" fill="#00ABFF"/>
-<rect width="1.71429" height="1.71429" fill="#00ABFF"/>
-<rect x="10.2856" width="1.71429" height="1.71429" fill="#00ABFF"/>
-<rect x="8.57129" y="1.71387" width="1.71429" height="1.71429" fill="#00ABFF"/>
-<rect x="3.42871" y="3.42871" width="1.71429" height="1.71429" fill="#00ABFF"/>
-<rect width="1.71429" height="1.71429" transform="matrix(1 0 0 -1 1.71436 10.2861)" fill="#00ABFF"/>
-<rect x="6.85693" y="3.42871" width="1.71429" height="1.71429" fill="#00ABFF"/>
-<rect width="1.71429" height="1.71429" transform="matrix(1 0 0 -1 0 12)" fill="#00ABFF"/>
-<rect width="1.71429" height="1.71429" transform="matrix(1 0 0 -1 10.2856 12)" fill="#00ABFF"/>
-<rect width="1.71429" height="1.71429" transform="matrix(1 0 0 -1 8.57129 10.2861)" fill="#00ABFF"/>
-<rect width="1.71429" height="1.71429" transform="matrix(1 0 0 -1 3.42871 8.57129)" fill="#00ABFF"/>
-<rect x="5.14307" y="5.14258" width="1.71429" height="1.71429" fill="#00ABFF"/>
-<rect width="1.71429" height="1.71429" transform="matrix(1 0 0 -1 6.85693 8.57129)" fill="#00ABFF"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.28125" y="2.28516" width="2.28571" height="2.28571" fill="#003D50"/>
+<rect width="2.28571" height="2.28571" fill="#003D50"/>
+<rect x="13.7188" width="2.28571" height="2.28571" fill="#003D50"/>
+<rect x="11.4297" y="2.28516" width="2.28571" height="2.28571" fill="#003D50"/>
+<rect x="4.57031" y="4.57178" width="2.28571" height="2.28571" fill="#003D50"/>
+<rect width="2.28571" height="2.28571" transform="matrix(1 0 0 -1 2.28125 13.7148)" fill="#003D50"/>
+<rect x="9.14062" y="4.57178" width="2.28571" height="2.28571" fill="#003D50"/>
+<rect width="2.28571" height="2.28571" transform="matrix(1 0 0 -1 0 16)" fill="#003D50"/>
+<rect width="2.28571" height="2.28571" transform="matrix(1 0 0 -1 13.7188 16)" fill="#003D50"/>
+<rect width="2.28571" height="2.28571" transform="matrix(1 0 0 -1 11.4297 13.7148)" fill="#003D50"/>
+<rect width="2.28571" height="2.28571" transform="matrix(1 0 0 -1 4.57031 11.4282)" fill="#003D50"/>
+<rect x="6.85938" y="6.85693" width="2.28571" height="2.28571" fill="#003D50"/>
+<rect width="2.28571" height="2.28571" transform="matrix(1 0 0 -1 9.14062 11.4282)" fill="#003D50"/>
 </svg>
diff --git a/public/assets/images/index.ts b/public/assets/images/index.ts
index 7849c6c6..f4b3b500 100644
--- a/public/assets/images/index.ts
+++ b/public/assets/images/index.ts
@@ -24,10 +24,10 @@ export { default as MainEndCakeImg } from '../images/mainEndCakeImg.png';
 export { default as LinkBeefCakeImg } from '../images/linkBeefCakeImg.png';
 
 // SNS share
-export { default as KaKaoLogoImg } from '../images/sns/kakaoLogoImg.svg';
-export { default as InstaLogoImg } from '../images/sns/instaLogoImg.svg';
-export { default as FacebookLogoImg } from '../images/sns/facebookLogoImg.svg';
-export { default as TwitterLogoImg } from '../images/sns/twitterLogoImg.svg';
+export { default as ShareKaKaoLogoImg } from '../images/sns/kakaoLogoImg.svg';
+export { default as ShareInstaLogoImg } from '../images/sns/instaLogoImg.svg';
+export { default as ShareFacebookLogoImg } from '../images/sns/facebookLogoImg.svg';
+export { default as ShareTwitterLogoImg } from '../images/sns/twitterLogoImg.svg';
 
 //케이크 트리 관련 이미지
 export { default as CakeDishTopRibbonImg } from '../images/cakeDishTopRibbonImg.png';
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4a0ecb4f..e9fe8af3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,6 +2,13 @@ import { Metadata } from 'next';
 import '../styles/global.css';
 import { Suspense } from 'react';
 import Loading from './loading';
+import Script from 'next/script';
+
+declare global {
+  interface Window {
+    Kakao: any;
+  }
+}
 
 export const metadata: Metadata = {
   title: '조물주 보다 생일 선물주',
@@ -14,7 +21,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <html lang="en" className="bg-background">
       <body>
         <Suspense fallback={<Loading />}>{children}</Suspense>
-        {/* {children} */}
+        <Script src="https://developers.kakao.com/sdk/js/kakao.js" strategy="afterInteractive" />
       </body>
     </html>
   );
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e2d49816..1c741ae0 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,9 +9,9 @@ export default async function Home() {
 
   return (
     <>
-      <Header isLoggedIn={isLoggedIn} />
+      <Header />
       <MainLayout>
-        <MainPageContainer />
+        <MainPageContainer isLoggedIn={isLoggedIn} />
       </MainLayout>
     </>
   );
diff --git a/src/app/wishes/create/page.tsx b/src/app/wishes/create/page.tsx
index 1423153d..89ca3ca7 100644
--- a/src/app/wishes/create/page.tsx
+++ b/src/app/wishes/create/page.tsx
@@ -1,9 +1,14 @@
 import { getMainProgressWishesData } from '@/api/wishes';
 import ErrorPage from '@/app/error';
 import Header from '@/components/Common/Hedaer';
+import ShareLinkModal from '@/components/Common/Modal/ShareLinkModal';
 import { WishesCreateTitleText } from '@/domain/wishes/create/component';
 import WishesCreatePageContainer from '@/domain/wishes/create/container';
-import { AccountInputWithSavedAccountData, CenteredContent } from '@/domain/wishes/create/service';
+import {
+  AccountInputWithSavedAccountData,
+  CenteredContent,
+  ShareWishesLinkModal,
+} from '@/domain/wishes/create/service';
 import WishesAccountInputForm from '@/domain/wishes/create/wishesAccountInputForm';
 import WishesLinkInputForm from '@/domain/wishes/create/wishesLinkInputForm';
 import MainLayout from '@/layouts/MainLayout';
@@ -51,6 +56,7 @@ export default async function WishesCreatePage({
               done: (
                 <>
                   <CenteredContent />,
+                  <ShareWishesLinkModal />
                 </>
               ),
             }[step]
diff --git a/src/app/wishes/page.tsx b/src/app/wishes/page.tsx
index 9acc2356..bc72e611 100644
--- a/src/app/wishes/page.tsx
+++ b/src/app/wishes/page.tsx
@@ -5,11 +5,14 @@ import { getMainProgressWishesData } from '@/api/wishes';
 import { getLoginUserCookiesData } from '@/utils/common/cookies';
 import WishesPageContainer, {
   CakesTreeMessage,
+  WishesLinkSnsShareModal,
   WishesPageFixedBottomButton,
 } from '@/domain/wishes/container';
 import { ReceivedCakePresentList, WishesMessageToCreateUser } from '@/domain/wishes/service';
 import { MessageText } from '@/domain/wishes/component';
 import { defaultCakeTreeDataArray } from '@/constant/model/cakesTreeData';
+import GradientShadow from '@/components/UI/GradientShadow';
+import ShareLinkModal from '@/components/Common/Modal/ShareLinkModal';
 
 export default async function WishesPage() {
   const progressWishesData = await getMainProgressWishesData();
@@ -27,6 +30,10 @@ export default async function WishesPage() {
                 nickName={loginUserData.nickName}
               />
               <ReceivedCakePresentList wishId={progressWishesData.wishId} />
+              <WishesLinkSnsShareModal
+                wishId={progressWishesData.wishId}
+                nickName={loginUserData.nickName}
+              />
             </>
           ) : (
             <>
@@ -39,6 +46,7 @@ export default async function WishesPage() {
           )}
           <WishesPageFixedBottomButton isWishProgress={!!progressWishesData} />
         </WishesPageContainer>
+        <GradientShadow height={19} />
       </MainLayout>
     </>
   );
diff --git a/src/app/wishes/share/page.tsx b/src/app/wishes/share/page.tsx
deleted file mode 100644
index de00df22..00000000
--- a/src/app/wishes/share/page.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import MainLayout from '@/layouts/MainLayout';
-import Header from '@/components/Common/Hedaer';
-import { getMainProgressWishesData } from '@/api/wishes';
-import ErrorPage from '@/app/error';
-import WishesSharePageContainer from '@/domain/wishes/share/container';
-import { CenteredContent } from '@/domain/wishes/share/service';
-
-// 예외처리 해야합니다!
-
-export default async function WishesSharePage() {
-  const progressWishesData = await getMainProgressWishesData();
-
-  return (
-    <>
-      <Header />
-      <MainLayout>
-        {!!progressWishesData ? (
-          <WishesSharePageContainer>
-            <CenteredContent />
-          </WishesSharePageContainer>
-        ) : (
-          <ErrorPage alertMessage="소원 정보가 존재하지 않아요!" />
-        )}
-      </MainLayout>
-    </>
-  );
-}
diff --git a/src/components/Common/Hedaer.tsx b/src/components/Common/Hedaer.tsx
index cd6e3037..44061c27 100644
--- a/src/components/Common/Hedaer.tsx
+++ b/src/components/Common/Hedaer.tsx
@@ -13,7 +13,7 @@ interface HeaderProps {
 }
 
 export default function Header(props: HeaderProps) {
-  const { backBtn, mypageBtn, pathTo, isLoggedIn } = props;
+  const { backBtn, mypageBtn, pathTo } = props;
   const pathname = usePathname();
   const router = useRouter();
 
diff --git a/src/components/Common/Modal/CloseIconInModal.tsx b/src/components/Common/Modal/CloseIconInModal.tsx
index 713c5005..b6b47efd 100644
--- a/src/components/Common/Modal/CloseIconInModal.tsx
+++ b/src/components/Common/Modal/CloseIconInModal.tsx
@@ -1,30 +1,29 @@
+import { ColorsTypes } from '@/styles/styles';
 import { PropsWithChildren } from 'react';
 import Modal, { ModalProps } from '.';
-import { CloseSmallIc } from '../../../../public/assets/icons';
 import Image from 'next/image';
-import { ColorsTypes } from '@/styles/styles';
-import { VitaminCakeImg } from '../../../../public/assets/images';
+import { CloseSmallIc } from '../../../../public/assets/icons';
 
 export default function CloseIconInModal({
   modalColor = 'main_blue',
-  modalTitle,
   children,
   ...rest
-}: { modalColor?: keyof ColorsTypes; modalTitle: string } & PropsWithChildren & ModalProps) {
+}: { modalColor?: keyof ColorsTypes } & PropsWithChildren & ModalProps) {
   return (
     <Modal {...rest}>
       <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[85%] h-314">
         <div className={`bg-${modalColor} p-20 rounded-xl`}>
-          <div className="flex flex-row-reverse" onClick={rest.handleState}>
-            <Image src={CloseSmallIc} alt="닫기" width={16} height={16} />
-          </div>
-          <div className="flex flex-col items-center gap-20 w-full">
-            <div className="flex flex-col items-center w-full">
-              <Image src={VitaminCakeImg} alt="케이크 이미지" width={60} height={60} />
-              <h4 className="font-bitbit text-[24px] text-background">{modalTitle}</h4>
-            </div>
-            {children}
+          <div className="flex flex-row-reverse">
+            <Image
+              src={CloseSmallIc}
+              alt="닫기"
+              width={16}
+              height={16}
+              onClick={rest.handleState}
+            />
           </div>
+
+          {children}
         </div>
       </div>
     </Modal>
diff --git a/src/components/Common/Modal/CloseIconInModalWithVitaminCake.tsx b/src/components/Common/Modal/CloseIconInModalWithVitaminCake.tsx
new file mode 100644
index 00000000..8b0538d0
--- /dev/null
+++ b/src/components/Common/Modal/CloseIconInModalWithVitaminCake.tsx
@@ -0,0 +1,25 @@
+import { PropsWithChildren } from 'react';
+import { ModalProps } from '.';
+import Image from 'next/image';
+import { ColorsTypes } from '@/styles/styles';
+import { VitaminCakeImg } from '../../../../public/assets/images';
+import CloseIconInModal from './CloseIconInModal';
+
+export default function CloseIconInModalWithVitaminCake({
+  modalColor = 'main_blue',
+  modalTitle,
+  children,
+  ...rest
+}: { modalColor?: keyof ColorsTypes; modalTitle: string } & PropsWithChildren & ModalProps) {
+  return (
+    <CloseIconInModal {...rest}>
+      <div className="flex flex-col items-center gap-20 w-full">
+        <div className="flex flex-col items-center w-full">
+          <Image src={VitaminCakeImg} alt="케이크 이미지" width={60} height={60} />
+          <h4 className="font-bitbit text-[24px] text-background">{modalTitle}</h4>
+        </div>
+        {children}
+      </div>
+    </CloseIconInModal>
+  );
+}
diff --git a/src/components/Common/Modal/ShareLinkModal.tsx b/src/components/Common/Modal/ShareLinkModal.tsx
new file mode 100644
index 00000000..bacb6079
--- /dev/null
+++ b/src/components/Common/Modal/ShareLinkModal.tsx
@@ -0,0 +1,57 @@
+import Image from 'next/image';
+import InputText from '../Input/inputText';
+import CloseIconInModal from './CloseIconInModal';
+import { LinkCopyIc } from '../../../../public/assets/icons';
+import { snsShareListArray } from '@/constant/model/snsShareList';
+import { useEffect } from 'react';
+
+export default function ShareLinkModal({
+  modalState,
+  handleModalState,
+  wishId,
+  nickName,
+}: {
+  modalState: boolean;
+  handleModalState: () => void;
+  wishId: string;
+  nickName: string;
+}) {
+  const wishLink = `sunmulzu.com/wishes/${wishId}`;
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const { Kakao } = window;
+
+      if (!Kakao.isInitialized()) {
+        Kakao.init(process.env.NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY);
+      }
+    }
+  }, []);
+
+  async function handleAccountWishesLink() {
+    try {
+      await navigator.clipboard.writeText(wishLink);
+      alert('링크가 복사됐어요!');
+    } catch (error) {}
+  }
+
+  return (
+    <CloseIconInModal isOpen={modalState} handleState={handleModalState}>
+      <div className="flex gap-10 justify-center w-full p-10">
+        {snsShareListArray.map((snsItem) => (
+          <Image
+            src={snsItem.image}
+            alt="sns아이콘"
+            onClick={() => {
+              snsItem.onClick(wishLink, nickName);
+            }}
+          />
+        ))}
+      </div>
+
+      <InputText onClick={handleAccountWishesLink} value={wishLink} readOnly>
+        <Image src={LinkCopyIc} alt="" onClick={handleAccountWishesLink} />
+      </InputText>
+    </CloseIconInModal>
+  );
+}
diff --git a/src/components/UI/CakeTree.tsx b/src/components/UI/CakeTree.tsx
index 0d71e0fe..e69de29b 100644
--- a/src/components/UI/CakeTree.tsx
+++ b/src/components/UI/CakeTree.tsx
@@ -1,147 +0,0 @@
-// 'use client';
-
-
-// import Image from 'next/image';
-// import { CakeDishTopRibbonImg } from '../../../public/assets/images';
-// import useToggle from '@/hooks/common/useToggle';
-// import useSelectItem from '@/hooks/common/useSelectItem';
-// import { useEffect, useState } from 'react';
-// import { CakePresentMessageDataType } from '@/types/api/response';
-// import { getCakePresentMessage } from '@/api/cakes';
-// import CloseTopModal from '../Common/Modal/CloseTopModal';
-// import FixedBottomButton from '../Common/Button/FixedBottomButton';
-// import Button from '../Common/Button';
-
-// export function CakesTree({
-//   cakeList,
-//   wishId,
-//   nickName,
-// }: {
-
-//   wishId: string;
-//   nickName: string;
-// }) {
-//   const numberOfRows = Math.max(4, Math.ceil(cakeList.length / 3));
-
-//   const { state, handleState, changeState } = useToggle();
-//   const { selectedId: selectedPresentId, handleSelectOne } = useSelectItem();
-//   const [cakePresentMessageData, setCakePresentMessageData] =
-//     useState<CakePresentMessageDataType | null>(null);
-
-//   useEffect(() => {
-//     if (selectedPresentId > 0) {
-//       getCakePresentMessage(wishId, selectedPresentId).then((response) => {
-//         setCakePresentMessageData(response);
-//       });
-//     }
-//   }, [selectedPresentId]);
-
-//   return (
-//     <div className="flex flex-col items-center w-full">
-//       <div className="relative w-375 h-screen mt-40">
-//         {/* 케이크 상단의 리본이미지 */}
-//         <CakesTreeTopDecorationImg />
-
-//         {/* 케이크 접시 구성 */}
-//         {Array.from({ length: numberOfRows }).map((_, rowIndex) => (
-//           <div
-//             className="absolute top-128 w-375 h-222 bg-cover bg-no-repeat bg-[url('/assets/images/cakeDishImg.png')]"
-//             key={rowIndex}
-//             style={{
-//               top: `${rowIndex * 165}px`,
-//               backgroundPosition: 'center 1px',
-//             }}
-//           >
-//             {/* 층별로 3개씩 케이크 배치 */}
-//             <ul className="grid grid-cols-3 justify-center gap-x-[1px] custom-grid w-full h-full mt-70 px-50">
-//               {cakeList.slice(rowIndex * 3, rowIndex * 3 + 3).map((cake) => (
-//                 <li
-//                   className="z-5 flex flex-col items-center aspect-square p-4 transform translate-y-[-30px] justify-self-center"
-//                   key={cake.name}
-//                   onClick={() => {
-//                     handleSelectOne(cake.presentId);
-//                     changeState(true);
-//                   }}
-//                   style={{ width: '105%' }}
-//                 >
-//                   <Image src={cakeImageWithId[cake.cakeId]} alt="선물 이미지" />
-//                   <span className="font-galmuri text-white text-[10px] px-8 py-2 bg-black bg-opacity-50 rounded-4xl">
-//                     {cake.name}
-//                   </span>
-//                 </li>
-//               ))}
-//             </ul>
-//           </div>
-//         ))}
-//       </div>
-
-//       {state && selectedPresentId > 0 && cakePresentMessageData && (
-//         <CakeMessageModal
-//           state={state}
-//           handleState={handleState}
-//           cakePresentMessageData={cakePresentMessageData}
-//           nickName={nickName}
-//         />
-//       )}
-//     </div>
-//   );
-// }
-
-// export function CakeMessageModal({
-//   state,
-//   handleState,
-//   cakePresentMessageData,
-//   nickName,
-// }: {
-//   state: boolean;
-//   handleState: () => void;
-//   cakePresentMessageData: CakePresentMessageDataType;
-//   nickName: string;
-// }) {
-//   const { cakeId, giftMenuId, message, name } = cakePresentMessageData;
-
-//   return (
-//     <CloseTopModal isOpen={state} handleState={handleState} bgColor={'background'}>
-//       <div className="flex flex-col items-center w-full h-full">
-//         <span className="text-white font-bitbit text-[24px] whitespace-pre-wrap text-center leading-tight mt-2 mb-40">{`${name}님이\n${nickName}님에게 남긴 편지에요\n이미지를 저장해보세요!`}</span>
-//         <div className="flex flex-col items-center w-full h-full p-20 bg-dark_green rounded-2xl text-white">
-//           <span className="font-galmuri  text-[16px] px-14 py-8 bg-black bg-opacity-50 rounded-4xl">
-//             {name}
-//           </span>
-//           <Image
-//             src={defaultCakeListData[cakeId].image}
-//             alt="보낸 케이크 아바타 이미지"
-//             width={160}
-//           />
-//           <span className="text-[14px] mb-13">{message}</span>
-
-//           <div className="flex justify-between items-center w-full h-54 p-12 rounded-xl border border-main_blue font-bitbit text-[16px] text-white">
-//             <span className="font-galmuri">선물한 항목</span>
-//             <span>정성담은 편지</span>
-//           </div>
-//         </div>
-//       </div>
-//       <FixedBottomButton>
-//         <Button>이미지 저장하기</Button>
-//       </FixedBottomButton>
-//     </CloseTopModal>
-//   );
-// }
-
-// function CakesTreeTopDecorationImg() {
-//   return (
-//     <Image
-//       src={CakeDishTopRibbonImg}
-//       alt="케이크 꾸미기 리본 이미지"
-//       width={96}
-//       height={68}
-//       style={{
-//         position: 'absolute',
-//         left: '50%',
-//         transform: 'translate(-50%, -50%)',
-//         marginTop: '2rem',
-//         zIndex: 5,
-//       }}
-//     />
-//   );
-// }
diff --git a/src/components/UI/GradientShadow.tsx b/src/components/UI/GradientShadow.tsx
index 612f5160..c0a813e5 100644
--- a/src/components/UI/GradientShadow.tsx
+++ b/src/components/UI/GradientShadow.tsx
@@ -1,7 +1,17 @@
 export default function GradientShadow({ height }: { height: number }) {
   return (
-    <div
-      className={`sticky bottom-0 w-full h-${height} bg-[linear-gradient(180deg,_rgba(4,6,31,0)_0%,_rgba(4,6,31,1)_100%)]`}
-    />
+    <svg
+      className="fixed bottom-0 left-0 w-full pointer-events-none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{ height: `${height}rem` }}
+    >
+      <defs>
+        <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
+          <stop offset="0%" stopColor="rgba(4,6,31,0)" />
+          <stop offset="100%" stopColor="rgba(4,6,31,1)" />
+        </linearGradient>
+      </defs>
+      <rect width="100%" height="100%" fill="url(#gradient)" />
+    </svg>
   );
 }
diff --git a/src/components/UI/PresentList.tsx b/src/components/UI/PresentList.tsx
index 3a6ea6c9..929f72d8 100644
--- a/src/components/UI/PresentList.tsx
+++ b/src/components/UI/PresentList.tsx
@@ -6,10 +6,10 @@ import { convertMoneyText } from '@/utils/common/convert';
 import Image from 'next/image';
 
 export default function PresentList({
-  changeGiftMenutId,
+  changeGiftMenuId,
   readonly,
 }: {
-  changeGiftMenutId?: (id: number) => void;
+  changeGiftMenuId?: (id: number) => void;
   readonly?: boolean;
 }) {
   const { isSelected, handleSelectOne } = useSelectItem();
@@ -18,7 +18,7 @@ export default function PresentList({
     if (readonly) return;
 
     handleSelectOne(id);
-    changeGiftMenutId(id);
+    changeGiftMenuId(id);
   }
 
   return (
diff --git a/src/constant/init.ts b/src/constant/init.ts
index 0ff732a6..ae9fae23 100644
--- a/src/constant/init.ts
+++ b/src/constant/init.ts
@@ -1,9 +1,4 @@
-import {
-  AccountDataType,
-  PresentDataType,
-  WishesAccountDataType,
-  WishesLinkDataType,
-} from '@/types/input';
+import { AccountDataType, PresentDataType, WishesLinkDataType } from '@/types/input';
 import { getDate } from '@/utils/common/getDate';
 
 export const wishesLinkInputInit: WishesLinkDataType = {
diff --git a/src/constant/model/cakesTreeData.ts b/src/constant/model/cakesTreeData.ts
index 82480132..09daea87 100644
--- a/src/constant/model/cakesTreeData.ts
+++ b/src/constant/model/cakesTreeData.ts
@@ -87,7 +87,7 @@ export type CakeTreeDataType = {
 export type DummyCakeTreeDataType = {
   isAdminMessage: boolean;
   message: string;
-  giftMenuId: string;
+  giftMenuId: string | number;
 } & CakeTreeDataType;
 
 const defaultCakeTreeDataMap: Map<CakeIdType, DummyCakeTreeDataType> = new Map();
diff --git a/src/constant/model/snsShareList.ts b/src/constant/model/snsShareList.ts
new file mode 100644
index 00000000..44701c35
--- /dev/null
+++ b/src/constant/model/snsShareList.ts
@@ -0,0 +1,76 @@
+import { StaticImageData } from 'next/image';
+import {
+  ShareFacebookLogoImg,
+  ShareInstaLogoImg,
+  ShareKaKaoLogoImg,
+  ShareTwitterLogoImg,
+} from '../../../public/assets/images';
+
+type ShareSnskeyType = 'kakao' | 'instagram' | 'meta' | 'x';
+type SnsDataType = {
+  name: string;
+  image: StaticImageData;
+  onClick: (link?: string, name?: string) => void;
+};
+
+export const snsShareListObject: Record<ShareSnskeyType, SnsDataType> = {
+  kakao: {
+    name: '카카오',
+    image: ShareKaKaoLogoImg,
+    onClick: (link: string, name: string) => {
+      if (typeof window !== 'undefined' && window.Kakao?.isInitialized()) {
+        window.Kakao.Share.sendDefault({
+          objectType: 'feed',
+          content: {
+            title: `${name}님의 생일선물을 고민하고 있다면?`,
+            description: `고민할 필요없이 이 귀여운 케이크를 선물해 ${name}님의 생일 펀딩에 참여해보세요!`,
+            imageUrl: 'https://ifh.cc/g/wWJNBF.jpg',
+            link: {
+              mobileWebUrl: link,
+              webUrl: link,
+            },
+          },
+          buttons: [
+            {
+              title: '자세히 보기',
+              link: {
+                mobileWebUrl: link,
+                webUrl: link,
+              },
+            },
+          ],
+        });
+      } else {
+        console.error('Kakao SDK is not initialized.');
+      }
+    },
+  },
+  instagram: {
+    name: '인스타그램',
+    image: ShareInstaLogoImg,
+    onClick: () => {
+      window.open(`https://instagram.com`);
+    },
+  },
+  meta: {
+    name: '메타',
+    image: ShareFacebookLogoImg,
+    onClick: (link: string) => {
+      const hashtag = encodeURIComponent(`#조물주보다생일선물주`);
+
+      window.open(`http://www.facebook.com/sharer/sharer.php?u=${link}&hashtag=${hashtag}`);
+    },
+  },
+  x: {
+    name: '엑스',
+    image: ShareTwitterLogoImg,
+    onClick: (link: string, name: string) => {
+      const text = encodeURIComponent(
+        `${name}님의 생일선물을 고민하고 있다면?\n고민할 필요없이 이 귀여운 케이크를 선물해 ${name}님의 생일 펀딩에 참여해보세요! \n`,
+      );
+      window.open(`https://twitter.com/intent/tweet?text=${text + link}`);
+    },
+  },
+};
+
+export const snsShareListArray = Object.values(snsShareListObject);
diff --git a/src/container/present/selectPayment.tsx b/src/container/present/selectPayment.tsx
index 14bd7087..543e7cce 100644
--- a/src/container/present/selectPayment.tsx
+++ b/src/container/present/selectPayment.tsx
@@ -1,20 +1,10 @@
 'use client';
 
-import Box from '@/components/Common/Box';
-import Button from '@/components/Common/Button';
-import CloseIconInModal from '@/components/Common/Modal/CloseIconInModal';
-import CheckBox from '@/components/UI/CheckBox';
 import InputForm from '@/components/UI/InputForm';
 import { BANK_LIST, PAY_LIST } from '@/constant/bankList';
-import { useRouters } from '@/hooks/common/useRouters';
-import useToggle from '@/hooks/common/useToggle';
 import Image from 'next/image';
 
-export default function SelectPayment({
-  handleCheckSendMoneyModalState,
-}: {
-  handleCheckSendMoneyModalState: () => void;
-}) {
+export default function SelectPayment() {
   const handleDeepLink = (payment: { id: number; name: string }) => {
     const ua = navigator.userAgent.toLowerCase();
 
@@ -54,7 +44,6 @@ export default function SelectPayment({
               key={payment.name}
               onClick={() => {
                 handleDeepLink(payment);
-                handleCheckSendMoneyModalState();
               }}
             >
               <Image src={BANK_LIST[payment.id].logo} alt="은행 로고 이미지"></Image>
@@ -62,9 +51,6 @@ export default function SelectPayment({
             </li>
           ))}
         </ul>
-        <Box bgColor="dark_green" fontColor="gray2" styles={{ marginTop: '0.6rem' }}>
-          <CheckBox checkBoxText="직접 송금할게요!" changeCheckedState={() => {}} />
-        </Box>
       </InputForm>
     </div>
   );
diff --git a/src/domain/home/container.tsx b/src/domain/home/container.tsx
index fc538794..b4445cf8 100644
--- a/src/domain/home/container.tsx
+++ b/src/domain/home/container.tsx
@@ -4,10 +4,20 @@ import Image from 'next/image';
 import { useRouters } from '@/hooks/common/useRouters';
 import Button from '@/components/Common/Button';
 import { KakaoLoginIc } from '../../../public/assets/icons';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useEffect } from 'react';
 import { MainPageCenteredContent } from './component';
 
-export default function MainPageContainer({ children }: PropsWithChildren) {
+export default function MainPageContainer({
+  isLoggedIn = false,
+  children,
+}: { isLoggedIn?: boolean } & PropsWithChildren) {
+  const { handleRouter } = useRouters();
+
+  // useEffect(() => {
+  //   if (isLoggedIn) {
+  //     handleRouter('/wishes');
+  //   }
+  // }, []);
   return (
     <>
       {children}
diff --git a/src/domain/present/[wishId]/component.tsx b/src/domain/present/[wishId]/component.tsx
index d40e8b3c..a63c3e4b 100644
--- a/src/domain/present/[wishId]/component.tsx
+++ b/src/domain/present/[wishId]/component.tsx
@@ -1,4 +1,3 @@
-import { getPublicWishes } from '@/api/public';
 import Box from '@/components/Common/Box';
 import Button from '@/components/Common/Button';
 import { FixedBottomButtonWrapper } from '@/components/Common/Button/FixedBottomButton';
@@ -37,7 +36,7 @@ export function MessageFromWisheMaker({
           {publicWishesData.title}
         </h3>
 
-        <span className="font-bitbit text-main_blue text-[20px]  whitespace-pre-line">
+        <span className="font-bitbit text-main_blue text-[20px]  whitespace-pre-wrap">
           {`D-${publicWishesData.dayCount}`}
         </span>
       </div>
@@ -72,8 +71,10 @@ export function PresentSuccessSubmitButton() {
   }
 
   return (
-    <FixedBottomButtonWrapper>
-      <Button onClick={handleClick}>제 생일에도 써볼래요</Button>
-    </FixedBottomButtonWrapper>
+    <>
+      <FixedBottomButtonWrapper>
+        <Button onClick={handleClick}>제 생일에도 써볼래요</Button>
+      </FixedBottomButtonWrapper>
+    </>
   );
 }
diff --git a/src/domain/present/[wishId]/container.tsx b/src/domain/present/[wishId]/container.tsx
index 9580f5c6..6452340d 100644
--- a/src/domain/present/[wishId]/container.tsx
+++ b/src/domain/present/[wishId]/container.tsx
@@ -15,20 +15,18 @@ import CheckBox from '@/components/UI/CheckBox';
 import Button from '@/components/Common/Button';
 import { postPublicCakes } from '@/api/public';
 import { useRouters } from '@/hooks/common/useRouters';
-import { PublicWishesDataType } from '@/types/api/response';
+import { CakePresentMessageDataType, PublicWishesDataType } from '@/types/api/response';
 import Payment from './payment';
-import CloseIconInModal from '@/components/Common/Modal/CloseIconInModal';
+import CloseIconInModalWithVitaminCake from '@/components/Common/Modal/CloseIconInModalWithVitaminCake';
 import { FixedBottomButtonWrapper } from '@/components/Common/Button/FixedBottomButton';
-import CloseTopModal from '@/components/Common/Modal/CloseTopModal';
-import Image from 'next/image';
-import { presentListArray } from '@/constant/model/present';
-import { convertMoneyText } from '@/utils/common/convert';
 import {
   defaultCakeTreeDataArray,
   defaultCakeTreeDataObject,
 } from '@/constant/model/cakesTreeData';
 import PresentSuccess, { PresentSuccessCakeTree } from './done';
 import { MessageFromWisheMaker, PresentSuccessSubmitButton } from './component';
+import { CakeMessageModalUI } from '@/domain/wishes/component';
+import GradientShadow from '@/components/UI/GradientShadow';
 
 export default function GivePresentPageContainer({
   avatarCakeId,
@@ -53,11 +51,6 @@ export default function GivePresentPageContainer({
 
   const { wantsGift } = publicWishesData;
   const { state: messageOnlyOption, changeState: changeMessageOnlyOption } = useToggle();
-  const {
-    state: checkSendMoneyModalState,
-    changeState: changeSendMoneyModalState,
-    handleState: handleCheckSendMoneyModalState,
-  } = useToggle();
   const {
     state: presenetMessageModalState,
     handleState: handlePresentMessageModalState,
@@ -76,11 +69,11 @@ export default function GivePresentPageContainer({
 
   useEffect(() => {
     if (messageOnlyOption) {
-      changeGiftMenutId(0);
+      changeGiftMenuId(0);
     }
   }, [messageOnlyOption]);
 
-  function changeGiftMenutId(id: number) {
+  function changeGiftMenuId(id: number) {
     methods.setValue('giftMenuId', id);
   }
 
@@ -93,6 +86,16 @@ export default function GivePresentPageContainer({
     }
   }
 
+  function isValid() {
+    if (!methods.formState.isValid) return false;
+
+    const giftMenuId = methods.watch('giftMenuId');
+
+    if (!messageOnlyOption && !giftMenuId) return false;
+
+    return true;
+  }
+
   function GivePresent() {
     try {
       const data = methods.watch();
@@ -118,7 +121,7 @@ export default function GivePresentPageContainer({
                 <PresentGiverInfoInputForm>
                   {wantsGift && (
                     <InputForm title="선물하고 싶은 항목 선택하기">
-                      {!messageOnlyOption && <PresentList changeGiftMenutId={changeGiftMenutId} />}
+                      {!messageOnlyOption && <PresentList changeGiftMenuId={changeGiftMenuId} />}
                       <Box bgColor="dark_green" fontColor="gray2" styles={{ marginTop: '0.6rem' }}>
                         <CheckBox<PresentDataResolverType>
                           checkBoxText="편지만 보낼게요"
@@ -131,7 +134,7 @@ export default function GivePresentPageContainer({
                 <Button
                   onClick={handleGivePresent}
                   styles={{ marginBottom: '5.8rem' }}
-                  disabled={!methods.formState.isValid}
+                  disabled={!isValid()}
                 >
                   {'친구 생일 축하해주기'}
                 </Button>
@@ -139,39 +142,29 @@ export default function GivePresentPageContainer({
             ),
             payment: (
               <>
-                <Payment
-                  account={`${publicWishesData.accountNumber} ${publicWishesData.bank}`}
-                  handleCheckSendMoneyModalState={handleCheckSendMoneyModalState}
-                />
+                <Payment account={`${publicWishesData.accountNumber} ${publicWishesData.bank}`} />
                 <Button
                   onClick={() => {
-                    changeSendMoneyModalState(true);
+                    handleRouter(
+                      `/present/${wishId}?presentStep=done&avatarCakeId=${selectedCakeId}`,
+                    );
                   }}
                   styles={{ marginBottom: '5.8rem' }}
                 >
-                  {'선물하러 가기'}
+                  {'송금하고, 편지 확인하기'}
                 </Button>
-
-                {checkSendMoneyModalState && (
-                  <CheckSendMoneyModal
-                    modalState={checkSendMoneyModalState}
-                    handleModalState={handleCheckSendMoneyModalState}
-                    selectedCakeId={selectedCakeId}
-                    wishId={wishId}
-                  />
-                )}
               </>
             ),
             done: (
-              <section className="w-full">
+              <section className="relative w-full">
                 {
-                  // <PresentMessageModal
-                  //   nickName={publicWishesData.name}
-                  //   modalState={presenetMessageModalState}
-                  //   handleModalState={handlePresentMessageModalState}
-                  //   changeModalState={changePresenetMessgaeModalState}
-                  //   selectedCakeId={selectedCakeId}
-                  // />
+                  <PresentMessageModal
+                    nickName={publicWishesData.name}
+                    modalState={presenetMessageModalState}
+                    handleModalState={handlePresentMessageModalState}
+                    changeModalState={changePresenetMessgaeModalState}
+                    selectedCakeId={selectedCakeId}
+                  />
                 }
                 <PresentSuccess
                   giverName={methods.getValues('name')}
@@ -184,6 +177,7 @@ export default function GivePresentPageContainer({
                   ]}
                 />
 
+                <GradientShadow height={19} />
                 <PresentSuccessSubmitButton />
               </section>
             ),
@@ -213,7 +207,7 @@ function CheckSendMoneyModal({
   }
 
   return (
-    <CloseIconInModal
+    <CloseIconInModalWithVitaminCake
       modalTitle="친구 계좌로 돈을 송금하셨나요?"
       modalColor="main_blue"
       isOpen={modalState}
@@ -232,7 +226,7 @@ function CheckSendMoneyModal({
           {'송금했어요'}
         </Button>
       </div>
-    </CloseIconInModal>
+    </CloseIconInModalWithVitaminCake>
   );
 }
 
@@ -256,47 +250,24 @@ function PresentMessageModal({
   const { watch } = useFormContext<PresentDataResolverType>();
   const { name, message, giftMenuId } = watch();
 
-  return (
-    <CloseTopModal bgColor="background" isOpen={modalState} handleState={handleModalState}>
-      <div className="flex flex-col items-center w-full h-full">
-        <span className="text-white font-bitbit text-[24px] whitespace-pre-wrap text-center leading-tight mt-2 mb-40">{`${name}님이\n${nickName}님에게 남긴 편지에요\n이미지를 저장해보세요!`}</span>
-        <div className="flex flex-col items-center w-full h-full p-20 bg-dark_green rounded-2xl text-white">
-          <span className="font-galmuri  text-[16px] px-14 py-8 bg-black bg-opacity-50 rounded-4xl">
-            {name}
-          </span>
-          <Image
-            src={defaultCakeTreeDataObject[selectedCakeId].cakeImg}
-            alt="보낸 케이크 아바타 이미지"
-            width={160}
-          />
-          <span className="font-galmuri text-[14px] mb-13">{message}</span>
+  const messageData: CakePresentMessageDataType & { isAdminMessage: boolean } = {
+    name: name,
+    message: message,
+    giftMenuId: giftMenuId,
+    cakeId: Number(selectedCakeId),
+    isAdminMessage: false,
+  };
 
-          <div className="flex justify-between items-center w-full h-54 p-12 rounded-xl border border-main_blue font-bitbit text-[16px] text-white">
-            <span className="font-galmuri">선물한 항목</span>
-            <span>
-              {giftMenuId === 0 ? (
-                '정성담은 편지'
-              ) : (
-                <>
-                  <div className="flex gap-4 items-center font-bitbit text-[16px] text-white">
-                    <Image
-                      src={presentListArray[giftMenuId - 1].image}
-                      alt="선물한 선물 이미지"
-                      height={43}
-                    />
-                    {`${presentListArray[giftMenuId - 1].itemName} ${convertMoneyText(
-                      presentListArray[giftMenuId - 1].price.toString(),
-                    )}원`}
-                  </div>
-                </>
-              )}
-            </span>
-          </div>
-        </div>
-      </div>
+  return (
+    <CakeMessageModalUI
+      modalState={modalState}
+      handleModalState={handleModalState}
+      messageData={messageData}
+      nickName={nickName}
+    >
       <FixedBottomButtonWrapper>
         <Button>이미지 저장하기</Button>
       </FixedBottomButtonWrapper>
-    </CloseTopModal>
+    </CakeMessageModalUI>
   );
 }
diff --git a/src/domain/present/[wishId]/done.tsx b/src/domain/present/[wishId]/done.tsx
index ed772483..ee9a01ba 100644
--- a/src/domain/present/[wishId]/done.tsx
+++ b/src/domain/present/[wishId]/done.tsx
@@ -26,14 +26,12 @@ export function PresentSuccessCakeTree({ cakeList }: { cakeList: CakeTreeDataTyp
   const wishId = '254';
 
   const { selectedId: selectedPresentId, handleSelectOne } = useSelectItem();
-  console.log(selectedPresentId);
 
   const [firstCake, ...restCake] = cakeList;
 
   useEffect(() => {
     if (selectedPresentId > 0) {
       getCakePresentMessage(wishId, selectedPresentId).then((response) => {
-        console.log(response);
         // setCakePresentMessageData(response);
       });
     }
diff --git a/src/domain/present/[wishId]/payment.tsx b/src/domain/present/[wishId]/payment.tsx
index 21fe508b..d455bf26 100644
--- a/src/domain/present/[wishId]/payment.tsx
+++ b/src/domain/present/[wishId]/payment.tsx
@@ -7,13 +7,7 @@ import { useFormContext } from 'react-hook-form';
 import { AccountCopyCakeImg } from '../../../../public/assets/images';
 import SelectPayment from '@/container/present/selectPayment';
 
-export default function Payment({
-  account,
-  handleCheckSendMoneyModalState,
-}: {
-  account: string;
-  handleCheckSendMoneyModalState: () => void;
-}) {
+export default function Payment({ account }: { account: string }) {
   const { watch } = useFormContext<PresentDataResolverType>();
 
   async function handleAccountCopy() {
@@ -34,7 +28,7 @@ export default function Payment({
           onClick={handleAccountCopy}
         />
 
-        <SelectPayment handleCheckSendMoneyModalState={handleCheckSendMoneyModalState} />
+        <SelectPayment />
       </section>
     </>
   );
diff --git a/src/domain/wishes/component.tsx b/src/domain/wishes/component.tsx
index b542d447..661e97ee 100644
--- a/src/domain/wishes/component.tsx
+++ b/src/domain/wishes/component.tsx
@@ -1,10 +1,88 @@
 'use client';
 
-import { CakeTreeDataType, defaultCakeTreeDataArray } from '@/constant/model/cakesTreeData';
+import { CakeTreeDataType, defaultCakeTreeDataObject } from '@/constant/model/cakesTreeData';
 import Image from 'next/image';
 import { CakeDishTopRibbonImg } from '../../../public/assets/images';
 import { PropsWithChildren } from 'react';
-import CloseIconInModal from '@/components/Common/Modal/CloseIconInModal';
+import CloseIconInModalWithVitaminCake from '@/components/Common/Modal/CloseIconInModalWithVitaminCake';
+import CloseTopModal from '@/components/Common/Modal/CloseTopModal';
+import { presentListObject } from '@/constant/model/present';
+import { CakePresentMessageDataType } from '@/types/api/response';
+import { convertMoneyText } from '@/utils/common/convert';
+import ShareLinkModal from '@/components/Common/Modal/ShareLinkModal';
+
+export function CakeMessageModalUI({
+  modalState,
+  handleModalState,
+  messageData,
+  nickName,
+  children,
+}: {
+  modalState: boolean;
+  handleModalState: () => void;
+  messageData: CakePresentMessageDataType & { isAdminMessage: boolean };
+  nickName: string;
+} & PropsWithChildren) {
+  const { cakeId, message, name, isAdminMessage, giftMenuId } = messageData;
+
+  return (
+    <CloseTopModal isOpen={modalState} handleState={handleModalState} bgColor={'background'}>
+      <div className={`flex flex-col items-center w-full h-full font-galmuri`}>
+        <span className="text-white font-bitbit text-[24px] whitespace-pre-wrap text-center leading-tight mt-2 mb-40">{`${name}님이\n${nickName}님에게 남긴 편지에요\n이미지를 저장해보세요!`}</span>
+        <div
+          className={`flex flex-col items-center w-full h-full p-20  rounded-2xl  ${
+            isAdminMessage ? 'bg-main_blue text-dark_blue ' : 'bg-dark_green text-white'
+          }`}
+        >
+          <span
+            className={`text-[16px] px-14 py-8 ${
+              isAdminMessage ? 'bg-white' : 'bg-black '
+            } bg-opacity-50 rounded-4xl`}
+          >
+            {name}
+          </span>
+          <Image
+            src={defaultCakeTreeDataObject[cakeId].cakeImg}
+            alt="보낸 케이크 아바타 이미지"
+            width={160}
+          />
+          <span className="h-110 text-[14px] mb-13 text-center whitespace-pre-wrap ">
+            {message}
+          </span>
+
+          <div
+            className={`flex justify-between items-center w-full h-54 p-12 rounded-xl border  font-bitbit text-[16px] ${
+              isAdminMessage ? 'border-dark_blue' : 'border-main_blue'
+            }`}
+          >
+            <span className="font-galmuri">선물한 항목</span>
+            <span>
+              {isAdminMessage ? (
+                giftMenuId
+              ) : giftMenuId === 0 ? (
+                <>{'정성 담은 편지'}</>
+              ) : (
+                <>
+                  <div className="flex gap-4 items-center font-bitbit text-[16px] text-white">
+                    <Image
+                      src={presentListObject[Number(giftMenuId)].image}
+                      alt="선물한 선물 이미지"
+                      height={43}
+                    />
+                    {`${presentListObject[Number(giftMenuId)].itemName} ${convertMoneyText(
+                      presentListObject[Number(giftMenuId)].price.toString(),
+                    )}원`}
+                  </div>
+                </>
+              )}
+            </span>
+          </div>
+        </div>
+      </div>
+      {children}
+    </CloseTopModal>
+  );
+}
 
 export function MessageText({ children }: PropsWithChildren) {
   return (
@@ -23,9 +101,13 @@ export function WishesCreateTitleInputModalContainer({
   handleState: () => void;
 } & PropsWithChildren) {
   return (
-    <CloseIconInModal modalTitle="생일 잔치상 만들기" isOpen={isOpen} handleState={handleState}>
+    <CloseIconInModalWithVitaminCake
+      modalTitle="생일 잔치상 만들기"
+      isOpen={isOpen}
+      handleState={handleState}
+    >
       {children}
-    </CloseIconInModal>
+    </CloseIconInModalWithVitaminCake>
   );
 }
 
@@ -38,7 +120,7 @@ export function CakeTree({
   handleSelectOne: (id: number) => void;
   handleSetCakeData?: (cake: CakeTreeDataType) => void;
 }) {
-  const numberOfRows = Math.max(4, Math.ceil(cakeList.length / 3));
+  const numberOfRows = Math.max(4, Math.ceil(cakeList.length / 3 - 1));
 
   return (
     <div className="flex flex-col items-center w-full">
diff --git a/src/domain/wishes/container.tsx b/src/domain/wishes/container.tsx
index 2b8dc7a4..7d1f1e85 100644
--- a/src/domain/wishes/container.tsx
+++ b/src/domain/wishes/container.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { FixedBottomButtonWrapper } from '@/components/Common/Button/FixedBottomButton';
-import { CakeTree, WishesCreateTitleInputModalContainer } from './component';
+import { CakeMessageModalUI, CakeTree, WishesCreateTitleInputModalContainer } from './component';
 import {
   CakeTreeDataType,
   defaultCakeTreeDataObject,
@@ -16,16 +16,15 @@ import { PropsWithChildren, useEffect, useState } from 'react';
 import { CakePresentMessageDataType } from '@/types/api/response';
 import useSelectItem from '@/hooks/common/useSelectItem';
 import GradientShadow from '@/components/UI/GradientShadow';
-import CloseTopModal from '@/components/Common/Modal/CloseTopModal';
-import Image from 'next/image';
 import { getCakePresentMessage } from '@/api/cakes';
-import { presentListObject } from '@/constant/model/present';
+import ShareLinkModal from '@/components/Common/Modal/ShareLinkModal';
 
 type WishesPageGlobalStateType = {
   wishTitle: string;
   wishesTitleInputModalState: boolean;
   cakeMessageModalState: boolean;
   cakePresentMessageData: CakePresentMessageDataType & { isAdminMessage: boolean };
+  shareLinkModalState: boolean;
 };
 
 export default function WishesPageContainer({
@@ -38,6 +37,7 @@ export default function WishesPageContainer({
       wishTitle: '',
       wishesTitleInputModalState: false,
       cakeMessageModalState: false,
+      shareLinkModalState: false,
     },
   });
 
@@ -50,8 +50,6 @@ export default function WishesPageContainer({
         <WishesCreateTitleInputModal />
         {cakePresentMessageData && <CakeMessageModal nickName={nickName} />}
       </FormProvider>
-
-      <GradientShadow height={170} />
     </section>
   );
 }
@@ -61,9 +59,15 @@ export function WishesPageFixedBottomButton({ isWishProgress }: { isWishProgress
 
   const { setValue, watch } = useFormContext<WishesPageGlobalStateType>();
 
+  function handleShareLinkModalState() {
+    const modalState = watch('shareLinkModalState');
+
+    setValue('shareLinkModalState', !modalState);
+  }
+
   function handleButtonClick() {
     if (isWishProgress) {
-      handleRouter('/wishes');
+      handleShareLinkModalState();
     } else {
       handleChangeWishTitleModalState();
     }
@@ -108,6 +112,7 @@ export function CakesTreeMessage({
     if (dummyCakeId >= 0) {
       setValue('cakePresentMessageData', {
         ...defaultCakeTreeDataObject[dummyCakeId],
+        name: '선물주운영자',
         cakeId: dummyCakeId,
       });
     }
@@ -148,59 +153,23 @@ function CakeMessageModal({ nickName }: { nickName: string }) {
   const { setValue, getValues, watch } = useFormContext<WishesPageGlobalStateType>();
 
   const modalState = getValues('cakeMessageModalState');
-  const { cakeId, message, name, isAdminMessage, giftMenuId } = watch('cakePresentMessageData');
-
-  console.log(watch('cakePresentMessageData'));
+  const messageData = watch('cakePresentMessageData');
 
   function handleModalState() {
     setValue('cakeMessageModalState', !modalState);
   }
 
   return (
-    <CloseTopModal isOpen={modalState} handleState={handleModalState} bgColor={'background'}>
-      <div className={`flex flex-col items-center w-full h-full font-galmuri`}>
-        <span className="text-white font-bitbit text-[24px] whitespace-pre-wrap text-center leading-tight mt-2 mb-40">{`${name}님이\n${nickName}님에게 남긴 편지에요\n이미지를 저장해보세요!`}</span>
-        <div
-          className={`flex flex-col items-center w-full h-full p-20  rounded-2xl  ${
-            isAdminMessage ? 'bg-main_blue text-dark_blue ' : 'bg-dark_green text-white'
-          }`}
-        >
-          <span
-            className={`text-[16px] px-14 py-8 ${
-              isAdminMessage ? 'bg-white' : 'bg-black '
-            } bg-opacity-50 rounded-4xl`}
-          >
-            {name}
-          </span>
-          <Image
-            src={defaultCakeTreeDataObject[cakeId].cakeImg}
-            alt="보낸 케이크 아바타 이미지"
-            width={160}
-          />
-          <span className="h-110 text-[14px] mb-13 text-center whitespace-pre-wrap ">
-            {message}
-          </span>
-
-          <div
-            className={`flex justify-between items-center w-full h-54 p-12 rounded-xl border  font-bitbit text-[16px] ${
-              isAdminMessage ? 'border-dark_blue' : 'border-main_blue'
-            }`}
-          >
-            <span className="font-galmuri">선물한 항목</span>
-            <span>
-              {isAdminMessage
-                ? giftMenuId
-                : giftMenuId
-                ? presentListObject[giftMenuId].itemName
-                : '정성 담은 편지'}
-            </span>
-          </div>
-        </div>
-      </div>
+    <CakeMessageModalUI
+      modalState={modalState}
+      handleModalState={handleModalState}
+      messageData={messageData}
+      nickName={nickName}
+    >
       <FixedBottomButtonWrapper>
         <Button>이미지 저장하기</Button>
       </FixedBottomButtonWrapper>
-    </CloseTopModal>
+    </CakeMessageModalUI>
   );
 }
 
@@ -241,3 +210,26 @@ function WishesCreateTitleInputModal() {
     </WishesCreateTitleInputModalContainer>
   );
 }
+
+export function WishesLinkSnsShareModal({
+  wishId,
+  nickName,
+}: {
+  wishId: string;
+  nickName: string;
+}) {
+  const { setValue, watch } = useFormContext<WishesPageGlobalStateType>();
+  const modalState = watch('shareLinkModalState');
+
+  function handleShareLinkModalState() {
+    setValue('shareLinkModalState', !modalState);
+  }
+  return (
+    <ShareLinkModal
+      modalState={modalState}
+      handleModalState={handleShareLinkModalState}
+      wishId={wishId}
+      nickName={nickName}
+    />
+  );
+}
diff --git a/src/domain/wishes/create/container.tsx b/src/domain/wishes/create/container.tsx
index 9582ca48..6f6c763a 100644
--- a/src/domain/wishes/create/container.tsx
+++ b/src/domain/wishes/create/container.tsx
@@ -20,6 +20,7 @@ import WishesInputPreview from './wishesInputPreview';
 import { postWishes } from '@/api/wishes';
 import useToggle from '@/hooks/common/useToggle';
 import WishesLinkInputForm from './wishesLinkInputForm';
+import ShareLinkModal from '@/components/Common/Modal/ShareLinkModal';
 
 export default function WishesCreatePageContainer({
   step,
@@ -123,63 +124,15 @@ function SharePageFixedButtons() {
   );
 }
 
-//export function WishesCreatePageContaine({
-//   createStep,
-//   wishTitle,
-//   children,
-// }: {
-//   createStep: WishesCreateStepType;
-//   wishTitle?: string;
-// } & PropsWithChildren) {
-//   const wishesLinkInputMethods = useForm<WishesLinkDataResolverType>({
-//     mode: 'onChange',
-//     defaultValues: {
-//       ...wishesLinkInputInit,
-//     },
-//     resolver: yupResolver(wishesLinkDataResolver),
-//   });
+export function ShareSnsModal({ wishId, nickName }: { wishId: string; nickName: string }) {
+  const { state: modalState, handleState: handleModalState } = useToggle();
 
-//   const wishesAccountInputMethods = useForm<WishesAccountDataResolverType>({
-//     mode: 'onChange',
-//     defaultValues: {
-//       ...wishesAccountInputInit,
-//     },
-//     resolver: yupResolver(wishesAccountDataResolver),
-//   });
-
-//   useEffect(() => {
-//     if (wishTitle) {
-//       wishesLinkInputMethods.setValue('title', wishTitle);
-//     }
-//   }, [wishTitle]);
-
-//   return (
-//     <>
-//       {
-//         {
-//           account: (
-//             <>
-//               <WishesCreateTitleText>입금받을 계좌 입력하기</WishesCreateTitleText>
-//               {/* <WishesAccountInputForm
-//                 methods={wishesAccountInputMethods}
-//                 wishesPhoneMethods={wishesPhoneMethods}
-//               /> */}
-//             </>
-//           ),
-//           preview: (
-//             <>
-//               <WishesInputPreview methods={wishesLinkInputMethods} />
-//               <WishesPreviewSubmitButton linkDataMethods={wishesLinkInputMethods} />
-//             </>
-//           ),
-//           done: (
-//             <>
-//               {children}
-//               <SharePageFixedButtons />
-//             </>
-//           ),
-//         }[createStep]
-//       }
-//     </>
-//   );
-// }
+  return (
+    <ShareLinkModal
+      wishId={wishId}
+      nickName={nickName}
+      modalState={modalState}
+      handleModalState={handleModalState}
+    />
+  );
+}
diff --git a/src/domain/wishes/create/service.tsx b/src/domain/wishes/create/service.tsx
index d44ee015..0bec3397 100644
--- a/src/domain/wishes/create/service.tsx
+++ b/src/domain/wishes/create/service.tsx
@@ -5,6 +5,8 @@ import Image from 'next/image';
 import { SharePageCakeImg } from '../../../../public/assets/images';
 import { getUserAccount } from '@/api/user';
 import WishesAccountInputForm from './wishesAccountInputForm';
+import ShareLinkModal from '@/components/Common/Modal/ShareLinkModal';
+import { ShareSnsModal } from './container';
 
 export async function CenteredContent() {
   const progressWishesData = await getMainProgressWishesData();
@@ -34,6 +36,13 @@ export async function CenteredContent() {
   );
 }
 
+export async function ShareWishesLinkModal() {
+  const progressWishesData = await getMainProgressWishesData();
+  const { nickName } = await getLoginUserCookiesData();
+
+  return <ShareSnsModal wishId={progressWishesData.wishId} nickName={nickName} />;
+}
+
 export async function AccountInputWithSavedAccountData() {
   const savedUserAccountData = await getUserAccount();
 
diff --git a/src/domain/wishes/share/container.tsx b/src/domain/wishes/share/container.tsx
index eceaf282..c266cf68 100644
--- a/src/domain/wishes/share/container.tsx
+++ b/src/domain/wishes/share/container.tsx
@@ -4,7 +4,7 @@ import { PropsWithChildren } from 'react';
 import { useRouters } from '@/hooks/common/useRouters';
 import { FixedBottomButtonWrapper } from '@/components/Common/Button/FixedBottomButton';
 import Button from '@/components/Common/Button';
-import CloseIconInModal from '@/components/Common/Modal/CloseIconInModal';
+import CloseIconInModalWithVitaminCake from '@/components/Common/Modal/CloseIconInModalWithVitaminCake';
 import useToggle from '@/hooks/common/useToggle';
 
 export default function WishesSharePageContainer({ children }: {} & PropsWithChildren) {
@@ -13,7 +13,7 @@ export default function WishesSharePageContainer({ children }: {} & PropsWithChi
     <>
       {children}
       <SharePageFixedButtons />
-      {/* <CloseIconInModal isOpen={!state} handleState={handleState}></CloseIconInModal> */}
+      {/* <CloseIconInModalWithVitaminCake isOpen={!state} handleState={handleState}></CloseIconInModalWithVitaminCake> */}
     </>
   );
 }
diff --git a/src/hooks/common/useKakaoShare.ts b/src/hooks/common/useKakaoShare.ts
deleted file mode 100644
index 599241fc..00000000
--- a/src/hooks/common/useKakaoShare.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// export default function useKakaoShare(nickname: string, link: string) {
-//   if (window.Kakao) {
-//     window.Kakao.Share.sendDefault({
-//       objectType: 'feed',
-//       content: {
-//         title: `${nickname}님의 생일선물을 고민하고 있다면?`,
-//         description: `고민할 필요없이 이 귀여운 케이크를 선물해 ${nickname}님의 생일 펀딩에 참여해보세요!`,
-//         imageUrl: 'https://ifh.cc/g/wWJNBF.jpg',
-//         link: {
-//           mobileWebUrl: link,
-//           webUrl: link,
-//         },
-//       },
-//       buttons: [
-//         {
-//           title: '자세히 보기',
-//           link: {
-//             mobileWebUrl: link,
-//             webUrl: link,
-//           },
-//         },
-//       ],
-//     });
-//   }
-// }
diff --git a/src/hooks/common/useWatchFormValueList.ts b/src/hooks/common/useWatchFormValueList.ts
deleted file mode 100644
index 99a3f5c3..00000000
--- a/src/hooks/common/useWatchFormValueList.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Control, Path, useWatch } from 'react-hook-form';
-
-type WatchObjectType<T> = {
-  [K in keyof T as `${string & K}Watch`]: T[K];
-};
-
-export function useWatchTest<T extends object>(control: Control<T>): WatchObjectType<T> {
-  const objectKeys = Object.keys(control._defaultValues) as Array<Path<T>>; // Path<T> 타입으로 변환
-
-  const watchArrayValues = useWatch({
-    control,
-    name: [...objectKeys],
-  });
-
-  const watchObject = objectKeys.reduce((acc, key, index) => {
-    const watchKey = `${key}Watch` as keyof WatchObjectType<T>;
-    acc[watchKey] = watchArrayValues[index];
-    return acc;
-  }, {} as WatchObjectType<T>);
-
-  return watchObject;
-}
diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
index 39544d68..12bc5d3a 100644
--- a/src/layouts/MainLayout.tsx
+++ b/src/layouts/MainLayout.tsx
@@ -9,7 +9,7 @@ export default async function MainLayout({ children }: PropsWithChildren) {
   }
 
   return (
-    <main className="flex justify-center">
+    <main className="relative flex justify-center">
       <div className="w-full h-full px-22 min-w-375 max-w-500">{children}</div>
     </main>
   );