Rinjae
41391c8df0
- Webhook 수정/삭제 기능 UX 개선 - 단계별 디자인 업데이트 - Webhook 등록/수정 CSS 및 JS 로직 최적화 및 재사용 코드 추가
342 lines
9.1 KiB
SCSS
342 lines
9.1 KiB
SCSS
// Webhook 신청/관리 (DJPGPT0004)
|
|
// App API Key 신청 3-step UI 톤을 답습한 자체 완결 스타일.
|
|
|
|
$wh-primary: #0b5fff;
|
|
$wh-primary-dark: #0847c4;
|
|
$wh-danger: #e03131;
|
|
$wh-border: #e2e6ee;
|
|
$wh-muted: #6b7280;
|
|
$wh-bg-soft: #f5f7fb;
|
|
|
|
.webhook-container {
|
|
max-width: 880px;
|
|
margin: 0 auto;
|
|
padding: 24px 16px 60px;
|
|
|
|
.field-help { color: $wh-muted; font-size: 13px; margin-top: 6px; }
|
|
.field-error,
|
|
.webhook-field-error { color: $wh-danger; font-size: 13px; margin-top: 6px; }
|
|
.req { color: $wh-danger; }
|
|
}
|
|
|
|
// ---------- 빈 상태 ----------
|
|
.webhook-empty {
|
|
text-align: center;
|
|
padding: 64px 20px;
|
|
background: $wh-bg-soft;
|
|
border: 1px solid $wh-border;
|
|
border-radius: 14px;
|
|
|
|
.empty-icon { font-size: 48px; }
|
|
h3 { margin: 16px 0 8px; font-size: 20px; }
|
|
p { color: $wh-muted; margin-bottom: 24px; }
|
|
}
|
|
|
|
// ---------- 진행 표시 ----------
|
|
.webhook-steps {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 28px;
|
|
|
|
.webhook-step {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 12px;
|
|
border-radius: 10px;
|
|
background: $wh-bg-soft;
|
|
color: $wh-muted;
|
|
font-size: 14px;
|
|
|
|
.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;
|
|
}
|
|
|
|
&.active {
|
|
background: rgba($wh-primary, 0.1);
|
|
color: $wh-primary;
|
|
.step-no { background: $wh-primary; }
|
|
}
|
|
}
|
|
}
|
|
|
|
// ---------- 폼 ----------
|
|
.webhook-field {
|
|
margin-bottom: 24px;
|
|
|
|
label { display: block; font-weight: 600; margin-bottom: 8px; }
|
|
|
|
input[type="text"],
|
|
input[type="password"] {
|
|
width: 100%;
|
|
padding: 12px 14px;
|
|
border: 1px solid $wh-border;
|
|
border-radius: 10px;
|
|
font-size: 14px;
|
|
&:focus { outline: none; border-color: $wh-primary; }
|
|
}
|
|
}
|
|
|
|
.webhook-eventtype-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 10px;
|
|
|
|
.eventtype-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 12px 14px;
|
|
border: 1px solid $wh-border;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
|
|
input { width: 18px; height: 18px; }
|
|
.eventtype-name { font-weight: 600; }
|
|
.eventtype-code { color: $wh-muted; font-size: 12px; margin-left: auto; }
|
|
&:hover { border-color: $wh-primary; }
|
|
}
|
|
}
|
|
|
|
// ---------- API 선택 ----------
|
|
.webhook-api-groups { margin: 16px 0 8px; }
|
|
.webhook-api-group {
|
|
margin-bottom: 24px;
|
|
.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-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 14px;
|
|
border: 1px solid $wh-border;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
|
|
input { width: 18px; height: 18px; }
|
|
.api-name { font-weight: 600; }
|
|
.api-id { color: $wh-muted; font-size: 12px; margin-left: auto; }
|
|
&:hover { border-color: $wh-primary; }
|
|
}
|
|
}
|
|
|
|
// ---------- 액션 버튼 ----------
|
|
.webhook-actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-top: 32px;
|
|
&.center { justify-content: center; }
|
|
}
|
|
|
|
.btn-webhook-next,
|
|
.btn-webhook-create {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
padding: 12px 28px;
|
|
background: $wh-primary; color: #fff;
|
|
border: none; border-radius: 10px;
|
|
font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none;
|
|
&:hover { background: $wh-primary-dark; }
|
|
}
|
|
.btn-webhook-cancel {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
padding: 12px 28px;
|
|
background: #fff; color: $wh-muted;
|
|
border: 1px solid $wh-border; border-radius: 10px;
|
|
font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none;
|
|
&:hover { border-color: $wh-muted; }
|
|
}
|
|
.btn-webhook-danger {
|
|
padding: 12px 28px;
|
|
background: #fff; color: $wh-danger;
|
|
border: 1px solid $wh-danger; border-radius: 10px;
|
|
font-size: 15px; font-weight: 600; cursor: pointer;
|
|
&:hover { background: $wh-danger; color: #fff; }
|
|
}
|
|
.btn-mini {
|
|
padding: 4px 12px;
|
|
background: $wh-bg-soft; color: $wh-primary;
|
|
border: 1px solid $wh-border; border-radius: 8px;
|
|
font-size: 12px; cursor: pointer;
|
|
&:hover { background: rgba($wh-primary, 0.1); }
|
|
}
|
|
.btn-copy {
|
|
padding: 10px 18px;
|
|
background: $wh-primary; color: #fff;
|
|
border: none; border-radius: 8px; cursor: pointer;
|
|
&:hover { background: $wh-primary-dark; }
|
|
}
|
|
|
|
// ---------- 등록 카드 ----------
|
|
.webhook-card {
|
|
border: 1px solid $wh-border;
|
|
border-radius: 14px;
|
|
padding: 24px;
|
|
|
|
.webhook-card-head {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
h3 { font-size: 18px; }
|
|
.webhook-created { color: $wh-muted; font-size: 13px; }
|
|
}
|
|
|
|
.webhook-card-row {
|
|
display: flex;
|
|
gap: 16px;
|
|
padding: 14px 0;
|
|
border-top: 1px solid $wh-border;
|
|
|
|
.row-label { width: 110px; color: $wh-muted; font-weight: 600; flex-shrink: 0; }
|
|
.row-value { flex: 1; word-break: break-all; }
|
|
&.secret-row, .secret-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
code { background: $wh-bg-soft; padding: 4px 8px; border-radius: 6px; }
|
|
}
|
|
|
|
.eventtype-badge,
|
|
.api-badge {
|
|
display: inline-block;
|
|
padding: 4px 10px; margin: 2px 4px 2px 0;
|
|
border-radius: 999px; font-size: 12px;
|
|
background: rgba($wh-primary, 0.1); color: $wh-primary;
|
|
}
|
|
.api-badge { background: $wh-bg-soft; color: $wh-muted; }
|
|
|
|
.webhook-card-actions {
|
|
display: flex; gap: 12px; justify-content: flex-end;
|
|
margin-top: 24px;
|
|
}
|
|
}
|
|
|
|
// ---------- 완료 화면 ----------
|
|
.webhook-complete {
|
|
text-align: center;
|
|
padding: 24px;
|
|
|
|
.complete-icon { font-size: 48px; }
|
|
h3 { margin: 16px 0; }
|
|
|
|
.webhook-secret-box {
|
|
text-align: left;
|
|
max-width: 640px; margin: 24px auto;
|
|
padding: 20px;
|
|
background: $wh-bg-soft; border: 1px solid $wh-border; border-radius: 12px;
|
|
|
|
.secret-warning {
|
|
color: #92400e; background: #fef3c7;
|
|
border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; font-size: 13px;
|
|
}
|
|
label { display: block; font-weight: 600; margin-bottom: 8px; }
|
|
.secret-value-row {
|
|
display: flex; gap: 8px;
|
|
input { flex: 1; padding: 12px 14px; border: 1px solid $wh-border; border-radius: 10px; font-family: monospace; }
|
|
}
|
|
}
|
|
}
|
|
|
|
// ---------- figma s1-form-card 내부 재사용 ----------
|
|
// step1-wrap(s1 디자인) 카드 안에서 등록 카드 요소를 쓸 때
|
|
// 루트 카드 스타일은 .s1-form-card 것을 쓰고 내부 row/배지만 매핑한다.
|
|
.step1-wrap .s1-form-card {
|
|
.webhook-card-head {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
h3 { font-size: 18px; }
|
|
.webhook-created { color: $wh-muted; font-size: 13px; }
|
|
}
|
|
|
|
.webhook-card-row {
|
|
display: flex;
|
|
gap: 16px;
|
|
padding: 14px 0;
|
|
border-top: 1px solid $wh-border;
|
|
|
|
.row-label { width: 110px; color: $wh-muted; font-weight: 600; flex-shrink: 0; }
|
|
.row-value { flex: 1; word-break: break-all; }
|
|
.secret-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
code { background: $wh-bg-soft; padding: 4px 8px; border-radius: 6px; }
|
|
}
|
|
|
|
.eventtype-badge,
|
|
.api-badge {
|
|
display: inline-block;
|
|
padding: 4px 10px; margin: 2px 4px 2px 0;
|
|
border-radius: 999px; font-size: 12px;
|
|
background: rgba($wh-primary, 0.1); color: $wh-primary;
|
|
}
|
|
.api-badge { background: $wh-bg-soft; color: $wh-muted; }
|
|
|
|
// 빈 상태: s1 카드 안에서는 이중 박스 제거
|
|
.webhook-empty {
|
|
background: none;
|
|
border: none;
|
|
padding: 24px 0;
|
|
}
|
|
}
|
|
|
|
// s1-actions 안 취소/이전/삭제 버튼: 좌측 배치
|
|
.step1-wrap .s1-actions,
|
|
.step2-wrap .s1-actions,
|
|
.step3-wrap .s1-actions {
|
|
.btn-webhook-cancel,
|
|
.btn-webhook-danger { margin-right: auto; }
|
|
}
|
|
|
|
// ---------- 개발가이드 링크 ----------
|
|
.webhook-guide-link {
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
|
|
a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 10px 18px;
|
|
border: 1px dashed $wh-border;
|
|
border-radius: 10px;
|
|
color: $wh-primary;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
border-color: $wh-primary;
|
|
background: rgba($wh-primary, 0.05);
|
|
}
|
|
}
|
|
}
|
|
|
|
// ---------- 비밀번호 모달 ----------
|
|
.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-box {
|
|
background: #fff; border-radius: 14px;
|
|
padding: 28px; width: 360px; max-width: 90vw;
|
|
|
|
h4 { font-size: 18px; margin-bottom: 8px; }
|
|
p { color: $wh-muted; font-size: 14px; margin-bottom: 16px; }
|
|
input {
|
|
width: 100%; padding: 12px 14px;
|
|
border: 1px solid $wh-border; border-radius: 10px; margin-bottom: 8px;
|
|
&:focus { outline: none; border-color: $wh-primary; }
|
|
}
|
|
.webhook-modal-actions {
|
|
display: flex; gap: 12px; justify-content: flex-end; margin-top: 12px;
|
|
.btn-webhook-next, .btn-webhook-cancel { padding: 10px 20px; font-size: 14px; }
|
|
}
|
|
}
|
|
}
|