[SP2] 블로그 드롭다운 및 무한스크롤 #244
Conversation
| 'blogfiles.pstatic.net', | ||
| 'dthumb-phinf.pstatic.net', | ||
| 'postfiles.pstatic.net', | ||
| 'images.velog.io', | ||
| 'media.disquiet.io', | ||
| 'scontent-ssn1-1.xx.fbcdn.net', | ||
| 'storep-phinf.pstatic.net', |
There was a problem hiding this comment.
이미지 경로입니다.
논의한 것 처럼 서버에서 S3 에 이미지를 올리고 해당 url을 전달받는 식으로 변경하면 좋을 것 같아요!
src/components/Layout/Layout.tsx
Outdated
| display: flex; | ||
| flex-direction: column; | ||
| row-gap: 50px; |
There was a problem hiding this comment.
footer를 항상 하단에 고정하기 위해 전체 레이아웃 스타일을 변경했습니다.
| baseLabel: string; | ||
| selectedValue: T; | ||
| setSelectedValue: React.Dispatch<React.SetStateAction<T>>; | ||
| setSelectedValue: (newValue: T) => void; |
There was a problem hiding this comment.
드롭다운 값은 항상 sessionStorage에 저장하기 때문에, useStorage hook에서 사용하는 타입으로 바꿨습니다!
| cursor: pointer; | ||
| position: relative; | ||
| width: 110px; | ||
| width: ${({ selectedValue }) => (selectedValue === 'ANDROID' ? '132px' : '110px')}; |
There was a problem hiding this comment.
안드로이드 값일때 width가 달라져야합니다.
| export const activeGenerationCategoryList: number[] = [0]; | ||
|
|
||
| for (let i = 31; i >= 24; i--) { | ||
| activeGenerationCategoryList.push(i); | ||
| } | ||
|
|
||
| export const generationCategoryLabel: Record<number, string> = { | ||
| [0]: '전체', | ||
| }; | ||
|
|
||
| for (let i = 31; i >= 24; i--) { | ||
| generationCategoryLabel[i] = `${i}기`; | ||
| } |
There was a problem hiding this comment.
기수 드롭다운에 대한 타입입니다.
24~31기 까지 있으며, 전체는 0 입니다.
| href={review.link} | ||
| href={review.url} | ||
| onClick={() => track('click_main_review_detail')} | ||
| > | ||
| <article className={styles.card} role="presentation"> | ||
| <h4 className={styles.cardTitle}>{review.title}</h4> | ||
| <div className={styles.descWrapper}> | ||
| <p className={styles.desc}> | ||
| {parsePartToKorean(review.part)}파트 {review.semester}기{'\n'} | ||
| <strong className={styles.descName}>{review.reviewer}</strong> | ||
| {parsePartToKorean(review.part)}파트 {review.generation}기{'\n'} | ||
| <strong className={styles.descName}>{review.author}</strong> | ||
| </p> |
There was a problem hiding this comment.
reivew API가 변경되면서 메인페이지에서의 활동후기를 랜덤으로 불러오는 컴포넌트에서
파라미터 값을 수정했습니다.
| selectedMajorCategory: generation, | ||
| selectedSubCategory: part, | ||
| }: useFetchProps) => { | ||
| const tabAPI = selectedTab === 'review' ? 'reviewAPI' : 'sopticleAPI'; |
There was a problem hiding this comment.
하나의 폴더에서 사용자가 선택한 탭 정보에 따라 API를 불러옵니다.
| useEffect(() => { | ||
| if (!isLoading) { | ||
| setHasUnObserved(); | ||
| } | ||
| }, [isLoading]); |
There was a problem hiding this comment.
src/views/BlogPage/hooks/useFetch.ts 에서
데이터가 받아오기 전에는 loading = true, 데이터 받아온 후 loading = false 입니다.
무한스크롤 훅에서 만약 isLoading이 false일때 관찰을 중단합니다. 이때, 페이지 count를 증가합니다.
페이지 count가 증가하면 hasObserved를 true로 바꿉니다.
|
아 그게 백엔드랑 API 논의하는 스레드를 확인했을때, 데브 서버에서 응답값을 바꾼 상태여서 
|
| <S.Thumbnail | ||
| src={ | ||
| blogPost.thumbnailUrl.charAt(0) !== 'h' | ||
| ? `https:${blogPost.thumbnailUrl}` | ||
| : error | ||
| ? img_blog_default | ||
| : blogPost.thumbnailUrl | ||
| } | ||
| alt="게시물 썸네일" | ||
| width={239} | ||
| height={160} | ||
| loading="lazy" | ||
| onError={onThumbnailError} | ||
| /> |
There was a problem hiding this comment.
썸네일 뜨는 게 오래 걸려서 그 부분이 텅 비어 있는 게 별로 좋은 것 같아 보이지 않네요..!
placeholder="blur"
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mPU0zOtBwACNQES9P3nGQAAAABJRU5ErkJggg=="placeholder를 이용해서 썸네일이 들어갈 자리라는 걸 보여주는 게 어떨까요?
blurDataURL 같은 경우는 여기 사이트에서 만들 수 있는데 저희 썸네일 디폴트 이미지의 배경색을 이용하면 좋을 것 같아요!
|
아티클/활동후기에 데이터가 없을때의 화면을 구현하였습니다. 2023-10-28.6.36.04.mov |
Summary
블로그 드롭다운에 API를 연결하고, 무한스크롤을 구현했습니다.
그리고 새로고침 시 드롭다운 데이터가 날라가는걸 막기 위해 useStorage훅을 사용해 sessionStorage에 값을 저장합니다.
sessionStorage를 사용한 이유는 브라우저를 닫으면 정보가 없어져야하기 때문입니다!
Screenshot
[sessionStorage에 드롭다운 값 저장]
Comment
구현 과정에서 드롭다운의 스타일과 파라미터 타입을 변경했습니다.
BlogPost, BlogPostList 컴포넌트의 스타일도 수정하였습니다.
이후 작업할 내용은 다음과 같습니다.