Docs: 컴포넌트들 mdx 작성

docs/Alarm.mdx

@@ -0,0 +1,28 @@
+## Title
+
+Alarm
+
+## Description
+
+An interactive indicator that visually represents alarm status and allows users to toggle alarm activation through user interaction.
+
+## Anatomy
+
+- **`isAlarmExisted`** : Boolean flag to indicate whether an alarm is currently set.
+- **`isActivated`** : Boolean flag to indicate whether the alarm is active and alerting.
+- **`onClick`** : Function to handle click events on the alarm, typically used to toggle the alarm state.
+- **`alarmRef`** (optional): React ref object attached to the button element for direct DOM manipulation or access.
+
+## Usage
+
+```tsx
+import { Alarm } from 'ggf-ui';
+```
+
+```tsx
+<Alarm isAlarmExisted={true} isActivated={true} onClick={onClick} alarmRef={alarmRef} />
+```
+
+## Storybook
+
+[https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/alarm-alarm--example&globals=backgrounds.value:!hex(333333)](<https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/alarm-alarm--example&globals=backgrounds.value:!hex(333333)>)

docs/AlarmCard.mdx

@@ -0,0 +1,28 @@
+## Title
+
+AlarmCard
+
+## Description
+
+A component that displays an alarm's details and provides an interactive delete button with hover effects.
+
+## Anatomy
+
+- **`id`** : A unique identifier for the alarm card, used to handle specific actions.
+- **`content`** : Text content displayed on the card, representing the alarm's description or details.
+- **`createdAt`** : String indicating the alarm's creation time, displayed at the card's bottom.
+- **`onClick`** : Function triggered when the delete button is clicked, taking the alarm's **`id`** as an argument to identify which alarm to delete.
+
+## Usage
+
+```tsx
+import { AlarmCard } from 'ggf-ui';
+```
+
+```tsx
+<AlarmCard id={1} content='Alarm content here' createdAt='2024-04-24 10:00 AM' onClick={onClick} />
+```
+
+## Storybook
+
+[https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/cards-alarmcard--example&globals=backgrounds.value:!hex(333333)](<https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/cards-alarmcard--example&globals=backgrounds.value:!hex(333333)>)

docs/AlarmList.mdx

@@ -0,0 +1,46 @@
+## Title
+
+AlarmList
+
+## Description
+
+A component for displaying a list of alarm notifications, including options to delete individual alarms or all alarms.
+
+## Anatomy
+
+- **`alarmText`**: Text indicating the purpose or category of the alarms.
+- **`deleteAllText`**: Text displayed on the button to delete all alarms.
+- **`notifications`**: Array of objects representing individual alarm notifications, each containing:
+  - **`id`**: Unique identifier for the alarm.
+  - **`content`**: Description or details of the alarm.
+  - **`createdAt`**: Time stamp of when the alarm was created.
+- **`totalCount`**: Total count of alarms in the list.
+- **`handleDelete`**: Function triggered when an alarm is deleted, taking the alarm's ID as an argument.
+- **`handleDeleteAll`**: Function triggered when the button to delete all alarms is clicked.
+- **`emptyAlarmText`**: Text displayed when there are no alarms to show.
+- **`alarmListRef`** (optional): React ref object attached to the **`<div>`** element wrapping the alarm list.
+
+## Usage
+
+```tsx
+import { AlarmList } from 'ggf-ui';
+```
+
+```tsx
+<AlarmList
+  alarmText='Current Alarms:'
+  deleteAllText='Delete All'
+  notifications={[
+    { id: 1, content: 'Alarm 1', createdAt: '2024-04-24 10:00 AM' },
+    { id: 2, content: 'Alarm 2', createdAt: '2024-04-25 11:00 AM' },
+  ]}
+  totalCount={2}
+  handleDelete={handleDelete}
+  handleDeleteAll={handleDeleteAll}
+  emptyAlarmText='No alarms to display'
+/>
+```
+
+## Storybook
+
+[https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/alarmlist-alarmlist--example&globals=backgrounds.value:!hex(333333)](<https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/alarmlist-alarmlist--example&globals=backgrounds.value:!hex(333333)>)

