From f7348fa62684366761481b53c9ee695164a7e3a8 Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Wed, 22 May 2024 16:50:32 +0900
Subject: [PATCH] Feat: add login page

---
 src/components/AppHeader.vue       |   1 -
 src/components/users/UserLogin.vue | 154 +++++++++++++++++------------
 src/router/index.js                |  24 ++---
 src/views/TheUserView.vue          |  14 ---
 src/views/UserView.vue             |  20 ++++
 5 files changed, 120 insertions(+), 93 deletions(-)
 delete mode 100644 src/views/TheUserView.vue
 create mode 100644 src/views/UserView.vue

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index ca40be3..c8c5310 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -30,7 +30,6 @@ const logout = () => {
         </template>
         <template v-else>
           <router-link :to="{ name: 'user-login' }"> 로그인 </router-link>
-          <router-link :to="{ name: 'user-mypage' }"> 회원가입 </router-link>
         </template>
       </div>
     </nav>
diff --git a/src/components/users/UserLogin.vue b/src/components/users/UserLogin.vue
index 600704d..1696299 100644
--- a/src/components/users/UserLogin.vue
+++ b/src/components/users/UserLogin.vue
@@ -1,78 +1,104 @@
 <script setup>
-import { ref } from "vue"
-import { storeToRefs } from "pinia"
-import { useRouter } from "vue-router"
-import { useMemberStore } from "@/stores/memberStore"
+import { computed, ref } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useRouter } from 'vue-router';
+import { useMemberStore } from '@/stores/memberStore';
+import FilledButton from '../common/FilledButton.vue';
+import TextButton from '../common/TextButton.vue';
 
-const router = useRouter()
+const router = useRouter();
 
-const memberStore = useMemberStore()
+const memberStore = useMemberStore();
 
-const { isLogin, isLoginError } = storeToRefs(memberStore)
-const { userLogin } = memberStore
+const { userLogin } = memberStore;
+const { isLogin } = storeToRefs(memberStore);
+const id = ref('');
+const password = ref('');
+const loginUser = computed(() => {
+  return {
+    id: id.value,
+    password: password.value,
+  };
+});
 
