Merge pull request #21 from TaskFlow-CLAP/CLAP-124

CLAP-124 승인 대기 중인 요청 페이지 UI 제작

Author: seorang42

src/assets/styles.css

@@ -30,6 +30,35 @@ body {
   @apply view-container w-full max-w-[400px] mx-auto;
 }
 
+.button-medium {
+  @apply flex items-center justify-center rounded px-4 py-2 font-bold gap-1 text-xs cursor-pointer shrink-0;
+}
+.button-medium-primary {
+  @apply button-medium bg-primary1 text-white;
+}
+.button-medium-secondary {
+  @apply button-medium bg-white border border-primary1 text-primary1;
+}
+.button-medium-default {
+  @apply button-medium bg-white border border-border-1 text-disabled;
+}
+.button-medium-red {
+  @apply button-medium bg-white border border-red-1 text-red-1;
+}
+
+.button-small {
+  @apply flex items-center gap-1 text-xs font-bold;
+}
+.button-small-primary {
+  @apply text-primary1;
+}
+.button-small-default {
+  @apply text-disabled;
+}
+.button-small-red {
+  @apply text-red-1;
+}
+
 .list-bar {
   @apply w-full h-8 px-4 bg-background-2 flex items-center gap-4 shrink-0;
 }

src/components/TitleBar.vue

@@ -15,9 +15,9 @@
 
 <script setup lang="ts">
 import { plusIcon } from '@/constants/iconPath'
-import type { TitleBar } from '@/types/common'
+import type { TitleBarProps } from '@/types/common'
 import CommonIcons from './common/CommonIcons.vue'
 
-const props = defineProps<TitleBar>()
+const props = defineProps<TitleBarProps>()
 defineEmits(['buttonClick'])
 </script>

src/components/filters/FilterCategory.vue

@@ -74,11 +74,11 @@
 
 <script setup lang="ts">
 import { dropdownIcon } from '@/constants/iconPath'
-import type { Category, FilterCategory } from '@/types/common'
+import type { Category, FilterCategoryProps } from '@/types/common'
 import { computed, ref, watchEffect } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 
-const { categoryList, main, sub } = defineProps<FilterCategory>()
+const { categoryList, main, sub } = defineProps<FilterCategoryProps>()
 const emit = defineEmits(['update:main', 'update:sub'])
 
 const isMainOpened = ref(false)

src/components/lists/ListBarTab.vue

@@ -2,28 +2,30 @@
   <div
     class="text-xs font-bold text-body gap-[2px] flex items-center"
     :style="{ width: width ? `${width}px` : '' }"
-    :class="!width && 'grow'">
+    :class="`${!width && 'grow'} ${justifyCenter && 'justify-center'}`">
     {{ content }}
     <button
-      v-if="orderTarget"
-      @click="$emit('toggleOrder', orderTarget)">
+      v-if="sortBy"
+      @click="$emit('toggleSortBy', sortBy)">
       <OrderIcon
-        :is-active="params.order.target === orderTarget"
-        :class="params.order.type === 'ASC' && 'rotate-180'" />
+        :is-active="isActive"
+        :class="isASC && 'rotate-180'" />
     </button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useMyRequestParamsStore } from '@/stores/params'
+import { computed } from 'vue'
 import OrderIcon from '../OrderIcon.vue'
+import type { ListBarTabProps } from '@/types/common'
 
-const { content, width, orderTarget } = defineProps<{
-  content: string
-  width?: number
-  orderTarget?: string
-}>()
-defineEmits(['toggleOrder'])
+const { content, width, sortBy, currentOrderRequest } = defineProps<ListBarTabProps>()
+defineEmits(['toggleSortBy'])
 
-const { params } = useMyRequestParamsStore()
+const isActive = computed(() => {
+  return sortBy === currentOrderRequest.sortBy
+})
+const isASC = computed(() => {
+  return currentOrderRequest.sortDirection === 'ASC'
+})
 </script>

src/components/lists/ListCardTab.vue

@@ -21,10 +21,10 @@
 </template>
 
 <script setup lang="ts">
-import type { ListCardInfo } from '@/types/common'
+import type { ListCardProps } from '@/types/common'
 import TaskStatus from '../TaskStatus.vue'
 
-const { content, width, isTextXs, profileImg, isStatus } = defineProps<ListCardInfo>()
+const { content, width, isTextXs, profileImg, isStatus } = defineProps<ListCardProps>()
 </script>
 
 <style scoped></style>

src/components/my-request/MyRequestFilterBar.vue

@@ -5,11 +5,11 @@
       :width="120"
       :option-list="TERM_LIST"
       :value="String(params.term)"
-      @update:value="value => (params.term = Number(value))" />
+      @update:value="onTermChange" />
     <FilterCategory
       :category-list="DUMMY_CATEGORY_LIST"
-      :main="params.mainCategory"
-      :sub="params.category"
+      :main="params.mainCategoryId"
+      :sub="params.categoryId"
       @update:main="onMainChange"
       @update:sub="onSubChange" />
     <FilterInput
@@ -38,28 +38,34 @@
 </template>
 
 <script setup lang="ts">
-import { PAGE_SIZE_LIST, TASK_STATUS_LIST, TERM_LIST } from '@/constants/user'
 import FilterDropdown from '../filters/FilterDropdown.vue'
 import FilterCategory from '../filters/FilterCategory.vue'
 import FilterInput from '../filters/FilterInput.vue'
 import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
 import { useMyRequestParamsStore } from '@/stores/params'
 import { DUMMY_CATEGORY_LIST } from '@/datas/dummy'
