From 5297c96608b13702dbc76e7c1c0ac2e232f0b2b5 Mon Sep 17 00:00:00 2001
From: "hyunwoo93.cha" <hyunwoo93.cha@lgepartners.com>
Date: Tue, 30 Jan 2024 17:11:02 +0900
Subject: [PATCH] =?UTF-8?q?TScroller=20=EC=B6=94=EA=B0=80,=20TBody=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TBody/TBody.jsx            |   8 +-
 .../src/components/TBody/TBody.module.less    |   3 +
 .../src/components/TScroller/TScroller.jsx    | 114 ++++++++++++++++++
 .../TScroller/TScroller.module.less           |  16 +++
 4 files changed, 140 insertions(+), 1 deletion(-)
 create mode 100644 com.twin.app.shoptime/src/components/TScroller/TScroller.jsx
 create mode 100644 com.twin.app.shoptime/src/components/TScroller/TScroller.module.less

diff --git a/com.twin.app.shoptime/src/components/TBody/TBody.jsx b/com.twin.app.shoptime/src/components/TBody/TBody.jsx
index c86a32c1..31668600 100644
--- a/com.twin.app.shoptime/src/components/TBody/TBody.jsx
+++ b/com.twin.app.shoptime/src/components/TBody/TBody.jsx
@@ -3,6 +3,7 @@ import React from "react";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 import css from "./TBody.module.less";
 import { SpotlightIds } from "../../utils/SpotlightIds";
+import TScroller from "../TScroller/TScroller";
 
 const Container = SpotlightContainerDecorator(
   { enterTo: "last-focused", preserveId: true },
@@ -13,6 +14,7 @@ export default function TBody({
   children,
   className,
   spotlightId = SpotlightIds.TBODY,
+  scrollable = true,
   ...rest
 }) {
   return (
@@ -21,7 +23,11 @@ export default function TBody({
       {...rest}
       className={classNames(css.tBody, className)}
     >
-      {children}
+      {scrollable ? (
+        <TScroller className={css.tScroller}>{children}</TScroller>
+      ) : (
+        { children }
+      )}
     </Container>
   );
 }
diff --git a/com.twin.app.shoptime/src/components/TBody/TBody.module.less b/com.twin.app.shoptime/src/components/TBody/TBody.module.less
index e69de29b..a943571c 100644
--- a/com.twin.app.shoptime/src/components/TBody/TBody.module.less
+++ b/com.twin.app.shoptime/src/components/TBody/TBody.module.less
@@ -0,0 +1,3 @@
+.tScroller {
+  height: 100%;
+}
diff --git a/com.twin.app.shoptime/src/components/TScroller/TScroller.jsx b/com.twin.app.shoptime/src/components/TScroller/TScroller.jsx
new file mode 100644
index 00000000..783ac595
--- /dev/null
+++ b/com.twin.app.shoptime/src/components/TScroller/TScroller.jsx
@@ -0,0 +1,114 @@
+import classNames from "classnames";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import Scroller from "@enact/sandstone/Scroller";
+import { Job } from "@enact/core/util";
+import { on, off } from "@enact/core/dispatcher";
+
+import css from "./TScroller.module.less";
+
+export default function TScroller({
+  className,
+  children,
+  verticalScrollbar = "hidden",
+  focusableScrollbar = false,
+  direction = "vertical",
+  horizontalScrollbar = "hidden",
+  scrollMode,
+  onScrollStart,
+  onScrollStop,
+  ...rest
+}) {
+  const isScrolling = useRef(false);
+  const scrollPosition = useRef("top");
+
+  const [onMoveScrollBarEffect, setOnMovevScrollBarEffect] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+
+  const offMoveScrollBarEffect = new Job((func) => func(), 1000);
+
+  useEffect(() => {
+    setIsMounted(true);
+
+    return () => setIsMounted(false);
+  }, []);
+
+  const handleWheel = useCallback(() => {
+    if (!onMoveScrollBarEffect) {
+      setOnMovevScrollBarEffect(true);
+
+      offMoveScrollBarEffect.current.start(setOnMovevScrollBarEffect);
+    } else {
+      return;
+    }
+  }, [offMoveScrollBarEffect, onMoveScrollBarEffect]);
+
+  useEffect(() => {
+    on("wheel", handleWheel, document.getElementById("TScroller"));
+
+    return () => {
+      off("wheel", handleWheel, document.getElementById("TScroller"));
+    };
+  }, [handleWheel]);
+
+  const _onScrollStart = useCallback(
+    (e) => {
+      if (onScrollStart) {
+        onScrollStart(e);
+      }
+
+      isScrolling.current = true;
+    },
+    [onScrollStart]
+  );
+
+  const _onScrollStop = useCallback(
+    (e) => {
+      if (onScrollStop) {
+        onScrollStop(e);
+      }
+
+      isScrolling.current = false;
+
+      if (e.reachedEdgeInfo) {
+        if (e.reachedEdgeInfo.top) {
+          scrollPosition.current = "top";
+        } else if (e.reachedEdgeInfo.bottom) {
+          scrollPosition.current = "bottom";
+        } else {
+          scrollPosition.current = "middle";
+        }
+      } else {
+        scrollPosition.current = "middle";
+      }
+    },
+    [onScrollStop]
+  );
+
+  return (
+    <Scroller
+      {...rest}
+      onScrollStart={_onScrollStart}
+      onScrollStop={_onScrollStop}
+      id="TScroller"
+      scrollMode={scrollMode || "translate"}
+      focusableScrollbar={focusableScrollbar}
+      className={classNames(
+        className,
+        isMounted && css.tScroller,
+        onMoveScrollBarEffect ? css.onMove : ""
+      )}
+      direction={direction}
+      horizontalScrollbar={horizontalScrollbar}
+      verticalScrollbar={verticalScrollbar}
+      overscrollEffectOn={{
+        arrowKey: false,
+        drag: false,
+        pageKey: false,
+        track: false,
+        wheel: false,
+      }}
+    >
+      {children}
+    </Scroller>
+  );
+}
diff --git a/com.twin.app.shoptime/src/components/TScroller/TScroller.module.less b/com.twin.app.shoptime/src/components/TScroller/TScroller.module.less
new file mode 100644
index 00000000..66916cb6
--- /dev/null
+++ b/com.twin.app.shoptime/src/components/TScroller/TScroller.module.less
@@ -0,0 +1,16 @@
+@import "../../style/CommonStyle.module.less";
+@import "../../style/utils.module.less";
+
+@scrollBar: 0.625rem;
+@scrollCircle: 1.6667rem;
+@barColor: transparent;
+@focusedBarColor: #transparent;
+@verTrackColor: #f1efec;
+
+.tScroller {
+  > div:nth-child(2) > div:nth-child(1) {
+    background-color: #fff;
+    width: 8px;
+    border-radius: 40px;
+  }
+}