✨ feat: api호출 하여 받아온 데이터 가공

src/@types/api.d.ts

@@ -1,6 +1,7 @@
 declare module 'request' {
   type ApiUrlType = '/media' | '/advertisements' | '/report';
   interface ReportInterface {
+    dataType: 'Report' | 'Media';
     imp: number;
     click: number;
     cost: number;
@@ -35,6 +36,7 @@ declare module 'request' {
   }
 
   interface MediaInterface {
+    dataType: 'Report' | 'Media';
     channel: string;
     date: string;
 
@@ -54,4 +56,11 @@ declare module 'request' {
     reports: ReportInterface[];
     media: MediaInterface[];
   }
+
+  interface TotalData {
+    [date: string]: {
+      reports: ReportInterface[];
+      media: MediaInterface[];
+    };
+  }
 }

src/App.tsx

@@ -1,7 +1,13 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Router from '@/routes';
+import { useTotalDataManagement } from './api/models/useTotalDataManagement';
 
 function App() {
+  const { weekList, getTotalData } = useTotalDataManagement();
+  useEffect(() => {
+    console.log('Apprender');
+  }, []);
+
   return <Router />;
 }
 

src/api/models/useTotalDataManagement.ts

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { TotalDataManagementInterface } from 'request';
 import { apiRequest } from '../instance';
 import createWeekList from '@/utils/createWeekList';
+import createWeeklyList from '@/utils/createWeeklyList';
 
 export const useTotalDataManagement = () => {
   const [totalData, setTotalData] = useState<TotalDataManagementInterface>({
@@ -18,17 +19,19 @@ export const useTotalDataManagement = () => {
         apiRequest.get('/media'),
       ]);
 
-      const reportsData = dateFormat(reportsResponse);
-      const mediaData = dateFormat(mediaResponse);
+      const reportsFormattedData = dateFormat(reportsResponse);
+      const MediaFormattedData = dateFormat(mediaResponse);
 
       setTotalData({
-        reports: reportsData,
-        media: mediaData,
+        reports: reportsFormattedData,
+        media: MediaFormattedData,
       });
-      setWeekList(createWeekList(reportsData, mediaData));
+
+      console.log(createWeeklyList(reportsFormattedData, MediaFormattedData));
+      setWeekList(createWeekList(reportsFormattedData, MediaFormattedData));
     } catch (error) {
       console.log(error);
-      alert('데이터를 불러오는데 실패 하였습니다. 관리자에게 문의하세요');
+      /* alert('데이터를 불러오는데 실패 하였습니다. 관리자에게 문의하세요'); */
     }
   };
 

src/components/DropDownMenu/index.tsx

@@ -16,7 +16,6 @@ const DropDownMenu = () => {
   const clickedWeekList = (event: React.MouseEvent<HTMLElement>) => {
     console.log(event.currentTarget.textContent);
   };
-
   return (
     <PopupState variant="popover" popupId="demo-popup-menu">
       {(popupState) => (

src/pages/index.tsx

@@ -1,3 +1,2 @@
 export { default as DashboardPage } from './DashboardPage';
 export { default as ManagementPage } from './ManagementPage';
-export { default as DrawerTest } from './DrawerTest';

src/routes/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Route, Routes, Navigate } from 'react-router-dom';
 import Layout from '@/components/Layout';
-import { DashboardPage, ManagementPage, DrawerTest } from '@/pages';
+import { DashboardPage, ManagementPage } from '@/pages';
 
 const Router = () => {
   return (

src/utils/createWeekList.ts

@@ -11,7 +11,7 @@ const getStartDateOfWeek = (date: string) => {
   let dataFns = new Date(date);
   let startDate = '';
   if (isMonday(dataFns)) {
-    startDate = format(new Date(date), 'yyyy년MM월dd일');
+    return (startDate = format(new Date(date), 'yyyy년MM월dd일'));
   } else {
     startDate = format(previousMonday(new Date(date)), 'yyyy년MM월dd일');
   }
@@ -29,7 +29,7 @@ const getEndDateOfWeek = (date: string) => {
   return endDate;
 };
 
-const makeWeekList = (date: string, weekArray: Array<string>) => {
+const makeWeekList = (date: string, weekArray: string[]) => {
   const startDateOfWeek = getStartDateOfWeek(date);
   const endDateOfWeek = getEndDateOfWeek(date);
   const periodOfWeek = `${startDateOfWeek} ~ ${endDateOfWeek}`;
@@ -53,7 +53,6 @@ const createWeekList = (
     makeWeekList(media.date, weekArray);
   });
 
-  console.log(weekArray);
   return weekArray;
 };
 

src/utils/createWeeklyList.ts

@@ -0,0 +1,162 @@
+import {
+  format,
+  isMonday,
+  previousMonday,
+  isSunday,
+  nextSunday,
+  getUnixTime,
+} from 'date-fns';
+import { MediaInterface, ReportInterface, TotalData } from 'request';
+
+type CombineDataType = ReportInterface | MediaInterface;
+
+const addTypeAndYearMonthDate = (
+  data: CombineDataType,
+  dataType: 'Report' | 'Media'
+) => {
+  const date = new Date(data.date);
+  const yearMonthDate = format(date, 'yyyy년MM월dd일');
+  const monthDate = format(date, 'MM월dd일');
+
+  return { ...data, yearMonthDate, monthDate, dataType };
+};
+
+const sortData = (
+  combineDataA: CombineDataType,
+  combineDataB: CombineDataType
+) => {
+  const unixTimeA = getUnixTime(new Date(combineDataA.date));
+  const unixTimeB = getUnixTime(new Date(combineDataB.date));
+
+  return unixTimeB - unixTimeA;
+};
+
+const combineData = (
+  reportData: ReportInterface[],
+  mediaData: MediaInterface[]
+) => {
+  const combinedData: CombineDataType[] = [];
+  reportData.forEach((report) => {
+    combinedData.push(addTypeAndYearMonthDate(report, 'Report'));
+  });
+
+  mediaData.forEach((media) => {
+    combinedData.push(addTypeAndYearMonthDate(media, 'Media'));
+  });
+
+  combinedData.sort(sortData);
+
+  return combinedData;
+};
+
+const multiDimensionalUnique = (dateList: string[][]) => {
+  const uniques = [];
+  const itemsFound: { [key: string]: boolean } = {};
+
+  for (const date of dateList) {
+    const stringified = JSON.stringify(date);
+    if (itemsFound[stringified]) continue;
+    uniques.push(date);
+    itemsFound[stringified] = true;
+  }
+
+  return uniques;
+};
+
+const getStartDateOfWeek = (date: string) => {
+  let startDate = new Date(date);
+  if (isMonday(startDate))
+    return [
+      format(startDate, 'yyyy-MM-dd'),
+      format(startDate, 'yyyy년MM월dd일'),
+    ];
+
+  return [
+    format(previousMonday(startDate), 'yyyy-MM-dd'),
+    format(previousMonday(startDate), 'yyyy년MM월dd일'),
+  ];
+};
+
+const getEndDateOfWeek = (date: string) => {
+  let endDate = new Date(date);
+  if (isSunday(endDate))
+    return [format(endDate, 'yyyy-MM-dd'), format(endDate, 'yyyy년MM월dd일')];
+
+  return [
+    format(nextSunday(endDate), 'yyyy-MM-dd'),
+    format(nextSunday(endDate), 'yyyy년MM월dd일'),
+  ];
+};
+
+const makeWeekList = (date: string) => {
+  const [startDate, startDateOfWeek] = getStartDateOfWeek(date);
+  const [endDate, endDateOfWeek] = getEndDateOfWeek(date);
+  const periodOfWeek = `${startDateOfWeek} ~ ${endDateOfWeek}`;
+
+  return { periodOfWeek, startDate, endDate };
+};
+
+const makeDeduplicatedDateList = (combinedData: CombineDataType[]) => {
+  const dateList: string[][] = [];
+  [...new Set(combinedData.map((data) => data.date))].forEach((data) => {
+    const { periodOfWeek, startDate, endDate } = makeWeekList(data);
+    dateList.push([periodOfWeek, startDate, endDate]);
+  });
+
+  return multiDimensionalUnique(dateList);
+};
+
+const checkBetweenStartAndEndDate = ({
+  date,
+  startDate,
+  endDate,
+}: {
+  date: string;
+  startDate: string;
+  endDate: string;
+}) => {
+  return (
+    getUnixTime(new Date(date)) >= getUnixTime(new Date(startDate)) &&
+    getUnixTime(new Date(date)) <= getUnixTime(new Date(endDate))
+  );
+};
+
+const setWeeklyData = (
+  dataList: string[][],
+  combinedData: CombineDataType[]
+) => {
+  const weeklyData: TotalData = {};
+
+  dataList.forEach(([periodOfWeek, startDate, endDate]) => {
+    const reportData = combinedData.filter(
+      (data) =>
+        data.dataType === 'Report' &&
+        checkBetweenStartAndEndDate({ date: data.date, startDate, endDate })
+    );
+
+    const mediaData = combinedData.filter(
+      (data) =>
+        data.dataType === 'Media' &&
+        checkBetweenStartAndEndDate({ date: data.date, startDate, endDate })
+    );
+
+    weeklyData[periodOfWeek] = {
+      reports: reportData as ReportInterface[],
+      media: mediaData as MediaInterface[],
+    };
+  });
+
+  return weeklyData;
+};
+
+const createWeeklyList = (
+  reportData: ReportInterface[],
+  mediaData: MediaInterface[]
+) => {
+  const combinedData = combineData(reportData, mediaData);
+  const dataList = makeDeduplicatedDateList(combinedData);
+
+  return setWeeklyData(dataList, combinedData);
+};
+
+export default createWeeklyList;

tsconfig.json

@@ -14,6 +14,7 @@
     "isolatedModules": true, //각 파일을 분리된 모듈로 트랜스파일
     "baseUrl": "./", // Non-relativ 모듈 혹은 paths 옵션의 기준 디렉토리
     "resolveJsonModule": true, // 타입스크립트에서 json모듈 import 되도록 허용
+    "downlevelIteration": true,
     "paths": {
       // baseUrl 옵션을 기준디렉토리로 불러올 모듈의 위치 설정이 가능
       "@/*": ["src/*"]