@tipp/ui 2.3.18 → 2.3.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 (133) hide show
  1. package/dist/app/index.cjs.map +1 -1
  2. package/dist/app/index.js +3 -3
  3. package/dist/app/platform/edit-coaching-time.cjs.map +1 -1
  4. package/dist/app/platform/edit-coaching-time.js +3 -3
  5. package/dist/app/platform/edit-service-type.cjs.map +1 -1
  6. package/dist/app/platform/edit-service-type.js +3 -3
  7. package/dist/app/platform/goal-manage-card-edit.cjs.map +1 -1
  8. package/dist/app/platform/goal-manage-card-edit.js +3 -3
  9. package/dist/app/platform/on-offline-radio-card.cjs.map +1 -1
  10. package/dist/app/platform/on-offline-radio-card.js +3 -3
  11. package/dist/app/platform/reservation-card.cjs.map +1 -1
  12. package/dist/app/platform/reservation-card.js +3 -3
  13. package/dist/app/platform/session-card.cjs.map +1 -1
  14. package/dist/app/platform/session-card.js +3 -3
  15. package/dist/chunk-232ZBMFV.js +196 -0
  16. package/dist/chunk-232ZBMFV.js.map +1 -0
  17. package/dist/chunk-24572XRX.js +140 -0
  18. package/dist/chunk-24572XRX.js.map +1 -0
  19. package/dist/chunk-34XTOQID.js +140 -0
  20. package/dist/chunk-34XTOQID.js.map +1 -0
  21. package/dist/chunk-3A3VE6SX.js +160 -0
  22. package/dist/chunk-3A3VE6SX.js.map +1 -0
  23. package/dist/chunk-3LEW5RYJ.js +163 -0
  24. package/dist/chunk-3LEW5RYJ.js.map +1 -0
  25. package/dist/chunk-3MCSM3WD.js +163 -0
  26. package/dist/chunk-3MCSM3WD.js.map +1 -0
  27. package/dist/chunk-3MG2RPYN.js +163 -0
  28. package/dist/chunk-3MG2RPYN.js.map +1 -0
  29. package/dist/chunk-4SFBZJWH.js +140 -0
  30. package/dist/chunk-4SFBZJWH.js.map +1 -0
  31. package/dist/chunk-5IQ4474Z.js +89 -0
  32. package/dist/chunk-5IQ4474Z.js.map +1 -0
  33. package/dist/chunk-5RMPQM6F.js +163 -0
  34. package/dist/chunk-5RMPQM6F.js.map +1 -0
  35. package/dist/chunk-5UUCPFYY.js +140 -0
  36. package/dist/chunk-5UUCPFYY.js.map +1 -0
  37. package/dist/chunk-6LZWYVNE.js +160 -0
  38. package/dist/chunk-6LZWYVNE.js.map +1 -0
  39. package/dist/chunk-6PJ7QIPK.js +140 -0
  40. package/dist/chunk-6PJ7QIPK.js.map +1 -0
  41. package/dist/chunk-7AGAGV4E.js +69 -0
  42. package/dist/chunk-7AGAGV4E.js.map +1 -0
  43. package/dist/chunk-7AZNNMJF.js +129 -0
  44. package/dist/chunk-7AZNNMJF.js.map +1 -0
  45. package/dist/chunk-7BAQZVH3.js +152 -0
  46. package/dist/chunk-7BAQZVH3.js.map +1 -0
  47. package/dist/chunk-7RB2YZCU.js +159 -0
  48. package/dist/chunk-7RB2YZCU.js.map +1 -0
  49. package/dist/chunk-A5SSQHU7.js +135 -0
  50. package/dist/chunk-A5SSQHU7.js.map +1 -0
  51. package/dist/chunk-BAFUUZ5V.js +163 -0
  52. package/dist/chunk-BAFUUZ5V.js.map +1 -0
  53. package/dist/chunk-BT4BMBJC.js +163 -0
  54. package/dist/chunk-BT4BMBJC.js.map +1 -0
  55. package/dist/chunk-D7NY3IWA.js +152 -0
  56. package/dist/chunk-D7NY3IWA.js.map +1 -0
  57. package/dist/chunk-DL5EXP6Q.js +129 -0
  58. package/dist/chunk-DL5EXP6Q.js.map +1 -0
  59. package/dist/chunk-EEXQP6FN.js +129 -0
  60. package/dist/chunk-EEXQP6FN.js.map +1 -0
  61. package/dist/chunk-EOPCVKLK.js +69 -0
  62. package/dist/chunk-EOPCVKLK.js.map +1 -0
  63. package/dist/chunk-FJYLZOAR.js +140 -0
  64. package/dist/chunk-FJYLZOAR.js.map +1 -0
  65. package/dist/chunk-GFRV5VDJ.js +132 -0
  66. package/dist/chunk-GFRV5VDJ.js.map +1 -0
  67. package/dist/chunk-H53J2DZE.js +157 -0
  68. package/dist/chunk-H53J2DZE.js.map +1 -0
  69. package/dist/chunk-HBQ6WF3C.js +196 -0
  70. package/dist/chunk-HBQ6WF3C.js.map +1 -0
  71. package/dist/chunk-I6ITAPUG.js +158 -0
  72. package/dist/chunk-I6ITAPUG.js.map +1 -0
  73. package/dist/chunk-IPEPHM2U.js +89 -0
  74. package/dist/chunk-IPEPHM2U.js.map +1 -0
  75. package/dist/chunk-J65X5ID3.js +136 -0
  76. package/dist/chunk-J65X5ID3.js.map +1 -0
  77. package/dist/chunk-K6PJ5GES.js +129 -0
  78. package/dist/chunk-K6PJ5GES.js.map +1 -0
  79. package/dist/chunk-LFISV2GU.js +160 -0
  80. package/dist/chunk-LFISV2GU.js.map +1 -0
  81. package/dist/chunk-LRTZTSV6.js +135 -0
  82. package/dist/chunk-LRTZTSV6.js.map +1 -0
  83. package/dist/chunk-MOITMVXZ.js +159 -0
  84. package/dist/chunk-MOITMVXZ.js.map +1 -0
  85. package/dist/chunk-MYGRIOQM.js +163 -0
  86. package/dist/chunk-MYGRIOQM.js.map +1 -0
  87. package/dist/chunk-NBVTF6TV.js +163 -0
  88. package/dist/chunk-NBVTF6TV.js.map +1 -0
  89. package/dist/chunk-NMOMXXLD.js +163 -0
  90. package/dist/chunk-NMOMXXLD.js.map +1 -0
  91. package/dist/chunk-OHSKOJ2Y.js +136 -0
  92. package/dist/chunk-OHSKOJ2Y.js.map +1 -0
  93. package/dist/chunk-QF22MRN6.js +152 -0
  94. package/dist/chunk-QF22MRN6.js.map +1 -0
  95. package/dist/chunk-QHAU3JHA.js +152 -0
  96. package/dist/chunk-QHAU3JHA.js.map +1 -0
  97. package/dist/chunk-QQTXIKFT.js +163 -0
  98. package/dist/chunk-QQTXIKFT.js.map +1 -0
  99. package/dist/chunk-RQFJZYKH.js +160 -0
  100. package/dist/chunk-RQFJZYKH.js.map +1 -0
  101. package/dist/chunk-SRU4OFM3.js +135 -0
  102. package/dist/chunk-SRU4OFM3.js.map +1 -0
  103. package/dist/chunk-T5EBUYAB.js +160 -0
  104. package/dist/chunk-T5EBUYAB.js.map +1 -0
  105. package/dist/chunk-THTRJNHI.js +159 -0
  106. package/dist/chunk-THTRJNHI.js.map +1 -0
  107. package/dist/chunk-WQRH5YGD.js +129 -0
  108. package/dist/chunk-WQRH5YGD.js.map +1 -0
  109. package/dist/chunk-X2MARIQ5.js +140 -0
  110. package/dist/chunk-X2MARIQ5.js.map +1 -0
  111. package/dist/chunk-XTU7VQ2V.js +158 -0
  112. package/dist/chunk-XTU7VQ2V.js.map +1 -0
  113. package/dist/chunk-YBO2LITL.js +163 -0
  114. package/dist/chunk-YBO2LITL.js.map +1 -0
  115. package/dist/chunk-YOADPBEF.js +129 -0
  116. package/dist/chunk-YOADPBEF.js.map +1 -0
  117. package/dist/chunk-YRCJG2BQ.js +163 -0
  118. package/dist/chunk-YRCJG2BQ.js.map +1 -0
  119. package/dist/chunk-YXGSOU62.js +129 -0
  120. package/dist/chunk-YXGSOU62.js.map +1 -0
  121. package/dist/chunk-ZKLZRBDG.js +163 -0
  122. package/dist/chunk-ZKLZRBDG.js.map +1 -0
  123. package/dist/index.cjs +36 -11
  124. package/dist/index.cjs.map +1 -1
  125. package/dist/index.js +7 -7
  126. package/dist/molecules/index.cjs +36 -11
  127. package/dist/molecules/index.cjs.map +1 -1
  128. package/dist/molecules/index.js +7 -7
  129. package/dist/molecules/training-info-guideline.cjs +85 -24
  130. package/dist/molecules/training-info-guideline.cjs.map +1 -1
  131. package/dist/molecules/training-info-guideline.js +4 -1
  132. package/package.json +3 -3
  133. package/src/molecules/training-info-guideline.tsx +51 -10
