CLAP-307 비밀번호 재설정 관련 API 설정

src/api/auth.ts

@@ -3,6 +3,20 @@ import Cookies from 'js-cookie'
 import type { loginDataTypes } from '@/types/auth'
 import { useMemberStore } from '@/stores/member'
 
+export const postPasswordEmailSend = async (name: string, email: string) => {
+  const request = {
+    name: name,
+    email: email
+  }
+  const response = await axiosInstance.post('/api/new-password', request)
+  return response.data
+}
+
+export const postPasswordCheck = async (password: string) => {
+  const response = await axiosInstance.post('/api/members/password', { password: password })
+  return response.data
+}
+
 export const postLogin = async (loginData: loginDataTypes) => {
   const response = await axiosInstance.post('/api/auths/login', loginData)
   Cookies.set('accessToken', response.data.accessToken, {
@@ -17,7 +31,8 @@ export const postLogin = async (loginData: loginDataTypes) => {
 }
 
 export const patchPassword = async (password: string) => {
-  const response = await axiosInstance.patch('/api/members/password', password)
+  const request = { password: password }
+  const response = await axiosInstance.patch('/api/members/password', request)
   return response.data
 }
 

src/components/EditInformation.vue

@@ -7,6 +7,15 @@
       <template #header> 정보가 수정되었습니다 </template>
     </ModalView>
 
+    <ModalView
+      :isOpen="isWarnningModalVisible"
+      :type="'warningType'"
+      @click="changePw"
+      @close="warningModalToggle">
+      <template #header> 정보가 저장되지 않았습니다 </template>
+      <template #body> 수정 사항을 삭제하고 이동하시겠습니까? </template>
+    </ModalView>
+
     <div class="profile">
       <p class="text-body text-xs font-bold">프로필 사진</p>
       <img
@@ -33,7 +42,7 @@
       <input
         class="input-box h-11 mt-2 text-black"
         placeholder="이름을 입력해주세요"
-        v-model="info.name" />
+        v-model="name" />
     </div>
     <div class="flex flex-col">
       <p class="text-body text-xs font-bold">아이디</p>
@@ -55,17 +64,17 @@
       <p class="text-body text-xs font-bold">알림 수신 여부</p>
       <div class="flex flex-col mt-2 gap-2">
         <FormCheckbox
-          v-model="info.notificationSettingInfo.agit"
+          v-model="agitCheck"
           :checkButtonName="'아지트'"
-          :isChecked="info.notificationSettingInfo.agit" />
+          :isChecked="agitCheck" />
         <FormCheckbox
-          v-model="info.notificationSettingInfo.kakaoWork"
+          v-model="kakaoWorkCheck"
           :checkButtonName="'카카오워크'"
-          :isChecked="info.notificationSettingInfo.kakaoWork" />
+          :isChecked="kakaoWorkCheck" />
         <FormCheckbox
-          v-model="info.notificationSettingInfo.email"
+          v-model="emailCheck"
           :checkButtonName="'이메일'"
-          :isChecked="info.notificationSettingInfo.email" />
+          :isChecked="emailCheck" />
       </div>
     </div>
     <div>
@@ -86,7 +95,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, watchEffect } from 'vue'
 import { useRouter } from 'vue-router'
 import ModalView from './ModalView.vue'
 import FormButtonContainer from './common/FormButtonContainer.vue'
@@ -99,37 +108,68 @@ import { patchEditInfo } from '@/api/common'
 const memberStore = useMemberStore()
 const { info } = storeToRefs(memberStore)
 
+const name = ref(info.value.name)
+const agitCheck = ref(info.value.notificationSettingInfo.agit)
+const emailCheck = ref(info.value.notificationSettingInfo.email)
+const kakaoWorkCheck = ref(info.value.notificationSettingInfo.kakaoWork)
+
 const selectedFile = ref<File | null>(null)
 const previewUrl = ref<string | null>(null)
 
 const isModalVisible = ref(false)
+const isWarnningModalVisible = ref(false)
+
+watchEffect(() => {
+  if (info.value) {
+    name.value = info.value.name
+    agitCheck.value = info.value.notificationSettingInfo.agit
+    emailCheck.value = info.value.notificationSettingInfo.email
+    kakaoWorkCheck.value = info.value.notificationSettingInfo.kakaoWork
+  }
+})
 
 const handleCancel = () => {
   router.back()
 }
 
 const handlePwChange = () => {
+  if (
+    selectedFile.value ||
+    info.value.name != name.value ||
+    info.value.notificationSettingInfo.agit != agitCheck.value ||
+    info.value.notificationSettingInfo.kakaoWork != kakaoWorkCheck.value ||
+    info.value.notificationSettingInfo.email != emailCheck.value
+  ) {
+    warningModalToggle()
+  } else {
+    changePw()
+  }
+}
+
+const changePw = () => {
   router.push('/pw-check')
 }
 
+const warningModalToggle = () => {
+  isWarnningModalVisible.value = !isWarnningModalVisible.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 handleSubmit = async () => {
   const formData = new FormData()
   const memberInfo = {
-    name: info.value.name,
-    agitNotification: info.value.notificationSettingInfo.agit,
-    emailNotification: info.value.notificationSettingInfo.email,
-    kakaoWorkNotification: info.value.notificationSettingInfo.kakaoWork
+    name: name.value,
+    agitNotification: agitCheck.value,
+    emailNotification: emailCheck.value,
+    kakaoWorkNotification: kakaoWorkCheck.value
   }
-
   const jsonMemberInfo = JSON.stringify(memberInfo)
   const newBlob = new Blob([jsonMemberInfo], { type: 'application/json' })
 

src/router/index.ts

@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import Cookies from 'js-cookie'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -135,10 +136,13 @@ const router = createRouter({
 
 router.beforeEach((to, from, next) => {
   if (to.path === '/pw-change') {
-    if (from.path === '/pw-check' || from.path === '/pw-change-email') {
+    if (
+      from.path === '/pw-check' ||
+      from.path === '/pw-change-email' ||
+      (from.path === '/login' && Cookies.get('accessToken'))
+    ) {
       next()
     } else {
-      alert('비밀번호를 먼저 확인해주세요.')
       next('/login')
       return
     }

src/stores/member.ts

@@ -23,8 +23,7 @@ export const useMemberStore = defineStore('memberInfo', () => {
   }
 
   const info = ref<User>(INITIAL_INFO)
-  const refreshToken = ref(Cookies.get('refreshToken') || '')
-  const isLogined = ref(!!refreshToken.value)
+  const isLogined = ref(!!Cookies.get('refreshToken'))
   const router = useRouter()
 
   async function updateMemberInfoWithToken() {
@@ -35,7 +34,7 @@ export const useMemberStore = defineStore('memberInfo', () => {
     try {
       const { data }: { data: User } = await axiosInstance.get('/api/members/info')
       info.value = data
-      isLogined.value = true
+      isLogined.value = Cookies.get('refreshToken') ? true : false
       return data.role
     } catch {
       router.push('/login')

src/views/LoginView.vue

@@ -48,6 +48,7 @@ import { useRouter } from 'vue-router'
 import { postLogin } from '@/api/auth'
 import { useMemberStore } from '@/stores/member'
 import TitleContainer from '@/components/common/TitleContainer.vue'
+import Cookies from 'js-cookie'
 
 const router = useRouter()
 
@@ -64,7 +65,9 @@ const handleLogin = async () => {
     const res = await postLogin(loginData)
     const role = await memberStore.updateMemberInfoWithToken()
 
-    if (res && role) {
+    if (!Cookies.get('refreshToken')) {
+      router.push('/pw-change')
+    } else if (res && role && Cookies.get('refreshToken')) {
       switch (role) {
         case 'ROLE_ADMIN':
           router.push('/member-management')
@@ -80,7 +83,6 @@ const handleLogin = async () => {
       }
     }
   } catch (error) {
-    // 로그인 실패 시 에러 처리
     console.error('로그인 실패:', error)
   }
 }

src/views/PwChange.vue

@@ -9,6 +9,11 @@
     </ModalView>
     <div class="py-16">
       <TitleContainer
+        v-if="!isFirst"
+        :title="'비밀번호\n재설정'"
+        content="새로운 비밀번호를 입력해주세요" />
+      <TitleContainer
+        v-if="isFirst"
         :title="'비밀번호\n재설정'"
         content="초기 비밀번호를 변경해주세요" />
     </div>
@@ -47,9 +52,15 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import ModalView from '../components/ModalView.vue'
-import { patchPassword } from '@/api/auth'
+import { deleteLogout, patchPassword } from '@/api/auth'
 import TitleContainer from '@/components/common/TitleContainer.vue'
+import Cookies from 'js-cookie'
+import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
+const memberStore = useMemberStore()
+const { isLogined } = storeToRefs(memberStore)
 
+const isFirst = Cookies.get('accessToken') ? (Cookies.get('refreshToken') ? false : true) : false
 const newPw = ref('')
 const checkPw = ref('')
 const isModalOpen = ref(false)
@@ -61,16 +72,15 @@ const toggleModal = () => {
 
 const handleChange = () => {
   if (newPw.value === checkPw.value) {
-    const response = patchPassword(newPw.value)
-    console.log(response)
-    console.log('비밀번호 변경 성공!')
+    patchPassword(newPw.value)
     toggleModal()
   } else {
-    alert('비밀번호가 일치하지 않습니다.')
   }
 }
 
 const pwChange = () => {
+  isLogined.value = false
+  deleteLogout()
   router.push('/login')
 }
 </script>

src/views/PwChangeEmail.vue

@@ -3,51 +3,33 @@
     <ModalView
       :isOpen="isModalOpen"
       type="successType"
-      @close="toggleModal">
+      @close="closeModal">
       <template #header> 인증 번호가 전송되었습니다 </template>
       <template #body> 이메일을 확인해주세요 </template>
     </ModalView>
     <div class="py-16">
       <TitleContainer
         :title="'비밀번호\n재설정'"
-        content="가입된 아이디와 이메일을 입력해주세요" />
+        content="가입된 이메일과 이름을 입력해주세요" />
     </div>
     <form
       @submit.prevent="handleCheck"
       class="mb-2">
       <div class="mb-6">
-        <input
-          type="text"
-          id="id"
-          v-model="id"
-          placeholder="아이디를 입력해주세요"
-          required
-          class="input-box" />
-      </div>
-      <div class="relative mb-6">
-        <div class="absolute flex items-center right-4 h-full">
-          <button
-            type="button"
-            @click="handleRequestEmail"
-            class="bg-white text-xs py-2 px-4 border-[1px] border-primary1 rounded text-primary1">
-            {{ requestEmail ? '재요청' : '인증 요청' }}
-          </button>
-        </div>
         <input
           type="email"
           id="email"
           v-model="email"
-          placeholder="이메일을 입력해주세요"
+          placeholder="이메일 입력해주세요"
           required
           class="input-box" />
       </div>
-      <div class="mb-8">
+      <div class="relative mb-8">
         <input
           type="text"
-          :disabled="!requestEmail"
-          id="checkCode"
-          v-model="checkCode"
-          placeholder="인증코드를 입력해주세요"
+          id="name"
+          v-model="name"
+          placeholder="이름을 입력해주세요"
           required
           class="input-box" />
       </div>
@@ -66,25 +48,19 @@ import { ref } from 'vue'
 import router from '../router/index'
 import ModalView from '../components/ModalView.vue'
 import TitleContainer from '@/components/common/TitleContainer.vue'
+import { postPasswordEmailSend } from '@/api/auth'
 
-const id = ref('')
+const name = ref('')
 const email = ref('')
-const checkCode = ref('')
-const requestEmail = ref(false)
 const isModalOpen = ref(false)
 
-const toggleModal = () => {
+const closeModal = () => {
   isModalOpen.value = !isModalOpen.value
-}
-
-const handleRequestEmail = () => {
-  toggleModal()
-  requestEmail.value = true
-  // 이메일 인증 코드 전송 API 추가 필요
+  router.push('/login')
 }
 
 const handleCheck = () => {
-  // 이메일 인증 코드 확인 API 추가 필요
-  router.push('/pw-change')
+  postPasswordEmailSend(name.value, email.value)
+  isModalOpen.value = !isModalOpen.value
 }
 </script>

src/views/PwCheck.vue

@@ -3,7 +3,7 @@
     <div class="py-16">
       <TitleContainer
         :title="'비밀번호\n재설정'"
-        content="비밀번호 재설정을 위해\n현재 비밀번호를 입력해주세요" />
+        :content="'비밀번호 재설정을 위해\n 현재 비밀번호를 입력해주세요'" />
     </div>
     <form
       @submit.prevent="handleCheck"
@@ -33,11 +33,12 @@
 import { ref } from 'vue'
 import router from '../router/index'
 import TitleContainer from '@/components/common/TitleContainer.vue'
+import { postPasswordCheck } from '@/api/auth'
 
 const pw = ref('')
 
 const handleCheck = () => {
-  // 기존 비밀번호 확인 API 추가 필요
+  postPasswordCheck(pw.value)
   router.push('/pw-change')
 }
 </script>