개인 포트폴리오 · 기술 블로그 (Next.js App Router + TypeScript).
Live: subeomdev.vercel.app — 또는 구글에 개발자 박수범 검색.
한 줄·링크는 projects/ 의 title · description · demo_url · github_url 과 맞춰 둡니다.
- bumpist-code —
npx bumpist-code@latest init한 줄로 Vue·React·Next.js에 FSD·디자인 베이스라인·WCAG AA·Claude Code 스킬 14종을 세팅하는 프론트엔드 표준 배포 CLI. GitHub - Claude Code Skills Panel — Claude Code 슬래시 커맨드를 패널에서 클릭 한 번으로 실행하는 VS Code 확장. GitHub
- claude-distill — Claude Code Stop hook으로 세션 인수인계 노트를 자동 기록하는 npm CLI. GitHub
- AI 협업 포트폴리오 (subeom.dev) — Next.js·FSD·Supabase 기반 포트폴리오·기술 블로그(이 저장소가 빌드하는 사이트). GitHub
- A11yGym — Monaco + axe-core로 KWCAG 2.2 실습·실시간 검증. GitHub
- 항해플러스 아카이빙 — LMS 과제 제출 이력 보존·결함 허용 매칭. GitHub
- 애니스쿨 (Anyschool) — 랜덤 동물 캐릭터 조합·Lambda 이미지 파이프라인. GitHub
- 언커버 (Uncover) — 저작권 클린 음원·영상 매칭 스트리밍(팀 FE). 배포 URL 없음 · GitHub
| 영역 | 기술 |
|---|---|
| Framework | Next.js 15 (App Router) · React 18 · TypeScript 5 |
| 스타일 | Tailwind CSS · shadcn/ui (Radix) |
| 데이터 | Supabase(PostgreSQL) — 없으면 posts/ · projects/ 마크다운 폴백 |
| 콘텐츠 | MDX (next-mdx-remote) · Shiki · Giscus |
| 배포 | Vercel |
레이아웃은 FSD (app → widgets → features → entities → shared) 를 따릅니다.
pnpm install
pnpm dev # http://localhost:3000
pnpm build && pnpm start # 프로덕션 로컬 확인.env.local (로컬에서 Supabase·동기화·일부 SEO를 쓸 때)
| 변수 | 용도 |
|---|---|
NEXT_PUBLIC_SUPABASE_URL · NEXT_PUBLIC_SUPABASE_ANON_KEY |
런타임 데이터 |
SUPABASE_SERVICE_ROLE_KEY |
sync:* 스크립트 (RLS 우회) |
NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION 등 |
검색 콘솔 메타 (선택) |
NEXT_PUBLIC_GA_ID · Giscus 관련 |
분석·댓글 (선택) |
Supabase 변수가 없으면 블로그/포트폴리오 목록은 저장소의 마크다운을 읽습니다.
| 경로 / 명령 | 설명 |
|---|---|
posts/*.md |
블로그 — pnpm sync:posts 로 DB upsert (키 필요) |
projects/*.md |
포트폴리오 — pnpm sync:projects 로 DB upsert |
data/threads-insights.md |
홈 「요즘의 고민과 생각」 한 편 (DB 아님, 파일만) |
pnpm update:stats |
Open VSX · npm 수치 → src/shared/config/stats.ts 등 갱신 |
pnpm upload:images |
이미지 업로드 유틸 |
CI: .github/workflows/update-stats.yml — 매일 통계 커밋(기본적으로 Supabase sync 는 생략, SKIP_SUPABASE_SYNC).
- 전역 URL:
src/shared/config/site.ts의SITE_URL한 곳. sitemap.ts·robots.ts· Person / BlogPosting JSON-LD 등은 앱 라우트 쪽에 정의.
- 개발 단계·회고:
src/doc/(phase1.md~phase4.md등) - SEO 절차:
src/doc/seo-setup-guide.md
개인 포트폴리오 저장소.