refactor: threshold 커스텀 적용

[#218]

packages/frontend/src/components/landing/Book/Book.tsx

@@ -1,24 +1,33 @@
+/* eslint-disable */
+
 import Image from "next/image";
 import Link from "next/link";
 
+import useScrollFadeIn from "../../../hooks/useScroll/useScrollFadeIn";
 import { toCodeTag } from "../../../utils/mapper";
 
 import * as styles from "./Book.css";
 import { data } from "./data";
 
 export default function Book() {
+  const thresholds = [0.1, 0.5, 0.5, 0.1];
+
   return (
     <section>
-      {data.map((item) => (
-        <div key={item.title} className={styles.container}>
-          <h1 className={styles.h1}>{item.title}</h1>
+      {data.map((item, index) => (
+        <div
+          key={item.title}
+          className={styles.container}
+          {...useScrollFadeIn("up", 1000, 200, thresholds[index])}
+        >
+          <h2 className={styles.h1}>{item.title}</h2>
           {item.description && (
             <div className={styles.description}>{item.description}</div>
           )}
           {item.subItems &&
             item.subItems.map((list) => (
               <>
-                <h2
+                <h3
                   className={styles.h2}
                   dangerouslySetInnerHTML={{ __html: toCodeTag(list.subtitle) }}
                 />

packages/frontend/src/components/landing/ServiceInfo/ServiceInfo.tsx

@@ -15,7 +15,7 @@ export default function ServiceInfo() {
 
   return (
     <section className={styles.serviceInfoContainer}>
-      <h1 className={styles.landingTitle} {...headingAnimation}>
+      <h2 className={styles.landingTitle} {...headingAnimation}>
         <span className="highlight">Git</span>
         {`이 너무 어렵게만\n느껴진다면?`}
         <Image
@@ -25,7 +25,7 @@ export default function ServiceInfo() {
           height={41}
           className={styles.folderImg}
         />
-      </h1>
+      </h2>
       <div className={styles.serviceInfo} {...ImgAnimation}>
         {[
           "안녕하세요! 저희는 팀 MergeMasters입니다. (만든 이들 : 박용준, 박정제, 박유현, 윤채현)",

packages/frontend/src/design-system/styles/reset.css

@@ -107,7 +107,6 @@ body {
 }
 a {
   color: inherit;
-  text-decoration: none;
 }
 ol,
 ul {

packages/frontend/src/hooks/useScroll/useScrollClipPath.ts

@@ -6,6 +6,7 @@ function useScrollClipPath<T extends HTMLElement>(
   direction = "left",
   duration = 1,
   delay = 0,
+  threshold = 0.7,
 ) {
   const element = useRef<T>(null);
 
@@ -35,7 +36,7 @@ function useScrollClipPath<T extends HTMLElement>(
     let observer: IntersectionObserver;
 
     if (element.current) {
-      observer = new IntersectionObserver(onScroll, { threshold: 0.7 });
+      observer = new IntersectionObserver(onScroll, { threshold });
       observer.observe(<T>element.current.parentNode);
     }
 

packages/frontend/src/hooks/useScroll/useScrollFadeIn.ts

@@ -6,14 +6,15 @@ function useScrollFadeIn<T extends HTMLElement>(
   direction: DirectionType = "up",
   duration = 1000,
   delay = 200,
+  threshold = 0.7,
 ) {
   const element = useRef<T>(null);
 
   const handleDirection: Direction = {
-    up: "translate3d(0, 50%, 0)",
-    down: "translate3d(0, -50%, 0)",
-    left: "translate3d(50%, 0, 0)",
-    right: "translate3d(-50%, 0, 0)",
+    up: "translate3d(0, 25%, 0)",
+    down: "translate3d(0, -25%, 0)",
+    left: "translate3d(25%, 0, 0)",
+    right: "translate3d(-25%, 0, 0)",
   };
 
   const onScroll = useCallback(
@@ -33,7 +34,7 @@ function useScrollFadeIn<T extends HTMLElement>(
     let observer: IntersectionObserver;
 
     if (element.current) {
-      observer = new IntersectionObserver(onScroll, { threshold: 0.7 });
+      observer = new IntersectionObserver(onScroll, { threshold });
       observer.observe(element.current);
     }