From e87547b275b708f53a3fe700383d7f46279214a4 Mon Sep 17 00:00:00 2001
From: GulSam00 <gulsamcono@gmail.com>
Date: Sun, 2 Jul 2023 12:26:05 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat=20:=20checkboxGroup=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Checkbox/Checkbox.stories.ts   |  2 +-
 src/components/Checkbox/Checkbox.tsx          | 20 +++++++---
 .../Checkbox/CheckboxGroup.stories.tsx        | 40 +++++++++++++++++++
 src/components/Checkbox/CheckboxGroup.tsx     | 19 +++++++++
 src/components/Checkbox/index.ts              |  1 +
 5 files changed, 76 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Checkbox/CheckboxGroup.stories.tsx
 create mode 100644 src/components/Checkbox/CheckboxGroup.tsx

diff --git a/src/components/Checkbox/Checkbox.stories.ts b/src/components/Checkbox/Checkbox.stories.ts
index 38730d7b..ac14ccc3 100644
--- a/src/components/Checkbox/Checkbox.stories.ts
+++ b/src/components/Checkbox/Checkbox.stories.ts
@@ -12,7 +12,7 @@ type Story = StoryObj<Component>;
 export const Primary: Story = {
   // Add your story args here
   args: {
-    labelText: 'label',
+    children: 'label',
     checked: false,
     disabled: false,
   },
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index c9f38828..5d9ea718 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -1,21 +1,31 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, useContext } from 'react';
 import cx from 'classnames';
 import { twMerge } from 'tailwind-merge';
 import CheckIcon from '@material-design-icons/svg/outlined/check.svg';
