[feat/CK-244] 에러바운더리 오류를 해결하고, 골루 대시보드에 적용한다

client/src/App.tsx

@@ -1,4 +1,4 @@
-import { lazy } from 'react';
+import { lazy, Suspense } from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import theme from '@styles/theme';
 import GlobalStyle from '@styles/GlobalStyle';
@@ -19,6 +19,7 @@ import OAuthRedirect from './components/loginPage/OAuthRedirect';
 import SessionHandler from '@components/_common/sessionHandler/SessionHandler';
 import RouteChangeTracker from '@components/_common/routeChangeTracker/RouteChangeTracker';
 import PrivateRouter from '@components/_common/privateRouter/PrivateRouter';
+import { Spinner } from './components/_common/spinner/Spinner.styles';
 import { CriticalErrorBoundary } from './components/_common/errorBoundary/CriticalErrorBoundary';
 
 const GoalRoomDashboardPage = lazy(
@@ -54,7 +55,11 @@ const App = () => {
                         <Route path='/roadmap/:id' element={<RoadmapDetailPage />} />
                         <Route
                           path='/roadmap/:id/goalroom-list'
-                          element={<GoalRoomListPage />}
+                          element={
+                            <Suspense fallback={<Spinner />}>
+                              <GoalRoomListPage />
+                            </Suspense>
+                          }
                         />
                         <Route
                           path='/roadmap-create'
@@ -68,13 +73,19 @@ const App = () => {
                           path='/roadmap/:id/goalroom-create'
                           element={
                             <PrivateRouter>
-                              <GoalRoomCreatePage />
+                              <Suspense fallback={<Spinner />}>
+                                <GoalRoomCreatePage />
+                              </Suspense>
                             </PrivateRouter>
                           }
                         />
                         <Route
                           path='/goalroom-dashboard/:goalroomId'
-                          element={<GoalRoomDashboardPage />}
+                          element={
+                            <Suspense fallback={<Spinner />}>
+                              <GoalRoomDashboardPage />
+                            </Suspense>
+                          }
                         />
                         <Route
                           path='/myPage'

client/src/apis/goalRoom.ts

@@ -69,7 +69,7 @@ export const postCreateGoalRoom = async (body: CreateGoalRoomRequest) => {
 
 export const getGoalRoomTodos = async (goalRoomId: string) => {
   const { data } = await client.get<GoalRoomTodoResponse>(
-    API_PATH.GOALROOM_TODOS(goalRoomId)
+    `${API_PATH.GOALROOM_TODOS(goalRoomId)}/90`
   );
 
   return data;

client/src/components/goalRoomDahsboardPage/goalRoomCertificationFeed/GoalRoomCertificationFeed.tsx

@@ -1,17 +1,16 @@
 import * as S from './GoalRoomCertificationFeed.styles';
 import SVGIcon from '@components/icons/SVGIcon';
-import { GoalRoomBrowseResponse } from '@myTypes/goalRoom/remote';
 import { StyledImage } from './GoalRoomCertificationFeed.styles';
 import { Dialog } from 'ck-util-components';
 import CertificationFeedModal from '@components/goalRoomDahsboardPage/goalRoomCertificationFeed/certificationFeedModal/CertificationFeedModal';
 import ToolTip from '@components/_common/toolTip/ToolTip';
+import { useGoalRoomDashboardContext } from '@/context/goalRoomDashboardContext';
+import { useFetchGoalRoom } from '@/hooks/queries/goalRoom';
 
-type GoalRoomCertificationFeedProps = {
-  goalRoomData: GoalRoomBrowseResponse;
-};
-
-const GoalRoomCertificationFeed = ({ goalRoomData }: GoalRoomCertificationFeedProps) => {
-  const { checkFeeds } = goalRoomData;
+const GoalRoomCertificationFeed = () => {
+  const { goalroomId } = useGoalRoomDashboardContext();
+  const { goalRoom } = useFetchGoalRoom(goalroomId);
+  const { checkFeeds } = goalRoom;
 
   return (
     <Dialog>

client/src/components/goalRoomDahsboardPage/goalRoomDahsboardRoadmap/GoalRoomDashboardRoadmap.tsx

@@ -1,17 +1,13 @@
 import * as S from './GoalRoomDashboardRoadmap.styles';
-import { useGoalRoomDetail } from '@/hooks/queries/goalRoom';
+import { useFetchGoalRoom, useGoalRoomDetail } from '@/hooks/queries/goalRoom';
 import { useGoalRoomDashboardContext } from '@/context/goalRoomDashboardContext';
 import { Dialog } from 'ck-util-components';
 import SVGIcon from '@components/icons/SVGIcon';
 import RoadmapModal from '@components/goalRoomDahsboardPage/goalRoomDahsboardRoadmap/roadmapModal/RoadmapModal';
-import { GoalRoomRecruitmentStatus } from '@myTypes/goalRoom/internal';
 
-type GoalRoomDashboardRoadmapProps = {
-  goalRoomStatus: GoalRoomRecruitmentStatus;
-};
-
-const GoalRoomDashboardRoadmap = ({ goalRoomStatus }: GoalRoomDashboardRoadmapProps) => {
+const GoalRoomDashboardRoadmap = () => {
   const { goalroomId } = useGoalRoomDashboardContext();
+  const { goalRoom } = useFetchGoalRoom(goalroomId);
   const { goalRoomInfo } = useGoalRoomDetail(Number(goalroomId));
 
   return (
@@ -49,7 +45,7 @@ const GoalRoomDashboardRoadmap = ({ goalRoomStatus }: GoalRoomDashboardRoadmapPr
       </Dialog.BackDrop>
 
       <Dialog.Content>
-        <>{goalRoomStatus === 'RUNNING' && <RoadmapModal goalroomId={goalroomId} />}</>
+        <>{goalRoom.status === 'RUNNING' && <RoadmapModal goalroomId={goalroomId} />}</>
       </Dialog.Content>
     </Dialog>
   );

client/src/components/goalRoomDahsboardPage/goalRoomDahsboardTodo/GoalRoomDashboardTodo.tsx

@@ -1,21 +1,20 @@
 import * as S from './GoalRoomDashboardTodo.styles';
 import SVGIcon from '@components/icons/SVGIcon';
-import { GoalRoomBrowseResponse } from '@myTypes/goalRoom/remote';
 import SingleTodo from '@components/goalRoomDahsboardPage/goalRoomDahsboardTodo/singleTodo/SingleTodo';
 import { Dialog } from 'ck-util-components';
 import TodoModal from '@components/goalRoomDahsboardPage/goalRoomDahsboardTodo/todoModal/TodoModal';
 import ToolTip from '@components/_common/toolTip/ToolTip';
+import { useGoalRoomDashboardContext } from '@/context/goalRoomDashboardContext';
+import { useFetchGoalRoom } from '@/hooks/queries/goalRoom';
 
 type GoalRoomDashboardTodoProps = {
-  goalRoomData: GoalRoomBrowseResponse;
   isLeader: boolean;
 };
 
-const GoalRoomDashboardTodo = ({
-  goalRoomData,
-  isLeader,
-}: GoalRoomDashboardTodoProps) => {
-  const { goalRoomTodos } = goalRoomData;
+const GoalRoomDashboardTodo = ({ isLeader }: GoalRoomDashboardTodoProps) => {
+  const { goalroomId } = useGoalRoomDashboardContext();
+  const { goalRoom } = useFetchGoalRoom(goalroomId);
+  const { goalRoomTodos } = goalRoom;
 
   return (
     <Dialog>
@@ -49,7 +48,7 @@ const GoalRoomDashboardTodo = ({
         <S.DashboardBackDrop />
       </Dialog.BackDrop>
 
-      <Dialog.Content>
+      <Dialog.Content asChild>
         <TodoModal isLeader={isLeader} />
       </Dialog.Content>
     </Dialog>

client/src/components/goalRoomDahsboardPage/goalRoomDashboardContent/GoalRoomDashboardContent.tsx

@@ -26,27 +26,25 @@ const GoalRoomDashboardContent = () => {
   const isLeader = userInfo.id === goalRoom.leaderId;
 
   return (
-    <>
-      <Suspense fallback={<Spinner />}>
-        <S.GoalRoomWrapper>
-          <GoalRoomDashboardHeader goalRoomData={goalRoom} isLeader={isLeader} />
-          <S.GoalRoomGridContainer>
-            <GoalRoomDashboardTodo goalRoomData={goalRoom} isLeader={isLeader} />
-            <GoalRoomDashboardRoadmap goalRoomStatus={goalRoom.status} />
-            <GoalRoomUserRanking />
-            <GoalRoomCertificationFeed goalRoomData={goalRoom} />
-          </S.GoalRoomGridContainer>
-          {goalRoom.status !== 'RUNNING' && (
-            <GoalRoomDashboardBarricade
-              status={goalRoom.status}
-              startDate={goalRoom.startDate}
-              isLeader={isLeader}
-              goalroomId={goalroomId}
-            />
-          )}
-        </S.GoalRoomWrapper>
-      </Suspense>
-    </>
+    <Suspense fallback={<Spinner />}>
+      <S.GoalRoomWrapper>
+        <GoalRoomDashboardHeader isLeader={isLeader} />
+        <S.GoalRoomGridContainer>
+          <GoalRoomDashboardTodo isLeader={isLeader} />
+          <GoalRoomDashboardRoadmap />
+          <GoalRoomUserRanking />
+          <GoalRoomCertificationFeed />
+        </S.GoalRoomGridContainer>
+        {goalRoom.status !== 'RUNNING' && (
+          <GoalRoomDashboardBarricade
+            status={goalRoom.status}
+            startDate={goalRoom.startDate}
+            isLeader={isLeader}
+            goalroomId={goalroomId}
+          />
+        )}
+      </S.GoalRoomWrapper>
+    </Suspense>
   );
 };
 

client/src/components/goalRoomDahsboardPage/goalRoomDashboardHeader/GoalRoomDashboardHeader.tsx

@@ -1,27 +1,21 @@
 import SVGIcon from '@components/icons/SVGIcon';
-
 import * as S from './GoalRoomDashboardHeader.styles';
 import recruitmentStatus from '@constants/goalRoom/recruitmentStatus';
-import { GoalRoomBrowseResponse } from '@myTypes/goalRoom/remote';
 import { Dialog } from 'ck-util-components';
 import GoalRoomParticipantsListModal from '@components/goalRoomDahsboardPage/goalRoomDashboardHeader/goalRoomParticipantsListModal/GoalRoomParticipantsListModal';
 import isTodayOrAfter from '@utils/_common/isTodayOrAfter';
 import { useGoalRoomDashboardContext } from '@/context/goalRoomDashboardContext';
-import { useStartGoalRoom } from '@hooks/queries/goalRoom';
+import { useFetchGoalRoom, useStartGoalRoom } from '@hooks/queries/goalRoom';
 
 type GoalRoomDashboardHeaderProps = {
-  goalRoomData: GoalRoomBrowseResponse;
   isLeader: boolean;
 };
 
-const GoalRoomDashboardHeader = ({
-  goalRoomData,
-  isLeader,
-}: GoalRoomDashboardHeaderProps) => {
-  const { name, status, currentMemberCount, limitedMemberCount, startDate, endDate } =
-    goalRoomData;
-
+const GoalRoomDashboardHeader = ({ isLeader }: GoalRoomDashboardHeaderProps) => {
   const { goalroomId } = useGoalRoomDashboardContext();
+  const { goalRoom } = useFetchGoalRoom(goalroomId);
+  const { name, status, currentMemberCount, limitedMemberCount, startDate, endDate } =
+    goalRoom;
 
   const { startGoalRoom } = useStartGoalRoom(goalroomId);
 

client/src/pages/goalRoomDashboardPage/GoalRoomDashboardPage.tsx

@@ -1,15 +1,14 @@
 import GoalRoomDashboardContent from '@components/goalRoomDahsboardPage/goalRoomDashboardContent/GoalRoomDashboardContent';
 import GoalRoomDashboardProvider from '@components/_providers/GoalRoomDashboardProvider';
-import { Suspense } from 'react';
-import Spinner from '@components/_common/spinner/Spinner';
+import AsyncBoundary from '@/components/_common/errorBoundary/AsyncBoundary';
 
 const GoalRoomDashboardPage = () => {
   return (
-    <Suspense fallback={<Spinner />}>
+    <AsyncBoundary>
       <GoalRoomDashboardProvider>
         <GoalRoomDashboardContent />
       </GoalRoomDashboardProvider>
-    </Suspense>
+    </AsyncBoundary>
   );
 };