GETP-106 feature: Button, Input, Label 컴포넌트 구현

[toothlessdev]

✨ 구현한 기능

• Button 컴포넌트 구현 및 스토리북 작성
• Input 컴포넌트 구현 및 스토리북 작성
• Label 컴포넌트 구현 및 스토리북 작성

📢 논의하고 싶은 내용

• Input 컴포넌트의 재사용성을 높이기위해 children props 로 우측에 옵션으로 들어갈 컴포넌트를 받는것이 확장성에 용이한가
• React.ComponentProps 와 rest props 에 대해 같이 정리해보면 좋을 것 같습니다
• 참고글 : HTMLAttributes, HTMLProp 을 쓰지 마세요!

🎸 기타

• StoryBook 에서 children props 를 테스팅할때, Story 의 render 프로퍼티로 콜백함수를 넘기면됍니다! (저도 방금배움)
• 단, 스토리북의 확장자가 .story.tsx 이어야 합니다!

export const Email: Story = {
    args: {
        type: "email",
        width: "300px",
        height: "45px",
    },
    render: (args) => {
        return (
            <Input width={args.width} height={args.height} placeholder="이메일 주소를 입력해주세요">
                <Button variant="side" width="40px" height="45px">
                    인증
                </Button>
            </Input>
        );
    },
};

[zladb]

anyway LGTM 🫡

[zladb]

LGTM LGTM