#6 calendar퍼블리싱

components/calendar/calendar.tsx

@@ -0,0 +1,219 @@
+import React from 'react';
+import * as Day from './func';
+import { EventType, ModalType } from './type';
+import styled from '@emotion/styled';
+
+export const showCalendar = (
+  elm: number,
+  i: number,
+  month: number,
+  YEAR: number,
+  modal: ModalType[],
+  setModal: (value: ModalType[]) => void,
+  event: EventType[],
+) => {
+  let cnt = 0;
+  const eventBlock = (
+    data: EventType,
+    idx: number,
+    title: string,
+    width: number,
+    radius: string,
+    margin: number,
+  ) => {
+    return cross(idx) && cross(idx) !== 'first' ? (
+      <EventBlockDiv
+        onClick={() => settingModal(data.start_at)}
+        width={`${width}px`}
+        color={`#${data.color}`}
+        radius={`${radius}`}
+        margin={`${margin}px`}>
+        {title}
+      </EventBlockDiv>
+    ) : (
+      <></>
+    );
+  };
+
+  const cross = (idx: number): boolean | string => {
+    for (let i = 0; i < idx; i++) {
+      if (
+        Day.getperiod(event[i].start_at) <= Day.getperiod(event[idx].start_at) &&
+        Day.getperiod(event[i].end_at) >= Day.getperiod(event[idx].start_at)
+      ) {
+        if (cross(i) === true) {
+          if (getFirst(idx) === 'first') {
+          }
+          return getFirst(idx);
+        }
+      }
+    }
+    return true;
+  };
+
+  const getFirst = (idx: number): boolean | string => {
+    for (let j = 0; j < event.length; j++) {
+      if (event[j].start_at === event[idx].start_at) {
+        if (event[j] === event[idx]) {
+          return 'first';
+        } else {
+          return false;
+        }
+      }
+    }
+    return true;
+  };
+
+  const overlap = (): number => {
+    return ++cnt;
+  };
+
+  const settingModal = (start?: string) => {
+    cnt = 0;
+
+    console.log(start);
+    if (!start) {
+      setModal(
+        modal.map((item: ModalType) =>
+          item.id === elm
+            ? { ...item, show: !item.show, first: false, start_at: '' }
+            : { ...item, show: false, first: false, start_at: '' },
+        ),
+      );
+    } else {
+      setModal(
+        modal.map((item: ModalType) =>
+          // item.id === parseInt(`${start}`.substr(-2))
+          item.id === elm
+            ? { ...item, first: !item.first, show: false, start_at: start }
+            : { ...item, first: false, show: false, start_at: '' },
+        ),
+      );
+    }
+  };
+
+  return (
+    <>
+      {event.map((data: EventType, idx: number) =>
+        Day.getperiod(data.start_at) <= Day.nowDate(month, YEAR, elm) &&
+        Day.nowDate(month, YEAR, elm) <= Day.getperiod(data.end_at) ? (
+          Day.getperiod(data.start_at) === Day.getperiod(data.end_at) ||
+          (cross(idx) === true &&
+            Day.getperiod(data.end_at) === Day.nowDate(month, YEAR, elm) &&
+            (elm === 1 || i % 7 === 0)) ||
+          (Day.getperiod(data.start_at) === Day.nowDate(month, YEAR, elm) &&
+            (elm === Day.getLastDay(month, YEAR) || (i + 1) % 7 === 0)) ? (
+            <>
+              {cross(idx) && cross(idx) !== 'first' ? (
+                <>{eventBlock(data, idx, data.title, 110, '5px', 0)}</>
+              ) : (
+                <span onClick={() => settingModal()}>+{overlap()}건</span>
+              )}
+            </>
+          ) : Day.getperiod(data.start_at) === Day.nowDate(month, YEAR, elm) ||
+            i % 7 === 0 ||
+            elm === 1 ? (
+            <>
+              {Day.getperiod(data.start_at) === Day.nowDate(month, YEAR, elm) || elm === 1 ? (
+                <>
+                  {cross(idx) && cross(idx) !== 'first' ? (
+                    <>{eventBlock(data, idx, data.title, 125, '5px 0 0 5px', 0)}</>
+                  ) : (
+                    <span onClick={() => settingModal()}>+{overlap()}건</span>
+                  )}
+                </>
+              ) : (
+                <>{eventBlock(data, idx, '', 125, '5px 0 0 5px', 0)}</>
+              )}
+            </>
+          ) : (
+            <>
+              {Day.getperiod(data.end_at) === Day.nowDate(month, YEAR, elm) ||
+              (i + 1) % 7 === 0 ||
+              elm === Day.getLastDay(month, YEAR) ? (
+                <>{eventBlock(data, idx, '', 125, '0 5px 5px 0', -15)}</>
+              ) : (
+                <>{eventBlock(data, idx, '', 141, '0', -15)}</>
+              )}
+            </>
+          )
+        ) : (
+          <></>
+        ),
+      )}
+      {modal[elm - 1].show || modal[elm - 1].first ? (
+        <Modal>
+          {event.map((item, idx) => (
+            <>
+              {((modal[elm - 1].first && cross(idx) === true) ||
+                (modal[elm - 1].show && cross(idx) !== true)) &&
+              item.start_at ===
+                (modal[elm - 1].start_at !== ''
+                  ? modal[elm - 1].start_at
+                  : `${Day.getYear(month, YEAR)}-${Day.getMonth(month)}-${`${elm}`.padStart(
+                      2,
+                      '0',
+                    )}`) ? (
+                <ContentDiv color={`#${item.color}`}>
+                  <div>{item.title}</div>
+                  <div>
+                    {item.start_at} ~ {item.end_at}
+                  </div>
+                </ContentDiv>
+              ) : (
+                <></>
+              )}
+            </>
+          ))}
+        </Modal>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+const EventBlockDiv = styled.div<{ width: string; color: string; radius: string; margin: string }>`
+  width: ${(props) => props.width};
+  background-color: ${(props) => props.color};
+  border-radius: ${(props) => props.radius};
+  margin-left: ${(props) => props.margin};
+  cursor: pointer;
+`;
+
+const ContentDiv = styled.div`
+  height: 34px;
+  width: 100%;
+  border-radius: 6px;
+  background-color: ${(props) => props.color};
+  margin: 5px 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  white-space: nowrap;
+  padding: 0 15px;
+  gap: 30px;
+  div ~ div {
+    color: #fff;
+    font-size: 10px;
+  }
+  div {
+    color: #fff;
+    font-size: 16px;
+    font-weight: 500;
+  }
+`;
+
+const Modal = styled.span`
+  z-index: 99;
+  width: min-content;
+  padding: 10px 15px;
+  box-sizing: border-box;
+  margin-top: 40px;
+  left: 15px;
+  position: absolute;
+  border-radius: 6px;
+  border: none;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
+  background-color: #fff;
+`;

components/calendar/func.ts

@@ -0,0 +1,20 @@
+export const getperiod = (period: string) => {
+  return new Date(period).getTime();
+};
+
+export const nowDate = (M: number, Y: number, elm: number) => {
+  return getperiod(`${getYear(M, Y)}-${getMonth(M)}-${`${elm}`.padStart(2, '0')}`);
+};
+
+export const getMonth = (M: number) => {
+  return `${M > 0 ? (M % 12 !== 0 ? M % 12 : 12) : 12 + (M % 12)}`.padStart(2, '0');
+};
+
+export const getYear = (M: number, Y: number) => {
+  return M > 0 ? Y + parseInt(`${(M - 1) / 12}`) : Y + parseInt(`${M / 12}`) - 1;
+};
+
+export const getLastDay = (M: number, Y: number) => {
+  const last = new Date(Y, M, 0);
+  return last.getDate();
+};

components/calendar/holyday.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import * as Day from './func';
+
+export const showHolyday = (elm: number, month: number, YEAR: number) => {
+  const holidays = [
+    {
+      date: '2022-11-01',
+      title: '오늘은 성심당 공휴일입니다.',
+    },
+    {
+      date: '2022-11-09',
+      title: '즐거운 추석되세요!',
+    },
+    {
+      date: '2022-11-10',
+      title: '즐거운 추석되세요!',
+    },
+    {
+      date: '2022-11-10',
+      title: '즐추 계시나요?',
+    },
+    {
+      date: '2022-11-10',
+      title: '즐추 안 계시나 보네요..ㅜ',
+    },
+    {
+      date: '2022-11-14',
+      title: '송편 먹고 싶다',
+    },
+    {
+      date: '2022-11-14',
+      title: '송편 먹고 싶다',
+    },
+  ];
+
+  function solution(date: string) {
+    let arr2: any = [];
+    let cnt = 0;
+
+    for (let i = 0; i < holidays.length; i++) {
+      if (arr2.indexOf(holidays[i].date) === -1) {
+        arr2.push(holidays[i].date);
+      }
+    }
+    for (let i = 0; i < arr2.length; i++) {
+      cnt = 0;
+      holidays.filter((e: any) => {
+        if (e.date === date) {
+          cnt++;
+        }
+      });
+    }
+
+    return cnt;
+  }
+
+  const eventBlock = (str: string) => {
+    return (
+      <div
+        style={{
+          width: '110px',
+          backgroundColor: `#e84045`,
+          borderRadius: '5px',
+        }}>
+        {str}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {holidays.map((data, i) => (
+        <>
+          {Day.nowDate(month, YEAR, elm) == Day.getperiod(data.date) ? (
+            <>
+              {solution(data.date) >= 3 && i >= 1 ? (
+                <>
+                  {data.date !== holidays[i - 1].date ? (
+                    <>
+                      {eventBlock(data.title)}
+                      <span style={{ color: '#7c7c7c', fontSize: '16px', cursor: 'pointer' }}>
+                        +{solution(data.date) - 1}건
+                      </span>
+                    </>
+                  ) : (
+                    <></>
+                  )}
+                </>
+              ) : (
+                <>{eventBlock(data.title)}</>
+              )}
+            </>
+          ) : (
+            <></>
+          )}
+        </>
+      ))}
+    </>
+  );
+};