feat: Add dealer apply link to profile and agreement step to dealer application

- Add dealer program section to profile page with apply/view card button
- Add 2-step dealer application: privacy consent + obligations agreement before form
- Add all translations (en/mn/ru/ko) for new dealer agreement UI

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/app/dealer/apply/page.tsx

@@ -35,6 +35,11 @@ export default function DealerApplyPage() {
   const [existingApplication, setExistingApplication] = useState<DealerApplication | null>(null);
   const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
 
+  const [step, setStep] = useState<'agreement' | 'form'>('agreement');
+  const [privacyAgreed, setPrivacyAgreed] = useState(false);
+  const [obligationAgreed, setObligationAgreed] = useState(false);
+  const [agreeError, setAgreeError] = useState(false);
+
   const [formData, setFormData] = useState({
     business_name: '',
     business_number: '',
@@ -182,6 +187,138 @@ export default function DealerApplyPage() {
     );
   }
 
+  const handleProceedToForm = () => {
+    if (!privacyAgreed || !obligationAgreed) {
+      setAgreeError(true);
+      return;
+    }
+    setAgreeError(false);
+    setStep('form');
+  };
+
+  const handleAgreeAll = (checked: boolean) => {
+    setPrivacyAgreed(checked);
+    setObligationAgreed(checked);
+    if (checked) setAgreeError(false);
+  };
+
+  // Step 1: Agreement
+  if (step === 'agreement') {
+    return (
+      <div className="min-h-screen bg-gray-50 py-12">
+        <div className="container mx-auto px-4">
+          <div className="max-w-2xl mx-auto">
+            {/* Header */}
+            <div className="text-center mb-8">
+              <h1 className="text-3xl font-bold text-gray-800 mb-2">{t.dealerAgreementTitle}</h1>
+              <p className="text-gray-600">{t.dealerApplicationSubtitle}</p>
+            </div>
+
+            {/* Benefits Card */}
+            <div className="bg-gradient-to-r from-primary-600 to-primary-700 text-white rounded-xl p-6 mb-8">
+              <h2 className="text-xl font-semibold mb-4">
+                {language === 'ko' ? '딜러 혜택' : 'Dealer Benefits'}
+              </h2>
+              <ul className="space-y-2">
+                <li className="flex items-center gap-2">
+                  <span>💰</span>
+                  <span>{language === 'ko' ? '차량 판매 시 수수료 50% 수익' : '50% commission on vehicle sales'}</span>
+                </li>
+                <li className="flex items-center gap-2">
+                  <span>🎫</span>
+                  <span>{language === 'ko' ? '공식 딜러증 발급' : 'Official dealer card issued'}</span>
+                </li>
+                <li className="flex items-center gap-2">
+                  <span>📈</span>
+                  <span>{language === 'ko' ? '수익 관리 대시보드' : 'Earnings management dashboard'}</span>
+                </li>
+              </ul>
+            </div>
+
+            {/* Privacy Agreement */}
+            <div className="bg-white rounded-xl shadow-lg p-6 mb-4">
+              <div className="flex items-start gap-3 mb-3">
+                <input
+                  type="checkbox"
+                  id="privacy-agree"
+                  checked={privacyAgreed}
+                  onChange={(e) => {
+                    setPrivacyAgreed(e.target.checked);
+                    if (e.target.checked) setAgreeError(false);
+                  }}
+                  className="mt-1 w-5 h-5 text-primary-600 rounded border-gray-300 focus:ring-primary-500 cursor-pointer"
+                />
+                <label htmlFor="privacy-agree" className="font-semibold text-gray-800 cursor-pointer">
+                  {t.dealerPrivacyAgreement}
+                </label>
+              </div>
+              <div className="bg-gray-50 border border-gray-200 rounded-lg p-4 max-h-48 overflow-y-auto">
+                <p className="text-sm text-gray-700 whitespace-pre-line leading-relaxed">
+                  {t.dealerPrivacyContent}
+                </p>
+              </div>
+            </div>
+
+            {/* Obligation Agreement */}
+            <div className="bg-white rounded-xl shadow-lg p-6 mb-4">
+              <div className="flex items-start gap-3 mb-3">
+                <input
+                  type="checkbox"
+                  id="obligation-agree"
+                  checked={obligationAgreed}
+                  onChange={(e) => {
+                    setObligationAgreed(e.target.checked);
+                    if (e.target.checked) setAgreeError(false);
+                  }}
+                  className="mt-1 w-5 h-5 text-primary-600 rounded border-gray-300 focus:ring-primary-500 cursor-pointer"
+                />
+                <label htmlFor="obligation-agree" className="font-semibold text-gray-800 cursor-pointer">
+                  {t.dealerObligationAgreement}
+                </label>
+              </div>
+              <div className="bg-gray-50 border border-gray-200 rounded-lg p-4 max-h-48 overflow-y-auto">
+                <p className="text-sm text-gray-700 whitespace-pre-line leading-relaxed">
+                  {t.dealerObligationContent}
+                </p>
+              </div>
+            </div>
+
+            {/* Agree All + Proceed */}
+            <div className="bg-white rounded-xl shadow-lg p-6">
+              <label className="flex items-center gap-3 cursor-pointer mb-4">
+                <input
+                  type="checkbox"
+                  checked={privacyAgreed && obligationAgreed}
+                  onChange={(e) => handleAgreeAll(e.target.checked)}
+                  className="w-5 h-5 text-primary-600 rounded border-gray-300 focus:ring-primary-500"
+                />
+                <span className="font-semibold text-gray-800">{t.dealerAgreeAll}</span>
+              </label>
+
+              {agreeError && (
+                <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg">
+                  <p className="text-sm text-red-600">{t.dealerMustAgree}</p>
+                </div>
+              )}
+
+              <button
+                onClick={handleProceedToForm}
+                className={`w-full px-4 py-4 rounded-lg font-semibold transition ${
+                  privacyAgreed && obligationAgreed
+                    ? 'bg-primary-600 text-white hover:bg-primary-700'
+                    : 'bg-gray-300 text-gray-500 cursor-not-allowed'
+                }`}
+              >
+                {t.dealerProceedToApply}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Step 2: Application Form
   return (
     <div className="min-h-screen bg-gray-50 py-12">
       <div className="container mx-auto px-4">
@@ -192,25 +329,17 @@ export default function DealerApplyPage() {
             <p className="text-gray-600">{t.dealerApplicationSubtitle}</p>
           </div>
 
-          {/* Benefits Card */}
-          <div className="bg-gradient-to-r from-primary-600 to-primary-700 text-white rounded-xl p-6 mb-8">
-            <h2 className="text-xl font-semibold mb-4">
-              {language === 'ko' ? '딜러 혜택' : 'Dealer Benefits'}
-            </h2>
-            <ul className="space-y-2">
-              <li className="flex items-center gap-2">
-                <span>💰</span>
-                <span>{language === 'ko' ? '차량 판매 시 수수료 50% 수익' : '50% commission on vehicle sales'}</span>
-              </li>
-              <li className="flex items-center gap-2">
-                <span>🎫</span>
-                <span>{language === 'ko' ? '공식 딜러증 발급' : 'Official dealer card issued'}</span>
-              </li>
-              <li className="flex items-center gap-2">
-                <span>📈</span>
-                <span>{language === 'ko' ? '수익 관리 대시보드' : 'Earnings management dashboard'}</span>
-              </li>
-            </ul>
+          {/* Step indicator */}
+          <div className="flex items-center justify-center gap-3 mb-8">
+            <div className="flex items-center gap-2 text-green-600">
+              <div className="w-8 h-8 rounded-full bg-green-600 text-white flex items-center justify-center text-sm font-bold">✓</div>
+              <span className="text-sm font-medium">{t.dealerAgreementTitle}</span>
+            </div>
+            <div className="w-8 h-px bg-gray-300"></div>
+            <div className="flex items-center gap-2 text-primary-600">
+              <div className="w-8 h-8 rounded-full bg-primary-600 text-white flex items-center justify-center text-sm font-bold">2</div>
+              <span className="text-sm font-medium">{t.dealerApplication}</span>
+            </div>
           </div>
 
           {/* Message */}

frontend/src/app/profile/page.tsx

@@ -249,6 +249,30 @@ export default function ProfilePage() {
             </div>
           </div>
 
+          {/* Dealer Program Section */}
+          <div className="bg-white rounded-xl shadow-lg p-6 mb-6">
+            <h2 className="text-xl font-semibold text-gray-800 mb-4">{t.dealerSectionTitle}</h2>
+            <p className="text-gray-600 text-sm mb-4">{t.dealerSectionDesc}</p>
+
+            {user.is_dealer ? (
+              <a
+                href="/dealer/my-card"
+                className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-lg hover:from-amber-600 hover:to-amber-700 transition font-semibold"
+              >
+                <span>🎫</span>
+                <span>{t.dealerViewCard}</span>
+              </a>
+            ) : (
+              <a
+                href="/dealer/apply"
+                className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition font-semibold"
+              >
+                <span>🤝</span>
+                <span>{t.dealerApplyButton}</span>
+              </a>
+            )}
+          </div>
+
           {/* Referral Code Card */}
           <div className="bg-white rounded-xl shadow-lg p-6">
             <h2 className="text-xl font-semibold text-gray-800 mb-4">{t.myReferralCode}</h2>