Merge pull request #147 from IT-Cotato/feat/#141

[FEAT] 대대댓글 연동
IT-Cotato · Feb 21, 2025 · 64bbd88 · 64bbd88
2 parents fd8ceef + cbb36ef
commit 64bbd88
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 13 deletions.
diff --git a/src/components/board/FilterBox.jsx b/src/components/board/FilterBox.jsx
@@ -29,7 +29,7 @@ export const FilterBox = () => {
     setIsSortOpen(false);
   };
   return (
-    <div className="flex gap-[0.875rem]">
+    <div className="flex gap-[0.875rem] z-50">
       <DropBox
         dropList={categoriesWithAll}
         state={isCategoryOpen}

diff --git a/src/components/board/PostComment.jsx b/src/components/board/PostComment.jsx
@@ -8,12 +8,15 @@ import { useRef } from "react"
 import { cn } from "@/utils/cn"
 export const PostComment = ({ data, setInputFocus, focusedComment, setFocusedComment, handleCommentLike }) => {
     const commentRef = useRef(null);
-    const handleComment = (ref, commentId) => {
+    const handleComment = (ref, commentId, parentId) => {
         ref.current?.scrollIntoView({
             behavior: "smooth",
             block: "start"
         })
-        setFocusedComment(commentId)
+        setFocusedComment({
+            parentId: commentId,
+            targetId: commentId
+        })
         setInputFocus(true)
     }
 
@@ -22,8 +25,8 @@ export const PostComment = ({ data, setInputFocus, focusedComment, setFocusedCom
             <div ref={commentRef}
                 className={cn("flex flex-col gap-2 px-4 py-[0.9375rem] text-base",
                     {
-                        "bg-primary-10": focusedComment === data.commentId,
-                        "bg-white": focusedComment !== data.commentId
+                        "bg-primary-10": focusedComment?.targetId === data.commentId,
+                        "bg-white": focusedComment?.targetId !== data.commentId
                     })}>
                 <div className="flex  justify-between">
                     <div className="flex items-center gap-2">
@@ -54,7 +57,7 @@ export const PostComment = ({ data, setInputFocus, focusedComment, setFocusedCom
                     <div className="text-neutral-border-50"
                         onClick={(e) => {
                             e.stopPropagation();
-                            handleComment(commentRef, data.commentId)
+                            handleComment(commentRef, data.commentId, data.parentId)
                         }}>
                         Reply
                     </div>
@@ -76,13 +79,13 @@ const ReplyComment = ({ reply, data, focusedComment, handleComment, handleCommen
         <div ref={commentRef}
             className={cn("flex flex-col gap-2 pl-[2.8125rem] pr-4 py-[0.9375rem] text-base",
                 {
-                    "bg-primary-10": focusedComment === data.commentId,
-                    "bg-white": focusedComment !== data.commentId
+                    "bg-primary-10": focusedComment?.targetId === data.commentId,
+                    "bg-white": focusedComment?.targetId !== data.commentId
                 })}>
             <div className="flex  justify-between" >
                 <div className="flex items-center gap-2">
                     <img src={anonymous} className="w-[1.375rem] h-[1.375rem]" />
-                    <p>{data.author === "Author" ? <span className="text-[#2768FF]">Anonimity(Author)</span> : data.author}</p>
+                    <p>{data.targetAuthor === "Author" ? <span className="text-[#2768FF]">Anonimity(Author)</span> : data.targetAuthor}</p>
                     <p className="text-neutral-border-50">{formatTime(data.createdTime)}</p>
                 </div>
                 <button className="flex gap-[0.125rem] cursor-pointer"
@@ -103,7 +106,7 @@ const ReplyComment = ({ reply, data, focusedComment, handleComment, handleCommen
                 <div className="text-neutral-border-50"
                     onClick={(e) => {
                         e.stopPropagation()
-                        handleComment(commentRef, data.commentId)
+                        handleComment(commentRef, data.commentId, data.parentId)
                     }}>
                     Reply
                 </div>

diff --git a/src/pages/board/post.jsx b/src/pages/board/post.jsx
@@ -1,7 +1,7 @@
 import { PostHeader } from '@/components/board/PostHeader';
 import { ScrapComponent } from '@/components/common/ScrapComponent';
 import { path } from '@/routes/path';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import anonymous from '@/assets/imgs/anonymous.svg';
 import kampus from '@/assets/imgs/kampusPost.svg';
 import Like from '@/assets/imgs/like.svg?react';
@@ -90,10 +90,14 @@ export const Post = () => {
   const submitComment = () => {
     const buildComment = {
       content: input,
-      parentId: focusedComment
+      parentId: focusedComment?.parentId,
+      targetId: focusedComment?.targetId
     };
     handleComment({ type: true, param: postId, data: buildComment });
   }
+  useEffect(() => {
+    console.log(commentData)
+  })
   const handleTranslate = () => {
     if (translatedPost) {
       setTranslateState(true);

diff --git a/src/pages/home/home.jsx b/src/pages/home/home.jsx
@@ -128,7 +128,7 @@ export const Home = () => {
         </div>
       </div>
       {userDetail?.universityId !== -1 && (
-        <h1 className="text-pageTitle text-neutral-title">OO University</h1>
+        <h1 className="text-pageTitle text-neutral-title">{userDetail?.universityName}</h1>
       )}
       <div className="flex flex-col gap-[1.625rem]">
         <div className="flex justify-center w-fit h-28 flex-col gap-[.625rem] rounded-[.625rem] border-[0.03125rem] border-primary-30 px-[.875rem] py-8">