드디어 기어나온 테스트 코드

import { useForm } from '@syyu/util/react';

const initialValues: User = { 
	name: '',
	email: '',
} //폼 이름과 초기값

const onSubmit = async () => await axios.post(...)
//폼 전송 함수(react hook을 포함하면 안 됨)

//Component.tsx

...
const { values, handleChange, submit } = useForm<User>({ initialValues, onSubmit })
//간편하게 폼 컴포넌트와 상태를 양방향 바인딩할 수 있습니다

return (
	<form onSubmit={submit}>
		... 
		<input
			name="name"
			value={values.name}
			onChange={handleChange}
		/>
		<input
			name="email"
			value={values.email}
			onChange={handleChange}
		/>
		<button>회원가입</button>
		...
	</form>
)
...

initialValues: `{ inputName : initialValue }` 쌍으로 이루어진 객체
onSubmit: submit 동작 시 실행되는 `(values) => any` 함수
validator: `(values) => boolean` 함수
refInputNames: `string[]` 으로 여기 input name을 입력하면 refObject를 받을 수 있음 

values: `{ inputName : values }` 로 이루어진 객체
setValues: 내부의 input value를 강제로 변경할 수 있는 `setState fn`.
					 상태관리 라이브러리를 연동한 경우 아규먼트의 updateStore가 호출됨
handleChange: input과 useForm을 바인딩하는 `fn`
refs: `{ inputName : refObject }` 로 이루어진 객체.
			refInputNames가 있을 때 해당 input들의 `refObject`를 리턴함
refValues: `{ inputName : values }` 로 이루어진 객체,
			`refInputNames`가 있고 비제어 input이 바인드되었을 때 해당 input의 value를 리턴함
submit: 실제로 onSubmit 시 사용될 `fn`.
isLoading: `submit` 이 진행 중인지를 나타내는 `boolean` 값
response: 파라미터로 들어온 `onSubmit` 의 결과

it('should correctly track values of uncontrolled inputs', () => {
  const initialValues = {
    nickname: 'latte'
  }
  const refInputNames: (keyof typeof initialValues)[] = ['nickname']
  const onSubmit = jest.fn()

  const { result } = renderHook(() =>
    useForm<typeof initialValues>({
      initialValues,
      onSubmit,
      refInputNames
    })
  )
  
  render(
    <form onSubmit={result.current.submit}>
      <input
        placeholder="nickname"
        type="text"
        name="nickname"
        ref={result.current.refs?.nickname}
        value={result.current.refs?.nickname.current?.value}
        onChange={result.current.handleChange}
      />
      <button type="submit">Submit</button>
    </form>
  )

  const refInput = screen.getByPlaceholderText('nickname')

  expect(result.current.values.nickname).toBe('latte')

  fireEvent.change(refInput, { target: { value: 'brewcoldblue' } })
  expect(result.current.values.nickname).toBe('brewcoldblue')
})

describe('Form Submission', () => {
  it('should handle form submission, validation, loading state, and server response correctly', async () => {
    const initialValues = {
      email: 'abcd',
      password: 'asdqwe'
    }

    nock('http://useformtest.com')
      .post('/login', { email: 'abcd@email.com', password: 'asdqwe123' })
      .reply(200, { message: 'success!' })

    const onSubmit = (body: typeof initialValues) =>
      axios.post('http://useformtest.com/login', body)

    const validator = (data: typeof initialValues) => {
      const isValidMail = (str: string) => {
        if (str.includes('@')) return true
        else return false
      }
      const isValidPw = (str: string) => {
        if (str.length > 8) return true
        else return false
      }
      if (isValidMail(data.email) && isValidPw(data.password)) return true
      else return false
    }

    const { result } = renderHook(() =>
      useForm<typeof initialValues>({
        initialValues,
        onSubmit,
        validator
      })
    )

    render(
      <form data-testid="testform" onSubmit={result.current.submit}>
        <input
          placeholder="email"
          type="text"
          name="email"
          value={result.current.values.email}
          onChange={result.current.handleChange}
        />
        <input
          placeholder="password"
          type="text"
          name="password"
          value={result.current.values.password}
          onChange={result.current.handleChange}
        />
        <button type="submit">Submit</button>
      </form>
    )

    const emailInput = screen.getByPlaceholderText('email')
    const passwordInput = screen.getByPlaceholderText('password')

    const testform = screen.getByTestId('testform')

		fireEvent.submit(testform)

    waitFor(() => {
      expect(onSubmit).not.toHaveBeenCalled()
      expect(result.current.isLoading).toBe(false)
      expect(result.current.response).toBe(null)
    })

    fireEvent.change(emailInput, { target: { value: 'abcd@email.com' } })
    fireEvent.change(passwordInput, { target: { value: 'asdqwe123' } })
    fireEvent.submit(testform)

    waitFor(() => {
      expect(onSubmit).toHaveBeenCalled()
      expect(result.current.isLoading).toBe(false)
      expect(result.current.response).not.toBe(null)
    })

    nock.cleanAll()
  })
})

