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

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

@@ -0,0 +1,1715 @@
+// 각 컴포넌트별 예제 정보 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 버튼 예제입니다.'
+    },
+    // === Loading examples ===
+    {
+        title: 'loading-contained-primary',
+        code: `<OpsnowCommonButton label="Save" loading onClick={handleSave} />`,
+        description: 'Contained Primary 버튼의 로딩 상태 예제입니다.'
+    },
+    {
+        title: 'loading-outlined-primary',
+        code: `<OpsnowCommonButton label="Submit" variant="outlined" loading onClick={handleSubmit} />`,
+        description: 'Outlined Primary 버튼의 로딩 상태 예제입니다.'
+    },
+    {
+        title: 'loading-text-primary',
+        code: `<OpsnowCommonButton label="Load More" variant="text" loading onClick={handleLoadMore} />`,
+        description: 'Text Primary 버튼의 로딩 상태 예제입니다.'
+    }
+];
+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 예제입니다.'
+    }
+];