Merge pull request #161 from TaskFlow-CLAP/CLAP-376

CLAP-376 수정 요구 Chloe

Author: Minkyu0424

src/components/common/EditInformation.vue

@@ -16,6 +16,15 @@
       <template #body>수정 사항을 삭제하고 이동하시겠습니까?</template>
     </ModalView>
 
+    <ModalView
+      :isOpen="isFailModalVisible"
+      :type="'failType'"
+      @click="failModalToggle"
+      @close="failModalToggle">
+      <template #header>{{ failHeader }}</template>
+      <template #body>{{ failBody }}</template>
+    </ModalView>
+
     <div class="profile">
       <p class="text-body text-xs font-bold">프로필 사진</p>
       <ImageContainer
@@ -61,14 +70,9 @@
         @blur="validateName" />
       <div class="mb-1">
         <span
-          v-show="isInvalid"
-          class="absolute text-red-1 text-xs font-bold mt-1"
-          >이름에는 특수문자가 포함될 수 없습니다.</span
-        >
-        <span
-          v-show="isFull"
+          v-show="isInvalid || isFull"
           class="absolute text-red-1 text-xs font-bold mt-1"
-          >이름은 1글자 이상, 10글자이하만 가능합니다.</span
+          >{{ nameError }}</span
         >
       </div>
     </div>
@@ -150,6 +154,12 @@ const nameInput = ref<HTMLInputElement | null>(null)
 
 const isModalVisible = ref(false)
 const isWarnningModalVisible = ref(false)
+const isFailModalVisible = ref(false)
+
+const failHeader = ref('')
+const failBody = ref('')
+
+const nameError = ref('')
 
 watchEffect(() => {
   if (info.value) {
@@ -160,10 +170,14 @@ watchEffect(() => {
 })
 
 const validateName = () => {
-  const regex = /[!@#$%^&*(),.?":{}|<>]/g
+  const regex = /[!@#$%^&*(),.?":{}|<>\p{Emoji}]/gu
   isInvalid.value = regex.test(name.value)
+  if (isInvalid.value == true) {
+    nameError.value = '이름에는 특수문자가 포함될 수 없습니다.'
+  }
   if (name.value.length > 10 || name.value.length < 1) {
     isFull.value = true
+    nameError.value = '이름은 1글자 이상, 10글자이하만 가능합니다.'
   } else {
     isFull.value = false
   }
@@ -199,13 +213,53 @@ const warningModalToggle = () => {
   isWarnningModalVisible.value = !isWarnningModalVisible.value
 }
 
+const failModalToggle = () => {
+  isFailModalVisible.value = !isFailModalVisible.value
+}
+
 const handleFileUpload = (event: Event) => {
   const target = event.target as HTMLInputElement
   if (target.files && target.files[0]) {
-    selectedFile.value = target.files[0]
-    previewUrl.value = URL.createObjectURL(selectedFile.value)
+    const file = target.files[0]
+
+    const allowedMimeTypes = [
+      'image/jpeg',
+      'image/pjpeg',
+      'image/png',
+      'image/gif',
+      'image/bmp',
+      'image/x-windows-bmp'
+    ]
+    const allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
+
+    const fileName = file.name.toLowerCase()
+    const fileExtension = fileName.split('.').pop()
+
+    if (!fileExtension || !allowedExtensions.includes(fileExtension)) {
+      failHeader.value = '지원하지 않는 파일입니다'
+      failBody.value = 'jpg, jpeg, png, gif, bmp 파일만 업로드 가능합니다'
+      failModalToggle()
+      return
+    }
+    if (!allowedMimeTypes.includes(file.type)) {
+      failHeader.value = '파일 타입을 확인해주세요'
+      failBody.value = '파일 타입과 확장자명이 일치해야합니다'
+      failModalToggle()
+      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()
+      return
+    }
+
+    selectedFile.value = file
+    previewUrl.value = URL.createObjectURL(file)
+    imageDelete.value = false
   }
-  imageDelete.value = false
 }
 
 const handleFileDelete = () => {

src/components/top-bar/NotificationModal.vue

@@ -39,6 +39,11 @@
             알림을 전부 확인했습니다
           </span>
         </template>
+        <template v-slot:error>
+          <span class="flex py-4 items-center justify-center text-xs text-primary1">
+            데이터를 불러오는 중 오류가 발생했습니다. 다시 시도해 주세요.
+          </span>
+        </template>
       </InfiniteLoading>
     </div>
   </div>
@@ -76,7 +81,6 @@ interface InfiniteLoadingState {
 const loadMoreNotifications = async ($state: InfiniteLoadingState) => {
   try {
     const response = await getNotification(page.value, pageSize)
-
     if (response.isFirst) {
       notifications.value = response.content
     } else {

src/components/top-bar/ProfileModal.vue

@@ -76,7 +76,7 @@ const openLogoutModal = () => {
 const closeLogoutModal = () => {
   isModalVisible.value = false
   isLogined.value = false
-  router.replace('/login')
+  router.push('/login')
 }
 
 const handleLogout = async () => {

src/components/top-bar/TopBar.vue

@@ -85,7 +85,7 @@ onMounted(async () => {
   } else if (info.value.role === 'ROLE_ADMIN') {
     if (!PERMITTED_URL.ROLE_ADMIN.includes(originUrl)) router.replace('/member-management')
   } else {
-    if (!PERMITTED_URL.UNKNOWN.includes(originUrl)) router.replace('/login')
+    if (!PERMITTED_URL.UNKNOWN.includes(originUrl)) router.push('/login')
   }
 })
 

src/views/PwChangeEmail.vue

@@ -68,7 +68,7 @@ const email = ref('')
 
 const closeModal = () => {
   isModalVisible.value = !isModalVisible.value
-  router.replace('/login')
+  router.push('/login')
 }
 const closeFailModal = () => {
   isFailModalVisible.value = !isFailModalVisible.value