feat: comment input (#develop)

Author: createhb21

services/ahhachul.com/src/components/common/comment/commentInput/CommentInput.component.tsx

@@ -115,7 +115,10 @@ const SubmitComment = ({
         <UiComponent.Checkbox
           label="비공개 댓글"
           checked={isPrivate}
-          onChange={e => setIsPrivate(e.target.checked)}
+          onChange={e => {
+            setIsPrivate(e.target.checked);
+            editor.focus();
+          }}
         />
       )}
       <S.ButtonGroup>

services/ahhachul.com/src/components/common/comment/commentInput/CommentInput.styled.tsx

@@ -7,7 +7,7 @@ export const contentEditableCss = (disalbed: boolean) => (theme: Theme) => css`
   width: 100%;
   border: 1px solid ${disalbed ? theme.colors.gray[20] : theme.colors.gray[50]};
   border-radius: 5px;
-  padding: 12px;
+  padding: 12px 16px;
   overflow: hidden;
   text-wrap: wrap;
   color: ${theme.colors.gray[90]};
@@ -33,7 +33,7 @@ export const Container = styled.section`
   filter: drop-shadow(0px -1px 12px rgba(0, 0, 0, 0.04));
 
   & > #editor-container {
-    padding: 12px;
+    padding: 12px 16px;
     background-color: white;
 
     & > div {
@@ -47,7 +47,7 @@ export const Container = styled.section`
     }
 
     & > pre {
-      left: 13px;
+      left: 16px;
       top: 13px;
     }
   }
@@ -58,13 +58,14 @@ export const SubmitBox = styled.div<{ showIsPrivateBtn?: boolean }>`
     width: 100%;
     margin: 0 auto;
     background: #fff;
-    padding: 12px 8px;
+    padding: 12px 16px;
     padding-top: 0;
     border-radius: 6px;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: ${showIsPrivateBtn ? 'space-between' : 'flex-end'};
+    padding-bottom: 32px;
   `}
 `;
 

services/ahhachul.com/src/components/common/comment/commentListItem/CommentListItem.component.tsx

@@ -39,7 +39,7 @@ const Comment = ({ comment, asChild = false }: CommentCardProps) => {
   }, [activity.params]);
 
   return (
-    <S.CommentWrapper asChild={asChild}>
+    <S.CommentWrapper asChild={asChild} data-comment-id={comment.id}>
       <S.HeaderWrapper>
         <S.WriterName>{comment.writer}</S.WriterName>
         <CommentDropEllipsis

services/ahhachul.com/src/components/domain/community/postDetail/commentInput/CommentInput.component.tsx

@@ -0,0 +1,61 @@
+import { useQueryClient } from '@tanstack/react-query';
+
+import { sleep } from '@ahhachul/utils';
+
+import { UiComponent } from '@/components';
+import { useAuth } from '@/contexts';
+import { usePostComment } from '@/services/comment';
+import { communityKeys } from '@/services/community';
+
+type Props = {
+  id: number;
+};
+
+const CommuntiyCommentInput = ({ id }: Props) => {
+  const {
+    authService: { isAuthenticated },
+  } = useAuth();
+  const queryClient = useQueryClient();
+  const communityCommentQueryKey = communityKeys.comments(id);
+  const { mutate } = usePostComment();
+
+  const submitComment = ({ isPrivate, comment }: { isPrivate: boolean; comment: string }) => {
+    mutate(
+      {
+        postId: id,
+        content: comment,
+        upperCommentId: null,
+        isPrivate: isPrivate,
+        servicePath: 'community-posts',
+      },
+      {
+        onSuccess: async res => {
+          queryClient.invalidateQueries({
+            queryKey: communityCommentQueryKey,
+          });
+
+          await sleep(250);
+
+          const comment = document.querySelector(`[data-comment-id="${res.result.id}"]`);
+          if (comment) {
+            comment.scrollIntoView({
+              block: 'start',
+              behavior: 'smooth',
+            });
+          }
+        },
+      },
+    );
+  };
+
+  return (
+    <UiComponent.CommentInput
+      showIsPrivateBtn
+      onSubmit={submitComment}
+      disabled={!isAuthenticated}
+      placeholder="댓글을 입력해주세요."
+    />
+  );
+};
+
+export default CommuntiyCommentInput;

services/ahhachul.com/src/components/domain/community/postDetail/index.ts

@@ -4,3 +4,4 @@ export { default as CommunityDetailSkeleton } from './skeleton/CommunityDetail.s
 export { default as CommunityCommentList } from './commentList/CommunityCommentList.component';
 export { default as CommunityCategoryBadge } from './categoryBadge/CommunityCategoryBadge.component';
 export { default as CommunityDetailHeaderActions } from './headerActions/CommunityHeaderActions.component';
+export { default as CommuntiyCommentInput } from './commentInput/CommentInput.component';

services/ahhachul.com/src/components/domain/community/postDetail/template/CommunityDetail.component.tsx

@@ -44,6 +44,8 @@ const CommunityDetail = ({ id }: CommunityDetailProps) => {
       </S.ArticleWrapper>
 
       <CommunityComponent.CommunityCommentList id={id} commentCnt={post.commentCnt} />
+      <CommunityComponent.CommuntiyCommentInput id={id} />
+      <S.Padding />
     </>
   );
 };

services/ahhachul.com/src/components/domain/community/postDetail/template/CommunityDetail.styled.tsx

@@ -96,3 +96,8 @@ export const LexicalContent = styled.div`
     }
   }
 `;
+
+export const Padding = styled.div`
+  width: 100%;
+  height: 234px;
+`;

services/ahhachul.com/src/components/domain/complaint/postDetail/commentInput/CommentInput.component.tsx

@@ -0,0 +1,61 @@
+import { useQueryClient } from '@tanstack/react-query';
+
+import { sleep } from '@ahhachul/utils';
+
+import { UiComponent } from '@/components';
+import { useAuth } from '@/contexts';
+import { usePostComment } from '@/services/comment';
+import { complaintKeys } from '@/services/complaint';
+
+type Props = {
+  id: number;
+};
+
+const ComplaintCommentInput = ({ id }: Props) => {
+  const {
+    authService: { isAuthenticated },
+  } = useAuth();
+  const queryClient = useQueryClient();
+  const complaintCommentQueryKey = complaintKeys.comments(id);
+  const { mutate } = usePostComment();
+
+  const submitComment = ({ isPrivate, comment }: { isPrivate: boolean; comment: string }) => {
+    mutate(
+      {
+        postId: id,
+        content: comment,
+        upperCommentId: null,
+        isPrivate: isPrivate,
+        servicePath: 'complaint-posts',
+      },
+      {
+        onSuccess: async res => {
+          queryClient.invalidateQueries({
+            queryKey: complaintCommentQueryKey,
+          });
+
+          await sleep(250);
+
+          const comment = document.querySelector(`[data-comment-id="${res.result.id}"]`);
+          if (comment) {
+            comment.scrollIntoView({
+              block: 'start',
+              behavior: 'smooth',
+            });
+          }
+        },
+      },
+    );
+  };
+
+  return (
+    <UiComponent.CommentInput
+      showIsPrivateBtn
+      onSubmit={submitComment}
+      disabled={!isAuthenticated}
+      placeholder="댓글을 입력해주세요."
+    />
+  );
+};
+
+export default ComplaintCommentInput;

services/ahhachul.com/src/components/domain/complaint/postDetail/index.ts

@@ -5,3 +5,4 @@ export { default as ComplaintDetailHeaderActions } from './headerActions/Complai
 export { default as ComplaintDetailSkeleton } from './skeleton/ComplaintDetail.skeleton';
 export { default as ComplaintErrorPage } from './error/ComplaintErrorPage.component';
 export { default as SendComplaintMessage } from './sendMessage/SendMessage.component';
+export { default as ComplaintCommentInput } from './commentInput/CommentInput.component';

services/ahhachul.com/src/components/domain/complaint/postDetail/template/ComplaintDetail.component.tsx

@@ -51,6 +51,8 @@ const ComplaintDetail = ({ id }: ComplaintDetailProps) => {
       </S.ArticleWrapper>
 
       <ComplaintComponent.ComplaintCommentList id={id} commentCnt={post.commentCnt} />
+      <ComplaintComponent.ComplaintCommentInput id={id} />
+      <S.Padding />
     </>
   );
 };