Merge pull request #33 from cobaltinc/park/input-update

Checkbox 로직 수정 및 Input Layout style 변경
cobaltinc · Sep 4, 2023 · c931081 · c931081
2 parents 399ff8b + c796007
commit c931081
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 5 deletions.
diff --git 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"

diff --git 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
@@ -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
@@ -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>
     );
   },