Merge branch 'develop' of https://github.com/TaskFlow-CLAP/TaskFlow-FE into CLAP-298

Author: Minkyu0424

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

@@ -3,11 +3,6 @@ import type { RequestApprovePostTypes } from '@/types/manager'
 import type { userInfo } from '@/types/user'
 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/hooks/useTeamBoardParamsChange.ts

@@ -7,11 +7,11 @@ export const useTeamBoardParamsChange = () => {
     return array.includes(value) ? array.filter(el => el !== value) : [...array, value]
   }
 
-  const onOrderChange = (value: string) => {
-    params.order = value
+  const onSortByChange = (value: string) => {
+    params.sortBy = value
   }
-  const onTitleChange = (value: string) => {
-    params.title = value
+  const onTaskTitleChange = (value: string) => {
+    params.taskTitle = value
   }
   const onMainChange = (value: number) => {
     params.mainCategoryIds = onArrayChange(params.mainCategoryIds, value)
@@ -21,8 +21,8 @@ export const useTeamBoardParamsChange = () => {
   }
 
   return {
-    onOrderChange,
-    onTitleChange,
+    onSortByChange,
+    onTaskTitleChange,
     onMainChange,
     onSubChange
   }

src/components/team-board/CurrentTaskRatio.vue

@@ -6,9 +6,7 @@
         <div class="flex items-center gap-3">
           <span class="text-xs font-bold text-body">진행 중 {{ teamSummary.inProgress }}건</span>
           <div class="w-[1px] h-[10px] bg-body" />
-          <span class="text-xs font-bold text-body"
-            >완료 대기 {{ teamSummary.pendingCompletion }}건</span
-          >
+          <span class="text-xs font-bold text-body">완료 대기 {{ teamSummary.inReviewing }}건</span>
         </div>
         <span class="text-xs font-bold text-primary1">총 {{ teamSummary.totalTasks }}건</span>
       </div>
@@ -28,7 +26,7 @@ import PieChart from '../PieChart.vue'
 const { teamSummary, teamData } = defineProps<{
   teamSummary: {
     inProgress: number
-    pendingCompletion: number
+    inReviewing: number
     totalTasks: number
   }
   teamData: { name: string; tasks: number }[]

src/components/team-board/TeamBoard.vue

@@ -5,34 +5,54 @@
         :team-summary="teamSummary"
         :team-data="teamData" />
       <TeamBoardCard
-        v-for="member in DUMMY_TEAM_MEMBERS_LIST"
-        :key="member.name"
-        :name="member.name"
-        :department="member.department"
-        :task-status-summary="member.taskStatusSummary"
-        :tasks="member.tasks" />
+        v-for="member in data?.members"
+        :key="member.processorId"
+        :info="member" />
+      <NoContent
+        v-if="data?.members.length === 0"
+        content="검색된 담당자가 없습니다" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { DUMMY_TEAM_MEMBERS_LIST } from '@/datas/dummy'
 import TeamBoardCard from './TeamBoardCard.vue'
 import CurrentTaskRatio from './CurrentTaskRatio.vue'
+import { axiosInstance } from '@/utils/axios'
+import { useTeamBoardParamsStore } from '@/stores/params'
+import { useQuery } from '@tanstack/vue-query'
+import { useParseParams } from '../hooks/useParseParams'
+import type { TeamBoardResponse } from '@/types/manager'
+import { computed } from 'vue'
+import NoContent from '../lists/NoContent.vue'
 
-const getSummaryCount = (key: 'inProgress' | 'pendingCompletion' | 'totalTasks') => {
-  let count = 0
-  DUMMY_TEAM_MEMBERS_LIST.forEach(el => (count += el.taskStatusSummary[key]))
-  return count
-}
-const teamSummary = {
-  inProgress: getSummaryCount('inProgress'),
-  pendingCompletion: getSummaryCount('pendingCompletion'),
-  totalTasks: getSummaryCount('totalTasks')
+const { params } = useTeamBoardParamsStore()
+
+const fetchTeamStatus = async () => {
+  const { parseBoardParams } = useParseParams()
+  const parsedParams = parseBoardParams(params)
+  const response = await axiosInstance.get('/api/team-status/filter', { params: parsedParams })
+  return response.data
 }
+const { data } = useQuery<TeamBoardResponse>({
+  queryKey: ['teamStatus', params],
+  queryFn: fetchTeamStatus
+})
+
+const teamSummary = computed(() => {
+  return {
+    inProgress: data.value?.totalInProgressTaskCount || 0,
+    inReviewing: data.value?.totalInReviewingTaskCount || 0,
+    totalTasks: data.value?.totalTaskCount || 0
+  }
+})
 
-const teamData = DUMMY_TEAM_MEMBERS_LIST.map(el => ({
-  name: el.name,
-  tasks: el.taskStatusSummary.totalTasks
-}))
+const teamData = computed(() => {
+  return (
+    data.value?.members.map(el => ({
+      name: el.nickname,
+      tasks: el.totalTaskCount
+    })) || []
+  )
+})
 </script>

src/components/team-board/TeamBoardCard.vue

@@ -5,26 +5,22 @@
         <div class="w-6 h-6 rounded-full overflow-hidden">
           <img src="https://picsum.photos/24" />
         </div>
-        <span class="text-black">{{ name }}</span>
+        <span class="text-black">{{ info.nickname }}</span>
       </div>
-      <span class="text-xs font-bold text-body">{{ department }}</span>
+      <span class="text-xs font-bold text-body">{{ info.department }}</span>
     </div>
     <div class="flex justify-between items-center">
       <div class="flex items-center gap-3">
-        <span class="text-xs font-bold text-body"
-          >진행 중 {{ taskStatusSummary.inProgress }}건</span
-        >
+        <span class="text-xs font-bold text-body">진행 중 {{ info.inProgressTaskCount }}건</span>
         <div class="w-[1px] h-[10px] bg-body" />
-        <span class="text-xs font-bold text-body"
-          >완료 대기 {{ taskStatusSummary.pendingCompletion }}건</span
-        >
+        <span class="text-xs font-bold text-body">검토 중 {{ info.inReviewingTaskCount }}건</span>
       </div>
-      <span class="text-xs font-bold text-primary1">총 {{ taskStatusSummary.totalTasks }}건</span>
+      <span class="text-xs font-bold text-primary1">총 {{ info.totalTaskCount }}건</span>
     </div>
     <div
       class="w-full h-[360px] rounded-lg bg-primary2 shadow-custom overflow-y-scroll flex flex-col items-center p-6 gap-4">
       <TaskCard
-        v-for="task in tasks"
+        v-for="task in info.tasks"
         :key="task.taskId"
         :data="task" />
     </div>
@@ -35,5 +31,5 @@
 import type { TeamBoardCardProps } from '@/types/manager'
 import TaskCard from '../TaskCard.vue'
 
-const { name, department, taskStatusSummary, tasks } = defineProps<TeamBoardCardProps>()
+const { info } = defineProps<{ info: TeamBoardCardProps }>()
 </script>

src/components/team-board/TeamBoardFilterBar.vue

@@ -3,15 +3,15 @@
     <FilterDropdown
       title="정렬"
       :option-list="[
-        { value: 'CONTRIBUTION', content: '기여도순' },
-        { value: 'NAME', content: '이름순' }
+        { value: 'CONTRIBUTE', content: '기여도순' },
+        { value: 'DEFAULT', content: '이름순' }
       ]"
-      :value="params.order"
-      @update:value="onParamsChange.onOrderChange" />
+      :value="params.sortBy"
+      @update:value="onParamsChange.onSortByChange" />
     <FilterInput
       title="제목"
       :value="''"
-      @update:value="onParamsChange.onTitleChange" />
+      @update:value="onParamsChange.onTaskTitleChange" />
     <FilterCategory
       :category-list="data"
       :main="params.mainCategoryIds"

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(() => {