폼 상태 관리 패키지 변경

Author: 2skydev

README.md

@@ -1,6 +1,5 @@
 ![electron-vite-template-github-card](https://user-images.githubusercontent.com/43225384/196135599-585afdc5-9905-4400-bb02-ab0e7720da50.png)
 
-
 # Electron + Vite + React + TypeScript Template
 
 A template for using electron quickly.<br/>
@@ -9,6 +8,7 @@ Please understand that the code and explanation are mainly written in Korean. 
 <br />
 
 ## 특징들 둘러보기
+
 - electron & vite를 사용해 빠른 개발, 빌드가 가능한 TypeScript 환경
 - 앱에 필수적인 요소 자동 업데이트, 저장소, 로그 등 사전구성
 - 파일 시스템 라우팅 기능 (Next.js에서 사용하던 방식)
@@ -32,7 +32,6 @@ Please understand that the code and explanation are mainly written in Korean. 
 - CSS: [`styled-components`](https://styled-components.com/)
 - State management library: [`recoil`](https://hookstate.js.org/)
 - Date: [`dayjs`](https://day.js.org/)
-- Form value handle: [`formik`](https://formik.org/)
 
 <br />
 
@@ -61,7 +60,7 @@ yarn build:all
 <br />
 
 ## 스크린샷들
+
 <img width="1718" alt="image" src="https://user-images.githubusercontent.com/43225384/196127143-2fd2fb65-5858-4bda-87a8-97c6e0487d8f.png">
 <img width="1718" alt="image" src="https://user-images.githubusercontent.com/43225384/196126603-388acf2c-760b-45f2-8738-5c1d2a4b4892.png">
 <img width="1718" alt="image" src="https://user-images.githubusercontent.com/43225384/196126770-08f75a7c-653d-4264-8c38-eb147c55193d.png">
-

app/stores/config.ts

@@ -2,7 +2,6 @@ import Store from 'electron-store';
 
 export interface ConfigStoreValues {
   general: {
-    theme: 'light' | 'dark';
     developerMode: boolean;
   };
 }
@@ -12,7 +11,6 @@ export const configStore = new Store<ConfigStoreValues>({
   accessPropertiesByDotNotation: false,
   defaults: {
     general: {
-      theme: 'dark',
       developerMode: false,
     },
   },

package.json

@@ -24,14 +24,14 @@
     "electron-store": "^8.1.0",
     "electron-updater": "^5.3.0",
     "fast-deep-equal": "^3.1.3",
-    "formik": "^2.2.9",
     "framer-motion": "^9.1.6",
     "glob": "^8.1.0",
     "lodash": "^4.17.21",
     "path-to-regexp": "^6.2.1",
     "polished": "^4.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.43.2",
     "react-router-dom": "^6.6.2",
     "react-virtualized": "git+https://[email protected]/remorses/react-virtualized-fixed-import.git#9.22.3",
     "recoil": "^0.7.6",

src/components/SaveButton/SaveButton.tsx

@@ -1,19 +1,21 @@
-import { ReactNode, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
+import { useWatch } from 'react-hook-form';
 
 import { Button, Popconfirm, Space } from 'antd';
 import clsx from 'clsx';
 import deepEqual from 'fast-deep-equal';
 import { AnimatePresence } from 'framer-motion';
 
+import { UseCustomUseFormReturn } from '~/hooks/useCustomForm';
+
 import { SaveButtonStyled } from './styled';
 
 export interface SaveButtonProps {
-  formik: any;
+  form: UseCustomUseFormReturn<any, any>;
   defaultValues: any;
   className?: string;
   confirmText?: ReactNode;
   useConfirm?: boolean;
-  reset?: boolean;
 }
 
 const animation = {
@@ -41,37 +43,59 @@ const animation = {
   },
 };
 
+let timeoutHandle: NodeJS.Timeout;
+
 const SaveButton = ({
+  form,
   className,
   defaultValues,
-  formik,
   confirmText,
   useConfirm = false,
-  reset,
 }: SaveButtonProps) => {
+  const [invalid, setInvalid] = useState(false);
   const [confirmVisible, setConfirmVisible] = useState(false);
   const [loading, setLoading] = useState(false);
 
-  const isEqual = deepEqual(defaultValues, formik.values);
+  const values = useWatch({
+    control: form.control,
+  });
+
+  const isEqual = deepEqual(defaultValues, values);
 
   const handleSave = async () => {
     setLoading(true);
-    await formik.submitForm();
+
+    const valid = await form.submit();
+
+    if (!valid) {
+      setInvalid(true);
+    }
+
     setLoading(false);
   };
 
+  useEffect(() => {
+    clearTimeout(timeoutHandle);
+
+    if (invalid) {
+      timeoutHandle = setTimeout(() => {
+        setInvalid(false);
+      }, 1000);
+    }
+  }, [invalid]);
+
   return (
     <AnimatePresence>
       {!isEqual && (
-        <SaveButtonStyled className={clsx('SaveButton', className)} key="SaveButton" {...animation}>
+        <SaveButtonStyled
+          className={clsx('SaveButton', className, { invalid })}
+          key="SaveButton"
+          {...animation}
+        >
           <span>저장하지 않은 변경 사항이 있어요!</span>
 
           <Space>
-            <Button
-              className="cancel"
-              onClick={() => (reset ? formik.handleReset() : formik.setValues(defaultValues))}
-              disabled={loading}
-            >
+            <Button className="cancel" disabled={loading} onClick={() => form.reset(defaultValues)}>
               되돌리기
             </Button>
 
@@ -80,8 +104,8 @@ const SaveButton = ({
               okText="저장"
               cancelText="취소"
               placement="topRight"
-              visible={confirmVisible}
-              onVisibleChange={(visible: boolean) => {
+              open={confirmVisible}
+              onOpenChange={(visible: boolean) => {
                 if (useConfirm) {
                   setConfirmVisible(visible);
                 }
@@ -95,7 +119,7 @@ const SaveButton = ({
                 className="save"
                 type="primary"
                 loading={loading}
-                onClick={useConfirm ? () => {} : handleSave}
+                onClick={useConfirm ? undefined : handleSave}
               >
                 변경사항 저장하기
               </Button>

src/components/SaveButton/styled.ts

@@ -15,6 +15,11 @@ export const SaveButtonStyled = styled(motion.div)`
   margin-top: 2rem;
   border-radius: 8px;
   z-index: 100;
+  border: 2px solid transparent;
+
+  &.invalid {
+    animation: invalidAnimation 500ms;
+  }
 
   > span {
     font-size: 1rem;
@@ -40,4 +45,48 @@ export const SaveButtonStyled = styled(motion.div)`
       background-color: ${props => darken(0.1, props.theme.colors.success)};
     }
   }
+
+  @keyframes invalidAnimation {
+    0% {
+      transform: translate(1px, 1px);
+      border-color: ${props => props.theme.colors.error};
+    }
+    10% {
+      transform: translate(-1px, -2px);
+      border-color: ${props => props.theme.colors.error};
+    }
+    20% {
+      transform: translate(-3px, 0px);
+      border-color: ${props => props.theme.colors.error};
+    }
+    30% {
+      transform: translate(3px, 2px);
+      border-color: ${props => props.theme.colors.error};
+    }
+    40% {
+      transform: translate(1px, -1px);
+      border-color: ${props => props.theme.colors.error};
+    }
+    50% {
+      transform: translate(-1px, 2px);
+      border-color: ${props => props.theme.colors.error};
+    }
+    60% {
+      transform: translate(-3px, 1px);
+      border-color: ${props => props.theme.colors.error};
+    }
+    70% {
+      transform: translate(3px, 1px);
+      border-color: ${props => props.theme.colors.error};
+    }
+    80% {
+      transform: translate(-1px, -1px);
+    }
+    90% {
+      transform: translate(1px, 2px);
+    }
+    100% {
+      transform: translate(1px, -2px);
+    }
+  }
 `;

src/hooks/useCustomForm.ts

@@ -0,0 +1,59 @@
+import { FieldValues, UseFormProps, UseFormReturn, useForm } from 'react-hook-form';
+
+import deepEqual from 'fast-deep-equal';
+
+import { useDidUpdateEffect } from './useDidUpdateEffect';
+
+export interface UseCustomUseFormProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TContext = any,
+> extends UseFormProps<TFieldValues, TContext> {
+  onSubmit: (data: TFieldValues) => void;
+  syncDefaultValues?: boolean;
+}
+
+export interface UseCustomUseFormReturn<
+  TFieldValues extends FieldValues = FieldValues,
+  TContext = any,
+> extends Omit<UseFormReturn<TFieldValues, TContext>, 'handleSubmit'> {
+  handleSubmit: (e?: React.BaseSyntheticEvent) => void;
+  submit: () => Promise<boolean>;
+}
+
+export const useCustomForm = <TFieldValues extends FieldValues = FieldValues, TContext = any>(
+  props: UseCustomUseFormProps<TFieldValues, TContext>,
+): UseCustomUseFormReturn<TFieldValues, TContext> => {
+  const { onSubmit, syncDefaultValues = false, ...rest } = props;
+
+  const form = useForm(rest);
+
+  const handleDefaultValuesChange = async () => {
+    if (syncDefaultValues) {
+      const defaultValues =
+        rest.defaultValues instanceof Function ? await rest.defaultValues() : rest.defaultValues;
+
+      if (!deepEqual(rest.defaultValues, form.getValues())) {
+        form.reset(defaultValues);
+      }
+    }
+  };
+
+  useDidUpdateEffect(() => {
+    handleDefaultValuesChange();
+  }, [rest.defaultValues]);
+
+  return {
+    ...form,
+    handleSubmit: e => {
+      form.handleSubmit(onSubmit)(e);
+    },
+    submit: async () => {
+      if (await form.trigger()) {
+        await onSubmit(form.getValues());
+        return true;
+      }
+
+      return false;
+    },
+  };
+};

src/hooks/useDidUpdateEffect.ts

@@ -0,0 +1,10 @@
+import { DependencyList, EffectCallback, useEffect, useRef } from 'react';
+
+export const useDidUpdateEffect = (effect: EffectCallback, deps: DependencyList) => {
+  const didMountRef = useRef(false);
+
+  useEffect(() => {
+    if (didMountRef.current) return effect();
+    didMountRef.current = true;
+  }, deps);
+};