CLAP-205 로그인 관련 API 연결

src/api/auth.ts

@@ -0,0 +1,47 @@
+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
+  }
+}
+
+export const patchPassword = async (password: string) => {
+  const accessToken = Cookies.get('accessToken')
+
+  if (!accessToken) {
+    console.error('Access token is missing')
+    return
+  }
+
+  try {
+    const response = await axiosInstance.patch('/api/members/password', password, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`
+      }
+    })
+    return response.data
+  } catch (error) {
+    console.log('api error:', error)
+  }
+}

src/components/SideBar.vue

@@ -39,8 +39,14 @@
 
       <div class="flex w-full justify-between px-6 py-4 bg-white">
         <div class="flex w-full items-center gap-3">
-          <!-- 프로필 사진 API 필요 -->
-          <div class="w-10 h-10 rounded-full bg-background-1" />
+          <img
+            v-if="info?.imageUrl"
+            class="rounded-[50%] w-10 h-10"
+            :src="info.imageUrl"
+            alt="프로필 이미지" />
+          <div
+            v-else
+            class="w-10 h-10 rounded-full bg-background-1" />
           <div class="flex flex-col gap-1">
             <p class="text-xs text-body font-bold">{{ name }}</p>
             <p class="text-sm text-black">{{ nickname }}</p>
@@ -61,22 +67,26 @@
 
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import CommonIcons from './common/CommonIcons.vue'
 import { hamburgerIcon } from '@/constants/iconPath'
 import { SIDE_USER_MENU, SIDE_MANAGER_MENU, SIDE_ADMIN_MENU } from '@/constants/menu'
+import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
+
+const memberStore = useMemberStore()
+const { info } = storeToRefs(memberStore)
 
 const route = useRoute()
 
-// 회원 역할, 닉네임 필요
-const role = ref('manager')
-const name = ref('백지연')
-const nickname = ref('Chloe.yeon')
+const role = computed(() => info.value.memberRole)
+const name = computed(() => info.value.memberName)
+const nickname = computed(() => info.value.nickname)
 
 const filteredMenu = computed(() => {
-  return role.value === 'user'
+  return role.value === 'ROLE_USER'
     ? SIDE_USER_MENU
-    : role.value === 'manager'
+    : role.value === 'ROLE_MANAGER'
       ? SIDE_MANAGER_MENU
       : SIDE_ADMIN_MENU
 })

src/components/TopBar.vue

@@ -14,8 +14,14 @@
         v-show="isLogined"
         class="flex items-center gap-6">
         <NotificationIcon :new-notification="12" />
-        <!-- 프로필 사진 API 필요 -->
-        <div class="rounded-[50%] bg-zinc-100 p-5" />
+        <img
+          v-if="info?.imageUrl"
+          class="rounded-[50%] w-10 h-10"
+          :src="info.imageUrl"
+          alt="프로필 이미지" />
+        <div
+          v-else
+          class="rounded-[50%] bg-zinc-100 p-5" />
       </div>
     </div>
   </div>
@@ -25,13 +31,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import CommonIcons from './common/CommonIcons.vue'
 import SideBar from './SideBar.vue'
 import { hamburgerIcon } from '../constants/iconPath'
 import NotificationIcon from './icons/NotificationIcon.vue'
+import { storeToRefs } from 'pinia'
+import { useMemberStore } from '@/stores/member'
+
+const memberStore = useMemberStore()
+const { info } = storeToRefs(memberStore)
+
+onMounted(async () => {
+  await memberStore.updateMemberInfoWithToken()
+})
 
-// 로그인 정보 필요
 const isSideOpen = ref(false)
 const isLogined = ref(true)
 

src/components/request-task/RequestTask.vue

@@ -97,6 +97,7 @@ const handleSubmit = async () => {
   const formData = new FormData()
   const taskInfo = {
     categoryId: category2.value.id,
+
     title: title.value,
     description: description.value
   }

src/stores/member.ts

@@ -0,0 +1,57 @@
+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: ''
+  })
+
+  async function updateMemberInfoWithToken() {
+    try {
+      const accessToken = Cookies.get('accessToken')
+
+      if (!accessToken) {
+        console.error('Access token error')
+        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('updata error:', 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>

src/views/PwChange.vue

@@ -49,6 +49,7 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import ModalView from '../components/ModalView.vue'
+import { patchPassword } from '@/api/auth'
 
 const newPw = ref('')
 const checkPw = ref('')
@@ -61,9 +62,10 @@ const toggleModal = () => {
 
 const handleChange = () => {
   if (newPw.value === checkPw.value) {
+    const response = patchPassword(newPw.value)
+    console.log(response)
     console.log('비밀번호 변경 성공!')
     toggleModal()
-    // 비밀번호 재설정 API 호출 필요
   } else {
     alert('비밀번호가 일치하지 않습니다.')
   }