From 57d1c66b764e844948493b182ca46a304bb3370a Mon Sep 17 00:00:00 2001 From: yabo0812 Date: Wed, 22 Oct 2025 14:21:58 +0900 Subject: [PATCH] =?UTF-8?q?=EB=82=A0=EC=A7=9C=20=EC=9E=85=EB=A0=A5?= =?UTF-8?q?=EB=9E=80=20=EC=BA=98=EB=A6=B0=EB=8D=94=20UI=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 문제: 캘린더 열릴 때 달력 아이콘이 사라지고 테두리가 명확하지 않음 - 해결: 커스텀 달력 아이콘과 브라우저별 최적화 주요 개선사항: - 📅 달력 아이콘을 별도 레이어로 분리하여 캘린더 열려도 계속 표시 - CSS ::after 가상 요소로 z-index 제어 - 크롬/엣지 브라우저용 그림자 효과 추가 - 포커스 시 하단 primary 색상 테두리 강조 수정 파일: - common.css: 전역 날짜 입력 스타일 개선 - 03-회의예약.html: date-input-wrapper 적용 - 07-회의종료.html: date-input-wrapper 적용 - 09-Todo관리.html: date-input-wrapper 적용 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- design/uiux/prototype/03-회의예약.html | 112 +++++++--------- design/uiux/prototype/07-회의종료.html | 87 +++++++++---- design/uiux/prototype/09-Todo관리.html | 45 ++++++- design/uiux/prototype/common.css | 169 ++++++++++++++++++++++++- 4 files changed, 318 insertions(+), 95 deletions(-) diff --git a/design/uiux/prototype/03-회의예약.html b/design/uiux/prototype/03-회의예약.html index 67141bd..9594716 100644 --- a/design/uiux/prototype/03-회의예약.html +++ b/design/uiux/prototype/03-회의예약.html @@ -6,51 +6,6 @@ 회의 예약 - 회의록 서비스 @@ -243,7 +223,7 @@

회의 예약

