v0.0.53: 공유 모달·헤더 사용자 메뉴·회원가입·로그인 화면

Co-authored-by: Cursor <cursoragent@cursor.com>

pages/signin.vue

@@ -0,0 +1,104 @@
+<script setup>
+definePageMeta({
+  layout: 'page'
+})
+
+const isSubmitting = ref(false)
+const errorMessage = ref('')
+
+const form = reactive({
+  email: '',
+  password: ''
+})
+
+/**
+ * 로그인 입력값을 검증한다.
+ * @returns {boolean} 검증 통과 여부
+ */
+const validateSignIn = () => {
+  errorMessage.value = ''
+
+  if (!form.email.trim() || !form.password) {
+    errorMessage.value = '이메일과 비밀번호를 입력해 주세요.'
+    return false
+  }
+
+  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) {
+    errorMessage.value = '이메일 형식이 올바르지 않습니다.'
+    return false
+  }
+
+  return true
+}
+
+/**
+ * 로그인 요청을 시뮬레이션한다.
+ * @returns {Promise<void>}
+ */
+const submitSignIn = async () => {
+  if (!validateSignIn()) {
+    return
+  }
+
+  isSubmitting.value = true
+  await new Promise((resolve) => setTimeout(resolve, 500))
+  isSubmitting.value = false
+  errorMessage.value = '현재 로그인 API 연결 전입니다. 관리자 로그인은 /admin 을 사용해 주세요.'
+}
+</script>
+
+<template>
+  <section class="auth-signin min-h-screen bg-[#0a0b0d] text-[#f5f7fa]">
+    <div class="mx-auto flex min-h-screen w-full max-w-[1280px] items-center px-8 py-12 sm:px-16">
+      <div class="w-full max-w-[430px]">
+        <p class="text-2xl font-semibold leading-tight">
+          로그인
+        </p>
+        <p class="mt-2 text-sm text-[#9ba3af]">
+          가입한 이메일과 비밀번호로 로그인하세요.
+        </p>
+
+        <form class="mt-8 space-y-5" @submit.prevent="submitSignIn">
+          <div class="space-y-1.5">
+            <label class="text-xs text-[#d8dee6]">이메일</label>
+            <input
+              v-model="form.email"
+              class="h-10 w-full rounded-[8px] border border-[#1a212a] bg-transparent px-3 text-sm outline-none transition-colors focus:border-[#2f6feb]"
+              type="email"
+              autocomplete="email"
+            >
+          </div>
+
+          <div class="space-y-1.5">
+            <label class="text-xs text-[#d8dee6]">비밀번호</label>
+            <input
+              v-model="form.password"
+              class="h-10 w-full rounded-[8px] border border-[#1a212a] bg-transparent px-3 text-sm outline-none transition-colors focus:border-[#2f6feb]"
+              type="password"
+              autocomplete="current-password"
+            >
+          </div>
+
+          <button
+            class="h-9 rounded-[8px] bg-[#2f6feb] px-8 text-xs font-medium text-white transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
+            type="submit"
+            :disabled="isSubmitting"
+          >
+            로그인
+          </button>
+        </form>
+
+        <p v-if="errorMessage" class="mt-4 text-xs text-[#e5acb1]">
+          {{ errorMessage }}
+        </p>
+
+        <p class="mt-6 text-sm text-[#9ba3af]">
+          계정이 없으신가요?
+          <NuxtLink class="text-[#7eb8ff] hover:opacity-80" to="/signup/">
+            회원가입
+          </NuxtLink>
+        </p>
+      </div>
+    </div>
+  </section>
+</template>