feat: 공연 삭제 버튼 활성화 조건 변경 및 danger 버튼 적용

Nexters · Jan 11, 2025 · 3f8288a · 3f8288a
1 parent c7f2c49
commit 3f8288a
Show file tree

Hide file tree

Showing 14 changed files with 65 additions and 39 deletions.
diff --git a/apps/admin/src/components/LinkFormDialogContent/LinkFormDialogContent.styles.ts b/apps/admin/src/components/LinkFormDialogContent/LinkFormDialogContent.styles.ts
@@ -54,7 +54,7 @@ const Label = styled.label<LabelProps>`
 
   &::after {
     content: ${({ required }) => (required ? "'*'" : 'none')};
-    color: ${({ theme }) => theme.palette.status.error};
+    color: ${({ theme }) => theme.palette.status.error1};
     ${({ theme }) => theme.typo.b1};
     line-height: 22px;
     margin-left: 2px;

diff --git a/apps/admin/src/components/SettingDialogContent/SettingDialogContent.styles.ts b/apps/admin/src/components/SettingDialogContent/SettingDialogContent.styles.ts
@@ -211,7 +211,7 @@ const Label = styled.label<LabelProps>`
 
   &::after {
     content: ${({ required }) => (required ? "'*'" : 'none')};
-    color: ${({ theme }) => theme.palette.status.error};
+    color: ${({ theme }) => theme.palette.status.error1};
     ${({ theme }) => theme.typo.b1};
     line-height: 22px;
     margin-left: 2px;
@@ -319,7 +319,7 @@ const TextAreaWrapper = styled.div`
 const TextAreaBox = styled.div<TextAreaProps>`
   border: 1px solid
     ${({ theme, hasError }) =>
-      hasError ? `${theme.palette.status.error} !important` : theme.palette.grey.g20};
+    hasError ? `${theme.palette.status.error1} !important` : theme.palette.grey.g20};
   border-radius: 4px;
   background-color: ${({ theme }) => theme.palette.grey.w};
   position: absolute;

diff --git a/apps/admin/src/components/SettingDialogContent/index.tsx b/apps/admin/src/components/SettingDialogContent/index.tsx
@@ -394,7 +394,7 @@ const SettingDialogContent = ({ onDeleteAccount }: SettingDialogContentProps) =>
             </Styled.SettingDescriptionItem>
           </Styled.SettingDescriptionList>
           <Button
