🔀 [fix] : conflict resolved

Author: Minkyu0424

src/api/auth.ts

@@ -3,11 +3,8 @@ import Cookies from 'js-cookie'
 import type { loginDataTypes } from '@/types/auth'
 import { useMemberStore } from '@/stores/member'
 
-export const postLogin = async (loginData: loginDataTypes, sessionId: string) => {
-  const memberStore = useMemberStore()
-  const response = await axiosInstance.post('/api/auths/login', loginData, {
-    headers: { sessionId: sessionId }
-  })
+export const postLogin = async (loginData: loginDataTypes) => {
+  const response = await axiosInstance.post('/api/auths/login', loginData)
   Cookies.set('accessToken', response.data.accessToken, {
     path: '/',
     sameSite: 'strict'
@@ -16,29 +13,17 @@ 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 response = await axiosInstance.delete('/api/auths/logout', {
-    headers: {
-      Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}`,
-      refreshToken: refreshToken
-    }
-  })
-  Cookies.remove('accessToken', { path: '/' })
-  Cookies.remove('refreshToken', { path: '/' })
-  await memberStore.updateMemberInfoWithToken()
-  return response
+  memberStore.$reset()
+  Cookies.remove('accessToken')
+  Cookies.remove('refreshToken')
 }

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

@@ -53,22 +53,27 @@ export const getHistory = async (taskID: number) => {
 }
 
 export const postComment = async (taskID: number, content: string) => {
-  const response = await axiosInstance.post(`/api/comment/${taskID}`, { content })
+  const response = await axiosInstance.post(`/api/comments/${taskID}`, { content })
   return response.data
 }
 
 export const postCommentAttachment = async (taskID: number, formdata: FormData) => {
-  const response = await formDataAxiosInstance.post(`/api/comment/attachment/${taskID}`, formdata)
+  const response = await formDataAxiosInstance.post(`/api/comments/attachment/${taskID}`, formdata)
   return response.data
 }
 
 export const patchComment = async (commentId: number, content: string) => {
-  const response = await axiosInstance.patch(`/api/comment/${commentId}`, { content })
+  const response = await axiosInstance.patch(`/api/comments/${commentId}`, { content })
   return response.data
 }
 
 export const deleteComment = async (commentId: number) => {
-  const response = await axiosInstance.delete(`/api/comment/${commentId}`)
+  const response = await axiosInstance.delete(`/api/comments/${commentId}`)
+  return response.data
+}
+
+export const patchTaskRequest = async (taskId: string, formdata: FormData) => {
+  const response = await formDataAxiosInstance.patch(`/api/tasks/${taskId}`, formdata)
   return response.data
 }
 

src/assets/styles.css

@@ -11,7 +11,7 @@
 
 body {
   font-family: 'SUIT-Variable', sans-serif;
-  color: #18181B;
+  color: #18181b;
 }
 
 .shadow-custom {

src/components/EditInformation.vue

@@ -10,55 +10,62 @@
     <div class="profile">
       <p class="text-body text-xs font-bold">프로필 사진</p>
       <img
-        v-if="imageUrl"
-        :src="imageUrl"
+        v-if="previewUrl || info.profileImageUrl"
+        :src="previewUrl || info.profileImageUrl"
         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.name" />
     </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>
       <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>
@@ -85,30 +92,59 @@ 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/common'
 
-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 memberStore = useMemberStore()
+const { info } = storeToRefs(memberStore)
+
+const selectedFile = ref<File | null>(null)
+const previewUrl = ref<string | null>(null)
 
-const memberForm = ref({
-  isAgitChecked: false,
-  isKakaoWorkChecked: false,
-  isEmailChecked: false
-})
+const isModalVisible = ref(false)
 
 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 = 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/LineChart.vue

@@ -5,7 +5,7 @@
     :options="options" />
   <NoContent
     v-else
-    content="데이터가 없습니다" />
+    :content="`집계된 ${periodText[periodType]} 데이터가 없습니다`" />
 </template>
 
 <script setup lang="ts">
@@ -22,6 +22,7 @@ import {
   Colors
 } from 'chart.js'
 import NoContent from './lists/NoContent.vue'
+import type { PeriodType } from '@/types/manager'
 
 ChartJS.register(
   Title,
@@ -34,12 +35,15 @@ ChartJS.register(
   Colors
 )
 
-const { labels, series, dataLabel } = defineProps<{
+const { labels, series, dataLabel, periodType } = defineProps<{
   labels: string[]
   series: number[]
   dataLabel: string
+  periodType: PeriodType
 }>()
 
+const periodText = { DAY: '일간', WEEK: '주간', MONTH: '월간' }
+
 const teamData = {
   labels,
   datasets: [

src/components/PieChart.vue

@@ -5,7 +5,9 @@
     :options="options" />
   <NoContent
     v-else
-    content="집계된 데이터가 없습니다" />
+    :content="
+      !content && periodType ? `집계된 ${periodText[periodType]} 데이터가 없습니다` : content
+    " />
 </template>
 
 <script setup lang="ts">
@@ -21,11 +23,19 @@ import {
   type ActiveElement
 } from 'chart.js'
 import NoContent from './lists/NoContent.vue'
+import type { PeriodType } from '@/types/manager'
 ChartJS.register(Title, Tooltip, Legend, ArcElement, Colors)
 
-const { labels, series } = defineProps<{ labels: string[]; series: number[] }>()
+const { labels, series, periodType, content } = defineProps<{
+  labels: string[]
+  series: number[]
+  periodType?: PeriodType
+  content?: string
+}>()
 const emit = defineEmits(['onClick'])
 
+const periodText = { DAY: '일간', WEEK: '주간', MONTH: '월간' }
+
 const teamData = {
   labels,
   datasets: [