@yeongseoksong/framework 1.2.0 → 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 +334 -5
- 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 +1063 -494
- package/dist/ui/index.d.mts +259 -17
- package/dist/ui/index.d.ts +259 -17
- package/dist/ui/index.mjs +1022 -464
- 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, children }) {
|
|
|
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, children }) {
|
|
|
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,44 +1618,95 @@ function SdHeader({ navItems, loginFlag, children }) {
|
|
|
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__ */
|
|
1414
|
-
children
|
|
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" }) })
|
|
1415
1629
|
] })
|
|
1416
1630
|
] }) })
|
|
1417
1631
|
}
|
|
1418
1632
|
),
|
|
1419
|
-
/* @__PURE__ */
|
|
1420
|
-
|
|
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) => {
|
|
1421
1652
|
const kids = childrenOf(item.id);
|
|
1422
1653
|
if (kids.length === 0) {
|
|
1423
|
-
return /* @__PURE__ */
|
|
1654
|
+
return /* @__PURE__ */ jsx29(SdLink.Body, { href: item.href, children: item.label }, item.id);
|
|
1424
1655
|
}
|
|
1425
|
-
return
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
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
|
+
)
|
|
1435
1685
|
);
|
|
1436
|
-
}),
|
|
1437
|
-
|
|
1438
|
-
|
|
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
|
+
)
|
|
1439
1702
|
] });
|
|
1440
1703
|
}
|
|
1704
|
+
var SdHeader = Object.assign(MegaHeader, { Mega: MegaHeader, Simple: SimpleHeader });
|
|
1705
|
+
var SdHeaderMega = MegaHeader;
|
|
1706
|
+
var SdHeaderSimple = SimpleHeader;
|
|
1441
1707
|
|
|
1442
1708
|
// ui/organism/Footer.tsx
|
|
1443
|
-
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";
|
|
1444
1710
|
import {
|
|
1445
1711
|
IconBrandFacebook,
|
|
1446
1712
|
IconBrandGithub,
|
|
@@ -1450,13 +1716,17 @@ import {
|
|
|
1450
1716
|
IconBrandYoutube,
|
|
1451
1717
|
IconWorld
|
|
1452
1718
|
} from "@tabler/icons-react";
|
|
1453
|
-
import { Fragment as Fragment5, jsx as
|
|
1719
|
+
import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1454
1720
|
function FooterNavColumns({ items }) {
|
|
1455
1721
|
const topLevel = items.filter((item) => !item.parentId);
|
|
1456
1722
|
const getChildren = (parentId) => items.filter((item) => item.parentId === parentId);
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1723
|
+
const CHILD_THRESH = 4;
|
|
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),
|
|
1726
|
+
getChildren(group.id).map((link, id) => {
|
|
1727
|
+
if (id >= CHILD_THRESH) return;
|
|
1728
|
+
return /* @__PURE__ */ jsx30(SdLink.Hint, { href: link.href, children: link.label }, link.id);
|
|
1729
|
+
})
|
|
1460
1730
|
] }) }, group.id)) });
|
|
1461
1731
|
}
|
|
1462
1732
|
var SOCIAL_ICONS = {
|
|
@@ -1469,10 +1739,10 @@ var SOCIAL_ICONS = {
|
|
|
1469
1739
|
blog: IconWorld
|
|
1470
1740
|
};
|
|
1471
1741
|
function FooterSocials({ items }) {
|
|
1472
|
-
return /* @__PURE__ */
|
|
1742
|
+
return /* @__PURE__ */ jsx30(Group11, { gap: 0, wrap: "nowrap", children: items.map((item) => {
|
|
1473
1743
|
var _a4, _b;
|
|
1474
1744
|
const Icon = (_a4 = SOCIAL_ICONS[item.platform]) != null ? _a4 : IconWorld;
|
|
1475
|
-
return /* @__PURE__ */
|
|
1745
|
+
return /* @__PURE__ */ jsx30(
|
|
1476
1746
|
ActionIcon,
|
|
1477
1747
|
{
|
|
1478
1748
|
component: "a",
|
|
@@ -1483,62 +1753,62 @@ function FooterSocials({ items }) {
|
|
|
1483
1753
|
color: "gray",
|
|
1484
1754
|
variant: "subtle",
|
|
1485
1755
|
"aria-label": (_b = item.label) != null ? _b : item.platform,
|
|
1486
|
-
children: /* @__PURE__ */
|
|
1756
|
+
children: /* @__PURE__ */ jsx30(Icon, { size: 18, stroke: 1.5 })
|
|
1487
1757
|
},
|
|
1488
1758
|
item.url
|
|
1489
1759
|
);
|
|
1490
1760
|
}) });
|
|
1491
1761
|
}
|
|
1492
1762
|
function InfoCell({ label, children }) {
|
|
1493
|
-
return /* @__PURE__ */ jsxs17(
|
|
1494
|
-
/* @__PURE__ */
|
|
1495
|
-
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
|
|
1496
1766
|
] });
|
|
1497
1767
|
}
|
|
1498
1768
|
function FooterCompanyInfo({ company }) {
|
|
1499
1769
|
const sortedAddresses = [...company.addresses].sort((a, b) => a.order - b.order);
|
|
1500
1770
|
return /* @__PURE__ */ jsxs17(SimpleGrid6, { cols: { base: 2, sm: 2, md: 1 }, spacing: "md", verticalSpacing: 0, children: [
|
|
1501
|
-
/* @__PURE__ */
|
|
1502
|
-
/* @__PURE__ */
|
|
1503
|
-
sortedAddresses.map((addr) => /* @__PURE__ */
|
|
1504
|
-
/* @__PURE__ */
|
|
1505
|
-
company.fax && /* @__PURE__ */
|
|
1506
|
-
/* @__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 }) })
|
|
1507
1777
|
] });
|
|
1508
1778
|
}
|
|
1509
1779
|
function SdFooter({ company, navItems, policyLinks, description }) {
|
|
1510
1780
|
const visibleNav = filterAndSort(navItems);
|
|
1511
1781
|
const visiblePolicy = filterAndSort(policyLinks);
|
|
1512
|
-
return /* @__PURE__ */
|
|
1513
|
-
/* @__PURE__ */
|
|
1514
|
-
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 }),
|
|
1515
1785
|
/* @__PURE__ */ jsxs17(Flex, { direction: { base: "column", md: "row" }, gap: 48, align: "flex-start", children: [
|
|
1516
|
-
/* @__PURE__ */
|
|
1517
|
-
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 }) }) })
|
|
1518
1788
|
] }),
|
|
1519
|
-
/* @__PURE__ */
|
|
1520
|
-
/* @__PURE__ */ jsxs17(
|
|
1789
|
+
/* @__PURE__ */ jsx30(Divider3, {}),
|
|
1790
|
+
/* @__PURE__ */ jsxs17(Group11, { justify: "space-between", wrap: "wrap", gap: "xs", children: [
|
|
1521
1791
|
/* @__PURE__ */ jsxs17(SdText.Sub, { children: [
|
|
1522
1792
|
"\xA9 ",
|
|
1523
1793
|
company.copyrightYear,
|
|
1524
1794
|
" ",
|
|
1525
|
-
company.name,
|
|
1795
|
+
t(company.name),
|
|
1526
1796
|
". All rights reserved."
|
|
1527
1797
|
] }),
|
|
1528
|
-
/* @__PURE__ */ jsxs17(
|
|
1529
|
-
visiblePolicy.length > 0 && /* @__PURE__ */
|
|
1530
|
-
const Link4 = item.highlight ? SdLink.
|
|
1531
|
-
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);
|
|
1532
1802
|
}) }),
|
|
1533
|
-
company.socials && company.socials.length > 0 && /* @__PURE__ */
|
|
1803
|
+
company.socials && company.socials.length > 0 && /* @__PURE__ */ jsx30(FooterSocials, { items: company.socials })
|
|
1534
1804
|
] })
|
|
1535
1805
|
] })
|
|
1536
1806
|
] }) }) });
|
|
1537
1807
|
}
|
|
1538
1808
|
|
|
1539
1809
|
// ui/organism/FeatureSection.tsx
|
|
1540
|
-
import { Stack as
|
|
1541
|
-
import { jsx as
|
|
1810
|
+
import { Stack as Stack18 } from "@mantine/core";
|
|
1811
|
+
import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1542
1812
|
function SdFeatureSection(_a4) {
|
|
1543
1813
|
var _b = _a4, {
|
|
1544
1814
|
label,
|
|
@@ -1555,8 +1825,8 @@ function SdFeatureSection(_a4) {
|
|
|
1555
1825
|
"cols",
|
|
1556
1826
|
"py"
|
|
1557
1827
|
]);
|
|
1558
|
-
return /* @__PURE__ */
|
|
1559
|
-
/* @__PURE__ */
|
|
1828
|
+
return /* @__PURE__ */ jsx31(SdContainer, __spreadProps(__spreadValues({ py }, boxProps), { children: /* @__PURE__ */ jsxs18(Stack18, { gap: "xl", children: [
|
|
1829
|
+
/* @__PURE__ */ jsx31(
|
|
1560
1830
|
SdTextBox.Section,
|
|
1561
1831
|
{
|
|
1562
1832
|
label,
|
|
@@ -1567,13 +1837,13 @@ function SdFeatureSection(_a4) {
|
|
|
1567
1837
|
align: "center"
|
|
1568
1838
|
}
|
|
1569
1839
|
),
|
|
1570
|
-
/* @__PURE__ */
|
|
1840
|
+
/* @__PURE__ */ jsx31(SdFeatures, { items, cols })
|
|
1571
1841
|
] }) }));
|
|
1572
1842
|
}
|
|
1573
1843
|
|
|
1574
1844
|
// ui/organism/TimelineSection.tsx
|
|
1575
|
-
import { Center as Center3, Stack as
|
|
1576
|
-
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";
|
|
1577
1847
|
function SdTimelineSection(_a4) {
|
|
1578
1848
|
var _b = _a4, {
|
|
1579
1849
|
label,
|
|
@@ -1588,15 +1858,15 @@ function SdTimelineSection(_a4) {
|
|
|
1588
1858
|
"items",
|
|
1589
1859
|
"py"
|
|
1590
1860
|
]);
|
|
1591
|
-
return /* @__PURE__ */
|
|
1592
|
-
/* @__PURE__ */
|
|
1593
|
-
/* @__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 }) })
|
|
1594
1864
|
] })) });
|
|
1595
1865
|
}
|
|
1596
1866
|
|
|
1597
1867
|
// ui/organism/StepsSection.tsx
|
|
1598
|
-
import { Stack as
|
|
1599
|
-
import { jsx as
|
|
1868
|
+
import { Stack as Stack20 } from "@mantine/core";
|
|
1869
|
+
import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1600
1870
|
function SdStepsSection(_a4) {
|
|
1601
1871
|
var _b = _a4, {
|
|
1602
1872
|
label,
|
|
@@ -1611,17 +1881,17 @@ function SdStepsSection(_a4) {
|
|
|
1611
1881
|
"items",
|
|
1612
1882
|
"py"
|
|
1613
1883
|
]);
|
|
1614
|
-
return /* @__PURE__ */
|
|
1615
|
-
(label || title || description) && /* @__PURE__ */
|
|
1616
|
-
/* @__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 })
|
|
1617
1887
|
] }) }));
|
|
1618
1888
|
}
|
|
1619
1889
|
|
|
1620
1890
|
// ui/organism/ErrorView.tsx
|
|
1621
|
-
import { Center as Center4, Group as
|
|
1622
|
-
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";
|
|
1623
1893
|
function StatusCode({ code }) {
|
|
1624
|
-
return /* @__PURE__ */
|
|
1894
|
+
return /* @__PURE__ */ jsx34(
|
|
1625
1895
|
Text2,
|
|
1626
1896
|
{
|
|
1627
1897
|
fz: 160,
|
|
@@ -1635,15 +1905,15 @@ function StatusCode({ code }) {
|
|
|
1635
1905
|
);
|
|
1636
1906
|
}
|
|
1637
1907
|
function Page({ error, onReset, onHome }) {
|
|
1638
|
-
return /* @__PURE__ */
|
|
1639
|
-
/* @__PURE__ */
|
|
1640
|
-
/* @__PURE__ */ jsxs21(
|
|
1641
|
-
/* @__PURE__ */
|
|
1642
|
-
/* @__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." })
|
|
1643
1913
|
] }),
|
|
1644
|
-
/* @__PURE__ */ jsxs21(
|
|
1645
|
-
/* @__PURE__ */
|
|
1646
|
-
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" })
|
|
1647
1917
|
] })
|
|
1648
1918
|
] }) }) });
|
|
1649
1919
|
}
|
|
@@ -1655,15 +1925,15 @@ function NotFound({
|
|
|
1655
1925
|
},
|
|
1656
1926
|
onBack = () => window.history.back()
|
|
1657
1927
|
}) {
|
|
1658
|
-
return /* @__PURE__ */
|
|
1659
|
-
/* @__PURE__ */
|
|
1660
|
-
/* @__PURE__ */ jsxs21(
|
|
1661
|
-
/* @__PURE__ */
|
|
1662
|
-
/* @__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 })
|
|
1663
1933
|
] }),
|
|
1664
|
-
/* @__PURE__ */ jsxs21(
|
|
1665
|
-
onHome && /* @__PURE__ */
|
|
1666
|
-
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" })
|
|
1667
1937
|
] })
|
|
1668
1938
|
] }) }) });
|
|
1669
1939
|
}
|
|
@@ -1676,174 +1946,380 @@ var SdErrorView = {
|
|
|
1676
1946
|
var SdErrorViewPage = SdErrorView.Page;
|
|
1677
1947
|
var SdErrorViewNotFound = SdErrorView.NotFound;
|
|
1678
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
|
+
|
|
1679
2187
|
// ui/template/MainLayout.tsx
|
|
1680
2188
|
import { AppShell } from "@mantine/core";
|
|
1681
|
-
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
|
+
};
|
|
1682
2194
|
function MainLayout({
|
|
1683
2195
|
children,
|
|
1684
2196
|
navItems,
|
|
1685
|
-
companyInfo
|
|
2197
|
+
companyInfo,
|
|
2198
|
+
loginFlag,
|
|
2199
|
+
headerVariant = "mega"
|
|
1686
2200
|
}) {
|
|
1687
|
-
|
|
1688
|
-
|
|
1689
|
-
/* @__PURE__ */
|
|
1690
|
-
/* @__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 })
|
|
1691
2206
|
] });
|
|
1692
2207
|
}
|
|
1693
2208
|
|
|
1694
2209
|
// ui/template/PageLayout.tsx
|
|
1695
|
-
import { Box as
|
|
1696
|
-
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;
|
|
1697
2215
|
function Content({ children }) {
|
|
1698
|
-
return /* @__PURE__ */
|
|
2216
|
+
return /* @__PURE__ */ jsx38(SdContainer, { py: "xl", children: /* @__PURE__ */ jsx38(Stack24, { gap: "xl", children }) });
|
|
1699
2217
|
}
|
|
1700
2218
|
function LayoutGap() {
|
|
1701
|
-
return /* @__PURE__ */
|
|
2219
|
+
return /* @__PURE__ */ jsx38(Space, { h: 48 });
|
|
1702
2220
|
}
|
|
1703
2221
|
function Minimal({ label, title, description, children }) {
|
|
1704
|
-
return /* @__PURE__ */
|
|
1705
|
-
/* @__PURE__ */
|
|
1706
|
-
/* @__PURE__ */
|
|
2222
|
+
return /* @__PURE__ */ jsxs25(Plain2, { children: [
|
|
2223
|
+
/* @__PURE__ */ jsx38(SdTextBox.Section, { label, title, description: description != null ? description : "" }),
|
|
2224
|
+
/* @__PURE__ */ jsx38(Divider5, {}),
|
|
1707
2225
|
children
|
|
1708
|
-
] })
|
|
2226
|
+
] });
|
|
1709
2227
|
}
|
|
1710
2228
|
function Plain2({ children }) {
|
|
1711
|
-
return /* @__PURE__ */
|
|
1712
|
-
/* @__PURE__ */
|
|
1713
|
-
/* @__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
|
+
)
|
|
1714
2251
|
] });
|
|
1715
2252
|
}
|
|
1716
2253
|
function Image2({ image, label, title, description, children }) {
|
|
1717
|
-
return /* @__PURE__ */
|
|
1718
|
-
/* @__PURE__ */
|
|
1719
|
-
|
|
2254
|
+
return /* @__PURE__ */ jsxs25(Fragment7, { children: [
|
|
2255
|
+
/* @__PURE__ */ jsxs25(
|
|
2256
|
+
Box17,
|
|
1720
2257
|
{
|
|
2258
|
+
pos: "relative",
|
|
1721
2259
|
style: {
|
|
1722
|
-
|
|
1723
|
-
minHeight: "30svh",
|
|
2260
|
+
minHeight: HERO_MIN_H,
|
|
1724
2261
|
display: "flex",
|
|
1725
|
-
alignItems: "
|
|
2262
|
+
alignItems: "flex-end",
|
|
1726
2263
|
backgroundImage: image ? `url(${image})` : void 0,
|
|
1727
2264
|
backgroundSize: "cover",
|
|
1728
2265
|
backgroundPosition: "center",
|
|
1729
2266
|
backgroundColor: "var(--mantine-color-slate-9)"
|
|
1730
2267
|
},
|
|
1731
2268
|
children: [
|
|
1732
|
-
/* @__PURE__ */
|
|
1733
|
-
|
|
2269
|
+
/* @__PURE__ */ jsx38(
|
|
2270
|
+
Box17,
|
|
1734
2271
|
{
|
|
2272
|
+
"aria-hidden": true,
|
|
2273
|
+
pos: "absolute",
|
|
2274
|
+
inset: 0,
|
|
1735
2275
|
style: {
|
|
1736
|
-
|
|
1737
|
-
inset: 0,
|
|
1738
|
-
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%)"
|
|
1739
2277
|
}
|
|
1740
2278
|
}
|
|
1741
2279
|
),
|
|
1742
|
-
/* @__PURE__ */
|
|
1743
|
-
Box15,
|
|
1744
|
-
{
|
|
1745
|
-
py: 48,
|
|
1746
|
-
px: 40,
|
|
1747
|
-
maw: 420,
|
|
1748
|
-
style: {
|
|
1749
|
-
backdropFilter: "blur(24px)",
|
|
1750
|
-
WebkitBackdropFilter: "blur(24px)",
|
|
1751
|
-
background: "rgba(255,255,255,0.10)",
|
|
1752
|
-
borderRadius: "var(--mantine-radius-md)",
|
|
1753
|
-
border: "1px solid rgba(255,255,255,0.18)"
|
|
1754
|
-
},
|
|
1755
|
-
children: /* @__PURE__ */ jsx35(
|
|
1756
|
-
SdTextBox.Hero,
|
|
1757
|
-
{
|
|
1758
|
-
label,
|
|
1759
|
-
title,
|
|
1760
|
-
description,
|
|
1761
|
-
ta: "left",
|
|
1762
|
-
align: "flex-start"
|
|
1763
|
-
}
|
|
1764
|
-
)
|
|
1765
|
-
}
|
|
1766
|
-
) })
|
|
2280
|
+
/* @__PURE__ */ jsx38(SdContainer, { pos: "relative", py: HERO_PY, style: { zIndex: 1, width: "100%" }, children: /* @__PURE__ */ jsx38(HeroCopy, { label, title, description }) })
|
|
1767
2281
|
]
|
|
1768
2282
|
}
|
|
1769
2283
|
),
|
|
1770
|
-
/* @__PURE__ */
|
|
2284
|
+
/* @__PURE__ */ jsx38(Content, { children })
|
|
1771
2285
|
] });
|
|
1772
2286
|
}
|
|
1773
2287
|
function Brand({ label, title, description, children }) {
|
|
1774
|
-
return /* @__PURE__ */
|
|
1775
|
-
/* @__PURE__ */
|
|
1776
|
-
|
|
2288
|
+
return /* @__PURE__ */ jsxs25(Fragment7, { children: [
|
|
2289
|
+
/* @__PURE__ */ jsxs25(
|
|
2290
|
+
Box17,
|
|
1777
2291
|
{
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
minHeight:
|
|
2292
|
+
pos: "relative",
|
|
2293
|
+
style: __spreadValues({
|
|
2294
|
+
minHeight: HERO_MIN_H,
|
|
1781
2295
|
display: "flex",
|
|
1782
|
-
alignItems: "
|
|
2296
|
+
alignItems: "flex-end",
|
|
1783
2297
|
overflow: "hidden",
|
|
1784
|
-
|
|
1785
|
-
},
|
|
2298
|
+
borderBottom: "1px solid var(--mantine-color-slate-8)"
|
|
2299
|
+
}, brandSurface),
|
|
1786
2300
|
children: [
|
|
1787
|
-
/* @__PURE__ */
|
|
1788
|
-
|
|
1789
|
-
{
|
|
1790
|
-
style: {
|
|
1791
|
-
position: "absolute",
|
|
1792
|
-
top: -80,
|
|
1793
|
-
right: -80,
|
|
1794
|
-
width: 360,
|
|
1795
|
-
height: 360,
|
|
1796
|
-
borderRadius: "50%",
|
|
1797
|
-
background: "rgba(255,255,255,0.06)",
|
|
1798
|
-
pointerEvents: "none"
|
|
1799
|
-
}
|
|
1800
|
-
}
|
|
1801
|
-
),
|
|
1802
|
-
/* @__PURE__ */ jsx35(
|
|
1803
|
-
Box15,
|
|
1804
|
-
{
|
|
1805
|
-
style: {
|
|
1806
|
-
position: "absolute",
|
|
1807
|
-
bottom: -60,
|
|
1808
|
-
left: -60,
|
|
1809
|
-
width: 240,
|
|
1810
|
-
height: 240,
|
|
1811
|
-
borderRadius: "50%",
|
|
1812
|
-
background: "rgba(255,255,255,0.04)",
|
|
1813
|
-
pointerEvents: "none"
|
|
1814
|
-
}
|
|
1815
|
-
}
|
|
1816
|
-
),
|
|
1817
|
-
/* @__PURE__ */ jsx35(SdContainer, { style: { position: "relative", zIndex: 1, width: "100%" }, children: /* @__PURE__ */ jsx35(
|
|
1818
|
-
SdTextBox.Hero,
|
|
1819
|
-
{
|
|
1820
|
-
label,
|
|
1821
|
-
title,
|
|
1822
|
-
description,
|
|
1823
|
-
ta: "center",
|
|
1824
|
-
align: "center",
|
|
1825
|
-
maw: 640,
|
|
1826
|
-
mx: "auto",
|
|
1827
|
-
pt: 80,
|
|
1828
|
-
pb: 64
|
|
1829
|
-
}
|
|
1830
|
-
) })
|
|
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 }) })
|
|
1831
2303
|
]
|
|
1832
2304
|
}
|
|
1833
2305
|
),
|
|
1834
|
-
/* @__PURE__ */
|
|
2306
|
+
/* @__PURE__ */ jsx38(Content, { children })
|
|
1835
2307
|
] });
|
|
1836
2308
|
}
|
|
1837
2309
|
var PageLayout = {
|
|
1838
|
-
/**
|
|
2310
|
+
/** 사진 배경 + 하단 스크림 + 좌측 정렬 텍스트 */
|
|
1839
2311
|
Image: Image2,
|
|
1840
2312
|
/** SdTextBox.Section 타이틀 + Plain 컨테이너 */
|
|
1841
2313
|
Minimal,
|
|
1842
|
-
/** primary
|
|
2314
|
+
/** slate 바탕 + primary 라이트 + 도트 텍스처 */
|
|
1843
2315
|
Brand,
|
|
1844
2316
|
/** 히어로 없이 SdContainer + py="xl" 만 */
|
|
1845
2317
|
Plain: Plain2
|
|
1846
2318
|
};
|
|
2319
|
+
var PageLayoutImage = PageLayout.Image;
|
|
2320
|
+
var PageLayoutMinimal = PageLayout.Minimal;
|
|
2321
|
+
var PageLayoutBrand = PageLayout.Brand;
|
|
2322
|
+
var PageLayoutPlain = PageLayout.Plain;
|
|
1847
2323
|
|
|
1848
2324
|
// ui/theme.ts
|
|
1849
2325
|
import { createTheme, rem as rem2 } from "@mantine/core";
|
|
@@ -1896,33 +2372,75 @@ var slate = [
|
|
|
1896
2372
|
"#0f172a"
|
|
1897
2373
|
// 9 slate-900
|
|
1898
2374
|
];
|
|
1899
|
-
var
|
|
1900
|
-
"#
|
|
1901
|
-
|
|
1902
|
-
"#
|
|
1903
|
-
|
|
1904
|
-
"#
|
|
1905
|
-
|
|
1906
|
-
"#
|
|
1907
|
-
|
|
1908
|
-
"#
|
|
1909
|
-
|
|
2375
|
+
var red = [
|
|
2376
|
+
"#fef2f2",
|
|
2377
|
+
// 0 red-50
|
|
2378
|
+
"#fee2e2",
|
|
2379
|
+
// 1 red-100
|
|
2380
|
+
"#fecaca",
|
|
2381
|
+
// 2 red-200
|
|
2382
|
+
"#fca5a5",
|
|
2383
|
+
// 3 red-300
|
|
2384
|
+
"#f87171",
|
|
2385
|
+
// 4 red-400
|
|
2386
|
+
"#ef4444",
|
|
2387
|
+
// 5 red-500
|
|
2388
|
+
"#dc2626",
|
|
2389
|
+
// 6 red-600
|
|
2390
|
+
"#b91c1c",
|
|
2391
|
+
// 7 red-700
|
|
2392
|
+
"#991b1b",
|
|
2393
|
+
// 8 red-800
|
|
2394
|
+
"#7f1d1d"
|
|
2395
|
+
// 9 red-900
|
|
2396
|
+
];
|
|
2397
|
+
var green = [
|
|
2398
|
+
"#f0fdf4",
|
|
2399
|
+
// 0 green-50
|
|
2400
|
+
"#dcfce7",
|
|
2401
|
+
// 1 green-100
|
|
2402
|
+
"#bbf7d0",
|
|
2403
|
+
// 2 green-200
|
|
2404
|
+
"#86efac",
|
|
2405
|
+
// 3 green-300
|
|
2406
|
+
"#4ade80",
|
|
2407
|
+
// 4 green-400
|
|
2408
|
+
"#22c55e",
|
|
2409
|
+
// 5 green-500
|
|
2410
|
+
"#16a34a",
|
|
2411
|
+
// 6 green-600
|
|
2412
|
+
"#15803d",
|
|
2413
|
+
// 7 green-700
|
|
2414
|
+
"#166534",
|
|
2415
|
+
// 8 green-800
|
|
2416
|
+
"#14532d"
|
|
2417
|
+
// 9 green-900
|
|
1910
2418
|
];
|
|
1911
|
-
var
|
|
1912
|
-
"#
|
|
1913
|
-
|
|
1914
|
-
"#
|
|
1915
|
-
|
|
1916
|
-
"#
|
|
1917
|
-
|
|
1918
|
-
"#
|
|
1919
|
-
|
|
1920
|
-
"#
|
|
1921
|
-
|
|
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
|
|
1922
2440
|
];
|
|
1923
2441
|
var theme = createTheme({
|
|
1924
2442
|
/* ---- Color ---- */
|
|
1925
|
-
colors: { primary, secondary, slate,
|
|
2443
|
+
colors: { primary, secondary, slate, red, green, amber, dark: slate },
|
|
1926
2444
|
primaryColor: "primary",
|
|
1927
2445
|
primaryShade: { light: 6, dark: 5 },
|
|
1928
2446
|
/* ---- Type ---- */
|
|
@@ -2066,6 +2584,10 @@ export {
|
|
|
2066
2584
|
Logo,
|
|
2067
2585
|
MainLayout,
|
|
2068
2586
|
PageLayout,
|
|
2587
|
+
PageLayoutBrand,
|
|
2588
|
+
PageLayoutImage,
|
|
2589
|
+
PageLayoutMinimal,
|
|
2590
|
+
PageLayoutPlain,
|
|
2069
2591
|
SdBadge,
|
|
2070
2592
|
SdBadgeDefault,
|
|
2071
2593
|
SdBadgePrimary,
|
|
@@ -2101,17 +2623,40 @@ export {
|
|
|
2101
2623
|
SdFeatures,
|
|
2102
2624
|
SdFooter,
|
|
2103
2625
|
SdHeader,
|
|
2626
|
+
SdHeaderMega,
|
|
2627
|
+
SdHeaderSimple,
|
|
2104
2628
|
SdInput,
|
|
2629
|
+
SdInputAutocomplete,
|
|
2630
|
+
SdInputCheckbox,
|
|
2631
|
+
SdInputColor,
|
|
2632
|
+
SdInputDate,
|
|
2633
|
+
SdInputDateRange,
|
|
2105
2634
|
SdInputEmail,
|
|
2635
|
+
SdInputFile,
|
|
2636
|
+
SdInputJson,
|
|
2637
|
+
SdInputMultiSelect,
|
|
2638
|
+
SdInputNativeSelect,
|
|
2639
|
+
SdInputNumber,
|
|
2106
2640
|
SdInputPassword,
|
|
2641
|
+
SdInputPinCode,
|
|
2642
|
+
SdInputRadioGroup,
|
|
2643
|
+
SdInputRating,
|
|
2644
|
+
SdInputSegmented,
|
|
2107
2645
|
SdInputSelect,
|
|
2646
|
+
SdInputSlider,
|
|
2647
|
+
SdInputSwitch,
|
|
2648
|
+
SdInputTags,
|
|
2108
2649
|
SdInputText,
|
|
2109
2650
|
SdInputTextarea,
|
|
2651
|
+
SdInputTime,
|
|
2110
2652
|
SdLink,
|
|
2111
2653
|
SdLinkBody,
|
|
2112
2654
|
SdLinkHint,
|
|
2113
2655
|
SdLinkStrong,
|
|
2114
2656
|
SdLinkSub,
|
|
2657
|
+
SdLoginView,
|
|
2658
|
+
SdLoginViewCard,
|
|
2659
|
+
SdLoginViewSplit,
|
|
2115
2660
|
SdMap,
|
|
2116
2661
|
SdMapSingle,
|
|
2117
2662
|
SdMapTabs,
|
|
@@ -2124,6 +2669,9 @@ export {
|
|
|
2124
2669
|
SdQuote,
|
|
2125
2670
|
SdQuoteCard,
|
|
2126
2671
|
SdQuotePlain,
|
|
2672
|
+
SdResult,
|
|
2673
|
+
SdResultError,
|
|
2674
|
+
SdResultSuccess,
|
|
2127
2675
|
SdSkeleton,
|
|
2128
2676
|
SdSkeletonAvatar,
|
|
2129
2677
|
SdSkeletonCard,
|
|
@@ -2171,5 +2719,15 @@ export {
|
|
|
2171
2719
|
SdTitleDisplay,
|
|
2172
2720
|
SdTitleSection,
|
|
2173
2721
|
SdTitleSub,
|
|
2722
|
+
SdToast,
|
|
2723
|
+
SdToastClean,
|
|
2724
|
+
SdToastError,
|
|
2725
|
+
SdToastHide,
|
|
2726
|
+
SdToastInfo,
|
|
2727
|
+
SdToastLoading,
|
|
2728
|
+
SdToastProvider,
|
|
2729
|
+
SdToastSuccess,
|
|
2730
|
+
SdToastUpdate,
|
|
2731
|
+
SdToastWarning,
|
|
2174
2732
|
theme
|
|
2175
2733
|
};
|