네비게이션 상단바 이동, 가로 스크롤 고정.

2026-01-09 19:29:06 +09:00
parent 7b93467c6e
commit dde7290ab7
9 changed files with 303 additions and 283 deletions
--- a/ExcelKv.Core/ExcelLoader.cs
+++ b/ExcelKv.Core/ExcelLoader.cs
@@ -144,7 +144,9 @@ public class ExcelLoader
                if (string.IsNullOrWhiteSpace(val)) val = lastLeftValues[c];
                else lastLeftValues[c] = val;
                if(!string.IsNullOrWhiteSpace(val)) {
-                    currentLeftParts.Add(val);
+                    var headerLabel = (c < leftAxisHeaders.Count) ? leftAxisHeaders[c] : $"Col{c}";
+                    var combined = CombineHeaderAndValue(headerLabel, val);
+                    if (!string.IsNullOrWhiteSpace(combined)) currentLeftParts.Add(combined);
                    rowHasContent = true;
                }
            }
@@ -256,15 +258,35 @@ public class ExcelLoader
                string val = (c < headerRows[r].Length) ? headerRows[r][c] : "";
                if (!string.IsNullOrWhiteSpace(val)) parts.Add(val);
            }
-            // If empty, use "Col_Index" fallback or keep empty? 
-            // User schema usually requires keys. If empty, it's skipped in mapping.
-            // Let's keep it empty, but if data exists, it won't map unless we have a key.
-            // If parts is empty, let's leave valid empty string so mapping can decide.
-            flatHeaders.Add(string.Join("__", parts)); 
+            var combined = CombineHeaderParts(parts);
+            if (string.IsNullOrWhiteSpace(combined))
+            {
+                int logicalIndex = c - startCol;
+                combined = $"Col_{logicalIndex}";
+            }
+            flatHeaders.Add(combined); 
        }
        return flatHeaders;
    }

+    private static string CombineHeaderParts(IEnumerable<string> parts)
+    {
+        var clean = parts
+            .Where(p => !string.IsNullOrWhiteSpace(p))
+            .Select(p => p.Trim());
+        var joined = string.Join(".", clean);
+        return joined;
+    }
+
+    private static string CombineHeaderAndValue(string header, string value)
+    {
+        header = header?.Trim() ?? "";
+        value = value?.Trim() ?? "";
+        if (string.IsNullOrWhiteSpace(value)) return "";
+        if (string.IsNullOrWhiteSpace(header)) return value;
+        return $"{header}.{value}";
+    }
+
    private record MergeRange(int StartRow, int EndRow, int StartCol, int EndCol);

    private static List<MergeRange> GetMergedRanges(string filePath, string sheetName)
--- a/SchemaEditor/Components/Layout/MainLayout.razor
+++ b/SchemaEditor/Components/Layout/MainLayout.razor
@@ -1,15 +1,11 @@
@inherits LayoutComponentBase

 <div class="page">
-    <div class="sidebar">
+    <header class="top-nav-wrapper">
        <NavMenu />
-    </div>
-
-    <main>
-        <div class="top-row px-4">
-            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
-        </div>
+    </header>

+    <main class="main-shell">
        <article class="content px-4">
            @Body
        </article>
--- a/SchemaEditor/Components/Layout/MainLayout.razor.css
+++ b/SchemaEditor/Components/Layout/MainLayout.razor.css
@@ -2,77 +2,34 @@
    position: relative;
    display: flex;
    flex-direction: column;
+    min-height: 100vh;
+    background-color: #f8f9fa;
 }

