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/Skeleton.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+/** Pulsing skeleton block */
+function Block({ className = "" }: { className?: string }) {
+  return <div className={`animate-pulse bg-gray-200 rounded ${className}`} />;
+}
+
+/** Skeleton for a single restaurant list item */
+export function RestaurantCardSkeleton() {
+  return (
+    <div className="px-4 py-3 space-y-2">
+      <Block className="h-4 w-3/5" />
+      <div className="flex gap-2">
+        <Block className="h-3 w-16" />
+        <Block className="h-3 w-20" />
+        <Block className="h-3 w-14" />
+      </div>
+      <div className="flex gap-1">
+        <Block className="h-4 w-14 rounded-sm" />
+      </div>
+    </div>
+  );
+}
+
+/** Skeleton for the restaurant list (multiple cards) */
+export function RestaurantListSkeleton({ count = 8 }: { count?: number }) {
+  return (
+    <div className="divide-y divide-gray-100">
+      {Array.from({ length: count }, (_, i) => (
+        <RestaurantCardSkeleton key={i} />
+      ))}
+    </div>
+  );
+}
+
+/** Skeleton for restaurant detail view */
+export function RestaurantDetailSkeleton() {
+  return (
+    <div className="p-4 space-y-4 animate-pulse">
+      {/* Title + close */}
+      <div className="flex justify-between items-start">
+        <Block className="h-6 w-40" />
+        <Block className="h-6 w-6 rounded" />
+      </div>
+
+      {/* Rating */}
+      <div className="flex items-center gap-2">
+        <Block className="h-4 w-24" />
+        <Block className="h-4 w-8" />
+      </div>
+
+      {/* Info lines */}
+      <div className="space-y-2">
+        <Block className="h-4 w-48" />
+        <Block className="h-4 w-64" />
+        <Block className="h-4 w-36" />
+        <Block className="h-4 w-28" />
+      </div>
+
+      {/* Videos section */}
+      <div className="space-y-3">
+        <Block className="h-4 w-20" />
+        {[1, 2].map((i) => (
+          <div key={i} className="border rounded-lg p-3 space-y-2">
+            <div className="flex items-center gap-2">
+              <Block className="h-4 w-16 rounded-sm" />
+              <Block className="h-3 w-20" />
+            </div>
+            <Block className="h-4 w-full" />
+            <div className="flex gap-1">
+              <Block className="h-5 w-14 rounded" />
+              <Block className="h-5 w-16 rounded" />
+            </div>
+            <Block className="h-3 w-3/4" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}