Commit @45911927d969d789e0db7a5fb10bb94b20ca1409

정다정 2024-01-29

240129 정다정 회원가입 join으로 변경

@45911927d969d789e0db7a5fb10bb94b20ca1409

29e9be1

4591192

client/views/pages/join/Join.vue

--- client/views/pages/join/Join.vue

+++ client/views/pages/join/Join.vue


 <template>
-    <div class="join-view container ">
-        <div class="flex align-center flex-column   ">
+    <div class="join-view container">
+        <div class="flex align-center flex-column">
             <div class="view-wrap">
-
                 <h1 class="main-title page-titleZone">회원가입</h1>
-                <ul class="content-wrap ">
+                <ul class="content-wrap">
                     <li class="flex-column">
-                        <a href="#">ID</a>
-                        <input class="flex70" type="text">
+                        <a>ID</a>
+                        <input class="flex70" type="text" v-model="id" />
                     </li>
                     <li class="flex-column">
-                        <a href="#">PW</a>
-                        <input type="password">
+                        <a>PW</a>
+                        <input type="password" v-model="pwd" />
                     </li>
                     <li class="flex-column">
-                        <a href="#">PW CHECK</a>
-                        <input type="password">
+                        <a>PW CHECK</a>
+                        <input type="password" v-model="pwd_check" />
                     </li>
                     <li class="flex-column">
-                        <a href="#">NAME</a>
-
-                        <input type="text">
-
+                        <a>NAME</a>
+                        <input type="text" v-model="name" />
+                    </li>
+                    <li class="flex-column">
+                        <a>E-MAIL</a>
+                        <input type="text" v-model="email" />
                     </li>
                 </ul>
-                <button class="large-btn blue-btn join-button" @click="joinbtn">회원가입</button>
+                <button class="large-btn blue-btn join-button" @click="joinUser">회원가입</button>
             </div>
         </div>
-        <div class="join-modal modal-wrapper  " v-if="joinModal">
+        <div class="join-modal modal-wrapper" v-if="joinModal">
             <div class="modal-fillter flex-column align-center justify-between">
-
                 <h1>회원가입이 완료되었습니다.로그인 페이지로 넘어갑니다.</h1>
                 <button class="blue-btn small-btn" @click="closeModal">확인</button>
             </div>

 </template>
 
 <script>
-import axios from "axios";
-import vueCookie from "vue-cookies";
-import SvgIcon from '@jamescoyle/vue-icon'
-import { mdiAccountOutline, mdiKey, mdiCardAccountDetails } from '@mdi/js'
+import axios from 'axios';
+import vueCookie from 'vue-cookies';
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiAccountOutline, mdiKey, mdiCardAccountDetails } from '@mdi/js';
 export default {
-
-
     data() {
         return {
             mdiAccountOutline: mdiAccountOutline,
             mdiKey: mdiKey,
             mdiCardAccountDetails: mdiCardAccountDetails,
-            joinbtn:true,
-            joinModal:false,
-            closeModal:false
-        }
+            // joinbtn: true,
+            joinModal: false,
+            closeModal: false,
+
+            id: '',
+            pwd: '',
+            pwd_check: '',
+            name: '',
+            email: '',
+        };
     },
     methods: {
-        joinbtn(){
+        joinUser() {
+            const vm = this;
+            if (!vm.id || !vm.pwd || !vm.pwd_check || !vm.name || !vm.email) {
+                this.$showAlert('error', '모든 칸을 입력하세요.');
+                return;
+            }
+
+            //아이디 검사
+            /*if (vm.onlyNumberAndEnglish(vm.id) == false) {
+                this.$showAlert('error', '아이디를 입력하실 때 영어 또는 숫자만 가능합니다.');
+                return;
+            }*/
+
+            //비밀번호 검사
+            /*if (vm.strongPassword(vm.pwd) == false) {
+                this.$showAlert('error','비밀번호 입력시 최소 8글자 이상이면서, 알파벳과 숫자 및 특수문자(@$!%*#?&)를 하나 이상 입력해주시기 바랍니다.');
+                return;
+            }*/
+
+            //비밀번호 일치 확인
+            if (vm.pwd === vm.pwd_check) {
+                const user_info = {
+                    user_id: vm.id,
+                    user_pw: vm.pwd,
+                    user_nm: vm.name,
+                    user_email: vm.email,
+                };
+                axios({
+                    url: '/insertUsers.json',
+                    method: 'post',
+                    headers: {
+                        'Content-Type': 'application/json; charset=UTF-8',
+                    },
+                    data: user_info,
+                })
+                    .then((res) => {
+                        console.log('회원가입 응답 : ', res);
+                        vm.joinbtn();
+                    })
+                    .catch((err) => {
+                        console.log('회원가입 에러 : ', err);
+                        this.$showAlert('error', '회원가입 실패');
+                    });
+            } else {
+                this.$showAlert('error', '비밀번호가 일치하지 않습니다.');
+            }
+            vm.id = '';
+            vm.pwd = '';
+            vm.pwd_check = '';
+            vm.name = '';
+            vm.email = '';
+        },
+        joinbtn() {
             this.joinModal = !this.joinModal;
         },
-        closeModal(){
+        closeModal() {
             this.joinModal = !this.joinModal;
-        }
-    },
-    watch: {
+            this.$router.push({ path: '/', query: {} });
+        },
+        // 특수문자 검증
+        onlyNumberAndEnglish(id) {
+            return /^[A-Za-z0-9][A-Za-z0-9]*$/.test(id);
+        },
 
-
+        // 비밀번호 검증(8글자 이상, 영문, 숫자, 특수문자 사용)
+        strongPassword(password) {
+            return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/.test(password);
+        },
     },
+    watch: {},
     computed: {},
     components: {
-        SvgIcon
+        SvgIcon,
     },
     mounted() {
-
+        //쿠키 존재 유무 확인
+        if ($cookies.get('JSESSIONID') != null) {
+            this.$router.push('/main.page');
+        } else {
+            this.$router.push('/join.page');
+        }
     },
 };
 </script>

 }
 
 .view-wrap {
-
     background-color: var(--color-white);
     width: 30%;
     border-radius: 2rem;
     padding: 50px 60px;
     box-shadow: 5px 5px 10px #33333336;
-
 }
 
 .content-wrap .container {
     flex-direction: row;
 }
 
