CLAP-205 로그인 관련 API 연결

src/api/auth.ts

@@ -0,0 +1,27 @@
+import axiosInstance from '@/utils/axios'
+import Cookies from 'js-cookie'
+
+export const postLogin = async (nickname: string, password: string) => {
+  const body = {
+    nickname: nickname,
+    password: password
+  }
+  const sessionIdValue = '123'
+  try {
+    const response = await axiosInstance.post('/api/auths/login', body, {
+      headers: {
+        sessionId: sessionIdValue
+      }
+    })
+
+    Cookies.set('accessToken', response.data.accessToken, {
+      path: '/',
+      sameSite: 'strict'
+    })
+
+    return response.data
+  } catch (error) {
+    console.error('로그인 오류:', error)
+    throw error
+  }
+}

src/stores/member.ts

@@ -0,0 +1,61 @@
+// stores/memberStore.ts
+import { defineStore } from 'pinia'
+import axiosInstance from '@/utils/axios'
+import { ref } from 'vue'
+import type { User } from '@/types/auth'
+import Cookies from 'js-cookie'
+
+export const useMemberStore = defineStore('memberInfo', () => {
+  const info = ref<User>({
+    memberId: 0,
+    memberName: '',
+    nickname: '',
+    imageUrl: '',
+    memberRole: '',
+    memberStatus: ''
+  })
+
+  // API 호출 후 회원 정보 업데이트
+  async function updateMemberInfoWithToken() {
+    try {
+      const accessToken = Cookies.get('accessToken')
+
+      if (!accessToken) {
+        console.error('Access token is missing')
+        return
+      }
+
+      const response = await axiosInstance.get('/api/members/info', {
+        headers: {
+          Authorization: `Bearer ${accessToken}`
+        }
+      })
+
+      // 받은 데이터로 상태 업데이트
+      console.log('API Response:', response.data)
+      updateMemberInfo(response.data)
+    } catch (error) {
+      console.error('Error fetching member info:', error)
+    }
+  }
+
+  // 상태 업데이트 함수
+  function updateMemberInfo(responseData: any) {
+    info.value = {
+      memberId: 0,
+      memberName: responseData.name || '',
+      nickname: responseData.nicknanme || '',
+      imageUrl: responseData.profileImageUrl || '',
+      memberRole: responseData.role || '',
+      memberStatus: ''
+    }
+
+    console.log('Updated member info:', info.value)
+  }
+
+  return {
+    info,
+    updateMemberInfo,
+    updateMemberInfoWithToken
+  }
+})

src/types/auth.ts

@@ -4,3 +4,12 @@ export interface UserTypes {
   created_at: string
   updated_at: string
 }
+
+export interface User {
+  memberId: number
+  memberName: string
+  nickname: string
+  imageUrl: string
+  memberRole: string
+  memberStatus: string
+}

src/views/LoginView.vue

@@ -46,11 +46,36 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { postLogin } from '@/api/auth'
+
+const router = useRouter()
 
 const nickname = ref('')
 const password = ref('')
 
 const handleLogin = async () => {
-  // 로그인 API 필요
+  try {
+    const res = await postLogin(nickname.value, password.value)
+
+    if (res) {
+      switch (res.memberInfo.memberRole) {
+        case 'ROLE_ADMIN':
+          router.push('/member-management')
+          break
+        case 'ROLE_MANAGER':
+          router.push('my-request')
+          break
+        case 'ROLE_USER':
+          router.push('/my-request')
+          break
+        default:
+          router.push('/')
+      }
+    }
+  } catch (error) {
+    // 로그인 실패 시 에러 처리
+    console.error('로그인 실패:', error)
+  }
 }
 </script>