@tipp/ui 2.3.9 → 2.3.10
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.map +1 -1
- package/dist/app/index.js +91 -91
- package/dist/app/platform/coach-question-list.cjs.map +1 -1
- package/dist/app/platform/coach-question-list.js +31 -31
- package/dist/app/platform/contents-card.cjs.map +1 -1
- package/dist/app/platform/contents-card.js +31 -31
- package/dist/app/platform/curriculum-card.js +5 -5
- package/dist/app/platform/edit-coaching-time.cjs.map +1 -1
- package/dist/app/platform/edit-coaching-time.js +73 -73
- package/dist/app/platform/edit-service-type.cjs.map +1 -1
- package/dist/app/platform/edit-service-type.js +74 -74
- package/dist/app/platform/goal-manage-card-edit.cjs.map +1 -1
- package/dist/app/platform/goal-manage-card-edit.js +73 -73
- package/dist/app/platform/goal-manage-card-read.cjs.map +1 -1
- package/dist/app/platform/goal-manage-card-read.js +31 -31
- package/dist/app/platform/on-offline-radio-card.cjs.map +1 -1
- package/dist/app/platform/on-offline-radio-card.js +73 -73
- package/dist/app/platform/report-card.cjs.map +1 -1
- package/dist/app/platform/report-card.js +31 -31
- package/dist/app/platform/reservation-card.cjs.map +1 -1
- package/dist/app/platform/reservation-card.js +74 -74
- package/dist/app/platform/session-card.cjs.map +1 -1
- package/dist/app/platform/session-card.js +76 -76
- package/dist/app/platform/session-review-simple-read.cjs.map +1 -1
- package/dist/app/platform/session-review-simple-read.js +31 -31
- package/dist/app/platform/userInfos/coaching-customer-info/index.cjs.map +1 -1
- package/dist/app/platform/userInfos/coaching-customer-info/index.js +34 -34
- package/dist/app/platform/userInfos/coaching-customer-info/large.cjs.map +1 -1
- package/dist/app/platform/userInfos/coaching-customer-info/large.js +31 -31
- package/dist/app/platform/userInfos/coaching-customer-info/medium.cjs.map +1 -1
- package/dist/app/platform/userInfos/coaching-customer-info/medium.js +31 -31
- package/dist/app/platform/userInfos/coaching-customer-info/small.cjs.map +1 -1
- package/dist/app/platform/userInfos/coaching-customer-info/small.js +31 -31
- package/dist/app/platform/userInfos/session-user-info-detail.cjs.map +1 -1
- package/dist/app/platform/userInfos/session-user-info-detail.js +31 -31
- package/dist/app/platform/userInfos/utils.cjs.map +1 -1
- package/dist/app/platform/userInfos/utils.js +30 -30
- package/dist/atoms/bullet-text.js +2 -2
- package/dist/atoms/dialog.js +2 -2
- package/dist/atoms/field-error-wrapper.js +2 -2
- package/dist/atoms/index.cjs +1 -1
- package/dist/atoms/index.cjs.map +1 -1
- package/dist/atoms/index.js +62 -62
- package/dist/atoms/list.js +2 -2
- package/dist/atoms/pagination.cjs +1 -1
- package/dist/atoms/pagination.cjs.map +1 -1
- package/dist/atoms/pagination.js +3 -3
- package/dist/chunk-26O2ATMO.js +196 -0
- package/dist/chunk-26O2ATMO.js.map +1 -0
- package/dist/chunk-2HNIO3ZS.js +174 -0
- package/dist/chunk-2HNIO3ZS.js.map +1 -0
- package/dist/chunk-3IH2QVBB.js +37 -0
- package/dist/chunk-3IH2QVBB.js.map +1 -0
- package/dist/chunk-3PE6JQJD.js +199 -0
- package/dist/chunk-3PE6JQJD.js.map +1 -0
- package/dist/chunk-3ZWQBI3C.js +228 -0
- package/dist/chunk-3ZWQBI3C.js.map +1 -0
- package/dist/chunk-565LGGCZ.js +198 -0
- package/dist/chunk-565LGGCZ.js.map +1 -0
- package/dist/chunk-5ALF4QOO.js +51 -0
- package/dist/chunk-5ALF4QOO.js.map +1 -0
- package/dist/chunk-5I2YBHKM.js +209 -0
- package/dist/chunk-5I2YBHKM.js.map +1 -0
- package/dist/chunk-5OTWI6C5.js +124 -0
- package/dist/chunk-5OTWI6C5.js.map +1 -0
- package/dist/chunk-5QWMYOYQ.js +101 -0
- package/dist/chunk-5QWMYOYQ.js.map +1 -0
- package/dist/chunk-6MXZLFKB.js +215 -0
- package/dist/chunk-6MXZLFKB.js.map +1 -0
- package/dist/chunk-7EDFQO6G.js +145 -0
- package/dist/chunk-7EDFQO6G.js.map +1 -0
- package/dist/chunk-AE37PV3K.js +64 -0
- package/dist/chunk-AE37PV3K.js.map +1 -0
- package/dist/chunk-AWLRACTU.js +217 -0
- package/dist/chunk-AWLRACTU.js.map +1 -0
- package/dist/chunk-BAS5S6ZI.js +144 -0
- package/dist/chunk-BAS5S6ZI.js.map +1 -0
- package/dist/chunk-BBEGVL2S.js +69 -0
- package/dist/chunk-BBEGVL2S.js.map +1 -0
- package/dist/chunk-C2KPQPFR.js +209 -0
- package/dist/chunk-C2KPQPFR.js.map +1 -0
- package/dist/chunk-C3GC2Y34.js +209 -0
- package/dist/chunk-C3GC2Y34.js.map +1 -0
- package/dist/chunk-CRPH7YI5.js +221 -0
- package/dist/chunk-CRPH7YI5.js.map +1 -0
- package/dist/chunk-D7DI7CJ5.js +63 -0
- package/dist/chunk-D7DI7CJ5.js.map +1 -0
- package/dist/chunk-DG5A2RUZ.js +215 -0
- package/dist/chunk-DG5A2RUZ.js.map +1 -0
- package/dist/chunk-DLFBF5KJ.js +217 -0
- package/dist/chunk-DLFBF5KJ.js.map +1 -0
- package/dist/chunk-E2ISFADW.js +196 -0
- package/dist/chunk-E2ISFADW.js.map +1 -0
- package/dist/chunk-E3E6FV2T.js +64 -0
- package/dist/chunk-E3E6FV2T.js.map +1 -0
- package/dist/chunk-EBMQ6DIV.js +89 -0
- package/dist/chunk-EBMQ6DIV.js.map +1 -0
- package/dist/chunk-EWIRNKMR.js +49 -0
- package/dist/chunk-EWIRNKMR.js.map +1 -0
- package/dist/chunk-FG3WT6OL.js +125 -0
- package/dist/chunk-FG3WT6OL.js.map +1 -0
- package/dist/chunk-FRKPPLQP.js +223 -0
- package/dist/chunk-FRKPPLQP.js.map +1 -0
- package/dist/chunk-G6ZWPY57.js +99 -0
- package/dist/chunk-G6ZWPY57.js.map +1 -0
- package/dist/chunk-GCDGKRQQ.js +117 -0
- package/dist/chunk-GCDGKRQQ.js.map +1 -0
- package/dist/chunk-GROWIYD2.js +169 -0
- package/dist/chunk-GROWIYD2.js.map +1 -0
- package/dist/chunk-HPG6F7VM.js +165 -0
- package/dist/chunk-HPG6F7VM.js.map +1 -0
- package/dist/chunk-HQPSFOVV.js +43 -0
- package/dist/chunk-HQPSFOVV.js.map +1 -0
- package/dist/chunk-I7M6TY5G.js +64 -0
- package/dist/chunk-I7M6TY5G.js.map +1 -0
- package/dist/chunk-IFY3MMGL.js +144 -0
- package/dist/chunk-IFY3MMGL.js.map +1 -0
- package/dist/chunk-JWT2CPYX.js +221 -0
- package/dist/chunk-JWT2CPYX.js.map +1 -0
- package/dist/chunk-KTXRU3WQ.js +196 -0
- package/dist/chunk-KTXRU3WQ.js.map +1 -0
- package/dist/chunk-LVPXFDRY.js +145 -0
- package/dist/chunk-LVPXFDRY.js.map +1 -0
- package/dist/chunk-LWM3GQX2.js +89 -0
- package/dist/chunk-LWM3GQX2.js.map +1 -0
- package/dist/chunk-MCI6Y2QP.js +61 -0
- package/dist/chunk-MCI6Y2QP.js.map +1 -0
- package/dist/chunk-NQLHTDVA.js +209 -0
- package/dist/chunk-NQLHTDVA.js.map +1 -0
- package/dist/chunk-ODYLHCQD.js +87 -0
- package/dist/chunk-ODYLHCQD.js.map +1 -0
- package/dist/chunk-OJOTDNKG.js +69 -0
- package/dist/chunk-OJOTDNKG.js.map +1 -0
- package/dist/chunk-OVYSIME4.js +63 -0
- package/dist/chunk-OVYSIME4.js.map +1 -0
- package/dist/chunk-PNXD4FUW.js +199 -0
- package/dist/chunk-PNXD4FUW.js.map +1 -0
- package/dist/chunk-PQ7EVMOK.js +209 -0
- package/dist/chunk-PQ7EVMOK.js.map +1 -0
- package/dist/chunk-PT5BQZPO.js +124 -0
- package/dist/chunk-PT5BQZPO.js.map +1 -0
- package/dist/chunk-PV45TKNY.js +217 -0
- package/dist/chunk-PV45TKNY.js.map +1 -0
- package/dist/chunk-RDCEN45M.js +89 -0
- package/dist/chunk-RDCEN45M.js.map +1 -0
- package/dist/chunk-RYBQ4OMI.js +199 -0
- package/dist/chunk-RYBQ4OMI.js.map +1 -0
- package/dist/chunk-SBJOKO35.js +125 -0
- package/dist/chunk-SBJOKO35.js.map +1 -0
- package/dist/chunk-SPB56SRF.js +199 -0
- package/dist/chunk-SPB56SRF.js.map +1 -0
- package/dist/chunk-VGDK7BHK.js +198 -0
- package/dist/chunk-VGDK7BHK.js.map +1 -0
- package/dist/chunk-WQEMCAKF.js +198 -0
- package/dist/chunk-WQEMCAKF.js.map +1 -0
- package/dist/chunk-XK3725XB.js +87 -0
- package/dist/chunk-XK3725XB.js.map +1 -0
- package/dist/chunk-XQUM7KZW.js +29 -0
- package/dist/chunk-XQUM7KZW.js.map +1 -0
- package/dist/chunk-XXSZHE7S.js +217 -0
- package/dist/chunk-XXSZHE7S.js.map +1 -0
- package/dist/chunk-XYJ6JLAZ.js +124 -0
- package/dist/chunk-XYJ6JLAZ.js.map +1 -0
- package/dist/chunk-YLFGGCST.js +68 -0
- package/dist/chunk-YLFGGCST.js.map +1 -0
- package/dist/chunk-YXPMFEO5.js +151 -0
- package/dist/chunk-YXPMFEO5.js.map +1 -0
- package/dist/chunk-ZBN7YZEV.js +215 -0
- package/dist/chunk-ZBN7YZEV.js.map +1 -0
- package/dist/chunk-ZS44RD54.js +363 -0
- package/dist/chunk-ZS44RD54.js.map +1 -0
- package/dist/context/index.js +5 -5
- package/dist/index.cjs +31 -8
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +65 -30
- package/dist/index.js +145 -145
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/index.js +18 -18
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-comp.js +4 -4
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-body.js +11 -11
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-footer.js +2 -2
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-header.js +3 -3
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-layout.js +2 -2
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-radio.js +6 -6
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-satisfaction-option.js +5 -5
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-satisfaction-text.js +5 -5
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-text.js +5 -5
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/complete-review.js +4 -4
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/index.js +21 -21
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/start-review.js +6 -6
- package/dist/molecules/curriculumV2/CurriculumContents/curriculum-ai-traning.js +3 -3
- package/dist/molecules/curriculumV2/CurriculumContents/curriculum-review.js +23 -23
- package/dist/molecules/curriculumV2/CurriculumContents/index.js +26 -26
- package/dist/molecules/curriculumV2/CurriculumSidebar/Items/curriculum-item-title.js +2 -2
- package/dist/molecules/curriculumV2/CurriculumSidebar/Items/section-item.js +4 -4
- package/dist/molecules/curriculumV2/CurriculumSidebar/index.js +8 -8
- package/dist/molecules/curriculumV2/CurriculumSidebar/sidebar-item.js +6 -6
- package/dist/molecules/curriculumV2/curriculum-sub-nav.js +4 -4
- package/dist/molecules/curriculumV2/curriculum-v2-layout.js +2 -2
- package/dist/molecules/curriculumV2/index.js +36 -36
- package/dist/molecules/date-picker/date-picker-button.js +6 -6
- package/dist/molecules/date-picker/index.js +5 -5
- package/dist/molecules/download-card.js +2 -2
- package/dist/molecules/dynamic-field.js +5 -5
- package/dist/molecules/dynamic-form.js +6 -6
- package/dist/molecules/expand-table/index.cjs +31 -8
- package/dist/molecules/expand-table/index.cjs.map +1 -1
- package/dist/molecules/expand-table/index.d.cts +2 -0
- package/dist/molecules/expand-table/index.d.ts +2 -0
- package/dist/molecules/expand-table/index.js +5 -5
- package/dist/molecules/force-refresh.js +2 -2
- package/dist/molecules/ghost-post.js +4 -4
- package/dist/molecules/index.cjs +31 -8
- package/dist/molecules/index.cjs.map +1 -1
- package/dist/molecules/index.js +73 -73
- package/dist/molecules/learning-post.js +6 -6
- package/dist/molecules/navigation.js +3 -3
- package/dist/molecules/one-on-one-guide-list.js +3 -3
- package/dist/molecules/stepper.js +4 -4
- package/dist/molecules/tag-selector.js +5 -5
- package/dist/molecules/time-select.js +1 -1
- package/dist/utils/index.js +3 -3
- package/package.json +1 -1
- package/src/atoms/pagination.tsx +1 -1
- package/src/molecules/expand-table/index.tsx +105 -83
|
@@ -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
|
+
Inset
|
|
9
|
+
} from "./chunk-XQOL7UBI.js";
|
|
10
|
+
import {
|
|
11
|
+
Heading
|
|
12
|
+
} from "./chunk-BESTU2AY.js";
|
|
13
|
+
import {
|
|
14
|
+
DropdownMenu
|
|
15
|
+
} from "./chunk-D4U2MCJG.js";
|
|
16
|
+
import {
|
|
17
|
+
Card
|
|
18
|
+
} from "./chunk-RP2RGCAW.js";
|
|
19
|
+
import {
|
|
20
|
+
Box
|
|
21
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
22
|
+
import {
|
|
23
|
+
Typo
|
|
24
|
+
} from "./chunk-PMJIFLDT.js";
|
|
25
|
+
import {
|
|
26
|
+
Flex
|
|
27
|
+
} from "./chunk-25HMMI7R.js";
|
|
28
|
+
import {
|
|
29
|
+
Button
|
|
30
|
+
} from "./chunk-ZVDAEY5Q.js";
|
|
31
|
+
import {
|
|
32
|
+
DotsVerticalIcon
|
|
33
|
+
} from "./chunk-W5TPOFOO.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
|
+
maxHeight: "450px"
|
|
59
|
+
},
|
|
60
|
+
children: [
|
|
61
|
+
/* @__PURE__ */ jsx(Inset, { clip: "padding-box", pb: "0", side: "top", children: /* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(
|
|
62
|
+
Box,
|
|
63
|
+
{
|
|
64
|
+
height: "210px",
|
|
65
|
+
style: {
|
|
66
|
+
backgroundImage: `url(${imageSrc})`,
|
|
67
|
+
backgroundSize: "cover",
|
|
68
|
+
backgroundPosition: "center"
|
|
69
|
+
},
|
|
70
|
+
width: "100%"
|
|
71
|
+
}
|
|
72
|
+
) }) }),
|
|
73
|
+
/* @__PURE__ */ jsxs(Flex, { direction: "column", p: "4", pb: "3", 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-GCDGKRQQ.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.ReactNode => {\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 maxHeight: '450px',\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;AAuDtB,cAaF,YAbE;AA5BL,IAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,GACA,QACoB;AACpB,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,UACR,WAAW;AAAA,QACb;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,169 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Avatar
|
|
3
|
+
} from "./chunk-K36TPMKL.js";
|
|
4
|
+
import {
|
|
5
|
+
Typo
|
|
6
|
+
} from "./chunk-PMJIFLDT.js";
|
|
7
|
+
import {
|
|
8
|
+
Flex
|
|
9
|
+
} from "./chunk-25HMMI7R.js";
|
|
10
|
+
import {
|
|
11
|
+
CheckIcon
|
|
12
|
+
} from "./chunk-W5TPOFOO.js";
|
|
13
|
+
|
|
14
|
+
// src/molecules/stepper.tsx
|
|
15
|
+
import { createContext, Children, useContext, useMemo } from "react";
|
|
16
|
+
import { Separator } from "@radix-ui/themes";
|
|
17
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
18
|
+
var StepContext = createContext({
|
|
19
|
+
active: false,
|
|
20
|
+
completed: false,
|
|
21
|
+
index: 0
|
|
22
|
+
});
|
|
23
|
+
function Root(props) {
|
|
24
|
+
const {
|
|
25
|
+
activeStep = 0,
|
|
26
|
+
children,
|
|
27
|
+
width,
|
|
28
|
+
minWidth,
|
|
29
|
+
maxWidth,
|
|
30
|
+
direction = "vertical"
|
|
31
|
+
} = props;
|
|
32
|
+
return /* @__PURE__ */ jsx(
|
|
33
|
+
Flex,
|
|
34
|
+
{
|
|
35
|
+
gap: "3",
|
|
36
|
+
style: {
|
|
37
|
+
width,
|
|
38
|
+
minWidth,
|
|
39
|
+
maxWidth
|
|
40
|
+
},
|
|
41
|
+
children: Children.map(children, (child, index) => {
|
|
42
|
+
return /* @__PURE__ */ jsx(
|
|
43
|
+
StepContext.Provider,
|
|
44
|
+
{
|
|
45
|
+
value: {
|
|
46
|
+
active: index === activeStep,
|
|
47
|
+
completed: index < activeStep,
|
|
48
|
+
index,
|
|
49
|
+
direction
|
|
50
|
+
},
|
|
51
|
+
children: child
|
|
52
|
+
}
|
|
53
|
+
);
|
|
54
|
+
})
|
|
55
|
+
}
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
function Step(props) {
|
|
59
|
+
const { Icon, children } = props;
|
|
60
|
+
const {
|
|
61
|
+
active,
|
|
62
|
+
completed,
|
|
63
|
+
index,
|
|
64
|
+
direction = "vertical"
|
|
65
|
+
} = useContext(StepContext);
|
|
66
|
+
const connector = index > 0 ? /* @__PURE__ */ jsx(
|
|
67
|
+
Separator,
|
|
68
|
+
{
|
|
69
|
+
style: {
|
|
70
|
+
width: `calc(100% - 40px)`,
|
|
71
|
+
position: "absolute",
|
|
72
|
+
top: 16,
|
|
73
|
+
right: `calc(50% + 26px)`
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
) : null;
|
|
77
|
+
const InnerStep = useMemo(() => {
|
|
78
|
+
if (active) {
|
|
79
|
+
return ActiveStep;
|
|
80
|
+
}
|
|
81
|
+
if (completed) {
|
|
82
|
+
return CompleteStep;
|
|
83
|
+
}
|
|
84
|
+
return IncompleteStep;
|
|
85
|
+
}, [completed, active]);
|
|
86
|
+
return /* @__PURE__ */ jsxs(
|
|
87
|
+
Flex,
|
|
88
|
+
{
|
|
89
|
+
align: "center",
|
|
90
|
+
direction: direction === "horizontal" ? "row" : "column",
|
|
91
|
+
gap: "4",
|
|
92
|
+
position: "relative",
|
|
93
|
+
style: { flex: 1 },
|
|
94
|
+
children: [
|
|
95
|
+
connector,
|
|
96
|
+
/* @__PURE__ */ jsx(InnerStep, { Icon, children })
|
|
97
|
+
]
|
|
98
|
+
}
|
|
99
|
+
);
|
|
100
|
+
}
|
|
101
|
+
function CompleteStep(props) {
|
|
102
|
+
const { Icon, children } = props;
|
|
103
|
+
const { completed, active } = useContext(StepContext);
|
|
104
|
+
const background = "var(--accent-a4)";
|
|
105
|
+
const border = "1px solid var(--accent-7)";
|
|
106
|
+
const color = "var(--accent-contrast)";
|
|
107
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
108
|
+
Icon ? /* @__PURE__ */ jsx(Icon, { active, completed }) : /* @__PURE__ */ jsx(
|
|
109
|
+
Avatar,
|
|
110
|
+
{
|
|
111
|
+
fallback: /* @__PURE__ */ jsx(CheckIcon, { fill: color, height: 16, width: 16 }),
|
|
112
|
+
radius: "full",
|
|
113
|
+
size: "medium",
|
|
114
|
+
style: {
|
|
115
|
+
border,
|
|
116
|
+
background
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
),
|
|
120
|
+
/* @__PURE__ */ jsx(Typo, { align: "center", variant: "caption", children })
|
|
121
|
+
] });
|
|
122
|
+
}
|
|
123
|
+
function IncompleteStep(props) {
|
|
124
|
+
const { Icon, children } = props;
|
|
125
|
+
const { completed, active, index } = useContext(StepContext);
|
|
126
|
+
const background = "var(--gray-5)";
|
|
127
|
+
const color = "var(--gray-a11)";
|
|
128
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
129
|
+
Icon ? /* @__PURE__ */ jsx(Icon, { active, completed }) : /* @__PURE__ */ jsx(
|
|
130
|
+
Avatar,
|
|
131
|
+
{
|
|
132
|
+
fallback: /* @__PURE__ */ jsx(Typo, { style: { color }, children: index + 1 }),
|
|
133
|
+
radius: "full",
|
|
134
|
+
size: "medium",
|
|
135
|
+
style: {
|
|
136
|
+
background
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
),
|
|
140
|
+
/* @__PURE__ */ jsx(Typo, { align: "center", style: { color }, variant: "caption", children })
|
|
141
|
+
] });
|
|
142
|
+
}
|
|
143
|
+
function ActiveStep(props) {
|
|
144
|
+
const { Icon, children } = props;
|
|
145
|
+
const { completed, active, index } = useContext(StepContext);
|
|
146
|
+
const background = "var(--accent-10)";
|
|
147
|
+
const color = "var(--accent-contrast)";
|
|
148
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
149
|
+
Icon ? /* @__PURE__ */ jsx(Icon, { active, completed }) : /* @__PURE__ */ jsx(
|
|
150
|
+
Avatar,
|
|
151
|
+
{
|
|
152
|
+
fallback: /* @__PURE__ */ jsx(Typo, { style: { color }, weight: "bold", children: index + 1 }),
|
|
153
|
+
radius: "full",
|
|
154
|
+
size: "medium",
|
|
155
|
+
style: { background }
|
|
156
|
+
}
|
|
157
|
+
),
|
|
158
|
+
/* @__PURE__ */ jsx(Typo, { align: "center", variant: "caption", weight: "bold", children })
|
|
159
|
+
] });
|
|
160
|
+
}
|
|
161
|
+
var Stepper = {
|
|
162
|
+
Root,
|
|
163
|
+
Step
|
|
164
|
+
};
|
|
165
|
+
|
|
166
|
+
export {
|
|
167
|
+
Stepper
|
|
168
|
+
};
|
|
169
|
+
//# sourceMappingURL=chunk-GROWIYD2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/stepper.tsx"],"sourcesContent":["import React, { createContext, Children, useContext, useMemo } from 'react';\nimport { Separator } from '@radix-ui/themes';\nimport { Flex } from '../atoms/flex';\nimport { Avatar } from '../atoms/avatar';\nimport { CheckIcon } from '../icon';\nimport { Typo } from '../atoms/typo';\n\ninterface StepState extends Pick<StepperProps, 'direction'> {\n active: boolean;\n completed: boolean;\n index: number;\n}\n\nconst StepContext = createContext<StepState>({\n active: false,\n completed: false,\n index: 0,\n});\n\ninterface StepperProps {\n // 활성화된 스텝 인덱스. 0부터 시작\n activeStep?: number;\n children?: React.ReactNode | React.ReactNode[];\n width?: string;\n maxWidth?: string;\n minWidth?: string;\n /** icon과 children의 배치 방향. 기본 값 vertical */\n direction?: 'horizontal' | 'vertical';\n}\n\nfunction Root(props: StepperProps): React.ReactNode {\n const {\n activeStep = 0,\n children,\n width,\n minWidth,\n maxWidth,\n direction = 'vertical',\n } = props;\n\n return (\n <Flex\n gap=\"3\"\n style={{\n width,\n minWidth,\n maxWidth,\n }}\n >\n {Children.map(children, (child, index) => {\n return (\n <StepContext.Provider\n value={{\n active: index === activeStep,\n completed: index < activeStep,\n index,\n direction,\n }}\n >\n {child}\n </StepContext.Provider>\n );\n })}\n </Flex>\n );\n}\n\ninterface StepProps {\n children?: React.ReactNode;\n /** 아이콘 커스텀 필요시 사용 */\n Icon?: (args: { completed: boolean; active: boolean }) => React.ReactNode;\n}\n\nfunction Step(props: StepProps): React.ReactNode {\n const { Icon, children } = props;\n const {\n active,\n completed,\n index,\n direction = 'vertical',\n } = useContext(StepContext);\n\n const connector =\n index > 0 ? (\n <Separator\n style={{\n width: `calc(100% - 40px)`,\n position: 'absolute',\n top: 16,\n right: `calc(50% + 26px)`,\n }}\n />\n ) : null;\n\n const InnerStep = useMemo<(props: StepProps) => React.ReactNode>(() => {\n if (active) {\n return ActiveStep;\n }\n if (completed) {\n return CompleteStep;\n }\n return IncompleteStep;\n }, [completed, active]);\n\n return (\n <Flex\n align=\"center\"\n direction={direction === 'horizontal' ? 'row' : 'column'}\n gap=\"4\"\n position=\"relative\"\n style={{ flex: 1 }}\n >\n {connector}\n <InnerStep Icon={Icon}>{children}</InnerStep>\n </Flex>\n );\n}\n\nfunction CompleteStep(props: StepProps): React.ReactNode {\n const { Icon, children } = props;\n const { completed, active } = useContext(StepContext);\n const background = 'var(--accent-a4)';\n const border = '1px solid var(--accent-7)';\n const color = 'var(--accent-contrast)';\n\n return (\n <>\n {Icon ? (\n <Icon active={active} completed={completed} />\n ) : (\n <Avatar\n fallback={<CheckIcon fill={color} height={16} width={16} />}\n radius=\"full\"\n size=\"medium\"\n style={{\n border,\n background,\n }}\n />\n )}\n <Typo align=\"center\" variant=\"caption\">\n {children}\n </Typo>\n </>\n );\n}\n\nfunction IncompleteStep(props: StepProps): React.ReactNode {\n const { Icon, children } = props;\n const { completed, active, index } = useContext(StepContext);\n const background = 'var(--gray-5)';\n const color = 'var(--gray-a11)';\n return (\n <>\n {Icon ? (\n <Icon active={active} completed={completed} />\n ) : (\n <Avatar\n fallback={<Typo style={{ color }}>{index + 1}</Typo>}\n radius=\"full\"\n size=\"medium\"\n style={{\n background,\n }}\n />\n )}\n <Typo align=\"center\" style={{ color }} variant=\"caption\">\n {children}\n </Typo>\n </>\n );\n}\n\nfunction ActiveStep(props: StepProps): React.ReactNode {\n const { Icon, children } = props;\n const { completed, active, index } = useContext(StepContext);\n const background = 'var(--accent-10)';\n const color = 'var(--accent-contrast)';\n\n return (\n <>\n {Icon ? (\n <Icon active={active} completed={completed} />\n ) : (\n <Avatar\n fallback={\n <Typo style={{ color }} weight=\"bold\">\n {index + 1}\n </Typo>\n }\n radius=\"full\"\n size=\"medium\"\n style={{ background }}\n />\n )}\n <Typo align=\"center\" variant=\"caption\" weight=\"bold\">\n {children}\n </Typo>\n </>\n );\n}\n\nexport const Stepper = {\n Root,\n Step,\n};\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Separator
|
|
3
|
+
} from "./chunk-HYITAA4J.js";
|
|
4
|
+
import {
|
|
5
|
+
Popover
|
|
6
|
+
} from "./chunk-5AVBYDPB.js";
|
|
7
|
+
import {
|
|
8
|
+
Grid
|
|
9
|
+
} from "./chunk-EGEQY3KT.js";
|
|
10
|
+
import {
|
|
11
|
+
Heading
|
|
12
|
+
} from "./chunk-BESTU2AY.js";
|
|
13
|
+
import {
|
|
14
|
+
IconButton
|
|
15
|
+
} from "./chunk-XK6VEVOK.js";
|
|
16
|
+
import {
|
|
17
|
+
Card
|
|
18
|
+
} from "./chunk-RP2RGCAW.js";
|
|
19
|
+
import {
|
|
20
|
+
Collapse
|
|
21
|
+
} from "./chunk-NFDQJVFA.js";
|
|
22
|
+
import {
|
|
23
|
+
Badge
|
|
24
|
+
} from "./chunk-U3BQT7ZO.js";
|
|
25
|
+
import {
|
|
26
|
+
Box
|
|
27
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
28
|
+
import {
|
|
29
|
+
Typo
|
|
30
|
+
} from "./chunk-PMJIFLDT.js";
|
|
31
|
+
import {
|
|
32
|
+
Flex
|
|
33
|
+
} from "./chunk-25HMMI7R.js";
|
|
34
|
+
import {
|
|
35
|
+
Button
|
|
36
|
+
} from "./chunk-ZVDAEY5Q.js";
|
|
37
|
+
import {
|
|
38
|
+
ChevronDownIcon,
|
|
39
|
+
ChevronUpIcon,
|
|
40
|
+
Pencil1Icon,
|
|
41
|
+
RocketIcon,
|
|
42
|
+
TrashIcon
|
|
43
|
+
} from "./chunk-W5TPOFOO.js";
|
|
44
|
+
import {
|
|
45
|
+
__spreadValues
|
|
46
|
+
} from "./chunk-CRTRMMJ7.js";
|
|
47
|
+
|
|
48
|
+
// src/app/platform/goal-manage-card-read.tsx
|
|
49
|
+
import { useCallback, useMemo, useState } from "react";
|
|
50
|
+
import { format, startOfDay } from "date-fns";
|
|
51
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
52
|
+
function GoalManageCardRead(props) {
|
|
53
|
+
const {
|
|
54
|
+
title,
|
|
55
|
+
dueDate,
|
|
56
|
+
completed,
|
|
57
|
+
expectedEffect,
|
|
58
|
+
huddle,
|
|
59
|
+
onClickDelete,
|
|
60
|
+
onClickEdit,
|
|
61
|
+
defaultOpen,
|
|
62
|
+
onClickIncomplete,
|
|
63
|
+
onClickComplete
|
|
64
|
+
} = props;
|
|
65
|
+
const [open, setOpen] = useState(Boolean(defaultOpen));
|
|
66
|
+
const onClickOpen = useCallback(() => {
|
|
67
|
+
setOpen((p) => !p);
|
|
68
|
+
}, []);
|
|
69
|
+
const icon = open ? /* @__PURE__ */ jsx(ChevronUpIcon, {}) : /* @__PURE__ */ jsx(ChevronDownIcon, {});
|
|
70
|
+
const badgeMeta = useMemo(() => {
|
|
71
|
+
if (!completed && dueDate) {
|
|
72
|
+
if (dueDate >= startOfDay(/* @__PURE__ */ new Date()))
|
|
73
|
+
return {
|
|
74
|
+
color: "success",
|
|
75
|
+
children: "\uC9C4\uD589 \uC911"
|
|
76
|
+
};
|
|
77
|
+
return { color: "error", children: "\uBBF8\uB2EC\uC131" };
|
|
78
|
+
}
|
|
79
|
+
return null;
|
|
80
|
+
}, [completed, dueDate]);
|
|
81
|
+
const renderSubTitle = useCallback((subTitle) => {
|
|
82
|
+
return /* @__PURE__ */ jsx(Heading, { mb: "2", variant: "heading5", children: subTitle });
|
|
83
|
+
}, []);
|
|
84
|
+
const renderSubContent = useCallback((content) => {
|
|
85
|
+
return /* @__PURE__ */ jsx(Typo, { as: "p", color: "gray", children: content });
|
|
86
|
+
}, []);
|
|
87
|
+
const renderCompleteButton = useCallback(() => {
|
|
88
|
+
if (completed) {
|
|
89
|
+
return /* @__PURE__ */ jsx(Button, { onClick: onClickIncomplete, size: "small", variant: "surface", children: "\uC9C4\uD589\uC911\uC778 \uACFC\uC81C\uB85C \uB3CC\uB824\uB193\uAE30" });
|
|
90
|
+
}
|
|
91
|
+
return /* @__PURE__ */ jsxs(Popover.Root, { children: [
|
|
92
|
+
/* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsxs(Button, { size: "small", children: [
|
|
93
|
+
/* @__PURE__ */ jsx(RocketIcon, {}),
|
|
94
|
+
"\uB2EC\uC131\uD558\uAE30"
|
|
95
|
+
] }) }),
|
|
96
|
+
/* @__PURE__ */ jsxs(Popover.Content, { children: [
|
|
97
|
+
/* @__PURE__ */ jsx(Typo, { color: "gray", children: "\uBAA9\uD45C\uB97C \uB2EC\uC131\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?" }),
|
|
98
|
+
/* @__PURE__ */ jsxs(Flex, { gap: "3", justify: "end", mt: "3", children: [
|
|
99
|
+
/* @__PURE__ */ jsx(Popover.Close, { children: /* @__PURE__ */ jsx(Button, { color: "gray", size: "small", variant: "outline", children: "\uC544\uB2C8\uC694" }) }),
|
|
100
|
+
/* @__PURE__ */ jsx(Popover.Close, { children: /* @__PURE__ */ jsx(Button, { onClick: onClickComplete, size: "small", children: "\uC608" }) })
|
|
101
|
+
] })
|
|
102
|
+
] })
|
|
103
|
+
] });
|
|
104
|
+
}, [completed, onClickIncomplete, onClickComplete]);
|
|
105
|
+
return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(Grid, { align: "center", columns: "auto 1fr", gapX: "3", children: [
|
|
106
|
+
/* @__PURE__ */ jsx(IconButton, { onClick: onClickOpen, variant: "ghost", children: icon }),
|
|
107
|
+
/* @__PURE__ */ jsx(Heading, { variant: "heading4", children: title }),
|
|
108
|
+
/* @__PURE__ */ jsxs(Flex, { align: "center", gridColumnStart: "2", justify: "between", mt: "2", children: [
|
|
109
|
+
/* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", children: [
|
|
110
|
+
badgeMeta ? /* @__PURE__ */ jsx(Badge, __spreadValues({}, badgeMeta)) : null,
|
|
111
|
+
/* @__PURE__ */ jsx(Typo, { color: "gray", children: dueDate ? format(dueDate, "yyyy\uB144 MM\uC6D4 dd\uC77C") : null })
|
|
112
|
+
] }),
|
|
113
|
+
renderCompleteButton()
|
|
114
|
+
] }),
|
|
115
|
+
open ? /* @__PURE__ */ jsx(
|
|
116
|
+
Separator,
|
|
117
|
+
{
|
|
118
|
+
mb: "4",
|
|
119
|
+
mt: "4",
|
|
120
|
+
size: "4",
|
|
121
|
+
style: { gridColumnStart: "span 2" }
|
|
122
|
+
}
|
|
123
|
+
) : null,
|
|
124
|
+
/* @__PURE__ */ jsx(Box, { gridColumnStart: "2", p: "0", children: /* @__PURE__ */ jsxs(Collapse, { open, children: [
|
|
125
|
+
/* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "5", children: [
|
|
126
|
+
/* @__PURE__ */ jsxs(Box, { children: [
|
|
127
|
+
renderSubTitle(
|
|
128
|
+
"\uD574\uB2F9 \uBAA9\uD45C\uB97C \uB2EC\uC131\uD558\uBA74, \uC544\uB798\uC640 \uAC19\uC740 \uACB0\uACFC\uB97C \uC5BB\uC744 \uC218 \uC788\uC2B5\uB2C8\uB2E4"
|
|
129
|
+
),
|
|
130
|
+
renderSubContent(expectedEffect)
|
|
131
|
+
] }),
|
|
132
|
+
/* @__PURE__ */ jsxs(Box, { children: [
|
|
133
|
+
renderSubTitle(
|
|
134
|
+
"\uBAA9\uD45C\uB97C \uC774\uB8E8\uAE30\uAE4C\uC9C0 \uBC29\uD574\uAC00 \uB420 \uC218 \uC788\uB294 \uC694\uC18C\uB4E4\uC740 \uB2E4\uC74C\uACFC \uAC19\uC2B5\uB2C8\uB2E4"
|
|
135
|
+
),
|
|
136
|
+
renderSubContent(huddle)
|
|
137
|
+
] })
|
|
138
|
+
] }),
|
|
139
|
+
/* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", justify: "end", mt: "3", children: [
|
|
140
|
+
/* @__PURE__ */ jsxs(Popover.Root, { children: [
|
|
141
|
+
/* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsxs(Button, { color: "gray", size: "small", variant: "ghost", children: [
|
|
142
|
+
/* @__PURE__ */ jsx(TrashIcon, {}),
|
|
143
|
+
"\uC0AD\uC81C\uD558\uAE30"
|
|
144
|
+
] }) }),
|
|
145
|
+
/* @__PURE__ */ jsxs(Popover.Content, { children: [
|
|
146
|
+
/* @__PURE__ */ jsx(Typo, { color: "gray", children: "\uBAA9\uD45C\uB97C \uC0AD\uC81C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?" }),
|
|
147
|
+
/* @__PURE__ */ jsxs(Flex, { gap: "3", justify: "end", mt: "3", children: [
|
|
148
|
+
/* @__PURE__ */ jsx(Popover.Close, { children: /* @__PURE__ */ jsx(Button, { color: "gray", size: "small", variant: "outline", children: "\uC544\uB2C8\uC694" }) }),
|
|
149
|
+
/* @__PURE__ */ jsx(Popover.Close, { children: /* @__PURE__ */ jsx(Button, { onClick: onClickDelete, size: "small", children: "\uC608" }) })
|
|
150
|
+
] })
|
|
151
|
+
] })
|
|
152
|
+
] }),
|
|
153
|
+
/* @__PURE__ */ jsxs(Button, { onClick: onClickEdit, size: "small", variant: "surface", children: [
|
|
154
|
+
/* @__PURE__ */ jsx(Pencil1Icon, {}),
|
|
155
|
+
"\uC218\uC815\uD558\uAE30"
|
|
156
|
+
] })
|
|
157
|
+
] })
|
|
158
|
+
] }) })
|
|
159
|
+
] }) });
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
export {
|
|
163
|
+
GoalManageCardRead
|
|
164
|
+
};
|
|
165
|
+
//# sourceMappingURL=chunk-HPG6F7VM.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/app/platform/goal-manage-card-read.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from 'react';\nimport { format, startOfDay } from 'date-fns';\nimport type { BadgeProps } from '../../atoms';\nimport {\n Box,\n Button,\n Card,\n Collapse,\n Flex,\n Heading,\n Badge,\n Typo,\n Popover,\n Grid,\n Separator,\n IconButton,\n} from '../../atoms';\nimport {\n ChevronDownIcon,\n ChevronUpIcon,\n Pencil1Icon,\n RocketIcon,\n TrashIcon,\n} from '../../icon';\n\nexport interface GoalManageCardProps {\n defaultOpen?: boolean;\n title?: string;\n dueDate?: Date;\n completed?: boolean;\n expectedEffect?: string;\n huddle?: string;\n onClickDelete?: () => void;\n onClickEdit?: () => void;\n onClickComplete?: () => void;\n onClickIncomplete?: () => void;\n}\n\nexport function GoalManageCardRead(\n props: GoalManageCardProps\n): React.ReactNode {\n const {\n title,\n dueDate,\n completed,\n expectedEffect,\n huddle,\n onClickDelete,\n onClickEdit,\n defaultOpen,\n onClickIncomplete,\n onClickComplete,\n } = props;\n const [open, setOpen] = useState<boolean>(Boolean(defaultOpen));\n const onClickOpen = useCallback(() => {\n setOpen((p) => !p);\n }, []);\n\n const icon = open ? <ChevronUpIcon /> : <ChevronDownIcon />;\n\n const badgeMeta = useMemo<BadgeProps | null>(() => {\n if (!completed && dueDate) {\n if (dueDate >= startOfDay(new Date()))\n return {\n color: 'success',\n children: '진행 중',\n } as const;\n return { color: 'error', children: '미달성' };\n }\n return null;\n }, [completed, dueDate]);\n\n const renderSubTitle = useCallback((subTitle: string) => {\n return (\n <Heading mb=\"2\" variant=\"heading5\">\n {subTitle}\n </Heading>\n );\n }, []);\n\n const renderSubContent = useCallback((content?: string) => {\n return (\n <Typo as=\"p\" color=\"gray\">\n {content}\n </Typo>\n );\n }, []);\n\n const renderCompleteButton = useCallback(() => {\n if (completed) {\n return (\n <Button onClick={onClickIncomplete} size=\"small\" variant=\"surface\">\n 진행중인 과제로 돌려놓기\n </Button>\n );\n }\n\n return (\n <Popover.Root>\n <Popover.Trigger>\n <Button size=\"small\">\n <RocketIcon />\n 달성하기\n </Button>\n </Popover.Trigger>\n <Popover.Content>\n <Typo color=\"gray\">목표를 달성하시겠습니까?</Typo>\n <Flex gap=\"3\" justify=\"end\" mt=\"3\">\n <Popover.Close>\n <Button color=\"gray\" size=\"small\" variant=\"outline\">\n 아니요\n </Button>\n </Popover.Close>\n <Popover.Close>\n <Button onClick={onClickComplete} size=\"small\">\n 예\n </Button>\n </Popover.Close>\n </Flex>\n </Popover.Content>\n </Popover.Root>\n );\n }, [completed, onClickIncomplete, onClickComplete]);\n\n return (\n <Card>\n <Grid align=\"center\" columns=\"auto 1fr\" gapX=\"3\">\n <IconButton onClick={onClickOpen} variant=\"ghost\">\n {icon}\n </IconButton>\n <Heading variant=\"heading4\">{title}</Heading>\n\n <Flex align=\"center\" gridColumnStart=\"2\" justify=\"between\" mt=\"2\">\n <Flex align=\"center\" gap=\"3\">\n {badgeMeta ? <Badge {...badgeMeta} /> : null}\n <Typo color=\"gray\">\n {dueDate ? format(dueDate, 'yyyy년 MM월 dd일') : null}\n </Typo>\n </Flex>\n {renderCompleteButton()}\n </Flex>\n {open ? (\n <Separator\n mb=\"4\"\n mt=\"4\"\n size=\"4\"\n style={{ gridColumnStart: 'span 2' }}\n />\n ) : null}\n <Box gridColumnStart=\"2\" p=\"0\">\n <Collapse open={open}>\n <Flex direction=\"column\" gap=\"5\">\n <Box>\n {renderSubTitle(\n '해당 목표를 달성하면, 아래와 같은 결과를 얻을 수 있습니다'\n )}\n {renderSubContent(expectedEffect)}\n </Box>\n <Box>\n {renderSubTitle(\n '목표를 이루기까지 방해가 될 수 있는 요소들은 다음과 같습니다'\n )}\n {renderSubContent(huddle)}\n </Box>\n </Flex>\n <Flex align=\"center\" gap=\"3\" justify=\"end\" mt=\"3\">\n <Popover.Root>\n <Popover.Trigger>\n <Button color=\"gray\" size=\"small\" variant=\"ghost\">\n <TrashIcon />\n 삭제하기\n </Button>\n </Popover.Trigger>\n <Popover.Content>\n <Typo color=\"gray\">목표를 삭제하시겠습니까?</Typo>\n <Flex gap=\"3\" justify=\"end\" mt=\"3\">\n <Popover.Close>\n <Button color=\"gray\" size=\"small\" variant=\"outline\">\n 아니요\n </Button>\n </Popover.Close>\n <Popover.Close>\n <Button onClick={onClickDelete} size=\"small\">\n 예\n </Button>\n </Popover.Close>\n </Flex>\n </Popover.Content>\n </Popover.Root>\n <Button onClick={onClickEdit} size=\"small\" variant=\"surface\">\n <Pencil1Icon />\n 수정하기\n </Button>\n </Flex>\n </Collapse>\n </Box>\n </Grid>\n </Card>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import {
|
|
2
|
+
getCurriculumIcon,
|
|
3
|
+
getCurriculumQuestionIconColor
|
|
4
|
+
} from "./chunk-RYK2ILB2.js";
|
|
5
|
+
import {
|
|
6
|
+
Flex
|
|
7
|
+
} from "./chunk-25HMMI7R.js";
|
|
8
|
+
import {
|
|
9
|
+
Box
|
|
10
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
11
|
+
import {
|
|
12
|
+
Typo
|
|
13
|
+
} from "./chunk-PMJIFLDT.js";
|
|
14
|
+
|
|
15
|
+
// src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-comp.tsx
|
|
16
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
17
|
+
function ReviewQuestionContentHeader({
|
|
18
|
+
type,
|
|
19
|
+
title,
|
|
20
|
+
question,
|
|
21
|
+
icon
|
|
22
|
+
}) {
|
|
23
|
+
const Icon = getCurriculumIcon({ type, icon });
|
|
24
|
+
return /* @__PURE__ */ jsxs(Box, { children: [
|
|
25
|
+
/* @__PURE__ */ jsxs(Flex, { gap: "2", mb: "3", children: [
|
|
26
|
+
/* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
|
|
27
|
+
Icon,
|
|
28
|
+
{
|
|
29
|
+
color: getCurriculumQuestionIconColor(type),
|
|
30
|
+
height: "16",
|
|
31
|
+
width: "16"
|
|
32
|
+
}
|
|
33
|
+
) }),
|
|
34
|
+
/* @__PURE__ */ jsx(Typo, { color: "gray", weight: "bold", children: title })
|
|
35
|
+
] }),
|
|
36
|
+
/* @__PURE__ */ jsx(Typo, { as: "p", color: "gray", children: question })
|
|
37
|
+
] });
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
export {
|
|
41
|
+
ReviewQuestionContentHeader
|
|
42
|
+
};
|
|
43
|
+
//# sourceMappingURL=chunk-HQPSFOVV.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-comp.tsx"],"sourcesContent":["import React from 'react';\nimport { Box } from '@/atoms/box';\nimport { Flex } from '@/atoms/flex';\nimport { Typo } from '@/atoms/typo';\nimport { getCurriculumIcon , getCurriculumQuestionIconColor } from '@/utils/curriculum.utils';\n\ninterface ReviewQuestionContentHeaderProps {\n type: string;\n title: string;\n question: string;\n icon?: string;\n}\n\nexport function ReviewQuestionContentHeader({\n type,\n title,\n question,\n icon,\n}: ReviewQuestionContentHeaderProps): React.ReactNode {\n const Icon = getCurriculumIcon({ type, icon });\n\n return (\n <Box>\n <Flex gap=\"2\" mb=\"3\">\n <Box>\n <Icon\n color={getCurriculumQuestionIconColor(type)}\n height=\"16\"\n width=\"16\"\n />\n </Box>\n <Typo color=\"gray\" weight=\"bold\">\n {title}\n </Typo>\n </Flex>\n <Typo as=\"p\" color=\"gray\">\n {question}\n </Typo>\n </Box>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAuBM,SAEI,KAFJ;AAVC,SAAS,4BAA4B;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsD;AACpD,QAAM,OAAO,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAE7C,SACE,qBAAC,OACC;AAAA,yBAAC,QAAK,KAAI,KAAI,IAAG,KACf;AAAA,0BAAC,OACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,+BAA+B,IAAI;AAAA,UAC1C,QAAO;AAAA,UACP,OAAM;AAAA;AAAA,MACR,GACF;AAAA,MACA,oBAAC,QAAK,OAAM,QAAO,QAAO,QACvB,iBACH;AAAA,OACF;AAAA,IACA,oBAAC,QAAK,IAAG,KAAI,OAAM,QAChB,oBACH;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import {
|
|
2
|
+
curriculum_ai_traning_default
|
|
3
|
+
} from "./chunk-7N6VN2FK.js";
|
|
4
|
+
import {
|
|
5
|
+
curriculum_review_default
|
|
6
|
+
} from "./chunk-E2ISFADW.js";
|
|
7
|
+
import {
|
|
8
|
+
curriculum_video_default
|
|
9
|
+
} from "./chunk-QGKQ3IX7.js";
|
|
10
|
+
import {
|
|
11
|
+
useCurriculumContext
|
|
12
|
+
} from "./chunk-IYQJIEVM.js";
|
|
13
|
+
import {
|
|
14
|
+
Typo
|
|
15
|
+
} from "./chunk-PMJIFLDT.js";
|
|
16
|
+
import {
|
|
17
|
+
Flex
|
|
18
|
+
} from "./chunk-25HMMI7R.js";
|
|
19
|
+
import {
|
|
20
|
+
InfoCircledIcon
|
|
21
|
+
} from "./chunk-W5TPOFOO.js";
|
|
22
|
+
|
|
23
|
+
// src/molecules/curriculumV2/CurriculumContents/index.tsx
|
|
24
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
25
|
+
function CurriculumBody() {
|
|
26
|
+
const { selectedItem, selectedSectionTitle } = useCurriculumContext();
|
|
27
|
+
switch (selectedItem.type) {
|
|
28
|
+
case "video":
|
|
29
|
+
return /* @__PURE__ */ jsx(curriculum_video_default, { item: selectedItem });
|
|
30
|
+
case "review":
|
|
31
|
+
return /* @__PURE__ */ jsx(
|
|
32
|
+
curriculum_review_default,
|
|
33
|
+
{
|
|
34
|
+
item: selectedItem,
|
|
35
|
+
sectionTitle: selectedSectionTitle == null ? void 0 : selectedSectionTitle.title
|
|
36
|
+
}
|
|
37
|
+
);
|
|
38
|
+
case "aiTraining":
|
|
39
|
+
return /* @__PURE__ */ jsx(curriculum_ai_traning_default, { item: selectedItem });
|
|
40
|
+
default:
|
|
41
|
+
return /* @__PURE__ */ jsxs(
|
|
42
|
+
Flex,
|
|
43
|
+
{
|
|
44
|
+
align: "center",
|
|
45
|
+
direction: "column",
|
|
46
|
+
gap: "2",
|
|
47
|
+
height: "100%",
|
|
48
|
+
justify: "center",
|
|
49
|
+
width: "100%",
|
|
50
|
+
children: [
|
|
51
|
+
/* @__PURE__ */ jsx(InfoCircledIcon, { height: 24, width: 24 }),
|
|
52
|
+
/* @__PURE__ */ jsx(Typo, { children: "\uCEE8\uD150\uCE20\uB97C \uB85C\uB529 \uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4" }),
|
|
53
|
+
/* @__PURE__ */ jsx(Typo, { align: "center", color: "gray", variant: "caption", children: `[debug info]
|
|
54
|
+
${JSON.stringify(selectedItem)}` })
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
export {
|
|
62
|
+
CurriculumBody
|
|
63
|
+
};
|
|
64
|
+
//# sourceMappingURL=chunk-I7M6TY5G.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumContents/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Flex } from '@/atoms/flex';\nimport { Typo } from '@/atoms/typo';\nimport { InfoCircledIcon } from '@/icon';\nimport { useCurriculumContext } from '../curriculum-context';\nimport CurriculumVideo from './curriculum-video';\nimport CurriculumReview from './curriculum-review';\nimport CurriculumAiTraning from './curriculum-ai-traning';\n\nexport function CurriculumBody(): React.ReactNode {\n const { selectedItem, selectedSectionTitle } = useCurriculumContext();\n\n switch (selectedItem.type) {\n case 'video':\n return <CurriculumVideo item={selectedItem} />;\n case 'review':\n return (\n <CurriculumReview\n item={selectedItem}\n sectionTitle={selectedSectionTitle?.title}\n />\n );\n case 'aiTraining':\n return <CurriculumAiTraning item={selectedItem}/>\n default:\n return (\n <Flex\n align=\"center\"\n direction=\"column\"\n gap=\"2\"\n height=\"100%\"\n justify=\"center\"\n width=\"100%\"\n >\n <InfoCircledIcon height={24} width={24} />\n <Typo>컨텐츠를 로딩 할 수 없습니다</Typo>\n <Typo align=\"center\" color=\"gray\" variant=\"caption\">\n {`[debug info]\n ${JSON.stringify(selectedItem)}`}\n </Typo>\n </Flex>\n );\n }\n} "],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAca,cAYL,YAZK;AALN,SAAS,iBAAkC;AAChD,QAAM,EAAE,cAAc,qBAAqB,IAAI,qBAAqB;AAEpE,UAAQ,aAAa,MAAM;AAAA,IACzB,KAAK;AACH,aAAO,oBAAC,4BAAgB,MAAM,cAAc;AAAA,IAC9C,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,cAAc,6DAAsB;AAAA;AAAA,MACtC;AAAA,IAEF,KAAK;AACH,aAAO,oBAAC,iCAAoB,MAAM,cAAa;AAAA,IACnD;AACE,aACE;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,WAAU;AAAA,UACV,KAAI;AAAA,UACJ,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,OAAM;AAAA,UAEN;AAAA,gCAAC,mBAAgB,QAAQ,IAAI,OAAO,IAAI;AAAA,YACxC,oBAAC,QAAK,0FAAgB;AAAA,YACtB,oBAAC,QAAK,OAAM,UAAS,OAAM,QAAO,SAAQ,WACvC;AAAA,cACC,KAAK,UAAU,YAAY,CAAC,IAChC;AAAA;AAAA;AAAA,MACF;AAAA,EAEN;AACF;","names":[]}
|