DetailPanel 폴더 구조 변경 및 쿠폰 로직 수정

2024-03-12 13:33:03 +09:00
parent bb34f8e38b
commit b82525e47e
19 changed files with 421 additions and 191 deletions
--- a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less
+++ b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less
@@ -245,6 +245,9 @@
      }
    }
  }
+  .title {
+    margin-bottom: 30px;
+  }
 }

 .mobileSendPopup {
--- a/com.twin.app.shoptime/src/reducers/couponReducer.js
+++ b/com.twin.app.shoptime/src/reducers/couponReducer.js
@@ -1,4 +1,4 @@
-import { types } from "../actions/actionTypes";
+import { types } from '../actions/actionTypes';

 const initialState = {
  productCouponInfoData: {},
@@ -7,16 +7,26 @@ const initialState = {

 export const couponReducer = (state = initialState, action) => {
  switch (action.type) {
-    case types.GET_PRODUCT_COUPON_INFO:
+    case types.GET_PRODUCT_COUPON_INFO: {
      return {
        ...state,
-        productCouponInfoData: action.payload,
+        productCouponInfoData: action.payload.couponInfo,
      };
-    case types.GET_PRODUCT_COUPON_SEARCH:
+    }
+
+    case types.GET_PRODUCT_COUPON_SEARCH: {
+      const partnerCoupon = action.payload.couponInfo.filter(
+        (item) => item.cpnTpNm === "Partner"
+      );
+      const shoptiemCoupon = action.payload.couponInfo.filter(
+        (item) => item.cpnTpNm === "ShopTime"
+      );
+
      return {
        ...state,
-        productCouponSearchData: action.payload,
+        productCouponSearchData: { partnerCoupon, shoptiemCoupon },
      };
+    }

    default:
      return state;
--- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
@@ -1,21 +1,33 @@
-import React, { useEffect, useState } from "react";
+import React, {
+  useEffect,
+  useState,
+} from 'react';

-import { useDispatch, useSelector } from "react-redux";
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';

-import { getMainCategoryDetail } from "../../actions/mainActions";
-import { popPanel } from "../../actions/panelActions";
-import TBody from "../../components/TBody/TBody";
-import THeader from "../../components/THeader/THeader";
-import TPanel from "../../components/TPanel/TPanel";
-import ProductOption from "./components/ProductOption";
-import ProductThumbnail from "./components/ProductThumbnail";
-import SingleProduct from "./container/SingleProduct";
-import YouMayLike from "./container/YouMayLike";
-import css from "./DetailPanel.module.less";
+import { getProductCouponSearch } from '../../actions/couponActions';
+import { getMainCategoryDetail } from '../../actions/mainActions';
+import { popPanel } from '../../actions/panelActions';
+import { getProductGroup } from '../../actions/productActions';
+import TBody from '../../components/TBody/TBody';
+import THeader from '../../components/THeader/THeader';
+import TPanel from '../../components/TPanel/TPanel';
+import ProductOption from './components/ProductOption';
+import ProductThumbnail from './components/ProductThumbnail';
+import GroupProduct from './container/GroupProduct';
+import SingleProduct from './container/SingleProduct';
+import ThemeProduct from './container/ThemeProduct';
+import UnableProduct from './container/UnableProduct';
+import YouMayLike from './container/YouMayLike';
+import css from './DetailPanel.module.less';

 export default function ItemDetail() {
  const [panelInfo, setPaneInfo] = useState();
  const productData = useSelector((state) => state.main.productData);
+  const isGroupOption = useSelector((state) => state.main.productGroupYn);
  const panels = useSelector((state) => state.panels.panels);

  const dispatch = useDispatch();
@@ -31,6 +43,7 @@ export default function ItemDetail() {

  useEffect(() => {
    getPanelInfo();
+
    if (panels && panelInfo) {
      dispatch(
        getMainCategoryDetail({
@@ -38,6 +51,13 @@ export default function ItemDetail() {
          prdtId: panelInfo?.prdtId,
        })
      );
+
+      dispatch(
+        getProductGroup({
+          patnrId: panelInfo?.patnrId,
+          prdtId: panelInfo?.prdtId,
+        })
+      );
    }
  }, [dispatch, panels, panelInfo]);

@@ -53,10 +73,29 @@ export default function ItemDetail() {
        onClick={onClick}
      />
      <TBody className={css.container} scrollable={false}>
-        <SingleProduct
+        {/* 단일상품 영역  */}
+        {productData?.pmtSuptYn === "Y" && (
+          <SingleProduct selectedPatnrId={"11"} selectedPrdtId={"7280567"} />
+        )}
+        {/* 그룹상품 영역 */}
+        {isGroupOption && isGroupOption === "Y" && (
+          <GroupProduct
+            selectedPatnrId={panelInfo?.patnrId}
+            selectedPrdtId={panelInfo?.prdtId}
+          />
+        )}
+        {/* 구매불가상품 영역 */}
+        {productData?.pmtSuptYn === "N" && (
+          <UnableProduct
+            selectedPatnrId={panelInfo?.patnrId}
+            selectedPrdtId={panelInfo?.prdtId}
+          />
+        )}
+        {/* 테마그룹상품 영역*/}
+        {/* <ThemeProduct
          selectedPatnrId={panelInfo?.patnrId}
-          selectedPardtId={panelInfo?.prdtId}
-        />
+          selectedPrdtId={panelInfo?.prdtId}
+        /> */}
      </TBody>
      <YouMayLike />
    </TPanel>
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/ProductOption.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/ProductOption.jsx
@@ -1,16 +1,16 @@
-import React from "react";
+import React from 'react';

-import { useSelector } from "react-redux";
+import { useSelector } from 'react-redux';

-import { $L } from "../../../utils/helperMethods";
-import ProductTag from "../components/common/ProductTag";
-import StarRating from "../components/common/StarRating";
-import OptionCommon from "./optionTypes/OptionCommon";
-import OptionGroup from "./optionTypes/OptionGroup";
-import OptionPartnerPrice from "./optionTypes/OptionPartnerPrice";
-import css from "./ProductOption.module.less";
+import { $L } from '../../../utils/helperMethods';
+import ProductTag from '../components/common/ProductTag';
+import StarRating from '../components/common/StarRating';
+import OptionCommon from './optionTypes/OptionCommon';
+import OptionGroup from './optionTypes/OptionGroup';
+import OptionPartnerPrice from './optionTypes/OptionPartnerPrice';
+import css from './ProductOption.module.less';

-export default function ProductOption({ selectedPatnrId, selectedPardtId }) {
+export default function ProductOption({ children }) {
  const productDataInfos = useSelector((state) => state.main.productData);
  const isGroupOption = useSelector((state) => state.main.productGroupYn);
  const { patncLogoPath, prdtId, prdtNm, revwGrd, pmtSuptYn } =
@@ -31,27 +31,7 @@ export default function ProductOption({ selectedPatnrId, selectedPardtId }) {
          </div>
        </div>
      )}
-      <div>
-        {isGroupOption && isGroupOption === "Y" ? (
-          /* 그룹상품 영역 */
-          <OptionGroup
-            selectedPatnrId={selectedPatnrId}
-            selectedPardtId={selectedPardtId}
-          />
-        ) : pmtSuptYn === "Y" ? (
-          /* 일반옵션 영역 */
-          <OptionCommon
-            selectedPatnrId={selectedPatnrId}
-            selectedPardtId={selectedPardtId}
-          />
-        ) : (
-          /* 구매불가 영역 */
-          <OptionPartnerPrice
-            selectedPatnrId={selectedPatnrId}
-            selectedPardtId={selectedPardtId}
-          />
-        )}
-      </div>
+      {children}
    </div>
  );
 }
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/common/CouponCard.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/common/CouponCard.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import Spottable from '@enact/spotlight/Spottable';
+
+import css from './CouponCard.module.less';
+
+const SpottableComponent = Spottable("div");
+export default function CouponCard({
+  cpnDctrt,
+  cpnTtl,
+  cpnAplyMinPurcAmt,
+  cpnAplyMaxDcAmt,
+  cpnAplyStrtDtt,
+  cpnAplyEndDtt,
+  index,
+}) {
+  const couponAplyStartDate = cpnAplyStrtDtt.split(" ")[0];
+  const couponAplyEndDate = cpnAplyEndDtt.split(" ")[0];
+
+  return (
+    <SpottableComponent className={css.container}>
+      <div className={css.couponItem} key={`coupon :${index}`}>
+        <span className={css.couponLate}>{`${cpnDctrt}%`}</span>
+        <span className={css.title}>{cpnTtl}</span>
+        <span className={css.content}>
+          {$L(
+            `Puschase over $${cpnAplyMinPurcAmt} (up to $${cpnAplyMaxDcAmt} off)`
+          )}
+        </span>
+        <span className={classNames(css.content, css.date)}>
+          {$L(`${couponAplyStartDate}~${couponAplyEndDate}`)}
+        </span>
+        {/* <TButton className={css.couponBtn}>{$L("DOWNLOAD")}</TButton> */}
+      </div>
+    </SpottableComponent>
+  );
+}
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/common/CouponCard.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/common/CouponCard.module.less
@@ -0,0 +1,5 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.container {
+}
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/common/FavoriteBtn.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/common/FavoriteBtn.jsx
@@ -1,16 +1,22 @@
-import React, { useCallback } from "react";
+import React, { useCallback } from 'react';

-import { useDispatch, useSelector } from "react-redux";
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';

-import { setHidePopup, setShowPopup } from "../../../../actions/commonActions";
-import { setMainLikeCategory } from "../../../../actions/mainActions";
-import TButton from "../../../../components/TButton/TButton";
-import TPopUp from "../../../../components/TPopUp/TPopUp";
-import * as Config from "../../../../utils/Config";
-import { $L } from "../../../../utils/helperMethods";
-import css from "./FavoriteBtn.module.less";
+import {
+  setHidePopup,
+  setShowPopup,
+} from '../../../../actions/commonActions';
+import { setMainLikeCategory } from '../../../../actions/mainActions';
+import TButton from '../../../../components/TButton/TButton';
+import TPopUp from '../../../../components/TPopUp/TPopUp';
+import * as Config from '../../../../utils/Config';
+import { $L } from '../../../../utils/helperMethods';
+import css from './FavoriteBtn.module.less';

-export default function FavoriteBtn({ selectedPatnrId, selectedPardtId }) {
+export default function FavoriteBtn({ selectedPatnrId, selectedPrdtId }) {
  const dispatch = useDispatch();
  const productInfos = useSelector((state) => state.main.productData);
  const { popupVisible, activePopup } = useSelector(
@@ -23,7 +29,7 @@ export default function FavoriteBtn({ selectedPatnrId, selectedPardtId }) {
    dispatch(
      setMainLikeCategory({
        patnrId: selectedPatnrId,
-        prdtId: selectedPardtId,
+        prdtId: selectedPrdtId,
      })
    );

--- a/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionCommon.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionCommon.jsx
@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from "react-redux";

 import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";

 import { setHidePopup, setShowPopup } from "../../../../actions/commonActions";
 import { getProductCouponSearch } from "../../../../actions/couponActions";
@@ -12,23 +13,26 @@ import { getProductOption } from "../../../../actions/productActions";
 import TButton from "../../../../components/TButton/TButton";
 import TPopUp from "../../../../components/TPopUp/TPopUp";
 import TScroller from "../../../../components/TScroller/TScroller";
+import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
 import usePriceInfo from "../../../../hooks/usePriceInfo";
 import * as Config from "../../../../utils/Config";
 import { $L } from "../../../../utils/helperMethods";
+import { SpotlightIds } from "../../../../utils/SpotlightIds";
 import FavoriteBtn from "../common/FavoriteBtn";
 import css from "./OptionCommon.module.less";

 const Container = SpotlightContainerDecorator(
-  { enterTo: "last-focused", continue5WayHold: true },
+  { enterTo: "default-element", preserveId: true },
  "div"
 );
+const SpottableComponent = Spottable("div");

-export default function OptionCommon({ selectedPatnrId, selectedPardtId }) {
+export default function OptionCommon({ selectedPatnrId, selectedPrdtId }) {
  const dispatch = useDispatch();
  const productOptionInfos = useSelector((state) => state.product.prdtOptInfo);
-  const productInfos = useSelector((state) => state.main.productData);
+  const productData = useSelector((state) => state.main.productData);

-  const couponInfos = useSelector(
+  const { partnerCoupon, shoptiemCoupon } = useSelector(
    (state) => state.coupon.productCouponSearchData
  );

@@ -36,27 +40,6 @@ export default function OptionCommon({ selectedPatnrId, selectedPardtId }) {
    (state) => state.common.popup
  );

-  const dummy = [
-    {
-      cpnTpNm: "Partner",
-      cpnAplyStrtDtt: "2023-07-01 00:00:00",
-      cpnTtl: "[Partner]ShopLC-Product",
-      shptmDcTpCd: "CPN00402",
-      cpnDctrt: 23,
-      dcAmt: 0,
-      cpnAplyEndDtt: "2023-12-31 23:00:00",
-      cpnUseDt: "",
-      cpnAplyMinPurcAmt: 33,
-      patnrId: 11,
-      cpnAplyMaxDcAmt: 57,
-      shptmCpnTpCd: "CPN00102",
-      cpnAplyMinProdAmt: 16,
-      cpnUseYn: "N",
-      cpnSno: 49,
-      cpnCdCval: "blqm9955",
-    },
-  ];
-
  const [selectedBtnOptIdx, setSelectedBtnOptIdx] = useState(0);
  const [quantity, setQuantity] = useState(1);
  const [selectedOptions, setSelectedOptions] = useState([]);
@@ -76,7 +59,7 @@ export default function OptionCommon({ selectedPatnrId, selectedPardtId }) {

  const [couponTypes, setCouponTypes] = useState(null);

-  const { priceInfo, shippingCharge, patncNm } = productInfos;
+  const { priceInfo, shippingCharge, patncNm } = productData;
  const { originalPrice, discountedPrice, discountRate } =
    usePriceInfo(priceInfo) || {};

@@ -84,21 +67,25 @@ export default function OptionCommon({ selectedPatnrId, selectedPardtId }) {
  const promotionDesc = $L("Coupon only applicable to this product!");

  useEffect(() => {
-    if (selectedPardtId && selectedPatnrId) {
-      dispatch(
-        getProductOption({
-          patnrId: selectedPatnrId,
-          prdtId: selectedPardtId,
-        })
-      );
-      dispatch(
-        getProductCouponSearch({
-          patnrId: selectedPatnrId,
-          prdtId: selectedPardtId,
-        })
-      );
-    }
-  }, [dispatch, selectedBtnOptIdx]);
+    dispatch(
+      getProductOption({
+        patnrId: selectedPatnrId,
+        prdtId: selectedPrdtId,
+      })
+    );
+    dispatch(
+      getProductCouponSearch({
+        patnrId: selectedPatnrId,
+        prdtId: selectedPrdtId,
+      })
+    );
+  }, [dispatch]);
+
+  useEffect(() => {
+    // console.log("#productData", productData);
+    console.log("#couponInfo", partnerCoupon, shoptiemCoupon);
+    // console.log("#productOptionInfos", productOptionInfos);
+  }, [productOptionInfos]);

  const handleIncrement = useCallback(() => {
    setQuantity(quantity + 1);
@@ -126,13 +113,55 @@ export default function OptionCommon({ selectedPatnrId, selectedPardtId }) {
      setCouponTypes(idx);
      dispatch(setShowPopup(Config.ACTIVE_POPUP.couponPopup));
    },
-    [dispatch]
+    [dispatch, popupVisible]
  );

  const onClose = useCallback(() => {
    dispatch(setHidePopup());
  }, [dispatch]);

+  const renderItem = useCallback(
+    ({ index, ...rest }) => {
+      const {
+        cpnDctrt,
+        cpnTtl,
+        cpnAplyMinPurcAmt,
+        cpnAplyMaxDcAmt,
+        cpnAplyStrtDtt,
+        cpnAplyEndDtt,
+      } = partnerCoupon[index];
+
+      const couponAplyStartDate = cpnAplyStrtDtt.split(" ")[0];
+      const couponAplyEndDate = cpnAplyEndDtt.split(" ")[0];
+
+      //Spotlight.focus("spotlight-coupon-0");
+      const handleItemClick = () => {};
+      return (
+        <SpottableComponent
+          className={css.couponContainer}
+          spotlightid={`spotlightId-coupon-${index}`}
+        >
+          <div className={css.couponItem}>
+            <span className={css.couponLate}>{`${cpnDctrt}%`}</span>
+            <span className={css.title}>{cpnTtl}</span>
+            <span className={css.content}>
+              {$L(
+                `Puschase over $${cpnAplyMinPurcAmt} (up to $${cpnAplyMaxDcAmt} off)`
+              )}
+            </span>
+            <span className={classNames(css.content, css.date)}>
+              {$L(`${couponAplyStartDate}~${couponAplyEndDate}`)}
+            </span>
+            {/* <TButton className={css.couponBtn}>{$L("DOWNLOAD")}</TButton> */}
+          </div>
+
+          {/* <div>{`1/${partnerCoupon?.length}`}</div> */}
+        </SpottableComponent>
+      );
+    },
+    [partnerCoupon]
+  );
+
  return (
    <div className={css.detailContainer}>
      <Container>
@@ -140,7 +169,6 @@ export default function OptionCommon({ selectedPatnrId, selectedPardtId }) {
          {productOptionInfos &&
            productOptionInfos.length > 0 &&
            productOptionInfos.map(({ optNm, prdtOptDtl }, idx) => {
-              const selectedOption = selectedOptions?.[idx] ?? 0;
              return (
                <div key={`option: ${idx}`} className={css.optionLayer}>
                  {/* OPTION */}
@@ -190,6 +218,7 @@ export default function OptionCommon({ selectedPatnrId, selectedPardtId }) {
          </Container>
        </TScroller>
      </Container>
+
      {/* COUPON */}
      {promotions.map((promotion, idx) => {
        return (
@@ -201,7 +230,7 @@ export default function OptionCommon({ selectedPatnrId, selectedPardtId }) {
            <TButton
              className={css.promotionBtn}
              onClick={() => {
-                handleCouponClick(idx);
+                handleCouponClick(idx, promotion);
              }}
            >
              {$L("COUPON")}
@@ -244,7 +273,7 @@ export default function OptionCommon({ selectedPatnrId, selectedPardtId }) {
        </TButton>
        <FavoriteBtn
          selectedPatnrId={selectedPatnrId}
-          selectedPardtId={selectedPardtId}
+          selectedPardtId={selectedPrdtId}
        />
      </Container>
      {/* LOGIN POPUP */}
@@ -264,7 +293,7 @@ export default function OptionCommon({ selectedPatnrId, selectedPardtId }) {
        ></TPopUp>
      )}

-      {/* OPTION POPUP */}
+      {/* SHOPTIME OPTION POPUP */}
      {activePopup === Config.ACTIVE_POPUP.optionPopup && (
        <TPopUp
          kind="optionPopup"
@@ -300,35 +329,19 @@ export default function OptionCommon({ selectedPatnrId, selectedPardtId }) {
          button1Text={$L("CLOSE")}
          button2Text={$L("DOWNLOAD ALL")}
        >
-          <div className={css.couponContainer}>
-            {dummy.map((coupon, idx) => {
-              const {
-                cpnDctrt,
-                cpnTtl,
-                cpnAplyMinPurcAmt,
-                cpnAplyMaxDcAmt,
-                cpnAplyStrtDtt,
-                cpnAplyEndDtt,
-              } = coupon;
-              const couponAplyStartDate = cpnAplyStrtDtt.split(" ")[0];
-              const couponAplyEndDate = cpnAplyEndDtt.split(" ")[0];
-              return (
-                <div className={css.couponItem} key={`coupon :${idx}`}>
-                  <span className={css.couponLate}>{`${cpnDctrt}%`}</span>
-                  <span className={css.title}>{cpnTtl}</span>
-                  <span className={css.content}>
-                    {$L(
-                      `Puschase over $${cpnAplyMinPurcAmt} (up to $${cpnAplyMaxDcAmt} off)`
-                    )}
-                  </span>
-                  <span className={classNames(css.content, css.date)}>
-                    {$L(`${couponAplyStartDate}~${couponAplyEndDate}`)}
-                  </span>
-                  <TButton className={css.couponBtn}>{$L("DOWNLOAD")}</TButton>
-                </div>
-              );
-            })}
-            <div>{`1/${dummy.length}`}</div>
+          <div className={css.itemWrap}>
+            {partnerCoupon && partnerCoupon.length > 0 && (
+              <TVirtualGridList
+                dataSize={partnerCoupon.length}
+                direction="horizontal"
+                autoScroll
+                renderItem={renderItem}
+                itemWidth={440}
+                itemHeight={320}
+                spacing={15}
+                className={css.itemList}
+              />
+            )}
          </div>
        </TPopUp>
      )}
--- 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
@@ -249,24 +249,39 @@
  }
 }

+.itemWrap {
+  // overflow: hidden;
+  position: relative;
+
+  .itemList {
+    // .size(@w: 255px , @h: 320px);
+    height: 320px;
+  }
+  > div > div {
+    padding-left: 220px;
+  }
+}
 .couponContainer {
  .flex(@direction:column);
-  margin-top: 30px;
+  position: relative;
+  // margin-left: 130px;
+
+  &:focus {
+    &::after {
+      .focused(@boxShadow: 22px, @borderRadius: 12px);
+    }
+  }
+
  .couponItem {
    .flex(@direction:column,@justifyCenter:space-between);
+    .size(@w: 440px , @h: 320px);
    text-align: center;
    background: @COLOR_WHITE;
-    width: 440px;
-    height: 320px;
+
    padding: 30px;
    border-radius: 10px;
    .border-solid(@size:1px,@color:@COLOR_GRAY02);
-    &:focus {
-      color: @PRIMARY_COLOR_RED;
-      &::after {
-        .focused(@boxShadow: 22px, @borderRadius: 12px);
-      }
-    }
+
    .couponLate {
      .font(@baseFontBold,36px);
      color: @PRIMARY_COLOR_RED;
@@ -277,6 +292,8 @@
      line-height: 42px;
      color: @COLOR_GRAY07;
      margin-bottom: 25px;
+      width: 400px;
+      .elip(1);
    }
    .content {
      .font(@baseFont,24px);
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionGroup.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionGroup.jsx
@@ -1,16 +1,21 @@
-import React, { useEffect } from "react";
+import React, { useEffect } from 'react';

-import { useDispatch, useSelector } from "react-redux";
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';

-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-import Spottable from "@enact/spotlight/Spottable";
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';

-import noGroupImg from "../../../../../assets/images/img-my-info-billing@3x.png";
-import { getMainCategoryDetail } from "../../../../actions/mainActions";
-import { getProductGroup } from "../../../../actions/productActions";
-import TScroller from "../../../../components/TScroller/TScroller";
-import { $L } from "../../../../utils/helperMethods";
-import css from "./OptionGroup.module.less";
+import noGroupImg
+  from '../../../../../assets/images/img-my-info-billing@3x.png';
+import { getMainCategoryDetail } from '../../../../actions/mainActions';
+import { getProductGroup } from '../../../../actions/productActions';
+import TScroller from '../../../../components/TScroller/TScroller';
+import { $L } from '../../../../utils/helperMethods';
+import css from './OptionGroup.module.less';

 const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused", continue5WayHold: true },
@@ -19,7 +24,7 @@ const Container = SpotlightContainerDecorator(

 const SpottableComponent = Spottable("div");

-export default function OptionGroup({ selectedPatnrId, selectedPardtId }) {
+export default function OptionGroup({ selectedPatnrId, selectedPrdtId }) {
  const dispatch = useDispatch();
  const groupInfos = useSelector((state) => state.product.groupInfo);

@@ -27,7 +32,7 @@ export default function OptionGroup({ selectedPatnrId, selectedPardtId }) {
    dispatch(
      getProductGroup({
        patnrId: selectedPatnrId,
-        prdtId: selectedPardtId,
+        prdtId: selectedPrdtId,
      })
    );
  }, [dispatch]);
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionHotel.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionHotel.jsx
@@ -1,5 +1,21 @@
-import React from "react";
+import React from 'react';

-export default function OptionHotel() {
-  return <div>OptionHotel</div>;
+import logo
+  from '../../../../../assets/images/icons/ic-partners-netflix@3x.png';
+import css from './OptionHotel.module.less';
+
+export default function OptionHotel({ children }) {
+  return (
+    <div className={css.optionContainer}>
+      <div className={css.contentHeader}>
+        <div className={css.topLayer}>
+          <img src={logo} alt="patncLogoPath" />
+          <div>IIDIDIDIDID</div>
+        </div>
+        <div className={css.title}>HOTEL_NAME_TITLE</div>
+      </div>
+
+      {children}
+    </div>
+  );
 }
--- 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
@@ -0,0 +1,44 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.optionContainer {
+  .flex(@direction:column ,@justifyCenter:flex-start,@alignCenter:flex-start);
+  .size(@w: 1026px, @h: 930px);
+  background-color: @BG_COLOR_01;
+  padding: 30px 120px 120px 60px;
+
+  .topLayer {
+    width: 100%;
+    .flex(@direction:row ,@justifyCenter:flex-start);
+    text-align: left;
+    color: @COLOR_GRAY03;
+    .font(@fontFamily:@baseFontBold,30px);
+    img {
+      width: 42px;
+      height: 42px;
+      margin-right: 11px;
+    }
+  }
+
+  .bottomLayer {
+    width: 846px;
+    .flex(@justifyCenter:space-between,@alignCenter:center);
+    height: 42px;
+    margin-top: 14px;
+    > div {
+      height: 36px;
+    }
+  }
+  .title {
+    .font(@fontFamily:@baseFontBold,@fontSize:36px);
+    color: @COLOR_GRAY08;
+    width: 739px;
+    .elip(@clamp:2);
+    margin-top: 24px;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.17;
+    letter-spacing: normal;
+    text-align: left;
+  }
+}
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionPartnerPrice.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionPartnerPrice.jsx
@@ -1,18 +1,18 @@
-import React, { useCallback } from "react";
+import React, { useCallback } from 'react';

-import classNames from "classnames";
-import { useSelector } from "react-redux";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';

-import TButton from "../../../../components/TButton/TButton";
-import TQRCode from "../../../../components/TQRCode/TQRCode";
-import usePriceInfo from "../../../../hooks/usePriceInfo";
-import { $L } from "../../../../utils/helperMethods";
-import FavoriteBtn from "../common/FavoriteBtn";
-import css from "./OptionPartnerPrice.module.less";
+import TButton from '../../../../components/TButton/TButton';
+import TQRCode from '../../../../components/TQRCode/TQRCode';
+import usePriceInfo from '../../../../hooks/usePriceInfo';
+import { $L } from '../../../../utils/helperMethods';
+import FavoriteBtn from '../common/FavoriteBtn';
+import css from './OptionPartnerPrice.module.less';

 export default function OptionPartnerPrice({
  selectedPatnrId,
-  selectedPardtId,
+  selectedPrdtId,
 }) {
  const productInfos = useSelector((state) => state.main.productData);
  const tooltipDes = $L(
@@ -164,7 +164,7 @@ export default function OptionPartnerPrice({
        </TButton>
        <FavoriteBtn
          selectedPatnrId={selectedPatnrId}
-          selectedPardtId={selectedPardtId}
+          selectedPrdtId={selectedPrdtId}
        />
      </div>
    </div>
--- a/com.twin.app.shoptime/src/views/DetailPanel/container/GroupProduct.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/container/GroupProduct.jsx
@@ -1,7 +1,21 @@
-import React from "react";
+import React from 'react';

-import css from "./GroupProduct.module.less";
+import OptionGroup from '../components/optionTypes/OptionGroup';
+import ProductOption from '../components/ProductOption';
+import ProductThumbnail from '../components/ProductThumbnail';
+import css from './GroupProduct.module.less';

-export default function GroupProduct() {
-  return <div>GroupProduct</div>;
+export default function GroupProduct({ selectedPatnrId, selectedPrdtId }) {
+  return (
+    <div className={css.container}>
+      <ProductThumbnail />
+      <div>
+        <ProductOption />
+        <OptionGroup
+          selectedPatnrId={selectedPatnrId}
+          selectedPardtId={selectedPrdtId}
+        />
+      </div>
+    </div>
+  );
 }
--- a/com.twin.app.shoptime/src/views/DetailPanel/container/SingleProduct.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/container/SingleProduct.jsx
@@ -1,17 +1,22 @@
-import React from "react";
+import React from 'react';

-import ProductOption from "../components/ProductOption";
-import ProductThumbnail from "../components/ProductThumbnail";
-import css from "./SingleProduct.module.less";
+import OptionCommon from '../components/optionTypes/OptionCommon';
+import ProductOption from '../components/ProductOption';
+import ProductThumbnail from '../components/ProductThumbnail';
+import css from './SingleProduct.module.less';

-export default function SingleProduct({ selectedPatnrId, selectedPardtId }) {
+export default function SingleProduct({ selectedPatnrId, selectedPrdtId }) {
  return (
    <div className={css.container}>
      <ProductThumbnail />
-      <ProductOption
-        selectedPatnrId={selectedPatnrId}
-        selectedPardtId={selectedPardtId}
-      />
+      <div>
+        <ProductOption>
+          <OptionCommon
+            selectedPatnrId={selectedPatnrId}
+            selectedPrdtId={selectedPrdtId}
+          />
+        </ProductOption>
+      </div>
    </div>
  );
 }
--- a/com.twin.app.shoptime/src/views/DetailPanel/container/ThemeProduct.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/container/ThemeProduct.jsx
@@ -1,7 +1,18 @@
-import React from "react";
+import React from 'react';

-import css from "./ThemeProduct.module.less";
+import OptionHotel from '../components/optionTypes/OptionHotel';
+import ProductOption from '../components/ProductOption';
+import ProductThumbnail from '../components/ProductThumbnail';
+import css from './ThemeProduct.module.less';

-export default function ThemeProduct() {
-  return <div>ThemeProduct</div>;
+export default function ThemeProduct({ selectedPatnrId, selectedPrdtId }) {
+  return (
+    <div className={css.container}>
+      <ProductThumbnail />
+      <OptionHotel
+        selectedPatnrId={selectedPatnrId}
+        selectedPdtId={selectedPrdtId}
+      />
+    </div>
+  );
 }
--- a/com.twin.app.shoptime/src/views/DetailPanel/container/ThemeProduct.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/container/ThemeProduct.module.less
@@ -1,2 +1,6 @@
@import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";
+
+.container {
+  display: flex;
+}
--- a/com.twin.app.shoptime/src/views/DetailPanel/container/UnableProduct.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/container/UnableProduct.jsx
@@ -1,5 +1,22 @@
 import React from 'react';

-export default function UnableProduct() {
-  return <></>;
+import OptionPartnerPrice from '../components/optionTypes/OptionPartnerPrice';
+import ProductOption from '../components/ProductOption';
+import ProductThumbnail from '../components/ProductThumbnail';
+import css from './UnableProduct.module.less';
+
+export default function UnableProduct({ selectedPatnrId, selectedPrdtId }) {
+  return (
+    <div className={css.container}>
+      <ProductThumbnail />
+      <div>
+        <ProductOption>
+          <OptionPartnerPrice
+            selectedPatnrId={selectedPatnrId}
+            selectedPrdtId={selectedPrdtId}
+          />
+        </ProductOption>
+      </div>
+    </div>
+  );
 }
--- a/com.twin.app.shoptime/src/views/DetailPanel/container/UnableProduct.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/container/UnableProduct.module.less
@@ -1,2 +1,6 @@
@import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";
+
+.container {
+  display: flex;
+}