feat: 일정 삭제 및 모달 분리

src/components/modal/TwoBtnModal.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { ISModalProps } from "../../types/ISModalProps";
+import { styled } from "styled-components";
+
+const TwoBtnModal: React.FC<ISModalProps> = ({
+  title,
+  description,
+  imageSrc,
+  confirmText = "확인",
+  cancelText = "취소",
+  onConfirm,
+  onCancel,
+}) => {
+  return (
+    <>
+      <ModalOverlay>
+        <ModalContent>
+          {imageSrc && <ModalImage src={imageSrc} alt="modal image" />}
+          <ModalTitle>{title}</ModalTitle>
+          {description && <ModalDescription>{description}</ModalDescription>}
+          <ModalButtonWrapper>
+            <ModalButton onClick={onConfirm}>{confirmText}</ModalButton>
+            <ModalColorButton onClick={onCancel}>{cancelText}</ModalColorButton>
+          </ModalButtonWrapper>
+        </ModalContent>
+      </ModalOverlay>
+    </>
+  );
+};
+
+export default TwoBtnModal;
+
+const ModalOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+`;
+
+const ModalContent = styled.div`
+  padding: 20px;
+  border-radius: 20px;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const ModalTitle = styled.h2`
+  color: var(--Black, #3b3634);
+
+  text-align: center;
+  font-family: SUIT;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
+
+const ModalDescription = styled.div`
+  margin-top: 5px;
+  color: var(--Primary, #f14040);
+  font-family: SUIT;
+  font-size: 8px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
+
+const ModalImage = styled.img`
+  width: 100px;
+  height: 100px;
+`;
+
+const ModalButtonWrapper = styled.div`
+  display: flex;
+  margin-top: 10px;
+  gap: 20px;
+`;
+
+const ModalButton = styled.button`
+  border-radius: 10px;
+  width: 90px;
+  padding: 9px 0px 8px 0px;
+
+  border-radius: 10px;
+  background: #f25454;
+  box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.25);
+
+  color: #fff;
+  text-align: center;
+  font-family: SUIT;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
+
+const ModalColorButton = styled(ModalButton)`
+  background: #fff;
+
+  color: var(--Black, #3b3634);
+`;

src/hooks/useCoupleInfo.ts

@@ -2,6 +2,7 @@ import { useSuspenseQuery } from "@tanstack/react-query";
 import { LoverInfo } from "../types/ILoverInfo";
 import { fetchLoverInfo } from "../api/couple/coupleInfo";
 
+
 // 내 애인 조회
 export const useFetchMyLoverInfo = () => {
   const loverInfo = useSuspenseQuery<LoverInfo>({

src/hooks/useDeleteSchedule.ts

@@ -0,0 +1,11 @@
+import { useMutation } from "@tanstack/react-query";
+import { deleteSchedule } from "../api/schedule/scheduleAPI";
+
+export const useDeleteSchedule = () => {
+  return useMutation({
+    mutationFn: deleteSchedule,
+    onError: (error: unknown) => {
+      console.log(error);
+    },
+  });
+};

src/hooks/useSaveSchedule.ts

@@ -2,6 +2,7 @@ import { useMutation } from "@tanstack/react-query";
 import { AxiosError } from "axios";
 import { createSchedule } from "../api/schedule/scheduleAPI";
 
+
 export const useSaveSchedule = () => {
   return useMutation({
     mutationFn: createSchedule,

src/hooks/useScheduleList.ts

@@ -1,12 +1,12 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
+
+import { ScheduleData } from "../types/ISchedule";
 import {
   fetchCommonScheduleList,
   fetchMyScheduleList,
   fetchPartnerScheduleList,
 } from "../api/schedule/scheduleAPI";
 
-import { ScheduleData } from "../types/ISchedule";
-
 // 내 일정 리스트
 export const useFetchMyScheduleList = (searchDate: string) => {
   const schedule = useSuspenseQuery<ScheduleData[]>({

src/pages/calendar/components/ScheduleDetailModal.tsx

@@ -0,0 +1,168 @@
+import React from "react";
+import styled from "styled-components";
+import { IDetailModalProps } from "../../../types/IDetailModalProps";
+import { getBusyColor } from "../../../utils/colors";
+import phone from "../../../images/calendar/phone.svg";
+
+const ScheduleDetailModal: React.FC<IDetailModalProps> = ({
+  schedule,
+  onClose,
+  buttons,
+}) => {
+  return (
+    <Overlay onClick={onClose}>
+      <ModalWrapper
+        onClick={(e) => e.stopPropagation()}
+        borderColor={getBusyColor(schedule.busyLevel)}
+      >
+        <ModalContent>
+          <Line />
+          <Wrap>
+            <BusyTag backgroundColor={getBusyColor(schedule.busyLevel)} />
+            <Title>{schedule.scheduleName}</Title>
+            <Phone src={phone} />
+          </Wrap>
+
+          <Details>
+            <Text>{schedule.scheduleLocation}</Text>
+            <Text>{schedule.scheduleWith}</Text>
+            <Text>
+              {new Date(schedule.scheduleStartAt).toLocaleTimeString()} ~{" "}
+              {new Date(schedule.scheduleEndAt).toLocaleTimeString()}
+            </Text>
+          </Details>
+
+          <ButtonGroup>
+            {buttons.map((button, index) => (
+              <ActionButton key={index} onClick={button.onClick}>
+                {button.label}
+              </ActionButton>
+            ))}
+          </ButtonGroup>
+        </ModalContent>
+      </ModalWrapper>
+    </Overlay>
+  );
+};
+
+export default ScheduleDetailModal;
+
+const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 4;
+
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  background-color: rgba(0, 0, 0, 0.5);
+`;
+
+const ModalWrapper = styled.div<{ borderColor: string }>`
+  position: relative;
+  width: 85%;
+  background: #fff;
+  border-radius: 20px 20px 0 0;
+  border: 1px solid ${({ borderColor }) => borderColor};
+  box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.25);
+  padding: 25px;
+`;
+
+const ModalContent = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+`;
+
+const Wrap = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const BusyTag = styled.div<{ backgroundColor: string }>`
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: ${({ backgroundColor }) => backgroundColor};
+`;
+
+const Title = styled.div`
+  color: var(--Black, #3b3634);
+  font-family: SUIT;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  width: 90%;
+  margin-left: 12px;
+`;
+
+const Details = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+
+  margin-top: 30px;
+`;
+
+const Text = styled.div`
+  color: var(--Black, #3b3634);
+
+  font-family: SUIT;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+`;
+
+const Phone = styled.img`
+  width: 20.299px;
+  height: 27.463px;
+`;
+
+const ActionButton = styled.button`
+  display: flex;
+  width: 80%;
+  padding: 13px 0px 12px 0px;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 10px;
+  background: #fff;
+  box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.25);
+  background: #fff;
+
+  color: var(--Black, #3b3634);
+  text-align: center;
+  font-family: SUIT;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  cursor: pointer;
+
+  &:first-child {
+    background: var(--Secondary, #ffcfc7);
+  }
+`;
+
+const ButtonGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  margin-top: 30px;
+`;
+
+const Line = styled.div`
+  width: 53px;
+  height: 5px;
+  margin: 0 auto;
+  border-radius: 30px;
+  background: #4d3f2c;
+  margin-bottom: 30px;
+`;