hae_on-layout-component v0.1.4

Install

# use npm
npm install hae_on-layout-component

#use yarn
yarn add hae_on-layout-component

Components

Container

화면의 폭에 따라 내용의 폭을 조절하고 레이아웃을 배치하는 Container 컴포넌트입니다.

import { Container } from 'hae_on-layout-component';

Props

Example

<Container maxWidth='600px' backgroundColor='#D8EAFF' centerContent>
  <div>Container</div>
</Container>

Grid

웹 페이지의 레이아웃을 구성하는 2차원(행과 열)의 시스템 Grid 컴포넌트입니다.

import { Grid } from 'hae_on-layout-component';

Props

Example

<Grid columns={5} gap={4}>
  <GridItem col={2} height='30px' backgroundColor='#D8EAFF' />
  <GridItem colStart={4} colEnd={6} height='30px' backgroundColor='#FFEC99' />
</Grid>

Grid Item

Grid 컴포넌트 내부에 들어가는 하나의 컴포넌트입니다.

import { GridItem } from 'hae_on-layout-component';

Props

Example

<GridItem col={2} height='30px' backgroundColor='#D8EAFF' />

Flex

Flex 레이아웃을 생성하기 위한 컴포넌트입니다.

import { Flex } from 'hae_on-layout-component';

Props

Example

<Flex align='center' gap={20}>
  <FlexItem>Item1</div>
  <FlexItem>Item2</div>
  <FlexItem>Item3</div>
  <FlexItem>Item4</div>
</Flex>

Flex Item

Flex 컴포넌트 내부에 들어가는 하나의 컴포넌트입니다.

import { FlexItem } from 'hae_on-layout-component';

Props

Example

<FlexItem>Item1</div>

Tab Layout

Tab 버튼을 통해 관련된 콘텐츠를 화면에 표시할 수 있는 컴포넌트입니다.

import { TabLayout } from 'hae_on-layout-component';

Props

Example

<TabLayout
  tabs={['Tab 1', 'Tab 2', 'Tab 3']}
  tabListStyles={{
    activeStyle: {
      color: 'blue',
    },
    fontSize: '100px',
  }}
>
  <Container>Content 1</Container>
  <Container>Content 2</Container>
  <Container>Content 3</Container>
</TabLayout>

*해당 예시에서 Container는 hae_on-layout-component의 내부 컴포넌트입니다.

…저자의 말 🐎

이 컴포넌트는 css-in-js를 사용하지 말자에 초점을 두고 만들었습니다.

(평소와 다른 방법으로 만들어보고 싶어서 사용하지 않았습니다)

따라서 코드를 보면 쉽게 해결할 수 있는 방법이 있는데 왜 이렇게 작성했을까 싶은 부분이 있습니다.

이는 끝까지 css-in-js를 사용하지 않고자 했던 저자의 의도와 노력이라고 생각해주세요 🥲

컴포넌트를 만들면서 가장 고민을 했던 부분은 어디까지 속성을 지원해야 하는 것인지에 대한 기준이었습니다.

파생될 수 있는 속성은 무한하기에 코드 작성자로서 어디까지 범위를 둬야할 지 고민이 많았습니다.

이 기준은 정답이 없다고 생각합니다.

따라서 기본적으로 해당 컴포넌트를 생각했을 때 사용할 것 같은 속성을 기준으로 두고 작성했습니다.

또한, 문서화에 있어 많은 고민을 했습니다.

어떻게 작성하면 사용하는 사람이 쉽게 쓸 수 있을까 생각했습니다.

그 의도가 잘 전달되었으면 좋겠네요!

ReadMe 외에도 docusaurus를 통해 문서화를 하였습니다.

아래 링크를 첨부해둘테니 구경해보세요~ 😎

https://hae-on.github.io/component-docs/docs/category/layout/

만약 코드나 문서를 보고 고치고 싶은 부분이 있다면 역시 언제든 깃허브 저장소로 연락주세요! 🥳