Refactor/69/landing folder structure

src/app/(public)/faq/page.tsx

@@ -1,5 +1,5 @@
-import SubHeader from '../_components/SubHeader';
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './_components/Accordion';
+import SubHeader from '@/components/landing/layout/SubHeader';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/landing/Accordion';
 
 const FAQ_CONTENTS = [
   {

src/app/(public)/layout.tsx

@@ -1,14 +1,66 @@
 import { PropsWithChildren } from 'react';
-import Header from './_components/Header';
-import Footer from './_components/Footer';
-import Main from './_components/Main';
+import Footer from '@/components/landing/layout/Footer';
+import Main from '@/components/landing/layout/Main';
+import SmoothScroll from '@/components/landing/SmoothScroll';
+import Header from '@/components/landing/layout/Header';
+import { BaseLinkItem, IconLinkItem } from '@/components/landing/layout/type';
+import ICON_MAIL from '@/assets/icons/email.svg';
+import ICON_FACEBOOK from '@/assets/icons/facebook.svg';
+import ICON_INSTAGRAM from '@/assets/icons/Instagram.svg';
+
+const ROOT_NAV_LIST: BaseLinkItem[] = [
+  {
+    path: '/login',
+    label: '로그인',
+  },
+  {
+    path: '/signup',
+    label: '회원가입',
+  },
+];
+
+const FOOTER_NAV_LIST: BaseLinkItem[] = [
+  {
+    path: '/privacy',
+    label: 'Privacy Policy',
+  },
+  {
+    path: '/faq',
+    label: 'FAQ',
+  },
+];
+
+const SNS_LIST: IconLinkItem[] = [
+  {
+    path: '#',
+    icon: ICON_MAIL,
+    label: 'Email',
+  },
+  {
+    path: '#',
+    icon: ICON_FACEBOOK,
+    label: 'Facebook',
+  },
+  {
+    path: '#',
+    icon: ICON_INSTAGRAM,
+    label: 'Instagram',
+  },
+];
 
 export default function layout({ children }: PropsWithChildren) {
   return (
-    <div className='min-h-dvh bg-black'>
-      <Header />
-      <Main>{children}</Main>
-      <Footer />
-    </div>
+    <SmoothScroll>
+      <div className='min-h-dvh bg-black'>
+        {/* header */}
+        <Header menus={ROOT_NAV_LIST} />
+
+        {/* contents */}
+        <Main>{children}</Main>
+
+        {/* footer */}
+        <Footer menus={FOOTER_NAV_LIST} sns={SNS_LIST} />
+      </div>
+    </SmoothScroll>
   );
 }

src/app/(public)/page.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import Feature from '@/components/landing/Feature';
+import Hero from '@/components/landing/Hero';
+import Setting from '@/components/landing/Setting';
+
+export default function page() {
+  return (
+    <>
+      <Hero />
+      <Feature />
+      <Setting />
+    </>
+  );
+}

src/app/(public)/privacy/page.tsx

@@ -1,4 +1,4 @@
-import SubHeader from '../_components/SubHeader';
+import SubHeader from '@/components/landing/layout/SubHeader';
 
 type PRIVACY_CONTENT = {
   title: string;

src/app/(public)/landing/_components/Hero.tsx → src/components/landing/Hero.tsx

@@ -4,6 +4,7 @@ import Image from 'next/image';
 import { easeInOut, motion } from 'motion/react';
 import LottieData from '@/assets/landings/hero.json';
 import LogoFull from '@/assets/images/logo_full_white.svg';
+import Link from 'next/link';
 
 const Lottie = dynamic(() => import('lottie-react'), { ssr: false });
 
@@ -22,6 +23,8 @@ const childVariants = {
   animate: { y: 0, opacity: 1, transition: { ease: easeInOut } },
 };
 
+const MotionLink = motion.create(Link);
+
 export default function Hero() {
   const [lottieLoaded, setLottieLoaded] = useState(false);
 
@@ -56,12 +59,13 @@ export default function Hero() {
         <span className='text-[2.5rem] font-bold tracking-tight text-white md:text-[3.5rem] lg:text-[4.75rem]'>새로운 일정 관리</span>
         <span className='font-mont text-[2.625rem] font-thin tracking-normal text-violet-20 md:text-[4.375rem] lg:text-[5.625rem]'>Taskify</span>
       </motion.h1>
-      <motion.button
+      <MotionLink
+        href='/login'
         variants={childVariants}
         className='mx-auto flex h-[2.875rem] w-[14.69rem] items-center justify-center rounded-lg bg-violet-20 text-md font-medium md:h-[3.375rem] md:w-[17.5rem] md:text-2lg'
       >
         로그인하기
-      </motion.button>
+      </MotionLink>
     </motion.div>
   );
 }

src/app/(public)/_components/Footer.tsx → src/components/landing/layout/Footer.tsx

@@ -1,48 +1,16 @@
-import ICON_MAIL from '@/assets/icons/email.svg';
-import ICON_FACEBOOK from '@/assets/icons/facebook.svg';
-import ICON_INSTAGRAM from '@/assets/icons/Instagram.svg';
 import Image from 'next/image';
 import Link from 'next/link';
 import { RootInner } from './Inner';
 import { BaseLinkItem, IconLinkItem } from './type';
 
-const FOOTER_NAV_LIST: BaseLinkItem[] = [
-  {
-    path: '/privacy',
-    label: 'Privacy Policy',
-  },
-  {
-    path: '/faq',
-    label: 'FAQ',
-  },
-];
-
-const SNS_LIST: IconLinkItem[] = [
-  {
-    path: '#',
-    icon: ICON_MAIL,
-    label: 'Email',
-  },
-  {
-    path: '#',
-    icon: ICON_FACEBOOK,
-    label: 'Facebook',
-  },
-  {
-    path: '#',
-    icon: ICON_INSTAGRAM,
-    label: 'Instagram',
-  },
-];
-
-export default function Footer() {
+export default function Footer({ menus, sns }: { menus: BaseLinkItem[]; sns: IconLinkItem[] }) {
   return (
     <footer className='text-xs text-gray-40'>
       <RootInner className='py-8 md:flex md:h-[6.25rem] md:items-center'>
         <div className='text-center md:w-full md:text-left'>©codeit - 2023</div>
         <nav className='mb-16 mt-3 md:m-0 md:w-full'>
           <ul className='flex justify-center gap-5'>
-            {FOOTER_NAV_LIST.map((item) => (
+            {menus.map((item) => (
               <li key={item.path}>
                 <Link href={item.path} className='hover:text-white hover:underline'>
                   {item.label}
@@ -52,7 +20,7 @@ export default function Footer() {
           </ul>
         </nav>
         <ul className='flex items-center justify-center gap-5 md:w-full md:justify-end'>
-          {SNS_LIST.map((item, index) => (
+          {sns.map((item, index) => (
             <li key={index}>
               <Link href={item.path} title={item.label} className='group'>
                 <Image src={item.icon} alt={item.label} className='transition-transform group-hover:-translate-y-1' />

src/components/landing/layout/Header.tsx

@@ -0,0 +1,30 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import { RootInner } from './Inner';
+import { BaseLinkItem } from './type';
+import LogoBI from '@/assets/images/logo_bi_white.svg';
+import LogoCI from '@/assets/images/logo_ci_white.svg';
+
+export default function Header({ menus }: { menus: BaseLinkItem[] }) {
+  return (
+    <header className='fixed left-0 right-0 top-0 z-50 h-[3.75rem] bg-black/40 md:h-[4.375rem]'>
+      <RootInner className='flex h-full items-center justify-between'>
+        <Link href='/' className='flex items-start'>
+          <Image src={LogoBI} alt='taskify' className='w-6 md:w-[1.8rem]' />
+          <Image src={LogoCI} alt='taskify' className='mt-2 hidden md:block' />
+        </Link>
+        <nav>
+          <ul className='flex items-center gap-9'>
+            {menus.map((item) => (
+              <li key={item.path}>
+                <Link href={item.path} className='text-md text-white hover:text-violet-20 md:text-lg'>
+                  {item.label}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </RootInner>
+    </header>
+  );
+}