From 941ec2f82aa52c881a784f5848b6194927635341 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EB=8F=99=EC=98=81?= Date: Fri, 16 Feb 2024 16:41:49 +0900 Subject: [PATCH] =?UTF-8?q?indicator=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DetailPanel/components/Indicator.jsx | 74 +++++++++++-------- .../components/Indicator.module.less | 33 ++++++++- .../DetailPanel/container/ProductOption.jsx | 16 ++-- .../container/ProductThumbnail.module.less | 4 +- 4 files changed, 81 insertions(+), 46 deletions(-) diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/Indicator.jsx b/com.twin.app.shoptime/src/views/DetailPanel/components/Indicator.jsx index f955c6c1..9dd2a487 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/components/Indicator.jsx +++ b/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() {
{images && }
-
- - {images && - images - .slice(0, 3) - .map((image, index) => ( - {""} handleItemClick(image, index)} - selected={selectedIndex === index} - className={classNames( - css.image, - selectedIndex === index && css.selected - )} +
+ + {visibleImages && + visibleImages.map((image, index) => ( + {""} handleItemClick(image, index)} + selected={selectedIndex === images.indexOf(image)} + className={classNames( + css.image, + selectedIndex === images.indexOf(image) && css.selected + )} + > + - ))} + + ))}
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/Indicator.module.less b/com.twin.app.shoptime/src/views/DetailPanel/components/Indicator.module.less index 3ed5ff9b..4011686a 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/components/Indicator.module.less +++ b/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; } } diff --git a/com.twin.app.shoptime/src/views/DetailPanel/container/ProductOption.jsx b/com.twin.app.shoptime/src/views/DetailPanel/container/ProductOption.jsx index 6db7725b..297201b0 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/container/ProductOption.jsx +++ b/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({ diff --git a/com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.module.less b/com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.module.less index fd33d484..3d1f0796 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.module.less +++ b/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; }