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

* refactor: Label 컴포넌트의 태그를 label로 변경합니다.
- emotion의 as prop을 통해 다양한 HTML 요소로 렌더링 가능하도록 수정

* refactor: theme이 컴포넌트가 아닌 스타일 단위에서 처리될 수 있도록 변경합니다.
- shouldForwardRef를 이용해서 스타일링에서만 사용되는 props는 드러나지 않도록 합니다.

* refactor: 수정된 Label 컴포넌트를 Badge에 적용합니다.

* feat: Label props를 export할 수 있도록 선언합니다.

* feat: Context를 사용하여 Select 컴포넌트를 구현합니다.

* feat: Select 컴포넌트의 variant에 따라 분기되는 자식 요소를 구현합니다.

* feat: Select와 자식 요소들을 스타일링합니다.

* feat: 순수 함수 구조의 select 상태를 관리하는 핸들러를 생성합니다.

* test: Select 컴포넌트의 스토리북 테스트 코드를 작성합니다.

* feat: select 컴포넌트와 인터페이스를 export합니다.

* feat: input 컴포넌트 중 TextField 컴포넌트를 작성합니다.
- 기본형은 TextField
- 버튼이 들어가 있는 구조는 TextFieldButton

* feat: textField의 인터페이스를 선언합니다.

* feat: textField의 스타일링 코드를 작성합니다.

* feat: TextField의 구조를 최적화하기 위한 추가 wrapper를 생성합니다.

* feat: TextField 스타일링 시 layout 값에 따라 다른 스타일링을 처리하도록 변경합니다.

- (추가) shouldForwardProp으로 검증하는 값은 최하위 컴포넌트 단위에서 수행하도록 변경

* test: TextField의 스토리북을 작성합니다.

* test: TextField의 요소들을 export 합니다.

* feat: SelectField 컴포넌트를 구현합니다.
- children으로 Select 또는 이외의 자식 요소를 받음
- 이러한 처리로 인해 isOpen과 onClick 두 props로 같은 상태를 제어하는 문제 >> Select Context 안에 Select.Field 를 추가 생성

* feat: SelectField를 스타일링 합니다.

* feat: SelectField의 선택된 값을 추가 스타일링합니다.

* test: SelectField의 스토리북 코드를 작성합니다.

* feat: SelectField의 요소들을 export 합니다.

* feat: 순환참조 문제가 발생할 수 있는 import문(경로가 축소된 import문)을 변경합니다.

* feat: 순환참조 문제가 발생할 수 있는 스타일링 부분을 공용 부분과 공용이 아닌 부분으로 분할합니다.

* feat: Input 컴포넌트에서 공통으로 사용되는 스타일링 부분을 추출합니다.

* feat: TagField 컴포넌트를 구현합니다.

* feat: TagField 컴포넌트를 구현합니다.

* feat: Input 컴포넌트들의 공통되는 타입을 추출합니다.

* feat: 공통 타입 추출에 영향을 받는 부분을 수정합니다.

* feat: disabled와 readOnly를 interaction props로 추상화합니다.

* feat: TagField의 스타일링 코드를 작성합니다.

* test: TagField의 스토리북 코드를 작성합니다.

* feat: input의 스타일 variant별로 interactionLayer의 매개변수를 분리합니다.

* feat: input의 스타일 variant별로 interactionLayer의 매개변수를 분리합니다.

* feat: empty style일 때 레이아웃을 조정합니다.

* feat: empty 스타일일 때의 interactionLayer 매개변수를 명시적으로 분기합니다.

* feat: SelectField에서 Button을 사용하는 확장 컴포넌트를 구현합니다.

* test: SelectField의 스토리북을 Button이 있는 형태가 기본이 되도록 합니다.

* feat: TagField에 버튼이 있는 확장형 컴포넌트를 구현합니다.

* test: TagField의 스토리북에 버튼이 있는 버전을 추가합니다.

* feat: Interaction props의 반환 값 네이밍을 변경합니다.

* feat: Icon의 색상을 별도 함수로 관리합니다.

* feat: 버튼형태가 추가된 Input 컴포넌트들을 export합니다.

* feat: TagField에 사용되는 비즈니스 로직 중 순수함수로 분리할 수 있는 로직을 추출합니다.

* feat: TagField의 상태를 커스텀 훅을 통해서 관리합니다.

* refactor: TagField에 유틸리티 함수와 커스텀 훅을 적용시킵니다.

* feat: InputArea 컴포넌트를 구현합니다.

* feat: InputArea의 스타일링 코드를 작성합니다.

* feat: InputArea의 높이를 props를 통해 조절하도록 변경합니다.

