[FE] v2.1.1에 맞춘 랜딩페이지 변경

client/src/components/Design/components/Icon/Icon.style.ts

@@ -21,6 +21,7 @@ const ICON_DEFAULT_COLOR: Record<IconType, IconColor> = {
   editPencil: 'gray',
   heundeut: 'gray',
   photoButton: 'white',
+  chevronDown: 'tertiary',
 };
 
 export const iconStyle = ({iconType, theme, iconColor}: IconStylePropsWithTheme) => {

client/src/components/Design/components/Icon/Icon.tsx

@@ -17,6 +17,7 @@ import EditPencil from '@assets/image/editPencil.svg';
 import PhotoButton from '@assets/image/photoButton.svg';
 import {IconProps} from '@HDcomponents/Icon/Icon.type';
 import {useTheme} from '@theme/HDesignProvider';
+import ChevronDownLarge from '@assets/image/chevronDownLarge.svg';
 
 import {iconStyle} from './Icon.style';
 
@@ -37,6 +38,7 @@ const ICON = {
   editPencil: <EditPencil />,
   heundeut: <img src={`${process.env.IMAGE_URL}/heundeut.svg`} />,
   photoButton: <PhotoButton />,
+  chevronDown: <ChevronDownLarge />,
 };
 
 export const Icon: React.FC<IconProps> = ({iconColor, iconType, ...htmlProps}: IconProps) => {

client/src/components/Design/components/Icon/Icon.type.ts

@@ -17,6 +17,7 @@ export type IconType =
   | 'meatballs'
   | 'editPencil'
   | 'heundeut'
+  | 'chevronDown'
   | 'photoButton';
 
 export type IconColor = ColorKeys;

client/src/components/Design/components/Text/Text.style.ts

@@ -5,18 +5,33 @@ import {css} from '@emotion/react';
 // TODO: (@todari) themeProvider 이용하도록 변경
 import TYPOGRAPHY from '@token/typography';
 
-export const getSizeStyling = ({size, textColor, theme}: Required<TextStylePropsWithTheme>) => {
+export const getSizeStyling = ({size, textColor, theme, responsive}: Required<TextStylePropsWithTheme>) => {
+  const getResponsiveStyle = (baseStyle: any) => {
+    if (responsive) {
+      return css`
+        ${baseStyle}
+        @media (min-width: 1024px) {
+          font-size: calc(${baseStyle.fontSize} * 1.2);
+        }
+        @media (min-width: 1600px) {
+          font-size: calc(${baseStyle.fontSize} * 1.5);
+        }
+      `;
+    }
+    return css(baseStyle);
+  };
+
   const style = {
-    head: css(TYPOGRAPHY.head),
-    title: css(TYPOGRAPHY.title),
-    subTitle: css(TYPOGRAPHY.subTitle),
-    bodyBold: css(TYPOGRAPHY.bodyBold),
-    body: css(TYPOGRAPHY.body),
-    smallBodyBold: css(TYPOGRAPHY.smallBodyBold),
-    smallBody: css(TYPOGRAPHY.smallBody),
-    captionBold: css(TYPOGRAPHY.captionBold),
-    caption: css(TYPOGRAPHY.caption),
-    tiny: css(TYPOGRAPHY.tiny),
+    head: getResponsiveStyle(TYPOGRAPHY.head),
+    title: getResponsiveStyle(TYPOGRAPHY.title),
+    subTitle: getResponsiveStyle(TYPOGRAPHY.subTitle),
+    bodyBold: getResponsiveStyle(TYPOGRAPHY.bodyBold),
+    body: getResponsiveStyle(TYPOGRAPHY.body),
+    smallBodyBold: getResponsiveStyle(TYPOGRAPHY.smallBodyBold),
+    smallBody: getResponsiveStyle(TYPOGRAPHY.smallBody),
+    captionBold: getResponsiveStyle(TYPOGRAPHY.captionBold),
+    caption: getResponsiveStyle(TYPOGRAPHY.caption),
+    tiny: getResponsiveStyle(TYPOGRAPHY.tiny),
   };
 
   const colorStyle = css({color: theme.colors[textColor]});

client/src/components/Design/components/Text/Text.tsx

@@ -7,10 +7,16 @@ import {useTheme} from '@theme/HDesignProvider';
 
 import {getSizeStyling} from './Text.style';
 
-const Text: React.FC<TextProps> = ({size = 'body', textColor = 'black', children, ...attributes}: TextProps) => {
+const Text: React.FC<TextProps> = ({
+  size = 'body',
+  textColor = 'black',
+  children,
+  responsive = false,
+  ...attributes
+}: TextProps) => {
   const {theme} = useTheme();
   return (
-    <p css={getSizeStyling({size, textColor, theme})} {...attributes}>
+    <p css={getSizeStyling({size, textColor, theme, responsive})} {...attributes}>
       {children === '' ? '\u00A0' : children}
     </p>
   );

client/src/components/Design/components/Text/Text.type.ts

@@ -16,6 +16,7 @@ export type TextSize =
 export interface TextStyleProps {
   size?: TextSize;
   textColor?: ColorKeys;
+  responsive?: boolean;
 }
 
 export interface TextStylePropsWithTheme extends TextStyleProps {

client/src/pages/MainPage/MainPage.tsx

@@ -1,26 +1,49 @@
-import useAmplitude from '@hooks/useAmplitude';
+import {css} from '@emotion/react';
 
-import {MainLayout} from '@HDesign/index';
+import useAmplitude from '@hooks/useAmplitude';
 
 import Nav from './Nav/Nav';
 import MainSection from './Section/MainSection';
 import DescriptionSection from './Section/DescriptionSection';
-import AddBillSection from './Section/AddBillSection';
-import AddMemberSection from './Section/AddMemberSection';
-import ReportSection from './Section/ReportSection';
+import FeatureSection from './Section/FeatureSection';
+import CreatorSection from './Section/CreatorSection';
 
 const MainPage = () => {
   const {trackStartCreateEvent} = useAmplitude();
 
   return (
-    <MainLayout>
-      <Nav trackStartCreateEvent={trackStartCreateEvent} />
+    <div
+      css={css({
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+      })}
+    >
+      <div
+        css={css({
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          zIndex: 10,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          padding: '1rem 0',
+          width: '100%',
+          backgroundColor: 'white',
+        })}
+      >
+        <div css={css({maxWidth: '1200px', width: '100%'})}>
+          <Nav trackStartCreateEvent={trackStartCreateEvent} />
+        </div>
+      </div>
       <MainSection trackStartCreateEvent={trackStartCreateEvent} />
       <DescriptionSection />
-      <AddBillSection />
-      <AddMemberSection />
-      <ReportSection />
-    </MainLayout>
+      <FeatureSection />
+    </div>
   );
 };
 

client/src/pages/MainPage/Nav/Nav.tsx

@@ -17,7 +17,7 @@ const Nav = ({trackStartCreateEvent}: NavProps) => {
   };
 
   return (
-    <header style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', height: '37px'}}>
+    <header style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', height: '2.5rem'}}>
       <TopNav>
         <TopNav.Item routePath="/">
           <IconButton variants="none">

client/src/pages/MainPage/Section/CreatorSection.tsx

@@ -0,0 +1,72 @@
+import {css} from '@emotion/react';
+
+import Text from '@components/Design/components/Text/Text';
+
+const CreatorSection = () => {
+  return (
+    <div
+      css={css({
+        display: 'flex',
+        height: '100vh',
+        width: '100vw',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#000000 ',
+      })}
+    >
+      <div
+        css={css({
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          width: '100%',
+          padding: '0 4rem',
+          gap: '2rem',
+          maxWidth: '1200px',
+          '@media (max-width: 1024px)': {
+            flexDirection: 'column-reverse',
+          },
+          '@media (min-width: 1200px)': {
+            padding: '0',
+          },
+        })}
+      >
+        <div
+          css={css({
+            display: 'flex',
+            width: 'max-content',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '1rem',
+          })}
+        >
+          <img
+            src={`${process.env.IMAGE_URL}/feature1.svg`}
+            css={css({
+              minWidth: '15rem',
+              maxWidth: '25rem',
+              width: '100%',
+              '@media (min-width: 1024px)': {
+                minWidth: '20rem',
+                maxWidth: '25rem',
+                width: '100%',
+              },
+              '@media (min-width: 1600px)': {
+                minWidth: '25rem',
+                maxWidth: '30rem',
+                width: '100%',
+              },
+            })}
+          />
+          <Text size="subTitle" responsive={true}>
+            누구와도 간편하게 정산하세요
+          </Text>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreatorSection;

client/src/pages/MainPage/Section/DescriptionSection.tsx

@@ -13,20 +13,38 @@ const DescriptionSection = () => {
         flexDirection: 'column',
         justifyContent: 'center',
         alignItems: 'center',
-        width: '100%',
+        height: '100vh',
+        width: '100vw',
         gap: '1.5rem',
         padding: '3rem 1.5rem',
-        backgroundColor: theme.colors.lightGrayContainer,
+        backgroundColor: 'white',
       })}
     >
-      <Text style={{textAlign: 'center'}} size="subTitle">{`행동대장들을 위해
+      <img
+        css={css({
+          width: '10rem',
+          '@media (min-width: 768px)': {
+            minWidth: '10rem',
+            maxWidth: '15rem',
+            width: '100%',
+          },
+          '@media (min-width: 1600px)': {
+            minWidth: '15rem',
+            maxWidth: '20rem',
+            width: '100%',
+          },
+        })}
+        src={`${process.env.IMAGE_URL}/standingDog.svg`}
+      />
+
+      <Text style={{textAlign: 'center'}} size="subTitle" responsive={true}>{`행동대장들을 위해
         행동대장을 준비했어요
           `}</Text>
-      <Text style={{textAlign: 'center'}} size="subTitle" textColor="gray">{`주환이가 먼저 집에 가도
+      <Text style={{textAlign: 'center'}} size="subTitle" responsive={true} textColor="gray">{`주환이가 먼저 집에 가도
         소연이가 늦게 도착해도
         건상이가 술을 마시지 않아도
           `}</Text>
-      <Text style={{textAlign: 'center'}} size="subTitle">{`간편하게 정산할 수 있어요`}</Text>
+      <Text style={{textAlign: 'center'}} size="subTitle" responsive={true}>{`간편하게 정산할 수 있어요`}</Text>
     </div>
   );
 };