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/ColumnDialog.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';
@@ -31,9 +32,24 @@ export function ColumnDialog({
   textboxColumns,
   setTextboxColumns,
 }: ColumnDialogProps) {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  // 유효성 검사
+  const isNameEmpty = !columnName.trim();
+  const isKeyEmpty = !columnKey.trim();
+
+  const handleClose = () => {
+    setIsColumnDialogOpen(false);
+    setEditingColumnId(null);
+    setColumnName('');
+    setColumnKey('');
+    setIsSubmitted(false);
+  };
+
   const handleSubmit = () => {
-    if (!columnName.trim() || !columnKey.trim()) {
-      return toast.error('모든 필드를 입력해주세요');
+    setIsSubmitted(true);
+    if (isNameEmpty || isKeyEmpty) {
+      return;
     }
 
     if (editingColumnId) {
@@ -54,20 +70,14 @@ export function ColumnDialog({
       toast.success('컬럼이 추가되었습니다');
     }
 
-    setIsColumnDialogOpen(false);
-    setEditingColumnId(null);
-    setColumnName('');
-    setColumnKey('');
+    handleClose();
+    setIsSubmitted(false);
   };
 
   return (
     <Dialog open={isColumnDialogOpen} onOpenChange={(open) => {
-      setIsColumnDialogOpen(open);
-      if (!open) {
-        setEditingColumnId(null);
-        setColumnName('');
-        setColumnKey('');
-      }
+      if (!open) handleClose();
+      else setIsColumnDialogOpen(open);
     }}>
       <DialogContent>
         <DialogHeader>
@@ -83,7 +93,11 @@ export function ColumnDialog({
               value={columnName}
               onChange={(e) => setColumnName(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>
@@ -91,11 +105,15 @@ export function ColumnDialog({
               value={columnKey}
               onChange={(e) => setColumnKey(e.target.value)}
               placeholder="예: width"
+              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>
         <DialogFooter>
-          <Button variant="outline" onClick={() => setIsColumnDialogOpen(false)}>취소</Button>
+          <Button variant="outline" onClick={handleClose}>취소</Button>
           <Button onClick={handleSubmit}>
             {editingColumnId ? '수정' : '추가'}
           </Button>