CLAP-311 애니메이션 적용

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)" />

src/components/task-detail/TaskDetail.vue

@@ -1,13 +1,16 @@
 <template>
   <div
+    v-if="selectedId"
     :onClick="closeTaskDetail"
-    class="fixed inset-0 bg-black bg-opacity-15 flex justify-center items-center z-50 p-12">
+    class="fixed inset-0 bg-black bg-opacity-15 flex justify-center items-center z-50 p-12" />
+  <Transition name="modal">
     <div
+      v-if="selectedId"
       @click.stop
-      class="flex flex-col overflow-y-auto rounded-lg w-full max-w-[1200px] min-w-[768px] h-full bg-white p-6">
+      class="flex flex-col overflow-y-auto rounded-lg w-full max-w-[1104px] min-w-[768px] h-[calc(100%-96px)] bg-white shadow-custom p-6 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50">
       <TaskDetailTopBar
         v-if="data"
-        :is-approved="data?.taskStatus !== 'REQUESTED'"
+        :is-approved="isApproved"
         :close-task-detail="closeTaskDetail"
         :id="data?.taskId || 0"
         :isProcessor="data?.processorNickName === info.nickname || info.role === 'ROLE_MANAGER'"
@@ -29,7 +32,7 @@
           :isProcessor="data?.processorNickName === info.nickname" />
       </div>
     </div>
-  </div>
+  </Transition>
 </template>
 
 <script setup lang="ts">
@@ -44,17 +47,18 @@ import TaskDetailLeft from './TaskDetailLeft.vue'
 import TaskDetailRight from './TaskDetailRight.vue'
 import TaskDetailTopBar from './TaskDetailTopBar.vue'
 
-const { closeTaskDetail, selectedId } = defineProps<TaskDetailProps>()
+const { closeTaskDetail, selectedId, isApproved } = defineProps<TaskDetailProps>()
 const queryClient = useQueryClient()
 
 const memberStore = useMemberStore()
 const { info } = storeToRefs(memberStore)
 
 const userRole = computed(() => info.value.role)
+const checkId = computed(() => selectedId !== null)
 const isDataFetched = ref(false)
 
 const fetchData = async () => {
-  if (!userRole.value) return
+  if (!userRole.value || !selectedId) return null
   const result =
     userRole.value === 'ROLE_USER'
       ? await getTaskDetailUser(selectedId)
@@ -66,7 +70,7 @@ const fetchData = async () => {
 const { data, refetch } = useQuery<TaskDetailDatas>({
   queryKey: ['taskDetailUser', selectedId],
   queryFn: fetchData,
-  enabled: false // Initially disabled
+  enabled: false
 })
 
 const { data: historyData } = useQuery<TaskDetailHistoryData>({
@@ -75,11 +79,10 @@ const { data: historyData } = useQuery<TaskDetailHistoryData>({
   enabled: isDataFetched.value
 })
 
-// Watch for role changes and trigger refetch
 watch(
-  userRole,
-  async newRole => {
-    if (newRole) {
+  [userRole, checkId],
+  async params => {
+    if (params) {
       await queryClient.invalidateQueries({ queryKey: ['taskDetailUser', selectedId] })
       await refetch()
     }

src/components/top-bar/SideBar.vue

@@ -1,8 +1,12 @@
 <template>
   <div
+    v-if="isOpen"
     class="fixed inset-0 bg-black bg-opacity-15 flex items-center z-50"
-    @click.self="$emit('close')">
-    <div class="flex flex-col relative w-80 bg-white h-screen shadow-custom py-2">
+    @click.self="$emit('close')" />
+  <Transition name="sidebar">
+    <div
+      v-if="isOpen"
+      class="flex flex-col fixed w-80 bg-white h-screen shadow-custom py-2 z-50">
       <div class="flex flex-col gap-12 flex-1 overflow-hidden">
         <div class="flex justify-between items-center px-6">
           <CommonIcons
@@ -62,7 +66,7 @@
         </div>
       </div>
     </div>
-  </div>
+  </Transition>
 </template>
 
 <script setup lang="ts">
@@ -77,6 +81,9 @@ import { storeToRefs } from 'pinia'
 const memberStore = useMemberStore()
 const { info } = storeToRefs(memberStore)
 
+const { isOpen } = defineProps<{ isOpen: boolean }>()
+defineEmits(['close'])
+
 const route = useRoute()
 
 const role = computed(() => info.value.role)

src/components/top-bar/TopBar.vue

@@ -49,7 +49,7 @@
     </div>
   </div>
   <SideBar
-    v-if="isSideOpen"
+    :is-open="isSideOpen"
     @close="onCloseSide" />
 </template>
 

src/types/user.ts

@@ -117,8 +117,9 @@ export interface CommentFileDetails {
 }
 
 export interface TaskDetailProps {
-  selectedId: number
+  selectedId: number | null
   closeTaskDetail: () => void
+  isApproved?: boolean
 }
 export interface ManagerInfoTypes {
   nickName: string