From 972e8f7178e76b3094760eec5a537f1cb6fed43a Mon Sep 17 00:00:00 2001 From: Macbook Date: Wed, 27 May 2026 15:51:34 +0900 Subject: [PATCH] =?UTF-8?q?=EC=83=89=EC=83=81=ED=85=8C=EB=A7=88=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.css | 16 ++ frontend/src/styles/verificationBoard.css | 215 ++++++++++++---------- 2 files changed, 129 insertions(+), 102 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index 10b64ed..7ec4c87 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -29,8 +29,12 @@ --panel: #24283b; --text-muted: #6272a4; --btn-bg: rgba(255, 255, 255, 0.07); + --input-bg: #1f2335; + --hover: color-mix(in srgb, var(--accent) 10%, var(--bg2)); + --panel-alt: color-mix(in srgb, var(--text) 4%, var(--bg2)); --accent-muted: color-mix(in srgb, var(--accent) 22%, transparent); --popup-shadow: 0 8px 32px rgba(0, 0, 0, 0.55); + --overlay-scrim: rgba(0, 0, 0, 0.55); } /* ── Dark Theme: 도쿄 나이트 (THEME_SETTINGS.md §2.2) ───────────── */ @@ -54,8 +58,12 @@ html.theme-dark { --panel: #24283b; --text-muted: #6272a4; --btn-bg: rgba(255, 255, 255, 0.07); + --input-bg: #1f2335; + --hover: color-mix(in srgb, var(--accent) 10%, var(--bg2)); + --panel-alt: color-mix(in srgb, var(--text) 4%, var(--bg2)); --accent-muted: color-mix(in srgb, var(--accent) 22%, transparent); --popup-shadow: 0 8px 32px rgba(0, 0, 0, 0.55); + --overlay-scrim: rgba(0, 0, 0, 0.55); } /* ── Light Theme (THEME_SETTINGS.md §2.1) ──────────────────────── */ @@ -79,8 +87,12 @@ html.theme-light { --panel: #ffffff; --text-muted: #757575; --btn-bg: rgba(0, 0, 0, 0.06); + --input-bg: #ffffff; + --hover: color-mix(in srgb, var(--accent) 8%, var(--bg3)); + --panel-alt: color-mix(in srgb, var(--text) 5%, var(--bg2)); --accent-muted: color-mix(in srgb, var(--accent) 14%, transparent); --popup-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); + --overlay-scrim: rgba(0, 0, 0, 0.35); } /* ── Blue Theme: 딥 네이비 (THEME_SETTINGS.md §2.3) ─────────────── */ @@ -104,8 +116,12 @@ html.theme-blue { --panel: #15273d; --text-muted: #7aaed4; --btn-bg: rgba(255, 255, 255, 0.07); + --input-bg: #0f1e30; + --hover: color-mix(in srgb, var(--accent) 10%, var(--bg2)); + --panel-alt: color-mix(in srgb, var(--text) 4%, var(--bg2)); --accent-muted: color-mix(in srgb, var(--accent) 22%, transparent); --popup-shadow: 0 8px 32px rgba(0, 0, 0, 0.55); + --overlay-scrim: rgba(0, 0, 0, 0.55); } /* ── App Root ───────────────────────────────────────────────────── */ diff --git a/frontend/src/styles/verificationBoard.css b/frontend/src/styles/verificationBoard.css index f21d0bd..5827883 100644 --- a/frontend/src/styles/verificationBoard.css +++ b/frontend/src/styles/verificationBoard.css @@ -1,4 +1,15 @@ -/* 검증게시판 */ +/* 검증게시판 — 앱 테마(dark / light / blue) · html.theme-* 포털(토스트·모달) 공통 변수 */ +.bps-page--vbd { + color: var(--text); + background: var(--se-bg, var(--bg)); +} + +.bps-page--vbd .bps-left, +.bps-page--vbd .bps-center { + background: var(--se-bg-elevated, var(--panel)); + border-color: var(--border); +} + .bps-page--vbd .bps-center { min-width: 0; } @@ -14,18 +25,18 @@ align-items: center; gap: 4px; padding: 6px 10px; - border: 1px solid var(--border, #363a45); + border: 1px solid var(--border); border-radius: 6px; - background: var(--panel, #1e222d); - color: var(--text, #d1d4dc); + background: var(--panel); + color: var(--text); font-size: 12px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .vbd-icon-btn:hover:not(:disabled) { - background: var(--hover, #2a2e39); - border-color: var(--accent, #2196f3); + background: var(--hover); + border-color: var(--accent); } .vbd-icon-btn:disabled { @@ -62,16 +73,16 @@ .vbd-search-input { width: 100%; padding: 7px 10px; - border: 1px solid var(--border, #363a45); + border: 1px solid var(--border); border-radius: 6px; - background: var(--input-bg, #131722); - color: var(--text, #d1d4dc); + background: var(--input-bg); + color: var(--text); font-size: 12px; } .vbd-list-count { font-size: 11px; - color: var(--text-muted, #787b86); + color: var(--text-muted); padding: 0 4px; } @@ -91,7 +102,7 @@ .vbd-list-empty { padding: 24px 12px; text-align: center; - color: var(--text-muted, #787b86); + color: var(--text-muted); font-size: 12px; } @@ -103,21 +114,21 @@ width: 100%; padding: 10px 10px; border: none; - border-bottom: 1px solid var(--border, #2a2e39); + border-bottom: 1px solid var(--border); background: transparent; - color: var(--text, #d1d4dc); + color: var(--text); text-align: left; cursor: pointer; transition: background 0.12s; } .vbd-list-item:hover { - background: var(--hover, #2a2e39); + background: var(--hover); } .vbd-list-item--active { - background: rgba(33, 150, 243, 0.12); - border-left: 3px solid var(--accent, #2196f3); + background: var(--accent-muted); + border-left: 3px solid var(--accent); padding-left: 7px; } @@ -174,7 +185,7 @@ .vbd-list-meta { font-size: 10px; - color: var(--text-muted, #787b86); + color: var(--text-muted); white-space: nowrap; } @@ -201,13 +212,13 @@ justify-content: space-between; gap: 12px; padding: 10px 20px 14px; - border-top: 1px solid var(--border, #2a2e39); - background: var(--panel, #1e222d); + border-top: 1px solid var(--border); + background: var(--panel); } .vbd-detail-dirty-hint { font-size: 11px; - color: var(--accent, #2196f3); + color: var(--accent); min-width: 0; flex: 1; } @@ -221,7 +232,7 @@ .vbd-detail--empty { align-items: center; justify-content: center; - color: var(--text-muted, #787b86); + color: var(--text-muted); font-size: 14px; } @@ -246,10 +257,10 @@ flex: 1; min-width: 0; padding: 8px 10px; - border: 1px solid var(--border, #363a45); + border: 1px solid var(--border); border-radius: 6px; - background: var(--input-bg, #131722); - color: var(--text, #d1d4dc); + background: var(--input-bg); + color: var(--text); font-size: 16px; font-weight: 600; } @@ -258,9 +269,9 @@ flex-shrink: 0; min-width: 108px; padding: 8px 10px; - border: 1px solid var(--border, #363a45); + border: 1px solid var(--border); border-radius: 6px; - background: var(--input-bg, #131722); + background: var(--input-bg); font-size: 12px; font-weight: 600; cursor: pointer; @@ -277,10 +288,10 @@ width: 100%; min-height: 160px; padding: 10px 12px; - border: 1px solid var(--border, #363a45); + border: 1px solid var(--border); border-radius: 6px; - background: var(--input-bg, #131722); - color: var(--text, #d1d4dc); + background: var(--input-bg); + color: var(--text); font-family: inherit; font-size: 13px; line-height: 1.65; @@ -292,10 +303,10 @@ flex-wrap: wrap; gap: 16px; font-size: 11px; - color: var(--text-muted, #787b86); + color: var(--text-muted); margin-bottom: 14px; padding-bottom: 12px; - border-bottom: 1px solid var(--border, #2a2e39); + border-bottom: 1px solid var(--border); } .vbd-detail-path { @@ -306,20 +317,20 @@ margin-bottom: 12px; padding: 8px 10px; border-radius: 6px; - background: rgba(33, 150, 243, 0.06); - border: 1px solid rgba(33, 150, 243, 0.2); + background: color-mix(in srgb, var(--accent) 8%, var(--bg2)); + border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); } .vbd-detail-path-label { font-size: 11px; font-weight: 600; - color: var(--accent, #2196f3); + color: var(--accent); flex-shrink: 0; } .vbd-detail-path-value { font-size: 12px; - color: var(--text, #d1d4dc); + color: var(--text); word-break: break-all; } @@ -337,7 +348,7 @@ line-height: 1.65; white-space: pre-wrap; word-break: break-word; - color: var(--text, #d1d4dc); + color: var(--text); } /* 모달 */ @@ -345,7 +356,7 @@ position: fixed; inset: 0; z-index: 6000; - background: rgba(0, 0, 0, 0.55); + background: var(--overlay-scrim); display: flex; align-items: center; justify-content: center; @@ -357,10 +368,10 @@ max-height: 90vh; display: flex; flex-direction: column; - background: var(--panel, #1e222d); - border: 1px solid var(--border, #363a45); + background: var(--panel); + border: 1px solid var(--border); border-radius: 10px; - box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); + box-shadow: var(--popup-shadow); } .vbd-modal--wide { @@ -372,7 +383,7 @@ align-items: center; justify-content: space-between; padding: 14px 16px; - border-bottom: 1px solid var(--border, #363a45); + border-bottom: 1px solid var(--border); } .vbd-modal-header h3 { @@ -384,7 +395,7 @@ .vbd-modal-close { border: none; background: transparent; - color: var(--text-muted, #787b86); + color: var(--text-muted); font-size: 16px; cursor: pointer; padding: 4px 8px; @@ -410,12 +421,12 @@ .vbd-field-label { font-size: 11px; - color: var(--text-muted, #787b86); + color: var(--text-muted); } .vbd-field-hint { font-size: 10px; - color: var(--text-muted, #787b86); + color: var(--text-muted); line-height: 1.4; } @@ -426,10 +437,10 @@ .vbd-path-input { width: 100%; padding: 8px 10px; - border: 1px solid var(--border, #363a45); + border: 1px solid var(--border); border-radius: 6px; - background: var(--input-bg, #131722); - color: var(--text, #d1d4dc); + background: var(--input-bg); + color: var(--text); font-size: 13px; font-family: inherit; box-sizing: border-box; @@ -446,10 +457,10 @@ list-style: none; max-height: 220px; overflow-y: auto; - background: var(--panel, #1e222d); - border: 1px solid var(--border, #363a45); + background: var(--panel); + border: 1px solid var(--border); border-radius: 8px; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); + box-shadow: var(--popup-shadow); } .vbd-path-suggest-item { @@ -458,7 +469,7 @@ padding: 8px 12px; border: none; background: transparent; - color: var(--text, #d1d4dc); + color: var(--text); font-size: 12px; text-align: left; cursor: pointer; @@ -467,24 +478,24 @@ .vbd-path-suggest-item:hover, .vbd-path-suggest-item--active { - background: var(--hover, #2a2e39); - color: var(--accent, #2196f3); + background: var(--hover); + color: var(--accent); } .vbd-path-hint { margin: 4px 0 0; font-size: 10px; - color: var(--text-muted, #787b86); + color: var(--text-muted); } .vbd-field input, .vbd-field select, .vbd-field textarea { padding: 8px 10px; - border: 1px solid var(--border, #363a45); + border: 1px solid var(--border); border-radius: 6px; - background: var(--input-bg, #131722); - color: var(--text, #d1d4dc); + background: var(--input-bg); + color: var(--text); font-size: 13px; font-family: inherit; } @@ -503,17 +514,17 @@ .vbd-btn { padding: 8px 16px; - border: 1px solid var(--border, #363a45); + border: 1px solid var(--border); border-radius: 6px; - background: var(--panel, #1e222d); - color: var(--text, #d1d4dc); + background: var(--panel); + color: var(--text); font-size: 13px; cursor: pointer; } .vbd-btn--primary { - background: var(--accent, #2196f3); - border-color: var(--accent, #2196f3); + background: var(--accent); + border-color: var(--accent); color: #fff; } @@ -534,7 +545,7 @@ flex-direction: column; gap: 10px; padding-top: 12px; - border-top: 1px solid var(--border, #2a2e39); + border-top: 1px solid var(--border); max-height: 45%; min-height: 180px; } @@ -547,7 +558,7 @@ margin: 0; font-size: 14px; font-weight: 600; - color: var(--text, #d1d4dc); + color: var(--text); } .vbd-comments-list { @@ -563,15 +574,15 @@ margin: 0; padding: 12px 0; font-size: 12px; - color: var(--text-muted, #787b86); + color: var(--text-muted); text-align: center; } .vbd-comment { padding: 10px 12px; - border: 1px solid var(--border, #2a2e39); + border: 1px solid var(--border); border-radius: 8px; - background: var(--panel-alt, rgba(255, 255, 255, 0.02)); + background: var(--panel-alt); } .vbd-comment-head { @@ -585,12 +596,12 @@ .vbd-comment-author { font-size: 12px; font-weight: 600; - color: var(--accent, #2196f3); + color: var(--accent); } .vbd-comment-date { font-size: 10px; - color: var(--text-muted, #787b86); + color: var(--text-muted); flex: 1; } @@ -603,14 +614,14 @@ .vbd-comment-action { border: none; background: transparent; - color: var(--text-muted, #787b86); + color: var(--text-muted); font-size: 11px; cursor: pointer; padding: 2px 4px; } .vbd-comment-action:hover:not(:disabled) { - color: var(--text, #d1d4dc); + color: var(--text); } .vbd-comment-action--danger:hover:not(:disabled) { @@ -628,16 +639,16 @@ line-height: 1.55; white-space: pre-wrap; word-break: break-word; - color: var(--text, #d1d4dc); + color: var(--text); } .vbd-comment-textarea { width: 100%; padding: 8px 10px; - border: 1px solid var(--border, #363a45); + border: 1px solid var(--border); border-radius: 6px; - background: var(--input-bg, #131722); - color: var(--text, #d1d4dc); + background: var(--input-bg); + color: var(--text); font-size: 13px; font-family: inherit; resize: vertical; @@ -675,8 +686,8 @@ flex-direction: column; gap: 8px; padding: 12px 0; - border-top: 1px solid var(--border, #2a2e39); - border-bottom: 1px solid var(--border, #2a2e39); + border-top: 1px solid var(--border); + border-bottom: 1px solid var(--border); margin-bottom: 8px; } @@ -713,20 +724,20 @@ position: relative; min-height: 100px; padding: 10px; - border: 1px dashed var(--border, #444); + border: 1px dashed var(--border); border-radius: 8px; - background: rgba(255, 255, 255, 0.02); + background: var(--panel-alt); outline: none; transition: border-color 0.15s, background 0.15s; } .vbd-attach-zone:focus { - border-color: var(--accent, #2196f3); + border-color: var(--accent); } .vbd-attach-zone--over { - border-color: var(--accent, #2196f3); - background: rgba(33, 150, 243, 0.08); + border-color: var(--accent); + background: color-mix(in srgb, var(--accent) 12%, var(--panel-alt)); } .vbd-attach-hint { @@ -734,7 +745,7 @@ padding: 20px 8px; text-align: center; font-size: 12px; - color: var(--text-muted, #787b86); + color: var(--text-muted); line-height: 1.5; } @@ -747,10 +758,10 @@ .vbd-attach-item { position: relative; margin: 0; - border: 1px solid var(--border, #363a45); + border: 1px solid var(--border); border-radius: 6px; overflow: hidden; - background: var(--panel, #1e222d); + background: var(--panel); } .vbd-attach-thumb { @@ -773,7 +784,7 @@ .vbd-attach-caption { padding: 4px 6px; font-size: 10px; - color: var(--text-muted, #787b86); + color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -817,10 +828,10 @@ z-index: 7000; min-width: 180px; padding: 4px 0; - background: var(--panel, #1e222d); - border: 1px solid var(--border, #363a45); + background: var(--panel); + border: 1px solid var(--border); border-radius: 8px; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); + box-shadow: var(--popup-shadow); } .vbd-attach-ctx button { @@ -829,14 +840,14 @@ padding: 8px 14px; border: none; background: transparent; - color: var(--text, #d1d4dc); + color: var(--text); font-size: 13px; text-align: left; cursor: pointer; } .vbd-attach-ctx button:hover { - background: var(--hover, #2a2e39); + background: var(--hover); } /* 검증 이슈 알림 팝업 */ @@ -863,13 +874,13 @@ .vbd-toast-toolbar-label { font-size: 11px; font-weight: 600; - color: var(--text-muted, #787b86); + color: var(--text-muted); } .vbd-toast-dismiss-all { border: none; background: transparent; - color: var(--accent, #2196f3); + color: var(--accent); font-size: 11px; cursor: pointer; padding: 2px 4px; @@ -879,9 +890,9 @@ pointer-events: auto; padding: 12px 14px; border-radius: 10px; - border: 1px solid var(--border, #363a45); - background: var(--panel, #1e222d); - box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); + border: 1px solid var(--border); + background: var(--panel); + box-shadow: var(--popup-shadow); animation: vbd-toast-in 0.22s ease-out; } @@ -904,7 +915,7 @@ .vbd-toast-kind { margin: 0 0 4px; font-size: 11px; - color: var(--text-muted, #787b86); + color: var(--text-muted); } .vbd-toast-title { @@ -918,7 +929,7 @@ .vbd-toast-close { border: none; background: transparent; - color: var(--text-muted, #787b86); + color: var(--text-muted); font-size: 14px; cursor: pointer; padding: 0 2px; @@ -940,14 +951,14 @@ align-items: center; gap: 6px; padding: 6px 10px; - border: 1px solid var(--border, #444); + border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 6px; - background: rgba(33, 150, 243, 0.08); - color: var(--accent, #2196f3); + background: color-mix(in srgb, var(--accent) 10%, var(--panel)); + color: var(--accent); font-size: 12px; cursor: pointer; } .vbd-toast-go:hover { - background: rgba(33, 150, 243, 0.16); + background: color-mix(in srgb, var(--accent) 18%, var(--panel)); }