2024.10.07 기록

모브박스 - 로그인,로그아웃 UIUX / alert,confirm

티켓예매 메뉴를 눌렀을때 로그인창을 언제 뜨게 할것인가?

1. 영화선택 전 로그인상태 확인 -> 로그인 창 이동
   (단점. 로그인 전 까지 영화예매 창 비공개)

2. 영화선택 후 예매완료 전 로그인상태 확인
   (단점. 영화, 좌석 선택 다시해야함)
   Reserve - seat -> complete
   좌석까지 선택 후 최종 예매버튼을 눌렀을때 로그인상태 확인 -> 로그인 창 이동

---

너무 기본적이지만 일단 써보게 한다.
더 궁금하다면 로그인 or 회원가입을 하도록! 유도하도록 한다.

import { useRouter } from 'next/navigation';
const router = useRouter();

    const completeBtn = () => {
        if (isLogined) {
            setIsSeatSelect(select)
            
            //세션스토리지 데이터 저장
            sessionStorage.setItem('reserve', JSON.stringify(reserveData));
            setTicketInfo(reserveData)
            
            moveNext();
        } else {
            alert('로그인이 필요한 서비스입니다.')
            router.push('/login');
        }
    }

alert('로그인이 필요한 서비스입니다.')

• 확인(로그인 창 이동)
  

---

헤더에 있는 로그아웃을 실수로 눌러서 바로 로그아웃 되어버리니 다시 로그인을 해야했고 불편함을 느꼈다.

    const logout = () => {
        if (confirm('로그아웃 하시겠습니까?')) {
            storegeFn('logout')
            setSearchView(false)
            setMenuOn(false)
        }
    }
    
<Link href={isLogined ? "/" : "/login"}
			onClick={(e) => {
				if (isLogined) {
				e.preventDefault();
				logout();
			}
		}}
	>
	{isLogined ? 'Logout' : 'Login'}
</Link>

Link 와 onClick 이벤트와 같이 동작시 충돌할 수 있기때문에 e.preventDefault() 사용해서 로그아웃시 페이지 이동 막는다.

confirm('로그아웃 하시겠습니까')

• 취소(예매 창 유지) 확인(로그인 창 이동)