Find Repository

# 프로젝트 개요

---

• 실행환경: node: v20.11.1
• 베포: https://find-repository.vercel.app/kr/repos
• 기술 스택
  • Next.js v15
  • React.js v19
  • TypeScript v5
  • 다국어 지원 (next-i18next)
  • GitHub REST API
  • Jest v29
  • Storybook v8
  • TailwindCSS v4 + DaisyUI v5
• 주요 구현 기능
  • 앱 라우팅
  • 다국어 보기 전환
  • 다크모드 적용
  • 사용자별 리포지토리 목록 검색
    • 목록 조회 방식에 인피니티 스크롤 적용
    • 별점, 수정일자 오름/내림차순 정렬
    • 주 언어별 필터링 보기
      • 리포지토리 목록 검색 시 개발언어 항목을 사전 조회해 필터 옵션으로 사용하기 위한 데이터 재가공 처리
  • 리포지토리 상세 조회
    • url 클릭 시 새탭으로 이동
  • 기타
    • 페이지 첫 진입 시 스켈레톤 패턴 적용
    • jest API 비동기 단위 테스트 코드 추가
    • 스토리북에 주요 컴포넌트 샘플 추가
• 디자인 패턴
  • 앱라우트 페이지 MVVM 패턴 정의
    • consts: 상수 모음 [M]
    • types: 모델 모음 [M]
    • page.ts: 화면 [V]
    • components: page.ts 구성요소를 여러 컴포넌트로 분리한 경우, 자식 컴포넌트가 위치 [V]
    • styles: CSS 모듈 스타일 모음 폴더 [V] - 본 프로젝트에서는 규모 상 생략
    • services.ts
      • 시스템 자원을 많이 소모하는 로직 대부분 위치하는 서버사이드 계층
      • 깃허브 API를 호출하고 응답 데이터를 가공해 클라이어트 사이드로 반환 [VM]
    • hooks.ts : 클라이언트 사이드에서 실행되는 공통 훅들이 위치 [VM]
    • utils : 공통으로 사용되는 주요 유틸 함수 등이 위치