{"id":23376267,"url":"https://github.com/chay140/lol-dex","last_synced_at":"2026-05-08T19:32:58.390Z","repository":{"id":268265930,"uuid":"902262389","full_name":"chay140/Lol-Dex","owner":"chay140","description":"Simple League of Legends Info Page","archived":false,"fork":false,"pushed_at":"2025-08-31T18:13:31.000Z","size":212,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-14T21:37:26.648Z","etag":null,"topics":["nextjs","typescript","vercel"],"latest_commit_sha":null,"homepage":"https://simple-lol-dex-xi.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chay140.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-12-12T08:20:55.000Z","updated_at":"2025-08-31T18:13:35.000Z","dependencies_parsed_at":"2025-08-31T16:08:06.418Z","dependency_job_id":"9547e6c0-e184-4a6a-8125-bdcc183d506c","html_url":"https://github.com/chay140/Lol-Dex","commit_stats":null,"previous_names":["chay140/lol-dex"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chay140/Lol-Dex","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chay140%2FLol-Dex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chay140%2FLol-Dex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chay140%2FLol-Dex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chay140%2FLol-Dex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chay140","download_url":"https://codeload.github.com/chay140/Lol-Dex/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chay140%2FLol-Dex/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32794673,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"ssl_error","status_checked_at":"2026-05-08T08:22:45.650Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","typescript","vercel"],"created_at":"2024-12-21T17:36:10.962Z","updated_at":"2026-05-08T19:32:58.376Z","avatar_url":"https://github.com/chay140.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 리그 오브 레전드 정보 앱\n![logo](/public/logo.png)\n\n## 📖 목차\n\n1. [프로젝트 설명](#프로젝트-설명)\n2. [주요 기능](#주요-기능)\n3. [프로젝트 구성](#프로젝트-구성)\n4. [Trouble Shooting](#trouble-shooting)\n5. [개발기간](#개발기간)\n6. [기술스택](#기술스택)\n\n## 프로젝트 설명\n**Riot API**와 **Data Dragon**을 활용하여 만든 리그 오브 레전드 정보 조회 애플리케이션. **챔피언 정보 조회**, **챔피언 로테이션 확인** 등 다양한 데이터를 제공하며, **Next.js**와 **TypeScript**를 활용해 개발되었습니다.\n프로젝트를 통해 **동적 라우팅**, **App Router**, **Route Handler**와 같은 Next.js의 핵심 기능과 **타입 선언**, **useState에서 제네릭 사용**, **유틸리티 타입 활용**을 실습합니다.\n\n리그 오브 레전드 팬들이 유용하게 사용할 수 있는 정보를 간편하게 확인할 수 있도록 제작된 웹 애플리케이션입니다.\n\n![Home](https://github.com/user-attachments/assets/8ae33ea2-3951-43da-b0e5-bce0e1b151cf)\n\n## 주요 기능  \n### 챔피언 목록 확인 (ISR)  \n- **Incremental Static Regeneration** 방식을 사용하여 최신 챔피언 목록을 확인할 수 있습니다.\n![Champions](https://github.com/user-attachments/assets/8adc0e1e-a210-41ea-b3d8-dcf3235ff936)\n\n\n### 챔피언 상세 보기 (SSR)  \n- **Server-Side Rendering**으로 선택한 챔피언의 상세 정보를 제공합니다.\n![champion-detail-page-gif](https://github.com/user-attachments/assets/23e53561-1e45-4664-9f0a-71de41fa5a61)\n\n\n### 아이템 목록 보기 (SSG)  \n- **Static-Site Generation**으로 아이템 목록을 빠르게 조회할 수 있습니다.  \n![Items](https://github.com/user-attachments/assets/b96a4ddd-449d-46d6-8f4d-f5893115a474)\n\n### 로테이션 챔피언 목록 보기 (CSR)  \n- **Client-Side Rendering**을 통해 매주 변경되는 무료 챔피언 로테이션 목록을 실시간으로 확인할 수 있습니다.  \n![rotation-page gif](https://github.com/user-attachments/assets/ec69d18b-b50d-42ac-8d45-5b0ea1bb9d33)\n\n### 추가 기능\n- 로딩과 에러 페이지 구현으로 UX경험을 높였습니다.\n- 반응형 UI를 적용시켰습니다.\n- 다크모드가 가능하도록 구현했습니다.\n- 2025.09.01 : vercel의 이미지 최적화를 피하기 위해 img 태그로 모두 변환한 상태입니다.\n\n## 프로젝트 구성\n```\nlol-dex/\n├── public/\n├── src/\n│   ├── app/\n│   │   ├── layout.tsx\n│   │   ├── page.tsx\n│   │   ├── champions/\n│   │   |   └── [id]/\n│   │   ├── items/\n│   │   ├── rotation/\n│   │   └── api/rotation/\n│   ├── components/\n│   ├── types/\n│   └── utils/\n├── .env.local\n├── package.json\n└── next.config.js \n```\n- `public/`: 정적 파일들을 관리하는 디렉토리 (이미지, 폰트 등)  \n- `src/`: 프로젝트의 주요 소스 파일이 위치한 디렉토리  \n  - `app/`: Next.js의 App Router 기능을 활용한 라우팅 디렉토리  \n    - `layout.tsx`: 모든 페이지에 공통으로 적용되는 레이아웃 파일  \n    - `page.tsx`: 홈 페이지 컴포넌트  \n    - `champions/`: 챔피언 관련 페이지 디렉토리  \n      - `[id]/`: 개별 챔피언 상세 정보를 보여주는 동적 라우팅 페이지  \n    - `items/`: 아이템 목록 페이지  \n    - `rotation/`: 로테이션 챔피언 목록 페이지  \n    - `api/rotation/`: 로테이션 챔피언 데이터를 제공하는 API 라우트  \n  - `components/`: 재사용 가능한 UI 컴포넌트를 관리하는 디렉토리  \n  - `types/`: TypeScript 타입 정의 파일을 관리하는 디렉토리  \n  - `utils/`: 공통으로 사용하는 유틸리티 함수들을 관리하는 디렉토리  \n- `.env.local`: 환경 변수 설정 파일  \n- `package.json`: 프로젝트의 의존성과 스크립트를 정의한 파일  \n- `next.config.js`: Next.js 프로젝트 설정 파일  \n\n\n## Trouble Shooting\n### `\u003cImage\u003e` 사용법 오류\n\u003cdetails\u003e\n\u003csummary\u003e원인 분석 및 해결방안\u003c/summary\u003e\n\u003cdiv markdown=\"1\"\u003e\n\n#### ⚙️ 문제 상황 및 원인 분석\nHTML의 `\u003cimg\u003e` 태그처럼 사용한 것이 원인으로 path 에러가 떴었다\n\n#### 🚀 remotePatterns 설정해 주기\n`next.config.mjs` 파일에서 `remote Pattern`을 지정해줌으로써 ddragon에서 받아오는 이미지 경로를 모두 허용으로 지정해주었다.\n\n\u003cbr\u003e\n\u003c/div\u003e\n\u003c/details\u003e\n\n**블로그 포스팅** : [[Next.js] Image 태그 오류 TroubleShooting](https://velog.io/@chay140/Next.js-Image-오류)\n\n\n\n## 개발 기간\n* 2024.12.12 (목) ~ 2024.12.19 (목)\n\n## 기술 스택\n### Language\n![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)\n\n\n### Framework\n![Next.js](https://img.shields.io/badge/Next.js-000?style=for-the-badge\u0026logo=nextdotjs\u0026logoColor=white)\n\n\n### Library\n![react-query](https://img.shields.io/badge/React_Query-555555?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB)\n![tailwind](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchay140%2Flol-dex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchay140%2Flol-dex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchay140%2Flol-dex/lists"}