뜯

src /

app / : next.js 페이지와 라우팅하는 폴더 및 파일

api / rotation / route.ts : 서버 측에서 데이터를 가져오고 클라이언트에 전달하는 역할 (환경변수 필요 보안을 위해 따로 뺌)

champions / [id] / page.tsx : /champions 경로와 관련된 페이지. 챔피언 목록이나 상세 정보를 보여주는 페이지 포함

items / page.tsx : /items 경로 관련 페이지. 모든 아이템 목록을 보여준다.

providers / QueryProvider.tsx : 전역으로 적용되는 설정이나 상태 관리와 관련된 컴포넌트

rotation / page.tsx : /rotation 경로 관련 페이지. 주기적으로 변경되는 로테이션 챔피언 목록을 보여준다.

globals.css : 프로젝트 전체에 적용되는 글로벌 스타일 css 파일

layout.tsx : 모든 페이지에서 공통적으로 사용되는 레이아웃 파일 ( Header, Footer 등)

page.tsx : 메인 페이지에 해당하는 파일

 

components : 재사용 가능한 UI 컴포넌트

Header.tsx : 여러 페이지에서 공통으로 사용되는 Header UI

Footer.tsx : 여러 페이지에서 공통으로 사용되는 Footer UI

 

types : typescript 타입 파일들 (api 를 통해 어떤 데이터가 있는지 확인)

Champion.ts : 챔피언 데이터를 정의하는 타입 파일

ChampionRotation.ts : 로테이션 챔피언 데이터를 정의하는 타입 파일  

Item.ts : 아이템 데이터를 정의하는 타입 파일

 

utils : 클라이언트 측에서 외부 api 호출 하기위한 파일들 (환경변수가 필요없음)

riotApi.ts : Riot API와 관련된 유틸리티 함수들이 정의된 파일 (챔피언 로테이션, 아이템, 챔피언 목록 등을 가져오기 위한 api 호출 함수 포함) 

serverApi.ts : 서버에서 사용하는 api 호출 관련 (최신 버전 정보, 챔피언 목록, 챔피언 상세 정보, 아이템 목록)

 * 환경변수가 필요한 로테이션 챔피언 목록은 위에 api/rotation/route.ts 로 보안

 

.env.local : 환경 변수 파일. 민감한 정보( api key, database url 등)를 설정하여 코드에서 직접적으로 노출되지 않도록 한다.