@jk-core/components 1.1.17 → 1.1.19

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 (91) hide show
  1. package/README.md +73 -73
  2. package/dist/index.js +1299 -997
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.umd.cjs +8 -8
  5. package/dist/index.umd.cjs.map +1 -1
  6. package/dist/src/common/Carousel/index.d.ts +15 -0
  7. package/dist/src/common/RollingBanner/index.d.ts +11 -0
  8. package/dist/src/index.d.ts +3 -1
  9. package/dist/src/utils/ts/formatMoney.d.ts +1 -1
  10. package/package.json +99 -99
  11. package/src/Calendar/Calendar.module.scss +213 -213
  12. package/src/Calendar/RangeCalendar.tsx +125 -125
  13. package/src/Calendar/ScrollCalendar.module.scss +214 -214
  14. package/src/Calendar/ScrollCalendar.tsx +124 -124
  15. package/src/Calendar/SingleCalendar.tsx +121 -121
  16. package/src/Calendar/components/DateLabel/DateLabel.module.scss +89 -89
  17. package/src/Calendar/components/DateLabel/index.tsx +91 -91
  18. package/src/Calendar/components/DayTile/DayTile.module.scss +117 -117
  19. package/src/Calendar/components/DayTile/index.tsx +108 -108
  20. package/src/Calendar/components/MonthTile/MonthTile.module.scss +59 -59
  21. package/src/Calendar/components/MonthTile/index.tsx +50 -50
  22. package/src/Calendar/components/ViewSelector/ViewSelector.module.scss +48 -48
  23. package/src/Calendar/components/ViewSelector/index.tsx +49 -49
  24. package/src/Calendar/components/YearTile/YearTile.module.scss +85 -85
  25. package/src/Calendar/components/YearTile/index.tsx +65 -65
  26. package/src/Calendar/hooks/useCalendarNav.ts +83 -83
  27. package/src/Calendar/hooks/useDateSelect.ts +54 -54
  28. package/src/Calendar/index.scss +189 -189
  29. package/src/Calendar/index.tsx +66 -66
  30. package/src/Calendar/type.ts +3 -3
  31. package/src/Calendar/utils/getWeeksInMonth.ts +45 -45
  32. package/src/Calendar/utils/isInRange.ts +8 -8
  33. package/src/Calendar/utils/isSameDay.ts +21 -21
  34. package/src/assets/arrow.svg +11 -11
  35. package/src/assets/close.svg +15 -15
  36. package/src/assets/drop-arrow.svg +3 -3
  37. package/src/common/Accordion/Accordion.module.scss +53 -53
  38. package/src/common/Accordion/arrow-down.svg +3 -3
  39. package/src/common/Accordion/arrow-up.svg +3 -3
  40. package/src/common/Accordion/index.tsx +54 -54
  41. package/src/common/Breadcrumbs/Breadcrumbs.module.scss +46 -46
  42. package/src/common/Breadcrumbs/home.svg +5 -5
  43. package/src/common/Breadcrumbs/index.tsx +82 -82
  44. package/src/common/Button/Button.module.scss +127 -127
  45. package/src/common/Button/index.tsx +60 -60
  46. package/src/common/Card/Card.module.scss +28 -28
  47. package/src/common/Card/index.tsx +19 -19
  48. package/src/common/Carousel/Carousel.module.scss +222 -0
  49. package/src/common/Carousel/index.tsx +411 -0
  50. package/src/common/Divider/Divider.module.scss +101 -101
  51. package/src/common/Divider/index.tsx +24 -24
  52. package/src/common/DropDown/DropDown.module.scss +135 -135
  53. package/src/common/DropDown/List.tsx +156 -156
  54. package/src/common/DropDown/arrow-down.svg +3 -3
  55. package/src/common/DropDown/index.tsx +108 -108
  56. package/src/common/DropDown/search.svg +4 -4
  57. package/src/common/Pagination/Pagination.module.scss +210 -210
  58. package/src/common/Pagination/arrow-left.svg +11 -11
  59. package/src/common/Pagination/arrow-right.svg +11 -11
  60. package/src/common/Pagination/index.tsx +156 -156
  61. package/src/common/RollingBanner/RollingBanner.module.scss +126 -0
  62. package/src/common/RollingBanner/index.tsx +140 -0
  63. package/src/common/SegmentButton/SegmentButton.module.scss +46 -45
  64. package/src/common/SegmentButton/index.tsx +79 -79
  65. package/src/common/Skeleton/Skeleton.module.scss +80 -80
  66. package/src/common/Skeleton/index.tsx +47 -47
  67. package/src/common/SwitchButton/SwitchButton.module.scss +65 -65
  68. package/src/common/SwitchButton/index.tsx +57 -57
  69. package/src/common/Table/Table.module.scss +70 -70
  70. package/src/common/Table/index.tsx +128 -128
  71. package/src/index.scss +1 -1
  72. package/src/index.tsx +24 -22
  73. package/src/styles/color.scss +346 -346
  74. package/src/styles/font-face.scss +18 -18
  75. package/src/styles/font.scss +49 -49
  76. package/src/styles/mediaQuery.scss +22 -22
  77. package/src/styles/scrollbar.scss +71 -71
  78. package/src/svg.d.ts +6 -6
  79. package/src/utils/styles/mediaQuery.scss +22 -22
  80. package/src/utils/ts/allowDecimal.ts +4 -4
  81. package/src/utils/ts/autoHypen.ts +33 -33
  82. package/src/utils/ts/calculateMax.ts +24 -24
  83. package/src/utils/ts/checkIsMobilePlatform.ts +15 -15
  84. package/src/utils/ts/formatFileSize.ts +16 -16
  85. package/src/utils/ts/formatMoney.ts +16 -16
  86. package/src/utils/ts/gradientRatio.ts +61 -61
  87. package/src/utils/ts/kiloToMega.ts +30 -30
  88. package/src/utils/ts/maskingPhone.ts +8 -8
  89. package/src/utils/ts/toQueryString.ts +7 -7
  90. package/src/utils/ts/valueAsNumber.ts +15 -15
  91. package/src/vite-env.d.ts +2 -2
