indicator 기능 추가

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

@@ -12,36 +12,47 @@ 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 [visibleImages, setVisibleImages] = useState([]);
 
   useEffect(() => {
     if (images && images.length > 0) {
       setSelectedImage(images[0]);
+      setVisibleImages(images.slice(0, 3));
     }
   }, [images]);
 
-  const handlePrevClick = () => {
+  const handleUpClick = () => {
     setSelectedImage((prevSelectedImage) => {
       const currentIndex = images.indexOf(prevSelectedImage);
-      return currentIndex === 0
-        ? images[images.length - 1]
-        : images[currentIndex - 1];
+      const prevIndex = currentIndex === 0 ? 0 : currentIndex - 1;
+      if (prevIndex >= 0 && prevIndex <= images.length - 3) {
+        setVisibleImages(images.slice(prevIndex, prevIndex + 3));
+      }
+      setSelectedIndex(prevIndex);
+      return images[prevIndex];
     });
   };
 
-  const handleNextClick = () => {
+  const handleDownClick = () => {
     setSelectedImage((prevSelectedImage) => {
       const currentIndex = images.indexOf(prevSelectedImage);
-      return currentIndex === images.length - 1
-        ? images[0]
-        : images[currentIndex + 1];
+      const nextIndex =
+        currentIndex === images.length - 1 ? currentIndex : currentIndex + 1;
+      if (nextIndex >= 2 && nextIndex <= images.length - 1) {
+        setVisibleImages(images.slice(nextIndex - 2, nextIndex + 1));
+      }
+      setSelectedIndex(nextIndex);
+      return images[nextIndex];
     });
   };
 
-  const handleItemClick = (image, index) => {
+  const handleItemClick = (image) => {
+    const globalIndex = images.indexOf(image);
     setSelectedImage(image);
-    setSelectedIndex(index);
+    setSelectedIndex(globalIndex);
   };
 
   return (
@@ -49,30 +60,31 @@ export default function Indicator() {
       <div>
         {images && <img src={selectedImage} alt="" className={css.thumbnail} />}
       </div>
-      <div>
-        <SpottableComponent
-          onClick={handlePrevClick}
-          className={css.upButton}
-        />
-        {images &&
-          images
-            .slice(0, 3)
-            .map((image, index) => (
-              <Image
-                key={index}
-                src={image}
-                alt={""}
-                onClick={() => handleItemClick(image, index)}
-                selected={selectedIndex === index}
-                className={classNames(
-                  css.image,
-                  selectedIndex === index && css.selected
-                )}
+      <div className={css.indicator}>
+        <SpottableComponent onClick={handleUpClick} className={css.upButton} />
+        {visibleImages &&
+          visibleImages.map((image, index) => (
+            <Image
+              key={index}
+              src={image}
+              alt={""}
+              onClick={() => handleItemClick(image, index)}
+              selected={selectedIndex === images.indexOf(image)}
+              className={classNames(
+                css.image,
+                selectedIndex === images.indexOf(image) && css.selected
+              )}
+            >
+              <span
+                className={
+                  selectedIndex === images.indexOf(image) && css.checkIcon
+                }
               />
-            ))}
+            </Image>
+          ))}
         <SpottableComponent
           className={css.downButton}
-          onClick={handleNextClick}
+          onClick={handleDownClick}
         />
       </div>
     </div>

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

@@ -32,9 +32,40 @@
     }
 
     .image {
+        .size(@w: 144px , @h: 144px);
         margin: 0 0 6px 0;
         border: solid 1px #dadada;
-        .size(@w: 144px , @h: 144px);
+        position: relative;
+        
+
+        &.selected {
+            &:after{
+                .size(@w: 144px , @h: 144px);
+                content:"";
+                position: absolute;
+                background-color: #7a808d;
+                opacity:.7;
+            
+                &:after {
+                    content: "";
+                    .size(@w: 49px , @h: 49px);
+                    background-image: url('../../../../assets/icon/ic-check-thumb.svg');
+                    background-position: center;
+                    background-size: cover;
+                }
+                
+            }
+        }
+    }
+    .checkIcon {
+        .position(@position: absolute, @top: auto, @right: 44px, @bottom: 48px, @left: auto);
+        .size(@w: 49px , @h: 49px);
+
+        background-image: url('../../../../assets/icon/ic-check-thumb.svg');
+        background-position: center;
+        background-size: cover;
+
+        z-index: 20;
     }
 }
 

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

@@ -1,16 +1,13 @@
-import React, { useEffect } from 'react';
+import React, { useEffect } from "react";
 
-import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
+import { useDispatch, useSelector } from "react-redux";
 
 import {
   getProductGroup,
   getProductOption,
-} from '../../../actions/productActions';
-import OptionGroup from '../components/optionTypes/OptionGroup';
-import css from './ProductOption.module.less';
+} from "../../../actions/productActions";
+import OptionGroup from "../components/optionTypes/OptionGroup";
+import css from "./ProductOption.module.less";
 
 export default function ProductOption({ selectedPatnrId, selectedPardtId }) {
   const dispatch = useDispatch();
@@ -18,9 +15,6 @@ export default function ProductOption({ selectedPatnrId, selectedPardtId }) {
   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({

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

@@ -4,7 +4,6 @@
 .Wrap {
     padding-left: 120px;
     .size(@w: 894px, @h: 930px);
-
     .order {
         .font(@fontFamily: @baseFontBold,  @fontSize: 30px);
         .size(@w: 560px, @h: 68px);
@@ -12,8 +11,7 @@
         justify-content: space-between;
         line-height: 68px;
         background-color: #f2f2f2;
-
-        margin-top: 10px;
+        margin: 10px 0 0 10px;
         > div {
             padding: 0 33px 0 30px;
         }