65 lines
1.6 KiB
TypeScript
Executable File
65 lines
1.6 KiB
TypeScript
Executable File
|
|
import React, { useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { getKakaoLoginUrl, isLoggedIn } from '../utils/api';
|
|
import LanguageSwitch from './LanguageSwitch';
|
|
|
|
interface HeaderProps {
|
|
onStartClick?: () => void;
|
|
}
|
|
|
|
const Header: React.FC<HeaderProps> = ({ onStartClick }) => {
|
|
const { t } = useTranslation();
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const loggedIn = isLoggedIn();
|
|
|
|
const handleLogin = async () => {
|
|
if (isLoading) return;
|
|
|
|
setIsLoading(true);
|
|
try {
|
|
const response = await getKakaoLoginUrl();
|
|
window.location.href = response.auth_url;
|
|
} catch (err) {
|
|
console.error('Failed to get Kakao login URL:', err);
|
|
alert(t('header.loginFailedAlert'));
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleStart = () => {
|
|
if (onStartClick) {
|
|
onStartClick();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<header className="landing-header">
|
|
<div className="header-logo">
|
|
<img src="/assets/images/ado2-header-logo.svg" alt="ADO2" />
|
|
</div>
|
|
<div className="header-actions">
|
|
<LanguageSwitch />
|
|
{loggedIn ? (
|
|
<button
|
|
className="header-start-btn"
|
|
onClick={handleStart}
|
|
>
|
|
{t('header.start')}
|
|
</button>
|
|
) : (
|
|
<button
|
|
className="header-login-btn"
|
|
onClick={handleLogin}
|
|
disabled={isLoading}
|
|
>
|
|
{isLoading ? t('header.loading') : t('header.login')}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header;
|