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

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

@@ -0,0 +1,72 @@
+// Icons 컴포넌트 예제 데이터
+export const IconExamples = [
+    {
+        title: '기본 아이콘',
+        code: `<OpsnowCommonIcon iconName="CloudAi" />`,
+        description: 'CloudAi 아이콘 예제입니다.'
+    },
+    {
+        title: '색상 아이콘',
+        code: `<OpsnowCommonIcon iconName="CloudAi" color="red" />`,
+        description: '색상이 적용된 CloudAi 아이콘 예제입니다.'
+    },
+    {
+        title: 'AiBot 아이콘',
+        code: `<OpsnowCommonIcon iconName="AiBot" />`,
+        description: 'AI/기술 카테고리의 AiBot 아이콘 예제입니다.'
+    },
+    {
+        title: '알림 아이콘',
+        code: `<OpsnowCommonIcon iconName="AlertWarningCircleFilled" />`,
+        description: '알림/경고 카테고리의 AlertWarningCircleFilled 아이콘 예제입니다.'
+    },
+    {
+        title: '화살표 아이콘',
+        code: `<OpsnowCommonIcon iconName="ArrowRight" />`,
+        description: '화살표 카테고리의 ArrowRight 아이콘 예제입니다.'
+    },
+    {
+        title: '문서 추가 아이콘',
+        code: `<OpsnowCommonIcon iconName="DocumentPlus" />`,
+        description: '문서/파일 카테고리의 DocumentPlus 아이콘 예제입니다.'
+    },
+    {
+        title: '사용자 아이콘',
+        code: `<OpsnowCommonIcon iconName="UserCircle" />`,
+        description: '사용자 카테고리의 UserCircle 아이콘 예제입니다.'
+    }
+];
+export const MuiIconExamples = [
+    {
+        title: '닫기 MUI 아이콘',
+        code: `<OpsnowCommonMuiIcon theme="close" size={24} />`,
+        description: 'MUI 닫기 아이콘 예제입니다.'
+    },
+    {
+        title: '메뉴 MUI 아이콘',
+        code: `<OpsnowCommonMuiIcon theme="menu" size={24} />`,
+        description: 'MUI 메뉴 아이콘 예제입니다.'
+    },
+    {
+        title: '검색 MUI 아이콘',
+        code: `<OpsnowCommonMuiIcon theme="search" size={24} />`,
+        description: 'MUI 검색 아이콘 예제입니다.'
+    }
+];
+export const MarkersExamples = [
+    {
+        title: '정사각 마커',
+        code: `<OpsnowCommonMarkers theme="square" />`,
+        description: '정사각형 마커 예제입니다.'
+    },
+    {
+        title: '선 그래프 마커',
+        code: `<OpsnowCommonMarkers theme="line-graph" />`,
+        description: '선 그래프용 마커 예제입니다.'
+    },
+    {
+        title: '트렌드 마커',
+        code: `<OpsnowCommonMarkers theme="line-trend" />`,
+        description: '트렌드 그래프용 마커 예제입니다.'
+    }
+];

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

