이용자 정보 화면 스타일 적용
This commit is contained in:
현성필
@@ -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 {
|
||||
font-size: 16px;
|
||||
font-weight: $font-weight-regular;
|
||||
|
||||
@@ -1128,6 +1128,10 @@ input[type="checkbox"]:checked + .custom-checkbox {
|
||||
&::placeholder {
|
||||
color: $text-light;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: #E2E8F0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
|
||||
@@ -1,119 +1,107 @@
|
||||
<!doctype html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_base_layout}">
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout/kjbank_title_layout}">
|
||||
<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="register-header">
|
||||
<h1>이용자 상세</h1>
|
||||
<p class="header-description">
|
||||
이용자의 상세 정보를 확인할 수 있습니다.
|
||||
</p>
|
||||
<div class="common-title-bar common-title-bar--simple">
|
||||
<h3>이용자 정보</h3>
|
||||
</div>
|
||||
|
||||
<section class="user-detail-container">
|
||||
|
||||
<!-- User Information -->
|
||||
<div class="detail-section">
|
||||
<h2 class="section-title">기본 정보</h2>
|
||||
<div class="detail-grid">
|
||||
|
||||
<!-- Email -->
|
||||
<div class="detail-item full-width">
|
||||
<label class="detail-label">
|
||||
<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 class="register-form-container">
|
||||
<div class="register-form">
|
||||
<!-- Email -->
|
||||
<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.maskedEmailAddr}" class="form-input input-readonly info-value-box" disabled="disabled">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="detail-actions">
|
||||
<a th:href="@{/users}" class="btn btn-secondary">
|
||||
<i class="fas fa-list"></i> 목록으로
|
||||
</a>
|
||||
<!-- Name -->
|
||||
<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.maskedUserName}" class="form-input input-readonly info-value-box" disabled="disabled">
|
||||
</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">
|
||||
<script>
|
||||
|
||||
</script>
|
||||
</th:block>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user