2022 11 14 스프린트 계획 회의

스프린트 목표, 데모 시나리오

필수 구현 사항

• 개발 환경이 모두 구축되고, 자동으로 Git 레포지토리가 NCloud 인스턴스에 배포되어야 한다.
• 메인 화면(/)에는 로고와 업로드 버튼이 보여져야 하고, 배경으로는 적절한 사각형과 적절한 카메라, 적절한 조명이 있는 Three.js 캔버스가 보여져야 한다.
• 메인화면의 업로드 버튼을 클릭하면 notion OAuth 버튼이 포함된 모달이 보여져야 하고, 클릭하면 notion 로그인 페이지로 넘어가야 한다.
• 노션 로그인이 완료되었으면 공간생성 확인페이지로 넘어가야 한다.
• 공간생성 확인화면(/create)에는 공간생성 버튼이 존재해야 하며, 클릭시 in-memory db에 있는 사용자의 액세스 토큰으로 불러온 노션의 게시글 데이터가 raw한 방식으로 보여져야 한다.
• 로그인이 이루어졌을 때 메인 페이지에 접속하면 업로드 버튼은 내 공간 이동 버튼으로 변경되어야 한다.

선택 구현 사항

• Redis를 연결하며, 로그인된 사용자가 1시간 뒤에는 자동으로 로그아웃이 되도록 만들어야 하다.
• 로그인되지 않은 상태에서 /create를 접근 시도하면 메인 화면으로 리다이렉트하고, /create 페이지에서 GET /space(POST /space로 변경 예정)를 직접 호출해도 인가가 거부되면 Notion 로그인 페이지로 넘어가져야 한다.
• 기간 선택, 테마 선택 컴포넌트가 공간생성 확인화면에 보여져야 한다.
• 클라이언트가 공간생성 버튼을 클릭하면 서버에서 1초 뒤 응답을 보내주도록 해야 하며, 기다리는 도중 클라이언트는 로딩 스피너를 보여줘야 한다.
• 개인화면(/space/test)에는 아무 오브젝트가 보여져야 하고, 플레이어가 이동/시점전환을 할 수 있어야 한다.(3주차로 넘어갈 수 있음)

각 일차 계획

1일차

개발 환경 파트는 페어프로그래밍(종찬-정욱-세연-기종) 방식으로 진행한다. 개발 환경은 모두가 알아야 하며, 하나가 끝나지 않으면 다른 것을 진행할 수 없으므로 페어프로그래밍으로 진행한다.

배포 환경 파트는 오퍼레이터 1명(세연), 내비게이터 3명 방식으로 진행한다. 배포 환경 설정 특성상 실제 NCloud 인스턴스를 유지할 수 있는 사람이 오퍼레이터를 하는 것이 더 적절하기 때문이다.

• ESLint 설정
• Vite 설정
• 바벨 설정
• scss 설정
• 타입스크립트 설정
• react-three/fiber 프로젝트 시작
• 캔버스에 3D 정육면체 띄우기
• 캔버스에 카메라 배치하기
• 캔버스에 조명 넣기
• express 서버 구축
• python 서버 구축
• python 서버-express 서버 통신
• mongoDB 인스턴스 생성
• mongoDB와 express 서버 연결
• nCloud 인스턴스 생성
• 깃허브 액션 등으로 자동배포 수행
• Docker 설정
• 쿠버네티스 설정
• Docker-쿠버네티스 연동

2일차

개발 환경 파트는 페어프로그래밍(정욱-세연-기종) 방식으로 진행한다. 하나가 끝나지 않으면 다른 것을 진행할 수 없으므로 페어프로그래밍으로 진행한다. 종찬님이 예비군이라 개발에는 면제된다.

• OAuth 버튼 컴포넌트 제작
• Notion OAuth 리다이렉션
• Notion에서 리다이렉트된 코드로 액세스 토큰을 받아옴
• 액세스 토큰으로 유저 정보를 불러옴
• 서버 변수에 id, 액세스 토큰 저장
• 인증 정보를 클라이언트에 넘겨주고 공간생성 페이지로 리다이렉트
• 공간생성 mock 화면 추가

3일차

각자 개별적으로 작업을 시작할 수 있으므로 개별적 프로그래밍으로 진행한다. 로그인 상태 저장 트랙, /create 라우팅 트랙의 담당자는 테스트를 위해 후반부에 협업하는 방식으로 진행한다.

• 클라이언트가 로그인 상태를 저장하게 변경
• 내 공간 이동 컴포넌트 버튼 제작
• 로그인된 상태에서 메인화면 업로드 버튼이 내 공간 버튼으로 변경
• 클라이언트 로그인 상태를 create.html에도 반영
• GET /create 라우팅
• 로그인된 사용자가 아닐 경우 /로 라우팅
• Redis 연결, 테스트
• 변수 로그인 데이터 저장을 Redis 로그인 데이터 저장으로 변경
• Redis에 저장된 값이 1시간 후에 만료되도록 설정
• space.html 페이지 생성
• 플레이어 방향키 이동
• 플레이어 1인칭 회전
• E키를 눌러 1인칭 시점회전 방식 변경
• E키를 눌러 UI 토글링

4일차

초반부는 개별적 프로그래밍으로, 후반부는 각 담당자끼리 모여서 협업 개발하는 방식으로 진행한다.

• 모달처럼 생긴 래퍼 컴포넌트 제작
• 공간생성 버튼 제작
• 요소선택 컴포넌트 제작(재사용 가능)
• 기간선택/테마선택 컴포넌트 제작
• 버튼이 공간선택 API를 호출하게 변경
• 기간선택/테마선택으로 선택한 값이 API 호출에 반영되도록 변경
• 로딩 프로그레스 애니메이션 제작
• Redis에 저장된 노션 액세스 토큰으로 사용자 글 데이터 불러오기
• 불러온 raw data를 API 요청의 응답으로 반환
• 만약 노션 액세스 토큰이 잘못되었거나 없으면 401 에러 등 반환
• 쿼리스트링으로 요청받은 추가 데이터를 반영하여 사용자 글 필터링
• 토스트 컴포넌트 제작
• 서버에서 에러를 반환했을 때 토스트 컴포넌트가 띄워지도록 변경