From c9e5679bbd9114daa12ec4a24c10c32bc3ebc77a Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 9 Jan 2025 10:58:17 +0900
Subject: [PATCH] =?UTF-8?q?login=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/login/LoginForm.vue  | 68 +++++++++++++++++++++++++++++
 src/components/login/LogoHeader.vue | 32 ++++++++++++++
 2 files changed, 100 insertions(+)
 create mode 100644 src/components/login/LoginForm.vue
 create mode 100644 src/components/login/LogoHeader.vue

diff --git a/src/components/login/LoginForm.vue b/src/components/login/LoginForm.vue
new file mode 100644
index 0000000..1a5e7ab
--- /dev/null
+++ b/src/components/login/LoginForm.vue
@@ -0,0 +1,68 @@
+<template>
+    <form @submit.prevent="handleSubmit">
+        <div class="col-xl-12">
+            <UserFormInput
+                title="아이디"
+                name="id"
+                :label-outside="true"
+                :is-alert="idAlert"
+                :useInputGroup="true"
+                @update:data="handleIdChange"
+                :value="id"
+            />
+
+            <UserFormInput
+                title="비밀번호"
+                name="pw"
+                type="password"
+                :is-alert="passwordAlert"
+                @update:data="handlePasswordChange"
+                :value="password"
+            />
+
+            <div class="d-grid gap-2 mt-7 mb-5">
+                <button type="submit" class="btn btn-primary">로그인</button>
+            </div>
+
+            <div class="mb-3 d-flex justify-content-around">
+                <div>
+                    <input type="checkbox" class="form-check-input" id="rememberCheck" />
+                    <label class="form-check-label fw-bold" for="rememberCheck">&nbsp;자동로그인</label>
+                </div>
+                <RouterLink class="text-dark fw-bold" to="/register">등록신청</RouterLink>
+                <RouterLink class="text-dark fw-bold" to="/pw">비밀번호 찾기</RouterLink>
+            </div>
+        </div>
+    </form>
+</template>
+
+<script setup>
+    import { ref } from 'vue';
+    import UserFormInput from '@c/input/UserFormInput.vue';
+
+    const id = ref('');
+    const password = ref('');
+    const idAlert = ref(false);
+    const passwordAlert = ref(false);
+
+    const emit = defineEmits(['submit']);
+
+    const handleIdChange = value => {
+        id.value = value;
+        idAlert.value = false;
+    };
+
+    const handlePasswordChange = value => {
+        password.value = value;
+        passwordAlert.value = false;
+    };
+
+    const handleSubmit = () => {
+        idAlert.value = id.value.trim() === '';
+        passwordAlert.value = password.value.trim() === '';
+
+        if (!idAlert.value && !passwordAlert.value) {
+            emit('submit', { id: id.value, password: password.value });
+        }
+    };
+</script>
diff --git a/src/components/login/LogoHeader.vue b/src/components/login/LogoHeader.vue
new file mode 100644
index 0000000..243842f
--- /dev/null
+++ b/src/components/login/LogoHeader.vue
@@ -0,0 +1,32 @@
+<template>
+    <div class="text-center">
+        <span>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                width="100"
+                height="100"
+                viewBox="0 0 100 100"
+            >
+                <image
+                    xlink:href="data:image/png;base64,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"
+                    x="0"
+                    y="0"
+                    width="100"
+                    height="100"
+                />
+            </svg>
+        </span>
+        <h2>{{ title }}</h2>
+    </div>
+</template>
+
+<script setup>
+    const prop = defineProps({
+        title: {
+            type: String,
+            default: '라벨',
+            required: true,
+        },
+    });
+</script>