이 글은 2026년 03월 26일 작성된 글입니다.
개요
오늘은 팀 프로젝트에서 맡은 로그인 / 회원가입 기능 개발을 본격적으로 진행했다.
피그마 와이어프레임을 기반으로 로그인 및 회원가입 페이지의 UI를 구현하고, 인증 기능을 위해 Supabase, SSO 기번 이메일 로그인 및 회원가입 구조를 설계했다.
개발을 진행하는 과정에서 팀원들의 브랜치를 병합한 이후 온보딩 페이지에서 로그인 무한 루프가 발생하는 문제를 겪었고, 이를 해결하기 위해 라우팅 구조와 인증 흐름을 다시 정리하는 트러블슈팅 과정도 경험했다.
1. 로그인 / 회원가입 기능 구현
오늘은 로그인 기능의 전체적인 흐름을 고려하면서 UI와 인증 구조를 함께 구현했다.
먼저 피그마 와이어프레임을 기반으로 다음 페이지들을 구현했다.
- 로그인 페이지 UI
- 회원가입 페이지 UI
또한 이후 인증 기능 연동을 위해
Supabase + SSO 로그인 / 회원가입 기능을 연결할 수 있는 구조를 준비했다.
금일 구현 내용
- Supabase 이메일 회원가입
- Supabase 이메일 로그인
- 구글 소셜 로그인
- 카카오 소셜 로그인
- 비밀번호 재설정 기능
2. 인증 로직을 위한 폼 이벤트 처리
로그인 폼에서는 기본적으로 폼 제출 시 페이지가 새로고침되기 때문에 이벤트를 제어해야 한다.
const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
event.preventDefault()
// 로그인 API 요청
}preventDefault()를 사용하면 기본 제출 동작을 막고
로그인 요청이나 인증 로직을 직접 처리할 수 있다.
3. 로그인 무한 루프 문제 발생
팀원들의 작업 브랜치를 머지한 이후 온보딩 페이지에서 로그인 루프 문제가 발생했다.
문제 증상
첫 수정
- 로그인은 정상적으로 완료됨
- 하지만 로그인 페이지에서 벗어나지 못하는 문제 발생
로그인 성공 → 다시 로그인 페이지로 이동두번째 수정
- 로그인 페이지에서 벗어나긴 했지만
- 페이지가 계속 새로고침되는 무한 리로드 현상 발생
페이지 진입 → redirect → reload → 반복4. 문제 원인 분석
온보딩 페이지의 시작하기 버튼 경로가 하드코딩 되어 있는 것이 원인이었다.
기존 코드
router.push("/login")이 구조에서는 사용자가 이미 로그인되어 있어도 무조건 로그인 페이지로 이동하게 된다.
결과적으로
로그인 상태 → 온보딩 → 로그인 페이지 → 다시 인증 확인 → 반복과 같은 흐름이 만들어지면서 무한 루프가 발생했다.
5. 해결 방법
1. 온보딩 페이지 경로 수정
시작하기 버튼이 메인 페이지로 이동하도록 수정했다.
router.push("/main")2. 메인 페이지 로그인 보호 로직 추가
메인 페이지에 로그인 여부를 확인하는 로직을 추가했다.
로그인이 되어 있지 않은 경우 로그인 페이지로 이동하도록 처리했다.
if (!user) {
router.push("/login")
}3. 메인 내부 페이지 접근 보호
/main 내부의 모든 페이지는 로그인 상태가 아닐 경우
온보딩 페이지로 돌아가도록 보호 로직을 추가했다.
라우트 흐름
온보딩 (/)
↓
로그인 (/login)
↓
메인 (/main)
↓
메인 내부 페이지로그인이 되어 있지 않은 경우
main → onboarding(/) redirect이렇게 인증 흐름을 정리하면서 로그인 무한 루프 문제를 해결할 수 있었다.
금일 구현한 결과물이다
✅ 정리
오늘 개발을 진행하면서 로그인 기능 구현뿐만 아니라 라우팅과 인증 흐름 설계의 중요성을 다시 느꼈다.
특히 팀 프로젝트에서는 여러 브랜치가 병합되면서 예상치 못한 문제가 발생할 수 있기 때문에
- 라우팅 구조
- 로그인 상태 관리
- 페이지 접근 권한
명확하게 설계하는 것이 중요하다는 것을 경험했다.
내일 구현 목표인 작업으로는 아래와 같다.
- 회원가입 시 Supabase Auth → users 테이블에 회원 정보 저장
- 사이드바 하단 사용자 명, 프로필 사진 구현
- 사이드바에 로그아웃, 마이페이지 바로가기 기능 구현
- 마이페이지 UI 구현, 마이페이지에서 사용자 정보 표시
