@weing-dev/ui-kit-primitive 0.0.0

package/src/components/WeeklyCalendar/dayjs.util.ts

@@ -0,0 +1,336 @@
+import dayjs, { Dayjs } from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const formatToGMT = (offsetZ: string) => {
+  // offsetZ 예: "+09:00" / "-03:30"
+  const [hoursPart, minutesPart] = offsetZ.split(":"); // ["+09", "00"]
+
+  const sign = hoursPart[0]; // '+' 또는 '-'
+  const hourValue = hoursPart.slice(1); // "09"
+
+  return `GMT ${sign}${hourValue}${
+    minutesPart !== "00" ? `:${minutesPart}` : ""
+  }`;
+};
+
+export const getGmtString = () => {
+  const localTz = dayjs.tz.guess();
+  const offsetString = dayjs().tz(localTz).format("Z");
+
+  return formatToGMT(offsetString);
+};
+
+type DayjsType = "year" | "month" | "week" | "day";
+export type LangType =
+  | "ko"
+  | "en"
+  | "ja"
+  | "zh"
+  | "vi"
+  | "fr"
+  | "de"
+  | "es"
+  | "it"
+  | "ru";
+
+/**
+ * @description 요일 텍스트 맵
+ * @type {Map<"ko" | "en" | "ja"
+ *  | "zh" | "vi" | "fr" | "de" | "es" | "it" | "ru", string[]>}
+ * @example DAY_TEXT_MAP.get("ko") // ["일", "월", "화", "수", "목", "금", "토"]
+ * @author @sangheon-kim (ksj8367@gmail.com)
+ */
+const DAY_TEXT_MAP = new Map([
+  ["ko", ["일", "월", "화", "수", "목", "금", "토"]],
+  ["en", ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]],
+  ["ja", ["日", "月", "火", "水", "木", "金", "土"]],
+  ["zh", ["日", "一", "二", "三", "四", "五", "六"]],
+  ["vi", ["CN", "T2", "T3", "T4", "T5", "T6", "T7"]],
+  ["fr", ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"]],
+  ["de", ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]],
+  ["es", ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"]],
+  ["it", ["Dom", "Lun", "Mar", "Mer", "Gio", "Ven", "Sab"]],
+  ["ru", ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"]],
+]);
+
+/**
+ *
+ * @param {*} date  {string} - 날짜
+ * @param {*} param1 {
+ *  type {string} - "month" | "week" | "year" | "day",
+ *  value {number} - 빼는 값
+ * }
+ * @summary 날짜를 뺀다.
+ */
+export const subtractCalendar = (
+  date: string,
+  { type = "month", value = 1 }: { type: DayjsType; value: number }
+) => {
+  return dayjs(date).subtract(value, type);
+};
+
+/**
+ *  @param {*} date  {string} - 날짜
+ * @param {*} param1 {
+ * type {string} - "month" | "week" | "year" | "day",
+ * value {number} - 더하는 값
+ * }
+ * @summary 날짜를 더한다.
+ */
+export const addCalendar = (
+  date: string,
+  { type = "month", value = 1 }: { type: DayjsType; value: number }
+) => {
+  return dayjs(date).add(value, type);
+};
+
+/**
+ *
+ * @param {*} date {string} - 날짜
+ * @param {*} lang {string} - "ko" | "en" | "ja" | "zh" | "vi" | "fr" | "de" | "es" | "it" | "ru"
+ * @returns {string} - 년월 텍스트
+ * @example getYearAndMonthText("2024-08-07", "ko") // "2024년 08월"
+ * @example getYearAndMonthText("2024-08-07", "en") // "Aug 2024"
+ * @author @sangheon-kim (ksj8367@gmail.com)
+ */
+export const getYearAndMonthText = (date: string, lang = "ko") => {
+  switch (lang) {
+    case "ko":
+      return dayjs(date).format(`YYYY년 MM월`);
+    case "en":
+      return dayjs(date).format(`MMM YYYY`);
+    case "ja":
+      return dayjs(date).format(`YYYY年 MM月`);
+    case "zh":
+      return dayjs(date).format(`YYYY年 MM月`);
+    case "vi":
+      return dayjs(date).format(`MM/YYYY`);
+    case "fr":
+      return dayjs(date).format(`MMM YYYY`);
+    case "de":
+      return dayjs(date).format(`MMM YYYY`);
+    case "es":
+      return dayjs(date).format(`MMM YYYY`);
+    case "it":
+      return dayjs(date).format(`MMM YYYY`);
+    case "ru":
+      return dayjs(date).format(`MMM YYYY`);
+    default:
+      return dayjs(date).format(`YYYY-MM`);
+  }
+};
+
+/**
+ * @description 달력의 컬럼을 채우는 함수
+ * @param {*} columns {dayjs.Dayjs[]} - 달력의 컬럼
+ * @param {*} start {dayjs.Dayjs} - 시작 날짜
+ * @param {*} end {dayjs.Dayjs} - 끝 날짜
+ * @return {dayjs.Dayjs[]} - 채워진 컬럼
+ * @author @sangheon-kim (ksj8367@gmail.com)
+ */
+export const fillEmptyColumns = ({
+  columns,
+  start,
+  end,
+  isMondayStart = false,
+  isWeekDay = true,
+  isWeekend = true,
+}: {
+  columns: Dayjs[];
+  start: Dayjs;
+  end: Dayjs;
+  isMondayStart: boolean;
+  isWeekDay: boolean;
+  isWeekend: boolean;
+}) => {
+  const filledColumns = [...columns];
+
+  // 시작일의 요일
+  let startDayOfWeek: number = start.day();
+
+  // 월요일 시작일 경우 처리
+  if (isMondayStart) {
+    startDayOfWeek = startDayOfWeek === 0 ? 6 : startDayOfWeek - 1;
+  }
+
+  // 이전 달의 빈 칸 채우기
+  const prevMonthDaysCount = startDayOfWeek;
+  if (prevMonthDaysCount > 0) {
+    const prevMonthEnd = dayjs(start).subtract(1, "day");
+    for (let i = 0; i < prevMonthDaysCount; i++) {
+      const currentDay = dayjs(prevMonthEnd).subtract(i, "day");
+      const dayOfWeek = currentDay.day();
+
+      // 평일 또는 주말 조건에 맞는 날짜만 추가
+      if (
+        (isWeekDay && dayOfWeek >= 1 && dayOfWeek <= 5) ||
+        (isWeekend && (dayOfWeek === 0 || dayOfWeek === 6))
+      ) {
+        filledColumns.unshift(currentDay);
+      }
+    }
+  }
+
+  // 마지막 요일
+  let endDayOfWeek: number = end.day();
+
+  // 월요일 시작일 경우 처리
+  if (isMondayStart) {
+    endDayOfWeek = endDayOfWeek === 0 ? 6 : endDayOfWeek - 1;
+  }
+
+  // 다음 달의 빈 칸 채우기
+  const nextMonthDaysCount = 6 - endDayOfWeek;
+  if (nextMonthDaysCount > 0) {
+    for (let i = 1; i <= nextMonthDaysCount; i++) {
+      const currentDay = dayjs(end).add(i, "day");
+      const dayOfWeek = currentDay.day();
+
+      // 평일 또는 주말 조건에 맞는 날짜만 추가
+      if (
+        (isWeekDay && dayOfWeek >= 1 && dayOfWeek <= 5) ||
+        (isWeekend && (dayOfWeek === 0 || dayOfWeek === 6))
+      ) {
+        filledColumns.push(currentDay);
+      }
+    }
+  }
+
+  return filledColumns;
+};
+
+/**
+ *
+ * @description 달력의 컬럼을 생성하는 함수
+ * @param {*} date {string} - 현재 날짜
+ * @param {*} isFill {boolean} - 빈 날짜를 채울지 여부
+ * @return {dayjs.Dayjs[]} - 달력의 컬럼
+ * @author @sangheon-kim (ksj8367@gmail.com)
+ */
+export const getCalendarColumns = ({
+  date,
+  isWeekDay = true,
+  isWeekend = true,
+  isMondayStart = false,
+}: {
+  date: string;
+  isWeekDay: boolean;
+  isWeekend: boolean;
+  isMondayStart: boolean;
+}) => {
+  const start = dayjs(date).startOf("month");
+  const end = dayjs(date).endOf("month");
+  const endDate = dayjs(end).get("date");
+
+  const columns: Dayjs[] = [];
+
+  // 해당 달의 시작 일부터 끝일까지의 날짜를 isWeekDay와 isWeekend 기준으로 채움
+  for (let i = 0; i < endDate; i++) {
+    const currentDay = dayjs(start).add(i, "day");
+    const dayOfWeek = currentDay.day(); // 요일 (일요일: 0, 월요일: 1, ..., 토요일: 6)
+
+    // 평일만 포함할 경우
+    if (isWeekDay && dayOfWeek >= 1 && dayOfWeek <= 5) {
+      columns.push(currentDay);
+    }
+
+    // 주말만 포함할 경우
+    if (isWeekend && (dayOfWeek === 0 || dayOfWeek === 6)) {
+      columns.push(currentDay);
+    }
+  }
+
+  // 빈 칸을 채우는 옵션
+  const filledColumns = fillEmptyColumns({
+    columns,
+    start,
+    end,
+    isMondayStart,
+    isWeekDay,
+    isWeekend,
+  });
+
+  return filledColumns;
+};
+
+/**
+ * @description 한주의 컬럼을 생성하는 함수
+ * @param {*} nowDate {string} - 현재 날짜
+ * @param {*} isWeekDay {boolean} - 평일 여부
+ * @param {*} isWeekend {boolean} - 주말 여부
+ * @param {*} startMon {boolean} - 월요일부터 시작할지 여부
+ * @return {dayjs.Dayjs[]} - 한주의 컬럼
+ * @author @sangheon-kim (ksj8367@gmail.com)
+ *
+ */
+export const getWeekdayColumns = ({
+  date,
+  isWeekDay = true,
+  isWeekend = true,
+  isMondayStart = false,
+}: {
+  date: string;
+  isWeekDay: boolean;
+  isWeekend: boolean;
+  isMondayStart: boolean;
+}) => {
+  const start = dayjs(date)
+    .startOf("week")
+    .add(isMondayStart ? 1 : 0, "day");
+
+  const columns: Dayjs[] = [];
+
+  // 주말 컬럼
+  const weekendColumns = [
+    dayjs(start).add(6, "day"), // 토요일
+    dayjs(start).add(0, "day"), // 일요일
+  ];
+
+  // 평일 컬럼 (월요일 ~ 금요일)
+  const weekDayColumns = new Array(5).fill(0).map((_, index) => {
+    return dayjs(start).add(index + 1, "day");
+  });
+
+  // 평일만 포함할 경우
+  if (isWeekDay && !isWeekend) {
+    return weekDayColumns;
+  }
+
+  // 주말만 포함할 경우
+  if (isWeekend && !isWeekDay) {
+    return weekendColumns;
+  }
+
+  // 평일과 주말 모두 포함할 경우
+  if (isMondayStart) {
+    columns.push(...weekDayColumns, ...weekendColumns);
+  } else {
+    columns.push(weekendColumns[1], ...weekDayColumns, weekendColumns[0]);
+  }
+
+  return columns;
+};
+
+/**
+ * @description 요일 텍스트를 가져오는 함수
+ * @param {*} day {number} - 요일
+ * @param {*} lang {string} - "ko" | "en" | "ja" | "zh" | "vi" | "fr" | "de" | "es" | "it" | "ru"
+ * @return {string} - 요일 텍스트
+ * @author @sangheon-kim (ksj8367@gmail.com)
+ */
+export const getDayText = (day: number, lang: LangType = "ko") => {
+  return DAY_TEXT_MAP.get(lang)?.[day];
+};
+
+/**
+ * @description 요일 색상을 가져오는 함수
+ * @param {*} day {number} - 요일
+ * @return {string} - 요일 색상
+ */
+export const getDayColor = (day: number) => {
+  return day === 0 ? "#e67639" : day === 6 ? "#5872d1" : "#2b2b2b";
+};