쿼리 편집기 디자인 맞춤 — 그리고 스크롤이 자동완성을 지우던 결함

■ 목업에 맞춘 것

· 툴바(포맷·주석·자동완성)를 탭 모양으로 — 밑줄이 들어오는 글자 버튼.
· '전체 지우기'를 빨강에서 강조색 링크로. 되돌릴 수 있는 동작이라 위험색을 쓸 이유가 없다
  (TextBox 실행취소에 남는다).
· 검증 결과와 상태 줄을 한 상자로 묶고, 결과가 닫혀 있어도 상태 줄은 남게 했다.
· 결과 표에 머리글 면·격자선·행 높이를 줬다. 컬럼이 52개까지 나오는 조회가 있어
  가로 스크롤이 자연스럽게 보여야 한다.
· 하단 버튼을 왼쪽으로 옮기고 여백·글자 크기를 키웠다. 줄 번호는 세로선으로 본문과 가른다.

■ 스크롤이 자동완성 목록을 지우던 결함

디자인 작업 중 --query-popup 이 '포커스를 잃으면 닫힌다'에서 실패했다.
파고 보니 원인은 포커스가 아니라 <b>그 앞 단계</b>였다 — 목록이 아예 안 열리고 있었다.

편집기가 스크롤되면 목록을 닫도록 해 뒀는데, 긴 문서 끝에서 타이핑하면 그 입력 자체가
스크롤을 일으킨다. 그래서 목록이 열리자마자 스크롤 이벤트가 닫아 버렸다.
실사용에서 '긴 쿼리에서만 자동완성이 안 뜬다'로 나타났을 결함이다.

이제 스크롤에는 닫지 않고 <b>새 자리에 다시 놓는다</b>(WPF Popup 은 열린 채로 Placement 를
다시 계산하지 않으므로 닫았다 다시 연다). 걸려 있던 낱말을 커서가 벗어난 경우에만 닫는다.

회귀: 테스트 230/230, 편집 스모크 실패 0, 팝업·정렬·결과표·단축키 점검 16/16,
DB 왕복 1,271건 diff 0/예외 0, 종이 렌더 P062 바이트 동일.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/SheetMe.Designer/Diagnostics/DbSmoke.cs

@@ -696,7 +696,8 @@ public static class DbSmoke
             System.Windows.Input.Keyboard.ClearFocus();
             box.RaiseEvent(new System.Windows.RoutedEventArgs(System.Windows.UIElement.LostFocusEvent));
             DrainDispatcher();
-            Check("포커스를 잃으면 닫힌다", openBeforeBlur && !popup.IsOpen);
+            Check("포커스를 잃으면 닫힌다", openBeforeBlur && !popup.IsOpen,
+                $"blur 전 열림={openBeforeBlur}, blur 후 열림={popup.IsOpen}");
 
             // ⑦ 바깥 클릭으로 닫히는 설정인지
             Check("바깥 클릭으로 닫히는 설정(StaysOpen=False)", !popup.StaysOpen);

src/SheetMe.Designer/Views/QueryEditorWindow.xaml

@@ -23,11 +23,79 @@
             <Setter Property="Foreground" Value="{DynamicResource B.Ink}"/>
         </Style>
 
-        <!-- 편집기 툴바 버튼 -->
-        <Style x:Key="ToolBtn" TargetType="Button" BasedOn="{StaticResource Subtle}">
-            <Setter Property="Padding" Value="8,3"/>
-            <Setter Property="FontSize" Value="11.5"/>
+        <!-- 편집기 툴바 — 탭처럼 밑줄이 들어오는 글자 버튼 -->
+        <Style x:Key="ToolBtn" TargetType="Button">
+            <Setter Property="Padding" Value="4,6"/>
+            <Setter Property="Margin" Value="0,0,18,0"/>
+            <Setter Property="FontSize" Value="12.5"/>
+            <Setter Property="Cursor" Value="Hand"/>
             <Setter Property="Foreground" Value="{DynamicResource B.Ink}"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Grid Background="Transparent">
