index.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <template>
  2. <div class="admin--login">
  3. <div class="login--container">
  4. <div class="login--box">
  5. <div class="login--logo">
  6. <h1>AUDI</h1>
  7. <p class="subtitle">Admin Panel</p>
  8. </div>
  9. <form @submit.prevent="handleLogin" class="login--form">
  10. <div class="form--group">
  11. <input
  12. v-model="email"
  13. type="email"
  14. placeholder="이메일"
  15. class="form--input"
  16. required
  17. >
  18. </div>
  19. <div class="form--group">
  20. <input
  21. v-model="password"
  22. type="password"
  23. placeholder="비밀번호"
  24. class="form--input"
  25. required
  26. >
  27. </div>
  28. <div class="form--options">
  29. <label class="checkbox--label">
  30. <input type="checkbox" v-model="rememberMe">
  31. <span>로그인 상태 유지</span>
  32. </label>
  33. <a href="#" class="forgot--password">비밀번호 찾기</a>
  34. </div>
  35. <button type="submit" class="login--button">
  36. 로그인
  37. </button>
  38. </form>
  39. <div class="login--footer">
  40. <p>© 2024 Audi. All rights reserved.</p>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. </template>
  46. <script setup>
  47. import { ref } from 'vue'
  48. import { useRouter } from 'vue-router'
  49. const router = useRouter()
  50. const email = ref('')
  51. const password = ref('')
  52. const rememberMe = ref(false)
  53. const handleLogin = async () => {
  54. try {
  55. // 로그인 로직 구현
  56. console.log('Login attempt:', {
  57. email: email.value,
  58. password: password.value,
  59. rememberMe: rememberMe.value
  60. })
  61. // 로그인 성공 시 대시보드로 이동
  62. // router.push('/admin/dashboard')
  63. } catch (error) {
  64. console.error('Login error:', error)
  65. }
  66. }
  67. </script>