@movvjs/svelte-schedule-view 0.3.0 → 0.4.1-beta-1

package/src/lib/schedule-view/assets/scss/indie_booking.scss

@@ -54,6 +54,9 @@
     }
 
 
+    .indie_po_re{
+        position: relative;
+    }
 
 
     // ****************************************************************************
@@ -74,6 +77,14 @@
             display: flex;
         }
 
+        > .indie_calendar-comp-box{
+            display: block;
+            position: relative;
+            left: auto;
+            top: auto;
+            margin: auto;
+        }
+
         .pop_base{
             background-color: white;
             border-radius: 20px;
@@ -4614,6 +4625,406 @@
 
 
 
+
+
+    // 캘린더 팝업
+    .indie_calendar-comp-box{
+        display: none;
+        position: absolute;
+        left: 0;
+        top: 100%;
+        z-index: 1600;
+        background-color: white;
+        width: 340px;
+        border-radius: 20px;
+        box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
+        overflow: hidden;
+
+        &.poN{
+            position: relative;
+            left: auto;
+            top: auto;
+        }
+
+        
+        &.on{
+            display: block;
+        }
+
+        .calendar_multi_wrap{
+            max-height: 540px;
+            overflow-y: auto;
+            margin-top: 10px;
+        }
+
+        > .btn_close{
+            position: absolute;
+            right: 22px;
+            top: 20px;
+        }
+
+        .btn_close{
+            width: 15px;
+            height: 15px;
+            text-indent: -9999px;
+            overflow: hidden;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath id='ic_close_24px' d='M19,6.41,17.59,5,12,10.59,6.41,5,5,6.41,10.59,12,5,17.59,6.41,19,12,13.41,17.59,19,19,17.59,13.41,12Z' transform='translate(-5 -5)'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: 13px;
+        }
+
+        .title{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 25px 25px 15px 32px;
+            .days{
+                font-size: 19px;
+                font-weight: 600;
+            }
+
+            .btns{
+                display: flex;
+                align-items: center;
+                // gap: 2px;
+            }
+        }
+
+        .calender_box{
+            padding: 0 25px 20px;
+            text-align: center;
+            .tbl_in_calendar{
+                display: inline-block;
+            }
+        }
+
+        .btn_cal{
+            width: 35px;
+            height: 35px;
+            overflow: hidden;
+            text-indent: -9999px;
+            background-repeat: no-repeat;
+            background-position: center center;
+            transition: background-color .25s;
+            &.prev{
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.41' height='12' viewBox='0 0 7.41 12'%3E%3Cpath id='ic_keyboard_arrow_right_24px' d='M16,16.34l-4.58-4.59L16,7.16,14.59,5.75l-6,6,6,6Z' transform='translate(-8.59 -5.75)'/%3E%3C/svg%3E%0A");
+            }
+            &.next{
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.41' height='12' viewBox='0 0 7.41 12'%3E%3Cpath id='ic_keyboard_arrow_right_24px' d='M8.59,16.34l4.58-4.59L8.59,7.16,10,5.75l6,6-6,6Z' transform='translate(-8.59 -5.75)'/%3E%3C/svg%3E%0A");
+            }
+            &:hover{
+                background-color: color-mix(in srgb, white,#000 5%);
+            }
+        }
+        
+        .btn_calendar{
+            display: inline-block;
+            vertical-align: middle;
+            width: 35px;
+            height: 35px;
+            text-indent: -9999px;
+            overflow: hidden;
+            margin: 2px;
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-image: url("data:image/svg+xml,%3Csvg id='달력아이콘' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20.372' height='19.029' viewBox='0 0 20.372 19.029'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='사각형_2884' data-name='사각형 2884' width='20.371' height='19.029' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect id='사각형_2879' data-name='사각형 2879' width='19.274' height='16.224' transform='translate(0.549 2.257)' fill='%23fff'/%3E%3Cg id='그룹_3685' data-name='그룹 3685'%3E%3Cg id='그룹_3684' data-name='그룹 3684' clip-path='url(%23clip-path)'%3E%3Cpath id='패스_4334' data-name='패스 4334' d='M19.822,21.989H.549A.549.549,0,0,1,0,21.44V5.216a.549.549,0,0,1,.549-.549H19.822a.549.549,0,0,1,.549.549V21.44a.549.549,0,0,1-.549.549M1.1,20.891H19.274V5.765H1.1Z' transform='translate(0 -2.959)' fill='%23444'/%3E%3Cline id='선_323' data-name='선 323' x1='19.029' transform='translate(0.705 6.858)' fill='%23fff'/%3E%3Cpath id='패스_4335' data-name='패스 4335' d='M20,18.338H.975a.549.549,0,1,1,0-1.1H20a.549.549,0,1,1,0,1.1' transform='translate(-0.27 -10.931)' fill='%23444'/%3E%3Crect id='사각형_2880' data-name='사각형 2880' width='1.464' height='2.866' transform='translate(2.501 0.549)' fill='%23fff'/%3E%3Cpath id='패스_4336' data-name='패스 4336' d='M7.346,3.965H5.882a.549.549,0,0,1-.549-.549V.549A.549.549,0,0,1,5.882,0H7.346a.549.549,0,0,1,.549.549V3.416a.549.549,0,0,1-.549.549m-.915-1.1H6.8V1.1H6.431Z' transform='translate(-3.381)' fill='%23444'/%3E%3Crect id='사각형_2881' data-name='사각형 2881' width='1.464' height='2.866' transform='translate(7.136 0.549)' fill='%23fff'/%3E%3Cpath id='패스_4337' data-name='패스 4337' d='M20.013,3.965H18.549A.549.549,0,0,1,18,3.416V.549A.549.549,0,0,1,18.549,0h1.464a.549.549,0,0,1,.549.549V3.416a.549.549,0,0,1-.549.549m-.915-1.1h.366V1.1H19.1Z' transform='translate(-11.413)' fill='%23444'/%3E%3Crect id='사각형_2882' data-name='사각형 2882' width='1.464' height='2.866' transform='translate(11.772 0.549)' fill='%23fff'/%3E%3Cpath id='패스_4338' data-name='패스 4338' d='M32.68,3.965H31.216a.549.549,0,0,1-.549-.549V.549A.549.549,0,0,1,31.216,0H32.68a.549.549,0,0,1,.549.549V3.416a.549.549,0,0,1-.549.549m-.915-1.1h.366V1.1h-.366Z' transform='translate(-19.444)' fill='%23444'/%3E%3Crect id='사각형_2883' data-name='사각형 2883' width='1.464' height='2.866' transform='translate(16.407 0.549)' fill='%23fff'/%3E%3Cpath id='패스_4339' data-name='패스 4339' d='M45.346,3.965H43.882a.549.549,0,0,1-.549-.549V.549A.549.549,0,0,1,43.882,0h1.464a.549.549,0,0,1,.549.549V3.416a.549.549,0,0,1-.549.549m-.915-1.1H44.8V1.1h-.366Z' transform='translate(-27.475)' fill='%23444'/%3E%3Cpath id='패스_4340' data-name='패스 4340' d='M26.781,25.64h-.274a.549.549,0,0,1,0-1.1h.274a.549.549,0,0,1,0,1.1' transform='translate(-16.459 -15.561)' fill='%23444'/%3E%3Cpath id='패스_4341' data-name='패스 4341' d='M35.573,25.64H35.3a.549.549,0,0,1,0-1.1h.274a.549.549,0,0,1,0,1.1' transform='translate(-22.033 -15.561)' fill='%23444'/%3E%3Cpath id='패스_4342' data-name='패스 4342' d='M44.365,25.64h-.274a.549.549,0,1,1,0-1.1h.274a.549.549,0,1,1,0,1.1' transform='translate(-27.608 -15.561)' fill='%23444'/%3E%3Cpath id='패스_4343' data-name='패스 4343' d='M9.2,31.182H8.924a.549.549,0,1,1,0-1.1H9.2a.549.549,0,0,1,0,1.1' transform='translate(-5.31 -19.075)' fill='%23444'/%3E%3Cpath id='패스_4344' data-name='패스 4344' d='M17.99,31.182h-.274a.549.549,0,1,1,0-1.1h.274a.549.549,0,1,1,0,1.1' transform='translate(-10.885 -19.075)' fill='%23444'/%3E%3Cpath id='패스_4345' data-name='패스 4345' d='M26.781,31.182h-.274a.549.549,0,0,1,0-1.1h.274a.549.549,0,0,1,0,1.1' transform='translate(-16.459 -19.075)' fill='%23444'/%3E%3Cpath id='패스_4346' data-name='패스 4346' d='M35.573,31.182H35.3a.549.549,0,0,1,0-1.1h.274a.549.549,0,0,1,0,1.1' transform='translate(-22.033 -19.075)' fill='%23444'/%3E%3Cpath id='패스_4347' data-name='패스 4347' d='M44.365,31.182h-.274a.549.549,0,1,1,0-1.1h.274a.549.549,0,1,1,0,1.1' transform='translate(-27.608 -19.075)' fill='%23444'/%3E%3Cpath id='패스_4348' data-name='패스 4348' d='M9.2,36.723H8.924a.549.549,0,1,1,0-1.1H9.2a.549.549,0,1,1,0,1.1' transform='translate(-5.31 -22.588)' fill='%23444'/%3E%3Cpath id='패스_4349' data-name='패스 4349' d='M17.99,36.723h-.274a.549.549,0,1,1,0-1.1h.274a.549.549,0,1,1,0,1.1' transform='translate(-10.885 -22.588)' fill='%23444'/%3E%3Cpath id='패스_4350' data-name='패스 4350' d='M26.781,36.723h-.274a.549.549,0,1,1,0-1.1h.274a.549.549,0,1,1,0,1.1' transform='translate(-16.459 -22.588)' fill='%23444'/%3E%3Cpath id='패스_4351' data-name='패스 4351' d='M35.573,36.723H35.3a.549.549,0,1,1,0-1.1h.274a.549.549,0,1,1,0,1.1' transform='translate(-22.033 -22.588)' fill='%23444'/%3E%3Cpath id='패스_4352' data-name='패스 4352' d='M44.365,36.723h-.274a.549.549,0,1,1,0-1.1h.274a.549.549,0,1,1,0,1.1' transform='translate(-27.608 -22.588)' fill='%23444'/%3E%3Cpath id='패스_4353' data-name='패스 4353' d='M9.2,42.265H8.924a.549.549,0,0,1,0-1.1H9.2a.549.549,0,0,1,0,1.1' transform='translate(-5.31 -26.102)' fill='%23444'/%3E%3Cpath id='패스_4354' data-name='패스 4354' d='M17.99,42.265h-.274a.549.549,0,0,1,0-1.1h.274a.549.549,0,1,1,0,1.1' transform='translate(-10.885 -26.102)' fill='%23444'/%3E%3Cpath id='패스_4355' data-name='패스 4355' d='M26.781,42.265h-.274a.549.549,0,0,1,0-1.1h.274a.549.549,0,0,1,0,1.1' transform='translate(-16.459 -26.102)' fill='%23444'/%3E%3Cpath id='패스_4356' data-name='패스 4356' d='M35.573,42.265H35.3a.549.549,0,0,1,0-1.1h.274a.549.549,0,0,1,0,1.1' transform='translate(-22.033 -26.102)' fill='%23444'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
+            transition: background-color 0.25s;
+            &:hover{
+                background-color: color-mix(in srgb, white,#000 5%);
+            }
+        }
+
+        .btn_sec{
+            width: 100%;
+            border-radius: 0 0 20px 20px;
+            margin-top: 10px;
+        }
+
+        .time_box{
+            margin: 5px 25px 20px;
+            border-top: 1px solid #E0E1EC;
+            padding: 25px 10px;
+            .sbj{
+                font-size: 13px;
+                font-weight: 300;
+                color: #111;
+                margin-bottom: 20px;
+            }
+        }
+
+        .scroll-select-box{
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            z-index: 10;
+            width: 100%;
+            max-height: 72%;
+            background-color: white;
+            display: flex;
+            flex-direction: column;
+            transform: translateY(150%);
+            transition: transform .5s .2s;
+
+            .title{
+                flex-shrink: 0;
+                background-color: white;
+                border-radius: 20px 20px 0 0;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 18px 20px 18px 30px;
+                border-bottom: 1px solid #E0E1EC;
+                p{
+                    font-size: 16px;
+                    font-weight: 300;
+                    color: #111;
+                }
+                .btn_close{
+                    flex-shrink: 0;
+                    display: inline-block;
+                    vertical-align: middle;
+                    position: inherit;
+                    width: 20px;
+                    height: 20px;
+                    text-indent: -9999px;
+                    overflow: hidden;
+                    margin: 2px;
+                    background-repeat: no-repeat;
+                    background-position: center center;
+                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath id='ic_close_24px' d='M19,6.41,17.59,5,12,10.59,6.41,5,5,6.41,10.59,12,5,17.59,6.41,19,12,13.41,17.59,19,19,17.59,13.41,12Z' transform='translate(-5 -5)'/%3E%3C/svg%3E%0A");
+                }
+            }
+            .select_b{
+                background-color: white;
+                flex-grow: 1;
+                overflow-y: auto;
+                min-height: 150px;
+                .list{
+                    > li {
+                        text-align: center;
+                        border-bottom: 1px solid #E0E1EC;
+                        > a{
+                            display: block;
+                            padding: 7px 10px;
+                            font-size: 25px;
+                            font-weight: 600;
+                            color: #111;
+                            transition: background-color .25s;
+                            &:hover{
+                                background-color: #E8F3FF;
+                            }
+                        }
+                        &.on{
+                            > a{
+                                background-color: #E8F3FF;
+                            }
+                        }
+                    }
+                }
+            }
+            .btns{
+                background-color: white;
+                flex-shrink: 0;
+                button{
+                    margin: 0;
+                }
+            }
+            &::before{
+                content: "";
+                position: absolute;
+                border-radius: 20px 20px 0 0;
+                left: 0;
+                bottom: 0;
+                z-index: -1;
+                width: 100%;
+                height: 150%;
+                background-color: rgba(0, 0, 0, .35);
+                opacity: 0;
+                transition: all .2s 0s;
+            }
+
+            // 애니메이션
+            &.on{
+                transform: translateY(0);
+                transition-delay: 0;
+                transition-duration: .35s;
+                &::before{
+                    opacity: 1;
+                    transition-delay: .5s;
+                }
+            }
+        }
+    }
+
+
+    .indie_tbl_in_calendar{
+        border-collapse: separate;
+        text-align: center;
+        table-layout: fixed;
+        border-spacing: 0 5px;
+        min-width: 0;
+        width: 100%;
+        th{
+            padding: 7px 5px !important;
+            font-size: 12px;
+            color: #6e7586;
+            font-weight: 500;
+            letter-spacing: 0;
+            border: none !important;
+        }
+        td{
+            padding: 0 !important;
+            border-spacing: 5px;
+            a{
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                width: 28px;
+                height: 28px;
+                padding: 5px;
+                border-radius: 50%;
+                font-size: 12px;
+                font-weight: 500;
+                color: #111;
+                position: relative;
+                transition: background-color .5s;
+            }
+            &:hover{
+                a{
+                    background-color: #ECF2FE;
+                }
+            }
+            &.past{
+                a{
+                    color: rgba(0, 0, 0, .26);
+                }
+            }
+            &.today{
+                a{
+                    color: #383E96;
+                    font-weight: 600;
+                    &::before{
+                        content: '';
+                        position: absolute;
+                        left: calc(50% - 3px);
+                        bottom: 0;
+                        width: 6px;
+                        height: 6px;
+                        border-radius: 50%;
+                        background-color: #383E96;
+                    }
+                }
+            }
+            &.range{
+                background-color: #ECF2FE;
+                a{
+                    border-radius: 0;
+                    color: #3F55C4;
+                }
+            }
+            &.select{
+                a{
+                    background-color: #383E96;
+                    color: white;
+                    border-radius: 50%;
+                }
+            }
+        }
+
+        tr{
+            td:first-of-type{
+                &.range{
+                    border-radius: 25px 0 0 25px;
+                }
+                .select{
+                    border-radius: 50%;
+                }
+            }
+            td:last-of-type{
+                &.range{
+                    border-radius: 0 25px 25px 0;
+                }
+                .select{
+                    border-radius: 50%;
+                }
+            }
+            td.range{
+                &.first{
+                    border-radius: 25px 0 0 25px;
+                }
+                &.last{
+                    border-radius: 0 25px 25px 0;
+                }
+            }
+        }
+    }
+
+
+
+    //line 셀렉트
+    .indie_select_line_form{
+        display: inline-flex;
+        gap: 20px;
+        max-width: 100%;
+        min-width: 90%;
+        > span{
+            flex: 1;
+            position: relative;
+            display: block;
+            &::before{
+                content: " / ";
+                position: absolute;
+                left: -10px;
+                top: 50%;
+                transform: translateY(-50%);
+                z-index: 10;
+                font-weight: 500;
+                color: #383E96;
+                font-size: 16px;
+            }
+            &:first-of-type::before{
+                content: "";
+            }
+            &:only-of-type::before{
+                content: "";
+            }
+        }
+        select{
+            width: 100%;
+            height: 42px;
+            border-bottom: 1px solid #383E96;
+            background: none;
+            padding: 0 10px;
+            font-weight: 600;
+            color: #383E96;
+            font-size: 13px;
+            text-align: center;
+            position: relative;
+            &::after{
+                content: "..";
+            }
+        }
+
+        &.black{
+            > span{
+                &::before{
+                    color: #111;
+                    font-weight: 300;
+                }
+            }
+            select{
+                font-size: 18px;
+                color: #111;
+                border-bottom-color: #111;
+            }
+        }
+    }
+
+
+
+
+
     
     //마진 값
     .mg{

package/src/lib/schedule-view/stores/booking.ts

@@ -136,6 +136,21 @@ function createBookingStore(bookingDTO: Awaited<ReturnType<typeof BookingAPI.get
 	 * 이하 subscribe & set => 보려는 값과 변경하는 방식이 복잡한 경우
 	 */
 
+	const ymd = {
+		subscribe: derived(stdt, $stdt => dayjs($stdt).format('YYYY-MM-DD')).subscribe,
+		set(ymd: string) {
+			withPreserveAndPreview(() => {
+				booking.update($booking => {
+					const currentDate = dayjs($booking.ymd)
+					const changeDate = dayjs(ymd)
+					changeDate.hour(currentDate.hour()).minute(currentDate.minute()).second(currentDate.second())
+					$booking.ymd = changeDate.format('YYYY-MM-DD HH:mm:ss')
+					return $booking
+				})
+			})
+		}
+	}
+
 	// 시간 값 & 변경
 	const hour = {
 		subscribe: derived(stdt, $stdt => dayjs($stdt).hour()).subscribe,
@@ -349,7 +364,8 @@ function createBookingStore(bookingDTO: Awaited<ReturnType<typeof BookingAPI.get
 		pax,
 		isBabySeatService,
 		isPicketService,
-		addTime
+		addTime,
+		ymd
 	}
 }
 

package/src/routes/development/+page.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { Schedule, type InitOption } from '$lib'
 	import { API_URL } from '$lib/axios/constant'
-	import type { Locale, Target } from '$scheduleView/types'
+	import Calender from '$scheduleView/Calender.svelte'
 	import Axios from 'axios'
 	import QS from 'qs'
 	import toast, { Toaster } from 'svelte-french-toast'
 
 	let schedule$: Schedule
 
-	let code = '24214-PUWPFP'
+	let code = '24295-PU7MM9'
 
 	let options: InitOption = {
 		isDev: true,

package/sync-assets.sh

@@ -5,7 +5,7 @@
 # 퍼블리싱 프로젝트 최신화
 cd ~/workspace/movv/design/movv-pms
 git pull
-git checkout master
+git checkout main
 
 # 싱크
 cd ~/workspace/movv/svelte-schedule-view