Clap-233 작업 상세조회, 사용자 상세조회 api 연결

.github/workflows/cicd.yml → .github/workflows/CD.yml

@@ -1,61 +1,57 @@
-# github repository actions 페이지에 나타날 이름
-name: CI/CD for front using github actions
-
-# event trigger
-# develop 브랜치에 pull_request가 닫히거나 푸시했을때 실행
-on:
-  pull_request:
-    types: [closed]
-    branches: [ "develop" ]
-  push:
-    branches: [ "develop" ]
-
-
-permissions:
-  contents: read
-
-jobs:
-  front-cicd:
-    runs-on: ubuntu-latest
-    steps:
-      # 저장소 코드를 체크아웃합니다. (PR 올린 코드를 가져오는 행위)
-      - uses: actions/checkout@v4
-
-      # Node.js 환경 설정
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22 # 지정된 Node.js 버전 사용
-          cache: npm # setup-node 의 캐시 기능을 사용함
-          cache-dependency-path: package-lock.json # 캐시 기능을 사용할 때 캐시의 기준이 될 파일을 지정
-
-      - name: Install Dependencies
-        run: npm install
-
-      - name: Build with npm
-        run: npm run build || exit 0  # exit 0를 추가하여 경고성 오류 무시
-
-      - name: Create nginx.conf
-        run: touch ./nginx.conf
-      - run: echo "${{ secrets.NGINX_CONF }}" > ./nginx.conf
-
-      ## docker build & push to production
-      - name: Docker build & push
-        run: |
-          docker login clap.kr-central-2.kcr.dev -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}
-          docker build -t ${{ secrets.DOCKER_FRONT_REPO }} .
-          docker push ${{ secrets.DOCKER_FRONT_REPO }}
-
-      ## deploy
-      - name: Deploy
-        uses: appleboy/ssh-action@master
-        id: deploy
-        with:
-          host: ${{ secrets.FRONT_HOST }}
-          username: ${{ secrets.FRONT_HOST_USERNAME }}
-          key: ${{ secrets.FRONT_HOST_KEY }}
-          port: ${{ secrets.FRONT_HOST_PORT }}
-          script: |
-            docker rm -f taskflow-front
-            docker image rm ${{ secrets.DOCKER_FRONT_REPO }} -f
-            docker run --name taskflow-front -d -p 80:80 --restart on-failure ${{ secrets.DOCKER_FRONT_REPO }}
+# github repository actions 페이지에 나타날 이름
+name: CD for front using github actions
+
+# event trigger
+# develop 브랜치에 pull_request가 닫히거나 푸시했을때 실행
+on:
+  push:
+    branches: [ "develop" ]
+
+permissions:
+  contents: read
+
+jobs:
+  front-cicd:
+    runs-on: ubuntu-latest
+    steps:
+      # 저장소 코드를 체크아웃합니다. (PR 올린 코드를 가져오는 행위)
+      - uses: actions/checkout@v4
+
+      # Node.js 환경 설정
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22 # 지정된 Node.js 버전 사용
+          cache: npm # setup-node 의 캐시 기능을 사용함
+          cache-dependency-path: package-lock.json # 캐시 기능을 사용할 때 캐시의 기준이 될 파일을 지정
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build with npm
+        run: npm run build-only
+
+      - name: Create nginx.conf
+        run: touch ./nginx.conf
+      - run: echo "${{ secrets.NGINX_CONF }}" > ./nginx.conf
+
+      ## docker build & push to production
+      - name: Docker build & push
+        run: |
+          docker login clap.kr-central-2.kcr.dev -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}
+          docker build -t ${{ secrets.DOCKER_FRONT_REPO }} .
+          docker push ${{ secrets.DOCKER_FRONT_REPO }}
+
+      ## deploy
+      - name: Deploy
+        uses: appleboy/ssh-action@master
+        id: deploy
+        with:
+          host: ${{ secrets.FRONT_HOST }}
+          username: ${{ secrets.FRONT_HOST_USERNAME }}
+          key: ${{ secrets.FRONT_HOST_KEY }}
+          port: ${{ secrets.FRONT_HOST_PORT }}
+          script: |
+            docker rm -f taskflow-front
+            docker image rm ${{ secrets.DOCKER_FRONT_REPO }} -f
+            docker run --name taskflow-front -d -p 80:80 --restart on-failure ${{ secrets.DOCKER_FRONT_REPO }}

.github/workflows/CI.yml

