feat: user-button을 구현합니다

src/app/@types/auth.d.ts

@@ -1,11 +1,7 @@
 export {}
 
 declare module 'next-auth' {
-  interface User {
-    email: string
-  }
+  interface User {}
   interface Account {}
-  interface Session {
-    email: string
-  }
+  interface Session {}
 }

src/auth.ts

@@ -18,16 +18,13 @@ export const {
     CredentialsProvider({
       async authorize(credentials) {
         const { email, password } = await signInFormSchema.parseAsync(credentials)
-
-        console.log(email, 'email')
-        console.log(password, 'password')
         const authResponse = await fetch(`${process.env.NEXT_PUBLIC_LOCAL_BASE_URL}/user/sign-in`, {
           method: 'POST',
           headers: {
-            accept: 'application/json',
+            'Content-Type': 'application/json',
           },
           body: JSON.stringify({
-            email: email,
+            email,
             pw: password,
           }),
         })
@@ -36,18 +33,16 @@ export const {
           const parsed = cookie.parse(setCookie)
           cookies().set('connect.sid', parsed['connect.sid'], parsed)
         }
-
         if (!authResponse.ok) {
           return null
         }
 
         const user = await authResponse.json()
 
         return {
+          name: user.nickname,
           email: user.email,
-          nickname: user.nickname,
-          profileUrl: user.profileUrl,
-          ...user,
+          image: user.profileUrl,
         }
       },
     }),

src/entities/mock/api/handler/user/user.ts

@@ -1,39 +1,41 @@
 import { faker } from '@faker-js/faker'
-import { http, HttpResponse } from 'msw'
+import { http, HttpResponse, StrictRequest } from 'msw'
 
 import { generateProfileContent } from '@/entities/mock/generate/profile-content'
 import { MyLikeMovie } from '@/entities/movie/model/movie'
+import { User } from '@/entities/user/model'
 
-const allUser = new Map()
+const allUser: Map<string, User> = new Map()
 
-allUser.set(1, { id: 1, nickname: 'zero', email: 'zero@naver.com', profileUrl: null })
+allUser.set('zero@naver.com', { nickname: 'zero', email: 'zero@naver.com', profileUrl: null })
 
 export const userHandlers = [
-  http.post('/user/sign-up', async ({ request }) => {
-    const new_user = (await request.json()) as {
-      nickname: string
-      email: string
-    }
+  http.post('/user/sign-up', async ({ request }: { request: StrictRequest<User> }) => {
+    const { email, nickname } = await request.json()
 
-    const new_id = allUser.size
-    allUser.set(new_id, { id: new_id, ...new_user, profileUrl: null })
+    allUser.set(email, { email, nickname, profileUrl: null })
 
     return HttpResponse.json('ok', {
       headers: {
         'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/;Max-Age=0',
       },
     })
   }),
-  http.post('/user/sign-in', () => {
-    console.info('로그인')
-    return HttpResponse.json(
-      { id: 1, nickname: 'zero', email: 'zero@naver.com', profileUrl: null },
-      {
-        headers: {
-          'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/',
-        },
+
+  http.post('/user/sign-in', async ({ request }: { request: StrictRequest<User> }) => {
+    const { email } = await request.json()
+
+    const selectUser = allUser.get(email)
+
+    if (Object.is(selectUser, undefined)) {
+      return HttpResponse.json(null, { status: 401, statusText: '없는 유저를 조회하였습니다.' })
+    }
+
+    return HttpResponse.json(allUser.get(email), {
+      headers: {
+        'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/',
       },
-    )
+    })
   }),
   http.post('/user/sign-out', () => {
     console.info('로그아웃')

src/entities/user/model/user.ts

@@ -1,4 +1,5 @@
 export interface User {
+  id?: number | string
   nickname: string
   profileUrl: null | string
   email: string

src/features/auth/ui/SignUpForm.tsx

@@ -46,7 +46,7 @@ export function SignUpForm() {
       setChecked(prevState => [prevState[0], true])
     } catch (err) {
       if (err instanceof ZodError) {
-        console.error(err.errors[0].message)
+        toast.error(err.errors[0].message)
       }
     }
   }

src/features/auth/ui/UserButton.tsx

@@ -4,23 +4,22 @@ import Button from '@mui/material/Button'
 import Menu from '@mui/material/Menu'
 import MenuItem from '@mui/material/MenuItem'
 import { useRouter } from 'next/navigation'
-import { signOut } from 'next-auth/react'
+import { signOut, useSession } from 'next-auth/react'
 import { MouseEventHandler, useState } from 'react'
 import { toast } from 'react-toastify'
 
-import { userMock } from '@/entities/mock/data/user-mock'
 import { SITE_PATH } from '@/shared/constants'
 import { notoSans } from '@/shared/font'
 import { ProfileImage } from '@/shared/ui'
+import { getImageWithDefault } from '@/shared/util'
 
 import styles from './user-button.module.scss'
 
 export function UserButton() {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
   const router = useRouter()
   const open = Boolean(anchorEl)
-
-  const userData = userMock
+  const { data } = useSession()
   const handleClick: MouseEventHandler<HTMLButtonElement> = event => {
     setAnchorEl(event.currentTarget)
   }
@@ -38,7 +37,7 @@ export function UserButton() {
 
     if (event.target.id === 'profile') {
       router.push(SITE_PATH.my)
-    } else {
+    } else if (event.target.id === 'logout') {
       await logout()
     }
     setAnchorEl(null)
@@ -54,11 +53,11 @@ export function UserButton() {
         aria-expanded={open ? 'true' : undefined}
         onClick={handleClick}
       >
-        <span className={notoSans.className}>{userData.nickname}</span>
+        <span className={notoSans.className}>{data?.user?.name}</span>
         <ProfileImage
           sx={{ width: '48px', height: '48px', border: '2px solid #02E7F5' }}
-          src={userData.profileUrl ?? undefined}
-          alt={userData.nickname + '프로필 이미지'}
+          src={getImageWithDefault(data?.user?.image)}
+          alt={data?.user?.name + '프로필 이미지'}
         />
       </Button>
       <Menu