#42 feat: 팀 대시보드 api 연동

AJD-Archive · Sep 9, 2024 · ea7fca4 · ea7fca4
1 parent 8f6274b
commit ea7fca4
Show file tree

Hide file tree

Showing 11 changed files with 130 additions and 115 deletions.
diff --git a/src/api/TeamDashBoardApi.tsx b/src/api/TeamDashBoardApi.tsx
@@ -1,4 +1,4 @@
-import { TeamDashboardInfoResDto } from '../types/TeamDashBoard';
+import { TeamDashboardInfoResDto, TeamDashboardResponse } from '../types/TeamDashBoard';
 import { axiosInstance } from '../utils/apiConfig';
 
 // * 팀 대시보드 create
@@ -33,9 +33,21 @@ export const patchTeamDashBoard = async (
 export const getTeamDashboard = async (id: string): Promise<TeamDashboardInfoResDto | null> => {
   try {
     const response = await axiosInstance.get(`/dashboards/team/${id}`);
+    console.log(response);
     return response.data.data;
   } catch (error) {
     console.log('error');
     return null;
   }
 };
+
+// * 팀 대시보드 삭제
+export const deleteTeamDashboard = async (id: string): Promise<void> => {
+  try {
+    const response = await axiosInstance.delete(`/dashboards/team/${id}`);
+    console.log(response);
+  } catch (error) {
+    console.log('error');
+    // return null;
+  }
+};
diff --git a/src/components/Block.tsx b/src/components/Block.tsx
@@ -1,13 +1,10 @@
 import Flex from './Flex';
 import edit from '../img/edit.png';
 import deleteicon from '../img/delete.png';
-import profile from '../img/kakaoprofileimage.png';
 import * as S from '../styles/DashboardStyled';
 import { Draggable } from 'react-beautiful-dnd';
-import { BlockListResDto } from '../types/PersonalBlock';
-import { Link, useBlocker } from 'react-router-dom';
-import { getPersonalBlock } from '../api/PersonalBlockApi';
-import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import Profile from './Profile';
 
 type Props = {
   blockId: string;
@@ -16,9 +13,11 @@ type Props = {
   contents: string;
   dDay: number;
   dashboardId: string;
+  dType: string;
+  name: string;
 };
 
-const Block = ({ title, index, blockId, contents, dDay, dashboardId }: Props) => {
+const Block = ({ title, index, blockId, contents, dDay, dType, name }: Props) => {
   const updatedBlockId = blockId ? (parseInt(blockId, 10) + 1).toString() : '1';
 
   // useEffect(() => {
@@ -55,13 +54,16 @@ const Block = ({ title, index, blockId, contents, dDay, dashboardId }: Props) =>
               <h3>{title}</h3>
               <span>D-{dDay}</span>
             </Flex>
-            <p>{contents}</p>
-            <Flex>
-              {/* <S.ProfileImageWrapper>
-              <img src={profile} />
-            </S.ProfileImageWrapper>
-            <span>{blockId}</span> */}
-            </Flex>
+            {dType === 'PersonalDashboard' ? (
+              <p>{contents}</p>
+            ) : (
+              <Flex>
+                <S.ProfileImageWrapper>
+                  <Profile width="" height="" profile="" />
+                </S.ProfileImageWrapper>
+                <span>{name}</span>
+              </Flex>
+            )}
           </S.BlockContainer>
         )}
       </Draggable>

diff --git a/src/components/CompletedDashboard.tsx b/src/components/CompletedDashboard.tsx
@@ -2,13 +2,11 @@ import { useNavigate, Outlet } from 'react-router-dom';
 import Block from './Block';
 import * as S from '../styles/DashboardStyled';
 import { createPersonalBlock } from '../api/PersonalBlockApi';
-import { useAtom } from 'jotai';
-import { visibleAtom } from '../contexts/sideScreenAtom';
 import SidePage from '../pages/SidePage';
 import { Droppable } from 'react-beautiful-dnd';
 import theme from '../styles/Theme/Theme';
 import main2 from '../img/main2.png';
-import { BlockListResDto, StatusPersonalBlock } from '../types/PersonalBlock';
+import { BlockListResDto } from '../types/PersonalBlock';
 
 type Props = {
   // list: StatusPersonalBlock | undefined;
@@ -78,6 +76,8 @@ const CompletedDashboard = ({ list, id, dashboardId }: Props) => {
                 dDay={block.dDay ?? 0}
                 contents={block.contents ?? ''}
                 blockId={block.blockId ?? '0'}
+                dType={block.dType ?? 'TeamDashboard'}
+                name={block.nickname ?? '이름 없음'}
               />
             ))}
             {provided.placeholder}

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -2,18 +2,18 @@ import Graph from '../components/Graph';
 import Flex from './Flex';
 import setting from '../img/setting.png';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
-import addbutton from '../img/addbutton.png';
 import leftarrow from '../img/leftarrow.png';
 import * as S from '../styles/HeaderStyled';
-import { dashboardType } from '../contexts/DashboardAtom';
+// import { dashboardType } from '../contexts/DashboardAtom';
 
 type Props = {
   mainTitle: string;
   subTitle: string;
   blockProgress: number;
+  dashboardType?: boolean;
 };
 
-const Header = ({ mainTitle, subTitle, blockProgress }: Props) => {
+const Header = ({ mainTitle, subTitle, blockProgress, dashboardType }: Props) => {
   const navigate = useNavigate();
   const location = useLocation();
   const dashboardId = location.pathname.split('/')[1];
@@ -55,11 +55,6 @@ const Header = ({ mainTitle, subTitle, blockProgress }: Props) => {
               <S.TeamDocButton>팀문서</S.TeamDocButton>
             </Link>
           )}
-          {!dashboardType && (
-            <S.AddbuttonWrapper>
-              <img src={addbutton}></img>
-            </S.AddbuttonWrapper>
-          )}
         </Flex>
       </Flex>
       <hr></hr>

diff --git a/src/components/InProgressDashboard.tsx b/src/components/InProgressDashboard.tsx
@@ -2,13 +2,11 @@ import { useNavigate, Outlet } from 'react-router-dom';
 import Block from './Block';
 import * as S from '../styles/DashboardStyled';
 import { createPersonalBlock } from '../api/PersonalBlockApi';
-import { useAtom } from 'jotai';
-import { visibleAtom } from '../contexts/sideScreenAtom';
 import SidePage from '../pages/SidePage';
 import { Droppable } from 'react-beautiful-dnd';
 import theme from '../styles/Theme/Theme';
 import main from '../img/main.png';
-import { BlockListResDto, StatusPersonalBlock } from '../types/PersonalBlock';
+import { BlockListResDto } from '../types/PersonalBlock';
 
 type Props = {
   // list: StatusPersonalBlock | undefined;
@@ -78,6 +76,8 @@ const InProgressDashboard = ({ list, id, dashboardId }: Props) => {
                 dDay={block.dDay ?? 0}
                 contents={block.contents ?? ''}
                 blockId={block.blockId ?? '0'}
+                dType={block.dType ?? 'TeamDashboard'}
+                name={block.nickname ?? '이름 없음'}
               />
             ))}
             {provided.placeholder}

diff --git a/src/components/NotStartedDashboard.tsx b/src/components/NotStartedDashboard.tsx
@@ -106,6 +106,8 @@ const NotStartedDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
                     dDay={block.dDay ?? 0}
                     contents={block.contents ?? ''}
                     blockId={block.blockId ?? '0'}
+                    dType={block.dType ?? 'TeamDashboard'}
+                    name={block.nickname ?? '이름 없음'}
                   />
                 </div>
               );

diff --git a/src/contexts/DashboardAtom.ts b/src/contexts/DashboardAtom.ts
@@ -1,3 +1,3 @@
 import { atom } from 'jotai';
 
-export const dashboardType = atom<boolean>(true); // true: 개인, false: 팀
+export const dashboardType = atom<boolean>(false); // true: 개인, false: 팀