🔀 [fix] : conflict resolved

Author: seorang42

.gitignore

@@ -13,6 +13,7 @@ dist
 dist-ssr
 coverage
 *.local
+.env
 
 /cypress/videos/
 /cypress/screenshots/
@@ -27,4 +28,5 @@ coverage
 *.sln
 *.sw?
 
+
 *.tsbuildinfo

package-lock.json

@@ -14,13 +14,17 @@
   },
   "dependencies": {
     "axios": "^1.7.9",
+    "js-cookie": "^3.0.5",
     "pinia": "^2.3.0",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^22.10.2",
+    "@types/sortablejs": "^1.15.8",
     "@typescript-eslint/eslint-plugin": "^8.20.0",
     "@typescript-eslint/parser": "^8.20.0",
     "@vitejs/plugin-vue": "^5.2.1",

package.json

@@ -0,0 +1,16 @@
+import axiosInstance from '../utils/axios'
+
+export const getNotifications = async () => {
+  const response = await axiosInstance.get('/api/notifications?page=0&size=5')
+  return response.data
+}
+
+export const postLogin = async (nickname: string, password: string) => {
+  const response = await axiosInstance.post('/api/auths/login', { nickname, password })
+  return response.data
+}
+
+export const patchReadNotification = async (notificationId: number) => {
+  const response = await axiosInstance.patch(`/api/notification/${notificationId}`)
+  return response.data
+}

public/images/mockProfile.jpg

@@ -100,3 +100,7 @@ body {
 .input-box {
   @apply block w-full px-4 py-4 border border-zinc-300 rounded focus:outline-none;
 }
+
+.task-detail {
+  @apply text-xs text-body font-bold mb-2;
+}

src/api/test.ts

@@ -0,0 +1,45 @@
+<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="borderLeft"
+    @click="onTaskClick">
+    <div class="flex flex-col gap-1">
+      <div class="flex justify-between items-center gap-4">
+        <span class="text-black">{{ data.title }}</span>
+        <CommonIcons :name="bentoIcon" />
+      </div>
+      <span class="text-xs text-body">{{ data.mainCategoryName }} - {{ data.categoryName }}</span>
+    </div>
+    <div class="flex justify-between items-end">
+      <span class="text-xs font-bold text-black">{{ data.taskCode }}</span>
+      <div class="flex flex-col gap-1 items-end">
+        <span class="text-xs font-bold text-body">{{ data.requesterDepartment }}</span>
+        <div class="flex items-center gap-1">
+          <div class="w-4 h-4 rounded-full bg-background-1 overflow-hidden">
+            <img :src="data.requesterImageUrl" />
+          </div>
+          <span class="text-xs font-bold text-black">{{ data.requesterNickName }}</span>
+        </div>
+      </div>
+    </div>
+  </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'
+
+const { data } = defineProps<{ data: TaskCardProps }>()
+
+const borderLeft = computed(() => {
+  return `border-${statusAsColor(data.taskStatus as Status)}-1`
+})
+
+const onTaskClick = () => {
+  console.log('clicked')
+}
+</script>

src/assets/styles.css

@@ -4,35 +4,27 @@
     :class="bgColor">
     <span
       class="text-xs font-bold"
-      :class="textColor"
-      >{{ status }}</span
-    >
+      :class="textColor">
+      {{ status }}
+    </span>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { Status } from '@/types/common'
+import { statusAsColor } from '@/utils/statusAsColor'
 import { computed } from 'vue'
 
 const { status, isActive } = defineProps<{
-  status?: string
+  status: Status
   isActive?: boolean
 }>()
 
-const defaultColor = {
-  요청: 'gray',
-  '진행 중': 'blue',
-  '검토 중': 'orange',
-  완료: 'green',
-  종료: 'red'
-}
-
-const key = status as keyof typeof defaultColor
-
 const textColor = computed(() => {
-  return isActive ? 'text-white' : `text-${defaultColor[key]}-1`
+  return isActive ? 'text-white' : `text-${statusAsColor(status)}-1`
 })
 const bgColor = computed(() => {
-  return isActive ? `bg-${defaultColor[key]}-1` : `bg-${defaultColor[key]}-2`
+  return isActive ? `bg-${statusAsColor(status)}-1` : `bg-${statusAsColor(status)}-2`
 })
 </script>
 

src/components/TaskCard.vue

@@ -10,7 +10,7 @@
     </div>
     <TaskStatus
       v-if="isStatus"
-      :status="content" />
+      :status="content as Status" />
     <span
       v-else
       class="break-all"
@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import type { ListCardProps } from '@/types/common'
+import type { ListCardProps, Status } from '@/types/common'
 import TaskStatus from '../TaskStatus.vue'
 
 const { content, width, isTextXs, profileImg, isStatus, isStatusCode, isTextBody } =

src/components/TaskStatus.vue

@@ -42,7 +42,7 @@
 <script setup lang="ts">
 import { nextIcon, nextSetIcon, prevIcon, prevSetIcon } from '@/constants/iconPath'
 import { computed } from 'vue'
-import CommonIcons from '../common/CommonIcons.vue';
+import CommonIcons from '../common/CommonIcons.vue'
 
 const { pageNumber, totalPage } = defineProps<{ pageNumber: number; totalPage: number }>()
 const emit = defineEmits(['update:pageNumber'])