Notion에 작성한 콘텐츠를 web.staircrusher.club/articles 정적 페이지로 발행해 검색엔진(SEO) + AI답변엔진(AEO/GEO)에 노출시킨다. "노션 글 발행해줘", "아티클 올려줘", "articles 갱신", "노션 콘텐츠 검색에 걸리게", "article list DB 렌더링" 같은 요청 시 사용. 사람은 Notion에 제목+본문만 쓰고, 이 스킬이 메타데이터(slug/summary/ogImage/tags/faq)를 LLM으로 생성해 DB에 라이트백한 뒤, 결정론적 노드 스크립트로 본문을 HTML로 변환한다. last_edited_time 기반 incremental — 신규/변경/삭제 문서만 처리해 토큰을 아낀다.

2026-07-017

scc-app-add-screen

Stair-Crusher-Club/scc-app

React Native 앱에 새 화면을 추가합니다. ScreenLayout, Navigation 등록, SccXxx 컴포넌트 사용을 포함합니다.

2026-06-107

scc-app-native

Stair-Crusher-Club/scc-app

SCC 앱 작업 후 검증 절차 + 네이티브(iOS/Android) 코드 규칙. 코드 변경 후 lint/tsc 검증, ios/android 디렉토리 변경 시 Release 빌드 검증, 네이티브 모듈(RCTBridgeModule/ReactContextBaseJavaModule) 작성 규칙을 다룬다. "네이티브 모듈 추가", "iOS 빌드 깨져", "release 빌드 검증", "브릿지 메서드", "CI에서만 빌드 실패", "Bridgeless" 같은 작업/증상 시, 그리고 scc-app 코드 변경을 마무리할 때 사용.

2026-06-107

bbucle-road-dev

Stair-Crusher-Club/scc-app

뿌클로드 페이지 개발. 새 venue 추가, 기존 venue 수정, Figma 디자인 반영 시 사용.

2026-01-227

name	bbucle-road-create
description	새로운 뿌클로드 페이지를 추가합니다. Figma 디자인 분석, 데이터 추가, 브라우저 렌더링 검증을 포함합니다.

뿌클로드 새 페이지 추가

입력 정보

Figma URL (필수) - 디자인 명세 (node-id 포함)
페이지 ID (선택) - kebab-case (예: ticketlink-live-arena)
- 미입력시 Figma 디자인에서 추론

워크플로우

Phase 1: 디자인 분석

Figma MCP로 디자인 분석

- get_screenshot: 전체 페이지 스크린샷
- get_design_context: 각 섹션별 상세 스타일 (nodeId별로 호출)
- get_metadata: 구조 파악

기존 데이터 구조 파악
- web/screens/BbucleRoadScreen/config/bbucleRoadData.ts 읽기
- 기존 페이지(KSPO DOME, 고척스카이돔 등) 구조 참고
변경 범위 판단
- ✅ 데이터만 변경: bbucleRoadData.ts 수정
- ⚠️ 코드 변경 필요: 새 레이아웃/섹션/컴포넌트 추가 시
  - BbucleRoadScreen/sections/ 컴포넌트 수정
  - 타입 정의 수정
  - 새 섹션 컴포넌트 생성

Phase 2: 데이터 구조 설계

필수 섹션:

id: 페이지 고유 ID (kebab-case)
title: 페이지 제목
titleImageUrl, headerBackgroundImageUrl: 이미지 (placeholder 가능)
wheelchairUserCommentHtml: 휠체어 사용자 한마디
routeSection: 동선정보 (지하철, 콜택시, 자차, 버스 등)
ticketInfoSection: 매표 및 입장동선
seatViewSection: 좌석 시야
nearbyPlacesSection: 근처 맛집
reviewSection: 후기
ctaFooterSection: CTA 버튼
overviewSection: 한눈에 보기

Phase 3: 데이터 추가

web/screens/BbucleRoadScreen/config/bbucleRoadData.ts에 새 항목 추가:

'page-id': {
  "id": "page-id",
  "title": "휠체어로 ??? 어때?",
  // ... 전체 데이터 구조
}

Phase 4: 디자인 검증 (반복) ⚠️ 가장 중요

4-0. Figma 스크린샷 획득 (시각적 비교용)

# 각 섹션별 nodeId로 Figma 스크린샷 획득
get_screenshot(nodeId: "<섹션별 nodeId>")

Claude가 직접 이미지를 볼 수 있음
브라우저 스크린샷과 시각적 1:1 비교 가능

주요 섹션 nodeId 예시 (Figma URL에서 추출):

교통정보: node-id=XXX:YYY
매표정보: node-id=XXX:YYY
시야정보: node-id=XXX:YYY
근처맛집: node-id=XXX:YYY

4-1. 브라우저 스크린샷 캡처