@@ -0,0 +1,97 @@
+// OpsNow Common Layout(Grid) 컴포넌트 예제 데이터
+export const GridLayoutExamples = [
+    {
+        title: '4열 그리드 레이아웃',
+        description: 'Wrap="nowrap"와 고정 패딩·간격을 적용한 4열 레이아웃 예제입니다.',
+        code: `
+<Grid container wrap="nowrap" spacing={0} sx={{ padding: '27px', gap: '27px' }}>
+  <Grid item xs={12} sm={6} md={3} key={0}>
+    <Box sx={{
+      border: '1px solid #ddd',
+      borderRadius: '12px',
+      padding: 2,
+      display: 'flex',
+      flexDirection: 'column',
+      boxShadow: '2px 2px 8px 0 #4254663D',
+    }}>
+    </Box>
+  </Grid>
+  <!-- 총 4개 아이템 반복 -->
+  <!-- ... -->
+</Grid>
+`,
+    },
+    {
+        title: '2열 그리드 레이아웃',
+        description: '2개의 박스를 한 줄에 배치하는 예제입니다.',
+        code: `
+<Grid container wrap="nowrap" spacing={0} sx={{ padding: '27px', gap: '27px' }}>
+  <Grid item xs={12} md={6} key={0}>
+    <Box sx={{ /* 동일한 스타일 */ }}>
+    </Box>
+  </Grid>
+  <Grid item xs={12} md={6} key={1}>
+    <Box sx={{ /* 동일한 스타일 */ }}>
+    </Box>
+  </Grid>
+</Grid>
+`,
+    },
+    {
+        title: '3열 그리드 레이아웃',
+        description: '3개의 박스를 한 줄에 배치하는 예제입니다.',
+        code: `
+<Grid container wrap="nowrap" spacing={0} sx={{ padding: '27px', gap: '27px' }}>
+  <Grid item xs={12} md={4} key={0}>
+    <Box sx={{ /* 동일한 스타일 */ }}>
+    </Box>
+  </Grid>
+  <Grid item xs={12} md={4} key={1}>
+    <Box sx={{ /* 동일한 스타일 */ }}>
+    </Box>
+  </Grid>
+  <Grid item xs={12} md={4} key={2}>
+    <Box sx={{ /* 동일한 스타일 */ }}>
+    </Box>
+  </Grid>
+</Grid>
+`,
+    },
+    {
+        title: 'Tile with Checkbox UI',
+        description: 'Tile 내부에 체크박스와 텍스트가 포함된 2열 레이아웃 예제입니다.',
+        code: `<Grid container spacing={3} sx={{ marginTop: '20px' }}><Grid item xs={12} md={6} sx={{ display: 'flex' }}><OpsnowCommonTile sx={{ width: '100%' }}><OpsnowCommonTile.Content><Stack direction="row" alignItems="flex-start" spacing={2}><OpsnowCommonCheckbox name="organizationScope" checked={checkboxStates.organizationScope} onChange={handleCheckboxChange} color="primary" /><Stack spacing={1}><OpsnowCommonTypography variant="body1" fontWeight={600}>Use Organization Scope(Cost Allocation)</OpsnowCommonTypography><OpsnowCommonTypography variant="body2" color="textSecondary">The same scope defined in Organization Settings is used as the baseline for Budget and KPI tracking.</OpsnowCommonTypography></Stack></Stack></OpsnowCommonTile.Content></OpsnowCommonTile></Grid><Grid item xs={12} md={6} sx={{ display: 'flex' }}><OpsnowCommonTile sx={{ width: '100%' }}><OpsnowCommonTile.Content><Stack direction="row" alignItems="flex-start" spacing={2}><OpsnowCommonCheckbox name="customizeScope" checked={checkboxStates.customizeScope} onChange={handleCheckboxChange} color="primary" /><Stack spacing={1}><OpsnowCommonTypography variant="body1" fontWeight={600}>Customize Scope</OpsnowCommonTypography><OpsnowCommonTypography variant="body2" color="textSecondary">Apply only to selected dimensions, such as specific services (e.g., EC2)</OpsnowCommonTypography></Stack></Stack></OpsnowCommonTile.Content></OpsnowCommonTile></Grid></Grid>`,
+    },
+];
+export const MegaFilterExamples = [
+    {
+        title: 'basic-megafilter-with-vendors-daterange',
+        description: '벤더 선택, 날짜 범위, 필터 기능이 포함된 MegaFilter 예제입니다.',
+        code: `<OpsnowCommonMegaFilter filters={filters} vendors={vendors} selectedVendor={selectedVendor} onVendorChange={handleVendorChange} onFilterChange={handleFilterChange} selectedDateRange={selectedDateRange} onDateRangeChange={handleDateRangeChange} locale="ko" title="필터" clearAllText="전체 초기화" applyText="적용" cancelText="취소" />`,
+    },
+    {
+        title: 'megafilter-button-click-apply',
+        description: '버튼 클릭 시 필터를 적용하는 방식의 MegaFilter 예제입니다. addText로 개별 필터 추가 버튼 텍스트를 설정하고, onFilterChange를 async로 처리합니다.',
+        code: `<OpsnowCommonMegaFilter
+  filters={sampleFilters}
+  vendors={vendorOptions}
+  selectedVendor={selectedVendor}
+  onVendorChange={(vendor) => setSelectedVendor(vendor)}
+  onFilterChange={async (newFilterState) => {
+    await fetchData(newFilterState);
+    setFilterState(newFilterState);
+  }}
+  selectedDateRange={selectedDateRange}
+  onDateRangeChange={(range) => setSelectedDateRange(range)}
+  locale="en"
+  title="Filters"
+  clearAllText="Clear All"
+  clearText="Clear"
+  applyText="Apply"
+  addText="Add"
+  cancelText="Cancel"
+  searchPlaceholder="Search..."
+  noItemsText="No items found"
+/>`,
+    },
+];

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