+                            <ContentPresenter Margin="{TemplateBinding Padding}"
+                                              HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                            <Border x:Name="rule" Height="2" VerticalAlignment="Bottom"
+                                    Background="Transparent" CornerRadius="1"/>
+                        </Grid>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="rule" Property="Background" Value="{DynamicResource B.Accent}"/>
+                                <Setter Property="Foreground" Value="{DynamicResource B.AccentText}"/>
+                            </Trigger>
+                            <Trigger Property="IsKeyboardFocused" Value="True">
+                                <Setter TargetName="rule" Property="Background" Value="{DynamicResource B.Accent}"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+
+        <!-- 오른쪽 끝의 글자 링크(전체 지우기·닫기) -->
+        <Style x:Key="LinkBtn" TargetType="Button" BasedOn="{StaticResource ToolBtn}">
+            <Setter Property="Margin" Value="0"/>
+            <Setter Property="Foreground" Value="{DynamicResource B.AccentText}"/>
+        </Style>
+
+        <!-- 결과 표 — 머리글은 옅은 면, 줄은 가는 선 -->
+        <Style x:Key="ResultGrid" TargetType="DataGrid">
+            <Setter Property="AutoGenerateColumns" Value="True"/>
+            <Setter Property="IsReadOnly" Value="True"/>
+            <Setter Property="HeadersVisibility" Value="Column"/>
+            <Setter Property="GridLinesVisibility" Value="All"/>
+            <Setter Property="FontSize" Value="12"/>
+            <Setter Property="RowHeight" Value="30"/>
+            <Setter Property="Background" Value="{DynamicResource B.Surface}"/>
+            <Setter Property="BorderBrush" Value="{DynamicResource B.InputBorder}"/>
+            <Setter Property="BorderThickness" Value="1"/>
+            <Setter Property="HorizontalGridLinesBrush" Value="{DynamicResource B.Line}"/>
+            <Setter Property="VerticalGridLinesBrush" Value="{DynamicResource B.Line}"/>
+            <Setter Property="ColumnHeaderStyle">
+                <Setter.Value>
+                    <Style TargetType="DataGridColumnHeader">
+                        <Setter Property="Background" Value="{DynamicResource B.Input}"/>
+                        <Setter Property="Foreground" Value="{DynamicResource B.Ink}"/>
+                        <Setter Property="FontWeight" Value="SemiBold"/>
+                        <Setter Property="FontSize" Value="11.5"/>
+                        <Setter Property="Padding" Value="10,7"/>
+                        <Setter Property="BorderBrush" Value="{DynamicResource B.InputBorder}"/>
+                        <Setter Property="BorderThickness" Value="0,0,1,1"/>
+                        <Setter Property="HorizontalContentAlignment" Value="Left"/>
+                    </Style>
+                </Setter.Value>
+            </Setter>
+            <Setter Property="CellStyle">
+                <Setter.Value>
+                    <Style TargetType="DataGridCell">
+                        <Setter Property="Padding" Value="10,0"/>
+                        <Setter Property="BorderThickness" Value="0"/>
+                        <Setter Property="VerticalContentAlignment" Value="Center"/>
+                        <Setter Property="Foreground" Value="{DynamicResource B.Ink}"/>
+                    </Style>
+                </Setter.Value>
+            </Setter>
         </Style>
 
         <!-- 갈래 칩 -->
@@ -83,22 +151,22 @@
         </StackPanel>
 
         <!-- ── 아래 버튼 줄 ── -->
-        <DockPanel DockPanel.Dock="Bottom" Margin="0,12,0,0">
-            <TextBlock x:Name="ProblemText" VerticalAlignment="Center" Margin="0,0,12,0"
-                       Foreground="{DynamicResource B.Danger}" FontSize="11.5"
-                       TextTrimming="CharacterEllipsis"/>
-            <StackPanel DockPanel.Dock="Right" Orientation="Horizontal">
-                <Button x:Name="TrialButton" Padding="14,6" Click="OnTrial"
+        <DockPanel DockPanel.Dock="Bottom" Margin="0,14,0,0">
+            <StackPanel DockPanel.Dock="Left" Orientation="Horizontal">
+                <Button x:Name="TrialButton" Padding="16,8" Click="OnTrial"
                         ToolTip="DB 에서 실제로 돌려 봅니다 (Ctrl+Enter 또는 F5). 조회만 실행되며 표본 몇 행만 가져옵니다.">
                     <StackPanel Orientation="Horizontal">
