CLAP-427 QA 사항 반영 Chloe

src/api/auth.ts

@@ -3,12 +3,12 @@ import Cookies from 'js-cookie'
 
 import { useMemberStore } from '@/stores/member'
 
-export const postPasswordEmailSend = async (name: string, email: string) => {
+export const postPasswordEmailSend = async (name: string, email: string, id: string) => {
   const request = {
     name: name,
     email: email
   }
-  const response = await axiosInstance.post('/api/new-password', request)
+  const response = await axiosInstance.post(`/api/new-password?nickname=${id}`, request)
   return response.data
 }
 

src/components/common/EditInformation.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="flex flex-col gap-y-6">
     <ModalView
-      :isOpen="isModalVisible"
+      :isOpen="isSuccessModalVisible"
       :type="'successType'"
-      @close="isModalVisible = !isModalVisible">
+      @close="isSuccessModalVisible = !isSuccessModalVisible">
       <template #header>정보가 수정되었습니다</template>
     </ModalView>
 
@@ -17,12 +17,12 @@
     </ModalView>
 
     <ModalView
-      :isOpen="isFailModalVisible"
-      :type="'failType'"
-      @click="failModalToggle"
-      @close="failModalToggle">
-      <template #header>{{ failHeader }}</template>
-      <template #body>{{ failBody }}</template>
+      :isOpen="isModalVisible"
+      :type="modalType"
+      @click="modalToggle"
+      @close="modalToggle">
+      <template #header>{{ modalHeader }}</template>
+      <template #body>{{ modalBody }}</template>
     </ModalView>
 
     <div class="profile">
@@ -154,12 +154,14 @@ const isInvalid = ref(false)
 const isFull = ref(false)
 const nameInput = ref<HTMLInputElement | null>(null)
 
-const isModalVisible = ref(false)
+const isSuccessModalVisible = ref(false)
 const isWarnningModalVisible = ref(false)
-const isFailModalVisible = ref(false)
+const isModalVisible = ref(false)
+
+const modalType = ref('')
 
-const failHeader = ref('')
-const failBody = ref('')
+const modalHeader = ref('')
+const modalBody = ref('')
 
 const nameError = ref('')
 
@@ -215,8 +217,8 @@ const warningModalToggle = () => {
   isWarnningModalVisible.value = !isWarnningModalVisible.value
 }
 
-const failModalToggle = () => {
-  isFailModalVisible.value = !isFailModalVisible.value
+const modalToggle = () => {
+  isModalVisible.value = !isModalVisible.value
 }
 
 const handleFileUpload = (event: Event) => {
@@ -228,23 +230,26 @@ const handleFileUpload = (event: Event) => {
     const fileExtension = fileName.split('.').pop()
 
     if (!fileExtension || !ALLOWED_FILE_EXTENSIONS.includes(fileExtension)) {
-      failHeader.value = '지원하지 않는 파일입니다'
-      failBody.value = 'jpg, jpeg, png, gif, bmp 파일만 업로드 가능합니다'
-      failModalToggle()
+      modalHeader.value = '지원하지 않는 파일입니다'
+      modalBody.value = 'jpg, jpeg, png, gif, bmp 파일만 업로드 가능합니다'
+      modalType.value = 'failType'
+      modalToggle()
       return
     }
     if (!ALLOWED_FILE_EXTENSIONS_IMAGE.includes(file.type)) {
-      failHeader.value = '파일 타입을 확인해주세요'
-      failBody.value = '파일 타입과 확장자명이 일치해야합니다'
-      failModalToggle()
+      modalHeader.value = '파일 타입을 확인해주세요'
+      modalBody.value = '파일 타입과 확장자명이 일치해야합니다'
+      modalType.value = 'failType'
+      modalToggle()
       return
     }
 
     const newFiles = Array.from(target.files).filter(file => file.size <= 5 * 1024 * 1024)
     if (newFiles.length !== target.files.length) {
-      failHeader.value = '이미지 용량을 확인해주세요'
-      failBody.value = '이미지 용량은 5mb까지 가능합니다'
-      failModalToggle()
+      modalHeader.value = '이미지 용량을 확인해주세요'
+      modalBody.value = '이미지 용량은 5mb까지 가능합니다'
+      modalType.value = 'failType'
+      modalToggle()
       return
     }
 
@@ -261,6 +266,11 @@ const handleFileDelete = () => {
 }
 
 const handleSubmit = async () => {
+  modalHeader.value = '정보 수정 중 입니다...'
+  modalBody.value = '잠시만 기다려주세요'
+  modalType.value = 'loadingType'
+  isModalVisible.value = true
+
   if (isInvalid.value == false && isFull.value == false) {
     const formData = new FormData()
     const memberInfo = {
@@ -281,7 +291,8 @@ const handleSubmit = async () => {
     }
 
     await patchEditInfo(formData)
-    isModalVisible.value = true
+    isModalVisible.value = false
+    isSuccessModalVisible.value = true
     await memberStore.updateMemberInfoWithToken()
   }
 }

src/components/task-detail/TaskStatusList.vue

@@ -55,6 +55,7 @@ const isModalVisible = ref({
   fail: false,
   success: false
 })
+const backModal = ref(false)
 
 const emit = defineEmits(['update:status'])
 const queryClient = useQueryClient()
@@ -74,7 +75,7 @@ const toggleModal = (key: keyof typeof isModalVisible.value) => {
 
 const closeModal = () => {
   const prevSuccess = isModalVisible.value.success
-  isModalVisible.value = { reject: false, fail: false, success: false }
+  isModalVisible.value = { reject: backModal.value ? true : false, fail: false, success: false }
   if (prevSuccess) queryClient.invalidateQueries({ queryKey: ['requested'] })
 }
 
@@ -92,8 +93,11 @@ const rejectRequest = async () => {
   if (rejectReason.value.length === 0) {
     toggleModal('fail')
     modalError.value = '종료 사유를 입력해주세요'
+    backModal.value = true
     return
   }
+
+  backModal.value = false
   await axiosInstance.patch(`/api/tasks/${taskId}/terminate`, { reason: rejectReason.value })
   toggleModal('success')
   emit('update:status', 'TERMINATED')

src/utils/axios.ts

@@ -49,9 +49,16 @@ const setInterceptors = (instance: AxiosInstance) => {
       } else if (error.response) {
         switch (error.response.status) {
           case 401:
-            if (error.response.data === 'AUTH_003') {
+            if (error.response.data === 'AUTH_016') {
+              setError('일치하는 정보가 없습니다', '아이디와 비밀번호를 다시 확인해주세요')
+            } else if (error.response.data === 'AUTH_003') {
               Cookies.remove('refreshToken')
               setError('유효하지 않은 토큰입니다', '다시 로그인 해주세요', redirectToLogin)
+            } else if (error.response.data === 'AUTH_015') {
+              setError(
+                '정지된 계정입니다',
+                '로그인 시도 5회 초과로 계정이 정지되었습니다\n30분 후 다시 시도해주세요'
+              )
             }
             break
           case 403: {

src/views/LoginView.vue

@@ -77,49 +77,25 @@ const closeModal = () => {
 }
 
 const handleLogin = async () => {
-  try {
-    const name = id.value.toString()
-    const res = await postLogin(name, password.value)
-    const role = await memberStore.updateMemberInfoWithToken()
+  const name = id.value.toString()
+  const res = await postLogin(name, password.value)
+  const role = await memberStore.updateMemberInfoWithToken()
 
-    if (!Cookies.get('refreshToken')) {
-      router.push('/pw-change')
-    } else if (res) {
-      switch (role) {
-        case 'ROLE_ADMIN':
-          router.push('/member-management')
-          break
-        case 'ROLE_MANAGER':
-          router.push('my-task')
-          break
-        case 'ROLE_USER':
-          router.push('/my-request')
-          break
-        default:
-          router.push('/')
-      }
-    }
-  } catch (error) {
-    if (axios.isAxiosError(error)) {
-      switch (error.response?.status) {
-        case 401:
-          if (error.response?.data == 'AUTH_015') {
-            messageHeader.value = '정지된 계정입니다'
-            messageBody.value =
-              '로그인 시도 5회 초과로 계정이 정지되었습니다\n30분 후 다시 시도해주세요'
-          } else {
-            messageHeader.value = '일치하는 정보가 없습니다'
-            messageBody.value = '아이디와 비밀번호를 다시 확인해주세요'
-          }
-          isModalVisible.value = !isModalVisible.value
-          break
-
-        case 404:
-          isModalVisible.value = !isModalVisible.value
-          messageHeader.value = '활성화 되어있지 않은 계정입니다'
-          messageBody.value = '접근 상태를 다시 확인하여주세요'
-          break
-      }
+  if (!Cookies.get('refreshToken')) {
+    router.push('/pw-change')
+  } else if (res) {
+    switch (role) {
+      case 'ROLE_ADMIN':
+        router.push('/member-management')
+        break
+      case 'ROLE_MANAGER':
+        router.push('my-task')
+        break
+      case 'ROLE_USER':
+        router.push('/my-request')
+        break
+      default:
+        router.push('/')
     }
   }
 }

src/views/PwChangeEmail.vue

@@ -85,7 +85,8 @@ const closeFailModal = () => {
 }
 
 const handleCheck = async () => {
-  await postPasswordEmailSend(name.value, email.value)
+  const id = email.value.split('@')[0]
+  await postPasswordEmailSend(name.value, email.value, id)
   isModalVisible.value = !isModalVisible.value
 }
 </script>

src/views/PwChangeView.vue

@@ -21,7 +21,11 @@
       <TitleContainer
         v-else
         :title="'비밀번호\n재설정'"
-        content="새로운 비밀번호를 입력해주세요" />
+        :content="
+          !firstVisit
+            ? '새로운 비밀번호를 입력해주세요\n보안을 위해 링크는 5분 후 만료됩니다'
+            : '새로운 비밀번호를 입력해주세요'
+        " />
     </div>
     <form
       v-if="!isConfirmed"
@@ -124,6 +128,8 @@ const messageBody = ref('')
 const pw = ref('')
 const isConfirmed = ref(false)
 
+const firstVisit = ref(Cookies.get('accessToken') ? true : false)
+
 const handleCheck = async () => {
   await postPasswordCheck(pw.value)
   isConfirmed.value = true