choosetale / frontend Goto Github PK

사전 조건

• 페이지의 ID는 incremental index이다.
• 페이지 목록 출력 기준은 depth 기준이다.
• 기본적으로 정렬되어 반환될 예정이지만, 아닌 경우를 고려하여 정렬 기능을 추가할 것!

예시

• 게임에서 depth가 3인 페이지 id 20을 작성 후, depth 1의 새로운 페이지를 만든다면 페이지 id는 이전 페이지보다 크다.(page DB에서 증가하는 unique 값이기 때문에, 게임 내에서 순차적으로 증가하지 않음)
• 페이지 정렬: (1) depth 기준으로 정렬 (2) depth가 같다면 id 기준 정렬

에러 핸들링

• 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;
}

• apps/gamebuilder에서 작성한 /components/common과 /components/theme을 @repo/packages/ui로 이동하기
• 이후 apps/web과 게임 플레이 레포지토리(레포명 확정x)에서 재사용하기 위한 준비과정

• 유저가 썸네일을 업로드했을 때, response의 형태가 맞지 않아 오류 발생
• 오류 발생 위치: 서버 컴포넌트에서 클라이언트 컴포넌트로 response를 보낼 때 발생

NextButton 수정

• as is: 현재 페이지의 특정 seachParams를 다음 경로로 전달하기 위한 props 존재함
• to be: gameId parameter를 다음 경로로 전달하기 위해서, 현재 페이지의 특정 parameter를 다음 경로로 전달하는 props 추가하기

처음 기능을 구현할 때, 페이지 이동(submit)시에 game을 patch한다고 생각하여
client의 game 상태값만 변경하도록 로직이 잘못 짜여진 부분을 수정해야 합니다.

• 각 버튼 클릭 핸들러에 client 상태값 변경에 매치되는 API 요청을 추가합니다.
• API 요청 성공/실패에 따른 핸들링을 추가합니다.

useGameData 커스텀훅

• 페이지 추가: addPageData
• 페이지 수정: updatePageData
• 페이지 삭제: deletePageData
• 선택지 고정: addChoiceData
• 선택지 수정: updateChoicesData
• 선택지 삭제: deleteChoiceData

핸들러

• handleNewPage
• handleUpdatePage
• handleDeletePage
• handleAddChoiceByUser
• handleAddChoiceByAI
• handleFixChoice
• handleDeleteChoice

이미지 컴포넌트 리랜더링 => 퍼포먼스 이슈

• next build 시 오류 발생

• clientChoice를 생성 -> fix -> unFix를 진행했을 때
  자물쇠 아이콘이 아니라, 체크 아이콘으로 계속 표시되는 점 수정
• as is
  
• to be
  

• type 개선
• eslint 오류 너무 많음

테스트 케이스

• 메인 썸네일 선택 기능 필요
  

• DB의 선택지와, 사용자가 새로 추가한(아직 저장하지 않은) 선택지의 구분을 위해 source tag를 사용합니다.

  interface BaseChoice extends Choice {
    title: string;
    description: string;
    source: "server" | "client";
  }
  

• api 응답의 선택지 임에도 ChoiceCard가 무조건 fixed가 false인 상태로 나와서 props를 확인해보니,
  useGameData의 setGameWithSource에서 페이지에만 source를 추가하고 있는 점 확인
  • 선택지에도 source tag를 매핑하도록 함수를 수정하기

• 뒤로가기 후 다시 돌아오면 삭제된 이미지가 다시 나타나는 버그

7월 24일 회의사항

선택지에 연결되지 않은 페이지

• 선택지에 연결되지 않은 단독 페이지
  • depth는 -1이다.
• 사용자 입장에서 보았을 때, 현재 작업 중인 페이지라고 볼 수 있으므로, 화면 상단에 표기할 것
• 다만 첫 페이지와 혼동되지 않도록, 색상 혹은 크기를 pageCard와 다르게 할 필요성이 있다.
• 또한, 좌측 스토리라인에서는 분리되어 있는 모습으로 UI를 구현한다.

