@jk-core/components 1.1.15 → 1.1.17

package/src/Calendar/components/MonthTile/MonthTile.module.scss

@@ -1,59 +1,59 @@
-@use "../../../styles/mediaQuery.scss" as media;
-
-.month-tile {
-  position: relative;
-  min-height: 310px;
-  padding: 5px;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(4, 1fr);
-  gap: 5px;
-
-  &__month {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 5px;
-    border-radius: 10px;
-    color: var(--calendar-G-80);
-
-    svg {
-      width: 15px;
-      height: 15px;
-      cursor: pointer;
-    }
-
-    &:hover {
-      @include media.pc {
-        background-color: var(--calendar-G-5);
-      }
-    }
-
-    &:active {
-      background-color: var(--calendar-G-10);
-    }
-
-    &:disabled {
-      color: var(--calendar-G-40) !important;
-      background-color: transparent !important;
-      cursor: default;
-      border-radius: 0 !important;
-    }
-
-    &--selected {
-      background-color: var(--calendar-P-50) !important;
-      color: var(--calendar-white) !important;
-    }
-
-    &--today {
-      color: var(--calendar-P-50);
-      font-weight: 600;
-    }
-
-    &--tile {
-      justify-content: flex-start;
-      gap: 5px;
-    }
-  }
-}
+@use "../../../styles/mediaQuery.scss" as media;
+
+.month-tile {
+  position: relative;
+  min-height: 310px;
+  padding: 5px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+  gap: 5px;
+
+  &__month {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 5px;
+    border-radius: 10px;
+    color: var(--calendar-G-80);
+
+    svg {
+      width: 15px;
+      height: 15px;
+      cursor: pointer;
+    }
+
+    &:hover {
+      @include media.pc {
+        background-color: var(--calendar-G-5);
+      }
+    }
+
+    &:active {
+      background-color: var(--calendar-G-10);
+    }
+
+    &:disabled {
+      color: var(--calendar-G-40) !important;
+      background-color: transparent !important;
+      cursor: default;
+      border-radius: 0 !important;
+    }
+
+    &--selected {
+      background-color: var(--calendar-P-50) !important;
+      color: var(--calendar-white) !important;
+    }
+
+    &--today {
+      color: var(--calendar-P-50);
+      font-weight: 600;
+    }
+
+    &--tile {
+      justify-content: flex-start;
+      gap: 5px;
+    }
+  }
+}

package/src/Calendar/components/MonthTile/index.tsx

