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

- ItemMasterDataManagement 컴포넌트에서 hooks 분리 - 다이얼로그 컴포넌트들 타입 및 구조 개선 - BOMManagementSection 개선 - HierarchyTab 업데이트 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-26 14:06:48 +09:00
parent 593644922a
commit b73603822b
25 changed files with 3559 additions and 1703 deletions
--- a/src/components/items/ItemMasterDataManagement/dialogs/ColumnDialog.tsx
+++ b/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>
--- a/src/components/items/ItemMasterDataManagement/dialogs/FieldDialog.tsx
+++ b/src/components/items/ItemMasterDataManagement/dialogs/FieldDialog.tsx
@@ -1,5 +1,6 @@
 'use client';

+import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -121,7 +122,14 @@ export function FieldDialog({
  setColumnName,
  setColumnKey,
 }: FieldDialogProps) {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  // 유효성 검사
+  const isNameEmpty = !newFieldName.trim();
+  const isKeyEmpty = !newFieldKey.trim();
+
  const handleClose = () => {
+    setIsSubmitted(false);
    onOpenChange(false);
    setEditingFieldId(null);
    setFieldInputMode('custom');
@@ -268,7 +276,11 @@ export function FieldDialog({
                  value={newFieldName}
                  onChange={(e) => setNewFieldName(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>
@@ -276,7 +288,11 @@ export function FieldDialog({
                  value={newFieldKey}
                  onChange={(e) => setNewFieldKey(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>

@@ -402,7 +418,12 @@ export function FieldDialog({
        </div>
        <DialogFooter className="shrink-0 bg-white z-10 px-6 py-4 border-t">
          <Button variant="outline" onClick={handleClose}>취소</Button>
-          <Button onClick={handleAddField}>저장</Button>
+          <Button onClick={() => {
+            setIsSubmitted(true);
+            if ((fieldInputMode === 'custom' || editingFieldId) && (isNameEmpty || isKeyEmpty)) return;
+            handleAddField();
+            setIsSubmitted(false);
+          }}>저장</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
--- a/src/components/items/ItemMasterDataManagement/dialogs/FieldDrawer.tsx
+++ b/src/components/items/ItemMasterDataManagement/dialogs/FieldDrawer.tsx
@@ -189,21 +189,22 @@ export function FieldDrawer({
                    <div
                      key={field.id}
                      className={`p-3 border rounded cursor-pointer transition-colors ${
-                        selectedMasterFieldId === field.id
+                        selectedMasterFieldId === String(field.id)
                          ? 'bg-blue-50 border-blue-300'
                          : 'hover:bg-gray-50'
                      }`}
                      onClick={() => {
-                        setSelectedMasterFieldId(field.id);
-                        setNewFieldName(field.name);
-                        setNewFieldKey(field.fieldKey);
-                        setNewFieldInputType(field.property.inputType);
-                        setNewFieldRequired(field.property.required);
+                        setSelectedMasterFieldId(String(field.id));
+                        setNewFieldName(field.field_name);
+                        setNewFieldKey(`field_${field.id}`);
+                        setNewFieldInputType(field.field_type);
+                        setNewFieldRequired((field.properties as any)?.required ?? false);
                        setNewFieldDescription(field.description || '');
-                        setNewFieldOptions(field.property.options?.join(', ') || '');
-                        if (field.property.multiColumn && field.property.columnNames) {
+                        setNewFieldOptions(field.options?.map(o => o.value).join(', ') || '');
+                        const props = field.properties as any;
+                        if (props?.multiColumn && props?.columnNames) {
                          setTextboxColumns(
-                            field.property.columnNames.map((name, idx) => ({
+                            props.columnNames.map((name: string, idx: number) => ({
                              id: `col-${idx}`,
                              name,
                              key: `column${idx + 1}`
@@ -215,28 +216,26 @@ export function FieldDrawer({
                      <div className="flex items-start justify-between">
                        <div className="flex-1">
                          <div className="flex items-center gap-2">
-                            <span className="font-medium">{field.name}</span>
+                            <span className="font-medium">{field.field_name}</span>
                            <Badge variant="outline" className="text-xs">
-                              {INPUT_TYPE_OPTIONS.find(o => o.value === field.property.inputType)?.label}
+                              {INPUT_TYPE_OPTIONS.find(o => o.value === field.field_type)?.label}
                            </Badge>
-                            {field.property.required && (
+                            {(field.properties as any)?.required && (
                              <Badge variant="destructive" className="text-xs">필수</Badge>
                            )}
                          </div>
                          {field.description && (
                            <p className="text-xs text-muted-foreground mt-1">{field.description}</p>
                          )}
-                          {Array.isArray(field.category) && field.category.length > 0 && (
+                          {field.category && (
                            <div className="flex gap-1 mt-1">
-                              {field.category.map((cat, idx) => (
-                                <Badge key={idx} variant="secondary" className="text-xs">
-                                  {cat}
-                                </Badge>
-                              ))}
+                              <Badge variant="secondary" className="text-xs">
+                                {field.category}
+                              </Badge>
                            </div>
                          )}
                        </div>
-                        {selectedMasterFieldId === field.id && (
+                        {selectedMasterFieldId === String(field.id) && (
                          <Check className="h-5 w-5 text-blue-600" />
                        )}
                      </div>
@@ -585,22 +584,23 @@ export function FieldDrawer({
                        </p>
                        <div className="space-y-2 max-h-60 overflow-y-auto">
                          {selectedPage.sections
-                            .filter(section => section.type !== 'bom')
+                            .filter(section => section.section_type !== 'BOM')
                            .map(section => (
                              <label key={section.id} className="flex items-center gap-2 p-2 bg-muted rounded cursor-pointer hover:bg-muted/80">
                                <input
                                  type="checkbox"
-                                  checked={newFieldConditionSections.includes(section.id)}
+                                  checked={newFieldConditionSections.includes(String(section.id))}
                                  onChange={(e) => {
+                                    const sectionIdStr = String(section.id);
                                    if (e.target.checked) {
-                                      setNewFieldConditionSections(prev => [...prev, section.id]);
+                                      setNewFieldConditionSections(prev => [...prev, sectionIdStr]);
                                    } else {
-                                      setNewFieldConditionSections(prev => prev.filter(id => id !== section.id));
+                                      setNewFieldConditionSections(prev => prev.filter(id => id !== sectionIdStr));
                                    }
                                  }}
                                  className="cursor-pointer"
                                />
-                                <span className="flex-1 text-sm">{section.title}</span>
+                                <span className="flex-1 text-sm">{section.section_name}</span>
                              </label>
                            ))}
                        </div>
--- a/src/components/items/ItemMasterDataManagement/dialogs/MasterFieldDialog.tsx
+++ b/src/components/items/ItemMasterDataManagement/dialogs/MasterFieldDialog.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';
@@ -79,23 +80,45 @@ export function MasterFieldDialog({
  handleUpdateMasterField,
  handleAddMasterField,
 }: MasterFieldDialogProps) {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  // 유효성 검사
+  const isNameEmpty = !newMasterFieldName.trim();
+  const isKeyEmpty = !newMasterFieldKey.trim();
+
+  const handleClose = () => {
+    setIsMasterFieldDialogOpen(false);
+    setEditingMasterFieldId(null);
+    setNewMasterFieldName('');
+    setNewMasterFieldKey('');
+    setNewMasterFieldInputType('textbox');
+    setNewMasterFieldRequired(false);
+    setNewMasterFieldCategory('공통');
+    setNewMasterFieldDescription('');
+    setNewMasterFieldOptions('');
+    setNewMasterFieldAttributeType('custom');
+    setNewMasterFieldMultiColumn(false);
+    setNewMasterFieldColumnCount(2);
+    setNewMasterFieldColumnNames(['컬럼1', '컬럼2']);
+    setIsSubmitted(false);
+  };
+
+  const handleSubmit = () => {
+    setIsSubmitted(true);
+    if (!isNameEmpty && !isKeyEmpty) {
+      if (editingMasterFieldId) {
+        handleUpdateMasterField();
+      } else {
+        handleAddMasterField();
+      }
+      setIsSubmitted(false);
+    }
+  };
+
  return (
    <Dialog open={isMasterFieldDialogOpen} onOpenChange={(open) => {
-      setIsMasterFieldDialogOpen(open);
-      if (!open) {
-        setEditingMasterFieldId(null);
-        setNewMasterFieldName('');
-        setNewMasterFieldKey('');
-        setNewMasterFieldInputType('textbox');
-        setNewMasterFieldRequired(false);
-        setNewMasterFieldCategory('공통');
-        setNewMasterFieldDescription('');
-        setNewMasterFieldOptions('');
-        setNewMasterFieldAttributeType('custom');
-        setNewMasterFieldMultiColumn(false);
-        setNewMasterFieldColumnCount(2);
-        setNewMasterFieldColumnNames(['컬럼1', '컬럼2']);
-      }
+      if (!open) handleClose();
+      else setIsMasterFieldDialogOpen(open);
    }}>
      <DialogContent className="max-w-[95vw] sm:max-w-2xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
@@ -112,7 +135,11 @@ export function MasterFieldDialog({
                value={newMasterFieldName}
                onChange={(e) => setNewMasterFieldName(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>
@@ -120,7 +147,11 @@ export function MasterFieldDialog({
                value={newMasterFieldKey}
                onChange={(e) => setNewMasterFieldKey(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>

@@ -251,8 +282,8 @@ export function MasterFieldDialog({
          )}
        </div>
        <DialogFooter>
-          <Button variant="outline" onClick={() => setIsMasterFieldDialogOpen(false)}>취소</Button>
-          <Button onClick={editingMasterFieldId ? handleUpdateMasterField : handleAddMasterField}>
+          <Button variant="outline" onClick={handleClose}>취소</Button>
+          <Button onClick={handleSubmit}>
            {editingMasterFieldId ? '수정' : '추가'}
          </Button>
        </DialogFooter>
--- a/src/components/items/ItemMasterDataManagement/dialogs/OptionDialog.tsx
+++ b/src/components/items/ItemMasterDataManagement/dialogs/OptionDialog.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';
@@ -72,19 +73,38 @@ export function OptionDialog({
  attributeColumns,
  handleAddOption,
 }: OptionDialogProps) {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  // 유효성 검사
+  const isValueEmpty = !newOptionValue.trim();
+  const isLabelEmpty = !newOptionLabel.trim();
+  const isDropdownOptionsEmpty = newOptionInputType === 'dropdown' && !newOptionOptions.trim();
+
+  const handleClose = () => {
+    setIsOpen(false);
+    setNewOptionValue('');
+    setNewOptionLabel('');
+    setNewOptionColumnValues({});
+    setNewOptionInputType('textbox');
+    setNewOptionRequired(false);
+    setNewOptionOptions('');
+    setNewOptionPlaceholder('');
+    setNewOptionDefaultValue('');
+    setIsSubmitted(false);
+  };
+
+  const handleSubmit = () => {
+    setIsSubmitted(true);
+    if (!isValueEmpty && !isLabelEmpty && !isDropdownOptionsEmpty) {
+      handleAddOption();
+      setIsSubmitted(false);
+    }
+  };
+
  return (
    <Dialog open={isOpen} onOpenChange={(open) => {
-      setIsOpen(open);
-      if (!open) {
-        setNewOptionValue('');
-        setNewOptionLabel('');
-        setNewOptionColumnValues({});
-        setNewOptionInputType('textbox');
-        setNewOptionRequired(false);
-        setNewOptionOptions('');
-        setNewOptionPlaceholder('');
-        setNewOptionDefaultValue('');
-      }
+      if (!open) handleClose();
+      else setIsOpen(open);
    }}>
      <DialogContent className="max-w-[95vw] sm:max-w-2xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
@@ -109,7 +129,11 @@ export function OptionDialog({
                  value={newOptionValue}
                  onChange={(e) => setNewOptionValue(e.target.value)}
                  placeholder="예: kg, stainless"
+                  className={isSubmitted && isValueEmpty ? 'border-red-500 focus-visible:ring-red-500' : ''}
                />
+                {isSubmitted && isValueEmpty && (
+                  <p className="text-xs text-red-500 mt-1">값을 입력해주세요</p>
+                )}
              </div>
              <div>
                <Label>라벨 (표시명) *</Label>
@@ -117,7 +141,11 @@ export function OptionDialog({
                  value={newOptionLabel}
                  onChange={(e) => setNewOptionLabel(e.target.value)}
                  placeholder="예: 킬로그램, 스테인리스"
+                  className={isSubmitted && isLabelEmpty ? 'border-red-500 focus-visible:ring-red-500' : ''}
                />
+                {isSubmitted && isLabelEmpty && (
+                  <p className="text-xs text-red-500 mt-1">라벨을 입력해주세요</p>
+                )}
              </div>
            </div>
          </div>
@@ -151,10 +179,15 @@ export function OptionDialog({
                  value={newOptionOptions}
                  onChange={(e) => setNewOptionOptions(e.target.value)}
                  placeholder="옵션1, 옵션2, 옵션3 (쉼표로 구분)"
+                  className={isSubmitted && isDropdownOptionsEmpty ? 'border-red-500 focus-visible:ring-red-500' : ''}
                />
-                <p className="text-xs text-muted-foreground mt-1">
-                  쉼표로 구분하여 여러 옵션을 입력하세요
-                </p>
+                {isSubmitted && isDropdownOptionsEmpty ? (
+                  <p className="text-xs text-red-500 mt-1">드롭다운 옵션을 입력해주세요</p>
+                ) : (
+                  <p className="text-xs text-muted-foreground mt-1">
+                    쉼표로 구분하여 여러 옵션을 입력하세요
+                  </p>
+                )}
              </div>
            )}

@@ -213,8 +246,8 @@ export function OptionDialog({
          )}
        </div>
        <DialogFooter>
-          <Button variant="outline" onClick={() => setIsOpen(false)}>취소</Button>
-          <Button onClick={handleAddOption}>추가</Button>
+          <Button variant="outline" onClick={handleClose}>취소</Button>
+          <Button onClick={handleSubmit}>추가</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
--- a/src/components/items/ItemMasterDataManagement/dialogs/PageDialog.tsx
+++ b/src/components/items/ItemMasterDataManagement/dialogs/PageDialog.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';
@@ -33,27 +34,53 @@ export function PageDialog({
  setNewPageItemType,
  handleAddPage,
 }: PageDialogProps) {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  // 유효성 검사
+  const isPageNameEmpty = !newPageName.trim();
+
+  const handleSubmit = () => {
+    setIsSubmitted(true);
+    if (!isPageNameEmpty) {
+      handleAddPage();
+      setIsSubmitted(false);
+    }
+  };
+
+  const handleClose = () => {
+    setIsPageDialogOpen(false);
+    setNewPageName('');
+    setNewPageItemType('FG');
+    setIsSubmitted(false);
+  };
+
  return (
    <Dialog open={isPageDialogOpen} onOpenChange={(open) => {
-      setIsPageDialogOpen(open);
      if (!open) {
-        setNewPageName('');
-        setNewPageItemType('FG');
+        handleClose();
+      } else {
+        setIsPageDialogOpen(open);
      }
    }}>
      <DialogContent>
        <DialogHeader>
-          <DialogTitle>섹션 추가</DialogTitle>
-          <DialogDescription>새로운 품목 섹션을 생성합니다</DialogDescription>
+          <DialogTitle>페이지 추가</DialogTitle>
+          <DialogDescription>품목 유형별 관리 페이지를 생성합니다</DialogDescription>
        </DialogHeader>
        <div className="space-y-4">
          <div>
-            <Label>섹션명 *</Label>
+            <Label>페이지명 *</Label>
            <Input
              value={newPageName}
              onChange={(e) => setNewPageName(e.target.value)}
-              placeholder="예: 품목 등록"
+              placeholder="예: 제품 등록"
+              className={isSubmitted && isPageNameEmpty ? 'border-red-500 focus-visible:ring-red-500' : ''}
            />
+            {isSubmitted && isPageNameEmpty && (
+              <p className="text-xs text-red-500 mt-1">
+                페이지명을 입력해주세요
+              </p>
+            )}
          </div>
          <div>
            <Label>품목유형 *</Label>
@@ -70,8 +97,8 @@ export function PageDialog({
          </div>
        </div>
        <DialogFooter>
-          <Button variant="outline" onClick={() => setIsPageDialogOpen(false)}>취소</Button>
-          <Button onClick={handleAddPage}>추가</Button>
+          <Button variant="outline" onClick={handleClose}>취소</Button>
+          <Button onClick={handleSubmit}>추가</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
--- a/src/components/items/ItemMasterDataManagement/dialogs/PathEditDialog.tsx
+++ b/src/components/items/ItemMasterDataManagement/dialogs/PathEditDialog.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';
@@ -23,12 +24,21 @@ export function PathEditDialog({
  updateItemPage,
  trackChange,
 }: PathEditDialogProps) {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  // 유효성 검사
+  const isPathEmpty = !editingAbsolutePath.trim();
+  const isPathInvalid = editingAbsolutePath.trim() && !editingAbsolutePath.startsWith('/');
+
+  const handleClose = () => {
+    setEditingPathPageId(null);
+    setEditingAbsolutePath('');
+    setIsSubmitted(false);
+  };
+
  return (
    <Dialog open={editingPathPageId !== null} onOpenChange={(open) => {
-      if (!open) {
-        setEditingPathPageId(null);
-        setEditingAbsolutePath('');
-      }
+      if (!open) handleClose();
    }}>
      <DialogContent>
        <DialogHeader>
@@ -42,25 +52,30 @@ export function PathEditDialog({
              value={editingAbsolutePath}
              onChange={(e) => setEditingAbsolutePath(e.target.value)}
              placeholder="/제품관리/제품등록"
+              className={isSubmitted && (isPathEmpty || isPathInvalid) ? 'border-red-500 focus-visible:ring-red-500' : ''}
            />
-            <p className="text-xs text-gray-500 mt-1">슬래시(/)로 시작하며, 경로를 슬래시로 구분합니다</p>
+            {isSubmitted && isPathEmpty && (
+              <p className="text-xs text-red-500 mt-1">절대경로를 입력해주세요</p>
+            )}
+            {isSubmitted && isPathInvalid && (
+              <p className="text-xs text-red-500 mt-1">절대경로는 슬래시(/)로 시작해야 합니다</p>
+            )}
+            {!isSubmitted || (!isPathEmpty && !isPathInvalid) ? (
+              <p className="text-xs text-gray-500 mt-1">슬래시(/)로 시작하며, 경로를 슬래시로 구분합니다</p>
+            ) : null}
          </div>
        </div>
        <DialogFooter>
-          <Button variant="outline" onClick={() => setEditingPathPageId(null)}>취소</Button>
+          <Button variant="outline" onClick={handleClose}>취소</Button>
          <Button onClick={() => {
-            if (!editingAbsolutePath.trim()) {
-              toast.error('절대경로를 입력해주세요');
-              return;
-            }
-            if (!editingAbsolutePath.startsWith('/')) {
-              toast.error('절대경로는 슬래시(/)로 시작해야 합니다');
+            setIsSubmitted(true);
+            if (isPathEmpty || isPathInvalid) {
              return;
            }
            if (editingPathPageId) {
              updateItemPage(editingPathPageId, { absolutePath: editingAbsolutePath });
-              trackChange('pages', editingPathPageId, 'update', { absolutePath: editingAbsolutePath });
-              setEditingPathPageId(null);
+              trackChange('pages', String(editingPathPageId), 'update', { absolutePath: editingAbsolutePath });
+              handleClose();
              toast.success('절대경로가 수정되었습니다 (저장 필요)');
            }
          }}>저장</Button>
--- a/src/components/items/ItemMasterDataManagement/dialogs/SectionDialog.tsx
+++ b/src/components/items/ItemMasterDataManagement/dialogs/SectionDialog.tsx
@@ -1,12 +1,13 @@
 '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';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Badge } from '@/components/ui/badge';
-import { FileText, Package, Check, X } from 'lucide-react';
+import { FileText, Package, Check } from 'lucide-react';
 import type { SectionTemplate } from '@/contexts/ItemMasterContext';

 interface SectionDialogProps {
@@ -45,6 +46,11 @@ export function SectionDialog({
  setSelectedTemplateId,
  handleLinkTemplate,
 }: SectionDialogProps) {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  // 유효성 검사
+  const isTitleEmpty = !newSectionTitle.trim();
+
  const handleClose = () => {
    setIsSectionDialogOpen(false);
    setNewSectionType('fields');
@@ -52,6 +58,15 @@ export function SectionDialog({
    setNewSectionDescription('');
    setSectionInputMode('custom');
    setSelectedTemplateId(null);
+    setIsSubmitted(false);
+  };
+
+  const handleSubmit = () => {
+    setIsSubmitted(true);
+    if (sectionInputMode === 'custom' && !isTitleEmpty) {
+      handleAddSection();
+      setIsSubmitted(false);
+    }
  };

  // 템플릿 선택 시 폼에 값 채우기
@@ -220,7 +235,11 @@ export function SectionDialog({
                  onChange={(e) => setNewSectionTitle(e.target.value)}
                  placeholder={newSectionType === 'bom' ? '예: BOM 구성' : '예: 기본 정보'}
                  disabled={sectionInputMode === 'template'}
+                  className={isSubmitted && isTitleEmpty && sectionInputMode === 'custom' ? 'border-red-500 focus-visible:ring-red-500' : ''}
                />
+                {isSubmitted && isTitleEmpty && sectionInputMode === 'custom' && (
+                  <p className="text-xs text-red-500 mt-1">섹션 제목을 입력해주세요</p>
+                )}
              </div>
              <div>
                <Label>설명 (선택)</Label>
@@ -269,7 +288,7 @@ export function SectionDialog({
            </Button>
          ) : (
            <Button
-              onClick={handleAddSection}
+              onClick={handleSubmit}
              className="w-full sm:w-auto"
              disabled={sectionInputMode === 'template' && !selectedTemplateId}
            >
--- a/src/components/items/ItemMasterDataManagement/dialogs/SectionTemplateDialog.tsx
+++ b/src/components/items/ItemMasterDataManagement/dialogs/SectionTemplateDialog.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';
@@ -47,16 +48,37 @@ export function SectionTemplateDialog({
  handleUpdateSectionTemplate,
  handleAddSectionTemplate,
 }: SectionTemplateDialogProps) {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  // 유효성 검사
+  const isTitleEmpty = !newSectionTemplateTitle.trim();
+
+  const handleClose = () => {
+    setIsSectionTemplateDialogOpen(false);
+    setEditingSectionTemplateId(null);
+    setNewSectionTemplateTitle('');
+    setNewSectionTemplateDescription('');
+    setNewSectionTemplateCategory([]);
+    setNewSectionTemplateType('fields');
+    setIsSubmitted(false);
+  };
+
+  const handleSubmit = () => {
+    setIsSubmitted(true);
+    if (!isTitleEmpty) {
+      if (editingSectionTemplateId) {
+        handleUpdateSectionTemplate();
+      } else {
+        handleAddSectionTemplate();
+      }
+      setIsSubmitted(false);
+    }
+  };
+
  return (
    <Dialog open={isSectionTemplateDialogOpen} onOpenChange={(open) => {
-      setIsSectionTemplateDialogOpen(open);
-      if (!open) {
-        setEditingSectionTemplateId(null);
-        setNewSectionTemplateTitle('');
-        setNewSectionTemplateDescription('');
-        setNewSectionTemplateCategory([]);
-        setNewSectionTemplateType('fields');
-      }
+      if (!open) handleClose();
+      else setIsSectionTemplateDialogOpen(open);
    }}>
      <DialogContent className="max-w-[95vw] sm:max-w-2xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
@@ -72,7 +94,11 @@ export function SectionTemplateDialog({
              value={newSectionTemplateTitle}
              onChange={(e) => setNewSectionTemplateTitle(e.target.value)}
              placeholder="예: 기본 정보"
+              className={isSubmitted && isTitleEmpty ? 'border-red-500 focus-visible:ring-red-500' : ''}
            />
+            {isSubmitted && isTitleEmpty && (
+              <p className="text-xs text-red-500 mt-1">섹션 제목을 입력해주세요</p>
+            )}
          </div>

          <div>
@@ -136,8 +162,8 @@ export function SectionTemplateDialog({
          </div>
        </div>
        <DialogFooter>
-          <Button variant="outline" onClick={() => setIsSectionTemplateDialogOpen(false)}>취소</Button>
-          <Button onClick={editingSectionTemplateId ? handleUpdateSectionTemplate : handleAddSectionTemplate}>
+          <Button variant="outline" onClick={handleClose}>취소</Button>
+          <Button onClick={handleSubmit}>
            {editingSectionTemplateId ? '수정' : '추가'}
          </Button>
        </DialogFooter>
--- a/src/components/items/ItemMasterDataManagement/dialogs/TemplateFieldDialog.tsx
+++ b/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>