초기 커밋.
This commit is contained in:
525
Views/MainPage.xaml
Normal file
525
Views/MainPage.xaml
Normal file
@@ -0,0 +1,525 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<Page
|
||||
x:Class="TornadoAce_GSShop.Views.MainPage"
|
||||
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:local="using:TornadoAce_GSShop"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
Background="{StaticResource AppCanvasBrush}"
|
||||
Loaded="Page_Loaded"
|
||||
mc:Ignorable="d">
|
||||
<NavigationView
|
||||
x:Name="MainNavigation"
|
||||
AlwaysShowHeader="False"
|
||||
Background="{StaticResource AppCanvasBrush}"
|
||||
IsBackButtonVisible="Collapsed"
|
||||
IsSettingsVisible="False"
|
||||
OpenPaneLength="248"
|
||||
PaneDisplayMode="Left"
|
||||
RequestedTheme="Light">
|
||||
<NavigationView.PaneHeader>
|
||||
<Grid Margin="12,16,12,8">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="38" />
|
||||
<ColumnDefinition Width="*" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<Border
|
||||
Width="34"
|
||||
Height="34"
|
||||
Background="{StaticResource AppInkBrush}"
|
||||
CornerRadius="8">
|
||||
<TextBlock
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
FontSize="15"
|
||||
FontWeight="SemiBold"
|
||||
Foreground="White"
|
||||
Text="GS" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" Spacing="0">
|
||||
<TextBlock
|
||||
FontFamily="Segoe UI Variable Display"
|
||||
FontSize="17"
|
||||
FontWeight="SemiBold"
|
||||
Foreground="{StaticResource AppTextBrush}"
|
||||
Text="TornadoAce" />
|
||||
<TextBlock
|
||||
Style="{StaticResource LabelTextStyle}"
|
||||
Text="GS Shop Control" />
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</NavigationView.PaneHeader>
|
||||
|
||||
<NavigationView.MenuItems>
|
||||
<NavigationViewItem Content="홈" IsSelected="True" Tag="home">
|
||||
<NavigationViewItem.Icon>
|
||||
<SymbolIcon Symbol="Home" />
|
||||
</NavigationViewItem.Icon>
|
||||
</NavigationViewItem>
|
||||
<NavigationViewItem Content="상품" Tag="products">
|
||||
<NavigationViewItem.Icon>
|
||||
<SymbolIcon Symbol="Library" />
|
||||
</NavigationViewItem.Icon>
|
||||
</NavigationViewItem>
|
||||
<NavigationViewItem Content="주문" Tag="orders">
|
||||
<NavigationViewItem.Icon>
|
||||
<SymbolIcon Symbol="Document" />
|
||||
</NavigationViewItem.Icon>
|
||||
</NavigationViewItem>
|
||||
<NavigationViewItem Content="고객" Tag="customers">
|
||||
<NavigationViewItem.Icon>
|
||||
<SymbolIcon Symbol="Contact" />
|
||||
</NavigationViewItem.Icon>
|
||||
</NavigationViewItem>
|
||||
<NavigationViewItem Content="편성" Tag="schedule">
|
||||
<NavigationViewItem.Icon>
|
||||
<SymbolIcon Symbol="Calendar" />
|
||||
</NavigationViewItem.Icon>
|
||||
</NavigationViewItem>
|
||||
<NavigationViewItem Content="설정" Tag="settings">
|
||||
<NavigationViewItem.Icon>
|
||||
<SymbolIcon Symbol="Setting" />
|
||||
</NavigationViewItem.Icon>
|
||||
</NavigationViewItem>
|
||||
</NavigationView.MenuItems>
|
||||
|
||||
<NavigationView.PaneFooter>
|
||||
<Border
|
||||
Margin="12"
|
||||
Padding="12"
|
||||
Background="{StaticResource AppSurfaceBrush}"
|
||||
BorderBrush="{StaticResource AppLineBrush}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="8">
|
||||
<StackPanel Spacing="8">
|
||||
<TextBlock Style="{StaticResource LabelTextStyle}" Text="채널 상태" />
|
||||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||||
<Ellipse
|
||||
Width="9"
|
||||
Height="9"
|
||||
VerticalAlignment="Center"
|
||||
Fill="{StaticResource AppMintBrush}" />
|
||||
<TextBlock
|
||||
FontSize="13"
|
||||
FontWeight="SemiBold"
|
||||
Foreground="{StaticResource AppTextBrush}"
|
||||
Text="Live Preview" />
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
</NavigationView.PaneFooter>
|
||||
|
||||
<Grid Padding="26" RowSpacing="20">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="*" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<Grid ColumnSpacing="20">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<StackPanel Spacing="6">
|
||||
<TextBlock Style="{StaticResource HeroTitleTextStyle}" Text="GS Shop 운영 홈" />
|
||||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||||
<TextBlock Style="{StaticResource BodyTextStyle}" Text="상품, 주문, 웹 미리보기를 한 화면에서 확인" />
|
||||
<TextBlock Style="{StaticResource BodyTextStyle}" Text="·" />
|
||||
<TextBlock x:Name="UpdatedTextBlock" Style="{StaticResource BodyTextStyle}" />
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
|
||||
<StackPanel
|
||||
Grid.Column="1"
|
||||
Orientation="Horizontal"
|
||||
Spacing="8"
|
||||
VerticalAlignment="Top">
|
||||
<Button Style="{StaticResource QuietButtonStyle}" ToolTipService.ToolTip="새로 고침">
|
||||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||||
<SymbolIcon Symbol="Refresh" />
|
||||
<TextBlock Text="동기화" />
|
||||
</StackPanel>
|
||||
</Button>
|
||||
<Button Style="{StaticResource QuietButtonStyle}" ToolTipService.ToolTip="내보내기">
|
||||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||||
<SymbolIcon Symbol="Download" />
|
||||
<TextBlock Text="내보내기" />
|
||||
</StackPanel>
|
||||
</Button>
|
||||
<Button Style="{StaticResource PrimaryActionButtonStyle}" ToolTipService.ToolTip="라이브 적용">
|
||||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||||
<SymbolIcon Foreground="White" Symbol="Play" />
|
||||
<TextBlock Foreground="White" Text="적용" />
|
||||
</StackPanel>
|
||||
</Button>
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
|
||||
<Grid Grid.Row="1" ColumnSpacing="20">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="380" />
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<Grid RowSpacing="16">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="*" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<Grid ColumnSpacing="12">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="*" />
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<Border Padding="16" Style="{StaticResource PanelBorderStyle}">
|
||||
<StackPanel Spacing="10">
|
||||
<TextBlock Style="{StaticResource LabelTextStyle}" Text="오늘 주문" />
|
||||
<TextBlock Style="{StaticResource MetricTextStyle}" Text="1,284" />
|
||||
<StackPanel Orientation="Horizontal" Spacing="6">
|
||||
<Border
|
||||
Padding="8,3"
|
||||
Background="{StaticResource AppMintSoftBrush}"
|
||||
CornerRadius="8">
|
||||
<TextBlock
|
||||
FontSize="12"
|
||||
FontWeight="SemiBold"
|
||||
Foreground="{StaticResource AppMintBrush}"
|
||||
Text="+12.8%" />
|
||||
</Border>
|
||||
<TextBlock
|
||||
VerticalAlignment="Center"
|
||||
Style="{StaticResource LabelTextStyle}"
|
||||
Text="전일 대비" />
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<Border
|
||||
Grid.Column="1"
|
||||
Padding="16"
|
||||
Style="{StaticResource PanelBorderStyle}">
|
||||
<StackPanel Spacing="10">
|
||||
<TextBlock Style="{StaticResource LabelTextStyle}" Text="방송 상품" />
|
||||
<TextBlock Style="{StaticResource MetricTextStyle}" Text="36" />
|
||||
<ProgressBar
|
||||
Height="5"
|
||||
Foreground="{StaticResource AppAccentBrush}"
|
||||
Maximum="100"
|
||||
Value="68" />
|
||||
<TextBlock Style="{StaticResource LabelTextStyle}" Text="68% 준비 완료" />
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<Border
|
||||
Grid.Column="2"
|
||||
Padding="16"
|
||||
Style="{StaticResource PanelBorderStyle}">
|
||||
<StackPanel Spacing="10">
|
||||
<TextBlock Style="{StaticResource LabelTextStyle}" Text="승인 대기" />
|
||||
<TextBlock Style="{StaticResource MetricTextStyle}" Text="7" />
|
||||
<StackPanel Orientation="Horizontal" Spacing="6">
|
||||
<Border
|
||||
Padding="8,3"
|
||||
Background="{StaticResource AppAmberSoftBrush}"
|
||||
CornerRadius="8">
|
||||
<TextBlock
|
||||
FontSize="12"
|
||||
FontWeight="SemiBold"
|
||||
Foreground="{StaticResource AppAmberBrush}"
|
||||
Text="검수" />
|
||||
</Border>
|
||||
<TextBlock
|
||||
VerticalAlignment="Center"
|
||||
Style="{StaticResource LabelTextStyle}"
|
||||
Text="콘텐츠 확인" />
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<Border
|
||||
Grid.Column="3"
|
||||
Padding="16"
|
||||
Style="{StaticResource PanelBorderStyle}">
|
||||
<StackPanel Spacing="10">
|
||||
<TextBlock Style="{StaticResource LabelTextStyle}" Text="알림" />
|
||||
<TextBlock Style="{StaticResource MetricTextStyle}" Text="3" />
|
||||
<StackPanel Orientation="Horizontal" Spacing="6">
|
||||
<Border
|
||||
Padding="8,3"
|
||||
Background="{StaticResource AppCoralSoftBrush}"
|
||||
CornerRadius="8">
|
||||
<TextBlock
|
||||
FontSize="12"
|
||||
FontWeight="SemiBold"
|
||||
Foreground="{StaticResource AppCoralBrush}"
|
||||
Text="주의" />
|
||||
</Border>
|
||||
<TextBlock
|
||||
VerticalAlignment="Center"
|
||||
Style="{StaticResource LabelTextStyle}"
|
||||
Text="가격 변경" />
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
</Grid>
|
||||
|
||||
<Border Grid.Row="1" Style="{StaticResource PanelBorderStyle}">
|
||||
<Grid RowSpacing="12">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="*" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<Grid Padding="16" ColumnSpacing="12">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<StackPanel Orientation="Horizontal" Spacing="8" VerticalAlignment="Center">
|
||||
<Button
|
||||
MinWidth="36"
|
||||
Padding="0"
|
||||
Style="{StaticResource QuietButtonStyle}"
|
||||
ToolTipService.ToolTip="뒤로">
|
||||
<SymbolIcon Symbol="Back" />
|
||||
</Button>
|
||||
<Button
|
||||
MinWidth="36"
|
||||
Padding="0"
|
||||
Style="{StaticResource QuietButtonStyle}"
|
||||
ToolTipService.ToolTip="앞으로">
|
||||
<SymbolIcon Symbol="Forward" />
|
||||
</Button>
|
||||
</StackPanel>
|
||||
|
||||
<Border
|
||||
Grid.Column="1"
|
||||
Height="38"
|
||||
Padding="12,0"
|
||||
Background="{StaticResource AppSurfaceSubtleBrush}"
|
||||
BorderBrush="{StaticResource AppLineBrush}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="8">
|
||||
<Grid ColumnSpacing="8">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition Width="*" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<SymbolIcon
|
||||
VerticalAlignment="Center"
|
||||
Foreground="{StaticResource AppTextMutedBrush}"
|
||||
Symbol="Globe" />
|
||||
<TextBlock
|
||||
Grid.Column="1"
|
||||
VerticalAlignment="Center"
|
||||
Style="{StaticResource MonoTextStyle}"
|
||||
Text="webview2://preview/gs-shop-home" />
|
||||
</Grid>
|
||||
</Border>
|
||||
|
||||
<StackPanel
|
||||
Grid.Column="2"
|
||||
Orientation="Horizontal"
|
||||
Spacing="8">
|
||||
<Button Style="{StaticResource QuietButtonStyle}" ToolTipService.ToolTip="미리보기 새로 고침">
|
||||
<SymbolIcon Symbol="Refresh" />
|
||||
</Button>
|
||||
<Button Style="{StaticResource QuietButtonStyle}" ToolTipService.ToolTip="새 창">
|
||||
<SymbolIcon Symbol="OpenPane" />
|
||||
</Button>
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
x:Name="PreviewHost"
|
||||
Grid.Row="1"
|
||||
Margin="16,0,16,16">
|
||||
<Border
|
||||
Background="#101620"
|
||||
BorderBrush="#202B39"
|
||||
BorderThickness="1"
|
||||
CornerRadius="8" />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Border>
|
||||
</Grid>
|
||||
|
||||
<ScrollViewer
|
||||
Grid.Column="1"
|
||||
VerticalScrollBarVisibility="Auto"
|
||||
VerticalScrollMode="Auto">
|
||||
<StackPanel Spacing="16">
|
||||
<Border Padding="16" Style="{StaticResource PanelBorderStyle}">
|
||||
<StackPanel Spacing="14">
|
||||
<Grid>
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<TextBlock Style="{StaticResource SectionTitleTextStyle}" Text="운영 큐" />
|
||||
<Border
|
||||
Grid.Column="1"
|
||||
Padding="8,4"
|
||||
Background="{StaticResource AppAccentSoftBrush}"
|
||||
CornerRadius="8">
|
||||
<TextBlock
|
||||
FontSize="12"
|
||||
FontWeight="SemiBold"
|
||||
Foreground="{StaticResource AppAccentBrush}"
|
||||
Text="ON AIR" />
|
||||
</Border>
|
||||
</Grid>
|
||||
|
||||
<Grid RowSpacing="12">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<Grid ColumnSpacing="10">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="32" />
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<Border
|
||||
Width="28"
|
||||
Height="28"
|
||||
Background="{StaticResource AppMintSoftBrush}"
|
||||
CornerRadius="8">
|
||||
<SymbolIcon
|
||||
Foreground="{StaticResource AppMintBrush}"
|
||||
Symbol="Accept" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" Spacing="2">
|
||||
<TextBlock
|
||||
FontWeight="SemiBold"
|
||||
Foreground="{StaticResource AppTextBrush}"
|
||||
Text="프라임 상품 카드" />
|
||||
<TextBlock Style="{StaticResource LabelTextStyle}" Text="완료 · 14:20" />
|
||||
</StackPanel>
|
||||
<TextBlock
|
||||
Grid.Column="2"
|
||||
Style="{StaticResource MonoTextStyle}"
|
||||
Text="A-01" />
|
||||
</Grid>
|
||||
|
||||
<Grid Grid.Row="1" ColumnSpacing="10">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="32" />
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<Border
|
||||
Width="28"
|
||||
Height="28"
|
||||
Background="{StaticResource AppAccentSoftBrush}"
|
||||
CornerRadius="8">
|
||||
<SymbolIcon
|
||||
Foreground="{StaticResource AppAccentBrush}"
|
||||
Symbol="Play" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" Spacing="2">
|
||||
<TextBlock
|
||||
FontWeight="SemiBold"
|
||||
Foreground="{StaticResource AppTextBrush}"
|
||||
Text="라이브 상세 배너" />
|
||||
<TextBlock Style="{StaticResource LabelTextStyle}" Text="진행 중 · 14:32" />
|
||||
</StackPanel>
|
||||
<TextBlock
|
||||
Grid.Column="2"
|
||||
Style="{StaticResource MonoTextStyle}"
|
||||
Text="B-04" />
|
||||
</Grid>
|
||||
|
||||
<Grid Grid.Row="2" ColumnSpacing="10">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="32" />
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<Border
|
||||
Width="28"
|
||||
Height="28"
|
||||
Background="{StaticResource AppAmberSoftBrush}"
|
||||
CornerRadius="8">
|
||||
<SymbolIcon
|
||||
Foreground="{StaticResource AppAmberBrush}"
|
||||
Symbol="Clock" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" Spacing="2">
|
||||
<TextBlock
|
||||
FontWeight="SemiBold"
|
||||
Foreground="{StaticResource AppTextBrush}"
|
||||
Text="가격 비교 모듈" />
|
||||
<TextBlock Style="{StaticResource LabelTextStyle}" Text="대기 · 15:00" />
|
||||
</StackPanel>
|
||||
<TextBlock
|
||||
Grid.Column="2"
|
||||
Style="{StaticResource MonoTextStyle}"
|
||||
Text="C-11" />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<Border Padding="16" Style="{StaticResource PanelBorderStyle}">
|
||||
<StackPanel Spacing="14">
|
||||
<TextBlock Style="{StaticResource SectionTitleTextStyle}" Text="화면 옵션" />
|
||||
<ComboBox
|
||||
Header="미리보기 채널"
|
||||
HorizontalAlignment="Stretch"
|
||||
SelectedIndex="0">
|
||||
<ComboBoxItem Content="메인 홈" />
|
||||
<ComboBoxItem Content="상품 상세" />
|
||||
<ComboBoxItem Content="주문 흐름" />
|
||||
</ComboBox>
|
||||
<ToggleSwitch
|
||||
Header="라이브 톤"
|
||||
IsOn="True"
|
||||
OffContent="기본"
|
||||
OnContent="활성" />
|
||||
<StackPanel Spacing="6">
|
||||
<TextBlock Style="{StaticResource LabelTextStyle}" Text="패널 밀도" />
|
||||
<Slider
|
||||
Maximum="100"
|
||||
Minimum="0"
|
||||
Value="64" />
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<Border Padding="16" Style="{StaticResource PanelBorderStyle}">
|
||||
<StackPanel Spacing="14">
|
||||
<TextBlock Style="{StaticResource SectionTitleTextStyle}" Text="출시 체크" />
|
||||
<CheckBox Content="대표 이미지 확인" IsChecked="True" />
|
||||
<CheckBox Content="가격/혜택 문구 확인" IsChecked="True" />
|
||||
<CheckBox Content="모바일 미리보기 확인" />
|
||||
<Button
|
||||
HorizontalAlignment="Stretch"
|
||||
Style="{StaticResource PrimaryActionButtonStyle}">
|
||||
<StackPanel
|
||||
HorizontalAlignment="Center"
|
||||
Orientation="Horizontal"
|
||||
Spacing="8">
|
||||
<SymbolIcon Foreground="White" Symbol="Send" />
|
||||
<TextBlock Foreground="White" Text="검수 요청" />
|
||||
</StackPanel>
|
||||
</Button>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
</StackPanel>
|
||||
</ScrollViewer>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</NavigationView>
|
||||
</Page>
|
||||
360
Views/MainPage.xaml.cs
Normal file
360
Views/MainPage.xaml.cs
Normal file
@@ -0,0 +1,360 @@
|
||||
namespace TornadoAce_GSShop.Views
|
||||
{
|
||||
public partial class MainPage : Page
|
||||
{
|
||||
private WebView2? previewWebView;
|
||||
|
||||
public MainPage()
|
||||
{
|
||||
this.InitializeComponent();
|
||||
}
|
||||
|
||||
private void Page_Loaded(object sender, RoutedEventArgs e)
|
||||
{
|
||||
UpdatedTextBlock.Text = DateTime.Now.ToString("yyyy.MM.dd HH:mm");
|
||||
|
||||
previewWebView ??= new WebView2
|
||||
{
|
||||
Margin = new Thickness(1)
|
||||
};
|
||||
|
||||
if (PreviewHost.Children.Count == 1)
|
||||
{
|
||||
PreviewHost.Children.Add(previewWebView);
|
||||
}
|
||||
|
||||
previewWebView.NavigateToString(BuildPreviewHtml());
|
||||
}
|
||||
|
||||
private static string BuildPreviewHtml() =>
|
||||
"""
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--ink: #111827;
|
||||
--muted: #667085;
|
||||
--line: #d8e0ea;
|
||||
--blue: #2563eb;
|
||||
--mint: #00a884;
|
||||
--coral: #f05a4f;
|
||||
--amber: #b7791f;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
|
||||
color: var(--ink);
|
||||
background:
|
||||
radial-gradient(circle at 16% 18%, rgba(37, 99, 235, .15), transparent 30%),
|
||||
linear-gradient(135deg, #f7fafc 0%, #eef4f8 52%, #fbf2ef 100%);
|
||||
}
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
padding: 42px;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.mark {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 14px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: white;
|
||||
font-weight: 800;
|
||||
background: #111827;
|
||||
box-shadow: 0 18px 40px rgba(17, 24, 39, .18);
|
||||
}
|
||||
|
||||
.brand h1 {
|
||||
margin: 0;
|
||||
font-size: 26px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.brand p {
|
||||
margin: 2px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.chip-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.chip {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid rgba(17, 24, 39, .08);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, .78);
|
||||
backdrop-filter: blur(18px);
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 310px;
|
||||
gap: 24px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.hero {
|
||||
min-height: 430px;
|
||||
border: 1px solid rgba(17, 24, 39, .08);
|
||||
border-radius: 24px;
|
||||
padding: 34px;
|
||||
background: rgba(255, 255, 255, .72);
|
||||
backdrop-filter: blur(24px);
|
||||
box-shadow: 0 24px 70px rgba(28, 38, 55, .14);
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
right: -110px;
|
||||
bottom: -140px;
|
||||
background: conic-gradient(from 40deg, rgba(37, 99, 235, .22), rgba(0, 168, 132, .22), rgba(240, 90, 79, .18), rgba(37, 99, 235, .22));
|
||||
filter: blur(12px);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
color: var(--blue);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hero h2 {
|
||||
max-width: 720px;
|
||||
margin: 12px 0 0;
|
||||
font-size: 46px;
|
||||
line-height: 1.04;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
max-width: 560px;
|
||||
margin-top: 16px;
|
||||
color: var(--muted);
|
||||
font-size: 17px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.tiles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
align-self: end;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tile {
|
||||
min-height: 122px;
|
||||
padding: 18px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(17, 24, 39, .08);
|
||||
background: rgba(255, 255, 255, .82);
|
||||
}
|
||||
|
||||
.tile strong {
|
||||
display: block;
|
||||
font-size: 26px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.tile span {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
aside {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
border: 1px solid rgba(17, 24, 39, .08);
|
||||
border-radius: 20px;
|
||||
padding: 18px;
|
||||
background: rgba(255, 255, 255, .76);
|
||||
backdrop-filter: blur(24px);
|
||||
box-shadow: 0 18px 44px rgba(28, 38, 55, .10);
|
||||
}
|
||||
|
||||
.panel h3 {
|
||||
margin: 0 0 14px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: 10px 1fr auto;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--blue);
|
||||
}
|
||||
|
||||
.dot.mint {
|
||||
background: var(--mint);
|
||||
}
|
||||
|
||||
.dot.coral {
|
||||
background: var(--coral);
|
||||
}
|
||||
|
||||
.row b {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.row small {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.pill {
|
||||
padding: 5px 9px;
|
||||
border-radius: 999px;
|
||||
background: #eef4ff;
|
||||
color: var(--blue);
|
||||
font-weight: 800;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.page {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
header,
|
||||
footer {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main,
|
||||
.tiles {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero h2 {
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header>
|
||||
<div class="brand">
|
||||
<div class="mark">GS</div>
|
||||
<div>
|
||||
<h1>GS Shop Studio</h1>
|
||||
<p>Live commerce workspace</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chip-row">
|
||||
<div class="chip">WebView2</div>
|
||||
<div class="chip">Preview</div>
|
||||
<div class="chip">Ready</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div>
|
||||
<div class="eyebrow">Today at a glance</div>
|
||||
<h2>빠르게 확인하고 바로 운영하는 쇼핑 콘솔</h2>
|
||||
<p class="hero-copy">상품 노출, 주문 흐름, 라이브 배너 상태가 한 화면 안에서 정리되는 샘플 미리보기입니다.</p>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="tiles">
|
||||
<div class="tile"><strong>36</strong><span>방송 상품</span></div>
|
||||
<div class="tile"><strong>1.2K</strong><span>오늘 주문</span></div>
|
||||
<div class="tile"><strong>98%</strong><span>미리보기 정상</span></div>
|
||||
</div>
|
||||
</section>
|
||||
<aside>
|
||||
<section class="panel">
|
||||
<h3>운영 상태</h3>
|
||||
<div class="list">
|
||||
<div class="row"><i class="dot mint"></i><span><b>메인 홈</b><small>게시 준비</small></span><em class="pill">OK</em></div>
|
||||
<div class="row"><i class="dot"></i><span><b>상품 상세</b><small>배너 검수</small></span><em class="pill">LIVE</em></div>
|
||||
<div class="row"><i class="dot coral"></i><span><b>모바일 뷰</b><small>이미지 교체</small></span><em class="pill">TODO</em></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="panel">
|
||||
<h3>다음 편성</h3>
|
||||
<div class="list">
|
||||
<div class="row"><i class="dot"></i><span><b>14:40</b><small>프라임 딜</small></span><em class="pill">A-01</em></div>
|
||||
<div class="row"><i class="dot mint"></i><span><b>15:00</b><small>리빙 특가</small></span><em class="pill">B-04</em></div>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
</main>
|
||||
<footer>
|
||||
<span>TornadoAce GS Shop</span>
|
||||
<span>Rendered inside Microsoft Edge WebView2</span>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
""";
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user