Merge branch 'fe-dev' into feature/#562

woowacourse-teams · Sep 21, 2024 · f01464b · f01464b
2 parents 33592a3 + 9bcbace
commit f01464b
Show file tree

Hide file tree

Showing 13 changed files with 203 additions and 39 deletions.
diff --git a/client/cypress/e2e/createEvent.cy.ts b/client/cypress/e2e/createEvent.cy.ts
@@ -1,6 +1,7 @@
 import CONSTANTS from '../constants/constants';
 beforeEach(() => {
   cy.blockSentry();
+  cy.blockKakao();
 });
 
 describe('Flow: 랜딩 페이지에서부터 이벤트를 생성 완료하는 flow', () => {

diff --git a/client/cypress/support/commands.ts b/client/cypress/support/commands.ts
@@ -21,6 +21,13 @@ Cypress.Commands.add('blockSentry', () => {
   cy.intercept('POST', /.*sentry.io\/api.*/, {statusCode: 200}).as('sentry');
 });
 
+Cypress.Commands.add('blockKakao', () => {
+  cy.intercept('GET', 'https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js', {
+    statusCode: 200,
+    body: '',
+  }).as('blockKakao');
+});
+
 Cypress.Commands.add('interceptAPI', ({type, delay = 0, statusCode = 200}: InterceptAPIProps) => {
   if (type === 'postEvent')
     cy.intercept(POST_EVENT, {
@@ -49,6 +56,7 @@ declare global {
   namespace Cypress {
     interface Chainable {
       blockSentry(): Chainable<void>;
+      blockKakao(): Chainable<void>;
       interceptAPI(props: InterceptAPIProps): Chainable<void>;
       createEventName(eventName: string): Chainable<void>;
     }

diff --git a/client/index.html b/client/index.html
@@ -25,6 +25,11 @@
         window.amplitude.init('<%= process.env.AMPLITUDE_KEY %>');
       });
     </script>
+    <script
+      src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js"
+      integrity="sha384-TiCUE00h649CAMonG018J2ujOgDKW/kVWlChEuu4jK2vxfAAD0eZxzCKakxg55G4"
+      crossorigin="anonymous"
+    ></script>
     <title>행동대장</title>
   </head>
   <body>

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -5,6 +5,7 @@ import {ReactQueryDevtools} from '@tanstack/react-query-devtools';
 import {ToastProvider} from '@hooks/useToast/ToastProvider';
 import QueryClientBoundary from '@components/QueryClientBoundary/QueryClientBoundary';
 import ErrorCatcher from '@components/AppErrorBoundary/ErrorCatcher';
+import KakaoInitializer from '@components/KakaoInitializer/KakaoInitializer';
 
 import {HDesignProvider} from '@HDesign/index';
 
@@ -23,7 +24,9 @@ const App: React.FC = () => {
             <QueryClientBoundary>
               <ReactQueryDevtools initialIsOpen={false} />
               <NetworkStateCatcher />
-              <Outlet />
+              <KakaoInitializer>
+                <Outlet />
+              </KakaoInitializer>
             </QueryClientBoundary>
           </ErrorCatcher>
         </ToastProvider>

diff --git a/client/src/components/KakaoInitializer/KakaoInitializer.tsx b/client/src/components/KakaoInitializer/KakaoInitializer.tsx
@@ -0,0 +1,15 @@
+import {useEffect} from 'react';
+
+const KakaoInitializer = ({children}: React.PropsWithChildren) => {
+  useEffect(() => {
+    if (!window.Kakao) return;
+
+    if (!window.Kakao.isInitialized()) {
+      window.Kakao.init(process.env.KAKAO_JAVASCRIPT_KEY);
+    }
+  }, []);
+
+  return children;
+};
+
+export default KakaoInitializer;
diff --git a/client/src/components/ShareEventButton/ShareEventButton.tsx b/client/src/components/ShareEventButton/ShareEventButton.tsx
@@ -0,0 +1,41 @@
+import CopyToClipboard from 'react-copy-to-clipboard';
+
+import {useToast} from '@hooks/useToast/useToast';
+
+import useShareEvent from '@hooks/useShareEvent';
+
+import {Button} from '@components/Design';
+
+import isMobileDevice from '@utils/isMobileDevice';
+
+const ShareEventButton = () => {
+  const {showToast} = useToast();
+
+  const isMobile = isMobileDevice();
+  const {shareText, onShareButtonClick} = useShareEvent(isMobile);
+
+  return isMobile ? (
+    <Button size="small" variants="secondary" onClick={onShareButtonClick}>
+      카카오톡으로 정산 초대하기
+    </Button>
+  ) : (
+    <CopyToClipboard
+      text={shareText}
+      onCopy={() =>
+        showToast({
+          showingTime: 3000,
+          message: '링크가 복사되었어요 :) \n참여자들에게 링크를 공유해 주세요!',
+          type: 'confirm',
+          position: 'bottom',
+          bottom: '8rem',
+        })
+      }
+    >
+      <Button size="small" variants="secondary" onClick={onShareButtonClick}>
+        정산 초대하기
+      </Button>
+    </CopyToClipboard>
+  );
+};
+
+export default ShareEventButton;
diff --git a/client/src/components/ShareEventButton/index.ts b/client/src/components/ShareEventButton/index.ts
@@ -0,0 +1 @@
+export {default as ShareEventButton} from './ShareEventButton';
diff --git a/client/src/global.d.ts b/client/src/global.d.ts
@@ -7,5 +7,6 @@ declare namespace NodeJS {
     // env keys
     readonly API_BASE_URL: string;
     readonly AMPLITUDE_KEY: string;
+    readonly KAKAO_JAVASCRIPT_KEY: string;
   }
 }
diff --git a/client/src/hooks/useEventPageLayout.ts b/client/src/hooks/useEventPageLayout.ts
@@ -0,0 +1,23 @@
+import {useMatch} from 'react-router-dom';
+
+import {ROUTER_URLS} from '@constants/routerUrls';
+
+import useNavSwitch from './useNavSwitch';
+import useRequestGetEvent from './queries/event/useRequestGetEvent';
+
+const useEventPageLayout = () => {
+  const navProps = useNavSwitch();
+  const {eventName} = useRequestGetEvent();
+
+  const isAdmin = useMatch(ROUTER_URLS.eventManage) !== null;
+  const isLoginPage = useMatch(ROUTER_URLS.eventLogin) !== null;
+
+  return {
+    navProps,
+    isAdmin,
+    eventName,
+    isLoginPage,
+  };
+};
+
+export default useEventPageLayout;
diff --git a/client/src/hooks/useShareEvent.ts b/client/src/hooks/useShareEvent.ts
@@ -0,0 +1,51 @@
+import getEventIdByUrl from '@utils/getEventIdByUrl';
+import getEventPageUrlByEnvironment from '@utils/getEventPageUrlByEnvironment';
+
+import useRequestGetEvent from './queries/event/useRequestGetEvent';
+
+const useShareEvent = (isMobile: boolean) => {
+  const {eventName} = useRequestGetEvent();
+
+  const eventId = getEventIdByUrl();
+  const url = getEventPageUrlByEnvironment(eventId, 'home');
+
+  const shareInfo = {
+    title: `[행동대장]\n${eventName}에 대한 정산을 시작할게요:)`,
+    text: '아래 링크에 접속해서 정산 내역을 확인해 주세요!',
+    url,
+  };
+
+  // 모바일이 아닌 기기는 단순 텍스트 복사
+  // 모바일 기기에서는 카카오톡 공유를 사용
+  const onShareButtonClick = () => {
+    if (!isMobile) return;
+
+    kakaoShare();
+  };
+
+  const kakaoShare = () => {
+    window.Kakao.Share.sendDefault({
+      objectType: 'feed',
+      content: {
+        title: shareInfo.title,
+        description: shareInfo.text,
+        imageUrl:
+          'https://wooteco-crew-wiki.s3.ap-northeast-2.amazonaws.com/%EC%9B%A8%EB%94%94%286%EA%B8%B0%29/g583lirp8yg.jpg',
+        link: {
+          mobileWebUrl: url,
+          webUrl: url,
+        },
+      },
+      buttonTitle: '정산 확인하기',
+    });
+  };
+
+  const shareText = `${shareInfo.title}\n${shareInfo.text}\n${url}`;
+
+  return {
+    shareText,
+    onShareButtonClick,
+  };
+};
+
+export default useShareEvent;
diff --git a/client/src/pages/EventPage/EventPageLayout.tsx b/client/src/pages/EventPage/EventPageLayout.tsx
@@ -1,61 +1,30 @@
-import {Outlet, useMatch} from 'react-router-dom';
-import CopyToClipboard from 'react-copy-to-clipboard';
+import {Outlet} from 'react-router-dom';
 
-import {useToast} from '@hooks/useToast/useToast';
-import useRequestGetEvent from '@hooks/queries/event/useRequestGetEvent';
+import useEventPageLayout from '@hooks/useEventPageLayout';
 
-import useNavSwitch from '@hooks/useNavSwitch';
+import {ShareEventButton} from '@components/ShareEventButton';
 
-import {MainLayout, TopNav, Switch, Button} from '@HDesign/index';
-
-import getEventIdByUrl from '@utils/getEventIdByUrl';
-import getEventPageUrlByEnvironment from '@utils/getEventPageUrlByEnvironment';
-
-import {ROUTER_URLS} from '@constants/routerUrls';
+import {MainLayout, TopNav, Switch} from '@HDesign/index';
 
 export type EventPageContextProps = {
   isAdmin: boolean;
   eventName: string;
 };
 
 const EventPageLayout = () => {
-  const {nav, paths, onChange} = useNavSwitch();
-  const {eventName} = useRequestGetEvent();
-  const eventId = getEventIdByUrl();
-
-  const isAdmin = useMatch(ROUTER_URLS.eventManage) !== null;
-  const isLoginPage = useMatch(ROUTER_URLS.eventLogin) !== null;
+  const {navProps, isAdmin, isLoginPage, eventName} = useEventPageLayout();
+  const {nav, paths, onChange} = navProps;
 
   const outletContext: EventPageContextProps = {
     isAdmin,
     eventName,
   };
 
-  const {showToast} = useToast();
-  const url = getEventPageUrlByEnvironment(eventId, 'home');
-
   return (
     <MainLayout backgroundColor="gray">
       <TopNav>
         <Switch value={nav} values={paths} onChange={onChange} />
-        {!isLoginPage && (
-          <CopyToClipboard
-            text={`[행동대장]\n"${eventName}"에 대한 정산을 시작할게요:)\n아래 링크에 접속해서 정산 내역을 확인해 주세요!\n${url}`}
-            onCopy={() =>
-              showToast({
-                showingTime: 3000,
-                message: '링크가 복사되었어요 :) \n참여자들에게 링크를 공유해 주세요!',
-                type: 'confirm',
-                position: 'bottom',
-                bottom: '8rem',
-              })
-            }
-          >
-            <Button size="small" variants="secondary">
-              정산 초대하기
-            </Button>
-          </CopyToClipboard>
-        )}
+        {!isLoginPage && <ShareEventButton />}
       </TopNav>
       <Outlet context={outletContext} />
     </MainLayout>

diff --git a/client/src/types/kakao.d.ts b/client/src/types/kakao.d.ts
@@ -0,0 +1,38 @@
+declare global {
+  interface Window {
+    Kakao: typeof Kakao;
+  }
+}
+
+namespace Kakao {
+  function init(appKey: string): void;
+  function isInitialized(): boolean;
+
+  namespace Share {
+    function cleanup(): void;
+    function sendDefault(params: sendDefaultParams): void;
+
+    interface sendDefaultParams {
+      objectType: 'feed';
+      content: {
+        title: string;
+        imageUrl: string;
+        imageWidth?: number;
+        imageHeight?: number;
+        description: string;
+        link: {
+          mobileWebUrl: string;
+          webUrl: string;
+        };
+      };
+      buttonTitle?: string;
+      buttons?: {
+        title: string;
+        link: {
+          webUrl: string;
+          mobileWebUrl: string;
+        };
+      }[];
+    }
+  }
+}
diff --git a/client/src/utils/isMobileDevice.ts b/client/src/utils/isMobileDevice.ts
@@ -0,0 +1,8 @@
+const isMobileDevice = () => {
+  const userAgent = window.navigator.userAgent;
+  const mobileRegex = [/Android/i, /iPhone/i, /iPad/i, /iPod/i, /BlackBerry/i, /Windows Phone/i];
+
+  return mobileRegex.some(mobile => userAgent.match(mobile));
+};
+
+export default isMobileDevice;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export {default as ShareEventButton} from './ShareEventButton';