📌 Integration Requirements

🍎 시스템 구성도

⚙️ 시스템 구성도 ⚙️

🍌 요구사항 명세서

1. 시작 페이지

   • 로그인 버튼만 출력된다.

   • Oauth + 구글 로그인을 할 수 있다.

   • 로그인을 하면 2. 메인페이지 으로 이동한다.

2. 메인페이지

   • 전체 퍼즐 목록

     • 메인페이지는 api로 전체 퍼즐 검색 요청을 보내서 전체 퍼즐을 한번에 10개씩 무한 스크롤로 출력한다.

     • 디폴트 정렬 상태는 조회순으로 출력된다.

     • 메인페이지의 퍼즐 목록에서 퍼즐을 클릭하면 3. 플레이룸으로 이동한다.

   • 검색바

     • 검색바에 검색 키워드를 입력하면, api로 요청을 보내 해당 키워드를 가진 퍼즐 정보를 전체 퍼즐 목록에 가져온다.

   • 헤더

     • 마이페이지, 랭킹 버튼이 존재한다.

   • '+' 버튼

     • '+' 버튼을 누르면, 퍼즐 생성 페이지로 이동한다.

     • 퍼즐을 만들 이미지, 키워드, 난이도를 선택하고 submit 버튼을 누르면, 퍼즐을 생성하고 자신만이 사용할 수 있다.

3. 플레이룸

   • 플레이룸 중앙에 퍼즐판이 있고, 퍼즐판 주변에 퍼즐조각이 무작위로 있다.

   • 퍼즐을 드래그 앤 드롭 하여 옮길 수 있다.

   • 퍼즐이 맞추어지면 소리 이팩트가 발생한다.

   • 플레이룸 우측 하단의 플러스 버튼을 클릭하면 힌트버튼과 공유버튼이 존재한다.

   • 힌트버튼에 마우스를 올리면 힌트 사진이 출력된다.

   • 멀티모드

     • 공유버튼에 다른 유저가 참여가능한 플레이룸의 url이 클립보드에 복사된다.

     • 멀티모드를 기본으로 하며 링크 등을 통해 플레이룸에 입장 초대한다.

     • 퍼즐을 선점하여 들고 있는 유저에게 퍼즐 선택의 우선순위가 있다.

     • 초대 받은 사람은 로그인을 하기 위해서 시작 페이지로 우선 입장하게 한다.

     • 채팅으로 같은 플레이룸 안의 사람들과 소통한다.

   • 퍼즐이 완성되었을 때, 효과음과 알림창을 출력한다.

4. 마이페이지

   • 명예의 전당에서 완성한 퍼즐들의 사진과 플레이 타임을 조회할 수 있다.

   • 퍼즐저장소에서 자신이 만든 퍼즐들의 목록을 조회하고 플레이룸을 만들 수 있다.

5. 랭킹페이지

   • 전체 유저에서 퍼즐 완성된 개수 순으로 상위 10명을 출력한다.

   • 자신의 순위를 보여준다.

🥝 핵심 기능별 동작 흐름

1. Use-Case Diagram

2. Sequence Diagram

🍉 ERD

🍋 핵심 기술 요구사항

• 반드시 서버에서 제공하는 API 를 연동해서 구현해야 합니다. (웹)

• 외부 API 를 사용할 경우에도 개발하는 서버를 통해서 연동해야 합니다. (웹)

• API 로 가져오지 않은 별도 리소스(이미지, 영상 등)는 비동기로 처리합니다. (공통)

🔮 REST API 🔮

🍒 Milestone

1. 데이터베이스

   • ERD 구축

   • sequelize sql 연동

2. 시작페이지

   1. OAuth 로그인

      • google OAuth 등록, .env 생성

      • 프론트에 링크 달기

      • 패스포트 적용

      • 세션 연결

      • DB에 사용자 정보 저장

3. 퍼즐 생성

   • 이미지 업로드 기능

   • 이미지 타일 만들기

   • 퍼즐 자르기

   • 임의의 모양 만들기

   • DB에 퍼즐 정보 저장

4. 메인 페이지

   1. 퍼즐 검색 및 정렬

      • 퍼즐 get, post api 생성

      • 프론트 fetch로 api 호출 및 데이터 반환

      • 기준별 퍼즐 정렬

5. 퍼즐 맞추기

   1. 퍼즐 세팅

      • 퍼즐 조각 배치하기 (처음이면 무작위, 재방문시 이전 기록 로드)

   2. 퍼즐 이펙트

      • 퍼즐 조각 드래그 앤 드롭

      • 퍼즐 맞췄을 때 소리 삽입

   3. 퍼즐 완성시

      • 퍼즐 완성 후 나갈 때 플레이룸 삭제

      • 완성된 퍼즐 이미지 공유 가능

6. 저작권 프리 퍼즐 데이터 추가

   • 사진 저장 및 데이터베이스에 추가

7. 멀티 모드

   • 소켓 연동: 링크와 시작페이지 연결 후 로그인 완료되면 링크에 해당하는 플레이 룸으로 이동시키기

   • 채팅 기능(보이스로 변경 가능)

8. 마이페이지

   1. 생성된 퍼즐 (퍼즐저장소)

      • 생성된 퍼즐에서 링크 생성하여 복사하기 기능

   2. 완성한 퍼즐 (명예의 전당)

      • 완성한 퍼즐 사진과 플레이타임 열람 기능

      • 사진 다운로드 기능

      • 사진 공유 기능

9. 테스트 및 리팩토링

10. 배포

    • 서버 생성 및 고정 ip 할당

    • git 설정

    • mysql 설정

    • CORS 해결

    • NGINX

🍑 Gantt Chart

🍏 디자인

🧩 BMPuzzle 🧩

🍍 백로그