대시보드 리팩토링

src/App.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Routes, Route } from 'react-router-dom';
-import MainPage from './pages/MainPage';
+// import MainPage from './pages/MainPage';
 import LoginPage from './pages/LoginPage';
 import MyPage from './pages/MyPage';
 import CreateBoard from './pages/CreateBoardPage';
@@ -31,12 +31,11 @@ import { useMediaQuery } from 'react-responsive';
 import Flex from './components/Flex';
 import { MobileDisplay } from './styles/ErrorPageStyled';
 import RouteChangeTracker from './components/RouteChangeTracker';
-import PersonalDashBoard from './components/PersonalDashboard';
+import PersonalDashboard from './components/PersonalDashboard';
 import TeamDashBoard from './components/TeamDashboard';
 
 const queryClient = new QueryClient();
 
-// 로그인 상태를 체크하는 함수
 const useAuth = () => {
   const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(true);
@@ -58,8 +57,6 @@ const App = () => {
   const isMobile = useMediaQuery({ query: '(max-width: 1000px)' });
   const { isLoggedIn, loading } = useAuth();
 
-  RouteChangeTracker();
-
   if (loading) {
     return <div>Loading...</div>;
   }
@@ -90,44 +87,63 @@ const App = () => {
           theme="light"
           style={{ width: '21.875rem', lineHeight: '1.5rem' }}
         />
+
         <Routes>
           <Route path="/" element={<LoginPage />} />
           <Route path="/api/oauth2/callback/:provider" element={<OAuthRedirectHandler />} />
           <Route path="/error/403" element={<Error403Page />} />
           <Route path="*" element={<Error404Page />} />
+
           <Route
             path="/personal/:id"
             element={
               <ProtectedRoute>
-                <PersonalDashBoard />
+                <PersonalDashboard />
               </ProtectedRoute>
             }
-          />
-          <Route
-            path="/team/:id"
+          >
+            <Route
+              path=":blockId"
+              element={
+                <ProtectedRoute>
+                  <SidePage />
+                </ProtectedRoute>
+              }
+            />
+          </Route>
+          {/* <Route
+            path="/personalBlock/:blockId"
             element={
               <ProtectedRoute>
-                <TeamDashBoard />
+                <SidePage />
               </ProtectedRoute>
             }
-          />
+          /> */}
           <Route
-            path="/:id"
+            path="/team/:id"
             element={
               <ProtectedRoute>
-                <MainPage />
+                <TeamDashBoard />
               </ProtectedRoute>
             }
           >
             <Route
-              path="personalBlock/:blockId"
+              path=":blockId"
               element={
                 <ProtectedRoute>
                   <SidePage />
                 </ProtectedRoute>
               }
             />
           </Route>
+          {/* <Route
+            path="/:id"
+            element={
+              <ProtectedRoute>
+                <MainPage />
+              </ProtectedRoute>
+            }
+          /> */}
 
           <Route
             path="/createBoard"

src/api/PersonalBlockApi.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { BlockListResDto, BlockOrder } from '../types/PersonalBlock';
+import { BlockListResDto, BlockOrder, DeletedBlockList } from '../types/PersonalBlock';
 import { axiosInstance } from '../utils/apiConfig';
 
 // 블록 생성 post
@@ -70,7 +70,7 @@ export const getDeleteBlock = async (dashboardId: string, page?: number, size?:
     const response = await axiosInstance.get(
       `/blocks/deleted?dashboardId=${dashboardId}&page=0&size=10`
     );
-    return response.data.data;
+    return response.data.data as DeletedBlockList;
   } catch (error) {
     console.log('Error fetching data:', error);
   }

src/components/Block.tsx

@@ -49,8 +49,7 @@ const Block = ({
   const navigate = useNavigate();
 
   const clickHandler = () => {
-    // navigate(`personalBlock/${blockId}`);
-    navigate(`personalBlock/${blockId}`, {
+    navigate(`${blockId}`, {
       state: { highlightColor, progress },
     });
   };

src/components/CompletedDashboard.tsx

@@ -46,7 +46,9 @@ const CompletedDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
     // console.log(blockId);
 
     const { highlightColor, progress } = settings;
-    navigate(`personalBlock/${blockId}`, { state: { highlightColor, progress, blockId } });
+    navigate(`${blockId}`, {
+      state: { highlightColor, progress, blockId },
+    });
   };
 
   // 세로 무한 스크롤
@@ -77,20 +79,6 @@ const CompletedDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
             className="container"
             {...provided.droppableProps}
           >
-            {/* {list?.map((block, index) => (
-              <Block
-                dashboardId={dashboardId}
-                key={block.blockId}
-                index={index}
-                title={block.title ?? ''}
-                dDay={block.dDay ?? 0}
-                contents={block.contents ?? ''}
-                blockId={block.blockId ?? '0'}
-                dType={block.dType ?? 'TeamDashboard'}
-                name={block.nickname ?? '이름 없음'}
-                picture={block.picture ?? ''}
-              />
-            ))} */}
             {list?.map((block, index) => {
               const isLastBlock = index === list.length - 1;
               return (
@@ -115,7 +103,6 @@ const CompletedDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
           </S.BoxContainer>
         )}
       </Droppable>
-      <Outlet />
     </S.CardContainer>
   );
 };

src/components/DeleteButton.tsx

@@ -7,7 +7,7 @@ import { BlockListResDto, DeletedBlockList } from '../types/PersonalBlock';
 
 interface Props {
   id: string;
-  list: DeletedBlockList;
+  list: BlockListResDto[];
   removeValue: boolean;
 }
 const DeleteButton = ({ id, list, removeValue }: Props) => {
@@ -30,7 +30,7 @@ const DeleteButton = ({ id, list, removeValue }: Props) => {
             <S.DeleteDiv ref={provided.innerRef} className="container" {...provided.droppableProps}>
               <h1>휴지통</h1>
               <S.BoxContainer>
-                {list.blockListResDto.map(
+                {list.map(
                   (
                     { title, blockId, contents, dDay, dashboardId, dType, nickname, picture },
                     index

src/components/Header.tsx

@@ -14,7 +14,7 @@ type Props = {
 const Header = ({ mainTitle, subTitle, blockProgress, dashboardType }: Props) => {
   const navigate = useNavigate();
   const location = useLocation();
-  const dashboardId = location.pathname.split('/')[1];
+  const dashboardId = location.pathname.split('/')[2];
 
   // URL에 "teamdocument"가 포함되어 있는지 확인하는 함수
   // => 전역 변수로 개인 대시보드인지 팀 대시보드인지 확인할 예정이라 주석 처리

src/components/InProgressDashboard.tsx

@@ -49,7 +49,7 @@ const InProgressDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
     // console.log(blockId);
 
     const { highlightColor, progress } = settings;
-    navigate(`personalBlock/${blockId}`, {
+    navigate(`${blockId}`, {
       state: { highlightColor, progress, blockId },
     });
   };
@@ -82,20 +82,6 @@ const InProgressDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
             className="container"
             {...provided.droppableProps}
           >
-            {/* {list?.map((block, index) => (
-              <Block
-                dashboardId={dashboardId}
-                key={block.blockId}
-                index={index}
-                title={block.title ?? ''}
-                dDay={block.dDay ?? 0}
-                contents={block.contents ?? ''}
-                blockId={block.blockId ?? '0'}
-                dType={block.dType ?? 'TeamDashboard'}
-                name={block.nickname ?? '이름 없음'}
-                picture={block.picture ?? ''}
-              />
-            ))} */}
             {list?.map((block, index) => {
               const isLastBlock = index === list.length - 1;
               return (
@@ -120,7 +106,6 @@ const InProgressDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
           </S.BoxContainer>
         )}
       </Droppable>
-      <Outlet />
     </S.CardContainer>
   );
 };

src/components/NotStartedDashboard.tsx

@@ -8,7 +8,6 @@ import main3 from '../img/main3.png';
 import { BlockListResDto } from '../types/PersonalBlock';
 import { useInView } from 'react-intersection-observer';
 import { useEffect } from 'react';
-import { progress } from 'framer-motion';
 
 type Props = {
   list: BlockListResDto[];
@@ -45,7 +44,7 @@ const NotStartedDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
     const blockId = await createPersonalBlock(data);
 
     const { highlightColor, progress } = settings;
-    navigate(`personalBlock/${blockId}`, {
+    navigate(`${blockId}`, {
       state: { highlightColor, progress, blockId },
     });
   };
@@ -104,7 +103,6 @@ const NotStartedDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
           </S.BoxContainer>
         )}
       </Droppable>
-      <Outlet />
     </S.CardContainer>
   );
 };