diff --git a/apps/pyconkr/src/components/layout/Footer/Mobile/MobileFooter.tsx b/apps/pyconkr/src/components/layout/Footer/Mobile/MobileFooter.tsx new file mode 100644 index 0000000..f8d9f87 --- /dev/null +++ b/apps/pyconkr/src/components/layout/Footer/Mobile/MobileFooter.tsx @@ -0,0 +1,221 @@ +import styled from "@emotion/styled"; +import * as Common from "@frontend/common"; +import { Article, Email, Facebook, GitHub, Instagram, LinkedIn, X, YouTube } from "@mui/icons-material"; +import * as React from "react"; + +import FlickrIcon from "@apps/pyconkr/assets/thirdparty/flickr.svg?react"; + +import { useAppContext } from "../../../../contexts/app_context"; + +interface IconItem { + icon: React.FC<{ width?: number; height?: number }>; + alt: string; + href: string; +} + +const defaultIcons: IconItem[] = [ + { + icon: Facebook, + alt: "facebook", + href: "https://www.facebook.com/pyconkorea/", + }, + { + icon: YouTube, + alt: "YouTube", + href: "https://www.youtube.com/c/PyConKRtube", + }, + { icon: X, alt: "X", href: "https://x.com/PyConKR" }, + { icon: GitHub, alt: "github", href: "https://github.com/pythonkr" }, + { + icon: Instagram, + alt: "Instagram", + href: "https://www.instagram.com/pycon_korea/", + }, + { + icon: LinkedIn, + alt: "LinkedIn", + href: "https://www.linkedin.com/company/pyconkorea/", + }, + { icon: Article, alt: "blog", href: "https://blog.pycon.kr/" }, + { + icon: FlickrIcon, + alt: "Flickr", + href: "https://www.flickr.com/photos/126829363@N08/", + }, +]; + +const Bar: React.FC = () =>
|
; + +export default function MobileFooter() { + const { sendEmail } = Common.Hooks.Common.useEmail(); + const { language } = useAppContext(); + + const title = language === "ko" ? "Weave with Python, 파이콘 한국 2025" : "Weave with Python, Pycon KR 2025"; + const committeeTitle = + language === "ko" + ? "파이콘 한국 2025는 파이콘 한국 준비위원회가 만들고 있습니다" + : "PyCon Korea 2025 is organized by the PyCon Korea Organizing Committee"; + const djangoTitle = language === "ko" ? "파이썬 웹 프레임워크 Django로 만들었습니다" : "Built with the Django web framework for Python"; + + const links = [ + { + text: language === "ko" ? "파이콘 한국 행동 강령(CoC)" : "PyCon Korea Code of Conduct", + href: "https://pythonkr.github.io/pycon-code-of-conduct/ko/coc/a_intent_and_purpose.html", + }, + { + text: language === "ko" ? "서비스 이용 약관" : "Terms of Service", + href: "/about/terms-of-service", + }, + { + text: language === "ko" ? "개인 정보 처리 방침" : "Privacy Policy", + href: "/about/privacy-policy", + }, + ]; + + return ( + + + +
+ +
+ +
+ +
+ + + {links.map((link, index) => ( + + + {link.text} + + {index < links.length - 1 && |} + + ))} + + + + + {defaultIcons.map((icon) => ( + + + ))} + + + + ); +} + +const FooterContainer = styled.footer` + background: linear-gradient(to bottom, #ffffff 0%, #e4fdff 25%, #92c9cc 50%, #5cadb3 75%, #095a5f 100%); + color: ${({ theme }) => theme.palette.common.white}; + font-size: 0.75rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + max-height: 16rem; + padding: 5rem 0 1rem 0; +`; + +const FooterContent = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.75rem; +`; + +const FooterText = styled.div` + padding: 0 2rem; + margin: 0.1rem; + + font-size: 9pt; + + a > button { + margin-left: 0.25rem; + padding: 0.05rem 0.25rem; + font-size: 8pt; + color: ${({ theme }) => theme.palette.common.white}; + border-color: ${({ theme }) => theme.palette.common.white}; + + gap: 0.25rem; + + & span { + margin-left: -2px; + margin-right: 0; + + & svg { + font-size: 12pt !important; + } + } + } + + strong { + font-size: 12pt; + } +`; + +const FooterBoldText = styled.text` + font-weight: 600; +`; + +const FooterNormalText = styled.text` + font-weight: 400; +`; + +const FooterSlogan = styled.div` + text-align: center; +`; + +const FooterLinkSlogan = styled.div` + display: flex; + gap: 0.3rem; +`; + +const FooterLinks = styled.div` + display: flex; + align-items: center; + gap: 0.3rem; +`; + +const FooterIcons = styled.div` + display: flex; + align-items: center; + gap: 9px; +`; + +const Link = styled.a` + color: ${({ theme }) => theme.palette.common.white}; + text-decoration: none; + &:hover { + text-decoration: underline; + } +`; + +const Separator = styled.span` + color: ${({ theme }) => theme.palette.common.white}; + opacity: 0.5; + margin: 0.05rem 0; +`; + +const IconLink = styled.a` + display: flex; + align-items: center; + justify-content: center; + + cursor: pointer; + + &:hover { + opacity: 0.8; + } + + img { + width: 20px; + height: 20px; + } +`; diff --git a/apps/pyconkr/src/components/layout/Footer/index.tsx b/apps/pyconkr/src/components/layout/Footer/index.tsx index 3f940f4..4c59f08 100644 --- a/apps/pyconkr/src/components/layout/Footer/index.tsx +++ b/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 } 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 { useAppContext } from "../../../contexts/app_context"; +import MobileFooter from "./Mobile/MobileFooter"; interface IconItem { icon: React.FC<{ width?: number; height?: number }>; @@ -49,6 +50,9 @@ const Bar: React.FC = () =>
- - - {corpPasamoStr} -
- {corpAddressStr} - - {corpRepresentatorStr} - - {corpPhoneStr} - - {corpCompanyNumberStr} - - - -
- {corpMailOrderSalesRegistrationNumberStr} - - {hostingProviderStr} - - {contractEmailStr} - pyconkr@pycon.kr - - - {links.map((link, index) => ( - - - {link.text} - - {index < links.length - 1 && |} - - ))} - - - - - {defaultIcons.map((icon) => ( - - + {copyrightStr} + + + ); + } } const FooterContainer = styled.footer` @@ -195,6 +205,7 @@ const FooterLinks = styled.div` align-items: center; gap: 0.625rem; `; + const FooterIcons = styled.div` display: flex; align-items: center;