Add skeleton loading UI for better perceived performance

Replace "로딩 중..." text with animated skeleton placeholders in
RestaurantList, RestaurantDetail, and ReviewSection components.

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

frontend/src/components/RestaurantDetail.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { api, getToken } from "@/lib/api";
 import type { Restaurant, VideoLink } from "@/lib/api";
 import ReviewSection from "@/components/ReviewSection";
+import { RestaurantDetailSkeleton } from "@/components/Skeleton";
 
 interface RestaurantDetailProps {
   restaurant: Restaurant;
@@ -137,7 +138,21 @@ export default function RestaurantDetail({
       <div>
         <h3 className="font-semibold text-sm mb-2">관련 영상</h3>
         {loading ? (
-          <p className="text-sm text-gray-500">로딩 중...</p>
+          <div className="space-y-3 animate-pulse">
+            {[1, 2].map((i) => (
+              <div key={i} className="border rounded-lg p-3 space-y-2">
+                <div className="flex items-center gap-2">
+                  <div className="h-4 w-16 bg-gray-200 rounded-sm" />
+                  <div className="h-3 w-20 bg-gray-200 rounded" />
+                </div>
+                <div className="h-4 w-full bg-gray-200 rounded" />
+                <div className="flex gap-1">
+                  <div className="h-5 w-14 bg-gray-200 rounded" />
+                  <div className="h-5 w-16 bg-gray-200 rounded" />
+                </div>
+              </div>
+            ))}
+          </div>
         ) : videos.length === 0 ? (
           <p className="text-sm text-gray-500">관련 영상이 없습니다</p>
         ) : (