[#120] ✨ create sign-up query

Author: 장아영

.env

@@ -1 +1 @@
-NEXT_PUBLIC_API_BASE_URL=http://43.202.50.174:8080/
+# NEXT_PUBLIC_API_BASE_URL=http://localhost:3000

src/app/(pages)/sign-in/page.tsx

@@ -1,10 +1,13 @@
 'use client'
 
+import { useRouter } from 'next/navigation'
+
 import { SubmitHandler, useForm } from 'react-hook-form'
 
 import { SignInRequest } from '@/types/auth.types'
 
 export default function LoginPage(): JSX.Element {
+  const router = useRouter()
   const {
     register,
     handleSubmit,
@@ -28,6 +31,7 @@ export default function LoginPage(): JSX.Element {
       const result = await response.json()
       console.log('Login successful:', result)
       alert('로그인 성공')
+      router.push('/')
     } catch (error) {
       console.error('Login error', error)
       alert('로그인 요청 중 오류 발생')

src/app/(pages)/sign-up/page.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+import { SubmitHandler, useForm } from 'react-hook-form'
+
+import { SignUpRequest } from '@/types/auth.types'
+
+import { SignUp } from '@/services/auth/auth'
+
+export default function SignUpPage(): JSX.Element {
+  const router = useRouter()
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<SignUpRequest>()
+
+  const onSubmit: SubmitHandler<SignUpRequest> = async data => {
+    try {
+      const response = await SignUp(data)
+      if (!response.ok) {
+        console.error('회원가입 실패')
+        alert('회원가입 실패')
+        return
+      }
+      const result = await response.json()
+      console.log('회원가입 성공:', result)
+
+      alert('회원가입이 완료되었습니다!')
+      router.push('/sign-in')
+    } catch (error) {
+      console.error('회원가입 요청 중 오류 발생', error)
+      alert('회원가입 중 오류 발생')
+    }
+  }
+
+  return (
+    <div>
+      <h1>회원가입</h1>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div>
+          <label htmlFor='email'>이메일</label>
+          <input
+            id='email'
+            type='email'
+            {...register('email', { required: '이메일을 입력하세요.' })}
+          />
+        </div>
+        <div>
+          <label htmlFor='name'>이름</label>
+          <input
+            id='name'
+            type='name'
+            {...register('name', { required: '이름을 입력하세요.' })}
+          />
+        </div>
+        <div>
+          <label htmlFor='password'>비밀번호</label>
+          <input
+            id='password'
+            type='password'
+            {...register('password', { required: '비밀번호를 입력하세요.' })}
+          />
+        </div>
+        <div>
+          <label htmlFor='gitHub'>깃허브 주소</label>
+          <input
+            id='gitHub'
+            type='gitHub'
+            {...register('gitHub', { required: '깃허브 주소를 입력하세요.' })}
+          />
+        </div>
+        <button type='submit'>회원가입</button>
+      </form>
+    </div>
+  )
+}

src/services/auth/auth.ts

@@ -1,4 +1,4 @@
-import { SignInRequest, SignInResponse } from '@/types/auth.types'
+import { SignInRequest, SignInResponse, SignUpRequest} from '@/types/auth.types'
 import axios, { AxiosResponse } from 'axios'
 
 const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL
@@ -24,3 +24,14 @@ export const signIn = async (
 export const signOut = async () => {
   return await axios.post('/v1/auth/logout', {}, { withCredentials: true })
 }
+ 
+const BACKEND_BASE_URL = process.env.NEXT_PUBLIC_BACKEND_BASE_URL
+export const SignUp = async (data: SignUpRequest): Promise<Response> => {
+  return await fetch(`${BACKEND_BASE_URL}/v1/auth/sign-up`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(data),
+  })
+}