fix : steps 객체로 감싸서 생긴 문제 해결

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>>;
 }

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 : OutletProps = useOutletContext();
   const { shopList, isError } = useShopList();
   const {
-    watch,
+    watch, setValue,
   } = useFormContext<ShopInfo>();
   function handleClickShop(e: React.MouseEvent<HTMLButtonElement>) {
     const { name, id } = JSON.parse(e.currentTarget.value);

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:OutletProps = useOutletContext();
   const [stepPhoneComplete, setStepPhoneComplete] = useState(false);
 
   const handleSelect = (option: keyof SelectOptions | 'all') => {

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