[FE] 스케줄 바를 드래그하여 수정할 수 있는 기능 구현

frontend/src/components/team_calendar/CalendarDragScreen/CalendarDragScreen.styled.ts

@@ -0,0 +1,16 @@
+import { styled } from 'styled-components';
+
+export const Container = styled.div<{ $visible: boolean }>`
+  ${({ $visible }) => !$visible && 'display: none'};
+  position: absolute;
+  overflow: hidden;
+  left: 0;
+  top: 0;
+
+  width: 100%;
+  height: 100%;
+
+  background-color: ${({ theme }) => theme.color.WHITE_BLUR};
+
+  cursor: all-scroll;
+`;

frontend/src/components/team_calendar/CalendarDragScreen/CalendarDragScreen.tsx

@@ -0,0 +1,64 @@
+import * as S from './CalendarDragScreen.styled';
+import { useRef } from 'react';
+import FakeScheduleBarsScreen from '~/components/team_calendar/FakeScheduleBarsScreen/FakeScheduleBarsScreen';
+import type { Schedule } from '~/types/schedule';
+import type { CalendarSize } from '~/types/size';
+import { useCalendarDragScreen } from '~/hooks/schedule/useCalendarDragScreen';
+
+interface CalendarDragScreenProps {
+  visible: boolean;
+  initX: number;
+  initY: number;
+  calendarSize: CalendarSize;
+  year: number;
+  month: number;
+  level: number;
+  schedule: Schedule;
+  onMouseUp: (
+    title: string,
+    startDateTime: Schedule['startDateTime'],
+    endDateTime: Schedule['endDateTime'],
+    shouldUpdate: boolean,
+  ) => void;
+}
+
+const CalendarDragScreen = (props: CalendarDragScreenProps) => {
+  const {
+    visible,
+    initX,
+    initY,
+    calendarSize,
+    year,
+    month,
+    level,
+    schedule,
+    onMouseUp,
+  } = props;
+  const calendarRef = useRef<HTMLDivElement>(null);
+  const { scheduleBars, relativeX, relativeY } = useCalendarDragScreen({
+    visible,
+    initX,
+    initY,
+    calendarRef,
+    calendarSize,
+    onMouseUp,
+    year,
+    month,
+    level,
+    schedule,
+  });
+
+  return (
+    <S.Container $visible={visible} ref={calendarRef}>
+      <FakeScheduleBarsScreen mode="indicator" scheduleBars={scheduleBars} />
+      <FakeScheduleBarsScreen
+        mode="schedule"
+        scheduleBars={scheduleBars}
+        relativeX={relativeX}
+        relativeY={relativeY}
+      />
+    </S.Container>
+  );
+};
+
+export default CalendarDragScreen;

frontend/src/components/team_calendar/FakeScheduleBarsScreen/FakeScheduleBarsScreen.stories.tsx

