Merge pull request #13 from JongMany/feature/main

feature: 스크롤 스냅 기능 추가
JongMany · Jul 7, 2024 · 23f48eb · 23f48eb
2 parents a691a52 + 70d7fc5
commit 23f48eb
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 69 deletions.
diff --git a/fe/src/pages/root/components/Content.tsx b/fe/src/pages/root/components/Content.tsx
@@ -8,13 +8,15 @@ export default function Content({
   children,
   height = "100vh",
 }: PropsWithChildren<Props>) {
-  const style = `w-full p-5 flex flex-col justify-center items-center text-white`;
+  const style = `w-full p-5 flex flex-col justify-center items-center text-white snap-start`;
 
   return (
     <section
       style={{
         height: height,
         minHeight: height,
+        scrollSnapAlign: "start",
+        flex: "0 0 auto",
       }}
       className={`${style}`}
     >

diff --git a/fe/src/pages/root/components/Contents.tsx b/fe/src/pages/root/components/Contents.tsx
@@ -1,81 +1,109 @@
 import Content from "@/pages/root/components/Content";
+import { useScrollAnimation } from "@/pages/root/hooks/useScrollAnimation";
 // import { useCustomScroll } from "@/pages/root/hooks/useCustomScroll";
 import { useMotionValueEvent, useScroll } from "framer-motion";
 import { useRef } from "react";
 
 export default function Contents() {
   const ref = useRef<HTMLDivElement>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
-  const { scrollYProgress } = useScroll({});
+  const { scrollYProgress } = useScroll({
+    container: ref,
+  });
 
   useMotionValueEvent(scrollYProgress, "change", (latest) => {
+    // console.log(latest);
     if (scrollRef.current) {
       scrollRef.current.innerHTML = `${latest}`;
     }
   });
 
+  const containerRef = useRef<HTMLDivElement>(null);
+  useScrollAnimation(containerRef, ref);
+
   return (
     <>
       <main
-        className="absolute flex flex-col justify-center w-full text-center pointer-events-none z-99"
+        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}
       >
-        <Content height="137.5vh">
-          <h1 className="text-4xl font-bold text-white">Hello, World!</h1>
-          <p className="text-lg">Welcome to my website!</p>
-        </Content>
+        <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"
+          >
+            <div className="h-[100vh]" ref={containerRef}></div>
+          </div>
+          <Content height="137.5vh">
+            <h1 className="text-4xl font-bold text-white">Hello, World!</h1>
+            <p className="text-lg">Welcome to my website!</p>
+          </Content>
 
-        <Content>
-          <h1 className="text-4xl font-bold text-white">My 1</h1>
-          <p className="text-lg">Welcome to my website!</p>
-        </Content>
+          <Content>
+            <h1 className="text-4xl font-bold text-white">My 1</h1>
+            <p className="text-lg">Welcome to my website!</p>
+          </Content>
 
-        <Content>
-          <h1 className="text-4xl font-bold text-white">My 2</h1>
-          <p className="text-lg">Welcome to my website!</p>
-        </Content>
+          <Content>
+            <h1 className="text-4xl font-bold text-white">My 2</h1>
+            <p className="text-lg">Welcome to my website!</p>
+          </Content>
 
-        <Content>
-          <h1 className="text-4xl font-bold text-white">My 3</h1>
-          <p className="text-lg">Welcome to my website!</p>
-        </Content>
-        <Content>
-          <h1 className="text-4xl font-bold text-white">My 4</h1>
-          <p className="text-lg">Welcome to my website!</p>
-        </Content>
-        <Content>
-          <h1 className="text-4xl font-bold text-white">My 5</h1>
-          <p className="text-lg">Welcome to my website!</p>
-        </Content>
-        <Content>
-          <h1 className="text-4xl font-bold text-white">My 6</h1>
-          <p className="text-lg">Welcome to my website!</p>
-        </Content>
-        <Content>
-          <h1 className="text-4xl font-bold text-white">My 7</h1>
-          <p className="text-lg">Welcome to my website!</p>
-        </Content>
-        <Content>
-          <h1 className="text-4xl font-bold text-white">My 8</h1>
-          <p className="text-lg">Welcome to my website!</p>
-        </Content>
-        <Content>
-          <h1 className="text-4xl font-bold text-white">My 9</h1>
-          <p className="text-lg">Welcome to my website!</p>
-        </Content>
-        <Content>
-          <h1 className="text-4xl font-bold text-white">My 10</h1>
-          <p className="text-lg">Welcome to my website!</p>
-        </Content>
-        <Content>
-          <h1 className="text-4xl font-bold text-white">My 11</h1>
-          <p className="text-lg">Welcome to my website!</p>
-        </Content>
-        {/* 137.5vh */}
-        <Content height="137.5vh">
-          <h1 className="text-4xl font-bold text-white">Hello, World!</h1>
-          <p className="text-lg">Welcome to my website!</p>
-        </Content>
+          <Content>
+            <h1 className="text-4xl font-bold text-white">My 3</h1>
+            <p className="text-lg">Welcome to my website!</p>
+          </Content>
+          <Content>
+            <h1 className="text-4xl font-bold text-white">My 4</h1>
+            <p className="text-lg">Welcome to my website!</p>
+          </Content>
+          <Content>
+            <h1 className="text-4xl font-bold text-white">My 5</h1>
+            <p className="text-lg">Welcome to my website!</p>
+          </Content>
+          <Content>
+            <h1 className="text-4xl font-bold text-white">My 6</h1>
+            <p className="text-lg">Welcome to my website!</p>
+          </Content>
+          <Content>
+            <h1 className="text-4xl font-bold text-white">My 7</h1>
+            <p className="text-lg">Welcome to my website!</p>
+          </Content>
+          <Content>
+            <h1 className="text-4xl font-bold text-white">My 8</h1>
+            <p className="text-lg">Welcome to my website!</p>
+          </Content>
+          <Content>
+            <h1 className="text-4xl font-bold text-white">My 9</h1>
+            <p className="text-lg">Welcome to my website!</p>
+          </Content>
+          <Content>
+            <h1 className="text-4xl font-bold text-white">My 10</h1>
+            <p className="text-lg">Welcome to my website!</p>
+          </Content>
+          <Content>
+            <h1 className="text-4xl font-bold text-white">My 11</h1>
+            <p className="text-lg">Welcome to my website!</p>
+          </Content>
+          {/* 137.5vh */}
+          <Content height="137.5vh">
+            <h1 className="text-4xl font-bold text-white">Hello, World!</h1>
+            <p className="text-lg">Welcome to my website!</p>
+          </Content>
+        </section>
       </main>
       <div className="fixed text-white bottom-2 left-2 z-99" ref={scrollRef}>
         0

diff --git a/fe/src/pages/root/components/LoadWrapper.tsx b/fe/src/pages/root/components/LoadWrapper.tsx
@@ -11,9 +11,9 @@ export default function LoadWrapper() {
   };
 
   return (
-    <main>
+    <>
       {start && <Main />}
       <MainLoadingScreen started={start} onStarted={showStartPage} />
-    </main>
+    </>
   );
 }
diff --git a/fe/src/pages/root/components/Main.tsx b/fe/src/pages/root/components/Main.tsx
@@ -1,17 +1,18 @@
 import Contents from "@/pages/root/components/Contents";
-import { useScrollAnimation } from "@/pages/root/hooks/useScrollAnimation";
-import { useRef } from "react";
 
 export default function Main() {
-  const containerRef = useRef<HTMLDivElement>(null);
-  useScrollAnimation(containerRef);
+  // const containerRef = useRef<HTMLDivElement>(null);
+  // useScrollAnimation(containerRef);
 
   return (
     <>
-      <div
-        ref={containerRef}
-        className="w-full h-[100vh] fixed top-0 left-0"
-      ></div>
+      {/* <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/useParallax.tsx b/fe/src/pages/root/hooks/useParallax.tsx
@@ -0,0 +1,7 @@
+// https://codesandbox.io/s/framer-motion-parallax-i9gwuc?from-embed
+
+import { MotionValue, useTransform } from "framer-motion";
+
+export function useParallax(value: MotionValue<number>, distance: number) {
+  return useTransform(value, [0, 1], [-distance, distance]);
+}
diff --git a/fe/src/pages/root/hooks/useScrollAnimation.ts b/fe/src/pages/root/hooks/useScrollAnimation.ts
@@ -4,17 +4,24 @@ import { MutableRefObject, useEffect, useRef } from "react";
 import * as THREE from "three";
 
 export const useScrollAnimation = (
-  containerRef: MutableRefObject<HTMLDivElement | null>
+  containerRef: MutableRefObject<HTMLDivElement | null>,
+  scrollRef: MutableRefObject<HTMLDivElement | null>
 ) => {
   const sceneRef = useRef<StarScene | null>(null);
-  const { scrollYProgress } = useScroll();
+  // 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({
@@ -26,11 +33,13 @@ 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]);
+  }, [containerRef.current, scrollYProgress]);
 };