HANDTRIS - 핸드모션 테트리스

• GITHUB : https://github.com/HandTris
• 기술스택 : Figma, Next.js , framer-motion,stompjs, tailwindcss, shadcn/ui
• 간단 플레이 영상 : https://youtu.be/dDVkKezJR-k

업무 및 기여

• @tanstack/query - 게임방 데이터실시간 상태 관리 및 비동기 요청 최적화
• formik,yup - 로그인 유효성 검증 폼 구현
• 테트리스 게임 로직 구현 기여 (블록 회전 및 낙하, 고스트블록 Canvas api 활용)
• UI/UX 디자인 전담 (Figma 디자인 , Tailwindcss 활용)
• 트러블슈팅 및 안정성 강화
  • beforeunload 이벤트를 활용, 플레이어 탈주 시 소켓 연결해제 로직 추가

방 목록 및 이벤트 배너

게임 대기방 UI

게임 화면

손 인식 관련 예외처리

게임 페이지 - 게임 결과

게임 중 탈주 처리 - beforeunloaded

useEffect(() => {
    const roomCode = getRoomCode();
    const handleBeforeUnload = () => {
      if (wsManagerRef.current && wsManagerRef.current.connected) {
        wsManagerRef.current.sendMessageOnDisconnecting(
          {},`/app/${roomCode}/disconnect`,isStart,
        );
        wsManagerRef.current.disconnect();
      }};
    window.addEventListener("beforeunload", handleBeforeUnload);
    return () => {
      window.removeEventListener("beforeunload", handleBeforeUnload);
    }}, [isStart]);

• 브라우저 창 종료 시 상대방에게 자동으로 disconnect 메시지 전송
• 웹소켓 연결 안전하게 해제
• 상대 플레이어의 게임 종료 감지 및 승리 처리 로직 구현

CFS 쿠팡풀필먼트 서비스 청년 일경험 인턴 프론트엔드 개발

업무 - 기여