djb-eapim/eapim-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

이용자 정보 화면 스타일 적용

Browse Source
This commit is contained in:
현성필
2025-12-04 14:50:32 +09:00
parent 1991f7843f
commit 46f0388832
3 changed files with 115 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/sass/components/_apikey-common.scss
+19
View File
@@ -66,6 +66,25 @@ $apikey-border-color: #dadada;
} }
} }
&--simple {
background: none;
padding: 0 0 $spacing-md 0;
border-radius: 0;
border-bottom: 2px solid #212529;
margin-bottom: $spacing-xl;
h3 {
font-size: 22px;
font-weight: $font-weight-bold;
color: #212529;
margin: 0;
}
.required-badge {
display: none;
}
}
.common-subtitle { .common-subtitle {
font-size: 16px; font-size: 16px;
font-weight: $font-weight-regular; font-weight: $font-weight-regular;
src/main/resources/static/sass/pages/_apikey-register.scss
+4
View File
@@ -1128,6 +1128,10 @@ input[type="checkbox"]:checked + .custom-checkbox {
&::placeholder { &::placeholder {
color: $text-light; color: $text-light;
} }
&:disabled {
background-color: #E2E8F0;
}
} }
.form-textarea { .form-textarea {
src/main/resources/templates/views/apps/users/userDetail.html
+92 -104
View File
@@ -1,119 +1,107 @@
<!doctype html> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_base_layout}"> layout:decorate="~{layout/kjbank_title_layout}">
<body> <body>
<th:block layout:fragment="contentFragment"> <section layout:fragment="title">
<div class="page-title-banner">
<img th:src="@{/img/img_title_bg.png}" class="title-image">
<h1>이용자 관리</h1>
</div>
</section>
<section layout:fragment="contentFragment">
<div class="org-register-container">
<!-- Header --> <div class="common-title-bar common-title-bar--simple">
<div class="register-header"> <h3>이용자 정보</h3>
<h1>이용자 상세</h1>
<p class="header-description">
이용자의 상세 정보를 확인할 수 있습니다.
</p>
</div> </div>
<section class="user-detail-container"> <div class="register-form-container">
<div class="register-form">
<!-- User Information --> <!-- Email -->
<div class="detail-section"> <div class="form-row">
<h2 class="section-title">기본 정보</h2> <div class="form-label-wrapper label-offset">
<div class="detail-grid"> <span class="form-label-text">이메일 아이디</span>
</div>
<!-- Email --> <div class="form-field-wrapper">
<div class="detail-item full-width"> <input type="text" th:value="${user.maskedEmailAddr}" class="form-input input-readonly info-value-box" disabled="disabled">
<label class="detail-label"> </div>
<i class="fas fa-envelope"></i> 이메일 아이디
</label>
<div class="detail-value" th:text="${user.maskedEmailAddr}">
user@example.com
</div>
</div>
<!-- Name -->
<div class="detail-item">
<label class="detail-label">
<i class="fas fa-user"></i> 성명
</label>
<div class="detail-value" th:text="${user.maskedUserName}">
홍길동
</div>
</div>
<!-- Mobile -->
<div class="detail-item">
<label class="detail-label">
<i class="fas fa-mobile-alt"></i> 휴대폰 번호
</label>
<div class="detail-value" th:text="${user.maskedMobileNumber}">
010-****-****
</div>
</div>
<!-- Role -->
<div class="detail-item">
<label class="detail-label">
<i class="fas fa-shield-alt"></i> 권한
</label>
<div class="detail-value">
<span class="user-role-badge" th:if="${user.roleCode != null}">
<span th:text="#{${user.roleCode}}">권한</span>
</span>
</div>
</div>
<!-- Status -->
<div class="detail-item">
<label class="detail-label">
<i class="fas fa-info-circle"></i> 계정상태
</label>
<div class="detail-value">
<span class="status-indicator"
th:classappend="${user.userStatus.toString() == 'ACTIVE'} ? 'status-active' : 'status-inactive'">
<span class="status-dot"></span>
<span th:text="${user.userStatus.getDescription()}">활성화</span>
</span>
</div>
</div>
<!-- Created Date -->
<div class="detail-item">
<label class="detail-label">
<i class="fas fa-calendar-plus"></i> 가입일
</label>
<div class="detail-value" th:text="${#temporals.format(user.createdDate, 'yyyy.MM.dd')}">
2024.01.01
</div>
</div>
<!-- Last Login -->
<div class="detail-item">
<label class="detail-label">
<i class="fas fa-clock"></i> 마지막 로그인
</label>
<div class="detail-value" th:text="${#temporals.format(user.lastLoginDate, 'yyyy.MM.dd HH:mm:ss')}">
2024.01.01 12:00:00
</div>
</div>
</div>
</div> </div>
<!-- Action Buttons --> <!-- Name -->
<div class="detail-actions"> <div class="form-row">
<a th:href="@{/users}" class="btn btn-secondary"> <div class="form-label-wrapper label-offset">
<i class="fas fa-list"></i> 목록으로 <span class="form-label-text">성명</span>
</a> </div>
<div class="form-field-wrapper">
<input type="text" th:value="${user.maskedUserName}" class="form-input input-readonly info-value-box" disabled="disabled">
</div>
</div> </div>
</section> <!-- Mobile -->
<div class="form-row">
<div class="form-label-wrapper label-offset">
<span class="form-label-text">휴대폰 번호</span>
</div>
<div class="form-field-wrapper">
<input type="text" th:value="${user.maskedMobileNumber}" class="form-input input-readonly info-value-box" disabled="disabled">
</div>
</div>
</th:block> <!-- Role -->
<div class="form-row">
<div class="form-label-wrapper label-offset">
<span class="form-label-text">권한</span>
</div>
<div class="form-field-wrapper">
<input type="text" th:if="${user.roleCode != null}" th:value="#{${user.roleCode}}" class="form-input input-readonly info-value-box" disabled="disabled">
</div>
</div>
</body> <!-- Status -->
<div class="form-row">
<div class="form-label-wrapper label-offset">
<span class="form-label-text">계정상태</span>
</div>
<div class="form-field-wrapper">
<input type="text" th:value="${user.userStatus.getDescription()}" class="form-input input-readonly info-value-box" disabled="disabled">
</div>
</div>
<!-- Created Date -->
<div class="form-row">
<div class="form-label-wrapper label-offset">
<span class="form-label-text">가입일</span>
</div>
<div class="form-field-wrapper">
<input type="text" th:value="${#temporals.format(user.createdDate, 'yyyy.MM.dd')}" class="form-input input-readonly info-value-box" disabled="disabled">
</div>
</div>
<!-- Last Login -->
<div class="form-row">
<div class="form-label-wrapper label-offset">
<span class="form-label-text">마지막 로그인</span>
</div>
<div class="form-field-wrapper">
<input type="text" th:value="${#temporals.format(user.lastLoginDate, 'yyyy.MM.dd HH:mm:ss')}" class="form-input input-readonly info-value-box" disabled="disabled">
</div>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="form-actions">
<div class="form-actions-buttons">
<button type="button" class="btn btn-submit btn-secondary" th:onclick="|location.href='@{/users}'|">목록</button>
</div>
</div>
</div>
</section>
<th:block layout:fragment="contentScript"> <th:block layout:fragment="contentScript">
<script> <script>
</script> </script>
</th:block> </th:block>
</body>
</html>