yarn web  # Dev 서버 실행
cd web/screens/BbucleRoadScreen/scripts
npx tsx capture-screenshots.ts <pageId> desktop

4-2. 시각적 비교 (CRITICAL - 반드시 수행!)

Claude가 두 이미지를 직접 보고 비교:

Figma 스크린샷 (get_screenshot 결과)
브라우저 스크린샷 (Playwright 캡처 결과)

육안으로 확인할 항목:

전체 레이아웃 일치 여부
배지/태그 색상 (배경색, 텍스트색, 테두리)
박스 중첩 구조 (이중 박스, 중복 제목)
텍스트 스타일 (크기, 굵기, 줄간격)
간격 (padding, margin, gap)

4-3. 섹션별 상세 스타일 비교 (필수!)

각 섹션마다 아래 과정 수행:

Figma 스타일 추출
- get_design_context로 해당 섹션 nodeId의 상세 스타일 확인
- 배경색, 테두리, 폰트, 패딩, 마진 등 수치 기록
현재 데이터/컴포넌트 스타일 확인
- bbucleRoadData.ts의 HTML 인라인 스타일 확인
- 해당 섹션 컴포넌트(.tsx) 스타일 확인

1:1 비교표 작성 (MANDATORY)

| 항목 | Figma | 현재 데이터/컴포넌트 | 일치여부 |
|------|-------|---------------------|---------|
| 배지 배경색 | #fff | #0C76F7 | ❌ |
| 배지 테두리 | 1px solid #D8D8DF | 없음 | ❌ |
| ... | ... | ... | ... |

차이점 발견 시 즉시 수정
스크린샷 재캡처 후 재비교 (4-0부터 반복)

⚠️ 세부 검증 체크리스트 (CRITICAL)

배지/태그 스타일

