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/app/page.tsx

@@ -132,7 +132,7 @@ export default function Home() {
   const { user, login, logout, isLoading: authLoading } = useAuth();
   const [restaurants, setRestaurants] = useState<Restaurant[]>([]);
   const [selected, setSelected] = useState<Restaurant | null>(null);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [showDetail, setShowDetail] = useState(false);
   const [channels, setChannels] = useState<Channel[]>([]);
   const [channelFilter, setChannelFilter] = useState("");
@@ -199,10 +199,12 @@ export default function Home() {
 
   // Load restaurants on mount and when channel filter changes
   useEffect(() => {
+    setLoading(true);
     api
       .getRestaurants({ limit: 500, channel: channelFilter || undefined })
       .then(setRestaurants)
-      .catch(console.error);
+      .catch(console.error)
+      .finally(() => setLoading(false));
   }, [channelFilter]);
 
   // Auto-select region from user's geolocation (once)
@@ -388,6 +390,7 @@ export default function Home() {
       restaurants={filteredRestaurants}
       selectedId={selected?.id}
       onSelect={handleSelectRestaurant}
+      loading={loading}
     />
   );
 
@@ -410,6 +413,7 @@ export default function Home() {
       restaurants={filteredRestaurants}
       selectedId={selected?.id}
       onSelect={handleSelectRestaurant}
+      loading={loading}
     />
   );