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>

frontend/src/app/admin/layout.tsx

@@ -14,6 +14,7 @@ const menuItems = [
   { href: '/admin/dealers', label: 'Dealers', icon: '🤝' },
   { href: '/admin/payments', label: 'Payments', icon: '💳' },
   { href: '/admin/withdrawals', label: 'Withdrawals', icon: '💸' },
+  { href: '/admin/sns-shares', label: 'SNS Shares', icon: '📢' },
   { href: '/admin/notifications', label: 'Notifications', icon: '🔔' },
   { href: '/admin/translations', label: 'Translations', icon: '🌐' },
   { href: '/admin/dealer-translations', label: 'Dealer Descriptions', icon: '📝' },

frontend/src/app/admin/settings/page.tsx

@@ -24,6 +24,15 @@ interface SystemSettings {
   exchange_rate_weight_mnt: number;
   exchange_rate_weight_rub: number;
   exchange_rate_weight_cny: number;
+  // Marketing campaign settings
+  marketing_enabled: boolean;
+  marketing_start_date: string | null;
+  marketing_end_date: string | null;
+  sns_share_reward_cc: number;
+  referral_signup_reward_cc: number;
+  event_cc_validity_months: number;
+  withdrawal_enabled: boolean;
+  min_withdrawal_usd: number;
 }
 
 interface ExchangeRateWeights {
@@ -66,6 +75,15 @@ export default function SettingsPage() {
     referral_reward_enabled: true,
     referral_reward_percent: 10.0,
     referral_reward_type: 'one_time',
+    // Marketing campaign
+    marketing_enabled: false,
+    marketing_start_date: '',
+    marketing_end_date: '',
+    sns_share_reward_cc: 3.0,
+    referral_signup_reward_cc: 10.0,
+    event_cc_validity_months: 6,
+    withdrawal_enabled: true,
+    min_withdrawal_usd: 10.0,
   });
 
   useEffect(() => {
@@ -96,6 +114,15 @@ export default function SettingsPage() {
           referral_reward_enabled: data.referral_reward_enabled ?? true,
           referral_reward_percent: data.referral_reward_percent ?? 10.0,
           referral_reward_type: data.referral_reward_type || 'one_time',
+          // Marketing campaign
+          marketing_enabled: data.marketing_enabled ?? false,
+          marketing_start_date: data.marketing_start_date ? data.marketing_start_date.split('T')[0] : '',
+          marketing_end_date: data.marketing_end_date ? data.marketing_end_date.split('T')[0] : '',
+          sns_share_reward_cc: data.sns_share_reward_cc ?? 3.0,
+          referral_signup_reward_cc: data.referral_signup_reward_cc ?? 10.0,
+          event_cc_validity_months: data.event_cc_validity_months ?? 6,
+          withdrawal_enabled: data.withdrawal_enabled ?? true,
+          min_withdrawal_usd: data.min_withdrawal_usd ?? 10.0,
         });
       }
     } catch (error) {
@@ -531,6 +558,152 @@ export default function SettingsPage() {
           </div>
         </div>
 
+        {/* Marketing Campaign Settings */}
+        <div className="bg-white rounded-xl shadow-sm p-6">
+          <h2 className="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
+            <span>📢 Marketing Campaign Settings</span>
+          </h2>
+
+          <div className="space-y-4">
+            {/* Campaign Toggle */}
+            <div className="flex items-center gap-3">
+              <label className="relative inline-flex items-center cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={formData.marketing_enabled}
+                  onChange={(e) => setFormData(prev => ({ ...prev, marketing_enabled: e.target.checked }))}
+                  className="sr-only peer"
+                />
+                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
+              </label>
+              <div>
+                <span className="text-sm font-medium text-gray-700">Enable Marketing Campaign</span>
+                <p className="text-sm text-gray-500">SNS 공유 및 레퍼럴 보상 캠페인 활성화</p>
+              </div>
+            </div>
+
+            {/* Campaign Period */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Campaign Start Date
+                </label>
+                <input
+                  type="date"
+                  value={formData.marketing_start_date}
+                  onChange={(e) => setFormData(prev => ({ ...prev, marketing_start_date: e.target.value }))}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Campaign End Date
+                </label>
+                <input
+                  type="date"
+                  value={formData.marketing_end_date}
+                  onChange={(e) => setFormData(prev => ({ ...prev, marketing_end_date: e.target.value }))}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                />
+              </div>
+            </div>
+
+            {/* Reward Settings */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  SNS Share Reward (CC)
+                </label>
+                <input
+                  type="number"
+                  min="0"
+                  max="100"
+                  step="0.5"
+                  value={formData.sns_share_reward_cc}
+                  onChange={(e) => setFormData(prev => ({ ...prev, sns_share_reward_cc: parseFloat(e.target.value) || 3 }))}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                />
+                <p className="mt-1 text-sm text-gray-500">SNS 공유 승인 시 지급되는 CC</p>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Referral Signup Reward (CC)
+                </label>
+                <input
+                  type="number"
+                  min="0"
+                  max="100"
+                  step="0.5"
+                  value={formData.referral_signup_reward_cc}
+                  onChange={(e) => setFormData(prev => ({ ...prev, referral_signup_reward_cc: parseFloat(e.target.value) || 10 }))}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                />
+                <p className="mt-1 text-sm text-gray-500">친구가 가입 시 추천인에게 지급되는 CC</p>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Event CC Validity (Months)
+                </label>
+                <input
+                  type="number"
+                  min="1"
+                  max="24"
+                  value={formData.event_cc_validity_months}
+                  onChange={(e) => setFormData(prev => ({ ...prev, event_cc_validity_months: parseInt(e.target.value) || 6 }))}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                />
+                <p className="mt-1 text-sm text-gray-500">이벤트 CC 유효기간</p>
+              </div>
+            </div>
+
+            {/* Withdrawal Settings */}
+            <div className="border-t pt-4 mt-4">
+              <h3 className="font-medium text-gray-700 mb-3">Withdrawal Settings</h3>
+              <div className="flex items-center gap-3 mb-4">
+                <label className="relative inline-flex items-center cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={formData.withdrawal_enabled}
+                    onChange={(e) => setFormData(prev => ({ ...prev, withdrawal_enabled: e.target.checked }))}
+                    className="sr-only peer"
+                  />
+                  <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600"></div>
+                </label>
+                <span className="text-sm font-medium text-gray-700">Enable Withdrawals</span>
+              </div>
+
+              <div className="max-w-xs">
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Minimum Withdrawal (USD)
+                </label>
+                <input
+                  type="number"
+                  min="1"
+                  max="1000"
+                  value={formData.min_withdrawal_usd}
+                  onChange={(e) => setFormData(prev => ({ ...prev, min_withdrawal_usd: parseFloat(e.target.value) || 10 }))}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                />
+              </div>
+            </div>
+
+            {/* Campaign Preview */}
+            <div className={`p-4 rounded-lg ${formData.marketing_enabled ? 'bg-green-50' : 'bg-gray-50'}`}>
+              <h3 className={`font-medium mb-2 ${formData.marketing_enabled ? 'text-green-800' : 'text-gray-700'}`}>
+                Campaign Status: {formData.marketing_enabled ? 'ACTIVE' : 'INACTIVE'}
+              </h3>
+              <div className={`text-sm space-y-1 ${formData.marketing_enabled ? 'text-green-700' : 'text-gray-600'}`}>
+                <p>SNS Share: {formData.sns_share_reward_cc} CC per approved share</p>
+                <p>Referral Signup: {formData.referral_signup_reward_cc} CC per new signup</p>
+                <p>Period: {formData.marketing_start_date || 'Not set'} ~ {formData.marketing_end_date || 'Not set'}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
         {/* Submit Button */}
         <div className="flex justify-end">
           <button

frontend/src/app/admin/sns-shares/page.tsx

@@ -0,0 +1,281 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuthStore } from '@/lib/store';
+import { snsShareApi, SnsShareSubmission, SnsShareStats } from '@/lib/api';
+
+const PLATFORMS: Record<string, { name: string; icon: string }> = {
+  twitter: { name: 'Twitter/X', icon: '𝕏' },
+  instagram: { name: 'Instagram', icon: '📷' },
+  facebook: { name: 'Facebook', icon: '📘' },
+};
+
+export default function AdminSnsSharesPage() {
+  const { user } = useAuthStore();
+  const router = useRouter();
+
+  const [loading, setLoading] = useState(true);
+  const [submissions, setSubmissions] = useState<SnsShareSubmission[]>([]);
+  const [stats, setStats] = useState<SnsShareStats | null>(null);
+  const [statusFilter, setStatusFilter] = useState<string>('pending');
+  const [selectedSubmission, setSelectedSubmission] = useState<SnsShareSubmission | null>(null);
+  const [rejectReason, setRejectReason] = useState('');
+  const [processing, setProcessing] = useState(false);
+
+  useEffect(() => {
+    if (!user?.is_admin) {
+      router.push('/');
+      return;
+    }
+    loadData();
+  }, [user, router, statusFilter]);
+
+  const loadData = async () => {
+    setLoading(true);
+    try {
+      const [submissionsData, statsData] = await Promise.all([
+        snsShareApi.getAdminList(statusFilter || undefined),
+        snsShareApi.getAdminStats(),
+      ]);
+      setSubmissions(submissionsData.submissions);
+      setStats(statsData);
+    } catch (error) {
+      console.error('Failed to load data:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleVerify = async (approved: boolean) => {
+    if (!selectedSubmission) return;
+
+    setProcessing(true);
+    try {
+      await snsShareApi.verify(
+        selectedSubmission.id,
+        approved,
+        approved ? undefined : rejectReason
+      );
+      setSelectedSubmission(null);
+      setRejectReason('');
+      await loadData();
+    } catch (error) {
+      console.error('Failed to verify:', error);
+      alert('Failed to verify submission');
+    } finally {
+      setProcessing(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',
+    };
+    return (
+      <span className={`px-2 py-1 text-xs rounded-full ${styles[status] || 'bg-gray-100'}`}>
+        {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-100 py-8">
+      <div className="container mx-auto px-4">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-800 mb-2">SNS Share Management</h1>
+          <p className="text-gray-600">Review and verify SNS share submissions</p>
+        </div>
+
+        {/* Stats Cards */}
+        {stats && (
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+            <div className="bg-white rounded-lg shadow p-4">
+              <div className="text-sm text-gray-500">Total Submissions</div>
+              <div className="text-2xl font-bold text-gray-800">{stats.total_submissions}</div>
+            </div>
+            <div className="bg-yellow-50 rounded-lg shadow p-4">
+              <div className="text-sm text-yellow-600">Pending</div>
+              <div className="text-2xl font-bold text-yellow-700">{stats.pending_submissions}</div>
+            </div>
+            <div className="bg-green-50 rounded-lg shadow p-4">
+              <div className="text-sm text-green-600">Approved</div>
+              <div className="text-2xl font-bold text-green-700">{stats.approved_submissions}</div>
+            </div>
+            <div className="bg-blue-50 rounded-lg shadow p-4">
+              <div className="text-sm text-blue-600">Total Rewarded</div>
+              <div className="text-2xl font-bold text-blue-700">{stats.total_rewarded_cc} CC</div>
+            </div>
+          </div>
+        )}
+
+        {/* Filter Tabs */}
+        <div className="bg-white rounded-lg shadow mb-6">
+          <div className="flex border-b">
+            {['pending', 'approved', 'rejected', ''].map((status) => (
+              <button
+                key={status}
+                onClick={() => setStatusFilter(status)}
+                className={`px-6 py-3 font-medium ${
+                  statusFilter === status
+                    ? 'text-primary-600 border-b-2 border-primary-600'
+                    : 'text-gray-500 hover:text-gray-700'
+                }`}
+              >
+                {status || 'All'}
+                {status === 'pending' && stats && stats.pending_submissions > 0 && (
+                  <span className="ml-2 bg-yellow-500 text-white text-xs px-2 py-0.5 rounded-full">
+                    {stats.pending_submissions}
+                  </span>
+                )}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Submissions Table */}
+        <div className="bg-white rounded-lg shadow overflow-hidden">
+          <table className="w-full">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">Platform</th>
+                <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">Car</th>
+                <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">User</th>
+                <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">Submitted</th>
+                <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">Status</th>
+                <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200">
+              {submissions.length === 0 ? (
+                <tr>
+                  <td colSpan={6} className="px-4 py-8 text-center text-gray-500">
+                    No submissions found
+                  </td>
+                </tr>
+              ) : (
+                submissions.map((sub) => (
+                  <tr key={sub.id} className="hover:bg-gray-50">
+                    <td className="px-4 py-3">
+                      <div className="flex items-center gap-2">
+                        <span className="text-xl">{PLATFORMS[sub.platform]?.icon || '🔗'}</span>
+                        <span className="text-sm">{PLATFORMS[sub.platform]?.name || sub.platform}</span>
+                      </div>
+                    </td>
+                    <td className="px-4 py-3">
+                      <div className="text-sm font-medium">{sub.car_name || `Car #${sub.car_id}`}</div>
+                    </td>
+                    <td className="px-4 py-3 text-sm text-gray-500">User #{sub.user_id}</td>
+                    <td className="px-4 py-3 text-sm text-gray-500">
+                      {new Date(sub.submitted_at).toLocaleString()}
+                    </td>
+                    <td className="px-4 py-3">{getStatusBadge(sub.status)}</td>
+                    <td className="px-4 py-3">
+                      <div className="flex gap-2">
+                        <a
+                          href={sub.sns_url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-blue-600 hover:underline text-sm"
+                        >
+                          View Post
+                        </a>
+                        {sub.status === 'pending' && (
+                          <button
+                            onClick={() => setSelectedSubmission(sub)}
+                            className="text-primary-600 hover:underline text-sm"
+                          >
+                            Verify
+                          </button>
+                        )}
+                      </div>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Verification Modal */}
+      {selectedSubmission && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl max-w-lg w-full p-6">
+            <h3 className="text-xl font-bold text-gray-800 mb-4">Verify Submission</h3>
+
+            <div className="bg-gray-50 rounded-lg p-4 mb-4">
+              <div className="flex items-center gap-3 mb-2">
+                <span className="text-2xl">{PLATFORMS[selectedSubmission.platform]?.icon}</span>
+                <div>
+                  <div className="font-medium">{selectedSubmission.car_name || 'Car'}</div>
+                  <div className="text-sm text-gray-500">
+                    User #{selectedSubmission.user_id}
+                  </div>
+                </div>
+              </div>
+              <a
+                href={selectedSubmission.sns_url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-600 hover:underline text-sm break-all"
+              >
+                {selectedSubmission.sns_url}
+              </a>
+            </div>
+
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Reject Reason (if rejecting)
+              </label>
+              <textarea
+                value={rejectReason}
+                onChange={(e) => setRejectReason(e.target.value)}
+                placeholder="Enter reason for rejection..."
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 resize-none"
+                rows={3}
+              />
+            </div>
+
+            <div className="flex gap-3">
+              <button
+                onClick={() => {
+                  setSelectedSubmission(null);
+                  setRejectReason('');
+                }}
+                className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={() => handleVerify(false)}
+                disabled={processing}
+                className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50"
+              >
+                {processing ? 'Processing...' : 'Reject'}
+              </button>
+              <button
+                onClick={() => handleVerify(true)}
+                disabled={processing}
+                className="flex-1 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50"
+              >
+                {processing ? 'Processing...' : `Approve (+${selectedSubmission.reward_cc} CC)`}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/app/sns-share/page.tsx

@@ -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>
+  );
+}