From e30559b3cd924aa49796ba42379903773b7e9b11 Mon Sep 17 00:00:00 2001
From: Yun Chan <yunchan@twentyoz.kr>
Date: Mon, 1 Jun 2026 16:03:50 +0900
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EB=A7=88=EB=AC=B4=EB=A6=AC=20=E2=80=94=20AI=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85=EC=A2=85=EB=A5=98=20=EC=98=B5=EC=85=98=20+=20?=
 =?UTF-8?q?=ED=81=90=20accent=20bar=20+=20=EB=B9=88=20=EC=83=81=ED=83=9C?=
 =?UTF-8?q?=20+=20polish?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

디자인 세션 마지막 단계(순차 workflow). Linear/Geist 영감 polish + AI 작업 선택 UI.

- AI 작업종류 ComboBox(요약/번역/교정) + 번역 대상언어 → BuildOptions의 opts.Ai.Task/TargetLanguage 연결. 이제 Codex로 번역·교정도 가능
- 큐 row 좌측 형식색 accent bar + hover, 빈 상태(Browse + 안내) 개선
- FormatShiftTheme: FsNumStyle/FsLossPillStyle/FsListRowStyle/FsIconButtonStyle 재사용 스타일
---
 .../Views/FormatShiftTheme.xaml               |  78 +++++++
 .../Views/MainWindow.xaml                     | 191 ++++++++++++------
 .../Views/MainWindow.xaml.cs                  |  18 ++
 3 files changed, 226 insertions(+), 61 deletions(-)

diff --git a/src/Everything2Everything.App/Views/FormatShiftTheme.xaml b/src/Everything2Everything.App/Views/FormatShiftTheme.xaml
index 6aa50c0..dbe9df1 100644
--- a/src/Everything2Everything.App/Views/FormatShiftTheme.xaml
+++ b/src/Everything2Everything.App/Views/FormatShiftTheme.xaml
@@ -375,4 +375,82 @@
         <Setter Property="Height" Value="8"/>
         <Setter Property="VerticalAlignment" Value="Center"/>
     </Style>
+
+    <!-- ============================================================
+         UX polish 스타일 (단계 1) — Linear/Geist 영감, 절제된 확장
+         ============================================================ -->
+
+    <!-- 숫자/통계용: 모노 + tabular 숫자 정렬(자리 흔들림 방지) -->
+    <Style x:Key="FsNumStyle" TargetType="TextBlock" BasedOn="{StaticResource FsMonoStyle}">
+        <Setter Property="Typography.NumeralAlignment" Value="Tabular"/>
+        <Setter Property="Typography.NumeralStyle" Value="Lining"/>
+        <Setter Property="Foreground" Value="{StaticResource FsTextSecondary}"/>
+        <Setter Property="TextOptions.TextFormattingMode" Value="Display"/>
+    </Style>
+
+    <!-- 손실 등급 pill: Background는 코드에서 FsLoss*Bg 주입 -->
+    <Style x:Key="FsLossPillStyle" TargetType="Border">
+        <Setter Property="CornerRadius" Value="4"/>
+        <Setter Property="Padding" Value="6,1"/>
+        <Setter Property="VerticalAlignment" Value="Center"/>
+    </Style>
+
+    <!-- 큐/이력 row 공통 컨테이너: 투명 → hover 시 surface, 부드러운 fade -->
+    <Style x:Key="FsListRowStyle" TargetType="Border">
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="CornerRadius" Value="8"/>
+        <Setter Property="BorderThickness" Value="1"/>
+        <Setter Property="BorderBrush" Value="Transparent"/>
+        <Style.Triggers>
+            <Trigger Property="IsMouseOver" Value="True">
+                <Setter Property="Background" Value="{StaticResource FsBgSurfaceHover}"/>
+                <Setter Property="BorderBrush" Value="{StaticResource FsBorderHairline}"/>
+                <Trigger.EnterActions>
+                    <BeginStoryboard>
+                        <Storyboard>
+                            <DoubleAnimation Storyboard.TargetProperty="Opacity"
+                                             From="0.85" To="1" Duration="0:0:0.12"/>
+                        </Storyboard>
+                    </BeginStoryboard>
+                </Trigger.EnterActions>
+            </Trigger>
+        </Style.Triggers>
+    </Style>
+
+    <!-- 32x32 아이콘 버튼(설정 ⚙, 삭제 ×): 투명 → hover surface, radius 6 -->
+    <Style x:Key="FsIconButtonStyle" TargetType="Button">
+        <Setter Property="Width" Value="32"/>
+        <Setter Property="Height" Value="32"/>
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="Foreground" Value="{StaticResource FsTextSecondary}"/>
+        <Setter Property="BorderThickness" Value="0"/>
+        <Setter Property="FontSize" Value="15"/>
+        <Setter Property="Cursor" Value="Hand"/>
+        <Setter Property="HorizontalContentAlignment" Value="Center"/>
+        <Setter Property="VerticalContentAlignment" Value="Center"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <Border x:Name="PART_Bd"
+                            Background="{TemplateBinding Background}"
+                            CornerRadius="6">
+                        <ContentPresenter HorizontalAlignment="Center"
+                                          VerticalAlignment="Center"
+                                          TextElement.Foreground="{TemplateBinding Foreground}"
+                                          TextElement.FontSize="{TemplateBinding FontSize}"/>
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter TargetName="PART_Bd" Property="Background" Value="{StaticResource FsBgSurfaceHover}"/>
+                            <Setter Property="Foreground" Value="{StaticResource FsTextPrimary}"/>
+                        </Trigger>
+                        <Trigger Property="IsEnabled" Value="False">
+                            <Setter TargetName="PART_Bd" Property="Opacity" Value="0.4"/>
+                            <Setter Property="Cursor" Value="Arrow"/>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
 </ResourceDictionary>
