Flex 컴포넌트 구현

매번 Flexbox 스타일을 작성하는 수고를 덜기 위해서 설계하게 되었습니다.

csstype 라이브러리를 설치하여 CSS 속성의 Props 정의를 유연하게 하였습니다.

import type * as CSS from 'csstype';

interface FlexProps {
  direction?: 'column' | 'row';
  xGap?: string;
  yGap?: string;
  justifyContent?: CSS.Properties['justifyContent'];
  alignItems?: CSS.Properties['alignItems'];
}

Usage

<Flex direction="column" xGap="16px" yGap="8px" justifyContent="center" alignItems="center">
  {/* 자식 요소들 */}
</Flex>

Input 컴포넌트 구현

입력 필드와 레이블을 포함하는 컴포넌트를 설계하였습니다.

interface Props extends InputHTMLAttributes<HTMLInputElement> {
  label?: string;
}

Usage

<Input label="성명" placeholder="이름을 입력하세요" name="name" value={userName} />

Styling

Emotion의 css prop을 이용하여 스타일을 주입할 수 있습니다.

<Input label="성명" placeholder="이름을 입력하세요" css={{ padding: '6px 12px' }} />

Card 컴포넌트 구현