refactor: 품목기준관리 hooks 분리 및 다이얼로그 개선

- ItemMasterDataManagement 컴포넌트에서 hooks 분리
- 다이얼로그 컴포넌트들 타입 및 구조 개선
- BOMManagementSection 개선
- HierarchyTab 업데이트

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

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

src/components/items/ItemMasterDataManagement/dialogs/TemplateFieldDialog.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
@@ -87,7 +88,14 @@ export function TemplateFieldDialog({
   selectedMasterFieldId = '',
   setSelectedMasterFieldId,
 }: TemplateFieldDialogProps) {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  // 유효성 검사
+  const isNameEmpty = !templateFieldName.trim();
+  const isKeyEmpty = !templateFieldKey.trim();
+
   const handleClose = () => {
+    setIsSubmitted(false);
     setIsTemplateFieldDialogOpen(false);
     setEditingTemplateFieldId(null);
     setTemplateFieldName('');
@@ -230,7 +238,11 @@ export function TemplateFieldDialog({
                 value={templateFieldName}
                 onChange={(e) => setTemplateFieldName(e.target.value)}
                 placeholder="예: 품목명"
+                className={isSubmitted && isNameEmpty ? 'border-red-500 focus-visible:ring-red-500' : ''}
               />
+              {isSubmitted && isNameEmpty && (
+                <p className="text-xs text-red-500 mt-1">항목명을 입력해주세요</p>
+              )}
             </div>
             <div>
               <Label>필드 키 *</Label>
@@ -238,7 +250,11 @@ export function TemplateFieldDialog({
                 value={templateFieldKey}
                 onChange={(e) => setTemplateFieldKey(e.target.value)}
                 placeholder="예: itemName"
+                className={isSubmitted && isKeyEmpty ? 'border-red-500 focus-visible:ring-red-500' : ''}
               />
+              {isSubmitted && isKeyEmpty && (
+                <p className="text-xs text-red-500 mt-1">필드 키를 입력해주세요</p>
+              )}
             </div>
           </div>
 
@@ -334,8 +350,14 @@ export function TemplateFieldDialog({
           )}
         </div>
         <DialogFooter>
-          <Button variant="outline" onClick={() => setIsTemplateFieldDialogOpen(false)}>취소</Button>
-          <Button onClick={handleAddTemplateField}>
+          <Button variant="outline" onClick={handleClose}>취소</Button>
+          <Button onClick={() => {
+            setIsSubmitted(true);
+            const shouldValidate = templateFieldInputMode === 'custom' || editingTemplateFieldId || !setTemplateFieldInputMode;
+            if (shouldValidate && (isNameEmpty || isKeyEmpty)) return;
+            handleAddTemplateField();
+            setIsSubmitted(false);
+          }}>
             {editingTemplateFieldId ? '수정' : '추가'}
           </Button>
         </DialogFooter>