From 339d96cb22439ebcd0a68f85c1a91531c51c2f7a Mon Sep 17 00:00:00 2001
From: J'aimemin <61978339+Kim-Jaemin420@users.noreply.github.com>
Date: Wed, 7 Feb 2024 15:11:20 +0900
Subject: [PATCH] =?UTF-8?q?[#104]=20Fix:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=EC=A0=84,=20=EA=B3=B5=EA=B0=84=20?=
 =?UTF-8?q?=EC=B0=A8=EC=A7=80=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20(#106)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                        |   1 +
 public/assets/favicon.ico         | Bin 0 -> 4286 bytes
 src/pages/EmailLoginPage.tsx      |  16 +++++++++++++---
 src/pages/LoginPage.tsx           |  16 ++++++++++++++--
 src/pages/TteokgukCookingPage.tsx |  11 ++++++++---
 5 files changed, 36 insertions(+), 8 deletions(-)
 create mode 100644 public/assets/favicon.ico

diff --git a/index.html b/index.html
index d67d0749..4dc0f8b8 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,7 @@
       property="og:description"
       content="자신만의 특별한 떡국을 만들고 응원 메시지를 전달하세요"
     />
+    <link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
     <link
       rel="stylesheet"
       as="style"
diff --git a/public/assets/favicon.ico b/public/assets/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..3b9ac2b03d8faa532a4dadee13135b400b8c51ae
GIT binary patch
literal 4286
zcmcgwOHUhD6uwm!EV?jKq;6r^W&c6=0W46}O5HTdB5HSyH;u4kf<p?iJxMVlDhdfQ
zA#H-%Dn$xSqu4NRiOm~Ro-+f*PSSMIF6;#&wnI2Q-<XTW_82=26zlrV+<VUX&g0IU
z&j|4je;OMFzQu685bp^g-sizfqKOCA%|G5d`EFqp7OH=%iSGLFq|y|Q`Mr@?U}P*F
zh>pdS)L2}hqJg!TvIv<-JP?e;ueLz9I)c5#SS)bH#A2L@*<PAnyh(}GAzEDfmX`Hl
zTHE-sXkcw={VvTfhfG=Mj89%;AKBk0inCT<-0LsT_*b7Mp+CPoNUO&8ML4CnhuuRL
z{=!ypX(jDi%R23&6~ddOdbgGjdW<}^ZRANc)c=fI>Jw~T&~tQg^A)+*vr%V)it1uw
z>-of`tzA<7BD$Q~rCa*uk>L;P%XDe$m1(<!XSbG1T75v=-aiWa!1q0WO^Wu<k>P){
zo}|uaY?EzcbR^jaJr_bPTGwATAvb{+dk6cFVIPkSzf((-zr?;r&y$C--C8zyIa$cN
z^sgFzB-&50>A?g4=9lgg)-adW9`|<movGK<x|SW`^N=d_4Y}}Y+hw+fzVp$ir$3?3
zK0j^Fxc=hYS^DVX56v~q!Cp_9o}&NFH7(9BFgV9)<k=cGu5tc)^cQ7zfNza^^q1?@
zKhSX?x4`lDT=$gaVSvxFU5-(A9%*as{eSL}hu7_%zXy!>!~L%h@a%H!3!E?8pWXPG
zJVuUS+ZrqIU0PPX@~p7_6~_(iVPmPx2C#ZKw-|P~a;>?!*>-=_m^R-5T~7;V4Zh$x
z<oBHym>6ApnnsN&Tm84ihdy$Ox+3n2{Ep-E7rZ&EHr-iNDP}ybh$~}5{W0Xd-F(h@
z_RxLk%o-2rUg8mj<{q}-9e_UeHt%^mKdP;vH>ql&KSm}Mbzx<ws^8UY*1C_LG#*z}
z#E!qm+-u|Weg7N&Wa0*eC;VO$eE*C4baGiM@9VY3RI3~?)TwJ}nS1F2auA*BKK63}
zE)ag=x8(ujd=9{KYK`Sh<#5KvV@g8CY@NaJqSMD8KQO@Utk}4Y#FfF>rGaCMUFHh>
zkny8s_?-L1>YXC|IhOr(riZ5Zykf7`cLZedJmEZ*##E^W^8BIxz=Q7S)D7x2QZ%T|
z(a6HE$!FnDe4)?exHG>G5Qfx|ocF=pZ5l9EsDE>V?$6yb^<Wcnuv_W;g(t3<JpWeW
zx8&8;t+Jl&OYMNis;FP#_kb@LiTQ%K4l~CN%|CK>Y-|_xIP}(_mZHAJX&RXs3`OF8
z^PO9oe|Zl+*2WyTv{#~Uf+M=tc5I&==odJ2IiG;8$@!T3N}Njb1#QPExhQ;S<Gw9>
zHaOdtE88Db(#5))d9>{3z?8hBi}@$|?P0pu<M<n0EQcJRPqs5>2fpM>)$~n1$vgr&
z`<NU9b4|8&{*c^R?Sh-54$P5%0vD6ETw4C1XISN}*DgKRB7NTH7-{4TaarYRx#n0#
zByY#>2k?bzdcXnKdXt(}vI%a6`W4Or^A*lXC0Xk_>WADz4>h#@*0IV}yGATrg9JD-
z=f1m|yxfPMte3`U)pPA~-EJl!Xjh1aj1Z2f5GTC+?*a@vS?e0h2p*<vlxH3%QbN>W
gwhpXi>QatOUB-b=){$x0b7W5KIkKnr8nW&G0(OU1fdBvi

literal 0
HcmV?d00001

diff --git a/src/pages/EmailLoginPage.tsx b/src/pages/EmailLoginPage.tsx
index 62176c97..5aa072c7 100644
--- a/src/pages/EmailLoginPage.tsx
+++ b/src/pages/EmailLoginPage.tsx
@@ -72,7 +72,7 @@ const EmailLoginPage = () => {
           </Link>
         </div>
         <div className={styles.imageContainer}>
-          <img src={driveDragon} alt="운전하는 용용이" />
+          <img className={styles.image} src={driveDragon} alt="운전하는 용용이" />
         </div>
       </div>
     </Fragment>
@@ -88,12 +88,12 @@ const styles = {
     justifyContent: "space-between",
     height: "calc(100vh - 4.8rem)",
     padding: "0 4rem",
+    position: "relative",
   }),
   content: css({
     display: "flex",
     flexDirection: "column",
-    marginTop: "auto",
-    marginBottom: "auto",
+    marginY: "auto",
   }),
   emailInput: css({
     marginBottom: "1.6rem",
@@ -110,6 +110,16 @@ const styles = {
     textAlign: "center",
   }),
   imageContainer: css({
+    position: "relative",
     marginX: "-4rem",
+    marginTop: "25rem",
+  }),
+  image: css({
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: "100%",
+    height: "auto",
   }),
 };
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
index 327126ea..fdb39bff 100644
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -76,8 +76,8 @@ const LoginPage = () => {
         <Link to="/">로그인</Link>
       </Header>
       <div className={styles.container}>
-        <div>
-          <img src={deliveryDragon} alt="배달하는 용용이" />
+        <div className={styles.imageContainer}>
+          <img className={styles.image} src={deliveryDragon} alt="배달하는 용용이" />
         </div>
         <div className={styles.buttonContainer}>
           <Link to="/login/email">
@@ -112,6 +112,18 @@ const styles = {
     height: "calc(100vh - 4.8rem)",
     padding: "0 4rem",
   }),
+  imageContainer: css({
+    width: "100%",
+    paddingTop: "101.01%",
+    position: "relative",
+  }),
+  image: css({
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "auto",
+  }),
   buttonContainer: css({
     width: "100%",
   }),
diff --git a/src/pages/TteokgukCookingPage.tsx b/src/pages/TteokgukCookingPage.tsx
index faa33133..6060beae 100644
--- a/src/pages/TteokgukCookingPage.tsx
+++ b/src/pages/TteokgukCookingPage.tsx
@@ -87,7 +87,7 @@ const TteokgukCookingPage = () => {
       <Header showBackButton actionIcon="guide">
         떡국 만들기
       </Header>
-      <div>
+      <div className={styles.imageContainer}>
         <img src={shoppingDragon} alt="쇼핑하는 용용이" />
       </div>
       <div className={styles.container}>
@@ -159,9 +159,14 @@ const styles = {
     paddingX: "2.4rem",
     paddingBottom: "2rem",
   }),
+  imageContainer: css({
+    minHeight: "11.6rem",
+    maxHeight: "11.6rem",
+    objectFit: "contain",
+  }),
   image: css({
-    height: "8.4rem",
-    border: "0.1rem solid",
+    height: "100%",
+    width: "auto",
   }),
   titleContainer: css({
     display: "flex",