From 96f5608a39e51fd88c90f8dfdf76714faf1fa672 Mon Sep 17 00:00:00 2001 From: Doeunnkimm Date: Sun, 25 Aug 2024 14:08:15 +0900 Subject: [PATCH 1/4] =?UTF-8?q?fix:=20meetingId=EB=A5=BC=20params=20?= =?UTF-8?q?=EC=B2=98=EB=A6=AC=20=EB=B0=8F=20=EA=B8=B0=EC=A1=B4=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EA=B1=B7=EC=96=B4=EB=82=B4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../answers/most-selected/page.tsx | 7 +++---- .../[questionId]/answers/page.tsx | 7 +++---- .../answers/same-selected/page.tsx | 7 +++---- .../question-result/[questionId]/page.tsx | 7 +++---- .../[questionId]/statistics/page.tsx | 7 +++---- .../common/hooks/useConvertTypeParams.ts | 20 +++++++++++++++++++ .../src/result/common/types/BaseParams.ts | 7 ++++--- .../list/containers/AnswerListContainer.tsx | 9 +++------ .../containers/MostSelectedListContainer.tsx | 9 +++------ .../containers/SelectedSameListContainer.tsx | 9 +++------ .../list/screens/AnswerListScreen.tsx | 17 +++++++--------- .../list/screens/MostSelectedListScreen.tsx | 18 ++++++----------- .../list/screens/SelectedSameListScreen.tsx | 20 +++++++------------ .../components/SelectedDataCard/Content.tsx | 12 ++++++----- .../main/containers/HeaderContainer.tsx | 9 +++------ .../main/containers/MostAnsweredContainer.tsx | 11 ++++------ .../containers/WithMyMembersContainer.tsx | 9 +++------ .../main/screens/ResultMainScreen.tsx | 17 +++++----------- .../containers/StatisticsContainer.tsx | 10 ++++------ .../statistics/screens/StatisticsScreen.tsx | 4 ++-- 20 files changed, 96 insertions(+), 120 deletions(-) rename apps/web/app/{ => [meetingId]}/question-result/[questionId]/answers/most-selected/page.tsx (68%) rename apps/web/app/{ => [meetingId]}/question-result/[questionId]/answers/page.tsx (67%) rename apps/web/app/{ => [meetingId]}/question-result/[questionId]/answers/same-selected/page.tsx (68%) rename apps/web/app/{ => [meetingId]}/question-result/[questionId]/page.tsx (68%) rename apps/web/app/{ => [meetingId]}/question-result/[questionId]/statistics/page.tsx (67%) create mode 100644 packages/web-domains/src/result/common/hooks/useConvertTypeParams.ts diff --git a/apps/web/app/question-result/[questionId]/answers/most-selected/page.tsx b/apps/web/app/[meetingId]/question-result/[questionId]/answers/most-selected/page.tsx similarity index 68% rename from apps/web/app/question-result/[questionId]/answers/most-selected/page.tsx rename to apps/web/app/[meetingId]/question-result/[questionId]/answers/most-selected/page.tsx index 42d258b3..61fc9e46 100644 --- a/apps/web/app/question-result/[questionId]/answers/most-selected/page.tsx +++ b/apps/web/app/[meetingId]/question-result/[questionId]/answers/most-selected/page.tsx @@ -2,16 +2,15 @@ import { MostSelectedListScreen } from '@sambad/web-domains/result'; interface QuestionResultPageProps { params: { + meetingId: string; questionId: string; }; } const QuestionResultPage = (props: QuestionResultPageProps) => { - const { - params: { questionId }, - } = props; + const { params } = props; - return ; + return ; }; export default QuestionResultPage; diff --git a/apps/web/app/question-result/[questionId]/answers/page.tsx b/apps/web/app/[meetingId]/question-result/[questionId]/answers/page.tsx similarity index 67% rename from apps/web/app/question-result/[questionId]/answers/page.tsx rename to apps/web/app/[meetingId]/question-result/[questionId]/answers/page.tsx index 61e71e07..facd1bf5 100644 --- a/apps/web/app/question-result/[questionId]/answers/page.tsx +++ b/apps/web/app/[meetingId]/question-result/[questionId]/answers/page.tsx @@ -2,16 +2,15 @@ import { AnswerListScreen } from '@sambad/web-domains/result'; interface QuestionResultPageProps { params: { + meetingId: string; questionId: string; }; } const AnswersPage = (props: QuestionResultPageProps) => { - const { - params: { questionId }, - } = props; + const { params } = props; - return ; + return ; }; export default AnswersPage; diff --git a/apps/web/app/question-result/[questionId]/answers/same-selected/page.tsx b/apps/web/app/[meetingId]/question-result/[questionId]/answers/same-selected/page.tsx similarity index 68% rename from apps/web/app/question-result/[questionId]/answers/same-selected/page.tsx rename to apps/web/app/[meetingId]/question-result/[questionId]/answers/same-selected/page.tsx index 60762c90..1155f2ee 100644 --- a/apps/web/app/question-result/[questionId]/answers/same-selected/page.tsx +++ b/apps/web/app/[meetingId]/question-result/[questionId]/answers/same-selected/page.tsx @@ -2,16 +2,15 @@ import { SelectedSameListScreen } from '@sambad/web-domains/result'; interface QuestionResultPageProps { params: { + meetingId: string; questionId: string; }; } const QuestionResultPage = (props: QuestionResultPageProps) => { - const { - params: { questionId }, - } = props; + const { params } = props; - return ; + return ; }; export default QuestionResultPage; diff --git a/apps/web/app/question-result/[questionId]/page.tsx b/apps/web/app/[meetingId]/question-result/[questionId]/page.tsx similarity index 68% rename from apps/web/app/question-result/[questionId]/page.tsx rename to apps/web/app/[meetingId]/question-result/[questionId]/page.tsx index a81824dd..19c35501 100644 --- a/apps/web/app/question-result/[questionId]/page.tsx +++ b/apps/web/app/[meetingId]/question-result/[questionId]/page.tsx @@ -2,16 +2,15 @@ import { ResultMainScreen } from '@sambad/web-domains/result'; interface QuestionResultPageProps { params: { + meetingId: string; questionId: string; }; } const QuestionResultPage = (props: QuestionResultPageProps) => { - const { - params: { questionId }, - } = props; + const { params } = props; - return ; + return ; }; export default QuestionResultPage; diff --git a/apps/web/app/question-result/[questionId]/statistics/page.tsx b/apps/web/app/[meetingId]/question-result/[questionId]/statistics/page.tsx similarity index 67% rename from apps/web/app/question-result/[questionId]/statistics/page.tsx rename to apps/web/app/[meetingId]/question-result/[questionId]/statistics/page.tsx index eb2e0e2b..84b9f66f 100644 --- a/apps/web/app/question-result/[questionId]/statistics/page.tsx +++ b/apps/web/app/[meetingId]/question-result/[questionId]/statistics/page.tsx @@ -2,16 +2,15 @@ import { StatisticsScreen } from '@sambad/web-domains/result'; interface QuestionResultPageProps { params: { + meetingId: string; questionId: string; }; } const StatisticsPage = (props: QuestionResultPageProps) => { - const { - params: { questionId }, - } = props; + const { params } = props; - return ; + return ; }; export default StatisticsPage; diff --git a/packages/web-domains/src/result/common/hooks/useConvertTypeParams.ts b/packages/web-domains/src/result/common/hooks/useConvertTypeParams.ts new file mode 100644 index 00000000..6cf2cce8 --- /dev/null +++ b/packages/web-domains/src/result/common/hooks/useConvertTypeParams.ts @@ -0,0 +1,20 @@ +import { useParams } from 'next/navigation'; + +type Params = { + [key: string]: string | string[]; +}; + +const convertValue = (value: string | number | string[]) => { + if (Array.isArray(value)) { + return value.map((item) => (!isNaN(Number(item)) ? Number(item) : item)); + } + return value !== undefined && !isNaN(Number(value)) ? Number(value) : value; +}; + +export const useConvertTypeParams = () => { + const params = useParams(); + + const converted = Object.entries(params).map(([key, value]) => [key, convertValue(value)]); + + return Object.fromEntries(converted); +}; diff --git a/packages/web-domains/src/result/common/types/BaseParams.ts b/packages/web-domains/src/result/common/types/BaseParams.ts index f34664ab..424e4fbb 100644 --- a/packages/web-domains/src/result/common/types/BaseParams.ts +++ b/packages/web-domains/src/result/common/types/BaseParams.ts @@ -1,3 +1,4 @@ -export interface BaseParams { - questionId: number; -} +export type BaseParams = { + questionId: string; + meetingId: string; +}; diff --git a/packages/web-domains/src/result/features/list/containers/AnswerListContainer.tsx b/packages/web-domains/src/result/features/list/containers/AnswerListContainer.tsx index 132d00ad..5e02db8d 100644 --- a/packages/web-domains/src/result/features/list/containers/AnswerListContainer.tsx +++ b/packages/web-domains/src/result/features/list/containers/AnswerListContainer.tsx @@ -4,16 +4,13 @@ import { Fragment } from 'react'; import { ActionBar } from '@/common/components/ActionBar/ActionBar'; import { useGetAnswers } from '@/result/common/apis/queries/useGetAnswers'; -import { useGetMeetings } from '@/result/common/apis/queries/useGetMeetings'; +import { useConvertTypeParams } from '@/result/common/hooks/useConvertTypeParams'; import { BaseParams } from '@/result/common/types/BaseParams'; import { MemberList } from '../components'; -export const AnswerListContainer = (params: BaseParams) => { - const { questionId } = params; - const { data: meetingsIdsData } = useGetMeetings(); - // NOTE: 현재 스팩에서는 하나의 모임에만 가입할 수 있습니다. - const meetingId = meetingsIdsData?.meetings[0]?.meetingId || -1; +export const AnswerListContainer = () => { + const { meetingId, questionId } = useConvertTypeParams(); const { data } = useGetAnswers({ meetingId, questionId }); return ( diff --git a/packages/web-domains/src/result/features/list/containers/MostSelectedListContainer.tsx b/packages/web-domains/src/result/features/list/containers/MostSelectedListContainer.tsx index dedcef3a..7e50c944 100644 --- a/packages/web-domains/src/result/features/list/containers/MostSelectedListContainer.tsx +++ b/packages/web-domains/src/result/features/list/containers/MostSelectedListContainer.tsx @@ -3,17 +3,14 @@ import { Fragment } from 'react'; import { ActionBar } from '@/common/components/ActionBar/ActionBar'; -import { useGetMeetings } from '@/result/common/apis/queries/useGetMeetings'; import { useGetMostSelected } from '@/result/common/apis/queries/useGetMostSelected'; +import { useConvertTypeParams } from '@/result/common/hooks/useConvertTypeParams'; import { BaseParams } from '@/result/common/types/BaseParams'; import { MemberList } from '../components'; -export const MostSelectedListContainer = (params: BaseParams) => { - const { questionId } = params; - const { data: meetingsIdsData } = useGetMeetings(); - // NOTE: 현재 스팩에서는 하나의 모임에만 가입할 수 있습니다. - const meetingId = meetingsIdsData?.meetings[0]?.meetingId || -1; +export const MostSelectedListContainer = () => { + const { meetingId, questionId } = useConvertTypeParams(); const { data } = useGetMostSelected({ meetingId, questionId }); return ( diff --git a/packages/web-domains/src/result/features/list/containers/SelectedSameListContainer.tsx b/packages/web-domains/src/result/features/list/containers/SelectedSameListContainer.tsx index 807ef5f3..e3f41848 100644 --- a/packages/web-domains/src/result/features/list/containers/SelectedSameListContainer.tsx +++ b/packages/web-domains/src/result/features/list/containers/SelectedSameListContainer.tsx @@ -3,17 +3,14 @@ import { Fragment } from 'react'; import { ActionBar } from '@/common/components/ActionBar/ActionBar'; -import { useGetMeetings } from '@/result/common/apis/queries/useGetMeetings'; import { useGetSameSelected } from '@/result/common/apis/queries/useGetSameSelected'; +import { useConvertTypeParams } from '@/result/common/hooks/useConvertTypeParams'; import { BaseParams } from '@/result/common/types/BaseParams'; import { MemberList } from '../components'; -export const SelectedSameListContainer = (params: BaseParams) => { - const { questionId } = params; - const { data: meetingsIdsData } = useGetMeetings(); - // NOTE: 현재 스팩에서는 하나의 모임에만 가입할 수 있습니다. - const meetingId = meetingsIdsData?.meetings[0]?.meetingId || -1; +export const SelectedSameListContainer = () => { + const { meetingId, questionId } = useConvertTypeParams(); const { data } = useGetSameSelected({ meetingId, questionId }); return ( diff --git a/packages/web-domains/src/result/features/list/screens/AnswerListScreen.tsx b/packages/web-domains/src/result/features/list/screens/AnswerListScreen.tsx index 986787ae..74db0322 100644 --- a/packages/web-domains/src/result/features/list/screens/AnswerListScreen.tsx +++ b/packages/web-domains/src/result/features/list/screens/AnswerListScreen.tsx @@ -1,8 +1,7 @@ import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query'; import { getAnswersPrefetch } from '@/result/common/apis/queries/useGetAnswers'; -import { getMeetingsPrefetch, MEETINGS_QUERY_KEY } from '@/result/common/apis/queries/useGetMeetings'; -import { MeetingResponse } from '@/result/common/apis/schema/MeetingResponse'; +import { getMeetingsPrefetch } from '@/result/common/apis/queries/useGetMeetings'; import { BaseParams } from '@/result/common/types/BaseParams'; import { AnswerListContainer } from '../containers/AnswerListContainer'; @@ -12,7 +11,7 @@ export const AnswerListScreen = async (params: BaseParams) => { return ( - + ); }; @@ -22,14 +21,12 @@ const getServerSideProps = async (params: BaseParams) => { try { await getMeetingsPrefetch({ queryClient }); - const data = queryClient.getQueryData([MEETINGS_QUERY_KEY]); - const meetingId = data?.meetings[0]?.meetingId; - if (!meetingId) { - throw new Error('No meetingId found'); - } - - await getAnswersPrefetch({ queryClient, meetingId, questionId: params.questionId }); + await getAnswersPrefetch({ + queryClient, + meetingId: Number(params.meetingId), + questionId: Number(params.questionId), + }); } catch (error) { console.error(error); } diff --git a/packages/web-domains/src/result/features/list/screens/MostSelectedListScreen.tsx b/packages/web-domains/src/result/features/list/screens/MostSelectedListScreen.tsx index 7a7d3a41..f4c30517 100644 --- a/packages/web-domains/src/result/features/list/screens/MostSelectedListScreen.tsx +++ b/packages/web-domains/src/result/features/list/screens/MostSelectedListScreen.tsx @@ -1,8 +1,7 @@ import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query'; -import { getMeetingsPrefetch, MEETINGS_QUERY_KEY } from '@/result/common/apis/queries/useGetMeetings'; +import { getMeetingsPrefetch } from '@/result/common/apis/queries/useGetMeetings'; import { getMostSelectedPrefetch } from '@/result/common/apis/queries/useGetMostSelected'; -import { MeetingResponse } from '@/result/common/apis/schema/MeetingResponse'; import { BaseParams } from '@/result/common/types/BaseParams'; import { MostSelectedListContainer } from '../containers/MostSelectedListContainer'; @@ -22,16 +21,11 @@ const getServerSideProps = async (params: BaseParams) => { try { await getMeetingsPrefetch({ queryClient }); - const data = queryClient.getQueryData([MEETINGS_QUERY_KEY]); - const meetingId = data?.meetings[0]?.meetingId; - - if (!meetingId) { - throw new Error('No meetingId found'); - } - - const prefetchParams = { queryClient, meetingId, questionId: params.questionId }; - - await getMostSelectedPrefetch(prefetchParams); + await getMostSelectedPrefetch({ + queryClient, + meetingId: Number(params.meetingId), + questionId: Number(params.questionId), + }); } catch (error) { console.error(error); } diff --git a/packages/web-domains/src/result/features/list/screens/SelectedSameListScreen.tsx b/packages/web-domains/src/result/features/list/screens/SelectedSameListScreen.tsx index ae035615..43a1d4ae 100644 --- a/packages/web-domains/src/result/features/list/screens/SelectedSameListScreen.tsx +++ b/packages/web-domains/src/result/features/list/screens/SelectedSameListScreen.tsx @@ -1,8 +1,7 @@ import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query'; -import { getMeetingsPrefetch, MEETINGS_QUERY_KEY } from '@/result/common/apis/queries/useGetMeetings'; +import { getMeetingsPrefetch } from '@/result/common/apis/queries/useGetMeetings'; import { getSameSelectedPrefetch } from '@/result/common/apis/queries/useGetSameSelected'; -import { MeetingResponse } from '@/result/common/apis/schema/MeetingResponse'; import { BaseParams } from '@/result/common/types/BaseParams'; import { SelectedSameListContainer } from '../containers/SelectedSameListContainer'; @@ -12,7 +11,7 @@ export const SelectedSameListScreen = async (params: BaseParams) => { return ( - + ); }; @@ -22,16 +21,11 @@ const getServerSideProps = async (params: BaseParams) => { try { await getMeetingsPrefetch({ queryClient }); - const data = queryClient.getQueryData([MEETINGS_QUERY_KEY]); - const meetingId = data?.meetings[0]?.meetingId; - - if (!meetingId) { - throw new Error('No meetingId found'); - } - - const prefetchParams = { queryClient, meetingId, questionId: params.questionId }; - - await getSameSelectedPrefetch(prefetchParams); + await getSameSelectedPrefetch({ + queryClient, + meetingId: Number(params.meetingId), + questionId: Number(params.questionId), + }); } catch (error) { console.error(error); } diff --git a/packages/web-domains/src/result/features/main/components/SelectedDataCard/Content.tsx b/packages/web-domains/src/result/features/main/components/SelectedDataCard/Content.tsx index 484a4d92..80b30771 100644 --- a/packages/web-domains/src/result/features/main/components/SelectedDataCard/Content.tsx +++ b/packages/web-domains/src/result/features/main/components/SelectedDataCard/Content.tsx @@ -3,9 +3,11 @@ import { Button, Icon, Txt } from '@sambad/sds/components'; import { colors } from '@sambad/sds/theme'; import Link from 'next/link'; -import { useParams } from 'next/navigation'; import { Fragment } from 'react/jsx-runtime'; +import { useConvertTypeParams } from '@/result/common/hooks/useConvertTypeParams'; +import { BaseParams } from '@/result/common/types/BaseParams'; + import { SadUserIcon } from '../../assets'; import { CountByMemberList } from './CountByMemberList'; @@ -24,7 +26,7 @@ interface MostAnsweredProps { } export const MostAnswered = (props: MostAnsweredProps) => { - const params = useParams<{ questionId: string }>(); + const { meetingId, questionId } = useConvertTypeParams(); const { contents: contentsFromProps } = props; const contentText = contentsFromProps?.join(', '); @@ -34,7 +36,7 @@ export const MostAnswered = (props: MostAnsweredProps) => { {contentText} - + @@ -49,7 +51,7 @@ interface WithMeMembersProps { } export const WithMeMembers = (props: WithMeMembersProps) => { - const params = useParams<{ questionId: string }>(); + const { meetingId, questionId } = useConvertTypeParams(); const { count = 0, members } = props; const noMembers = count === 0; @@ -79,7 +81,7 @@ export const WithMeMembers = (props: WithMeMembersProps) => { )} diff --git a/packages/web-domains/src/result/features/main/containers/HeaderContainer.tsx b/packages/web-domains/src/result/features/main/containers/HeaderContainer.tsx index f4051423..830cc2a5 100644 --- a/packages/web-domains/src/result/features/main/containers/HeaderContainer.tsx +++ b/packages/web-domains/src/result/features/main/containers/HeaderContainer.tsx @@ -1,15 +1,12 @@ 'use client'; import { useGetDetailedQuestionData } from '@/result/common/apis/queries/useGetDetailedQuestionData'; -import { useGetMeetings } from '@/result/common/apis/queries/useGetMeetings'; import { HeaderBanner } from '@/result/common/components/HeaderBanner/HeaderBanner'; +import { useConvertTypeParams } from '@/result/common/hooks/useConvertTypeParams'; import { BaseParams } from '@/result/common/types/BaseParams'; -export const HeaderContainer = (params: BaseParams) => { - const { questionId } = params; - const { data: meetingsIdsData } = useGetMeetings(); - // NOTE: 현재 스팩에서는 하나의 모임에만 가입할 수 있습니다. - const meetingId = meetingsIdsData?.meetings[0]?.meetingId || -1; +export const HeaderContainer = () => { + const { meetingId, questionId } = useConvertTypeParams(); const { data } = useGetDetailedQuestionData({ meetingId, questionId }); return ; diff --git a/packages/web-domains/src/result/features/main/containers/MostAnsweredContainer.tsx b/packages/web-domains/src/result/features/main/containers/MostAnsweredContainer.tsx index b236128d..e3224085 100644 --- a/packages/web-domains/src/result/features/main/containers/MostAnsweredContainer.tsx +++ b/packages/web-domains/src/result/features/main/containers/MostAnsweredContainer.tsx @@ -1,17 +1,14 @@ 'use client'; -import { useGetMeetings } from '@/result/common/apis/queries/useGetMeetings'; import { useGetMostSelected } from '@/result/common/apis/queries/useGetMostSelected'; import { Section } from '@/result/common/components'; +import { useConvertTypeParams } from '@/result/common/hooks/useConvertTypeParams'; import { BaseParams } from '@/result/common/types/BaseParams'; import { MostAnswered, CountByMemberList } from '../components'; -export const MostAnsweredContainers = (params: BaseParams) => { - const { questionId } = params; - const { data: meetingsIdsData } = useGetMeetings(); - // NOTE: 현재 스팩에서는 하나의 모임에만 가입할 수 있습니다. - const meetingId = meetingsIdsData?.meetings[0]?.meetingId || -1; +export const MostAnsweredContainers = () => { + const { meetingId, questionId } = useConvertTypeParams(); const { data } = useGetMostSelected({ meetingId, questionId }); // NOTE: 홍길동님 외 N명 <- 에서 홍길동 자리에 위치시킬 이름 @@ -25,7 +22,7 @@ export const MostAnsweredContainers = (params: BaseParams) => { showName={showName} count={data?.count} profileUrls={profileUrls} - href={`/question-result/${questionId}/answers/most-selected`} + href={`/${meetingId}/question-result/${questionId}/answers/most-selected`} /> ); diff --git a/packages/web-domains/src/result/features/main/containers/WithMyMembersContainer.tsx b/packages/web-domains/src/result/features/main/containers/WithMyMembersContainer.tsx index adab80e0..b479f57b 100644 --- a/packages/web-domains/src/result/features/main/containers/WithMyMembersContainer.tsx +++ b/packages/web-domains/src/result/features/main/containers/WithMyMembersContainer.tsx @@ -3,18 +3,15 @@ import { colors, size } from '@sambad/sds/theme'; import { Fragment } from 'react/jsx-runtime'; -import { useGetMeetings } from '@/result/common/apis/queries/useGetMeetings'; import { useGetSameSelected } from '@/result/common/apis/queries/useGetSameSelected'; import { Section } from '@/result/common/components'; +import { useConvertTypeParams } from '@/result/common/hooks/useConvertTypeParams'; import { BaseParams } from '@/result/common/types/BaseParams'; import { WithMeMembers } from '../components'; -export const WithMyMembersContainers = (params: BaseParams) => { - const { questionId } = params; - const { data: meetingsIdsData } = useGetMeetings(); - // NOTE: 현재 스팩에서는 하나의 모임에만 가입할 수 있습니다. - const meetingId = meetingsIdsData?.meetings[0]?.meetingId || -1; +export const WithMyMembersContainers = () => { + const { meetingId, questionId } = useConvertTypeParams(); const { data } = useGetSameSelected({ meetingId, questionId }); const answered = data?.content?.join(', '); diff --git a/packages/web-domains/src/result/features/main/screens/ResultMainScreen.tsx b/packages/web-domains/src/result/features/main/screens/ResultMainScreen.tsx index 3768f105..b6a1786d 100644 --- a/packages/web-domains/src/result/features/main/screens/ResultMainScreen.tsx +++ b/packages/web-domains/src/result/features/main/screens/ResultMainScreen.tsx @@ -2,10 +2,9 @@ import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query import { getCommentsPrefetch } from '@/result/common/apis/queries/useGetComments'; import { getDetailedQuestionDataPrefetch } from '@/result/common/apis/queries/useGetDetailedQuestionData'; -import { getMeetingsPrefetch, MEETINGS_QUERY_KEY } from '@/result/common/apis/queries/useGetMeetings'; +import { getMeetingsPrefetch } from '@/result/common/apis/queries/useGetMeetings'; import { getMostSelectedPrefetch } from '@/result/common/apis/queries/useGetMostSelected'; import { getSameSelectedPrefetch } from '@/result/common/apis/queries/useGetSameSelected'; -import { MeetingResponse } from '@/result/common/apis/schema/MeetingResponse'; import { BaseLayout } from '@/result/common/components'; import { BaseParams } from '@/result/common/types/BaseParams'; @@ -16,9 +15,9 @@ export const ResultMainScreen = async (params: BaseParams) => { return ( - }> - - + }> + + @@ -30,14 +29,8 @@ const getServerSideProps = async (params: BaseParams) => { try { await getMeetingsPrefetch({ queryClient }); - const data = queryClient.getQueryData([MEETINGS_QUERY_KEY]); - const meetingId = data?.meetings[0]?.meetingId; - if (!meetingId) { - throw new Error('No meetingId found'); - } - - const prefetchParams = { queryClient, meetingId, questionId: params.questionId }; + const prefetchParams = { queryClient, meetingId: Number(params.meetingId), questionId: Number(params.questionId) }; await Promise.all([ getMostSelectedPrefetch(prefetchParams), diff --git a/packages/web-domains/src/result/features/statistics/containers/StatisticsContainer.tsx b/packages/web-domains/src/result/features/statistics/containers/StatisticsContainer.tsx index d73378c5..452d6820 100644 --- a/packages/web-domains/src/result/features/statistics/containers/StatisticsContainer.tsx +++ b/packages/web-domains/src/result/features/statistics/containers/StatisticsContainer.tsx @@ -3,17 +3,15 @@ import { borderRadiusVariants, colors } from '@sambad/sds/theme'; import { Fragment } from 'react'; -import { useGetMeetings } from '@/result/common/apis/queries/useGetMeetings'; import { useGetStatistics } from '@/result/common/apis/queries/useGetStatistics'; +import { useConvertTypeParams } from '@/result/common/hooks/useConvertTypeParams'; import { BaseParams } from '@/result/common/types/BaseParams'; import { RankListHeader, RankListItem } from '../components'; -export const StatisticsContainer = (params: BaseParams) => { - const { data: meetingsIdsData } = useGetMeetings(); - // NOTE: 현재 스팩에서는 하나의 모임에만 가입할 수 있습니다. - const meetingId = meetingsIdsData?.meetings[0]?.meetingId || -1; - const { data } = useGetStatistics({ meetingId, questionId: params.questionId }); +export const StatisticsContainer = () => { + const { meetingId, questionId } = useConvertTypeParams(); + const { data } = useGetStatistics({ meetingId, questionId: questionId }); const style = { backgroundColor: colors.white, diff --git a/packages/web-domains/src/result/features/statistics/screens/StatisticsScreen.tsx b/packages/web-domains/src/result/features/statistics/screens/StatisticsScreen.tsx index fdd6bc8f..2d15c5e3 100644 --- a/packages/web-domains/src/result/features/statistics/screens/StatisticsScreen.tsx +++ b/packages/web-domains/src/result/features/statistics/screens/StatisticsScreen.tsx @@ -6,8 +6,8 @@ import { StatisticsContainer } from '../containers/StatisticsContainer'; export const StatisticsScreen = (params: BaseParams) => { return ( - }> - + }> + ); }; From 7c2adc71e121236d6b4dfd5ba45366dcfda08ade Mon Sep 17 00:00:00 2001 From: Doeunnkimm Date: Sun, 25 Aug 2024 14:12:16 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20statistics=20=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A6=B0=20server=20side=20fetching?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../statistics/screens/StatisticsScreen.tsx | 27 ++++++++++++++++--- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/packages/web-domains/src/result/features/statistics/screens/StatisticsScreen.tsx b/packages/web-domains/src/result/features/statistics/screens/StatisticsScreen.tsx index 2d15c5e3..24bac330 100644 --- a/packages/web-domains/src/result/features/statistics/screens/StatisticsScreen.tsx +++ b/packages/web-domains/src/result/features/statistics/screens/StatisticsScreen.tsx @@ -1,13 +1,32 @@ +import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query'; + +import { getStatisticsPrefetch } from '@/result/common/apis/queries/useGetStatistics'; import { BaseLayout } from '@/result/common/components'; import { BaseParams } from '@/result/common/types/BaseParams'; import { HeaderContainer } from '../../main/containers'; import { StatisticsContainer } from '../containers/StatisticsContainer'; -export const StatisticsScreen = (params: BaseParams) => { +export const StatisticsScreen = async (params: BaseParams) => { + const { queryClient } = await getServerSideProps(params); + return ( - }> - - + + }> + + + ); }; + +const getServerSideProps = async (params: BaseParams) => { + const queryClient = new QueryClient(); + + try { + getStatisticsPrefetch({ queryClient, meetingId: Number(params.meetingId), questionId: Number(params.questionId) }); + } catch (error) { + console.error(error); + } + + return { queryClient }; +}; From 3453da2791c252874db3b91ecbdbc7c3532b03c9 Mon Sep 17 00:00:00 2001 From: Doeunnkimm Date: Sun, 25 Aug 2024 14:15:26 +0900 Subject: [PATCH 3/4] fix: meetingId fetching -> params --- .../features/list/screens/MostSelectedListScreen.tsx | 2 +- .../features/main/containers/CommentListContainer.tsx | 9 +++------ .../result/features/main/screens/ResultMainScreen.tsx | 2 +- 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/web-domains/src/result/features/list/screens/MostSelectedListScreen.tsx b/packages/web-domains/src/result/features/list/screens/MostSelectedListScreen.tsx index f4c30517..3e84b57b 100644 --- a/packages/web-domains/src/result/features/list/screens/MostSelectedListScreen.tsx +++ b/packages/web-domains/src/result/features/list/screens/MostSelectedListScreen.tsx @@ -11,7 +11,7 @@ export const MostSelectedListScreen = async (params: BaseParams) => { return ( - + ); }; diff --git a/packages/web-domains/src/result/features/main/containers/CommentListContainer.tsx b/packages/web-domains/src/result/features/main/containers/CommentListContainer.tsx index 2c6a15ac..9a37f013 100644 --- a/packages/web-domains/src/result/features/main/containers/CommentListContainer.tsx +++ b/packages/web-domains/src/result/features/main/containers/CommentListContainer.tsx @@ -3,17 +3,14 @@ import { size } from '@sambad/sds/theme'; import { useGetComments } from '@/result/common/apis/queries/useGetComments'; -import { useGetMeetings } from '@/result/common/apis/queries/useGetMeetings'; import { Section } from '@/result/common/components'; +import { useConvertTypeParams } from '@/result/common/hooks/useConvertTypeParams'; import { BaseParams } from '@/result/common/types/BaseParams'; import { Comment } from '../components'; -export const CommentListContainer = (params: BaseParams) => { - const { questionId } = params; - const { data: meetingsIdsData } = useGetMeetings(); - // NOTE: 현재 스팩에서는 하나의 모임에만 가입할 수 있습니다. - const meetingId = meetingsIdsData?.meetings[0]?.meetingId || -1; +export const CommentListContainer = () => { + const { meetingId, questionId } = useConvertTypeParams(); const { data: comments } = useGetComments({ meetingId, questionId }); if (!comments?.contents?.length) return null; diff --git a/packages/web-domains/src/result/features/main/screens/ResultMainScreen.tsx b/packages/web-domains/src/result/features/main/screens/ResultMainScreen.tsx index b6a1786d..67d708fd 100644 --- a/packages/web-domains/src/result/features/main/screens/ResultMainScreen.tsx +++ b/packages/web-domains/src/result/features/main/screens/ResultMainScreen.tsx @@ -18,7 +18,7 @@ export const ResultMainScreen = async (params: BaseParams) => { }> - + ); From 3ccdf5c9d2af968d08a152856bdf9e0bbc5c4dbb Mon Sep 17 00:00:00 2001 From: Doeunnkimm Date: Sun, 25 Aug 2024 14:18:45 +0900 Subject: [PATCH 4/4] =?UTF-8?q?chore:=20meetings=20fetching=20=ED=95=98?= =?UTF-8?q?=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EB=AA=A8=EB=91=90=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/apis/queries/useGetMeetings.ts | 38 ------------------- .../common/apis/schema/MeetingResponse.ts | 3 -- .../list/screens/AnswerListScreen.tsx | 3 -- .../list/screens/MostSelectedListScreen.tsx | 2 - .../list/screens/SelectedSameListScreen.tsx | 2 - .../main/screens/ResultMainScreen.tsx | 4 -- 6 files changed, 52 deletions(-) delete mode 100644 packages/web-domains/src/result/common/apis/queries/useGetMeetings.ts delete mode 100644 packages/web-domains/src/result/common/apis/schema/MeetingResponse.ts diff --git a/packages/web-domains/src/result/common/apis/queries/useGetMeetings.ts b/packages/web-domains/src/result/common/apis/queries/useGetMeetings.ts deleted file mode 100644 index effd2dd2..00000000 --- a/packages/web-domains/src/result/common/apis/queries/useGetMeetings.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { QueryClient, useQuery, UseQueryOptions } from '@tanstack/react-query'; - -import { Http } from '@/common/apis/base.api'; - -import { MeetingResponse } from '../schema/MeetingResponse'; - -interface QueryProps { - options?: UseQueryOptions; -} - -export const MEETINGS_QUERY_KEY = 'MEETINGS_QUERY_KEY'; - -const queryFn = () => Http.GET(`/v1/meetings`); - -export const useGetMeetings = (props: QueryProps = {}) => { - const { options } = props; - - return useQuery({ - queryKey: [MEETINGS_QUERY_KEY], - queryFn, - ...options, - }); -}; - -interface PrefetchProps { - queryClient: QueryClient; -} - -export const getMeetingsPrefetch = (props: PrefetchProps) => { - const { queryClient } = props; - - const prefetch = queryClient.prefetchQuery({ - queryKey: [MEETINGS_QUERY_KEY], - queryFn, - }); - - return prefetch; -}; diff --git a/packages/web-domains/src/result/common/apis/schema/MeetingResponse.ts b/packages/web-domains/src/result/common/apis/schema/MeetingResponse.ts deleted file mode 100644 index 048d0087..00000000 --- a/packages/web-domains/src/result/common/apis/schema/MeetingResponse.ts +++ /dev/null @@ -1,3 +0,0 @@ -export interface MeetingResponse { - meetings: Array<{ meetingId: number; name: string }>; -} diff --git a/packages/web-domains/src/result/features/list/screens/AnswerListScreen.tsx b/packages/web-domains/src/result/features/list/screens/AnswerListScreen.tsx index 74db0322..7d6e0d49 100644 --- a/packages/web-domains/src/result/features/list/screens/AnswerListScreen.tsx +++ b/packages/web-domains/src/result/features/list/screens/AnswerListScreen.tsx @@ -1,7 +1,6 @@ import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query'; import { getAnswersPrefetch } from '@/result/common/apis/queries/useGetAnswers'; -import { getMeetingsPrefetch } from '@/result/common/apis/queries/useGetMeetings'; import { BaseParams } from '@/result/common/types/BaseParams'; import { AnswerListContainer } from '../containers/AnswerListContainer'; @@ -20,8 +19,6 @@ const getServerSideProps = async (params: BaseParams) => { const queryClient = new QueryClient(); try { - await getMeetingsPrefetch({ queryClient }); - await getAnswersPrefetch({ queryClient, meetingId: Number(params.meetingId), diff --git a/packages/web-domains/src/result/features/list/screens/MostSelectedListScreen.tsx b/packages/web-domains/src/result/features/list/screens/MostSelectedListScreen.tsx index 3e84b57b..1aadf8f3 100644 --- a/packages/web-domains/src/result/features/list/screens/MostSelectedListScreen.tsx +++ b/packages/web-domains/src/result/features/list/screens/MostSelectedListScreen.tsx @@ -1,6 +1,5 @@ import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query'; -import { getMeetingsPrefetch } from '@/result/common/apis/queries/useGetMeetings'; import { getMostSelectedPrefetch } from '@/result/common/apis/queries/useGetMostSelected'; import { BaseParams } from '@/result/common/types/BaseParams'; @@ -20,7 +19,6 @@ const getServerSideProps = async (params: BaseParams) => { const queryClient = new QueryClient(); try { - await getMeetingsPrefetch({ queryClient }); await getMostSelectedPrefetch({ queryClient, meetingId: Number(params.meetingId), diff --git a/packages/web-domains/src/result/features/list/screens/SelectedSameListScreen.tsx b/packages/web-domains/src/result/features/list/screens/SelectedSameListScreen.tsx index 43a1d4ae..f0e8f607 100644 --- a/packages/web-domains/src/result/features/list/screens/SelectedSameListScreen.tsx +++ b/packages/web-domains/src/result/features/list/screens/SelectedSameListScreen.tsx @@ -1,6 +1,5 @@ import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query'; -import { getMeetingsPrefetch } from '@/result/common/apis/queries/useGetMeetings'; import { getSameSelectedPrefetch } from '@/result/common/apis/queries/useGetSameSelected'; import { BaseParams } from '@/result/common/types/BaseParams'; @@ -20,7 +19,6 @@ const getServerSideProps = async (params: BaseParams) => { const queryClient = new QueryClient(); try { - await getMeetingsPrefetch({ queryClient }); await getSameSelectedPrefetch({ queryClient, meetingId: Number(params.meetingId), diff --git a/packages/web-domains/src/result/features/main/screens/ResultMainScreen.tsx b/packages/web-domains/src/result/features/main/screens/ResultMainScreen.tsx index 67d708fd..c8dd7ed1 100644 --- a/packages/web-domains/src/result/features/main/screens/ResultMainScreen.tsx +++ b/packages/web-domains/src/result/features/main/screens/ResultMainScreen.tsx @@ -2,7 +2,6 @@ import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query import { getCommentsPrefetch } from '@/result/common/apis/queries/useGetComments'; import { getDetailedQuestionDataPrefetch } from '@/result/common/apis/queries/useGetDetailedQuestionData'; -import { getMeetingsPrefetch } from '@/result/common/apis/queries/useGetMeetings'; import { getMostSelectedPrefetch } from '@/result/common/apis/queries/useGetMostSelected'; import { getSameSelectedPrefetch } from '@/result/common/apis/queries/useGetSameSelected'; import { BaseLayout } from '@/result/common/components'; @@ -28,10 +27,7 @@ const getServerSideProps = async (params: BaseParams) => { const queryClient = new QueryClient(); try { - await getMeetingsPrefetch({ queryClient }); - const prefetchParams = { queryClient, meetingId: Number(params.meetingId), questionId: Number(params.questionId) }; - await Promise.all([ getMostSelectedPrefetch(prefetchParams), getSameSelectedPrefetch(prefetchParams),