feat(WEB): QMS 필터 리팩토링 및 공통 컴포넌트 추가

- ScrollableButtonGroup 아톰 컴포넌트 신규 추가
- YearQuarterFilter 분자 컴포넌트 신규 추가
- QMS Filters 컴포넌트 공통 필터로 리팩토링
- QMS Header, AuditSettingsPanel 수정
- DateRangeSelector 개선
- PerformanceReportList 필터 간소화
- ItemMasterDataManagement 수정
- CLAUDE.md 프로젝트 설정 업데이트

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/atoms/ScrollableButtonGroup.tsx

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+import { cn } from '@/lib/utils';
+
+const GAP_MAP = {
+  sm: 'gap-0.5',
+  md: 'gap-1',
+  lg: 'gap-2',
+} as const;
+
+const SCROLL_UNTIL_MAP = {
+  sm: 'sm:overflow-visible',
+  md: 'md:overflow-visible',
+  lg: 'lg:overflow-visible',
+  xl: 'xl:overflow-visible',
+} as const;
+
+interface ScrollableButtonGroupProps {
+  children: ReactNode;
+  /** 버튼 간격 (default: 'md') */
+  gap?: keyof typeof GAP_MAP;
+  /** 이 breakpoint 이상에서 스크롤 해제 (default: 'xl') */
+  scrollUntil?: keyof typeof SCROLL_UNTIL_MAP;
+  className?: string;
+}
+
+/**
+ * 가로 스크롤 버튼 컨테이너
+ *
+ * 좁은 화면에서 overflow-x-auto + 히든 스크롤바,
+ * scrollUntil breakpoint 이상에서 일반 레이아웃 전환.
+ */
+export function ScrollableButtonGroup({
+  children,
+  gap = 'md',
+  scrollUntil = 'xl',
+  className,
+}: ScrollableButtonGroupProps) {
+  return (
+    <div
+      className={cn(
+        'overflow-x-auto min-w-0',
+        SCROLL_UNTIL_MAP[scrollUntil],
+        className,
+      )}
+      style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+    >
+      <div className={cn('flex items-center min-w-max [&::-webkit-scrollbar]:hidden', GAP_MAP[gap])}>
+        {children}
+      </div>
+    </div>
+  );
+}

src/components/atoms/index.ts

@@ -2,4 +2,6 @@ export { BadgeSm, getQuoteStatusBadge } from "./BadgeSm";
 export type { BadgeSmVariant } from "./BadgeSm";
 
 export { TabChip } from "./TabChip";
-export type { TabChipProps } from "./TabChip";
+export type { TabChipProps } from "./TabChip";
+
+export { ScrollableButtonGroup } from "./ScrollableButtonGroup";