feat: mobile main image 영역 개발

Author: earthyoung

apps/pyconkr/src/components/layout/Footer/index.tsx

@@ -1,14 +1,14 @@
 import styled from "@emotion/styled";
 import * as Common from "@frontend/common";
 import { Article, Email, Facebook, GitHub, Instagram, LinkedIn, OpenInNew, X, YouTube } from "@mui/icons-material";
-import { Button, Stack, useMediaQuery, useTheme } from "@mui/material";
+import { Button, useMediaQuery, useTheme } from "@mui/material";
 import * as React from "react";
 
 import FlickrIcon from "@apps/pyconkr/assets/thirdparty/flickr.svg?react";
 
-import { MobileCover } from "../../../../../../packages/common/src/components/mdx_components/mobile_cover";
 // import MobileFooter from "./Mobile/MobileFooter";
 import { useAppContext } from "../../../contexts/app_context";
+import MobileFooter from "./Mobile/MobileFooter";
 
 interface IconItem {
   icon: React.FC<{ width?: number; height?: number }>;
@@ -89,13 +89,7 @@ export default function Footer() {
   ];
 
   if (isMobile) {
-    // return <MobileFooter />;
-    return (
-      <Stack>
-        <MobileCover />
-        <Stack sx={{ height: "300px" }} />
-      </Stack>
-    );
+    return <MobileFooter />;
   } else {
     return (
       <FooterContainer>

packages/common/src/components/mdx_components/mobile_cover.tsx

@@ -5,32 +5,33 @@ import { useAppContext } from "../../../../../apps/pyconkr/src/contexts/app_cont
 import PyCon2025MobileLogoImage from "../../assets/pyconkr2025_main_cover_image.png";
 import PyCon2025MobileLogoTitle from "../../assets/pyconkr2025_main_cover_title.png";
 
-const MobileImage: React.FC = () => {
+export const MobileCover: React.FC = () => {
   const { language } = useAppContext();
   const buttonTitle = language === "ko" ? "티켓 구매하기" : "Buy Ticket";
 
   return (
-    <Stack sx={{ flexDirection: "column", position: "relative" }}>
-      <Stack sx={{ zIndex: 1, position: "absolute", top: 0, left: 0 }}>
-        <img src={PyCon2025MobileLogoImage} alt="Pycon 2025 Mobile Image" style={{ objectFit: "contain" }} />
+    <Stack sx={{ display: "flex", flexDirection: "column", position: "relative", width: "100vw", height: "100vh", overflow: "hidden" }}>
+      <Stack sx={{ zIndex: 1, position: "absolute", top: 0, left: 0, flex: 1, display: "flex", width: "100%" }}>
+        <img src={PyCon2025MobileLogoImage} alt="Pycon 2025 Mobile Image" style={{ flex: 1, objectFit: "cover" }} />
       </Stack>
-      <Stack sx={{ zIndex: 2, position: "absolute", top: 0, left: 0 }}>
+      <Stack sx={{ zIndex: 2, position: "absolute", top: 96, left: 46 }}>
         <img src={PyCon2025MobileLogoTitle} alt="Pycon 2025 Mobile Title" style={{ objectFit: "contain" }} />
       </Stack>
-      <Stack sx={{ zIndex: 3, position: "absolute", top: "3rem", left: 0 }}>
-        <ButtonBase sx={{ flexDirection: "row", backgroundColor: "white", borderRadius: "10px", boxShadow: "0 4px 4px 0px rgba(0, 0, 0, 0.15)" }}>
-          <Typography>{buttonTitle}</Typography>
-          <ArrowForwardIcon />
+      <Stack sx={{ zIndex: 3, position: "absolute", top: 351, left: 48 }}>
+        <ButtonBase
+          sx={{
+            flexDirection: "row",
+            backgroundColor: "white",
+            padding: "10px 20px",
+            gap: "10px",
+            borderRadius: "10px",
+            boxShadow: "0 4px 4px 0px rgba(0, 0, 0, 0.15)",
+          }}
+        >
+          <Typography sx={{ fontWeight: 600, fontSize: "15px" }}>{buttonTitle}</Typography>
+          <ArrowForwardIcon sx={{ height: "15px" }} />
         </ButtonBase>
       </Stack>
     </Stack>
   );
 };
-
-export const MobileCover: React.FC = () => {
-  return (
-    <Stack>
-      <MobileImage />
-    </Stack>
-  );
-};