[feat] add login check and responsive design

src/app/page.tsx

@@ -1,129 +1,16 @@
 'use client';
 
-import Link from 'next/link';
-import EmailIcon from '/public/icons/email.svg';
-import FacebookIcon from '/public/icons/facebook.svg';
-import InstagramIcon from '/public/icons/instagram.svg';
-import CustomLogo from '@/components/root/CustomLogo';
-import ImageWrapper from '@/components/root/ImageWrapper';
-import styles from './page.module.css';
-import MainCard from '@/components/root/MainCard';
-import MiniCard from '@/components/root/MiniCard';
+import Layout from '@/components/landing/layout';
+import HeroSection from '@/components/landing/Section/HeroSection';
+import PrimarySection from '@/components/landing/Section/PrimarySection';
+import SecondarySection from '@/components/landing/Section/SecondarySection';
 
 export default function Home() {
   return (
-    <div className={styles.page}>
-      <header className={styles.header}>
-        <Link href="/" aria-label="홈으로 이동">
-          <CustomLogo className={styles.logo} />
-        </Link>
-        <nav className={styles.nav}>
-          <Link href="/login" className={styles.navLink}>
-            로그인
-          </Link>
-          <Link href="/signup" className={styles.navLink}>
-            회원가입
-          </Link>
-        </nav>
-      </header>
-      <main className={styles.main}>
-        <section className={styles.section}>
-          <ImageWrapper
-            src="/images/home.png"
-            alt="일정 관리 웹 어플리케이션"
-            className={styles.homeImg}
-            priority={true}
-          />
-          <div className={styles.homeTitleWrapper}>
-            <div className={styles.homeTitle}>새로운 일정관리</div>
-            <div className={styles.homeBrand}>Taskify</div>
-          </div>
-          <Link href="/login" className={styles.homeLoginBtn}>
-            로그인하기
-          </Link>
-        </section>
-        <section className={styles.section}>
-          <MainCard
-            title="일의 우선순위를 관리하세요"
-            subTitle="Point 1"
-            src="/images/landing_lg_1.png"
-            alt="우선순위 설정 기능 소개"
-            className={styles.cardLg1}
-          />
-          <MainCard
-            title="해야 할 일을 등록하세요"
-            subTitle="Point 2"
-            src="/images/landing_lg_2.png"
-            alt="할 일 카드 생성 기능 소개"
-            className={styles.cardLg2}
-            imgFirst={true}
-          />
-        </section>
-        <section>
-          <div className={styles.supplementTitle}>
-            생산성을 높이는 다양한 설정 ⚡
-          </div>
-          <div className={styles.cardSmalls}>
-            <MiniCard
-              src="/images/landing_sm_1.png"
-              alt="대시보드 설정 기능 소개"
-              title="대시보드 설정"
-              desc="대시보드 사진과 이름을 변경할 수 있어요."
-              className={styles.cardSm1}
-            />
-            <MiniCard
-              src="/images/landing_sm_2.png"
-              alt="초대하기 기능 소개"
-              title="초대"
-              desc="새로운 팀원을 초대할 수 있어요."
-              className={styles.cardSm2}
-            />
-            <MiniCard
-              src="/images/landing_sm_3.png"
-              alt="구성원 기능 소개"
-              title="구성원"
-              desc="구성원을 초대하고 내보낼 수 있어요."
-              className={styles.cardSm3}
-            />
-          </div>
-        </section>
-      </main>
-      <footer className={styles.footer}>
-        <div>©codeit - 2023</div>
-        <div className={styles.legalLinks}>
-          <Link href="/privacy-policy">Privacy Policy</Link>
-          <Link href="/faq">FAQ</Link>
-        </div>
-        <div className={styles.socialLinks}>
-          <a
-            href="#"
-            target="_blank"
-            rel="noopener noreferrer"
-            className={styles.socialLink}
-            aria-label="이메일 바로가기"
-          >
-            <EmailIcon aria-hidden="true" />
-          </a>
-          <a
-            href="#"
-            target="_blank"
-            rel="noopener noreferrer"
-            className={styles.socialLink}
-            aria-label="페이스북 바로가기"
-          >
-            <FacebookIcon aria-hidden="true" />
-          </a>
-          <a
-            href="#"
-            target="_blank"
-            rel="noopener noreferrer"
-            className={styles.socialLink}
-            aria-label="인스타그램 바로가기"
-          >
-            <InstagramIcon aria-hidden="true" />
-          </a>
-        </div>
-      </footer>
-    </div>
+    <Layout>
+      <HeroSection />
+      <PrimarySection />
+      <SecondarySection />
+    </Layout>
   );
 }

src/app/reset.css

