Add SNS Marketing Campaign feature
- Add cash_cc_balance to User model (withdrawable CC) - Create SnsShareSubmission model for SNS share verification - Add marketing campaign settings to SystemSettings - Add reward_type to ReferralReward model - Create /api/sns-share endpoints for submission and verification - Add referral signup reward logic (10CC on signup) - Create /sns-share user page for SNS sharing - Create /admin/sns-shares management page - Add marketing settings UI to admin settings page - Add SNS Shares menu to admin sidebar 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
AutonetSellCar Deploy
373
frontend/src/app/sns-share/page.tsx
Normal file
373
frontend/src/app/sns-share/page.tsx
Normal file
@@ -0,0 +1,373 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useAuthStore } from '@/lib/store';
|
||||
import { useTranslation } from '@/lib/i18n';
|
||||
import { snsShareApi, SnsShareSubmission, CampaignStatus, vehicleRequestsApi } from '@/lib/api';
|
||||
|
||||
const PLATFORMS = [
|
||||
{ id: 'twitter', name: 'Twitter/X', icon: '𝕏' },
|
||||
{ id: 'instagram', name: 'Instagram', icon: '📷' },
|
||||
{ id: 'facebook', name: 'Facebook', icon: '📘' },
|
||||
];
|
||||
|
||||
export default function SnsSharePage() {
|
||||
const { t, language } = useTranslation();
|
||||
const { user, token } = useAuthStore();
|
||||
const router = useRouter();
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [campaign, setCampaign] = useState<CampaignStatus | null>(null);
|
||||
const [submissions, setSubmissions] = useState<SnsShareSubmission[]>([]);
|
||||
const [approvedCars, setApprovedCars] = useState<any[]>([]);
|
||||
|
||||
// Form state
|
||||
const [selectedCarId, setSelectedCarId] = useState<number | null>(null);
|
||||
const [selectedPlatform, setSelectedPlatform] = useState<string>('');
|
||||
const [snsUrl, setSnsUrl] = useState('');
|
||||
const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!user) {
|
||||
router.push('/login');
|
||||
return;
|
||||
}
|
||||
loadData();
|
||||
}, [user, router]);
|
||||
|
||||
const loadData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// Load campaign status
|
||||
const campaignData = await snsShareApi.getCampaignStatus();
|
||||
setCampaign(campaignData);
|
||||
|
||||
// Load my submissions
|
||||
const submissionsData = await snsShareApi.getMySubmissions();
|
||||
setSubmissions(submissionsData.submissions);
|
||||
|
||||
// Load my approved cars from vehicle requests
|
||||
try {
|
||||
const vehicleData = await vehicleRequestsApi.getMyVehicles();
|
||||
const cars: any[] = [];
|
||||
vehicleData.vehicle_requests?.forEach((req: any) => {
|
||||
req.approved_vehicles?.forEach((v: any) => {
|
||||
cars.push({
|
||||
id: v.car_id || v.id,
|
||||
name: v.car_data?.car_name || v.car_data?.full_name || 'Unknown Car',
|
||||
image: v.car_data?.images?.[0] || null,
|
||||
});
|
||||
});
|
||||
});
|
||||
setApprovedCars(cars);
|
||||
} catch (e) {
|
||||
console.log('No approved cars found');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load data:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!selectedCarId || !selectedPlatform || !snsUrl) {
|
||||
setMessage({
|
||||
type: 'error',
|
||||
text: language === 'ko' ? '모든 필드를 입력해주세요.' : 'Please fill in all fields.',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Basic URL validation
|
||||
if (!snsUrl.startsWith('http://') && !snsUrl.startsWith('https://')) {
|
||||
setMessage({
|
||||
type: 'error',
|
||||
text: language === 'ko' ? '올바른 URL을 입력해주세요.' : 'Please enter a valid URL.',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
setMessage(null);
|
||||
|
||||
try {
|
||||
await snsShareApi.submit(selectedCarId, selectedPlatform, snsUrl);
|
||||
setMessage({
|
||||
type: 'success',
|
||||
text: language === 'ko'
|
||||
? '제출되었습니다! 24시간 내에 검증 후 CC가 지급됩니다.'
|
||||
: 'Submitted! You will receive CC after verification within 24 hours.',
|
||||
});
|
||||
// Reset form
|
||||
setSelectedCarId(null);
|
||||
setSelectedPlatform('');
|
||||
setSnsUrl('');
|
||||
// Reload submissions
|
||||
const submissionsData = await snsShareApi.getMySubmissions();
|
||||
setSubmissions(submissionsData.submissions);
|
||||
} catch (error: any) {
|
||||
const detail = error.response?.data?.detail || (language === 'ko' ? '제출 실패' : 'Submission failed');
|
||||
setMessage({ type: 'error', text: detail });
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
const styles: Record<string, string> = {
|
||||
pending: 'bg-yellow-100 text-yellow-800',
|
||||
approved: 'bg-green-100 text-green-800',
|
||||
rejected: 'bg-red-100 text-red-800',
|
||||
};
|
||||
const labels: Record<string, Record<string, string>> = {
|
||||
pending: { ko: '검증 대기', en: 'Pending' },
|
||||
approved: { ko: '승인됨', en: 'Approved' },
|
||||
rejected: { ko: '거부됨', en: 'Rejected' },
|
||||
};
|
||||
return (
|
||||
<span className={`px-2 py-1 text-xs rounded-full ${styles[status] || 'bg-gray-100'}`}>
|
||||
{labels[status]?.[language === 'ko' ? 'ko' : 'en'] || status}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 py-8">
|
||||
<div className="container mx-auto px-4 max-w-4xl">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-3xl font-bold text-gray-800 mb-2">
|
||||
{language === 'ko' ? 'SNS 공유하고 CC 받기' : 'Share on SNS and Earn CC'}
|
||||
</h1>
|
||||
<p className="text-gray-600">
|
||||
{language === 'ko'
|
||||
? '차량을 SNS에 공유하고 CC 보상을 받으세요!'
|
||||
: 'Share vehicles on social media and get CC rewards!'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Campaign Status */}
|
||||
{!campaign?.enabled ? (
|
||||
<div className="bg-gray-100 border border-gray-300 rounded-xl p-6 text-center mb-8">
|
||||
<div className="text-4xl mb-4">🚫</div>
|
||||
<h2 className="text-xl font-semibold text-gray-700 mb-2">
|
||||
{language === 'ko' ? '캠페인이 활성화되지 않았습니다' : 'Campaign is not active'}
|
||||
</h2>
|
||||
<p className="text-gray-500">
|
||||
{language === 'ko'
|
||||
? '마케팅 캠페인 기간에 다시 방문해주세요.'
|
||||
: 'Please visit again during the marketing campaign period.'}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Campaign Info Card */}
|
||||
<div className="bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-xl p-6 mb-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold mb-1">
|
||||
{language === 'ko' ? '마케팅 캠페인 진행 중!' : 'Marketing Campaign Active!'}
|
||||
</h2>
|
||||
<p className="text-primary-100">
|
||||
{campaign.start_date && campaign.end_date && (
|
||||
<>
|
||||
{new Date(campaign.start_date).toLocaleDateString()} ~{' '}
|
||||
{new Date(campaign.end_date).toLocaleDateString()}
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-3xl font-bold">{campaign.sns_share_reward_cc || 3} CC</div>
|
||||
<div className="text-sm text-primary-100">
|
||||
{language === 'ko' ? '공유당 보상' : 'per share'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit Form */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-6 mb-8">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
{language === 'ko' ? 'SNS 공유 제출' : 'Submit SNS Share'}
|
||||
</h3>
|
||||
|
||||
{message && (
|
||||
<div
|
||||
className={`mb-4 p-4 rounded-lg ${
|
||||
message.type === 'success'
|
||||
? 'bg-green-100 text-green-700'
|
||||
: 'bg-red-100 text-red-700'
|
||||
}`}
|
||||
>
|
||||
{message.text}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Car Selection */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
{language === 'ko' ? '차량 선택' : 'Select Car'} *
|
||||
</label>
|
||||
{approvedCars.length > 0 ? (
|
||||
<select
|
||||
value={selectedCarId || ''}
|
||||
onChange={(e) => setSelectedCarId(Number(e.target.value) || null)}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500"
|
||||
>
|
||||
<option value="">
|
||||
{language === 'ko' ? '차량을 선택하세요' : 'Select a car'}
|
||||
</option>
|
||||
{approvedCars.map((car) => (
|
||||
<option key={car.id} value={car.id}>
|
||||
{car.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<div className="p-4 bg-gray-100 rounded-lg text-gray-600 text-sm">
|
||||
{language === 'ko'
|
||||
? '추천받은 차량이 없습니다. 먼저 차량 추천을 요청해주세요.'
|
||||
: 'No recommended cars found. Please request vehicle recommendations first.'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Platform Selection */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
{language === 'ko' ? 'SNS 플랫폼' : 'SNS Platform'} *
|
||||
</label>
|
||||
<div className="flex gap-4">
|
||||
{PLATFORMS.map((platform) => (
|
||||
<button
|
||||
key={platform.id}
|
||||
type="button"
|
||||
onClick={() => setSelectedPlatform(platform.id)}
|
||||
className={`flex-1 py-3 px-4 rounded-lg border-2 transition ${
|
||||
selectedPlatform === platform.id
|
||||
? 'border-primary-500 bg-primary-50 text-primary-700'
|
||||
: 'border-gray-200 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<span className="text-2xl">{platform.icon}</span>
|
||||
<div className="text-sm mt-1">{platform.name}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* SNS URL */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
{language === 'ko' ? '게시물 URL' : 'Post URL'} *
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
value={snsUrl}
|
||||
onChange={(e) => setSnsUrl(e.target.value)}
|
||||
placeholder="https://..."
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
{language === 'ko'
|
||||
? '차량을 공유한 SNS 게시물의 URL을 입력하세요'
|
||||
: 'Enter the URL of your SNS post sharing the vehicle'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting || !selectedCarId || !selectedPlatform || !snsUrl}
|
||||
className="w-full py-3 bg-primary-600 text-white rounded-lg font-medium hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed transition"
|
||||
>
|
||||
{submitting
|
||||
? (language === 'ko' ? '제출 중...' : 'Submitting...')
|
||||
: (language === 'ko' ? '제출하기' : 'Submit')}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Info Box */}
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-8">
|
||||
<h4 className="font-medium text-blue-800 mb-2">
|
||||
{language === 'ko' ? '안내사항' : 'Information'}
|
||||
</h4>
|
||||
<ul className="text-sm text-blue-700 space-y-1">
|
||||
<li>
|
||||
{language === 'ko'
|
||||
? '• 제출 후 24시간 내에 관리자가 검증합니다.'
|
||||
: '• Admin will verify within 24 hours after submission.'}
|
||||
</li>
|
||||
<li>
|
||||
{language === 'ko'
|
||||
? `• 승인 시 ${campaign.sns_share_reward_cc || 3} CC가 지급됩니다.`
|
||||
: `• ${campaign.sns_share_reward_cc || 3} CC will be credited upon approval.`}
|
||||
</li>
|
||||
<li>
|
||||
{language === 'ko'
|
||||
? '• 같은 차량, 같은 URL은 중복 제출이 불가합니다.'
|
||||
: '• Duplicate submissions for the same car and URL are not allowed.'}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* My Submissions */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
{language === 'ko' ? '내 제출 내역' : 'My Submissions'}
|
||||
</h3>
|
||||
|
||||
{submissions.length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
{language === 'ko' ? '제출 내역이 없습니다.' : 'No submissions yet.'}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{submissions.map((sub) => (
|
||||
<div
|
||||
key={sub.id}
|
||||
className="border border-gray-200 rounded-lg p-4 flex items-center justify-between"
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-2xl">
|
||||
{PLATFORMS.find((p) => p.id === sub.platform)?.icon || '🔗'}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-gray-800">{sub.car_name || 'Car'}</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{new Date(sub.submitted_at).toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{sub.status === 'approved' && (
|
||||
<span className="text-green-600 font-medium">+{sub.reward_cc} CC</span>
|
||||
)}
|
||||
{getStatusBadge(sub.status)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user