Commit @dbcc46fef1c907f54b68bb2e89e8fee8e3d3624a

류윤주 2023-11-28

231128 류윤주 사용자 관리 비밀번호 수정 모달 추가

@dbcc46fef1c907f54b68bb2e89e8fee8e3d3624a

7366e72

dbcc46f

client/resources/css/Main.css

--- client/resources/css/Main.css

+++ client/resources/css/Main.css


   width: 500px;
   height: auto;
   background-color: #fff;
-  padding: 30px;
+  padding: 30px 60px;
   position: fixed;
   top: 50%;
   left: 50%;

 }
 
 .pwchange-div p {
-  font-size: 1.5rem;
-  padding: 1rem 0;
+  font-size: 2rem;
+  padding: 3rem 0;
   font-weight: 700;
+  text-align: center;
 }
 
 .pwchange-div ul > li {

7366e72

dbcc46f

client/resources/css/admin.css

--- client/resources/css/admin.css

+++ client/resources/css/admin.css


 .logo-img,.business-card{
   width: 100%;
   height: 200px;
-  background-color: #333;
 }
 
 .logo-img > img,.business-card>img{

   max-width: 100%;
   height: 100%;
 }
+.keyword-grid{
+  display: grid;
+  grid-template-columns: 1fr 1fr  1fr;
+  gap: 10px;
+}
 
 /* 팝업 */
 .period {

7366e72

dbcc46f

client/views/pages/admin/user/CompanySelectOne.vue

--- client/views/pages/admin/user/CompanySelectOne.vue

+++ client/views/pages/admin/user/CompanySelectOne.vue


                     <div class="company-zone">
                         <div class="company-grid">
                             <div class="logo-img">
-                                <img :src="'http://localhost:8088' + logoFile.file_path + '/' + logoFile.file_nm + '.' + logoFile.file_extn_nm" alt="">
+                                <img :src="'http://localhost:8088' + logoFile.file_path + '/' + logoFile.file_nm + '.' + logoFile.file_extn_nm"
+                                    alt="">
                             </div>
                             <table>
                                 <tbody>

                                     <tr>
                                         <td colspan="2">
                                             <p class="company-label">주소</p>
-                                            <p>[{{ company.company_zip }}] {{ company.company_addr }} {{ company.company_daddr }}</p>
+                                            <p>[{{ company.company_zip }}] {{ company.company_addr }} {{
+                                                company.company_daddr }}</p>
                                         </td>
                                     </tr>
                                     <tr>

                                     <tr>
                                         <td colspan="2">
                                             <p class="company-label">업체 키워드</p>
-                                            <!-- <p><span>키워드</span></p> -->
-                                            <p>
-                                                <span class="keyword" v-for="(keyword, index) in company.keyword.slice(1).split('#')"
+                                            <p class="keyword-grid">
+                                                <span class="keyword"
+                                                    v-for="(keyword, index) in company.keyword.slice(1).split('#')"
                                                     :key="index">
                                                     #{{ keyword }}
                                                 </span>

                                             <p class="company-label">회사소개서 첨부파일</p>
                                             <p>
                                                 <a style="font-size: 15px;" class="down-btn-1"
-                                                    :href="'http://localhost:8080' + proFile.file_path + '/' + proFile.file_nm + '.' + proFile.file_extn_nm" target='_blank' download>
+                                                    :href="'http://localhost:8080' + proFile.file_path + '/' + proFile.file_nm + '.' + proFile.file_extn_nm"
+                                                    target='_blank' download>
                                                     {{ proFile.real_file_nm }}
                                                 </a>
                                             </p>

                     <div class="user-zone">
                         <div class="user-grid">
                             <div class="business-card">
-                                <img :src="'http://localhost:8080' + cardFile.file_path + '/' + cardFile.file_nm + '.' + cardFile.file_extn_nm" alt="">
+                                <img :src="'http://localhost:8080' + cardFile.file_path + '/' + cardFile.file_nm + '.' + cardFile.file_extn_nm"
+                                    alt="">
                             </div>
                             <div class="user grid">
                                 <div>

                                 </div>
                                 <div>
                                     <p class="label-title"><i class="fa-solid fa-user-group"></i> 비밀번호</p>
-                                    <button class="gray-btn">비밀번호 변경</button>
+                                    <button class="gray-btn" @click="openModal">비밀번호 변경</button>
                                 </div>
                                 <div>
                                     <p class="label-title"><i class="fa-solid fa-check-double"></i> 회원구분</p>

                                 </div>
                                 <div>
                                     <p class="label-title"><i class="fa-solid fa-heart"></i> 이름</p>
-                                    <input type="text" disabled v-model="user.user_nm"/>
+                                    <input type="text" disabled v-model="user.user_nm" />
                                 </div>
                                 <div>
                                     <p class="label-title"><i class="fa-solid fa-envelope"></i> 이메일</p>
-                                    <input type="text"  disabled v-model="user.user_eml"/>
+                                    <input type="text" disabled v-model="user.user_eml" />
                                 </div>
                                 <div>
                                     <p class="label-title"><i class="fa-solid fa-envelope"></i> 가입 날짜</p>
-                                    <input type="text"  disabled :value="yyyymmdd(user.user_reg_dt)"/>
+                                    <input type="text" disabled :value="yyyymmdd(user.user_reg_dt)" />
                                 </div>
                                 <div>
                                     <p class="label-title"><i class="fa-solid fa-envelope"></i> 승인 날짜</p>
-                                    <input type="text"  disabled :value="yyyymmdd(user.approval_dt)"/>
+                                    <input type="text" disabled :value="yyyymmdd(user.approval_dt)" />
                                 </div>
                             </div>
                         </div>

                 </div>
             </div>
         </div>
-
     </div>
+    <div v-show="showpwchange" class="pwchange2">
+            <div class="pwchange-div">
+                <p>비밀번호 변경하기</p>
+                <div>
+                    <ul>
+                        <li>
+                            <span>현재 비밀번호</span>
+                            <input type="password" v-model="presentPwd">
+                        </li>
+                        <li>
+                            <span>변경할 비밀번호</span>
+                            <input type="password" v-model="changePwd">
+                        </li>
+                        <li>
+                            <span>비밀번호 확인</span>
+                            <input type="password" v-model="changePwdCheck">
+                        </li>
+                    </ul>
+                </div>
+                <div class="btn-wrap">
+                    <button @click="closeModal" class="dark-gray-btn">이전</button>
+                    <button @click="checkPwd" class="blue-btn">변경하기</button>
+                </div>
+            </div>
+        </div>
 </template>
 <script>
 import axios from 'axios';

                 user_reg_dt: null,
             },
             route: useRoute(),
+            showpwchange: false,
         };
     },
     methods: {
+        openModal() {
+            this.showpwchange = true;
+        },
+
+        closeModal() {
+            this.showpwchange = false;
+        },
 
         //날짜 시,분,초 자르기
         yyyymmdd: function (date) {

             });
         },
 
