Merge pull request #103 from TaskFlow-CLAP/CLAP-280

CLAP-280 토큰 재발급 API 연결

Author: BaekJiyeon02

src/api/auth.ts

@@ -16,29 +16,26 @@ export const postLogin = async (loginData: loginDataTypes, sessionId: string) =>
     path: '/',
     sameSite: 'strict'
   })
-
   await memberStore.updateMemberInfoWithToken()
   return response.data
 }
 
 export const patchPassword = async (password: string) => {
   const response = await axiosInstance.patch('/api/members/password', password)
-
   return response.data
 }
 
 export const deleteLogout = async () => {
-  const memberStore = useMemberStore()
   const refreshToken = Cookies.get('refreshToken')
+  const accessToken = Cookies.get('accessToken')
 
   const response = await axiosInstance.delete('/api/auths/logout', {
     headers: {
-      Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}`,
+      Authorization: `Bearer ${accessToken}`,
       refreshToken: refreshToken
     }
   })
   Cookies.remove('accessToken', { path: '/' })
   Cookies.remove('refreshToken', { path: '/' })
-  await memberStore.updateMemberInfoWithToken()
   return response
 }

src/api/user.ts

@@ -1,7 +1,13 @@
 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,39 +10,46 @@
     <div class="profile">
       <p class="text-body text-xs font-bold">프로필 사진</p>
       <img
-        v-if="imageUrl"
-        :src="imageUrl"
+        v-if="previewUrl || info.imageUrl"
+        :src="previewUrl || info.imageUrl"
         alt="프로필 이미지"
         class="w-24 h-24 rounded-full object-cover border mt-3" />
-      <div
-        v-else
-        class="w-24 h-24 rounded-full bg-background-1 flex items-center justify-center mt-3"></div>
-      <!-- 파일 업로드 필요 -->
-      <p class="mt-3 text-xs text-primary1 font-bold cursor-pointer">변경</p>
+
+      <label
+        for="fileInput"
+        class="mt-3 text-xs text-primary1 font-bold cursor-pointer"
+        >변경</label
+      >
+      <input
+        id="fileInput"
+        type="file"
+        @change="handleFileUpload"
+        accept="image/*"
+        class="hidden" />
     </div>
 
     <div class="flex flex-col">
       <p class="text-body text-xs font-bold">이름</p>
       <input
         class="input-box h-11 mt-2 text-black"
         placeholder="이름을 입력해주세요"
-        v-model="memberName" />
+        v-model="info.memberName" />
     </div>
     <div class="flex flex-col">
       <p class="text-body text-xs font-bold">아이디</p>
-      <p class="mt-2 text-black">{{ memberId }}</p>
+      <p class="mt-2 text-black">{{ info.nickname }}</p>
     </div>
     <div class="flex flex-col">
       <p class="text-body text-xs font-bold">이메일</p>
-      <p class="mt-2 text-black">{{ memberEmail }}</p>
+      <p class="mt-2 text-black">{{ info.email }}</p>
     </div>
     <div class="flex flex-col">
       <p class="text-body text-xs font-bold">부서</p>
-      <p class="mt-2 text-black">{{ memberDepartment }}</p>
+      <p class="mt-2 text-black">{{ info.departmentName }}</p>
     </div>
     <div class="flex flex-col">
       <p class="text-body text-xs font-bold">직무</p>
-      <p class="mt-2 text-black">{{ memberJob }}</p>
+      <p class="mt-2 text-black">{{ info.departmentRole }}</p>
     </div>
     <div>
       <p class="text-body text-xs font-bold">알림 수신 여부</p>
@@ -85,13 +92,17 @@ import ModalView from './ModalView.vue'
 import FormButtonContainer from './common/FormButtonContainer.vue'
 import FormCheckbox from './common/FormCheckbox.vue'
 const router = useRouter()
+import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
+import { patchEditInfo } from '@/api/user'
+import
+
+const memberStore = useMemberStore()
+const { info } = storeToRefs(memberStore)
+
+const selectedFile = ref<File | null>(null)
+const previewUrl = ref<string | null>(null)
 
-const memberName = ref('백지연')
-const memberId = ref('Chole.yeon')
-const memberEmail = ref('taskflow123@gachon.ac.kr')
-const memberDepartment = ref('인프라팀')
-const memberJob = ref('인프라 아키텍처')
-const imageUrl = ref('')
 const isModalVisible = ref(false)
 
 const memberForm = ref({
@@ -100,15 +111,34 @@ const memberForm = ref({
   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()
 }
 
-const handleSubmit = () => {
-  isModalVisible.value = true
-}
-
 const handlePwChange = () => {
   router.push('/pw-check')
 }
+
+const handleFileUpload = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  if (target.files && target.files[0]) {
+    selectedFile.value = target.files[0]
+
+    previewUrl.value = URL.createObjectURL(selectedFile.value)
+  }
+}
+
+const handleSubmit = () => {
+  isModalVisible.value = true
+  console.log(requestData)
+  patchEditInfo(requestData, selectedFile.value)
+}
 </script>

src/components/TopBar.vue

@@ -63,7 +63,7 @@ import { computed } from 'vue'
 const isModalVisible = ref(false)
 
 const memberStore = useMemberStore()
-const { info } = storeToRefs(memberStore)
+const { isLogined, info } = storeToRefs(memberStore)
 
 const imgUrl = computed(() => info.value.imageUrl)
 const name = computed(() => info.value.memberName)
@@ -88,6 +88,7 @@ const handleEdit = () => {
 }
 const openLogoutModal = () => {
   isModalVisible.value = true
+  isLogined.value = false
 }
 const closeLogoutModal = () => {
   isModalVisible.value = false

src/components/top-bar/ProfileModal.vue

@@ -65,9 +65,10 @@ const { isLogined, info } = storeToRefs(memberStore)
 const route = useRoute()
 const router = useRouter()
 onMounted(async () => {
-  await fetchNotificationCount()
-
-  await memberStore.updateMemberInfoWithToken()
+  if (isLogined.value) {
+    await fetchNotificationCount()
+    await memberStore.updateMemberInfoWithToken()
+  }
 
   const originUrl = route.path.split('/')[1]
   if (info.value.memberRole === 'ROLE_USER') {
@@ -90,11 +91,13 @@ const isNotifiVisible = ref(false)
 const isProfileVisible = ref(false)
 
 const fetchNotificationCount = async () => {
-  try {
-    const data = await getNotifiCount()
-    countNotifi.value = data.count
-  } catch (error) {
-    console.error('알림 개수 불러오기 실패:', error)
+  if (isLogined.value) {
+    try {
+      const data = await getNotifiCount()
+      countNotifi.value = data.count
+    } catch (error) {
+      console.error('알림 개수 불러오기 실패:', error)
+    }
   }
 }
 
@@ -109,10 +112,16 @@ const onCloseSide = () => {
   isSideOpen.value = false
 }
 
+watch(isLogined, newValue => {
+  if (newValue) {
+    location.reload() // 페이지 새로고침
+  }
+})
+
 watch(
   () => info.value,
   async newInfo => {
-    if (newInfo.memberName) {
+    if (newInfo.memberName && isLogined) {
       await fetchNotificationCount()
     }
   },

src/components/top-bar/TopBar.vue

@@ -10,7 +10,10 @@ export const useMemberStore = defineStore('memberInfo', () => {
     nickname: '',
     imageUrl: '',
     memberRole: '',
-    memberStatus: ''
+    memberStatus: '',
+    email: '',
+    departmentName: '',
+    departmentRole: ''
   })
 
   const refreshToken = ref(Cookies.get('refreshToken') || '')
@@ -27,9 +30,12 @@ export const useMemberStore = defineStore('memberInfo', () => {
     info.value = {
       memberName: responseData.name || '',
       nickname: responseData.nicknanme || '',
+      email: responseData.email || '',
       imageUrl: responseData.profileImageUrl || '',
       memberRole: responseData.role || '',
-      memberStatus: ''
+      memberStatus: responseData.memberStatus || '',
+      departmentName: responseData.departmentName || '',
+      departmentRole: responseData.departmentRole || ''
     }
     console.log('Updated member info:', info.value)
   }
@@ -40,7 +46,10 @@ export const useMemberStore = defineStore('memberInfo', () => {
       nickname: '',
       imageUrl: '',
       memberRole: '',
-      memberStatus: ''
+      memberStatus: '',
+      email: '',
+      departmentName: '',
+      departmentRole: ''
     }
     isLogined.value = false
     Cookies.remove('accessToken')

src/stores/member.ts

@@ -1,9 +1,12 @@
 export interface User {
   memberName: string
   nickname: string
+  email: string
   imageUrl: string
   memberRole: string
   memberStatus: string
+  departmentName: string
+  departmentRole: string
 }
 
 export interface loginDataTypes {

src/types/auth.ts

@@ -1,6 +1,13 @@
 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