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

client/package.json

@@ -34,6 +34,7 @@
     "ajv": "^8.12.0",
     "axios": "^1.4.0",
     "babel-plugin-transform-builtin-extend": "^1.1.2",
+    "ck-util-components": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-lightweight-form": "^1.2.5",

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,25 +1,19 @@
 import * as S from './GoalRoomCertificationFeed.styles';
 import SVGIcon from '@components/icons/SVGIcon';
-import { GoalRoomBrowseResponse } from '@myTypes/goalRoom/remote';
 import { StyledImage } from './GoalRoomCertificationFeed.styles';
-import {
-  DialogBackdrop,
-  DialogBox,
-  DialogContent,
-  DialogTrigger,
-} from '@components/_common/dialog/dialog';
+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 (
-    <DialogBox>
+    <Dialog>
       <S.CertificationFeedWrapper>
         <div>
           <S.CertificationTitleWrapper>
@@ -31,12 +25,12 @@ const GoalRoomCertificationFeed = ({ goalRoomData }: GoalRoomCertificationFeedPr
             </ToolTip>
           </S.CertificationTitleWrapper>
 
-          <DialogTrigger asChild>
+          <Dialog.Trigger asChild>
             <button aria-labelledby='이미지 피드 전체보기'>
               <span>전체보기</span>
               <SVGIcon name='RightArrowIcon' aria-hidden='true' />
             </button>
-          </DialogTrigger>
+          </Dialog.Trigger>
         </div>
         <S.ImageGrid>
           {checkFeeds.map((feed) => {
@@ -49,14 +43,14 @@ const GoalRoomCertificationFeed = ({ goalRoomData }: GoalRoomCertificationFeedPr
         </S.ImageGrid>
       </S.CertificationFeedWrapper>
 
-      <DialogBackdrop asChild>
+      <Dialog.BackDrop asChild>
         <S.ModalBackdrop />
-      </DialogBackdrop>
+      </Dialog.BackDrop>
 
-      <DialogContent>
+      <Dialog.Content>
         <CertificationFeedModal />
-      </DialogContent>
-    </DialogBox>
+      </Dialog.Content>
+    </Dialog>
   );
 };
 

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

@@ -1,38 +1,29 @@
 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 {
-  DialogBackdrop,
-  DialogBox,
-  DialogContent,
-  DialogTrigger,
-} from '@components/_common/dialog/dialog';
+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 (
-    <DialogBox>
+    <Dialog>
       <S.RoadmapWrapper>
         <div>
           <S.TitleWrapper>
             <h2>로드맵</h2>
           </S.TitleWrapper>
 
-          <DialogTrigger asChild>
+          <Dialog.Trigger asChild>
             <button>
               <span>전체보기</span>
               <SVGIcon name='RightArrowIcon' aria-hidden='true' />
             </button>
-          </DialogTrigger>
+          </Dialog.Trigger>
         </div>
         <S.RoadmapContainer>
           {goalRoomInfo.goalRoomNodes.map((node) => {
@@ -49,14 +40,14 @@ const GoalRoomDashboardRoadmap = ({ goalRoomStatus }: GoalRoomDashboardRoadmapPr
         </S.RoadmapContainer>
       </S.RoadmapWrapper>
 
-      <DialogBackdrop asChild>
+      <Dialog.BackDrop asChild>
         <S.DashboardBackDrop />
-      </DialogBackdrop>
+      </Dialog.BackDrop>
 
-      <DialogContent>
-        {goalRoomStatus === 'RUNNING' && <RoadmapModal goalroomId={goalroomId} />}
-      </DialogContent>
-    </DialogBox>
+      <Dialog.Content>
+        <>{goalRoom.status === 'RUNNING' && <RoadmapModal goalroomId={goalroomId} />}</>
+      </Dialog.Content>
+    </Dialog>
   );
 };
 

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

@@ -1,29 +1,23 @@
 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 {
-  DialogBackdrop,
-  DialogBox,
-  DialogContent,
-  DialogTrigger,
-} from '@components/_common/dialog/dialog';
+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 (
-    <DialogBox>
+    <Dialog>
       <S.TodoWrapper>
         <div>
           <S.TitleWrapper>
@@ -33,12 +27,12 @@ const GoalRoomDashboardTodo = ({
             </ToolTip>
           </S.TitleWrapper>
 
-          <DialogTrigger asChild>
+          <Dialog.Trigger asChild>
             <button>
               <span>전체보기</span>
               <SVGIcon name='RightArrowIcon' aria-hidden='true' />
             </button>
-          </DialogTrigger>
+          </Dialog.Trigger>
         </div>
 
         <div>
@@ -50,14 +44,14 @@ const GoalRoomDashboardTodo = ({
         </div>
       </S.TodoWrapper>
 
-      <DialogBackdrop asChild>
+      <Dialog.BackDrop asChild>
         <S.DashboardBackDrop />
-      </DialogBackdrop>
+      </Dialog.BackDrop>
 
-      <DialogContent>
+      <Dialog.Content asChild>
         <TodoModal isLeader={isLeader} />
-      </DialogContent>
-    </DialogBox>
+      </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>
   );
 };