Merge pull request #11 from zel0rd/fe/feature/MenuDetailModal

[ADD]: Slider 컨트롤 버튼 disabled기능 구현
zel0rd · Apr 24, 2021 · 45f445d · 45f445d
2 parents 61db40e + c5cf716
commit 45f445d
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 21 deletions.
diff --git a/fe/sidedish-fe/src/components/MenuDetailModal/MenuDetail/RecommendSlider/RecommendSlider.js b/fe/sidedish-fe/src/components/MenuDetailModal/MenuDetail/RecommendSlider/RecommendSlider.js
@@ -26,6 +26,13 @@ const TestItem = styled.div`
 function RecommendSlider({ data = [0, 1, 2, 3, 4, 5, 6] }) { // FIXME
   // const [data, setData] = setState()
   const sliderRef = useRef();
+  const [disableLeftBtn, setDisableLeftBtn] = useState();
+  const [disableRightBtn, setDisableRightBtn] = useState();
+
+  const handleSlide = () => {
+    setDisableLeftBtn(!sliderRef.current.slidableToLeft());
+    setDisableRightBtn(!sliderRef.current.slidableToRight());
+  }
 
   const handleClickLeftBtn = () => {
     sliderRef.current.slideToLeft();
@@ -42,10 +49,17 @@ function RecommendSlider({ data = [0, 1, 2, 3, 4, 5, 6] }) { // FIXME
   return (
     <StyledRecommendSlider>
       <div className="btn-cont">
-        <SlideBtn onClick={handleClickLeftBtn}></SlideBtn>
-        <SlideBtn onClick={handleClickRightBtn}></SlideBtn>
+        <SlideBtn disabled={disableLeftBtn} onClick={handleClickLeftBtn}>
+        </SlideBtn>
+        <SlideBtn disabled={disableRightBtn} onClick={handleClickRightBtn}>
+        </SlideBtn>
       </div>
-      <Slider ref={sliderRef} itemCntOnView={5} items={renderItems()}/>
+      <Slider
+        ref={sliderRef}
+        itemCntOnView={5}
+        items={renderItems()}
+        onSlide={handleSlide}
+        defaultBtn={false}/>
     </StyledRecommendSlider>
   )
 };

diff --git a/fe/sidedish-fe/src/components/common/Slider.js b/fe/sidedish-fe/src/components/common/Slider.js
@@ -22,9 +22,22 @@ const SliderListItem = styled.li`
   
 `;
 
+const _calcBetweenMargin = ({ itemWidth, sliderWidth, itemCntOnView }) => {
+  const totalItemWidthOnView = itemCntOnView * itemWidth;
+  return (sliderWidth - totalItemWidthOnView) / (itemCntOnView - 1);
+}
+
+const _calcTotalWidth = ({ itemWidth, itemLength, betweenMargin }) => {
+  return (itemWidth + betweenMargin) * itemLength - betweenMargin;
+}
+
+const _calcPositionLeft = ({ itemWidth, currIdx, betweenMargin }) => {
+  return (itemWidth + betweenMargin) * currIdx * -1;
+}
+
 // TODO: default slide buttons, disable slide button
 
-function Slider({ itemCntOnView, items, defaultBtn = true, pageable = false }, ref) {
+function Slider({ itemCntOnView, items, onSlide, defaultBtn = true, pageable = false }, ref) {
   const [currIdx, setCurrIdx] = useState(0);
   const [positionLeft, setPositionLeft] = useState(0);
   const [totalWidth, setTotalWidth] = useState();
@@ -35,17 +48,32 @@ function Slider({ itemCntOnView, items, defaultBtn = true, pageable = false }, r
   const itemRef = useRef();
 
   useEffect(() => {
-    const newBetweenMargin = _calcBetweenMargin();
+    const newBetweenMargin = _calcBetweenMargin({
+      itemWidth: itemRef.current.offsetWidth,
+      sliderWidth: styledRef.current.offsetWidth,
+      itemCntOnView
+    });
+    const newTotalWidth = _calcTotalWidth({
+      itemWidth: itemRef.current.offsetWidth,
+      itemLength: items.length,
+      betweenMargin: newBetweenMargin
+    });
+
     setBetweenMargin(newBetweenMargin);
-    setTotalWidth(_calcTotalWidth(newBetweenMargin));
-  }, [itemRef]);
+    setTotalWidth(newTotalWidth);
+  }, []);
 
   useEffect(() => {
     if (currIdx === undefined || betweenMargin === undefined)
       return;
 
-    const newPositionLeft = _calcPositionLeft(currIdx, betweenMargin);
+    const newPositionLeft = _calcPositionLeft({
+      itemWidth: itemRef.current.offsetWidth,
+      currIdx,
+      betweenMargin
+    });
     setPositionLeft(newPositionLeft);
+    onSlide();
   }, [currIdx, betweenMargin]);
 
   useImperativeHandle(ref, () => ({
@@ -57,19 +85,6 @@ function Slider({ itemCntOnView, items, defaultBtn = true, pageable = false }, r
     getTotalPage: () => totalPage,
   }));
 
-  const _calcPositionLeft = (currIdx, betweenMargin) => {
-    return (itemRef.current.offsetWidth + betweenMargin) * currIdx * -1;
-  }
-
-  const _calcBetweenMargin = () => {
-    const totalItemWidthOnView = itemCntOnView * itemRef.current.offsetWidth;
-    return (styledRef.current.offsetWidth - totalItemWidthOnView) / (itemCntOnView - 1);
-  }
-
-  const _calcTotalWidth = (betweenMargin) => {
-    return (itemRef.current.offsetWidth + betweenMargin) * items.length - betweenMargin;
-  }
-
   const slideToLeft = () => {
     if (!slidableToLeft())
       return;