diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..475e7bc
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ConceptBe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
index f12eec2..39765da 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# conceptbe-design-system
-컨셉비 디자인 시스템
+[컨셉비](https://github.com/ConceptBe/conceptbe-frontend)에서 사용하는 디자인 시스템입니다.
## 설치 방법
@@ -20,29 +20,38 @@ ConceptBeProvider를 프로젝트 루트에 감싸주세요.
```jsx
import { ConceptBeProvider } from 'concept-be-design-system';
+import { createRoot } from 'react-dom/client';
-const App = ({ children }) => {
- return {children};
-};
+import App from './App.tsx';
+
+createRoot(document.getElementById('root')!).render(
+
+
+
+);
```
## 사용 방법
### 컴포넌트
-자세한 내용은 [스토리북](https://65a04fca8611ba47d7f8b115-bdybhmnomg.chromatic.com/)에서 확인하세요.
+자세한 내용은 [스토리북](https://65a04fca8611ba47d7f8b115-dqgporpvoy.chromatic.com/)에서 확인해 주세요.
-Button 컴포넌트는 다음과 같이 사용할 수 있습니다.
+예를 들어, Button 컴포넌트는 다음과 같이 사용할 수 있습니다.
```jsx
import { Button } from 'concept-be-design-system';
function SomeComponent() {
- return ;
+ return (
+
+ );
}
```
-Text 컴포넌트는 다음과 같이 사용할 수 있습니다.
+예를 들어, Text 컴포넌트는 다음과 같이 사용할 수 있습니다.
```jsx
import { Text } from 'concept-be-design-system';
@@ -56,20 +65,27 @@ function SomeComponent() {
}
```
-(중략)
+이하 생략.
### 훅
-Field 컴포넌트와 useField 훅은 다음과 같이 사용할 수 있습니다.
+아래 훅들은 **하나의 Form 당 하나의 훅을 사용하면 됩니다.** Form에서 여러 개의 분리된 상태를 하나의 통합된 상태로 관리하는 것에 목적이 있습니다. 따라서 Field, CheckboxContainer, RadioContainer, Dropdown 컴포넌트는 각각 useField, useCheckbox, useRadio, useDropdown와 같이 사용하도록 설계되어 있습니다.
-```ts
+만일 해당 훅들을 사용하지 않고 직접 상태 관리를 하고자 한다면, 각 컴포넌트의 item에 해당하는 Input, Textarea, Checkbox, Radio 컴포넌트와 Text 컴포넌트를 조합하여 작성할 수 있습니다. 단, Dropdown 컴포넌트는 설계 구조상 직접 작성을 지원하지 않습니다.
+
+> Field 컴포넌트와 useField 훅은 다음과 같이 사용할 수 있습니다.
+
+```tsx
import { Field, useField } from 'concept-be-design-system';
+import { post } from 'somewhere';
+
+interface Field {
+ nickName: string;
+ intro: string;
+}
function SomeComponent() {
- const { fieldValue, fieldErrorValue, onChangeField } = useField<{
- nickName: string;
- intro: string;
- }>({
+ const { fieldValue, fieldErrorValue, onChangeField } = useField({
nickName: '',
intro: '',
});
@@ -78,14 +94,27 @@ function SomeComponent() {
return [
{
validateFn: (value: string) =>
- /[~!@#$%";'^,&*()_+|=>`?:{[\]}]/g.test(value),
+ /[~!@#$%";'^,&*()_+|=>`?:{[\]}\s]/g.test(value),
errorMessage: '사용 불가한 소개입니다.',
},
+ {
+ validateFn: (value: string) => value.length < 2,
+ errorMessage: '최소 두 글자 이상 작성해야 합니다.',
+ },
];
};
+ const onSubmitForm = (e: React.FormEvent) => {
+ e.preventDefault();
+
+ post({
+ nickname: fieldValue.nickName,
+ intro: fieldValue.intro,
+ });
+ };
+
return (
-