Day 19 - ing · haxxru.log

이 글은 2026년 03월 28일 작성된 글입니다.

오늘은 Supabase Auth를 기반으로 회원 정보를 자체 user 테이블에 저장하고, 로그아웃 및 마이페이지에서 사용자 정보를 조회/수정하는 기능을 구현했다.

단순 인증(Auth)만 사용하는 것이 아니라, 서비스에서 활용할 사용자 데이터를 별도의 테이블로 관리하는 구조를 구성한 것이 핵심이다.

1. Supabase Auth + user 테이블 연동

회원가입 시 Supabase Auth에만 저장하는 것이 아니라, 추가 정보를 관리하기 위해 public.user 테이블에도 데이터를 저장하도록 구현했다.

Auth 회원가입 성공 후 DB insert
user 테이블에 닉네임, 이메일 등 저장

const { data, error } = await supabase.auth.signUp({
  email,
  password,
});
 
if (data.user) {
  await supabase.from("user").insert({
    id: data.user.id,
    email: data.user.email,
    nickname,
  });
}

2. 사이드바 사용자 정보 표시

로그인된 사용자 정보를 가져와 사이드바 하단에 닉네임과 프로필 이미지를 표시했다.

const {
  data: { user },
} = await supabase.auth.getUser();

닉네임 표시
프로필 이미지 표시

3. 로그아웃 및 페이지 이동 기능

사이드바에서 로그아웃 및 마이페이지 이동 기능을 구현했다.

await supabase.auth.signOut();

로그아웃 버튼
마이페이지 이동 버튼

4. 마이페이지 UI 및 사용자 정보 조회

마이페이지에서 로그인된 사용자의 정보를 조회하여 표시했다.

const { data } = await supabase
  .from("user")
  .select("*")
  .eq("id", user.id)
  .single();

이메일
닉네임
프로필 이미지

5. 사용자 정보 수정 기능

마이페이지에서 사용자 정보를 수정할 수 있도록 구현했다.

1. 닉네임 변경

await supabase
  .from("user")
  .update({ nickname })
  .eq("id", user.id);

2. 비밀번호 재설정 (이메일 전송 방식)

비밀번호는 직접 변경하는 것이 아니라, Supabase에서 제공하는 비밀번호 재설정 이메일 기능을 사용했다.

await supabase.auth.resetPasswordForEmail(email, {
  redirectTo: "http://localhost:3000/reset-password",
});

사용자가 이메일을 통해 비밀번호 재설정 진행
redirect 페이지에서 새로운 비밀번호 설정

3. 이메일 변경

await supabase.auth.updateUser({
  email: newEmail,
});

🍀 금일 구현한 것

회원가입 시 Auth → user 테이블 저장
사이드바 사용자 정보 UI 구현
로그아웃 기능 구현
마이페이지 UI 및 사용자 정보 조회
닉네임 변경 기능
비밀번호 재설정 (이메일 방식)
이메일 변경 기능

🔥 주말 구현 예정

현재는 각 컴포넌트(사이드바, 마이페이지)에서
개별적으로 supabase.getUser()를 호출하고 있다.

이를 개선하여 인증 상태를 한 곳에서 관리하도록 리팩토링할 예정이다.

MainAuthGate에서 유저 정보 일괄 처리
전역 상태 관리 (Context 또는 상태관리 라이브러리 활용)
불필요한 중복 호출 제거

✅ 정리

Supabase Auth는 인증을 담당하고, 서비스 데이터는 별도 테이블로 관리해야 한다.
사용자 정보 수정은 Auth / DB 역할을 나누어 처리해야 한다.
비밀번호는 직접 변경이 아니라 이메일 기반 재설정 방식이 안전하다.
인증 상태를 중앙에서 관리하면 코드 구조가 훨씬 깔끔해진다.