Docs: 컴포넌트 mdx 문서 작성

docs/DateField.mdx

@@ -0,0 +1,65 @@
+## Title
+
+DateField
+
+## Description
+
+A reusable component for selecting dates, featuring a calendar popup and error handling.
+
+## Installation
+
+**optional**
+
+```bash
+npm i zod @hookform/resolvers
+```
+
+## Library
+
+- react-hook-form `<=^7.51.3`
+- zod, @hookform/resolvers (optional)
+
+## Anatomy
+
+- **`formMethod`** : Object containing form management methods and state from React Hook Form.
+- **`label`**: The label text displayed above the input field.
+- **`name`**: The unique identifier for the input field.
+- **`days`**: The number of days to calculate disabled date ranges.
+- **`color`**(optional): The color theme for the input field. It can be `'yellow' | 'purple'`, defaulting to `'yellow'`.
+
+## Usage
+
+```tsx
+import { DateField } from 'ggf-ui';
+import { FormProvider, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod'; // optional
+import { z } from 'zod'; // optional
+```
+
+```tsx
+const Schema = z.object({
+  DateField: z.string().min(1),
+}); // optional
+
+const methods = useForm({
+  mode: 'all',
+  resolver: zodResolver(Schema), // optional
+});
+
+const onSubmit = (data: object) => {
+  console.log(data);
+};
+
+return (
+  <FormProvider {...methods}>
+    <form onSubmit={methods.handleSubmit(onSubmit)}>
+      <DateField formMethod={methods} label='DateField' name='DateField' days={20} />
+      <button>Submit</button>
+    </form>
+  </FormProvider>
+);
+```
+
+## UI
+
+<img src='https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/globalnomad/activity_registration_image/2-3_116_1714031195941.png' />

docs/FormDropdown.mdx

@@ -0,0 +1,74 @@
+## Title
+
+FormDropdown
+
+## Description
+
+A customizable dropdown menu for forms, allowing users to select from a list of options.
+
+## Installation
+
+**optional**
+
+```bash
+npm i zod @hookform/resolvers
+```
+
+## Library
+
+- react-hook-form `<=^7.51.3`
+- zod, @hookform/resolvers (optional)
+
+## Anatomy
+
+- **`formMethod`** : Object containing form management methods and state from React Hook Form.
+- **`name`**: The unique identifier for the dropdown input.
+- **`label`** (optional): The text label displayed above the dropdown.
+- **`options`**: An array of objects representing the dropdown options.
+  - **`title`**: The text to be displayed on option.
+  - **`value`**: The value of option.
+- **`isSmall`** (optional): A boolean indicating whether the dropdown should be rendered in a smaller size.
+- **`isDisabled`** (optional): A boolean indicating whether the dropdown should be disabled.
+- **`color`** (optional): The color theme for the dropdown. It can be `'purple' | 'yellow'`. Defaults to `'purple'`
+
+## Usage
+
+```tsx
+import { FormDropdown } from 'ggf-ui';
+import { FormProvider, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod'; // optional
+import { z } from 'zod'; // optional
+```
+
+```tsx
+const Schema = z.object({
+  formdropdown: z.number().min(1),
+}); // optional
+
+const methods = useForm({
+  mode: 'all',
+  resolver: zodResolver(Schema), // optional
+});
+
+const options = [
+  { title: 'number 1', value: 1 },
+  { title: 'number 2', value: 2 },
+];
+
+const onSubmit = (data: object) => {
+  console.log(data);
+};
+
+return (
+  <FormProvider {...methods}>
+    <form onSubmit={methods.handleSubmit(onSubmit)}>
+      <FormDropdown name='FormDropdown' options={options} />
+      <button>Submit</button>
+    </form>
+  </FormProvider>
+);
+```
+
+## UI
+
+<img src='https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/globalnomad/activity_registration_image/2-3_116_1714033368085.png' />

docs/ImageField.mdx

