chore, style : 프로젝트 아키텍처 세팅

[Ubinquitous]

Issue Number

#8

What

프로젝트 아키텍처를 세팅했습니다.

Why

.

How

간단하고 개발자가 빠르게 타겟 도메인을 찾아 개발할 수 있게함이 철학이자 목표입니다.

ScreenShot

[jyh071116]

수고하셨습니다

[jyh071116]

LayoutProvider의 존재 이유가 궁금합니다!

[Ubinquitous]

LayoutProvider는 아직 작성된 레이아웃이 없어 빈 프레임을 사용했습니다!
보통 공통적으로 들어가는 레이아웃이나 형식을 지정할 때 사용하려고 생각 중입니다!
제가 진행했던 BSM 서비스에서는 다음과 같이 사용합니다😀

import "react-toastify/dist/ReactToastify.css";
import { ToastContainer, toast } from "react-toastify";
import styled from "styled-components";
import { Footer, Header } from "@/components/common";
import { GlobalStyle, flex } from "@/styles";
import Modal from "@/@modal/layouts";

const LayoutProvider = ({ children }: React.PropsWithChildren) => {
  return (
    <>
      <StyledToastify autoClose={1000} position={toast.POSITION.TOP_RIGHT} />
      <GlobalStyle />
      <Modal />
      <Layout>
        <Header />
        <Main>{children}</Main>
        <Footer />
      </Layout>
    </>
  );
};

const StyledToastify = styled(ToastContainer)`
  .Toastify__toast {
    color: black;
    font-size: 14px;
  }
`;

const Layout = styled.div`
  ${flex.COLUMN_FLEX};
  gap: 6vh;
`;

const Main = styled.main`
  ${flex.FLEX};
  gap: 14px;
  width: 100%;
  padding: 0 8vw;
  min-height: 52vh;
`;

export default LayoutProvider;

[5ewon]

수고하셨습니다~