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/app/[locale]/(protected)/quality/qms/components/AuditSettingsPanel.tsx

@@ -197,7 +197,7 @@ export function SettingsButton({ onClick }: SettingsButtonProps) {
     <button
       type="button"
       onClick={onClick}
-      className="flex items-center gap-2 px-4 py-2.5 text-sm text-white bg-white/10 border border-white/20 rounded-lg hover:bg-white/20 transition-colors"
+      className="flex items-center gap-2 px-3 sm:px-4 py-2 sm:py-2.5 text-xs sm:text-sm text-white bg-white/10 border border-white/20 rounded-lg hover:bg-white/20 transition-colors whitespace-nowrap"
     >
       <Settings className="h-4 w-4" />
       <span>화면 설정</span>

src/app/[locale]/(protected)/quality/qms/components/Filters.tsx

@@ -2,13 +2,14 @@
 
 import React from 'react';
 import { Search } from 'lucide-react';
+import { YearQuarterFilter, type Quarter } from '@/components/molecules/YearQuarterFilter';
 
 interface FiltersProps {
   selectedYear: number;
-  selectedQuarter: string;
+  selectedQuarter: Quarter | '전체';
   searchTerm: string;
   onYearChange: (year: number) => void;
-  onQuarterChange: (quarter: string) => void;
+  onQuarterChange: (quarter: Quarter | '전체') => void;
   onSearchChange: (term: string) => void;
 }
 
@@ -20,48 +21,16 @@ export const Filters = ({
   onQuarterChange,
   onSearchChange,
 }: FiltersProps) => {
-  const quarters = ['전체', '1분기', '2분기', '3분기', '4분기'];
-  const years = [2025, 2024, 2023, 2022, 2021];
-
   return (
     <div className="w-full bg-white p-3 sm:p-4 rounded-lg mb-3 sm:mb-4 shadow-sm">
       {/* 상단: 년도/분기 선택 */}
       <div className="flex flex-wrap items-end gap-3 sm:gap-4 mb-3 sm:mb-4">
-        {/* Year Selection */}
-        <div className="flex flex-col gap-1">
-          <span className="text-xs font-semibold text-gray-500">년도</span>
-          <div className="w-28 sm:w-32">
-            <select
-              value={selectedYear}
-              onChange={(e) => onYearChange(parseInt(e.target.value))}
-              className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-            >
-              {years.map((year) => (
-                <option key={year} value={year}>{year}년</option>
-              ))}
-            </select>
-          </div>
-        </div>
-
-        {/* Quarter Selection */}
-        <div className="flex flex-col gap-1">
-          <span className="text-xs font-semibold text-gray-500">분기</span>
-          <div className="flex bg-gray-100 rounded-md p-1 gap-1 overflow-x-auto">
-            {quarters.map((q) => (
-              <button
-                key={q}
-                onClick={() => onQuarterChange(q)}
-                className={`px-3 sm:px-4 py-1.5 text-sm rounded-sm transition-all whitespace-nowrap ${
-                  selectedQuarter === q
-                    ? 'bg-blue-600 text-white shadow-sm'
-                    : 'text-gray-600 hover:bg-gray-200'
-                }`}
-              >
-                {q}
-              </button>
-            ))}
-          </div>
-        </div>
+        <YearQuarterFilter
+          year={selectedYear}
+          quarter={selectedQuarter}
+          onYearChange={onYearChange}
+          onQuarterChange={onQuarterChange}
+        />
       </div>
 
       {/* 하단: 검색 입력 + 버튼 */}
@@ -85,4 +54,4 @@ export const Filters = ({
       </div>
     </div>
   );
-};
+};

src/app/[locale]/(protected)/quality/qms/components/Header.tsx

@@ -6,13 +6,13 @@ interface HeaderProps {
 
 export const Header = ({ rightContent }: HeaderProps) => {
     return (
-        <div className="w-full bg-[#1e3a8a] text-white p-3 sm:p-6 rounded-lg mb-3 sm:mb-4 shadow-md flex items-center justify-between h-16 sm:h-24">
-            <div className="flex flex-col justify-center">
-                <h1 className="text-lg sm:text-2xl font-bold mb-0.5 sm:mb-1">품질인정심사 시스템</h1>
-                <p className="text-xs sm:text-sm opacity-80 text-blue-100">SAM - Smart Automation Management</p>
+        <div className="w-full bg-[#1e3a8a] text-white p-3 sm:p-6 rounded-lg mb-3 sm:mb-4 shadow-md flex items-center justify-between gap-3">
+            <div className="flex flex-col justify-center min-w-0">
+                <h1 className="text-base sm:text-2xl font-bold mb-0.5 sm:mb-1 truncate">품질인정심사 시스템</h1>
+                <p className="text-xs sm:text-sm opacity-80 text-blue-100 truncate">SAM - Smart Automation Management</p>
             </div>
             {rightContent && (
-                <div className="flex items-center">
+                <div className="flex items-center shrink-0">
                     {rightContent}
                 </div>
             )}

src/app/[locale]/(protected)/quality/qms/page.tsx

@@ -49,7 +49,7 @@ export default function QualityInspectionPage() {
 
   // 2일차(로트추적) 필터 상태
   const [selectedYear, setSelectedYear] = useState(2025);
-  const [selectedQuarter, setSelectedQuarter] = useState<string>('전체');
+  const [selectedQuarter, setSelectedQuarter] = useState<'Q1' | 'Q2' | 'Q3' | 'Q4' | '전체'>('전체');
   const [searchTerm, setSearchTerm] = useState('');
 
   // 2일차 선택 상태
@@ -153,7 +153,7 @@ export default function QualityInspectionPage() {
     return MOCK_REPORTS.filter((report) => {
       if (report.year !== selectedYear) return false;
       if (selectedQuarter !== '전체') {
-        const quarterNum = parseInt(selectedQuarter.replace('분기', ''));
+        const quarterNum = parseInt(selectedQuarter.replace('Q', ''));
         if (report.quarterNum !== quarterNum) return false;
       }
       if (searchTerm) {
@@ -198,7 +198,7 @@ export default function QualityInspectionPage() {
     setSelectedRoute(null);
   };
 
-  const handleQuarterChange = (quarter: string) => {
+  const handleQuarterChange = (quarter: 'Q1' | 'Q2' | 'Q3' | 'Q4' | '전체') => {
     setSelectedQuarter(quarter);
     setSelectedReport(null);
     setSelectedRoute(null);