190 lines
8.8 KiB
TypeScript
190 lines
8.8 KiB
TypeScript
|
// app/privacy/page.tsx
|
||
|
|
import type { Metadata } from "next";
|
||
|
|
|
||
|
|
export const metadata: Metadata = {
|
||
|
|
title: "개인정보 처리방침 | Talkbaram",
|
||
|
|
description: "Talkbaram의 개인정보 처리방침",
|
||
|
|
};
|
||
|
|
|
||
|
|
const sections = [
|
||
|
|
{ id: "intro", title: "1. 총칙" },
|
||
|
|
{ id: "collect", title: "2. 수집하는 개인정보 항목과 방법" },
|
||
|
|
{ id: "use", title: "3. 개인정보의 이용 목적" },
|
||
|
|
{ id: "retention", title: "4. 보유 및 이용기간" },
|
||
|
|
{ id: "third", title: "5. 제3자 제공 및 처리위탁" },
|
||
|
|
{ id: "rights", title: "6. 이용자 및 법정대리인의 권리" },
|
||
|
|
{ id: "security", title: "7. 안전성 확보조치" },
|
||
|
|
{ id: "overseas", title: "8. 국외 이전(해당 시)" },
|
||
|
|
{ id: "contact", title: "9. 문의처" },
|
||
|
|
{ id: "update", title: "10. 고지의 의무" },
|
||
|
|
];
|
||
|
|
|
||
|
|
export default function PrivacyPage() {
|
||
|
|
return (
|
||
|
|
<main className="h-screen bg-white overflow-y-auto">
|
||
|
|
<section className="mx-auto max-w-3xl px-4 py-12">
|
||
|
|
{/* Header */}
|
||
|
|
<header className="mb-8 rounded-2xl border bg-gray-50 p-6 shadow-sm">
|
||
|
|
<h1 className="text-2xl font-bold tracking-tight">개인정보 처리방침</h1>
|
||
|
|
<p className="mt-2 text-sm text-gray-600">
|
||
|
|
everflow(이하 “회사”)은 이용자의 개인정보를 소중히 여기며 관련 법령을 준수합니다.
|
||
|
|
</p>
|
||
|
|
<div className="mt-3 inline-flex items-center gap-2 rounded-xl bg-white px-3 py-1.5 text-xs text-gray-500 ring-1 ring-gray-200">
|
||
|
|
<span>시행일</span>
|
||
|
|
<span className="font-medium">2025-08-01</span>
|
||
|
|
<span className="mx-1">•</span>
|
||
|
|
<span>최종 업데이트</span>
|
||
|
|
<span className="font-medium">2025-08-20</span>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
{/* TOC */}
|
||
|
|
<nav className="mb-10 grid gap-2 rounded-2xl border p-4 text-sm shadow-sm">
|
||
|
|
<span className="mb-1 font-semibold text-gray-700">목차</span>
|
||
|
|
<ul className="grid grid-cols-1 gap-1 sm:grid-cols-2">
|
||
|
|
{sections.map((s) => (
|
||
|
|
<li key={s.id}>
|
||
|
|
<a
|
||
|
|
href={`#${s.id}`}
|
||
|
|
className="inline-block rounded-lg px-2 py-1 hover:bg-gray-50 hover:text-gray-900 text-gray-600"
|
||
|
|
>
|
||
|
|
{s.title}
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
{/* Body */}
|
||
|
|
<article className="space-y-10">
|
||
|
|
<section id="intro" className="scroll-mt-24">
|
||
|
|
<h2 className="text-xl font-semibold">{sections[0].title}</h2>
|
||
|
|
<p className="mt-3 leading-7 text-gray-700">
|
||
|
|
본 처리방침은 서비스 제공과정에서 처리되는 개인정보의 수집·이용·보관·파기 등 전반을 설명합니다.
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="collect" className="scroll-mt-24">
|
||
|
|
<h2 className="text-xl font-semibold">{sections[1].title}</h2>
|
||
|
|
<div className="mt-3 grid gap-4">
|
||
|
|
<div className="rounded-xl border p-4">
|
||
|
|
<h3 className="font-medium">수집 항목(필수)</h3>
|
||
|
|
<ul className="mt-2 list-disc pl-5 text-gray-700">
|
||
|
|
<li>계정: 이메일, 비밀번호(또는 OAuth 식별자)</li>
|
||
|
|
<li>서비스 이용기록: 접속 일시, IP, 기기/브라우저 정보</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div className="rounded-xl border p-4">
|
||
|
|
<h3 className="font-medium">수집 항목(선택)</h3>
|
||
|
|
<ul className="mt-2 list-disc pl-5 text-gray-700">
|
||
|
|
<li>프로필: 이름, 프로필 이미지, 연락처</li>
|
||
|
|
<li>마케팅 수신 동의 여부</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div className="rounded-xl border p-4">
|
||
|
|
<h3 className="font-medium">수집 방법</h3>
|
||
|
|
<p className="mt-2 text-gray-700">
|
||
|
|
회원가입, 서비스 이용 중 생성, 고객문의 처리, 제휴를 통한 수집(사전 동의 기반) 등
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="use" className="scroll-mt-24">
|
||
|
|
<h2 className="text-xl font-semibold">{sections[2].title}</h2>
|
||
|
|
<ul className="mt-3 list-disc pl-5 text-gray-700 leading-7">
|
||
|
|
<li>서비스 제공 및 유지·관리</li>
|
||
|
|
<li>고객문의 응대, 공지사항 전달</li>
|
||
|
|
<li>보안, 부정사용 방지, 서비스 품질 개선 및 통계</li>
|
||
|
|
<li>이벤트/마케팅 안내(별도 동의 시)</li>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="retention" className="scroll-mt-24">
|
||
|
|
<h2 className="text-xl font-semibold">{sections[3].title}</h2>
|
||
|
|
<p className="mt-3 text-gray-700">
|
||
|
|
원칙적으로 목적 달성 시 즉시 파기합니다. 단, 관계 법령에 따라 아래 기간 보관할 수 있습니다.
|
||
|
|
</p>
|
||
|
|
<ul className="mt-2 list-disc pl-5 text-gray-700">
|
||
|
|
<li>계약/청약철회 기록: 5년</li>
|
||
|
|
<li>대금 결제 및 재화 공급 기록: 5년</li>
|
||
|
|
<li>소비자 불만 또는 분쟁 처리 기록: 3년</li>
|
||
|
|
<li>로그기록/IP 등 통신사실 확인자료: 3개월</li>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="third" className="scroll-mt-24">
|
||
|
|
<h2 className="text-xl font-semibold">{sections[4].title}</h2>
|
||
|
|
<p className="mt-3 text-gray-700">
|
||
|
|
법령 근거 또는 이용자 동의가 있는 경우에 한해 제3자 제공 또는 처리위탁을 할 수 있습니다.
|
||
|
|
</p>
|
||
|
|
<div className="mt-3 rounded-xl border p-4">
|
||
|
|
<h3 className="font-medium">처리위탁(예시)</h3>
|
||
|
|
<ul className="mt-2 list-disc pl-5 text-gray-700">
|
||
|
|
<li>인프라 운영: 클라우드 호스팅 사업자</li>
|
||
|
|
<li>알림/이메일 발송: 메시징 서비스 사업자</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="rights" className="scroll-mt-24">
|
||
|
|
<h2 className="text-xl font-semibold">{sections[5].title}</h2>
|
||
|
|
<p className="mt-3 text-gray-700">
|
||
|
|
이용자는 언제든지 개인정보 조회·수정·삭제·처리정지를 요청할 수 있습니다. 계정 메뉴 또는 아래
|
||
|
|
문의처를 통해 요청하실 수 있습니다.
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="security" className="scroll-mt-24">
|
||
|
|
<h2 className="text-xl font-semibold">{sections[6].title}</h2>
|
||
|
|
<ul className="mt-3 list-disc pl-5 text-gray-700">
|
||
|
|
<li>암호화 전송 및 저장</li>
|
||
|
|
<li>접근권한 최소화 및 접근통제</li>
|
||
|
|
<li>정기적 보안 점검 및 교육</li>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="overseas" className="scroll-mt-24">
|
||
|
|
<h2 className="text-xl font-semibold">{sections[7].title}</h2>
|
||
|
|
<p className="mt-3 text-gray-700">
|
||
|
|
국외 이전이 필요한 경우 이전받는 자, 이전국가, 이전 일시/방법, 보유·이용기간 등을 사전에 고지하고 동의를 받습니다.
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="contact" className="scroll-mt-24">
|
||
|
|
<h2 className="text-xl font-semibold">{sections[8].title}</h2>
|
||
|
|
<div className="mt-3 rounded-xl border p-4">
|
||
|
|
<p className="text-gray-700">
|
||
|
|
개인정보 보호책임자: <span className="font-medium">홍길동</span>
|
||
|
|
</p>
|
||
|
|
<p className="text-gray-700">
|
||
|
|
이메일: <a href="mailto:privacy@talkbaram.com" className="underline">privacy@talkbaram.com</a>
|
||
|
|
</p>
|
||
|
|
<p className="text-gray-700">주소: 서울특별시 …</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="update" className="scroll-mt-24">
|
||
|
|
<h2 className="text-xl font-semibold">{sections[9].title}</h2>
|
||
|
|
<p className="mt-3 text-gray-700">
|
||
|
|
본 처리방침이 변경되는 경우, 시행 7일 전(중요 변경 시 30일 전) 서비스 공지사항을 통해 안내합니다.
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
{/* Footer CTA */}
|
||
|
|
<footer className="mt-12 flex items-center justify-between rounded-2xl border bg-gray-50 p-5">
|
||
|
|
<span className="text-sm text-gray-600">
|
||
|
|
본 문서는 안내용 템플릿입니다. 서비스 실정에 맞게 수정하세요.
|
||
|
|
</span>
|
||
|
|
<a
|
||
|
|
href="/terms"
|
||
|
|
className="rounded-xl bg-gray-900 px-4 py-2 text-sm font-medium text-white hover:bg-black"
|
||
|
|
>
|
||
|
|
서비스 약관 보기
|
||
|
|
</a>
|
||
|
|
</footer>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
);
|
||
|
|
}
|