모바일 - 회원가입 디자인 수정

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
+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;
}
}
File diff suppressed because one or more lines are too long
+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>

Before

Width:  |  Height:  |  Size: 1005 B

After

Width:  |  Height:  |  Size: 917 B

@@ -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>

After

Width:  |  Height:  |  Size: 1005 B

@@ -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;
}
}
}
}
@@ -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;
}
}
}
@@ -21,7 +21,9 @@
<!-- Individual Signup Button -->
<a th:href="@{/signup/portalUser}" class="signup-btn signup-btn-individual">
<svg width="22" height="30" viewBox="0 0 22 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.4287 12.748C19.0578 12.7481 21.9998 15.7302 22 19.4092V29.3447C21.9998 29.6617 21.7783 29.9263 21.4834 29.9873L21.3535 30H0.646484C0.289425 29.9998 0.00024463 29.7067 0 29.3447V18.2607C0 15.2164 2.43446 12.748 5.4375 12.748C6.67211 12.7481 7.86991 13.1742 8.83398 13.9561L9.13965 14.2031C9.4187 14.4294 9.46443 14.8431 9.24121 15.126C9.01802 15.4088 8.61011 15.4546 8.33105 15.2285L8.02539 14.9805C7.29081 14.3848 6.37819 14.0596 5.4375 14.0596C3.1492 14.0596 1.29395 15.9409 1.29395 18.2607V28.6885H20.7061V19.4092C20.7058 16.4548 18.3431 14.0596 15.4287 14.0596C13.2292 14.0598 11.2606 15.4434 10.4883 17.5312L9.98828 18.8818C9.86275 19.2209 9.48978 19.3927 9.15527 19.2656C8.82079 19.1383 8.65091 18.7601 8.77637 18.4209L9.27637 17.0703C10.2382 14.4705 12.6898 12.7482 15.4287 12.748ZM11 0C14.2162 8.65396e-06 16.8231 2.64285 16.8232 5.90332C16.8232 9.16394 14.2163 11.8076 11 11.8076C7.78365 11.8076 5.17676 9.16394 5.17676 5.90332C5.17693 2.64284 7.78375 0 11 0ZM11 1.31152C8.4985 1.31152 6.47087 3.36743 6.4707 5.90332C6.4707 8.43936 8.49839 10.4951 11 10.4951C13.5016 10.4951 15.5293 8.43935 15.5293 5.90332C15.5291 3.36743 13.5015 1.31153 11 1.31152Z" fill="white"/>
<path
d="M15.4287 12.748C19.0578 12.7481 21.9998 15.7302 22 19.4092V29.3447C21.9998 29.6617 21.7783 29.9263 21.4834 29.9873L21.3535 30H0.646484C0.289425 29.9998 0.00024463 29.7067 0 29.3447V18.2607C0 15.2164 2.43446 12.748 5.4375 12.748C6.67211 12.7481 7.86991 13.1742 8.83398 13.9561L9.13965 14.2031C9.4187 14.4294 9.46443 14.8431 9.24121 15.126C9.01802 15.4088 8.61011 15.4546 8.33105 15.2285L8.02539 14.9805C7.29081 14.3848 6.37819 14.0596 5.4375 14.0596C3.1492 14.0596 1.29395 15.9409 1.29395 18.2607V28.6885H20.7061V19.4092C20.7058 16.4548 18.3431 14.0596 15.4287 14.0596C13.2292 14.0598 11.2606 15.4434 10.4883 17.5312L9.98828 18.8818C9.86275 19.2209 9.48978 19.3927 9.15527 19.2656C8.82079 19.1383 8.65091 18.7601 8.77637 18.4209L9.27637 17.0703C10.2382 14.4705 12.6898 12.7482 15.4287 12.748ZM11 0C14.2162 8.65396e-06 16.8231 2.64285 16.8232 5.90332C16.8232 9.16394 14.2163 11.8076 11 11.8076C7.78365 11.8076 5.17676 9.16394 5.17676 5.90332C5.17693 2.64284 7.78375 0 11 0ZM11 1.31152C8.4985 1.31152 6.47087 3.36743 6.4707 5.90332C6.4707 8.43936 8.49839 10.4951 11 10.4951C13.5016 10.4951 15.5293 8.43935 15.5293 5.90332C15.5291 3.36743 13.5015 1.31153 11 1.31152Z"
fill="white"/>
</svg>
<span>개인회원 가입</span>
</a>
@@ -29,7 +31,9 @@
<!-- Organization Signup Button -->
<a th:href="@{/signup/portalOrg}" class="signup-btn signup-btn-organization">
<svg width="26" height="30" viewBox="0 0 26 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.001 7.2002C14.3062 7.20046 15.3652 8.27529 15.3652 9.60059V27.5996L15.3623 27.7236C15.3009 28.9505 14.3313 29.9346 13.123 29.9971L13.001 30H2.36426L2.24316 29.9971C1.03469 29.9348 0.0653104 28.9506 0.00390625 27.7236L0 27.5996V9.60059C1.90336e-07 8.27527 1.05901 7.20043 2.36426 7.2002H13.001ZM23.0469 0C24.6785 0.00011158 26.0009 1.3433 26.001 3V27C26.0009 28.6567 24.6785 29.9999 23.0469 30H16.5469C16.2205 30 15.9551 29.7308 15.9551 29.3994C15.9553 29.0682 16.2206 28.7998 16.5469 28.7998H23.0469C24.0258 28.7997 24.8192 27.9939 24.8193 27V3C24.8193 2.00604 24.0258 1.20031 23.0469 1.2002H13.5918C12.6128 1.20022 11.8194 2.00598 11.8193 3V6C11.8193 6.33124 11.5547 6.5994 11.2285 6.59961C10.9022 6.59961 10.6377 6.33137 10.6377 6V3C10.6378 1.34325 11.9601 2.44626e-05 13.5918 0H23.0469ZM2.36426 8.40039C1.71173 8.40062 1.18262 8.938 1.18262 9.60059V27.5996C1.18265 28.2622 1.71175 28.7996 2.36426 28.7998H4.1377V25.2002C4.1377 23.5435 5.46013 22.2004 7.0918 22.2002H8.86523C10.4966 22.2007 11.8193 23.5437 11.8193 25.2002V28.7998H13.001C13.6535 28.7995 14.1836 28.2621 14.1836 27.5996V9.60059C14.1836 8.93802 13.6535 8.40066 13.001 8.40039H2.36426ZM7.0918 23.4004C6.11285 23.4005 5.31934 24.2062 5.31934 25.2002V28.7998H10.6377V25.2002C10.6377 24.2064 9.84392 23.4009 8.86523 23.4004H7.0918ZM18.3193 24.5996H17.1377V22.2002H18.3193V24.5996ZM21.8652 24.5996H20.6836V22.2002H21.8652V24.5996ZM18.3193 20.4004H17.1377V18H18.3193V20.4004ZM21.8652 20.4004H20.6836V18H21.8652V20.4004ZM4.72852 18.5996H3.54688V16.2002H4.72852V18.5996ZM8.27441 18.5996H7.09277V16.2002H8.27441V18.5996ZM11.8193 18.5996H10.6377V16.2002H11.8193V18.5996ZM18.3193 16.2002H17.1377V13.7998H18.3193V16.2002ZM21.8652 16.2002H20.6836V13.7998H21.8652V16.2002ZM4.72852 14.4004H3.54688V12H4.72852V14.4004ZM8.27441 14.4004H7.09277V12H8.27441V14.4004ZM11.8193 14.4004H10.6377V12H11.8193V14.4004ZM18.3193 12H17.1377V9.60059H18.3193V12ZM21.8652 12H20.6836V9.60059H21.8652V12ZM18.3193 7.7998H17.1377V5.40039H18.3193V7.7998ZM21.8652 7.7998H20.6836V5.40039H21.8652V7.7998Z" fill="white"/>
<path
d="M13.001 7.2002C14.3062 7.20046 15.3652 8.27529 15.3652 9.60059V27.5996L15.3623 27.7236C15.3009 28.9505 14.3313 29.9346 13.123 29.9971L13.001 30H2.36426L2.24316 29.9971C1.03469 29.9348 0.0653104 28.9506 0.00390625 27.7236L0 27.5996V9.60059C1.90336e-07 8.27527 1.05901 7.20043 2.36426 7.2002H13.001ZM23.0469 0C24.6785 0.00011158 26.0009 1.3433 26.001 3V27C26.0009 28.6567 24.6785 29.9999 23.0469 30H16.5469C16.2205 30 15.9551 29.7308 15.9551 29.3994C15.9553 29.0682 16.2206 28.7998 16.5469 28.7998H23.0469C24.0258 28.7997 24.8192 27.9939 24.8193 27V3C24.8193 2.00604 24.0258 1.20031 23.0469 1.2002H13.5918C12.6128 1.20022 11.8194 2.00598 11.8193 3V6C11.8193 6.33124 11.5547 6.5994 11.2285 6.59961C10.9022 6.59961 10.6377 6.33137 10.6377 6V3C10.6378 1.34325 11.9601 2.44626e-05 13.5918 0H23.0469ZM2.36426 8.40039C1.71173 8.40062 1.18262 8.938 1.18262 9.60059V27.5996C1.18265 28.2622 1.71175 28.7996 2.36426 28.7998H4.1377V25.2002C4.1377 23.5435 5.46013 22.2004 7.0918 22.2002H8.86523C10.4966 22.2007 11.8193 23.5437 11.8193 25.2002V28.7998H13.001C13.6535 28.7995 14.1836 28.2621 14.1836 27.5996V9.60059C14.1836 8.93802 13.6535 8.40066 13.001 8.40039H2.36426ZM7.0918 23.4004C6.11285 23.4005 5.31934 24.2062 5.31934 25.2002V28.7998H10.6377V25.2002C10.6377 24.2064 9.84392 23.4009 8.86523 23.4004H7.0918ZM18.3193 24.5996H17.1377V22.2002H18.3193V24.5996ZM21.8652 24.5996H20.6836V22.2002H21.8652V24.5996ZM18.3193 20.4004H17.1377V18H18.3193V20.4004ZM21.8652 20.4004H20.6836V18H21.8652V20.4004ZM4.72852 18.5996H3.54688V16.2002H4.72852V18.5996ZM8.27441 18.5996H7.09277V16.2002H8.27441V18.5996ZM11.8193 18.5996H10.6377V16.2002H11.8193V18.5996ZM18.3193 16.2002H17.1377V13.7998H18.3193V16.2002ZM21.8652 16.2002H20.6836V13.7998H21.8652V16.2002ZM4.72852 14.4004H3.54688V12H4.72852V14.4004ZM8.27441 14.4004H7.09277V12H8.27441V14.4004ZM11.8193 14.4004H10.6377V12H11.8193V14.4004ZM18.3193 12H17.1377V9.60059H18.3193V12ZM21.8652 12H20.6836V9.60059H21.8652V12ZM18.3193 7.7998H17.1377V5.40039H18.3193V7.7998ZM21.8652 7.7998H20.6836V5.40039H21.8652V7.7998Z"
fill="white"/>
</svg>
<span>법인회원 가입</span>
</a>
@@ -46,16 +50,16 @@
</div>
</th:block>
<th:block layout:fragment="script">
<script th:src="@{/js/jquery-3.7.1.min.js}"></script>
<script th:src="@{/js/daterangepicker.js}"></script>
<script th:src="@{/js/slick.min.js}"></script>
<script th:src="@{/js/front2.js}"></script>
<script th:src="@{/js/jquery-3.7.1.min.js}"></script>
<script th:src="@{/js/daterangepicker.js}"></script>
<script th:src="@{/js/slick.min.js}"></script>
<script th:src="@{/js/front2.js}"></script>
</th:block>
<th:block layout:fragment="contentScript">
<script>
// Modern signup selection page - no custom JS needed
// Card interactions handled by CSS and standard anchor tags
</script>
<script>
// Modern signup selection page - no custom JS needed
// Card interactions handled by CSS and standard anchor tags
</script>
</th:block>
</body>
</html>