키워드 기반 실시간 알림을 제공하는 Progressive Web App입니다.
- 목적: 키워드 알림 PWA MVP (2시간 데모용)
- 기술 스택: Next.js App Router + TypeScript + Tailwind CSS + Prisma + SQLite
- 특징: 초보자도 이해 가능한 단순한 TypeScript 코드 스타일
npm install# Prisma 클라이언트 생성
npx prisma generate
# 데이터베이스 생성 및 스키마 적용
npx prisma db push
# 시드 데이터 생성 (데모용 사용자 및 샘플 데이터)
npm run db:seednpm run dev브라우저에서 http://localhost:3000을 열어 확인하세요.
# 프로덕션 빌드
npm run build
npm run start
# 데이터베이스 관리
npx prisma studio # Prisma Studio 실행 (데이터베이스 GUI)
npm run db:seed # 시드 데이터 재생성├── app/
│ ├── page.tsx # 홈 페이지
│ ├── layout.tsx # 기본 레이아웃
│ ├── globals.css # 글로벌 스타일
│ ├── keywords/
│ │ └── page.tsx # 키워드 관리 페이지
│ ├── notifications/
│ │ └── page.tsx # 알림 내역 페이지
│ └── api/
│ ├── keywords/route.ts # 키워드 API
│ ├── push/
│ │ ├── subscribe/route.ts # 푸시 구독 API
│ │ └── test/route.ts # 테스트 알림 API
│ ├── listings/route.ts # 리스팅 API
│ └── match/run/route.ts # 매칭 실행 API
├── components/
│ ├── KeywordForm.tsx # 키워드 입력 폼
│ ├── KeywordList.tsx # 키워드 목록
│ ├── PushPermissionButton.tsx # 푸시 알림 권한 버튼
│ └── NotificationList.tsx # 알림 내역 목록
├── lib/
│ ├── prisma.ts # Prisma 클라이언트
│ ├── db.ts # 데이터베이스 서비스
│ ├── push.ts # 푸시 알림 서비스
│ ├── matcher.ts # 키워드 매칭 서비스
│ └── normalize.ts # 텍스트 정규화 유틸
├── prisma/
│ ├── schema.prisma # 데이터베이스 스키마
│ └── seed.ts # 시드 데이터 스크립트
├── public/
│ ├── manifest.json # PWA 매니페스트
│ ├── sw.js # Service Worker
│ └── icons/ # PWA 아이콘들
└── package.json
- Next.js App Router 기본 구조
- TypeScript 설정
- Tailwind CSS 스타일링
- Prisma 스키마 정의 (User, Keyword, PushSubscription, Listing, NotificationLog)
- 기본 UI 컴포넌트들
- API 라우트 구조
- PWA 설정 (manifest, service worker)
- 데이터베이스 시드 스크립트 (데모 사용자 및 샘플 데이터)
// lib/db.ts에서 실제 Prisma 쿼리 구현 필요
// - 새로운 스키마에 맞게 DatabaseService 메서드들 업데이트
// - User 기반으로 데이터 조회/생성 로직 추가
// - API 라우트에서 실제 DB 연동# 환경변수 설정 (.env.local 파일 생성)
VAPID_PUBLIC_KEY=your_vapid_public_key
VAPID_PRIVATE_KEY=your_vapid_private_key
VAPID_EMAIL=mailto:admin@example.com// lib/matcher.ts에서 실제 리스팅 검색 API 연동
// - searchNewListings() 함수 구현
// - 실제 매칭 로직 개발// app/layout.tsx에 Service Worker 등록 코드 추가
// PWA 설치 프롬프트 구현// 주기적 매칭 작업을 위한 cron job 또는 서버리스 함수 설정
// Background Sync API 활용public/icons/ 폴더에 필요한 아이콘 파일들:
- icon-192x192.png
- icon-256x256.png
- icon-384x384.png
- icon-512x512.png
- screenshot-desktop.png
- screenshot-mobile.png
- 복잡한 제네릭이나 고급 타입 사용 금지
- 인터페이스와 타입은 명확하고 단순하게 정의
- any 타입 사용 최소화
- 각 컴포넌트는 단일 책임 원칙 준수
- Props 인터페이스 명확히 정의
- 로딩 상태와 에러 처리 포함
- RESTful API 구조 따름
- 응답 형식 일관성 유지
- 에러 처리와 상태 코드 명확히 설정
- User: 사용자 정보 (현재 단일 demo-user, 향후 확장 가능)
- Keyword: 사용자별 알림 키워드 (포함/제외 단어 설정)
- PushSubscription: 브라우저별 푸시 알림 구독 정보
- Listing: 외부 수집 상품/게시물 데이터
- NotificationLog: 매칭 및 알림 전송 로그
- User → Keyword (1:N): 한 사용자가 여러 키워드 소유
- User → PushSubscription (1:N): 브라우저별 구독 정보
- Keyword + Listing → NotificationLog (N:N): 매칭 기록
- 키워드 관리: 알림받고 싶은 키워드 등록/삭제 (포함/제외 단어 설정)
- 푸시 알림: 브라우저 푸시 알림을 통한 실시간 알림
- 매칭 시스템: 등록된 키워드와 외부 데이터 매칭
- 알림 내역: 받은 알림들의 히스토리 관리
- PWA 지원: 앱처럼 설치 가능한 웹 애플리케이션
이 프로젝트는 MIT 라이선스를 따릅니다.