fix: Show skeleton instead of sample images during banner loading

Sample car images (Tesla, Sportage etc.) now only appear as fallback
when the API fails to respond within 3 seconds. During normal loading,
a pulse-animated skeleton is shown instead.

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

frontend/src/app/page.tsx

@@ -12,8 +12,18 @@ export default function Home() {
   const { t, language } = useTranslation();
   const [banners, setBanners] = useState<HeroBanner[]>([]);
   const [bannerSettings, setBannerSettings] = useState<HeroBannerSettings | undefined>();
+  const [bannerLoaded, setBannerLoaded] = useState(false);
+  const [showFallback, setShowFallback] = useState(false);
 
   useEffect(() => {
+    setBannerLoaded(false);
+    setShowFallback(false);
+
+    // 3초 후에도 로딩 안 되면 샘플 배너 표시
+    const fallbackTimer = setTimeout(() => {
+      setShowFallback(true);
+    }, 3000);
+
     const loadBanners = async () => {
       try {
         const [bannersData, settingsData] = await Promise.all([
@@ -24,10 +34,15 @@ export default function Home() {
         setBannerSettings(settingsData);
       } catch (error) {
         console.error('Failed to load banners:', error);
-        // 에러 시 샘플 배너 사용 (FilmStripSlider 내부에서 처리)
+        setShowFallback(true);
+      } finally {
+        setBannerLoaded(true);
+        clearTimeout(fallbackTimer);
       }
     };
     loadBanners();
+
+    return () => clearTimeout(fallbackTimer);
   }, [language]);
 
   return (
@@ -44,7 +59,11 @@ export default function Home() {
         </div>
 
         {/* Film Strip Slider */}
-        <FilmStripSlider banners={banners} settings={bannerSettings} />
+        <FilmStripSlider
+          banners={banners}
+          settings={bannerSettings}
+          loading={!bannerLoaded && !showFallback}
+        />
 
         <div className="container mx-auto px-4 py-4 sm:py-8">
           <div className="flex flex-col lg:flex-row items-center gap-4 lg:gap-6">