mirror of
https://github.com/hwanny1128/HGZero.git
synced 2026-01-21 14:56:24 +00:00
날짜 입력란 캘린더 UI 개선
- 문제: 캘린더 열릴 때 달력 아이콘이 사라지고 테두리가 명확하지 않음 - 해결: 커스텀 달력 아이콘과 브라우저별 최적화 주요 개선사항: - 📅 달력 아이콘을 별도 레이어로 분리하여 캘린더 열려도 계속 표시 - 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
parent
ca5bbf32b2
commit
57d1c66b76
@ -6,51 +6,6 @@
|
||||
<title>회의 예약 - 회의록 서비스</title>
|
||||
<link rel="stylesheet" href="common.css">
|
||||
<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 {
|
||||
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 {
|
||||
display: flex;
|
||||
@ -217,23 +213,7 @@
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
/* 제출 버튼 */
|
||||
.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;
|
||||
}
|
||||
/* 하단 액션 바 - common.css에서 기본 스타일 적용됨 */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -243,7 +223,7 @@
|
||||
<button class="back-btn" id="back-btn">←</button>
|
||||
<h1 class="header-title">회의 예약</h1>
|
||||
</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>
|
||||
|
||||
<!-- 메인 콘텐츠 -->
|
||||
@ -274,7 +254,7 @@
|
||||
<div class="form-group">
|
||||
<label class="form-label">날짜 및 시간 *</label>
|
||||
<div class="datetime-group">
|
||||
<div>
|
||||
<div class="date-input-wrapper">
|
||||
<input
|
||||
type="date"
|
||||
id="meeting-date"
|
||||
@ -391,8 +371,8 @@
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<!-- 제출 버튼 -->
|
||||
<div class="submit-actions">
|
||||
<!-- 하단 액션 바 -->
|
||||
<div class="action-bar">
|
||||
<button type="button" class="btn btn-secondary" id="cancel-btn">취소</button>
|
||||
<button type="submit" form="meeting-form" class="btn btn-primary">예약 완료</button>
|
||||
</div>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@ -260,18 +294,17 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 하단 액션 버튼 -->
|
||||
<div class="action-buttons">
|
||||
<button class="btn btn-primary" onclick="navigateTo('08-회의록공유.html')">
|
||||
회의록 공유하기
|
||||
</button>
|
||||
<button class="btn btn-secondary" onclick="navigateTo('04-회의록편집.html')">
|
||||
회의록 수정하기
|
||||
</button>
|
||||
<button class="btn btn-ghost" onclick="navigateTo('01-대시보드.html')">
|
||||
대시보드로 돌아가기
|
||||
</button>
|
||||
</div>
|
||||
<!-- 하단 액션 바 -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-secondary" onclick="navigateTo('08-회의록공유.html')">
|
||||
공유
|
||||
</button>
|
||||
<button class="btn btn-secondary" onclick="navigateTo('04-회의록편집.html')">
|
||||
수정
|
||||
</button>
|
||||
<button class="btn btn-primary" onclick="navigateTo('02-대시보드.html')">
|
||||
대시보드로 이동
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -297,7 +330,9 @@
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">마감일</label>
|
||||
<input type="date" class="form-control" value="2025-10-23">
|
||||
<div class="date-input-wrapper">
|
||||
<input type="date" class="form-control" value="2025-10-23">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">우선순위</label>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -390,7 +431,9 @@
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">마감일</label>
|
||||
<input type="date" class="form-control">
|
||||
<div class="date-input-wrapper">
|
||||
<input type="date" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">우선순위</label>
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user