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/molecules/DateRangeSelector.tsx

@@ -4,6 +4,7 @@ import { ReactNode, useCallback } from 'react';
 import { format, startOfYear, endOfYear, subMonths, startOfMonth, endOfMonth, subDays } from 'date-fns';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { ScrollableButtonGroup } from '@/components/atoms/ScrollableButtonGroup';
 
 /**
  * 날짜 범위 프리셋 타입
@@ -126,24 +127,19 @@ export function DateRangeSelector({
   const renderPresets = () => {
     if (hidePresets || presets.length === 0) return null;
     return (
-      <div
-        className="overflow-x-auto -mx-1 px-1 xl:overflow-visible xl:mx-0 xl:px-0"
-        style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
-      >
-        <div className="flex items-center gap-1 min-w-max [&::-webkit-scrollbar]:hidden">
-          {presets.map((preset) => (
-            <Button
-              key={preset}
-              variant="outline"
-              size="sm"
-              onClick={() => handlePresetClick(preset)}
-              className="shrink-0 text-xs sm:text-sm px-2 sm:px-3"
-            >
-              {PRESET_LABELS[preset]}
-            </Button>
-          ))}
-        </div>
-      </div>
+      <ScrollableButtonGroup>
+        {presets.map((preset) => (
+          <Button
+            key={preset}
+            variant="outline"
+            size="sm"
+            onClick={() => handlePresetClick(preset)}
+            className="shrink-0 text-xs sm:text-sm px-2 sm:px-3"
+          >
+            {PRESET_LABELS[preset]}
+          </Button>
+        ))}
+      </ScrollableButtonGroup>
     );
   };
 

src/components/molecules/YearQuarterFilter.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { useMemo } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { ScrollableButtonGroup } from '@/components/atoms/ScrollableButtonGroup';
+import { cn } from '@/lib/utils';
+
+/** 분기 타입 */
+export type Quarter = 'Q1' | 'Q2' | 'Q3' | 'Q4';
+
+const QUARTER_OPTIONS = ['전체', 'Q1', 'Q2', 'Q3', 'Q4'] as const;
+
+function quarterLabel(q: typeof QUARTER_OPTIONS[number]): string {
+  return q === '전체' ? '전체' : `${q.replace('Q', '')}분기`;
+}
+
+interface YearQuarterFilterProps {
+  /** 선택된 연도 */
+  year: number;
+  /** 선택된 분기 ('전체' 포함) */
+  quarter: Quarter | '전체';
+  /** 연도 변경 핸들러 */
+  onYearChange: (year: number) => void;
+  /** 분기 변경 핸들러 */
+  onQuarterChange: (quarter: Quarter | '전체') => void;
+  /** 연도 범위 [시작, 끝] (default: [현재-5, 현재]) */
+  yearRange?: [number, number];
+  /** '전체' 옵션 포함 여부 (default: true) */
+  includeAll?: boolean;
+  className?: string;
+}
+
+/**
+ * 연도 Select + 분기 버튼 그룹 필터
+ *
+ * Controlled 컴포넌트. 연도/분기 state는 부모에서 관리.
+ */
+export function YearQuarterFilter({
+  year,
+  quarter,
+  onYearChange,
+  onQuarterChange,
+  yearRange,
+  includeAll = true,
+  className,
+}: YearQuarterFilterProps) {
+  const currentYear = new Date().getFullYear();
+  const [startYear, endYear] = yearRange ?? [currentYear - 5, currentYear];
+
+  const yearOptions = useMemo(() => {
+    const years: number[] = [];
+    for (let y = endYear; y >= startYear; y--) {
+      years.push(y);
+    }
+    return years;
+  }, [startYear, endYear]);
+
+  const quarters = includeAll ? QUARTER_OPTIONS : QUARTER_OPTIONS.slice(1);
+
+  return (
+    <div className={cn('flex items-center gap-2 flex-wrap min-w-0', className)}>
+      <Select value={String(year)} onValueChange={(v) => onYearChange(Number(v))}>
+        <SelectTrigger className="w-[100px] h-9 text-sm">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {yearOptions.map((y) => (
+            <SelectItem key={y} value={String(y)}>
+              {y}년
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      <ScrollableButtonGroup>
+        {quarters.map((q) => (
+          <Button
+            key={q}
+            size="sm"
+            variant={quarter === q ? 'default' : 'outline'}
+            className="h-8 px-3 text-xs shrink-0"
+            onClick={() => onQuarterChange(q)}
+          >
+            {quarterLabel(q)}
+          </Button>
+        ))}
+      </ScrollableButtonGroup>
+    </div>
+  );
+}

src/components/molecules/index.ts

@@ -7,4 +7,7 @@ export { TableActions } from "./TableActions";
 export type { TableAction } from "./TableActions";
 
 export { StandardDialog, ConfirmDialog, FormDialog } from "./StandardDialog";
-export type { StandardDialogProps, ConfirmDialogProps, FormDialogProps } from "./StandardDialog";
+export type { StandardDialogProps, ConfirmDialogProps, FormDialogProps } from "./StandardDialog";
+
+export { YearQuarterFilter } from "./YearQuarterFilter";
+export type { Quarter } from "./YearQuarterFilter";