-                        <TextBlock Text="▶" FontSize="10" VerticalAlignment="Center" Margin="0,0,6,0"/>
+                        <TextBlock Text="▶" FontSize="10" VerticalAlignment="Center" Margin="0,0,7,0"/>
                         <TextBlock Text="검증 실행" VerticalAlignment="Center"/>
                     </StackPanel>
                 </Button>
-                <Button Content="확인" Padding="24,6" Margin="8,0,0,0"
+                <Button Content="확인" Padding="30,8" Margin="10,0,0,0"
                         Style="{StaticResource Primary}" Click="OnConfirm" IsDefault="True"/>
-                <Button Content="취소" Padding="20,6" Margin="8,0,0,0" IsCancel="True"/>
+                <Button Content="취소" Padding="26,8" Margin="10,0,0,0" IsCancel="True"/>
             </StackPanel>
+            <TextBlock x:Name="ProblemText" VerticalAlignment="Center" Margin="16,0,0,0"
+                       Foreground="{DynamicResource B.Danger}" FontSize="11.5"
+                       TextTrimming="CharacterEllipsis"/>
         </DockPanel>
 
         <Grid>
@@ -115,13 +183,12 @@
                                Margin="0,0,0,10"/>
 
                     <!-- 툴바 -->
-                    <DockPanel DockPanel.Dock="Top" Margin="0,0,0,8">
-                        <Button DockPanel.Dock="Right" Style="{StaticResource ToolBtn}" Click="OnClearAll"
-                                Foreground="{DynamicResource B.Danger}" Content="전체 지우기"
-                                ToolTip="편집 내용을 모두 지웁니다"/>
+                    <DockPanel DockPanel.Dock="Top" Margin="0,0,0,10">
+                        <Button DockPanel.Dock="Right" Style="{StaticResource LinkBtn}" Click="OnClearAll"
+                                Content="전체 지우기" ToolTip="편집 내용을 모두 지웁니다"/>
                         <StackPanel Orientation="Horizontal">
                             <Button Style="{StaticResource ToolBtn}" Content="포맷" Click="OnFormat"
-                                    ToolTip="예약어를 대문자로 바꾸고 절마다 줄을 나눕니다 (Ctrl+Shift+F). 문자열·치환 변수는 건드리지 않습니다."/>
+                                    ToolTip="예약어를 대문자로 바꾸고 절마다 줄을 나눕니다. 문자열·치환 변수는 건드리지 않습니다."/>
                             <Button Style="{StaticResource ToolBtn}" Content="주석" Click="OnToggleComment"
                                     ToolTip="선택한 줄에 -- 를 붙이거나 뗍니다 (Ctrl+/)"/>
                             <Button Style="{StaticResource ToolBtn}" Content="자동완성" Click="OnInvokeCompletion"
@@ -129,40 +196,42 @@
                         </StackPanel>
                     </DockPanel>
 
-                    <!-- 상태 줄 -->
-                    <Border DockPanel.Dock="Bottom" Margin="0,8,0,0" Padding="10,5" CornerRadius="6"
-                            Background="{DynamicResource B.Input}">
+                    <!-- 검증 결과 + 상태 줄 — 목업처럼 한 상자에 묶는다.
+                         결과가 닫혀 있어도 상태 줄은 남아야 하므로 상자 자체는 항상 보인다. -->
+                    <Border DockPanel.Dock="Bottom" Margin="0,10,0,0" MaxHeight="300"
+                            CornerRadius="8" BorderThickness="1"
+                            BorderBrush="{DynamicResource B.InputBorder}" Background="{DynamicResource B.Surface}">
                         <DockPanel>
