Skills Showcase (SkillsMP 카탈로그 사이트)

프로젝트 정보

• 저장소: github.com/sigco3111/skills-showcase
• 로컬 경로: /Users/hjshin/hermes_bot/projects/skills-showcase/
• 기술 스택: Astro 5 + Tailwind v4 + Playwright (테스트)
• 배포: GitHub Pages (GitHub Actions 자동 배포)

주요 파일 구조

src/pages/index.astro          # 메인 페이지 (스킬 그리드, 정렬, 검색)
src/pages/skills/[slug].astro  # 스킬 상세 페이지
src/pages/category/[...slug].astro # 카테고리 페이지
src/components/SkillCard.astro # 스킬 카드 컴포넌트
src/data/downloads.json        # Astro 빌드용 다운로드 데이터
public/downloads/downloads.json # 공개 다운로드 데이터 (검색용)
generate-skills-data.py        # 스킬 데이터 생성 스크립트
test_sorting.py                # Playwright 정렬 테스트

데이터 갱신 워크플로우

cd /Users/hjshin/hermes_bot/projects/skills-showcase/
python generate-skills-data.py                    # 데이터 생성
cp public/downloads/downloads.json src/data/       # ⚠️ 동기화 필수!
npm run build                                      # 빌드
git add . && git commit -m "update skills data" && git push  # 배포

⚠️ 주의사항 (실제 발견한 버그들)

1. Astro script 위치

• script는 자동으로 script type=module로 변환됨
• DOM 접근이 필요한 스크립트는 반드시 Layout 닫기 태그 앞(컴포넌트 내부)에 배치
• 컴포넌트 외부에 작성하면 html 닫기 태그 뒤로 밀려나서 브라우저가 완전히 무시함

2. JS dataset 카멜케이스 변환

• data-* 속성은 케밥케이스를 카멜케이스로 자동 변환
• data-created-at은 dataset.createdAt으로 접근 (dataset.created_at은 undefined 반환)
• 모든 카드가 undefined=0으로 평가되어 정렬이 동작하지 않음

3. downloads.json 동기화

• public/downloads/downloads.json과 src/data/downloads.json이 별개
• generate-skills-data.py는 public/downloads/만 갱신
• Astro 빌드는 src/data/downloads.json을 참조하므로 수동 복사 필수
• 동기화되지 않으면 새 스킬에 다운로드 버튼이 안 나옴

4. type=module + DOMContentLoaded 조합

• script type=module은 항상 defer 됨 (DOM 파싱 후 실행)
• 이미 DOM이 로드된 상태에서 DOMContentLoaded 리스너를 등록하면 이벤트가 영원히 발생하지 않음
• 모듈 스크립트에서는 DOMContentLoaded 없이 직접 DOM 조작

테스트

python test_sorting.py  # Playwright로 정렬 기능 브라우저 테스트