Feat: Add password find page

src/api/member.js

@@ -22,4 +22,8 @@ function registMember(member) {
   localAxios.post('/member/join', JSON.stringify(member));
 }
 
-export { userConfirm, findByToken, tokenRegeneration, logout, registMember };
+function resetPassword(email) {
+  return localAxios.put(`/member/findPw/${email}`);
+}
+
+export { userConfirm, findByToken, tokenRegeneration, logout, registMember, resetPassword };

src/components/users/UserLogin.vue

@@ -39,7 +39,7 @@ async function handleSubmit() {
     <div class="form-group">
       <label for="password">비밀번호</label>
       <input v-model="password" type="password" id="password" name="password" required />
-      <RouterLink class="forgot" :to="{ name: 'home' }">
+      <RouterLink class="forgot" :to="{ name: 'user-reset' }">
         <TextButton> 비밀번호를 잊으셨나요? </TextButton>
       </RouterLink>
     </div>

src/components/users/UserResetPassword.vue

@@ -0,0 +1,104 @@
+<script setup>
+import { ref } from 'vue';
+import { resetPassword } from '@/api/member';
+import TextButton from '../common/TextButton.vue';
+import FilledButton from '../common/FilledButton.vue';
+
+const email = ref('');
+const resetDone = ref(false);
+
+function handleSubmit() {
+  resetPassword(email.value);
+  resetDone.value = true;
+}
+</script>
+
+<template>
+  <form v-if="!resetDone" class="wrapper" @submit.prevent="handleSubmit" action="POST">
+    <h2>비밀번호 찾기</h2>
+    <div class="form-group">
+      <label for="email">이메일</label>
+      <input v-model="email" type="email" id="email" required />
+    </div>
+    <div class="form-handler">
+      <FilledButton primary class="button" type="submit">비밀번호 찾기</FilledButton>
+      <p>
+        <RouterLink :to="{ name: 'user-login' }">
+          <TextButton>로그인 화면으로 돌아가기</TextButton>
+        </RouterLink>
+      </p>
+    </div>
+  </form>
+  <div v-else class="wrapper">
+    <h2>비밀번호 찾기</h2>
+    <p class="message">비밀번호 재설정 메일을 발송했어요. 메일을 확인해주세요.</p>
+    <RouterLink class="button" :to="{ name: 'user-login' }">
+      <FilledButton primary class="button">로그인</FilledButton>
+    </RouterLink>
+  </div>
+</template>
+
+<style scoped>
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  justify-content: center;
+  align-items: center;
+  margin-top: 40px;
+  width: 100%;
+}
+
+.form-group,
+.form-handler {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 4px;
+  width: 100%;
+}
+
+.form-handler {
+  gap: 12px;
+  margin-top: 20px;
+}
+
+label {
+  font-size: 16px;
+  font-weight: bold;
+  color: var(--color-text-secondary);
+  transition: color 0.25s;
+}
+
+input {
+  border-width: 1px;
+  box-shadow: var(--shadow);
+  transition:
+    border-color 0.25s,
+    outline-color 0.25s;
+}
+
+.forgot {
+  align-self: flex-start;
+}
+
+.form-input {
+  width: 100%;
+}
+
+.button {
+  width: 100%;
+  height: 48px;
+  font-size: 16px;
+}
+
+p {
+  font-size: 14px;
+  text-align: center;
+}
+
+.message {
+  font-size: 16px;
+  margin: 40px 0;
+}
+</style>

src/router/index.js

@@ -46,6 +46,11 @@ const router = createRouter({
           beforeEnter: onlyAuthUser,
           component: () => import('@/components/users/UserMyPage.vue'),
         },
+        {
+          path: 'reset',
+          name: 'user-reset',
+          component: () => import('@/components/users/UserResetPassword.vue'),
+        },
         // {
         //   path: "modify/:userid",
         //   name: "user-modify",