Piano Captcha (음주 코딩 방지 피아노 캡챠)

📝 개요

음주 상태에서의 코딩을 방지하기 위한 피아노 캡챠 라이브러리입니다.
화면에 랜덤으로 계이름이 표시되고, 사용자가 피아노 건반을 올바른 순서대로 눌러야 통과할 수 있습니다.

✨ 주요 기능

• 🎵 피아노를 누르면 개발자의 감미로운 목소리 재생
• 🎹 플로팅 형태의 피아노 건반 UI
• 🔄 랜덤한 음계 시퀀스 생성
• ⚡️ 실시간 입력 검증
• 🎯 시도 횟수 제한

🛠️ 기술 스택

• React + TypeScript
• 순수 CSS
• Vite

🔗 링크 모음

• 저장소: https://github.com/bedcoding/piano-captcha
• 패키지: https://www.npmjs.com/package/piano-captcha
• 미리보기: https://bedcoding.github.io/piano-captcha
• 예시코드: https://github.com/bedcoding/piano-captcha-sample.git

📦 설치 방법

npm install piano-captcha

yarn add piano-captcha

🚀 사용 방법

import { PianoCaptcha } from 'piano-captcha';

function App() {
  return (
    <PianoCaptcha
      onSuccess={() => console.log('성공!')}
      onFail={() => console.log('실패!')}
      onClose={() => console.log('닫기!')}
      noteCount={5}        // 표시될 음계 개수
      maxAttempts={3}      // 최대 시도 횟수
    />
  );
}

🎵 음성 파일

피아노 캡차는 다음과 같은 음성 파일을 사용합니다 ^^

파일명	음계
voice1.mp3	도
voice2.mp3	레
voice3.mp3	미
voice4.mp3	파
voice5.mp3	솔
voice6.mp3	라
voice7.mp3	시
voice8.mp3	도
voice9.mp3	레
voice10.mp3	미

📚 Props

Prop	Type	Required	Description
onSuccess	Function	Yes	캡차 성공 시 호출될 콜백 함수
onFail	Function	Yes	캡차 실패 시 호출될 콜백 함수
onClose	Function	No	캡차 닫기 시 호출될 콜백 함수
maxAttempts	Number	No	최대 시도 횟수 (기본값: 3)
noteCount	Number	No	표시될 음계 개수 (기본값: 3)

📄 라이센스

MIT License - see LICENSE for details.