@@ -0,0 +1,78 @@
+// Notification 컴포넌트 예제 데이터
+export const NotificationExamples = [
+    {
+        title: "success",
+        code: `<OpsnowCommonNotification severity="success" ></OpsnowCommonNotification>`,
+        description: "성공 알림 기본 예제입니다.",
+    },
+    {
+        title: "success-title-message",
+        code: `<OpsnowCommonNotification severity="success" useTitle title="성공">작업이 완료되었습니다.</OpsnowCommonNotification>`,
+        description: "제목과 메시지를 포함한 성공 알림 예제입니다.",
+    },
+    {
+        title: "error-title-message",
+        code: `<OpsnowCommonNotification severity="error"useTitle title="에러">문제가 발생했습니다.</OpsnowCommonNotification>`,
+        description: "제목과 메시지를 포함한 에러 알림 예제입니다.",
+    },
+    {
+        title: "error-title-message-closable",
+        code: `<OpsnowCommonNotification severity="error" useTitle title="에러" onClose={() => setOpenError(false)}>문제가 발생했습니다.</OpsnowCommonNotification>`,
+        description: "닫기 버튼이 없는 에러 알림 예제입니다.",
+    },
+    {
+        title: "error-title-message-action",
+        code: `<OpsnowCommonNotification severity="error" useTitle title="에러" action={<OpsnowCommonButton label="확인" />} >문제가 발생했습니다.</OpsnowCommonNotification>`,
+        description: "액션 버튼이 있는 에러 알림 예제입니다.",
+    },
+    {
+        title: "success-title-message-action",
+        code: `<OpsnowCommonNotification severity="success" useTitle title="성공" action={<OpsnowCommonButton label="확인" />} >작업이 완료되었습니다.</OpsnowCommonNotification>`,
+        description: "액션 버튼이 있는 성공 알림 예제입니다.",
+    },
+    {
+        title: "success-closable-action-isCustom",
+        code: `<OpsnowCommonNotification severity="success" onClose={() => setOpenSuccess(false)} customActionBtn={<OpsnowCommonButton label="확인" />} ></OpsnowCommonNotification>`,
+        description: "커스텀 액션 버튼이 있는 에러 알림 예제입니다.",
+    },
+    {
+        title: "success-closable-action-isCustom",
+        code: `<OpsnowCommonNotification severity="success" onClose={() => setOpenSuccess(false)} customActionBtn={<OpsnowCommonButton label="확인"/>} ></OpsnowCommonNotification>`,
+        description: "커스텀 액션 버튼이 있는 성공 알림 예제입니다.",
+    },
+    {
+        title: "info-closable-action-isCustom",
+        code: `<OpsnowCommonNotification severity="info" onClose={() => setOpenSuccess(false)} customActionBtn={<OpsnowCommonButton label="확인" />} ></OpsnowCommonNotification>`,
+        description: "커스텀 액션 버튼이 있는 인포 알림 예제입니다.",
+    },
+    {
+        title: "info-card-bgWhite",
+        code: `<OpsnowCommonNotification severity="info" placement="card" bgWhite ></OpsnowCommonNotification>`,
+        description: "흰 배경(bgWhite)의 카드 형태의 인포 알림 예제입니다. ",
+    },
+    {
+        title: "error-card-bgWhite",
+        code: `<OpsnowCommonNotification severity="error" placement="card" ></OpsnowCommonNotification>`,
+        description: "하얀 배경(bgWhite)의 카드 형태의 에러 알림 예제입니다. ",
+    },
+    {
+        title: "infoSuccess-page-bgWhite-message-title",
+        code: `<OpsnowCommonNotification severity="infoSuccess" placement="page" useTitle title="성공" >성공했습니다.</OpsnowCommonNotification>`,
+        description: "모서리가 둥근 형태의 회색 배경의 왼쪽 컬러 라인과 아이콘이 초록색인 성공 알림 예제입니다.",
+    },
+    {
+        title: "infoWarning-page-message-title",
+        code: `<OpsnowCommonNotification severity="infoWarning" placement="page" useTitle title="경고" >경고입니다.</OpsnowCommonNotification>`,
+        description: "모서리가 둥근 형태의 회색 배경의 왼쪽 컬러 라인과 아이콘이 주황색인 경고 알림 예제입니다.",
+    },
+    {
+        title: "infoError-page-message-title",
+        code: `<OpsnowCommonNotification severity="infoError" placement="page" useTitle title="에러">에러입니다.</OpsnowCommonNotification>`,
+        description: "모서리가 둥근 형태의 회색 배경의 왼쪽 컬러 라인과 아이콘이 빨간색인 에러 알림 예제입니다.",
+    },
+    {
+        title: "info-page-message-title",
+        code: `<OpsnowCommonNotification severity="info" placement="page" useTitle title="정보" >정보입니다.</OpsnowCommonNotification>`,
+        description: "모서리가 둥근 형태의 회색 배경의 컬러라인이 없는 정보 알림 예제입니다.",
+    }
+];

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