+ import { CheckboxContext } from './CheckboxGroup';
 
 import { Text } from '../Text';
 
 interface Props {
-  labelText: string;
+  children: string;
   checked?: boolean;
   disabled?: boolean;
+  value: string;
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 
-export function Checkbox({ labelText, checked = false, disabled = false, onChange }: Props) {
+export function Checkbox({ children, checked = false, disabled = false, value, onChange }: Props) {
+  
+    const context = useContext(CheckboxContext);
+
+  if (context) {
+    checked = context.selectedValue.includes(value);
+    onChange = context.onChange;
+  }
+  
   return (
     <label className={cx('flex flex-row items-center  gap-2', { 'opacity-[0.3]': disabled })}>
-      <input type="checkbox" className="hidden" checked={checked} onChange={onChange} />
+      <input type="checkbox" className="hidden" checked={checked} value={value} onChange={onChange} />
       <div
         className={cx(
           ' flex h-[20px] w-[20px] items-center justify-center rounded-md border-2 border-border-primary transition-colors duration-200 hover:border-color-system_200 dark:border-border-primary_dark dark:hover:border-color-system_200',
@@ -31,7 +41,7 @@ export function Checkbox({ labelText, checked = false, disabled = false, onChang
           )}
         />
       </div>
-      <Text text={labelText} size="body2" weight="regular" />
+      <Text text={children} size="body2" weight="regular" />
     </label>
   );
 }
diff --git a/src/components/Checkbox/CheckboxGroup.stories.tsx b/src/components/Checkbox/CheckboxGroup.stories.tsx
new file mode 100644
index 00000000..71b6fadd
--- /dev/null
+++ b/src/components/Checkbox/CheckboxGroup.stories.tsx
@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CheckboxGroup } from './CheckboxGroup';
+import { Checkbox } from './Checkbox';
+import { Children } from 'react';
+
+type Component = typeof CheckboxGroup;
+const meta: Meta<Component> = {
+  title: 'rookies/CheckboxGroup',
+  component: CheckboxGroup,
+};
+
+type Story = StoryObj<Component>;
+
+export const Primary: Story = {
+  args: {
+    selectedValue: ["label1", "label3"],
+    children: (
+      <>
+        <Checkbox value="label1">children</Checkbox> 
+        <Checkbox value="label2">children</Checkbox> 
+        <Checkbox value="label3">children</Checkbox>
+      </>
+    ),
+  },
+};
+
+export const WithDisabled: Story = {
+  args: {
+    selectedValue: ["label1", "label3"],
+    children: (
+      <>
+        <Checkbox value="label1">children</Checkbox> 
+        <Checkbox value="label2">children</Checkbox> 
+        <Checkbox value="label3" disabled>children</Checkbox>
+      </>
+    ),
+  },
+};
+
+export default meta;
diff --git a/src/components/Checkbox/CheckboxGroup.tsx b/src/components/Checkbox/CheckboxGroup.tsx
new file mode 100644
index 00000000..b8148540
--- /dev/null
+++ b/src/components/Checkbox/CheckboxGroup.tsx
@@ -0,0 +1,19 @@
+import { ReactNode, ChangeEventHandler, createContext } from 'react';
+
+interface Props {
+  children: ReactNode;
+  selectedValue: string[];
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+}
+
+type CheckboxContextType = Omit<Props, 'children'>;
+
+export const CheckboxContext = createContext<CheckboxContextType | null>(null);
+
+export function CheckboxGroup({ children, ...restProps }: Props) {
+  return (
+    <CheckboxContext.Provider value={{ ...restProps }}>
+      <fieldset className="flex flex-col gap-2">{children}</fieldset>
+    </CheckboxContext.Provider>
+  );
+}
diff --git a/src/components/Checkbox/index.ts b/src/components/Checkbox/index.ts
index 8f59e4fb..84ac72d9 100644
--- a/src/components/Checkbox/index.ts
+++ b/src/components/Checkbox/index.ts
@@ -1 +1,2 @@
 export { Checkbox } from './Checkbox';
+export { CheckboxGroup } from './CheckboxGroup';

From 2d42820b19a80804b0c421ccc7f25ee33db02cd9 Mon Sep 17 00:00:00 2001
From: GulSam00 <gulsamcono@gmail.com>
Date: Sun, 2 Jul 2023 18:13:49 +0900
Subject: [PATCH 2/3] =?UTF-8?q?fix=20:=20build=20=EC=98=A4=EB=A5=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Checkbox/CheckboxGroup.stories.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Checkbox/CheckboxGroup.stories.tsx b/src/components/Checkbox/CheckboxGroup.stories.tsx
index 71b6fadd..35c53234 100644
--- a/src/components/Checkbox/CheckboxGroup.stories.tsx
+++ b/src/components/Checkbox/CheckboxGroup.stories.tsx
@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { CheckboxGroup } from './CheckboxGroup';
 import { Checkbox } from './Checkbox';
-import { Children } from 'react';
 
 type Component = typeof CheckboxGroup;
 const meta: Meta<Component> = {

From d239c3f6aa168c2c7125500c9485be4b57626ad0 Mon Sep 17 00:00:00 2001
From: GulSam00 <gulsamcono@gmail.com>
Date: Thu, 6 Jul 2023 00:08:38 +0900
Subject: [PATCH 3/3] =?UTF-8?q?fix=20:=20format:fix=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Checkbox/Checkbox.tsx             |  7 +++----
 .../Checkbox/CheckboxGroup.stories.tsx           | 16 +++++++++-------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 5d9ea718..71bd6a6a 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -2,7 +2,7 @@ import { ChangeEvent, useContext } from 'react';
 import cx from 'classnames';
 import { twMerge } from 'tailwind-merge';
 import CheckIcon from '@material-design-icons/svg/outlined/check.svg';
- import { CheckboxContext } from './CheckboxGroup';
+import { CheckboxContext } from './CheckboxGroup';
 
 import { Text } from '../Text';
 
@@ -15,14 +15,13 @@ interface Props {
 }
 
 export function Checkbox({ children, checked = false, disabled = false, value, onChange }: Props) {
-  
-    const context = useContext(CheckboxContext);
+  const context = useContext(CheckboxContext);
 
   if (context) {
     checked = context.selectedValue.includes(value);
     onChange = context.onChange;
   }
-  
+
   return (
     <label className={cx('flex flex-row items-center  gap-2', { 'opacity-[0.3]': disabled })}>
       <input type="checkbox" className="hidden" checked={checked} value={value} onChange={onChange} />
diff --git a/src/components/Checkbox/CheckboxGroup.stories.tsx b/src/components/Checkbox/CheckboxGroup.stories.tsx
index 35c53234..57100f42 100644
--- a/src/components/Checkbox/CheckboxGroup.stories.tsx
+++ b/src/components/Checkbox/CheckboxGroup.stories.tsx
@@ -12,11 +12,11 @@ type Story = StoryObj<Component>;
 
 export const Primary: Story = {
   args: {
-    selectedValue: ["label1", "label3"],
+    selectedValue: ['label1', 'label3'],
     children: (
       <>
-        <Checkbox value="label1">children</Checkbox> 
-        <Checkbox value="label2">children</Checkbox> 
+        <Checkbox value="label1">children</Checkbox>
+        <Checkbox value="label2">children</Checkbox>
         <Checkbox value="label3">children</Checkbox>
       </>
     ),
@@ -25,12 +25,14 @@ export const Primary: Story = {
 
 export const WithDisabled: Story = {
   args: {
-    selectedValue: ["label1", "label3"],
+    selectedValue: ['label1', 'label3'],
     children: (
       <>
-        <Checkbox value="label1">children</Checkbox> 
-        <Checkbox value="label2">children</Checkbox> 
-        <Checkbox value="label3" disabled>children</Checkbox>
+        <Checkbox value="label1">children</Checkbox>
+        <Checkbox value="label2">children</Checkbox>
+        <Checkbox value="label3" disabled>
+          children
+        </Checkbox>
       </>
     ),
   },