Add SOLD OUT badge and improve deployment docs

- Add SOLD OUT overlay on car detail page image
- Add SOLD OUT badge next to car name
- Add Sold Out status in Admin Cars detail view
- Add soldout field to Car TypeScript interface
- Create PRODUCTION_VALUES.md for deployment reference
- Update CLAUDE.md with CRITICAL deployment section
- Update TROUBLESHOOTING.md with recurring errors

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

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

@@ -218,6 +218,17 @@ export default function CarsAdminPage() {
     added: number;
     errors: number;
   } | null>(null);
+  const [requestInfo, setRequestInfo] = useState<{
+    user_email?: string;
+    user_name?: string;
+    maker_name?: string;
+    model_name?: string;
+    grade_name?: string;
+    year_from?: number;
+    year_to?: number;
+    mileage_max?: number;
+    fuel?: string;
+  } | null>(null);
 
   // Dealer description editing state
   const [showDescEditModal, setShowDescEditModal] = useState(false);
@@ -299,6 +310,21 @@ export default function CarsAdminPage() {
 
       // Switch to Carmodoo tab
       setActiveTab('carmodoo');
+
+      // Fetch request details for display
+      vehicleRequestsApi.adminGetRequestDetail(parseInt(requestId)).then(data => {
+        setRequestInfo({
+          user_email: data.request.user_email,
+          user_name: data.request.user_name,
+          maker_name: data.request.maker_name,
+          model_name: data.request.model_name,
+          grade_name: data.request.grade_name,
+          year_from: data.request.year_from,
+          year_to: data.request.year_to,
+          mileage_max: data.request.mileage_max,
+          fuel: data.request.fuel,
+        });
+      }).catch(err => console.error('Failed to load request info:', err));
     }
   }, [requestId]);
 
@@ -1195,24 +1221,76 @@ export default function CarsAdminPage() {
 
       {/* Request Mode Banner */}
       {requestId && (
-        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6 flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div className="bg-blue-100 rounded-full p-2">
-              <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-            </div>
-            <div>
-              <p className="font-medium text-blue-800">Adding vehicles to Request #{requestId}</p>
-              <p className="text-sm text-blue-600">Search and select vehicles, then click "Add to Request" button.</p>
+        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
+          <div className="flex items-center justify-between mb-3">
+            <div className="flex items-center gap-3">
+              <div className="bg-blue-100 rounded-full p-2">
+                <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+              <div>
+                <p className="font-medium text-blue-800">
+                  Adding vehicles to Request #{requestId}
+                  {requestInfo?.user_email && (
+                    <span className="ml-2 text-sm font-normal text-blue-600">
+                      ({requestInfo.user_email})
+                    </span>
+                  )}
+                </p>
+              </div>
             </div>
+            <button
+              onClick={() => router.push('/admin/vehicle-requests')}
+              className="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1"
+            >
+              ← Back to Requests
+            </button>
           </div>
-          <button
-            onClick={() => router.push('/admin/vehicle-requests')}
-            className="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1"
-          >
-            ← Back to Requests
-          </button>
+          {requestInfo && (
+            <div className="bg-white/50 rounded-lg p-3 grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
+              {requestInfo.maker_name && (
+                <div>
+                  <span className="text-blue-500">Maker:</span>
+                  <span className="ml-1 font-medium text-blue-800">{requestInfo.maker_name}</span>
+                </div>
+              )}
+              {requestInfo.model_name && (
+                <div>
+                  <span className="text-blue-500">Model:</span>
+                  <span className="ml-1 font-medium text-blue-800">{requestInfo.model_name}</span>
+                </div>
+              )}
+              {requestInfo.grade_name && (
+                <div>
+                  <span className="text-blue-500">Grade:</span>
+                  <span className="ml-1 font-medium text-blue-800">{requestInfo.grade_name}</span>
+                </div>
+              )}
+              {(requestInfo.year_from || requestInfo.year_to) && (
+                <div>
+                  <span className="text-blue-500">Year:</span>
+                  <span className="ml-1 font-medium text-blue-800">
+                    {requestInfo.year_from || '-'} ~ {requestInfo.year_to || '-'}
+                  </span>
+                </div>
+              )}
+              {requestInfo.mileage_max && (
+                <div>
+                  <span className="text-blue-500">Mileage:</span>
+                  <span className="ml-1 font-medium text-blue-800">
+                    ~{Math.round(requestInfo.mileage_max / 10000)}만km
+                  </span>
+                </div>
+              )}
+              {requestInfo.fuel && (
+                <div>
+                  <span className="text-blue-500">Fuel:</span>
+                  <span className="ml-1 font-medium text-blue-800">{requestInfo.fuel}</span>
+                </div>
+              )}
+            </div>
+          )}
         </div>
       )}
 
@@ -2568,6 +2646,16 @@ export default function CarsAdminPage() {
                         {selectedCar.status}
                       </span>
                     </div>
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">Sold Out</span>
+                      <span className={`px-2 py-1 rounded text-xs font-medium ${
+                        selectedCar.soldout
+                          ? 'bg-red-100 text-red-700'
+                          : 'bg-green-100 text-green-700'
+                      }`}>
+                        {selectedCar.soldout ? 'SOLD OUT' : 'Available'}
+                      </span>
+                    </div>
                     <div className="flex justify-between">
                       <span className="text-gray-600">Seize Count</span>
                       <span className={`font-medium ${(selectedCar.seize_count || 0) > 0 ? 'text-red-600' : ''}`}>

frontend/src/app/cars/[id]/page.tsx

@@ -410,6 +410,15 @@ export default function CarDetailPage() {
                   </p>
                 </div>
               )}
+
+              {/* Soldout overlay */}
+              {car.soldout && (
+                <div className="absolute inset-0 flex items-center justify-center bg-black/40">
+                  <span className="bg-red-600 text-white px-6 py-3 rounded-lg font-bold text-2xl transform -rotate-12 shadow-lg">
+                    {language === 'ko' ? '판매완료' : 'SOLD OUT'}
+                  </span>
+                </div>
+              )}
             </div>
 
             {/* Thumbnails */}
@@ -527,9 +536,16 @@ export default function CarDetailPage() {
 
           {/* Details */}
           <div>
-            <h1 className="text-3xl font-bold text-gray-800 mb-2">
-              {translate(car.car_name) || `${translate(car.maker?.name) || ''} ${translate(car.model?.name) || ''}`.trim() || '-'}
-            </h1>
+            <div className="flex items-center gap-3 mb-2">
+              <h1 className="text-3xl font-bold text-gray-800">
+                {translate(car.car_name) || `${translate(car.maker?.name) || ''} ${translate(car.model?.name) || ''}`.trim() || '-'}
+              </h1>
+              {car.soldout && (
+                <span className="px-3 py-1 bg-red-600 text-white text-sm font-bold rounded-full">
+                  {language === 'ko' ? '판매완료' : 'SOLD OUT'}
+                </span>
+              )}
+            </div>
 
             {(() => {
               const price = formatPrice(car.final_price_krw || car.price_krw);