From 23e98f0bf76e15d1b4037cebd906243d1f442a99 Mon Sep 17 00:00:00 2001
From: zieun <jieunpark247@gmail.com>
Date: Sat, 1 Jul 2023 09:59:32 +0900
Subject: [PATCH 1/2] =?UTF-8?q?edit:=20iconButton=20error=20=EC=8B=9C=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EB=88=8C=EB=A6=AC=EA=B2=8C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/IconButton/IconButton.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
index b2da626b..21f42e35 100644
--- a/src/components/IconButton/IconButton.tsx
+++ b/src/components/IconButton/IconButton.tsx
@@ -41,6 +41,7 @@ const IconButton = ({
   const [iconSvgId, setIconSvgId] = useState<string>(iconType);
 
   useEffect(() => {
+    if (!error) return;
     setStatus(error ? ICON_STATUS.ERROR : disabled ? ICON_STATUS.DISABLE : ICON_STATUS.DEFAULT);
   }, [error, disabled]);
 
@@ -55,8 +56,8 @@ const IconButton = ({
   };
 
   const handleOnClick = (e: MouseEvent<HTMLButtonElement>): void => {
-    if (error || disabled) return;
-    if (active) {
+    if (disabled) return;
+    if (active || error) {
       setStatus(isActive ? ICON_STATUS.DEFAULT : ICON_STATUS.ACTIVE);
       setIsActive(!isActive);
     }

From ea545d8866dc49ae16fe6a7f5c3414618d7781d5 Mon Sep 17 00:00:00 2001
From: zieun <jieunpark247@gmail.com>
Date: Sat, 1 Jul 2023 10:42:08 +0900
Subject: [PATCH 2/2] =?UTF-8?q?edit:=20input=20=EC=B0=BD=20=EC=BB=A4?=
 =?UTF-8?q?=EC=8A=A4=ED=85=80=ED=95=98=EC=97=AC=20width=20=EC=A1=B0?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../EmailRequestSignUp/EmailRequestSignUp.css.ts     |  3 +++
 .../EmailRequestSignUp/EmailRequestSignUp.tsx        | 12 +++++++++---
 src/app/signup/components/InputArea/InputArea.css.ts |  3 +++
 src/app/signup/components/InputArea/InputArea.tsx    | 11 +++++++++--
 src/components/Input/Input.tsx                       |  4 ++--
 5 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/app/signup/components/EmailRequestSignUp/EmailRequestSignUp.css.ts b/src/app/signup/components/EmailRequestSignUp/EmailRequestSignUp.css.ts
index 9938e2ae..479c7aaf 100644
--- a/src/app/signup/components/EmailRequestSignUp/EmailRequestSignUp.css.ts
+++ b/src/app/signup/components/EmailRequestSignUp/EmailRequestSignUp.css.ts
@@ -31,3 +31,6 @@ globalStyle(`${inputArea} > div`, {
   width: '200px',
   marginRight: '12px',
 });
+export const input = style({
+  width: '100%',
+});
diff --git a/src/app/signup/components/EmailRequestSignUp/EmailRequestSignUp.tsx b/src/app/signup/components/EmailRequestSignUp/EmailRequestSignUp.tsx
index 3cc1f334..6fecee94 100644
--- a/src/app/signup/components/EmailRequestSignUp/EmailRequestSignUp.tsx
+++ b/src/app/signup/components/EmailRequestSignUp/EmailRequestSignUp.tsx
@@ -1,7 +1,7 @@
 'use client';
 import { Button, Input, InputSection } from '@/components';
 import { FieldValues, SubmitHandler } from 'react-hook-form';
-import { requiredFields, button, buttonWrapper, inputArea } from './EmailRequestSignUp.css';
+import { requiredFields, button, buttonWrapper, inputArea, input } from './EmailRequestSignUp.css';
 import { useSignupContext } from '../../contexts/SignupContext';
 import { postRequestEmail } from '../../api';
 import { usePostApi, useCommonForm, useConsent } from '../../hooks';
@@ -49,8 +49,14 @@ const EmailRequestSignUp = ({ onNext }: EmailRequestSignUpProps) => {
       <InputField method={method} onSubmit={onSubmit}>
         <InputSection variant="label3" color="sub" label="회사이메일" direction="column" required={true}>
           <div className={inputArea}>
-            <div>
-              <Input {...method.register('email')} name="email" placeholder="회사 이메일" showError={true} />
+            <div style={{ width: '200px' }}>
+              <Input
+                {...method.register('email')}
+                name="email"
+                placeholder="회사 이메일"
+                showError={true}
+                className={input}
+              />
             </div>
             <span>@samsung.com</span>
           </div>
diff --git a/src/app/signup/components/InputArea/InputArea.css.ts b/src/app/signup/components/InputArea/InputArea.css.ts
index a9804701..774e8f09 100644
--- a/src/app/signup/components/InputArea/InputArea.css.ts
+++ b/src/app/signup/components/InputArea/InputArea.css.ts
@@ -5,3 +5,6 @@ export const inputWrapper = style({
 globalStyle(`${inputWrapper} > div`, {
   justifyContent: 'normal',
 });
+export const input = style({
+  width: '100%',
+});
diff --git a/src/app/signup/components/InputArea/InputArea.tsx b/src/app/signup/components/InputArea/InputArea.tsx
index e0145df9..71855654 100644
--- a/src/app/signup/components/InputArea/InputArea.tsx
+++ b/src/app/signup/components/InputArea/InputArea.tsx
@@ -1,7 +1,7 @@
 'use client';
 import { Input, InputSection } from '@/components';
 import { FieldValues, UseFormReturn } from 'react-hook-form';
-import { inputWrapper } from './InputArea.css';
+import { inputWrapper, input } from './InputArea.css';
 import { HTMLAttributes } from 'react';
 import cx from 'classnames';
 
@@ -18,7 +18,14 @@ const InputArea = ({ label, name, placeholder, required, method, type, className
   return (
     <div className={cx(inputWrapper, className)}>
       <InputSection label={label} variant="label3" color="sub" direction="column" required={required}>
-        <Input {...method.register(name)} name={name} placeholder={placeholder} showError={true} type={type} />
+        <Input
+          {...method.register(name)}
+          name={name}
+          placeholder={placeholder}
+          showError={true}
+          type={type}
+          className={input}
+        />
       </InputSection>
     </div>
   );
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 5ec9c049..adace4dd 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -22,7 +22,7 @@ type InputProps = {
 } & React.ComponentPropsWithoutRef<'input'>;
 
 const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {
-  const { type, name, placeholder, showError, ...rest } = props;
+  const { type, name, placeholder, showError, className, ...rest } = props;
   const { formState, resetField } = useFormContext();
   const handleReset = useCallback(() => resetField(name, { defaultValue: '', keepDirty: false }), []);
   const errorMessage = formState.errors[name]?.message as string;
@@ -40,7 +40,7 @@ const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTM
         )}
         <input
           name={name}
-          className={clsx(inputBase({ type }), errorMessage && inputError)}
+          className={clsx(inputBase({ type }), errorMessage && inputError, className)}
           placeholder={placeholder}
           ref={ref}
           type={type}