@@ -0,0 +1,42 @@
+## Title
+
+ImageField
+
+## Description
+
+The ImageField component allows users to upload images with customizable features such as maximum file size, maximum number of files, and visual representations of the uploaded images. It provides a dropzone area for dragging and dropping files, along with a list of uploaded files with options for deletion.
+
+## Anatomy
+
+- **`label`**: The label displayed above the ImageField component.
+- **`modalTitle`**: The title of the confirmation modal displayed when file upload exceeds limits.
+- **`modalState`**: The state of the confirmation modal.
+- **`modalDescription`**: The description text displayed in the confirmation modal.
+- **`modalButtonMessage`**: The message displayed on the confirmation modal button.
+- **`onFilesUpdate`**: A function to update the list of files after upload or deletion.
+- **`maxMB`** (optional): The maximum file size allowed for upload, in `megabytes`. Defaults to `50MB`.
+- **`maxFiles`** (optional): The maximum number of files allowed for upload. Defaults to `5` files.
+- **`recommendMessage`** (optional): Additional recommendation message displayed next to the label.
+- **`dropzoneMessage`** (optional): The message displayed within the dropzone area for uploading files.
+- **`onFileDelete`** (optional): A function to be executed when a file is deleted.
+
+## Usage
+
+```tsx
+import { ImageField } from 'ggf-ui';
+```
+
+```tsx
+<ImageField
+  label='Upload Images'
+  modalTitle='File Upload Exceeded'
+  modalState='exceeded'
+  modalDescription='You have exceeded the maximum file size or number of files allowed.'
+  modalButtonMessage='OK'
+  onFilesUpdate={handleFilesUpdate}
+/>
+```
+
+## Storybook
+
+[https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/inputs-imagefield--example&globals=backgrounds.value:!hex(333333)](<https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/inputs-imagefield--example&globals=backgrounds.value:!hex(333333)>)

docs/InputField.mdx

@@ -0,0 +1,71 @@
+## Title
+
+InputField
+
+## Description
+
+The InputField component provides a versatile input field with customizable options such as label, type, color, error visibility, length limits, and password visibility toggle. It is designed to seamlessly integrate with forms and handle various input types including text, email, and password.
+
+## Installation
+
+**optional**
+
+```bash
+npm i zod @hookform/resolvers
+```
+
+## Library
+
+- react-hook-form `<=^7.51.3`
+- zod, @hookform/resolvers (optional)
+
+## Anatomy
+
+- **`name`**: The unique identifier for the input field.
+- **`label`** (optional): The label displayed above the input field.
+- **`type`** (optional): Specifies the type of input field. It can be `'text' | 'email' | 'password'`. Defaults to `'text'`.
+- **`color`** (optional): Specifies the color theme of the input field. It can be `'yellow' | 'purple'`. Defaults to `'purple'`.
+- **`isErrorVisible`** (optional): A boolean indicating whether the error message should be visible. Defaults to `false`.
+- **`isLimited`** (optional): A boolean indicating whether the input length is limited. Defaults to `false`.
+- **`isDisabled`** (optional): A boolean indicating whether the input field should be disabled. Defaults to `false`.
+- **`maxLength`** (optional): The maximum length allowed for input. Defaults to `10`.
+- **`minLength`** (optional): The minimum length required for input. Defaults to `1`.
+- **`readOnly`** (optional): A boolean indicating whether the input field should be read-only. Defaults to `false`.
+- **`autoComplete`** (optional): Specifies whether the browser should automatically complete the input value. Can be `'on' | 'off'`. Defaults to `'on'`.
+
+## Usage
+
+```tsx
+import { InputField } from 'ggf-ui';
+import { FormProvider, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod'; // optional
+import { z } from 'zod'; // optional
+```
+
+```tsx
+const Schema = z.object({
+  InputField: z.string().min(1),
+}); // optional
+
+const methods = useForm({
+  mode: 'all',
+  resolver: zodResolver(Schema), // optional
+});
+
+const onSubmit = (data: object) => {
+  console.log(data);
+};
+
+return (
+  <FormProvider {...methods}>
+    <form onSubmit={methods.handleSubmit(onSubmit)}>
+      <InputField formMethod={methods} name='InputField' label='InputField' />
+      <button>Submit</button>
+    </form>
+  </FormProvider>
+);
+```
+
+## UI
+
+<img src='https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/globalnomad/activity_registration_image/2-3_116_1714046588623.png' />

