nextjs login ui 고민이 있다.

Next14에서 로그인을 어떻게 해야 좋을지 고민이 있다.

현재는 /login페이지에서 해결하나, 생각해보니 

로그인버튼을 클릭하거나 인증이 안된 곳을 들어간다면 guard에 의해 /login으로 리다이렉트 될 것이고,

현재는 /login을 성공하면 backend에서 / (home)으로 리다이렉트 시킨다.(nestjs백엔드에서 request.originalUrl을 쓴다면 /login으로 리다이렉트되긴할텐데)

사용자는 로그인하고 작업을 이어서 하고 싶을 것이다. 그래서 로그인과정은 단순해야한다.

히스토리를 잘 제어하면 될 것 될 것 같긴한데, 현재로선 로그인 페이지 자체가 불필요하다고 느낀다.(내가 짠게 있긴 하지만 사이드이펙트가 우려되는 더러운 코드였다. 아마 잘못된 방법일수도 있긴한데 치운상태이다.)

로그인 하기위한 과정이 복잡한 것도 아니고 선택지가 많은 것도 아니기 때문이다.

그래서 바꾸고싶은데 고민이 생긴다.

 

1. createPortal을 이용한 modal

/app/layout.tsx의 globallayout에 <div id="my-modal"/>을 만든뒤

모달이 필요한 jsx내부에

createPortal(
        <Modal setOpen={setOpen} open={open}/>,
        (my-modal id로 찾은 el)
)

이걸 만들어주면 되겠다.

하지만 단점이 보인다.

api call을 한뒤 401이 나온다면, 가장 간단한 법으론 redirect(/login)을 하는 것이다.

하지만 저 방식을 쓴다면, modal이 필요한 곳마다 useState로 [open,setOpen]을 만들어줘야한다.

jsx도 더러워질 것이고, 어디서 401이 나올지 생각하는 것도 귀찮다. 딱봐도 많아보인다,

 

2. 모든걸 'use client'로하고 contextapi로 open,setOpen을

1번의 단점이 명확히 해소되지도 않을 뿐더러, 이럴거면 next를 쓸 이유가 없다.

 

3.병렬 라우트와 라우트 가로채기

https://nextjs.org/docs/app/building-your-application/routing/parallel-routes

공식문서에서도 제시한 모달구현법이다.

하지만 이 경우에도 상태관리에 대한 해결법을 잘 모르겠다. 이 경우에도 라우팅을 바꾸는 것이므로 채택하는 것에 의문이 있다.

 

4.쿼리파라미터로 관리

modal=True와 같은 쿼리파라미터를 준다.

globallayout에 modal component를 만들고

modal내부에서 query param을 읽는다.

그럼 모달의 열고닫음을 제어할 수 있으며, 백엔드에선 modal을 제어하는 쿼리param을 빼주면 된다.

 

5. dialog.showModal()

글을 쓴 시점에서 dialog tag의 호환성이 상당히 괜찮은 것으로 알고있으나,

react에선 getElementByFooBar()이 아니라 ref로 관리하는 것이 권장된다.(온갖 곳에서 element를 가져온다면 의존성이 꼬이고 추적하기 어려운 버그가 발생할 것 같다.)

그래서 1,2,3의 문제를 해결하지 못할 것 같다. 

 

수정) 병렬라우트와 라우트가로채기로 이슈를 충분히 해결 가능하다. 뒤로가기, href로 충분히 관리 가능하다.