팀 프로젝트 쇼케이스 웹사이트

React + TypeScript 기반의 모던한 팀 프로젝트 쇼케이스 플랫폼입니다.

폴더 구조 설명

• index.tsx: 앱 진입점
• App.tsx: 라우팅 및 기본 레이아웃 설정
• types.ts: TypeScript 인터페이스 정의
• data/: 프로젝트 데이터가 담긴 JSON 파일 보관
• components/: Navbar, Card, Tag 등 재사용 가능한 UI 컴포넌트
• pages/: 홈, 목록, 상세 페이지

주요 기술 스택

• React 18: 최신 버전의 React 사용
• Tailwind CSS: 유틸리티 우선 스타일링
• React Router (HashRouter): GitHub Pages 환경에 최적화된 라우팅
• TypeScript: 타입 안정성 확보

GitHub Pages 배포 시 주의사항

1. HashRouter 사용: GitHub Pages는 단일 페이지 애플리케이션(SPA)의 경로를 서버단에서 인식하지 못하기 때문에, URL에 #이 포함되는 HashRouter를 사용해야 새로고침 시 404 에러를 방지할 수 있습니다.
2. Vite base 설정: 만약 저장소 이름이 portfolio라면, vite.config.ts에서 base: '/portfolio/' 설정을 추가해야 정적 자산(JS, CSS, Image) 경로가 올바르게 잡힙니다.
3. gh-pages 패키지: npm install gh-pages --save-dev 설치 후 package.json의 scripts에 "deploy": "gh-pages -d dist"를 추가하여 쉽게 배포할 수 있습니다.

데이터 수정 방법

data/projects.json 파일에 프로젝트 객체를 추가하거나 수정하면 자동으로 사이트에 반영됩니다. 이미지 경로는 외부 URL이나 public/assets 폴더 내의 상대 경로를 사용할 수 있습니다.