Feat: add login page

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>

src/components/users/UserLogin.vue

@@ -1,78 +1,104 @@
 <script setup>
-import { ref } from "vue"
+import { computed, ref } from 'vue';
-import { storeToRefs } from "pinia"
+import { storeToRefs } from 'pinia';
-import { useRouter } from "vue-router"
+import { useRouter } from 'vue-router';
-import { useMemberStore } from "@/stores/memberStore"
+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({
+async function handleLogin() {
-  id: "",
+  console.log('login');
-  password: "",
+  await userLogin(loginUser.value);
-})
-
-const login = async () => {
-  await userLogin(loginUser.value)
-  let token = localStorage.getItem("accessToken")
-  console.log(token)
-  console.log("isLogin: " + isLogin.value)
   if (isLogin.value) {
-    router.replace("/")
+    router.replace('/');
   }
 }
 </script>
 
 <template>
-  <div class="container">
+  <form @submit.prevent="handleLogin" action="POST" class="form">
-    <div class="row justify-content-center">
+    <h2>로그인</h2>
-      <div class="col-lg-10">
+    <div class="form-group">
-        <h2 class="my-3 py-3 shadow-sm bg-light text-center">
+      <label for="userId">아이디</label>
-          <mark class="orange">로그인</mark>
+      <input v-model="id" type="text" id="userId" name="id" required />
-        </h2>
     </div>
-      <div class="col-lg-10">
+    <div class="form-group">
-        <form>
+      <label for="password">비밀번호</label>
-          <div class="form-check mb-3 float-end">
+      <input v-model="password" type="password" id="password" name="password" required />
-            <input class="form-check-input" type="checkbox" />
+      <RouterLink class="forgot" :to="{ name: 'home' }">
-            <label class="form-check-label" for="saveid"> 아이디저장 </label>
+        <TextButton> 비밀번호를 잊으셨나요? </TextButton>
+      </RouterLink>
     </div>
-          <div class="mb-3 text-start">
+    <div class="form-group">
-            <label for="userid" class="form-label">아이디 : </label>
+      <FilledButton primary class="button" type="submit">로그인</FilledButton>
-            <input
+      <p>
-              type="text"
+        아직 회원이 아니신가요?
-              class="form-control"
+        <RouterLink :to="{ name: 'home' }"><TextButton primary>회원가입</TextButton></RouterLink>
-              v-model="loginUser.id"
+      </p>
-              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>
-    </div>
-  </div>
 </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>

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");
+  let token = localStorage.getItem('accessToken');
-  console.log(userInfo)
+  console.log(userInfo);
-  console.log(isLogin)
+  console.log(isLogin);
   // if (userInfo.value != null && token) {
-  console.log(isLogin.value)
+  console.log(isLogin.value);
-  console.log(token)
+  console.log(token);
   if (isLogin.value != null && token) {
-    console.log("이프문들어옴")
+    console.log('이프문들어옴');
     await isValidToken(token);
   }
   if (isLogin.value === null) {
-    console.log("이프문2들어옴")
+    console.log('이프문2들어옴');
-    next({ name: "user-login" });
+    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'),
-    },
   ],
 });
 

src/views/TheUserView.vue

@@ -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>

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>