From e8429e7d986b9a74021b8f7e48e5657eebade70b Mon Sep 17 00:00:00 2001
From: TaeSeung Yoo <59465914+gudusol@users.noreply.github.com>
Date: Wed, 15 Jan 2025 00:49:09 +0900
Subject: [PATCH] =?UTF-8?q?[Feat/#73]=20=EA=B4=80=EB=A6=AC=EC=9E=90=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=88=98=EC=A0=95(=ED=95=84?=
 =?UTF-8?q?=ED=84=B0=20=EC=A1=B0=EA=B1=B4=20=EC=B6=94=EA=B0=80=20&=20?=
 =?UTF-8?q?=EC=83=81=ED=92=88=20=EC=88=9C=EC=84=9C=20=EB=B3=80=EA=B2=BD=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5)=20(#74)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 관리자 상품 조회 순서 변경 기능 추가

* feat: 관리자 상품 추가 모달에 카테고리 반영

* feat: 관리자 페이지 주문 조회 staleTime 추가

* feat: 관리자 주문 조회 필터 조건 추가(주문 번호, 보내는 분, 받는 분)

* design: 관리자 상품 조회 페이지 행 cursor 변경
---
 package.json                                  |   2 +
 src/apis/domains/admin/useFetchOrders.ts      |   1 +
 src/apis/domains/admin/usePatchSequence.ts    |  42 +++++
 .../Admin/components/Filter/Filter.style.ts   |   6 +-
 src/pages/Admin/components/Filter/Filter.tsx  |  80 +++++++--
 .../ProductAddModal/ProductAddModal.tsx       |   6 +-
 .../components/ProductTable/ProductTable.tsx  | 152 +++++++++++-------
 .../components/SortableRow/SortableRow.tsx    |  65 ++++++++
 .../Admin/page/AdminPage/AdminPage.style.ts   |   1 +
 .../page/AdminPage/OrderCheck/OrderCheck.tsx  |  28 +++-
 .../AdminPage/ProductCheck/ProductCheck.tsx   |   2 +
 yarn.lock                                     |  36 +++++
 12 files changed, 345 insertions(+), 76 deletions(-)
 create mode 100644 src/apis/domains/admin/usePatchSequence.ts
 create mode 100644 src/pages/Admin/components/SortableRow/SortableRow.tsx

diff --git a/package.json b/package.json
index d3be8c6..1045ad8 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,8 @@
     "svgr": "npx @svgr/cli -d src/assets/svg --ignore-existing --typescript --no-dimensions public/svg"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.13.3",
     "@tanstack/react-query": "^5.56.2",
     "@tanstack/react-query-devtools": "^5.62.16",
diff --git a/src/apis/domains/admin/useFetchOrders.ts b/src/apis/domains/admin/useFetchOrders.ts
index 1c98a8c..1399125 100644
--- a/src/apis/domains/admin/useFetchOrders.ts
+++ b/src/apis/domains/admin/useFetchOrders.ts
@@ -49,5 +49,6 @@ export const useFetchOrders = (query: queryType) => {
     },
     initialPageParam: -1, // 초기 페이지 파라미터 설정
     select: (data) => (data.pages ?? []).flatMap((page) => page?.orders),
+    staleTime: 1000 * 60,
   });
 };
diff --git a/src/apis/domains/admin/usePatchSequence.ts b/src/apis/domains/admin/usePatchSequence.ts
new file mode 100644
index 0000000..7bb3d39
--- /dev/null
+++ b/src/apis/domains/admin/usePatchSequence.ts
@@ -0,0 +1,42 @@
+import { adminPatch } from "@apis/api";
+import { QUERY_KEY } from "@apis/queryKeys/queryKeys";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { ErrorResponse, MutateResponseType } from "@types";
+
+interface PatchProductSequence {
+  productId: number;
+  currentSequence: number;
+  newSequence: number;
+}
+
+const patchProductSequence = async ({
+  productId,
+  currentSequence,
+  newSequence,
+}: PatchProductSequence): Promise<MutateResponseType> => {
+  try {
+    const response = await adminPatch<MutateResponseType>(
+      `api/v1/product/sequence/${productId.toString()}?currentSequence=${currentSequence}&newSequence=${newSequence}`
+    );
+    return response.data;
+  } catch (error) {
+    const errorResponse = error as ErrorResponse;
+    const errorData = errorResponse.response.data;
+    throw errorData;
+  }
+};
+
+export const usePatchSequence = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      productId,
+      currentSequence,
+      newSequence,
+    }: PatchProductSequence) =>
+      patchProductSequence({ productId, currentSequence, newSequence }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.PRODUCT_LIST_ALL] });
+    },
+  });
+};
diff --git a/src/pages/Admin/components/Filter/Filter.style.ts b/src/pages/Admin/components/Filter/Filter.style.ts
index e32f0ea..72e7609 100644
--- a/src/pages/Admin/components/Filter/Filter.style.ts
+++ b/src/pages/Admin/components/Filter/Filter.style.ts
@@ -25,8 +25,12 @@ export const rowStyle = (theme: Theme) => css`
   background-color: ${theme.color.white};
 `;
 