- + @@ -274,7 +254,7 @@
-
+
- -
+ +
diff --git a/design/uiux/prototype/07-회의종료.html b/design/uiux/prototype/07-회의종료.html index 04e4e8d..3a21d08 100644 --- a/design/uiux/prototype/07-회의종료.html +++ b/design/uiux/prototype/07-회의종료.html @@ -165,27 +165,61 @@ font-weight: var(--font-weight-bold); } - /* 액션 버튼 그룹 */ - .action-buttons { - display: flex; - flex-direction: column; - gap: var(--space-sm); - margin-top: var(--space-lg); + /* 하단 액션 바 - common.css에서 기본 스타일 적용됨 */ + /* 이 화면만 버튼 크기 비율 조정: 공유(1) : 수정(1) : 대시보드(4) */ + .action-bar .btn-secondary { + flex: 1; + } + + .action-bar .btn-primary { + flex: 4; } @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } + } - .action-buttons { - flex-direction: row; - justify-content: center; - } + /* 날짜 입력 필드 래퍼 - 달력 아이콘 보호 */ + .date-input-wrapper { + position: relative; + } - .action-buttons .btn { - min-width: 160px; - } + .date-input-wrapper input[type="date"] { + position: relative; + z-index: 1; + } + + /* 달력 아이콘을 별도 요소로 표시 */ + .date-input-wrapper::after { + content: '📅'; + position: absolute; + right: 12px; + top: 50%; + transform: translateY(-50%); + pointer-events: none; + font-size: 18px; + z-index: 3; + } + + /* 네이티브 달력 아이콘 숨김 */ + .date-input-wrapper input[type="date"]::-webkit-calendar-picker-indicator { + position: absolute; + right: 0; + width: 100%; + height: 100%; + opacity: 0; + cursor: pointer; + z-index: 2; + /* Edge 브라우저 캘린더 팝업에 그림자 추가 */ + filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2)); + } + + /* Edge 브라우저용 포커스 시 하단 테두리 강조 */ + .date-input-wrapper input[type="date"]:focus { + box-shadow: 0 0 0 3px rgba(77, 213, 167, 0.15), + 0 4px 0 0 var(--primary); } @@ -260,18 +294,17 @@
- -
- - - -
+ +
+ + +
@@ -297,7 +330,9 @@
- +
+ +
diff --git a/design/uiux/prototype/09-Todo관리.html b/design/uiux/prototype/09-Todo관리.html index 5775b08..39709ff 100644 --- a/design/uiux/prototype/09-Todo관리.html +++ b/design/uiux/prototype/09-Todo관리.html @@ -266,6 +266,47 @@ grid-template-columns: repeat(4, 1fr); } } + + /* 날짜 입력 필드 래퍼 - 달력 아이콘 보호 */ + .date-input-wrapper { + position: relative; + } + + .date-input-wrapper input[type="date"] { + position: relative; + z-index: 1; + } + + /* 달력 아이콘을 별도 요소로 표시 */ + .date-input-wrapper::after { + content: '📅'; + position: absolute; + right: 12px; + top: 50%; + transform: translateY(-50%); + pointer-events: none; + font-size: 18px; + z-index: 3; + } + + /* 네이티브 달력 아이콘 숨김 */ + .date-input-wrapper input[type="date"]::-webkit-calendar-picker-indicator { + position: absolute; + right: 0; + width: 100%; + height: 100%; + opacity: 0; + cursor: pointer; + z-index: 2; + /* Edge 브라우저 캘린더 팝업에 그림자 추가 */ + filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2)); + } + + /* Edge 브라우저용 포커스 시 하단 테두리 강조 */ + .date-input-wrapper input[type="date"]:focus { + box-shadow: 0 0 0 3px rgba(77, 213, 167, 0.15), + 0 4px 0 0 var(--primary); + } @@ -390,7 +431,9 @@
- +
+ +
diff --git a/design/uiux/prototype/common.css b/design/uiux/prototype/common.css index 70c85ad..6d076d1 100644 --- a/design/uiux/prototype/common.css +++ b/design/uiux/prototype/common.css @@ -209,7 +209,7 @@ a:hover { align-items: center; justify-content: center; gap: var(--space-sm); - padding: 12px 24px; + padding: 12px 16px; border-radius: var(--radius-md); font-size: var(--font-body); font-weight: var(--font-weight-medium); @@ -298,6 +298,26 @@ a:hover { z-index: 1001; /* 하단 네비게이션 바(1000) 위에 표시 */ } +/* Action Bar (하단 액션 바) */ +.action-bar { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 80px; + background: var(--white); + border-top: 1px solid var(--gray-300); + box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08); + padding: var(--space-md); + display: flex; + gap: var(--space-sm); + z-index: 100; +} + +.action-bar .btn { + flex: 1; +} + /* 데스크톱에서는 원래 위치로 */ @media (min-width: 768px) { .fab { @@ -415,6 +435,92 @@ textarea.form-control { min-height: 100px; } +/* Date/Time Inputs - 캘린더 레이어 스타일링 */ +input[type="date"], +input[type="time"], +input[type="datetime-local"] { + position: relative; + background-image: linear-gradient(to bottom, var(--white) 0%, var(--gray-50, #FAFAFA) 100%); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); + padding-right: 40px; /* 달력 아이콘 공간 확보 */ +} + +/* 캘린더 팝업 스타일 개선 */ +input[type="date"]::-webkit-calendar-picker-indicator, +input[type="time"]::-webkit-calendar-picker-indicator, +input[type="datetime-local"]::-webkit-calendar-picker-indicator { + cursor: pointer; + padding: 8px; + margin-right: -8px; + border-radius: var(--radius-sm); + transition: all var(--transition-fast); + opacity: 0.8; + position: absolute; + right: 8px; + z-index: 2; /* 캘린더가 열려도 아이콘이 보이도록 */ +} + +input[type="date"]::-webkit-calendar-picker-indicator:hover, +input[type="time"]::-webkit-calendar-picker-indicator:hover, +input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { + background: var(--gray-100); + opacity: 1; + transform: scale(1.1); +} + +/* 캘린더 드롭다운이 열릴 때 input에 포커스 효과 강조 */ +input[type="date"]:focus, +input[type="time"]:focus, +input[type="datetime-local"]:focus { + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(77, 213, 167, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.05); + background-image: linear-gradient(to bottom, var(--white) 0%, var(--primary-light) 100%); + position: relative; + z-index: 1000; /* 캘린더가 다른 요소 위에 표시되도록 */ +} + +/* 날짜/시간 입력 필드 활성화 시 레이어 구분 */ +input[type="date"]:focus-visible, +input[type="time"]:focus-visible, +input[type="datetime-local"]:focus-visible { + outline: 2px solid var(--primary); + outline-offset: 2px; +} + +/* 브라우저 네이티브 캘린더 팝업 개선 (Chrome/Edge) */ +input[type="date"]::-webkit-datetime-edit, +input[type="time"]::-webkit-datetime-edit, +input[type="datetime-local"]::-webkit-datetime-edit { + padding: 0; + margin-right: 8px; +} + +/* Edge 브라우저 캘린더 팝업 테두리 개선 */ +input[type="date"]::-webkit-calendar-picker-indicator { + filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15)); +} + +/* Edge 전용: 캘린더 드롭다운에 시각적 경계 추가 */ +@supports (-ms-ime-align: auto) { + input[type="date"]::after, + input[type="time"]::after { + content: ''; + position: absolute; + top: calc(100% + 4px); + left: 0; + right: 0; + height: 2px; + background: var(--primary); + opacity: 0; + transition: opacity var(--transition-fast); + } + + input[type="date"]:focus::after, + input[type="time"]:focus::after { + opacity: 1; + } +} + /* Checkbox */ .checkbox-wrapper { display: flex; @@ -815,7 +921,66 @@ textarea.form-control { } /* ======================================== - 18. Desktop Sidebar (공통) + 18. Header (공통) + ======================================== */ +.header { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 64px; + background: var(--white); + border-bottom: 1px solid var(--gray-300); + box-shadow: var(--shadow-sm); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 var(--space-md); + z-index: 100; +} + +.header-left { + display: flex; + align-items: center; + gap: var(--space-md); +} + +.header-right { + display: flex; + align-items: center; + gap: var(--space-md); +} + +.back-btn, +.icon-btn { + background: transparent; + border: none; + font-size: 24px; + color: var(--gray-700); + cursor: pointer; + padding: var(--space-sm); + transition: color var(--transition-fast); +} + +.icon-btn:hover { + color: var(--primary); +} + +.header-title { + font-size: var(--font-h3); + font-weight: var(--font-weight-bold); + color: var(--gray-900); +} + +/* 데스크톱: 헤더 조정 */ +@media (min-width: 768px) { + .header { + padding: 0 var(--space-xl); + } +} + +/* ======================================== + 19. Desktop Sidebar (공통) ======================================== */ /* 사이드바 기본 숨김 (모바일) */ .sidebar {