From 0c4742e5d9721c5588eac9f01c3f95b9e91c8fea Mon Sep 17 00:00:00 2001
From: seizeh <d57cd64frp@privaterelay.appleid.com>
Date: Wed, 22 Jul 2026 21:02:08 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B3=B5=EC=9C=A0=20=EB=B7=B0=EC=96=B4?=
 =?UTF-8?q?=20=ED=9B=84=EA=B8=B0=20=EC=82=AC=EC=A7=84=20=EC=A3=BC=EC=9D=B8?=
 =?UTF-8?q?=EA=B3=B5=20=EB=B0=B0=EC=B9=98=20=E2=80=94=201=EC=9E=A5=20?=
 =?UTF-8?q?=ED=92=80=ED=8F=AD(16:10)=C2=B72=EC=9E=A5=20=EB=B0=98=EB=B0=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

72px 썸네일이 너무 작다는 실기기 피드백: 사진을 별점 아래·본문 위로
올리고 1장은 카드 폭 전체(16:10, max 260px), 2장은 정방형 반반 그리드.
v6 배포·도메인 렌더 검증 완료.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 supabase/functions/share-view/index.ts | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/supabase/functions/share-view/index.ts b/supabase/functions/share-view/index.ts
index b0fffaf..611b576 100644
--- a/supabase/functions/share-view/index.ts
+++ b/supabase/functions/share-view/index.ts
@@ -112,8 +112,13 @@ function page(title: string, ogDesc: string, inner: string): string {
             border-radius:100px; padding:2px 8px; margin-left:8px; vertical-align:1px; }
   .review p { font-size:14px; line-height:1.6; margin-top:6px; color:var(--text);
               word-break:break-all; }
-  .rphotos { display:flex; gap:6px; margin-top:10px; }
-  .rphotos img { width:72px; height:72px; object-fit:cover; border-radius:10px; }
+  /* 후기 사진 — 주인공 배치: 1장은 카드 폭 전체(16:10), 2장은 반반 정방형 */
+  .rphotos { display:grid; gap:6px; margin:10px 0 2px; }
+  .rphotos.one { grid-template-columns:1fr; }
+  .rphotos.one img { width:100%; aspect-ratio:16/10; max-height:260px;
+                     object-fit:cover; border-radius:12px; }
+  .rphotos.two { grid-template-columns:1fr 1fr; }
+  .rphotos.two img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; }
 
   /* 더 보기 줄 — 숨긴 콘텐츠가 있음을 정직하게 + 앱 전환 유인 */
   .more { display:block; text-align:center; font-size:13.5px; font-weight:700;
@@ -239,17 +244,20 @@ Deno.serve(async (req) => {
   const reviewHtml = reviews.length === 0
     ? `<div class="card"><p style="font-size:14px;color:var(--text2)">아직 후기가 없어요. 첫 후기의 주인공이 되어 주세요!</p></div>`
     : reviews.map((r) => {
-      // 후기 사진 썸네일(최대 2장, 서버에서 제한) — 사진 후기가 가장 설득력 있다.
-      const photos = (r.photo_urls ?? [])
-        .map((u) => `<img src="${esc(String(u))}" alt="" loading="lazy">`)
-        .join("");
+      // 후기 사진(최대 2장, 서버에서 제한) — 주인공 배치: 별점 아래·본문 위에 크게.
+      const urls = r.photo_urls ?? [];
+      const photos = urls.length === 0 ? "" : `<div class="rphotos ${
+        urls.length === 1 ? "one" : "two"
+      }">${
+        urls.map((u) => `<img src="${esc(String(u))}" alt="" loading="lazy">`).join("")
+      }</div>`;
       return `
       <div class="card review">
         <span class="stars">${starBar(Number(r.rating))}</span>${
         r.has_incentive ? '<span class="incent">업체 혜택 받고 작성</span>' : ""
       }
+        ${photos}
         <p>${esc(String(r.content ?? "")).slice(0, 400)}</p>
-        ${photos ? `<div class="rphotos">${photos}</div>` : ""}
       </div>`;
     }).join("");