feat: 포트원 V2 결제 마이그레이션 + 법적 페이지 추가 (PG 심사용)

- 토스페이먼츠 SDK → 포트원 V2 (@portone/browser-sdk) 전환
- 4채널 결제수단 선택 UI: 카드(KPN)/카카오페이/네이버페이/토스페이
- 서버 결제 검증 API를 포트원 V2 조회 방식으로 변경
- 이용약관(/legal/terms), 개인정보처리방침(/legal/privacy), 환불정책(/legal/refund) 페이지 생성
- 푸터에 법적 페이지 링크 추가

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-07 23:52:22 +09:00
parent 5d2fd4be1f
commit 769544b453
11 changed files with 728 additions and 182 deletions

177
app/legal/privacy/page.tsx Normal file
View File

@@ -0,0 +1,177 @@
import { Metadata } from 'next';
export const metadata: Metadata = {
title: '개인정보처리방침 | 쟁승메이드',
description: '쟁승메이드 개인정보처리방침',
};
export default function PrivacyPage() {
return (
<div className="max-w-3xl mx-auto px-6 py-12">
<h1 className="text-2xl font-extrabold text-[#04102b] mb-8"></h1>
<div className="prose prose-sm prose-slate max-w-none space-y-6 text-slate-600 leading-relaxed">
<p>
( &quot;&quot;) ,
·.
</p>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">1. </h2>
<p> .</p>
<table className="w-full text-sm border border-slate-200 mt-3">
<thead>
<tr className="bg-slate-50">
<th className="border border-slate-200 px-3 py-2 text-left font-semibold"> </th>
<th className="border border-slate-200 px-3 py-2 text-left font-semibold"> </th>
</tr>
</thead>
<tbody>
<tr>
<td className="border border-slate-200 px-3 py-2"></td>
<td className="border border-slate-200 px-3 py-2">, ()</td>
</tr>
<tr>
<td className="border border-slate-200 px-3 py-2"> </td>
<td className="border border-slate-200 px-3 py-2">, , , </td>
</tr>
<tr>
<td className="border border-slate-200 px-3 py-2"> </td>
<td className="border border-slate-200 px-3 py-2"> (PG사를 , )</td>
</tr>
<tr>
<td className="border border-slate-200 px-3 py-2"> </td>
<td className="border border-slate-200 px-3 py-2">, , </td>
</tr>
<tr>
<td className="border border-slate-200 px-3 py-2"> </td>
<td className="border border-slate-200 px-3 py-2"> IP, , , </td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">2. · </h2>
<ul className="list-disc pl-5 space-y-1">
<li> 이행: 문의 , , </li>
<li> 관리: 회원 , , </li>
<li> 개선: 접속 , </li>
<li>·홍보: 신규 , ( )</li>
</ul>
</section>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">3. </h2>
<ul className="list-disc pl-5 space-y-1">
<li> 정보: 회원 ( )</li>
<li> 내역: 문의 3 ()</li>
<li> 기록: 5년 ()</li>
<li> 로그: 3개월 ()</li>
</ul>
</section>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">4. 3 </h2>
<p>
3 .
, .
</p>
<ul className="list-disc pl-5 space-y-1">
<li> </li>
<li> </li>
<li> PG사(, ) </li>
</ul>
</section>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">5. </h2>
<table className="w-full text-sm border border-slate-200 mt-3">
<thead>
<tr className="bg-slate-50">
<th className="border border-slate-200 px-3 py-2 text-left font-semibold"></th>
<th className="border border-slate-200 px-3 py-2 text-left font-semibold"> </th>
</tr>
</thead>
<tbody>
<tr>
<td className="border border-slate-200 px-3 py-2">()</td>
<td className="border border-slate-200 px-3 py-2"> </td>
</tr>
<tr>
<td className="border border-slate-200 px-3 py-2">Supabase Inc.</td>
<td className="border border-slate-200 px-3 py-2"> </td>
</tr>
<tr>
<td className="border border-slate-200 px-3 py-2">Vercel Inc.</td>
<td className="border border-slate-200 px-3 py-2"> </td>
</tr>
<tr>
<td className="border border-slate-200 px-3 py-2">Resend Inc.</td>
<td className="border border-slate-200 px-3 py-2"> </td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">6. </h2>
<ul className="list-disc pl-5 space-y-1">
<li> 절차: 보유 </li>
<li> 방법: 전자적 , </li>
</ul>
</section>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">7. </h2>
<p> .</p>
<ul className="list-disc pl-5 space-y-1">
<li> </li>
<li> · </li>
<li> </li>
<li> ( )</li>
</ul>
<p className="mt-2">
(bgg8988@gmail.com) 10 .
</p>
</section>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">8. (Cookie) </h2>
<p>
Google Analytics를 , .
, .
</p>
</section>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">9. </h2>
<ul className="list-none space-y-0.5">
<li>성명: 박재오</li>
<li>직위: 대표</li>
<li>이메일: bgg8988@gmail.com</li>
<li>전화: 010-3907-1392</li>
</ul>
</section>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">10. </h2>
<p> · .</p>
<ul className="list-disc pl-5 space-y-1">
<li>개인정보분쟁조정위원회: 1833-6972 (kopico.go.kr)</li>
<li>개인정보침해신고센터: 118 (privacy.kisa.or.kr)</li>
<li> 사이버수사과: 1301 (spo.go.kr)</li>
<li> 사이버수사국: 182 (ecrm.cyber.go.kr)</li>
</ul>
</section>
<section className="border-t border-slate-200 pt-6 mt-10">
<p className="text-slate-400 text-xs">
시행일자: 2025년 4 7<br />
상호: 쟁승메이드 · 대표: 박재오 · 사업자등록번호: 267-53-00822
</p>
</section>
</div>
</div>
);
}