@@ -0,0 +1,82 @@
+// Pagination 컴포넌트 예제 데이터
+export const PaginationExamples = [
+    {
+        title: "page-count",
+        code: `<OpsnowCommonPagination page={1} count={100} />`,
+        description: "기본 페이지네이션 예제입니다.",
+    },
+    {
+        title: "page-count-small",
+        code: `<OpsnowCommonPagination page={1} count={100} size="small" />`,
+        description: "크기가 작은 페이지네이션 예제입니다.",
+    },
+    {
+        title: "page-count-medium",
+        code: `<OpsnowCommonPagination page={1} count={100} size="medium" />`,
+        description: "크기가 중간인 페이지네이션 예제입니다.",
+    },
+    {
+        title: "page-count-rowsPerPage",
+        code: `<OpsnowCommonPagination page={1} count={100} rowsPerPage={10} />`,
+        description: "한 번에 10개씩 보여주는 페이지네이션 예제입니다.",
+    },
+    {
+        title: "page-count-rowsPerPage-list",
+        code: `<OpsnowCommonPagination page={1} count={100} rowsPerPage={10} count={list.length} list = {list}/>`,
+        description: "한 페이지당 10개씩 페이지네이션으로 표시하는 예제입니다.",
+    },
+    {
+        title: "page-count-rowsPerPage-rowsPerPageOptions",
+        code: `<OpsnowCommonPagination page={1} count={100} rowsPerPage={rowsPerPage} rowsPerPageOptions={[
+            { value: '10', label: '10 per Page' },
+            { value: '5', label: '5 per Page' },
+          ]} />`,
+        description: "rowsPerPage 옵션을 설정하고 옵션에 따라 페이지네이션 옵션이 변경되는 예제입니다.",
+    },
+    {
+        title: "page-count-rowsPerPage-locale",
+        code: `<OpsnowCommonPagination page={1} count={100} rowsPerPage={10} locale={i18n.getLocale()} />`,
+        description: "언어 설정을 받아오고 한 번에 10개씩 보여주는 페이지네이션 예제입니다.",
+    },
+    {
+        title: "page-count-rowsPerPage-locale",
+        code: `<OpsnowCommonPagination page={1} count={100} rowsPerPage={10} locale={i18n.getLocale()} />`,
+        description: "언어 설정을 받아오고 한 번에 10개씩 보여주는 페이지네이션 예제입니다.",
+    },
+    {
+        title: "page-count-onChangePageNum",
+        code: `<OpsnowCommonPagination page={1} count={100} onChangePageNum = {(pageNum) => {
+      console.log('페이지 번호가', pageNum, '으로 변경되었습니다.')
+    }} />`,
+        description: "페이지 번호가 변경되었을때 핸들러 함수를 설정하는 기본 예제입니다.",
+    },
+    {
+        title: "page-count-onChangePageSize",
+        code: `<OpsnowCommonPagination page={1} count={100} onChangePageSize = {(pageSize, pageNum) => {
+    console.log('페이지당 항목 수가', pageSize, '로 변경되었습니다.')
+  }} />`,
+        description: "페이지당 항목 수나 페이지 번호가 변경되었을때 핸들러 함수를 설정하는 기본 예제입니다.",
+    },
+    {
+        title: "page-count-onNext",
+        code: `<OpsnowCommonPagination page={1} count={100} onNext = {(pageNum) => {
+    console.log('다음 페이지로 이동, 현재 페이지:', pageNum)
+  }} />`,
+        description: "다음 페이지로 이동할때 핸들러 함수를 설정하는 기본 예제입니다.",
+    },
+    {
+        title: "page-count-onPrevious",
+        code: `<OpsnowCommonPagination page={1} count={100} onPrevious = {(pageNum) => {
+    console.log('이전 페이지로 이동, 현재 페이지:', pageNum)
+  }} />`,
+        description: "이전 페이지로 이동할때 핸들러 함수를 설정하는 기본 예제입니다.",
+    },
+    {
+        title: "page-count-onPageChange",
+        code: `<OpsnowCommonPagination page={1} count={100} onPageChange = {(pageData) => {
+    setCurrentPageData(pageData)
+    console.log('Current Page Data:', pageData)
+  }} />`,
+        description: "페이지 데이터가 변경되었을때 핸들러 함수를 설정하는 기본 예제입니다.",
+    },
+];

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

