🔀 [fix] : conflict resolved

Author: seorang42

.github/workflows/dev-CD.yml

@@ -0,0 +1,61 @@
+# github repository actions 페이지에 나타날 이름
+name: CD for front using github actions
+
+on:
+  pull_request:
+    types: [ closed ]
+    branches: [ "develop" ]
+
+permissions:
+  contents: read
+
+jobs:
+  front-cd:
+    if: github.event.pull_request.merged == true
+    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 nginxfile.conf
+        run: touch ./nginxfile.conf
+      - run: echo "${{ secrets.NGINX_FILE_CONF }}" > ./nginxfile.conf
+
+      - name: Create Develop nginx.conf
+        run: touch ./nginx.conf
+      - run: echo "${{ secrets.NGINX_CONF }}" > ./nginx.conf
+
+      # docker build & push to develop
+      - name: Docker build & push develop
+        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 Develop
+        uses: appleboy/ssh-action@master
+        id: deployDevelop
+        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 -f ${{ secrets.DOCKER_FRONT_REPO }}
+            docker run --name taskflow-front -d -p 80:80 -p 443:443 -v /etc/letsencrypt/:/etc/letsencrypt/ -v /etc/ssl/:/etc/ssl/  --restart on-failure ${{ secrets.DOCKER_FRONT_REPO }}

.github/workflows/CD.yml .github/workflows/release-CD.yml.github/workflows/CD.yml renamed to .github/workflows/release-CD.yml

@@ -37,37 +37,14 @@ jobs:
         run: touch ./nginxfile.conf
       - run: echo "${{ secrets.NGINX_FILE_CONF }}" > ./nginxfile.conf
 
-      - name: Create Develop nginx.conf
-        run: touch ./nginx.conf
-      - run: echo "${{ secrets.NGINX_CONF }}" > ./nginx.conf
-
-      # docker build & push to develop
-      - name: Docker build & push develop
-        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 Develop
-        uses: appleboy/ssh-action@master
-        id: deployDevelop
-        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 -f ${{ secrets.DOCKER_FRONT_REPO }}
-            docker run --name taskflow-front -d -p 80:80 -p 443:443 -v /etc/letsencrypt/:/etc/letsencrypt/ -v /etc/ssl/:/etc/ssl/  --restart on-failure ${{ secrets.DOCKER_FRONT_REPO }}
-
       - name: Create Production nginx.conf
-        run: echo "${{ secrets.PROD_NGINX_CONF }}" > ./nginx.conf
+        run: touch ./nginx.conf
+      - run: echo "${{ secrets.PROD_NGINX_CONF }}" > ./nginx.conf
 
       # docker build & push to production
       - name: Docker build & push production
         run: |
+          docker login clap.kr-central-2.kcr.dev -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}
           docker build -t ${{ secrets.DOCKER_FRONT_REPO }}:${{ steps.version.outputs.VERSION }} .
           docker push ${{ secrets.DOCKER_FRONT_REPO }}:${{ steps.version.outputs.VERSION }}
 

src/api/admin.ts

@@ -46,6 +46,6 @@ export const getMemberDetailAdmin = async (id: string) => {
 }
 
 export const updateMemberAdmin = async (id: string, data: UserUpdateValue) => {
-  const response = await axiosInstance.post(`api/managements/members/${id}`, data)
+  const response = await axiosInstance.patch(`api/managements/members/${id}`, data)
   return response.data
 }

src/components/common/EditInformation.vue

@@ -56,8 +56,15 @@
         class="hidden" />
     </div>
     <div class="flex flex-col relative">
-      <p class="text-body text-xs font-semibold">이름</p>
-      <span class="absolute top-1 right-2 text-xs text-gray-500"> {{ name.length }} / 10 </span>
+      <div class="flex items-center gap-1 text-red-1">
+        <p class="text-body text-xs font-semibold">이름</p>
+        <p>*</p>
+        <span
+          v-show="isInvalid || isFull"
+          class="text-xs font-semibold"
+          >{{ nameError }}</span
+        >
+      </div>
       <input
         :class="[
           'block w-full px-4 py-4 border rounded focus:outline-none h-11 mt-2',
@@ -68,13 +75,7 @@
         maxlength="10"
         ref="nameInput"
         @blur="validateName" />
-      <div class="mb-1">
-        <span
-          v-show="isInvalid || isFull"
-          class="absolute text-red-1 text-xs font-semibold mt-1"
-          >{{ nameError }}</span
-        >
-      </div>
+      <span class="mt-1.5 text-xs text-gray-500"> {{ name.length }} / 10 </span>
     </div>
     <div class="flex flex-col">
       <p class="text-body text-xs font-semibold">아이디</p>
@@ -127,7 +128,7 @@
 
 <script lang="ts" setup>
 import { patchEditInfo } from '@/api/common'
