[Hotfix] 텍스트 버그 수정

frontend/src/components/IconButton.tsx

@@ -16,6 +16,8 @@ const IconButton = ({ icon, ...rest }: IProps) => {
 };
 
 const Button = styled.button`
+  display: flex;
+  align-items: center;
   background-color: transparent;
   cursor: pointer;
 `;

frontend/src/components/search/AutoCompletedList.tsx

@@ -79,6 +79,7 @@ const AutoCompleted = styled.li<{ hovered: boolean }>`
 
 const Title = styled.div`
   ${({ theme }) => theme.TYPO.body1}
+  line-height: 1.1em;
 `;
 
 const Author = styled.div`

frontend/src/components/search/RecentKeywordsList.tsx

@@ -1,5 +1,6 @@
 import { IconButton } from '@/components';
 import { ClockIcon, XIcon } from '@/icons';
+import { Ellipsis } from '@/style/styleUtils';
 import { setLocalStorage } from '@/utils/storage';
 import { isEmpty } from 'lodash-es';
 import { Dispatch, SetStateAction, useEffect } from 'react';
@@ -42,7 +43,7 @@ const RecentKeywordsList = ({
             onMouseDown={() => handleMouseDown(keyword)}
           >
             <ClockIcon />
-            {keyword}
+            <KeywordText>{keyword}</KeywordText>
             <DeleteButton
               icon={<XIcon />}
               onMouseDown={(e) => handleRecentKeywordRemove(e, keyword)}
@@ -71,6 +72,11 @@ const Keyword = styled.li<{ hovered: boolean }>`
   background-color: ${({ theme, hovered }) => (hovered ? theme.COLOR.gray1 : 'auto')};
 `;
 
+const KeywordText = styled(Ellipsis)`
+  width: 100%;
+  display: block;
+`;
+
 const NoResult = styled.div`
   padding-top: 25px;
   text-align: center;

frontend/src/icons/InfoIcon.tsx

@@ -1,9 +1,13 @@
-const InfoIcon = () => {
+interface IProps {
+  color: string;
+}
+
+const InfoIcon = ({ color }: IProps) => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20" height="20">
       <path
-        fill="#e4e4e4"
-        stroke="#e4e4e4"
+        fill={color}
+        stroke={color}
         d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-144c-17.7 0-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32s-14.3 32-32 32z"
       />
     </svg>

frontend/src/pages/Main/components/KeywordRanking.tsx

@@ -1,6 +1,7 @@
 import { IconButton } from '@/components';
 import { DropdownIcon, DropdownReverseIcon } from '@/icons';
 import { useKeywordRankingQuery } from '@/queries/queries';
+import { Ellipsis } from '@/style/styleUtils';
 import { createSearchQuery } from '@/utils/createQueryString';
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -19,7 +20,7 @@ const KeywordRanking = () => {
     <RankingContainer>
       <RankingBar>
         <HeaderContainer>
-          <span>인기 검색어</span>
+          <Title>인기 검색어</Title>
           <HeaderDivideLine />
           <RankingContent onClick={handleRankingClick}>
             {!isLoading && rankingData?.length ? <RankingSlide rankingData={rankingData} /> : '데이터가 없습니다.'}
@@ -71,29 +72,30 @@ const RankingBar = styled.div`
   z-index: 10;
 `;
 
-const RankingContent = styled.div`
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  margin: 0 10px;
-  height: 25px;
-  cursor: pointer;
-`;
-
 const HeaderContainer = styled.div`
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  position: relative;
-  height: 23px;
   width: 100%;
+  height: 23px;
   ${({ theme }) => theme.TYPO.body_h}
 `;
 
+const Title = styled.span`
+  width: 100px;
+`;
+
 const HeaderDivideLine = styled.hr`
   width: 1px;
   height: 16px;
-  margin: 0 10px 0 38px;
+`;
+
+const RankingContent = styled.div`
+  display: flex;
+  align-items: center;
+  margin: 0 10px;
+  width: 320px;
+  height: 25px;
+  cursor: pointer;
 `;
 
 const DivideLine = styled.hr`
@@ -110,26 +112,29 @@ const RankingKeywordContainer = styled.ul`
   margin-bottom: 10px;
 `;
 
+const KeywordIndex = styled.span`
+  width: 20px;
+`;
+
+const Keyword = styled(Ellipsis)`
+  ${({ theme }) => theme.TYPO.body1};
+  display: block;
+  width: 100%;
+`;
+
 const KeywordContainer = styled.li`
   display: flex;
+  width: 100%;
   gap: 15px;
   cursor: pointer;
   :hover {
-    span:last-of-type {
+    ${Keyword} {
       ${({ theme }) => theme.TYPO.body_h};
       text-decoration: underline;
     }
   }
 `;
 
-const KeywordIndex = styled.span`
-  width: 20px;
-`;
-
-const Keyword = styled.span`
-  ${({ theme }) => theme.TYPO.body1};
-`;
-
 const Dimmer = styled.div`
   position: fixed;
   top: 0;

frontend/src/pages/Main/components/RankingSlide.tsx

@@ -1,4 +1,5 @@
 import { useInterval } from '@/hooks';
+import { Ellipsis } from '@/style/styleUtils';
 import { useState } from 'react';
 import styled from 'styled-components';
 
@@ -20,7 +21,6 @@ interface ISlideProps {
 const SLIDE_DELAY = 2500;
 const TRANSITION_TIME = 1500;
 const TRANSITION_SETTING = `transform linear ${TRANSITION_TIME}ms`;
-const MAX_KEYWORD_LENGTH = 20;
 
 const RankingSlide = ({ rankingData }: IRankingSlideProps) => {
   const [keywordIndex, setKeywordIndex] = useState(0);
@@ -53,12 +53,8 @@ const RankingSlide = ({ rankingData }: IRankingSlideProps) => {
       <Slide keywordIndex={keywordIndex} transition={transition} dataSize={dataSize}>
         {newRankingData.map((data, index) => (
           <SlideItem key={`${index}${data.keyword}`}>
-            <span>{index === dataSize - 1 ? 1 : index + 1}</span>
-            <span>
-              {data.keyword.length > MAX_KEYWORD_LENGTH
-                ? `${data.keyword.slice(0, MAX_KEYWORD_LENGTH)}...`
-                : data.keyword}
-            </span>
+            <KeywordIndex>{index === dataSize - 1 ? 1 : index + 1}</KeywordIndex>
+            <Keyword>{data.keyword}</Keyword>
           </SlideItem>
         ))}
       </Slide>
@@ -70,13 +66,15 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
+  width: 100%;
   height: 25px;
   overflow-y: hidden;
 `;
 
 const Slide = styled.ul<ISlideProps>`
   display: flex;
   flex-direction: column;
+  width: 100%;
   transition: ${(props) => props.transition};
   transform: ${(props) => `translateY(${(-100 / props.dataSize) * props.keywordIndex}%)`};
 `;
@@ -93,4 +91,14 @@ const SlideItem = styled.li`
   }
 `;
 
+const KeywordIndex = styled.span`
+  width: 20px;
+`;
+
+const Keyword = styled(Ellipsis)`
+  ${({ theme }) => theme.TYPO.body1};
+  display: block;
+  width: 100%;
+`;
+
 export default RankingSlide;

frontend/src/pages/PaperDetail/components/InfoTooltip.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import styled from 'styled-components';
-import IconButton from '../../../components/IconButton';
-import InfoIcon from '../../../icons/InfoIcon';
-import { getSessionStorage, setSessionStorage } from '../../../utils/storage';
+import IconButton from '@/components/IconButton';
+import InfoIcon from '@/icons/InfoIcon';
+import { getSessionStorage, setSessionStorage } from '@/utils/storage';
 
 interface InfoContainerProps {
   isOpened: boolean;
@@ -26,7 +26,7 @@ const InfoTooltip = () => {
   return (
     <Container>
       <IconButtonWrapper>
-        <IconButton icon={<InfoIcon />} onClick={handleInfoButtonClick} aria-label="정보" />
+        <IconButton icon={<InfoIcon color="#e4e4e4" />} onClick={handleInfoButtonClick} aria-label="정보" />
       </IconButtonWrapper>
       <InfoContainer isOpened={isOpened}>
         <Title>그래프 사용법</Title>

frontend/src/pages/PaperDetail/components/PaperInfo.tsx

@@ -101,6 +101,8 @@ const InfoItem = styled.div`
   }
   a {
     ${({ theme }) => theme.TYPO.body2};
+    word-wrap: break-word;
+    line-height: 1.1em;
     :hover {
       text-decoration: underline;
     }

frontend/src/pages/SearchList/components/Paper.tsx

@@ -49,6 +49,7 @@ const Container = styled.div`
 const Title = styled.div`
   color: ${({ theme }) => theme.COLOR.black};
   ${({ theme }) => theme.TYPO.title}
+  line-height: 1.1em;
   cursor: pointer;
   :hover {
     text-decoration: underline;

frontend/src/pages/SearchList/components/SearchResults.tsx

@@ -1,7 +1,10 @@
 import { IGetSearch } from '@/api/api';
-import { Pagination } from '@/components';
+import { IconButton, Pagination } from '@/components';
+import InfoIcon from '@/icons/InfoIcon';
 import { useSearchQuery } from '@/queries/queries';
+import theme from '@/style/theme';
 import { createDetailQuery } from '@/utils/createQueryString';
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import Paper from './Paper';
@@ -12,13 +15,28 @@ interface SearchResultsProps {
 }
 
 const SearchResults = ({ params, changePage }: SearchResultsProps) => {
+  const [isTooltipOpened, setIsTooltipOpened] = useState(false);
   const keyword = params.keyword || '';
   const page = Number(params.page);
   const { data } = useSearchQuery(params);
 
+  const handleMouseOver = () => {
+    setIsTooltipOpened(true);
+  };
+
+  const handleMouseOut = () => {
+    setIsTooltipOpened(false);
+  };
+
   return data && data.papers.length > 0 ? (
     <>
-      <H1>Articles ({data.pageInfo.totalItems.toLocaleString() || 0})</H1>
+      <SectionHeader>
+        <H1>Articles ({data.pageInfo.totalItems.toLocaleString() || 0})</H1>
+        <IconButtonWrapper onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
+          <IconButton icon={<InfoIcon color={theme.COLOR.gray3} />} aria-label="정보" />
+        </IconButtonWrapper>
+        {isTooltipOpened && <InfoTooltip>논문의 정보가 정확하지 않거나 누락되어 있을 수 있습니다.</InfoTooltip>}
+      </SectionHeader>
       <Hr />
       <Section>
         <Papers>
@@ -36,12 +54,34 @@ const SearchResults = ({ params, changePage }: SearchResultsProps) => {
   );
 };
 
+const SectionHeader = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
 const H1 = styled.h1`
   color: ${({ theme }) => theme.COLOR.gray4};
-  margin: 16px 30px;
+  margin: 16px 15px 16px 30px;
   ${({ theme }) => theme.TYPO.H5}
 `;
 
+const IconButtonWrapper = styled.div`
+  opacity: 0.5;
+  cursor: pointer;
+  z-index: 10;
+  :hover {
+    opacity: 1;
+  }
+`;
+
+const InfoTooltip = styled.span`
+  ${({ theme }) => theme.TYPO.body1};
+  font-weight: 700;
+  padding: 5px 8px;
+  margin-left: 10px;
+  color: ${({ theme }) => theme.COLOR.gray4};
+`;
+
 const Hr = styled.hr`
   border-top: 1px solid ${({ theme }) => theme.COLOR.gray2};
   margin: 0;

frontend/src/style/styleUtils.ts

@@ -8,6 +8,7 @@ export const Ellipsis = styled.span`
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   word-break: keep-all;
+  line-height: 1.1em;
 `;
 
 export const Emphasize = styled.span`