From 1bb3465e793f40bd0c9f712e6b39cf418d9d1957 Mon Sep 17 00:00:00 2001
From: hj615 <hj615@cuuva.com>
Date: Wed, 3 Dec 2025 13:34:38 +0900
Subject: [PATCH] =?UTF-8?q?design:=20CCTV=20=EB=AA=A9=EB=A1=9D=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 SmartAquaViewer/Resources/Generic.xaml    |  15 +-
 SmartAquaViewer/Resources/Images/cctv.png | Bin 0 -> 460 bytes
 SmartAquaViewer/SmartAquaViewer.csproj    |   2 +
 SmartAquaViewer/View/CCTVView.xaml        | 257 ++++++++++++----------
 SmartAquaViewer/View/EnegyView.xaml       |   2 +-
 SmartAquaViewer/View/GreenHouseView.xaml  |   2 +-
 SmartAquaViewer/View/MonitoringView.xaml  |   2 +-
 7 files changed, 158 insertions(+), 122 deletions(-)
 create mode 100644 SmartAquaViewer/Resources/Images/cctv.png

diff --git a/SmartAquaViewer/Resources/Generic.xaml b/SmartAquaViewer/Resources/Generic.xaml
index 3ae43a4..7fd6046 100644
--- a/SmartAquaViewer/Resources/Generic.xaml
+++ b/SmartAquaViewer/Resources/Generic.xaml
@@ -474,19 +474,22 @@
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
-                    <Border BorderThickness="0,0,0,1" BorderBrush="Black" Background="#2d374f">
+                    <Border BorderThickness="0,0,0,1" BorderBrush="#FFF" 
+                            Background="#1D3649"
+                            Width="{TemplateBinding Width}" >
                         <TextBlock Text="{TemplateBinding Content}" 
                                    Foreground="White"
-                                   Padding="5,5,5,0" 
-                                   Width="{TemplateBinding Width}" 
-                                   TextAlignment="Center" />
+                                   Padding="0"                                   
+                                   TextAlignment="Center" 
+                                   VerticalAlignment="Center"/>
                     </Border>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
         <Setter Property="OverridesDefaultStyle" Value="True" />
         <Setter Property="Foreground" Value="White" />
-        <Setter Property="FontSize" Value="15" />
+        <Setter Property="FontSize" Value="14" />
+        <Setter Property="Height" Value="40"/>
     </Style>
 
     <Style x:Key="GridViewTextBlockStyle" TargetType="{x:Type TextBlock}">
@@ -771,7 +774,7 @@
         <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false" />
     </Style>
 
-    <Style x:Key="GraphButtonStyle" TargetType="Button" BasedOn="{StaticResource MaterialDesignFlatLightBgButton}">
+    <Style x:Key="GeneralButtonStyle" TargetType="Button" BasedOn="{StaticResource MaterialDesignFlatLightBgButton}">
         <Setter Property="FontFamily" Value="{StaticResource SCDream3}" />
         <Setter Property="Foreground" Value="White" />
         <Setter Property="FontSize" Value="16" />
diff --git a/SmartAquaViewer/Resources/Images/cctv.png b/SmartAquaViewer/Resources/Images/cctv.png
new file mode 100644
index 0000000000000000000000000000000000000000..2cde76318adcf0b47d4573769d508bd423f4861c
GIT binary patch
literal 460
zcmeAS@N?(olHy`uVBq!ia0vp^N+8U^3=*07`vZ_-EDmyaVpw-h<|UBBlJ4m1$iT3%
zpZiZDE0FII;1l8sr2kU`Jg=zO05nUYB*-tAq2T`i_wyAR_8Y|83!L}QuV3%bFFzq+
z!H-=kj6gM<1s;*b3=DjSL74G){)!Z!;7d;z#}Etuty6A`H7N+V_Oq~gEQ<X0zy8)E
zvxf`x;&17j9-rH1EOnvtwqelM19O-2@Xnd5oOEC^Tea&%n@2nWHc1@p-yb|=%VbE{
zaJ)xPV!B1<^Zc%F*H&ez_kMbj{C1hM>t)$Vhealy6P)>d>dW*4Z?p@qxZRxbblS`y
zKHJ0T`!3B>I{Ym<)$^%#&HJhSk+=5iboqPT&6}?j`|8fVHDdGE?+utB@Ar#$ujR(I
z9+GL12du9*@mN$HOW(haJ2ca!b6tycNa}^!{1xS5KMEEauKJr^lFYE|AM=FFW4w#C
km_Mnn@0Wa&apR-@MNgi?)>53IKu<Gxy85}Sb4q9e0HgWiPXGV_

