diff --git a/about.html b/about.html index aac0135..fe60a58 100644 --- a/about.html +++ b/about.html @@ -98,6 +98,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/backgrounds.html b/backgrounds.html index 7099caf..00cd50d 100644 --- a/backgrounds.html +++ b/backgrounds.html @@ -71,6 +71,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/components/header.html b/components/header.html index 590bd29..114af17 100644 --- a/components/header.html +++ b/components/header.html @@ -13,6 +13,7 @@
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/contact.html b/contact.html index ec7bfd4..3cbd9d3 100644 --- a/contact.html +++ b/contact.html @@ -98,6 +98,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • @@ -433,6 +434,7 @@

    간편한 온라인 예약 또는 자주 묻는 질문을 확인해보세요

    네이버 예약 + 예약 현황 FAQ 보기
    diff --git a/css/schedule.css b/css/schedule.css new file mode 100644 index 0000000..ef189d3 --- /dev/null +++ b/css/schedule.css @@ -0,0 +1,544 @@ +/* ======================================== + 예약 현황 페이지 전용 스타일 + ======================================== */ + +/* 스케줄 래퍼 */ +.schedule-wrapper { + max-width: 720px; + margin: 0 auto; +} + +/* 캘린더 카드 */ +.calendar-card { + background: var(--bg-white); + border-radius: var(--border-radius-lg); + box-shadow: var(--shadow-md); + overflow: hidden; + margin-bottom: var(--spacing-2xl); +} + +/* 캘린더 네비게이션 */ +.calendar-nav { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--spacing-xl) var(--spacing-2xl); + background: var(--gradient-main); +} + +.cal-nav-btn { + width: 38px; + height: 38px; + border: 2px solid rgba(255, 255, 255, 0.4); + background: rgba(255, 255, 255, 0.15); + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--font-sm); + color: white; + transition: var(--transition); + backdrop-filter: blur(4px); +} + +.cal-nav-btn:hover { + background: rgba(255, 255, 255, 0.3); + border-color: rgba(255, 255, 255, 0.7); + transform: scale(1.05); +} + +.cal-title { + font-size: var(--font-2xl); + font-weight: var(--font-weight-bold); + color: white; + text-align: center; + letter-spacing: 0.02em; +} + +/* 캘린더 그리드 */ +.cal-header { + display: grid; + grid-template-columns: repeat(7, 1fr); + background: var(--bg-gray); + border-bottom: 1px solid var(--border-color); +} + +.cal-header span { + padding: var(--spacing-md) var(--spacing-sm); + text-align: center; + font-size: var(--font-sm); + font-weight: var(--font-weight-semibold); + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.cal-body { + display: grid; + grid-template-columns: repeat(7, 1fr); +} + +/* 날짜 셀 */ +.cal-cell { + aspect-ratio: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border-right: 1px solid var(--border-light); + border-bottom: 1px solid var(--border-light); + position: relative; + cursor: default; + transition: background var(--duration-fast) var(--ease-default); +} + +.cal-cell:nth-child(7n) { + border-right: none; +} + +.cal-cell .day-num { + font-size: var(--font-base); + font-weight: var(--font-weight-medium); + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + transition: all var(--duration-fast) var(--ease-default); +} + +/* 빈 셀 */ +.cal-cell.empty { + background: transparent; +} + +/* 지난 날짜 */ +.cal-cell.past .day-num { + color: var(--text-light); + opacity: 0.4; +} + +/* 오늘 */ +.cal-cell.today .day-num { + background: var(--primary-color); + color: var(--text-white); + font-weight: var(--font-weight-bold); + box-shadow: 0 2px 8px rgba(255, 136, 0, 0.4); +} + +/* 예약 가능 */ +.cal-cell.available .day-num { + color: var(--text-primary); + font-weight: var(--font-weight-medium); +} + +.cal-cell.available:hover { + background: rgba(16, 185, 129, 0.06); +} + +.cal-cell.available:hover .day-num { + background: rgba(16, 185, 129, 0.12); + color: var(--color-success); +} + +/* 예약 가능 표시 점 */ +.cal-cell.available::after { + content: ''; + position: absolute; + bottom: 6px; + left: 50%; + transform: translateX(-50%); + width: 5px; + height: 5px; + border-radius: 50%; + background: var(--color-success); + opacity: 0.6; +} + +/* 예약 마감 */ +.cal-cell.booked .day-num { + color: var(--text-light); + text-decoration: line-through; + text-decoration-color: var(--color-danger); + opacity: 0.6; +} + +.cal-cell.booked::after { + content: ''; + position: absolute; + bottom: 6px; + left: 50%; + transform: translateX(-50%); + width: 5px; + height: 5px; + border-radius: 50%; + background: var(--color-danger); +} + +/* 범례 */ +.calendar-legend { + display: flex; + justify-content: center; + gap: var(--spacing-2xl); + margin-bottom: var(--spacing-2xl); + flex-wrap: wrap; +} + +.legend-item { + display: flex; + align-items: center; + gap: var(--spacing-sm); + font-size: var(--font-sm); + color: var(--text-secondary); + font-weight: var(--font-weight-medium); +} + +.legend-dot { + width: 10px; + height: 10px; + border-radius: 50%; +} + +.legend-dot.available { + background: var(--color-success); + opacity: 0.6; +} + +.legend-dot.booked { + background: var(--color-danger); +} + +.legend-dot.past { + background: var(--text-light); + opacity: 0.4; +} + +/* 안내 카드 */ +.schedule-info-card { + background: var(--bg-white); + border-radius: var(--border-radius-lg); + box-shadow: var(--shadow-md); + padding: var(--spacing-2xl); + text-align: center; + border-top: 3px solid var(--primary-color); +} + +.schedule-info-card .info-icon { + width: 56px; + height: 56px; + display: inline-flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, #fff4e6, #ffe8cc); + color: var(--primary-color); + border-radius: 50%; + font-size: 1.4rem; + margin-bottom: var(--spacing-lg); +} + +.schedule-info-card h3 { + font-size: var(--font-xl); + font-weight: var(--font-weight-bold); + color: var(--text-primary); + margin-bottom: var(--spacing-sm); +} + +.schedule-info-card p { + color: var(--text-secondary); + font-size: var(--font-sm); + margin-bottom: var(--spacing-xl); + line-height: var(--line-height-relaxed); +} + +.schedule-actions { + display: flex; + justify-content: center; + gap: var(--spacing-md); + flex-wrap: wrap; +} + +.schedule-actions .btn-primary { + display: inline-flex; + align-items: center; + gap: var(--spacing-sm); +} + +.schedule-actions .btn-secondary { + display: inline-flex; + align-items: center; + gap: var(--spacing-sm); +} + +/* 운영 정보 */ +.schedule-details { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-lg); + margin-top: var(--spacing-2xl); + padding-top: var(--spacing-xl); + border-top: 1px solid var(--border-light); +} + +.detail-item { + text-align: center; +} + +.detail-item .detail-label { + display: block; + font-size: var(--font-xs); + color: var(--text-light); + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: var(--spacing-xs); + font-weight: var(--font-weight-semibold); +} + +.detail-item .detail-value { + display: block; + font-size: var(--font-sm); + color: var(--text-primary); + font-weight: var(--font-weight-bold); +} + +/* 로딩 상태 - 그리드 위에 펄스 효과 */ +.cal-body.loading { + position: relative; +} + +.cal-body.loading::after { + content: ''; + position: absolute; + inset: 0; + background: rgba(255, 255, 255, 0.5); + animation: pulse 1.2s ease-in-out infinite; + pointer-events: none; + z-index: 1; +} + +@keyframes pulse { + 0%, 100% { opacity: 0.3; } + 50% { opacity: 0.6; } +} + +/* ======================================== + 반응형 디자인 + ======================================== */ +@media (max-width: 768px) { + .schedule-wrapper { + margin: 0 var(--spacing-sm); + } + + .calendar-nav { + padding: var(--spacing-lg) var(--spacing-xl); + } + + .cal-title { + font-size: var(--font-xl); + } + + .cal-header span { + padding: var(--spacing-sm); + font-size: var(--font-xs); + } + + .cal-cell .day-num { + font-size: var(--font-sm); + width: 30px; + height: 30px; + } + + .cal-cell.booked::after, + .cal-cell.available::after { + width: 4px; + height: 4px; + bottom: 3px; + } + + .calendar-legend { + gap: var(--spacing-lg); + } + + .legend-item { + font-size: var(--font-xs); + } + + .schedule-details { + grid-template-columns: 1fr; + gap: var(--spacing-md); + } + + .schedule-info-card { + padding: var(--spacing-xl); + } +} + +@media (max-width: 480px) { + .cal-nav-btn { + width: 32px; + height: 32px; + font-size: var(--font-xs); + } + + .calendar-nav { + padding: var(--spacing-md) var(--spacing-lg); + } + + .cal-title { + font-size: var(--font-lg); + } + + .cal-cell .day-num { + font-size: var(--font-xs); + width: 26px; + height: 26px; + } + + .cal-cell.booked::after, + .cal-cell.available::after { + width: 3px; + height: 3px; + bottom: 2px; + } +} + +/* ======================================== + 다크모드 + ======================================== */ +[data-theme="dark"] .calendar-card { + background: rgba(255, 255, 255, 0.04); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); +} + +[data-theme="dark"] .calendar-nav { + background: linear-gradient(135deg, #cc6d00, #b35500); +} + +[data-theme="dark"] .cal-header { + background: rgba(255, 255, 255, 0.06); + border-bottom-color: var(--glass-border); +} + +[data-theme="dark"] .cal-header span { + color: var(--dark-text-secondary); +} + +[data-theme="dark"] .cal-cell { + border-color: var(--glass-border); +} + +[data-theme="dark"] .cal-cell.past .day-num { + color: var(--dark-text-disabled); +} + +[data-theme="dark"] .cal-cell.today .day-num { + background: var(--primary-color); + color: white; + box-shadow: 0 2px 8px rgba(255, 136, 0, 0.5); +} + +[data-theme="dark"] .cal-cell.available .day-num { + color: var(--dark-text-primary); +} + +[data-theme="dark"] .cal-cell.available:hover { + background: rgba(52, 211, 153, 0.08); +} + +[data-theme="dark"] .cal-cell.available:hover .day-num { + background: rgba(52, 211, 153, 0.15); + color: #34d399; +} + +[data-theme="dark"] .cal-cell.available::after { + background: #34d399; +} + +[data-theme="dark"] .cal-cell.booked .day-num { + color: var(--dark-text-disabled); + text-decoration-color: #f87171; +} + +[data-theme="dark"] .cal-cell.booked::after { + background: #f87171; +} + +[data-theme="dark"] .cal-nav-btn { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.3); + color: white; +} + +[data-theme="dark"] .cal-nav-btn:hover { + background: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.5); +} + +[data-theme="dark"] .legend-item { + color: var(--dark-text-secondary); +} + +[data-theme="dark"] .legend-dot.available { + background: #34d399; +} + +[data-theme="dark"] .legend-dot.booked { + background: #f87171; +} + +[data-theme="dark"] .legend-dot.past { + background: var(--dark-text-disabled); +} + +[data-theme="dark"] .schedule-info-card { + background: rgba(255, 255, 255, 0.04); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + border-top-color: var(--primary-color); +} + +[data-theme="dark"] .schedule-info-card .info-icon { + background: rgba(255, 136, 0, 0.15); +} + +[data-theme="dark"] .schedule-info-card h3 { + color: var(--dark-text-primary); +} + +[data-theme="dark"] .schedule-info-card p { + color: var(--dark-text-secondary); +} + +[data-theme="dark"] .detail-item .detail-label { + color: var(--dark-text-tertiary); +} + +[data-theme="dark"] .detail-item .detail-value { + color: var(--dark-text-primary); +} + +[data-theme="dark"] .schedule-details { + border-top-color: var(--glass-border); +} + +[data-theme="dark"] .cal-body.loading::after { + background: rgba(0, 0, 0, 0.4); +} + +/* ======================================== + 접근성 + ======================================== */ +.cal-nav-btn:focus-visible { + outline: 2px solid white; + outline-offset: 2px; +} + +@media (prefers-reduced-motion: reduce) { + .cal-loading i { + animation: none; + } + + .cal-nav-btn:hover { + transform: none; + } +} diff --git a/en/about.html b/en/about.html index cd3fc95..8dd3b6b 100644 --- a/en/about.html +++ b/en/about.html @@ -104,6 +104,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/en/backgrounds.html b/en/backgrounds.html index 8eed02f..7ab0ba8 100644 --- a/en/backgrounds.html +++ b/en/backgrounds.html @@ -77,6 +77,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/en/contact.html b/en/contact.html index 0ada49b..ffa99ba 100644 --- a/en/contact.html +++ b/en/contact.html @@ -104,6 +104,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • @@ -438,6 +439,7 @@

    Make an easy online reservation or check our frequently asked questions

    Book via Naver + Availability View FAQ
    diff --git a/en/gallery.html b/en/gallery.html index 2382cfd..8fbe645 100644 --- a/en/gallery.html +++ b/en/gallery.html @@ -104,6 +104,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/en/index.html b/en/index.html index 93d435e..91b719a 100644 --- a/en/index.html +++ b/en/index.html @@ -296,6 +296,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • @@ -972,6 +973,7 @@

    Experience new creative possibilities at our professional motion capture studio

    Book Now + Check Availability Naver Booking
    diff --git a/en/portfolio.html b/en/portfolio.html index ba460bd..13a559b 100644 --- a/en/portfolio.html +++ b/en/portfolio.html @@ -163,6 +163,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/en/props.html b/en/props.html index 329ee37..10af730 100644 --- a/en/props.html +++ b/en/props.html @@ -77,6 +77,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/en/qna.html b/en/qna.html index cac01ad..f2add22 100644 --- a/en/qna.html +++ b/en/qna.html @@ -104,6 +104,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/en/schedule.html b/en/schedule.html new file mode 100644 index 0000000..1628b53 --- /dev/null +++ b/en/schedule.html @@ -0,0 +1,164 @@ + + + + + + + + + + Availability - Mingle Studio + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + +
    + +
    +
    +

    Availability

    +

    Check available dates for studio booking

    +
    +
    + + +
    +
    +
    +
    +
    + +

    + +
    +
    + Sun + Mon + Tue + Wed + Thu + Fri + Sat +
    +
    +
    + +
    +
    + + Available +
    +
    + + Fully Booked +
    +
    + + Past Date +
    +
    + +
    +
    + +
    +

    Booking Info

    +

    Reservations can be made via email or the contact page.
    We recommend booking at least 2 weeks in advance.

    +
    + Contact Us + Naver Booking +
    +
    +
    + Hours + 24H · Year-round +
    +
    + Minimum + From 2 hours +
    +
    + Advance + 2 weeks recommended +
    +
    +
    +
    +
    +
    +
    + + + + + + + + diff --git a/en/services.html b/en/services.html index 90b5380..13fe5db 100644 --- a/en/services.html +++ b/en/services.html @@ -105,6 +105,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • @@ -813,6 +814,9 @@ as a follow-up service (separate consultation)

    Book via Naver + + Check Availability +

    ※ You can check real-time availability and book via Naver Place

    diff --git a/gallery.html b/gallery.html index 3f83cae..de5b82f 100644 --- a/gallery.html +++ b/gallery.html @@ -98,6 +98,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/google-apps-script/calendar-proxy.gs b/google-apps-script/calendar-proxy.gs new file mode 100644 index 0000000..7c7e028 --- /dev/null +++ b/google-apps-script/calendar-proxy.gs @@ -0,0 +1,85 @@ +/** + * Mingle Studio - Google Calendar Proxy + * + * Google Apps Script로 배포하여 사용 + * 캘린더 일정을 조회하고, "//"가 포함되지 않은 일정이 있는 날을 "마감"으로 반환 + * + * 설정 방법: + * 1. script.google.com 에서 새 프로젝트 생성 + * 2. 이 코드 붙여넣기 + * 3. CALENDAR_ID를 실제 캘린더 ID로 변경 + * 4. 배포 → 웹 앱 → "모든 사용자"가 액세스 가능하도록 설정 + * 5. 배포 URL을 js/schedule.js의 APPS_SCRIPT_URL에 입력 + */ + +// ★ 여기에 실제 캘린더 ID 입력 +var CALENDAR_ID = 'minglestudio.mocap@gmail.com'; + +function doGet(e) { + var headers = { + 'Access-Control-Allow-Origin': '*', + 'Access-Control-Allow-Methods': 'GET', + 'Content-Type': 'application/json' + }; + + try { + var params = e.parameter; + var year = parseInt(params.year) || new Date().getFullYear(); + var month = parseInt(params.month) || (new Date().getMonth() + 1); + + // 해당 월의 시작/끝 + var startDate = new Date(year, month - 1, 1); + var endDate = new Date(year, month, 0, 23, 59, 59); + + var calendar = CalendarApp.getCalendarById(CALENDAR_ID); + if (!calendar) { + return ContentService.createTextOutput(JSON.stringify({ + error: 'Calendar not found' + })).setMimeType(ContentService.MimeType.JSON); + } + + var events = calendar.getEvents(startDate, endDate); + var bookedDates = {}; + + for (var i = 0; i < events.length; i++) { + var title = events[i].getTitle(); + + // "//"가 포함된 일정은 무시 (내부 메모) + if (title.indexOf('//') !== -1) { + continue; + } + + // 실제 예약 일정 → 해당 날짜를 마감 처리 + var eventStart = events[i].getStartTime(); + var eventEnd = events[i].getEndTime(); + + // 종일 이벤트는 endTime이 마지막날+1일 00:00이므로 하루 빼기 + if (events[i].isAllDayEvent()) { + eventEnd = new Date(eventEnd.getTime() - 1); + } + + // 여러 날에 걸친 일정 처리 + var current = new Date(eventStart.getFullYear(), eventStart.getMonth(), eventStart.getDate()); + var endDay = new Date(eventEnd.getFullYear(), eventEnd.getMonth(), eventEnd.getDate()); + while (current <= endDay) { + var dateKey = Utilities.formatDate(current, Session.getScriptTimeZone(), 'yyyy-MM-dd'); + bookedDates[dateKey] = true; + current.setDate(current.getDate() + 1); + } + } + + var result = { + year: year, + month: month, + bookedDates: Object.keys(bookedDates).sort() + }; + + return ContentService.createTextOutput(JSON.stringify(result)) + .setMimeType(ContentService.MimeType.JSON); + + } catch (error) { + return ContentService.createTextOutput(JSON.stringify({ + error: error.message + })).setMimeType(ContentService.MimeType.JSON); + } +} diff --git a/i18n/en.json b/i18n/en.json index e854a23..2972d73 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -6,6 +6,7 @@ "services": "Services", "portfolio": "Portfolio", "gallery": "Gallery", + "schedule": "Schedule", "contact": "Contact", "qna": "Q&A" }, @@ -143,6 +144,7 @@ "title": "Your Ideas,
    Brought to Life Through Motion", "desc": "Experience new creative possibilities at our professional motion capture studio", "btnReserve": "Book Now", + "btnSchedule": "Check Availability", "btnNaver": "Naver Booking", "infoReservation": "Reservations", "infoBusiness": "Business", @@ -462,6 +464,7 @@ "step4Desc": "Booking finalized", "btnEmail": "Send Email Inquiry", "btnNaver": "Book via Naver", + "btnSchedule": "Check Availability", "naverNote": "※ You can check real-time availability and book via Naver Place" }, "policy": { @@ -686,6 +689,7 @@ "title": "Reservations & Inquiries", "desc": "Make an easy online reservation or check our frequently asked questions", "btnNaver": "Book via Naver", + "btnSchedule": "Availability", "btnFaq": "View FAQ" }, "js": { @@ -786,5 +790,29 @@ "linkGallery": "Studio Gallery", "linkQna": "FAQ", "linkContact": "Contact & Location" + }, + "schedule": { + "title": "Availability", + "desc": "Check available dates for studio booking", + "sun": "Sun", + "mon": "Mon", + "tue": "Tue", + "wed": "Wed", + "thu": "Thu", + "fri": "Fri", + "sat": "Sat", + "available": "Available", + "booked": "Fully Booked", + "past": "Past Date", + "infoTitle": "Booking Info", + "infoDesc": "Reservations can be made via email or the contact page.
    We recommend booking at least 2 weeks in advance.", + "contactBtn": "Contact Us", + "naverBtn": "Naver Booking", + "detailHours": "Hours", + "detailHoursVal": "24H · Year-round", + "detailMin": "Minimum", + "detailMinVal": "From 2 hours", + "detailAdvance": "Advance", + "detailAdvanceVal": "2 weeks recommended" } } diff --git a/i18n/ja.json b/i18n/ja.json index 40e1f4c..41c7268 100644 --- a/i18n/ja.json +++ b/i18n/ja.json @@ -6,6 +6,7 @@ "services": "Services", "portfolio": "Portfolio", "gallery": "Gallery", + "schedule": "Schedule", "contact": "Contact", "qna": "Q&A" }, @@ -143,6 +144,7 @@ "title": "あなたのアイデアを、
    動きで形にします", "desc": "プロのモーションキャプチャースタジオで、クリエイティブの新たな可能性を体験してください", "btnReserve": "ご予約・お問い合わせ", + "btnSchedule": "予約状況を確認", "btnNaver": "Naver予約", "infoReservation": "ご予約", "infoBusiness": "ビジネス", @@ -462,6 +464,7 @@ "step4Desc": "最終予約完了", "btnEmail": "メールでお問い合わせ", "btnNaver": "Naver予約へ", + "btnSchedule": "予約状況を確認", "naverNote": "※ Naverプレイスでリアルタイムのスケジュール確認および予約が可能です" }, "policy": { @@ -686,6 +689,7 @@ "title": "ご予約・お問い合わせ", "desc": "簡単なオンライン予約またはよくある質問をご確認ください", "btnNaver": "Naver予約", + "btnSchedule": "予約状況", "btnFaq": "FAQを見る" }, "js": { @@ -786,5 +790,29 @@ "linkGallery": "スタジオギャラリー", "linkQna": "よくある質問", "linkContact": "連絡先・所在地" + }, + "schedule": { + "title": "予約状況", + "desc": "スタジオの予約可能日程をご確認ください", + "sun": "日", + "mon": "月", + "tue": "火", + "wed": "水", + "thu": "木", + "fri": "金", + "sat": "土", + "available": "予約可能", + "booked": "予約済み", + "past": "過去の日付", + "infoTitle": "ご予約案内", + "infoDesc": "ご予約はメールまたはお問い合わせページから承ります。
    2週間前までのご予約をお勧めいたします。", + "contactBtn": "予約お問い合わせ", + "naverBtn": "Naver予約", + "detailHours": "営業時間", + "detailHoursVal": "24時間 · 年中無休", + "detailMin": "最低利用", + "detailMinVal": "2時間から", + "detailAdvance": "事前予約", + "detailAdvanceVal": "2週間前推奨" } } \ No newline at end of file diff --git a/i18n/ko.json b/i18n/ko.json index 08364f0..b61c52e 100644 --- a/i18n/ko.json +++ b/i18n/ko.json @@ -6,6 +6,7 @@ "services": "Services", "portfolio": "Portfolio", "gallery": "Gallery", + "schedule": "Schedule", "contact": "Contact", "qna": "Q&A" }, @@ -143,6 +144,7 @@ "title": "당신의 아이디어,
    움직임으로 만들어 드립니다", "desc": "전문 모션캡쳐 스튜디오에서 크리에이티브의 새로운 가능성을 경험하세요", "btnReserve": "예약 문의하기", + "btnSchedule": "예약 현황 보기", "btnNaver": "네이버 예약", "infoReservation": "예약 문의", "infoBusiness": "비즈니스", @@ -462,6 +464,7 @@ "step4Desc": "최종 예약 완료", "btnEmail": "이메일 문의하기", "btnNaver": "네이버 예약 바로가기", + "btnSchedule": "예약 현황 확인", "naverNote": "※ 네이버 플레이스를 통해 실시간 일정 확인 및 예약이 가능합니다" }, "policy": { @@ -686,6 +689,7 @@ "title": "예약 및 문의", "desc": "간편한 온라인 예약 또는 자주 묻는 질문을 확인해보세요", "btnNaver": "네이버 예약", + "btnSchedule": "예약 현황", "btnFaq": "FAQ 보기" }, "js": { @@ -786,5 +790,29 @@ "linkGallery": "스튜디오 갤러리", "linkQna": "자주하는 질문", "linkContact": "연락처 및 위치" + }, + "schedule": { + "title": "예약 현황", + "desc": "스튜디오 예약 가능 일정을 확인하세요", + "sun": "일", + "mon": "월", + "tue": "화", + "wed": "수", + "thu": "목", + "fri": "금", + "sat": "토", + "available": "예약 가능", + "booked": "예약 마감", + "past": "지난 날짜", + "infoTitle": "예약 안내", + "infoDesc": "예약은 이메일 또는 문의 페이지를 통해 접수하실 수 있습니다.
    최소 2주 전 예약을 권장드립니다.", + "contactBtn": "예약 문의하기", + "naverBtn": "네이버 예약", + "detailHours": "운영시간", + "detailHoursVal": "24시간 · 연중무휴", + "detailMin": "최소 이용", + "detailMinVal": "2시간부터", + "detailAdvance": "사전 예약", + "detailAdvanceVal": "2주 전 권장" } } diff --git a/i18n/zh.json b/i18n/zh.json index 67ba0cf..739afc1 100644 --- a/i18n/zh.json +++ b/i18n/zh.json @@ -6,6 +6,7 @@ "services": "Services", "portfolio": "Portfolio", "gallery": "Gallery", + "schedule": "Schedule", "contact": "Contact", "qna": "Q&A" }, @@ -143,6 +144,7 @@ "title": "您的创意，
    用动作来呈现", "desc": "在专业动作捕捉工作室体验创意的全新可能", "btnReserve": "预约咨询", + "btnSchedule": "查看预约状态", "btnNaver": "Naver预约", "infoReservation": "预约咨询", "infoBusiness": "商务合作", @@ -462,6 +464,7 @@ "step4Desc": "最终完成预约", "btnEmail": "发送邮件咨询", "btnNaver": "前往Naver预约", + "btnSchedule": "查看预约状态", "naverNote": "※ 可通过Naver Place实时查看日程并预约" }, "policy": { @@ -686,6 +689,7 @@ "title": "预约与咨询", "desc": "便捷的在线预约或查看常见问题", "btnNaver": "Naver预约", + "btnSchedule": "预约状态", "btnFaq": "查看FAQ" }, "js": { @@ -786,5 +790,29 @@ "linkGallery": "工作室画廊", "linkQna": "常见问题", "linkContact": "联系方式与位置" + }, + "schedule": { + "title": "预约状态", + "desc": "查看工作室可预约日程", + "sun": "日", + "mon": "一", + "tue": "二", + "wed": "三", + "thu": "四", + "fri": "五", + "sat": "六", + "available": "可预约", + "booked": "已满", + "past": "过去日期", + "infoTitle": "预约指南", + "infoDesc": "可通过邮件或咨询页面进行预约。
    建议至少提前2周预约。", + "contactBtn": "预约咨询", + "naverBtn": "Naver预约", + "detailHours": "营业时间", + "detailHoursVal": "24小时 · 全年无休", + "detailMin": "最低使用", + "detailMinVal": "2小时起", + "detailAdvance": "提前预约", + "detailAdvanceVal": "建议提前2周" } } diff --git a/index.html b/index.html index de33974..450f927 100644 --- a/index.html +++ b/index.html @@ -292,6 +292,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • @@ -980,6 +981,7 @@

    예약 문의하기 + 예약 현황 보기 네이버 예약
    diff --git a/ja/about.html b/ja/about.html index fad5b70..7231d45 100644 --- a/ja/about.html +++ b/ja/about.html @@ -104,6 +104,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/ja/backgrounds.html b/ja/backgrounds.html index 1a6b912..00fe5ec 100644 --- a/ja/backgrounds.html +++ b/ja/backgrounds.html @@ -77,6 +77,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/ja/contact.html b/ja/contact.html index ca3865c..3d1d4df 100644 --- a/ja/contact.html +++ b/ja/contact.html @@ -104,6 +104,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • @@ -438,6 +439,7 @@

    簡単なオンライン予約またはよくある質問をご確認ください

    Naver予約 + 予約状況 FAQを見る
    diff --git a/ja/gallery.html b/ja/gallery.html index 1543db5..fff67f8 100644 --- a/ja/gallery.html +++ b/ja/gallery.html @@ -104,6 +104,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/ja/index.html b/ja/index.html index c1ad4be..fb43cad 100644 --- a/ja/index.html +++ b/ja/index.html @@ -296,6 +296,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • @@ -972,6 +973,7 @@

    プロのモーションキャプチャースタジオで、クリエイティブの新たな可能性を体験してください

    ご予約・お問い合わせ + 予約状況を確認 Naver予約
    diff --git a/ja/portfolio.html b/ja/portfolio.html index 8904de2..7362033 100644 --- a/ja/portfolio.html +++ b/ja/portfolio.html @@ -163,6 +163,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/ja/props.html b/ja/props.html index c6ac850..cb830de 100644 --- a/ja/props.html +++ b/ja/props.html @@ -77,6 +77,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/ja/qna.html b/ja/qna.html index d7ce8d3..d3e96ef 100644 --- a/ja/qna.html +++ b/ja/qna.html @@ -104,6 +104,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/ja/schedule.html b/ja/schedule.html new file mode 100644 index 0000000..3cc2440 --- /dev/null +++ b/ja/schedule.html @@ -0,0 +1,164 @@ + + + + + + + + + + 予約状況 - Mingle Studio + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + +
    + +
    +
    +

    予約状況

    +

    スタジオの予約可能日程をご確認ください

    +
    +
    + + +
    +
    +
    +
    +
    + +

    + +
    +
    + 日 + 月 + 火 + 水 + 木 + 金 + 土 +
    +
    +
    + +
    +
    + + 予約可能 +
    +
    + + 予約済み +
    +
    + + 過去の日付 +
    +
    + +
    +
    + +
    +

    ご予約案内

    +

    ご予約はメールまたはお問い合わせページから承ります。
    2週間前までのご予約をお勧めいたします。

    +
    + 予約お問い合わせ + Naver予約 +
    +
    +
    + 営業時間 + 24時間 · 年中無休 +
    +
    + 最低利用 + 2時間から +
    +
    + 事前予約 + 2週間前推奨 +
    +
    +
    +
    +
    +
    +
    + + + + + + + + diff --git a/ja/services.html b/ja/services.html index b2ddf04..7b49b51 100644 --- a/ja/services.html +++ b/ja/services.html @@ -105,6 +105,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • @@ -813,6 +814,9 @@ Mingle Studioまたは依頼者帰属を選択可能です

    Naver予約へ + + 予約状況を確認 +

    ※ Naverプレイスでリアルタイムのスケジュール確認および予約が可能です

    diff --git a/js/schedule.js b/js/schedule.js new file mode 100644 index 0000000..8a9e453 --- /dev/null +++ b/js/schedule.js @@ -0,0 +1,179 @@ +/** + * 밍글 스튜디오 - 예약 현황 캘린더 + * Google Apps Script 프록시를 통해 캘린더 데이터를 가져와 표시 + */ +(function() { + 'use strict'; + + var APPS_SCRIPT_URL = 'https://script.google.com/macros/s/AKfycbwoaoSmEskbJod4gR5NjLnpWSkhIDUYaGBYk0y1Q865TzaJ4gctSrTOWXxRnVa7J9AASA/exec'; + var CACHE_TTL = 30 * 60 * 1000; // 30분 + + var currentYear, currentMonth; + var calTitle = document.getElementById('calTitle'); + var calBody = document.getElementById('calBody'); + var prevBtn = document.getElementById('prevMonth'); + var nextBtn = document.getElementById('nextMonth'); + + function init() { + var now = new Date(); + currentYear = now.getFullYear(); + currentMonth = now.getMonth() + 1; + + prevBtn.addEventListener('click', function() { changeMonth(-1); }); + nextBtn.addEventListener('click', function() { changeMonth(1); }); + + renderCalendar(); + } + + function changeMonth(delta) { + currentMonth += delta; + if (currentMonth > 12) { currentMonth = 1; currentYear++; } + else if (currentMonth < 1) { currentMonth = 12; currentYear--; } + renderCalendar(); + } + + function renderCalendar() { + updateTitle(); + + var cached = getCache(currentYear, currentMonth); + if (cached !== null) { + buildGrid(cached); + } else { + // 즉시 빈 그리드 렌더링 (체감 속도 향상) + buildGrid([]); + calBody.classList.add('loading'); + fetchBookedDates(currentYear, currentMonth, function(dates) { + setCache(currentYear, currentMonth, dates); + buildGrid(dates); + calBody.classList.remove('loading'); + prefetchAdjacent(); + }); + } + } + + function prefetchAdjacent() { + var nextM = currentMonth + 1, nextY = currentYear; + if (nextM > 12) { nextM = 1; nextY++; } + if (getCache(nextY, nextM) === null) { + fetchBookedDates(nextY, nextM, function(dates) { + setCache(nextY, nextM, dates); + }); + } + } + + // --- localStorage 캐싱 --- + function cacheKey(y, m) { return 'mingle_cal_' + y + '_' + m; } + + function getCache(y, m) { + try { + var raw = localStorage.getItem(cacheKey(y, m)); + if (!raw) return null; + var obj = JSON.parse(raw); + if (Date.now() - obj.ts > CACHE_TTL) { + localStorage.removeItem(cacheKey(y, m)); + return null; + } + return obj.dates; + } catch (e) { return null; } + } + + function setCache(y, m, dates) { + try { + localStorage.setItem(cacheKey(y, m), JSON.stringify({ dates: dates, ts: Date.now() })); + } catch (e) { /* quota exceeded 등 무시 */ } + } + + // --- 제목 업데이트 --- + function updateTitle() { + var lang = (window.i18n && window.i18n.currentLang) || 'ko'; + var monthNames = { + ko: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'], + en: ['January','February','March','April','May','June','July','August','September','October','November','December'], + ja: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], + zh: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] + }; + var names = monthNames[lang] || monthNames.ko; + if (lang === 'en') { + calTitle.textContent = names[currentMonth - 1] + ' ' + currentYear; + } else if (lang === 'ja' || lang === 'zh') { + calTitle.textContent = currentYear + '年 ' + names[currentMonth - 1]; + } else { + calTitle.textContent = currentYear + '년 ' + names[currentMonth - 1]; + } + } + + // --- API 호출 --- + function fetchBookedDates(year, month, callback) { + if (!APPS_SCRIPT_URL) { callback([]); return; } + + var url = APPS_SCRIPT_URL + '?year=' + year + '&month=' + month; + fetch(url) + .then(function(res) { return res.json(); }) + .then(function(data) { callback(data.bookedDates || []); }) + .catch(function() { callback([]); }); + } + + // --- 그리드 렌더링 --- + function buildGrid(bookedDates) { + calBody.innerHTML = ''; + + var firstDay = new Date(currentYear, currentMonth - 1, 1).getDay(); + var daysInMonth = new Date(currentYear, currentMonth, 0).getDate(); + var today = new Date(); + var todayStr = today.getFullYear() + '-' + + String(today.getMonth() + 1).padStart(2, '0') + '-' + + String(today.getDate()).padStart(2, '0'); + + var bookedSet = {}; + for (var b = 0; b < bookedDates.length; b++) { + bookedSet[bookedDates[b]] = true; + } + + var fragment = document.createDocumentFragment(); + + for (var e = 0; e < firstDay; e++) { + var emptyCell = document.createElement('div'); + emptyCell.className = 'cal-cell empty'; + fragment.appendChild(emptyCell); + } + + for (var d = 1; d <= daysInMonth; d++) { + var dateStr = currentYear + '-' + + String(currentMonth).padStart(2, '0') + '-' + + String(d).padStart(2, '0'); + + var cell = document.createElement('div'); + cell.className = 'cal-cell'; + + var dayNum = document.createElement('span'); + dayNum.className = 'day-num'; + dayNum.textContent = d; + + var cellDate = new Date(currentYear, currentMonth - 1, d); + var isPast = cellDate < new Date(today.getFullYear(), today.getMonth(), today.getDate()); + + if (dateStr === todayStr) { + cell.classList.add('today'); + } else if (isPast) { + cell.classList.add('past'); + } else if (bookedSet[dateStr]) { + cell.classList.add('booked'); + } else { + cell.classList.add('available'); + } + + cell.appendChild(dayNum); + fragment.appendChild(cell); + } + + calBody.appendChild(fragment); + } + + document.addEventListener('langChanged', function() { updateTitle(); }); + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', init); + } else { + init(); + } +})(); diff --git a/portfolio.html b/portfolio.html index 46c7bb2..b3ff696 100644 --- a/portfolio.html +++ b/portfolio.html @@ -157,6 +157,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/props.html b/props.html index a9d241f..5621990 100644 --- a/props.html +++ b/props.html @@ -71,6 +71,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/qna.html b/qna.html index 96794fe..6e29159 100644 --- a/qna.html +++ b/qna.html @@ -98,6 +98,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/schedule.html b/schedule.html new file mode 100644 index 0000000..4d054a6 --- /dev/null +++ b/schedule.html @@ -0,0 +1,172 @@ + + + + + + + + + + 예약 현황 - 밍글 스튜디오 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + +
    + +
    +
    +

    예약 현황

    +

    스튜디오 예약 가능 일정을 확인하세요

    +
    +
    + + +
    +
    +
    + +
    + +
    + +

    + +
    + + +
    + 일 + 월 + 화 + 수 + 목 + 금 + 토 +
    +
    + +
    +
    + + +
    +
    + + 예약 가능 +
    +
    + + 예약 마감 +
    +
    + + 지난 날짜 +
    +
    + + +
    +
    + +
    +

    예약 안내

    +

    예약은 이메일 또는 문의 페이지를 통해 접수하실 수 있습니다.
    최소 2주 전 예약을 권장드립니다.

    +
    + 예약 문의하기 + 네이버 예약 +
    +
    +
    + 운영시간 + 24시간 · 연중무휴 +
    +
    + 최소 이용 + 2시간부터 +
    +
    + 사전 예약 + 2주 전 권장 +
    +
    +
    +
    +
    +
    +
    + + + + + + + + diff --git a/services.html b/services.html index 70c6db7..9497d41 100644 --- a/services.html +++ b/services.html @@ -99,6 +99,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • @@ -806,6 +807,9 @@ 네이버 예약 바로가기 + + 예약 현황 확인 +

    ※ 네이버 플레이스를 통해 실시간 일정 확인 및 예약이 가능합니다

    diff --git a/sitemap.xml b/sitemap.xml index 303b603..e38d8f6 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -38,6 +38,11 @@ weekly 0.6 + + https://minglestudio.co.kr/schedule + daily + 0.7 + @@ -75,6 +80,11 @@ weekly 0.5 + + https://minglestudio.co.kr/en/schedule + daily + 0.6 + @@ -112,6 +122,11 @@ weekly 0.5 + + https://minglestudio.co.kr/ja/schedule + daily + 0.6 + @@ -149,5 +164,10 @@ weekly 0.5 + + https://minglestudio.co.kr/zh/schedule + daily + 0.6 + diff --git a/zh/about.html b/zh/about.html index 6a64cac..6c9544c 100644 --- a/zh/about.html +++ b/zh/about.html @@ -104,6 +104,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/zh/backgrounds.html b/zh/backgrounds.html index d9937f1..0e0c53f 100644 --- a/zh/backgrounds.html +++ b/zh/backgrounds.html @@ -77,6 +77,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/zh/contact.html b/zh/contact.html index 5f0549f..640bc0e 100644 --- a/zh/contact.html +++ b/zh/contact.html @@ -104,6 +104,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • @@ -438,6 +439,7 @@

    便捷的在线预约或查看常见问题

    Naver预约 + 预约状态 查看FAQ
    diff --git a/zh/gallery.html b/zh/gallery.html index 552bacc..5ced961 100644 --- a/zh/gallery.html +++ b/zh/gallery.html @@ -104,6 +104,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/zh/index.html b/zh/index.html index f86a66a..b5c198e 100644 --- a/zh/index.html +++ b/zh/index.html @@ -296,6 +296,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • @@ -972,6 +973,7 @@

    在专业动作捕捉工作室体验创意的全新可能

    预约咨询 + 查看预约状态 Naver预约
    diff --git a/zh/portfolio.html b/zh/portfolio.html index 93fb82b..b4c63c4 100644 --- a/zh/portfolio.html +++ b/zh/portfolio.html @@ -163,6 +163,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/zh/props.html b/zh/props.html index 19ceb99..b451cf9 100644 --- a/zh/props.html +++ b/zh/props.html @@ -77,6 +77,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/zh/qna.html b/zh/qna.html index 519e8ef..7961452 100644 --- a/zh/qna.html +++ b/zh/qna.html @@ -104,6 +104,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • diff --git a/zh/schedule.html b/zh/schedule.html new file mode 100644 index 0000000..089343e --- /dev/null +++ b/zh/schedule.html @@ -0,0 +1,164 @@ + + + + + + + + + + 预约状态 - Mingle Studio + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + +
    + +
    +
    +

    预约状态

    +

    查看工作室可预约日程

    +
    +
    + + +
    +
    +
    +
    +
    + +

    + +
    +
    + 日 + 一 + 二 + 三 + 四 + 五 + 六 +
    +
    +
    + +
    +
    + + 可预约 +
    +
    + + 已满 +
    +
    + + 过去日期 +
    +
    + +
    +
    + +
    +

    预约指南

    +

    可通过邮件或咨询页面进行预约。
    建议至少提前2周预约。

    +
    + 预约咨询 + Naver预约 +
    +
    +
    + 营业时间 + 24小时 · 全年无休 +
    +
    + 最低使用 + 2小时起 +
    +
    + 提前预约 + 建议提前2周 +
    +
    +
    +
    +
    +
    +
    + + + + + + + + diff --git a/zh/services.html b/zh/services.html index 3b6547f..5c0e66a 100644 --- a/zh/services.html +++ b/zh/services.html @@ -105,6 +105,7 @@
  • Services
  • Portfolio
  • Gallery
    • +
  • Schedule
  • Contact
  • Q&A
    • @@ -813,6 +814,9 @@ 前往Naver预约 + + 查看预约状态 +

    ※ 可通过Naver Place实时查看日程并预约