fix: 품목기준관리 실시간 동기화 수정

- BOM 항목 추가/수정/삭제 시 섹션탭 즉시 반영
- 섹션 복제 시 UI 즉시 업데이트 (null vs undefined 이슈 해결)
- 항목 수정 기능 추가 (useTemplateManagement)
- 실시간 동기화 문서 추가

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

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

src/components/common/ServerErrorPage.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import {
+  ServerCrash,
+  RefreshCw,
+  Home,
+  ArrowLeft,
+  MessageCircleQuestion,
+} from 'lucide-react';
+import { useRouter } from 'next/navigation';
+
+interface ServerErrorPageProps {
+  title?: string;
+  message?: string;
+  errorCode?: string | number;
+  onRetry?: () => void;
+  showBackButton?: boolean;
+  showHomeButton?: boolean;
+  showContactInfo?: boolean;
+  contactEmail?: string;
+}
+
+export function ServerErrorPage({
+  title = '서버 오류가 발생했습니다',
+  message = '일시적인 문제가 발생했습니다. 잠시 후 다시 시도해 주세요.',
+  errorCode,
+  onRetry,
+  showBackButton = true,
+  showHomeButton = true,
+  showContactInfo = true,
+  contactEmail = 'admin@company.com',
+}: ServerErrorPageProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const handleRetry = () => {
+    if (onRetry) {
+      onRetry();
+    } else {
+      window.location.reload();
+    }
+  };
+
+  return (
+    <div className="min-h-[calc(100vh-200px)] flex items-center justify-center p-4">
+      <Card className="w-full max-w-2xl border border-border/20 bg-card/50 backdrop-blur">
+        <CardHeader className="text-center pb-4">
+          <div className="flex justify-center mb-6">
+            <div className="relative">
+              <div className="w-24 h-24 bg-gradient-to-br from-red-500/20 to-orange-500/10 rounded-2xl flex items-center justify-center">
+                <ServerCrash className="w-12 h-12 text-red-500" />
+              </div>
+              <div className="absolute -top-1 -right-1 w-6 h-6 bg-red-500 rounded-full flex items-center justify-center">
+                <span className="text-xs text-white font-bold">!</span>
+              </div>
+            </div>
+          </div>
+          <CardTitle className="text-2xl md:text-3xl font-bold text-foreground mb-2">
+            {title}
+          </CardTitle>
+          {errorCode && (
+            <p className="text-muted-foreground text-sm md:text-base">
+              오류 코드: <code className="bg-muted px-2 py-1 rounded text-xs">{errorCode}</code>
+            </p>
+          )}
+        </CardHeader>
+
+        <CardContent className="text-center space-y-6">
+          <div className="bg-red-50 dark:bg-red-950/30 rounded-xl p-6 space-y-3 border border-red-200 dark:border-red-900/50">
+            <p className="text-lg text-foreground font-medium">
+              {message}
+            </p>
+            <p className="text-sm text-muted-foreground">
+              문제가 지속되면 관리자에게 문의해 주세요.
+            </p>
+          </div>
+
+          <div className="flex flex-col sm:flex-row gap-3 justify-center pt-4">
+            <Button
+              variant="default"
+              onClick={handleRetry}
+              className="rounded-xl bg-red-500 hover:bg-red-600"
+            >
+              <RefreshCw className="w-4 h-4 mr-2" />
+              다시 시도
+            </Button>
+
+            {showBackButton && (
+              <Button
+                variant="outline"
+                onClick={() => router.back()}
+                className="rounded-xl"
+              >
+                <ArrowLeft className="w-4 h-4 mr-2" />
+                이전 페이지
+              </Button>
+            )}
+
+            {showHomeButton && (
+              <Button
+                variant="outline"
+                onClick={() => router.push('/dashboard')}
+                className="rounded-xl"
+              >
+                <Home className="w-4 h-4 mr-2" />
+                대시보드로 이동
+              </Button>
+            )}
+          </div>
+
+          {showContactInfo && (
+            <div className="pt-6 border-t border-border/20">
+              <div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
+                <MessageCircleQuestion className="w-4 h-4" />
+                <span>
+                  문제가 계속되면{' '}
+                  <a
+                    href={`mailto:${contactEmail}`}
+                    className="text-primary hover:underline font-medium"
+                  >
+                    관리자에게 문의
+                  </a>
+                  해 주세요.
+                </span>
+              </div>
+              {pathname && (
+                <p className="text-xs text-muted-foreground mt-2">
+                  발생 위치: <code className="bg-muted px-1.5 py-0.5 rounded">{pathname}</code>
+                </p>
+              )}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}