header alarm 구현완료 #102
header alarm 구현완료 #102
Conversation
useEffect deps: ref -> ref.current로 수정 ref.current가 변경되었음에도 ref는 동일하기에 useEffect가 실행되지 않는 케이스가 있어 수정함
| alarmContainerRef: React.RefObject<HTMLDivElement>; | ||
| }) { | ||
| const dispatch = useAppDispatch(); | ||
| const [pageToLoad, setPageToLoad] = useState(1); |
There was a problem hiding this comment.
전역 state를 사용하실 거라면 혹시 pageToLoad만 전역 state에서 제외하신 이유가 있을까요? alarmSlice 안에 넣으면 thunk를 dispatch할 때도 인자도 넣을 필요도 없어 편할 것 같아요.
There was a problem hiding this comment.
pageToLoad를 꼭 전역 상태값으로 두어야할 이유가 뭘까용? 컴포넌트 안에서 처리가능하다면 컴포넌트 안의 상태값을 이용하자! 라는 생각이라서 이렇게 구현했습니다!
There was a problem hiding this comment.
alarmSlice에 totalPages랑 pageToLoad에 대해 이해가 잘 안되서 설명 부탁드려도 될까요?
There was a problem hiding this comment.
pageToLoad는 불러올 페이지 번호,
totalPage는 총 페이지 수,
alarmList는 현재 보여지는 alarm리스트입니다!
로직은, pageToLoad로 알람의 특정 페이지를 불러와서 alarmList에 넣습니다.
이때, totalPage보다 큰 경우엔 더 불러올 페이지가 없으니까, 알람 api 호출하지 않도록 했어요!
이전엔 pageToLoad 빼고 다른 상태값을 다 전역에서 관리했던데..
제가 왜 이렇게 구현한지(?) 이해가 안가더라구요??ㅋㅋㅋ
해당 상태값 모두 컴포넌트 내에서 관리하도록 수정했습니다!
There was a problem hiding this comment.
@kimyoungyin 아래 커밋 봐주시면 됩니다!
54e36fc
| extraReducers: (build) => { | ||
| build // |
There was a problem hiding this comment.
여기 팔로우/언팔로우 관련 extraReducer 추가 예정인가요?
There was a problem hiding this comment.
아뇨! 팔로우/언팔로우 api는 home thunk에 있는 로직 재사용했습니다.
There was a problem hiding this comment.
아 넵 근데 promise 상태를 보여주려면 extraReducer가 필요할 수 있을지도 모르겠네요. 아래 리뷰 참고 부탁드립니다.
|
@kimyoungyin 영인님 알람 작업 끝냈습니당 |
| import { ReactComponent as Map } from "assets/Svgs/map.svg"; | ||
| import { ReactComponent as MapActive } from "assets/Svgs/map-active.svg"; | ||
|
|
There was a problem hiding this comment.
안쓰는 이미지라서 삭제했습니다 @kimyoungyin
아마 저희가 저 기능 구현안하기로해서 작업안한거 맞죠..?
There was a problem hiding this comment.
@kimyoungyin 영인님 이 부분도 봐주신거 맞나용?
| <Button onClick={followHandler} style={{ height: "30px" }}> | ||
| 팔로우 | ||
| </Button> |
There was a problem hiding this comment.
팔로우 요청 중일 때 로딩 circle이 필요할 것 같은데 관련 state를 추가해야 할 것 같은데 어떠세요?
pending 상태가 아니라면 버튼을 비활성화 시키는 게 좋을 것 같습니다
| const followHandler = () => { | ||
| dispatch(postFollow({ username: alarm.agent.username })) // | ||
| .then(() => { | ||
| setIsFollowing(!isFollowing); | ||
| }); | ||
| }; |
There was a problem hiding this comment.
에러가 발생했을 때는 어떻게 처리할까요? 아래 버튼 관련해서 개선하면 좋을 것 같아요.
참고로 homeSlice에는 각 게시글에 followLoading state가 있긴 합니다
| extraReducers: (build) => { | ||
| build // |
There was a problem hiding this comment.
아 넵 근데 promise 상태를 보여주려면 extraReducer가 필요할 수 있을지도 모르겠네요. 아래 리뷰 참고 부탁드립니다.
| alarmContainerRef: React.RefObject<HTMLDivElement>; | ||
| }) { | ||
| const dispatch = useAppDispatch(); | ||
| const [pageToLoad, setPageToLoad] = useState(1); |
There was a problem hiding this comment.
alarmSlice에 totalPages랑 pageToLoad에 대해 이해가 잘 안되서 설명 부탁드려도 될까요?
| const alarmContainerRef = useRef<HTMLDivElement | null>(null); | ||
| const alarmModalControllerRef = useRef<HTMLSpanElement | null>(null); | ||
| useOutsideClick(alarmContainerRef, setIsAlarmOn, alarmModalControllerRef); | ||
|
|
There was a problem hiding this comment.
이 두 Ref는 useOutsideClick을 위해 생성한 걸까요?
파일명, 타입모듈명, type -> interface
전역, 컴포넌트로 섞여있었음 -> 컴포넌트에서만 관리
개요
유저에게 온 알람을 보여줌
작업사항
: 마지막 요소가 보이면 alarm api를 호출하니까, 쓰기 불편하더라구요. (데이터 로드해오는 시간에 의해 끊김 -> 무한스크롤의 장점을 활용하지 못하는 느낌?) 그래서 영인님처럼 마지막에서 4번째 전 요소가 api 트리거 할 수 있도록 구현해뒀습니다.
주요 변경 로직
: useEffect의 ref -> ref.current로 바꿨습니다
이유ref.current가 바껴도 ref의 주소값은 동일하기때문에 useEffect가 실행되지 않는 케이스가 생겨 바꾸게 되었습니다.참고
팔로잉 모달은 아직 미완성인데, pr이 너무 커질 거 같아서 쪼개서 보냅니다! => 팔로잉 모달까지 완료 ! (10.03)