Feat: Landing page

src/components/Landing/Landing.module.scss

@@ -0,0 +1,73 @@
+@import '@/styles/globals.scss';
+
+.background {
+  background-color: $blue60;
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px 120px;
+}
+
+.logoContainer {
+  margin-top: 222px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .logo {
+    margin-top: 32px;
+  }
+}
+
+.subtitle {
+  @include T16B;
+  color: $blue5;
+  margin-bottom: 16px;
+}
+
+.btnContainer {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.kakaoBtn {
+  width: 90%;
+  max-width: 350px;
+  height: 52px;
+  padding: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: 100px;
+  background: #ffe400;
+  color: #222;
+  @include BOLD;
+  line-height: 130%;
+  letter-spacing: -0.16px;
+  position: relative;
+  cursor: pointer;
+
+  .kakaoIcon {
+    position: absolute;
+    left: 24px;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.serviceBtn {
+  width: 90%;
+  max-width: 350px;
+  height: 20px;
+  text-align: center;
+  color: $white;
+  @include T16B;
+  cursor: pointer;
+}

src/components/Landing/index.tsx

@@ -0,0 +1,37 @@
+import IconComponent from '../Asset/Icon';
+import styles from './Landing.module.scss';
+
+export default function Landing() {
+  return (
+    <div className={styles.background}>
+      <div className={styles.logoContainer}>
+        <p className={styles.subtitle}>모두의 스포츠 시설 서비스</p>
+        <IconComponent name="logo" alt="logo" width={115.3} height={37.752} />
+        <div className={styles.logo}>
+          <IconComponent
+            name="landingDumbbell"
+            alt="dumbbell icon"
+            width={36}
+            height={36}
+          />
+        </div>
+      </div>
+      <div className={styles.btnContainer}>
+        <div className={styles.kakaoBtn} role="button" tabIndex={0}>
+          <div className={styles.kakaoIcon}>
+            <IconComponent
+              name="landingKakao"
+              alt="dumbbell icon"
+              width={24}
+              height={24}
+            />
+          </div>
+          카카오로 계속하기
+        </div>
+        <div className={styles.serviceBtn} role="button" tabIndex={0}>
+          서비스 둘러보기
+        </div>
+      </div>
+    </div>
+  );
+}

src/constants/asset.tsx

@@ -108,6 +108,9 @@ export const ICONS = {
   blueHeartBlank: '/icon/custom/icon-blue-heart-blank.svg',
   blueHeartFull: '/icon/custom/icon-blue-heart-full.svg',
   kakao: '/icon/custom/icon-kakao.svg',
+  landingDumbbell: '/icon/custom/icon-landing-dumbbell.svg',
+  logo: '/icon/custom/logo.svg',
+  landingKakao: '/icon/custom/icon-landing-kakao.svg',
 };
 
 // export const IMAGES = {

src/pages/_app.tsx

@@ -3,5 +3,11 @@ import '@/styles/globals.scss';
 import '@/styles/reset.css';
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <div className="body">
+      <div className="appContainer">
+        <Component {...pageProps} />
+      </div>
+    </div>
+  );
 }

src/pages/index.tsx

@@ -1,4 +1,5 @@
 import Head from 'next/head';
+import Landing from '@/components/Landing';
 
 export default function Home() {
   return (
@@ -7,8 +8,9 @@ export default function Home() {
         <title>헬로핏</title>
         <meta name="description" content="Hello Fit" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
+        <link rel="icon" href="../../public/favicon.ico" />
       </Head>
+      <Landing />
     </>
   );
 }

src/styles/globals.scss

@@ -1,33 +1,24 @@
 @font-face {
-  font-family: 'Pretendard';
+  font-family: 'Pretendard-Regular';
+  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff')
+    format('woff');
   font-weight: 400;
   font-style: normal;
-  src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.eot');
-  src:
-    url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.eot?#iefix')
-      format('embedded-opentype'),
-    url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff2')
-      format('woff2'),
-    url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff')
-      format('woff'),
-    url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.ttf')
-      format('truetype');
-  font-display: swap;
 }
 
 // font family + weight
 @mixin BOLD {
-  font-family: 'Pretendard', sans-serif;
+  font-family: 'Pretendard-Regular', sans-serif;
   font-weight: 600;
 }
 
 @mixin MEDIUM {
-  font-family: 'Pretendard', sans-serif;
+  font-family: 'Pretendard-Regular', sans-serif;
   font-weight: 500;
 }
 
 @mixin REGULAR {
-  font-family: 'Pretendard', sans-serif;
+  font-family: 'Pretendard-Regular', sans-serif;
   font-weight: 400;
 }
 
@@ -42,28 +33,28 @@
   @include BOLD;
   font-size: 20px;
   line-height: 24px;
-  letter-spacing: -2%;
+  letter-spacing: -0.4px;
 }
 
 @mixin T18B {
   @include BOLD;
   font-size: 18px;
   line-height: 25.2px;
-  letter-spacing: -2%;
+  letter-spacing: -0.36px;
 }
 
 @mixin T16B {
   @include BOLD;
   font-size: 16px;
   line-height: 24px;
-  letter-spacing: -2%;
+  letter-spacing: -0.32px;
 }
 
 @mixin T14B {
   @include BOLD;
   font-size: 14px;
   line-height: 23.8px;
-  letter-spacing: -2%;
+  letter-spacing: -0.28px;
 }
 
 @mixin B24M {
@@ -76,49 +67,49 @@
   @include MEDIUM;
   font-size: 20px;
   line-height: 24px;
-  letter-spacing: -2%;
+  letter-spacing: -0.4px;
 }
 
 @mixin B18M {
   @include MEDIUM;
   font-size: 18px;
   line-height: 24px;
-  letter-spacing: -2%;
+  letter-spacing: -0.36px;
 }
 
 @mixin B16M {
   @include MEDIUM;
   font-size: 16px;
   line-height: 24px;
-  letter-spacing: -2%;
+  letter-spacing: -0.36px;
 }
 
 @mixin B14M {
   @include MEDIUM;
   font-size: 14px;
   line-height: 24px;
-  letter-spacing: -2%;
+  letter-spacing: -0.28px;
 }
 
 @mixin B24R {
   @include REGULAR;
   font-size: 24px;
   line-height: 24px;
-  letter-spacing: -2%;
+  letter-spacing: -0.48px;
 }
 
 @mixin B20R {
   @include REGULAR;
   font-size: 20px;
   line-height: 24px;
-  letter-spacing: -2%;
+  letter-spacing: -0.4px;
 }
 
 @mixin B18R {
   @include REGULAR;
   font-size: 18px;
   line-height: 24px;
-  letter-spacing: -2%;
+  letter-spacing: -0.36px;
 }
 
 @mixin B14R {
@@ -131,42 +122,42 @@
   @include BOLD;
   font-size: 12px;
   line-height: 16px;
-  letter-spacing: -2%;
+  letter-spacing: -0.24px;
 }
 
 @mixin C12M {
   @include MEDIUM;
   font-size: 12px;
   line-height: 16px;
-  letter-spacing: -2%;
+  letter-spacing: -0.24px;
 }
 
 @mixin C12R {
   @include REGULAR;
   font-size: 12px;
   line-height: 16px;
-  letter-spacing: -2%;
+  letter-spacing: -0.24px;
 }
 
 @mixin C10B {
   @include BOLD;
   font-size: 10px;
   line-height: 16px;
-  letter-spacing: -2%;
+  letter-spacing: -0.2px;
 }
 
 @mixin C10M {
   @include MEDIUM;
   font-size: 10px;
   line-height: 16px;
-  letter-spacing: -2%;
+  letter-spacing: -0.2px;
 }
 
 @mixin C10R {
   @include REGULAR;
   font-size: 10px;
   line-height: 16px;
-  letter-spacing: -2%;
+  letter-spacing: -0.2px;
 }
 
 // Color
@@ -198,3 +189,30 @@ $gray80: #45484d;
 $gray90: #212121;
 
 $white: #ffffff;
+
+$mobile: 768px;
+
+.body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  min-height: 100vh;
+  margin: 0;
+  background-color: $white;
+}
+
+.appContainer {
+  width: 600px;
+  min-width: 345px;
+  min-height: 100vh;
+  background-color: $white;
+  border-left: 1px solid $gray20;
+  border-right: 1px solid $gray20;
+  overflow: hidden;
+
+  @media (max-width: $mobile) {
+    width: 100vw;
+    border: none;
+  }
+}