@opsnow-mcp/opsnow-mcp-common-ui-server 1.0.19 → 1.0.21

package/build/components/examples/opsnow-common-select-examples-data.js

@@ -1,106 +0,0 @@
-// Select 컴포넌트 예제 데이터
-export const SelectExamples = [
-    {
-        title: '기본 셀렉트',
-        code: `<OpsnowCommonSelect items={[{ label: '옵션1', value: '1' }, { label: '옵션2', value: '2' }]} onChange={e => setValue(e.target.value)} />`,
-        description: '가장 기본적인 셀렉트 예제입니다.'
-    },
-    {
-        title: 'standard, size=small',
-        code: `<OpsnowCommonSelect items={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]} size="small" variant="standard" value={value} onChange={e => setValue(e.target.value)} />`,
-        description: 'standard variant, small 사이즈 셀렉트 예제입니다.'
-    },
-    {
-        title: 'noLine, size=small',
-        code: `<OpsnowCommonSelect items={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]} variant="noLine" size="small" value={value} onChange={e => setValue(e.target.value)} />`,
-        description: 'noLine variant, small 사이즈 단일 선택 셀렉트 예제입니다.'
-    },
-    {
-        title: 'noLine, size=small, multiple',
-        code: `<OpsnowCommonSelect items={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]} size="small" variant="noLine" multiple value={value} onChange={e => setValue(e.target.value)} />`,
-        description: 'noLine variant, small 사이즈, 다중 선택 셀렉트 예제입니다.'
-    },
-    {
-        title: 'filled, size=small, label JSX',
-        code: `<OpsnowCommonSelect items={[{ label: 'Option 1', value: '1' }, { label: <strong>Option 2</strong>, value: '2' }, { label: <StarIcon />, value: '3' }]} size="small" variant="filled" value={value} onChange={e => setValue(e.target.value)} />`,
-        description: 'filled variant, small 사이즈, label에 strong/아이콘 사용 예제입니다.'
-    },
-    {
-        title: 'outlined, size=small',
-        code: `<OpsnowCommonSelect items={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]} variant="outlined" size="small" value={value} onChange={e => setValue(e.target.value)} />`,
-        description: 'outlined variant, small 사이즈 단일 선택 셀렉트 예제입니다.'
-    },
-    {
-        title: 'outlined, size=small, multiple',
-        code: `<OpsnowCommonSelect items={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]} size="small" variant="outlined" multiple value={value} onChange={e => setValue(e.target.value)} />`,
-        description: 'outlined variant, small 사이즈, 다중 선택 셀렉트 예제입니다.'
-    },
-    {
-        title: 'standard, size=medium',
-        code: `<OpsnowCommonSelect items={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]} variant="standard" size="medium" value={value} onChange={e => setValue(e.target.value)} />`,
-        description: 'standard variant, medium 사이즈 단일 선택 셀렉트 예제입니다.'
-    },
-    {
-        title: 'outlined, size=medium, error',
-        code: `<OpsnowCommonSelect items={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]} size="medium" variant="outlined" error value={value} onChange={e => setValue(e.target.value)} />`,
-        description: 'outlined variant, medium 사이즈, 에러 상태 셀렉트 예제입니다.'
-    },
-    {
-        title: 'filled, size=medium, disabled',
-        code: `<OpsnowCommonSelect items={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]} size="medium" variant="filled" disabled value={value} onChange={e => setValue(e.target.value)} />`,
-        description: 'filled variant, medium 사이즈, 비활성화 셀렉트 예제입니다.'
-    }
-];
-// Autocomplete(오토컴플리트) 컴포넌트 예제 데이터
-export const AutocompleteExamples = [
-    {
-        title: 'Autocomplete - 단일 선택',
-        code: `<OpsnowCommonAutocomplete items={[{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }]} value={value} onChange={setValue} label="Select Option" />`,
-        description: '기본 오토컴플리트 단일 선택 예제입니다.'
-    },
-    {
-        title: 'Autocomplete - 단일 선택 (disableCloseOnSelect)',
-        code: `<OpsnowCommonAutocomplete items={[{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }]} value={value} onChange={setValue} label="Select Option" disableCloseOnSelect />`,
-        description: '항목 선택 후에도 드롭다운이 닫히지 않는 단일 선택 예제입니다.'
-    },
-    {
-        title: 'Autocomplete - 다중 선택',
-        code: `<OpsnowCommonAutocomplete items={[{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }]} multiple value={value} onChange={setValue} label="Select multiple options" />`,
-        description: '오토컴플리트 다중 선택 예제입니다.'
-    },
-    {
-        title: 'Autocomplete - 그룹 옵션',
-        code: `<OpsnowCommonAutocomplete items={[{ value: '1', label: 'Option 1', group: 'Level 1' }, { value: '2', label: 'Option 2', group: 'Level 1' }, { value: '3', label: 'Option 3', group: 'Level 2' }]} value={value} onChange={setValue} label="Select Grouped Option" />`,
-        description: '옵션 그룹이 있는 오토컴플리트 예제입니다.'
-    },
-    {
-        title: 'Autocomplete - 그룹 옵션 (다중 선택)',
-        code: `<OpsnowCommonAutocomplete items={[{ value: '1', label: 'Option 1', group: 'Level 1' }, { value: '2', label: 'Option 2', group: 'Level 1' }, { value: '3', label: 'Option 3', group: 'Level 2' }]} multiple value={value} onChange={setValue} label="Select Grouped Option" />`,
-        description: '그룹 옵션을 다중 선택할 수 있는 예제입니다.'
-    },
-    {
-        title: 'Autocomplete - 체크박스/전체선택',
-        code: `<OpsnowCommonAutocomplete items={[{ value: '1', label: 'Option 1', group: 'A' }, { value: '2', label: 'Option 2', group: 'A' }, { value: '3', label: 'Option 3', group: 'B' }]} multiple value={value} onChange={setValue} label="Select with checkbox" useCheckboxOption useSelectAll />`,
-        description: '체크박스와 전체선택이 있는 오토컴플리트 예제입니다.'
-    },
-    {
-        title: 'Autocomplete - 아이콘 옵션',
-        code: `<OpsnowCommonAutocomplete items={[{ value: 'aws', label: 'AWS', iconName: 'LogoAws' }, { value: 'azure', label: 'Azure', iconName: 'LogoAzure' }, { value: 'gcp', label: 'GCP', iconName: 'LogoGcp' }]} multiple value={value} onChange={setValue} useCheckboxOption useSelectAll />`,
-        description: '옵션에 아이콘이 포함된 오토컴플리트 예제입니다.'
-    },
-    {
-        title: 'Autocomplete - 일부 옵션 disabled',
-        code: `<OpsnowCommonAutocomplete items={[{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2', disabled: true }, { value: '3', label: 'Option 3' }, { value: '4', label: 'Option 4', disabled: true }]} multiple value={value} onChange={setValue} useCheckboxOption useSelectAll />`,
-        description: '일부 옵션이 비활성화된 오토컴플리트 예제입니다.'
-    },
-    {
-        title: 'Autocomplete - 전체 disabled',
-        code: `<OpsnowCommonAutocomplete items={[{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }]} multiple value={value} onChange={setValue} disabled />`,
-        description: '컴포넌트 전체가 비활성화된 예제입니다.'
-    },
-    {
-        title: 'Autocomplete - 비동기 로딩',
-        code: `<OpsnowCommonAutocomplete items={asyncItems} loading={loading} value={value} onChange={setValue} label="Select Async Option" />`,
-        description: '비동기 데이터 로딩/로딩 상태 오토컴플리트 예제입니다.'
-    }
-];

