즐겨찾기함
팀이 함께 쓰는 공유 즐겨찾기 보드와, 각자 꾸미는 개인 보드를 한 화면에서 제공하는 링크 모음 서비스입니다.
- 공유 보드 — 팀원 누구나 볼 수 있고, 관리자만 추가·수정·삭제·정렬합니다.
- 개인 보드 — 이름 + PIN으로 로그인하면 공유 즐겨찾기 위에 나만의 링크·카테고리를 얹어 재구성할 수 있습니다. 공유 항목을 내 화면에서만 숨기거나 복원할 수 있으며, 이 변경은 다른 팀원에게 영향을 주지 않습니다.
주요 기능
공유 보드 (팀 공용)
- 🔗 카테고리별 정리 — "전체" 화면은 카테고리 헤더 + 그룹으로 묶어 한눈에 훑고, 상단 탭으로 특정 카테고리만 골라볼 수 있습니다.
- 🔎 검색 — 제목·설명·URL 즉시 검색.
- 🖼️ 파비콘 자동 표시 — unavatar → Google → DuckDuckGo → 도메인 첫 글자 순으로 폴백.
개인 보드 (이름 + PIN 로그인)
- 👤 나만의 보드 — 공유 즐겨찾기 위에 개인 링크·개인 카테고리를 얹어 구성 (첫 로그인 시 자동 생성).
- 🗂️ 카테고리 순서 = 목록 순서 — 공유/개인 카테고리를 통합 드래그로 재배치하면 "전체" 화면의 섹션 순서도 즉시 반영됩니다.
- 📌 상단 고정(핀) — 자주 쓰는 링크를 카테고리와 무관하게 맨 위 "고정" 그룹으로 올립니다.
- 🙈 내 화면에서만 숨기기/복원 — 공유 즐겨찾기·공유 카테고리(탭)를 개인 화면에서만 숨기고 되돌릴 수 있습니다.
- ✏️ 보드 편집 모드 — 카드 드래그 정렬(같은 카테고리 안에서만), 좌상단 −로 삭제/숨김, 우하단 📌로 고정. 빈 곳을 탭하면 편집이 끝납니다.
공통
- ✨ Apple Glassmorphism UI — iOS/macOS 스타일의 반투명 블러 카드와 유기적인 메탈릭 그라데이션, 세밀한 타이포그래피.
- 🌗 다크 모드 — 시스템 설정 연동 (next-themes), 딥 블랙 메탈릭 테마.
- 📱 모바일 대응 — Edge-to-edge 카테고리 스와이프, 반응형 그리드, iOS 하단 홈바 충돌 방지.
- 🔐 보안 — PIN 해시 저장, 로그인 레이트리밋 + 계정 잠금(Postgres 기반), 상태 변경 요청 CSRF 토큰 검증.
- 🖼️ 링크 공유 미리보기 — OG/Twitter 카드 이미지 자동 주입.
기술 스택
| 영역 | 사용 기술 |
|---|
| 프레임워크 | Next.js 15 (App Router), React 19, TypeScript |
| 데이터베이스 | Neon (Serverless Postgres) — @neondatabase/serverless |
| 드래그 앤 드롭 | @dnd-kit/core · sortable |
| 테마 | next-themes |
| 아이콘 | lucide-react |
| 테스트 | Vitest |
| 배포 | Vercel |
로컬 실행
npm install
cp .env.example .env.local # 아래 환경변수 채우기
npm run dev # http://localhost:3000
환경변수 (.env.local)
| 변수 | 설명 |
|---|
DATABASE_URL | Neon Postgres 연결 문자열 (?sslmode=require 포함) |
ADMIN_TOKEN | 관리자(/manage) 접근용 비밀 토큰 — 길고 추측 불가능하게 |
스크립트
| 명령 | 설명 |
|---|
npm run dev | 개발 서버 |
npm run build | 프로덕션 빌드 |
npm run start | 빌드 결과 실행 |
npm run lint | ESLint |
npm run test | Vitest 단위 테스트 |
데이터베이스
설정
- Neon 에서 Postgres 프로젝트를 만들고 연결 문자열을 복사합니다.
- Neon SQL Editor 에서
db/schema.sql 을 실행해 기본 테이블을 만듭니다.
- 이어서
db/migrations/ 의 SQL을 날짜 순서대로 모두 실행합니다.
(이미 운영 중인 DB라면, 아직 적용하지 않은 마이그레이션만 실행하세요.)
- 선택:
db/seed.sql 을 실행하면 예시 카테고리·즐겨찾기가 추가됩니다.
마이그레이션
| 파일 | 내용 |
|---|
2026-07-01-personal-categories.sql | 개인 카테고리 + personal_bookmarks.personal_category_id |
2026-07-03-hidden-shared-bookmarks.sql | 공유 즐겨찾기 개별 숨김 |
2026-07-03-hidden-shared-categories.sql | 공유 카테고리(탭) 숨김 |
2026-07-03-unified-category-order.sql | 공유/개인 통합 카테고리 순서(profile_tab_order) |
2026-07-05-profile-pinned-keys.sql | 개인 보드 상단 고정(핀) 목록(profiles.pinned_keys) |
데이터 모델
| 테이블 | 설명 |
|---|
categories / bookmarks | 팀 공유 카테고리·즐겨찾기 |
profiles | 개인 보드 사용자 — 이름, PIN 해시, 카드 순서(order_keys), 상단 고정(pinned_keys) |
personal_categories / personal_bookmarks | 프로필별 개인 카테고리·즐겨찾기 |
personal_hidden_shared / personal_hidden_categories | 프로필별 "내 화면에서만 숨김" 목록 |
profile_tab_order | 프로필별 공유+개인 통합 카테고리 순서 |
profile_category_order | 프로필별 공유 카테고리 기본 순서 |
login_guard | 로그인 시도 제한·계정 잠금 상태 |
사용법
보기
배포 주소(https://<project>.vercel.app/)를 팀에 공유합니다. 로그아웃 상태에서도 공유 보드를 카테고리 섹션으로 볼 수 있습니다.
개인 보드
우상단 내 보드 → 이름 + PIN 입력 (첫 로그인이면 새 보드가 생성됩니다).
+ 내 링크 로 개인 링크를 추가합니다.- 보드 편집 모드에서 개인 카테고리 추가·정렬, 카드 드래그 정렬(같은 카테고리 안), 좌상단 −로 삭제/숨김, 우하단 📌로 상단 고정을 할 수 있습니다. 빈 곳을 탭하면 편집이 끝납니다.
- 숨긴 공유 항목은 하단 복원 목록에서 되돌릴 수 있습니다.
⋮ 메뉴에서 PIN 변경 / 로그아웃.
관리자
https://<project>.vercel.app/manage?key=<ADMIN_TOKEN> 로 한 번 접속하면 쿠키에 저장되어, 이후 그 기기에선 /manage 만으로 관리할 수 있습니다.
- 공유 카테고리·북마크 추가·수정·삭제, 드래그 정렬.
- 개인 보드 프로필의 이름 수정 / PIN 초기화 / 삭제, 전체 통계 확인.
배포 (Vercel + Neon)
- GitHub 저장소에 push.
- Vercel → New Project → 저장소 import.
- 환경변수
DATABASE_URL, ADMIN_TOKEN 설정.
- Deploy. 이후
main 브랜치에 push 하면 프로덕션이 자동 배포됩니다.
프로젝트 구조
src/
├─ app/
│ ├─ page.tsx # 메인 보드 (로그인 시 개인 보드, 아니면 공유 보드)
│ ├─ manage/page.tsx # 관리자 화면
│ ├─ layout.tsx # 메타데이터·테마·다이얼로그 프로바이더
│ └─ api/ # 북마크·카테고리·프로필·개인 데이터 라우트
├─ components/ # 보드 뷰, 카드, 카테고리 탭, 로그인 모달 등
└─ lib/ # DB 접근, 세션, 카테고리 섹션 그룹핑·정렬, 숨김 목록, 유효성 검사
db/
├─ schema.sql # 기본 스키마 (새 DB용)
├─ seed.sql # 예시 데이터
└─ migrations/ # 증분 업데이트용 SQL
