📌 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

🍍 백로그