feat: 게시글 신고 Toast mds로 변경 및 멤버 신고/차단 기능 추가 #1555

pepperdad · 2024-09-15T15:15:36Z

🤫 쉿, 나한테만 말해줘요. 이슈넘버

close feat: 유저 신고, 차단 UI 및 기능 구현 #1545

🧐 어떤 것을 변경했어요~?

게시글 신고 성공시, Toast mds로 변경
멤버 페이지의 드롭다운 메뉴로 신고/차단 UI 및 기능 추가
신고/차단 API 및 hook 추가
모달의 Title, Descripction 을 반응형에 따라 font 수정
FeedDropdown 컴포넌트에 커스텀 스타일링 가능하도록 style props 넣을 수 있도록 추가
@sopt-makers/icons 패키지 추가

🤔 그렇다면, 어떻게 구현했어요~?

dropdownOpenStyle 상태를 추가해 반응형으로 모달 사이즈 수정

❤️‍🔥 당신이 생각하는 PR포인트, 내겐 매력포인트.

 onSuccess: async () => {
  queryClient.invalidateQueries({
    predicate: (query) => query.queryKey.some((key) => String(key).includes('community')),
  });

차단 성공시 커뮤니티의 게시글, 댓글 등을 모두 다시 조회할 수 있도록
위와 같은 로직을 통해서 community가 포함된 쿼리키들을 모두 invalidate해 다시 가져올 수 있도록 하였어요!
어떤 게시글이 차단된 멤버의 댓글이 포함되어 있는지를 모르고, 이를 다시 불러와야하기 때문에 이런 식으로 구현하였는데!
혹시 더 효율적인 방법이 있는지 리뷰 부탁드립니다!

📸 스크린샷, 없으면 이것 참,, 섭섭한데요?

게시글 신고 성공

유저 신고

유저 신고 성공

유저 차단

유저 차단 성공

내 프로필인지 여부에 따라서 수정/메뉴 버튼 분기 처리

신고, 차단 Item 추가 및 반응형 width 설정

height · 2024-09-15T15:15:39Z

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

github-actions · 2024-09-15T15:17:34Z

✨✨ 스토리북으로 확인하기 ✨✨

github-actions · 2024-09-15T15:18:55Z

🚀 프리뷰 배포 확인하기 🚀

https://522f692d.sopt-internal-dev.pages.dev

hayounSong

도영아 고생했어!! 꽤 복잡한 작업이었을 것 같은데 너무 꼼꼼하게 잘 처리해 준 것 같아!! 일단 어풉 날려두겠습니다!

hayounSong · 2024-09-16T12:01:24Z

src/components/feed/common/hooks/useReportFeed.ts

        okButtonText: '신고하기',
        cancelButtonText: '취소',
-        maxWidth: 324,
+        maxWidth: 400,
+        zIndex: zIndex.헤더,


여기 zIndex의 기준이 있을까요?! 번외로 저도 개발할때 똑같은 이슈가 있었는데, 한번 다같이 zIndex 기준을 정해야할 필요는 있어보입니다..

zIndex가 헤더보다 낮아서 헤더에 가려지더라구요,,, 그래서 일단 헤더와 같은 zIndex로 설정했습니다!

한번 다같이 zIndex 기준을 정해야할 필요는 있어보입니다..

그리고 이 의견에 동의합니다!

z-index 위계를 한 번 쭉 정의내릴 필요는 있어보여요...! 저도 맨날 하나씩 확인해서 올리고 그랬어서...

hayounSong · 2024-09-16T12:05:52Z

src/components/feed/common/hooks/useReportFeed.ts

        okButtonText: '신고하기',
        cancelButtonText: '취소',
-        maxWidth: 324,
+        maxWidth: 400,


이 부분은 코드 리뷰보다는 질문에 가까운데.. 이번에는 피그마에 있는 Dialog 디자인을 따르는게 아닌 기존의 Confirm 공동 컴포넌트를 활용한거일까요?! 약간의 차이가 있어서 노티남깁니다(closed버튼 등등). 만약 맞다면 나중에 mds 도입때 같이 처리하면 될 것 같아요!

mds를 사용하지는 않았어요! 추후 mds로 같이 마이그레이션 할 필요는 있어 보입니다!
그리고 어떤 부분에서 디자인이 다를까요? 다른 점을 잘 못찾겠어서요,,,

앗 closed 버튼(x자 버튼 유무) 이나 line height같은게 조금 다른 부분이 저도 작업하다가 있더라고요!! mds를 사용하지 않았다면 나중에 같이 마이그레이션 하면 될 것 같아요 :)

hayounSong · 2024-09-16T12:07:23Z

src/components/members/hooks/useBlockMember.ts

