Skip to content

healim01/toaster

Repository files navigation

Toaster Booth

Toaster Booth는 웹캠을 이용해 네 컷의 사진을 찍고, 잼 필터와 다양한 프레임을 입혀 저장할 수 있는 재미있는 웹 서비스입니다. 토스터기로 사진을 ‘구워’보세요! 🍞📷

✨ 주요 기능

  • 📷 웹캠으로 네컷 사진 촬영 (타이머 포함)
  • 🧈 다양한 테마 프레임 적용 (기본 + 이벤트 전용 프레임)
  • 🍓 잼 필터 기능으로 감성 톤 연출
  • 💾 촬영한 사진 다운로드

🚀 둘러보기

👉 토스터 부스 바로가기

toaster

📖 관련 블로그 포스트

🍞 toaster: 헤일리의 웹캠네컷의 시작 ! ; 브라우저에서 카메라 사용부터 컴포넌트를 이미지로 변환 후 저장까지!
🥐 toaster: Rive를 사용해서 귀엽고 인터랙티브한 서비스 만들기
🍓 toaster: 네컷 사진이 사라졌다!? 새로고침을 견디는 상태 저장 여정

🛠️ 기술 스택

- React + TypeScript
- TailwindCSS
- Rive (애니메이션 인터랙션)
- IndexedDB (`idb-keyval`)
- React Context API (상태 관리)

🧑‍💻 제작자

  • 개발자 : 헤일리(최혜림)
  • 인터랙션 디자이너 : 리버(최재희)