feat: React 프론트엔드 기능 대폭 확장

- 월별근무표: 휴일/근무일 관리, 자동 초기화
- 메일양식: 템플릿 CRUD, To/CC/BCC 설정
- 그룹정보: 부서 관리, 비트 연산 기반 권한 설정
- 업무일지: 수정 성공 메시지 제거, 오늘 근무시간 필터링 수정
- 웹소켓 메시지 type 충돌 버그 수정

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

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

Project/frontend/src/components/items/ItemEditDialog.tsx

@@ -0,0 +1,244 @@
+import { useState, useEffect } from 'react';
+import { X, Save, Trash2 } from 'lucide-react';
+import { ItemInfo } from '@/types';
+
+interface ItemEditDialogProps {
+  item: ItemInfo | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (item: ItemInfo) => Promise<void>;
+  onDelete: (idx: number) => Promise<void>;
+}
+
+export function ItemEditDialog({ item, isOpen, onClose, onSave, onDelete }: ItemEditDialogProps) {
+  const [editData, setEditData] = useState<ItemInfo | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (item) {
+      setEditData({ ...item });
+    }
+  }, [item]);
+
+  if (!isOpen || !editData) return null;
+
+  const isNew = editData.idx === 0;
+
+  const handleSave = async () => {
+    if (!editData) return;
+    setSaving(true);
+    try {
+      await onSave(editData);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!editData || isNew) return;
+    if (!confirm('삭제하시겠습니까?')) return;
+    setSaving(true);
+    try {
+      await onDelete(editData.idx);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* 배경 오버레이 */}
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
+
+      {/* 다이얼로그 */}
+      <div className="relative bg-slate-800 rounded-xl shadow-2xl w-full max-w-lg mx-4 border border-white/10">
+        {/* 헤더 */}
+        <div className="flex items-center justify-between p-4 border-b border-white/10">
+          <h2 className="text-lg font-semibold text-white">
+            {isNew ? '품목 추가' : '품목 편집'}
+          </h2>
+          <button
+            onClick={onClose}
+            className="p-1 hover:bg-white/10 rounded text-white/70 hover:text-white transition-colors"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* 내용 */}
+        <div className="p-4 space-y-4 max-h-[60vh] overflow-auto">
+          <div className="grid grid-cols-2 gap-4">
+            {/* SID */}
+            <div>
+              <label className="block text-sm font-medium text-white/70 mb-1">SID</label>
+              <input
+                type="text"
+                value={editData.sid}
+                onChange={(e) => setEditData({ ...editData, sid: e.target.value })}
+                className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white"
+              />
+            </div>
+
+            {/* 분류 */}
+            <div>
+              <label className="block text-sm font-medium text-white/70 mb-1">분류</label>
+              <input
+                type="text"
+                value={editData.cate}
+                onChange={(e) => setEditData({ ...editData, cate: e.target.value })}
+                className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white"
+              />
+            </div>
+          </div>
+
+          {/* 품명 */}
+          <div>
+            <label className="block text-sm font-medium text-white/70 mb-1">품명</label>
+            <input
+              type="text"
+              value={editData.name}
+              onChange={(e) => setEditData({ ...editData, name: e.target.value })}
+              className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white"
+            />
+          </div>
+
+          {/* 모델 */}
+          <div>
+            <label className="block text-sm font-medium text-white/70 mb-1">모델</label>
+            <input
+              type="text"
+              value={editData.model}
+              onChange={(e) => setEditData({ ...editData, model: e.target.value })}
+              className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white"
+            />
+          </div>
+
+          <div className="grid grid-cols-3 gap-4">
+            {/* 규격 */}
+            <div>
+              <label className="block text-sm font-medium text-white/70 mb-1">규격</label>
+              <input
+                type="text"
+                value={editData.scale}
+                onChange={(e) => setEditData({ ...editData, scale: e.target.value })}
+                className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white"
+              />
+            </div>
+
+            {/* 단위 */}
+            <div>
+              <label className="block text-sm font-medium text-white/70 mb-1">단위</label>
+              <input
+                type="text"
+                value={editData.unit}
+                onChange={(e) => setEditData({ ...editData, unit: e.target.value })}
+                className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white"
+              />
+            </div>
+
+            {/* 단가 */}
+            <div>
+              <label className="block text-sm font-medium text-white/70 mb-1">단가</label>
+              <input
+                type="number"
+                value={editData.price}
+                onChange={(e) => setEditData({ ...editData, price: parseFloat(e.target.value) || 0 })}
+                className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white text-right"
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            {/* 공급처 */}
+            <div>
+              <label className="block text-sm font-medium text-white/70 mb-1">공급처</label>
+              <input
+                type="text"
+                value={editData.supply}
+                onChange={(e) => setEditData({ ...editData, supply: e.target.value })}
+                className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white"
+              />
+            </div>
+
+            {/* 제조사 */}
+            <div>
+              <label className="block text-sm font-medium text-white/70 mb-1">제조사</label>
+              <input
+                type="text"
+                value={editData.manu}
+                onChange={(e) => setEditData({ ...editData, manu: e.target.value })}
+                className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white"
+              />
+            </div>
+          </div>
+
+          {/* 보관장소 */}
+          <div>
+            <label className="block text-sm font-medium text-white/70 mb-1">보관장소</label>
+            <input
+              type="text"
+              value={editData.storage}
+              onChange={(e) => setEditData({ ...editData, storage: e.target.value })}
+              className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white"
+            />
+          </div>
+
+          {/* 메모 */}
+          <div>
+            <label className="block text-sm font-medium text-white/70 mb-1">메모</label>
+            <textarea
+              value={editData.memo}
+              onChange={(e) => setEditData({ ...editData, memo: e.target.value })}
+              rows={2}
+              className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white resize-none"
+            />
+          </div>
+
+          {/* 비활성화 */}
+          <div className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              id="disable"
+              checked={editData.disable}
+              onChange={(e) => setEditData({ ...editData, disable: e.target.checked })}
+              className="w-4 h-4 rounded border-white/20 bg-white/10"
+            />
+            <label htmlFor="disable" className="text-sm text-white/70">비활성화</label>
+          </div>
+        </div>
+
+        {/* 푸터 */}
+        <div className="flex items-center justify-between p-4 border-t border-white/10">
+          <div>
+            {!isNew && (
+              <button
+                onClick={handleDelete}
+                disabled={saving}
+                className="flex items-center gap-1 px-3 py-2 bg-red-600/20 hover:bg-red-600/40 rounded-lg text-red-400 transition-colors disabled:opacity-50"
+              >
+                <Trash2 className="w-4 h-4" />
+                삭제
+              </button>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-white/70 hover:text-white transition-colors"
+            >
+              취소
+            </button>
+            <button
+              onClick={handleSave}
+              disabled={saving}
+              className="flex items-center gap-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white transition-colors disabled:opacity-50"
+            >
+              <Save className="w-4 h-4" />
+              저장
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

Project/frontend/src/components/items/index.ts

@@ -0,0 +1 @@
+export { ItemEditDialog } from './ItemEditDialog';

Project/frontend/src/components/jobreport/JobTypeSelectModal.tsx

@@ -0,0 +1,336 @@
+import { useState, useEffect, useMemo } from 'react';
+import { X, ChevronRight, ChevronDown, Search } from 'lucide-react';
+import { createPortal } from 'react-dom';
+import { comms } from '@/communication';
+import { JobTypeItem } from '@/types';
+
+interface JobTypeSelectModalProps {
+  isOpen: boolean;
+  currentProcess?: string;
+  currentJobgrp?: string;
+  currentType?: string;
+  onClose: () => void;
+  onSelect: (process: string, jobgrp: string, type: string) => void;
+}
+
+interface TreeNode {
+  name: string;
+  children?: TreeNode[];
+  item?: JobTypeItem;
+}
+
+export function JobTypeSelectModal({
+  isOpen,
+  currentProcess,
+  currentJobgrp,
+  currentType,
+  onClose,
+  onSelect,
+}: JobTypeSelectModalProps) {
+  const [jobTypes, setJobTypes] = useState<JobTypeItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [searchKey, setSearchKey] = useState('');
+  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
+  const [selectedPath, setSelectedPath] = useState<string>('');
+
+  // 데이터 로드
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const loadJobTypes = async () => {
+      setLoading(true);
+      try {
+        const response = await comms.getJobTypes('');
+        if (response.Success && response.Data) {
+          setJobTypes(response.Data);
+
+          // 모든 노드 확장
+          const allExpanded = new Set<string>();
+          response.Data.forEach((item) => {
+            const process = item.process || 'N/A';
+            const jobgrp = item.jobgrp || 'N/A';
+            allExpanded.add(process);
+            allExpanded.add(`${process}|${jobgrp}`);
+          });
+          setExpandedNodes(allExpanded);
+
+          // 현재 선택된 항목이 있으면 선택 표시
+          if (currentType) {
+            setSelectedPath(`${currentProcess || 'N/A'}|${currentJobgrp || 'N/A'}|${currentType}`);
+          }
+        }
+      } catch (error) {
+        console.error('업무형태 로드 오류:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadJobTypes();
+  }, [isOpen, currentProcess, currentJobgrp, currentType]);
+
+  // 트리 구조 생성
+  const treeData = useMemo(() => {
+    const processMap = new Map<string, Map<string, JobTypeItem[]>>();
+
+    // 검색 필터 적용
+    const filteredTypes = searchKey
+      ? jobTypes.filter(
+          (item) =>
+            item.type?.toLowerCase().includes(searchKey.toLowerCase()) ||
+            item.jobgrp?.toLowerCase().includes(searchKey.toLowerCase()) ||
+            item.process?.toLowerCase().includes(searchKey.toLowerCase())
+        )
+      : jobTypes;
+
+    // 그룹핑
+    filteredTypes.forEach((item) => {
+      const process = item.process || 'N/A';
+      const jobgrp = item.jobgrp || 'N/A';
+
+      if (!processMap.has(process)) {
+        processMap.set(process, new Map());
+      }
+      const grpMap = processMap.get(process)!;
+      if (!grpMap.has(jobgrp)) {
+        grpMap.set(jobgrp, []);
+      }
+      grpMap.get(jobgrp)!.push(item);
+    });
+
+    // 트리 노드 생성
+    const tree: TreeNode[] = [];
+    processMap.forEach((grpMap, processName) => {
+      const processNode: TreeNode = {
+        name: processName,
+        children: [],
+      };
+
+      grpMap.forEach((items, grpName) => {
+        const grpNode: TreeNode = {
+          name: grpName,
+          children: items.map((item) => ({
+            name: item.type,
+            item,
+          })),
+        };
+        processNode.children!.push(grpNode);
+      });
+
+      tree.push(processNode);
+    });
+
+    // 정렬
+    tree.sort((a, b) => a.name.localeCompare(b.name));
+    tree.forEach((p) => {
+      p.children?.sort((a, b) => a.name.localeCompare(b.name));
+      p.children?.forEach((g) => {
+        g.children?.sort((a, b) => a.name.localeCompare(b.name));
+      });
+    });
+
+    return tree;
+  }, [jobTypes, searchKey]);
+
+  // 검색 시 모든 노드 확장
+  useEffect(() => {
+    if (searchKey && treeData.length > 0) {
+      const allExpanded = new Set<string>();
+      treeData.forEach((processNode) => {
+        allExpanded.add(processNode.name);
+        processNode.children?.forEach((grpNode) => {
+          allExpanded.add(`${processNode.name}|${grpNode.name}`);
+        });
+      });
+      setExpandedNodes(allExpanded);
+    }
+  }, [searchKey, treeData]);
+
+  // 노드 토글
+  const toggleNode = (path: string) => {
+    setExpandedNodes((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(path)) {
+        newSet.delete(path);
+      } else {
+        newSet.add(path);
+      }
+      return newSet;
+    });
+  };
+
+  // 항목 더블클릭
+  const handleDoubleClick = (item: JobTypeItem) => {
+    const process = item.process || 'N/A';
+    const jobgrp = item.jobgrp || 'N/A';
+    onSelect(process, jobgrp, item.type);
+    onClose();
+  };
+
+  // 선택 버튼 클릭
+  const handleSelectClick = () => {
+    if (selectedPath) {
+      const parts = selectedPath.split('|');
+      if (parts.length === 3) {
+        onSelect(parts[0], parts[1], parts[2]);
+        onClose();
+      }
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[60]"
+      onClick={onClose}
+    >
+      <div className="flex items-center justify-center min-h-screen p-4">
+        <div
+          className="glass-effect rounded-2xl w-full max-w-2xl animate-slide-up max-h-[85vh] flex flex-col"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {/* 헤더 */}
+          <div className="px-6 py-4 border-b border-white/10 flex items-center justify-between">
+            <h2 className="text-xl font-semibold text-white">업무형태 선택</h2>
+            <button
+              onClick={onClose}
+              className="text-white/70 hover:text-white transition-colors"
+            >
+              <X className="w-6 h-6" />
+            </button>
+          </div>
+
+          {/* 검색 */}
+          <div className="px-6 py-3 border-b border-white/10">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-white/50" />
+              <input
+                type="text"
+                value={searchKey}
+                onChange={(e) => setSearchKey(e.target.value)}
+                placeholder="검색어를 입력하세요..."
+                className="w-full bg-white/10 border border-white/20 rounded-lg pl-10 pr-4 py-2 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-primary-400"
+                autoFocus
+              />
+            </div>
+          </div>
+
+          {/* 트리뷰 */}
+          <div className="flex-1 overflow-y-auto p-4">
+            {loading ? (
+              <div className="text-white/50 text-center py-8">로딩 중...</div>
+            ) : treeData.length === 0 ? (
+              <div className="text-white/50 text-center py-8">
+                {searchKey ? '검색 결과가 없습니다' : '업무형태가 없습니다'}
+              </div>
+            ) : (
+              <div className="space-y-1">
+                {treeData.map((processNode) => (
+                  <div key={processNode.name} className="border border-white/10 rounded-lg overflow-hidden mb-2">
+                    {/* 공정 레벨 */}
+                    <button
+                      className="flex items-center w-full px-3 py-2 text-left bg-white/5 hover:bg-white/10 transition-colors"
+                      onClick={() => toggleNode(processNode.name)}
+                    >
+                      {expandedNodes.has(processNode.name) ? (
+                        <ChevronDown className="w-4 h-4 mr-2 text-primary-400" />
+                      ) : (
+                        <ChevronRight className="w-4 h-4 mr-2 text-white/50" />
+                      )}
+                      <span className="font-semibold text-primary-300">{processNode.name}</span>
+                      <span className="ml-2 text-xs text-white/40">
+                        ({processNode.children?.reduce((acc, g) => acc + (g.children?.length || 0), 0) || 0}건)
+                      </span>
+                    </button>
+
+                    {/* 업무분류 레벨 */}
+                    {expandedNodes.has(processNode.name) && processNode.children && (
+                      <div className="border-t border-white/10">
+                        {processNode.children.map((grpNode) => {
+                          const grpPath = `${processNode.name}|${grpNode.name}`;
+                          return (
+                            <div key={grpPath} className="border-b border-white/5 last:border-b-0">
+                              <button
+                                className="flex items-center w-full px-4 py-1.5 text-left bg-white/5 hover:bg-white/10 transition-colors"
+                                onClick={() => toggleNode(grpPath)}
+                              >
+                                {expandedNodes.has(grpPath) ? (
+                                  <ChevronDown className="w-3 h-3 mr-2 text-white/50" />
+                                ) : (
+                                  <ChevronRight className="w-3 h-3 mr-2 text-white/40" />
+                                )}
+                                <span className="text-white/80">{grpNode.name}</span>
+                                <span className="ml-2 text-xs text-white/40">
+                                  ({grpNode.children?.length || 0})
+                                </span>
+                              </button>
+
+                              {/* 업무형태 레벨 */}
+                              {expandedNodes.has(grpPath) && grpNode.children && (
+                                <div className="bg-black/20 py-1">
+                                  {grpNode.children.map((typeNode) => {
+                                    const typePath = `${grpPath}|${typeNode.name}`;
+                                    const isSelected = selectedPath === typePath;
+                                    return (
+                                      <button
+                                        key={typePath}
+                                        className={`w-full px-8 py-1.5 text-left transition-colors ${
+                                          isSelected
+                                            ? 'bg-primary-500/40 text-primary-200'
+                                            : 'text-white/70 hover:bg-white/10 hover:text-white'
+                                        }`}
+                                        onClick={() => setSelectedPath(typePath)}
+                                        onDoubleClick={() => typeNode.item && handleDoubleClick(typeNode.item)}
+                                      >
+                                        • {typeNode.name}
+                                      </button>
+                                    );
+                                  })}
+                                </div>
+                              )}
+                            </div>
+                          );
+                        })}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* 선택된 항목 표시 */}
+          {selectedPath && (
+            <div className="px-6 py-3 border-t border-white/10 bg-primary-500/10">
+              <div className="text-sm">
+                <span className="text-white/50">선택: </span>
+                <span className="text-primary-300 font-medium">
+                  {selectedPath.split('|').reverse().join(' ← ')}
+                </span>
+              </div>
+            </div>
+          )}
+
+          {/* 푸터 */}
+          <div className="px-6 py-4 border-t border-white/10 flex justify-end space-x-3">
+            <button
+              onClick={onClose}
+              className="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg transition-colors"
+            >
+              취소
+            </button>
+            <button
+              onClick={handleSelectClick}
+              disabled={!selectedPath}
+              className="bg-primary-500 hover:bg-primary-600 text-white px-6 py-2 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              선택
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}

Project/frontend/src/components/jobreport/JobreportEditModal.tsx

@@ -0,0 +1,372 @@
+import { useState } from 'react';
+import { FileText, Plus, Trash2, X, Loader2, ChevronDown } from 'lucide-react';
+import { createPortal } from 'react-dom';
+import { JobReportItem } from '@/types';
+import { JobTypeSelectModal } from './JobTypeSelectModal';
+
+export interface JobreportFormData {
+  pdate: string;
+  projectName: string;
+  requestpart: string;
+  package: string;
+  type: string;
+  process: string;
+  status: string;
+  description: string;
+  hrs: number;
+  ot: number;
+  jobgrp: string;
+  tag: string;
+}
+
+// 날짜 포맷 헬퍼 함수 (로컬 시간 기준)
+const formatDateLocal = (date: Date) => {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+};
+
+export const initialFormData: JobreportFormData = {
+  pdate: formatDateLocal(new Date()),
+  projectName: '',
+  requestpart: '',
+  package: '',
+  type: '',
+  process: '',
+  status: '진행 완료',
+  description: '',
+  hrs: 8,
+  ot: 0,
+  jobgrp: '',
+  tag: '',
+};
+
+interface JobreportEditModalProps {
+  isOpen: boolean;
+  editingItem: JobReportItem | null;
+  formData: JobreportFormData;
+  processing: boolean;
+  onClose: () => void;
+  onFormChange: (data: JobreportFormData) => void;
+  onSave: () => void;
+  onDelete: (idx: number) => void;
+}
+
+export function JobreportEditModal({
+  isOpen,
+  editingItem,
+  formData,
+  processing,
+  onClose,
+  onFormChange,
+  onSave,
+  onDelete,
+}: JobreportEditModalProps) {
+  const [showJobTypeModal, setShowJobTypeModal] = useState(false);
+
+  if (!isOpen) return null;
+
+  const handleFieldChange = <K extends keyof JobreportFormData>(
+    field: K,
+    value: JobreportFormData[K]
+  ) => {
+    onFormChange({ ...formData, [field]: value });
+  };
+
+  // 업무형태 선택 처리
+  const handleJobTypeSelect = (process: string, jobgrp: string, type: string) => {
+    onFormChange({
+      ...formData,
+      process,
+      jobgrp,
+      type,
+    });
+  };
+
+  // 업무형태 표시 텍스트
+  const getJobTypeDisplayText = () => {
+    if (!formData.type) {
+      return '업무형태를 선택하세요';
+    }
+    if (formData.jobgrp && formData.jobgrp !== 'N/A') {
+      return `${formData.type} ← ${formData.jobgrp}`;
+    }
+    return formData.type;
+  };
+
+  // 유효성 검사
+  const handleSaveWithValidation = () => {
+    // 프로젝트명 필수
+    if (!formData.projectName.trim()) {
+      alert('프로젝트(아이템) 명칭이 없습니다.');
+      return;
+    }
+
+    // 업무형태가 '휴가'가 아니면 업무내용 필수
+    if (formData.type !== '휴가' && !formData.description.trim()) {
+      alert('진행 내용이 없습니다.');
+      return;
+    }
+
+    // 근무시간 + 초과시간이 0이면 등록 불가
+    const totalHours = (formData.hrs || 0) + (formData.ot || 0);
+    if (totalHours === 0) {
+      alert('근무시간/초과시간이 입력되지 않았습니다.');
+      return;
+    }
+
+    // 상태 필수
+    if (!formData.status.trim()) {
+      alert('상태를 선택하세요.');
+      return;
+    }
+
+    // 업무형태 필수
+    if (!formData.type.trim()) {
+      alert('업무형태를 선택하세요.');
+      return;
+    }
+
+    // 공정 필수
+    if (!formData.process.trim()) {
+      alert('업무프로세스를 선택하세요.');
+      return;
+    }
+
+    // 유효성 검사 통과, 저장 진행
+    onSave();
+  };
+
+  return createPortal(
+    <div
+      className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"
+      onClick={onClose}
+    >
+      <div className="flex items-center justify-center min-h-screen p-4">
+        <div
+          className="glass-effect rounded-2xl w-full max-w-3xl animate-slide-up max-h-[90vh] overflow-y-auto"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {/* 헤더 */}
+          <div className="px-6 py-4 border-b border-white/10 flex items-center justify-between sticky top-0 bg-slate-800/95 backdrop-blur z-10">
+            <h2 className="text-xl font-semibold text-white flex items-center">
+              <FileText className="w-5 h-5 mr-2" />
+              {editingItem ? '업무일지 수정' : '업무일지 등록'}
+            </h2>
+            <button
+              onClick={onClose}
+              className="text-white/70 hover:text-white transition-colors"
+            >
+              <X className="w-6 h-6" />
+            </button>
+          </div>
+
+          {/* 내용 */}
+          <div className="p-6 space-y-4">
+            {/* 1행: 날짜, 프로젝트명 */}
+            <div className="grid grid-cols-4 gap-4">
+              <div>
+                <label className="block text-white/70 text-sm font-medium mb-2">
+                  날짜 *
+                </label>
+                <input
+                  type="date"
+                  value={formData.pdate}
+                  onChange={(e) => handleFieldChange('pdate', e.target.value)}
+                  className="w-full bg-white/20 border border-white/30 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary-400"
+                  required
+                />
+              </div>
+              <div className="col-span-3">
+                <label className="block text-white/70 text-sm font-medium mb-2">
+                  프로젝트명 *
+                </label>
+                <input
+                  type="text"
+                  value={formData.projectName}
+                  onChange={(e) => handleFieldChange('projectName', e.target.value)}
+                  className="w-full bg-white/20 border border-white/30 rounded-lg px-4 py-2 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-primary-400"
+                  placeholder="프로젝트 또는 아이템명"
+                  required
+                />
+              </div>
+            </div>
+
+            {/* 2행: 요청부서, 패키지 */}
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-white/70 text-sm font-medium mb-2">
+                  요청부서
+                </label>
+                <input
+                  type="text"
+                  value={formData.requestpart}
+                  onChange={(e) => handleFieldChange('requestpart', e.target.value)}
+                  className="w-full bg-white/20 border border-white/30 rounded-lg px-4 py-2 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-primary-400"
+                  placeholder="요청부서"
+                />
+              </div>
+              <div>
+                <label className="block text-white/70 text-sm font-medium mb-2">
+                  패키지
+                </label>
+                <input
+                  type="text"
+                  value={formData.package}
+                  onChange={(e) => handleFieldChange('package', e.target.value)}
+                  className="w-full bg-white/20 border border-white/30 rounded-lg px-4 py-2 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-primary-400"
+                  placeholder="패키지"
+                />
+              </div>
+            </div>
+
+            {/* 3행: 업무형태 선택 버튼 */}
+            <div>
+              <label className="block text-white/70 text-sm font-medium mb-2">
+                업무형태 *
+              </label>
+              <button
+                type="button"
+                onClick={() => setShowJobTypeModal(true)}
+                className={`w-full border rounded-lg px-4 py-2 text-left flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-primary-400 transition-colors ${
+                  formData.type
+                    ? 'bg-white/20 border-white/30 text-white'
+                    : 'bg-pink-500/30 border-pink-400/50 text-pink-200'
+                }`}
+              >
+                <span>{getJobTypeDisplayText()}</span>
+                <ChevronDown className="w-4 h-4 text-white/50" />
+              </button>
+              {formData.process && (
+                <div className="mt-1 text-xs text-white/50">
+                  공정: {formData.process}
+                </div>
+              )}
+            </div>
+
+            {/* 4행: 상태, 근무시간, 초과시간 */}
+            <div className="grid grid-cols-3 gap-4">
+              <div>
+                <label className="block text-white/70 text-sm font-medium mb-2">
+                  상태
+                </label>
+                <select
+                  value={formData.status}
+                  onChange={(e) => handleFieldChange('status', e.target.value)}
+                  className="w-full bg-white/20 border border-white/30 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary-400"
+                >
+                  <option value="진행 완료" className="bg-gray-800">
+                    진행 완료
+                  </option>
+                  <option value="진행 중" className="bg-gray-800">
+                    진행 중
+                  </option>
+                  <option value="대기" className="bg-gray-800">
+                    대기
+                  </option>
+                </select>
+              </div>
+              <div>
+                <label className="block text-white/70 text-sm font-medium mb-2">
+                  근무시간(h)
+                </label>
+                <input
+                  type="number"
+                  step="0.5"
+                  min="0"
+                  max="24"
+                  value={formData.hrs}
+                  onChange={(e) =>
+                    handleFieldChange('hrs', parseFloat(e.target.value) || 0)
+                  }
+                  className="w-full bg-white/20 border border-white/30 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary-400"
+                />
+              </div>
+              <div>
+                <label className="block text-white/70 text-sm font-medium mb-2">
+                  초과시간(h)
+                </label>
+                <input
+                  type="number"
+                  step="0.5"
+                  min="0"
+                  max="24"
+                  value={formData.ot}
+                  onChange={(e) =>
+                    handleFieldChange('ot', parseFloat(e.target.value) || 0)
+                  }
+                  className="w-full bg-white/20 border border-white/30 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary-400"
+                />
+              </div>
+            </div>
+
+            {/* 업무내용 */}
+            <div>
+              <label className="block text-white/70 text-sm font-medium mb-2">
+                업무내용
+              </label>
+              <textarea
+                value={formData.description}
+                onChange={(e) => handleFieldChange('description', e.target.value)}
+                rows={6}
+                className="w-full bg-white/20 border border-white/30 rounded-lg px-4 py-2 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-primary-400 resize-none"
+                placeholder="업무 내용을 입력하세요"
+              />
+            </div>
+          </div>
+
+          {/* 푸터 */}
+          <div className="px-6 py-4 border-t border-white/10 flex justify-between sticky bottom-0 bg-slate-800/95 backdrop-blur">
+            {/* 좌측: 삭제 버튼 (편집 모드일 때만) */}
+            <div>
+              {editingItem && (
+                <button
+                  onClick={() => {
+                    if (editingItem) {
+                      onDelete(editingItem.idx);
+                    }
+                  }}
+                  disabled={processing}
+                  className="bg-danger-500 hover:bg-danger-600 text-white px-4 py-2 rounded-lg transition-colors flex items-center disabled:opacity-50"
+                >
+                  <Trash2 className="w-4 h-4 mr-2" />
+                  삭제
+                </button>
+              )}
+            </div>
+            {/* 우측: 취소, 저장 버튼 */}
+            <div className="flex space-x-3">
+              <button
+                onClick={onClose}
+                className="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg transition-colors"
+              >
+                취소
+              </button>
+              <button
+                onClick={handleSaveWithValidation}
+                disabled={processing}
+                className="bg-primary-500 hover:bg-primary-600 text-white px-6 py-2 rounded-lg transition-colors flex items-center disabled:opacity-50"
+              >
+                {processing ? (
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                ) : (
+                  <Plus className="w-4 h-4 mr-2" />
+                )}
+                {editingItem ? '수정' : '등록'}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 업무형태 선택 모달 */}
+      <JobTypeSelectModal
+        isOpen={showJobTypeModal}
+        currentProcess={formData.process}
+        currentJobgrp={formData.jobgrp}
+        currentType={formData.type}
+        onClose={() => setShowJobTypeModal(false)}
+        onSelect={handleJobTypeSelect}
+      />
+    </div>,
+    document.body
+  );
+}

Project/frontend/src/components/layout/AmkorLogo.tsx

@@ -0,0 +1,22 @@
+interface AmkorLogoProps {
+  className?: string;
+  height?: number;
+}
+
+export function AmkorLogo({ className = '', height = 48 }: AmkorLogoProps) {
+  return (
+    <svg
+      viewBox="0 0 50 50"
+      height={height}
+      className={className}
+    >
+      {/* 흰색 원 배경 */}
+      <circle cx="25" cy="25" r="23" fill="white" />
+      {/* 파란색 A */}
+      <path
+        d="M25 8 L38 40 L32 40 L29 32 L16 32 L16 26 L27 26 L22.5 14 L17 28 L11 40 L5 40 L18 8 Z"
+        fill="#1a5091"
+      />
+    </svg>
+  );
+}

Project/frontend/src/components/layout/Header.tsx

@@ -0,0 +1,450 @@
+import { useState, useRef, useEffect } from 'react';
+import { NavLink, useNavigate } from 'react-router-dom';
+import {
+  CheckSquare,
+  Clock as ClockIcon,
+  FileText,
+  FolderKanban,
+  Code,
+  Menu,
+  X,
+  ChevronDown,
+  ChevronRight,
+  Database,
+  Package,
+  User,
+  Users,
+  CalendarDays,
+  Mail,
+  Shield,
+} from 'lucide-react';
+import { clsx } from 'clsx';
+import { UserInfoDialog } from '@/components/user/UserInfoDialog';
+import { AmkorLogo } from './AmkorLogo';
+
+interface HeaderProps {
+  isConnected: boolean;
+}
+
+interface NavItem {
+  path?: string;
+  icon: React.ElementType;
+  label: string;
+  action?: string;
+}
+
+interface SubMenu {
+  label: string;
+  icon: React.ElementType;
+  items: NavItem[];
+}
+
+interface MenuItem {
+  type: 'link' | 'submenu' | 'action';
+  path?: string;
+  icon: React.ElementType;
+  label: string;
+  submenu?: SubMenu;
+  action?: string;
+}
+
+interface DropdownMenuConfig {
+  label: string;
+  icon: React.ElementType;
+  items: MenuItem[];
+}
+
+// 일반 메뉴 항목
+const navItems: NavItem[] = [
+  { path: '/jobreport', icon: FileText, label: '업무일지' },
+  { path: '/project', icon: FolderKanban, label: '프로젝트' },
+  { path: '/todo', icon: CheckSquare, label: '할일' },
+  { path: '/kuntae', icon: ClockIcon, label: '근태' },
+];
+
+// 드롭다운 메뉴 (2단계 지원)
+const dropdownMenus: DropdownMenuConfig[] = [
+  {
+    label: '공용정보',
+    icon: Database,
+    items: [
+      { type: 'link', path: '/common', icon: Code, label: '공용코드' },
+      { type: 'link', path: '/items', icon: Package, label: '품목정보' },
+      {
+        type: 'submenu',
+        icon: Users,
+        label: '사용자',
+        submenu: {
+          label: '사용자',
+          icon: Users,
+          items: [
+            { icon: User, label: '정보', action: 'userInfo' },
+            { path: '/user/list', icon: Users, label: '목록' },
+          ],
+        },
+      },
+      { type: 'link', path: '/monthly-work', icon: CalendarDays, label: '월별근무표' },
+      { type: 'link', path: '/mail-form', icon: Mail, label: '메일양식' },
+      { type: 'link', path: '/user-group', icon: Shield, label: '그룹정보' },
+    ],
+  },
+];
+
+function DropdownNavMenu({
+  menu,
+  onItemClick,
+  onAction
+}: {
+  menu: DropdownMenuConfig;
+  onItemClick?: () => void;
+  onAction?: (action: string) => void;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeSubmenu, setActiveSubmenu] = useState<string | null>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+        setActiveSubmenu(null);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleSubItemClick = (subItem: NavItem) => {
+    setIsOpen(false);
+    setActiveSubmenu(null);
+    if (subItem.action) {
+      onAction?.(subItem.action);
+    }
+    onItemClick?.();
+  };
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={clsx(
+          'flex items-center space-x-2 px-4 py-2 rounded-lg transition-all duration-200 text-sm font-medium',
+          isOpen
+            ? 'bg-white/20 text-white'
+            : 'text-white/70 hover:bg-white/10 hover:text-white'
+        )}
+      >
+        <menu.icon className="w-4 h-4" />
+        <span>{menu.label}</span>
+        <ChevronDown className={clsx('w-3 h-3 transition-transform', isOpen && 'rotate-180')} />
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-full left-0 mt-1 min-w-[160px] glass-effect-solid rounded-lg py-1 z-[9999]">
+          {menu.items.map((item) => (
+            item.type === 'link' ? (
+              <NavLink
+                key={item.path}
+                to={item.path!}
+                onClick={() => {
+                  setIsOpen(false);
+                  onItemClick?.();
+                }}
+                className={({ isActive }) =>
+                  clsx(
+                    'flex items-center space-x-2 px-4 py-2 text-sm transition-colors',
+                    isActive
+                      ? 'bg-white/20 text-white'
+                      : 'text-white/70 hover:bg-white/10 hover:text-white'
+                  )
+                }
+              >
+                <item.icon className="w-4 h-4" />
+                <span>{item.label}</span>
+              </NavLink>
+            ) : (
+              <div
+                key={item.label}
+                className="relative"
+                onMouseEnter={() => setActiveSubmenu(item.label)}
+                onMouseLeave={() => setActiveSubmenu(null)}
+              >
+                <div
+                  className={clsx(
+                    'flex items-center justify-between px-4 py-2 text-sm transition-colors cursor-pointer',
+                    activeSubmenu === item.label
+                      ? 'bg-white/20 text-white'
+                      : 'text-white/70 hover:bg-white/10 hover:text-white'
+                  )}
+                >
+                  <div className="flex items-center space-x-2">
+                    <item.icon className="w-4 h-4" />
+                    <span>{item.label}</span>
+                  </div>
+                  <ChevronRight className="w-3 h-3" />
+                </div>
+
+                {activeSubmenu === item.label && item.submenu && (
+                  <div className="absolute left-full top-0 ml-1 min-w-[120px] glass-effect-solid rounded-lg py-1 z-[10000]">
+                    {item.submenu.items.map((subItem) => (
+                      subItem.path ? (
+                        <NavLink
+                          key={subItem.path}
+                          to={subItem.path}
+                          onClick={() => handleSubItemClick(subItem)}
+                          className={({ isActive }) =>
+                            clsx(
+                              'flex items-center space-x-2 px-4 py-2 text-sm transition-colors',
+                              isActive
+                                ? 'bg-white/20 text-white'
+                                : 'text-white/70 hover:bg-white/10 hover:text-white'
+                            )
+                          }
+                        >
+                          <subItem.icon className="w-4 h-4" />
+                          <span>{subItem.label}</span>
+                        </NavLink>
+                      ) : (
+                        <button
+                          key={subItem.label}
+                          onClick={() => handleSubItemClick(subItem)}
+                          className="flex items-center space-x-2 px-4 py-2 text-sm transition-colors text-white/70 hover:bg-white/10 hover:text-white w-full text-left"
+                        >
+                          <subItem.icon className="w-4 h-4" />
+                          <span>{subItem.label}</span>
+                        </button>
+                      )
+                    ))}
+                  </div>
+                )}
+              </div>
+            )
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// 모바일용 드롭다운 (펼쳐진 형태)
+function MobileDropdownMenu({
+  menu,
+  onItemClick,
+  onAction
+}: {
+  menu: DropdownMenuConfig;
+  onItemClick?: () => void;
+  onAction?: (action: string) => void;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeSubmenu, setActiveSubmenu] = useState<string | null>(null);
+
+  const handleSubItemClick = (subItem: NavItem) => {
+    if (subItem.action) {
+      onAction?.(subItem.action);
+    }
+    onItemClick?.();
+  };
+
+  return (
+    <div>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center justify-between w-full px-4 py-3 rounded-lg text-white/70 hover:bg-white/10 hover:text-white transition-all duration-200"
+      >
+        <div className="flex items-center space-x-3">
+          <menu.icon className="w-5 h-5" />
+          <span className="font-medium">{menu.label}</span>
+        </div>
+        <ChevronDown className={clsx('w-4 h-4 transition-transform', isOpen && 'rotate-180')} />
+      </button>
+
+      {isOpen && (
+        <div className="ml-6 mt-1 space-y-1">
+          {menu.items.map((item) => (
+            item.type === 'link' ? (
+              <NavLink
+                key={item.path}
+                to={item.path!}
+                onClick={onItemClick}
+                className={({ isActive }) =>
+                  clsx(
+                    'flex items-center space-x-3 px-4 py-2 rounded-lg transition-all duration-200',
+                    isActive
+                      ? 'bg-white/20 text-white'
+                      : 'text-white/70 hover:bg-white/10 hover:text-white'
+                  )
+                }
+              >
+                <item.icon className="w-4 h-4" />
+                <span>{item.label}</span>
+              </NavLink>
+            ) : (
+              <div key={item.label}>
+                <button
+                  onClick={() => setActiveSubmenu(activeSubmenu === item.label ? null : item.label)}
+                  className="flex items-center justify-between w-full px-4 py-2 rounded-lg text-white/70 hover:bg-white/10 hover:text-white transition-all duration-200"
+                >
+                  <div className="flex items-center space-x-3">
+                    <item.icon className="w-4 h-4" />
+                    <span>{item.label}</span>
+                  </div>
+                  <ChevronDown className={clsx('w-3 h-3 transition-transform', activeSubmenu === item.label && 'rotate-180')} />
+                </button>
+
+                {activeSubmenu === item.label && item.submenu && (
+                  <div className="ml-6 mt-1 space-y-1">
+                    {item.submenu.items.map((subItem) => (
+                      subItem.path ? (
+                        <NavLink
+                          key={subItem.path}
+                          to={subItem.path}
+                          onClick={onItemClick}
+                          className={({ isActive }) =>
+                            clsx(
+                              'flex items-center space-x-3 px-4 py-2 rounded-lg transition-all duration-200',
+                              isActive
+                                ? 'bg-white/20 text-white'
+                                : 'text-white/70 hover:bg-white/10 hover:text-white'
+                            )
+                          }
+                        >
+                          <subItem.icon className="w-4 h-4" />
+                          <span>{subItem.label}</span>
+                        </NavLink>
+                      ) : (
+                        <button
+                          key={subItem.label}
+                          onClick={() => handleSubItemClick(subItem)}
+                          className="flex items-center space-x-3 px-4 py-2 rounded-lg transition-all duration-200 text-white/70 hover:bg-white/10 hover:text-white w-full text-left"
+                        >
+                          <subItem.icon className="w-4 h-4" />
+                          <span>{subItem.label}</span>
+                        </button>
+                      )
+                    ))}
+                  </div>
+                )}
+              </div>
+            )
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function Header({ isConnected }: HeaderProps) {
+  const navigate = useNavigate();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [showUserInfoDialog, setShowUserInfoDialog] = useState(false);
+
+  const handleAction = (action: string) => {
+    if (action === 'userInfo') {
+      setShowUserInfoDialog(true);
+    }
+  };
+
+  return (
+    <>
+      <header className="glass-effect relative z-[9999]">
+        {/* Main Header Bar */}
+        <div className="px-4 py-3 flex items-center justify-between">
+          {/* Logo & Mobile Menu Button */}
+          <div className="flex items-center space-x-4">
+            <button
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+              className="lg:hidden text-white/80 hover:text-white transition-colors"
+            >
+              {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+            </button>
+            <div
+              className="cursor-pointer hover:opacity-80 transition-opacity"
+              onClick={() => navigate('/')}
+            >
+              <AmkorLogo height={36} />
+            </div>
+          </div>
+
+          {/* Desktop Navigation */}
+          <nav className="hidden lg:flex items-center space-x-1">
+            {/* 드롭다운 메뉴들 */}
+            {dropdownMenus.map((menu) => (
+              <DropdownNavMenu key={menu.label} menu={menu} onAction={handleAction} />
+            ))}
+
+            {/* 일반 메뉴들 */}
+            {navItems.map((item) => (
+              <NavLink
+                key={item.path}
+                to={item.path!}
+                className={({ isActive }) =>
+                  clsx(
+                    'flex items-center space-x-2 px-4 py-2 rounded-lg transition-all duration-200 text-sm font-medium',
+                    isActive
+                      ? 'bg-white/20 text-white shadow-lg'
+                      : 'text-white/70 hover:bg-white/10 hover:text-white'
+                  )
+                }
+              >
+                <item.icon className="w-4 h-4" />
+                <span>{item.label}</span>
+              </NavLink>
+            ))}
+          </nav>
+
+          {/* Right Section: Connection Status (Icon only) */}
+          <div
+            className={`w-2.5 h-2.5 rounded-full ${
+              isConnected ? 'bg-success-400 animate-pulse' : 'bg-danger-400'
+            }`}
+            title={isConnected ? '연결됨' : '연결 끊김'}
+          />
+        </div>
+
+        {/* Mobile Navigation Dropdown */}
+        {isMobileMenuOpen && (
+          <div className="lg:hidden border-t border-white/10">
+            <nav className="px-4 py-2 space-y-1">
+              {/* 드롭다운 메뉴들 */}
+              {dropdownMenus.map((menu) => (
+                <MobileDropdownMenu
+                  key={menu.label}
+                  menu={menu}
+                  onItemClick={() => setIsMobileMenuOpen(false)}
+                  onAction={handleAction}
+                />
+              ))}
+
+              {/* 일반 메뉴들 */}
+              {navItems.map((item) => (
+                <NavLink
+                  key={item.path}
+                  to={item.path!}
+                  onClick={() => setIsMobileMenuOpen(false)}
+                  className={({ isActive }) =>
+                    clsx(
+                      'flex items-center space-x-3 px-4 py-3 rounded-lg transition-all duration-200',
+                      isActive
+                        ? 'bg-white/20 text-white'
+                        : 'text-white/70 hover:bg-white/10 hover:text-white'
+                    )
+                  }
+                >
+                  <item.icon className="w-5 h-5" />
+                  <span className="font-medium">{item.label}</span>
+                </NavLink>
+              ))}
+            </nav>
+          </div>
+        )}
+      </header>
+
+      {/* User Info Dialog */}
+      <UserInfoDialog
+        isOpen={showUserInfoDialog}
+        onClose={() => setShowUserInfoDialog(false)}
+      />
+    </>
+  );
+}

Project/frontend/src/components/layout/Layout.tsx

@@ -0,0 +1,28 @@
+import { Outlet } from 'react-router-dom';
+import { Header } from './Header';
+import { StatusBar } from './StatusBar';
+import { UserInfo } from '@/types';
+
+interface LayoutProps {
+  isConnected: boolean;
+  user?: UserInfo | null;
+}
+
+export function Layout({ isConnected, user }: LayoutProps) {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-900 via-purple-900 to-indigo-900">
+      <div className="flex flex-col h-screen overflow-hidden">
+        {/* Top Navigation Header */}
+        <Header isConnected={isConnected} />
+
+        {/* Page Content */}
+        <main className="flex-1 overflow-y-auto p-6 custom-scrollbar">
+          <Outlet />
+        </main>
+
+        {/* Bottom Status Bar */}
+        <StatusBar userName={user?.Name} userDept={user?.Dept} isConnected={isConnected} />
+      </div>
+    </div>
+  );
+}

Project/frontend/src/components/layout/StatusBar.tsx

@@ -0,0 +1,79 @@
+import { useState, useEffect } from 'react';
+import { Clock, Wifi, WifiOff } from 'lucide-react';
+import { UserInfoButton } from './UserInfoButton';
+import { comms } from '@/communication';
+
+interface StatusBarProps {
+  userName?: string;
+  userDept?: string;
+  isConnected?: boolean;
+}
+
+export function StatusBar({ userName, userDept, isConnected }: StatusBarProps) {
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [versionDisplay, setVersionDisplay] = useState('');
+
+  useEffect(() => {
+    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  // 앱 버전 로드
+  useEffect(() => {
+    const loadVersion = async () => {
+      try {
+        const result = await comms.getAppVersion();
+        if (result.Success) {
+          setVersionDisplay(result.DisplayVersion);
+        }
+      } catch (error) {
+        console.error('버전 정보 로드 오류:', error);
+      }
+    };
+    loadVersion();
+  }, []);
+
+  return (
+    <footer className="glass-effect px-4 py-2 flex items-center justify-between text-sm">
+      {/* Left: User Info */}
+      <div className="flex items-center space-x-2">
+        <UserInfoButton userName={userName} userDept={userDept} />
+      </div>
+
+      {/* Center: App Version */}
+      <div className="text-white/50">
+        {versionDisplay || 'Loading...'}
+      </div>
+
+      {/* Right: Connection Status & Time */}
+      <div className="flex items-center space-x-4 text-white/70">
+        {/* Connection Status */}
+        <div className="flex items-center space-x-1">
+          {isConnected ? (
+            <Wifi className="w-4 h-4 text-success-400" />
+          ) : (
+            <WifiOff className="w-4 h-4 text-danger-400" />
+          )}
+          <span className={isConnected ? 'text-success-400' : 'text-danger-400'}>
+            {isConnected ? '연결됨' : '연결 끊김'}
+          </span>
+        </div>
+
+        {/* Current Time */}
+        <div className="flex items-center space-x-2">
+          <Clock className="w-4 h-4" />
+          <span>
+            {currentTime.toLocaleString('ko-KR', {
+              year: 'numeric',
+              month: '2-digit',
+              day: '2-digit',
+              hour: '2-digit',
+              minute: '2-digit',
+              second: '2-digit',
+            })}
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+}

Project/frontend/src/components/layout/UserInfoButton.tsx

@@ -0,0 +1,107 @@
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
+import { User, LogOut, X } from 'lucide-react';
+import { comms } from '@/communication';
+
+interface UserInfoButtonProps {
+  userName?: string;
+  userDept?: string;
+}
+
+export function UserInfoButton({ userName, userDept }: UserInfoButtonProps) {
+  const [showLogoutDialog, setShowLogoutDialog] = useState(false);
+  const [processing, setProcessing] = useState(false);
+
+  const handleLogout = async () => {
+    setProcessing(true);
+    try {
+      const result = await comms.logout();
+      if (result.Success) {
+        // 로그아웃 성공 - 페이지 새로고침으로 로그인 화면 표시
+        window.location.reload();
+      } else {
+        alert(result.Message || '로그아웃에 실패했습니다.');
+      }
+    } catch (error) {
+      console.error('로그아웃 오류:', error);
+      alert('서버 연결에 실패했습니다.');
+    } finally {
+      setProcessing(false);
+      setShowLogoutDialog(false);
+    }
+  };
+
+  if (!userName) return null;
+
+  return (
+    <>
+      {/* 사용자 정보 버튼 */}
+      <button
+        onClick={() => setShowLogoutDialog(true)}
+        className="flex items-center space-x-2 text-white/70 hover:text-white transition-colors cursor-pointer"
+      >
+        <User className="w-4 h-4" />
+        <span>{userName}</span>
+        {userDept && <span className="text-white/50">({userDept})</span>}
+      </button>
+
+      {/* 로그아웃 다이얼로그 - Portal로 body에 직접 렌더링 */}
+      {showLogoutDialog && createPortal(
+        <div
+          className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm"
+          onClick={() => setShowLogoutDialog(false)}
+        >
+          <div
+            className="glass-effect rounded-2xl w-full max-w-sm animate-slide-up mx-4"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* 헤더 */}
+            <div className="px-6 py-4 border-b border-white/10 flex items-center justify-between">
+              <h2 className="text-lg font-semibold text-white flex items-center">
+                <LogOut className="w-5 h-5 mr-2" />
+                로그아웃
+              </h2>
+              <button
+                onClick={() => setShowLogoutDialog(false)}
+                className="text-white/70 hover:text-white transition-colors"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            {/* 내용 */}
+            <div className="p-6">
+              <div className="text-center mb-6">
+                <div className="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <User className="w-8 h-8 text-white/70" />
+                </div>
+                <p className="text-white font-medium">{userName}</p>
+                {userDept && <p className="text-white/50 text-sm">{userDept}</p>}
+              </div>
+              <p className="text-white/70 text-center text-sm">
+                로그아웃 하시겠습니까?
+              </p>
+            </div>
+
+            {/* 푸터 */}
+            <div className="px-6 py-4 border-t border-white/10 flex justify-center">
+              <button
+                onClick={handleLogout}
+                disabled={processing}
+                className="bg-danger-500 hover:bg-danger-600 text-white px-6 py-2 rounded-lg transition-colors flex items-center disabled:opacity-50"
+              >
+                {processing ? (
+                  <span className="animate-spin mr-2">⏳</span>
+                ) : (
+                  <LogOut className="w-4 h-4 mr-2" />
+                )}
+                로그아웃
+              </button>
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+    </>
+  );
+}

Project/frontend/src/components/layout/index.ts

@@ -0,0 +1,3 @@
+export { Layout } from './Layout';
+export { Header } from './Header';
+export { StatusBar } from './StatusBar';

Project/frontend/src/components/user/UserInfoDialog.tsx

@@ -0,0 +1,449 @@
+import { useState, useEffect } from 'react';
+import { X, Save, Key, User, Mail, Building2, Briefcase, Calendar, FileText } from 'lucide-react';
+import { clsx } from 'clsx';
+import { comms } from '@/communication';
+import { UserInfoDetail } from '@/types';
+
+interface UserInfoDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  userId?: string;
+  onSave?: () => void;
+}
+
+interface PasswordDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: (oldPassword: string, newPassword: string) => void;
+}
+
+function PasswordDialog({ isOpen, onClose, onConfirm }: PasswordDialogProps) {
+  const [oldPassword, setOldPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+
+  const handleSubmit = () => {
+    if (!newPassword) {
+      setError('새 비밀번호를 입력하세요.');
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setError('새 비밀번호가 일치하지 않습니다.');
+      return;
+    }
+    onConfirm(oldPassword, newPassword);
+    setOldPassword('');
+    setNewPassword('');
+    setConfirmPassword('');
+    setError('');
+    onClose();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[10001]">
+      <div className="glass-effect-solid rounded-xl p-6 w-full max-w-sm">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-lg font-semibold text-white flex items-center gap-2">
+            <Key className="w-5 h-5" />
+            비밀번호 변경
+          </h3>
+          <button onClick={onClose} className="text-white/60 hover:text-white">
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm text-white/70 mb-1">기존 비밀번호</label>
+            <input
+              type="password"
+              value={oldPassword}
+              onChange={(e) => setOldPassword(e.target.value)}
+              className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
+              placeholder="기존 비밀번호"
+            />
+          </div>
+          <div>
+            <label className="block text-sm text-white/70 mb-1">새 비밀번호</label>
+            <input
+              type="password"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
+              placeholder="새 비밀번호"
+            />
+          </div>
+          <div>
+            <label className="block text-sm text-white/70 mb-1">새 비밀번호 확인</label>
+            <input
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
+              placeholder="새 비밀번호 확인"
+            />
+          </div>
+
+          {error && <p className="text-red-400 text-sm">{error}</p>}
+
+          <div className="flex justify-end gap-2 mt-4">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-white/70 hover:text-white transition-colors"
+            >
+              취소
+            </button>
+            <button
+              onClick={handleSubmit}
+              className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white transition-colors"
+            >
+              변경
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function UserInfoDialog({ isOpen, onClose, userId, onSave }: UserInfoDialogProps) {
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [showPasswordDialog, setShowPasswordDialog] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+
+  const [formData, setFormData] = useState<UserInfoDetail>({
+    Id: '',
+    NameK: '',
+    NameE: '',
+    Dept: '',
+    Grade: '',
+    Email: '',
+    Tel: '',
+    Hp: '',
+    DateIn: '',
+    DateO: '',
+    Memo: '',
+    Process: '',
+    State: '',
+    UseJobReport: false,
+    UseUserState: false,
+    ExceptHoly: false,
+    Level: 0,
+  });
+
+  useEffect(() => {
+    if (isOpen) {
+      loadUserInfo();
+    }
+  }, [isOpen, userId]);
+
+  const loadUserInfo = async () => {
+    setLoading(true);
+    setMessage(null);
+    try {
+      const response = userId
+        ? await comms.getUserInfoById(userId)
+        : await comms.getCurrentUserInfo();
+
+      if (response.Success && response.Data) {
+        setFormData(response.Data);
+      } else {
+        setMessage({ type: 'error', text: response.Message || '사용자 정보를 불러올 수 없습니다.' });
+      }
+    } catch (error) {
+      setMessage({ type: 'error', text: '사용자 정보 조회 중 오류가 발생했습니다.' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    setMessage(null);
+    try {
+      const response = await comms.saveUserInfo(formData);
+      if (response.Success) {
+        setMessage({ type: 'success', text: '저장되었습니다.' });
+        onSave?.();
+        setTimeout(() => {
+          onClose();
+        }, 1000);
+      } else {
+        setMessage({ type: 'error', text: response.Message || '저장에 실패했습니다.' });
+      }
+    } catch (error) {
+      setMessage({ type: 'error', text: '저장 중 오류가 발생했습니다.' });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleChangePassword = async (oldPassword: string, newPassword: string) => {
+    try {
+      const response = await comms.changePassword(oldPassword, newPassword);
+      if (response.Success) {
+        setMessage({ type: 'success', text: '비밀번호가 변경되었습니다.' });
+      } else {
+        setMessage({ type: 'error', text: response.Message || '비밀번호 변경에 실패했습니다.' });
+      }
+    } catch (error) {
+      setMessage({ type: 'error', text: '비밀번호 변경 중 오류가 발생했습니다.' });
+    }
+  };
+
+  const handleInputChange = (field: keyof UserInfoDetail, value: string | boolean) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[10000]">
+        <div className="glass-effect-solid rounded-xl w-full max-w-2xl max-h-[90vh] overflow-hidden">
+          {/* Header */}
+          <div className="flex items-center justify-between px-6 py-4 border-b border-white/10">
+            <h2 className="text-xl font-semibold text-white flex items-center gap-2">
+              <User className="w-6 h-6" />
+              사용자 정보
+            </h2>
+            <button
+              onClick={onClose}
+              className="text-white/60 hover:text-white transition-colors"
+            >
+              <X className="w-6 h-6" />
+            </button>
+          </div>
+
+          {/* Content */}
+          <div className="p-6 overflow-y-auto max-h-[calc(90vh-140px)] custom-scrollbar">
+            {loading ? (
+              <div className="flex items-center justify-center py-12">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
+              </div>
+            ) : (
+              <div className="space-y-6">
+                {/* 기본 정보 */}
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm text-white/70 mb-1 flex items-center gap-1">
+                      <User className="w-4 h-4" />
+                      사원번호
+                    </label>
+                    <input
+                      type="text"
+                      value={formData.Id}
+                      disabled
+                      className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white/50"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm text-white/70 mb-1">이름</label>
+                    <input
+                      type="text"
+                      value={formData.NameK}
+                      onChange={(e) => handleInputChange('NameK', e.target.value)}
+                      className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
+                      placeholder="이름"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm text-white/70 mb-1">영문이름</label>
+                    <input
+                      type="text"
+                      value={formData.NameE}
+                      onChange={(e) => handleInputChange('NameE', e.target.value)}
+                      className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
+                      placeholder="English Name"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm text-white/70 mb-1 flex items-center gap-1">
+                      <Building2 className="w-4 h-4" />
+                      부서
+                    </label>
+                    <input
+                      type="text"
+                      value={formData.Dept}
+                      onChange={(e) => handleInputChange('Dept', e.target.value)}
+                      className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
+                      placeholder="부서"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm text-white/70 mb-1 flex items-center gap-1">
+                      <Briefcase className="w-4 h-4" />
+                      직책
+                    </label>
+                    <input
+                      type="text"
+                      value={formData.Grade}
+                      onChange={(e) => handleInputChange('Grade', e.target.value)}
+                      className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
+                      placeholder="직책"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm text-white/70 mb-1">공정</label>
+                    <input
+                      type="text"
+                      value={formData.Process}
+                      onChange={(e) => handleInputChange('Process', e.target.value)}
+                      className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
+                      placeholder="공정"
+                    />
+                  </div>
+                </div>
+
+                {/* 이메일 */}
+                <div>
+                  <label className="block text-sm text-white/70 mb-1 flex items-center gap-1">
+                    <Mail className="w-4 h-4" />
+                    이메일
+                  </label>
+                  <input
+                    type="email"
+                    value={formData.Email}
+                    onChange={(e) => handleInputChange('Email', e.target.value)}
+                    className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
+                    placeholder="email@example.com"
+                  />
+                </div>
+
+                {/* 입/퇴사 정보 */}
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm text-white/70 mb-1 flex items-center gap-1">
+                      <Calendar className="w-4 h-4" />
+                      입사일
+                    </label>
+                    <input
+                      type="text"
+                      value={formData.DateIn}
+                      onChange={(e) => handleInputChange('DateIn', e.target.value)}
+                      className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
+                      placeholder="YYYY-MM-DD"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm text-white/70 mb-1 flex items-center gap-1">
+                      <Calendar className="w-4 h-4" />
+                      퇴사일
+                    </label>
+                    <input
+                      type="text"
+                      value={formData.DateO}
+                      onChange={(e) => handleInputChange('DateO', e.target.value)}
+                      className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
+                      placeholder="YYYY-MM-DD"
+                    />
+                  </div>
+                </div>
+
+                {/* 비고 */}
+                <div>
+                  <label className="block text-sm text-white/70 mb-1 flex items-center gap-1">
+                    <FileText className="w-4 h-4" />
+                    비고
+                  </label>
+                  <textarea
+                    value={formData.Memo}
+                    onChange={(e) => handleInputChange('Memo', e.target.value)}
+                    rows={3}
+                    className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40 resize-none"
+                    placeholder="비고"
+                  />
+                </div>
+
+                {/* 옵션 체크박스 */}
+                <div className="flex flex-wrap gap-6">
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={formData.UseJobReport}
+                      onChange={(e) => handleInputChange('UseJobReport', e.target.checked)}
+                      className="w-4 h-4 rounded border-white/20 bg-white/10 text-blue-600"
+                    />
+                    <span className="text-white/70">업무일지 사용</span>
+                  </label>
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={formData.UseUserState}
+                      onChange={(e) => handleInputChange('UseUserState', e.target.checked)}
+                      className="w-4 h-4 rounded border-white/20 bg-white/10 text-blue-600"
+                    />
+                    <span className="text-white/70">계정 사용</span>
+                  </label>
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={formData.ExceptHoly}
+                      onChange={(e) => handleInputChange('ExceptHoly', e.target.checked)}
+                      className="w-4 h-4 rounded border-white/20 bg-white/10 text-blue-600"
+                    />
+                    <span className="text-white/70">휴가 제외</span>
+                  </label>
+                </div>
+
+                {/* 메시지 */}
+                {message && (
+                  <div
+                    className={clsx(
+                      'px-4 py-2 rounded-lg text-sm',
+                      message.type === 'success' ? 'bg-green-600/20 text-green-400' : 'bg-red-600/20 text-red-400'
+                    )}
+                  >
+                    {message.text}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Footer */}
+          <div className="flex items-center justify-between px-6 py-4 border-t border-white/10">
+            <button
+              onClick={() => setShowPasswordDialog(true)}
+              className="flex items-center gap-2 px-4 py-2 bg-yellow-600/20 hover:bg-yellow-600/30 text-yellow-400 rounded-lg transition-colors"
+            >
+              <Key className="w-4 h-4" />
+              비밀번호 변경
+            </button>
+            <div className="flex gap-2">
+              <button
+                onClick={onClose}
+                className="px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-white/70 hover:text-white transition-colors"
+              >
+                취소
+              </button>
+              <button
+                onClick={handleSave}
+                disabled={saving}
+                className={clsx(
+                  'flex items-center gap-2 px-4 py-2 rounded-lg transition-colors',
+                  saving
+                    ? 'bg-blue-600/50 text-white/50 cursor-not-allowed'
+                    : 'bg-blue-600 hover:bg-blue-700 text-white'
+                )}
+              >
+                <Save className="w-4 h-4" />
+                {saving ? '저장 중...' : '저장'}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <PasswordDialog
+        isOpen={showPasswordDialog}
+        onClose={() => setShowPasswordDialog(false)}
+        onConfirm={handleChangePassword}
+      />
+    </>
+  );
+}

Project/frontend/src/components/user/index.ts

@@ -0,0 +1 @@
+export { UserInfoDialog } from './UserInfoDialog';