@@ -0,0 +1,205 @@
+// Popup 컴포넌트 예제 데이터
+export const PopupExamples = [
+    {
+        title: '기본 팝업',
+        code: `<OpsnowCommonPopup title="팝업" open={true} onClose={handleClose}>
+  <p>Popup content here</p>
+</OpsnowCommonPopup>`,
+        description: '가장 기본적인 팝업 예제입니다.'
+    },
+    {
+        title: 'Wing 타입, 작은 사이즈',
+        code: `<OpsnowCommonPopup title="Wing Popup" open={true} onClose={handleClose} size="sm" type="wing">
+  <p>Popup content here</p>
+</OpsnowCommonPopup>`,
+        description: 'wing 타입과 작은 사이즈(sm)를 사용하는 팝업 예제입니다.'
+    },
+    {
+        title: 'Standard 타입, 큰 사이즈',
+        code: `<OpsnowCommonPopup title="Standard Popup" open={true} onClose={handleClose} size="lg" type="standard">
+  <p>Popup content here</p>
+</OpsnowCommonPopup>`,
+        description: 'standard 타입과 큰 사이즈(lg)를 사용하는 팝업 예제입니다.'
+    },
+    {
+        title: 'Footer 버튼 커스텀',
+        code: `<OpsnowCommonPopup title="Footer Custom" open={true} onClose={handleClose} footer={[{ text: '확인', type: 'primary', action: 'onConfirm' }, { text: '취소', type: 'default', action: 'onCancel' }]}>
+  <p>Popup content here</p>
+</OpsnowCommonPopup>`,
+        description: 'footer prop을 통해 하단 버튼을 커스텀하는 예제입니다.'
+    },
+    {
+        title: 'Closable/MaskClosable 옵션',
+        code: `<OpsnowCommonPopup title="Closable Popup" open={true} onClose={handleClose} closable={false} maskClosable={false}>
+  <p>Popup content here</p>
+</OpsnowCommonPopup>`,
+        description: '닫기 버튼과 마스크 클릭으로 닫기 비활성화 예제입니다.'
+    },
+    {
+        title: 'Position(위치) 지정',
+        code: `<OpsnowCommonPopup title="Bottom Popup" open={true} onClose={handleClose} position="bottom">
+  <p>Popup content here</p>
+</OpsnowCommonPopup>`,
+        description: '팝업 위치를 bottom으로 지정한 예제입니다.'
+    },
+    {
+        title: 'Wing 타입, 작은 사이즈 + cancel/confirm + disableEscapeKeyDown',
+        code: `<OpsnowCommonPopup
+  title="Example Popup"
+  open={true}
+  onClose={handleClose}
+  size="sm"
+  cancelButton={{ variant: 'outlined' }}
+  confirmButton={{ color: 'primary', text: 'Save' }}
+  type="wing"
+  disableEscapeKeyDown
+>
+  <p>Popup content here</p>
+</OpsnowCommonPopup>`,
+        description: 'wing 타입, 작은 사이즈(sm)에 cancel/confirm 버튼과 disableEscapeKeyDown 옵션을 적용한 예제입니다.'
+    },
+    {
+        title: 'Wing 타입, md, Special Title & Footer Action Button',
+        code: `<OpsnowCommonPopup
+  title="Example Popup"
+  open={true}
+  onClose={handleClose}
+  size="md"
+  useFooterActionBtn
+  useSpecialTitle
+  actionButton={{ disabled: true }}
+  type="wing"
+>
+  <p>Popup content here</p>
+</OpsnowCommonPopup>`,
+        description: 'wing 타입의 기본 크기(md)에서 Special Title과 Footer Action Button(disabled)을 사용하는 예제입니다.'
+    },
+    {
+        title: 'Wing 타입, 큰 사이즈',
+        code: `<OpsnowCommonPopup
+  title="Example Popup"
+  open={true}
+  onClose={handleClose}
+  size="lg"
+  type="wing"
+>
+  <p>Popup content here</p>
+</OpsnowCommonPopup>`,
+        description: 'wing 타입과 큰 사이즈(lg)를 사용하는 팝업 예제입니다.'
+    },
+    {
+        title: 'Wing 타입, hideFooter',
+        code: `<OpsnowCommonPopup
+  title="Example Popup"
+  open={true}
+  onClose={handleClose}
+  hideFooter
+  type="wing"
+>
+  <p>Popup content here</p>
+</OpsnowCommonPopup>`,
+        description: 'wing 타입에서 footer를 숨기는 예제입니다.'
+    },
+    {
+        title: 'Wing 타입, hideHeaderClose',
+        code: `<OpsnowCommonPopup
+  title="Example Popup"
+  open={true}
+  onClose={handleClose}
+  hideHeaderClose
+  type="wing"
+>
+  <p>Popup content here</p>
+</OpsnowCommonPopup>`,
+        description: 'wing 타입에서 헤더 우측 닫기 버튼을 숨기는 예제입니다.'
+    },
+    {
+        title: 'Standard 타입, 작은 사이즈 + 커스텀 헤더/푸터',
+        code: `<OpsnowCommonPopup
+  title="Example Popup"
+  open={true}
+  onClose={handleClose}
+  size="sm"
+  confirmButton={{ color: 'error', variant: 'text' }}
+  useCustomHeader
+  useCustomFooter
+  headerContent={<div style={{ padding: '20px', backgroundColor: '#f0f0f0' }}><h2>Custom Header</h2></div>}
+  footerContent={<div style={{ padding: '20px', backgroundColor: '#f0f0f0' }}><button onClick={handleClose}>Cancel</button></div>}
+>
+  <p>Popup content here</p>
+</OpsnowCommonPopup>`,
+        description: 'standard 타입, 작은 사이즈(sm)에서 커스텀 헤더와 푸터를 사용하는 예제입니다.'
+    },
+    {
+        title: 'useCustomFooter + 버튼 추가',
+        code: `<OpsnowCommonPopup
+  open={showPopup}
+  title={\`결과 상세: \${popupTitle}\`}
+  size="lg"
+  onClose={() => setShowPopup(false)}
+  useCustomFooter
+  footerContent={
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'flex-end',
+        gap: '8px',
+        marginRight: '43px',
+        marginBottom: '16px',
+        marginTop: '16px',
+      }}
+    >
+      <OpsnowCommonButton
+        label="닫기"
+        variant="contained"
+        color="primary"
+        onClick={() => setShowPopup(false)}
+      />
+    </div>
+  }
+>
+  <p>Popup content here</p>
+</OpsnowCommonPopup>`,
+        description: 'useCustomFooter를 사용하여 커스텀 버튼을 추가한 예제입니다.'
+    },
+    {
+        title: 'Standard 타입, hideFooter',
+        code: `<OpsnowCommonPopup
+  title="Example Popup"
+  open={true}
+  onClose={handleClose}
+  type="standard"
+  hideFooter
+>
+  <p>Popup content here</p>
+</OpsnowCommonPopup>`,
+        description: 'standard 타입에서 footer를 숨기는 예제입니다.'
+    },
+    {
+        title: 'Bottom 타입, cancel/confirm 버튼',
+        code: `<OpsnowCommonPopup
+  title="Example Popup"
+  open={true}
+  onClose={handleClose}
+  cancelButton={{ variant: 'outlined' }}
+  confirmButton={{ color: 'primary', text: 'Save' }}
+  type="bottom"
+>
+  <p>Popup content here</p>
+</OpsnowCommonPopup>`,
+        description: 'bottom 타입에서 cancelButton과 confirmButton을 사용하는 예제입니다.'
+    },
+    {
+        title: '고정 크기(width/height)',
+        code: `<OpsnowCommonPopup
+  title="Size Popup"
+  open={true}
+  onClose={handleClose}
+  width={400}
+  height={300}
+>
+  <p>Popup content here</p>
+</OpsnowCommonPopup>`,
+        description: '팝업의 너비와 높이를 고정(px)으로 지정하는 예제입니다.'
+    }
+];

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

