Prevent Leaving Page

─ src
  └── shared
      └── hooks/          
          └── navigationGuardHook.tsx

import { Button, Dialog, Flex } from '@confy-ui/react/themes'
import ReactRouterPrompt from 'react-router-prompt'

/**
 * 네비게이션 가드 컴포넌트
 * @param props.confirm - 대화상자에 표시할 확인 메시지. 지정하지 않으면 기본 메시지가 사용됩니다.
 * @param props.enabled - 네비게이션 가드 활성화 여부. true일 때만 동작합니다.
 */
export function NavigationGuardHook(props: {
  confirm: string
  enabled: boolean
}) {
  return (
    <>
      <ReactRouterPrompt when={props.enabled}>
        {({
          isActive,
          onConfirm,
          onCancel
        }: {
          isActive: boolean // 대화상자 표시 여부
          onConfirm: () => void // 확인 버튼 클릭 시 호출될 함수
          onCancel: () => void // 취소 버튼 클릭 시 호출될 함수
        }) => (
          <Dialog.Root open={isActive}>
            ...
          </Dialog.Root>
        )}
      </ReactRouterPrompt>
    </>
  )
}

import { NavigationGuardHook } from '@/components/navigationGuardHook'
...

export default function LoginPage() {
  const { login, loginError, isLoggingIn, logout } = useAuth()
  const username = useUserinfoStore((state) => state.username)

  const form = useForm<LoginFormValues>({
    resolver: zodResolver(loginSchema),
    defaultValues: {
      email: '',
      password: ''
    },
    mode: 'onBlur'
  })

  ...

  return (
    <>
      <NavigationGuardHook
        enabled={Object.keys(form.formState.errors).length > 0}
        confirm='화면 이동 경고'
      />

      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className=''>
          <Grid gap='5' columns='360px 360px'>
            <Card variant='classic' size='4' key={0}>
              <Box height='40px' mb='4'>
                <Heading as='h3' size='6' mt='-1'>
                  Sign in
                </Heading>
              </Box>
              ...
            </Card>
            ...
          </Grid>
        </form>
      </Form>
    </>
  )
}

// 페이지 변경과 enable 조건을 감지하면 해당 컴포넌트가 작동합니다.
<NavigationGuardHook
  enabled={Object.keys(form.formState.errors).length > 0}
  confirm='화면 이동 경고'
/>