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

package.json

@@ -4,22 +4,21 @@
   "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"
   },
   "dependencies": {
+    "@egjs/react-infinitegrid": "^4.12.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@egjs/react-infinitegrid": "^4.12.0",
     "@mui/icons-material": "^6.4.4",
     "@mui/material": "^6.4.4",
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/react-query": "^5.66.0",
     "axios": "^1.7.9",
     "gsap": "^3.12.7",
-    "pnpm": "^10.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router": "^7.1.5",

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/Home/components/GoToWrite.tsx

@@ -1,5 +1,6 @@
 import { Link } from 'react-router';
-import goToWrite from '@/assets/images/go-to-write.png';
+
+import goToWrite from '@/assets/images/postoffice-letter.png';
 
 const GoToWrite = () => {
   return (

src/pages/Landing/constants/index.ts

@@ -0,0 +1,25 @@
+export const STYLE_CLASS = [
+  {
+    imagePosition: 'left-[calc(50%-200px)]',
+    mask: 'bottom-26 left-[calc(50%+65px)]',
+    circle: 'h-41 w-41',
+    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-42 w-42',
+    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,49 @@
+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" onClick={() => setStep((prev) => prev + 1)}>
+      <img
+        src={LandingImg}
+        alt="서비스 소개 이미지"
+        className={twMerge(
+          'fixed 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">