로그인 프로세스와 관련된 문제 해결 (트러블슈팅)

처음 로그인 페이지 기획 시 로그인 단계는 총 3단계로 구현하기로 기획하였습니다.(next.js 사용)

 

DB > supabase

auth > nextAuth

모달 > paraller, InterCepting Routes

 

1단계 모달 : 선생님 또는 수강생선택

2단계 모달 : 선생님 선택 시 2단계 모달로 이동되며 직업, 분야를 추가로 받기

3단계 모달 : 실제 회원가입 창 (이메일, 소셜로그인)

 

구현 방법
1. zustand를 이용해 각각의 단계(1단계 2단계)에서 받은 내용을 스토어를 이용해 저장
2. 3단계에서 소셜 회원가입 버튼을 누르면 각각의 소셜에서 주는 유저의 정보를 담아 스토어에 저장
3. 유효성을 이용해 3개의 단계에서 받은 데이터가 잘 들어왔는 지 확인 후 수퍼베이스에 전송

 

🚨문제발생
위 기획 단계를 모두 구현 후 zustand에 실제 값이 잘 들어왔는지 확인해 보았으나 ,
로그인 후 유저의 정보만 담겨있는 것을 확인.

🛠️문제해결 과정
✅ 초기 1,2 단계 값이 잘 담기는지 확인
✅  소셜 회원가입 후 값이 잘 담기는지 확인
✅  소셜 로그인 시 스토어에 모든 값이 잘 담겨 있는지 확인

🔥찾아낸 문제점.

- 1,2 단계에서 값이 잘 담기는 것을 확인하였으나 문제는 소셜 회원가입 시 화면이 리렌더링 되어 스토어에서 담고 있던 값들이 모두 초기화 되는 문제점
- 소셜 회원가입은 회원가입과 로그인을 동시에 처리. 리렌더링이 일어날 수 밖에 없는 환경

회원가입 후 로그인이 동시에 처리되기 때문에 화면이 리렌더링 될 수 밖에 없음
즉,  로그인 후 소셜 회원가입 전 1,2 단계 값은 초기화되고, 리렌더링 이후 유저의 정보만 남아있음. 

☀️해결 방법 모색
1. zustand persist 사용하기
2. 회원가입 기획 다시하기 (회원가입 후 별도의 페이지에서 추가 (직업, 비즈니스 분야)  정보 받기)

❓zustand persist 사용하기
스토어의 상태를 로컬스토리지나 세션스토리지와 같은 영구 저장소에 값을 저장하고 있다가
슈퍼베이스에 전송을 하는 방법이다.

⚠️해당 방법을 채택하는 경우
1. 처음 사용자의 정보가 없는 상태에서 사용자의 정보를 zustand persist(직업, 비즈니스 분야) 이용해 저장
2. 소셜로그인이 되면 세션으로 받은 사용자의 정보를 상태값에서 따로 저장
(NextAuth를 사용하여 서버 컴포넌트에서 작업이 이루어지고 있었기 때문에 세션에 저장된 값을 불러와 상태값을 따로 저장 불가.
사용자가 로그인 후 클라이언트 컴포넌트에서 세션을 통해 들어온 값을 불러 zustand에 저장하는 과정 필요)
3.  2번 단계에서 받은 값을 zustand에 추가로 저장
4. 이후  zustand persist에 저장된 값을 supabase에 전달.
5. 회원가입 완료 후에 선생님 정보로 필요한 추가 데이터를 따로 입력 필요(계좌번호, 등) 
*5단계가 필요했던 이유: 회원가입을 최대한 간단하게 하기위해 최소한의 선생님 데이터를 받기로하여 추가정보를 더 받아야 함*

❓회원가입 기획 다시하기
소셜로그인 후 사용자의 정보를 가지고 그 사용자의 정보를 추가로 받는 방법

⚠️해당 방법을 채택하는 경우
1. zustand persist를 사용하지 않아도 되기 때문에 보안 강화
2. 코드 간편화

 

💡결론
채택은 회원가입 기획 다시하기
작성해둔 코드가 너무 깝고 속상하지만 페러렐라우터와 인터셉터를 배웠다는 것으로 만족하기로 하였습니다.
과연 다른 방법도 있는지 알아보고 싶으나 더 이상의 시간 소요는 할 수 없다고 판단이 되었고,
소셜 로그인(학생으로 회원가입) > 마이페이지에서 강사로 전환 후 추가 데이터 받는 것으로 수정하였습니다.

프로젝트 기간이 끝나고 회원가입 전 사용자의 정보를 받기 위한 좋은 방법이 있는지 모색해볼 예정
:: 이는 하드코딩을 하지 않고서는 어렵다는 판단.