@opsnow-mcp/opsnow-mcp-common-ui-server 1.0.31 → 1.0.32

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

@@ -59,6 +59,21 @@ export const SelectExamples = [
         title: 'outlined, size=small, label + placeholder, multiple (다중 선택)',
         code: `<OpsnowCommonSelect items={[{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }]} size="small" variant="outlined" multiple label="항목" placeholder="항목을 선택하세요" value={value} onChange={e => setValue(e.target.value)} />`,
         description: 'outlined variant, small 사이즈, label과 placeholder를 함께 사용하는 다중 선택 셀렉트 예제입니다.'
+    },
+    {
+        title: '필터 여러 개 배치 (간격 규칙: 필터 행 gap 24px, 라벨-필터 gap 8px)',
+        code: `<Stack sx={{ flexDirection: 'row', gap: '24px' }}>
+  <OpsnowCommonSelect items={vendorItems} size="small" variant="outlined" placeholder="벤더" value={vendor} onChange={e => setVendor(e.target.value)} />
+  <Stack sx={{ flexDirection: 'row', gap: '8px' }}>
+    <OpsnowCommonTypography variant="e-m8">계정 :</OpsnowCommonTypography>
+    <OpsnowCommonSelect items={accountItems} size="small" variant="outlined" placeholder="계정 선택" value={account} onChange={e => setAccount(e.target.value)} />
+  </Stack>
+  <Stack sx={{ flexDirection: 'row', gap: '8px' }}>
+    <OpsnowCommonTypography variant="e-m8">리전 :</OpsnowCommonTypography>
+    <OpsnowCommonSelect items={regionItems} size="small" variant="outlined" placeholder="리전 선택" value={region} onChange={e => setRegion(e.target.value)} />
+  </Stack>
+</Stack>`,
+        description: '한 화면에 필터를 여러 개 배치할 때의 간격 규칙 예제입니다. 필터 행 컨테이너의 gap은 무조건 24px, 라벨이 있는 필터는 라벨+필터를 gap 8px Stack으로 감싸며, 그 묶음과 앞 필터 사이는 동일하게 24px입니다. 간격은 spacing prop 대신 gap으로 지정합니다.'
     }
 ];
 // Autocomplete(오토컴플리트) 컴포넌트 예제 데이터
