diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 280465b..0db1020 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,12 +1,83 @@ -import React from "react"; +import { Sponsor } from "models/sponsor"; +import React, { useEffect, useState } from "react"; import styled from "styled-components"; +import { SponsorAPI } from "api"; +import { Blog, Email, Facebook, Flickr, GitHub, TwitterX, Youtube } from "assets/icons"; + const Footer = () => { + const [sponsors, setSponsors] = useState([]); + + useEffect(() => { + SponsorAPI.listSponsors() + .then((res) => { + setSponsors(res); + }) + .catch(() => { + setSponsors(undefined); + }); + }, []); + return ( - - - + + {sponsors === undefined ? ( + 후원사 목록을 가져오는데 실패했습니다. + ) : ( + sponsors.map((sponsor) => {sponsor.name}) + )} + + +
+ + + + + + + + + + + + + + + + + + + +
상호명사단법인 파이썬 사용자모임
사업자 등록 번호338-82-00046
대표자명배권한
사업장 주소서울시 강남구 강남대로84길 24-4
+
+
+
슬로건, 파이콘 한국 2024
+
+ 파이콘 한국 2024는 파이콘 한국 준비위원회가 만들고 있습니다. +
+
+ 파이썬 웹 프레임워크{" "} + + Django + + 로 만들었습니다. +
+
서비스 이용 약관 | 개인정보 처리 방침
+
+
+
+ +
파이콘 한국 행동 강령 (CoC)
+
+ + + + + + + +
+
); }; @@ -15,9 +86,6 @@ export default Footer; const Container = styled.div` width: 100%; - - position: absolute; - bottom: 0; `; const Sponsors = styled.div` @@ -28,7 +96,52 @@ const Sponsors = styled.div` const About = styled.div` width: 100%; - height: 12rem; + height: 9rem; + margin-bottom: 2.5rem; + + display: flex; + justify-content: space-between; + align-items: center; + + font-size: 0.8rem; + + & > section.left { + width: 29%; + padding-left: 1%; + + & > table { + tr > td:nth-of-type(2) { + padding-left: 1.5rem; + } + } + } + + & > section.center { + width: 70%; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + font-size: 0.75rem; + + & > div.slogan { + font-size: 1rem; + } + & > div + div { + margin-top: 1vh; + } + & > div a { + text-decoration: none; + color: blue; + } + } + + & > section.right { + width: 29%; + padding-right: 1%; + } ////////////////////////// background-color: gray; @@ -39,9 +152,31 @@ const Fixed = styled.div` position: fixed; bottom: 0; - width: 100%; + width: calc(100% - 2vw); height: 2.5rem; + display: flex; + justify-content: space-between; + align-items: center; + + padding: 0 1vw; + + & > section.left { + font-weight: bold; + } + + & > section.right { + padding-top: 4px; + + & > svg { + color: black; + width: 1.4rem; + } + & > svg + svg { + margin-left: 1.1rem; + } + } + ////////////////////////// background-color: skyblue; ////////////////////////// diff --git a/src/style.scss b/src/style.scss index c9daaad..98ecdc6 100644 --- a/src/style.scss +++ b/src/style.scss @@ -2,6 +2,4 @@ body { margin: 0; min-height: 100vh; - - position: relative; } \ No newline at end of file