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-11-17 13:24:09 +09:00
parent ac59d4109c
commit f35470814d
25 changed files with 337 additions and 500 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/main.css
+256 -346
View File
File diff suppressed because it is too large Load Diff
src/main/resources/static/css/main.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/sass/abstracts/_variables.scss
+2 -2
View File
@@ -5,8 +5,8 @@
// Color Palette - Vibrant and Modern // Color Palette - Vibrant and Modern
// Primary colors // Primary colors
$primary-blue: #4B9BFF; // Bright blue (main brand color) $primary-blue: #0049b4; // 광주은행 블루
$secondary-blue: #2E7FF7; // Deep blue $secondary-blue: #c3dfea; // Deep blue
$accent-cyan: #00D4FF; // Sky blue accent $accent-cyan: #00D4FF; // Sky blue accent
$accent-yellow: #FFD93D; // Yellow accent $accent-yellow: #FFD93D; // Yellow accent
$accent-orange: #FF6B6B; // Orange accent $accent-orange: #FF6B6B; // Orange accent
src/main/resources/static/sass/components/_buttons.scss
+4 -5
View File
@@ -31,7 +31,7 @@
// Button variants // Button variants
&-primary { &-primary {
background: $gradient-primary; background: $primary-blue;
color: $white; color: $white;
box-shadow: $shadow-md; box-shadow: $shadow-md;
@@ -46,9 +46,8 @@
} }
&-secondary { &-secondary {
background: $white; background: $secondary-blue;
color: $primary-blue; color: #6e7780;
border: 2px solid $primary-blue;
&:hover { &:hover {
background: $light-bg; background: $light-bg;
@@ -475,4 +474,4 @@
i { i {
font-size: 14px; font-size: 14px;
} }
} }
src/main/resources/static/sass/components/_tables.scss
+25 -25
View File
@@ -332,30 +332,30 @@
} }
} }
button { //button {
padding: $spacing-sm $spacing-lg; // padding: $spacing-sm $spacing-lg;
background: $gradient-primary; // background: $gradient-primary;
color: $white; // color: $white;
border: none; // border: none;
border-radius: $border-radius-md; // border-radius: $border-radius-md;
font-size: $font-size-sm; // font-size: $font-size-sm;
font-weight: $font-weight-medium; // font-weight: $font-weight-medium;
cursor: pointer; // cursor: pointer;
transition: $transition-base; // transition: $transition-base;
white-space: nowrap; // white-space: nowrap;
//
&:hover { // &:hover {
transform: translateY(-2px); // transform: translateY(-2px);
box-shadow: $shadow-md; // box-shadow: $shadow-md;
} // }
//
&:active { // &:active {
transform: translateY(0); // transform: translateY(0);
} // }
//
i { // i {
margin-right: $spacing-xs; // margin-right: $spacing-xs;
} // }
} //}
} }
} }
src/main/resources/static/sass/pages/_org-register.scss
+3 -3
View File
@@ -102,14 +102,14 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: $spacing-lg $spacing-xl; padding: $spacing-lg $spacing-xl;
background: linear-gradient(135deg, $primary-blue 0%, $secondary-blue 100%); background: #EDF9FE;
border-radius: $border-radius-md; border-radius: $border-radius-md;
margin-bottom: $spacing-xl; margin-bottom: $spacing-xl;
h3 { h3 {
font-size: $font-size-lg; font-size: $font-size-lg;
font-weight: $font-weight-semibold; font-weight: $font-weight-regular;
color: $white; color: #515961;
margin: 0; margin: 0;
} }
src/main/resources/static/sass/pages/_user-management.scss
-72
View File
@@ -50,36 +50,6 @@
gap: $spacing-md; gap: $spacing-md;
} }
.btn-create-user,
.btn-create-user-large {
display: inline-flex;
align-items: center;
gap: $spacing-sm;
padding: 12px $spacing-xl;
background: $gradient-primary;
color: $white;
font-size: $font-size-base;
font-weight: $font-weight-semibold;
border: none;
border-radius: $border-radius-lg;
cursor: pointer;
transition: $transition-base;
box-shadow: $shadow-md;
&:hover {
transform: translateY(-2px);
box-shadow: $shadow-lg;
}
&:active {
transform: translateY(0);
}
.btn-icon {
font-size: $font-size-lg;
}
}
.btn-create-user-large { .btn-create-user-large {
padding: $spacing-md $spacing-2xl; padding: $spacing-md $spacing-2xl;
font-size: $font-size-md; font-size: $font-size-md;
@@ -344,16 +314,6 @@
} }
} }
&.btn-secondary {
background-color: $text-gray;
color: $white;
&:hover {
background-color: darken($text-gray, 10%);
box-shadow: $shadow-sm;
}
}
&.btn-danger { &.btn-danger {
background-color: $accent-orange; background-color: $accent-orange;
color: $white; color: $white;
@@ -622,35 +582,3 @@
flex-direction: column; flex-direction: column;
} }
} }
.btn-secondary {
display: inline-flex;
align-items: center;
gap: $spacing-sm;
padding: 12px $spacing-xl;
background-color: $white;
color: $text-dark;
font-size: $font-size-base;
font-weight: $font-weight-medium;
border: 2px solid $border-gray;
border-radius: $border-radius-lg;
text-decoration: none;
cursor: pointer;
transition: $transition-base;
&:hover {
background-color: $gray-bg;
border-color: $primary-blue;
color: $primary-blue;
transform: translateY(-2px);
box-shadow: $shadow-sm;
}
&:active {
transform: translateY(0);
}
i {
font-size: $font-size-base;
}
}
src/main/resources/templates/views/apps/commission/commissionManage.html
+1 -1
View File
@@ -53,7 +53,7 @@
</span> </span>
<span class="btnBox" style="margin-left: auto;"> <span class="btnBox" style="margin-left: auto;">
<button type="button" class="btn btn-primary" onclick="loadData()"> <button type="button" class="btn btn-primary" onclick="loadData()">
<span class="glyphicon glyphicon-search"></span>&nbsp;<span>조회</span> <span class="fa fa-search"></span><span>조회</span>
</button> </button>
<button type="button" id="printBtn" class="btn btn-secondary" style="margin-left: 5px; display:none;" onclick="printCommission()"> <button type="button" id="printBtn" class="btn btn-secondary" style="margin-left: 5px; display:none;" onclick="printCommission()">
<span>청구서 출력</span> <span>청구서 출력</span>
src/main/resources/templates/views/apps/community/mainFaqList.html
+1 -1
View File
@@ -30,7 +30,7 @@
<input type="text" <input type="text"
th:field="*{searchWrd}" th:field="*{searchWrd}"
placeholder="질문 또는 답변 내용으로 검색"> placeholder="질문 또는 답변 내용으로 검색">
<button type="button" onclick="fn_search_article()"> <button type="button" class="btn btn-primary" onclick="fn_search_article()">
<i class="fas fa-search"></i> <i class="fas fa-search"></i>
<span>검색</span> <span>검색</span>
</button> </button>
src/main/resources/templates/views/apps/community/mainInquiryList.html
+2 -2
View File
@@ -30,7 +30,7 @@
name="searchWrd" name="searchWrd"
th:value="${search.searchWrd}" th:value="${search.searchWrd}"
placeholder="제목 또는 내용으로 검색"> placeholder="제목 또는 내용으로 검색">
<button type="button" onclick="fn_search_inquiry()"> <button type="button" class="btn btn-primary" onclick="fn_search_inquiry()">
<i class="fas fa-search"></i> <i class="fas fa-search"></i>
<span>검색</span> <span>검색</span>
</button> </button>
@@ -92,7 +92,7 @@
<!-- New Inquiry Button --> <!-- New Inquiry Button -->
<div class="inquiry-actions"> <div class="inquiry-actions">
<a th:href="@{/inquiry/new}" class="action-btn-new"> <a th:href="@{/inquiry/new}" class="btn btn-primary">
<i class="fas fa-pen"></i> <i class="fas fa-pen"></i>
<span>질문하기</span> <span>질문하기</span>
</a> </a>
src/main/resources/templates/views/apps/community/mainNoticeList.html
+1 -1
View File
@@ -28,7 +28,7 @@
name="searchSubjectOrDetail" name="searchSubjectOrDetail"
th:value="${search.searchSubjectOrDetail}" th:value="${search.searchSubjectOrDetail}"
placeholder="제목 또는 내용으로 검색"> placeholder="제목 또는 내용으로 검색">
<button type="button" onclick="fn_search_notice()"> <button type="button" class="btn btn-primary" onclick="fn_search_notice()">
<i class="fas fa-search"></i> <i class="fas fa-search"></i>
<span>검색</span> <span>검색</span>
</button> </button>
src/main/resources/templates/views/apps/mypage/apiKeyList.html
+6 -6
View File
@@ -16,10 +16,10 @@
<div class="apikey-actions"> <div class="apikey-actions">
<button sec:authorize="hasRole('ROLE_API_KEY_REQUEST')" <button sec:authorize="hasRole('ROLE_API_KEY_REQUEST')"
type="button" type="button"
class="btn-create-app" class="btn btn-primary"
id="requestApiKey"> id="requestApiKey">
<span class="btn-icon">➕</span> <i class="fas fa-plus"></i>
앱 생성 <span>첫 앱 생성하기</span>
</button> </button>
</div> </div>
</div> </div>
@@ -129,10 +129,10 @@
<p>새로운 앱을 생성하여 API를 사용해보세요.</p> <p>새로운 앱을 생성하여 API를 사용해보세요.</p>
<button sec:authorize="hasRole('ROLE_API_KEY_REQUEST')" <button sec:authorize="hasRole('ROLE_API_KEY_REQUEST')"
type="button" type="button"
class="btn-create-app-large" class="btn btn-primary"
id="requestApiKeyEmpty"> id="requestApiKeyEmpty">
<span class="btn-icon">➕</span> <i class="fas fa-plus"></i>
첫 앱 생성하기 <span>첫 앱 생성하기</span>
</button> </button>
</div> </div>
src/main/resources/templates/views/apps/mypage/components/commonUserInfo.html
+3 -3
View File
@@ -49,7 +49,7 @@
maxlength="4" maxlength="4"
disabled="disabled"> disabled="disabled">
</div> </div>
<button type="button" class="org-btn org-btn-secondary change_mobile_phone" id="changePhoneBtn">변경</button> <button type="button" class="btn btn-secondary change_mobile_phone" id="changePhoneBtn">변경</button>
</div> </div>
</div> </div>
<div class="org-form-group" id="newPhoneNumberContainer" style="display: none;"> <div class="org-form-group" id="newPhoneNumberContainer" style="display: none;">
@@ -75,7 +75,7 @@
maxlength="4" pattern="\d*" inputmode="numeric" placeholder="뒷자리"/> maxlength="4" pattern="\d*" inputmode="numeric" placeholder="뒷자리"/>
<input type="hidden" value="" name="mobileNumber" id="mobileNumber"> <input type="hidden" value="" name="mobileNumber" id="mobileNumber">
</div> </div>
<button type="button" class="org-btn org-btn-primary btn_auth"> <button type="button" class="btn btn-primary btn_auth">
인증번호 받기 인증번호 받기
</button> </button>
</div> </div>
@@ -91,7 +91,7 @@
placeholder="SMS 인증번호 6자리"> placeholder="SMS 인증번호 6자리">
<span class="org-timer" id="certify_time">03:00</span> <span class="org-timer" id="certify_time">03:00</span>
</div> </div>
<button type="button" class="org-btn org-btn-primary btn_verify_auth"> <button type="button" class="btn btn-primary btn_verify_auth">
인증번호 확인 인증번호 확인
</button> </button>
</div> </div>
src/main/resources/templates/views/apps/mypage/orgTransfer.html
+2 -2
View File
@@ -58,8 +58,8 @@
<!-- Action Buttons --> <!-- Action Buttons -->
<div class="org-action-buttons"> <div class="org-action-buttons">
<button type="button" class="org-btn org-btn-secondary" id="cancelButton" th:onclick="|location.href='@{/mypage}'|">취소</button> <button type="button" class="btn btn-secondary" id="cancelButton" th:onclick="|location.href='@{/mypage}'|">취소</button>
<button type="button" class="org-btn org-btn-primary" id="submitButton">법인회원 전환</button> <button type="button" class="btn btn-primary" id="submitButton">법인회원 전환</button>
</div> </div>
</form> </form>
</div> </div>
src/main/resources/templates/views/apps/mypage/passwordChange.html
+2 -2
View File
@@ -51,8 +51,8 @@
</div> </div>
<div class="org-action-buttons"> <div class="org-action-buttons">
<button type="button" class="org-btn org-btn-secondary" onclick="history.back()">취소</button> <button type="button" class="btn btn-secondary" onclick="history.back()">취소</button>
<button type="submit" class="org-btn org-btn-primary">변경</button> <button type="submit" class="btn btn-primary">변경</button>
</div> </div>
</form> </form>
</div> </div>
src/main/resources/templates/views/apps/mypage/passwordChangeEntry.html
+2 -2
View File
@@ -31,8 +31,8 @@
</div> </div>
<div class="org-action-buttons"> <div class="org-action-buttons">
<button type="button" class="org-btn org-btn-secondary" th:onclick="|location.href='@{/}'|">취소</button> <button type="button" class="btn btn-secondary" th:onclick="|location.href='@{/}'|">취소</button>
<button type="submit" class="org-btn org-btn-primary">확인</button> <button type="submit" class="btn btn-primary">확인</button>
</div> </div>
</form> </form>
</div> </div>
src/main/resources/templates/views/apps/mypage/updateCorporateManager.html
+3 -3
View File
@@ -214,8 +214,8 @@
<!-- Action Buttons --> <!-- Action Buttons -->
<div class="org-action-buttons"> <div class="org-action-buttons">
<button type="button" class="org-btn org-btn-secondary" th:onclick="|location.href='@{/}'|">취소</button> <button type="button" class="btn btn-secondary" th:onclick="|location.href='@{/}'|">취소</button>
<button type="button" class="org-btn org-btn-primary">수정 적용</button> <button type="button" class="btn btn-primary">수정 적용</button>
</div> </div>
</form> </form>
@@ -573,7 +573,7 @@
}); });
// 수정 버튼 이벤트 // 수정 버튼 이벤트
const submitButton = document.querySelector('.org-btn-primary:not(.btn_add2)'); const submitButton = document.querySelector('.btn-primary:not(.btn_add2)');
if (submitButton) { if (submitButton) {
submitButton.addEventListener('click', function(e) { submitButton.addEventListener('click', function(e) {
e.preventDefault(); e.preventDefault();
src/main/resources/templates/views/apps/mypage/updateCorporateUser.html
+3 -3
View File
@@ -30,8 +30,8 @@
<!-- Action Buttons --> <!-- Action Buttons -->
<div class="org-action-buttons"> <div class="org-action-buttons">
<button type="button" class="org-btn org-btn-secondary" th:onclick="|location.href='@{/}'|">취소</button> <button type="button" class="btn btn-secondary" th:onclick="|location.href='@{/}'|">취소</button>
<button type="button" class="org-btn org-btn-primary submit-btn">수정 적용</button> <button type="button" class="btn btn-primary submit-btn">수정 적용</button>
</div> </div>
</form> </form>
@@ -64,7 +64,7 @@
const form = document.getElementById('updateForm'); const form = document.getElementById('updateForm');
// 수정 버튼 이벤트 // 수정 버튼 이벤트
const submitButton = document.querySelector('.org-btn-primary.submit-btn'); const submitButton = document.querySelector('.btn-primary.submit-btn');
if (submitButton) { if (submitButton) {
submitButton.addEventListener('click', function (e) { submitButton.addEventListener('click', function (e) {
e.preventDefault(); e.preventDefault();
src/main/resources/templates/views/apps/mypage/updatePersonalUser.html
+4 -4
View File
@@ -22,15 +22,15 @@
<!-- Corporate Transfer Button --> <!-- Corporate Transfer Button -->
<div class="org-info-notice" style="margin-top: 32px;"> <div class="org-info-notice" style="margin-top: 32px;">
<button type="button" class="org-btn org-btn-secondary btn_business" style="width: 100%;"> <button type="button" class="btn btn-secondary btn_business" style="width: 100%;">
법인회원 전환 법인회원 전환
</button> </button>
</div> </div>
<!-- Action Buttons --> <!-- Action Buttons -->
<div class="org-action-buttons"> <div class="org-action-buttons">
<button type="button" class="org-btn org-btn-secondary" th:onclick="|location.href='@{/}'|">취소</button> <button type="button" class="btn btn-secondary" th:onclick="|location.href='@{/}'|">취소</button>
<button type="button" class="org-btn org-btn-primary submit-btn">수정</button> <button type="button" class="btn btn-primary submit-btn">수정</button>
</div> </div>
</form> </form>
@@ -65,7 +65,7 @@
const form = document.getElementById('updateForm'); const form = document.getElementById('updateForm');
// 수정 버튼 이벤트 // 수정 버튼 이벤트
const submitButton = document.querySelector('.org-btn-primary.submit-btn'); const submitButton = document.querySelector('.btn-primary.submit-btn');
if (submitButton) { if (submitButton) {
submitButton.addEventListener('click', function (e) { submitButton.addEventListener('click', function (e) {
e.preventDefault(); e.preventDefault();
src/main/resources/templates/views/apps/register/components/commonUserInfoForm.html
+1 -1
View File
@@ -27,7 +27,7 @@
<input type="hidden" id="loginId" name="loginId" th:value="${loginId}"> <input type="hidden" id="loginId" name="loginId" th:value="${loginId}">
<input type="hidden" name="registrationType" th:value="${registrationType}"/> <input type="hidden" name="registrationType" th:value="${registrationType}"/>
<input type="hidden" id="registrationScenario" name="registrationScenario" value="new"/> <input type="hidden" id="registrationScenario" name="registrationScenario" value="new"/>
<button type="button" class="org-btn org-btn-check btn_check_email" <button type="button" class="btn org-btn-check btn_check_email"
th:classappend="${isInvited ? 'hidden' : ''}"> th:classappend="${isInvited ? 'hidden' : ''}">
중복체크 중복체크
</button> </button>
src/main/resources/templates/views/apps/register/components/newUserInfoForm.html
+2 -2
View File
@@ -40,7 +40,7 @@
th:placeholder="#{portal.Register.phone2}"> th:placeholder="#{portal.Register.phone2}">
</div> </div>
<input type="hidden" th:field="*{mobileNumber}" id="mobileNumber"> <input type="hidden" th:field="*{mobileNumber}" id="mobileNumber">
<button type="button" class="org-btn org-btn-check btn_auth"> <button type="button" class="btn org-btn-check btn_auth">
인증번호 받기 인증번호 받기
</button> </button>
<div id="mobile-validation" class="org-validation-message"></div> <div id="mobile-validation" class="org-validation-message"></div>
@@ -59,7 +59,7 @@
inputmode="numeric" class="org-form-input" th:placeholder="#{ncrdRegister.validate.authNumber}" required> inputmode="numeric" class="org-form-input" th:placeholder="#{ncrdRegister.validate.authNumber}" required>
<span class="org-timer" id="certify_time">03:00</span> <span class="org-timer" id="certify_time">03:00</span>
</div> </div>
<button type="button" class="org-btn org-btn-check btn_verify_auth"> <button type="button" class="btn org-btn-check btn_verify_auth">
인증번호 확인 인증번호 확인
</button> </button>
<div id="authNumber-validation" class="org-validation-message"></div> <div id="authNumber-validation" class="org-validation-message"></div>
src/main/resources/templates/views/apps/register/components/orgUserInfoForm.html
+1 -1
View File
@@ -16,7 +16,7 @@
<input type="text" id="domain" class="org-form-input" <input type="text" id="domain" class="org-form-input"
placeholder="도메인"> placeholder="도메인">
</div> </div>
<button type="button" class="org-btn org-btn-check btn_check_email"> <button type="button" class="btn org-btn-check btn_check_email">
중복체크 중복체크
</button> </button>
</div> </div>
src/main/resources/templates/views/apps/register/orgUserRegister.html
+2 -2
View File
@@ -55,8 +55,8 @@
<!-- Action Buttons --> <!-- Action Buttons -->
<div class="org-action-buttons"> <div class="org-action-buttons">
<button type="button" class="org-btn org-btn-secondary" id="cancelButton">취소</button> <button type="button" class="btn btn-secondary" id="cancelButton">취소</button>
<button type="button" class="org-btn org-btn-primary btn_register">가입신청</button> <button type="button" class="btn btn-primary btn_register">가입신청</button>
</div> </div>
</form> </form>
src/main/resources/templates/views/apps/register/userRegister.html
+2 -2
View File
@@ -60,8 +60,8 @@
<!-- Action Buttons --> <!-- Action Buttons -->
<div class="org-action-buttons"> <div class="org-action-buttons">
<button type="button" class="org-btn org-btn-secondary" id="cancelButton">취소</button> <button type="button" class="btn btn-secondary" id="cancelButton">취소</button>
<button type="button" class="org-btn org-btn-primary btn_register">가입신청</button> <button type="button" class="btn btn-primary btn_register">가입신청</button>
</div> </div>
</form> </form>
src/main/resources/templates/views/apps/users/userList.html
+8 -8
View File
@@ -13,9 +13,9 @@
<h2>이용자 목록</h2> <h2>이용자 목록</h2>
</div> </div>
<div class="user-management-actions"> <div class="user-management-actions">
<button type="button" class="btn-create-user" id="addUserBtn"> <button type="button" class="btn btn-primary" id="addUserBtn">
<span class="btn-icon">➕</span> <i class="fas fa-plus"></i>
이용자 추가 <span>이용자 추가</span>
</button> </button>
</div> </div>
</div> </div>
@@ -84,7 +84,7 @@
th:data-user-name="${user.maskedUserName}"> th:data-user-name="${user.maskedUserName}">
활성화 활성화
</button> </button>
<button type="button" class="btn-action btn-sm btn-danger cancel_invitation" <button type="button" class="btn btn-sm btn-secondary cancel_invitation"
th:if="${user.userStatus.toString() == 'PENDING'}" th:if="${user.userStatus.toString() == 'PENDING'}"
th:data-user-id="${user.id}" th:data-user-id="${user.id}"
th:data-user-email="${user.maskedEmailAddr}"> th:data-user-email="${user.maskedEmailAddr}">
@@ -120,7 +120,7 @@
</div> </div>
<div class="col-actions"> <div class="col-actions">
<div class="user-action-buttons"> <div class="user-action-buttons">
<button type="button" class="btn-action btn-sm btn-danger cancel_invitation" <button type="button" class="btn btn-sm btn-secondary cancel_invitation"
th:data-user-id="${user.id}" th:data-user-id="${user.id}"
th:data-user-email="${user.maskedEmailAddr}"> th:data-user-email="${user.maskedEmailAddr}">
초대취소 초대취소
@@ -136,9 +136,9 @@
<div class="empty-icon">👥</div> <div class="empty-icon">👥</div>
<h3>등록된 이용자가 없습니다</h3> <h3>등록된 이용자가 없습니다</h3>
<p>새로운 이용자를 추가하여 시작하세요.</p> <p>새로운 이용자를 추가하여 시작하세요.</p>
<button type="button" class="btn-create-user-large" id="addUserBtnEmpty"> <button type="button" class="btn btn-primary" id="addUserBtnEmpty">
<span class="btn-icon">➕</span> <i class="fas fa-plus"></i>
첫 이용자 추가하기 <span>첫 이용자 추가하기</span>
</button> </button>
</div> </div>