CLAP-295 내 정보 수정 페이지 API 연결

src/api/common.ts

@@ -1,4 +1,9 @@
-import { axiosInstance } from '../utils/axios'
+import { axiosInstance, formDataAxiosInstance } from '../utils/axios'
+
+export const patchEditInfo = async (formdata: FormData) => {
+  const response = await formDataAxiosInstance.patch('/api/members/info', formdata)
+  return response.data
+}
 
 export const getNotification = async (pageNum: number, sizeNum: number) => {
   const response = await axiosInstance.get(`/api/notifications?page=${pageNum}&size=${sizeNum}`)
@@ -8,13 +13,11 @@ export const getNotification = async (pageNum: number, sizeNum: number) => {
 
 export const patchNotificationRead = async (notificationId: number) => {
   const response = await axiosInstance.patch(`/api/notification/${notificationId}`)
-  console.log(notificationId)
   return response.data
 }
 
 export const getNotifiCount = async () => {
   const response = await axiosInstance.get(`/api/notifications/count`)
-  console.log(response.data)
   return response.data
 }
 

src/api/user.ts

@@ -1,13 +1,7 @@
 import type { Status } from '@/types/common'
-import type { userInfo } from '@/types/user'
 import type { RequestApprovePostTypes } from '@/types/manager'
 import { axiosInstance, formDataAxiosInstance } from '@/utils/axios'
 
-export const patchEditInfo = async (formdata: userInfo, image: File) => {
-  const response = await formDataAxiosInstance.post('/api/tasks', formdata, image)
-  return response.data
-}
-
 export const postTaskRequest = async (formdata: FormData) => {
   const response = await formDataAxiosInstance.post('/api/tasks', formdata)
   return response.data

src/components/EditInformation.vue

@@ -10,8 +10,8 @@
     <div class="profile">
       <p class="text-body text-xs font-bold">프로필 사진</p>
       <img
-        v-if="previewUrl || info.imageUrl"
-        :src="previewUrl || info.imageUrl"
+        v-if="previewUrl || info.profileImageUrl"
+        :src="previewUrl || info.profileImageUrl"
         alt="프로필 이미지"
         class="w-24 h-24 rounded-full object-cover border mt-3" />
 
@@ -33,7 +33,7 @@
       <input
         class="input-box h-11 mt-2 text-black"
         placeholder="이름을 입력해주세요"
-        v-model="info.memberName" />
+        v-model="info.name" />
     </div>
     <div class="flex flex-col">
       <p class="text-body text-xs font-bold">아이디</p>
@@ -55,17 +55,17 @@
       <p class="text-body text-xs font-bold">알림 수신 여부</p>
       <div class="flex flex-col mt-2 gap-2">
         <FormCheckbox
-          v-model="memberForm.isAgitChecked"
+          v-model="info.notificationSettingInfo.agit"
           :checkButtonName="'아지트'"
-          :isChecked="memberForm.isAgitChecked" />
+          :isChecked="info.notificationSettingInfo.agit" />
         <FormCheckbox
-          v-model="memberForm.isKakaoWorkChecked"
+          v-model="info.notificationSettingInfo.kakaoWork"
           :checkButtonName="'카카오워크'"
-          :isChecked="memberForm.isKakaoWorkChecked" />
+          :isChecked="info.notificationSettingInfo.kakaoWork" />
         <FormCheckbox
-          v-model="memberForm.isEmailChecked"
+          v-model="info.notificationSettingInfo.email"
           :checkButtonName="'이메일'"
-          :isChecked="memberForm.isEmailChecked" />
+          :isChecked="info.notificationSettingInfo.email" />
       </div>
     </div>
     <div>
@@ -94,8 +94,7 @@ import FormCheckbox from './common/FormCheckbox.vue'
 const router = useRouter()
 import { useMemberStore } from '@/stores/member'
 import { storeToRefs } from 'pinia'
-import { patchEditInfo } from '@/api/user'
-import
+import { patchEditInfo } from '@/api/common'
 
 const memberStore = useMemberStore()
 const { info } = storeToRefs(memberStore)
@@ -105,20 +104,6 @@ const previewUrl = ref<string | null>(null)
 
 const isModalVisible = ref(false)
 
-const memberForm = ref({
-  isAgitChecked: false,
-  isKakaoWorkChecked: false,
-  isEmailChecked: false
-})
-
-const formData = new FormData()
-
-const requestData: any = {
-  name: info.value.memberName,
-  agitNotification: memberForm.value.isAgitChecked,
-  emailNotification: memberForm.value.isEmailChecked,
-  kakaoWorkNotification: memberForm.value.isKakaoWorkChecked
-}
 const handleCancel = () => {
   router.back()
 }
@@ -136,9 +121,30 @@ const handleFileUpload = (event: Event) => {
   }
 }
 
-const handleSubmit = () => {
-  isModalVisible.value = true
-  console.log(requestData)
-  patchEditInfo(requestData, selectedFile.value)
+const handleSubmit = async () => {
+  const formData = new FormData()
+  const memberInfo = {
+    name: info.value.name,
+    agitNotification: info.value.notificationSettingInfo.agit,
+    emailNotification: info.value.notificationSettingInfo.email,
+    kakaoWorkNotification: info.value.notificationSettingInfo.kakaoWork
+  }
+
+  const jsonMemberInfo = JSON.stringify(memberInfo)
+  const newBlob = new Blob([jsonMemberInfo], { type: 'application/json' })
+
+  formData.append('memberInfo', newBlob)
+
+  if (selectedFile.value) {
+    formData.append('profileImage', selectedFile.value)
+  }
+
+  try {
+    await patchEditInfo(formData)
+    isModalVisible.value = true
+    await memberStore.updateMemberInfoWithToken()
+  } catch (error) {
+    console.error('요청 실패:', error)
+  }
 }
 </script>

src/components/top-bar/NotificationModal.vue

@@ -85,7 +85,6 @@ const hasNext = ref(true)
 const loadMoreNotifications = async ($state: any) => {
   try {
     const response = await getNotification(page.value, pageSize)
-    console.log(response)
 
     if (response.isFirst) {
       notifications.value = response.content

src/components/top-bar/SideBar.vue

@@ -40,9 +40,9 @@
       <div class="flex w-full justify-between px-6 py-4 bg-white">
         <div class="flex w-full items-center gap-3">
           <img
-            v-if="info?.imageUrl"
+            v-if="info?.profileImageUrl"
             class="rounded-[50%] w-10 h-10"
-            :src="info.imageUrl"
+            :src="info.profileImageUrl"
             alt="프로필 이미지" />
           <div
             v-else
@@ -79,8 +79,8 @@ const { info } = storeToRefs(memberStore)
 
 const route = useRoute()
 
-const role = computed(() => info.value.memberRole)
-const name = computed(() => info.value.memberName)
+const role = computed(() => info.value.role)
+const name = computed(() => info.value.name)
 const nickname = computed(() => info.value.nickname)
 
 const filteredMenu = computed(() => {

src/components/top-bar/TopBar.vue

@@ -29,9 +29,9 @@
           type="button"
           @click="toggleProfile">
           <img
-            v-if="info?.imageUrl"
+            v-if="info?.profileImageUrl"
             class="rounded-[50%] w-10 h-10"
-            :src="info.imageUrl"
+            :src="info.profileImageUrl"
             alt="프로필 이미지" />
           <div
             v-else
@@ -71,11 +71,11 @@ onMounted(async () => {
   }
 
   const originUrl = route.path.split('/')[1]
-  if (info.value.memberRole === 'ROLE_USER') {
+  if (info.value.role === 'ROLE_USER') {
     if (!PERMITTED_URL.ROLE_USER.includes(originUrl)) router.push('/my-request')
-  } else if (info.value.memberRole === 'ROLE_MANAGER') {
+  } else if (info.value.role === 'ROLE_MANAGER') {
     if (!PERMITTED_URL.ROLE_MANAGER.includes(originUrl)) router.push('/my-task')
-  } else if (info.value.memberRole === 'ROLE_ADMIN') {
+  } else if (info.value.role === 'ROLE_ADMIN') {
     if (!PERMITTED_URL.ROLE_ADMIN.includes(originUrl)) router.push('/member-management')
   } else {
     if (!PERMITTED_URL.UNKNOWN.includes(originUrl)) {
@@ -121,7 +121,7 @@ watch(isLogined, newValue => {
 watch(
   () => info.value,
   async newInfo => {
-    if (newInfo.memberName && isLogined) {
+    if (newInfo.name && isLogined) {
       await fetchNotificationCount()
     }
   },

src/stores/member.ts

@@ -6,51 +6,49 @@ import Cookies from 'js-cookie'
 
 export const useMemberStore = defineStore('memberInfo', () => {
   const info = ref<User>({
-    memberName: '',
+    name: '',
     nickname: '',
-    imageUrl: '',
-    memberRole: '',
+    profileImageUrl: '',
+    role: '',
     memberStatus: '',
     email: '',
     departmentName: '',
-    departmentRole: ''
+    departmentRole: '',
+    notificationSettingInfo: {
+      agit: false,
+      email: false,
+      kakaoWork: false
+    }
   })
 
   const refreshToken = ref(Cookies.get('refreshToken') || '')
   const isLogined = ref(!!refreshToken.value)
 
   async function updateMemberInfoWithToken() {
     const response = await axiosInstance.get('/api/members/info')
-    console.log('API Response:', response.data)
     updateMemberInfo(response.data)
     isLogined.value = true
   }
 
-  function updateMemberInfo(responseData: any) {
+  function updateMemberInfo(responseData: User) {
     info.value = {
-      memberName: responseData.name || '',
-      nickname: responseData.nicknanme || '',
+      name: responseData.name || '',
+      nickname: responseData.nickname || '',
       email: responseData.email || '',
-      imageUrl: responseData.profileImageUrl || '',
-      memberRole: responseData.role || '',
+      profileImageUrl: responseData.profileImageUrl || '',
+      role: responseData.role || '',
       memberStatus: responseData.memberStatus || '',
       departmentName: responseData.departmentName || '',
-      departmentRole: responseData.departmentRole || ''
+      departmentRole: responseData.departmentRole || '',
+      notificationSettingInfo: {
+        agit: responseData.notificationSettingInfo.agit,
+        email: responseData.notificationSettingInfo.email,
+        kakaoWork: responseData.notificationSettingInfo.kakaoWork
+      }
     }
-    console.log('Updated member info:', info.value)
   }
 
   function logout() {
-    info.value = {
-      memberName: '',
-      nickname: '',
-      imageUrl: '',
-      memberRole: '',
-      memberStatus: '',
-      email: '',
-      departmentName: '',
-      departmentRole: ''
-    }
     isLogined.value = false
     Cookies.remove('accessToken')
     Cookies.remove('refreshToken')

src/types/auth.ts

@@ -1,12 +1,17 @@
 export interface User {
-  memberName: string
+  name: string
   nickname: string
   email: string
-  imageUrl: string
-  memberRole: string
+  profileImageUrl: string
+  role: string
   memberStatus: string
   departmentName: string
   departmentRole: string
+  notificationSettingInfo: {
+    agit: boolean
+    email: boolean
+    kakaoWork: boolean
+  }
 }
 
 export interface loginDataTypes {

src/types/user.ts

@@ -1,13 +1,6 @@
 import type { LabelDataTypes, Status } from './common'
 import type { ManagerTypes } from './manager'
 
-export interface userInfo {
-  name: string
-  agitNotification: boolean
-  emailNotification: boolean
-  kakaoWorkNotification: boolean
-}
-
 export interface MyRequestListData {
   taskId: number
   taskCode: string

src/views/LoginView.vue

@@ -62,7 +62,7 @@ const handleLogin = async () => {
     const sessionId = '000'
     const res = await postLogin(loginData, sessionId)
     if (res) {
-      switch (res.memberInfo.memberRole) {
+      switch (res.memberInfo.role) {
         case 'ROLE_ADMIN':
           router.push('/member-management')
           break