Summary

기술 명세서가 다루는 작업에 대한 요약

공통 버튼 컴포넌트를 제작한다.

Requirements

기술적으로 만족해야 할 조건 및 놓쳐선 안 되는 포인트

Primary, Secondary(https://dribbble.com/shots/26591335-Connect-Page) 변형을 갖는다.
Large, Medium 사이즈를 갖는다.
각 사이즈는 반응형이다.
포커스를 가질 때 아웃라인이 표시된다.
아이콘과 텍스트를 함께 포함할 수 있다.
링크로 사용될 수 있다.

Plan

브랜치, 모듈, 인터페이스, 상태 관리 전략, 데이터 흐름, 라우팅 구조, 서드 파티 라이브러리, 애니메이션, 접근성, 스켈레톤, 에러 핸들링 등

브랜치

feat/button

모듈

source/shared/ui/Button

인터페이스

export default function Page() {
  return (
    <div>
			<Button variants="primary" size="lg">My Button</Button>
			<Button variants="secondary" size="lg">My Button</Button>
			<Button>
				<MyIcon />
				<span>My Button</span>
			</Button>
			<Button as="a" href="#">
				<MyIcon />
				<span>My Button</span>
			</Button>
    </div>
  )
}

export const Button = forwardRef((
    { as, ...props }: PolymorphicProps<E, ButtonOwnProps>,
    ref: React.Ref<Element>
  ) => {
    const Component = as || "button"
    
    return <Component ref={ref} {...props} />
  }
)

태그는 기본적으로 button이지만 링크로 활용될 수 있도록 다형성을 지원한다.