[ feat ] 공유하기 모달 구현

Make-A-Wish-Sopt · Nov 20, 2024 · a74f606 · a74f606
1 parent 5382aeb
commit a74f606
Show file tree

Hide file tree

Showing 31 changed files with 457 additions and 499 deletions.
diff --git a/public/assets/icons/closeSmallIc.svg b/public/assets/icons/closeSmallIc.svg
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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>
+  );
+}