Button 컴포넌트 구현

구현 전 요구사항 정리

• 기본 small, normal, large 크기 사용 => css 파일과 클래스를 이용한다. → component 내에서 size props를 받으면, 이 props에 따라서 클래스 이름을 만들고, 리턴되는 jsx에 이 클래스이름을 적용한다. ⇒ 생각이 바뀜 ; css로 분리해두고, 스타일을 class로 적용하는 방식이 나을 것 같음 (너무 많은 styled component가 한 파일에 있으면, 오히려 가독성을 해친다고 생각됨) ex) <Button size={small} … /> → 컴포넌트이름과 동일한 css를 만드는 경우, 파일을 불러올 떄 index.js를 명시해야 하고, 다른 컴포넌트들과 일관성이 떨어지기에 styled component로 우선적으로 구현한다. → styled component(emotion)에서 제공하는 css를 이용하여 사용한다.
→ 각 버튼의 크기의 경우, 검색에 사용되는 버튼 기준으로 맞춤 (모양을 유지하기 위함, (76 * 50) ) large - 152 * 100 normal - 76 * 50 small - 38 * 25
 
→ 제안) 크기로 나누는 것 보다, 버튼의 타입에 맞춰서 (예: 검색버튼), 그 컴포넌트에 사용되는 속성을 정하고 넣어서 사용하는 편이 나을 것 같습니다.
→ 이 후 이 버튼 컴포넌트를 통한 다른 컴포넌트를 만들 때, 각각의 스타일을 설정하고 덮어씌우는 방식을 사용
 

• props를 받아서 사용자 쪽에서 onClick 이벤트를 핸들링 할 수 있도록 한다. (사용자 인터렉션에 관한 내용은 추후에 더욱 생각할 예정)

• props를 받아서 사용자 쪽에서 스타일을 받아서 커스텀 할 수 있도록 한다.

• 버튼 컴포넌트의 로딩상태에 대하여 (submit의 성격을 가지는 button의 경우, disabled 의 속성이 필요함) → props로 받은 onClick 이벤트로 전달할 것인가? or 버튼 컴포넌트 내에서 처리?