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 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
- - `boottent-design`은 [부트텐트](https://boottent.com)의 디자인 시스템 라이브러리입니다.
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-D57xhjM5.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
+ "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-fh7-GXvn.js";
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;