-.content-wrap>li {
+.content-wrap > li {
     padding: 2rem 0;
 }
 
-.content-wrap>li>a {
+.content-wrap > li > a {
     padding: 0 0 1rem 0;
     font-size: 1.5rem;
 }
 
-input[type="password"]{
+input[type='password'] {
     min-width: 100px;
     padding: 5px 10px;
     border: 1px solid #eee;
     border-radius: 5px;
     font-size: 1.3rem;
 }
-input[type="text"]{
+input[type='text'] {
     margin-left: 0px;
 }
 
-.join-button{
+.join-button {
     padding: 1rem 0;
     margin-left: 0px;
 }
-.join-button.active{
+.join-button.active {
     display: block;
 }
-.join-modal{
+.join-modal {
     position: fixed;
     top: 50%;
     left: 50%;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
     width: 100%;
     height: 100%;
     padding: 0px !important;
-background-color: rgba(0, 0, 0, 0.256); 
+    background-color: rgba(0, 0, 0, 0.256);
 }
 
-.modal-fillter{
+.modal-fillter {
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
     width: 30%;
     height: 30%;
     background-color: var(--color-white);

     text-align: center;
     padding: 4rem;
     border-radius: 2rem;
-
-
 }
-
-
 </style>

29e9be1

4591192

client/views/pages/login/Login.vue

--- client/views/pages/login/Login.vue

+++ client/views/pages/login/Login.vue


                 <div class="login-zone">
                     <div class="input-wrap">
                         <div class="inputContainer">
-                            <input required="" class="customInput" type="text" v-model="userLogin.user_id"
-                            @keyup.enter="handleEnterKey">
+                            <input
+                                required=""
+                                class="customInput"
+                                type="text"
+                                v-model="userLogin.user_id"
+                                @keyup.enter="handleEnterKey"
+                            />
                             <label class="inputLabel">ID</label>
                             <div class="inputUnderline"></div>
                         </div>
                         <div class="inputContainer">
-                            <input required="" class="customInput" type="password" v-model="userLogin.user_password" @keyup.enter="handleEnterKey">
+                            <input
+                                required=""
+                                class="customInput"
+                                type="password"
+                                v-model="userLogin.user_password"
+                                @keyup.enter="handleEnterKey"
+                            />
                             <label class="inputLabel">PASSWORD</label>
                             <div class="inputUnderline"></div>
                         </div>

                     <div class="found-zone flex justify-center">
                         <router-link to="">아이디찾기</router-link>
                         <router-link to="">비밀번호 찾기</router-link>
-                        <router-link to="/register.page">회원가입</router-link>
+                        <router-link to="/join.page">회원가입</router-link>
                     </div>
                 </div>
                 <button class="blue-btn large-btn" @click="login()">로그인</button>

 </template>
 
 <script>
-import axios from "axios";
-import vueCookie from "vue-cookies";
+import axios from 'axios';
+import vueCookie from 'vue-cookies';
 
 export default {
     data() {

             // 아이디를 입력하지 않았을 경우
             // 공백만 입력하였을 경우
             // 특수문자가 입력되었을 경우
-            if (vm.userLogin.user_id == null || vm.userLogin.user_id.replace(/\s/gi, '') == '' || special_pattern.test(vm.userLogin.user_id) == true) {
-                alert("아이디를 입력해주시기 바랍니다.");
+            if (
+                vm.userLogin.user_id == null ||
+                vm.userLogin.user_id.replace(/\s/gi, '') == '' ||
+                special_pattern.test(vm.userLogin.user_id) == true
+            ) {
+                alert('아이디를 입력해주시기 바랍니다.');
                 return;
             }
 
             // 비밀번호를 입력하지 않았을 경우
             // 공백만 입력하였을 경우
             if (vm.userLogin.user_password == null || vm.userLogin.user_password.replace(/\s/gi, '') == '') {
-                alert("비밀번호를 입력해주시기 바랍니다.");
+                alert('비밀번호를 입력해주시기 바랍니다.');
                 return;
             }
 
             axios({
                 url: '/login.json',
                 method: 'post',
-                headers: { "Content-Type": "application/json; charset=UTF-8" },
+                headers: { 'Content-Type': 'application/json; charset=UTF-8' },
                 data: vm.userLogin,
             })
                 .then(function (response) {
-                    console.log("login - response", response.data);
+                    console.log('login - response', response.data);
                     if (response.data > 0) {
                         vm.$router.go();
                         vm.$router.push({ path: '/main.page', query: {} });
                     } else {
-                        alert("로그인 실패하였습니다.\n\n아이디와 비밀번호를 다시 입력해주시기 바랍니다.");
+                        alert('로그인 실패하였습니다.\n\n아이디와 비밀번호를 다시 입력해주시기 바랍니다.');
                         return;
-
                     }
                 })
                 .catch(function (error) {
-                    console.log("login - error", error);
-                    alert("로그인에 오류가 발생하였습니다.");
+                    console.log('login - error', error);
+                    alert('로그인에 오류가 발생하였습니다.');
                 });
         },
         handleEnterKey: function () {
             this.login();
-        }
+        },
     },
-    watch: {
-
-
-    },
+    watch: {},
     computed: {},
     components: {},
     mounted() {
         console.log('main mounted');
         // 쿠키에 JSESSIONID 키 값이 존재한다면 메인페이지로 이동
-        if (vueCookie.get("JSESSIONID") != null) {
+        if (vueCookie.get('JSESSIONID') != null) {
             this.$router.push({ path: '/main.page', query: {} });
         }
     },

     margin-bottom: 50px;
 }
 
-.logo>img {
+.logo > img {
     display: block;
     margin: 0 auto;
 }
 .inputContainer {
-  position: relative;
-  margin-bottom: 40px;  
+    position: relative;
+    margin-bottom: 40px;
 }
 
-.inputContainer:last-child{
+.inputContainer:last-child {
     margin-bottom: 0;
 }
 
 .customInput {
-  width: 100%;
-  padding: 10px;
-  font-size: 13px;
-  background-color: transparent;
-  border: none;
-  outline: none;
-  transition: border-color 0.3s ease;
+    width: 100%;
+    padding: 10px;
+    font-size: 13px;
+    background-color: transparent;
+    border: none;
+    outline: none;
+    transition: border-color 0.3s ease;
 }
-
 
 .inputLabel {
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-  padding: 5px;
-  font-size: 13px;
-  color: #eee;
-  transform: translateY(-80%);
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    padding: 5px;
+    font-size: 13px;
+    color: #eee;
+    transform: translateY(-80%);
 }
 
-
 .inputUnderline {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background-color: #eee;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: #eee;
 }
 
 .found-zone {
     padding: 20px 0;
 }
 
-.found-zone>a {
+.found-zone > a {
     font-size: 1.4rem;
     padding: 0 10px;
 }

 .login-page .blue-btn {
     margin-left: 0;
     padding: 10px 0;
-}</style>
+}
+</style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,35 +1,35 @@
1	1	<template>
2		- <div class="join-view container ">
3		- <div class="flex align-center flex-column ">
	2	+ <div class="join-view container">
	3	+ <div class="flex align-center flex-column">
4	4	<div class="view-wrap">
5		-
6	5	<h1 class="main-title page-titleZone">회원가입</h1>
7		- <ul class="content-wrap ">
	6	+ <ul class="content-wrap">
8	7	<li class="flex-column">
9		- <a href="#">ID</a>
10		- <input class="flex70" type="text">
	8	+ <a>ID</a>
	9	+ <input class="flex70" type="text" v-model="id" />
11	10	</li>
12	11	<li class="flex-column">
13		- <a href="#">PW</a>
14		- <input type="password">
	12	+ <a>PW</a>
	13	+ <input type="password" v-model="pwd" />
15	14	</li>
16	15	<li class="flex-column">
17		- <a href="#">PW CHECK</a>
18		- <input type="password">
	16	+ <a>PW CHECK</a>
	17	+ <input type="password" v-model="pwd_check" />
19	18	</li>
20	19	<li class="flex-column">
21		- <a href="#">NAME</a>
22		-
23		- <input type="text">
24		-
	20	+ <a>NAME</a>
	21	+ <input type="text" v-model="name" />
	22	+ </li>
	23	+ <li class="flex-column">
	24	+ <a>E-MAIL</a>
	25	+ <input type="text" v-model="email" />
25	26	</li>
26	27	</ul>
27		- <button class="large-btn blue-btn join-button" @click="joinbtn">회원가입</button>
	28	+ <button class="large-btn blue-btn join-button" @click="joinUser">회원가입</button>
28	29	</div>
29	30	</div>
30		- <div class="join-modal modal-wrapper " v-if="joinModal">
	31	+ <div class="join-modal modal-wrapper" v-if="joinModal">
31	32	<div class="modal-fillter flex-column align-center justify-between">
32		-
33	33	<h1>회원가입이 완료되었습니다.로그인 페이지로 넘어갑니다.</h1>
34	34	<button class="blue-btn small-btn" @click="closeModal">확인</button>
35	35	</div>
...	...	@@ -38,41 +38,109 @@
38	38	</template>
39	39
40	40	<script>
41		-import axios from "axios";
42		-import vueCookie from "vue-cookies";
43		-import SvgIcon from '@jamescoyle/vue-icon'
44		-import { mdiAccountOutline, mdiKey, mdiCardAccountDetails } from '@mdi/js'
	41	+import axios from 'axios';
	42	+import vueCookie from 'vue-cookies';
	43	+import SvgIcon from '@jamescoyle/vue-icon';
	44	+import { mdiAccountOutline, mdiKey, mdiCardAccountDetails } from '@mdi/js';
45	45	export default {
46		-
47		-
48	46	data() {
49	47	return {
50	48	mdiAccountOutline: mdiAccountOutline,
51	49	mdiKey: mdiKey,
52	50	mdiCardAccountDetails: mdiCardAccountDetails,
53		- joinbtn:true,
54		- joinModal:false,
55		- closeModal:false
56		- }
	51	+ // joinbtn: true,
	52	+ joinModal: false,
	53	+ closeModal: false,
	54	+
	55	+ id: '',
	56	+ pwd: '',
	57	+ pwd_check: '',
	58	+ name: '',
	59	+ email: '',
	60	+ };
57	61	},
58	62	methods: {
59		- joinbtn(){
	63	+ joinUser() {
	64	+ const vm = this;
	65	+ if (!vm.id \|\| !vm.pwd \|\| !vm.pwd_check \|\| !vm.name \|\| !vm.email) {
	66	+ this.$showAlert('error', '모든 칸을 입력하세요.');
	67	+ return;
	68	+ }
	69	+
	70	+ //아이디 검사
	71	+ /*if (vm.onlyNumberAndEnglish(vm.id) == false) {
	72	+ this.$showAlert('error', '아이디를 입력하실 때 영어 또는 숫자만 가능합니다.');
	73	+ return;
	74	+ }*/
	75	+
	76	+ //비밀번호 검사
	77	+ /*if (vm.strongPassword(vm.pwd) == false) {
	78	+ this.$showAlert('error','비밀번호 입력시 최소 8글자 이상이면서, 알파벳과 숫자 및 특수문자(@$!%*#?&)를 하나 이상 입력해주시기 바랍니다.');
	79	+ return;
	80	+ }*/
	81	+
	82	+ //비밀번호 일치 확인
	83	+ if (vm.pwd === vm.pwd_check) {
	84	+ const user_info = {
	85	+ user_id: vm.id,
	86	+ user_pw: vm.pwd,
	87	+ user_nm: vm.name,
	88	+ user_email: vm.email,
	89	+ };
	90	+ axios({
	91	+ url: '/insertUsers.json',
	92	+ method: 'post',
	93	+ headers: {
	94	+ 'Content-Type': 'application/json; charset=UTF-8',
	95	+ },
	96	+ data: user_info,
	97	+ })
	98	+ .then((res) => {
	99	+ console.log('회원가입 응답 : ', res);
	100	+ vm.joinbtn();
	101	+ })
	102	+ .catch((err) => {
	103	+ console.log('회원가입 에러 : ', err);
	104	+ this.$showAlert('error', '회원가입 실패');
	105	+ });
	106	+ } else {
	107	+ this.$showAlert('error', '비밀번호가 일치하지 않습니다.');
	108	+ }
	109	+ vm.id = '';
	110	+ vm.pwd = '';
	111	+ vm.pwd_check = '';
	112	+ vm.name = '';
	113	+ vm.email = '';
	114	+ },
	115	+ joinbtn() {
60	116	this.joinModal = !this.joinModal;
61	117	},
62		- closeModal(){
	118	+ closeModal() {
63	119	this.joinModal = !this.joinModal;
64		- }
65		- },
66		- watch: {
	120	+ this.$router.push({ path: '/', query: {} });
	121	+ },
	122	+ // 특수문자 검증
	123	+ onlyNumberAndEnglish(id) {
	124	+ return /^[A-Za-z0-9][A-Za-z0-9]*$/.test(id);
	125	+ },
67	126
68		-
	127	+ // 비밀번호 검증(8글자 이상, 영문, 숫자, 특수문자 사용)
	128	+ strongPassword(password) {
	129	+ return /^(?=.[A-Za-z])(?=.\d)(?=.[@$!%#?&])[A-Za-z\d@$!%*#?&]{8,}$/.test(password);
	130	+ },
69	131	},
	132	+ watch: {},
70	133	computed: {},
71	134	components: {
72		- SvgIcon
	135	+ SvgIcon,
73	136	},
74	137	mounted() {
75		-
	138	+ //쿠키 존재 유무 확인
	139	+ if ($cookies.get('JSESSIONID') != null) {
	140	+ this.$router.push('/main.page');
	141	+ } else {
	142	+ this.$router.push('/join.page');
	143	+ }
76	144	},
77	145	};
78	146	</script>
...	...	@@ -85,62 +153,60 @@
85	153	}
86	154
87	155	.view-wrap {
88		-
89	156	background-color: var(--color-white);
90	157	width: 30%;
91	158	border-radius: 2rem;
92	159	padding: 50px 60px;
93	160	box-shadow: 5px 5px 10px #33333336;
94		-
95	161	}
96	162
97	163	.content-wrap .container {
98	164	flex-direction: row;
99	165	}
100	166
101		-.content-wrap>li {
	167	+.content-wrap > li {
102	168	padding: 2rem 0;
103	169	}
104	170
105		-.content-wrap>li>a {
	171	+.content-wrap > li > a {
106	172	padding: 0 0 1rem 0;
107	173	font-size: 1.5rem;
108	174	}
109	175
110		-input[type="password"]{
	176	+input[type='password'] {
111	177	min-width: 100px;
112	178	padding: 5px 10px;
113	179	border: 1px solid #eee;
114	180	border-radius: 5px;
115	181	font-size: 1.3rem;
116	182	}
117		-input[type="text"]{
	183	+input[type='text'] {
118	184	margin-left: 0px;
119	185	}
120	186
121		-.join-button{
	187	+.join-button {
122	188	padding: 1rem 0;
123	189	margin-left: 0px;
124	190	}
125		-.join-button.active{
	191	+.join-button.active {
126	192	display: block;
127	193	}
128		-.join-modal{
	194	+.join-modal {
129	195	position: fixed;
130	196	top: 50%;
131	197	left: 50%;
132		- transform: translate(-50%,-50%);
	198	+ transform: translate(-50%, -50%);
133	199	width: 100%;
134	200	height: 100%;
135	201	padding: 0px !important;
136		-background-color: rgba(0, 0, 0, 0.256);
	202	+ background-color: rgba(0, 0, 0, 0.256);
137	203	}
138	204
139		-.modal-fillter{
	205	+.modal-fillter {
140	206	position: absolute;
141	207	top: 50%;
142	208	left: 50%;
143		- transform: translate(-50%,-50%);
	209	+ transform: translate(-50%, -50%);
144	210	width: 30%;
145	211	height: 30%;
146	212	background-color: var(--color-white);
...	...	@@ -148,9 +214,5 @@
148	214	text-align: center;
149	215	padding: 4rem;
150	216	border-radius: 2rem;
151		-
152		-
153	217	}
154		-
155		-
156	218	</style>

...	...	@@ -8,13 +8,24 @@
8	8	<div class="login-zone">
9	9	<div class="input-wrap">
10	10	<div class="inputContainer">
11		- <input required="" class="customInput" type="text" v-model="userLogin.user_id"
12		- @keyup.enter="handleEnterKey">
	11	+ <input
	12	+ required=""
	13	+ class="customInput"
	14	+ type="text"
	15	+ v-model="userLogin.user_id"
	16	+ @keyup.enter="handleEnterKey"
	17	+ />
13	18	<label class="inputLabel">ID</label>
14	19	<div class="inputUnderline"></div>
15	20	</div>
16	21	<div class="inputContainer">
17		- <input required="" class="customInput" type="password" v-model="userLogin.user_password" @keyup.enter="handleEnterKey">
	22	+ <input
	23	+ required=""
	24	+ class="customInput"
	25	+ type="password"
	26	+ v-model="userLogin.user_password"
	27	+ @keyup.enter="handleEnterKey"
	28	+ />
18	29	<label class="inputLabel">PASSWORD</label>
19	30	<div class="inputUnderline"></div>
20	31	</div>
...	...	@@ -22,7 +33,7 @@
22	33	<div class="found-zone flex justify-center">
23	34	<router-link to="">아이디찾기</router-link>
24	35	<router-link to="">비밀번호 찾기</router-link>
25		- <router-link to="/register.page">회원가입</router-link>
	36	+ <router-link to="/join.page">회원가입</router-link>
26	37	</div>
27	38	</div>
28	39	<button class="blue-btn large-btn" @click="login()">로그인</button>
...	...	@@ -32,8 +43,8 @@
32	43	</template>
33	44
34	45	<script>
35		-import axios from "axios";
36		-import vueCookie from "vue-cookies";
	46	+import axios from 'axios';
	47	+import vueCookie from 'vue-cookies';
37	48
38	49	export default {
39	50	data() {
...	...	@@ -55,54 +66,54 @@
55	66	// 아이디를 입력하지 않았을 경우
56	67	// 공백만 입력하였을 경우
57	68	// 특수문자가 입력되었을 경우
58		- if (vm.userLogin.user_id == null \|\| vm.userLogin.user_id.replace(/\s/gi, '') == '' \|\| special_pattern.test(vm.userLogin.user_id) == true) {
59		- alert("아이디를 입력해주시기 바랍니다.");
	69	+ if (
	70	+ vm.userLogin.user_id == null \|\|
	71	+ vm.userLogin.user_id.replace(/\s/gi, '') == '' \|\|
	72	+ special_pattern.test(vm.userLogin.user_id) == true
	73	+ ) {
	74	+ alert('아이디를 입력해주시기 바랍니다.');
60	75	return;
61	76	}
62	77
63	78	// 비밀번호를 입력하지 않았을 경우
64	79	// 공백만 입력하였을 경우
65	80	if (vm.userLogin.user_password == null \|\| vm.userLogin.user_password.replace(/\s/gi, '') == '') {
66		- alert("비밀번호를 입력해주시기 바랍니다.");
	81	+ alert('비밀번호를 입력해주시기 바랍니다.');
67	82	return;
68	83	}
69	84
70	85	axios({
71	86	url: '/login.json',
72	87	method: 'post',
73		- headers: { "Content-Type": "application/json; charset=UTF-8" },
	88	+ headers: { 'Content-Type': 'application/json; charset=UTF-8' },
74	89	data: vm.userLogin,
75	90	})
76	91	.then(function (response) {
77		- console.log("login - response", response.data);
	92	+ console.log('login - response', response.data);
78	93	if (response.data > 0) {
79	94	vm.$router.go();
80	95	vm.$router.push({ path: '/main.page', query: {} });
81	96	} else {
82		- alert("로그인 실패하였습니다.\n\n아이디와 비밀번호를 다시 입력해주시기 바랍니다.");
	97	+ alert('로그인 실패하였습니다.\n\n아이디와 비밀번호를 다시 입력해주시기 바랍니다.');
83	98	return;
84		-
85	99	}
86	100	})
87	101	.catch(function (error) {
88		- console.log("login - error", error);
89		- alert("로그인에 오류가 발생하였습니다.");
	102	+ console.log('login - error', error);
	103	+ alert('로그인에 오류가 발생하였습니다.');
90	104	});
91	105	},
92	106	handleEnterKey: function () {
93	107	this.login();
94		- }
	108	+ },
95	109	},
96		- watch: {
97		-
98		-
99		- },
	110	+ watch: {},
100	111	computed: {},
101	112	components: {},
102	113	mounted() {
103	114	console.log('main mounted');
104	115	// 쿠키에 JSESSIONID 키 값이 존재한다면 메인페이지로 이동
105		- if (vueCookie.get("JSESSIONID") != null) {
	116	+ if (vueCookie.get('JSESSIONID') != null) {
106	117	this.$router.push({ path: '/main.page', query: {} });
107	118	}
108	119	},
...	...	@@ -128,56 +139,54 @@
128	139	margin-bottom: 50px;
129	140	}
130	141
131		-.logo>img {
	142	+.logo > img {
132	143	display: block;
133	144	margin: 0 auto;
134	145	}
135	146	.inputContainer {
136		- position: relative;
137		- margin-bottom: 40px;
	147	+ position: relative;
	148	+ margin-bottom: 40px;
138	149	}
139	150
140		-.inputContainer:last-child{
	151	+.inputContainer:last-child {
141	152	margin-bottom: 0;
142	153	}
143	154
144	155	.customInput {
145		- width: 100%;
146		- padding: 10px;
147		- font-size: 13px;
148		- background-color: transparent;
149		- border: none;
150		- outline: none;
151		- transition: border-color 0.3s ease;
	156	+ width: 100%;
	157	+ padding: 10px;
	158	+ font-size: 13px;
	159	+ background-color: transparent;
	160	+ border: none;
	161	+ outline: none;
	162	+ transition: border-color 0.3s ease;
152	163	}
153		-
154	164
155	165	.inputLabel {
156		- position: absolute;
157		- top: 0;
158		- left: 0;
159		- pointer-events: none;
160		- padding: 5px;
161		- font-size: 13px;
162		- color: #eee;
163		- transform: translateY(-80%);
	166	+ position: absolute;
	167	+ top: 0;
	168	+ left: 0;
	169	+ pointer-events: none;
	170	+ padding: 5px;
	171	+ font-size: 13px;
	172	+ color: #eee;
	173	+ transform: translateY(-80%);
164	174	}
165	175
166		-
167	176	.inputUnderline {
168		- position: absolute;
169		- bottom: 0;
170		- left: 0;
171		- width: 100%;
172		- height: 2px;
173		- background-color: #eee;
	177	+ position: absolute;
	178	+ bottom: 0;
	179	+ left: 0;
	180	+ width: 100%;
	181	+ height: 2px;
	182	+ background-color: #eee;
174	183	}
175	184
176	185	.found-zone {
177	186	padding: 20px 0;
178	187	}
179	188
180		-.found-zone>a {
	189	+.found-zone > a {
181	190	font-size: 1.4rem;
182	191	padding: 0 10px;
183	192	}
...	...	@@ -185,4 +194,5 @@
185	194	.login-page .blue-btn {
186	195	margin-left: 0;
187	196	padding: 10px 0;
188		-}</style>
	197	+}
	198	+</style>

Delete comment