sales-frontend-gemini-cli 0.4.2 → 0.4.4

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.
Files changed (47) hide show
  1. package/dist/common/helper.cjs +581 -53
  2. package/dist/common/helper.cjs.map +1 -1
  3. package/dist/common/helper.d.cts +114 -3
  4. package/dist/common/helper.d.ts +114 -3
  5. package/dist/common/helper.js +570 -54
  6. package/dist/common/helper.js.map +1 -1
  7. package/dist/common/types.d.cts +24 -1
  8. package/dist/common/types.d.ts +24 -1
  9. package/dist/pr-review/claude/claude-commander.cjs +60 -12
  10. package/dist/pr-review/claude/claude-commander.cjs.map +1 -1
  11. package/dist/pr-review/claude/claude-commander.js +60 -12
  12. package/dist/pr-review/claude/claude-commander.js.map +1 -1
  13. package/dist/pr-review/claude/installation-claude.cjs +42 -6
  14. package/dist/pr-review/claude/installation-claude.cjs.map +1 -1
  15. package/dist/pr-review/claude/installation-claude.js +42 -6
  16. package/dist/pr-review/claude/installation-claude.js.map +1 -1
  17. package/dist/pr-review/codex/codex-commander.cjs +63 -12
  18. package/dist/pr-review/codex/codex-commander.cjs.map +1 -1
  19. package/dist/pr-review/codex/codex-commander.d.cts +1 -1
  20. package/dist/pr-review/codex/codex-commander.d.ts +1 -1
  21. package/dist/pr-review/codex/codex-commander.js +63 -12
  22. package/dist/pr-review/codex/codex-commander.js.map +1 -1
  23. package/dist/pr-review/codex/installation-codex.cjs +42 -6
  24. package/dist/pr-review/codex/installation-codex.cjs.map +1 -1
  25. package/dist/pr-review/codex/installation-codex.js +42 -6
  26. package/dist/pr-review/codex/installation-codex.js.map +1 -1
  27. package/dist/pr-review/gemini/gemini-commander.cjs +76 -16
  28. package/dist/pr-review/gemini/gemini-commander.cjs.map +1 -1
  29. package/dist/pr-review/gemini/gemini-commander.js +76 -16
  30. package/dist/pr-review/gemini/gemini-commander.js.map +1 -1
  31. package/dist/pr-review/gemini/installation-gemini.cjs +42 -6
  32. package/dist/pr-review/gemini/installation-gemini.cjs.map +1 -1
  33. package/dist/pr-review/gemini/installation-gemini.js +42 -6
  34. package/dist/pr-review/gemini/installation-gemini.js.map +1 -1
  35. package/dist/pr-review/review-one-by-one.cjs +699 -106
  36. package/dist/pr-review/review-one-by-one.cjs.map +1 -1
  37. package/dist/pr-review/review-one-by-one.js +700 -107
  38. package/dist/pr-review/review-one-by-one.js.map +1 -1
  39. package/dist/pr-review/review.cjs +722 -105
  40. package/dist/pr-review/review.cjs.map +1 -1
  41. package/dist/pr-review/review.js +722 -105
  42. package/dist/pr-review/review.js.map +1 -1
  43. package/package.json +4 -7
  44. package/src/common/rules/coding-convention.md +393 -0
  45. package/src/common/rules/coding-convention.pdf +0 -0
  46. package/src/common/rules/naming-rule.md +347 -0
  47. package/src/common/rules/naming-rule.pdf +0 -0
