Merge pull request #63 from YAPP-Github/feature/FE-042

Feature/FE-042 : 회원가입 오류 수정
YAPP-Github · Jul 1, 2023 · 724fb64 · 724fb64
2 parents 349177a + ea545d8
commit 724fb64
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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/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);
     }

diff --git 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}