literal 0
HcmV?d00001

diff --git a/SmartAquaViewer/SmartAquaViewer.csproj b/SmartAquaViewer/SmartAquaViewer.csproj
index e2f8d82..f76b669 100644
--- a/SmartAquaViewer/SmartAquaViewer.csproj
+++ b/SmartAquaViewer/SmartAquaViewer.csproj
@@ -26,6 +26,7 @@
     <None Remove="Resources\Images\arrow_right.png" />
     <None Remove="Resources\Images\arrow_up.png" />
     <None Remove="Resources\Images\background.png" />
+    <None Remove="Resources\Images\cctv.png" />
     <None Remove="Resources\Images\file_logo.png" />
     <None Remove="Resources\Images\ListImage.png" />
     <None Remove="Resources\Images\max.png" />
@@ -84,6 +85,7 @@
     </Resource>
     <Resource Include="Resources\Images\arrow_up.png" />
     <Resource Include="Resources\Images\background.png" />
+    <Resource Include="Resources\Images\cctv.png" />
     <Resource Include="Resources\Images\file_logo.png" />
     <Resource Include="Resources\Images\ListImage.png" />
     <Resource Include="Resources\Images\max.png" />
diff --git a/SmartAquaViewer/View/CCTVView.xaml b/SmartAquaViewer/View/CCTVView.xaml
index 2e86f49..35d58f8 100644
--- a/SmartAquaViewer/View/CCTVView.xaml
+++ b/SmartAquaViewer/View/CCTVView.xaml
@@ -11,77 +11,110 @@
              xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes"
              mc:Ignorable="d" 
              d:DesignHeight="450" d:DesignWidth="800">
-    <Border >
+    <Border BorderBrush="#1D3649" BorderThickness="0 0 2 0">
         <md:DrawerHost RightDrawerBackground="Transparent" IsRightDrawerOpen="{Binding IsOpenMode}" OpenMode="Standard">
-            <Grid Background="Transparent">
-                <ItemsControl ItemsSource="{Binding PlayerVMs}" Margin="0 0 30 0">
-                    <ItemsControl.ItemsPanel>
-                        <ItemsPanelTemplate>
-                            <UniformGrid x:Name="ugrdFFPlayer" Rows="{Binding RowCount}" Columns="{Binding ColumnCount}" />
-                        </ItemsPanelTemplate>
-                    </ItemsControl.ItemsPanel>
-                    <ItemsControl.ItemTemplate>
-                        <DataTemplate>
-                            <controls:FFPlayerControl/>
-                        </DataTemplate>
-                    </ItemsControl.ItemTemplate>
-                </ItemsControl>
+            <Border>
+                <Grid Background="Transparent">
+                    <ItemsControl ItemsSource="{Binding PlayerVMs}" Margin="0 0 46 0">
+                        <ItemsControl.ItemsPanel>
+                            <ItemsPanelTemplate>
+                                <UniformGrid x:Name="ugrdFFPlayer" Rows="{Binding RowCount}" Columns="{Binding ColumnCount}" />
+                            </ItemsPanelTemplate>
+                        </ItemsControl.ItemsPanel>
+                        <ItemsControl.ItemTemplate>
+                            <DataTemplate>
+                                <controls:FFPlayerControl/>
+                            </DataTemplate>
+                        </ItemsControl.ItemTemplate>
+                    </ItemsControl>
 
-                <Border BorderThickness="0 0 1 0" BorderBrush="#2d374c">
-                    <Border.Style>
-                        <Style TargetType="Border">
-                            <Setter Property="Visibility" Value="Collapsed"/>
-                            <Style.Triggers>
-                                <DataTrigger Binding="{Binding IsOpenMode}" Value="False">
-                                    <Setter Property="Visibility" Value="Visible"/>
-                                </DataTrigger>
-                            </Style.Triggers>
-                        </Style>
-                    </Border.Style>
-                </Border>
-                <Grid HorizontalAlignment="Right">
-                    <Button Tag="left" Margin="0"
-                            Style="{StaticResource ImageButtonStyle}" 
-                            Width="25" Command="{Binding ChangeDrawerStatusCommand}"
-                            VerticalAlignment="Center" HorizontalAlignment="Right" Visibility="{Binding BtnVisibilityLeft}"
-                            helper:ImageButtonHelper.ImageSource="/Resources/Images/arrow_left.png"/>
+                    <Grid HorizontalAlignment="Right">
+                        <Button Name="btnVisibilityRight" Tag="right"
+                                Style="{StaticResource VerticalTrapezoidButtonStyle}" Command="{Binding ChangeDrawerStatusCommand}"
+                                VerticalAlignment="Top" HorizontalAlignment="Left" Visibility="{Binding BtnVisibilityRight}">
+                            <Path Data="M13.0607 12.1111L8.11067 17.0611L9.52467 18.4751L15.8887 12.1111L9.52467 5.7471L8.11067 7.1611L13.0607 12.1111Z"
+                                  Fill="White" Stretch="Uniform"
+                                  Width="7.78" Height="12.728"
+                                  HorizontalAlignment="Center"
+                                  VerticalAlignment="Center"/>
+                        </Button>
 
