얼추 완성된 컨테이너 그래프

src/components/graph/ContainerGraph.tsx

@@ -0,0 +1,97 @@
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Title,
+  Tooltip,
+  Legend,
+  ChartOptions,
+  TimeScale,
+  Filler,
+} from 'chart.js';
+import { Line } from 'react-chartjs-2';
+import 'chartjs-adapter-date-fns';
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, PointElement, Title, Tooltip, Legend, TimeScale, Filler);
+
+interface GraphProps {
+  jsonData: {
+    [key: number]: {
+      [dateString: string]: string;
+    };
+  };
+}
+
+const options: ChartOptions<'line'> = {
+  scales: {
+    x: {
+      type: 'time',
+      time: {
+        unit: 'minute',
+        tooltipFormat: 'HH:mm',
+        displayFormats: {
+          minute: 'HH:mm',
+        },
+      },
+      grid: {
+        display: true,
+        drawOnChartArea: true,
+        drawTicks: true,
+      },
+      ticks: {
+        autoSkip: true,
+        maxTicksLimit: 4,
+      },
+    },
+    y: {
+      grid: {
+        display: true,
+        color: '#EEEEEE',
+      },
+    },
+  },
+  plugins: {
+    legend: {
+      display: false,
+    },
+    tooltip: {
+      enabled: false,
+    },
+  },
+  elements: {
+    point: {
+      radius: 0,
+    },
+  },
+  interaction: {
+    mode: 'point',
+  },
+};
+
+export function ContainerGraph({ jsonData }: GraphProps) {
+  const firstKey = Object.keys(jsonData)[0] as string;
+  const dataMap = jsonData[Number(firstKey)];
+
+  const labels = Object.keys(dataMap).map((time) => new Date(time));
+  const usage = Object.values(dataMap).map((value) => parseFloat(value as string));
+
+  const data = {
+    labels,
+    datasets: [
+      {
+        data: usage,
+        backgroundColor: '#F0E6FF',
+        borderColor: '#9650FA',
+        fill: true,
+      },
+    ],
+  };
+
+  return (
+    <div style={{ width: '220px', height: '110px' }}>
+      <Line options={options} data={data} />
+    </div>
+  );
+}

src/pages/Team/deploy/Container/index.tsx

@@ -4,12 +4,26 @@ import { theme } from '@/style/theme';
 import { Tag } from '@/components/Team/Tag';
 import { XButton } from '@/components/common/XButton';
 import { ContainerAllType } from '@/utils/types/containerType';
-import { getAllContainer } from '@/utils/apis/container';
+import { getAllContainer, getCPU, getMemory } from '@/utils/apis/container';
 import { useParams } from 'react-router-dom';
+import { ContainerGraph } from '@/components/graph/ContainerGraph';
+
+type DateValueMap = {
+  [dateString: string]: string;
+};
+
+// 숫자 키를 가지며, 그 값이 DateValueMap 타입인 객체를 정의합니다.
+type JsonData = {
+  [key: number]: DateValueMap;
+};
 
 export const TeamDeployContainer = () => {
   const { deployUUID } = useParams();
   const [data, setData] = useState<ContainerAllType[]>();
+  const [prodCpu, setProdCpu] = useState<JsonData>();
+  const [prodMemory, setProdMemory] = useState<JsonData>();
+  const [stagCpu, setStagCpu] = useState<JsonData>();
+  const [stagMemory, setStagMemory] = useState<JsonData>();
 
   useEffect(() => {
     if (!deployUUID) return;
@@ -19,6 +33,30 @@ export const TeamDeployContainer = () => {
     });
   }, []);
 
+  useEffect(() => {
+    if (!deployUUID || !data) return;
+    getCPU(deployUUID, data[0].container_environment).then((res) => {
+      setProdCpu(res.data);
+      console.log(res.data);
+    });
+    if (!data[1]) return;
+    getCPU(deployUUID, data[1].container_environment).then((res) => {
+      setStagCpu(res.data);
+    });
+  }, [data]);
+
+  useEffect(() => {
+    if (!deployUUID || !data) return;
+    getMemory(deployUUID, data[0].container_environment).then((res) => {
+      setProdMemory(res.data);
+      console.log(res.data);
+    });
+    if (!data[1]) return;
+    getMemory(deployUUID, data[1].container_environment).then((res) => {
+      setStagMemory(res.data);
+    });
+  }, [data]);
+
   return (
     <Wrapper>
       <TitleContainer>
@@ -54,6 +92,32 @@ export const TeamDeployContainer = () => {
                       <span>마지막 배포: {item.last_deploy.split('T')[0]}</span>
                     </div>
                   </div>
+                  <div>
+                    {index === 0 && prodMemory && (
+                      <div>
+                        <span>메모리</span>
+                        <ContainerGraph jsonData={prodMemory} />
+                      </div>
+                    )}
+                    {index === 0 && prodCpu && (
+                      <div>
+                        <span>CPU</span>
+                        <ContainerGraph jsonData={prodCpu} />
+                      </div>
+                    )}
+                    {index === 1 && stagMemory && (
+                      <div>
+                        <span>메모리</span>
+                        <ContainerGraph jsonData={stagMemory} />
+                      </div>
+                    )}
+                    {index === 1 && stagCpu && (
+                      <div>
+                        <span>CPU</span>
+                        <ContainerGraph jsonData={stagCpu} />
+                      </div>
+                    )}
+                  </div>
                 </ContainerBox>
               );
             })}
@@ -198,4 +262,17 @@ const ContainerBox = styled.div`
       }
     }
   }
+  > div:nth-of-type(2) {
+    display: flex;
+    gap: 20px;
+    > div {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      > span {
+        font-size: 14px;
+        color: ${theme.color.gray6};
+      }
+    }
+  }
 `;