From 7a14e114f53c52238381c28b5d39a3ff6e3e6629 Mon Sep 17 00:00:00 2001
From: dongree <dongwoo0307@naver.com>
Date: Sat, 16 Dec 2023 14:54:58 +0900
Subject: [PATCH 1/2] =?UTF-8?q?Chore:=20more=20options=20width=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/shared/MoreOptions.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/shared/MoreOptions.tsx b/src/components/shared/MoreOptions.tsx
index d2837db..e1845d5 100644
--- a/src/components/shared/MoreOptions.tsx
+++ b/src/components/shared/MoreOptions.tsx
@@ -20,7 +20,7 @@ export default function MoreOptions({
         <Image src={more} alt="more" />
       </button>
       <nav
-        className={`absolute top-6 right-0 bg-white flex flex-col z-10 gap-1 rounded-lg shadow-inner ${
+        className={`absolute top-6 right-0 bg-white flex flex-col z-10 gap-1 rounded-lg shadow-inner w-20 ${
           isActive ? 'visible' : 'invisible'
         }`}
       >

From 7c844e34cbc9f9a1ab12982193b5d5a321000313 Mon Sep 17 00:00:00 2001
From: dongree <dongwoo0307@naver.com>
Date: Mon, 18 Dec 2023 14:59:21 +0900
Subject: [PATCH 2/2] =?UTF-8?q?Fix:=20=EB=9E=9C=EB=94=A9=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80,=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                           |   6 +
 package.json                                |   1 +
 src/app/page.tsx                            |  66 +++++-
 src/components/landing/DescriptionBox.tsx   |  80 +++++++
 src/components/landing/LandingContainer.tsx | 230 --------------------
 src/components/landing/LandingMain.tsx      |  68 ++++++
 src/components/landing/LastNaigator.tsx     |  50 +++++
 7 files changed, 268 insertions(+), 233 deletions(-)
 create mode 100644 src/components/landing/DescriptionBox.tsx
 delete mode 100644 src/components/landing/LandingContainer.tsx
 create mode 100644 src/components/landing/LandingMain.tsx
 create mode 100644 src/components/landing/LastNaigator.tsx

diff --git a/package-lock.json b/package-lock.json
index 731893c..a5c9c64 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,6 +42,7 @@
         "embla-carousel-react": "^8.0.0-rc14",
         "eslint": "8.43.0",
         "eslint-config-next": "13.4.7",
+        "gsap": "^3.12.4",
         "loadsh": "^0.0.4",
         "lodash": "^4.17.21",
         "lowlight": "2.4",
@@ -8026,6 +8027,11 @@
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag=="
     },
+    "node_modules/gsap": {
+      "version": "3.12.4",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.4.tgz",
+      "integrity": "sha512-1ByAq8dD0W4aBZ/JArgaQvc0gyUfkGkP8mgAQa0qZGdpOKlSOhOf+WNXjoLimKaKG3Z4Iu6DKZtnyszqQeyqWQ=="
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
diff --git a/package.json b/package.json
index fb66dd8..15ada55 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "embla-carousel-react": "^8.0.0-rc14",
     "eslint": "8.43.0",
     "eslint-config-next": "13.4.7",
+    "gsap": "^3.12.4",
     "loadsh": "^0.0.4",
     "lodash": "^4.17.21",
     "lowlight": "2.4",
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 98b0b58..7f460d1 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,19 @@
-import LandingContainer from '@/components/landing/LandingContainer';
-import EventHeader from '@/components/shared/EventHeader';
 import { checkUser } from '@/service/auth';
 import { ACCESS_TOKEN, MAIN_PATH, REFRESH_TOKEN } from '@/utils/const';
 import { cookies } from 'next/headers';
 import { redirect } from 'next/navigation';
+import LandingMain from '@/components/landing/LandingMain';
+import DescriptionBox from '@/components/landing/DescriptionBox';
+import LastNaigator from '@/components/landing/LastNaigator';
+import Footer from '@/components/shared/Footer';
+import autocomplete from '@/assets/autocomplete.gif';
+import mypage from '@/assets/mypage.gif';
+import editing from '@/assets/edit-memo.gif';
+import hire from '@/assets/hire.gif';
+import editUnderline from '@/assets/icons/edit_underline.svg';
+import speechBubble from '@/assets/icons/speech_bubble.svg';
+import infinity from '@/assets/icons/rank/infinity_1.svg';
+import wheel from '@/assets/icons/wheel_icon.svg';
 
 export default async function LandingPage() {
   const accessToken = cookies().get(ACCESS_TOKEN)?.value;
@@ -14,5 +24,55 @@ export default async function LandingPage() {
 
   isLogin && redirect(MAIN_PATH);
 
-  return <LandingContainer />;
+  return (
+    <section>
+      <LandingMain />
+      <div className="flex flex-col max-w-screen-xl gap-20 py-20 mx-auto sm:py-60 sm:gap-60">
+        <DescriptionBox
+          title1="생성형 AI를 활용한"
+          title2="텍스트 자동 생성 기능"
+          description1="++ 명령어를 입력해 텍스트를 자동 생성해보세요!"
+          description2="글을 다 작성하면 자동생성된 요약과 태그를 제공합니다!"
+          subImgAlt="speech-bubble"
+          mainImgAlt="autocomplete"
+          subImg={speechBubble}
+          mainImg={autocomplete}
+        />
+        <DescriptionBox
+          title1="블럭 기반 에디터를 활용한"
+          title2="간편한 에디팅 기능"
+          description1="/ 키와 드래그를 이용하여 다양한 편집 기능을 사용해보세요!"
+          description2="바로 반영되는 마크다운 문법을 사용해보세요!"
+          subImgAlt="edit-underline"
+          mainImgAlt="editing"
+          subImg={editUnderline}
+          mainImg={editing}
+          reverse
+        />
+        <DescriptionBox
+          title1="즐겁고, 꾸준하게"
+          title2="Post Motivation"
+          description1="Post History 기능으로 꾸준하게 작성해보세요!"
+          description2="메모 작성, 답변 채택 등 다양한 활동을 통해 등급을 올려보세요!"
+          subImgAlt="infinity"
+          mainImgAlt="mypage"
+          subImg={infinity}
+          mainImg={mypage}
+        />
+        <DescriptionBox
+          title1="신속하고 편리한"
+          title2="채용 도우미 서비스"
+          description1="원하는 직무의 개발자를 인포럼에서 찾아보세요!"
+          description2="키워드에 맞는 질문을 자동 생성해 미니면접을 진행해보세요!"
+          subImgAlt="wheel"
+          mainImgAlt="hire"
+          subImg={wheel}
+          mainImg={hire}
+          reverse
+        />
+      </div>
+      <LastNaigator />
+      <Footer extraClass="w-full sm:snap-always sm:snap-end bg-white" />
+    </section>
+  );
 }
diff --git a/src/components/landing/DescriptionBox.tsx b/src/components/landing/DescriptionBox.tsx
new file mode 100644
index 0000000..76eabfd
--- /dev/null
+++ b/src/components/landing/DescriptionBox.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import Image, { StaticImageData } from 'next/image';
+import { useEffect, useRef } from 'react';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+type Props = {
+  title1: string;
+  title2: string;
+  description1: string;
+  description2: string;
+  subImg: string | StaticImageData;
+  mainImg: string | StaticImageData;
+  subImgAlt: string;
+  mainImgAlt: string;
+  reverse?: boolean;
+};
+
+gsap.registerPlugin(ScrollTrigger);
+
+export default function DescriptionBox({
+  title1,
+  title2,
+  description1,
+  description2,
+  subImg,
+  mainImg,
+  subImgAlt,
+  mainImgAlt,
+  reverse = false,
+}: Props) {
+  const ref = useRef<null | HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      const element = ref.current;
+      gsap.fromTo(
+        element,
+        { opacity: 0, y: 400 },
+        {
+          scrollTrigger: {
+            trigger: element,
+            start: 'top bottom',
+          },
+          y: 0,
+          opacity: 1,
+          duration: 1,
+        }
+      );
+    }
+  }, []);
+
+  return (
+    <div
+      className={`flex items-center justify-around h-full w-full font-semibold flex-col-reverse gap-8 md:gap-0 ${
+        reverse ? 'md:flex-row-reverse' : 'md:flex-row'
+      }`}
+      ref={ref}
+    >
+      <Image
+        src={mainImg}
+        alt={mainImgAlt}
+        className="object-cover rounded-2xl sm:w-[550px] w-[350px] shadow-lg"
+      />
+      <div className="px-4 sm:w-auto">
+        <Image src={subImg} alt={subImgAlt} className="w-[30px] sm:w-9 mt-5" />
+        <p className="mb-5 text-2xl font-bold leading-tight sm:text-4xl">
+          {title1}
+          <br />
+          {title2}
+        </p>
+        <p className="text-sm font-normal sm:text-xl">
+          {description1}
+          <br />
+          {description2}
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/landing/LandingContainer.tsx b/src/components/landing/LandingContainer.tsx
deleted file mode 100644
index 87d291e..0000000
--- a/src/components/landing/LandingContainer.tsx
+++ /dev/null
@@ -1,230 +0,0 @@
-'use client';
-
-import Image from 'next/image';
-import Link from 'next/link';
-import { useRef, useState } from 'react';
-import TypeIt from 'typeit-react';
-import autocomplete from '@/assets/autocomplete.gif';
-import mypage from '@/assets/mypage.gif';
-import editing from '@/assets/edit-memo.gif';
-import logo from '@/assets/inforum_logo.png';
-import editUnderline from '@/assets/icons/edit_underline.svg';
-import speechBubble from '@/assets/icons/speech_bubble.svg';
-import Footer from '@/components/shared/Footer';
-import down from '@/assets/icons/down.svg';
-import { MAIN_PATH } from '@/utils/const';
-import { useRouter } from 'next/navigation';
-import infinity from '@/assets/icons/rank/infinity_1.svg';
-import wheel from '@/assets/icons/wheel_icon.svg';
-import hire from '@/assets/hire.gif';
-import EventHeader from '../shared/EventHeader';
-
-export default function LandingContainer() {
-  const [readyState, setReadyState] = useState(false);
-  const firstScreenRef = useRef<null | HTMLDivElement>(null);
-  const router = useRouter();
-
-  return (
-    <section className="snap-y snap-mandatory overflow-y-scroll h-screen">
-      {/* <EventHeader /> */}
-      <div
-        className="flex relative flex-col justify-center items-center h-full sm:snap-always sm:snap-center  bg-gradient-to-t from-soma-blue-30 from-0% via-white via-80%"
-        ref={firstScreenRef}
-      >
-        <Image
-          src={logo}
-          width={350}
-          alt="logo"
-          className={`transition-opacity ${
-            readyState ? 'opacity-100' : 'opacity-0 invisible'
-          }  duration-1000 ease-in-out`}
-        />
-        <h1 className="text-4xl sm:text-6xl mt-5 font-bold text-center overflow-hidden">
-          <TypeIt
-            options={{
-              strings: [''],
-              speed: 70,
-              waitUntilVisible: true,
-              afterComplete: () => {
-                setReadyState(true);
-              },
-            }}
-          >
-            무한한 개발 이야기 공간
-          </TypeIt>
-        </h1>
-        <div
-          className={`text-center transition-opacity ${
-            readyState ? 'opacity-100' : 'opacity-0 invisible'
-          }  duration-1000 ease-in-out`}
-        >
-          <p className="text-sm sm:text-2xl my-7 text-center ">
-            다양한 개발 컨텐츠를 쉽고 간편하게 만들어 보세요
-            <br />
-            인포럼과 함께 긍정적인 개발 생태계를 만들어봐요
-          </p>
-          <button
-            className="bg-soma-blue-40 w-72 h-16 shadow-2xl text-white px-3.5 py-2 rounded-3xl transition hover:bg-soma-blue-50 sm:text-2xl"
-            onClick={() => {
-              router.push(MAIN_PATH);
-              router.refresh();
-            }}
-          >
-            시작하기
-          </button>
-        </div>
-        <Image
-          src={down}
-          alt="down"
-          className={`absolute bottom-10 animate-bounce transition-opacity rounded-full
-        ${
-          readyState ? 'opacity-100' : 'opacity-0 invisible'
-        } duration-1000 ease-in-out duration`}
-        />
-      </div>
-
-      <div className="flex flex-col sm:flex-row items-center justify-center h-full font-semibold sm:snap-always sm:snap-center ">
-        <Image
-          src={autocomplete}
-          alt="autocomplete"
-          width={600}
-          className="rounded-2xl"
-        />
-        <div className="sm:ml-14 w-full sm:w-auto px-4">
-          <Image
-            src={speechBubble}
-            alt="speech-bubble"
-            className="w-[30px] sm:w-9 mt-5"
-          />
-          <p className="text-2xl sm:text-4xl font-bold leading-tight mb-5">
-            생성형 AI를 활용한
-            <br />
-            텍스트 자동 생성 기능
-          </p>
-          <p className="text-sm sm:text-xl font-normal">
-            ++ 명령어를 입력해 텍스트를 자동 생성해보세요!
-            <br />
-            글을 다 작성하면 자동생성된 요약과 태그를 제공합니다!
-            {/* <br />
-            검색보다 빠르고 간편하게 정보를 제공합니다. */}
-          </p>
-        </div>
-      </div>
-
-      <div className="flex flex-col-reverse sm:flex-row items-center justify-center h-full font-semibold sm:snap-always sm:snap-center ">
-        <div className="sm:mr-14 w-full sm:w-auto px-4">
-          <Image
-            src={editUnderline}
-            alt="edit-underline"
-            className="w-[30px] sm:w-9 mt-5"
-          />
-          <p className="text-2xl sm:text-4xl font-bold leading-tight mb-5">
-            블럭 기반 에디터를 활용한
-            <br />
-            간편한 에디팅 기능
-          </p>
-          <p className="text-sm sm:text-xl font-normal">
-            / 키와 드래그를 이용하여 다양한 편집 기능을 사용해보세요!
-            <br />
-            바로 반영되는 마크다운 문법을 사용해보세요!
-          </p>
-        </div>
-        <Image
-          src={editing}
-          alt="landing"
-          width={600}
-          className="rounded-2xl"
-        />
-      </div>
-
-      <div className="flex flex-col sm:flex-row items-center justify-center h-full font-semibold sm:snap-always sm:snap-center ">
-        <Image src={mypage} alt="mypage" width={600} className="rounded-2xl" />
-        <div className="sm:ml-14 w-full sm:w-auto px-4">
-          <Image
-            src={infinity}
-            alt="infinity"
-            className="w-[30px] sm:w-9 mt-5"
-          />
-          <p className="text-2xl sm:text-4xl font-bold leading-tight mb-5">
-            즐겁고, 꾸준하게
-            <br />
-            Post Motivation
-          </p>
-          <p className="text-sm sm:text-xl font-normal">
-            Post History 기능으로 꾸준하게 작성해보세요!
-            <br />
-            메모 작성, 답변 채택 등 다양한 활동을 통해 등급을 올려보세요!
-          </p>
-        </div>
-      </div>
-      <div className="flex flex-col-reverse sm:flex-row items-center justify-center h-full font-semibold sm:snap-always sm:snap-center ">
-        <div className="sm:mr-14 w-full sm:w-auto px-4">
-          <Image src={wheel} alt="wheel" className="w-[30px] sm:w-9 mt-5" />
-          <p className="text-2xl sm:text-4xl font-bold leading-tight mb-5">
-            신속하고 편리한
-            <br />
-            채용 도우미 서비스
-          </p>
-          <p className="text-sm sm:text-xl font-normal">
-            원하는 직무의 개발자를 인포럼에서 찾아보세요!
-            <br />
-            키워드에 맞는 질문을 자동 생성해 미니면접을 진행해보세요!
-          </p>
-        </div>
-        <Image
-          src={hire}
-          alt="hire"
-          width={600}
-          className="rounded-2xl border-2"
-        />
-      </div>
-
-      <div className="flex relative flex-col items-center justify-center h-full font-semibold sm:snap-always sm:snap-center bg-[#F6F8FC]">
-        <p className="text-4xl sm:text-5xl w-80 sm:w-auto font-bold text-center leading-snug sm:leading-snug mb-16">
-          인포럼과 함께
-          <br />
-          토론하며 성장하는
-          <br />
-          긍정적인 개발공간을 만들어보세요.
-        </p>
-
-        <button
-          className="bg-soma-blue-40 w-72 h-16 shadow-2xl text-white px-3.5 py-2 rounded-3xl transition hover:bg-soma-blue-50 sm:text-2xl"
-          onClick={() => {
-            router.push(`${MAIN_PATH}`);
-            router.refresh();
-          }}
-        >
-          시작하기
-        </button>
-      </div>
-
-      <Footer extraClass="w-full sm:snap-always sm:snap-end bg-white" />
-
-      {/* <div className="h-full relative flex flex-col items-center justify-center snap-always snap-center bg-[#F6F8FC]">
-        <p className="text-lg sm:text-2xl font-semibold">지원 예정</p>
-        <br />
-        <ul className="grid grid-cols-4  gap-20 items-center sm:text-lg mb-28">
-          <li className="flex justify-center items-center w-32 h-32 sm:w-48 sm:h-48 bg-red-100 rounded-full font-semibold">
-            series 기능
-          </li>
-          <li className="flex justify-center items-center  w-32 h-32 sm:w-48 sm:h-48 bg-blue-100 rounded-full font-semibold">
-            스마트 드래그 기능
-          </li>
-          <li className="flex justify-center items-center  w-32 h-32 sm:w-48 sm:h-48 bg-green-100 rounded-full font-semibold">
-            등급 제도
-          </li>
-          <li className="flex justify-center items-center  w-32 h-32 sm:w-48 sm:h-48 bg-orange-100 rounded-full font-semibold text-center">
-            사용자 log 기반 <br />
-            나만의 포트폴리오
-          </li>
-        </ul>
-        <button onClick={scrolltoTop}>
-          <BsFillArrowUpCircleFill
-            className={`absolute bottom-10 right-10 text-soma-blue-40 w-10 h-10` }
-          />
-        </button>
-      </div> */}
-    </section>
-  );
-}
diff --git a/src/components/landing/LandingMain.tsx b/src/components/landing/LandingMain.tsx
new file mode 100644
index 0000000..d4e4654
--- /dev/null
+++ b/src/components/landing/LandingMain.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import { MAIN_PATH } from '@/utils/const';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRef, useState } from 'react';
+import TypeIt from 'typeit-react';
+import down from '@/assets/icons/down.svg';
+import logo from '@/assets/inforum_logo.png';
+
+export default function LandingMain() {
+  const [readyState, setReadyState] = useState(false);
+  const firstScreenRef = useRef<null | HTMLDivElement>(null);
+
+  return (
+    <div
+      className="flex flex-col justify-center items-center h-screen bg-gradient-to-t from-soma-blue-30 from-0% via-white via-80%"
+      ref={firstScreenRef}
+    >
+      <Image
+        src={logo}
+        width={350}
+        alt="logo"
+        className={`transition-opacity ${
+          readyState ? 'opacity-100' : 'opacity-0 invisible'
+        }  duration-1000 ease-in-out`}
+      />
+      <h1 className="mt-5 overflow-hidden text-4xl font-bold text-center sm:text-6xl">
+        <TypeIt
+          options={{
+            strings: [''],
+            speed: 70,
+            waitUntilVisible: true,
+            afterComplete: () => {
+              setReadyState(true);
+            },
+          }}
+        >
+          무한한 개발 이야기 공간
+        </TypeIt>
+      </h1>
+      <div
+        className={`flex flex-col items-center transition-opacity ${
+          readyState ? 'opacity-100' : 'opacity-0 invisible'
+        }  duration-1000 ease-in-out`}
+      >
+        <p className="text-sm text-center sm:text-2xl my-7 ">
+          다양한 개발 컨텐츠를 쉽고 간편하게 만들어 보세요
+          <br />
+          인포럼과 함께 긍정적인 개발 생태계를 만들어봐요
+        </p>
+        <Link href={`${MAIN_PATH}`}>
+          <div className="flex justify-center items-center bg-soma-blue-40 w-72 h-16 shadow-2xl text-white px-3.5 py-2 rounded-3xl transition hover:bg-soma-blue-50 sm:text-2xl">
+            시작하기
+          </div>
+        </Link>
+      </div>
+      <Image
+        src={down}
+        alt="down"
+        className={`absolute bottom-10 animate-bounce transition-opacity rounded-full
+        ${
+          readyState ? 'opacity-100' : 'opacity-0 invisible'
+        } duration-1000 ease-in-out duration`}
+      />
+    </div>
+  );
+}
diff --git a/src/components/landing/LastNaigator.tsx b/src/components/landing/LastNaigator.tsx
new file mode 100644
index 0000000..dd57536
--- /dev/null
+++ b/src/components/landing/LastNaigator.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import { MAIN_PATH } from '@/utils/const';
+import Link from 'next/link';
+import { useEffect, useRef } from 'react';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+export default function LastNaigator() {
+  const ref = useRef<null | HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      const element = ref.current;
+      gsap.fromTo(
+        element,
+        { opacity: 0 },
+        {
+          scrollTrigger: {
+            trigger: element,
+            start: 'top center',
+          },
+          opacity: 1,
+          duration: 1,
+        }
+      );
+    }
+  }, []);
+  return (
+    <div className="flex flex-col items-center justify-center font-semibold bg-[#F6F8FC] py-40">
+      <div className="flex flex-col items-center" ref={ref}>
+        <p className="mb-16 text-4xl font-bold leading-snug text-center sm:text-5xl w-80 sm:w-auto sm:leading-snug">
+          인포럼과 함께
+          <br />
+          토론하며 성장하는
+          <br />
+          긍정적인 개발공간을 만들어보세요.
+        </p>
+
+        <Link href={`${MAIN_PATH}`}>
+          <div className="flex justify-center items-center bg-soma-blue-40 w-72 h-16 shadow-2xl text-white px-3.5 py-2 rounded-3xl transition hover:bg-soma-blue-50 sm:text-2xl">
+            시작하기
+          </div>
+        </Link>
+      </div>
+    </div>
+  );
+}