[] 서버 반영

1. 쿠키 delete 추가
2. about 페이지  v.0.1 추가
This commit is contained in:
김선규 2025-05-27 15:40:20 +09:00
parent 899a563aac
commit c1fdf2773d
13 changed files with 183 additions and 980 deletions

View File

@ -1,7 +1,4 @@
using System.Net;
using System.Net.Http.Json;
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using Front.Program.Models;
using Front.Program.Services;

View File

@ -26,7 +26,6 @@
</ItemGroup>
<ItemGroup>
<Folder Include="Program\Models\" />
<Folder Include="Program\ViewModels\" />
<Folder Include="Program\Views\Academy\" />
<Folder Include="wwwroot\Resources\" />

View File

@ -24,7 +24,7 @@
<div class="min-h-screen flex flex-col bg-gray-50 text-gray-900">
<!-- Top 영역 -->
<TopBanner />
@* <TopBanner /> *@
<TopNav />
<!-- 본문 영역 -->
@ -36,7 +36,8 @@
@* </div> *@
<!-- 본문 컨텐츠 -->
<main class="flex-1 p-4 sm:p-6 md:p-8">
@* <main class="flex-1 p-4 sm:p-6 md:p-8"> *@
<main class="flex-1">
@Body
</main>
</div>

View File

@ -21,4 +21,9 @@ public class CookieService
{
return await _js.InvokeAsync<string>("getCookie", key);
}
public async Task DeleteCookieAsync(string key)
{
await _js.InvokeVoidAsync("deleteCookie", key);
}
}

View File