docs/Avatar.mdx

@@ -0,0 +1,27 @@
+## Title
+
+Avatar
+
+## Description
+
+A component for displaying user avatars with optional activation.
+
+## Anatomy
+
+- **`profileImageUrl`**: URL of the user's profile image.
+- **`size`** (optional): Sets the size of the avatar. Can be `'small' | 'medium' | 'large'` Defaults to 'medium'.
+- **`isActivated`** (optional): Boolean indicating whether the avatar is activated.
+
+## Usage
+
+```tsx
+import { Avatar } from 'ggf-ui';
+```
+
+```tsx
+<Avatar profileImageUrl='url/to/profile/image.jpg' size='small' isActivated={true} />
+```
+
+## Storybook
+
+[https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/avatar-avatar--example&globals=backgrounds.value:!hex(333333)](<https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/avatar-avatar--example&globals=backgrounds.value:!hex(333333)>)

docs/DrawerMenu.mdx

@@ -0,0 +1,35 @@
+## Title
+
+DrawerMenu
+
+## Description
+
+A component for displaying a drawer menu with a list of menu items and a close button.
+
+## Anatomy
+
+- **`menuList`**: An array of objects representing menu items, each containing:
+  - **`menu`**: Text representing the menu item.
+  - **`path`**: URL path associated with the menu item.
+- **`onClick`**: Function triggered when a menu item or the close button is clicked.
+
+## Usage
+
+```tsx
+import { DrawerMenu } from 'ggf-ui';
+```
+
+```tsx
+<DrawerMenu
+  menuList={[
+    { menu: 'Home', path: '/' },
+    { menu: 'About', path: '/about' },
+    // Add more menu items as needed
+  ]}
+  onClick={onClick}
+/>
+```
+
+## Storybook
+
+[https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/drawermenu-drawermenu--example&globals=backgrounds.value:!hex(333333)](<https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/drawermenu-drawermenu--example&globals=backgrounds.value:!hex(333333)>)

docs/EmptyAlarmCard.mdx

@@ -0,0 +1,25 @@
+## Title
+
+EmptyAlarmCard
+
+## Description
+
+A component for displaying an empty state message in the alarm list when there are no alarms.
+
+## Anatomy
+
+• **`emptyAlarmText`**: Text message to be displayed when there are no alarms.
+
+## Usage
+
+```tsx
+import { EmptyAlarmCard } from 'ggf-ui';
+```
+
+```tsx
+<EmptyAlarmCard emptyAlarmText='No alarms to display' />
+```
+
+## Storybook
+
+[https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/alarm-alarm--example&globals=backgrounds.value:!hex(333333)](<https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/alarm-alarm--example&globals=backgrounds.value:!hex(333333)>)

docs/Header.mdx

@@ -0,0 +1,46 @@
+## Title
+
+Header
+
+## Description
+
+A header component containing a logo, menu button, and optional children elements.
+
+## Anatomy
+
+- **`path`**: URL path associated with the logo link.
+- **`logoName`**: Text or image representing the logo.
+- **`menuList`**: An array of objects representing menu items, each containing:
+  - **`menu`**: Text representing the menu item.
+  - **`path`**: URL path associated with the menu item.
+- **`activatedMenu`**: Index of the currently activated menu item.
+- **`handleActivatedMenu`**: Function triggered when a menu item is activated.
+- **`handleOpenDrawerMenu`**: Function triggered when the drawer menu button is clicked.
+- **`children`** (optional): React elements to be displayed in the header.
+
+## Usage
+
+```tsx
+import { Header } from 'ggf-ui';
+```
+
+```tsx
+<Header
+  path='/'
+  logoName='Your Logo'
+  menuList={[
+    { menu: 'Home', path: '/' },
+    { menu: 'About', path: '/about' },
+    // Add more menu items as needed
+  ]}
+  activatedMenu={0}
+  handleActivatedMenu={handleActivatedMenu}
+  handleOpenDrawerMenu={handleOpenDrawerMenu}
+>
+  {/* Optional children elements */}
+</Header>
+```
+
+## Storybook
+
+[https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/header-header--example&globals=backgrounds.value:!hex(333333)](<https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/header-header--example&globals=backgrounds.value:!hex(333333)>)

