피드홈/피드상세/모임상세/댓글/대댓글 차단된 컨텐츠 UI + API 연결 (#867)

* 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 <[email protected]>
sopt-makers · Sep 23, 2024 · 24bf61a · 24bf61a
1 parent 8afdd02
commit 24bf61a
Show file tree

Hide file tree

Showing 9 changed files with 621 additions and 488 deletions.
diff --git a/pages/post/index.tsx b/pages/post/index.tsx
diff --git a/src/__generated__/schema2.d.ts b/src/__generated__/schema2.d.ts
diff --git a/src/components/blocker/CommentBlocker.tsx 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 (
+    <Container variant={variant}>
+      {variant == 'secondary' && <RecommentPointIcon style={{ marginRight: '12px' }} />}
+      <BlockerMessage>차단된 멤버의 게시글입니다.</BlockerMessage>
+    </Container>
+  );
+};
+
+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
@@ -0,0 +1,36 @@
+import { styled } from 'stitches.config';
+
+const ContentBlocker = () => {
+  return (
+    <Container>
+      <BlockerMessage>차단된 멤버의 게시글입니다.</BlockerMessage>
+    </Container>
+  );
+};
+
+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
@@ -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 ? (
         <div style={{ color: colors.gray500 }}>{comment.contents}</div>
+      ) : comment.isBlockedComment ? (
+        <CommentBlocker />
       ) : (
         <FeedCommentViewer
           key={comment.id}
@@ -174,7 +178,9 @@ export default function FeedCommentContainer({ comment, isMine, postUserId, onCl
       ) : (
         <>
           {comment?.replies?.map((reply: replyType) => {
-            return (
+            return reply.isBlockedComment ? (
+              <CommentBlocker variant="secondary" />
+            ) : (
               <FeedReCommentContainer
                 comment={comment}
                 reply={reply}

diff --git a/src/components/feed/FeedCommentViewer/FeedCommentViewer.stories.ts b/src/components/feed/FeedCommentViewer/FeedCommentViewer.stories.ts
@@ -30,6 +30,7 @@ export const Default: Story = {
       isLiked: false,
       isWriter: true,
       order: 0,
+      isBlockedComment: false,
     },
     isMine: true,
     Actions: ['수정', '삭제'],

diff --git a/src/components/page/meetingDetail/Feed/FeedPanel.tsx b/src/components/page/meetingDetail/Feed/FeedPanel.tsx
@@ -17,6 +17,7 @@ import { styled } from 'stitches.config';
 import EmptyView from './EmptyView';
 import FeedItem from './FeedItem';
 import MobileFeedListSkeleton from './Skeleton/MobileFeedListSkeleton';
+import ContentBlocker from '@components/blocker/ContentBlocker';
 
 interface FeedPanelProps {
   isMember: boolean;
@@ -71,30 +72,36 @@ const FeedPanel = ({ isMember }: FeedPanelProps) => {
   const renderedPosts = postsData?.pages.map(post => {
     if (!post) return;
     return (
-      <Link href={`/post?id=${post.id}`} key={post.id}>
-        <FeedItem
-          /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
-          /* @ts-ignore */
-          post={post}
-          LikeButton={
-            <LikeButton isLiked={post.isLiked} likeCount={post.likeCount} onClickLike={handleLikeClick(post.id)} />
-          }
-          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,
-            })
-          }
-        />
-      </Link>
+      <>
+        {post.isBlockedPost ? (
+          <ContentBlocker />
+        ) : (
+          <Link href={`/post?id=${post.id}`} key={post.id}>
+            <FeedItem
+              /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+              /* @ts-ignore */
+              post={post}
+              LikeButton={
+                <LikeButton isLiked={post.isLiked} likeCount={post.likeCount} onClickLike={handleLikeClick(post.id)} />
+              }
+              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,
+                })
+              }
+            />
+          </Link>
+        )}
+      </>
     );
   });