seonkyu.kim/AcaMate_Web
1
0
Fork 0
forked from AcaMate/AcaMate_Web
Code Pull Requests Activity

[✨] 페이지 개발

Browse Source 
1. about 페이지 개발
2. 반응형 적용
3. 버튼 동작 적용
This commit is contained in:
김선규 2025-05-28 15:05:52 +09:00
parent 070e15ae70
commit f4d0138fec
8 changed files with 231 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
App.razor
View File

@ -27,9 +27,11 @@ AppAssembly: 현재 애플리케이션의 어셈블리를 지정
role="alert": 스크린 리더와 같은 보조 기술에 의해 읽히는 경고 메시지
-->
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
@* <PageTitle>Not found</PageTitle> *@
@* <LayoutView Layout="@typeof(MainLayout)"> *@
@* <p role="alert">Sorry, there's nothing at this address.</p> *@
@* *@
@* </LayoutView> *@
<RedirectPage />
</NotFound>
</Router>

1
App.razor.cs
View File

@ -7,7 +7,6 @@ namespace Front;
public partial class App : ComponentBase
{
// [Inject] private HttpClient Http { get; set; } = default;
[Inject] private APIService API { get; set; } = default!;
[Inject] private CookieService Cookie { get; set; } = default!;

9
Program.cs
View File

@ -14,11 +14,15 @@ builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddScoped(sp => //new HttpClient
{
// BaseAddress = new Uri("https://localhost:5144");
var config = builder.Configuration;
var http = new HttpClient
{
BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
// BaseAddress = new Uri("http://0.0.0.0:5144")
BaseAddress = builder.HostEnvironment.IsDevelopment()
? new Uri("https://devacamate.ipstein.myds.me")
: new Uri("https://acamate.ipstein.myds.me")
};
return http;
});
@ -27,4 +31,5 @@ builder.Services.AddScoped(sp => //new HttpClient
builder.Services.AddScoped<APIService>();
builder.Services.AddScoped<CookieService>();
await builder.Build().RunAsync();

311
Program/Views/Project/About.razor
View File

@ -1,145 +1,184 @@
@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> *@
@* *@
@* $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> *@
<div
class="relative flex size-full w-full min-h-screen flex-col items-center 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 w-full max-w-[960px] flex-1 mx-auto">
<!-- 상단 배너 영역 -->
<div class="container">
<div
class="w-full flex min-h-[480px] flex-col gap-6 bg-cover bg-center bg-no-repeat xs:gap-8 xs:rounded-lg items-start justify-end px-4 pb-10 xs: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 w-full gap-2 text-right items-end">
<h1
class="text-white text-4xl font-black leading-tight tracking-[-0.033em] xs:text-5xl xs:font-black xs:leading-tight xs:tracking-[-0.033em] outline-none">
모든 순간<br/>
더 쉽고<br/>
더 똑똑하게
</h1>
<h2 class="hidden md:block text-white text-sm font-normal leading-normal">
AcaMate는 학원 관리를 더 쉽고, 학부모와의 소통을 더 가깝게, 학생의 성장을 더 든든하게 지원하는 통합 플랫폼입니다.
</h2>
<h2 class="block md:hidden text-white text-base font-normal leading-normal">
AcaMate는 학원 관리를 더 쉽고, 학부모와의 소통을 더 가깝게,<br/>학생의 성장을 더 든든하게 지원하는 통합 플랫폼입니다.
</h2>
@* <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 w-full min-h-screen flex-col items-center 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 w-full max-w-[960px] flex-1 mx-auto">
<div class="container">
<div
class="w-full 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 w-full gap-2 text-right items-end">
<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">
모든 순간<br />
더 쉽고<br />
더 똑똑하게
</h1>
<h2 class="text-white text-sm font-normal leading-normal [480px]:text-base [480px]:font-normal [480px]:leading-normal">
AcaMate는 학원 관리를 더 쉽고, 학부모와의 소통을 더 가깝게, 학생의 성장을 더 든든하게 지원하는 통합 플랫폼입니다.
</h2>
<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]">
AcaMate, 학원 운영의 새로운 기준
</h1>
<p class="text-[#111418] text-base font-normal leading-normal max-w-[720px]">
AcaMate로 복잡한 행정 업무를 간단히 처리하고, 학부모·학생과의 소통을 원활하게, 협력 중심의 교육 환경을 쉽게 만들어보세요.
</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 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>
@* <button *@
@* class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 xs:h-12 xs:px-5 bg-[#0c7ff2] text-white text-sm font-bold leading-normal tracking-[0.015em] xs:text-base xs:font-bold xs:leading-normal xs:tracking-[0.015em]"> *@
@* <span class="truncate">Get Started</span> *@
@* </button> *@
</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 class="flex flex-col gap-10 px-4 py-10 container">
<div class="flex flex-col gap-4">
<h1
class="hidden md:block text-text-title tracking-light text-[32px] font-bold leading-tight xs:text-4xl xs:font-black xs:leading-tight xs:tracking-[-0.033em] max-w-[720px]">
AcaMate, 학원 운영의 새로운 기준
</h1>
<h1
class="block md:hidden text-center text-text-title tracking-light text-[32px] font-bold leading-tight xs:text-4xl xs:font-black xs:leading-tight xs:tracking-[-0.033em] max-w-[720px]">
학원 운영의 새로운 기준
</h1>
<p class="hidden md:block text-text-title text-base font-normal leading-normal max-w-[720px]">
AcaMate는 학원 운영에 꼭 필요한 모든 기능을 하나의 플랫폼에 담아,
사용자 관리부터 수업 일정, 출결 및 성과 추적까지 완벽하게 통합되어 있습니다.<br/>
<br/>
지
금, 더 빠르고 스마트한 학원 운영을 경험해보세요.
</p>
<p class="block md:hidden text-text-title text-center text-base font-normal leading-normal max-w-[720px]">
필요한 모든 기능을 하나로<br/>
수업, 출결, 소통, 성과까지 모두 AcaMate에서<br/>
지금, 스마트한 운영을 시작하세요.
</p>
</div>
</footer>
<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">
<img src="Resources/Images/Icon/Person.png" alt="Person" width="24px" height="24px">
<div class="flex flex-col gap-1">
<h2 class="text-[#111418] text-base font-bold leading-tight">사용자 통합 관리</h2>
<p class="text-[#60758a] text-sm font-normal leading-normal">
학생, 교직원, 학부모를 한 곳에서 쉽고 빠르게 관리할 수 있습니다.
</p>
</div>
</div>
<div class="flex flex-1 gap-3 rounded-lg border border-[#dbe0e6] bg-white p-4 flex-col">
<img src="Resources/Images/Icon/Calendar.png" alt="Calendar" width="24px" height="24px">
<div class="flex flex-col gap-1">
<h2 class="text-[#111418] text-base font-bold leading-tight">수업 & 일정 관리</h2>
<p class="text-[#60758a] text-sm font-normal leading-normal">
드래그 앤 드롭 기반의 캘린더로 수업과 일정을 손쉽게 설정하세요.
</p>
</div>
</div>
<div class="flex flex-1 gap-3 rounded-lg border border-[#dbe0e6] bg-white p-4 flex-col">
<img src="Resources/Images/Icon/Management.png" alt="Management" width="24px" height="24px">
<div class="flex flex-col gap-1">
<h2 class="text-[#111418] text-base font-bold leading-tight">출결 및 학습 추적</h2>
<p class="text-[#60758a] text-sm font-normal leading-normal">
출결, 과제, 성과를 한눈에 확인하고 학생의 성장을 체계적으로 관리하세요.
</p>
</div>
</div>
<div class="flex flex-1 gap-3 rounded-lg border border-[#dbe0e6] bg-white p-4 flex-col">
<img src="Resources/Images/Icon/Talk.png" alt="Talk" width="24px" height="24px">
<div class="flex flex-col gap-1">
<h2 class="text-[#111418] text-base font-bold leading-tight">통합 커뮤니케이션</h2>
<p class="text-[#60758a] text-sm font-normal leading-normal">
공지, 상담, 실시간 알림은 물론
1:1 및 그룹 채팅까지 모든 소통이 가능합니다.
</p>
</div>
</div>
</div>
</div>
<!-- 플랫폼 설명 영역 끝 -->
<div class="flex justify-center my-2">
<span class="text-text-border text-6xl tracking-widest select-none">···</span>
</div>
<!-- 플랫폼 특징 영역 -->
<div class="flex flex-col gap-10 px-4 py-10 container">
<div class="flex flex-col gap-4">
<div class="flex flex-col md:flex-row items-center gap-6">
<div class="w-full md:w-1/2 h-64 bg-gray-200 rounded-xl flex items-center justify-center">
<span class="text-gray-500">이미지 자리</span>
</div>
@* <img src="/images/feature1.png" alt="기능 이미지" class="w-full md:w-1/2 rounded-xl shadow"/> *@
<div class="text-left md:w-1/2 space-y-2">
<h3 class="text-xl font-semibold">사용자 통합 관리</h3>
<p class="text-gray-600">학생, 교사, 학부모까지 한 화면에서 직관적으로 관리할 수 있습니다.</p>
</div>
</div>
<div class="flex flex-col md:flex-row-reverse items-center gap-6">
<div class="w-full md:w-1/2 h-64 bg-gray-200 rounded-xl flex items-center justify-center">
<span class="text-gray-500">이미지 자리</span>
</div>
@* <img src="/images/feature2.png" alt="기능 이미지" class="w-full md:w-1/2 rounded-xl shadow"/> *@
<div class="text-left md:w-1/2 space-y-2">
<h3 class="text-xl font-semibold">수업 & 일정 관리</h3>
<p class="text-gray-600">드래그 앤 드롭 기반의 캘린더로 수업과 일정을 손쉽게 설정하세요.</p>
</div>
</div>
<div class="flex flex-col md:flex-row items-center gap-6">
<div class="w-full md:w-1/2 h-64 bg-gray-200 rounded-xl flex items-center justify-center">
<span class="text-gray-500">이미지 자리</span>
</div>
@* <img src="/images/feature1.png" alt="기능 이미지" class="w-full md:w-1/2 rounded-xl shadow"/> *@
<div class="text-left md:w-1/2 space-y-2">
<h3 class="text-xl font-semibold">출결 및 학습 추적</h3>
<p class="text-gray-600">출결, 과제, 성과를 한눈에 확인하고 학생의 성장을 체계적으로 관리하세요.</p>
</div>
</div>
<div class="flex flex-col md:flex-row-reverse items-center gap-6">
<div class="w-full md:w-1/2 h-64 bg-gray-200 rounded-xl flex items-center justify-center">
<span class="text-gray-500">이미지 자리</span>
</div>
@* <img src="/images/feature2.png" alt="기능 이미지" class="w-full md:w-1/2 rounded-xl shadow"/> *@
<div class="text-left md:w-1/2 space-y-2">
<h3 class="text-xl font-semibold">통합 커뮤니케이션</h3>
<p class="text-gray-600">공지, 상담, 실시간 알림은 물론 1:1 및 그룹 채팅까지 모든 소통이 가능합니다.</p>
</div>
</div>
</div>
</div>
<!-- 플랫폼 특징 영역 끝 -->
</div>
</div>
@* </body> *@
@* </html> *@
<footer class="flex justify-center border-t border-text-border">
<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 xs:flex-row xs: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>

27
Program/Views/Project/TopNav.razor
View File

@ -1,14 +1,15 @@
<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">
<div class="flex items-center gap-4 text-[#111418] ml-4" @onclick="OnClickRedirect">
<img src="/logo.png" alt="Icon" class="w-8 h-8">
<h2 class="hidden md:block text-text-title text-lg font-bold leading-tight tracking-[-0.015em]">AcaMate</h2>
</div>
<div class="hidden md:flex flex-1 justify-end gap-8">
<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>
<a class="text-text-title font-medium leading-normal hover:text-blue-800" href="/about" @onclick="() => isOpen = !isOpen">About</a>
<a class="text-text-title font-medium leading-normal hover:text-blue-800" href="/join" @onclick="() => isOpen = !isOpen">Join</a>
<a class="text-text-title font-medium leading-normal hover:text-blue-800" href="/new" @onclick="() => isOpen = !isOpen">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">
@ -16,11 +17,27 @@
</button>
</div>
</div>
<button class="md:hidden mr-4">
<button class="md:hidden mr-4" @onclick="OnClickMenuDown">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
@if (isOpen)
{
<div class="md:hidden absolute top-16 left-0 w-full bg-white shadow z-50 transition-all duration-300">
<div class="flex flex-col items-start gap-4 p-4">
<a class="block w-full gap-y-2 text-text-title font-medium leading-normal hover:text-blue-800" href="/about" @onclick="() => isOpen = !isOpen">About</a>
<a class="block w-full gap-y-2 text-text-title font-medium leading-normal hover:text-blue-800" href="/join" @onclick="() => isOpen = !isOpen">Join</a>
<a class="block w-full gap-y-2 text-text-title font-medium leading-normal hover:text-blue-800" href="/new" @onclick="() => isOpen = !isOpen">What's New</a>
<button class="flex w-full cursor-pointer items-center justify-center rounded-lg h-10 px-4 bg-blue-500 hover:bg-blue-800 text-white text-sm font-bold leading-normal tracking-[0.015em]"
@onclick="OnClickLogin">
<span class="truncate">Get Started</span>
</button>
</div>
</div>
}
</div>

21
Program/Views/Project/TopNav.razor.cs
View File

@ -1,4 +1,5 @@
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
namespace Front.Program.Views.Project;
@ -7,11 +8,27 @@ public partial class TopNav : ComponentBase
//로그인버튼을 누르면 페이지를 이동할거야
[Inject]
NavigationManager NavigationManager { get; set; } = default!;
IJSRuntime JS { get; set; } = default!;
protected bool isOpen = false;
public void OnClickMenuDown()
{
isOpen = !isOpen;
}
public void OnClickRedirect()
{
if (isOpen) isOpen = !isOpen;
NavigationManager.NavigateTo("/about");
}
public void OnClickLogin()
{
// NavigationManager.NavigateTo("/auth");
Console.WriteLine("Clicked Login Button");
if (isOpen) isOpen = !isOpen;
NavigationManager.NavigateTo("/auth");
}
}

2
tailwind.config.js
View File

@ -53,7 +53,7 @@ module.exports = {
},
fontFamily: {},
screens: {
'xs': '400px',
'xs': '480px',
'sm': '640px',
'md': '768px',
'lg': '1024px',

2
wwwroot/css/tailwind.css
View File

File diff suppressed because one or more lines are too long