Commit @002638a9b58de416a167a2b9ffa93eb9bc6ea5e0

최정임 03-26

250326 최정임 비밀번호 피드백 추가

@002638a9b58de416a167a2b9ffa93eb9bc6ea5e0

9759c5a

002638a

client/resources/css/user/main.css

--- client/resources/css/user/main.css

+++ client/resources/css/user/main.css


         span{font-size: 22px; font-family: "Pretendard-SB";}
         img{margin-right: 10px; object-fit: contain;}
     }
-    .current-btn {
+    .current-banner {
         background-image: url(../../images/direct-btn-bg.png);
             background-repeat: no-repeat;
             position: absolute;
             width: 375px;
             height: 247px;
             top: 0;
-            button{
+            div{
                 position: absolute;
                 top: 40px;
                 right: 60px;

9759c5a

002638a

client/resources/css/user/sub.css

--- client/resources/css/user/sub.css

+++ client/resources/css/user/sub.css


     }
 }
 
-.invalid-feedback {
+.invalid-feedback.border {
     display: flex;
     align-items: center;
     gap: 4px;
-    background-color: #fbf1f2;
-    border: 1px solid #ce3e48;
+    background-color: #fbf1f2 !important;
+    border: 1px solid #ce3e48 !important;
     border-radius: 20px;
     padding: 8px 24px;
-    margin-left: 20px;
+    margin-left: 20px !important;
 
     span {
-        font-size: 14px;
+        font-size: 14px !important;
         color: #e22d2d;
-        font-family: "Pretendard-EL";
+        font-family: "Pretendard-EL" !important;
     }
 }
 

9759c5a

002638a

client/views/pages/main/Main.vue

--- client/views/pages/main/Main.vue

+++ client/views/pages/main/Main.vue


           <li class="line" v-if="idx < icons.length - 1"></li>
         </template>
       </ul>
-      <div class="current-btn"><button><span>기록물 현황</span><img :src="direct" alt=""></button></div>
+      <div class="current-banner"><div><span>기록물 현황</span><img :src="direct" alt=""></div></div>
     </div>
   </div>
   <div class="new-update w1500 mb-50">

9759c5a

002638a

client/views/pages/user/MemberManagement.vue

--- client/views/pages/user/MemberManagement.vue

+++ client/views/pages/user/MemberManagement.vue


                                 <option value="name">이름</option>
                             </select>
                         </div>
-                       <div class="wfull" style="height: 100%;"> <input type="text"  v-model="searchText"></div>
+                        <div class="wfull" style="height: 100%;"> <input type="text" v-model="searchText"></div>
                         <button class="search-btn"><img :src="searchicon" alt=""></button>
                     </div>
-                   
-                    
+
+
                 </div>
                 <table class="mb-10">
-                        <thead>
-                            <tr>
-                                <th>아이디</th>
-                                <th>이름</th>
-                                <th>권한</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr v-for="item in items" :key="index" :class="{'delete-member': item.delete}">
-                                <!-- Category 칼럼 -->
-                                <td>
-                                    {{ item.id }}
-                                </td>
-                                <!-- Checkbox 칼럼 -->
-                                <td>
-                                    {{ item.name }}
-                                </td>
-                                <td>
-                                    {{ item.gownhan }}
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
+                    <thead>
+                        <tr>
+                            <th>아이디</th>
+                            <th>이름</th>
+                            <th>권한</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="item in items" :key="index" :class="{ 'delete-member': item.delete }">
+                            <!-- Category 칼럼 -->
+                            <td>
+                                {{ item.id }}
+                            </td>
+                            <!-- Checkbox 칼럼 -->
+                            <td>
+                                {{ item.name }}
+                            </td>
+                            <td>
+                                {{ item.gownhan }}
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
             </div>
             <div class="righi-con wfull">
                 <div class="btn-group-small flex-end mb-20">

                         </dd>
                         <div class="hr"></div>
                         <dd>
-                            <label for="pw" class="require">비밀번호</label>
-                            <div class="wfull"><input type="text" id="pw" value=""></div>
+                            <label for="pw" class="require">비밀번호</label><input type="text" id="pw" value="">
+                            <div class="invalid-feedback border">
+                                <img :src="erroricon" alt="">
+                                <span>영문, 숫자, 특수문자를 최소 한 가지씩 조합하고 8자 이상 ~ 20자 이내로 입력해주세요.</span>
+                            </div>
 
                         </dd>
                         <div class="hr"></div>
                         <dd>
                             <label for="pwcheck" class="require">비밀번호 확인</label>
-                            <div class="wfull"><input type="text" id="pwcheck" value=""></div>
+                            <input type="text" id="pwcheck" value="">
+                            <div class="invalid-feedback border">
+                                <img :src="erroricon" alt="">
+                                <span>비밀번호가 일치하지 않습니다.</span>
+                            </div>
 
                         </dd>
                         <div class="hr"></div>

     data() {
         return {
             items: [
-                { id: 'user1', name: '카테고리 1', gownhan:'관리자',  delete: false },
-                { id: 'user2', name: '카테고리 2', gownhan:'사용자', delete: false },
-                { id: 'user3', name: '카테고리 3', gownhan:'사용자', delete: true },
+                { id: 'user1', name: '카테고리 1', gownhan: '관리자', delete: false },
+                { id: 'user2', name: '카테고리 2', gownhan: '사용자', delete: false },
+                { id: 'user3', name: '카테고리 3', gownhan: '사용자', delete: true },
             ],
             isModalOpen: false,
             // Define the image sources

9759c5a

002638a

client/views/pages/user/MyInfo.vue

--- client/views/pages/user/MyInfo.vue

+++ client/views/pages/user/MyInfo.vue


                     <label for="pw">새 비밀번호</label>
                     <input type="password" id="pw" placeholder="새 비밀번호를 입력하세요." v-model="userPassword.newPassword"
                         @input="validatePassword">
-                    <div class="invalid-feedback" v-if="!isPasswordValid && userPassword.newPassword !== null">
+                    <div class="invalid-feedback border" v-if="!isPasswordValid && userPassword.newPassword !== null">
                         <img :src="erroricon" alt="">
                         <span>영문, 숫자, 특수문자를 최소 한 가지씩 조합하고 8자 이상 ~ 20자 이내로 입력해주세요.</span>
                     </div>

                 <dd>
                     <label for="pwCheck">새 비밀번호 확인</label>
                     <input type="password" id="pwCheck" placeholder="새 비밀번호를 입력하세요." v-model="newPasswordCheck">
-                    <div class="invalid-feedback" v-if="newPasswordCheck !== null && !passwordsMatch">
+                    <div class="invalid-feedback border" v-if="newPasswordCheck !== null && !passwordsMatch">
                         <img :src="erroricon" alt=""><span>비밀번호가 일치하지 않습니다.</span>
                     </div>
                 </dd>

Add a comment

Open 0
Closed 0

List

...	...	@@ -211,14 +211,14 @@
211	211	span{font-size: 22px; font-family: "Pretendard-SB";}
212	212	img{margin-right: 10px; object-fit: contain;}
213	213	}
214		- .current-btn {
	214	+ .current-banner {
215	215	background-image: url(../../images/direct-btn-bg.png);
216	216	background-repeat: no-repeat;
217	217	position: absolute;
218	218	width: 375px;
219	219	height: 247px;
220	220	top: 0;
221		- button{
	221	+ div{
222	222	position: absolute;
223	223	top: 40px;
224	224	right: 60px;

...	...	@@ -283,20 +283,20 @@
283	283	}
284	284	}
285	285
286		-.invalid-feedback {
	286	+.invalid-feedback.border {
287	287	display: flex;
288	288	align-items: center;
289	289	gap: 4px;
290		- background-color: #fbf1f2;
291		- border: 1px solid #ce3e48;
	290	+ background-color: #fbf1f2 !important;
	291	+ border: 1px solid #ce3e48 !important;
292	292	border-radius: 20px;
293	293	padding: 8px 24px;
294		- margin-left: 20px;
	294	+ margin-left: 20px !important;
295	295
296	296	span {
297		- font-size: 14px;
	297	+ font-size: 14px !important;
298	298	color: #e22d2d;
299		- font-family: "Pretendard-EL";
	299	+ font-family: "Pretendard-EL" !important;
300	300	}
301	301	}
302	302

...	...	@@ -50,7 +50,7 @@
50	50	<li class="line" v-if="idx < icons.length - 1"></li>
51	51	</template>
52	52	</ul>
53		- <div class="current-btn"><button><span>기록물 현황</span><img :src="direct" alt=""></button></div>
	53	+ <div class="current-banner"><div><span>기록물 현황</span><img :src="direct" alt=""></div></div>
54	54	</div>
55	55	</div>
56	56	<div class="new-update w1500 mb-50">

...	...	@@ -39,7 +39,7 @@
39	39	<label for="pw">새 비밀번호</label>
40	40	<input type="password" id="pw" placeholder="새 비밀번호를 입력하세요." v-model="userPassword.newPassword"
41	41	@input="validatePassword">
42		- <div class="invalid-feedback" v-if="!isPasswordValid && userPassword.newPassword !== null">
	42	+ <div class="invalid-feedback border" v-if="!isPasswordValid && userPassword.newPassword !== null">
43	43	<img :src="erroricon" alt="">
44	44	<span>영문, 숫자, 특수문자를 최소 한 가지씩 조합하고 8자 이상 ~ 20자 이내로 입력해주세요.</span>
45	45	</div>
...	...	@@ -48,7 +48,7 @@
48	48	<dd>
49	49	<label for="pwCheck">새 비밀번호 확인</label>
50	50	<input type="password" id="pwCheck" placeholder="새 비밀번호를 입력하세요." v-model="newPasswordCheck">
51		- <div class="invalid-feedback" v-if="newPasswordCheck !== null && !passwordsMatch">
	51	+ <div class="invalid-feedback border" v-if="newPasswordCheck !== null && !passwordsMatch">
52	52	<img :src="erroricon" alt=""><span>비밀번호가 일치하지 않습니다.</span>
53	53	</div>
54	54	</dd>

...	...	@@ -23,36 +23,36 @@
23	23	<option value="name">이름</option>
24	24	</select>
25	25	</div>
26		- <div class="wfull" style="height: 100%;"> <input type="text" v-model="searchText"></div>
	26	+ <div class="wfull" style="height: 100%;"> <input type="text" v-model="searchText"></div>
27	27	<button class="search-btn"><img :src="searchicon" alt=""></button>
28	28	</div>
29		-
30		-
	29	+
	30	+
31	31	</div>
32	32	<table class="mb-10">
33		- <thead>
34		- <tr>
35		- <th>아이디</th>
36		- <th>이름</th>
37		- <th>권한</th>
38		- </tr>
39		- </thead>
40		- <tbody>
41		- <tr v-for="item in items" :key="index" :class="{'delete-member': item.delete}">
42		- <!-- Category 칼럼 -->
43		- <td>
44		- {{ item.id }}
45		- </td>
46		- <!-- Checkbox 칼럼 -->
47		- <td>
48		- {{ item.name }}
49		- </td>
50		- <td>
51		- {{ item.gownhan }}
52		- </td>
53		- </tr>
54		- </tbody>
55		- </table>
	33	+ <thead>
	34	+ <tr>
	35	+ <th>아이디</th>
	36	+ <th>이름</th>
	37	+ <th>권한</th>
	38	+ </tr>
	39	+ </thead>
	40	+ <tbody>
	41	+ <tr v-for="item in items" :key="index" :class="{ 'delete-member': item.delete }">
	42	+ <!-- Category 칼럼 -->
	43	+ <td>
	44	+ {{ item.id }}
	45	+ </td>
	46	+ <!-- Checkbox 칼럼 -->
	47	+ <td>
	48	+ {{ item.name }}
	49	+ </td>
	50	+ <td>
	51	+ {{ item.gownhan }}
	52	+ </td>
	53	+ </tr>
	54	+ </tbody>
	55	+ </table>
56	56	</div>
57	57	<div class="righi-con wfull">
58	58	<div class="btn-group-small flex-end mb-20">
...	...	@@ -75,14 +75,21 @@
75	75	</dd>
76	76	<div class="hr"></div>
77	77	<dd>
78		- <label for="pw" class="require">비밀번호</label>
79		- <div class="wfull"><input type="text" id="pw" value=""></div>
	78	+ <label for="pw" class="require">비밀번호</label><input type="text" id="pw" value="">
	79	+ <div class="invalid-feedback border">
	80	+ <img :src="erroricon" alt="">
	81	+ <span>영문, 숫자, 특수문자를 최소 한 가지씩 조합하고 8자 이상 ~ 20자 이내로 입력해주세요.</span>
	82	+ </div>
80	83
81	84	</dd>
82	85	<div class="hr"></div>
83	86	<dd>
84	87	<label for="pwcheck" class="require">비밀번호 확인</label>
85		- <div class="wfull"><input type="text" id="pwcheck" value=""></div>
	88	+ <input type="text" id="pwcheck" value="">
	89	+ <div class="invalid-feedback border">
	90	+ <img :src="erroricon" alt="">
	91	+ <span>비밀번호가 일치하지 않습니다.</span>
	92	+ </div>
86	93
87	94	</dd>
88	95	<div class="hr"></div>
...	...	@@ -135,9 +142,9 @@
135	142	data() {
136	143	return {
137	144	items: [
138		- { id: 'user1', name: '카테고리 1', gownhan:'관리자', delete: false },
139		- { id: 'user2', name: '카테고리 2', gownhan:'사용자', delete: false },
140		- { id: 'user3', name: '카테고리 3', gownhan:'사용자', delete: true },
	145	+ { id: 'user1', name: '카테고리 1', gownhan: '관리자', delete: false },
	146	+ { id: 'user2', name: '카테고리 2', gownhan: '사용자', delete: false },
	147	+ { id: 'user3', name: '카테고리 3', gownhan: '사용자', delete: true },
141	148	],
142	149	isModalOpen: false,
143	150	// Define the image sources

Delete comment