* feat: InputArea 중 textarea의 스타일링 방식을 변경합니다.

* test: InputArea의 스토리북 코드를 작성합니다.

* feat: 구현한 InputArea 컴포넌트를 export합니다.

* feat: Input 관련 컴포넌트를 한번에 export합니다.

* feat: component 단위에서 구현한 컴포넌트를 export합니다.

* feat: 수정된 토큰 네이밍에 맞춰서 스타일링 토큰 값을 변경합니다.

* feat: 수정된 토큰 네이밍에 맞춰서 스타일링 토큰 값을 변경합니다.

* feat: InputArea가 기본적으로 유동적인 height를 가지도록 변경합니다.
- min-height는 최소한의 크기를 보장해줌
- 특정 높이가 필요할 경우 height props로 제어

* feat: props로 받는 height, min-height는 wrapper의 길이에만 영향을 주도록 변경합니다.
- 내부 TextArea의 height는 100% 유지

* test: 변경된 inputArea에 스토리북을 사용해 테스트 케이스를 작성합니다.

* docs: 중복 작성되는 InteractionLayer의 매핑 객체의 개선 방향성을 작성합니다.

* feat: Icon에 색상이 적용되지 않는 문제를 container에 색상을 주입하여 해결합니다.

* feat: 선택 필드에 대한 Aria-role을 combobox로 변경합니다.

* refactor: 폼 입력 필드(Input)를 사용하는 컴포넌트들을 관리하기 위한 Context를 구현합니다.

* refactor: TagField 에서 TagList와 TagItem을 별도의 presentation component로 분리합니다.

* refactor: 각 Input에서 폼 입력 필드를 구독할수 있도록 변경합니다.
- Context로 구성된 FormField의 소비자가 됨

* feat: 변경된 토큰 값을 기존 스타일에 반영합니다.

* feat: 변경된 토큰 값을 기존 스타일에 반영합니다.

* feat: Label 스타일에 HeroStyle을 import하고 있는 구간을 별도 선언으로 분리합니다.

* feat: Icon 컴포넌트의 type을 import해서 props의 type을 명시합니다.

* fix: deprecated된 토큰 타입을 주석 처리합니다.

* refactor: FormField의 결합도를 낮추고, 네이밍된 Field들을 케이스별 프리셋으로 사용합니다.

* feat: 레이블 내 아이콘 스타일링을 변경합니다.

* feat: 레이블 내 아이콘 스타일링을 변경합니다.

* docs: textArea의 개선점을 작성합니다.

Author: WonJuneKim

packages/jds/src/components/Badge/contentBadge/ContentBadge.tsx

@@ -44,7 +44,7 @@ const ContentBadgeBasic = ({
       isMuted={isMuted}
       withIcon={withIcon}
     >
-      <Label size={size} textAlign='center' weight='normal' color='inherit'>
+      <Label as='span' size={size} textAlign='center' weight='normal' color='inherit'>
         {children}
       </Label>
       {withIcon && (
@@ -84,7 +84,7 @@ const ContentBadgeFeedback = ({
       badgeStyle={badgeStyle}
       isMuted={isMuted}
     >
-      <Label size={size} textAlign='center' weight='normal' color='inherit'>
+      <Label as='span' size={size} textAlign='center' weight='normal' color='inherit'>
         {children}
       </Label>
     </ContentBadgeFeedbackDiv>
@@ -110,7 +110,7 @@ const ContentBadgeTheme = ({
 }: ContentThemeBadgeProps) => {
   return (
     <ContentBadgeThemeDiv variant={variant} size={size} badgeStyle={badgeStyle} isMuted={isMuted}>
-      <Label size={size} textAlign='center' weight='normal' color='inherit'>
+      <Label as='span' size={size} textAlign='center' weight='normal' color='inherit'>
         {children}
       </Label>
     </ContentBadgeThemeDiv>

packages/jds/src/components/Badge/numericBadge/NumericBadge.tsx

@@ -27,7 +27,7 @@ const NumericBadgeBasic = ({
       badgeStyle={badgeStyle}
       isMuted={isMuted}
     >
-      <Label size={size} textAlign='center' weight='normal' color='inherit'>
+      <Label as='span' size={size} textAlign='center' weight='normal' color='inherit'>
         {children}
       </Label>
     </NumericBadgeBasicDiv>
@@ -58,7 +58,7 @@ const NumericBadgeFeedback = ({
       badgeStyle={badgeStyle}
       isMuted={isMuted}
     >
-      <Label size={size} textAlign='center' weight='normal' color='inherit'>
+      <Label as='span' size={size} textAlign='center' weight='normal' color='inherit'>
         {children}
       </Label>
     </NumericBadgeFeedbackDiv>