Merge branch 'main' of https://github.com/hwanny1128/HGZero

design/uiux/prototype/09-Todo관리.html

@@ -83,8 +83,11 @@
 
     /* 페이지 특화 스타일 */
 
-    /* 통계 영역 - 모바일 최적화 */
+    /* 통계 영역 - 모바일에서도 한 줄 유지 */
     .stats-overview {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: var(--space-sm);
       margin-bottom: var(--space-md);
     }
 
@@ -92,27 +95,35 @@
     .stat-box {
       min-height: 80px;
       padding: var(--space-sm);
-      background: var(--gray-100); /* 플랫한 배경 */
-      border: 1px solid var(--gray-200); /* 얇은 경계선 */
-      border-radius: var(--radius-md); /* 부드러운 모서리 */
-      box-shadow: none; /* 그림자 제거 */
-      transition: none; /* 호버 효과 제거 */
+      background: var(--white);
+      border: 1px solid var(--gray-200);
+      border-radius: var(--radius-md);
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
     }
 
-    /* 상태별 컬러 코딩 */
+    .stat-box:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
+    }
+
+    /* 상태별 컬러 코딩 - 단색 배경 + 좌측 액센트 라인 */
     .stat-box.stat-incomplete {
-      background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%); /* 차분한 블루 그라데이션 */
-      border-color: #90CAF9;
+      background: #F8FBFF;
+      border-left: 4px solid #2196F3;
+      border-color: #E3F2FD;
     }
 
     .stat-box.stat-urgent {
-      background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%); /* 주의 오렌지 그라데이션 */
-      border-color: #FFB74D;
+      background: #FFFBF5;
+      border-left: 4px solid #FF9800;
+      border-color: #FFE0B2;
     }
 
     .stat-box.stat-overdue {
-      background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%); /* 긴급 레드 그라데이션 */
-      border-color: #EF5350;
+      background: #FFF8F8;
+      border-left: 4px solid #F44336;
+      border-color: #FFCDD2;
     }
 
     .stat-number {
@@ -289,6 +300,7 @@
       display: flex;
       gap: var(--space-md);
       align-items: flex-start;
+      position: relative;
     }
 
     .todo-checkbox-wrapper {
@@ -363,9 +375,11 @@
       display: none;
     }
 
-    /* 액션 버튼 영역 */
+    /* 액션 버튼 영역 - 우측 상단에 배치 */
     .todo-actions {
-      margin-top: var(--space-xs);
+      position: absolute;
+      top: var(--space-md);
+      right: var(--space-md);
     }
 
     /* 아이콘 버튼 */
@@ -379,22 +393,19 @@
       background: none;
       border: none;
       border-radius: var(--radius-md);
-      color: var(--gray-600);
+      font-size: 20px;
       cursor: pointer;
       transition: all var(--transition-fast);
     }
 
     .icon-btn:hover {
       background: var(--gray-100);
-      color: var(--primary);
+      transform: scale(1.1);
     }
 
     .icon-btn:active {
       background: var(--gray-200);
-    }
-
-    .icon-btn .material-icons {
-      font-size: 20px;
+      transform: scale(1);
     }
 
     /* 빈 상태 */
@@ -420,11 +431,6 @@
       margin-bottom: var(--space-lg);
     }
 
-    @media (min-width: 768px) {
-      .stats-overview {
-        grid-template-columns: repeat(4, 1fr);
-      }
-    }
 
     /* 날짜 입력 필드 래퍼 - 달력 아이콘 보호 */
     .date-input-wrapper {
@@ -466,6 +472,96 @@
       box-shadow: 0 0 0 3px rgba(77, 213, 167, 0.15),
                   0 4px 0 0 var(--primary);
     }
