UI 구현

Author: learncold

AGENTS.md

@@ -93,6 +93,24 @@
 - Update docs when structure, build rules, or repository workflow changes.
 - When changing contribution workflow files, keep `CONTRIBUTING.md` and `.github/` files aligned.
 
+## UI Design Guidelines
+- Prefer a calm, minimal desktop UI: light neutral surfaces, restrained accent color, and clear visual hierarchy over heavy borders or high-contrast chrome.
+- Centralize reusable Qt widget styling in shared application-layer helpers instead of scattering large inline `setStyleSheet()` blocks across many widgets.
+- Reuse a small set of design tokens consistently:
+  - spacing around 8 / 12 / 16 / 24 / 32 px
+  - rounded corners around 12-20 px for cards/panels
+  - one primary accent color with muted supporting grays
+- Use typography roles consistently:
+  - large page title
+  - section title
+  - body text
+  - caption/meta text
+- Primary actions should be visually emphasized; secondary actions should stay quieter but still consistent in size, radius, and padding.
+- Prefer card/panel composition with generous padding instead of drawing many separator lines.
+- Keep dense review/workspace screens readable by separating navigation, canvas, and inspector panels with spacing and surface contrast rather than thick borders.
+- Avoid introducing custom UI styling in `domain` or `engine`; all presentation decisions remain in `src/application/`.
+- When adding a new screen or widget, align it with the existing shared UI tokens before introducing a new color, radius, or button treatment.
+
 ## Docs
 - After any changes to the project, ensure the documents remain consistent.
 - Architecture notes: `docs/architecture/프로젝트 구조.md`

CMakeLists.txt

@@ -173,6 +173,7 @@ if (SAFECROWD_BUILD_APP)
         src/application/ProjectNavigatorActions.h
         src/application/ProjectNavigatorWidget.h
         src/application/ProjectPersistence.h
+        src/application/UiStyle.h
         src/application/WorkspaceShell.h
         src/application/IssueCardWidget.cpp
         src/application/LayoutPreviewWidget.cpp
@@ -184,6 +185,7 @@ if (SAFECROWD_BUILD_APP)
         src/application/ProjectNavigatorActions.cpp
         src/application/ProjectNavigatorWidget.cpp
         src/application/ProjectPersistence.cpp
+        src/application/UiStyle.cpp
         src/application/WorkspaceShell.cpp
     )
 

src/application/IssueCardWidget.cpp

@@ -4,18 +4,12 @@
 #include <QMouseEvent>
 #include <QVBoxLayout>
 
