Menu
뿌클로드 페이지 개발. 새 venue 추가, 기존 venue 수정, Figma 디자인 반영 시 사용.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
SCC 앱 OTA 배포 + 웹 배포 절차. "OTA 배포해줘", "앱 출시", "웹 배포", "web-deploy", "프로덕션에 올려줘" 같은 명시적 배포 요청 시에만 사용. 배포는 one-way door — 이 skill의 절차를 벗어나 임의로 배포하지 않는다.
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 — 신규/변경/삭제 문서만 처리해 토큰을 아낀다.
React Native 앱에 새 화면을 추가합니다. ScreenLayout, Navigation 등록, SccXxx 컴포넌트 사용을 포함합니다.
SCC 앱 작업 후 검증 절차 + 네이티브(iOS/Android) 코드 규칙. 코드 변경 후 lint/tsc 검증, ios/android 디렉토리 변경 시 Release 빌드 검증, 네이티브 모듈(RCTBridgeModule/ReactContextBaseJavaModule) 작성 규칙을 다룬다. "네이티브 모듈 추가", "iOS 빌드 깨져", "release 빌드 검증", "브릿지 메서드", "CI에서만 빌드 실패", "Bridgeless" 같은 작업/증상 시, 그리고 scc-app 코드 변경을 마무리할 때 사용.
새로운 뿌클로드 페이지를 추가합니다. Figma 디자인 분석, 데이터 추가, 브라우저 렌더링 검증을 포함합니다.
| name | bbucle-road-dev |
| description | 뿌클로드 페이지 개발. 새 venue 추가, 기존 venue 수정, Figma 디자인 반영 시 사용. |
mcp__figma-dev-mode-mcp-server__get_metadata로 전체 페이지 구조 확인
| 섹션 | Figma 노드 ID | 설명 |
|---|---|---|
| 헤더 배경 | ||
| 타이틀 이미지 | ||
| 한눈에보기 | ||
| 교통정보 탭별 | ||
| 매표정보 | ||
| 시야정보 | ||
| 근처맛집 | (여러 개일 수 있음) |
자식 요소가 있으면 → 합성 프레임 (마커, 경로 등 포함)
자식 요소가 없으면 → 단순 이미지
합성 프레임이면 → 부모 프레임 ID로 export해야 함
bbucleRoadData.ts의 이미지 URL 필드들과 Figma 노드 비교 테이블 작성.
이미지뿐만 아니라 CSS 스타일 차이도 확인.
get_design_context로 Desktop 노드와 Mobile 노드 각각 확인:
| 항목 | Figma Desktop | Figma Mobile | 현재 코드 | 수정 필요 |
|---|---|---|---|---|
| (항목별 작성) |
"박스가 width를 안 채움", "간격이 다름" 같은 문제 발생 시:
| 증상 | 원인 가능성 | 해결 방법 |
|---|---|---|
| 박스가 100% 안 채움 | flex: 1 0 0 사용 | width: 100%로 변경 |
| 모바일에서 width 안 맞음 | styled-component에 width 미지정 | 명시적 width 추가 |
| 간격(gap) 다름 | gap 값 하드코딩 | Figma 값으로 수정 |
문제가 있는 섹션이 있으면 동작하는 다른 섹션과 비교:
HTML 스타일만 수정해도 안 되면 부모 styled-component 확인:
curl -s -H "X-Figma-Token: $TOKEN" \
"https://api.figma.com/v1/images/${FILE_KEY}?ids=${NODE_IDS}&format=png&scale=2"
aws-vault exec swann-scc -- aws s3 cp image.png \
s3://scc-dev-accessibility-images-2/$(date +%Y%m%d%H%M%S)_filename.png \
--acl public-read
yarn web
# http://localhost:3000/bbucle-road/{venue-id}
flex: 1 0 0 사용 → 모바일에서 width 문제 발생 가능