[FE] FEAT: 발표 취소 시 일정 변경이 불가능 하도록 수정 #1691

innovationacademy-kr · Oct 22, 2024 · 2231a40 · 2231a40
1 parent 86857c7
commit 2231a40
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 4 deletions.
diff --git a/frontend/src/Presentation/components/Details/DetailTable/DetailTableBodyItem.tsx b/frontend/src/Presentation/components/Details/DetailTable/DetailTableBodyItem.tsx
@@ -12,6 +12,7 @@ import DetailTableBodyItemBottomTr from "@/Presentation/components/Details/Detai
 import DetailTableBodyItemMiddleTr from "@/Presentation/components/Details/DetailTable/DetailTableBodyItemMiddleTr";
 import DetailTableBodyItemTopTr from "@/Presentation/components/Details/DetailTable/DetailTableBodyItemTopTr";
 import { IPresentationScheduleDetailInfo } from "@/Presentation/types/dto/presentation.dto";
+import { PresentationStatusType } from "@/Presentation/types/enum/presentation.type.enum";
 
 export interface IItem {
   item: IPresentationScheduleDetailInfo;
@@ -56,7 +57,11 @@ const DetailTableBodyItem = ({
   }, [clickedItem]);
 
   const handleItemClick = (item: IPresentationScheduleDetailInfo) => {
-    if (isAdmin && itemInfo.itemStatus !== itemType.NO_EVENT_PAST) {
+    if (
+      isAdmin &&
+      itemInfo.itemStatus !== itemType.NO_EVENT_PAST &&
+      itemInfo.item.presentationStatus !== PresentationStatusType.CANCEL
+    ) {
       setCurrentPresentation({
         id: item.id,
         dateTime: item.dateTime,

diff --git a/frontend/src/Presentation/components/Details/DetailTable/DetailTableBodyItemTopTr.tsx b/frontend/src/Presentation/components/Details/DetailTable/DetailTableBodyItemTopTr.tsx
@@ -10,6 +10,7 @@ import {
   PresentationStatusTypeLabelMap,
 } from "@/Presentation/assets/data/maps";
 import { IPresentationScheduleDetailInfo } from "@/Presentation/types/dto/presentation.dto";
+import { PresentationStatusType } from "@/Presentation/types/enum/presentation.type.enum";
 
 const noEventPhraseDesktop = {
   noEventPast: "수요지식회가 열리지 않았습니다",
@@ -82,9 +83,12 @@ const DetailTableBodyItemTopTr = ({
         isAdmin={isAdmin}
         itemStatus={itemInfo.itemStatus}
         id={isItemOpen ? "selected" : ""}
+        presentationStatus={itemInfo.item.presentationStatus}
         onClick={() => {
           ((isAdmin && itemInfo.itemStatus !== itemType.NO_EVENT_PAST) ||
             (!isAdmin && !itemInfo.itemStatus)) &&
+            itemInfo.item.presentationStatus !==
+              PresentationStatusType.CANCEL &&
             handleItemClick(itemInfo.item);
         }}
         open={isItemOpen}
@@ -162,6 +166,7 @@ const TopTrStyled = styled.tr<{
   isAdmin: boolean;
   itemStatus: itemType;
   open?: boolean;
+  presentationStatus: PresentationStatusType | null;
 }>`
   width: 100%;
   text-align: center;
@@ -208,12 +213,16 @@ const TopTrStyled = styled.tr<{
     }
     &:hover {
       cursor: ${(props) => {
-        if (props.isAdmin)
+        if (props.presentationStatus === PresentationStatusType.CANCEL)
+          return "";
+        else if (props.isAdmin)
           return props.itemStatus === itemType.NO_EVENT_PAST ? "" : "pointer";
         else return props.itemStatus ? "" : "pointer";
       }};
       background-color: ${(props) => {
-        if (props.isAdmin)
+        if (props.presentationStatus === PresentationStatusType.CANCEL)
+          return "";
+        else if (props.isAdmin)
           return props.itemStatus === itemType.NO_EVENT_PAST ? "" : "#91B5FB";
         else return props.itemStatus ? "" : "#91B5FB";
       }};

diff --git a/frontend/src/Presentation/components/Modals/EditStatusModal/EditStatusModal.tsx b/frontend/src/Presentation/components/Modals/EditStatusModal/EditStatusModal.tsx
@@ -212,7 +212,14 @@ const EditStatusModal = ({ list, closeModal }: EditStatusModalProps) => {
               <ContentSectionStyled>
                 <ContentItemSectionStyled>
                   <ContentItemWrapperStyled isVisible={true}>
-                    <ContentItemTitleStyled>발표 상태</ContentItemTitleStyled>
+                    <CntentItemTitleStyled>
+                      <ContentItemTitleStyled>발표 상태</ContentItemTitleStyled>
+                      {presentationStatus === PresentationStatusType.CANCEL && (
+                        <ContentItemCancleAlertStyled>
+                          발표를 취소하면 되돌릴 수 없습니다
+                        </ContentItemCancleAlertStyled>
+                      )}
+                    </CntentItemTitleStyled>
                     <Dropdown {...statusDropdownProps} />
                   </ContentItemWrapperStyled>
                   <ContentItemWrapperStyled isVisible={true}>
@@ -312,11 +319,25 @@ const ContentItemWrapperStyled = styled.div<{
   margin-bottom: 25px;
 `;
 
+const CntentItemTitleStyled = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
 const ContentItemTitleStyled = styled.h3`
+  display: inline;
   font-size: 1.125rem;
   margin-bottom: 8px;
 `;
 
+const ContentItemCancleAlertStyled = styled.span`
+  font-size: 12px;
+  color: var(--expired-color);
+  padding-right: 10px;
+`;
+
 const ButtonWrapperStyled = styled.div`
   display: flex;
   flex-direction: column;