4-3 [FE] [메인 - 인기 검색어] 1~10위까지의 인기검색어 데이터를 1초간격으로 슬라이딩 방식으로 보여준다. #23
Conversation
| import styled from 'styled-components'; | ||
| import { SLIDE_DELAY, TRANSITION_SETTING, TRANSITION_TIME } from '../../../constants/ranking'; |
There was a problem hiding this comment.
공통으로 계속 쓰이는 constanst 가 아니고 특정 컴포넌트 만 사용되면 컴포넌트 레벨로 가져가도 될 것 같네요.
이 컴포넌트는 components 레벨로 옮기는 것이 좋을 것 같아요.
| {newRankingData.map((data, index) => ( | ||
| <SlideItem key={`${index}${data.keyword}`}> | ||
| <span>{index === dataSize - 1 ? 1 : index + 1}</span> | ||
| <span>{data.keyword}</span> | ||
| </SlideItem> |
There was a problem hiding this comment.
만약 API 호출이 안되거나, 오류가 있을 때 사용자에게 어떻게 보여주나요?
There was a problem hiding this comment.
상위 컴포넌트 (KeywordRanking)에서 API를 호출하는데, 우선 오류가 있을 시 RankingSlide 컴포넌트를 보여주지 않고 에러 메시지를 보여주도록 처리해두었습니다. 더 자세한 예외처리로 보완할 예정입니다.
| const RankingSlide = ({ rankingData }: IRankingSlideProps) => { | ||
| const [keywordIndex, setKeywordIndex] = useState(0); | ||
| const [transition, setTransition] = useState(''); | ||
| const newRankingData = [...rankingData.slice(0, 10), rankingData[0]]; |
There was a problem hiding this comment.
와우... 아름답네요.
api에서 제공되는 rankingData가 10개 이상일 수도 있음이 고려된 것 같은데, 너무 좋네요.
There was a problem hiding this comment.
실제로 10개 이상이 왔기 때문에 고려할 수 있었습니다.^^
| if (keywordIndex === dataSize - 2) { | ||
| replaceSlide(); | ||
| } | ||
| }; |
There was a problem hiding this comment.
useInterval을 쓰지 않고 비슷하게 하는 방법을 제시해봅니다.
const replaceSlide = () => {
setTransition('');
setKeywordIndex(0);
};
const moveSlide = () => {
return new Promise((resolve) => {
setTimeout(() => {
setTransition(TRANSITION_SETTING);
setKeywordIndex((prev) => prev + 1);
resolve('');
}, SLIDE_DELAY);
});
};
useEffect(() => {
moveSlide().then(() => {
if (keywordIndex === dataSize - 1) {
replaceSlide();
}
});
}, [keywordIndex]);위에 코드는 6위에서 1위로 돌아왔을 때에는, 2위로 넘어가기까지 SLIDE_DELAY*2 만큼의 시간이 걸립니당.
keywordIndex === dataSize - 2 가 아닌 -1 을 한다는 점에서 머리가 조금 자유로운(?) 것 같습니다. ㅎㅎ..
There was a problem hiding this comment.
오오 Promise를 사용하는건 생각 못했는데 역시 성빈님이십니다! 👍
| <g fill="#2D2D29FF" stroke="#2D2D29FF"> | ||
| <path d="M 37.297 135.408 C 40.119 138.008 44.594 139.739 45.682 138.651 C 46.006 138.327 45.438 136.811 44.420 135.281 C 42.896 132.992 42.506 132.809 42.211 134.250 C 41.767 136.421 40.179 136.471 36.973 134.415 C 34.796 133.020 34.834 133.138 37.297 135.408 " /> | ||
| </g> | ||
| </svg> |
There was a problem hiding this comment.
와우,.. svg로... 어떻게.. 하신거죠? ㅋㅋ...
사과드립니다.🙇♂️
There was a problem hiding this comment.
갓성빈님의 로고를 변환한거밖에 없습니다,,ㅋㅋ
|
저는 일단 에러 발생시 재요청 (max 5회) 로 하고있는데, 재요청 횟수가 max를 넘어갈 때를 따로 정의하진 않았네용 |
| setRankingData(data); | ||
| try { | ||
| const response = await fetch('/keyword-ranking'); | ||
| if (!response.ok) { |
There was a problem hiding this comment.
FE 쪽 예외처리 너무 좋습니다. BE도 신경쓰도록 하겠습니다.
| const RankingSlide = ({ rankingData }: IRankingSlideProps) => { | ||
| const [keywordIndex, setKeywordIndex] = useState(0); | ||
| const [transition, setTransition] = useState(''); | ||
| const newRankingData = [...rankingData.slice(0, 10), rankingData[0]]; |
개요
인기검색어 슬라이딩 애니메이션 구현
스크린샷
작업사항
리뷰 요청사항
인기검색어 슬라이딩 애니메이션을 무한루프로 구현하기 위해 DAN의 useInterval hook을 사용했습니다. 로직에 문제가 없는지, 혹은 더 좋은 방법이 있을지 조언 부탁드립니다. (구현 과정 이슈 작성 예정입니다.)
인기검색어 데이터 fetch시 예외처리를 우선 간단하게 에러 메시지를 나타내는 것으로 구현해두었습니다. 생각해둔 방법으로는
이정도입니다. 선호하시는 방식이 있는지, 혹은 더 좋은 방법이 있을지 조언 부탁드립니다^^ (to. 예윤)