Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 79 commits into from
Nov 20, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
79 commits
Select commit Hold shift + click to select a range
67a8ecc
refactor: Label 컴포넌트의 태그를 label로 변경합니다.
WonJuneKim Oct 21, 2025
003d94b
refactor: theme이 컴포넌트가 아닌 스타일 단위에서 처리될 수 있도록 변경합니다.
WonJuneKim Oct 21, 2025
72d876a
refactor: 수정된 Label 컴포넌트를 Badge에 적용합니다.
WonJuneKim Oct 21, 2025
cd1d88d
feat: Label props를 export할 수 있도록 선언합니다.
WonJuneKim Oct 25, 2025
20eb741
feat: Context를 사용하여 Select 컴포넌트를 구현합니다.
WonJuneKim Oct 25, 2025
019fa20
feat: Select 컴포넌트의 variant에 따라 분기되는 자식 요소를 구현합니다.
WonJuneKim Oct 25, 2025
3335c40
feat: Select와 자식 요소들을 스타일링합니다.
WonJuneKim Oct 25, 2025
af7cff5
feat: 순수 함수 구조의 select 상태를 관리하는 핸들러를 생성합니다.
WonJuneKim Oct 25, 2025
6443598
test: Select 컴포넌트의 스토리북 테스트 코드를 작성합니다.
WonJuneKim Oct 25, 2025
fecbb9f
feat: select 컴포넌트와 인터페이스를 export합니다.
WonJuneKim Oct 25, 2025
1ce780f
feat: input 컴포넌트 중 TextField 컴포넌트를 작성합니다.
WonJuneKim Oct 25, 2025
37aa8ad
feat: textField의 인터페이스를 선언합니다.
WonJuneKim Oct 25, 2025
d3027e1
feat: textField의 스타일링 코드를 작성합니다.
WonJuneKim Oct 25, 2025
5d046b5
feat: TextField의 구조를 최적화하기 위한 추가 wrapper를 생성합니다.
WonJuneKim Oct 25, 2025
e47432f
feat: TextField 스타일링 시 layout 값에 따라 다른 스타일링을 처리하도록 변경합니다.
WonJuneKim Oct 25, 2025
08cb551
test: TextField의 스토리북을 작성합니다.
WonJuneKim Oct 25, 2025
e9f5022
test: TextField의 요소들을 export 합니다.
WonJuneKim Oct 25, 2025
0b8f0a8
feat: SelectField 컴포넌트를 구현합니다.
WonJuneKim Oct 26, 2025
2f7c045
feat: SelectField를 스타일링 합니다.
WonJuneKim Oct 26, 2025
68ebf1b
feat: SelectField의 선택된 값을 추가 스타일링합니다.
WonJuneKim Oct 26, 2025
719f883
test: SelectField의 스토리북 코드를 작성합니다.
WonJuneKim Oct 26, 2025
9b54fda
feat: SelectField의 요소들을 export 합니다.
WonJuneKim Oct 26, 2025
93252b0
feat: 순환참조 문제가 발생할 수 있는 import문(경로가 축소된 import문)을 변경합니다.
WonJuneKim Oct 26, 2025
d8d9f67
feat: 순환참조 문제가 발생할 수 있는 스타일링 부분을 공용 부분과 공용이 아닌 부분으로 분할합니다.
WonJuneKim Oct 26, 2025
572af91
feat: Input 컴포넌트에서 공통으로 사용되는 스타일링 부분을 추출합니다.
WonJuneKim Oct 26, 2025
74a8a1b
feat: TagField 컴포넌트를 구현합니다.
WonJuneKim Oct 26, 2025
5cbc6ce
feat: TagField 컴포넌트를 구현합니다.
WonJuneKim Oct 26, 2025
beb2cc0
feat: Input 컴포넌트들의 공통되는 타입을 추출합니다.
WonJuneKim Oct 26, 2025
1254a51
feat: 공통 타입 추출에 영향을 받는 부분을 수정합니다.
WonJuneKim Oct 26, 2025
dd119ce
feat: disabled와 readOnly를 interaction props로 추상화합니다.
WonJuneKim Oct 26, 2025
32939c0
feat: TagField의 스타일링 코드를 작성합니다.
WonJuneKim Oct 26, 2025
ea51894
test: TagField의 스토리북 코드를 작성합니다.
WonJuneKim Oct 26, 2025
0b2bfd1
feat: input의 스타일 variant별로 interactionLayer의 매개변수를 분리합니다.
WonJuneKim Oct 27, 2025
d77b1ac
feat: input의 스타일 variant별로 interactionLayer의 매개변수를 분리합니다.
WonJuneKim Oct 27, 2025
88e78e6
feat: empty style일 때 레이아웃을 조정합니다.
WonJuneKim Oct 27, 2025
5fc9106
feat: empty 스타일일 때의 interactionLayer 매개변수를 명시적으로 분기합니다.
WonJuneKim Oct 27, 2025
80bcd1c
feat: SelectField에서 Button을 사용하는 확장 컴포넌트를 구현합니다.
WonJuneKim Oct 27, 2025
8d230ac
test: SelectField의 스토리북을 Button이 있는 형태가 기본이 되도록 합니다.
WonJuneKim Oct 27, 2025
9fbd9aa
feat: TagField에 버튼이 있는 확장형 컴포넌트를 구현합니다.
WonJuneKim Oct 27, 2025
868ec0e
test: TagField의 스토리북에 버튼이 있는 버전을 추가합니다.
WonJuneKim Oct 27, 2025
98f9b77
feat: Interaction props의 반환 값 네이밍을 변경합니다.
WonJuneKim Oct 28, 2025
5a4cc0f
feat: Icon의 색상을 별도 함수로 관리합니다.
WonJuneKim Oct 28, 2025
ce53de6
feat: 버튼형태가 추가된 Input 컴포넌트들을 export합니다.
WonJuneKim Oct 28, 2025
419ffdb
feat: TagField에 사용되는 비즈니스 로직 중 순수함수로 분리할 수 있는 로직을 추출합니다.
WonJuneKim Oct 28, 2025
73dec10
feat: TagField의 상태를 커스텀 훅을 통해서 관리합니다.
WonJuneKim Oct 28, 2025
b990a4c
refactor: TagField에 유틸리티 함수와 커스텀 훅을 적용시킵니다.
WonJuneKim Oct 28, 2025
8494524
feat: InputArea 컴포넌트를 구현합니다.
WonJuneKim Oct 31, 2025
57092e5
feat: InputArea의 스타일링 코드를 작성합니다.
WonJuneKim Oct 31, 2025
b971b8f
feat: InputArea의 높이를 props를 통해 조절하도록 변경합니다.
WonJuneKim Nov 1, 2025
5f8485a
feat: InputArea 중 textarea의 스타일링 방식을 변경합니다.
WonJuneKim Nov 1, 2025
703963a
test: InputArea의 스토리북 코드를 작성합니다.
WonJuneKim Nov 1, 2025
364c42e
feat: 구현한 InputArea 컴포넌트를 export합니다.
WonJuneKim Nov 1, 2025
5924cdb
feat: Input 관련 컴포넌트를 한번에 export합니다.
WonJuneKim Nov 1, 2025
ad23549
feat: component 단위에서 구현한 컴포넌트를 export합니다.
WonJuneKim Nov 1, 2025
e80c4fd
Merge branch 'dev' into feat/240-input-design-system
WonJuneKim Nov 1, 2025
0bcad4b
Merge branch 'dev' of github
WonJuneKim Nov 1, 2025
6d15338
feat: 수정된 토큰 네이밍에 맞춰서 스타일링 토큰 값을 변경합니다.
WonJuneKim Nov 1, 2025
8f14c79
Merge branch 'feat/240-input-design-system' of github.com:JECT-Study/…
WonJuneKim Nov 1, 2025
9339ae6
feat: 수정된 토큰 네이밍에 맞춰서 스타일링 토큰 값을 변경합니다.
WonJuneKim Nov 1, 2025
2d9780e
feat: InputArea가 기본적으로 유동적인 height를 가지도록 변경합니다.
WonJuneKim Nov 18, 2025
4f00ee9
feat: props로 받는 height, min-height는 wrapper의 길이에만 영향을 주도록 변경합니다.
WonJuneKim Nov 18, 2025
0632f70
test: 변경된 inputArea에 스토리북을 사용해 테스트 케이스를 작성합니다.
WonJuneKim Nov 18, 2025
cecc6f7
docs: 중복 작성되는 InteractionLayer의 매핑 객체의 개선 방향성을 작성합니다.
WonJuneKim Nov 18, 2025
dce1afe
feat: Icon에 색상이 적용되지 않는 문제를 container에 색상을 주입하여 해결합니다.
WonJuneKim Nov 18, 2025
9d3fa3a
feat: 선택 필드에 대한 Aria-role을 combobox로 변경합니다.
WonJuneKim Nov 18, 2025
a981c45
refactor: 폼 입력 필드(Input)를 사용하는 컴포넌트들을 관리하기 위한 Context를 구현합니다.
WonJuneKim Nov 19, 2025
7189ad8
refactor: TagField 에서 TagList와 TagItem을 별도의 presentation component로 분…
WonJuneKim Nov 19, 2025
9013bb6
refactor: 각 Input에서 폼 입력 필드를 구독할수 있도록 변경합니다.
WonJuneKim Nov 19, 2025
7c35bd1
Merge branch 'dev' of github.com:JECT-Study/JECT-Official-WebSite-Cli…
WonJuneKim Nov 19, 2025
6a0e8e5
feat: 변경된 토큰 값을 기존 스타일에 반영합니다.
WonJuneKim Nov 19, 2025
65b2e4f
feat: 변경된 토큰 값을 기존 스타일에 반영합니다.
WonJuneKim Nov 19, 2025
1c6523d
feat: Label 스타일에 HeroStyle을 import하고 있는 구간을 별도 선언으로 분리합니다.
WonJuneKim Nov 19, 2025
b200375
feat: Icon 컴포넌트의 type을 import해서 props의 type을 명시합니다.
WonJuneKim Nov 19, 2025
4934d3f
fix: deprecated된 토큰 타입을 주석 처리합니다.
WonJuneKim Nov 19, 2025
f86c76b
refactor: FormField의 결합도를 낮추고, 네이밍된 Field들을 케이스별 프리셋으로 사용합니다.
WonJuneKim Nov 20, 2025
fe7117a
feat: 레이블 내 아이콘 스타일링을 변경합니다.
WonJuneKim Nov 20, 2025
0fd6a94
feat: 레이블 내 아이콘 스타일링을 변경합니다.
WonJuneKim Nov 20, 2025
d249879
docs: textArea의 개선점을 작성합니다.
WonJuneKim Nov 20, 2025
a6e43b4
Merge branch 'dev' into feat/240-input-design-system
WonJuneKim Nov 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/jds/src/components/Badge/contentBadge/ContentBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 && (
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions packages/jds/src/components/Badge/numericBadge/NumericBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
Loading