[FE] 일정 조회, 삭제 api 연결

frontend/src/apis/schedule.ts

@@ -11,6 +11,18 @@ export const fetchSchedules = (
   );
 };
 
+export const fetchScheduleById = (teamPlaceId: number, scheduleId: number) => {
+  return http.get<Schedule>(
+    `/api/team-place/${teamPlaceId}/calendar/schedules/${scheduleId}`,
+  );
+};
+
+export const deleteSchedule = (teamPlaceId: number, scheduleId: number) => {
+  return http.delete(
+    `/api/team-place/${teamPlaceId}/calendar/schedules/${scheduleId}`,
+  );
+};
+
 export const sendSchedule = (teamPlaceId: number, body: ScheduleWithoutId) => {
   return http.post(`/api/team-place/${teamPlaceId}/calendar/schedules`, body);
 };

frontend/src/components/Calendar/Calendar.tsx

@@ -6,21 +6,27 @@ import useCalendar from '~/hooks/useCalendar';
 import * as S from './Calendar.styled';
 import ScheduleBar from '~/components/ScheduleBar/ScheduleBar';
 import { generateScheduleBars } from '~/utils/generateScheduleBars';
-import { useSchedules } from '~/hooks/queries/useSchedules';
-import { DAYS_OF_WEEK } from '~/constants/calendar';
+import ScheduleModal from '~/components/ScheduleModal/ScheduleModal';
+import { useScheduleModal } from '~/hooks/schedule/useScheduleModal';
 import { useModal } from '~/hooks/useModal';
+import { DAYS_OF_WEEK } from '~/constants/calendar';
 import ScheduleAddModal from '~/components/ScheduleAddModal/ScheduleAddModal';