@@ -0,0 +1,86 @@
+// Progress 컴포넌트 예제 데이터
+export const ProgressExamples = [
+    {
+        title: "value",
+        code: `<OpsnowCommonProgress value={50} />`,
+        description: "50% 진행률을 보여주는 기본 Progress 예제입니다.",
+    },
+    {
+        title: "value-size",
+        code: `<OpsnowCommonProgress value={50} size={32}/>`,
+        description: "사이즈가 32이고 value가 50인 기본 Progress 예제입니다.",
+    },
+    {
+        title: "value-inherit",
+        code: `<OpsnowCommonProgress value={75} color="inherit" />`,
+        description: "색상이 inherit이고 75% 진행률 Progress 예제입니다.",
+    },
+    {
+        title: "buffer-value-valueBuffer",
+        code: `<OpsnowCommonProgress variant="buffer" value={50} valueBuffer={25} />`,
+        description: "버퍼 추가 진행률을 보여주는 Progress 예제입니다.",
+    },
+    {
+        title: "value-label",
+        code: `<OpsnowCommonProgress value={50} label />`,
+        description: "퍼센트 정보를 표시하는 Progress 예제입니다.",
+    },
+    {
+        title: "indeterminate-label",
+        code: `<OpsnowCommonProgress variant="indeterminate" color="primary" />`,
+        description: "primary 색상의 무한 로딩 Progress 바 예제입니다.",
+    },
+    {
+        title: "value-label-determinate-secondary",
+        code: `<OpsnowCommonProgress value = {50} variant="determinate" label color="secondary" />`,
+        description: "50% 진행률인 secondary 색상의 고정 Progress 예제입니다. 퍼센트 정보를 표시합니다.",
+    },
+];
+// Loading 컴포넌트 예제 데이터
+export const LoadingExamples = [
+    {
+        title: "loadingDots-dotSize",
+        code: `<OpsnowCommonLoading loadingDots dotSize={32}/>`,
+        description: "dot 형태 Progress 의 dotSize가 32인 예제입니다.",
+    },
+    {
+        title: "indeterminate",
+        code: `<OpsnowCommonLoading variant="indeterminate" />`,
+        description: "무한 로딩 Progress 예제입니다.",
+    },
+    {
+        title: "determinate-value",
+        code: `<OpsnowCommonLoading variant="determinate" value={50} />`,
+        description: "고정 상태의 로딩 예제입니다.",
+    },
+    {
+        title: "isFullScreen-open",
+        code: `<OpsnowCommonLoading isFullScreen open = {false} " />`,
+        description: "전체 화면 로딩 Progress 예제입니다. open이 true 일때 해당 컴포넌트가 보입니다. 추가로 button을 활용하여 컴포넌트를 이용할 수 있습니다.",
+    },
+    {
+        title: "isFullScreen-open",
+        code: `<OpsnowCommonLoading value = {50} isFullScreen open = {false} " />`,
+        description: "전체 화면 로딩 Progress 예제입니다. open이 true 일때 해당 컴포넌트가 보입니다. 추가로 button을 활용하여 컴포넌트를 이용할 수 있습니다.",
+    },
+    {
+        title: "label-value",
+        code: `<OpsnowCommonLoading label value={50} />`,
+        description: "value값을 보고 싶을때 사용합니다.",
+    },
+    {
+        title: "primary-determinate-value",
+        code: `<OpsnowCommonLoading color="primary" variant="determinate" value={50} />`,
+        description: "색상을 primary, 고정인 로딩 상태의 퍼센트가 50% 인 예제입니다.",
+    },
+    {
+        title: "secondary-determinate-value",
+        code: `<OpsnowCommonLoading color="secondary" variant="determinate" value={50} />`,
+        description: "색상을 secondary, 고정인 로딩 상태의 퍼센트가 50% 인 예제입니다.",
+    },
+    {
+        title: "inherit-determinate-value",
+        code: `<OpsnowCommonLoading color="secondary" variant="determinate" value={50} />`,
+        description: "색상을 inherit, 고정인 로딩 상태의 퍼센트가 50% 인 예제입니다.",
+    },
+];