[FE] QR코드로 초대하기 기능 추가

client/package.json

@@ -89,6 +89,7 @@
     "@emotion/react": "^11.11.4",
     "@sentry/react": "^8.25.0",
     "@tanstack/react-query": "^5.51.23",
+    "qrcode.react": "^4.1.0",
     "react": "^18.3.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.3.1",

client/src/components/Design/token/zIndex.ts

@@ -13,7 +13,7 @@ const BOTTOM_SHEET_DIMMED_LAYER = NUMBER_KEYBOARD_BOTTOM_SHEET + ABOVE;
 const BOTTOM_SHEET_CONTAINER = BOTTOM_SHEET_DIMMED_LAYER + ABOVE;
 const TOAST = BOTTOM_SHEET_CONTAINER + ABOVE;
 const SELECT_OPTION = ABOVE;
-const DROPDOWN_LIST = BASE + ABOVE;
+const DROPDOWN_LIST = TAB_TEXT + ABOVE;
 
 export const ZINDEX = {
   bottomSheetDimmedLayer: BOTTOM_SHEET_DIMMED_LAYER,

client/src/components/ShareEventButton/DesktopShareEventButton.tsx

@@ -1,12 +1,16 @@
+import {useNavigate} from 'react-router-dom';
+
 import toast from '@hooks/useToast/toast';
 
-import {Button} from '@components/Design';
+import {Dropdown, DropdownButton} from '@components/Design';
+
+import getEventIdByUrl from '@utils/getEventIdByUrl';
 
 type DesktopShareEventButtonProps = React.PropsWithChildren<React.HTMLAttributes<HTMLButtonElement>> & {
   onCopy: () => Promise<void>;
 };
 
-const DesktopShareEventButton = ({onCopy, children, ...buttonProps}: DesktopShareEventButtonProps) => {
+const DesktopShareEventButton = ({onCopy}: DesktopShareEventButtonProps) => {
   const copyAndToast = async () => {
     await onCopy();
     toast.confirm('링크가 복사되었어요 :) \n참여자들에게 링크를 공유해 주세요!', {
@@ -15,10 +19,20 @@ const DesktopShareEventButton = ({onCopy, children, ...buttonProps}: DesktopShar
     });
   };
 
+  const navigate = useNavigate();
+  const eventId = getEventIdByUrl();
+
+  const navigateQRPage = () => {
+    navigate(`/event/${eventId}/qrcode`);
+  };
+
   return (
-    <Button size="small" variants="tertiary" onClick={copyAndToast} style={{marginRight: '1rem'}} {...buttonProps}>
-      {children}
-    </Button>
+    <div style={{marginRight: '1rem'}}>
+      <Dropdown base="button" baseButtonText="정산 초대하기">
+        <DropdownButton text="링크 복사하기" onClick={copyAndToast} />
+        <DropdownButton text="QR코드로 초대하기" onClick={navigateQRPage} />
+      </Dropdown>
+    </div>
   );
 };
 

client/src/components/ShareEventButton/MobileShareEventButton.tsx

@@ -1,7 +1,11 @@
+import {useNavigate} from 'react-router-dom';
+
 import toast from '@hooks/useToast/toast';
 
 import {Dropdown, DropdownButton} from '@components/Design';
 
+import getEventIdByUrl from '@utils/getEventIdByUrl';
+
 type MobileShareEventButtonProps = {
   copyShare: () => Promise<void>;
   kakaoShare: () => void;
@@ -16,10 +20,18 @@ const MobileShareEventButton = ({copyShare, kakaoShare}: MobileShareEventButtonP
     });
   };
 
+  const navigate = useNavigate();
+  const eventId = getEventIdByUrl();
+
+  const navigateQRPage = () => {
+    navigate(`/event/${eventId}/qrcode`);
+  };
+
   return (
     <div style={{marginRight: '1rem'}}>
       <Dropdown base="button" baseButtonText="정산 초대하기">
         <DropdownButton text="링크 복사하기" onClick={copyAndToast} />
+        <DropdownButton text="QR코드로 초대하기" onClick={navigateQRPage} />
         <DropdownButton text="카카오톡으로 초대하기" onClick={kakaoShare} />
       </Dropdown>
     </div>

client/src/constants/routerUrls.ts

@@ -11,4 +11,5 @@ export const ROUTER_URLS = {
   images: '/event/:eventId/images',
   addImages: '/event/:eventId/admin/add-images',
   send: 'event/:eventId/:memberId/send',
+  qrCode: 'event/:eventId/qrcode',
 };

client/src/pages/EventPage/EventPageLayout.tsx

@@ -65,7 +65,7 @@ const EventPageLayout = () => {
         {isMobile ? (
           <MobileShareEventButton copyShare={trackLinkShare} kakaoShare={trackKakaoShare} />
         ) : (
-          <DesktopShareEventButton onCopy={trackLinkShare}>정산 초대하기</DesktopShareEventButton>
+          <DesktopShareEventButton onCopy={trackLinkShare} />
         )}
       </Flex>
       <Outlet context={outletContext} />

client/src/pages/QRCodePage/QRCodePage.style.ts

@@ -0,0 +1,8 @@
+import {css} from '@emotion/react';
+
+export const QRCodeStyle = () => css`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;

client/src/pages/QRCodePage/QRCodePage.tsx

@@ -0,0 +1,41 @@
+import {css} from '@emotion/react';
+import {QRCodeSVG} from 'qrcode.react';
+
+import {MainLayout, Top, TopNav} from '@components/Design';
+import {useTheme} from '@components/Design';
+
+import getEventPageUrlByEnvironment from '@utils/getEventPageUrlByEnvironment';
+import getEventIdByUrl from '@utils/getEventIdByUrl';
+
+import {QRCodeStyle} from './QRCodePage.style';
+
+const QRCodePage = () => {
+  const {theme} = useTheme();
+  const eventId = getEventIdByUrl();
+
+  return (
+    <MainLayout backgroundColor="white">
+      <TopNav>
+        <TopNav.Item displayName="뒤로가기" noEmphasis routePath="-1" />
+      </TopNav>
+      <div
+        css={css`
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+          padding: 1rem;
+        `}
+      >
+        <Top>
+          <Top.Line text="QR코드를 공유하여" emphasize={['QR코드']} />
+          <Top.Line text="참여자를 초대해 보세요" />
+        </Top>
+      </div>
+      <div css={QRCodeStyle()}>
+        <QRCodeSVG value={getEventPageUrlByEnvironment(eventId, 'home')} size={240} fgColor={`${theme.colors.black}`} />
+      </div>
+    </MainLayout>
+  );
+};
+
+export default QRCodePage;

client/src/router.tsx

@@ -24,6 +24,7 @@ const EditBillPage = lazy(() => import('@pages/EditBillPage/EditBillPage'));
 const Account = lazy(() => import('@pages/AccountPage/Account'));
 const ImagesPage = lazy(() => import('@pages/ImagesPage/ImagesPage'));
 const AddImagesPage = lazy(() => import('@pages/AddImagesPage/AddImagesPage'));
+const QRCodePage = lazy(() => import('@pages/QRCodePage/QRCodePage'));
 
 const router = createBrowserRouter([
   {
@@ -92,6 +93,10 @@ const router = createBrowserRouter([
         element: <SendPage />,
         errorElement: <SendErrorPage />,
       },
+      {
+        path: ROUTER_URLS.qrCode,
+        element: <QRCodePage />,
+      },
       {
         path: '*',
         element: <ErrorPage />,