From 4479add8960b8361cdd363c0b0007a13bde68ac2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=A2=85=ED=98=81?= <kimjhs@kakao.com>
Date: Sat, 23 Nov 2024 23:46:16 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?=
 =?UTF-8?q?=EC=8B=9C=ED=94=84=ED=8A=B8=20=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20?=
 =?UTF-8?q?=EA=B8=B0=ED=83=80=20UI=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bun.lockb                                     | Bin 265273 -> 265273 bytes
 .../molecules/Header/Header.styles.ts         |   4 +++
 src/components/molecules/Header/Header.tsx    |   1 +
 src/main.tsx                                  |  16 +++++-----
 src/pages/_components/Intro/Intro.styles.ts   |  30 +++++++++++-------
 src/pages/_components/Intro/Intro.tsx         |  23 ++++++++------
 6 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/bun.lockb b/bun.lockb
index a320ab6f65adc9f5473e785b88bb15bcae31129a..b4336d1715d1d0e1fe55865bede4ee0caf678a6b 100755
GIT binary patch
delta 4614
zcmXBRSrn!O9ft8Uqf%MXwD`3dX$v~lkd@JnWreM@8D<vkw4=6QS<#NuM%E-Vm64gz
zPEHFpEnl0`PCMRl$yISWUC>VXz0U>jkN<PH<JggX$Byi~+&SgStLwjBf6@h)Ty^59
z=U@8gGj2F`;Nrhnr|&)CoO7?a@W9_rKKp2J+OlWQp>#R#rtP)%-*@kscF;Qi*p*y6
zYTbYCN}-*!-oJLG)XrM}-@8(27j5vLU8%LJHvI3dG+JZby+_(sYyNLnV(oUfS8Vp|
zHqmywJ#6g}DfD3PRm@-j=Qzb2MsSZ;EMNlf1jQ0&@D0TZ76@*pSi=h8%@rFkZlNoJ
z7R(bBW7xvxmWl~<VBJbFg&yo%D`qf&V=Cq_f_odq0w(bGDV8vUe_O>076@*qSi=h8
z?G+m^?w~7z7R-|rW7xt*fA4St9awkNmnrmM-$^lp0h~K4<}iYL7sUc5@b0Qu!VLb&
ziWMvn+)c5D6+%m~0psqvB51)pMKOjgY)(~7pabh3iYfG9-%~Mz0i1g&<}iYLZ^Z&8
z@NC5rX7Eo_tYCrQbj2E02=^;CVBAMn1TC2NRg7T^oBJsy(1CS8F@+v%M=^r|ock;0
zFoJuAVgVC)4^S*&2LFMI6)X@uNU??$!ZQ^cFdnQcf)-3yF@`N{9-^2)2i8LsQ|Q5d
zm|_M4I1g9MVFdRPiUmyIJyNlR8T>~nR<J<eDb}z;c$Q)V#-nvb(1Q6G#Td4*Ia@J-
z4y?y2rqF}^IK>PGa2~Ii!w9agSil6{If^CB;6FjJf(3#nD%P+<_$0*!j3?`gpat_O
ziZN_q^HjwII<Nx86ne0qrkKG1&eIih7{PspVgVC)&r~d72LD-#6)X^(t60Md;j<MR
zFhX4sv|yg67{eAe&rwXE1M7Un6ne0qtC+z6&IO7&jNm>`v49D@=PQ;lgC8kYut4wv
z#Tr%!U#QrC@giLjv|zqiF@`N{UZR*l2i8j!Q|Q5dnPLV5II&_5Be*YDEMNlf6^bRy
z;J;F_f(3$CDb}z;_-e%ljMwOjpat`_iZN_qlPD(8fpwu`3O(2tDP}N$bFpF$Be<_q
zEMNlf^@=6T;J-n!f(3#%D%P+<m?}14T%s$27R)y(#;}FWn-vr2z`9g1g&yp;C}uE#
z^H#+iMsVMzSil5crdYxZ{@WERSRi<ZVht;V?^JBSc$cmSS}@<O7{eAe?@>&k1M9tt
zDfD3HiWv;xT&9@A2<}0}0w(a@r&z)a{`(axSRnX-Vht;VA5?6>_>is$S}+U67`Cwa
zuwnuoSeGlN(1ZOE#S8{;KB}0*2<{=p0w(Z2rdYxZ{uPQ9ED)56HLMUGR&2mHqAP+H
z%#SO^u!YSh6cgyc`lMnCJ=j+&W-x&BDa9N{a4W?ECh$J3Si%hcRf-iX5PU|lh84oA
z6&o-<t1E&Q%xe^5*uv&>iV1XJ)ru+fV1HgQg8`f`DCRJN`$fe9Ch)$bSi%hcmlZ2m
zAoz-64J(9SRcyd$bVbmD`8CBDwy?QYF@X-Oqlzi?V1HdPg8`gxDCRJN`%T3HCh)$c
zSi%f`t60GT!F7r?tPp-%u>s?lt_WH%zoQt#7B=5iOrQhndx|OaV1HjRg8`haVh$s?
zKTs@S0`G^4CCuReNU?$if*&i^utN9~#RiP)bw$vEd4pmMTiA4p33OonR567f?4K!S
zFo5%O#T-U(f1y~w1l}(dOPIm`m0|@81ix0SVTG_)Y{2-9t_WH%f2$b77B;_AOrQhn
z_lha>VE;ieg8`gBD&{bP`zOT$Ch!Ku66TvYbkY8^4qdzd_{$F7xaX#4?{x=nJnrb3
F{|9no@<9Lq

delta 4610
zcmXBRXB4gk9mnym7Hzt%r%ksZj*OPkQW_R*+Snvpv?<MKicP#W$huwbt&B2_Z1~u1
zV7GxyT1K|;Md$F6(<|P14wV*lpWpWdzYqWK;T=a0?>%~W@5Ro(<op|xi%z}t?9*>L
z_sWyPGp@PzA6MOQ#VPwPIe1<gT=(}AZa5O0xa_&vfpj_R*!EicpS$-=J7}GM?Mkj4
zweG)nrO-}V@5WszwX@d0X;&)kq7DADE46mjhX37_t=3p~?~%6An*ZCCSljOQ;AYQm
z6K%KKL)IRVLJ#(FiWv;x9Iu$e2=2`l3z)#Wg<=Ua_=aKy3k0`RtYL-lR*G9NZmlbV
z2F%+i#?Zp%wu%XKVBJnJg&yqND`qf&V=Cq_f_n$W0w(bGDwZ&Ve@Dd%76|U7Si=h8
zofWrW+(lOe4VZUTjG={%{@$SkI<W4hFH`8jzPn-u1333k%wYugo{9xb;N45Hgc<yM
zD^{>Ta394QRtPP{Eg1LJ6+r{$KE)VX*xXMsfex(uE2hwc{Q$)b25=szn8OI}35o?w
z;Ms~L%;2A>Siu6pNs2YB5T2~K1>+Q55j0>vNHK;MHm52k(1G<}#T0t59mNa=a2}$V
z!wBv}6$_ZadzfMgGx!fztYCrQ5sEde5T2&E1>=#rB51&L6=P^&^C-mxI<OwCm_iTs
zV-zzOz<I1<4kNgaQ!HQt?{viyX7JBYtYCq_Q><Zy@bQXUFrJ_*f(FbdD#p;l=1GbP
zbYPvSm_iTslNB=<z<G*d4kNg}VgVC)PgN{o2LEY_6)X@uU9pB0!e=OM!FZ;w2pTY-
zr5HmCn`bK~(18^wrqF}^9K{R<aGtA}!wBy46bqQZd%j``Gx#r1tYCrQg^D$-5WYxp
z3r46bf(Fd96k}*%^J2vWI<Q`%m_iTsOBFL1z<HTs4kNfPS1e!x?-hzA%-~0g6)X_E
zQn7{=!m|~(V7y9K1Pz$4R*a#A&1)1B=)iidVhTOjuT#um04G+=VFdT}iUmyIy+N^r
z8T>aYR<J<uCdC?72;Z!@1>-HcB51&Tt6~f-Y!bx;I<VfRm_iTs+Z8hyz&S@ThY{R!
z6$_Zadxv5PGx+BzR<J<uPQ@Bl2vfx^81K>*K?CNy6=P^&^B%<nI<VfWm_iTs`xG-6
zz<Ix74kNhdD;6+;mnoJogMWcy1q%cpP^@8v@Pmq5Fg~O!f(FbFE5^{m<|B#;bYOi{
zF@+xNTrq<IoC_6m7{T4ISil6{MT#ZN;D1c9f(3$)E7q_=_zA@=7@yP?K?7!?7()x2
zPbntQfpxKB3O(4LR?J`k=QD~qjNl$nEMNlfvx+6m;2%`1V1b}itYL-lkm44M!@449
z!2FzI3@vOvub4mw))y30=)t~3F@ph|FDm9Rf?FvTFoE|a#S&)lzpPln0>Pz<HLMVR
zMR5zpWx670z`R^Bh88woRZO4*t5!^*2m5P^84TcDp_s!6?$;Fyn85pnVhJ<&-&Cw%
zf#6$;HLMU`skjAWt1E&A%&Qb*Xkqhh#RNLAjwq(kgZ&-F3<hw%tC+(G?)MZ6n85qK
zVhJ<&jba501XnB8utN9)#Vr^|bw$vC`9sARTG;$ZF@X-OA1kKNgZ&f53<hvo#T-U(
zuTd;u0`I4aCCuReOtFFmf}bnautN9?#Vr`W)D=Mk=C2fEXkpVSCeVTPYsD0Luz#bN
z!2r&06>}KD{heX~6L`N@EMW%!TEz+$2>zg0!wO-qxCP^nx*}-6yiPHO7B+uUOrQhn
z&x$GZVE;uig8`hsD&{bP`!~e`Ch!Ku66RwZIOpUuFWi6qo@38(SMR_6_#>zNACS!P
A+W-In

diff --git a/src/components/molecules/Header/Header.styles.ts b/src/components/molecules/Header/Header.styles.ts
index 297d640..8ce058e 100644
--- 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
index 8a00b55..96be095 100644
--- 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
index 3d8666a..bb16ef9 100644
--- 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
index 7c2b469..d4a0b0d 100644
--- 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
index 8d8b9f2..158ef07 100644
--- 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>
   );