-                        //리스트 페이지로 이동
-                        adminSelectListPage: function () {
-            this.$router.push({ path: '/adm/userSelectList.page', query: { } });
+        //리스트 페이지로 이동
+        adminSelectListPage: function () {
+            this.$router.push({ path: '/adm/userSelectList.page', query: {} });
         },
 
     },

7366e72

dbcc46f

client/views/pages/admin/user/UserSelectOne.vue

--- client/views/pages/admin/user/UserSelectOne.vue

+++ client/views/pages/admin/user/UserSelectOne.vue


                     </div>
                     <div>
                         <p class="label-title"><i class="fa-solid fa-user-group"></i> 비밀번호</p>
-                        <button class="gray-btn">비밀번호 변경</button>
+                        <button class="gray-btn" @click="openModal">비밀번호 변경</button>
                     </div>
                     <div>
                         <p class="label-title"><i class="fa-solid fa-check-double"></i> 회원구분</p>

                     </div>
                     <div>
                         <p class="label-title"><i class="fa-solid fa-user-group"></i> 비밀번호</p>
-                        <button class="gray-btn">비밀번호 변경</button>
+                        <button class="gray-btn" @click="openModal">비밀번호 변경</button>
                     </div>
                     <div>
                         <p class="label-title"><i class="fa-solid fa-heart"></i> 이름</p>

             </div>
         </div>
 