-            style={{ background: theme.palette.status.error }}
+            style={{ background: theme.palette.status.error1 }}
             colorTheme="primary"
             size="x-small"
             onClick={() => {

diff --git a/...dmin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts b/...dmin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts
@@ -22,7 +22,7 @@ const ShowInfoFormLabel = styled.span<ShowInfoFormLabelProps>`
   &::after {
     content: '*';
     ${({ theme }) => theme.typo.b3};
-    color: ${({ theme }) => theme.palette.status.error};
+    color: ${({ theme }) => theme.palette.status.error1};
     display: ${({ required }) => (required ? 'inline' : 'none')};
     margin-left: 2px;
   }
@@ -53,7 +53,7 @@ const FieldWrap = styled.div`
 const InputWrapper = styled.div<InputWrapperProps>`
   ${({ theme }) => theme.typo.b3};
   border: 1px solid
-    ${({ theme, isError }) => (isError ? theme.palette.status.error : theme.palette.grey.g20)};
+    ${({ theme, isError }) => (isError ? theme.palette.status.error1 : theme.palette.grey.g20)};
   border-radius: 4px;
   background-color: ${({ theme }) => theme.palette.grey.w};
   padding: 8px 36px 8px 12px;
@@ -67,7 +67,7 @@ const InputWrapper = styled.div<InputWrapperProps>`
 
   &:focus-within {
     border-color: ${({ theme, isError }) =>
-      isError ? theme.palette.status.error : theme.palette.grey.g70};
+    isError ? theme.palette.status.error1 : theme.palette.grey.g70};
   }
 `;
 
@@ -213,7 +213,7 @@ const ButtonWrap = styled.div`
 
 const ErrorMessage = styled.span`
   ${({ theme }) => theme.typo.b1};
-  color: ${({ theme }) => theme.palette.status.error};
+  color: ${({ theme }) => theme.palette.status.error1};
 `;
 
 const DraggableShowCastInfoMemberRow = styled.div`

diff --git a/apps/admin/src/components/ShowInfoFormContent/ShowInfoFormContent.styles.ts b/apps/admin/src/components/ShowInfoFormContent/ShowInfoFormContent.styles.ts
@@ -104,7 +104,7 @@ const ShowInfoFormLabel = styled.label<ShowInfoFormLabelProps>`
   &::after {
     content: '*';
     ${({ theme }) => theme.typo.b3};
-    color: ${({ theme }) => theme.palette.status.error};
+    color: ${({ theme }) => theme.palette.status.error1};
     display: ${({ required }) => (required ? 'inline' : 'none')};
     margin-left: 2px;
   }
@@ -137,7 +137,7 @@ const ShowInfoFormButtonContainer = styled.div`
   gap: 8px;
 `;
 
-const ShowInfoFormButton = styled(Button)<ShowInfoFormButtonProps>`
+const ShowInfoFormButton = styled(Button) <ShowInfoFormButtonProps>`
   width: ${({ width }) => width};
 `;
 
@@ -305,7 +305,7 @@ const TextArea = styled.textarea<TextAreaProps>`
   padding: 12px;
   border: 1px solid
     ${({ theme, hasError }) =>
-      hasError ? `${theme.palette.status.error} !important` : theme.palette.grey.g20};
+    hasError ? `${theme.palette.status.error1} !important` : theme.palette.grey.g20};
   border-radius: 4px;
   background-color: ${({ theme }) => theme.palette.grey.w};
   color: ${({ theme }) => theme.palette.grey.g90};
@@ -335,7 +335,7 @@ const TextArea = styled.textarea<TextAreaProps>`
 const TextAreaErrorMessage = styled.p`
   margin-top: 4px;
   ${({ theme }) => theme.typo.b1};
-  color: ${({ theme }) => theme.palette.status.error};
+  color: ${({ theme }) => theme.palette.status.error1};
 `;
 
 const TicketGroup = styled.div`
@@ -366,7 +366,7 @@ const TicketGroupTitle = styled.h3<TicketGroupTitleProps>`
   &::after {
     content: '*';
     ${({ theme }) => theme.typo.b1};
-    color: ${({ theme }) => theme.palette.status.error};
+    color: ${({ theme }) => theme.palette.status.error1};
     display: ${({ required }) => (required ? 'inline' : 'none')};
     margin-left: 2px;
   }
@@ -562,7 +562,7 @@ const MobileTicketAction = styled.div<MobileTicketActionProps>`
         width: 24px;
         height: 24px;
         stroke: ${({ theme, disabled }) =>
-          disabled ? theme.palette.grey.g40 : theme.palette.grey.g90};
+    disabled ? theme.palette.grey.g40 : theme.palette.grey.g90};
       }
     }
   }