@@ -0,0 +1,393 @@
1
+ # 03-2. 코딩컨벤션
2
+
3
+ 영업플랫폼 프론트엔드 코딩컨벤션입니다.
4
+
5
+ ## HTML 컨벤션
6
+
7
+ - html doctype + html lang 사용
8
+
9
+ ```html
10
+ <!DOCTYPE html>
11
+ <html lang="ko"></html>
12
+ ```
13
+
14
+ - 모든 페이지에 title 정의
15
+
16
+ ```html
17
+ <head>
18
+ <title>타이틀명</title>
19
+ </head>
20
+ ```
21
+
22
+ - header, nav, main, footer 등 시멘틱 요소 사용
23
+
24
+ ```html
25
+ <!-- ✅ -->
26
+ <header>
27
+ <div>...</div>
28
+ </header>
29
+ ```
30
+
31
+ - 모든 인터렉트 요소는 키보드로 접근이 되어야 한다.
32
+ - 모든 이미지에는 alt 속성 사용, 장식용 이미지는 빈 alt='' 사용
33
+
34
+ ## CSS 컨벤션
35
+
36
+ - 글로벌 css가 아니면 module.scss를 사용한다.
37
+ - 영업지원 프론트엔드 StlyeLint에서 권장하는 rule set을 적용한다. (stylelint-config-dsp-frontend)
38
+
39
+ ```javascript
40
+ // .stylelint.js
41
+ module.exports = {
42
+ extends: ['stylelint-config-dsp-frontend']
43
+ };
44
+ ```
45
+
46
+ - 기본적으로 class 명 위주로 스타일링한다.
47
+
48
+ ```css
49
+ /* ✅ */
50
+ .something {
51
+ }
52
+
53
+ /* ⚠️ */
54
+ #something {
55
+ }
56
+
57
+ /* ⚠️ */
58
+ div {
59
+ }
60
+ ```
61
+
62
+ - variant가 필요한 부분은 -{varient or modifier}를 붙여서 스타일링한다.
63
+ - 공통에서는 엄격하게. 나머지는 자유롭게 사용
64
+
65
+ ```css
66
+ .{컴포넌트명}-{varient or modifier} {
67
+ }
68
+
69
+ /* 예 */
70
+ .somehting-large {
71
+ }
72
+ .somehting-outline {
73
+ }
74
+ .somehting-warning {
75
+ }
76
+ ```
77
+
78
+ - 피그마 상 변수로 참조되고 있는 부분은 design-system-context.scss를 import 하여 사용한다. (하드코딩 지양)
79
+
80
+ ```scss
81
+ @use '@dsp-frontend/design-system-context' as *;
82
+
83
+ .something {
84
+ color: colors(surface-primary);
85
+ }
86
+ ```
87
+
88
+ - 인라인 스타일은 가급적 사용하지 않는다.
89
+
90
+ ```javascript
91
+ <button style={{ color: 'red' }}>...</button>
92
+ ```
93
+
94
+ - !important 사용은 의미 그대로 정말 필요한 곳이 아니면 사용하지 않는다. (CSS의 순수한 철학 무시 개념이므로)
95
+
96
+ ```css
97
+ .something {
98
+ /* ⚠️ 반드시 필요한 상황인가? 확인할 것. */
99
+ color: blue !important;
100
+ }
101
+ ```
102
+
103
+ - 기본 단위는 rem, 무조건 고정이여야하는 px
104
+
105
+ ```css
106
+ .something {
107
+ /* ✅ root font-size에 따라 가변 */
108
+ width: 2rem;
109
+
110
+ /* ❌ root font-size에 따라 가변 */
111
+ width: 32px;
112
+
113
+ /* ✅ root font-size와 별개로 고정 */
114
+ border-radius: 8px;
115
+ }
116
+ ```
117
+
118
+ ## Typescript 컨벤션
119
+
120
+ - 영업지원 프론트엔드 ESLint에서 권장하는 rule set을 적용한다. (dsp-frontend-eslint-config-v8)
121
+
122
+ ```javascript
123
+ // .eslintrc.js
124
+ module.exports = {
125
+ extends: ['dsp-frontend-eslint-config-v8']
126
+ };
127
+ ```
128
+
129
+ - 주석은 Typesciprt와 관련된 것들은 /\*\* \*/ 로 작성한다. (상세하면 좋음)
130
+ - \*\* 특히 타입의 경우 필드가 많아지는 경우 주석이 없으면 난해해짐
131
+
132
+ ```typescript
133
+ // ✅ 주석사용
134
+ /**
135
+ * 사용자정보
136
+ */
137
+ interface IUserInfo {
138
+ /** 사용자 이름 */
139
+ name: string;
140
+ }
141
+
142
+ // ❌ 주석 미사용
143
+ interface IUserInfo {
144
+ name: string;
145
+ }
146
+
147
+ /** http 상태 */
148
+ type HttpStatus = 'success' | 'error';
149
+ ```
150
+
151
+ - export
152
+ - 기본 named export 사용 (사유: 자동완성 / 트리세이킹 최적화 / 명확한 구조)
153
+ - Framework에서 export default 강제화하는 부분만 사용
154
+ - 이슈가 발생시 "import/de-default-export" 린트 룰을 적용할 수 있음
155
+
156
+ ```typescript
157
+ // ✅ 함수
158
+ export getUserName = () => {...}
159
+
160
+ // ✅ 컴포넌트
161
+ export UserName = () => {...}
162
+
163
+ // ⚡️ Page 컴포넌트 (framework에서 강제하는 부분)
164
+ export default function Page(){...}
165
+ ```
166
+
167
+ - import
168
+ - import/order ESLint의 권장사항에 따른다.
169
+ - 디스트럭처링
170
+ - 특별한 조건이 없는 경우 객체와 배열의 디스트럭처링을 사용한다.
171
+
172
+ ```javascript
173
+ const user = { name: '김한화', age: 30 };
174
+ const numbers = [1, 2, 3, 4, 5];
175
+
176
+ // ✅
177
+ const { name, age } = user;
178
+
179
+ // ❌
180
+ const name = user.name;
181
+ const age = user.age;
182
+
183
+ // ✅
184
+ const [first, second] = numbers;
185
+
186
+ // ❌
187
+ const first = numbers[0];
188
+ const second = numbers[1];
189
+ ```
190
+
191
+ ## React Component 컨벤션
192
+
193
+ - 기본 컨셉/방향
194
+ - 단일 책임을 완수하는 컴포넌트를 만들 것(특히, 공통컴포넌트)
195
+ - YAGNI 원칙(지금 필요한 것만 구현) & 점진적 개선
196
+ - 책임이 여려개면 책임 개수 만큼 생성
197
+ - props가 거대해지는 것 지양
198
+
199
+ ```javascript
200
+ // ✅
201
+ <Alert.Root>
202
+ <Alert.Indicator />
203
+ <Alert.Content>
204
+ <Alert.Title />
205
+ <Alert.Description />
206
+ </Alert.Content>
207
+ </Alert.Root>
208
+
209
+ // ⚠️
210
+ <Alert />
211
+ ```
212
+
213
+ - 공통 컴포넌트가 아닌 것들은 페이지 단위(큰 덩어리로) 개발 진행 (계속 사용되는 부분이 생기면 그 때 공통화 진행)
214
+
215
+ ```javascript
216
+ <article>
217
+ <section className="storybook-page">
218
+ <h2>Pages in Storybook</h2>
219
+ ...
220
+ </section>
221
+ </article>
222
+ ```
223
+
224
+ - 컴포넌트/함수 모두 화살표 함수를 기본으로 함(framework에서 강제하는 부분 제외)
225
+
226
+ ```javascript
227
+ // ✅ 순수 함수
228
+ const getUserName = () => {...}
229
+
230
+ // ⚠️ function (가급적 arrow)
231
+ function handleSubmit() { ... }
232
+
233
+
234
+ // ✅ 컴포넌트
235
+ const UserName = () => { return <>...</> }
236
+
237
+ // ☑️ Page 컴포넌트(framework에서 강제하는 부분은 framework룰대로 따름)
238
+ export default function Page() {...}
239
+ ```
240
+
241
+ - 함수형 컴포넌트
242
+ - 기본 함수형 컴포넌트를 사용하며, 클래스형 컴포넌트는 사용하지 않는다.
243
+ - 클래스 형 컴포넌트는 내장 컴포넌트를 상속 받는 용도로만 사용한다.
244
+ - Props
245
+ - 타입을 정의하여 사용한다.
246
+ - 외부 사용이 필요한 타입은 별도의 파일(.types.ts)에서 export 한다.
247
+ - 컴포넌트명 + Props 접미사 사용
248
+
249
+ ```typescript
250
+ // ✅ Props Type(주석 필수)
251
+ /**
252
+ * Props 설명
253
+ */
254
+ interface UserNameProps {
255
+ /** 아이템 설명 */
256
+ onUserNameSubmit:() => void;
257
+ }
258
+
259
+ // ✅ 컴포넌트
260
+ const UserName = ({ onUserNameSubmit }: UserNameProps) => { return <>...</>}
261
+ ```
262
+
263
+ - 핸들러 네이밍은 on 접두사 사용
264
+
265
+ ```typescript
266
+ // ✅ Props Type(주석 필수)
267
+ interface UserNameProps {
268
+ onUserNameSubmit:() => void;
269
+ }
270
+
271
+ // ✅ 컴포넌트
272
+ const UserName = ({ onUserNameSubmit }: UserNameProps) => { return <>...</>}
273
+ ```
274
+
275
+ - page 컴포넌트: 모두 조립된 하나의 컴포넌트를 리턴(Page 파일 자체가 복잡해지는 것을 지양)
276
+
277
+ ```javascript
278
+ import { SomePage } from '@/components/pages/tablet/some-page';
279
+
280
+ export default function Page() {
281
+ return <SomePage />;
282
+ }
283
+ ```
284
+
285
+ ## 상태관리
286
+
287
+ | 종류 | 사용 case |
288
+ | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
289
+ | useState | **기본으로 사용**<br>• 컴포넌트 내부 스코프에서 종료 되므로 깔끔 |
290
+ | Context API | **컴포넌트간(부모, 자식), Page 스탭이 존재하는 경우**<br>• 스코프가 기능 단위로 제한되고 사용 종료와 함께 자동 해제 되므로 상태가 기능 단위로 생성되고 종료됨 |
291
+ | Zustand | **정말 전역적으로 사용이 필요할 때 사용. 어떤 곳에서든 접근이 필요한 기능**<br>• 적절한 사용처: 로그인 정보(이름, AT), 클라이언트 상태(브라우저 버전, 종류 등)<br>• 특정 기능이 전역적인 사용이 필요 없게되는 경우, 수동 cleanup 필요<br>• cleanup을 보장하지 않으면 전역적으로 데이터가 남아 있음으로 인한 버그 발생 우려 |
292
+
293
+ ## API 관련
294
+
295
+ - 기본 규격
296
+
297
+ ```
298
+ # template
299
+ api
300
+ └── domains
301
+ └── {domain} # backend 업무 도메인
302
+ └──{domain}.mock.data.ts # mock data(fe 전용)
303
+ └──{domain}.mock.handler.ts # mock function
304
+ └──{domain}.dto.ts # Request/Response type(Swagger Naming)
305
+ └──{domain}.service.ts # BackEnd API Aync Method
306
+ └──use{domain}Query.tsx # React Query
307
+ ```
308
+
309
+ - 예제
310
+
311
+ ```
312
+ # example
313
+ api
314
+ └── domains
315
+ └── user
316
+ └──user.mock.data.ts
317
+ └──user.mock.handler.ts
318
+ └──user.dto.ts
319
+ └──user.service.ts
320
+ └──useUserQuery.tsx
321
+ ```
322
+
323
+ - 비동기 함수 + React Query 관련
324
+
325
+ ```typescript
326
+ // ✅ 비동기 함수
327
+ const getTestUser = async (params: IUserRequest): Promise<IUserResponse> => {...}
328
+
329
+
330
+ // ✅ React-Query
331
+ const useTestUserQuery = () => {...}
332
+
333
+
334
+ // ✅ 비동기 함수(Mutation)
335
+ const updateTestUser = async (params: IUserRequest): Promise<IUserResponse> => {...}
336
+
337
+
338
+ // ✅ React-Query(mutation)
339
+ const useUpdateTestUserQuery = () => {... useMutation()...}
340
+ ```
341
+
342
+ ## Commit
343
+
344
+ - 컨벤셔널커밋을 기본으로 따른다.
345
+ - 명확한 히스토리를 생성하기 위한 가벼운 규칙
346
+ - 기본 포맷
347
+
348
+ ```
349
+ <타입>[적용 범위(선택 사항)]: <설명: (SR 선택사항)>
350
+
351
+ [본문(선택 사항)]
352
+ [꼬리말(선택 사항)]
353
+ ```
354
+
355
+ - 타입
356
+ a. fix: 코드베이스에서 버그를 패치하는 fix 타입의 커밋(PATCH와 관련)
357
+ b. feat: 코드베이스에서 새 기능이 추가되는 feat 타입의 커밋(MINOR와 관련)
358
+ c. BREAKING CHANGE: 꼬리말을 가지거나 타입/스코프 뒤에 !문자열을 붙인 커밋은 단절적 변경이 있다는 의미(MAJOR와 관련)
359
+ d. 이외 chore:, docs:, style:, refactor, perf: test: 등의 타입을 사용할 것을 권고
360
+
361
+ - 본문이 없는 커밋 메시지
362
+
363
+ ```
364
+ git commit -m "feat: 영업플랫폼 전자청약 대면동의서 기능 추가"
365
+ ```
366
+
367
+ - 적용 범위를 가지는 커밋 메시지
368
+
369
+ ```
370
+ git commit -m "feat(태블릿): 영업플랫폼 전자청약 대면동의서 기능 추가"
371
+ ```
372
+
373
+ - SR 번호가 있는 커밋 메시지
374
+
375
+ ```
376
+ git commit -m "feat(태블릿): (SR-12345)영업플랫폼 전자청약 대면동의서 기능 추가"
377
+ ```
378
+
379
+ - 설명과 BREAKING CHANGE 꼬리말을 가지는 커밋 메시지
380
+
381
+ ```
382
+ git commit -m feat: 기능추가
383
+
384
+ BREAKING CHANGE: 대격변이 일어납니다.
385
+ ```
386
+
387
+ - 단절적 변경(breaking change)에 주의를 주기 위해 !를 포함한 커밋 메시지
388
+
389
+ ```
390
+ git commit -m "feat!: 대격변이 일어나요"
391
+
392
+ git commit -m "feat(api)!: API쪽 대격변입니다."
393
+ ```