🚀 Release : BoardPort v1.2.2 PWA와 서비스 정책 페이지 반영

README.md

@@ -173,11 +173,11 @@ App Router의 일반 상세 페이지와 모달 상세 페이지가 같은 데
   In-App 알림, PWA Web Push, 키워드/지역 알림, 채팅/거래/방송/시스템 알림 설정
 
 - **Admin**
-  신고 처리, 콘텐츠 조치, 유저 제재, 감사 로그, 관리자 인사이트
+  신고 처리, 콘텐츠 조치, 유저 제재, 감사 로그, ECharts 기반 관리자 인사이트
 
 ## Tech Stack
 
-- **Frontend:** Next.js 14 App Router, React 18, TypeScript, Tailwind CSS, Framer Motion, Floating UI
+- **Frontend:** Next.js 14 App Router, React 18, TypeScript, Tailwind CSS, Framer Motion, Floating UI, Apache ECharts
 - **State:** TanStack Query v5, Zustand
 - **Backend/Data:** Prisma, PostgreSQL, iron-session
 - **Realtime/Infra:** Supabase Realtime, Cloudflare Stream/Images, Web Push API, next-pwa, Vercel

app/(public)/privacy/page.tsx

@@ -0,0 +1,134 @@
+/**
+ * File Name : app/(public)/privacy/page.tsx
+ * Description : BoardPort 개인정보 처리방침 페이지
+ * Author : 임도헌
+ *
+ * History
+ * Date        Author   Status    Description
+ * 2026.07.06  임도헌   Created   공개 접근 가능한 개인정보 처리방침 페이지 추가
+ */
+import type { Metadata } from "next";
+import Link from "next/link";
+import BackButton from "@/components/global/BackButton";
+
+export const metadata: Metadata = {
+  title: "개인정보 처리방침",
+  description: "BoardPort 개인정보 처리방침입니다.",
+};
+
+const sections = [
+  {
+    title: "1. 수집하는 개인정보",
+    body: [
+      "BoardPort는 회원 가입, 로그인, 프로필 설정, 거래/커뮤니티 기능 제공을 위해 이메일, 휴대폰 번호, 닉네임, 프로필 이미지, 선택한 활동 지역 및 거래 지역 정보를 처리할 수 있습니다.",
+      "상품, 게시글, 댓글, 채팅, 방송/VOD, 이미지, 영상, 신고, 리뷰 등 이용자가 서비스에 등록하거나 주고받은 콘텐츠와 활동 기록이 저장될 수 있습니다.",
+      "서비스 안정성, 보안, 부정 이용 방지를 위해 IP 주소, 접속 로그, 기기/브라우저 정보, 쿠키, 알림 구독 정보, rate limit 기록이 생성될 수 있습니다.",
+    ],
+  },
+  {
+    title: "2. 개인정보 이용 목적",
+    body: [
+      "계정 생성과 로그인, 본인 확인, SMS/이메일 인증, 프로필 관리 등 회원 관리를 위해 개인정보를 이용합니다.",
+      "상품 거래, 채팅 약속, 게시글, 방송/VOD, 알림, 신고 처리, 관리자 운영 등 서비스 기능 제공을 위해 개인정보를 이용합니다.",
+      "서비스 보안, 스팸 및 자동화 요청 방지, 장애 대응, 이용 제한 및 운영 정책 집행을 위해 접속 기록과 요청 정보를 이용할 수 있습니다.",
+    ],
+  },
+  {
+    title: "3. 지역 정보 처리",
+    body: [
+      "BoardPort는 현재 위치를 자동으로 추적하는 위치기반서비스를 제공하지 않습니다.",
+      "이용자가 직접 선택하거나 입력한 활동 지역과 거래 지역은 상품 목록, 게시글 피드, 알림, 직거래 약속 등 지역 기반 화면을 제공하기 위해 사용됩니다.",
+    ],
+  },
+  {
+    title: "4. 외부 서비스와 처리 위탁",
+    body: [
+      "서비스 운영을 위해 Vercel, Supabase/PostgreSQL, Cloudflare Images/Stream, CoolSMS, Resend, 브라우저/운영체제의 Web Push 인프라를 사용할 수 있습니다.",
+      "이미지와 영상 업로드, 라이브/VOD 처리, SMS 인증, 이메일 인증, 알림 전송, 서비스 배포와 데이터 저장 과정에서 필요한 최소한의 정보가 각 외부 서비스로 전달될 수 있습니다.",
+      "외부 서비스는 각자의 보안 및 개인정보 처리 기준에 따라 데이터를 처리합니다.",
+    ],
+  },
+  {
+    title: "5. 보유 및 파기",
+    body: [
+      "개인정보는 서비스 제공과 운영 목적이 달성될 때까지 보관하며, 회원 탈퇴 또는 삭제 요청 시 관련 법령과 운영상 필요한 범위를 제외하고 삭제하거나 비식별 처리합니다.",
+      "신고, 제재, 감사 로그, 보안 기록 등 분쟁 대응과 서비스 안전을 위해 필요한 정보는 일정 기간 보관될 수 있습니다.",
+      "SMS 인증번호, 비밀번호 재설정 토큰 등 일회성 인증 정보는 정해진 유효 기간이 지나면 사용할 수 없으며, 서비스 요청 시 지연 정리될 수 있습니다.",
+    ],
+  },
+  {
+    title: "6. 이용자의 권리",
+    body: [
+      "이용자는 자신의 개인정보에 대해 열람, 정정, 삭제, 탈퇴를 요청할 수 있습니다.",
+      "서비스 화면에서 직접 수정할 수 없는 정보나 추가 요청은 운영자 문의를 통해 처리할 수 있습니다.",
+      "법령상 보관이 필요하거나 부정 이용 방지를 위해 필요한 정보는 요청 즉시 삭제가 제한될 수 있습니다.",
+    ],
+  },
+  {
+    title: "7. 쿠키, 로그, 알림",
+    body: [
+      "서비스는 로그인 세션 유지, 사용자 경험 개선, 보안 확인을 위해 쿠키와 브라우저 저장소를 사용할 수 있습니다.",
+      "Web Push 알림을 선택한 경우 브라우저 또는 기기에서 발급한 푸시 구독 정보가 저장될 수 있으며, 이용자는 브라우저 또는 서비스 설정에서 알림을 해제할 수 있습니다.",
+    ],
+  },
+  {
+    title: "8. 개인정보 보호 문의",
+    body: [
+      "개인정보 처리와 관련한 문의는 서비스 운영자 이메일로 접수할 수 있습니다.",
+      "문의처: ldh2233@gmail.com",
+    ],
+  },
+  {
+    title: "9. 방침 변경",
+    body: [
+      "본 개인정보 처리방침은 서비스 기능, 운영 환경, 법령 변경에 따라 수정될 수 있습니다.",
+      "중요한 변경이 있는 경우 서비스 화면 또는 공지사항을 통해 안내합니다.",
+    ],
+  },
+];
+
+export default function PrivacyPage() {
+  return (
+    <main className="min-h-screen bg-background px-page-x pt-4 pb-10 text-primary">
+      <article className="mx-auto w-full max-w-2xl space-y-8">
+        <header className="space-y-3 border-b border-border-subtle pb-6">
+          <BackButton fallbackHref="/" variant="inline" label="이전 화면으로 이동" />
+          <div className="space-y-2">
+            <h1 className="text-2xl font-bold tracking-tight">
+              개인정보 처리방침
+            </h1>
+            <p className="text-sm leading-relaxed text-muted">
+              시행일: 2026년 7월 6일
+            </p>
+          </div>
+        </header>
+
+        <div className="space-y-7">
+          {sections.map((section) => (
+            <section key={section.title} className="space-y-3">
+              <h2 className="text-base font-bold text-primary">
+                {section.title}
+              </h2>
+              <div className="space-y-2 text-sm leading-7 text-muted">
+                {section.body.map((paragraph) => (
+                  <p key={paragraph}>{paragraph}</p>
+                ))}
+              </div>
+            </section>
+          ))}
+        </div>
+
+        <footer className="border-t border-border-subtle pt-6 text-sm text-muted">
+          서비스 이용 조건은{" "}
+          <Link
+            href="/terms"
+            className="focus-ring-soft rounded-md font-medium text-brand transition-colors hover:underline dark:text-brand-light"
+          >
+            이용약관
+          </Link>
+          에서 확인할 수 있습니다.
+        </footer>
+      </article>
+    </main>
+  );
+}

