안드로이드 등에서 복사가 되지 않는 문제 수정 (#421)

* chore: react-copy-to-clipboard 라이브러리 추가

* feat: copy link 컴포넌트 만들고 적용

* feat: 제거 - SurveyIdLoaded

* feat: 클립보드 로직 변경

* refactor: 사용하지 않는 부분 제거

package.json

@@ -87,6 +87,7 @@
     "@types/mixpanel-browser": "^2.38.1",
     "@types/node": "18.15.11",
     "@types/react": "18.0.35",
+    "@types/react-copy-to-clipboard": "^5",
     "@types/react-dom": "18.0.11",
     "@types/testing-library__jest-dom": "^5",
     "@typescript-eslint/eslint-plugin": "^5.58.0",
@@ -114,6 +115,7 @@
     "postcss": "^8.4.21",
     "postcss-syntax": "^0.36.2",
     "prettier": "^2.8.7",
+    "react-copy-to-clipboard": "^5.1.0",
     "storybook": "^7.0.6",
     "styled-jsx": "^5.1.2",
     "stylelint": "^15.10.1",

src/components/copyLink/CopyLink.tsx

@@ -0,0 +1,29 @@
+import { type PropsWithChildren } from 'react';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+
+import { BASE_URL } from '~/constants/url';
+
+interface Props {
+  copyText: string;
+  onCopy: () => void;
+}
+
+const CopyLink = ({ copyText, children, onCopy }: PropsWithChildren<Props>) => {
+  return (
+    <CopyToClipboard text={copyToClipBoardWithHostUrl(copyText)} onCopy={onCopy}>
+      {children}
+    </CopyToClipboard>
+  );
+};
+
+export default CopyLink;
+
+const copyToClipBoardWithHostUrl = (path: string) => {
+  if (typeof window === 'undefined') {
+    return `${BASE_URL}${path}`;
+  } else {
+    const { host } = window.location;
+
+    return `${host}${path}`;
+  }
+};

src/features/dna/DnaCta.tsx

@@ -3,10 +3,10 @@ import { useRouter } from 'next/router';
 import { css, type Theme } from '@emotion/react';
 
 import CTAButton from '~/components/button/CTAButton';
+import CopyLink from '~/components/copyLink/CopyLink';
 import useToast from '~/components/toast/useToast';
 import type useGetUserInfoBySurveyId from '~/hooks/api/user/useGetUserInfoBySurveyId';
 import { type DnaOwnerStatus } from '~/pages/dna/type';
-import { copyToClipBoardWithHost } from '~/utils/clipboard';
 import recordEvent from '~/utils/event';
 
 interface Props {
@@ -19,10 +19,8 @@ const DnaCta: FC<Props> = ({ surveyId, dnaOwnerStatus, userInfo }) => {
   const router = useRouter();
   const { fireToast } = useToast();
 
-  const onClickCopyCTA = () => {
+  const onClickLink = () => {
     recordEvent({ action: 'DNA 페이지 - 커리어 명함 링크 복사 클릭' });
-
-    copyToClipBoardWithHost(`/dna/${surveyId}`);
     fireToast({ content: `${userInfo?.nickname}님의 커리어 명함 링크가 복사되었어요`, higherThanCTA: true });
   };
 
@@ -35,7 +33,9 @@ const DnaCta: FC<Props> = ({ surveyId, dnaOwnerStatus, userInfo }) => {
   if (dnaOwnerStatus === 'current_user')
     return (
       <div css={wrapperCss}>
-        <CTAButton onClick={onClickCopyCTA}>공유하기</CTAButton>
+        <CopyLink copyText={`/dna/${surveyId}`} onCopy={onClickLink}>
+          <CTAButton>공유하기</CTAButton>
+        </CopyLink>
       </div>
     );
 

src/features/feedback/NewFeedbackCopyButton.tsx

@@ -1,10 +1,10 @@
 import { css, type Theme } from '@emotion/react';
 
+import CopyLink from '~/components/copyLink/CopyLink';
 import LinkIcon from '~/components/icons/LinkIcon';
 import Toast from '~/components/toast/Toast';
 import useToast from '~/components/toast/useToast';
 import { HEAD_2_BOLD } from '~/styles/typo';
-import { copyToClipBoardWithHost } from '~/utils/clipboard';
 
 interface Props {
   surveyId: string;
@@ -13,27 +13,29 @@ interface Props {
 const NewFeedbackCopyButton = ({ surveyId }: Props) => {
   const { fireToast } = useToast();
 
-  const onClick = () => {
-    copyToClipBoardWithHost(`/review/${surveyId}`);
-
+  const onCopyLink = () => {
     fireToast({
       content: (
         <>
           <LinkIcon />
           <Toast.Text>나의 질문 폼 링크가 복사되었어요</Toast.Text>
         </>
       ),
+      higherThanCTA: true,
     });
   };
 
   return (
-    <button type="button" css={buttonCss} onClick={onClick}>
-      <span css={titleCss}>나의 질문 폼 링크 공유하기</span>
-      <span css={spanCss}>
-        <LinkIcon fill="#677089" width={14} height={14} viewBox="0 0 24 24" />
-        질문 폼 복사
-      </span>
-    </button>
+    <CopyLink copyText={`/review/${surveyId}`} onCopy={onCopyLink}>
+      <button type="button" css={buttonCss}>
+        <span css={titleCss}>나의 질문 폼 링크 공유하기</span>
+
+        <span css={spanCss}>
+          <LinkIcon fill="#677089" width={14} height={14} viewBox="0 0 24 24" />
+          질문 폼 복사
+        </span>
+      </button>
+    </CopyLink>
   );
 };
 

src/pages/result/SurveyIdLoaded.tsx

@@ -5,6 +5,7 @@ import { m, type Variants } from 'framer-motion';
 
 import BottomSheet from '~/components/bottomSheet/BottomSheet';
 import CTAButton from '~/components/button/CTAButton';
+import CopyLink from '~/components/copyLink/CopyLink';
 import Softskill from '~/components/graphic/softskills/Softskill';
 import { type Softskills } from '~/components/graphic/softskills/type';
 import Header from '~/components/header/Header';
@@ -34,7 +35,6 @@ import useBoolean from '~/hooks/common/useBoolean';
 import useScrollLock from '~/hooks/common/useScrollLock';
 import { useScrollSpy } from '~/hooks/common/useScrollSpy';
 import { BODY_2_REGULAR, HEAD_1, HEAD_2_BOLD } from '~/styles/typo';
-import { copyToClipBoardWithHost } from '~/utils/clipboard';
 
 interface Props {
   surveyId: string;
@@ -43,12 +43,13 @@ interface Props {
 const PILL_COLORS: Color[] = ['bluegreen', 'pink', 'skyblue', 'yellowgreen', 'purple'];
 
 const SurveyIdLoaded = ({ surveyId }: Props) => {
+  const { fireToast } = useToast();
+
   const { isLoading: isFeedbackSummaryLoading, data: feedbackSummaryData } = useGetFeedbackSummaryBySurveyId(surveyId);
   const { isLoading: isReviewersSummaryLoading, data: reviewersSummaryData } =
     useGetReviewersSummaryBySurveyId(surveyId);
   const { isLoading: isAllDataLoading, data: allData } = useGetAllFeedbacksBySurveyId(surveyId);
   const tendencyCountData = getTendencyCount(allData);
-  const { fireToast } = useToast();
 
   const [isShowing, toggle, _, setFalse] = useBoolean(false);
   useScrollLock({ lock: isShowing });
@@ -63,9 +64,11 @@ const SurveyIdLoaded = ({ surveyId }: Props) => {
     setInnerWidth(limittedInnerWidth);
   }, []);
 
-  const onClickCTA = () => {
-    copyToClipBoardWithHost(`/review/${surveyId}`);
+  const moveToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
 
+  const onCopyLink = () => {
     fireToast({
       content: (
         <>
@@ -77,10 +80,6 @@ const SurveyIdLoaded = ({ surveyId }: Props) => {
     });
   };
 
-  const moveToTop = () => {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  };
-
   if (feedbackSummaryData && feedbackSummaryData.all_feedback_count < 1) {
     return (
       <>
@@ -95,9 +94,9 @@ const SurveyIdLoaded = ({ surveyId }: Props) => {
           <m.span css={bubbleSpanCss} variants={bubbleVariants}>
             더 많은 동료들에게 질문 폼 링크를 공유해 보세요!
           </m.span>
-          <CTAButton onClick={onClickCTA} color="blue">
-            공유하기
-          </CTAButton>
+          <CopyLink copyText={`/review/${surveyId}`} onCopy={onCopyLink}>
+            <CTAButton color="blue">공유하기</CTAButton>
+          </CopyLink>
         </m.div>
       </>
     );

src/pages/survey/link.page.tsx

@@ -1,8 +1,10 @@
+import { useEffect } from 'react';
 import Image from 'next/image';
 import { css, type Theme } from '@emotion/react';
 import { m } from 'framer-motion';
 
 import CTAButton from '~/components/button/CTAButton';
+import CopyLink from '~/components/copyLink/CopyLink';
 import LinkIcon from '~/components/icons/LinkIcon';
 import SEO from '~/components/SEO/SEO';
 import StaggerWrapper from '~/components/stagger/StaggerWrapper';
@@ -11,24 +13,23 @@ import useToast from '~/components/toast/useToast';
 import { fixedBottomCss } from '~/features/review/style';
 import { CTAVariants, fixedContainerCss } from '~/features/survey/styles';
 import useInternalRouter from '~/hooks/router/useInternalRouter';
-import { copyToClipBoardWithHost } from '~/utils/clipboard';
 
 const SurveyLinkPage = () => {
   const { fireToast } = useToast();
   const router = useInternalRouter();
+  const id = router.query.id;
 
-  const onNext = () => {
+  useEffect(() => {
     if (!router.isReady) {
-      throw new Error('잠시만 기다려주세요. ');
+      return;
     }
-    const id = router.query.id;
 
     if (!id) {
       throw new Error('잘못된 경로입니다.\nsurveyId가 없습니다.');
     }
+  }, [id, router]);
 
-    copyToClipBoardWithHost(`/review/${id}`);
-
+  const onCopyLink = () => {
     fireToast({
       content: (
         <>
@@ -58,9 +59,11 @@ const SurveyLinkPage = () => {
         </StaggerWrapper>
 
         <m.div css={fixedBottomCss} variants={CTAVariants} initial="initial" animate="animate" exit="exit">
-          <CTAButton color="blue" onClick={onNext}>
-            질문 폼 공유하기
-          </CTAButton>
+          <CopyLink copyText={`/review/${id}`} onCopy={onCopyLink}>
+            <CTAButton color="blue" disabled={!id}>
+              질문 폼 공유하기
+            </CTAButton>
+          </CopyLink>
         </m.div>
       </main>
     </>