正 PLANNER
중요한 일정과 자잘한 할 일을 분리해 적는, 핑크빛 보라 테마의 웹 다이어리
🔗 yellow-planner.vercel.app · 첫 화면의 데모 계정으로 둘러보기로 가입 없이 사용해 볼 수 있습니다.
어떤 문제를 풀었나
보통의 캘린더는 시험·마감처럼 중요한 일정과 사소한 체크 항목을 한 목록에 섞습니다.
正 PLANNER는 쓰는 위치를 나눠 중요한 일을 먼저 보이게 합니다.
| 구분 | 적는 곳 | 예시 |
|---|
| 중요한 일정 | 월간 달력 칸 | 시험, 약속, 마감 |
| 자잘한 할 일 | 주간 요일 칸 | 자료 준비, 강의 듣기 |
월간에 적은 중요 일정은 같은 주의 주간 페이지에도 나오고, 거기서 그대로 고칠 수 있습니다.
주요 기능
- 월간 일정 관리 — 날짜 옆에는 중요 일정을, 그 아래에는 추가 일정·할 일을 적습니다. 중요 일정에서 Enter를 치면 아래에 일정 한 줄이 새로 열리고,
/ 로 체크박스를 그립니다.
- 끌어서 옮기기 — 일정 왼쪽의 작은 손잡이를 끌어 순서를 바꾸거나 다른 날짜로 옮깁니다. 월간·주간 어디서나 되고, 손잡이에 초점을 두고 위/아래 화살표 키를 써도 됩니다.
- 일정 설정 — 일정 옆
i 아이콘에서 메모와 반복 주기·종료일을 설정합니다.
- 반복 일정 — 매일·매주·매월·매년 반복을 지원합니다. 반복 일정은 특정 날짜만 삭제하거나 전체를 삭제할 수 있습니다.
- 안전한 이름 변경 — 반복 일정의 이름을 바꾸면 선택한 날짜만 바꿀지 전체를 바꿀지 선택합니다. 취소하면 편집 전 제목으로 돌아갑니다.
- 종이에 쓰는 편집기 —
/ 메뉴로 체크박스·펜 색·굵게·밑줄·형광펜·글자 크기를 적용합니다.
- 보라 다이어리 테마 — 핑크빛 보라 표지, 월별 퍼플 인덱스, 나눔바른펜, 라벤더·오키드·로즈 형광펜을 사용합니다.
- 반응형 레이아웃 — 데스크톱은 오른쪽 세로 인덱스와 달력 칸 직접 편집을, 모바일은 위쪽 가로 인덱스와 날짜별 편집 영역을 제공합니다.
- 계정별 데이터 분리 — 이메일 로그인과 Supabase RLS로 각 사용자의 플래너 데이터만 읽고 쓸 수 있습니다.
사용 방법
- 월간 달력에서 날짜를 골라 중요한 일정과 할 일을 적습니다.
- 일정 옆
i 아이콘을 눌러 메모를 남기거나 반복을 설정합니다.
- 반복 일정은 이 날짜만 삭제 또는 반복 전체 삭제를 선택할 수 있습니다.
- 주간 페이지에서 그 주의 일정과 요일별 할 일을 함께 보고, 일정을 고치거나 다른 요일로 옮깁니다.
구조와 데이터 흐름
flowchart LR
E["CalendarDayEditor / PaperBlock"]
C["useCalendarNotes\n낙관적 화면 갱신"]
A["Server Actions\nsaveCalendarChanges · saveBlock"]
V["Zod 검증 · sanitize-html"]
D[("Supabase PostgreSQL")]
R{{"RLS: 본인 데이터만"}}
E --> C --> A --> V --> D --> R
- 일정은 날짜별
event 항목의 style.calendar JSON에 제목·반복·메모·완료 여부를 함께 보관합니다.
- 저장은 항목 단위 변경을 최신 DB 값에 재적용하고, 동시 수정 충돌 시 재시도해 다른 탭의 변경을 덮어쓰지 않도록 합니다.
- 사용자 입력은 서버에서 Zod로 검증하고, 리치 텍스트는 저장 직전에 허용된 HTML만 남깁니다.
- RLS가
auth.uid() 기준으로 행 접근을 제한하므로 클라이언트가 다른 사용자의 id를 보내도 데이터를 수정할 수 없습니다.
기술 스택
| 구분 | 사용 기술 |
|---|
| 프레임워크 | Next.js 16.2, React 19, TypeScript |
| UI | Tailwind CSS 4, 나눔바른펜 웹폰트 |
| 백엔드 | Supabase PostgreSQL, Auth, RLS |
| 검증·보안 | Zod, sanitize-html |
| 날짜 | date-fns |
| 테스트 | Vitest |
| 배포 | Vercel — main 푸시 시 자동 배포 |
로컬 실행
git clone https://github.com/sarasoobin/yellow-planner.git
cd yellow-planner
npm install
.env.local 파일을 만들고 Supabase 프로젝트 값을 넣습니다.
NEXT_PUBLIC_SUPABASE_URL=https://<project-id>.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=sb_publishable_...
NEXT_PUBLIC_SITE_URL=http://localhost:3000
# 선택: 데모 계정
[email protected]
DEMO_PASSWORD=...
Supabase SQL Editor에서 supabase/latest.sql을 실행한 뒤 개발 서버를 시작합니다.
npm run dev # 개발 서버
npm run verify # 린트 · 타입 검사 · 테스트 · 프로덕션 빌드
service_role / Secret key는 RLS를 우회합니다. .env.local에만 보관하고 저장소에 커밋하지 마세요.
프로젝트 구조
src/
├── app/ 페이지 · 레이아웃 · 전역 테마
├── components/
│ ├── calendar-day-editor.tsx 달력 일정·할 일 편집기
│ ├── calendar-repeat-dialog.tsx
│ ├── month-board.tsx 월간 달력과 반복 일정 제어
│ ├── paper-block.tsx 리치 텍스트 편집기
│ └── toolbar.tsx 형광펜·스티커 도구
├── lib/
│ ├── actions/ 인증·일정·항목 Server Actions
│ ├── calendar-reminders.ts 일정·반복·메모 도메인 모델
│ └── supabase/ 브라우저·서버 클라이언트
└── proxy.ts 세션 갱신과 보호 경로 처리
supabase/latest.sql 테이블 · 트리거 · RLS 정책
docs/ 기획 문서와 참고 자료
문서
