Menu
뿌클로드 페이지 개발. 새 venue 추가, 기존 venue 수정, Figma 디자인 반영 시 사용.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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 문제 발생 가능