122 lines
3.7 KiB
TypeScript
122 lines
3.7 KiB
TypeScript
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
// 연결된 소셜 계정 정보를 저장하는 localStorage 키
|
|
const SOCIAL_CONNECTED_KEY = 'castad_social_connected';
|
|
|
|
interface ConnectedSocialAccount {
|
|
platform: string;
|
|
account_id: string;
|
|
channel_name: string;
|
|
profile_image: string | null;
|
|
connected_at: string;
|
|
}
|
|
|
|
const SocialConnectSuccess: React.FC = () => {
|
|
const [countdown, setCountdown] = useState(3);
|
|
|
|
// URL 파라미터 파싱
|
|
const searchParams = new URLSearchParams(window.location.search);
|
|
const platform = searchParams.get('platform') || 'unknown';
|
|
const accountId = searchParams.get('account_id') || '';
|
|
const channelName = searchParams.get('channel_name') || '';
|
|
const profileImage = searchParams.get('profile_image') || null;
|
|
|
|
const platformName = platform === 'youtube' ? 'YouTube' :
|
|
platform === 'instagram' ? 'Instagram' :
|
|
platform === 'facebook' ? 'Facebook' : platform;
|
|
|
|
// 연결된 계정 정보를 localStorage에 저장
|
|
useEffect(() => {
|
|
if (platform && accountId) {
|
|
const connectedAccount: ConnectedSocialAccount = {
|
|
platform,
|
|
account_id: accountId,
|
|
channel_name: channelName,
|
|
profile_image: profileImage,
|
|
connected_at: new Date().toISOString(),
|
|
};
|
|
localStorage.setItem(SOCIAL_CONNECTED_KEY, JSON.stringify(connectedAccount));
|
|
console.log('[Social Connect] Account saved:', connectedAccount);
|
|
}
|
|
}, [platform, accountId, channelName, profileImage]);
|
|
|
|
const navigateToHome = () => {
|
|
// URL을 루트로 변경하고 페이지 새로고침하여 generation_flow로 이동
|
|
window.location.href = '/';
|
|
};
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setCountdown(prev => {
|
|
if (prev <= 1) {
|
|
clearInterval(timer);
|
|
navigateToHome();
|
|
return 0;
|
|
}
|
|
return prev - 1;
|
|
});
|
|
}, 1000);
|
|
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="social-connect-page">
|
|
<div className="social-connect-card success">
|
|
{/* 프로필 이미지가 있으면 표시 */}
|
|
{profileImage ? (
|
|
<img
|
|
src={profileImage}
|
|
alt={channelName || platformName}
|
|
className="social-connect-profile-image"
|
|
/>
|
|
) : (
|
|
<div className="social-connect-icon success">
|
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
|
|
<polyline points="22 4 12 14.01 9 11.01" />
|
|
</svg>
|
|
</div>
|
|
)}
|
|
|
|
<h1 className="social-connect-title">
|
|
{channelName || platformName} 연결 완료
|
|
</h1>
|
|
|
|
<p className="social-connect-message">
|
|
{channelName ? (
|
|
<>{platformName} 계정이 성공적으로 연결되었습니다.</>
|
|
) : (
|
|
<>계정이 성공적으로 연결되었습니다.</>
|
|
)}
|
|
</p>
|
|
|
|
{channelName && (
|
|
<div className="social-connect-account-info">
|
|
<span className="social-connect-channel-badge">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<polyline points="20 6 9 17 4 12" />
|
|
</svg>
|
|
인증됨
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
<p className="social-connect-countdown">
|
|
{countdown}초 후 자동으로 이동합니다...
|
|
</p>
|
|
|
|
<button
|
|
onClick={navigateToHome}
|
|
className="social-connect-button"
|
|
>
|
|
지금 이동
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SocialConnectSuccess;
|