10/21 기능 개발 및 코드 개선

src/components/adReport/adContainer/AdContainer.tsx

@@ -1,22 +1,26 @@
-import Pagination from "@mui/material/Pagination";
+import { useState } from "react";
 
 import AdChart from "../../graphs/adChart/AdChart";
 import AdReportTable from "../../tables/adReportTable/AdReportTable";
-import "./_adContainer.style.scss";
+import AdFilter from "../adFilter/AdFilter";
+import styles from "./adContainer.module.scss";
+import { useAdQuery } from "./useAdQuery";
 
 const AdContainer = () => {
+  const [date, setDate] = useState<string>("");
+  const [productNumber, setProductNumber] = useState<string>(null);
+
+  const adData = useAdQuery(date, productNumber);
+
   return (
     <div>
-      <h1>광고 보고서</h1>
-      <div className="chartContainer">
-        <div className="chart">
+      <div className={styles.chartContainer}>
+        <AdFilter setDate={setDate} setProductNumber={setProductNumber} />
+        <div className={styles.chart}>
           <h3>3개월 간 광고 키워드 클릭 수 & 전환 수</h3>
-          <AdChart />
-        </div>
-        <AdReportTable />
-        <div className="pagination">
-          <Pagination count={10} />
+          <AdChart dataList={adData.data?.data.list} />
         </div>
+        <AdReportTable dataList={adData.data?.data.list} />
       </div>
     </div>
   );

src/components/adReport/adContainer/_adContainer.style.scss → src/components/adReport/adContainer/adContainer.module.scss

@@ -5,6 +5,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding-bottom: 175px;
   .chart {
     width: 83vw;
     display: flex;
@@ -14,9 +15,6 @@
     background: $bg_white;
     padding: 30px 0 10px 0;
     border-radius: 5px;
+    margin-top: 40px;
   }
 }
-.pagination {
-  margin-top: 40px;
-  padding-bottom: 40px;
-}

src/components/adReport/adContainer/useAdQuery.ts

@@ -0,0 +1,12 @@
+import { useQuery } from "react-query";
+import { getAdReport } from "../../../shared/apis/api";
+
+export const useAdQuery = (date: string, productNumber: string) => {
+  return useQuery(
+    ["sales", { date: date, productNumber: productNumber }],
+    () => getAdReport(date, productNumber),
+    {
+      enabled: !!date || !!productNumber,
+    }
+  );
+};

src/components/adReport/adFilter/AdFilter.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useMemo, useState } from "react";
+
+import styles from "./adFilter.module.scss";
+import DatePicker from "../../../elements/datePicker/DatePicker";
+import { MediumDropdown } from "../../../elements/dropdown/DropDown";
+import { useProductQuery } from "./useProductQuery";
+import { DataType, PropsType } from "./adFilter.type";
+
+const AdFilter = (props: PropsType) => {
+  const [selected, setSelected] = useState<string>(null);
+  const [selectedDate, setSelectedDate] = useState<string>("");
+
+  const result = useProductQuery(selectedDate);
+
+  const { productData } = useMemo(
+    () => ({
+      productData: result.data?.data.products,
+    }),
+    [result]
+  );
+
+  useEffect(() => {
+    props.setProductNumber(selected && selected.slice(-13));
+    props.setDate(selectedDate);
+  }, [selected, selectedDate]);
+
+  let productList: string[] = [];
+  productData &&
+    productData.map((item: DataType) => {
+      productList.push(`${item.p_Name} / ${item.p_No}`);
+    });
+
+  return (
+    <div className={styles.filterWrapper}>
+      <DatePicker setSelectedDate={setSelectedDate} />
+      <MediumDropdown
+        id={"adReport"}
+        placeholder={"상품"}
+        itemList={productList}
+        selected={selected}
+        setSelected={setSelected}
+      />
+    </div>
+  );
+};
+
+export default AdFilter;

src/components/adReport/adFilter/adFilter.module.scss

@@ -0,0 +1,11 @@
+@import "../../../styles/colors";
+
+.filterWrapper {
+  margin-top: 16px;
+  width: 83vw;
+  background: $bg_white;
+  border-radius: 5px;
+  padding: 20px 24px;
+  display: flex;
+  gap: 32px;
+}

src/components/adReport/adFilter/adFilter.type.ts

@@ -0,0 +1,10 @@
+export interface PropsType {
+  setDate: (date: string) => void;
+  setProductNumber: (productNumber: string) => void;
+}
+export interface DataType {
+  p_Cnt: number;
+  p_Name: string;
+  p_No: number;
+  p_Price: number;
+}

src/components/adReport/adFilter/useProductQuery.ts

@@ -0,0 +1,6 @@
+import { useQuery } from "react-query";
+import { getSalesReport } from "../../../shared/apis/api";
+
+export const useProductQuery = (date: string) => {
+  return useQuery("sales", () => getSalesReport(null, date));
+};

src/components/graphs/adChart/AdChart.tsx

@@ -1,21 +1,25 @@
 import Chart from "react-apexcharts";
 
