From 24bf61acf2f9aa2e6dc74d761deb0b69d578a5f8 Mon Sep 17 00:00:00 2001 From: Lee jin <83453646+j-nary@users.noreply.github.com> Date: Mon, 23 Sep 2024 20:07:57 +0900 Subject: [PATCH] =?UTF-8?q?=ED=94=BC=EB=93=9C=ED=99=88/=ED=94=BC=EB=93=9C?= =?UTF-8?q?=EC=83=81=EC=84=B8/=EB=AA=A8=EC=9E=84=EC=83=81=EC=84=B8/?= =?UTF-8?q?=EB=8C=93=EA=B8=80/=EB=8C=80=EB=8C=93=EA=B8=80=20=EC=B0=A8?= =?UTF-8?q?=EB=8B=A8=EB=90=9C=20=EC=BB=A8=ED=85=90=EC=B8=A0=20UI=20+=20API?= =?UTF-8?q?=20=EC=97=B0=EA=B2=B0=20(#867)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * test * feat: ContentBlocker 컴포넌트 구현 * feat: 피드 홈 적용 (API 연결 X) * feat: 피드 상세 적용 (API 연결 X) * feat: 모임 상세 적용 (API 연결 X) * docs: 불필요한 코드 삭제 * feat: 피드 상세 적용 추가 * docs: 폴더 이름 변경 * feat: 댓글/답글 적용 (API 연결 X) * feat: ContentBlocker API 연결 * feat: CommentBlocker API 연결 * fix: isBlockedPost 로 수정 * fix: build 에러 수정 --------- Co-authored-by: borimong --- pages/post/index.tsx | 309 +++++---- src/__generated__/schema2.d.ts | 29 +- src/components/blocker/CommentBlocker.tsx | 42 ++ src/components/blocker/ContentBlocker.tsx | 36 + .../FeedCommentContainer.tsx | 8 +- .../FeedCommentViewer.stories.ts | 1 + .../page/meetingDetail/Feed/FeedPanel.tsx | 55 +- .../page/meetingList/Advertisement/index.tsx | 628 +++++++++--------- .../page/meetingList/Card/DesktopSizeCard.tsx | 1 - 9 files changed, 621 insertions(+), 488 deletions(-) create mode 100644 src/components/blocker/CommentBlocker.tsx create mode 100644 src/components/blocker/ContentBlocker.tsx diff --git a/pages/post/index.tsx b/pages/post/index.tsx index cea0cb0c..d2d89348 100644 --- a/pages/post/index.tsx +++ b/pages/post/index.tsx @@ -7,6 +7,7 @@ import { PostCommentWithMentionRequest } from '@api/mention'; import { useMutationPostCommentWithMention } from '@api/mention/hooks'; import { useInfinitePosts, useMutationPostLike, useMutationUpdateLike, useQueryGetPost } from '@api/post/hooks'; import LikeButton from '@components/button/LikeButton'; +import ContentBlocker from '@components/blocker/ContentBlocker'; import FeedActionButton from '@components/feed/FeedActionButton/FeedActionButton'; import FeedCommentContainer from '@components/feed/FeedCommentContainer/FeedCommentContainer'; import FeedCommentInput from '@components/feed/FeedCommentInput/FeedCommentInput'; @@ -132,6 +133,8 @@ export default function PostPage() { !!comment ); + console.log({ comments }); + const handleClickComment = () => { const refCurrent = commentRef.current; if (refCurrent) { @@ -284,80 +287,86 @@ export default function PostPage() { {postsInMeeting?.map(post => { if (!post) return; return ( - - + {post.isBlockedPost ? ( + + ) : ( + + + } + Actions={ + isMine + ? [ + + overlay.open(({ isOpen, close }) => ( + + )) + } + > + + 수정 + , + { + overlay.open(({ isOpen, close }) => ( + // eslint-disable-next-line prettier/prettier + + )); + }} + > + + 삭제 + , + ] + : [ + { + overlay.open(({ isOpen, close }) => ( + // eslint-disable-next-line prettier/prettier + + )); + }} + > + + 신고 + , + ] + } /> - } - Actions={ - isMine - ? [ - - overlay.open(({ isOpen, close }) => ( - - )) - } - > - - 수정 - , - { - overlay.open(({ isOpen, close }) => ( - // eslint-disable-next-line prettier/prettier - - )); - }} - > - - 삭제 - , - ] - : [ - { - overlay.open(({ isOpen, close }) => ( - // eslint-disable-next-line prettier/prettier - - )); - }} - > - - 신고 - , - ] - } - /> - + + )} + ); })} @@ -369,81 +378,87 @@ export default function PostPage() { {allMeetingPosts?.map(post => { if (!post) return; return ( - - } - // eslint-disable-next-line prettier/prettier - LikeButton={ - + {post.isBlockedPost ? ( + + ) : ( + + } + // eslint-disable-next-line prettier/prettier + LikeButton={ + + } + Actions={ + isMine + ? [ + + overlay.open(({ isOpen, close }) => ( + + )) + } + > + + 수정 + , + { + overlay.open(({ isOpen, close }) => ( + // eslint-disable-next-line prettier/prettier + + )); + }} + > + + 삭제 + , + ] + : [ + { + overlay.open(({ isOpen, close }) => ( + // eslint-disable-next-line prettier/prettier + + )); + }} + > + + 신고 + , + ] + } /> - } - Actions={ - isMine - ? [ - - overlay.open(({ isOpen, close }) => ( - - )) - } - > - - 수정 - , - { - overlay.open(({ isOpen, close }) => ( - // eslint-disable-next-line prettier/prettier - - )); - }} - > - - 삭제 - , - ] - : [ - { - overlay.open(({ isOpen, close }) => ( - // eslint-disable-next-line prettier/prettier - - )); - }} - > - - 신고 - , - ] - } - /> - + + )} + ); })} diff --git a/src/__generated__/schema2.d.ts b/src/__generated__/schema2.d.ts index 2536e085..7c99ba14 100644 --- a/src/__generated__/schema2.d.ts +++ b/src/__generated__/schema2.d.ts @@ -848,19 +848,6 @@ export interface components { */ count: number; }; - MemberBlock: { - /** Format: int64 */ - id?: number; - /** Format: date-time */ - createdAt?: string; - /** Format: date-time */ - updatedAt?: string; - isBlocked: boolean; - /** Format: int64 */ - blockedMember: number; - /** Format: int64 */ - blocker: number; - }; /** @description 페이지 메타 정보 */ PageMetaDto: { /** @@ -952,7 +939,11 @@ export interface components { * ] */ commenterThumbnails: string[]; - blockedPost?: boolean; + /** + * @description 차단된 유저의 게시물인지 여부 + * @example false + */ + isBlockedPost: boolean; }; /** @description 게시글에 대한 모임 Dto */ PostMeetingDto: { @@ -1784,6 +1775,11 @@ export interface components { order: number; /** @description 대댓글 객체 목록 */ replies: components["schemas"]["ReplyDto"][]; + /** + * @description 차단여부 + * @example false + */ + isBlockedComment: boolean; }; /** @description 댓글 목록 조회 응답 Dto */ CommentV2GetCommentsResponseDto: { @@ -1856,6 +1852,11 @@ export interface components { * @example 2 */ order: number; + /** + * @description 차단여부 + * @example false + */ + isBlockedComment: boolean; }; /** @description 광고 구좌 조회 응답 Dto */ AdvertisementGetResponseDto: { diff --git a/src/components/blocker/CommentBlocker.tsx b/src/components/blocker/CommentBlocker.tsx new file mode 100644 index 00000000..9bf649c9 --- /dev/null +++ b/src/components/blocker/CommentBlocker.tsx @@ -0,0 +1,42 @@ +import { styled } from 'stitches.config'; +import RecommentPointIcon from '@assets/svg/recomment_point_icon.svg'; + +interface CommentBlockerProps { + variant?: 'default' | 'secondary'; +} +const CommentBlocker = ({ variant = 'default' }: CommentBlockerProps) => { + return ( + + {variant == 'secondary' && } + 차단된 멤버의 게시글입니다. + + ); +}; + +export default CommentBlocker; + +const Container = styled('div', { + display: 'flex', + variants: { + variant: { + default: { + paddingLeft: '$40', + }, + secondary: { + paddingLeft: '$16', + '@tablet': { + paddingLeft: '$12', + }, + }, + }, + }, +}); + +const BlockerMessage = styled('p', { + fontAg: '16_medium_150', + color: '$gray500', + + '@tablet': { + fontAg: '14_medium_100', + }, +}); diff --git a/src/components/blocker/ContentBlocker.tsx b/src/components/blocker/ContentBlocker.tsx new file mode 100644 index 00000000..c0456b1b --- /dev/null +++ b/src/components/blocker/ContentBlocker.tsx @@ -0,0 +1,36 @@ +import { styled } from 'stitches.config'; + +const ContentBlocker = () => { + return ( + + 차단된 멤버의 게시글입니다. + + ); +}; + +export default ContentBlocker; + +const Container = styled('div', { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + + padding: '$20 $20 $28 $20', + height: '180px', + width: '380px', + + background: '$gray900', + borderRadius: '12px', + + '@tablet': { + padding: '$24 0 $28 0', + background: 'transparent', + borderRadius: 0, + margin: '0 auto', + }, +}); + +const BlockerMessage = styled('p', { + fontAg: '14_semibold_100', + color: '$gray500', +}); diff --git a/src/components/feed/FeedCommentContainer/FeedCommentContainer.tsx b/src/components/feed/FeedCommentContainer/FeedCommentContainer.tsx index 4495a034..772576da 100644 --- a/src/components/feed/FeedCommentContainer/FeedCommentContainer.tsx +++ b/src/components/feed/FeedCommentContainer/FeedCommentContainer.tsx @@ -25,6 +25,8 @@ import ReWriteIcon from '@assets/svg/comment-write.svg'; import TrashIcon from '@assets/svg/trash.svg'; import AlertIcon from '@assets/svg/alert-triangle.svg'; import { useToast } from '@sopt-makers/ui'; +import CommentBlocker from '@components/blocker/CommentBlocker'; + interface FeedCommentContainerProps { comment: paths['/comment/v2']['get']['responses']['200']['content']['application/json;charset=UTF-8']['comments'][number]; isMine: boolean; @@ -83,6 +85,8 @@ export default function FeedCommentContainer({ comment, isMine, postUserId, onCl <> {comment.user.id === null ? (
{comment.contents}
+ ) : comment.isBlockedComment ? ( + ) : ( {comment?.replies?.map((reply: replyType) => { - return ( + return reply.isBlockedComment ? ( + + ) : ( { const renderedPosts = postsData?.pages.map(post => { if (!post) return; return ( - - - } - onClick={() => - ampli.clickFeedCard({ - feed_id: post.id, - feed_upload: post.updatedDate, - feed_title: post.title, - feed_image_total: post.images ? post.images.length : 0, - feed_comment_total: post.commentCount, - feed_like_total: post.likeCount, - group_id: Number(meetingId), - crew_status: meeting?.approved, - platform_type: isMobile ? 'MO' : 'PC', - location: router.pathname, - }) - } - /> - + <> + {post.isBlockedPost ? ( + + ) : ( + + + } + onClick={() => + ampli.clickFeedCard({ + feed_id: post.id, + feed_upload: post.updatedDate, + feed_title: post.title, + feed_image_total: post.images ? post.images.length : 0, + feed_comment_total: post.commentCount, + feed_like_total: post.likeCount, + group_id: Number(meetingId), + crew_status: meeting?.approved, + platform_type: isMobile ? 'MO' : 'PC', + location: router.pathname, + }) + } + /> + + )} + ); }); diff --git a/src/components/page/meetingList/Advertisement/index.tsx b/src/components/page/meetingList/Advertisement/index.tsx index 8fe03eb5..ffdd4673 100644 --- a/src/components/page/meetingList/Advertisement/index.tsx +++ b/src/components/page/meetingList/Advertisement/index.tsx @@ -21,6 +21,7 @@ import AlertIcon from '@assets/svg/alert-triangle.svg'; import { useQueryMyProfile } from '@api/API_LEGACY/user/hooks'; import PostDeleteModal from './PostDeleteModal'; import PostAlertModal from './PostAlertModal'; +import ContentBlocker from '@components/blocker/ContentBlocker'; const RenderPostsWithAds = () => { const { isMobile, isTablet } = useDisplay(); @@ -55,81 +56,87 @@ const RenderPostsWithAds = () => { const isMine = post.user.id === me?.id; return ( - - + {post.isBlockedPost ? ( + + ) : ( + + + } + onClick={() => + ampli.clickFeedCard({ + feed_id: post.id, + feed_upload: post.updatedDate, + feed_title: post.title, + feed_image_total: post.images ? post.images.length : 0, + feed_comment_total: post.commentCount, + feed_like_total: post.likeCount, + group_id: post.meeting.id, + platform_type: isMobile ? 'MO' : 'PC', + location: router.pathname, + }) + } + HeaderSection={} + Actions={ + isMine + ? [ + + overlay.open(({ isOpen, close }) => ( + + )) + } + > + + 수정 + , + { + overlay.open(({ isOpen, close }) => ( + + )); + }} + > + + 삭제 + , + ] + : [ + { + overlay.open(({ isOpen, close }) => ( + // eslint-disable-next-line prettier/prettier + + )); + }} + > + + 신고 + , + ] + } /> - } - onClick={() => - ampli.clickFeedCard({ - feed_id: post.id, - feed_upload: post.updatedDate, - feed_title: post.title, - feed_image_total: post.images ? post.images.length : 0, - feed_comment_total: post.commentCount, - feed_like_total: post.likeCount, - group_id: post.meeting.id, - platform_type: isMobile ? 'MO' : 'PC', - location: router.pathname, - }) - } - HeaderSection={} - Actions={ - isMine - ? [ - - overlay.open(({ isOpen, close }) => ( - - )) - } - > - - 수정 - , - { - overlay.open(({ isOpen, close }) => ( - - )); - }} - > - - 삭제 - , - ] - : [ - { - overlay.open(({ isOpen, close }) => ( - // eslint-disable-next-line prettier/prettier - - )); - }} - > - - 신고 - , - ] - } - /> - + + )} + ); })} {postAds && } @@ -138,81 +145,87 @@ const RenderPostsWithAds = () => { const isMine = post.user.id === me?.id; return ( - - + {post.isBlockedPost ? ( + + ) : ( + + + } + onClick={() => + ampli.clickFeedCard({ + feed_id: post.id, + feed_upload: post.updatedDate, + feed_title: post.title, + feed_image_total: post.images ? post.images.length : 0, + feed_comment_total: post.commentCount, + feed_like_total: post.likeCount, + group_id: post.meeting.id, + platform_type: isMobile ? 'MO' : 'PC', + location: router.pathname, + }) + } + HeaderSection={} + Actions={ + isMine + ? [ + + overlay.open(({ isOpen, close }) => ( + + )) + } + > + + 수정 + , + { + overlay.open(({ isOpen, close }) => ( + + )); + }} + > + + 삭제 + , + ] + : [ + { + overlay.open(({ isOpen, close }) => ( + // eslint-disable-next-line prettier/prettier + + )); + }} + > + + 신고 + , + ] + } /> - } - onClick={() => - ampli.clickFeedCard({ - feed_id: post.id, - feed_upload: post.updatedDate, - feed_title: post.title, - feed_image_total: post.images ? post.images.length : 0, - feed_comment_total: post.commentCount, - feed_like_total: post.likeCount, - group_id: post.meeting.id, - platform_type: isMobile ? 'MO' : 'PC', - location: router.pathname, - }) - } - HeaderSection={} - Actions={ - isMine - ? [ - - overlay.open(({ isOpen, close }) => ( - - )) - } - > - - 수정 - , - { - overlay.open(({ isOpen, close }) => ( - - )); - }} - > - - 삭제 - , - ] - : [ - { - overlay.open(({ isOpen, close }) => ( - // eslint-disable-next-line prettier/prettier - - )); - }} - > - - 신고 - , - ] - } - /> - + + )} + ); })} @@ -222,82 +235,89 @@ const RenderPostsWithAds = () => { const isMine = post.user.id === me?.id; if (!post) return; + return ( - - + {post.isBlockedPost ? ( + + ) : ( + + + } + onClick={() => + ampli.clickFeedCard({ + feed_id: post.id, + feed_upload: post.updatedDate, + feed_title: post.title, + feed_image_total: post.images ? post.images.length : 0, + feed_comment_total: post.commentCount, + feed_like_total: post.likeCount, + group_id: post.meeting.id, + platform_type: isMobile ? 'MO' : 'PC', + location: router.pathname, + }) + } + HeaderSection={} + Actions={ + isMine + ? [ + + overlay.open(({ isOpen, close }) => ( + + )) + } + > + + 수정 + , + { + overlay.open(({ isOpen, close }) => ( + + )); + }} + > + + 삭제 + , + ] + : [ + { + overlay.open(({ isOpen, close }) => ( + // eslint-disable-next-line prettier/prettier + + )); + }} + > + + 신고 + , + ] + } /> - } - onClick={() => - ampli.clickFeedCard({ - feed_id: post.id, - feed_upload: post.updatedDate, - feed_title: post.title, - feed_image_total: post.images ? post.images.length : 0, - feed_comment_total: post.commentCount, - feed_like_total: post.likeCount, - group_id: post.meeting.id, - platform_type: isMobile ? 'MO' : 'PC', - location: router.pathname, - }) - } - HeaderSection={} - Actions={ - isMine - ? [ - - overlay.open(({ isOpen, close }) => ( - - )) - } - > - - 수정 - , - { - overlay.open(({ isOpen, close }) => ( - - )); - }} - > - - 삭제 - , - ] - : [ - { - overlay.open(({ isOpen, close }) => ( - // eslint-disable-next-line prettier/prettier - - )); - }} - > - - 신고 - , - ] - } - /> - + + )} + ); })} {postAds && } @@ -307,86 +327,92 @@ const RenderPostsWithAds = () => { const isMine = post.user.id === me?.id; return ( - - + {post.isBlockedPost ? ( + + ) : ( + + + } + onClick={() => + ampli.clickFeedCard({ + feed_id: post.id, + feed_upload: post.updatedDate, + feed_title: post.title, + feed_image_total: post.images ? post.images.length : 0, + feed_comment_total: post.commentCount, + feed_like_total: post.likeCount, + group_id: post.meeting.id, + platform_type: isMobile ? 'MO' : 'PC', + location: router.pathname, + }) + } + HeaderSection={} + Actions={ + isMine + ? [ + { + overlay.open(({ isOpen, close }) => ( + + )); + }} + > + + 수정 + , + { + { + overlay.open(({ isOpen, close }) => ( + // eslint-disable-next-line prettier/prettier + + )); + } + }} + > + + 삭제 + , + ] + : [ + { + { + overlay.open(({ isOpen, close }) => ( + // eslint-disable-next-line prettier/prettier + + )); + } + }} + > + + 신고 + , + ] + } /> - } - onClick={() => - ampli.clickFeedCard({ - feed_id: post.id, - feed_upload: post.updatedDate, - feed_title: post.title, - feed_image_total: post.images ? post.images.length : 0, - feed_comment_total: post.commentCount, - feed_like_total: post.likeCount, - group_id: post.meeting.id, - platform_type: isMobile ? 'MO' : 'PC', - location: router.pathname, - }) - } - HeaderSection={} - Actions={ - isMine - ? [ - { - overlay.open(({ isOpen, close }) => ( - - )); - }} - > - - 수정 - , - { - { - overlay.open(({ isOpen, close }) => ( - // eslint-disable-next-line prettier/prettier - - )); - } - }} - > - - 삭제 - , - ] - : [ - { - { - overlay.open(({ isOpen, close }) => ( - // eslint-disable-next-line prettier/prettier - - )); - } - }} - > - - 신고 - , - ] - } - /> - + + )} + ); })} diff --git a/src/components/page/meetingList/Card/DesktopSizeCard.tsx b/src/components/page/meetingList/Card/DesktopSizeCard.tsx index 92c5ab2a..9a83ca7e 100644 --- a/src/components/page/meetingList/Card/DesktopSizeCard.tsx +++ b/src/components/page/meetingList/Card/DesktopSizeCard.tsx @@ -13,7 +13,6 @@ interface CardProps { } function DesktopSizeCard({ meetingData, isAllParts }: CardProps) { - console.log(meetingData); return (