gnb 마우스 모드일때 동작 수정 && 디테일패널 추가

com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from "react";
+
+import { useDispatch, useSelector } from "react-redux";
+
+import { getMainCategoryDetail } from "../../actions/mainActions";
+import TBody from "../../components/TBody/TBody";
+import THeader from "../../components/THeader/THeader";
+import TPanel from "../../components/TPanel/TPanel";
+import css from "./DetailPanel.module.less";
+import ItemImage from "./layout/ItemImage";
+import OptionList from "./layout/OptionList";
+
+export default function ItemDetail() {
+  const [selectedPatnrId, setSelectedPatnrId] = useState(1);
+  const [selectedPardtId, setSelectedPardtId] = useState("A523924");
+
+  const [productData, setProductData] = useState();
+  const data = useSelector((state) => state.main.productData);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(
+      getMainCategoryDetail({
+        patnrId: selectedPatnrId,
+        prdtId: selectedPardtId,
+      })
+    );
+  }, [dispatch]);
+
+  useEffect(() => {
+    setProductData(data);
+  }, [data, productData]);
+  return (
+    <TPanel isTabActivated={false}>
+      <THeader
+        className={css.header}
+        title={productData?.prdtNm}
+        onBackButton
+      />
+      <TBody className={css.container} scrollable={false}>
+        <ItemImage productData={productData} />
+        <OptionList />
+      </TBody>
+    </TPanel>
+  );
+}