• UI 오류 수정 필요!

엔딩 페이지를 일반 페이지와 구분하여 표현할 것

체크포인트

• 경로 별칭
• 모노레포

아무 선택지에도 연결되지 않은 페이지를 새롭게 연결했을 때, 더 이상 미연결 페이지가 아니라 연결된 페이지로 표시되어야 합니다.

• 선택지를 업데이트 했을 때, 페이지 데이터의 업데이트가 필요합니다.

업데이트 조건 선택

1. 선택지를 추가/수정할 때마다 업데이트
2. 선택지를 추가/수정할 때, 미연결 페이지에 연결하는 경우를 확인하여 업데이트

업데이트 방식 선택

1. 페이지 데이터를 리패칭하여 업데이트한다.
2. 요청이 성공했다면 페이지가 연결되었다는 것이므로, 상태를 업데이트하고 리패칭하지 않는다.
3. 낙관적으로 상태를 변경하고, 리패칭하여 업데이트한다.

새 페이지 버튼 & 모달 추가하기

• 새 페이지 버튼
  • 사용자가 새 페이지 버튼을 클릭하는 경우, 모달창을 띄웁니다.
• 모달 창
  • 페이지 내용과 엔딩 페이지 여부를 입력하고 확인을 누르면, 미연결 페이지가 추가됩니다.

작성 중인 선택지에 "새 페이지" 기능 관련 필요

• 새 미연결 페이지를 생성합니다.
• 선택지의 연결된 페이지 select를 새 페이지로 변경합니다.
  • 연결된 페이지 select
    

as is: 작업 전

테스트 케이스

• AI 선택지 추가 시, 페이지의 선택지 총 개수 오류

오류 상황 예시

1. 선택지 2개
2. 선택지 추가 form 1개
3. AI 선택지 2개 (2번의 개수가 고려되지 않음)

• 일반 선택지 추가 시, 2번의 개수 고려됨
• form형태의 선택지까지 포함해서, 페이지의 선택지는 총 4개여야 합니다.
  

환경 변수 관련 오류

• 배포 시 오류 발생: private package를 설치하기 위한 .npmrc파일의 _authToken이 없어서 생기는 오류 해결 필요
  

레퍼런스 확인

레퍼런스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

• NPM_RC를 key로 하는 환경변수 추가하기 -- !!
  • 에러 해결됨👍
    

결론

공식문서의 해당 부분: 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=<토큰>

적용

• NPM_RC와 NPM_TOKEN 환경 변수가 있을 때, NPM_TOKEN도 유효한 값이지만, NPM_RC가 우선 적용된다.
  • (NPM_TOKEN은 스크린샷 저장 이후 삭제)
    
• vercel에서 NPM_RC를 참조해 .npmrc를 생성했으므로, pnpm install 실행 시, _authToken을 사용해 비공개 패키지가 포함된 devDependencies를 설치할 수 있습니다.
  

• 해당 선택지의 select만 업데이트하기
  

• handleClick에서 event.preventDefault();를 실행해서 sumbit 버튼이 동작하지 않는 버그
  

docs 업데이트 필요

• 페이지 삭제 (선택지와 함께 삭제)
• 페이지 삭제 컨펌

GameSubmitButton 링크 오류

• as is: /game/confirm
• to be: /game/confirm/{gameId}
• 현재 링크는 404
  

• 구분을 위한 dot이 페이지네이션 기능과 혼동될 수 있을 것으로 보이므로 라인으로 수정할 것
• 미연결 페이지 좌측 여백도 조정 필요
  

Todo

• socket.io-client 설치
• /game/{gameId}/page/{pageId}/recommend-choices api 업데이트 적용
• 소켓 연결 및 이벤트 구독
• 기능 확인

• 해당 경우가 발생하는 원인: 선택지에 연결된 페이지를 삭제함
• as is: 하단에 여백이 있음
  
• to be: "연결된 페이지가 없습니다" 표시

• AI 선택지 1~4개 배열
  • 추가 가능한 length
  • 배열 응답을 choices 상태에 추가