diff --git a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
index 607ce146..f3b03ad9 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
@@ -6,6 +6,7 @@ import { getMainCategoryDetail } from "../../actions/mainActions";
 import TBody from "../../components/TBody/TBody";
 import THeader from "../../components/THeader/THeader";
 import TPanel from "../../components/TPanel/TPanel";
+import ProductOption from "./container/ProductOption";
 import ProductThumbnail from "./container/ProductThumbnail";
 import css from "./DetailPanel.module.less";
 
@@ -38,6 +39,10 @@ export default function ItemDetail() {
       />
       <TBody className={css.container} scrollable={false}>
         <ProductThumbnail productData={productData} />
+        <ProductOption
+          selectedPatnrId={selectedPatnrId}
+          selectedPardtId={selectedPardtId}
+        />
       </TBody>
     </TPanel>
   );
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionCommon.jsx b/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionCommon.jsx
new file mode 100644
index 00000000..522c95af
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionCommon.jsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function OptionCommon() {
+  return <div>OptionCommon</div>;
+}
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionCommon.module.less b/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionCommon.module.less
new file mode 100644
index 00000000..e69de29b
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionGroup.jsx b/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionGroup.jsx
new file mode 100644
index 00000000..4e98e2b5
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionGroup.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+import Spottable from "@enact/spotlight/Spottable";
+
+const SpottableComponent = Spottable("div");
+
+export default function OptionGroup() {
+  <div>
+    <p>description</p>
+    <SpottableComponent>{"item"}</SpottableComponent>
+  </div>;
+  return <div>OptionGroup</div>;
+}
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionGroup.module.less b/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionGroup.module.less
new file mode 100644
index 00000000..e69de29b
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionHotel.jsx b/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionHotel.jsx
new file mode 100644
index 00000000..01c16f7f
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionHotel.jsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function OptionHotel() {
+  return <div>OptionHotel</div>;
+}
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionHotel.module.less b/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionHotel.module.less
new file mode 100644
index 00000000..e69de29b
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/container/ProductOption.jsx b/com.twin.app.shoptime/src/views/DetailPanel/container/ProductOption.jsx
new file mode 100644
index 00000000..6db7725b
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/DetailPanel/container/ProductOption.jsx
@@ -0,0 +1,51 @@
+import React, { useEffect } from 'react';
+
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
+
+import {
+  getProductGroup,
+  getProductOption,
+} from '../../../actions/productActions';
+import OptionGroup from '../components/optionTypes/OptionGroup';
+import css from './ProductOption.module.less';
+
+export default function ProductOption({ selectedPatnrId, selectedPardtId }) {
+  const dispatch = useDispatch();
+
+  const productOpionInfos = useSelector((state) => state.product.prdtOptInfo);
+  const groupInfos = useSelector((state) => state.product.groupInfo);
+
+  console.log("# productOpionInfos", productOpionInfos);
+  console.log("# groupInfos", groupInfos);
+
+  useEffect(() => {
+    dispatch(
+      getProductOption({
+        patnrId: selectedPatnrId,
+        prdtId: selectedPardtId,
+      })
+    );
+    dispatch(
+      getProductGroup({
+        patnrId: selectedPatnrId,
+        prdtId: selectedPardtId,
+      })
+    );
+  }, [dispatch]);
+
+  return (
+    <div>
+      <div className={css.optionLayerTop}>
+        <div className={css.partner}>partner</div>
+        <div className={css.brandName}>brandName</div>
+        <div className={css.specialPrice}>specialPrice</div>
+      </div>
+      <div>
+        <OptionGroup />
+      </div>
+    </div>
+  );
+}
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/container/ProductOption.module.less b/com.twin.app.shoptime/src/views/DetailPanel/container/ProductOption.module.less
new file mode 100644
index 00000000..e69de29b