[email protected]으로 로그인하시면 회원 전용 메뉴인 Hold 페이지와 다른 메뉴들의 CRUD 기능을 사용하실 수 있습니다.

---

wodLog(크로스핏 박스 전용 웹 사이트)

• 사용 기술. React, TypeScript, Tanstack Query, Jotai, Supabase
• 작업 기간. 2024.03.20 ~ 2024.08.12
• 배포 링크. https://wodlog.vercel.app/
• 포트폴리오. https://lucky-damselfly-95a.notion.site/wodLog-0bdab5d26c97456280d77df9dd5bf295?pvs=4

프로젝트 소개.

실제 크로스핏 회원 경험을 바탕으로 느꼈던 불편함을 개선하기 위해 개발한 사이트입니다.
10개의 크로스핏 웹 사이트를 확인해보니 8개가 네이버 카페로 운영되고 있었으나, 이는 크로스핏 전용 사이트가 아니다 보니 이용에 불편함을 느껴 보다 좋은 전용 사이트를 만들겠다는 생각에 시작하게 되었습니다.

느꼈던 불편함.

1. 기록 순위 조회

• 크로스핏에서 경쟁은 빼놓을 수 없는 요소
• 그런 기록이 사진으로 등록되어 기록 순위 파악이 어려움
• 실수로 사진이 잘려서 올라가는 경우와 필체를 알아보기 힘든 경우도 존재

2. 1회성 방문에도 네이버 카페 가입

• 드랍인 같은 1회성 방문에도 카페 가입을 해야만 하는 경우가 존재

3. 회원권 일시정지(Hold)

• 일시정지 요청 글을 올리면 관리자 확인 후 잔여일을 알려주는 수동적인 시스템
• 신청 즉시 잔여일을 확인할 수 있으면 좋겠다고 생각
• 작성 페이지에 달력이 없어서 신청 시 한 번 더 확인해야 하는 번거로움
• 

자세한 구현 기능과 트러블 슈팅은 🔗포트폴리오 에서 확인하실 수 있습니다.

프로젝트 주요 메뉴 및 기능.

메뉴	접근 가능 사용자	기능
Notice	모든 사용자	Notice, WOD 공통 컴포넌트로 CRUD 작성 게시물 저장 방식을 HTML에서 Delta로 전환하여 보안 강화
WOD (오늘의 운동)	모든 사용자
Record	모든 사용자	OCR 라이브러리를 활용한 이미지 내 운동 기록 자동 추출 및 순위 자동 갱신 기능 구현
Hold (회원권 일시정지)	관리자, 회원	일요일과 공휴일을 제외한 실제 일시정지 일수를 동적으로 계산하는 로직 구현 공휴일 API를 활용하여 받아온 데이터를 Tanstack Query의 prefetchQuery로 백그라운드에서 미리 로드하여 사용자 경험 개선 및 서버 부하 감소
Login	모든 사용자	Kakao, Google 소셜 로그인

작업 내용.

메인화면	Notice
WOD	Record
Hold(회원권 일시정지) 등록	로그인