🐭 Carryduo 설명해줘

롤 듀오 서칭 플랫폼

리그 오브 레전드를 혼자서 플레이 하는 것이 아닌 팀으로 움직이는 게임이고 친구들과 같이 게임을 플레이 할 수 있는 게임입니다. 우리는 해당 프로젝트를 만들면서 어떤 챔피언끼리 게임을 진행하면 승률이 더 높은지 그리고 각 챔피언의 상세 능력 , 유저의 전적 페이지와 각 라인 챔피언끼리 대전을 진행하면 누가 이기지는 미리 파악할 수 있는 가상 대전 시스템을 추가해 게임 친구를 만들 수 있는 롤 데이터 기반 유저 매칭 사이트라고 볼 수 있습니다.

프로젝트 인원과 기술 스택

프론트 1명, 백엔드 2명으로 프로젝트를 진행했고 프론트는 React 라이브러리의 프레임워크인 Next.js를 사용해 개발했고 백엔드는 Nest.js를 사용해 개발을 진행했습니다. 프론트의 상세 기술 스택에 관해 설명하겠습니다.

• Next.js
  기존 CSR 기반인 React 라이브러리가 아닌 pre-reloading을 통해 html과 css 파일을 먼저 다운 받아 사용자 경험에 더 최적화된 SSR 기반인 Next.js 프레임워크를 도입했고 그뿐만 아닌 HTML을 빌드 타임에 페이지별로 생성하고 해당 페이지로 요청이 올 때 이미 생성된 HTML 문서를 반환하는 SSG를 도입해 더 빠르게 페이지 구성을 진행했습니다.
• React-Query
  서버 상태 관리는 React-Query를 사용해 서버에서 받아오는 데이터를 더욱 쉽게 비동기 처리를 진행했습니다.
• Recoil
  테두리 색상이나 사이트 로컬 스트로지에 지속해서 담거나 과도한 prop drilling이 발생하는 클라이언트 데이터는 Recoil을 도입 atom 상태로 전역적인 상태 관리를 진행했습니다
• Tailwind CSS
  스타일은 Utility-First를 지향하는 CSS 프레임워크인를 사용했습니다
• Vercel
  Next.js 제공하는 배포플랫폼이고 CDN 서비스가 뛰어나고 배포 난이도도 쉽고 자동화 배포도 따로 추가 설정 없이 사용이 가능해 사용했다

🐭 간단하게 페이지 설명해줘

페이지 별 설명

페이지별 발생했던 이슈와 UI/UX 개선을 위해 어떤 부분을 고민했는지 포스팅을 나눠서 진행할 예정입니다. 아래 페이지 이름을 클릭하면 해당 페이지로 이동합니다.

메인페이지

챔피언 상세 페이지

유저 전적 페이지

가상 대전 페이지

설정 페이지