@yeongseoksong/framework 1.3.1 → 1.4.0
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/README.md +288 -6
- package/dist/store/index.cjs +384 -0
- package/dist/store/index.d.mts +207 -0
- package/dist/store/index.d.ts +207 -0
- package/dist/store/index.mjs +355 -0
- package/dist/ui/index.cjs +1016 -471
- package/dist/ui/index.d.mts +258 -16
- package/dist/ui/index.d.ts +258 -16
- package/dist/ui/index.mjs +975 -441
- package/dist/util/index.cjs +144 -20
- package/dist/util/index.d.mts +87 -12
- package/dist/util/index.d.ts +87 -12
- package/dist/util/index.mjs +139 -18
- package/package.json +15 -2
package/dist/ui/index.mjs
CHANGED
|
@@ -186,6 +186,36 @@ var SdTitleSub = SdTitle.Sub;
|
|
|
186
186
|
|
|
187
187
|
// ui/atom/Text.tsx
|
|
188
188
|
import { Text as MantineText } from "@mantine/core";
|
|
189
|
+
|
|
190
|
+
// ui/typography.ts
|
|
191
|
+
var textStyles = {
|
|
192
|
+
/** 최상위 강조 */
|
|
193
|
+
Strong: { fw: 700, c: "slate.9", fz: "md", style: { letterSpacing: "-0.04em" } },
|
|
194
|
+
/** 기본 본문 */
|
|
195
|
+
Body: { fw: 500, c: "slate.7", fz: "sm", lh: 1.7 },
|
|
196
|
+
/** 보조 정보 */
|
|
197
|
+
Sub: { fw: 400, c: "slate.5", fz: "xs", lh: 1.6 },
|
|
198
|
+
/** 최소 강조 — 밀도 높은 목록 */
|
|
199
|
+
Hint: { fw: 400, c: "slate.4", fz: "xs", lh: 1.5 },
|
|
200
|
+
/** 섹션 라벨 */
|
|
201
|
+
Eyebrow: {
|
|
202
|
+
fw: 700,
|
|
203
|
+
c: "primary.6",
|
|
204
|
+
fz: "xs",
|
|
205
|
+
style: { letterSpacing: "0.12em", textTransform: "uppercase" }
|
|
206
|
+
},
|
|
207
|
+
/** 오류 메시지 */
|
|
208
|
+
Error: { fw: 400, c: "red.6", fz: "sm" },
|
|
209
|
+
/** 숫자 — 자릿수 정렬 */
|
|
210
|
+
Numeric: {
|
|
211
|
+
fw: 700,
|
|
212
|
+
c: "slate.8",
|
|
213
|
+
fz: "md",
|
|
214
|
+
style: { fontVariantNumeric: "tabular-nums", letterSpacing: "-0.02em" }
|
|
215
|
+
}
|
|
216
|
+
};
|
|
217
|
+
|
|
218
|
+
// ui/atom/Text.tsx
|
|
189
219
|
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
190
220
|
function createText(defaults) {
|
|
191
221
|
return function SdText2(_a4) {
|
|
@@ -195,23 +225,13 @@ function createText(defaults) {
|
|
|
195
225
|
};
|
|
196
226
|
}
|
|
197
227
|
var SdText = {
|
|
198
|
-
Strong: createText(
|
|
199
|
-
Body: createText(
|
|
200
|
-
Sub: createText(
|
|
201
|
-
Eyebrow: createText(
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
style: { letterSpacing: "0.12em", textTransform: "uppercase" }
|
|
206
|
-
}),
|
|
207
|
-
Error: createText({ fw: 400, c: "red.6", fz: "sm" }),
|
|
208
|
-
Hint: createText({ fw: 400, c: "slate.4", fz: "xs", lh: 1.5 }),
|
|
209
|
-
Numeric: createText({
|
|
210
|
-
fw: 700,
|
|
211
|
-
c: "slate.8",
|
|
212
|
-
fz: "md",
|
|
213
|
-
style: { fontVariantNumeric: "tabular-nums", letterSpacing: "-0.02em" }
|
|
214
|
-
})
|
|
228
|
+
Strong: createText(textStyles.Strong),
|
|
229
|
+
Body: createText(textStyles.Body),
|
|
230
|
+
Sub: createText(textStyles.Sub),
|
|
231
|
+
Eyebrow: createText(textStyles.Eyebrow),
|
|
232
|
+
Error: createText(textStyles.Error),
|
|
233
|
+
Hint: createText(textStyles.Hint),
|
|
234
|
+
Numeric: createText(textStyles.Numeric)
|
|
215
235
|
};
|
|
216
236
|
var SdTextStrong = SdText.Strong;
|
|
217
237
|
var SdTextBody = SdText.Body;
|
|
@@ -405,7 +425,7 @@ var SdBadge = {
|
|
|
405
425
|
/** 성공/완료 */
|
|
406
426
|
Success: createBadge({ variant: "light", color: "green" }),
|
|
407
427
|
/** 주의/경고 */
|
|
408
|
-
Warning: createBadge({ variant: "light", color: "
|
|
428
|
+
Warning: createBadge({ variant: "light", color: "amber" })
|
|
409
429
|
};
|
|
410
430
|
var SdBadgeDefault = SdBadge.Default;
|
|
411
431
|
var SdBadgePrimary = SdBadge.Primary;
|
|
@@ -414,56 +434,157 @@ var SdBadgeWarning = SdBadge.Warning;
|
|
|
414
434
|
|
|
415
435
|
// ui/atom/Input.tsx
|
|
416
436
|
import {
|
|
437
|
+
Autocomplete,
|
|
438
|
+
Checkbox,
|
|
439
|
+
ColorInput,
|
|
440
|
+
FileInput,
|
|
441
|
+
Group as Group2,
|
|
442
|
+
Input,
|
|
443
|
+
JsonInput,
|
|
444
|
+
MultiSelect,
|
|
445
|
+
NativeSelect,
|
|
446
|
+
NumberInput,
|
|
417
447
|
PasswordInput,
|
|
448
|
+
PinInput,
|
|
449
|
+
Radio,
|
|
450
|
+
Rating,
|
|
451
|
+
SegmentedControl,
|
|
418
452
|
Select,
|
|
453
|
+
Slider,
|
|
454
|
+
Stack as Stack2,
|
|
455
|
+
Switch,
|
|
456
|
+
TagsInput,
|
|
419
457
|
Textarea,
|
|
420
458
|
TextInput
|
|
421
459
|
} from "@mantine/core";
|
|
460
|
+
import {
|
|
461
|
+
DateInput,
|
|
462
|
+
DatePickerInput,
|
|
463
|
+
TimeInput
|
|
464
|
+
} from "@mantine/dates";
|
|
422
465
|
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
423
|
-
function
|
|
424
|
-
return function SdInput2(
|
|
425
|
-
|
|
426
|
-
return /* @__PURE__ */ jsx12(TextInput, __spreadValues(__spreadValues({}, defaults), props));
|
|
427
|
-
};
|
|
428
|
-
}
|
|
429
|
-
function createTextarea(defaults) {
|
|
430
|
-
return function SdInputTextarea2(_a4) {
|
|
431
|
-
var props = __objRest(_a4, []);
|
|
432
|
-
return /* @__PURE__ */ jsx12(Textarea, __spreadValues(__spreadValues({}, defaults), props));
|
|
466
|
+
function createInput(Component, defaults) {
|
|
467
|
+
return function SdInput2(props) {
|
|
468
|
+
return /* @__PURE__ */ jsx12(Component, __spreadValues(__spreadValues({}, defaults), props));
|
|
433
469
|
};
|
|
434
470
|
}
|
|
435
|
-
function
|
|
436
|
-
return function
|
|
437
|
-
var
|
|
438
|
-
|
|
471
|
+
function createWrappedInput(Component, defaults) {
|
|
472
|
+
return function SdWrappedInput(_a4) {
|
|
473
|
+
var _b = _a4, {
|
|
474
|
+
label,
|
|
475
|
+
description,
|
|
476
|
+
error,
|
|
477
|
+
required,
|
|
478
|
+
withAsterisk
|
|
479
|
+
} = _b, rest = __objRest(_b, [
|
|
480
|
+
"label",
|
|
481
|
+
"description",
|
|
482
|
+
"error",
|
|
483
|
+
"required",
|
|
484
|
+
"withAsterisk"
|
|
485
|
+
]);
|
|
486
|
+
return /* @__PURE__ */ jsx12(
|
|
487
|
+
Input.Wrapper,
|
|
488
|
+
{
|
|
489
|
+
label,
|
|
490
|
+
description,
|
|
491
|
+
error,
|
|
492
|
+
required,
|
|
493
|
+
withAsterisk,
|
|
494
|
+
children: /* @__PURE__ */ jsx12(Component, __spreadValues(__spreadValues({}, defaults), rest))
|
|
495
|
+
}
|
|
496
|
+
);
|
|
439
497
|
};
|
|
440
498
|
}
|
|
441
|
-
function
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
};
|
|
499
|
+
function SdInputRadio(_a4) {
|
|
500
|
+
var _b = _a4, { data, orientation = "horizontal" } = _b, props = __objRest(_b, ["data", "orientation"]);
|
|
501
|
+
const Layout = orientation === "vertical" ? Stack2 : Group2;
|
|
502
|
+
return /* @__PURE__ */ jsx12(Radio.Group, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx12(Layout, { gap: "sm", mt: "xs", children: data.map((item) => /* @__PURE__ */ jsx12(Radio, { value: item.value, label: item.label, disabled: item.disabled }, item.value)) }) }));
|
|
446
503
|
}
|
|
447
504
|
var SdInput = {
|
|
505
|
+
// ── 텍스트 ──
|
|
448
506
|
/** 일반 텍스트 — 이름, 회사명 등 */
|
|
449
|
-
Text:
|
|
507
|
+
Text: createInput(TextInput),
|
|
450
508
|
/** 이메일 입력 */
|
|
451
|
-
Email:
|
|
509
|
+
Email: createInput(TextInput, { type: "email" }),
|
|
452
510
|
/** 비밀번호 입력 — 마스킹 토글 포함 */
|
|
453
|
-
Password:
|
|
511
|
+
Password: createInput(PasswordInput),
|
|
454
512
|
/** 멀티라인 텍스트 — 문의 메시지 등 */
|
|
455
|
-
Textarea:
|
|
513
|
+
Textarea: createInput(Textarea, { autosize: true, minRows: 3 }),
|
|
514
|
+
/** JSON 입력 — 포맷·검증 버튼 포함 */
|
|
515
|
+
Json: createInput(JsonInput, { autosize: true, minRows: 4, formatOnBlur: true }),
|
|
516
|
+
// ── 숫자 ──
|
|
517
|
+
/** 숫자 입력 — 증감 컨트롤 포함 */
|
|
518
|
+
Number: createInput(NumberInput),
|
|
519
|
+
/** 범위 선택 슬라이더 */
|
|
520
|
+
Slider: createWrappedInput(Slider),
|
|
521
|
+
/** 별점 */
|
|
522
|
+
Rating: createWrappedInput(Rating),
|
|
523
|
+
/** 인증번호 등 자리수가 고정된 코드 */
|
|
524
|
+
PinCode: createWrappedInput(PinInput),
|
|
525
|
+
// ── 선택 ──
|
|
456
526
|
/** 드롭다운 선택 */
|
|
457
|
-
Select:
|
|
527
|
+
Select: createInput(Select),
|
|
528
|
+
/** 브라우저 기본 select — 모바일·간단한 목록 */
|
|
529
|
+
NativeSelect: createInput(NativeSelect),
|
|
530
|
+
/** 다중 선택 */
|
|
531
|
+
MultiSelect: createInput(MultiSelect),
|
|
532
|
+
/** 입력하며 후보를 좁히는 자동완성(자유 입력 허용) */
|
|
533
|
+
Autocomplete: createInput(Autocomplete),
|
|
534
|
+
/** 자유롭게 추가하는 태그 목록 */
|
|
535
|
+
Tags: createInput(TagsInput),
|
|
536
|
+
/** 라디오 그룹 — data로 항목을 넘긴다 */
|
|
537
|
+
Radio: SdInputRadio,
|
|
538
|
+
/** 두세 개 중 하나 — 탭처럼 보이는 선택 */
|
|
539
|
+
Segmented: createWrappedInput(SegmentedControl),
|
|
540
|
+
// ── 불리언 ──
|
|
541
|
+
/** 체크박스 — getInputProps(name, { type: 'checkbox' }) */
|
|
542
|
+
Checkbox: createInput(Checkbox),
|
|
543
|
+
/** 스위치 — 즉시 반영되는 on/off */
|
|
544
|
+
Switch: createInput(Switch),
|
|
545
|
+
// ── 기타 ──
|
|
546
|
+
/** 파일 선택 */
|
|
547
|
+
File: createInput(FileInput, { clearable: true }),
|
|
548
|
+
/** 색상 선택 */
|
|
549
|
+
Color: createInput(ColorInput),
|
|
550
|
+
// ── 날짜·시간 (@mantine/dates) ──
|
|
551
|
+
/** 날짜 — 직접 입력 + 달력 팝오버. 값은 'YYYY-MM-DD' 문자열 */
|
|
552
|
+
Date: createInput(DateInput, { valueFormat: "YYYY-MM-DD", clearable: true }),
|
|
553
|
+
/** 기간 — 시작·종료 두 날짜 */
|
|
554
|
+
DateRange: createInput(DatePickerInput, {
|
|
555
|
+
type: "range",
|
|
556
|
+
valueFormat: "YYYY-MM-DD",
|
|
557
|
+
clearable: true
|
|
558
|
+
}),
|
|
559
|
+
/** 시각 */
|
|
560
|
+
Time: createInput(TimeInput)
|
|
458
561
|
};
|
|
459
562
|
var SdInputText = SdInput.Text;
|
|
460
563
|
var SdInputEmail = SdInput.Email;
|
|
461
564
|
var SdInputPassword = SdInput.Password;
|
|
462
565
|
var SdInputTextarea = SdInput.Textarea;
|
|
566
|
+
var SdInputJson = SdInput.Json;
|
|
567
|
+
var SdInputNumber = SdInput.Number;
|
|
568
|
+
var SdInputSlider = SdInput.Slider;
|
|
569
|
+
var SdInputRating = SdInput.Rating;
|
|
570
|
+
var SdInputPinCode = SdInput.PinCode;
|
|
463
571
|
var SdInputSelect = SdInput.Select;
|
|
572
|
+
var SdInputNativeSelect = SdInput.NativeSelect;
|
|
573
|
+
var SdInputMultiSelect = SdInput.MultiSelect;
|
|
574
|
+
var SdInputAutocomplete = SdInput.Autocomplete;
|
|
575
|
+
var SdInputTags = SdInput.Tags;
|
|
576
|
+
var SdInputRadioGroup = SdInput.Radio;
|
|
577
|
+
var SdInputSegmented = SdInput.Segmented;
|
|
578
|
+
var SdInputCheckbox = SdInput.Checkbox;
|
|
579
|
+
var SdInputSwitch = SdInput.Switch;
|
|
580
|
+
var SdInputFile = SdInput.File;
|
|
581
|
+
var SdInputColor = SdInput.Color;
|
|
582
|
+
var SdInputDate = SdInput.Date;
|
|
583
|
+
var SdInputDateRange = SdInput.DateRange;
|
|
584
|
+
var SdInputTime = SdInput.Time;
|
|
464
585
|
|
|
465
586
|
// ui/atom/Skeleton.tsx
|
|
466
|
-
import { Box as Box3, Skeleton as MantineSkeleton, Stack as
|
|
587
|
+
import { Box as Box3, Skeleton as MantineSkeleton, Stack as Stack3 } from "@mantine/core";
|
|
467
588
|
import { jsx as jsx13, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
468
589
|
function SkeletonText(_a4) {
|
|
469
590
|
var _b = _a4, { width = "100%" } = _b, props = __objRest(_b, ["width"]);
|
|
@@ -491,7 +612,7 @@ function SkeletonCard({ height, lines = 3 }) {
|
|
|
491
612
|
border: "1px solid var(--mantine-color-gray-3)",
|
|
492
613
|
height
|
|
493
614
|
},
|
|
494
|
-
children: /* @__PURE__ */ jsxs2(
|
|
615
|
+
children: /* @__PURE__ */ jsxs2(Stack3, { gap: "sm", children: [
|
|
495
616
|
/* @__PURE__ */ jsx13(MantineSkeleton, { height: 20, width: "50%", radius: "sm" }),
|
|
496
617
|
Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx13(
|
|
497
618
|
MantineSkeleton,
|
|
@@ -522,7 +643,7 @@ var SdSkeletonAvatar = SkeletonAvatar;
|
|
|
522
643
|
// ui/atom/Link.tsx
|
|
523
644
|
import { Anchor as MantineAnchor } from "@mantine/core";
|
|
524
645
|
|
|
525
|
-
//
|
|
646
|
+
// ui/style.util.ts
|
|
526
647
|
function toCssColor(value) {
|
|
527
648
|
if (typeof value !== "string") return "";
|
|
528
649
|
return value.includes(".") ? `var(--mantine-color-${value.replace(".", "-")})` : value;
|
|
@@ -531,11 +652,16 @@ function toCssColor(value) {
|
|
|
531
652
|
// ui/atom/Link.tsx
|
|
532
653
|
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
533
654
|
var HOVER_COLOR = "var(--mantine-color-primary-6)";
|
|
534
|
-
function createLink(defaults) {
|
|
655
|
+
function createLink(defaults, Fallback) {
|
|
535
656
|
return function SdLink2(_a4) {
|
|
536
657
|
var _b = _a4, { children, onMouseEnter, onMouseLeave } = _b, props = __objRest(_b, ["children", "onMouseEnter", "onMouseLeave"]);
|
|
537
658
|
var _a5;
|
|
538
659
|
const baseColor = toCssColor((_a5 = props.c) != null ? _a5 : defaults.c);
|
|
660
|
+
const resolved = typeof children === "string" ? t(children) : children;
|
|
661
|
+
if (!props.href) {
|
|
662
|
+
const _b2 = props, { href: _href, target: _target, rel: _rel } = _b2, textProps = __objRest(_b2, ["href", "target", "rel"]);
|
|
663
|
+
return /* @__PURE__ */ jsx14(Fallback, __spreadProps(__spreadValues({}, textProps), { children }));
|
|
664
|
+
}
|
|
539
665
|
const handleEnter = (e) => {
|
|
540
666
|
e.currentTarget.style.color = HOVER_COLOR;
|
|
541
667
|
onMouseEnter == null ? void 0 : onMouseEnter(e);
|
|
@@ -550,29 +676,88 @@ function createLink(defaults) {
|
|
|
550
676
|
style: { transition: "color 0.15s" },
|
|
551
677
|
onMouseEnter: handleEnter,
|
|
552
678
|
onMouseLeave: handleLeave,
|
|
553
|
-
children
|
|
679
|
+
children: resolved
|
|
554
680
|
})
|
|
555
681
|
);
|
|
556
682
|
};
|
|
557
683
|
}
|
|
684
|
+
function linkStyle(base2, extra) {
|
|
685
|
+
return Object.assign({ underline: "never" }, base2, extra);
|
|
686
|
+
}
|
|
558
687
|
var SdLink = {
|
|
559
688
|
/** 최상위 강조 — 눈에 띄어야 하는 단일 링크 */
|
|
560
|
-
Strong: createLink(
|
|
689
|
+
Strong: createLink(linkStyle(textStyles.Strong), SdText.Strong),
|
|
561
690
|
/** 기본 — 본문·네비게이션 수준의 일반 링크 */
|
|
562
|
-
Body: createLink(
|
|
691
|
+
Body: createLink(linkStyle(textStyles.Body), SdText.Body),
|
|
563
692
|
/** 보조 — 연락처·정책 등 부가 정보 */
|
|
564
|
-
Sub: createLink(
|
|
693
|
+
Sub: createLink(linkStyle(textStyles.Sub), SdText.Sub),
|
|
565
694
|
/** 최소 강조 — 링크 목록처럼 밀도가 높고 톤을 낮춰야 하는 곳 */
|
|
566
|
-
Hint: createLink(
|
|
695
|
+
Hint: createLink(linkStyle(textStyles.Hint), SdText.Hint)
|
|
567
696
|
};
|
|
568
697
|
var SdLinkStrong = SdLink.Strong;
|
|
569
698
|
var SdLinkBody = SdLink.Body;
|
|
570
699
|
var SdLinkSub = SdLink.Sub;
|
|
571
700
|
var SdLinkHint = SdLink.Hint;
|
|
572
701
|
|
|
702
|
+
// ui/atom/Toast.tsx
|
|
703
|
+
import { Notifications, notifications } from "@mantine/notifications";
|
|
704
|
+
import { IconAlertTriangle, IconCheck, IconInfoCircle, IconX as IconX2 } from "@tabler/icons-react";
|
|
705
|
+
import { jsx as jsx15 } from "react/jsx-runtime";
|
|
706
|
+
var toastStyles = {
|
|
707
|
+
/** 성공 — 저장·전송 완료 */
|
|
708
|
+
Success: { color: "green", icon: /* @__PURE__ */ jsx15(IconCheck, { size: 18 }), title: "\uC644\uB8CC" },
|
|
709
|
+
/** 실패 — 요청 오류·검증 실패 */
|
|
710
|
+
Error: { color: "red", icon: /* @__PURE__ */ jsx15(IconX2, { size: 18 }), title: "\uC624\uB958" },
|
|
711
|
+
/** 주의 — 되돌릴 수 없는 동작 안내 등 */
|
|
712
|
+
Warning: { color: "amber", icon: /* @__PURE__ */ jsx15(IconAlertTriangle, { size: 18 }), title: "\uC8FC\uC758" },
|
|
713
|
+
/** 안내 — 중립 정보 */
|
|
714
|
+
Info: { color: "primary", icon: /* @__PURE__ */ jsx15(IconInfoCircle, { size: 18 }), title: "\uC548\uB0B4" },
|
|
715
|
+
/** 진행 중 — 스피너 + 자동 닫힘 없음. Update로 결과 변형으로 바꾼다. */
|
|
716
|
+
Loading: { loading: true, autoClose: false, withCloseButton: false, title: "\uCC98\uB9AC \uC911" }
|
|
717
|
+
};
|
|
718
|
+
function createToast(defaults) {
|
|
719
|
+
return function SdToast2(message, options) {
|
|
720
|
+
return notifications.show(__spreadValues(__spreadProps(__spreadValues({}, defaults), { message }), options));
|
|
721
|
+
};
|
|
722
|
+
}
|
|
723
|
+
var SdToast = {
|
|
724
|
+
Success: createToast(toastStyles.Success),
|
|
725
|
+
Error: createToast(toastStyles.Error),
|
|
726
|
+
Warning: createToast(toastStyles.Warning),
|
|
727
|
+
Info: createToast(toastStyles.Info),
|
|
728
|
+
Loading: createToast(toastStyles.Loading),
|
|
729
|
+
/**
|
|
730
|
+
* 이미 떠 있는 알림을 다른 변형으로 교체한다 — `Loading` → `Success`/`Error` 전환용.
|
|
731
|
+
* `loading: false`·`autoClose`를 먼저 깔아 두므로 스피너가 그대로 남지 않는다.
|
|
732
|
+
*/
|
|
733
|
+
Update: (id, variant, message, options) => notifications.update(__spreadValues(__spreadProps(__spreadValues({
|
|
734
|
+
id,
|
|
735
|
+
loading: false,
|
|
736
|
+
autoClose: 4e3,
|
|
737
|
+
withCloseButton: true
|
|
738
|
+
}, toastStyles[variant]), {
|
|
739
|
+
message
|
|
740
|
+
}), options)),
|
|
741
|
+
/** 특정 알림 닫기 */
|
|
742
|
+
Hide: (id) => notifications.hide(id),
|
|
743
|
+
/** 떠 있는 알림 전부 닫기 */
|
|
744
|
+
Clean: () => notifications.clean()
|
|
745
|
+
};
|
|
746
|
+
function SdToastProvider(props) {
|
|
747
|
+
return /* @__PURE__ */ jsx15(Notifications, __spreadValues({ position: "top-right", autoClose: 4e3, limit: 3 }, props));
|
|
748
|
+
}
|
|
749
|
+
var SdToastSuccess = SdToast.Success;
|
|
750
|
+
var SdToastError = SdToast.Error;
|
|
751
|
+
var SdToastWarning = SdToast.Warning;
|
|
752
|
+
var SdToastInfo = SdToast.Info;
|
|
753
|
+
var SdToastLoading = SdToast.Loading;
|
|
754
|
+
var SdToastUpdate = SdToast.Update;
|
|
755
|
+
var SdToastHide = SdToast.Hide;
|
|
756
|
+
var SdToastClean = SdToast.Clean;
|
|
757
|
+
|
|
573
758
|
// ui/molecule/TextBox.tsx
|
|
574
|
-
import { Stack as
|
|
575
|
-
import { jsx as
|
|
759
|
+
import { Stack as Stack4 } from "@mantine/core";
|
|
760
|
+
import { jsx as jsx16, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
576
761
|
function createTextBox(titleVariant, defaultGap = "xs", descVariant = "Body", color_ = void 0) {
|
|
577
762
|
return function SdTextBox2(_a4) {
|
|
578
763
|
var _b = _a4, {
|
|
@@ -596,10 +781,10 @@ function createTextBox(titleVariant, defaultGap = "xs", descVariant = "Body", co
|
|
|
596
781
|
const variant = variantOverride != null ? variantOverride : titleVariant;
|
|
597
782
|
const TitleComponent = SdTitle[variant];
|
|
598
783
|
const DescComponent = SdText[descVariant];
|
|
599
|
-
return /* @__PURE__ */ jsxs3(
|
|
600
|
-
label && /* @__PURE__ */
|
|
601
|
-
/* @__PURE__ */
|
|
602
|
-
description && /* @__PURE__ */
|
|
784
|
+
return /* @__PURE__ */ jsxs3(Stack4, __spreadProps(__spreadValues({ gap: defaultGap }, stackProps), { children: [
|
|
785
|
+
label && /* @__PURE__ */ jsx16(SdText.Eyebrow, { children: label }),
|
|
786
|
+
/* @__PURE__ */ jsx16(TitleComponent, { c: colorRes, children: title }),
|
|
787
|
+
description && /* @__PURE__ */ jsx16(DescComponent, { c: colorRes, maw: maxDescWidth, mt: 4, children: description }),
|
|
603
788
|
children
|
|
604
789
|
] }));
|
|
605
790
|
};
|
|
@@ -616,26 +801,27 @@ var SdTextBoxCard = SdTextBox.Card;
|
|
|
616
801
|
var SdTextBoxSub = SdTextBox.Sub;
|
|
617
802
|
|
|
618
803
|
// ui/molecule/Features.tsx
|
|
619
|
-
import { Card as Card2, SimpleGrid, Stack as
|
|
804
|
+
import { Card as Card2, SimpleGrid, Stack as Stack5 } from "@mantine/core";
|
|
620
805
|
|
|
621
806
|
// util/sort.util.ts
|
|
622
|
-
function filterAndSort(items) {
|
|
623
|
-
|
|
807
|
+
function filterAndSort(items, direction = "asc") {
|
|
808
|
+
const sign = direction === "asc" ? 1 : -1;
|
|
809
|
+
return (items != null ? items : []).filter((item) => item.isShow).sort((a, b) => (a.order - b.order) * sign);
|
|
624
810
|
}
|
|
625
811
|
|
|
626
812
|
// ui/molecule/Features.tsx
|
|
627
|
-
import { jsx as
|
|
813
|
+
import { jsx as jsx17, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
628
814
|
function SdFeatures({ items, cols = { base: 1, sm: 2, md: 3 } }) {
|
|
629
815
|
const visible = filterAndSort(items);
|
|
630
|
-
return /* @__PURE__ */
|
|
816
|
+
return /* @__PURE__ */ jsx17(SimpleGrid, { cols, spacing: "xl", children: visible.map((item) => /* @__PURE__ */ jsx17(Card2, { children: /* @__PURE__ */ jsxs4(Stack5, { gap: "sm", children: [
|
|
631
817
|
item.icon,
|
|
632
|
-
/* @__PURE__ */
|
|
818
|
+
/* @__PURE__ */ jsx17(SdTextBox.Card, { label: item.label, title: item.title, description: item.description })
|
|
633
819
|
] }, item.id) }, item.id)) });
|
|
634
820
|
}
|
|
635
821
|
|
|
636
822
|
// ui/molecule/Timeline.tsx
|
|
637
|
-
import { Group as
|
|
638
|
-
import { jsx as
|
|
823
|
+
import { Group as Group3, Stack as Stack6, Timeline as MantineTimeline } from "@mantine/core";
|
|
824
|
+
import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
639
825
|
function SdTimeline({ items }) {
|
|
640
826
|
const grouped = items.filter((item) => item.isShow).sort((a, b) => b.year - a.year || b.month - a.month).reduce((acc, item) => {
|
|
641
827
|
var _a4, _b;
|
|
@@ -644,32 +830,32 @@ function SdTimeline({ items }) {
|
|
|
644
830
|
return acc;
|
|
645
831
|
}, {});
|
|
646
832
|
const years = Object.keys(grouped).map(Number).sort((a, b) => b - a);
|
|
647
|
-
return /* @__PURE__ */
|
|
833
|
+
return /* @__PURE__ */ jsx18(MantineTimeline, { active: items.length, bulletSize: 24, lineWidth: 2, children: years.map((year) => /* @__PURE__ */ jsx18(MantineTimeline.Item, { title: /* @__PURE__ */ jsxs5(SdTitle.Sub, { children: [
|
|
648
834
|
year,
|
|
649
835
|
"\uB144"
|
|
650
|
-
] }), children: /* @__PURE__ */
|
|
836
|
+
] }), children: /* @__PURE__ */ jsx18(Stack6, { gap: 6, mt: "xs", children: grouped[year].map((event) => /* @__PURE__ */ jsxs5(Group3, { gap: "md", align: "center", wrap: "nowrap", children: [
|
|
651
837
|
/* @__PURE__ */ jsxs5(SdText.Eyebrow, { miw: 28, children: [
|
|
652
838
|
event.month,
|
|
653
839
|
"\uC6D4"
|
|
654
840
|
] }),
|
|
655
|
-
/* @__PURE__ */
|
|
841
|
+
/* @__PURE__ */ jsx18(SdText.Sub, { style: { flex: 1 }, children: event.description })
|
|
656
842
|
] }, event.id)) }) }, year)) });
|
|
657
843
|
}
|
|
658
844
|
|
|
659
845
|
// ui/molecule/Steps.tsx
|
|
660
|
-
import { Box as Box4, Card as Card3, Group as
|
|
846
|
+
import { Box as Box4, Card as Card3, Group as Group4, Stack as Stack7, ThemeIcon as ThemeIcon2 } from "@mantine/core";
|
|
661
847
|
import { IconArrowDown, IconArrowRight } from "@tabler/icons-react";
|
|
662
848
|
import { Fragment } from "react/jsx-runtime";
|
|
663
|
-
import { Fragment as Fragment2, jsx as
|
|
849
|
+
import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
664
850
|
function BubbleStep({ item, index, isLast }) {
|
|
665
|
-
return /* @__PURE__ */ jsxs6(
|
|
851
|
+
return /* @__PURE__ */ jsxs6(Group4, { align: "flex-start", gap: "lg", wrap: "nowrap", children: [
|
|
666
852
|
/* @__PURE__ */ jsxs6(
|
|
667
853
|
Box4,
|
|
668
854
|
{
|
|
669
855
|
style: { display: "flex", flexDirection: "column", alignItems: "center", flexShrink: 0 },
|
|
670
856
|
children: [
|
|
671
|
-
/* @__PURE__ */
|
|
672
|
-
!isLast && /* @__PURE__ */
|
|
857
|
+
/* @__PURE__ */ jsx19(SdNumberIcon, { value: String(index + 1).padStart(2, "0") }),
|
|
858
|
+
!isLast && /* @__PURE__ */ jsx19(
|
|
673
859
|
Box4,
|
|
674
860
|
{
|
|
675
861
|
style: {
|
|
@@ -684,7 +870,7 @@ function BubbleStep({ item, index, isLast }) {
|
|
|
684
870
|
]
|
|
685
871
|
}
|
|
686
872
|
),
|
|
687
|
-
/* @__PURE__ */
|
|
873
|
+
/* @__PURE__ */ jsx19(
|
|
688
874
|
SdTextBox.Card,
|
|
689
875
|
{
|
|
690
876
|
title: item.title,
|
|
@@ -696,11 +882,11 @@ function BubbleStep({ item, index, isLast }) {
|
|
|
696
882
|
] });
|
|
697
883
|
}
|
|
698
884
|
function Bubble({ items }) {
|
|
699
|
-
return /* @__PURE__ */
|
|
885
|
+
return /* @__PURE__ */ jsx19(Box4, { children: items.map((item, i) => /* @__PURE__ */ jsx19(BubbleStep, { item, index: i, isLast: i === items.length - 1 }, i)) });
|
|
700
886
|
}
|
|
701
887
|
function CardStep({ item, index }) {
|
|
702
888
|
return /* @__PURE__ */ jsxs6(Card3, { withBorder: true, radius: "md", p: 0, style: { height: "100%", overflow: "hidden" }, children: [
|
|
703
|
-
/* @__PURE__ */
|
|
889
|
+
/* @__PURE__ */ jsx19(
|
|
704
890
|
Box4,
|
|
705
891
|
{
|
|
706
892
|
py: "lg",
|
|
@@ -715,35 +901,35 @@ function CardStep({ item, index }) {
|
|
|
715
901
|
] })
|
|
716
902
|
}
|
|
717
903
|
),
|
|
718
|
-
/* @__PURE__ */
|
|
904
|
+
/* @__PURE__ */ jsx19(Box4, { p: "lg", style: { textAlign: "center" }, children: /* @__PURE__ */ jsx19(SdTextBox.Card, { title: item.title, description: item.description }) })
|
|
719
905
|
] });
|
|
720
906
|
}
|
|
721
907
|
function CardArrow({ direction }) {
|
|
722
|
-
return /* @__PURE__ */
|
|
908
|
+
return /* @__PURE__ */ jsx19(ThemeIcon2, { size: 36, radius: "xl", variant: "light", color: "primary", children: direction === "right" ? /* @__PURE__ */ jsx19(IconArrowRight, { size: 20, stroke: 2.5 }) : /* @__PURE__ */ jsx19(IconArrowDown, { size: 20, stroke: 2.5 }) });
|
|
723
909
|
}
|
|
724
910
|
function CardVariant({ items }) {
|
|
725
911
|
return /* @__PURE__ */ jsxs6(Fragment2, { children: [
|
|
726
|
-
/* @__PURE__ */
|
|
727
|
-
/* @__PURE__ */
|
|
728
|
-
i < items.length - 1 && /* @__PURE__ */
|
|
912
|
+
/* @__PURE__ */ jsx19(Stack7, { gap: "sm", hiddenFrom: "sm", children: items.map((item, i) => /* @__PURE__ */ jsxs6(Fragment, { children: [
|
|
913
|
+
/* @__PURE__ */ jsx19(CardStep, { item, index: i }),
|
|
914
|
+
i < items.length - 1 && /* @__PURE__ */ jsx19(Box4, { style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx19(CardArrow, { direction: "down" }) })
|
|
729
915
|
] }, i)) }),
|
|
730
|
-
/* @__PURE__ */
|
|
731
|
-
/* @__PURE__ */
|
|
732
|
-
i < items.length - 1 && /* @__PURE__ */
|
|
916
|
+
/* @__PURE__ */ jsx19(Group4, { wrap: "nowrap", align: "stretch", gap: 0, visibleFrom: "sm", children: items.map((item, i) => /* @__PURE__ */ jsxs6(Fragment, { children: [
|
|
917
|
+
/* @__PURE__ */ jsx19(Box4, { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx19(CardStep, { item, index: i }) }),
|
|
918
|
+
i < items.length - 1 && /* @__PURE__ */ jsx19(Box4, { style: { display: "flex", alignItems: "center", padding: "0 8px" }, children: /* @__PURE__ */ jsx19(CardArrow, { direction: "right" }) })
|
|
733
919
|
] }, i)) })
|
|
734
920
|
] });
|
|
735
921
|
}
|
|
736
922
|
function StripStep({ item, index }) {
|
|
737
|
-
return /* @__PURE__ */
|
|
923
|
+
return /* @__PURE__ */ jsx19(Box4, { pl: "md", style: { borderLeft: "3px solid var(--mantine-color-primary-6)" }, children: /* @__PURE__ */ jsxs6(Stack7, { gap: 4, children: [
|
|
738
924
|
/* @__PURE__ */ jsxs6(SdText.Eyebrow, { children: [
|
|
739
925
|
"STEP ",
|
|
740
926
|
String(index + 1).padStart(2, "0")
|
|
741
927
|
] }),
|
|
742
|
-
/* @__PURE__ */
|
|
928
|
+
/* @__PURE__ */ jsx19(SdTextBox.Card, { title: item.title, description: item.description })
|
|
743
929
|
] }) });
|
|
744
930
|
}
|
|
745
931
|
function Strip({ items }) {
|
|
746
|
-
return /* @__PURE__ */
|
|
932
|
+
return /* @__PURE__ */ jsx19(Stack7, { gap: "xl", children: items.map((item, i) => /* @__PURE__ */ jsx19(StripStep, { item, index: i }, i)) });
|
|
747
933
|
}
|
|
748
934
|
var SdSteps = { Bubble, Card: CardVariant, Strip };
|
|
749
935
|
var SdStepsBubble = SdSteps.Bubble;
|
|
@@ -755,18 +941,18 @@ import {
|
|
|
755
941
|
Avatar,
|
|
756
942
|
Box as Box5,
|
|
757
943
|
Card as Card4,
|
|
758
|
-
Group as
|
|
759
|
-
Rating,
|
|
944
|
+
Group as Group5,
|
|
945
|
+
Rating as Rating2,
|
|
760
946
|
SimpleGrid as SimpleGrid2,
|
|
761
|
-
Stack as
|
|
947
|
+
Stack as Stack8
|
|
762
948
|
} from "@mantine/core";
|
|
763
|
-
import { jsx as
|
|
949
|
+
import { jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
764
950
|
function AuthorRow({ item }) {
|
|
765
|
-
return /* @__PURE__ */ jsxs7(
|
|
766
|
-
item.avatar && /* @__PURE__ */
|
|
767
|
-
!item.avatar && /* @__PURE__ */
|
|
768
|
-
/* @__PURE__ */ jsxs7(
|
|
769
|
-
/* @__PURE__ */
|
|
951
|
+
return /* @__PURE__ */ jsxs7(Group5, { gap: "sm", wrap: "nowrap", children: [
|
|
952
|
+
item.avatar && /* @__PURE__ */ jsx20(Avatar, { src: item.avatar, size: "md", radius: "xl" }),
|
|
953
|
+
!item.avatar && /* @__PURE__ */ jsx20(Avatar, { size: "md", radius: "xl", color: "primary", children: item.name.charAt(0) }),
|
|
954
|
+
/* @__PURE__ */ jsxs7(Stack8, { gap: 0, children: [
|
|
955
|
+
/* @__PURE__ */ jsx20(SdText.Strong, { fz: "sm", children: item.name }),
|
|
770
956
|
/* @__PURE__ */ jsxs7(SdText.Sub, { children: [
|
|
771
957
|
item.role,
|
|
772
958
|
item.company ? ` \xB7 ${item.company}` : ""
|
|
@@ -776,28 +962,28 @@ function AuthorRow({ item }) {
|
|
|
776
962
|
}
|
|
777
963
|
function CardTestimonial(_a4) {
|
|
778
964
|
var _b = _a4, { item } = _b, boxProps = __objRest(_b, ["item"]);
|
|
779
|
-
return /* @__PURE__ */
|
|
780
|
-
item.rating && /* @__PURE__ */
|
|
781
|
-
/* @__PURE__ */ jsxs7(
|
|
782
|
-
/* @__PURE__ */
|
|
783
|
-
item.lines.map((line, i) => /* @__PURE__ */
|
|
965
|
+
return /* @__PURE__ */ jsx20(Card4, __spreadProps(__spreadValues({ h: "100%" }, boxProps), { children: /* @__PURE__ */ jsxs7(Stack8, { gap: "md", h: "100%", children: [
|
|
966
|
+
item.rating && /* @__PURE__ */ jsx20(Rating2, { value: item.rating, readOnly: true, size: "sm", color: "primary" }),
|
|
967
|
+
/* @__PURE__ */ jsxs7(Stack8, { gap: "xs", style: { flex: 1 }, children: [
|
|
968
|
+
/* @__PURE__ */ jsx20(SdTitle.Display, { c: "primary.6", lh: 0.8, "aria-hidden": true, children: "\u201C" }),
|
|
969
|
+
item.lines.map((line, i) => /* @__PURE__ */ jsx20(SdText.Body, { children: line }, i))
|
|
784
970
|
] }),
|
|
785
|
-
/* @__PURE__ */
|
|
971
|
+
/* @__PURE__ */ jsx20(AuthorRow, { item })
|
|
786
972
|
] }) }));
|
|
787
973
|
}
|
|
788
974
|
function Strip2(_a4) {
|
|
789
975
|
var _b = _a4, { item } = _b, boxProps = __objRest(_b, ["item"]);
|
|
790
|
-
return /* @__PURE__ */
|
|
791
|
-
item.rating && /* @__PURE__ */
|
|
792
|
-
/* @__PURE__ */ jsxs7(
|
|
793
|
-
/* @__PURE__ */
|
|
794
|
-
/* @__PURE__ */
|
|
976
|
+
return /* @__PURE__ */ jsx20(Box5, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ jsxs7(Stack8, { gap: "md", children: [
|
|
977
|
+
item.rating && /* @__PURE__ */ jsx20(Rating2, { value: item.rating, readOnly: true, size: "sm", color: "primary" }),
|
|
978
|
+
/* @__PURE__ */ jsxs7(Group5, { gap: 4, align: "flex-start", children: [
|
|
979
|
+
/* @__PURE__ */ jsx20(SdTitle.Display, { c: "primary.6", lh: 0.8, "aria-hidden": true, children: "\u201C" }),
|
|
980
|
+
/* @__PURE__ */ jsx20(Stack8, { gap: "xs", style: { flex: 1 }, children: item.lines.map((line, i) => /* @__PURE__ */ jsx20(SdText.Body, { children: line }, i)) })
|
|
795
981
|
] }),
|
|
796
|
-
/* @__PURE__ */
|
|
982
|
+
/* @__PURE__ */ jsx20(AuthorRow, { item })
|
|
797
983
|
] }) }));
|
|
798
984
|
}
|
|
799
985
|
function Grid({ items, cols = { base: 1, sm: 2, md: 3 } }) {
|
|
800
|
-
return /* @__PURE__ */
|
|
986
|
+
return /* @__PURE__ */ jsx20(SimpleGrid2, { cols, spacing: "xl", style: { alignItems: "stretch" }, children: items.map((item, i) => /* @__PURE__ */ jsx20(CardTestimonial, { item }, i)) });
|
|
801
987
|
}
|
|
802
988
|
var SdTestimonial = {
|
|
803
989
|
/** 카드형 — 그리드 배치용 */
|
|
@@ -815,86 +1001,86 @@ var SdTestimonialGrid = SdTestimonial.Grid;
|
|
|
815
1001
|
import {
|
|
816
1002
|
Card as Card5,
|
|
817
1003
|
Divider,
|
|
818
|
-
Group as
|
|
1004
|
+
Group as Group6,
|
|
819
1005
|
SimpleGrid as SimpleGrid3,
|
|
820
|
-
Stack as
|
|
1006
|
+
Stack as Stack9,
|
|
821
1007
|
ThemeIcon as ThemeIcon3
|
|
822
1008
|
} from "@mantine/core";
|
|
823
|
-
import { IconCheck, IconX as
|
|
824
|
-
import { jsx as
|
|
1009
|
+
import { IconCheck as IconCheck2, IconX as IconX3 } from "@tabler/icons-react";
|
|
1010
|
+
import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
825
1011
|
function Default(_a4) {
|
|
826
1012
|
var _b = _a4, { item, onSelect } = _b, cardProps = __objRest(_b, ["item", "onSelect"]);
|
|
827
1013
|
var _a5;
|
|
828
|
-
return /* @__PURE__ */
|
|
829
|
-
/* @__PURE__ */ jsxs8(
|
|
830
|
-
/* @__PURE__ */ jsxs8(
|
|
831
|
-
/* @__PURE__ */
|
|
832
|
-
item.isPopular && /* @__PURE__ */
|
|
1014
|
+
return /* @__PURE__ */ jsx21(Card5, __spreadProps(__spreadValues({ withBorder: true, style: { position: "relative" } }, cardProps), { children: /* @__PURE__ */ jsxs8(Stack9, { gap: "xl", children: [
|
|
1015
|
+
/* @__PURE__ */ jsxs8(Stack9, { gap: "xs", children: [
|
|
1016
|
+
/* @__PURE__ */ jsxs8(Group6, { justify: "space-between", align: "flex-start", children: [
|
|
1017
|
+
/* @__PURE__ */ jsx21(SdTitle.Card, { children: item.name }),
|
|
1018
|
+
item.isPopular && /* @__PURE__ */ jsx21(SdBadge.Primary, { children: "\uCD94\uCC9C" })
|
|
833
1019
|
] }),
|
|
834
|
-
item.description && /* @__PURE__ */
|
|
1020
|
+
item.description && /* @__PURE__ */ jsx21(SdText.Sub, { children: item.description })
|
|
835
1021
|
] }),
|
|
836
|
-
/* @__PURE__ */ jsxs8(
|
|
837
|
-
/* @__PURE__ */
|
|
1022
|
+
/* @__PURE__ */ jsxs8(Group6, { gap: 4, align: "baseline", children: [
|
|
1023
|
+
/* @__PURE__ */ jsx21(SdTitle.Display, { children: item.price }),
|
|
838
1024
|
item.period && /* @__PURE__ */ jsxs8(SdText.Sub, { children: [
|
|
839
1025
|
"/ ",
|
|
840
1026
|
item.period
|
|
841
1027
|
] })
|
|
842
1028
|
] }),
|
|
843
|
-
/* @__PURE__ */
|
|
844
|
-
/* @__PURE__ */
|
|
845
|
-
/* @__PURE__ */
|
|
1029
|
+
/* @__PURE__ */ jsx21(Divider, {}),
|
|
1030
|
+
/* @__PURE__ */ jsx21(Stack9, { gap: "sm", children: item.features.map((f, i) => /* @__PURE__ */ jsxs8(Group6, { gap: "sm", wrap: "nowrap", children: [
|
|
1031
|
+
/* @__PURE__ */ jsx21(
|
|
846
1032
|
ThemeIcon3,
|
|
847
1033
|
{
|
|
848
1034
|
size: "xs",
|
|
849
1035
|
radius: "xl",
|
|
850
1036
|
color: f.included ? "primary" : "slate",
|
|
851
1037
|
variant: f.included ? "filled" : "subtle",
|
|
852
|
-
children: f.included ? /* @__PURE__ */
|
|
1038
|
+
children: f.included ? /* @__PURE__ */ jsx21(IconCheck2, { size: 12 }) : /* @__PURE__ */ jsx21(IconX3, { size: 12 })
|
|
853
1039
|
}
|
|
854
1040
|
),
|
|
855
|
-
/* @__PURE__ */
|
|
1041
|
+
/* @__PURE__ */ jsx21(SdText.Body, { fz: "sm", c: f.included ? "slate.7" : "slate.4", children: f.text })
|
|
856
1042
|
] }, i)) }),
|
|
857
|
-
/* @__PURE__ */
|
|
1043
|
+
/* @__PURE__ */ jsx21(SdButton.Outline, { fullWidth: true, onClick: () => onSelect == null ? void 0 : onSelect(item), children: (_a5 = item.ctaLabel) != null ? _a5 : "\uC2DC\uC791\uD558\uAE30" })
|
|
858
1044
|
] }) }));
|
|
859
1045
|
}
|
|
860
1046
|
function Featured(_a4) {
|
|
861
1047
|
var _b = _a4, { item, onSelect } = _b, cardProps = __objRest(_b, ["item", "onSelect"]);
|
|
862
1048
|
var _a5;
|
|
863
|
-
return /* @__PURE__ */
|
|
864
|
-
/* @__PURE__ */ jsxs8(
|
|
865
|
-
/* @__PURE__ */ jsxs8(
|
|
866
|
-
/* @__PURE__ */
|
|
867
|
-
item.isPopular && /* @__PURE__ */
|
|
1049
|
+
return /* @__PURE__ */ jsx21(Card5, __spreadProps(__spreadValues({ bg: "primary.6", style: { position: "relative" } }, cardProps), { children: /* @__PURE__ */ jsxs8(Stack9, { gap: "xl", children: [
|
|
1050
|
+
/* @__PURE__ */ jsxs8(Stack9, { gap: "xs", children: [
|
|
1051
|
+
/* @__PURE__ */ jsxs8(Group6, { justify: "space-between", align: "flex-start", children: [
|
|
1052
|
+
/* @__PURE__ */ jsx21(SdTitle.Card, { c: "white", children: item.name }),
|
|
1053
|
+
item.isPopular && /* @__PURE__ */ jsx21(SdBadge.Default, { c: "white", style: { borderColor: "rgba(255,255,255,0.5)" }, children: "\uCD94\uCC9C" })
|
|
868
1054
|
] }),
|
|
869
|
-
item.description && /* @__PURE__ */
|
|
1055
|
+
item.description && /* @__PURE__ */ jsx21(SdText.Body, { c: "primary.1", children: item.description })
|
|
870
1056
|
] }),
|
|
871
|
-
/* @__PURE__ */ jsxs8(
|
|
872
|
-
/* @__PURE__ */
|
|
1057
|
+
/* @__PURE__ */ jsxs8(Group6, { gap: 4, align: "baseline", children: [
|
|
1058
|
+
/* @__PURE__ */ jsx21(SdTitle.Display, { c: "white", children: item.price }),
|
|
873
1059
|
item.period && /* @__PURE__ */ jsxs8(SdText.Body, { c: "primary.2", children: [
|
|
874
1060
|
"/ ",
|
|
875
1061
|
item.period
|
|
876
1062
|
] })
|
|
877
1063
|
] }),
|
|
878
|
-
/* @__PURE__ */
|
|
879
|
-
/* @__PURE__ */
|
|
880
|
-
/* @__PURE__ */
|
|
1064
|
+
/* @__PURE__ */ jsx21(Divider, { color: "primary.4" }),
|
|
1065
|
+
/* @__PURE__ */ jsx21(Stack9, { gap: "sm", children: item.features.map((f, i) => /* @__PURE__ */ jsxs8(Group6, { gap: "sm", wrap: "nowrap", children: [
|
|
1066
|
+
/* @__PURE__ */ jsx21(
|
|
881
1067
|
ThemeIcon3,
|
|
882
1068
|
{
|
|
883
1069
|
size: "xs",
|
|
884
1070
|
radius: "xl",
|
|
885
1071
|
color: "white",
|
|
886
1072
|
variant: f.included ? "filled" : "subtle",
|
|
887
|
-
children: f.included ? /* @__PURE__ */
|
|
1073
|
+
children: f.included ? /* @__PURE__ */ jsx21(IconCheck2, { size: 12, color: "var(--mantine-color-primary-6)" }) : /* @__PURE__ */ jsx21(IconX3, { size: 12, color: "rgba(255,255,255,0.4)" })
|
|
888
1074
|
}
|
|
889
1075
|
),
|
|
890
|
-
/* @__PURE__ */
|
|
1076
|
+
/* @__PURE__ */ jsx21(SdText.Body, { fz: "sm", c: f.included ? "white" : "primary.3", children: f.text })
|
|
891
1077
|
] }, i)) }),
|
|
892
|
-
/* @__PURE__ */
|
|
1078
|
+
/* @__PURE__ */ jsx21(SdButton.White, { fullWidth: true, onClick: () => onSelect == null ? void 0 : onSelect(item), children: (_a5 = item.ctaLabel) != null ? _a5 : "\uC2DC\uC791\uD558\uAE30" })
|
|
893
1079
|
] }) }));
|
|
894
1080
|
}
|
|
895
1081
|
function Grid2({ items, cols = { base: 1, sm: 2, md: 3 }, onSelect }) {
|
|
896
|
-
return /* @__PURE__ */
|
|
897
|
-
(item, i) => item.isPopular ? /* @__PURE__ */
|
|
1082
|
+
return /* @__PURE__ */ jsx21(SimpleGrid3, { cols, spacing: "xl", style: { alignItems: "stretch" }, children: items.map(
|
|
1083
|
+
(item, i) => item.isPopular ? /* @__PURE__ */ jsx21(Featured, { item, onSelect }, i) : /* @__PURE__ */ jsx21(Default, { item, onSelect }, i)
|
|
898
1084
|
) });
|
|
899
1085
|
}
|
|
900
1086
|
var SdPricingCard = {
|
|
@@ -910,31 +1096,31 @@ var SdPricingCardFeatured = SdPricingCard.Featured;
|
|
|
910
1096
|
var SdPricingCardGrid = SdPricingCard.Grid;
|
|
911
1097
|
|
|
912
1098
|
// ui/molecule/Faq.tsx
|
|
913
|
-
import { Accordion, Box as Box7, Stack as
|
|
914
|
-
import { jsx as
|
|
1099
|
+
import { Accordion, Box as Box7, Stack as Stack10 } from "@mantine/core";
|
|
1100
|
+
import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
915
1101
|
function Default2(_a4) {
|
|
916
1102
|
var _b = _a4, { items } = _b, boxProps = __objRest(_b, ["items"]);
|
|
917
|
-
return /* @__PURE__ */
|
|
918
|
-
/* @__PURE__ */
|
|
919
|
-
/* @__PURE__ */
|
|
1103
|
+
return /* @__PURE__ */ jsx22(Box7, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ jsx22(Accordion, { variant: "separated", radius: "md", children: items.map((item, i) => /* @__PURE__ */ jsxs9(Accordion.Item, { value: String(i), children: [
|
|
1104
|
+
/* @__PURE__ */ jsx22(Accordion.Control, { children: /* @__PURE__ */ jsx22(SdText.Strong, { fz: "sm", children: item.question }) }),
|
|
1105
|
+
/* @__PURE__ */ jsx22(Accordion.Panel, { children: /* @__PURE__ */ jsx22(SdText.Body, { fz: "sm", children: item.answer }) })
|
|
920
1106
|
] }, i)) }) }));
|
|
921
1107
|
}
|
|
922
1108
|
function Filled(_a4) {
|
|
923
1109
|
var _b = _a4, { items } = _b, boxProps = __objRest(_b, ["items"]);
|
|
924
|
-
return /* @__PURE__ */
|
|
925
|
-
/* @__PURE__ */
|
|
926
|
-
/* @__PURE__ */
|
|
1110
|
+
return /* @__PURE__ */ jsx22(Box7, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ jsx22(Accordion, { variant: "filled", radius: "md", children: items.map((item, i) => /* @__PURE__ */ jsxs9(Accordion.Item, { value: String(i), children: [
|
|
1111
|
+
/* @__PURE__ */ jsx22(Accordion.Control, { children: /* @__PURE__ */ jsx22(SdText.Strong, { fz: "sm", children: item.question }) }),
|
|
1112
|
+
/* @__PURE__ */ jsx22(Accordion.Panel, { children: /* @__PURE__ */ jsx22(SdText.Body, { fz: "sm", children: item.answer }) })
|
|
927
1113
|
] }, i)) }) }));
|
|
928
1114
|
}
|
|
929
1115
|
function WithHeader(_a4) {
|
|
930
1116
|
var _b = _a4, { label, title, description, items } = _b, boxProps = __objRest(_b, ["label", "title", "description", "items"]);
|
|
931
|
-
return /* @__PURE__ */ jsxs9(
|
|
932
|
-
/* @__PURE__ */ jsxs9(
|
|
933
|
-
label && /* @__PURE__ */
|
|
934
|
-
/* @__PURE__ */
|
|
935
|
-
description && /* @__PURE__ */
|
|
1117
|
+
return /* @__PURE__ */ jsxs9(Stack10, __spreadProps(__spreadValues({ gap: "xl" }, boxProps), { children: [
|
|
1118
|
+
/* @__PURE__ */ jsxs9(Stack10, { gap: "xs", children: [
|
|
1119
|
+
label && /* @__PURE__ */ jsx22(SdText.Eyebrow, { children: label }),
|
|
1120
|
+
/* @__PURE__ */ jsx22(SdTitle.Section, { children: title }),
|
|
1121
|
+
description && /* @__PURE__ */ jsx22(SdText.Body, { children: description })
|
|
936
1122
|
] }),
|
|
937
|
-
/* @__PURE__ */
|
|
1123
|
+
/* @__PURE__ */ jsx22(Default2, { items })
|
|
938
1124
|
] }));
|
|
939
1125
|
}
|
|
940
1126
|
var SdFaq = {
|
|
@@ -950,8 +1136,8 @@ var SdFaqFilled = SdFaq.Filled;
|
|
|
950
1136
|
var SdFaqWithHeader = SdFaq.WithHeader;
|
|
951
1137
|
|
|
952
1138
|
// ui/molecule/Cta.tsx
|
|
953
|
-
import { Box as Box8, Center as Center2, Group as
|
|
954
|
-
import { jsx as
|
|
1139
|
+
import { Box as Box8, Center as Center2, Group as Group7, Stack as Stack11 } from "@mantine/core";
|
|
1140
|
+
import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
955
1141
|
function Banner(_a4) {
|
|
956
1142
|
var _b = _a4, {
|
|
957
1143
|
label,
|
|
@@ -970,15 +1156,15 @@ function Banner(_a4) {
|
|
|
970
1156
|
"onPrimary",
|
|
971
1157
|
"onSecondary"
|
|
972
1158
|
]);
|
|
973
|
-
return /* @__PURE__ */
|
|
974
|
-
/* @__PURE__ */ jsxs10(
|
|
975
|
-
label && /* @__PURE__ */
|
|
976
|
-
/* @__PURE__ */
|
|
977
|
-
description && /* @__PURE__ */
|
|
1159
|
+
return /* @__PURE__ */ jsx23(Box8, __spreadProps(__spreadValues({ bg: "primary.7", py: { base: "xl", md: 80 }, px: { base: "md", md: "xl" } }, boxProps), { children: /* @__PURE__ */ jsx23(Center2, { children: /* @__PURE__ */ jsxs10(Stack11, { gap: "xl", align: "center", maw: 600, children: [
|
|
1160
|
+
/* @__PURE__ */ jsxs10(Stack11, { gap: "sm", align: "center", children: [
|
|
1161
|
+
label && /* @__PURE__ */ jsx23(SdText.Eyebrow, { c: "primary.3", children: label }),
|
|
1162
|
+
/* @__PURE__ */ jsx23(SdTitle.Section, { c: "white", ta: "center", children: title }),
|
|
1163
|
+
description && /* @__PURE__ */ jsx23(SdText.Body, { c: "primary.2", ta: "center", children: description })
|
|
978
1164
|
] }),
|
|
979
|
-
/* @__PURE__ */ jsxs10(
|
|
980
|
-
/* @__PURE__ */
|
|
981
|
-
secondaryLabel && /* @__PURE__ */
|
|
1165
|
+
/* @__PURE__ */ jsxs10(Group7, { gap: "sm", children: [
|
|
1166
|
+
/* @__PURE__ */ jsx23(SdButton.White, { size: "md", onClick: onPrimary, children: primaryLabel }),
|
|
1167
|
+
secondaryLabel && /* @__PURE__ */ jsx23(SdButton.Ghost, { size: "md", c: "primary.2", onClick: onSecondary, children: secondaryLabel })
|
|
982
1168
|
] })
|
|
983
1169
|
] }) }) }));
|
|
984
1170
|
}
|
|
@@ -1000,7 +1186,7 @@ function Subtle(_a4) {
|
|
|
1000
1186
|
"onPrimary",
|
|
1001
1187
|
"onSecondary"
|
|
1002
1188
|
]);
|
|
1003
|
-
return /* @__PURE__ */
|
|
1189
|
+
return /* @__PURE__ */ jsx23(
|
|
1004
1190
|
Box8,
|
|
1005
1191
|
__spreadProps(__spreadValues({
|
|
1006
1192
|
bg: "primary.0",
|
|
@@ -1008,15 +1194,15 @@ function Subtle(_a4) {
|
|
|
1008
1194
|
px: { base: "md", md: "xl" },
|
|
1009
1195
|
style: { borderRadius: "var(--mantine-radius-lg)" }
|
|
1010
1196
|
}, boxProps), {
|
|
1011
|
-
children: /* @__PURE__ */
|
|
1012
|
-
/* @__PURE__ */ jsxs10(
|
|
1013
|
-
label && /* @__PURE__ */
|
|
1014
|
-
/* @__PURE__ */
|
|
1015
|
-
description && /* @__PURE__ */
|
|
1197
|
+
children: /* @__PURE__ */ jsx23(Center2, { children: /* @__PURE__ */ jsxs10(Stack11, { gap: "lg", align: "center", maw: 560, children: [
|
|
1198
|
+
/* @__PURE__ */ jsxs10(Stack11, { gap: "sm", align: "center", children: [
|
|
1199
|
+
label && /* @__PURE__ */ jsx23(SdText.Eyebrow, { children: label }),
|
|
1200
|
+
/* @__PURE__ */ jsx23(SdTitle.Section, { ta: "center", children: title }),
|
|
1201
|
+
description && /* @__PURE__ */ jsx23(SdText.Body, { ta: "center", children: description })
|
|
1016
1202
|
] }),
|
|
1017
|
-
/* @__PURE__ */ jsxs10(
|
|
1018
|
-
/* @__PURE__ */
|
|
1019
|
-
secondaryLabel && /* @__PURE__ */
|
|
1203
|
+
/* @__PURE__ */ jsxs10(Group7, { gap: "sm", children: [
|
|
1204
|
+
/* @__PURE__ */ jsx23(SdButton.Primary, { size: "md", onClick: onPrimary, children: primaryLabel }),
|
|
1205
|
+
secondaryLabel && /* @__PURE__ */ jsx23(SdButton.Outline, { size: "md", onClick: onSecondary, children: secondaryLabel })
|
|
1020
1206
|
] })
|
|
1021
1207
|
] }) })
|
|
1022
1208
|
})
|
|
@@ -1040,7 +1226,7 @@ function Inline(_a4) {
|
|
|
1040
1226
|
"onPrimary",
|
|
1041
1227
|
"onSecondary"
|
|
1042
1228
|
]);
|
|
1043
|
-
return /* @__PURE__ */
|
|
1229
|
+
return /* @__PURE__ */ jsx23(
|
|
1044
1230
|
Box8,
|
|
1045
1231
|
__spreadProps(__spreadValues({
|
|
1046
1232
|
py: { base: "xl", md: 48 },
|
|
@@ -1050,15 +1236,15 @@ function Inline(_a4) {
|
|
|
1050
1236
|
borderBottom: "1px solid var(--mantine-color-slate-2)"
|
|
1051
1237
|
}
|
|
1052
1238
|
}, boxProps), {
|
|
1053
|
-
children: /* @__PURE__ */ jsxs10(
|
|
1054
|
-
/* @__PURE__ */ jsxs10(
|
|
1055
|
-
label && /* @__PURE__ */
|
|
1056
|
-
/* @__PURE__ */
|
|
1057
|
-
description && /* @__PURE__ */
|
|
1239
|
+
children: /* @__PURE__ */ jsxs10(Group7, { justify: "space-between", align: "center", gap: "xl", children: [
|
|
1240
|
+
/* @__PURE__ */ jsxs10(Stack11, { gap: "xs", style: { flex: 1 }, children: [
|
|
1241
|
+
label && /* @__PURE__ */ jsx23(SdText.Eyebrow, { children: label }),
|
|
1242
|
+
/* @__PURE__ */ jsx23(SdTitle.Card, { children: title }),
|
|
1243
|
+
description && /* @__PURE__ */ jsx23(SdText.Sub, { children: description })
|
|
1058
1244
|
] }),
|
|
1059
|
-
/* @__PURE__ */ jsxs10(
|
|
1060
|
-
/* @__PURE__ */
|
|
1061
|
-
secondaryLabel && /* @__PURE__ */
|
|
1245
|
+
/* @__PURE__ */ jsxs10(Group7, { gap: "sm", wrap: "nowrap", children: [
|
|
1246
|
+
/* @__PURE__ */ jsx23(SdButton.Primary, { size: "md", onClick: onPrimary, children: primaryLabel }),
|
|
1247
|
+
secondaryLabel && /* @__PURE__ */ jsx23(SdButton.Outline, { size: "md", onClick: onSecondary, children: secondaryLabel })
|
|
1062
1248
|
] })
|
|
1063
1249
|
] })
|
|
1064
1250
|
})
|
|
@@ -1078,32 +1264,32 @@ var SdCtaInline = SdCta.Inline;
|
|
|
1078
1264
|
|
|
1079
1265
|
// ui/molecule/Solution.tsx
|
|
1080
1266
|
import { useState } from "react";
|
|
1081
|
-
import { Button as Button2, Divider as Divider2, Group as
|
|
1267
|
+
import { Button as Button2, Divider as Divider2, Group as Group8, Stack as Stack13, ThemeIcon as ThemeIcon4 } from "@mantine/core";
|
|
1082
1268
|
import Link3 from "next/link";
|
|
1083
1269
|
|
|
1084
1270
|
// ui/molecule/SolutionCard.tsx
|
|
1085
|
-
import { Button, Card as Card6, SimpleGrid as SimpleGrid4, Stack as
|
|
1271
|
+
import { Button, Card as Card6, SimpleGrid as SimpleGrid4, Stack as Stack12 } from "@mantine/core";
|
|
1086
1272
|
import Link2 from "next/link";
|
|
1087
|
-
import { jsx as
|
|
1273
|
+
import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1088
1274
|
function SolutionCardItem(_a4) {
|
|
1089
1275
|
var _b = _a4, { item, onSelect } = _b, cardProps = __objRest(_b, ["item", "onSelect"]);
|
|
1090
1276
|
var _a5, _b2;
|
|
1091
|
-
return /* @__PURE__ */
|
|
1277
|
+
return /* @__PURE__ */ jsx24(Card6, __spreadProps(__spreadValues({ withBorder: true, h: "100%", style: { display: "flex", flexDirection: "column" } }, cardProps), { children: /* @__PURE__ */ jsxs11(Stack12, { gap: "md", style: { flex: 1 }, children: [
|
|
1092
1278
|
item.icon,
|
|
1093
|
-
/* @__PURE__ */
|
|
1094
|
-
/* @__PURE__ */
|
|
1095
|
-
/* @__PURE__ */
|
|
1096
|
-
item.href ? /* @__PURE__ */ jsxs11(Button, { variant: "subtle", color: "slate", component: Link2, href: item.href, children: [
|
|
1279
|
+
/* @__PURE__ */ jsx24(SdBadge.Primary, { children: item.category }),
|
|
1280
|
+
/* @__PURE__ */ jsx24(SdTitle.Card, { children: item.title }),
|
|
1281
|
+
/* @__PURE__ */ jsx24(SdText.Body, { children: item.description }),
|
|
1282
|
+
item.href ? /* @__PURE__ */ jsxs11(Button, { variant: "subtle", color: "slate", component: Link2, href: item.href, mt: "auto", children: [
|
|
1097
1283
|
(_a5 = item.ctaLabel) != null ? _a5 : "\uC790\uC138\uD788 \uBCF4\uAE30",
|
|
1098
1284
|
" \u2192"
|
|
1099
|
-
] }) : /* @__PURE__ */ jsxs11(SdButton.Ghost, { onClick: () => onSelect == null ? void 0 : onSelect(item), children: [
|
|
1285
|
+
] }) : /* @__PURE__ */ jsxs11(SdButton.Ghost, { onClick: () => onSelect == null ? void 0 : onSelect(item), mt: "auto", children: [
|
|
1100
1286
|
(_b2 = item.ctaLabel) != null ? _b2 : "\uC790\uC138\uD788 \uBCF4\uAE30",
|
|
1101
1287
|
" \u2192"
|
|
1102
1288
|
] })
|
|
1103
1289
|
] }) }));
|
|
1104
1290
|
}
|
|
1105
1291
|
function Grid3({ items, cols = { base: 1, sm: 2, md: 3 }, onSelect }) {
|
|
1106
|
-
return /* @__PURE__ */
|
|
1292
|
+
return /* @__PURE__ */ jsx24(SimpleGrid4, { cols, spacing: "xl", children: items.map((item, i) => /* @__PURE__ */ jsx24(SolutionCardItem, { item, onSelect }, i)) });
|
|
1107
1293
|
}
|
|
1108
1294
|
var SdSolutionCard = {
|
|
1109
1295
|
/** 단일 compact 카드 */
|
|
@@ -1115,27 +1301,27 @@ var SdSolutionCardItem = SdSolutionCard.Item;
|
|
|
1115
1301
|
var SdSolutionCardGrid = SdSolutionCard.Grid;
|
|
1116
1302
|
|
|
1117
1303
|
// ui/molecule/Solution.tsx
|
|
1118
|
-
import { jsx as
|
|
1304
|
+
import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1119
1305
|
function Filtered({ items, allLabel = "\uC804\uCCB4", cols, onSelect }) {
|
|
1120
1306
|
const categories = ["all", ...Array.from(new Set(items.map((i) => i.category)))];
|
|
1121
1307
|
const [active, setActive] = useState("all");
|
|
1122
1308
|
const filtered = active === "all" ? items : items.filter((i) => i.category === active);
|
|
1123
|
-
return /* @__PURE__ */ jsxs12(
|
|
1124
|
-
/* @__PURE__ */
|
|
1125
|
-
/* @__PURE__ */
|
|
1309
|
+
return /* @__PURE__ */ jsxs12(Stack13, { gap: "xl", children: [
|
|
1310
|
+
/* @__PURE__ */ jsx25(SdTabs.Pills, { value: active, onChange: (v) => setActive(v != null ? v : "all"), children: /* @__PURE__ */ jsx25(SdTabs.Pills.List, { children: categories.map((cat) => /* @__PURE__ */ jsx25(SdTabs.Pills.Tab, { value: cat, children: cat === "all" ? allLabel : cat }, cat)) }) }),
|
|
1311
|
+
/* @__PURE__ */ jsx25(SdSolutionCard.Grid, { items: filtered, cols, onSelect })
|
|
1126
1312
|
] });
|
|
1127
1313
|
}
|
|
1128
1314
|
function List({ items, onSelect }) {
|
|
1129
|
-
return /* @__PURE__ */
|
|
1315
|
+
return /* @__PURE__ */ jsx25(Stack13, { gap: 0, children: items.map((item, i) => {
|
|
1130
1316
|
var _a4, _b;
|
|
1131
1317
|
return /* @__PURE__ */ jsxs12("div", { children: [
|
|
1132
|
-
i > 0 && /* @__PURE__ */
|
|
1133
|
-
/* @__PURE__ */ jsxs12(
|
|
1134
|
-
item.icon && /* @__PURE__ */
|
|
1135
|
-
/* @__PURE__ */ jsxs12(
|
|
1136
|
-
/* @__PURE__ */
|
|
1137
|
-
/* @__PURE__ */
|
|
1138
|
-
/* @__PURE__ */
|
|
1318
|
+
i > 0 && /* @__PURE__ */ jsx25(Divider2, {}),
|
|
1319
|
+
/* @__PURE__ */ jsxs12(Group8, { align: "flex-start", py: "lg", gap: "lg", children: [
|
|
1320
|
+
item.icon && /* @__PURE__ */ jsx25(ThemeIcon4, { variant: "light", color: "primary", size: "xl", radius: "md", children: item.icon }),
|
|
1321
|
+
/* @__PURE__ */ jsxs12(Stack13, { gap: "xs", style: { flex: 1 }, children: [
|
|
1322
|
+
/* @__PURE__ */ jsx25(SdBadge.Primary, { children: item.category }),
|
|
1323
|
+
/* @__PURE__ */ jsx25(SdTitle.Card, { children: item.title }),
|
|
1324
|
+
/* @__PURE__ */ jsx25(SdText.Body, { children: item.description }),
|
|
1139
1325
|
item.href ? /* @__PURE__ */ jsxs12(
|
|
1140
1326
|
Button2,
|
|
1141
1327
|
{
|
|
@@ -1176,7 +1362,7 @@ var SdSolutionList = SdSolution.List;
|
|
|
1176
1362
|
|
|
1177
1363
|
// ui/molecule/Clients.tsx
|
|
1178
1364
|
import { Anchor, Box as Box9, SimpleGrid as SimpleGrid5, Tooltip } from "@mantine/core";
|
|
1179
|
-
import { jsx as
|
|
1365
|
+
import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1180
1366
|
var grayStyle = {
|
|
1181
1367
|
filter: "grayscale(1) opacity(0.5)",
|
|
1182
1368
|
transition: "filter 0.25s"
|
|
@@ -1185,7 +1371,7 @@ var colorStyle = {
|
|
|
1185
1371
|
filter: "grayscale(0) opacity(1)"
|
|
1186
1372
|
};
|
|
1187
1373
|
function LogoImage({ client, height }) {
|
|
1188
|
-
return /* @__PURE__ */
|
|
1374
|
+
return /* @__PURE__ */ jsx26(Tooltip, { label: client.name, withArrow: true, children: /* @__PURE__ */ jsx26(Anchor, { href: client.url, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx26(
|
|
1189
1375
|
"img",
|
|
1190
1376
|
{
|
|
1191
1377
|
src: client.logo,
|
|
@@ -1201,7 +1387,7 @@ function Grid4({
|
|
|
1201
1387
|
cols = { base: 2, sm: 3, md: 4, lg: 6 },
|
|
1202
1388
|
logoHeight = 40
|
|
1203
1389
|
}) {
|
|
1204
|
-
return /* @__PURE__ */
|
|
1390
|
+
return /* @__PURE__ */ jsx26(SimpleGrid5, { cols, spacing: "xl", children: items.map((client, i) => /* @__PURE__ */ jsx26(
|
|
1205
1391
|
Box9,
|
|
1206
1392
|
{
|
|
1207
1393
|
style: {
|
|
@@ -1210,7 +1396,7 @@ function Grid4({
|
|
|
1210
1396
|
justifyContent: "center",
|
|
1211
1397
|
padding: "12px 8px"
|
|
1212
1398
|
},
|
|
1213
|
-
children: /* @__PURE__ */
|
|
1399
|
+
children: /* @__PURE__ */ jsx26(LogoImage, { client, height: logoHeight })
|
|
1214
1400
|
},
|
|
1215
1401
|
i
|
|
1216
1402
|
)) });
|
|
@@ -1219,8 +1405,8 @@ var KEYFRAME = `@keyframes sd-clients-marquee { from { transform: translateX(0)
|
|
|
1219
1405
|
function Marquee({ items, speed = 40, logoHeight = 36, gap = 64 }) {
|
|
1220
1406
|
const doubled = [...items, ...items];
|
|
1221
1407
|
return /* @__PURE__ */ jsxs13(Box9, { style: { overflow: "hidden" }, children: [
|
|
1222
|
-
/* @__PURE__ */
|
|
1223
|
-
/* @__PURE__ */
|
|
1408
|
+
/* @__PURE__ */ jsx26("style", { children: KEYFRAME }),
|
|
1409
|
+
/* @__PURE__ */ jsx26(
|
|
1224
1410
|
Box9,
|
|
1225
1411
|
{
|
|
1226
1412
|
style: {
|
|
@@ -1238,7 +1424,7 @@ function Marquee({ items, speed = 40, logoHeight = 36, gap = 64 }) {
|
|
|
1238
1424
|
;
|
|
1239
1425
|
e.currentTarget.style.animationPlayState = "running";
|
|
1240
1426
|
},
|
|
1241
|
-
children: doubled.map((client, i) => /* @__PURE__ */
|
|
1427
|
+
children: doubled.map((client, i) => /* @__PURE__ */ jsx26(LogoImage, { client, height: logoHeight }, i))
|
|
1242
1428
|
}
|
|
1243
1429
|
)
|
|
1244
1430
|
] });
|
|
@@ -1254,11 +1440,11 @@ var SdClientsMarquee = Marquee;
|
|
|
1254
1440
|
|
|
1255
1441
|
// ui/molecule/Map.tsx
|
|
1256
1442
|
import { useState as useState2 } from "react";
|
|
1257
|
-
import { Box as Box10, Stack as
|
|
1258
|
-
import { jsx as
|
|
1443
|
+
import { Box as Box10, Stack as Stack14 } from "@mantine/core";
|
|
1444
|
+
import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1259
1445
|
function MapFrame({ address, height }) {
|
|
1260
|
-
return /* @__PURE__ */ jsxs14(
|
|
1261
|
-
/* @__PURE__ */
|
|
1446
|
+
return /* @__PURE__ */ jsxs14(Stack14, { gap: "xs", children: [
|
|
1447
|
+
/* @__PURE__ */ jsx27(Box10, { style: { borderRadius: "var(--mantine-radius-md)", overflow: "hidden", height }, children: /* @__PURE__ */ jsx27(
|
|
1262
1448
|
"iframe",
|
|
1263
1449
|
{
|
|
1264
1450
|
src: address.embbedUrl,
|
|
@@ -1282,18 +1468,18 @@ function MapFrame({ address, height }) {
|
|
|
1282
1468
|
function Single(_a4) {
|
|
1283
1469
|
var _b = _a4, { address, height = 400 } = _b, boxProps = __objRest(_b, ["address", "height"]);
|
|
1284
1470
|
if (!address.embbedUrl) return null;
|
|
1285
|
-
return /* @__PURE__ */
|
|
1471
|
+
return /* @__PURE__ */ jsx27(Box10, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ jsx27(MapFrame, { address, height }) }));
|
|
1286
1472
|
}
|
|
1287
1473
|
function Tabs2({ addresses, height = 400 }) {
|
|
1288
1474
|
var _a4, _b, _c;
|
|
1289
1475
|
const mapped = addresses.filter((a) => a.embbedUrl);
|
|
1290
1476
|
const [active, setActive] = useState2((_b = (_a4 = mapped[0]) == null ? void 0 : _a4.label) != null ? _b : "");
|
|
1291
1477
|
if (mapped.length === 0) return null;
|
|
1292
|
-
if (mapped.length === 1) return /* @__PURE__ */
|
|
1478
|
+
if (mapped.length === 1) return /* @__PURE__ */ jsx27(MapFrame, { address: mapped[0], height });
|
|
1293
1479
|
const current = (_c = mapped.find((a) => a.label === active)) != null ? _c : mapped[0];
|
|
1294
|
-
return /* @__PURE__ */ jsxs14(
|
|
1295
|
-
/* @__PURE__ */
|
|
1296
|
-
/* @__PURE__ */
|
|
1480
|
+
return /* @__PURE__ */ jsxs14(Stack14, { gap: "md", children: [
|
|
1481
|
+
/* @__PURE__ */ jsx27(SdTabs.Pills, { value: active, onChange: (v) => setActive(v != null ? v : mapped[0].label), children: /* @__PURE__ */ jsx27(SdTabs.Pills.List, { children: mapped.map((addr) => /* @__PURE__ */ jsx27(SdTabs.Pills.Tab, { value: addr.label, children: addr.label }, addr.label)) }) }),
|
|
1482
|
+
/* @__PURE__ */ jsx27(MapFrame, { address: current, height })
|
|
1297
1483
|
] });
|
|
1298
1484
|
}
|
|
1299
1485
|
var SdMap = {
|
|
@@ -1307,9 +1493,9 @@ var SdMapTabs = Tabs2;
|
|
|
1307
1493
|
|
|
1308
1494
|
// ui/organism/HeroCarousel.tsx
|
|
1309
1495
|
import { Carousel } from "@mantine/carousel";
|
|
1310
|
-
import { Anchor as Anchor2, Box as Box11, Group as
|
|
1496
|
+
import { Anchor as Anchor2, Box as Box11, Group as Group9, Stack as Stack15 } from "@mantine/core";
|
|
1311
1497
|
import { IconArrowNarrowRight } from "@tabler/icons-react";
|
|
1312
|
-
import { Fragment as Fragment3, jsx as
|
|
1498
|
+
import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1313
1499
|
var variantMap = {
|
|
1314
1500
|
primary: SdButton.Primary,
|
|
1315
1501
|
secondary: SdButton.Secondary,
|
|
@@ -1319,25 +1505,25 @@ var variantMap = {
|
|
|
1319
1505
|
function CtaButton({ cta }) {
|
|
1320
1506
|
var _a4;
|
|
1321
1507
|
const Button3 = variantMap[(_a4 = cta.variant) != null ? _a4 : "primary"];
|
|
1322
|
-
return /* @__PURE__ */
|
|
1508
|
+
return /* @__PURE__ */ jsx28(Anchor2, { href: cta.href, underline: "never", children: cta.icon ? /* @__PURE__ */ jsx28(Button3, { size: "md", rightSection: /* @__PURE__ */ jsx28(IconArrowNarrowRight, {}), children: cta.label }) : /* @__PURE__ */ jsx28(Button3, { size: "md", children: cta.label }) });
|
|
1323
1509
|
}
|
|
1324
1510
|
function HeroCarousel({ slides, children }) {
|
|
1325
|
-
if (children) return /* @__PURE__ */
|
|
1511
|
+
if (children) return /* @__PURE__ */ jsx28(Fragment3, { children });
|
|
1326
1512
|
const filterdSlides = filterAndSort(slides);
|
|
1327
|
-
return /* @__PURE__ */
|
|
1513
|
+
return /* @__PURE__ */ jsx28(Carousel, { withIndicators: true, height: "60svh", children: filterdSlides.map((slide, i) => /* @__PURE__ */ jsx28(Carousel.Slide, { children: /* @__PURE__ */ jsx28(
|
|
1328
1514
|
Box11,
|
|
1329
1515
|
{
|
|
1330
1516
|
style: {
|
|
1331
1517
|
height: "100%",
|
|
1332
|
-
backgroundImage: `url(${slide.image})`,
|
|
1518
|
+
backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url(${slide.image})`,
|
|
1333
1519
|
backgroundSize: "cover",
|
|
1334
1520
|
backgroundPosition: "center",
|
|
1335
1521
|
display: "flex",
|
|
1336
1522
|
alignItems: "center",
|
|
1337
1523
|
justifyContent: "center"
|
|
1338
1524
|
},
|
|
1339
|
-
children: /* @__PURE__ */ jsxs15(
|
|
1340
|
-
/* @__PURE__ */
|
|
1525
|
+
children: /* @__PURE__ */ jsxs15(Stack15, { align: "center", style: { textAlign: "center", maxWidth: 780 }, px: "xl", children: [
|
|
1526
|
+
/* @__PURE__ */ jsx28(
|
|
1341
1527
|
SdTextBox.Hero,
|
|
1342
1528
|
{
|
|
1343
1529
|
title: slide.title,
|
|
@@ -1346,29 +1532,58 @@ function HeroCarousel({ slides, children }) {
|
|
|
1346
1532
|
align: "center"
|
|
1347
1533
|
}
|
|
1348
1534
|
),
|
|
1349
|
-
slide.ctas && slide.ctas.length > 0 && /* @__PURE__ */
|
|
1535
|
+
slide.ctas && slide.ctas.length > 0 && /* @__PURE__ */ jsx28(Group9, { gap: "sm", mt: "md", children: slide.ctas.map((cta, i2) => /* @__PURE__ */ jsx28(CtaButton, { cta }, cta.href)) })
|
|
1350
1536
|
] })
|
|
1351
1537
|
}
|
|
1352
1538
|
) }, i)) });
|
|
1353
1539
|
}
|
|
1354
1540
|
|
|
1355
1541
|
// ui/organism/Header.tsx
|
|
1356
|
-
import { Box as Box12, Burger, Drawer, Group as
|
|
1542
|
+
import { Box as Box12, Burger, Drawer, Group as Group10, Menu, NavLink, Stack as Stack16 } from "@mantine/core";
|
|
1543
|
+
import { IconChevronDown } from "@tabler/icons-react";
|
|
1357
1544
|
import { useDisclosure, useFocusWithin, useHover, useMergedRef } from "@mantine/hooks";
|
|
1358
|
-
import { Fragment as Fragment4, jsx as
|
|
1545
|
+
import { Fragment as Fragment4, jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1359
1546
|
var BAR_HEIGHT = 60;
|
|
1360
|
-
function
|
|
1361
|
-
const [opened, { toggle, close }] = useDisclosure();
|
|
1547
|
+
function useNavTree(navItems) {
|
|
1362
1548
|
const visibleItems = filterAndSort(navItems);
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1549
|
+
return {
|
|
1550
|
+
topItems: visibleItems.filter((item) => !item.parentId),
|
|
1551
|
+
childrenOf: (parentId) => visibleItems.filter((item) => item.parentId === parentId),
|
|
1552
|
+
hasAnyChildren: visibleItems.some((item) => item.parentId)
|
|
1553
|
+
};
|
|
1554
|
+
}
|
|
1555
|
+
function MobileNav({ opened, close, topItems, childrenOf, loginFlag }) {
|
|
1556
|
+
return /* @__PURE__ */ jsx29(Drawer, { opened, onClose: close, hiddenFrom: "sm", size: "xs", children: /* @__PURE__ */ jsxs16(Stack16, { gap: 0, children: [
|
|
1557
|
+
topItems.map((item) => {
|
|
1558
|
+
const kids = childrenOf(item.id);
|
|
1559
|
+
if (kids.length === 0) {
|
|
1560
|
+
return /* @__PURE__ */ jsx29(Box12, { px: "sm", py: 8, children: /* @__PURE__ */ jsx29(SdLink.Body, { href: item.href, onClick: close, children: item.label }) }, item.id);
|
|
1561
|
+
}
|
|
1562
|
+
return /* @__PURE__ */ jsx29(
|
|
1563
|
+
NavLink,
|
|
1564
|
+
{
|
|
1565
|
+
label: item.label,
|
|
1566
|
+
component: item.href ? "a" : "button",
|
|
1567
|
+
href: item.href,
|
|
1568
|
+
childrenOffset: 28,
|
|
1569
|
+
onClick: kids.length > 0 ? void 0 : close,
|
|
1570
|
+
children: kids.map((kid) => /* @__PURE__ */ jsx29(NavLink, { label: kid.label, href: kid.href, onClick: close }, kid.id))
|
|
1571
|
+
},
|
|
1572
|
+
item.id
|
|
1573
|
+
);
|
|
1574
|
+
}),
|
|
1575
|
+
loginFlag && /* @__PURE__ */ jsx29(Stack16, { gap: "xs", mt: "md", children: /* @__PURE__ */ jsx29(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
|
|
1576
|
+
] }) });
|
|
1577
|
+
}
|
|
1578
|
+
function MegaHeader({ navItems, loginFlag }) {
|
|
1579
|
+
const [opened, { toggle, close }] = useDisclosure();
|
|
1580
|
+
const { topItems, childrenOf, hasAnyChildren } = useNavTree(navItems);
|
|
1366
1581
|
const { hovered, ref: hoverRef } = useHover();
|
|
1367
1582
|
const { focused, ref: focusRef } = useFocusWithin();
|
|
1368
1583
|
const rootRef = useMergedRef(hoverRef, focusRef);
|
|
1369
1584
|
const expanded = hasAnyChildren && (hovered || focused);
|
|
1370
1585
|
return /* @__PURE__ */ jsxs16(Fragment4, { children: [
|
|
1371
|
-
/* @__PURE__ */
|
|
1586
|
+
/* @__PURE__ */ jsx29(
|
|
1372
1587
|
Box12,
|
|
1373
1588
|
{
|
|
1374
1589
|
ref: rootRef,
|
|
@@ -1379,12 +1594,12 @@ function SdHeader({ navItems, loginFlag }) {
|
|
|
1379
1594
|
borderBottom: expanded ? "1px solid var(--mantine-color-slate-2)" : void 0,
|
|
1380
1595
|
transition: "box-shadow 0.15s"
|
|
1381
1596
|
},
|
|
1382
|
-
children: /* @__PURE__ */
|
|
1383
|
-
/* @__PURE__ */
|
|
1384
|
-
/* @__PURE__ */
|
|
1597
|
+
children: /* @__PURE__ */ jsx29(SdContainer, { children: /* @__PURE__ */ jsxs16(Group10, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
|
|
1598
|
+
/* @__PURE__ */ jsx29(Group10, { h: BAR_HEIGHT, align: "center", children: /* @__PURE__ */ jsx29(Logo, {}) }),
|
|
1599
|
+
/* @__PURE__ */ jsx29(Group10, { gap: "xl", align: "flex-start", wrap: "nowrap", visibleFrom: "sm", children: topItems.map((item) => {
|
|
1385
1600
|
const kids = childrenOf(item.id);
|
|
1386
|
-
return /* @__PURE__ */ jsxs16(
|
|
1387
|
-
/* @__PURE__ */
|
|
1601
|
+
return /* @__PURE__ */ jsxs16(Stack16, { gap: 0, align: "center", children: [
|
|
1602
|
+
/* @__PURE__ */ jsx29(Group10, { h: BAR_HEIGHT, align: "center", children: /* @__PURE__ */ jsx29(SdLink.Body, { href: item.href, children: item.label }) }),
|
|
1388
1603
|
kids.length > 0 && /*
|
|
1389
1604
|
Mantine Collapse를 쓰지 않는다 — 접힐 때 display:none이 되어
|
|
1390
1605
|
하위 링크가 폭 계산에서 빠졌다가 펼칠 때 다시 들어오면서
|
|
@@ -1392,7 +1607,7 @@ function SdHeader({ navItems, loginFlag }) {
|
|
|
1392
1607
|
height 0 + overflow hidden은 폭 기여를 유지하므로 간격이 고정된다.
|
|
1393
1608
|
visibility:hidden이 접힌 상태의 링크를 탭 순서에서도 빼준다.
|
|
1394
1609
|
*/
|
|
1395
|
-
/* @__PURE__ */
|
|
1610
|
+
/* @__PURE__ */ jsx29(
|
|
1396
1611
|
Box12,
|
|
1397
1612
|
{
|
|
1398
1613
|
"aria-hidden": !expanded,
|
|
@@ -1403,43 +1618,95 @@ function SdHeader({ navItems, loginFlag }) {
|
|
|
1403
1618
|
visibility: expanded ? "visible" : "hidden",
|
|
1404
1619
|
transition: "opacity 0.15s ease"
|
|
1405
1620
|
},
|
|
1406
|
-
children: /* @__PURE__ */
|
|
1621
|
+
children: /* @__PURE__ */ jsx29(Stack16, { gap: "xs", pt: 4, pb: "lg", align: "center", children: kids.map((kid) => /* @__PURE__ */ jsx29(SdLink.Sub, { href: kid.href, children: kid.label }, kid.id)) })
|
|
1407
1622
|
}
|
|
1408
1623
|
)
|
|
1409
1624
|
] }, item.id);
|
|
1410
1625
|
}) }),
|
|
1411
|
-
/* @__PURE__ */ jsxs16(
|
|
1412
|
-
/* @__PURE__ */
|
|
1413
|
-
loginFlag && /* @__PURE__ */
|
|
1626
|
+
/* @__PURE__ */ jsxs16(Group10, { h: BAR_HEIGHT, align: "center", gap: "sm", wrap: "nowrap", children: [
|
|
1627
|
+
/* @__PURE__ */ jsx29(Burger, { hiddenFrom: "sm", opened, onClick: toggle }),
|
|
1628
|
+
loginFlag && /* @__PURE__ */ jsx29(Group10, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ jsx29(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
|
|
1414
1629
|
] })
|
|
1415
1630
|
] }) })
|
|
1416
1631
|
}
|
|
1417
1632
|
),
|
|
1418
|
-
/* @__PURE__ */
|
|
1419
|
-
|
|
1633
|
+
/* @__PURE__ */ jsx29(
|
|
1634
|
+
MobileNav,
|
|
1635
|
+
{
|
|
1636
|
+
opened,
|
|
1637
|
+
close,
|
|
1638
|
+
topItems,
|
|
1639
|
+
childrenOf,
|
|
1640
|
+
loginFlag
|
|
1641
|
+
}
|
|
1642
|
+
)
|
|
1643
|
+
] });
|
|
1644
|
+
}
|
|
1645
|
+
function SimpleHeader({ navItems, loginFlag }) {
|
|
1646
|
+
const [opened, { toggle, close }] = useDisclosure();
|
|
1647
|
+
const { topItems, childrenOf } = useNavTree(navItems);
|
|
1648
|
+
return /* @__PURE__ */ jsxs16(Fragment4, { children: [
|
|
1649
|
+
/* @__PURE__ */ jsx29(Box12, { bg: "var(--mantine-color-body)", children: /* @__PURE__ */ jsx29(SdContainer, { children: /* @__PURE__ */ jsxs16(Group10, { h: BAR_HEIGHT, justify: "space-between", align: "center", wrap: "nowrap", children: [
|
|
1650
|
+
/* @__PURE__ */ jsx29(Logo, {}),
|
|
1651
|
+
/* @__PURE__ */ jsx29(Group10, { gap: "xl", align: "center", wrap: "nowrap", visibleFrom: "sm", children: topItems.map((item) => {
|
|
1420
1652
|
const kids = childrenOf(item.id);
|
|
1421
1653
|
if (kids.length === 0) {
|
|
1422
|
-
return /* @__PURE__ */
|
|
1654
|
+
return /* @__PURE__ */ jsx29(SdLink.Body, { href: item.href, children: item.label }, item.id);
|
|
1423
1655
|
}
|
|
1424
|
-
return
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1656
|
+
return (
|
|
1657
|
+
/*
|
|
1658
|
+
trigger="click-hover" — 마우스는 hover로, 키보드/터치는 click으로 연다.
|
|
1659
|
+
Menu.Target은 ref를 받을 수 있는 단일 엘리먼트여야 하므로
|
|
1660
|
+
SdLink/SdText가 아니라 Box를 타깃으로 두고 라벨을 그 안에 넣는다.
|
|
1661
|
+
*/
|
|
1662
|
+
/* @__PURE__ */ jsxs16(
|
|
1663
|
+
Menu,
|
|
1664
|
+
{
|
|
1665
|
+
trigger: "click-hover",
|
|
1666
|
+
openDelay: 50,
|
|
1667
|
+
closeDelay: 120,
|
|
1668
|
+
position: "bottom",
|
|
1669
|
+
offset: 12,
|
|
1670
|
+
shadow: "md",
|
|
1671
|
+
radius: "md",
|
|
1672
|
+
withinPortal: true,
|
|
1673
|
+
children: [
|
|
1674
|
+
/* @__PURE__ */ jsx29(Menu.Target, { children: /* @__PURE__ */ jsx29(Box12, { style: { cursor: "pointer" }, children: /* @__PURE__ */ jsxs16(Group10, { gap: 4, align: "center", wrap: "nowrap", children: [
|
|
1675
|
+
/* @__PURE__ */ jsx29(SdLink.Body, { href: item.href, children: item.label }),
|
|
1676
|
+
/* @__PURE__ */ jsx29(IconChevronDown, { size: 14, stroke: 2 })
|
|
1677
|
+
] }) }) }),
|
|
1678
|
+
/* @__PURE__ */ jsx29(Menu.Dropdown, { children: kids.map(
|
|
1679
|
+
(kid) => kid.href ? /* @__PURE__ */ jsx29(Menu.Item, { component: "a", href: kid.href, children: kid.label }, kid.id) : /* @__PURE__ */ jsx29(Menu.Label, { children: kid.label }, kid.id)
|
|
1680
|
+
) })
|
|
1681
|
+
]
|
|
1682
|
+
},
|
|
1683
|
+
item.id
|
|
1684
|
+
)
|
|
1434
1685
|
);
|
|
1435
|
-
}),
|
|
1436
|
-
|
|
1437
|
-
|
|
1686
|
+
}) }),
|
|
1687
|
+
/* @__PURE__ */ jsxs16(Group10, { align: "center", gap: "sm", wrap: "nowrap", children: [
|
|
1688
|
+
/* @__PURE__ */ jsx29(Burger, { hiddenFrom: "sm", opened, onClick: toggle }),
|
|
1689
|
+
loginFlag && /* @__PURE__ */ jsx29(Group10, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ jsx29(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
|
|
1690
|
+
] })
|
|
1691
|
+
] }) }) }),
|
|
1692
|
+
/* @__PURE__ */ jsx29(
|
|
1693
|
+
MobileNav,
|
|
1694
|
+
{
|
|
1695
|
+
opened,
|
|
1696
|
+
close,
|
|
1697
|
+
topItems,
|
|
1698
|
+
childrenOf,
|
|
1699
|
+
loginFlag
|
|
1700
|
+
}
|
|
1701
|
+
)
|
|
1438
1702
|
] });
|
|
1439
1703
|
}
|
|
1704
|
+
var SdHeader = Object.assign(MegaHeader, { Mega: MegaHeader, Simple: SimpleHeader });
|
|
1705
|
+
var SdHeaderMega = MegaHeader;
|
|
1706
|
+
var SdHeaderSimple = SimpleHeader;
|
|
1440
1707
|
|
|
1441
1708
|
// ui/organism/Footer.tsx
|
|
1442
|
-
import { ActionIcon, Box as Box13, Divider as Divider3, Flex, Grid as Grid5, Group as
|
|
1709
|
+
import { ActionIcon, Box as Box13, Divider as Divider3, Flex, Grid as Grid5, Group as Group11, SimpleGrid as SimpleGrid6, Stack as Stack17 } from "@mantine/core";
|
|
1443
1710
|
import {
|
|
1444
1711
|
IconBrandFacebook,
|
|
1445
1712
|
IconBrandGithub,
|
|
@@ -1449,16 +1716,16 @@ import {
|
|
|
1449
1716
|
IconBrandYoutube,
|
|
1450
1717
|
IconWorld
|
|
1451
1718
|
} from "@tabler/icons-react";
|
|
1452
|
-
import { Fragment as Fragment5, jsx as
|
|
1719
|
+
import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1453
1720
|
function FooterNavColumns({ items }) {
|
|
1454
1721
|
const topLevel = items.filter((item) => !item.parentId);
|
|
1455
1722
|
const getChildren = (parentId) => items.filter((item) => item.parentId === parentId);
|
|
1456
1723
|
const CHILD_THRESH = 4;
|
|
1457
|
-
return /* @__PURE__ */
|
|
1458
|
-
/* @__PURE__ */
|
|
1724
|
+
return /* @__PURE__ */ jsx30(Fragment5, { children: topLevel.map((group) => /* @__PURE__ */ jsx30(Grid5.Col, { span: { base: 6, sm: 4, md: "auto" }, children: /* @__PURE__ */ jsxs17(Stack17, { gap: "xs", children: [
|
|
1725
|
+
/* @__PURE__ */ jsx30(SdLink.Sub, { href: group.href, children: group.label }, group.id),
|
|
1459
1726
|
getChildren(group.id).map((link, id) => {
|
|
1460
1727
|
if (id >= CHILD_THRESH) return;
|
|
1461
|
-
return /* @__PURE__ */
|
|
1728
|
+
return /* @__PURE__ */ jsx30(SdLink.Hint, { href: link.href, children: link.label }, link.id);
|
|
1462
1729
|
})
|
|
1463
1730
|
] }) }, group.id)) });
|
|
1464
1731
|
}
|
|
@@ -1472,10 +1739,10 @@ var SOCIAL_ICONS = {
|
|
|
1472
1739
|
blog: IconWorld
|
|
1473
1740
|
};
|
|
1474
1741
|
function FooterSocials({ items }) {
|
|
1475
|
-
return /* @__PURE__ */
|
|
1742
|
+
return /* @__PURE__ */ jsx30(Group11, { gap: 0, wrap: "nowrap", children: items.map((item) => {
|
|
1476
1743
|
var _a4, _b;
|
|
1477
1744
|
const Icon = (_a4 = SOCIAL_ICONS[item.platform]) != null ? _a4 : IconWorld;
|
|
1478
|
-
return /* @__PURE__ */
|
|
1745
|
+
return /* @__PURE__ */ jsx30(
|
|
1479
1746
|
ActionIcon,
|
|
1480
1747
|
{
|
|
1481
1748
|
component: "a",
|
|
@@ -1486,62 +1753,62 @@ function FooterSocials({ items }) {
|
|
|
1486
1753
|
color: "gray",
|
|
1487
1754
|
variant: "subtle",
|
|
1488
1755
|
"aria-label": (_b = item.label) != null ? _b : item.platform,
|
|
1489
|
-
children: /* @__PURE__ */
|
|
1756
|
+
children: /* @__PURE__ */ jsx30(Icon, { size: 18, stroke: 1.5 })
|
|
1490
1757
|
},
|
|
1491
1758
|
item.url
|
|
1492
1759
|
);
|
|
1493
1760
|
}) });
|
|
1494
1761
|
}
|
|
1495
1762
|
function InfoCell({ label, children }) {
|
|
1496
|
-
return /* @__PURE__ */ jsxs17(
|
|
1497
|
-
/* @__PURE__ */
|
|
1498
|
-
typeof children === "string" ? /* @__PURE__ */
|
|
1763
|
+
return /* @__PURE__ */ jsxs17(Group11, { gap: 6, wrap: "nowrap", align: "baseline", children: [
|
|
1764
|
+
/* @__PURE__ */ jsx30(SdText.Sub, { c: "slate.4", style: { whiteSpace: "nowrap" }, children: label }),
|
|
1765
|
+
typeof children === "string" ? /* @__PURE__ */ jsx30(SdText.Sub, { children }) : children
|
|
1499
1766
|
] });
|
|
1500
1767
|
}
|
|
1501
1768
|
function FooterCompanyInfo({ company }) {
|
|
1502
1769
|
const sortedAddresses = [...company.addresses].sort((a, b) => a.order - b.order);
|
|
1503
1770
|
return /* @__PURE__ */ jsxs17(SimpleGrid6, { cols: { base: 2, sm: 2, md: 1 }, spacing: "md", verticalSpacing: 0, children: [
|
|
1504
|
-
/* @__PURE__ */
|
|
1505
|
-
/* @__PURE__ */
|
|
1506
|
-
sortedAddresses.map((addr) => /* @__PURE__ */
|
|
1507
|
-
/* @__PURE__ */
|
|
1508
|
-
company.fax && /* @__PURE__ */
|
|
1509
|
-
/* @__PURE__ */
|
|
1771
|
+
/* @__PURE__ */ jsx30(InfoCell, { label: "\uC0C1\uD638", children: company.name }),
|
|
1772
|
+
/* @__PURE__ */ jsx30(InfoCell, { label: "\uC0AC\uC5C5\uC790\uB4F1\uB85D\uBC88\uD638", children: company.registrationNumber }),
|
|
1773
|
+
sortedAddresses.map((addr) => /* @__PURE__ */ jsx30(InfoCell, { label: addr.label, children: addr.address }, addr.label)),
|
|
1774
|
+
/* @__PURE__ */ jsx30(InfoCell, { label: "Tel", children: /* @__PURE__ */ jsx30(SdLink.Sub, { href: `tel:${company.tel}`, children: company.tel }) }),
|
|
1775
|
+
company.fax && /* @__PURE__ */ jsx30(InfoCell, { label: "Fax", children: company.fax }),
|
|
1776
|
+
/* @__PURE__ */ jsx30(InfoCell, { label: "Email", children: /* @__PURE__ */ jsx30(SdLink.Sub, { href: `mailto:${company.email}`, children: company.email }) })
|
|
1510
1777
|
] });
|
|
1511
1778
|
}
|
|
1512
1779
|
function SdFooter({ company, navItems, policyLinks, description }) {
|
|
1513
1780
|
const visibleNav = filterAndSort(navItems);
|
|
1514
1781
|
const visiblePolicy = filterAndSort(policyLinks);
|
|
1515
|
-
return /* @__PURE__ */
|
|
1516
|
-
/* @__PURE__ */
|
|
1517
|
-
description && /* @__PURE__ */
|
|
1782
|
+
return /* @__PURE__ */ jsx30(Box13, { component: "footer", children: /* @__PURE__ */ jsx30(SdContainer, { py: "lg", children: /* @__PURE__ */ jsxs17(Stack17, { children: [
|
|
1783
|
+
/* @__PURE__ */ jsx30(Logo, { size: "sm" }),
|
|
1784
|
+
description && /* @__PURE__ */ jsx30(SdText.Sub, { children: description }),
|
|
1518
1785
|
/* @__PURE__ */ jsxs17(Flex, { direction: { base: "column", md: "row" }, gap: 48, align: "flex-start", children: [
|
|
1519
|
-
/* @__PURE__ */
|
|
1520
|
-
visibleNav.length > 0 && /* @__PURE__ */
|
|
1786
|
+
/* @__PURE__ */ jsx30(Box13, { flex: { base: "0 0 auto", md: "1 1 0" }, w: { base: "100%", md: "auto" }, children: /* @__PURE__ */ jsx30(FooterCompanyInfo, { company }) }),
|
|
1787
|
+
visibleNav.length > 0 && /* @__PURE__ */ jsx30(Box13, { flex: { base: "0 0 auto", md: "2 1 0" }, w: { base: "100%", md: "auto" }, children: /* @__PURE__ */ jsx30(Grid5, { style: { "--grid-gutter": "24px" }, children: /* @__PURE__ */ jsx30(FooterNavColumns, { items: visibleNav }) }) })
|
|
1521
1788
|
] }),
|
|
1522
|
-
/* @__PURE__ */
|
|
1523
|
-
/* @__PURE__ */ jsxs17(
|
|
1789
|
+
/* @__PURE__ */ jsx30(Divider3, {}),
|
|
1790
|
+
/* @__PURE__ */ jsxs17(Group11, { justify: "space-between", wrap: "wrap", gap: "xs", children: [
|
|
1524
1791
|
/* @__PURE__ */ jsxs17(SdText.Sub, { children: [
|
|
1525
1792
|
"\xA9 ",
|
|
1526
1793
|
company.copyrightYear,
|
|
1527
1794
|
" ",
|
|
1528
|
-
company.name,
|
|
1795
|
+
t(company.name),
|
|
1529
1796
|
". All rights reserved."
|
|
1530
1797
|
] }),
|
|
1531
|
-
/* @__PURE__ */ jsxs17(
|
|
1532
|
-
visiblePolicy.length > 0 && /* @__PURE__ */
|
|
1533
|
-
const Link4 = item.highlight ? SdLink.
|
|
1534
|
-
return /* @__PURE__ */
|
|
1798
|
+
/* @__PURE__ */ jsxs17(Group11, { gap: "lg", wrap: "wrap", children: [
|
|
1799
|
+
visiblePolicy.length > 0 && /* @__PURE__ */ jsx30(Group11, { gap: "lg", children: visiblePolicy.map((item) => {
|
|
1800
|
+
const Link4 = item.highlight ? SdLink.Body : SdLink.Sub;
|
|
1801
|
+
return /* @__PURE__ */ jsx30(Link4, { href: item.href, children: item.label }, item.id);
|
|
1535
1802
|
}) }),
|
|
1536
|
-
company.socials && company.socials.length > 0 && /* @__PURE__ */
|
|
1803
|
+
company.socials && company.socials.length > 0 && /* @__PURE__ */ jsx30(FooterSocials, { items: company.socials })
|
|
1537
1804
|
] })
|
|
1538
1805
|
] })
|
|
1539
1806
|
] }) }) });
|
|
1540
1807
|
}
|
|
1541
1808
|
|
|
1542
1809
|
// ui/organism/FeatureSection.tsx
|
|
1543
|
-
import { Stack as
|
|
1544
|
-
import { jsx as
|
|
1810
|
+
import { Stack as Stack18 } from "@mantine/core";
|
|
1811
|
+
import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1545
1812
|
function SdFeatureSection(_a4) {
|
|
1546
1813
|
var _b = _a4, {
|
|
1547
1814
|
label,
|
|
@@ -1558,8 +1825,8 @@ function SdFeatureSection(_a4) {
|
|
|
1558
1825
|
"cols",
|
|
1559
1826
|
"py"
|
|
1560
1827
|
]);
|
|
1561
|
-
return /* @__PURE__ */
|
|
1562
|
-
/* @__PURE__ */
|
|
1828
|
+
return /* @__PURE__ */ jsx31(SdContainer, __spreadProps(__spreadValues({ py }, boxProps), { children: /* @__PURE__ */ jsxs18(Stack18, { gap: "xl", children: [
|
|
1829
|
+
/* @__PURE__ */ jsx31(
|
|
1563
1830
|
SdTextBox.Section,
|
|
1564
1831
|
{
|
|
1565
1832
|
label,
|
|
@@ -1570,13 +1837,13 @@ function SdFeatureSection(_a4) {
|
|
|
1570
1837
|
align: "center"
|
|
1571
1838
|
}
|
|
1572
1839
|
),
|
|
1573
|
-
/* @__PURE__ */
|
|
1840
|
+
/* @__PURE__ */ jsx31(SdFeatures, { items, cols })
|
|
1574
1841
|
] }) }));
|
|
1575
1842
|
}
|
|
1576
1843
|
|
|
1577
1844
|
// ui/organism/TimelineSection.tsx
|
|
1578
|
-
import { Center as Center3, Stack as
|
|
1579
|
-
import { jsx as
|
|
1845
|
+
import { Center as Center3, Stack as Stack19 } from "@mantine/core";
|
|
1846
|
+
import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1580
1847
|
function SdTimelineSection(_a4) {
|
|
1581
1848
|
var _b = _a4, {
|
|
1582
1849
|
label,
|
|
@@ -1591,15 +1858,15 @@ function SdTimelineSection(_a4) {
|
|
|
1591
1858
|
"items",
|
|
1592
1859
|
"py"
|
|
1593
1860
|
]);
|
|
1594
|
-
return /* @__PURE__ */
|
|
1595
|
-
/* @__PURE__ */
|
|
1596
|
-
/* @__PURE__ */
|
|
1861
|
+
return /* @__PURE__ */ jsx32(Center3, { children: /* @__PURE__ */ jsxs19(Stack19, __spreadProps(__spreadValues({ py, gap: "md" }, boxProps), { children: [
|
|
1862
|
+
/* @__PURE__ */ jsx32(SdTextBox.Section, { label, title, description }),
|
|
1863
|
+
/* @__PURE__ */ jsx32(Center3, { children: /* @__PURE__ */ jsx32(SdTimeline, { items }) })
|
|
1597
1864
|
] })) });
|
|
1598
1865
|
}
|
|
1599
1866
|
|
|
1600
1867
|
// ui/organism/StepsSection.tsx
|
|
1601
|
-
import { Stack as
|
|
1602
|
-
import { jsx as
|
|
1868
|
+
import { Stack as Stack20 } from "@mantine/core";
|
|
1869
|
+
import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1603
1870
|
function SdStepsSection(_a4) {
|
|
1604
1871
|
var _b = _a4, {
|
|
1605
1872
|
label,
|
|
@@ -1614,17 +1881,17 @@ function SdStepsSection(_a4) {
|
|
|
1614
1881
|
"items",
|
|
1615
1882
|
"py"
|
|
1616
1883
|
]);
|
|
1617
|
-
return /* @__PURE__ */
|
|
1618
|
-
(label || title || description) && /* @__PURE__ */
|
|
1619
|
-
/* @__PURE__ */
|
|
1884
|
+
return /* @__PURE__ */ jsx33(SdContainer, __spreadProps(__spreadValues({ py }, boxProps), { children: /* @__PURE__ */ jsxs20(Stack20, { gap: "xl", children: [
|
|
1885
|
+
(label || title || description) && /* @__PURE__ */ jsx33(SdTextBox.Section, { label, title, description }),
|
|
1886
|
+
/* @__PURE__ */ jsx33(SdSteps.Bubble, { items })
|
|
1620
1887
|
] }) }));
|
|
1621
1888
|
}
|
|
1622
1889
|
|
|
1623
1890
|
// ui/organism/ErrorView.tsx
|
|
1624
|
-
import { Center as Center4, Group as
|
|
1625
|
-
import { jsx as
|
|
1891
|
+
import { Center as Center4, Group as Group12, Stack as Stack21, Text as Text2 } from "@mantine/core";
|
|
1892
|
+
import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1626
1893
|
function StatusCode({ code }) {
|
|
1627
|
-
return /* @__PURE__ */
|
|
1894
|
+
return /* @__PURE__ */ jsx34(
|
|
1628
1895
|
Text2,
|
|
1629
1896
|
{
|
|
1630
1897
|
fz: 160,
|
|
@@ -1638,15 +1905,15 @@ function StatusCode({ code }) {
|
|
|
1638
1905
|
);
|
|
1639
1906
|
}
|
|
1640
1907
|
function Page({ error, onReset, onHome }) {
|
|
1641
|
-
return /* @__PURE__ */
|
|
1642
|
-
/* @__PURE__ */
|
|
1643
|
-
/* @__PURE__ */ jsxs21(
|
|
1644
|
-
/* @__PURE__ */
|
|
1645
|
-
/* @__PURE__ */
|
|
1908
|
+
return /* @__PURE__ */ jsx34(Center4, { mih: "60vh", children: /* @__PURE__ */ jsx34(SdContainer, { children: /* @__PURE__ */ jsxs21(Stack21, { align: "center", gap: "lg", ta: "center", children: [
|
|
1909
|
+
/* @__PURE__ */ jsx34(StatusCode, { code: "500" }),
|
|
1910
|
+
/* @__PURE__ */ jsxs21(Stack21, { gap: "sm", align: "center", children: [
|
|
1911
|
+
/* @__PURE__ */ jsx34(SdTitle.Section, { children: "\uC11C\uBC84\uC5D0\uC11C \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4" }),
|
|
1912
|
+
/* @__PURE__ */ jsx34(SdText.Body, { maw: 480, children: "\uC608\uAE30\uCE58 \uC54A\uC740 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4. \uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694." })
|
|
1646
1913
|
] }),
|
|
1647
|
-
/* @__PURE__ */ jsxs21(
|
|
1648
|
-
/* @__PURE__ */
|
|
1649
|
-
onHome && /* @__PURE__ */
|
|
1914
|
+
/* @__PURE__ */ jsxs21(Group12, { gap: "sm", justify: "center", children: [
|
|
1915
|
+
/* @__PURE__ */ jsx34(SdButton.Primary, { onClick: onReset, children: "\uB2E4\uC2DC \uC2DC\uB3C4" }),
|
|
1916
|
+
onHome && /* @__PURE__ */ jsx34(SdButton.Ghost, { onClick: onHome, children: "\uD648\uC73C\uB85C" })
|
|
1650
1917
|
] })
|
|
1651
1918
|
] }) }) });
|
|
1652
1919
|
}
|
|
@@ -1658,15 +1925,15 @@ function NotFound({
|
|
|
1658
1925
|
},
|
|
1659
1926
|
onBack = () => window.history.back()
|
|
1660
1927
|
}) {
|
|
1661
|
-
return /* @__PURE__ */
|
|
1662
|
-
/* @__PURE__ */
|
|
1663
|
-
/* @__PURE__ */ jsxs21(
|
|
1664
|
-
/* @__PURE__ */
|
|
1665
|
-
/* @__PURE__ */
|
|
1928
|
+
return /* @__PURE__ */ jsx34(Center4, { mih: "60vh", children: /* @__PURE__ */ jsx34(SdContainer, { children: /* @__PURE__ */ jsxs21(Stack21, { align: "center", gap: "lg", ta: "center", children: [
|
|
1929
|
+
/* @__PURE__ */ jsx34(StatusCode, { code: "404" }),
|
|
1930
|
+
/* @__PURE__ */ jsxs21(Stack21, { gap: "sm", align: "center", children: [
|
|
1931
|
+
/* @__PURE__ */ jsx34(SdTitle.Section, { children: title }),
|
|
1932
|
+
/* @__PURE__ */ jsx34(SdText.Body, { maw: 480, children: description })
|
|
1666
1933
|
] }),
|
|
1667
|
-
/* @__PURE__ */ jsxs21(
|
|
1668
|
-
onHome && /* @__PURE__ */
|
|
1669
|
-
onBack && /* @__PURE__ */
|
|
1934
|
+
/* @__PURE__ */ jsxs21(Group12, { gap: "sm", justify: "center", children: [
|
|
1935
|
+
onHome && /* @__PURE__ */ jsx34(SdButton.Primary, { onClick: onHome, children: "\uD648\uC73C\uB85C" }),
|
|
1936
|
+
onBack && /* @__PURE__ */ jsx34(SdButton.Ghost, { onClick: onBack, children: "\uB4A4\uB85C \uAC00\uAE30" })
|
|
1670
1937
|
] })
|
|
1671
1938
|
] }) }) });
|
|
1672
1939
|
}
|
|
@@ -1679,175 +1946,380 @@ var SdErrorView = {
|
|
|
1679
1946
|
var SdErrorViewPage = SdErrorView.Page;
|
|
1680
1947
|
var SdErrorViewNotFound = SdErrorView.NotFound;
|
|
1681
1948
|
|
|
1949
|
+
// ui/organism/LoginView.tsx
|
|
1950
|
+
import { Box as Box15, Center as Center5, Checkbox as Checkbox2, Divider as Divider4, Group as Group13, Paper, SimpleGrid as SimpleGrid7, Stack as Stack22 } from "@mantine/core";
|
|
1951
|
+
import {
|
|
1952
|
+
IconBrandApple,
|
|
1953
|
+
IconBrandGithub as IconBrandGithub2,
|
|
1954
|
+
IconBrandGoogle,
|
|
1955
|
+
IconBrandKakaoTalk,
|
|
1956
|
+
IconCircleLetterN,
|
|
1957
|
+
IconLogin2
|
|
1958
|
+
} from "@tabler/icons-react";
|
|
1959
|
+
|
|
1960
|
+
// ui/surface.ts
|
|
1961
|
+
var brandSurface = {
|
|
1962
|
+
background: `
|
|
1963
|
+
radial-gradient(90% 120% at 12% 0%, var(--mantine-color-primary-7) 0%, transparent 58%),
|
|
1964
|
+
radial-gradient(70% 100% at 100% 100%, var(--mantine-color-primary-9) 0%, transparent 55%),
|
|
1965
|
+
var(--mantine-color-slate-9)`
|
|
1966
|
+
};
|
|
1967
|
+
var brandDotTexture = {
|
|
1968
|
+
backgroundImage: "radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px)",
|
|
1969
|
+
backgroundSize: "18px 18px",
|
|
1970
|
+
maskImage: "linear-gradient(180deg, rgba(0,0,0,0.9) 0%, transparent 70%)",
|
|
1971
|
+
WebkitMaskImage: "linear-gradient(180deg, rgba(0,0,0,0.9) 0%, transparent 70%)",
|
|
1972
|
+
pointerEvents: "none"
|
|
1973
|
+
};
|
|
1974
|
+
|
|
1975
|
+
// ui/organism/LoginView.tsx
|
|
1976
|
+
import { Fragment as Fragment6, jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
1977
|
+
var SOCIAL_META = {
|
|
1978
|
+
google: { Icon: IconBrandGoogle, label: "\uAD6C\uAE00\uB85C \uB85C\uADF8\uC778" },
|
|
1979
|
+
kakao: { Icon: IconBrandKakaoTalk, label: "\uCE74\uCE74\uC624\uB85C \uB85C\uADF8\uC778" },
|
|
1980
|
+
naver: { Icon: IconCircleLetterN, label: "\uB124\uC774\uBC84\uB85C \uB85C\uADF8\uC778" },
|
|
1981
|
+
apple: { Icon: IconBrandApple, label: "\uC560\uD50C\uB85C \uB85C\uADF8\uC778" },
|
|
1982
|
+
github: { Icon: IconBrandGithub2, label: "\uAE43\uD5C8\uBE0C\uB85C \uB85C\uADF8\uC778" }
|
|
1983
|
+
};
|
|
1984
|
+
function LoginForm({
|
|
1985
|
+
onSubmit,
|
|
1986
|
+
loading,
|
|
1987
|
+
error,
|
|
1988
|
+
submitLabel = "\uB85C\uADF8\uC778",
|
|
1989
|
+
withRemember = true,
|
|
1990
|
+
findPasswordHref,
|
|
1991
|
+
signUpHref,
|
|
1992
|
+
socials,
|
|
1993
|
+
children
|
|
1994
|
+
}) {
|
|
1995
|
+
function handleSubmit(event) {
|
|
1996
|
+
var _a4, _b;
|
|
1997
|
+
event.preventDefault();
|
|
1998
|
+
const data = new FormData(event.currentTarget);
|
|
1999
|
+
onSubmit == null ? void 0 : onSubmit({
|
|
2000
|
+
email: String((_a4 = data.get("email")) != null ? _a4 : ""),
|
|
2001
|
+
password: String((_b = data.get("password")) != null ? _b : ""),
|
|
2002
|
+
remember: data.get("remember") === "on"
|
|
2003
|
+
});
|
|
2004
|
+
}
|
|
2005
|
+
return /* @__PURE__ */ jsx35("form", { onSubmit: handleSubmit, noValidate: true, children: /* @__PURE__ */ jsxs22(Stack22, { gap: "md", children: [
|
|
2006
|
+
error && /* @__PURE__ */ jsx35(SdText.Error, { children: error }),
|
|
2007
|
+
/* @__PURE__ */ jsx35(
|
|
2008
|
+
SdInput.Email,
|
|
2009
|
+
{
|
|
2010
|
+
name: "email",
|
|
2011
|
+
label: "\uC774\uBA54\uC77C",
|
|
2012
|
+
placeholder: "name@example.com",
|
|
2013
|
+
autoComplete: "email",
|
|
2014
|
+
required: true
|
|
2015
|
+
}
|
|
2016
|
+
),
|
|
2017
|
+
/* @__PURE__ */ jsx35(
|
|
2018
|
+
SdInput.Password,
|
|
2019
|
+
{
|
|
2020
|
+
name: "password",
|
|
2021
|
+
label: "\uBE44\uBC00\uBC88\uD638",
|
|
2022
|
+
placeholder: "\uBE44\uBC00\uBC88\uD638\uB97C \uC785\uB825\uD558\uC138\uC694",
|
|
2023
|
+
autoComplete: "current-password",
|
|
2024
|
+
required: true
|
|
2025
|
+
}
|
|
2026
|
+
),
|
|
2027
|
+
(withRemember || findPasswordHref) && /* @__PURE__ */ jsxs22(Group13, { justify: "space-between", align: "center", wrap: "nowrap", children: [
|
|
2028
|
+
withRemember ? /* @__PURE__ */ jsx35(Checkbox2, { name: "remember", size: "xs", label: "\uC790\uB3D9 \uB85C\uADF8\uC778" }) : /* @__PURE__ */ jsx35("span", {}),
|
|
2029
|
+
findPasswordHref && /* @__PURE__ */ jsx35(SdLink.Sub, { href: findPasswordHref, children: "\uBE44\uBC00\uBC88\uD638\uB97C \uC78A\uC73C\uC168\uB098\uC694?" })
|
|
2030
|
+
] }),
|
|
2031
|
+
/* @__PURE__ */ jsx35(
|
|
2032
|
+
SdButton.Primary,
|
|
2033
|
+
{
|
|
2034
|
+
type: "submit",
|
|
2035
|
+
fullWidth: true,
|
|
2036
|
+
loading,
|
|
2037
|
+
leftSection: /* @__PURE__ */ jsx35(IconLogin2, { size: 16 }),
|
|
2038
|
+
children: submitLabel
|
|
2039
|
+
}
|
|
2040
|
+
),
|
|
2041
|
+
socials && socials.length > 0 && /* @__PURE__ */ jsxs22(Fragment6, { children: [
|
|
2042
|
+
/* @__PURE__ */ jsx35(Divider4, { label: "\uB610\uB294", labelPosition: "center" }),
|
|
2043
|
+
/* @__PURE__ */ jsx35(Stack22, { gap: "xs", children: socials.map((social) => {
|
|
2044
|
+
var _a4;
|
|
2045
|
+
const { Icon, label } = SOCIAL_META[social.provider];
|
|
2046
|
+
return /* @__PURE__ */ jsx35(
|
|
2047
|
+
SdButton.Outline,
|
|
2048
|
+
{
|
|
2049
|
+
color: "slate",
|
|
2050
|
+
fullWidth: true,
|
|
2051
|
+
type: "button",
|
|
2052
|
+
onClick: social.onClick,
|
|
2053
|
+
leftSection: /* @__PURE__ */ jsx35(Icon, { size: 16 }),
|
|
2054
|
+
children: (_a4 = social.label) != null ? _a4 : label
|
|
2055
|
+
},
|
|
2056
|
+
social.provider
|
|
2057
|
+
);
|
|
2058
|
+
}) })
|
|
2059
|
+
] }),
|
|
2060
|
+
signUpHref && /* @__PURE__ */ jsxs22(Group13, { gap: 6, justify: "center", children: [
|
|
2061
|
+
/* @__PURE__ */ jsx35(SdText.Sub, { children: "\uC544\uC9C1 \uACC4\uC815\uC774 \uC5C6\uC73C\uC2E0\uAC00\uC694?" }),
|
|
2062
|
+
/* @__PURE__ */ jsx35(SdLink.Sub, { href: signUpHref, c: "primary.6", children: "\uD68C\uC6D0\uAC00\uC785" })
|
|
2063
|
+
] }),
|
|
2064
|
+
children
|
|
2065
|
+
] }) });
|
|
2066
|
+
}
|
|
2067
|
+
function FormHeader({ title, description }) {
|
|
2068
|
+
return /* @__PURE__ */ jsxs22(Stack22, { gap: "lg", children: [
|
|
2069
|
+
/* @__PURE__ */ jsx35(Logo, { size: "sm" }),
|
|
2070
|
+
/* @__PURE__ */ jsx35(SdTextBox.Card, { title, description: description != null ? description : "" })
|
|
2071
|
+
] });
|
|
2072
|
+
}
|
|
2073
|
+
function Card7(_a4) {
|
|
2074
|
+
var _b = _a4, {
|
|
2075
|
+
title = "\uB85C\uADF8\uC778",
|
|
2076
|
+
description = "%c \uC11C\uBE44\uC2A4\uB97C \uC774\uC6A9\uD558\uB824\uBA74 \uB85C\uADF8\uC778\uD574 \uC8FC\uC138\uC694.",
|
|
2077
|
+
mih = "100svh"
|
|
2078
|
+
} = _b, formProps = __objRest(_b, [
|
|
2079
|
+
"title",
|
|
2080
|
+
"description",
|
|
2081
|
+
"mih"
|
|
2082
|
+
]);
|
|
2083
|
+
return /* @__PURE__ */ jsx35(Center5, { mih, bg: "slate.0", p: "md", children: /* @__PURE__ */ jsx35(Paper, { w: "100%", maw: 420, p: { base: "lg", sm: "xl" }, radius: "lg", withBorder: true, shadow: "sm", children: /* @__PURE__ */ jsxs22(Stack22, { gap: "xl", children: [
|
|
2084
|
+
/* @__PURE__ */ jsx35(FormHeader, { title, description }),
|
|
2085
|
+
/* @__PURE__ */ jsx35(LoginForm, __spreadValues({}, formProps))
|
|
2086
|
+
] }) }) });
|
|
2087
|
+
}
|
|
2088
|
+
function Split(_a4) {
|
|
2089
|
+
var _b = _a4, {
|
|
2090
|
+
title = "\uB85C\uADF8\uC778",
|
|
2091
|
+
description = "\uACC4\uC815 \uC815\uBCF4\uB97C \uC785\uB825\uD574 \uC8FC\uC138\uC694.",
|
|
2092
|
+
brandTitle = "%c",
|
|
2093
|
+
brandDescription = "\uD558\uB098\uC758 \uACC4\uC815\uC73C\uB85C \uBAA8\uB4E0 \uC11C\uBE44\uC2A4\uB97C \uC774\uC6A9\uD558\uC138\uC694.",
|
|
2094
|
+
mih = "100svh"
|
|
2095
|
+
} = _b, formProps = __objRest(_b, [
|
|
2096
|
+
"title",
|
|
2097
|
+
"description",
|
|
2098
|
+
"brandTitle",
|
|
2099
|
+
"brandDescription",
|
|
2100
|
+
"mih"
|
|
2101
|
+
]);
|
|
2102
|
+
return /* @__PURE__ */ jsxs22(SimpleGrid7, { cols: { base: 1, md: 2 }, spacing: 0, mih, children: [
|
|
2103
|
+
/* @__PURE__ */ jsxs22(
|
|
2104
|
+
Box15,
|
|
2105
|
+
{
|
|
2106
|
+
visibleFrom: "md",
|
|
2107
|
+
pos: "relative",
|
|
2108
|
+
style: __spreadValues({ overflow: "hidden", display: "flex", alignItems: "flex-end" }, brandSurface),
|
|
2109
|
+
children: [
|
|
2110
|
+
/* @__PURE__ */ jsx35(Box15, { "aria-hidden": true, pos: "absolute", inset: 0, style: brandDotTexture }),
|
|
2111
|
+
/* @__PURE__ */ jsx35(Box15, { pos: "relative", p: 48, style: { zIndex: 1, width: "100%" }, children: /* @__PURE__ */ jsx35(
|
|
2112
|
+
SdTextBox.Hero,
|
|
2113
|
+
{
|
|
2114
|
+
title: brandTitle,
|
|
2115
|
+
description: brandDescription,
|
|
2116
|
+
gap: "sm",
|
|
2117
|
+
maxDescWidth: 420,
|
|
2118
|
+
ta: "left",
|
|
2119
|
+
align: "flex-start"
|
|
2120
|
+
}
|
|
2121
|
+
) })
|
|
2122
|
+
]
|
|
2123
|
+
}
|
|
2124
|
+
),
|
|
2125
|
+
/* @__PURE__ */ jsx35(Center5, { p: { base: "md", sm: "xl" }, bg: "white", children: /* @__PURE__ */ jsxs22(Stack22, { gap: "xl", w: "100%", maw: 400, children: [
|
|
2126
|
+
/* @__PURE__ */ jsx35(FormHeader, { title, description }),
|
|
2127
|
+
/* @__PURE__ */ jsx35(LoginForm, __spreadValues({}, formProps))
|
|
2128
|
+
] }) })
|
|
2129
|
+
] });
|
|
2130
|
+
}
|
|
2131
|
+
var SdLoginView = {
|
|
2132
|
+
/** 중앙 정렬 카드 — 기본 로그인 화면 */
|
|
2133
|
+
Card: Card7,
|
|
2134
|
+
/** 좌측 브랜드 패널 + 우측 폼 — 넓은 화면용 */
|
|
2135
|
+
Split
|
|
2136
|
+
};
|
|
2137
|
+
var SdLoginViewCard = SdLoginView.Card;
|
|
2138
|
+
var SdLoginViewSplit = SdLoginView.Split;
|
|
2139
|
+
|
|
2140
|
+
// ui/organism/Result.tsx
|
|
2141
|
+
import { Box as Box16, Center as Center6, Group as Group14, Stack as Stack23 } from "@mantine/core";
|
|
2142
|
+
import { IconCircleCheck, IconCircleX } from "@tabler/icons-react";
|
|
2143
|
+
import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2144
|
+
function ResultIcon({ color, Icon }) {
|
|
2145
|
+
return /* @__PURE__ */ jsx36(Center6, { w: 88, h: 88, bg: `${color}.0`, style: { borderRadius: "50%" }, "aria-hidden": true, children: /* @__PURE__ */ jsx36(Icon, { size: 48, stroke: 1.5, color: `var(--mantine-color-${color}-6)` }) });
|
|
2146
|
+
}
|
|
2147
|
+
function createResult(defaults) {
|
|
2148
|
+
return function SdResult2({
|
|
2149
|
+
title = defaults.title,
|
|
2150
|
+
description,
|
|
2151
|
+
primaryAction,
|
|
2152
|
+
secondaryAction,
|
|
2153
|
+
children,
|
|
2154
|
+
mih = "60vh"
|
|
2155
|
+
}) {
|
|
2156
|
+
return /* @__PURE__ */ jsx36(Center6, { mih, children: /* @__PURE__ */ jsx36(SdContainer, { children: /* @__PURE__ */ jsxs23(Stack23, { align: "center", gap: "lg", ta: "center", children: [
|
|
2157
|
+
/* @__PURE__ */ jsx36(ResultIcon, { color: defaults.color, Icon: defaults.Icon }),
|
|
2158
|
+
/* @__PURE__ */ jsxs23(Stack23, { gap: "sm", align: "center", children: [
|
|
2159
|
+
/* @__PURE__ */ jsx36(SdTitle.Section, { children: title }),
|
|
2160
|
+
description && /* @__PURE__ */ jsx36(SdText.Body, { maw: 480, children: description })
|
|
2161
|
+
] }),
|
|
2162
|
+
children && /* @__PURE__ */ jsx36(Box16, { children }),
|
|
2163
|
+
(primaryAction || secondaryAction) && /* @__PURE__ */ jsxs23(Group14, { gap: "sm", justify: "center", children: [
|
|
2164
|
+
primaryAction && /* @__PURE__ */ jsx36(SdButton.Primary, { onClick: primaryAction.onClick, children: primaryAction.label }),
|
|
2165
|
+
secondaryAction && /* @__PURE__ */ jsx36(SdButton.Ghost, { onClick: secondaryAction.onClick, children: secondaryAction.label })
|
|
2166
|
+
] })
|
|
2167
|
+
] }) }) });
|
|
2168
|
+
};
|
|
2169
|
+
}
|
|
2170
|
+
var SdResult = {
|
|
2171
|
+
/** 성공 — 가입 완료·결제 완료 등 */
|
|
2172
|
+
Success: createResult({
|
|
2173
|
+
color: "green",
|
|
2174
|
+
Icon: IconCircleCheck,
|
|
2175
|
+
title: "\uC644\uB8CC\uB418\uC5C8\uC2B5\uB2C8\uB2E4"
|
|
2176
|
+
}),
|
|
2177
|
+
/** 실패 — 결제 실패·처리 중 오류 등. 서버 오류·404는 SdErrorView를 쓴다. */
|
|
2178
|
+
Error: createResult({
|
|
2179
|
+
color: "red",
|
|
2180
|
+
Icon: IconCircleX,
|
|
2181
|
+
title: "\uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4"
|
|
2182
|
+
})
|
|
2183
|
+
};
|
|
2184
|
+
var SdResultSuccess = SdResult.Success;
|
|
2185
|
+
var SdResultError = SdResult.Error;
|
|
2186
|
+
|
|
1682
2187
|
// ui/template/MainLayout.tsx
|
|
1683
2188
|
import { AppShell } from "@mantine/core";
|
|
1684
|
-
import { jsx as
|
|
2189
|
+
import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2190
|
+
var headers = {
|
|
2191
|
+
mega: SdHeader.Mega,
|
|
2192
|
+
simple: SdHeader.Simple
|
|
2193
|
+
};
|
|
1685
2194
|
function MainLayout({
|
|
1686
2195
|
children,
|
|
1687
2196
|
navItems,
|
|
1688
2197
|
companyInfo,
|
|
1689
|
-
loginFlag
|
|
2198
|
+
loginFlag,
|
|
2199
|
+
headerVariant = "mega"
|
|
1690
2200
|
}) {
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
/* @__PURE__ */
|
|
1694
|
-
/* @__PURE__ */
|
|
2201
|
+
const Header = headers[headerVariant];
|
|
2202
|
+
return /* @__PURE__ */ jsxs24(AppShell, { header: { height: 60 }, children: [
|
|
2203
|
+
/* @__PURE__ */ jsx37(AppShell.Header, { children: /* @__PURE__ */ jsx37(Header, { navItems, loginFlag }) }),
|
|
2204
|
+
/* @__PURE__ */ jsx37(AppShell.Main, { children }),
|
|
2205
|
+
/* @__PURE__ */ jsx37(SdFooter, { company: companyInfo, navItems })
|
|
1695
2206
|
] });
|
|
1696
2207
|
}
|
|
1697
2208
|
|
|
1698
2209
|
// ui/template/PageLayout.tsx
|
|
1699
|
-
import { Box as
|
|
1700
|
-
import { Fragment as
|
|
2210
|
+
import { Box as Box17, Divider as Divider5, Group as Group15, Space, Stack as Stack24 } from "@mantine/core";
|
|
2211
|
+
import { Fragment as Fragment7, jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2212
|
+
var HERO_MIN_H = "38svh";
|
|
2213
|
+
var HERO_PY = { base: 56, sm: 88 };
|
|
2214
|
+
var HERO_MAW = 680;
|
|
1701
2215
|
function Content({ children }) {
|
|
1702
|
-
return /* @__PURE__ */
|
|
2216
|
+
return /* @__PURE__ */ jsx38(SdContainer, { py: "xl", children: /* @__PURE__ */ jsx38(Stack24, { gap: "xl", children }) });
|
|
1703
2217
|
}
|
|
1704
2218
|
function LayoutGap() {
|
|
1705
|
-
return /* @__PURE__ */
|
|
2219
|
+
return /* @__PURE__ */ jsx38(Space, { h: 48 });
|
|
1706
2220
|
}
|
|
1707
2221
|
function Minimal({ label, title, description, children }) {
|
|
1708
|
-
return /* @__PURE__ */
|
|
1709
|
-
/* @__PURE__ */
|
|
1710
|
-
/* @__PURE__ */
|
|
2222
|
+
return /* @__PURE__ */ jsxs25(Plain2, { children: [
|
|
2223
|
+
/* @__PURE__ */ jsx38(SdTextBox.Section, { label, title, description: description != null ? description : "" }),
|
|
2224
|
+
/* @__PURE__ */ jsx38(Divider5, {}),
|
|
1711
2225
|
children
|
|
1712
|
-
] })
|
|
2226
|
+
] });
|
|
1713
2227
|
}
|
|
1714
2228
|
function Plain2({ children }) {
|
|
1715
|
-
return /* @__PURE__ */
|
|
1716
|
-
/* @__PURE__ */
|
|
1717
|
-
/* @__PURE__ */
|
|
2229
|
+
return /* @__PURE__ */ jsxs25(Fragment7, { children: [
|
|
2230
|
+
/* @__PURE__ */ jsx38(LayoutGap, {}),
|
|
2231
|
+
/* @__PURE__ */ jsx38(Content, { children })
|
|
2232
|
+
] });
|
|
2233
|
+
}
|
|
2234
|
+
function HeroCopy({ label, title, description }) {
|
|
2235
|
+
return /* @__PURE__ */ jsxs25(Stack24, { gap: "md", maw: HERO_MAW, children: [
|
|
2236
|
+
label && /* @__PURE__ */ jsxs25(Group15, { gap: "sm", align: "center", wrap: "nowrap", children: [
|
|
2237
|
+
/* @__PURE__ */ jsx38(Box17, { w: 28, h: 2, bg: "primary.3", style: { borderRadius: 2 } }),
|
|
2238
|
+
/* @__PURE__ */ jsx38(SdText.Eyebrow, { c: "primary.1", children: label })
|
|
2239
|
+
] }),
|
|
2240
|
+
/* @__PURE__ */ jsx38(
|
|
2241
|
+
SdTextBox.Hero,
|
|
2242
|
+
{
|
|
2243
|
+
title,
|
|
2244
|
+
description,
|
|
2245
|
+
gap: "sm",
|
|
2246
|
+
maxDescWidth: 560,
|
|
2247
|
+
ta: "left",
|
|
2248
|
+
align: "flex-start"
|
|
2249
|
+
}
|
|
2250
|
+
)
|
|
1718
2251
|
] });
|
|
1719
2252
|
}
|
|
1720
2253
|
function Image2({ image, label, title, description, children }) {
|
|
1721
|
-
return /* @__PURE__ */
|
|
1722
|
-
/* @__PURE__ */
|
|
1723
|
-
|
|
2254
|
+
return /* @__PURE__ */ jsxs25(Fragment7, { children: [
|
|
2255
|
+
/* @__PURE__ */ jsxs25(
|
|
2256
|
+
Box17,
|
|
1724
2257
|
{
|
|
2258
|
+
pos: "relative",
|
|
1725
2259
|
style: {
|
|
1726
|
-
|
|
1727
|
-
minHeight: "30svh",
|
|
2260
|
+
minHeight: HERO_MIN_H,
|
|
1728
2261
|
display: "flex",
|
|
1729
|
-
alignItems: "
|
|
2262
|
+
alignItems: "flex-end",
|
|
1730
2263
|
backgroundImage: image ? `url(${image})` : void 0,
|
|
1731
2264
|
backgroundSize: "cover",
|
|
1732
2265
|
backgroundPosition: "center",
|
|
1733
2266
|
backgroundColor: "var(--mantine-color-slate-9)"
|
|
1734
2267
|
},
|
|
1735
2268
|
children: [
|
|
1736
|
-
/* @__PURE__ */
|
|
1737
|
-
|
|
2269
|
+
/* @__PURE__ */ jsx38(
|
|
2270
|
+
Box17,
|
|
1738
2271
|
{
|
|
2272
|
+
"aria-hidden": true,
|
|
2273
|
+
pos: "absolute",
|
|
2274
|
+
inset: 0,
|
|
1739
2275
|
style: {
|
|
1740
|
-
|
|
1741
|
-
inset: 0,
|
|
1742
|
-
background: "rgba(0, 0, 0, 0.55)"
|
|
2276
|
+
background: "linear-gradient(180deg, rgba(15,23,42,0.25) 0%, rgba(15,23,42,0.72) 62%, rgba(15,23,42,0.94) 100%)"
|
|
1743
2277
|
}
|
|
1744
2278
|
}
|
|
1745
2279
|
),
|
|
1746
|
-
/* @__PURE__ */
|
|
1747
|
-
Box15,
|
|
1748
|
-
{
|
|
1749
|
-
py: 48,
|
|
1750
|
-
px: 40,
|
|
1751
|
-
maw: 420,
|
|
1752
|
-
style: {
|
|
1753
|
-
backdropFilter: "blur(24px)",
|
|
1754
|
-
WebkitBackdropFilter: "blur(24px)",
|
|
1755
|
-
background: "rgba(255,255,255,0.10)",
|
|
1756
|
-
borderRadius: "var(--mantine-radius-md)",
|
|
1757
|
-
border: "1px solid rgba(255,255,255,0.18)"
|
|
1758
|
-
},
|
|
1759
|
-
children: /* @__PURE__ */ jsx35(
|
|
1760
|
-
SdTextBox.Hero,
|
|
1761
|
-
{
|
|
1762
|
-
label,
|
|
1763
|
-
title,
|
|
1764
|
-
description,
|
|
1765
|
-
ta: "left",
|
|
1766
|
-
align: "flex-start"
|
|
1767
|
-
}
|
|
1768
|
-
)
|
|
1769
|
-
}
|
|
1770
|
-
) })
|
|
2280
|
+
/* @__PURE__ */ jsx38(SdContainer, { pos: "relative", py: HERO_PY, style: { zIndex: 1, width: "100%" }, children: /* @__PURE__ */ jsx38(HeroCopy, { label, title, description }) })
|
|
1771
2281
|
]
|
|
1772
2282
|
}
|
|
1773
2283
|
),
|
|
1774
|
-
/* @__PURE__ */
|
|
2284
|
+
/* @__PURE__ */ jsx38(Content, { children })
|
|
1775
2285
|
] });
|
|
1776
2286
|
}
|
|
1777
2287
|
function Brand({ label, title, description, children }) {
|
|
1778
|
-
return /* @__PURE__ */
|
|
1779
|
-
/* @__PURE__ */
|
|
1780
|
-
|
|
2288
|
+
return /* @__PURE__ */ jsxs25(Fragment7, { children: [
|
|
2289
|
+
/* @__PURE__ */ jsxs25(
|
|
2290
|
+
Box17,
|
|
1781
2291
|
{
|
|
1782
|
-
|
|
1783
|
-
|
|
1784
|
-
minHeight:
|
|
2292
|
+
pos: "relative",
|
|
2293
|
+
style: __spreadValues({
|
|
2294
|
+
minHeight: HERO_MIN_H,
|
|
1785
2295
|
display: "flex",
|
|
1786
|
-
alignItems: "
|
|
2296
|
+
alignItems: "flex-end",
|
|
1787
2297
|
overflow: "hidden",
|
|
1788
|
-
|
|
1789
|
-
},
|
|
2298
|
+
borderBottom: "1px solid var(--mantine-color-slate-8)"
|
|
2299
|
+
}, brandSurface),
|
|
1790
2300
|
children: [
|
|
1791
|
-
/* @__PURE__ */
|
|
1792
|
-
|
|
1793
|
-
{
|
|
1794
|
-
style: {
|
|
1795
|
-
position: "absolute",
|
|
1796
|
-
top: -80,
|
|
1797
|
-
right: -80,
|
|
1798
|
-
width: 360,
|
|
1799
|
-
height: 360,
|
|
1800
|
-
borderRadius: "50%",
|
|
1801
|
-
background: "rgba(255,255,255,0.06)",
|
|
1802
|
-
pointerEvents: "none"
|
|
1803
|
-
}
|
|
1804
|
-
}
|
|
1805
|
-
),
|
|
1806
|
-
/* @__PURE__ */ jsx35(
|
|
1807
|
-
Box15,
|
|
1808
|
-
{
|
|
1809
|
-
style: {
|
|
1810
|
-
position: "absolute",
|
|
1811
|
-
bottom: -60,
|
|
1812
|
-
left: -60,
|
|
1813
|
-
width: 240,
|
|
1814
|
-
height: 240,
|
|
1815
|
-
borderRadius: "50%",
|
|
1816
|
-
background: "rgba(255,255,255,0.04)",
|
|
1817
|
-
pointerEvents: "none"
|
|
1818
|
-
}
|
|
1819
|
-
}
|
|
1820
|
-
),
|
|
1821
|
-
/* @__PURE__ */ jsx35(SdContainer, { style: { position: "relative", zIndex: 1, width: "100%" }, children: /* @__PURE__ */ jsx35(
|
|
1822
|
-
SdTextBox.Hero,
|
|
1823
|
-
{
|
|
1824
|
-
label,
|
|
1825
|
-
title,
|
|
1826
|
-
description,
|
|
1827
|
-
ta: "center",
|
|
1828
|
-
align: "center",
|
|
1829
|
-
maw: 640,
|
|
1830
|
-
mx: "auto",
|
|
1831
|
-
pt: 80,
|
|
1832
|
-
pb: 64
|
|
1833
|
-
}
|
|
1834
|
-
) })
|
|
2301
|
+
/* @__PURE__ */ jsx38(Box17, { "aria-hidden": true, pos: "absolute", inset: 0, style: brandDotTexture }),
|
|
2302
|
+
/* @__PURE__ */ jsx38(SdContainer, { pos: "relative", py: HERO_PY, style: { zIndex: 1, width: "100%" }, children: /* @__PURE__ */ jsx38(HeroCopy, { label, title, description }) })
|
|
1835
2303
|
]
|
|
1836
2304
|
}
|
|
1837
2305
|
),
|
|
1838
|
-
/* @__PURE__ */
|
|
2306
|
+
/* @__PURE__ */ jsx38(Content, { children })
|
|
1839
2307
|
] });
|
|
1840
2308
|
}
|
|
1841
2309
|
var PageLayout = {
|
|
1842
|
-
/**
|
|
2310
|
+
/** 사진 배경 + 하단 스크림 + 좌측 정렬 텍스트 */
|
|
1843
2311
|
Image: Image2,
|
|
1844
2312
|
/** SdTextBox.Section 타이틀 + Plain 컨테이너 */
|
|
1845
2313
|
Minimal,
|
|
1846
|
-
/** primary
|
|
2314
|
+
/** slate 바탕 + primary 라이트 + 도트 텍스처 */
|
|
1847
2315
|
Brand,
|
|
1848
2316
|
/** 히어로 없이 SdContainer + py="xl" 만 */
|
|
1849
2317
|
Plain: Plain2
|
|
1850
2318
|
};
|
|
2319
|
+
var PageLayoutImage = PageLayout.Image;
|
|
2320
|
+
var PageLayoutMinimal = PageLayout.Minimal;
|
|
2321
|
+
var PageLayoutBrand = PageLayout.Brand;
|
|
2322
|
+
var PageLayoutPlain = PageLayout.Plain;
|
|
1851
2323
|
|
|
1852
2324
|
// ui/theme.ts
|
|
1853
2325
|
import { createTheme, rem as rem2 } from "@mantine/core";
|
|
@@ -1944,9 +2416,31 @@ var green = [
|
|
|
1944
2416
|
"#14532d"
|
|
1945
2417
|
// 9 green-900
|
|
1946
2418
|
];
|
|
2419
|
+
var amber = [
|
|
2420
|
+
"#fffbeb",
|
|
2421
|
+
// 0 amber-50
|
|
2422
|
+
"#fef3c7",
|
|
2423
|
+
// 1 amber-100
|
|
2424
|
+
"#fde68a",
|
|
2425
|
+
// 2 amber-200
|
|
2426
|
+
"#fcd34d",
|
|
2427
|
+
// 3 amber-300
|
|
2428
|
+
"#fbbf24",
|
|
2429
|
+
// 4 amber-400
|
|
2430
|
+
"#f59e0b",
|
|
2431
|
+
// 5 amber-500
|
|
2432
|
+
"#d97706",
|
|
2433
|
+
// 6 amber-600
|
|
2434
|
+
"#b45309",
|
|
2435
|
+
// 7 amber-700
|
|
2436
|
+
"#92400e",
|
|
2437
|
+
// 8 amber-800
|
|
2438
|
+
"#78350f"
|
|
2439
|
+
// 9 amber-900
|
|
2440
|
+
];
|
|
1947
2441
|
var theme = createTheme({
|
|
1948
2442
|
/* ---- Color ---- */
|
|
1949
|
-
colors: { primary, secondary, slate, red, green, dark: slate },
|
|
2443
|
+
colors: { primary, secondary, slate, red, green, amber, dark: slate },
|
|
1950
2444
|
primaryColor: "primary",
|
|
1951
2445
|
primaryShade: { light: 6, dark: 5 },
|
|
1952
2446
|
/* ---- Type ---- */
|
|
@@ -2090,6 +2584,10 @@ export {
|
|
|
2090
2584
|
Logo,
|
|
2091
2585
|
MainLayout,
|
|
2092
2586
|
PageLayout,
|
|
2587
|
+
PageLayoutBrand,
|
|
2588
|
+
PageLayoutImage,
|
|
2589
|
+
PageLayoutMinimal,
|
|
2590
|
+
PageLayoutPlain,
|
|
2093
2591
|
SdBadge,
|
|
2094
2592
|
SdBadgeDefault,
|
|
2095
2593
|
SdBadgePrimary,
|
|
@@ -2125,17 +2623,40 @@ export {
|
|
|
2125
2623
|
SdFeatures,
|
|
2126
2624
|
SdFooter,
|
|
2127
2625
|
SdHeader,
|
|
2626
|
+
SdHeaderMega,
|
|
2627
|
+
SdHeaderSimple,
|
|
2128
2628
|
SdInput,
|
|
2629
|
+
SdInputAutocomplete,
|
|
2630
|
+
SdInputCheckbox,
|
|
2631
|
+
SdInputColor,
|
|
2632
|
+
SdInputDate,
|
|
2633
|
+
SdInputDateRange,
|
|
2129
2634
|
SdInputEmail,
|
|
2635
|
+
SdInputFile,
|
|
2636
|
+
SdInputJson,
|
|
2637
|
+
SdInputMultiSelect,
|
|
2638
|
+
SdInputNativeSelect,
|
|
2639
|
+
SdInputNumber,
|
|
2130
2640
|
SdInputPassword,
|
|
2641
|
+
SdInputPinCode,
|
|
2642
|
+
SdInputRadioGroup,
|
|
2643
|
+
SdInputRating,
|
|
2644
|
+
SdInputSegmented,
|
|
2131
2645
|
SdInputSelect,
|
|
2646
|
+
SdInputSlider,
|
|
2647
|
+
SdInputSwitch,
|
|
2648
|
+
SdInputTags,
|
|
2132
2649
|
SdInputText,
|
|
2133
2650
|
SdInputTextarea,
|
|
2651
|
+
SdInputTime,
|
|
2134
2652
|
SdLink,
|
|
2135
2653
|
SdLinkBody,
|
|
2136
2654
|
SdLinkHint,
|
|
2137
2655
|
SdLinkStrong,
|
|
2138
2656
|
SdLinkSub,
|
|
2657
|
+
SdLoginView,
|
|
2658
|
+
SdLoginViewCard,
|
|
2659
|
+
SdLoginViewSplit,
|
|
2139
2660
|
SdMap,
|
|
2140
2661
|
SdMapSingle,
|
|
2141
2662
|
SdMapTabs,
|
|
@@ -2148,6 +2669,9 @@ export {
|
|
|
2148
2669
|
SdQuote,
|
|
2149
2670
|
SdQuoteCard,
|
|
2150
2671
|
SdQuotePlain,
|
|
2672
|
+
SdResult,
|
|
2673
|
+
SdResultError,
|
|
2674
|
+
SdResultSuccess,
|
|
2151
2675
|
SdSkeleton,
|
|
2152
2676
|
SdSkeletonAvatar,
|
|
2153
2677
|
SdSkeletonCard,
|
|
@@ -2195,5 +2719,15 @@ export {
|
|
|
2195
2719
|
SdTitleDisplay,
|
|
2196
2720
|
SdTitleSection,
|
|
2197
2721
|
SdTitleSub,
|
|
2722
|
+
SdToast,
|
|
2723
|
+
SdToastClean,
|
|
2724
|
+
SdToastError,
|
|
2725
|
+
SdToastHide,
|
|
2726
|
+
SdToastInfo,
|
|
2727
|
+
SdToastLoading,
|
|
2728
|
+
SdToastProvider,
|
|
2729
|
+
SdToastSuccess,
|
|
2730
|
+
SdToastUpdate,
|
|
2731
|
+
SdToastWarning,
|
|
2198
2732
|
theme
|
|
2199
2733
|
};
|