From e03a44e39a16a58004d21891a4423342d2d58ad9 Mon Sep 17 00:00:00 2001
From: healtheloper <super0872@naver.com>
Date: Thu, 12 Oct 2023 18:35:42 +0900
Subject: [PATCH 1/3] =?UTF-8?q?Input=20=EC=9D=98=20useId=20=EB=A5=BC=20rea?=
 =?UTF-8?q?ct=20=EC=A0=9C=EA=B3=B5=20=ED=95=A8=EC=88=98=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=ED=96=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/co-design-core/src/components/Input/Input.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/co-design-core/src/components/Input/Input.tsx b/packages/co-design-core/src/components/Input/Input.tsx
index c9cd0f7..958dcb6 100644
--- a/packages/co-design-core/src/components/Input/Input.tsx
+++ b/packages/co-design-core/src/components/Input/Input.tsx
@@ -1,9 +1,8 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useId } from 'react';
 import { useCoTheme, CoComponentProps, CoSize, PolymorphicComponentProps, PolymorphicRef, CoRadius, ClassNames } from '@co-design/styles';
 import { View } from '../View';
 import useStyles from './Input.style';
 import { Text, TextProps } from '../Text';
-import { useId } from '@co-design/hooks';
 
 export type InputStylesNames = ClassNames<typeof useStyles>;
 
@@ -111,7 +110,7 @@ export const Input: InputComponent & { displayName?: string } = forwardRef(
     return (
       <Wrapper>
         {label && (
-          <label htmlFor={inputId} className={classes.label}>
+          <label htmlFor={inputId + name} className={classes.label}>
             <Text className={classes.labelText} {...labelTextProps}>
               {label}
             </Text>
@@ -139,7 +138,7 @@ export const Input: InputComponent & { displayName?: string } = forwardRef(
             required={required}
             disabled={disabled}
             style={{ paddingRight: rightSection ? rightSectionWidth : theme.spacing.small }}
-            id={inputId}
+            id={inputId + name}
           />
           {rightSection && (
             <div

From 698c80c543909409e6209b46a7c0f0a81c943834 Mon Sep 17 00:00:00 2001
From: healtheloper <super0872@naver.com>
Date: Thu, 12 Oct 2023 18:39:39 +0900
Subject: [PATCH 2/3] =?UTF-8?q?Storybook=20=EC=B6=94=EA=B0=80=ED=96=88?=
 =?UTF-8?q?=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Input/stories/Input.stories.tsx     | 10 ++++++++++
 1 file changed, 10 insertions(+)

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 7f7c5d6..0bcd159 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
@@ -115,3 +115,13 @@ export const WithLabel = {
     );
   },
 };
+
+export const AutoFocus = {
+  render: (props) => {
+    return (
+      <div style={{ width: 400, padding: 24 }}>
+        <Input autoFocus {...props} />
+      </div>
+    );
+  },
+};

From 2f2a906a1dbb333d27409396b94834f6175ab060 Mon Sep 17 00:00:00 2001
From: healtheloper <super0872@naver.com>
Date: Thu, 12 Oct 2023 18:49:40 +0900
Subject: [PATCH 3/3] =?UTF-8?q?Storybook=20test=20=EB=B3=80=EA=B2=BD?=
 =?UTF-8?q?=ED=96=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Input/stories/Input.stories.tsx           | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

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 0bcd159..5e6dc60 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
@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Tooltip } from '../../Tooltip';
 import { Input } from '../Input';
+import { Modal } from '../../Modal';
 
 export default {
   title: '@co-design/core/Input',
@@ -116,12 +117,25 @@ export const WithLabel = {
   },
 };
 
+// Storybook Context 변경으로 인한 리렌더링으로 focus 풀림
 export const AutoFocus = {
   render: (props) => {
+    const [opened, setOpened] = useState(false);
     return (
-      <div style={{ width: 400, padding: 24 }}>
-        <Input autoFocus {...props} />
-      </div>
+      <>
+        <div style={{ width: 400, padding: 24 }}>
+          <button
+            onClick={() => {
+              setOpened(true);
+            }}
+          >
+            open modal
+          </button>
+        </div>
+        <Modal opened={opened} onClose={() => setOpened(false)}>
+          <Input autoFocus {...props} />
+        </Modal>
+      </>
     );
   },
 };