[TIL/Coin Site Project] 2023/12/05

Home Page Layout ✍️

import React from "react";
import { Box } from "@mui/material";

import PageContainer from "../components/layout/common/PageContainer";
import ComponentWrapper from "../components/layout/common/ComponentWrapper";
import Table from "../components/home/Table";

const Home = () => {
  return (
    <>
      <PageContainer>
        <ComponentWrapper>
          <Box sx={{ height: "auto" }}>
            {/* Card Area */}
            <Box sx={{ display: "flex", columnGap: "60px", padding: "60px 0" }}>
              <Box
                sx={{
                  backgroundColor: "#0e1821",
                  width: "360px",
                  border: "none",
                  height: "200px",
                  borderRadius: "15px",
                  transition: "opacity 0.3s ease",
                  "&:hover": {
                    opacity: 0.8,
                  },
                }}
              >
                <p
                  style={{
                    textAlign: "center",
                    color: "white",
                    fontWeight: "bolder",
                  }}
                >
                  'Trending' rendering
                </p>
                <p
                  style={{
                    textAlign: "center",
                    color: "white",
                    fontWeight: "bolder",
                  }}
                >
                  스르륵 예정
                </p>
              </Box>
              <Box
                sx={{
                  backgroundColor: "#0e1821",
                  width: "360px",
                  border: "none",
                  height: "200px",
                  borderRadius: "15px",
                  transition: "opacity 0.3s ease",
                  "&:hover": {
                    opacity: 0.8,
                  },
                }}
              >
                <p
                  style={{
                    textAlign: "center",
                    color: "white",
                    fontWeight: "bolder",
                  }}
                >
                  'News' rendering
                </p>
                <p
                  style={{
                    textAlign: "center",
                    color: "white",
                    fontWeight: "bolder",
                  }}
                >
                  스르륵 예정
                </p>
              </Box>
              <Box
                sx={{
                  backgroundColor: "#0e1821",
                  width: "360px",
                  border: "none",
                  height: "200px",
                  borderRadius: "15px",
                  transition: "opacity 0.3s ease",
                  "&:hover": {
                    opacity: 0.8,
                  },
                }}
              >
                <p
                  style={{
                    textAlign: "center",
                    color: "white",
                    fontWeight: "bolder",
                  }}
                >
                  'Fear & Greed Index' rendering
                </p>
                <p
                  style={{
                    textAlign: "center",
                    color: "white",
                    fontWeight: "bolder",
                  }}
                >
                  스르륵 예정
                </p>
              </Box>
            </Box>
            {/* Table Area */}
            <Table />
          </Box>
        </ComponentWrapper>
      </PageContainer>
    </>
  );
};

export default Home;

PageContainer.jsx 🟢

Appbar와 Footer 사이에 추가될 Box Area에 관한 논의이다.

PageContainer를 통해 말 그대로 '페이지를 감쌀 경우', 해당 페이지의 내용은 Appbar와 Footer 사이에 위치하게 된다.

이떄, 보여지는 최소한의 넓이와 높이는 '사용자 기기의 view'만큼으로 설정된다. 추가적으로 'flex-grow: 1'을 통해 페이지의 내용이 Appbar와 Footer 사이에 모두 담아지도록 내용을 구성했다.

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

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

export default PageContainer;

ComponentWrapper.jsx 🟢

경우에 따라서, page의 전체 px을 차지해야 하는 경우도 있지만, component를 1200px로 제한할 필요도 있다.

가령 'banner'는 전체 페이지 width를 차지하도록 설정하고 싶고, 동시에 'page의 내용'에 관한 부분은 1200px이라는 일관된 layout을 통해 보여주고 싶다면, banner는 PageContainer에 셋팅하고, 나머지 내용은 ComponentWrapper로 감싸면 된다.

import React from "react";
import { Box } from "@mui/material";

const ComponentWrapper = ({ style, children }) => {
  return (
    <Box
      style={style}
      sx={{
        maxWidth: "1200px",
        margin: "0 auto",
        height: "auto",
        width: "100%",
      }}
    >
      {children}
    </Box>
  );
};

export default ComponentWrapper;

현재 모습 🟢