# 신규 사이트 요구사항 통합 (수집중)

> "시작해" 전까지 **수집·정리만**. 작업 착수 금지.
> 최종 작업물은 **배포 금지, 파일로 텔레그램 전송**.

수집 시각: 2026-04-28
출처:
- 🔵 **고객 원본** — 사장님 직접 요청
- 🟠 **ONDA 보강 (17항목)** — 사용자 측 추가 정의

---

## 0. 사이트 컨셉 (확정)

- **디자인 톤**: "서든핵 판매사이트"풍 (게임핵 판매 사이트 패턴)
  - 다크 베이스 + 네온 글로우 + **약한 애니메이션** + 약간 빤짝한 느낌
  - 너무 심플은 X / 페이지 부하는 가지 않는 선
  - 🟠 17항목 #8 "네온 (어둡고 반짝이는 대조)"와 일치 — **확정**
- **레이아웃**: 모바일 반응형 (🟠 #11)

---

## 1. 콘텐츠 영역

### 1-1. 공지사항 🔵
- **중요 강조 느낌** (다른 메뉴 대비 하이라이트 — 🟠 #4와 일치)
- 기본 4~5줄 표시 / **제목 클릭 → 상세 모달**
- admin: 추가·삭제·수정
- 외부 링크 바로 접속 가능 (예: 통관 고유번호 받기 — 🟠 #16과 일치)

### 1-2. 긴급공지 (별도) 🔵
- **페이지 진입 시 자동 팝업**, 취소(닫기) 누르면 사라짐
- admin이 옵션 ON/OFF + 내용 편집
- ✅ **17항목 #2 "Admin index 팝업창 1회성" 의미 확정** = 긴급공지 모달

### 1-3. 제품 🔵
- 카드 = **사진 + 제품명 + 단가**
- admin: 사진 변경 / 단가 수정 / 제품명 수정 / 추가·삭제 (🟠 #6과 일치)

### 1-4. QnA 🔵
- 추가·삭제·수정
- 클릭 시 상세내용 표시
- 외부 하이퍼링크 삽입 가능 (🟠 #16 "통관 고유번호" 예시)
- admin이 Q와 A 둘 다 등록 (🟠 #13)

### 1-5. 문의 🔵
- "사장님 느낌대로 이쁘게" (디자인 재량)
- 🟠 #9: 후기와 동일 패턴 (모달 + 비공개 + PW)
- 🔵 추가: **카톡 채널 토글** (문의 영역 내 카톡 넣고 빼기 가능)
  - ※ 우측하단 플로팅의 카톡 토글(🟠 #3)과는 별개. 둘 다 ON/OFF 가능

### 1-6. 후기 🟠 #7
- 클릭 시 상세 모달 + X 버튼
- **비공개 후기** 옵션
- 작성자 PW 설정 → 본인 PW 일치 시만 삭제
- admin은 PW 무관 삭제 가능

---

## 2. 우측 하단 플로팅 버튼 🟠 #1, #3, #14

| 채널 | 링크 | 상태 |
|---|---|---|
| 텔레그램 | `https://t.me/e_tktx` | 고정 ON |
| 라인 | 공식 메인 (URL 미정 → CMS 설정) | 고정 ON |
| 인스타그램 | 공식 메인 (URL 미정 → CMS 설정) | 고정 ON |
| 카톡 | 공식 메인 (URL 미정 → CMS 설정) | **토글 (교체중/활성)**<br>비활성=흑백 / 활성=컬러 |

---

## 3. 보안

### 3-1. 캡쳐 방지 🔵 + 🟠 #5
- 우클릭 차단
- 텍스트 드래그(`user-select:none`)
- 키보드 단축키 차단 (PrtScn / F12 / Ctrl+S / Ctrl+Shift+I)
- 이미지 워터마크 + `pointer-events` 제어
- ⚠️ **OS 레벨 캡쳐는 브라우저에서 완전 차단 불가** — 한계 명시 필요

### 3-2. Admin 🟠 #12, #15
- **별도 admin 페이지** (`/admin` 등)
- 최초 PW = `ess9977`
- admin 내에서 **현재 PW 입력 → 새 PW 설정** 기능
- 세션 (쿠키/JWT) + Supabase RLS

---

## 4. CMS 범위 🟠 #17 + 🔵

사장님이 직접 수정 가능한 항목:
- ✅ 공지사항 (글 + 외부링크)
- ✅ 긴급공지 (ON/OFF + 내용)
- ✅ 제품 (사진/제품명/단가 CRUD)
- ✅ QnA (Q + A + 하이퍼링크 CRUD)
- ✅ 후기 (admin 삭제 권한)
- ✅ 문의 (카톡 채널 토글, 답변)
- ✅ 플로팅 버튼 URL (라인/인스타/카톡)
- ✅ 카톡 플로팅 토글 (활성/교체중)
- ✅ 외부링크 버튼 (페이지 사이사이 — 🟠 #10)
- ✅ admin PW 변경

---

## 5. 기타

- 🟠 #10 페이지 사이사이 **외부링크 URL 버튼** 삽입 (CMS)
- 🔵 사장님 재량으로 편의 기능 추가 OK (단, **페이지 부하 X**)

---

## 6. 미확정 (다음 메시지에서 채울 것)

- [ ] 사이트명 / 도메인
- [ ] 업종 (해외구매대행/직구로 추정 — 통관 고유번호 언급)
- [ ] 메뉴 구조 (홈/제품/공지/QnA/문의/후기 외 추가?)
- [ ] 결제 연동 여부 (제품 단가만 표시? 카트/구매 기능?)
- [ ] 공식 카톡/라인/인스타 URL
- [ ] 호스팅 (Cloudflare 전용 정책 적용 예정)
- [ ] 사장님 = 고객사 = 누구? (브랜드명/로고/색상 톤 가이드)

---

## 7. 기술 스택 (현 시점 후보)

- **프론트**: 정적 HTML + Vanilla JS (또는 Astro — 정적 + 부분 인터랙션)
  - Next.js는 admin 동적 편집 + 캡쳐 방지 JS 자유도 위해 보류
- **DB**: Supabase
  - tables: notices / urgent_notice / products / qna / inquiries / reviews / cms_config / admin_users
  - RLS로 admin 전용 mutation
- **인증**: bcrypt + JWT(쿠키) — admin PW 변경 지원
- **후기 PW**: 클라이언트 해시(SHA-256) + Supabase 저장
- **배포**: Cloudflare Pages (전역 정책)
- **애니메이션**: CSS keyframes + 가벼운 GSAP 또는 framer-motion 없이 — "약한 빤짝"
  - 네온 글로우 / 글리치 / 호버 시 light pulse / 파티클은 비활성 (페이지 부하 X)
- **폰트**: Orbitron / Rajdhani / Audiowide (네온 톤)
- **컬러 가이드 (초안)**: 베이스 #08081A, 메인 네온 #00FFE0(시안) / 보조 #FF2E92(핫핑크) / 강조 #FFE600(옐로)

---

## 충돌·중복 체크

| 항목 | 출처 | 결과 |
|---|---|---|
| 공지 강조 | 🔵 + 🟠 #4 | ✅ 일치 |
| 외부링크 in QnA | 🔵 + 🟠 #16 | ✅ 일치 |
| 네온 톤 | 🔵 (서든핵풍) + 🟠 #8 | ✅ 일치 |
| 긴급공지 팝업 | 🔵 | ✅ 17항목 #2 의미 확정 |
| 카톡 토글 | 🟠 #3 (플로팅) + 🔵 (문의 영역) | ⚠️ **두 곳 모두 토글** — 별개 운영 |
| 후기 모달/PW | 🟠 #7 | 🔵 미언급, 보강으로 채택 |
| 캡쳐 방지 | 🔵 + 🟠 #5 | ✅ 일치 (단, OS 한계 고지) |

---

> **수집중.** "시작해" 전까지 추가 메시지 받아 통합 갱신만 함. 실 작업 착수 X.
