@tipp/ui 1.6.21 → 1.6.22
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/dist/app/index.cjs +8 -15
- package/dist/app/index.cjs.map +1 -1
- package/dist/app/index.js +1 -1
- package/dist/app/platform/contents-card.cjs +592 -27
- package/dist/app/platform/contents-card.cjs.map +1 -1
- package/dist/app/platform/contents-card.js +52 -1
- package/dist/atoms/button.d.cts +1 -1
- package/dist/atoms/button.d.ts +1 -1
- package/dist/chunk-3K3WU7XM.js +145 -0
- package/dist/chunk-3K3WU7XM.js.map +1 -0
- package/dist/chunk-44STOGYA.js +164 -0
- package/dist/chunk-44STOGYA.js.map +1 -0
- package/dist/chunk-53ZJS5JI.js +111 -0
- package/dist/chunk-53ZJS5JI.js.map +1 -0
- package/dist/chunk-6LV4UGX5.js +165 -0
- package/dist/chunk-6LV4UGX5.js.map +1 -0
- package/dist/chunk-6RT2RUZ2.js +145 -0
- package/dist/chunk-6RT2RUZ2.js.map +1 -0
- package/dist/chunk-7CANQHBM.js +117 -0
- package/dist/chunk-7CANQHBM.js.map +1 -0
- package/dist/chunk-7WJGYLRQ.js +99 -0
- package/dist/chunk-7WJGYLRQ.js.map +1 -0
- package/dist/chunk-ABZVJJ4O.js +74 -0
- package/dist/chunk-ABZVJJ4O.js.map +1 -0
- package/dist/chunk-BBEZXZQH.js +284 -0
- package/dist/chunk-BBEZXZQH.js.map +1 -0
- package/dist/chunk-CUVAI5MJ.js +117 -0
- package/dist/chunk-CUVAI5MJ.js.map +1 -0
- package/dist/chunk-FBOJKLC6.js +64 -0
- package/dist/chunk-FBOJKLC6.js.map +1 -0
- package/dist/chunk-HXJYOUBE.js +30 -0
- package/dist/chunk-HXJYOUBE.js.map +1 -0
- package/dist/chunk-KCGIEABE.js +117 -0
- package/dist/chunk-KCGIEABE.js.map +1 -0
- package/dist/chunk-L5XYBDEW.js +116 -0
- package/dist/chunk-L5XYBDEW.js.map +1 -0
- package/dist/chunk-MWBEL3OY.js +111 -0
- package/dist/chunk-MWBEL3OY.js.map +1 -0
- package/dist/chunk-O5H5SQHB.js +110 -0
- package/dist/chunk-O5H5SQHB.js.map +1 -0
- package/dist/chunk-QGXLI3QC.js +111 -0
- package/dist/chunk-QGXLI3QC.js.map +1 -0
- package/dist/chunk-RPTU2HZS.js +111 -0
- package/dist/chunk-RPTU2HZS.js.map +1 -0
- package/dist/chunk-RVLCXUJU.js +113 -0
- package/dist/chunk-RVLCXUJU.js.map +1 -0
- package/dist/chunk-VKGTIYVH.js +63 -0
- package/dist/chunk-VKGTIYVH.js.map +1 -0
- package/dist/chunk-VR25ARRS.js +60 -0
- package/dist/chunk-VR25ARRS.js.map +1 -0
- package/dist/chunk-WEU6WLM4.js +39 -0
- package/dist/chunk-WEU6WLM4.js.map +1 -0
- package/dist/chunk-YC6CJEKF.js +102 -0
- package/dist/chunk-YC6CJEKF.js.map +1 -0
- package/dist/chunk-YMKOJKGY.js +145 -0
- package/dist/chunk-YMKOJKGY.js.map +1 -0
- package/dist/chunk-YTBR7GSV.js +111 -0
- package/dist/chunk-YTBR7GSV.js.map +1 -0
- package/dist/index.cjs +8 -15
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/app/platform/contents-card.tsx +22 -26
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Skeleton
|
|
3
|
+
} from "./chunk-5H3YPCZK.js";
|
|
4
|
+
import {
|
|
5
|
+
DropdownMenu
|
|
6
|
+
} from "./chunk-4WFMOFN2.js";
|
|
7
|
+
import {
|
|
8
|
+
Grid
|
|
9
|
+
} from "./chunk-EGEQY3KT.js";
|
|
10
|
+
import {
|
|
11
|
+
Heading
|
|
12
|
+
} from "./chunk-HJB3AASV.js";
|
|
13
|
+
import {
|
|
14
|
+
Box
|
|
15
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
16
|
+
import {
|
|
17
|
+
Typo
|
|
18
|
+
} from "./chunk-52MVZ6AN.js";
|
|
19
|
+
import {
|
|
20
|
+
Flex
|
|
21
|
+
} from "./chunk-25HMMI7R.js";
|
|
22
|
+
import {
|
|
23
|
+
Button
|
|
24
|
+
} from "./chunk-Q5AFRGVP.js";
|
|
25
|
+
import {
|
|
26
|
+
DotsVerticalIcon
|
|
27
|
+
} from "./chunk-HLFG5ZTU.js";
|
|
28
|
+
|
|
29
|
+
// src/app/platform/contents-card.tsx
|
|
30
|
+
import { forwardRef } from "react";
|
|
31
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
32
|
+
var ContentsCard = forwardRef(
|
|
33
|
+
({
|
|
34
|
+
title,
|
|
35
|
+
description,
|
|
36
|
+
imageSrc,
|
|
37
|
+
footer,
|
|
38
|
+
dropdownItems,
|
|
39
|
+
onClickCard,
|
|
40
|
+
isLoading = false
|
|
41
|
+
}, ref) => {
|
|
42
|
+
return /* @__PURE__ */ jsxs(
|
|
43
|
+
Flex,
|
|
44
|
+
{
|
|
45
|
+
className: "hover-shadow",
|
|
46
|
+
direction: "column",
|
|
47
|
+
height: "100%",
|
|
48
|
+
m: "0",
|
|
49
|
+
onClick: onClickCard,
|
|
50
|
+
ref,
|
|
51
|
+
style: {
|
|
52
|
+
backgroundColor: "var(--color-panel)",
|
|
53
|
+
borderRadius: "var(--radius-5)",
|
|
54
|
+
overflow: "hidden",
|
|
55
|
+
cursor: "pointer"
|
|
56
|
+
},
|
|
57
|
+
width: "100%",
|
|
58
|
+
children: [
|
|
59
|
+
/* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(
|
|
60
|
+
Box,
|
|
61
|
+
{
|
|
62
|
+
height: "210px",
|
|
63
|
+
style: {
|
|
64
|
+
borderTopLeftRadius: "var(--radius-4)",
|
|
65
|
+
borderTopRightRadius: "var(--radius-4)",
|
|
66
|
+
backgroundImage: `url(${imageSrc})`,
|
|
67
|
+
backgroundSize: "cover",
|
|
68
|
+
backgroundPosition: "center"
|
|
69
|
+
},
|
|
70
|
+
width: "100%"
|
|
71
|
+
}
|
|
72
|
+
) }),
|
|
73
|
+
/* @__PURE__ */ jsxs(Box, { p: "5", children: [
|
|
74
|
+
/* @__PURE__ */ jsxs(Box, { children: [
|
|
75
|
+
/* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(Heading, { mb: "3", variant: "heading5", children: title }) }),
|
|
76
|
+
/* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(Typo, { as: "p", variant: "caption", children: description }) })
|
|
77
|
+
] }),
|
|
78
|
+
/* @__PURE__ */ jsxs(
|
|
79
|
+
Grid,
|
|
80
|
+
{
|
|
81
|
+
align: "center",
|
|
82
|
+
columns: "1fr auto",
|
|
83
|
+
justify: "between",
|
|
84
|
+
pt: "2",
|
|
85
|
+
style: { marginTop: "auto" },
|
|
86
|
+
width: "100%",
|
|
87
|
+
children: [
|
|
88
|
+
/* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(Flex, { gap: "3", overflow: "hidden", children: footer }) }),
|
|
89
|
+
Boolean(dropdownItems == null ? void 0 : dropdownItems.length) && /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
|
|
90
|
+
/* @__PURE__ */ jsx(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsx(Button, { size: "large", variant: "transparent", children: /* @__PURE__ */ jsx(DotsVerticalIcon, { color: "gray", height: "20px", width: "20px" }) }) }),
|
|
91
|
+
/* @__PURE__ */ jsx(DropdownMenu.Content, { children: dropdownItems == null ? void 0 : dropdownItems.map((item) => /* @__PURE__ */ jsx(
|
|
92
|
+
DropdownMenu.Item,
|
|
93
|
+
{
|
|
94
|
+
onClick: (e) => {
|
|
95
|
+
e.stopPropagation();
|
|
96
|
+
item.onClick();
|
|
97
|
+
},
|
|
98
|
+
children: item.label
|
|
99
|
+
},
|
|
100
|
+
item.label
|
|
101
|
+
)) })
|
|
102
|
+
] })
|
|
103
|
+
]
|
|
104
|
+
}
|
|
105
|
+
)
|
|
106
|
+
] })
|
|
107
|
+
]
|
|
108
|
+
}
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
);
|
|
112
|
+
ContentsCard.displayName = "ContentsCard";
|
|
113
|
+
|
|
114
|
+
export {
|
|
115
|
+
ContentsCard
|
|
116
|
+
};
|
|
117
|
+
//# sourceMappingURL=chunk-CUVAI5MJ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/app/platform/contents-card.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Heading } from '@/atoms/heading';\nimport { Button } from '@/atoms/button';\nimport { DropdownMenu } from '@/atoms/dropdown-menu';\nimport { Box } from '@/atoms/box';\nimport { Flex } from '@/atoms/flex';\nimport { Grid } from '@/atoms/grid';\nimport { Skeleton } from '@/atoms/skeleton';\nimport { Typo } from '@/atoms/typo';\nimport { DotsVerticalIcon } from '@/icon';\n\nexport interface ContentsCardProps {\n title?: React.ReactNode;\n description?: string;\n id?: string;\n imageSrc?: string | null;\n imageAlt?: string;\n footer?: React.ReactNode;\n dropdownItems?: {\n label: string;\n onClick: () => void;\n }[];\n onClickCard?: () => void;\n isLoading?: boolean;\n}\n\nexport const ContentsCard = forwardRef<HTMLDivElement, ContentsCardProps>(\n (\n {\n title,\n description,\n imageSrc,\n footer,\n dropdownItems,\n onClickCard,\n isLoading = false,\n },\n ref\n ): React.ReactElement => {\n return (\n <Flex\n className=\"hover-shadow\"\n direction=\"column\"\n height=\"100%\"\n m=\"0\"\n onClick={onClickCard}\n ref={ref}\n style={{\n backgroundColor: 'var(--color-panel)',\n borderRadius: 'var(--radius-5)',\n overflow: 'hidden',\n cursor: 'pointer',\n }}\n width=\"100%\"\n >\n {/* 섬네일 */}\n <Skeleton loading={isLoading}>\n <Box\n height=\"210px\"\n style={{\n borderTopLeftRadius: 'var(--radius-4)',\n borderTopRightRadius: 'var(--radius-4)',\n backgroundImage: `url(${imageSrc})`,\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n }}\n width=\"100%\"\n />\n </Skeleton>\n {/* 제목, 설명 */}\n <Box p=\"5\">\n <Box>\n <Skeleton loading={isLoading}>\n <Heading mb=\"3\" variant=\"heading5\">\n {title}\n </Heading>\n </Skeleton>\n <Skeleton loading={isLoading}>\n <Typo as=\"p\" variant=\"caption\">\n {description}\n </Typo>\n </Skeleton>\n </Box>\n <Grid\n align=\"center\"\n columns=\"1fr auto\"\n justify=\"between\"\n pt=\"2\"\n style={{ marginTop: 'auto' }}\n width=\"100%\"\n >\n <Skeleton loading={isLoading}>\n <Flex gap=\"3\" overflow=\"hidden\">\n {footer}\n </Flex>\n </Skeleton>\n {Boolean(dropdownItems?.length) && (\n <DropdownMenu.Root>\n <DropdownMenu.Trigger>\n <Button size=\"large\" variant=\"transparent\">\n <DotsVerticalIcon color=\"gray\" height=\"20px\" width=\"20px\" />\n </Button>\n </DropdownMenu.Trigger>\n <DropdownMenu.Content>\n {dropdownItems?.map((item) => (\n <DropdownMenu.Item\n key={item.label}\n onClick={(e) => {\n e.stopPropagation();\n item.onClick();\n }}\n >\n {item.label}\n </DropdownMenu.Item>\n ))}\n </DropdownMenu.Content>\n </DropdownMenu.Root>\n )}\n </Grid>\n </Box>\n </Flex>\n );\n }\n);\nContentsCard.displayName = 'ContentsCard';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,kBAAkB;AAyDxB,cAcA,YAdA;AA/BH,IAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,GACA,QACuB;AACvB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,WAAU;AAAA,QACV,QAAO;AAAA,QACP,GAAE;AAAA,QACF,SAAS;AAAA,QACT;AAAA,QACA,OAAO;AAAA,UACL,iBAAiB;AAAA,UACjB,cAAc;AAAA,UACd,UAAU;AAAA,UACV,QAAQ;AAAA,QACV;AAAA,QACA,OAAM;AAAA,QAGN;AAAA,8BAAC,YAAS,SAAS,WACjB;AAAA,YAAC;AAAA;AAAA,cACC,QAAO;AAAA,cACP,OAAO;AAAA,gBACL,qBAAqB;AAAA,gBACrB,sBAAsB;AAAA,gBACtB,iBAAiB,OAAO,QAAQ;AAAA,gBAChC,gBAAgB;AAAA,gBAChB,oBAAoB;AAAA,cACtB;AAAA,cACA,OAAM;AAAA;AAAA,UACR,GACF;AAAA,UAEA,qBAAC,OAAI,GAAE,KACL;AAAA,iCAAC,OACC;AAAA,kCAAC,YAAS,SAAS,WACjB,8BAAC,WAAQ,IAAG,KAAI,SAAQ,YACrB,iBACH,GACF;AAAA,cACA,oBAAC,YAAS,SAAS,WACjB,8BAAC,QAAK,IAAG,KAAI,SAAQ,WAClB,uBACH,GACF;AAAA,eACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,SAAQ;AAAA,gBACR,IAAG;AAAA,gBACH,OAAO,EAAE,WAAW,OAAO;AAAA,gBAC3B,OAAM;AAAA,gBAEN;AAAA,sCAAC,YAAS,SAAS,WACjB,8BAAC,QAAK,KAAI,KAAI,UAAS,UACpB,kBACH,GACF;AAAA,kBACC,QAAQ,+CAAe,MAAM,KAC5B,qBAAC,aAAa,MAAb,EACC;AAAA,wCAAC,aAAa,SAAb,EACC,8BAAC,UAAO,MAAK,SAAQ,SAAQ,eAC3B,8BAAC,oBAAiB,OAAM,QAAO,QAAO,QAAO,OAAM,QAAO,GAC5D,GACF;AAAA,oBACA,oBAAC,aAAa,SAAb,EACE,yDAAe,IAAI,CAAC,SACnB;AAAA,sBAAC,aAAa;AAAA,sBAAb;AAAA,wBAEC,SAAS,CAAC,MAAM;AACd,4BAAE,gBAAgB;AAClB,+BAAK,QAAQ;AAAA,wBACf;AAAA,wBAEC,eAAK;AAAA;AAAA,sBAND,KAAK;AAAA,oBAOZ,IAEJ;AAAA,qBACF;AAAA;AAAA;AAAA,YAEJ;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;","names":[]}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import {
|
|
2
|
+
infoList,
|
|
3
|
+
renderDataListItem,
|
|
4
|
+
sessionList
|
|
5
|
+
} from "./chunk-QUHTO7MY.js";
|
|
6
|
+
import {
|
|
7
|
+
DataList
|
|
8
|
+
} from "./chunk-VTJZMOSP.js";
|
|
9
|
+
import {
|
|
10
|
+
Heading
|
|
11
|
+
} from "./chunk-HJB3AASV.js";
|
|
12
|
+
import {
|
|
13
|
+
Separator
|
|
14
|
+
} from "./chunk-HYITAA4J.js";
|
|
15
|
+
import {
|
|
16
|
+
Box
|
|
17
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
18
|
+
import {
|
|
19
|
+
Flex
|
|
20
|
+
} from "./chunk-25HMMI7R.js";
|
|
21
|
+
import {
|
|
22
|
+
Card
|
|
23
|
+
} from "./chunk-2ZQK7NTN.js";
|
|
24
|
+
|
|
25
|
+
// src/app/platform/userInfos/coaching-customer-info/large.tsx
|
|
26
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
27
|
+
function CoachingCustomerInfoLarge({
|
|
28
|
+
customer,
|
|
29
|
+
session,
|
|
30
|
+
children,
|
|
31
|
+
badge,
|
|
32
|
+
onClickCopy
|
|
33
|
+
}) {
|
|
34
|
+
return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "5", children: [
|
|
35
|
+
/* @__PURE__ */ jsxs(Box, { children: [
|
|
36
|
+
/* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", mb: "1", width: "100%", children: [
|
|
37
|
+
/* @__PURE__ */ jsx(Heading, { variant: "heading2", children: (customer == null ? void 0 : customer.username) || "\uC774\uB984 \uC5C6\uC74C" }),
|
|
38
|
+
badge
|
|
39
|
+
] }),
|
|
40
|
+
/* @__PURE__ */ jsx(Heading, { truncate: true, variant: "heading4", weight: "regular", children: customer == null ? void 0 : customer.company })
|
|
41
|
+
] }),
|
|
42
|
+
children,
|
|
43
|
+
/* @__PURE__ */ jsx(Card, { size: "2", children: /* @__PURE__ */ jsx(DataList.Root, { children: sessionList.map(
|
|
44
|
+
(el) => renderDataListItem({
|
|
45
|
+
info: el,
|
|
46
|
+
data: session,
|
|
47
|
+
onClickCopy
|
|
48
|
+
})
|
|
49
|
+
) }) }),
|
|
50
|
+
/* @__PURE__ */ jsx(Separator, { size: "4" }),
|
|
51
|
+
/* @__PURE__ */ jsx(DataList.Root, { children: infoList.map(
|
|
52
|
+
(info) => renderDataListItem({
|
|
53
|
+
info,
|
|
54
|
+
data: customer,
|
|
55
|
+
onClickCopy
|
|
56
|
+
})
|
|
57
|
+
) })
|
|
58
|
+
] });
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
export {
|
|
62
|
+
CoachingCustomerInfoLarge
|
|
63
|
+
};
|
|
64
|
+
//# sourceMappingURL=chunk-FBOJKLC6.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/app/platform/userInfos/coaching-customer-info/large.tsx"],"sourcesContent":["import React from 'react';\nimport {\n Box,\n Card,\n DataList,\n Flex,\n Heading,\n Separator,\n} from '../../../../atoms';\nimport type { CoachingCustomerInfoProps } from '../utils';\nimport { infoList, renderDataListItem, sessionList } from '../utils';\n\nexport function CoachingCustomerInfoLarge({\n customer,\n session,\n children,\n badge,\n onClickCopy,\n}: CoachingCustomerInfoProps): React.ReactElement {\n return (\n <Flex direction=\"column\" gap=\"5\">\n {/* 이름, 사명 */}\n <Box>\n <Flex align=\"center\" justify=\"between\" mb=\"1\" width=\"100%\">\n <Heading variant=\"heading2\">\n {customer?.username || '이름 없음'}\n </Heading>\n {badge}\n </Flex>\n <Heading truncate variant=\"heading4\" weight=\"regular\">\n {customer?.company}\n </Heading>\n </Box>\n\n {children}\n\n {/* 세션 정보 */}\n <Card size=\"2\">\n <DataList.Root>\n {sessionList.map((el) =>\n renderDataListItem({\n info: el,\n data: session,\n onClickCopy,\n })\n )}\n </DataList.Root>\n </Card>\n\n {/* 회원 정보 */}\n <Separator size=\"4\" />\n <DataList.Root>\n {infoList.map((info) =>\n renderDataListItem({\n info,\n data: customer,\n onClickCopy,\n })\n )}\n </DataList.Root>\n </Flex>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAuBQ,SACE,KADF;AAXD,SAAS,0BAA0B;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAkD;AAChD,SACE,qBAAC,QAAK,WAAU,UAAS,KAAI,KAE3B;AAAA,yBAAC,OACC;AAAA,2BAAC,QAAK,OAAM,UAAS,SAAQ,WAAU,IAAG,KAAI,OAAM,QAClD;AAAA,4BAAC,WAAQ,SAAQ,YACd,gDAAU,aAAY,6BACzB;AAAA,QACC;AAAA,SACH;AAAA,MACA,oBAAC,WAAQ,UAAQ,MAAC,SAAQ,YAAW,QAAO,WACzC,+CAAU,SACb;AAAA,OACF;AAAA,IAEC;AAAA,IAGD,oBAAC,QAAK,MAAK,KACT,8BAAC,SAAS,MAAT,EACE,sBAAY;AAAA,MAAI,CAAC,OAChB,mBAAmB;AAAA,QACjB,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,MACF,CAAC;AAAA,IACH,GACF,GACF;AAAA,IAGA,oBAAC,aAAU,MAAK,KAAI;AAAA,IACpB,oBAAC,SAAS,MAAT,EACE,mBAAS;AAAA,MAAI,CAAC,SACb,mBAAmB;AAAA,QACjB;AAAA,QACA,MAAM;AAAA,QACN;AAAA,MACF,CAAC;AAAA,IACH,GACF;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import {
|
|
2
|
+
CoachingCustomerInfoMedium
|
|
3
|
+
} from "./chunk-ABZVJJ4O.js";
|
|
4
|
+
import {
|
|
5
|
+
CoachingCustomerInfoSmall
|
|
6
|
+
} from "./chunk-TL3L4CLE.js";
|
|
7
|
+
import {
|
|
8
|
+
CoachingCustomerInfoLarge
|
|
9
|
+
} from "./chunk-FBOJKLC6.js";
|
|
10
|
+
import {
|
|
11
|
+
Box
|
|
12
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
13
|
+
import {
|
|
14
|
+
__spreadValues
|
|
15
|
+
} from "./chunk-N552FDTV.js";
|
|
16
|
+
|
|
17
|
+
// src/app/platform/userInfos/coaching-customer-info/index.tsx
|
|
18
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
19
|
+
function CoachingCustomerInfo(props) {
|
|
20
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
21
|
+
/* @__PURE__ */ jsx(Box, { display: { initial: "block", sm: "none", md: "none" }, children: /* @__PURE__ */ jsx(CoachingCustomerInfoSmall, __spreadValues({}, props)) }),
|
|
22
|
+
/* @__PURE__ */ jsx(Box, { display: { initial: "none", sm: "block", md: "none" }, children: /* @__PURE__ */ jsx(CoachingCustomerInfoMedium, __spreadValues({}, props)) }),
|
|
23
|
+
/* @__PURE__ */ jsx(Box, { display: { initial: "none", sm: "none", md: "block" }, children: /* @__PURE__ */ jsx(CoachingCustomerInfoLarge, __spreadValues({}, props)) })
|
|
24
|
+
] });
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export {
|
|
28
|
+
CoachingCustomerInfo
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=chunk-HXJYOUBE.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/app/platform/userInfos/coaching-customer-info/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Box } from '../../../../atoms';\nimport type { CoachingCustomerInfoProps } from '../utils';\nimport { CoachingCustomerInfoSmall } from './small';\nimport { CoachingCustomerInfoMedium } from './medium';\nimport { CoachingCustomerInfoLarge } from './large';\n\nexport {\n CoachingCustomerInfoLarge,\n CoachingCustomerInfoMedium,\n CoachingCustomerInfoSmall,\n};\n\nexport { type CoachingCustomerInfoProps };\n\nexport function CoachingCustomerInfo(\n props: CoachingCustomerInfoProps\n): React.ReactElement {\n return (\n <>\n <Box display={{ initial: 'block', sm: 'none', md: 'none' }}>\n <CoachingCustomerInfoSmall {...props} />\n </Box>\n <Box display={{ initial: 'none', sm: 'block', md: 'none' }}>\n <CoachingCustomerInfoMedium {...props} />\n </Box>\n <Box display={{ initial: 'none', sm: 'none', md: 'block' }}>\n <CoachingCustomerInfoLarge {...props} />\n </Box>\n </>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBI,mBAEI,KAFJ;AAJG,SAAS,qBACd,OACoB;AACpB,SACE,iCACE;AAAA,wBAAC,OAAI,SAAS,EAAE,SAAS,SAAS,IAAI,QAAQ,IAAI,OAAO,GACvD,8BAAC,8CAA8B,MAAO,GACxC;AAAA,IACA,oBAAC,OAAI,SAAS,EAAE,SAAS,QAAQ,IAAI,SAAS,IAAI,OAAO,GACvD,8BAAC,+CAA+B,MAAO,GACzC;AAAA,IACA,oBAAC,OAAI,SAAS,EAAE,SAAS,QAAQ,IAAI,QAAQ,IAAI,QAAQ,GACvD,8BAAC,8CAA8B,MAAO,GACxC;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Skeleton
|
|
3
|
+
} from "./chunk-5H3YPCZK.js";
|
|
4
|
+
import {
|
|
5
|
+
Grid
|
|
6
|
+
} from "./chunk-EGEQY3KT.js";
|
|
7
|
+
import {
|
|
8
|
+
Heading
|
|
9
|
+
} from "./chunk-HJB3AASV.js";
|
|
10
|
+
import {
|
|
11
|
+
DropdownMenu
|
|
12
|
+
} from "./chunk-4WFMOFN2.js";
|
|
13
|
+
import {
|
|
14
|
+
Box
|
|
15
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
16
|
+
import {
|
|
17
|
+
Typo
|
|
18
|
+
} from "./chunk-52MVZ6AN.js";
|
|
19
|
+
import {
|
|
20
|
+
Flex
|
|
21
|
+
} from "./chunk-25HMMI7R.js";
|
|
22
|
+
import {
|
|
23
|
+
Button
|
|
24
|
+
} from "./chunk-Q5AFRGVP.js";
|
|
25
|
+
import {
|
|
26
|
+
DotsVerticalIcon
|
|
27
|
+
} from "./chunk-HLFG5ZTU.js";
|
|
28
|
+
|
|
29
|
+
// src/app/platform/contents-card.tsx
|
|
30
|
+
import { forwardRef } from "react";
|
|
31
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
32
|
+
var ContentsCard = forwardRef(
|
|
33
|
+
({
|
|
34
|
+
title,
|
|
35
|
+
description,
|
|
36
|
+
imageSrc,
|
|
37
|
+
footer,
|
|
38
|
+
dropdownItems,
|
|
39
|
+
onClickCard,
|
|
40
|
+
isLoading = false
|
|
41
|
+
}, ref) => {
|
|
42
|
+
return /* @__PURE__ */ jsxs(
|
|
43
|
+
Flex,
|
|
44
|
+
{
|
|
45
|
+
className: "hover-shadow",
|
|
46
|
+
direction: "column",
|
|
47
|
+
height: "100%",
|
|
48
|
+
m: "0",
|
|
49
|
+
onClick: onClickCard,
|
|
50
|
+
ref,
|
|
51
|
+
style: {
|
|
52
|
+
backgroundColor: "var(--color-panel)",
|
|
53
|
+
borderRadius: "var(--radius-5)",
|
|
54
|
+
overflow: "hidden",
|
|
55
|
+
cursor: "pointer"
|
|
56
|
+
},
|
|
57
|
+
width: "100%",
|
|
58
|
+
children: [
|
|
59
|
+
/* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(
|
|
60
|
+
Box,
|
|
61
|
+
{
|
|
62
|
+
height: "210px",
|
|
63
|
+
style: {
|
|
64
|
+
borderTopLeftRadius: "var(--radius-4)",
|
|
65
|
+
borderTopRightRadius: "var(--radius-4)",
|
|
66
|
+
backgroundImage: `url(${imageSrc})`,
|
|
67
|
+
backgroundSize: "cover",
|
|
68
|
+
backgroundPosition: "center"
|
|
69
|
+
},
|
|
70
|
+
width: "100%"
|
|
71
|
+
}
|
|
72
|
+
) }),
|
|
73
|
+
/* @__PURE__ */ jsxs(Box, { p: "5", children: [
|
|
74
|
+
/* @__PURE__ */ jsxs(Box, { children: [
|
|
75
|
+
/* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(Heading, { mb: "3", variant: "heading5", children: title }) }),
|
|
76
|
+
/* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(Typo, { as: "p", variant: "caption", children: description }) })
|
|
77
|
+
] }),
|
|
78
|
+
/* @__PURE__ */ jsxs(
|
|
79
|
+
Grid,
|
|
80
|
+
{
|
|
81
|
+
align: "center",
|
|
82
|
+
columns: "1fr auto",
|
|
83
|
+
justify: "between",
|
|
84
|
+
pt: "2",
|
|
85
|
+
style: { marginTop: "auto" },
|
|
86
|
+
width: "100%",
|
|
87
|
+
children: [
|
|
88
|
+
/* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(Flex, { gap: "3", overflow: "hidden", children: footer }) }),
|
|
89
|
+
Boolean(dropdownItems == null ? void 0 : dropdownItems.length) && /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
|
|
90
|
+
/* @__PURE__ */ jsx(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsx(Button, { size: "large", variant: "transparent", children: /* @__PURE__ */ jsx(DotsVerticalIcon, { color: "gray", height: "20px", width: "20px" }) }) }),
|
|
91
|
+
/* @__PURE__ */ jsx(DropdownMenu.Content, { children: dropdownItems == null ? void 0 : dropdownItems.map((item) => /* @__PURE__ */ jsx(
|
|
92
|
+
DropdownMenu.Item,
|
|
93
|
+
{
|
|
94
|
+
onClick: (e) => {
|
|
95
|
+
e.stopPropagation();
|
|
96
|
+
item.onClick();
|
|
97
|
+
},
|
|
98
|
+
children: item.label
|
|
99
|
+
},
|
|
100
|
+
item.label
|
|
101
|
+
)) })
|
|
102
|
+
] })
|
|
103
|
+
]
|
|
104
|
+
}
|
|
105
|
+
)
|
|
106
|
+
] })
|
|
107
|
+
]
|
|
108
|
+
}
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
);
|
|
112
|
+
ContentsCard.displayName = "ContentsCard";
|
|
113
|
+
|
|
114
|
+
export {
|
|
115
|
+
ContentsCard
|
|
116
|
+
};
|
|
117
|
+
//# sourceMappingURL=chunk-KCGIEABE.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/app/platform/contents-card.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Heading } from '@/atoms/heading';\nimport { Button } from '@/atoms/button';\nimport { DropdownMenu } from '@/atoms/dropdown-menu';\nimport { Box } from '@/atoms/box';\nimport { Flex } from '@/atoms/flex';\nimport { Grid } from '@/atoms/grid';\nimport { Skeleton } from '@/atoms/skeleton';\nimport { Typo } from '@/atoms/typo';\nimport { DotsVerticalIcon } from '@/icon';\n\nexport interface ContentsCardProps {\n title?: React.ReactNode;\n description?: string;\n id?: string;\n imageSrc?: string | null;\n imageAlt?: string;\n footer?: React.ReactNode;\n dropdownItems?: {\n label: string;\n onClick: () => void;\n }[];\n onClickCard?: () => void;\n isLoading?: boolean;\n}\n\nexport const ContentsCard = forwardRef<HTMLDivElement, ContentsCardProps>(\n (\n {\n title,\n description,\n imageSrc,\n footer,\n dropdownItems,\n onClickCard,\n isLoading = false,\n },\n ref\n ): React.ReactElement => {\n return (\n <Flex\n className=\"hover-shadow\"\n direction=\"column\"\n height=\"100%\"\n m=\"0\"\n onClick={onClickCard}\n ref={ref}\n style={{\n backgroundColor: 'var(--color-panel)',\n borderRadius: 'var(--radius-5)',\n overflow: 'hidden',\n cursor: 'pointer',\n }}\n width=\"100%\"\n >\n {/* 섬네일 */}\n <Skeleton loading={isLoading}>\n <Box\n height=\"210px\"\n style={{\n borderTopLeftRadius: 'var(--radius-4)',\n borderTopRightRadius: 'var(--radius-4)',\n backgroundImage: `url(${imageSrc})`,\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n }}\n width=\"100%\"\n />\n </Skeleton>\n {/* 제목, 설명 */}\n <Box p=\"5\">\n <Box>\n <Skeleton loading={isLoading}>\n <Heading mb=\"3\" variant=\"heading5\">\n {title}\n </Heading>\n </Skeleton>\n <Skeleton loading={isLoading}>\n <Typo as=\"p\" variant=\"caption\">\n {description}\n </Typo>\n </Skeleton>\n </Box>\n <Grid\n align=\"center\"\n columns=\"1fr auto\"\n justify=\"between\"\n pt=\"2\"\n style={{ marginTop: 'auto' }}\n width=\"100%\"\n >\n <Skeleton loading={isLoading}>\n <Flex gap=\"3\" overflow=\"hidden\">\n {footer}\n </Flex>\n </Skeleton>\n {Boolean(dropdownItems?.length) && (\n <DropdownMenu.Root>\n <DropdownMenu.Trigger>\n <Button size=\"large\" variant=\"transparent\">\n <DotsVerticalIcon color=\"gray\" height=\"20px\" width=\"20px\" />\n </Button>\n </DropdownMenu.Trigger>\n <DropdownMenu.Content>\n {dropdownItems?.map((item) => (\n <DropdownMenu.Item\n key={item.label}\n onClick={(e) => {\n e.stopPropagation();\n item.onClick();\n }}\n >\n {item.label}\n </DropdownMenu.Item>\n ))}\n </DropdownMenu.Content>\n </DropdownMenu.Root>\n )}\n </Grid>\n </Box>\n </Flex>\n );\n }\n);\nContentsCard.displayName = 'ContentsCard';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,kBAAkB;AAyDxB,cAcA,YAdA;AA/BH,IAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,GACA,QACuB;AACvB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,WAAU;AAAA,QACV,QAAO;AAAA,QACP,GAAE;AAAA,QACF,SAAS;AAAA,QACT;AAAA,QACA,OAAO;AAAA,UACL,iBAAiB;AAAA,UACjB,cAAc;AAAA,UACd,UAAU;AAAA,UACV,QAAQ;AAAA,QACV;AAAA,QACA,OAAM;AAAA,QAGN;AAAA,8BAAC,YAAS,SAAS,WACjB;AAAA,YAAC;AAAA;AAAA,cACC,QAAO;AAAA,cACP,OAAO;AAAA,gBACL,qBAAqB;AAAA,gBACrB,sBAAsB;AAAA,gBACtB,iBAAiB,OAAO,QAAQ;AAAA,gBAChC,gBAAgB;AAAA,gBAChB,oBAAoB;AAAA,cACtB;AAAA,cACA,OAAM;AAAA;AAAA,UACR,GACF;AAAA,UAEA,qBAAC,OAAI,GAAE,KACL;AAAA,iCAAC,OACC;AAAA,kCAAC,YAAS,SAAS,WACjB,8BAAC,WAAQ,IAAG,KAAI,SAAQ,YACrB,iBACH,GACF;AAAA,cACA,oBAAC,YAAS,SAAS,WACjB,8BAAC,QAAK,IAAG,KAAI,SAAQ,WAClB,uBACH,GACF;AAAA,eACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,SAAQ;AAAA,gBACR,IAAG;AAAA,gBACH,OAAO,EAAE,WAAW,OAAO;AAAA,gBAC3B,OAAM;AAAA,gBAEN;AAAA,sCAAC,YAAS,SAAS,WACjB,8BAAC,QAAK,KAAI,KAAI,UAAS,UACpB,kBACH,GACF;AAAA,kBACC,QAAQ,+CAAe,MAAM,KAC5B,qBAAC,aAAa,MAAb,EACC;AAAA,wCAAC,aAAa,SAAb,EACC,8BAAC,UAAO,MAAK,SAAQ,SAAQ,eAC3B,8BAAC,oBAAiB,OAAM,QAAO,QAAO,QAAO,OAAM,QAAO,GAC5D,GACF;AAAA,oBACA,oBAAC,aAAa,SAAb,EACE,yDAAe,IAAI,CAAC,SACnB;AAAA,sBAAC,aAAa;AAAA,sBAAb;AAAA,wBAEC,SAAS,CAAC,MAAM;AACd,4BAAE,gBAAgB;AAClB,+BAAK,QAAQ;AAAA,wBACf;AAAA,wBAEC,eAAK;AAAA;AAAA,sBAND,KAAK;AAAA,oBAOZ,IAEJ;AAAA,qBACF;AAAA;AAAA;AAAA,YAEJ;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;","names":[]}
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Skeleton
|
|
3
|
+
} from "./chunk-5H3YPCZK.js";
|
|
4
|
+
import {
|
|
5
|
+
Grid
|
|
6
|
+
} from "./chunk-EGEQY3KT.js";
|
|
7
|
+
import {
|
|
8
|
+
Inset
|
|
9
|
+
} from "./chunk-XQOL7UBI.js";
|
|
10
|
+
import {
|
|
11
|
+
Heading
|
|
12
|
+
} from "./chunk-HJB3AASV.js";
|
|
13
|
+
import {
|
|
14
|
+
DropdownMenu
|
|
15
|
+
} from "./chunk-4WFMOFN2.js";
|
|
16
|
+
import {
|
|
17
|
+
Card
|
|
18
|
+
} from "./chunk-2ZQK7NTN.js";
|
|
19
|
+
import {
|
|
20
|
+
Box
|
|
21
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
22
|
+
import {
|
|
23
|
+
Typo
|
|
24
|
+
} from "./chunk-52MVZ6AN.js";
|
|
25
|
+
import {
|
|
26
|
+
Flex
|
|
27
|
+
} from "./chunk-25HMMI7R.js";
|
|
28
|
+
import {
|
|
29
|
+
Button
|
|
30
|
+
} from "./chunk-Q5AFRGVP.js";
|
|
31
|
+
import {
|
|
32
|
+
DotsVerticalIcon
|
|
33
|
+
} from "./chunk-HLFG5ZTU.js";
|
|
34
|
+
|
|
35
|
+
// src/app/platform/contents-card.tsx
|
|
36
|
+
import { forwardRef } from "react";
|
|
37
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
38
|
+
var ContentsCard = forwardRef(
|
|
39
|
+
({
|
|
40
|
+
title,
|
|
41
|
+
description,
|
|
42
|
+
imageSrc,
|
|
43
|
+
footer,
|
|
44
|
+
dropdownItems,
|
|
45
|
+
onClickCard,
|
|
46
|
+
isLoading = false
|
|
47
|
+
}, ref) => {
|
|
48
|
+
return /* @__PURE__ */ jsxs(
|
|
49
|
+
Card,
|
|
50
|
+
{
|
|
51
|
+
onClick: onClickCard,
|
|
52
|
+
ref,
|
|
53
|
+
style: {
|
|
54
|
+
height: "100%",
|
|
55
|
+
width: "100%",
|
|
56
|
+
display: "grid",
|
|
57
|
+
cursor: "pointer"
|
|
58
|
+
},
|
|
59
|
+
children: [
|
|
60
|
+
/* @__PURE__ */ jsx(Inset, { clip: "padding-box", pb: "0", side: "top", children: /* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(
|
|
61
|
+
Box,
|
|
62
|
+
{
|
|
63
|
+
height: "210px",
|
|
64
|
+
style: {
|
|
65
|
+
backgroundImage: `url(${imageSrc})`,
|
|
66
|
+
backgroundSize: "cover",
|
|
67
|
+
backgroundPosition: "center"
|
|
68
|
+
},
|
|
69
|
+
width: "100%"
|
|
70
|
+
}
|
|
71
|
+
) }) }),
|
|
72
|
+
/* @__PURE__ */ jsxs(Flex, { direction: "column", p: "4", pb: "3", children: [
|
|
73
|
+
/* @__PURE__ */ jsxs(Box, { children: [
|
|
74
|
+
/* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(Heading, { mb: "3", variant: "heading5", children: title }) }),
|
|
75
|
+
/* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(Typo, { as: "p", variant: "caption", children: description }) })
|
|
76
|
+
] }),
|
|
77
|
+
/* @__PURE__ */ jsxs(
|
|
78
|
+
Grid,
|
|
79
|
+
{
|
|
80
|
+
align: "center",
|
|
81
|
+
columns: "1fr auto",
|
|
82
|
+
justify: "between",
|
|
83
|
+
pt: "2",
|
|
84
|
+
style: { marginTop: "auto" },
|
|
85
|
+
width: "100%",
|
|
86
|
+
children: [
|
|
87
|
+
/* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(Flex, { gap: "3", overflow: "hidden", children: footer }) }),
|
|
88
|
+
Boolean(dropdownItems == null ? void 0 : dropdownItems.length) && /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
|
|
89
|
+
/* @__PURE__ */ jsx(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsx(Button, { size: "large", variant: "transparent", children: /* @__PURE__ */ jsx(DotsVerticalIcon, { color: "gray", height: "20px", width: "20px" }) }) }),
|
|
90
|
+
/* @__PURE__ */ jsx(DropdownMenu.Content, { children: dropdownItems == null ? void 0 : dropdownItems.map((item) => /* @__PURE__ */ jsx(
|
|
91
|
+
DropdownMenu.Item,
|
|
92
|
+
{
|
|
93
|
+
onClick: (e) => {
|
|
94
|
+
e.stopPropagation();
|
|
95
|
+
item.onClick();
|
|
96
|
+
},
|
|
97
|
+
children: item.label
|
|
98
|
+
},
|
|
99
|
+
item.label
|
|
100
|
+
)) })
|
|
101
|
+
] })
|
|
102
|
+
]
|
|
103
|
+
}
|
|
104
|
+
)
|
|
105
|
+
] })
|
|
106
|
+
]
|
|
107
|
+
}
|
|
108
|
+
);
|
|
109
|
+
}
|
|
110
|
+
);
|
|
111
|
+
ContentsCard.displayName = "ContentsCard";
|
|
112
|
+
|
|
113
|
+
export {
|
|
114
|
+
ContentsCard
|
|
115
|
+
};
|
|
116
|
+
//# sourceMappingURL=chunk-L5XYBDEW.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/app/platform/contents-card.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Heading } from '@/atoms/heading';\nimport { Button } from '@/atoms/button';\nimport { DropdownMenu } from '@/atoms/dropdown-menu';\nimport { Box } from '@/atoms/box';\nimport { Flex } from '@/atoms/flex';\nimport { Grid } from '@/atoms/grid';\nimport { Skeleton } from '@/atoms/skeleton';\nimport { Typo } from '@/atoms/typo';\nimport { DotsVerticalIcon } from '@/icon';\nimport { Card, Inset } from '@/atoms';\n\nexport interface ContentsCardProps {\n title?: React.ReactNode;\n description?: string;\n id?: string;\n imageSrc?: string | null;\n imageAlt?: string;\n footer?: React.ReactNode;\n dropdownItems?: {\n label: string;\n onClick: () => void;\n }[];\n onClickCard?: () => void;\n isLoading?: boolean;\n}\n\nexport const ContentsCard = forwardRef<HTMLDivElement, ContentsCardProps>(\n (\n {\n title,\n description,\n imageSrc,\n footer,\n dropdownItems,\n onClickCard,\n isLoading = false,\n },\n ref\n ): React.ReactElement => {\n return (\n <Card\n onClick={onClickCard}\n ref={ref}\n style={{\n height: '100%',\n width: '100%',\n display: 'grid',\n cursor: 'pointer',\n }}\n >\n {/* 섬네일 */}\n <Inset clip=\"padding-box\" pb=\"0\" side=\"top\">\n <Skeleton loading={isLoading}>\n <Box\n height=\"210px\"\n style={{\n backgroundImage: `url(${imageSrc})`,\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n }}\n width=\"100%\"\n />\n </Skeleton>\n </Inset>\n {/* 제목, 설명 */}\n <Flex direction=\"column\" p=\"4\" pb=\"3\">\n <Box>\n <Skeleton loading={isLoading}>\n <Heading mb=\"3\" variant=\"heading5\">\n {title}\n </Heading>\n </Skeleton>\n <Skeleton loading={isLoading}>\n <Typo as=\"p\" variant=\"caption\">\n {description}\n </Typo>\n </Skeleton>\n </Box>\n <Grid\n align=\"center\"\n columns=\"1fr auto\"\n justify=\"between\"\n pt=\"2\"\n style={{ marginTop: 'auto' }}\n width=\"100%\"\n >\n <Skeleton loading={isLoading}>\n <Flex gap=\"3\" overflow=\"hidden\">\n {footer}\n </Flex>\n </Skeleton>\n {Boolean(dropdownItems?.length) && (\n <DropdownMenu.Root>\n <DropdownMenu.Trigger>\n <Button size=\"large\" variant=\"transparent\">\n <DotsVerticalIcon color=\"gray\" height=\"20px\" width=\"20px\" />\n </Button>\n </DropdownMenu.Trigger>\n <DropdownMenu.Content>\n {dropdownItems?.map((item) => (\n <DropdownMenu.Item\n key={item.label}\n onClick={(e) => {\n e.stopPropagation();\n item.onClick();\n }}\n >\n {item.label}\n </DropdownMenu.Item>\n ))}\n </DropdownMenu.Content>\n </DropdownMenu.Root>\n )}\n </Grid>\n </Flex>\n </Card>\n );\n }\n);\nContentsCard.displayName = 'ContentsCard';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,kBAAkB;AAsDtB,cAaF,YAbE;AA3BL,IAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,GACA,QACuB;AACvB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT;AAAA,QACA,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,SAAS;AAAA,UACT,QAAQ;AAAA,QACV;AAAA,QAGA;AAAA,8BAAC,SAAM,MAAK,eAAc,IAAG,KAAI,MAAK,OACpC,8BAAC,YAAS,SAAS,WACjB;AAAA,YAAC;AAAA;AAAA,cACC,QAAO;AAAA,cACP,OAAO;AAAA,gBACL,iBAAiB,OAAO,QAAQ;AAAA,gBAChC,gBAAgB;AAAA,gBAChB,oBAAoB;AAAA,cACtB;AAAA,cACA,OAAM;AAAA;AAAA,UACR,GACF,GACF;AAAA,UAEA,qBAAC,QAAK,WAAU,UAAS,GAAE,KAAI,IAAG,KAChC;AAAA,iCAAC,OACC;AAAA,kCAAC,YAAS,SAAS,WACjB,8BAAC,WAAQ,IAAG,KAAI,SAAQ,YACrB,iBACH,GACF;AAAA,cACA,oBAAC,YAAS,SAAS,WACjB,8BAAC,QAAK,IAAG,KAAI,SAAQ,WAClB,uBACH,GACF;AAAA,eACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,SAAQ;AAAA,gBACR,IAAG;AAAA,gBACH,OAAO,EAAE,WAAW,OAAO;AAAA,gBAC3B,OAAM;AAAA,gBAEN;AAAA,sCAAC,YAAS,SAAS,WACjB,8BAAC,QAAK,KAAI,KAAI,UAAS,UACpB,kBACH,GACF;AAAA,kBACC,QAAQ,+CAAe,MAAM,KAC5B,qBAAC,aAAa,MAAb,EACC;AAAA,wCAAC,aAAa,SAAb,EACC,8BAAC,UAAO,MAAK,SAAQ,SAAQ,eAC3B,8BAAC,oBAAiB,OAAM,QAAO,QAAO,QAAO,OAAM,QAAO,GAC5D,GACF;AAAA,oBACA,oBAAC,aAAa,SAAb,EACE,yDAAe,IAAI,CAAC,SACnB;AAAA,sBAAC,aAAa;AAAA,sBAAb;AAAA,wBAEC,SAAS,CAAC,MAAM;AACd,4BAAE,gBAAgB;AAClB,+BAAK,QAAQ;AAAA,wBACf;AAAA,wBAEC,eAAK;AAAA;AAAA,sBAND,KAAK;AAAA,oBAOZ,IAEJ;AAAA,qBACF;AAAA;AAAA;AAAA,YAEJ;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;","names":[]}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Skeleton
|
|
3
|
+
} from "./chunk-5H3YPCZK.js";
|
|
4
|
+
import {
|
|
5
|
+
Grid
|
|
6
|
+
} from "./chunk-EGEQY3KT.js";
|
|
7
|
+
import {
|
|
8
|
+
Inset
|
|
9
|
+
} from "./chunk-XQOL7UBI.js";
|
|
10
|
+
import {
|
|
11
|
+
Heading
|
|
12
|
+
} from "./chunk-HJB3AASV.js";
|
|
13
|
+
import {
|
|
14
|
+
DropdownMenu
|
|
15
|
+
} from "./chunk-4WFMOFN2.js";
|
|
16
|
+
import {
|
|
17
|
+
Card
|
|
18
|
+
} from "./chunk-2ZQK7NTN.js";
|
|
19
|
+
import {
|
|
20
|
+
Box
|
|
21
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
22
|
+
import {
|
|
23
|
+
Typo
|
|
24
|
+
} from "./chunk-52MVZ6AN.js";
|
|
25
|
+
import {
|
|
26
|
+
Flex
|
|
27
|
+
} from "./chunk-25HMMI7R.js";
|
|
28
|
+
import {
|
|
29
|
+
Button
|
|
30
|
+
} from "./chunk-Q5AFRGVP.js";
|
|
31
|
+
import {
|
|
32
|
+
DotsVerticalIcon
|
|
33
|
+
} from "./chunk-HLFG5ZTU.js";
|
|
34
|
+
|
|
35
|
+
// src/app/platform/contents-card.tsx
|
|
36
|
+
import { forwardRef } from "react";
|
|
37
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
38
|
+
var ContentsCard = forwardRef(
|
|
39
|
+
({
|
|
40
|
+
title,
|
|
41
|
+
description,
|
|
42
|
+
imageSrc,
|
|
43
|
+
footer,
|
|
44
|
+
dropdownItems,
|
|
45
|
+
onClickCard,
|
|
46
|
+
isLoading = false
|
|
47
|
+
}, ref) => {
|
|
48
|
+
return /* @__PURE__ */ jsxs(
|
|
49
|
+
Card,
|
|
50
|
+
{
|
|
51
|
+
onClick: onClickCard,
|
|
52
|
+
ref,
|
|
53
|
+
style: { height: "100%", width: "100%", display: "grid" },
|
|
54
|
+
children: [
|
|
55
|
+
/* @__PURE__ */ jsx(Inset, { clip: "padding-box", pb: "0", side: "top", children: /* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(
|
|
56
|
+
Box,
|
|
57
|
+
{
|
|
58
|
+
height: "210px",
|
|
59
|
+
style: {
|
|
60
|
+
backgroundImage: `url(${imageSrc})`,
|
|
61
|
+
backgroundSize: "cover",
|
|
62
|
+
backgroundPosition: "center"
|
|
63
|
+
},
|
|
64
|
+
width: "100%"
|
|
65
|
+
}
|
|
66
|
+
) }) }),
|
|
67
|
+
/* @__PURE__ */ jsxs(Flex, { direction: "column", p: "4", children: [
|
|
68
|
+
/* @__PURE__ */ jsxs(Box, { children: [
|
|
69
|
+
/* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(Heading, { mb: "3", variant: "heading5", children: title }) }),
|
|
70
|
+
/* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(Typo, { as: "p", variant: "caption", children: description }) })
|
|
71
|
+
] }),
|
|
72
|
+
/* @__PURE__ */ jsxs(
|
|
73
|
+
Grid,
|
|
74
|
+
{
|
|
75
|
+
align: "center",
|
|
76
|
+
columns: "1fr auto",
|
|
77
|
+
justify: "between",
|
|
78
|
+
pt: "2",
|
|
79
|
+
style: { marginTop: "auto" },
|
|
80
|
+
width: "100%",
|
|
81
|
+
children: [
|
|
82
|
+
/* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(Flex, { gap: "3", overflow: "hidden", children: footer }) }),
|
|
83
|
+
Boolean(dropdownItems == null ? void 0 : dropdownItems.length) && /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
|
|
84
|
+
/* @__PURE__ */ jsx(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsx(Button, { size: "large", variant: "transparent", children: /* @__PURE__ */ jsx(DotsVerticalIcon, { color: "gray", height: "20px", width: "20px" }) }) }),
|
|
85
|
+
/* @__PURE__ */ jsx(DropdownMenu.Content, { children: dropdownItems == null ? void 0 : dropdownItems.map((item) => /* @__PURE__ */ jsx(
|
|
86
|
+
DropdownMenu.Item,
|
|
87
|
+
{
|
|
88
|
+
onClick: (e) => {
|
|
89
|
+
e.stopPropagation();
|
|
90
|
+
item.onClick();
|
|
91
|
+
},
|
|
92
|
+
children: item.label
|
|
93
|
+
},
|
|
94
|
+
item.label
|
|
95
|
+
)) })
|
|
96
|
+
] })
|
|
97
|
+
]
|
|
98
|
+
}
|
|
99
|
+
)
|
|
100
|
+
] })
|
|
101
|
+
]
|
|
102
|
+
}
|
|
103
|
+
);
|
|
104
|
+
}
|
|
105
|
+
);
|
|
106
|
+
ContentsCard.displayName = "ContentsCard";
|
|
107
|
+
|
|
108
|
+
export {
|
|
109
|
+
ContentsCard
|
|
110
|
+
};
|
|
111
|
+
//# sourceMappingURL=chunk-MWBEL3OY.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/app/platform/contents-card.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Heading } from '@/atoms/heading';\nimport { Button } from '@/atoms/button';\nimport { DropdownMenu } from '@/atoms/dropdown-menu';\nimport { Box } from '@/atoms/box';\nimport { Flex } from '@/atoms/flex';\nimport { Grid } from '@/atoms/grid';\nimport { Skeleton } from '@/atoms/skeleton';\nimport { Typo } from '@/atoms/typo';\nimport { DotsVerticalIcon } from '@/icon';\nimport { Card, Inset } from '@/atoms';\n\nexport interface ContentsCardProps {\n title?: React.ReactNode;\n description?: string;\n id?: string;\n imageSrc?: string | null;\n imageAlt?: string;\n footer?: React.ReactNode;\n dropdownItems?: {\n label: string;\n onClick: () => void;\n }[];\n onClickCard?: () => void;\n isLoading?: boolean;\n}\n\nexport const ContentsCard = forwardRef<HTMLDivElement, ContentsCardProps>(\n (\n {\n title,\n description,\n imageSrc,\n footer,\n dropdownItems,\n onClickCard,\n isLoading = false,\n },\n ref\n ): React.ReactElement => {\n return (\n <Card\n onClick={onClickCard}\n ref={ref}\n style={{ height: '100%', width: '100%', display: 'grid' }}\n >\n {/* 섬네일 */}\n <Inset clip=\"padding-box\" pb=\"0\" side=\"top\">\n <Skeleton loading={isLoading}>\n <Box\n height=\"210px\"\n style={{\n backgroundImage: `url(${imageSrc})`,\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n }}\n width=\"100%\"\n />\n </Skeleton>\n </Inset>\n {/* 제목, 설명 */}\n <Flex direction=\"column\" p=\"4\">\n <Box>\n <Skeleton loading={isLoading}>\n <Heading mb=\"3\" variant=\"heading5\">\n {title}\n </Heading>\n </Skeleton>\n <Skeleton loading={isLoading}>\n <Typo as=\"p\" variant=\"caption\">\n {description}\n </Typo>\n </Skeleton>\n </Box>\n <Grid\n align=\"center\"\n columns=\"1fr auto\"\n justify=\"between\"\n pt=\"2\"\n style={{ marginTop: 'auto' }}\n width=\"100%\"\n >\n <Skeleton loading={isLoading}>\n <Flex gap=\"3\" overflow=\"hidden\">\n {footer}\n </Flex>\n </Skeleton>\n {Boolean(dropdownItems?.length) && (\n <DropdownMenu.Root>\n <DropdownMenu.Trigger>\n <Button size=\"large\" variant=\"transparent\">\n <DotsVerticalIcon color=\"gray\" height=\"20px\" width=\"20px\" />\n </Button>\n </DropdownMenu.Trigger>\n <DropdownMenu.Content>\n {dropdownItems?.map((item) => (\n <DropdownMenu.Item\n key={item.label}\n onClick={(e) => {\n e.stopPropagation();\n item.onClick();\n }}\n >\n {item.label}\n </DropdownMenu.Item>\n ))}\n </DropdownMenu.Content>\n </DropdownMenu.Root>\n )}\n </Grid>\n </Flex>\n </Card>\n );\n }\n);\nContentsCard.displayName = 'ContentsCard';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,kBAAkB;AAiDtB,cAaF,YAbE;AAtBL,IAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,GACA,QACuB;AACvB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT;AAAA,QACA,OAAO,EAAE,QAAQ,QAAQ,OAAO,QAAQ,SAAS,OAAO;AAAA,QAGxD;AAAA,8BAAC,SAAM,MAAK,eAAc,IAAG,KAAI,MAAK,OACpC,8BAAC,YAAS,SAAS,WACjB;AAAA,YAAC;AAAA;AAAA,cACC,QAAO;AAAA,cACP,OAAO;AAAA,gBACL,iBAAiB,OAAO,QAAQ;AAAA,gBAChC,gBAAgB;AAAA,gBAChB,oBAAoB;AAAA,cACtB;AAAA,cACA,OAAM;AAAA;AAAA,UACR,GACF,GACF;AAAA,UAEA,qBAAC,QAAK,WAAU,UAAS,GAAE,KACzB;AAAA,iCAAC,OACC;AAAA,kCAAC,YAAS,SAAS,WACjB,8BAAC,WAAQ,IAAG,KAAI,SAAQ,YACrB,iBACH,GACF;AAAA,cACA,oBAAC,YAAS,SAAS,WACjB,8BAAC,QAAK,IAAG,KAAI,SAAQ,WAClB,uBACH,GACF;AAAA,eACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,SAAQ;AAAA,gBACR,IAAG;AAAA,gBACH,OAAO,EAAE,WAAW,OAAO;AAAA,gBAC3B,OAAM;AAAA,gBAEN;AAAA,sCAAC,YAAS,SAAS,WACjB,8BAAC,QAAK,KAAI,KAAI,UAAS,UACpB,kBACH,GACF;AAAA,kBACC,QAAQ,+CAAe,MAAM,KAC5B,qBAAC,aAAa,MAAb,EACC;AAAA,wCAAC,aAAa,SAAb,EACC,8BAAC,UAAO,MAAK,SAAQ,SAAQ,eAC3B,8BAAC,oBAAiB,OAAM,QAAO,QAAO,QAAO,OAAM,QAAO,GAC5D,GACF;AAAA,oBACA,oBAAC,aAAa,SAAb,EACE,yDAAe,IAAI,CAAC,SACnB;AAAA,sBAAC,aAAa;AAAA,sBAAb;AAAA,wBAEC,SAAS,CAAC,MAAM;AACd,4BAAE,gBAAgB;AAClB,+BAAK,QAAQ;AAAA,wBACf;AAAA,wBAEC,eAAK;AAAA;AAAA,sBAND,KAAK;AAAA,oBAOZ,IAEJ;AAAA,qBACF;AAAA;AAAA;AAAA,YAEJ;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;","names":[]}
|