diff --git a/...in/src/components/ShowSettingDialogContent/components/HostListItem/HostListItem.styles.ts b/...in/src/components/ShowSettingDialogContent/components/HostListItem/HostListItem.styles.ts
@@ -81,7 +81,7 @@ const DropdownListItem = styled.li<DropdownListItemProps>`
   padding: 7px 12px;
   ${({ theme }) => theme.typo.b1};
   color: ${({ isDelete, theme }) =>
-    isDelete ? theme.palette.status.error : theme.palette.grey.g70};
+    isDelete ? theme.palette.status.error1 : theme.palette.grey.g70};
   background-color: ${({ theme }) => theme.palette.grey.w};
   cursor: pointer;
   margin-top: 0;

diff --git a/apps/admin/src/components/ShowSettingDialogContent/index.tsx b/apps/admin/src/components/ShowSettingDialogContent/index.tsx
@@ -1,5 +1,5 @@
 import Styled from './ShowSettingDialogContent.styles';
-import { useHostList } from '@boolti/api';
+import { useHostList, useInvitationTicketList, useSalesTicketList } from '@boolti/api';
 import HostInputForm from './components/HostInputForm';
 import { Button } from '@boolti/ui';
 import { ChevronRightIcon } from '@boolti/icon';
@@ -19,6 +19,13 @@ const ShowSettingDialogContent = ({
   onClickDeleteButton,
 }: ShowSettingDialogContentProps) => {
   const { data: hosts } = useHostList(showId);
+  const { data: salesTicketList } = useSalesTicketList(showId);
+  const { data: invitationTicketList } = useInvitationTicketList(showId);
+
+  const hasSoldSalesTicketAtLeastOnce = salesTicketList?.some(({ soldAtLeastOnce }) => soldAtLeastOnce)
+  const hasSoldInvitationTicket = invitationTicketList?.some(({ totalForSale }) => totalForSale > 0)
+  const isShowDeletable = !hasSoldSalesTicketAtLeastOnce && !hasSoldInvitationTicket
+
   const [firstHost, ...restHosts] = hosts ?? [];
 
   const [myHostInfo] = useAtom(myHostInfoAtom);
@@ -65,8 +72,9 @@ const ShowSettingDialogContent = ({
             <Styled.DeleteButtonContainer>
               <Button
                 type="button"
-                colorTheme="primary"
+                colorTheme="danger"
                 size="x-small"
+                disabled={!isShowDeletable}
                 onClick={onClickDeleteButton}
               >
                 삭제하기

diff --git a/apps/admin/src/pages/ShowAddPage/ShowAddPage.styles.ts b/apps/admin/src/pages/ShowAddPage/ShowAddPage.styles.ts
@@ -162,7 +162,7 @@ const ShowAddFormLabel = styled.label<ShowAddFormLabelProps>`
   &::after {
     content: '*';
     ${({ theme }) => theme.typo.b3};
-    color: ${({ theme }) => theme.palette.status.error};
+    color: ${({ theme }) => theme.palette.status.error1};
     display: ${({ required }) => (required ? 'inline' : 'none')};
     margin-left: 2px;
   }
@@ -183,7 +183,7 @@ const ShowAddFormButtonContainer = styled.div`
   gap: 8px;
 `;
 
