From 95c202ef64d4350d0343c1c68428fdc4cd37e5a4 Mon Sep 17 00:00:00 2001 From: pakxe Date: Mon, 23 Dec 2024 03:20:24 +0900 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=98=EA=B2=8C=20depth=EA=B0=80=20=EA=B9=8A=EC=9D=80=20Even?= =?UTF-8?q?tId=20=ED=83=80=EC=9E=85=EC=9D=84=20flat=ED=95=98=EA=B2=8C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/apis/request/event.ts | 6 +++--- client/src/mocks/handlers/eventHandlers.ts | 2 +- client/src/types/serviceType.ts | 4 +--- 3 files changed, 5 insertions(+), 7 deletions(-) diff --git a/client/src/apis/request/event.ts b/client/src/apis/request/event.ts index 2113dac22..958a366b4 100644 --- a/client/src/apis/request/event.ts +++ b/client/src/apis/request/event.ts @@ -1,4 +1,4 @@ -import {CreatedEvents, Event, EventCreationData, EventId, EventName, User} from 'types/serviceType'; +import {CreatedEvents, Event, EventCreationData, EventName, User} from 'types/serviceType'; import {WithErrorHandlingStrategy} from '@errors/RequestGetError'; import {ADMIN_API_PREFIX, MEMBER_API_PREFIX, USER_API_PREFIX} from '@apis/endpointPrefix'; @@ -6,7 +6,7 @@ import {requestGet, requestPatch, requestPostWithResponse} from '@apis/fetcher'; import {WithEventId} from '@apis/withId.type'; export const requestPostGuestEvent = async (postEventArgs: EventCreationData) => { - return await requestPostWithResponse({ + return await requestPostWithResponse({ endpoint: `${USER_API_PREFIX}/guest`, body: { ...postEventArgs, @@ -15,7 +15,7 @@ export const requestPostGuestEvent = async (postEventArgs: EventCreationData) => }; export const requestPostUserEvent = async (eventName: EventName) => { - return await requestPostWithResponse({ + return await requestPostWithResponse({ endpoint: USER_API_PREFIX, body: { eventName, diff --git a/client/src/mocks/handlers/eventHandlers.ts b/client/src/mocks/handlers/eventHandlers.ts index 135be564c..124fc8741 100644 --- a/client/src/mocks/handlers/eventHandlers.ts +++ b/client/src/mocks/handlers/eventHandlers.ts @@ -38,7 +38,7 @@ export const eventHandler = [ ); } - const eventId: EventId = {eventId: 'mock-event-id'}; + const eventId: {eventId: EventId} = {eventId: 'mock-event-id'}; return HttpResponse.json(eventId, { status: 201, headers: { diff --git a/client/src/types/serviceType.ts b/client/src/types/serviceType.ts index 9fe568f93..42d29a82b 100644 --- a/client/src/types/serviceType.ts +++ b/client/src/types/serviceType.ts @@ -45,10 +45,8 @@ export interface MemberWithDeposited extends Member { export interface AllMembers { members: MemberWithDeposited[]; } -export interface EventId { - eventId: string; -} +export type EventId = string; export type EventName = string; export type Nickname = string; export type Password = string; From cd05817c5d620f9f2387cee0b2935c90082c2f64 Mon Sep 17 00:00:00 2001 From: pakxe Date: Mon, 23 Dec 2024 03:21:22 +0900 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20EventLoader=EA=B0=80=20EditAccoun?= =?UTF-8?q?tPage=EB=A5=BC=20=EB=82=B4=ED=8F=AC=ED=95=98=EB=A9=B0,=20?= =?UTF-8?q?=ED=97=A4=EB=8D=94=20UI=EB=B6=80=EB=B6=84=EC=9D=80=20=EA=B7=B8?= =?UTF-8?q?=20=EC=99=B8=20children=EC=97=90=EA=B2=8C=20=EA=B0=90=EC=8B=B8?= =?UTF-8?q?=EC=A7=80=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/router.tsx | 48 +++++++++++++++++++++++++------------------ 1 file changed, 28 insertions(+), 20 deletions(-) diff --git a/client/src/router.tsx b/client/src/router.tsx index 91875dca7..cd9f8296c 100644 --- a/client/src/router.tsx +++ b/client/src/router.tsx @@ -14,7 +14,7 @@ const UserEventLogin = lazy(() => import('@pages/event/[eventId]/admin/login/use const EventLoader = lazy(() => import('@components/Loader/EventLoader')); const AuthGate = lazy(() => import('@pages/event/[eventId]/admin/AuthGate')); -const EventPage = lazy(() => import('@pages/event/[eventId]/EventPageLayout')); +const EventPageLayout = lazy(() => import('@pages/event/[eventId]/EventPageLayout')); const SendPage = lazy(() => import('@pages/event/[eventId]/home/send/[memberId]/SendPage')); const MainPage = lazy(() => import('@pages/main/MainPage')); const HomePage = lazy(() => import('@pages/event/[eventId]/home/HomePage')); @@ -81,31 +81,39 @@ const router = createBrowserRouter([ path: ROUTER_URLS.event, element: ( }> - - - + ), children: [ { - path: ROUTER_URLS.eventManage, - element: ( - - - - ), + path: ROUTER_URLS.editAccount, + element: , }, { - path: ROUTER_URLS.home, - element: , - }, - { - path: ROUTER_URLS.guestEventLogin, - element: , - }, - { - path: ROUTER_URLS.userEventLogin, - element: , + path: '', + element: , + children: [ + { + path: ROUTER_URLS.eventManage, + element: ( + + + + ), + }, + { + path: ROUTER_URLS.home, + element: , + }, + { + path: ROUTER_URLS.guestEventLogin, + element: , + }, + { + path: ROUTER_URLS.userEventLogin, + element: , + }, + ], }, ], }, From f26674734c92164f457253dbd1dd121433ca5164 Mon Sep 17 00:00:00 2001 From: pakxe Date: Mon, 23 Dec 2024 03:22:00 +0900 Subject: [PATCH 03/10] =?UTF-8?q?feat:=20EventLoader=EC=9D=98=20=EB=82=B4?= =?UTF-8?q?=EB=B6=80=20=EB=A1=9C=EC=A7=81=EC=9D=84=20=EC=A0=9C=EA=B1=B0?= =?UTF-8?q?=ED=95=98=EA=B3=A0=20EventData=EB=A5=BC=20=EC=9C=84=ED=95=9C=20?= =?UTF-8?q?Provider=20=ED=98=B8=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/Loader/EventLoader.tsx | 55 +++++--------------- 1 file changed, 12 insertions(+), 43 deletions(-) diff --git a/client/src/components/Loader/EventLoader.tsx b/client/src/components/Loader/EventLoader.tsx index cb0ed39ed..57c06d2b3 100644 --- a/client/src/components/Loader/EventLoader.tsx +++ b/client/src/components/Loader/EventLoader.tsx @@ -1,50 +1,19 @@ -import {useSuspenseQueries} from '@tanstack/react-query'; -import {useEffect} from 'react'; +import {Outlet} from 'react-router-dom'; -import {requestGetEvent} from '@apis/request/event'; -import {requestGetReports} from '@apis/request/report'; -import {requestGetSteps} from '@apis/request/step'; -import {WithErrorHandlingStrategy} from '@errors/RequestGetError'; -import {requestGetAllMembers} from '@apis/request/member'; +import useEventLoader from '@hooks/useEventLoader'; -import {useTotalExpenseAmountStore} from '@store/totalExpenseAmountStore'; +import EventDataProvider from './EventDataProvider'; -import getEventIdByUrl from '@utils/getEventIdByUrl'; +const EventLoader = () => { + const eventData = useEventLoader(); -import QUERY_KEYS from '@constants/queryKeys'; - -const EventLoader = ({children, ...props}: React.PropsWithChildren = {}) => { - const eventId = getEventIdByUrl(); - - const queries = useSuspenseQueries({ - queries: [ - {queryKey: [QUERY_KEYS.event], queryFn: () => requestGetEvent({eventId, ...props})}, - { - queryKey: [QUERY_KEYS.reports], - queryFn: () => requestGetReports({eventId, ...props}), - }, - { - queryKey: [QUERY_KEYS.steps], - queryFn: () => requestGetSteps({eventId, ...props}), - }, - { - queryKey: [QUERY_KEYS.allMembers], - queryFn: () => requestGetAllMembers({eventId, ...props}), - }, - ], - }); - - const {updateTotalExpenseAmount} = useTotalExpenseAmountStore(); - - const stepsData = queries[2]; - - useEffect(() => { - if (stepsData.isSuccess && stepsData.data) { - updateTotalExpenseAmount(stepsData.data); - } - }, [stepsData.data, stepsData.isSuccess, updateTotalExpenseAmount]); - - return children; + return ( + <> + + + + + ); }; export default EventLoader; From 5940a0acc92400b0e6576dadd66a7abefb1b3984 Mon Sep 17 00:00:00 2001 From: pakxe Date: Mon, 23 Dec 2024 03:24:20 +0900 Subject: [PATCH 04/10] =?UTF-8?q?feat:=20EventPage=EB=93=A4=EC=9D=84=20?= =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81=ED=95=98=EA=B8=B0=20=EC=9C=84?= =?UTF-8?q?=ED=95=B4=20=ED=95=84=EC=9A=94=ED=95=9C=20=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=20=EC=9A=94=EC=B2=AD=EC=9D=84=20=EC=88=98=ED=96=89?= =?UTF-8?q?=ED=95=98=EB=8A=94=20=ED=9B=85=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/hooks/useEventLoader.ts | 62 ++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 client/src/hooks/useEventLoader.ts diff --git a/client/src/hooks/useEventLoader.ts b/client/src/hooks/useEventLoader.ts new file mode 100644 index 000000000..0e9149c7f --- /dev/null +++ b/client/src/hooks/useEventLoader.ts @@ -0,0 +1,62 @@ +import {useSuspenseQueries} from '@tanstack/react-query'; +import {useEffect} from 'react'; + +import {requestGetEvent} from '@apis/request/event'; +import {requestGetAllMembers} from '@apis/request/member'; +import {requestGetReports} from '@apis/request/report'; +import {requestGetSteps} from '@apis/request/step'; + +import {useTotalExpenseAmountStore} from '@store/totalExpenseAmountStore'; + +import getEventIdByUrl from '@utils/getEventIdByUrl'; + +import QUERY_KEYS from '@constants/queryKeys'; + +/** + * 이 훅이 하는 일: + * 이벤트 정보 불러오기 + 총액 상태 계산하기 + */ +const useEventLoader = () => { + const eventId = getEventIdByUrl(); + + const {updateTotalExpenseAmount} = useTotalExpenseAmountStore(); + + const queries = useSuspenseQueries({ + queries: [ + {queryKey: [QUERY_KEYS.event], queryFn: () => requestGetEvent({eventId})}, + { + queryKey: [QUERY_KEYS.reports], + queryFn: () => requestGetReports({eventId}), + }, + { + queryKey: [QUERY_KEYS.steps], + queryFn: () => requestGetSteps({eventId}), + }, + { + queryKey: [QUERY_KEYS.allMembers], + queryFn: () => requestGetAllMembers({eventId}), + }, + ], + }); + + const [eventData, reportsData, stepsData, membersData] = queries; + const {data, isSuccess} = stepsData; + + useEffect(() => { + if (isSuccess && data) { + updateTotalExpenseAmount(data); + } + }, [data, isSuccess]); + + const {eventName, bankName, accountNumber, createdByGuest} = eventData.data; + + return { + eventName, + bankName, + accountNumber, + createdByGuest, + eventToken: eventId, + }; +}; + +export default useEventLoader; From 9f935b84098a2047dd283671e0fcb83fd7672160 Mon Sep 17 00:00:00 2001 From: pakxe Date: Mon, 23 Dec 2024 03:24:37 +0900 Subject: [PATCH 05/10] =?UTF-8?q?feat:=20=EB=8D=B0=EC=9D=B4=ED=84=B0?= =?UTF-8?q?=EB=A5=BC=20=EC=84=9C=EB=B8=8C=20=ED=8A=B8=EB=A6=AC=EC=97=90=20?= =?UTF-8?q?=EB=BF=8C=EB=A6=AC=EA=B8=B0=20=EC=9C=84=ED=95=9C=20Provider=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Loader/EventDataProvider.tsx | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 client/src/components/Loader/EventDataProvider.tsx diff --git a/client/src/components/Loader/EventDataProvider.tsx b/client/src/components/Loader/EventDataProvider.tsx new file mode 100644 index 000000000..262d3d89e --- /dev/null +++ b/client/src/components/Loader/EventDataProvider.tsx @@ -0,0 +1,22 @@ +import {createContext, PropsWithChildren} from 'react'; + +import {Event, EventId} from 'types/serviceType'; + +import {useAuthStore} from '@store/authStore'; + +type EventDataContextType = Event & { + eventToken: EventId; + isAdmin: boolean; +}; + +type EventDataProviderProps = PropsWithChildren>; + +export const EventDataContext = createContext(null); + +const EventDataProvider = ({children, ...props}: EventDataProviderProps) => { + const {isAdmin} = useAuthStore(); + + return {children}; +}; + +export default EventDataProvider; From 763932845b148a9d1d54594ecd156f3564ef6fe9 Mon Sep 17 00:00:00 2001 From: pakxe Date: Mon, 23 Dec 2024 03:24:59 +0900 Subject: [PATCH 06/10] =?UTF-8?q?feat:=20=EC=9D=B4=EB=B2=A4=ED=8A=B8?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=82=AC=EC=9A=A9=ED=95=98=EB=8A=94=20?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=BB=A8=ED=85=8D=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=EB=A5=BC=20=EC=82=AC=EC=9A=A9=ED=95=98=EA=B8=B0=20?= =?UTF-8?q?=EC=9C=84=ED=95=9C=20=ED=9B=85=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/hooks/useEventDataContext.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 client/src/hooks/useEventDataContext.tsx diff --git a/client/src/hooks/useEventDataContext.tsx b/client/src/hooks/useEventDataContext.tsx new file mode 100644 index 000000000..4a6c70a3c --- /dev/null +++ b/client/src/hooks/useEventDataContext.tsx @@ -0,0 +1,15 @@ +import {useContext} from 'react'; + +import {EventDataContext} from '@components/Loader/EventDataProvider'; + +const useEventDataContext = () => { + const value = useContext(EventDataContext); + + if (!value) { + throw new Error('EventDataProvider와 함께 사용해주세요.'); + } + + return value; +}; + +export default useEventDataContext; From ed8090239d28dfc151ea50337931ec4f397e7168 Mon Sep 17 00:00:00 2001 From: pakxe Date: Mon, 23 Dec 2024 03:25:38 +0900 Subject: [PATCH 07/10] =?UTF-8?q?fix:=20=EC=A4=91=EB=B3=B5=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=ED=98=B8=EC=B6=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/hooks/useEventPageLayout.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/client/src/hooks/useEventPageLayout.ts b/client/src/hooks/useEventPageLayout.ts index 96d7c1fc1..b0c0c3ca2 100644 --- a/client/src/hooks/useEventPageLayout.ts +++ b/client/src/hooks/useEventPageLayout.ts @@ -1,17 +1,15 @@ -import {useAuthStore} from '@store/authStore'; import {useTotalExpenseAmountStore} from '@store/totalExpenseAmountStore'; import getEventIdByUrl from '@utils/getEventIdByUrl'; -import useRequestGetEvent from './queries/event/useRequestGetEvent'; import useRequestGetAllMembers from './queries/member/useRequestGetAllMembers'; import useRequestGetSteps from './queries/step/useRequestGetSteps'; import useRequestGetUserInfo from './queries/auth/useRequestGetUserInfo'; +import useEventDataContext from './useEventDataContext'; const useEventPageLayout = () => { const eventId = getEventIdByUrl(); - const {eventName, bankName, accountNumber, createdByGuest} = useRequestGetEvent(); - const {isAdmin} = useAuthStore(); + const {isAdmin, eventName, bankName, accountNumber, createdByGuest} = useEventDataContext(); const {totalExpenseAmount} = useTotalExpenseAmountStore(); const {members} = useRequestGetAllMembers(); const {steps} = useRequestGetSteps(); From 0b3310a45278da4b7bf06c484fe70dce1fe8626f Mon Sep 17 00:00:00 2001 From: pakxe Date: Mon, 23 Dec 2024 03:27:12 +0900 Subject: [PATCH 08/10] =?UTF-8?q?feat:=20outletContext=EA=B0=80=20?= =?UTF-8?q?=EC=95=84=EB=8B=8C=20context=20=EB=8D=B0=EC=9D=B4=ED=84=B0?= =?UTF-8?q?=EB=A5=BC=20=EC=82=AC=EC=9A=A9=ED=95=98=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/hooks/useAdminPage.ts | 7 ++----- client/src/hooks/useReportsPage.ts | 7 +++---- client/src/pages/event/[eventId]/EventPageLayout.tsx | 10 +++------- client/src/pages/event/[eventId]/home/HomePage.tsx | 8 ++++---- 4 files changed, 12 insertions(+), 20 deletions(-) diff --git a/client/src/hooks/useAdminPage.ts b/client/src/hooks/useAdminPage.ts index 8dd195101..1fd1e7bab 100644 --- a/client/src/hooks/useAdminPage.ts +++ b/client/src/hooks/useAdminPage.ts @@ -1,17 +1,14 @@ -import {useOutletContext} from 'react-router-dom'; - -import {EventPageContextProps} from '@pages/event/[eventId]/EventPageLayout'; - import {useTotalExpenseAmountStore} from '@store/totalExpenseAmountStore'; import getEventIdByUrl from '@utils/getEventIdByUrl'; import useRequestGetSteps from './queries/step/useRequestGetSteps'; import useBanner from './useBanner'; +import useEventDataContext from './useEventDataContext'; const useAdminPage = () => { const eventId = getEventIdByUrl(); - const {isAdmin, eventName, bankName, accountNumber} = useOutletContext(); + const {isAdmin, bankName, accountNumber, eventName} = useEventDataContext(); const {totalExpenseAmount} = useTotalExpenseAmountStore(); diff --git a/client/src/hooks/useReportsPage.ts b/client/src/hooks/useReportsPage.ts index 853ad4c39..6f5a892ce 100644 --- a/client/src/hooks/useReportsPage.ts +++ b/client/src/hooks/useReportsPage.ts @@ -1,12 +1,11 @@ import {useState} from 'react'; -import {useLocation, useNavigate, useOutletContext} from 'react-router-dom'; - -import {EventPageContextProps} from '@pages/event/[eventId]/EventPageLayout'; +import {useLocation, useNavigate} from 'react-router-dom'; import getEventBaseUrl from '@utils/getEventBaseUrl'; import {useSearchReports} from './useSearchReports'; import toast from './useToast/toast'; +import useEventDataContext from './useEventDataContext'; export type SendInfo = { bankName: string; @@ -18,7 +17,7 @@ export type SendInfo = { const useReportsPage = () => { const [memberName, setMemberName] = useState(''); - const {eventName, eventToken, bankName, accountNumber} = useOutletContext(); + const {eventName, eventToken, bankName, accountNumber} = useEventDataContext(); const {matchedReports, reports} = useSearchReports({memberName}); const location = useLocation(); diff --git a/client/src/pages/event/[eventId]/EventPageLayout.tsx b/client/src/pages/event/[eventId]/EventPageLayout.tsx index b4056bff2..e74e96880 100644 --- a/client/src/pages/event/[eventId]/EventPageLayout.tsx +++ b/client/src/pages/event/[eventId]/EventPageLayout.tsx @@ -26,12 +26,8 @@ export type EventPageContextProps = Event & { }; const EventPageLayout = () => { - const {isAdmin, event, eventId, eventSummary} = useEventPageLayout(); - const outletContext: EventPageContextProps = { - isAdmin, - eventToken: eventId, - ...event, - }; + const {event, eventSummary} = useEventPageLayout(); + const {trackShareEvent} = useAmplitude(); const isMobile = isMobileDevice(); @@ -82,7 +78,7 @@ const EventPageLayout = () => { )} - +