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-01 17:03:08 +09:00
parent b4f9555cb8
commit e3f2694a20
11 changed files with 139 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/main.css
+54 -27
View File
@@ -3800,9 +3800,7 @@ select.form-control {
justify-content: center;
gap: 16px;
flex-wrap: wrap;
margin-top: 64px;
padding-top: 40px;
border-top: 1px solid #E2E8F0;
}
@media (max-width: 768px) {
.form-actions, .form-actions-center {
@@ -3842,6 +3840,60 @@ select.form-control {
margin-top: 40px;
padding-top: 24px;
}
.form-actions--with-withdrawal {
position: relative;
justify-content: center;
}
.form-actions--with-withdrawal .withdrawal-link {
position: absolute;
left: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 3px;
width: 150px;
padding: 8px;
background: #E5F2F8;
border-radius: 12px;
color: #5F666C;
font-size: 16px;
font-weight: 400;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
}
.form-actions--with-withdrawal .withdrawal-link:hover {
background: rgb(208.9090909091, 231.9545454545, 242.5909090909);
}
.form-actions--with-withdrawal .withdrawal-link img {
width: 22px;
height: 22px;
object-fit: contain;
}
@media (max-width: 768px) {
.form-actions--with-withdrawal .withdrawal-link {
position: static;
width: 100%;
order: 1;
}
}
.form-actions--with-withdrawal .form-actions-buttons {
display: flex;
gap: 16px;
}
@media (max-width: 768px) {
.form-actions--with-withdrawal .form-actions-buttons {
flex-direction: column-reverse;
width: 100%;
gap: 8px;
}
}
@media (max-width: 768px) {
.form-actions--with-withdrawal {
flex-direction: column;
gap: 16px;
}
}
.modal-backdrop {
position: fixed;
@@ -8465,31 +8517,6 @@ select.form-control {
width: 100%;
}
.withdrawal-section {
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid #E2E8F0;
text-align: left;
}
.withdrawal-section .withdrawal-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: #64748B;
font-size: 14px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
}
.withdrawal-section .withdrawal-link:hover {
color: #FF6B6B;
text-decoration: underline;
}
.withdrawal-section .withdrawal-link::before {
content: ">";
font-size: 12px;
}
.register-title-bar {
padding: 18px 45px;
display: flex;
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/css/main.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/css/main.min.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/img/btn_withdrawal.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

src/main/resources/static/sass/components/_forms.scss
+58 -2
View File
@@ -581,9 +581,7 @@ select.form-control {
justify-content: center;
gap: $spacing-md;
flex-wrap: wrap;
margin-top: $spacing-4xl;
padding-top: $spacing-2xl;
border-top: 1px solid $border-gray;
@include respond-to('sm') {
flex-direction: column-reverse;
@@ -622,6 +620,64 @@ select.form-control {
margin-top: $spacing-2xl;
padding-top: $spacing-lg;
}
// Modifier: with withdrawal link layout
// [회원탈퇴(좌측)] <-- 공백 --> [버튼][버튼](가운데)]
&--with-withdrawal {
position: relative;
justify-content: center;
.withdrawal-link {
position: absolute;
left: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 3px;
width: 150px;
padding: $spacing-sm;
background: #E5F2F8;
border-radius: $border-radius-lg;
color: #5F666C;
font-size: $font-size-base;
font-weight: $font-weight-regular;
text-decoration: none;
cursor: pointer;
transition: $transition-base;
&:hover {
background: darken(#E5F2F8, 5%);
}
img {
width: 22px;
height: 22px;
object-fit: contain;
}
@include respond-to('sm') {
position: static;
width: 100%;
order: 1;
}
}
.form-actions-buttons {
display: flex;
gap: $spacing-md;
@include respond-to('sm') {
flex-direction: column-reverse;
width: 100%;
gap: $spacing-sm;
}
}
@include respond-to('sm') {
flex-direction: column;
gap: $spacing-md;
}
}
}
// Centered form actions (alias)
src/main/resources/static/sass/pages/_mypage.scss
+1 -28
View File
@@ -16,32 +16,5 @@
}
// -----------------------------------------------------------------------------
// Withdrawal Section - Account deactivation/withdrawal area
// Withdrawal Link styles moved to components/_forms.scss (.form-actions--with-withdrawal)
// -----------------------------------------------------------------------------
.withdrawal-section {
margin-top: $spacing-3xl;
padding-top: $spacing-xl;
border-top: 1px solid $border-gray;
text-align: left;
.withdrawal-link {
display: inline-flex;
align-items: center;
gap: $spacing-xs;
color: $text-gray;
font-size: $font-size-sm;
text-decoration: none;
cursor: pointer;
transition: $transition-base;
&:hover {
color: $accent-orange;
text-decoration: underline;
}
&::before {
content: '>';
font-size: $font-size-xs;
}
}
}
src/main/resources/templates/views/apps/mypage/components/commonUserInfo.html
+4 -4
View File
@@ -15,7 +15,7 @@
<div class="form-row">
<div class="form-label-wrapper label-offset">
<span class="form-label-text required">성명</span>
<span class="form-label-text">성명</span> <span class="required-badge">필수</span>
</div>
<div class="form-field-wrapper">
<input type="text" th:value="${userName}" id="userName" name="userName" class="form-input"
@@ -24,7 +24,7 @@
</div>
<div class="form-row">
<div class="form-label-wrapper label-offset">
<span class="form-label-text required">휴대폰 번호</span>
<span class="form-label-text">휴대폰 번호</span> <span class="required-badge">필수</span>
</div>
<div class="form-field-wrapper input-with-button" th:with="parts=${#strings.arraySplit(mobileNumber, '-')}">
<div class="compound-input">
@@ -54,7 +54,7 @@
</div>
<div class="form-row" id="newPhoneNumberContainer" style="display: none;">
<div class="form-label-wrapper label-offset">
<span class="form-label-text required">새 휴대폰 번호</span>
<span class="form-label-text">새 휴대폰 번호</span> <span class="required-badge">필수</span>
</div>
<div class="form-field-wrapper input-with-button">
<div class="compound-input">
@@ -82,7 +82,7 @@
</div>
<div class="form-row" id="authNumberContainer" style="display: none;">
<div class="form-label-wrapper label-offset">
<span class="form-label-text required">인증번호 입력</span>
<span class="form-label-text">인증번호 입력</span> <span class="required-badge">필수</span>
</div>
<div class="form-field-wrapper input-with-button">
<div class="auth-input-group">
src/main/resources/templates/views/apps/mypage/updateCorporateManager.html
+3 -4
View File
@@ -215,13 +215,12 @@
<!-- Action Buttons -->
</form>
</div>
<div class="form-actions">
<div class="form-actions form-actions--with-withdrawal">
<a class="withdrawal-link"><img th:src="@{/img/btn_withdrawal.png}" alt="회원탈퇴">회원탈퇴</a>
<div class="form-actions-buttons">
<button type="button" class="btn btn-submit btn-secondary" th:onclick="|location.href='@{/}'|">취소</button>
<button type="button" class="btn btn-submit btn-primary">수정 적용</button>
</div>
<!-- Withdrawal Button -->
<div class="withdrawal-section">
<a class="withdrawal-link">회원탈퇴</a>
</div>
</div>
</section>
src/main/resources/templates/views/apps/mypage/updateCorporateUser.html
+3 -5
View File
@@ -32,14 +32,12 @@
</form>
</div>
<!-- Action Buttons -->
<div class="form-actions">
<div class="form-actions form-actions--with-withdrawal">
<a class="withdrawal-link"><img th:src="@{/img/btn_withdrawal.png}" alt="회원탈퇴">회원탈퇴</a>
<div class="form-actions-buttons">
<button type="button" class="btn btn-submit btn-secondary" th:onclick="|location.href='@{/}'|">취소</button>
<button type="button" class="btn btn-submit btn-primary submit-btn">수정 적용</button>
</div>
<!-- Withdrawal Button -->
<div class="withdrawal-section">
<a class="withdrawal-link">회원탈퇴</a>
</div>
</div>
</section>
src/main/resources/templates/views/apps/mypage/updatePersonalUser.html
+5 -7
View File
@@ -29,17 +29,15 @@
</div>
</form>
</div>
<input type="hidden" name="finalMobileNumber"/>
<!-- Action Buttons -->
<div class="form-actions">
<div class="form-actions form-actions--with-withdrawal">
<a class="withdrawal-link"><img th:src="@{/img/btn_withdrawal.png}" alt="회원탈퇴">회원탈퇴</a>
<div class="form-actions-buttons">
<button type="button" class="btn btn-submit btn-secondary" th:onclick="|location.href='@{/}'|">취소</button>
<button type="button" class="btn btn-submit btn-primary submit-btn">수정</button>
</div>
<input type="hidden" name="finalMobileNumber"/>
<!-- Withdrawal Button -->
<div class="withdrawal-section">
<a class="withdrawal-link">회원탈퇴</a>
</div>
</div>
</section>