📌 로그인 하지 않았을 때 = auth 정보가 없을 때 홈화면에서 로그인 바텀시트를 나타내기

1. 바텀시트는 모달인가?

기능 구현시작 전에 이런 궁금증이 생겼다.
검색해보니 위의 사진은 바텀시트의 구성이며,
아래는 바텀시트의 유형이 Modal일수도, Non-Modal일 수도 있다는 점이다.
scrim 존재 여부에 따라 Modal과 Non-Modal로 나뉜다.
Modal의 경우 바텀시트 영역 외의 화면이 사용자가 할 수 있는 행동이 없는 반면,
Non-Modal의 경우 바텀시트 영역을 벗어난 화면에서도 사용자의 액션을 통해 상호작용이 가능하다.

(사진 참고 링크 - 컴포넌트 스터디: (1) 팝업, 바텀시트, 스낵바)
(내용 참고 링크 - 컴퍼넌트UI - 바텀시트)

=> 우리 팀의 로그인 바텀시트는 Modal 형식이었다.

2. 바텀시트 컴포넌트 생성

3. 로그인 정보 없을 때 모달 띄우기

홈 페이지에서 로그인을 하지 않으면 로그인정보가 없으므로 그 확인을 해서 모달을 띄우도록 했다.

1) 모달표시 상태를 담는 useState 추가

const [showModal, setShowModal] = useState(false); // 모달 표시 여부

2) 로그인 상태를 확인하는 비동기 함수를 useEffect로 실행

3) UI부분 수정

=> 결과

---

📌 첫 로그인 회원일 때 초기정보 설정 페이지로 이동(닉네임, 내 언어, 학습언어 설정)

위에 코드 사진에서처럼 supabase에 'user_info'테이블에서 nickname, my_language, learn_language 컬럼값이 null인지 확인하여 닉네임 페이지로 넘어가게 하였다.

---

📌 초기정보 설정페이지 생성

1. 닉네임 설정

1) 인풋 글자 수 제한

input 태그의 maxLength 속성을 사용하여 const maxTexts = 12;라고 12글자 제한을 해줬으며, 인풋 위에는 12글자 중에 몇 글자를 입력했는지 나타내는 것까지 구현했다.

2) 입력 전엔 버튼 비활성화, 입력해야만 활성화

const [nickname, setNickname] = useState("");로 닉네임 입력값을 useState로 관리하고,
'계속' 버튼의 onClick에 handleContinue라는 함수를 실행시켜줬다.
이 함수를 살펴보면, 로그인하고, 닉네임을 입력한 상태면, supabase 'user_info'테이블의 'nickname'값을 업데이트하고, 에러가 없으면 다음 페이지인 '내 언어' 선택 페이지로 넘어가게 작성했다.
그리고 버튼에 disabled={!nickname} 속성을 주어, 닉네임을 입력하지 않았을 땐 비활성화 상태여서 다음 단계로 넘어갈 수 없다.

3) '계속' 버튼 클릭 시, 다음 단계인 '내 언어' 설정 페이지로 넘어가기

useRouter라는 Hook을 사용했을 때, router를 콘솔로 확인하면 많은 객체 요소들이 있다.
많은 사용법 중 router.push() 를 사용하여 다음 단계인 내 언어 설정페이지로 넘어가게 했다.

2. 내 언어/학습언어 설정

1) 언어 버튼은 = 'language' 테이블에서 'status'가 true인 'language_name' 불러오기

=> 이렇게 API 호출 함수만 따로 파일을 분리했다.

=> API 호출함수(fetchLanguageName)을 탠스택쿼리의 queryFn으로 사용하여 데이터를 불러왔다.

2) 버튼을 클릭했을 때 다음 페이지로 넘어갈 수 있는 버튼 활성화

=> router.push()를 사용하여 다음 페이지로 넘어갈 수 있게 했다. '계속' 버튼을 클릭했을 때 onClick의 함수로 handleContinue함수를 실행시켰다.

3) 이전으로 돌아가는 버튼 생성

=> router.back()을 사용하여 이전 페이지로 넘어갈 수 있는 버튼을 만들었다.