package/build/components/examples/opsnow-common-stepper-examples-data.js

@@ -1,180 +0,0 @@
-// Stepper 컴포넌트 예제 데이터
-export const StepperExamples = [
-    {
-        title: 'Horizontal Stepper',
-        code: `<OpsnowCommonStepper
-  steps={[
-    { label: 'Step 1', status: 'notStarted', optionalText: 'optional' },
-    { label: 'Step 2', status: 'notStarted' },
-    { label: 'Step 3', status: 'notStarted' },
-  ]}
-  activeStep={activeStep}
-  contentPadding="1rem 0"
-  contentHeight="500px"
->
-  <OpsnowCommonStepContent stepIndex={0}>
-    <TextField
-      label="Input 1"
-      variant="outlined"
-      fullWidth
-      value={input1}
-      onChange={(e) => setInput1(e.target.value)}
-    />
-    <Box sx={{ height: '40rem', marginTop: '1rem', padding: '1rem', background: '#eee' }}>
-      content
-    </Box>
-  </OpsnowCommonStepContent>
-  <OpsnowCommonStepContent stepIndex={1}>
-    <TextField
-      label="Input 2"
-      variant="outlined"
-      fullWidth
-      value={input2}
-      onChange={(e) => setInput2(e.target.value)}
-    />
-  </OpsnowCommonStepContent>
-  <OpsnowCommonStepContent stepIndex={2}>
-    <Typography>This is the content for Step 3</Typography>
-  </OpsnowCommonStepContent>
-</OpsnowCommonStepper>`,
-        description: 'Horizontal stepper with content area and navigation buttons.'
-    },
-    {
-        title: 'Simple Stepper',
-        code: `<OpsnowCommonStepper
-  steps={steps}
-  activeStep={activeStepSimple}
-  isSimpleView
-  contentPadding="1rem 0"
-  contentHeight="500px"
->
-  <OpsnowCommonStepContent stepIndex={0}>
-    <Typography>Simple Step 1</Typography>
-    <Box sx={{ height: '40rem', background: '#ccc' }}>content</Box>
-  </OpsnowCommonStepContent>
-  <OpsnowCommonStepContent stepIndex={1}>
-    <Typography>Simple Step 2</Typography>
-  </OpsnowCommonStepContent>
-  <OpsnowCommonStepContent stepIndex={2}>
-    <Typography>Simple Step 3</Typography>
-  </OpsnowCommonStepContent>
-</OpsnowCommonStepper>`,
-        description: 'Simplified stepper view without connectors.'
-    },
-    {
-        title: 'Right-aligned Stepper with Custom Connector',
-        code: `<OpsnowCommonStepper
-  steps={steps}
-  activeStep={activeStepRight}
-  align="right"
-  connector={<CustomConnector />}
->
-  <OpsnowCommonStepContent stepIndex={0}>
-    <TextField label="Input 1" variant="outlined" fullWidth value={input1} onChange={(e) => setInput1(e.target.value)} />
-  </OpsnowCommonStepContent>
-  <OpsnowCommonStepContent stepIndex={1}>
-    <TextField label="Input 2" variant="outlined" fullWidth value={input2} onChange={(e) => setInput2(e.target.value)} />
-  </OpsnowCommonStepContent>
-  <OpsnowCommonStepContent stepIndex={2}>
-    <Typography>This is the content for Step 3</Typography>
-  </OpsnowCommonStepContent>
-</OpsnowCommonStepper>`,
-        description: 'Stepper aligned to the right with a custom connector style.'
-    },
-    {
-        title: 'Vertical Non-linear Stepper',
-        code: `<OpsnowCommonStepper
-  steps={steps}
-  activeStep={activeStepVertical}
-  orientation="vertical"
-  nonLinear
-  onStepClick={(index) => setActiveStepVertical(index)}
-  contentDependency={false}
->
-  <OpsnowCommonStepContent stepIndex={0}>
-    <TextField
-      label="Vertical Input 1"
-      variant="outlined"
-      fullWidth
-      value={input1}
-      onChange={(e) => setInput1(e.target.value)}
-    />
-    <OpsnowCommonStepButton
-      prev={() => setActiveStepVertical(activeStepVertical - 1)}
-      next={() => setActiveStepVertical(activeStepVertical + 1)}
-      leftDisabled={activeStepVertical === 0}
-      rightDisabled={activeStepVertical === steps.length - 1}
-    />
-  </OpsnowCommonStepContent>
-  <OpsnowCommonStepContent stepIndex={1}>
-    <TextField
-      label="Vertical Input 2"
-      variant="outlined"
-      fullWidth
-      value={input2}
-      onChange={(e) => setInput2(e.target.value)}
-    />
-    <OpsnowCommonStepButton
-      prev={() => setActiveStepVertical(activeStepVertical - 1)}
-      next={() => setActiveStepVertical(activeStepVertical + 1)}
-      leftDisabled={activeStepVertical === 0}
-      rightDisabled={activeStepVertical === steps.length - 1}
-    />
-  </OpsnowCommonStepContent>
-  <OpsnowCommonStepContent stepIndex={2}>
-    <Typography>This is the content for Step 3</Typography>
-    <OpsnowCommonStepButton
-      prev={() => setActiveStepVertical(activeStepVertical - 1)}
-      next={() => setActiveStepVertical(activeStepVertical + 1)}
-      leftDisabled={activeStepVertical === 0}
-      rightDisabled={activeStepVertical === steps.length - 1}
-    />
-  </OpsnowCommonStepContent>
-</OpsnowCommonStepper>`,
-        description: 'Vertical stepper that allows non-linear navigation by clicking steps.'
-    },
-    {
-        title: 'Vertical Stepper with Completed Content',
-        code: `<OpsnowCommonStepper
-  steps={steps}
-  activeStep={activeStepCompleted}
-  orientation="vertical"
->
-  <OpsnowCommonStepContent stepIndex={0}>
-    <Typography>Step 1: This input field is the first step.</Typography>
-    <TextField label="Vertical Input 1" variant="outlined" fullWidth value={input1} onChange={(e) => setInput1(e.target.value)} />
-  </OpsnowCommonStepContent>
-  <OpsnowCommonStepContent slot="completed" stepIndex={0}>
-    <Typography>Step 1 Completed!</Typography>
-  </OpsnowCommonStepContent>
-
-  <OpsnowCommonStepContent stepIndex={1}>
-    <Typography>Step 2: This input field is the second step.</Typography>
-    <TextField label="Vertical Input 2" variant="outlined" fullWidth value={input2} onChange={(e) => setInput2(e.target.value)} />
-  </OpsnowCommonStepContent>
-  <OpsnowCommonStepContent slot="completed" stepIndex={1}>
-    <Typography>Step 2 Completed!</Typography>
-  </OpsnowCommonStepContent>
-
-  <OpsnowCommonStepContent stepIndex={2}>
-    <Typography>Step 3: This is the final step.</Typography>
-  </OpsnowCommonStepContent>
-  <OpsnowCommonStepContent slot="completed" stepIndex={2}>
-    <Typography>Step 3 Completed!</Typography>
-  </OpsnowCommonStepContent>
-</OpsnowCommonStepper>`,
-        description: 'Vertical stepper showing custom content when each step is completed.'
-    },
-    {
-        title: 'Change Step Status',
-        code: `{steps.map((step, index) => (
-  <Box key={index} sx={{ marginBottom: '1rem' }}>
-    <Typography>Step {index + 1} - Current Status: {step.status}</Typography>
-    <OpsnowCommonButton label="Error" onClick={() => changeStepStatus(index, 'error')} sx={{ marginRight: '8px' }} />
-    <OpsnowCommonButton label="Completed" onClick={() => changeStepStatus(index, 'completed')} sx={{ marginRight: '8px' }} />
-    <OpsnowCommonButton label="Not Started" onClick={() => changeStepStatus(index, 'notStarted')} />
-  </Box>
-))}`,
-        description: 'Example showing how to programmatically change the status of each step.'
-    }
-];

