CLAP-316 코드 프리징 전 코드 점검

src/api/user.ts

@@ -38,7 +38,7 @@ export const changeProcessor = async (taskID: number, processorId: number) => {
 }
 
 export const patchChangeStatus = async (taskID: number, status: Status) => {
-  const response = await axiosInstance.patch(`/api/tasks/${taskID}/status`, status)
+  const response = await axiosInstance.patch(`/api/tasks/${taskID}/status`, { status })
   return response.data
 }
 
@@ -54,12 +54,15 @@ export const getHistory = async (taskID: number | null) => {
 }
 
 export const postComment = async (taskID: number, content: string) => {
-  const response = await axiosInstance.post(`/api/comments/${taskID}`, { content })
+  const response = await axiosInstance.post(`/api/tasks/${taskID}/comments`, { content })
   return response.data
 }
 
 export const postCommentAttachment = async (taskID: number, formdata: FormData) => {
-  const response = await formDataAxiosInstance.post(`/api/comments/attachment/${taskID}`, formdata)
+  const response = await formDataAxiosInstance.post(
+    `/api/tasks/${taskID}/comments/attachment`,
+    formdata
+  )
   return response.data
 }
 
@@ -82,3 +85,8 @@ export const cancelTaskUser = async (taskId: number) => {
   const response = await axiosInstance.patch(`/api/tasks/${taskId}/cancel`)
   return response.data
 }
+
+export const getSubCategoryDetail = async (categoryId: number) => {
+  const response = await axiosInstance.get(`/api/sub-categories/${categoryId}`)
+  return response.data
+}

src/components/api-logs/ApiLogsFilterBar.vue

@@ -27,12 +27,12 @@
 <script setup lang="ts">
 import FilterDropdown from '../filters/FilterDropdown.vue'
 import FilterInput from '../filters/FilterInput.vue'
-import { useLogsParamsStore } from '@/stores/params'
-import { PAGE_SIZE_LIST, TERM_LIST } from '@/constants/common'
 import { API_LOGS_DIVISION_LIST } from '@/constants/admin'
-import { useLogsParamsChange } from '../hooks/useLogsParamsChange'
 import FilterIpAddress from '../filters/FilterIpAddress.vue'
 import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
+import { useLogsParamsChange } from '@/hooks/useLogsParamsChange'
+import { PAGE_SIZE_LIST, TERM_LIST } from '@/constants/common'
+import { useLogsParamsStore } from '@/stores/params'
 
 const store = useLogsParamsStore()
 store.$reset()

src/components/api-logs/ApiLogsListBar.vue

@@ -12,11 +12,11 @@
 </template>
 
 <script setup lang="ts">
-import { useLogsParamsStore } from '@/stores/params'
-import ListBarTab from '../lists/ListBarTab.vue'
 import { LOGS_LIST_BAR_TAB } from '@/constants/admin'
-import { useLogsParamsChange } from '../hooks/useLogsParamsChange'
+import { useLogsParamsChange } from '@/hooks/useLogsParamsChange'
+import { useLogsParamsStore } from '@/stores/params'
 import { computed } from 'vue'
