Feat/daygrid creation guide

apps/calendar/src/components/daygrid/creationGuide.tsx

@@ -0,0 +1,22 @@
+import { h, FunctionComponent } from 'preact';
+
+import { toPercent } from '@src/util/units';
+import { cls } from '@src/util/cssHelper';
+
+interface CreationGuideProps {
+  left: number;
+  width: number;
+}
+
+const CreationGuide: FunctionComponent<CreationGuideProps> = (props) => {
+  const { left, width } = props;
+  const style = {
+    left: toPercent(left),
+    width: toPercent(width),
+    height: toPercent(100),
+  };
+
+  return <div className={cls('guide-creation')} style={style}></div>;
+};
+
+export default CreationGuide;

apps/calendar/src/components/daygrid/dayGrid.tsx

@@ -1,18 +1,24 @@
-import { h, FunctionComponent, Fragment } from 'preact';
+import { h, FunctionComponent } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
 
-import { useStore } from '@src/components/hooks/store';
+import { useActions, useStore } from '@src/components/hooks/store';
 
 import Grid from '@src/components/daygrid/grid';
 import GridEvents from '@src/components/daygrid/gridEvents';
+import GridsWithMouse from '@src/components/daygrid/gridsWithMouse';
+import CreationGuide from '@src/components/daygrid/creationGuide';
 
 import { toPercent } from '@src/util/units';
 import Schedule from '@src/model/schedule';
 import TZDate from '@src/time/date';
 import { CalendarMonthOption } from '@t/store';
 import { getSize } from '@src/util/domutil';
 import { cls } from '@src/util/cssHelper';
-import { EVENT_HEIGHT, getRenderedEventViewModels } from '@src/util/gridHelper';
+import { getLeftAndWidth, getRenderedEventViewModels } from '@src/util/gridHelper';
+import { toEndOfDay, toStartOfDay } from '@src/time/datetime';
+import { PopupType } from '@src/modules/layerPopup';
+import { GridGuideInfo } from '@t/components/daygrid/creationGuide';
+import { GridGuideCreationInfo } from '@t/components/daygrid/gridsWithMouse';
 
 const TOTAL_PERCENT_HEIGHT = 100;
 
