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

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

@@ -1,1699 +0,0 @@
-// 각 컴포넌트별 예제 정보 export (opsnow-common-examples.ts에서 import해서 MCP 툴로 활용)
-export const ButtonExamples = [
-    // === Large size examples ===
-    {
-        title: 'large-contained-primary-icon-left',
-        code: `<OpsnowCommonButton iconName="CloudPlus" label="Label" size="large" onClick={muiButtonTest} />`,
-        description: '대형 크기의 기본 Contained Primary 버튼 (왼쪽 아이콘) 예제입니다.'
-    },
-    {
-        title: 'large-contained-secondary',
-        code: `<OpsnowCommonButton label="Label" size="large" color="secondary" onClick={muiButtonTest} />`,
-        description: '대형 크기의 Contained Secondary 버튼 예제입니다.'
-    },
-    {
-        title: 'large-contained-error',
-        code: `<OpsnowCommonButton label="Label" size="large" color="error" onClick={muiButtonTest} />`,
-        description: '대형 크기의 Contained Error 버튼 예제입니다.'
-    },
-    {
-        title: 'large-contained-inherit',
-        code: `<OpsnowCommonButton label="Label" size="large" color="inherit" onClick={muiButtonTest} />`,
-        description: '대형 크기의 Contained Inherit 버튼 예제입니다.'
-    },
-    {
-        title: 'large-contained-inherit-white-theme',
-        code: `<OpsnowCommonButton label="Label" theme="white" size="large" color="inherit" onClick={muiButtonTest} />`,
-        description: '대형 크기의 흰 테마 Contained Inherit 버튼 예제입니다.'
-    },
-    {
-        title: 'large-contained-disabled-white-theme',
-        code: `<OpsnowCommonButton label="Label" theme="white" size="large" disabled onClick={muiButtonTest} />`,
-        description: '대형 크기의 흰 테마 Disabled Contained 버튼 예제입니다.'
-    },
-    {
-        title: 'large-outlined-primary-icon-right',
-        code: `<OpsnowCommonButton iconPosition="right" iconName="LogoAws" label="Label" variant="outlined" size="large" onClick={muiButtonTest} />`,
-        description: '대형 크기의 Outlined Primary 버튼 (오른쪽 아이콘) 예제입니다.'
-    },
-    {
-        title: 'large-outlined-secondary',
-        code: `<OpsnowCommonButton label="Label" size="large" variant="outlined" color="secondary" onClick={muiButtonTest} />`,
-        description: '대형 크기의 Outlined Secondary 버튼 예제입니다.'
-    },
-    {
-        title: 'large-outlined-error',
-        code: `<OpsnowCommonButton label="Label" size="large" variant="outlined" color="error" onClick={muiButtonTest} />`,
-        description: '대형 크기의 Outlined Error 버튼 예제입니다.'
-    },
-    {
-        title: 'large-outlined-inherit',
-        code: `<OpsnowCommonButton label="Label" size="large" variant="outlined" color="inherit" onClick={muiButtonTest} />`,
-        description: '대형 크기의 Outlined Inherit 버튼 예제입니다.'
-    },
-    {
-        title: 'large-outlined-inherit-white-theme',
-        code: `<OpsnowCommonButton label="Label" theme="white" size="large" variant="outlined" color="inherit" onClick={muiButtonTest} />`,
-        description: '대형 크기의 흰 테마 Outlined Inherit 버튼 예제입니다.'
-    },
-    {
-        title: 'large-outlined-disabled',
-        code: `<OpsnowCommonButton label="Label" size="large" variant="outlined" disabled onClick={muiButtonTest} />`,
-        description: '대형 크기의 Disabled Outlined 버튼 예제입니다.'
-    },
-    {
-        title: 'large-text-primary-icon-left',
-        code: `<OpsnowCommonButton iconName="PlusCircleOutline" label="Label" variant="text" size="large" onClick={muiButtonTest} />`,
-        description: '대형 크기의 Text Primary 버튼 (왼쪽 아이콘) 예제입니다.'
-    },
-    {
-        title: 'large-text-secondary',
-        code: `<OpsnowCommonButton label="Label" variant="text" size="large" color="secondary" onClick={muiButtonTest} />`,
-        description: '대형 크기의 Text Secondary 버튼 예제입니다.'
-    },
-    {
-        title: 'large-text-error',
-        code: `<OpsnowCommonButton label="Label" variant="text" size="large" color="error" onClick={muiButtonTest} />`,
-        description: '대형 크기의 Text Error 버튼 예제입니다.'
-    },
-    {
-        title: 'large-text-inherit',
-        code: `<OpsnowCommonButton label="Label" variant="text" size="large" color="inherit" onClick={muiButtonTest} />`,
-        description: '대형 크기의 Text Inherit 버튼 예제입니다.'
-    },
-    {
-        title: 'large-text-inherit-white-theme',
-        code: `<OpsnowCommonButton label="Label" variant="text" theme="white" size="large" color="inherit" onClick={muiButtonTest} />`,
-        description: '대형 크기의 흰 테마 Text Inherit 버튼 예제입니다.'
-    },
-    {
-        title: 'large-text-disabled',
-        code: `<OpsnowCommonButton label="Label" variant="text" size="large" disabled onClick={muiButtonTest} />`,
-        description: '대형 크기의 Disabled Text 버튼 예제입니다.'
-    },
-    // === Medium size examples ===
-    {
-        title: 'medium-contained-primary-icon-left',
-        code: `<OpsnowCommonButton muiIconName="mic" label="Label" onClick={muiButtonTest} />`,
-        description: '중간 크기의 기본 Contained Primary 버튼 (왼쪽 아이콘) 예제입니다.'
-    },
-    {
-        title: 'medium-contained-secondary',
-        code: `<OpsnowCommonButton label="Label" color="secondary" onClick={muiButtonTest} />`,
-        description: '중간 크기의 Contained Secondary 버튼 예제입니다.'
-    },
-    {
-        title: 'medium-contained-error',
-        code: `<OpsnowCommonButton label="Label" color="error" onClick={muiButtonTest} />`,
-        description: '중간 크기의 Contained Error 버튼 예제입니다.'
-    },
-    {
-        title: 'medium-contained-inherit',
-        code: `<OpsnowCommonButton label="Label" color="inherit" onClick={muiButtonTest} />`,
-        description: '중간 크기의 Contained Inherit 버튼 예제입니다.'
-    },
-    {
-        title: 'medium-contained-inherit-white-theme',
-        code: `<OpsnowCommonButton label="Label" theme="white" color="inherit" onClick={muiButtonTest} />`,
-        description: '중간 크기의 흰 테마 Contained Inherit 버튼 예제입니다.'
-    },
-    {
-        title: 'medium-contained-disabled',
-        code: `<OpsnowCommonButton label="Label" theme="white" disabled onClick={muiButtonTest} />`,
-        description: '중간 크기의 Disabled Contained 버튼 예제입니다.'
-    },
-    {
-        title: 'medium-outlined-primary-icon-right',
-        code: `<OpsnowCommonButton iconPosition="right" iconName="LogoAws" label="Label" variant="outlined" onClick={muiButtonTest} />`,
-        description: '중간 크기의 Outlined Primary 버튼 (오른쪽 아이콘) 예제입니다.'
-    },
-    {
-        title: 'medium-outlined-secondary',
-        code: `<OpsnowCommonButton label="Label" variant="outlined" color="secondary" onClick={muiButtonTest} />`,
-        description: '중간 크기의 Outlined Secondary 버튼 예제입니다.'
-    },
-    {
-        title: 'medium-outlined-error',
-        code: `<OpsnowCommonButton label="Label" variant="outlined" color="error" onClick={muiButtonTest} />`,
-        description: '중간 크기의 Outlined Error 버튼 예제입니다.'
-    }
-];
-export const BadgeExamples = [
-    // === No children badge examples ===
-    {
-        title: 'badge-no-children-primary',
-        code: `<OpsnowCommonBadge badgeContent={4} color="primary" />`,
-        description: '자식 없는 기본 Primary 배지 예제입니다.'
-    },
-    {
-        title: 'badge-no-children-error',
-        code: `<OpsnowCommonBadge badgeContent={4} color="error" />`,
-        description: '자식 없는 Error 배지 예제입니다.'
-    },
-    {
-        title: 'badge-no-children-info',
-        code: `<OpsnowCommonBadge badgeContent={4} color="info" />`,
-        description: '자식 없는 Info 배지 예제입니다.'
-    },
-    {
-        title: 'badge-no-children-warning',
-        code: `<OpsnowCommonBadge badgeContent={4} color="warning" />`,
-        description: '자식 없는 Warning 배지 예제입니다.'
-    },
-    {
-        title: 'badge-no-children-success',
-        code: `<OpsnowCommonBadge badgeContent={4} color="success" />`,
-        description: '자식 없는 Success 배지 예제입니다.'
-    },
-    // === Standard badge (with MailIcon) examples ===
-    {
-        title: 'badge-standard-primary',
-        code: `<OpsnowCommonBadge badgeContent={4} color="primary">
-  <MailIcon />
-</OpsnowCommonBadge>`,
-        description: 'MailIcon이 포함된 Primary 배지 예제입니다.'
-    },
-    {
-        title: 'badge-standard-error',
-        code: `<OpsnowCommonBadge badgeContent={4} color="error">
-  <MailIcon />
-</OpsnowCommonBadge>`,
-        description: 'MailIcon이 포함된 Error 배지 예제입니다.'
-    },
-    {
-        title: 'badge-standard-info',
-        code: `<OpsnowCommonBadge badgeContent={4} color="info">
-  <MailIcon />
-</OpsnowCommonBadge>`,
-        description: 'MailIcon이 포함된 Info 배지 예제입니다.'
-    },
-    {
-        title: 'badge-standard-warning',
-        code: `<OpsnowCommonBadge badgeContent={4} color="warning">
-  <MailIcon />
-</OpsnowCommonBadge>`,
-        description: 'MailIcon이 포함된 Warning 배지 예제입니다.'
-    },
-    {
-        title: 'badge-standard-success',
-        code: `<OpsnowCommonBadge badgeContent={4} color="success">
-  <MailIcon />
-</OpsnowCommonBadge>`,
-        description: 'MailIcon이 포함된 Success 배지 예제입니다.'
-    },
-    {
-        title: 'badge-standard-show-zero',
-        code: `<OpsnowCommonBadge badgeContent={0} color="success" showZero>
-  <MailIcon />
-</OpsnowCommonBadge>`,
-        description: '0 값을 표시하는 ShowZero 옵션이 적용된 배지 예제입니다.'
-    },
-    // === Dot badge (with MailIcon) examples ===
-    {
-        title: 'badge-dot-primary',
-        code: `<OpsnowCommonBadge badgeContent={4} color="primary" variant="dot">
-  <MailIcon />
-</OpsnowCommonBadge>`,
-        description: 'MailIcon이 포함된 Primary Dot 배지 예제입니다.'
-    },
-    {
-        title: 'badge-dot-error',
-        code: `<OpsnowCommonBadge badgeContent={4} color="error" variant="dot">
-  <MailIcon />
-</OpsnowCommonBadge>`,
-        description: 'MailIcon이 포함된 Error Dot 배지 예제입니다.'
-    },
-    {
-        title: 'badge-dot-info',
-        code: `<OpsnowCommonBadge badgeContent={4} color="info" variant="dot">
-  <MailIcon />
-</OpsnowCommonBadge>`,
-        description: 'MailIcon이 포함된 Info Dot 배지 예제입니다.'
-    },
-    {
-        title: 'badge-dot-warning',
-        code: `<OpsnowCommonBadge badgeContent={4} color="warning" variant="dot">
-  <MailIcon />
-</OpsnowCommonBadge>`,
-        description: 'MailIcon이 포함된 Warning Dot 배지 예제입니다.'
-    },
-    {
-        title: 'badge-dot-success',
-        code: `<OpsnowCommonBadge badgeContent={4} color="success" variant="dot">
-  <MailIcon />
-</OpsnowCommonBadge>`,
-        description: 'MailIcon이 포함된 Success Dot 배지 예제입니다.'
-    }
-];
-export const TextareaExamples = [
-    {
-        title: 'outlined-variant-default',
-        code: `<OpsnowCommonTextarea
-  placeholder="Outlined variant textarea"
-  value={textOutlined}
-  onChange={(e) => setTextOutlined(e.target.value)}
-  variant="outlined"
-/>`,
-        description: 'Outlined Variant (default) 예제입니다.'
-    },
-    {
-        title: 'standard-variant',
-        code: `<OpsnowCommonTextarea
-  placeholder="Standard variant textarea"
-  value={textStandard}
-  onChange={(e) => setTextStandard(e.target.value)}
-  variant="standard"
-/>`,
-        description: 'Standard Variant 예제입니다.'
-    },
-    {
-        title: 'filled-variant',
-        code: `<OpsnowCommonTextarea
-  placeholder="Filled variant textarea"
-  value={textFilled}
-  onChange={(e) => setTextFilled(e.target.value)}
-  variant="filled"
-/>`,
-        description: 'Filled Variant 예제입니다.'
-    },
-    {
-        title: 'fixed-height-rows-10',
-        code: `<OpsnowCommonTextarea
-  placeholder="Fixed height textarea"
-  value={textFixed}
-  onChange={(e) => setTextFixed(e.target.value)}
-  rows={10}
-/>`,
-        description: 'Fixed Height (rows=10) 예제입니다.'
-    },
-    {
-        title: 'auto-resize',
-        code: `<OpsnowCommonTextarea
-  placeholder="Auto resize textarea"
-  autoSize
-  value={textAuto}
-  onChange={(e) => setTextAuto(e.target.value)}
-/>`,
-        description: 'Auto Resize 예제입니다.'
-    },
-    {
-        title: 'with-helper-text',
-        code: `<OpsnowCommonTextarea
-  placeholder="Textarea with helper text"
-  value={textHelper}
-  onChange={(e) => setTextHelper(e.target.value)}
-  helperText="Helper text goes here"
-/>`,
-        description: 'With Helper Text 예제입니다.'
-    }
-];
-export const SwitchExamples = [
-    {
-        title: 'default-switch',
-        code: `<OpsnowCommonSwitch
-  checked={switchStates.default}
-  onChange={handleToggle('default')}
-/>`,
-        description: 'Default Switch 예제입니다.'
-    },
-    {
-        title: 'default-switch-small',
-        code: `<OpsnowCommonSwitch
-  size="small"
-  checked={switchStates.default}
-  onChange={handleToggle('default')}
-/>`,
-        description: 'Default Switch (small) 예제입니다.'
-    },
-    {
-        title: 'disabled-default-switch',
-        code: `<OpsnowCommonSwitch
-  checked={switchStates.default}
-  onChange={handleToggle('default')}
-  disabled
-/>`,
-        description: 'Disabled Default Switch 예제입니다.'
-    },
-    {
-        title: 'primary-switch',
-        code: `<OpsnowCommonSwitch
-  checked={switchStates.primary}
-  onChange={handleToggle('primary')}
-  color="primary"
-/>`,
-        description: 'Primary Switch 예제입니다.'
-    },
-    {
-        title: 'secondary-switch',
-        code: `<OpsnowCommonSwitch
-  checked={switchStates.secondary}
-  onChange={handleToggle('secondary')}
-  color="secondary"
-/>`,
-        description: 'Secondary Switch 예제입니다.'
-    },
-    {
-        title: 'error-switch',
-        code: `<OpsnowCommonSwitch
-  checked={switchStates.error}
-  onChange={handleToggle('error')}
-  color="error"
-/>`,
-        description: 'Error Switch 예제입니다.'
-    },
-    {
-        title: 'warning-switch',
-        code: `<OpsnowCommonSwitch
-  checked={switchStates.warning}
-  onChange={handleToggle('warning')}
-  color="warning"
-/>`,
-        description: 'Warning Switch 예제입니다.'
-    },
-    {
-        title: 'info-switch',
-        code: `<OpsnowCommonSwitch
-  checked={switchStates.info}
-  onChange={handleToggle('info')}
-  color="info"
-/>`,
-        description: 'Info Switch 예제입니다.'
-    },
-    {
-        title: 'success-switch',
-        code: `<OpsnowCommonSwitch
-  checked={switchStates.success}
-  onChange={handleToggle('success')}
-  color="success"
-/>`,
-        description: 'Success Switch 예제입니다.'
-    }
-];
-export const ChipExamples = [
-    {
-        title: 'default-chip-with-avatar-click-delete',
-        code: `<OpsnowCommonChip
-  label="Primary"
-  color="default"
-  deleteIcon={<OpsnowCommonIcon size={18} iconName="CloseSm" />}
-  onClick={handleClickChip}
-  onDelete={handleDeleteCip}
-  avatar={<Avatar>OP</Avatar>}
-/>`,
-        description: 'Default Chips #1: avatar, click, delete 예제입니다.'
-    },
-    {
-        title: 'default-chip-with-avatar-click',
-        code: `<OpsnowCommonChip
-  label="Default"
-  color="default"
-  deleteIcon={<OpsnowCommonIcon size={18} iconName="CloseSm" />}
-  onClick={handleClickChip}
-  avatar={<Avatar>OP</Avatar>}
-/>`,
-        description: 'Default Chips #2: avatar와 click 예제입니다.'
-    },
-    {
-        title: 'default-chip-basic',
-        code: `<OpsnowCommonChip
-  label="Default"
-  color="default"
-/>`,
-        description: 'Default Chips #3: 기본 예제입니다.'
-    },
-    {
-        title: 'default-chip-deletable',
-        code: `<OpsnowCommonChip
-  label="Default"
-  color="default"
-  deleteIcon={<OpsnowCommonIcon size={18} iconName="CloseSm" />}
-  onDelete={handleDeleteCip}
-/>`,
-        description: 'Default Chips #4: deleteOnly 예제입니다.'
-    },
-    {
-        title: 'default-chip-disabled',
-        code: `<OpsnowCommonChip
-  label="Default"
-  color="default"
-  disabled
-/>`,
-        description: 'Default Chips #5: disabled 예제입니다.'
-    },
-    {
-        title: 'default-chip-small-with-avatar-click-delete',
-        code: `<OpsnowCommonChip
-  label="Default"
-  color="default"
-  size="small"
-  deleteIcon={<OpsnowCommonIcon size={18} iconName="CloseSm" />}
-  onClick={handleClickChip}
-  avatar={<Avatar>OP</Avatar>}
-/>`,
-        description: 'Default Chips #6 (small): avatar, click, delete 예제입니다.'
-    },
-    {
-        title: 'default-chip-small-basic',
-        code: `<OpsnowCommonChip
-  label="Default"
-  color="default"
-  size="small"
-/>`,
-        description: 'Default Chips #7 (small): 기본 예제입니다.'
-    },
-    {
-        title: 'default-chip-small-deletable',
-        code: `<OpsnowCommonChip
-  label="Default"
-  color="default"
-  size="small"
-  deleteIcon={<OpsnowCommonIcon size={18} iconName="CloseSm" />}
-  onDelete={handleDeleteCip}
-/>`,
-        description: 'Default Chips #8 (small): deleteOnly 예제입니다.'
-    },
-    {
-        title: 'outlined-chip-with-avatar-click-delete',
-        code: `<OpsnowCommonChip
-  label="Default"
-  color="default"
-  variant="outlined"
-  deleteIcon={<OpsnowCommonIcon size={18} iconName="CloseSm" />}
-  onClick={handleClickChip}
-  avatar={<Avatar>OP</Avatar>}
-/>`,
-        description: 'Outlined Variant #1: avatar, click, delete 예제입니다.'
-    },
-    {
-        title: 'outlined-chip-basic',
-        code: `<OpsnowCommonChip
-  label="Default"
-  color="default"
-  variant="outlined"
-/>`,
-        description: 'Outlined Variant #2: 기본 예제입니다.'
-    },
-    {
-        title: 'outlined-chip-deletable',
-        code: `<OpsnowCommonChip
-  label="Default"
-  color="default"
-  variant="outlined"
-  deleteIcon={<OpsnowCommonIcon size={18} iconName="CloseSm" />}
-  onDelete={handleDeleteCip}
-/>`,
-        description: 'Outlined Variant #3: deleteOnly 예제입니다.'
-    },
-    {
-        title: 'outlined-chip-disabled',
-        code: `<OpsnowCommonChip
-  label="Default"
-  color="default"
-  variant="outlined"
-  disabled
-/>`,
-        description: 'Outlined Variant #4: disabled 예제입니다.'
-    },
-    {
-        title: 'outlined-chip-small-with-avatar-click',
-        code: `<OpsnowCommonChip
-  label="Default"
-  color="default"
-  variant="outlined"
-  size="small"
-  deleteIcon={<OpsnowCommonIcon size={18} iconName="CloseSm" />}
-  onClick={handleClickChip}
-  avatar={<Avatar>OP</Avatar>}
-/>`,
-        description: 'Outlined Variant #5 (small): avatar, click 예제입니다.'
-    },
-    {
-        title: 'outlined-chip-small-basic',
-        code: `<OpsnowCommonChip
-  label="Default"
-  color="default"
-  variant="outlined"
-  size="small"
-/>`,
-        description: 'Outlined Variant #6 (small): 기본 예제입니다.'
-    },
-    {
-        title: 'outlined-chip-small-deletable',
-        code: `<OpsnowCommonChip
-  label="Default"
-  color="default"
-  variant="outlined"
-  size="small"
-  deleteIcon={<OpsnowCommonIcon size={18} iconName="CloseSm" />}
-  onDelete={handleDeleteCip}
-/>`,
-        description: 'Outlined Variant #7 (small): deleteOnly 예제입니다.'
-    },
-    {
-        title: 'outlined-chip-small-disabled',
-        code: `<OpsnowCommonChip
-  label="Default"
-  color="default"
-  variant="outlined"
-  size="small"
-  disabled
-/>`,
-        description: 'Outlined Variant #8 (small): disabled 예제입니다.'
-    }
-];
-export const TextFieldExamples = [
-    // 1) Basic TextFields
-    {
-        title: 'basic-standard-name',
-        code: `<OpsnowCommonTextField
-  placeholder="Enter your name"
-  adornmentLabel='less than'
-  value={name}
-  onChange={(e) => setName(e.target.value)}
-  variant="standard"
-/>`,
-        description: 'Name (standard) 예제입니다.'
-    },
-    {
-        title: 'basic-outlined-email',
-        code: `<OpsnowCommonTextField
-  placeholder="Enter your email"
-  value={email}
-  adornmentIconName='SearchMagnifier'
-  onChange={handleEmailChange}
-  helperText={emailHelperText}
-  error={!!emailHelperText && emailHelperText !== '이메일을 입력하세요'}
-  variant="outlined"
-/>`,
-        description: 'Email (outlined) 예제입니다.'
-    },
-    {
-        title: 'basic-filled-password',
-        code: `<OpsnowCommonTextField
-  placeholder="Password"
-  adornmentLabel='MB/M'
-  adornmentPosition='end'
-  type="password"
-  value={password}
-  onChange={(e) => setPassword(e.target.value)}
-  variant="filled"
-/>`,
-        description: 'Password (filled) 예제입니다.'
-    },
-    {
-        title: 'basic-outlined-password-preview',
-        code: `<OpsnowCommonTextField
-  placeholder="비밀번호를 입력하세요"
-  variant="outlined"
-  type={showPassword ? 'text' : 'password'}
-  value={password}
-  onChange={(e) => setPassword(e.target.value)}
-  InputProps={{
-    endAdornment: (
-      <InputAdornment position="end">
-        <IconButton
-          aria-label={showPassword ? '비밀번호 숨기기' : '비밀번호 보이기'}
-          onClick={handleToggleShow}
-          onMouseDown={handleMouseDown}
-          edge="end"
-        >
-          {showPassword ? <VisibilityOff /> : <Visibility />}
-        </IconButton>
-      </InputAdornment>
-    ),
-  }}
-/>`,
-        description: 'Password 미리보기 (outlined) 예제입니다.'
-    },
-    {
-        title: 'basic-outlined-readonly',
-        code: `<OpsnowCommonTextField
-  placeholder="Read Only"
-  value="Read only text"
-  inputProps={{ readOnly: true }}
-  variant="outlined"
-/>`,
-        description: 'Read Only (outlined) 예제입니다.'
-    },
-    {
-        title: 'basic-standard-number-only',
-        code: `<OpsnowCommonTextField
-  placeholder="Enter numbers only"
-  variant="standard"
-  type="number"
-  value={number}
-  onChange={(e) => setNumber(e.target.value.replace(/[^0-9]/g, ''))}
-  inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }}
-/>`,
-        description: 'Number Only (standard) 예제입니다.'
-    },
-    // 2) Error States
-    {
-        title: 'error-filled',
-        code: `<OpsnowCommonTextField
-  placeholder="Email"
-  error
-  variant="filled"
-/>`,
-        description: 'Filled Error 예제입니다.'
-    },
-    {
-        title: 'error-outlined',
-        code: `<OpsnowCommonTextField
-  placeholder="Password"
-  type="password"
-  error
-  variant="outlined"
-/>`,
-        description: 'Outlined Error 예제입니다.'
-    },
-    // 3) Disabled States
-    {
-        title: 'disabled-standard',
-        code: `<OpsnowCommonTextField
-  placeholder="Disabled Input"
-  variant="standard"
-  disabled
-/>`,
-        description: 'Standard Disabled 예제입니다.'
-    },
-    {
-        title: 'disabled-outlined',
-        code: `<OpsnowCommonTextField
-  placeholder="Disabled Input"
-  disabled
-  variant="outlined"
-/>`,
-        description: 'Outlined Disabled 예제입니다.'
-    },
-    {
-        title: 'disabled-filled',
-        code: `<OpsnowCommonTextField
-  placeholder="Disabled Input"
-  disabled
-  variant="filled"
-/>`,
-        description: 'Filled Disabled 예제입니다.'
-    },
-    {
-        title: 'disabled-with-value',
-        code: `<OpsnowCommonTextField
-  placeholder="Disabled with Value"
-  value="Can't edit this"
-  disabled
-  variant="outlined"
-/>`,
-        description: 'Disabled with Value 예제입니다.'
-    },
-    // 4) Additional Variants
-    {
-        title: 'variant-filled',
-        code: `<OpsnowCommonTextField
-  placeholder="Filled"
-  variant="filled"
-  value="Filled variant"
-/>`,
-        description: 'Filled 예제입니다.'
-    },
-    {
-        title: 'variant-outlined',
-        code: `<OpsnowCommonTextField
-  placeholder="Outlined"
-  variant="outlined"
-  value="Outlined variant"
-/>`,
-        description: 'Outlined 예제입니다.'
-    },
-    {
-        title: 'variant-medium-standard',
-        code: `<OpsnowCommonTextField
-  placeholder="Medium Size"
-  size="medium"
-  variant="standard"
-/>`,
-        description: 'Medium (standard) 예제입니다.'
-    },
-    {
-        title: 'variant-small-outlined',
-        code: `<OpsnowCommonTextField
-  placeholder="Small Size"
-  size="small"
-  variant="outlined"
-/>`,
-        description: 'Small (outlined) 예제입니다.'
-    }
-];
-export const AvatarExamples = [
-    // 1) Basic Avatars
-    {
-        title: 'basic-avatar-no-badge',
-        code: `<OpsnowCommonAvatar />`,
-        description: 'Basic Avatar (no badge) 예제입니다.'
-    },
-    {
-        title: 'basic-avatar-with-badge',
-        code: `<OpsnowCommonAvatar showBadge />`,
-        description: 'Basic Avatar with badge 예제입니다.'
-    },
-    // 2) Text Avatars
-    {
-        title: 'text-avatar-xsmall',
-        code: `<OpsnowCommonAvatar size="xsmall">홍길동</OpsnowCommonAvatar>`,
-        description: 'Text Avatar (xsmall) 예제입니다.'
-    },
-    {
-        title: 'text-avatar-small',
-        code: `<OpsnowCommonAvatar size="small">OpsNow</OpsnowCommonAvatar>`,
-        description: 'Text Avatar (small) 예제입니다.'
-    },
-    {
-        title: 'text-avatar-medium',
-        code: `<OpsnowCommonAvatar>옵스나우</OpsnowCommonAvatar>`,
-        description: 'Text Avatar (medium) 예제입니다.'
-    },
-    {
-        title: 'text-avatar-large',
-        code: `<OpsnowCommonAvatar size="large">Test Company</OpsnowCommonAvatar>`,
-        description: 'Text Avatar (large) 예제입니다.'
-    },
-    // 3) Avatars with OpsnowCommonIcon
-    {
-        title: 'icon-avatar-xsmall',
-        code: `<OpsnowCommonAvatar size="xsmall"><OpsnowCommonIcon iconName="CloudPlus" /></OpsnowCommonAvatar>`,
-        description: 'Avatar with OpsnowCommonIcon (xsmall) 예제입니다.'
-    },
-    {
-        title: 'icon-avatar-small',
-        code: `<OpsnowCommonAvatar size="small"><OpsnowCommonIcon iconName="CloudPlus" /></OpsnowCommonAvatar>`,
-        description: 'Avatar with OpsnowCommonIcon (small) 예제입니다.'
-    },
-    {
-        title: 'icon-avatar-medium',
-        code: `<OpsnowCommonAvatar><OpsnowCommonIcon iconName="CloudPlus" /></OpsnowCommonAvatar>`,
-        description: 'Avatar with OpsnowCommonIcon (medium) 예제입니다.'
-    },
-    {
-        title: 'icon-avatar-large',
-        code: `<OpsnowCommonAvatar size="large"><OpsnowCommonIcon iconName="CloudPlus" /></OpsnowCommonAvatar>`,
-        description: 'Avatar with OpsnowCommonIcon (large) 예제입니다.'
-    },
-    // 4) Different Variant & Colors
-    {
-        title: 'variant-avatar-circular-red',
-        code: `<OpsnowCommonAvatar
-  variant="circular"
-  size="medium"
-  sx={{ bgcolor: 'red', color: 'white' }}
->
-  홍gildong
-</OpsnowCommonAvatar>`,
-        description: 'Circular variant (red) 예제입니다.'
-    },
-    {
-        title: 'variant-avatar-rounded-green',
-        code: `<OpsnowCommonAvatar
-  variant="rounded"
-  size="medium"
-  sx={{ bgcolor: 'green', color: 'white' }}
->
-  OpsNow
-</OpsnowCommonAvatar>`,
-        description: 'Rounded variant (green) 예제입니다.'
-    },
-    {
-        title: 'variant-avatar-square-blue',
-        code: `<OpsnowCommonAvatar
-  variant="square"
-  size="medium"
-  sx={{ bgcolor: 'blue', color: 'white' }}
->
-  T스트
-</OpsnowCommonAvatar>`,
-        description: 'Square variant (blue) 예제입니다.'
-    },
-    // 5) Avatar with Image
-    {
-        title: 'image-avatar-sample',
-        code: `<OpsnowCommonAvatar alt="Sample Avatar" src={sampleImageUrl} />`,
-        description: 'Avatar with image 예제입니다.'
-    },
-    // 6) Various Sizes
-    {
-        title: 'image-avatar-xsmall',
-        code: `<OpsnowCommonAvatar alt="xsmall Avatar" src={sampleImageUrl} size="xsmall" />`,
-        description: 'Image Avatar (xsmall) 예제입니다.'
-    },
-    {
-        title: 'image-avatar-small',
-        code: `<OpsnowCommonAvatar alt="small Avatar" src={sampleImageUrl} size="small" />`,
-        description: 'Image Avatar (small) 예제입니다.'
-    },
-    {
-        title: 'image-avatar-medium',
-        code: `<OpsnowCommonAvatar alt="medium Avatar" src={sampleImageUrl} size="medium" />`,
-        description: 'Image Avatar (medium) 예제입니다.'
-    },
-    {
-        title: 'image-avatar-large',
-        code: `<OpsnowCommonAvatar alt="large Avatar" src={sampleImageUrl} size="large" />`,
-        description: 'Image Avatar (large) 예제입니다.'
-    },
-    // 7) Clickable Avatar
-    {
-        title: 'clickable-avatar',
-        code: `<OpsnowCommonAvatar
-  alt="Clickable Avatar"
-  src={sampleImageUrl}
-  onClick={() => { alert('Avatar clicked!') }}
-/>`,
-        description: 'Clickable Avatar 예제입니다.'
-    },
-    // 8) alt Property
-    {
-        title: 'avatar-no-exist-image-alt',
-        code: `<OpsnowCommonAvatar alt="Digital platform" src={noExistImageUrl} />`,
-        description: 'No Exist Image 예제입니다.'
-    }
-];
-export const CheckboxExamples = [
-    {
-        title: 'primary-checkbox-small',
-        code: `<OpsnowCommonCheckbox
-  color="primary"
-  checked={checkboxStates.primary}
-  onChange={handleCheckboxChange}
-  name="primary"
-  label="Primary (Small)"
-  size="small"
-/>`,
-        description: 'Primary Checkbox (small) 예제입니다.'
-    },
-    {
-        title: 'primary-checkbox-large',
-        code: `<OpsnowCommonCheckbox
-  color="primary"
-  checked={checkboxStates.primary}
-  onChange={handleCheckboxChange}
-  name="primary"
-  label="Primary (large)"
-  size="large"
-/>`,
-        description: 'Primary Checkbox (large) 예제입니다.'
-    },
-    {
-        title: 'secondary-checkbox',
-        code: `<OpsnowCommonCheckbox
-  color="secondary"
-  checked={checkboxStates.secondary}
-  onChange={handleCheckboxChange}
-  name="secondary"
-  label="Secondary"
-/>`,
-        description: 'Secondary Checkbox 예제입니다.'
-    },
-    {
-        title: 'error-checkbox',
-        code: `<OpsnowCommonCheckbox
-  color="error"
-  checked={checkboxStates.error}
-  onChange={handleCheckboxChange}
-  name="error"
-  label="Error"
-/>`,
-        description: 'Error Checkbox 예제입니다.'
-    },
-    {
-        title: 'success-checkbox',
-        code: `<OpsnowCommonCheckbox
-  color="success"
-  checked={checkboxStates.success}
-  onChange={handleCheckboxChange}
-  name="success"
-  label="Success"
-/>`,
-        description: 'Success Checkbox 예제입니다.'
-    },
-    {
-        title: 'warning-checkbox',
-        code: `<OpsnowCommonCheckbox
-  color="warning"
-  checked={checkboxStates.warning}
-  onChange={handleCheckboxChange}
-  name="warning"
-  label="Warning"
-/>`,
-        description: 'Warning Checkbox 예제입니다.'
-    },
-    {
-        title: 'info-checkbox',
-        code: `<OpsnowCommonCheckbox
-  color="info"
-  checked={checkboxStates.info}
-  onChange={handleCheckboxChange}
-  name="info"
-  label="Info"
-/>`,
-        description: 'Info Checkbox 예제입니다.'
-    },
-    {
-        title: 'default-checkbox',
-        code: `<OpsnowCommonCheckbox
-  checked={checkboxStates.default}
-  onChange={handleCheckboxChange}
-  name="default"
-  label="Default"
-/>`,
-        description: 'Default Checkbox 예제입니다.'
-    },
-    {
-        title: 'disabled-checkbox',
-        code: `<OpsnowCommonCheckbox
-  disabled
-  checked={checkboxStates.disabled}
-  onChange={handleCheckboxChange}
-  name="disabled"
-  label="Disabled"
-/>`,
-        description: 'Disabled Checkbox 예제입니다.'
-    },
-    {
-        title: 'parent-checkbox',
-        code: `<OpsnowCommonCheckbox
-  checked={checkboxStates.parent}
-  indeterminate={!checkboxStates.parent && (checkboxStates.child1 || checkboxStates.child2 || checkboxStates.child3)}
-  onChange={handleParentCheckboxChange}
-  name="parent"
-  label="Parent Checkbox"
-/>`,
-        description: 'Parent Checkbox 예제입니다.'
-    },
-    {
-        title: 'child1-checkbox',
-        code: `<OpsnowCommonCheckbox
-  checked={checkboxStates.child1}
-  onChange={handleChildCheckboxChange}
-  name="child1"
-  label="Child Checkbox 1"
-/>`,
-        description: 'Child Checkbox 1 예제입니다.'
-    },
-    {
-        title: 'child2-checkbox',
-        code: `<OpsnowCommonCheckbox
-  checked={checkboxStates.child2}
-  onChange={handleChildCheckboxChange}
-  name="child2"
-  label="Child Checkbox 2"
-/>`,
-        description: 'Child Checkbox 2 예제입니다.'
-    },
-    {
-        title: 'child3-checkbox',
-        code: `<OpsnowCommonCheckbox
-  checked={checkboxStates.child3}
-  onChange={handleChildCheckboxChange}
-  name="child3"
-  label="Child Checkbox 3"
-/>`,
-        description: 'Child Checkbox 3 예제입니다.'
-    }
-];
-export const RadioGroupExamples = [
-    {
-        title: 'primary-radio-group-small',
-        code: `<OpsnowCommonRadioGroup
-  options={options}
-  color="primary"
-  name="radio-buttons-primary"
-  defaultValue="option1"
-  row
-  size="small"
-/>`,
-        description: 'Primary RadioGroup (small) 예제입니다.'
-    },
-    {
-        title: 'primary-radio-group-large',
-        code: `<OpsnowCommonRadioGroup
-  options={options}
-  color="primary"
-  name="radio-buttons-primary"
-  defaultValue="option1"
-  row
-  size="large"
-/>`,
-        description: 'Primary RadioGroup (large) 예제입니다.'
-    },
-    {
-        title: 'secondary-radio-group',
-        code: `<OpsnowCommonRadioGroup
-  options={options}
-  color="secondary"
-  name="radio-buttons-secondary"
-  defaultValue="option1"
-  row
-/>`,
-        description: 'Secondary RadioGroup 예제입니다.'
-    },
-    {
-        title: 'error-radio-group',
-        code: `<OpsnowCommonRadioGroup
-  options={options}
-  color="error"
-  name="radio-buttons-error"
-  defaultValue="option1"
-  row
-/>`,
-        description: 'Error RadioGroup 예제입니다.'
-    },
-    {
-        title: 'success-radio-group',
-        code: `<OpsnowCommonRadioGroup
-  options={options}
-  color="success"
-  name="radio-buttons-success"
-  defaultValue="option1"
-  row
-/>`,
-        description: 'Success RadioGroup 예제입니다.'
-    },
-    {
-        title: 'warning-radio-group',
-        code: `<OpsnowCommonRadioGroup
-  options={options}
-  color="warning"
-  name="radio-buttons-warning"
-  defaultValue="option1"
-  row
-/>`,
-        description: 'Warning RadioGroup 예제입니다.'
-    },
-    {
-        title: 'info-radio-group',
-        code: `<OpsnowCommonRadioGroup
-  options={options}
-  color="info"
-  name="radio-buttons-info"
-  defaultValue="option1"
-  row
-/>`,
-        description: 'Info RadioGroup 예제입니다.'
-    },
-    {
-        title: 'default-radio-group',
-        code: `<OpsnowCommonRadioGroup
-  options={options}
-  color="default"
-  name="radio-buttons-default"
-  defaultValue="option1"
-  row
-/>`,
-        description: 'Default RadioGroup 예제입니다.'
-    }
-];
-export const CollapseExamples = [
-    {
-        title: 'default-collapse',
-        code: `<OpsnowCommonCollapse
-  label="Toggle ContentToggle ContentToggle ContentToggle ContentToggle ContentToggle ContentToggle ContentToggle ContentToggle Content"
->
-  <div>This is the content inside the collapse component.</div>
-</OpsnowCommonCollapse>`,
-        description: '기본 Collapse 예제입니다.'
-    },
-    {
-        title: 'controlled-collapse',
-        code: `<OpsnowCommonCollapse
-  label="Toggle ContentToggle ContentToggle ContentToggle ContentToggle ContentToggle ContentToggle ContentToggle ContentToggle Content"
-  defaultExpanded
->
-  <div>This is the content inside the collapse component.</div>
-</OpsnowCommonCollapse>`,
-        description: 'defaultExpanded 속성이 설정된 Collapse 예제입니다.'
-    }
-];
-export const SliderExamples = [
-    // 1) Continuous Sliders
-    {
-        title: 'continuous-slider-primary-medium',
-        code: `<OpsnowCommonSlider defaultValue={30} color="primary" size="medium" />`,
-        description: 'Continuous Slider (primary, medium) 예제입니다.'
-    },
-    {
-        title: 'continuous-slider-secondary-small',
-        code: `<OpsnowCommonSlider defaultValue={50} color="secondary" size="small" />`,
-        description: 'Continuous Slider (secondary, small) 예제입니다.'
-    },
-    // 2) Discrete Sliders
-    {
-        title: 'discrete-slider-primary-medium',
-        code: `<OpsnowCommonSlider
-  defaultValue={30}
-  color="primary"
-  size="medium"
-  step={10}
-  marks
-  valueLabelDisplay="auto"
-/>`,
-        description: 'Discrete Slider (primary, medium) 예제입니다.'
-    },
-    {
-        title: 'discrete-slider-secondary-small',
-        code: `<OpsnowCommonSlider
-  defaultValue={50}
-  color="secondary"
-  size="small"
-  step={10}
-  marks
-  valueLabelDisplay="auto"
-/>`,
-        description: 'Discrete Slider (secondary, small) 예제입니다.'
-    },
-    // 3) Range Sliders
-    {
-        title: 'range-slider-primary-medium',
-        code: `<OpsnowCommonSlider defaultValue={[20, 60]} color="primary" size="medium" />`,
-        description: 'Range Slider (primary, medium) 예제입니다.'
-    },
-    {
-        title: 'range-slider-secondary-small',
-        code: `<OpsnowCommonSlider defaultValue={[30, 70]} color="secondary" size="small" />`,
-        description: 'Range Slider (secondary, small) 예제입니다.'
-    },
-    // 4) Disabled Slider
-    {
-        title: 'disabled-continuous-slider',
-        code: `<OpsnowCommonSlider
-  defaultValue={30}
-  color="primary"
-  size="medium"
-  disabled
-/>`,
-        description: 'Disabled Continuous Slider 예제입니다.'
-    },
-    // 5) Range with Value Labels
-    {
-        title: 'range-slider-with-marks',
-        code: `<OpsnowCommonSlider
-  defaultValue={[80, 220]}
-  color="primary"
-  size="medium"
-  valueLabelDisplay="on"
-  marks={marks}
-  min={1}
-  max={300}
-/>`,
-        description: 'Range Slider with value labels 예제입니다.'
-    },
-    // 6) Custom Marks Slider
-    {
-        title: 'custom-marks-slider',
-        code: `<Box sx={{ width: 300, margin: '0 auto' }}>
-  <OpsnowCommonSlider
-    aria-label="Custom marks"
-    defaultValue={20}
-    getAriaValueText={valuetext}
-    step={10}
-    marks={temperatureMarks}
-    valueLabelDisplay="auto"
-    color="primary"
-    size="medium"
-  />
-</Box>`,
-        description: 'Custom Marks Slider 예제입니다.'
-    },
-    // 7) Vertical Sliders
-    {
-        title: 'vertical-slider-default',
-        code: `<OpsnowCommonSlider
-  orientation="vertical"
-  defaultValue={30}
-  color="primary"
-  size="medium"
-/>`,
-        description: 'Vertical Slider (default) 예제입니다.'
-    },
-    {
-        title: 'vertical-slider-disabled',
-        code: `<OpsnowCommonSlider
-  orientation="vertical"
-  defaultValue={30}
-  color="primary"
-  size="medium"
-  disabled
-/>`,
-        description: 'Vertical Slider (disabled) 예제입니다.'
-    },
-    {
-        title: 'vertical-slider-no-value',
-        code: `<OpsnowCommonSlider
-  orientation="vertical"
-  color="primary"
-  size="medium"
-/>`,
-        description: 'Vertical Slider (no value) 예제입니다.'
-    }
-];
-export const LinkExamples = [
-    {
-        title: 'primary-link-always-underline-click',
-        code: `<OpsnowCommonLink
-  href="#"
-  color="primary"
-  underline="always"
-  onClick={(event) => handleClick(event, 'Primary Link (Always underline)')}
->
-  Primary Link (Always underline)
-</OpsnowCommonLink>`,
-        description: 'Primary Link (Always underline) onClick 예제입니다.'
-    },
-    {
-        title: 'primary-link-hover-underline-click',
-        code: `<OpsnowCommonLink
-  href="#"
-  color="primary"
-  underline="hover"
-  onClick={(event) => handleClick(event, 'Primary Link (hover)')}
->
-  Primary Link (hover)
-</OpsnowCommonLink>`,
-        description: 'Primary Link (hover) onClick 예제입니다.'
-    },
-    {
-        title: 'primary-link-no-underline-click',
-        code: `<OpsnowCommonLink
-  href="#"
-  color="primary"
-  underline="none"
-  onClick={(event) => handleClick(event, 'Primary Link (No underline)')}
->
-  Primary Link (No underline)
-</OpsnowCommonLink>`,
-        description: 'Primary Link (No underline) onClick 예제입니다.'
-    },
-    {
-        title: 'inherit-link-always-underline',
-        code: `<OpsnowCommonLink
-  href="#"
-  color="inherit"
-  underline="always"
->
-  Inherit Link (Always underline)
-</OpsnowCommonLink>`,
-        description: 'Inherit Link (Always underline) 예제입니다.'
-    },
-    {
-        title: 'inherit-link-hover-underline',
-        code: `<OpsnowCommonLink
-  href="#"
-  color="inherit"
-  underline="hover"
->
-  Inherit Link (hover)
-</OpsnowCommonLink>`,
-        description: 'Inherit Link (hover) 예제입니다.'
-    },
-    {
-        title: 'inherit-link-no-underline',
-        code: `<OpsnowCommonLink
-  href="#"
-  color="inherit"
-  underline="none"
->
-  Inherit Link (No underline)
-</OpsnowCommonLink>`,
-        description: 'Inherit Link (No underline) 예제입니다.'
-    },
-    {
-        title: 'focusable-primary-link',
-        code: `<OpsnowCommonLink
-  href="#"
-  color="primary"
-  underline="always"
->
-  Focusable Primary Link
-</OpsnowCommonLink>`,
-        description: 'Focusable Primary Link 예제입니다.'
-    },
-    {
-        title: 'focusable-inherit-link',
-        code: `<OpsnowCommonLink
-  href="#"
-  color="inherit"
-  underline="none"
->
-  Focusable Inherit Link
-</OpsnowCommonLink>`,
-        description: 'Focusable Inherit Link 예제입니다.'
-    }
-];
-export const TreeViewExamples = [
-    {
-        title: 'basic-treeview-with-mui-icons',
-        code: `<OpsnowCommonTreeView
-  data={[
-    {
-      id: 'c1',
-      label: 'Settings',
-      muiIconName: 'settings',
-      children: [
-        {
-          id: 'c11',
-          label: 'Profile',
-          muiIconName: 'person',
-        },
-        {
-          id: 'c12',
-          label: 'Security',
-          muiIconName: 'lock',
-        },
-        {
-          id: 'c13',
-          label: 'Notifications',
-          muiIconName: 'notifications',
-        },
-      ],
-    },
-    {
-      id: 'c2',
-      label: 'Help',
-      muiIconName: 'help',
-      children: [
-        {
-          id: 'c21',
-          label: 'Documentation',
-          muiIconName: 'menu_book',
-        },
-        {
-          id: 'c22',
-          label: 'Support',
-          muiIconName: 'support_agent',
-        },
-      ],
-    },
-  ]}
-  onNodeClick={handleNodeClick}
-  selectedNodeId={selectedNode?.id}
-/>`,
-        description: 'Material-UI 아이콘을 사용한 기본 TreeView 예제입니다.'
-    },
-    {
-        title: 'treeview-no-search-no-total',
-        code: `<OpsnowCommonTreeView
-  data={treeData}
-  searchable={false}
-  showTotal={false}
-  defaultExpandAll={true}
-  onNodeClick={handleNodeClick}
-  selectedNodeId={selectedNode?.id}
-/>`,
-        description: '검색 기능과 Total 라벨을 숨긴 TreeView 예제입니다.'
-    },
-    {
-        title: 'treeview-with-total-label',
-        code: `<OpsnowCommonTreeView
-  data={treeData}
-  totalLabel="All Items"
-  totalIconName="FolderOpen"
-  onTotalClick={handleTotalClick}
-  onNodeClick={handleNodeClick}
-  selectedNodeId={selectedNode?.id}
-/>`,
-        description: 'Total 라벨과 아이콘이 있는 TreeView 예제입니다.'
-    },
-    {
-        title: 'treeview-with-render-content',
-        code: `<OpsnowCommonTreeView
-  data={treeData}
-  renderRightContent={(node) => (
-    <Chip label={node.count || 0} size="small" />
-  )}
-  onNodeClick={handleNodeClick}
-  selectedNodeId={selectedNode?.id}
-/>`,
-        description: '각 노드 우측에 커스텀 콘텐츠를 렌더링하는 TreeView 예제입니다.'
-    },
-    {
-        title: 'treeview-expanded-by-default',
-        code: `<OpsnowCommonTreeView
-  data={treeData}
-  defaultExpandAll={true}
-  searchable={true}
-  onNodeClick={handleNodeClick}
-  selectedNodeId={selectedNode?.id}
-/>`,
-        description: '기본적으로 모든 노드가 확장된 TreeView 예제입니다.'
-    },
-    {
-        title: 'treeview-cloud-providers',
-        code: `<OpsnowCommonTreeView
-  data={[
-    {
-      id: 'aws',
-      label: 'AWS',
-      muiIconName: 'cloud',
-      children: [
-        { id: 'ec2', label: 'EC2', muiIconName: 'storage' },
-        { id: 's3', label: 'S3', muiIconName: 'folder' },
-        { id: 'rds', label: 'RDS', muiIconName: 'database' },
-      ],
-    },
-    {
-      id: 'azure',
-      label: 'Azure',
-      muiIconName: 'cloud',
-      children: [
-        { id: 'vm', label: 'Virtual Machines', muiIconName: 'computer' },
-        { id: 'blob', label: 'Blob Storage', muiIconName: 'folder' },
-      ],
-    },
-    {
-      id: 'gcp',
-      label: 'GCP',
-      muiIconName: 'cloud',
-      children: [
-        { id: 'compute', label: 'Compute Engine', muiIconName: 'dns' },
-        { id: 'gcs', label: 'Cloud Storage', muiIconName: 'cloud_upload' },
-      ],
-    },
-  ]}
-  totalLabel="All Cloud Providers"
-  searchable={true}
-  onNodeClick={handleNodeClick}
-  selectedNodeId={selectedNode?.id}
-/>`,
-        description: '클라우드 프로바이더 트리 구조 예제입니다.'
-    },
-    {
-        title: 'treeview-with-checkbox-multiselect',
-        code: `<OpsnowCommonTreeView
-  data={sampleTreeData}
-  checkboxSelection={true}
-  multiSelect={true}
-  onCheckedItemsChange={handleMultiCheckedItemsChange}
-  defaultCheckedItems={multiCheckedItems}
-  showTotal={true}
-  totalLabel="Total"
-  totalIconName="Building"
-  searchable={false}
-  defaultExpandAll={true}
-/>`,
-        description: '체크박스와 다중 선택 기능이 있는 TreeView 예제입니다.'
-    },
-    {
-        title: 'treeview-checkbox-with-custom-content',
-        code: `<OpsnowCommonTreeView
-  data={sampleTreeData}
-  checkboxSelection={true}
-  multiSelect={true}
-  onCheckedItemsChange={handleMultiCheckedItemsChange}
-  defaultCheckedItems={multiCheckedItems}
-  showTotal={true}
-  totalLabel="Total"
-  totalIconName="Building"
-  onTotalClick={handleTotalClick}
-  renderTotalRightContent={() => (
-    <OpsnowCommonChip
-      label={\`\${String(sampleTreeData.length)} BU\`}
-      size="small"
-      sx={{
-        backgroundColor: 'white',
-        border: '1px solid',
-      }}
-    />
-  )}
-  searchable={false}
-  defaultExpandAll={true}
-  renderRightContent={(node) => (
-    <OpsnowCommonChip
-      label={
-        node.children && node.children.length > 0
-          ? \`\${String(node.children.length)} Teams\`
-          : String(node.data?.memberCount ?? '0')
-      }
-      size="small"
-      sx={{
-        backgroundColor: 'white',
-        border: '1px solid',
-      }}
-    />
-  )}
-/>`,
-        description: '체크박스, 커스텀 콘텐츠, Chip이 함께 사용된 TreeView 예제입니다.'
-    }
-];
-export const InsightCardExamples = [
-    {
-        title: 'basic-insight-card-with-loading',
-        code: `<Box sx={{ mt: 2 }}><OpsnowCommonInsightCard loading={loading} loadingStage={loadingStage} insightText={insightText} title="Opsnow Insight AI" subtitle="AI-powered cost analysis and recommendations" /></Box>`,
-        description: '로딩 상태와 AI insight 텍스트를 표시하는 InsightCard (타일 형태) 예제입니다.'
-    }
-];
-export const InsightContentExamples = [
-    {
-        title: 'basic-insight-content',
-        code: `<OpsnowCommonInsightContent
-  loading={loading}
-  loadingStage={loadingStage}
-  insightText={insightText}
-  collapsed={false}
-/>`,
-        description: '타일 없이 AI insight 콘텐츠만 표시하는 InsightContent 예제입니다.'
-    },
-    {
-        title: 'popup-content-rtf-download',
-        code: `// useCommonComponents에서 downloadInsightAsRtf 가져오기
-const { OpsnowCommonInsightContent, OpsnowCommonPopup, downloadInsightAsRtf } = useCommonComponents()
-
-// downloadInsightAsRtf 유틸리티로 RTF 파일 다운로드
-const handleDownload = useCallback(() => {
-  downloadInsightAsRtf({
-    text: popupInsightText,
-    title: 'AI_Insight',
-  })
-}, [downloadInsightAsRtf, popupInsightText])
-
-<OpsnowCommonPopup
-  open={popupOpen}
-  onClose={handleClosePopup}
-  title="AI Insight"
-  size="md"
->
-  <Box sx={{ maxHeight: '60vh', overflowY: 'auto', padding: '16px' }}>
-    <OpsnowCommonInsightContent
-      loading={popupLoading}
-      loadingStage={popupLoadingStage}
-      insightText={popupInsightText}
-      collapsed={false}
-      emptyMessage="AI 분석 버튼을 클릭하여 인사이트를 생성하세요"
-    />
-  </Box>
-</OpsnowCommonPopup>`,
-        description: '팝업에서 텍스트 콘텐츠를 표시하고 RTF 파일로 다운로드하는 예제입니다. downloadInsightAsRtf 유틸리티를 사용하면 어떤 텍스트든 RTF 문서로 내보낼 수 있습니다. [검색 키워드: RTF 다운로드, 콘텐츠 내보내기, 문서 저장, 텍스트 내보내기, 리포트 다운로드]'
-    }
-];
-export const ToggleButtonExamples = [
-    {
-        title: 'large-toggle-group',
-        code: `<OpsnowCommonToggleButtonGroup
-  value={alignmentLarge}
-  exclusive
-  onChange={handleAlignmentLarge}
-  size="large"
->
-  <OpsnowCommonToggleButton value="left">Left</OpsnowCommonToggleButton>
-  <OpsnowCommonToggleButton value="center">Center</OpsnowCommonToggleButton>
-  <OpsnowCommonToggleButton value="right">Right</OpsnowCommonToggleButton>
-</OpsnowCommonToggleButtonGroup>`,
-        description: 'Large size toggle button group 예제입니다.'
-    },
-    {
-        title: 'medium-toggle-group',
-        code: `<OpsnowCommonToggleButtonGroup
-  value={alignmentMedium}
-  exclusive
-  onChange={handleAlignmentMedium}
-  size="medium"
->
-  <OpsnowCommonToggleButton value="left">Left</OpsnowCommonToggleButton>
-  <OpsnowCommonToggleButton value="center">Center</OpsnowCommonToggleButton>
-  <OpsnowCommonToggleButton value="right">Right</OpsnowCommonToggleButton>
-</OpsnowCommonToggleButtonGroup>`,
-        description: 'Medium size toggle button group 예제입니다.'
-    },
-    {
-        title: 'small-toggle-group-icon',
-        code: `<OpsnowCommonToggleButtonGroup
-  value={alignmentSmall}
-  exclusive
-  onChange={handleAlignmentSmall}
-  size="small"
->
-  <OpsnowCommonToggleButton value="left">
-    <OpsnowCommonIcon size={16} iconName="SearchMagnifierChart" />
-    Left
-  </OpsnowCommonToggleButton>
-  <OpsnowCommonToggleButton value="center">Center</OpsnowCommonToggleButton>
-  <OpsnowCommonToggleButton value="right">Right</OpsnowCommonToggleButton>
-</OpsnowCommonToggleButtonGroup>`,
-        description: 'Small size toggle group with icon 예제입니다.'
-    },
-    {
-        title: 'medium-icon-text-theme-new',
-        code: `<OpsnowCommonToggleButtonGroup
-  value={iconAlignmentMedium}
-  exclusive
-  theme="new"
-  onChange={handleIconAlignmentMedium}
-  size="medium"
->
-  <OpsnowCommonToggleButton value="aws">
-    <OpsnowCommonIcon size={16} iconName="LogoAws" />
-    AWS
-  </OpsnowCommonToggleButton>
-  <OpsnowCommonToggleButton value="azure">
-    <OpsnowCommonIcon size={16} iconName="LogoAzure" />
-    Azure
-  </OpsnowCommonToggleButton>
-  <OpsnowCommonToggleButton value="gcp">
-    <OpsnowCommonIcon size={16} iconName="LogoGcp" />
-    GCP
-  </OpsnowCommonToggleButton>
-</OpsnowCommonToggleButtonGroup>`,
-        description: 'Medium size icon + text (theme="new") 예제입니다.'
-    },
-    {
-        title: 'medium-icon-only',
-        code: `<OpsnowCommonToggleButtonGroup
-  value={iconAlignmentMedium}
-  exclusive
-  onChange={handleIconAlignmentMedium}
-  size="medium"
->
-  <OpsnowCommonToggleButton value="aws">
-    <OpsnowCommonIcon size={16} iconName="LogoAws" />
-  </OpsnowCommonToggleButton>
-  <OpsnowCommonToggleButton value="azure">
-    <OpsnowCommonIcon size={16} iconName="LogoAzure" />
-  </OpsnowCommonToggleButton>
-  <OpsnowCommonToggleButton value="gcp">
-    <OpsnowCommonIcon size={16} iconName="LogoGcp" />
-  </OpsnowCommonToggleButton>
-</OpsnowCommonToggleButtonGroup>`,
-        description: 'Medium size icon only toggle buttons 예제입니다.'
-    },
-    {
-        title: 'medium-disabled-toggle-group',
-        code: `<OpsnowCommonToggleButtonGroup
-  value={disabledAlignment}
-  exclusive
-  onChange={handleDisabledAlignment}
-  size="medium"
-  disabled
->
-  <OpsnowCommonToggleButton value="left">Left</OpsnowCommonToggleButton>
-  <OpsnowCommonToggleButton value="center">Center</OpsnowCommonToggleButton>
-  <OpsnowCommonToggleButton value="right">Right</OpsnowCommonToggleButton>
-</OpsnowCommonToggleButtonGroup>`,
-        description: 'Medium size disabled toggle button group 예제입니다.'
-    }
-];