header alarm 구현완료 by live-small · Pull Request #102 · Instagram-Clone-Coding/React_instagram_clone

live-small · 2022-09-13T02:50:16Z

개요

유저에게 온 알람을 보여줌

작업사항

header의 alarm api 연결 -> UI 구현
무한스크롤 구현
: 마지막 요소가 보이면 alarm api를 호출하니까, 쓰기 불편하더라구요. (데이터 로드해오는 시간에 의해 끊김 -> 무한스크롤의 장점을 활용하지 못하는 느낌?) 그래서 영인님처럼 마지막에서 4번째 전 요소가 api 트리거 할 수 있도록 구현해뒀습니다.

주요 변경 로직

useOnView
: useEffect의 ref -> ref.current로 바꿨습니다
이유 ref.current가 바껴도 ref의 주소값은 동일하기때문에 useEffect가 실행되지 않는 케이스가 생겨 바꾸게 되었습니다.

참고

팔로잉 모달은 아직 미완성인데, pr이 너무 커질 거 같아서 쪼개서 보냅니다! => 팔로잉 모달까지 완료 ! (10.03)

useEffect deps: ref -> ref.current로 수정 ref.current가 변경되었음에도 ref는 동일하기에 useEffect가 실행되지 않는 케이스가 있어 수정함

kimyoungyin

밖이라 나중에 더 리뷰 남길게요! 일단 아무것도 없을 떄 레이아웃도 구현하면 좋을 것 같아요

src/@type/index.d.ts

src/components/Common/Header/alarm/utils.ts

kimyoungyin · 2022-09-17T06:01:19Z

src/components/Common/Header/alarm/index.tsx

