From f992519c8189c16abc8d78f9f5988727ca945b6c Mon Sep 17 00:00:00 2001 From: Soyeon Choe Date: Tue, 22 Oct 2024 17:16:00 +0900 Subject: [PATCH 1/4] =?UTF-8?q?fix:=20DropDown=EC=97=90=20Tap=20=EA=B8=80?= =?UTF-8?q?=EC=94=A8=EA=B0=80=20=EC=9C=84=EC=97=90=20=EC=9E=88=EB=8A=94=20?= =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/Design/token/zIndex.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/Design/token/zIndex.ts b/client/src/components/Design/token/zIndex.ts index fc32d97bc..f951dbae8 100644 --- a/client/src/components/Design/token/zIndex.ts +++ b/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, From ebcc114ca7edc40948e056766a32ce06b888ca5e Mon Sep 17 00:00:00 2001 From: Soyeon Choe Date: Tue, 22 Oct 2024 17:17:11 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20QR=EC=BD=94=EB=93=9C=EB=A1=9C=20?= =?UTF-8?q?=EC=B4=88=EB=8C=80=ED=95=98=EA=B8=B0=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EA=B5=AC=ED=98=84=20?= =?UTF-8?q?=EB=B0=8F=20navigate=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MobileShareEventButton.tsx | 12 +++++++ client/src/constants/routerUrls.ts | 1 + client/src/pages/QRCodePage/QRCodePage.tsx | 35 +++++++++++++++++++ client/src/router.tsx | 5 +++ 4 files changed, 53 insertions(+) create mode 100644 client/src/pages/QRCodePage/QRCodePage.tsx diff --git a/client/src/components/ShareEventButton/MobileShareEventButton.tsx b/client/src/components/ShareEventButton/MobileShareEventButton.tsx index 368dd611a..142aaffe4 100644 --- a/client/src/components/ShareEventButton/MobileShareEventButton.tsx +++ b/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; kakaoShare: () => void; @@ -16,10 +20,18 @@ const MobileShareEventButton = ({copyShare, kakaoShare}: MobileShareEventButtonP }); }; + const navigate = useNavigate(); + const eventId = getEventIdByUrl(); + + const navigateQRPage = () => { + navigate(`/event/${eventId}/qrcode`); + }; + return (
+
diff --git a/client/src/constants/routerUrls.ts b/client/src/constants/routerUrls.ts index e4cecc9d5..af3305706 100644 --- a/client/src/constants/routerUrls.ts +++ b/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', }; diff --git a/client/src/pages/QRCodePage/QRCodePage.tsx b/client/src/pages/QRCodePage/QRCodePage.tsx new file mode 100644 index 000000000..9c25ed79b --- /dev/null +++ b/client/src/pages/QRCodePage/QRCodePage.tsx @@ -0,0 +1,35 @@ +import {css} from '@emotion/react'; + +import {MainLayout, Top, TopNav} from '@components/Design'; + +const QRCodePage = () => { + return ( + + + + +
+ + + + +
+
QR코드가 들어감
+
+ + ); +}; + +export default QRCodePage; diff --git a/client/src/router.tsx b/client/src/router.tsx index 9969ce139..aae7b0f63 100644 --- a/client/src/router.tsx +++ b/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: , errorElement: , }, + { + path: ROUTER_URLS.qrCode, + element: , + }, { path: '*', element: , From fe34b2eddc860ae5c57ea1a79a0806f1add7b33d Mon Sep 17 00:00:00 2001 From: Soyeon Choe Date: Tue, 22 Oct 2024 17:56:21 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20qrcode.react=20=EB=9D=BC=EC=9D=B4?= =?UTF-8?q?=EB=B8=8C=EB=9F=AC=EB=A6=AC=EB=A5=BC=20=ED=99=9C=EC=9A=A9?= =?UTF-8?q?=ED=95=98=EC=97=AC=20=ED=96=89=EC=82=AC=20=EC=A0=91=EC=86=8D=20?= =?UTF-8?q?QR=EC=BD=94=EB=93=9C=20=EC=83=9D=EC=84=B1=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/package-lock.json | 9 +++++++++ client/package.json | 1 + .../src/pages/QRCodePage/QRCodePage.style.ts | 8 ++++++++ client/src/pages/QRCodePage/QRCodePage.tsx | 20 ++++++++++++------- 4 files changed, 31 insertions(+), 7 deletions(-) create mode 100644 client/src/pages/QRCodePage/QRCodePage.style.ts diff --git a/client/package-lock.json b/client/package-lock.json index db19fe1bc..2410cd49a 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -13,6 +13,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", @@ -19591,6 +19592,14 @@ } ] }, + "node_modules/qrcode.react": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.1.0.tgz", + "integrity": "sha512-uqXVIIVD/IPgWLYxbOczCNAQw80XCM/LulYDADF+g2xDsPj5OoRwSWtIS4jGyp295wyjKstfG1qIv/I2/rNWpQ==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/qs": { "version": "6.11.0", "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", diff --git a/client/package.json b/client/package.json index 059f75d8a..5b88a1330 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/pages/QRCodePage/QRCodePage.style.ts b/client/src/pages/QRCodePage/QRCodePage.style.ts new file mode 100644 index 000000000..aa8603b1a --- /dev/null +++ b/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; +`; diff --git a/client/src/pages/QRCodePage/QRCodePage.tsx b/client/src/pages/QRCodePage/QRCodePage.tsx index 9c25ed79b..3cbcb37d9 100644 --- a/client/src/pages/QRCodePage/QRCodePage.tsx +++ b/client/src/pages/QRCodePage/QRCodePage.tsx @@ -1,8 +1,18 @@ 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 ( @@ -21,13 +31,9 @@ const QRCodePage = () => {
-
QR코드가 들어감
-
+
+ +
); }; From e402fb521267df76abb11a2ef7caedbcfa0d42e2 Mon Sep 17 00:00:00 2001 From: Soyeon Choe Date: Tue, 22 Oct 2024 18:02:10 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=EB=8D=B0=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=ED=83=91=20=EC=B4=88=EB=8C=80=ED=95=98=EA=B8=B0=EB=A5=BC=20Dro?= =?UTF-8?q?pDown=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD=ED=95=98=EC=97=AC?= =?UTF-8?q?=20QR=EC=BD=94=EB=93=9C=20=EC=B4=88=EB=8C=80=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DesktopShareEventButton.tsx | 24 +++++++++++++++---- .../src/pages/EventPage/EventPageLayout.tsx | 2 +- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/client/src/components/ShareEventButton/DesktopShareEventButton.tsx b/client/src/components/ShareEventButton/DesktopShareEventButton.tsx index cf7408ad3..c66942f80 100644 --- a/client/src/components/ShareEventButton/DesktopShareEventButton.tsx +++ b/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> & { onCopy: () => Promise; }; -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 ( - +
+ + + + +
); }; diff --git a/client/src/pages/EventPage/EventPageLayout.tsx b/client/src/pages/EventPage/EventPageLayout.tsx index b8ae60a25..d46df5b11 100644 --- a/client/src/pages/EventPage/EventPageLayout.tsx +++ b/client/src/pages/EventPage/EventPageLayout.tsx @@ -65,7 +65,7 @@ const EventPageLayout = () => { {isMobile ? ( ) : ( - 정산 초대하기 + )}