chore: 링크 임시 변경 및 QA

YAPP-Github · Aug 12, 2024 · 38fad94 · 38fad94
1 parent a6a831c
commit 38fad94
Show file tree

Hide file tree

Showing 12 changed files with 104 additions and 74 deletions.
diff --git a/next.config.js b/next.config.js
@@ -1,7 +1,7 @@
 const nextConfig = {
   reactStrictMode: true,
   images: {
-    domains: ['localhost', 'via.placeholder.com', 'picsum.photos'],
+    domains: ['localhost', 'via.placeholder.com', 'picsum.photos', 'i.namu.wiki'],
   },
 
   async rewrites() {

diff --git a/src/app/landingpage/Landing1.tsx b/src/app/landingpage/Landing1.tsx
@@ -16,7 +16,9 @@ const Landing1 = () => {
       <Link
         style={{ width: '11.375rem', height: '3.75rem' }}
         className={`border-gradient_horizontal text-black flex items-center justify-center rounded`}
-        href='/onboard'
+        // href='/onboard'
+        href={'https://tally.so/r/mZlV1e'}
+        target='_blank'
       >
         시작하기
       </Link>

diff --git a/src/app/landingpage/Landing5.tsx b/src/app/landingpage/Landing5.tsx
@@ -47,11 +47,11 @@ const Landing5 = () => {
         <Image
           src={Image1}
           alt='Article Image'
-          className={`${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'} transition delay-[1800ms] object-contain h-1/3`}
+          className={`${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'} transition delay-[1100ms] object-contain h-1/3`}
         />
         <span className='relative flex flex-col h-full pb-20'>
           <div
-            className={`${isVisible ? 'translate-y-0' : 'translate-y-full'} transition delay-[2000ms] flex flex-col h-full gap-2 z-10`}
+            className={`${isVisible ? 'translate-y-0' : 'translate-y-full'} transition delay-[1300ms] flex flex-col h-full gap-2 z-10`}
           >
             <Image src={Image2} alt='Article Image' className='object-contain h-1/3' />
             <Image src={Image3} alt='Article Image' className='object-contain h-1/3' />
@@ -60,7 +60,7 @@ const Landing5 = () => {
           <span
             className={`${
               isVisible ? 'rotate-180' : 'rotate-0'
-            } overflow-hidden transition delay-[900ms] duration-[1200ms] h-[calc(130%)] aspect-square rounded-full absolute bottom-[100px] translate-y-1/2 translate-x-[9%]`}
+            } overflow-hidden transition delay-[900ms] h-[calc(130%)] aspect-square rounded-full absolute bottom-[100px] translate-y-1/2 translate-x-[9%]`}
           >
             <div className='bg-[#E1F1FD] h-1/2 w-full'></div>
             <div className='bg-[#FFF6C6] h-1/2 w-full'></div>

diff --git a/src/app/landingpage/Landing6.tsx b/src/app/landingpage/Landing6.tsx
@@ -33,25 +33,7 @@ const Landing6 = () => {
       </div>
       <div className='flex flex-col items-center gap-32'>
         <div
-          className={`${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'} transition delay-300 flex flex-row items-center gap-20 relative`}
-        >
-          <Image src={Image1} alt='Chapter1' />
-          <Image
-            src={Image1_1}
-            alt='Chapter1_span'
-            className={`${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'} transition delay-500 absolute bottom-6 left-32`}
-          />
-          <span className='flex flex-col gap-3'>
-            <span className='text-h3-onboard'>핵심만 빠르게 요약</span>
-            <span className='text-body2-onboard'>
-              10분 분량의 뉴스레터를 1분 안에 파악할 수 있도록 핵심만 알려줄게요
-              <br />
-              자투리 시간을 활용해서 쉽고 빠르게 인사이트를 얻으세요.{' '}
-            </span>
-          </span>
-        </div>
-        <div
-          className={`${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'} transition delay-700 flex flex-row items-center gap-14 relative`}
+          className={`${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'} transition delay-300 flex flex-row items-center gap-14 relative`}
         >
           <Landing6_2 width={334} fill={pinColor} />
           <div className='absolute -bottom-4 left-10 h-[240px] aspect-square bg-[#E1F1FD] rounded-full -z-10' />
@@ -65,13 +47,13 @@ const Landing6 = () => {
           </span>
         </div>
         <div
-          className={`${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'} transition delay-[1100ms] flex flex-row items-center gap-20`}
+          className={`${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'} transition delay-[500ms] flex flex-row items-center gap-20`}
         >
           <Image src={Image3} alt='Chapter3' />
           <Image
             src={Image3_1}
             alt='Chapter3_span'
-            className={`${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'} transition delay-[1300ms] absolute top-0 left-8`}
+            className={`${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'} transition delay-[700ms] absolute top-0 left-8`}
           />
           <span className='flex flex-col gap-3'>
             <span className='text-h3-onboard'>새로운 뉴스레터 탐색</span>

diff --git a/src/app/landingpage/Landing7/index.tsx b/src/app/landingpage/Landing7/index.tsx
@@ -44,21 +44,21 @@ const Landing7 = () => {
         <StepSpan
           title='Gmail 연결'
           description='평소 뉴스레터를 받아보는 Gmail 계정을 연동해요'
-          className={`${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'} transition delay-300`}
+          className={`${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'} transition delay-300 flex items-center`}
         >
           <Image src={Image1} alt='GMAIL' />
         </StepSpan>
         <StepSpan
           title='뉴스레터 고르기'
           description='InspoMailClub에서 읽을 뉴스레터를 골라요'
-          className={`${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'} transition delay-500`}
+          className={`${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'} transition delay-500 flex items-center`}
         >
           <Image src={Image2} alt='Newsletter' />
         </StepSpan>
         <StepSpan
           title='쾌적하게 즐기기'
           description='뉴스레터만 모아둔 환경에서 쾌적하게 인사이트를 얻으세요'
-          className={`${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'} transition delay-700`}
+          className={`${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'} transition delay-700 flex items-center`}
         >
           <Image src={Image3} alt='Enjoy' />
         </StepSpan>

diff --git a/src/app/landingpage/Landing8/CommentCard.tsx b/src/app/landingpage/Landing8/CommentCard.tsx
@@ -7,7 +7,7 @@ const CommentCard = ({ author, text, bgColor }: CardData) => {
       className={`w-[26.25rem] h-[11.125rem] p-8 rounded-4xl flex flex-col gap-3`}
     >
       <span className='text-caption text-darkgrey'>익명의 {author}님</span>
-      <span className='text-body2 text-wrap'>{text}</span>
+      <span className='text-body2 text-wrap line-clamp-3'>{text}</span>
     </div>
   );
 };

diff --git a/src/app/landingpage/Landing8/index.tsx b/src/app/landingpage/Landing8/index.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import useIntersectionObserver from '@/utils/hooks/useIntersectionObserver';
 import CommentCard from './CommentCard';
 import Marquee from 'react-fast-marquee';
+import Link from 'next/link';
 
 export interface CardData {
   id: number;
@@ -88,8 +89,11 @@ const Landing8: React.FC = () => {
         className={`${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'} delay-100 transition flex flex-col items-center gap-3`}
       >
         <span className='text-h2-onboard'>InspoMailClub로 확 바뀐 뉴스레터 읽기</span>
-        {/* TODO: Link로 교체 */}
-        <span className='text-body2-onboard'>{`나도 후기 작성하러 가기->`}</span>
+        <Link
+          className='text-body2-onboard'
+          href={'https://tally.so/r/mZlV1e'}
+          target='_blank'
+        >{`나도 후기 작성하러 가기 →`}</Link>
       </div>
       <div
         className={`${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'} delay-500 transition relative flex flex-col w-full gap-6`}

diff --git a/src/app/landingpage/Landing9.tsx b/src/app/landingpage/Landing9.tsx
@@ -25,9 +25,11 @@ const Landing9 = () => {
           InspoMailClub 멤버가 되어주세요!
           <Link
             className='flex items-center justify-center text-white w-[17.625rem] h-16 rounded text-body1-onboard border-gradient_horizontal_black'
-            href='/onboard'
+            // href='/onboard'
+            href={'https://tally.so/r/mZlV1e'}
+            target='_blank'
           >
-            {'인사이트 받으러 가기 ->'}
+            {'인사이트 받으러 가기 →'}
           </Link>
         </span>
       </span>

diff --git a/src/app/onboard/page.tsx b/src/app/onboard/page.tsx
@@ -17,7 +17,7 @@ const OnBoard = () => {
         </span>
         <span className='text-black text-h1'>방치되는 유익한 메일을 큐레이팅해요</span>
       </span>
-      <Carousel width={690} height={400} length={3}>
+      <Carousel width={603.75} height={350} length={3}>
         <div className='flex flex-col items-center justify-center'>
           <Carousel.Wrapper>
             <Carousel.Item index={0}>

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,19 +1,30 @@
 import Image from 'next/image';
 import InstagramLogo from '@/assets/icons/InstagramLogo.svg';
+import Link from 'next/link';
 
 const Footer = () => {
   return (
     <div className='w-full h-[35.5vh] flex pt-6 bg-black justify-center shrink-0'>
-      <div className='flex flex-row gap-8 text-white text-body1-onboard'>
+      <div className='flex flex-row gap-8 text-white text-body1-onboard h-fit'>
         {/* TODO: Link로 교체 */}
-        <span>InspoMailClub 소개</span>
-        <span>자주 묻는 질문</span>
-        <span>비즈니스 문의</span>
-        <span>개인정보보호정책</span>
-        <span>서비스이용약관</span>
-        <span>
+        <Link target='_blank' href=''>
+          InspoMailClub 소개
+        </Link>
+        <Link target='_blank' href='https://standing-lift-8bd.notion.site/FAQ-08e9d1f9f21e4db9bd107a10cb2923ed?pvs=4'>
+          자주 묻는 질문
+        </Link>
+        <Link target='_blank' href='mailto:[email protected]'>
+          비즈니스 문의
+        </Link>
+        <Link target='_blank' href='https://standing-lift-8bd.notion.site/161372fadec848e9a6533d4ee1f4efa5?pvs=4'>
+          개인정보보호정책
+        </Link>
+        <Link target='_blank' href='https://standing-lift-8bd.notion.site/74d694878a174139a8a5286ddb3d919c?pvs=4'>
+          서비스이용약관
+        </Link>
+        <Link target='_blank' href='https://www.instagram.com/inspomailclub/'>
           <Image width={24} height={24} src={InstagramLogo} alt='Instagram Link' />
-        </span>
+        </Link>
       </div>
     </div>
   );

diff --git a/src/components/Header/LandingPageHeader.tsx b/src/components/Header/LandingPageHeader.tsx
@@ -1,48 +1,77 @@
+import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import ServiceLogo from '@/assets/icons/ServiceLogo';
+import { GOOGLE_AUTH_API_URL } from '@/utils/constants/api/api';
 
 const LandingPageHeader = ({ backgroundFill }: { backgroundFill: 'black' | 'white' }) => {
-  const handleScroll = (id: number) => {
-    const element = document.getElementById(id.toString());
-    if (element) {
-      const elementPosition = element.getBoundingClientRect().top + window.pageYOffset;
-      window.scrollTo({
-        top: elementPosition - 64, // element's position + header height
-        behavior: 'smooth',
-      });
-    }
-  };
-
-  const navButtons = [
-    { id: 1, label: '뉴스레터와 친해지기 어려운 이유', className: 'text-black text-body1-onboard' },
-    { id: 2, label: '솔루션' },
-    { id: 5, label: 'Upcoming' },
-    { id: 6, label: '이용 방법' },
-    { id: 7, label: '이용 후기' },
+  // Define section groups by ids
+  const sectionGroups = [
+    { ids: [1], label: '뉴스레터와 친해지기 어려운 이유' },
+    { ids: [2, 3, 4], label: '솔루션' },
+    { ids: [5], label: 'Upcoming' },
+    { ids: [6], label: '이용 방법' },
+    { ids: [7, 8], label: '이용 후기' },
   ];
 
+  const [activeGroup, setActiveGroup] = useState<number | null>(null);
+
+  useEffect(() => {
+    // Flatten section ids from groups for observation
+    const sectionIds = sectionGroups.flatMap(group => group.ids);
+    const sections = sectionIds.map(id => document.getElementById(id.toString()));
+
+    const observer = new IntersectionObserver(
+      entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const id = parseInt(entry.target.id);
+            const group = sectionGroups.find(g => g.ids.includes(id));
+            if (group) {
+              setActiveGroup(group.ids[0]); // Set the first id of the active group
+            }
+          }
+        });
+      },
+      { threshold: 0.5 },
+    );
+
+    sections.forEach(section => {
+      if (section) observer.observe(section);
+    });
+
+    return () => {
+      sections.forEach(section => {
+        if (section) observer.unobserve(section);
+      });
+    };
+  }, [sectionGroups]);
+
   const renderNavButtons = () =>
-    navButtons.map(button => (
-      <button
-        key={button.id}
-        onClick={() => handleScroll(button.id)}
-        className={`flex items-center h-full ${button.className || ''}`}
-      >
-        {button.label}
-      </button>
-    ));
+    sectionGroups.map(group =>
+      group.label ? (
+        <Link
+          href={`#${group.ids[0]}`}
+          key={group.ids[0]}
+          className={`flex items-center h-full ${activeGroup === group.ids[0] ? 'text-black text-body1-onboard' : ''}`}
+        >
+          {group.label}
+        </Link>
+      ) : null,
+    );
 
   const renderAuthLinks = () => (
     <span className='flex flex-row justify-end gap-3 basis-1/5 text-body2-onboard'>
       <Link
         className={`${backgroundFill === 'white' ? 'text-black' : 'text-white'} w-[6.375rem] py-2 flex items-center justify-center`}
-        href='/login'
+        href={'https://tally.so/r/mZlV1e'}
+        target='_blank'
       >
         로그인
       </Link>
       <Link
         className={`${backgroundFill === 'white' ? 'border-gradient_horizontal_black text-white' : 'border-gradient_horizontal text-black'} w-[6.375rem] flex items-center justify-center rounded`}
-        href='/onboard'
+        href={'https://tally.so/r/mZlV1e'}
+        target='_blank'
       >
         시작하기
       </Link>
@@ -52,9 +81,9 @@ const LandingPageHeader = ({ backgroundFill }: { backgroundFill: 'black' | 'whit
   return (
     <div className={`sticky top-0 bg-${backgroundFill} flex h-16 shrink-0 justify-between w-full items-center px-6`}>
       <span className='relative flex items-center h-full basis-1/5'>
-        <button onClick={() => handleScroll(0)} className='flex items-center h-full'>
+        <Link href={`#0`} className='flex items-center h-full'>
           <ServiceLogo height={25} width={154} fill={backgroundFill === 'black' ? 'white' : 'black'} />
-        </button>
+        </Link>
       </span>
       {backgroundFill === 'white' && (
         <div className='flex flex-row items-center justify-center h-full gap-4 basis-3/5 text-body2-onboard text-darkgrey'>

diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
@@ -67,7 +67,7 @@
   display: none;
 }
 
-html {
+* {
   scroll-behavior: smooth;
 }
 .border-gradient_horizontal {