1. 쿠키만 사용하던 저장 동작을 다른 저장소도 사용하게 변경 1.1. 쿠키 대신 세션 레포지토리를 기본적으로 사용하게 Service 코드 구현 2. 로그인 되었을 경우 화면 표기 변경 2.1. 시작하기 버튼 hidden 처리 2.2. 사용자 이름 불러오기 2.3. 로그인 동작 관련 변수 스토리지 저장 2.4. 서버에서 직접적인 크라이언트 쿠키 저장이 아닌 서버는 뒤의 값으로 간섭하게 변경
51 lines
2.9 KiB
Plaintext
51 lines
2.9 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 (!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>
|
|
}
|
|
</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 (!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>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
</div> |