CLAP-364 UI/UX 개선 Chloe

src/components/common/EditInformation.vue

@@ -59,16 +59,18 @@
         maxlength="10"
         ref="nameInput"
         @blur="validateName" />
-      <span
-        v-show="isInvalid"
-        class="text-red-1 text-xs font-bold mt-1"
-        >이름에는 특수문자가 포함될 수 없습니다.</span
-      >
-      <span
-        v-show="isFull"
-        class="text-red-1 text-xs font-bold mt-1"
-        >이름은 1글자 이상, 10글자이하만 가능합니다.</span
-      >
+      <div class="mb-1">
+        <span
+          v-show="isInvalid"
+          class="absolute text-red-1 text-xs font-bold mt-1"
+          >이름에는 특수문자가 포함될 수 없습니다.</span
+        >
+        <span
+          v-show="isFull"
+          class="absolute text-red-1 text-xs font-bold mt-1"
+          >이름은 1글자 이상, 10글자이하만 가능합니다.</span
+        >
+      </div>
     </div>
     <div class="flex flex-col">
       <p class="text-body text-xs font-bold">아이디</p>
@@ -190,7 +192,7 @@ const handlePwChange = () => {
 }
 
 const changePw = () => {
-  router.push('/pw-check')
+  router.replace('/pw-check')
 }
 
 const warningModalToggle = () => {

src/components/top-bar/ProfileModal.vue

@@ -67,7 +67,7 @@ const emit = defineEmits<{
 }>()
 
 const handleEdit = () => {
-  router.push('/edit-information')
+  router.replace('/edit-information')
   emit('close')
 }
 const openLogoutModal = () => {
@@ -76,7 +76,7 @@ const openLogoutModal = () => {
 const closeLogoutModal = () => {
   isModalVisible.value = false
   isLogined.value = false
-  router.push('/login')
+  router.replace('/login')
 }
 
 const handleLogout = async () => {

src/components/top-bar/TopBar.vue

@@ -79,13 +79,13 @@ onMounted(async () => {
 
   const originUrl = route.path.split('/')[1]
   if (info.value.role === 'ROLE_USER') {
-    if (!PERMITTED_URL.ROLE_USER.includes(originUrl)) router.push('/my-request')
+    if (!PERMITTED_URL.ROLE_USER.includes(originUrl)) router.replace('/my-request')
   } else if (info.value.role === 'ROLE_MANAGER') {
-    if (!PERMITTED_URL.ROLE_MANAGER.includes(originUrl)) router.push('/my-task')
+    if (!PERMITTED_URL.ROLE_MANAGER.includes(originUrl)) router.replace('/my-task')
   } else if (info.value.role === 'ROLE_ADMIN') {
-    if (!PERMITTED_URL.ROLE_ADMIN.includes(originUrl)) router.push('/member-management')
+    if (!PERMITTED_URL.ROLE_ADMIN.includes(originUrl)) router.replace('/member-management')
   } else {
-    if (!PERMITTED_URL.UNKNOWN.includes(originUrl)) router.push('/login')
+    if (!PERMITTED_URL.UNKNOWN.includes(originUrl)) router.replace('/login')
   }
 })
 

src/views/LoginView.vue

@@ -15,12 +15,12 @@
     <form
       @submit.prevent="handleLogin"
       class="mb-2">
-      <div class="mb-6">
+      <div class="mb-7">
         <input
           type="text"
-          id="nickname"
-          v-model="nickname"
-          placeholder="닉네임을 입력해주세요"
+          id="id"
+          v-model="id"
+          placeholder="아이디를 입력해주세요"
           required
           class="input-box" />
       </div>
@@ -61,7 +61,7 @@ import { useRouter } from 'vue-router'
 
 const router = useRouter()
 
-const nickname = ref('')
+const id = ref('')
 const password = ref('')
 const memberStore = useMemberStore()
 
@@ -76,7 +76,7 @@ const closeModal = () => {
 
 const handleLogin = async () => {
   try {
-    const name = nickname.value.toString()
+    const name = id.value.toString()
     const res = await postLogin(name, password.value)
     const role = await memberStore.updateMemberInfoWithToken()
 
@@ -85,24 +85,22 @@ const handleLogin = async () => {
     } else if (res && role && Cookies.get('refreshToken')) {
       switch (role) {
         case 'ROLE_ADMIN':
-          router.push('/member-management')
+          router.replace('/member-management')
           break
         case 'ROLE_MANAGER':
-          router.push('my-request')
+          router.replace('my-request')
           break
         case 'ROLE_USER':
-          router.push('/my-request')
+          router.replace('/my-request')
           break
         default:
-          router.push('/')
+          router.replace('/')
       }
     }
   } catch (error) {
     if (axios.isAxiosError(error)) {
       switch (error.response?.status) {
         case 401:
-          isModalVisible.value = !isModalVisible.value
-          console.log(error.response?.data)
           if (error.response?.data == 'AUTH_015') {
             messageHeader.value = '정지된 계정입니다'
             messageBody.value =
@@ -111,6 +109,7 @@ const handleLogin = async () => {
             messageHeader.value = '일치하는 정보가 없습니다'
             messageBody.value = '닉네임과 비밀번호를 다시 확인해주세요'
           }
+          isModalVisible.value = !isModalVisible.value
           break
 
         case 404:

src/views/PwChangeEmail.vue

@@ -4,7 +4,7 @@
       :isOpen="isModalVisible"
       type="successType"
       @close="closeModal">
-      <template #header> 인증 번호가 전송되었습니다 </template>
+      <template #header> 새로운 비밀번호가 전송되었습니다 </template>
       <template #body> 이메일을 확인해주세요 </template>
     </ModalView>
     <ModalView
@@ -22,12 +22,12 @@
     <form
       @submit.prevent="handleCheck"
       class="mb-2">
-      <div class="mb-6">
+      <div class="mb-7">
         <input
           type="email"
           id="email"
           v-model="email"
-          placeholder="이메일 입력해주세요"
+          placeholder="이메일을 입력해주세요"
           required
           class="input-box" />
       </div>
@@ -68,7 +68,7 @@ const email = ref('')
 
 const closeModal = () => {
   isModalVisible.value = !isModalVisible.value
-  router.push('/login')
+  router.replace('/login')
 }
 const closeFailModal = () => {
   isFailModalVisible.value = !isFailModalVisible.value

src/views/PwChangeView.vue

@@ -20,7 +20,7 @@
     <form
       @submit.prevent="handleChange"
       class="mb-2">
-      <div class="mb-6">
+      <div class="mb-7">
         <input
           type="password"
           id="newPw"
@@ -34,7 +34,7 @@
           ]" />
         <p
           v-show="isInvalid"
-          class="text-red-1 text-xs font-bold mt-1">
+          class="absolute text-red-1 text-xs font-bold mt-1">
           대문자, 소문자, 숫자, 특수문자 포함 8자-20자 입력해주세요
         </p>
       </div>
@@ -52,7 +52,7 @@
           ]" />
         <p
           v-show="isDifferent"
-          class="text-red-1 text-xs font-bold mt-1">
+          class="absolute text-red-1 text-xs font-bold mt-1">
           비밀번호가 일치하지 않아요
         </p>
       </div>
@@ -109,14 +109,17 @@ const closeModal = () => {
 }
 
 const handleChange = () => {
+  if (newPw.value != checkPw.value) {
+    isDifferent.value = true
+    checkPwInput.value?.focus()
+  } else if (newPw.value == checkPw.value) {
+    isDifferent.value = false
+  }
   validatePassword()
   if (isInvalid.value == false && newPw.value === checkPw.value) {
     patchPassword(newPw.value)
     pwChange()
     openModal()
-  } else {
-    isDifferent.value = true
-    checkPwInput.value?.focus()
   }
 }
 

src/views/PwCheckView.vue

@@ -64,13 +64,13 @@ const handleCheck = async () => {
       switch (error?.response?.status) {
         case 400:
           isModalVisible.value = !isModalVisible.value
-          messageHeader.value = '비밀번호가 일치 하지 않습니다'
+          messageHeader.value = '비밀번호가 일치하지 않습니다'
           messageBody.value = '다시 확인하여 주세요'
           break
 
         case 401:
           isModalVisible.value = !isModalVisible.value
-          messageHeader.value = '비밀번호가 일치 하지 않습니다'
+          messageHeader.value = '비밀번호가 일치하지 않습니다'
           messageBody.value = '다시 확인하여 주세요'
           break