Fix: 디자인 QA (#136)

* fix: 호스트 input form hashtag 상시 노출 * fix: 모바일 공연 상세 > 공연명 말줄임 처리 * fix: Dialog close button icon 넓이, 높이 수정 * fix: 권한 설정 Dialog > chevron down icon 컬러 변경 * fix: 입장 관리 empty 화면 수정 * fix: 초대하기 버튼 disabled color 수정 * fix: 모바일에서 권한설정 버튼 텍스트 미노출 * fix: 권한 설정 버튼 최소 너비값 제거
Nexters · Jul 30, 2024 · d17aec1 · d17aec1
1 parent cefb493
commit d17aec1
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 15 deletions.
diff --git a/...components/AuthoritySettingDialogContent/components/HostInputForm/HostInputForm.styles.ts b/...components/AuthoritySettingDialogContent/components/HostInputForm/HostInputForm.styles.ts
@@ -117,13 +117,13 @@ const InviteButton = styled(Button)`
   height: 48px;
   padding: 14px;
 
+  &:disabled {
+    color: ${({ theme }) => theme.palette.grey.g40};
+  }
+
   ${mq_lg} {
     width: auto;
     padding: 13px 20px;
-
-    &:disabled {
-      color: ${({ theme }) => theme.palette.grey.g40};
-    }
   }
 `;
 

diff --git a/apps/admin/src/components/ShowDetailLayout/ShowDetailLayout.styles.ts b/apps/admin/src/components/ShowDetailLayout/ShowDetailLayout.styles.ts
@@ -147,7 +147,6 @@ const AuthorSettingButton = styled(Button)`
   background-color: ${({ theme }) => theme.palette.grey.w};
   border: none;
   margin-right: 6px;
-  min-width: 116px;
 
   path {
     stroke: ${({ theme }) => theme.palette.grey.g90};

diff --git a/apps/admin/src/components/ShowDetailLayout/index.tsx b/apps/admin/src/components/ShowDetailLayout/index.tsx
@@ -22,6 +22,7 @@ import AuthoritySettingDialogContent from '../AuthoritySettingDialogContent';
 import { HostListItem, HostType } from '@boolti/api/src/types/host.ts';
 import { atom, useAtom } from 'jotai';
 import { useEffect } from 'react';
+import { useDeviceWidth } from '~/hooks/useDeviceWidth.ts';
 
 const settlementTooltipText = {
   SEND: '내역서 확인 및 정산 요청을 진행해 주세요',
@@ -59,7 +60,8 @@ const ShowDetailLayout = ({ showName, children, onClickMiddleware }: ShowDetailL
   const authoritySettingDialog = useDialog();
   const showId = Number(params!.showId);
   const [, setMyHostInfo] = useAtom(myHostInfoAtom);
-
+  const deviceWidth = useDeviceWidth();
+  const isMobile = deviceWidth < parseInt(theme.breakpoint.mobile, 10);
   const { data: myHostInfoData } = useMyHostInfo(showId);
   const { data: lastSettlementEvent } = useShowLastSettlementEvent(showId);
   const { data: settlementInfo } = useShowSettlementInfo(showId);
@@ -172,7 +174,7 @@ const ShowDetailLayout = ({ showName, children, onClickMiddleware }: ShowDetailL
                     }}
                   >
                     <Setting />
-                    <span style={{ paddingLeft: '8px' }}>권한 설정</span>
+                    {!isMobile && <span style={{ paddingLeft: '8px' }}>권한 설정</span>}
                   </Styled.AuthorSettingButton>
                 )}
               </Styled.ShowNameWrapper>

diff --git a/packages/ui/src/components/Dialog/Dialog.styles.ts b/packages/ui/src/components/Dialog/Dialog.styles.ts
@@ -22,25 +22,35 @@ const DimmedArea = styled.div`
   }
 `;
 
-const Dialog = styled.div<{ isAuto: boolean; width?: string; mobileType: 'bottomSheet' | 'fullPage' | 'centerPopup' }>`
+const Dialog = styled.div<{
+  isAuto: boolean;
+  width?: string;
+  mobileType: 'bottomSheet' | 'fullPage' | 'centerPopup';
+}>`
   background-color: ${({ theme }) => theme.palette.grey.w};
   width: 100%;
   border-radius: 8px;
 
-  ${({ mobileType }) => mobileType === 'bottomSheet' && `
+  ${({ mobileType }) =>
+    mobileType === 'bottomSheet' &&
+    `
     position: fixed;
     bottom: 0;
     left: 0;
   `}
 
-  ${({ mobileType }) => mobileType === 'fullPage' && `
+  ${({ mobileType }) =>
+    mobileType === 'fullPage' &&
+    `
     border-radius: 0;
     position: fixed;
     top: 0;
     left: 0;
   `}
 
-  ${({ mobileType }) => mobileType === 'centerPopup' && `
+  ${({ mobileType }) =>
+    mobileType === 'centerPopup' &&
+    `
     position: fixed;
     left: 50%;
     top: 50%;
@@ -65,12 +75,16 @@ const DialogHeader = styled.div<{ mobileType: 'bottomSheet' | 'fullPage' | 'cent
   display: flex;
   align-items: center;
 
-  ${({ mobileType }) => mobileType === 'bottomSheet' && `
+  ${({ mobileType }) =>
+    mobileType === 'bottomSheet' &&
+    `
     padding: 16px 24px 8px;
     justify-content: space-between;
   `}
 
-  ${({ theme, mobileType }) => mobileType === 'fullPage' && `
+  ${({ theme, mobileType }) =>
+    mobileType === 'fullPage' &&
+    `
     height: 64px;
     justify-content: center;
     border-bottom: 1px solid ${theme.palette.grey.g10};
@@ -106,12 +120,16 @@ const DialogCloseButton = styled.button<{ mobileType: 'bottomSheet' | 'fullPage'
     height: 24px;
   }
 
-  ${({ mobileType }) => mobileType === 'bottomSheet' && `
+  ${({ mobileType }) =>
+    mobileType === 'bottomSheet' &&
+    `
     top: 16px;
     right: 24px;
   `}
 
-  ${({ mobileType }) => mobileType === 'fullPage' && `
+  ${({ mobileType }) =>
+    mobileType === 'fullPage' &&
+    `
     top: 20px;
     left: 20px;
   `}