검증 항목	확인 방법
배경색	filled (파란 배경) vs outline (흰 배경+테두리) 구분
테두리	border 유무 및 색상 (#D8D8DF 등)
텍스트 색상	배경과 대비되는 색상
border-radius	50px (pill) vs 4px/8px/12px
padding	px 또는 em 단위 정확히

⚠️ 흔한 실수: Figma에서 outline 스타일인데 filled로 구현

박스/컨테이너 구조

검증 항목	확인 방법
중첩 구조	컴포넌트가 만드는 박스 + 데이터 HTML의 박스 = 이중 래핑 주의
배경색	#F7F8FA (연회색) vs #fff (흰색)
border-radius	4px vs 8px vs 12px
padding/gap	정확한 수치

⚠️ 흔한 실수: 컴포넌트에서 박스+제목 렌더링 + 데이터 HTML에서도 박스+제목 = 중복

텍스트 스타일

검증 항목	확인 방법
font-size	px 또는 em 단위
font-weight	400 (regular) vs 500 (medium) vs 700 (bold)
line-height	px 또는 배수
color	hex 코드 정확히
줄바꿈 위치	`<br>` 위치 Figma와 동일

아이콘

검증 항목	확인 방법
아이콘 타입	SUBWAY, CAR, TAXI, BUS 등
크기	width, height
색상	fill color

⚠️ 흔히 놓치는 패턴 (MUST CHECK)

1. 인라인 스타일 불일치

문제: 새 페이지 HTML에 다른 스타일 적용
해결: 기존 페이지(KSPO DOME, 고척스카이돔)의 동일 요소 스타일 복사 후 수정

2. 컴포넌트 래핑 중복

문제: 컴포넌트가 박스/제목 렌더링 + 데이터 HTML도 박스/제목 포함
해결:
- 컴포넌트 코드 확인 (sections/*.tsx)
- 컴포넌트가 래핑하는 요소와 데이터 HTML 중복 제거
- 데이터 HTML은 본문만 제공

3. 배지 스타일 (outline vs filled)

문제: Figma는 흰배경+테두리인데 파란배경으로 구현
해결: Figma에서 배지의 fill/stroke 속성 확인

4. 기존 페이지와 패턴 불일치

문제: 같은 요소인데 페이지마다 다른 스타일
해결: 기존 페이지의 동일 요소 HTML 복사 후 내용만 수정

5. 링크 URL 검증 ⚠️ NEW

문제: 기존 페이지에서 복사한 HTML의 링크가 다른 페이지/장소 것일 수 있음
예시: 제보 링크가 scc.page.link/NjHT (KSPO DOME용)인데 TLA에도 그대로 복사됨
해결:
- 모든 <a href="..."> 링크 URL을 Figma 디자인과 대조
- 새 페이지에 맞는 링크로 교체 (사용자에게 확인 필요)

6. 컴포넌트 styled-components 스타일 검증 ⚠️ NEW

문제: 섹션 컴포넌트(.tsx)의 styled-components 스타일이 Figma와 다를 수 있음
예시: NoticeBoxContainer의 배경색이 #FFF9E6 (연노랑)인데 Figma는 #fff + 테두리
해결:
- 데이터뿐 아니라 컴포넌트 스타일도 Figma와 비교
- get_design_context로 Figma 스타일 추출 후 컴포넌트 스타일과 대조

7. HTML 내용 검증 (다른 페이지 내용 복사됨) ⚠️ NEW

문제: 기존 페이지에서 HTML을 복사했을 때 내용 자체가 다른 페이지 것일 수 있음
예시: wheelchairUserTipHtml이 KSPO DOME 내용("주차장 실시간 혼잡도")인데 TLA에도 그대로 복사됨
해결:
- Figma에서 텍스트 내용 확인 (get_design_context 또는 get_screenshot)
- 텍스트 내용이 새 페이지에 맞는지 확인

8. gap/margin 정확한 수치 ⚠️ NEW

문제: Figma의 gap-8px이 데이터에서 gap: 4px로 잘못 적용됨
해결:
- get_design_context로 정확한 gap, padding, margin 수치 확인
- Tailwind 클래스 (gap-[8px]) → 인라인 스타일 (gap: 8px) 변환

9. bold/강조 텍스트 확인 ⚠️ NEW

문제: Figma에서 bold 처리된 텍스트가 일반 텍스트로 구현됨
해결:
- get_design_context 결과에서 font-weight: 700 또는 Bold 폰트 확인
- 해당 텍스트에 <b> 또는 font-weight: 700 적용

주요 파일

파일	설명
`web/screens/BbucleRoadScreen/config/bbucleRoadData.ts`	페이지 데이터
`web/screens/BbucleRoadScreen/index.tsx`	메인 컴포넌트
`web/screens/BbucleRoadScreen/sections/*.tsx`	섹션 컴포넌트
`web/screens/BbucleRoadScreen/scripts/capture-screenshots.ts`	스크린샷 캡처

최종 체크리스트

데이터 완성도

모든 필수 섹션 포함
HTML 인라인 스타일이 기존 페이지 패턴과 일치
링크 URL이 새 페이지에 맞는지 확인 (다른 페이지 링크 복사 주의)
텍스트 내용이 새 페이지에 맞는지 확인 (다른 페이지 내용 복사 주의)

세부 디자인 검증

배지/태그: outline vs filled, 테두리, 색상
박스 구조: 컴포넌트+데이터 HTML 중첩 없음
텍스트: font-size, weight, line-height, color
bold 처리: Figma에서 강조된 텍스트 <b> 태그 적용
아이콘: 타입, 크기, 색상
gap/padding/margin: 정확한 px 수치 (4px vs 8px 등)

컴포넌트 스타일 검증

섹션 컴포넌트 styled-components 스타일이 Figma와 일치
배경색, 테두리, border-radius 확인
컴포넌트 수정이 필요하면 다른 페이지에 영향 없는지 확인

검증 프로세스

각 섹션별 Figma vs 브라우저 1:1 비교표 작성
차이점 0개가 될 때까지 반복
데스크톱 뷰 완전 일치
모바일 뷰 완전 일치

이미지

이미지 URL placeholder 표시
사용자에게 이미지 등록 안내

코드 품질

yarn lint 통과
yarn tsc --noEmit 통과

참고

기존 페이지 예시: gocheok-skydome, kspo-dome
CLAUDE.md의 Figma Implementation Guidelines 참조

Figma MCP 도구 참조

사용 가능한 도구 (figma-dev-mode-mcp-server)

도구	설명	용도
`get_screenshot`	노드의 스크린샷 이미지 반환	시각적 비교용 - Claude가 이미지를 직접 볼 수 있음
`get_design_context`	UI 코드/스타일 컨텍스트	상세 스타일 수치 추출 (색상, 폰트, 패딩 등)
`get_metadata`	노드 구조 메타데이터 (XML)	컴포넌트 구조 파악
`get_variable_defs`	디자인 변수 정의	색상/폰트 변수 확인

nodeId 추출 방법

Figma URL에서 node-id 파라미터 추출:

https://figma.com/design/xxx/yyy?node-id=1038-5703
→ nodeId: "1038:5703" (하이픈을 콜론으로 변환)

시각적 비교 워크플로우

1. get_screenshot(nodeId: "섹션nodeId") → Figma 이미지
2. capture-screenshots.ts 실행 → 브라우저 이미지
3. 두 이미지를 **시각적으로 직접 비교**
4. 차이점 발견 → get_design_context로 상세 스타일 확인 → 수정
5. 반복

⚠️ 중요: get_screenshot은 이미지를 파일로 저장하지 않음. Claude가 메모리에서 직접 확인.