+    </div>
+    <div v-show="showpwchange" class="pwchange2">
+        <div class="pwchange-div">
+            <p>비밀번호 변경하기</p>
+            <div>
+                <ul>
+                    <li>
+                        <span>현재 비밀번호</span>
+                        <input type="password" v-model="presentPwd">
+                    </li>
+                    <li>
+                        <span>변경할 비밀번호</span>
+                        <input type="password" v-model="changePwd">
+                    </li>
+                    <li>
+                        <span>비밀번호 확인</span>
+                        <input type="password" v-model="changePwdCheck">
+                    </li>
+                </ul>
+            </div>
+            <div class="btn-wrap">
+                <button @click="closeModal" class="dark-gray-btn">이전</button>
+                <button @click="checkPwd" class="blue-btn">변경하기</button>
+            </div>
+        </div>
     </div>
 </template>
 <script>

                 rgtr_id: null,
             },
             route: useRoute(),
+            showpwchange: false,
         };
     },
     methods: {
+        openModal() {
+            this.showpwchange = true;
+        },
+
+        closeModal() {
+            this.showpwchange = false;
+        },
         userSelectOne: function () {
             const vm = this;
             axios({

                 alert("관리자 상세보기 오류, 관리자에게 문의하세요.");
             })
         },
-                //리스트 페이지로 이동
+        //리스트 페이지로 이동
         adminSelectListPage: function () {
-            this.$router.push({ path: '/adm/userSelectList.page', query: { } });
+            this.$router.push({ path: '/adm/userSelectList.page', query: {} });
         },
     },
     watch: {},

     },
 };
 </script>
-<style scoped>
-
-</style>
+<style scoped></style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -2858,7 +2858,7 @@
2858	2858	width: 500px;
2859	2859	height: auto;
2860	2860	background-color: #fff;
2861		- padding: 30px;
	2861	+ padding: 30px 60px;
