Feat: 스크롤 감지 active

src/app/event/_components/BenefitDelivery.module.scss

@@ -1,6 +1,7 @@
 .container {
   width: 100%;
   background-color: $white;
+  scroll-margin-top: 10rem;
 }
 
 .inner {
@@ -19,7 +20,10 @@
 .center {
   @include pretendard-16-400;
 
-  margin-bottom: 200px;
+  width: 49.4rem;
+  margin: 0 auto 20rem;
+  padding: 3rem;
+  border: 0.1rem solid $gray-50;
   color: $gray-50;
 }
 

src/app/event/_components/BenefitJoin.module.scss

@@ -1,6 +1,7 @@
 .container {
   width: 100%;
   background-image: linear-gradient(#ecf5fe, #fff);
+  scroll-margin-top: 10rem;
 }
 
 .inner {

src/app/event/_components/BenefitRoulette.module.scss

@@ -1,6 +1,7 @@
 .container {
   width: 100%;
   background-color: #3363ff;
+  scroll-margin-top: 10rem;
 }
 
 .inner {

src/app/event/_components/EventTab.module.scss

@@ -22,4 +22,10 @@
   @include flex-center;
 
   flex: 1;
+
+  &.active {
+    height: 100%;
+    background-color: #ecf5fe;
+    color: $black;
+  }
 }

src/app/event/_components/EventTab.tsx

@@ -1,26 +1,64 @@
+'use client';
+
 import classNames from 'classnames/bind';
 import Link from 'next/link';
+import { useEffect, useState } from 'react';
 import styles from './EventTab.module.scss';
 
 const cn = classNames.bind(styles);
 
 export default function EventTab() {
+  const [activeSection, setActiveSection] = useState('');
+
+  useEffect(() => {
+    const sections = ['join', 'roulette', 'delivery'];
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveSection(entry.target.id);
+          }
+        });
+      },
+      { threshold: 0.5 },
+    );
+
+    sections.forEach((id) => {
+      const element = document.getElementById(id);
+      if (element) {
+        observer.observe(element);
+      }
+    });
+
+    return () => {
+      sections.forEach((id) => {
+        const element = document.getElementById(id);
+        if (element) {
+          observer.unobserve(element);
+        }
+      });
+    };
+  }, []);
+
   const eventList = [
-    { id: '#join', title: '신규 가입 혜택' },
-    { id: '#roulette', title: '100% 당첨 룰렛' },
-    { id: '#delivery', title: '언제나 무료배송' },
+    { id: 'join', title: '신규 가입 혜택' },
+    { id: 'roulette', title: '100% 당첨 룰렛' },
+    { id: 'delivery', title: '언제나 무료배송' },
   ];
 
   return (
     <div className={cn('container')}>
       <nav className={cn('inner')}>
-        {eventList.map((event) => {
-          return (
-            <Link key={event.id} href={event.id} className={cn('event-title')}>
-              {event.title}
-            </Link>
-          );
-        })}
+        {eventList.map((event) => (
+          <Link
+            key={event.id}
+            href={`#${event.id}`}
+            className={cn('event-title', { active: activeSection === event.id })}
+          >
+            {event.title}
+          </Link>
+        ))}
       </nav>
     </div>
   );