@tipp/ui 2.3.0 → 2.3.2

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 (174) hide show
  1. package/dist/app/index.cjs.map +1 -1
  2. package/dist/app/index.js +87 -87
  3. package/dist/app/platform/coach-question-list.cjs.map +1 -1
  4. package/dist/app/platform/coach-question-list.js +32 -32
  5. package/dist/app/platform/contents-card.cjs.map +1 -1
  6. package/dist/app/platform/contents-card.js +32 -32
  7. package/dist/app/platform/curriculum-card.cjs.map +1 -1
  8. package/dist/app/platform/curriculum-card.js +6 -6
  9. package/dist/app/platform/edit-coaching-time.cjs.map +1 -1
  10. package/dist/app/platform/edit-coaching-time.js +71 -71
  11. package/dist/app/platform/edit-service-type.cjs.map +1 -1
  12. package/dist/app/platform/edit-service-type.js +72 -72
  13. package/dist/app/platform/goal-manage-card-edit.cjs.map +1 -1
  14. package/dist/app/platform/goal-manage-card-edit.js +71 -71
  15. package/dist/app/platform/goal-manage-card-read.cjs.map +1 -1
  16. package/dist/app/platform/goal-manage-card-read.js +32 -32
  17. package/dist/app/platform/on-offline-radio-card.cjs.map +1 -1
  18. package/dist/app/platform/on-offline-radio-card.js +71 -71
  19. package/dist/app/platform/report-card.cjs.map +1 -1
  20. package/dist/app/platform/report-card.js +32 -32
  21. package/dist/app/platform/reservation-card.cjs.map +1 -1
  22. package/dist/app/platform/reservation-card.js +72 -72
  23. package/dist/app/platform/session-card.cjs.map +1 -1
  24. package/dist/app/platform/session-card.js +74 -74
  25. package/dist/app/platform/session-review-simple-read.cjs.map +1 -1
  26. package/dist/app/platform/session-review-simple-read.js +32 -32
  27. package/dist/app/platform/userInfos/coaching-customer-info/index.cjs.map +1 -1
  28. package/dist/app/platform/userInfos/coaching-customer-info/index.js +35 -35
  29. package/dist/app/platform/userInfos/coaching-customer-info/large.cjs.map +1 -1
  30. package/dist/app/platform/userInfos/coaching-customer-info/large.js +32 -32
  31. package/dist/app/platform/userInfos/coaching-customer-info/medium.cjs.map +1 -1
  32. package/dist/app/platform/userInfos/coaching-customer-info/medium.js +32 -32
  33. package/dist/app/platform/userInfos/coaching-customer-info/small.cjs.map +1 -1
  34. package/dist/app/platform/userInfos/coaching-customer-info/small.js +32 -32
  35. package/dist/app/platform/userInfos/session-user-info-detail.cjs.map +1 -1
  36. package/dist/app/platform/userInfos/session-user-info-detail.js +32 -32
  37. package/dist/app/platform/userInfos/utils.cjs.map +1 -1
  38. package/dist/app/platform/userInfos/utils.js +31 -31
  39. package/dist/atoms/bullet-text.js +2 -2
  40. package/dist/atoms/dialog.js +2 -2
  41. package/dist/atoms/field-error-wrapper.js +2 -2
  42. package/dist/atoms/index.cjs.map +1 -1
  43. package/dist/atoms/index.js +63 -63
  44. package/dist/atoms/list.js +2 -2
  45. package/dist/atoms/pagination.cjs.map +1 -1
  46. package/dist/atoms/pagination.js +4 -4
  47. package/dist/chunk-55RMETSZ.js +89 -0
  48. package/dist/chunk-55RMETSZ.js.map +1 -0
  49. package/dist/chunk-5NA6TNVC.js +54 -0
  50. package/dist/chunk-5NA6TNVC.js.map +1 -0
  51. package/dist/chunk-65AC2AKZ.js +117 -0
  52. package/dist/chunk-65AC2AKZ.js.map +1 -0
  53. package/dist/chunk-6CTQK5X5.js +196 -0
  54. package/dist/chunk-6CTQK5X5.js.map +1 -0
  55. package/dist/chunk-6PUQK6YK.js +99 -0
  56. package/dist/chunk-6PUQK6YK.js.map +1 -0
  57. package/dist/chunk-7YI6WBLJ.js +144 -0
  58. package/dist/chunk-7YI6WBLJ.js.map +1 -0
  59. package/dist/chunk-AYAO3MO4.js +69 -0
  60. package/dist/chunk-AYAO3MO4.js.map +1 -0
  61. package/dist/chunk-BW2VENFR.js +100 -0
  62. package/dist/chunk-BW2VENFR.js.map +1 -0
  63. package/dist/chunk-C6I6QXIL.js +228 -0
  64. package/dist/chunk-C6I6QXIL.js.map +1 -0
  65. package/dist/chunk-CCNYHZOR.js +169 -0
  66. package/dist/chunk-CCNYHZOR.js.map +1 -0
  67. package/dist/chunk-DAGMEXFD.js +174 -0
  68. package/dist/chunk-DAGMEXFD.js.map +1 -0
  69. package/dist/chunk-GOXSOL2S.js +145 -0
  70. package/dist/chunk-GOXSOL2S.js.map +1 -0
  71. package/dist/chunk-HWIBGZAC.js +165 -0
  72. package/dist/chunk-HWIBGZAC.js.map +1 -0
  73. package/dist/chunk-MPEEG7OO.js +64 -0
  74. package/dist/chunk-MPEEG7OO.js.map +1 -0
  75. package/dist/chunk-NYDG7SPN.js +63 -0
  76. package/dist/chunk-NYDG7SPN.js.map +1 -0
  77. package/dist/chunk-P7ZFJHY5.js +233 -0
  78. package/dist/chunk-P7ZFJHY5.js.map +1 -0
  79. package/dist/chunk-R2LFT26A.js +192 -0
  80. package/dist/chunk-R2LFT26A.js.map +1 -0
  81. package/dist/chunk-R7IT4TCD.js +139 -0
  82. package/dist/chunk-R7IT4TCD.js.map +1 -0
  83. package/dist/chunk-SVFDAVBS.js +70 -0
  84. package/dist/chunk-SVFDAVBS.js.map +1 -0
  85. package/dist/chunk-SWAF52SS.js +363 -0
  86. package/dist/chunk-SWAF52SS.js.map +1 -0
  87. package/dist/chunk-TDC2MDRA.js +68 -0
  88. package/dist/chunk-TDC2MDRA.js.map +1 -0
  89. package/dist/chunk-XEM7S4HK.js +79 -0
  90. package/dist/chunk-XEM7S4HK.js.map +1 -0
  91. package/dist/chunk-YJZJOZMK.js +125 -0
  92. package/dist/chunk-YJZJOZMK.js.map +1 -0
  93. package/dist/chunk-Z42FOTXC.js +87 -0
  94. package/dist/chunk-Z42FOTXC.js.map +1 -0
  95. package/dist/chunk-ZN5L462B.js +75 -0
  96. package/dist/chunk-ZN5L462B.js.map +1 -0
  97. package/dist/context/index.js +5 -5
  98. package/dist/icon.cjs +2 -0
  99. package/dist/icon.cjs.map +1 -1
  100. package/dist/icon.d.cts +1 -1
  101. package/dist/icon.d.ts +1 -1
  102. package/dist/icon.js +3 -1
  103. package/dist/index.cjs +2 -0
  104. package/dist/index.cjs.map +1 -1
  105. package/dist/index.css +1 -0
  106. package/dist/index.d.cts +1 -1
  107. package/dist/index.d.ts +1 -1
  108. package/dist/index.js +131 -129
  109. package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/index.cjs.map +1 -1
  110. package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/index.js +18 -18
  111. package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-comp.cjs.map +1 -1
  112. package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-comp.js +5 -5
  113. package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-body.cjs.map +1 -1
  114. package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-body.js +12 -12
  115. package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-footer.cjs.map +1 -1
  116. package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-footer.js +3 -3
  117. package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-header.js +3 -3
  118. package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-layout.js +2 -2
  119. package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-radio.cjs.map +1 -1
  120. package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-radio.js +7 -7
  121. package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-satisfaction-option.cjs.map +1 -1
  122. package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-satisfaction-option.js +6 -6
  123. package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-satisfaction-text.cjs.map +1 -1
  124. package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-satisfaction-text.js +6 -6
  125. package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-text.cjs.map +1 -1
  126. package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-text.js +6 -6
  127. package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/complete-review.cjs.map +1 -1
  128. package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/complete-review.js +5 -5
  129. package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/index.cjs.map +1 -1
  130. package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/index.js +21 -21
  131. package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/start-review.cjs.map +1 -1
  132. package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/start-review.js +7 -7
  133. package/dist/molecules/curriculumV2/CurriculumContents/curriculum-ai-traning.cjs.map +1 -1
  134. package/dist/molecules/curriculumV2/CurriculumContents/curriculum-ai-traning.js +4 -4
  135. package/dist/molecules/curriculumV2/CurriculumContents/curriculum-review.cjs.map +1 -1
  136. package/dist/molecules/curriculumV2/CurriculumContents/curriculum-review.js +23 -23
  137. package/dist/molecules/curriculumV2/CurriculumContents/index.cjs.map +1 -1
  138. package/dist/molecules/curriculumV2/CurriculumContents/index.js +26 -26
  139. package/dist/molecules/curriculumV2/CurriculumSidebar/Items/curriculum-item-title.js +2 -2
  140. package/dist/molecules/curriculumV2/CurriculumSidebar/Items/section-item.cjs.map +1 -1
  141. package/dist/molecules/curriculumV2/CurriculumSidebar/Items/section-item.js +5 -5
  142. package/dist/molecules/curriculumV2/CurriculumSidebar/index.cjs.map +1 -1
  143. package/dist/molecules/curriculumV2/CurriculumSidebar/index.js +9 -9
  144. package/dist/molecules/curriculumV2/CurriculumSidebar/sidebar-item.cjs.map +1 -1
  145. package/dist/molecules/curriculumV2/CurriculumSidebar/sidebar-item.js +7 -7
  146. package/dist/molecules/curriculumV2/curriculum-sub-nav.cjs.map +1 -1
  147. package/dist/molecules/curriculumV2/curriculum-sub-nav.js +5 -5
  148. package/dist/molecules/curriculumV2/curriculum-v2-layout.js +2 -2
  149. package/dist/molecules/curriculumV2/index.cjs.map +1 -1
  150. package/dist/molecules/curriculumV2/index.js +34 -34
  151. package/dist/molecules/date-picker/date-picker-button.cjs.map +1 -1
  152. package/dist/molecules/date-picker/date-picker-button.js +7 -7
  153. package/dist/molecules/date-picker/index.cjs.map +1 -1
  154. package/dist/molecules/date-picker/index.js +6 -6
  155. package/dist/molecules/download-card.js +2 -2
  156. package/dist/molecules/dynamic-field.js +5 -5
  157. package/dist/molecules/dynamic-form.js +6 -6
  158. package/dist/molecules/expand-table/index.cjs.map +1 -1
  159. package/dist/molecules/expand-table/index.js +6 -6
  160. package/dist/molecules/force-refresh.js +2 -2
  161. package/dist/molecules/ghost-post.js +4 -4
  162. package/dist/molecules/index.cjs.map +1 -1
  163. package/dist/molecules/index.js +63 -63
  164. package/dist/molecules/learning-post.js +6 -6
  165. package/dist/molecules/navigation.js +3 -3
  166. package/dist/molecules/one-on-one-guide-list.js +3 -3
  167. package/dist/molecules/stepper.cjs.map +1 -1
  168. package/dist/molecules/stepper.js +5 -5
  169. package/dist/molecules/tag-selector.cjs.map +1 -1
  170. package/dist/molecules/tag-selector.js +6 -6
  171. package/dist/utils/curriculum.utils.cjs.map +1 -1
  172. package/dist/utils/curriculum.utils.js +1 -1
  173. package/package.json +1 -1
  174. package/src/icon.ts +1 -0