-                            <TextBlock DockPanel.Dock="Right" x:Name="CaretText" FontSize="11"
+                            <!-- 상태 줄 -->
+                            <Border DockPanel.Dock="Bottom" Padding="12,7"
+                                    BorderThickness="0,1,0,0" BorderBrush="{DynamicResource B.Line}">
+                                <DockPanel>
+                                    <TextBlock DockPanel.Dock="Right" x:Name="CaretText" FontSize="11.5"
                                                Foreground="{DynamicResource B.Muted}"/>
                                     <StackPanel Orientation="Horizontal">
                                         <Ellipse x:Name="ConnDot" Width="7" Height="7" VerticalAlignment="Center"
-                                         Margin="0,0,6,0" Fill="{DynamicResource B.Muted}"/>
-                                <TextBlock x:Name="ConnText" FontSize="11" VerticalAlignment="Center"
+                                                 Margin="0,0,7,0" Fill="{DynamicResource B.Muted}"/>
+                                        <TextBlock x:Name="ConnText" FontSize="11.5" VerticalAlignment="Center"
                                                    Foreground="{DynamicResource B.Muted}"/>
-                                <TextBlock Text="│" FontSize="11" Margin="10,0" VerticalAlignment="Center"
-                                           Foreground="{DynamicResource B.InputBorder}"/>
-                                <TextBlock x:Name="LengthText" FontSize="11" VerticalAlignment="Center"
+                                        <TextBlock Text="│" FontSize="11" Margin="12,0" VerticalAlignment="Center"
+                                                   Foreground="{DynamicResource B.Line}"/>
+                                        <TextBlock x:Name="LengthText" FontSize="11.5" VerticalAlignment="Center"
                                                    Foreground="{DynamicResource B.Muted}"/>
                                     </StackPanel>
                                 </DockPanel>
                             </Border>
 
-                    <!-- 검증 결과 -->
-                    <Border x:Name="TrialPane" DockPanel.Dock="Bottom" Visibility="Collapsed" Margin="0,8,0,0"
-                            MaxHeight="260" CornerRadius="8" BorderThickness="1"
-                            BorderBrush="{DynamicResource B.InputBorder}" Background="{DynamicResource B.Input}">
-                        <DockPanel Margin="10,8">
-                            <DockPanel DockPanel.Dock="Top" Margin="0,0,0,6">
-                                <Button DockPanel.Dock="Right" Content="닫기" Padding="8,1"
-                                        Style="{StaticResource ToolBtn}" Click="OnCloseTrial"/>
-                                <TextBlock x:Name="TrialSummary" FontSize="11.5" TextWrapping="Wrap"/>
+                            <DockPanel x:Name="TrialPane" Visibility="Collapsed" Margin="12,10,12,10">
+                                <DockPanel DockPanel.Dock="Top" Margin="0,0,0,8">
+                                    <Button DockPanel.Dock="Right" Content="닫기"
+                                            Style="{StaticResource LinkBtn}" Click="OnCloseTrial"/>
+                                    <TextBlock x:Name="TrialSummary" FontSize="12.5" TextWrapping="Wrap"
+                                               VerticalAlignment="Center"/>
                                 </DockPanel>
-                            <DataGrid x:Name="TrialGrid" AutoGenerateColumns="True" IsReadOnly="True"
-                                      HeadersVisibility="Column" FontSize="11.5" MaxHeight="200"
-                                      GridLinesVisibility="Horizontal" Background="Transparent"
+                                <DataGrid x:Name="TrialGrid" Style="{StaticResource ResultGrid}" MaxHeight="200"
                                           AutomationProperties.Name="검증 결과 표본"/>
                             </DockPanel>
+                        </DockPanel>
                     </Border>
 
                     <!-- 편집 영역: 색칠 레이어 + 투명 TextBox -->
@@ -173,9 +242,11 @@
                                 <ColumnDefinition Width="Auto"/>
                                 <ColumnDefinition Width="*"/>
                             </Grid.ColumnDefinitions>
