From 510eb0f4f83a427a2c67d020e031a8a67a9f6678 Mon Sep 17 00:00:00 2001
From: ByungCheol <kenneth73510@nurier.co.kr>
Date: Sun, 31 May 2026 18:46:57 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20UI=20(=ED=97=A4=EB=8D=94=20=EC=9E=A0?=
 =?UTF-8?q?=EA=B8=88=20=EC=95=84=EC=9D=B4=EC=BD=98=20+=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/App.vue                            |   2 +
 src/api/authApi.js                     |   3 +
 src/components/ChangePasswordModal.vue | 174 +++++++++++++++++++++++++
 src/components/layout/AppHeader.vue    |   1 +
 src/components/ui/IconBtn.vue          |   1 +
 src/stores/ui.js                       |  10 ++
 6 files changed, 191 insertions(+)
 create mode 100644 src/components/ChangePasswordModal.vue

diff --git a/src/App.vue b/src/App.vue
index f93bcb8..533575f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,6 +6,7 @@ import AppSidebar from '@/components/layout/AppSidebar.vue'
 import AppFooter from '@/components/layout/AppFooter.vue'
 import LoginModal from '@/components/LoginModal.vue'
 import SignupModal from '@/components/SignupModal.vue'
+import ChangePasswordModal from '@/components/ChangePasswordModal.vue'
 import { useAuthStore } from '@/stores/auth'
 import { useUiStore } from '@/stores/ui'
 
@@ -38,6 +39,7 @@ watch(() => route.fullPath, () => ui.closeSidebar())
 
   <LoginModal />
   <SignupModal />
+  <ChangePasswordModal />
 </template>
 
 <style scoped>
diff --git a/src/api/authApi.js b/src/api/authApi.js
index c150de8..0ce4071 100644
--- a/src/api/authApi.js
+++ b/src/api/authApi.js
@@ -14,4 +14,7 @@ export const authApi = {
   me() {
     return http.get('/auth/me')
   },
+  changePassword(payload) {
+    return http.put('/auth/password', payload)
+  },
 }
diff --git a/src/components/ChangePasswordModal.vue b/src/components/ChangePasswordModal.vue
new file mode 100644
index 0000000..a3a3cda
--- /dev/null
+++ b/src/components/ChangePasswordModal.vue
@@ -0,0 +1,174 @@
+<script setup>
+import { reactive, ref, watch, onMounted, onUnmounted } from 'vue'
+import { useUiStore } from '@/stores/ui'
+import { authApi } from '@/api/authApi'
+
+const ui = useUiStore()
+
+const form = reactive({ currentPassword: '', newPassword: '', confirmPassword: '' })
+const loading = ref(false)
+const error = ref(null)
+
+watch(
+  () => ui.passwordOpen,
+  (open) => {
+    if (open) {
+      form.currentPassword = ''
+      form.newPassword = ''
+      form.confirmPassword = ''
+      error.value = null
+    }
+  },
+)
+
+async function handleSubmit() {
+  error.value = null
+  if (!form.currentPassword || !form.newPassword) {
+    error.value = '현재 비밀번호와 새 비밀번호를 입력하세요.'
+    return
+  }
+  if (form.newPassword.length < 8 || form.newPassword.length > 64) {
+    error.value = '새 비밀번호는 8~64자여야 합니다.'
+    return
+  }
+  if (form.newPassword !== form.confirmPassword) {
+    error.value = '새 비밀번호 확인이 일치하지 않습니다.'
+    return
+  }
+  if (form.newPassword === form.currentPassword) {
+    error.value = '새 비밀번호가 현재 비밀번호와 동일합니다.'
+    return
+  }
+  loading.value = true
+  try {
+    await authApi.changePassword({
+      currentPassword: form.currentPassword,
+      newPassword: form.newPassword,
+    })
+    ui.closePassword()
+    alert('비밀번호가 변경되었습니다.')
+  } catch (e) {
+    error.value = e.response?.data?.message || '비밀번호 변경에 실패했습니다.'
+  } finally {
+    loading.value = false
+  }
+}
+
+function onKeydown(e) {
+  if (e.key === 'Escape' && ui.passwordOpen) ui.closePassword()
+}
+onMounted(() => window.addEventListener('keydown', onKeydown))
+onUnmounted(() => window.removeEventListener('keydown', onKeydown))
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div v-if="ui.passwordOpen" class="modal-backdrop" @click.self="ui.closePassword()">
+        <div class="modal" role="dialog" aria-modal="true" aria-label="비밀번호 변경">
+          <button class="close" type="button" aria-label="닫기" @click="ui.closePassword()">×</button>
+          <h2>비밀번호 변경</h2>
+
+          <form class="form" @submit.prevent="handleSubmit">
+            <input
+              v-model="form.currentPassword" type="password" placeholder="현재 비밀번호"
+              autocomplete="current-password" :disabled="loading"
+            />
+            <input
+              v-model="form.newPassword" type="password" placeholder="새 비밀번호 (8~64자)"
+              autocomplete="new-password" :disabled="loading"
+            />
+            <input
+              v-model="form.confirmPassword" type="password" placeholder="새 비밀번호 확인"
+              autocomplete="new-password" :disabled="loading"
+            />
+            <button class="submit" type="submit" :disabled="loading">
+              {{ loading ? '변경 중...' : '변경' }}
+            </button>
+          </form>
+
+          <p v-if="error" class="msg error">{{ error }}</p>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  padding: 1rem;
+}
+.modal {
+  position: relative;
+  width: 100%;
+  max-width: 360px;
+  padding: 1.75rem 1.5rem 1.5rem;
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+}
+.close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.6rem;
+  width: 2rem;
+  height: 2rem;
+  border: 0;
+  background: transparent;
+  color: var(--color-text);
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+}
+h2 {
+  margin-bottom: 1.25rem;
+  font-size: 1.3rem;
+  text-align: center;
+}
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.form input {
+  padding: 0.6rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: var(--color-background-soft);
+  color: var(--color-text);
+}
+.submit {
+  padding: 0.6rem 1rem;
+  border: 1px solid hsla(160, 100%, 37%, 1);
+  border-radius: 4px;
+  background: var(--color-background-soft);
+  color: hsla(160, 100%, 37%, 1);
+  cursor: pointer;
+}
+.submit:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.msg {
+  margin: 0.75rem 0 0;
+}
+.msg.error {
+  color: #c0392b;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.18s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/components/layout/AppHeader.vue b/src/components/layout/AppHeader.vue
index 4b98762..2d566dc 100644
--- a/src/components/layout/AppHeader.vue
+++ b/src/components/layout/AppHeader.vue
@@ -38,6 +38,7 @@ async function handleLogout() {
     <div class="header-right">
       <template v-if="auth.isAuthenticated">
         <span class="username">{{ auth.user?.name || auth.user?.loginId }}님</span>
+        <IconBtn icon="lock" title="비밀번호 변경" @click="ui.openPassword()" />
         <IconBtn icon="logout" title="로그아웃" @click="handleLogout" />
       </template>
       <IconBtn v-else icon="login" title="로그인" variant="primary" @click="ui.openLogin()" />
diff --git a/src/components/ui/IconBtn.vue b/src/components/ui/IconBtn.vue
index a0cfe55..8c9fdde 100644
--- a/src/components/ui/IconBtn.vue
+++ b/src/components/ui/IconBtn.vue
@@ -33,6 +33,7 @@ const ICONS = {
   cart: ['M9 22a1 1 0 1 0 0-2 1 1 0 0 0 0 2z', 'M20 22a1 1 0 1 0 0-2 1 1 0 0 0 0 2z', 'M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'],
   send: ['M22 2L11 13', 'M22 2l-7 20-4-9-9-4 20-7z'],
   save: ['M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z', 'M17 21v-8H7v8', 'M7 3v5h8'],
+  lock: ['M5 11h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2z', 'M8 11V7a4 4 0 0 1 8 0v4'],
 }
 
 const paths = computed(() => ICONS[props.icon] || ICONS.plus)
diff --git a/src/stores/ui.js b/src/stores/ui.js
index 50b747a..f78aa18 100644
--- a/src/stores/ui.js
+++ b/src/stores/ui.js
@@ -16,6 +16,15 @@ export const useUiStore = defineStore('ui', () => {
     sidebarOpen.value = false
   }
 
+  // 비밀번호 변경 모달
+  const passwordOpen = ref(false)
+  function openPassword() {
+    passwordOpen.value = true
+  }
+  function closePassword() {
+    passwordOpen.value = false
+  }
+
   // 로그인 팝업 (회원가입 팝업은 닫고 전환)
   function openLogin(redirect = '') {
     redirectPath.value = redirect || ''
@@ -39,5 +48,6 @@ export const useUiStore = defineStore('ui', () => {
   return {
     loginOpen, signupOpen, redirectPath, openLogin, closeLogin, openSignup, closeSignup,
     sidebarOpen, toggleSidebar, closeSidebar,
+    passwordOpen, openPassword, closePassword,
   }
 })