byuckchon-frontend-cli 1.9.6 → 1.9.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,372 +1,296 @@
1
1
  # byuckchon-frontend-cli
2
2
 
3
- [byuckchon](https://www.byuckchon.com) 프론트엔드 팀의 **프로젝트 스타터 + AI 어시스턴트** CLI.
4
- React(Vite) / Next.js(App Router) TypeScript 프로젝트를 만들고, `bc chat` 으로 AI 코드 이야기를 나눌 수 있습니다.
3
+ [byuckchon](https://www.byuckchon.com) 프론트엔드 팀을 위한 프로젝트 스타터이자
4
+ AI 개발 어시스턴트 CLI입니다.
5
+
6
+ ```text
7
+ 프로젝트 생성 또는 연결
8
+ → 프로젝트 문맥(Figma · OpenAPI · 컨벤션) 등록
9
+ → AI와 대화하며 코드 탐색·생성·수정
10
+ → PR에서 기계적인 컨벤션을 자동 리뷰
11
+ ```
12
+
5
13
 
6
14
  ## 요구 사항
7
15
 
8
- - [Node.js](https://nodejs.org/) 18+ (LTS 권장)
16
+ - Node.js 18+ (LTS 권장)
9
17
  - AI 사용 시: Anthropic 또는 OpenAI API 키
10
18
 
11
19
  ## 설치
12
20
 
13
- `bc` 는 **CLI 툴** 이라서 프로젝트 의존성으로 설치하면 안 되고, **글로벌**(또는 `npx`)로 써야 합니다.
21
+
22
+ `bc`는 프로젝트 내부에서 사용하는 라이브러리가 아니라 **CLI 도구**입니다.
23
+
24
+ 따라서 프로젝트 의존성으로 설치하지 않고, 다음 중 한 가지 방식으로 사용합니다.
25
+
26
+ ### 1. 글로벌 설치
27
+
14
28
 
15
29
  ```bash
16
- # 글로벌 설치 (제일 흔한 방식)
30
+ # npm
17
31
  npm install -g byuckchon-frontend-cli
32
+
33
+ # pnpm
18
34
  pnpm add -g byuckchon-frontend-cli
19
- yarn global add byuckchon-frontend-cli
20
35
 
21
- # 또는 설치 없이 일회성
22
- npx byuckchon-frontend-cli adopt
23
- pnpm dlx byuckchon-frontend-cli adopt
36
+ # yarn
37
+ yarn global add byuckchon-frontend-cli
24
38
  ```
25
39
 
26
- 설치되면 `bc` / `byuckchon-frontend-cli` 개 다 PATH 에 깔립니다.
27
-
28
- ### 모노레포에서 쓰기
40
+ ### 2. 설치 없이 일회성 실행
29
41
 
30
- `bc` 자체는 **루트에 번만** 글로벌 설치하면 충분합니다. 다만 `bc.config.json`
31
- **각 패키지(앱) 디렉터리마다 따로** 두는 걸 권장 — Tailwind 버전, 라우팅, 스타일링이
32
- 앱마다 다르면 `detected.*` 가 달라야 RAG 컨텍스트도 정확해집니다.
42
+ 글로벌 설치를 원하지 않는다면 `npx` 또는 `pnpm dlx`로 실행할 있습니다.
33
43
 
34
44
  ```bash
35
- # 루트에서 한 번만
36
- npm i -g byuckchon-frontend-cli
37
-
38
- # 각 앱마다 따로 셋업
39
- cd apps/web && bc adopt # apps/web/bc.config.json 생성
40
- cd apps/mobile && bc adopt # apps/mobile/bc.config.json 생성
45
+ # npm
46
+ npx byuckchon-frontend-cli adopt
41
47
 
42
- # 일할 땐 그 앱 디렉토리에서 실행
43
- cd apps/web && bc # apps/web/bc.config.json 을 자동으로 읽어감
48
+ # pnpm
49
+ pnpm dlx byuckchon-frontend-cli adopt
44
50
  ```
45
51
 
46
- `bc` 실행 디렉토리에서 위로 거슬러 올라가며 가장 가까운 `bc.config.json` 을 찾습니다.
47
- 즉 모노레포 루트에 `bc.config.json` 이 없고 `apps/web/bc.config.json` 만 있으면,
48
- `apps/web/somewhere/deeper/...` 에서 `bc` 를 쳐도 `apps/web/bc.config.json` 이 잡힙니다.
52
+ 설치가 완료되면 다음 명령어를 모두 사용할 있습니다.
49
53
 
50
- > 만약 `pnpm add byuckchon-frontend-cli` (글로벌 플래그 없이) 한 상태에서 `bc` 가
51
- > 안 먹는다면, 이건 패키지 의존성으로 박혀서 그래요. `pnpm remove byuckchon-frontend-cli`
52
- > 후 위처럼 `pnpm add -g` 로 다시 설치해주세요.
54
+ ```bash
55
+ bc
56
+ byuckchon-frontend-cli
57
+ ```
53
58
 
54
- ## 명령
55
59
 
56
- ### `bc init` — 새 프로젝트 만들기
60
+ ### 모노레포 사용
57
61
 
58
- ```bash
59
- bc init
60
- ```
62
+ CLI 자체는 컴퓨터에 **한 번만 글로벌 설치**하면 됩니다.
61
63
 
62
- 프로젝트 이름, 프레임워크, **기본 AI 모델, Figma URL, OpenAPI URL** 묻고
63
- 새 폴더에 코드 + `bc.config.json` 까지 만들어 줍니다.
64
+ 다만 `bc`는 현재 실행한 디렉터리부터 상위 디렉터리로 이동하면서 가장 가까운 `bc.config.json`을 찾기 때문에
64
65
 
65
- ### 에이전트 모드 AI 실제 파일을 만들고 고친다 (v1.5+)
66
+ 앱이나 패키지 디렉터리마다 별도로 두어 실행도 해당 디렉터리 마다 실행하는걸 권장합니다.
66
67
 
67
- `bc chat` 이상 채팅창에 코드 블록을 출력만 하지 않습니다. **모델이 직접 툴을 호출해서
68
- 파일을 만들고/고칩니다** (Codex CLI / Cursor agent 와 같은 컨셉).
68
+ 앱마다 설정 파일을 분리하면 프로젝트에 맞는 `detected.*` 정보가 생성되므로, RAG 컨텍스트도 정확해집니다.
69
69
 
70
- 내장된 툴:
71
70
 
72
- | 툴 | 동작 |
73
- | ------------- | ------------------------------------------------------ |
74
- | `read_file` | 프로젝트 내 파일/디렉터리 내용 읽기 |
75
- | `list_files` | 글롭 패턴으로 파일 나열 |
76
- | `search_code` | RAG 인덱스 의미 기반 검색 (인덱스 있어야 함) |
77
- | `search_openapi` | OpenAPI 스펙에서 엔드포인트 검색 (path/summary/tag) — 큰 스펙도 OK |
78
- | `get_openapi_endpoint` | 특정 엔드포인트 상세 (params/requestBody/responses, `$ref` 인라인) |
79
- | `write_file` | 새 파일 생성 또는 통째 덮어쓰기 |
80
- | `edit_file` | 유일한 `old_string → new_string` 으로 부분 수정 (안전) |
81
- | `fetch_figma` / `fetch_figma_image` / `fetch_figma_styles` | Figma 디자인/이미지/토큰 |
71
+ #### 모노레포 권장 사용 흐름
82
72
 
83
- 모델은 한 턴 안에서 **최대 12 step** 까지 툴을 자유롭게 호출합니다. 일반적인 흐름:
84
- 1. `list_files` `src/api/` 구조 파악
85
- 2. `read_file` 기존 모듈 2~3개 읽고 컨벤션 학습
86
- 3. `search_code` 로 fetch 래퍼 / hook 패턴 검색
87
- 4. `write_file` 로 `api/`, `service/`, `hook/`, `schema/`, `types/` 파일들을 한꺼번에 생성
88
- 5. 마지막에 만든 파일 목록과 import 가이드를 짧게 요약
73
+ ```bash
74
+ # 1. CLI 글로벌 설치
75
+ pnpm add -g byuckchon-frontend-cli
89
76
 
90
- 모든 파일 경로는 `bc.config.json` 있는 디렉터리(=프로젝트 루트) 하위로만 강제됩니다.
91
- `../` 이나 절대경로 탈출은 에러로 거부.
77
+ # 2. 앱별 설정 생성
78
+ cd apps/web && bc adopt
79
+ cd ../mobile && bc adopt
92
80
 
93
- > **승인 게이트 (Phase 4 예정):** 지금은 모델이 write/edit 을 호출하면 즉시 디스크에 반영됩니다.
94
- > 안전망은 git diff. 매 작업 후 `git status` / `git diff` 로 확인하고, 마음에 안 들면 `git checkout .` 으로 되돌리세요.
95
- > 다음 버전에서 per-file 승인(`y/n/v`) 옵션 추가 예정.
81
+ # 3. 작업할 앱에서 실행
82
+ cd ../web && bc
83
+ ```
96
84
 
97
- ### Figma 연동 — 디자인 → 코드 (v1.6+)
98
85
 
99
- 채팅 안에서 모델이 직접 Figma REST API 를 호출해서 디자인 정보를 읽고 컴포넌트/페이지를 만듭니다.
86
+ ### bc 명령어 오작동 해결 방법
100
87
 
101
- #### 사용자가 번만 하는 셋업
88
+ 다음처럼 글로벌 옵션 없이 설치했다면 프로젝트 의존성으로 추가됩니다.
102
89
 
103
90
  ```bash
104
- # 1) Figma → Settings → Personal access tokens → "Generate new token"
105
- # Read 권한만 있으면 충분 (file 읽기 / image export 둘 다 read 로 됨)
91
+ pnpm add byuckchon-frontend-cli
92
+ ```
106
93
 
107
- # 2) bc init이 만든 .env의 FIGMA_TOKEN 채우기 (gitignore 됨)
108
- FIGMA_TOKEN=figd_xxxxxxxxxxxxxxxx
94
+ 경우 터미널에서 `bc` 명령어가 바로 실행되지 않을 있습니다.
95
+
96
+ 먼저 프로젝트 의존성에서 제거합니다.
109
97
 
110
- # 3) bc.config.json 의 design.figma 에 파일/노드 URL 박기 (bc adopt 시점에 입력하거나 직접 편집)
98
+ ```bash
99
+ pnpm remove byuckchon-frontend-cli
111
100
  ```
112
101
 
113
- `bc.config.json` 예시:
102
+ 그다음 글로벌로 다시 설치합니다.
114
103
 
115
- ```json
116
- {
117
- "design": {
118
- "figma": "https://www.figma.com/design/ABC123/Marketd-Admin?node-id=2-105",
119
- "figmaTokenEnv": "FIGMA_TOKEN"
120
- }
121
- }
104
+ ```bash
105
+ pnpm add -g byuckchon-frontend-cli
122
106
  ```
123
107
 
124
- #### 디자이너 협업이 필요한 부분
108
+ 설치 다음 명령어로 확인할 수 있습니다.
125
109
 
126
- | 디자이너 측 작업 | 왜 필요? |
127
- | --------------------------------------- | --------------------------------------------------------- |
128
- | 프레임/컴포넌트에 **의미 있는 이름** | `Frame 21` 이 아니라 `Card/Product/Sold-out` 처럼 의미별로 — AI 가 이름으로 컴포넌트 이름과 variant 를 추론합니다. |
129
- | **Auto layout** 적용 | 안 쓰면 픽셀 좌표만 떨어져 `position: absolute` 코드가 나옵니다. Auto layout 이면 자동으로 `flex`/`gap` 변환. |
130
- | **로컬 스타일** 등록 (color/text) | "Brand/Primary" 같은 스타일을 등록해두면 `fetch_figma_styles` 로 디자인 토큰을 일괄 추출해서 Tailwind 테마로 바로 박을 수 있어요. |
131
- | **Components** 화 (♦ 마름모 아이콘) | 반복 UI 가 component 면 모델이 "이거 디자인 시스템 컴포넌트구나" 인식 → 코드에서도 재사용 컴포넌트를 만듭니다. |
132
- | frame 별로 **"Copy link to selection"** | 일반 share link 는 파일 전체. 특정 frame URL 을 받아야 AI 가 그것만 정확히 가져옵니다. |
110
+ ```bash
111
+ bc
112
+ ```
133
113
 
134
- #### 채팅에서 쓰는 법
114
+ ## 주요 기능
135
115
 
136
- ```text
137
- you › 새 멤버 카드 컴포넌트 만들어줘. 디자인은 https://www.figma.com/design/.../?node-id=12-34 이거 참고해서.
138
-
139
- 🔧 fetch_figma("https://www.figma.com/design/.../?node-id=12-34")
140
- 🔧 list_files("src/components/**/Card*")
141
- 🔧 read_file("src/components/Card/ProductCard.tsx")
142
- 🆕 생성 src/components/Card/MemberCard/MemberCard.tsx (52 lines)
143
- 🆕 생성 src/components/Card/MemberCard/index.ts (3 lines)
144
- bc › Auto layout 이 row 였고 padding 12/16 이었어요. MemberCard 만들었습니다.
145
- 기존 ProductCard 와 같은 폴더 컨벤션을 따랐어요.
146
- ```
116
+ ### 프로젝트 생성: `bc init`
147
117
 
148
- 내장 Figma 툴:
118
+ `bc init`은 다음 두 형태를 지원합니다.
149
119
 
150
- | | 동작 |
151
- | --------------------- | ------------------------------------------------------------- |
152
- | `fetch_figma` | 노드 트리 (autoLayout / fills / text / size / children) 가져오기 |
153
- | `fetch_figma_image` | 프레임을 PNG/JPG/SVG export public asset 으로 저장도 가능 |
154
- | `fetch_figma_styles` | 파일의 컬러/타이포 토큰 목록 → 디자인 토큰 generator 만들 때 |
120
+ | 형태 | 생성 결과 | 적합한 경우 |
121
+ | --- | --- | --- |
122
+ | 단일 프로젝트 | React(Vite) 또는 Next.js(App Router) | 하나의 서비스를 빠르게 시작할 |
123
+ | 모노레포 | pnpm + Turborepo 루트, `apps/`, `packages/` | 여러 앱과 공용 패키지를 함께 관리할 |
155
124
 
156
- > Figma 응답은 자동으로 압축됩니다 (자식 60개, 깊이 8 까지). 너무 프레임은 더 작은
157
- > 자식 frame URL 을 줘서 분할 정복하세요.
125
+ 생성 프로젝트에는 TypeScript, ESLint, Prettier, Tailwind, `bc.config.json`, API 코드 가이드가
126
+ 기본으로 포함됩니다.
158
127
 
159
- ### 팀 컨벤션 문서(.md) 자동 주입 (v1.8+)
128
+ ```bash
129
+ bc init
130
+ ```
160
131
 
161
- FE 전반의 규칙(폴더 구조, 네이밍, 스웨거 → 코드 변환 규칙 등)을 `.md` 로 적어두면
162
- **매 chat 세션에 시스템 프롬프트로 자동 주입**됩니다. AI 는 기존 코드 패턴보다 이 문서를 우선합니다.
132
+ ### 기존 프로젝트 연결: `bc adopt`
163
133
 
164
- **파일명은 고정이 아닙니다.** 아무 경로나 `bc.config.json` `docs` 적으면 됩니다.
165
- 적지 않으면 관례 파일명(`bc.md`, `.bc/conventions.md`, `AGENTS.md`, `FRONTEND.md`, `docs/frontend.md`)을 자동 탐지합니다.
134
+ `bc adopt`는 `package.json`과 디렉터리를 스캔하여 bc 설정만 세팅합니다.
166
135
 
167
- ```json
168
- {
169
- "docs": ["docs/fe-conventions.md", "docs/api-guide.md"]
170
- }
136
+ ```bash
137
+ cd <프로젝트-루트>
138
+ bc adopt
171
139
  ```
172
140
 
173
- - 문서당 최대 24KB, 전체 48KB 까지 (토큰 폭발 방지). 헤더에 `docs` 줄로 로드된 파일이 표시됩니다.
174
- - (고급) 항목을 `{ "path": "...", "when": { "framework": "next" } }` 형태로 적으면 프레임워크별 조건부 주입도 가능합니다.
175
-
176
- #### API 코드 컨벤션 .md 자동 포함
141
+ 모노레포 디렉터리에서 실행하면 앱별 `bc.config.json`을 만들고, PR 리뷰 자동화 파일은
142
+ 모노레포 루트에 번만 둡니다.
177
143
 
178
- `bc init` / `bc adopt` 를 실행하면 **API 코드 생성 가이드(`api-codegen.md`)가 프레임워크에 맞는 위치에 자동으로 깔립니다.**
144
+ ### AI와 코드 작업하기: `bc chat`
179
145
 
180
- | 프레임워크 | 위치 |
181
- | --- | --- |
182
- | React (Vite/CRA 등) | `src/api/api-codegen.md` |
183
- | Next.js | `src/lib/api/api-codegen.md` |
146
+ `bc`만 입력해도 채팅을 시작할 수 있습니다.
184
147
 
185
- - 이 파일은 `bc.config.json` 의 `docs` 에 자동 등록되어 **chat 시작 시 주입**됩니다.
186
- - 하나의 문서에 React의 axios 규칙과 Next.js의 fetch 및 Server/Client 경계 규칙이 함께 들어갑니다.
187
- - 이미 파일이 있으면 덮어쓰지 않습니다.
148
+ ```bash
149
+ bc
188
150
 
189
- ### OpenAPI / 코드 컨텍스트 자동 주입 (v1.4+)
151
+ # 한글 입력이 불안정하면 단순 입력 모드 사용
152
+ bc chat --plain
153
+ ```
190
154
 
191
- `bc.config.json` `api.openapi` 코드 인덱스는 **chat 시작할 알아서 준비됩니다.**
192
- 즉, 명령을 외울 필요 없이 그냥 `bc` 만 치고 자연어로 일을 시키면 됩니다.
155
+ AI는 단순히 코드 블록을 제안하는 그치지 않고, 다음 작업을 수행할 수 있습니다.
193
156
 
194
- - **OpenAPI**: chat 시작 시 자동 fetch + 1시간 디스크 캐시 → 엔드포인트 요약을 시스템 프롬프트에 박음.
195
- - 헤더에 `openapi` 줄로 표시. 캐시 hit 면 `(cached)`, fresh fetch 면 `(live)`.
196
- - **세션 서버가 스펙을 바꿔도 자동 대응 (v1.10+)**: `search_openapi` / `get_openapi_endpoint` 가
197
- 캐시에서 엔드포인트를 찾으면 **딱 한 번 최신본을 다시 받아 재검색**합니다 (`🔄 OpenAPI 스펙 새로고침`).
198
- 남용 방지를 위해 세션당 횟수·간격이 제한됩니다. "방금 스웨거 업데이트했어, 다시 읽어줘" 라고 하면
199
- 즉시 강제 새로고침(`refresh_openapi`)합니다.
200
- - **코드 인덱스**: chat 시작 시 인덱스 파일이 없으면 **백그라운드에서 자동 빌드**.
201
- - 빌드 중에는 화면에 `📚 인덱싱 중 ...` 진행 표시. 끝나면 `✓` 메시지 한 줄.
202
- - OpenAI 키가 없으면 빌드를 건너뛰고 도움 메시지를 띄움 (Anthropic 은 임베딩 API 미제공).
203
- - **수동 컨트롤이 필요할 때:**
157
+ - 파일과 디렉터리 읽기
158
+ - 코드·OpenAPI 검색
159
+ - 파일 생성 부분 수정
160
+ - Figma 데이터와 이미지 조회
204
161
 
205
- | 시나리오 | 명령 |
206
- | --------------------------------------- | --------------------------------------------------- |
207
- | 인덱스 다시 빌드 (chat 안에서) | `/index` 또는 `/index rebuild` |
208
- | 인덱스 다시 빌드 (chat 밖에서) | `bc index` / `bc index --rebuild` |
209
- | 인덱스 상태/검색 | `bc index status` / `bc index search "토큰 갱신"` |
210
- | OpenAPI → `*.gen.ts` 결정론 생성 | `bc gen api-types` (필요할 때만, AI 가 권하기도 함) |
211
- | RAG 잠시 끄기 | chat 안에서 `/rag off` |
162
+ 파일 쓰기와 수정은 `bc.config.json`이 있는 프로젝트 루트 하위에서만 허용됩니다. 작업 뒤에는
163
+ `git diff`와 `git status`로 변경 사항을 확인하는 것을 권장합니다.
212
164
 
213
- #### 예시 진짜로 명령 안 외우고 시키기
165
+ ### 문서와 코드베이스 RAG
214
166
 
215
- `bc.config.json` Swagger URL 박혀 있으면:
167
+ 팀 컨벤션 문서를 `bc.config.json`의 `docs`에 등록하면, 채팅 시작 AI 문맥으로 자동 주입됩니다.
216
168
 
217
- ```text
218
- you › api/seller 부분 GET~POST 내 api 폴더 구조 참고해서 코드 짜줘
169
+ ```json
170
+ {
171
+ "docs": ["docs/frontend-conventions.md", "docs/api-guide.md"]
172
+ }
219
173
  ```
220
174
 
221
- 모델이 자동 주입된 OpenAPI 요약 + RAG 로 가져온 `src/api/*` 컨텍스트를 보고
222
- 해당 프로젝트 컨벤션(예: 기존 fetch 래퍼, axios 인스턴스, TanStack Query 훅 패턴)에 맞춰 코드를 짜 줍니다.
223
- 타입이 부족하면 모델이 **"`bc gen api-types` 한 번 돌려달라"** 고 직접 안내해 줍니다.
175
+ 문서를 따로 등록하지 않아도 `bc.md`, `.bc/conventions.md`, `AGENTS.md`, `FRONTEND.md`,
176
+ `docs/frontend.md` 같은 관례 파일을 자동으로 찾습니다.
224
177
 
225
- > 비결정론적 코드 생성보다 결정론적인 타입 생성이 안전한 부분(예: `*.gen.ts`) 별도 명령으로 빼두고,
226
- > 컴포넌트/엔드포인트 호출 코드는 채팅으로 처리하는 하이브리드 구조입니다.
227
-
228
- #### `bc gen api-types` (선택) — OpenAPI → TS 타입 결정론 생성
178
+ 코드 인덱스는 채팅 자동으로 준비되며, 수동으로 관리할 수도 있습니다.
229
179
 
230
180
  ```bash
231
- bc gen api-types # bc.config.json 의 api.openapi 사용
232
- bc gen api-types --source https://api.dev/openapi.json # URL 직접
233
- bc gen api-types --source ./openapi.yaml # 로컬 파일
234
- bc gen api-types --out src/api/types.gen.ts # 출력 경로 지정 (기본값)
181
+ bc index
182
+ bc index --rebuild
183
+ bc index status
184
+ bc index search "토큰 갱신"
235
185
  ```
236
186
 
237
- ```ts
238
- import type { paths, components } from '@/api/types.gen';
239
-
240
- type ListUsersResponse =
241
- paths['/users']['get']['responses']['200']['content']['application/json'];
242
- type User = components['schemas']['User'];
243
- ```
187
+ ### OpenAPI와 타입 생성
244
188
 
245
- ### `bc adopt` 기존 프로젝트에 bc 설정만 깔기
189
+ `bc.config.json`의 `api.openapi`에 스펙 URL을 설정하면, AI가 채팅 중 엔드포인트와 스키마를
190
+ 검색할 수 있습니다. 타입 파일이 필요할 때는 결정론적인 코드 생성 명령을 사용하세요.
246
191
 
247
192
  ```bash
248
- cd 내-Expo-프로젝트
249
- bc adopt
193
+ # bc.config.json에 등록한 OpenAPI URL 사용
194
+ bc gen api-types
195
+
196
+ # URL 또는 파일을 직접 지정
197
+ bc gen api-types --source https://api.example.com/openapi.json
198
+ bc gen api-types --source ./openapi.yaml
250
199
  ```
251
200
 
252
- `package.json` 디렉터리를 스캔해서 **프레임워크/언어/스타일/라우팅/패키지 매니저** 자동 감지하고,
253
- Figma·OpenAPI URL 만 추가로 묻고 `bc.config.json` 을 생성합니다.
254
- 필수 의존성(`@tanstack/react-query`, `zod`, React 계열의 `axios`)이 없으면 감지한 패키지 매니저로
255
- 자동 설치하며, 기존 소스 코드는 건드리지 않습니다.
201
+ 생성 기본 경로는 `src/api/types.gen.ts`이며, `--out` 옵션으로 바꿀 있습니다.
256
202
 
257
- 지원 감지: Next.js · Expo · Electron · Vite+React · Remix · CRA · 일반 React.
203
+ ### Figma 연동
258
204
 
259
- ### `bc chat` AI 대화 (ink TUI)
205
+ Figma 파일 또는 노드 URL을 등록하고 개인 액세스 토큰을 `.env`에 넣으면, AI가 Figma 정보를
206
+ 구현 맥락으로 활용할 수 있습니다.
260
207
 
261
208
  ```bash
262
- bc # 인자 없이도 chat 진입 (제일 짧은 단축키)
263
- bc start # chat 의 alias
264
- bc chat # ink 풀 TUI (기본)
265
- bc chat --model claude-fable-5 # 이번 세션만 모델 지정
266
- bc chat --plain # 단순 readline 모드
267
- bc chat --once "useEffect 의존성 배열 누락된 거 어떻게 찾아?" # 1회성 호출 (CI/스크립트)
268
- bc chat -c # 가장 최근 세션 이어가기
269
- bc chat --list-history # 저장된 세션 목록
270
- bc chat --resume 2026-06-19_15-23-45 # 특정 세션 이어가기
209
+ FIGMA_TOKEN=figd_xxxxxxxxxxxxxxxx
271
210
  ```
272
211
 
273
- **슬래시 명령 자동완성:** 입력창에서 `/` 쳐도 사용 가능한 명령이 메뉴로 펼쳐집니다.
274
- 계속 타이핑하면 필터링되고, `↑↓` 로 이동, `Enter` 또는 `Tab` 으로 자동완성, `Esc` 로 취소.
275
-
276
- 대화 세션은 자동으로 디스크에 저장됩니다:
277
-
278
- - 프로젝트 안에서 실행 → `<projectRoot>/.bc/history/<id>.json` (`.bc/` 는 gitignore 됨)
279
- - 그 외 → `~/.bc/history/<cwd-hash>/<id>.json`
212
+ 채팅에서 Figma URL을 함께 전달하면 노드 구조, 이미지, 스타일 정보를 조회할 수 있습니다.
280
213
 
281
- 매 턴마다 자동 저장돼서 터미널이 닫히거나 충돌해도 `bc chat -c` 로 바로 복구할 수 있습니다.
282
-
283
- TTY 안에서 자동으로 ink 모드로 뜨고, 파이프/CI 같은 비-TTY 환경에서는
284
- `--plain` 모드로 자동 폴백합니다.
285
-
286
- 세션 내 슬래시 명령:
214
+ ```text
215
+ 이 Figma 화면을 참고해 멤버 카드 컴포넌트를 만들어줘.
216
+ https://www.figma.com/design/.../?node-id=12-34
217
+ ```
287
218
 
288
- | 명령 | 동작 |
289
- | ------------------- | ------------------------------------------ |
290
- | `/help` | 도움말 |
291
- | `/clear` | 대화 컨텍스트 초기화 |
292
- | `/history` | 이전 대화 선택 해당 컨텍스트 이어가기 |
293
- | `/retry` | 마지막 사용자 요청 다시 실행 |
294
- | `/model [id]` | 세션 모델 변경 (인자 없으면 목록) |
295
- | `/figma-link <url\|off>` | 프로젝트 Figma 링크 변경 또는 해제 |
296
- | `/openapi-link <url\|off>` | 프로젝트 OpenAPI 링크 변경 또는 해제 |
297
- | `/cost` | 누적 토큰/비용 |
298
- | `/image <path>` | 다음 메시지에 이미지 첨부 (Vision 모델 권장) |
299
- | `/paste` | 클립보드 이미지 첨부 (macOS, `pngpaste` 필요) |
300
- | `/attachments` | 현재 첨부 목록 |
301
- | `/clear-attach` | 첨부 비우기 |
302
- | `/index [rebuild]` | 코드 인덱스 빌드/재빌드 (자동 빌드된 거 갱신) |
303
- | `/rag on\|off` | RAG 컨텍스트 주입 즉석 토글 |
304
- | `/exit` | 종료 (`Ctrl+C` 도 가능) |
219
+ #### 디자이너 협업
220
+ | 디자이너 측 작업 | 요청 이유 |
221
+ | --------------------------------------- | --------------------------------------------------------- |
222
+ | 프레임/컴포넌트에 **의미 있는 이름** | `Frame 21` 이 아니라 `Card/Product/Sold-out` 처럼 의미별로 — AI 가 이름으로 컴포넌트 이름과 variant 를 추론합니다. |
223
+ | **Auto layout** 적용 | 쓰면 픽셀 좌표만 떨어져 `position: absolute` 코드가 나옵니다. Auto layout 이면 자동으로 `flex`/`gap` 변환. |
224
+ | **로컬 스타일** 등록 (color/text) | "Brand/Primary" 같은 스타일을 등록해두면 `fetch_figma_styles` 로 디자인 토큰을 일괄 추출해서 Tailwind 테마로 바로 박을 수 있어요. |
225
+ | **Components** 화 (♦ 마름모 아이콘) | 반복 UI component 모델이 "이거 디자인 시스템 컴포넌트구나" 인식 → 코드에서도 재사용 컴포넌트를 만듭니다. |
226
+ | frame 별로 **"Copy link to selection"** | 일반 share link 파일 전체. 특정 frame URL 을 받아야 AI 가 그것만 정확히 가져옵니다. |
305
227
 
306
- Ink 모드에서 `/history`를 실행하면 `↑↓`로 세션을 선택하고 `Enter`로 불러올 수 있습니다.
307
- 선택한 세션에서 `d`를 누른 뒤 `y`로 확인하면 해당 기록을 삭제합니다. 메시지를 한 번도
308
- 보내지 않고 종료한 빈 세션은 저장되거나 목록에 표시되지 않습니다.
228
+ ### ESLint Convention Review
309
229
 
310
- 이미지 첨부는 png / jpg / jpeg / gif / webp 만 지원하며,
311
- Claude / GPT 비전 모델에 멀티파트 메시지로 전달됩니다.
230
+ `bc init`과 `bc adopt`는 프로젝트 루트에 아래 파일을 준비합니다.
312
231
 
313
- **이미지 첨부 3가지 방법:** (ink·plain 모드 모두 지원 — v1.6.1+)
314
- 1. `/image ./shot.png` — 경로 직접
315
- 2. **드래그 & 드롭** — `/image ` 까지 입력 후, Finder 에서 파일을 터미널 위로 끌어다 놓으면 절대경로가 자동 입력됩니다. Enter.
316
- 3. `/paste` — **macOS 한정**, 클립보드의 이미지(예: `Cmd+Shift+4` 스크린샷 또는 Finder 에서 `Cmd+C` 한 이미지)를 바로 첨부.
317
- - 사전에 `brew install pngpaste` 한 번 필요.
232
+ ```text
233
+ .github/workflows/eslint-convention-review.yml
234
+ tools/eslint-rules/
235
+ tools/post-eslint-review-comments.cjs
236
+ ```
318
237
 
319
- > **터미널에서 `Cmd+V` 직접 붙이기는 되나?** 터미널 앱은 클립보드의 "이미지 바이트" 를
320
- > 앱에 전달하지 않고 텍스트만 줍니다 (OS/터미널 공통 제약). 그래서 클립보드 이미지를 붙이려면
321
- > `/paste` 가 `pngpaste` 로 클립보드를 직접 읽어 첨부합니다 — `Cmd+C` → 입력창에 `/paste` → Enter.
238
+ PR이 `dev` 브랜치를 대상으로 때, workflow가 기계적으로 판별 가능한 규칙을 검사하고
239
+ 변경 줄에 댓글을 게시합니다.
322
240
 
323
- > **썸네일 미리보기:** iTerm2 · kitty · WezTerm 에서는 plain 모드에서 첨부 직후 작은 썸네일이
324
- > 인라인으로 표시됩니다. 터미널은 파일명 + 용량만 표시됩니다 (터미널이 이미지 렌더링을
325
- > 지원하지 않기 때문).
241
+ | 구분 | 담당 | 결과 |
242
+ | --- | --- | --- |
243
+ | 일반 lint | 기존 ESLint 규칙 | Actions annotation |
244
+ | Convention Review | 파일명, export 방식, boolean 변수명 등 | PR 인라인 `BLOCKING` 또는 `WARNING` 댓글 |
245
+ | AI 리뷰 | 설계·예외 처리·비즈니스 판단 | 별도 AI 리뷰 workflow에서 구성 |
326
246
 
327
- ### 한글 입력이 자꾸 씹힐 (v1.6+)
247
+ 같은 지적은 숨김 marker를 기준으로 중복 게시하지 않고, 메시지가 바뀌면 기존 댓글을 갱신합니다.
248
+ 모노레포에서는 workflow와 `tools/`가 루트에 한 번만 존재하며, PR에서 변경된 TypeScript 파일을
249
+ 대상으로 검사합니다.
328
250
 
329
- `ink` TextInput 은 macOS 한글 IME 의 조합 단계와 충돌해 글자가 한 박자 늦게 보이거나
330
- 빠뜨려지는 경우가 있습니다 — ink-text-input 의 알려진 한계입니다.
251
+ ### 설정과 세션 관리
331
252
 
332
- **가장 확실한 해결**: 입력 모드를 plain(readline) 으로 영구 전환
253
+ 전역 설정은 `~/.bc/config.json`, 프로젝트 설정은 `<project>/bc.config.json`에 저장됩니다.
333
254
 
334
255
  ```bash
335
- bc config set-ui plain # 글로벌로 plain 모드 고정
336
- # 한글 입력 안정, 모든 기본 기능 동작 (RAG, OpenAPI, Figma 툴 호출까지)
337
- # 단, ink 전용 기능 일부 미지원: 슬래시 자동완성 메뉴, 인라인 이미지 첨부
256
+ bc config show
257
+ bc config set-model
258
+ bc config set-key anthropic
259
+ bc config set-key openai
260
+ bc config set-ui plain
338
261
  ```
339
262
 
340
- ink 다시 돌아오려면:
263
+ 대화 기록은 프로젝트 안에서는 `.bc/history/`에, 프로젝트 밖에서는 사용자 설정 디렉터리에
264
+ 저장됩니다. 최근 대화를 이어가려면 다음 명령을 사용하세요.
265
+
341
266
  ```bash
342
- bc config set-ui ink
267
+ bc chat -c
268
+ bc chat --list-history
269
+ bc chat --resume <session-id>
343
270
  ```
344
271
 
345
- 일회성으로 plain 만 쓰고 싶으면 `bc chat --plain`.
346
-
347
- ### `bc config` — 설정
348
272
 
349
- ```bash
350
- bc config show # 현재 적용 중인 설정 확인
351
- bc config set-model # 대화형 모델 선택
352
- bc config set-model claude-sonnet-5 # 직접 지정
353
- bc config set-key anthropic # 키 안전 입력 (가려짐)
354
- bc config set-key anthropic sk-ant-... # 직접 지정
355
- bc config set-gateway https://ai.example.com # 사내 게이트웨이 모드
356
- bc config set-gateway # 게이트웨이 해제 (BYOK 모드)
357
- bc config set-ui plain # 한글 IME 안정 모드
358
- bc config set-ui ink # 풀 TUI 복귀
359
- ```
273
+ #### 세션 내 슬래시 명령
360
274
 
361
- ## 설정 위치
275
+ 채팅 `/`를 입력하면 사용 가능한 명령이 자동완성 메뉴로 표시됩니다.
362
276
 
363
- ```
364
- ~/.bc/config.json # 글로벌 API 키, 기본 모델 (chmod 600)
365
- <project>/bc.config.json # 프로젝트별 Figma/OpenAPI 링크, 기본 모델 강제
366
- .env # 프로젝트 ANTHROPIC_API_KEY (자동 로드)
367
- ```
277
+ | 명령 | 설명 |
278
+ | --- | --- |
279
+ | `/clear` | 현재 대화 컨텍스트 비우기 |
280
+ | `/history` | 프로젝트의 이전 대화 목록 보기 |
281
+ | `/retry` | 마지막 사용자 요청 다시 실행 |
282
+ | `/model <id>` | 현재 세션의 모델 변경. 인자가 없으면 모델 목록 표시 |
283
+ | `/figma-link <url\|off>` | 프로젝트 Figma 링크 설정 또는 해제 |
284
+ | `/openapi-link <url\|off>` | 프로젝트 OpenAPI 링크 설정 또는 해제 |
285
+ | `/cost` | 현재 세션의 누적 토큰과 비용 확인 |
286
+ | `/image <path>` | 이미지 첨부. Finder에서 파일을 터미널로 끌어다 놓아 경로를 넣을 수도 있음 |
287
+ | `/paste` | 클립보드의 이미지 또는 스크린샷 첨부. macOS에서 `pngpaste` 필요 |
288
+ | `/attachments` | 현재 첨부 목록 보기 |
289
+ | `/clear-attach` | 현재 첨부 목록 비우기 |
290
+ | `/index` | 코드베이스 인덱스 즉시 빌드 또는 갱신 |
291
+ | `/rag on\|off` | 코드베이스 RAG 컨텍스트 사용 여부 전환 |
292
+ | `/exit` | 채팅 종료. `Ctrl+C`로도 종료 가능 |
368
293
 
369
- 우선순위: **환경변수 > 글로벌 키**, **프로젝트 모델 > 글로벌 모델**.
370
294
 
371
295
  ## 지원 모델
372
296
 
@@ -379,14 +303,26 @@ bc config set-ui ink # 풀 TUI 복귀
379
303
  | `gpt-5` | openai | 일반 코드 |
380
304
  | `gpt-5-mini` | openai | 저렴한 OpenAI |
381
305
 
382
- ## 토큰/비용 안전장치
383
306
 
384
- - 세션 누적이 `limits.warnAtTokens` 를 넘으면 경고 출력.
385
- - 한 요청 추정 토큰이 `limits.confirmAtTokens` 를 넘으면 확인.
386
- - BYOK 기본 외부에서 깔아도 우리 비용은 0.
387
- - 사내에서는 게이트웨이 모드로 사용량 모니터링 가능.
307
+ ## 제한 사항
308
+
309
+ - AI의 파일 생성·수정은 현재 즉시 반영됩니다. 작업 전후로 Git을 사용해 변경 사항을 검토하세요.
310
+ - 코드베이스 RAG의 임베딩에는 OpenAI API 키가 필요합니다. Anthropic 키만으로는 인덱스를 만들 수 없습니다.
311
+ - Figma 연동에는 개인 액세스 토큰이 필요하며, 매우 큰 프레임은 작은 노드 단위로 나누어 조회하는 편이 좋습니다.
312
+ - ESLint Convention Review는 기본적으로 `dev` 대상 PR에서 실행됩니다. 다른 기본 브랜치를 쓰면
313
+ 생성된 workflow의 `branches`를 수정해야 합니다.
314
+ - 현재 `BLOCKING`은 PR 댓글 분류입니다. workflow 자체를 실패시키고 merge를 강제 차단하려면
315
+ ESLint 종료 코드 처리와 GitHub branch protection 설정이 추가로 필요합니다.
316
+ - 외부 fork PR은 GitHub token 권한 때문에 인라인 댓글 작성이 제한될 수 있습니다.
317
+ - 기존 모노레포에 `bc adopt`를 적용할 때, 모노레포용 `review.config.mjs`는
318
+ `packages/config-eslint/react.js` 구조를 전제로 합니다. ESLint 설정 구조가 다르면 해당 import를
319
+ 프로젝트에 맞게 조정해야 합니다.
320
+ - AI Code Review와 typecheck·lint·build·test를 담당하는 PR Check workflow는 현재 자동 생성 대상이
321
+ 아닙니다. 팀의 AI 제공자·테스트 전략에 맞춰 별도로 추가해야 합니다.
388
322
 
389
- ## 로드맵
323
+ ## 제품 로드맵
324
+
325
+ 아래 항목은 방향성으로, 일정과 세부 구현은 변경될 수 있습니다.
390
326
 
391
327
  - [x] Phase 1: provider 추상화, 글로벌/프로젝트 설정, 스트리밍 REPL
392
328
  - [x] Phase 2a: ink 기반 풀 TUI, 이미지 첨부 (`/image`)
@@ -402,7 +338,6 @@ bc config set-ui ink # 풀 TUI 복귀
402
338
  - [ ] v1.8.0 — write/edit 승인 게이트 (`y/n/v/q`), diff 미리보기
403
339
  - [ ] Phase 3c-2: Figma 실 fetch (URL → 노드 트리 → 컴포넌트 인텐트)
404
340
  - [ ] Phase 4: `bc gen component/page` (AST 편집 + 검증 루프), `/apply` diff 미리보기
405
-
406
341
  ## 라이선스
407
342
 
408
- MIT
343
+ [MIT License](LICENSE)를 따릅니다.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "byuckchon-frontend-cli",
3
- "version": "1.9.6",
3
+ "version": "1.9.7",
4
4
  "description": "Byuckchon Frontend Workbench — project starter + AI chat + codebase RAG + OpenAPI codegen",
5
5
  "type": "module",
6
6
  "engines": {