Fix/125

src/apis/commentApi.ts

@@ -8,7 +8,7 @@ const PATH = {
 const commentApi = {
   getComments: methodFormat(async (boardNum: number) => {
     const response = await client.get(
-      `/${PATH.comment}/getComment/${boardNum}`,
+      `/${PATH.comment}/getCommentToReply/${boardNum}`,
       {
         headers: {
           'X-ACCESS-TOKEN': getAccessToken(),

src/components/buttons/DeleteCommentbutton.tsx

@@ -1,12 +1,13 @@
 import axios from 'axios';
+import styled from 'styled-components';
 
 import { getAccessToken } from 'common/utils';
-import { updateReplyList } from 'reducers/comment';
+import { updateCommentList } from 'reducers/comment';
 import { useAppSelector, useAppDispatch } from 'store/hooks';
 
 function DeleteCommentPopup(props) {
   const dispatch = useAppDispatch();
-  const { replyList } = useAppSelector((state) => state.comment);
+  const { commentList } = useAppSelector((state) => state.comment);
   const { setReplyDeleteFlag, replyDeleteFlag } = props;
 
   const handleDeleteComment = (replyNum: number) => {
@@ -18,46 +19,44 @@ function DeleteCommentPopup(props) {
           },
         })
         .then(() => {
-          const idx = replyList.findIndex(
-            (item: { replyNum: number }) => item.replyNum === replyNum,
+          const idx = commentList.findIndex(
+            (item: { id: number }) => item.id === replyNum,
           );
-          const newReplyList = [...replyList];
-          newReplyList.splice(idx, 1);
-          dispatch(updateReplyList(newReplyList));
+          const newCommentList = [...commentList];
+          newCommentList.splice(idx, 1);
+          dispatch(updateCommentList(newCommentList));
           setReplyDeleteFlag(-1);
         })
         .catch((err) => console.log(err));
     }
   };
 
   return (
-    <div className="reply-delete-modal">
-      <div className="reply-delete-container">
-        <div className="reply-delete-box">
-          <div>
-            <button
-              type="button"
-              onClick={() => {
-                handleDeleteComment(replyDeleteFlag);
-              }}
-            >
-              삭제
-            </button>
-          </div>
-          <div>
-            <button
-              type="button"
-              onClick={() => {
-                setReplyDeleteFlag(false);
-              }}
-            >
-              취소
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
+    <Container>
+      <Button
+        type="button"
+        onClick={() => {
+          handleDeleteComment(replyDeleteFlag);
+        }}
+      >
+        삭제
+      </Button>
+      <Button
+        type="button"
+        onClick={() => {
+          setReplyDeleteFlag(false);
+        }}
+      >
+        취소
+      </Button>
+    </Container>
   );
 }
 
 export default DeleteCommentPopup;
+
+const Container = styled.div`
+  position: absolute;
+`;
+
+const Button = styled.button``;

src/components/buttons/ReplyOptionButton.tsx

@@ -2,16 +2,14 @@ import React from 'react';
 import styled from 'styled-components';
 
 interface Props {
-  setReplyDeleteFlag: React.Dispatch<React.SetStateAction<boolean>>
+  setReplyDeleteFlag: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-function ReplyOptionButton({
-  setReplyDeleteFlag,
-}: Props) {
+function ReplyOptionButton({ setReplyDeleteFlag }: Props) {
   return (
     <ReplyOption
       onClick={() => {
-        setReplyDeleteFlag((prevState: boolean) => !prevState)
+        setReplyDeleteFlag((prevState: boolean) => !prevState);
       }}
     >
       <svg

src/components/card/useCardItem.ts

@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 
 import likeApi from 'apis/likeApi';
 import parseComments from 'hooks/parseComment';
-import { updateReplyList } from 'reducers/comment';
+import { updateCommentList } from 'reducers/comment';
 import { selectedPostActions } from 'reducers/selectedPostData';
 import { useAppSelector } from 'store/hooks';
 
@@ -28,7 +28,7 @@ function useCardItem({
 
     fetchComments(currentPostData.boardNum)
       .then((updatedTimeList) => {
-        dispatch(updateReplyList(updatedTimeList));
+        dispatch(updateCommentList(updatedTimeList));
       })
       .catch((err) => err);
     dispatch(

src/components/comments/Comment.tsx

@@ -23,7 +23,7 @@ function Comment({
 }: Props) {
   return (
     <CommentContainer
-      onMouseOver={() => setReplyHover(item.replyNum)}
+      onMouseOver={() => setReplyHover(item.id)}
       onMouseOut={() => setReplyHover(-1)}
     >
       <CommentMain item={item} />
@@ -38,7 +38,6 @@ export default Comment;
 
 const CommentContainer = styled.div`
   display: grid;
-  grid-template-rows: 1fr 1fr;
   & > .comment-date-container {
     display: flex;
   }

src/components/comments/CommentDate.tsx

@@ -14,13 +14,12 @@ interface Props {
 function CommentDate(props: Props) {
   const { item, replyHover } = props;
   const [replyDeleteFlag, setReplyDeleteFlag] = useState<boolean>(false);
-  const { commentHearts } = useCommentHearts(item.replyNum);
+  const { commentHearts } = useCommentHearts(item.id);
 
   return (
     <CommentDateContainer>
-      <span className="empty" />
       <span className="comment-date">
-        {`${item.replyTime} ·  `}
+        {`${item.date} ·  `}
         {commentHearts === 0 ? '' : `좋아요: 0`}
         {' · '}
         답글 달기
@@ -31,16 +30,14 @@ function CommentDate(props: Props) {
         ) : (
           ''
         )} */}
-        {replyHover === item.replyNum ? (
-          <ReplyOptionButton
-            setReplyDeleteFlag={setReplyDeleteFlag}
-          />
+        {replyHover === item.id ? (
+          <ReplyOptionButton setReplyDeleteFlag={setReplyDeleteFlag} />
         ) : (
           ''
         )}
         {replyDeleteFlag ? (
           <DeleteCommentPopup
-            replyDeleteFlag={item.replyNum}
+            replyDeleteFlag={item.id}
             setReplyDeleteFlag={setReplyDeleteFlag}
           />
         ) : (
@@ -55,10 +52,7 @@ export default CommentDate;
 const CommentDateContainer = styled.div.attrs({
   className: '.comment-date-container',
 })`
-  & > .empty {
-    width: 38px;
-    aspect-ratio: 1;
-  }
+  height: 30px;
   & > .comment-date {
     margin-left: 10px;
     font-size: 13px;

src/components/comments/CommentMain.tsx

@@ -11,19 +11,21 @@ interface Props {
 function CommentMain({ item }: Props) {
   return (
     <CommentMainWrapper>
-      <AvatarIcon image="" />
-      <Username>{item.userName}</Username>
-      <CommentContent>{item.replyContext}</CommentContent>
-      <LikeIcon replyNum={item.replyNum} />
+      <ProfileBox>
+        <AvatarIcon image="" />
+        <Username>{item.userName}</Username>
+        <CommentContent>{item.content}</CommentContent>
+      </ProfileBox>
+      <LikeIcon replyNum={item.id} />
     </CommentMainWrapper>
   );
 }
 
 export default CommentMain;
 const CommentMainWrapper = styled.div`
   display: flex;
-  justify-content: space-around;
   align-items: center;
+  justify-content: space-between;
   & > .username {
     margin-left: 10px;
     font-weight: 600;
@@ -37,5 +39,10 @@ const CommentMainWrapper = styled.div`
     height: 12.94px;
   }
 `;
+const ProfileBox = styled.div`
+  display: flex;
+  gap: 10px;
+  align-items: center;
+`;
 const Username = styled.div``;
 const CommentContent = styled.div``;

src/components/comments/CommentSection.tsx

@@ -7,18 +7,18 @@ import { useAppSelector } from 'store/hooks';
 import devices from 'styles/device';
 
 function CommentSection() {
-  const { replyList } = useAppSelector((state) => state.comment);
+  const { commentList } = useAppSelector((state) => state.comment);
   const [replyHover, setReplyHover] = useState(-1);
 
   return (
-    <Container commentList={replyList}>
-      {replyList.map(
+    <Container commentList={commentList}>
+      {commentList.map(
         (
           item,
           // index
         ) => (
           <Comment
-            key={item.replyNum}
+            key={item.id}
             replyHover={replyHover}
             setReplyHover={setReplyHover}
             // index={index}
@@ -35,8 +35,6 @@ export default CommentSection;
 const Container = styled.div<{
   commentList: Icomment[];
 }>`
-  display: grid;
-  grid-template-rows: 1fr 1fr;
   height: 100px;
   margin-top: 1vh;
   overflow-y: auto;

src/components/comments/index.tsx

@@ -6,7 +6,7 @@ import CommentSection from './CommentSection';
 
 import ModalSocial from 'components/postModal/ModalSocial';
 import parseComments from 'hooks/parseComment';
-import { updateReplyList } from 'reducers/comment';
+import { updateCommentList } from 'reducers/comment';
 import { useAppDispatch, useAppSelector } from 'store/hooks';
 import devices from 'styles/device';
 
@@ -18,22 +18,9 @@ function Comments({ modalOpacity }) {
   useEffect(() => {
     fetchComments(currentPostData.boardNum)
       .then((updatedTimeList) => {
-        dispatch(updateReplyList(updatedTimeList));
+        dispatch(updateCommentList(updatedTimeList));
       })
       .catch((err) => err);
-
-    // if (throttle) return;
-    // if (!throttle) {
-    //   setThrottle(true);
-    //   setTimeout(() => {
-    //     fetchComments(currentPostData.boardNum)
-    //       .then((updatedTimeList) => {
-    //         dispatch(updateReplyList(updatedTimeList));
-    //       })
-    //       .catch((err) => err);
-    //     setThrottle(false);
-    //   }, 10);
-    // }
   }, [modalOpacity, currentPostData.boardNum]);
 
   return (

src/components/postModal/ModalSocial.tsx

@@ -6,7 +6,7 @@ import CommentIcon from 'components/Icons/CommentIcon';
 import { useAppSelector } from 'store/hooks';
 
 function ModalSocial() {
-  const replyList = useAppSelector((state) => state.comment.replyList);
+  const commentList = useAppSelector((state) => state.comment.commentList);
   return (
     <ModalSocialWrapper>
       <SocialIconsContainer>
@@ -15,7 +15,7 @@ function ModalSocial() {
       </SocialIconsContainer>
       <SocialCountContainer>
         <LikeCount>좋아요 {10}개</LikeCount>
-        <CommentCount>댓글 {replyList.length}개</CommentCount>
+        <CommentCount>댓글 {commentList.length}개</CommentCount>
       </SocialCountContainer>
     </ModalSocialWrapper>
   );

src/hooks/parseComment.ts

@@ -10,10 +10,10 @@ export default function parseComments() {
     // ['1시간', '2시간', '1분']
     const updatedTimeList = res.data.map((item: Icomment) => ({
       ...item,
-      replyTime: getCommentDate(item.replyTime),
+      replyTime: getCommentDate(item.date),
     }));
     updatedTimeList.sort((a: Icomment, b: Icomment) => {
-      if (a.replyNum > b.replyNum) return 1;
+      if (a.id > b.id) return 1;
       return -1;
     });
     return updatedTimeList;

src/hooks/useCommentUpload.ts

@@ -2,14 +2,14 @@ import axios from 'axios';
 import { KeyboardEvent } from 'react';
 
 import { getAccessToken, getCommentDate } from 'common/utils';
-import { updateReplyList } from 'reducers/comment';
+import { updateCommentList } from 'reducers/comment';
 import { setLoading } from 'reducers/loading';
 import { ISelectedPostData } from 'reducers/selectedPostData';
 import { useAppDispatch, useAppSelector } from 'store/hooks';
 
 function useCommentUpload(selectedPostData: ISelectedPostData) {
   const dispatch = useAppDispatch();
-  const { replyList } = useAppSelector((state) => state.comment);
+  const { commentList } = useAppSelector((state) => state.comment);
 
   function addCommentProcess(e: KeyboardEvent<HTMLInputElement>) {
     const element = e.target as HTMLInputElement;
@@ -36,12 +36,12 @@ function useCommentUpload(selectedPostData: ISelectedPostData) {
               dispatch(setLoading(false));
               element.value = '';
               res.data.commentTime = getCommentDate(res.data.commentTime);
-              const tempList = [...replyList, res.data];
+              const tempList = [...commentList, res.data];
               tempList.sort((a, b) => {
                 if (a.replyNum > b.replyNum) return 1;
                 return -1;
               });
-              dispatch(updateReplyList(tempList));
+              dispatch(updateCommentList(tempList));
             })
             .catch((err) => console.log(err));
         }
@@ -79,11 +79,11 @@ function useCommentUpload(selectedPostData: ISelectedPostData) {
       //         },
       //       )
       //       .then((reReplyRes) => {
-      //         const newReplyList = [...replyList];
-      //         const idx = newReplyList.findIndex(
+      //         const newcommentList = [...commentList];
+      //         const idx = newcommentList.findIndex(
       //           (item) => item.replyNum === res.data.replyNum,
       //         );
-      //         newReplyList[idx].reReply = reReplyRes.data;
+      //         newcommentList[idx].reReply = reReplyRes.data;
       //         replyInput.current.value = '';
       //         sessionStorage.removeItem('replyInfo');
       //       })