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-09 16:36:00 +09:00
parent 38aa9ed8ff
commit 7991d4a325
7 changed files with 197 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/main.css
+78 -16
View File
@@ -9825,42 +9825,72 @@ select.form-control {
line-height: 1;
}
@media (max-width: 576px) {
@media (max-width: 768px) {
.signup-selection-page {
background: #ebfbff;
min-height: calc(100vh - 44px);
padding: 40px 20px;
margin-top: 0;
margin-bottom: 0;
border-radius: 0;
}
.signup-selection-container {
max-width: 100%;
padding: 0 20px;
padding: 0;
}
.signup-selection-card {
padding: 0;
}
.signup-logo {
width: 70px;
height: 70px;
width: 64px;
height: 64px;
margin-bottom: 24px;
}
.signup-message {
font-size: 18px;
margin-bottom: 32px;
font-size: 14px;
font-weight: 400;
color: #212529;
margin-bottom: 80px;
line-height: 26px;
}
.signup-buttons {
max-width: 100%;
max-width: 335px;
gap: 24px;
margin-bottom: 48px;
margin-bottom: 80px;
}
.signup-btn {
height: 70px;
font-size: 18px;
height: 44px;
font-size: 16px;
font-weight: 700;
border-radius: 8px;
padding: 8px 12px;
justify-content: center;
gap: 8px;
}
.signup-btn .signup-btn-icon {
width: 22px;
height: 26px;
.signup-btn svg {
width: 14px;
height: 16px;
flex-shrink: 0;
}
.signup-btn span {
text-align: center;
}
.signup-btn:hover {
transform: none;
box-shadow: none;
opacity: 0.9;
}
.signup-navigation {
gap: 20px;
gap: 12px;
}
.signup-navigation .signup-nav-link {
font-size: 14px;
font-weight: 400;
color: #515961;
}
.signup-navigation .signup-nav-link,
.signup-navigation .signup-nav-separator {
font-size: 14px;
color: #515961;
}
}
.corporate-transfer-section {
@@ -14158,9 +14188,41 @@ input[type=checkbox]:checked + .custom-checkbox {
}
@media (max-width: 768px) {
.org-action-buttons {
flex-direction: column;
flex-direction: row;
gap: 21px;
margin-top: 40px;
padding-top: 32px;
border-top: none;
}
.org-action-buttons .btn {
flex: 1;
width: auto;
min-width: 144px;
height: 40px;
padding: 8px 10px;
font-size: 14px;
font-weight: 700;
border-radius: 8px;
}
.org-action-buttons .btn-secondary,
.org-action-buttons .btn-outline-secondary {
background: #e5e7eb;
color: #5f666c;
border: none;
}
.org-action-buttons .btn-secondary:hover,
.org-action-buttons .btn-outline-secondary:hover {
background: #d1d5db;
color: #5f666c;
}
.org-action-buttons .btn-primary {
background: #0049b4;
color: #ffffff;
border: none;
}
.org-action-buttons .btn-primary:hover {
background: #003d99;
color: #ffffff;
}
}
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/img/user_icon.svg
+2 -5
View File
@@ -1,6 +1,3 @@
<svg width="56" height="58" viewBox="0 0 56 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="56" height="57.9649" rx="28" fill="#0049B4"/>
<path
d="M28 29.9014C36.8365 29.9014 44 36.7565 44 45.2129C43.9999 45.8892 43.4517 46.4373 42.7754 46.4375H42.665C41.9886 46.4375 41.4406 45.8893 41.4404 45.2129C41.4404 38.1095 35.4227 32.3506 28 32.3506C20.5773 32.3506 14.5596 38.1095 14.5596 45.2129C14.5594 45.8893 14.0114 46.4375 13.335 46.4375H13.2246C12.5483 46.4374 12.0001 45.8892 12 45.2129C12 36.7565 19.1634 29.9014 28 29.9014ZM28.6406 11.5274C33.5891 11.5274 37.6006 15.366 37.6006 20.1016C37.6006 24.8372 33.5891 28.6758 28.6406 28.6758C23.6922 28.6757 19.6807 24.8371 19.6807 20.1016C19.6807 15.3661 23.6923 11.5275 28.6406 11.5274ZM28.6406 13.9766C25.1061 13.9767 22.2412 16.7191 22.2412 20.1016C22.2412 23.4841 25.1061 26.2265 28.6406 26.2266C32.1752 26.2266 35.041 23.4842 35.041 20.1016C35.041 16.719 32.1752 13.9766 28.6406 13.9766Z"
fill="white"/>
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.33301 8.4209C11.3829 8.4209 14.6659 11.5629 14.666 15.4385C14.666 15.7484 14.4154 15.9998 14.1055 16H14.0547C13.7446 16 13.4932 15.7485 13.4932 15.4385C13.4931 12.183 10.7349 9.54395 7.33301 9.54395C3.93135 9.5442 1.1739 12.1831 1.17383 15.4385C1.17383 15.7485 0.922359 16 0.612305 16H0.561523C0.251638 15.9998 0 15.7484 0 15.4385C7.26983e-05 11.563 3.28337 8.42115 7.33301 8.4209ZM7.62695 0C9.89485 0 11.7333 1.75937 11.7334 3.92969C11.7334 6.10007 9.8949 7.85938 7.62695 7.85938C5.3591 7.85927 3.52051 6.10001 3.52051 3.92969C3.52059 1.75943 5.35915 0.000103665 7.62695 0ZM7.62695 1.12305C6.00713 1.12315 4.69441 2.37954 4.69434 3.92969C4.69434 5.4799 6.00708 6.7372 7.62695 6.7373C9.24692 6.7373 10.5605 5.47996 10.5605 3.92969C10.5605 2.37948 9.24687 1.12305 7.62695 1.12305Z" fill="#515961"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1005 B

After

Width:  |  Height:  |  Size: 917 B

src/main/resources/static/img/user_icon_blue.svg
+6
View File
@@ -0,0 +1,6 @@
<svg width="56" height="58" viewBox="0 0 56 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="56" height="57.9649" rx="28" fill="#0049B4"/>
<path
d="M28 29.9014C36.8365 29.9014 44 36.7565 44 45.2129C43.9999 45.8892 43.4517 46.4373 42.7754 46.4375H42.665C41.9886 46.4375 41.4406 45.8893 41.4404 45.2129C41.4404 38.1095 35.4227 32.3506 28 32.3506C20.5773 32.3506 14.5596 38.1095 14.5596 45.2129C14.5594 45.8893 14.0114 46.4375 13.335 46.4375H13.2246C12.5483 46.4374 12.0001 45.8892 12 45.2129C12 36.7565 19.1634 29.9014 28 29.9014ZM28.6406 11.5274C33.5891 11.5274 37.6006 15.366 37.6006 20.1016C37.6006 24.8372 33.5891 28.6758 28.6406 28.6758C23.6922 28.6757 19.6807 24.8371 19.6807 20.1016C19.6807 15.3661 23.6923 11.5275 28.6406 11.5274ZM28.6406 13.9766C25.1061 13.9767 22.2412 16.7191 22.2412 20.1016C22.2412 23.4841 25.1061 26.2265 28.6406 26.2266C32.1752 26.2266 35.041 23.4842 35.041 20.1016C35.041 16.719 32.1752 13.9766 28.6406 13.9766Z"
fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1005 B

src/main/resources/static/sass/pages/_org-register.scss
+40 -1
View File
@@ -538,10 +538,49 @@
justify-content: center;
}
// Figma 모바일: 가로 배치, 144px × 40px, gap 21px
@include respond-to('sm') {
flex-direction: column;
flex-direction: row;
gap: 21px;
margin-top: $spacing-2xl;
padding-top: $spacing-xl;
border-top: none;
.btn {
flex: 1;
width: auto;
min-width: 144px;
height: 40px;
padding: 8px 10px;
font-size: 14px;
font-weight: 700;
border-radius: 8px;
}
// Figma: 취소 버튼 - #e5e7eb 배경, #5f666c 텍스트
.btn-secondary,
.btn-outline-secondary {
background: #e5e7eb;
color: #5f666c;
border: none;
&:hover {
background: #d1d5db;
color: #5f666c;
}
}
// Figma: 가입신청 버튼 - #0049b4 배경, white 텍스트
.btn-primary {
background: #0049b4;
color: #ffffff;
border: none;
&:hover {
background: #003d99;
color: #ffffff;
}
}
}
}
src/main/resources/static/sass/pages/_signup-selection.scss
+56 -16
View File
@@ -142,50 +142,90 @@
}
}
// Responsive adjustments
@media (max-width: 576px) {
// Responsive adjustments - Figma Mobile Design (sm: 768px)
@include respond-to('sm') {
.signup-selection-page {
// Figma: 전체 배경 #ebfbff, 풀 높이
background: #ebfbff;
min-height: calc(100vh - 44px);
padding: 40px 20px;
margin-top: 0;
margin-bottom: 0;
border-radius: 0;
}
.signup-selection-container {
max-width: 100%;
padding: 0 20px;
padding: 0;
}
.signup-selection-card {
padding: 0;
}
.signup-logo {
width: 70px;
height: 70px;
// Figma: 64px × 64px
width: 64px;
height: 64px;
margin-bottom: 24px;
}
.signup-message {
font-size: 18px;
margin-bottom: 32px;
// Figma: 14px Regular, #212529
font-size: 14px;
font-weight: 400;
color: #212529;
margin-bottom: 80px;
line-height: 26px;
}
.signup-buttons {
max-width: 100%;
// Figma: 버튼 간격 24px
max-width: 335px;
gap: 24px;
margin-bottom: 48px;
margin-bottom: 80px;
}
.signup-btn {
height: 70px;
font-size: 18px;
// Figma: 335px × 44px, border-radius 8px
height: 44px;
font-size: 16px;
font-weight: 700;
border-radius: 8px;
padding: 8px 12px;
justify-content: center;
gap: 8px;
.signup-btn-icon {
width: 22px;
height: 26px;
svg {
width: 14px;
height: 16px;
flex-shrink: 0;
}
span {
text-align: center;
}
&:hover {
transform: none;
box-shadow: none;
opacity: 0.9;
}
}
.signup-navigation {
gap: 20px;
// Figma: 14px Regular, #515961, gap 12px
gap: 12px;
.signup-nav-link {
font-size: 14px;
font-weight: 400;
color: #515961;
}
.signup-nav-link,
.signup-nav-separator {
font-size: 14px;
color: #515961;
}
}
}