@@ -21,6 +27,8 @@ interface DayGridProps {
   calendar: TZDate[][];
   appContainer: { current: HTMLDivElement };
   events?: Schedule[];
+  useCreationPopup?: boolean;
+  getMousePositionData?: (e: MouseEvent) => MousePositionData | null;
 }
 
 function useGridHeight() {
@@ -34,12 +42,117 @@ function useGridHeight() {
   return { ref, height };
 }
 
+function useCreationGuide(useCreationPopup = false) {
+  const [creationGuide, setCreationGuide] = useState<GridGuideCreationInfo | null>(null);
+  const [popupFlag, setPopupFlag] = useState(false);
+
+  const { show, hide } = useActions('layerPopup');
+
+  const onOpenCreationPopup = (guide: GridGuideCreationInfo) => {
+    if (useCreationPopup) {
+      const { start, end } = guide;
+
+      // @TODO: popupRect 계산 필요
+      show({
+        type: PopupType.creation,
+        param: {
+          start,
+          end,
+          isAllDay: true,
+          popupRect: {
+            width: 474,
+            height: 272,
+            left: 102.695,
+            top: 257,
+          },
+          close: () => {
+            onGuideCancel();
+            setPopupFlag(false);
+          },
+        },
+      });
+
+      if (!popupFlag) {
+        setPopupFlag(true);
+      }
+    }
+  };
+
+  const onGuideStart = (guide: GridGuideCreationInfo | null) => {
+    setCreationGuide(guide);
+  };
+  const onGuideEnd = (guide: GridGuideCreationInfo | null) => {
+    setCreationGuide(guide);
+
+    if (guide) {
+      onOpenCreationPopup(guide);
+    } else if (!guide && popupFlag) {
+      hide();
+    }
+  };
+  const onGuideChange = (guide: GridGuideCreationInfo) => {
+    setCreationGuide(guide);
+  };
+  const onGuideCancel = () => setCreationGuide(null);
+
+  return {
+    creationGuide,
+    onGuideStart,
+    onGuideEnd,
+    onGuideChange,
+    onGuideCancel,
+  };
+}
+
+function renderCreationGuide(
+  creationGuide: GridGuideCreationInfo,
+  cells: TZDate[],
+  narrowWeekend: boolean
+) {
+  if (!creationGuide) {
+    return null;
+  }
+
+  const { start, end } = creationGuide;
+  const { left, width } = getLeftAndWidth(start, end, cells, narrowWeekend);
+
+  return width > 0 ? <CreationGuide {...creationGuide} left={left} width={width} /> : null;
+}
+
+function getGridInfoList(calendar: TZDate[][]): GridGuideInfo[][] {
+  return calendar.map<GridGuideInfo[]>((week) =>
+    week.map<GridGuideInfo>((day) => {
+      const start = toStartOfDay(day);
+      const end = toEndOfDay(start);
+
+      return {
+        start,
+        end,
+      };
+    })
+  );
+}
+
 const DayGrid: FunctionComponent<DayGridProps> = (props) => {
-  const { options, calendar = [], appContainer } = props;
+  const {
+    options,
+    calendar = [],
+    appContainer,
+    useCreationPopup = false,
+    getMousePositionData = () => null,
+  } = props;
   const { visibleWeeksCount, workweek, startDayOfWeek, narrowWeekend } = options;
 
   const { ref, height } = useGridHeight();
 
+  const {
+    creationGuide,
+    onGuideStart,
+    onGuideChange,
+    onGuideEnd,
+    onGuideCancel,
+  } = useCreationGuide(useCreationPopup);
+
   const rowHeight =
     TOTAL_PERCENT_HEIGHT / Math.max(visibleWeeksCount === 0 ? 6 : visibleWeeksCount, 1);
 
@@ -53,10 +166,18 @@ const DayGrid: FunctionComponent<DayGridProps> = (props) => {
 
   const { schedule: monthScheduleTheme } = theme.month;
   const eventHeight = parseFloat(monthScheduleTheme.height);
+  const gridInfoList = getGridInfoList(calendar);
 
   return (
-    <Fragment>
-      {calendar.map((week, index) => {
+    <GridsWithMouse
+      onGuideStart={onGuideStart}
+      onGuideChange={onGuideChange}
+      onGuideEnd={onGuideEnd}
+      onGuideCancel={onGuideCancel}
+      gridInfoList={gridInfoList}
+      getMousePositionData={getMousePositionData}
+    >
+      {calendar.map((week, rowIndex) => {
         const { viewModels, gridDateEventModelMap } = getRenderedEventViewModels(
           week,
           dataStore,
@@ -65,7 +186,7 @@ const DayGrid: FunctionComponent<DayGridProps> = (props) => {
 
         return (
           <div
-            key={`dayGrid-events-${index}`}
+            key={`dayGrid-events-${rowIndex}`}
             className={cls('month-week-item')}
             style={{ height: toPercent(rowHeight) }}
             ref={ref}
@@ -91,11 +212,12 @@ const DayGrid: FunctionComponent<DayGridProps> = (props) => {
                 eventHeight={eventHeight}
                 className={cls('weekday-schedules')}
               />
+              {creationGuide ? renderCreationGuide(creationGuide, week, narrowWeekend) : null}
             </div>
           </div>
         );
       })}
-    </Fragment>
+    </GridsWithMouse>
   );
 };
 

apps/calendar/src/components/daygrid/grid.tsx

@@ -45,9 +45,9 @@ const Grid: FunctionComponent<GridProps> = (props) => {
 
   return (
     <div className={cls('grid')} style={style} ref={container}>
-      {calendar.map((date, index) => {
+      {calendar.map((date, columnIndex) => {
         const dayIndex = date.getDay();
-        const { width, left } = grids[index];
+        const { width, left } = grids[columnIndex];
         const ymd = toFormat(toStartOfDay(date), 'YYYYMMDD');
 
         return (

apps/calendar/src/components/daygrid/gridEvents.tsx

@@ -23,8 +23,12 @@ const GridEvents: FunctionComponent<Props> = ({
   name,
   className,
 }) => {
-  const filteredViewModels = events.filter(isWithinHeight(height, eventHeight));
-  const headerHeight = 31; // @TODO: 테마에서 값 가져와서 설정
+  // @TODO: 테마에서 값 가져와서 설정
+  const headerHeight = 31;
+  const eventTopMargin = 2;
+  const filteredViewModels = events.filter(
+    isWithinHeight(height - headerHeight, eventHeight + eventTopMargin)
+  );
 
   const dayEvents = filteredViewModels.map((viewModel) => (
     <GridEvent