@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
+import FakeScheduleBarsScreen from '~/components/team_calendar/FakeScheduleBarsScreen/FakeScheduleBarsScreen';
+import type { GeneratedScheduleBar } from '~/types/schedule';
+
+/**
+ * `FakeScheduleBarsScreen` 는 캘린더 바의 드래그 기능을 구현하기 위해 사용자에게 보여주는 가짜 캘린더 바로 구성된, 시각적인 컴포넌트입니다.
+ *
+ * `mode = schedule`일 경우, 마우스 조작을 통해 x, y 값을 계속해서 업데이트하면 마우스를 따라다니듯이 작동하도록 만들 수 있습니다. x, y 값을 변경하면서 컴포넌트의 변화를 테스트하세요.
+ */
+const meta = {
+  title: 'Schedule/FakeScheduleBarsScreen',
+  component: FakeScheduleBarsScreen,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: ComponentType) => (
+      <div
+        style={{
+          position: 'relative',
+          overflow: 'hidden',
+          width: '600px',
+          height: '450px',
+          border: '3px solid red',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    mode: {
+      description:
+        '이 컴포넌트의 모드를 의미합니다. 사용 목적에 따라 `schedule`과 `indicator` 중 하나를 명시해 주세요.',
+    },
+    scheduleBars: {
+      description: '렌더링할 스케줄 바들의 정보를 의미합니다.',
+    },
+    relativeX: {
+      description:
+        '기존 좌표에서 좌우로 얼마나 이동한 위치에 렌더링 시킬 것인지를 의미합니다. 이 값이 양수이면 기존 좌표에서 수치만큼 오른쪽으로 이동하여 렌더링되고, 음수일 경우 왼쪽으로 이동하여 렌더링됩니다. 단위는 픽셀(px)입니다. **이 프로퍼티는 `mode = schedule`일 때만 사용할 수 있습니다.**',
+    },
+    relativeY: {
+      description:
+        '기존 좌표에서 상하로 얼마나 이동한 위치에 렌더링 시킬 것인지를 의미합니다. 이 값이 양수이면 기존 좌표에서 수치만큼 아래쪽으로 이동하여 렌더링되고, 음수일 경우 위쪽으로 이동하여 렌더링됩니다. 단위는 픽셀(px)입니다. **이 프로퍼티는 `mode = schedule`일 때만 사용할 수 있습니다.**',
+    },
+  },
+} satisfies Meta<typeof FakeScheduleBarsScreen>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const scheduleBars: GeneratedScheduleBar[] = [
+  {
+    id: '1',
+    scheduleId: 1105,
+    title: '바쁜 필립의 3주짜리 일정',
+    row: 0,
+    column: 1,
+    duration: 6,
+    level: 0,
+    roundedStart: true,
+    roundedEnd: false,
+    schedule: {
+      id: 1105,
+      title: '바쁜 필립의 3주짜리 일정',
+      startDateTime: '2023-06-26 00:00',
+      endDateTime: '2023-07-12 23:59',
+    },
+  },
+  {
+    id: '2',
+    scheduleId: 1105,
+    title: '바쁜 필립의 3주짜리 일정',
+    row: 1,
+    column: 0,
+    duration: 7,
+    level: 0,
+    roundedStart: false,
+    roundedEnd: false,
+    schedule: {
+      id: 1105,
+      title: '바쁜 필립의 3주짜리 일정',
+      startDateTime: '2023-06-26 00:00',
+      endDateTime: '2023-07-12 23:59',
+    },
+  },
+  {
+    id: '3',
+    scheduleId: 1105,
+    title: '바쁜 필립의 3주짜리 일정',
+    row: 2,
+    column: 0,
+    duration: 4,
+    level: 0,
+    roundedStart: false,
+    roundedEnd: true,
+    schedule: {
+      id: 1105,
+      title: '바쁜 필립의 3주짜리 일정',
+      startDateTime: '2023-06-26 00:00',
+      endDateTime: '2023-07-12 23:59',
+    },
+  },
+];
+
+/**
+ * 이 모드는 가짜 스케줄 바를 보여줘야 할 경우에 사용합니다.
+ */
+export const ScheduleMode: Story = {
+  args: {
+    mode: 'schedule',
+    scheduleBars,
+    relativeX: 0,
+    relativeY: 0,
+  },
+};
+
+/**
+ * 이 모드는 스케줄 바가 놓일 위치를 시각적으로 보여줘야 할 경우에 사용합니다.
+ */
+export const IndicatorMode: Story = {
+  args: {
+    mode: 'indicator',
+    scheduleBars,
+  },
+};

frontend/src/components/team_calendar/FakeScheduleBarsScreen/FakeScheduleBarsScreen.styled.ts

@@ -0,0 +1,22 @@
+import { styled } from 'styled-components';
+
+export const Container = styled.div.attrs<{
+  $relativeX: number;
+  $relativeY: number;
+}>(({ $relativeX, $relativeY }) => ({
+  style: {
+    transform: `translate(${$relativeX}px, ${$relativeY}px)`,
+  },
+}))`
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+
+  width: 100%;
+  height: 100%;
+`;
+
+export const CalendarRow = styled.div`
+  position: relative;
+  flex-grow: 1;
+`;

frontend/src/components/team_calendar/FakeScheduleBarsScreen/FakeScheduleBarsScreen.tsx

@@ -0,0 +1,45 @@
+import * as S from './FakeScheduleBarsScreen.styled';
+import ScheduleBar from '~/components/team_calendar/ScheduleBar/ScheduleBar';
+import { arrayOf } from '~/utils/arrayOf';
+import type { GeneratedScheduleBar } from '~/types/schedule';
+
+interface ScheduleModeProps {
+  mode: 'schedule';
+  scheduleBars: GeneratedScheduleBar[];
+  relativeX: number;
+  relativeY: number;
+}
+
+interface IndicatorModeProps {
+  mode: 'indicator';
+  scheduleBars: GeneratedScheduleBar[];
+}
+
+type FakeScheduleBarsScreenProps = ScheduleModeProps | IndicatorModeProps;
+
+const FakeScheduleBarsScreen = (props: FakeScheduleBarsScreenProps) => {
+  const { mode, scheduleBars } = props;
+
+  return (
+    <S.Container
+      $relativeX={mode === 'schedule' ? props.relativeX : 0}
+      $relativeY={mode === 'schedule' ? props.relativeY : 0}
+    >
+      {arrayOf(6).map((_, rowIndex) => (
+        <S.CalendarRow key={rowIndex}>
+          {scheduleBars.map((scheduleBar) => {
+            return scheduleBar.row === rowIndex ? (
+              <ScheduleBar
+                key={scheduleBar.id}
+                {...scheduleBar}
+                mode={mode === 'schedule' ? 'no-interaction' : 'indicator'}
+              />
+            ) : null;
+          })}
+        </S.CalendarRow>
+      ))}
+    </S.Container>
+  );
+};
+
+export default FakeScheduleBarsScreen;

frontend/src/components/team_calendar/ScheduleBar/ScheduleBar.stories.tsx

@@ -119,3 +119,51 @@ export const LongTitle: Story = {
     onClick: () => alert('clicked!'),
   },
 };