+
+    /* Todo 편집 모달 - 모바일 전체화면 */
+    #editTodoModal .modal {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100vh;
+      max-width: none;
+      max-height: none;
+      margin: 0;
+      border-radius: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    #editTodoModal .modal-header {
+      flex-shrink: 0;
+      padding: var(--space-lg) var(--space-md);
+      border-bottom: 1px solid var(--gray-200);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    #editTodoModal .modal-title {
+      font-size: var(--font-h3);
+      font-weight: var(--font-weight-bold);
+      margin: 0;
+    }
+
+    #editTodoModal .modal-close {
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 28px;
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: var(--gray-600);
+      border-radius: var(--radius-md);
+      transition: all var(--transition-fast);
+    }
+
+    #editTodoModal .modal-close:hover {
+      background: var(--gray-100);
+      color: var(--gray-900);
+    }
+
+    #editTodoModal .modal-body {
+      flex: 1;
+      overflow-y: auto;
+      padding: var(--space-lg) var(--space-md);
+      -webkit-overflow-scrolling: touch;
+    }
+
+    #editTodoModal .modal-footer {
+      flex-shrink: 0;
+      padding: var(--space-md);
+      border-top: 1px solid var(--gray-200);
+      display: flex;
+      gap: var(--space-sm);
+      background: var(--white);
+    }
+
+    #editTodoModal .modal-footer .btn {
+      flex: 1;
+    }
+
+    /* 데스크톱에서는 중앙 모달로 복원 */
+    @media (min-width: 768px) {
+      #editTodoModal .modal {
+        position: relative;
+        top: auto;
+        left: auto;
+        right: auto;
+        bottom: auto;
+        width: 90%;
+        max-width: 600px;
+        height: auto;
+        max-height: 90vh;
+        margin: 0 auto;
+        border-radius: var(--radius-lg);
+      }
+    }
   </style>
 </head>
 <body class="layout-sidebar-header has-sidebar">
@@ -771,13 +867,11 @@
                 </a>
                 <span>${formatDate(todo.dueDate)}</span>
               </div>