@@ -0,0 +1,63 @@
1
+ import {
2
+ review_question_body_default
3
+ } from "./chunk-AYAO3MO4.js";
4
+ import {
5
+ review_question_footer_default
6
+ } from "./chunk-5NA6TNVC.js";
7
+ import {
8
+ review_question_header_default
9
+ } from "./chunk-VREM33BW.js";
10
+ import {
11
+ review_question_layout_default
12
+ } from "./chunk-X2Y2UWY2.js";
13
+
14
+ // src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/index.tsx
15
+ import { jsx } from "react/jsx-runtime";
16
+ function ReviewQuestion({
17
+ question,
18
+ index,
19
+ total,
20
+ answer,
21
+ error,
22
+ onChange,
23
+ onNext,
24
+ onPrev,
25
+ isLast,
26
+ isNextDisabled,
27
+ onSubmit,
28
+ isLoading
29
+ }) {
30
+ return /* @__PURE__ */ jsx(
31
+ review_question_layout_default,
32
+ {
33
+ Body: /* @__PURE__ */ jsx(
34
+ review_question_body_default,
35
+ {
36
+ answer,
37
+ error,
38
+ onChange,
39
+ question
40
+ }
41
+ ),
42
+ Footer: /* @__PURE__ */ jsx(
43
+ review_question_footer_default,
44
+ {
45
+ index,
46
+ isLast,
47
+ isLoading,
48
+ isNextButtonDisabled: isNextDisabled,
49
+ onNext,
50
+ onPrev,
51
+ onSubmit
52
+ }
53
+ ),
54
+ Header: /* @__PURE__ */ jsx(review_question_header_default, { index, total })
55
+ }
56
+ );
57
+ }
58
+ var ReviewQuestion_default = ReviewQuestion;
59
+
60
+ export {
61
+ ReviewQuestion_default
62
+ };
63
+ //# sourceMappingURL=chunk-NYDG7SPN.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/index.tsx"],"sourcesContent":["import React from 'react';\nimport type { ReviewQuestionElement } from '@/types/curriculum.type';\nimport ReviewQuestionLayout from './review-question-layout';\nimport ReviewQuestionHeader from './review-question-header';\nimport ReviewQuestionFooter from './review-question-footer';\nimport ReviewQuestionBody from './review-question-body';\n\ninterface ReviewQuestionProps {\n question: ReviewQuestionElement;\n index: number;\n total: number;\n answer: string;\n error?: string;\n onChange: (value: string) => void;\n onNext: () => void;\n onPrev: () => void;\n isLast: boolean;\n isNextDisabled?: boolean;\n onSubmit: () => void;\n isLoading?: boolean;\n}\n\nfunction ReviewQuestion({\n question,\n index,\n total,\n answer,\n error,\n onChange,\n onNext,\n onPrev,\n isLast,\n isNextDisabled,\n onSubmit,\n isLoading,\n}: ReviewQuestionProps): React.ReactElement {\n \n return (\n <ReviewQuestionLayout\n Body={\n <ReviewQuestionBody\n answer={answer}\n error={error}\n onChange={onChange}\n question={question}\n />\n }\n Footer={\n <ReviewQuestionFooter\n index={index}\n isLast={isLast}\n isLoading={isLoading}\n isNextButtonDisabled={isNextDisabled}\n onNext={onNext}\n onPrev={onPrev}\n onSubmit={onSubmit}\n />\n }\n Header={<ReviewQuestionHeader index={index} total={total} />}\n />\n );\n}\n\nexport default ReviewQuestion;\n"],"mappings":";;;;;;;;;;;;;;AAwCQ;AAlBR,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4C;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MAEF,QACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,sBAAsB;AAAA,UACtB;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MAEF,QAAQ,oBAAC,kCAAqB,OAAc,OAAc;AAAA;AAAA,EAC5D;AAEJ;AAEA,IAAO,yBAAQ;","names":[]}
@@ -0,0 +1,233 @@
1
+ import {
2
+ Popover
3
+ } from "./chunk-5AVBYDPB.js";
4
+ import {
5
+ IconButton
6
+ } from "./chunk-XK6VEVOK.js";
7
+ import {
8
+ Flex
9
+ } from "./chunk-25HMMI7R.js";
10
+ import {
11
+ Button
12
+ } from "./chunk-ZVDAEY5Q.js";
13
+ import {
14
+ Box
15
+ } from "./chunk-4Y5BEXVN.js";
16
+ import {
17
+ ChevronLeftIcon,
18
+ ChevronRightIcon
19
+ } from "./chunk-R7IT4TCD.js";
20
+ import {
21
+ Heading
22
+ } from "./chunk-BESTU2AY.js";
23
+ import {
24
+ Typo
25
+ } from "./chunk-PMJIFLDT.js";
26
+ import {
27
+ __objRest,
28
+ __spreadProps,
29
+ __spreadValues
30
+ } from "./chunk-CRTRMMJ7.js";
31
+
32
+ // src/molecules/date-picker/index.tsx
33
+ import { forwardRef, useMemo, useState, useEffect, useRef } from "react";
34
+ import ReactDatePicker from "react-datepicker";
35
+ import { ko } from "date-fns/locale";
36
+ import { jsx, jsxs } from "react/jsx-runtime";
37
+ var DatePicker = forwardRef(
38
+ (props, ref) => {
39
+ const _a = props, { fullWidth } = _a, rest = __objRest(_a, ["fullWidth"]);
40
+ const fullWidthClassName = fullWidth ? "full-width" : "";
41
+ const [isYearDropdownOpen, setIsYearDropdownOpen] = useState(false);
42
+ const [isMonthDropdownOpen, setIsMonthDropdownOpen] = useState(false);
43
+ const renderCustomHeader = useMemo(() => {
44
+ const getYears = () => {
45
+ const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
46
+ return Array.from(
47
+ { length: currentYear + 5 - 1920 },
48
+ (_, index) => 1920 + index
49
+ ).filter((year) => {
50
+ if (props.minDate && year < props.minDate.getFullYear()) {
51
+ return false;
52
+ }
53
+ if (props.maxDate && year > props.maxDate.getFullYear()) {
54
+ return false;
55
+ }
56
+ return true;
57
+ });
58
+ };
59
+ return getRenderCustomHeader(__spreadProps(__spreadValues({}, props), {
60
+ years: getYears(),
61
+ isYearDropdownOpen,
62
+ setIsYearDropdownOpen,
63
+ isMonthDropdownOpen,
64
+ setIsMonthDropdownOpen
65
+ }));
66
+ }, [isMonthDropdownOpen, isYearDropdownOpen, props]);
67
+ return /* @__PURE__ */ jsx(Flex, { p: "0", width: "100%", children: /* @__PURE__ */ jsx(
68
+ ReactDatePicker,
69
+ __spreadProps(__spreadValues({
70
+ dateFormat: "yyyy/MM/dd h:mm aa",
71
+ formatWeekDay: (nameOfDay) => {
72
+ return nameOfDay[0];
73
+ },
74
+ locale: ko,
75
+ nextMonthButtonLabel: "\uB2E4\uC74C \uB2EC",
76
+ placeholderText: "YYYY/MM/DD hh:mm AM/PM",
77
+ popperProps: { strategy: "fixed" },
78
+ previousMonthButtonLabel: "\uC774\uC804 \uB2EC",
79
+ ref,
80
+ renderCustomHeader,
81
+ showPopperArrow: false,
82
+ timeCaption: "\uC2DC\uAC04",
83
+ timeFormat: "aa h:mm",
84
+ timeIntervals: 10
85
+ }, rest), {
86
+ calendarClassName: `tipp_datePicker_calendar ${rest.calendarClassName || ""}`,
87
+ wrapperClassName: `tipp_datePicker ${fullWidthClassName} ${rest.wrapperClassName || ""}`
88
+ })
89
+ ) });
90
+ }
91
+ );
92
+ DatePicker.displayName = "DatePicker";
93
+ function DropdownSelector({
94
+ isOpen,
95
+ onOpenChange,
96
+ onSelect,
97
+ options,
98
+ selectedValue,
99
+ suffix
100
+ }) {
101
+ const scrollContainerRef = useRef(null);
102
+ useEffect(() => {
103
+ if (isOpen) {
104
+ queueMicrotask(() => {
105
+ var _a;
106
+ const item = (_a = scrollContainerRef.current) == null ? void 0 : _a.querySelector(
107
+ `[data-year-month-dropdown-tiem="${selectedValue}"]`
108
+ );
109
+ if (item) {
110
+ item.scrollIntoView({ behavior: "instant" });
111
+ }
112
+ });
113
+ }
114
+ }, [isOpen]);
115
+ return /* @__PURE__ */ jsxs(Popover.Root, { modal: true, onOpenChange, open: isOpen, children: [
116
+ /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(Button, { className: "react-datepicker_dropdown_header", variant: "ghost", children: /* @__PURE__ */ jsxs(Heading, { variant: "heading4", weight: "regular", children: [
117
+ selectedValue,
118
+ suffix
119
+ ] }) }) }),
120
+ /* @__PURE__ */ jsx(Popover.Content, { side: "bottom", children: /* @__PURE__ */ jsx(
121
+ Box,
122
+ {
123
+ maxHeight: "200px",
124
+ overflowY: "auto",
125
+ ref: scrollContainerRef,
126
+ style: { scrollbarWidth: "none" },
127
+ children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "1", children: options.map((item) => /* @__PURE__ */ jsx(
128
+ Button,
129
+ {
130
+ className: "react-datepicker_dropdown_item",
131
+ color: "gray",
132
+ "data-year-month-dropdown-tiem": item,
133
+ onClick: () => {
134
+ onSelect(item);
135
+ },
136
+ onMouseDown: (e) => {
137
+ e.stopPropagation();
138
+ e.preventDefault();
139
+ },
140
+ variant: "transparent",
141
+ children: /* @__PURE__ */ jsxs(Typo, { weight: item === selectedValue ? "bold" : void 0, children: [
142
+ item,
143
+ suffix
144
+ ] })
145
+ },
146
+ item
147
+ )) })
148
+ }
149
+ ) })
150
+ ] });
151
+ }
152
+ var getRenderCustomHeader = (props) => {
153
+ const renderer = (renderCustomHeaderProps) => {
154
+ const {
155
+ date,
156
+ decreaseMonth,
157
+ increaseMonth,
158
+ prevMonthButtonDisabled,
159
+ nextMonthButtonDisabled,
160
+ changeYear,
161
+ changeMonth
162
+ } = renderCustomHeaderProps;
163
+ const {
164
+ years,
165
+ isYearDropdownOpen,
166
+ setIsYearDropdownOpen,
167
+ isMonthDropdownOpen,
168
+ setIsMonthDropdownOpen
169
+ } = props;
170
+ const year = date ? new Date(date).getFullYear() : "-";
171
+ const month = date ? new Date(date).getMonth() + 1 : "-";
172
+ return /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", pl: "2", pr: "2", children: [
173
+ /* @__PURE__ */ jsx(
174
+ IconButton,
175
+ {
176
+ className: "react-datepicker_dropdown_header",
177
+ disabled: prevMonthButtonDisabled,
178
+ onClick: decreaseMonth,
179
+ type: "button",
180
+ variant: "ghost",
181
+ children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
182
+ }
183
+ ),
184
+ /* @__PURE__ */ jsxs(Flex, { gap: "3", children: [
185
+ /* @__PURE__ */ jsx(
186
+ DropdownSelector,
187
+ {
188
+ isOpen: isYearDropdownOpen,
189
+ onOpenChange: setIsYearDropdownOpen,
190
+ onSelect: (value) => {
191
+ changeYear(value);
192
+ setIsYearDropdownOpen(false);
193
+ },
194
+ options: years,
195
+ selectedValue: year,
196
+ suffix: "\uB144"
197
+ }
198
+ ),
199
+ /* @__PURE__ */ jsx(
200
+ DropdownSelector,
201
+ {
202
+ isOpen: isMonthDropdownOpen,
203
+ onOpenChange: setIsMonthDropdownOpen,
204
+ onSelect: (value) => {
205
+ changeMonth(value - 1);
206
+ setIsMonthDropdownOpen(false);
207
+ },
208
+ options: Array.from({ length: 12 }, (_, index) => index + 1),
209
+ selectedValue: month,
210
+ suffix: "\uC6D4"
211
+ }
212
+ )
213
+ ] }),
214
+ /* @__PURE__ */ jsx(
215
+ IconButton,
216
+ {
217
+ className: "react-datepicker_dropdown_header",
218
+ disabled: nextMonthButtonDisabled,
219
+ onClick: increaseMonth,
220
+ type: "button",
221
+ variant: "ghost",
222
+ children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
223
+ }
224
+ )
225
+ ] });
226
+ };
227
+ return renderer;
228
+ };
229
+
230
+ export {
231
+ DatePicker
232
+ };
233
+ //# sourceMappingURL=chunk-P7ZFJHY5.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/molecules/date-picker/index.tsx"],"sourcesContent":["import type { ElementRef } from 'react';\nimport React, { forwardRef, useMemo, useState, useEffect, useRef } from 'react';\nimport type { DatePickerProps as ReactDatePickerProps } from 'react-datepicker';\nimport ReactDatePicker from 'react-datepicker';\nimport { ko } from 'date-fns/locale';\nimport { Box } from '@/atoms/box';\nimport { Button } from '@/atoms/button';\nimport { Popover } from '@/atoms/popover';\nimport { Typo } from '@/atoms/typo';\nimport { IconButton } from '../../atoms/icon-button';\nimport { Flex } from '../../atoms/flex';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../../icon';\nimport { Heading } from '../../atoms/heading';\n\nexport type DatePickerProps = ReactDatePickerProps & {\n fullWidth?: boolean;\n};\ntype DatePickerRef = ElementRef<typeof ReactDatePicker>;\n\nexport const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(\n (props, ref): React.ReactNode => {\n const { fullWidth, ...rest } = props;\n const fullWidthClassName = fullWidth ? 'full-width' : '';\n const [isYearDropdownOpen, setIsYearDropdownOpen] = useState(false);\n const [isMonthDropdownOpen, setIsMonthDropdownOpen] = useState(false);\n\n const renderCustomHeader = useMemo(() => {\n const getYears = (): number[] => {\n const currentYear = new Date().getFullYear();\n return Array.from(\n { length: currentYear + 5 - 1920 },\n (_, index) => 1920 + index\n ).filter((year) => {\n if (props.minDate && year < props.minDate.getFullYear()) {\n return false;\n }\n if (props.maxDate && year > props.maxDate.getFullYear()) {\n return false;\n }\n return true;\n });\n };\n\n return getRenderCustomHeader({\n ...props,\n years: getYears(),\n isYearDropdownOpen,\n setIsYearDropdownOpen,\n isMonthDropdownOpen,\n setIsMonthDropdownOpen,\n });\n }, [isMonthDropdownOpen, isYearDropdownOpen, props]);\n\n return (\n <Flex p=\"0\" width=\"100%\">\n <ReactDatePicker\n dateFormat=\"yyyy/MM/dd h:mm aa\"\n formatWeekDay={(nameOfDay) => {\n return nameOfDay[0];\n }}\n locale={ko}\n nextMonthButtonLabel=\"다음 달\"\n placeholderText=\"YYYY/MM/DD hh:mm AM/PM\"\n popperProps={{ strategy: 'fixed' }}\n previousMonthButtonLabel=\"이전 달\"\n ref={ref}\n renderCustomHeader={renderCustomHeader}\n showPopperArrow={false}\n timeCaption=\"시간\"\n timeFormat=\"aa h:mm\"\n timeIntervals={10}\n {...rest}\n calendarClassName={`tipp_datePicker_calendar ${rest.calendarClassName || ''}`}\n wrapperClassName={`tipp_datePicker ${fullWidthClassName} ${rest.wrapperClassName || ''}`}\n />\n </Flex>\n );\n }\n);\n\nDatePicker.displayName = 'DatePicker';\n\ninterface DropdownSelectorProps {\n isOpen: boolean;\n onOpenChange: (open: boolean) => void;\n onSelect: (value: number) => void;\n options: number[];\n selectedValue: number | string;\n suffix: string;\n}\n\nfunction DropdownSelector({\n isOpen,\n onOpenChange,\n onSelect,\n options,\n selectedValue,\n suffix,\n}: DropdownSelectorProps): React.JSX.Element {\n const scrollContainerRef = useRef<HTMLDivElement>(null);\n useEffect(() => {\n if (isOpen) {\n queueMicrotask(() => {\n const item = scrollContainerRef.current?.querySelector(\n `[data-year-month-dropdown-tiem=\"${selectedValue}\"]`\n );\n if (item) {\n item.scrollIntoView({ behavior: 'instant' });\n }\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- 트리거 최적화\n }, [isOpen]);\n\n return (\n <Popover.Root modal onOpenChange={onOpenChange} open={isOpen}>\n <Popover.Trigger>\n <Button className=\"react-datepicker_dropdown_header\" variant=\"ghost\">\n <Heading variant=\"heading4\" weight=\"regular\">\n {selectedValue}\n {suffix}\n </Heading>\n </Button>\n </Popover.Trigger>\n <Popover.Content side=\"bottom\">\n <Box\n maxHeight=\"200px\"\n overflowY=\"auto\"\n ref={scrollContainerRef}\n style={{ scrollbarWidth: 'none' }}\n >\n <Flex direction=\"column\" gap=\"1\">\n {options.map((item: number) => (\n <Button\n className=\"react-datepicker_dropdown_item\"\n color=\"gray\"\n data-year-month-dropdown-tiem={item}\n key={item}\n onClick={() => {\n onSelect(item);\n }}\n onMouseDown={(e) => {\n e.stopPropagation();\n e.preventDefault();\n }}\n variant=\"transparent\"\n >\n <Typo weight={item === selectedValue ? 'bold' : undefined}>\n {item}\n {suffix}\n </Typo>\n </Button>\n ))}\n </Flex>\n </Box>\n </Popover.Content>\n </Popover.Root>\n );\n}\n\nconst getRenderCustomHeader: (\n props: ReactDatePickerProps & {\n years: number[];\n isYearDropdownOpen: boolean;\n setIsYearDropdownOpen: (show: boolean) => void;\n isMonthDropdownOpen: boolean;\n setIsMonthDropdownOpen: (show: boolean) => void;\n }\n) => ReactDatePickerProps['renderCustomHeader'] = (props) => {\n const renderer: ReactDatePickerProps['renderCustomHeader'] = (\n renderCustomHeaderProps\n ) => {\n const {\n date,\n decreaseMonth,\n increaseMonth,\n prevMonthButtonDisabled,\n nextMonthButtonDisabled,\n changeYear,\n changeMonth,\n } = renderCustomHeaderProps;\n const {\n years,\n isYearDropdownOpen,\n setIsYearDropdownOpen,\n isMonthDropdownOpen,\n setIsMonthDropdownOpen,\n } = props;\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- date가 undefined일 수 있음\n const year = date ? new Date(date).getFullYear() : '-';\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- date가 undefined일 수 있음\n const month = date ? new Date(date).getMonth() + 1 : '-';\n\n return (\n <Flex align=\"center\" justify=\"between\" pl=\"2\" pr=\"2\">\n <IconButton\n className=\"react-datepicker_dropdown_header\"\n disabled={prevMonthButtonDisabled}\n onClick={decreaseMonth}\n type=\"button\"\n variant=\"ghost\"\n >\n <ChevronLeftIcon />\n </IconButton>\n <Flex gap=\"3\">\n <DropdownSelector\n isOpen={isYearDropdownOpen}\n onOpenChange={setIsYearDropdownOpen}\n onSelect={(value) => {\n changeYear(value);\n setIsYearDropdownOpen(false);\n }}\n options={years}\n selectedValue={year}\n suffix=\"년\"\n />\n <DropdownSelector\n isOpen={isMonthDropdownOpen}\n onOpenChange={setIsMonthDropdownOpen}\n onSelect={(value) => {\n changeMonth(value - 1);\n setIsMonthDropdownOpen(false);\n }}\n options={Array.from({ length: 12 }, (_, index) => index + 1)}\n selectedValue={month}\n suffix=\"월\"\n />\n </Flex>\n\n <IconButton\n className=\"react-datepicker_dropdown_header\"\n disabled={nextMonthButtonDisabled}\n onClick={increaseMonth}\n type=\"button\"\n variant=\"ghost\"\n >\n <ChevronRightIcon />\n </IconButton>\n </Flex>\n );\n };\n return renderer;\n};\n\n// DatePicker.displayName = 'DatePicker';\n"],"mappings":"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","names":[]}
@@ -0,0 +1,192 @@
1
+ import {
2
+ Row
3
+ } from "./chunk-JCG2AUFJ.js";
4
+ import {
5
+ Spinner
6
+ } from "./chunk-FR2GDOU2.js";
7
+ import {
8
+ Pagination
9
+ } from "./chunk-YJZJOZMK.js";
10
+ import {
11
+ Flex
12
+ } from "./chunk-25HMMI7R.js";
13
+ import {
14
+ TriangleArrowUpIcon
15
+ } from "./chunk-2O45FRFQ.js";
16
+ import {
17
+ TriangleArrowDownIcon
18
+ } from "./chunk-776WBOKL.js";
19
+ import {
20
+ Typo
21
+ } from "./chunk-PMJIFLDT.js";
22
+
23
+ // src/molecules/expand-table/index.tsx
24
+ import {
25
+ flexRender,
26
+ getCoreRowModel,
27
+ useReactTable,
28
+ getSortedRowModel,
29
+ createColumnHelper,
30
+ getPaginationRowModel
31
+ } from "@tanstack/react-table";
32
+ import { useCallback, useMemo, useState } from "react";
33
+ import { jsx, jsxs } from "react/jsx-runtime";
34
+ function ExpandTable(props) {
35
+ const {
36
+ data,
37
+ columns,
38
+ ExpandComp,
39
+ placeholder,
40
+ onRowClick,
41
+ tableStyle,
42
+ showPagination = true,
43
+ isLoading,
44
+ pageIndex = 0,
45
+ pageSize = 10,
46
+ siblingCount = 2,
47
+ getRowStyle,
48
+ getCellStyle
49
+ } = props;
50
+ const defaultAlign = "left";
51
+ const [pagination, setPagination] = useState({
52
+ pageIndex: pageIndex || 0,
53
+ pageSize: pageSize || 9999
54
+ });
55
+ const [sorting, setSorting] = useState([]);
56
+ const { getRowModel, getHeaderGroups, setPageIndex } = useReactTable({
57
+ data: data || [],
58
+ columns,
59
+ getCoreRowModel: getCoreRowModel(),
60
+ getSortedRowModel: getSortedRowModel(),
61
+ state: {
62
+ sorting,
63
+ pagination
64
+ },
65
+ onSortingChange: setSorting,
66
+ getPaginationRowModel: getPaginationRowModel(),
67
+ onPaginationChange: setPagination
68
+ });
69
+ const gridTemplateColumns = useMemo(() => {
70
+ return columns.map((col) => {
71
+ var _a;
72
+ if ((_a = col.meta) == null ? void 0 : _a.autoSize) return `minmax(${col.size || 50}px, 1fr)`;
73
+ return `${col.size || 150}px`;
74
+ }).join(" ");
75
+ }, [columns]);
76
+ const rowModels = getRowModel();
77
+ const onChangePagination = useCallback(
78
+ (page) => {
79
+ setPageIndex(page - 1);
80
+ },
81
+ [setPageIndex]
82
+ );
83
+ const helpCompRender = useCallback(
84
+ (rowLength) => {
85
+ if (isLoading) {
86
+ return /* @__PURE__ */ jsx(
87
+ Flex,
88
+ {
89
+ align: "center",
90
+ height: "100%",
91
+ justify: "center",
92
+ p: "5",
93
+ width: "100%",
94
+ children: /* @__PURE__ */ jsx(Spinner, {})
95
+ }
96
+ );
97
+ }
98
+ if (rowLength === 0) {
99
+ return /* @__PURE__ */ jsx("div", { className: "tr", children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ jsx(Typo, { color: "gray", mb: "6", mt: "6", variant: "body", children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder");
100
+ }
101
+ return null;
102
+ },
103
+ [isLoading, placeholder]
104
+ );
105
+ const pageCount = useMemo(() => {
106
+ if (!data) return 0;
107
+ return Math.ceil(data.length / pageSize);
108
+ }, [data, pageSize]);
109
+ return /* @__PURE__ */ jsxs("div", { className: "expand-table-wrapper", children: [
110
+ /* @__PURE__ */ jsxs("div", { className: "expand-table", style: tableStyle, children: [
111
+ /* @__PURE__ */ jsx("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(
112
+ "div",
113
+ {
114
+ className: "tr",
115
+ style: { gridTemplateColumns },
116
+ children: headerGroup.headers.map((header) => {
117
+ var _a;
118
+ const sortable = header.column.getCanSort();
119
+ const sortedState = header.column.getIsSorted();
120
+ const justifyContent = ((_a = header.column.columnDef.meta) == null ? void 0 : _a.align) || defaultAlign;
121
+ return /* @__PURE__ */ jsx("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ jsxs(
122
+ "button",
123
+ {
124
+ onClick: header.column.getToggleSortingHandler(),
125
+ style: sortable ? { cursor: "pointer" } : { cursor: "default" },
126
+ type: "button",
127
+ children: [
128
+ /* @__PURE__ */ jsx(Typo, { as: "div", variant: "body", children: flexRender(
129
+ header.column.columnDef.header,
130
+ header.getContext()
131
+ ) }),
132
+ sortable ? /* @__PURE__ */ jsxs(
133
+ Flex,
134
+ {
135
+ direction: "column",
136
+ style: { marginLeft: "var(--space-2)" },
137
+ children: [
138
+ /* @__PURE__ */ jsx(
139
+ TriangleArrowUpIcon,
140
+ {
141
+ color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
142
+ }
143
+ ),
144
+ /* @__PURE__ */ jsx(
145
+ TriangleArrowDownIcon,
146
+ {
147
+ color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
148
+ }
149
+ )
150
+ ]
151
+ }
152
+ ) : null
153
+ ]
154
+ }
155
+ ) }, header.id);
156
+ })
157
+ },
158
+ headerGroup.id
159
+ )) }),
160
+ /* @__PURE__ */ jsx("div", { className: "tbody", children: helpCompRender(rowModels.rows.length) || rowModels.rows.map((row) => {
161
+ return /* @__PURE__ */ jsx(
162
+ Row,
163
+ {
164
+ ExpandComp,
165
+ defaultAlign,
166
+ getCellStyle,
167
+ getRowStyle,
168
+ gridTemplateColumns,
169
+ onRowClick,
170
+ row
171
+ },
172
+ `row_${row.id}`
173
+ );
174
+ }) })
175
+ ] }),
176
+ showPagination ? /* @__PURE__ */ jsx(Flex, { justify: "end", pt: "3", width: "100%", children: /* @__PURE__ */ jsx(
177
+ Pagination,
178
+ {
179
+ count: pageCount,
180
+ onChange: onChangePagination,
181
+ page: pagination.pageIndex + 1,
182
+ siblingCount
183
+ }
184
+ ) }) : null
185
+ ] });
186
+ }
187
+
188
+ export {
189
+ createColumnHelper,
190
+ ExpandTable
191
+ };
192
+ //# sourceMappingURL=chunk-R2LFT26A.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/molecules/expand-table/index.tsx"],"sourcesContent":["import type {\n ColumnDef,\n SortingState,\n RowData,\n Row as RowType,\n PaginationState,\n} from '@tanstack/react-table';\nimport type { CSSProperties } from 'react';\nimport {\n flexRender,\n getCoreRowModel,\n useReactTable,\n getSortedRowModel,\n createColumnHelper,\n getPaginationRowModel,\n} from '@tanstack/react-table';\nimport React, { useCallback, useMemo, useState } from 'react'; \nimport { Flex } from '@/atoms/flex';\nimport { Pagination } from '@/atoms/pagination';\nimport { Spinner } from '@/atoms/spinner';\nimport { Typo } from '@/atoms/typo';\nimport { TriangleArrowDownIcon } from '../../icons/down';\nimport { TriangleArrowUpIcon } from '../../icons/up';\nimport { Row, type ExpandComp, type OnRowClick } from './row';\n\nexport type { ExpandComp, OnRowClick, ColumnDef, RowType as Row };\nexport { createColumnHelper };\n\nexport interface ExpandTableProps<Datum extends RowData> {\n /** 렌더할 데이터 배열 */\n data?: Datum[];\n /** 테이블 컬럼의 메타 데이터 */\n columns: ColumnDef<Datum>[];\n /** Row의 open이 true인 경우 하단의 collapse에 렌더할 컴포넌트 */\n ExpandComp?: ExpandComp<Datum>;\n /** 데이테가 없을 시 화면에 표시할 컴포넌트 */\n placeholder?: React.ReactNode;\n /** 행 클릭 시 실행할 콜백 */\n onRowClick?: OnRowClick<Datum>;\n getRowStyle?: (data: Datum) => CSSProperties;\n getCellStyle?: (data: Datum) => CSSProperties;\n tableStyle?: CSSProperties;\n isLoading?: boolean;\n\n /** pagination - 표시 유무, 기본값 true */\n showPagination?: boolean;\n /** pagination - 현재 선택된 페이지, 0부터 시작 */\n pageIndex?: number;\n /** pagination - 한 페이지에 표시될 컬럼 개수, 기본값 10 */\n pageSize?: number;\n /** pagination - */\n siblingCount?: number;\n}\n\nexport function ExpandTable<Datum extends RowData>(\n props: ExpandTableProps<Datum>\n): React.ReactNode {\n const {\n data,\n columns,\n ExpandComp,\n placeholder,\n onRowClick,\n tableStyle,\n showPagination = true,\n isLoading,\n pageIndex = 0,\n pageSize = 10,\n siblingCount = 2,\n getRowStyle,\n getCellStyle,\n } = props;\n const defaultAlign = 'left';\n const [pagination, setPagination] = useState<PaginationState>({\n pageIndex: pageIndex || 0,\n pageSize: pageSize || 9999,\n });\n\n const [sorting, setSorting] = useState<SortingState>([]);\n const { getRowModel, getHeaderGroups, setPageIndex } = useReactTable({\n data: data || [],\n columns,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n state: {\n sorting,\n pagination,\n },\n onSortingChange: setSorting,\n getPaginationRowModel: getPaginationRowModel(),\n onPaginationChange: setPagination,\n });\n\n const gridTemplateColumns = useMemo<string>(() => {\n return columns\n .map((col) => {\n if (col.meta?.autoSize) return `minmax(${col.size || 50}px, 1fr)`;\n return `${col.size || 150}px`;\n })\n .join(' ');\n }, [columns]);\n\n const rowModels = getRowModel();\n\n const onChangePagination = useCallback(\n (page: number) => {\n setPageIndex(page - 1);\n },\n [setPageIndex]\n );\n\n const helpCompRender = useCallback(\n (rowLength: number) => {\n if (isLoading) {\n return (\n <Flex\n align=\"center\"\n height=\"100%\"\n justify=\"center\"\n p=\"5\"\n width=\"100%\"\n >\n <Spinner />\n </Flex>\n );\n }\n if (rowLength === 0) {\n return (\n <div className=\"tr\" key=\"expand_placeholder\">\n <Flex align=\"center\" justify=\"center\">\n {placeholder || (\n <Typo color=\"gray\" mb=\"6\" mt=\"6\" variant=\"body\">\n 데이터가 없습니다\n </Typo>\n )}\n </Flex>\n </div>\n );\n }\n return null;\n },\n [isLoading, placeholder]\n );\n\n const pageCount = useMemo(() => {\n if (!data) return 0;\n return Math.ceil(data.length / pageSize);\n }, [data, pageSize]);\n\n return (\n <div className=\"expand-table-wrapper\">\n <div className=\"expand-table\" style={tableStyle}>\n <div className=\"thead\">\n {getHeaderGroups().map((headerGroup) => (\n <div\n className=\"tr\"\n key={headerGroup.id}\n style={{ gridTemplateColumns }}\n >\n {headerGroup.headers.map((header) => {\n const sortable = header.column.getCanSort();\n const sortedState = header.column.getIsSorted();\n const justifyContent =\n header.column.columnDef.meta?.align || defaultAlign;\n\n return (\n <div className={`${justifyContent} th`} key={header.id}>\n <button\n onClick={header.column.getToggleSortingHandler()}\n style={\n sortable ? { cursor: 'pointer' } : { cursor: 'default' }\n }\n type=\"button\"\n >\n <Typo as=\"div\" variant=\"body\">\n {flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n </Typo>\n {sortable ? (\n <Flex\n direction=\"column\"\n style={{ marginLeft: 'var(--space-2)' }}\n >\n <TriangleArrowUpIcon\n color={\n sortedState === 'asc'\n ? 'var(--iris-10)'\n : 'var(--iris-6)'\n }\n />\n <TriangleArrowDownIcon\n color={\n sortedState === 'desc'\n ? 'var(--iris-10)'\n : 'var(--iris-6)'\n }\n />\n </Flex>\n ) : null}\n </button>\n </div>\n );\n })}\n </div>\n ))}\n </div>\n <div className=\"tbody\">\n {/* 조건에 따라 placeholder 또는 loading 렌더*/}\n {helpCompRender(rowModels.rows.length) ||\n rowModels.rows.map((row) => {\n return (\n <Row\n ExpandComp={ExpandComp}\n defaultAlign={defaultAlign}\n getCellStyle={getCellStyle}\n getRowStyle={getRowStyle}\n gridTemplateColumns={gridTemplateColumns}\n key={`row_${row.id}`}\n onRowClick={onRowClick}\n row={row}\n />\n );\n })}\n </div>\n </div>\n {showPagination ? (\n <Flex justify=\"end\" pt=\"3\" width=\"100%\">\n <Pagination\n count={pageCount}\n onChange={onChangePagination}\n page={pagination.pageIndex + 1}\n siblingCount={siblingCount}\n />\n </Flex>\n ) : null}\n </div>\n );\n}\n"],"mappings":"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","names":[]}
@@ -0,0 +1,139 @@
1
+ // src/icon.ts
2
+ import {
3
+ BookmarkIcon,
4
+ ExitIcon,
5
+ InfoCircledIcon,
6
+ ExclamationTriangleIcon,
7
+ MagnifyingGlassIcon,
8
+ DotsHorizontalIcon,
9
+ ChatBubbleIcon,
10
+ PlusIcon,
11
+ BookmarkFilledIcon,
12
+ MixerHorizontalIcon,
13
+ ChevronLeftIcon,
14
+ ChevronRightIcon,
15
+ ClipboardIcon,
16
+ BarChartIcon,
17
+ PersonIcon,
18
+ GearIcon,
19
+ DotsVerticalIcon,
20
+ Pencil1Icon,
21
+ Cross1Icon,
22
+ Link2Icon,
23
+ ChevronUpIcon,
24
+ ChevronDownIcon,
25
+ FileIcon,
26
+ TrashIcon,
27
+ DoubleArrowLeftIcon,
28
+ DoubleArrowRightIcon,
29
+ GlobeIcon,
30
+ BackpackIcon,
31
+ CalendarIcon,
32
+ CheckIcon,
33
+ ArchiveIcon,
34
+ RowsIcon,
35
+ Share1Icon,
36
+ ClipboardCopyIcon,
37
+ CheckCircledIcon,
38
+ ArrowLeftIcon,
39
+ ReloadIcon,
40
+ RocketIcon,
41
+ ArrowRightIcon,
42
+ CopyIcon,
43
+ Pencil2Icon,
44
+ TargetIcon,
45
+ UpdateIcon,
46
+ DownloadIcon,
47
+ SpeakerLoudIcon,
48
+ UploadIcon,
49
+ SpeakerOffIcon,
50
+ TimerIcon,
51
+ ArrowTopRightIcon,
52
+ VideoIcon,
53
+ CubeIcon,
54
+ HamburgerMenuIcon,
55
+ FileTextIcon,
56
+ PaperPlaneIcon,
57
+ BellIcon,
58
+ ResetIcon,
59
+ HomeIcon,
60
+ StopIcon,
61
+ PlayIcon,
62
+ BoxIcon,
63
+ DashboardIcon,
64
+ SewingPinFilledIcon,
65
+ EnvelopeClosedIcon,
66
+ QuoteIcon,
67
+ FilePlusIcon,
68
+ QuestionMarkCircledIcon
69
+ } from "@radix-ui/react-icons";
70
+
71
+ export {
72
+ BookmarkIcon,
73
+ ExitIcon,
74
+ InfoCircledIcon,
75
+ ExclamationTriangleIcon,
76
+ MagnifyingGlassIcon,
77
+ DotsHorizontalIcon,
78
+ ChatBubbleIcon,
79
+ PlusIcon,
80
+ BookmarkFilledIcon,
81
+ MixerHorizontalIcon,
82
+ ChevronLeftIcon,
83
+ ChevronRightIcon,
84
+ ClipboardIcon,
85
+ BarChartIcon,
86
+ PersonIcon,
87
+ GearIcon,
88
+ DotsVerticalIcon,
89
+ Pencil1Icon,
90
+ Cross1Icon,
91
+ Link2Icon,
92
+ ChevronUpIcon,
93
+ ChevronDownIcon,
94
+ FileIcon,
95
+ TrashIcon,
96
+ DoubleArrowLeftIcon,
97
+ DoubleArrowRightIcon,
98
+ GlobeIcon,
99
+ BackpackIcon,
100
+ CalendarIcon,
101
+ CheckIcon,
102
+ ArchiveIcon,
103
+ RowsIcon,
104
+ Share1Icon,
105
+ ClipboardCopyIcon,
106
+ CheckCircledIcon,
107
+ ArrowLeftIcon,
108
+ ReloadIcon,
109
+ RocketIcon,
110
+ ArrowRightIcon,
111
+ CopyIcon,
112
+ Pencil2Icon,
113
+ TargetIcon,
114
+ UpdateIcon,
115
+ DownloadIcon,
116
+ SpeakerLoudIcon,
117
+ UploadIcon,
118
+ SpeakerOffIcon,
119
+ TimerIcon,
120
+ ArrowTopRightIcon,
121
+ VideoIcon,
122
+ CubeIcon,
123
+ HamburgerMenuIcon,
124
+ FileTextIcon,
125
+ PaperPlaneIcon,
126
+ BellIcon,
127
+ ResetIcon,
128
+ HomeIcon,
129
+ StopIcon,
130
+ PlayIcon,
131
+ BoxIcon,
132
+ DashboardIcon,
133
+ SewingPinFilledIcon,
134
+ EnvelopeClosedIcon,
135
+ QuoteIcon,
136
+ FilePlusIcon,
137
+ QuestionMarkCircledIcon
138
+ };
139
+ //# sourceMappingURL=chunk-R7IT4TCD.js.map