Merge pull request #106 from study2895:main

[Feat] 비밀번호 입력된 데이터가 없을 때 버튼 비활성화 분기 로직 작성

src/views/login/mypage/MypageScript.js

@@ -106,50 +106,48 @@ export async function verifyCurrentPassword() {
 
 // 비밀번호 변경
 export async function updatePassword() {
-  // 현재 비밀번호 확인 여부
   if (!passwordVerified.value) {
     alert('현재 비밀번호를 먼저 확인해주세요.')
     return
   }
 
-  // 새 비밀번호와 확인 비밀번호 일치 여부 확인
   if (password.value !== confirmPassword.value) {
     alert('새 비밀번호가 일치하지 않습니다.')
     return
   }
 
+  if (!password.value || !confirmPassword.value) {
+    alert('새 비밀번호를 입력해주세요.')
+    return
+  }
+
   try {
-    // API 요청
     const response = await fetch(
       `${process.env.VUE_APP_BE_API_URL}/api/users/password`,
       {
         method: 'PATCH',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          currentPassword: currentPassword.value, // 현재 비밀번호
-          newPassword: password.value // 새 비밀번호
+          currentPassword: currentPassword.value,
+          newPassword: password.value
         }),
-        credentials: 'include' // 세션 포함
+        credentials: 'include'
       }
     )
 
-    // 응답 처리
     if (response.ok) {
-      const message = await response.json() // 성공 메시지
-      alert(message) // "비밀번호가 성공적으로 변경되었습니다."
+      alert('비밀번호가 성공적으로 변경되었습니다.')
       password.value = ''
       confirmPassword.value = ''
       currentPassword.value = ''
-      passwordVerified.value = false // 비밀번호 확인 상태 초기화
+      passwordVerified.value = false
     } else if (response.status === 400) {
       alert('현재 비밀번호가 일치하지 않습니다.')
     } else {
       console.error('비밀번호 수정 실패:', response.status, response.statusText)
     }
   } catch (error) {
     console.error('비밀번호 수정 오류:', error)
-  } finally {
-    alert('비밀번호가 변경되었습니다.')
   }
 }
 

src/views/login/mypage/MypageView.vue

@@ -103,7 +103,12 @@
                   placeholder="새 비밀번호를 다시 입력하세요"
                   class="form-input"
                 />
-                <button @click="updatePassword" class="update-button">
+                <!-- 비밀번호 수정 버튼에 :disabled 속성 추가 -->
+                <button
+                  @click="updatePassword"
+                  class="update-button"
+                  :disabled="!password || !confirmPassword"
+                >
                   수정하기
                 </button>
               </div>

src/views/mainpage/MainpageView.vue

@@ -111,15 +111,13 @@ import commentIcon from '@/assets/Icons/akoming/todo/comment.svg'
 import akofolioIcon from '@/assets/Icons/akoming/todo/akofolio.svg'
 import SkeletonMainPage from './SkeletonMainPage.vue'
 
-// Tasks for the to-do list
 const tasks = ref([
   { name: '아코밍 출석', completed: false },
   { name: '아코자국', completed: false },
   { name: '댓글 남기기', completed: false },
   { name: '아코폴리오', completed: false }
 ])
 
-// 스탬프 상태 정의
 const stamps = ref([
   {
     label: 'A',
@@ -193,7 +191,6 @@ const fetchQuestStatus = async () => {
   }
 }
 
-// Functions to get icons based on task name and completion status
 const getCompletedStampIcon = (label) => {
   return require(`@/assets/Icons/akoming/stamp/color/color${label.toLowerCase()}.svg`)
 }
@@ -217,7 +214,6 @@ const getTaskIcon = (taskName) => {
   }
 }
 
-// onMounted에서 호출하여 초기 데이터 로드
 onMounted(() => {
   fetchQuestStatus()
 })
@@ -230,11 +226,11 @@ onMounted(() => {
   font-family: 'NanumSquareRound', sans-serif;
   display: flex;
   justify-content: center;
-  overflow-x: hidden; /* 좌우 스크롤 제거 */
+  overflow-x: hidden;
 }
 
 .mobile-container {
-  width: 100%; /* 화면 크기에 맞게 조정 */
+  width: 100%;
   max-width: 395px;
   min-width: 340px;
   background-color: #fae8da;