Feat(landing): 랜딩페이지 디자인 업데이트

apps/landing/src/App.tsx

@@ -1,36 +1,24 @@
+import { useRef } from 'react';
 import './App.css';
-import HeroSection from './components/HeroSection';
-import FeatureBookmarkSection from './components/FeatureBookmarkSection';
-import FeatureReminderSection from './components/FeatureReminderSection';
-import FeatureRewardSection from './components/FeatureRewardSection';
-import FinalCTASection from './components/FinalCTASection';
 import Header from './components/Header';
+import Contents from './components/contents/Contents';
+import { useKeyboardScroll } from './hooks/useKeyboardScroll';
 
 function App() {
-  return (
-    <div className="h-dvh snap-y snap-mandatory overflow-y-scroll scroll-smooth">
-      <Header />
-
-      {/* 각 섹션들 */}
-      <section className="h-dvh snap-start">
-        <HeroSection />
-      </section>
-
-      <section className="h-dvh snap-start" id="bookmark-section">
-        <FeatureBookmarkSection />
-      </section>
+  const scrollRef = useRef<HTMLDivElement | null>(null);
 
-      <section className="h-dvh snap-start">
-        <FeatureReminderSection />
-      </section>
+  useKeyboardScroll(scrollRef);
 
-      <section className="h-dvh snap-start">
-        <FeatureRewardSection />
-      </section>
-
-      <section className="h-dvh snap-start">
-        <FinalCTASection />
-      </section>
+  return (
+    <div
+      ref={scrollRef}
+      className="h-dvh snap-y snap-mandatory overflow-y-scroll scroll-smooth outline-none"
+      tabIndex={-1}
+    >
+      <Header />
+      <main>
+        <Contents />
+      </main>
     </div>
   );
 }

apps/landing/src/components/contents/Contents.tsx

@@ -0,0 +1,21 @@
+import FeatureBookmarkSection from './FeatureBookmarkSection';
+import FeatureReminderSection from './FeatureReminderSection';
+import FeatureRewardSection from './FeatureRewardSection';
+import FinalCTASection from './FinalCTASection';
+import HeroSection from './HeroSection';
+import ShareBookmarkSection from './ShareBookmarkSection';
+
+const Contents = () => {
+  return (
+    <>
+      <HeroSection />
+      <ShareBookmarkSection />
+      <FeatureBookmarkSection />
+      <FeatureReminderSection />
+      <FeatureRewardSection />
+      <FinalCTASection />
+    </>
+  );
+};
+
+export default Contents;

apps/landing/src/components/contents/FeatureBookmarkSection.tsx

@@ -0,0 +1,30 @@
+import Bookmark from '../../assets/Bookmark.png';
+
+const FeatureBookmarkSection = () => {
+  return (
+    <section className="flex h-dvh snap-start items-center justify-center bg-white">
+      <div className="flex items-start gap-[7rem]">
+        {/* 글씨 영역 */}
+        <div className="flex flex-col items-start gap-[2.4rem] pl-[3rem] pt-[14rem] text-left">
+          <p className="head1">손쉽게 북마크하고 메모까지</p>
+          <p className="sub2-sb text-font-gray-3">
+            기억에 남기고 싶은 정보를 <br />
+            빠르게 북마크하세요.
+          </p>
+        </div>
+
+        {/* 이미지 영역 */}
+        <div className="flex items-center justify-center">
+          <img
+            src={Bookmark}
+            alt="Bookmark 기능 이미지"
+            width={447}
+            height={490}
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default FeatureBookmarkSection;

apps/landing/src/components/contents/FeatureReminderSection.tsx

@@ -0,0 +1,27 @@
+import Remind from '../../assets/Remind.svg';
+
+const FeatureReminderSection = () => {
+  return (
+    <section className="flex h-dvh snap-start items-center justify-center bg-white">
+      <div className="flex items-start gap-[7rem]">
+        {/* 이미지 영역 */}
+        <div className="flex items-center justify-center">
+          <img src={Remind} alt="Remind 기능 이미지" />
+        </div>
+        {/* 글씨 영역 */}
+        <div className="relative flex flex-1 flex-col items-end pr-[10rem] pt-[5rem] text-right">
+          <h1 className="head1 text-font-black mb-[2.4rem]">
+            잊지 않도록 리마인드
+          </h1>
+          <p className="sub2-sb text-font-gray-3">
+            첫 실행 시 리마인드 주기를 설정해 놓치지 않고
+            <br />
+            읽을 수 있어요.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default FeatureReminderSection;

apps/landing/src/components/contents/FeatureRewardSection.tsx

@@ -0,0 +1,26 @@
+import Dotori from '../../assets/Dotori.svg';
+
+const FeatureRewardSection = () => {
+  return (
+    <section className="flex h-dvh snap-start items-center justify-center bg-white">
+      <div className="flex items-start gap-[24rem]">
+        {/* 글씨 영역 */}
+        <div className="flex flex-col items-start gap-[2.4rem] pl-[3rem] pt-[14rem] text-left">
+          <h1 className="head1">도토리 보상 루프</h1>
+          <p className="sub2-sb text-font-gray-3">
+            내가 저장했던 지식을 활용할 때마다
+            <br />
+            도토리를 모아 성장해보세요.
+          </p>
+        </div>
+
+        {/* 이미지 영역 */}
+        <div className="flex items-center justify-center">
+          <img src={Dotori} alt="도토리 수집 보상 이미지" />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default FeatureRewardSection;

apps/landing/src/components/FinalCTASection.tsx → apps/landing/src/components/contents/FinalCTASection.tsx

@@ -1,7 +1,7 @@
+import { Button, sendGAEvent } from '@pinback/design-system/ui';
 import Lottie from 'lottie-react';
-import Chippiface from '../assets/5_chippiface.json';
-import { sendGAEvent, Button } from '@pinback/design-system/ui';
-import Footer from './Footer';
+import Chippiface from '../../assets/5_chippiface.json';
+import Footer from '../Footer';
 const FinalCTASection = () => {
   const handleInstallClick = () => {
     sendGAEvent('landing', 'landing', '2-landing-bottomBtn');
@@ -10,7 +10,7 @@ const FinalCTASection = () => {
   };
 
   return (
-    <div className="relative flex h-dvh flex-col">
+    <div className="relative flex h-dvh snap-start flex-col">
       <section className="bg-white-bg mt-[10.3rem] flex w-full flex-col items-center justify-center gap-[2rem] overflow-hidden px-[17.2rem] text-center">
         <Lottie
           animationData={Chippiface}

apps/landing/src/components/HeroSection.tsx → apps/landing/src/components/contents/HeroSection.tsx

@@ -1,9 +1,9 @@
-import { useEffect } from 'react';
 import { Button } from '@pinback/design-system/ui';
-import landingmain from '../assets/1_landingmain.json';
 import Lottie from 'lottie-react';
-import landing_bell from '../assets/landing_bell.svg';
-import landing_icon from '../assets/landing_icon.svg';
+import { useEffect } from 'react';
+import landingmain from '../../assets/1_landingmain.json';
+import landing_bell from '../../assets/landing_bell.svg';
+import landing_icon from '../../assets/landing_icon.svg';
 
 const floatAnimationStyle = `
 @keyframes floatY {
@@ -26,7 +26,7 @@ const HeroSection = () => {
   }, []);
 
   return (
-    <section className="bg-white-bg flex h-dvh w-full flex-col items-center justify-center px-[17.2rem] text-center">
+    <section className="bg-white-bg flex h-dvh w-full snap-start flex-col items-center justify-center px-[17.2rem] text-center">
       <div className="flex flex-col items-center justify-center">
         <div className="flex flex-row flex-nowrap items-end justify-center gap-[3rem]">
           <img src={landing_icon} alt="Landing Icon" />

apps/landing/src/components/contents/ShareBookmarkSection.tsx

@@ -0,0 +1,31 @@
+import JobBookmark from '../../assets/JobBookmark.svg';
+
+const ShareBookmarkSection = () => {
+  return (
+    <section className="flex h-dvh snap-start items-center justify-center bg-white">
+      <div className="flex items-start gap-[7rem]">
+        {/* 이미지 영역 */}
+        <div className="flex items-center justify-center">
+          <img src={JobBookmark} alt="북마크 공유 기능 이미지" />
+        </div>
+        {/* 글씨 영역 */}
+        <div className="relative flex flex-1 flex-col items-end pr-[10rem] pt-[5rem] text-right">
+          <div className="bg-main500 sub3-sb text-white-bg inline-flex items-center gap-[0.8rem] rounded-full px-[1.6rem] py-[0.8rem]">
+            <span>새 기능이 출시됐어요!</span>
+          </div>
+
+          <h1 className="head1 text-font-black mb-[2.4rem] mt-[1.6rem]">
+            나와 같은 IT 분야 사람들이
+            <br />
+            저장한 글을 확인해요
+          </h1>
+          <p className="sub2-sb text-font-gray-3">
+            유용한 정보나 아티클을 쉽게 추천받을 수 있어요
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ShareBookmarkSection;

apps/landing/src/hooks/useKeyboardScroll.ts

@@ -0,0 +1,41 @@
+import { RefObject, useEffect } from 'react';
+
+export const useKeyboardScroll = <T extends HTMLElement>(
+  scrollRef: RefObject<T | null>
+) => {
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const container = scrollRef.current;
+      if (!container) return;
+
+      const activeElement = document.activeElement as HTMLElement;
+      const isInputFocused =
+        ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A'].includes(
+          activeElement.tagName
+        ) || activeElement.isContentEditable;
+
+      if (isInputFocused) return;
+
+      const pageHeight = window.innerHeight;
+
+      switch (e.key) {
+        case 'ArrowDown':
+        case 'PageDown':
+        case ' ':
+          e.preventDefault();
+          container.scrollBy({ top: pageHeight, behavior: 'smooth' });
+          break;
+        case 'ArrowUp':
+        case 'PageUp':
+          e.preventDefault();
+          container.scrollBy({ top: -pageHeight, behavior: 'smooth' });
+          break;
+        default:
+          break;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [scrollRef]);
+};