기능검증 중

frontend/auth/set-password.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="set-password-container">
+    <div class="set-password-card">
+      <div class="text-center mb-4">
+        <i class="bi bi-shield-lock display-1 text-primary"></i>
+        <h3 class="mt-3">비밀번호 설정</h3>
+        <p class="text-muted">
+          비상시 로그인을 위해 비밀번호를 설정해주세요.
+        </p>
+      </div>
+
+      <div class="alert alert-info">
+        <i class="bi bi-info-circle me-2"></i>
+        Google 계정으로 로그인되었습니다.<br>
+        비밀번호를 설정하면 이메일/비밀번호로도 로그인할 수 있습니다.
+      </div>
+
+      <form @submit.prevent="handleSetPassword">
+        <div class="mb-3">
+          <label class="form-label">새 비밀번호</label>
+          <input 
+            type="password" 
+            class="form-control" 
+            v-model="newPassword" 
+            placeholder="8자 이상 입력" 
+            required 
+            minlength="8"
+          />
+          <small class="text-muted">8자 이상, 영문+숫자 조합 권장</small>
+        </div>
+
+        <div class="mb-4">
+          <label class="form-label">비밀번호 확인</label>
+          <input 
+            type="password" 
+            class="form-control" 
+            v-model="confirmPassword" 
+            placeholder="비밀번호 다시 입력" 
+            required
+          />
+          <small v-if="confirmPassword && newPassword !== confirmPassword" class="text-danger">
+            비밀번호가 일치하지 않습니다.
+          </small>
+        </div>
+
+        <button 
+          type="submit" 
+          class="btn btn-primary w-100 mb-3" 
+          :disabled="isSubmitting || !canSubmit"
+        >
+          <span v-if="isSubmitting">
+            <span class="spinner-border spinner-border-sm me-2"></span>설정 중...
+          </span>
+          <span v-else>
+            <i class="bi bi-check-lg me-2"></i>비밀번호 설정
+          </span>
+        </button>
+
+        <div class="text-center">
+          <a href="/" class="text-muted small">나중에 설정하기 →</a>
+        </div>
+      </form>
+
+      <div class="alert alert-danger mt-3" v-if="errorMessage">
+        <i class="bi bi-exclamation-triangle me-2"></i>{{ errorMessage }}
+      </div>
+
+      <div class="alert alert-success mt-3" v-if="successMessage">
+        <i class="bi bi-check-circle me-2"></i>{{ successMessage }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: false })
+
+const router = useRouter()
+
+const newPassword = ref('')
+const confirmPassword = ref('')
+const isSubmitting = ref(false)
+const errorMessage = ref('')
+const successMessage = ref('')
+
+const canSubmit = computed(() => {
+  return newPassword.value.length >= 8 && newPassword.value === confirmPassword.value
+})
+
+async function handleSetPassword() {
+  if (!canSubmit.value) return
+  
+  isSubmitting.value = true
+  errorMessage.value = ''
+  successMessage.value = ''
+  
+  try {
+    await $fetch('/api/auth/set-password', {
+      method: 'POST',
+      body: { password: newPassword.value }
+    })
+    
+    successMessage.value = '비밀번호가 설정되었습니다. 메인 페이지로 이동합니다.'
+    
+    setTimeout(() => {
+      router.push('/')
+    }, 1500)
+  } catch (e: any) {
+    errorMessage.value = e.data?.message || e.message || '비밀번호 설정에 실패했습니다.'
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+
+<style scoped>
+.set-password-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 2rem;
+}
+.set-password-card {
+  background: white;
+  border-radius: 1rem;
+  padding: 2rem;
+  width: 100%;
+  max-width: 450px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+}
+</style>