[#56] 로그인 기능 구현

.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_BASE_URL=http://43.202.50.174:8080/

package.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "@tanstack/react-query": "^5.59.19",
+    "axios": "^1.7.7",
     "clsx": "^2.1.1",
     "next": "^15.0.2",
     "react": "^18.3.1",
@@ -55,7 +56,8 @@
     "storybook": "^8.4.2",
     "tailwindcss": "^3.4.14",
     "ts-jest": "^29.2.5",
-    "ts-node": "^10.9.2"
+    "ts-node": "^10.9.2",
+    "typescript": "^5.6.3"
   },
   "scripts": {
     "dev": "next dev",
@@ -76,6 +78,11 @@
       "path": "./commit-config.js"
     }
   },
+  "pnpm": {
+    "overrides": {
+      "@types/node": "22.9.0"
+    }
+  },
   "name": "",
   "version": ""
 }

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

@@ -0,0 +1,54 @@
+'use client'
+
+import React from 'react'
+import { SubmitHandler, useForm } from 'react-hook-form'
+
+import { SignInRequest } from '@/types/auth.types'
+
+import { signIn } from '@/services/auth/auth'
+
+export default function LoginPage(): JSX.Element {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<SignInRequest>()
+
+  const onSubmit: SubmitHandler<SignInRequest> = async data => {
+    try {
+      await signIn(data) // 로그인 요청
+      alert('로그인 성공')
+      // window.location.href = '/' // 리다이렉트
+    } 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: '이메일을 입력하세요.' })}
+          />
+          {errors.email && <span>{errors.email.message}</span>}
+        </div>
+        <div>
+          <label htmlFor='password'>비밀번호</label>
+          <input
+            id='password'
+            type='password'
+            {...register('password', { required: '비밀번호를 입력하세요.' })}
+          />
+          {errors.password && <span>{errors.password.message}</span>}
+        </div>
+        <button type='submit'>로그인</button>
+      </form>
+    </div>
+  )
+}

src/app/page.tsx

@@ -1,3 +1,34 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+import axios from 'axios'
+
+import { useAuthStore } from '@/stores/useAuthStore'
+
 export default function Home(): JSX.Element {
-  return <>홈페이지</>
+  const { logout } = useAuthStore()
+  const router = useRouter()
+
+  const handleLogout = async () => {
+    try {
+      await axios.post('/v1/auth/logout', {}, { withCredentials: true })
+      console.log('서버 로그아웃 성공')
+
+      logout()
+
+      router.push('/sign-in')
+      console.log('로그아웃 성공')
+    } catch (error) {
+      console.error('로그아웃 실패:', error)
+      alert('로그아웃에 실패했습니다.')
+    }
+  }
+
+  return (
+    <>
+      <div>홈페이지</div>
+      <button onClick={handleLogout}>로그아웃</button>
+    </>
+  )
 }

src/services/auth/auth.ts

@@ -0,0 +1,30 @@
+import { SignInRequest, SignInResponse } from '@/types/auth.types'
+import axios from 'axios'
+
+// 환경 변수에서 API BASE URL 가져오기
+const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL
+
+if (!BASE_URL) {
+  throw new Error("환경 변수 'NEXT_PUBLIC_API_BASE_URL'이 정의되지 않았습니다.")
+}
+
+// Axios 인스턴스 생성
+const apiClient = axios.create({
+  baseURL: BASE_URL,
+  //   withCredentials: true,
+})
+
+// 로그인 요청 처리
+export const signIn = async (data: SignInRequest): Promise<SignInResponse> => {
+  try {
+    const response = await apiClient.post('/v1/auth/sign-in', data, {
+      //   withCredentials: true,
+    })
+    console.log('로그인 성공:', response.data)
+    return response.data
+    console.log(response.data.result)
+  } catch (error) {
+    console.error('로그인 실패:', (error as Error).message)
+    throw error // 에러를 호출자에게 전달
+  }
+}

src/stores/useAuthStore.ts

@@ -0,0 +1,15 @@
+import { create } from 'zustand'
+
+interface AuthState {
+  isAuthenticated: boolean
+  user: User | null
+  login: (user: User) => void
+  logout: () => void
+}
+
+export const useAuthStore = create<AuthState>(set => ({
+  isAuthenticated: false,
+  user: null,
+  login: user => set({ isAuthenticated: true, user }),
+  logout: () => set({ isAuthenticated: false, user: null }),
+}))

src/types/apiResponse.types.d.ts

@@ -1,8 +1,8 @@
-export interface ApiResponse<T = unknown> {
+interface ApiResponse<T = unknown> {
   isSuccess: SuccessResponse
   code: StatusCode
   message: Message
   result?: T
 }
-export type ApiResponseObject = ApiResponse<Record<string, never>>
-export type ApiResponseString = ApiResponse<string>
+type ApiResponseObject = ApiResponse<Record<string, never>>
+type ApiResponseString = ApiResponse<string>

src/types/auth.types.d.ts

@@ -6,6 +6,13 @@ export interface SignUpRequest {
 }
 
 export interface SignInRequest {
-  email?: Email
-  password?: Password
+  email: Email
+  password: Password
 }
+
+export interface SignInResponseResult extends User {
+  accessToken: Token
+  refreshToken: Token
+}
+
+export type SignInResponse = ApiResponse<SignInResponseResult>

src/types/global.types.d.ts

@@ -1,13 +1,21 @@
-type Tag = string
 type Id = number
 type TechStack = string
-type Title = string
-type Content = string
 type SuccessResponse = boolean
 type StatusCode = string
 type Message = string
+type URL = string
+type Token = string
 
 type Email = string
 type Password = string
 type Name = string
+type Nickname = string
 type GitHub = string
+
+interface User {
+  id: Id
+  email: Email
+  name: Name
+  nickname: Nickname
+  imageUrl: URL
+}