+export const inputWrapper = css`
+  width: 20rem;
+`;
+
 export const productSelectStyle = (theme: Theme) => css`
-  width: 40rem;
+  width: 30rem;
   ${theme.font["subhead-m-14"]}
 
   & #react-select-3-listbox {
diff --git a/src/pages/Admin/components/Filter/Filter.tsx b/src/pages/Admin/components/Filter/Filter.tsx
index 95bb63e..1f7ff44 100644
--- a/src/pages/Admin/components/Filter/Filter.tsx
+++ b/src/pages/Admin/components/Filter/Filter.tsx
@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react";
-import { Button, DateSelect } from "@components";
+import { Button, DateSelect, Input } from "@components";
 import FilterAttribute from "../FilterAttribute/FilterAttribute";
 import {
   buttonContainer,
   filterContainer,
   filterTable,
+  inputWrapper,
   productSelectStyle,
   rowStyle,
   statusSelectStyle,
@@ -28,10 +29,15 @@ const statusOptions: Option[] = [
 ];
 
 interface FilterProps {
-  orderReceivedDateRef: React.MutableRefObject<Dayjs | null>;
-  deliveryDateRef: React.MutableRefObject<Dayjs | null>;
-  productRef: React.MutableRefObject<Option | null>;
-  statusRef: React.MutableRefObject<Option | null>;
+  filterRef: {
+    orderNumberRef: React.MutableRefObject<string | null>;
+    senderNameRef: React.MutableRefObject<string | null>;
+    recipientNameRef: React.MutableRefObject<string | null>;
+    orderReceivedDateRef: React.MutableRefObject<Dayjs | null>;
+    deliveryDateRef: React.MutableRefObject<Dayjs | null>;
+    productRef: React.MutableRefObject<Option | null>;
+    statusRef: React.MutableRefObject<Option | null>;
+  };
   handleSearchClick: () => void;
   handleResetClick: () => void;
 }
@@ -42,10 +48,7 @@ interface GroupedOption {
 }
 
 const Filter = ({
-  orderReceivedDateRef,
-  deliveryDateRef,
-  productRef,
-  statusRef,
+  filterRef,
   handleSearchClick,
   handleResetClick,
 }: FilterProps) => {
@@ -60,6 +63,9 @@ const Filter = ({
     },
   ]);
 
+  const [orderNumber, setOrderNumber] = useState<string | null>(null);
+  const [senderName, setSenderName] = useState<string | null>(null);
+  const [recipientName, setRecipientName] = useState<string | null>(null);
   const [orderReceivedDate, setOrderReceivedDate] = useState<Dayjs | null>(
     null
   );
@@ -91,6 +97,9 @@ const Filter = ({
   }, [isSuccessProduct, productData]);
 
   const handleResetState = () => {
+    setOrderNumber(null);
+    setSenderName(null);
+    setRecipientName(null);
     setOrderReceivedDate(null);
     setDeliveryDate(null);
     setProduct(null);
@@ -102,12 +111,55 @@ const Filter = ({
   return (
     <article css={filterContainer}>
       <div css={filterTable}>
+        <div css={rowStyle}>
+          <FilterAttribute label="주문 번호">
+            <div css={inputWrapper}>
+              <Input
+                type="text"
+                value={orderNumber?.toString() || ""}
+                placeholder="주문 번호"
+                onChange={(e) => {
+                  filterRef.orderNumberRef.current = e.target.value;
+                  setOrderNumber(e.target.value);
+                }}
+              />
+            </div>
+          </FilterAttribute>
+        </div>
+        <div css={rowStyle}>
+          <FilterAttribute label="보내는 분">
+            <div css={inputWrapper}>
+              <Input
+                type="text"
+                value={senderName || ""}
+                placeholder="보내는 분"
+                onChange={(e) => {
+                  filterRef.senderNameRef.current = e.target.value;
+                  setSenderName(e.target.value);
+                }}
+              />
+            </div>
+          </FilterAttribute>
+          <FilterAttribute label="받는 분">
+            <div css={inputWrapper}>
+              <Input
+                type="text"
+                value={recipientName || ""}
+                placeholder="받는 분"
+                onChange={(e) => {
+                  filterRef.recipientNameRef.current = e.target.value;
+                  setRecipientName(e.target.value);
+                }}
+              />
+            </div>
+          </FilterAttribute>
+        </div>
         <div css={rowStyle}>
           <FilterAttribute label="접수 날짜">
             <DateSelect
               selected={orderReceivedDate}
               onChange={(date) => {
-                orderReceivedDateRef.current = date;
+                filterRef.orderReceivedDateRef.current = date;
                 setOrderReceivedDate(date);
               }}
             />
@@ -116,7 +168,7 @@ const Filter = ({
             <DateSelect
               selected={deliveryDate}
               onChange={(date) => {
-                deliveryDateRef.current = date;
+                filterRef.deliveryDateRef.current = date;
                 setDeliveryDate(date);
               }}
             />
@@ -131,13 +183,11 @@ const Filter = ({
               value={product}
               onChange={(selectedOption) => {
                 const selectValue = selectedOption as Option | null;
-                productRef.current = selectedOption as Option | null;
+                filterRef.productRef.current = selectedOption as Option | null;
                 setProduct(selectValue);
               }}
             />
           </FilterAttribute>
-        </div>
-        <div css={rowStyle}>
           <FilterAttribute label="상태">
             <Select
               css={statusSelectStyle}
@@ -146,7 +196,7 @@ const Filter = ({
               value={status}
               onChange={(selectedOption) => {
                 const selectValue = selectedOption as Option | null;
-                statusRef.current = selectValue;
+                filterRef.statusRef.current = selectValue;
                 setStatus(selectValue);
               }}
             />
diff --git a/src/pages/Admin/components/ProductAddModal/ProductAddModal.tsx b/src/pages/Admin/components/ProductAddModal/ProductAddModal.tsx
index 93b0012..50d9e7d 100644
--- a/src/pages/Admin/components/ProductAddModal/ProductAddModal.tsx
+++ b/src/pages/Admin/components/ProductAddModal/ProductAddModal.tsx
@@ -8,13 +8,15 @@ import {
 } from "./ProductAddModal.style";
 import { useState } from "react";
 import { usePostProduct } from "@apis/domains/admin/usePostProduct";
+import { CategoryType } from "@types";
 
 interface ModalProps {
   onClose: () => void;
+  category: CategoryType;
 }
 
-const ProductAddModal = ({ onClose }: ModalProps) => {
-  const [isTrial, setIsTrial] = useState(true);
+const ProductAddModal = ({ onClose, category }: ModalProps) => {
+  const [isTrial, setIsTrial] = useState(category === "experience");
   const [productName, setProductName] = useState<string>("");
   const [productPrice, setProductPrice] = useState<number>(0);
 
diff --git a/src/pages/Admin/components/ProductTable/ProductTable.tsx b/src/pages/Admin/components/ProductTable/ProductTable.tsx
index 2069c93..fb459cb 100644
--- a/src/pages/Admin/components/ProductTable/ProductTable.tsx
+++ b/src/pages/Admin/components/ProductTable/ProductTable.tsx
@@ -1,30 +1,55 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   buttonContainer,
-  cellWidth,
-  checkboxStyle,
-  productNameStyle,
   sectionStyle,
   sectionTitle,
   tableStyle,
   tableTitle,
 } from "./ProductTable.style";
 import { Button, Modal } from "@components";
-import Switch from "react-switch";
-import { ProductWithSailed } from "@types";
+import { CategoryType, ProductWithSailed } from "@types";
 import { usePatchProduct } from "@apis/domains/admin/usePatchProduct";
 import { useDeleteProduct } from "@apis/domains/admin/useDeleteProduct";
 import ProductAddModal from "../ProductAddModal/ProductAddModal";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  arrayMove,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import SortableRow from "../SortableRow/SortableRow";
+import { usePatchSequence } from "@apis/domains/admin/usePatchSequence";
+
 interface ProductTableProps {
-  title: string;
+  title: "체험 상품" | "판매 상품";
   products: ProductWithSailed[];
+  category: CategoryType;
 }
 
-const ProductTable = ({ title, products }: ProductTableProps) => {
+const ProductTable = ({ title, products, category }: ProductTableProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
+  const [productList, setProductList] = useState(products);
   const { mutate: patchProduct } = usePatchProduct();
   const { mutate: deleteProduct } = useDeleteProduct();
+  const { mutate: patchProductSequence } = usePatchSequence();
+
+  useEffect(() => {
+    setProductList(products);
+  }, [products]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor)
+  );
 
   const handleModalClose = () => {
     setIsModalOpen(false);
@@ -40,19 +65,43 @@ const ProductTable = ({ title, products }: ProductTableProps) => {
 
   const handleSelectAllChange = (isChecked: boolean) => {
     if (isChecked) {
-      const allProductIds = products.map((product) => product.productId);
+      const allProductIds = productList.map((product) => product.productId);
       setSelectedProducts(allProductIds);
     } else {
       setSelectedProducts([]);
     }
   };
 
-  const isAllSelected = selectedProducts.length === products.length;
+  const isAllSelected = selectedProducts.length === productList.length;
 
   const handleDeleteClick = () => {
     deleteProduct(selectedProducts);
   };
 
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      const currentSequence = productList.findIndex(
+        (product) => product.productId === active.id
+      );
+      const newSequence = productList.findIndex(
+        (product) => product.productId === over.id
+      );
+      const productId = productList[currentSequence].productId;
+
+      setProductList((prevList) =>
+        arrayMove(prevList, currentSequence, newSequence)
+      );
+      patchProductSequence({
+        productId,
+        currentSequence:
+          title === "체험 상품" ? currentSequence : currentSequence + 1000,
+        newSequence: title === "체험 상품" ? newSequence : newSequence + 1000,
+      });
+    }
+  };
+
   return (
     <section css={sectionStyle}>
       <div css={tableTitle}>
@@ -66,54 +115,49 @@ const ProductTable = ({ title, products }: ProductTableProps) => {
           </Button>
         </div>
       </div>
-      <table css={tableStyle}>
-        <thead>
-          <tr>
-            <th>
-              <input
-                css={checkboxStyle}
-                type="checkbox"
-                checked={isAllSelected}
-                onChange={(e) => handleSelectAllChange(e.target.checked)}
-              />
-            </th>
-            <th>상품명</th>
-            <th>상품 가격</th>
-            <th>판매 중</th>
-          </tr>
-        </thead>
-        <tbody>
-          {products.map((product) => (
-            <tr key={product.productId}>
-              <td>
-                <input
-                  css={checkboxStyle}
-                  type="checkbox"
-                  checked={selectedProducts.includes(product.productId)}
-                  onChange={() => handleCheckboxChange(product.productId)}
-                />
-              </td>
-              <td css={productNameStyle}>{product.productName}</td>
-              <td css={cellWidth(15)}>
-                {`${product.productPrice.toLocaleString()}원`}
-              </td>
-              <td css={cellWidth(15)}>
-                <Switch
-                  checked={product.isSailed}
-                  onChange={() => patchProduct(product.productId)}
-                  uncheckedIcon={false}
-                  checkedIcon={false}
-                  onColor="#EC6732"
+
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext
+          items={productList.map((product) => product.productId)}
+          strategy={verticalListSortingStrategy}
+        >
+          <table css={tableStyle}>
+            <thead>
+              <tr>
+                <th>
+                  <input
+                    type="checkbox"
+                    checked={isAllSelected}
+                    onChange={(e) => handleSelectAllChange(e.target.checked)}
+                  />
+                </th>
+                <th>상품명</th>
+                <th>상품 가격</th>
+                <th>판매 중</th>
+              </tr>
+            </thead>
+            <tbody>
+              {productList.map((product) => (
+                <SortableRow
+                  key={product.productId}
+                  product={product}
+                  selectedProducts={selectedProducts}
+                  handleCheckboxChange={handleCheckboxChange}
+                  patchProduct={patchProduct}
                 />
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+              ))}
+            </tbody>
+          </table>
+        </SortableContext>
+      </DndContext>
 
       {isModalOpen && (
         <Modal onClose={handleModalClose}>
-          <ProductAddModal onClose={handleModalClose} />
+          <ProductAddModal onClose={handleModalClose} category={category} />
         </Modal>
       )}
     </section>
diff --git a/src/pages/Admin/components/SortableRow/SortableRow.tsx b/src/pages/Admin/components/SortableRow/SortableRow.tsx
new file mode 100644
index 0000000..f2d0cf0
--- /dev/null
+++ b/src/pages/Admin/components/SortableRow/SortableRow.tsx
@@ -0,0 +1,65 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import {
+  checkboxStyle,
+  productNameStyle,
+  cellWidth,
+} from "../ProductTable/ProductTable.style";
+import Switch from "react-switch";
+import { ProductWithSailed } from "@types";
+
+interface SortableRowProps {
+  product: ProductWithSailed;
+  selectedProducts: number[];
+  handleCheckboxChange: (id: number) => void;
+  patchProduct: (id: number) => void;
+}
+
+const SortableRow = ({
+  product,
+  selectedProducts,
+  handleCheckboxChange,
+  patchProduct,
+}: SortableRowProps) => {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id: product.productId });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    cursor: "grab",
+  };
+
+  const handlePointerDown = (event: React.PointerEvent) => {
+    event.stopPropagation(); // 이벤트가 상위로 전파되지 않도록 차단
+  };
+
+  return (
+    <tr ref={setNodeRef} style={style} {...attributes} {...listeners}>
+      <td>
+        <input
+          css={checkboxStyle}
+          type="checkbox"
+          checked={selectedProducts.includes(product.productId)}
+          onChange={() => handleCheckboxChange(product.productId)}
+          onPointerDown={handlePointerDown}
+        />
+      </td>
+      <td css={productNameStyle}>{product.productName}</td>
+      <td css={cellWidth(15)}>
+        {`${product.productPrice.toLocaleString()}원`}
+      </td>
+      <td css={cellWidth(15)}>
+        <Switch
+          checked={product.isSailed}
+          onChange={() => patchProduct(product.productId)}
+          uncheckedIcon={false}
+          checkedIcon={false}
+          onColor="#EC6732"
+        />
+      </td>
+    </tr>
+  );
+};
+
+export default SortableRow;
diff --git a/src/pages/Admin/page/AdminPage/AdminPage.style.ts b/src/pages/Admin/page/AdminPage/AdminPage.style.ts
index 81a7ec0..d15a9a1 100644
--- a/src/pages/Admin/page/AdminPage/AdminPage.style.ts
+++ b/src/pages/Admin/page/AdminPage/AdminPage.style.ts
@@ -8,6 +8,7 @@ export const AdminLayout = (theme: Theme) => css`
   top: 0;
   left: 0;
   width: 100vw;
