design: 랜딩페이지 퍼블리싱

Author: AAminha

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/images/landing.png

@@ -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/constants/index.ts

@@ -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/Landing/index.tsx

@@ -17,7 +17,7 @@ const LoginPage = () => {
           </p>
         </section>
         <Background />
-        <section className="relative flex gap-4 pb-[5%]">
+        <section className="relative flex gap-4 pb-[4%]">
           <button type="button" className="rounded-full bg-[#03C75A] p-3.5">
             <NaverIcon />
           </button>