SEAN-59
2665dcbf64
1. 로그인 동작을 위해서 viewmodel 로 관련 뷰에서 동작할 모든 로직을 viewmodel에서 관리 1.1. view 와 viewmodel의 관계는 1:N으로 동작하는것을 기반으로 두고 있음 2. API 접근하는 방식도 웹만의 접근 방법에서 수정 3. 로그인 동작 정보 받는 로직 수정
67 lines
4.0 KiB
Plaintext
67 lines
4.0 KiB
Plaintext
<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" @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-600" href="/about" @onclick="() => isOpen = !isOpen">About</a>
|
|
<a class="text-text-title font-medium leading-normal hover:text-blue-600" href="/join" @onclick="() => isOpen = !isOpen">Join</a>
|
|
<a class="text-text-title font-medium leading-normal hover:text-blue-600" href="/new" @onclick="() => isOpen = !isOpen">What's New</a>
|
|
</div>
|
|
@if (!UserViewModel.isLogin)
|
|
{
|
|
<button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 bg-second-normal hover:bg-second-dark text-white text-sm font-bold leading-normal tracking-[0.015em] mr-4"
|
|
@onclick="OnClickLogin">
|
|
<span class="truncate">시작하기</span>
|
|
</button>
|
|
}
|
|
else
|
|
{
|
|
<button class="flex items-center justify-center w-10 h-10 rounded-full text-white text-sm font-bold leading-normal tracking-[0.015em] mr-4"
|
|
@onclick="OnClickLogout">
|
|
<div class="relative w-8 h-8">
|
|
<img src="Resources/Images/Icon/Logout.png" alt="로그아웃" class="w-6 h-6 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 hover:brightness-0 hover:saturate-100 hover:invert hover:sepia hover:hue-rotate-[180deg] hover:brightness-[0.7] hover:contrast-[0.8] transition-all duration-200" />
|
|
</div>
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<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 text-center">
|
|
<a class="block w-full gap-y-2 text-text-title font-medium leading-normal hover:text-blue-600" 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-600" 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-600" href="/new" @onclick="() => isOpen = !isOpen">What's New</a>
|
|
@if (!UserViewModel.isLogin)
|
|
{
|
|
<button class="flex w-full cursor-pointer items-center justify-center rounded-lg h-10 px-4 bg-second-normal hover:bg-second-dark text-white text-sm font-bold leading-normal tracking-[0.015em]"
|
|
@onclick="OnClickLogin">
|
|
<span class="truncate">시작하기</span>
|
|
</button>
|
|
}
|
|
else
|
|
{
|
|
<button class="flex w-full cursor-pointer items-center justify-center rounded-lg h-10 px-4 bg-second-normal hover:bg-second-dark text-white text-sm font-bold leading-normal tracking-[0.015em]"
|
|
@onclick="OnClickLogout">
|
|
<span class="truncate">로그아웃</span>
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
</div> |