feat: 상단 메인이미지 컴포넌트 개발

Author: earthyoung

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

@@ -1,12 +1,13 @@
 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, useMediaQuery, useTheme } from "@mui/material";
+import { Button, Stack, useMediaQuery, useTheme } from "@mui/material";
 import * as React from "react";
 
 import FlickrIcon from "@apps/pyconkr/assets/thirdparty/flickr.svg?react";
 
-import MobileFooter from "./Mobile/MobileFooter";
+import { MobileCover } from "../../../../../../packages/common/src/components/mdx_components/mobile_cover";
+// import MobileFooter from "./Mobile/MobileFooter";
 import { useAppContext } from "../../../contexts/app_context";
 
 interface IconItem {
@@ -88,7 +89,13 @@ export default function Footer() {
   ];
 
   if (isMobile) {
-    return <MobileFooter />;
+    // return <MobileFooter />;
+    return (
+      <Stack>
+        <MobileCover />
+        <Stack sx={{ height: "300px" }} />
+      </Stack>
+    );
   } else {
     return (
       <FooterContainer>

packages/common/src/assets/pyconkr2025_main_cover_image.png

@@ -0,0 +1,36 @@
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import { ButtonBase, Stack, Typography } from "@mui/material";
+import * as React from "react";
+import { useAppContext } from "../../../../../apps/pyconkr/src/contexts/app_context";
+import PyCon2025MobileLogoImage from "../../assets/pyconkr2025_main_cover_image.png";
+import PyCon2025MobileLogoTitle from "../../assets/pyconkr2025_main_cover_title.png";
+
+const MobileImage: 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>
+      <Stack sx={{ zIndex: 2, position: "absolute", top: 0, left: 0 }}>
+        <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 />
+        </ButtonBase>
+      </Stack>
+    </Stack>
+  );
+};
+
+export const MobileCover: React.FC = () => {
+  return (
+    <Stack>
+      <MobileImage />
+    </Stack>
+  );
+};