Todo 관리 시스템 및 공통 네비게이션 구현

- Todo CRUD 기능 구현 (TodoController, TodoModel)
- 서버 기반 공통 네비게이션 시스템 구축
- 모든 웹 페이지에 통일된 네비게이션 적용
- Todo 테이블 행 클릭으로 편집 모달 직접 접근 기능
- 네비게이션 메뉴 서버 설정 및 폴백 시스템

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

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

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-    "dotnet.preferCSharpExtension": true
-}

Project/Web/Controller/CommonController.cs

@@ -333,6 +333,82 @@ namespace Project.Web.Controllers
             }
         }
 
+        [HttpGet]
+        public HttpResponseMessage GetNavigationMenu()
+        {
+            try
+            {
+                // 메뉴 정보를 하드코딩하거나 데이터베이스에서 가져올 수 있습니다.
+                // 향후 사용자 권한에 따른 메뉴 표시/숨김 기능도 추가 가능합니다.
+                var menuItems = new[]
+                {
+                    new {
+                        key = "dashboard",
+                        title = "대시보드",
+                        url = "/Dashboard/",
+                        icon = "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z",
+                        isVisible = true,
+                        sortOrder = 1
+                    },
+                    new {
+                        key = "common",
+                        title = "공용코드",
+                        url = "/Common",
+                        icon = "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z",
+                        isVisible = true,
+                        sortOrder = 2
+                    },
+                    new {
+                        key = "jobreport",
+                        title = "업무일지",
+                        url = "/Jobreport/",
+                        icon = "M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2",
+                        isVisible = true,
+                        sortOrder = 3
+                    },
+                    new {
+                        key = "kuntae",
+                        title = "근태관리",
+                        url = "/Kuntae/",
+                        icon = "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z",
+                        isVisible = true,
+                        sortOrder = 4
+                    },
+                    new {
+                        key = "todo",
+                        title = "할일관리",
+                        url = "/Todo/",
+                        icon = "M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2M12 12l2 2 4-4",
+                        isVisible = true,
+                        sortOrder = 5
+                    }
+                };
+
+                // 사용자 권한에 따른 메뉴 필터링 로직을 여기에 추가할 수 있습니다.
+                // 예: var userLevel = FCOMMON.info.Login.level;
+                // if (userLevel < 5) { /* 특정 메뉴 숨김 */ }
+
+                var response = new
+                {
+                    Success = true,
+                    Data = menuItems,
+                    Message = "메뉴 정보를 성공적으로 가져왔습니다."
+                };
+
+                return CreateJsonResponse(response);
+            }
+            catch (Exception ex)
+            {
+                var response = new
+                {
+                    Success = false,
+                    Data = (object)null,
+                    Message = "메뉴 정보를 가져오는 중 오류가 발생했습니다: " + ex.Message
+                };
+                return CreateJsonResponse(response);
+            }
+        }
+
         private HttpResponseMessage CreateJsonResponse(object data)
         {
             var json = JsonConvert.SerializeObject(data, new JsonSerializerSettings

Project/Web/Controller/TodoController.cs

@@ -0,0 +1,389 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Net.Http;
+using System.Web.Http;
+using Newtonsoft.Json;
+using FCOMMON;
+using Project.Web.Model;
+
+namespace Project.Web.Controllers
+{
+    public class TodoController : BaseController
+    {
+        [HttpGet]
+        public HttpResponseMessage Index()
+        {
+            var filePath = System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Web", "wwwroot", "Todo", "index.html");
+            var contents = string.Empty;
+
+            if (System.IO.File.Exists(filePath))
+            {
+                contents = System.IO.File.ReadAllText(filePath, System.Text.Encoding.UTF8);
+            }
+            else
+            {
+                contents = "<html><body><h1>404 - File Not Found</h1><p>The requested file was not found: " + filePath + "</p></body></html>";
+            }
+
+            ApplyCommonValue(ref contents);
+
+            var resp = new HttpResponseMessage()
+            {
+                Content = new StringContent(
+                    contents,
+                    System.Text.Encoding.UTF8,
+                    "text/html")
+            };
+
+            return resp;
+        }
+
+        [HttpGet]
+        public HttpResponseMessage GetTodos()
+        {
+            try
+            {
+                var currentUser = GetCurrentUser();
+                if (currentUser == null)
+                {
+                    return CreateJsonResponse(new
+                    {
+                        Success = false,
+                        Message = "로그인되지 않은 상태입니다."
+                    });
+                }
+
+                string gcode = FCOMMON.info.Login.gcode;
+                string uid = FCOMMON.info.Login.no;
+
+                var sql = "SELECT * FROM EETGW_Todo WHERE gcode = @gcode AND uid = @uid ORDER BY flag DESC, seqno DESC, expire ASC, wdate ASC";
+                var todos = DBM.Query<TodoModel>(sql, new { gcode = gcode, uid = uid });
+
+                return CreateJsonResponse(new
+                {
+                    Success = true,
+                    Data = todos
+                });
+            }
+            catch (Exception ex)
+            {
+                return CreateJsonResponse(new
+                {
+                    Success = false,
+                    Message = "Todo 목록을 가져오는 중 오류가 발생했습니다: " + ex.Message
+                });
+            }
+        }
+
+        [HttpGet]
+        public HttpResponseMessage GetUrgentTodos()
+        {
+            try
+            {
+                var currentUser = GetCurrentUser();
+                if (currentUser == null)
+                {
+                    return CreateJsonResponse(new
+                    {
+                        Success = false,
+                        Message = "로그인되지 않은 상태입니다."
+                    });
+                }
+
+                string gcode = FCOMMON.info.Login.gcode;
+                string uid = FCOMMON.info.Login.no;
+
+                var sql = @"
+                    SELECT TOP 5 * FROM EETGW_Todo 
+                    WHERE gcode = @gcode AND uid = @uid 
+                    AND (expire IS NULL OR CAST(expire AS DATE) >= CAST(GETDATE() AS DATE))
+                    ORDER BY flag DESC, seqno DESC, expire ASC, wdate ASC";
+                
+                var todos = DBM.Query<TodoModel>(sql, new { gcode = gcode, uid = uid });
+
+                return CreateJsonResponse(new
+                {
+                    Success = true,
+                    Data = todos
+                });
+            }
+            catch (Exception ex)
+            {
+                return CreateJsonResponse(new
+                {
+                    Success = false,
+                    Message = "급한 Todo 목록을 가져오는 중 오류가 발생했습니다: " + ex.Message
+                });
+            }
+        }
+
+        [HttpPost]
+        public HttpResponseMessage CreateTodo([FromBody] TodoModel todo)
+        {
+            try
+            {
+                var currentUser = GetCurrentUser();
+                if (currentUser == null)
+                {
+                    return CreateJsonResponse(new
+                    {
+                        Success = false,
+                        Message = "로그인되지 않은 상태입니다."
+                    });
+                }
+
+                if (string.IsNullOrEmpty(todo.remark))
+                {
+                    return CreateJsonResponse(new
+                    {
+                        Success = false,
+                        Message = "할일 내용은 필수입니다."
+                    });
+                }
+
+                todo.gcode = FCOMMON.info.Login.gcode;
+                todo.uid = FCOMMON.info.Login.no;
+                todo.wuid = FCOMMON.info.Login.no;
+                todo.wdate = DateTime.Now;
+
+                if (todo.seqno == null) todo.seqno = 0;
+                if (todo.flag == null) todo.flag = false;
+
+                var sql = @"
+                    INSERT INTO EETGW_Todo (gcode, uid, title, remark, flag, expire, seqno, request, wuid, wdate)
+                    VALUES (@gcode, @uid, @title, @remark, @flag, @expire, @seqno, @request, @wuid, @wdate);
+                    SELECT SCOPE_IDENTITY();";
+
+                var newId = DBM.QuerySingle<int>(sql, todo);
+
+                return CreateJsonResponse(new
+                {
+                    Success = true,
+                    Message = "할일이 추가되었습니다.",
+                    Data = new { idx = newId }
+                });
+            }
+            catch (Exception ex)
+            {
+                return CreateJsonResponse(new
+                {
+                    Success = false,
+                    Message = "할일 추가 중 오류가 발생했습니다: " + ex.Message
+                });
+            }
+        }
+
+        [HttpPut]
+        public HttpResponseMessage UpdateTodo([FromBody] TodoModel todo)
+        {
+            try
+            {
+                var currentUser = GetCurrentUser();
+                if (currentUser == null)
+                {
+                    return CreateJsonResponse(new
+                    {
+                        Success = false,
+                        Message = "로그인되지 않은 상태입니다."
+                    });
+                }
+
+                if (todo.idx <= 0)
+                {
+                    return CreateJsonResponse(new
+                    {
+                        Success = false,
+                        Message = "유효하지 않은 Todo ID입니다."
+                    });
+                }
+
+                if (string.IsNullOrEmpty(todo.remark))
+                {
+                    return CreateJsonResponse(new
+                    {
+                        Success = false,
+                        Message = "할일 내용은 필수입니다."
+                    });
+                }
+
+                string gcode = FCOMMON.info.Login.gcode;
+                string uid = FCOMMON.info.Login.no;
+
+                var sql = @"
+                    UPDATE EETGW_Todo 
+                    SET title = @title, remark = @remark, flag = @flag, expire = @expire, seqno = @seqno, request = @request
+                    WHERE idx = @idx AND gcode = @gcode AND uid = @uid";
+
+                var affectedRows = DBM.Execute(sql, new
+                {
+                    title = todo.title,
+                    remark = todo.remark,
+                    flag = todo.flag ?? false,
+                    expire = todo.expire,
+                    seqno = todo.seqno ?? 0,
+                    request = todo.request,
+                    idx = todo.idx,
+                    gcode = gcode,
+                    uid = uid
+                });
+
+                if (affectedRows == 0)
+                {
+                    return CreateJsonResponse(new
+                    {
+                        Success = false,
+                        Message = "수정할 할일을 찾을 수 없습니다."
+                    });
+                }
+
+                return CreateJsonResponse(new
+                {
+                    Success = true,
+                    Message = "할일이 수정되었습니다."
+                });
+            }
+            catch (Exception ex)
+            {
+                return CreateJsonResponse(new
+                {
+                    Success = false,
+                    Message = "할일 수정 중 오류가 발생했습니다: " + ex.Message
+                });
+            }
+        }
+
+        [HttpDelete]
+        public HttpResponseMessage DeleteTodo(int id)
+        {
+            try
+            {
+                var currentUser = GetCurrentUser();
+                if (currentUser == null)
+                {
+                    return CreateJsonResponse(new
+                    {
+                        Success = false,
+                        Message = "로그인되지 않은 상태입니다."
+                    });
+                }
+
+                if (id <= 0)
+                {
+                    return CreateJsonResponse(new
+                    {
+                        Success = false,
+                        Message = "유효하지 않은 Todo ID입니다."
+                    });
+                }
+
+                string gcode = FCOMMON.info.Login.gcode;
+                string uid = FCOMMON.info.Login.no;
+
+                var sql = "DELETE FROM EETGW_Todo WHERE idx = @idx AND gcode = @gcode AND uid = @uid";
+                var affectedRows = DBM.Execute(sql, new { idx = id, gcode = gcode, uid = uid });
+
+                if (affectedRows == 0)
+                {
+                    return CreateJsonResponse(new
+                    {
+                        Success = false,
+                        Message = "삭제할 할일을 찾을 수 없습니다."
+                    });
+                }
+
+                return CreateJsonResponse(new
+                {
+                    Success = true,
+                    Message = "할일이 삭제되었습니다."
+                });
+            }
+            catch (Exception ex)
+            {
+                return CreateJsonResponse(new
+                {
+                    Success = false,
+                    Message = "할일 삭제 중 오류가 발생했습니다: " + ex.Message
+                });
+            }
+        }
+
+        [HttpGet]
+        public HttpResponseMessage GetTodo(int id)
+        {
+            try
+            {
+                var currentUser = GetCurrentUser();
+                if (currentUser == null)
+                {
+                    return CreateJsonResponse(new
+                    {
+                        Success = false,
+                        Message = "로그인되지 않은 상태입니다."
+                    });
+                }
+
+                if (id <= 0)
+                {
+                    return CreateJsonResponse(new
+                    {
+                        Success = false,
+                        Message = "유효하지 않은 Todo ID입니다."
+                    });
+                }
+
+                string gcode = FCOMMON.info.Login.gcode;
+                string uid = FCOMMON.info.Login.no;
+
+                var sql = "SELECT * FROM EETGW_Todo WHERE idx = @idx AND gcode = @gcode AND uid = @uid";
+                var todo = DBM.QuerySingleOrDefault<TodoModel>(sql, new { idx = id, gcode = gcode, uid = uid });
+
+                if (todo == null)
+                {
+                    return CreateJsonResponse(new
+                    {
+                        Success = false,
+                        Message = "할일을 찾을 수 없습니다."
+                    });
+                }
+
+                return CreateJsonResponse(new
+                {
+                    Success = true,
+                    Data = todo
+                });
+            }
+            catch (Exception ex)
+            {
+                return CreateJsonResponse(new
+                {
+                    Success = false,
+                    Message = "할일 조회 중 오류가 발생했습니다: " + ex.Message
+                });
+            }
+        }
+
+        private object GetCurrentUser()
+        {
+            if (string.IsNullOrEmpty(FCOMMON.info.Login.no)) return null;
+            else return FCOMMON.info.Login;
+        }
+
+        private HttpResponseMessage CreateJsonResponse(object data)
+        {
+            var json = JsonConvert.SerializeObject(data, new JsonSerializerSettings
+            {
+                NullValueHandling = NullValueHandling.Ignore,
+                DateFormatString = "yyyy-MM-dd HH:mm:ss"
+            });
+
+            return new HttpResponseMessage()
+            {
+                Content = new StringContent(
+                    json,
+                    System.Text.Encoding.UTF8,
+                    "application/json")
+            };
+        }
+    }
+}

Project/Web/Model/TodoModel.cs

@@ -0,0 +1,68 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Project.Web.Model
+{
+    public class TodoModel
+    {
+        /// <summary>
+        /// 데이터베이스 고유 번호(자동증가)
+        /// </summary>
+        public int idx { get; set; }
+
+        /// <summary>
+        /// 사용자 그룹코드(부서코드)
+        /// </summary>
+        public string gcode { get; set; }
+
+        /// <summary>
+        /// 사용자ID
+        /// </summary>
+        public string uid { get; set; }
+
+        /// <summary>
+        /// 할일제목(제목없이 내용만 있을 수 있다)
+        /// </summary>
+        public string title { get; set; }
+        
+        /// <summary>
+        /// 할일내용(내용은 반드시 있어야 한다)
+        /// </summary>
+        public string remark { get; set; }
+        
+        /// <summary>
+        /// 플래그지정된것은 상단에 표시된다.
+        /// </summary>
+        public bool? flag { get; set; }
+
+        /// <summary>
+        /// 만료일(작업만료일)
+        /// </summary>
+        public DateTime? expire { get; set; }
+
+        /// <summary>
+        /// 작업중요도 높을수록 위에 표시된다 기본값 0
+        /// </summary>
+        public int? seqno { get; set; }
+
+        /// <summary>
+        /// 업무요청자
+        /// </summary>
+        public string request { get; set; }
+
+        /// <summary>
+        /// 자료생성자id
+        /// 로그인된 사용자id로 자동셋팅
+        /// </summary>
+        public string wuid { get; set; }
+
+        /// <summary>
+        /// 자료생성일시
+        /// 자동 셋팅
+        /// </summary>
+        public DateTime wdate { get; set; } 
+    }
+}

Project/Web/Startup.cs

@@ -44,17 +44,7 @@ namespace Project.OWIN
             app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
             app.UseWebApi(config);
 
-            // 정적 파일 서빙 설정
+            // 캐시 방지 미들웨어 추가 (정적 파일 서빙 전에 적용)
-            var options = new FileServerOptions
-            {
-                EnableDefaultFiles = true,
-                DefaultFilesOptions = { DefaultFileNames = { "index.html" } },
-                FileSystem = new Microsoft.Owin.FileSystems.PhysicalFileSystem("Web/wwwroot")
-            };
-
-            app.UseFileServer(options);
-
-            // 캐시 방지 미들웨어 추가
             app.Use(async (context, next) =>
             {
                 if (context.Request.Path.Value.EndsWith(".js") || context.Request.Path.Value.EndsWith(".css"))
@@ -66,6 +56,16 @@ namespace Project.OWIN
                 await next();
             });
 
+            // 정적 파일 서빙 설정
+            var options = new FileServerOptions
+            {
+                EnableDefaultFiles = true,
+                DefaultFilesOptions = { DefaultFileNames = { "index.html" } },
+                FileSystem = new Microsoft.Owin.FileSystems.PhysicalFileSystem("Web/wwwroot")
+            };
+
+            app.UseFileServer(options);
+
             //appBuilder.UseFileServer(new FileServerOptions
             //{
             //    RequestPath = new PathString(string.Empty),

Project/Web/wwwroot/Common.html

@@ -96,12 +96,6 @@
 </head>
 <body class="gradient-bg min-h-screen">
     <div class="container mx-auto px-4 py-8">
-        <!-- 헤더 -->
-        <div class="text-center mb-8 animate-fade-in">
-            <h1 class="text-4xl font-bold text-white mb-2">공용코드 관리</h1>
-            <p class="text-white/80 text-lg">시스템 공용코드를 관리합니다</p>
-        </div>
-
         <!-- 개발중 경고 메시지 -->
         <div class="bg-orange-500 rounded-lg p-4 mb-6 border-l-4 border-orange-700 animate-slide-up shadow-lg">
             <div class="flex items-center">
@@ -277,41 +271,72 @@
         class CommonNavigation {
             constructor(currentPage = '') {
                 this.currentPage = currentPage;
+                this.menuItems = [];
                 this.init();
             }
 
-            init() {
+            async init() {
+                try {
+                    await this.loadMenuItems();
+                    this.createNavigation();
+                    this.addEventListeners();
+                } catch (error) {
+                    console.error('Navigation initialization failed:', error);
+                    this.createFallbackNavigation();
+                }
+            }
+
+            async loadMenuItems() {
+                try {
+                    const response = await fetch('/Common/GetNavigationMenu');
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    const data = await response.json();
+                    
+                    if (data.Success && data.Data) {
+                        this.menuItems = data.Data;
+                    } else {
+                        throw new Error(data.Message || 'Failed to load menu items');
+                    }
+                } catch (error) {
+                    console.error('Failed to load navigation menu:', error);
+                    this.menuItems = this.getDefaultMenuItems();
+                }
+            }
+
+            getDefaultMenuItems() {
+                return [
+                    { key: 'dashboard', title: '대시보드', url: '/Dashboard/', icon: 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z', isVisible: true, sortOrder: 1 },
+                    { key: 'common', title: '공용코드', url: '/Common', icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z', isVisible: true, sortOrder: 2 },
+                    { key: 'jobreport', title: '업무일지', url: '/Jobreport/', icon: 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2', isVisible: true, sortOrder: 3 },
+                    { key: 'kuntae', title: '근태관리', url: '/Kuntae/', icon: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z', isVisible: true, sortOrder: 4 },
+                    { key: 'todo', title: '할일관리', url: '/Todo/', icon: 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2M12 12l2 2 4-4', isVisible: true, sortOrder: 5 }
+                ];
+            }
+
+            createFallbackNavigation() {
                 this.createNavigation();
-                this.addEventListeners();
             }
 
             createNavigation() {
                 const nav = document.createElement('nav');
                 nav.className = 'glass-effect border-b border-white/10';
                 nav.innerHTML = this.getNavigationHTML();
-                
-                // body의 첫 번째 자식으로 추가
                 document.body.insertBefore(nav, document.body.firstChild);
             }
 
             getNavigationHTML() {
+                const visibleItems = this.menuItems.filter(item => item.isVisible).sort((a, b) => a.sortOrder - b.sortOrder);
                 return `
                     <div class="container mx-auto px-4">
                         <div class="flex items-center justify-between h-16">
-                            <!-- 로고/타이틀 -->
                             <div class="flex items-center">
                                 <h2 class="text-xl font-bold text-white">GroupWare</h2>
                             </div>
-                            
-                            <!-- 메뉴 -->
                             <div class="hidden md:flex items-center space-x-8">
-                                ${this.getMenuItemHTML('dashboard', '/Dashboard/', '대시보드', 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z')}
+                                ${visibleItems.map(item => this.getMenuItemHTML(item)).join('')}
-                                ${this.getMenuItemHTML('common', '/Common', '공용코드', 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z')}
-                                ${this.getMenuItemHTML('jobreport', '/Jobreport/', '업무일지', 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2')}
-                                ${this.getMenuItemHTML('kuntae', '/Kuntae/', '근태관리', 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z')}
                             </div>
-                            
-                            <!-- 모바일 메뉴 버튼 -->
                             <div class="md:hidden">
                                 <button id="mobile-menu-button" class="text-white/80 hover:text-white transition-colors p-2">
                                     <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -320,42 +345,37 @@
                                 </button>
                             </div>
                         </div>
-                        
-                        <!-- 모바일 메뉴 -->
                         <div id="mobile-menu" class="md:hidden hidden border-t border-white/10 pt-4 pb-4">
-                            ${this.getMobileMenuItemHTML('dashboard', '/Dashboard/', '대시보드', 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z')}
+                            ${visibleItems.map(item => this.getMobileMenuItemHTML(item)).join('')}
-                            ${this.getMobileMenuItemHTML('common', '/Common', '공용코드', 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z')}
-                            ${this.getMobileMenuItemHTML('jobreport', '/Jobreport/', '업무일지', 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2')}
-                            ${this.getMobileMenuItemHTML('kuntae', '/Kuntae/', '근태관리', 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z')}
                         </div>
                     </div>
                 `;
             }
 
-            getMenuItemHTML(pageKey, href, text, svgPath) {
+            getMenuItemHTML(item) {
-                const isActive = this.currentPage === pageKey;
+                const isActive = this.currentPage === item.key;
                 const activeClass = isActive ? 'text-white bg-white/20' : 'text-white/80 hover:text-white hover:bg-white/10';
                 
                 return `
-                    <a href="${href}" class="${activeClass} transition-colors px-3 py-2 rounded-lg">
+                    <a href="${item.url}" class="${activeClass} transition-colors px-3 py-2 rounded-lg">
                         <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${svgPath}"></path>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${item.icon}"></path>
                         </svg>
-                        ${text}
+                        ${item.title}
                     </a>
                 `;
             }
 
-            getMobileMenuItemHTML(pageKey, href, text, svgPath) {
+            getMobileMenuItemHTML(item) {
-                const isActive = this.currentPage === pageKey;
+                const isActive = this.currentPage === item.key;
                 const activeClass = isActive ? 'text-white bg-white/20' : 'text-white/80 hover:text-white hover:bg-white/10';
                 
                 return `
-                    <a href="${href}" class="block ${activeClass} transition-colors px-3 py-2 rounded-lg mb-2">
+                    <a href="${item.url}" class="block ${activeClass} transition-colors px-3 py-2 rounded-lg mb-2">
                         <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${svgPath}"></path>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${item.icon}"></path>
                         </svg>
-                        ${text}
+                        ${item.title}
                     </a>
                 `;
             }
@@ -373,18 +393,6 @@
             }
         }
 
-        // 전역 함수로 내비게이션 초기화
-        function initNavigation(currentPage = '') {
-            // DOM이 로드된 후에 실행
-            if (document.readyState === 'loading') {
-                document.addEventListener('DOMContentLoaded', () => {
-                    new CommonNavigation(currentPage);
-                });
-            } else {
-                new CommonNavigation(currentPage);
-            }
-        }
-
         let currentData = [];
         let deleteTargetIdx = null;
         let groupData = [];
@@ -709,6 +717,17 @@
             }
         });
 
+        // 전역 함수로 내비게이션 초기화
+        function initNavigation(currentPage = '') {
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', () => {
+                    new CommonNavigation(currentPage);
+                });
+            } else {
+                new CommonNavigation(currentPage);
+            }
+        }
+
         // 공통 네비게이션 초기화
         initNavigation('common');
     </script>

Project/Web/wwwroot/DashBoard/index.html

@@ -101,7 +101,7 @@
         
         /* 스크롤바 스타일링 */
         .custom-scrollbar::-webkit-scrollbar {
-            width: var(--scrollbar-width, 16px); /* 동적 스크롤바 너비 */
+            width: 16px;
         }
         
         .custom-scrollbar::-webkit-scrollbar-track {
@@ -124,21 +124,6 @@
     <div class="container mx-auto px-4 py-8">
         <!-- 헤더 -->
         <div class="text-center mb-8 animate-fade-in">
-            <h1 class="text-4xl font-bold text-white mb-2">근태현황 대시보드</h1>
-            <p class="text-white/80 text-lg">-- 기능 테스트 중입니다 --</p>
-            
-            <!-- 스크롤바 설정 -->
-            <div class="mt-4 flex items-center justify-center gap-4">
-                <label class="text-white/70 text-sm font-medium">스크롤바 크기:</label>
-                <select id="scrollbarSize" class="bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all">
-                    <option value="8">작게 (8px)</option>
-                    <option value="12">보통 (12px)</option>
-                    <option value="16" selected>크게 (16px)</option>
-                    <option value="20">매우 크게 (20px)</option>
-                    <option value="24">터치용 (24px)</option>
-                    <option value="32">매우 터치용 (32px)</option>
-                </select>
-            </div>
         </div>
 
         <!-- 통계 카드 -->
@@ -218,36 +203,70 @@
                     </div>
                 </div>
             </div>
+        </div>
+
+        <!-- 통계 카드들을 새로운 컨테이너로 이동 -->
+        <div class="mb-8">
 
 
         </div>
 
-        <!-- 휴가자 현황 테이블 -->
+        <!-- 2칸 레이아웃: 좌측 휴가현황, 우측 할일 -->
-        <div class="glass-effect rounded-2xl overflow-hidden animate-slide-up">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 animate-slide-up">
-            <div class="px-6 py-4 border-b border-white/10">
+            <!-- 좌측: 휴가/기타 현황 -->
-                <h2 class="text-xl font-semibold text-white flex items-center">
+            <div class="glass-effect rounded-2xl overflow-hidden">
-                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div class="px-6 py-4 border-b border-white/10">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
+                    <h2 class="text-xl font-semibold text-white flex items-center">
-                    </svg>
+                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    휴가/기타 현황
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                </h2>
+                        </svg>
+                        휴가/기타 현황
+                    </h2>
+                </div>
+                <div class="overflow-x-auto max-h-96 custom-scrollbar">
+                    <table class="w-full">
+                        <thead class="bg-white/10 sticky top-0">
+                            <tr>
+                                <th class="px-4 py-3 text-left text-xs font-medium text-white/70 uppercase tracking-wider">이름</th>
+                                <th class="px-4 py-3 text-left text-xs font-medium text-white/70 uppercase tracking-wider">형태</th>
+                                <th class="px-4 py-3 text-left text-xs font-medium text-white/70 uppercase tracking-wider">종류</th>
+                                <th class="px-4 py-3 text-left text-xs font-medium text-white/70 uppercase tracking-wider">기간</th>
+                                <th class="px-4 py-3 text-left text-xs font-medium text-white/70 uppercase tracking-wider">사유</th>
+                            </tr>
+                        </thead>
+                        <tbody id="holidayTable" class="divide-y divide-white/10">
+                            <!-- 데이터가 여기에 표시됩니다 -->
+                        </tbody>
+                    </table>
+                </div>
             </div>
-            <div class="overflow-x-auto">
+
-                <table class="w-full">
+            <!-- 우측: 할일 -->
-                    <thead class="bg-white/10">
+            <div class="glass-effect rounded-2xl overflow-hidden">
-                        <tr>
+                <div class="px-6 py-4 border-b border-white/10">
-                            <th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">이름</th>
+                    <h2 class="text-xl font-semibold text-white flex items-center justify-between">
-                            <th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">형태</th>
+                        <span class="flex items-center">
-                            <th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">종류</th>
+                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">시작일</th>
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
-                            <th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">종료일</th>
+                            </svg>
-                            <th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">사유</th>
+                            할일
-                        </tr>
+                        </span>
-                    </thead>
+                        <button onclick="window.location.href='/Todo'" class="text-xs bg-white/20 hover:bg-white/30 px-3 py-1 rounded-full transition-colors">
-                    <tbody id="holidayTable" class="divide-y divide-white/10">
+                            전체보기
-                        <!-- 데이터가 여기에 표시됩니다 -->
+                        </button>
-                    </tbody>
+                    </h2>
-                </table>
+                </div>
+                <div class="p-4">
+                    <div id="urgentTodoList" class="space-y-3 max-h-80 overflow-y-auto custom-scrollbar">
+                        <!-- 할일이 여기에 표시됩니다 -->
+                        <div class="text-center text-white/50 py-8">
+                            <svg class="w-8 h-8 mx-auto mb-2 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
+                            </svg>
+                            급한 할일이 없습니다
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
 
@@ -459,6 +478,99 @@
                 </div>
             </div>
         </div>
+
+        <!-- 할일 상세 정보 모달 -->
+        <div id="todoDetailModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden z-50">
+            <div class="flex items-center justify-center min-h-screen p-4">
+                <div class="glass-effect rounded-2xl w-full max-w-2xl max-h-[80vh] overflow-hidden animate-slide-up">
+                    <!-- 모달 헤더 -->
+                    <div class="px-6 py-4 border-b border-white/10 flex items-center justify-between">
+                        <h2 class="text-xl font-semibold text-white flex items-center">
+                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
+                            </svg>
+                            할일 상세 정보
+                        </h2>
+                        <button onclick="hideTodoDetailModal()" class="text-white/70 hover:text-white transition-colors">
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                            </svg>
+                        </button>
+                    </div>
+                    
+                    <!-- 모달 내용 -->
+                    <div class="p-6 max-h-[60vh] overflow-y-auto custom-scrollbar">
+                        <div class="space-y-4">
+                            <!-- 제목 -->
+                            <div>
+                                <label class="block text-white/70 text-sm font-medium mb-2">제목</label>
+                                <div id="detailTitle" class="bg-white/10 rounded-lg px-4 py-3 text-white min-h-[2.5rem] flex items-center">
+                                    -
+                                </div>
+                            </div>
+                            
+                            <!-- 내용 -->
+                            <div>
+                                <label class="block text-white/70 text-sm font-medium mb-2">내용</label>
+                                <div id="detailRemark" class="bg-white/10 rounded-lg px-4 py-3 text-white min-h-[4rem] whitespace-pre-wrap">
+                                    -
+                                </div>
+                            </div>
+                            
+                            <!-- 요청자 -->
+                            <div>
+                                <label class="block text-white/70 text-sm font-medium mb-2">요청자</label>
+                                <div id="detailRequest" class="bg-white/10 rounded-lg px-4 py-3 text-white min-h-[2.5rem] flex items-center">
+                                    -
+                                </div>
+                            </div>
+                            
+                            <!-- 중요도 및 플래그 -->
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <div>
+                                    <label class="block text-white/70 text-sm font-medium mb-2">중요도</label>
+                                    <div id="detailSeqno" class="bg-white/10 rounded-lg px-4 py-3 text-white min-h-[2.5rem] flex items-center">
+                                        -
+                                    </div>
+                                </div>
+                                <div>
+                                    <label class="block text-white/70 text-sm font-medium mb-2">상태</label>
+                                    <div id="detailFlag" class="bg-white/10 rounded-lg px-4 py-3 text-white min-h-[2.5rem] flex items-center">
+                                        -
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <!-- 만료일 및 작성일 -->
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <div>
+                                    <label class="block text-white/70 text-sm font-medium mb-2">만료일</label>
+                                    <div id="detailExpire" class="bg-white/10 rounded-lg px-4 py-3 text-white min-h-[2.5rem] flex items-center">
+                                        -
+                                    </div>
+                                </div>
+                                <div>
+                                    <label class="block text-white/70 text-sm font-medium mb-2">작성일</label>
+                                    <div id="detailWdate" class="bg-white/10 rounded-lg px-4 py-3 text-white min-h-[2.5rem] flex items-center">
+                                        -
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- 모달 푸터 -->
+                    <div class="px-6 py-4 border-t border-white/10 flex justify-between items-center">
+                        <button onclick="goToTodoPageFromDetail()" class="text-primary-400 hover:text-primary-300 text-sm transition-colors">
+                            전체 할일 목록으로 이동 →
+                        </button>
+                        <button onclick="hideTodoDetailModal()" class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg transition-colors">
+                            닫기
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 
     <script>
@@ -466,12 +578,52 @@
     class CommonNavigation {
         constructor(currentPage = '') {
             this.currentPage = currentPage;
+            this.menuItems = [];
             this.init();
         }
 
-        init() {
+        async init() {
+            try {
+                await this.loadMenuItems();
+                this.createNavigation();
+                this.addEventListeners();
+            } catch (error) {
+                console.error('Navigation initialization failed:', error);
+                this.createFallbackNavigation();
+            }
+        }
+
+        async loadMenuItems() {
+            try {
+                const response = await fetch('/Common/GetNavigationMenu');
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                const data = await response.json();
+                
+                if (data.Success && data.Data) {
+                    this.menuItems = data.Data;
+                } else {
+                    throw new Error(data.Message || 'Failed to load menu items');
+                }
+            } catch (error) {
+                console.error('Failed to load navigation menu:', error);
+                this.menuItems = this.getDefaultMenuItems();
+            }
+        }
+
+        getDefaultMenuItems() {
+            return [
+                { key: 'dashboard', title: '대시보드', url: '/Dashboard/', icon: 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z', isVisible: true, sortOrder: 1 },
+                { key: 'common', title: '공용코드', url: '/Common', icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z', isVisible: true, sortOrder: 2 },
+                { key: 'jobreport', title: '업무일지', url: '/Jobreport/', icon: 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2', isVisible: true, sortOrder: 3 },
+                { key: 'kuntae', title: '근태관리', url: '/Kuntae/', icon: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z', isVisible: true, sortOrder: 4 },
+                { key: 'todo', title: '할일관리', url: '/Todo/', icon: 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2M12 12l2 2 4-4', isVisible: true, sortOrder: 5 }
+            ];
+        }
+
+        createFallbackNavigation() {
             this.createNavigation();
-            this.addEventListeners();
         }
 
         createNavigation() {
@@ -484,23 +636,16 @@
         }
 
         getNavigationHTML() {
+            const visibleItems = this.menuItems.filter(item => item.isVisible).sort((a, b) => a.sortOrder - b.sortOrder);
             return `
                 <div class="container mx-auto px-4">
                     <div class="flex items-center justify-between h-16">
-                        <!-- 로고/타이틀 -->
                         <div class="flex items-center">
                             <h2 class="text-xl font-bold text-white">GroupWare</h2>
                         </div>
-                        
-                        <!-- 메뉴 -->
                         <div class="hidden md:flex items-center space-x-8">
-                            ${this.getMenuItemHTML('dashboard', '/Dashboard/', '대시보드', 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z')}
+                            ${visibleItems.map(item => this.getMenuItemHTML(item)).join('')}
-                            ${this.getMenuItemHTML('common', '/Common', '공용코드', 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z')}
-                            ${this.getMenuItemHTML('jobreport', '/Jobreport/', '업무일지', 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2')}
-                            ${this.getMenuItemHTML('kuntae', '/Kuntae/', '근태관리', 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z')}
                         </div>
-                        
-                        <!-- 모바일 메뉴 버튼 -->
                         <div class="md:hidden">
                             <button id="mobile-menu-button" class="text-white/80 hover:text-white transition-colors p-2">
                                 <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -509,42 +654,37 @@
                             </button>
                         </div>
                     </div>
-                    
-                    <!-- 모바일 메뉴 -->
                     <div id="mobile-menu" class="md:hidden hidden border-t border-white/10 pt-4 pb-4">
-                        ${this.getMobileMenuItemHTML('dashboard', '/Dashboard/', '대시보드', 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z')}
+                        ${visibleItems.map(item => this.getMobileMenuItemHTML(item)).join('')}
-                        ${this.getMobileMenuItemHTML('common', '/Common', '공용코드', 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z')}
-                        ${this.getMobileMenuItemHTML('jobreport', '/Jobreport/', '업무일지', 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2')}
-                        ${this.getMobileMenuItemHTML('kuntae', '/Kuntae/', '근태관리', 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z')}
                     </div>
                 </div>
             `;
         }
 
-        getMenuItemHTML(pageKey, href, text, svgPath) {
+        getMenuItemHTML(item) {
-            const isActive = this.currentPage === pageKey;
+            const isActive = this.currentPage === item.key;
             const activeClass = isActive ? 'text-white bg-white/20' : 'text-white/80 hover:text-white hover:bg-white/10';
             
             return `
-                <a href="${href}" class="${activeClass} transition-colors px-3 py-2 rounded-lg">
+                <a href="${item.url}" class="${activeClass} transition-colors px-3 py-2 rounded-lg">
                     <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${svgPath}"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${item.icon}"></path>
                     </svg>
-                    ${text}
+                    ${item.title}
                 </a>
             `;
         }
 
-        getMobileMenuItemHTML(pageKey, href, text, svgPath) {
+        getMobileMenuItemHTML(item) {
-            const isActive = this.currentPage === pageKey;
+            const isActive = this.currentPage === item.key;
             const activeClass = isActive ? 'text-white bg-white/20' : 'text-white/80 hover:text-white hover:bg-white/10';
             
             return `
-                <a href="${href}" class="block ${activeClass} transition-colors px-3 py-2 rounded-lg mb-2">
+                <a href="${item.url}" class="block ${activeClass} transition-colors px-3 py-2 rounded-lg mb-2">
                     <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${svgPath}"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${item.icon}"></path>
                     </svg>
-                    ${text}
+                    ${item.title}
                 </a>
             `;
         }
@@ -577,7 +717,7 @@
     // 휴가 인원 Ajax 업데이트
     function updateLeaveCount() {
         showLoading();
-        fetch('http://127.0.0.1:7979/Dashboard/TodayCountH')
+        fetch('http://127.0.0.1:7979/DashBoard/TodayCountH')
             .then(response => response.text())
             .then(data => {
                 const cleanData = data.replace(/"/g, '');
@@ -594,7 +734,7 @@
     // 휴가자 목록 Ajax 업데이트
     function updateHolidayList() {
         showLoading();
-        fetch('http://127.0.0.1:7979/Dashboard/GetholyUser')
+        fetch('http://127.0.0.1:7979/DashBoard/GetholyUser')
             .then(response => response.json())
             .then(data => {
                 let tableRows = '';
@@ -613,22 +753,35 @@
                             cateColorClass = 'bg-warning-500/20 text-warning-300'; // 기타는 주황색 계열
                         }
                         
+                        // 기간 표시 형식 개선
+                        let periodText = '';
+                        if (item.sdate && item.edate) {
+                            if (item.sdate === item.edate) {
+                                periodText = item.sdate;
+                            } else {
+                                periodText = `${item.sdate}~${item.edate}`;
+                            }
+                        } else if (item.sdate) {
+                            periodText = item.sdate;
+                        } else {
+                            periodText = '-';
+                        }
+                        
                         tableRows += `
                             <tr class="hover:bg-white/5 transition-colors">
-                                <td class="px-6 py-4 whitespace-nowrap text-white">${item.name || '-'}(${item.uid})</td>
+                                <td class="px-4 py-3 text-white text-sm">${item.name || '-'}(${item.uid})</td>
-                                 <td class="px-6 py-4 whitespace-nowrap">
+                                <td class="px-4 py-3">
-                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${typeColorClass}">
+                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${typeColorClass}">
                                         ${item.type || '-'}
                                     </span>
                                 </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
+                                <td class="px-4 py-3">
-                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${cateColorClass}">
+                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${cateColorClass}">
                                         ${item.cate || '-'}
                                     </span>
                                 </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-white/80">${item.sdate || '-'}</td>
+                                <td class="px-4 py-3 text-white/80 text-sm">${periodText}</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-white/80">${item.edate || '-'}</td>
+                                <td class="px-4 py-3 text-white/80 text-sm max-w-32 truncate" title="${item.title || '-'}">${item.title || '-'}</td>
-                                <td class="px-6 py-4 text-white/80">${item.title || '-'}</td>
                             </tr>
                         `;
                     });
@@ -749,15 +902,181 @@
         document.getElementById('loadingIndicator').classList.add('hidden');
     }
 
+    // Todo 목록 Ajax 업데이트
+    function updateTodoList() {
+        showLoading();
+        fetch('http://127.0.0.1:7979/Todo/GetUrgentTodos')
+            .then(response => response.json())
+            .then(data => {
+                if (data.Success && data.Data) {
+                    displayTodoList(data.Data);
+                } else {
+                    displayTodoList([]);
+                }
+                hideLoading();
+            })
+            .catch(error => {
+                console.error('Todo 목록 업데이트 중 오류 발생:', error);
+                displayTodoList([]);
+                hideLoading();
+            });
+    }
+
+    // Todo 목록 표시
+    function displayTodoList(todos) {
+        const todoListElement = document.getElementById('urgentTodoList');
+        let todoItems = '';
+
+        if (todos && todos.length > 0) {
+            todos.forEach(todo => {
+                const flagIcon = todo.flag ? '📌 ' : '';
+                
+                const seqnoClass = getTodoSeqnoClass(todo.seqno);
+                const seqnoText = getTodoSeqnoText(todo.seqno);
+                
+                const expireText = todo.expire ? new Date(todo.expire).toLocaleDateString('ko-KR') : '';
+                const isExpired = todo.expire && new Date(todo.expire) < new Date();
+                const expireClass = isExpired ? 'text-danger-400' : 'text-white/60';
+
+                todoItems += `
+                    <div class="bg-white/10 backdrop-blur-sm rounded-lg p-3 hover:bg-white/15 transition-colors cursor-pointer border border-white/20" onclick="showTodoDetail(${todo.idx})">
+                        <div class="flex items-start justify-between mb-2">
+                            <div class="flex items-center gap-1">
+                                ${flagIcon ? `<span class="text-xs">${flagIcon}</span>` : ''}
+                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${seqnoClass}">
+                                    ${seqnoText}
+                                </span>
+                            </div>
+                            ${expireText ? `<span class="text-xs ${expireClass}">${expireText}</span>` : ''}
+                        </div>
+                        <h3 class="text-white font-medium text-sm mb-1 line-clamp-1">${todo.title || '제목 없음'}</h3>
+                        <p class="text-white/70 text-xs line-clamp-2">${todo.remark || ''}</p>
+                        ${todo.request ? `<p class="text-white/50 text-xs mt-1">요청자: ${todo.request}</p>` : ''}
+                    </div>
+                `;
+            });
+        } else {
+            todoItems = `
+                <div class="text-center text-white/50 py-8">
+                    <svg class="w-8 h-8 mx-auto mb-2 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
+                    </svg>
+                    <p class="text-sm">할일이 없습니다</p>
+                    <button onclick="window.location.href='/Todo'" class="text-primary-400 hover:text-primary-300 text-xs transition-colors mt-1 inline-block">
+                        할일 추가하기 →
+                    </button>
+                </div>
+            `;
+        }
+
+        todoListElement.innerHTML = todoItems;
+    }
+
+    // Todo 중요도 클래스 반환
+    function getTodoSeqnoClass(seqno) {
+        switch(seqno) {
+            case 1: return 'bg-primary-500/20 text-primary-300';
+            case 2: return 'bg-warning-500/20 text-warning-300';
+            case 3: return 'bg-danger-500/20 text-danger-300';
+            default: return 'bg-white/10 text-white/50';
+        }
+    }
+
+    // Todo 중요도 텍스트 반환
+    function getTodoSeqnoText(seqno) {
+        switch(seqno) {
+            case 1: return '중요';
+            case 2: return '매우 중요';
+            case 3: return '긴급';
+            default: return '보통';
+        }
+    }
+
+    // Todo 페이지로 이동
+    function goToTodoPage() {
+        window.location.href = '/Todo/';
+    }
+
+    // 할일 상세 정보 표시
+    function showTodoDetail(todoId) {
+        showLoading();
+        fetch(`/Todo/GetTodo?id=${todoId}`)
+            .then(response => response.json())
+            .then(data => {
+                if (data.Success && data.Data) {
+                    displayTodoDetail(data.Data);
+                    document.getElementById('todoDetailModal').classList.remove('hidden');
+                } else {
+                    showError('할일 정보를 불러올 수 없습니다.');
+                }
+                hideLoading();
+            })
+            .catch(error => {
+                console.error('할일 상세 정보 로드 중 오류 발생:', error);
+                showError('할일 정보를 불러오는 중 오류가 발생했습니다.');
+                hideLoading();
+            });
+    }
+
+    // 할일 상세 정보를 모달에 표시
+    function displayTodoDetail(todo) {
+        document.getElementById('detailTitle').textContent = todo.title || '제목 없음';
+        document.getElementById('detailRemark').textContent = todo.remark || '-';
+        document.getElementById('detailRequest').textContent = todo.request || '-';
+        
+        // 중요도 표시
+        const seqnoText = getTodoSeqnoText(todo.seqno);
+        const seqnoClass = getTodoSeqnoClass(todo.seqno);
+        document.getElementById('detailSeqno').innerHTML = `
+            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${seqnoClass}">
+                ${seqnoText}
+            </span>
+        `;
+        
+        // 플래그 상태 표시
+        const flagText = todo.flag ? '중요' : '일반';
+        const flagClass = todo.flag ? 'bg-danger-500/20 text-danger-300' : 'bg-white/10 text-white/50';
+        document.getElementById('detailFlag').innerHTML = `
+            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${flagClass}">
+                ${todo.flag ? '📌 ' : ''}${flagText}
+            </span>
+        `;
+        
+        // 만료일 표시
+        const expireText = todo.expire ? new Date(todo.expire).toLocaleDateString('ko-KR') : '-';
+        const isExpired = todo.expire && new Date(todo.expire) < new Date();
+        const expireClass = isExpired ? 'text-danger-400' : 'text-white';
+        document.getElementById('detailExpire').innerHTML = `<span class="${expireClass}">${expireText}</span>`;
+        
+        // 작성일 표시
+        const wdateText = todo.wdate ? new Date(todo.wdate).toLocaleDateString('ko-KR') + ' ' + new Date(todo.wdate).toLocaleTimeString('ko-KR') : '-';
+        document.getElementById('detailWdate').textContent = wdateText;
+    }
+
+    // 할일 상세 정보 모달 숨기기
+    function hideTodoDetailModal() {
+        document.getElementById('todoDetailModal').classList.add('hidden');
+    }
+
+    // 할일 상세 정보에서 Todo 페이지로 이동
+    function goToTodoPageFromDetail() {
+        hideTodoDetailModal();
+        window.location.href = '/Todo/';
+    }
+
+    // 간단한 에러 표시 함수
+    function showError(message) {
+        alert(message); // 나중에 더 예쁜 toast나 modal로 변경 가능
+    }
+
     // 페이지 로드 시 데이터 업데이트
     updateLeaveCount();
     updateHolidayList();
     updatePurchaseCount();
     updateHolydayRequestCount();
 	updateCurrentUserCount();
+    updateTodoList();
 
-    // 스크롤바 크기 설정 초기화
-    initializeScrollbarSize();
 
     // 30초마다 데이터 새로고침
     setInterval(() => {
@@ -766,6 +1085,7 @@
         updatePurchaseCount();
         updateHolydayRequestCount();
 		updateCurrentUserCount();
+        updateTodoList();
     }, 30000);
 
     // 공통 네비게이션 초기화
@@ -844,6 +1164,7 @@
             hideHolidayRequestModal();
             hidePurchaseNRModal();
             hidePurchaseCRModal();
+            hideTodoDetailModal();
         }
     });
 
@@ -1083,25 +1404,13 @@
         }
     });
 
-    // 스크롤바 크기 초기화
+    // 할일 상세 정보 모달 외부 클릭으로 닫기
-    function initializeScrollbarSize() {
+    document.getElementById('todoDetailModal').addEventListener('click', function(event) {
-        const savedSize = localStorage.getItem('scrollbarSize') || '16';
+        if (event.target === this) {
-        const select = document.getElementById('scrollbarSize');
+            hideTodoDetailModal();
-        select.value = savedSize;
+        }
-        updateScrollbarSize(savedSize);
+    });
-        
-        // 콤보박스 변경 이벤트 리스너
-        select.addEventListener('change', function() {
-            const size = this.value;
-            updateScrollbarSize(size);
-            localStorage.setItem('scrollbarSize', size);
-        });
-    }
 
-    // 스크롤바 크기 업데이트
-    function updateScrollbarSize(size) {
-        document.documentElement.style.setProperty('--scrollbar-width', size + 'px');
-    }
     </script>
 </body>
 </html> 

Project/Web/wwwroot/Jobreport/index.html

@@ -125,20 +125,6 @@
     <!-- 네비게이션 메뉴 (동적으로 추가됨) -->
     
     <div class="container mx-auto px-4 py-8">
-        <!-- 헤더 -->
-        <div class="text-center mb-8 animate-fade-in">
-            <h1 class="text-4xl font-bold text-white mb-2">업무일지</h1>
-            <div class="flex justify-center items-center space-x-4">
-                <button id="refreshBtn" class="glass-effect text-white px-4 py-2 rounded-lg flex items-center hover:bg-white/30 transition-colors">
-                    <i data-feather="refresh-cw" class="w-4 h-4 mr-2"></i>
-                    새로고침
-                </button>
-                <div class="text-white/80">
-                    <span id="currentDate"></span>
-                </div>
-            </div>
-        </div>
-
         <!-- 개발중 경고 메시지 -->
         <div class="bg-orange-500 rounded-lg p-4 mb-6 border-l-4 border-orange-700 animate-slide-up shadow-lg">
             <div class="flex items-center">
@@ -349,50 +335,78 @@
     </div>
 
     <script>
-        // 공통 네비게이션 컴포넌트
+        /**
+         * 공통 네비게이션 컴포넌트
+         */
         class CommonNavigation {
             constructor(currentPage = '') {
                 this.currentPage = currentPage;
+                this.menuItems = [];
                 this.init();
             }
 
-            init() {
+            async init() {
-                this.createNavigation();
+                try {
-                this.addEventListeners();
+                    await this.loadMenuItems();
+                    this.createNavigation();
+                    this.addEventListeners();
+                } catch (error) {
+                    console.error('Navigation initialization failed:', error);
+                    this.createFallbackNavigation();
+                }
+            }
+
+            async loadMenuItems() {
+                try {
+                    const response = await fetch('/Common/GetNavigationMenu');
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    const data = await response.json();
+                    
+                    if (data.Success && data.Data) {
+                        this.menuItems = data.Data;
+                    } else {
+                        throw new Error(data.Message || 'Failed to load menu items');
+                    }
+                } catch (error) {
+                    console.error('Failed to load navigation menu:', error);
+                    this.menuItems = this.getDefaultMenuItems();
+                }
+            }
+
+            getDefaultMenuItems() {
+                return [
+                    { key: 'dashboard', title: '대시보드', url: '/Dashboard/', icon: 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z', isVisible: true, sortOrder: 1 },
+                    { key: 'common', title: '공용코드', url: '/Common', icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z', isVisible: true, sortOrder: 2 },
+                    { key: 'jobreport', title: '업무일지', url: '/Jobreport/', icon: 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2', isVisible: true, sortOrder: 3 },
+                    { key: 'kuntae', title: '근태관리', url: '/Kuntae/', icon: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z', isVisible: true, sortOrder: 4 },
+                    { key: 'todo', title: '할일관리', url: '/Todo/', icon: 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2M12 12l2 2 4-4', isVisible: true, sortOrder: 5 }
+                ];
             }
 
             createNavigation() {
                 const nav = document.createElement('nav');
                 nav.className = 'glass-effect border-b border-white/10';
-                nav.style.cssText = `
-                    background: rgba(255, 255, 255, 0.25);
-                    backdrop-filter: blur(10px);
-                    border: 1px solid rgba(255, 255, 255, 0.18);
-                `;
                 nav.innerHTML = this.getNavigationHTML();
-                
-                // body의 첫 번째 자식으로 추가
                 document.body.insertBefore(nav, document.body.firstChild);
             }
 
+            createFallbackNavigation() {
+                this.createNavigation();
+            }
+
             getNavigationHTML() {
+                const visibleItems = this.menuItems.filter(item => item.isVisible).sort((a, b) => a.sortOrder - b.sortOrder);
                 return `
-                    <div class="container mx-auto px-4" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+                    <div class="container mx-auto px-4">
                         <div class="flex items-center justify-between h-16">
-                            <!-- 로고/타이틀 -->
                             <div class="flex items-center">
                                 <h2 class="text-xl font-bold text-white">GroupWare</h2>
                             </div>
-                            
-                            <!-- 메뉴 -->
                             <div class="hidden md:flex items-center space-x-8">
-                                ${this.getMenuItemHTML('dashboard', '/Dashboard/', '대시보드', 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z')}
+                                ${visibleItems.map(item => this.getMenuItemHTML(item)).join('')}
-                                ${this.getMenuItemHTML('common', '/Common', '공용코드', 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z')}
-                                ${this.getMenuItemHTML('jobreport', '/Jobreport/', '업무일지', 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2')}
-                                ${this.getMenuItemHTML('kuntae', '/Kuntae/', '근태관리', 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z')}
                             </div>
-                            
-                            <!-- 모바일 메뉴 버튼 -->
                             <div class="md:hidden">
                                 <button id="mobile-menu-button" class="text-white/80 hover:text-white transition-colors p-2">
                                     <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -401,51 +415,42 @@
                                 </button>
                             </div>
                         </div>
-                        
-                        <!-- 모바일 메뉴 -->
                         <div id="mobile-menu" class="md:hidden hidden border-t border-white/10 pt-4 pb-4">
-                            ${this.getMobileMenuItemHTML('dashboard', '/Dashboard/', '대시보드', 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z')}
+                            ${visibleItems.map(item => this.getMobileMenuItemHTML(item)).join('')}
-                            ${this.getMobileMenuItemHTML('common', '/Common', '공용코드', 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z')}
-                            ${this.getMobileMenuItemHTML('jobreport', '/Jobreport/', '업무일지', 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2')}
-                            ${this.getMobileMenuItemHTML('kuntae', '/Kuntae/', '근태관리', 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z')}
                         </div>
                     </div>
                 `;
             }
 
-            getMenuItemHTML(pageKey, href, text, svgPath) {
+            getMenuItemHTML(item) {
-                const isActive = this.currentPage === pageKey;
+                const isActive = this.currentPage === item.key;
                 const activeClass = isActive ? 'text-white bg-white/20' : 'text-white/80 hover:text-white hover:bg-white/10';
-                
                 return `
-                    <a href="${href}" class="${activeClass} transition-colors px-3 py-2 rounded-lg">
+                    <a href="${item.url}" class="${activeClass} transition-colors px-3 py-2 rounded-lg">
                         <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${svgPath}"></path>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${item.icon}"></path>
                         </svg>
-                        ${text}
+                        ${item.title}
                     </a>
                 `;
             }
 
-            getMobileMenuItemHTML(pageKey, href, text, svgPath) {
+            getMobileMenuItemHTML(item) {
-                const isActive = this.currentPage === pageKey;
+                const isActive = this.currentPage === item.key;
                 const activeClass = isActive ? 'text-white bg-white/20' : 'text-white/80 hover:text-white hover:bg-white/10';
-                
                 return `
-                    <a href="${href}" class="block ${activeClass} transition-colors px-3 py-2 rounded-lg mb-2">
+                    <a href="${item.url}" class="block ${activeClass} transition-colors px-3 py-2 rounded-lg mb-2">
                         <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${svgPath}"></path>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${item.icon}"></path>
                         </svg>
-                        ${text}
+                        ${item.title}
                     </a>
                 `;
             }
 
             addEventListeners() {
-                // 모바일 메뉴 토글
                 const mobileMenuButton = document.getElementById('mobile-menu-button');
                 const mobileMenu = document.getElementById('mobile-menu');
-                
                 if (mobileMenuButton && mobileMenu) {
                     mobileMenuButton.addEventListener('click', function() {
                         mobileMenu.classList.toggle('hidden');
@@ -454,9 +459,7 @@
             }
         }
 
-        // 전역 함수로 내비게이션 초기화
         function initNavigation(currentPage = '') {
-            // DOM이 로드된 후에 실행
             if (document.readyState === 'loading') {
                 document.addEventListener('DOMContentLoaded', () => {
                     new CommonNavigation(currentPage);

Project/Web/wwwroot/Kuntae/index.html

@@ -142,13 +142,6 @@
 </head>
 <body class="gradient-bg min-h-screen">
     <div class="container mx-auto px-4 py-8">
-        
-        <!-- 헤더 -->
-        <div class="text-center mb-8 animate-fade-in">
-            <h1 class="text-4xl font-bold text-white mb-2">근태관리</h1>
-            <p class="text-white/80 text-lg">출퇴근 시간 및 휴가 관리</p>
-        </div>
-
         <!-- 개발중 경고 메시지 -->
         <div class="bg-orange-500 rounded-lg p-4 mb-6 border-l-4 border-orange-700 animate-slide-up shadow-lg">
             <div class="flex items-center">
@@ -386,35 +379,115 @@
     </div>
 
     <script>
-        // 공통 네비게이션 컴포넌트
+        /**
-        class CommonNavigation {
+         * 공통 네비게이션 컴포넌트
+         * 서버에서 메뉴 정보를 받아와서 동적으로 네비게이션을 생성합니다.
+         */
+        class ㄴ {
             constructor(currentPage = '') {
                 this.currentPage = currentPage;
+                this.menuItems = [];
                 this.init();
             }
 
-            init() {
+            async init() {
-                this.createNavigation();
+                try {
-                this.addEventListeners();
+                    await this.loadMenuItems();
+                    this.createNavigation();
+                    this.addEventListeners();
+                } catch (error) {
+                    console.error('Navigation initialization failed:', error);
+                    // 오류 발생 시 기본 메뉴로 폴백
+                    this.createFallbackNavigation();
+                }
+            }
+
+            async loadMenuItems() {
+                try {
+                    const response = await fetch('/Common/GetNavigationMenu');
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    const data = await response.json();
+                    
+                    if (data.Success && data.Data) {
+                        this.menuItems = data.Data;
+                    } else {
+                        throw new Error(data.Message || 'Failed to load menu items');
+                    }
+                } catch (error) {
+                    console.error('Failed to load navigation menu:', error);
+                    // 기본 메뉴 항목으로 폴백
+                    this.menuItems = this.getDefaultMenuItems();
+                }
+            }
+
+            getDefaultMenuItems() {
+                return [
+                    {
+                        key: 'dashboard',
+                        title: '대시보드',
+                        url: '/Dashboard/',
+                        icon: 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z',
+                        isVisible: true,
+                        sortOrder: 1
+                    },
+                    {
+                        key: 'common',
+                        title: '공용코드',
+                        url: '/Common',
+                        icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',
+                        isVisible: true,
+                        sortOrder: 2
+                    },
+                    {
+                        key: 'jobreport',
+                        title: '업무일지',
+                        url: '/Jobreport/',
+                        icon: 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2',
+                        isVisible: true,
+                        sortOrder: 3
+                    },
+                    {
+                        key: 'kuntae',
+                        title: '근태관리',
+                        url: '/Kuntae/',
+                        icon: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z',
+                        isVisible: true,
+                        sortOrder: 4
+                    },
+                    {
+                        key: 'todo',
+                        title: '할일관리',
+                        url: '/Todo/',
+                        icon: 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2M12 12l2 2 4-4',
+                        isVisible: true,
+                        sortOrder: 5
+                    }
+                ];
             }
 
             createNavigation() {
                 const nav = document.createElement('nav');
                 nav.className = 'glass-effect border-b border-white/10';
-                nav.style.cssText = `
-                    background: rgba(255, 255, 255, 0.25);
-                    backdrop-filter: blur(10px);
-                    border: 1px solid rgba(255, 255, 255, 0.18);
-                `;
                 nav.innerHTML = this.getNavigationHTML();
                 
                 // body의 첫 번째 자식으로 추가
                 document.body.insertBefore(nav, document.body.firstChild);
             }
 
+            createFallbackNavigation() {
+                console.log('Creating fallback navigation...');
+                this.createNavigation();
+            }
+
             getNavigationHTML() {
+                const visibleItems = this.menuItems
+                    .filter(item => item.isVisible)
+                    .sort((a, b) => a.sortOrder - b.sortOrder);
+
                 return `
-                    <div class="container mx-auto px-4" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+                    <div class="container mx-auto px-4">
                         <div class="flex items-center justify-between h-16">
                             <!-- 로고/타이틀 -->
                             <div class="flex items-center">
@@ -423,10 +496,7 @@
                             
                             <!-- 메뉴 -->
                             <div class="hidden md:flex items-center space-x-8">
-                                ${this.getMenuItemHTML('dashboard', '/Dashboard/', '대시보드', 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z')}
+                                ${visibleItems.map(item => this.getMenuItemHTML(item)).join('')}
-                                ${this.getMenuItemHTML('common', '/Common', '공용코드', 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z')}
-                                ${this.getMenuItemHTML('jobreport', '/Jobreport/', '업무일지', 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2')}
-                                ${this.getMenuItemHTML('kuntae', '/Kuntae/', '근태관리', 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z')}
                             </div>
                             
                             <!-- 모바일 메뉴 버튼 -->
@@ -441,39 +511,36 @@
                         
                         <!-- 모바일 메뉴 -->
                         <div id="mobile-menu" class="md:hidden hidden border-t border-white/10 pt-4 pb-4">
-                            ${this.getMobileMenuItemHTML('dashboard', '/Dashboard/', '대시보드', 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z')}
+                            ${visibleItems.map(item => this.getMobileMenuItemHTML(item)).join('')}
-                            ${this.getMobileMenuItemHTML('common', '/Common', '공용코드', 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z')}
-                            ${this.getMobileMenuItemHTML('jobreport', '/Jobreport/', '업무일지', 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2')}
-                            ${this.getMobileMenuItemHTML('kuntae', '/Kuntae/', '근태관리', 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z')}
                         </div>
                     </div>
                 `;
             }
 
-            getMenuItemHTML(pageKey, href, text, svgPath) {
+            getMenuItemHTML(item) {
-                const isActive = this.currentPage === pageKey;
+                const isActive = this.currentPage === item.key;
                 const activeClass = isActive ? 'text-white bg-white/20' : 'text-white/80 hover:text-white hover:bg-white/10';
                 
                 return `
-                    <a href="${href}" class="${activeClass} transition-colors px-3 py-2 rounded-lg">
+                    <a href="${item.url}" class="${activeClass} transition-colors px-3 py-2 rounded-lg">
                         <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${svgPath}"></path>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${item.icon}"></path>
                         </svg>
-                        ${text}
+                        ${item.title}
                     </a>
                 `;
             }
 
-            getMobileMenuItemHTML(pageKey, href, text, svgPath) {
+            getMobileMenuItemHTML(item) {
-                const isActive = this.currentPage === pageKey;
+                const isActive = this.currentPage === item.key;
                 const activeClass = isActive ? 'text-white bg-white/20' : 'text-white/80 hover:text-white hover:bg-white/10';
                 
                 return `
-                    <a href="${href}" class="block ${activeClass} transition-colors px-3 py-2 rounded-lg mb-2">
+                    <a href="${item.url}" class="block ${activeClass} transition-colors px-3 py-2 rounded-lg mb-2">
                         <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${svgPath}"></path>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${item.icon}"></path>
                         </svg>
-                        ${text}
+                        ${item.title}
                     </a>
                 `;
             }

Project/Web/wwwroot/Todo/index.html

@@ -0,0 +1,757 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <meta name="version" content="v1.0-20250127">
+    <title>할일 관리 - {title}</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#eff6ff',
+                            100: '#dbeafe',
+                            200: '#bfdbfe',
+                            300: '#93c5fd',
+                            400: '#60a5fa',
+                            500: '#3b82f6',
+                            600: '#2563eb',
+                            700: '#1d4ed8',
+                            800: '#1e40af',
+                            900: '#1e3a8a',
+                        },
+                        success: {
+                            50: '#f0fdf4',
+                            100: '#dcfce7',
+                            200: '#bbf7d0',
+                            300: '#86efac',
+                            400: '#4ade80',
+                            500: '#22c55e',
+                            600: '#16a34a',
+                            700: '#15803d',
+                            800: '#166534',
+                            900: '#14532d',
+                        },
+                        warning: {
+                            50: '#fffbeb',
+                            100: '#fef3c7',
+                            200: '#fde68a',
+                            300: '#fcd34d',
+                            400: '#fbbf24',
+                            500: '#f59e0b',
+                            600: '#d97706',
+                            700: '#b45309',
+                            800: '#92400e',
+                            900: '#78350f',
+                        },
+                        danger: {
+                            50: '#fef2f2',
+                            100: '#fee2e2',
+                            200: '#fecaca',
+                            300: '#fca5a5',
+                            400: '#f87171',
+                            500: '#ef4444',
+                            600: '#dc2626',
+                            700: '#b91c1c',
+                            800: '#991b1b',
+                            900: '#7f1d1d',
+                        }
+                    },
+                    animation: {
+                        'fade-in': 'fadeIn 0.5s ease-in-out',
+                        'slide-up': 'slideUp 0.3s ease-out',
+                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                    },
+                    keyframes: {
+                        fadeIn: {
+                            '0%': { opacity: '0' },
+                            '100%': { opacity: '1' },
+                        },
+                        slideUp: {
+                            '0%': { transform: 'translateY(10px)', opacity: '0' },
+                            '100%': { transform: 'translateY(0)', opacity: '1' },
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .glass-effect {
+            background: rgba(255, 255, 255, 0.25);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+        }
+        .gradient-bg {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .card-hover {
+            transition: all 0.3s ease;
+        }
+        .card-hover:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        
+        .custom-scrollbar::-webkit-scrollbar {
+            width: 8px;
+        }
+        
+        .custom-scrollbar::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 8px;
+        }
+        
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 8px;
+            border: 2px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.5);
+        }
+    </style>
+</head>
+<body class="gradient-bg min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <!-- 할일 목록 -->
+        <div class="glass-effect rounded-2xl overflow-hidden animate-slide-up">
+            <div class="px-6 py-4 border-b border-white/10 flex items-center justify-between">
+                <h2 class="text-xl font-semibold text-white flex items-center">
+                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
+                    </svg>
+                    내 할일 목록
+                </h2>
+                <button onclick="showAddTodoModal()" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg transition-colors flex items-center text-sm">
+                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                    </svg>
+                    새 할일 추가
+                </button>
+            </div>
+            <div class="overflow-x-auto">
+                <table class="w-full">
+                    <thead class="bg-white/10">
+                        <tr>
+                            <th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">상태</th>
+                            <th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">제목</th>
+                            <th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">내용</th>
+                            <th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">요청자</th>
+                            <th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">중요도</th>
+                            <th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">만료일</th>
+                            <th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">작업</th>
+                        </tr>
+                    </thead>
+                    <tbody id="todoTable" class="divide-y divide-white/10">
+                        <!-- 데이터가 여기에 표시됩니다 -->
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <!-- 로딩 인디케이터 -->
+        <div id="loadingIndicator" class="fixed top-4 right-4 bg-white/20 backdrop-blur-sm rounded-full px-4 py-2 text-white text-sm hidden">
+            <div class="flex items-center">
+                <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                처리 중...
+            </div>
+        </div>
+
+        <!-- 새 할일 추가 모달 -->
+        <div id="addTodoModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden z-50">
+            <div class="flex items-center justify-center min-h-screen p-4">
+                <div class="glass-effect rounded-2xl w-full max-w-2xl animate-slide-up">
+                    <!-- 모달 헤더 -->
+                    <div class="px-6 py-4 border-b border-white/10 flex items-center justify-between">
+                        <h2 class="text-xl font-semibold text-white flex items-center">
+                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                            </svg>
+                            새 할일 추가
+                        </h2>
+                        <button onclick="hideAddTodoModal()" class="text-white/70 hover:text-white transition-colors">
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                            </svg>
+                        </button>
+                    </div>
+                    
+                    <!-- 모달 내용 -->
+                    <div class="p-6">
+                        <form id="todoForm" class="space-y-4">
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <div>
+                                    <label class="block text-white/70 text-sm font-medium mb-2">제목 (선택사항)</label>
+                                    <input type="text" id="todoTitle" class="w-full bg-white/20 backdrop-blur-sm 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 transition-all" placeholder="할일 제목을 입력하세요">
+                                </div>
+                                <div>
+                                    <label class="block text-white/70 text-sm font-medium mb-2">만료일 (선택사항)</label>
+                                    <input type="date" id="todoExpire" class="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all">
+                                </div>
+                            </div>
+                            <div>
+                                <label class="block text-white/70 text-sm font-medium mb-2">내용 *</label>
+                                <textarea id="todoRemark" rows="3" class="w-full bg-white/20 backdrop-blur-sm 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 transition-all" placeholder="할일 내용을 입력하세요 (필수)" required></textarea>
+                            </div>
+                            <div>
+                                <label class="block text-white/70 text-sm font-medium mb-2">요청자</label>
+                                <input type="text" id="todoRequest" class="w-full bg-white/20 backdrop-blur-sm 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 transition-all" placeholder="업무 요청자를 입력하세요">
+                            </div>
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <div>
+                                    <label class="block text-white/70 text-sm font-medium mb-2">중요도</label>
+                                    <select id="todoSeqno" class="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all">
+                                        <option value="0">보통</option>
+                                        <option value="1">중요</option>
+                                        <option value="2">매우 중요</option>
+                                        <option value="3">긴급</option>
+                                    </select>
+                                </div>
+                                <div class="flex items-end">
+                                    <label class="flex items-center text-white/70 text-sm font-medium">
+                                        <input type="checkbox" id="todoFlag" class="mr-2 text-primary-500 focus:ring-primary-400 focus:ring-offset-0 rounded">
+                                        플래그 (상단 고정)
+                                    </label>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                    
+                    <!-- 모달 푸터 -->
+                    <div class="px-6 py-4 border-t border-white/10 flex justify-end space-x-3">
+                        <button type="button" onclick="hideAddTodoModal()" class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg transition-colors">
+                            취소
+                        </button>
+                        <button type="submit" form="todoForm" class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-2 rounded-lg transition-colors flex items-center">
+                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                            </svg>
+                            추가
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 수정 모달 -->
+        <div id="editModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden z-50">
+            <div class="flex items-center justify-center min-h-screen p-4">
+                <div class="glass-effect rounded-2xl w-full max-w-2xl animate-slide-up">
+                    <!-- 모달 헤더 -->
+                    <div class="px-6 py-4 border-b border-white/10 flex items-center justify-between">
+                        <h2 class="text-xl font-semibold text-white flex items-center">
+                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+                            </svg>
+                            할일 수정
+                        </h2>
+                        <button onclick="hideEditModal()" class="text-white/70 hover:text-white transition-colors">
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                            </svg>
+                        </button>
+                    </div>
+                    
+                    <!-- 모달 내용 -->
+                    <div class="p-6">
+                        <form id="editTodoForm" class="space-y-4">
+                            <input type="hidden" id="editTodoId">
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <div>
+                                    <label class="block text-white/70 text-sm font-medium mb-2">제목 (선택사항)</label>
+                                    <input type="text" id="editTodoTitle" class="w-full bg-white/20 backdrop-blur-sm 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 transition-all" placeholder="할일 제목을 입력하세요">
+                                </div>
+                                <div>
+                                    <label class="block text-white/70 text-sm font-medium mb-2">만료일 (선택사항)</label>
+                                    <input type="date" id="editTodoExpire" class="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all">
+                                </div>
+                            </div>
+                            <div>
+                                <label class="block text-white/70 text-sm font-medium mb-2">내용 *</label>
+                                <textarea id="editTodoRemark" rows="3" class="w-full bg-white/20 backdrop-blur-sm 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 transition-all" placeholder="할일 내용을 입력하세요 (필수)" required></textarea>
+                            </div>
+                            <div>
+                                <label class="block text-white/70 text-sm font-medium mb-2">요청자</label>
+                                <input type="text" id="editTodoRequest" class="w-full bg-white/20 backdrop-blur-sm 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 transition-all" placeholder="업무 요청자를 입력하세요">
+                            </div>
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <div>
+                                    <label class="block text-white/70 text-sm font-medium mb-2">중요도</label>
+                                    <select id="editTodoSeqno" class="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all">
+                                        <option value="0">보통</option>
+                                        <option value="1">중요</option>
+                                        <option value="2">매우 중요</option>
+                                        <option value="3">긴급</option>
+                                    </select>
+                                </div>
+                                <div>
+                                    <label class="flex items-center text-white/70 text-sm font-medium mt-6">
+                                        <input type="checkbox" id="editTodoFlag" class="mr-2 text-primary-500 focus:ring-primary-400 focus:ring-offset-0 rounded">
+                                        플래그 (상단 고정)
+                                    </label>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                    
+                    <!-- 모달 푸터 -->
+                    <div class="px-6 py-4 border-t border-white/10 flex justify-end space-x-3">
+                        <button onclick="hideEditModal()" class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg transition-colors">
+                            취소
+                        </button>
+                        <button onclick="updateTodo()" class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-2 rounded-lg transition-colors">
+                            수정
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+    // 공통 네비게이션 컴포넌트
+    class CommonNavigation {
+        constructor(currentPage = '') {
+            this.currentPage = currentPage;
+            this.init();
+        }
+
+        init() {
+            this.createNavigation();
+            this.addEventListeners();
+        }
+
+        createNavigation() {
+            const nav = document.createElement('nav');
+            nav.className = 'glass-effect border-b border-white/10';
+            nav.innerHTML = this.getNavigationHTML();
+            
+            // body의 첫 번째 자식으로 추가
+            document.body.insertBefore(nav, document.body.firstChild);
+        }
+
+        getNavigationHTML() {
+            return `
+                <div class="container mx-auto px-4">
+                    <div class="flex items-center justify-between h-16">
+                        <!-- 로고/타이틀 -->
+                        <div class="flex items-center">
+                            <h2 class="text-xl font-bold text-white">GroupWare</h2>
+                        </div>
+                        
+                        <!-- 메뉴 -->
+                        <div class="hidden md:flex items-center space-x-8">
+                            ${this.getMenuItemHTML('dashboard', '/Dashboard/', '대시보드', 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z')}
+                            ${this.getMenuItemHTML('common', '/Common', '공용코드', 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z')}
+                            ${this.getMenuItemHTML('jobreport', '/Jobreport/', '업무일지', 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2')}
+                            ${this.getMenuItemHTML('kuntae', '/Kuntae/', '근태관리', 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z')}
+                            ${this.getMenuItemHTML('todo', '/Todo/', '할일관리', 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2M12 12l2 2 4-4')}
+                        </div>
+                        
+                        <!-- 모바일 메뉴 버튼 -->
+                        <div class="md:hidden">
+                            <button id="mobile-menu-button" class="text-white/80 hover:text-white transition-colors p-2">
+                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <!-- 모바일 메뉴 -->
+                    <div id="mobile-menu" class="md:hidden hidden border-t border-white/10 pt-4 pb-4">
+                        ${this.getMobileMenuItemHTML('dashboard', '/Dashboard/', '대시보드', 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z')}
+                        ${this.getMobileMenuItemHTML('common', '/Common', '공용코드', 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z')}
+                        ${this.getMobileMenuItemHTML('jobreport', '/Jobreport/', '업무일지', 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2')}
+                        ${this.getMobileMenuItemHTML('kuntae', '/Kuntae/', '근태관리', 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z')}
+                        ${this.getMobileMenuItemHTML('todo', '/Todo/', '할일관리', 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2M12 12l2 2 4-4')}
+                    </div>
+                </div>
+            `;
+        }
+
+        getMenuItemHTML(pageKey, href, text, svgPath) {
+            const isActive = this.currentPage === pageKey;
+            const activeClass = isActive ? 'text-white bg-white/20' : 'text-white/80 hover:text-white hover:bg-white/10';
+            
+            return `
+                <a href="${href}" class="${activeClass} transition-colors px-3 py-2 rounded-lg">
+                    <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${svgPath}"></path>
+                    </svg>
+                    ${text}
+                </a>
+            `;
+        }
+
+        getMobileMenuItemHTML(pageKey, href, text, svgPath) {
+            const isActive = this.currentPage === pageKey;
+            const activeClass = isActive ? 'text-white bg-white/20' : 'text-white/80 hover:text-white hover:bg-white/10';
+            
+            return `
+                <a href="${href}" class="block ${activeClass} transition-colors px-3 py-2 rounded-lg mb-2">
+                    <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${svgPath}"></path>
+                    </svg>
+                    ${text}
+                </a>
+            `;
+        }
+
+        addEventListeners() {
+            // 모바일 메뉴 토글
+            const mobileMenuButton = document.getElementById('mobile-menu-button');
+            const mobileMenu = document.getElementById('mobile-menu');
+            
+            if (mobileMenuButton && mobileMenu) {
+                mobileMenuButton.addEventListener('click', function() {
+                    mobileMenu.classList.toggle('hidden');
+                });
+            }
+        }
+    }
+
+    // 전역 함수로 내비게이션 초기화
+    function initNavigation(currentPage = '') {
+        // DOM이 로드된 후에 실행
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => {
+                new CommonNavigation(currentPage);
+            });
+        } else {
+            new CommonNavigation(currentPage);
+        }
+    }
+
+    // Todo 관련 함수들
+    let currentEditId = null;
+
+    // 할일 목록 로드
+    function loadTodos() {
+        showLoading();
+        fetch('/Todo/GetTodos')
+            .then(response => response.json())
+            .then(data => {
+                if (data.Success) {
+                    displayTodos(data.Data || []);
+                } else {
+                    showError(data.Message || '할일 목록을 불러올 수 없습니다.');
+                }
+                hideLoading();
+            })
+            .catch(error => {
+                console.error('할일 목록 로드 중 오류:', error);
+                showError('서버 연결에 실패했습니다.');
+                hideLoading();
+            });
+    }
+
+    // 할일 목록 표시
+    function displayTodos(todos) {
+        const tableBody = document.getElementById('todoTable');
+        let tableRows = '';
+
+        if (todos && todos.length > 0) {
+            todos.forEach(todo => {
+                const flagClass = todo.flag ? 'bg-warning-500/20 text-warning-300' : 'bg-white/10 text-white/50';
+                const flagText = todo.flag ? '고정' : '';
+                
+                const seqnoClass = getSeqnoClass(todo.seqno);
+                const seqnoText = getSeqnoText(todo.seqno);
+                
+                const expireText = todo.expire ? new Date(todo.expire).toLocaleDateString('ko-KR') : '-';
+                const isExpired = todo.expire && new Date(todo.expire) < new Date();
+                const expireClass = isExpired ? 'text-danger-400' : 'text-white/80';
+
+                tableRows += `
+                    <tr class="hover:bg-white/5 transition-colors cursor-pointer" onclick="editTodo(${todo.idx})">
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${flagClass}">
+                                ${flagText || '일반'}
+                            </span>
+                        </td>
+                        <td class="px-6 py-4 text-white">${todo.title || '제목 없음'}</td>
+                        <td class="px-6 py-4 text-white/80 max-w-xs truncate">${todo.remark || ''}</td>
+                        <td class="px-6 py-4 text-white/80">${todo.request || '-'}</td>
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${seqnoClass}">
+                                ${seqnoText}
+                            </span>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap ${expireClass}">${expireText}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm" onclick="event.stopPropagation();">
+                            <button onclick="editTodo(${todo.idx})" class="text-primary-400 hover:text-primary-300 mr-3 transition-colors">
+                                수정
+                            </button>
+                            <button onclick="deleteTodo(${todo.idx})" class="text-danger-400 hover:text-danger-300 transition-colors">
+                                삭제
+                            </button>
+                        </td>
+                    </tr>
+                `;
+            });
+        } else {
+            tableRows = `
+                <tr>
+                    <td colspan="6" class="px-6 py-8 text-center text-white/50">
+                        등록된 할일이 없습니다
+                    </td>
+                </tr>
+            `;
+        }
+
+        tableBody.innerHTML = tableRows;
+    }
+
+    // 중요도 클래스 반환
+    function getSeqnoClass(seqno) {
+        switch(seqno) {
+            case 1: return 'bg-primary-500/20 text-primary-300';
+            case 2: return 'bg-warning-500/20 text-warning-300';
+            case 3: return 'bg-danger-500/20 text-danger-300';
+            default: return 'bg-white/10 text-white/50';
+        }
+    }
+
+    // 중요도 텍스트 반환
+    function getSeqnoText(seqno) {
+        switch(seqno) {
+            case 1: return '중요';
+            case 2: return '매우 중요';
+            case 3: return '긴급';
+            default: return '보통';
+        }
+    }
+
+    // 새 할일 추가
+    function addTodo() {
+        const formData = {
+            title: document.getElementById('todoTitle').value,
+            remark: document.getElementById('todoRemark').value,
+            expire: document.getElementById('todoExpire').value || null,
+            seqno: parseInt(document.getElementById('todoSeqno').value),
+            flag: document.getElementById('todoFlag').checked,
+            request: document.getElementById('todoRequest').value || null
+        };
+
+        if (!formData.remark.trim()) {
+            showError('할일 내용을 입력해주세요.');
+            return;
+        }
+
+        showLoading();
+        fetch('/Todo/CreateTodo', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(formData)
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.Success) {
+                hideAddTodoModal();
+                loadTodos();
+                showSuccess(data.Message || '할일이 추가되었습니다.');
+            } else {
+                showError(data.Message || '할일 추가에 실패했습니다.');
+            }
+            hideLoading();
+        })
+        .catch(error => {
+            console.error('할일 추가 중 오류:', error);
+            showError('서버 연결에 실패했습니다.');
+            hideLoading();
+        });
+    }
+
+    // 할일 수정 모달 표시
+    function editTodo(id) {
+        currentEditId = id;
+        showLoading();
+        
+        fetch(`/Todo/GetTodo?id=${id}`)
+            .then(response => response.json())
+            .then(data => {
+                if (data.Success && data.Data) {
+                    const todo = data.Data;
+                    document.getElementById('editTodoId').value = todo.idx;
+                    document.getElementById('editTodoTitle').value = todo.title || '';
+                    document.getElementById('editTodoRemark').value = todo.remark || '';
+                    document.getElementById('editTodoSeqno').value = todo.seqno || 0;
+                    document.getElementById('editTodoFlag').checked = todo.flag || false;
+                    document.getElementById('editTodoRequest').value = todo.request || '';
+                    
+                    // 날짜 포맷 변환
+                    if (todo.expire) {
+                        const expireDate = new Date(todo.expire);
+                        document.getElementById('editTodoExpire').value = expireDate.toISOString().split('T')[0];
+                    } else {
+                        document.getElementById('editTodoExpire').value = '';
+                    }
+                    
+                    showEditModal();
+                } else {
+                    showError(data.Message || '할일 정보를 불러올 수 없습니다.');
+                }
+                hideLoading();
+            })
+            .catch(error => {
+                console.error('할일 조회 중 오류:', error);
+                showError('서버 연결에 실패했습니다.');
+                hideLoading();
+            });
+    }
+
+    // 할일 수정
+    function updateTodo() {
+        const formData = {
+            idx: currentEditId,
+            title: document.getElementById('editTodoTitle').value,
+            remark: document.getElementById('editTodoRemark').value,
+            expire: document.getElementById('editTodoExpire').value || null,
+            seqno: parseInt(document.getElementById('editTodoSeqno').value),
+            flag: document.getElementById('editTodoFlag').checked,
+            request: document.getElementById('editTodoRequest').value || null
+        };
+
+        if (!formData.remark.trim()) {
+            showError('할일 내용을 입력해주세요.');
+            return;
+        }
+
+        showLoading();
+        fetch('/Todo/UpdateTodo', {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(formData)
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.Success) {
+                hideEditModal();
+                loadTodos();
+                showSuccess(data.Message || '할일이 수정되었습니다.');
+            } else {
+                showError(data.Message || '할일 수정에 실패했습니다.');
+            }
+            hideLoading();
+        })
+        .catch(error => {
+            console.error('할일 수정 중 오류:', error);
+            showError('서버 연결에 실패했습니다.');
+            hideLoading();
+        });
+    }
+
+    // 할일 삭제
+    function deleteTodo(id) {
+        if (!confirm('정말로 이 할일을 삭제하시겠습니까?')) {
+            return;
+        }
+
+        showLoading();
+        fetch(`/Todo/DeleteTodo?id=${id}`, {
+            method: 'DELETE'
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.Success) {
+                loadTodos();
+                showSuccess(data.Message || '할일이 삭제되었습니다.');
+            } else {
+                showError(data.Message || '할일 삭제에 실패했습니다.');
+            }
+            hideLoading();
+        })
+        .catch(error => {
+            console.error('할일 삭제 중 오류:', error);
+            showError('서버 연결에 실패했습니다.');
+            hideLoading();
+        });
+    }
+
+    // 새 할일 추가 모달 표시/숨기기
+    function showAddTodoModal() {
+        document.getElementById('addTodoModal').classList.remove('hidden');
+        // 폼 초기화
+        document.getElementById('todoForm').reset();
+    }
+
+    function hideAddTodoModal() {
+        document.getElementById('addTodoModal').classList.add('hidden');
+    }
+
+    // 수정 모달 표시/숨기기
+    function showEditModal() {
+        document.getElementById('editModal').classList.remove('hidden');
+    }
+
+    function hideEditModal() {
+        document.getElementById('editModal').classList.add('hidden');
+        currentEditId = null;
+    }
+
+    // 유틸리티 함수들
+    function showLoading() {
+        document.getElementById('loadingIndicator').classList.remove('hidden');
+    }
+
+    function hideLoading() {
+        document.getElementById('loadingIndicator').classList.add('hidden');
+    }
+
+    function showError(message) {
+        alert('오류: ' + message);
+    }
+
+    function showSuccess(message) {
+        alert('성공: ' + message);
+    }
+
+    // 이벤트 리스너 등록
+    document.getElementById('todoForm').addEventListener('submit', function(e) {
+        e.preventDefault();
+        addTodo();
+    });
+
+    // ESC 키로 모달 닫기
+    document.addEventListener('keydown', function(event) {
+        if (event.key === 'Escape') {
+            hideAddTodoModal();
+            hideEditModal();
+        }
+    });
+
+    // 새 할일 추가 모달 외부 클릭으로 닫기
+    document.getElementById('addTodoModal').addEventListener('click', function(event) {
+        if (event.target === this) {
+            hideAddTodoModal();
+        }
+    });
+
+    // 수정 모달 외부 클릭으로 닫기
+    document.getElementById('editModal').addEventListener('click', function(event) {
+        if (event.target === this) {
+            hideEditModal();
+        }
+    });
+
+    // 페이지 초기화
+    document.addEventListener('DOMContentLoaded', function() {
+        initNavigation('todo');
+        loadTodos();
+    });
+    </script>
+</body>
+</html> 

Project/Web/wwwroot/js/navigation.js

@@ -0,0 +1,195 @@
+/**
+ * 공통 네비게이션 컴포넌트
+ * 서버에서 메뉴 정보를 받아와서 동적으로 네비게이션을 생성합니다.
+ */
+class CommonNavigation {
+    constructor(currentPage = '') {
+        this.currentPage = currentPage;
+        this.menuItems = [];
+        this.init();
+    }
+
+    async init() {
+        try {
+            await this.loadMenuItems();
+            this.createNavigation();
+            this.addEventListeners();
+        } catch (error) {
+            console.error('Navigation initialization failed:', error);
+            // 오류 발생 시 기본 메뉴로 폴백
+            this.createFallbackNavigation();
+        }
+    }
+
+    async loadMenuItems() {
+        try {
+            const response = await fetch('/api/Common/GetNavigationMenu');
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            
+            if (data.Success && data.Data) {
+                this.menuItems = data.Data;
+            } else {
+                throw new Error(data.Message || 'Failed to load menu items');
+            }
+        } catch (error) {
+            console.error('Failed to load navigation menu:', error);
+            // 기본 메뉴 항목으로 폴백
+            this.menuItems = this.getDefaultMenuItems();
+        }
+    }
+
+    getDefaultMenuItems() {
+        return [
+            {
+                key: 'dashboard',
+                title: '대시보드',
+                url: '/Dashboard/',
+                icon: 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z',
+                isVisible: true,
+                sortOrder: 1
+            },
+            {
+                key: 'common',
+                title: '공용코드',
+                url: '/Common',
+                icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',
+                isVisible: true,
+                sortOrder: 2
+            },
+            {
+                key: 'jobreport',
+                title: '업무일지',
+                url: '/Jobreport/',
+                icon: 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2',
+                isVisible: true,
+                sortOrder: 3
+            },
+            {
+                key: 'kuntae',
+                title: '근태관리',
+                url: '/Kuntae/',
+                icon: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z',
+                isVisible: true,
+                sortOrder: 4
+            },
+            {
+                key: 'todo',
+                title: '할일관리',
+                url: '/Todo/',
+                icon: 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2M12 12l2 2 4-4',
+                isVisible: true,
+                sortOrder: 5
+            }
+        ];
+    }
+
+    createNavigation() {
+        const nav = document.createElement('nav');
+        nav.className = 'glass-effect border-b border-white/10';
+        nav.innerHTML = this.getNavigationHTML();
+        
+        // body의 첫 번째 자식으로 추가
+        document.body.insertBefore(nav, document.body.firstChild);
+    }
+
+    createFallbackNavigation() {
+        console.log('Creating fallback navigation...');
+        this.createNavigation();
+    }
+
+    getNavigationHTML() {
+        const visibleItems = this.menuItems
+            .filter(item => item.isVisible)
+            .sort((a, b) => a.sortOrder - b.sortOrder);
+
+        return `
+            <div class="container mx-auto px-4">
+                <div class="flex items-center justify-between h-16">
+                    <!-- 로고/타이틀 -->
+                    <div class="flex items-center">
+                        <h2 class="text-xl font-bold text-white">GroupWare</h2>
+                    </div>
+                    
+                    <!-- 메뉴 -->
+                    <div class="hidden md:flex items-center space-x-8">
+                        ${visibleItems.map(item => this.getMenuItemHTML(item)).join('')}
+                    </div>
+                    
+                    <!-- 모바일 메뉴 버튼 -->
+                    <div class="md:hidden">
+                        <button id="mobile-menu-button" class="text-white/80 hover:text-white transition-colors p-2">
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- 모바일 메뉴 -->
+                <div id="mobile-menu" class="md:hidden hidden border-t border-white/10 pt-4 pb-4">
+                    ${visibleItems.map(item => this.getMobileMenuItemHTML(item)).join('')}
+                </div>
+            </div>
+        `;
+    }
+
+    getMenuItemHTML(item) {
+        const isActive = this.currentPage === item.key;
+        const activeClass = isActive ? 'text-white bg-white/20' : 'text-white/80 hover:text-white hover:bg-white/10';
+        
+        return `
+            <a href="${item.url}" class="${activeClass} transition-colors px-3 py-2 rounded-lg">
+                <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${item.icon}"></path>
+                </svg>
+                ${item.title}
+            </a>
+        `;
+    }
+
+    getMobileMenuItemHTML(item) {
+        const isActive = this.currentPage === item.key;
+        const activeClass = isActive ? 'text-white bg-white/20' : 'text-white/80 hover:text-white hover:bg-white/10';
+        
+        return `
+            <a href="${item.url}" class="block ${activeClass} transition-colors px-3 py-2 rounded-lg mb-2">
+                <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${item.icon}"></path>
+                </svg>
+                ${item.title}
+            </a>
+        `;
+    }
+
+    addEventListeners() {
+        // 모바일 메뉴 토글
+        const mobileMenuButton = document.getElementById('mobile-menu-button');
+        const mobileMenu = document.getElementById('mobile-menu');
+        
+        if (mobileMenuButton && mobileMenu) {
+            mobileMenuButton.addEventListener('click', function() {
+                mobileMenu.classList.toggle('hidden');
+            });
+        }
+    }
+}
+
+// 전역 함수로 내비게이션 초기화
+function initNavigation(currentPage = '') {
+    // DOM이 로드된 후에 실행
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => {
+            new CommonNavigation(currentPage);
+        });
+    } else {
+        new CommonNavigation(currentPage);
+    }
+}
+
+// ES6 모듈로도 사용 가능하도록 export (필요시)
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { CommonNavigation, initNavigation };
+}