diff --git a/src/assets/scss/auth/auth.scss b/src/assets/scss/auth/auth.scss
index 0a54d85..07bb959 100644
--- 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
index 8c66379..4d36f11 100644
--- 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
new file mode 100644
index 0000000..09053ab
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/components/auth/AuthButton.vue b/src/components/auth/AuthButton.vue
index b7d660d..ff48ea7 100644
--- 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
index 7d0d86b..825ec87 100644
--- a/src/components/auth/AuthInput.vue
+++ b/src/components/auth/AuthInput.vue
@@ -1,7 +1,7 @@
 <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>
 
@@ -9,32 +9,25 @@
 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>
\ No newline at end of file
diff --git a/src/components/common/NavBar.vue b/src/components/common/TheNavBar.vue
similarity index 64%
rename from src/components/common/NavBar.vue
rename to src/components/common/TheNavBar.vue
index f707702..c09af11 100644
--- a/src/components/common/NavBar.vue
+++ b/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 b/src/components/common/TheSideBar.vue
similarity index 98%
rename from src/components/common/SideBar.vue
rename to src/components/common/TheSideBar.vue
index 97ac713..5484bcf 100644
--- a/src/components/common/SideBar.vue
+++ b/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
index ebe0563..84a4c34 100644
--- 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
index 60433e0..fb20a5c 100644
--- 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
index 429d58f..d71b8f5 100644
--- 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
new file mode 100644
index 0000000..7d720ea
--- /dev/null
+++ 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']
+      }
+    ]
+  }
+})
\ No newline at end of file
diff --git a/src/utils/auth.js b/src/utils/auth.js
new file mode 100644
index 0000000..498f9a6
--- /dev/null
+++ b/src/utils/auth.js
@@ -0,0 +1,37 @@
+// 입력값 클래스
+class InputValue {
+  constructor(value = '', isValid = false, errorMsg = '') {
+    this.value = value;
+    this.isValid = isValid;
+    this.errorMsg = errorMsg;
+  }
+}
+
+// 타이머 클래스
+class ValidationTimer {
+  constructor(Inputvalue) {
+    this.inputValue = Inputvalue;
+    this.timeLeft = null;
+    this.interval = null;
+  }
+
+  startTimer(onTimerEnd) {
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+    
+    this.timeLeft = 180;
+    this.interval = setInterval(() => {
+      this.timeLeft--;
+      this.inputValue.errorMsg = `남은 시간 : ${this.timeLeft}초`;
+      if (this.timeLeft <= 0) {
+        clearInterval(this.interval);
+        onTimerEnd();
+        this.inputValue.errorMsg = `입력 시간 초과`;
+      }
+    }, 1000);
+  }
+}
+
+
+export { InputValue, ValidationTimer }
\ No newline at end of file
diff --git a/src/utils/axios.js b/src/utils/axios.js
index 43c7413..7374bae 100644
--- a/src/utils/axios.js
+++ b/src/utils/axios.js
@@ -1,10 +1,51 @@
+import { useAuthStore } from '@/stores/auth';
 import axios from 'axios';
 
+// 인증, 인가 관련 API
 const authAxios = axios.create({
-    baseURL: `${import.meta.env.VITE_API_URL}/auth`, 
-    headers: {
-        'Content-Type': 'application/json',
-    },
+  baseURL: `${import.meta.env.VITE_API_URL}`, 
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  withCredentials: true
 });
 
