✨ [feat] : RequestHistoryList 컴포넌트 구현

Author: seorang42

src/components/lists/ListCardTab.vue

@@ -2,7 +2,7 @@
   <div
     class="flex gap-2 items-center"
     :style="{ width: width ? `${width}px` : '' }"
-    :class="!width && 'grow'">
+    :class="width ? 'shrink-0' : 'grow'">
     <div
       v-if="profileImg"
       class="w-6 h-6 rounded-full overflow-hidden">

src/components/request-history/RequestHistoryList.vue

@@ -0,0 +1,38 @@
+<template>
+  <ListContainer>
+    <template #listBar>
+      <RequestHistoryListBar />
+    </template>
+
+    <template #listCards>
+      <RequestHistoryListCard
+        v-for="info in DUMMY_REQUEST_HISTORY_LIST_DATA"
+        :key="info.taskId"
+        :info="info" />
+    </template>
+
+    <template #pagination>
+      <ListPagination
+        :page-number="params.page"
+        :total-page="DUMMY_TOTAL_PAGE"
+        @update:page-number="onPageChange" />
+    </template>
+  </ListContainer>
+</template>
+
+<script setup lang="ts">
+import ListPagination from '../lists/ListPagination.vue'
+import ListContainer from '../lists/ListContainer.vue'
+import { DUMMY_REQUEST_HISTORY_LIST_DATA } from '@/datas/dummy'
+import { useRequestParamsStore } from '@/stores/params'
+import RequestHistoryListBar from './RequestHistoryListBar.vue'
+import RequestHistoryListCard from './RequestHistoryListCard.vue'
+
+const { params } = useRequestParamsStore()
+const DUMMY_TOTAL_PAGE = 18
+const onPageChange = (value: number) => {
+  params.page = value
+}
+
+// Data Handling
+</script>

src/components/request-history/RequestHistoryListBar.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="list-bar">
+    <ListBarTab
+      v-for="tab in REQUEST_HISTORY_LIST_BAR_TAB"
+      :key="tab.content"
+      :content="tab.content"
+      :width="tab.width"
+      :sortBy="tab.sortBy"
+      :current-order-request="params.orderRequest"
+      @toggle-sort-by="toggleSortBy" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import ListBarTab from '../lists/ListBarTab.vue'
+import { useRequestParamsStore } from '@/stores/params'
+import { REQUEST_HISTORY_LIST_BAR_TAB } from '@/constants/manager'
+
+const { params } = useRequestParamsStore()
+
+const toggleSortBy = (sortBy: 'REQUESTED' | 'FINISHED') => {
+  if (sortBy === params.orderRequest.sortBy) {
+    params.orderRequest.sortDirection =
+      params.orderRequest.sortDirection === 'DESC' ? 'ASC' : 'DESC'
+  } else {
+    params.orderRequest = { sortBy, sortDirection: 'DESC' }
+  }
+}
+</script>

src/components/request-history/RequestHistoryListCard.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="list-card">
+    <ListCardTab
+      v-for="tab in myRequestTabList"
+      :key="tab.content"
+      :content="tab.content"
+      :width="tab.width"
+      :is-text-xs="tab.isTextXs"
+      :profile-img="tab.profileImg"
+      :is-status="tab.isStatus" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ListCardProps } from '@/types/common'
+import ListCardTab from '../lists/ListCardTab.vue'
+import type { RequestHistoryListData } from '@/types/manager'
+
+const { info } = defineProps<{ info: RequestHistoryListData }>()
+const myRequestTabList: ListCardProps[] = [
+  { content: info.taskCode, width: 120, isTextXs: true },
+  { content: info.requestedAt, width: 80 },
+  { content: info.mainCategoryName, width: 80 },
+  { content: info.categoryName, width: 80 },
+  { content: info.title },
+  { content: info.requesterName, width: 120, profileImg: info.requesterImg },
+  { content: info.processorName, width: 120, profileImg: info.processorImg },
+  { content: info.taskStatus, width: 64, isStatus: true },
+  { content: info.finishedAt, width: 80 }
+]
+</script>

src/components/requested/RequestedListBar.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { REQUESTED_LIST_BAR_TAB } from '@/constants/user'
+import { REQUESTED_LIST_BAR_TAB } from '@/constants/manager'
 import ListBarTab from '../lists/ListBarTab.vue'
 import { useRequestParamsStore } from '@/stores/params'
 

src/constants/manager.ts

@@ -0,0 +1,22 @@
+import type { ListBarTabProps } from '@/types/common'
+
+export const REQUESTED_LIST_BAR_TAB: ListBarTabProps[] = [
+  { content: '요청일', width: 80, sortBy: 'REQUESTED' },
+  { content: '1차 카테고리', width: 80 },
+  { content: '2차 카테고리', width: 80 },
+  { content: '제목' },
+  { content: '요청자', width: 120 },
+  { content: '처리', width: 120, justifyCenter: true }
+]
+
+export const REQUEST_HISTORY_LIST_BAR_TAB: ListBarTabProps[] = [
+  { content: '고유코드', width: 120 },
+  { content: '요청일', width: 80, sortBy: 'REQUESTED' },
+  { content: '1차 카테고리', width: 80 },
+  { content: '2차 카테고리', width: 80 },
+  { content: '제목' },
+  { content: '요청자', width: 120 },
+  { content: '처리자', width: 120 },
+  { content: '상태', width: 64 },
+  { content: '종료일', width: 80, sortBy: 'FINISHED' }
+]

src/constants/user.ts

@@ -11,15 +11,6 @@ export const MY_REQUEST_LIST_BAR_TAB: ListBarTabProps[] = [
   { content: '종료일', width: 80, sortBy: 'FINISHED' }
 ]
 
-export const REQUESTED_LIST_BAR_TAB: ListBarTabProps[] = [
-  { content: '요청일', width: 80, sortBy: 'REQUESTED' },
-  { content: '1차 카테고리', width: 80 },
-  { content: '2차 카테고리', width: 80 },
-  { content: '제목' },
-  { content: '요청자', width: 120 },
-  { content: '처리', width: 120, justifyCenter: true }
-]
-
 export const REQUEST_TASK_CATEGORIES: string[] = [
   'Categroy 1',
   'Categroy 2',