2862	2862	position: fixed;
2863	2863	top: 50%;
2864	2864	left: 50%;
...	...	@@ -2867,9 +2867,10 @@
2867	2867	}
2868	2868
2869	2869	.pwchange-div p {
2870		- font-size: 1.5rem;
2871		- padding: 1rem 0;
	2870	+ font-size: 2rem;
	2871	+ padding: 3rem 0;
2872	2872	font-weight: 700;
	2873	+ text-align: center;
2873	2874	}
2874	2875
2875	2876	.pwchange-div ul > li {

...	...	@@ -505,7 +505,6 @@
505	505	.logo-img,.business-card{
506	506	width: 100%;
507	507	height: 200px;
508		- background-color: #333;
509	508	}
510	509
511	510	.logo-img > img,.business-card>img{
...	...	@@ -513,6 +512,11 @@
513	512	max-width: 100%;
514	513	height: 100%;
515	514	}
	515	+.keyword-grid{
	516	+ display: grid;
	517	+ grid-template-columns: 1fr 1fr 1fr;
	518	+ gap: 10px;
	519	+}
516	520
517	521	/* 팝업 */
518	522	.period {

...	...	@@ -12,7 +12,8 @@
12	12	<div class="company-zone">
13	13	<div class="company-grid">
14	14	<div class="logo-img">
15		- <img :src="'http://localhost:8088' + logoFile.file_path + '/' + logoFile.file_nm + '.' + logoFile.file_extn_nm" alt="">
	15	+ <img :src="'http://localhost:8088' + logoFile.file_path + '/' + logoFile.file_nm + '.' + logoFile.file_extn_nm"
	16	+ alt="">
16	17	</div>
17	18	<table>
18	19	<tbody>
...	...	@@ -29,7 +30,8 @@
29	30	<tr>
30	31	<td colspan="2">
31	32	<p class="company-label">주소</p>
32		- <p>[{{ company.company_zip }}] {{ company.company_addr }} {{ company.company_daddr }}</p>
	33	+ <p>[{{ company.company_zip }}] {{ company.company_addr }} {{
	34	+ company.company_daddr }}</p>
33	35	</td>
34	36	</tr>
35	37	<tr>
...	...	@@ -45,9 +47,9 @@
45	47	<tr>
46	48	<td colspan="2">
47	49	<p class="company-label">업체 키워드</p>
48		- <!-- <p><span>키워드</span></p> -->
49		- <p>
50		- <span class="keyword" v-for="(keyword, index) in company.keyword.slice(1).split('#')"
	50	+ <p class="keyword-grid">
	51	+ <span class="keyword"
	52	+ v-for="(keyword, index) in company.keyword.slice(1).split('#')"
51	53	:key="index">
52	54	#{{ keyword }}
53	55	</span>
...	...	@@ -59,7 +61,8 @@
59	61	<p class="company-label">회사소개서 첨부파일</p>
60	62	<p>
61	63	<a style="font-size: 15px;" class="down-btn-1"
62		- :href="'http://localhost:8080' + proFile.file_path + '/' + proFile.file_nm + '.' + proFile.file_extn_nm" target='_blank' download>
	64	+ :href="'http://localhost:8080' + proFile.file_path + '/' + proFile.file_nm + '.' + proFile.file_extn_nm"
	65	+ target='_blank' download>
63	66	{{ proFile.real_file_nm }}
64	67	</a>
65	68	</p>
...	...	@@ -92,7 +95,8 @@
92	95	<div class="user-zone">
93	96	<div class="user-grid">
94	97	<div class="business-card">
95		- <img :src="'http://localhost:8080' + cardFile.file_path + '/' + cardFile.file_nm + '.' + cardFile.file_extn_nm" alt="">
	98	+ <img :src="'http://localhost:8080' + cardFile.file_path + '/' + cardFile.file_nm + '.' + cardFile.file_extn_nm"
	99	+ alt="">
96	100	</div>
97	101	<div class="user grid">
98	102	<div>
...	...	@@ -101,7 +105,7 @@
101	105	</div>
102	106	<div>
103	107	<p class="label-title"><i class="fa-solid fa-user-group"></i> 비밀번호</p>
104		- <button class="gray-btn">비밀번호 변경</button>
	108	+ <button class="gray-btn" @click="openModal">비밀번호 변경</button>
105	109	</div>
106	110	<div>
107	111	<p class="label-title"><i class="fa-solid fa-check-double"></i> 회원구분</p>
...	...	@@ -109,19 +113,19 @@
109	113	</div>
110	114	<div>
111	115	<p class="label-title"><i class="fa-solid fa-heart"></i> 이름</p>
112		- <input type="text" disabled v-model="user.user_nm"/>
	116	+ <input type="text" disabled v-model="user.user_nm" />
113	117	</div>
114	118	<div>
115	119	<p class="label-title"><i class="fa-solid fa-envelope"></i> 이메일</p>
116		- <input type="text" disabled v-model="user.user_eml"/>
	120	+ <input type="text" disabled v-model="user.user_eml" />
117	121	</div>
118	122	<div>
119	123	<p class="label-title"><i class="fa-solid fa-envelope"></i> 가입 날짜</p>
120		- <input type="text" disabled :value="yyyymmdd(user.user_reg_dt)"/>
	124	+ <input type="text" disabled :value="yyyymmdd(user.user_reg_dt)" />
121	125	</div>
122	126	<div>
123	127	<p class="label-title"><i class="fa-solid fa-envelope"></i> 승인 날짜</p>
124		- <input type="text" disabled :value="yyyymmdd(user.approval_dt)"/>
	128	+ <input type="text" disabled :value="yyyymmdd(user.approval_dt)" />
125	129	</div>
126	130	</div>
127	131	</div>
...	...	@@ -132,8 +136,32 @@
132	136	</div>
133	137	</div>
134	138	</div>
135		-
136	139	</div>
	140	+ <div v-show="showpwchange" class="pwchange2">
	141	+ <div class="pwchange-div">
	142	+ <p>비밀번호 변경하기</p>
	143	+ <div>
	144	+ <ul>
	145	+ <li>
	146	+ <span>현재 비밀번호</span>
	147	+ <input type="password" v-model="presentPwd">
	148	+ </li>
	149	+ <li>
	150	+ <span>변경할 비밀번호</span>
	151	+ <input type="password" v-model="changePwd">
	152	+ </li>
	153	+ <li>
	154	+ <span>비밀번호 확인</span>
	155	+ <input type="password" v-model="changePwdCheck">
	156	+ </li>
	157	+ </ul>
	158	+ </div>
	159	+ <div class="btn-wrap">
	160	+ <button @click="closeModal" class="dark-gray-btn">이전</button>
	161	+ <button @click="checkPwd" class="blue-btn">변경하기</button>
	162	+ </div>
	163	+ </div>
	164	+ </div>
137	165	</template>
138	166	<script>
139	167	import axios from 'axios';
...	...	@@ -182,9 +210,17 @@
182	210	user_reg_dt: null,
183	211	},
184	212	route: useRoute(),
	213	+ showpwchange: false,
185	214	};
186	215	},
187	216	methods: {
	217	+ openModal() {
	218	+ this.showpwchange = true;
	219	+ },
	220	+
	221	+ closeModal() {
	222	+ this.showpwchange = false;
	223	+ },
188	224
189	225	//날짜 시,분,초 자르기
190	226	yyyymmdd: function (date) {
...	...	@@ -268,9 +304,9 @@
268	304	});
269	305	},
270	306
271		- //리스트 페이지로 이동
272		- adminSelectListPage: function () {
273		- this.$router.push({ path: '/adm/userSelectList.page', query: { } });
	307	+ //리스트 페이지로 이동
	308	+ adminSelectListPage: function () {
	309	+ this.$router.push({ path: '/adm/userSelectList.page', query: {} });
274	310	},
275	311
276	312	},

