-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #13 from ho991217/dev
v0.0.1 배포
- Loading branch information
Showing
33 changed files
with
5,275 additions
and
120 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
File renamed without changes.
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,41 @@ | ||
| 'use server'; | ||
|
|
||
| import api from '@/api'; | ||
| import { API_ROUTES } from '@/constants'; | ||
| import { SignUpSchema } from './schema'; | ||
| import { TokenSchema } from '../schema'; | ||
| import { redirect } from 'next/navigation'; | ||
|
|
||
| export async function checkNicknameDuplicate(nickname: string) { | ||
| try { | ||
| const res = await api.get<{ data: boolean }>( | ||
| API_ROUTES.user.valid(nickname) | ||
| ); | ||
| if (res.data === false) { | ||
| throw new Error('이미 사용중인 닉네임입니다.'); | ||
| } | ||
| } catch (error) { | ||
| throw error; | ||
| } | ||
| } | ||
|
|
||
| type SignUpReqeust = { | ||
| nickname: SignUpSchema['nickname']; | ||
| password: SignUpSchema['password']; | ||
| }; | ||
|
|
||
| type SignUpResponse = { | ||
| message: string; | ||
| }; | ||
|
|
||
| export async function signUp({ | ||
| nickname, | ||
| password, | ||
| token, | ||
| }: SignUpReqeust & TokenSchema) { | ||
| await api.post<SignUpReqeust, SignUpResponse>(API_ROUTES.user.signup(token), { | ||
| nickname, | ||
| password, | ||
| }); | ||
| redirect('/ko/signup/complete'); | ||
| } |
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,132 @@ | ||
| 'use client'; | ||
|
|
||
| import { Funnel, Header } from '@/components/signup'; | ||
| import { AnimatePresence } from 'framer-motion'; | ||
| import { useSearchParams } from 'next/navigation'; | ||
| import { TransformerSubtitle } from '@/components/signup/header'; | ||
| import { Button, Form } from '@/components/common'; | ||
| import { useEffect, useRef, useState } from 'react'; | ||
|
|
||
| import { useLocale } from 'next-intl'; | ||
| import { useRouter } from 'next/navigation'; | ||
| import { tokenSchema } from '../schema'; | ||
| import { nickNameSchema, passwordSchema, signUpSchema } from './schema'; | ||
| import { checkNicknameDuplicate, signUp } from './action'; | ||
|
|
||
| const steps = ['닉네임', '비밀번호'] as const; | ||
|
|
||
| type Steps = (typeof steps)[number]; | ||
|
|
||
| export default function Page() { | ||
| const [loading, setLoading] = useState(false); | ||
| const [step, setStep] = useState<Steps>('닉네임'); | ||
| const currentStep = steps.indexOf(step); | ||
| const isLastStep = currentStep === steps.length; | ||
| const [nicknameError, setNicknameError] = useState<string>(''); | ||
| const passwordRef = useRef<HTMLInputElement>(null); | ||
| const passwordCheckRef = useRef<HTMLInputElement>(null); | ||
|
|
||
| const searchParams = useSearchParams(); | ||
| const token = searchParams.get('token'); | ||
| const validToken = tokenSchema.safeParse({ token }); | ||
| const locale = useLocale(); | ||
| const router = useRouter(); | ||
|
|
||
| if (!token || !validToken.success) { | ||
| throw new Error('비정상적인 토큰입니다.'); | ||
| } | ||
|
|
||
| const handleSubmit = async (data: any) => { | ||
| switch (step) { | ||
| case '닉네임': | ||
| setLoading(true); | ||
| const unique = await verifyNickname(data.nickname); | ||
| setLoading(false); | ||
| unique && onNext(step); | ||
| break; | ||
| case '비밀번호': | ||
| setLoading(true); | ||
| try { | ||
| await signUp({ | ||
| nickname: data.nickname, | ||
| password: data.password, | ||
| token, | ||
| }); | ||
| router.push(`/${locale}/signup/complete`); | ||
| } catch (error) { | ||
| setLoading(false); | ||
| throw error; | ||
| } | ||
| break; | ||
| } | ||
| }; | ||
|
|
||
| const verifyNickname = async (nickname: string) => { | ||
| try { | ||
| await checkNicknameDuplicate(nickname); | ||
| if (nicknameError) setNicknameError(''); | ||
| return true; | ||
| } catch (error) { | ||
| setNicknameError('이미 사용중인 닉네임입니다.'); | ||
| return false; | ||
| } | ||
| }; | ||
|
|
||
| const onNext = async (currentStep: Steps) => { | ||
| if (isLastStep) return; | ||
| if (currentStep === '닉네임') { | ||
| setStep('비밀번호'); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| if (passwordRef.current && step === '비밀번호') { | ||
| passwordRef.current.focus(); | ||
| } | ||
| }, [passwordRef, step]); | ||
|
|
||
| return ( | ||
| <AnimatePresence initial={false}> | ||
| <Header> | ||
| <Header.Title>사용자 정보 설정</Header.Title> | ||
| <Header.Subtitle> | ||
| {step === '닉네임' && <TransformerSubtitle text='닉네임을' />} | ||
| {step === '비밀번호' && <TransformerSubtitle text='비밀번호를' />} | ||
| <div className='ml-1'>입력해주세요.</div> | ||
| </Header.Subtitle> | ||
| </Header> | ||
| <Form | ||
| schema={step === '닉네임' ? nickNameSchema : signUpSchema} | ||
| onSubmit={handleSubmit} | ||
| validateOn='onChange' | ||
| > | ||
| <Funnel<typeof steps> step={step} steps={steps}> | ||
| <Funnel.Step name='비밀번호'> | ||
| <Form.Password | ||
| ref={passwordCheckRef} | ||
| label='비밀번호 확인' | ||
| name='passwordCheck' | ||
| placeholder='8자 이상' | ||
| /> | ||
| <Form.Password | ||
| ref={passwordRef} | ||
| label='비밀번호' | ||
| placeholder='8자 이상' | ||
| /> | ||
| </Funnel.Step> | ||
| <Funnel.Step name='닉네임'> | ||
| <Form.Text | ||
| label='닉네임' | ||
| placeholder='날으는 다람쥐' | ||
| name='nickname' | ||
| customError={nicknameError} | ||
| /> | ||
| </Funnel.Step> | ||
| </Funnel> | ||
| <Form.Button variant='bottom' isLoading={loading}> | ||
| 다음 | ||
| </Form.Button> | ||
| </Form> | ||
| </AnimatePresence> | ||
| ); | ||
| } |
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,27 @@ | ||
| import { z } from 'zod'; | ||
|
|
||
| export const nickNameSchema = z.object({ | ||
| nickname: z.string().min(2, '닉네임은 2자리 이상 입력해주세요.'), | ||
| }); | ||
|
|
||
| export const passwordSchema = z.object({ | ||
| password: z.string().min(8, '비밀번호는 8자리 이상 입력해주세요.'), | ||
| }); | ||
|
|
||
| export const signUpSchema = z | ||
| .object({ | ||
| nickname: z.string().min(2, '닉네임은 2자리 이상 입력해주세요.'), | ||
| password: z.string().min(8, '비밀번호는 8자리 이상 입력해주세요.'), | ||
| passwordCheck: z.string(), | ||
| }) | ||
| .superRefine(({ passwordCheck, password }, ctx) => { | ||
| if (passwordCheck !== password) { | ||
| ctx.addIssue({ | ||
| code: z.ZodIssueCode.custom, | ||
| message: '비밀번호가 일치하지 않습니다.', | ||
| path: ['passwordCheck'], | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| export type SignUpSchema = z.infer<typeof signUpSchema>; |
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,7 @@ | ||
| import { z } from 'zod'; | ||
|
|
||
| export const tokenSchema = z.object({ | ||
| token: z.string().uuid(), | ||
| }); | ||
|
|
||
| export type TokenSchema = z.infer<typeof tokenSchema>; |
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
Oops, something went wrong.