@@ -0,0 +1,33 @@
+# github repository actions 페이지에 나타날 이름
+name: CI for front using github actions
+
+# event trigger
+# develop 브랜치에 pull_request가 닫히거나 푸시했을때 실행
+on:
+  pull_request:
+    types: [ opened, synchronize ]
+    branches: [ "develop" ]
+
+permissions:
+  contents: read
+
+jobs:
+  front-cicd:
+    runs-on: ubuntu-latest
+    steps:
+      # 저장소 코드를 체크아웃합니다. (PR 올린 코드를 가져오는 행위)
+      - uses: actions/checkout@v4
+
+      # Node.js 환경 설정
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22 # 지정된 Node.js 버전 사용
+          cache: npm # setup-node 의 캐시 기능을 사용함
+          cache-dependency-path: package-lock.json # 캐시 기능을 사용할 때 캐시의 기준이 될 파일을 지정
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build with npm
+        run: npm run build-only

src/api/user.ts

@@ -4,3 +4,13 @@ export const postTaskRequest = async (formdata: FormData) => {
   const response = await formDataAxiosInstance.post('/api/tasks', formdata)
   return response.data
 }
+
+export const getTaskDetailUser = async (id: number) => {
+  const response = await formDataAxiosInstance.get(`/api/tasks/${id}/requests/details`)
+  return response.data
+}
+
+export const getTaskDetailManager = async (id: number) => {
+  const response = await formDataAxiosInstance.get(`/api/tasks/${id}/details`)
+  return response.data
+}

src/components/TaskStatus.vue

@@ -28,5 +28,3 @@ const bgColor = computed(() => {
   return isActive ? `bg-${statusAsColor(status)}-1` : `bg-${statusAsColor(status)}-2`
 })
 </script>
-
-<style scoped></style>

src/components/my-request/MyRequestListCard.vue

@@ -2,22 +2,36 @@
   <div class="list-card">
     <ListCardTab
       v-for="tab in myRequestTabList"
+      @click="handleModal(info.taskId)"
       :key="tab.content"
       :content="tab.content"
       :width="tab.width"
       :is-text-xs="tab.isTextXs"
       :profile-img="tab.profileImg"
       :is-status="tab.isStatus" />
   </div>
+  <TaskDetail
+    v-if="selectedID"
+    :is-approved="info.taskStatus !== 'REQUESTED'"
+    :selected-id="selectedID"
+    :close-task-detail="() => handleModal(null)" />
 </template>
 
 <script setup lang="ts">
 import type { ListCardProps } from '@/types/common'
-import ListCardTab from '../lists/ListCardTab.vue'
 import type { MyRequestListData } from '@/types/user'
 import { formatDate } from '@/utils/date'
+import { ref } from 'vue'
+import ListCardTab from '../lists/ListCardTab.vue'
+import TaskDetail from '../task-detail/TaskDetail.vue'
 
 const { info } = defineProps<{ info: MyRequestListData }>()
