frontend's Introduction
frontend's People
Forkers
dusunaxfrontend's Issues
feat(S1): 게임 빌딩 페이지 - 선택지 삭제
테스트 케이스 이름 | 설명 | 선 조건 | 단계 | 기대 결과 | 후 조건 | 우선순위 |
---|---|---|---|---|---|---|
게임 빌딩 페이지 - 선택지 삭제 (팝업 열기) | 선택지 삭제 시 경고 팝업이 나타나는지 확인한다. | 게임 빌딩 페이지 접근 및 선택지 고정 | 1. 선택지 삭제 버튼을 클릭한다. | 선택지 삭제 확인 팝업이 나타난다. | 사용자는 선택지 삭제를 진행할 수 있다. | high |
게임 빌딩 페이지 - 선택지 삭제 (팝업 닫기) | 선택지 삭제 팝업을 닫을 수 있는지 확인한다. | 선택지 삭제 팝업 열기 | 1. 팝업에서 아니오 버튼을 클릭한다. | 팝업이 닫힌다. | 사용자는 선택지 삭제 진행을 취소할 수 있다. | high |
게임 빌딩 페이지 - 선택지 삭제 성공 | 선택지 삭제를 성공적으로 수행할 수 있는지 확인한다. | 선택지 삭제 팝업 열기 | 1. 삭제 동의를 체크한다. 2. 삭제 버튼을 클릭한다. | 선택지가 삭제된다. | 사용자는 선택지 삭제를 완료할 수 있다. | high |
fix(S1): 게임 create 버튼 submit 동작 확인
feat(S1): AI 선택지 요청을 위한 소켓 연결
Todo
- socket.io-client 설치
/game/{gameId}/page/{pageId}/recommend-choices
api 업데이트 적용- 소켓 연결 및 이벤트 구독
- 기능 확인
feat(S1): 게임 정보 확인 페이지 - 게임 저장
테스트 케이스 이름 | 설명 | 선 조건 | 단계 | 기대 결과 | 후 조건 | 우선순위 |
---|---|---|---|---|---|---|
게임 정보 확인 페이지 - 게임 저장 성공 (공개) | 공개 게임 정보를 성공적으로 저장할 수 있는지 확인한다. | 게임 정보 입력 완료 | 1. 게임 정보 확인 페이지에서 게임을 저장한다. 2. 공개 여부를 선택한다. | 게임 제목, 소개, 장르, 썸네일, 공개 여부 정보가 저장되고 게임 저장 결과 페이지로 리디렉션 된다. | 공개 게임을 저장할 수 있다. | high |
게임 정보 확인 페이지 - 비공개 게임 저장 성공 | 비공개 게임 정보를 성공적으로 저장할 수 있는지 확인한다. | 게임 정보 입력 완료 | 1. 게임 정보 확인 페이지에서 게임을 저장한다. 2. 비공개 여부를 선택한다. | 게임 제목, 소개, 장르, 썸네일, 비공개 여부 정보가 저장되고 게임 저장 결과 페이지로 리디렉션 된다. | 비공개 게임을 저장할 수 있다. | high |
게임 정보 확인 페이지 - 게임 저장 실패 | 필수 정보를 입력하지 않아 게임 저장에 실패하는 경우 오류 메시지가 표기되는지 확인한다. | 게임 정보 입력 미완료 | 1. 게임 정보 확인 페이지에서 게임을 저장한다. | 필수 정보를 입력해야 하는 오류 메시지가 표시되고 리디렉션 되지 않는다. | 필수 정보를 입력하지 않으면 게임을 저장할 수 없다. | middle |
fix(S1): 미연결 페이지와 구분하는 UI 수정하기
feat(S1): 상단 네비게이션 기능
테스트 케이스
테스트 케이스 이름 | 설명 | 선 조건 | 단계 | 기대 결과 | 후 조건 | 우선순위 |
---|---|---|---|---|---|---|
상단 네비게이션 테스트 - 새 게임 생성 단계 | 새 게임 생성 단계에서 뒤로 가기와 앞으로 가기 버튼이 없는지 확인한다. | 없음 | 1. 새 게임 생성 단계로 이동한다. | 뒤로 가기와 앞으로 가기 버튼이 없다. | 상단 네비게이션을 통해 이동할 수 없다. | high |
상단 네비게이션 테스트 - 게임 빌딩 단계 | 게임 빌딩 단계에서 뒤로 가기 버튼은 없고 앞으로 가기 버튼이 있는지 확인한다. | 새 게임 생성 성공 | 1. 게임 빌딩 단계로 이동한다. | 뒤로 가기 버튼이 없고 앞으로 가기 버튼이 있다. | 상단 네비게이션을 통해 단계를 앞으로 이동할 수 있다. | high |
상단 네비게이션 테스트 - 게임 정보 확인 | 게임 정보 확인 단계에서 뒤로 가기 버튼은 있고 앞으로 가기 버튼이 없는지 확인한다. | 게임 빌딩 단계 완료 | 1. 게임 정보 확인 단계로 이동한다. | 뒤로 가기 버튼이 있고 앞으로 가기 버튼이 없다. | 상단 네비게이션을 통해 단계를 뒤로 이동할 수 있다. | high |
fix(S1): 선택지를 추가한 후, AI 선택지를 추가하는 경우 length
fix(S1): 이미지 삭제 이후 상태 업데이트
- 뒤로가기 후 다시 돌아오면 삭제된 이미지가 다시 나타나는 버그
feat(S1): 게임 빌딩 페이지 - 선택지 수정
테스트 케이스 이름 | 설명 | 선 조건 | 단계 | 기대 결과 | 후 조건 | 우선순위 |
---|---|---|---|---|---|---|
게임 빌딩 페이지 - 선택지 수정 (수정 버튼 클릭) | 선택지 수정 버튼 클릭 시 선택지가 form 형태로 변경되는지 확인한다. | 게임 빌딩 페이지 접근 및 선택지 고정 | 1. 선택지 수정 버튼을 클릭한다. | 선택지가 form 형태로 변경되고 완료/취소 버튼이 나타난다. | 사용자는 선택지 데이터 수정을 진행할 수 있다. | high |
게임 빌딩 페이지 - 선택지 수정 완료 | 선택지 수정 완료 버튼 클릭 시 수정된 선택지가 반영되는지 확인한다. | 선택지 수정 버튼 클릭 | 1. 선택지를 수정한다. 2. 완료 버튼을 클릭한다. | 수정된 선택지가 화면에 반영된다. | 사용자는 선택지 데이터 수정을 완료할 수 있다. | high |
게임 빌딩 페이지 - 선택지 수정 취소 | 선택지 수정 취소 버튼 클릭 시 수정한 내용이 반영되지 않는지 확인한다. | 선택지 수정 버튼 클릭 | 1. 선택지를 수정한다. 2. 취소 버튼을 클릭한다. | 수정한 내용이 사라지고 이전 선택지가 그대로 유지된다. | 사용자는 선택지 데이터 수정 진행을 취소할 수 있다. | high |
fix(S1): 선택지에 빠트린 `source` tagged union 추가
![](https://private-user-images.githubusercontent.com/94776135/352763673-f9cab91b-abf2-4442-99b4-de0314efc6fa.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5NzA1NzUsIm5iZiI6MTcyNTk3MDI3NSwicGF0aCI6Ii85NDc3NjEzNS8zNTI3NjM2NzMtZjljYWI5MWItYWJmMi00NDQyLTk5YjQtZGUwMzE0ZWZjNmZhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEwVDEyMTExNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTdkOGMwYWEzNWUyOGI4Zjg4MjAxNDMzZmRhNGEzMWZhZDgzNDEzMDIzYTFkNmEwMzc0MWNhNzIzNmMyMWQyNWUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.6_WrRJu5nLN8p2lUTUNCoAxd8S-sTBMTI-Sq8bAY14k)
- DB의 선택지와, 사용자가 새로 추가한(아직 저장하지 않은) 선택지의 구분을 위해
source
tag를 사용합니다.interface BaseChoice extends Choice { title: string; description: string; source: "server" | "client"; }
- api 응답의 선택지 임에도 ChoiceCard가 무조건 fixed가 false인 상태로 나와서 props를 확인해보니,
useGameData의 setGameWithSource에서 페이지에만source
를 추가하고 있는 점 확인- 선택지에도
source
tag를 매핑하도록 함수를 수정하기
- 선택지에도
feat(S1): 게임 빌딩 페이지 - 게임 정보 가져오기
테스트 케이스 이름 | 설명 | 선 조건 | 단계 | 기대 결과 | 후 조건 | 우선순위 |
---|---|---|---|---|---|---|
게임 빌딩 페이지 - 게임 정보 가져오기 성공 (최초 생성 시) | 새로 생성한 게임의 정보를 가져올 수 있는지 확인한다. | 새 게임 생성에 성공한 이후여야 한다. | 1. 게임 빌딩 페이지로 이동한다. | 생성 단계에서의 게임 상태값이 출력된다. | 첫 페이지가 목록에 나타난다 | high |
게임 빌딩 페이지 - 게임 정보 가져오기 성공 (데이터 업데이트) | 게임 ID의 정보를 가져올 수 있는지 확인한다. | 게임을 수정할 수 있어야 한다. | 1. 게임 빌딩 페이지로 이동한다. 2. 게임 ID로 요청한다. |
게임 ID로 요청한 API 응답 데이터가 출력된다. | 게임 ID에 해당하는 빌딩 데이터가 목록에 나타난다 | high |
게임 빌딩 페이지 - 게임 정보 가져오기 실패 (잘못된 페이지 접근) | ID가 없는 잘못된 페이지 접근 시 오류 페이지로 이동하는지 확인한다. | 없음 | 1. 잘못된 페이지 접근 (params에 ID가 없음). | 사용자에게 notFound 페이지가 출력 된다. | 유효하지 않은 URL로 게임 빌딩 페이지에 접근할 수 없다. | high |
게임 빌딩 페이지 - 게임 정보 가져오기 실패 (잘못된 게임 ID) | 잘못된 게임 ID로 접근 시 오류 페이지로 이동한다. | 없음 | 1. 잘못된 게임 ID로 게임 빌딩 페이지에 접근한다. | 사용자에게 오류 페이지가 출력 된다. | 유효하지 않은 ID로 게임 빌딩 페이지에 접근할 수 없다. | high |
feat(S1): 게임 빌딩 페이지 - 선택지 고정
테스트 케이스 제목 | 설명 | 사전 조건 | 테스트 단계 | 기대 결과 | 확인 사항 | 우선순위 |
---|---|---|---|---|---|---|
게임 빌딩 페이지 - 선택지 고정 (일반 선택지 고정 성공) | 필수 입력값을 입력한 후, 일반 선택지를 고정할 수 있는지 확인한다. | 게임 빌딩 페이지 접근 및 일반 선택지 생성 | 1. 제목, 내용, 연결할 페이지를 입력한다. 2. 일반 선택지 고정 버튼을 클릭한다. |
선택지가 고정되고, 연결된 페이지가 화면에 나타난다. | 사용자는 선택지가 고정된 것을 알 수 있다. | high |
게임 빌딩 페이지 - 선택지 유효성 검사 (일반 선택지 고정 실패) | 필수 입력값이 누락되었다면, 일반 선택지를 고정할 수 없는지 확인한다. | 게임 빌딩 페이지 접근 및 일반 선택지 생성 | 1. 일반 선택지 고정 버튼을 클릭한다. | 선택지가 고정되지 않고, 누락된 폼의 필수 입력 인풋에 포커스 된다. | 사용자는 필수 입력값을 전부 입력하지 않으면, 선택지를 고정할 수 없다. | high |
게임 빌딩 페이지 - 선택지 고정 (AI 추천 선택지 고정 성공) | AI 추천 선택지를 고정할 수 있는지 확인한다. | 게임 빌딩 페이지 접근 및 AI 추천 선택지 생성 | 1. AI 추천 선택지 고정 버튼을 클릭한다. | 선택지가 고정되고, 연결된 페이지가 화면에 나타난다. | 사용자는 선택지가 고정된 것을 알 수 있다. | high |
게임 빌딩 페이지 - 선택지 고정 유효성 검사 (AI 추천 선택지 고정 실패) | 필수 입력값이 누락되었다면, AI 추천 선택지를 고정할 수 없는지 확인한다. | 게임 빌딩 페이지 접근 및 AI 추천 선택지 생성 | 1. AI 선택지 고정 버튼을 클릭한다. | 선택지가 고정되지 않고, 누락된 폼의 필수 입력 인풋에 포커스 된다. | 사용자는 필수 입력값을 전부 입력하지 않으면, 선택지를 고정할 수 없다. | high |
feat(S1): 페이지 추가
feat(S1): 게임 빌딩 페이지 - 페이지 엔딩 결정
테스트 케이스 이름 | 설명 | 선 조건 | 단계 | 기대 결과 | 후 조건 | 우선순위 |
---|---|---|---|---|---|---|
게임 빌딩 페이지 - 페이지 엔딩 결정 성공 | 페이지를 엔딩 페이지로 성공적으로 결정할 수 있는지 확인한다. | 게임 빌딩 페이지 접근 및 엔딩 페이지가 아님 | 1. 페이지 엔딩 결정 버튼을 클릭한다. | 엔딩 페이지로 표시되고 선택지 생성 버튼이 비활성화 된다. | 엔딩 페이지로 표시된다. | high |
게임 빌딩 페이지 - 페이지 엔딩 결정 취소 | 엔딩 페이지 결정을 취소할 수 있는지 확인한다. | 게임 빌딩 페이지 접근 및 엔딩 페이지 | 1. 엔딩 페이지 결정 취소 버튼을 클릭한다. | 일반 페이지로 표시되고 선택지 생성 버튼이 활성화 된다. | 일반 페이지로 표시된다. | high |
feat(S1): 게임 빌딩 페이지 - 페이지 수정 날짜 표기
fix(S1): clientChoice의 수정 아이콘
feat(S1): 엔딩 페이지 UI
엔딩 페이지를 일반 페이지와 구분하여 표현할 것
feat(S1): 게임 장르 한글 매핑
fix(S1): `@apps/game-builder` 빌드 시 `@packages/ui` 내 모듈을 찾을 수 없음
fix(S1): 유저 이미지 업로드 이후 발생하는 에러 확인
feat(S1): 새 게임 생성
테스트 케이스
테스트 케이스 이름 | 설명 | 선 조건 | 단계 | 기대 결과 | 후 조건 | 우선순위 |
---|---|---|---|---|---|---|
새 게임 생성 성공 | 새 게임을 성공적으로 생성할 수 있는지 확인한다. | 없음 | 1. 새 게임 생성 페이지에서 필수 정보를 입력한다. 2. 게임 생성 버튼을 클릭한다. |
게임 ID와 함께 글 작업 페이지로 리디렉션 된다. | 게임 생성에 성공한다. | high |
새 게임 생성 실패 | 새 게임 생성 시 유효성 검사를 통과하지 못하면 메시지가 표기되는지 확인한다. | 없음 | 1. 새 게임 생성 페이지에서 필수 정보를 입력하지 않는다. 2. 게임 생성 버튼을 클릭한다. |
유효성 검사 실패 메시지가 표기되고 리디렉션 되지 않는다. | 필수 정보 없이 게임을 생성할 수 없다. | middle |
fix(S1): 미연결 페이지를 연결 후 UI 업데이트
아무 선택지에도 연결되지 않은 페이지를 새롭게 연결했을 때, 더 이상 미연결 페이지
가 아니라 연결된 페이지
로 표시되어야 합니다.
- 선택지를 업데이트 했을 때, 페이지 데이터의 업데이트가 필요합니다.
업데이트 조건 선택
- 선택지를 추가/수정할 때마다 업데이트
- 선택지를 추가/수정할 때, 미연결 페이지에 연결하는 경우를 확인하여 업데이트
업데이트 방식 선택
- 페이지 데이터를 리패칭하여 업데이트한다.
- 요청이 성공했다면 페이지가 연결되었다는 것이므로, 상태를 업데이트하고 리패칭하지 않는다.
- 낙관적으로 상태를 변경하고, 리패칭하여 업데이트한다.
refactor(S1): 공용 컴포넌트와 테마 컴포넌트를 `packages/ui` 레포지토리로 이동
apps/gamebuilder
에서 작성한/components/common
과/components/theme
을@repo/packages/ui
로 이동하기- 이후
apps/web
과게임 플레이 레포지토리(레포명 확정x)
에서 재사용하기 위한 준비과정
feat(S1): 게임 빌딩 페이지 - 페이지 수정
테스트 케이스 이름 | 설명 | 선 조건 | 단계 | 기대 결과 | 후 조건 | 우선순위 |
---|---|---|---|---|---|---|
게임 빌딩 페이지 - 페이지 수정 (서랍 열기) | 페이지 수정 서랍을 열 수 있는지 확인한다. | 게임 빌딩 페이지 접근 | 1. 페이지 수정 버튼을 클릭한다. | 해당 페이지의 내용을 기본값으로 하는 form 형태의 서랍이 열린다. | 사용자는 페이지 데이터 수정을 진행할 수 있다. | high |
게임 빌딩 페이지 - 페이지 수정 (서랍 닫기) | 페이지 수정 서랍을 닫을 수 있는지 확인한다. | 페이지 수정 서랍 열기 | 1. 서랍 닫기 버튼을 클릭한다. | 서랍이 닫히고 게임 빌딩 데이터 변경이 일어나지 않는다. | 사용자는 페이지 데이터 수정 진행을 취소할 수 있다. | middle |
게임 빌딩 페이지 - 페이지 수정 성공 | 페이지 수정이 성공적으로 반영되는지 확인한다. | 페이지 수정 서랍 열기 | 1. 페이지 내용을 수정한다. 2. 수정 완료 버튼을 클릭한다. | 서랍이 닫히고 수정된 페이지 내용이 게임 빌딩 목록에 반영된다. | 사용자는 페이지 데이터 수정을 완료할 수 있다. | high |
게임 빌딩 페이지 - 페이지 수정 실패 | 페이지 수정 시 유효성 검사를 통과하지 못하면 메시지가 표기되고 서랍이 유지되는지 확인한다. | 페이지 수정 서랍 열기 | 1. 페이지 내용을 수정한다. 2. 수정 완료 버튼을 클릭한다. | 유효성 검사 실패 메시지가 표기되고 서랍이 유지된다. | 유효한 페이지 데이터가 아니라면 수정을 진행할 수 없다. | middle |
refactor(S1): `gameId` parameter 전달을 위한 NextButton 수정
NextButton 수정
- as is: 현재 페이지의 특정 seachParams를 다음 경로로 전달하기 위한 props 존재함
- to be:
gameId
parameter를 다음 경로로 전달하기 위해서, 현재 페이지의 특정 parameter를 다음 경로로 전달하는 props 추가하기
fix(S1): AI 선택지 생성 이후 발생하는 setState 에러 확인하기
feat(S1): 게임 빌딩 페이지 - 선택지에 연결된 페이지 제목 UI 개선
feat(S1): 연결된 페이지가 없는 fix된 선택지의 UI 추가
feat(S1): 게임 정보 확인 페이지 - AI 추천 썸네일 생성
테스트 케이스 이름 | 설명 | 선 조건 | 단계 | 기대 결과 | 후 조건 | 우선순위 |
---|---|---|---|---|---|---|
게임 정보 확인 페이지 - AI 추천 썸네일 생성 성공 | AI가 추천한 썸네일 이미지를 성공적으로 추가할 수 있는지 확인한다. | AI 추천 썸네일 페이지 접근 | 1. AI 추천 썸네일 생성 버튼을 클릭한다. 2. 대기중 UI가 표시된다. 3. AI 이미지 생성이 완료된 후 화면에 나타난다. | 생성된 이미지가 썸네일 슬라이드에 추가되고 해당 이미지가 표시된다. | 이미지를 생성할 수 있다. | high |
feat(S1): 게임 빌딩 페이지 - 페이지에 AI 선택지 추가 요청
테스트 케이스 이름 | 설명 | 선 조건 | 단계 | 기대 결과 | 후 조건 | 우선순위 |
---|---|---|---|---|---|---|
게임 빌딩 페이지 - 페이지에 선택지 추가 (AI 추천 선택지 생성 성공) | 페이지에 AI 추천 선택지를 성공적으로 추가할 수 있는지 확인한다. | 게임 빌딩 페이지 접근 | 1. AI 추천 선택지 생성 버튼을 클릭한다. | 텍스트 형태의 추천 선택지가 선택지란의 가장 하단에 추가된다. | 선택지를 추가할 수 있다. | high |
- AI 선택지 1~4개 배열
- 추가 가능한 length
- 배열 응답을 choices 상태에 추가
feat(S1): 게임 정보 확인 페이지 - 썸네일 삭제
테스트 케이스 이름 | 설명 | 선 조건 | 단계 | 기대 결과 | 후 조건 | 우선순위 |
---|---|---|---|---|---|---|
게임 정보 확인 페이지 - 썸네일 삭제 성공 | 썸네일 이미지를 성공적으로 삭제할 수 있는지 확인한다. | 썸네일 이미지 추가 | 1. 썸네일 삭제 버튼을 클릭한다. 2. 팝업에서 예를 클릭한다. | 슬라이드에 나타난 해당 썸네일 이미지가 삭제된다. | 이미지가 영구히 삭제된다. | high |
게임 정보 확인 페이지 - 썸네일 삭제 취소 | 썸네일 이미지 삭제 팝업에서 삭제를 취소할 수 있는지 확인한다. | 썸네일 삭제 팝업 열기 | 1. 팝업에서 아니오를 클릭한다. | 팝업이 닫힌다. | 삭제 진행을 취소한다. | high |
fix(S1): 썸네일 업로드 오류
- 유저가 썸네일을 업로드했을 때, response의 형태가 맞지 않아 오류 발생
- 오류 발생 위치: 서버 컴포넌트에서 클라이언트 컴포넌트로 response를 보낼 때 발생
chore: type 및 eslint 오류 해결
- type 개선
- eslint 오류 너무 많음
fix(S1): private package와 Vercel 환경 변수, `.npmrc`
환경 변수 관련 오류
레퍼런스 확인
레퍼런스A: NPM_TOKEN 환경 변수 추가하기
공식문서: https://vercel.com/guides/using-private-dependencies-with-vercel
- vercel에서 .npmrc를 생성: NPM_TOKEN 환경변수를 추가함
- These authorization settings을 찾을 수 있으나, 401 에러
- 값은 정확한 것으로 보임
These authorization settings were found: //registry.npmjs.org/:_authToken=xxx_[hidden] // 앞자리 일치함
레퍼런스B: NPM_RC를 key로 하는 환경변수 추가하기
이슈 확인: vercel/vercel#3728
결론
공식문서의 해당 부분: https://vercel.com/guides/using-private-dependencies-with-vercel#other-package-registries
- vercel에서 .npmrc를 생성할 때 환경변수를 사용합니다.
- NPM_TOKEN key로 _authToken를 설정합니다.
- NPM_RC 변수가 있다면, 우선으로 적용됩니다.
.npmrc
의 값을 그대로 NPM_RC 환경변수의 value로 작성
registry=https://registry.npmjs.org @<패키지명>:registry=https://npm.pkg.github.com //npm.pkg.github.com/:_authToken=<토큰>
적용
fix(S1): 선택지에서 페이지 추가 후, 해당 선택지의 select의 option만 업데이트할 것
refactor(S1): 개별 핸들러 내 API 요청
처음 기능을 구현할 때, 페이지 이동(submit)시에 game을 patch한다고 생각하여
client의 game 상태값만 변경하도록 로직이 잘못 짜여진 부분을 수정해야 합니다.
- 각 버튼 클릭 핸들러에 client 상태값 변경에 매치되는 API 요청을 추가합니다.
- API 요청 성공/실패에 따른 핸들링을 추가합니다.
useGameData 커스텀훅
- 페이지 추가: addPageData
- 페이지 수정: updatePageData
- 페이지 삭제: deletePageData
- 선택지 고정: addChoiceData
- 선택지 수정: updateChoicesData
- 선택지 삭제: deleteChoiceData
핸들러
- handleNewPage
- handleUpdatePage
- handleDeletePage
- handleAddChoiceByUser
- handleAddChoiceByAI
- handleFixChoice
- handleDeleteChoice
feat(S1): 메인 썸네일 선택
fix(S1): 선택지를 추가했을 때 가로 스크롤이 생깁니다.
fix(S1): next build 시 ReferenceError 발생
feat(S1): 게임 빌딩 페이지 - 페이지에 일반 선택지 추가
테스트 케이스 이름 | 설명 | 선 조건 | 단계 | 기대 결과 | 후 조건 | 우선순위 |
---|---|---|---|---|---|---|
게임 빌딩 페이지 - 페이지에 선택지 추가 (일반 선택지 생성 성공) | 페이지에 일반 선택지를 성공적으로 추가할 수 있는지 확인한다. | 게임 빌딩 페이지 접근 | 1. 일반 선택지 생성 버튼을 클릭한다. | form 형태의 일반 선택지가 선택지란의 가장 하단에 추가된다. | 선택지를 추가할 수 있다. | high |
게임 빌딩 페이지 - 페이지에 선택지 추가 (일반 선택지 생성 실패) | 총 선택지가 4개를 초과하면 일반 선택지 생성 버튼이 숨겨지는지 확인한다. | 게임 빌딩 페이지 접근 및 선택지 4개 초과 | 1. 일반 선택지 생성 버튼을 클릭한다. | 선택지 생성 버튼이 숨겨진다. | 최대 개수를 초과하면 선택지를 추가할 수 없다. | high |
게임 빌딩 페이지 - 페이지에 선택지 추가 (AI 추천 선택지 생성 실패) | 총 선택지가 4개를 초과하면 AI 추천 선택지 생성 버튼이 숨겨지는지 확인한다. | 게임 빌딩 페이지 접근 및 선택지 4개 초과 | 1. AI 추천 선택지 생성 버튼을 클릭한다. | 선택지 생성 버튼이 숨겨진다. | 최대 개수를 초과하면 선택지를 추가할 수 없다. | high |
refactor(S1): api response 에러핸들링 미들웨어
에러 핸들링
- api 응답이 HttpError가 아닌, 에러인 객체 형태로 오는 경우의 statusCode 예외처리 <- 모든 액션에 일괄 적용할 수 있는 방안 모색(미들웨어)
- 에러 코드별 적용 (일단 404에 적용)
- 예시 케이스 (서버 액션)
try {
const response = await fetch(`${API_URL}/game/${gameId}/choice`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(choiceData),
});
const choiceRes = (await response.json()) as
| CreateChoiceResDto
| ApiErrorResponse;
if ("statusCode" in choiceRes) {
throw new Error(choiceRes.message);
}
return { success: true, choice: choiceRes };
} catch (error) {
return { success: false, error: error as HttpError };
}
- 해당 타입
interface ApiErrorResponse {
statusCode: number;
message: string;
error: string;
}
feat(S1): 게임 정보 확인 페이지 - 썸네일 업로드
테스트 케이스 이름 | 설명 | 선 조건 | 단계 | 기대 결과 | 후 조건 | 우선순위 |
---|---|---|---|---|---|---|
게임 정보 확인 페이지 - 썸네일 업로드 성공 | 사용자가 업로드한 썸네일 이미지를 성공적으로 추가할 수 있는지 확인한다. | 썸네일 업로드 페이지 접근 | 1. 썸네일 이미지를 업로드한다. | 업로드한 이미지가 썸네일 슬라이드에 추가되고 해당 이미지가 표시된다. | 이미지를 업로드할 수 있다. | high |
게임 정보 확인 페이지 - 썸네일 업로드 혹은 생성 실패 | 최대 이미지 개수를 초과한 경우 버튼이 비활성화 되는지 확인한다. | 썸네일 이미지 최대 개수 초과 | 1. 썸네일 이미지를 업로드하거나 AI 추천 썸네일 생성 버튼을 클릭한다. | 버튼이 비활성화되고 최대 이미지 개수 안내 메시지가 표시된다. | 썸네일 이미지는 최대 개수를 초과할 수 없다. | high |
feat(S1): 게임 빌딩 페이지 - 페이지 삭제
docs 업데이트 필요
- 페이지 삭제 (선택지와 함께 삭제)
- 페이지 삭제 컨펌
fix(S1): 게임 썸네일 이미지 403 오류 확인
feat(S1): 게임 빌딩 페이지 - 선택지에 연결되지 않은 페이지
refactor(S1): depth 기준 페이지 목록 정렬
사전 조건
- 페이지의 ID는 incremental index이다.
- 페이지 목록 출력 기준은 depth 기준이다.
- 기본적으로 정렬되어 반환될 예정이지만, 아닌 경우를 고려하여 정렬 기능을 추가할 것!
예시
- 게임에서 depth가 3인 페이지 id 20을 작성 후, depth 1의 새로운 페이지를 만든다면 페이지 id는 이전 페이지보다 크다.(page DB에서 증가하는 unique 값이기 때문에, 게임 내에서 순차적으로 증가하지 않음)
- 페이지 정렬: (1) depth 기준으로 정렬 (2) depth가 같다면 id 기준 정렬
refactor(S1): 글 입력할 때, 컴포넌트 리랜더링 확인 (이미지 관련 메모이제이션)
이미지 컴포넌트 리랜더링 => 퍼포먼스 이슈
fix(S1): GameSubmitButton 링크 오류
feat(S1): 썸네일 onLoading UI 추가
feat(S1): 게임 정보 확인 페이지 - 정보 가져오기
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.