127 lines
3.9 KiB
TypeScript
127 lines
3.9 KiB
TypeScript
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { getKakaoLoginUrl } from '../utils/api';
|
|
import { useOverlayClose } from '../hooks/useOverlayClose';
|
|
|
|
interface LoginPromptModalProps {
|
|
onClose: () => void;
|
|
}
|
|
|
|
const LoginPromptModal: React.FC<LoginPromptModalProps> = ({ onClose }) => {
|
|
const { t } = useTranslation();
|
|
const overlayCloseHandlers = useOverlayClose(onClose);
|
|
|
|
const handleLogin = async () => {
|
|
try {
|
|
sessionStorage.setItem('castad_login_redirect', window.location.pathname);
|
|
const response = await getKakaoLoginUrl();
|
|
window.location.href = response.auth_url;
|
|
} catch (err) {
|
|
console.error('Failed to get Kakao login URL:', err);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
position: 'fixed',
|
|
inset: 0,
|
|
background: 'rgba(0, 0, 0, 0.7)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
zIndex: 9999,
|
|
padding: '16px',
|
|
}}
|
|
{...overlayCloseHandlers}
|
|
>
|
|
<div
|
|
style={{
|
|
background: '#01282A',
|
|
border: '1px solid rgba(166, 255, 234, 0.15)',
|
|
borderRadius: '20px',
|
|
boxShadow: '0 24px 60px rgba(0, 0, 0, 0.5)',
|
|
padding: '44px 32px 36px',
|
|
width: '380px',
|
|
maxWidth: '100%',
|
|
textAlign: 'center',
|
|
position: 'relative',
|
|
}}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<button
|
|
onClick={onClose}
|
|
aria-label="닫기"
|
|
style={{
|
|
position: 'absolute',
|
|
top: '16px',
|
|
right: '16px',
|
|
background: 'none',
|
|
border: 'none',
|
|
cursor: 'pointer',
|
|
color: '#9BCACC',
|
|
padding: '4px',
|
|
}}
|
|
>
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
<line x1="4" y1="4" x2="16" y2="16"/>
|
|
<line x1="16" y1="4" x2="4" y2="16"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<div
|
|
style={{
|
|
width: '56px',
|
|
height: '56px',
|
|
margin: '0 auto 20px',
|
|
borderRadius: '50%',
|
|
background: 'rgba(166, 255, 234, 0.1)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#A6FFEA" strokeWidth="2">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
|
<circle cx="12" cy="7" r="4" />
|
|
</svg>
|
|
</div>
|
|
|
|
<h2 style={{ color: '#FFFFFF', fontSize: '22px', fontWeight: 700, marginBottom: '10px', lineHeight: 1.4 }}>
|
|
{t('loginPrompt.title')}
|
|
</h2>
|
|
<p style={{ color: '#9BCACC', fontSize: '14px', lineHeight: 1.5, marginBottom: '28px', whiteSpace: 'pre-line' }}>
|
|
{t('loginPrompt.description')}
|
|
</p>
|
|
|
|
<button
|
|
onClick={handleLogin}
|
|
style={{
|
|
width: '100%',
|
|
padding: '15px',
|
|
background: '#FEE500',
|
|
color: '#3C1E1E',
|
|
border: 'none',
|
|
borderRadius: '10px',
|
|
fontSize: '16px',
|
|
fontWeight: 700,
|
|
cursor: 'pointer',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: '8px',
|
|
boxShadow: '0 4px 14px rgba(254, 229, 0, 0.25)',
|
|
}}
|
|
>
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path fillRule="evenodd" clipRule="evenodd" d="M10 2C5.582 2 2 4.91 2 8.5c0 2.26 1.37 4.25 3.44 5.44L4.6 17.1a.3.3 0 0 0 .44.33l4.03-2.67c.3.03.62.04.93.04 4.418 0 8-2.91 8-6.5S14.418 2 10 2z" fill="#3C1E1E"/>
|
|
</svg>
|
|
{t('loginPrompt.loginBtn')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LoginPromptModal;
|