+#include "application/UiStyle.h"
 #include "domain/ImportIssue.h"
 
 namespace safecrowd::application {
 namespace {
 
-QFont makeIssueFont(int pointSize) {
-    QFont font;
-    font.setPointSize(pointSize);
-    font.setWeight(QFont::Normal);
-    return font;
-}
-
 QString issueTitle(const safecrowd::domain::ImportIssue& issue) {
     return QString::fromUtf8(safecrowd::domain::toString(issue.code));
 }
@@ -41,44 +35,40 @@ IssueCardWidget::IssueCardWidget(
       selectIssueHandler_(std::move(selectIssueHandler)) {
     setFrameShape(QFrame::StyledPanel);
     setLineWidth(1);
-    setStyleSheet(
-        "IssueCardWidget {"
-        " border: 1px solid #888888;"
-        " background: #ffffff;"
-        "}"
-        "IssueCardWidget:hover {"
-        " background: #f5f5f5;"
-        "}"
-        "QLabel { border: 0; background: transparent; }");
+    setStyleSheet(ui::cardStyleSheet());
+    setCursor(Qt::PointingHandCursor);
 
     auto* layout = new QVBoxLayout(this);
-    layout->setContentsMargins(10, 8, 10, 9);
-    layout->setSpacing(6);
+    layout->setContentsMargins(14, 12, 14, 12);
+    layout->setSpacing(8);
 
     auto* title = new QLabel(issueTitle(issue_), this);
-    title->setFont(makeIssueFont(10));
+    title->setFont(ui::font(ui::FontRole::Body));
     title->setWordWrap(true);
     layout->addWidget(title);
 
     auto* severity = new QLabel(QString::fromUtf8(safecrowd::domain::toString(issue_.severity)), this);
-    severity->setFont(makeIssueFont(8));
-    severity->setStyleSheet("QLabel { color: #a33a24; }");
+    severity->setFont(ui::font(ui::FontRole::Caption));
+    const auto severityColor = issue_.blocksSimulation()
+        ? QColor("#b54708")
+        : (issue_.severity == safecrowd::domain::ImportIssueSeverity::Warning ? QColor("#c27100") : QColor("#1f5fae"));
+    severity->setStyleSheet(ui::severityTextStyleSheet(severityColor));
     layout->addWidget(severity);
 
     if (!issue_.message.empty()) {
         auto* message = new QLabel(QString::fromStdString(issue_.message), this);
-        message->setFont(makeIssueFont(9));
+        message->setFont(ui::font(ui::FontRole::Body));
         message->setWordWrap(true);
-        message->setStyleSheet("QLabel { color: #333333; }");
+        message->setStyleSheet(ui::mutedTextStyleSheet());
         layout->addWidget(message);
     }
 
     const auto targetText = compactTarget(issue_);
     if (!targetText.isEmpty()) {
         auto* target = new QLabel(targetText, this);
-        target->setFont(makeIssueFont(8));
+        target->setFont(ui::font(ui::FontRole::Caption));
         target->setWordWrap(true);
-        target->setStyleSheet("QLabel { color: #555555; }");
+        target->setStyleSheet(ui::subtleTextStyleSheet());
         layout->addWidget(target);
     }
 }

src/application/LayoutPreviewWidget.cpp

@@ -13,6 +13,10 @@
 namespace safecrowd::application {
 namespace {
 
+QRectF previewViewport(const QRect& widgetRect) {
+    return QRectF(widgetRect).adjusted(20, 20, -20, -20);
+}
+
 struct Bounds2D {
     double minX{std::numeric_limits<double>::max()};
     double minY{std::numeric_limits<double>::max()};
@@ -277,7 +281,7 @@ void LayoutPreviewWidget::focusIssueTarget(const QString& targetId) {
     includeMatchingGeometryBounds(importResult_, targetId, targetBounds);
     const auto worldBounds = collectBounds(importResult_);
     if (targetBounds.valid() && worldBounds.has_value()) {
-        const QRectF viewport = rect().adjusted(width() / 12, height() / 12, -width() / 12, -height() / 12);
+        const QRectF viewport = previewViewport(rect());
         const auto targetWidth = std::max(targetBounds.maxX - targetBounds.minX, 1.0);
         const auto targetHeight = std::max(targetBounds.maxY - targetBounds.minY, 1.0);
         const auto targetZoom = 0.55 * std::min(viewport.width() / targetWidth, viewport.height() / targetHeight)
@@ -344,21 +348,29 @@ void LayoutPreviewWidget::paintEvent(QPaintEvent* event) {
 
     QPainter painter(this);
     painter.setRenderHint(QPainter::Antialiasing);
-    painter.fillRect(rect(), Qt::white);
+    painter.fillRect(rect(), QColor(250, 252, 255));
 
     const auto bounds = collectBounds(importResult_);
     if (!bounds.has_value()) {
         painter.setPen(QPen(QColor(80, 80, 80), 1));
-        painter.setFont(QFont("Arial", 14));
+        painter.setFont(QFont("Segoe UI", 14, QFont::DemiBold));
         painter.drawText(rect(), Qt::AlignCenter, "No layout geometry imported");
         return;
     }
 
-    const QRectF viewport = rect().adjusted(width() / 12, height() / 12, -width() / 12, -height() / 12);
+    const QRectF viewport = previewViewport(rect());
     const LayoutTransform transform(*bounds, viewport, zoom_, panOffset_);
 
+    painter.setPen(QPen(QColor(238, 243, 248), 1));
+    for (int x = static_cast<int>(viewport.left()); x < static_cast<int>(viewport.right()); x += 32) {
+        painter.drawLine(QPointF(x, viewport.top()), QPointF(x, viewport.bottom()));
+    }
+    for (int y = static_cast<int>(viewport.top()); y < static_cast<int>(viewport.bottom()); y += 32) {
+        painter.drawLine(QPointF(viewport.left(), y), QPointF(viewport.right(), y));
+    }
+
     painter.setPen(Qt::NoPen);
-    painter.setBrush(QColor(235, 235, 235));
+    painter.setBrush(QColor(231, 238, 246));
     if (importResult_.layout.has_value()) {
         for (const auto& zone : importResult_.layout->zones) {
             painter.drawPath(polygonPath(zone.area, transform));
@@ -370,39 +382,39 @@ void LayoutPreviewWidget::paintEvent(QPaintEvent* event) {
     }
 
     if (importResult_.canonicalGeometry.has_value()) {
-        painter.setBrush(QColor(230, 160, 70, 150));
-        painter.setPen(QPen(QColor(180, 118, 38), 1));
+        painter.setBrush(QColor(222, 145, 70, 120));
+        painter.setPen(QPen(QColor(177, 110, 39), 1.5));
         for (const auto& obstacle : importResult_.canonicalGeometry->obstacles) {
             painter.drawPath(polygonPath(obstacle.footprint, transform));
         }
 
-        painter.setPen(QPen(QColor(70, 70, 70), 3));
+        painter.setPen(QPen(QColor(82, 92, 105), 2.5));
         for (const auto& wall : importResult_.canonicalGeometry->walls) {
             drawLine(painter, wall.segment, transform);
         }
 
-        painter.setPen(QPen(QColor(58, 174, 74), 3, Qt::DashLine));
+        painter.setPen(QPen(QColor(66, 156, 96), 2.5, Qt::DashLine));
         for (const auto& opening : importResult_.canonicalGeometry->openings) {
             drawLine(painter, opening.span, transform);
         }
     }
 
     if (importResult_.layout.has_value()) {
-        painter.setPen(QPen(QColor(62, 150, 210), 2));
+        painter.setPen(QPen(QColor(56, 122, 186), 2.5));
         for (const auto& connection : importResult_.layout->connections) {
             drawLine(painter, connection.centerSpan, transform);
         }
 
-        painter.setPen(QPen(QColor(70, 70, 70), 3));
+        painter.setPen(QPen(QColor(82, 92, 105), 2.5));
         painter.setBrush(Qt::NoBrush);
         for (const auto& barrier : importResult_.layout->barriers) {
             drawPolyline(painter, barrier.geometry, transform);
         }
     }
 
     if (!focusedTargetId_.isEmpty()) {
-        painter.setBrush(QColor(255, 217, 64, 90));
-        painter.setPen(QPen(QColor(210, 55, 55), 4));
+        painter.setBrush(QColor(255, 219, 102, 96));
+        painter.setPen(QPen(QColor(194, 74, 44), 3.5));
 
         if (importResult_.layout.has_value()) {
             for (const auto& zone : importResult_.layout->zones) {
@@ -450,9 +462,10 @@ void LayoutPreviewWidget::paintEvent(QPaintEvent* event) {
         }
     }
 
-    painter.setPen(QPen(QColor(80, 80, 80), 1));
-    painter.setFont(QFont("Arial", 10));
-    painter.drawText(rect().adjusted(8, 8, -8, -8), Qt::AlignTop | Qt::AlignRight, QString("Zoom %1%").arg(static_cast<int>(zoom_ * 100.0)));
+    painter.setPen(QPen(QColor(115, 128, 140), 1));
+    painter.setFont(QFont("Segoe UI", 9, QFont::Medium));
+    painter.drawText(viewport.adjusted(0, -10, 0, 0), Qt::AlignTop | Qt::AlignRight, QString("Zoom %1%").arg(static_cast<int>(zoom_ * 100.0)));
+    painter.drawText(viewport.adjusted(0, -10, 0, 0), Qt::AlignTop | Qt::AlignLeft, "Layout Preview");
 }
 
 void LayoutPreviewWidget::wheelEvent(QWheelEvent* event) {