app/(public)/terms/page.tsx

@@ -0,0 +1,135 @@
+/**
+ * File Name : app/(public)/terms/page.tsx
+ * Description : BoardPort 서비스 이용약관 페이지
+ * Author : 임도헌
+ *
+ * History
+ * Date        Author   Status    Description
+ * 2026.07.06  임도헌   Created   공개 접근 가능한 서비스 이용약관 페이지 추가
+ */
+import type { Metadata } from "next";
+import Link from "next/link";
+import BackButton from "@/components/global/BackButton";
+
+export const metadata: Metadata = {
+  title: "이용약관",
+  description: "BoardPort 서비스 이용약관입니다.",
+};
+
+const sections = [
+  {
+    title: "1. 목적",
+    body: [
+      "본 약관은 BoardPort가 제공하는 보드게임 거래, 커뮤니티, 채팅, 방송/VOD, 알림 및 관련 서비스의 이용 조건과 절차, 이용자와 서비스의 권리와 의무를 정합니다.",
+      "BoardPort는 운영 과정에서 서비스 범위와 정책을 변경할 수 있으며, 중요한 변경 사항은 서비스 화면 또는 공지사항을 통해 안내합니다.",
+    ],
+  },
+  {
+    title: "2. 계정과 이용 자격",
+    body: [
+      "이용자는 이메일, 휴대폰 번호, 소셜 로그인 등 서비스가 제공하는 방식으로 계정을 만들거나 로그인할 수 있습니다.",
+      "이용자는 가입 및 서비스 이용 과정에서 정확한 정보를 제공해야 하며, 타인의 계정 또는 인증 수단을 무단으로 사용할 수 없습니다.",
+      "서비스는 보안, 스팸 방지, 운영 정책 위반 대응을 위해 계정 생성, 로그인, SMS 인증 등 일부 요청을 제한할 수 있습니다.",
+    ],
+  },
+  {
+    title: "3. 게시물과 거래 활동",
+    body: [
+      "이용자는 상품, 게시글, 댓글, 채팅, 방송, 이미지, 영상 등 자신이 등록한 콘텐츠와 거래 활동에 대한 책임을 집니다.",
+      "BoardPort는 이용자 간 거래의 중개 환경을 제공하며, 개별 거래의 당사자가 아닙니다.",
+      "허위 정보, 타인의 권리 침해, 불법 물품 거래, 욕설 또는 괴롭힘, 서비스 운영을 방해하는 행위는 제한될 수 있습니다.",
+    ],
+  },
+  {
+    title: "4. 채팅과 약속",
+    body: [
+      "이용자는 상품 거래를 위해 채팅과 약속 기능을 사용할 수 있습니다.",
+      "약속 수락, 취소, 거절 등 거래 상태에 영향을 주는 행위는 서비스 화면에 표시되는 상태와 알림에 반영될 수 있습니다.",
+      "이용자는 실제 거래 과정에서 상대방과 충분히 확인하고, 안전한 장소와 방식으로 거래해야 합니다.",
+    ],
+  },
+  {
+    title: "5. 신고, 제재, 콘텐츠 조치",
+    body: [
+      "이용자는 부적절한 상품, 게시글, 방송, 프로필, 사용자 행위를 신고할 수 있습니다.",
+      "서비스는 신고 내용, 운영 정책 위반 여부, 서비스 안정성 등을 검토해 콘텐츠 숨김, 삭제, 계정 제한, 정지 등의 조치를 할 수 있습니다.",
+      "명백한 위반 또는 긴급한 피해 방지가 필요한 경우 사전 안내 없이 임시 조치가 이루어질 수 있습니다.",
+    ],
+  },
+  {
+    title: "6. 서비스 변경과 중단",
+    body: [
+      "서비스는 기능 개선, 보안 조치, 장애 대응, 외부 서비스 연동 상태 등에 따라 일부 기능을 변경하거나 중단할 수 있습니다.",
+      "Cloudflare, Supabase, Vercel, SMS/이메일 발송 서비스 등 외부 서비스 장애가 발생하면 일부 기능 이용이 제한될 수 있습니다.",
+    ],
+  },
+  {
+    title: "7. 면책",
+    body: [
+      "BoardPort는 이용자 간 거래, 게시물, 채팅 내용, 외부 링크 또는 이용자가 등록한 콘텐츠의 정확성과 신뢰성을 보증하지 않습니다.",
+      "이용자의 귀책 사유, 외부 서비스 장애, 천재지변 또는 이에 준하는 사유로 발생한 손해에 대해서는 책임이 제한될 수 있습니다.",
+    ],
+  },
+  {
+    title: "8. 약관 변경",
+    body: [
+      "서비스는 필요한 경우 본 약관을 변경할 수 있으며, 중요한 변경이 있는 경우 서비스 화면 또는 공지사항을 통해 안내합니다.",
+      "변경된 약관은 별도 시행일을 정하지 않는 한 게시된 날부터 적용됩니다.",
+    ],
+  },
+  {
+    title: "9. 문의",
+    body: [
+      "서비스 이용, 약관, 운영 정책과 관련한 문의는 운영자 이메일로 접수할 수 있습니다.",
+      "문의처: ldh2233@gmail.com",
+    ],
+  },
+];
+
+export default function TermsPage() {
+  return (
+    <main className="min-h-screen bg-background px-page-x pt-4 pb-10 text-primary">
+      <article className="mx-auto w-full max-w-2xl space-y-8">
+        <header className="space-y-3 border-b border-border-subtle pb-6">
+          <BackButton
+            fallbackHref="/"
+            variant="inline"
+            label="이전 화면으로 이동"
+          />
+          <div className="space-y-2">
+            <h1 className="text-2xl font-bold tracking-tight">이용약관</h1>
+            <p className="text-sm leading-relaxed text-muted">
+              시행일: 2026년 7월 6일
+            </p>
+          </div>
+        </header>
+
+        <div className="space-y-7">
+          {sections.map((section) => (
+            <section key={section.title} className="space-y-3">
+              <h2 className="text-base font-bold text-primary">
+                {section.title}
+              </h2>
+              <div className="space-y-2 text-sm leading-7 text-muted">
+                {section.body.map((paragraph) => (
+                  <p key={paragraph}>{paragraph}</p>
+                ))}
+              </div>
+            </section>
+          ))}
+        </div>
+
+        <footer className="border-t border-border-subtle pt-6 text-sm text-muted">
+          개인정보 처리 기준은{" "}
+          <Link
+            href="/privacy"
+            className="focus-ring-soft rounded-md font-medium text-brand transition-colors hover:underline dark:text-brand-light"
+          >
+            개인정보 처리방침
+          </Link>
+          에서 확인할 수 있습니다.
+        </footer>
+      </article>
+    </main>
+  );
+}

