From a7298a9cc1fb28439d4f3e5e0719ad9bb3b776b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=ED=9D=AC=EC=9B=90?= Date: Mon, 29 Jun 2026 20:56:37 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EB=AC=B8=EC=84=9C=EB=AA=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- doc/figma-specs.md | 21 ++++++++++++++++ doc/미완료.md | 62 ---------------------------------------------- 2 files changed, 21 insertions(+), 62 deletions(-) create mode 100644 doc/figma-specs.md delete mode 100644 doc/미완료.md diff --git a/doc/figma-specs.md b/doc/figma-specs.md new file mode 100644 index 0000000..cabcbd5 --- /dev/null +++ b/doc/figma-specs.md @@ -0,0 +1,21 @@ +# 참고: Figma 노드 ID 모음 (file_key: `MnwN1Uzg5F6ks9Clr1brLW`) + +- PC 전체 페이지(컴포지트): `2247:2093` / 모바일 전체 페이지(컴포지트): `2319:5243` +- 01_HOME PC `2247:2094` / Mobile `2319:2232` +- 02_ABOUT US PC `2247:2230` / Mobile `2319:2288` +- 03_HISTORY PC `2247:2121` / Mobile `2319:2433` +- 04_VISION PC `2247:2183` / Mobile `2319:4183` +- 05_PROJECT PC `2247:2202` / Mobile `2319:4231` +- 06_CONTACT/FOOTER(문서상 라벨은 "Expertise") PC `2247:2253` / Mobile `2319:5082` +- 모바일 GNB 드로어(열린 상태): `2319:5998` +- footer 전용 인스턴스: PC `2247:2294` / Mobile `2319:4996` +- 개인정보 동의 모달: PC `2319:2118` / Mobile `2376:2184` + +상세 스펙 데이터는 `doc/figma-specs-0624/` 폴더 참고(섹션별 JSON/txt, README에 사용법 정리됨). + +# 참고: Figma 데이터 가져오는 법 + +- Figma REST API를 직접 호출하는 게 가장 안정적: `.mcp.json`의 `FIGMA_API_KEY`로 `GET https://api.figma.com/v1/files/{file_key}/nodes?ids={node_id}` (특정 노드 JSON), `GET https://api.figma.com/v1/images/{file_key}?ids={node_id}&format=jpg&scale=2` (이미지로 export). 노드 ID만 알면 토큰 한도·이미지 export 제약 둘 다 우회됨. +- `mcp__figma__add_figma_file(url)`은 문서 전체를 한 번에 덤프해서 토큰 한도에 걸리고, `mcp__figma__view_node(file_key, node_id)`는 PNG 렌더만 보여주고 파일로 저장은 안 됨 — 둘 다 REST API 직접 호출보다 제약이 많음. +- 컴포넌트(버튼/인풋/체크박스 등) 비교 시 주의: Components 캔버스의 **추상 컴포넌트 정의**에 있는 배경색 등은 실제로 배치된 인스턴스에서 `visible:false`로 꺼져있는 placeholder일 수 있음(예: PROJECT의 `btn/large` 컴포넌트 정의는 회색 배경이 있지만 실제 인스턴스는 그 fill이 꺼져있어서 투명이 맞음). **항상 실제 페이지에 배치된 인스턴스를 raw JSON에서 직접 찾아 그 값(fills/cornerRadius/padding)을 써야 하고, 추상 컴포넌트 스와치만 보고 판단하면 안 됨.** +- `.txt` 요약 파일은 `visible:false` 숨김 노드도 같이 추출하므로, 의심되는 텍스트는 raw JSON에서 `visible` 플래그를 직접 확인해야 함. diff --git a/doc/미완료.md b/doc/미완료.md deleted file mode 100644 index e480bc7..0000000 --- a/doc/미완료.md +++ /dev/null @@ -1,62 +0,0 @@ -# 미완료 / 확인 필요 항목 - -추측해서 임의로 채운 값이 아니라, 실제로 막힌 지점만 기록한다. (2026-06-29 기준, figma-specs 전체 재검수 후 정리 — 완료된 항목은 모두 제거하고 현재 남아있는 것만 유지) - -## 인터랙션(behavior) — 남은 1건 (Recruitment 더보기는 구현 보류) - -`doc/figma-specs-0624/11-interaction-notes.md` 기준 5개 중 4개(HISTORY 아코디언 단일 열림, PROJECT 더보기 페이지네이션, 개인정보 동의 모달, SEND 유효성 검증)는 구현하고 playwright로 직접 클릭해서 동작·콘솔 에러 없음까지 확인함. - -- **Recruitment 태그 더보기 페이지네이션 — 구현 보류.** 스펙은 "처음 6개 노출, 더보기 시 6개"인데 Figma에도 태그가 4개(Planner & Consulting/Designer/Publisher/Scripter)뿐이라 6개 임계값에 도달하지 않음 — 페이지네이션이 트리거될 일이 없어서 구현 안 함. 태그가 6개 이상으로 늘어나면 그때 PROJECT 더보기와 같은 패턴으로 추가하면 됨. - -## HISTORY — 확인 필요 2건 (Figma 쪽 추가 확인 필요, 코드로 해결 불가) - -- **2024/2023/2022/2021년 그룹 펼친 상태 전체 목록 미확인** — Figma 정적 렌더에서 이 그룹들이 collapsed 상태로 보여서 프리뷰 항목 1개씩만 반영함(2024: 우리은행 로보어드바이저 구축 / 2023: 신한은행 슈퍼SOL 운영 계약 / 2022: 한화금융 서비스앱 플러스 리뉴얼 2차 계약 / 2021: 롯데 렌터카 차세대 구축 계약). 펼쳤을 때 추가 항목이 더 있는지 정적 JSON만으론 확인 불가 — Figma에서 직접 펼쳐서 알려주시거나 node를 펼친 상태로 다시 캡처해주셔야 함. -- **(낮은 확신) 닫힌 연도그룹 프리뷰의 모바일 폰트 크기** — `03-history-mobile.json` 기준 닫힌 그룹(2024~2021) 프리뷰 1건의 텍스트가 16px로 보이는데, 펼쳐진 2025 리스트 내부 항목들은 14px로 다름. Figma 저자가 프리뷰/리스트에 의도적으로 다른 스타일을 쓴 건지, 단순 작업 누락인지 불확실해서 현재 코드(14px 통일)는 그대로 둠 — 필요하면 알려주시면 반영. - ---- - -# 참고: 디자인 링크 - -https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?m=auto&t=Y5wF3r0wUkUFeBIV-6 - -## 섹션별 링크 (PC) - -01_HOME: https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2094&t=XSGOQmdNzIB99Zh5-4 -02_ABOUT: https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2230&t=XSGOQmdNzIB99Zh5-4 -03_HISTORY: https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2121&t=XSGOQmdNzIB99Zh5-4 -04_VISION: https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2183&t=XSGOQmdNzIB99Zh5-4 -05_PROJECT: https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2202&t=XSGOQmdNzIB99Zh5-4 -06_Expertise(=CONTACT/FOOTER): https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2253&t=XSGOQmdNzIB99Zh5-4 - -## 섹션별 링크 (Mobile) - -01_HOME: https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-2232&t=XSGOQmdNzIB99Zh5-4 -02_ABOUT: https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-2288&t=XSGOQmdNzIB99Zh5-4 -03_HISTORY: https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-2433&t=XSGOQmdNzIB99Zh5-4 -04_VISION: https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-4183&t=XSGOQmdNzIB99Zh5-4 -05_PROJECT: https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-4231&t=XSGOQmdNzIB99Zh5-4 -06_Expertise(=CONTACT/FOOTER): https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-5082&t=XSGOQmdNzIB99Zh5-4 - ---- - -# 참고: Figma 노드 ID 모음 (file_key: `MnwN1Uzg5F6ks9Clr1brLW`) - -- PC 전체 페이지(컴포지트): `2247:2093` / 모바일 전체 페이지(컴포지트): `2319:5243` -- 01_HOME PC `2247:2094` / Mobile `2319:2232` -- 02_ABOUT US PC `2247:2230` / Mobile `2319:2288` -- 03_HISTORY PC `2247:2121` / Mobile `2319:2433` -- 04_VISION PC `2247:2183` / Mobile `2319:4183` -- 05_PROJECT PC `2247:2202` / Mobile `2319:4231` -- 06_CONTACT/FOOTER(문서상 라벨은 "Expertise") PC `2247:2253` / Mobile `2319:5082` -- 모바일 GNB 드로어(열린 상태): `2319:5998` -- footer 전용 인스턴스: PC `2247:2294` / Mobile `2319:4996` -- 개인정보 동의 모달: PC `2319:2118` / Mobile `2376:2184` - -상세 스펙 데이터는 `doc/figma-specs/` 폴더 참고(섹션별 JSON/txt, README에 사용법 정리됨). - -# 참고: Figma 데이터 가져오는 법 - -- Figma REST API를 직접 호출하는 게 가장 안정적: `.mcp.json`의 `FIGMA_API_KEY`로 `GET https://api.figma.com/v1/files/{file_key}/nodes?ids={node_id}` (특정 노드 JSON), `GET https://api.figma.com/v1/images/{file_key}?ids={node_id}&format=jpg&scale=2` (이미지로 export). 노드 ID만 알면 토큰 한도·이미지 export 제약 둘 다 우회됨. -- `mcp__figma__add_figma_file(url)`은 문서 전체를 한 번에 덤프해서 토큰 한도에 걸리고, `mcp__figma__view_node(file_key, node_id)`는 PNG 렌더만 보여주고 파일로 저장은 안 됨 — 둘 다 REST API 직접 호출보다 제약이 많음. -- 컴포넌트(버튼/인풋/체크박스 등) 비교 시 주의: Components 캔버스의 **추상 컴포넌트 정의**에 있는 배경색 등은 실제로 배치된 인스턴스에서 `visible:false`로 꺼져있는 placeholder일 수 있음(예: PROJECT의 `btn/large` 컴포넌트 정의는 회색 배경이 있지만 실제 인스턴스는 그 fill이 꺼져있어서 투명이 맞음). **항상 실제 페이지에 배치된 인스턴스를 raw JSON에서 직접 찾아 그 값(fills/cornerRadius/padding)을 써야 하고, 추상 컴포넌트 스와치만 보고 판단하면 안 됨.** -- `.txt` 요약 파일은 `visible:false` 숨김 노드도 같이 추출하므로, 의심되는 텍스트는 raw JSON에서 `visible` 플래그를 직접 확인해야 함.