"Stash your thoughts, clear your mind. A minimal task bay for cognitive offloading." 머릿속에 떠오른 할 일을 즉시 쏟아내고(Dump), 대기열(Bay)에 던져두어 뇌의 작업 기억(Working Memory) 부하를 즉시 해제하는 초단순 웹 애플리케이션입니다.
- Dump Zone (입력부): 화면에 상시 고정된 입력창에서 생각나는 할 일을 타이핑하고
Shift + Enter를 입력하여 대기열(Stash Bay)로 즉시 내보냅니다. - Workspace Layout (2분할 영역):
- 구역 A [Timeline Board]: 05:00부터 23:00까지 시간대별로 포스트잇을 드래그하여 배치할 수 있는 타임라인입니다.
- 구역 B [Stash Bay]: 아직 타임라인에 배치되지 않은, 대기 중인 모든 포스트잇이 모여 있는 공간입니다.
- Post-it Markdown & Resizing:
- 포스트잇 카드는 마크다운(Markdown) 형식을 지원하며 더블클릭 시 편집 모드로 전환됩니다.
- 타임라인에 배치된 카드는 아래 테두리를 드래그하여 소요 예정 시간을 조절할 수 있습니다.
- Soft Delete & Undo: 카드 삭제 시 5초 동안 하단에 "실행 취소(Undo)" 토스트 팝업이 노출되며, 이후 휴지통으로 안전하게 이동됩니다.
- Client-Side Encryption (CSE): 사용자의 데이터는 서버(Supabase)에 전송되기 전 브라우저 내에서 Web Crypto API(AES-GCM)를 사용하여 암호화되며, 서버 및 데이터베이스 관리자도 복호화하여 볼 수 없습니다.
- 패키지 매니저:
pnpm - 프론트엔드: React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide React
- 마크다운 렌더링:
react-markdown,remark-gfm - 백엔드/인증: Supabase (Auth, Database, Realtime Subscription)
- 상태 관리: Zustand (Optimistic UI 업데이트 적용)
StashBay의 포스트잇 카드는 react-markdown과 remark-gfm을 통해 아래와 같은 마크다운 문법을 지원합니다. 좁은 격자에서도 가독성을 극대화하기 위해 여백과 폰트 크기가 디자인 시스템 가이드라인에 맞추어 커스터마이징되어 있습니다.
-
일반 텍스트 및 기본 효과
- 일반 텍스트는 줄 간격이 여유롭고 마진이 최소화되어 렌더링됩니다.
- 이탤릭(Italic,
*이탤릭*), 볼드(Bold,**볼드**), 취소선(Strikethrough,~~취소선~~) 등의 기본 GFM 효과를 지원합니다.
-
제목 (Headers)
# 제목 1,## 제목 2등 다양한 크기의 제목을 지원합니다. (태스크 카드 내부 가독성을 위해 적절한 폰트 크기로 축소 적용)
-
목록 (Unordered / Ordered List)
- 순서가 없는 목록은 불릿 기호(
-,*)와 좁은 여백(list-disc list-inside pl-1 mb-1)으로 조밀하게 표현됩니다. - 순서가 있는 목록은 번호(
1.,2.)와 함께 컴팩트한 형태(list-decimal list-inside pl-1 mb-1)로 렌더링됩니다.
- 순서가 없는 목록은 불릿 기호(
-
할 일 목록 (Task Lists)
- [ ]및- [x]형태(리스트 표시 기호-필수)의 체크박스를 지원합니다.- 카드 뷰 모드 내에서 마크다운 체크박스를 클릭하면, 텍스트 편집기에 진입할 필요 없이 즉시 체크 상태가 실시간으로 토글되며 상태와 DB에 안전하게 반영됩니다.
- StashBay 브랜드 컬러(녹색
accent-primary)와 둥근 모서리(rounded)가 결합되어 깔끔하게 디자인됩니다.
-
링크 (Links)
[링크 텍스트](url)형태로 외부 주소를 링크할 수 있습니다.- 호버 시 브랜드 호버 컬러(
hover:text-primary-hover)로 강조되며, 클릭 시 새 창에서 열리도록(target="_blank" rel="noopener noreferrer") 자동 처리됩니다.
-
인라인 코드 및 코드 블록
- 인라인 코드:
`code`와 같이 텍스트 사이에 삽입되는 코드는 연한 회색 배경 (bg-slate-100 px-1 py-0.5 rounded text-xs font-mono text-slate-800)으로 강조됩니다. - 코드 블록:
```를 통해 작성된 여러 줄의 코드 블록은 깔끔하게 래핑되어 가로 스크롤과 테두리가 적용됩니다 (bg-slate-50 p-2 rounded text-xs font-mono text-slate-800 overflow-x-auto my-1 border border-slate-100).
- 인라인 코드:
-
간결한 테이블 (GFM Tables)
- 테이블 마크다운을 지원하며, 좁은 가로 폭에 맞춰 조밀한 형태의 간결한 표로 자동 스타일링됩니다.
# 🚀 StashBay 작업 정리
이 포스트잇은 **마크다운**을 지원합니다. ~~지저분한 생각~~을 비워보세요!
## 할 일 (Task List)
- [x] 디자인 시스템 명세 검토
- [ ] `MarkdownRenderer` 테스트하기
## 목록 및 코드
1. **인라인 코드**: `npm install`
2. **코드 블록**:
```typescript
const main = () => {
console.log("StashBay");
};
```
## 링크 및 표
- [StashBay Repository](https://github.com/stashbay)
| 상태 | 항목 | 담당 |
| :--- | :--- | :--- |
| 완료 | 설계 | UIUX |
| 진행 | 구현 | 개발 |/
├── docs/ # 프로젝트 마스터플랜 및 개발 로드맵 문서
├── db/scripts/ # 데이터베이스 DDL 및 초기화 SQL 스크립트
├── src/
│ ├── components/ # UI 컴포넌트 (상향식 구조 적용)
│ │ ├── atoms/ # 가장 작은 단위 (Button, Input, Icon 등)
│ │ ├── molecules/ # 아톰의 조합 (DumpInputForm, CardHeader 등)
│ │ └── organisms/ # 도메인 컴포넌트 (StashBayBoard, TimelineZone, BayZone)
│ ├── lib/ # 유틸리티 (supabase.ts, crypto.ts)
│ ├── store/ # Zustand (authStore.ts, taskStore.ts)
│ └── App.tsx # 최상위 라우팅 및 AuthBoundary 래핑
프로젝트 루트 디렉토리에 있는 .env.example 파일을 복사하여 .env 파일을 생성하고, Supabase 관련 자격 증명을 설정합니다.
cp .env.example .envdb/scripts/init.sql 파일(생성 예정)의 DDL 스크립트를 Supabase SQL Editor에서 실행하여 테이블, Row Level Security(RLS), 함수 등을 세팅합니다.
# 의존성 패키지 설치
pnpm install
# 로컬 개발 서버 실행
pnpm dev
# 배포용 빌드
pnpm build- 종단간 암호화(End-to-End Encryption):
- 사용자가 로그인할 때 입력하는 비밀번호를 기반으로 Web Crypto API의 PBKDF2 알고리즘을 사용해 AES-GCM 암호화 키를 유도(Derive)합니다.
- 유도된 키는 세션 메모리(
authStore)에만 안전하게 보유하며LocalStorage나 외부 저장소에는 절대 영구 저장하지 않습니다. - 데이터베이스(
tasks테이블)에 저장되는 포스트잇 카드의 본문(Content)은 브라우저단에서 암호화된 후 적재되며, 데이터 조회 시 즉석에서 복호화되어 화면에 그려집니다.
- 주석 및 문서화: 모든 코드 주석, JSDoc, 명세 및 설명 문서화는 한국어로 작성합니다.
- Git 커밋 메시지:
Type: description형식을 준수하여 영어로 작성합니다.feat: implement drag and drop for task cardsfix: resolve double click handler on mobile chromedocs: add README and gitignore