@@ -12,7 +12,6 @@ body {
 
 body {
   font-family: var(--font-pretendard), sans-serif;
-  height: 100vh;
 }
 
 ul,

src/components/root/ImageWrapper.tsx → src/components/ImageWrapper.tsx

@@ -1,5 +1,5 @@
-import styles from './ImageWrapper.module.css';
 import Image from 'next/image';
+import styles from './ImageWrapper.module.css';
 
 interface Props {
   src: string;

src/components/landing/Footer/Footer.module.css

@@ -0,0 +1,31 @@
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 40px 140px;
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--gray-400);
+}
+
+.legalLinks {
+  display: flex;
+  gap: 32px;
+}
+
+.socialLinks {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.socialLink:first-child {
+  width: 20px;
+  height: 20px;
+}
+
+.socialLink {
+  width: 22px;
+  height: 22px;
+  fill: white;
+}

src/components/landing/Footer/Footer.tsx

@@ -0,0 +1,46 @@
+import Link from 'next/link';
+import EmailIcon from '/public/icons/email.svg';
+import FacebookIcon from '/public/icons/facebook.svg';
+import InstagramIcon from '/public/icons/instagram.svg';
+import styles from './Footer.module.css';
+
+export default function Footer() {
+  return (
+    <footer className={styles.footer}>
+      <div>©codeit - 2023</div>
+      <div className={styles.legalLinks}>
+        <Link href="/privacy-policy">Privacy Policy</Link>
+        <Link href="/faq">FAQ</Link>
+      </div>
+      <div className={styles.socialLinks}>
+        <a
+          href="#"
+          target="_blank"
+          rel="noopener noreferrer"
+          className={styles.socialLink}
+          aria-label="이메일 바로가기"
+        >
+          <EmailIcon aria-hidden="true" />
+        </a>
+        <a
+          href="#"
+          target="_blank"
+          rel="noopener noreferrer"
+          className={styles.socialLink}
+          aria-label="페이스북 바로가기"
+        >
+          <FacebookIcon aria-hidden="true" />
+        </a>
+        <a
+          href="#"
+          target="_blank"
+          rel="noopener noreferrer"
+          className={styles.socialLink}
+          aria-label="인스타그램 바로가기"
+        >
+          <InstagramIcon aria-hidden="true" />
+        </a>
+      </div>
+    </footer>
+  );
+}

src/components/landing/Header/Header.module.css

@@ -0,0 +1,28 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 999;
+  width: 100%;
+  height: 70px;
+  padding: 15px 80px;
+  background-color: inherit;
+}
+
+.logo {
+  fill: white;
+}
+
+.nav {
+  display: flex;
+  gap: 36px;
+}
+
+.navLink {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+}

src/components/landing/Header/Header.tsx

@@ -0,0 +1,21 @@
+import Link from 'next/link';
+import CustomLogo from '@/components/CustomLogo';
+import styles from './Header.module.css';
+
+export default function Header() {
+  return (
+    <header className={styles.header}>
+      <Link href="/" aria-label="홈으로 이동">
+        <CustomLogo className={styles.logo} />
+      </Link>
+      <nav className={styles.nav}>
+        <Link href="/login" className={styles.navLink}>
+          로그인
+        </Link>
+        <Link href="/signup" className={styles.navLink}>
+          회원가입
+        </Link>
+      </nav>
+    </header>
+  );
+}

src/components/landing/Section/HeroSection.module.css

@@ -0,0 +1,48 @@
+.section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 1200px;
+  margin-bottom: 180px;
+}
+
+.homeTitleWrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 110px;
+  margin-top: 40px;
+  gap: 28px;
+}
+
+.homeImg {
+  width: 722px;
+  height: 423px;
+}
+
+.homeTitle {
+  font-size: 76px;
+  font-weight: 700;
+  color: white;
+  line-height: 100px;
+  letter-spacing: 2px;
+}
+
+.homeBrand {
+  font-family: var(--font-montserrat);
+  font-size: 90px;
+  font-weight: 700;
+  color: var(--violet);
+  line-height: 65px;
+  letter-spacing: 1px;
+}
+
+.homeLoginBtn {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  height: 54px;
+  padding: 9px 101px;
+  border-radius: 8px;
+  background: var(--violet);
+}

src/components/landing/Section/HeroSection.tsx

@@ -0,0 +1,23 @@
+import ImageWrapper from '../../ImageWrapper';
+import Link from 'next/link';
+import styles from './HeroSection.module.css';
+
+export default function HeroSection() {
+  return (
+    <section className={styles.section}>
+      <ImageWrapper
+        src="/images/home.png"
+        alt="일정 관리 웹 어플리케이션"
+        className={styles.homeImg}
+        priority={true}
+      />
+      <div className={styles.homeTitleWrapper}>
+        <div className={styles.homeTitle}>새로운 일정관리</div>
+        <div className={styles.homeBrand}>Taskify</div>
+      </div>
+      <Link href="/login" className={styles.homeLoginBtn}>
+        로그인하기
+      </Link>
+    </section>
+  );
+}

src/components/root/MainCard.module.css → src/components/landing/Section/MainCard.module.css

@@ -1,6 +1,5 @@
 .card {
   display: flex;
-  flex-shrink: 0;
   align-items: flex-end;
   justify-content: flex-end;
   width: 100%;

src/components/root/MainCard.tsx → src/components/landing/Section/MainCard.tsx

@@ -1,4 +1,4 @@
-import ImageWrapper from '@/components/root/ImageWrapper';
+import ImageWrapper from '@/components/ImageWrapper';
 import styles from './MainCard.module.css';
 
 interface Props {

src/components/root/MiniCard.tsx → src/components/landing/Section/MiniCard.tsx

@@ -1,4 +1,4 @@
-import ImageWrapper from '@/components/root/ImageWrapper';
+import ImageWrapper from '@/components/ImageWrapper';
 import styles from './MiniCard.module.css';
 
 interface Props {

src/components/landing/Section/PrimarySection.module.css

@@ -0,0 +1,9 @@
+.cardLg1 {
+  width: 594px;
+  height: 498px;
+}
+
+.cardLg2 {
+  width: 436px;
+  height: 502px;
+}