design: 로그인 및 랜딩 페이지 퍼블리싱

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --host",
+    "dev": "vite --host 0.0.0.0",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview"

src/App.tsx

@@ -3,6 +3,7 @@ import { Route, Routes } from 'react-router';
 import useViewport from './hooks/useViewport';
 import Layout from './layouts/Layout';
 import Home from './pages/Home';
+import Landing from './pages/Landing';
 import LetterBoardPage from './pages/LetterBoard';
 import LetterBoardDetailPage from './pages/LetterBoardDetail';
 import LetterBoxPage from './pages/LetterBox';
@@ -24,6 +25,7 @@ const App = () => {
       <Route>
         <Route index element={<Home />} />
         <Route path="login" element={<LoginPage />} />
+        <Route path="landing" element={<Landing />} />
         <Route path="onboarding" element={<OnboardingPage />} />
         <Route path="letter">
           <Route element={<Layout />}>

src/assets/icons/index.ts

@@ -2,22 +2,29 @@ import AlarmIcon from './alarm.svg?react';
 import ArrowLeftIcon from './arrow-left.svg?react';
 import BoardIcon from './board.svg?react';
 import CloudIcon from './cloud.svg?react';
-import ColorSirenIcon from './color-siren.svg?react';
 import DeleteIcon from './delete.svg?react';
 import EnvelopeIcon from './envelope.svg?react';
-import InformationIcon from './infromation.svg?react';
+import GoogleIcon from './google.svg?react';
+import InformationIcon from './information.svg?react';
+import KakaoIcon from './kakao.svg?react';
 import LikeFilledIcon from './like-filled.svg?react';
 import LikeOutlinedIcon from './like-outlined.svg?react';
+import NaverIcon from './naver.svg?react';
 import NoticeIcon from './notice.svg?react';
 import PersonIcon from './person.svg?react';
 import RestartIcon from './restart.svg';
 import SirenFilledIcon from './siren-filled.svg?react';
 import SirenOutlinedIcon from './siren-outlined.svg?react';
 import SnowIcon from './snow.svg?react';
+import StampIcon from './stamp.svg?react';
 import ThermostatIcon from './thermostat.svg?react';
 import WarmIcon from './warm.svg?react';
 
 export {
+  NaverIcon,
+  KakaoIcon,
+  GoogleIcon,
+  StampIcon,
   AlarmIcon,
   PersonIcon,
   ArrowLeftIcon,
@@ -29,7 +36,6 @@ export {
   SnowIcon,
   ThermostatIcon,
   WarmIcon,
-  ColorSirenIcon,
   SirenFilledIcon,
   SirenOutlinedIcon,
   NoticeIcon,

src/pages/Landing/constants/index.ts

@@ -0,0 +1,25 @@
+export const STYLE_CLASS = [
+  {
+    imagePosition: 'left-[calc(50%-200px)]',
+    mask: 'bottom-27 left-[calc(50%+65px)]',
+    circle: 'h-40 w-40',
+    textPosition: '-top-20 left-[calc(50%-30px)] text-right',
+    description:
+      '따뜻한 편지 사례들을 모아 볼 수 있어요.\n응원이 필요한 사람들에게\n단체로 롤링페이퍼를 쓸 수도 있습니다.',
+  },
+  {
+    imagePosition: 'left-[calc(50%-200px)]',
+    mask: 'bottom-5 left-[calc(50%-75px)]',
+    circle: 'h-40 w-40',
+    textPosition: '-top-14 left-[calc(50%+40px)] text-left',
+    description: '주고받은 편지 내역을 확인해 보세요.\n보는 것 만으로도 마음이 따뜻해집니다.',
+  },
+  {
+    imagePosition: 'left-[calc(50%+130px)]',
+    mask: 'bottom-8 left-[calc(50%)]',
+    circle: 'h-65 w-65',
+    textPosition: '-top-14 left-1/2 text-center',
+    description:
+      '모르는 사람에게 고민을 털어 놓아 보세요.\n다른 사람에게도 위로, 응원, 축하를 보낼 수 있어요.',
+  },
+];

src/pages/Landing/index.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { Navigate } from 'react-router';
+import { twMerge } from 'tailwind-merge';
+
+import LandingImg from '@/assets/images/landing.png';
+
+import { STYLE_CLASS } from './constants';
+
+const Landing = () => {
+  const [step, setStep] = useState(0);
+
+  if (step === 3) return <Navigate to="/login" />;
+
+  return (
+    <main
+      className="relative flex grow justify-center overflow-hidden"
+      onClick={() => setStep((prev) => prev + 1)}
+    >
+      <img
+        src={LandingImg}
+        alt="서비스 소개 이미지"
+        className={twMerge(
+          'absolute bottom-0 h-70 w-auto max-w-none -translate-x-1/2 transition-all duration-200',
+          STYLE_CLASS[step].imagePosition,
+        )}
+      />
+      <section
+        className={twMerge(
+          'fixed z-1 -translate-x-1/2 transition-all duration-200',
+          STYLE_CLASS[step].mask,
+        )}
+      >
+        <p
+          className={twMerge(
+            'body-sb absolute z-2 w-max -translate-x-1/2 whitespace-pre-wrap text-white transition-all duration-200',
+            STYLE_CLASS[step].textPosition,
+          )}
+        >
+          {STYLE_CLASS[step].description}
+        </p>
+        <div
+          className={twMerge(
+            'rounded-full shadow-[0_0_0_9999px_rgba(0,0,0,0.5)]',
+            STYLE_CLASS[step].circle,
+          )}
+        />
+      </section>
+    </main>
+  );
+};
+
+export default Landing;

src/pages/LetterDetail/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-import { CloudIcon, ColorSirenIcon, SnowIcon, ThermostatIcon, WarmIcon } from '@/assets/icons';
+import { CloudIcon, SirenOutlinedIcon, SnowIcon, ThermostatIcon, WarmIcon } from '@/assets/icons';
 import ReportModal from '@/components/ReportModal';
 
 const LetterDetailPage = () => {
@@ -54,7 +54,7 @@ const LetterDetailPage = () => {
               setReportModalOpen(true);
             }}
           >
-            <ColorSirenIcon className="h-6 w-6" />
+            <SirenOutlinedIcon className="text-primary-1 h-6 w-6" />
           </button>
           {degreeModalOpen && (
             <div className="caption-b text-primary-1 bg-primary-5 absolute top-7 z-40 flex flex-col gap-1 p-2 shadow">

src/pages/Login/components/Background.tsx

@@ -0,0 +1,46 @@
+import { Link } from 'react-router';
+
+import FieldImg from '@/assets/images/field-1.png';
+import BlurImg from '@/assets/images/landing-blur.png';
+import EnvelopeImg from '@/assets/images/postoffice-letter.png';
+import PostofficeImg from '@/assets/images/postoffice.png';
+import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
+
+const Background = () => {
+  return (
+    <>
+      <div className="fixed -bottom-8 z-0 flex justify-center overflow-hidden">
+        <div className="relative flex h-[440px] min-w-[759.5px] items-end justify-center">
+          <Link to="/landing">
+            <div className="animate-login-move-up-down absolute bottom-[313px] left-1/2 z-1 -translate-x-1/2">
+              <p className="text-gray-60 body-r -rotate-[5.28deg] pr-1 text-center">
+                36.5 설명 보기
+              </p>
+              <img
+                src={EnvelopeImg}
+                alt="편지 이미지"
+                className="h-[90px] w-full object-contain object-center"
+              />
+            </div>
+          </Link>
+          <img
+            src={PostofficeImg}
+            alt="우체국 이미지"
+            className="absolute bottom-[93px] left-1/2 z-1 h-[184.5px] w-full -translate-x-1/2 object-contain object-[calc(50%-78px)]"
+          />
+          <img
+            src={FieldImg}
+            alt="언덕 이미지"
+            className="z-0 h-[205px] w-full object-cover object-[calc(50%-26px)]"
+          />
+        </div>
+      </div>
+      <BackgroundImageWrapper
+        className="fixed bottom-[-1px] left-1/2 z-0 h-50 w-screen -translate-x-1/2 object-fill"
+        imageUrl={BlurImg}
+      />
+    </>
+  );
+};
+
+export default Background;

src/pages/Login/index.tsx

@@ -1,5 +1,36 @@
+import { GoogleIcon, KakaoIcon, NaverIcon, StampIcon } from '@/assets/icons';
+
+import Background from './components/Background';
+
 const LoginPage = () => {
-  return <div>LoginPage</div>;
+  return (
+    <>
+      <main className="mt-10 flex grow flex-col items-center justify-between">
+        <section className="relative mt-10 text-center">
+          <StampIcon className="absolute -top-2 -right-0.5 -translate-y-1/2 translate-x-1/2" />
+          <h2 className="text-xl leading-[24px] font-medium tracking-[-1px]">마음이 맞닿는 온도</h2>
+          <h1 className="font-malang my-2 text-5xl leading-[57.6px] text-[#F15847]">36.5</h1>
+          <p className="body-sb text-gray-60">
+            모르는 사람과 편지를 주고 받으며
+            <br />
+            마음의 위안을 얻어보세요.
+          </p>
+        </section>
+        <Background />
+        <section className="relative flex gap-4 pb-[4%]">
+          <button type="button" className="rounded-full bg-[#03C75A] p-3.5">
+            <NaverIcon />
+          </button>
+          <button type="button" className="rounded-full bg-[#FEE500] p-3.5">
+            <KakaoIcon />
+          </button>
+          <button type="button" className="border-gray-5 rounded-full border bg-white p-3.5">
+            <GoogleIcon />
+          </button>
+        </section>
+      </main>
+    </>
+  );
 };
 
 export default LoginPage;

src/styles/animations.css

@@ -5,6 +5,7 @@
   --animate-show-text: showing 0.5s ease-in-out 6s forwards;
   --animate-rotate-show: rotate-show 1s ease-in-out forwards;
   --animate-blink: showing 0.3s forwards;
+  --animate-login-move-up-down: move-up-down 3s ease-in-out infinite;
 
   @keyframes down {
     0% {
@@ -54,6 +55,17 @@
     }
   }
 
+  /* login */
+  @keyframes move-up-down {
+    0%,
+    100% {
+      transform: translateY(10px);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
+  }
+
   /* onBoarding */
   /* comment floating */
   @keyframes float {

src/styles/fonts.css

@@ -1,3 +1,32 @@
+@font-face {
+  font-family: 'KyoboHandwriting2020A';
+  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/KyoboHandwriting2020A.woff')
+    format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'iceHimchan-Rg';
+  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/iceHimchan-Rg.woff2')
+    format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Gyeonggi_Batang_Regular';
+  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/Batang_Regular.woff')
+    format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'HancomMalangMalang';
+  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/HancomMalangMalang-Bold.woff2')
+    format('woff2');
+  font-weight: 700;
+  font-style: normal;
+}
+
 @layer base {
   /* 폰트들 */
   .pretendard {
@@ -12,25 +41,4 @@
   .batang {
     font-family: 'Gyeonggi_Batang_Regular';
   }
-  @font-face {
-    font-family: 'KyoboHandwriting2020A';
-    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/KyoboHandwriting2020A.woff')
-      format('woff');
-    font-weight: normal;
-    font-style: normal;
-  }
-  @font-face {
-    font-family: 'iceHimchan-Rg';
-    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/iceHimchan-Rg.woff2')
-      format('woff2');
-    font-weight: normal;
-    font-style: normal;
-  }
-  @font-face {
-    font-family: 'Gyeonggi_Batang_Regular';
-    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/Batang_Regular.woff')
-      format('woff');
-    font-weight: 400;
-    font-style: normal;
-  }
 }

src/styles/preflight.css

@@ -2,7 +2,6 @@
 
 @layer base {
   :root {
-    --body-bg-color: var(--color-white);
     --vh: 1vh;
     --vw: 1vw;
   }

src/styles/theme.css

@@ -30,4 +30,6 @@
   --color-primary-5: #fffbf8;
 
   --color-default-bg: #fffbf8;
+
+  --font-malang: 'HancomMalangMalang';
 }