12. 19. 38일차 TIL Next.js 과제_03 마무리, 커리어코칭 정리

롤 api를 이용한 프로젝트가 끝났고 나름 만족스러운 페이지를 만들었다고 생각한다. 이후 커리어 코칭을 통해 취업에 대한 조언을 얻을 수 있었다.

---

1. 프로젝트 기능

• 챔피언 목록 페이지 (/champions) : SSR방식으로 구현
• 챔피언 디테일 페이지 (/champions/[id]) : CSR 방식으로 구현
• 아이템 목록 페이지 (/items) : SSR 방식으로 구현
• 게임 소개 페이지 (/intro) : SSR 방식으로 구현
• 챔피언 로테이션 페이지 (/rotation) : CSR 방식으로 구현

---

2. 폴더 구조

📦src
 ┣ 📂app                    # Next.js 라우트 및 페이지 설정
 ┃ ┣ 📂api/rotation         # 로테이션 관련 API 엔드포인트
 ┃ ┣ 📂champions            # 챔피언 상세 페이지
 ┃ ┣ 📂intro                # 게임 소개 페이지
 ┃ ┣ 📂items                # 아이템 페이지
 ┃ ┣ 📂rotation             # 로테이션 페이지
 ┃ ┣ 📂_providers           # tanstackQuery Provider
 ┃ ┣ 📜error.tsx            # 에러 상태 페이지
 ┃ ┣ 📜layout.tsx           # 전역 레이아웃
 ┃ ┣ 📜loading.tsx          # 로딩 상태 스크린
 ┃ ┗ 📜page.tsx             # 홈 페이지
 ┣ 📂components             # 컴포넌트 모음
 ┃ ┣ 📂champion             # 챔피언 관련 컴포넌트
 ┃ ┣ 📂home                 # 홈 화면 컴포넌트
 ┃ ┣ 📂intro                # 게임 소개 컴포넌트
 ┃ ┣ 📂item                 # 아이템 관련 컴포넌트
 ┃ ┣ 📂rotation             # 로테이션 관련 컴포넌트
 ┃ ┗ 📂ui                   # 공통 UI 컴포넌트
 ┣ 📂constants              # 상수 파일
 ┣ 📂styles                 # 글로벌 스타일(CSS)
 ┣ 📂types                  # 타입 정의(TypeScript)
 ┣ 📂utils                  # 유틸리티 함수
 ┗ 📜README.md              # 프로젝트 설명 파일

---

3. 로딩 및 에러 핸들링

• Skeleton UI : 페이지 로딩 중 사용자 경험을 향상시키기 위해 각 페이지에 구현
• error.tsx 를 통해 각 경로에서 발생하는 에러를 처리

---

4. 동적 테마 구현

• next-themes 라이브러리를 활용하여 동적인 테마( 라이트 / 다크 )를 구현

---

5. 화면 구성

1) home

 

2) Intro

3) Champion

4) Champion/details

5) Item

6) Rotation

7) Dynamic theme

8) Loading Status

---