From 2231a40258051f104fcba547bd380aa6f9b1ba4e Mon Sep 17 00:00:00 2001
From: JunSeong <gentlmanjun@naver.com>
Date: Tue, 22 Oct 2024 20:14:10 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20FEAT:=20=EB=B0=9C=ED=91=9C=20=EC=B7=A8?=
 =?UTF-8?q?=EC=86=8C=20=EC=8B=9C=20=EC=9D=BC=EC=A0=95=20=EB=B3=80=EA=B2=BD?=
 =?UTF-8?q?=EC=9D=B4=20=EB=B6=88=EA=B0=80=EB=8A=A5=20=ED=95=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95=20#1691?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DetailTable/DetailTableBodyItem.tsx       |  7 +++++-
 .../DetailTable/DetailTableBodyItemTopTr.tsx  | 13 +++++++++--
 .../EditStatusModal/EditStatusModal.tsx       | 23 ++++++++++++++++++-
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/frontend/src/Presentation/components/Details/DetailTable/DetailTableBodyItem.tsx b/frontend/src/Presentation/components/Details/DetailTable/DetailTableBodyItem.tsx
index ae29a83fb..de8f90dd4 100644
--- 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
index 045ea0a42..c7cbce8d4 100644
--- 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
index 37c44b8d4..4917603fb 100644
--- 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;