레이아웃 구성 연구 - divider

디자인 시안 중 아래와 같이 각 요소 사이에 동일한 divider 요소가 들어가고 일정한 간격을 유지하는 시안이 있다.

 

 

 

가운데 원이 각 사각형 요소들을 나누는 divider요소가 된다.

 

해당 레이아웃을 구성하기 위해 Layout컴포넌트를 아래와 같이 먼저 구성을 해줬다.

 

type LayoutProps = {
  children?: React.ReactNode;
  className?: string;
  divider?: React.ReactNode;
};

const Layout = ({ children, className }: LayoutProps) => {
  return <div className={className}>{children}</div>;
};

 

Layout 컴포넌트의 사용은 아래와 같이 구성할 수 있다.

 

const TestBox = () => <div className="flex-1 aspect-square bg-blue-100"></div>;

const LayoutPage = () => {
  return (
    <main>
      <div className="px-32 flex flex-row gap-12 my-[100px]">
        <TestBox />
        <TestBox />
        <TestBox />
        <TestBox />
      </div>

      <Layout
        divider={<TestBox></TestBox>}
        className="my-[100px] px-32 flex flex-row gap-12"
      >
        <TestBox />
        <TestBox />
        <TestBox />
        <TestBox />
      </Layout>
    </main>
  );
};

 

 

main의 첫번째 div 컨테이너는 먼저 별도의 컴포넌트를 구성하지 않고 유틸리티 css로 구성을 한것으로 아래와 같이 divider가 없이 구성된 화면을 구성할 수 있다.

 

 

 

여기서 divider를 구성하기 위해 아래의 divider컴포넌트를 구성해본다.

const Divider = () => (
  <div className="bg-blue-300 rounded-full w-[30px] h-[30px]"></div>
);

 

 

그리고 divider 컴포넌트를 추가하기 위해 원래의 gap-12를 gap-6으로 하여 간격을 유지할 수 있도록 한다.

const LayoutPage = () => {
  return (
    <main>
      <div className="px-32 flex flex-row gap-6 items-center my-[100px]">
        <TestBox />
        <Divider />
        <TestBox />
        <Divider />
        <TestBox />
        <Divider />
        <TestBox />
      </div>

      <Layout
        divider={<TestBox></TestBox>}
        className="my-[100px] px-32 flex flex-row gap-12"
      >
        <TestBox />
        <TestBox />
        <TestBox />
        <TestBox />
      </Layout>
    </main>
  );
};

 

 

이렇게 구성하여 아래와 같은 레이아웃을 구성해 볼 수 있다.

 

 

 

 

이제는 부모의 컨테이너에서 자식의 요소 사이에 divider 요소를 자동으로 추가하고, 별도의 추가 속성을 수정하지 않고, 추상화를 구현해 본다.