[TIL/Coin Site Project] 2023/11/28

import { Typography } from "@mui/material";

export const footerProducts = [
  <Typography>ChatGPT Plugin</Typography>,
  <Typography>Blockchain Explorer</Typography>,
  <Typography>Crypto API</Typography>,
  <Typography>Crypto Indices</Typography>,
  <Typography>Doodles</Typography>,
  <Typography>Sitemap</Typography>,
];

export const footerSupport = [
  <Typography>Request Form</Typography>,
  <Typography>Contact Support</Typography>,
  <Typography>FAQ</Typography>,
  <Typography>Glossary</Typography>,
];

export const footerSocials = [
  <Typography>X,Twitter</Typography>,
  <Typography>Community</Typography>,
  <Typography>Telegram</Typography>,
  <Typography>Instagram</Typography>,
  <Typography>Facebook</Typography>,
  <Typography>Reddit</Typography>,
  <Typography>LinkedIn</Typography>,
];

export const footerMenuList = {
  footerProducts,
  footerSupport,
  footerSocials,
};

import React from "react";
import { Box, Container, Typography } from "@mui/material";
import { footerMenuList } from "./footerMenu";
import { Icon } from "../appbar";

const Footer = () => {
  return (
    <Box
      sx={{
        backgroundColor: "#0d1521",
        color: "white",
        height: "100%",
        width: "100%",
        minWidth: "100%",
        border: "3px solid pink",
      }}
    >
      <Container
        sx={{
          padding: { lg: "0 20px", xs: "0 16px" },
        }}
        disableGutters
      >
        {/* section 1 */}
        <Box
          sx={{
            justifyContent: "space-between",
            display: { xs: "block", sm: "flex" },
          }}
        >
          {/* logo */}
          <Box sx={{ border: "1px solid yellow" }}>
            <Icon />
          </Box>
          {/* info */}
          <Box
            sx={{
              display: "flex",
              columnGap: "40px",
              border: "1px solid green",
            }}
          >
            {/* Products */}
            <Box>
              <Typography sx={{ fontWeight: "bolder", marginBottom: "10px" }}>
                Products
              </Typography>
              {footerMenuList?.footerProducts.map((elem, idx) => (
                <Box key={idx}>{elem}</Box>
              ))}
            </Box>
            {/* Support */}
            <Box>
              <Typography sx={{ fontWeight: "bolder", marginBottom: "10px" }}>
                Support
              </Typography>
              {footerMenuList?.footerSupport.map((elem, idx) => (
                <Box key={idx}>{elem}</Box>
              ))}
            </Box>
            {/* Socials */}
            <Box>
              <Typography sx={{ fontWeight: "bolder", marginBottom: "10px" }}>
                Socials
              </Typography>
              {footerMenuList?.footerSocials.map((elem, idx) => (
                <Box key={idx}>{elem}</Box>
              ))}
            </Box>
          </Box>
        </Box>
        {/* section 2 */}
        <Box
          sx={{
            border: "2px solid blue",
            display: "flex",
            justifyContent: "space-between",
          }}
        >
          {/* copyright */}
          <Box>© 2023 KitingCoin. All rights reserved</Box>
          {/* download app */}
          <Box>
            <Typography>Download on the App Store</Typography>
            <Typography>GET IT ON Google Play</Typography>
          </Box>
        </Box>
      </Container>
    </Box>
  );
};

export default Footer;

import Appbar from "@/components/layout/appbar/Appbar";
import Footer from "@/components/layout/footer/Footer";
import { Box } from "@mui/material";

const PageContainer = ({ children }) => {
  return (
    <>
      <Appbar />
      <Box
        sx={{
          minHeight: "100vh",
          minWidth: "100vw",
          flexGrow: 1,
        }}
      >
        {children}
      </Box>
      <Footer />
    </>
  );
};

export default PageContainer;

import React from "react";
import PageContainer from "@/components/layout/common/PageContainer";
import { Box } from "@mui/material";

const Home = () => {
  return (
    <PageContainer>
      <Box sx={{ backgroundColor: "#2c2e3c" }}>
        (로마=연합뉴스) 신창용 특파원 = 조르자 멜로니 이탈리아 총리가 2030
        세계박람회(엑스포) 개최지를 결정하는 파리 국제박람회기구(BIE) 총회에
        불참하는 것으로 확인됐다. 이탈리아 일간지 라 레푸블리카는 개최지 투표를
        하루 앞둔 27일(현지시간) "멜로니 총리는 엑스포 개최지가 결정되는 내일
        프랑스 파리에 가지 않고 로마에 남아있을 것"이라고 보도했다. 멜로니
        총리가 불참하는 상황에서 이탈리아 정부는 안토니오 타야니 부총리 겸
        외무장관도 아닌 마리아 트리포디 외무부 차관을 정부 대표로 파리 BIE 총회
        지지할 수도 있는 잠재적 협력대상이기도 하다. 이탈리아는 불과 한 달 전만
        해도 사우디아라비아에 이은 2위로 결선 투표를 자신했으나 최근 들어선
        판세가 둔 27일(현지시간) "멜로니 총리는 엑스포 개최지가 결정되는 내일
        프랑스 파리에 가지 않고 로마에 남아있을 것"이라고 보도했다. 멜로니
        총리가 불참하는 상황에서 이탈리아 정부는 안토니오 타야니 부총리 겸
        외무장관도 아닌분석도 있지만 정부가 일찌감치 백기를 든 것 아니냐는 자조
        섞인 반응도 나오고 있다. 이탈리아 로마는 2030엑스포 유치전에서
        한국(부산)의 경쟁 상대다. 결선 투표로 갈 경우 사우디아라비아(리야드)와의
        최종 표결에서 우리 측을 지지할 수도 있는 잠재적 협력대상이기도 하다.
        이탈리아는 불과 한 달 전만 해도 사로마의 패색이 짙어지자 멜로니 총리와
        로카 주지사가 유치 실패에 대한 책임을 지지 않기 위해 불참을 선택한
        것으로 보인다고 전했다. 이미 판세가 결정된 상황에서 멜로니 총리의 부재가
        큰 의미가 없다는 분석도 있지만 정부가 일찌감치 백기를 든 것 아니냐는
        자조 섞인 반응도 나오고 있다. 이탈리아 로마는 2030엑스포 유치전에서
        한국(부산)의 경쟁 상대다. 결선 투표로 갈 경우 사우디아라비아(리야드)와의
        최종 표결에서 우리 측을 지지할 수도 있는 잠재적 협력대상이기도 하다.
        이탈리아는 불과 한 달 전만 해도 사우디아라비아에 이은 2위로 결선 투표를
        자신했으나 최근 들어선 판세가
      </Box>
    </PageContainer>
  );
};

export default Home;