[#104] Fix: 이미지 로드 전, 공간 차지하도록 수정 (#106)

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"

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",
   }),
 };

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%",
   }),

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",