Merge pull request #97 from modern-agile-team/feature/boardComment/#68

Fix(JaeJin/boardReComment) : 대댓글 UX기능 수정
modern-agile-team · Nov 21, 2023 · 1e2a69f · 1e2a69f
2 parents 2a82b06 + cac2bf4
commit 1e2a69f
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 5 deletions.
diff --git a/src/apis/comments.ts b/src/apis/comments.ts
@@ -74,7 +74,7 @@ const COMMENTS = {
         },
       },
     );
-    return result;
+    return result.data;
   },
 
   //reComment 삭제 api [delete요청]

diff --git a/src/components/molecules/post-comment/PostCreateReComment.tsx b/src/components/molecules/post-comment/PostCreateReComment.tsx
@@ -28,6 +28,8 @@ const PostCreateReComment = ({ commentId }: PostCreateRCommentProps) => {
     useSetRecoilState<ReCommentCreateType>(ReCommentLoadAtom);
   const loginState = useRecoilValue(LoginStateAtom);
 
+  console.log('Com', commentId);
+
   const handleInputReComment = (e: React.ChangeEvent<HTMLInputElement>) => {
     const event = e.target.value;
     setModifyReComment(event);
@@ -42,7 +44,8 @@ const PostCreateReComment = ({ commentId }: PostCreateRCommentProps) => {
     setCreateReComment((prev) => {
       return {
         ...prev,
-        id: commentId,
+        id: response.id,
+        commentId: commentId,
         content: modifyReComment,
         user: {
           name: userInfo.userName,

diff --git a/src/components/molecules/post-comment/PostReComment.tsx b/src/components/molecules/post-comment/PostReComment.tsx
@@ -33,6 +33,8 @@ const PostReComment = ({ reComment }: PostReCommentProps) => {
   );
   const focusOnInput = useRef<HTMLInputElement>(null);
 
+  console.log('Re', reComment);
+
   //대댓글 삭제 핸들러
   const handleDelReComment = async () => {
     handleModal();

diff --git a/src/components/molecules/post-comment/styled.ts b/src/components/molecules/post-comment/styled.ts
@@ -53,6 +53,7 @@ export const Option = styled.div`
   font-size: 14px;
   padding: 6px 8px;
   transition: background-color 0.2s ease-in;
+  cursor: pointer;
   &:hover {
     background-color: #ddd;
   }
@@ -62,7 +63,7 @@ export const CommentInput = styled.input`
   outline: none;
   border: none;
   width: 250px;
-  margin: 0px 0px 10px 0px;
+  margin: 0px 0px 10px 10px;
 `;
 
 export const CommentSubmitButton = styled.button`

diff --git a/src/components/organisms/post-unit/PostComments.tsx b/src/components/organisms/post-unit/PostComments.tsx
@@ -16,6 +16,7 @@ import PostCreateReComment from '@/components/molecules/post-comment/PostCreateR
 
 export interface ReCommentCreateType {
   id: number;
+  commentId: number;
   content: string;
   reCommentowner: boolean;
   user: {
@@ -42,6 +43,7 @@ const PostComments = (commentData: CommentInfo) => {
     useRecoilValue<ReCommentCreateType>(ReCommentLoadAtom);
   const focusOnInput = useRef<HTMLInputElement>(null);
   const [tempDelArr, setTempDelArr] = useState<ReCommentCreateType[]>([]);
+  const [reCommentIdNumber, setReCommenntIdNumber] = useState(0);
 
   //댓글 삭제 핸들러
   const handleDelComment = async () => {
@@ -82,7 +84,7 @@ const PostComments = (commentData: CommentInfo) => {
   useEffect(() => {
     if (
       getCreateReComment.content.length > 0 &&
-      commentData.id === getCreateReComment.id
+      commentData.id === getCreateReComment.commentId
     ) {
       setReCommentList((prev) => [...prev, getCreateReComment]);
     }
@@ -130,7 +132,7 @@ const PostComments = (commentData: CommentInfo) => {
             </form>
           </S.CommentArea>
           {commentData.commentowner && (
-            <div>
+            <div style={{ cursor: 'pointer' }}>
               {isOpenModal && (
                 <Modal show={isOpenModal} hide={handleModal}>
                   <div>

diff --git a/src/components/organisms/post-unit/styled.ts b/src/components/organisms/post-unit/styled.ts
@@ -175,6 +175,7 @@ export const Option = styled.div`
   font-size: 14px;
   padding: 6px 8px;
   transition: background-color 0.2s ease-in;
+  cursor: pointer;
   &:hover {
     background-color: #ddd;
   }

diff --git a/src/recoil/atoms/CommentAtom.ts b/src/recoil/atoms/CommentAtom.ts
@@ -28,6 +28,7 @@ export const ReCommentLoadAtom = atom<ReCommentCreateType>({
   key: 'reCommentLoad',
   default: {
     content: '',
+    commentId: 0,
     reCommentowner: true,
     id: 0,
     user: {