Feat/one page scroll

.eslintrc.json

@@ -11,14 +11,13 @@
     "react/function-component-definition": "error",
     "react/react-in-jsx-scope": "off",
     "import/order": "warn",
-    "@next/next/no-html-link-for-pages": "off"
+    "@next/next/no-html-link-for-pages": "off",
+    "@typescript-eslint/ban-ts-comment": "off"
   },
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "project": "./tsconfig.json"
   },
-  "plugins": [
-    "@typescript-eslint"
-  ],
+  "plugins": ["@typescript-eslint"],
   "root": true
 }

app/page.tsx

@@ -3,20 +3,9 @@ import About from "../components/Home/About/About";
 import Services from "../components/Home/Services/Services";
 import Members from "../components/Home/Members/Members";
 import Activity from "../components/Home/Activity/Activity";
-import ScrollNavigator, {
-  ScrollItem,
-} from "../components/common/Scroll/ScrollNavigator";
+import ScrollNavigator from "../components/common/ScrollNavigator/HomeScrollNavigator";
 import Support from "../components/Home/Support/Support";
 
-const homeScrollItems: ScrollItem[] = [
-  { name: "MAIN", anchorId: "main" },
-  { name: "ABOUT US", anchorId: "about" },
-  { name: "OUR SERVICES", anchorId: "services" },
-  { name: "MEMBERS", anchorId: "members" },
-  { name: "ACTIVITY", anchorId: "activity" },
-  { name: "SUPPORT", anchorId: "support" },
-];
-
 export default function Home() {
   return (
     <>
@@ -26,7 +15,7 @@ export default function Home() {
       <Members />
       <Activity />
       <Support />
-      <ScrollNavigator items={homeScrollItems} />
+      <ScrollNavigator />
     </>
   );
 }

app/service/page.tsx

@@ -2,15 +2,7 @@ import Snutt from "../../components/Service/Snutt/Snutt";
 import Snuboard from "../../components/Service/Snuboard/Snuboard";
 import Siksha from "../../components/Service/Siksha/Siksha";
 import Main from "../../components/Service/Main/Main";
-import { ScrollItem } from "../../components/common/Scroll/ScrollNavigator";
-import ServiceScrollNavigator from "../../components/common/Scroll/ServiceScrollNavigator";
-
-const ServiceScrollItems: ScrollItem[] = [
-  { name: "MAIN", anchorId: "main" },
-  { name: "SNUTT", anchorId: "snutt" },
-  { name: "식샤", anchorId: "siksha" },
-  { name: "스누보드", anchorId: "snuboard" },
-];
+import ServiceScrollNavigator from "../../components/common/ScrollNavigator/ServiceScrollNavigator";
 
 function Service() {
   return (
@@ -19,7 +11,7 @@ function Service() {
       <Snutt />
       <Siksha />
       <Snuboard />
-      <ServiceScrollNavigator items={ServiceScrollItems} />
+      <ServiceScrollNavigator />
     </>
   );
 }

components/Home/About/About.tsx

@@ -2,22 +2,17 @@
 
 import classNames from "classnames/bind";
 import { useState } from "react";
-import { useNavigatorScroll } from "../../common/Scroll/scroll";
+import { useHomeScroll } from "../homeScroll";
+import { handleOnePageScroll } from "../../common/commonScroll";
 import styles from "./About.module.scss";
 
 const cx = classNames.bind(styles);
 
 export default function About() {
   const [more, setMore] = useState(false);
   const [red, setRed] = useState(true);
-  const { state, targetRef } = useNavigatorScroll({
-    callback: ({ progress, setState }) => {
-      if (progress >= 1 && progress < 3) {
-        setState({ currentSection: "about" });
-      }
-    },
-    anchorId: "about",
-  });
+  const { state, targetRef } = useHomeScroll(handleOnePageScroll("about"));
+
   return (
     <section
       className={cx("container", {

components/Home/Activity/Activity.tsx

@@ -2,21 +2,14 @@
 
 import classNames from "classnames/bind";
 import { useState } from "react";
-import { useNavigatorScroll } from "../../common/Scroll/scroll";
+import { useHomeScroll } from "../homeScroll";
+import { handleOnePageScroll } from "../../common/commonScroll";
 import styles from "./Activity.module.scss";
 
 const cx = classNames.bind(styles);
 
-export default function About() {
-  const { state, targetRef } = useNavigatorScroll({
-    callback: ({ progress, setState }) => {
-      if (progress >= 1 && progress < 3) {
-        setState({ currentSection: "activity" });
-      }
-    },
-    anchorId: "activity",
-  });
-
+export default function Activity() {
+  const { state, targetRef } = useHomeScroll(handleOnePageScroll("activity"));
   const [index, setIndex] = useState(0);
 
   return (

components/Home/Main/Main.tsx

@@ -1,21 +1,14 @@
 "use client";
 
 import classNames from "classnames/bind";
-
-import { useNavigatorScroll } from "../../common/Scroll/scroll";
+import { useHomeScroll } from "../homeScroll";
+import { handleOnePageScroll } from "../../common/commonScroll";
 import styles from "./Main.module.scss";
 
 const cx = classNames.bind(styles);
 
 export default function Main() {
-  const { state, targetRef } = useNavigatorScroll({
-    callback: ({ progress, setState }) => {
-      if (progress >= 1 && progress < 3) {
-        setState({ currentSection: "main" });
-      }
-    },
-    anchorId: "main",
-  });
+  const { state, targetRef } = useHomeScroll(handleOnePageScroll("main"));
 
   return (
     <section
@@ -34,7 +27,7 @@ export default function Main() {
       </div>
       <div className={cx("buttonWrapper")}>
         <a
-          onClick={() => useNavigatorScroll.scrollTo("about")}
+          onClick={() => useHomeScroll.scrollTo("about")}
           className={cx("button")}
         >
           <img

components/Home/Members/Members.tsx

@@ -2,21 +2,15 @@
 
 import Image from "next/image";
 import classNames from "classnames/bind";
-import { useNavigatorScroll } from "../../common/Scroll/scroll";
-
+import { useHomeScroll } from "../homeScroll";
+import { handleOnePageScroll } from "../../common/commonScroll";
 import styles from "./Members.module.scss";
 
 const cx = classNames.bind(styles);
 
 export default function Members() {
-  const { state, targetRef } = useNavigatorScroll({
-    callback: ({ progress, setState }) => {
-      if (progress >= 1 && progress < 3) {
-        setState({ currentSection: "members" });
-      }
-    },
-    anchorId: "members",
-  });
+  const { state, targetRef } = useHomeScroll(handleOnePageScroll("members"));
+
   return (
     <section
       className={cx("container", { off: state.currentSection !== "members" })}

components/Home/Services/Services.tsx

@@ -3,7 +3,8 @@
 import classNames from "classnames/bind";
 import { useCallback, useEffect, useState } from "react";
 import Image from "next/image";
-import { useNavigatorScroll } from "../../common/Scroll/scroll";
+import { useHomeScroll } from "../homeScroll";
+import { handleOnePageScroll } from "../../common/commonScroll";
 import WaffleLink from "../../common/WaffleLink";
 import Carousel from "./Carousel";
 import ProgressBox from "./ProgressBox";
@@ -58,14 +59,7 @@ const carouselItemDataList: TCarouselItemData[] = [
 ];
 
 export default function Services() {
-  const { state, targetRef } = useNavigatorScroll({
-    callback: ({ progress, setState }) => {
-      if (progress >= 1 && progress < 3) {
-        setState({ currentSection: "services" });
-      }
-    },
-    anchorId: "services",
-  });
+  const { state, targetRef } = useHomeScroll(handleOnePageScroll("services"));
   const [serviceIndex, setServiceIndex] = useState<number>(1);
   const [isPlaying, setIsPlaying] = useState<boolean>(false);
 

components/Home/Support/Support.module.scss

@@ -2,7 +2,6 @@
 @use "./styles/color";
 
 .container {
-  position: relative;
   width: 100vw;
   height: 100vh;
   opacity: 1;
@@ -48,8 +47,6 @@
       .mail {
         display: flex;
         gap: 44px;
-        .column {
-        }
         .label {
           display: inline-block;
           width: 160px;

components/Home/Support/Support.tsx

@@ -1,22 +1,17 @@
 "use client";
 
 import classNames from "classnames/bind";
-import { useNavigatorScroll } from "../../common/Scroll/scroll";
+import { useHomeScroll } from "../homeScroll";
+import { handleOnePageScroll } from "../../common/commonScroll";
 import styles from "./Support.module.scss";
 
 const cx = classNames.bind(styles);
 
 export default function Support() {
-  const { state, targetRef } = useNavigatorScroll({
-    callback: ({ progress, setState }) => {
-      if (progress >= 1 && progress < 3) {
-        setState({ currentSection: "support" });
-      }
-    },
-    anchorId: "support",
-  });
+  const { state, targetRef } = useHomeScroll(handleOnePageScroll("support"));
+
   return (
-    <div
+    <section
       className={cx("container", { off: state.currentSection !== "support" })}
       ref={targetRef}
     >
@@ -87,6 +82,6 @@ export default function Support() {
           </div>
         </div>
       </div>
-    </div>
+    </section>
   );
 }

components/Home/homeScroll.ts

@@ -0,0 +1,37 @@
+import { createGlobalScrollHook } from "../../library/waffleScroll";
+
+export type ScrollItem = {
+  name: string;
+  anchorId: string;
+};
+
+export const homeScrollItems = [
+  { name: "MAIN", anchorId: "main" },
+  { name: "ABOUT US", anchorId: "about" },
+  { name: "OUR SERVICES", anchorId: "services" },
+  { name: "MEMBERS", anchorId: "members" },
+  { name: "ACTIVITY", anchorId: "activity" },
+  { name: "SUPPORT", anchorId: "support" },
+] as const;
+
+export const useHomeScroll = createGlobalScrollHook<{
+  currentSection: string;
+  initialDirection: null | "up" | "down";
+}>(
+  { currentSection: "main", initialDirection: null },
+  {
+    defaultCallback: ({ direction, getState, setState }) => {
+      if (getState().initialDirection === null) {
+        setState({ initialDirection: direction });
+      } else {
+        useHomeScroll.scrollTo(getState().currentSection, {
+          behavior: "instant",
+          block: direction === "up" ? "start" : "end",
+        });
+        /** @TODO setTimeout 말고 더 좋은 방법 고안하기 */
+        setTimeout(() => setState({ initialDirection: null }), 10);
+      }
+    },
+    defaultCallbackWait: 500,
+  },
+);

components/Service/Main/Main.tsx

@@ -2,23 +2,17 @@
 
 import classNames from "classnames/bind";
 import { useServiceScroll } from "../serviceScroll";
+import { handleOnePageScroll } from "../../common/commonScroll";
 import styles from "./Main.module.scss";
 
 const cx = classNames.bind(styles);
 
 export default function Main() {
-  const { state, targetRef } = useServiceScroll({
-    callback: ({ progress, setState }) => {
-      if (progress >= 1 && progress < 3) {
-        setState({ currentService: "main" });
-      }
-    },
-    anchorId: "main",
-  });
+  const { state, targetRef } = useServiceScroll(handleOnePageScroll("main"));
 
   return (
     <section
-      className={cx("container", { off: state.currentService !== "main" })}
+      className={cx("container", { off: state.currentSection !== "main" })}
       ref={targetRef}
     >
       <div className={cx("background")}>

components/Service/Siksha/Siksha.tsx

@@ -4,25 +4,18 @@ import classNames from "classnames/bind";
 import IntroductionCarousel from "../common/IntroductionCarousel/IntroductionCarousel";
 import IntroductionHead from "../common/IntroductionHead/IntroductionHead";
 import { useServiceScroll } from "../serviceScroll";
+import { handleOnePageScroll } from "../../common/commonScroll";
 import styles from "./Siksha.module.scss";
 
 const cx = classNames.bind(styles);
 
 function Siksha() {
-  const { targetRef, state } = useServiceScroll({
-    callback: ({ progress, getState, setState }) => {
-      if (progress > 0.75 && progress < 3) {
-        if (getState().currentService !== "siksha")
-          setState({ currentService: "siksha" });
-      }
-    },
-    anchorId: "siksha",
-  });
+  const { targetRef, state } = useServiceScroll(handleOnePageScroll("siksha"));
 
   return (
     <section
       className={cx("container", {
-        available: state.currentService === "siksha",
+        available: state.currentSection === "siksha",
       })}
       ref={targetRef}
     >

components/Service/Snuboard/Snuboard.tsx

@@ -4,25 +4,20 @@ import classNames from "classnames/bind";
 import IntroductionHead from "../common/IntroductionHead/IntroductionHead";
 import IntroductionCarousel from "../common/IntroductionCarousel/IntroductionCarousel";
 import { useServiceScroll } from "../serviceScroll";
+import { handleOnePageScroll } from "../../common/commonScroll";
 import styles from "./Snuboard.module.scss";
 
 const cx = classNames.bind(styles);
 
 function Snuboard() {
-  const { targetRef, state } = useServiceScroll({
-    callback: ({ progress, getState, setState }) => {
-      if (progress > 0.75 && progress < 2.7) {
-        if (getState().currentService !== "snuboard")
-          setState({ currentService: "snuboard" });
-      }
-    },
-    anchorId: "snuboard",
-  });
+  const { targetRef, state } = useServiceScroll(
+    handleOnePageScroll("snuboard"),
+  );
 
   return (
     <section
       className={cx("container", {
-        available: state.currentService === "snuboard",
+        available: state.currentSection === "snuboard",
       })}
       ref={targetRef}
     >