From 78a904941e33cb1c3f516ac89db5b2d3a8f318a2 Mon Sep 17 00:00:00 2001
From: healtheloper <58503584+healtheloper@users.noreply.github.com>
Date: Mon, 4 Sep 2023 10:17:20 +0900
Subject: [PATCH 1/2] =?UTF-8?q?checked=20props=20=EA=B0=80=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=EB=90=98=EB=A9=B4=20check=20=EC=83=81=ED=83=9C?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD=ED=95=9C=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../co-design-core/src/components/Checkbox/Checkbox.tsx     | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/co-design-core/src/components/Checkbox/Checkbox.tsx b/packages/co-design-core/src/components/Checkbox/Checkbox.tsx
index e00d2fc7..ca3d4df6 100644
--- a/packages/co-design-core/src/components/Checkbox/Checkbox.tsx
+++ b/packages/co-design-core/src/components/Checkbox/Checkbox.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { ClassNames, CoComponentProps } from '@co-design/styles';
 import { CheckboxIcon } from './CheckboxIcon';
 import { View } from '../View';
@@ -59,6 +59,10 @@ export const Checkbox = ({
     onChange?.(event);
   };
 
+  useEffect(() => {
+    setCheck(checked);
+  }, [checked]);
+
   return (
     <View
       component="label"

From c79600771f49c8a6e1a3809c4f42f39df4486db6 Mon Sep 17 00:00:00 2001
From: healtheloper <58503584+healtheloper@users.noreply.github.com>
Date: Mon, 4 Sep 2023 10:26:33 +0900
Subject: [PATCH 2/2] =?UTF-8?q?Input=20=EC=9D=98=20label=20layout=20?=
 =?UTF-8?q?=EC=9D=84=20=EC=9C=84=ED=95=B4=20=EA=B0=9C=EC=84=A0=ED=96=88?=
 =?UTF-8?q?=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../co-design-core/src/components/Input/Input.style.ts    | 1 +
 packages/co-design-core/src/components/Input/Input.tsx    | 8 +++++---
 .../src/components/Input/stories/Input.stories.tsx        | 4 +++-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/co-design-core/src/components/Input/Input.style.ts b/packages/co-design-core/src/components/Input/Input.style.ts
index d0716240..99a8ddee 100644
--- a/packages/co-design-core/src/components/Input/Input.style.ts
+++ b/packages/co-design-core/src/components/Input/Input.style.ts
@@ -27,6 +27,7 @@ export default createStyles((theme, { size, multiline, radius, invalid, isLeftSe
       position: 'relative',
     },
     label: {
+      display: 'block',
       marginBottom: theme.spacing.small,
     },
     labelText: {
diff --git a/packages/co-design-core/src/components/Input/Input.tsx b/packages/co-design-core/src/components/Input/Input.tsx
index 791234a0..c9cd0f73 100644
--- a/packages/co-design-core/src/components/Input/Input.tsx
+++ b/packages/co-design-core/src/components/Input/Input.tsx
@@ -53,7 +53,7 @@ export interface InputBaseProps {
   /** disabled 상태가 됩니다. */
   disabled?: boolean;
 
-  /** Input 을 섦명할 label을 지정합니다. */
+  /** Input 을 설명할 label을 지정합니다. */
   label?: string;
 
   /** Label Text의 Props 를 설정합니다. */
@@ -106,8 +106,10 @@ export const Input: InputComponent & { displayName?: string } = forwardRef(
     );
     const Element: any = component || 'input';
 
+    const Wrapper = label ? View : React.Fragment;
+
     return (
-      <>
+      <Wrapper>
         {label && (
           <label htmlFor={inputId} className={classes.label}>
             <Text className={classes.labelText} {...labelTextProps}>
@@ -149,7 +151,7 @@ export const Input: InputComponent & { displayName?: string } = forwardRef(
             </div>
           )}
         </View>
-      </>
+      </Wrapper>
     );
   },
 );
diff --git a/packages/co-design-core/src/components/Input/stories/Input.stories.tsx b/packages/co-design-core/src/components/Input/stories/Input.stories.tsx
index 09b434cb..7f7c5d62 100644
--- a/packages/co-design-core/src/components/Input/stories/Input.stories.tsx
+++ b/packages/co-design-core/src/components/Input/stories/Input.stories.tsx
@@ -107,8 +107,10 @@ export const Textarea = {
 export const WithLabel = {
   render: (props) => {
     return (
-      <div style={{ width: 400, padding: 24 }}>
+      <div style={{ width: 400, padding: 24, display: 'flex', flexDirection: 'column', gap: '16px' }}>
         <Input {...props} label="name" />
+        <Input {...props} label="email" />
+        <Input {...props} label="password" />
       </div>
     );
   },