-export { authAxios }
\ No newline at end of file
+authAxios.interceptors.response.use(
+  (response) => {
+    return response.data;
+  },
+  (error) => {
+    return error.response.data;
+  }
+);
+
+// 일반 API
+const mainAxios = axios.create({
+  baseURL: `${import.meta.env.VITE_API_URL}`, 
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  withCredentials: true
+})
+
+mainAxios.interceptors.response.use(
+  (response) => {
+    return response.data;
+  },
+  async (error) => {
+    // 잘못된 토큰
+    if (error.response.data.code === 401) {
+      const authStore = useAuthStore();
+      authStore.logout();
+    // 만료된 엑세스 토큰
+    } else if (error.response.data.code === 419) {
+      await mainAxios.post('auth/reissue')
+      return await mainAxios(error.config);
+    // 그 외의 예외
+    } else {
+      return error.response.data;
+    }
+  }
+);
+
+export { authAxios, mainAxios }
\ No newline at end of file
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index 4ac6c83..eef3505 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="main-view" >
-    <NavBarVue/>
-    <SideBarVue/>
+    <TheNavBarVue/>
+    <TheSideBarVue/>
     <div class="main-content">
       <RouterView/>
     </div>
@@ -9,14 +9,14 @@
 </template>
 
 <script>
-import NavBarVue from "@/components/common/NavBar.vue";
-import SideBarVue from "@/components/common/SideBar.vue";
+import TheNavBarVue from "@/components/common/TheNavBar.vue";
+import TheSideBarVue from "@/components/common/TheSideBar.vue";
 
 export default {
   name: 'MainView',
   components: {
-    NavBarVue, 
-    SideBarVue  
+    TheNavBarVue, 
+    TheSideBarVue  
   },
 }
 </script>
