feat: 회원가입 후 로그인 처리 #10

src/components/auth/JoinForm.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { zodResolver } from '@hookform/resolvers/zod'
+import { useRouter } from 'next/navigation'
 import { useState } from 'react'
 import { FieldErrors, useForm } from 'react-hook-form'
 import { z } from 'zod'
@@ -19,6 +20,7 @@ import RequestButton from '@/components/RequestButton'
 import NewEmailFieldArea from '@/components/auth/NewEmailFieldArea'
 
 import { postSignUp } from '@/service/member'
+import useAuthStore from '@/store/useAuthStore'
 
 const defaultValues = {
 	newEmail: '',
@@ -31,6 +33,8 @@ const defaultValues = {
 export type DefaultValues = typeof defaultValues
 
 function JoinForm() {
+	const { login } = useAuthStore()
+	const router = useRouter()
 	const [isNicknameChecked, setIsNicknameChecked] = useState(false)
 
 	const form = useForm<z.infer<typeof joinSchema>>({
@@ -60,7 +64,10 @@ function JoinForm() {
 		if (res.state === RESPONSE_STATES.FAILED) {
 			throw new Error(ERROR_NOTICE.COMMON(res.error))
 		}
-		console.log('onSubmit', res)
+
+		const { token, email, nickname } = res.result
+		login(token, { email, nickname })
+		router.push('/')
 	}
 
 	function onErrors(errors: FieldErrors) {

src/service/http.ts

@@ -1,11 +1,11 @@
 import { ERROR_NOTICE, RESPONSE_STATES } from '@/constants/response'
 import { ErrorResponse, HttpMethodResult } from '@/types/response'
 
-export type ParamsObj = {
+export interface ParamsObj {
 	[key: string]: string | number
 }
 
-export type ErrorCatch = {
+export interface ErrorCatch {
 	response: {
 		data: string
 		status: string
@@ -16,15 +16,21 @@ export type ErrorCatch = {
 	config: string
 }
 
+export const httpHeaders = new Headers({
+	'Content-Type': 'application/json',
+})
+
 class Http {
 	service: string
 	url: string
 	authorization: string | null
+	headers: Headers
 
 	constructor(service: string) {
 		this.service = service
 		this.url = `${process.env.API_URL}/api/${service}`
 		this.authorization = null
+		this.headers = httpHeaders
 	}
 
 	async get<ResponseData>(
@@ -37,9 +43,7 @@ class Http {
 			const response = await fetch(uri, {
 				method: 'GET',
 				signal: this.getSignal(),
-				headers: {
-					'Content-Type': 'application/json',
-				},
+				headers: this.headers,
 			})
 			const { result } = await response.json()
 
@@ -62,9 +66,7 @@ class Http {
 			const response = await fetch(uri, {
 				method: 'POST',
 				signal: this.getSignal(),
-				headers: {
-					'Content-Type': 'application/json',
-				},
+				headers: this.headers,
 				body,
 			})
 			const { result } = await response.json()

src/service/member.ts

@@ -41,6 +41,7 @@ interface MemberResponse {
 	id: number
 	email: string
 	nickname: string
+	token: string
 }
 export const postSignUp = (payload: SignupPayload) => {
 	return http.post<MemberResponse, SignupPayload>(`/signup`, payload)

src/store/useAuthStore.ts

@@ -1,23 +1,37 @@
+import { useInfiniteQuery } from '@tanstack/react-query'
 import { create } from 'zustand'
 
+import { httpHeaders } from '@/service/http'
+
+const TOKEN_STORAGE_NAME = 'TERRACOTTA_TOKEN'
+const USERINFO_STORAGE_NAME = 'TERRACOTTA_USER_INFO'
+
+type UserInfo = {
+	email: string
+	nickname: string
+}
 type State = {
-	isLogin: boolean
-	userInfo: {
-		email: string
-		nickname: string
-	} | null
+	isLogin: boolean | undefined
+	userInfo: UserInfo | undefined
 }
 
 type Action = {
 	setIsLogin: (isLogin: State['isLogin']) => void
 	setUserInfo: (isLogin: State['userInfo']) => void
+	login: (token: string, userInfo: UserInfo) => void
 }
 
-const useAuthStore = create<State & Action>((set) => ({
-	isLogin: false,
-	userInfo: null,
+const useAuthStore = create<State & Action>((set, get) => ({
+	isLogin: undefined,
+	userInfo: undefined,
 	setIsLogin: (isLogin) => set(() => ({ isLogin })),
 	setUserInfo: (userInfo) => set(() => ({ userInfo })),
+	login: (token: string, userInfo: UserInfo) => {
+		sessionStorage.setItem(TOKEN_STORAGE_NAME, token)
+		sessionStorage.setItem(USERINFO_STORAGE_NAME, JSON.stringify(userInfo))
+		httpHeaders.set('Authorization', token)
+		set(() => ({ isLogin: true, userInfo }))
+	},
 }))
 
 export default useAuthStore