refactor: 리스트 컴포넌트 UI 및 레이아웃 일관성 개선

- 여러 관리 페이지(영업, 회계, 인사, 결재, 게시판, 설정)의 리스트 UI 통일
- IntegratedListTemplateV2 기반 레이아웃 정리
- PricingHistoryDialog 개선
- 공통 컴포넌트 추출 계획 문서 추가

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

src/components/approval/ReferenceBox/index.tsx

@@ -372,26 +372,26 @@ export function ReferenceBox() {
 
   // ===== 헤더 액션 (DateRangeSelector + 열람/미열람 버튼) =====
   const headerActions = (
-    <DateRangeSelector
-      startDate={startDate}
-      endDate={endDate}
-      onStartDateChange={setStartDate}
-      onEndDateChange={setEndDate}
-      extraActions={
-        selectedItems.size > 0 && (
-          <>
-            <Button variant="default" onClick={handleMarkReadClick}>
-              <Eye className="h-4 w-4 mr-2" />
-              열람
-            </Button>
-            <Button variant="outline" onClick={handleMarkUnreadClick}>
-              <EyeOff className="h-4 w-4 mr-2" />
-              미열람
-            </Button>
-          </>
-        )
-      }
-    />
+    <>
+      <DateRangeSelector
+        startDate={startDate}
+        endDate={endDate}
+        onStartDateChange={setStartDate}
+        onEndDateChange={setEndDate}
+      />
+      {selectedItems.size > 0 && (
+        <div className="ml-auto flex gap-2">
+          <Button variant="default" onClick={handleMarkReadClick}>
+            <Eye className="h-4 w-4 mr-2" />
+            열람
+          </Button>
+          <Button variant="outline" onClick={handleMarkUnreadClick}>
+            <EyeOff className="h-4 w-4 mr-2" />
+            미열람
+          </Button>
+        </div>
+      )}
+    </>
   );
 
   // ===== 테이블 헤더 액션 (필터 + 정렬 셀렉트) =====