diff --git a/src/Everything2Everything.App/Views/MainWindow.xaml b/src/Everything2Everything.App/Views/MainWindow.xaml
index 3af73c6..efa947e 100644
--- a/src/Everything2Everything.App/Views/MainWindow.xaml
+++ b/src/Everything2Everything.App/Views/MainWindow.xaml
@@ -190,6 +190,30 @@
                                 </Border>
                             </StackPanel>
 
+                            <!-- AI Task -->
+                            <StackPanel x:Name="AiTaskPanel" Margin="0,0,0,32">
+                                <TextBlock Text="AI 작업" Style="{StaticResource FsLabelStyle}"/>
+                                <ComboBox x:Name="AiTaskCombo" Margin="0,8,0,0"
+                                          SelectedIndex="0"
+                                          SelectionChanged="OnAiTaskChanged">
+                                    <ComboBoxItem Content="요약"/>
+                                    <ComboBoxItem Content="번역"/>
+                                    <ComboBoxItem Content="교정"/>
+                                </ComboBox>
+                                <TextBlock x:Name="AiTaskHint" Margin="0,6,0,0"
+                                           Style="{StaticResource FsCaptionStyle}"
+                                           Text="텍스트(txt·md·docx) 출력 시 LLM이 적용합니다"/>
+                                <StackPanel x:Name="AiTargetLangPanel" Margin="0,10,0,0"
+                                            Visibility="Collapsed">
+                                    <TextBlock Text="대상 언어" Style="{StaticResource FsCaptionStyle}"
+                                               Margin="0,0,0,4"/>
+                                    <TextBox x:Name="AiTargetLangBox"
+                                             Style="{StaticResource FsPathInputStyle}"
+                                             Text="영어"
+                                             ToolTip="번역 대상 언어 (예: 영어)"/>
+                                </StackPanel>
+                            </StackPanel>
+
                             <!-- Stats Box -->
                             <Border Background="{StaticResource FsBgInput}"
                                     BorderBrush="{StaticResource FsBorderSubtle}"
@@ -365,20 +389,43 @@
                     <!-- Active Queue view -->
                     <Grid x:Name="ActiveQueueView" Visibility="Collapsed">
                         <Grid x:Name="DropZoneEmpty">