-const loginUser = ref({
-  id: "",
-  password: "",
-})
-
-const login = async () => {
-  await userLogin(loginUser.value)
-  let token = localStorage.getItem("accessToken")
-  console.log(token)
-  console.log("isLogin: " + isLogin.value)
+async function handleLogin() {
+  console.log('login');
+  await userLogin(loginUser.value);
   if (isLogin.value) {
-    router.replace("/")
+    router.replace('/');
   }
 }
 </script>
 
 <template>
-  <div class="container">
-    <div class="row justify-content-center">
-      <div class="col-lg-10">
-        <h2 class="my-3 py-3 shadow-sm bg-light text-center">
-          <mark class="orange">로그인</mark>
-        </h2>
-      </div>
-      <div class="col-lg-10">
-        <form>
-          <div class="form-check mb-3 float-end">
-            <input class="form-check-input" type="checkbox" />
-            <label class="form-check-label" for="saveid"> 아이디저장 </label>
-          </div>
-          <div class="mb-3 text-start">
-            <label for="userid" class="form-label">아이디 : </label>
-            <input
-              type="text"
-              class="form-control"
-              v-model="loginUser.id"
-              placeholder="아이디..."
-            />
-          </div>
-          <div class="mb-3 text-start">
-            <label for="userpwd" class="form-label">비밀번호 : </label>
-            <input
-              type="password"
-              class="form-control"
-              v-model="loginUser.password"
-              @keyup.enter="login"
-              placeholder="비밀번호..."
-            />
-          </div>
-          <div class="mb-3 text-start" v-if="isLoginError === true">
-            <div class="alert alert-danger" role="alert">아이디 또는 비밀번호 확인해 주세요</div>
-          </div>
-          <div class="col-auto text-center">
-            <button type="button" class="btn btn-outline-primary mb-3" @click="login">
-              로그인
-            </button>
-            <button type="button" class="btn btn-outline-success ms-1 mb-3">회원가입</button>
-          </div>
-        </form>
-      </div>
+  <form @submit.prevent="handleLogin" action="POST" class="form">
+    <h2>로그인</h2>
+    <div class="form-group">
+      <label for="userId">아이디</label>
+      <input v-model="id" type="text" id="userId" name="id" required />
     </div>
-  </div>
+    <div class="form-group">
+      <label for="password">비밀번호</label>
+      <input v-model="password" type="password" id="password" name="password" required />
+      <RouterLink class="forgot" :to="{ name: 'home' }">
+        <TextButton> 비밀번호를 잊으셨나요? </TextButton>
+      </RouterLink>
+    </div>
+    <div class="form-group">
+      <FilledButton primary class="button" type="submit">로그인</FilledButton>
+      <p>
+        아직 회원이 아니신가요?
+        <RouterLink :to="{ name: 'home' }"><TextButton primary>회원가입</TextButton></RouterLink>
+      </p>
+    </div>
+  </form>
 </template>
 
-<style scoped></style>
+<style scoped>
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  justify-content: center;
+  align-items: center;
+  margin-top: 80px;
+  width: 100%;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 4px;
+  width: 100%;
+}
+
+label {
+  font-size: 16px;
+  font-weight: bold;
+  color: var(--color-text-secondary);
+}
+
+input {
+  border-width: 1px;
+  box-shadow: var(--shadow);
+}
+
+.forgot {
+  align-self: flex-start;
+}
+
+.form-input {
+  width: 100%;
+}
+
+.button {
+  height: 48px;
+  font-size: 16px;
+}
+
+p {
+  font-size: 14px;
+  text-align: center;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index d093ce2..25ad9ae 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,21 +10,21 @@ const onlyAuthUser = async (to, from, next) => {
   const { userInfo, isLogin } = storeToRefs(memberStore);
   const { isValidToken } = memberStore;
 
-  let token = localStorage.getItem("accessToken");
-  console.log(userInfo)
-  console.log(isLogin)
+  let token = localStorage.getItem('accessToken');
+  console.log(userInfo);
+  console.log(isLogin);
   // if (userInfo.value != null && token) {
-  console.log(isLogin.value)
-  console.log(token)
+  console.log(isLogin.value);
+  console.log(token);
   if (isLogin.value != null && token) {
-    console.log("이프문들어옴")
+    console.log('이프문들어옴');
     await isValidToken(token);
   }
   if (isLogin.value === null) {
-    console.log("이프문2들어옴")
-    next({ name: "user-login" });
+    console.log('이프문2들어옴');
+    next({ name: 'user-login' });
   } else {
-    console.log("else문 들어옴")
+    console.log('else문 들어옴');
     next();
   }
 };
@@ -40,7 +40,7 @@ const router = createRouter({
     {
       path: '/user',
       name: 'user',
-      component: () => import('@/views/TheUserView.vue'),
+      component: () => import('@/views/UserView.vue'),
       children: [
         {
           path: 'login',
@@ -97,10 +97,6 @@ const router = createRouter({
         },
       ],
     },
-    {
-      path: '/test',
-      component: () => import('@/views/TestView.vue'),
-    },
   ],
 });
 
diff --git a/src/views/TheUserView.vue b/src/views/TheUserView.vue
deleted file mode 100644
index 4681a42..0000000
--- a/src/views/TheUserView.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup></script>
-
-<template>
-  <div class="container text-center mt-3">
-    <div class="alert alert-primary" role="alert">Member Service</div>
-    <router-view></router-view>
-  </div>
-</template>
-
-<style>
-mark.orange {
-  background: linear-gradient(to top, rgb(243, 164, 18) 20%, transparent 30%);
-}
-</style>
diff --git a/src/views/UserView.vue b/src/views/UserView.vue
new file mode 100644
index 0000000..7fb0e13
--- /dev/null
+++ b/src/views/UserView.vue
@@ -0,0 +1,20 @@
+<script setup>
+import AppHeader from '@/components/AppHeader.vue';
+</script>
+
+<template>
+  <AppHeader />
+  <main>
+    <RouterView />
+  </main>
+</template>
+
+<style scoped>
+main {
+  max-width: 480px;
+  padding: 20px;
+  margin: 80px auto 0;
+  width: 100%;
+  height: calc(100vh - 80px);
+}
+</style>