+import { useFetchSchedules } from '~/hooks/queries/useFetchSchedules';
 
 const Calendar = () => {
   const {
     year,
     month,
     calendar,
-
     handlers: { handlePrevButtonClick, handleNextButtonClick },
   } = useCalendar();
-  const { schedules } = useSchedules(1, year, month);
+  const { schedules } = useFetchSchedules(1, year, month);
   const { isModalOpen, openModal } = useModal();
+  const {
+    modalScheduleId,
+    modalPosition,
+    handlers: { onScheduleModalOpen },
+  } = useScheduleModal();
 
   if (schedules === undefined) {
     return null;
@@ -67,11 +73,27 @@ const Calendar = () => {
                 <>
                   <S.ScheduleBarContainer>
                     {scheduleBars.map((scheduleBar) => {
-                      const { id, row, ...rest } = scheduleBar;
+                      const { id, row, column, level, scheduleId, ...rest } =
+                        scheduleBar;
 
                       if (row === rowIndex)
                         return (
-                          <ScheduleBar key={id} id={id} row={row} {...rest} />
+                          <ScheduleBar
+                            id={id}
+                            scheduleId={scheduleId}
+                            row={row}
+                            column={column}
+                            level={level}
+                            onScheduleModalOpen={() =>
+                              onScheduleModalOpen({
+                                scheduleId,
+                                row,
+                                column,
+                                level,
+                              })
+                            }
+                            {...rest}
+                          />
                         );
 
                       return null;
@@ -95,6 +117,9 @@ const Calendar = () => {
         </div>
       </S.Container>
       {isModalOpen && <ScheduleAddModal teamPlaceName="팀바팀" />}
+      {isModalOpen && (
+        <ScheduleModal scheduleId={modalScheduleId} position={modalPosition} />
+      )}
     </>
   );
 };

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

@@ -20,5 +20,6 @@ export const Default: Story = {
     column: 2,
     duration: 3,
     level: 0,
+    onScheduleModalOpen: () => console.log('click'),
   },
 };

frontend/src/components/ScheduleBar/ScheduleBar.styled.ts

@@ -17,7 +17,9 @@ export const Inner = styled.div<Pick<ScheduleBarProps, 'color' | 'level'>>`
   height: 100%;
 
   background-color: ${({ color }) => color};
+  border-radius: 4px;
+
   filter: brightness(${({ level }) => 1 + level * 0.5});
 
-  border-radius: 4px;
+  cursor: pointer;
 `;

frontend/src/components/ScheduleBar/ScheduleBar.tsx

@@ -9,17 +9,18 @@ export interface ScheduleBarProps {
   duration: number;
   level: number;
   color?: string;
+  onScheduleModalOpen?: () => void;
 }
 
 const ScheduleBar = (props: ScheduleBarProps) => {
-  const { color = '#516FFF', title, ...rest } = props;
+  const { color = '#516FFF', title, onScheduleModalOpen, ...rest } = props;
 
   return (
     <S.Wrapper
       color={color}
       title={title}
+      onClick={onScheduleModalOpen}
       {...rest}
-      onClick={() => alert(title)}
     >
       <S.Inner color={color} {...rest} />
     </S.Wrapper>

frontend/src/components/ScheduleModal/ScheduleModal.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useModal } from '~/hooks/useModal';
 import ScheduleModal from '~/components/ScheduleModal/ScheduleModal';
-import { useRef, useState } from 'react';
 import { arrayOf } from '~/utils/arrayOf';
 
 const meta = {
@@ -16,38 +15,37 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render: () => {
     const { openModal } = useModal();
-    const refs = arrayOf(5).map(() => useRef(null));
 
-    const [targetRef, setTargetRef] = useState<React.RefObject<HTMLDivElement>>(
-      refs[0],
-    );
-
-    const handleOpen = (index: number) => {
+    const handleOpen = () => {
       openModal();
-      setTargetRef(refs[index]);
     };
 
     return (
       <>
         {arrayOf(5).map((_, index) => {
           return (
-            <div
-              key={index}
-              ref={refs[index]}
-              onClick={() => handleOpen(index)}
-            >
+            <div key={index} onClick={() => handleOpen()}>
               모달 열기
             </div>
           );
         })}
-        <ScheduleModal targetRef={targetRef} id={1} />
+        <ScheduleModal
+          scheduleId={1}
+          position={{
+            row: 0,
+            column: 0,
+            level: 0,
+          }}
+        />
       </>
     );
   },
   args: {
-    id: 1,
-    // eslint-disable-next-line
-    //@ts-ignore
-    targetRef: null,
+    scheduleId: 1,
+    position: {
+      row: 0,
+      column: 0,
+      level: 0,
+    },
   },
 };

frontend/src/components/ScheduleModal/Schedule.styled.ts → frontend/src/components/ScheduleModal/ScheduleModal.styled.ts

@@ -18,6 +18,7 @@ export const Container = styled.div`
     0 15px 25px #1b1d1f33,
     0 5px 10px #1b1d1f1f;
 `;
+
 export const Backdrop = styled.div`
   position: fixed;
   top: 0;
@@ -45,14 +46,6 @@ export const TeamColor = styled.div`
   background-color: ${({ theme }) => theme.color.PRIMARY};
 `;
 
-export const TeamName = css`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  max-width: 200px;
-`;
-
 export const MenuWrapper = styled.div`
   display: flex;
   align-items: center;
@@ -64,7 +57,15 @@ export const PeriodWrapper = styled.div`
   gap: 2px;
 `;
 
-export const Button = css`
+export const teamName = css`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  max-width: 200px;
+`;
+
+export const closeButton = css`
   display: flex;
   justify-content: center;
   align-items: center;

frontend/src/components/ScheduleModal/ScheduleModal.tsx

@@ -2,22 +2,43 @@ import type { CSSProperties } from 'react';
 import Modal from '~/components/common/Modal/Modal';
 import Text from '~/components/common/Text/Text';
 import { useModal } from '~/hooks/useModal';
-import * as S from './Schedule.styled';
+import * as S from './ScheduleModal.styled';
 import { CloseIcon, DeleteIcon, EditIcon } from '~/assets/svg';
 import Button from '~/components/common/Button/Button';
+import { formatDateTime } from '~/utils/formatDateTime';
+import type { SchedulePosition } from '~/types/schedule';
+import { useFetchScheduleById } from '~/hooks/queries/useFetchScheduleById';
+import { useDeleteSchedule } from '~/hooks/queries/useDeleteSchedule';
 
 interface ScheduleModalProps {
-  id: number;
-  targetRef: React.RefObject<HTMLDivElement>;
+  scheduleId: number;
+  position: SchedulePosition;
 }
+
 const ScheduleModal = (props: ScheduleModalProps) => {
-  const { targetRef } = props;
+  const { scheduleId, position } = props;
   const { closeModal } = useModal();
+  const { scheduleById } = useFetchScheduleById(1, scheduleId);
+  const { mutateScheduleDelete } = useDeleteSchedule(1, scheduleId);
+
+  if (scheduleById === undefined) return;
 
+  const { title, startDateTime, endDateTime } = scheduleById;
+  const { row, column, level } = position;
   const modalLocation: CSSProperties = {
     position: 'absolute',
-    top: `${targetRef.current?.getBoundingClientRect().bottom}px`,
-    left: `${targetRef.current?.getBoundingClientRect().left}px`,
+    top: row < 3 ? `${(row + 1) * 120 + level * 18 + 60}px` : 'none',
+    bottom: row >= 3 ? `${(6 - row) * 120 - level * 18}px` : 'none',
+    left: column < 3 ? `${(column * 100) / 7}%` : 'none',
+    right: column >= 3 ? `${((6 - column) * 100) / 7}%` : 'none',
+  };
+
+  const handleScheduleDelete = () => {
+    if (confirm('일정을 삭제하시겠어요?')) {
+      mutateScheduleDelete(undefined, {
+        onSuccess: () => closeModal(),
+      });
+    }
   };
 
   return (
@@ -27,39 +48,32 @@ const ScheduleModal = (props: ScheduleModalProps) => {
         <S.Header>
           <S.TeamWrapper>
             <S.TeamColor />
-            <p
-              title={
-                '현대사회와 범죄 5조현대사회와 범죄 5조현대사회와 범죄5조현대사회와 범죄 5조현대사회와 범죄 5조'
-              }
-            >
-              <Text css={S.TeamName}>
-                현대사회와 범죄 5조현대사회와 범죄 5조현대사회와
-                범죄5조현대사회와 범죄 5조현대사회와 범죄 5조
-              </Text>
-            </p>
+            <div title={'현대사회와 범죄 5조'}>
+              <Text css={S.teamName}>현대사회와 범죄 5조</Text>
+            </div>
           </S.TeamWrapper>
           <S.MenuWrapper>
             <Button size="sm" variant="plain">
               <EditIcon />
             </Button>
-            <Button size="sm" variant="plain">
+            <Button size="sm" variant="plain" onClick={handleScheduleDelete}>
               <DeleteIcon />
             </Button>
             <Button size="sm" variant="plain" onClick={closeModal}>
               <CloseIcon />
             </Button>
           </S.MenuWrapper>
         </S.Header>
-        <Text as="h4">1차 데모데이</Text>
+        <Text as="h4">{title}</Text>
         <S.PeriodWrapper>
-          <Text size="lg">07월 13일 15:00</Text>
+          <Text size="lg">{formatDateTime(startDateTime)}</Text>
           <Text size="lg">~</Text>
-          <Text size="lg">07월 13일 19:00</Text>
+          <Text size="lg">{formatDateTime(endDateTime)}</Text>
         </S.PeriodWrapper>
         <Button
           type="button"
           variant="primary"
-          css={S.Button}
+          css={S.closeButton}
           onClick={closeModal}
         >
           확인

frontend/src/hooks/queries/useDeleteSchedule.ts

@@ -0,0 +1,21 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { deleteSchedule } from '~/apis/schedule';
+
+export const useDeleteSchedule = (teamPlaceId: number, scheduleId: number) => {
+  const queryClient = useQueryClient();
+
+  const { mutate } = useMutation(
+    () => deleteSchedule(teamPlaceId, scheduleId),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: ['schedules'] });
+      },
+      onError: () => {
+        alert('오류가 발생했습니다. 잠시 후 다시 시도해주세요.');
+        throw new Error();
+      },
+    },
+  );
+
+  return { mutateScheduleDelete: mutate };
+};

frontend/src/hooks/queries/useFetchScheduleById.ts

@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+import { fetchScheduleById } from '~/apis/schedule';
+
+export const useFetchScheduleById = (
+  teamPlaceId: number,
+  scheduleId: number,
+) => {
+  const { data: scheduleById } = useQuery(['schedule', scheduleId], () =>
+    fetchScheduleById(teamPlaceId, scheduleId),
+  );
+
+  return { scheduleById };
+};

frontend/src/hooks/queries/useSchedules.ts → frontend/src/hooks/queries/useFetchSchedules.ts

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { fetchSchedules } from '~/apis/schedule';
 
-export const useSchedules = (
+export const useFetchSchedules = (
   teamPlaceId: number,
   year: number,
   month: number,