[Feature/Bar-247] 랜딩 페이지 CSS 수정 (#77)

* feat: 푸터에서의 버튼 제거 * feat: 랜딩 페이지 버튼 추가
YAPP-Github · Feb 21, 2024 · 5e1f243 · 5e1f243
1 parent b8655c5
commit 5e1f243
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 40 deletions.
diff --git a/src/components/Layout/components/Footer.tsx b/src/components/Layout/components/Footer.tsx
@@ -1,19 +1,11 @@
 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
 
-import Button from '@components/Button';
 import Icon from '@components/Icon';
 import { ROUTES } from '@constants/routes';
-import { useModalStore } from '@stores/modal';
 
 import * as styles from '../style.css';
 
 const Footer = () => {
-  const pathname = usePathname();
-  const { openModal } = useModalStore();
-
-  const handleLoginButtonClick = () => openModal('login');
-
   return (
     <footer className={styles.footerWrapper}>
       <div>
@@ -39,14 +31,6 @@ const Footer = () => {
           <span className={styles.instagramText}>인스타그램</span>
         </Link>
       </div>
-      {pathname === '/' && (
-        <Button
-          className={styles.footerStartButton}
-          onClick={handleLoginButtonClick}
-        >
-          바로 시작하기
-        </Button>
-      )}
       <div>
         <div className={styles.baroIcon}>
           <Icon icon="logo32" width={32} height={36} />

diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -36,7 +36,6 @@ const Layout = ({
         className={styles.mainWrapper}
         style={assignInlineVars({
           [styles.backgroundColorMain]: backgroundColor,
-          [styles.footerPaddingBottom]: isFooter ? '144px' : '0px',
         })}
       >
         {children}

diff --git a/src/components/Layout/style.css.ts b/src/components/Layout/style.css.ts
@@ -90,10 +90,6 @@ export const buttonText = style([
 ]);
 
 export const footerWrapper = style({
-  position: 'fixed',
-  bottom: 0,
-  left: 0,
-  right: 0,
   padding: '40px 200px',
   backgroundColor: COLORS['Grey/700'],
   display: 'flex',
@@ -178,12 +174,10 @@ export const loginButton = style([
 ]);
 
 export const backgroundColorMain = createVar();
-export const footerPaddingBottom = createVar();
 
 export const mainWrapper = style({
   backgroundColor: backgroundColorMain,
   paddingTop: '64px',
-  paddingBottom: footerPaddingBottom,
 });
 
 export const tab = style({
@@ -206,15 +200,3 @@ export const tabWrapper = style({
   maxWidth: '1200px',
   margin: '0 auto',
 });
-
-export const footerStartButton = style({
-  color: COLORS['Grey/White'],
-  textAlign: 'center',
-  fontSize: '18px',
-  fontWeight: 700,
-  letterSpacing: '-0.3px',
-  padding: '20px 48px',
-  height: '62px',
-  borderRadius: '100px',
-  background: `var(--Blue-Gradient, ${COLORS['Blue/Gradient']})`,
-});
diff --git 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
@@ -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',
 });