// auth_service.ts

interface IAuthService {
login(provider: firebase.auth.AuthProvider): any;
logout(): void;
}

class AuthService implements IAuthService {
login(provider: firebase.auth.AuthProvider) {
return auth.signInWithPopup(provider);
}
logout() {
auth.signOut();
}
}


파이어베이스 api로 login, logout 구현해놓은 class를 만들었단 말이지


// index.tsx

const authService = new AuthService();
export const AuthContext = createContext<any | null>(null);

ReactDOM.render(
<React.StrictMode>
<AuthContext.Provider value={authService}>
<App />
</AuthContext.Provider>
</React.StrictMode>,
document.getElementById('root')
);


위 class를 object로 만든 다음에 context api 써서 날림 ㅇㅇ


// header.tsx

const Header = () => {
const authService = useContext(AuthContext);
const history = useHistory();
const onLogoutClick = () => {
authService.logout();
history.push('/');
}


Header에서는 useContext로 받아다가 logout버튼 클릭하면 class의 logout이 호출되도록 함 ㅇㅇ




문제는 정상적으로 작동 다하거든?



const onLogoutClick = () => {
authService.


근데 원래 이렇게 authService 적고 . 쓰면 login을 할건지 logout을 할건지 선택하는 옵션이 떠야하잖아. 타스 쓰는 중이니까?


근데 안뜸 ㅇㅇ


원래 context hook 쓰면 안보여주는건지?


이거 이유좀 알려달라!!!




index에서 대충 써보니 여기선 보여주네 ㅇㅅㅇ


context api가 문제인거냐???