148
app/legal/refund/page.tsx Normal file
View File

@@ -0,0 +1,148 @@
import { Metadata } from 'next';
export const metadata: Metadata = {
title: '환불 정책 | 쟁승메이드',
description: '쟁승메이드 환불 및 취소 정책',
};
export default function RefundPage() {
return (
<div className="max-w-3xl mx-auto px-6 py-12">
<h1 className="text-2xl font-extrabold text-[#04102b] mb-8"> </h1>
<div className="prose prose-sm prose-slate max-w-none space-y-6 text-slate-600 leading-relaxed">
<p>
( &quot;&quot;) .
.
</p>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">1. ( )</h2>
<p className="font-medium text-slate-700">대상: 프롬프트 , AI , </p>
<table className="w-full text-sm border border-slate-200 mt-3">
<thead>
<tr className="bg-slate-50">
<th className="border border-slate-200 px-3 py-2 text-left font-semibold"></th>
<th className="border border-slate-200 px-3 py-2 text-left font-semibold"> </th>
</tr>
</thead>
<tbody>
<tr>
<td className="border border-slate-200 px-3 py-2"> / </td>
<td className="border border-slate-200 px-3 py-2 text-emerald-600 font-medium"> </td>
</tr>
<tr>
<td className="border border-slate-200 px-3 py-2">/ 7 </td>
<td className="border border-slate-200 px-3 py-2 text-amber-600 font-medium"> ( )</td>
</tr>
<tr>
<td className="border border-slate-200 px-3 py-2">7 </td>
<td className="border border-slate-200 px-3 py-2 text-slate-400"> </td>
</tr>
</tbody>
</table>
<p className="text-xs text-slate-400 mt-2">
* 17 , .
</p>
</section>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">2. </h2>
<p className="font-medium text-slate-700">대상: AI , , </p>
<table className="w-full text-sm border border-slate-200 mt-3">
<thead>
<tr className="bg-slate-50">
<th className="border border-slate-200 px-3 py-2 text-left font-semibold"></th>
<th className="border border-slate-200 px-3 py-2 text-left font-semibold"> </th>
</tr>
</thead>
<tbody>
<tr>
<td className="border border-slate-200 px-3 py-2"> </td>
<td className="border border-slate-200 px-3 py-2 text-emerald-600 font-medium"> </td>
</tr>
<tr>
<td className="border border-slate-200 px-3 py-2"> 7 </td>
<td className="border border-slate-200 px-3 py-2 text-amber-600 font-medium"> </td>
</tr>
<tr>
<td className="border border-slate-200 px-3 py-2">7 </td>
<td className="border border-slate-200 px-3 py-2 text-slate-400"> , </td>
</tr>
</tbody>
</table>
<p className="text-xs text-slate-400 mt-2">
* (bgg8988@gmail.com) .
, .
</p>
</section>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">3. </h2>
<p className="font-medium text-slate-700">대상: 홈페이지 , , </p>
<table className="w-full text-sm border border-slate-200 mt-3">
<thead>
<tr className="bg-slate-50">
<th className="border border-slate-200 px-3 py-2 text-left font-semibold"></th>
<th className="border border-slate-200 px-3 py-2 text-left font-semibold"> </th>
</tr>
</thead>
<tbody>
<tr>
<td className="border border-slate-200 px-3 py-2"> ( )</td>
<td className="border border-slate-200 px-3 py-2 text-emerald-600 font-medium"> </td>
</tr>
<tr>
<td className="border border-slate-200 px-3 py-2"> </td>
<td className="border border-slate-200 px-3 py-2 text-amber-600 font-medium"> ()</td>
</tr>
<tr>
<td className="border border-slate-200 px-3 py-2"> </td>
<td className="border border-slate-200 px-3 py-2 text-slate-400"> ( )</td>
</tr>
</tbody>
</table>
<p className="text-xs text-slate-400 mt-2">
* 50% / 50% , .
<br />
* 1 1% .
</p>
</section>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">4. </h2>
<div className="bg-slate-50 border border-slate-200 rounded-xl p-4">
<ol className="list-decimal pl-5 space-y-2">
<li>(<strong>bgg8988@gmail.com</strong>)
<ul className="list-disc pl-5 mt-1 text-xs text-slate-500">
<li>: [ ] </li>
<li>본문: 성함, , </li>
</ul>
</li>
<li> <strong> 3 </strong> </li>
<li> ( 3~7 )</li>
</ol>
</div>
</section>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">5. </h2>
<ul className="list-disc pl-5 space-y-1">
<li> / </li>
<li> 7 </li>
<li> </li>
<li> </li>
</ul>
</section>
<section className="border-t border-slate-200 pt-6 mt-10">
<p className="text-slate-400 text-xs">
시행일자: 2025년 4 7<br />
상호: 쟁승메이드 · 대표: 박재오 · 사업자등록번호: 267-53-00822<br />
문의: bgg8988@gmail.com · 010-3907-1392
</p>
</section>
</div>
</div>
);
}