@@ -148,5 +163,24 @@ export const AutocompleteExamples = [
   <OpsnowCommonAutocomplete items={[{ value: '1', label: 'azure-subscription-9f8e7d6c-5b4a-3210-fedc-ba0987654321-management-group' }, { value: '2', label: 'Short option' }]} multiple disableCloseOnSelect value={value} onChange={setValue} useCheckboxOption useSelectAll dropdownMaxWidth={360} />
 </FormControl>`,
         description: 'dropdownMaxWidth prop으로 확장 최대 너비(px)를 지정하는 예제입니다. 드롭다운이 입력 필드보다 넓게 확장되되 지정한 너비(360px)로 제한되고, 그보다 긴 라벨은 줄바꿈됩니다.'
+    },
+    {
+        title: 'Autocomplete - 필터 여러 개 배치 (간격 규칙: 필터 행 gap 24px, 라벨-필터 gap 8px)',
+        code: `<Stack sx={{ flexDirection: 'row', gap: '24px' }}>
+  <OpsnowCommonAutocomplete items={vendorItems} multiple value={vendors} onChange={setVendors} useCheckboxOption useSelectAll label="벤더" />
+  <Stack sx={{ flexDirection: 'row', gap: '8px' }}>
+    <OpsnowCommonTypography variant="e-m8">계정 :</OpsnowCommonTypography>
+    <Box sx={{ minWidth: 200 }}>
+      <OpsnowCommonAutocomplete items={accountItems} multiple value={accounts} onChange={setAccounts} useCheckboxOption useSelectAll />
+    </Box>
+  </Stack>
+  <Stack sx={{ flexDirection: 'row', gap: '8px' }}>
+    <OpsnowCommonTypography variant="e-m8">서비스 :</OpsnowCommonTypography>
+    <Box sx={{ minWidth: 200 }}>
+      <OpsnowCommonAutocomplete items={serviceItems} value={service} onChange={setService} />
+    </Box>
+  </Stack>
+</Stack>`,
+        description: '한 화면에 필터를 여러 개 배치할 때의 간격 규칙 예제입니다. 필터 행 컨테이너의 gap은 무조건 24px, 라벨이 있는 필터는 라벨+필터를 gap 8px Stack으로 감싸며, 그 묶음과 앞 필터 사이는 동일하게 24px입니다. 간격은 spacing prop 대신 gap으로 지정하고, Autocomplete는 Box(minWidth)로 최소 폭을 확보합니다. Select와 Autocomplete를 섞어 배치할 때도 같은 규칙이 적용됩니다.'
     }
 ];

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

@@ -55,6 +55,15 @@ export function createSelectComponent() {
       - multiple, placeholder, variant, size, error, disabled 등 다양한 props 지원
       - value/onChange는 단일/다중 선택에 따라 배열 또는 단일 값
 
+      **필터 배치 간격 규칙 (한 화면에 필터 여러 개 배치 시 무조건 적용):**
+      - 필터를 감싸는 행(row) 컨테이너의 gap은 무조건 24px:
+        <Stack sx={{ flexDirection: 'row', gap: '24px' }}>
+      - "계정 : <필터>"처럼 라벨이 붙는 경우 라벨+필터를 gap 8px Stack으로 감쌈:
+        <Stack sx={{ flexDirection: 'row', gap: '8px' }}>
+      - 라벨이 있는 필터도 앞 필터와의 간격은 동일하게 24px (라벨+필터 묶음 전체가 하나의 필터로 취급됨)
+      - 간격은 spacing prop이 아니라 gap으로 지정
+      - 필터가 많아 화면 폭을 넘칠 수 있으면 행 컨테이너에 flexWrap: 'wrap' 추가 (선택)
+
       **import:**
       \`\`\`javascript
       import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
@@ -99,6 +108,15 @@ export function createSelectComponent() {
       - multiple, useCheckboxOption, useSelectAll, disableCloseOnSelect, loading 등 다양한 props 지원
       - value/onChange는 단일/다중 선택에 따라 배열 또는 단일 값
 
+      **필터 배치 간격 규칙 (한 화면에 필터 여러 개 배치 시 무조건 적용):**
+      - 필터를 감싸는 행(row) 컨테이너의 gap은 무조건 24px:
+        <Stack sx={{ flexDirection: 'row', gap: '24px' }}>
+      - "계정 : <필터>"처럼 라벨이 붙는 경우 라벨+필터를 gap 8px Stack으로 감쌈:
+        <Stack sx={{ flexDirection: 'row', gap: '8px' }}>
+      - 라벨이 있는 필터도 앞 필터와의 간격은 동일하게 24px (라벨+필터 묶음 전체가 하나의 필터로 취급됨)
+      - 간격은 spacing prop이 아니라 gap으로 지정
+      - 필터가 많아 화면 폭을 넘칠 수 있으면 행 컨테이너에 flexWrap: 'wrap' 추가 (선택)
+
       **import:**
       \`\`\`javascript
       import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';

package/build/index.js

@@ -84,6 +84,29 @@ Before implementing OpsnowCommonDataGrid, you MUST use getUIExamples tool with '
 
    Reference example: "Search + Pagination"
 
+**CRITICAL: Filter Layout Spacing Rules (Select/Autocomplete)**
+
+When placing multiple filters (Select/Autocomplete) in one row, the gap values are MANDATORY:
+
+   [CORRECT] Row container MUST have gap 24px, label+filter group MUST have gap 8px:
+   <Stack sx={{ flexDirection: 'row', gap: '24px' }}>
+     <OpsnowCommonSelect ... />
+     <Stack sx={{ flexDirection: 'row', gap: '8px' }}>
+       <OpsnowCommonTypography variant="e-m8">계정 :</OpsnowCommonTypography>
+       <OpsnowCommonAutocomplete ... />
+     </Stack>
+   </Stack>
+
+   [FORBIDDEN] DO NOT place filters without gap:
+   <Stack direction="row">        <- gap 누락 금지!
+     <OpsnowCommonSelect ... />
+     <OpsnowCommonSelect ... />
+   </Stack>
+
+   - Adjacent filters: 24px gap (gap style, NOT spacing prop)
+   - Label and its filter: 8px gap (wrap label+filter in one Stack)
+   - A labeled group counts as ONE filter — still 24px from the previous filter
+
 WARNING: Violating these rules will cause the UI to malfunction.`
 });
 // createXxx 툴 정의 수집 (등록 여부는 모드에 따라 결정)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opsnow-mcp/opsnow-mcp-common-ui-server",
-  "version": "1.0.31",
+  "version": "1.0.32",
   "type": "module",
   "main": "index.js",
   "bin": {