From 47849f1b1f6f1bb0f7e6f24e2ec7c8204515cfea Mon Sep 17 00:00:00 2001
From: hookor <gerrard1219@gmail.com>
Date: Thu, 29 Aug 2024 00:14:37 +0900
Subject: [PATCH] Fix: implement navigation functionality for comments

---
 src/components/post/Comment.tsx      | 4 +++-
 src/components/post/CommentProto.tsx | 9 +++++++--
 src/components/post/PostComments.tsx | 1 +
 src/components/post/Replies.tsx      | 1 +
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/post/Comment.tsx b/src/components/post/Comment.tsx
index fd82ab3a..c0bb609f 100644
--- a/src/components/post/Comment.tsx
+++ b/src/components/post/Comment.tsx
@@ -11,7 +11,8 @@ const Comment = ({
   created_at,
   reply_count,
   postNum,
-  id
+  id,
+  public_id
 }: CommentType) => {
   const { toggle, handleToggle } = useToggle();
   return (
@@ -23,6 +24,7 @@ const Comment = ({
         created_at={created_at}
         postNum={postNum}
         id={id}
+        public_id={public_id}
       />
       <Replies
         replies={toggle}
diff --git a/src/components/post/CommentProto.tsx b/src/components/post/CommentProto.tsx
index c894bdb1..064daba7 100644
--- a/src/components/post/CommentProto.tsx
+++ b/src/components/post/CommentProto.tsx
@@ -13,6 +13,7 @@ import { useSetRecoilState } from 'recoil';
 import { commentState } from '@/atoms/atoms';
 import { useIntersection } from '@/hooks/useIntersection';
 import NoProfileImg from '@/components/common/NoProfileImg';
+import { useNavigateTo } from '@/hooks/useNavigateTo';
 
 const CommentAction = React.lazy(() => import('./CommentAction'));
 
@@ -24,7 +25,8 @@ const CommentProto = ({
   created_at,
   postNum = '',
   id,
-  parentCommentId
+  parentCommentId,
+  public_id
 }: CommentPrototype) => {
   const { signedIn } = useGetSignedIn();
   const { userData } = useCachedUserInfo();
@@ -32,6 +34,7 @@ const CommentProto = ({
   const myComment = nickname === myUsername;
   const [profile, setProfile] = useState(profileUrl);
   const handleImgError = () => setProfile('');
+  const toProfilePage = useNavigateTo(`/profile/${public_id}`);
 
   const setSelectedComment = useSetRecoilState(commentState);
   const { scrollRef, setIsIntersected, isIntersected } = useDetectSlide(
@@ -62,11 +65,13 @@ const CommentProto = ({
           <ImgContainer
             url={profile}
             comment={true}
+            onClick={toProfilePage}
+            onError={handleImgError}
           />
         )}
         {!profile && (
           <NoProfileImg
-            onClick={handleImgError}
+            onClick={toProfilePage}
             comment={true}
           />
         )}
diff --git a/src/components/post/PostComments.tsx b/src/components/post/PostComments.tsx
index 19f7f84b..6af55367 100644
--- a/src/components/post/PostComments.tsx
+++ b/src/components/post/PostComments.tsx
@@ -47,6 +47,7 @@ const PostComments = ({
                   reply_count={comment.reply_count}
                   postNum={postNum}
                   id={comment.id}
+                  public_id={comment.public_id}
                 />
               </React.Fragment>
             ))}
diff --git a/src/components/post/Replies.tsx b/src/components/post/Replies.tsx
index 03dc943c..c107b2be 100644
--- a/src/components/post/Replies.tsx
+++ b/src/components/post/Replies.tsx
@@ -35,6 +35,7 @@ const Replies = ({
               comment={false}
               parentCommentId={commentId}
               key={id + idx}
+              public_id={reply.public_id}
             />
           ))}
         </>