UI 일부 개선

This commit is contained in:
Rinjae
2026-01-05 11:31:12 +09:00
parent 44957e8883
commit f7dff3e8db
17 changed files with 1118 additions and 166 deletions
+156 -66
View File
@@ -1356,7 +1356,7 @@ hr {
text-decoration: none;
color: var(--text-dark);
font-weight: 500;
font-size: 22px;
font-size: 20px;
padding: 8px 16px;
border-radius: 8px;
transition: all 0.3s ease;
@@ -3173,7 +3173,7 @@ hr {
}
.common-title-bar .common-title, .user-management-container .table-controls .common-title, .app-list-title-section .common-title, .register-title-bar .common-title {
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 28px;
font-size: 22px;
font-weight: 700;
color: #1A1A2E;
margin: 0;
@@ -3943,14 +3943,14 @@ select.form-control {
.form-row {
display: flex;
align-items: flex-start;
gap: 40px;
margin-bottom: 50px;
gap: 20px;
margin-bottom: 16px;
}
@media (max-width: 1024px) {
.form-row {
flex-direction: column;
gap: 12px;
margin-bottom: 30px;
gap: 10px;
margin-bottom: 12px;
}
}
@@ -3958,8 +3958,8 @@ select.form-control {
display: flex;
align-items: center;
gap: 5px;
min-width: 214px;
width: 214px;
min-width: 160px;
width: 160px;
flex-shrink: 0;
}
@media (max-width: 1024px) {
@@ -3969,7 +3969,7 @@ select.form-control {
}
}
.form-label-wrapper.label-offset {
margin-top: 15px;
margin-top: 10px;
}
@media (max-width: 1024px) {
.form-label-wrapper.label-offset {
@@ -3978,13 +3978,13 @@ select.form-control {
}
.form-label-text {
font-size: 20px;
font-weight: 700;
font-size: 15px;
font-weight: 400;
color: #000000;
}
@media (max-width: 1024px) {
.form-label-text {
font-size: 16px;
font-size: 14px;
}
}
.form-label-text.required::after {
@@ -4012,6 +4012,57 @@ select.form-control {
}
}
.form-input {
width: 100%;
padding: 8px 12px;
border: 1px solid #E2E8F0;
border-radius: 8px;
font-size: 14px;
color: #1A1A2E;
background: #FFFFFF;
transition: all 0.3s ease;
}
.form-input:focus {
outline: none;
border-color: #0049b4;
box-shadow: 0 0 0 3px rgba(0, 73, 180, 0.1);
}
.form-input:disabled, .form-input.input-readonly {
background: #F8FAFC;
color: #64748B;
cursor: not-allowed;
}
.form-input::placeholder {
color: #94A3B8;
}
.form-select {
width: 100%;
padding: 8px 12px;
border: 1px solid #E2E8F0;
border-radius: 8px;
font-size: 14px;
color: #1A1A2E;
background: #FFFFFF;
cursor: pointer;
transition: all 0.3s ease;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 24px center;
padding-right: 48px;
}
.form-select:focus {
outline: none;
border-color: #0049b4;
box-shadow: 0 0 0 3px rgba(0, 73, 180, 0.1);
}
.form-select:disabled {
background-color: #F8FAFC;
color: #94A3B8;
cursor: not-allowed;
}
.char-counter-wrapper {
display: block;
text-align: right;
@@ -4045,9 +4096,19 @@ select.form-control {
user-select: none;
flex-shrink: 0;
}
.compound-input .phone-number {
flex: 1;
width: 100%;
.compound-input .form-input.phone-number {
flex: none;
width: 130px;
max-width: 130px;
}
.compound-input .form-select.phone-number {
flex: none;
width: 130px;
max-width: 130px;
padding-right: 28px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
}
.compound-input .biz-reg-number {
flex: 1;
@@ -4905,25 +4966,25 @@ select.form-control {
transition: all 0.3s ease;
}
.login-btn-box {
height: 22px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 4px 10px;
gap: 6px;
padding: 6px 16px;
color: #212529;
text-decoration: none;
border: 1px solid #212529;
border: none;
border-radius: 6px;
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-weight: 600;
font-size: 14px;
font-size: 16px;
background: transparent;
transition: all 0.3s ease;
}
.login-btn-box .user-icon {
width: 16px;
height: 16px;
width: 18px;
height: 18px;
flex-shrink: 0;
}
@@ -10461,11 +10522,11 @@ select.form-control {
align-items: center;
justify-content: center;
background: #EDF9FE;
padding: 60px 20px;
padding: 30px 20px;
position: relative;
border-radius: 12px;
margin-top: 60px;
margin-bottom: 60px;
margin-top: 30px;
margin-bottom: 30px;
}
.signup-selection-container {
@@ -10491,7 +10552,7 @@ select.form-control {
.signup-logo {
width: 90px;
height: 90px;
margin-bottom: 30px;
margin-bottom: 15px;
}
.signup-logo img {
width: 100%;
@@ -10505,7 +10566,7 @@ select.form-control {
font-weight: 400;
color: #000000;
text-align: center;
margin-bottom: 40px;
margin-bottom: 20px;
line-height: 1;
}
@@ -10514,8 +10575,8 @@ select.form-control {
max-width: 504px;
display: flex;
flex-direction: column;
gap: 40px;
margin-bottom: 60px;
gap: 20px;
margin-bottom: 30px;
}
.signup-btn {
@@ -10864,12 +10925,11 @@ select.form-control {
.register-form-container .form-input {
width: 100%;
height: 60px;
padding: 0 20px;
padding: 8px 12px;
border: 1px solid #dadada;
border-radius: 12px;
border-radius: 8px;
background-color: #FFFFFF;
font-size: 20px;
font-size: 14px;
color: #1A1A2E;
outline: none;
transition: border-color 0.2s ease;
@@ -10882,18 +10942,17 @@ select.form-control {
}
@media (max-width: 1024px) {
.register-form-container .form-input {
height: 50px;
font-size: 16px;
font-size: 14px;
}
}
.register-form-container .form-textarea {
width: 100%;
min-height: 190px;
padding: 18px 20px;
min-height: 120px;
padding: 8px 12px;
border: 1px solid #dadada;
border-radius: 12px;
border-radius: 8px;
background-color: #FFFFFF;
font-size: 20px;
font-size: 14px;
color: #1A1A2E;
outline: none;
resize: vertical;
@@ -13365,7 +13424,7 @@ input[type=checkbox]:checked + .custom-checkbox {
.app-list-name {
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 22px;
font-size: 18px;
font-weight: 700;
color: #1A1A2E;
margin: 0;
@@ -13381,7 +13440,7 @@ input[type=checkbox]:checked + .custom-checkbox {
.app-list-description {
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 16px;
font-size: 14px;
font-weight: 400;
color: #6e7780;
margin: 0;
@@ -15103,6 +15162,14 @@ input[type=checkbox]:checked + .custom-checkbox {
padding: 0;
}
}
.org-register-page.corporate-register .org-register-container {
padding: 0;
}
@media (max-width: 768px) {
.org-register-page.corporate-register .org-register-container {
padding: 0 16px;
}
}
@media (max-width: 768px) {
.org-register-container {
@@ -15134,7 +15201,7 @@ input[type=checkbox]:checked + .custom-checkbox {
margin-bottom: 32px;
}
.org-section-header h3 {
font-size: 20px;
font-size: 16px;
font-weight: 400;
color: #515961;
margin: 0;
@@ -15214,10 +15281,10 @@ input[type=checkbox]:checked + .custom-checkbox {
}
.org-form-group {
margin-bottom: 8px;
margin-bottom: 16px;
display: flex;
align-items: flex-start;
gap: 24px;
gap: 20px;
}
.org-form-group:last-child {
margin-bottom: 0;
@@ -15225,7 +15292,8 @@ input[type=checkbox]:checked + .custom-checkbox {
@media (max-width: 768px) {
.org-form-group {
flex-direction: column;
gap: 16px;
gap: 10px;
margin-bottom: 12px;
}
}
@@ -15233,11 +15301,11 @@ input[type=checkbox]:checked + .custom-checkbox {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 600;
font-size: 15px;
font-weight: 400;
color: #1A1A2E;
min-width: 180px;
padding-top: 16px;
min-width: 160px;
padding-top: 10px;
}
.org-form-label .required-badge {
display: inline-flex;
@@ -15302,10 +15370,10 @@ input[type=checkbox]:checked + .custom-checkbox {
.org-form-input {
width: 100%;
padding: 16px 24px;
border: 2px solid #E2E8F0;
padding: 8px 12px;
border: 1px solid #E2E8F0;
border-radius: 8px;
font-size: 16px;
font-size: 14px;
color: #1A1A2E;
transition: all 0.3s ease;
background: #FFFFFF;
@@ -15341,9 +15409,19 @@ input[type=checkbox]:checked + .custom-checkbox {
flex: 1;
min-width: 0;
}
.org-compound-input .phone-number {
flex: 1;
width: 100%;
.org-compound-input .org-form-input.phone-number {
flex: none;
width: 130px;
max-width: 130px;
}
.org-compound-input .org-form-select.phone-number {
flex: none;
width: 130px;
max-width: 130px;
padding-right: 28px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
}
.org-compound-input .separator {
color: #64748B;
@@ -15364,10 +15442,10 @@ input[type=checkbox]:checked + .custom-checkbox {
.org-form-select {
width: 100%;
padding: 16px 24px;
border: 2px solid #E2E8F0;
padding: 8px 12px;
border: 1px solid #E2E8F0;
border-radius: 8px;
font-size: 16px;
font-size: 14px;
color: #1A1A2E;
background: #FFFFFF;
cursor: pointer;
@@ -15467,11 +15545,14 @@ input[type=checkbox]:checked + .custom-checkbox {
}
.org-btn-check, .org-file-label {
padding: 16px 24px;
width: 172px;
padding: 8px 16px;
width: auto;
min-width: 100px;
background: #A4D6EA;
color: #FFFFFF;
border: 2px solid #A4D6EA;
border: 1px solid #A4D6EA;
border-radius: 8px;
font-size: 14px;
text-align: center;
justify-content: center;
}
@@ -15498,11 +15579,12 @@ input[type=checkbox]:checked + .custom-checkbox {
.org-file-display {
flex: 1;
padding: 16px 24px;
border: 2px dashed #E2E8F0;
padding: 8px 12px;
border: 1px dashed #E2E8F0;
border-radius: 8px;
background: #F8FAFC;
color: #94A3B8;
font-size: 14px;
cursor: default;
overflow: hidden;
text-overflow: ellipsis;
@@ -15516,21 +15598,29 @@ input[type=checkbox]:checked + .custom-checkbox {
}
.org-file-label {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
background: #3BA4ED;
border-radius: 12px;
border: 2px solid #3BA4ED;
border: 1px solid #3BA4ED;
}
.org-file-label svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.org-file-label input[type=file] {
display: none;
}
.org-file-remove {
padding: 16px;
padding: 8px 12px;
background: #FF6B6B;
color: #FFFFFF;
border: none;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -21,7 +21,7 @@ $apikey-border-color: #dadada;
.common-container {
max-width: $container-max-width;
margin: 0 auto;
padding: $spacing-3xl 0;
padding: 48px 0;
@include respond-to('sm') {
padding: 40px $spacing-md 60px;
@@ -62,7 +62,7 @@ $apikey-border-color: #dadada;
.common-title {
font-family: $font-family-primary;
font-size: 28px;
font-size: 22px;
font-weight: $font-weight-bold;
color: $text-dark;
margin: 0;
@@ -384,8 +384,8 @@ select.form-control {
.form-row {
display: flex;
align-items: flex-start;
gap: 40px;
margin-bottom: 50px;
gap: 20px;
margin-bottom: 16px;
//&:last-child {
// margin-bottom: 0;
@@ -393,8 +393,8 @@ select.form-control {
@include respond-to('md') {
flex-direction: column;
gap: 12px;
margin-bottom: 30px;
gap: 10px;
margin-bottom: 12px;
}
}
@@ -402,8 +402,8 @@ select.form-control {
display: flex;
align-items: center;
gap: 5px;
min-width: 214px;
width: 214px;
min-width: 160px;
width: 160px;
flex-shrink: 0;
@include respond-to('md') {
@@ -412,7 +412,7 @@ select.form-control {
}
&.label-offset {
margin-top: 15px;
margin-top: 10px;
@include respond-to('md') {
margin-top: 0;
@@ -421,12 +421,12 @@ select.form-control {
}
.form-label-text {
font-size: 20px;
font-weight: $font-weight-bold;
font-size: 15px;
font-weight: $font-weight-regular;
color: #000000;
@include respond-to('md') {
font-size: 16px;
font-size: 14px;
}
// Required indicator (asterisk style)
@@ -454,6 +454,65 @@ select.form-control {
}
}
// Form input base style - compact
.form-input {
width: 100%;
padding: 8px 12px;
border: 1px solid $border-gray;
border-radius: $border-radius-md;
font-size: 14px;
color: $text-dark;
background: $white;
transition: $transition-base;
&:focus {
outline: none;
border-color: $primary-blue;
box-shadow: 0 0 0 3px rgba($primary-blue, 0.1);
}
&:disabled,
&.input-readonly {
background: $gray-bg;
color: $text-gray;
cursor: not-allowed;
}
&::placeholder {
color: $text-light;
}
}
// Form select base style - compact
.form-select {
width: 100%;
padding: 8px 12px;
border: 1px solid $border-gray;
border-radius: $border-radius-md;
font-size: 14px;
color: $text-dark;
background: $white;
cursor: pointer;
transition: $transition-base;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right $spacing-lg center;
padding-right: $spacing-3xl;
&:focus {
outline: none;
border-color: $primary-blue;
box-shadow: 0 0 0 3px rgba($primary-blue, 0.1);
}
&:disabled {
background-color: $gray-bg;
color: $text-light;
cursor: not-allowed;
}
}
// -----------------------------------------------------------------------------
// Character Counter - Text input character count display
// -----------------------------------------------------------------------------
@@ -501,10 +560,21 @@ select.form-control {
flex-shrink: 0;
}
// Phone number specific
.phone-number {
flex: 1;
width: 100%;
// Phone number specific - limit each element width
.form-input.phone-number {
flex: none;
width: 130px;
max-width: 130px;
}
.form-select.phone-number {
flex: none;
width: 130px;
max-width: 130px;
padding-right: 28px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
}
// Business registration number specific
@@ -33,25 +33,25 @@
// Box style for Figma design (node-id: 721-1489)
&-box {
height: 22px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px; // 아이콘-텍스트 간격
padding: 4px 10px;
gap: 6px; // 아이콘-텍스트 간격
padding: 6px 16px;
color: #212529; // 강조 텍스트 색상
text-decoration: none;
border: 1px solid #212529;
border: none;
border-radius: 6px;
font-family: $font-family-primary;
font-weight: $font-weight-semibold; // 600
font-size: $font-size-sm; // 14px
font-size: 16px;
background: transparent;
transition: $transition-base;
.user-icon {
width: 16px;
height: 16px;
width: 18px;
height: 18px;
flex-shrink: 0;
}
}
@@ -903,7 +903,7 @@
text-decoration: none;
color: var(--text-dark);
font-weight: 500;
font-size: 22px;
font-size: 20px;
padding: 8px 16px;
border-radius: 8px;
transition: all 0.3s ease;
@@ -177,7 +177,7 @@
// App Name
.app-list-name {
font-family: $font-family-primary;
font-size: 22px;
font-size: 18px;
font-weight: $font-weight-bold;
color: $text-dark;
margin: 0;
@@ -194,7 +194,7 @@
// App Description
.app-list-description {
font-family: $font-family-primary;
font-size: $font-size-base;
font-size: 14px;
font-weight: $font-weight-regular;
color: #6e7780;
margin: 0;
@@ -226,12 +226,11 @@
.register-form-container {
.form-input {
width: 100%;
height: 60px;
padding: 0 20px;
padding: 8px 12px;
border: 1px solid #dadada;
border-radius: $border-radius-lg;
border-radius: $border-radius-md;
background-color: $white;
font-size: 20px;
font-size: 14px;
color: $text-dark;
outline: none;
transition: border-color 0.2s ease;
@@ -245,19 +244,18 @@
}
@include respond-to('md') {
height: 50px;
font-size: 16px;
font-size: 14px;
}
}
.form-textarea {
width: 100%;
min-height: 190px;
padding: 18px 20px;
min-height: 120px;
padding: 8px 12px;
border: 1px solid #dadada;
border-radius: $border-radius-lg;
border-radius: $border-radius-md;
background-color: $white;
font-size: 20px;
font-size: 14px;
color: $text-dark;
outline: none;
resize: vertical;
@@ -12,6 +12,17 @@
@include respond-to('sm') {
padding: 0;
}
// 법인회원 가입 페이지 전용 스타일
&.corporate-register {
.org-register-container {
padding: 0;
@media (max-width: $breakpoint-sm) {
padding: 0 $spacing-md;
}
}
}
}
.org-register-container {
@@ -47,7 +58,7 @@
margin-bottom: $spacing-xl;
h3 {
font-size: $font-size-lg;
font-size: 16px;
font-weight: $font-weight-regular;
color: #515961;
margin: 0;
@@ -142,10 +153,10 @@
// Form Groups
.org-form-group {
margin-bottom: $spacing-sm;
margin-bottom: 16px;
display: flex;
align-items: flex-start;
gap: $spacing-lg;
gap: 20px;
&:last-child {
margin-bottom: 0;
@@ -153,7 +164,8 @@
@include respond-to('sm') {
flex-direction: column;
gap: $spacing-md;
gap: 10px;
margin-bottom: 12px;
}
}
@@ -161,11 +173,11 @@
display: flex;
align-items: center;
gap: $spacing-sm;
font-size: $font-size-base;
font-weight: $font-weight-semibold;
font-size: 15px;
font-weight: $font-weight-regular;
color: $text-dark;
min-width: 180px;
padding-top: $spacing-md;
min-width: 160px;
padding-top: 10px;
.required-badge {
display: inline-flex;
@@ -234,10 +246,10 @@
// Input Fields
.org-form-input {
width: 100%;
padding: $spacing-md $spacing-lg;
border: 2px solid $border-gray;
padding: 8px 12px;
border: 1px solid $border-gray;
border-radius: $border-radius-md;
font-size: $font-size-base;
font-size: 14px;
color: $text-dark;
transition: $transition-base;
background: $white;
@@ -280,10 +292,21 @@
min-width: 0;
}
// Equal width for phone number inputs
.phone-number {
flex: 1;
width: 100%;
// Phone number inputs - limit each element width
.org-form-input.phone-number {
flex: none;
width: 130px;
max-width: 130px;
}
.org-form-select.phone-number {
flex: none;
width: 130px;
max-width: 130px;
padding-right: 28px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
}
.separator {
@@ -307,10 +330,10 @@
// Select Dropdown
.org-form-select {
width: 100%;
padding: $spacing-md $spacing-lg;
border: 2px solid $border-gray;
padding: 8px 12px;
border: 1px solid $border-gray;
border-radius: $border-radius-md;
font-size: $font-size-base;
font-size: 14px;
color: $text-dark;
background: $white;
cursor: pointer;
@@ -422,11 +445,14 @@
}
.org-btn-check {
padding: $spacing-md $spacing-lg;
width: 172px;
padding: 8px 16px;
width: auto;
min-width: 100px;
background: #A4D6EA;
color: $white;
border: 2px solid #A4D6EA;
border: 1px solid #A4D6EA;
border-radius: $border-radius-md;
font-size: 14px;
text-align: center;
justify-content: center;
@@ -453,11 +479,12 @@
.org-file-display {
flex: 1;
padding: $spacing-md $spacing-lg;
border: 2px dashed $border-gray;
padding: 8px 12px;
border: 1px dashed $border-gray;
border-radius: $border-radius-md;
background: $gray-bg;
color: $text-light;
font-size: 14px;
cursor: default;
overflow: hidden;
text-overflow: ellipsis;
@@ -473,10 +500,18 @@
.org-file-label {
@extend .org-btn-check;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
background: #3BA4ED;
border-radius: 12px;
border: 2px solid #3BA4ED;
border: 1px solid #3BA4ED;
svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
input[type="file"] {
display: none;
@@ -484,11 +519,12 @@
}
.org-file-remove {
padding: $spacing-md;
padding: 8px 12px;
background: $accent-orange;
color: $white;
border: none;
border-radius: $border-radius-md;
font-size: 14px;
cursor: pointer;
transition: $transition-base;
@@ -8,11 +8,11 @@
align-items: center;
justify-content: center;
background: #EDF9FE; // Light blue background from Figma (same as login)
padding: 60px 20px;
padding: 30px 20px;
position: relative;
border-radius: 12px;
margin-top: 60px;
margin-bottom: 60px;
margin-top: 30px;
margin-bottom: 30px;
}
.signup-selection-container {
@@ -37,7 +37,7 @@
.signup-logo {
width: 90px;
height: 90px;
margin-bottom: 30px;
margin-bottom: 15px;
img {
width: 100%;
@@ -52,7 +52,7 @@
font-weight: 400;
color: #000000;
text-align: center;
margin-bottom: 40px;
margin-bottom: 20px;
line-height: 1;
}
@@ -61,8 +61,8 @@
max-width: 504px;
display: flex;
flex-direction: column;
gap: 40px;
margin-bottom: 60px;
gap: 20px;
margin-bottom: 30px;
}
.signup-btn {
@@ -13,11 +13,6 @@
<th:block layout:fragment="contentFragment">
<section class="app-management-container">
<!-- App List Title Section -->
<div class="app-list-title-section">
<h2 class="app-list-title">인증키 관리</h2>
</div>
<!-- App List Container -->
<div class="app-list-container">
@@ -10,15 +10,15 @@
</section>
<section layout:fragment="contentFragment">
<div class="org-register-container">
<div class="common-title-bar">
<h2 class="common-title">법인 기본 정보</h2>
</div>
<div class="register-form-container">
<form id="updateForm" method="post" th:action="@{/mypage/update}" th:object="${user}">
<form id="updateForm" method="post" th:action="@{/mypage/update}" th:object="${user}">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<!-- 법인 기본 정보 -->
<div class="register-form">
<div class="common-title-bar">
<h2 class="common-title">법인 기본 정보</h2>
</div>
<div class="register-form-container">
<!-- 법인 기본 정보 -->
<div class="register-form">
<div class="form-row">
<div class="form-label-wrapper label-offset">
<span class="form-label-text">제휴기관 ID</span>
@@ -204,17 +204,19 @@
</div>
</div>
</div>
</div>
</div>
<!-- 법인 관리자 정보 -->
<div class="register-title-bar" style="padding-left: 0px;">
<h2 class="register-title">법인 관리자 정보</h2>
<div class="common-title-bar" style="margin-top: 48px;">
<h2 class="common-title">법인 관리자 정보</h2>
</div>
<div class="register-form">
<th:block th:replace="~{apps/mypage/components/commonUserInfo :: commonUserInfo}"></th:block>
<div class="register-form-container">
<div class="register-form">
<th:block th:replace="~{apps/mypage/components/commonUserInfo :: commonUserInfo}"></th:block>
</div>
</div>
<!-- Action Buttons -->
</form>
</div>
<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">
@@ -116,7 +116,7 @@
</label>
<div class="org-form-input-wrapper">
<div class="org-compound-input">
<select class="org-form-select" id="orgAreaCode">
<select class="org-form-select phone-number" id="orgAreaCode">
<option value="">선택</option>
<option value="국번없음">국번없음</option>
<option value="02">02</option>
@@ -146,10 +146,10 @@
<option value="019">019</option>
</select>
<span class="separator">-</span>
<input type="text" id="orgPhoneNumber1" class="org-form-input" maxlength="4"
<input type="text" id="orgPhoneNumber1" class="org-form-input phone-number" maxlength="4"
placeholder="0000">
<span class="separator">-</span>
<input type="text" id="orgPhoneNumber2" class="org-form-input" maxlength="4"
<input type="text" id="orgPhoneNumber2" class="org-form-input phone-number" maxlength="4"
placeholder="0000">
</div>
<input type="hidden" id="orgPhoneNumber" th:field="*{orgPhoneNumber}">
@@ -178,7 +178,7 @@
</label>
<div class="org-form-input-wrapper">
<div class="org-compound-input">
<select class="org-form-select" id="scAreaCode">
<select class="org-form-select phone-number" id="scAreaCode">
<option value="">선택</option>
<option value="국번없음">국번없음</option>
<option value="02">02</option>
@@ -208,10 +208,10 @@
<option value="019">019</option>
</select>
<span class="separator">-</span>
<input type="text" id="scPhoneNumber1" class="org-form-input" maxlength="4"
<input type="text" id="scPhoneNumber1" class="org-form-input phone-number" maxlength="4"
placeholder="0000">
<span class="separator">-</span>
<input type="text" id="scPhoneNumber2" class="org-form-input" maxlength="4"
<input type="text" id="scPhoneNumber2" class="org-form-input phone-number" maxlength="4"
placeholder="0000">
</div>
<input type="hidden" id="scPhoneNumber" th:field="*{scPhoneNumber}">
@@ -13,7 +13,7 @@
<section layout:fragment="contentFragment">
<div class="org-register-page">
<div class="org-register-page corporate-register">
<!-- Page Title Banner -->
<div class="org-register-container">