+
+/**
+ * `mode` 값이 `no-interaction`일 경우, 해당 캘린더 바는 오로지 장식 용도가 되며 **상호작용이 불가능**하게 됩니다. 가짜 스케줄 바 드래그 화면 등 시각적인 효과를 위해 사용할 수 있습니다.
+ */
+export const NoInteraction: Story = {
+  args: {
+    id: '1',
+    scheduleId: 1,
+    schedule: {
+      id: 1,
+      title: 'No Interaction',
+      startDateTime: '2023-07-07 05:00',
+      endDateTime: '2023-07-09 10:00',
+    },
+    title: 'No Interaction',
+    row: 1,
+    column: 2,
+    duration: 3,
+    level: 0,
+    roundedStart: true,
+    roundedEnd: true,
+    mode: 'no-interaction',
+  },
+};
+
+/**
+ * `mode` 값이 `indicator`일 경우, 해당 캘린더 바는 **상호작용이 불가능하고 캘린더 바의 윤곽만 드러내는** 시각적 요소가 됩니다. 캘린더 바가 놓일 위치를 시각적으로 표시하는 데에 사용합니다.
+ */
+export const Indicator: Story = {
+  args: {
+    id: '1',
+    scheduleId: 1,
+    schedule: {
+      id: 1,
+      title: 'This should not shown',
+      startDateTime: '2023-07-07 05:00',
+      endDateTime: '2023-07-09 10:00',
+    },
+    title: 'This should not shown',
+    row: 1,
+    column: 2,
+    duration: 3,
+    level: 0,
+    roundedStart: true,
+    roundedEnd: true,
+    mode: 'indicator',
+  },
+};