138
app/legal/terms/page.tsx Normal file
View File

@@ -0,0 +1,138 @@
import { Metadata } from 'next';
export const metadata: Metadata = {
title: '이용약관 | 쟁승메이드',
description: '쟁승메이드 서비스 이용약관',
};
export default function TermsPage() {
return (
<div className="max-w-3xl mx-auto px-6 py-12">
<h1 className="text-2xl font-extrabold text-[#04102b] mb-8"></h1>
<div className="prose prose-sm prose-slate max-w-none space-y-6 text-slate-600 leading-relaxed">
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">1 ()</h2>
<p>
( &quot;&quot;) (jaengseung-made.com)
( &quot;&quot;) , ·
.
</p>
</section>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">2 ()</h2>
<ol className="list-decimal pl-5 space-y-1">
<li>&quot;&quot; , AI , , , .</li>
<li>&quot;&quot; .</li>
<li>&quot;&quot; , .</li>
</ol>
</section>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">3 ( )</h2>
<ol className="list-decimal pl-5 space-y-1">
<li> .</li>
<li> , 7 .</li>
</ol>
</section>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">4 ( )</h2>
<ol className="list-decimal pl-5 space-y-1">
<li> .
<ul className="list-disc pl-5 mt-1 space-y-0.5">
<li> </li>
<li> </li>
<li> </li>
<li>AI </li>
<li>AI </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</li>
<li> .</li>
</ol>
</section>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">5 ( )</h2>
<p>
·, ,
. .
</p>
</section>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">6 ()</h2>
<ol className="list-decimal pl-5 space-y-1">
<li> .</li>
<li> . , .
<ul className="list-disc pl-5 mt-1 space-y-0.5">
<li> </li>
<li> </li>
<li> </li>
</ul>
</li>
</ol>
</section>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">7 ( )</h2>
<ol className="list-decimal pl-5 space-y-1">
<li> .</li>
<li> , (, , ) .</li>
<li> .</li>
</ol>
</section>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">8 ( )</h2>
<ol className="list-decimal pl-5 space-y-1">
<li> , , .</li>
<li> .
<ul className="list-disc pl-5 mt-1 space-y-0.5">
<li> </li>
<li> , </li>
<li> 3 </li>
<li> </li>
</ul>
</li>
</ol>
</section>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">9 ( )</h2>
<ol className="list-decimal pl-5 space-y-1">
<li> .</li>
<li> .</li>
</ol>
</section>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">10 ()</h2>
<ol className="list-decimal pl-5 space-y-1">
<li> .</li>
<li>AI ( , ) , .</li>
<li> .</li>
</ol>
</section>
<section>
<h2 className="text-lg font-bold text-slate-800 mt-8 mb-3">11 ( )</h2>
<p>
, .
</p>
</section>
<section className="border-t border-slate-200 pt-6 mt-10">
<p className="text-slate-400 text-xs">
시행일자: 2025년 4 7<br />
상호: 쟁승메이드 · 대표: 박재오 · 사업자등록번호: 267-53-00822
</p>
</section>
</div>
</div>
);
}