0.3.0 버전 배포 (#8)

* remove: Back, Logo 컴포넌트 삭제

컨셉비 본 레포에서 useNavigate를 활용하여 구현하여 사용한다.

* chore: 로컬서버 테스트 공간 설계

* refactor: Dropdown 컴포넌트 관심사 분리 및 로직 리팩토링

* refactor: checkbox item 타입 서버와 동기화 및 id 안정성 증진

* refactor: radio item 타입 서버와 동기화 및 id 안정성 증진

* refactor: 불필요한 DropdownItem interface 수정

* feat: useDropdown 커스텀 훅 구현

* chore: 컴포넌트 테스트

* refactor: checkbox 오탈자 수정

* refactor: root Wrapper 네이밍 통일

* chore: 테스트환경 스타일링 통일을 위한 reset.css 적용

* refactor: Field 컴포넌트 컨텍스트 적용으로 중복 props 제거

* rename: useInput -> useField로 네이밍 변경

* refactor: maxLength context 프로퍼티 추가

* refactor: useCallback 일괄 적용

* design: 에러메세지가 없을 경우 에러메세지 공간을 제거하도록 변경

* chore: 컴포넌트 테스트

* chore: 0.3.0 버전 배포

README.md

@@ -24,16 +24,229 @@ const App = ({ children }) => {
 
 ## 사용 방법
 
-다음과 같이 사용할 수 있습니다.
+### 컴포넌트
+
+Button 컴포넌트는 다음과 같이 사용할 수 있습니다.
 
 ```jsx
 import { Button } from 'concept-be-design-system';
 
-function Component() {
+function SomeComponent() {
   return <Button>ConceptBe</Button>;
 }
 ```
 
+Text 컴포넌트는 다음과 같이 사용할 수 있습니다.
+
+```jsx
+import { Text } from 'concept-be-design-system';
+
+function SomeComponent() {
+  return (
+    <Text font="suit14m" color="b4">
+      ConceptBe
+    </Text>
+  );
+}
+```
+
+(중략)
+
+### 훅
+
+Field 컴포넌트와 useField 훅은 다음과 같이 사용할 수 있습니다.
+
+```jsx
+import { Field, useField } from 'concept-be-design-system';
+
+function SomeComponent() {
+  const { fieldValue, fieldErrorValue, onChangeField } =
+    useField<{
+      nickName: string;
+      intro: string;
+    }>({
+      nickName: '',
+      intro: '',
+    });
+
+  const validateInput = () => {
+    return [
+      {
+        regexp: /[~!@#$%";'^,&*()_+|</>=>`?:{[\]}]/g,
+        name: 'nickName',
+        errorMessage: '사용 불가한 닉네임입니다.',
+      },
+    ];
+  };
+
+  return (
+    <form>
+      <Field
+        label="닉네임"
+        value={fieldValue.nickName}
+        maxLength={10}
+        isRequired
+      >
+        <Field.Input
+          name="nickName"
+          onChange={onChangeField}
+          onValidate={validateInput}
+          placeholder="닉네임을 입력해주세요"
+          errorMessage={fieldErrorValue.nickName}
+          successMessage="사용 가능한 닉네임입니다."
+        />
+      </Field>
+
+      <Field label="자기소개" value={fieldValue.intro} maxLength={150}>
+        <Field.Textarea
+          name="intro"
+          onChange={onChangeField}
+          onValidate={validateInput}
+          placeholder="자기소개를 입력해 주세요. (최대 150자)"
+          errorMessage={fieldErrorValue.intro}
+        />
+      </Field>
+    </form>
+  );
+}
+```
+
+CheckboxContainer 컴포넌트와 useCheckbox 훅은 다음과 같이 사용할 수 있습니다.
+
+```jsx
+import { CheckboxContainer, useCheckbox } from 'concept-be-design-system';
+
+function SomeComponent() {
+  const { checkboxValue, onChangeCheckBox } = useCheckbox<{
+    name: FilterOption[];
+    skill: FilterOption[];
+  }>({
+    name: nameOptions,
+    skill: skillOptions,
+  });
+
+  return (
+    <form>
+      <CheckboxContainer
+        nameKey="name"
+        options={checkboxValue.name}
+        onChange={(e) => onChangeCheckBox(e, 'name')}
+      />
+      <CheckboxContainer
+        nameKey="skill"
+        options={checkboxValue.skill}
+        onChange={(e) =>
+          onChangeCheckBox(e, 'skill', {
+            checkboxKey: 'skill',
+            maxValue: 3,
+          })
+        }
+      />
+    </form>
+  )
+}
+```
+
+RadioContainer 컴포넌트와 useRadio 훅은 다음과 같이 사용할 수 있습니다.
+
+```jsx
+import { RadioContainer, useRadio } from 'concept-be-design-system';
+
+function SomeComponent() {
+  const { radioValue, onChangeRadio } = useRadio<{
+    name: FilterOption[];
+    skill: FilterOption[];
+  }>({
+    name: nameOptions,
+    skill: skillOptions,
+  });
+
+  return (
+    <form>
+      <RadioContainer
+        nameKey="name"
+        options={radioValue.name}
+        onChange={(e) => onChangeRadio(e, 'name')}
+      />
+      <RadioContainer
+        nameKey="skill"
+        options={radioValue.skill}
+        onChange={(e) =>
+          onChangeRadio(e, 'skill', {
+            checkboxKey: 'skill',
+            maxValue: 3,
+          })
+        }
+      />
+    </form>
+  )
+}
+```
+
+Dropdown 컴포넌트와 useDropdown 훅은 다음과 같이 사용할 수 있습니다.
+
+```jsx
+import { useEffect } from 'react';
+import { Dropdown, useDropdown } from 'concept-be-design-system';
+
+function SomeComponent() {
+  const { dropdownValue, onResetDropdown, onClickDropdown } = useDropdown<{
+    see: string;
+    do: string;
+  }>({
+    see: '',
+    do: '',
+  });
+
+  useEffect(() => {
+    if (dropdownValue.do !== '') {
+      onResetDropdown('see');
+      onResetDropdown('do');
+    }
+  }, [dropdownValue, onResetDropdown]);
+
+  return (
+    <form>
+      <Dropdown
+        selectedValue={dropdownValue.see}
+        initialValue="시/도/광역시"
+        disabled={false}
+      >
+        {regionOptions.map(({ id, name }) => (
+          <Dropdown.Item
+            key={id}
+            value={name}
+            onClick={(value) => {
+              onClickDropdown(value, 'see');
+            }}
+          >
+            {name}
+          </Dropdown.Item>
+        ))}
+      </Dropdown>
+
+      <Dropdown
+        selectedValue={dropdownValue.do}
+        initialValue="시/도/광역시"
+        disabled={false}
+      >
+        {regionOptions.map(({ id, name }) => (
+          <Dropdown.Item
+            key={id}
+            value={name}
+            onClick={(value) => {
+              onClickDropdown(value, 'do');
+            }}
+          >
+            {name}
+          </Dropdown.Item>
+        ))}
+      </Dropdown>
+    </form>
+  )
+}
+```
+
 ## 문서
 
 추후 업데이트 예정

package.json

@@ -1,7 +1,7 @@
 {
   "name": "concept-be-design-system",
   "description": "콘셉비 디자인 시스템",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",