export const useForm = <T extends Object>({
  initialValues,
  onSubmit,
  validator,
  refInputNames = []
}: UseFormArgs<T>): UseForm<T> => {
  const [values, setValues] = useState<typeof initialValues>(initialValues)
  const [valid, setValid] = useState<boolean>(true)
  const [isLoading, setIsLoading] = useState<boolean>(false)
  const [response, setResponse] = useState<unknown>(null)

  const handleChange = (e: ChangeEvent<HTMLInputElement & HTMLTextAreaElement>) => {
    const t = e.target
    const check = t.type === 'checkbox' || t.type === 'radio'
    setValues(prevData => ({ ...prevData, [t.name]: check ? t.checked : t.value }))
  }

  const [currRefValues, refs] = useRefInputInit<T>(refInputNames, values)

  const mergeValues = (values: T, convertedRefValues: Record<keyof T, any>) => {
    if (!refInputNames.length) setValues({ ...values })
    else setValues({ ...values, ...convertedRefValues })
  }

  const submit = () => setIsLoading(true)

  useEffect(() => {
    if (isLoading) mergeValues(values, currRefValues())
    setValid(typeof validator === 'function' ? validator(values) : true)
  }, [isLoading])

  useEffect(() => {
    async function POST() {
      const res = await onSubmit(values)
      setResponse(res)
      setIsLoading(false)
    }

    if (isLoading && valid) POST()
  }, [isLoading, valid])

  const data = {
    values,
    setValues,
    handleChange,
    refs,
    refValues: currRefValues(),
    submit,
    isLoading,
    response
  }

  return data
}

function useRefInputInit<T>(
  refInputNames: (keyof T)[] = [],
  values: T
): [
  () => Record<(typeof refInputNames)[number], any>,
  Record<(typeof refInputNames)[number], RefObject<HTMLInputElement & HTMLTextAreaElement>>
] {
  type Refs = Record<
    (typeof refInputNames)[number],
    RefObject<HTMLInputElement & HTMLTextAreaElement>
  >
  type RefValues = Record<(typeof refInputNames)[number], any>

  const refs: Refs = {} as Refs
  refInputNames.forEach(k => (refs[k] = useRef<HTMLInputElement & HTMLTextAreaElement>(null)))

  const currRefValues: () => RefValues = () => {
    const refValues: RefValues = values
    refInputNames.forEach(k => (refValues[k] = refs[k]?.current?.value || values[k]))
    return refValues
  }

  return [currRefValues, refs]
}

export function createUseFormContext<T extends Object, K = {}>() {
  const FormContext = createContext<((UseForm<T> | Partial<UseForm<T>>) & K) | null>(null)
  return FormContext
} //저장해야 하는 것이 커스텀 훅의 결과물이어야 해서 초기값 지정이 어렵습니다.

export function useFormContext<T extends Object, K = {}>(
  arg: Context<((UseForm<T> | Partial<UseForm<T>>) & K) | null>
) {
  const ctx = useContext<((UseForm<T> | Partial<UseForm<T>>) & K) | null>(arg)
  if (!ctx) return useForm<T>({ initialValues: {} as T, onSubmit: () => {} })
  return ctx as UseForm<T> & K
}