feat: 쿠폰등록

layers/components/blocks/DatePicker.vue

@@ -5,7 +5,6 @@ import {
   startOfDay,
   globalDateFormat,
 } from '@seed-next/date'
-import type { PublicMethods } from '@vuepic/vue-datepicker'
 
 interface Props {
   date: Date | string | null
@@ -26,23 +25,27 @@ const emits = defineEmits(['update:date'])
 const breakpoints = useResponsiveBreakpoints()
 
 // Refs -----
-const { tm, locale } = useI18n()
+const { t, locale } = useI18n()
 const datePickerRef = ref<any>(null)
 const resultDate = ref('')
 const formatDate = ref('')
-const currentYear = ref(new Date().getFullYear())
-const currentMonth = ref(new Date().getMonth())
-const currentDecade = ref<{ start: number; end: number } | null>(null)
+const monthList = ref<Array<number>>([])
+const currentYear = ref(getYear(new Date()))
+const currentMonth = ref(getMonth(new Date()))
+const currentDecade = ref<{ start: number; end: number; year: number }>({
+  start: 1970,
+  end: Math.floor(currentYear.value / 10) * 10 + 9,
+  year: currentYear.value,
+})
+const currentDecadeList = ref<Array<number> | null>(null)
 // 상태값
 const isMenuOpened = ref(false)
 const isShowYearPicker = ref(false)
 const isShowMonthPicker = ref(false)
-const isShowDecadePicker = ref(false)
+const isDisabledYearNav = ref({ prev: false, next: false })
+const isDisabledDecadeNav = ref({ prev: false, next: false })
 
 // Computed
-const yearMonthText = computed(() => {
-  return `${currentYear.value}년 ${currentMonth.value + 1}월`
-})
 const formatMinDate = computed(() => {
   if (props.minDate !== null) {
     return globalDateFormat(props.minDate, locale.value)
@@ -68,6 +71,9 @@ const formatPlaceholder = computed(() => {
 })
 
 // Functions
+/**
+ * @description 날짜 Computed값 포맷 셋팅 함수입니다.
+ */
 const setFormatDate = () => {
   const toDay = startOfDay(new Date())
   resultDate.value =
@@ -75,112 +81,242 @@ const setFormatDate = () => {
   formatDate.value = globalDateFormat(resultDate.value, locale.value) as string
 
   const dateObj = props.date === null ? toDay : new Date(props.date)
-  currentYear.value = dateObj.getFullYear()
-  currentMonth.value = dateObj.getMonth()
+  currentYear.value = getYear(dateObj)
+  currentMonth.value = getMonth(dateObj)
+  updateDecade(currentYear.value)
 }
 
+/**
+ * @description 선택한 날짜로 업데이트하는 함수입니다.
+ * @param _date<Date | null> 선택한 날짜
+ */
 const updateDate = (_date: Date | null) => {
   if (_date != null) {
     formatDate.value = globalDateFormat(_date, locale.value) as string
-    currentYear.value = _date.getFullYear()
-    currentMonth.value = _date.getMonth()
+    currentYear.value = getYear(_date)
+    currentMonth.value = getMonth(_date)
     emits('update:date', formatDate.value)
   }
 }
 
+/**
+ * @description 월/년도가 변경되었을 때 업데이트하는 함수입니다.
+ * @param newDate<object<{ year: number, month: number }>> 변경된 월/년도
+ */
+const changeMonthYear = (newDate: any) => {
+  currentYear.value = newDate.year
+  currentMonth.value = newDate.month
+}
+
+/**
+ * @description 날짜 포맷 함수입니다.
+ * @param _date<Date> 날짜
+ */
 const format = (_date: Date) => {
   return globalDateFormat(_date, locale.value)
 }
 
+/**
+ * @description 캘린더 메뉴 Open 함수입니다.
+ */
 const handleMenuOpen = () => {
   isMenuOpened.value = true
 }
 
+/**
+ * @description 캘린더 메뉴 Close 함수입니다.
+ */
 const handleMenuClose = () => {
   isMenuOpened.value = false
 
   isShowMonthPicker.value = false
   isShowYearPicker.value = false
+
+  if (currentMonth.value !== getMonth(resultDate.value)) {
+    currentMonth.value = getMonth(resultDate.value)
+  }
+
+  if (currentYear.value !== getYear(resultDate.value)) {
+    currentYear.value = getYear(resultDate.value)
+  }
 }
 
+/**
+ * @description 월 선택 창으로 이동하는 함수입니다.
+ */
 const handleOpenMonthPicker = () => {
   isShowMonthPicker.value = true
   isShowYearPicker.value = false
+
+  updateYearList(currentYear.value)
 }
 
+/**
+ * @description 년도 선택 창으로 이동하는 함수입니다.
+ */
 const handleOpenYearPicker = () => {
   isShowYearPicker.value = true
   isShowMonthPicker.value = false
 }
 
+/**
+ * @description 월 선택 함수입니다.
+ * @param month<number> 선택 월
+ */
 const handleMonthSelect = (month: number) => {
   currentMonth.value = month
   isShowMonthPicker.value = false
 
-  // 선택한 년도/월로 날짜 업데이트
-  const newDate = new Date(currentYear.value, currentMonth.value, 1)
-  if (props.minDate && newDate < props.minDate) {
-    newDate.setDate(props.minDate.getDate())
-  }
-  if (props.maxDate && newDate > props.maxDate) {
-    newDate.setDate(props.maxDate.getDate())
-  }
-
   // DatePicker의 내부 상태 업데이트
   if (datePickerRef.value) {
-    datePickerRef.value.selectDate(newDate)
+    datePickerRef.value.setMonthYear({ month: month, year: currentYear.value })
   }
-
-  updateDate(newDate)
 }
 
+/**
+ * @description 년도 선택 함수입니다.
+ * @param year<number> 선택 년도
+ */
 const handleYearSelect = (year: number) => {
   currentYear.value = year
   isShowYearPicker.value = false
+  isShowMonthPicker.value = true
 
-  // 선택한 년도/월로 날짜 업데이트
-  const newDate = new Date(currentYear.value, currentMonth.value, 1)
-  if (props.minDate && newDate < props.minDate) {
-    newDate.setDate(props.minDate.getDate())
-  }
-  if (props.maxDate && newDate > props.maxDate) {
-    newDate.setDate(props.maxDate.getDate())
-  }
-
-  // DatePicker의 내부 상태 업데이트
-  if (datePickerRef.value) {
-    datePickerRef.value.selectDate(newDate)
-  }
-
-  updateDate(newDate)
-}
-
-const generateYearList = () => {
-  const years = []
-  const minYear = props.minDate ? props.minDate.getFullYear() : 1900
-  const maxYear = props.maxDate ? props.maxDate.getFullYear() : 2100
-
-  for (let year = minYear; year <= maxYear; year++) {
-    years.push(year)
-  }
-  return years
+  updateYearList(currentYear.value)
 }
 
+/**
+ * @description 월 리스트 생성 함수입니다.
+ */
 const generateMonthList = () => {
-  const months = []
   const minMonth =
-    props.minDate && props.minDate.getFullYear() === currentYear.value
-      ? props.minDate.getMonth()
+    props.minDate && getYear(props.minDate) === currentYear.value
+      ? getMonth(props.minDate)
       : 0
   const maxMonth =
-    props.maxDate && props.maxDate.getFullYear() === currentYear.value
-      ? props.maxDate.getMonth()
+    props.maxDate && getYear(props.maxDate) === currentYear.value
+      ? getMonth(props.maxDate)
       : 11
+  const length = maxMonth - minMonth + 1
 
-  for (let month = minMonth; month <= maxMonth; month++) {
-    months.push(month)
+  monthList.value = Array.from({ length }, (_, i) => minMonth + i)
+}
+
+/**
+ * @description 날짜 범위 차이 계산 함수입니다.
+ */
+const getDateRangeDifference = () => {
+  if (!props.minDate || !props.maxDate) {
+    return null
   }
-  return months
+
+  const minYear = getYear(props.minDate)
+  const maxYear = getYear(props.maxDate)
+  const yearDiff = maxYear - minYear
+
+  return {
+    yearDiff,
+    minYear,
+    maxYear,
+    minMonth: getMonth(props.minDate),
+    maxMonth: getMonth(props.maxDate),
+    isShortRange: yearDiff < 10, // 10년 미만인 경우 true, 10년 이상인 경우 false
+  }
+}
+
+/**
+ * @description 년도 리스트 생성 및 년도 네비게이션 버튼 비활성화 여부 체크 함수입니다.
+ * @param year<number> 선택 년도
+ */
+const updateYearList = (year: number) => {
+  const rangeInfo = getDateRangeDifference()
+
+  isDisabledYearNav.value.prev = false
+  isDisabledYearNav.value.next = false
+
+  if (year === (rangeInfo?.minYear ?? 1970)) {
+    isDisabledYearNav.value.prev = true
+    currentYear.value = rangeInfo?.minYear ?? 1970
+
+    generateMonthList()
+    return
+  } else if (year === (rangeInfo?.maxYear ?? getYear(new Date()))) {
+    isDisabledYearNav.value.next = true
+    currentYear.value = rangeInfo?.maxYear ?? getYear(new Date())
+
+    generateMonthList()
+    return
+  } else {
+    currentYear.value = year
+
+    generateMonthList()
+  }
+}
+
+/**
+ * @description 선택 년도가 속한 00 ~ 09년의 범위로 10년 단위 년도 리스트 업데이트 함수입니다.
+ * @param year<number> 선택 년도
+ */
+const updateDecade = (year: number) => {
+  const rangeInfo = getDateRangeDifference()
+
+  if (rangeInfo?.isShortRange) {
+    const minYear = rangeInfo.minYear
+    const maxYear = rangeInfo.maxYear
+
+    // 현재 년도가 범위를 벗어나면 조정
+    if (year < minYear) {
+      year = minYear
+    } else if (year > maxYear) {
+      year = maxYear
+    }
+
+    // decade가 아니라 실제 년도 범위만 사용
+    const start = minYear
+    const end = maxYear
+
+    isDisabledDecadeNav.value.prev = true
+    isDisabledDecadeNav.value.next = true
+
+    currentDecade.value = { start, end, year }
+
+    // 실제 년도 리스트 생성 (minYear부터 maxYear까지)
+    const length = end - start + 1
+    currentDecadeList.value = Array.from({ length }, (_, i) => start + i)
+
+    return
+  }
+
+  const firstYear = props.minDate
+    ? Math.floor(getYear(props.minDate) / 10) * 10
+    : 1970
+  const lastYear = props.maxDate
+    ? Math.floor(getYear(props.maxDate) / 10) * 10 + 9
+    : Math.floor(getYear(new Date()) / 10) * 10 + 9
+  const start = Math.floor(year / 10) * 10
+  const end = start + 9
+
+  if (start < firstYear) {
+    return
+  }
+  if (end > lastYear) {
+    return
+  }
+
+  isDisabledDecadeNav.value.prev = false
+  isDisabledDecadeNav.value.next = false
+
+  if (start <= firstYear) {
+    isDisabledDecadeNav.value.prev = true
+  }
+  if (end >= lastYear) {
+    isDisabledDecadeNav.value.next = true
+  }
+
+  const length = end - start + 1
+
+  currentDecade.value = { start: start, end: end, year }
+  currentDecadeList.value = Array.from({ length }, (_, i) => start + i)
 }
 
 watch(
@@ -199,25 +335,29 @@ onMounted(() => {
 <template>
   <VueDatePicker
     ref="datePickerRef"
-    v-model="resultDate"
+    :model-value="new Date(resultDate)"
     :locale="locale"
     week-start="0"
     :year-first="true"
     :auto-apply="true"
-    :hide-offset-dates="true"
     :enable-time-picker="false"
     :preview-format="format"
     :min-date="formatMinDate"
     :max-date="formatMaxDate"
+    :hide-offset-dates="true"
     :prevent-min-max-navigation="true"
     :month-change-on-scroll="false"
     position="left"
     :auto-position="true"
+    teleport="body"
     :offset="8"
-    :config="{
-      shadowDom: true,
+    :ui="{
+      menu:
+        isShowMonthPicker || isShowYearPicker
+          ? 'date-picker-menu-wrap date-picker-menu-wrap-month-year'
+          : 'date-picker-menu-wrap',
     }"
-    class="date-picker-wrap"
+    @update-month-year="changeMonthYear"
     @update:model-value="updateDate"
     @date-update="updateDate"
     @open="handleMenuOpen"
@@ -259,14 +399,12 @@ onMounted(() => {
       </span>
     </template>
     <template
+      class="date-picker-calendar-wrap"
       #month-year="{
         month,
         year,
-        months,
-        years,
 
         updateMonthYear,
-        handleMonthYearChange,
         isDisabled,
       }"
     >
@@ -297,8 +435,7 @@ onMounted(() => {
           <span
             class="inline-flex items-center justify-center text-[#1F1F1F] text-[18px] font-[500] leading-[26px] tracking-[-0.54px]"
           >
-            {{ years.find(y => y.value === year)?.text }}.
-            {{ months.find(m => m.value === month)?.text }}
+            {{ t('Text_MonthYear', { month: month + 1, year: year }) }}
           </span>
           <AtomsIconsSelectArrowDownFill :size="10" color="#333333" />
         </button>
@@ -330,18 +467,12 @@ onMounted(() => {
           <button
             type="button"
             class="relative inline-flex items-center justify-center w-[32px] h-[32px]"
-            :disabled="isDisabled(false)"
-            @click="
-              updateMonthYear(
-                month,
-                year === getYear(minDate) ? year : year - 1,
-                false
-              )
-            "
+            :disabled="isDisabledYearNav.prev"
+            @click="updateYearList(currentYear - 1)"
           >
             <AtomsIconsArrowRightLine
               :size="16"
-              :color="isDisabled(false) ? '#CCCCCC' : '#333333'"
+              :color="isDisabledYearNav.prev ? '#CCCCCC' : '#333333'"
               class="relative rotate-180"
             />
           </button>
@@ -353,24 +484,18 @@ onMounted(() => {
             <span
               class="inline-flex items-center justify-center text-[#1F1F1F] text-[18px] font-[500] leading-[26px] tracking-[-0.54px]"
             >
-              {{ years.find(y => y.value === year)?.text }}
+              {{ currentYear }}
             </span>
           </button>
           <button
             type="button"
             class="relative inline-flex items-center justify-center w-[32px] h-[32px]"
-            :disabled="isDisabled(true)"
-            @click="
-              updateMonthYear(
-                month,
-                year === getYear(maxDate) ? year : year + 1,
-                false
-              )
-            "
+            :disabled="isDisabledYearNav.next"
+            @click="updateYearList(currentYear + 1)"
           >
             <AtomsIconsArrowRightLine
               :size="16"
-              :color="isDisabled(true) ? '#CCCCCC' : '#333333'"
+              :color="isDisabledYearNav.next ? '#CCCCCC' : '#333333'"
               class="relative"
             />
           </button>
@@ -378,7 +503,7 @@ onMounted(() => {
 
         <div class="grid grid-cols-3 gap-[4px] w-full">
           <button
-            v-for="month in generateMonthList()"
+            v-for="month in monthList"
             :key="month"
             type="button"
             :class="[
@@ -389,29 +514,76 @@ onMounted(() => {
             ]"
             @click="handleMonthSelect(month)"
           >
-            {{ months.find(m => m.value === month)?.text }}
+            {{ t('Text_Month', { month: month + 1 }) }}
           </button>
         </div>
       </div>
 
       <div
         v-if="isShowYearPicker && isMenuOpened"
-        class="absolute z-[2] top-0 left-0 w-full h-full mt-[8px] overflow-y-auto bg-white"
+        class="absolute z-[2] top-0 left-0 flex flex-col items-center justify-start w-full h-full overflow-y-auto bg-white"
       >
-        <div class="grid grid-cols-4 gap-[4px]">
+        <div class="flex items-center justify-between w-full py-[16px]">
           <button
-            v-for="year in generateYearList()"
+            type="button"
+            class="relative inline-flex items-center justify-center w-[32px] h-[32px]"
+            :disabled="isDisabledDecadeNav.prev"
+            @click="updateDecade(currentDecade.year - 10)"
+          >
+            <AtomsIconsArrowRightLine
+              :size="16"
+              :color="isDisabledDecadeNav.prev ? '#CCCCCC' : '#333333'"
+              class="relative rotate-180"
+            />
+          </button>
+          <button
+            type="button"
+            class="relative inline-flex items-center justify-center gap-[8px] w-auto h-[32px] cursor-default"
+            :disabled="true"
+          >
+            <span
+              class="inline-flex items-center justify-center text-[#1F1F1F] text-[18px] font-[500] leading-[26px] tracking-[-0.54px]"
+            >
+              {{
+                t('Text_Decade', {
+                  start: getDateRangeDifference()?.isShortRange
+                    ? getDateRangeDifference()?.minYear
+                    : currentDecade.start,
+                  end: getDateRangeDifference()?.isShortRange
+                    ? getDateRangeDifference()?.maxYear
+                    : currentDecade.end,
+                })
+              }}
+            </span>
+          </button>
+          <button
+            type="button"
+            class="relative inline-flex items-center justify-center w-[32px] h-[32px]"
+            :disabled="isDisabledDecadeNav.next"
+            @click="updateDecade(currentDecade.year + 10)"
+          >
+            <AtomsIconsArrowRightLine
+              :size="16"
+              :color="isDisabledDecadeNav.next ? '#CCCCCC' : '#333333'"
+              class="relative"
+            />
+          </button>
+        </div>
+
+        <div class="grid grid-cols-3 gap-[4px] w-full">
+          <button
+            v-for="year in currentDecadeList"
             :key="year"
             type="button"
             :class="[
-              'px-[12px] py-[8px] text-center text-[14px] font-[400] leading-[20px] tracking-[-0.42px] rounded-[4px] transition-colors',
+              'inline-flex items-center justify-center w-full h-[52px] px-[12px] py-[8px] text-center text-[14px] font-[400] leading-[20px] tracking-[-0.42px] rounded-[4px] transition-colors',
               year === currentYear
                 ? 'bg-[#FC4420] text-white'
                 : 'text-[#333333] hover:bg-[#F5F5F5]',
             ]"
             @click="handleYearSelect(year)"
           >
-            {{ years.find(y => y.value === year)?.text }}
+            {{ year }}
           </button>
         </div>
       </div>
@@ -419,20 +591,30 @@ onMounted(() => {
   </VueDatePicker>
 </template>
 
-<style scoped>
-.date-picker-wrap :deep(.dp__calendar_header_separator) {
+<style>
+body .date-picker-menu-wrap {
+  padding: 0 12px 8px !important;
+  border-radius: 8px !important;
+  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1) !important;
+}
+body .date-picker-menu-wrap .dp__calendar_header_separator {
   display: none !important;
 }
-.date-picker-wrap :deep(.dp__menu) {
-  padding: 0 12px 8px !important;
-}
-.date-picker-wrap :deep(.dp__menu_inner) {
+body .date-picker-menu-wrap .dp__menu {
   padding: 0 !important;
 }
-.date-picker-wrap :deep(.dp__calendar) {
+body .date-picker-menu-wrap .dp__menu,
+body .date-picker-menu-wrap .dp__menu_wrap {
+  transform: translateZ(0) !important;
+  isolation: isolate !important;
+}
+body .date-picker-menu-wrap .dp__menu_inner {
   padding: 0 !important;
 }
-.date-picker-wrap :deep(.dp__calendar_row) {
+body .date-picker-menu-wrap .dp__calendar {
+  padding: 0 !important;
+}
+body .date-picker-menu-wrap .dp__calendar_row {
   -webkit-gap: 4px !important;
   -moz-gap: 4px !important;
   -o-gap: 4px !important;
@@ -440,73 +622,75 @@ onMounted(() => {
   gap: 4px !important;
   margin: 0 !important;
 }
-.date-picker-wrap :deep(.dp__calendar_item) {
+body .date-picker-menu-wrap .dp__calendar_item {
   padding: 2px 4px !important;
 }
-.date-picker-wrap :deep(.dp__cell_inner) {
+body .date-picker-menu-wrap .dp__cell_inner {
   padding: 8px !important;
   border-radius: 100% !important;
   outline: none !important;
   border: none !important;
 }
-.date-picker-wrap :deep(.dp__cell_inner.dp__date_hover:hover) {
+body .date-picker-menu-wrap .dp__cell_inner.dp__date_hover:hover {
   background-color: rgba(0, 0, 0, 0.04) !important;
 }
-.date-picker-wrap :deep(.dp__cell_inner.dp__today) {
+body .date-picker-menu-wrap .dp__cell_inner.dp__today {
   border: 1px solid rgba(0, 0, 0, 0.15) !important;
 }
-.date-picker-wrap :deep(.dp__cell_inner.dp__active_date) {
+body .date-picker-menu-wrap .dp__cell_inner.dp__active_date {
   background-color: #fc4420 !important;
   color: #ffffff !important;
 }
-.date-picker-wrap :deep(.dp__cell_inner.dp__active_date span) {
+body .date-picker-menu-wrap .dp__cell_inner.dp__active_date span {
   color: #ffffff !important;
 }
-.date-picker-wrap :deep(.dp__cell_disabled:hover),
-.date-picker-wrap :deep(.dp__cell_disabled) {
+body .date-picker-menu-wrap .dp__cell_disabled:hover,
+body .date-picker-menu-wrap .dp__cell_disabled {
   cursor: default !important;
   background-color: transparent !important;
 }
-.date-picker-wrap :deep(.dp__menu),
-.date-picker-wrap :deep(.dp__menu_wrap),
-.date-picker-wrap :deep(.dp__overlay) {
+body .date-picker-menu-wrap .dp__menu,
+body .date-picker-menu-wrap .dp__menu_wrap,
+body .date-picker-menu-wrap .dp__overlay {
   box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1) !important;
 }
-.date-picker-wrap :deep(.dp__overlay_cell_pad) {
+body .date-picker-menu-wrap .dp__overlay_cell_pad {
   color: #333333 !important;
 }
-.date-picker-wrap :deep(.dp__overlay_cell_pad:hover) {
+body .date-picker-menu-wrap .dp__overlay_cell_pad:hover {
   background-color: #f5f5f5 !important;
 }
-.date-picker-wrap :deep(.dp__overlay_cell_pad.dp__overlay_cell_active) {
+body .date-picker-menu-wrap .dp__overlay_cell_pad.dp__overlay_cell_active {
   background-color: #fc4420 !important;
   color: #ffffff !important;
 }
-.date-picker-wrap :deep(.dp__overlay_cell_pad.dp__overlay_cell_disabled:hover),
-.date-picker-wrap :deep(.dp__overlay_cell_pad.dp__overlay_cell_disabled) {
+body
+  .date-picker-menu-wrap
+  .dp__overlay_cell_pad.dp__overlay_cell_disabled:hover,
+body .date-picker-menu-wrap .dp__overlay_cell_pad.dp__overlay_cell_disabled {
   cursor: default !important;
   background-color: transparent !important;
   opacity: 0.35 !important;
 }
-.date-picker-wrap :deep(.dp__inner_nav) {
+body .date-picker-menu-wrap .dp__inner_nav {
   color: #333333 !important;
 }
-.date-picker-wrap :deep(.dp__inner_nav:hover) {
+body .date-picker-menu-wrap .dp__inner_nav:hover {
   background-color: transparent !important;
 }
-.date-picker-wrap :deep(.dp__inner_nav.dp__inner_nav_disabled) {
+body .date-picker-menu-wrap .dp__inner_nav.dp__inner_nav_disabled {
   background-color: transparent !important;
   cursor: default !important;
   opacity: 0.35 !important;
 }
-.date-picker-wrap :deep(.dp__month_year_select),
-.date-picker-wrap :deep(.dp__month_year_select:hover) {
+body .date-picker-menu-wrap .dp__month_year_select,
+body .date-picker-menu-wrap .dp__month_year_select:hover {
   background-color: transparent !important;
 }
-.date-picker-wrap :deep(.dp__arrow_bottom),
-.date-picker-wrap :deep(.dp__arrow_top),
-.date-picker-wrap :deep(.dp__arrow_left),
-.date-picker-wrap :deep(.dp__arrow_right) {
+body .date-picker-menu-wrap .dp__arrow_bottom,
+body .date-picker-menu-wrap .dp__arrow_top,
+body .date-picker-menu-wrap .dp__arrow_left,
+body .date-picker-menu-wrap .dp__arrow_right {
   display: none !important;
 }
 
@@ -518,7 +702,12 @@ onMounted(() => {
   position: fixed !important;
 }
 
-.date-picker-wrap :deep(.dp__month_year_select) {
+body .date-picker-menu-wrap .dp__month_year_select {
   display: none !important;
 }
+
+body .date-picker-menu-wrap.date-picker-menu-wrap-month-year {
+  height: 295px !important;
+  overflow: hidden !important;
+}
 </style>