@gyeongza/components

누구나 사용할 수 있는 레이아웃 컴포넌트

재사용 가능한 레이아웃 컴포넌트 제작과 배포

모든 컴포넌트는 필요에 따라 style={{width: "10px"}} 과 같이 inline 스타일을 추가할 수 있습니다.

Container 컴포넌트

minWidth, maxWidth 속성을 통해 폭을 조절할 수 있습니다.

// 1. Container

<Container minWidth={600} maxWidth={960}>
  <div>Container</div>
</Container>

Grid 컴포넌트

rows, columns 속성을 통해 격자의 형태를 지정할 수 있습니다.

gap 속성을 통해 자식 컴포넌트 간의 간격을 조절할 수 있습니다.

// 1. Grid

<Grid rows={3} cols={2} gap={10}>
  <div>GridItem 1</div>
  <div>GridItem 2</div>
  <div>GridItem 3</div>
  <div>GridItem 4</div>
  <div>GridItem 5</div>
  <div>GridItem 6</div>
</Grid>

Flex 컴포넌트

direction, justify, align 속성을 통해 배열 방향과 정렬을 조절할 수 있습니다.

gap 속성을 통해 자식 컴포넌트 간의 간격을 조절할 수 있습니다.

// 1. Flex

<Flex direction="column" justify="center" align="center" gap={10}>
  <div>FlexItem 1</div>
  <div>FlexItem 2</div>
  <div>FlexItem 3</div>
</Flex>

Drawer 컴포넌트

Drawer 방향을 설정할 수 있습니다.

// 1. Drawer

const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  const handleModalClose = () => {
    setIsOpen(false);
  };

  const handleModalOpen = () => {
    setIsOpen(true);
  };

  return (
    <div>
      <Drawer anchor="LEFT" isOpen={isOpen} onClose={handleModalClose}>
        // 원하는 컴포넌트를 추가하세요.
      <button onClick={handleModalOpen}>오픈</button>
    </div>
  );
};

export default App;