Merge pull request #112 from TaskFlow-CLAP/CLAP-311

CLAP-311 애니메이션 적용

Author: seorang42

src/api/user.ts

@@ -1,6 +1,5 @@
 import type { Status } from '@/types/common'
 import type { RequestApprovePostTypes } from '@/types/manager'
-import type { userInfo } from '@/types/user'
 import { axiosInstance, formDataAxiosInstance } from '@/utils/axios'
 
 export const postTaskRequest = async (formdata: FormData) => {
@@ -48,7 +47,8 @@ export const changeLabel = async (taskID: number, labelId: number) => {
   return response.data
 }
 
-export const getHistory = async (taskID: number) => {
+export const getHistory = async (taskID: number | null) => {
+  if (taskID === null) return null
   const response = await axiosInstance.get(`/api/tasks/${taskID}/histories`)
   return response.data
 }

src/assets/styles.css

@@ -142,3 +142,37 @@ body {
 .task-detail-manager-dropdown {
   @apply flex w-full h-10 items-center rounded p-4 bg-white border border-border-1 cursor-pointer text-black;
 }
+
+.modal-enter-active,
+.modal-leave-active {
+  transition:
+    transform 0.25s ease-in-out,
+    opacity 0.25s ease-in-out;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  transform: translate(-50%, -40%);
+  opacity: 0;
+}
+
+.modal-enter-to,
+.modal-leave-from {
+  transform: translate(-50%, -50%);
+  opacity: 1;
+}
+
+.sidebar-enter-active,
+.sidebar-leave-active {
+  transition: transform 0.25s ease-in-out;
+}
+
+.sidebar-enter-from,
+.sidebar-leave-to {
+  transform: translateX(-100%);
+}
+
+.sidebar-enter-to,
+.sidebar-leave-from {
+  transform: translateX(0);
+}

src/components/LineChart.vue

@@ -19,7 +19,8 @@ import {
   PointElement,
   CategoryScale,
   LinearScale,
-  Colors
+  Colors,
+  Filler
 } from 'chart.js'
 import NoContent from './lists/NoContent.vue'
 import type { PeriodType } from '@/types/manager'
@@ -32,7 +33,8 @@ ChartJS.register(
   PointElement,
   CategoryScale,
   LinearScale,
-  Colors
+  Colors,
+  Filler
 )
 
 const { labels, series, dataLabel, periodType } = defineProps<{

src/components/ModalView.vue

@@ -2,8 +2,11 @@
   <div
     v-if="isOpen"
     class="fixed inset-0 bg-black bg-opacity-15 flex justify-center items-center z-50"
-    @click.self="closeModal">
-    <div class="bg-white rounded-lg shadow-lg px-8 py-8">
+    @click.self="closeModal" />
+  <Transition name="modal">
+    <div
+      v-if="isOpen"
+      class="bg-white rounded-lg shadow-lg px-8 py-8 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50">
       <div class="flex flex-col gap-8 w-[300px]">
         <div class="flex flex-col gap-6">
           <div class="flex flex-col items-center gap-2">
@@ -65,7 +68,7 @@
         </div>
       </div>
     </div>
-  </div>
+  </Transition>
 </template>
 
 <script setup lang="ts">

src/components/api-logs/ApiLogsListCard.vue

@@ -16,7 +16,7 @@
 import type { ListCardProps } from '@/types/common'
 import ListCardTab from '../lists/ListCardTab.vue'
 import type { ApiLogsListData } from '@/types/admin'
-import { formatDate } from '@/utils/date'
+import { formatFullDateTime } from '@/utils/date'
 import { API_LOGS_DIVISION_LIST } from '@/constants/admin'
 
 const { info } = defineProps<{ info: ApiLogsListData }>()
@@ -27,7 +27,7 @@ const myRequestTabList: ListCardProps[] = [
     isTextXs: true,
     isTextBody: true
   },
-  { content: formatDate(info.requestAt), width: 180, isTextXs: true },
+  { content: formatFullDateTime(info.requestAt), width: 180, isTextXs: true },
   { content: info.nickName, width: 80 },
   { content: info.clientIp, width: 120, isTextXs: true },
   { content: String(info.statusCode), width: 40, isTextXs: true, isStatusCode: true },

src/components/my-request/MyRequestListCard.vue

@@ -12,7 +12,6 @@
       :is-status="tab.isStatus" />
   </div>
   <TaskDetail
-    v-if="selectedID"
     :is-approved="info.taskStatus !== 'REQUESTED'"
     :selected-id="selectedID"
     :close-task-detail="() => handleModal(null)" />

src/components/my-task/MyTaskListCard.vue

@@ -12,7 +12,6 @@
       :is-status="tab.isStatus" />
   </div>
   <TaskDetail
-    v-if="selectedID"
     :is-approved="info.taskStatus !== 'REQUESTED'"
     :selected-id="selectedID"
     :close-task-detail="() => handleModal(null)" />

src/components/request-history/RequestHistoryListCard.vue

@@ -12,7 +12,6 @@
       :is-status="tab.isStatus" />
   </div>
   <TaskDetail
-    v-if="selectedID"
     :is-approved="info.taskStatus !== 'REQUESTED'"
     :selected-id="selectedID"
     :close-task-detail="() => handleModal(null)" />

src/components/request-task/CategoryDropDown.vue

@@ -18,7 +18,7 @@
       class="relative flex">
       <div
         class="flex w-full h-11 items-center rounded p-4 border border-border-1 cursor-pointer text-black"
-        :class="isDisabled ? 'bg-background-1' : 'bg-white'"
+        :class="isDisabled ? 'bg-background-2' : 'bg-white'"
         @click="toggleDropdown">
         <p :class="{ 'text-disabled': !modelValue?.name }">
           {{ modelValue?.name ?? labelName + '를 선택해주세요' }}

src/components/requested/RequestedListCard.vue

@@ -24,7 +24,6 @@
     </div>
   </div>
   <TaskDetail
-    v-if="selectedID"
     :is-approved="true"
     :selected-id="selectedID"
     :close-task-detail="() => handleModal(null)" />