Feature/kiseon

src/api/order.ts

@@ -1,15 +1,44 @@
 import { client } from './client';
 
-/**
- * 인자가 필요하다면 인자를 받고 api를 return 하세요
- * index.ts 에서 모든 API를 return 하고있으니
- * 여기서는 API 하나만 return 하면 됩니다.
- *
- * { productsApi, bannersApi, categoryApi, promotionApi, userApi, cartApi, orderApi }
- * 본인 API 위치에서 productsApi.예시(인자) 이런식으로 사용하세요
- * @param id
- * @returns
- */
-export const 예시 = async (id: number) => {
-  return client.get(`/API 주소 적으세요/${id}`);
+// export const getOrderSearch = async (params?: any) => {
+//   return client
+//     .get(`order/search`, { params: params })
+//     .then((response) => response)
+//     .catch((error) => {
+//       console.log(error);
+//     });
+// };
+export const getOrderSearch = async (params?: any) => {
+  return client
+    .get(`order/search`, { params: params })
+    .then((response) => response)
+    .catch((error) => {
+      console.log(error);
+    });
+};
+export const getOrderStatistics = async () => {
+  return client
+    .get(`order/statistics`)
+    .then((response) => response)
+    .catch((error) => {
+      console.log(error);
+    });
+};
+export const postOrderPurchase = async (
+  order_id: number,
+  purchase_number: number,
+  purchase_date: string,
+  status: string
+) => {
+  const params: any = {};
+  if (order_id !== undefined) params.order_id = order_id;
+  if (purchase_number !== undefined) params.purchase_number = purchase_number;
+  if (purchase_date !== undefined) params.purchase_date = purchase_date;
+  if (status !== undefined) params.status = status;
+  return client
+    .post(`order/purchase`)
+    .then((response) => response, params)
+    .catch((error) => {
+      console.log(error);
+    });
 };

src/pages/admin/components/Category.tsx

@@ -147,6 +147,7 @@ export const Category = ({ onClose }: { onClose: () => void }) => {
   const onSubmit = (data: any) => {
     postCategoryMutation.mutate({ parent_id, name: data.addCategoryName });
   };
+  //같은카테고리 요청할때 셍긱하기, 키를 동적으로 받기|  대분류 중분류 소분류 api 같은걸로 할 수 있기
   return (
     <div className='fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center'>
       <div onClick={onClose} className='absolute h-full w-full bg-black/50' />

src/pages/admin/components/Pagination.tsx

@@ -1,30 +1,33 @@
 import { useEffect } from 'react';
 import { PaginationProps } from './type';
+import { useSearchParams } from 'react-router-dom';
 
 const Pagination = ({ total = 200, page, setPage }: PaginationProps) => {
-  const limit = Number(localStorage.getItem('pageListLimit') || '100'); //page_size
-
+  const [searchParams, setSearchParams] = useSearchParams();
+  const limit = Number(localStorage.getItem('pageListLimit') || '10');
   const numPages = Math.ceil(total / limit);
-
   const showedLecture = new Array(numPages).fill(0);
-  //린트가 알려주는 방법도 있음
-  useEffect(() => {}, [total]);
+  useEffect(() => {
+    const currentParams = new URLSearchParams(searchParams);
+    currentParams.set('page', String(page));
+    setSearchParams(currentParams);
+  }, [page]);
   return (
     <div className='mt-5 flex items-center justify-center'>
-      <button type='button' onClick={() => setPage(page - 1)} disabled={page === 1}>
+      <button type='button' onClick={() => setPage(page - 1)} disabled={page === 1} className='p-1'>
         &lt;
       </button>
       {showedLecture.map((_, index) => (
         <button
           type='button'
           key={index + 1}
           onClick={() => setPage(index + 1)}
-          className={index + 1 === page ? 'font-semibold text-black' : 'font-thin text-neutral-500'}
+          className={`p-1 ${index + 1 === page ? 'font-semibold text-black' : 'font-thin text-neutral-500'}`}
         >
           {index + 1}
         </button>
       ))}
-      <button type='button' onClick={() => setPage(page + 1)} disabled={page === numPages}>
+      <button type='button' onClick={() => setPage(page + 1)} disabled={page === numPages} className='p-1'>
         &gt;
       </button>
     </div>

src/pages/admin/components/SectionBox.tsx

@@ -25,11 +25,9 @@ export const SectionBox = ({
                 className='mr-4 w-20 rounded-md border border-neutral-200 px-1 py-1 text-sm'
                 onChange={(e) => {
                   const value = e.target.value;
-
                   if (setPageLimit) {
                     setPageLimit(Number(value));
                     localStorage.setItem('pageListLimit', value);
-
                     const currentParams = new URLSearchParams(searchParams);
                     currentParams.set('page_size', value);
                     setSearchParams(currentParams);

src/pages/admin/product/ProductSearch.tsx

@@ -37,13 +37,14 @@ const ProductSearch = () => {
     error,
     refetch,
   } = useQuery({
-    queryKey: ['productFilter', searchParams.toString(), pageLimit],
+    queryKey: ['productFilter', searchParams.toString(), pageLimit, page],
     queryFn: async () => {
       const response = await adminApi.getAdminProducts(searchParams);
       if (!response) return null;
       return response.data;
     },
   });
+
   useEffect(() => {
     refetch();
   }, [pageLimit, refetch]);

src/pages/admin/product/components/ProductList.tsx

@@ -33,6 +33,7 @@ const ProductList = ({
   setQuantitPopupData,
   setSearchParams,
 }: ProductListProps) => {
+  const productList = productListArray?.products;
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const [checkedList, setCheckedList] = useState<ProductListType[]>([]);
@@ -74,7 +75,7 @@ const ProductList = ({
 
   return (
     <SectionBox
-      title={`상품목록 총(${productListArray?.length}개)`}
+      title={`상품목록 총(${productListArray && productListArray.total_count}개)`}
       selectOptions={true}
       pageLimit={pageLimit}
       setPageLimit={setPageLimit}
@@ -85,14 +86,14 @@ const ProductList = ({
           HeaderListArray={ListHeaderArray}
           checkedList={checkedList}
           setCheckedList={setCheckedList}
-          listArray={productListArray}
+          listArray={productList}
         />
         <div>
-          {!productListArray && <div className='mt-5 text-center text-base text-neutral-500'>상품이 없습니다.</div>}
+          {!productList && <div className='mt-5 text-center text-base text-neutral-500'>상품이 없습니다.</div>}
           {isPending && <div>Loading...</div>}
           {error && <div>An error has occurred: {error.message}</div>}
-          {productListArray &&
-            productListArray.map((item, index) => (
+          {productList &&
+            productList.map((item, index) => (
               <div
                 key={index}
                 className='flex items-center justify-stretch justify-items-center self-stretch border-b border-neutral-200 py-3 text-center'
@@ -194,7 +195,7 @@ const ProductList = ({
             판매중
           </button>
         </div>
-        <Pagination total={10} page={page} setPage={setPage} />
+        <Pagination total={productListArray && productListArray.total_count} page={page} setPage={setPage} />
       </div>
     </SectionBox>
   );

src/pages/admin/product/type.ts

@@ -32,7 +32,7 @@ export interface ProductListType {
 }
 
 export interface ProductListProps {
-  productListArray: ProductListType[];
+  productListArray: { products: ProductListType[]; total_count: number };
   isPending: boolean;
   error: any;
   pageLimit: number;
@@ -47,6 +47,7 @@ export interface ProductFilterProps {
   pageLimit: number;
   setSearchParams: (params: any) => void;
   onSubmit: () => void;
+  searchParams?: URLSearchParams;
 }
 
 export interface ProductFilterFormData {

src/pages/admin/sale/ordering/SaleOrdering.tsx

@@ -3,14 +3,12 @@ import ProductStatusDashboard from '../../components/ProductStatusDashboard';
 import OrderingList from './components/OrderList';
 import OrderStatePopup from './components/OrderStatePopup';
 import { OrderingListType } from './type';
-
-const productStatusArray = [
-  { title: '발주 전', count: 0 },
-  { title: '발주 후', count: 0 },
-];
+import { useQuery } from '@tanstack/react-query';
+import { orderApi } from '@/api';
 
 const SaleOrdering = () => {
   const [checkedList, setCheckedList] = useState<OrderingListType[]>([]);
+
   const [isOpen, setIsOpen] = useState(false);
   useEffect(() => {
     if (isOpen) {
@@ -22,6 +20,19 @@ const SaleOrdering = () => {
       document.body.style.overflow = 'auto';
     };
   }, [isOpen]);
+  const { data: orderStatisticsData } = useQuery({
+    queryKey: ['orderStatisiecs'],
+    queryFn: async () => {
+      const response = await orderApi.getOrderStatistics();
+      if (!response) return null;
+      return response.data;
+    },
+    staleTime: 1000 * 60,
+  });
+  const productStatusArray = [
+    { title: '신규주문(발주확인 처리 전)', count: orderStatisticsData?.pending_orders },
+    { title: '신규주문(발주확인 처리 후)', count: orderStatisticsData?.shipping_orders },
+  ];
   return (
     <>
       <ProductStatusDashboard productStatusArray={productStatusArray} />