코드

1. supabase 유저정보 변경 코드

아래의 코드는 유저 인증과 관련된 부분을 담당하는 코드. getUserInfo 함수는 userinfo 테이블에서 필요한 컬럼만 선택적으로 가져오도록 수정, 이 함수는 주어진 id에 해당하는 유저 정보를 가져오는 역할.

// userinfo 테이블에서 필요한 컬럼만 선택적으로 가져오도록 수정
export const getUserInfo = async (id: number): Promise<Typedata['public']['Tables']['userinfo']['Row'] | null> => {
try {
const { data } = await supabase
.from('userinfo')
.select('id, name, email') // 필요한 컬럼만 선택
.eq('id', id)
.single();
return data || null;
} catch (error) {
console.error(error);

2. 로그인 하였을 때 상태 변경

AuthenticationLayer 컴포넌트는 getUserInfo 함수를 사용하여 유저 정보를 가져온 후, 해당 정보가 유효하다면 setUser 액션을 dispatch하여 전역 상태를 업데이트, 에러가 발생하거나 유저 정보가 없는 경우에는 setUser(null)을 dispatch하여 전역 상태를 초기화.

const AuthenticationLayer = ({ children }: { children: React.ReactNode }) => {
const dispatch = useDispatch();
useEffect(() => {
const authListener = supabase.auth.onAuthStateChange((event, session) => {
if (session?.user) {
getUserInfo(session.user.id)
.then((response) => dispatch(setUser(response)))
.catch((error) => {
console.error(error);
dispatch(setUser(null));
});
} else {
dispatch(setUser(null));
}
});
// clean up
return () => {
authListener.data.subscription.unsubscribe();
};
}, [dispatch]);
return children;
};
export default AuthenticationLayer;

3. Router에 감싸줘서 전역적으로 사용

App 컴포넌트에서는 AuthenticationLayer 컴포넌트를 사용하여 앱 전체에서 유저 인증과 관련된 로직을 처리할 수 있도록 설정.

import AuthenticationLayer from 'AuthenticationLayer';
import Router from './shared/Router';

function App() {
  return (
    <AuthenticationLayer>
      <Router />
    </AuthenticationLayer>
  );
}
export default App;