feat: 닉네임 중복 검사 api 연결

next.config.mjs

@@ -1,6 +1,15 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'standalone',
+
+  async rewrites() {
+    return [
+      {
+        source: '/api/:path*', 
+        destination: 'https://cnergy.p-e.kr/:path*', 
+      },
+    ]
+  },
 }
 
 export default nextConfig

src/app/home/api/queries.ts

@@ -20,8 +20,5 @@ export const usePostQuickStart = () => {
   return useMutation({
     mutationKey: ['quick-start'],
     mutationFn: (data: QuickStartRequest) => postQuickStart(data),
-    onMutate: () => {},
-    onSuccess: () => {},
-    onError: () => {},
   })
 }

src/app/start/api/api.ts

@@ -1,6 +1,6 @@
 import { http } from '@/api'
 import { UserInfo } from '@/store/useUserInfo'
-import { useMutation } from '@tanstack/react-query'
+import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
 import { useRouter } from 'next/navigation'
 
 export const postOnboard = (data: UserInfo) => {
@@ -10,6 +10,12 @@ export const postOnboard = (data: UserInfo) => {
   })
 }
 
+export const getNicknamePossible = (nickname: string) => {
+  return http.get({
+    url: `/members/check-nickname?nickname=${nickname}`,
+  })
+}
+
 export const usePostOnboard = () => {
   const router = useRouter()
 
@@ -23,3 +29,11 @@ export const usePostOnboard = () => {
     },
   })
 }
+
+export const useGetNickname = (nickname: string) => {
+  useSuspenseQuery({
+    queryKey: ['nickname', nickname],
+    queryFn: () => getNicknamePossible(nickname),
+    select: (data) => data,
+  })
+}

src/app/start/components/Step1.tsx

@@ -3,7 +3,8 @@
 import { Input } from '@/components/common'
 import useUserInfo from '@/store/useUserInfo'
 import Image from 'next/image'
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { getNicknamePossible } from '../api/api'
 
 interface Step1Props {
   setError: (error: boolean) => void
@@ -13,13 +14,31 @@ export default function Step1({ setError }: Step1Props) {
   const { userInfo, setUserInfo } = useUserInfo()
   const [username, setUsername] = useState(userInfo.nickname)
   const [errorMessage, setErrorMessage] = useState<string>()
+  const inputTimeout = useRef<NodeJS.Timeout | null>(null)
 
   const validateName = (name: string) => {
     const regex = /^[가-힣a-zA-Z0-9]{0,6}$/
     return regex.test(name)
   }
 
-  const handleChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const checkNickname = async (nickname: string) => {
+    try {
+      const response = await getNicknamePossible(nickname)
+
+      if (response.data === false) {
+        setErrorMessage('이미 사용 중인 닉네임입니다.')
+        setError(true)
+      } else {
+        setErrorMessage('')
+        setError(false)
+      }
+    } catch (error) {
+      setErrorMessage('닉네임 확인 중 오류가 발생했습니다.')
+      setError(true)
+    }
+  }
+
+  const handleChangeName = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const newName = e.target.value
     setUsername(newName)
 
@@ -29,8 +48,28 @@ export default function Step1({ setError }: Step1Props) {
       setError(false)
       setErrorMessage('')
       setUserInfo({ ...userInfo, nickname: newName })
+
+      if (inputTimeout.current) {
+        clearTimeout(inputTimeout.current)
+      }
+
+      inputTimeout.current = setTimeout(() => {
+        if (newName.trim() !== '') {
+          checkNickname(newName)
+        }
+      }, 500)
     }
   }
+
+  // 컴포넌트 언마운트 시 타이머 정리
+  useEffect(() => {
+    return () => {
+      if (inputTimeout.current) {
+        clearTimeout(inputTimeout.current)
+      }
+    }
+  }, [])
+
   return (
     <div className="px-20">
       <h1 className="title">