package/build/components/examples/opsnow-common-storage-examples-data.js

@@ -1,8 +0,0 @@
-// Storage 컴포넌트 예제 데이터
-export const StorageExamples = [
-    {
-        title: '기본 스토리지',
-        code: `<OpsnowCommonStorage />`,
-        description: '기본 스토리지 예제입니다.'
-    }
-];

package/build/components/examples/opsnow-common-tab-examples-data.js

@@ -1,87 +0,0 @@
-// Tab 컴포넌트 예제 데이터
-export const TabExamples = [
-    {
-        title: "label",
-        code: `<OpsnowCommonTab items={[{ label: '탭1' }, { label: '탭2' }]} />`,
-        description: "탭이 2개인 기본 탭 예제입니다.",
-    },
-    {
-        title: "orientation-label",
-        code: `<OpsnowCommonTab orientation="vertical" items={[{ label: '탭1' }, { label: '탭2' }]} />`,
-        description: "탭이 2개이고 탭 방향이 세로로 변경되는 예제입니다.",
-    },
-    {
-        title: "orientation-label-handleTabChange-value",
-        code: `
-    const handleTabChange = (_event, newValue) => {
-    setTabIndex(newValue)
-    }
-    <OpsnowCommonTab orientation="horizontal" items={[{ label: '탭1' }, { label: '탭2' }]} onChange = {handleTabChange} value={tabIndex}/>`,
-        description: "tab index에 따라 탭 값이 변경되며 탭이 2개인 예제입니다.",
-    },
-    {
-        title: "label-disabled",
-        code: `<OpsnowCommonTab  items={[{ label: '탭1' }, { label: '탭2', , disabled: true}]} />`,
-        description: "탭이 2개이고 두번째 탭이 비활성화된 예제입니다.",
-    },
-    {
-        title: "label-depth",
-        code: `<OpsnowCommonTab  items={[{ label: '탭1' }, { label: '탭2'}]} depth={2} />`,
-        description: "탭이 2개이고 탭 깊이가 2인 예제입니다.",
-    },
-    {
-        title: "label-contentGap",
-        code: `<OpsnowCommonTab  items={[{ label: '탭1' }, { label: '탭2'}]} contentGap="small" />`,
-        description: "탭이 2개이고 탭 간격이 small인 예제입니다.",
-    },
-    {
-        title: "label-fullWidth",
-        code: `<OpsnowCommonTab  items={[{ label: '탭1' }, { label: '탭2'}]} fullWidth={true} />`,
-        description: "탭이 2개이고 탭 전체 너비 사용 여부가 true인 예제입니다.",
-    },
-    {
-        title: "label-color",
-        code: `<OpsnowCommonTab  items={[{ label: '탭1' }, { label: '탭2'}]} color="primary" />`,
-        description: "탭이 2개이고 탭 색상이 primary인 예제입니다.",
-    },
-    {
-        title: "label-iconName",
-        code: `<OpsnowCommonTab  items={[{ label: '탭1', iconName: 'LogoAws' }, { label: '탭2', iconName: 'LogoAzure'}]} />`,
-        description: "탭이 2개이고 각 탭에 아이콘이 포함된 예제입니다.",
-    },
-    {
-        title: "label-content",
-        code: `<OpsnowCommonTab  items={[{ label: '탭1', content: <div>탭1 내용</div> }, { label: '탭2', content: <div>탭2 내용</div>}]} />`,
-        description: "탭이 2개이고 각 탭에 내용이 포함된 예제입니다.",
-    },
-    {
-        title: "label-content-disabled",
-        code: `<OpsnowCommonTab  items={[{ label: '탭1', content: <div>탭1 내용</div> }, { label: '탭2', content: <div>탭2 내용</div>, disabled: true}]} />`,
-        description: "탭이 2개이고 두번째 탭이 비활성화된 예제입니다.",
-    },
-    {
-        title: "label-iconName-content",
-        code: `<OpsnowCommonTab  items={[{ label: '탭1', iconName: 'LogoAws', content: <div>탭1 내용</div> }, { label: '탭2', iconName: 'LogoAzure', content: <div>탭2 내용</div>}]} />`,
-        description: "탭이 2개이고 각 탭에 아이콘과 내용이 포함된 예제입니다.",
-    },
-    {
-        title: "label-iconName-content-disabled",
-        code: `<OpsnowCommonTab  items={[{ label: '탭1', iconName: 'LogoAws', content: <div>탭1 내용</div> }, { label: '탭2', iconName: 'LogoAzure', content: <div>탭2 내용</div>, disabled: true}]} />`,
-        description: "탭이 2개이고 각 탭에 아이콘과 내용이 포함된 예제입니다.",
-    },
-    {
-        title: "value-label-iconName-content",
-        code: `<OpsnowCommonTab value = {0} items={[{ label: '탭1', iconName: 'LogoAws', content: <div>탭1 내용</div> }, { label: '탭2', iconName: 'LogoAzure', content: <div>탭2 내용</div>}]} />`,
-        description: "탭 선택이 첫 번째로 고정되어 있는 상태로 탭이 2개이고 각 탭에 아이콘과 내용이 포함된 예제입니다.",
-    },
-    {
-        title: "value-label-iconName-content",
-        code: `<OpsnowCommonTab value = {tabIndex} items={[{ label: '탭1', iconName: 'LogoAws', content: <div>탭1 내용</div> }, { label: '탭2', iconName: 'LogoAzure', content: <div>탭2 내용</div>}]} />`,
-        description: "탭 선택이 tabIndex라는 state 변수에 따라 변경되는 상태로 탭이 2개이고 각 탭에 아이콘과 내용이 포함된 예제입니다.",
-    },
-    {
-        title: "2-depth-button-tab-ui",
-        code: `<OpsnowCommonTab value={activeTab} onChange={handleTabChange} items={[{ label: 'Overview', content: (<div style={{ marginTop: '20px' }}><p>Overview content</p></div>) }, { label: 'Explorer', content: (<div style={{ marginTop: '20px' }}>{buttons.map((button) => (<OpsnowCommonButton key={button.value} label={button.label} onClick={() => handleButtonClick(button.value)} variant={selectedButton === button.value ? 'contained' : 'outlined'} style={{ marginRight: '10px', marginBottom: '10px' }} />))}{selectedButton && (<div style={{ marginTop: '20px' }}><p>Selected: {selectedButton}</p></div>)}</div>) }]} />`,
-        description: "2개의 탭(Overview, Explorer)이 있고, Explorer 탭에 동적 버튼 그룹이 포함된 2-Depth Button Tab UI 예제입니다.",
-    },
-];

