Merge pull request #481 from TEAM-HOUME/feat/landing-view/#477

[feat] 랜딩 페이지 & Action 버튼 공컴

Author: earl9rey

src/pages/landing/LandingPage.css.ts

@@ -0,0 +1,58 @@
+import { style } from '@vanilla-extract/css';
+
+import ImgLanding01 from '@assets/images/ImgLanding_01.png';
+
+import { colorVars } from '@styles/tokensV2/color.css';
+import { fontVars } from '@styles/tokensV2/font.css';
+import { unitVars } from '@styles/tokensV2/unit.css';
+
+export const page = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  background: `url(${ImgLanding01}) center / cover no-repeat`,
+  padding: `${unitVars.unit.gapPadding['300']} ${unitVars.unit.gapPadding['000']}`,
+  width: '100%',
+  minHeight: '100vh',
+});
+
+export const mainSection = style({
+  display: 'flex',
+  flex: '1 0 0',
+  flexDirection: 'column',
+  alignItems: 'center',
+  alignSelf: 'stretch',
+  gap: unitVars.unit.gapPadding['000'],
+  padding: `${unitVars.unit.gapPadding['400']} ${unitVars.unit.gapPadding['500']}`,
+});
+
+export const contentBlock = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  alignSelf: 'stretch',
+  gap: unitVars.unit.gapPadding['700'],
+  padding: `${unitVars.unit.gapPadding['900']} ${unitVars.unit.gapPadding['000']}`,
+});
+
+export const textContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  alignSelf: 'stretch',
+  justifyContent: 'center',
+  gap: unitVars.unit.gapPadding['300'],
+  padding: `${unitVars.unit.gapPadding['000']}`,
+});
+
+export const title = style({
+  ...fontVars.font.title_sb_24,
+  textAlign: 'center',
+  color: colorVars.color.text.inverse,
+});
+
+export const text = style({
+  ...fontVars.font.body_r_14,
+  textAlign: 'center',
+  color: colorVars.color.text.inverseSecondary,
+});

src/pages/landing/LandingPage.tsx

@@ -0,0 +1,53 @@
+import { useABTest } from '@pages/generate/hooks/useABTest';
+
+import ActionButton from '@shared/components/v2/button/actionButton/ActionButton';
+import LogoNavBar from '@shared/components/v2/navBar/LogoNavBar';
+
+import * as styles from './LandingPage.css';
+
+const LANDING_CONTENT_MOCK = {
+  titleLine: "'재택근무가 필요한'",
+} as const;
+
+const LandingPage = () => {
+  const { variant, isLoading } = useABTest();
+
+  /** A/B: single → solid inverse CTA, multiple → ghost + 아이콘 CTA */
+  const isGhostCta = !isLoading && variant === 'multiple';
+
+  return (
+    <main className={styles.page}>
+      <LogoNavBar page="landing" />
+      <section className={styles.mainSection}>
+        <div className={styles.contentBlock}>
+          <div className={styles.textContainer}>
+            <p className={styles.title}>
+              {LANDING_CONTENT_MOCK.titleLine}
+              <br />
+              나를 위한 맞춤형 인테리어는?
+            </p>
+            <p className={styles.text}>
+              집 구조, 취향, 생활 방식까지 반영하는 AI 홈 스타일링
+            </p>
+          </div>
+          {isGhostCta ? (
+            <ActionButton
+              variant="ghost"
+              color="primary"
+              size="L"
+              leftIcon="DoubleStar"
+            >
+              우리 집 바꾸러 가기
+            </ActionButton>
+          ) : (
+            <ActionButton variant="solid" color="inverse" size="L">
+              우리 집 바꾸러 가기
+            </ActionButton>
+          )}
+        </div>
+      </section>
+    </main>
+  );
+};
+
+export default LandingPage;

src/routes/paths.ts

@@ -3,6 +3,7 @@
 // 값 유니온 타입(RoutePath)을 자동으로 얻어 타입 안전성을 확보할 수 있습니다.
 export const ROUTES = {
   HOME: '/',
+  LANDING: '/landing',
   LOGIN: '/login',
   SIGNUP: '/signup',
   GENERATE_START: '/generate/start',

src/routes/router.tsx

@@ -3,7 +3,7 @@
 // ------------------------------
 // React Router v6.4(Data Router)의 createBrowserRouter 패턴을 사용하여
 // 1) RootLayout       : 모든 페이지의 공통 레이아웃(헤더·푸터) + <Outlet />
-// 2) 공개 라우트      : Home, Login, Signup, ServicePolicy, PrivacyPolicy
+// 2) 공개 라우트      : Home, Landing, Login, Signup, ServicePolicy, PrivacyPolicy
 // 3) ProtectedRoute   : 인증이 필요한 하위 라우트 묶음
 //    - 인증 실패 시 ROUTES.LOGIN 으로 리다이렉트
 // ------------------------------
@@ -12,6 +12,7 @@ import { createBrowserRouter } from 'react-router-dom';
 
 import HomePage from '@pages/home/HomePage';
 import ImageSetupPage from '@pages/imageSetup/ImageSetupPage';
+import LandingPage from '@pages/landing/LandingPage';
 import KakaoCallbackPage from '@pages/login/KakaoCallbackPage';
 import LoginPage from '@pages/login/LoginPage';
 
@@ -30,6 +31,10 @@ const publicRoutes = [
     index: true,
     element: <HomePage />,
   },
+  {
+    path: ROUTES.LANDING,
+    element: <LandingPage />,
+  },
   {
     path: ROUTES.LOGIN,
     element: <LoginPage />,