-                            <Border Grid.Column="0" Background="{DynamicResource B.Surface}" Padding="8,6">
-                                <TextBlock x:Name="LineNumbers" FontFamily="D2Coding, 굴림체, Consolas" FontSize="13"
-                                           Foreground="{DynamicResource B.Muted}" TextAlignment="Right" MinWidth="24"/>
+                            <!-- 줄 번호 — 본문과 세로선으로 가른다(목업의 구분선) -->
+                            <Border Grid.Column="0" Background="{DynamicResource B.Surface}" Padding="12,10,10,10"
+                                    BorderThickness="0,0,1,0" BorderBrush="{DynamicResource B.Line}">
+                                <TextBlock x:Name="LineNumbers" FontFamily="D2Coding, 굴림체, Consolas" FontSize="13.5"
+                                           Foreground="{DynamicResource B.Muted}" TextAlignment="Right" MinWidth="20"/>
                             </Border>
                             <Grid Grid.Column="1">
                                 <ctl:SqlHighlightLayer x:Name="Highlight" IsHitTestVisible="False"/>
@@ -203,9 +274,9 @@
                                     </Border>
                                 </Popup>
                                 <TextBox x:Name="SqlBox"
-                                         FontFamily="D2Coding, 굴림체, Consolas" FontSize="13"
+                                         FontFamily="D2Coding, 굴림체, Consolas" FontSize="13.5"
                                          AcceptsReturn="True" AcceptsTab="False"
-                                         TextWrapping="NoWrap" Padding="8,6"
+                                         TextWrapping="NoWrap" Padding="12,10"
                                          Background="Transparent" BorderThickness="0"
                                          Foreground="Transparent"
                                          CaretBrush="{DynamicResource B.Ink}"

src/SheetMe.Designer/Views/QueryEditorWindow.xaml.cs

@@ -135,9 +135,11 @@ public partial class QueryEditorWindow : Window
             ConnText.Text = "텍스트 편집";
         }
 
-        // 편집기가 스크롤되면 목록이 걸린 자리가 화면에서 움직인다 — 따라가지 않고 닫는다
+        // 편집기가 스크롤되면 목록이 걸린 자리가 화면에서 움직인다 — 따라가게 다시 놓는다.
+        // 닫아 버리면 안 된다: 긴 문서 끝에서 타이핑하면 그 입력 자체가 스크롤을 일으켜
+        // 목록이 열리자마자 사라진다(진단이 이 상태를 잡았다).
         SqlBox.AddHandler(ScrollViewer.ScrollChangedEvent,
-            new ScrollChangedEventHandler((_, _) => CompletionPopup.IsOpen = false));
+            new ScrollChangedEventHandler((_, _) => RepositionCompletion()));
         // 창을 벗어나면 목록이 다른 창 위에 떠 있게 된다
         Deactivated += (_, _) => CompletionPopup.IsOpen = false;
 
@@ -228,6 +230,29 @@ public partial class QueryEditorWindow : Window
 
     private void OnSqlLostFocus(object sender, RoutedEventArgs e) => CompletionPopup.IsOpen = false;
 
+    /// <summary>
+    /// 스크롤로 자리가 움직였을 때 목록을 새 자리에 다시 놓는다.
+    ///
+    /// WPF Popup 은 열려 있는 동안 Placement 를 다시 계산하지 않으므로 닫았다 다시 연다.
+    /// 걸려 있던 낱말을 커서가 벗어났으면 그때는 닫는다 — 더 이상 유효한 목록이 아니다.
+    /// </summary>
+    private void RepositionCompletion()
+    {
+        if (!CompletionPopup.IsOpen)
+        {
+            return;
+        }
+        var caret = SqlBox.CaretIndex;
+        if (caret < completionStart || caret > completionEnd)
+        {
+            CompletionPopup.IsOpen = false;
+            return;
+        }
+        CompletionPopup.IsOpen = false;
+        PlaceCompletionPopup();
+        CompletionPopup.IsOpen = true;
+    }
+
     private IEnumerable<SqlCompletionItem> CandidatesFor(SqlCompletionQuery query)
     {
         switch (query.Context)