[주변 상점] 비밀번호 찾기 진입오류 수정 (#356)

* fix : steps 객체로 감싸서 생긴 문제 해결 * refator : 제레릭으로 useOutlet감싸기 --------- Co-authored-by: (hoooooony) <([email protected])>
BCSDLab · Jun 21, 2024 · a83e019 · a83e019
1 parent 0190800
commit a83e019
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 20 deletions.
diff --git a/src/page/Auth/FindPassword/ChangePassword/index.tsx b/src/page/Auth/FindPassword/ChangePassword/index.tsx
@@ -13,7 +13,7 @@ export default function ChangePassword() {
     register, formState: { errors, isValid }, getValues, clearErrors,
   } = useFormContext<ChangePasswordForm>();
 
-  const steps: OutletProps = useOutletContext();
+  const steps = useOutletContext<OutletProps>();
   const { setIsStepComplete } = steps;
 
   useEffect(() => {

diff --git a/src/page/Auth/FindPassword/Verify/index.tsx b/src/page/Auth/FindPassword/Verify/index.tsx
@@ -81,7 +81,7 @@ export default function Verify() {
 
   const [isSent, setIsSent] = useState(false);
   const debounce = useDebounce<SendCode>(code, { getValues, setError, setIsSent });
-  const steps: OutletProps = useOutletContext();
+  const steps = useOutletContext<OutletProps>();
 
   const { setCertificationCode, isCertified } = useCheckCode(
     steps.setIsStepComplete,

diff --git a/src/page/Auth/FindPassword/entity.ts b/src/page/Auth/FindPassword/entity.ts
@@ -8,4 +8,8 @@ export interface OutletProps {
   setIsComplete: React.Dispatch<React.SetStateAction<boolean>>;
   isStepComplete: boolean;
   setIsStepComplete: React.Dispatch<React.SetStateAction<boolean>>;
+  isSearch: boolean;
+  setIsSearch: React.Dispatch<React.SetStateAction<boolean>>;
+  isShopSelect: boolean;
+  setIsShopSelect: React.Dispatch<React.SetStateAction<boolean>>;
 }
diff --git a/src/page/Auth/FindPassword/index.tsx b/src/page/Auth/FindPassword/index.tsx
@@ -4,7 +4,7 @@ import { OutletProps } from './entity';
 import Verify from './Verify';
 
 export default function FindPassword() {
-  const steps: OutletProps = useOutletContext();
+  const steps = useOutletContext<OutletProps>();
   const { index } = steps;
   return (
     <>

diff --git a/src/page/Auth/Signup/components/searchShop/index.tsx b/src/page/Auth/Signup/components/searchShop/index.tsx
@@ -4,22 +4,19 @@ import { ChangeEvent, useEffect, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useOutletContext } from 'react-router-dom';
 import cn from 'utils/ts/className';
+import { OutletProps } from 'page/Auth/FindPassword/entity';
 import styles from './searchShop.module.scss';
 
-interface Step {
-  isShopSelect: boolean;
-  setIsShopSelect: (state: boolean) => void;
-}
 interface ShopInfo {
   shop_name: string;
   shop_id: number | null;
 }
 export default function SearchShop() {
   const [searchText, setSearchText] = useState('');
-  const { steps, setValue } = useOutletContext<{ steps: Step; setValue: Function }>();
+  const steps = useOutletContext<OutletProps>();
   const { shopList, isError } = useShopList();
   const {
-    watch,
+    watch, setValue,
   } = useFormContext<ShopInfo>();
   function handleClickShop(e: React.MouseEvent<HTMLButtonElement>) {
     const { name, id } = JSON.parse(e.currentTarget.value);

diff --git a/src/page/Auth/Signup/index.tsx b/src/page/Auth/Signup/index.tsx
@@ -1,18 +1,11 @@
 import { useEffect, useState } from 'react';
 import { useOutletContext } from 'react-router-dom';
+import { OutletProps } from 'page/Auth/FindPassword/entity';
 import AgreeStep from './components/agreeStep';
 import OwnerInfoStep from './components/ownerInfoStep';
 import PhoneStep from './components/phoneStep';
 import SearchShop from './components/searchShop';
 
-interface Step {
-  index: number;
-  previousStep: () => void;
-  setIsStepComplete: (state: boolean) => void;
-  isSearch: boolean;
-  setIsSearch: (state: boolean) => void;
-}
-
 interface SelectOptions {
   personal: boolean;
   koin: boolean;
@@ -25,7 +18,7 @@ const initialSelectOption: SelectOptions = {
 
 export default function SignUp() {
   const [selectItems, setSelectItems] = useState<SelectOptions>(initialSelectOption);
-  const { steps } = useOutletContext<{ steps: Step; }>();
+  const steps = useOutletContext<OutletProps >();
   const [stepPhoneComplete, setStepPhoneComplete] = useState(false);
 
   const handleSelect = (option: keyof SelectOptions | 'all') => {

diff --git a/src/page/Auth/components/Common/index.tsx b/src/page/Auth/components/Common/index.tsx
@@ -74,7 +74,7 @@ export default function CommonLayout() {
     mode: 'onChange',
   });
   const {
-    formState: { errors }, setError, getValues, setValue,
+    formState: { errors }, setError, getValues,
   } = method;
 
   const steps = useStep(isFindPassword ? 'find' : 'register');
@@ -159,7 +159,7 @@ export default function CommonLayout() {
           <div className={styles.content}>
             {isComplete
               ? <Done isFindPassword={isFindPassword} />
-              : <Outlet context={{ steps, setValue, getValues }} />}
+              : <Outlet context={steps} />}
           </div>
           {!isComplete && !isSearch && (
             <button