[FE] feat: 화면 전환 시 선택된 카테고리 유지 및 스크롤 유지 #621
Conversation
| const saveCurrentTabScroll = (categoryId: number, scrollY: number) => { | ||
| setCurrentTabScroll((prevState) => ({ ...prevState, [categoryId]: scrollY })); | ||
| }; |
There was a problem hiding this comment.
빈 객체로 두고 카테고리마다 하나씩 저장해두는거군요 👍
| import useTimeout from './useTimeout'; | ||
| import { useCategoryContext } from '../context'; | ||
|
|
||
| const useScrollRestoration = (currentCategoryId: number) => { |
There was a problem hiding this comment.
이 훅은 main 엘리먼트를 찾는 대신 리스트 컨테이너에 ref를 걸어서 넘겨주어도 되지 않을까요..?
상태를 저장할 때 dom api로 직접 요소를 가져오는게 좋아보이진 않네요 🥲
같이 한 번 시도해봅시다.!
| useEffect(() => { | ||
| const mainElement = document.getElementById('main'); | ||
| if (!mainElement) return; | ||
|
|
||
| if (!isCategoryVariant(category)) { | ||
| return null; | ||
| } | ||
| const scrollY = currentTabScroll[currentCategoryId]; | ||
| mainElement.scrollTo(0, scrollY); | ||
| }, [currentCategoryId]); |
There was a problem hiding this comment.
그럼 이 친구도 약간의 수정이 필요해보여요
| if (!category || !isCategoryVariant(category)) { | ||
| return null; | ||
| } |
There was a problem hiding this comment.
아래 훅들이 있어서 이 친구는 모든 훅 아래로 내려가야겠어요
There was a problem hiding this comment.
근데 이렇게 되면 밑의 hook에서 저 category 값을 참조를 못하게 되는데 어떻게 할까요?
There was a problem hiding this comment.
fe60442
아예 로직을 컴포넌트안으로 이동하는 것으로 바꿨습니다
| </Suspense> | ||
| <ErrorBoundary fallback={ErrorComponent} handleReset={reset}> | ||
| <Suspense fallback={<Loading />}> | ||
| <div style={{ position: 'fixed', background: 'white', top: '60px', width: 'calc(100% - 40px)' }}> |
There was a problem hiding this comment.
오 타이틀과 정렬 버튼을 고정하는 친구인가요??
특별히 인라인으로 작성한 이유가 없다면 스타일드로 작성갑시다!
아 그리고 정렬버튼과 리스트 묶어준 이유가 에러나 로딩인 경우 정렬 버튼을 안 보이게 해서 정렬 상태 변경을 방지하기 위함인데 타미는 어떻게 생각하나요??
| <CategoryProvider> | ||
| <App /> | ||
| </CategoryProvider> |
There was a problem hiding this comment.
상세 페이지에 접속해도 컨텍스트를 유지하기 위해 옮긴건가요?
| const { categoryIds, selectCategory, currentTabScroll, saveCurrentTabScroll } = useContext(CategoryContext); | ||
|
|
||
| return { categoryIds, selectCategory }; | ||
| return { categoryIds, selectCategory, currentTabScroll, saveCurrentTabScroll }; |
There was a problem hiding this comment.
그대로 반환하니 구조 분해 하지 않아도 되겠네요!
그리고 다른 컨텍스트 훅처럼 예외처리도 있으면 더 좋아보여요.!
There was a problem hiding this comment.
수정했습니다! 다른 context와 동일하게 Value와 Action에 대해 나눴습니다
| const { saveCurrentTabScroll } = useCategoryActionContext(); | ||
|
|
||
| const handleScroll = () => { | ||
| if (!ref.current) return; |
| const [timeoutFn] = useTimeout(handleScroll, 300); | ||
|
|
||
| useEffect(() => { | ||
| if (!ref.current) return; |
Issue
✨ 구현한 기능
📢 논의하고 싶은 내용
🎸 기타
x
⏰ 일정