-                            <Border Background="{StaticResource FsBgBase}">
-                                <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"
-                                            Margin="48">
-                                    <Path Width="48" Height="48" Stretch="Uniform"
-                                          Stroke="{StaticResource FsAccentBlue}" StrokeThickness="1.5"
-                                          Data="M21,15 L21,19 C21,20.1 20.1,21 19,21 L5,21 C3.9,21 3,20.1 3,19 L3,15 M7,10 L12,15 L17,10 M12,15 L12,3"/>
-                                    <TextBlock Margin="0,16,0,0" FontSize="16" FontWeight="SemiBold"
-                                               Foreground="{StaticResource FsTextPrimary}"
-                                               HorizontalAlignment="Center"
-                                               Text="Drop files anywhere to queue"/>
-                                    <TextBlock Margin="0,4,0,0" Style="{StaticResource FsCaptionStyle}"
-                                               HorizontalAlignment="Center"
-                                               Text="PNG · JPG · GIF · HEIC · RAW · PDF · DOCX · HTML · HWP/HWPX"/>
-                                </StackPanel>
+                            <Border Background="{StaticResource FsBgBase}" Padding="32">
+                                <!-- 점선 드롭존: 절제된 dashed 보더 + 중앙 정렬 안내 -->
+                                <Grid MaxWidth="440"
+                                      HorizontalAlignment="Center"
+                                      VerticalAlignment="Center">
+                                    <!-- 점선 테두리(드롭존 느낌) -->
+                                    <Rectangle RadiusX="10" RadiusY="10"
+                                               Stroke="{StaticResource FsBorderHairline}"
+                                               StrokeThickness="1.25"
+                                               StrokeDashArray="5 4"
+                                               Fill="#04FFFFFF"/>
+                                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"
+                                                Margin="48,56">
+                                        <Path Width="44" Height="44" Stretch="Uniform"
+                                              HorizontalAlignment="Center"
+                                              Stroke="{StaticResource FsAccentBlue}" StrokeThickness="1.5"
+                                              Data="M21,15 L21,19 C21,20.1 20.1,21 19,21 L5,21 C3.9,21 3,20.1 3,19 L3,15 M7,10 L12,15 L17,10 M12,15 L12,3"/>
+                                        <TextBlock Margin="0,18,0,0" FontSize="16" FontWeight="SemiBold"
+                                                   Foreground="{StaticResource FsTextPrimary}"
+                                                   HorizontalAlignment="Center"
+                                                   Text="Drop files anywhere to queue"/>
+                                        <TextBlock Margin="0,6,0,0" Style="{StaticResource FsCaptionStyle}"
+                                                   HorizontalAlignment="Center"
+                                                   TextAlignment="Center"
+                                                   Text="이미지 · 문서 · 데이터 · 영상 · 오디오 등 무엇이든"/>
+                                        <Button Margin="0,22,0,0"
+                                                HorizontalAlignment="Center"
+                                                Style="{StaticResource FsSecondaryButtonStyle}"
+                                                Padding="18,8"
+                                                Content="Browse…"
+                                                Command="{Binding AddFilesCommand, RelativeSource={RelativeSource AncestorType=Window}}"/>
+                                        <TextBlock Margin="0,12,0,0" Style="{StaticResource FsCaptionStyle}"
+                                                   HorizontalAlignment="Center"
+                                                   Foreground="{StaticResource FsTextTertiary}"
+                                                   Text="또는 Ctrl+O"/>
+                                    </StackPanel>
+                                </Grid>
                             </Border>
                         </Grid>
                         <ScrollViewer x:Name="ActiveQueueScroll" VerticalScrollBarVisibility="Auto"
@@ -386,7 +433,8 @@
                             <ItemsControl x:Name="ActiveQueueList">
                                 <ItemsControl.ItemTemplate>
                                     <DataTemplate>
-                                        <Border Margin="0,0,0,8" Padding="12,10" CornerRadius="6"
+                                        <!-- row hover: FsListRowStyle 느낌(투명→surface hover, hairline 보더) + 좌측 형식색 accent bar -->
+                                        <Border x:Name="QueueRow" Margin="0,0,0,8" Padding="0" CornerRadius="6"
                                                 Background="{StaticResource FsBgPanel}"
                                                 BorderBrush="{StaticResource FsBorderSubtle}"
                                                 BorderThickness="1"
@@ -395,58 +443,79 @@
                                                 Tag="{Binding}">
                                             <Grid>
                                                 <Grid.ColumnDefinitions>
-                                                    <ColumnDefinition Width="40"/>
+                                                    <ColumnDefinition Width="2"/>
                                                     <ColumnDefinition Width="*"/>