diff --git a/src/views/auth/CertifyView.vue b/src/views/auth/CertifyView.vue
deleted file mode 100644
index 68a456d..0000000
--- a/src/views/auth/CertifyView.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-    <h1>사용자 등록</h1>
-    <div class="login-form">
-      <div class="input-box">
-        <auth-input-vue title="업체 코드" inputType="password"/>
-      </div>
-      <div class="button-box">
-        <auth-button-vue title="업체 인증" :clickFunc="cetificate"/>
-        <div class="guide-line">
-          <span>아이디 / 비밀번호 찾기</span>
-          <span @click="goLogin">로그인</span>
-        </div>
-      </div>
-    </div>
-</template>
-
-<script>
-import AuthButtonVue from '@/components/auth/AuthButton.vue'
-import AuthInputVue from '@/components/auth/AuthInput.vue'
-
-export default {
-  name: 'CertifyView',
-  components: {
-    AuthButtonVue,
-    AuthInputVue,
-  },
-  methods: {
-    goLogin() {
-      this.$router.push({name: 'login'})
-    },
-    cetificate() {
-      this.$router.push({name: 'signup'})
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  @import url('@/assets/scss/auth/auth.scss');
-</style>
\ No newline at end of file
diff --git a/src/views/auth/LoginView.vue b/src/views/auth/LoginView.vue
index 8ec4a46..a9d3967 100644
--- a/src/views/auth/LoginView.vue
+++ b/src/views/auth/LoginView.vue
@@ -1,18 +1,19 @@
 <template>
-    <h1>로그인</h1>
-    <div class="login-form">
-      <div class="input-box">
-        <auth-input-vue title="이메일" inputType="text"/>
-        <auth-input-vue title="비밀번호" inputType="password"/>
-      </div>
-      <div class="button-box">
-        <auth-button-vue title="로그인" :clickFunc="login"/>
-        <div class="guide-line">
-          <span>아이디 / 비밀번호 찾기</span>
-          <span @click="certify">사용자 등록</span>
-        </div>
+  <h1>로그인</h1>
+  <div class="login-form">
+    <div class="input-box">
+      <auth-input-vue title="이메일" inputType="text" v-model="email" @keydown.enter="login"/>
+      <auth-input-vue title="비밀번호" inputType="password" v-model="password" @keydown.enter="login"/>
+    </div>
+    <div class="button-box">
+      <div class="warning-msg">{{ invalidMsg }}</div>
+      <auth-button-vue title="로그인" :clickFunc="login" />
+      <div class="guide-line">
+        <span>아이디 / 비밀번호 찾기</span>
+        <span @click="signup">사용자 등록</span>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -28,31 +29,41 @@ export default {
     AuthButtonVue,
     AuthInputVue,
   },
+  data() {
+    return {
+      email: '',
+      password: '',
+      invalidMsg: '',
+      invalidInput: false
+    }
+  },
   computed: {
     ...mapStores(useAuthStore)
   },
   methods: {
     async login() {
       const data = {
-
+        "email": this.email,
+        "password": this.password
       };
 
-      const result = authAxios.post(
-        '/login',
-        data
-      )
-      
-      console.log(result);
-      // this.authStore.login();
-      // this.$router.push({ name: 'home' });
+      const result = await authAxios.post('auth/login', data)
+
+      if (result.code == 200) {
+        this.authStore.login();
+        this.$router.push({ name: 'home' });
+      } else {
+        this.invalidMsg = result.message;
+        this.invalidInput = true;
+      }
     },
-    certify() {
-      this.$router.push({ name : 'certify' })
+    signup() {
+      this.$router.push({ name: 'signup' })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  @import url('@/assets/scss/auth/auth.scss');
+@import url('@/assets/scss/auth/auth.scss');
 </style>
\ No newline at end of file
diff --git a/src/views/auth/SignupView.vue b/src/views/auth/SignupView.vue
index 05abb2f..1c99db2 100644
--- a/src/views/auth/SignupView.vue
+++ b/src/views/auth/SignupView.vue
@@ -1,42 +1,252 @@
 <template>
-    <h1>사용자 등록</h1>
-    <div class="login-form">
-      <div class="input-box">
-        <auth-input-vue title="이메일" inputType="text"/>
-        <auth-input-vue title="이메일 인증 코드" inputType="text"/>
-        <auth-input-vue title="비밀번호" inputType="password"/>
-        <auth-input-vue title="비밀번호 확인" inputType="password"/>
-        <auth-input-vue title="이름" inputType="text"/>
-        <auth-input-vue title="전화번호" inputType="text"/>
+  <h1>사용자 등록</h1>
+  <div class="signup-form">
+    <div class="signup-grid">
+      <div class="input-left">
+        <div class="input-item">
+          <auth-btn-input-vue title="이메일" inputType="text" buttonTitle="중복검사" :clickFunc="emailDuplicationCheck"
+            v-model="email.value" />
+          <div :class="{ 'warning-msg': !email.isValid, 'valid-msg': email.isValid }">{{ email.errorMsg }}</div>
+        </div>
+        <div class="input-item">
+          <auth-input-vue title="전화번호" inputType="text" v-model="phone.value" />
+          <div class="warning-msg">{{ phone.errorMsg }}</div>
+        </div>
+        <div class="input-item">
+          <auth-input-vue title="비밀번호" inputType="password" v-model="password.value" />
+          <div class="warning-msg">{{ password.errorMsg }}</div>
+        </div>
+        <div class="input-item">
+          <auth-input-vue title="비밀번호 확인" inputType="password" v-model="passwordCheck.value" />
+          <div class="warning-msg">{{ passwordCheck.errorMsg }}</div>
+        </div>
       </div>
-      <div class="button-box">
-        <auth-button-vue title="사용자 등록" :clickFunc="goLogin"/>
-        <div class="guide-line">
-          <span></span>
-          <span @click="goLogin">취소</span>
+      <div class="input-right">
+        <div class="input-item">
+          <auth-btn-input-vue title="이메일 인증 코드" 
+            :buttonTitle="emailCodeSend ? '인증' : '전송'"
+            :clickFunc="emailCodeCheck"
+            inputType="text" 
+            v-model="emailCode.value" />
+          <div :class="{ 'warning-msg': !emailCode.isValid, 'valid-msg': emailCode.isValid }">{{ emailCode.errorMsg }}</div>
+        </div>
+        <div class="input-item">
+          <auth-btn-input-vue 
+            :buttonTitle="phoneCodeSend ? '인증' : '전송'"
+            :clickFunc="phoneCodeCheck"
+            title="전화번호 인증 코드" 
+            inputType="text" 
+            v-model="phoneCode.value" />
+          <div :class="{ 'warning-msg': !phoneCode.isValid, 'valid-msg': phoneCode.isValid }">{{ phoneCode.errorMsg }}</div>
+        </div>
+        <div class="input-item">
+          <auth-input-vue title="이름" inputType="text" v-model="name.value" />
+          <div class="warning-msg">{{ name.errorMsg }}</div>
+        </div>
+        <div class="input-item">
+          <auth-input-vue title="회사 코드" inputType="text" v-model="clientCode.value" />
+          <div class="warning-msg">{{ clientCode.errorMsg }}</div>
         </div>
       </div>
     </div>
+    <div class="button-box">
+      <auth-button-vue title="완료" :clickFunc="signup" />
+      <div class="guide-line">
+        <div></div>
+        <span @click="cancel">취소</span>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import AuthBtnInputVue from '@/components/auth/AuthBtnInput.vue';
 import AuthButtonVue from '@/components/auth/AuthButton.vue'
 import AuthInputVue from '@/components/auth/AuthInput.vue'
+import { InputValue, ValidationTimer } from '@/utils/auth';
+import { authAxios } from '@/utils/axios';
 
 export default {
   name: 'LoginView',
   components: {
     AuthButtonVue,
     AuthInputVue,
+    AuthBtnInputVue
+  },
+  data() {
+    return {
+      email: new InputValue(),
+      emailCode: new InputValue(),
+      phone: new InputValue(),
+      phoneCode: new InputValue(),
+      password: new InputValue(),
+      passwordCheck: new InputValue(),
+      name: new InputValue(),
+      clientCode: new InputValue(),
+      emailCodeSend: false,
+      emailCodeTimer : null,
+      phoneCodeSend: false,
+      phoneCodeTimer : null,
+    }
   },
-    methods: {
-    goLogin() {
-      this.$router.push({name: 'login'})
+  watch: {
+    'email.value': function () {
+      this.email.isValid = false;
+      this.email.errorMsg = '';
+      this.emailCode.isValid = false;
+      this.emailCode.errorMsg = '';
+      this.emailCodeSend = false;
+      if (this.emailCodeTimer !== null) {
+        clearInterval(this.emailCodeTimer.interval)
+      }
+    },
+    'phone.value': function () {
+      this.phone.errorMsg = '';
+      this.phoneCode.isValid = false;
+      this.phoneCode.errorMsg = '';
+      this.phoneCodeSend = false;
+      if (this.phoneCodeTimer !== null) {
+        clearInterval(this.phoneCodeTimer.interval)
+      }
+    },
+    'password.value': function () {
+      this.password.errorMsg = '';
+    },
+    'passwordCheck.value': function () {
+      this.passwordCheck.errorMsg = '';
+    },
+    'name.value': function () {
+      this.name.errorMsg = '';
+    },
+    'clientCode.value': function () {
+      this.clientCode.errorMsg = '';
+    }
+  },
+  methods: {
+    // 메서드 : 이메일 중복 검사
+    async emailDuplicationCheck() {
+      const data = { "email": this.email.value };
+      const result = await authAxios.post('auth/email/duplication', data);
+      this.email.isValid = result.code === 200
+      this.email.errorMsg = result.message;
+    },
+    // 메서드 : 이메일 인증
+    async emailCodeCheck() {
+      // 이메일 중복 검사 체크
+      if (!this.email.isValid) {
+        this.emailCode.isValid=false;
+        this.emailCode.errorMsg='이메일 중복 검사를 실시해야합니다.';
+        return;
+      }
+      // 전송 로직
+      if (!this.emailCodeSend) {
+        const data = { "email": this.email.value };
+        const result = await authAxios.post('auth/email/code', data);
+        if (result.code === 200) {
+          this.emailCodeSend = true;
+          this.emailCodeTimer = new ValidationTimer(this.emailCode);
+          this.emailCodeTimer.startTimer(() => {this.emailCodeSend = false});
+        }
+      // 인증 로직
+      } else if (this.emailCodeSend) {
+        const data = {
+          'email' : this.email.value,
+          'code' : this.emailCode.value
+        };
+        const result = await authAxios.put('auth/email/code', data);
+        if (result.code === 200) {
+          clearInterval(this.emailCodeTimer.interval);
+          this.emailCode.isValid = true;
+          this.emailCode.errorMsg = result.message;
+        }
+      }
+    },
+    // 메서드 : 전화번호 인증
+    async phoneCodeCheck() {
+      // 전송 로직
+      if (!this.phoneCodeSend) {
+      const data = { 'phone': this.phone.value };
+      const result = await authAxios.post('auth/phone/code', data);
+      if (result.code === 200) {
+        this.phoneCodeSend = true;
+        this.phoneCodeTimer = new ValidationTimer(this.phoneCode);
+        this.phoneCodeTimer.startTimer(() => {this.phoneCodeSend = false});
+      } else {
+        this.phone.errorMsg = result.message;
+      }
+      // 인증 로직
+      } else if (this.phoneCodeSend) {
+        const data = {
+          'phone' : this.phone.value,
+          'code' : this.phoneCode.value
+        };
+        const result = await authAxios.put('auth/phone/code', data);
+        if (result.code === 200) {
+          clearInterval(this.phoneCodeTimer.interval);
+          this.phoneCode.isValid = true;
+          this.phoneCode.errorMsg = result.message;
+        }
+      }
+    },
+    // 메서드 : 회원가입
+    async signup() {
+      // 이메일 인증 검사
+      if (!this.emailCode.isValid) {
+        this.emailCode.errorMsg = '이메일 인증이 완료되지 않았습니다.';
+        return;
+      }
+      // 전화번호 인증 검사
+      if (!this.phoneCode.isValid) {
+        this.phoneCode.errorMsg = '전화번호 인증이 완료되지 않았습니다.';
+        return;
+      }
+      // 비밀번호 검사
+      const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}/;
+      if (!passwordRegex.test(this.password.value)) {
+        console.log(this.password.value)
+        this.password.errorMsg = '알파벳, 숫자, 특수문자를 모두 포함하여 8자리 이상';
+        return;
+      }
+      // 비밀번호 확인 검사
+      if (this.password.value !== this.passwordCheck.value) {
+        this.passwordCheck.errorMsg = '비밀번호가 일치하지 않습니다.';
+        return;
+      }
+      // 이름 검사
+      if (this.name.value.trim() === '') {
+        this.name.errorMsg = '이름을 입력하세요';
+        return;
+      }
+      // 고객 코드 검사
+      if (this.clientCode.value.trim() === '') {
+        this.clientCode.errorMsg = '고객 코드를 입력하세요';
+        return;
+      }
+      // 회원가입 요청
+      const data = {
+        "authCode" : this.clientCode.value,
+        "email" : this.email.value,
+        "password" : this.password.value,
+        "name" : this.name.value,
+        "phone" : this.phone.value
+      }
+      const result = await authAxios.post('auth/register', data);
+      console.log(result);
+      if (result.code === 200) {
+        // --- 회원가입 성공 모달 출력 ---
+        this.$router.push({name: 'login'});
+      } else if (result.code === 401) {
+        this.clientCode.errorMsg = result.message;
+      }
     },
+    // 메서드 : 회원가입 취소
+    cancel() {
+      this.$router.push({ name: 'login' })
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  @import url('@/assets/scss/auth/auth.scss');
+@import url('@/assets/scss/auth/auth.scss');
 </style>
\ No newline at end of file