-import { ALLOWED_FILE_EXTENSIONS } from '@/constants/common'
+import { ALLOWED_FILE_EXTENSIONS, ALLOWED_FILE_EXTENSIONS_IMAGE } from '@/constants/common'
 import { useMemberStore } from '@/stores/member'
 import { storeToRefs } from 'pinia'
 import { nextTick, ref, watchEffect } from 'vue'
@@ -232,7 +233,7 @@ const handleFileUpload = (event: Event) => {
       failModalToggle()
       return
     }
-    if (!ALLOWED_FILE_EXTENSIONS.includes(file.type)) {
+    if (!ALLOWED_FILE_EXTENSIONS_IMAGE.includes(file.type)) {
       failHeader.value = '파일 타입을 확인해주세요'
       failBody.value = '파일 타입과 확장자명이 일치해야합니다'
       failModalToggle()

src/components/common/LoadingIcon.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg
+    class="animate-spin"
+    xmlns="http://www.w3.org/2000/svg"
+    width="64"
+    height="64"
+    viewBox="0 0 64 64"
+    fill="none">
+    <path
+      opacity="0.2"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M31.9999 50.6667C34.4513 50.6667 36.8786 50.1839 39.1433 49.2458C41.4081 48.3077 43.4659 46.9327 45.1992 45.1994C46.9326 43.466 48.3076 41.4082 49.2457 39.1435C50.1838 36.8787 50.6666 34.4514 50.6666 32C50.6666 29.5487 50.1838 27.1214 49.2457 24.8566C48.3076 22.5919 46.9326 20.5341 45.1992 18.8007C43.4659 17.0674 41.4081 15.6924 39.1433 14.7543C36.8786 13.8162 34.4513 13.3334 31.9999 13.3334C27.0492 13.3334 22.3013 15.3 18.8006 18.8007C15.2999 22.3014 13.3333 27.0493 13.3333 32C13.3333 36.9507 15.2999 41.6987 18.8006 45.1994C22.3013 48.7 27.0492 50.6667 31.9999 50.6667ZM31.9999 58.6667C46.7279 58.6667 58.6666 46.728 58.6666 32C58.6666 17.272 46.7279 5.33337 31.9999 5.33337C17.2719 5.33337 5.33325 17.272 5.33325 32C5.33325 46.728 17.2719 58.6667 31.9999 58.6667Z"
+      fill="#18181B" />
+    <path
+      d="M5.33325 32C5.33325 17.272 17.2719 5.33337 31.9999 5.33337V13.3334C27.0492 13.3334 22.3013 15.3 18.8006 18.8007C15.2999 22.3014 13.3333 27.0493 13.3333 32H5.33325Z"
+      fill="#71717A" />
+  </svg>
+</template>

src/components/common/ModalView.vue

@@ -19,7 +19,7 @@
             <CommonIcons
               v-if="type == 'warningType'"
               :name="warningIcon" />
-
+            <LoadingIcon v-if="type == 'loadingType'" />
             <div
               v-if="$slots.header"
               class="flex text-2xl font-semibold justify-center whitespace-pre-wrap text-center">
@@ -81,9 +81,10 @@
 
 <script setup lang="ts">
 import { failIcon, successIcon, warningIcon } from '@/constants/iconPath'
+import { preventEnter } from '@/utils/preventEnter'
 import { onUnmounted, ref, watch } from 'vue'
 import CommonIcons from './CommonIcons.vue'
-import { preventEnter } from '@/utils/preventEnter'
+import LoadingIcon from './LoadingIcon.vue'
 
 const { isOpen, type, modelValue } = defineProps<{
   isOpen: boolean
@@ -116,6 +117,7 @@ watch(
   () => isOpen,
   () => {
     if (isOpen) {
+      textValue.value = ''
       document.body.style.overflow = 'hidden'
       window.addEventListener('keydown', preventEnter)
     } else {

src/components/request-approve/RequestApprove.vue

@@ -63,8 +63,10 @@
 import { getMainCategory, getSubCategory } from '@/api/common'
 import { getTaskDetailUser, postTaskApprove } from '@/api/user'
 import { INITIAL_REQUEST_APPROVE_DATA } from '@/constants/manager'
+import { useErrorStore } from '@/stores/error'
 import type { Category, SubCategory } from '@/types/common'
 import { convertToISO, isAfterNow } from '@/utils/date'
+import { redirectToLogin } from '@/utils/redirectToLogin'
 import { computed, onMounted, ref, watch } from 'vue'
 import { onBeforeRouteLeave, useRouter } from 'vue-router'
 import FormButtonContainer from '../common/FormButtonContainer.vue'
@@ -73,8 +75,6 @@ import CategoryDropDown from '../request-task/CategoryDropDown.vue'
 import DueDateInput from './DueDateInput.vue'
 import LabelDropdown from './LabelDropdown.vue'
 import ManagerDropdown from './ManagerDropdown.vue'
-import { useErrorStore } from '@/stores/error'
-import { redirectToLogin } from '@/utils/redirectToLogin'
 
 const isModalVisible = ref(false)
 const category1 = ref<Category | null>(null)
@@ -163,10 +163,11 @@ const handleSubmit = async () => {
     isInvalidate.value = ''
     return
   }
+
   const requestData = {
     categoryId: category2.value.subCategoryId,
     processorId: approveData.value.processor.memberId,
-    dueDate: !isTimeFilled.value
+    dueDate: isTimeFilled.value
       ? convertToISO(approveData.value.dueDate, approveData.value.dueTime)
       : null,
     labelId: approveData.value.label?.labelId || null

src/components/request-task/ReRequestTask.vue

@@ -18,12 +18,16 @@
       v-model="title"
       :placeholderText="'제목을 입력해주세요'"
       :label-name="'제목'"
+      :limit-length="30"
       :is-invalidate="isInvalidate === 'input' ? 'input' : ''" />
     <RequestTaskTextArea
       v-model="description"
       :is-invalidate="isInvalidate"
-      :placeholderText="'부가 정보를 입력해주세요'" />
-    <RequestTaskFileInput v-model="file" />
+      :placeholderText="'부가 정보를 입력해주세요'"
+      :limit-length="200" />
+    <RequestTaskFileInput
+      v-model="file"
+      :isEdit="true" />
     <FormButtonContainer
       :handleCancel="handleCancel"
       :handleSubmit="handleSubmit"
@@ -173,15 +177,12 @@ const handleSubmit = async () => {
     })
   }
 
-  try {
-    if (reqType === 're') {
-      await postTaskRequest(formData)
-    } else {
-      await patchTaskRequest(id, formData)
-    }
-    isModalVisible.value = 'success'
-  } finally {
-    isSubmitting.value = false
+  if (reqType === 're') {
+    await postTaskRequest(formData)
+  } else {
+    await patchTaskRequest(id, formData)
   }
+  isModalVisible.value = 'success'
+  isSubmitting.value = false
 }
 </script>

src/components/request-task/RequestTask.vue

@@ -18,12 +18,16 @@
       v-model="title"
       :placeholderText="'제목을 입력해주세요'"
       :label-name="'제목'"
-      :is-invalidate="isInvalidate === 'input' ? 'input' : ''" />
+      :is-invalidate="isInvalidate === 'input' ? 'input' : ''"
+      :limit-length="30" />
     <RequestTaskTextArea
       v-model="description"
       :is-invalidate="isInvalidate"
-      :placeholderText="'부가 정보를 입력해주세요'" />
-    <RequestTaskFileInput v-model="file" />
+      :placeholderText="'부가 정보를 입력해주세요'"
+      :limit-length="200" />
+    <RequestTaskFileInput
+      v-model="file"
+      :isUploading="isUploading" />
     <FormButtonContainer
       :handleCancel="handleCancel"
       :handleSubmit="handleSubmit"
@@ -36,11 +40,10 @@
       <template #header>작업이 요청되었습니다</template>
     </ModalView>
     <ModalView
-      :isOpen="isModalVisible === 'fail'"
-      :type="'failType'"
-      @close="handleCancel">
-      <template #header>작업요청을 실패했습니다</template>
-      <template #body>잠시후 시도해주세요</template>
+      :isOpen="isModalVisible === 'loading'"
+      type="loadingType">
+      <template #header>작업을 요청 중입니다...</template>
+      <template #body>잠시만 기다려주세요</template>
     </ModalView>
   </div>
 </template>
@@ -64,9 +67,11 @@ const category2 = ref<SubCategory | null>(null)
 const title = ref('')
 const description = ref('')
 const file = ref(null as File[] | null)
+
 const isInvalidate = ref('')
 const isModalVisible = ref('')
 const isSubmitting = ref(false)
+const isUploading = ref(false)
 
 const mainCategoryArr = ref<Category[]>([])
 const subCategoryArr = ref<SubCategory[]>([])
@@ -125,6 +130,8 @@ const handleSubmit = async () => {
   }
 
   isSubmitting.value = true
+  isUploading.value = true
+  isModalVisible.value = 'loading'
 
   const formData = new FormData()
   const taskInfo = {
@@ -139,11 +146,9 @@ const handleSubmit = async () => {
   if (file.value && file.value.length > 0) {
     file.value.forEach(f => formData.append('attachment', f))
   }
-  try {
-    await postTaskRequest(formData)
-    isModalVisible.value = 'success'
-  } finally {
-    isSubmitting.value = false
-  }
+  await postTaskRequest(formData)
+  isModalVisible.value = 'success'
+  isSubmitting.value = false
+  isUploading.value = false
 }
 </script>