-                                                    <ColumnDefinition Width="100"/>
-                                                    <ColumnDefinition Width="120"/>
-                                                    <ColumnDefinition Width="40"/>
                                                 </Grid.ColumnDefinitions>
-                                                <Border Width="32" Height="32" CornerRadius="4"
+                                                <!-- 좌측 2px 세로 accent bar: 해당 파일 형식색 -->
+                                                <Border Grid.Column="0"
+                                                        Width="2"
                                                         Background="{Binding FormatBrush}"
-                                                        VerticalAlignment="Center">
-                                                    <TextBlock Text="{Binding FormatLabel}"
-                                                               Foreground="White" FontSize="10"
-                                                               FontWeight="SemiBold"
-                                                               HorizontalAlignment="Center"
-                                                               VerticalAlignment="Center"/>
-                                                </Border>
-                                                <StackPanel Grid.Column="1" Margin="16,0,0,0"
+                                                        CornerRadius="6,0,0,6"/>
+                                                <Grid Grid.Column="1" Margin="12,10">
+                                                    <Grid.ColumnDefinitions>
+                                                        <ColumnDefinition Width="40"/>
+                                                        <ColumnDefinition Width="*"/>
+                                                        <ColumnDefinition Width="100"/>
+                                                        <ColumnDefinition Width="120"/>
+                                                        <ColumnDefinition Width="40"/>
+                                                    </Grid.ColumnDefinitions>
+                                                    <Border Width="32" Height="32" CornerRadius="4"
+                                                            Background="{Binding FormatBrush}"
                                                             VerticalAlignment="Center">
-                                                    <TextBlock Text="{Binding FileName}"
-                                                               Style="{StaticResource FsBodyStyle}"
-                                                               FontWeight="Medium"
-                                                               TextTrimming="CharacterEllipsis"/>
-                                                    <TextBlock Text="{Binding MetaLine}"
-                                                               Style="{StaticResource FsCaptionStyle}"
-                                                               Margin="0,2,0,0"/>
-                                                    <ProgressBar Height="3" Margin="0,4,0,0"
-                                                                 Minimum="0" Maximum="100"
-                                                                 Value="{Binding ProgressValue, Mode=OneWay}"
-                                                                 Visibility="{Binding ProgressVisibility, Mode=OneWay}"/>
-                                                </StackPanel>
-                                                <TextBlock Grid.Column="2" Text="{Binding SizeText}"
-                                                           Style="{StaticResource FsMonoStyle}"
-                                                           HorizontalAlignment="Right"
-                                                           VerticalAlignment="Center"/>
-                                                <TextBlock Grid.Column="3" Text="{Binding StateText}"
-                                                           FontFamily="{StaticResource FsFontMono}"
-                                                           FontSize="12"
-                                                           Foreground="{Binding StateBrush}"
-                                                           VerticalAlignment="Center"/>
-                                                <Button Grid.Column="4"
-                                                        Style="{StaticResource FsSecondaryButtonStyle}"
-                                                        Background="Transparent"
-                                                        BorderThickness="0"
-                                                        Padding="6"
-                                                        Click="OnRemoveQueueItem"
-                                                        Tag="{Binding}">
-                                                    <Path Width="14" Height="14" Stretch="Uniform"
-                                                          Stroke="{StaticResource FsTextTertiary}"
-                                                          StrokeThickness="2"
-                                                          Data="M18,6 L6,18 M6,6 L18,18"/>
-                                                </Button>
+                                                        <TextBlock Text="{Binding FormatLabel}"
+                                                                   Foreground="White" FontSize="10"
+                                                                   FontWeight="SemiBold"
+                                                                   HorizontalAlignment="Center"
+                                                                   VerticalAlignment="Center"/>
+                                                    </Border>
+                                                    <StackPanel Grid.Column="1" Margin="16,0,0,0"
+                                                                VerticalAlignment="Center">
+                                                        <TextBlock Text="{Binding FileName}"
+                                                                   Style="{StaticResource FsBodyStyle}"
+                                                                   FontWeight="Medium"
+                                                                   TextTrimming="CharacterEllipsis"/>
+                                                        <TextBlock Text="{Binding MetaLine}"
+                                                                   Style="{StaticResource FsCaptionStyle}"
+                                                                   Margin="0,2,0,0"/>
+                                                        <ProgressBar Height="3" Margin="0,4,0,0"
+                                                                     Minimum="0" Maximum="100"
+                                                                     Value="{Binding ProgressValue, Mode=OneWay}"
+                                                                     Visibility="{Binding ProgressVisibility, Mode=OneWay}"/>
+                                                    </StackPanel>
+                                                    <TextBlock Grid.Column="2" Text="{Binding SizeText}"
+                                                               Style="{StaticResource FsMonoStyle}"
+                                                               HorizontalAlignment="Right"
+                                                               VerticalAlignment="Center"/>
+                                                    <TextBlock Grid.Column="3" Text="{Binding StateText}"
+                                                               FontFamily="{StaticResource FsFontMono}"
+                                                               FontSize="12"
+                                                               Foreground="{Binding StateBrush}"
+                                                               VerticalAlignment="Center"/>
+                                                    <Button Grid.Column="4"
+                                                            Style="{StaticResource FsIconButtonStyle}"
+                                                            Width="28" Height="28"
+                                                            VerticalAlignment="Center"
+                                                            HorizontalAlignment="Right"
+                                                            ToolTip="큐에서 제거"
+                                                            Click="OnRemoveQueueItem"
+                                                            Tag="{Binding}">
+                                                        <Path Width="13" Height="13" Stretch="Uniform"
+                                                              Stroke="{StaticResource FsTextTertiary}"
+                                                              StrokeThickness="2"
+                                                              Data="M18,6 L6,18 M6,6 L18,18"/>
+                                                    </Button>
+                                                </Grid>
                                             </Grid>
                                         </Border>
