fix: 검색어가 너무 길면 줄바꿈 안 되는 문제 (#290)

* fix: 검색어에 줄바꿈 css 추가 * feat: StyledNoResultDescription에도 줄바꿈 추가 * fix: import에 prettier 적용 * refactor: 줄바꿈 방식 inline에서 inline-block으로 변경
yourssu · Aug 31, 2024 · 91e8da6 · 91e8da6
1 parent 59dacec
commit 91e8da6
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/search/pages/NoResult/NoResult.style.ts b/src/search/pages/NoResult/NoResult.style.ts
@@ -11,12 +11,23 @@ export const StyledContainer = styled.div`
 
 export const StyledNoResultKeyword = styled.span`
   ${({ theme }) => theme.typo.title2}
+  word-break: break-all;
+  overflow-wrap: break-word;
   color: ${({ theme }) => theme.color.textPointed};
 `;
 
 export const StyledNoResultDescription = styled.p`
   ${({ theme }) => theme.typo.subtitle2}
   color: ${({ theme }) => theme.color.textPrimary};
+
+  /* PC & Android/subtitle24 */
+  font-family: 'Spoqa Han Sans Neo';
+  font-size: 1.5rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 130%; /* 1.95rem */
+
+  display: inline-block;
 `;
 
 export const StyledModifySection = styled.div`

diff --git a/src/search/pages/NoResult/NoResult.tsx b/src/search/pages/NoResult/NoResult.tsx
@@ -51,8 +51,10 @@ export const NoResult = () => {
   return (
     <StyledContainer>
       <FlexContainer>
-        <StyledNoResultKeyword>'{query}'</StyledNoResultKeyword>
-        <StyledNoResultDescription>에 대한 검색결과가 없습니다.</StyledNoResultDescription>
+        <div>
+          <StyledNoResultKeyword>'{query}'</StyledNoResultKeyword>
+          <StyledNoResultDescription>에 대한 검색결과가 없습니다.</StyledNoResultDescription>
+        </div>
       </FlexContainer>
       <StyledModifySection>
         <StyledModifyDescription>