detail component rename and style update

com.twin.app.shoptime/src/reducers/panelReducer.js

@@ -2,7 +2,7 @@ import { types } from "../actions/actionTypes";
 import { panel_names } from "../utils/Config";
 
 const initialState = {
-  panels: [],
+  panels: [{ name: panel_names.DETAIL_PANEL }],
   isModalOpen: false,
 };
 

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

@@ -6,9 +6,8 @@ import { getMainCategoryDetail } from "../../actions/mainActions";
 import TBody from "../../components/TBody/TBody";
 import THeader from "../../components/THeader/THeader";
 import TPanel from "../../components/TPanel/TPanel";
+import ProductThumbnail from "./container/ProductThumbnail";
 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);
@@ -38,8 +37,7 @@ export default function ItemDetail() {
         onBackButton
       />
       <TBody className={css.container} scrollable={false}>
-        <ItemImage productData={productData} />
-        <OptionList />
+        <ProductThumbnail productData={productData} />
       </TBody>
     </TPanel>
   );

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 
+import classNames from "classnames";
 import { useSelector } from "react-redux";
 
 import Image from "@enact/sandstone/Image";
@@ -10,11 +11,10 @@ import css from "./Indicator.module.less";
 const SpottableComponent = Spottable("button");
 
 export default function Indicator() {
+  const images = useSelector((state) => state.main.productImages);
   const [selectedImage, setSelectedImage] = useState(null);
   const [selectedIndex, setSelectedIndex] = useState(0);
 
-  const images = useSelector((state) => state.main.productImages);
-
   useEffect(() => {
     if (images && images.length > 0) {
       setSelectedImage(images[0]);
@@ -39,8 +39,9 @@ export default function Indicator() {
     });
   };
 
-  const handleItemClick = (image) => {
+  const handleItemClick = (image, index) => {
     setSelectedImage(image);
+    setSelectedIndex(index);
   };
 
   return (
@@ -61,9 +62,12 @@ export default function Indicator() {
                 key={index}
                 src={image}
                 alt={""}
-                onClick={() => handleItemClick(image)}
+                onClick={() => handleItemClick(image, index)}
                 selected={selectedIndex === index}
-                className={css.image}
+                className={classNames(
+                  css.image,
+                  selectedIndex === index && css.selected
+                )}
               />
             ))}
         <SpottableComponent

com.twin.app.shoptime/src/views/DetailPanel/components/Indicator.module.less

@@ -5,15 +5,11 @@
     margin: 30px 0 0 10px;
     height: 560px;
     display: flex;
-
-
     .thumbnail {
         .size(@w: 560px, @h: 560px);
         border: solid 1px #dadada;
-        // background-color: #fff;
-        //margin: 30px 10px 10px 0 ;
-        background-color: red;
-
+        background-color: #fff;
+        margin-right: 10px;
     }
 
      .upButton {
@@ -29,18 +25,16 @@
      .downButton {
         .size(@w: 144px , @h: 48px);
         border: none;
-        margin-top: 10px;
+        margin-top: 4px;
         background-position: center;
         background-size: cover;
         background-image: url('../../../../assets/button/etc/btn-bk-down-nor.svg');        
     }
 
-
-
     .image {
-        margin: 0;
-        // border: solid 1px #dadada;
-        .size(@w: 140px , @h: 140px);
+        margin: 0 0 6px 0;
+        border: solid 1px #dadada;
+        .size(@w: 144px , @h: 144px);
     }
 }
 

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

@@ -1,25 +1,21 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
+
+import { useSelector } from "react-redux";
 
 import Spottable from "@enact/spotlight/Spottable";
 
 import { $L } from "../../../utils/helperMethods";
 import Indicator from "../components/Indicator";
-import css from "../layout/ItemImage.module.less";
+import css from "./ProductThumbnail.module.less";
 
 const SpottableComponent = Spottable("div");
 
-export default function ItemImage({ productData }) {
-  const [images, setImages] = useState();
-
-  useEffect(() => {
-    if (productData) {
-      setImages(productData?.imgUrls);
-    }
-  }, [productData, images]);
+export default function ProductThumbnail() {
+  const productData = useSelector((state) => state.main.productData);
 
   return (
     <SpottableComponent className={css.Wrap}>
-      <Indicator images={images} />
+      <Indicator />
       <div className={css.order}>
         <div>{$L("Call to Order")}</div>
         <div className={css.icon}>

com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.module.less

@@ -0,0 +1,32 @@
+@import '../../../style/CommonStyle.module.less';
+@import "../../../style/utils.module.less";
+ 
+.Wrap {
+    padding-left: 120px;
+    .size(@w: 894px, @h: 930px);
+
+    .order {
+        .font(@fontFamily: @baseFontBold,  @fontSize: 30px);
+        .size(@w: 560px, @h: 68px);
+        display: flex;
+        justify-content: space-between;
+        line-height: 68px;
+        background-color: #f2f2f2;
+
+        margin-top: 10px;
+        > div {
+            padding: 0 33px 0 30px;
+        }
+    }
+    .icon {
+        display: flex;
+        > span {
+            .size(@w: 42px, @h: 42px);
+            background-image: url("../../../../assets/icon/ic-gr-call.svg");
+            background-size: cover;
+            background-position: center;
+            margin: 13px 0 0 4px ;
+        }
+    }
+
+}