-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
15 changed files
with
419 additions
and
90 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
'use client'; | ||
|
||
import Spinner from '@app/_components/Spinner'; | ||
import { NEW_PATH } from '@app/_constants/urls'; | ||
import useFindIdMutation from '@app/_hooks/apis/user/useFindIdMutation'; | ||
import { | ||
Alert, | ||
AlertDescription, | ||
AlertTitle, | ||
} from '@app/_shadcn/components/ui/alert'; | ||
import { Button, buttonVariants } from '@app/_shadcn/components/ui/button'; | ||
import { Input } from '@app/_shadcn/components/ui/input'; | ||
import { cn } from '@app/_shadcn/lib/utils'; | ||
import { Terminal } from 'lucide-react'; | ||
import Link from 'next/link'; | ||
import { SubmitHandler, useForm } from 'react-hook-form'; | ||
|
||
function Page() { | ||
const { mutate, isPending } = useFindIdMutation(); | ||
const { register, handleSubmit } = useForm<{ email: string }>(); | ||
|
||
const onSubmitValid: SubmitHandler<{ | ||
email: string; | ||
}> = ({ email }) => { | ||
mutate(email); | ||
}; | ||
|
||
return ( | ||
<section className="small-center absolute-center flex flex-col gap-4"> | ||
<Alert> | ||
<Terminal className="size-4" /> | ||
<AlertTitle>ID 찾기</AlertTitle> | ||
<AlertDescription> | ||
이메일로 가입하신 ID를 전송해드릴게요. | ||
</AlertDescription> | ||
</Alert> | ||
<form | ||
onSubmit={handleSubmit(onSubmitValid)} | ||
className=" flex flex-col gap-4" | ||
> | ||
<Input | ||
type="email" | ||
label="이메일" | ||
placeholder="가입한 이메일을 입력해주세요." | ||
{...register('email', { required: true })} | ||
/> | ||
|
||
<Button type="submit" disabled={isPending}> | ||
{isPending && <Spinner className="mr-2" />} | ||
ID 찾기{' '} | ||
</Button> | ||
<div className="flex justify-between gap-2"> | ||
<Link | ||
className={cn(buttonVariants({ variant: 'secondary' }), 'w-full')} | ||
href={NEW_PATH.passwordFind.url} | ||
> | ||
비밀번호 찾으러가기 | ||
</Link> | ||
<Link | ||
className={cn(buttonVariants({ variant: 'secondary' }), 'w-full')} | ||
href={NEW_PATH.login.url} | ||
> | ||
로그인 하러가기 | ||
</Link> | ||
</div> | ||
</form> | ||
</section> | ||
); | ||
} | ||
|
||
export default Page; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
'use client'; | ||
|
||
import Spinner from '@app/_components/Spinner'; | ||
import { NEW_PATH } from '@app/_constants/urls'; | ||
import useFindPasswordMutation from '@app/_hooks/apis/user/useFindPasswordMutation'; | ||
import { | ||
Alert, | ||
AlertDescription, | ||
AlertTitle, | ||
} from '@app/_shadcn/components/ui/alert'; | ||
import { Button, buttonVariants } from '@app/_shadcn/components/ui/button'; | ||
import { Input } from '@app/_shadcn/components/ui/input'; | ||
import { cn } from '@app/_shadcn/lib/utils'; | ||
import { Terminal } from 'lucide-react'; | ||
import Link from 'next/link'; | ||
import { SubmitHandler, useForm } from 'react-hook-form'; | ||
|
||
function Page() { | ||
const { mutate, isPending } = useFindPasswordMutation(); | ||
const { register, handleSubmit } = useForm<{ email: string }>(); | ||
|
||
const onSubmitValid: SubmitHandler<{ | ||
email: string; | ||
}> = ({ email }) => { | ||
mutate(email); | ||
}; | ||
|
||
return ( | ||
<section className="small-center absolute-center flex flex-col gap-4"> | ||
<Alert> | ||
<Terminal className="size-4" /> | ||
<AlertTitle>비밀번호 찾기</AlertTitle> | ||
<AlertDescription> | ||
가입하신 이메일로 초기화된 비밀번호를 전송해드릴게요. | ||
</AlertDescription> | ||
</Alert> | ||
|
||
<form | ||
onSubmit={handleSubmit(onSubmitValid)} | ||
className="flex flex-col gap-4" | ||
> | ||
<Input | ||
label="이메일" | ||
placeholder="가입한 이메일을 입력해주세요." | ||
{...register('email', { required: true })} | ||
/> | ||
<Button type="submit" disabled={isPending}> | ||
{isPending && <Spinner className="mr-2" />} | ||
비밀번호 초기화하기 | ||
</Button> | ||
<div className="flex justify-between gap-2"> | ||
<Link | ||
className={cn(buttonVariants({ variant: 'secondary' }), 'w-full')} | ||
href={NEW_PATH.idFind.url} | ||
> | ||
ID 찾으러가기 | ||
</Link> | ||
<Link | ||
className={cn(buttonVariants({ variant: 'secondary' }), 'w-full')} | ||
href={NEW_PATH.login.url} | ||
> | ||
로그인 하러가기 | ||
</Link> | ||
</div> | ||
</form> | ||
</section> | ||
); | ||
} | ||
|
||
export default Page; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,83 @@ | ||
'use client'; | ||
|
||
import { INPUT_ERROR, REQUIRED_MESSAGE } from '@app/_constants/message'; | ||
import useUpdatePasswordMutation from '@app/_hooks/apis/user/useUpdatePassworMutation'; | ||
import { Button } from '@app/_shadcn/components/ui/button'; | ||
import { Input } from '@app/_shadcn/components/ui/input'; | ||
import { PW_REGEX } from '@app/_utils/regex'; | ||
import { SubmitHandler, useForm } from 'react-hook-form'; | ||
|
||
interface UpdatePasswordForm { | ||
newPassword: string; | ||
newPasswordConfirm: string; | ||
} | ||
|
||
function Page() { | ||
const { | ||
register, | ||
handleSubmit, | ||
getValues, | ||
formState: { errors }, | ||
} = useForm<UpdatePasswordForm>(); | ||
|
||
const { mutate } = useUpdatePasswordMutation(); | ||
|
||
const newPasswordRegister = register('newPassword', { | ||
required: REQUIRED_MESSAGE.pw, | ||
pattern: { value: PW_REGEX, message: INPUT_ERROR.pw }, | ||
}); | ||
|
||
const newPasswordConfirmRegister = register('newPasswordConfirm', { | ||
required: REQUIRED_MESSAGE.pwConfirm, | ||
validate: (newPasswordConfirm) => { | ||
if (getValues('newPassword') !== newPasswordConfirm) | ||
return INPUT_ERROR.pwConfirm; | ||
return true; | ||
}, | ||
}); | ||
|
||
const onSubmitValid: SubmitHandler<UpdatePasswordForm> = ({ | ||
newPassword, | ||
}) => { | ||
mutate(newPassword); | ||
}; | ||
|
||
return ( | ||
<form | ||
className="flex flex-col gap-4" | ||
onSubmit={handleSubmit(onSubmitValid)} | ||
> | ||
<div> | ||
<Input | ||
className="mb-2" | ||
label="새 비밀번호" | ||
placeholder="새 비밀번호를 입력해 주세요." | ||
type="password" | ||
{...newPasswordRegister} | ||
/> | ||
<span className="text-sm text-destructive"> | ||
{errors.newPassword?.message} | ||
</span> | ||
</div> | ||
|
||
<div> | ||
<Input | ||
className="mb-2" | ||
label="새 비밀번호 확인" | ||
placeholder="새 비밀번호를 한 번 더 입력해 주세요." | ||
type="password" | ||
{...newPasswordConfirmRegister} | ||
/> | ||
<span className="text-sm text-destructive"> | ||
{errors.newPasswordConfirm?.message} | ||
</span> | ||
</div> | ||
|
||
<Button className="mt-2" type="submit"> | ||
변경하기 | ||
</Button> | ||
</form> | ||
); | ||
} | ||
|
||
export default Page; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import loginService from '@app/_service/loginService'; | ||
import { useToast } from '@app/_shadcn/components/ui/use-toast'; | ||
import { useMutation } from '@tanstack/react-query'; | ||
|
||
function useFindIdMutation() { | ||
const { toast } = useToast(); | ||
|
||
return useMutation({ | ||
mutationFn: (email: string) => loginService.findId(email), | ||
onSuccess: () => | ||
toast({ | ||
description: '이메일로 가입한 아이디를 전송했어요.', | ||
}), | ||
|
||
onError: () => | ||
toast({ | ||
variant: 'destructive', | ||
description: '가입한 이메일을 찾을 수 없어요.', | ||
}), | ||
}); | ||
} | ||
|
||
export default useFindIdMutation; |
Oops, something went wrong.