refactor: 매매정보 섹션 순서 정비 (매물설명+매장사진→매출/입지/사유→현장사진)

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

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

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?.listingDescription || store.photos.length > 0) && (
-              {store.sale?.locationHighlight && (
+            <div className="mt-8">
-                <div className="rounded-xl bg-white/70 p-4">
+              <h3 className="font-display text-base font-bold text-ink mb-2">매물 설명</h3>
-                  <p className="text-xs font-medium tracking-widest uppercase text-warm-700">입지 특징</p>
+              {store.sale?.listingDescription ? (
-                  <p className="mt-2 text-sm text-ink whitespace-pre-line">
+                <p className="text-sm leading-relaxed text-ink whitespace-pre-line">
-                    {store.sale.locationHighlight}
+                  {store.sale.listingDescription}
-                  </p>
+                </p>
-                </div>
+              ) : (
+                <p className="text-sm text-ink-muted">설명이 등록되지 않았습니다</p>
               )}
-              {store.sale?.saleReason && (
+
-                <div className="rounded-xl bg-white/70 p-4">
+              {store.photos[0] && (
-                  <p className="text-xs font-medium tracking-widest uppercase text-warm-700">매매 사유</p>
+                <div className="mt-4 overflow-hidden rounded-xl bg-warm-100">
-                  <p className="mt-2 text-sm text-ink whitespace-pre-line">{store.sale.saleReason}</p>
+                  {/* 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 && (
+          {(sales != null || profit != null) && (
-          <section className="mt-8">
+            <div className="mt-8">
-            <h2 className="font-display text-xl font-bold text-ink mb-4">매장 사진</h2>
+              <h3 className="font-display text-base font-bold text-ink mb-3">매출 / 월수익</h3>
-            <div className="grid grid-cols-2 gap-3 md:grid-cols-3">
+              <div className="rounded-xl bg-white/70 p-4">
-              {store.photos.map((photo) => (
+                <div className="grid grid-cols-2 gap-4 md:grid-cols-3">
-                <div
+                  <InfoItem
-                  key={photo.id.toString()}
+                    label="월매출"
-                  className="aspect-square overflow-hidden rounded-xl bg-warm-100"
+                    value={formatKRW(sales != null ? Number(sales) : null)}
-                >
+                  />
-                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <InfoItem
-                  <img
+                    label="월수익"
-                    src={photo.storageKey}
+                    value={formatKRW(profit != null ? Number(profit) : null)}
-                    alt="매장 사진"
+                  />
-                    className="h-full w-full object-cover"
+                  <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">