+  const { mutate } = usePostBlockMemberMutation();
+
+  const handleBlockMember = async (memberId?: number) => {
+    if (!memberId) throw new Error('Invalid Member id');


예외 처리 꼼꼼함에 박수를....폼 미쳤다!!!

hayounSong · 2024-09-16T12:10:40Z

src/components/members/detail/ActivitySection/MemberDetail.tsx

@@ -147,7 +174,7 @@ const MemberDetail: FC<MemberDetailProps> = ({ memberId }) => {
            </ContactWrapper>
          </ProfileContents>

-          {profile.isMine && (
+          {profile.isMine ? (


여기를 레거시 코드에서 로직을 변경한 이유가 있을까요!

내 멤버의 뷰를 보냐에 따라서 edit 버튼과 신고/차단할 수 있는 메뉴 드롭다운이 나와야하는데, 그래서 조건에 따라서 분기처리를 추가했습니다!

hayounSong · 2024-09-16T12:19:30Z

src/components/feed/common/FeedDropdown.tsx

@@ -1,3 +1,4 @@
+import { css } from '@emotion/react';


여기가 css가 쓰이지 않는거같은데.. 없애주는게 필요할 것 같아요!!

반영했습니다!

seojisoosoo · 2024-09-17T10:29:49Z

src/components/feed/common/hooks/useReportFeed.ts

        okButtonText: '신고하기',
        cancelButtonText: '취소',
-        maxWidth: 324,
+        maxWidth: 400,
+        zIndex: zIndex.헤더,


z-index 위계를 한 번 쭉 정의내릴 필요는 있어보여요...! 저도 맨날 하나씩 확인해서 올리고 그랬어서...

seojisoosoo · 2024-09-17T10:50:22Z

src/components/members/detail/ActivitySection/MemberDetail.tsx

+  useEffect(() => {
+    const resizeMenuWidth = () => {
+      setDropdownOpenStyle((prevStyle) => ({
+        ...prevStyle,
+        minWidth: window.innerWidth <= 768 ? '100px' : '133px',
+      }));
+    };


q : 혹시 이렇게 구현한 이유가 있으실까요? 단순히 스타일링을 내려주기 위함이라면 미디어쿼리를 이용할 수도 있을 것 같아서요!

p2 :
그리고 혹시 FeedDropdown이 피드쪽에서만 사용되는 컴포넌트로 보이는데, 맞을까요?? 그렇다면, 이렇게 스타일을 props로 내려주는 것보다, FeedDropdown의 디자인이 아예 바뀐 것이니, FeedDropdown의 스타일을 바꿔주는 게 더 좋을 것 같아요!

a
스타일링을 내려주기 위해서입니다! 미디어쿼리를 사용하니, 가장 상위 컴포넌트인 <DropdownMenu.Root> 에 스타일이 적용이 되어 <StyledContent> 에 스타일을 주기 위해서 추가했어요!

사실 이 코멘트를 확인하기 전에 머지를 했는데, 지금 보니 FeedDropdown의 스타일을 바꾸는 것이 더 좋아보이네요..!
추후 수정하겠습니다! 감사합니다!

최대한 스타일 방식은 스타일드 컴포넌트를 사용하는 현재 방식을 유지하는 것이 좋을 것 같구, window.innerWidth <= 768 이렇게 진행하게 되면 엔드포인트가 공통적으로 관리되지 않을 수도 있을 것 같아서 추후 수정하면 말해주세용

FeedDropdown의 스타일을 바꿔주는 게 더 좋을 것 같아요!

@seojisoosoo 이 코멘트 반영했습니다!

seojisoosoo · 2024-09-17T11:29:19Z

src/components/members/hooks/useBlockMember.ts

+            queryClient.invalidateQueries({
+              predicate: (query) => query.queryKey.some((key) => String(key).includes('community')),
+            });
+            await router.push(playgroundLink.memberList());


q :
오오..! 이거 원리가 궁금해용
쿼리키를 queryKey: useGetPostsInfiniteQuery.getKey(postId) 요런 식으로 생성하는데, 이렇게 생성할 때의 쿼리 키 배열에community가 들어있는건가요.?!

a
저희가 멤버를 차단하면 그 멤버가 작성한 게시글과 댓글이 안보여야 하는데, 멤버 각각이 포함된 게시글과 댓글이 캐싱된 것을 invalidate 하기가 어려워 useGetPostsInfiniteQuery.getKey(postId), getPost.cacheKey(id), getComment.cacheKey(postId) 에서 community가 포함된 쿼리키를 invalidate 하는 로직입니다!

This reverts commit 105862c.

pepperdad added 13 commits September 14, 2024 23:10

feat: Toast mds 적용 및 UX 라이팅 변경

abfaa16

fix: 모바일 뷰에서 헤더보다 높이 있도록 zIndex 추가

e8bcab1

fix: dialog 모바일 폰트 변경

6efe297

fix: maxWidth 400으로 변경

d51b5e4

feat: 멤버 페이지 메뉴 버튼 추가

0182393

내 프로필인지 여부에 따라서 수정/메뉴 버튼 분기 처리

feat: Dropdown 컴포넌트에 커스텀 스타일 추가할 수 있도록 변경

1946950

feat: Dropdown UI 추가

48e0b67

신고, 차단 Item 추가 및 반응형 width 설정

fix: 모달 Title 폰트 반응형으로 수정

0f01610

feat: 멤버 신고 API 추가

77b159f

feat: useReportMember 훅 및 멤버 신고 기능 추가

44ee9cf

feat: 멤버 차단 API 추가

5f6104b

feat: useBlockMember 훅 및 멤버 차단 기능 추가

ccb3a67

chore: 콘솔 제거

6c57f72

pull-request-size bot added the size/L label Sep 15, 2024

github-actions bot requested a review from hayounSong September 15, 2024 15:15

hayounSong approved these changes Sep 16, 2024

View reviewed changes

pepperdad added 5 commits September 17, 2024 00:39

chore: sopt-makers/icons 패키지 추가

2c8f951

feat: 멤버 페이지에서 메뉴 드롭다운시 아이콘 표기하도록 변경

cc20657

fix: 아이콘과 글자 사이 gap 변경

b3d21b8

feat: 피드 페이지 메뉴 드롭다운시 아이콘 표기하도록 변경

2facec0

chore: 불필요한 import문 제거

f925388

pepperdad requested a review from hayounSong September 17, 2024 08:41

hayounSong approved these changes Sep 17, 2024

View reviewed changes

pepperdad added this pull request to the merge queue Sep 17, 2024

pepperdad self-assigned this Sep 17, 2024

Merged via the queue into main with commit 105862c Sep 17, 2024
5 checks passed

seojisoosoo reviewed Sep 17, 2024

View reviewed changes

pepperdad added a commit that referenced this pull request Sep 17, 2024

Revert "feat: 게시글 신고 Toast mds로 변경 및 멤버 신고/차단 기능 추가 (#1555)"

05cac8a

This reverts commit 105862c.

pepperdad mentioned this pull request Sep 17, 2024

Revert "feat: 게시글 신고 Toast mds로 변경 및 멤버 신고/차단 기능 추가 (#1555)" #1559

Merged

github-merge-queue bot pushed a commit that referenced this pull request Sep 17, 2024

Revert "feat: 게시글 신고 Toast mds로 변경 및 멤버 신고/차단 기능 추가 (#1555)" (#1559)

994aa06

This reverts commit 105862c.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: 게시글 신고 Toast mds로 변경 및 멤버 신고/차단 기능 추가 #1555

feat: 게시글 신고 Toast mds로 변경 및 멤버 신고/차단 기능 추가 #1555

pepperdad commented Sep 15, 2024 •

edited

Loading

height bot commented Sep 15, 2024

github-actions bot commented Sep 15, 2024 •

edited

Loading

github-actions bot commented Sep 15, 2024 •

edited

Loading

hayounSong left a comment

hayounSong Sep 16, 2024

pepperdad Sep 17, 2024

seojisoosoo Sep 17, 2024

hayounSong Sep 16, 2024

pepperdad Sep 17, 2024

hayounSong Sep 17, 2024

hayounSong Sep 16, 2024

hayounSong Sep 16, 2024

pepperdad Sep 17, 2024

hayounSong Sep 16, 2024

pepperdad Sep 17, 2024

seojisoosoo Sep 17, 2024

seojisoosoo Sep 17, 2024

pepperdad Sep 17, 2024

seojisoosoo Sep 17, 2024

pepperdad Sep 17, 2024

seojisoosoo Sep 17, 2024

pepperdad Sep 17, 2024

feat: 게시글 신고 Toast mds로 변경 및 멤버 신고/차단 기능 추가 #1555

feat: 게시글 신고 Toast mds로 변경 및 멤버 신고/차단 기능 추가 #1555

Conversation

pepperdad commented Sep 15, 2024 • edited Loading

🤫 쉿, 나한테만 말해줘요. 이슈넘버

🧐 어떤 것을 변경했어요~?

🤔 그렇다면, 어떻게 구현했어요~?

❤️‍🔥 당신이 생각하는 PR포인트, 내겐 매력포인트.

📸 스크린샷, 없으면 이것 참,, 섭섭한데요?

height bot commented Sep 15, 2024

github-actions bot commented Sep 15, 2024 • edited Loading

github-actions bot commented Sep 15, 2024 • edited Loading

hayounSong left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pepperdad commented Sep 15, 2024 •

edited

Loading

github-actions bot commented Sep 15, 2024 •

edited

Loading

github-actions bot commented Sep 15, 2024 •

edited

Loading