Merge pull request #82 from Weflo-A/develop

Develop
Weflo-A · Mar 8, 2024 · d5eda4d · d5eda4d
2 parents 479a6f3 + 5a93920
commit d5eda4d
Show file tree

Hide file tree

Showing 13 changed files with 273 additions and 93 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/axios": "^0.14.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.82",
     "@types/react": "^18.2.57",

diff --git a/src/api/dashboard.tsx b/src/api/dashboard.tsx
@@ -3,4 +3,8 @@ import client from './client';
 // 드론 그룹 내 드론 조회
 export const getDroneList = async (groupId: number) => {
   return await client.get(`/api/drone-group/${groupId}/drones`);
+
+// 드론 대시보드
+export const getDashMain = async (id: number) => {
+  return await client.get(`/api/drone/detail?droneId=${id}`);
 };
diff --git a/src/components/common/MenuTabGroup.tsx b/src/components/common/MenuTabGroup.tsx
@@ -46,10 +46,9 @@ const TabItem = styled.div<{ selected: boolean }>`
 
 const MenuTabGroup: React.FC<MenuTabGroupProps> = (props) => {
   const navigate = useNavigate();
-  const { groupId, id } = useParams();
-
+  const { id } = useParams();
   const handleTabClick = (id: number) => {
-    navigate(`/drone-group/${groupId}/drone/${id}/dashboard`);
+    navigate(`/drone-group/drone/${id}/dashboard`);
   };
 
   const renderGroupTabs = () => {
@@ -79,7 +78,7 @@ const MenuTabGroup: React.FC<MenuTabGroupProps> = (props) => {
     ));
   };
 
-  if (!groupId || !id) {
+  if (!id) {
     return null;
   }
 

diff --git a/src/components/dashboard/DroneDetail.tsx b/src/components/dashboard/DroneDetail.tsx
@@ -1,25 +1,53 @@
 import { Typography } from '@mui/material';
 import { useParams } from 'react-router-dom';
 import { Battery, Drone1, InfoCircle } from 'src/assets';
-import { droneListData } from 'src/assets/data/droneListData';
 import colors from 'src/constants/colors';
 import styled from 'styled-components';
 import ProgressBar from './ProgressBar';
 import {
-  CircularProgressbar,
   CircularProgressbarWithChildren,
   buildStyles,
 } from 'react-circular-progressbar';
 import 'react-circular-progressbar/dist/styles.css';
 
-const DroneDetail = () => {
+interface DroneInfo {
+  name: string;
+  productionYear: number;
+  model: string;
+  purpose: string;
+  cost: number;
+  accident: number;
+  balance: number;
+  totalScore: number;
+  motorAvg: number;
+  bladeAvg: number;
+  escAvg: number;
+}
+
+interface Props {
+  data: {
+    droneInfo: DroneInfo;
+  };
+}
+
+const DroneDetail = ({ data }: Props) => {
   const { id } = useParams<{ id: string }>();
 
-  const data = droneListData.find(
-    (drone) => drone.id === (id ? parseInt(id) : -1)
-  );
+  const {
+    name,
+    productionYear,
+    model,
+    purpose,
+    cost,
+    accident,
+    balance,
+    totalScore,
+    motorAvg,
+    bladeAvg,
+    escAvg,
+  } = data.droneInfo;
 
-  if (!data) {
+  if (!data.droneInfo) {
     return (
       <Typography variant='body1'>드론 정보를 찾을 수 없습니다.</Typography>
     );
@@ -29,7 +57,7 @@ const DroneDetail = () => {
     <Box>
       <Title>
         <Typography variant='body1' fontWeight='bold' color='white'>
-          {data.name}
+          {name}
         </Typography>
       </Title>
       <Drone1 />
@@ -39,23 +67,23 @@ const DroneDetail = () => {
             생산연도
           </Typography>
           <Typography fontSize='14px' fontWeight='bold' color='white'>
-            {data.year}
+            {productionYear}
           </Typography>
         </div>
         <div>
           <Typography variant='caption' color={colors.basic400}>
             모델명
           </Typography>
           <Typography fontSize='14px' fontWeight='bold' color='white'>
-            {data.model}
+            {model}
           </Typography>
         </div>
         <div>
           <Typography variant='caption' color={colors.basic400}>
             사용용도
           </Typography>
           <Typography fontSize='14px' fontWeight='bold' color='white'>
-            {data.usage}
+            {purpose}
           </Typography>
         </div>
       </One>
@@ -66,7 +94,7 @@ const DroneDetail = () => {
           </Typography>
           <Row>
             <Typography variant='h3' fontWeight='bold' color={colors.accent100}>
-              {data.cost.slice(0, -1)}
+              {cost}
             </Typography>
             <Typography variant='body2' color={colors.accent100}>
               원
@@ -79,7 +107,7 @@ const DroneDetail = () => {
           </Typography>
           <Row>
             <Typography variant='h3' fontWeight='bold' color={colors.green100}>
-              11
+              {accident}
             </Typography>
             <Typography variant='body2' color={colors.green100}>
               %
@@ -94,7 +122,7 @@ const DroneDetail = () => {
         <Circle>
           <CircleSize>
             <CircularProgressbarWithChildren
-              value={60}
+              value={balance}
               strokeWidth={10}
               styles={buildStyles({
                 rotation: 0,
@@ -109,21 +137,21 @@ const DroneDetail = () => {
               })}
             >
               <Typography variant='caption' color='white' lineHeight='120%'>
-                총 점수
+                밸런스
               </Typography>
               <Typography
                 variant='body2'
                 fontWeight='bold'
                 color={colors.yellow100}
                 lineHeight='120%'
               >
-                60%
+                {balance}%
               </Typography>
             </CircularProgressbarWithChildren>
           </CircleSize>
           <CircleSize>
             <CircularProgressbarWithChildren
-              value={80}
+              value={totalScore}
               strokeWidth={10}
               styles={buildStyles({
                 rotation: 0,
@@ -146,7 +174,7 @@ const DroneDetail = () => {
                 color={colors.green100}
                 lineHeight='120%'
               >
-                80%
+                {totalScore}%
               </Typography>
             </CircularProgressbarWithChildren>
           </CircleSize>
@@ -162,10 +190,10 @@ const DroneDetail = () => {
         <Row2>
           <Column>
             <BatteryStyle />
-            <ProgressBarStyle value={80} width={35} height={60} />
+            <ProgressBarStyle value={motorAvg} width={35} height={60} />
             <Num>
               <Typography variant='caption' fontWeight='bold' color='white'>
-                80%
+                {motorAvg}%
               </Typography>
             </Num>
             <Label>
@@ -176,10 +204,10 @@ const DroneDetail = () => {
           </Column>
           <Column>
             <BatteryStyle />
-            <ProgressBarStyle value={10} width={35} height={60} />
+            <ProgressBarStyle value={bladeAvg} width={35} height={60} />
             <Num>
               <Typography variant='caption' fontWeight='bold' color='white'>
-                10%
+                {bladeAvg}%
               </Typography>
             </Num>
             <Label>
@@ -190,10 +218,10 @@ const DroneDetail = () => {
           </Column>
           <Column>
             <BatteryStyle />
-            <ProgressBarStyle value={60} width={35} height={60} />
+            <ProgressBarStyle value={escAvg} width={35} height={60} />
             <Num>
               <Typography variant='caption' fontWeight='bold' color='white'>
-                60%
+                {escAvg}%
               </Typography>
             </Num>
             <Label>

diff --git a/src/components/dashboard/MixChart.tsx b/src/components/dashboard/MixChart.tsx
@@ -27,51 +27,66 @@ ChartJS.register(
   ArcElement
 );
 
-const MixChart: React.FC = () => {
-  const data = {
-    labels: [
-      '23.12.01',
-      '23.12.20',
-      '24.01.02',
-      '24.02.04',
-      '24.02.29',
-      '24.03.02',
-      '24.04.20',
-    ],
-    motorScores: [85 / 3, 88 / 3, 90 / 3, 92 / 3, 65 / 3],
-    bladeScores: [75 / 3, 78 / 3, 80 / 3, 82 / 3, 65 / 3],
-    escScores: [90 / 3, 92 / 3, 95 / 3, 97 / 3, 78 / 3],
-    total: [250 / 3, 258 / 3, 265 / 3, 271 / 3, 208 / 3],
-  };
+interface TimeLine {
+  date: string;
+  motorPoint: number;
+  bladePoint: number;
+  escPoint: number;
+}
+
+const MixChart: React.FC<{ timeLine: TimeLine[] }> = ({ timeLine }) => {
+  // const data = {
+  //   labels: [
+  //     '23.12.01',
+  //     '23.12.20',
+  //     '24.01.02',
+  //     '24.02.04',
+  //     '24.02.29',
+  //     '24.03.02',
+  //     '24.04.20',
+  //   ],
+  //   motorScores: [85 / 3, 88 / 3, 90 / 3, 92 / 3, 65 / 3],
+  //   bladeScores: [75 / 3, 78 / 3, 80 / 3, 82 / 3, 65 / 3],
+  //   escScores: [90 / 3, 92 / 3, 95 / 3, 97 / 3, 78 / 3],
+  //   total: [250 / 3, 258 / 3, 265 / 3, 271 / 3, 208 / 3],
+  // };
+  const labels = timeLine.map((entry) => entry.date);
+  const motorScores = timeLine.map((entry) => entry.motorPoint);
+  const bladeScores = timeLine.map((entry) => entry.bladePoint);
+  const escScores = timeLine.map((entry) => entry.escPoint);
+
+  const totalScores = motorScores.map((_, index) => {
+    return motorScores[index] + bladeScores[index] + escScores[index];
+  });
 
   const barData = {
-    labels: data.labels,
+    labels: labels,
     datasets: [
       {
         type: 'bar' as const,
         label: '모터',
         backgroundColor: colors.accent100,
-        data: data.motorScores,
+        data: motorScores,
         order: 1,
       },
       {
         type: 'bar' as const,
         label: '블레이드',
         backgroundColor: colors.accent50,
-        data: data.bladeScores,
+        data: bladeScores,
         order: 2,
       },
       {
         type: 'bar' as const,
         label: 'ESC',
         backgroundColor: colors.accent30,
-        data: data.escScores,
+        data: escScores,
         order: 3,
       },
       {
         type: 'line' as const,
         label: 'Total',
-        data: data.total,
+        data: totalScores,
         backgroundColor: colors.accent100,
         borderColor: colors.accent100,
         fill: false,