fix: 레이아웃 시프트 개선 및 기타 UI 수정

case-d-plandy · Nov 23, 2024 · 4479add · 4479add
1 parent ccf3ead
commit 4479add
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 28 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/src/components/molecules/Header/Header.styles.ts b/src/components/molecules/Header/Header.styles.ts
@@ -27,4 +27,8 @@ export const Adornment = styled.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: { spacing } }) => `${spacing(1)}px`};
+
+  & #language-button {
+    min-width: 77px;
+  }
 `;
diff --git a/src/components/molecules/Header/Header.tsx b/src/components/molecules/Header/Header.tsx
@@ -75,6 +75,7 @@ function Header() {
               </Button>
             </Link>
             <Select
+              id="language-button"
               data-testid="language-button"
               aria-label={language}
               size="small"

diff --git a/src/main.tsx b/src/main.tsx
@@ -16,14 +16,14 @@ GoogleFirebase.initialize();
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <Suspense fallback={<Loading />}>
-      <HelmetProvider>
-        <ThemeProvider>
-          <BrowserRouter>
+    <HelmetProvider>
+      <ThemeProvider>
+        <BrowserRouter>
+          <Suspense fallback={<Loading />}>
             <App />
-          </BrowserRouter>
-        </ThemeProvider>
-      </HelmetProvider>
-    </Suspense>
+          </Suspense>
+        </BrowserRouter>
+      </ThemeProvider>
+    </HelmetProvider>
   </StrictMode>
 );
diff --git a/src/pages/_components/Intro/Intro.styles.ts b/src/pages/_components/Intro/Intro.styles.ts
@@ -4,7 +4,7 @@ export const StyledIntro = styled.section`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: ${({ theme: { spacing } }) => `${spacing(4)}px`};
+  gap: ${({ theme: { spacing } }) => `${spacing(6)}px`};
   font-family: "Paperlogy";
 
   @media (max-width: ${({ theme: { breakpoints } }) => `${breakpoints.sm}px`}) {
@@ -16,6 +16,7 @@ export const StyledIntro = styled.section`
 export const TitleBox = styled.div`
   display: flex;
   flex-direction: column;
+  min-width: 370px;
   gap: ${({ theme: { spacing } }) => `${spacing(1)}px`};
   padding: ${({ theme: { spacing } }) => `${spacing(20)}px 0px`};
 
@@ -33,8 +34,8 @@ export const TitleBox = styled.div`
 export const Title = styled.h1`
   background: linear-gradient(
     90deg,
-    ${({ theme: { palette } }) => palette.secondary} 5%,
-    ${({ theme: { palette } }) => palette.primary} 90%
+    ${({ theme: { palette } }) => palette.primary} 5%,
+    ${({ theme: { palette } }) => palette.secondary} 90%
   );
   background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -89,26 +90,33 @@ export const SubTitle = styled.h2`
 
 export const ImageBox = styled.div`
   text-align: right;
+  width: 100%;
   flex-grow: 1;
   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;
 
+  @media (max-width: ${({ theme: { breakpoints } }) => `${breakpoints.sm}px`}) {
+    text-align: center;
+    padding: 0;
+    border-radius: 0;
+  }
+`;
+
+export const ImageRatioBox = styled.div`
+  position: relative;
+  padding-top: calc(100% / 750 * 568);
+
   & > img {
-    max-width: 750px;
+    position: absolute;
+    top: 0;
+    left: 0;
     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
@@ -10,7 +10,7 @@ import Typography from "@components/atoms/Typography";
 
 import i18n from "@utils/i18n";
 
-import { ImageBox, StyledIntro, SubTitle, Title, TitleBox } from "./Intro.styles";
+import { ImageBox, StyledIntro, SubTitle, Title, TitleBox, ImageRatioBox } from "./Intro.styles";
 
 const PlandyMockupImage = {
   en: PlandyMockupEn,
@@ -29,7 +29,7 @@ function Intro() {
         <Box mt={2}>
           <Button
             variant="text"
-            startIcon={<img src={AppStoreIcon} alt="App Store" width="24px" />}
+            startIcon={<img src={AppStoreIcon} width={24} height={24} alt="App Store" />}
             onClick={() => window.open("https://apps.apple.com/us/app/id6736831438")}
           >
             <Typography ml={1}>Download on</Typography>
@@ -40,13 +40,18 @@ function Intro() {
         </Box>
       </TitleBox>
       <ImageBox>
-        <img
-          src={
-            i18n.language.toString() in PlandyMockupImage
-              ? PlandyMockupImage[i18n.language.toString() as keyof typeof PlandyMockupImage]
-              : PlandyMockupImage.en
-          }
-        />
+        <ImageRatioBox>
+          <img
+            width={750}
+            height={568}
+            src={
+              i18n.language.toString() in PlandyMockupImage
+                ? PlandyMockupImage[i18n.language.toString() as keyof typeof PlandyMockupImage]
+                : PlandyMockupImage.en
+            }
+            alt="Plandy Mockup"
+          />
+        </ImageRatioBox>
       </ImageBox>
     </StyledIntro>
   );