docs/HeaderProfile.mdx

@@ -0,0 +1,29 @@
+## Title
+
+HeaderProfile
+
+## Description
+
+A component representing the user profile section in the header, including the user's nickname and profile image.
+
+## Anatomy
+
+- **`nickname`**: The user's nickname to be displayed.
+- **`profileImageUrl`**: URL of the user's profile image.
+- **`isActivated`**: Boolean indicating whether the profile section is activated.
+- **`onClick`**: Function triggered when the profile section is clicked.
+- **`headerProfileRef`** (optional): React ref object attached to the **`<button>`** element wrapping the profile section.
+
+## Usage
+
+```tsx
+import { HeaderProfile } from 'ggf-ui';
+```
+
+```tsx
+<HeaderProfile nickname='UserName' profileImageUrl='url/to/profile/image.jpg' isActivated={true} onClick={onClick} />
+```
+
+## Storybook
+
+[https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/headerprofile-headerprofile--example&globals=backgrounds.value:!hex(333333)](<https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/headerprofile-headerprofile--example&globals=backgrounds.value:!hex(333333)>)

docs/HeaderSigninButton.mdx

@@ -0,0 +1,26 @@
+## Title
+
+HeaderSigninButton
+
+## Description
+
+A component representing a sign-in button in the header, linking to a specified path.
+
+## Anatomy
+
+- **`text`**: Text displayed on the sign-in button.
+- **`path`**: URL path to which the button links.
+
+## Usage
+
+```tsx
+import { HeaderSigninButton } from 'ggf-ui';
+```
+
+```tsx
+<HeaderSigninButton text='Sign In' path='/signin' />
+```
+
+## Storybook
+
+[https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/buttons-headersigninbutton--example&globals=backgrounds.value:!hex(333333)](<https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/buttons-headersigninbutton--example&globals=backgrounds.value:!hex(333333)>)

docs/HeaderSignupButton.mdx

@@ -0,0 +1,26 @@
+## Title
+
+HeaderSignupButton
+
+## Description
+
+A component representing a sign-up button in the header, linking to a specified path.
+
+## Anatomy
+
+- **`text`**: Text displayed on the sign-up button.
+- **`path`**: URL path to which the button links.
+
+## Usage
+
+```tsx
+import { HeaderSignupButton } from 'ggf-ui';
+```
+
+```tsx
+<HeaderSignupButton text='Sign Up' path='/signup' />
+```
+
+## Storybook
+
+[https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/buttons-headersignupbutton--example&globals=backgrounds.value:!hex(333333)](<https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/buttons-headersignupbutton--example&globals=backgrounds.value:!hex(333333)>)

docs/IconButton.mdx

@@ -0,0 +1,36 @@
+## Title
+
+IconButton
+
+## Description
+
+A component representing an icon button with optional activation indicators.
+
+## Anatomy
+
+- **`imageUrl`**: URL of the icon image.
+- **`imageAlt`**: Alternate text for the icon image.
+- **`isActivated`**: Boolean indicating whether the button is activated.
+- **`onClick`**: Function triggered when the button is clicked.
+- **`buttonRef`** (optional): React ref object attached to the **`<button>`** element.
+- **`size`** (optional): Sets the size of the button. Can be `'small' | 'medium' | 'large'` Defaults to 'medium'.
+
+## Usage
+
+```tsx
+import { IconButton } from 'ggf-ui';
+```
+
+```tsx
+<IconButton
+  imageUrl='url/to/icon/image.png'
+  imageAlt='Icon Alt Text'
+  isActivated={true}
+  onClick={onClick}
+  size='small'
+/>
+```
+
+## Storybook
+
+[https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/buttons-iconbutton--example&globals=backgrounds.value:!hex(333333)](<https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/buttons-iconbutton--example&globals=backgrounds.value:!hex(333333)>)