feat(post): 좋아요/저장/공유 모달 UX + 낙관 토글, admin 로그인 루프 fix

packages/web/app/page.tsx

@@ -235,54 +235,47 @@ export default async function Home({
     spots: any[],
     limit: number
   ): Array<HeroPostEntry["items"][number] & { label: string }> {
-    return spots
-      .flatMap((spot: any) => {
-        const x = parseSpotPercent(spot.position_left);
-        const y = parseSpotPercent(spot.position_top);
-        return (spot.solutions || [])
-          .map((sol: any) => {
-            const imageUrl = solutionImageUrl(sol);
-            if (!imageUrl) return null;
-            return {
-              id: sol.id,
-              label: sol.title,
-              name: sol.title,
-              brand: sol.brand || sol.metadata?.brand || "",
-              imageUrl: proxyImg(imageUrl),
-              x,
-              y,
-            };
-          })
-          .filter(
-            (
-              item: (HeroPostEntry["items"][number] & { label: string }) | null
-            ): item is HeroPostEntry["items"][number] & { label: string } =>
-              item !== null
-          );
-      })
-      .slice(0, limit);
+    type HeroItem = HeroPostEntry["items"][number] & { label: string };
+    const items: HeroItem[] = [];
+    for (const spot of spots) {
+      const x = parseSpotPercent(spot.position_left);
+      const y = parseSpotPercent(spot.position_top);
+      for (const sol of spot.solutions || []) {
+        const imageUrl = solutionImageUrl(sol);
+        if (!imageUrl) continue;
+        items.push({
+          id: sol.id,
+          label: sol.title,
+          name: sol.title,
+          brand: sol.brand || sol.metadata?.brand || "",
+          imageUrl: proxyImg(imageUrl),
+          x,
+          y,
+        });
+      }
+    }
+    return items.slice(0, limit);
   }
 
   function mapMagazineItemsToHeroItems(
     post: ApiPost | undefined,
     limit: number
   ): Array<HeroPostEntry["items"][number] & { label: string }> {
-    return (post?.post_magazine_items ?? [])
-      .flatMap((item, index) =>
-        item.image_url
-          ? [
-              {
-                id: `${post?.id ?? "magazine"}-${index}`,
-                label: item.title,
-                name: item.title,
-                brand: item.brand ?? "",
-                imageUrl: proxyImg(item.image_url),
-                productLink: item.original_url ?? undefined,
-              },
-            ]
-          : []
-      )
-      .slice(0, limit);
+    type HeroItem = HeroPostEntry["items"][number] & { label: string };
+    const items: HeroItem[] = [];
+    const source = post?.post_magazine_items ?? [];
+    source.forEach((item, index) => {
+      if (!item.image_url) return;
+      items.push({
+        id: `${post?.id ?? "magazine"}-${index}`,
+        label: item.title,
+        name: item.title,
+        brand: item.brand ?? "",
+        imageUrl: proxyImg(item.image_url),
+        productLink: item.original_url ?? undefined,
+      });
+    });
+    return items.slice(0, limit);
   }
 
   function getStyleTags(post: ApiPost): string[] | undefined {

packages/web/lib/components/admin/magazines/MagazineStatusFilter.tsx

@@ -13,6 +13,7 @@ interface Props {
 const STATUS_DOT: Record<MagazineStatus, string> = {
   draft: "bg-gray-400",
   pending: "bg-yellow-400",
+  generating: "bg-blue-400",
   published: "bg-emerald-400",
   rejected: "bg-red-400",
 };

packages/web/lib/components/detail/ImageDetailModal.tsx

@@ -391,7 +391,7 @@ export function ImageDetailModal({
         {image && (
           <div
             data-testid="modal-actions-footer"
-            className="absolute bottom-6 left-1/2 z-30 -translate-x-1/2 rounded-full border border-white/10 bg-background/80 px-2 py-1.5 shadow-lg backdrop-blur-xl"
+            className="border-t border-border bg-background/95 backdrop-blur-sm px-4 py-3 pb-[calc(env(safe-area-inset-bottom,0px)+12px)]"
           >
             <SocialActions
               liked={
@@ -414,7 +414,7 @@ export function ImageDetailModal({
             />
           </div>
         )}
-        <div className="absolute top-4 right-4 z-20 flex gap-3">
+        <div className="absolute top-4 right-4 md:top-auto md:right-auto md:bottom-6 md:left-6 z-20 flex gap-3">
           <button
             onClick={handleMaximize}
             className="flex h-11 w-11 items-center justify-center rounded-full bg-black/80 text-white backdrop-blur-sm transition-transform hover:scale-105 hover:bg-black active:scale-95 dark:bg-white/80 dark:text-black dark:hover:bg-white"