fix: 헤더의 다락방 이름이 짧게 나오는 것을 수정

woowacourse-teams · Aug 22, 2024 · d8bb61f · d8bb61f
1 parent 15403c8
commit d8bb61f
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/frontend/src/components/DarakbangNameWrapper/DarakbangNameWrapper.style.ts b/frontend/src/components/DarakbangNameWrapper/DarakbangNameWrapper.style.ts
@@ -2,8 +2,10 @@ import { SerializedStyles, css } from '@emotion/react';
 
 export const name = ({ font }: { font: string | SerializedStyles }) => css`
   ${font}
+
+  max-width: 40vw;
   overflow-x: hidden;
-  max-width: 30%;
   text-overflow: ellipsis;
+
   white-space: nowrap;
 `;
diff --git a/frontend/src/pages/DarakbangLandingPage/DarakbangLandingPage.tsx b/frontend/src/pages/DarakbangLandingPage/DarakbangLandingPage.tsx
@@ -6,6 +6,8 @@ import HighlightSpan from '@_components/HighlightSpan/HighlightSpan';
 import useMyInfo from '@_hooks/queries/useMyInfo';
 import { useNavigate } from 'react-router-dom';
 import useNowDarakbangName from '@_hooks/queries/useNowDarakbangNameById';
+import { theme } from '@_common/theme/theme.style';
+import { common } from '@_common/common.style';
 
 export default function DarakbangLandingPage() {
   const navigate = useNavigate();
@@ -16,7 +18,9 @@ export default function DarakbangLandingPage() {
     <CompleteLayout>
       <CompleteLayout.Header>
         <CompleteLayout.Header.Center>
-          <DarakbangNameWrapper>{darakbangName}</DarakbangNameWrapper>
+          <span css={[[theme.typography.h5, common.nonScroll]]}>
+            <DarakbangNameWrapper>{darakbangName}</DarakbangNameWrapper>
+          </span>
         </CompleteLayout.Header.Center>
       </CompleteLayout.Header>
       <CompleteLayout.ContentContainer>