@@ -1,50 +1,50 @@
-import { cn } from '@jk-core/utils';
-import { CalendarView } from '@/Calendar/type';
-import isSameDay from '@/Calendar/utils/isSameDay';
-import styles from './MonthTile.module.scss';
-
-const MONTHS = Array.from({ length: 12 }, (_, i) => i);
-
-interface Props {
-  selectedDate?: Date;
-  viewDate: Date;
-  handleMonthClick: (month: number) => void;
-  tileContent?: (date: Date, view:CalendarView) => React.ReactNode;
-  max: Date;
-  min: Date;
-}
-
-export default function MonthTile({
-  selectedDate, viewDate, handleMonthClick, tileContent = () => false,
-  max, min,
-}: Props) {
-  const isDisabled = (month: number) => {
-    const monthDate = new Date(viewDate.getFullYear(), month, 1);
-
-    return monthDate > new Date(max.getFullYear(), max.getMonth(), 1)
-      || monthDate < new Date(min.getFullYear(), min.getMonth(), 1);
-  };
-
-  return (
-    <div className={styles['month-tile']}>
-      {MONTHS.map((month) => (
-        <button
-          className={cn({
-            [styles['month-tile__month']]: true,
-            [styles['month-tile__month--selected']]: !!selectedDate && isSameDay(selectedDate, new Date(viewDate.getFullYear(), month), 'month'),
-            [styles['month-tile__month--today']]: isSameDay(new Date(viewDate.getFullYear(), month), new Date(), 'month'),
-            [styles['month-tile__month--tile']]: !!tileContent(new Date(viewDate.getFullYear(), month - 1, 1), 'month'),
-          })}
-          type="button"
-          key={month}
-          onClick={() => handleMonthClick(month)}
-          disabled={isDisabled(month)}
-        >
-          <span>{`${month + 1}월`}</span>
-          {!!tileContent(new Date(viewDate.getFullYear(), month - 1, 1), 'month')
-            && tileContent(new Date(viewDate.getFullYear(), month - 1, 1), 'month')}
-        </button>
-      ))}
-    </div>
-  );
-}
+import { cn } from '@jk-core/utils';
+import { CalendarView } from '@/Calendar/type';
+import isSameDay from '@/Calendar/utils/isSameDay';
+import styles from './MonthTile.module.scss';
+
+const MONTHS = Array.from({ length: 12 }, (_, i) => i);
+
+interface Props {
+  selectedDate?: Date;
+  viewDate: Date;
+  handleMonthClick: (month: number) => void;
+  tileContent?: (date: Date, view:CalendarView) => React.ReactNode;
+  max: Date;
+  min: Date;
+}
+
+export default function MonthTile({
+  selectedDate, viewDate, handleMonthClick, tileContent = () => false,
+  max, min,
+}: Props) {
+  const isDisabled = (month: number) => {
+    const monthDate = new Date(viewDate.getFullYear(), month, 1);
+
+    return monthDate > new Date(max.getFullYear(), max.getMonth(), 1)
+      || monthDate < new Date(min.getFullYear(), min.getMonth(), 1);
+  };
+
+  return (
+    <div className={styles['month-tile']}>
+      {MONTHS.map((month) => (
+        <button
+          className={cn({
+            [styles['month-tile__month']]: true,
+            [styles['month-tile__month--selected']]: !!selectedDate && isSameDay(selectedDate, new Date(viewDate.getFullYear(), month), 'month'),
+            [styles['month-tile__month--today']]: isSameDay(new Date(viewDate.getFullYear(), month), new Date(), 'month'),
+            [styles['month-tile__month--tile']]: !!tileContent(new Date(viewDate.getFullYear(), month - 1, 1), 'month'),
+          })}
+          type="button"
+          key={month}
+          onClick={() => handleMonthClick(month)}
+          disabled={isDisabled(month)}
+        >
+          <span>{`${month + 1}월`}</span>
+          {!!tileContent(new Date(viewDate.getFullYear(), month - 1, 1), 'month')
+            && tileContent(new Date(viewDate.getFullYear(), month - 1, 1), 'month')}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/Calendar/components/ViewSelector/ViewSelector.module.scss

@@ -1,48 +1,48 @@
-.view {
-  position: relative;
-  margin: 0 auto;
-  width: 90%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: var(--calendar-S-10);
-  color: var(--calendar-black);
-  border-radius: 10px;
-
-  &__block {
-    position: absolute;
-    background-color: var(--calendar-white);
-    left: 0;
-    height: 100%;
-    border: 2px solid var(--calendar-G-30);
-    width: 33.3%;
-    border-radius: 10px;
-    transition: 0.3s;
-
-    &--second {
-      left: 33%;
-    }
-
-    &--last {
-      left: 66.6%;
-    }
-  }
-
-  &__selector {
-    position: relative;
-    height: 40px;
-    flex: 1 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--calendar-G-60);
-    font-size: 1em;
-    font-weight: 400;
-
-    &--selected {
-      color: var(--calendar-G-80);
-      font-size: 1em;
-      font-weight: 600;
-    }
-  }
-}
+.view {
+  position: relative;
+  margin: 0 auto;
+  width: 90%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--calendar-S-10);
+  color: var(--calendar-black);
+  border-radius: 10px;
+
+  &__block {
+    position: absolute;
+    background-color: var(--calendar-white);
+    left: 0;
+    height: 100%;
+    border: 2px solid var(--calendar-G-30);
+    width: 33.3%;
+    border-radius: 10px;
+    transition: 0.3s;
+
+    &--second {
+      left: 33%;
+    }
+
+    &--last {
+      left: 66.6%;
+    }
+  }
+
+  &__selector {
+    position: relative;
+    height: 40px;
+    flex: 1 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--calendar-G-60);
+    font-size: 1em;
+    font-weight: 400;
+
+    &--selected {
+      color: var(--calendar-G-80);
+      font-size: 1em;
+      font-weight: 600;
+    }
+  }
+}

package/src/Calendar/components/ViewSelector/index.tsx

@@ -1,49 +1,49 @@
-import { cn } from '@jk-core/utils';
-import { CalendarView } from '@/Calendar/type';
-import styles from './ViewSelector.module.scss';
-
-interface ViewSelectorProps {
-  method: CalendarView;
-  selectView: (value: CalendarView) => void;
-}
-export default function ViewSelector({ method, selectView }:ViewSelectorProps) {
-  return (
-    <div className={styles.view}>
-      <div className={
-        cn({
-          [styles.view__block]: true,
-          [styles['view__block--second']]: method === 'month',
-          [styles['view__block--last']]: method === 'year',
-        })
-      }
-      />
-      <button
-        className={cn({
-          [styles.view__selector]: true,
-          [styles['view__selector--selected']]: method === 'day',
-        })}
-        type="button"
-        onClick={() => selectView('day')}
-      >일
-      </button>
-      <button
-        className={cn({
-          [styles.view__selector]: true,
-          [styles['view__selector--selected']]: method === 'month',
-        })}
-        type="button"
-        onClick={() => selectView('month')}
-      >월
-      </button>
-      <button
-        className={cn({
-          [styles.view__selector]: true,
-          [styles['view__selector--selected']]: method === 'year',
-        })}
-        type="button"
-        onClick={() => selectView('year')}
-      >년
-      </button>
-    </div>
-  );
-}
+import { cn } from '@jk-core/utils';
+import { CalendarView } from '@/Calendar/type';
+import styles from './ViewSelector.module.scss';
+
+interface ViewSelectorProps {
+  method: CalendarView;
+  selectView: (value: CalendarView) => void;
+}
+export default function ViewSelector({ method, selectView }:ViewSelectorProps) {
+  return (
+    <div className={styles.view}>
+      <div className={
+        cn({
+          [styles.view__block]: true,
+          [styles['view__block--second']]: method === 'month',
+          [styles['view__block--last']]: method === 'year',
+        })
+      }
+      />
+      <button
+        className={cn({
+          [styles.view__selector]: true,
+          [styles['view__selector--selected']]: method === 'day',
+        })}
+        type="button"
+        onClick={() => selectView('day')}
+      >일
+      </button>
+      <button
+        className={cn({
+          [styles.view__selector]: true,
+          [styles['view__selector--selected']]: method === 'month',
+        })}
+        type="button"
+        onClick={() => selectView('month')}
+      >월
+      </button>
+      <button
+        className={cn({
+          [styles.view__selector]: true,
+          [styles['view__selector--selected']]: method === 'year',
+        })}
+        type="button"
+        onClick={() => selectView('year')}
+      >년
+      </button>
+    </div>
+  );
+}

package/src/Calendar/components/YearTile/YearTile.module.scss

@@ -1,85 +1,85 @@
-@use "../../../styles/mediaQuery.scss" as media;
-
-.year-tile {
-  min-height: 310px;
-  padding: 5px;
-  position: relative;
-  height: 310px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  overflow: auto;
-  gap: 10px;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  &__blank {
-    height: calc(50% - 40px);
-    flex-shrink: 0;
-
-    &:last-child {
-      height: 50%;
-    }
-  }
-
-  &__year {
-    min-width: 50%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 40px;
-    border-radius: 6px;
-    flex-shrink: 0;
-    overflow: hidden;
-    font-weight: 400;
-    font-size: 1.2em;
-    color: var(--calendar-G-80);
-
-    &:hover {
-      @include media.pc {
-        background-color: var(--calendar-P-5);
-      }
-    }
-
-    &:active {
-      background-color: var(--calendar-P-10);
-    }
-
-    &--border {
-      border: 1px solid var(--calendar-G-30);
-      background-color: var(--calendar-P-5);
-
-      &:hover {
-        @include media.pc {
-          background-color: var(--calendar-P-10);
-        }
-      }
-    }
-
-    &--year {
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    &--selected {
-      color: var(--calendar-white);
-      background-color: var(--calendar-P-50) !important;
-    }
-
-    &--tile {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 40px;
-      color: var(--calendar-G-80);
-      width: 100%;
-      background-color: var(--calendar-white);
-      border-top: var(--calendar-P-50);
-    }
-  }
-}
+@use "../../../styles/mediaQuery.scss" as media;
+
+.year-tile {
+  min-height: 310px;
+  padding: 5px;
+  position: relative;
+  height: 310px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: auto;
+  gap: 10px;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &__blank {
+    height: calc(50% - 40px);
+    flex-shrink: 0;
+
+    &:last-child {
+      height: 50%;
+    }
+  }
+
+  &__year {
+    min-width: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 40px;
+    border-radius: 6px;
+    flex-shrink: 0;
+    overflow: hidden;
+    font-weight: 400;
+    font-size: 1.2em;
+    color: var(--calendar-G-80);
+
+    &:hover {
+      @include media.pc {
+        background-color: var(--calendar-P-5);
+      }
+    }
+
+    &:active {
+      background-color: var(--calendar-P-10);
+    }
+
+    &--border {
+      border: 1px solid var(--calendar-G-30);
+      background-color: var(--calendar-P-5);
+
+      &:hover {
+        @include media.pc {
+          background-color: var(--calendar-P-10);
+        }
+      }
+    }
+
+    &--year {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &--selected {
+      color: var(--calendar-white);
+      background-color: var(--calendar-P-50) !important;
+    }
+
+    &--tile {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 40px;
+      color: var(--calendar-G-80);
+      width: 100%;
+      background-color: var(--calendar-white);
+      border-top: var(--calendar-P-50);
+    }
+  }
+}