[feat] add infinte scroll #74
Conversation
21ow
added
✨Feature
| import styles from './Card.module.css'; | ||
|
|
||
| interface Props { | ||
| item: CardData; |
There was a problem hiding this comment.
제가 card쪽 가져다 쓰면서 든 의문인데 이거 인터페이스 뒤에 Data왜 붙이신거에요..?ㅋㅋㅋ
모든게 데이터인데.. 여기만 붙어있길래 ㅋㅋㅋ 왜붙였을까... 하는 의문...?😂
There was a problem hiding this comment.
아 처음에 그냥 card로 쓰다가 이름 중복이라고 에러 뜨길래 임시로 누더기 보수한 거예요 ㅋㅋ 제일 많이 쓸 거 같아서 길게 쓴다는 게 ㅋㅋㅋ
| } | ||
|
|
||
| return ( | ||
| <Draggable draggableId={`${item.id}`} index={index}> |
There was a problem hiding this comment.
item.id 하나밖에없으면 백틱 빼도 동일하게 작동..맞나요?
There was a problem hiding this comment.
draggableId에 string 넣어야 해서 저렇게 넣었어요
| <div className={styles.title}>{title}</div> | ||
| <div className={styles.totalCount}>{totalCount}</div> | ||
| </div> | ||
|
|
There was a problem hiding this comment.
태그 중간중간에 엔터는 없으면 더좋을것같아요...ㅎㅎ
| } | ||
| }, | ||
| { | ||
| root: document.querySelector('.scrollContext'), |
There was a problem hiding this comment.
오.. 이거 styles.scrollContext 이렇게 클래스명 넣어버리면 렌더링된 html보면 해시값 어쩌고로 바뀌는데
이렇게 선택자 쓰면 원본(?)이 잘 선택되는건가보네요..?
(그럼 클래스명은 언제 바뀌는거지...🤔)
There was a problem hiding this comment.
root: ~는 DOM 노드로 설정하면 된다고 해서 저렇게 바로 넣었고,
제가 이해를 잘 못해서 맞는 대답인 지 모르겠어요.
DOM 트리 생성 후에 CSS > 하이드레이션 들어가니까 이미 DOM 트리에 존재하는 요소일 거고, 스타일링 이후에 해당 노드가 root로 트리거 되는 거 아닐까요?
src/types/dashboardView.ts
Outdated
| updatedAt: string; | ||
| } | ||
|
|
||
| export interface CardResponse { |
There was a problem hiding this comment.
이거 무슨 Response인지도 명시하는건 어때요?
다른 타입파일 보면은 GetDashboardsResponse, GetMembersResponse 이렇게 맞춰져 있어서
이름 맞추면좋을것같아요
| href={`/dashboard/${id}`} | ||
| href={{ | ||
| pathname: `/dashboard/${id}`, | ||
| query: { color: color }, |
There was a problem hiding this comment.
제가 여기서 봤군요..!
color query로 보내지말고 dashboard store에서 가져다 쓰는거 어때요?
There was a problem hiding this comment.
어제 미팅에서 말씀하셨던 게 color가 맞았군요 ㅋㅋㅋㅋㅋ 부정했네요
방법을 잘 모르겠는ㄷ데 우선 알겠습니다!
| ))} | ||
| <div className={styles.createColumnSection}> | ||
| <Button type="button" className={styles.createColumn}> |
There was a problem hiding this comment.
이거 지원님이 dm방에 말씀주셨는데
페이지 왔다갔다(?) 하면 뭔가 덮어씌워져서 명시도를 높여줘야할것같아요!
There was a problem hiding this comment.
이거근데 이미 develop브랜치에 있는데 왜 추가로 잡히는거죠..?! 😨
| if (currentCursor === null) return; | ||
|
|
||
| const { data: cardResponses } = await axiosInstance.get( | ||
| `${CARD_URL}?size=10&cursorId=${currentCursor}&columnId=${columnId}` |
There was a problem hiding this comment.
size 값도 상수로 빼서 관리하면 좋을것같아요
| setColumns((prevColumns) => | ||
| prevColumns.map((column) => | ||
| column.id === columnId | ||
| ? { | ||
| ...column, | ||
| items: [ | ||
| ...column.items, | ||
| ...newCards.filter( | ||
| (newCard: CardData) => | ||
| !column.items.some( | ||
| (prevCard) => prevCard.id === newCard.id | ||
| ) | ||
| ), | ||
| ], | ||
| } | ||
| : column | ||
| ) | ||
| ); |
There was a problem hiding this comment.
의도랄 건 없고... 무한 스크롤 api 붙일 때 테스트로 넣었던 거긴 해요
중복 카드가 잇으면 거르고 넣는 건데 아직 못 뺸 거고요
왜 되지? 하는 부분이 하나 있어서 아직 못 뺐습니다
전체 흐름 다시 파악하고 불필요 코드 같으면 바로 뺄게요
| observerRef.current = new IntersectionObserver( | ||
| (entries) => { | ||
| const entry = entries[0]; | ||
| if (entry.isIntersecting) { | ||
| loadMoreData(id); | ||
| } |
There was a problem hiding this comment.
컴포넌트가 렌더링 될때마다 IntersectionObserver 객체가 새로 생성되는게 맞나요?
의도 된게 아니라면
if (!observerRef.current) {
이런식으로 막아 주는것을 추천드려요!
There was a problem hiding this comment.
새로 생성되는 게 맞습니다 !
생각해보면 컬럼 자체가 리렌더링이 잦을 거 같으니 지원님 말씀이 맞는 것 같아요! 수정할게요!
| }; | ||
| }, [id, loadMoreData]); |
There was a problem hiding this comment.
흠 재생성 막고, 이거 추가해서 부가 조건도 추가해볼게요.
| const [columns, setColumns] = useState<ColumnData[]>([]); | ||
| const [loading, setLoading] = useState<boolean>(false); | ||
| const [error, setError] = useState<string | null>(null); | ||
| const [cursors, setCursors] = useState<Record<number, number | null>>({}); |
There was a problem hiding this comment.
코드 대략적으로 본 것 같은데 colums랑 cursors 같이 밀접하게 관련있는 애들은
통합해서 상태 관리하는게 동기화 면에서 좋은거 같습니다!
나중에 고민해보시면 좋을 거 같아요!
…wo/10-Sprint-Taskify into 63-feat-add-infinte-scroll
📌 Related Issue
close #63
📝 Description
-- 스크롤 영역과 DnD 영역의 height 조절
-- 추가 데이터 렌더링 후 DnD 발생 시 값 처리
📸 Screenshot
📢 Notes
스크롤 중첩 에러 해결 방법 우선 킵... 수정해도 안되더라고요...