@j-solution/components 1.0.0 → 1.0.1

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/UPDATE_GUIDE.md CHANGED
@@ -1,441 +1,441 @@
1
- # J-Component 업데이트 가이드
2
-
3
- > J-Component 라이브러리 버전 업데이트 방법 안내
4
-
5
- > 💡 **처음 설치하시나요?** → [설치 가이드](./INSTALLATION_GUIDE.md)를 먼저 확인하세요.
6
-
7
- ## 📋 목차
8
-
9
- 1. [배포 방식 확인](#배포-방식-확인)
10
- 2. [Standard 방식 업데이트 (파일 복사)](#standard-방식-업데이트-파일-복사)
11
- 3. [NPM 방식 업데이트 (패키지 설치)](#npm-방식-업데이트-패키지-설치)
12
- 4. [업데이트 후 확인](#업데이트-후-확인)
13
- 5. [문제 해결](#문제-해결)
14
-
15
- ---
16
-
17
- ## 배포 방식 확인
18
-
19
- 업데이트 전에 현재 사용 중인 배포 방식을 확인하세요:
20
-
21
- - **Standard 방식 (파일 복사)**: `src/components/` 디렉토리에 파일이 직접 복사되어 있는 경우
22
- - **NPM 방식 (패키지 설치)**: `package.json`에 `@j-solution/components`가 설치되어 있는 경우
23
-
24
- ---
25
-
26
- ## Standard 방식 업데이트 (파일 복사)
27
-
28
- ### 1. 버전 확인
29
-
30
- #### 현재 설치된 버전 확인
31
-
32
- ```bash
33
- # VERSION 파일 확인
34
- cat VERSION
35
-
36
- # 또는 README.md에서 버전 정보 확인
37
- cat README.md | grep "Package v"
38
- ```
39
-
40
- #### 최신 버전 확인
41
-
42
- 원본 저장소에서 최신 버전을 확인하세요:
43
-
44
- - **저장소**: https://github.com/JWMS-Solutions/J-Component
45
- - **릴리즈 노트**: 저장소의 `RELEASE_NOTES.md` 파일 참고
46
- - **패키지 경로**: `packages/latest/standard/`
47
-
48
- > **v1.0.0부터**: `namespaced` 버전은 지원되지 않습니다. 네임스페이스 기능이 필요한 경우 `npm` 패키지 방식을 사용하세요. `standard` 버전은 계속 지원됩니다.
49
-
50
- ### 2. 최신 패키지 다운로드
51
-
52
- #### 방법 1: Git Sparse Checkout (권장)
53
-
54
- ```bash
55
- # 임시 디렉토리에 패키지 다운로드
56
- mkdir -p temp-package
57
- cd temp-package
58
-
59
- # Standard 버전 다운로드
60
- git clone --depth 1 --filter=blob:none --sparse \
61
- https://github.com/JWMS-Solutions/J-Component.git .
62
- git sparse-checkout set packages/latest/standard
63
- ```
64
-
65
- #### 방법 2: GitHub 웹 인터페이스
66
-
67
- GitHub 웹 인터페이스에서 `packages/latest/standard/` 디렉토리를 ZIP으로 다운로드
68
-
69
- ### 3. 버전 확인
70
-
71
- ```bash
72
- # VERSION 파일 확인
73
- cat temp-package/packages/latest/standard/VERSION
74
-
75
- # README.md에서 변경사항 확인
76
- cat temp-package/packages/latest/standard/README.md
77
- ```
78
-
79
- ### 4. 기존 패키지 백업 (선택)
80
-
81
- ```bash
82
- # 현재 패키지가 설치된 경로로 이동
83
- cd <패키지-설치-경로>
84
-
85
- # 백업 생성
86
- cp -r . ../backup-$(date +%Y%m%d)
87
- ```
88
-
89
- ### 5. 패키지 교체
90
-
91
- ```bash
92
- # 기존 패키지 제거 (필요한 파일만 선택적으로 제거)
93
- # 주의: README.md, VERSION, USAGE_GUIDE.md, UPDATE_GUIDE.md는 유지 가능
94
-
95
- # 새 패키지 복사
96
- cp -r temp-package/packages/latest/standard/src/* <패키지-설치-경로>/src/
97
- cp temp-package/packages/latest/standard/README.md <패키지-설치-경로>/
98
- cp temp-package/packages/latest/standard/VERSION <패키지-설치-경로>/
99
- cp temp-package/packages/latest/standard/USAGE_GUIDE.md <패키지-설치-경로>/
100
- cp temp-package/packages/latest/standard/UPDATE_GUIDE.md <패키지-설치-경로>/
101
- ```
102
-
103
- ### 6. 빌드 및 테스트
104
-
105
- ```bash
106
- # 프로젝트 루트로 이동
107
- cd <프로젝트-루트>
108
-
109
- # 빌드 테스트
110
- npm run build
111
- # 또는
112
- pnpm run build
113
-
114
- # 개발 서버 실행
115
- npm run dev
116
- # 또는
117
- pnpm run dev
118
- ```
119
-
120
- ### 7. 변경사항 커밋
121
-
122
- ```bash
123
- git add <패키지-설치-경로>
124
- git commit -m "chore: j-component v{버전} 업데이트"
125
- ```
126
-
127
- ---
128
-
129
- ## NPM 방식 업데이트 (패키지 설치)
130
-
131
- ### 1. 버전 확인
132
-
133
- #### 현재 설치된 버전 확인
134
-
135
- ```bash
136
- # package.json에서 확인
137
- npm list @j-solution/components
138
- # 또는
139
- pnpm list @j-solution/components
140
-
141
- # 또는 node_modules에서 직접 확인
142
- cat node_modules/@j-solution/components/package.json | grep '"version"'
143
- ```
144
-
145
- #### 최신 버전 확인
146
-
147
- - **npm 레지스트리**: `npm view @j-solution/components version`
148
- - **저장소**: https://github.com/JWMS-Solutions/J-Component
149
- - **릴리즈 노트**: 저장소의 `RELEASE_NOTES.md` 파일 참고
150
-
151
- ### 2. 최신 버전으로 업데이트
152
-
153
- #### npm 레지스트리에서 설치된 경우
154
-
155
- ```bash
156
- # 최신 버전으로 업데이트
157
- npm install @j-solution/components@latest
158
- # 또는
159
- pnpm add @j-solution/components@latest
160
-
161
- # 또는 특정 버전으로 업데이트
162
- npm install @j-solution/components@1.0.0
163
- # 또는
164
- pnpm add @j-solution/components@1.0.0
165
- ```
166
-
167
- #### 로컬 파일로 설치된 경우
168
-
169
- ```bash
170
- # 로컬 경로의 최신 버전으로 업데이트
171
- npm install file:../JLIS-Component/jwms-portal-frontend/dist/npm
172
- # 또는
173
- pnpm add file:../JLIS-Component/jwms-portal-frontend/dist/npm
174
-
175
- # 또는 tarball 사용
176
- npm install ../JLIS-Component/jwms-portal-frontend/dist/npm/j-components-1.0.0.tgz
177
- # 또는
178
- pnpm add ../JLIS-Component/jwms-portal-frontend/dist/npm/j-components-1.0.0.tgz
179
- ```
180
-
181
- ---
182
-
183
- ## 업데이트 후 확인
184
-
185
- ### Standard 방식 (파일 복사)
186
-
187
- 1. **버전 확인**
188
- ```bash
189
- cat VERSION
190
- ```
191
-
192
- 2. **파일 존재 확인**
193
- ```bash
194
- ls -la src/components/atoms/
195
- ```
196
-
197
- 3. **빌드 테스트**
198
- ```bash
199
- npm run build
200
- # 또는
201
- pnpm run build
202
- npm run dev
203
- # 또는
204
- pnpm run dev
205
- ```
206
-
207
- ### NPM 방식 (패키지 설치)
208
-
209
- 1. **버전 확인**
210
- ```bash
211
- npm list @j-solution/components
212
- # 또는
213
- pnpm list @j-solution/components
214
- ```
215
-
216
- 2. **peerDependencies 확인**
217
- ```bash
218
- npm list vue vue-router pinia
219
- ```
220
-
221
- 필요한 버전:
222
- - `vue`: `^3.5.22`
223
- - `vue-router`: `^4.6.0`
224
- - `pinia`: `^3.0.3`
225
-
226
- 3. **타입 체크**
227
- ```bash
228
- npm run type-check
229
- # 또는
230
- pnpm run type-check
231
- # 또는
232
- npx vue-tsc --noEmit
233
- ```
234
-
235
- 4. **빌드 테스트**
236
- ```bash
237
- npm run dev
238
- # 또는
239
- pnpm run dev
240
- npm run build
241
- # 또는
242
- pnpm run build
243
- ```
244
-
245
- ---
246
-
247
- ## 문제 해결
248
-
249
- ### Standard 방식 (파일 복사)
250
-
251
- #### Import 오류 발생 시
252
-
253
- 1. **별칭 확인**
254
- ```bash
255
- # vite.config.ts 확인
256
- grep -A 5 "alias" vite.config.ts
257
-
258
- # tsconfig.json 확인
259
- grep -A 5 "paths" tsconfig.json
260
- ```
261
-
262
- 2. **경로 확인**
263
- ```bash
264
- # 컴포넌트 폴더 존재 확인
265
- ls -la src/components/atoms/
266
- ```
267
-
268
- 3. **빌드 캐시 클리어**
269
- ```bash
270
- rm -rf node_modules/.vite
271
- rm -rf dist
272
- npm run dev
273
- # 또는
274
- pnpm run dev
275
- ```
276
-
277
- #### 컴포넌트가 렌더링되지 않을 때
278
-
279
- 1. **Tailwind 설정 확인**
280
- ```bash
281
- # tailwind.config.js에 컴포넌트 경로 포함 확인
282
- grep "components" tailwind.config.js
283
- ```
284
-
285
- 2. **CSS 변수 확인**
286
- - `src/assets/styles/themes.css` 또는 메인 CSS 파일에 `--radius` 변수 포함 확인
287
- - 브라우저 개발자 도구에서 CSS 변수 값 확인:
288
- ```javascript
289
- getComputedStyle(document.documentElement).getPropertyValue('--radius')
290
- ```
291
-
292
- ### NPM 방식 (패키지 설치)
293
-
294
- #### 업데이트 후 문제가 발생한 경우
295
-
296
- 1. **의존성 재설치**
297
- ```bash
298
- rm -rf node_modules package-lock.json
299
- npm install
300
- # 또는
301
- pnpm install
302
- ```
303
-
304
- 2. **TypeScript 서버 재시작**
305
- - VS Code: `Ctrl+Shift+P` → "TypeScript: Restart TS Server"
306
-
307
- 3. **빌드 캐시 클리어**
308
- ```bash
309
- rm -rf node_modules/.vite
310
- rm -rf dist
311
- npm run build
312
- # 또는
313
- pnpm run build
314
- ```
315
-
316
- #### 버전 충돌 발생 시
317
-
318
- 1. **peerDependencies 버전 확인**
319
- ```bash
320
- npm list vue vue-router pinia
321
- ```
322
-
323
- 2. **호환되는 버전으로 업데이트**
324
- - `@j-solution/components`의 `package.json`에서 `peerDependencies` 확인
325
- - 필요한 패키지 버전 업데이트
326
-
327
- ### 공통 문제
328
-
329
- #### 버전 충돌 발생 시
330
-
331
- 1. **의존성 버전 확인**
332
- ```bash
333
- # package.json 확인
334
- cat package.json | grep -A 10 "dependencies"
335
- ```
336
-
337
- 2. **호환되는 버전으로 업데이트**
338
- - README.md의 의존성 목록 확인
339
- - 필요한 패키지 버전 업데이트
340
-
341
- ---
342
-
343
- ## ⚙️ 설정 파일 확인
344
-
345
- 업데이트 후 다음 설정 파일들이 올바르게 설정되어 있는지 확인하세요:
346
-
347
- ### Standard 방식 (파일 복사)
348
-
349
- #### Vite 프로젝트
350
-
351
- **`vite.config.ts`**:
352
- ```ts
353
- import { defineConfig } from 'vite'
354
- import vue from '@vitejs/plugin-vue'
355
- import path from 'path'
356
-
357
- export default defineConfig({
358
- plugins: [vue()],
359
- resolve: {
360
- alias: {
361
- '@': path.resolve(__dirname, './src'),
362
- },
363
- },
364
- })
365
- ```
366
-
367
- #### TypeScript
368
-
369
- **`tsconfig.json`** 또는 **`tsconfig.app.json`**:
370
- ```json
371
- {
372
- "compilerOptions": {
373
- "paths": {
374
- "@/*": ["./src/*"]
375
- }
376
- }
377
- }
378
- ```
379
-
380
- #### Tailwind CSS
381
-
382
- **`tailwind.config.js`**:
383
- ```js
384
- export default {
385
- content: [
386
- "./index.html",
387
- "./src/**/*.{vue,js,ts,jsx,tsx}",
388
- "./src/components/**/*.{vue,js,ts}",
389
- ],
390
- // ... 기타 설정
391
- }
392
- ```
393
-
394
- ### NPM 방식 (패키지 설치)
395
-
396
- #### Tailwind CSS
397
-
398
- **`tailwind.config.js`**:
399
- ```js
400
- export default {
401
- content: [
402
- "./index.html",
403
- "./src/**/*.{vue,js,ts,jsx,tsx}",
404
- "./node_modules/@j-solution/components/**/*.{vue,js,ts}",
405
- ],
406
- // ... 기타 설정
407
- }
408
- ```
409
-
410
- #### CSS 자동 포함
411
-
412
- **NPM 패키지는 CSS가 자동으로 포함됩니다.** 별도로 CSS를 import할 필요가 없습니다:
413
-
414
- ```ts
415
- // 컴포넌트만 import하면 CSS가 자동으로 포함됨
416
- import { JButton } from '@j-solution/components'
417
- // CSS는 자동으로 포함됨 - 별도 import 불필요
418
- ```
419
-
420
- > 💡 **참고**: 만약 CSS가 적용되지 않는다면, 프로젝트의 빌드 설정을 확인하세요. 일부 번들러는 CSS를 자동으로 포함하지 않을 수 있습니다. 그 경우 수동으로 import할 수 있습니다:
421
- > ```ts
422
- > import '@j-solution/components/assets/styles/j-components.css'
423
- > import '@j-solution/components/assets/styles/themes.css'
424
- > ```
425
-
426
- > 💡 **설정 파일 상세 내용이 필요하신가요?** → [설치 가이드](./INSTALLATION_GUIDE.md)의 설정 섹션을 참고하세요.
427
-
428
- ---
429
-
430
- ## 📚 참고 자료
431
-
432
- - **원본 저장소**: https://github.com/JWMS-Solutions/J-Component
433
- - **설치 가이드**: [INSTALLATION_GUIDE.md](./INSTALLATION_GUIDE.md)
434
- - **사용 가이드**: [USAGE_GUIDE.md](./USAGE_GUIDE.md)
435
- - **패키지 소개**: `packages/latest/standard/README.md` (Standard 방식 - 파일 복사)
436
- - **릴리즈 노트**: 원본 저장소의 `RELEASE_NOTES.md`
437
-
438
- ---
439
-
440
- **마지막 업데이트**: 2025년 12월
441
- **문서 버전**: v1.0.0
1
+ # J-Component 업데이트 가이드
2
+
3
+ > J-Component 라이브러리 버전 업데이트 방법 안내
4
+
5
+ > 💡 **처음 설치하시나요?** → [설치 가이드](./INSTALLATION_GUIDE.md)를 먼저 확인하세요.
6
+
7
+ ## 📋 목차
8
+
9
+ 1. [배포 방식 확인](#배포-방식-확인)
10
+ 2. [Standard 방식 업데이트 (파일 복사)](#standard-방식-업데이트-파일-복사)
11
+ 3. [NPM 방식 업데이트 (패키지 설치)](#npm-방식-업데이트-패키지-설치)
12
+ 4. [업데이트 후 확인](#업데이트-후-확인)
13
+ 5. [문제 해결](#문제-해결)
14
+
15
+ ---
16
+
17
+ ## 배포 방식 확인
18
+
19
+ 업데이트 전에 현재 사용 중인 배포 방식을 확인하세요:
20
+
21
+ - **Standard 방식 (파일 복사)**: `src/components/` 디렉토리에 파일이 직접 복사되어 있는 경우
22
+ - **NPM 방식 (패키지 설치)**: `package.json`에 `@j-solution/components`가 설치되어 있는 경우
23
+
24
+ ---
25
+
26
+ ## Standard 방식 업데이트 (파일 복사)
27
+
28
+ ### 1. 버전 확인
29
+
30
+ #### 현재 설치된 버전 확인
31
+
32
+ ```bash
33
+ # VERSION 파일 확인
34
+ cat VERSION
35
+
36
+ # 또는 README.md에서 버전 정보 확인
37
+ cat README.md | grep "Package v"
38
+ ```
39
+
40
+ #### 최신 버전 확인
41
+
42
+ 원본 저장소에서 최신 버전을 확인하세요:
43
+
44
+ - **저장소**: https://github.com/JWMS-Solutions/J-Component
45
+ - **릴리즈 노트**: 저장소의 `RELEASE_NOTES.md` 파일 참고
46
+ - **패키지 경로**: `packages/latest/standard/`
47
+
48
+ > **v1.0.0부터**: `namespaced` 버전은 지원되지 않습니다. 네임스페이스 기능이 필요한 경우 `npm` 패키지 방식을 사용하세요. `standard` 버전은 계속 지원됩니다.
49
+
50
+ ### 2. 최신 패키지 다운로드
51
+
52
+ #### 방법 1: Git Sparse Checkout (권장)
53
+
54
+ ```bash
55
+ # 임시 디렉토리에 패키지 다운로드
56
+ mkdir -p temp-package
57
+ cd temp-package
58
+
59
+ # Standard 버전 다운로드
60
+ git clone --depth 1 --filter=blob:none --sparse \
61
+ https://github.com/JWMS-Solutions/J-Component.git .
62
+ git sparse-checkout set packages/latest/standard
63
+ ```
64
+
65
+ #### 방법 2: GitHub 웹 인터페이스
66
+
67
+ GitHub 웹 인터페이스에서 `packages/latest/standard/` 디렉토리를 ZIP으로 다운로드
68
+
69
+ ### 3. 버전 확인
70
+
71
+ ```bash
72
+ # VERSION 파일 확인
73
+ cat temp-package/packages/latest/standard/VERSION
74
+
75
+ # README.md에서 변경사항 확인
76
+ cat temp-package/packages/latest/standard/README.md
77
+ ```
78
+
79
+ ### 4. 기존 패키지 백업 (선택)
80
+
81
+ ```bash
82
+ # 현재 패키지가 설치된 경로로 이동
83
+ cd <패키지-설치-경로>
84
+
85
+ # 백업 생성
86
+ cp -r . ../backup-$(date +%Y%m%d)
87
+ ```
88
+
89
+ ### 5. 패키지 교체
90
+
91
+ ```bash
92
+ # 기존 패키지 제거 (필요한 파일만 선택적으로 제거)
93
+ # 주의: README.md, VERSION, USAGE_GUIDE.md, UPDATE_GUIDE.md는 유지 가능
94
+
95
+ # 새 패키지 복사
96
+ cp -r temp-package/packages/latest/standard/src/* <패키지-설치-경로>/src/
97
+ cp temp-package/packages/latest/standard/README.md <패키지-설치-경로>/
98
+ cp temp-package/packages/latest/standard/VERSION <패키지-설치-경로>/
99
+ cp temp-package/packages/latest/standard/USAGE_GUIDE.md <패키지-설치-경로>/
100
+ cp temp-package/packages/latest/standard/UPDATE_GUIDE.md <패키지-설치-경로>/
101
+ ```
102
+
103
+ ### 6. 빌드 및 테스트
104
+
105
+ ```bash
106
+ # 프로젝트 루트로 이동
107
+ cd <프로젝트-루트>
108
+
109
+ # 빌드 테스트
110
+ npm run build
111
+ # 또는
112
+ pnpm run build
113
+
114
+ # 개발 서버 실행
115
+ npm run dev
116
+ # 또는
117
+ pnpm run dev
118
+ ```
119
+
120
+ ### 7. 변경사항 커밋
121
+
122
+ ```bash
123
+ git add <패키지-설치-경로>
124
+ git commit -m "chore: j-component v{버전} 업데이트"
125
+ ```
126
+
127
+ ---
128
+
129
+ ## NPM 방식 업데이트 (패키지 설치)
130
+
131
+ ### 1. 버전 확인
132
+
133
+ #### 현재 설치된 버전 확인
134
+
135
+ ```bash
136
+ # package.json에서 확인
137
+ npm list @j-solution/components
138
+ # 또는
139
+ pnpm list @j-solution/components
140
+
141
+ # 또는 node_modules에서 직접 확인
142
+ cat node_modules/@j-solution/components/package.json | grep '"version"'
143
+ ```
144
+
145
+ #### 최신 버전 확인
146
+
147
+ - **npm 레지스트리**: `npm view @j-solution/components version`
148
+ - **저장소**: https://github.com/JWMS-Solutions/J-Component
149
+ - **릴리즈 노트**: 저장소의 `RELEASE_NOTES.md` 파일 참고
150
+
151
+ ### 2. 최신 버전으로 업데이트
152
+
153
+ #### npm 레지스트리에서 설치된 경우
154
+
155
+ ```bash
156
+ # 최신 버전으로 업데이트
157
+ npm install @j-solution/components@latest
158
+ # 또는
159
+ pnpm add @j-solution/components@latest
160
+
161
+ # 또는 특정 버전으로 업데이트
162
+ npm install @j-solution/components@1.0.1
163
+ # 또는
164
+ pnpm add @j-solution/components@1.0.1
165
+ ```
166
+
167
+ #### 로컬 파일로 설치된 경우
168
+
169
+ ```bash
170
+ # 로컬 경로의 최신 버전으로 업데이트
171
+ npm install file:../JLIS-Component/jwms-portal-frontend/dist/npm
172
+ # 또는
173
+ pnpm add file:../JLIS-Component/jwms-portal-frontend/dist/npm
174
+
175
+ # 또는 tarball 사용
176
+ npm install ../JLIS-Component/jwms-portal-frontend/dist/npm/j-components-1.0.1.tgz
177
+ # 또는
178
+ pnpm add ../JLIS-Component/jwms-portal-frontend/dist/npm/j-components-1.0.1.tgz
179
+ ```
180
+
181
+ ---
182
+
183
+ ## 업데이트 후 확인
184
+
185
+ ### Standard 방식 (파일 복사)
186
+
187
+ 1. **버전 확인**
188
+ ```bash
189
+ cat VERSION
190
+ ```
191
+
192
+ 2. **파일 존재 확인**
193
+ ```bash
194
+ ls -la src/components/atoms/
195
+ ```
196
+
197
+ 3. **빌드 테스트**
198
+ ```bash
199
+ npm run build
200
+ # 또는
201
+ pnpm run build
202
+ npm run dev
203
+ # 또는
204
+ pnpm run dev
205
+ ```
206
+
207
+ ### NPM 방식 (패키지 설치)
208
+
209
+ 1. **버전 확인**
210
+ ```bash
211
+ npm list @j-solution/components
212
+ # 또는
213
+ pnpm list @j-solution/components
214
+ ```
215
+
216
+ 2. **peerDependencies 확인**
217
+ ```bash
218
+ npm list vue vue-router pinia
219
+ ```
220
+
221
+ 필요한 버전:
222
+ - `vue`: `^3.5.22`
223
+ - `vue-router`: `^4.6.0`
224
+ - `pinia`: `^3.0.3`
225
+
226
+ 3. **타입 체크**
227
+ ```bash
228
+ npm run type-check
229
+ # 또는
230
+ pnpm run type-check
231
+ # 또는
232
+ npx vue-tsc --noEmit
233
+ ```
234
+
235
+ 4. **빌드 테스트**
236
+ ```bash
237
+ npm run dev
238
+ # 또는
239
+ pnpm run dev
240
+ npm run build
241
+ # 또는
242
+ pnpm run build
243
+ ```
244
+
245
+ ---
246
+
247
+ ## 문제 해결
248
+
249
+ ### Standard 방식 (파일 복사)
250
+
251
+ #### Import 오류 발생 시
252
+
253
+ 1. **별칭 확인**
254
+ ```bash
255
+ # vite.config.ts 확인
256
+ grep -A 5 "alias" vite.config.ts
257
+
258
+ # tsconfig.json 확인
259
+ grep -A 5 "paths" tsconfig.json
260
+ ```
261
+
262
+ 2. **경로 확인**
263
+ ```bash
264
+ # 컴포넌트 폴더 존재 확인
265
+ ls -la src/components/atoms/
266
+ ```
267
+
268
+ 3. **빌드 캐시 클리어**
269
+ ```bash
270
+ rm -rf node_modules/.vite
271
+ rm -rf dist
272
+ npm run dev
273
+ # 또는
274
+ pnpm run dev
275
+ ```
276
+
277
+ #### 컴포넌트가 렌더링되지 않을 때
278
+
279
+ 1. **Tailwind 설정 확인**
280
+ ```bash
281
+ # tailwind.config.js에 컴포넌트 경로 포함 확인
282
+ grep "components" tailwind.config.js
283
+ ```
284
+
285
+ 2. **CSS 변수 확인**
286
+ - `src/assets/styles/themes.css` 또는 메인 CSS 파일에 `--radius` 변수 포함 확인
287
+ - 브라우저 개발자 도구에서 CSS 변수 값 확인:
288
+ ```javascript
289
+ getComputedStyle(document.documentElement).getPropertyValue('--radius')
290
+ ```
291
+
292
+ ### NPM 방식 (패키지 설치)
293
+
294
+ #### 업데이트 후 문제가 발생한 경우
295
+
296
+ 1. **의존성 재설치**
297
+ ```bash
298
+ rm -rf node_modules package-lock.json
299
+ npm install
300
+ # 또는
301
+ pnpm install
302
+ ```
303
+
304
+ 2. **TypeScript 서버 재시작**
305
+ - VS Code: `Ctrl+Shift+P` → "TypeScript: Restart TS Server"
306
+
307
+ 3. **빌드 캐시 클리어**
308
+ ```bash
309
+ rm -rf node_modules/.vite
310
+ rm -rf dist
311
+ npm run build
312
+ # 또는
313
+ pnpm run build
314
+ ```
315
+
316
+ #### 버전 충돌 발생 시
317
+
318
+ 1. **peerDependencies 버전 확인**
319
+ ```bash
320
+ npm list vue vue-router pinia
321
+ ```
322
+
323
+ 2. **호환되는 버전으로 업데이트**
324
+ - `@j-solution/components`의 `package.json`에서 `peerDependencies` 확인
325
+ - 필요한 패키지 버전 업데이트
326
+
327
+ ### 공통 문제
328
+
329
+ #### 버전 충돌 발생 시
330
+
331
+ 1. **의존성 버전 확인**
332
+ ```bash
333
+ # package.json 확인
334
+ cat package.json | grep -A 10 "dependencies"
335
+ ```
336
+
337
+ 2. **호환되는 버전으로 업데이트**
338
+ - README.md의 의존성 목록 확인
339
+ - 필요한 패키지 버전 업데이트
340
+
341
+ ---
342
+
343
+ ## ⚙️ 설정 파일 확인
344
+
345
+ 업데이트 후 다음 설정 파일들이 올바르게 설정되어 있는지 확인하세요:
346
+
347
+ ### Standard 방식 (파일 복사)
348
+
349
+ #### Vite 프로젝트
350
+
351
+ **`vite.config.ts`**:
352
+ ```ts
353
+ import { defineConfig } from 'vite'
354
+ import vue from '@vitejs/plugin-vue'
355
+ import path from 'path'
356
+
357
+ export default defineConfig({
358
+ plugins: [vue()],
359
+ resolve: {
360
+ alias: {
361
+ '@': path.resolve(__dirname, './src'),
362
+ },
363
+ },
364
+ })
365
+ ```
366
+
367
+ #### TypeScript
368
+
369
+ **`tsconfig.json`** 또는 **`tsconfig.app.json`**:
370
+ ```json
371
+ {
372
+ "compilerOptions": {
373
+ "paths": {
374
+ "@/*": ["./src/*"]
375
+ }
376
+ }
377
+ }
378
+ ```
379
+
380
+ #### Tailwind CSS
381
+
382
+ **`tailwind.config.js`**:
383
+ ```js
384
+ export default {
385
+ content: [
386
+ "./index.html",
387
+ "./src/**/*.{vue,js,ts,jsx,tsx}",
388
+ "./src/components/**/*.{vue,js,ts}",
389
+ ],
390
+ // ... 기타 설정
391
+ }
392
+ ```
393
+
394
+ ### NPM 방식 (패키지 설치)
395
+
396
+ #### Tailwind CSS
397
+
398
+ **`tailwind.config.js`**:
399
+ ```js
400
+ export default {
401
+ content: [
402
+ "./index.html",
403
+ "./src/**/*.{vue,js,ts,jsx,tsx}",
404
+ "./node_modules/@j-solution/components/**/*.{vue,js,ts}",
405
+ ],
406
+ // ... 기타 설정
407
+ }
408
+ ```
409
+
410
+ #### CSS 자동 포함
411
+
412
+ **NPM 패키지는 CSS가 자동으로 포함됩니다.** 별도로 CSS를 import할 필요가 없습니다:
413
+
414
+ ```ts
415
+ // 컴포넌트만 import하면 CSS가 자동으로 포함됨
416
+ import { JButton } from '@j-solution/components'
417
+ // CSS는 자동으로 포함됨 - 별도 import 불필요
418
+ ```
419
+
420
+ > 💡 **참고**: 만약 CSS가 적용되지 않는다면, 프로젝트의 빌드 설정을 확인하세요. 일부 번들러는 CSS를 자동으로 포함하지 않을 수 있습니다. 그 경우 수동으로 import할 수 있습니다:
421
+ > ```ts
422
+ > import '@j-solution/components/assets/styles/j-components.css'
423
+ > import '@j-solution/components/assets/styles/themes.css'
424
+ > ```
425
+
426
+ > 💡 **설정 파일 상세 내용이 필요하신가요?** → [설치 가이드](./INSTALLATION_GUIDE.md)의 설정 섹션을 참고하세요.
427
+
428
+ ---
429
+
430
+ ## 📚 참고 자료
431
+
432
+ - **원본 저장소**: https://github.com/JWMS-Solutions/J-Component
433
+ - **설치 가이드**: [INSTALLATION_GUIDE.md](./INSTALLATION_GUIDE.md)
434
+ - **사용 가이드**: [USAGE_GUIDE.md](./USAGE_GUIDE.md)
435
+ - **패키지 소개**: `packages/latest/standard/README.md` (Standard 방식 - 파일 복사)
436
+ - **릴리즈 노트**: 원본 저장소의 `RELEASE_NOTES.md`
437
+
438
+ ---
439
+
440
+ **마지막 업데이트**: 2025년 12월
441
+ **문서 버전**: v1.0.1