docs/InputRadio.mdx

@@ -0,0 +1,66 @@
+## Title
+
+InputRadio
+
+## Description
+
+The InputRadio component provides a set of radio buttons for selecting a single option from a list. It allows users to choose from a predefined set of options and captures the selected value for form submission or data processing.
+
+## Library
+
+- react-hook-form `<=^7.51.3`
+
+## Anatomy
+
+- **`formMethod`**: An object containing the form methods provided by React Hook Form, including the register function.
+- **`label`**: The label displayed above the radio button group.
+- **`name`**: The unique identifier for the radio button group.
+- **`radioList`**: An array of objects representing each radio button option. Each object contains:
+  - **`id`**: The unique identifier for the radio button.
+  - **`value`**: The value associated with the radio button.
+  - **`label`**: The text label displayed next to the radio button.
+- **`defaultCheckIndex`** (optional): The index of the option in the radioList array that should be checked by default. Defaults to `0`.
+- **`color`** (optional): Specifies the color theme of the radio buttons. It can be `'yellow' | 'purple'`. Defaults to `'purple'`.
+- **`onClick`** (optional): A function called when a radio button is clicked. It receives the value of the selected option as a parameter.
+
+## Usage
+
+```tsx
+import { InputRadio } from 'ggf-ui';
+import { FormProvider, useForm } from 'react-hook-form';
+```
+
+```tsx
+const methods = useForm({
+  mode: 'all',
+});
+
+const onSubmit = (data: object) => {
+  console.log(data);
+};
+
+return (
+  <FormProvider {...methods}>
+    <form onSubmit={methods.handleSubmit(onSubmit)}>
+      <InputRadio
+        formMethod={methods}
+        label='Gender'
+        name='InputRadio'
+        radioList={[
+          { id: '0', value: 0, label: '0' },
+          { id: '1', value: 1, label: '1' },
+          { id: '2', value: 2, label: '2' },
+        ]}
+        defaultCheckIndex={0}
+        color='purple'
+        onClick={(value) => onClick(value)}
+      />
+      <button>Submit</button>
+    </form>
+  </FormProvider>
+);
+```
+
+## UI
+
+<img src='https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/globalnomad/activity_registration_image/2-3_116_1714051105390.png' />

docs/SearchBar.mdx

@@ -0,0 +1,28 @@
+## Title
+
+SearchBar
+
+## Description
+
+The SearchBar component provides a search input field with an accompanying search icon for users to enter search queries. It allows users to input text and trigger a search action by pressing the Enter key or clicking the search icon.
+
+## Anatomy
+
+- **`placeholder`**: The placeholder text displayed in the search input field.
+- **`onChange`**: A function called whenever the value in the search input field changes. It receives the new value as a parameter.
+- **`color`** (optional): Specifies the color theme of the search input field. It can be `'yellow' | 'purple'`. Defaults to `'purple'`.
+- **`maxLength`** (optional): The maximum number of characters allowed in the search input field. Defaults to `20`.
+
+## Usage
+
+```tsx
+import { SearchBar } from 'ggf-ui';
+```
+
+```tsx
+<SearchBar placeholder='Search...' onChange={(value) => onChange(value)} color='purple' maxLength={20} />
+```
+
+## Storybook
+
+[https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/inputs-searchbar--example&globals=backgrounds.value:!hex(333333)](<https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/inputs-searchbar--example&globals=backgrounds.value:!hex(333333)>)