안드로이드 등에서 복사가 되지 않는 문제 수정 (#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>
  </>