svgr 의존성 패키지 설치

SVG 확장자 파일을 React 컴포넌트로 변환하기 위해 svgr 패키지를 설치하였습니다.

의존성 설치 후 작업 진행 부탁드립니다.

Usage

SVG 파일 경로 끝에 ?react 키워드를 추가하면 해당 파일이 컴포넌트로 변환됩니다.

import GoogleIcon from '@assets/icons/icon-google.svg?react';

export default function Example() {
	return (
		<>
			<GoogleIcon />
		</>
	)
}

InnerContainer 컴포넌트 구현

컨텐츠를 중앙에 배치하는 InnerContainer 컴포넌트를 구현했습니다.

maxWidth 값을 string 타입으로 전달하면 해당 값에 따라 최대 너비를 설정하고, 컨텐츠를 중앙에 배치합니다.

type InnerContainerProps = {
  maxWidth: string;
  children: ReactNode;
} & HTMLAttributes<HTMLDivElement>;

Usage

import { InnerContainer } from '@components/common';

export default function Example() {
	return (
		<InnerContainer maxWidth="1300px">
			<p>Hello World!</p>
		</InnerContainer>
	)
}

Typo 컴포넌트 구현

유연하게 엘리먼트, 색상, 크기를 설정할 수 있는 타이포그래피 컴포넌트를 구현했습니다.

element는 HTML 태그를 문자열로 전달하며, 선택적이므로 기본값은 div입니다.

size는 문자열로 크기를 지정하고, color는 palettes에 정의된 색상만을 사용할 수 있도록 설정하였습니다.

type Props = {
  element?: keyof JSX.IntrinsicElements;
  size?: string;
  color?: PalettesTypes; // palletes에 정의된 색상의 key값을 주입합니다.
  style?: React.CSSProperties;
  children: React.ReactNode;
};

Usage