+                                        <DataTemplate.Triggers>
+                                            <!-- row hover: 배경 살짝 밝게 + hairline 보더 -->
+                                            <Trigger SourceName="QueueRow" Property="IsMouseOver" Value="True">
+                                                <Setter TargetName="QueueRow" Property="Background"
+                                                        Value="{StaticResource FsBgSurfaceHover}"/>
+                                                <Setter TargetName="QueueRow" Property="BorderBrush"
+                                                        Value="{StaticResource FsBorderHairline}"/>
+                                            </Trigger>
+                                        </DataTemplate.Triggers>
                                     </DataTemplate>
                                 </ItemsControl.ItemTemplate>
                             </ItemsControl>
diff --git a/src/Everything2Everything.App/Views/MainWindow.xaml.cs b/src/Everything2Everything.App/Views/MainWindow.xaml.cs
index 022198c..7e499a6 100644
--- a/src/Everything2Everything.App/Views/MainWindow.xaml.cs
+++ b/src/Everything2Everything.App/Views/MainWindow.xaml.cs
@@ -258,6 +258,14 @@ public partial class MainWindow : Wpf.Ui.Controls.FluentWindow
         };
     }
 
+    private void OnAiTaskChanged(object sender, SelectionChangedEventArgs e)
+    {
+        // 번역(인덱스 1)일 때만 대상 언어 입력을 표시
+        if (AiTargetLangPanel is null) return;
+        AiTargetLangPanel.Visibility =
+            (AiTaskCombo?.SelectedIndex == 1) ? Visibility.Visible : Visibility.Collapsed;
+    }
+
     private void OnPickOutputFolderClick(object sender, RoutedEventArgs e)
     {
         var dlg = new Microsoft.Win32.OpenFolderDialog { Title = "출력 폴더 선택" };
@@ -286,6 +294,16 @@ public partial class MainWindow : Wpf.Ui.Controls.FluentWindow
             opts.OutputLocation = OutputLocation.SubfolderBesideSource;
         }
 
+        // AI 작업 종류 (txt↔txt / md↔md 등 텍스트 변환 시 LlmProvider가 사용)
+        opts.Ai.Task = (AiTaskCombo?.SelectedIndex ?? 0) switch
+        {
+            1 => "translate",
+            2 => "proofread",
+            _ => "summarize",
+        };
+        var targetLang = AiTargetLangBox?.Text?.Trim();
+        opts.Ai.TargetLanguage = string.IsNullOrEmpty(targetLang) ? null : targetLang;
+
         return opts;
     }