Webhook 신청/관리 및 EventType 제공 기능 추가:
- Webhook 신청/수정 3단계 UI 및 관련 서비스 구현 - TSEAIRM28 공통코드 기반 EventType 조회 기능 추가 - 신규/수정 세션 관리 및 비밀번호 재인증 로직 포함
This commit is contained in:
Rinjae
@@ -19622,6 +19622,421 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
.webhook-container {
|
||||
max-width: 880px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 16px 60px;
|
||||
}
|
||||
.webhook-container .field-help {
|
||||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.webhook-container .field-error,
|
||||
.webhook-container .webhook-field-error {
|
||||
color: #e03131;
|
||||
font-size: 13px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.webhook-container .req {
|
||||
color: #e03131;
|
||||
}
|
||||
|
||||
.webhook-empty {
|
||||
text-align: center;
|
||||
padding: 64px 20px;
|
||||
background: #f5f7fb;
|
||||
border: 1px solid #e2e6ee;
|
||||
border-radius: 14px;
|
||||
}
|
||||
.webhook-empty .empty-icon {
|
||||
font-size: 48px;
|
||||
}
|
||||
.webhook-empty h3 {
|
||||
margin: 16px 0 8px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.webhook-empty p {
|
||||
color: #6b7280;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.webhook-steps {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.webhook-steps .webhook-step {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
background: #f5f7fb;
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
}
|
||||
.webhook-steps .webhook-step .step-no {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: #d5dbe6;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.webhook-steps .webhook-step.active {
|
||||
background: rgba(11, 95, 255, 0.1);
|
||||
color: #0b5fff;
|
||||
}
|
||||
.webhook-steps .webhook-step.active .step-no {
|
||||
background: #0b5fff;
|
||||
}
|
||||
|
||||
.webhook-field {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.webhook-field label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.webhook-field input[type=text],
|
||||
.webhook-field input[type=password] {
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid #e2e6ee;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.webhook-field input[type=text]:focus,
|
||||
.webhook-field input[type=password]:focus {
|
||||
outline: none;
|
||||
border-color: #0b5fff;
|
||||
}
|
||||
|
||||
.webhook-eventtype-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
.webhook-eventtype-list .eventtype-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid #e2e6ee;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.webhook-eventtype-list .eventtype-item input {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.webhook-eventtype-list .eventtype-item .eventtype-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
.webhook-eventtype-list .eventtype-item .eventtype-code {
|
||||
color: #6b7280;
|
||||
font-size: 12px;
|
||||
margin-left: auto;
|
||||
}
|
||||
.webhook-eventtype-list .eventtype-item:hover {
|
||||
border-color: #0b5fff;
|
||||
}
|
||||
|
||||
.webhook-api-groups {
|
||||
margin: 16px 0 8px;
|
||||
}
|
||||
|
||||
.webhook-api-group {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.webhook-api-group .group-name {
|
||||
font-size: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.webhook-api-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
.webhook-api-list .webhook-api-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid #e2e6ee;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.webhook-api-list .webhook-api-card input {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.webhook-api-list .webhook-api-card .api-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
.webhook-api-list .webhook-api-card .api-id {
|
||||
color: #6b7280;
|
||||
font-size: 12px;
|
||||
margin-left: auto;
|
||||
}
|
||||
.webhook-api-list .webhook-api-card:hover {
|
||||
border-color: #0b5fff;
|
||||
}
|
||||
|
||||
.webhook-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
.webhook-actions.center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-webhook-next,
|
||||
.btn-webhook-create {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px 28px;
|
||||
background: #0b5fff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn-webhook-next:hover,
|
||||
.btn-webhook-create:hover {
|
||||
background: #0847c4;
|
||||
}
|
||||
|
||||
.btn-webhook-cancel {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px 28px;
|
||||
background: #fff;
|
||||
color: #6b7280;
|
||||
border: 1px solid #e2e6ee;
|
||||
border-radius: 10px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn-webhook-cancel:hover {
|
||||
border-color: #6b7280;
|
||||
}
|
||||
|
||||
.btn-webhook-danger {
|
||||
padding: 12px 28px;
|
||||
background: #fff;
|
||||
color: #e03131;
|
||||
border: 1px solid #e03131;
|
||||
border-radius: 10px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-webhook-danger:hover {
|
||||
background: #e03131;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-mini {
|
||||
padding: 4px 12px;
|
||||
background: #f5f7fb;
|
||||
color: #0b5fff;
|
||||
border: 1px solid #e2e6ee;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-mini:hover {
|
||||
background: rgba(11, 95, 255, 0.1);
|
||||
}
|
||||
|
||||
.btn-copy {
|
||||
padding: 10px 18px;
|
||||
background: #0b5fff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-copy:hover {
|
||||
background: #0847c4;
|
||||
}
|
||||
|
||||
.webhook-card {
|
||||
border: 1px solid #e2e6ee;
|
||||
border-radius: 14px;
|
||||
padding: 24px;
|
||||
}
|
||||
.webhook-card .webhook-card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.webhook-card .webhook-card-head h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
.webhook-card .webhook-card-head .webhook-created {
|
||||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
}
|
||||
.webhook-card .webhook-card-row {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 14px 0;
|
||||
border-top: 1px solid #e2e6ee;
|
||||
}
|
||||
.webhook-card .webhook-card-row .row-label {
|
||||
width: 110px;
|
||||
color: #6b7280;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.webhook-card .webhook-card-row .row-value {
|
||||
flex: 1;
|
||||
word-break: break-all;
|
||||
}
|
||||
.webhook-card .webhook-card-row.secret-row, .webhook-card .webhook-card-row .secret-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.webhook-card .webhook-card-row code {
|
||||
background: #f5f7fb;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.webhook-card .eventtype-badge,
|
||||
.webhook-card .api-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
margin: 2px 4px 2px 0;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
background: rgba(11, 95, 255, 0.1);
|
||||
color: #0b5fff;
|
||||
}
|
||||
.webhook-card .api-badge {
|
||||
background: #f5f7fb;
|
||||
color: #6b7280;
|
||||
}
|
||||
.webhook-card .webhook-card-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.webhook-complete {
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
}
|
||||
.webhook-complete .complete-icon {
|
||||
font-size: 48px;
|
||||
}
|
||||
.webhook-complete h3 {
|
||||
margin: 16px 0;
|
||||
}
|
||||
.webhook-complete .webhook-secret-box {
|
||||
text-align: left;
|
||||
max-width: 640px;
|
||||
margin: 24px auto;
|
||||
padding: 20px;
|
||||
background: #f5f7fb;
|
||||
border: 1px solid #e2e6ee;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.webhook-complete .webhook-secret-box .secret-warning {
|
||||
color: #92400e;
|
||||
background: #fef3c7;
|
||||
border-radius: 8px;
|
||||
padding: 12px 14px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.webhook-complete .webhook-secret-box label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.webhook-complete .webhook-secret-box .secret-value-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.webhook-complete .webhook-secret-box .secret-value-row input {
|
||||
flex: 1;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid #e2e6ee;
|
||||
border-radius: 10px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.webhook-modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
.webhook-modal .webhook-modal-box {
|
||||
background: #fff;
|
||||
border-radius: 14px;
|
||||
padding: 28px;
|
||||
width: 360px;
|
||||
max-width: 90vw;
|
||||
}
|
||||
.webhook-modal .webhook-modal-box h4 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.webhook-modal .webhook-modal-box p {
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.webhook-modal .webhook-modal-box input {
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid #e2e6ee;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.webhook-modal .webhook-modal-box input:focus {
|
||||
outline: none;
|
||||
border-color: #0b5fff;
|
||||
}
|
||||
.webhook-modal .webhook-modal-box .webhook-modal-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.webhook-modal .webhook-modal-box .webhook-modal-actions .btn-webhook-next, .webhook-modal .webhook-modal-box .webhook-modal-actions .btn-webhook-cancel {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.d-none {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user