package/build/components/examples/opsnow-common-toast-popup-examples-data.js

@@ -1,129 +0,0 @@
-// Toast Popup 컴포넌트 예제 데이터
-export const ToastPopupExamples = [
-    {
-        title: "message-info-duration-bottom-left",
-        code: `
-    const handleClick = () => {
-      showToast("토스트 메시지입니다!",{
-        color: 'info',
-        autoHideDuration: 1000,
-        anchorOrigin: { vertical: 'bottom',  horizontal: 'left'},
-      });
-    }
-    <OpsnowCommonButton onClick={handleClick} />`,
-        description: "1초 후 토스트 메시지가 사라지며 토스트 위치는 하단 왼쪽인 토스트 팝업 예제입니다.",
-    },
-    {
-        title: "message-error-duration-bottom-right",
-        code: `
-    const handleClick = () => {
-      showToast("토스트 메시지입니다!",{
-        color: "error",
-        autoHideDuration: 3000,
-        anchorOrigin: { vertical: 'bottom',  horizontal: 'right'},
-      });
-    }
-    <OpsnowCommonButton onClick={handleClick} />`,
-        description: "3초 후 토스트 메시지가 사라지며 토스트 위치는 하단 오른쪽인 토스트 팝업 예제입니다.",
-    },
-    {
-        title: "message-warning-duration-top-center",
-        code: `
-    const handleClick = () => {
-      showToast("토스트 메시지입니다!",{
-        color: "warning",
-        autoHideDuration: 3000,
-        anchorOrigin: { vertical: 'top',  horizontal: 'center'},
-      });
-    }
-    <OpsnowCommonButton onClick={handleClick} />`,
-        description: "3초 후 토스트 메시지가 사라지며 토스트 위치는 상단 중앙인 토스트 팝업 예제입니다.",
-    },
-    {
-        title: "message-default-duration-bottom-center",
-        code: `
-    const handleClick = () => {
-      showToast("토스트 메시지입니다!",{
-        color: "default",
-        autoHideDuration: 3000,
-        anchorOrigin: { vertical: 'bottom',  horizontal: 'center'},
-      });
-    }
-    <OpsnowCommonButton onClick={handleClick} />`,
-        description: "3초 후 토스트 메시지가 사라지며 토스트 위치는 하단 중앙인 토스트 팝업 예제입니다.",
-    },
-    {
-        title: "message-custom-action-duration-bottom-center",
-        code: `
-    const handleClick = () => {
-      showToast("토스트 메시지입니다!",{
-        color: "default",
-        autoHideDuration: 3000,
-        anchorOrigin: { vertical: 'bottom',  horizontal: 'center'},
-        customActionBtn: {<OpsnowCommonButton
-          iconPosition="right"
-          iconName="ArrowRight"
-          label="Confirm"
-          variant="text"
-          color="inherit"
-          size="small"
-          theme="white"
-          onClick={handleCustomAction}
-        />
-        },
-      });
-    }
-    const handleCustomAction = () => {
-      alert('Notification confirm button clicked!');
-    }
-    <OpsnowCommonButton onClick={handleClick} />`,
-        description: "3초 후 토스트 메시지가 사라지며 토스트 위치는 하단 중앙이며 토스트 내부 버튼을 커스텀하는 토스트 팝업 예제입니다.",
-    },
-    {
-        title: "message-custom-action-duration-bottom-center",
-        code: `
-    const handleClick = () => {
-      showToast("토스트 메시지입니다!",{
-        color: "warning",
-        useTitle: true,
-        title: 'Warning',
-        autoHideDuration: 3000,
-        anchorOrigin: { vertical: 'top',  horizontal: 'center'},
-      });
-    }
-    <OpsnowCommonButton onClick={handleClick} />`,
-        description: "3초 후 토스트 메시지가 사라지며 토스트 위치는 상단 중앙이며 토스트 타이틀을 사용하는 토스트 팝업 예제입니다.",
-    },
-    {
-        title: "message-custom-action-duration-bottom-center-TransitionComponent",
-        code: `
-    const handleClick = () => {
-      showToast("토스트 메시지입니다!",{
-        color: "default",
-        autoHideDuration: 3000,
-        anchorOrigin: { vertical: 'bottom',  horizontal: 'center'},
-        TransitionComponent: Zoom,
-      });
-    }
-    <OpsnowCommonButton onClick={handleClick} />`,
-        description: "3초 후 토스트 메시지가 사라지며 토스트 위치는 하단 중앙이며 mui 트랜지션 컴포넌트를 사용하는 토스트 팝업 예제입니다.",
-    },
-    {
-        title: "message-custom-action-duration-top-center-style",
-        code: `
-    const handleClick = () => {
-      showToast("토스트 메시지입니다!",{
-        color: "default",
-        autoHideDuration: 3000,
-        anchorOrigin: { vertical: 'top',  horizontal: 'center'},
-        style: {
-          boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.1)',
-          borderLeft: '4px solid #000',
-          backgroundColor: '#f0f0f0',
-        },
-      });
-    }
-    <OpsnowCommonButton onClick={handleClick} />`,
-        description: "3초 후 토스트 메시지가 사라지며 토스트 위치는 상단 중앙이며 토스트 스타일을 커스텀하는 토스트 팝업 예제입니다.",
-    },
-];

