피파온라인4 유저들을 위한 전적검색 사이트

게임을 좋아하는 팀원들끼리 공통 관심분야인 게임 커뮤니티를 만들고 싶었고 리그오브레전드의 op.gg 사이트를 모티브로 하여 유저들간의 전적과 랭킹을 조회하는 시스템을 넥슨 openAPI를 사용하여 기획했습니다

• 최근 전적 조회 기능 구단주 이름을 검색해서 경기결과,승률,포메이션을 제공합니다

• 공식 경기 랭킹 조회 기능 상위 실력유저의 공식경기 점수와 전적,승률을 제공합니다

• 모바일 반응형 웹 구현 모바일 환경에서 심플한 UI디자인을 만들었습니다

• 전적 검색 (검색한 유저의 최근 경기기록 조회)
• 전적 상세 조회 (각 경기의 mvp선수, 포메이션 제공)
• 유저 랭킹

|--- common : props가 복잡하지 않는 여러 도메인(페이지)에서 재사용되는 컴포넌트
|--- {domain} : fiondb.vercel.app/{domain}에서만 주로 사용되는 컴포넌트 (매치기록박스 , ...)

• React Hooks를 이용하여 직접 상태를 관리하고 반환하는 함수
• 직접적으로 React Hooks를 이용하진 않지만 다른 라이브러리의 커스텀 훅(useQuery, useMutate)을 이용하는 함수
• hooks/query/{fileName}.tsx : ReactQuery를 의존하고 있는 custom hooks

• 도메인과 밀접한 유틸함수들을 위치시키면 어떨까요? ex) API 호출을 통해 응답 받은 복잡한 JSON 데이터와 밀접한 로직들

• 도메인에 의존하지 않는 재사용성이 높은 유틸 함수들 ex) 날짜, 시간, 문자열 변환 등

|
|-- {pageName}/index.tsx : 리소스, 파라미터가 꼭 필요한 경우 리다이렉팅 되는 페이지 (404의 역할을 함)
|-- {pageName}/[id].tsx : id 값등 추가적인 파라미터가 필요한 페이지의 실질적인 렌더링을 담당하는 부분(SSR 을 적용할 수 있음)
|-- {pageName}/[...id].tsx : 아직 사용되지 않음( 정리 x )

• 외부 api 요청을 보내는 fetch 함수들 (axios를 사용)
• 추후에 Next.js의 API Routes를 적용하여 end point, api key 등을 hide 할 계획이 있음

• 복잡한 객체 데이터의 타입을 정의하고 export 하는 부분 (API ResponseType, ...)
• 적어도 3번 이상 공유되는 타입들을 모아놓으려고 계획중
• 그외 type은 사용되는 파일 내에 위치시켜 사용할 예정