+import ListBarTab from '../lists/ListBarTab.vue'
 
 const { params } = useLogsParamsStore()
 const orderRequest = computed(() => ({

src/components/LineChart.vue → src/components/charts/LineChart.vue

@@ -22,8 +22,8 @@ import {
   Colors,
   Filler
 } from 'chart.js'
-import NoContent from './lists/NoContent.vue'
 import type { PeriodType } from '@/types/manager'
+import NoContent from '../lists/NoContent.vue'
 
 ChartJS.register(
   Title,

src/components/PieChart.vue → src/components/charts/PieChart.vue

@@ -22,8 +22,8 @@ import {
   type ChartEvent,
   type ActiveElement
 } from 'chart.js'
-import NoContent from './lists/NoContent.vue'
 import type { PeriodType } from '@/types/manager'
+import NoContent from '../lists/NoContent.vue'
 ChartJS.register(Title, Tooltip, Legend, ArcElement, Colors)
 
 const { labels, series, periodType, content } = defineProps<{

src/components/EditInformation.vue → src/components/common/EditInformation.vue

@@ -101,6 +101,7 @@
     <div>
       <p class="text-body text-xs font-bold">비밀번호 재설정</p>
       <button
+        type="button"
         class="button-medium-secondary mt-2"
         @click="handlePwChange">
         재설정하기
@@ -116,16 +117,16 @@
 </template>
 
 <script lang="ts" setup>
+import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
 import { nextTick, ref, watchEffect } from 'vue'
 import { useRouter } from 'vue-router'
 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'
-import ImageContainer from './common/ImageContainer.vue'
+import FormButtonContainer from './FormButtonContainer.vue'
+import FormCheckbox from './FormCheckbox.vue'
+import ImageContainer from './ImageContainer.vue'
+const router = useRouter()
 
 const memberStore = useMemberStore()
 const { info } = storeToRefs(memberStore)

src/components/common/FormButtonContainer.vue

@@ -2,11 +2,13 @@
   <div class="w-full mt-4 flex justify-center">
     <div class="w-[400px] flex gap-6">
       <button
+        type="button"
         class="button-large-default"
         @click="handleCancel">
         {{ cancelText }}
       </button>
       <button
+        type="button"
         class="button-large-primary"
         @click="handleSubmit">
         {{ submitText }}

src/components/ModalView.vue → src/components/common/ModalView.vue

@@ -39,13 +39,15 @@
         </div>
 
         <button
+          type="button"
           class="button-large-primary"
           v-if="type == 'successType'"
           @click="closeModal">
           확인
         </button>
 
         <button
+          type="button"
           class="button-large-default"
           v-if="type == 'failType'"
           @click="closeModal">
@@ -56,11 +58,13 @@
           class="flex items-center gap-6"
           v-if="type == 'warningType' || type == 'inputType'">
           <button
+            type="button"
             class="button-large-default"
             @click="closeModal">
             취소
           </button>
           <button
+            type="button"
             class="button-large-red"
             @click="confirmModal">
             {{ type === 'inputType' ? '거부' : '삭제' }}
@@ -72,9 +76,8 @@
 </template>
 
 <script setup lang="ts">
+import { failIcon, successIcon, warningIcon } from '@/constants/iconPath'
 import { ref, watch } from 'vue'
-import CommonIcons from './common/CommonIcons.vue'
-import { successIcon, failIcon, warningIcon } from '../constants/iconPath'
 
 const props = defineProps<{
   isOpen: boolean

src/components/common/ResultModal.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import ModalView from '../ModalView.vue'
+import ModalView from './ModalView.vue'
 
 const { type, isOpen, message } = defineProps<{
   type: string

src/components/TaskCard.vue → src/components/common/TaskCard.vue

@@ -1,8 +1,8 @@
 <template>
   <div
-    class="w-full max-w-80 border-l-8 bg-white py-4 pl-6 pr-4 flex flex-col gap-6 rounded-lg shadow-custom hover:bg-background-2"
+    class="w-full max-w-80 border-l-8 bg-white py-4 pl-6 pr-4 flex flex-col gap-6 rounded-lg shadow-custom hover:bg-background-2 cursor-pointer"
     :class="borderLeft"
-    @click="onTaskClick">
+    @click="handleModal(data.taskId)">
     <div class="flex flex-col gap-1">
       <div class="flex justify-between items-center gap-4">
         <div class="flex items-center gap-2 overflow-hidden">
@@ -34,26 +34,35 @@
         </div>
       </div>
     </div>
+    <TaskDetail
+      v-if="selectedID"
+      :is-approved="data.taskStatus !== 'REQUESTED'"
+      :selected-id="selectedID"
+      :close-task-detail="() => handleModal(null)" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { bentoIcon } from '@/constants/iconPath'
 import type { Status } from '@/types/common'
-import { computed } from 'vue'
 import type { TaskCardProps } from '@/types/manager'
-import CommonIcons from './common/CommonIcons.vue'
 import { statusAsColor } from '@/utils/statusAsColor'
-import TaskLabel from './common/TaskLabel.vue'
-import ImageContainer from './common/ImageContainer.vue'
+import { computed, ref } from 'vue'
+import CommonIcons from './CommonIcons.vue'
+import TaskLabel from './TaskLabel.vue'
+import ImageContainer from './ImageContainer.vue'
+import TaskDetail from '../task-detail/TaskDetail.vue'
 
 const { data } = defineProps<{ data: TaskCardProps; draggable?: boolean }>()
+const selectedID = ref<number | null>(null)
 
 const borderLeft = computed(() => {
   return `border-${statusAsColor(data.taskStatus as Status)}-1`
 })
 
-const onTaskClick = () => {
-  console.log('clicked')
+const handleModal = (id: number | null) => {
+  if (data.taskId) document.body.style.overflow = 'hidden'
+  else document.body.style.overflow = ''
+  selectedID.value = id
 }
 </script>

src/components/TitleBar.vue → src/components/common/TitleBar.vue

@@ -3,7 +3,7 @@
     <span class="text-2xl font-bold text-black">{{ title }}</span>
     <div
       v-if="$slots.button"
-      class="flex gap-4">
+      class="flex gap-2">
       <slot
         name="button"
         class="flex gap-4" />

src/components/filters/FilterCategory.vue

@@ -79,7 +79,7 @@ import { dropdownIcon } from '@/constants/iconPath'
 import type { Category, FilterCategoryProps } from '@/types/common'
 import { computed, ref, watchEffect } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
-import { useOutsideClick } from '../hooks/useOutsideClick'
+import { useOutsideClick } from '@/hooks/useOutsideClick'
 
 const { categoryList = [], main, sub } = defineProps<FilterCategoryProps>()
 const emit = defineEmits(['update:main', 'update:sub'])

src/components/filters/FilterDropdown.vue

@@ -29,11 +29,11 @@
 </template>
 
 <script setup lang="ts">
+import { dropdownIcon } from '@/constants/iconPath'
+import { useOutsideClick } from '@/hooks/useOutsideClick'
 import type { Filter } from '@/types/common'
 import { ref } from 'vue'
-import { dropdownIcon } from '@/constants/iconPath'
 import CommonIcons from '../common/CommonIcons.vue'
-import { useOutsideClick } from '../hooks/useOutsideClick'
 
 const { title, value, width = '120', optionList } = defineProps<Filter>()
 const emit = defineEmits(['update:value'])

src/components/filters/FilterDropdownMulti.vue

@@ -32,11 +32,11 @@
 </template>
 
 <script setup lang="ts">
+import { dropdownIcon } from '@/constants/iconPath'
+import { useOutsideClick } from '@/hooks/useOutsideClick'
 import type { Filter } from '@/types/common'
 import { ref } from 'vue'
-import { dropdownIcon } from '@/constants/iconPath'
 import CommonIcons from '../common/CommonIcons.vue'
-import { useOutsideClick } from '../hooks/useOutsideClick'
 
 const { title, width = '120', optionList, value } = defineProps<Filter>()
 const emit = defineEmits(['update:value'])

src/components/lists/ListBarTab.vue

@@ -5,6 +5,7 @@
     :class="`${!width && 'grow'} ${justifyCenter && 'justify-center'}`">
     {{ content }}
     <button
+      type="button"
       v-if="sortBy"
       @click="$emit('toggleSortBy', sortBy)">
       <OrderIcon
@@ -15,9 +16,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import OrderIcon from '../OrderIcon.vue'
 import type { ListBarTabProps } from '@/types/common'
+import { computed } from 'vue'
+import OrderIcon from '../common/OrderIcon.vue'
 
 const { content, width, sortBy, currentOrderRequest } = defineProps<ListBarTabProps>()
 defineEmits(['toggleSortBy'])

src/components/lists/ListCardTab.vue

@@ -22,7 +22,7 @@
 
 <script setup lang="ts">
 import type { ListCardProps, Status } from '@/types/common'
-import TaskStatus from '../TaskStatus.vue'
+import TaskStatus from '../common/TaskStatus.vue'
 
 const { content, width, isTextXs, profileImg, isStatus, isStatusCode, isTextBody } =
   defineProps<ListCardProps>()

src/components/lists/ListPagination.vue

@@ -5,6 +5,7 @@
     <div class="flex gap-1 absolute left-0 top-1/2 -translate-x-[calc(100%+8px)] -translate-y-1/2">
       <button
         v-if="pageSet[0] !== 1"
+        type="button"
         @click="onPrevSetClick"
         class="rounded hover:bg-primary2">
         <CommonIcons :name="prevSetIcon" />
@@ -17,6 +18,7 @@
     </div>
     <button
       v-for="page in pageSet"
+      type="button"
       :key="page"
       class="w-6 h-6 flex justify-center items-center rounded text-sm"
       :class="

src/components/login-logs/LoginLogsFilterBar.vue

@@ -29,10 +29,10 @@ import FilterDropdown from '../filters/FilterDropdown.vue'
 import FilterInput from '../filters/FilterInput.vue'
 import { useLogsParamsStore } from '@/stores/params'
 import { PAGE_SIZE_LIST, TERM_LIST } from '@/constants/common'
-import { useLogsParamsChange } from '../hooks/useLogsParamsChange'
 import FilterIpAddress from '../filters/FilterIpAddress.vue'
 import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
 import { LOGIN_LOGS_DIVISION_LIST } from '@/constants/admin'
+import { useLogsParamsChange } from '@/hooks/useLogsParamsChange'
 
 const store = useLogsParamsStore()
 store.$reset()

src/components/login-logs/LoginLogsList.vue

@@ -22,18 +22,18 @@
 </template>
 
 <script setup lang="ts">
-import ListPagination from '../lists/ListPagination.vue'
-import ListContainer from '../lists/ListContainer.vue'
+import { useMemberStore } from '@/stores/member'
 import { useLogsParamsStore } from '@/stores/params'
-import LoginLogsListBar from './LoginLogsListBar.vue'
-import LoginLogsListCard from './LoginLogsListCard.vue'
+import type { LoginLogsResponse } from '@/types/admin'
 import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
+import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
-import type { LoginLogsResponse } from '@/types/admin'
+import ListContainer from '../lists/ListContainer.vue'
+import ListPagination from '../lists/ListPagination.vue'
 import NoContent from '../lists/NoContent.vue'
-import { useMemberStore } from '@/stores/member'
-import { storeToRefs } from 'pinia'
+import LoginLogsListBar from './LoginLogsListBar.vue'
+import LoginLogsListCard from './LoginLogsListCard.vue'
 
 const { params } = useLogsParamsStore()
 const onPageChange = (value: number) => {

src/components/login-logs/LoginLogsListBar.vue

@@ -15,8 +15,8 @@
 import ListBarTab from '../lists/ListBarTab.vue'
 import { useLogsParamsStore } from '@/stores/params'
 import { LOGS_LIST_BAR_TAB } from '@/constants/admin'
-import { useLogsParamsChange } from '../hooks/useLogsParamsChange'
 import { computed } from 'vue'
+import { useLogsParamsChange } from '@/hooks/useLogsParamsChange'
 
 const { params } = useLogsParamsStore()
 const orderRequest = computed(() => ({