Skip to content
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.

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

0.4.0 버전 배포 #11

Merged
merged 14 commits into from
Jan 12, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
136 changes: 75 additions & 61 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const App = ({ children }) => {

### 컴포넌트

자세한 내용은 [스토리북](https://65a04fca8611ba47d7f8b115-jlefxghrma.chromatic.com/)에서 확인하세요.
자세한 내용은 [스토리북](https://65a04fca8611ba47d7f8b115-bdybhmnomg.chromatic.com/)에서 확인하세요.

Button 컴포넌트는 다음과 같이 사용할 수 있습니다.

Expand Down Expand Up @@ -62,25 +62,24 @@ function SomeComponent() {

Field 컴포넌트와 useField 훅은 다음과 같이 사용할 수 있습니다.

```jsx
```ts
import { Field, useField } from 'concept-be-design-system';

function SomeComponent() {
const { fieldValue, fieldErrorValue, onChangeField } =
useField<{
nickName: string;
intro: string;
}>({
nickName: '',
intro: '',
});
const { fieldValue, fieldErrorValue, onChangeField } = useField<{
nickName: string;
intro: string;
}>({
nickName: '',
intro: '',
});

const validateInput = () => {
return [
{
regexp: /[~!@#$%";'^,&*()_+|</>=>`?:{[\]}]/g,
name: 'nickName',
errorMessage: '사용 불가한 닉네임입니다.',
validateFn: (value: string) =>
/[~!@#$%";'^,&*()_+|</>=>`?:{[\]}]/g.test(value),
errorMessage: '사용 불가한 소개입니다.',
},
];
};
Expand All @@ -90,26 +89,29 @@ function SomeComponent() {
<Field
label="닉네임"
value={fieldValue.nickName}
onChange={onChangeField}
onValidate={validateNickname}
maxLength={10}
isRequired
required
>
<Field.Input
name="nickName"
onChange={onChangeField}
onValidate={validateInput}
name="nickname"
placeholder="닉네임을 입력해주세요"
errorMessage={fieldErrorValue.nickName}
errorValue={fieldErrorValue.nickName}
successMessage="사용 가능한 닉네임입니다."
/>
</Field>

<Field label="자기소개" value={fieldValue.intro} maxLength={150}>
<Field
label="자기소개"
value={fieldValue.intro}
onChange={onChangeField}
maxLength={150}
>
<Field.Textarea
name="intro"
onChange={onChangeField}
onValidate={validateInput}
placeholder="자기소개를 입력해 주세요. (최대 150자)"
errorMessage={fieldErrorValue.intro}
errorValue={fieldErrorValue.intro}
/>
</Field>
</form>
Expand All @@ -119,34 +121,39 @@ function SomeComponent() {

CheckboxContainer 컴포넌트와 useCheckbox 훅은 다음과 같이 사용할 수 있습니다.

```jsx
```ts
import { CheckboxContainer, useCheckbox } from 'concept-be-design-system';

interface FilterOption {
id: number;
name: string;
checked: boolean;
}

function SomeComponent() {
const { checkboxValue, onChangeCheckBox } = useCheckbox<{
name: FilterOption[];
goal: FilterOption[];
skill: FilterOption[];
}>({
name: nameOptions,
goal: goalOptions,
skill: skillOptions,
});

return (
<form>
<CheckboxContainer
nameKey="name"
options={checkboxValue.name}
onChange={(e) => onChangeCheckBox(e, 'name')}
label="가입 목적"
checkboxKey="goal"
options={checkboxValue.goal}
onChange={onChangeCheckbox}
/>
<CheckboxContainer
nameKey="skill"
label="스킬 선택"
checkboxKey="skill"
options={checkboxValue.skill}
onChange={(e) =>
onChangeCheckBox(e, 'skill', {
checkboxKey: 'skill',
maxValue: 3,
})
}
onChange={onChangeCheckbox}
maxCount={3}
required
/>
</form>
)
Expand All @@ -155,31 +162,38 @@ function SomeComponent() {

RadioContainer 컴포넌트와 useRadio 훅은 다음과 같이 사용할 수 있습니다.

```jsx
```ts
import { RadioContainer, useRadio } from 'concept-be-design-system';

interface FilterOption {
id: number;
name: string;
checked: boolean;
}

function SomeComponent() {
const { radioValue, onChangeRadio } = useRadio<{
name: FilterOption[];
collaboration: FilterOption[];
skill: FilterOption[];
}>({
name: nameOptions,
skill: skillOptions,
collaboration: collaborationOptions,
mainSkill: mainSkillOptions,
});

return (
<form>
<RadioContainer
nameKey="name"
options={radioValue.name}
onChange={(e) => onChangeRadio(e, 'name')}
label="협업 방식"
radioKey="collaboration"
options={radioValue.collaboration}
onChange={onChangeRadio}
required
/>
<RadioContainer
nameKey="skill"
options={radioValue.skill}
onChange={(e) =>
onChangeRadio(e, 'skill')
}
label="대표 스킬"
radioKey="mainSkill"
options={radioValue.mainSkill}
onChange={onChangeRadio}
/>
</form>
)
Expand All @@ -188,30 +202,30 @@ function SomeComponent() {

Dropdown 컴포넌트와 useDropdown 훅은 다음과 같이 사용할 수 있습니다.

```jsx
```ts
import { useEffect } from 'react';
import { Dropdown, useDropdown } from 'concept-be-design-system';

function SomeComponent() {
const { dropdownValue, onResetDropdown, onClickDropdown } = useDropdown<{
see: string;
do: string;
region: string;
detail: string;
}>({
see: '',
do: '',
region: '',
detail: '',
});

useEffect(() => {
if (dropdownValue.do !== '') {
onResetDropdown('see');
onResetDropdown('do');
if (dropdownValue.detail !== '') {
onResetDropdown('region');
onResetDropdown('detail');
}
}, [dropdownValue, onResetDropdown]);

return (
<form>
<Dropdown
selectedValue={dropdownValue.see}
selectedValue={dropdownValue.region}
initialValue="시/도/광역시"
disabled={false}
>
Expand All @@ -220,7 +234,7 @@ function SomeComponent() {
key={id}
value={name}
onClick={(value) => {
onClickDropdown(value, 'see');
onClickDropdown(value, 'region');
}}
>
{name}
Expand All @@ -229,7 +243,7 @@ function SomeComponent() {
</Dropdown>

<Dropdown
selectedValue={dropdownValue.do}
selectedValue={dropdownValue.detail}
initialValue="시/도/광역시"
disabled={false}
>
Expand All @@ -238,7 +252,7 @@ function SomeComponent() {
key={id}
value={name}
onClick={(value) => {
onClickDropdown(value, 'do');
onClickDropdown(value, 'detail');
}}
>
{name}
Expand All @@ -250,9 +264,9 @@ function SomeComponent() {
}
```

## 문서
## 링크

- [스토리북](https://65a04fca8611ba47d7f8b115-jlefxghrma.chromatic.com/)
- [스토리북](https://65a04fca8611ba47d7f8b115-bdybhmnomg.chromatic.com/)

## 기여

Expand Down
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "concept-be-design-system",
"description": "컨셉비 디자인 시스템",
"version": "0.3.9",
"version": "0.4.0",
"type": "module",
"main": "dist/index.js",
"module": "dist/index.js",
Expand Down
Loading