디스커션 페이지네이션 적용 문제 해결 (issue #731)

frontend/src/components/DashBoard/DashBoardMissionList/index.tsx

@@ -4,9 +4,10 @@ import NoContent from './NoContent';
 import useMissionInProgress from '@/hooks/useMissionInProgress';
 import { usePagination } from '@/hooks/usePagination';
 import PageButtons from '@/components/common/PageButtons';
-import SpinnerSuspense from '@/components/common/SpinnerSuspense';
+import { useDashboardLayoutContext } from '@/pages/DashboardPage/DashBoardPageLayout';
 
 export default function DashBoardMissionList() {
+  const { path } = useDashboardLayoutContext();
   const {
     currentPage,
     setTotalPages,
@@ -18,16 +19,18 @@ export default function DashBoardMissionList() {
     hasNextGroup,
   } = usePagination();
   const { missionList, totalPage } = useMissionInProgress({
+    path,
     page: currentPage,
     onPageInfoUpdate: (totalPagesFromServer) => {
       setTotalPages(totalPagesFromServer);
     },
   });
 
+  console.log('missionList : ', missionList);
+
   return (
     <>
-      <SpinnerSuspense />
-      {!missionList.length ? (
+      {!missionList?.length ? (
         <NoContent type="inProgress" />
       ) : (
         <S.MissionListContainer>

frontend/src/components/DashBoard/DashboardDiscussion/DashboardDiscussion.styled.ts

@@ -4,6 +4,7 @@ import media from '@/styles/mediaQueries';
 
 export const HashTagWrapper = styled.div`
   display: flex;
+  flex-wrap: wrap;
   margin-bottom: 0.5rem;
 `;
 
@@ -12,6 +13,11 @@ export const HashTag = styled.span<{ $isTitle?: boolean }>`
   border-radius: 2rem;
   margin-right: 0.7rem;
   background-color: ${(props) => (props.$isTitle ? 'var(--danger-50)' : 'var(--primary-50)')};
+
+  ${media.medium`
+  flex-wrap: wrap;
+  margin-bottom: 0.5rem;
+    `}
 `;
 
 export const ImageWrapper = styled.div`
@@ -28,7 +34,7 @@ export const Image = styled.img`
 `;
 
 export const Container = styled.div`
-  width: 67.4rem;
+  width: 100%;
   height: 100%;
 
   ${media.medium`
@@ -46,11 +52,12 @@ export const DiscussionWrapper = styled(Link)`
   margin-top: 3rem;
   margin-bottom: 1.5rem;
   cursor: pointer;
+  justify-content: space-between;
 
   ${media.medium`
   display: flex;
     flex-direction: column;
-    height: 15rem;
+    height: 100%;
     `}
 `;
 
@@ -74,20 +81,19 @@ export const ImageCommentWrapper = styled.div`
 export const TextWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  min-width: 50rem;
 `;
 
 export const CommentText = styled.span`
   ${(props) => props.theme.font.body}
-  margin-bottom: 0.6rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 `;
 
 export const SubText = styled.span`
   ${(props) => props.theme.font.badge}
-  color : var(--grey-400)
+  color : var(--grey-400);
+  margin-bottom: 0.5rem;
 `;
 
 export const CommentCountText = styled(SubText)`

frontend/src/components/DashBoard/DashboardDiscussion/index.tsx

@@ -4,8 +4,11 @@ import { usePagination } from '@/hooks/usePagination';
 import NoContent from '../DashBoardMissionList/NoContent';
 import * as S from './DashboardDiscussion.styled';
 import DiscussionItem from './DiscussionItem';
+import { useDashboardLayoutContext } from '@/pages/DashboardPage/DashBoardPageLayout';
 
 export default function DashBoardDiscussionList() {
+  const { path } = useDashboardLayoutContext();
+
   const {
     currentPage,
     setTotalPages,
@@ -18,6 +21,7 @@ export default function DashBoardDiscussionList() {
   } = usePagination();
 
   const { discussionList, totalPage } = useDashboardDiscussion({
+    path,
     page: currentPage,
     onPageInfoUpdate: (totalPagesFromServer) => {
       setTotalPages(totalPagesFromServer);

frontend/src/components/DashBoard/DiscussionComment/index.tsx

@@ -4,8 +4,11 @@ import * as S from '../MyComments/MyComments.styled';
 import useDashboardDiscussionComment from '@/hooks/useDashboardDiscussionComment';
 import { usePagination } from '@/hooks/usePagination';
 import PageButtons from '@/components/common/PageButtons';
+import { useDashboardLayoutContext } from '@/pages/DashboardPage/DashBoardPageLayout';
 
 export default function DiscussionCommentList() {
+  const { path } = useDashboardLayoutContext();
+
   const {
     currentPage,
     setTotalPages,
@@ -17,6 +20,7 @@ export default function DiscussionCommentList() {
     hasNextGroup,
   } = usePagination();
   const { discussionCommentList, totalPage } = useDashboardDiscussionComment({
+    path,
     page: currentPage,
     onPageInfoUpdate: (totalPagesFromServer) => {
       setTotalPages(totalPagesFromServer);

frontend/src/components/DashBoard/MyComments/MyCommentList.tsx

@@ -4,8 +4,10 @@ import MyComment from './MyComment';
 import useMyComments from '@/hooks/useMyComments';
 import PageButtons from '@/components/common/PageButtons';
 import { usePagination } from '@/hooks/usePagination';
+import { useDashboardLayoutContext } from '@/pages/DashboardPage/DashBoardPageLayout';
 
 export default function MyCommentList() {
+  const { path } = useDashboardLayoutContext();
   const {
     currentPage,
     setTotalPages,
@@ -16,7 +18,9 @@ export default function MyCommentList() {
     hasPreviousGroup,
     hasNextGroup,
   } = usePagination();
+
   const { myComments, totalPage } = useMyComments({
+    path,
     page: currentPage,
     onPageInfoUpdate: (totalPagesFromServer) => {
       setTotalPages(totalPagesFromServer);

frontend/src/components/DashBoard/SubmittedSolutions/index.tsx

@@ -5,8 +5,10 @@ import useSubmittedSolutions from '@/hooks/useSubmittedSolutions';
 import { formatDateString } from '@/utils/formatDateString';
 import { usePagination } from '@/hooks/usePagination';
 import PageButtons from '@/components/common/PageButtons';
+import { useDashboardLayoutContext } from '@/pages/DashboardPage/DashBoardPageLayout';
 
 export default function SubmittedSolutionList() {
+  const { path } = useDashboardLayoutContext();
   const {
     currentPage,
     setTotalPages,
@@ -25,6 +27,7 @@ export default function SubmittedSolutionList() {
   // });
 
   const { submittedSolutionList, totalPage } = useSubmittedSolutions({
+    path,
     page: currentPage,
     onPageInfoUpdate: (totalPagesFromServer) => {
       setTotalPages(totalPagesFromServer);

frontend/src/components/Mission/index.tsx

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react';
 import * as S from './Mission.styled';
 import { Link } from 'react-router-dom';
 import type { HashTag } from '@/types';
 
 interface MissionProps extends PropsWithChildren {
@@ -11,9 +11,12 @@
 export default function Mission({ id, type, children }: MissionProps) {
   // TODO 솔루션 상세 URL이 아직 정해져 있지 않아서 임시로 해놓습니다.
   const targeRoute = type === 'mission' ? '/missions/' : '/solutions/';
+  const URL = 'https://dev.devel-up.co.kr';
+  const LOCAL_HOST = 'http://localhost:3000';
   return (
     <S.MissionItemContainer>
-      <Link to={`${targeRoute}${id}`}>{children}</Link>
+      <a href={`${URL}${targeRoute}${id}`}>{children}</a>
+      {/* <Link to={`${targeRoute}${id}`}>{children}</Link> */}
     </S.MissionItemContainer>
   );
 }

frontend/src/components/common/PageButtons/PageButtons.styled.ts

@@ -5,6 +5,7 @@ export const Container = styled.div`
   height: 2.4rem;
   margin: 0 auto;
   display: flex;
+  justify-content: center;
   margin-top: 1.5rem;
 `;
 

frontend/src/hooks/queries/keys.ts

@@ -6,7 +6,7 @@
 
 export const missionKeys = {
   all: ['missions'],
-  detail: (id: number) => [...missionKeys.all, id],
+  detail: (id: number, path: string) => [...missionKeys.all, id, path],
   inProgress: ['inProgress'],
 } as const;
 
@@ -24,7 +24,7 @@ export const solutionKeys = {
   all: ['solutions'],
   detail: (id: number) => [...solutionKeys.all, id],
   summaries: ['solutionSummaries'],
-  submitted: (page: number) => ['submitted solutions', page],
+  submitted: (page: number, path: string) => ['submitted solutions', page, path],
 };
 
 export const discussionKeys = {
@@ -47,6 +47,18 @@ export const discussionsKeys = {
 export const dashboardKeys = {
   default: ['dashboard'],
   discussions: () => [...dashboardKeys.default, 'discussions'],
-  discussionComments: (page: number) => [...dashboardKeys.default, 'discussion', 'comments', page],
-  solutionComments: (page: number) => [...dashboardKeys.default, 'solution', 'comments', page],
+  discussionComments: (page: number, path: string) => [
+    ...dashboardKeys.default,
+    'discussion',
+    'comments',
+    page,
+    path,
+  ],
+  solutionComments: (page: number, path: string) => [
+    ...dashboardKeys.default,
+    'solution',
+    'comments',
+    page,
+    path,
+  ],
 } as const;

frontend/src/hooks/useDashboardDiscussion.ts

@@ -4,13 +4,18 @@
 import { useEffect } from 'react';
 
 interface UseDashboardDiscussionOptions {
+  path: string;
   page: number;
   onPageInfoUpdate?: (totalPage: number) => void;
 }
 
-const useDashboardDiscussion = ({ page, onPageInfoUpdate }: UseDashboardDiscussionOptions) => {
+const useDashboardDiscussion = ({
+  path,
+  page,
+  onPageInfoUpdate,
+}: UseDashboardDiscussionOptions) => {
   const { data: dashboardDiscussionResponse } = useSuspenseQuery({
-    queryKey: dashboardKeys.discussionComments(page),
+    queryKey: dashboardKeys.discussionComments(page, path),
     queryFn: () => getDashboardDiscussion({ page: page.toString() }),
   });
 
@@ -20,7 +25,7 @@
     if (onPageInfoUpdate) {
       onPageInfoUpdate(totalPage);
     }
   }, [currentPage]);
 
   return { discussionList: data, currentPageFromServer: currentPage, totalPage };
 };

frontend/src/hooks/useDashboardDiscussionComment.ts

@@ -4,16 +4,18 @@
 import { useEffect } from 'react';
 
 interface UseDashboardDiscussionCommentOptions {
+  path: string;
   page: number;
   onPageInfoUpdate?: (totalPage: number) => void;
 }
 
 const useDashboardDiscussionComment = ({
+  path,
   page,
   onPageInfoUpdate,
 }: UseDashboardDiscussionCommentOptions) => {
   const { data: dashboardDiscussionCommentResponse } = useSuspenseQuery({
-    queryKey: dashboardKeys.discussionComments(page),
+    queryKey: dashboardKeys.discussionComments(page, path),
     queryFn: () => getDashboardDiscussionComments({ page: page.toString() }),
   });
 
@@ -23,7 +25,7 @@
     if (onPageInfoUpdate) {
       onPageInfoUpdate(totalPage);
     }
   }, [currentPage]);
 
   return { discussionCommentList: data, currentPageFromServer: currentPage, totalPage };
 };

frontend/src/hooks/useDiscussions.ts

@@ -19,7 +19,7 @@
   onPageInfoUpdate,
 }: UseDiscussionsOptions) => {
   const { data: discussionsResponse } = useSuspenseQuery({
-    queryKey: [...discussionsKeys.all, mission, hashTag],
+    queryKey: [...discussionsKeys.all, mission, hashTag, page],
     queryFn: () =>
       getDiscussions({
         mission: mission || HASHTAGS.all,
@@ -35,7 +35,7 @@
     if (onPageInfoUpdate) {
       onPageInfoUpdate(totalPage);
     }
   }, [currentPage]);
 
   return { discussions: data, currentPageFromServer: currentPage, totalPage };
 };

frontend/src/hooks/useMission.ts

@@ -5,7 +5,7 @@ import { getMissionById } from '@/apis/missionAPI';
 
 const useMission = (id: number) => {
   return useSuspenseQuery<MissionWithDescription>({
-    queryKey: missionKeys.detail(id),
+    queryKey: missionKeys.detail(id, ''),
     queryFn: () => getMissionById(id),
   });
 };

frontend/src/hooks/useMissionInProgress.ts

@@ -4,13 +4,14 @@
 import { useEffect } from 'react';
 
 interface UseMissionInProgressOptions {
+  path: string;
   page: number;
   onPageInfoUpdate?: (totalPage: number) => void;
 }
 
-const useMissionInProgress = ({ page, onPageInfoUpdate }: UseMissionInProgressOptions) => {
+const useMissionInProgress = ({ path, page, onPageInfoUpdate }: UseMissionInProgressOptions) => {
   const { data: missionInProgressResponse } = useSuspenseQuery({
-    queryKey: missionKeys.detail(page),
+    queryKey: missionKeys.detail(page, path),
     queryFn: () => getMissionInProgress({ page: page.toString() }),
   });
 
@@ -20,7 +21,7 @@
     if (onPageInfoUpdate) {
       onPageInfoUpdate(totalPage);
     }
   }, [currentPage]);
 
   return { missionList: data, currentPageFromServer: currentPage, totalPage };
 };

frontend/src/hooks/useMyComments.ts

@@ -4,13 +4,14 @@ import { getMyComments } from '@/apis/solutionCommentAPI';
 import { useEffect } from 'react';
 
 interface UseMyCommentsOptions {
+  path: string;
   page: number;
   onPageInfoUpdate?: (totalPage: number) => void;
 }
 
-const useMyComments = ({ page, onPageInfoUpdate }: UseMyCommentsOptions) => {
+const useMyComments = ({ path, page, onPageInfoUpdate }: UseMyCommentsOptions) => {
   const { data: myCommentsResponse } = useSuspenseQuery({
-    queryKey: dashboardKeys.solutionComments(page),
+    queryKey: dashboardKeys.solutionComments(page, path),
     queryFn: () => getMyComments({ page: page.toString() }),
   });
 

frontend/src/hooks/useSubmitSolutionMutation.ts

@@ -26,7 +26,7 @@ const useSubmitSolutionMutation = ({
     mutationFn: postSolutionSubmit,
     onSuccess: ({ id }) => {
       onSuccessCallback();
-      queryClient.invalidateQueries({ queryKey: missionKeys.detail(missionId) });
+      queryClient.invalidateQueries({ queryKey: missionKeys.detail(missionId, '') });
       queryClient.invalidateQueries({ queryKey: solutionKeys.summaries });
       navigate(ROUTES.solutions + `/${id}`);
     },

frontend/src/hooks/useSubmittedSolutions.ts

@@ -4,13 +4,14 @@ import { getSubmittedSolution } from '../apis/solutions';
 import { useEffect } from 'react';
 
 interface UseSubmittedSolutionsOptions {
+  path: string;
   page: number;
   onPageInfoUpdate?: (totalPage: number) => void;
 }
 
-const useSubmittedSolutions = ({ page, onPageInfoUpdate }: UseSubmittedSolutionsOptions) => {
+const useSubmittedSolutions = ({ path, page, onPageInfoUpdate }: UseSubmittedSolutionsOptions) => {
   const { data: submittedSolutionsResponse } = useSuspenseQuery({
-    queryKey: solutionKeys.submitted(page),
+    queryKey: solutionKeys.submitted(page, path),
     queryFn: () => getSubmittedSolution({ page: page.toString() }),
   });