package/build/components/examples/opsnow-common-tooltip-examples-data.js

@@ -1,80 +0,0 @@
-// Tooltip 컴포넌트 예제 데이터
-export const TooltipExamples = [
-    {
-        title: "titleProps.title",
-        code: `<OpsnowCommonTooltip title="툴팁 내용"><Button>Hover me</Button></OpsnowCommonTooltip>`,
-        description: "툴팁 내용이라고 나오는 가장 기본적인 툴팁 예제입니다.",
-    },
-    {
-        title: "titleProps.imgSrc",
-        code: `</OpsnowCommonTooltip>
-      <OpsnowCommonTooltip title={<img src="https://picsum.photos/200/300"/>}><Button>Hover me</Button></OpsnowCommonTooltip>`,
-        description: "이미지를 툴팁내용으로 사용하는 기본 툴팁 예제입니다.",
-    },
-    {
-        title: "isIconTooltip-titleProps.title-iconTooltipProps.iconName-iconTooltipProps.useIcon",
-        code: `<OpsnowCommonIconTooltip iconName={'ArrowBothVerticalCircleOutline'} useIcon={true} title = '툴팁 내용'></OpsnowCommonIconTooltip>`,
-        description: "아이콘 호버 시 툴팁 표시되는 아이콘 툴팁 기본 예제입니다.",
-    },
-    {
-        title: "isIconTooltip-titleProps.title-iconTooltipProps.iconName-iconTooltipProps.useIcon",
-        code: `<OpsnowCommonIconTooltip iconName={'Battery'} useIcon={true} title = {<img src="https://picsum.photos/200/300"/>}></OpsnowCommonIconTooltip>`,
-        description: "이미지를 툴팁내용으로 사용하는 아이콘 툴팁 예제입니다.",
-    },
-    {
-        title: "isIconTooltip-titleProps.title-iconTooltipProps.placement-iconTooltipProps.iconName-iconTooltipProps.useIcon",
-        code: `<OpsnowCommonIconTooltip iconName={'InfoCircleOutline'} useIcon={true} title="툴팁 내용" placement="bottom"></OpsnowCommonIconTooltip>`,
-        description: "툴팁이 아래쪽으로 표시되는 아이콘 툴팁 예제입니다.",
-    },
-    {
-        title: "isIconTooltip-titleProps.title-iconTooltipProps.placement-iconTooltipProps.iconName-iconTooltipProps.useIcon",
-        code: `<OpsnowCommonIconTooltip iconName={'ChevronDoubleRight'} useIcon={true} title="툴팁 내용" placement="bottom"></OpsnowCommonIconTooltip>`,
-        description: "툴팁이 아래쪽으로 표시되는 아이콘 툴팁 예제입니다.",
-    },
-    {
-        title: "titleProps.title-onOpen-disableHoverListener",
-        code: `
-    <OpsnowCommonTooltip title="툴팁 내용" onOpen={open} disableHoverListener><Button>Hover me</Button></OpsnowCommonTooltip>`,
-        description: "툴팁 열림 시 함수 실행 및 호버 리스너 비활성화 예제입니다.",
-    },
-    {
-        title: "titleProps.title-bottom",
-        code: `<OpsnowCommonTooltip title="툴팁 내용" placement="bottom"><Button>Hover me</Button></OpsnowCommonTooltip>`,
-        description: "아래쪽에 표시되는 툴팁 예제입니다.",
-    },
-    {
-        title: "titleProps.title-bottom-tooltipFullWidth",
-        code: `<OpsnowCommonTooltip title="툴팁 내용" placement="bottom" tooltipFullWidth><Button>Hover me</Button></OpsnowCommonTooltip>`,
-        description: "툴팁 전체 너비로 아래쪽에 표시되는 툴팁 예제입니다.",
-    },
-    {
-        title: "titleProps.title-bottom-enterDelay",
-        code: `<OpsnowCommonTooltip title="툴팁 내용" placement="bottom" enterDelay={1000}><Button>Hover me</Button></OpsnowCommonTooltip>`,
-        description: "툴팁 열림 지연 시간 예제입니다.",
-    },
-    {
-        title: "titleProps.title-bottom-enterTouchDelay",
-        code: `<OpsnowCommonTooltip title="툴팁 내용" placement="bottom" enterTouchDelay={1000}><Button>Hover me</Button></OpsnowCommonTooltip>`,
-        description: "툴팁 열림 터치 지연 시간 예제입니다.",
-    },
-    {
-        title: "titleProps.title-bottom-enterNextDelay",
-        code: `<OpsnowCommonTooltip title="툴팁 내용" placement="bottom" enterNextDelay={1000}><Button>Hover me</Button></OpsnowCommonTooltip>`,
-        description: "툴팁 열림 다음 지연 시간 예제입니다.",
-    },
-    {
-        title: "titleProps.title-bottom-leaveDelay",
-        code: `<OpsnowCommonTooltip title="툴팁 내용" placement="bottom" leaveDelay={1000}><Button>Hover me</Button></OpsnowCommonTooltip>`,
-        description: "툴팁 닫힘 지연 시간 예제입니다.",
-    },
-    {
-        title: "titleProps.title-bottom-leaveNextDelay",
-        code: `<OpsnowCommonTooltip title="툴팁 내용" placement="bottom" leaveNextDelay={1000}><Button>Hover me</Button></OpsnowCommonTooltip>`,
-        description: "툴팁 닫힘 다음 지연 시간 예제입니다.",
-    },
-    {
-        title: "titleProps.title-bottom-green",
-        code: `<OpsnowCommonTooltip title="툴팁 내용" placement="bottom" color={'green'}><Button>Hover me</Button></OpsnowCommonTooltip>`,
-        description: "툴팁 색상 예제입니다.",
-    },
-];