+    alarmContainerRef: React.RefObject<HTMLDivElement>;
+}) {
+    const dispatch = useAppDispatch();
+    const [pageToLoad, setPageToLoad] = useState(1);


전역 state를 사용하실 거라면 혹시 pageToLoad만 전역 state에서 제외하신 이유가 있을까요? alarmSlice 안에 넣으면 thunk를 dispatch할 때도 인자도 넣을 필요도 없어 편할 것 같아요.

pageToLoad를 꼭 전역 상태값으로 두어야할 이유가 뭘까용? 컴포넌트 안에서 처리가능하다면 컴포넌트 안의 상태값을 이용하자! 라는 생각이라서 이렇게 구현했습니다!

alarmSlice에 totalPages랑 pageToLoad에 대해 이해가 잘 안되서 설명 부탁드려도 될까요?

pageToLoad는 불러올 페이지 번호,
totalPage는 총 페이지 수,
alarmList는 현재 보여지는 alarm리스트입니다!

로직은, pageToLoad로 알람의 특정 페이지를 불러와서 alarmList에 넣습니다.
이때, totalPage보다 큰 경우엔 더 불러올 페이지가 없으니까, 알람 api 호출하지 않도록 했어요!

이전엔 pageToLoad 빼고 다른 상태값을 다 전역에서 관리했던데..
제가 왜 이렇게 구현한지(?) 이해가 안가더라구요??ㅋㅋㅋ

해당 상태값 모두 컴포넌트 내에서 관리하도록 수정했습니다!

@kimyoungyin 아래 커밋 봐주시면 됩니다!
54e36fc

src/components/Common/Header/alarm/alarmType/follow_alarm.tsx

kimyoungyin · 2022-09-17T06:05:49Z

src/app/store/ducks/alarm/alarmSlice.ts

+    extraReducers: (build) => {
+        build //


여기 팔로우/언팔로우 관련 extraReducer 추가 예정인가요?

아뇨! 팔로우/언팔로우 api는 home thunk에 있는 로직 재사용했습니다.

아 넵 근데 promise 상태를 보여주려면 extraReducer가 필요할 수 있을지도 모르겠네요. 아래 리뷰 참고 부탁드립니다.

src/components/Common/Header/NavItems.tsx

live-small · 2022-10-03T07:17:44Z

@kimyoungyin 영인님 알람 작업 끝냈습니당

live-small · 2022-10-03T08:51:44Z

src/components/Common/Header/NavItems.tsx

-import { ReactComponent as Map } from "assets/Svgs/map.svg";
-import { ReactComponent as MapActive } from "assets/Svgs/map-active.svg";
-


안쓰는 이미지라서 삭제했습니다 @kimyoungyin
아마 저희가 저 기능 구현안하기로해서 작업안한거 맞죠..?

@kimyoungyin 영인님 이 부분도 봐주신거 맞나용?

kimyoungyin

늦게 리뷰 남겨드려서 죄송합니다 ㅠ
최대한 자세히 보고 리뷰 남겨드려요!

(요청)
아 그리고 몇몇 파일들 공통 사항인데 갑자기 파일명이 카멜 케이스가 아니라 스네이크 케이스로 작성되어있던데 통일성을 위해 수정 부탁드립니다!

src/@type/index.d.ts

src/components/Common/Header/alarm/alarmType/follow_alarm.tsx

kimyoungyin · 2022-11-08T07:26:35Z

src/components/Common/Header/alarm/alarmType/follow_alarm.tsx

+                <Button onClick={followHandler} style={{ height: "30px" }}>
+                    팔로우
+                </Button>


팔로우 요청 중일 때 로딩 circle이 필요할 것 같은데 관련 state를 추가해야 할 것 같은데 어떠세요?
pending 상태가 아니라면 버튼을 비활성화 시키는 게 좋을 것 같습니다

kimyoungyin · 2022-11-08T07:32:10Z

src/components/Common/Header/alarm/alarmType/follow_alarm.tsx

+    const followHandler = () => {
+        dispatch(postFollow({ username: alarm.agent.username })) //
+            .then(() => {
+                setIsFollowing(!isFollowing);
+            });
+    };


에러가 발생했을 때는 어떻게 처리할까요? 아래 버튼 관련해서 개선하면 좋을 것 같아요.

참고로 homeSlice에는 각 게시글에 followLoading state가 있긴 합니다

kimyoungyin · 2022-11-08T08:01:38Z

src/app/store/ducks/alarm/alarmSlice.ts

+    extraReducers: (build) => {
+        build //


아 넵 근데 promise 상태를 보여주려면 extraReducer가 필요할 수 있을지도 모르겠네요. 아래 리뷰 참고 부탁드립니다.

kimyoungyin · 2022-11-08T08:08:13Z

src/components/Common/Header/alarm/index.tsx

+    alarmContainerRef: React.RefObject<HTMLDivElement>;
+}) {
+    const dispatch = useAppDispatch();
+    const [pageToLoad, setPageToLoad] = useState(1);


alarmSlice에 totalPages랑 pageToLoad에 대해 이해가 잘 안되서 설명 부탁드려도 될까요?

kimyoungyin · 2022-11-08T08:10:41Z

src/components/Common/Header/NavItems.tsx

+    const alarmContainerRef = useRef<HTMLDivElement | null>(null);
+    const alarmModalControllerRef = useRef<HTMLSpanElement | null>(null);
+    useOutsideClick(alarmContainerRef, setIsAlarmOn, alarmModalControllerRef);
+


이 두 Ref는 useOutsideClick을 위해 생성한 걸까요?

네네 맞아요

파일명, 타입모듈명, type -> interface

전역, 컴포넌트로 섞여있었음 -> 컴포넌트에서만 관리

live-small added 14 commits August 8, 2022 15:29

feat: 알람 컨테이너 UI 구현, 알람 리스트 thunk로 불러옴

5df2417

fix: alarm list 응답 타입, index.d.ts 파일에서 관리하도록 수정

8303eb7

feat: 알람 아이템 > 알람보낸 프로필 UI 구현

b771cf5

feat: 알림 item 하나로 통일, 로딩처리, 알람없는 경우 처리

d653f62

feat: 알람 내 게시글 썸네일 클릭 시 해당 게시글로 이동

7b650e7

fix: 알람 item UI 일부 수정

d5682fe

refactor: div 대신 ul,li 태그 이용

deb3f1c

Merge branch 'develop' into feature/alarm

48a352a

Merge branch 'develop' into feature/alarm

f00d848

feat: hashtag, mentions 링크,스타일링 적용

766843e

fix: useOnView 수정: parameter, useEffect deps

5e067ed

useEffect deps: ref -> ref.current로 수정 ref.current가 변경되었음에도 ref는 동일하기에 useEffect가 실행되지 않는 케이스가 있어 수정함

fix: Alarm 무한스크롤을 위해 Alarm type 수정

9b72f22

feat: Alarm 무한스크롤 구현 - alarm list 컴포넌트에서 observing 붙임

f28db0c

fix: 불필요한 log 제거

c390cff

live-small requested a review from kimyoungyin September 13, 2022 02:50

live-small self-assigned this Sep 13, 2022

live-small added the enhancement New feature or request label Sep 13, 2022

Merge branch 'develop' into feature/alarm

f987f73

kimyoungyin approved these changes Sep 17, 2022

View reviewed changes

live-small added 4 commits October 3, 2022 13:39

c09bec6

feat: 알람>팔로우, 팔로잉 버튼 UI, 모달 핸들러 구현

020fd94

fix: alarm type 중복되는 타입 묶어서 확장하는 방향으로 수정

73790af

feat: 알람 없을 때 UI 수정

ef91700

live-small added 2 commits October 3, 2022 17:49

fix: 알람 모달상태값 isClickAlarm -> isAlarmOn

cb8722a

fix: 안쓰는 컴포넌트 import 삭제

0efa59a

live-small commented Oct 3, 2022

View reviewed changes

fix: 알람버튼 cursor pointer

d6e43f3

live-small changed the title ~~header alarm UI, 무한스크롤 구현~~ header alarm 구현완료 Oct 4, 2022

kimyoungyin approved these changes Nov 8, 2022

View reviewed changes

kimyoungyin self-requested a review November 14, 2022 12:52

live-small added 2 commits December 28, 2022 01:10

fix: 공통 컨벤션으로 수정

a62da14

파일명, 타입모듈명, type -> interface

fix: Alarm 무한스크롤 구현 시 필요한 상태값, 컴포넌트에서 관리하도록 수정

54e36fc

전역, 컴포넌트로 섞여있었음 -> 컴포넌트에서만 관리

		import { ReactComponent as Map } from "assets/Svgs/map.svg";
		import { ReactComponent as MapActive } from "assets/Svgs/map-active.svg";

Conversation

live-small commented Sep 13, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

개요

작업사항

주요 변경 로직

참고

Uh oh!

kimyoungyin left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

live-small commented Oct 3, 2022

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kimyoungyin left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

live-small commented Sep 13, 2022 •

edited

Loading