Merge pull request #180 from Codeit-Part4-SFJs/jh/modal

feat: 비교하기 페이지 공유 버튼 구현
Codeit-Part4-SFJs · Jun 24, 2024 · d6db34b · d6db34b
2 parents 3d6fd5d + 68684ba
commit d6db34b
Show file tree

Hide file tree

Showing 2 changed files with 113 additions and 1 deletion.
diff --git a/src/components/Compare/ComparisonResult.tsx b/src/components/Compare/ComparisonResult.tsx
@@ -5,6 +5,7 @@ import { Button, ButtonKind } from '@/shared/ui/Button/Button';
 import { useRouter } from 'next/navigation';
 import { convertIdToCategory } from '@/shared/@common/utils';
 import { ProductDetailData } from './types';
+import { ShareIcon } from './ShareIcon';
 
 interface TableProps {
   firstProduct: ProductDetailData;
@@ -131,7 +132,10 @@ export const ComparisonResult = ({
           </p>
         )}
       </div>
-      <div className="mb-[100px]" />
+      <div className="flex mt-[60px] mb-[10px] w-full justify-end ">
+        <ShareIcon product1={firstProduct} product2={secondProduct} />
+      </div>
+
       <div className="border border-solid border-gray-35 rounded-xl w-[940px] h-[297px] bg-black-25 flex-shrink-0 md:w-[684px] md:h-[308px] md:text-sm mobile:w-[335px] mobile:h-[186px] mobile:text-xs">
         <table className="table-auto w-full h-full text-center">
           <thead className="w-full">

diff --git a/src/components/Compare/ShareIcon.tsx b/src/components/Compare/ShareIcon.tsx
@@ -0,0 +1,108 @@
+'use client';
+
+import { useState } from 'react';
+import { Icon } from '@/shared/ui/Icon';
+import { Toast } from '@/components/@common';
+import { usePathname } from 'next/navigation';
+import { ProductDetailData } from './types';
+
+declare global {
+  // eslint-disable-next-line no-unused-vars
+  interface Window {
+    Kakao: any;
+  }
+}
+
+interface ShareIconProps {
+  product1: ProductDetailData;
+  product2: ProductDetailData;
+}
+
+export const ShareIcon = ({ product1, product2 }: ShareIconProps) => {
+  const pathname = usePathname();
+
+  const url = `${process.env.NEXT_PUBLIC_FE_URL}${pathname}?product1=${product1.id}&product2=${product2.id}`;
+
+  const handleKakaoClick = () => {
+    if (!window.Kakao?.isInitialized()) {
+      window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY);
+    }
+
+    window.Kakao.Share.sendDefault({
+      objectType: 'feed',
+      content: {
+        title: 'WDYTA',
+        description: `지금 ${product1.name} 상품과 ${product2.name} 상품을 비교해보세요`,
+        imageUrl:
+          'https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/Mogazoa/user/168/1719131911147/123IMG_3465.png',
+        link: {
+          mobileWebUrl: url,
+          webUrl: url,
+        },
+      },
+      buttons: [
+        {
+          title: '상품 비교하러 가기',
+          link: {
+            mobileWebUrl: url,
+            webUrl: url,
+          },
+        },
+      ],
+    });
+  };
+
+  const [copyUrlStatus, setCopyUrlStatus] = useState('idle');
+
+  const handleUrlButtonClick = async (copyUrl: string) => {
+    setCopyUrlStatus('fetching');
+    try {
+      await navigator.clipboard.writeText(copyUrl);
+      setCopyUrlStatus('success');
+      setTimeout(() => {
+        setCopyUrlStatus('idle');
+      }, 3000);
+    } catch (error) {
+      setCopyUrlStatus('error');
+      setTimeout(() => {
+        setCopyUrlStatus('idle');
+      }, 3000);
+    }
+  };
+
+  return (
+    <div className="relative flex shrink-0 gap-[10px]">
+      <button
+        onClick={handleKakaoClick}
+        className="flex justify-center items-center bg-black-25 rounded-md mobile:w-[24px] mobile:h-[24px] md:w-[24px] md:h-[24px] lg:w-[28px] lg:h-[28px]"
+        type="button"
+      >
+        <Icon
+          name="KakaoIcon"
+          className="mobile:w-[14px] mobile:h-[14px] md:w-[14px] md:h-[14px] lg:w-[18px] lg:h-[18px] fill-gray-6E"
+        />
+      </button>
+      <button
+        className="flex justify-center items-center bg-black-25 rounded-md mobile:w-[24px] mobile:h-[24px] md:w-[24px] md:h-[24px] lg:w-[28px] lg:h-[28px] disabled:cursor-not-allowed"
+        type="button"
+        disabled={copyUrlStatus !== 'idle'}
+        onClick={() => handleUrlButtonClick(url)}
+      >
+        <Icon
+          name="ShareIcon"
+          className="mobile:w-[14px] mobile:h-[14px] md:w-[14px] md:h-[14px] lg:w-[18px] lg:h-[18px] fill-gray-6E"
+        />
+      </button>
+      {copyUrlStatus === 'success' && (
+        <div className="absolute mobile:top-[-70px] right-0 md:top-[-70px] lg:top-[-80px]">
+          <Toast text="URL이 복사되었습니다" />
+        </div>
+      )}
+      {copyUrlStatus === 'error' && (
+        <div className="absolute mobile:top-[-70px] right-0 md:top-[-70px] lg:top-[-80px]">
+          <Toast text="URL 복사에 실패했습니다" />
+        </div>
+      )}
+    </div>
+  );
+};