Merge pull request #3 from Billing-Wise/K5P-59/feat/인증

[feat] 인증 및 인가 기능 구현
Billing-Wise · Jul 18, 2024 · 06ad829 · 06ad829
2 parents 3500968 + 116d67d
commit 06ad829
Show file tree

Hide file tree

Showing 17 changed files with 547 additions and 145 deletions.
diff --git a/src/assets/scss/auth/auth.scss b/src/assets/scss/auth/auth.scss
@@ -3,29 +3,69 @@ h1 {
 }
 
 .login-form {
-  @include flex-box(column, center, 60px);
-  width: 400px;
+  @include flex-box(column, center, 50px);
+  width: 500px;
+  margin: 0 30px;
   .input-box {
     @include flex-box(column, center, 20px);
     width: 100%;
   }
-  .button-box {
+}
+
+.signup-form {
+  @include flex-box(column, center, 50px);
+  width: 700px;
+  margin: 0 30px;
+  .signup-grid {
+    @include flex-box(row, center, 50px);
+    width: 100%;
+  }
+  .input-left {
     @include flex-box(column, center, 20px);
+    width: 60%;
+  }
+  .input-right {
+    @include flex-box(column, center, 20px);
+    width: 40%;
+  }
+
+}
+
+.input-item {
+  width: 100%;
+}
+
+.button-box {
+  @include flex-box(column, center, 20px);
+  width: 100%;
+  .guide-line {
     width: 100%;
-    .guide-line {
-      width: 100%;
-      @include flex-box(row, space-between, 0px);
-      font-size: 14px;
-      font-weight: bold;
-      span {
-        cursor: pointer;
-        transition: all 0.5s;
-        &:hover {
-          color: black;
-        }
+    @include flex-box(row, space-between, 0px);
+    font-size: 14px;
+    font-weight: bold;
+    span {
+      cursor: pointer;
+      transition: all 0.5s;
+      &:hover {
+        opacity: 0.5;
       }
     }
   }
 }
 
+.warning-msg {
+  color: #ff6347;
+  font-size: 13px;
+  font-weight: bold;
+  text-align: left;
+  height: 15px;
+}
+
+.valid-msg {
+  color: #3CB371;
+  font-size: 13px;
+  font-weight: bold;
+  text-align: left;
+  height: 15px;
+}
 
diff --git a/src/assets/scss/common.scss b/src/assets/scss/common.scss
@@ -15,19 +15,40 @@ $side-bar-width : 150px;
   gap: $gap;
 }
 
-@mixin base-button {
-  width: 100%;
+@mixin base-button($width, $font-size) {
+  width: $width;
   box-shadow: 0 5px 10px rgba(0,0,0,0.16), 0 5px 10px rgba(0,0,0,0.23);
   box-sizing: border-box;
   padding: 10px;
-  border-radius: 15px;
-  font-size: 18px;
+  border-radius: 10px;
+  font-size: $font-size;
   font-weight: bold;
-  cursor: pointer;
   transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+  cursor: pointer;
   &:hover {
     box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.22);
   }
+  &:active {
+    opacity: 0.7;
+  }
+}
+
+@mixin base-input($width, $font-size) {
+  box-sizing: border-box;
+  width: $width;
+  font-size: $font-size;
+  font-weight: bold;
+  padding: 12px 20px;
+  border: none ;
+  border-radius: 5px;
+  box-shadow: 0px 1px 4px 1px rgb(0, 0, 0, 0.20);
+  transition: all 0.3s;
+  &:focus {
+    outline: none;
+    box-shadow: 0px 1px 5px 1px rgb(0, 0, 0, 0.5);
+  }
 }
 
 
+
+
diff --git a/src/components/auth/AuthBtnInput.vue b/src/components/auth/AuthBtnInput.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="auth-input">
+      <p class="title">{{title}}</p>
+      <div class="main-box">
+        <input :type="inputType" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
+        <button @click="clickFunc">{{buttonTitle}}</button>
+      </div>
+    </div>
+  </template>
+
+  <script>
+  export default {
+    name: 'AuthBtnInputVue',
+    props: {
+      'title' : String,
+      'inputType': String,
+      'buttonTitle': String,
+      'modelValue': String,
+      'clickFunc' : Function
+    },
+    emits: ['update:modelValue']
+  
+  }
+  </script>
+
+  <style lang='scss' scoped>
+    .auth-input {
+      width: 100%;
+      margin-bottom: 5px;
+      .title {
+        font-weight: bold;
+        margin: 5px 0px
+      };
+      .main-box {
+        @include flex-box(row, space-between, 0px);
+      }
+    }
+
+    .main-box {
+      input {
+        @include base-input(70%, 16px)
+      }
+      button {
+        @include base-button(25%, 16px);
+        background-color: $theme-color;
+        border: none;
+        color : white;
+      }
+    }
+  </style>
diff --git a/src/components/auth/AuthButton.vue b/src/components/auth/AuthButton.vue
@@ -14,7 +14,9 @@ export default {
 
 <style lang="scss" scoped>
   .auth-button {
-    @include base-button;
+    @include base-button(100%, 18px);
+    width: 100%;
+    font-size: 18px;
     background-color: $theme-color;
     border: none;
     color : white;

diff --git a/src/components/auth/AuthInput.vue b/src/components/auth/AuthInput.vue
@@ -1,40 +1,33 @@
 <template>
   <div class="auth-input">
     <p>{{title}}</p>
-    <input :type="inputType">
+    <input :type="inputType" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
   </div>
 </template>
 
 <script>
 export default {
   name: 'AuthInputVue',
   props: {
-    "title" : String,
-    "inputType": String
-  }
+    'title' : String,
+    'inputType': String,
+    'modelValue': String
+  },
+  emits: ['update:modelValue']
+
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang='scss' scoped>
   .auth-input {
     width: 100%;
+    margin-bottom: 5px;
     p {
       font-weight: bold;
       margin: 5px 0px
     };
     input {
-      box-sizing: border-box;
-      width: 100%;
-      font-weight: bold;
-      padding: 12px 20px;
-      border: none ;
-      border-radius: 5px;
-      box-shadow: 0px 1px 4px 1px rgb(0, 0, 0, 0.20);
-      transition: all 0.3s;
-      &:focus {
-        outline: none;
-        box-shadow: 0px 1px 5px 1px rgb(0, 0, 0, 0.5);
-      }
+      @include base-input(100%, 16px)
     }
   }
 </style>
diff --git a/src/components/common/NavBar.vue → src/components/common/TheNavBar.vue b/src/components/common/NavBar.vue → src/components/common/TheNavBar.vue
@@ -2,20 +2,29 @@
   <nav class="nav-bar">
     <img src="@/assets/images/name_white.png" alt="">
     <div class="nav-info">
-      <div class="nav-info-item">KOSA</div>
-      <div class="nav-info-item">홍길동 님</div>
+      <div class="nav-info-item">{{ clientName }}</div>
+      <div class="nav-info-item">{{ userName }} 님</div>
     </div>
   </nav>
 </template>
 
 <script>
+import { mainAxios } from '@/utils/axios';
+
 export default {
-  name: 'NavBarVue',
+  name: 'TheNavBarVue',
   data() {
     return {
+      clientName: String,
+      userName: String,
     };
   },
-  mounted() {
+  async mounted() {
+    const result = await mainAxios.get('users/current');
+    this.clientName = result.data.clientName
+    this.userName = result.data.userName
+  },
+  method: {
   },
 }
 </script>

diff --git a/src/components/common/SideBar.vue → src/components/common/TheSideBar.vue b/src/components/common/SideBar.vue → src/components/common/TheSideBar.vue
@@ -17,7 +17,7 @@ import SideBarItemVue from './side-bar/SideBarItem.vue';
 import SideBarLogoutVue from './side-bar/SideBarLogout.vue';
 
 export default {
-  name: 'SideBarVue',
+  name: 'TheSideBarVue',
   components: {
     SideBarLogoutVue,
     SideBarItemVue

diff --git a/src/components/common/side-bar/SideBarLogout.vue b/src/components/common/side-bar/SideBarLogout.vue
@@ -14,9 +14,8 @@ export default {
     ...mapStores(useAuthStore)
   },
   methods: {
-    logout() {
-      this.authStore.logout();
-      this.$router.push({ name: 'login' });
+    async logout() {
+      await this.authStore.logout();
     }
   }
 }

diff --git a/src/router/index.js b/src/router/index.js
@@ -57,11 +57,6 @@ const router = createRouter({
           name: 'login',
           component: () => import('@/views/auth/LoginView.vue'),
         },
-        {
-          path: '/cetify',
-          name: 'certify',
-          component: () => import('@/views/auth/CertifyView.vue'),
-        },
         {
           path: '/signup',
           name: 'signup',

diff --git a/src/stores/auth.js b/src/stores/auth.js
@@ -1,3 +1,5 @@
+import router from '@/router';
+import { authAxios } from '@/utils/axios';
 import { defineStore } from 'pinia'
 
 export const useAuthStore = defineStore('auth', {
@@ -8,10 +10,12 @@ export const useAuthStore = defineStore('auth', {
   },
   actions: {
     login() {
-      this.isLoggedIn = true
+      this.isLoggedIn = true;
     },
     logout() {
-      this.isLoggedIn = false
+      authAxios.post('auth/logout');
+      this.isLoggedIn = false;
+      router.push({name: 'login'})
     }
   },
   persist: {

diff --git a/src/stores/signup.js b/src/stores/signup.js
@@ -0,0 +1,30 @@
+import { defineStore } from 'pinia'
+
+export const useAuthStore = defineStore('signup', {
+  state() {
+    return {
+      email: '',
+      phone: '',
+      password: '',
+      name: '',
+      authCode: '',
+    }
+  },
+  actions: {
+    login() {
+      this.isLoggedIn = true
+    },
+    logout() {
+      this.isLoggedIn = false
+    }
+  },
+  persist: {
+    enabled: true,
+    strategies: [
+      {
+        storage: sessionStorage,
+        paths: ['isLoggedIn']
+      }
+    ]
+  }
+})