boottent-design 0.1.81 → 0.1.83
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 +2 -277
- package/dist/{UrlFormField-VFsBGIO2.cjs → UrlFormField-C7DgIYeh.cjs} +1 -1
- package/dist/{UrlFormField-DhBCWqhC.js → UrlFormField-CPqQHGM4.js} +1 -1
- package/dist/boottent-design.ads.cjs.js +1 -1
- package/dist/boottent-design.ads.es.js +1574 -8
- package/dist/boottent-design.feature.cjs.js +1 -1
- package/dist/boottent-design.feature.es.js +1 -1
- package/dist/boottent-design.provider.cjs.js +1 -1
- package/dist/boottent-design.provider.es.js +3 -3
- package/dist/boottent-design.ui.cjs.js +1 -1
- package/dist/boottent-design.ui.es.js +174 -190
- package/dist/index-Akpc2UCv.js +21 -0
- package/dist/index-Cw9G_f7P.cjs +1 -0
- package/dist/{index-fh7-GXvn.js → index-KZYAVDUp.js} +138 -138
- package/dist/{index-D57xhjM5.cjs → index-T715hKYb.cjs} +1 -1
- package/dist/{portal-container-BwvvRejy.cjs → portal-container-B7fNqDpv.cjs} +1 -1
- package/dist/{portal-container-BIKqJnsO.js → portal-container-oVJMu2rm.js} +2 -2
- package/dist/{toggleButtonGroup-primitive-Bnq26qSE.js → toggleButtonGroup-primitive-BawO6QQP.js} +1 -1
- package/dist/{toggleButtonGroup-primitive-B5twgprT.cjs → toggleButtonGroup-primitive-DLsmj_zA.cjs} +1 -1
- package/dist/types/ads.d.ts +47 -0
- package/dist/types/ui.d.ts +1 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
# boottent-design
|
|
2
2
|
|
|
3
|
-
React, Vite, TypeScript, TailwindCSS, Radix-UI를 사용해 만든 부트텐트 디자인 시스템 라이브러리입니다.
|
|
4
|
-
|
|
5
3
|
## 목차
|
|
6
4
|
|
|
7
5
|
- [소개](#소개)
|
|
@@ -9,19 +7,11 @@ React, Vite, TypeScript, TailwindCSS, Radix-UI를 사용해 만든 부트텐트
|
|
|
9
7
|
- [시작하기](#시작하기)
|
|
10
8
|
- [설치](#설치)
|
|
11
9
|
- [프로젝트 설정](#프로젝트-설정)
|
|
12
|
-
- [사용 예제](#사용-예제)
|
|
13
|
-
- [예제 1: 기본 컴포넌트](#예제-1-기본-컴포넌트)
|
|
14
|
-
- [예제 2: 모달, 알림, 다이얼로그, 토스트](#예제-2-모달-알림-다이얼로그-토스트)
|
|
15
|
-
- [예제 3: 드롭다운](#예제-3-드롭다운)
|
|
16
|
-
- [예제 4: 토글 버튼 그룹](#예제-4-토글-버튼-그룹)
|
|
17
|
-
- [예제 5: 툴팁](#예제-5-툴팁)
|
|
18
10
|
- [제작 및 배포](#제작-및-배포)
|
|
19
11
|
|
|
20
12
|
## 소개
|
|
21
13
|
|
|
22
|
-
-
|
|
23
|
-
- React와 TypeScript를 기반으로 하며, TailwindCSS와 Radix-UI를 활용하여 높은 유연성과 접근성을 제공합니다.
|
|
24
|
-
- 다양한 UI 컴포넌트를 제공하여 빠르고 효율적인 개발을 지원합니다.
|
|
14
|
+
- [부트텐트](https://boottent.com)의 디자인 시스템 라이브러리입니다.
|
|
25
15
|
|
|
26
16
|
## 시작하기
|
|
27
17
|
|
|
@@ -39,7 +29,7 @@ npm install boottent-design@latest
|
|
|
39
29
|
|
|
40
30
|
### 프로젝트 설정
|
|
41
31
|
|
|
42
|
-
boottent-design을 프로젝트에 적용하기 위해 Vite와 TailwindCSS 설정이 필요합니다.
|
|
32
|
+
boottent-design을 프로젝트에 적용하기 위해 Vite와 TailwindCSS 설정이 필요합니다.
|
|
43
33
|
|
|
44
34
|
#### 1. React + TypeScript 프로젝트 생성
|
|
45
35
|
|
|
@@ -321,271 +311,6 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
|
|
321
311
|
);
|
|
322
312
|
```
|
|
323
313
|
|
|
324
|
-
## 사용 예제
|
|
325
|
-
|
|
326
|
-
### 예제 1: 기본 컴포넌트
|
|
327
|
-
|
|
328
|
-
Icon, Symbols, Input, Button, Stack, Box, FlexBox 사용 예시입니다.
|
|
329
|
-
|
|
330
|
-
```tsx
|
|
331
|
-
import { Input, Icon, Symbols } from "boottent-design/ui";
|
|
332
|
-
import { FlexBox } from "boottent-design/layout";
|
|
333
|
-
import { cn } from "boottent-design/utils";
|
|
334
|
-
import { colors } from "boottent-design/styles";
|
|
335
|
-
|
|
336
|
-
export default function Test() {
|
|
337
|
-
return (
|
|
338
|
-
<FlexBox.Col className="bg-grey-100 min-h-60 w-full items-center gap-4 rounded-lg p-10">
|
|
339
|
-
<Input className={cn("w-full min-w-[500px]")} placeholder="입력해주세요." />
|
|
340
|
-
<FlexBox.Row className="mx-auto w-full items-center justify-center gap-4 p-4">
|
|
341
|
-
<Icon.Calendar fill={colors.lime[500]} />
|
|
342
|
-
<Symbols.Boottent />
|
|
343
|
-
<Symbols.Apple />
|
|
344
|
-
</FlexBox.Row>
|
|
345
|
-
</FlexBox.Col>
|
|
346
|
-
);
|
|
347
|
-
}
|
|
348
|
-
```
|
|
349
|
-
|
|
350
|
-
### 예제 2: 모달, 알림, 다이얼로그, 토스트
|
|
351
|
-
|
|
352
|
-
usePortal 훅을 사용하여 모달, 다이얼로그, 토스트, 알람 창을 띄우려면 PortalProvider를 앱의 루트에 추가해주세요.
|
|
353
|
-
|
|
354
|
-
```tsx
|
|
355
|
-
import { PortalProvider } from "boottent-design/provider";
|
|
356
|
-
|
|
357
|
-
ReactDOM.createRoot(document.getElementById("root")!).render(
|
|
358
|
-
<>
|
|
359
|
-
<App />
|
|
360
|
-
<PortalProvider />
|
|
361
|
-
</>,
|
|
362
|
-
);
|
|
363
|
-
```
|
|
364
|
-
|
|
365
|
-
모달, 알람창, 다이얼로그, 토스트를 사용하는 예시입니다.
|
|
366
|
-
|
|
367
|
-
```tsx
|
|
368
|
-
import { Button } from "boottent-design/ui";
|
|
369
|
-
import { Box, FlexBox } from "boottent-design/layout";
|
|
370
|
-
import { cn } from "boottent-design/utils";
|
|
371
|
-
import { usePortal } from "boottent-design/hooks";
|
|
372
|
-
|
|
373
|
-
export default function Test() {
|
|
374
|
-
const { toast, modal, alert, dialog } = usePortal();
|
|
375
|
-
|
|
376
|
-
return (
|
|
377
|
-
<FlexBox.Col className="bg-grey-100 min-h-60 w-full items-center gap-4 rounded-lg p-10">
|
|
378
|
-
<Box className="flex gap-4">
|
|
379
|
-
<Button
|
|
380
|
-
variant={"outline"}
|
|
381
|
-
theme={"primary"}
|
|
382
|
-
size={"lg"}
|
|
383
|
-
className={cn("w-full")}
|
|
384
|
-
onClick={() =>
|
|
385
|
-
toast({
|
|
386
|
-
description: "토스트 메시지입니다.",
|
|
387
|
-
position: "top-center",
|
|
388
|
-
})
|
|
389
|
-
}
|
|
390
|
-
>
|
|
391
|
-
토스트
|
|
392
|
-
</Button>
|
|
393
|
-
<Button
|
|
394
|
-
theme={"primary"}
|
|
395
|
-
size={"lg"}
|
|
396
|
-
className={cn("w-full")}
|
|
397
|
-
onClick={() =>
|
|
398
|
-
modal({
|
|
399
|
-
title: "모달",
|
|
400
|
-
description: "모달 메시지입니다.",
|
|
401
|
-
onClose: () =>
|
|
402
|
-
toast({
|
|
403
|
-
title: "알림",
|
|
404
|
-
description: "토스트 메시지입니다.",
|
|
405
|
-
action: () => alert("토스트 액션!"),
|
|
406
|
-
}),
|
|
407
|
-
})
|
|
408
|
-
}
|
|
409
|
-
>
|
|
410
|
-
모달
|
|
411
|
-
</Button>
|
|
412
|
-
<Button
|
|
413
|
-
theme={"secondary"}
|
|
414
|
-
variant={"outline"}
|
|
415
|
-
size={"lg"}
|
|
416
|
-
className={cn("w-full")}
|
|
417
|
-
onClick={() =>
|
|
418
|
-
dialog({
|
|
419
|
-
title: "알림",
|
|
420
|
-
content: "다이얼로그 메시지입니다.",
|
|
421
|
-
onConfirm: () => toast("알림창 닫힘!"),
|
|
422
|
-
})
|
|
423
|
-
}
|
|
424
|
-
>
|
|
425
|
-
다이얼로그
|
|
426
|
-
</Button>
|
|
427
|
-
<Button
|
|
428
|
-
theme={"secondary"}
|
|
429
|
-
size={"lg"}
|
|
430
|
-
className={cn("w-full")}
|
|
431
|
-
onClick={() =>
|
|
432
|
-
alert({
|
|
433
|
-
title: "알림",
|
|
434
|
-
description: "알림 메시지입니다.",
|
|
435
|
-
onConfirm: () => toast("알림창 닫힘!"),
|
|
436
|
-
})
|
|
437
|
-
}
|
|
438
|
-
>
|
|
439
|
-
알림
|
|
440
|
-
</Button>
|
|
441
|
-
</Box>
|
|
442
|
-
</FlexBox.Col>
|
|
443
|
-
);
|
|
444
|
-
}
|
|
445
|
-
```
|
|
446
|
-
|
|
447
|
-
### 예제 3: 드롭다운
|
|
448
|
-
|
|
449
|
-
```tsx
|
|
450
|
-
import { useEffect, useState } from "react";
|
|
451
|
-
import { Dropdown, Icon, Button } from "boottent-design/ui";
|
|
452
|
-
import { Box } from "boottent-design/layout";
|
|
453
|
-
import { SelectedDropdownItem, DropdownContainerOptionsType } from "boottent-design/types";
|
|
454
|
-
import { getDropdownButtonText } from "boottent-design/utils";
|
|
455
|
-
|
|
456
|
-
const DropdownExample = ({ defaultValue }: { defaultValue?: SelectedDropdownItem[] }) => {
|
|
457
|
-
const [selectedItems, setSelectedItems] = useState<SelectedDropdownItem[]>(defaultValue || []);
|
|
458
|
-
|
|
459
|
-
const dropdownItems: DropdownContainerOptionsType[] = [
|
|
460
|
-
{
|
|
461
|
-
containerType: "default", // "default" | "checkbox" | "radio" => 컨테이너 묶음의 전체적인 타입입니다
|
|
462
|
-
containerKey: "interactiveDefault1", // 컨테이너 묶음의 키입니다.
|
|
463
|
-
containerTitle: "기본 드롭다운 컨테이너", // 컨테이너 타이틀입니다.
|
|
464
|
-
isShowTitle: true, // 컨테이너 타이틀의 표시 여부입니다.
|
|
465
|
-
isShowSeparator: true, // 컨테이너 묶음들 사이의 구분선 표시 여부입니다.
|
|
466
|
-
items: [
|
|
467
|
-
{
|
|
468
|
-
type: "default", // "default" | "checkbox" | "radio" | "separator" | "title" | 'action' | "sub"
|
|
469
|
-
label: "기본 아이템 1",
|
|
470
|
-
value: "default item 1",
|
|
471
|
-
},
|
|
472
|
-
{
|
|
473
|
-
type: "separator", // 각 드롭다운 아이템 요소의 타입입니다.
|
|
474
|
-
}
|
|
475
|
-
{
|
|
476
|
-
type: "default",
|
|
477
|
-
label: "기본 아이템 2",
|
|
478
|
-
value: "default_item_2",
|
|
479
|
-
},
|
|
480
|
-
],
|
|
481
|
-
},
|
|
482
|
-
];
|
|
483
|
-
|
|
484
|
-
useEffect(() => {
|
|
485
|
-
console.log("Selected Items:", selectedItems);
|
|
486
|
-
}, [selectedItems]);
|
|
487
|
-
|
|
488
|
-
// Dropdown의 size 설정
|
|
489
|
-
|
|
490
|
-
return (
|
|
491
|
-
<Box className="w-full space-y-8 py-10">
|
|
492
|
-
<Dropdown items={dropdownItems} onChange={setSelectedItems}>
|
|
493
|
-
<Button
|
|
494
|
-
size="sm"
|
|
495
|
-
variant="outline"
|
|
496
|
-
theme="secondary"
|
|
497
|
-
icRight={<Icon.ArrowDown size="12" />}
|
|
498
|
-
className="text-medium14 min-w-fit justify-between"
|
|
499
|
-
>
|
|
500
|
-
{getDropdownButtonText(selectedItems, "Open Dropdown")}
|
|
501
|
-
</Button>
|
|
502
|
-
</Dropdown>
|
|
503
|
-
</Box>
|
|
504
|
-
);
|
|
505
|
-
};
|
|
506
|
-
```
|
|
507
|
-
|
|
508
|
-
### 예제 4: 토글 버튼 그룹
|
|
509
|
-
|
|
510
|
-
```tsx
|
|
511
|
-
import { useState } from "react";
|
|
512
|
-
import { FlexBox, Box } from "boottent-design/layout";
|
|
513
|
-
import { ToggleButtonGroup } from "boottent-design/ui";
|
|
514
|
-
|
|
515
|
-
export const ToggleButtonExamples = () => {
|
|
516
|
-
const [value, setValue] = useState<string>("option1");
|
|
517
|
-
|
|
518
|
-
return (
|
|
519
|
-
<FlexBox.Col className="items-center gap-4">
|
|
520
|
-
<h3>Single Toggle with Tooltip</h3>
|
|
521
|
-
<ToggleButtonGroup.Single
|
|
522
|
-
theme="primary"
|
|
523
|
-
size="md"
|
|
524
|
-
shape="square"
|
|
525
|
-
variant="outline"
|
|
526
|
-
value={value}
|
|
527
|
-
onChange={setValue}
|
|
528
|
-
options={[
|
|
529
|
-
{
|
|
530
|
-
value: "option1",
|
|
531
|
-
label: "Option 1",
|
|
532
|
-
tooltip: { label: "Tooltip for Option 1", position: "bottom-left", bubbleTip: false },
|
|
533
|
-
},
|
|
534
|
-
{
|
|
535
|
-
value: "option2",
|
|
536
|
-
label: "Option 2",
|
|
537
|
-
},
|
|
538
|
-
{
|
|
539
|
-
value: "option3",
|
|
540
|
-
label: "Option 3",
|
|
541
|
-
},
|
|
542
|
-
]}
|
|
543
|
-
/>
|
|
544
|
-
<Box className="mt-2 text-sm text-gray-600">선택된 옵션: {value}</Box>
|
|
545
|
-
</FlexBox.Col>
|
|
546
|
-
);
|
|
547
|
-
};
|
|
548
|
-
```
|
|
549
|
-
|
|
550
|
-
### 예제 5: 툴팁
|
|
551
|
-
|
|
552
|
-
```tsx
|
|
553
|
-
import { Tooltip, Button } from "boottent-design/ui";
|
|
554
|
-
import { FlexBox } from "boottent-design/layout";
|
|
555
|
-
|
|
556
|
-
export const TooltipExamples = () => {
|
|
557
|
-
const variants = [
|
|
558
|
-
{
|
|
559
|
-
variant: "primary",
|
|
560
|
-
text: "Primary Tooltip",
|
|
561
|
-
label: "This is a primary tooltip!",
|
|
562
|
-
},
|
|
563
|
-
{
|
|
564
|
-
variant: "secondary",
|
|
565
|
-
text: "Secondary Tooltip",
|
|
566
|
-
label: "This is a secondary tooltip!",
|
|
567
|
-
},
|
|
568
|
-
{
|
|
569
|
-
variant: "white",
|
|
570
|
-
text: "White Tooltip",
|
|
571
|
-
label: "This is a white tooltip!",
|
|
572
|
-
},
|
|
573
|
-
];
|
|
574
|
-
|
|
575
|
-
return (
|
|
576
|
-
<FlexBox.Col className="justify-center gap-10 py-40">
|
|
577
|
-
{variants.map(({ variant, text, label }) => (
|
|
578
|
-
<Tooltip key={variant} variant={variant} label={label} bubbleTip={false}>
|
|
579
|
-
<Button theme={"primary"} variant="outline">
|
|
580
|
-
{text}
|
|
581
|
-
</Button>
|
|
582
|
-
</Tooltip>
|
|
583
|
-
))}
|
|
584
|
-
</FlexBox.Col>
|
|
585
|
-
);
|
|
586
|
-
};
|
|
587
|
-
```
|
|
588
|
-
|
|
589
314
|
## 제작 및 배포
|
|
590
315
|
|
|
591
316
|
- 김동성 (Boottent Frontend-Developer)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const e=require("react/jsx-runtime"),s=require("./index-
|
|
1
|
+
"use strict";const e=require("react/jsx-runtime"),s=require("./index-T715hKYb.cjs"),b=require("./index-B21JbtdU.cjs"),L=require("react"),y=({name:r,control:d,heading:a,label:c,description:x,required:j=!1,text:h,type:f,errorMsg:g=!1,onChange:m,rules:C})=>{const{field:i,fieldState:{error:n}}=s.useController({name:r,control:d,rules:C}),u=c||a||x;return e.jsx(s.FormField,{control:d,name:r,render:()=>e.jsxs(s.FormItem,{children:[u&&e.jsx(s.FormLabel,{required:j,heading:a,label:c,description:x}),e.jsx(s.FormControl,{children:e.jsxs("div",{className:"flex flex-row items-center gap-2",children:[e.jsx(s.Checkbox,{...i,id:r,checked:f==="boolean"?i.value:i.value===h,onCheckedChange:v=>{i.onChange(f==="boolean"?v:v?h:""),m&&m()}}),e.jsx(s.Label,{className:"cursor-pointer",htmlFor:r,children:h})]})}),g&&e.jsx(s.FormMessage,{children:n==null?void 0:n.message})]})})},S=({name:r,control:d,heading:a,label:c,description:x,options:j,required:h=!1,additional:f,type:g="checkbox",onChange:m,rules:C})=>{const{field:i,fieldState:{error:n}}=s.useController({name:r,control:d,rules:C}),u=(l,p)=>{var F;i.onChange(p?[...i.value||[],l]:(F=i.value)==null?void 0:F.filter(w=>w!==l)),m==null||m()},v=()=>j.map(l=>{var p;return e.jsxs(s.FormItem,{className:"flex flex-row items-center",children:[e.jsx(s.FormControl,{children:e.jsx(s.Checkbox,{id:l.value+r,checked:(p=i.value)==null?void 0:p.includes(l.value),onCheckedChange:F=>u(l.value,F)})}),e.jsx(s.Label,{htmlFor:l.value+r,className:"cursor-pointer",children:l.text})]},l.value)}),t=()=>j.map(({value:l,text:p})=>{var w;const F=(w=i.value)==null?void 0:w.includes(l);return e.jsx(s.FormItem,{className:"flex flex-row items-start gap-2",children:e.jsx(s.FormControl,{children:e.jsx(s.Button,{shape:"rounded",size:"xs",theme:F?"primary":"secondary",variant:F?"solid":"outline",onClick:o=>{o.preventDefault(),u(l,!F)},children:p})})},l)});return e.jsx(s.FormField,{control:d,name:r,render:()=>e.jsxs(s.FormItem,{children:[(c||a||x)&&e.jsx(s.FormLabel,{required:h,heading:a,label:c,description:x}),e.jsx(s.FormControl,{children:g==="checkbox"?e.jsx("div",{className:"space-y-4",children:v()}):e.jsx("ul",{className:"flex w-full flex-wrap gap-2 text-regular14",children:t()})}),f,e.jsx(s.FormMessage,{children:n==null?void 0:n.message})]})})},R=({name:r,control:d,label:a,description:c,required:x=!1,children:j,className:h,errorMsg:f=!0})=>e.jsx(s.FormField,{control:d,name:r,render:()=>e.jsxs(s.FormItem,{children:[a&&e.jsxs(s.FormLabel,{required:x,children:[e.jsx(s.Text,{children:a}),c&&e.jsx(s.FormDescription,{children:c})]}),e.jsx(s.FormControl,{children:e.jsx("div",{className:h,children:j})}),f&&e.jsx(s.FormMessage,{})]})}),V=({name:r,control:d,heading:a,label:c,description:x,options:j,required:h=!1,className:f,additional:g,direction:m="vertical",onChange:C,rules:i})=>{const{field:n,fieldState:{error:u}}=s.useController({name:r,control:d,rules:i}),v=c||a||x;return e.jsx(s.FormField,{control:d,name:r,render:()=>e.jsxs(s.FormItem,{className:"relative",children:[v&&e.jsx(s.FormLabel,{required:h,heading:a,label:c,description:x}),e.jsx(s.FormControl,{children:e.jsxs("div",{className:b.cn("flex max-w-screen-sm items-center gap-2",f),children:[e.jsx(s.RadioGroup,{onValueChange:t=>{n.onChange(t),C&&C()},value:n.value,className:b.cn(m==="vertical"&&"flex flex-col gap-4",m==="horizontal"&&"flex flex-wrap gap-8",m==="grid"&&"grid w-full grid-cols-2 gap-x-8 gap-y-4"),children:j.map(t=>e.jsxs(s.FormItem,{className:"flex flex-row items-center",children:[e.jsx(s.FormControl,{children:e.jsx(s.RadioGroupItem,{value:t.value,id:t.text,checked:t.value===n.value})}),e.jsx(s.Label,{className:"cursor-pointer font-normal",htmlFor:t.text,children:t.text})]},t.key))}),g&&e.jsx(e.Fragment,{children:g})]})}),e.jsx(s.FormMessage,{children:u==null?void 0:u.message})]})})},z=({required:r,heading:d,name:a,label:c,description:x,placeholder:j,control:h,tagDirection:f="flex-col",tagSize:g="md",rules:m})=>{const{setValue:C,getValues:i}=s.useFormContext(),{field:n,fieldState:{error:u}}=s.useController({name:a,control:h,defaultValue:[],rules:m}),[v,t]=L.useState(""),l=()=>{if(v.trim()!==""){const o=i(a)||[];C(a,[...o,v.trim()]),t("")}},p=o=>{o.key==="Enter"&&!o.nativeEvent.isComposing&&(o.preventDefault(),l())},F=o=>{const N=i(a)||[];N.splice(o,1),C(a,N)},w=c||d||x;return e.jsx(s.FormField,{control:h,name:a,render:()=>e.jsxs(s.FormItem,{children:[w&&e.jsx(s.FormLabel,{required:r,heading:d,label:c,description:x}),e.jsx(s.FormControl,{children:e.jsxs("div",{className:"flex flex-col gap-2",children:[n.value&&n.value.length>0&&e.jsx("ul",{className:b.cn("flex flex-col flex-wrap gap-1",f),children:n.value.map((o,N)=>e.jsx("li",{children:e.jsx(s.Tag,{size:g,variant:"solid-secondary-100",onClick:()=>F(N),icRight:e.jsx(s.Icon.Cancel,{size:"10",className:"text-grey-600"}),children:e.jsx("span",{children:o})})},N))}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Input,{value:v,onChange:o=>t(o.target.value),onKeyDown:p,className:"max-w-screen-sm",placeholder:j,error:!!u}),e.jsx(s.Button,{size:"md",variant:"outline",disabled:!v.trim(),theme:"secondary",onClick:l,className:"whitespace-nowrap",children:"추가"})]})]})}),e.jsx(s.FormMessage,{children:u==null?void 0:u.message})]})})},D=({name:r,control:d,heading:a,label:c,description:x,placeholder:j,required:h=!1,isTextArea:f=!1,unitLabel:g,unitLabelBefore:m,inputType:C="text",className:i,onChange:n,onBlur:u,icon:v,disabled:t,errorMsg:l=!0,rules:p})=>{const{field:F,formState:{errors:w}}=s.useController({name:r,control:d,rules:p}),o=k=>{const I=C==="number"?Number(k.target.value):k.target.value;F.onChange(I),n==null||n(I)},N=c||a||x;return e.jsx(s.FormField,{control:d,name:r,render:()=>e.jsxs(s.FormItem,{children:[N&&e.jsx(s.FormLabel,{required:h,heading:a,label:c,description:x}),e.jsx(s.FormControl,{children:e.jsxs("div",{className:b.cn("flex w-full max-w-screen-sm items-center gap-2",i),children:[m&&e.jsx("div",{className:"whitespace-nowrap",children:m}),f?e.jsx(s.Textarea,{...F,placeholder:j,className:"h-32",disabled:t,error:!!w[r],onChange:o}):e.jsx(s.Input,{...F,type:C,placeholder:j,disabled:t,error:!!w[r],onChange:o,onBlur:u,icon:v,iconPosition:"right"}),g&&e.jsx("div",{className:"whitespace-nowrap",children:g})]})}),l&&e.jsx(s.FormMessage,{})]})})},M=({name:r,control:d,heading:a,label:c,description:x,placeholder:j="",buttonLabel:h="보기",required:f,onClick:g,disabled:m=!1,children:C,urlTitle:i,rules:n})=>{const{trigger:u,setValue:v}=s.useFormContext(),{field:t,fieldState:{error:l}}=s.useController({name:r,control:d,rules:{required:f?"URL을 입력해주세요.":!1,pattern:{value:/^(https?:\/\/)?([\w-]+\.)+[\w-]{2,4}(\/.*)?$/,message:"올바른 URL을 입력해주세요."},...n}}),p=o=>{t.onChange(o),v(r,o.target.value)},F=o=>{if(o.preventDefault(),g)g(o);else if(t.value&&!l){const N=t.value.startsWith("http")?t.value:`https://${t.value}`;window.open(N,"_blank")}},w=c||a||x;return e.jsx(s.FormField,{control:d,name:r,render:()=>e.jsxs(s.FormItem,{children:[w&&e.jsx(s.FormLabel,{required:f,heading:a,label:c,description:x}),C,e.jsxs("div",{className:"flex items-center gap-2",children:[i&&e.jsx(s.Callout,{size:"sm",className:"flex w-32 justify-center truncate shadow-none",children:i}),e.jsx(s.FormControl,{children:e.jsx(s.Input,{...t,onBlur:()=>u(r),onChange:p,placeholder:j,className:"w-auto grow",error:!!l})}),e.jsx(s.Button,{variant:"outline",theme:"secondary",size:"md",disabled:m||!!l||!t.value,onClick:F,children:h})]}),e.jsx(s.FormMessage,{children:l==null?void 0:l.message})]})})};exports.CheckboxBooleanFormField=y;exports.CheckboxGroupFormField=S;exports.DefaultFormField=R;exports.RadioFormField=V;exports.StringArrayFormField=z;exports.StringInputField=D;exports.UrlFormField=M;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as e, jsxs as v, Fragment as E } from "react/jsx-runtime";
|
|
2
|
-
import { u as V, F as S, a as k, c as I, d as y, C as G, L as z, e as R, B as D, T as K, f as P, R as T, g as $, h as A, i as M, I as W, j, k as _, l as q } from "./index-
|
|
2
|
+
import { u as V, F as S, a as k, c as I, d as y, C as G, L as z, e as R, B as D, T as K, f as P, R as T, g as $, h as A, i as M, I as W, j, k as _, l as q } from "./index-KZYAVDUp.js";
|
|
3
3
|
import { c as L } from "./index-CQACG110.js";
|
|
4
4
|
import { useState as H } from "react";
|
|
5
5
|
const Y = ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";require("react/jsx-runtime");require("./index-BYinJUBt.cjs");require("react");const e=require("./boottent-design.styles.cjs.js");require("./index-D57xhjM5.cjs");require("./toggleButtonGroup-primitive-B5twgprT.cjs");require("react-dom");e.colors.main[600],e.colors.main[100],e.colors.red[400],e.colors.yellow[300],e.colors.red[400],e.colors.yellow[400],e.colors.white,e.colors.grey[800];const{grey:t,main:a,green:l,red:o,orange:r,lime:u,brown:v,blue:c,pink:x,teal:d}=e.colors;t[500],t[50],a[600],a[50],l[500],l[50],o[400],o[50],r[500],r[50],c[500],c[100],x[500],x[50],d[500],d[50],v[500],v[50],u[500],u[50];
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),b=require("./index-BYinJUBt.cjs"),$=require("./index-B21JbtdU.cjs"),x=require("./boottent-design.styles.cjs.js"),H=require("./index-T715hKYb.cjs");require("react");require("./toggleButtonGroup-primitive-DLsmj_zA.cjs");require("react-dom");const y=require("./index-Cw9G_f7P.cjs"),oe=({src:t,alt:e,object:n="cover",lazy:r=!0,size:a="auto",className:o,...i})=>{const s={contain:"object-contain h-full",cover:"object-cover h-full",fill:"object-fill h-full","scale-down":"object-scale-down",none:"object-none"},c={full:"w-full",fit:"w-fit",auto:"w-auto"};let u="",f={};return typeof a=="string"?u=c[a]:typeof a=="number"&&(f={width:`${a}px`}),l.jsx("img",{src:t,alt:e?`${e} 이미지`:"이미지",loading:r?"lazy":"eager",className:$.cn(s[n],u,o),style:f,...i})},N={mainBanner:{value:"mainBanner",text:"메인배너",color:"",background:""},premiumCard:{value:"premiumCard",text:"상위노출카드",color:x.colors.main[600],background:x.colors.main[100]},event:{value:"event",text:"이벤트적용",color:x.colors.red[400],background:x.colors.yellow[300]},dDay:{value:"dDay",text:"디데이적용",color:x.colors.red[400],background:x.colors.yellow[400]},titleTag:{value:"titleTag",text:"타이틀태그",color:x.colors.white,background:x.colors.grey[800]}},q={background:"#e9e9eca1",title:"#222",description:"#222",button:"#975dff",buttonText:"#ffffff",shadow:"@titleline-background-color"},ie=6048e5,ye=864e5,se=6e4,ue=36e5,R=Symbol.for("constructDateFrom");function v(t,e){return typeof t=="function"?t(e):t&&typeof t=="object"&&R in t?t[R](e):t instanceof Date?new t.constructor(e):new Date(e)}function g(t,e){return v(e||t,t)}let ve={};function j(){return ve}function W(t,e){var s,c,u,f;const n=j(),r=(e==null?void 0:e.weekStartsOn)??((c=(s=e==null?void 0:e.locale)==null?void 0:s.options)==null?void 0:c.weekStartsOn)??n.weekStartsOn??((f=(u=n.locale)==null?void 0:u.options)==null?void 0:f.weekStartsOn)??0,a=g(t,e==null?void 0:e.in),o=a.getDay(),i=(o<r?7:0)+o-r;return a.setDate(a.getDate()-i),a.setHours(0,0,0,0),a}function C(t,e){return W(t,{...e,weekStartsOn:1})}function ce(t,e){const n=g(t,e==null?void 0:e.in),r=n.getFullYear(),a=v(n,0);a.setFullYear(r+1,0,4),a.setHours(0,0,0,0);const o=C(a),i=v(n,0);i.setFullYear(r,0,4),i.setHours(0,0,0,0);const s=C(i);return n.getTime()>=o.getTime()?r+1:n.getTime()>=s.getTime()?r:r-1}function _(t){const e=g(t),n=new Date(Date.UTC(e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds(),e.getMilliseconds()));return n.setUTCFullYear(e.getFullYear()),+t-+n}function le(t,...e){const n=v.bind(null,e.find(r=>typeof r=="object"));return e.map(n)}function L(t,e){const n=g(t,e==null?void 0:e.in);return n.setHours(0,0,0,0),n}function de(t,e,n){const[r,a]=le(n==null?void 0:n.in,t,e),o=L(r),i=L(a),s=+o-_(o),c=+i-_(i);return Math.round((s-c)/ye)}function ke(t,e){const n=ce(t,e),r=v(t,0);return r.setFullYear(n,0,4),r.setHours(0,0,0,0),C(r)}function Me(t){return t instanceof Date||typeof t=="object"&&Object.prototype.toString.call(t)==="[object Date]"}function De(t){return!(!Me(t)&&typeof t!="number"||isNaN(+g(t)))}function pe(t,e,n){const[r,a]=le(n==null?void 0:n.in,t,e),o=Q(r,a),i=Math.abs(de(r,a));r.setDate(r.getDate()-o*i);const s=+(Q(r,a)===-o),c=o*(i-s);return c===0?0:c}function Q(t,e){const n=t.getFullYear()-e.getFullYear()||t.getMonth()-e.getMonth()||t.getDate()-e.getDate()||t.getHours()-e.getHours()||t.getMinutes()-e.getMinutes()||t.getSeconds()-e.getSeconds()||t.getMilliseconds()-e.getMilliseconds();return n<0?-1:n>0?1:n}function Pe(t,e){const n=g(t,e==null?void 0:e.in);return n.setFullYear(n.getFullYear(),0,1),n.setHours(0,0,0,0),n}const Oe={lessThanXSeconds:{one:"less than a second",other:"less than {{count}} seconds"},xSeconds:{one:"1 second",other:"{{count}} seconds"},halfAMinute:"half a minute",lessThanXMinutes:{one:"less than a minute",other:"less than {{count}} minutes"},xMinutes:{one:"1 minute",other:"{{count}} minutes"},aboutXHours:{one:"about 1 hour",other:"about {{count}} hours"},xHours:{one:"1 hour",other:"{{count}} hours"},xDays:{one:"1 day",other:"{{count}} days"},aboutXWeeks:{one:"about 1 week",other:"about {{count}} weeks"},xWeeks:{one:"1 week",other:"{{count}} weeks"},aboutXMonths:{one:"about 1 month",other:"about {{count}} months"},xMonths:{one:"1 month",other:"{{count}} months"},aboutXYears:{one:"about 1 year",other:"about {{count}} years"},xYears:{one:"1 year",other:"{{count}} years"},overXYears:{one:"over 1 year",other:"over {{count}} years"},almostXYears:{one:"almost 1 year",other:"almost {{count}} years"}},Te=(t,e,n)=>{let r;const a=Oe[t];return typeof a=="string"?r=a:e===1?r=a.one:r=a.other.replace("{{count}}",e.toString()),n!=null&&n.addSuffix?n.comparison&&n.comparison>0?"in "+r:r+" ago":r};function E(t){return(e={})=>{const n=e.width?String(e.width):t.defaultWidth;return t.formats[n]||t.formats[t.defaultWidth]}}const Se={full:"EEEE, MMMM do, y",long:"MMMM do, y",medium:"MMM d, y",short:"MM/dd/yyyy"},Ne={full:"h:mm:ss a zzzz",long:"h:mm:ss a z",medium:"h:mm:ss a",short:"h:mm a"},We={full:"{{date}} 'at' {{time}}",long:"{{date}} 'at' {{time}}",medium:"{{date}}, {{time}}",short:"{{date}}, {{time}}"},Ye={date:E({formats:Se,defaultWidth:"full"}),time:E({formats:Ne,defaultWidth:"full"}),dateTime:E({formats:We,defaultWidth:"full"})},Ce={lastWeek:"'last' eeee 'at' p",yesterday:"'yesterday at' p",today:"'today at' p",tomorrow:"'tomorrow at' p",nextWeek:"eeee 'at' p",other:"P"},je=(t,e,n,r)=>Ce[t];function O(t){return(e,n)=>{const r=n!=null&&n.context?String(n.context):"standalone";let a;if(r==="formatting"&&t.formattingValues){const i=t.defaultFormattingWidth||t.defaultWidth,s=n!=null&&n.width?String(n.width):i;a=t.formattingValues[s]||t.formattingValues[i]}else{const i=t.defaultWidth,s=n!=null&&n.width?String(n.width):t.defaultWidth;a=t.values[s]||t.values[i]}const o=t.argumentCallback?t.argumentCallback(e):e;return a[o]}}const Fe={narrow:["B","A"],abbreviated:["BC","AD"],wide:["Before Christ","Anno Domini"]},qe={narrow:["1","2","3","4"],abbreviated:["Q1","Q2","Q3","Q4"],wide:["1st quarter","2nd quarter","3rd quarter","4th quarter"]},Ee={narrow:["J","F","M","A","M","J","J","A","S","O","N","D"],abbreviated:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],wide:["January","February","March","April","May","June","July","August","September","October","November","December"]},Be={narrow:["S","M","T","W","T","F","S"],short:["Su","Mo","Tu","We","Th","Fr","Sa"],abbreviated:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],wide:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},Ie={narrow:{am:"a",pm:"p",midnight:"mi",noon:"n",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"},abbreviated:{am:"AM",pm:"PM",midnight:"midnight",noon:"noon",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"},wide:{am:"a.m.",pm:"p.m.",midnight:"midnight",noon:"noon",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"}},$e={narrow:{am:"a",pm:"p",midnight:"mi",noon:"n",morning:"in the morning",afternoon:"in the afternoon",evening:"in the evening",night:"at night"},abbreviated:{am:"AM",pm:"PM",midnight:"midnight",noon:"noon",morning:"in the morning",afternoon:"in the afternoon",evening:"in the evening",night:"at night"},wide:{am:"a.m.",pm:"p.m.",midnight:"midnight",noon:"noon",morning:"in the morning",afternoon:"in the afternoon",evening:"in the evening",night:"at night"}},He=(t,e)=>{const n=Number(t),r=n%100;if(r>20||r<10)switch(r%10){case 1:return n+"st";case 2:return n+"nd";case 3:return n+"rd"}return n+"th"},Re={ordinalNumber:He,era:O({values:Fe,defaultWidth:"wide"}),quarter:O({values:qe,defaultWidth:"wide",argumentCallback:t=>t-1}),month:O({values:Ee,defaultWidth:"wide"}),day:O({values:Be,defaultWidth:"wide"}),dayPeriod:O({values:Ie,defaultWidth:"wide",formattingValues:$e,defaultFormattingWidth:"wide"})};function T(t){return(e,n={})=>{const r=n.width,a=r&&t.matchPatterns[r]||t.matchPatterns[t.defaultMatchWidth],o=e.match(a);if(!o)return null;const i=o[0],s=r&&t.parsePatterns[r]||t.parsePatterns[t.defaultParseWidth],c=Array.isArray(s)?Le(s,w=>w.test(i)):_e(s,w=>w.test(i));let u;u=t.valueCallback?t.valueCallback(c):c,u=n.valueCallback?n.valueCallback(u):u;const f=e.slice(i.length);return{value:u,rest:f}}}function _e(t,e){for(const n in t)if(Object.prototype.hasOwnProperty.call(t,n)&&e(t[n]))return n}function Le(t,e){for(let n=0;n<t.length;n++)if(e(t[n]))return n}function Qe(t){return(e,n={})=>{const r=e.match(t.matchPattern);if(!r)return null;const a=r[0],o=e.match(t.parsePattern);if(!o)return null;let i=t.valueCallback?t.valueCallback(o[0]):o[0];i=n.valueCallback?n.valueCallback(i):i;const s=e.slice(a.length);return{value:i,rest:s}}}const Xe=/^(\d+)(th|st|nd|rd)?/i,Ae=/\d+/i,Ue={narrow:/^(b|a)/i,abbreviated:/^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i,wide:/^(before christ|before common era|anno domini|common era)/i},Ge={any:[/^b/i,/^(a|c)/i]},Ve={narrow:/^[1234]/i,abbreviated:/^q[1234]/i,wide:/^[1234](th|st|nd|rd)? quarter/i},ze={any:[/1/i,/2/i,/3/i,/4/i]},Je={narrow:/^[jfmasond]/i,abbreviated:/^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i,wide:/^(january|february|march|april|may|june|july|august|september|october|november|december)/i},Ze={narrow:[/^j/i,/^f/i,/^m/i,/^a/i,/^m/i,/^j/i,/^j/i,/^a/i,/^s/i,/^o/i,/^n/i,/^d/i],any:[/^ja/i,/^f/i,/^mar/i,/^ap/i,/^may/i,/^jun/i,/^jul/i,/^au/i,/^s/i,/^o/i,/^n/i,/^d/i]},Ke={narrow:/^[smtwf]/i,short:/^(su|mo|tu|we|th|fr|sa)/i,abbreviated:/^(sun|mon|tue|wed|thu|fri|sat)/i,wide:/^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i},et={narrow:[/^s/i,/^m/i,/^t/i,/^w/i,/^t/i,/^f/i,/^s/i],any:[/^su/i,/^m/i,/^tu/i,/^w/i,/^th/i,/^f/i,/^sa/i]},tt={narrow:/^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i,any:/^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i},nt={any:{am:/^a/i,pm:/^p/i,midnight:/^mi/i,noon:/^no/i,morning:/morning/i,afternoon:/afternoon/i,evening:/evening/i,night:/night/i}},rt={ordinalNumber:Qe({matchPattern:Xe,parsePattern:Ae,valueCallback:t=>parseInt(t,10)}),era:T({matchPatterns:Ue,defaultMatchWidth:"wide",parsePatterns:Ge,defaultParseWidth:"any"}),quarter:T({matchPatterns:Ve,defaultMatchWidth:"wide",parsePatterns:ze,defaultParseWidth:"any",valueCallback:t=>t+1}),month:T({matchPatterns:Je,defaultMatchWidth:"wide",parsePatterns:Ze,defaultParseWidth:"any"}),day:T({matchPatterns:Ke,defaultMatchWidth:"wide",parsePatterns:et,defaultParseWidth:"any"}),dayPeriod:T({matchPatterns:tt,defaultMatchWidth:"any",parsePatterns:nt,defaultParseWidth:"any"})},at={code:"en-US",formatDistance:Te,formatLong:Ye,formatRelative:je,localize:Re,match:rt,options:{weekStartsOn:0,firstWeekContainsDate:1}};function ot(t,e){const n=g(t,e==null?void 0:e.in);return de(n,Pe(n))+1}function it(t,e){const n=g(t,e==null?void 0:e.in),r=+C(n)-+ke(n);return Math.round(r/ie)+1}function fe(t,e){var f,w,k,P;const n=g(t,e==null?void 0:e.in),r=n.getFullYear(),a=j(),o=(e==null?void 0:e.firstWeekContainsDate)??((w=(f=e==null?void 0:e.locale)==null?void 0:f.options)==null?void 0:w.firstWeekContainsDate)??a.firstWeekContainsDate??((P=(k=a.locale)==null?void 0:k.options)==null?void 0:P.firstWeekContainsDate)??1,i=v((e==null?void 0:e.in)||t,0);i.setFullYear(r+1,0,o),i.setHours(0,0,0,0);const s=W(i,e),c=v((e==null?void 0:e.in)||t,0);c.setFullYear(r,0,o),c.setHours(0,0,0,0);const u=W(c,e);return+n>=+s?r+1:+n>=+u?r:r-1}function st(t,e){var s,c,u,f;const n=j(),r=(e==null?void 0:e.firstWeekContainsDate)??((c=(s=e==null?void 0:e.locale)==null?void 0:s.options)==null?void 0:c.firstWeekContainsDate)??n.firstWeekContainsDate??((f=(u=n.locale)==null?void 0:u.options)==null?void 0:f.firstWeekContainsDate)??1,a=fe(t,e),o=v((e==null?void 0:e.in)||t,0);return o.setFullYear(a,0,r),o.setHours(0,0,0,0),W(o,e)}function ut(t,e){const n=g(t,e==null?void 0:e.in),r=+W(n,e)-+st(n,e);return Math.round(r/ie)+1}function d(t,e){const n=t<0?"-":"",r=Math.abs(t).toString().padStart(e,"0");return n+r}const M={y(t,e){const n=t.getFullYear(),r=n>0?n:1-n;return d(e==="yy"?r%100:r,e.length)},M(t,e){const n=t.getMonth();return e==="M"?String(n+1):d(n+1,2)},d(t,e){return d(t.getDate(),e.length)},a(t,e){const n=t.getHours()/12>=1?"pm":"am";switch(e){case"a":case"aa":return n.toUpperCase();case"aaa":return n;case"aaaaa":return n[0];case"aaaa":default:return n==="am"?"a.m.":"p.m."}},h(t,e){return d(t.getHours()%12||12,e.length)},H(t,e){return d(t.getHours(),e.length)},m(t,e){return d(t.getMinutes(),e.length)},s(t,e){return d(t.getSeconds(),e.length)},S(t,e){const n=e.length,r=t.getMilliseconds(),a=Math.trunc(r*Math.pow(10,n-3));return d(a,e.length)}},p={am:"am",pm:"pm",midnight:"midnight",noon:"noon",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"},X={G:function(t,e,n){const r=t.getFullYear()>0?1:0;switch(e){case"G":case"GG":case"GGG":return n.era(r,{width:"abbreviated"});case"GGGGG":return n.era(r,{width:"narrow"});case"GGGG":default:return n.era(r,{width:"wide"})}},y:function(t,e,n){if(e==="yo"){const r=t.getFullYear(),a=r>0?r:1-r;return n.ordinalNumber(a,{unit:"year"})}return M.y(t,e)},Y:function(t,e,n,r){const a=fe(t,r),o=a>0?a:1-a;if(e==="YY"){const i=o%100;return d(i,2)}return e==="Yo"?n.ordinalNumber(o,{unit:"year"}):d(o,e.length)},R:function(t,e){const n=ce(t);return d(n,e.length)},u:function(t,e){const n=t.getFullYear();return d(n,e.length)},Q:function(t,e,n){const r=Math.ceil((t.getMonth()+1)/3);switch(e){case"Q":return String(r);case"QQ":return d(r,2);case"Qo":return n.ordinalNumber(r,{unit:"quarter"});case"QQQ":return n.quarter(r,{width:"abbreviated",context:"formatting"});case"QQQQQ":return n.quarter(r,{width:"narrow",context:"formatting"});case"QQQQ":default:return n.quarter(r,{width:"wide",context:"formatting"})}},q:function(t,e,n){const r=Math.ceil((t.getMonth()+1)/3);switch(e){case"q":return String(r);case"qq":return d(r,2);case"qo":return n.ordinalNumber(r,{unit:"quarter"});case"qqq":return n.quarter(r,{width:"abbreviated",context:"standalone"});case"qqqqq":return n.quarter(r,{width:"narrow",context:"standalone"});case"qqqq":default:return n.quarter(r,{width:"wide",context:"standalone"})}},M:function(t,e,n){const r=t.getMonth();switch(e){case"M":case"MM":return M.M(t,e);case"Mo":return n.ordinalNumber(r+1,{unit:"month"});case"MMM":return n.month(r,{width:"abbreviated",context:"formatting"});case"MMMMM":return n.month(r,{width:"narrow",context:"formatting"});case"MMMM":default:return n.month(r,{width:"wide",context:"formatting"})}},L:function(t,e,n){const r=t.getMonth();switch(e){case"L":return String(r+1);case"LL":return d(r+1,2);case"Lo":return n.ordinalNumber(r+1,{unit:"month"});case"LLL":return n.month(r,{width:"abbreviated",context:"standalone"});case"LLLLL":return n.month(r,{width:"narrow",context:"standalone"});case"LLLL":default:return n.month(r,{width:"wide",context:"standalone"})}},w:function(t,e,n,r){const a=ut(t,r);return e==="wo"?n.ordinalNumber(a,{unit:"week"}):d(a,e.length)},I:function(t,e,n){const r=it(t);return e==="Io"?n.ordinalNumber(r,{unit:"week"}):d(r,e.length)},d:function(t,e,n){return e==="do"?n.ordinalNumber(t.getDate(),{unit:"date"}):M.d(t,e)},D:function(t,e,n){const r=ot(t);return e==="Do"?n.ordinalNumber(r,{unit:"dayOfYear"}):d(r,e.length)},E:function(t,e,n){const r=t.getDay();switch(e){case"E":case"EE":case"EEE":return n.day(r,{width:"abbreviated",context:"formatting"});case"EEEEE":return n.day(r,{width:"narrow",context:"formatting"});case"EEEEEE":return n.day(r,{width:"short",context:"formatting"});case"EEEE":default:return n.day(r,{width:"wide",context:"formatting"})}},e:function(t,e,n,r){const a=t.getDay(),o=(a-r.weekStartsOn+8)%7||7;switch(e){case"e":return String(o);case"ee":return d(o,2);case"eo":return n.ordinalNumber(o,{unit:"day"});case"eee":return n.day(a,{width:"abbreviated",context:"formatting"});case"eeeee":return n.day(a,{width:"narrow",context:"formatting"});case"eeeeee":return n.day(a,{width:"short",context:"formatting"});case"eeee":default:return n.day(a,{width:"wide",context:"formatting"})}},c:function(t,e,n,r){const a=t.getDay(),o=(a-r.weekStartsOn+8)%7||7;switch(e){case"c":return String(o);case"cc":return d(o,e.length);case"co":return n.ordinalNumber(o,{unit:"day"});case"ccc":return n.day(a,{width:"abbreviated",context:"standalone"});case"ccccc":return n.day(a,{width:"narrow",context:"standalone"});case"cccccc":return n.day(a,{width:"short",context:"standalone"});case"cccc":default:return n.day(a,{width:"wide",context:"standalone"})}},i:function(t,e,n){const r=t.getDay(),a=r===0?7:r;switch(e){case"i":return String(a);case"ii":return d(a,e.length);case"io":return n.ordinalNumber(a,{unit:"day"});case"iii":return n.day(r,{width:"abbreviated",context:"formatting"});case"iiiii":return n.day(r,{width:"narrow",context:"formatting"});case"iiiiii":return n.day(r,{width:"short",context:"formatting"});case"iiii":default:return n.day(r,{width:"wide",context:"formatting"})}},a:function(t,e,n){const a=t.getHours()/12>=1?"pm":"am";switch(e){case"a":case"aa":return n.dayPeriod(a,{width:"abbreviated",context:"formatting"});case"aaa":return n.dayPeriod(a,{width:"abbreviated",context:"formatting"}).toLowerCase();case"aaaaa":return n.dayPeriod(a,{width:"narrow",context:"formatting"});case"aaaa":default:return n.dayPeriod(a,{width:"wide",context:"formatting"})}},b:function(t,e,n){const r=t.getHours();let a;switch(r===12?a=p.noon:r===0?a=p.midnight:a=r/12>=1?"pm":"am",e){case"b":case"bb":return n.dayPeriod(a,{width:"abbreviated",context:"formatting"});case"bbb":return n.dayPeriod(a,{width:"abbreviated",context:"formatting"}).toLowerCase();case"bbbbb":return n.dayPeriod(a,{width:"narrow",context:"formatting"});case"bbbb":default:return n.dayPeriod(a,{width:"wide",context:"formatting"})}},B:function(t,e,n){const r=t.getHours();let a;switch(r>=17?a=p.evening:r>=12?a=p.afternoon:r>=4?a=p.morning:a=p.night,e){case"B":case"BB":case"BBB":return n.dayPeriod(a,{width:"abbreviated",context:"formatting"});case"BBBBB":return n.dayPeriod(a,{width:"narrow",context:"formatting"});case"BBBB":default:return n.dayPeriod(a,{width:"wide",context:"formatting"})}},h:function(t,e,n){if(e==="ho"){let r=t.getHours()%12;return r===0&&(r=12),n.ordinalNumber(r,{unit:"hour"})}return M.h(t,e)},H:function(t,e,n){return e==="Ho"?n.ordinalNumber(t.getHours(),{unit:"hour"}):M.H(t,e)},K:function(t,e,n){const r=t.getHours()%12;return e==="Ko"?n.ordinalNumber(r,{unit:"hour"}):d(r,e.length)},k:function(t,e,n){let r=t.getHours();return r===0&&(r=24),e==="ko"?n.ordinalNumber(r,{unit:"hour"}):d(r,e.length)},m:function(t,e,n){return e==="mo"?n.ordinalNumber(t.getMinutes(),{unit:"minute"}):M.m(t,e)},s:function(t,e,n){return e==="so"?n.ordinalNumber(t.getSeconds(),{unit:"second"}):M.s(t,e)},S:function(t,e){return M.S(t,e)},X:function(t,e,n){const r=t.getTimezoneOffset();if(r===0)return"Z";switch(e){case"X":return U(r);case"XXXX":case"XX":return D(r);case"XXXXX":case"XXX":default:return D(r,":")}},x:function(t,e,n){const r=t.getTimezoneOffset();switch(e){case"x":return U(r);case"xxxx":case"xx":return D(r);case"xxxxx":case"xxx":default:return D(r,":")}},O:function(t,e,n){const r=t.getTimezoneOffset();switch(e){case"O":case"OO":case"OOO":return"GMT"+A(r,":");case"OOOO":default:return"GMT"+D(r,":")}},z:function(t,e,n){const r=t.getTimezoneOffset();switch(e){case"z":case"zz":case"zzz":return"GMT"+A(r,":");case"zzzz":default:return"GMT"+D(r,":")}},t:function(t,e,n){const r=Math.trunc(+t/1e3);return d(r,e.length)},T:function(t,e,n){return d(+t,e.length)}};function A(t,e=""){const n=t>0?"-":"+",r=Math.abs(t),a=Math.trunc(r/60),o=r%60;return o===0?n+String(a):n+String(a)+e+d(o,2)}function U(t,e){return t%60===0?(t>0?"-":"+")+d(Math.abs(t)/60,2):D(t,e)}function D(t,e=""){const n=t>0?"-":"+",r=Math.abs(t),a=d(Math.trunc(r/60),2),o=d(r%60,2);return n+a+e+o}const G=(t,e)=>{switch(t){case"P":return e.date({width:"short"});case"PP":return e.date({width:"medium"});case"PPP":return e.date({width:"long"});case"PPPP":default:return e.date({width:"full"})}},me=(t,e)=>{switch(t){case"p":return e.time({width:"short"});case"pp":return e.time({width:"medium"});case"ppp":return e.time({width:"long"});case"pppp":default:return e.time({width:"full"})}},ct=(t,e)=>{const n=t.match(/(P+)(p+)?/)||[],r=n[1],a=n[2];if(!a)return G(t,e);let o;switch(r){case"P":o=e.dateTime({width:"short"});break;case"PP":o=e.dateTime({width:"medium"});break;case"PPP":o=e.dateTime({width:"long"});break;case"PPPP":default:o=e.dateTime({width:"full"});break}return o.replace("{{date}}",G(r,e)).replace("{{time}}",me(a,e))},lt={p:me,P:ct},dt=/^D+$/,ft=/^Y+$/,mt=["D","DD","YY","YYYY"];function ht(t){return dt.test(t)}function gt(t){return ft.test(t)}function wt(t,e,n){const r=bt(t,e,n);if(console.warn(r),mt.includes(t))throw new RangeError(r)}function bt(t,e,n){const r=t[0]==="Y"?"years":"days of the month";return`Use \`${t.toLowerCase()}\` instead of \`${t}\` (in \`${e}\`) for formatting ${r} to the input \`${n}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`}const xt=/[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g,yt=/P+p+|P+|p+|''|'(''|[^'])+('|$)|./g,vt=/^'([^]*?)'?$/,kt=/''/g,Mt=/[a-zA-Z]/;function B(t,e,n){var f,w,k,P;const r=j(),a=r.locale??at,o=r.firstWeekContainsDate??((w=(f=r.locale)==null?void 0:f.options)==null?void 0:w.firstWeekContainsDate)??1,i=r.weekStartsOn??((P=(k=r.locale)==null?void 0:k.options)==null?void 0:P.weekStartsOn)??0,s=g(t,n==null?void 0:n.in);if(!De(s))throw new RangeError("Invalid time value");let c=e.match(yt).map(h=>{const m=h[0];if(m==="p"||m==="P"){const F=lt[m];return F(h,a.formatLong)}return h}).join("").match(xt).map(h=>{if(h==="''")return{isToken:!1,value:"'"};const m=h[0];if(m==="'")return{isToken:!1,value:Dt(h)};if(X[m])return{isToken:!0,value:h};if(m.match(Mt))throw new RangeError("Format string contains an unescaped latin alphabet character `"+m+"`");return{isToken:!1,value:h}});a.localize.preprocessor&&(c=a.localize.preprocessor(s,c));const u={firstWeekContainsDate:o,weekStartsOn:i,locale:a};return c.map(h=>{if(!h.isToken)return h.value;const m=h.value;(gt(m)||ht(m))&&wt(m,e,String(t));const F=X[m[0]];return F(s,m,a.localize,u)}).join("")}function Dt(t){const e=t.match(vt);return e?e[1].replace(kt,"'"):t}function he(t,e){const n=()=>v(e==null?void 0:e.in,NaN),a=Tt(t);let o;if(a.date){const u=St(a.date,2);o=Nt(u.restDateString,u.year)}if(!o||isNaN(+o))return n();const i=+o;let s=0,c;if(a.time&&(s=Wt(a.time),isNaN(s)))return n();if(a.timezone){if(c=Yt(a.timezone),isNaN(c))return n()}else{const u=new Date(i+s),f=g(0,e==null?void 0:e.in);return f.setFullYear(u.getUTCFullYear(),u.getUTCMonth(),u.getUTCDate()),f.setHours(u.getUTCHours(),u.getUTCMinutes(),u.getUTCSeconds(),u.getUTCMilliseconds()),f}return g(i+s+c,e==null?void 0:e.in)}const Y={dateTimeDelimiter:/[T ]/,timeZoneDelimiter:/[Z ]/i,timezone:/([Z+-].*)$/},pt=/^-?(?:(\d{3})|(\d{2})(?:-?(\d{2}))?|W(\d{2})(?:-?(\d{1}))?|)$/,Pt=/^(\d{2}(?:[.,]\d*)?)(?::?(\d{2}(?:[.,]\d*)?))?(?::?(\d{2}(?:[.,]\d*)?))?$/,Ot=/^([+-])(\d{2})(?::?(\d{2}))?$/;function Tt(t){const e={},n=t.split(Y.dateTimeDelimiter);let r;if(n.length>2)return e;if(/:/.test(n[0])?r=n[0]:(e.date=n[0],r=n[1],Y.timeZoneDelimiter.test(e.date)&&(e.date=t.split(Y.timeZoneDelimiter)[0],r=t.substr(e.date.length,t.length))),r){const a=Y.timezone.exec(r);a?(e.time=r.replace(a[1],""),e.timezone=a[1]):e.time=r}return e}function St(t,e){const n=new RegExp("^(?:(\\d{4}|[+-]\\d{"+(4+e)+"})|(\\d{2}|[+-]\\d{"+(2+e)+"})$)"),r=t.match(n);if(!r)return{year:NaN,restDateString:""};const a=r[1]?parseInt(r[1]):null,o=r[2]?parseInt(r[2]):null;return{year:o===null?a:o*100,restDateString:t.slice((r[1]||r[2]).length)}}function Nt(t,e){if(e===null)return new Date(NaN);const n=t.match(pt);if(!n)return new Date(NaN);const r=!!n[4],a=S(n[1]),o=S(n[2])-1,i=S(n[3]),s=S(n[4]),c=S(n[5])-1;if(r)return Et(e,s,c)?Ct(e,s,c):new Date(NaN);{const u=new Date(0);return!Ft(e,o,i)||!qt(e,a)?new Date(NaN):(u.setUTCFullYear(e,o,Math.max(a,i)),u)}}function S(t){return t?parseInt(t):1}function Wt(t){const e=t.match(Pt);if(!e)return NaN;const n=I(e[1]),r=I(e[2]),a=I(e[3]);return Bt(n,r,a)?n*ue+r*se+a*1e3:NaN}function I(t){return t&&parseFloat(t.replace(",","."))||0}function Yt(t){if(t==="Z")return 0;const e=t.match(Ot);if(!e)return 0;const n=e[1]==="+"?-1:1,r=parseInt(e[2]),a=e[3]&&parseInt(e[3])||0;return It(r,a)?n*(r*ue+a*se):NaN}function Ct(t,e,n){const r=new Date(0);r.setUTCFullYear(t,0,4);const a=r.getUTCDay()||7,o=(e-1)*7+n+1-a;return r.setUTCDate(r.getUTCDate()+o),r}const jt=[31,null,31,30,31,30,31,31,30,31,30,31];function ge(t){return t%400===0||t%4===0&&t%100!==0}function Ft(t,e,n){return e>=0&&e<=11&&n>=1&&n<=(jt[e]||(ge(t)?29:28))}function qt(t,e){return e>=1&&e<=(ge(t)?366:365)}function Et(t,e,n){return e>=1&&e<=53&&n>=0&&n<=6}function Bt(t,e,n){return t===24?e===0&&n===0:n>=0&&n<60&&e>=0&&e<60&&t>=0&&t<25}function It(t,e){return e>=0&&e<=59}function $t({logo:t,title:e,batchName:n="",adTitle:r,startDate:a,tuition:o,nbCardRequired:i,isLoading:s=!1,regEndDate:c}){if(s)return l.jsx(be,{});const u=`${Ht(a)} · ${Rt(o,i)}`;return l.jsx(we,{logo:t,title:`${e} ${n}`,adTitle:r,footerText:u,regEndDate:c})}function we({logo:t,title:e,adTitle:n,footerText:r,regEndDate:a}){return l.jsxs(b.FlexBox.Col,{className:"relative z-10 h-full w-full items-start justify-between gap-2 overflow-hidden rounded-[10px] border border-grey-200 bg-white p-4 text-grey-800 md:p-5 lg:p-6",children:[l.jsx(H.Tag,{variant:"ad",style:{background:N.event.background,color:N.event.color},children:a?_t(a):N.event.value.toUpperCase()}),l.jsx(oe,{src:t,alt:`${e} 로고`,className:"h-4 object-contain"}),l.jsxs(b.FlexBox.Col,{className:"w-full gap-2",children:[l.jsx("h3",{className:"line-clamp-2 h-auto text-regular14 md:text-regular16 lg:h-12",title:e,children:e}),l.jsx("p",{className:"line-clamp-2 h-auto w-full break-keep rounded bg-grey-100 px-2 py-1 text-[13px] font-semibold text-grey-600 md:h-[54px] md:text-[15px] md:text-grey-800",children:n}),l.jsx(b.Box,{className:"text-[13px] leading-[19px] text-grey-600",children:r})]})]})}function be(){return l.jsxs(y.Skeleton,{type:"background",className:"relative z-10 flex h-full w-full flex-col justify-between gap-2 overflow-hidden rounded-[10px] p-4 md:p-5 lg:p-6",children:[l.jsx(H.Tag,{variant:"ad",style:{background:N.event.background,color:N.event.color},className:$.cn("h-7 w-20 animate-pulse"),children:""}),l.jsx(y.Skeleton,{className:"h-4 w-1/2"}),l.jsxs(b.FlexBox.Col,{className:"gap-2",children:[l.jsx(b.Box,{className:"h-10 w-full",children:l.jsx(y.Skeleton,{className:"h-5 w-4/5"})}),l.jsx(y.Skeleton,{className:"h-8 w-full"})]}),l.jsx(y.Skeleton,{className:"mt-2 h-4 w-2/3"})]})}const Ht=t=>{if(!t)return"";const e=he(t),n=B(e,"MM/dd");return n.includes("98")?`${B(e,"MM")}월중 개강`:n.includes("99")?`${B(e,"MM")}월중(예상) 개강`:`${n} 개강`},Rt=(t,e)=>{const n=e?"(내배카💳)":"";return t===0||t===void 0?`무료 ${n}`:`유료 ${n}`},_t=t=>{const e=pe(he(t),new Date);return e<=0?"마감임박":`D-${e}`},Lt={homepage:{label:"홈페이지",value:"homepage",query:!1},boottent:{label:"자세히보기",value:"boottent",query:!1},curriculum:{label:"커리큘럼 보기",value:"curriculum",query:"curriculum"},event:{label:"이벤트",value:"event",query:"event"},reviews:{label:"후기보기",value:"reviews",query:"reviews"}};function Qt({adKey:t,filename:e,title:n,backgroundColor:r,hideButton:a=!1,buttonColors:o,linkType:i="homepage",isLoading:s=!1}){var k;const c=t&&e,u=`https://cdn.sayun.studio/boottent/images/banners/${t}/${e}`,f={background:o?o.button:q.button,color:o?o.buttonText:q.buttonText,border:o?o.button:q.button},w=s?y.Skeleton:b.Box;return l.jsx(w,{style:{backgroundColor:s?void 0:r},type:s?"background":void 0,className:$.cn("relative flex h-40 w-full items-start justify-center overflow-hidden pb-6 pt-0 md:h-[200px] md:pb-0 md:pt-10 lg:pt-6",!s&&"border-y border-y-grey-200"),children:s?l.jsx(xe,{}):l.jsxs(l.Fragment,{children:[l.jsx(b.FlexBox.Row,{className:"flex h-full w-full max-w-screen-xl items-center justify-center px-0 md:h-auto md:px-6 lg:px-10",children:c?l.jsx(oe,{loading:"lazy",src:u,alt:`${n} 이미지`,className:"h-full w-full object-contain"}):l.jsx(b.Box,{className:"h-full w-full bg-grey-100 text-muted",children:n})}),!a&&l.jsx(b.Box,{className:"absolute inset-0 mx-auto max-w-screen-xl px-4 md:px-6 lg:px-10",children:l.jsx(H.Button,{style:f,theme:"etc",variant:"solid",className:"absolute bottom-4 right-4 w-24 md:bottom-6 md:right-6 md:w-32 lg:bottom-4 lg:right-10",children:((k=Lt[i])==null?void 0:k.label)+" →"||"홈페이지 →"})})]})})}function xe(){return l.jsxs(b.FlexBox.Col,{className:"mx-auto flex h-full w-full max-w-screen-xl items-start gap-5 px-4 pt-4 md:px-6 md:pt-0 lg:px-10",children:[l.jsx(y.Skeleton,{type:"text",className:"h-6 w-4/5 rounded-[10px] md:h-10"}),l.jsx(y.Skeleton,{type:"text",className:"h-10 w-1/2 rounded-[10px] md:h-16 lg:w-3/5"}),l.jsx(y.Skeleton,{type:"text",className:"absolute bottom-4 right-4 aspect-[3/1] w-[120px] shrink-0 md:right-6 md:w-[140px] lg:right-10"})]})}const{grey:V,main:z,green:J,red:Z,orange:K,lime:ee,brown:te,blue:ne,pink:re,teal:ae}=x.colors;V[500],V[50],z[600],z[50],J[500],J[50],Z[400],Z[50],K[500],K[50],ne[500],ne[100],re[500],re[50],ae[500],ae[50],te[500],te[50],ee[500],ee[50];exports.BannerLoading=xe;exports.ContentsCard=we;exports.EventCard=$t;exports.LoadingCard=be;exports.MainBannerImage=Qt;
|