@@ -0,0 +1,163 @@
1
+ import {
2
+ Separator
3
+ } from "./chunk-HYITAA4J.js";
4
+ import {
5
+ Spinner
6
+ } from "./chunk-FR2GDOU2.js";
7
+ import {
8
+ Dialog
9
+ } from "./chunk-AH4A53SZ.js";
10
+ import {
11
+ Box
12
+ } from "./chunk-4Y5BEXVN.js";
13
+ import {
14
+ Typo
15
+ } from "./chunk-PMJIFLDT.js";
16
+ import {
17
+ Flex
18
+ } from "./chunk-25HMMI7R.js";
19
+ import {
20
+ Button
21
+ } from "./chunk-ZVDAEY5Q.js";
22
+ import {
23
+ AspectRatio
24
+ } from "./chunk-EAXUQEO5.js";
25
+
26
+ // src/molecules/training-info-guideline.tsx
27
+ import { useState } from "react";
28
+ import { FileTextIcon, VideoIcon } from "@radix-ui/react-icons";
29
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
30
+ function TrainingInfoGuideline({
31
+ values,
32
+ onClickFileDownload
33
+ }) {
34
+ return /* @__PURE__ */ jsx(Fragment, { children: values.map((value) => /* @__PURE__ */ jsx(
35
+ TrainingInfoGuidelineItem,
36
+ {
37
+ onClickFileDownload,
38
+ value
39
+ },
40
+ getItemKey(value)
41
+ )) });
42
+ }
43
+ function getItemKey(value) {
44
+ return value.url;
45
+ }
46
+ function TrainingInfoGuidelineItem({
47
+ value,
48
+ onClickFileDownload
49
+ }) {
50
+ const [isLoading, setIsLoading] = useState(true);
51
+ if (value.type === "file") {
52
+ return /* @__PURE__ */ jsx(
53
+ TrainingInfoGuidelineButton,
54
+ {
55
+ description: value.filename,
56
+ icon: /* @__PURE__ */ jsx(FileTextIcon, {}),
57
+ onClick: () => {
58
+ onClickFileDownload({ url: value.url, filename: value.filename });
59
+ },
60
+ title: value.downloadButtonName
61
+ }
62
+ );
63
+ }
64
+ if (value.type === "video") {
65
+ return /* @__PURE__ */ jsxs(Dialog.Root, { children: [
66
+ /* @__PURE__ */ jsx(Dialog.Trigger, { children: /* @__PURE__ */ jsx(
67
+ TrainingInfoGuidelineButton,
68
+ {
69
+ description: "\uC601\uC0C1",
70
+ icon: /* @__PURE__ */ jsx(VideoIcon, {}),
71
+ title: value.videoTitle
72
+ }
73
+ ) }),
74
+ /* @__PURE__ */ jsx(
75
+ Dialog.Content,
76
+ {
77
+ height: "100%",
78
+ maxHeight: "500px",
79
+ maxWidth: "800px",
80
+ title: value.videoTitle,
81
+ width: "100%",
82
+ children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 16 / 9, style: { width: "100%" }, children: /* @__PURE__ */ jsxs(
83
+ Flex,
84
+ {
85
+ align: "center",
86
+ justify: "center",
87
+ style: {
88
+ width: "100%",
89
+ height: "100%",
90
+ backgroundColor: "black",
91
+ position: "relative"
92
+ },
93
+ children: [
94
+ isLoading ? /* @__PURE__ */ jsx(
95
+ Flex,
96
+ {
97
+ align: "center",
98
+ height: "100%",
99
+ justify: "center",
100
+ position: "absolute",
101
+ style: {
102
+ position: "absolute",
103
+ top: 0,
104
+ left: 0,
105
+ zIndex: 1,
106
+ color: "white"
107
+ },
108
+ width: "100%",
109
+ children: /* @__PURE__ */ jsx(Spinner, { size: "3", style: { width: 48, height: 48 } })
110
+ }
111
+ ) : null,
112
+ /* @__PURE__ */ jsx(
113
+ "iframe",
114
+ {
115
+ allowFullScreen: true,
116
+ onError: () => {
117
+ setIsLoading(false);
118
+ },
119
+ onLoad: () => {
120
+ setIsLoading(false);
121
+ },
122
+ src: `${value.url}?theme=light`,
123
+ style: { width: "100%", height: "100%", border: "none" },
124
+ title: "Curriculum Video"
125
+ }
126
+ )
127
+ ]
128
+ }
129
+ ) })
130
+ }
131
+ )
132
+ ] });
133
+ }
134
+ return null;
135
+ }
136
+ function TrainingInfoGuidelineButton({
137
+ icon,
138
+ title,
139
+ description,
140
+ onClick
141
+ }) {
142
+ return /* @__PURE__ */ jsx(
143
+ Button,
144
+ {
145
+ onClick,
146
+ style: { width: "100%", height: "48px" },
147
+ variant: "outline",
148
+ children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", width: "100%", children: [
149
+ icon,
150
+ /* @__PURE__ */ jsx(Separator, { orientation: "vertical", size: "2" }),
151
+ /* @__PURE__ */ jsxs(Box, { children: [
152
+ /* @__PURE__ */ jsx(Typo, { as: "div", mb: "1", children: title }),
153
+ typeof description === "string" && description !== "" ? /* @__PURE__ */ jsx(Typo, { style: { textAlign: "left" }, variant: "caption", children: description }) : null
154
+ ] })
155
+ ] })
156
+ }
157
+ );
158
+ }
159
+
160
+ export {
161
+ TrainingInfoGuideline
162
+ };
163
+ //# sourceMappingURL=chunk-MYGRIOQM.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/molecules/training-info-guideline.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { FileTextIcon, VideoIcon } from '@radix-ui/react-icons';\nimport { AspectRatio } from '@/atoms/aspect-ratio';\nimport { Button } from '@/atoms/button';\nimport type { TrainingInfoGuidelineContents } from '@/types/training-info-guideline-schema-generated';\nimport { Dialog } from '@/atoms/dialog';\nimport { Spinner } from '@/atoms/spinner';\nimport { Box } from '@/atoms/box';\nimport { Separator } from '@/atoms/separator';\nimport { Typo } from '@/atoms/typo';\nimport { Flex } from '../atoms/flex';\n\nexport interface TrainingInfoGuidelineProps {\n values: TrainingInfoGuidelineContents['values'];\n onClickFileDownload: (args: { url: string; filename: string }) => void;\n}\n\nexport function TrainingInfoGuideline({\n values,\n onClickFileDownload,\n}: TrainingInfoGuidelineProps): React.ReactElement {\n return (\n <>\n {values.map((value) => (\n <TrainingInfoGuidelineItem\n key={getItemKey(value)}\n onClickFileDownload={onClickFileDownload}\n value={value}\n />\n ))}\n </>\n );\n}\n\ntype TrainingInfoGuidelineValue =\n TrainingInfoGuidelineContents['values'][number];\n\nfunction getItemKey(value: TrainingInfoGuidelineValue): string {\n return value.url;\n}\n\ninterface TrainingInfoGuidelineItemProps {\n value: TrainingInfoGuidelineValue;\n onClickFileDownload: TrainingInfoGuidelineProps['onClickFileDownload'];\n}\n\nfunction TrainingInfoGuidelineItem({\n value,\n onClickFileDownload,\n}: TrainingInfoGuidelineItemProps): React.ReactElement | null {\n const [isLoading, setIsLoading] = useState(true);\n\n if (value.type === 'file') {\n return (\n <TrainingInfoGuidelineButton\n description={value.filename}\n icon={<FileTextIcon />}\n onClick={() => {\n onClickFileDownload({ url: value.url, filename: value.filename });\n }}\n title={value.downloadButtonName}\n />\n );\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- 차후 다른 타입 추가 시 사용\n if (value.type === 'video') {\n return (\n <Dialog.Root>\n <Dialog.Trigger>\n <TrainingInfoGuidelineButton\n description=\"영상\"\n icon={<VideoIcon />}\n title={value.videoTitle}\n />\n </Dialog.Trigger>\n <Dialog.Content\n height=\"100%\"\n maxHeight=\"500px\"\n maxWidth=\"800px\"\n title={value.videoTitle}\n width=\"100%\"\n >\n <AspectRatio ratio={16 / 9} style={{ width: '100%' }}>\n <Flex\n align=\"center\"\n justify=\"center\"\n style={{\n width: '100%',\n height: '100%',\n backgroundColor: 'black',\n position: 'relative',\n }}\n >\n {isLoading ? (\n <Flex\n align=\"center\"\n height=\"100%\"\n justify=\"center\"\n position=\"absolute\"\n style={{\n position: 'absolute',\n top: 0,\n left: 0,\n zIndex: 1,\n color: 'white',\n }}\n width=\"100%\"\n >\n <Spinner size=\"3\" style={{ width: 48, height: 48 }} />\n </Flex>\n ) : null}\n\n <iframe\n allowFullScreen\n onError={() => {\n setIsLoading(false);\n }} // 필요시 에러 메시지로 대체\n onLoad={() => {\n setIsLoading(false);\n }}\n src={`${value.url}?theme=light`}\n style={{ width: '100%', height: '100%', border: 'none' }}\n title=\"Curriculum Video\"\n />\n </Flex>\n </AspectRatio>\n </Dialog.Content>\n </Dialog.Root>\n );\n }\n return null;\n}\n\ninterface TrainingInfoGuidelineButtonProps {\n icon: React.ReactNode;\n title: string;\n description?: string;\n onClick?: () => void;\n}\n\nfunction TrainingInfoGuidelineButton({\n icon,\n title,\n description,\n onClick,\n}: TrainingInfoGuidelineButtonProps): React.ReactElement {\n return (\n <Button\n onClick={onClick}\n style={{ width: '100%', height: '48px' }}\n variant=\"outline\"\n >\n <Flex align=\"center\" gap=\"2\" width=\"100%\">\n {icon}\n <Separator orientation=\"vertical\" size=\"2\" />\n <Box>\n <Typo as=\"div\" mb=\"1\">\n {title}\n </Typo>\n {typeof description === 'string' && description !== '' ? (\n <Typo style={{ textAlign: 'left' }} variant=\"caption\">\n {description}\n </Typo>\n ) : null}\n </Box>\n </Flex>\n </Button>\n );\n}\n"],"mappings":"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","names":[]}
@@ -0,0 +1,163 @@
1
+ import {
2
+ Separator
3
+ } from "./chunk-HYITAA4J.js";
4
+ import {
5
+ Spinner
6
+ } from "./chunk-FR2GDOU2.js";
7
+ import {
8
+ Dialog
9
+ } from "./chunk-AH4A53SZ.js";
10
+ import {
11
+ Box
12
+ } from "./chunk-4Y5BEXVN.js";
13
+ import {
14
+ Typo
15
+ } from "./chunk-PMJIFLDT.js";
16
+ import {
17
+ Flex
18
+ } from "./chunk-25HMMI7R.js";
19
+ import {
20
+ Button
21
+ } from "./chunk-ZVDAEY5Q.js";
22
+ import {
23
+ AspectRatio
24
+ } from "./chunk-EAXUQEO5.js";
25
+
26
+ // src/molecules/training-info-guideline.tsx
27
+ import { useState } from "react";
28
+ import { FileTextIcon, VideoIcon } from "@radix-ui/react-icons";
29
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
30
+ function TrainingInfoGuideline({
31
+ values,
32
+ onClickFileDownload
33
+ }) {
34
+ return /* @__PURE__ */ jsx(Fragment, { children: values.map((value) => /* @__PURE__ */ jsx(
35
+ TrainingInfoGuidelineItem,
36
+ {
37
+ onClickFileDownload,
38
+ value
39
+ },
40
+ getItemKey(value)
41
+ )) });
42
+ }
43
+ function getItemKey(value) {
44
+ return value.url;
45
+ }
46
+ function TrainingInfoGuidelineItem({
47
+ value,
48
+ onClickFileDownload
49
+ }) {
50
+ const [isLoading, setIsLoading] = useState(true);
51
+ if (value.type === "file") {
52
+ return /* @__PURE__ */ jsx(
53
+ TrainingInfoGuidelineButton,
54
+ {
55
+ description: value.filename,
56
+ icon: /* @__PURE__ */ jsx(FileTextIcon, {}),
57
+ onClick: () => {
58
+ onClickFileDownload({ url: value.url, filename: value.filename });
59
+ },
60
+ title: value.downloadButtonName
61
+ }
62
+ );
63
+ }
64
+ if (value.type === "video") {
65
+ return /* @__PURE__ */ jsxs(Dialog.Root, { children: [
66
+ /* @__PURE__ */ jsx(Dialog.Trigger, { children: /* @__PURE__ */ jsx(
67
+ TrainingInfoGuidelineButton,
68
+ {
69
+ description: "\uC601\uC0C1",
70
+ icon: /* @__PURE__ */ jsx(VideoIcon, {}),
71
+ title: value.videoTitle
72
+ }
73
+ ) }),
74
+ /* @__PURE__ */ jsx(
75
+ Dialog.Content,
76
+ {
77
+ height: "100%",
78
+ maxHeight: "500px",
79
+ maxWidth: "800px",
80
+ title: value.videoTitle,
81
+ width: "100%",
82
+ children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 16 / 9, style: { width: "100%" }, children: /* @__PURE__ */ jsxs(
83
+ Flex,
84
+ {
85
+ align: "center",
86
+ justify: "center",
87
+ style: {
88
+ width: "100%",
89
+ height: "100%",
90
+ backgroundColor: "black",
91
+ position: "relative"
92
+ },
93
+ children: [
94
+ isLoading ? /* @__PURE__ */ jsx(
95
+ Flex,
96
+ {
97
+ align: "center",
98
+ height: "100%",
99
+ justify: "center",
100
+ position: "absolute",
101
+ style: {
102
+ position: "absolute",
103
+ top: 0,
104
+ left: 0,
105
+ zIndex: 1,
106
+ color: "white"
107
+ },
108
+ width: "100%",
109
+ children: /* @__PURE__ */ jsx(Spinner, { size: "3", style: { width: 48, height: 48 } })
110
+ }
111
+ ) : null,
112
+ /* @__PURE__ */ jsx(
113
+ "iframe",
114
+ {
115
+ allowFullScreen: true,
116
+ onError: () => {
117
+ setIsLoading(false);
118
+ },
119
+ onLoad: () => {
120
+ setIsLoading(false);
121
+ },
122
+ src: `${value.url}?theme=light`,
123
+ style: { width: "100%", height: "100%", border: "none" },
124
+ title: "Curriculum Video"
125
+ }
126
+ )
127
+ ]
128
+ }
129
+ ) })
130
+ }
131
+ )
132
+ ] });
133
+ }
134
+ return null;
135
+ }
136
+ function TrainingInfoGuidelineButton({
137
+ icon,
138
+ title,
139
+ description,
140
+ onClick
141
+ }) {
142
+ return /* @__PURE__ */ jsx(
143
+ Button,
144
+ {
145
+ onClick,
146
+ style: { width: "100%", height: "48px" },
147
+ variant: "outline",
148
+ children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", width: "100%", children: [
149
+ icon,
150
+ /* @__PURE__ */ jsx(Separator, { orientation: "vertical", size: "2" }),
151
+ /* @__PURE__ */ jsxs(Box, { children: [
152
+ /* @__PURE__ */ jsx(Typo, { as: "div", mb: "1", children: title }),
153
+ typeof description === "string" && description !== "" ? /* @__PURE__ */ jsx(Typo, { variant: "caption", children: description }) : null
154
+ ] })
155
+ ] })
156
+ }
157
+ );
158
+ }
159
+
160
+ export {
161
+ TrainingInfoGuideline
162
+ };
163
+ //# sourceMappingURL=chunk-NBVTF6TV.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/molecules/training-info-guideline.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { FileTextIcon, VideoIcon } from '@radix-ui/react-icons';\nimport { AspectRatio } from '@/atoms/aspect-ratio';\nimport { Button } from '@/atoms/button';\nimport type { TrainingInfoGuidelineContents } from '@/types/training-info-guideline-schema-generated';\nimport { Dialog } from '@/atoms/dialog';\nimport { Spinner } from '@/atoms/spinner';\nimport { Box } from '@/atoms/box';\nimport { Separator } from '@/atoms/separator';\nimport { Typo } from '@/atoms/typo';\nimport { Flex } from '../atoms/flex';\n\nexport interface TrainingInfoGuidelineProps {\n values: TrainingInfoGuidelineContents['values'];\n onClickFileDownload: (args: { url: string; filename: string }) => void;\n}\n\nexport function TrainingInfoGuideline({\n values,\n onClickFileDownload,\n}: TrainingInfoGuidelineProps): React.ReactElement {\n return (\n <>\n {values.map((value) => (\n <TrainingInfoGuidelineItem\n key={getItemKey(value)}\n onClickFileDownload={onClickFileDownload}\n value={value}\n />\n ))}\n </>\n );\n}\n\ntype TrainingInfoGuidelineValue =\n TrainingInfoGuidelineContents['values'][number];\n\nfunction getItemKey(value: TrainingInfoGuidelineValue): string {\n return value.url;\n}\n\ninterface TrainingInfoGuidelineItemProps {\n value: TrainingInfoGuidelineValue;\n onClickFileDownload: TrainingInfoGuidelineProps['onClickFileDownload'];\n}\n\nfunction TrainingInfoGuidelineItem({\n value,\n onClickFileDownload,\n}: TrainingInfoGuidelineItemProps): React.ReactElement | null {\n const [isLoading, setIsLoading] = useState(true);\n\n if (value.type === 'file') {\n return (\n <TrainingInfoGuidelineButton\n description={value.filename}\n icon={<FileTextIcon />}\n onClick={() => {\n onClickFileDownload({ url: value.url, filename: value.filename });\n }}\n title={value.downloadButtonName}\n />\n );\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- 차후 다른 타입 추가 시 사용\n if (value.type === 'video') {\n return (\n <Dialog.Root>\n <Dialog.Trigger>\n <TrainingInfoGuidelineButton\n description=\"영상\"\n icon={<VideoIcon />}\n title={value.videoTitle}\n />\n </Dialog.Trigger>\n <Dialog.Content\n height=\"100%\"\n maxHeight=\"500px\"\n maxWidth=\"800px\"\n title={value.videoTitle}\n width=\"100%\"\n >\n <AspectRatio ratio={16 / 9} style={{ width: '100%' }}>\n <Flex\n align=\"center\"\n justify=\"center\"\n style={{\n width: '100%',\n height: '100%',\n backgroundColor: 'black',\n position: 'relative',\n }}\n >\n {isLoading ? (\n <Flex\n align=\"center\"\n height=\"100%\"\n justify=\"center\"\n position=\"absolute\"\n style={{\n position: 'absolute',\n top: 0,\n left: 0,\n zIndex: 1,\n color: 'white',\n }}\n width=\"100%\"\n >\n <Spinner size=\"3\" style={{ width: 48, height: 48 }} />\n </Flex>\n ) : null}\n\n <iframe\n allowFullScreen\n onError={() => {\n setIsLoading(false);\n }} // 필요시 에러 메시지로 대체\n onLoad={() => {\n setIsLoading(false);\n }}\n src={`${value.url}?theme=light`}\n style={{ width: '100%', height: '100%', border: 'none' }}\n title=\"Curriculum Video\"\n />\n </Flex>\n </AspectRatio>\n </Dialog.Content>\n </Dialog.Root>\n );\n }\n return null;\n}\n\ninterface TrainingInfoGuidelineButtonProps {\n icon: React.ReactNode;\n title: string;\n description?: string;\n onClick?: () => void;\n}\n\nfunction TrainingInfoGuidelineButton({\n icon,\n title,\n description,\n onClick,\n}: TrainingInfoGuidelineButtonProps): React.ReactElement {\n return (\n <Button\n onClick={onClick}\n style={{ width: '100%', height: '48px' }}\n variant=\"outline\"\n >\n <Flex align=\"center\" gap=\"2\" width=\"100%\">\n {icon}\n <Separator orientation=\"vertical\" size=\"2\" />\n <Box>\n <Typo as=\"div\" mb=\"1\">{title}</Typo>\n {typeof description === 'string' && description !== '' ? (\n <Typo variant=\"caption\">{description}</Typo>\n ) : null}\n </Box>\n </Flex>\n </Button>\n );\n}\n"],"mappings":"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","names":[]}
@@ -0,0 +1,163 @@
1
+ import {
2
+ Separator
3
+ } from "./chunk-HYITAA4J.js";
4
+ import {
5
+ Spinner
6
+ } from "./chunk-FR2GDOU2.js";
7
+ import {
8
+ Dialog
9
+ } from "./chunk-AH4A53SZ.js";
10
+ import {
11
+ Box
12
+ } from "./chunk-4Y5BEXVN.js";
13
+ import {
14
+ Typo
15
+ } from "./chunk-PMJIFLDT.js";
16
+ import {
17
+ Flex
18
+ } from "./chunk-25HMMI7R.js";
19
+ import {
20
+ Button
21
+ } from "./chunk-ZVDAEY5Q.js";
22
+ import {
23
+ AspectRatio
24
+ } from "./chunk-EAXUQEO5.js";
25
+
26
+ // src/molecules/training-info-guideline.tsx
27
+ import { useState } from "react";
28
+ import { FileTextIcon, VideoIcon } from "@radix-ui/react-icons";
29
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
30
+ function TrainingInfoGuideline({
31
+ values,
32
+ onClickFileDownload
33
+ }) {
34
+ return /* @__PURE__ */ jsx(Fragment, { children: values.map((value) => /* @__PURE__ */ jsx(
35
+ TrainingInfoGuidelineItem,
36
+ {
37
+ onClickFileDownload,
38
+ value
39
+ },
40
+ getItemKey(value)
41
+ )) });
42
+ }
43
+ function getItemKey(value) {
44
+ return value.url;
45
+ }
46
+ function TrainingInfoGuidelineItem({
47
+ value,
48
+ onClickFileDownload
49
+ }) {
50
+ const [isLoading, setIsLoading] = useState(true);
51
+ if (value.type === "file") {
52
+ return /* @__PURE__ */ jsx(
53
+ TrainingInfoGuidelineButton,
54
+ {
55
+ description: value.filename,
56
+ icon: /* @__PURE__ */ jsx(FileTextIcon, {}),
57
+ onClick: () => {
58
+ onClickFileDownload({ url: value.url, filename: value.filename });
59
+ },
60
+ title: value.downloadButtonName
61
+ }
62
+ );
63
+ }
64
+ if (value.type === "video") {
65
+ return /* @__PURE__ */ jsxs(Dialog.Root, { children: [
66
+ /* @__PURE__ */ jsx(Dialog.Trigger, { children: /* @__PURE__ */ jsx(
67
+ TrainingInfoGuidelineButton,
68
+ {
69
+ description: "\uC601\uC0C1",
70
+ icon: /* @__PURE__ */ jsx(VideoIcon, {}),
71
+ title: value.videoTitle
72
+ }
73
+ ) }),
74
+ /* @__PURE__ */ jsx(
75
+ Dialog.Content,
76
+ {
77
+ height: "100%",
78
+ maxHeight: "500px",
79
+ maxWidth: "800px",
80
+ title: value.videoTitle,
81
+ width: "100%",
82
+ children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 16 / 9, style: { width: "100%" }, children: /* @__PURE__ */ jsxs(
83
+ Flex,
84
+ {
85
+ align: "center",
86
+ justify: "center",
87
+ style: {
88
+ width: "100%",
89
+ height: "100%",
90
+ backgroundColor: "black",
91
+ position: "relative"
92
+ },
93
+ children: [
94
+ isLoading ? /* @__PURE__ */ jsx(
95
+ Flex,
96
+ {
97
+ align: "center",
98
+ height: "100%",
99
+ justify: "center",
100
+ position: "absolute",
101
+ style: {
102
+ position: "absolute",
103
+ top: 0,
104
+ left: 0,
105
+ zIndex: 1,
106
+ color: "white"
107
+ },
108
+ width: "100%",
109
+ children: /* @__PURE__ */ jsx(Spinner, { size: "3", style: { width: 48, height: 48 } })
110
+ }
111
+ ) : null,
112
+ /* @__PURE__ */ jsx(
113
+ "iframe",
114
+ {
115
+ allowFullScreen: true,
116
+ onError: () => {
117
+ setIsLoading(false);
118
+ },
119
+ onLoad: () => {
120
+ setIsLoading(false);
121
+ },
122
+ src: `${value.url}?theme=light`,
123
+ style: { width: "100%", height: "100%", border: "none" },
124
+ title: "Curriculum Video"
125
+ }
126
+ )
127
+ ]
128
+ }
129
+ ) })
130
+ }
131
+ )
132
+ ] });
133
+ }
134
+ return null;
135
+ }
136
+ function TrainingInfoGuidelineButton({
137
+ icon,
138
+ title,
139
+ description,
140
+ onClick
141
+ }) {
142
+ return /* @__PURE__ */ jsx(
143
+ Button,
144
+ {
145
+ onClick,
146
+ style: { width: "100%", height: "48px", textAlign },
147
+ variant: "outline",
148
+ children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", width: "100%", children: [
149
+ icon,
150
+ /* @__PURE__ */ jsx(Separator, { orientation: "vertical", size: "2" }),
151
+ /* @__PURE__ */ jsxs(Box, { children: [
152
+ /* @__PURE__ */ jsx(Typo, { as: "div", mb: "1", children: title }),
153
+ typeof description === "string" && description !== "" ? /* @__PURE__ */ jsx(Typo, { variant: "caption", children: description }) : null
154
+ ] })
155
+ ] })
156
+ }
157
+ );
158
+ }
159
+
160
+ export {
161
+ TrainingInfoGuideline
162
+ };
163
+ //# sourceMappingURL=chunk-NMOMXXLD.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/molecules/training-info-guideline.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { FileTextIcon, VideoIcon } from '@radix-ui/react-icons';\nimport { AspectRatio } from '@/atoms/aspect-ratio';\nimport { Button } from '@/atoms/button';\nimport type { TrainingInfoGuidelineContents } from '@/types/training-info-guideline-schema-generated';\nimport { Dialog } from '@/atoms/dialog';\nimport { Spinner } from '@/atoms/spinner';\nimport { Box } from '@/atoms/box';\nimport { Separator } from '@/atoms/separator';\nimport { Typo } from '@/atoms/typo';\nimport { Flex } from '../atoms/flex';\n\nexport interface TrainingInfoGuidelineProps {\n values: TrainingInfoGuidelineContents['values'];\n onClickFileDownload: (args: { url: string; filename: string }) => void;\n}\n\nexport function TrainingInfoGuideline({\n values,\n onClickFileDownload,\n}: TrainingInfoGuidelineProps): React.ReactElement {\n return (\n <>\n {values.map((value) => (\n <TrainingInfoGuidelineItem\n key={getItemKey(value)}\n onClickFileDownload={onClickFileDownload}\n value={value}\n />\n ))}\n </>\n );\n}\n\ntype TrainingInfoGuidelineValue =\n TrainingInfoGuidelineContents['values'][number];\n\nfunction getItemKey(value: TrainingInfoGuidelineValue): string {\n return value.url;\n}\n\ninterface TrainingInfoGuidelineItemProps {\n value: TrainingInfoGuidelineValue;\n onClickFileDownload: TrainingInfoGuidelineProps['onClickFileDownload'];\n}\n\nfunction TrainingInfoGuidelineItem({\n value,\n onClickFileDownload,\n}: TrainingInfoGuidelineItemProps): React.ReactElement | null {\n const [isLoading, setIsLoading] = useState(true);\n\n if (value.type === 'file') {\n return (\n <TrainingInfoGuidelineButton\n description={value.filename}\n icon={<FileTextIcon />}\n onClick={() => {\n onClickFileDownload({ url: value.url, filename: value.filename });\n }}\n title={value.downloadButtonName}\n />\n );\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- 차후 다른 타입 추가 시 사용\n if (value.type === 'video') {\n return (\n <Dialog.Root>\n <Dialog.Trigger>\n <TrainingInfoGuidelineButton\n description=\"영상\"\n icon={<VideoIcon />}\n title={value.videoTitle}\n />\n </Dialog.Trigger>\n <Dialog.Content\n height=\"100%\"\n maxHeight=\"500px\"\n maxWidth=\"800px\"\n title={value.videoTitle}\n width=\"100%\"\n >\n <AspectRatio ratio={16 / 9} style={{ width: '100%' }}>\n <Flex\n align=\"center\"\n justify=\"center\"\n style={{\n width: '100%',\n height: '100%',\n backgroundColor: 'black',\n position: 'relative',\n }}\n >\n {isLoading ? (\n <Flex\n align=\"center\"\n height=\"100%\"\n justify=\"center\"\n position=\"absolute\"\n style={{\n position: 'absolute',\n top: 0,\n left: 0,\n zIndex: 1,\n color: 'white',\n }}\n width=\"100%\"\n >\n <Spinner size=\"3\" style={{ width: 48, height: 48 }} />\n </Flex>\n ) : null}\n\n <iframe\n allowFullScreen\n onError={() => {\n setIsLoading(false);\n }} // 필요시 에러 메시지로 대체\n onLoad={() => {\n setIsLoading(false);\n }}\n src={`${value.url}?theme=light`}\n style={{ width: '100%', height: '100%', border: 'none' }}\n title=\"Curriculum Video\"\n />\n </Flex>\n </AspectRatio>\n </Dialog.Content>\n </Dialog.Root>\n );\n }\n return null;\n}\n\ninterface TrainingInfoGuidelineButtonProps {\n icon: React.ReactNode;\n title: string;\n description?: string;\n onClick?: () => void;\n}\n\nfunction TrainingInfoGuidelineButton({\n icon,\n title,\n description,\n onClick,\n}: TrainingInfoGuidelineButtonProps): React.ReactElement {\n return (\n <Button\n onClick={onClick}\n style={{ width: '100%', height: '48px' , textAlign}}\n variant=\"outline\"\n >\n <Flex align=\"center\" gap=\"2\" width=\"100%\">\n {icon}\n <Separator orientation=\"vertical\" size=\"2\" />\n <Box>\n <Typo as=\"div\" mb=\"1\">\n {title}\n </Typo>\n {typeof description === 'string' && description !== '' ? (\n <Typo variant=\"caption\" >\n {description}\n </Typo>\n ) : null}\n </Box>\n </Flex>\n </Button>\n );\n}\n"],"mappings":"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","names":[]}
@@ -0,0 +1,136 @@
1
+ import {
2
+ Spinner
3
+ } from "./chunk-FR2GDOU2.js";
4
+ import {
5
+ Dialog
6
+ } from "./chunk-AH4A53SZ.js";
7
+ import {
8
+ Typo
9
+ } from "./chunk-PMJIFLDT.js";
10
+ import {
11
+ Flex
12
+ } from "./chunk-25HMMI7R.js";
13
+ import {
14
+ Button
15
+ } from "./chunk-ZVDAEY5Q.js";
16
+ import {
17
+ AspectRatio
18
+ } from "./chunk-EAXUQEO5.js";
19
+
20
+ // src/molecules/training-info-guideline.tsx
21
+ import { useState } from "react";
22
+ import { FileTextIcon, VideoIcon } from "@radix-ui/react-icons";
23
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
24
+ function TrainingInfoGuideline({
25
+ values,
26
+ onClickFileDownload
27
+ }) {
28
+ return /* @__PURE__ */ jsx(Fragment, { children: values.map((value) => /* @__PURE__ */ jsx(
29
+ TrainingInfoGuidelineItem,
30
+ {
31
+ onClickFileDownload,
32
+ value
33
+ },
34
+ getItemKey(value)
35
+ )) });
36
+ }
37
+ function getItemKey(value) {
38
+ return value.url;
39
+ }
40
+ function TrainingInfoGuidelineItem({
41
+ value,
42
+ onClickFileDownload
43
+ }) {
44
+ const [isLoading, setIsLoading] = useState(true);
45
+ if (value.type === "file") {
46
+ return /* @__PURE__ */ jsx(
47
+ Button,
48
+ {
49
+ onClick: () => {
50
+ onClickFileDownload({ url: value.url, filename: value.filename });
51
+ },
52
+ style: { height: "48px" },
53
+ variant: "outline",
54
+ children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", width: "100%", children: [
55
+ /* @__PURE__ */ jsx(FileTextIcon, {}),
56
+ /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", children: [
57
+ /* @__PURE__ */ jsx(Typo, { children: value.downloadButtonName }),
58
+ /* @__PURE__ */ jsx(Typo, { variant: "caption", children: value.filename })
59
+ ] })
60
+ ] })
61
+ }
62
+ );
63
+ }
64
+ if (value.type === "video") {
65
+ return /* @__PURE__ */ jsxs(Dialog.Root, { children: [
66
+ /* @__PURE__ */ jsx(Dialog.Trigger, { children: /* @__PURE__ */ jsxs(Button, { variant: "surface", children: [
67
+ /* @__PURE__ */ jsx(VideoIcon, {}),
68
+ value.videoTitle
69
+ ] }) }),
70
+ /* @__PURE__ */ jsx(
71
+ Dialog.Content,
72
+ {
73
+ height: "100%",
74
+ maxHeight: "500px",
75
+ maxWidth: "800px",
76
+ title: value.videoTitle,
77
+ width: "100%",
78
+ children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 16 / 9, style: { width: "100%" }, children: /* @__PURE__ */ jsxs(
79
+ Flex,
80
+ {
81
+ align: "center",
82
+ justify: "center",
83
+ style: {
84
+ width: "100%",
85
+ height: "100%",
86
+ backgroundColor: "black",
87
+ position: "relative"
88
+ },
89
+ children: [
90
+ isLoading ? /* @__PURE__ */ jsx(
91
+ Flex,
92
+ {
93
+ align: "center",
94
+ height: "100%",
95
+ justify: "center",
96
+ position: "absolute",
97
+ style: {
98
+ position: "absolute",
99
+ top: 0,
100
+ left: 0,
101
+ zIndex: 1,
102
+ color: "white"
103
+ },
104
+ width: "100%",
105
+ children: /* @__PURE__ */ jsx(Spinner, { size: "3", style: { width: 48, height: 48 } })
106
+ }
107
+ ) : null,
108
+ /* @__PURE__ */ jsx(
109
+ "iframe",
110
+ {
111
+ allowFullScreen: true,
112
+ onError: () => {
113
+ setIsLoading(false);
114
+ },
115
+ onLoad: () => {
116
+ setIsLoading(false);
117
+ },
118
+ src: `${value.url}?theme=light`,
119
+ style: { width: "100%", height: "100%", border: "none" },
120
+ title: "Curriculum Video"
121
+ }
122
+ )
123
+ ]
124
+ }
125
+ ) })
126
+ }
127
+ )
128
+ ] });
129
+ }
130
+ return null;
131
+ }
132
+
133
+ export {
134
+ TrainingInfoGuideline
135
+ };
136
+ //# sourceMappingURL=chunk-OHSKOJ2Y.js.map