Merge pull request #71 from YAPP-Github/feature/FE-052

feature/FE-052 : IconButton disabled 에러 수정
YAPP-Github · Jul 4, 2023 · 6ee51c4 · 6ee51c4
2 parents c89e624 + d52ffe4
commit 6ee51c4
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 10 deletions.
diff --git a/public/sprite.svg b/public/sprite.svg
diff --git a/public/spriteIcons/minus-hover.svg b/public/spriteIcons/minus-hover.svg
diff --git a/src/app/write/components/Counter/Counter.tsx b/src/app/write/components/Counter/Counter.tsx
@@ -23,9 +23,9 @@ const Counter = ({ control, name, min = 2, max = 20, ...rest }: CounterProps<any
         name={name}
         render={({ field: { value, onChange } }) => (
           <>
-            <IconButton type="button" iconType="minus" onClick={handleClickSubtract} disabled={value <= 2} />
+            <IconButton type="button" iconType="minus" onClick={handleClickSubtract} disabled={value <= 2} hover />
             <input type="number" min={min} max={max} value={value} onChange={onChange} />
-            <IconButton type="button" iconType="plus" onClick={handleClickAdd} />
+            <IconButton type="button" iconType="plus" onClick={handleClickAdd} hover />
           </>
         )}
       />

diff --git a/src/app/write/components/Form/FirstStep.tsx b/src/app/write/components/Form/FirstStep.tsx
@@ -19,6 +19,7 @@ const FirstStep = ({ nextStep }: stepProps) => {
   const { stepOne, setData } = useFormStore();
 
   const method = useForm<StepOneSchema>({
+    mode: 'onSubmit',
     resolver: zodResolver(stepOneSchema),
     defaultValues: stepOne || {},
   });

diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
@@ -42,9 +42,13 @@ const IconButton = ({
 
   useEffect(() => {
     if (!error) return;
-    setStatus(error ? ICON_STATUS.ERROR : disabled ? ICON_STATUS.DISABLE : ICON_STATUS.DEFAULT);
+    setStatus(error ? ICON_STATUS.ERROR : ICON_STATUS.DEFAULT);
   }, [error, disabled]);
 
+  useEffect(() => {
+    setStatus(disabled ? ICON_STATUS.DISABLE : ICON_STATUS.DEFAULT);
+  }, [disabled]);
+
   const handleMouseEnter = () => {
     if (error || disabled || status === ICON_STATUS.ACTIVE) return;
     hover && setStatus(ICON_STATUS.HOVER);

diff --git a/src/components/SvgIcon/SvgIcon.tsx b/src/components/SvgIcon/SvgIcon.tsx
@@ -1,16 +1,16 @@
 import { SVGProps } from 'react';
 
 interface Props extends SVGProps<SVGSVGElement> {
-	/** icon id (spriteIcons 폴더하에 있는 svg 파일명과 동일함) */
-	id: string;
+  /** icon id (spriteIcons 폴더하에 있는 svg 파일명과 동일함) */
+  id: string;
 }
 
 const SvgIcon = ({ id, width = 16, height = 16, fill = 'none', ...rest }: Props) => {
-	return (
-		<svg width={width} height={height} fill={fill} {...rest}>
-			<use href={`/sprite.svg#${id}`} />
-		</svg>
-	);
+  return (
+    <svg width={width} height={height} fill={fill} {...rest}>
+      <use href={`/sprite.svg#${id}`} />
+    </svg>
+  );
 };
 
 export default SvgIcon;