shared-dg05-coffeeQuokka/hgzero
1
0
Fork 0
mirror of https://github.com/hwanny1128/HGZero.git synced 2026-01-21 20:46:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

날짜 입력란 캘린더 UI 개선

Browse Source 
- 문제: 캘린더 열릴 때 달력 아이콘이 사라지고 테두리가 명확하지 않음
- 해결: 커스텀 달력 아이콘과 브라우저별 최적화

주요 개선사항:
- 📅 달력 아이콘을 별도 레이어로 분리하여 캘린더 열려도 계속 표시
- 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 <noreply@anthropic.com>
This commit is contained in:
yabo0812 2025-10-22 14:21:58 +09:00
parent ca5bbf32b2
commit 57d1c66b76
4 changed files with 318 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
design/uiux/prototype/03-회의예약.html
View File

@ -6,51 +6,6 @@
<title>회의 예약 - 회의록 서비스</title> <title>회의 예약 - 회의록 서비스</title>
<link rel="stylesheet" href="common.css"> <link rel="stylesheet" href="common.css">
<style> <style>
/* 헤더 */
.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);
}
.back-btn {
background: transparent;
border: none;
font-size: 24px;
color: var(--gray-700);
cursor: pointer;
padding: var(--space-sm);
}
.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);
}
}
/* 메인 콘텐츠 */ /* 메인 콘텐츠 */
.main-content { .main-content {
margin-top: 64px; margin-top: 64px;
@ -110,6 +65,47 @@
} }
} }
/* 날짜 입력 필드 래퍼 - 달력 아이콘 보호 */
.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);
}
/* 토글 스위치 */ /* 토글 스위치 */
.toggle-wrapper { .toggle-wrapper {
display: flex; display: flex;
@ -217,23 +213,7 @@
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
} }
/* 제출 버튼 */ /* 하단 액션 바 - common.css에서 기본 스타일 적용됨 */
.submit-actions {
position: fixed;
bottom: 0;
left: 0;
right: 0;
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-md);
}
.submit-actions .btn {
flex: 1;
}
</style> </style>
</head> </head>
<body> <body>
@ -243,7 +223,7 @@
<button class="back-btn" id="back-btn">←</button> <button class="back-btn" id="back-btn">←</button>
<h1 class="header-title">회의 예약</h1> <h1 class="header-title">회의 예약</h1>
</div> </div>
<button class="btn btn-ghost btn-sm" id="draft-save-btn">임시저장</button> <button class="btn btn-primary btn-sm" id="draft-save-btn">임시저장</button>
</header> </header>
<!-- 메인 콘텐츠 --> <!-- 메인 콘텐츠 -->
@ -274,7 +254,7 @@
<div class="form-group"> <div class="form-group">
<label class="form-label">날짜 및 시간 *</label> <label class="form-label">날짜 및 시간 *</label>
<div class="datetime-group"> <div class="datetime-group">
<div> <div class="date-input-wrapper">
<input <input
type="date" type="date"
id="meeting-date" id="meeting-date"
@ -391,8 +371,8 @@
</form> </form>
</main> </main>
<!-- 제출 버튼 --> <!-- 하단 액션 바 -->
<div class="submit-actions"> <div class="action-bar">
<button type="button" class="btn btn-secondary" id="cancel-btn">취소</button> <button type="button" class="btn btn-secondary" id="cancel-btn">취소</button>
<button type="submit" form="meeting-form" class="btn btn-primary">예약 완료</button> <button type="submit" form="meeting-form" class="btn btn-primary">예약 완료</button>
</div> </div>

75
design/uiux/prototype/07-회의종료.html
View File

@ -165,27 +165,61 @@
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
} }
/* 액션 버튼 그룹 */ /* 하단 액션 바 - common.css에서 기본 스타일 적용됨 */
.action-buttons { /* 이 화면만 버튼 크기 비율 조정: 공유(1) : 수정(1) : 대시보드(4) */
display: flex; .action-bar .btn-secondary {
flex-direction: column; flex: 1;
gap: var(--space-sm); }
margin-top: var(--space-lg);
.action-bar .btn-primary {
flex: 4;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.stats-grid { .stats-grid {
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
} }
.action-buttons {
flex-direction: row;
justify-content: center;
} }
.action-buttons .btn { /* 날짜 입력 필드 래퍼 - 달력 아이콘 보호 */
min-width: 160px; .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);
} }
</style> </style>
</head> </head>
@ -260,20 +294,19 @@
</button> </button>
</div> </div>
<!-- 하단 액션 버튼 --> <!-- 하단 액션 바 -->
<div class="action-buttons"> <div class="action-bar">
<button class="btn btn-primary" onclick="navigateTo('08-회의록공유.html')"> <button class="btn btn-secondary" onclick="navigateTo('08-회의록공유.html')">
회의록 공유하기 공유
</button> </button>
<button class="btn btn-secondary" onclick="navigateTo('04-회의록편집.html')"> <button class="btn btn-secondary" onclick="navigateTo('04-회의록편집.html')">
회의록 수정하기 수정
</button> </button>
<button class="btn btn-ghost" onclick="navigateTo('01-대시보드.html')"> <button class="btn btn-primary" onclick="navigateTo('02-대시보드.html')">
대시보드로 돌아가기 대시보드로 이동
</button> </button>
</div> </div>
</div> </div>
</div>
<!-- Todo 편집 모달 --> <!-- Todo 편집 모달 -->
<div class="modal-overlay" id="todoEditModal"> <div class="modal-overlay" id="todoEditModal">
@ -297,8 +330,10 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label">마감일</label> <label class="form-label">마감일</label>
<div class="date-input-wrapper">
<input type="date" class="form-control" value="2025-10-23"> <input type="date" class="form-control" value="2025-10-23">
</div> </div>
</div>
<div class="form-group"> <div class="form-group">
<label class="form-label">우선순위</label> <label class="form-label">우선순위</label>
<select class="form-control"> <select class="form-control">

43
design/uiux/prototype/09-Todo관리.html
View File

@ -266,6 +266,47 @@
grid-template-columns: repeat(4, 1fr); 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);
}
</style> </style>
</head> </head>
<body> <body>
@ -390,8 +431,10 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label">마감일</label> <label class="form-label">마감일</label>
<div class="date-input-wrapper">
<input type="date" class="form-control"> <input type="date" class="form-control">
</div> </div>
</div>
<div class="form-group"> <div class="form-group">
<label class="form-label">우선순위</label> <label class="form-label">우선순위</label>
<select class="form-control"> <select class="form-control">

169
design/uiux/prototype/common.css
View File

@ -209,7 +209,7 @@ a:hover {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: var(--space-sm); gap: var(--space-sm);
padding: 12px 24px; padding: 12px 16px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
font-size: var(--font-body); font-size: var(--font-body);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
@ -298,6 +298,26 @@ a:hover {
z-index: 1001; /* 하단 네비게이션 바(1000) 위에 표시 */ 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) { @media (min-width: 768px) {
.fab { .fab {
@ -415,6 +435,92 @@ textarea.form-control {
min-height: 100px; 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 */
.checkbox-wrapper { .checkbox-wrapper {
display: flex; 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 { .sidebar {