📌 Integration Requirements

🍎 시스템 구성도(C4 Model)

프레젠테이션1.pptx

🍌 요구사항 명세서

1. 시작 페이지

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

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

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

2. 메인페이지

   1. 전체 퍼즐 목록

      • 메인페이지는 api로 전체 퍼즐 검색 요청을 보내서 전체 퍼즐을 한번에 10개씩 보여준다.

      • 10개씩 출력된 상태에서 스크롤을 더 내린다면 다른 퍼즐 10개를 출력한다.

      • 모든 퍼즐을 출력하였다면 처음의 퍼즐 목록 10개를 다시 출력하고 이를 반복한다.

      • 디폴트 정렬 상태는 플레이 횟수순이다.

      • 체크박스 선택을 통해 난이도별 목록을 필터링할 수 있다.

   2. 검색바

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

   3. 헤더

      • 마이페이지 버튼이 출력된다

3. 플레이룸

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

   • 초대 받은 사람은 시작 페이지로 우선 입장

   • 보이스 or 채팅으로 같은 플레이룸 안의 사람들과 소통

   • 퍼즐이 완성되었을 때, 플레이룸이 사라짐

4. 마이페이지

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

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

5. 랭킹페이지

   1. 랭킹에서 가장 많이 퍼즐을 완성한 사람과 만든 사람을 확인할 수 있다.

6. 퍼즐 생성

   • 난이도 조정은 피스 수를 기준으로 한다.

   • 퍼즐 생성 후 마이페이지의 퍼즐 저장소에 사진 url이 저장된다.

🥝 핵심 기능별 동작 흐름

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

🍑 Gant Chart

🍏 디자인

🧩 BMPuzzle 🧩

🍍 백로그