-main {
+.top-nav-wrapper {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.main-shell {
    flex: 1;
-}
-
-.sidebar {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
-}
-
-.top-row {
-    background-color: #f7f7f7;
-    border-bottom: 1px solid #d6d5d5;
-    justify-content: flex-end;
-    height: 3.5rem;
    display: flex;
-    align-items: center;
+    flex-direction: column;
 }

-    .top-row ::deep a, .top-row ::deep .btn-link {
-        white-space: nowrap;
-        margin-left: 1.5rem;
-        text-decoration: none;
-    }
-
-    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
-        text-decoration: underline;
-    }
-
-    .top-row ::deep a:first-child {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-@media (max-width: 640.98px) {
-    .top-row {
-        justify-content: space-between;
-    }
-
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        margin-left: 0;
-    }
+article.content {
+    padding-left: 1.5rem !important;
+    padding-right: 1.5rem !important;
+    max-width: 100%;
+    overflow-x: hidden;
 }

-@media (min-width: 641px) {
-    .page {
-        flex-direction: row;
-    }
-
-    .sidebar {
-        width: 250px;
-        height: 100vh;
-        position: sticky;
-        top: 0;
-    }
-
-    .top-row {
-        position: sticky;
-        top: 0;
-        z-index: 1;
-    }
-
-    .top-row.auth ::deep a:first-child {
-        flex: 1;
-        text-align: right;
-        width: 0;
-    }
-
-    .top-row, article {
+@media (min-width: 992px) {
+    article.content {
        padding-left: 2rem !important;
-        padding-right: 1.5rem !important;
+        padding-right: 2rem !important;
    }
 }

--- a/SchemaEditor/Components/Layout/NavMenu.razor
+++ b/SchemaEditor/Components/Layout/NavMenu.razor
@@ -1,36 +1,41 @@
-<div class="top-row ps-3 navbar navbar-dark">
+<nav class="navbar navbar-expand-lg navbar-dark top-nav">
    <div class="container-fluid">
        <a class="navbar-brand" href="">SchemaEditor</a>
-        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
+        <button title="Navigation menu"
+                class="navbar-toggler"
+                type="button"
+                aria-expanded="@(!collapseNavMenu)"
+                @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
-    </div>
-</div>

-<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
-    <nav class="flex-column">
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
-            </NavLink>
+        <div class="@NavMenuCssClass">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                        <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
+                    </NavLink>
+                </li>
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="editor">
+                        <span class="bi bi-table-view" aria-hidden="true"></span> Editor
+                    </NavLink>
+                </li>
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="data">
+                        <span class="bi bi-database" aria-hidden="true"></span> Data Explorer
+                    </NavLink>
+                </li>
+            </ul>
+            <a class="nav-link small text-light" href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="editor">
-                <span class="bi bi-table-view" aria-hidden="true"></span> Editor
-            </NavLink>
-        </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="data">
-                <span class="bi bi-database" aria-hidden="true"></span> Data Explorer
-            </NavLink>
-        </div>
-    </nav>
-</div>
+    </div>
+</nav>

@code {
    private bool collapseNavMenu = true;

-    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
+    private string NavMenuCssClass => collapseNavMenu ? "collapse navbar-collapse" : "navbar-collapse show";

    private void ToggleNavMenu()
    {
--- a/SchemaEditor/Components/Layout/NavMenu.razor.css
+++ b/SchemaEditor/Components/Layout/NavMenu.razor.css
@@ -1,35 +1,45 @@
-.navbar-toggler {
-    appearance: none;
-    cursor: pointer;
-    width: 3.5rem;
-    height: 2.5rem;
-    color: white;
-    position: absolute;
-    top: 0.5rem;
-    right: 1rem;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
-}
-
-.navbar-toggler:checked {
-    background-color: rgba(255, 255, 255, 0.5);
-}
-
-.top-row {
-    height: 3.5rem;
-    background-color: rgba(0,0,0,0.4);
+.top-nav {
+    background-image: linear-gradient(90deg, rgb(5, 39, 103) 0%, #3a0647 80%);
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
 }

 .navbar-brand {
-    font-size: 1.1rem;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+}
+
+.navbar-toggler {
+    border-color: rgba(255, 255, 255, 0.25);
+}
+
+.navbar-toggler:focus {
+    box-shadow: none;
+}
+
+.top-nav .nav-link {
+    color: #e7e7e7;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+}
+
+.top-nav .nav-link.active,
+.top-nav .nav-link:hover {
+    color: #fff;
+}
+
+.top-nav .nav-link.active {
+    background: rgba(255, 255, 255, 0.18);
+    border-radius: 0.35rem;
 }

 .bi {
    display: inline-block;
    position: relative;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-right: 0.75rem;
+    width: 1.1rem;
+    height: 1.1rem;
+    margin-right: 0.35rem;
    top: -1px;
    background-size: cover;
 }
@@ -46,60 +56,8 @@
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
 }

-.nav-item {
-    font-size: 0.9rem;
-    padding-bottom: 0.5rem;
-}
-
-    .nav-item:first-of-type {
-        padding-top: 1rem;
-    }
-
-    .nav-item:last-of-type {
-        padding-bottom: 1rem;
-    }
-
-    .nav-item ::deep .nav-link {
-        color: #d7d7d7;
-        background: none;
-        border: none;
-        border-radius: 4px;
-        height: 3rem;
-        display: flex;
-        align-items: center;
-        line-height: 3rem;
-        width: 100%;
-    }
-
-.nav-item ::deep a.active {
-    background-color: rgba(255,255,255,0.37);
-    color: white;
-}
-
-.nav-item ::deep .nav-link:hover {
-    background-color: rgba(255,255,255,0.1);
-    color: white;
-}
-
-.nav-scrollable {
-    display: none;
-}
-
-.navbar-toggler:checked ~ .nav-scrollable {
-    display: block;
-}
-
-@media (min-width: 641px) {
-    .navbar-toggler {
-        display: none;
-    }
-
-    .nav-scrollable {
-        /* Never collapse the sidebar for wide screens */
-        display: block;
-
-        /* Allow sidebar to scroll for tall menus */
-        height: calc(100vh - 3.5rem);
-        overflow-y: auto;
+@media (max-width: 991.98px) {
+    .top-nav .nav-link {
+        padding-left: 0.35rem;
    }
 }
--- a/SchemaEditor/Components/Pages/DataExplorer.razor
+++ b/SchemaEditor/Components/Pages/DataExplorer.razor
@@ -34,7 +34,7 @@
                <span class="badge bg-secondary">@searchResults.Count keys found</span>
            </div>
            <div class="card-body p-0">
-                <div class="grid-container" style="height: 600px; overflow-y: auto;">
+                <div class="grid-container">
                    <QuickGrid Items="@searchResults.AsQueryable()" Pagination="@pagination" Class="table table-striped table-hover mb-0">
                        <PropertyColumn Property="@(p => p.Key)" Sortable="true" Title="Key" />
                        <PropertyColumn Property="@(p => p.Value)" Sortable="true" Title="Value" />
--- a/SchemaEditor/Components/Pages/DataExplorer.razor.css
+++ b/SchemaEditor/Components/Pages/DataExplorer.razor.css
@@ -0,0 +1,17 @@
+.grid-container {
+  height: 600px;
+  max-height: 600px;
+  overflow: auto;
+  width: 100%;
+  max-width: 100%;
+}
+
+.grid-container ::deep table {
+  min-width: 100%;
+  width: max-content;
+}
+
+.grid-container ::deep th,
+.grid-container ::deep td {
+  white-space: nowrap;
+}
--- a/SchemaEditor/Components/Pages/Editor.razor
+++ b/SchemaEditor/Components/Pages/Editor.razor
@@ -7,7 +7,7 @@
@inject IJSRuntime JSRuntime
@rendermode InteractiveServer

-<div class="container-fluid">
+<div class="container-fluid editor-page">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3 class="mb-0">Standard Schema Editor</h3>
        @if (ExcelService.LoadedData.Any())
@@ -147,12 +147,12 @@
                    <div class="card-header py-1 bg-white fw-bold small text-muted">
                        RAW PREVIEW
                    </div>
-                    <div class="card-body p-0" style="overflow: auto; max-height: 600px;">
+                    <div class="card-body p-0 preview-scroll table-scroll">
                        <table class="table table-bordered table-sm table-hover mb-0 small" style="font-size: 0.8rem;">
                            <thead class="table-light sticky-top">
                                <tr>
-                                    <th class="text-center">#</th>
-                                    @for (int c = 0; c < (rawData.FirstOrDefault()?.Length ?? 0); c++)
+                                    <th class="text-center sticky-col-header sticky-col sticky-header">#</th>
+                                    @for (int c = 0; c < MaxCols; c++)
                                    {
                                        bool isSearchMatch = SearchMatch(c, -1);
                                        bool isLeftAxis = c >= config.LeftHeaderStartCol && c < config.LeftHeaderStartCol + config.LeftHeaderWidth;
@@ -173,16 +173,17 @@
                                    bool isLimit = (config.DataEndRow.HasValue && r == config.DataEndRow.Value) || (!config.DataEndRow.HasValue && r == rawData.Count - 1);

                                    <tr class="@(isHeaderRow ? "" : "") @(isLimit ? "border-bottom border-3 border-danger" : "")">
-                                        <td style="cursor: pointer;" @onclick="() => SetTopRow(r)" class="text-center fw-bold text-muted bg-light position-relative" title="Click to extend Depth">
+                                        <td style="cursor: pointer;" @onclick="() => SetTopRow(r)" class="text-center fw-bold text-muted bg-light position-relative sticky-col row-index-cell" title="Click to extend Depth">
+                                            @r
                                            @if(isLimit) { <span class="badge bg-danger text-white" style="font-size:0.6em">END</span> }
                                        </td>
                                        @{
                                            int dataStartCol = config.LeftHeaderStartCol + config.LeftHeaderWidth;
                                            bool isDataRowRange = r >= (config.TopHeaderStartRow + config.TopHeaderDepth) && (!config.DataEndRow.HasValue || r <= config.DataEndRow.Value);
                                        }
-                                        @for (int c = 0; c < rawData[r].Length; c++)
+                                        @for (int c = 0; c < MaxCols; c++)
                                        {
-                                            var val = rawData[r][c];
+                                            var val = c < rawData[r].Length ? rawData[r][c] : "";
                                            bool isHighlighted = (r == highlightedRow && c == highlightedCol);
                                            bool isLimitCol = (config.DataEndCol.HasValue && c == config.DataEndCol.Value);
                                            bool isLeftAxisCol = c >= config.LeftHeaderStartCol && c < config.LeftHeaderStartCol + config.LeftHeaderWidth;
@@ -209,12 +210,12 @@
                                                @{
                                                    // Determine if this is the "End" cell
                                                    // Rule: It is the End Row.
-                                                    // And it is either the explicit End Col OR the last column in the row if End Col is null.
+                                                    // And it is either the explicit End Col OR the global max column if End Col is null.
                                                    bool isVisualEndCol = false;
                                                    if (isLimit)
                                                    {
                                                        if (config.DataEndCol.HasValue) isVisualEndCol = (c == config.DataEndCol.Value);
-                                                        else isVisualEndCol = (c == rawData[r].Length - 1);
+                                                        else isVisualEndCol = (c == MaxCols - 1);
                                                    }
                                                }

@@ -251,12 +252,12 @@
                            </div>
                        </div>
                        <div class="card-body p-0">
-                            <div style="height: 560px; overflow-y: auto;">
+                            <div class="result-scroll table-scroll">
                                <table class="table table-striped table-hover mb-0 small">
                                    <thead class="sticky-top bg-light">
                                        <tr>
-                                            <th>Key</th>
-                                            <th>Value</th>
+                                            <th class="sticky-header sticky-col">Key</th>
+                                            <th class="sticky-header">Value</th>
                                        </tr>
                                    </thead>
                                    <tbody>
@@ -266,7 +267,7 @@
                                                class="@(highlightedRow == item.Row && highlightedCol == item.Col ? "table-info border border-2 border-info" : "")"
                                                style="cursor: pointer;" 
                                                @onclick="() => HighlightCell(item.Row, item.Col)">
-                                                <td title="@item.Key">@item.Key</td>
+                                                <td class="sticky-col" title="@item.Key">@item.Key</td>
                                                <td>@item.Value</td>
                                            </tr>
                                        }
@@ -340,6 +341,8 @@
    private int highlightedRow = -1;
    private int highlightedCol = -1;

+    private int MaxCols => rawData.Count == 0 ? 0 : rawData.Max(r => r.Length);
+
    // Search State
    private string searchText = "";
    
--- a/SchemaEditor/Components/Pages/Editor.razor.css
+++ b/SchemaEditor/Components/Pages/Editor.razor.css
@@ -0,0 +1,62 @@
+.editor-page {
+  overflow-x: hidden;
+  max-width: 100%;
+}
+
+:global(article.content) {
+  overflow-x: hidden;
+}
+
+.table-scroll {
+  width: 100%;
+  max-width: 100%;
+  overflow: auto;
+  position: relative;
+}
+
+.table-scroll table {
+  min-width: 100%;
+  width: max-content;
+}
+
+.table-scroll th,
+.table-scroll td {
+  white-space: nowrap;
+}
+
+.preview-scroll {
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.result-scroll {
+  max-height: 560px;
+  overflow-y: auto;
+}
+
+.row-index-cell {
+  min-width: 40px;
+  width: 40px;
+}
+
+.sticky-col {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.sticky-header {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  background: #f8f9fa;
+}
+
+.sticky-col-header {
+  position: sticky;
+  left: 0;
+  top: 0;
+  z-index: 4;
+  background: #f8f9fa;
+}