feat: 디자인 시스템 - Input 컴포넌트 구현

[WonJuneKim]

💡 작업 내용

• textField 구현
• selectField 구현
• tagField(어드민) 구현
• Select 구현
• InputArea 구현
• Label 일부 수정

💡 자세한 설명

✅ Select

• SelectField 및 다른 컴포넌트들의 기반이 되는 Select 컴포넌트를 구현하였습니다.

• Context를 사용하여 구현하였으며, 자식 요소로는SelectLabel , SelectCheckBox, SelectRadio를 가집니다. 따라서 Label, Radio, Checkbox는 모두 Consumer로 사용됩니다.

• 단일 Select 컨테이너 + variant prop으로 동작 결정하며, Context는 Select.tsx에서만 제공합니다.

• 현재 Select는 checkbox와 radio가 구현 전이기에 SelectLabel 만 연동을 할 수 있는 상태입니다.

✅ Input 공통

• 디자인 에셋에서 Field 형태인 TextField, TagField, SelectField , Area 형태인 InputArea로 구성됩니다.

• 공통적인 스타일링은 shared를 통해 분리하였고, 인터페이스는 별도로 선언하였습니다. (인터페이스도 기본 >> 확장형으로 구현했다면 더 깔꼼했을 거 같네요.)

• 디자인 에셋에서는 BlockButton이 주입되어있는 형태가 기본형이지만, TextField, TextFieldButton과 같이 버튼의 경우 기본형을 확장한 형태로 구현하였습니다.

• 각 Input들을 최대한 controlled Pattern을 이용하여 구현하였습니다. 각 컴포넌트는 defaultValue를 가지지 않으며, 외부에서 onChange를 통해 사용자 액션을 감지하고, 업데이트 된 state에 따라 작동합니다.

✅ SelectField 관련

export const SelectField = forwardRef<HTMLDivElement, SelectFieldProps>(
  (
    {
      style = 'outlined',
      layout = 'vertical',
      validation = 'none',
      interaction = 'enabled',
      label,
      labelIcon,
      helperText,
      value,
      placeholder = '플레이스 홀더 텍스트',
      dropdownIcon = 'arrow-down-s-fill',
      isOpen = false,
      onClick,
      children,
      ...restProps
    },
    ref,
  ) => {

와 같이 Select 호출과 열림 상태를 관리할 때 isOpen 그리고 onClick 두가지 상태로 관리합니다. 따라서 해당 방식은 완전한 Controlled Pattern이 아닙니다.

문제
SelectField가 직접적으로 Select를 import하지 않고 children으로 가능성을 열어두었기 때문에 onChange props가 있어도 사용처가 없음

임시 해결책 1 (이후 삭제됨)
SelectField 역시 Select의 Context 내부에서 처리되는 방식

현재 해결책
컴포넌트가 단순 display에만 영향을 끼치도록 2가지 props(isOpen, onClick) 유지

• SelectField가 완전히 Select 컴포넌트 종속적으로 생각한다면 Select 를 import하거나 context안에서 다시 처리해야하는 것이 제일 이상적인 상황이라고 생각합니다.

✅ TagField

• TagField의 경우 내부에서 처리되어야하는 키보드 액션 방식들이 존재합니다.

• 최대한 순수 함수를 이용해서 기본 동작들을 선언하였고, (TagField.utils) Tag관련 상태(순수한 상태, 비즈니스 로직 제외)는 커스텀 훅을 사용합니다. (useTagFieldState)

✅ Label 컴포넌트 변경점

• Label의 경우 <label> 외에도 <span> 등과 같은 다양한 스타일로 사용하는 케이스가 있습니다. 이러한 다형성 처리를 위해 Emotion의 as를 사용하였습니다.

• 관련 설명은 주석 및 TsDocs로 기재해놓았습니다.

type LabelElement = HTMLLabelElement | HTMLSpanElement | HTMLDivElement | HTMLParagraphElement;

export interface LabelProps extends ComponentPropsWithoutRef<'label'> {
  as?: 'label' | 'span' | 'div' | 'p';
  size?: LabelSize;
  textAlign?: LabelTextAlign;
  weight?: LabelWeight;
  color?: string;
  children: ReactNode;
}

와 같이 as로 사용할 수 있는 메타 태그를 명시적으로 선언하였습니다.

• 트레이드 오프 : ref의 경우 사용하는 태그의 케이스에 따라서 ref 타입 단언이 필요하게 됩니다. 런타임과는 다르게 typescript 내부에서는 ref={ref as Ref<HTMLLabelElement>} 로 처리하였습니다.

📗 참고 자료 (선택)

📢 리뷰 요구 사항 (선택)

• SelectField 관련 추후 구현 방향성

✅ 셀프 체크리스트

• 머지할 브랜치 확인했나요?
• 이슈는 close 했나요?
• Reviewers, Labels, Projects를 등록했나요?
• 기능이 잘 동작하나요?
• 불필요한 코드는 제거했나요?

closes #240

[rkdcodus]

수정된 부분도 확인했습니다! 👍👍
의견은 코멘트 달아두었고 충돌 부분만 확인되면 될 것 같습니다 고생하셨습니다!

[rkdcodus]

아하~ 이런 속성이 있었군요 자동 사이즈 확장 속성이네요!! 편리하네요 👍
아직 사파리나 firefox 같은 곳에서는 지원하진 않는 속성이라고 하네요 지원하지 않는 브라우저에는 대체 로직이 필요할 것 같아요! 일단 일정 상 TODO로 남겨두는 것도 괜찮을 것 같습니다

[WonJuneKim]

fieldSizing은 말씀해주신 거처럼 experimental technology 입니다.

d249879 에 명시해두엇서요!

[rkdcodus]

아하~ 확인했습니다 fieldSizing이라는 속성이 있었군요 자동 사이즈 확장 속성이네요!! 편리하네요 👍
아직 사파리나 firefox 같은 곳에서는 지원하진 않는 속성이라고 하네요 지원하지 않는 브라우저에는 대체 로직이 필요할 것 같아요! 일단 일정 상 TODO로 남겨두는 것도 괜찮을 것 같습니다

[rkdcodus]

넵! 네이밍은 자율로 가면 될 것 같아요!
그리고 아이콘 색상은 제가 확인한 바로 디자인에서 레이블과 아이콘이 색상이 다르더라구요 재확인 부탁드립니다!

[rkdcodus]

아 이거 제가 field랑 헷갈렸네요 ㅜㅜ 확인했습니다!

[rkdcodus]

폼 필드 분리해주니까 구분이 되어서 좋네요!! 이대로 가도 문제는 없을 것 같습니다!
그렇지만 ui 구조랑 폼필드 결합도가 좀 높아보여요. 폼 필드 안에 Lable이랑 Content랑 helpText 위치가 고정된 형태인데 FormField는 Context Provider만 담당하고 해당 Field 컴포넌트에서 조립식으로 할 수 있게끔 (슬롯 구조로) 바꾸는 것이 유연한 방식이라 생각합니다!

<FormField>
  <StyledFieldContainer>
    <FormField.Label />
    <FormField.Content>
      <SelectFieldInput />
    </FormField.Content>
    <FormField.HelperText />
  </StyledFieldContainer>
</FormField>

[WonJuneKim]

f86c76b 저도 채연님 말씀에 동의합니다~

강한 결합도를 분리시키고, 기존 SelectField, TagField, TextField는 추상화 계층으로 사용하였습니다!

[rkdcodus]

변경 사항 확인했습니다! 👍👍