clean: 코드 정리

JongMany · Jul 8, 2024 · 9bf5ca7 · 9bf5ca7
1 parent 1267f86
commit 9bf5ca7
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 35 deletions.
diff --git a/fe/src/pages/root/components/Contents.tsx b/fe/src/pages/root/components/Contents.tsx
@@ -25,26 +25,14 @@ export default function Contents() {
     <>
       <main
         className="absolute top-0 left-0 w-full h-[100vh]"
-        // className="absolute flex flex-col items-center justify-center w-full text-center pointer-events-none z-99"
         style={{
           scrollSnapType: "y mandatory",
           overflowY: "auto",
         }}
         ref={ref}
       >
-        <section
-          className="flex flex-col items-center justify-center"
-          // ref={containerRef}
-          // style={{
-          //   scrollSnapType: "y mandatory",
-          //   overflowY: "auto",
-          // }}
-        >
-          <div
-            // ref={containerRef}
-            // className="w-full h-[100vh] fixed top-0 left-0"
-            className="fixed top-0 left-0 w-full overflow-y-auto -z-10"
-          >
+        <section className="flex flex-col items-center justify-center">
+          <div className="fixed top-0 left-0 w-full overflow-y-auto -z-10">
             <div className="h-[100vh]" ref={containerRef}></div>
           </div>
           <Content height="137.5vh">

diff --git a/fe/src/pages/root/components/Main.tsx b/fe/src/pages/root/components/Main.tsx
@@ -1,18 +1,8 @@
 import Contents from "@/pages/root/components/Contents";
 
 export default function Main() {
-  // const containerRef = useRef<HTMLDivElement>(null);
-  // useScrollAnimation(containerRef);
-
   return (
     <>
-      {/* <div
-        // ref={containerRef}
-        // className="w-full h-[100vh] fixed top-0 left-0"
-        className="fixed top-0 left-0 w-full overflow-y-auto"
-      >
-        <div className="h-[100vh]" ref={containerRef}></div>
-      </div> */}
       <Contents />
     </>
   );

diff --git a/fe/src/pages/root/hooks/useScrollAnimation.ts b/fe/src/pages/root/hooks/useScrollAnimation.ts
@@ -8,20 +8,11 @@ export const useScrollAnimation = (
   scrollRef: MutableRefObject<HTMLDivElement | null>
 ) => {
   const sceneRef = useRef<StarScene | null>(null);
-  // const { scrollYProgress } = useScroll({
-  //   container: containerRef,
-  // });
   const { scrollYProgress } = useScroll({
     container: scrollRef,
   });
 
-  // useMotionValueEvent(scrollYProgress, "change", (scrollRate) => {
-  //   if (!sceneRef.current) return;
-  //   sceneRef.current.updateScrollRate(scrollRate);
-  // });
-
   useEffect(() => {
-    // console.log(document.documentElement.scrollHeight);
     if (containerRef.current && !sceneRef.current) {
       sceneRef.current = new StarScene(
         new THREE.WebGLRenderer({
@@ -33,12 +24,10 @@ export const useScrollAnimation = (
 
     const unsubscribe = scrollYProgress.on("change", (scrollRate) => {
       if (!sceneRef.current) return;
-      console.log(scrollRate);
       sceneRef.current.updateScrollRate(scrollRate);
     });
 
     return () => {
-      console.log("unmount");
       unsubscribe();
     };
   }, [containerRef.current, scrollYProgress]);

diff --git a/fe/src/utils/__tests__/lerp.spec.ts b/fe/src/utils/__tests__/lerp.spec.ts
@@ -0,0 +1,17 @@
+import { lerp, scalePercent } from "@/utils/lerp";
+
+describe("lerp", () => {
+  it("should interpolate between two numbers", () => {
+    expect(lerp(20, 60, 0.5)).toBe(40);
+    expect(lerp(-20, 60, 0.5)).toBe(20);
+    expect(lerp(20, 60, 0.75)).toBe(50);
+    expect(lerp(-20, -10, 0.1)).toBe(-19);
+  });
+});
+
+describe("scalePercent", () => {
+  it("should scale a percentage between two numbers", () => {
+    expect(scalePercent(50, 0, 100)).toBe(0.5);
+    expect(scalePercent(75, 50, 100)).toBe(0.5);
+  });
+});