+  min-width: 140rem;
   height: 100%;
   background-color: ${theme.color.white};
 `;
diff --git a/src/pages/Admin/page/AdminPage/OrderCheck/OrderCheck.tsx b/src/pages/Admin/page/AdminPage/OrderCheck/OrderCheck.tsx
index e711b0f..851aaae 100644
--- a/src/pages/Admin/page/AdminPage/OrderCheck/OrderCheck.tsx
+++ b/src/pages/Admin/page/AdminPage/OrderCheck/OrderCheck.tsx
@@ -17,12 +17,18 @@ interface Option {
 }
 
 const OrderCheck = () => {
+  const orderNumberRef = useRef<string | null>(null);
+  const senderNameRef = useRef<string | null>(null);
+  const recipientNameRef = useRef<string | null>(null);
   const orderReceivedDateRef = useRef<Dayjs | null>(null);
   const deliveryDateRef = useRef<Dayjs | null>(null);
   const productRef = useRef<Option | null>(null);
   const statusRef = useRef<Option | null>(null);
 
   const [query, setQuery] = useState({
+    orderNumber: "",
+    senderName: "",
+    recipientName: "",
     orderReceivedDate: "",
     deliveryDate: "",
     productName: "",
@@ -63,6 +69,9 @@ const OrderCheck = () => {
 
   const handleSearchClick = () => {
     const newQuery = {
+      orderNumber: orderNumberRef.current?.toString() || "",
+      senderName: senderNameRef.current || "",
+      recipientName: recipientNameRef.current || "",
       orderReceivedDate:
         orderReceivedDateRef.current?.format("YYYY-MM-DD") || "",
       deliveryDate: deliveryDateRef.current?.format("YYYY-MM-DD") || "",
@@ -73,12 +82,18 @@ const OrderCheck = () => {
   };
 
   const handleResetClick = () => {
+    orderNumberRef.current = null;
+    senderNameRef.current = null;
+    recipientNameRef.current = null;
     orderReceivedDateRef.current = null;
     deliveryDateRef.current = null;
     statusRef.current = null;
     productRef.current = null;
 
     setQuery({
+      orderNumber: "",
+      senderName: "",
+      recipientName: "",
       orderReceivedDate: "",
       deliveryDate: "",
       productName: "",
@@ -91,10 +106,15 @@ const OrderCheck = () => {
       <section css={sectionStyle}>
         <h3 css={sectionTitle}>검색필터</h3>
         <Filter
-          orderReceivedDateRef={orderReceivedDateRef}
-          deliveryDateRef={deliveryDateRef}
-          productRef={productRef}
-          statusRef={statusRef}
+          filterRef={{
+            orderNumberRef,
+            senderNameRef,
+            recipientNameRef,
+            orderReceivedDateRef,
+            deliveryDateRef,
+            productRef,
+            statusRef,
+          }}
           handleSearchClick={handleSearchClick}
           handleResetClick={handleResetClick}
         />
diff --git a/src/pages/Admin/page/AdminPage/ProductCheck/ProductCheck.tsx b/src/pages/Admin/page/AdminPage/ProductCheck/ProductCheck.tsx
index dd7740b..10067b3 100644
--- a/src/pages/Admin/page/AdminPage/ProductCheck/ProductCheck.tsx
+++ b/src/pages/Admin/page/AdminPage/ProductCheck/ProductCheck.tsx
@@ -9,10 +9,12 @@ const ProductCheck = () => {
       <ProductTable
         title={`체험 상품`}
         products={data ? data.trialProductList : []}
+        category="experience"
       />
       <ProductTable
         title={`판매 상품`}
         products={data ? data.productList : []}
+        category="product"
       />
     </div>
   );
diff --git a/yarn.lock b/yarn.lock
index 6ffabf0..88bee32 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -169,6 +169,37 @@
     "@babel/helper-validator-identifier" "^7.24.7"
     to-fast-properties "^2.0.0"
 
+"@dnd-kit/accessibility@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz#3b4202bd6bb370a0730f6734867785919beac6af"
+  integrity sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==
+  dependencies:
+    tslib "^2.0.0"
+
+"@dnd-kit/core@^6.3.1":
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/core/-/core-6.3.1.tgz#4c36406a62c7baac499726f899935f93f0e6d003"
+  integrity sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==
+  dependencies:
+    "@dnd-kit/accessibility" "^3.1.1"
+    "@dnd-kit/utilities" "^3.2.2"
+    tslib "^2.0.0"
+
+"@dnd-kit/sortable@^10.0.0":
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/sortable/-/sortable-10.0.0.tgz#1f9382b90d835cd5c65d92824fa9dafb78c4c3e8"
+  integrity sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==
+  dependencies:
+    "@dnd-kit/utilities" "^3.2.2"
+    tslib "^2.0.0"
+
+"@dnd-kit/utilities@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/utilities/-/utilities-3.2.2.tgz#5a32b6af356dc5f74d61b37d6f7129a4040ced7b"
+  integrity sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==
+  dependencies:
+    tslib "^2.0.0"
+
 "@emotion/babel-plugin@^11.12.0":
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz#7b43debb250c313101b3f885eba634f1d723fcc2"
@@ -2211,6 +2242,11 @@ tsconfck@^3.0.3:
   resolved "https://registry.yarnpkg.com/tsconfck/-/tsconfck-3.1.1.tgz#c7284913262c293b43b905b8b034f524de4a3162"
   integrity sha512-00eoI6WY57SvZEVjm13stEVE90VkEdJAFGgpFLTsZbJyW/LwFQ7uQxJHWpZ2hzSWgCPKc9AnBnNP+0X7o3hAmQ==
 
+tslib@^2.0.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
 tslib@^2.0.3:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.7.0.tgz#d9b40c5c40ab59e8738f297df3087bf1a2690c01"