From 65028db3ac7c28b894a514e571abc6c67dad868b Mon Sep 17 00:00:00 2001
From: dongkyun-dev <thd6576@naver.com>
Date: Wed, 21 Feb 2024 20:16:56 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=9E=9C=EB=94=A9=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/domain/landing/index.tsx    |  9 +++++
 src/domain/landing/style.css.ts | 61 ++++++++++++++++++++++++++++++---
 2 files changed, 65 insertions(+), 5 deletions(-)

diff --git a/src/domain/landing/index.tsx b/src/domain/landing/index.tsx
index 83ffc07..a8e6b7a 100644
--- a/src/domain/landing/index.tsx
+++ b/src/domain/landing/index.tsx
@@ -5,15 +5,21 @@ import FifthLanding from '@assets/images/fifthLanding.png';
 import FourthLanding from '@assets/images/fourthLanding.png';
 import SecondLanding from '@assets/images/secondLanding.png';
 import ThirdLanding from '@assets/images/thirdLanding.png';
+import Button from '@components/Button';
 import Icon from '@components/Icon';
 import Layout from '@components/Layout';
 import { landingFirstRow, landingSecondRow } from '@domain/landing/constants';
+import { useModalStore } from '@stores/modal';
 import { gmarket } from '@styles/font';
 
 import LandingCard from './components/LandingCard';
 import * as styles from './style.css';
 
 const Landing = () => {
+  const { openModal } = useModalStore();
+
+  const handleLoginButtonClick = () => openModal('login');
+
   return (
     <Layout isFooter>
       <div className={styles.firstImageWrapper}>
@@ -72,6 +78,9 @@ const Landing = () => {
       <Image src={ThirdLanding} alt="" className={styles.ladingImage} />
       <Image src={FourthLanding} alt="" className={styles.ladingImage} />
       <Image src={FifthLanding} alt="" className={styles.ladingImage} />
+      <Button className={styles.startButton} onClick={handleLoginButtonClick}>
+        <div className={styles.buttonText}>바로 시작하기</div>
+      </Button>
     </Layout>
   );
 };
diff --git a/src/domain/landing/style.css.ts b/src/domain/landing/style.css.ts
index f90d0f4..3ef8158 100644
--- a/src/domain/landing/style.css.ts
+++ b/src/domain/landing/style.css.ts
@@ -1,5 +1,6 @@
 import { keyframes, style } from '@vanilla-extract/css';
 
+import * as medias from '@styles/medias.css';
 import { sprinkles } from '@styles/sprinkles.css';
 import { COLORS } from '@styles/tokens';
 
@@ -59,11 +60,15 @@ export const firstImageWrapper = style({
   backgroundColor: COLORS['Blue/Light'],
 });
 
-export const titleWrapper = style({
-  padding: '72px 152px 0',
-  display: 'flex',
-  justifyContent: 'space-between',
-});
+export const titleWrapper = style([
+  medias.large({ padding: '72px 60px 0' }),
+  medias.extraLarge({ padding: '72px 152px 0' }),
+  {
+    padding: '72px 60px 0',
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+]);
 
 export const leftTitle = style({
   color: COLORS['Grey/700'],
@@ -122,4 +127,50 @@ export const cardBody = style({
   fontWeight: 400,
   lineHeight: '20.736px',
   letterSpacing: '-0.173px',
+  height: '146px',
+});
+
+const rotateGradient = keyframes({
+  to: {
+    transform: 'rotate(360deg)',
+  },
+});
+
+export const startButton = style({
+  color: COLORS['Grey/White'],
+  textAlign: 'center',
+  fontSize: '18px',
+  fontWeight: 700,
+  letterSpacing: '-0.3px',
+  height: '62px',
+  borderRadius: '100px',
+  position: 'fixed',
+  bottom: '40px',
+  width: '192px',
+  zIndex: 100,
+  left: '50%',
+  transform: 'translate(-50%, 0)',
+  overflow: 'hidden',
+
+  '::after': {
+    content: '',
+    display: 'block',
+    zIndex: '-1',
+    position: 'absolute',
+    top: '-65px',
+    right: 0,
+    bottom: '-65px',
+    left: 0,
+    backgroundImage: 'linear-gradient(#ffffff 0%, #297FFF 100%)',
+    animation: `${rotateGradient} linear 1s infinite`,
+  },
+});
+
+export const buttonText = style({
+  backgroundColor: COLORS['Blue/Default'],
+  margin: '0 auto',
+  borderRadius: '100px',
+  width: '188px',
+  height: '58px',
+  paddingTop: '17px',
 });