-                    <Button Tag="right" Margin="0"
-                            Style="{StaticResource ImageButtonStyle}"
-                            Width="25" Command="{Binding ChangeDrawerStatusCommand}"
-                            VerticalAlignment="Center" HorizontalAlignment="Right" Visibility="{Binding BtnVisibilityRight}"
-                            helper:ImageButtonHelper.ImageSource="/Resources/Images/arrow_right.png"/>
+                        <Button Name="btnVisibilityLeft" Tag="left"
+                                Style="{StaticResource VerticalTrapezoidButtonStyle}" Command="{Binding ChangeDrawerStatusCommand}"
+                                VerticalAlignment="Top" HorizontalAlignment="Left" Visibility="{Binding BtnVisibilityLeft}">
+                            <Path Data="M11.1615 12.1111 L16.11153 17.0611 L14.69753 18.4751 L8.3335 12.1111 L14.69753 5.7471 L16.11153 7.1611 Z"
+                                  Fill="White" Stretch="Uniform"
+                                  Width="7.78" Height="12.728"
+                                  HorizontalAlignment="Center"
+                                  VerticalAlignment="Center"/>
+                        </Button>
+                    </Grid>
                 </Grid>
-            </Grid>
+            </Border>
             <md:DrawerHost.RightDrawerContent>
-                <Border Width="300"
-                        BorderBrush="#2d374c" BorderThickness="1">
-                    <Grid>
-                        <Grid.RowDefinitions>
-                            <RowDefinition Height="100"/>
-                            <RowDefinition/>
-                            <RowDefinition Height="40"/>
-                        </Grid.RowDefinitions>
-                        <Grid>
-                            <Border VerticalAlignment="Center" Margin="40 0">
-                                <md:PackIcon Kind="Cctv" Foreground="#ffd663" Width="30" Height="30"/>
-                            </Border>
-                            <TextBlock Text="CCTV 목록" FontFamily="{StaticResource SCDream5}"
-                                       FontSize="20" FontWeight="Bold" Foreground="White"
-                                       VerticalAlignment="Center" HorizontalAlignment="Center"/>
-                        </Grid>
+                <Border Width="348" Background="#1D3649" CornerRadius="0 4 4 0">
+                    <Border Margin="16" CornerRadius="4" Background="#152935"
+                            BorderBrush="#325C80" BorderThickness="1">
+                        <Grid Margin="24">
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="41"/>
+                                <RowDefinition/>
+                                <RowDefinition Height="81"/>
+                            </Grid.RowDefinitions>
+                            <StackPanel Orientation="Horizontal" Margin="0 0 0 16">
+                                <Image Source="/Resources/Images/cctv.png"
+                                       VerticalAlignment="Center"
+                                       Width="20" Height="20"/>
+                                <TextBlock Text="CCTV 목록" FontFamily="{StaticResource SCDream5}"
+                                           FontSize="18" FontWeight="Bold" Foreground="White"
+                                           VerticalAlignment="Center" Margin="8 0"/>
+                            </StackPanel>
+
+                            <ListView Grid.Row="1" Width="250"
+                                      ItemsSource="{Binding CCTVInfoList}"
+                                      ScrollViewer.VerticalScrollBarVisibility="Hidden"
+                                      ScrollViewer.HorizontalScrollBarVisibility="Hidden"
+                                      BorderThickness="0" Background="Transparent">
+                                <ListView.ItemContainerStyle>
+                                    <Style TargetType="ListViewItem">
+                                        <Setter Property="VerticalContentAlignment" Value="Center"/>
+                                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
+                                        <Setter Property="IsHitTestVisible" Value="False"/>
+                                        <Setter Property="Template">
+                                            <Setter.Value>
+                                                <ControlTemplate TargetType="ListViewItem">
+                                                    <Border x:Name="RowBorder"
+                                                            BorderBrush="#767676"
+                                                            BorderThickness="0 0 0 1"
+                                                            Background="Transparent">
+                                                        <GridViewRowPresenter
+                                                            Content="{TemplateBinding Content}"
+                                                            Columns="{Binding RelativeSource={RelativeSource AncestorType=ListView},
+                                                                              Path=View.Columns}"
+                                                            VerticalAlignment="Center"
+                                                            Height="40"/>
+                                                    </Border>
 
