탄력적 대응가능한 컴포넌트 설계하기

[thinkanddoit]

미션 : 탄력적 대응가능한 컴포넌트 설계하기

세부 사항

• 쿠팡 서비스의 로그인 페이지와 회원가입 페이지에서 사용되는 컴포넌트들을 만들어 본다.
• 총 네 개의 컴포넌트를 설계하며, 실무에서처럼 다양한 유즈케이스에 탄력적으로 대응할 수 있는 구조에 대해서 고민
• 설계한 컴포넌트를 구현 및 더 나은 방법에 대한 고민
• 만든 컴포넌트들은 Storybook을 사용해 누구나 확인할 수 있도록 배포

만들어볼 컴포넌트

1. Button

(위의 유즈케이스만 고려)

• 쿠팡서비스에서 Button 컴포넌트가 활용되는 방식

1. 일반적인 button element
2. form의 submit
3. a tag를 이용한 페이지 라우팅 (next/link 사용)

위 유즈케이스들을 대응하기 위해 Button 컴포넌트가 어떻게 대응해야할지 아래와 같은 pseudo code를 작성하며 고민하자.

// 일반적인 button element
const addToCart = () => {};

return (
    <Button
        // 어떤 prop들을 어떻게 활용하면 좋을지 작성해보세요
    />
);

이후엔 정해진 인터페이스에 맞게 Button 컴포넌트를 구현해보자.

2. Input

• Input 컴포넌트의 요구사항

1. react-hook-form의 register를 사용할 수 있어야 한다.
2. focus시 border-bottom이 파란색으로, error시 빨간색으로 바뀐다.
3. 좌측에 icon이 표시된다.
4. invalid한 값 입력 시 적절한 에러 메세지를 보여준다.
5. 필요 시 autoComplete도 사용할 수 있다. (마지막 스크린샷 참고)

• Input도 마찬가지로 pseudo 코드를 작성하며 고민해보자.

import { useForm } from "react-hook-form"

import { Input } from "../components/common"

const Login: NextPage = () => {
  const { register } = useForm();

  return (
        <Input
            {...register("email")}
            // 어떤 prop이 추가로 필요할까요?
        />
    )
}

3. Check, CheckGroup

• react-hook-form 대응, font bold 처리, description 유무, 포함관계 등의 요구사항을 매끄럽게 만족시킬 수 있는 방법을 고민해보자.

Page에 적용

• 구현한 컴포넌트들을 활용해 LoginPage, SignupPage를 구현해보자.

Storybook을 설치하고 Chromatic으로 배포하기

• 완성된 Button, Input, Check 컴포넌트의 스토리 파일을 작성해보자.
• stories 파일은 컴포넌트와 같은 경로에 배치하자.

어떻게 해결 할것인가

• 우아한 컴포넌트 구조를 만들기 위해 유명한 open source 코드 구조를 조사해본다. ex)Meterial UI
• pseudo 코드를 작성하는 연습을 하면서 구현전 설계에 대한 고민을 많이 한다.
• Storybook 사용법을 익힌다.

ToDo List

• [ ] #9
• [ ] Inupt 컴포넌트 구현
• [ ] Check, CheckGroup 컴포넌트 구현
• [ ] LoginPage, SignupPage를 구현
• [ ] Storybook 배포