mirror of
https://github.com/hwanny1128/HGZero.git
synced 2025-12-06 11:26:25 +00:00
회의예약 화면 레이아웃 개선
- 날짜/시간 입력 필드 레이아웃 수정 - 반응형 디자인 개선 - UI 일관성 향상 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yabo0812
parent
57d1c66b76
commit
c4f2a37da1
@ -65,6 +65,88 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 시간 입력 필드 래퍼 - 시계 아이콘 추가 */
|
||||
.time-input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.time-input-wrapper input[type="text"] {
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
/* 시계 아이콘 */
|
||||
.time-input-wrapper::after {
|
||||
content: '🕐';
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* 커스텀 시간 선택 팝업 */
|
||||
.time-picker-popup {
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--white);
|
||||
border: 1px solid var(--gray-300);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.time-picker-popup.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.time-picker-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1px;
|
||||
background: var(--gray-300);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.time-picker-column {
|
||||
background: var(--white);
|
||||
padding: var(--space-sm);
|
||||
}
|
||||
|
||||
.time-picker-label {
|
||||
font-size: var(--font-small);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--gray-700);
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
text-align: center;
|
||||
border-bottom: 1px solid var(--gray-200);
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.time-option {
|
||||
padding: var(--space-sm);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.time-option:hover {
|
||||
background: var(--primary-light);
|
||||
}
|
||||
|
||||
.time-option.selected {
|
||||
background: var(--primary);
|
||||
color: var(--white);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
/* 날짜 입력 필드 래퍼 - 달력 아이콘 보호 */
|
||||
.date-input-wrapper {
|
||||
position: relative;
|
||||
@ -263,23 +345,51 @@
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<div class="time-input-wrapper">
|
||||
<input
|
||||
type="time"
|
||||
type="text"
|
||||
id="meeting-start-time"
|
||||
name="startTime"
|
||||
class="form-control"
|
||||
placeholder="시작 시간"
|
||||
readonly
|
||||
required
|
||||
>
|
||||
<div class="time-picker-popup" id="start-time-picker">
|
||||
<div class="time-picker-grid">
|
||||
<div class="time-picker-column">
|
||||
<div class="time-picker-label">시</div>
|
||||
<div id="start-hour-options"></div>
|
||||
</div>
|
||||
<div class="time-picker-column">
|
||||
<div class="time-picker-label">분</div>
|
||||
<div id="start-minute-options"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="time-input-wrapper">
|
||||
<input
|
||||
type="time"
|
||||
type="text"
|
||||
id="meeting-end-time"
|
||||
name="endTime"
|
||||
class="form-control"
|
||||
placeholder="종료 시간"
|
||||
readonly
|
||||
required
|
||||
>
|
||||
<div class="time-picker-popup" id="end-time-picker">
|
||||
<div class="time-picker-grid">
|
||||
<div class="time-picker-column">
|
||||
<div class="time-picker-label">시</div>
|
||||
<div id="end-hour-options"></div>
|
||||
</div>
|
||||
<div class="time-picker-column">
|
||||
<div class="time-picker-label">분</div>
|
||||
<div id="end-minute-options"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -457,6 +567,116 @@
|
||||
endTimeInput.value = '15:30';
|
||||
}
|
||||
|
||||
/**
|
||||
* 시간 선택 팝업 초기화
|
||||
*/
|
||||
function initTimePickers() {
|
||||
const hours = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'));
|
||||
const minutes = ['00', '15', '30', '45'];
|
||||
|
||||
// 시작 시간 선택기
|
||||
const startHourOptions = $('#start-hour-options');
|
||||
const startMinuteOptions = $('#start-minute-options');
|
||||
const startTimePicker = $('#start-time-picker');
|
||||
|
||||
startHourOptions.innerHTML = hours.map(h =>
|
||||
`<div class="time-option" data-value="${h}">${h}</div>`
|
||||
).join('');
|
||||
|
||||
startMinuteOptions.innerHTML = minutes.map(m =>
|
||||
`<div class="time-option" data-value="${m}">${m}</div>`
|
||||
).join('');
|
||||
|
||||
// 종료 시간 선택기
|
||||
const endHourOptions = $('#end-hour-options');
|
||||
const endMinuteOptions = $('#end-minute-options');
|
||||
const endTimePicker = $('#end-time-picker');
|
||||
|
||||
endHourOptions.innerHTML = hours.map(h =>
|
||||
`<div class="time-option" data-value="${h}">${h}</div>`
|
||||
).join('');
|
||||
|
||||
endMinuteOptions.innerHTML = minutes.map(m =>
|
||||
`<div class="time-option" data-value="${m}">${m}</div>`
|
||||
).join('');
|
||||
|
||||
// 시간 선택 상태
|
||||
let startHour = '14';
|
||||
let startMinute = '00';
|
||||
let endHour = '15';
|
||||
let endMinute = '30';
|
||||
|
||||
// 시작 시간 선택
|
||||
startTimeInput.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
startTimePicker.classList.toggle('active');
|
||||
endTimePicker.classList.remove('active');
|
||||
});
|
||||
|
||||
$$('#start-hour-options .time-option').forEach(option => {
|
||||
option.addEventListener('click', () => {
|
||||
$$('#start-hour-options .time-option').forEach(o => o.classList.remove('selected'));
|
||||
option.classList.add('selected');
|
||||
startHour = option.dataset.value;
|
||||
startTimeInput.value = `${startHour}:${startMinute}`;
|
||||
});
|
||||
if (option.dataset.value === startHour) {
|
||||
option.classList.add('selected');
|
||||
}
|
||||
});
|
||||
|
||||
$$('#start-minute-options .time-option').forEach(option => {
|
||||
option.addEventListener('click', () => {
|
||||
$$('#start-minute-options .time-option').forEach(o => o.classList.remove('selected'));
|
||||
option.classList.add('selected');
|
||||
startMinute = option.dataset.value;
|
||||
startTimeInput.value = `${startHour}:${startMinute}`;
|
||||
});
|
||||
if (option.dataset.value === startMinute) {
|
||||
option.classList.add('selected');
|
||||
}
|
||||
});
|
||||
|
||||
// 종료 시간 선택
|
||||
endTimeInput.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
endTimePicker.classList.toggle('active');
|
||||
startTimePicker.classList.remove('active');
|
||||
});
|
||||
|
||||
$$('#end-hour-options .time-option').forEach(option => {
|
||||
option.addEventListener('click', () => {
|
||||
$$('#end-hour-options .time-option').forEach(o => o.classList.remove('selected'));
|
||||
option.classList.add('selected');
|
||||
endHour = option.dataset.value;
|
||||
endTimeInput.value = `${endHour}:${endMinute}`;
|
||||
});
|
||||
if (option.dataset.value === endHour) {
|
||||
option.classList.add('selected');
|
||||
}
|
||||
});
|
||||
|
||||
$$('#end-minute-options .time-option').forEach(option => {
|
||||
option.addEventListener('click', () => {
|
||||
$$('#end-minute-options .time-option').forEach(o => o.classList.remove('selected'));
|
||||
option.classList.add('selected');
|
||||
endMinute = option.dataset.value;
|
||||
endTimeInput.value = `${endHour}:${endMinute}`;
|
||||
});
|
||||
if (option.dataset.value === endMinute) {
|
||||
option.classList.add('selected');
|
||||
}
|
||||
});
|
||||
|
||||
// 외부 클릭 시 팝업 닫기
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('.time-input-wrapper')) {
|
||||
startTimePicker.classList.remove('active');
|
||||
endTimePicker.classList.remove('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 문자 카운터 업데이트
|
||||
*/
|
||||
@ -701,6 +921,7 @@
|
||||
*/
|
||||
function init() {
|
||||
setDefaultDate();
|
||||
initTimePickers();
|
||||
renderParticipantChips();
|
||||
initEventListeners();
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user