+import { PAGE_SIZE_LIST, TASK_STATUS_LIST, TERM_LIST } from '@/constants/common'
 
 const { params } = useMyRequestParamsStore()
 
+const onTermChange = (value: string) => {
+  if (value === '') {
+    params.term = ''
+  }
+  params.term = Number(value)
+}
 const onMainChange = (value: number) => {
-  if (params.mainCategory.includes(value)) {
-    params.mainCategory = [...params.mainCategory].filter(el => el !== value)
+  if (params.mainCategoryId.includes(value)) {
+    params.mainCategoryId = [...params.mainCategoryId].filter(el => el !== value)
   } else {
-    params.mainCategory.push(value)
+    params.mainCategoryId.push(value)
   }
 }
 const onSubChange = (value: number) => {
-  if (params.category.includes(value)) {
-    params.category = [...params.category].filter(el => el !== value)
+  if (params.categoryId.includes(value)) {
+    params.categoryId = [...params.categoryId].filter(el => el !== value)
   } else {
-    params.category.push(value)
+    params.categoryId.push(value)
   }
 }
 const onTaskStatusClick = (value: string) => {

src/components/my-request/MyRequestList.vue

@@ -6,14 +6,14 @@
 
     <template #listCards>
       <MyRequestListCard
-        v-for="info in DUMMY_MY_REQUEST_LIST_INFO"
+        v-for="info in DUMMY_MY_REQUEST_LIST_DATA"
         :key="info.taskId"
         :info="info" />
     </template>
 
     <template #pagination>
       <ListPagination
-        :page-number="params.pageNumber"
+        :page-number="params.page"
         :total-page="DUMMY_TOTAL_PAGE"
         @update:page-number="onPageChange" />
     </template>
@@ -26,12 +26,12 @@ import MyRequestListCard from './MyRequestListCard.vue'
 import { useMyRequestParamsStore } from '@/stores/params'
 import ListPagination from '../lists/ListPagination.vue'
 import ListContainer from '../lists/ListContainer.vue'
-import { DUMMY_MY_REQUEST_LIST_INFO } from '@/datas/dummy'
+import { DUMMY_MY_REQUEST_LIST_DATA } from '@/datas/dummy'
 
 const { params } = useMyRequestParamsStore()
 const DUMMY_TOTAL_PAGE = 18
 const onPageChange = (value: number) => {
-  params.pageNumber = value
+  params.page = value
 }
 
 // Data Handling

src/components/my-request/MyRequestListBar.vue

@@ -5,8 +5,9 @@
       :key="tab.content"
       :content="tab.content"
       :width="tab.width"
-      :order-target="tab.target"
-      @toggle-order="toggleOrder" />
+      :sortBy="tab.sortBy"
+      :current-order-request="params.orderRequest"
+      @toggle-sort-by="toggleSortBy" />
   </div>
 </template>
 
@@ -17,11 +18,12 @@ import ListBarTab from '../lists/ListBarTab.vue'
 
 const { params } = useMyRequestParamsStore()
 
-const toggleOrder = (orderTarget: string) => {
-  if (orderTarget === params.order.target) {
-    params.order.type = params.order.type === 'DESC' ? 'ASC' : 'DESC'
+const toggleSortBy = (sortBy: 'REQUESTED' | 'FINISHED') => {
+  if (sortBy === params.orderRequest.sortBy) {
+    params.orderRequest.sortDirection =
+      params.orderRequest.sortDirection === 'DESC' ? 'ASC' : 'DESC'
   } else {
-    params.order = { target: orderTarget, type: 'DESC' }
+    params.orderRequest = { sortBy, sortDirection: 'DESC' }
   }
 }
 </script>

src/components/my-request/MyRequestListCard.vue

@@ -1,23 +1,23 @@
 <template>
   <div class="list-card">
     <ListCardTab
-      v-for="info in myRequestInfoList"
-      :key="info.content"
-      :content="info.content"
-      :width="info.width"
-      :is-text-xs="info.isTextXs"
-      :profile-img="info.profileImg"
-      :is-status="info.isStatus" />
+      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 { MyRequestListInfo } from '@/types/user'
-import type { ListCardInfo } from '@/types/common'
+import type { ListCardProps } from '@/types/common'
 import ListCardTab from '../lists/ListCardTab.vue'
+import type { MyRequestListData } from '@/types/user'
 
-const { info } = defineProps<{ info: MyRequestListInfo }>()
-const myRequestInfoList: ListCardInfo[] = [
+const { info } = defineProps<{ info: MyRequestListData }>()
+const myRequestTabList: ListCardProps[] = [
   { content: info.taskCode, width: 120, isTextXs: true },
   { content: info.requestedAt, width: 80 },
   { content: info.mainCategoryName, width: 80 },

src/components/request-task/RequestTaskFileInput.vue

@@ -17,9 +17,9 @@
       <div class="text-sm text-disabled font-bold">첨부할 파일을 끌어 놓으세요</div>
       <label
         for="file"
-        class="flex items-center justify-center h-8 rounded px-4 py-2 bg-primary1 text-white font-bold gap-1 text-xs cursor-pointer">
+        class="button-medium-primary">
         <CommonIcons :name="uploadIcon" />
-        <p>파일선택</p>
+        <p>파일 선택</p>
       </label>
     </div>
   </div>