package/README.md CHANGED
@@ -1,73 +1,73 @@
1
- # @jk-core/components
2
-
3
- jk-core 프로젝트를 위한 React 커스텀 컴포넌트 모음입니다.
4
-
5
- <br/>
6
-
7
- ## 설치
8
- ```bash
9
- npm install @jk-core/components
10
- yarn add @jk-core/components
11
- ```
12
-
13
- <br/>
14
- <br/>
15
-
16
-
17
- ## Calendar
18
-
19
- Calendar 컴포넌트는 날짜 선택 기능을 제공하는 사용자 정의 React 컴포넌트입니다. 일, 월, 년 단위로 날짜를 선택할 수 있으며, 다양한 커스터마이징 옵션을 제공합니다.
20
-
21
- <br/>
22
-
23
- ## 특징
24
-
25
- - 일/월/년 단위의 날짜 선택
26
- - 커스텀 스타일링 지원
27
- - 최소/최대 날짜 설정 기능
28
- - 타일 내용 커스터마이징 가능
29
- - 반응형 디자인
30
-
31
- <br/>
32
-
33
- ## 사용법
34
- ```typescript
35
- import { Calendar, CalendarView } from '@jk-core/components';
36
- import { useState } from 'react';
37
- function App() {
38
- const [view, setView] = useState<CalendarView>('month');
39
- const [date, setDate] = useState<Date>(new Date());
40
- return (
41
- <Calendar
42
- date={date}
43
- view={view}
44
- setView={setView}
45
- onChange={setDate}
46
- />
47
- );
48
- }
49
- ```
50
-
51
- <br/>
52
-
53
- ## Props
54
-
55
- | Prop | 타입 | 기본값 | 설명 |
56
- |------|------|--------|------|
57
- | className | string | '' | 추가적인 CSS 클래스 |
58
- | date | Date | undefined | 선택된 날짜 |
59
- | view | CalendarView | 'day' | 현재 보기 모드 ('day', 'month', 'year') |
60
- | setView | (view: CalendarView) => void | () => {} | 보기 모드 변경 함수 |
61
- | tileContent | (date: Date \| undefined, view: CalendarView) => React.ReactNode | undefined | 타일 내용 커스터마이징 함수 |
62
- | onChange | (date: Date) => void | () => {} | 날짜 선택 시 호출되는 함수 |
63
- | min | Date | new Date(2000, 0, 1) | 선택 가능한 최소 날짜 |
64
- | max | Date | new Date(2099, 11, 31) | 선택 가능한 최대 날짜 |
65
- | onClose | () => void | undefined | 닫기 버튼 클릭 시 호출되는 함수 |
66
- | viewSelector | boolean | true | 보기 모드 선택기 표시 여부 |
67
-
68
- <br/>
69
-
70
- ## 스타일링
71
-
72
- Calendar 컴포넌트는 CSS 모듈을 사용하여 스타일링되어 있습니다. 커스텀 스타일을 적용하려면 `className` prop을 사용하거나 컴포넌트의 CSS 모듈 파일을 직접 수정하세요.
73
-
1
+ # @jk-core/components
2
+
3
+ jk-core 프로젝트를 위한 React 커스텀 컴포넌트 모음입니다.
4
+
5
+ <br/>
6
+
7
+ ## 설치
8
+ ```bash
9
+ npm install @jk-core/components
10
+ yarn add @jk-core/components
11
+ ```
12
+
13
+ <br/>
14
+ <br/>
15
+
16
+
17
+ ## Calendar
18
+
19
+ Calendar 컴포넌트는 날짜 선택 기능을 제공하는 사용자 정의 React 컴포넌트입니다. 일, 월, 년 단위로 날짜를 선택할 수 있으며, 다양한 커스터마이징 옵션을 제공합니다.
20
+
21
+ <br/>
22
+
23
+ ## 특징
24
+
25
+ - 일/월/년 단위의 날짜 선택
26
+ - 커스텀 스타일링 지원
27
+ - 최소/최대 날짜 설정 기능
28
+ - 타일 내용 커스터마이징 가능
29
+ - 반응형 디자인
30
+
31
+ <br/>
32
+
33
+ ## 사용법
34
+ ```typescript
35
+ import { Calendar, CalendarView } from '@jk-core/components';
36
+ import { useState } from 'react';
37
+ function App() {
38
+ const [view, setView] = useState<CalendarView>('month');
39
+ const [date, setDate] = useState<Date>(new Date());
40
+ return (
41
+ <Calendar
42
+ date={date}
43
+ view={view}
44
+ setView={setView}
45
+ onChange={setDate}
46
+ />
47
+ );
48
+ }
49
+ ```
50
+
51
+ <br/>
52
+
53
+ ## Props
54
+
55
+ | Prop | 타입 | 기본값 | 설명 |
56
+ |------|------|--------|------|
57
+ | className | string | '' | 추가적인 CSS 클래스 |
58
+ | date | Date | undefined | 선택된 날짜 |
59
+ | view | CalendarView | 'day' | 현재 보기 모드 ('day', 'month', 'year') |
60
+ | setView | (view: CalendarView) => void | () => {} | 보기 모드 변경 함수 |
61
+ | tileContent | (date: Date \| undefined, view: CalendarView) => React.ReactNode | undefined | 타일 내용 커스터마이징 함수 |
62
+ | onChange | (date: Date) => void | () => {} | 날짜 선택 시 호출되는 함수 |
63
+ | min | Date | new Date(2000, 0, 1) | 선택 가능한 최소 날짜 |
64
+ | max | Date | new Date(2099, 11, 31) | 선택 가능한 최대 날짜 |
65
+ | onClose | () => void | undefined | 닫기 버튼 클릭 시 호출되는 함수 |
66
+ | viewSelector | boolean | true | 보기 모드 선택기 표시 여부 |
67
+
68
+ <br/>
69
+
70
+ ## 스타일링
71
+
72
+ Calendar 컴포넌트는 CSS 모듈을 사용하여 스타일링되어 있습니다. 커스텀 스타일을 적용하려면 `className` prop을 사용하거나 컴포넌트의 CSS 모듈 파일을 직접 수정하세요.
73
+