@ -1,16 +1,136 @@
@page "/about"
<div class="bg-blue-500 text-white p-4">
<h2 class="text-2xl font-bold">About Us</h2>
<p class="mt-2">We are a team of passionate developers.</p>
<p>이건 그냥 일반 텍스트야</p>
@* 클릭시 onClick 이벤트 발생 *@
<button class="bg-blue-700 text-white px-4 py-2 rounded hover:bg-blue-800"
@onclick="OnClickEvent">
Click Me
</button>
</div>
@* <div class="bg-blue-500 text-white p-4"> *@
@* <h2 class="text-2xl font-bold">About Us</h2> *@
@* <p class="mt-2">We are a team of passionate developers.</p> *@
@* <p>이건 그냥 일반 텍스트텍스트텍스트텍스트텍스트</p> *@
@* *@
@* $1$ 클릭시 onClick 이벤트 발생 #1# *@
@* *@
@* *@
@* <button class="bg-blue-700 text-white px-4 py-2 rounded hover:bg-blue-800" *@
@* @onclick="OnClickEvent"> *@
@* Click Me *@
@* </button> *@
@* *@
@* </div> *@
@* <html> *@
@* <head> *@
@* <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="" /> *@
@* <link *@
@* rel="stylesheet" *@
@* as="style" *@
@* onload="this.rel='stylesheet'" *@
@* href="https://fonts.googleapis.com/css2?display=swap&amp;family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&amp;family=Plus+Jakarta+Sans%3Awght%40400%3B500%3B700%3B800" *@
@* /> *@
@* *@
@* <title>Stitch Design</title> *@
@* <link rel="icon" type="image/x-icon" href="data:image/x-icon;base64," /> *@
@* *@
@* <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> *@
@* </head> *@
@* <body> *@
<div class="relative flex size-full min-h-screen flex-col bg-white group/design-root overflow-x-hidden" style='font-family: "Plus Jakarta Sans", "Noto Sans", sans-serif;'>
<div class="layout-container flex h-full grow flex-col">
<div class="flex flex-1 justify-center">
<div class="layout-content-container flex flex-col max-w-[960px] flex-1">
<div class="container">
<div class="[480px]:p-4">
<div
class="flex min-h-[480px] flex-col gap-6 bg-cover bg-center bg-no-repeat [480px]:gap-8 [480px]:rounded-lg items-start justify-end px-4 pb-10 [480px]:px-10"
style='background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%), url("https://lh3.googleusercontent.com/aida-public/AB6AXuDffY0eohqZnXKdWwIoiHloiYxZ1igyaJWtn7zdpfeze7pDhQuxV3MqvGueO1m-a38SDlXVEZUkd8es8cB8YvKHf8J-FIzTPFEHU4UnTNRBnX0XGv0EoZGrutA0kHnI_IA0k0SLtlU7NUK_7EcLabUHzALRgVZhcP98Bd-2GZl85-6ODqSHpe11pHXpyMz3RDDEzhDuHAwBBfJJaJG7zFC22X8Cc0K_V97Vf7jXfs-WYJ5CCrKAE3JpT2RUbdEJfiJHOkDh9yGWU1TB");'
>
<div class="flex flex-col gap-2 text-left">
<h1
class="text-white text-4xl font-black leading-tight tracking-[-0.033em] [480px]:text-5xl [480px]:font-black [480px]:leading-tight [480px]:tracking-[-0.033em] outline-none"
>
Empowering Education, Together
</h1>
<h2 class="text-white text-sm font-normal leading-normal [480px]:text-base [480px]:font-normal [480px]:leading-normal">
AcaMate is your all-in-one platform for managing your academy, connecting with parents, and supporting student success.
</h2>
</div>
<button
class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 [480px]:h-12 [480px]:px-5 bg-[#0c7ff2] text-white text-sm font-bold leading-normal tracking-[0.015em] [480px]:text-base [480px]:font-bold [480px]:leading-normal [480px]:tracking-[0.015em]"
>
<span class="truncate">Get Started</span>
</button>
</div>
</div>
</div>
<div class="flex flex-col gap-10 px-4 py-10 container">
<div class="flex flex-col gap-4">
<h1
class="text-[#111418] tracking-light text-[32px] font-bold leading-tight [480px]:text-4xl [480px]:font-black [480px]:leading-tight [480px]:tracking-[-0.033em] max-w-[720px]"
>
Streamline Your Academy Management
</h1>
<p class="text-[#111418] text-base font-normal leading-normal max-w-[720px]">
AcaMate offers a comprehensive suite of tools designed to simplify administrative tasks, enhance communication, and foster a collaborative learning environment.
</p>
</div>
<div class="grid grid-cols-[repeat(auto-fit,minmax(158px,1fr))] gap-3 p-0">
<div class="flex flex-1 gap-3 rounded-lg border border-[#dbe0e6] bg-white p-4 flex-col">
<div class="text-[#111418]" data-icon="Users" data-size="24px" data-weight="regular">
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
<path
d="M117.25,157.92a60,60,0,1,0-66.5,0A95.83,95.83,0,0,0,3.53,195.63a8,8,0,1,0,13.4,8.74,80,80,0,0,1,134.14,0,8,8,0,0,0,13.4-8.74A95.83,95.83,0,0,0,117.25,157.92ZM40,108a44,44,0,1,1,44,44A44.05,44.05,0,0,1,40,108Zm210.14,98.7a8,8,0,0,1-11.07-2.33A79.83,79.83,0,0,0,172,168a8,8,0,0,1,0-16,44,44,0,1,0-16.34-84.87,8,8,0,1,1-5.94-14.85,60,60,0,0,1,55.53,105.64,95.83,95.83,0,0,1,47.22,37.71A8,8,0,0,1,250.14,206.7Z"
></path>
</svg>
</div>
<div class="flex flex-col gap-1">
<h2 class="text-[#111418] text-base font-bold leading-tight">Manage Users</h2>
<p class="text-[#60758a] text-sm font-normal leading-normal">
Easily manage students, teachers, and administrators with intuitive user profiles and access controls.
</p>
</div>
</div>
<div class="flex flex-1 gap-3 rounded-lg border border-[#dbe0e6] bg-white p-4 flex-col">
<div class="text-[#111418]" data-icon="Calendar" data-size="24px" data-weight="regular">
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
<path
d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-96-88v64a8,8,0,0,1-16,0V132.94l-4.42,2.22a8,8,0,0,1-7.16-14.32l16-8A8,8,0,0,1,112,120Zm59.16,30.45L152,176h16a8,8,0,0,1,0,16H136a8,8,0,0,1-6.4-12.8l28.78-38.37A8,8,0,1,0,145.07,132a8,8,0,1,1-13.85-8A24,24,0,0,1,176,136,23.76,23.76,0,0,1,171.16,150.45Z"
></path>
</svg>
</div>
<div class="flex flex-col gap-1">
<h2 class="text-[#111418] text-base font-bold leading-tight">Schedule Classes</h2>
<p class="text-[#60758a] text-sm font-normal leading-normal">Organize and schedule classes, workshops, and events with a user-friendly calendar interface.</p>
</div>
</div>
<div class="flex flex-1 gap-3 rounded-lg border border-[#dbe0e6] bg-white p-4 flex-col">
<div class="text-[#111418]" data-icon="Presentation" data-size="24px" data-weight="regular">
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
<path
d="M216,40H136V24a8,8,0,0,0-16,0V40H40A16,16,0,0,0,24,56V176a16,16,0,0,0,16,16H79.36L57.75,219a8,8,0,0,0,12.5,10l29.59-37h56.32l29.59,37a8,8,0,1,0,12.5-10l-21.61-27H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,136H40V56H216V176Z"
></path>
</svg>
</div>
<div class="flex flex-col gap-1">
<h2 class="text-[#111418] text-base font-bold leading-tight">Track Progress</h2>
<p class="text-[#60758a] text-sm font-normal leading-normal">Monitor student performance, attendance, and assignments to ensure academic success.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="flex justify-center">
<div class="flex max-w-[960px] flex-1 flex-col">
<footer class="flex flex-col gap-6 px-5 py-10 text-center container">
<div class="flex flex-wrap items-center justify-center gap-6 [480px]:flex-row [480px]:justify-around">
<a class="text-[#60758a] text-base font-normal leading-normal min-w-40" href="#">Terms of Service</a>
<a class="text-[#60758a] text-base font-normal leading-normal min-w-40" href="#">Privacy Policy</a>
<a class="text-[#60758a] text-base font-normal leading-normal min-w-40" href="#">Contact Us</a>
</div>
<p class="text-[#60758a] text-base font-normal leading-normal">© 2024 AcaMate. All rights reserved.</p>
</footer>
</div>
</footer>
</div>
</div>
@* </body> *@
@* </html> *@

View File

@ -1,4 +1,5 @@
using Microsoft.AspNetCore.Components;
using Front.Program.Services;
namespace Front.Program.Views.Project;
@ -6,10 +7,10 @@ public partial class About : ComponentBase
{
[Inject]
NavigationManager NavigationManager { get; set; } = default!;
private void OnClickEvent()
private async Task OnClickEvent()
{
// NavigationManager.NavigateTo("/redirectpage");
Console.WriteLine("Redirecting to redirect page");
}
}

View File

@ -1,12 +1,15 @@
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
namespace Front.Program.Views.Project;
public partial class Auth : ComponentBase
{
[Inject] NavigationManager NavigationManager { get; set; } = default!;
[Inject] IJSRuntime JS { get; set; } = default!;
void KakaoLogin()
{
// await JS
// Redirect to Kakao login page
NavigationManager.NavigateTo("/api/v1/in/user/kakao/auth", true);
}

View File

@ -1,8 +1,5 @@
@* <div class="flex items-center p-4 bg-second-darker shadow"> *@
@* $1$ 이동하는 거 말고 그냥 일반 텍스트 넣을거야 #1# *@
@* <img src="/logo.png" alt="Icon" class="w-8 h-8 mr-0 absolute left-4 top-1/2 transform -translate-y-1/2"> *@
@* <h3 class="flex-1 text-center text-normal-normal pl-12">일반 텍스트 작성</h3> *@
@* </div> *@
<div class="relative bg-second-darker shadow p-4 flex items-center justify-center">
<!-- 왼쪽 아이콘 -->

View File

@ -1,11 +1,18 @@
<div class="flex justify-end items-center p-4 bg-white shadow">
<a href="#about" class="mx-2 text-gray-700 hover:text-blue-600">About</a>
<a href="#join" class="mx-2 text-gray-700 hover:text-blue-600">Join</a>
<a href="#notice" class="mx-2 text-gray-700 hover:text-blue-600">Whats New</a>
<button class="ml-4 px-4 py-2 bg-red-600 text-white rounded hover:bg-blue-700"
@onclick="OnClickLogin">
Login
</button>
<div class="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#f0f2f5] py-4 bg-white">
<div class="flex items-center gap-4 text-[#111418] ml-4">
<img src="/logo.png" alt="Icon" class="w-8 h-8">
<h2 class="text-[#111418] text-lg font-bold leading-tight tracking-[-0.015em]">AcaMate</h2>
</div>
<div class="flex flex-1 justify-end gap-8">
<div class="flex items-center gap-9">
<a class=" text-text-title font-medium leading-normal hover:text-blue-800" href="#">About</a>
<a class="text-text-title font-medium leading-normal hover:text-blue-800" href="#">Join</a>
<a class="text-text-title font-medium leading-normal hover:text-blue-800" href="#">What's New</a>
</div>
<button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 bg-blue-500 hover:bg-blue-800 text-white text-sm font-bold leading-normal tracking-[0.015em] mr-4"
@onclick= "OnClickLogin">
<span class="truncate">Get Started</span>
</button>
</div>
</div>

View File

@ -10,8 +10,8 @@ public partial class TopNav : ComponentBase
public void OnClickLogin()
{
NavigationManager.NavigateTo("/auth");
// Console.WriteLine("Redirecting to redirect page");
// NavigationManager.NavigateTo("/auth");
Console.WriteLine("Clicked Login Button");
}
}

View File

@ -2,12 +2,21 @@
"name": "tailwind-blazor-template",
"version": "1.0.0",
"scripts": {
"watch:css": "tailwindcss -i ./wwwroot/css/app.css -o ./wwwroot/css/tailwind.css --watch",
"build:css": "tailwindcss -i ./wwwroot/css/app.css -o ./wwwroot/css/tailwind.css --minify",
"watch:css": "tailwindcss -i ./wwwroot/css/app.css -o ./wwwroot/css/tailwind.css --watch"
"build:publish": "rm -rf ./publish && /Users/tanine/.dotnet/dotnet publish -c Debug -o ./publish",
"build:test": "rm -rf ../AcaMate_API/publish/debug/ && /Users/tanine/.dotnet/dotnet publish -c Debug -o ../AcaMate_API/publish/debug",
"build:copy": "mkdir -p ../AcaMate_API/publish/debug/wwwroot && cp -r ./publish/wwwroot/* ../AcaMate_API/publish/debug/wwwroot"
},
"devDependencies": {
"tailwindcss": "^3.4.1",
"postcss": "^8.4.21",
"autoprefixer": "^10.4.14"
}
}

File diff suppressed because one or more lines are too long

View File

@ -65,6 +65,9 @@
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
};
window.deleteCookie = function (name) {
document.cookie = name + '=; Max-Age=-99999999;';
};
</script>
</body>
</html>