-
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
10 changed files
with
853 additions
and
58 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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,70 @@ | ||
| 'use client' | ||
|
|
||
| import Link from 'next/link' | ||
| import { useEffect } from 'react' | ||
|
|
||
| import { Button } from '@/components/ui/button' | ||
| import { | ||
| DropdownMenu, | ||
| DropdownMenuContent, | ||
| DropdownMenuItem, | ||
| DropdownMenuSeparator, | ||
| DropdownMenuTrigger, | ||
| } from '@/components/ui/dropdown-menu' | ||
|
|
||
| import useAuthStore from '@/store/useAuthStore' | ||
|
|
||
| function HeaderAuthButtons() { | ||
| const { isLogin, logout, userInfo, checkLogin } = useAuthStore() | ||
|
|
||
| function onClickLogout() { | ||
| logout() | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| checkLogin() | ||
| }, []) | ||
|
|
||
| if (isLogin === undefined) return | ||
|
|
||
| return ( | ||
| <> | ||
| {isLogin ? ( | ||
| <> | ||
| <DropdownMenu> | ||
| <DropdownMenuTrigger className="flex h-9 w-9 items-center justify-center overflow-hidden whitespace-nowrap rounded-full bg-accent text-xs leading-none"> | ||
| {userInfo?.nickname} | ||
| </DropdownMenuTrigger> | ||
| <DropdownMenuContent> | ||
| <DropdownMenuItem asChild> | ||
| <Link href="/auth/my" className="cursor-pointer"> | ||
| 마이페이지 | ||
| </Link> | ||
| </DropdownMenuItem> | ||
| <DropdownMenuSeparator /> | ||
| <DropdownMenuItem asChild> | ||
| <button | ||
| className="w-full cursor-pointer" | ||
| onClick={onClickLogout} | ||
| > | ||
| 로그아웃 | ||
| </button> | ||
| </DropdownMenuItem> | ||
| </DropdownMenuContent> | ||
| </DropdownMenu> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <Button variant="outline" asChild> | ||
| <Link href="/auth/login">로그인</Link> | ||
| </Button> | ||
| <Button variant="outline" asChild> | ||
| <Link href="/auth/join">회원가입</Link> | ||
| </Button> | ||
| </> | ||
| )} | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default HeaderAuthButtons |
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,110 @@ | ||
| 'use client' | ||
|
|
||
| import { zodResolver } from '@hookform/resolvers/zod' | ||
| import { useRouter } from 'next/navigation' | ||
| import { FieldErrors, useForm } from 'react-hook-form' | ||
| import { z } from 'zod' | ||
|
|
||
| import { loginSchema } from '@/utils/formSchema' | ||
|
|
||
| import { PLACEHOLDERS, VALIDATIONS } from '@/constants/form' | ||
| import { ERROR_NOTICE, RESPONSE_STATES } from '@/constants/response' | ||
|
|
||
| import { Button } from '@/components/ui/button' | ||
| import { Form } from '@/components/ui/form' | ||
|
|
||
| import BaseInput from '@/components/BaseInput' | ||
| import ButtonWrap from '@/components/ButtonWrap' | ||
|
|
||
| import { postLogin } from '@/service/member' | ||
| import useAuthStore from '@/store/useAuthStore' | ||
|
|
||
| const defaultValues = { | ||
| email: '', | ||
| password: '', | ||
| } | ||
|
|
||
| function LoginForm() { | ||
| const router = useRouter() | ||
| const { login } = useAuthStore() | ||
|
|
||
| const form = useForm<z.infer<typeof loginSchema>>({ | ||
| resolver: zodResolver(loginSchema), | ||
| defaultValues: defaultValues, | ||
| }) | ||
|
|
||
| async function onSubmit(values: z.infer<typeof loginSchema>) { | ||
| const { email, password } = values | ||
|
|
||
| const res = await postLogin({ | ||
| email, | ||
| password, | ||
| }) | ||
|
|
||
| if (res.state === RESPONSE_STATES.SUCCESS) { | ||
| console.log('onSubmit', res) | ||
| const { email, nickname, token } = res.result | ||
| const userInfo = { email, nickname } | ||
| login(token, userInfo) | ||
| router.push('/') | ||
| return | ||
| } | ||
|
|
||
| const { | ||
| error: { errorMessage }, | ||
| } = res | ||
|
|
||
| switch (errorMessage) { | ||
| case '이메일 또는 패스워드가 일치하지 않습니다.': | ||
| form.setError('email', { type: 'custom', message: '' }) | ||
| form.setError('password', { | ||
| type: 'custom', | ||
| message: VALIDATIONS.LOGIN, | ||
| }) | ||
| break | ||
| default: | ||
| form.setError('email', { | ||
| type: 'custom', | ||
| message: ERROR_NOTICE.COMMON(res.error), | ||
| }) | ||
| } | ||
| } | ||
|
|
||
| function onErrors(errors: FieldErrors) { | ||
| console.log('form submit validation', errors) | ||
| } | ||
|
|
||
| return ( | ||
| <div className="space-y-8"> | ||
| <Form {...form}> | ||
| <form | ||
| onSubmit={form.handleSubmit(onSubmit, onErrors)} | ||
| className="space-y-8" | ||
| > | ||
| <BaseInput | ||
| control={form.control} | ||
| name="email" | ||
| label="이메일" | ||
| placeholder={PLACEHOLDERS.EMAIL} | ||
| autoComplete="nickname" | ||
| /> | ||
| <BaseInput | ||
| control={form.control} | ||
| type="password" | ||
| name="password" | ||
| label="비밀번호" | ||
| placeholder={PLACEHOLDERS.PASSWORD} | ||
| autoComplete="new-password" | ||
| /> | ||
| <ButtonWrap alignX="center"> | ||
| <Button type="submit" className="mx-auto"> | ||
| 로그인 | ||
| </Button> | ||
| </ButtonWrap> | ||
| </form> | ||
| </Form> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default LoginForm |
Oops, something went wrong.