feat: Spectrum Web Components로 UI 변경 (#2)

.editorconfig

@@ -0,0 +1,6 @@
+[*.{ts,tsx,js,mts,cts}]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true

.nvmrc

@@ -0,0 +1 @@
+20.14

src/DotNetDevLottery/.npmrc

@@ -0,0 +1 @@
+public-hoist-pattern[]=@spectrum-web-components/theme

src/DotNetDevLottery/App.razor

@@ -1,12 +1,14 @@
-<Router AppAssembly="@typeof(App).Assembly">
-    <Found Context="routeData">
-        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
-        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
-    </Found>
-    <NotFound>
-        <PageTitle>Not found</PageTitle>
-        <LayoutView Layout="@typeof(MainLayout)">
-            <p role="alert">Sorry, there's nothing at this address.</p>
-        </LayoutView>
-    </NotFound>
-</Router>
+<ui-theme scale="large" color="light">
+    <Router AppAssembly="@typeof(App).Assembly">
+        <Found Context="routeData">
+            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+        </Found>
+        <NotFound>
+            <PageTitle>Not found</PageTitle>
+            <LayoutView Layout="@typeof(MainLayout)">
+                <p role="alert">Sorry, there's nothing at this address.</p>
+            </LayoutView>
+        </NotFound>
+    </Router>
+</ui-theme>

src/DotNetDevLottery/DotNetDevLottery.csproj

@@ -5,14 +5,18 @@
         <Nullable>enable</Nullable>
         <ImplicitUsings>enable</ImplicitUsings>
     </PropertyGroup>
-
     <ItemGroup>
       <Compile Remove="wwwroot\js\**" />
       <Content Remove="wwwroot\js\**" />
       <EmbeddedResource Remove="wwwroot\js\**" />
       <None Remove="wwwroot\js\**" />
     </ItemGroup>
-
+    <Target Name="PreBuild" BeforeTargets="Build">
+        <Message Text="Configuration is $(Configuration) $(MSBuildThisFileDirectory)" Importance="high" />
+        <Exec Condition="!Exists('node_modules')" Command="pnpm i" />
+        <Message Text="TypeScript 컴파일 중" Importance="high" />
+        <Exec Command="pnpm build" />
+    </Target>
     <ItemGroup>
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0-rc.1.23421.29" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.0-rc.1.23421.29" PrivateAssets="all" />

src/DotNetDevLottery/Models/UserInfo.cs

@@ -1,10 +1,25 @@
 namespace DotNetDevLottery.Models;
 
-public class UserInfo
+public class UserInfo: IEquatable<object>
 {
     public string? personName { get; init; }
     public string? phone { get; init; }
     public string? email { get; init; }
     public bool? isChecked { get; set; }
     public string? ticketType { get; init; }
+
+    public bool Equals(UserInfo obj)
+    {
+        if (!ReferenceEquals(this, obj))
+        {
+            return true;
+        }
+        if (this.GetType() == obj.GetType())
+        {
+            return false;
+        }
+        return this.personName == obj?.personName
+            && this.phone == obj?.phone
+            && this.email == obj?.email;
+    }
 }

src/DotNetDevLottery/Pages/Main.razor

@@ -1,77 +1,132 @@
 @page "/"
 @inject NavigationManager NavigationManager
+@inject IJSRuntime JSRuntime
 @inject IEventService EventService
 
-<div class="container mx-auto">
-    <ul class="d-flex justify-content-center pt-5 mb-4 btn-group" style="list-style-type: none;">
+<div class="container">
+    <ui-button-group class="event-company">
         @foreach (var eventInfo in EventService.EventInfos.Select((value, index) => new { value, index }))
         {
-            <li class="@InfoButtonWrapperClassName(eventInfo.index == EventService.EventInfos.Count - 1)">
-                <button
-                    type="button"
-                    class="@InfoButtonClassName(eventInfo.index == eventInfoIndex)"
-                    onclick="@(() => OnClickIndexButton(eventInfo.index))"
-                >
-                    @eventInfo.value.name
-                </button>
-            </li>
+            <ui-button
+                variant="@InfoButtonVariant(selectedEventCompanyIndex == eventInfo.index)"
+                fill="@InfoButtonTreatment(selectedEventCompanyIndex == eventInfo.index)"
+                onclick="@(() => OnClickIndexButton(eventInfo.index))">
+                @eventInfo.value.name
+            </ui-button>
         }
-    </ul>
-    <div class="d-flex justify-content-center mb-4 row col-6 mx-auto">
-        <InputFile type="text" class="form-control col" OnChange="@(e => OnInputFileInput(e))" />
-    </div>
+    </ui-button-group>
+    <ui-dropzone
+        @ref="dropzoneElement"
+        class="file-dropzone">
+            @if (targetFile == null)
+            {
+                <span>
+                    파일을 끌어다가 놓아주세요!
+                </span>
+            }
+            else
+            {
+                <span>
+                    @targetFile.Name
+                </span>
+            }
+        <ui-button
+            variant="primary"
+            fill="fill"
+            @onclick="OnClickFileButton">
+            혹은 파일 직접 찾아보기
+        </ui-button>
+        <InputFile
+            type="file"
+            @ref="inputFileElement"
+            class="file-dropzone__input"
+            OnChange="@OnInputFileInput" />
+    </ui-dropzone>
     @if (isSecondFilterOpened)
     {
         <div>
-            <div class="d-flex justify-content-center mb-4 mx-auto">
+            <div class="form-row">
                 @foreach (var groupName in groupNames.Select((value, index) => new { value, index }).ToArray())
                 {
-                    <label class="col-2 mr-2">
-                    <input type="checkbox" @bind="@filterGroup[groupName.index]" />
+                    <ui-checkbox onclick="@(() =>OnClickCheckbox(groupName.index))">
                         @groupName.value
-                    </label>
+                    </ui-checkbox>
                 }
             </div>
-            <div class="d-flex justify-content-center mb-4 mx-auto">
-                    <label>
-                    <input type="checkbox" @bind="@filterCheckedIn" />
-                        체크인 한 사람만 포함
-                    </label>
+            <div class="form-row">
+                <ui-checkbox @onclick="OnClickFilterCheckInCheckbox">
+                    체크인 한 사람만 포함
+                </ui-checkbox>
             </div>
-            <div class="d-flex justify-content-center mb-2 mx-auto">
-                <button type="button" class="btn btn-success mx-auto" @onclick="OnClickGoNextPageButton">이동</button>
+            <div class="form-row">
+                <ui-button variant="accent" @onclick="OnClickGoNextPageButton">
+                    이동
+                </ui-button>
             </div>
         </div>
     }
     else
     {
-        <div class="d-flex justify-content-center mb-4 mx-auto">
-            <button type="button" class="btn btn-success mx-auto" @onclick="OnClickNextButton" disabled="@isLoading">@(isLoading ? "가져오는 중" : "다음")</button>
+        <div class="button-row">
+            <ui-button
+                variant="primary"
+                fill="outline"
+                @onclick="OnClickNextButton"
+                disabled="@isLoading">
+                @(isLoading ? "가져오는 중" : "다음")
+            </ui-button>
         </div>
     }
 </div>
 
 @code {
+    IJSObjectReference? elementUtils;
+    InputFile? inputFileElement;
+    ElementReference dropzoneElement;
+
     IBrowserFile? targetFile;
     bool isLoading = false;
     bool isSecondFilterOpened = false;
-    int eventInfoIndex = 0;
+    int selectedEventCompanyIndex = 0;
     List<string> groupNames = new();
     List<bool> filterGroup = new();
     bool filterCheckedIn = true;
 
-    string InfoButtonWrapperClassName (bool isLast) => isLast ? "me-0" : "me-4";
-    string InfoButtonClassName (bool isSelected) => isSelected ? "btn-primary btn" : "btn-outline-primary btn";
+    string InfoButtonVariant (bool isSelected) => isSelected ? "primary" : "secondary";
+    string InfoButtonTreatment (bool isSelected) => isSelected ? "fill" : "outline";
 
+    protected override async Task OnInitializedAsync()
+    {
+        elementUtils = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./build/js/element.mjs");
+        await elementUtils.InvokeVoidAsync("addDropEventToChangeInputFile", dropzoneElement);
+    }
+
     private void OnClickIndexButton(int index)
     {
-        eventInfoIndex = index;
+        selectedEventCompanyIndex = index;
         this.StateHasChanged();
     }
 
+    private async Task OnClickFileButton()
+    {
+        if (elementUtils == null)
+        {
+            return;
+        }
+        await elementUtils.InvokeVoidAsync("clickElement", inputFileElement?.Element);
+    }
+
+    private void OnClickCheckbox(int index)
+    {
+        filterGroup[index] = !(filterGroup[index]);
+    }
+    private void OnClickFilterCheckInCheckbox()
+    {
+        filterCheckedIn = !filterCheckedIn;
+    }
+
     private void OnInputFileInput(InputFileChangeEventArgs eventArgs)
     {
-        Console.WriteLine(eventArgs.File.ToString());
         targetFile = eventArgs.File;
     }
 
@@ -84,7 +139,7 @@
 
         try
         {
-            await EventService.LoadUserInfoListAsync(eventInfoIndex, targetFile);
+            await EventService.LoadUserInfoListAsync(selectedEventCompanyIndex, targetFile);
             isSecondFilterOpened = true;
             groupNames = EventService.UserInfos
                 .GroupBy((userInfo) => userInfo.ticketType)

src/DotNetDevLottery/Pages/Main.razor.css

@@ -0,0 +1,46 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    width: 1280px;
+
+    @media(max-width: 1024px) {
+        width: 768px;
+    }
+    @media(max-width: 640px) {
+        width: 578px;
+    }
+}
+
+.event-company {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    padding: 2rem 0.5rem;
+    list-style-type: none;
+}
+
+.file-dropzone {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+    margin: 0 auto 2rem;
+
+    & .file-dropzone__input {
+        display: none;
+    }
+}
+
+.form-row {
+    padding: 1rem 0;
+    display: flex;
+    column-gap: 0.75rem;
+    justify-content: center;
+}
+
+.button-row {
+    display: flex;
+    justify-content: center;
+}