diff --git a/design/uiux/prototype/03-회의예약.html b/design/uiux/prototype/03-회의예약.html
index 9594716..b610cce 100644
--- a/design/uiux/prototype/03-회의예약.html
+++ b/design/uiux/prototype/03-회의예약.html
@@ -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
>
-
@@ -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 =>
+ `${h}
`
+ ).join('');
+
+ startMinuteOptions.innerHTML = minutes.map(m =>
+ `${m}
`
+ ).join('');
+
+ // 종료 시간 선택기
+ const endHourOptions = $('#end-hour-options');
+ const endMinuteOptions = $('#end-minute-options');
+ const endTimePicker = $('#end-time-picker');
+
+ endHourOptions.innerHTML = hours.map(h =>
+ `${h}
`
+ ).join('');
+
+ endMinuteOptions.innerHTML = minutes.map(m =>
+ `${m}
`
+ ).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();