...	...	@@ -15,7 +15,7 @@
15	15	</div>
16	16	<div>
17	17	<p class="label-title"><i class="fa-solid fa-user-group"></i> 비밀번호</p>
18		- <button class="gray-btn">비밀번호 변경</button>
	18	+ <button class="gray-btn" @click="openModal">비밀번호 변경</button>
19	19	</div>
20	20	<div>
21	21	<p class="label-title"><i class="fa-solid fa-check-double"></i> 회원구분</p>
...	...	@@ -45,7 +45,7 @@
45	45	</div>
46	46	<div>
47	47	<p class="label-title"><i class="fa-solid fa-user-group"></i> 비밀번호</p>
48		- <button class="gray-btn">비밀번호 변경</button>
	48	+ <button class="gray-btn" @click="openModal">비밀번호 변경</button>
49	49	</div>
50	50	<div>
51	51	<p class="label-title"><i class="fa-solid fa-heart"></i> 이름</p>
...	...	@@ -70,6 +70,31 @@
70	70	</div>
71	71	</div>
72	72
	73	+ </div>
	74	+ <div v-show="showpwchange" class="pwchange2">
	75	+ <div class="pwchange-div">
	76	+ <p>비밀번호 변경하기</p>
	77	+ <div>
	78	+ <ul>
	79	+ <li>
	80	+ <span>현재 비밀번호</span>
	81	+ <input type="password" v-model="presentPwd">
	82	+ </li>
	83	+ <li>
	84	+ <span>변경할 비밀번호</span>
	85	+ <input type="password" v-model="changePwd">
	86	+ </li>
	87	+ <li>
	88	+ <span>비밀번호 확인</span>
	89	+ <input type="password" v-model="changePwdCheck">
	90	+ </li>
	91	+ </ul>
	92	+ </div>
	93	+ <div class="btn-wrap">
	94	+ <button @click="closeModal" class="dark-gray-btn">이전</button>
	95	+ <button @click="checkPwd" class="blue-btn">변경하기</button>
	96	+ </div>
	97	+ </div>
73	98	</div>
74	99	</template>
75	100	<script>
...	...	@@ -102,9 +127,17 @@
102	127	rgtr_id: null,
103	128	},
104	129	route: useRoute(),
	130	+ showpwchange: false,
105	131	};
106	132	},
107	133	methods: {
	134	+ openModal() {
	135	+ this.showpwchange = true;
	136	+ },
	137	+
	138	+ closeModal() {
	139	+ this.showpwchange = false;
	140	+ },
108	141	userSelectOne: function () {
109	142	const vm = this;
110	143	axios({
...	...	@@ -139,9 +172,9 @@
139	172	alert("관리자 상세보기 오류, 관리자에게 문의하세요.");
140	173	})
141	174	},
142		- //리스트 페이지로 이동
	175	+ //리스트 페이지로 이동
143	176	adminSelectListPage: function () {
144		- this.$router.push({ path: '/adm/userSelectList.page', query: { } });
	177	+ this.$router.push({ path: '/adm/userSelectList.page', query: {} });
145	178	},
146	179	},
147	180	watch: {},
...	...	@@ -156,6 +189,4 @@
156	189	},
157	190	};
158	191	</script>
159		-<style scoped>
160		-
161		-</style>
	192	+<style scoped></style>

Delete comment