-import { testData } from "./test";
-import "./_adChart.style.scss";
+import { PropsType } from "./adChart.type";
+
+const AdChart = (props: PropsType) => {
+  const dataList = props?.dataList;
 
-const AdChart = () => {
   let keywordList: string[] = [];
-  testData.map((x) => {
-    keywordList.push(x.keyword);
-  });
+  dataList &&
+    dataList.map((x) => {
+      keywordList.push(x.keyword);
+    });
   let clickCntList: number[] = [];
-  testData.map((x) => {
-    clickCntList.push(x.k_Click);
-  });
+  dataList &&
+    dataList.map((x) => {
+      clickCntList.push(x.k_Click);
+    });
   let conversionCntList: number[] = [];
-  testData.map((x) => {
-    conversionCntList.push(x.k_Trans);
-  });
+  dataList &&
+    dataList.map((x) => {
+      conversionCntList.push(x.k_Trans);
+    });
 
   let options = {
     xaxis: {

src/components/graphs/adChart/adChart.type.ts

@@ -0,0 +1,9 @@
+export interface PropsType {
+  dataList?: {
+    keyword: string;
+    k_Click: number;
+    k_Cost: number;
+    k_Trans: number;
+    p_Price: number;
+  }[];
+}

src/components/prodReport/prodContainer/ProdContainer.tsx

@@ -4,16 +4,13 @@ import styles from "./prodContainer.module.scss";
 import ProdReportTable from "../../tables/prodReportTable/ProdReportTable";
 import ProdFilter from "../prodFilter/ProdFilter";
 import { useSalesQuery } from "./useSalesQuery";
-import { useDate } from "./useDate";
 
 const ProdContainer = () => {
   const [category, setCategory] = useState<string>(null);
   const [date, setDate] = useState<string>(null);
 
-  const todayDate = useDate();
-
   // axios GET 보고서 데이터 조회
-  const salesData = useSalesQuery(category, !date ? todayDate : date);
+  const salesData = useSalesQuery(category, date);
 
   return (
     <div className={styles.tableContainer}>

src/components/prodReport/prodFilter/ProdFilter.tsx

@@ -9,7 +9,7 @@ import { PropsType } from "./prodFilter.type";
 const ProdFilter = (props: PropsType) => {
   const category = useCategory();
   const [selected, setSelected] = useState<string>("전체");
-  const [selectedDate, setSelectedDate] = useState<string>(null);
+  const [selectedDate, setSelectedDate] = useState<string>("");
 
   useEffect(() => {
     props.setCategory(selected === "전체" ? null : selected);

src/components/setAd/adButton/AdButton.tsx

@@ -1,5 +1,5 @@
 import { ProdDelBtn, SmallGrayBtn } from "../../../elements/buttons/Buttons";
-import styles from "./adButton.module.scss";
+import styles from "./adbutton.module.scss";
 import { SetStateAction, Dispatch } from "react";
 
 interface PropsType {

src/components/setParcel/parcelFilter/ParcelFilter.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+
+import DatePicker from "../../../elements/datePicker/DatePicker";
+import { MediumDropdown } from "../../../elements/dropdown/DropDown";
+import styles from "./parcelFilter.module.scss";
+import { PropsType } from "./parcelFilter.type";
+import { useProductQuery } from "./useProductQuery";
+
+const ParcelFilter = (props: PropsType) => {
+  const [selectedDate, setSelectedDate] = useState<string>(null);
+  const [selectedProduct, setSelectedProduct] = useState<string>(null);
+  const [selectedStatus, setSelectedStatus] = useState<string>(null);
+
+  useEffect(() => {
+    props.setDate(selectedDate);
+    props.setProduct(selectedProduct);
+    props.setStatus(selectedStatus);
+  }, [selectedDate, selectedProduct, selectedStatus]);
+
+  const productList = useProductQuery();
+
+  return (
+    <div className={styles.filterWrapper}>
+      <DatePicker setSelectedDate={setSelectedDate} />
+      <MediumDropdown
+        id={"parcelProducts"}
+        placeholder={"상품"}
+        itemList={productList}
+        selected={selectedProduct}
+        setSelected={setSelectedProduct}
+      />
+      <MediumDropdown
+        id={"parcelStatus"}
+        placeholder={"배송상태"}
+        itemList={["전체", "신규주문", "배송완료", "주문취소"]}
+        selected={selectedStatus}
+        setSelected={setSelectedStatus}
+      />
+    </div>
+  );
+};
+
+export default ParcelFilter;

src/components/setParcel/parcelFilter/parcelFilter.module.scss

@@ -0,0 +1,11 @@
+@import "../../../styles/colors";
+
+.filterWrapper {
+  margin-top: 16px;
+  width: 83vw;
+  background: $bg_white;
+  border-radius: 5px;
+  padding: 20px 24px;
+  display: flex;
+  gap: 32px;
+}

src/components/setParcel/parcelFilter/parcelFilter.type.ts

@@ -0,0 +1,5 @@
+export interface PropsType {
+  setDate: (date: string) => void;
+  setProduct: (product: string) => void;
+  setStatus: (status: string) => void;
+}

src/components/setParcel/parcelFilter/useProductQuery.ts

@@ -0,0 +1,11 @@
+import { useQuery } from "react-query";
+import { getAd } from "../../../shared/apis/api";
+
+export const useProductQuery = () => {
+  const { data } = useQuery("products", () => getAd());
+  let productList: string[] = [];
+  data?.data.productList.map(({ p_Name }: { p_No: number; p_Name: string }) => {
+    productList.push(p_Name);
+  });
+  return productList;
+};