-const ShowAddFormButton = styled(Button)<ShowAddFormButtonProps>`
+const ShowAddFormButton = styled(Button) <ShowAddFormButtonProps>`
   ${({ variant }) => {
     switch (variant) {
       case 'next': {
@@ -207,24 +207,24 @@ const ShowAddFormButton = styled(Button)<ShowAddFormButtonProps>`
 
   ${mq_lg} {
     ${({ variant }) => {
-      switch (variant) {
-        case 'next': {
-          return `
+    switch (variant) {
+      case 'next': {
+        return `
           width: calc(100% - 152px);
         `;
-        }
-        case 'prev': {
-          return `
+      }
+      case 'prev': {
+        return `
           width: 152px;
         `;
-        }
-        default: {
-          return `
+      }
+      default: {
+        return `
           width: 100%;
         `;
-        }
       }
-    }};
+    }
+  }};
   }
 `;
 
@@ -405,7 +405,7 @@ const Term = styled.div`
   align-items: center;
 `;
 
-const TermLabel = styled(Checkbox.Label)<{ main?: boolean }>`
+const TermLabel = styled(Checkbox.Label) <{ main?: boolean }>`
   display: flex;
   align-items: center;
   gap: 8px;

diff --git a/apps/super-admin/src/components/EntranceTable/EntranceTable.styles.ts b/apps/super-admin/src/components/EntranceTable/EntranceTable.styles.ts
@@ -66,7 +66,7 @@ const TableItem = styled.div<TableItemProps>`
 
 const EntranceStateText = styled.p<EntranceStateTextProps>`
   color: ${({ complete, theme }) =>
-    complete ? theme.palette.status.success : theme.palette.status.error};
+    complete ? theme.palette.status.success : theme.palette.status.error1};
 `;
 
 const Empty = styled.div`

diff --git a/apps/super-admin/src/components/PaymentTable/PaymentTable.styles.ts b/apps/super-admin/src/components/PaymentTable/PaymentTable.styles.ts
@@ -66,7 +66,7 @@ const TableItem = styled.div<TableItemProps>`
 
 const EntranceStateText = styled.p<EntranceStateTextProps>`
   color: ${({ complete, theme }) =>
-    complete ? theme.palette.status.success : theme.palette.status.error};
+    complete ? theme.palette.status.success : theme.palette.status.error1};
 `;
 
 const Empty = styled.div`

diff --git a/apps/super-admin/src/components/StatusBadge/StatusBadge.tsx b/apps/super-admin/src/components/StatusBadge/StatusBadge.tsx
@@ -35,7 +35,7 @@ const StatusBadge = ({ status }: { status: SuperAdminShowStatus | 'ALL' }) => {
         return {
           label: '정산 중',
           color: theme.palette.red.sub,
-          fontColor: theme.palette.status.error,
+          fontColor: theme.palette.status.error1,
         };
       case 'SETTLEMENT_DONE':
         return {

diff --git a/packages/ui/src/components/Button/Button.styles.ts b/packages/ui/src/components/Button/Button.styles.ts
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-type ColorTheme = 'primary' | 'netural' | 'line' | 'secondary';
+type ColorTheme = 'primary' | 'netural' | 'line' | 'secondary' | 'danger';
 type Size = 'bold' | 'medium' | 'regular' | 'small' | 'x-small';
 
 export interface ButtonProps {
@@ -130,6 +130,22 @@ const Container = styled.button<ButtonProps>`
             background-color: ${theme.palette.grey.g00};
           }
         `;
+      case 'danger':
+        return `
+          color: ${theme.palette.grey.w};
+          border: 0;
+          background-color: ${theme.palette.status.error1};
+          &:hover:not(:disabled) {
+            background-color: ${theme.palette.status.error2};
+          }
+          &:active:not(:disabled) {
+            background-color: ${theme.palette.status.error3};
+          }
+          &:disabled {
+            color: ${theme.palette.grey.g40};
+            background-color: ${theme.palette.grey.g20};
+          }
+        `
     }
   }}
 `;

diff --git a/packages/ui/src/components/TextField/TextField.styles.ts b/packages/ui/src/components/TextField/TextField.styles.ts
@@ -47,7 +47,7 @@ const InputLabel = styled.label<{ hasError?: boolean; disabled?: boolean; hasVal
   padding: 12px 13px;
   color: ${({ theme }) => theme.palette.grey.g90};
   border: 1px solid
-    ${({ hasError, theme }) => (hasError ? theme.palette.status.error : theme.palette.grey.g20)};
+    ${({ hasError, theme }) => (hasError ? theme.palette.status.error1 : theme.palette.grey.g20)};
   background: ${({ theme }) => theme.palette.grey.w};
   ${({ theme }) => theme.typo.b3};
 
@@ -72,7 +72,7 @@ const Input = styled.input<{ hasError?: boolean }>`
   color: ${({ theme }) => theme.palette.grey.g90};
   border: 1px solid
     ${({ hasError, theme }) =>
-      hasError ? `${theme.palette.status.error} !important` : theme.palette.grey.g20};
+    hasError ? `${theme.palette.status.error1} !important` : theme.palette.grey.g20};
   background: ${({ theme }) => theme.palette.grey.w};
   ${({ theme }) => theme.typo.b3};
   &:placeholder-shown {
@@ -136,7 +136,7 @@ const ButtonContainer = styled.div`
 const ErrorMessage = styled.span`
   margin-top: 4px;
   ${({ theme }) => theme.typo.b1};
-  color: ${({ theme }) => theme.palette.status.error};
+  color: ${({ theme }) => theme.palette.status.error1};
 `;
 
 export default {

diff --git a/packages/ui/src/systems/palette.ts b/packages/ui/src/systems/palette.ts
@@ -6,7 +6,9 @@ const palette = {
     o3: '#C93E02',
   },
   status: {
-    error: '#FF4D4F',
+    error1: '#FF4D4F',
+    error2: '#EC2C2E',
+    error3: '#DE0609',
     warning: '#FAAD14',
     success: '#52C41A',
     link: '#1890FF',