-                        <ListView Grid.Row="1" Margin="10 0"
-                                  ItemsSource="{Binding CCTVInfoList}"
-                                  ScrollViewer.VerticalScrollBarVisibility="Hidden"
-                                  BorderThickness="0" Background="Transparent">
-                            <ListView.View>
-                                <GridView ColumnHeaderContainerStyle="{StaticResource GridViewColumnHeaderStyle}">
-                                    <GridViewColumn Header="상태" Width="50">
-                                        <GridViewColumn.CellTemplate>
-                                            <DataTemplate>
-                                                <Grid>
-                                                    <Ellipse Width="15" Height="15" VerticalAlignment="Center" HorizontalAlignment="Center">
+                                                    <ControlTemplate.Triggers>
+                                                        <Trigger Property="IsSelected" Value="True">
+                                                            <Setter TargetName="RowBorder" Property="Background" Value="#2D4B63"/>
+                                                        </Trigger>
+
+                                                        <Trigger Property="IsMouseOver" Value="True">
+                                                            <Setter TargetName="RowBorder" Property="Background" Value="#223E52"/>
+                                                        </Trigger>
+                                                    </ControlTemplate.Triggers>
+                                                </ControlTemplate>
+                                            </Setter.Value>
+                                        </Setter>
+                                    </Style>
+                                </ListView.ItemContainerStyle>
+                                <ListView.View>
+                                    <GridView ColumnHeaderContainerStyle="{StaticResource GridViewColumnHeaderStyle}">
+                                        <GridViewColumn Header="상태" Width="60">
+                                            <GridViewColumn.CellTemplate>
+                                                <DataTemplate>
+                                                    <Ellipse Width="14" Height="14">
                                                         <Ellipse.Style>
                                                             <Style TargetType="Ellipse">
                                                                 <Setter Property="Fill" Value="Red"/>
@@ -93,59 +126,57 @@
                                                             </Style>
                                                         </Ellipse.Style>
                                                     </Ellipse>
-                                                </Grid>
-                                            </DataTemplate>
-                                        </GridViewColumn.CellTemplate>
-                                    </GridViewColumn>
-                                    <GridViewColumn Header="ID" Width="80">
-                                        <GridViewColumn.CellTemplate>
-                                            <DataTemplate>
-                                                <Grid>
+                                                </DataTemplate>
+                                            </GridViewColumn.CellTemplate>
+                                        </GridViewColumn>
+                                        <GridViewColumn Header="ID" Width="95">
+                                            <GridViewColumn.CellTemplate>
+                                                <DataTemplate>
                                                     <TextBlock Text="{Binding DeviceId}" 
-                                                               Style="{StaticResource GridViewTextBlockStyle}"/>
-                                                </Grid>
-                                            </DataTemplate>
-                                        </GridViewColumn.CellTemplate>
-                                    </GridViewColumn>
-                                    <GridViewColumn Header="CCTV" Width="150">
-                                        <GridViewColumn.CellTemplate>
-                                            <DataTemplate>
-                                                <Grid>
+                                                                Style="{StaticResource GridViewTextBlockStyle}"/>
+                                                </DataTemplate>
+                                            </GridViewColumn.CellTemplate>
+                                        </GridViewColumn>
+                                        <GridViewColumn Header="CCTV" Width="95">
+                                            <GridViewColumn.CellTemplate>
+                                                <DataTemplate>
                                                     <TextBlock 
                                                         Text="{Binding DeviceName}" 
                                                         Style="{StaticResource GridViewTextBlockStyle}"/>
