[Feat] 캘린더 추가 및 수정 컴포넌트 제작

components/admin/calendar/CalendarDetailModal.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { Modal, Box } from '@mui/material';
+import { AdminSchedule } from 'types/calendar/scheduleTypes';
+import {
+  CalendarClassification,
+  eventTagLabels,
+  jobTagLabels,
+  techTagLabels,
+} from 'constants/calendar/calendarConstants';
+import styles from 'styles/calendar/Form/CalendarForm.module.scss';
+
+interface CalendarDetailModalProps {
+  data: AdminSchedule | null;
+  onClose: () => void;
+}
+
+export const CalendarDetailModal = ({
+  data,
+  onClose,
+}: CalendarDetailModalProps) => {
+  if (data === null) {
+    return null;
+  }
+  const {
+    title,
+    content,
+    link,
+    startTime,
+    endTime,
+    classification,
+    eventTag,
+    jobTag,
+    techTag,
+  } = data;
+
+  return (
+    <Modal open={true} onClose={onClose}>
+      <Box className={`${styles.container} ${styles.modalCenter}`}>
+        <div className={styles.formHeaderContainer}>일정 상세</div>
+
+        <div className={styles.formContainer}>
+          <div className={styles.inputWrapper}>
+            <div className={styles.label}>제목</div>
+            <div className={styles.detailTitle}>{title}</div>
+          </div>
+
+          <div className={styles.detailTagWrapper}>
+            <div className={styles.label}>태그</div>
+            <div className={styles.detailTagField}>
+              <div className={styles.detailSelectTagContainer}>
+                <div className={`${styles.tagItem} ${styles.detailText}`}>
+                  #{' '}
+                  {classification === CalendarClassification.EVENT
+                    ? '42서울일정'
+                    : '취업 공고'}
+                </div>
+              </div>
+
+              {classification === CalendarClassification.EVENT && eventTag && (
+                <div className={styles.subTagWrapper}>
+                  <div className={styles.detailText}>
+                    # {eventTagLabels[eventTag]}
+                  </div>
+                </div>
+              )}
+
+              {classification === CalendarClassification.JOB && jobTag && (
+                <div className={styles.subTagJobWrapper}>
+                  <div className={styles.detailText}>
+                    # {jobTagLabels[jobTag]}
+                  </div>
+                </div>
+              )}
+
+              {classification === CalendarClassification.JOB && techTag && (
+                <div className={styles.subTagWrapper}>
+                  <div className={styles.detailText}>
+                    # {techTagLabels[techTag]}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className={styles.contentWrapper}>
+            <div className={styles.contentLabel}>내용</div>
+            <div className={styles.detailTextareaField}>{content}</div>
+          </div>
+
+          <div className={styles.inputWrapper}>
+            <div className={styles.label}>날짜</div>
+            <div className={styles.detailDatePickerContainer}>
+              {new Date(startTime).toLocaleString('ko-KR', {
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit',
+              })}
+              <span> - </span>
+              {new Date(endTime).toLocaleString('ko-KR', {
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit',
+              })}
+            </div>
+          </div>
+
+          <div className={styles.inputWrapper}>
+            <div className={styles.label}>링크</div>
+            <div className={styles.detailInputField}>
+              <a href={link} target='_blank' rel='noopener noreferrer'>
+                {link}
+              </a>
+            </div>
+          </div>
+        </div>
+      </Box>
+    </Modal>
+  );
+};

components/admin/calendar/CalendarTable.tsx

@@ -1,34 +1,43 @@
 import { useState } from 'react';
 import {
+  Box,
   Paper,
   Table,
   TableBody,
   TableCell,
   TableContainer,
   TableHead,
   TableRow,
-  Box,
   Tooltip,
 } from '@mui/material';
 import { AdminSchedule } from 'types/calendar/scheduleTypes';
 import {
   CalendarStatus,
   CalendarClassification,
 } from 'constants/calendar/calendarConstants';
+import { NoContent } from 'components/admin/agenda/utils';
+import { CalendarDetailModal } from 'components/admin/calendar/CalendarDetailModal';
+import { EditCalendarModal } from 'components/calendar/EditCalendarModal';
 import PageNation from 'components/Pagination';
 import { useAdminCalendarDelete } from 'hooks/calendar/admin/useAdminCalendarDelete';
+import { useAdminCalendarDetail } from 'hooks/calendar/admin/useAdminCalendarDetail';
+import { useAdminCalendarUpdate } from 'hooks/calendar/admin/useAdminCalendarUpdate';
 import styles from 'styles/admin/calendar/CalendarTable.module.scss';
-import { NoContent } from '../agenda/utils';
 
 interface CalendarTableProps {
   data: AdminSchedule[];
 }
 
 export const CalendarTable = ({ data }: CalendarTableProps) => {
   const [currentPage, setCurrentPage] = useState<number>(1);
+  const [showDetailModal, setShowDetailModal] = useState<boolean>(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+
   const itemsPerPage = 10;
   const totalPage = Math.ceil(data.length / itemsPerPage);
   const { deleteCalendar } = useAdminCalendarDelete();
+  const { detailData, getCalendarDetail } = useAdminCalendarDetail();
+  const { updateCalendar } = useAdminCalendarUpdate();
 
   const paginatedData = data.slice(
     (currentPage - 1) * itemsPerPage,
@@ -54,6 +63,25 @@ export const CalendarTable = ({ data }: CalendarTableProps) => {
     EVENT: 'EVENT',
   };
 
+  // handle button
+  const handleDetail = async (
+    id: number,
+    classification: CalendarClassification
+  ) => {
+    await getCalendarDetail(id, classification);
+
+    setShowDetailModal(true);
+  };
+
+  const handleEdit = async (
+    id: number,
+    classification: CalendarClassification
+  ) => {
+    await getCalendarDetail(id, classification);
+
+    setShowEditModal(true);
+  };
+
   const handleDelete = async (id: number) => {
     const confirmDelete = window.confirm('정말 삭제하시겠습니까?');
     if (!confirmDelete) return;
@@ -169,11 +197,19 @@ export const CalendarTable = ({ data }: CalendarTableProps) => {
                   </TableCell>
 
                   <TableCell className={styles.etcTableCell}>
-                    <button className={`${styles.btn} ${styles.detail}`}>
-                      자세히
-                    </button>
                     {row.classification !== CalendarClassification.PRIVATE && (
-                      <button className={`${styles.btn} ${styles.modify}`}>
+                      <button
+                        className={`${styles.btn} ${styles.detail}`}
+                        onClick={() => handleDetail(row.id, row.classification)}
+                      >
+                        자세히
+                      </button>
+                    )}
+                    {row.classification !== CalendarClassification.PRIVATE && (
+                      <button
+                        className={`${styles.btn} ${styles.modify}`}
+                        onClick={() => handleEdit(row.id, row.classification)}
+                      >
                         수정
                       </button>
                     )}
@@ -209,6 +245,36 @@ export const CalendarTable = ({ data }: CalendarTableProps) => {
           }}
         />
       </div>
+
+      {showDetailModal && (
+        <CalendarDetailModal
+          data={detailData}
+          onClose={() => setShowDetailModal(false)}
+        />
+      )}
+
+      {showEditModal && detailData && (
+        <EditCalendarModal
+          open={showEditModal}
+          initialData={{
+            title: detailData.title,
+            content: detailData.content,
+            link: detailData.link,
+            startDate: new Date(detailData.startTime),
+            endDate: new Date(detailData.endTime),
+            classificationTag: detailData.classification,
+            eventTag: detailData.eventTag ?? undefined,
+            jobTag: detailData.jobTag ?? undefined,
+            techTag: detailData.techTag ?? undefined,
+          }}
+          onClose={() => setShowEditModal(false)}
+          onSubmit={async (updatedData) => {
+            // 파싱-true or false
+            await updateCalendar(detailData.id, updatedData);
+            setShowEditModal(false);
+          }}
+        />
+      )}
     </div>
   );
 };

components/admin/calendar/CalendarTablePageNation.tsx

@@ -15,23 +15,31 @@ import {
   CalendarStatus,
   CalendarClassification,
 } from 'constants/calendar/calendarConstants';
+import { NoContent } from 'components/admin/agenda/utils';
+import { CalendarDetailModal } from 'components/admin/calendar/CalendarDetailModal';
+import { EditCalendarModal } from 'components/calendar/EditCalendarModal';
 import PageNation from 'components/Pagination';
 import { useAdminCalendarDelete } from 'hooks/calendar/admin/useAdminCalendarDelete';
+import { useAdminCalendarDetail } from 'hooks/calendar/admin/useAdminCalendarDetail';
 import { useAdminCalendarTotalGet } from 'hooks/calendar/admin/useAdminCalendarTotalGet';
+import { useAdminCalendarUpdate } from 'hooks/calendar/admin/useAdminCalendarUpdate';
 import styles from 'styles/admin/calendar/CalendarTable.module.scss';
-import { NoContent } from '../agenda/utils';
 
 export const CalendarTablePageNation = () => {
   // api hooks call
   const { isLoading, adminCalendarTotalGet } = useAdminCalendarTotalGet();
   const { deleteCalendar } = useAdminCalendarDelete();
+  const { detailData, getCalendarDetail } = useAdminCalendarDetail();
+  const { updateCalendar } = useAdminCalendarUpdate();
 
   // data state
   const [calendarData, setCalendarData] = useState<AdminSchedule[] | null>(
     null
   );
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [totalPage, setTotalPage] = useState<number>(1);
+  const [showDetailModal, setShowDetailModal] = useState<boolean>(false);
+  const [showEditModal, setShowEditModal] = useState(false);
 
   useEffect(() => {
     const fetchCalendarData = async () => {
@@ -56,6 +64,24 @@ export const CalendarTablePageNation = () => {
     }
   };
 
+  const handleDetail = async (
+    id: number,
+    classification: CalendarClassification
+  ) => {
+    await getCalendarDetail(id, classification);
+
+    setShowDetailModal(true);
+  };
+
+  const handleEdit = async (
+    id: number,
+    classification: CalendarClassification
+  ) => {
+    await getCalendarDetail(id, classification);
+
+    setShowEditModal(true);
+  };
+
   // define
   const calendarTableFormat = {
     columns: [
@@ -185,11 +211,19 @@ export const CalendarTablePageNation = () => {
                   </TableCell>
 
                   <TableCell className={styles.etcTableCell}>
-                    <button className={`${styles.btn} ${styles.detail}`}>
-                      자세히
-                    </button>
                     {row.classification !== CalendarClassification.PRIVATE && (
-                      <button className={`${styles.btn} ${styles.modify}`}>
+                      <button
+                        className={`${styles.btn} ${styles.detail}`}
+                        onClick={() => handleDetail(row.id, row.classification)}
+                      >
+                        자세히
+                      </button>
+                    )}
+                    {row.classification !== CalendarClassification.PRIVATE && (
+                      <button
+                        className={`${styles.btn} ${styles.modify}`}
+                        onClick={() => handleEdit(row.id, row.classification)}
+                      >
                         수정
                       </button>
                     )}
@@ -225,6 +259,35 @@ export const CalendarTablePageNation = () => {
           }}
         />
       </div>
+
+      {showDetailModal && (
+        <CalendarDetailModal
+          data={detailData}
+          onClose={() => setShowDetailModal(false)}
+        />
+      )}
+
+      {showEditModal && detailData && (
+        <EditCalendarModal
+          open={showEditModal}
+          initialData={{
+            title: detailData.title,
+            content: detailData.content,
+            link: detailData.link,
+            startDate: new Date(detailData.startTime),
+            endDate: new Date(detailData.endTime),
+            classificationTag: detailData.classification,
+            eventTag: detailData.eventTag ?? undefined,
+            jobTag: detailData.jobTag ?? undefined,
+            techTag: detailData.techTag ?? undefined,
+          }}
+          onClose={() => setShowEditModal(false)}
+          onSubmit={async (updatedData) => {
+            await updateCalendar(detailData.id, updatedData);
+            setShowEditModal(false);
+          }}
+        />
+      )}
     </div>
   );
 };