feat: comments (#develop)

createhb21 · createhb21 · commit 325a6c9863d5 · 2025-03-09T01:14:08.000+09:00
diff --git a/services/ahhachul.com/src/components/common/checkbox/Checkbox.component.tsx b/services/ahhachul.com/src/components/common/checkbox/Checkbox.component.tsx
@@ -73,7 +73,7 @@ const CheckboxControl = styled.div<{ checked?: boolean; disabled?: boolean }>`
 `;
 
 const CheckboxLabel = styled.span<{ disabled?: boolean }>`
-  color: ${props => (props.disabled ? '#33333E' : '#33333E')};
+  color: ${props => (props.disabled ? '#95979F' : '#33333E')};
   font-size: 13px;
   cursor: pointer;
 `;
diff --git a/services/ahhachul.com/src/components/common/comment/CommentList.component.tsx b/services/ahhachul.com/src/components/common/comment/CommentList.component.tsx
@@ -10,10 +10,11 @@ interface BaseCommentListProps {
   commentsMap: CommentList['comments'];
   servicePath: string;
   queryKey: readonly unknown[];
+  isArticleAuthor: boolean;
 }
 
 const BaseCommentList = React.memo(
-  ({ queryKey, servicePath, commentsMap }: BaseCommentListProps) => {
+  ({ queryKey, servicePath, commentsMap, isArticleAuthor }: BaseCommentListProps) => {
     const { setTempComment } = useTempComment();
 
     useEffect(() => setTempComment(commentsMap), [commentsMap]);
@@ -24,14 +25,20 @@ const BaseCommentList = React.memo(
       <>
         {commentsMap.map(({ parentComment, childComments }) => (
           <React.Fragment key={parentComment.id}>
-            <Comment comment={parentComment} queryKey={queryKey} servicePath={servicePath} />
+            <Comment
+              comment={parentComment}
+              queryKey={queryKey}
+              servicePath={servicePath}
+              isArticleAuthor={isArticleAuthor}
+            />
             {childComments.map(childComment => (
               <Comment
                 asChild
                 key={childComment.id}
                 comment={childComment}
                 queryKey={queryKey}
                 servicePath={servicePath}
+                isArticleAuthor={isArticleAuthor}
               />
             ))}
           </React.Fragment>
diff --git a/services/ahhachul.com/src/components/common/comment/commentActions/CommentActions.component.tsx b/services/ahhachul.com/src/components/common/comment/commentActions/CommentActions.component.tsx
@@ -8,7 +8,6 @@ import { Drawer } from 'vaul';
 
 import { CloseIcon, DangerIcon, PhraseIcon, WarningIcon } from '@/assets/icons/jsx/icons';
 import { EllipsisIcon } from '@/assets/icons/system';
-import { useUser } from '@/hooks/domain';
 import { useDeleteComment } from '@/services/comment';
 import { useFlow } from '@/stackflow';
 
@@ -17,24 +16,21 @@ import * as S from './CommentActions.styled';
 export interface CommentDropEllipsisProps {
   articleId: string;
   commentId: number;
-  createdBy: number;
+  isAuthor: boolean;
   queryKey: readonly unknown[];
 }
 
 export const CommentDropEllipsis = ({
   articleId,
   commentId,
-  createdBy,
+  isAuthor,
   queryKey,
 }: CommentDropEllipsisProps): React.ReactElement => {
   const [isOpen, setIsOpen] = useState(false);
   const [view, setView] = useState('default');
   const [elementRef, bounds] = useMeasure();
   const previousHeightRef = useRef<number>(0);
 
-  const { user } = useUser();
-  const isAuthor = user?.memberId === createdBy;
-
   const handleOpen = () => {
     setView('default');
     setTimeout(() => {
diff --git a/services/ahhachul.com/src/components/common/comment/commentInput/CommentInput.component.tsx b/services/ahhachul.com/src/components/common/comment/commentInput/CommentInput.component.tsx
@@ -23,6 +23,7 @@ interface CommentInputProps {
   shouldFocusOnMount?: boolean;
   showIsPrivateBtn?: boolean;
   actionLabel?: string;
+  disablePrivateCheck?: boolean;
   onSubmit: ({ isPrivate, comment }: { isPrivate: boolean; comment: string }) => void;
 }
 
@@ -35,6 +36,7 @@ const CommentInput = React.memo(
     onSubmit,
     actionLabel = '등록',
     disabled = false,
+    disablePrivateCheck = false,
   }: CommentInputProps) => {
     const initialConfig = {
       namespace: 'commentEditor',
@@ -71,10 +73,11 @@ const CommentInput = React.memo(
           </S.EditorContainer>
           <SubmitComment
             comment={comment}
-            isPrivate={isPrivate}
+            isPrivate={disablePrivateCheck || isPrivate}
             setIsPrivate={setIsPrivate}
             showIsPrivateBtn={showIsPrivateBtn}
             actionLabel={actionLabel}
+            disablePrivateCheck={disablePrivateCheck}
             onSubmit={onSubmit}
           />
         </LexicalComposer>
@@ -89,12 +92,14 @@ const SubmitComment = ({
   setIsPrivate,
   showIsPrivateBtn,
   actionLabel,
+  disablePrivateCheck,
   onSubmit,
 }: {
   comment: string;
   isPrivate: boolean;
   setIsPrivate: React.Dispatch<React.SetStateAction<boolean>>;
   showIsPrivateBtn?: boolean;
+  disablePrivateCheck?: boolean;
   actionLabel?: string;
   onSubmit: ({ isPrivate, comment }: { isPrivate: boolean; comment: string }) => void;
 }) => {
@@ -135,8 +140,13 @@ const SubmitComment = ({
       {showIsPrivateBtn && (
         <UiComponent.Checkbox
           label="비공개 댓글"
+          disabled={disablePrivateCheck}
           checked={isPrivate}
           onChange={e => {
+            if (disablePrivateCheck) {
+              return;
+            }
+
             setIsPrivate(e.target.checked);
             editor.focus();
           }}
diff --git a/services/ahhachul.com/src/components/common/comment/commentListItem/CommentListItem.component.tsx b/services/ahhachul.com/src/components/common/comment/commentListItem/CommentListItem.component.tsx
@@ -3,6 +3,7 @@ import { useActivity } from '@stackflow/react';
 import { formatDateTime } from '@ahhachul/utils';
 
 import { UiComponent } from '@/components';
+import { useUser } from '@/hooks/domain';
 import { useFlow } from '@/stackflow';
 import type { Comment } from '@/types';
 
@@ -15,36 +16,76 @@ interface CommentCardProps {
   asChild?: boolean;
   servicePath?: string;
   queryKey?: readonly unknown[];
+  isArticleAuthor?: boolean;
 }
 
-const Comment = ({ comment, asChild = false, servicePath, queryKey }: CommentCardProps) => {
+const Comment = ({
+  comment,
+  asChild = false,
+  servicePath,
+  queryKey,
+  isArticleAuthor,
+}: CommentCardProps) => {
   const { push } = useFlow();
   const activity = useActivity();
 
+  const { user } = useUser();
+  const isAuthor = user?.memberId === +comment.createdBy;
+  const isSuper = (comment.isPrivate && isAuthor) || (comment.isPrivate && isArticleAuthor);
+
   return (
     <S.CommentWrapper asChild={asChild} data-comment-id={comment.id}>
       <S.HeaderWrapper>
-        <S.WriterName>{comment.writer}</S.WriterName>
-        {queryKey && comment.status === 'CREATED' && (
+        <S.WriterName>
+          {comment.writer}
+          {((comment.isPrivate && isAuthor) || (comment.isPrivate && isArticleAuthor)) && (
+            <span css={{ marginLeft: '3px', color: '#95979F', fontWeight: 400 }}>(비공개)</span>
+          )}
+        </S.WriterName>
+        {comment.isPrivate && isSuper && queryKey && comment.status === 'CREATED' && (
           <CommentDropEllipsis
+            isAuthor={isAuthor}
+            articleId={activity.params.id!}
+            commentId={comment.id}
+            queryKey={queryKey}
+          />
+        )}
+        {!comment.isPrivate && queryKey && comment.status === 'CREATED' && (
+          <CommentDropEllipsis
+            isAuthor={isAuthor}
             articleId={activity.params.id!}
-            createdBy={+comment.createdBy!}
             commentId={comment.id}
             queryKey={queryKey}
           />
         )}
       </S.HeaderWrapper>
       <S.ContentWrapper>
-        {comment.isPrivate ? (
+        {comment.isPrivate && !isAuthor && !isArticleAuthor ? (
           <S.DeletedComment>비공개 댓글입니다.</S.DeletedComment>
+        ) : isSuper ? (
+          <UiComponent.ReadonlyEditor overrideCss={S.readonlyEditorCss} content={comment.content} />
         ) : comment.status === 'CREATED' ? (
           <UiComponent.ReadonlyEditor overrideCss={S.readonlyEditorCss} content={comment.content} />
         ) : (
           <S.DeletedComment>삭제된 댓글입니다.</S.DeletedComment>
         )}
         <S.DateText>{formatDateTime(comment.createdAt, { format: 'short' })}</S.DateText>
       </S.ContentWrapper>
-      {queryKey && servicePath && !asChild && (
+      {comment.isPrivate && isSuper && queryKey && servicePath && !asChild && (
+        <S.ReplyButton
+          onClick={() => {
+            push('NewCommentReplyPage', {
+              commentId: comment.id,
+              id: +activity.params.id!,
+              queryKey,
+              servicePath,
+            });
+          }}
+        >
+          답글 달기
+        </S.ReplyButton>
+      )}
+      {!comment.isPrivate && queryKey && servicePath && !asChild && (
         <S.ReplyButton
           onClick={() => {
             push('NewCommentReplyPage', {
diff --git a/services/ahhachul.com/src/components/common/editor/plugins/onChangePlugin/OnChangePlugin.component.tsx b/services/ahhachul.com/src/components/common/editor/plugins/onChangePlugin/OnChangePlugin.component.tsx
@@ -41,7 +41,10 @@ export function OnChangePlugin({ readonly, initialState, shouldFocusOnMount, onC
 
     if (shouldFocusOnMount) {
       setTimeout(() => {
-        editor.focus();
+        const editorElement = document.querySelector('[contenteditable="true"]');
+        if (editorElement instanceof HTMLElement) {
+          editorElement.click();
+        }
       }, 550);
     }
   }, [readonly, initialState, shouldFocusOnMount]);
diff --git a/services/ahhachul.com/src/components/domain/community/postDetail/commentList/CommunityCommentList.component.tsx b/services/ahhachul.com/src/components/domain/community/postDetail/commentList/CommunityCommentList.component.tsx
@@ -7,9 +7,10 @@ import * as S from './CommunityCommentList.styled';
 interface CommunityCommentListProps {
   id: number;
   commentCnt: number;
+  isArticleAuthor: boolean;
 }
 
-const CommunityCommentList = ({ commentCnt, id }: CommunityCommentListProps) => {
+const CommunityCommentList = ({ commentCnt, id, isArticleAuthor }: CommunityCommentListProps) => {
   return (
     <S.Section>
       <S.HeaderWrapper>
@@ -24,20 +25,24 @@ const CommunityCommentList = ({ commentCnt, id }: CommunityCommentListProps) =>
         errorFallback={props => <UiComponent.ErrorCommentList {...props} />}
         suspenseFallback={<UiComponent.CommentListSkeleton />}
       >
-        <CommentListInner id={id} />
+        <CommentListInner id={id} isArticleAuthor={isArticleAuthor} />
       </UiComponent.SuspenseQueryBoundary>
     </S.Section>
   );
 };
 
-const CommentListInner = ({ id }: Pick<CommunityCommentListProps, 'id'>) => {
+const CommentListInner = ({
+  id,
+  isArticleAuthor,
+}: Pick<CommunityCommentListProps, 'id' | 'isArticleAuthor'>) => {
   const { data } = useFetchCommunityCommentList(id);
 
   return (
     <UiComponent.BaseCommentList
       commentsMap={data.comments}
       servicePath="community-posts"
       queryKey={communityKeys.comments(id)}
+      isArticleAuthor={isArticleAuthor}
     />
   );
 };
diff --git a/services/ahhachul.com/src/components/domain/community/postDetail/template/CommunityDetail.component.tsx b/services/ahhachul.com/src/components/domain/community/postDetail/template/CommunityDetail.component.tsx
@@ -2,6 +2,7 @@ import { formatDateTime } from '@ahhachul/utils';
 
 import { CommunityComponent, UiComponent } from '@/components';
 import { subwayIconMap } from '@/constants';
+import { useUser } from '@/hooks/domain';
 import { useFetchCommunityDetail } from '@/services/community';
 import { isLexicalContent } from '@/utils/lexical';
 
@@ -14,6 +15,9 @@ interface CommunityDetailProps {
 const CommunityDetail = ({ id }: CommunityDetailProps) => {
   const { data: post } = useFetchCommunityDetail(id);
 
+  const { user } = useUser();
+  const isArticleAuthor = +post.createdBy === user?.memberId;
+
   return (
     <>
       <CommunityComponent.CommunityDetailHeaderActions id={id} createdBy={+post.createdBy} />
@@ -43,7 +47,11 @@ const CommunityDetail = ({ id }: CommunityDetailProps) => {
         </S.ContentContainer>
       </S.ArticleWrapper>
 
-      <CommunityComponent.CommunityCommentList id={id} commentCnt={post.commentCnt} />
+      <CommunityComponent.CommunityCommentList
+        id={id}
+        commentCnt={post.commentCnt}
+        isArticleAuthor={isArticleAuthor}
+      />
       <CommunityComponent.CommuntiyCommentInput id={id} />
       <S.Padding />
     </>
diff --git a/services/ahhachul.com/src/components/domain/complaint/postDetail/commentList/ComplaintCommentList.component.tsx b/services/ahhachul.com/src/components/domain/complaint/postDetail/commentList/ComplaintCommentList.component.tsx
@@ -7,9 +7,10 @@ import * as S from './ComplaintCommentList.styled';
 interface ComplaintCommentListProps {
   id: number;
   commentCnt: number;
+  isArticleAuthor: boolean;
 }
 
-const ComplaintCommentList = ({ commentCnt, id }: ComplaintCommentListProps) => {
+const ComplaintCommentList = ({ commentCnt, id, isArticleAuthor }: ComplaintCommentListProps) => {
   return (
     <S.Section>
       <S.HeaderWrapper>
@@ -24,20 +25,24 @@ const ComplaintCommentList = ({ commentCnt, id }: ComplaintCommentListProps) =>
         errorFallback={props => <UiComponent.ErrorCommentList {...props} />}
         suspenseFallback={<UiComponent.CommentListSkeleton />}
       >
-        <CommentListInner id={id} />
+        <CommentListInner id={id} isArticleAuthor={isArticleAuthor} />
       </UiComponent.SuspenseQueryBoundary>
     </S.Section>
   );
 };
 
-const CommentListInner = ({ id }: Pick<ComplaintCommentListProps, 'id'>) => {
+const CommentListInner = ({
+  id,
+  isArticleAuthor,
+}: Pick<ComplaintCommentListProps, 'id' | 'isArticleAuthor'>) => {
   const { data } = useFetchComplaintCommentList(id);
 
   return (
     <UiComponent.BaseCommentList
       commentsMap={data.comments}
       servicePath="complaint-posts"
       queryKey={complaintKeys.comments(id)}
+      isArticleAuthor={isArticleAuthor}
     />
   );
 };
diff --git a/services/ahhachul.com/src/components/domain/complaint/postDetail/template/ComplaintDetail.component.tsx b/services/ahhachul.com/src/components/domain/complaint/postDetail/template/ComplaintDetail.component.tsx
@@ -2,6 +2,7 @@ import { formatDateTime } from '@ahhachul/utils';
 
 import { ComplaintComponent, UiComponent } from '@/components';
 import { subwayIconMap } from '@/constants';
+import { useUser } from '@/hooks/domain';
 import { useFetchComplaintDetail } from '@/services/complaint';
 import { isLexicalContent } from '@/utils/lexical';
 
@@ -14,6 +15,9 @@ interface ComplaintDetailProps {
 const ComplaintDetail = ({ id }: ComplaintDetailProps) => {
   const { data: post } = useFetchComplaintDetail(id);
 
+  const { user } = useUser();
+  const isArticleAuthor = +post.createdBy === user?.memberId;
+
   return (
     <>
       <ComplaintComponent.SendComplaintMessage
@@ -50,7 +54,11 @@ const ComplaintDetail = ({ id }: ComplaintDetailProps) => {
         </S.ContentContainer>
       </S.ArticleWrapper>
 
-      <ComplaintComponent.ComplaintCommentList id={id} commentCnt={post.commentCnt} />
+      <ComplaintComponent.ComplaintCommentList
+        id={id}
+        commentCnt={post.commentCnt}
+        isArticleAuthor={isArticleAuthor}
+      />
       <ComplaintComponent.ComplaintCommentInput id={id} />
       <S.Padding />
     </>
diff --git a/services/ahhachul.com/src/components/domain/lostFound/postDetail/commentList/LostFoundCommentList.component.tsx b/services/ahhachul.com/src/components/domain/lostFound/postDetail/commentList/LostFoundCommentList.component.tsx
diff --git a/services/ahhachul.com/src/components/domain/lostFound/postDetail/template/LostFoundDetail.component.tsx b/services/ahhachul.com/src/components/domain/lostFound/postDetail/template/LostFoundDetail.component.tsx
diff --git a/services/ahhachul.com/src/pages/comment/[commentId]/edit.tsx b/services/ahhachul.com/src/pages/comment/[commentId]/edit.tsx
diff --git a/services/ahhachul.com/src/pages/comment/[commentId]/reply.tsx b/services/ahhachul.com/src/pages/comment/[commentId]/reply.tsx