-              ${!isCompleted ? `
-                <div class="todo-actions">
-                  <button class="icon-btn" onclick="editTodo('${todo.id}')" title="편집">
-                    <span class="material-icons">edit</span>
-                  </button>
-                </div>
-              ` : ''}
+          ${!isCompleted ? `
+            <div class="todo-actions">
+              <button class="icon-btn" onclick="editTodo('${todo.id}')" title="편집">✏️</button>
+            </div>
+          ` : ''}
             </div>
           </div>
         `);

design/uiux/uiux.md

@@ -4,7 +4,7 @@
 - **작성일**: 2025-10-21
 - **최종 수정일**: 2025-10-23
 - **작성자**: 이미준 (서비스 기획자)
-- **버전**: 1.4.7
+- **버전**: 1.4.8
 - **설계 철학**: Mobile First Design
 
 ---
@@ -1121,10 +1121,14 @@ graph TD
   - "Todo 관리" 타이틀
   - 프로필 아이콘 (모바일)
 
-- **상단 통계 블록** (4개 블록)
-  - **전체**: 미완료 전체 개수
-  - **마감임박**: 기한 3일 이내 미완료 개수 (강조 스타일)
-  - **지연**: 기한이 지난 미완료 개수
+- **상단 통계 블록** (3개 블록, 정보 표시 전용)
+  - **디자인 특징**:
+    - 플랫한 디자인 (그림자 제거, 호버 효과 없음)
+    - 상태별 컬러 배경
+    - 큰 숫자 + 작은 레이블로 정보 계층 명확화
+  - **미완료**: 미완료 전체 개수 (블루)
+  - **마감임박**: 기한 3일 이내 미완료 개수 (오렌지)
+  - **지연**: 기한이 지난 미완료 개수 (레드)
 
 - **필터 탭**
   - **전체 (개수)**: 완료/미완료 전체
@@ -1134,20 +1138,37 @@ graph TD
 
 - **Todo 리스트 블록**
   - **정렬**: 미완료 → 완료 순서, 기한일 오래된 순 (복합 정렬)
-  - **각 Todo 카드** (블록 형태):
-    - **체크박스** (완료/미완료 토글, 액션 가능 표시)
-    - **Todo 제목**
-    - **상태 뱃지**: D+n(지연) / D-day / D-n / 완료
-    - **우선순위 뱃지**: 높음(빨강) / 보통(노랑) / 낮음(회색)
-    - **기한**
-    - **회의록 제목 + 링크** (클릭 시 10-회의록상세조회 대시보드 탭으로 이동)
-    - **편집 버튼** (권한 있는 경우에만 노출, 액션 가능 표시)
+  - **각 Todo 카드** (컴팩트 디자인):
+    - **레이아웃 구조**:
+      ```
+      [체크박스] [배지] [배지]              [✏️]
+                 [Todo 제목]
+                 [🔗 회의록 링크]  [마감일]
+      ```
+    - **좌측**: **체크박스** (완료/미완료 토글, 24×24px)
+    - **우측 상단**: **✏️ 편집 버튼** (absolute position, 32×32px 아이콘 버튼)
+      - 호버: 연한 회색 배경 + 1.1배 확대
+      - 권한 있는 경우에만 노출 (미완료 Todo)
+    - **콘텐츠 영역** (상단→하단 순서):
+      - **배지 영역**: 상태 뱃지 + 우선순위 뱃지 (가로 배치)
+        - 상태 뱃지: D+n(지연) / D-day / D-n / 완료
+        - 우선순위 뱃지: 높음(빨강) / 보통(노랑) / 낮음(회색)
+      - **Todo 제목** (일반 폰트)
+      - **하단 메타 정보**: 회의록 링크 + 마감일 (연한 회색)
+        - 🔗 회의록 제목 (연한 초록색 링크, 클릭 시 10-회의록상세조회 대시보드 탭으로 이동)
+        - 마감일 (회색 텍스트)
+    - **담당자 정보**: 표시 안 함 (간결한 디자인)
+    - **카드 스타일**:
+      - 얇은 테두리 (1px solid #gray-200)
+      - 얇은 그림자 (0 1px 3px rgba(0,0,0,0.08))
+      - 호버: 테두리 Primary 컬러로 변경 + 그림자 증가
   - **페이징**: 최초 10건 노출, 10건 이상일 경우 하단에 "10개 더보기" 버튼
 
 **Tablet/Desktop (768px+)**
 - 좌측 사이드바 + 메인 콘텐츠 영역
-- 통계 블록 4개 가로 배치
+- 통계 블록 3개 가로 배치
 - Todo 리스트 그리드 레이아웃 (2열)
+- 편집 버튼: 32×32px 아이콘 버튼 (우측 상단 고정)
 
 #### 인터랙션
 1. **Todo 완료/미완료 상태 변경**
@@ -1160,8 +1181,12 @@ graph TD
 2. **Todo 편집 (UFR-TODO-040)**
    - **편집 버튼 클릭** (권한: 담당자 본인 OR 회의 생성자):
      - 편집 모달 표시
-       - **모바일**: 바텀시트 형식
-       - **데스크톱**: 중앙 모달
+       - **모바일**: 전체화면 모드
+         - `position: fixed`, 화면 전체 크기 (100vh)
+         - Flexbox 구조: 헤더(고정) + 바디(스크롤) + 푸터(고정)
+         - 바디 영역만 스크롤 가능 (`overflow-y: auto`, `-webkit-overflow-scrolling: touch`)
+         - 닫기 버튼 크기 확대 (40×40px)
+       - **데스크톱**: 중앙 모달 (max-width: 600px, max-height: 90vh)
      - **수정 가능 항목**:
        - ✏️ Todo 제목 (input, 필수)
        - 👤 담당자 (select, 회의록 참석자 중 선택) - **회의 생성자만 변경 가능**
@@ -1170,6 +1195,9 @@ graph TD
      - **권한 표시**:
        - 담당자 본인: "본인에게 할당된 Todo만 수정할 수 있습니다. 담당자는 변경할 수 없습니다."
        - 회의 생성자: "회의 생성자로서 모든 항목을 수정할 수 있습니다. 담당자 변경 시 알림이 전송됩니다."
+     - **버튼 배치**:
+       - 모바일: 하단 고정, 가로로 균등 배치 (`flex: 1`)
+       - 데스크톱: 모달 하단, 우측 정렬
    - **저장 버튼 클릭**:
      - 유효성 검사 (제목, 마감일 필수)
      - "Todo가 수정되었습니다" 토스트 메시지
@@ -1191,12 +1219,24 @@ graph TD
    - 페이지 새로고침 없이 무한 스크롤 방식
 
 #### 디자인 요구사항
-- **액션 블록 vs 정보 블록 차별화**:
-  - 액션 가능 (체크박스, 편집 버튼): 호버 시 배경색 변경, 그림자 효과
-  - 정보 표시 (상태 뱃지, 우선순위, 기한): 정적 표시, 호버 효과 없음
+- **정보 블록 vs 인터랙티브 블록 시각적 차별화**:
+  - **통계 블록** (정보 표시):
+    - 플랫한 디자인, 그림자 제거
+    - 상태별 색상 배경
+    - 호버 효과 없음 (읽기 전용 의도 명확화)
+  - **Todo 카드** (인터랙티브):
+    - 얇은 테두리 + 얇은 그림자
+    - 호버: 테두리 색상 변경 + 그림자 증가
+    - 체크박스, 편집 버튼, 회의록 링크 액션 가능
+- **편집 버튼 디자인**:
+  - ✏️ 이모지 아이콘 사용 (Material Icons 대신)
+  - 32×32px 정사각형 아이콘 버튼
+  - 우측 상단 절대 위치 (absolute positioning)
+  - 호버: 연한 회색 배경 + 1.1배 확대 애니메이션
 - **모바일 최적화**:
   - 바텀시트 편집 모달 (전체 화면 X)
   - 터치 영역 최소 44px × 44px
+  - 컴팩트 카드 레이아웃으로 스크롤 최소화
 
 #### 데이터 요구사항
 - **입력**: 사용자 ID (내가 담당자인 Todo만 조회)
@@ -2034,6 +2074,7 @@ graph TD
 | 1.4.5 | 2025-10-23 | 강지수 | 로그아웃 기능 추가 (Desktop 사이드바 + Mobile 헤더)<br>- **Desktop 좌측 사이드바**: 하단에 사용자 정보 영역 추가<br>  - 사용자 정보 (아바타 + 이름 + 이메일)<br>  - 로그아웃 버튼 (btn-ghost btn-sm)<br>- **Mobile 상단 헤더**: 우측에 프로필 아이콘 버튼 추가 (👤)<br>  - 클릭 시 드롭다운 메뉴 표시 (사용자 정보 + 로그아웃 버튼)<br>  - 드롭다운 위치: 우측 상단 기준 아래로 펼침<br>  - 오버레이 배경으로 UX 개선<br>- **프로토타입 파일**: 02-대시보드.html, 09-Todo관리.html, 12-회의록목록조회.html<br>- **JavaScript 함수**: toggleProfileMenu(), logout() 추가<br>- **반응형 처리**: Desktop에서는 드롭다운 숨김, Mobile에서는 사이드바 사용자 영역 숨김<br>- **설계서-프로토타입 일관성**: 로그아웃 기능 완전 통일 |
 | 1.4.6 | 2025-10-23 | 강지수 | 검증완료 섹션 잠금해제 정책 단순화<br>- **정책 변경**: 검증완료 섹션은 회의 생성자만 잠금 해제 후 수정 가능 (참석자는 수정 불가)<br>- **제거**: 참석자용 잠금해제 요청 기능 완전 제거 (공수 절감)<br>- **11-회의록수정**: 검증완료 섹션에 "🔒 읽기 전용" 배지 표시 (참석자 화면)<br>  - 잠금해제요청 버튼 제거<br>  - unlockSection() 함수 제거<br>  - 읽기 전용 안내 텍스트 추가: "(잠금됨 · 회의 생성자만 수정 가능)"<br>- **06-검증완료**: 회의 생성자용 잠금해제 버튼 유지 (변경 없음)<br>- **인터랙션**: "3. 섹션 잠금 해제" → "3. 검증완료 섹션 (권한별 차등 표시)"로 수정<br>- **유저스토리**: UFR-MEET-055, UFR-COLLAB-030 권한 제어 명확화 |
 | 1.4.7 | 2025-10-23 | 강지수, 도그냥 | Todo 및 회의록 관련 UI/UX 재정의<br>- **09-Todo관리**: "Todo수정" → "Todo관리" 기능 확장<br>  - 통계 블록: 전체(미완료), 마감임박(3일 이내), 지연(기한 경과)<br>  - 필터 탭 개수 표시: 전체(개수), 지연(개수), 마감임박(개수), 완료(개수)<br>  - 편집 모달: 제목, 담당자, 마감일, 우선순위 수정<br>  - 체크박스 확인 모달: 완료/미완료 전환 시 확인<br>  - 프로토타입: 09-Todo관리.html (통계, 필터, 모달 구현)<br>- **10-회의록상세조회**: 탭 순서 및 기본 노출 변경<br>  - 탭 순서: 대시보드 → 회의록 (기존: 회의록 → 대시보드)<br>  - 기본 활성 탭: 대시보드 (Desktop/Mobile 공통)<br>  - 프로토타입: 10-회의록상세조회.html (탭 순서 변경, active 클래스 이동)<br>- **11-회의록수정**: 진입 경로 및 권한 제어 명확화<br>  - 진입 경로: 10-회의록상세조회 → "수정" 버튼 클릭<br>  - 권한 제어: 검증완료 전(모든 참석자), 검증완료 후(회의 생성자만)<br>  - 회의 일시/장소: 읽기 전용 표시 추가 "(읽기 전용)"<br>  - UI 구성: 회의록 리스트 제거, 직접 편집 화면으로 시작<br>  - 프로토타입: 11-회의록수정.html (권한 코멘트 추가, readonly 표시) |
+| 1.4.8 | 2025-10-23 | 강지수 | Todo 관리 화면 UI/UX 개선 (컴팩트 디자인 및 시각적 계층 차별화)<br>- **09-Todo관리**: 통계 블록 및 Todo 카드 디자인 전면 개선<br>  - **통계 블록**: 정보 표시 전용 디자인으로 변경<br>    - 그라데이션 제거 → 모던한 단색 배경 + 좌측 4px 액센트 라인<br>    - 상태별 연한 단색 배경 (블루 #F8FBFF / 오렌지 #FFFBF5 / 레드 #FFF8F8)<br>    - 호버 효과 추가: 살짝 떠오르는 애니메이션 (translateY -2px)<br>    - 미묘한 그림자로 깊이감 표현 (0 1px 3px rgba(0,0,0,0.05))<br>    - 모바일에서도 3개 블록 한 줄 유지 (grid-template-columns: repeat(3, 1fr))<br>    - 큰 숫자 + 작은 레이블로 정보 계층 명확화<br>  - **Todo 카드**: 컴팩트 레이아웃으로 재설계<br>    - 레이아웃: [체크박스] [배지] [배지] [✏️] / [제목] / [🔗 링크] [마감일]<br>    - 편집 버튼: 우측 상단 절대 위치, ✏️ 이모지 아이콘 사용 (32×32px)<br>    - 담당자 정보 제거 (간결한 디자인)<br>    - 얇은 테두리 + 얇은 그림자로 인터랙티브 의도 명확화<br>  - **Todo 편집 모달**: 모바일 전체화면 모드로 변경<br>    - 모바일: 전체화면 (100vh), 헤더/바디/푸터 flexbox 구조<br>    - 바디 영역만 스크롤 가능 (overflow-y: auto, -webkit-overflow-scrolling: touch)<br>    - 데스크톱: 중앙 모달 (max-width: 600px, max-height: 90vh)<br>    - 버튼 크기 확대 (40px) 및 가로 균등 배치 (flex: 1)<br>  - **시각적 차별화**: 정보 블록 vs 인터랙티브 블록<br>    - 통계 블록: 정보 표시 + 부드러운 호버 효과<br>    - Todo 카드: 인터랙티브 (호버 시 테두리/그림자 변경)<br>- **프로토타입**: design/uiux/prototype/09-Todo관리.html 전면 개선 |
 
 ---