-                                                </Grid>
-                                            </DataTemplate>
-                                        </GridViewColumn.CellTemplate>
-                                    </GridViewColumn>
-                                </GridView>
-                            </ListView.View>
-                        </ListView>
-                        
-                        <!--하단 버튼-->
-                        <Grid Grid.Row="2">
-                            <Button Padding="0" Margin="5" Content="재생" 
-                                    Visibility="{Binding BtnVisibilityPlay}"
-                                    HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
-                                    Style="{StaticResource MaterialDesignFlatMidBgButton}"
-                                    FontFamily="{StaticResource SCDream5}"
-                                    Command="{Binding PlayAllCCTVCommand}">
-                                <Button.ToolTip>
-                                    <ToolTip Content="CCTV 재생"/>
-                                </Button.ToolTip>
-                            </Button>
-                            <Button Padding="0" Margin="5" Content="중지" 
-                                    Visibility="{Binding BtnVisibilityStop}"
-                                    HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
-                                    Style="{StaticResource MaterialDesignFlatMidBgButton}"
-                                    FontFamily="{StaticResource SCDream5}"
-                                    Command="{Binding StopAllCCTVCommand}">
-                                <Button.ToolTip>
-                                    <ToolTip Content="CCTV 재생"/>
-                                </Button.ToolTip>
-                            </Button>
+                                                </DataTemplate>
+                                            </GridViewColumn.CellTemplate>
+                                        </GridViewColumn>
+                                    </GridView>
+                                </ListView.View>
+                            </ListView>
+
+                            <!--하단 버튼-->
+                            <Grid Grid.Row="2">
+                                <Button Padding="0" Content="재생" 
+                                        Style="{StaticResource GeneralButtonStyle}"
+                                        Margin="0 16 0 0"
+                                        Width="250" Height="41"
+                                        Visibility="{Binding BtnVisibilityPlay}"
+                                        HorizontalAlignment="Center" VerticalAlignment="Bottom"
+                                        Command="{Binding PlayAllCCTVCommand}">
+                                    <Button.ToolTip>
+                                        <ToolTip Content="CCTV 재생"/>
+                                    </Button.ToolTip>
+                                </Button>
+                                <Button Padding="0" Content="중지" 
+                                        Style="{StaticResource GeneralButtonStyle}"
+                                        Margin="0 16 0 0"
+                                        Width="250" Height="41"
+                                        Visibility="{Binding BtnVisibilityStop}"
+                                        HorizontalAlignment="Stretch" VerticalAlignment="Bottom"
+                                        Command="{Binding StopAllCCTVCommand}">
+                                    <Button.ToolTip>
+                                        <ToolTip Content="CCTV 재생"/>
+                                    </Button.ToolTip>
+                                </Button>
+                            </Grid>
                         </Grid>
-                    </Grid>
+                    </Border>
                 </Border>
             </md:DrawerHost.RightDrawerContent>
         </md:DrawerHost>
diff --git a/SmartAquaViewer/View/EnegyView.xaml b/SmartAquaViewer/View/EnegyView.xaml
index 446828e..4d99db1 100644
--- a/SmartAquaViewer/View/EnegyView.xaml
+++ b/SmartAquaViewer/View/EnegyView.xaml
@@ -529,7 +529,7 @@
                                     <StackPanel Orientation="Horizontal" Grid.Row="1" 
                                                 HorizontalAlignment="Right" Margin="0 0 24 24">
                                         <Button Content="그래프 생성"
-                                                Style="{StaticResource GraphButtonStyle}"
+                                                Style="{StaticResource GeneralButtonStyle}"
                                                 Command="{Binding DrawGraphCommand}"/>
                                     </StackPanel>
                                 </Grid>
diff --git a/SmartAquaViewer/View/GreenHouseView.xaml b/SmartAquaViewer/View/GreenHouseView.xaml
index a0c28e3..6b8b941 100644
--- a/SmartAquaViewer/View/GreenHouseView.xaml
+++ b/SmartAquaViewer/View/GreenHouseView.xaml
@@ -527,7 +527,7 @@
                                     <StackPanel Orientation="Horizontal" Margin="0 0 24 24" 
                                                 Grid.Row="1" HorizontalAlignment="Right">
                                         <Button Content="그래프 생성"
-                                                Style="{StaticResource GraphButtonStyle}"
+                                                Style="{StaticResource GeneralButtonStyle}"
                                                 FontWeight="Bold" Command="{Binding DrawGraphCommand}"/>
                                     </StackPanel>
 
diff --git a/SmartAquaViewer/View/MonitoringView.xaml b/SmartAquaViewer/View/MonitoringView.xaml
index 03c601b..2d640fb 100644
--- a/SmartAquaViewer/View/MonitoringView.xaml
+++ b/SmartAquaViewer/View/MonitoringView.xaml
@@ -924,7 +924,7 @@
                                 </StackPanel>
 
                                 <Button Content="그래프 생성" Grid.Row="1" HorizontalAlignment="Right"
-                                        Style="{StaticResource GraphButtonStyle}"
+                                        Style="{StaticResource GeneralButtonStyle}"
                                         Margin="0 0 24 24" Padding="20 0"
                                         Command="{Binding DrawGraphCommand}"/>
                             </Grid>