+const selectedID = ref<number | null>(null)
+
+const handleModal = (id: number | null) => {
+  selectedID.value = id
+}
+
 const myRequestTabList: ListCardProps[] = [
   { content: info.taskCode, width: 120, isTextXs: true },
   { content: formatDate(info.requestedAt), width: 80 },

src/components/my-task/MyTaskFilterBar.vue

@@ -41,7 +41,7 @@ import { useRequestParamsStore } from '@/stores/params'
 import { PAGE_SIZE_LIST, TASK_STATUS_LIST, TERM_LIST } from '@/constants/common'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
 import { useQuery } from '@tanstack/vue-query'
-import {axiosInstance} from '@/utils/axios'
+import { axiosInstance } from '@/utils/axios'
 
 const store = useRequestParamsStore()
 store.$reset()

src/components/my-task/MyTaskList.vue

@@ -28,7 +28,7 @@ import { useRequestParamsStore } from '@/stores/params'
 import MyTaskListCard from './MyTaskListCard.vue'
 import MyTaskListBar from './MyTaskListBar.vue'
 import { useParseParams } from '../hooks/useParseParams'
-import axiosInstance from '@/utils/axios'
+import { axiosInstance } from '@/utils/axios'
 import type { MyTaskResponse } from '@/types/manager'
 import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'

src/components/request-history/RequestHistoryList.vue

@@ -28,7 +28,7 @@ import { useRequestParamsStore } from '@/stores/params'
 import RequestHistoryListBar from './RequestHistoryListBar.vue'
 import RequestHistoryListCard from './RequestHistoryListCard.vue'
 import { useParseParams } from '../hooks/useParseParams'
-import axiosInstance from '@/utils/axios'
+import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
 import type { RequestHistoryResponse } from '@/types/manager'

src/components/request-task/CategoryDropDown.vue

@@ -41,7 +41,7 @@
 
 <script lang="ts" setup>
 import { dropdownIcon } from '@/constants/iconPath'
-import type { CategoryDropdownProps, MainCategoryTypes, SubCategoryTypes } from '@/types/common'
+import type { Category, CategoryDropdownProps } from '@/types/common'
 import { computed, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 
@@ -58,7 +58,7 @@ const toggleDropdown = () => {
   dropdownOpen.value = !dropdownOpen.value
 }
 
-const selectOption = (option: MainCategoryTypes | SubCategoryTypes) => {
+const selectOption = (option: Category) => {
   emit('update:modelValue', option)
   dropdownOpen.value = false
 }

src/components/request-task/RequestTask.vue

@@ -38,7 +38,7 @@
 <script lang="ts" setup>
 import { getMainCategory, getSubCategory } from '@/api/common'
 import { postTaskRequest } from '@/api/user'
-import type { MainCategoryTypes, SubCategoryTypes } from '@/types/common'
+import type { Category, SubCategory } from '@/types/common'
 import { onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import FormButtonContainer from '../common/FormButtonContainer.vue'
@@ -48,18 +48,18 @@ import RequestTaskFileInput from './RequestTaskFileInput.vue'
 import RequestTaskInput from './RequestTaskInput.vue'
 import RequestTaskTextArea from './RequestTaskTextArea.vue'
 
-const category1 = ref<MainCategoryTypes | null>(null)
-const category2 = ref<MainCategoryTypes | null>(null)
+const category1 = ref<Category | null>(null)
+const category2 = ref<Category | null>(null)
 
 const title = ref('')
 const description = ref('')
 const file = ref(null as File[] | null)
 const isInvalidate = ref('')
 const isModalVisible = ref(false)
 
-const mainCategoryArr = ref<MainCategoryTypes[]>([])
-const subCategoryArr = ref<SubCategoryTypes[]>([])
-const afterSubCategoryArr = ref<SubCategoryTypes[]>([])
+const mainCategoryArr = ref<Category[]>([])
+const subCategoryArr = ref<SubCategory[]>([])
+const afterSubCategoryArr = ref<SubCategory[]>([])
 
 onMounted(async () => {
   mainCategoryArr.value = await getMainCategory()

src/components/request-task/RequestTaskInput.vue

@@ -1,24 +1,29 @@
 <template>
-  <div>
+  <div class="relative">
     <div class="text-xs flex gap-x-1 mb-2">
       <p class="text-body font-bold">{{ labelName }}</p>
       <p
         v-if="!isNotRequired"
         class="text-red-1">
         *
       </p>
-      <p
-        v-if="isInvalidateState === 'input'"
-        class="text-red-1">
-        {{ labelName }}을 입력해주세요
-      </p>
     </div>
     <input
       class="w-full h-11 border border-border-1 px-4 focus:outline-none text-black"
       :value="modelValue"
       :disabled="isEdit"
       @input="updateValue(($event.target as HTMLInputElement).value)"
       :placeholder="placeholderText" />
+    <p
+      v-if="isInvalidateState === 'input'"
+      class="text-red-1 text-xs absolute top-[calc(100%+4px)]">
+      {{ labelName }}을 입력해주세요
+    </p>
+    <p
+      v-if="isInvalidateState === 'code'"
+      class="text-red-1 text-xs absolute top-[calc(100%+4px)]">
+      사용할 수 없는 고유코드입니다.
+    </p>
   </div>
 </template>
 

src/components/requested/RequestedFilterBar.vue

@@ -35,7 +35,7 @@ import { PAGE_SIZE_LIST, TERM_LIST } from '@/constants/common'
 import { useRequestParamsStore } from '@/stores/params'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
 import { useQuery } from '@tanstack/vue-query'
-import {axiosInstance} from '@/utils/axios'
+import { axiosInstance } from '@/utils/axios'
 
 const store = useRequestParamsStore()
 store.$reset()

src/components/requested/RequestedList.vue

@@ -28,7 +28,7 @@ import RequestedListBar from './RequestedListBar.vue'
 import RequestedListCard from './RequestedListCard.vue'
 import { useRequestParamsStore } from '@/stores/params'
 import { useParseParams } from '../hooks/useParseParams'
-import axiosInstance from '@/utils/axios'
+import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
 import type { RequestedResponse } from '@/types/manager'

src/components/task-board/TaskBoardFilterBar.vue

@@ -29,7 +29,7 @@ import FilterInput from '../filters/FilterInput.vue'
 import { DUMMY_DIVISION_LIST } from '@/datas/dummy'
 import { useTaskBoardParamsStore } from '@/stores/params'
 import { useQuery } from '@tanstack/vue-query'
-import {axiosInstance} from '@/utils/axios'
+import { axiosInstance } from '@/utils/axios'
 
 const { params } = useTaskBoardParamsStore()