From 1c5f75b5b261a8224ca5fda0c85717061db8345b Mon Sep 17 00:00:00 2001
From: chpark <chpark@wace.me>
Date: Fri, 17 Apr 2026 11:19:02 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EB=A7=A4=EB=A7=A4=EC=A0=95?=
 =?UTF-8?q?=EB=B3=B4=20=EC=84=B9=EC=85=98=20=EC=88=9C=EC=84=9C=20=EC=A0=95?=
 =?UTF-8?q?=EB=B9=84=20(=EB=A7=A4=EB=AC=BC=EC=84=A4=EB=AA=85+=EB=A7=A4?=
 =?UTF-8?q?=EC=9E=A5=EC=82=AC=EC=A7=84=E2=86=92=EB=A7=A4=EC=B6=9C/?=
 =?UTF-8?q?=EC=9E=85=EC=A7=80/=EC=82=AC=EC=9C=A0=E2=86=92=ED=98=84?=
 =?UTF-8?q?=EC=9E=A5=EC=82=AC=EC=A7=84)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

요구사항 12·13: 매매정보 안에 매물설명과 매장사진을 함께 묶고,
매물설명 아래에 매출/월수익·입지특징·매매사유·현장사진이 순서대로 나오도록 재구성.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/web/src/app/stores/[id]/page.tsx | 123 ++++++++++++++++++--------
 1 file changed, 85 insertions(+), 38 deletions(-)

diff --git a/apps/web/src/app/stores/[id]/page.tsx b/apps/web/src/app/stores/[id]/page.tsx
index 38b0839..a9adece 100644
--- a/apps/web/src/app/stores/[id]/page.tsx
+++ b/apps/web/src/app/stores/[id]/page.tsx
@@ -148,12 +148,7 @@ export default async function StoreDetailPage({ params }: { params: Promise<{ id
         <section className="mt-8 rounded-2xl border border-warm-300/40 bg-warm-50/70 p-6">
           <h2 className="font-display text-xl font-bold text-ink mb-4">매매 정보</h2>
 
-          {store.sale?.listingDescription && (
-            <p className="mb-4 text-sm leading-relaxed text-ink whitespace-pre-line">
-              {store.sale.listingDescription}
-            </p>
-          )}
-
+          {/* 핵심 지표 (첫번째 캡쳐) */}
           <div className="grid grid-cols-2 gap-4 md:grid-cols-3">
             <BigInfoItem label="권리금" value={formatKRW(premium != null ? Number(premium) : null)} accent />
             <BigInfoItem label="창업비용" value={formatKRW(startup != null ? Number(startup) : null)} />
@@ -175,47 +170,99 @@ export default async function StoreDetailPage({ params }: { params: Promise<{ id
             />
           </div>
 
-          {(store.sale?.locationHighlight || store.sale?.saleReason) && (
-            <div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2">
-              {store.sale?.locationHighlight && (
-                <div className="rounded-xl bg-white/70 p-4">
-                  <p className="text-xs font-medium tracking-widest uppercase text-warm-700">입지 특징</p>
-                  <p className="mt-2 text-sm text-ink whitespace-pre-line">
-                    {store.sale.locationHighlight}
-                  </p>
-                </div>
+          {/* 매물설명 + 매장사진 (두번째 캡쳐) */}
+          {(store.sale?.listingDescription || store.photos.length > 0) && (
+            <div className="mt-8">
+              <h3 className="font-display text-base font-bold text-ink mb-2">매물 설명</h3>
+              {store.sale?.listingDescription ? (
+                <p className="text-sm leading-relaxed text-ink whitespace-pre-line">
+                  {store.sale.listingDescription}
+                </p>
+              ) : (
+                <p className="text-sm text-ink-muted">설명이 등록되지 않았습니다</p>
               )}
-              {store.sale?.saleReason && (
-                <div className="rounded-xl bg-white/70 p-4">
-                  <p className="text-xs font-medium tracking-widest uppercase text-warm-700">매매 사유</p>
-                  <p className="mt-2 text-sm text-ink whitespace-pre-line">{store.sale.saleReason}</p>
+
+              {store.photos[0] && (
+                <div className="mt-4 overflow-hidden rounded-xl bg-warm-100">
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img
+                    src={store.photos[0].storageKey}
+                    alt="매장 대표 사진"
+                    className="aspect-[16/10] w-full object-cover"
+                  />
                 </div>
               )}
             </div>
           )}
-        </section>
 
-        {/* 매장 사진 */}
-        {store.photos.length > 0 && (
-          <section className="mt-8">
-            <h2 className="font-display text-xl font-bold text-ink mb-4">매장 사진</h2>
-            <div className="grid grid-cols-2 gap-3 md:grid-cols-3">
-              {store.photos.map((photo) => (
-                <div
-                  key={photo.id.toString()}
-                  className="aspect-square overflow-hidden rounded-xl bg-warm-100"
-                >
-                  {/* eslint-disable-next-line @next/next/no-img-element */}
-                  <img
-                    src={photo.storageKey}
-                    alt="매장 사진"
-                    className="h-full w-full object-cover"
+          {/* 매출/월수익 */}
+          {(sales != null || profit != null) && (
+            <div className="mt-8">
+              <h3 className="font-display text-base font-bold text-ink mb-3">매출 / 월수익</h3>
+              <div className="rounded-xl bg-white/70 p-4">
+                <div className="grid grid-cols-2 gap-4 md:grid-cols-3">
+                  <InfoItem
+                    label="월매출"
+                    value={formatKRW(sales != null ? Number(sales) : null)}
+                  />
+                  <InfoItem
+                    label="월수익"
+                    value={formatKRW(profit != null ? Number(profit) : null)}
+                  />
+                  <InfoItem
+                    label="월수익률"
+                    value={formatMargin(
+                      sales != null ? Number(sales) : undefined,
+                      profit != null ? Number(profit) : undefined,
+                    )}
                   />
                 </div>
-              ))}
+              </div>
             </div>
-          </section>
-        )}
+          )}
+
+          {/* 입지특징 */}
+          {store.sale?.locationHighlight && (
+            <div className="mt-6">
+              <h3 className="font-display text-base font-bold text-ink mb-2">입지 특징</h3>
+              <p className="rounded-xl bg-white/70 p-4 text-sm text-ink whitespace-pre-line">
+                {store.sale.locationHighlight}
+              </p>
+            </div>
+          )}
+
+          {/* 매매사유 */}
+          {store.sale?.saleReason && (
+            <div className="mt-6">
+              <h3 className="font-display text-base font-bold text-ink mb-2">매매 사유</h3>
+              <p className="rounded-xl bg-white/70 p-4 text-sm text-ink whitespace-pre-line">
+                {store.sale.saleReason}
+              </p>
+            </div>
+          )}
+
+          {/* 현장사진 (대표 사진 제외한 나머지) */}
+          {store.photos.length > 1 && (
+            <div className="mt-8">
+              <h3 className="font-display text-base font-bold text-ink mb-3">현장 사진</h3>
+              <div className="grid grid-cols-3 gap-2 md:grid-cols-4">
+                {store.photos.slice(1).map((photo) => (
+                  <div
+                    key={photo.id.toString()}
+                    className="aspect-square overflow-hidden rounded-lg bg-warm-100"
+                  >
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                      src={photo.storageKey}
+                      alt="현장 사진"
+                      className="h-full w-full object-cover"
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </section>
 
         {/* 임대 정보 */}
         <section className="mt-8">