From a25b6459332b292defcffa2146b539b3820a6fe8 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Thu, 11 Jun 2026 03:04:06 +0900
Subject: [PATCH] =?UTF-8?q?fix(renewal):=20mypage=20=EC=88=A8=EA=B9=80=20?=
 =?UTF-8?q?=EB=A7=81=ED=81=AC=20=EA=B5=90=EC=B2=B4=20+=20/products=20?=
 =?UTF-8?q?=EC=8A=A4=ED=85=81=20+=20sitemap=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/mypage/page.tsx   |   6 +-
 app/products/page.tsx | 163 ++++++++++++++++++++++++++++++++++++++++++
 app/sitemap.ts        |   5 +-
 3 files changed, 168 insertions(+), 6 deletions(-)
 create mode 100644 app/products/page.tsx

diff --git a/app/mypage/page.tsx b/app/mypage/page.tsx
index cc0d12a..fe86b02 100644
--- a/app/mypage/page.tsx
+++ b/app/mypage/page.tsx
@@ -457,9 +457,9 @@ function MyPageContent() {
             <Card>
               <CardTitle>빠른 메뉴</CardTitle>
               <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-3">
-                <QuickLink href="/outsourcing#contact" title="외주 의뢰" sub="프로젝트 문의" />
-                <QuickLink href="/music/packs" title="음악 팩" sub="제품 둘러보기" />
-                <QuickLink href="/music/studio" title="AI 스튜디오" sub="새 트랙 만들기" />
+                <QuickLink href="/outsourcing#contact" title="외주 문의" sub="프로젝트 문의" />
+                <QuickLink href="/products" title="소프트웨어 보기" sub="완성 소프트웨어 목록" />
+                <QuickLink href="/outsourcing#contact" title="외주 의뢰" sub="맞춤 개발 문의" />
               </div>
             </Card>
           </div>
diff --git a/app/products/page.tsx b/app/products/page.tsx
new file mode 100644
index 0000000..2c0862e
--- /dev/null
+++ b/app/products/page.tsx
@@ -0,0 +1,163 @@
+import Link from 'next/link';
+import type { Metadata } from 'next';
+
+// TODO(Phase 2): products 테이블 연동 후 동적 카탈로그로 교체 예정.
+// 현재는 404 방지용 정적 스텁 페이지입니다.
+
+export const metadata: Metadata = {
+  title: '완성 소프트웨어',
+  description:
+    '쟁승메이드가 직접 운영하며 검증한 완성 소프트웨어 목록. 계좌이체 결제 후 입금 확인 즉시 마이페이지에서 다운로드할 수 있습니다.',
+};
+
+const KOR_TIGHT = { letterSpacing: '-0.02em' } as const;
+const KOR_BODY = { letterSpacing: '-0.01em' } as const;
+
+const HOW = [
+  { n: '01', t: '계좌이체 결제', d: '안내된 계좌로 입금합니다. 이체 확인 후 수동으로 승인합니다.' },
+  { n: '02', t: '입금 확인', d: '입금이 확인되면 메일로 안내해 드립니다. 보통 당일 처리됩니다.' },
+  { n: '03', t: '마이페이지 다운로드', d: '마이페이지에서 구매 내역을 확인하고 파일을 내려받습니다.' },
+];
+
+export default function ProductsPage() {
+  return (
+    <>
+      {/* ─── Hero ─── */}
+      <section className="border-b" style={{ borderColor: 'var(--jsm-line)' }}>
+        <div className="max-w-5xl mx-auto px-6 lg:px-8 py-20 lg:py-28">
+          <div className="max-w-2xl">
+            <span
+              className="inline-block text-xs font-semibold mb-6 px-2.5 py-1 rounded"
+              style={{
+                color: 'var(--jsm-accent)',
+                background: 'var(--jsm-accent-soft)',
+                ...KOR_BODY,
+              }}
+            >
+              완성 소프트웨어
+            </span>
+            <h1
+              className="text-3xl sm:text-4xl lg:text-5xl font-bold leading-[1.2] break-keep mb-5"
+              style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
+            >
+              직접 운영하며 검증한
+              <br />
+              도구들을 준비하고 있습니다.
+            </h1>
+            <p
+              className="text-base sm:text-lg leading-relaxed break-keep"
+              style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}
+            >
+              입금 확인 후 바로 다운로드할 수 있는 형태로 제공됩니다.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* ─── 출시 준비 중 안내 ─── */}
+      <section className="border-b" style={{ borderColor: 'var(--jsm-line)' }}>
+        <div className="max-w-5xl mx-auto px-6 lg:px-8 py-16 lg:py-20">
+          <div
+            className="rounded-lg border p-8 text-center"
+            style={{
+              background: 'var(--jsm-surface-alt)',
+              borderColor: 'var(--jsm-line)',
+            }}
+          >
+            <p
+              className="text-sm font-semibold mb-3"
+              style={{ color: 'var(--jsm-accent)', ...KOR_BODY }}
+            >
+              출시 준비 중
+            </p>
+            <p
+              className="text-xl sm:text-2xl font-bold mb-4 break-keep"
+              style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
+            >
+              현재 상품을 정비하고 있습니다.
+            </p>
+            <p
+              className="text-sm sm:text-base leading-relaxed break-keep max-w-md mx-auto"
+              style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}
+            >
+              로또 분석 도구, 주식 자동매매 유틸리티 등 실제로 운영 중인 도구들을
+              구매 가능한 형태로 순차 공개할 예정입니다.
+              출시 소식을 먼저 받고 싶다면 아래 링크로 문의해 주세요.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* ─── 구매 방식 안내 ─── */}
+      <section style={{ background: 'var(--jsm-surface-alt)' }}>
+        <div className="max-w-5xl mx-auto px-6 lg:px-8 py-16 lg:py-20">
+          <h2
+            className="text-xl sm:text-2xl font-bold mb-10 break-keep"
+            style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
+          >
+            구매 방식
+          </h2>
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
+            {HOW.map((step) => (
+              <div
+                key={step.n}
+                className="rounded-lg border p-6"
+                style={{ background: 'var(--jsm-surface)', borderColor: 'var(--jsm-line)' }}
+              >
+                <span
+                  className="text-xs font-semibold mb-3 block"
+                  style={{ color: 'var(--jsm-accent)', ...KOR_BODY }}
+                >
+                  {step.n}
+                </span>
+                <p
+                  className="font-bold mb-2 break-keep"
+                  style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
+                >
+                  {step.t}
+                </p>
+                <p
+                  className="text-sm leading-relaxed break-keep"
+                  style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}
+                >
+                  {step.d}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ─── CTA ─── */}
+      <section className="border-t" style={{ borderColor: 'var(--jsm-line)' }}>
+        <div className="max-w-5xl mx-auto px-6 lg:px-8 py-16 lg:py-20">
+          <div className="flex flex-col sm:flex-row gap-4">
+            <Link
+              href="/outsourcing#contact"
+              className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg text-sm font-semibold transition-colors"
+              style={{
+                background: 'var(--jsm-accent)',
+                color: '#ffffff',
+                ...KOR_BODY,
+              }}
+            >
+              출시 소식 받기
+            </Link>
+            <Link
+              href="/outsourcing"
+              className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg border text-sm font-semibold transition-colors"
+              style={{
+                borderColor: 'var(--jsm-line)',
+                color: 'var(--jsm-ink-soft)',
+                background: 'var(--jsm-surface)',
+                ...KOR_BODY,
+              }}
+            >
+              외주 개발 알아보기
+            </Link>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/app/sitemap.ts b/app/sitemap.ts
index e40a7ac..4bb5404 100644
--- a/app/sitemap.ts
+++ b/app/sitemap.ts
@@ -6,9 +6,8 @@ export default function sitemap(): MetadataRoute.Sitemap {
 
   return [
     { url: base, lastModified: now, changeFrequency: 'weekly', priority: 1.0 },
-    { url: `${base}/packages`, lastModified: now, changeFrequency: 'weekly', priority: 0.9 },
-    { url: `${base}/services/music`, lastModified: now, changeFrequency: 'weekly', priority: 0.95 },
-    { url: `${base}/saju`, lastModified: now, changeFrequency: 'monthly', priority: 0.7 },
+    { url: `${base}/outsourcing`, lastModified: now, changeFrequency: 'weekly', priority: 0.9 },
+    { url: `${base}/products`, lastModified: now, changeFrequency: 'weekly', priority: 0.8 },
     { url: `${base}/legal/terms`, lastModified: now, changeFrequency: 'yearly', priority: 0.3 },
     { url: `${base}/legal/refund`, lastModified: now, changeFrequency: 'yearly', priority: 0.3 },
     { url: `${base}/legal/privacy`, lastModified: now, changeFrequency: 'yearly', priority: 0.3 },