features/auth/components/AccountBox.tsx

@@ -17,11 +17,13 @@
  * 2026.04.12  임도헌   Modified  로그인 전 메인 CTA 카드의 표면감과 대비를 정리해 전환성과 판독성을 보강
  * 2026.04.13  임도헌   Modified  회원가입 버튼 테두리 톤을 카드 주변 색감에 맞게 부드럽게 조정
  * 2026.04.20  임도헌   Modified  로그인 전 메인 CTA 전용 비주얼 규칙을 CSS Module로 정리해 className 복잡도를 낮춤
+ * 2026.07.06  임도헌   Modified  로그인 전 메인 CTA 하단에 약관/개인정보 처리방침 링크 추가
  */
 
 import Link from "next/link";
 import { ArrowRightIcon } from "@heroicons/react/24/solid";
 import mainPageStyles from "@/features/auth/components/mainPage.module.css";
+import LegalLinks from "@/features/legal/components/LegalLinks";
 
 export default function AccountBox() {
   return (
@@ -42,6 +44,7 @@ export default function AccountBox() {
           <span>새로운 선원으로 등록</span>
         </Link>
       </div>
+      <LegalLinks className="mt-4 text-white/75" compact inverse />
     </div>
   );
 }

features/auth/components/AuthPageShell.tsx

@@ -6,9 +6,11 @@
  * History
  * Date        Author   Status    Description
  * 2026.04.13  임도헌   Created   로그인/회원가입/SMS/비밀번호 재설정 계열 페이지의 공통 헤더와 본문 폭을 재사용하는 셸 추가
+ * 2026.07.06  임도헌   Modified  인증 화면 하단에 이용약관/개인정보 처리방침 링크 추가
  */
 import type { ReactNode } from "react";
 import Logo from "@/components/ui/Logo";
+import LegalLinks from "@/features/legal/components/LegalLinks";
 import { cn } from "@/lib/utils";
 
 interface AuthPageShellProps {
@@ -47,6 +49,8 @@ export default function AuthPageShell({
       <div className={cn("mx-auto w-full max-w-sm", contentClassName)}>
         {children}
       </div>
+
+      <LegalLinks className="mx-auto mt-8 w-full max-w-sm" compact />
     </main>
   );
 }

features/legal/components/LegalLinks.tsx

@@ -0,0 +1,63 @@
+/**
+ * File Name : features/legal/components/LegalLinks.tsx
+ * Description : 약관/개인정보 처리방침 링크 묶음
+ * Author : 임도헌
+ *
+ * History
+ * Date        Author   Status    Description
+ * 2026.07.06  임도헌   Created   공개/인증 화면에서 재사용할 정책 링크 묶음 추가
+ */
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+interface LegalLinksProps {
+  className?: string;
+  compact?: boolean;
+  inverse?: boolean;
+}
+
+/**
+ * 서비스 정책 문서로 이동하는 공통 링크 묶음
+ * - 공개 메인, 인증 화면, 설정 메뉴 등에서 동일한 링크 순서를 유지
+ * - 작은 보조 링크로 노출해 핵심 CTA 흐름을 방해하지 않도록 구성
+ */
+export default function LegalLinks({
+  className,
+  compact,
+  inverse,
+}: LegalLinksProps) {
+  const linkClassName = cn(
+    "focus-ring-soft rounded-md px-1 py-0.5 font-medium transition-colors hover:underline",
+    inverse ? "hover:text-white" : "hover:text-primary",
+    compact && "px-0.5"
+  );
+
+  return (
+    <nav
+      aria-label="서비스 약관 및 정책"
+      className={cn(
+        "flex flex-wrap items-center justify-center gap-x-2 gap-y-1 text-center text-xs text-muted",
+        className
+      )}
+    >
+      <Link
+        href="/terms"
+        className={linkClassName}
+      >
+        이용약관
+      </Link>
+      <span
+        aria-hidden="true"
+        className={cn(inverse ? "text-white/45" : "text-muted/60")}
+      >
+        ·
+      </span>
+      <Link
+        href="/privacy"
+        className={linkClassName}
+      >
+        개인정보 처리방침
+      </Link>
+    </nav>
+  );
+}