feat: 메인 화면 수정

case-d-plandy · Nov 20, 2024 · c853739 · c853739
1 parent cb8b19d
commit c853739
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 13 deletions.
diff --git a/public/images/icon_app_store.png b/public/images/icon_app_store.png
diff --git a/public/images/plandy_mockup_en.png b/public/images/plandy_mockup_en.png
diff --git a/public/images/plandy_mockup_ko.png b/public/images/plandy_mockup_ko.png
diff --git a/src/pages/_components/Intro/Intro.styles.ts b/src/pages/_components/Intro/Intro.styles.ts
@@ -9,6 +9,7 @@ export const StyledIntro = styled.section`
 
   @media (max-width: ${({ theme: { breakpoints } }) => `${breakpoints.sm}px`}) {
     flex-direction: column;
+    margin: 0 -24px;
   }
 `;
 
@@ -24,6 +25,8 @@ export const TitleBox = styled.div`
 
   @media (max-width: ${({ theme: { breakpoints } }) => `${breakpoints.sm}px`}) {
     padding: 0;
+    align-items: center;
+    text-align: center;
   }
 `;
 
@@ -43,7 +46,8 @@ export const Title = styled.h1`
   }) => ({
     fontSize: display.large.size,
     fontWeight: 700,
-    letterSpacing: display.large.letterSpacing
+    letterSpacing: display.large.letterSpacing,
+    lineHeight: "70px"
   })};
 
   @media (max-width: ${({ theme: { breakpoints } }) => `${breakpoints.sm}px`}) {
@@ -65,9 +69,9 @@ export const SubTitle = styled.h2`
       typography: { headline }
     }
   }) => ({
-    fontSize: headline.large.size,
+    fontSize: headline.small.size,
     fontWeight: 500,
-    letterSpacing: headline.large.letterSpacing
+    letterSpacing: headline.small.letterSpacing
   })};
 
   @media (max-width: ${({ theme: { breakpoints } }) => `${breakpoints.sm}px`}) {
@@ -84,9 +88,27 @@ export const SubTitle = styled.h2`
 `;
 
 export const ImageBox = styled.div`
-  text-align: center;
+  text-align: right;
   flex-grow: 1;
-  padding: ${({ theme: { spacing } }) => `${spacing(20)}px ${spacing(10)}px`};
-  border: 1px solid ${({ theme: { palette } }) => palette.box.border};
-  border-radius: ${({ theme: { spacing } }) => `${spacing(1)}px`};
+  padding: ${({ theme: { spacing } }) => `${spacing(10)}px 0 ${spacing(10)}px ${spacing(8)}px`};
+  background-color: ${({ theme: { palette } }) => palette.grey["100"]};
+  border-radius: ${({ theme: { spacing } }) => `${spacing(4)}px`};
+  overflow: hidden;
+
+  & > img {
+    max-width: 750px;
+    width: 100%;
+    max-height: 574px;
+    height: auto;
+
+    @media (max-width: ${({ theme: { breakpoints } }) => `${breakpoints.sm}px`}) {
+      width: 120%;
+    }
+  }
+
+  @media (max-width: ${({ theme: { breakpoints } }) => `${breakpoints.sm}px`}) {
+    text-align: center;
+    padding: 0;
+    border-radius: 0;
+  }
 `;
diff --git a/src/pages/_components/Intro/Intro.tsx b/src/pages/_components/Intro/Intro.tsx
@@ -2,9 +2,10 @@ import { useTranslation } from "react-i18next";
 
 import Box from "@components/atoms/Box";
 import Button from "@components/atoms/Button";
-import Icon from "@components/atoms/Icon";
 import Typography from "@components/atoms/Typography";
 
+import i18n from "@utils/i18n";
+
 import { ImageBox, StyledIntro, SubTitle, Title, TitleBox } from "./Intro.styles";
 
 function Intro() {
@@ -18,18 +19,19 @@ function Intro() {
         <Box mt={2}>
           <Button
             variant="text"
-            startIcon={<Icon name="ImportBold" />}
+            startIcon={<img src="/images/icon_app_store.png" alt="App Store" width="24px" />}
             onClick={() => window.open("https://apps.apple.com/us/app/id6736831438")}
           >
-            <Typography>Download On the</Typography>
-            <Typography variant="title" fontWeight={700}>
-              App store
+            <Typography variant="title" fontWeight={500}>
+              App Store
             </Typography>
           </Button>
         </Box>
       </TitleBox>
       <ImageBox>
-        <Icon name="ImageBold" />
+        <img
+          src={`/images/plandy_mockup_${["en", "ko"].includes(i18n.language) ? i18n.language : "en"}.png`}
+        />
       </ImageBox>
     </StyledIntro>
   );