CLAP-205 로그인 관련 API 연결

src/api/auth.ts

@@ -0,0 +1,28 @@
+import { axiosInstance } from '@/utils/axios'
+import Cookies from 'js-cookie'
+import type { loginDataTypes } from '@/types/auth'
+
+export const postLogin = async (loginData: loginDataTypes, sessionId: string) => {
+  const response = await axiosInstance.post('/api/auths/login', loginData, {
+    headers: { sessionId: sessionId }
+  })
+  Cookies.set('accessToken', response.data.accessToken, {
+    path: '/',
+    sameSite: 'strict'
+  })
+  return response.data
+}
+
+export const patchPassword = async (password: string) => {
+  const accessToken = Cookies.get('accessToken')
+
+  if (!accessToken) return
+
+  const response = await axiosInstance.patch('/api/members/password', password, {
+    headers: {
+      Authorization: `Bearer ${accessToken}`
+    }
+  })
+
+  return response.data
+}

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,43 @@
+import { defineStore } from 'pinia'
+import { axiosInstance } from '@/utils/axios'
+import { ref } from 'vue'
+import type { User } from '@/types/auth'
+
+export const useMemberStore = defineStore('memberInfo', () => {
+  const info = ref<User>({
+    memberName: '',
+    nickname: '',
+    imageUrl: '',
+    memberRole: '',
+    memberStatus: ''
+  })
+
+  async function updateMemberInfoWithToken() {
+    try {
+      const response = await axiosInstance.get('/api/members/info')
+
+      console.log('API Response:', response.data)
+      updateMemberInfo(response.data)
+    } catch (error) {
+      console.error('updata error:', error)
+    }
+  }
+
+  function updateMemberInfo(responseData: any) {
+    info.value = {
+      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,16 @@ export interface UserTypes {
   created_at: string
   updated_at: string
 }
+
+export interface User {
+  memberName: string
+  nickname: string
+  imageUrl: string
+  memberRole: string
+  memberStatus: string
+}
+
+export interface loginDataTypes {
+  nickname: string
+  password: string
+}

src/views/LoginView.vue

@@ -46,11 +46,41 @@
 
 <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 loginData = {
+      nickname: nickname.value,
+      password: password.value
+    }
+    const sessionId = '000'
+    const res = await postLogin(loginData, sessionId)
+
+    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('비밀번호가 일치하지 않습니다.')
   }