feat: Change pointer appearance when hover, redirect profile page whe…

…n user profile image clicked. (kookmin-sw#75)
kookmin-sw · May 14, 2024 · 1a9f51c · 1a9f51c
1 parent 0a4418e
commit 1a9f51c
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 12 deletions.
diff --git a/src/app/pages/shared-post-page.tsx b/src/app/pages/shared-post-page.tsx
@@ -449,14 +449,6 @@ export function SharedPostPage({
 
   const { mutate: deleteSharedPost } = useDeleteSharedPost();
 
-  const [selected, setSelected] = useState<
-    | {
-        memberId: string;
-        profileImage: string;
-      }
-    | undefined
-  >(undefined);
-
   const { isLoading: isSharedPostLoading, data: sharedPost } = useSharedPost({
     postId,
     enabled: type === 'hasRoom' && auth?.accessToken != null,
@@ -468,6 +460,21 @@ export function SharedPostPage({
       enabled: type === 'dormitory' && auth?.accessToken != null,
     });
 
+  const [selected, setSelected] = useState<
+    | {
+        memberId: string;
+        profileImage: string;
+      }
+    | undefined
+  >(
+    sharedPost != null
+      ? {
+          memberId: sharedPost.data.publisherAccount.memberId,
+          profileImage: sharedPost.data.publisherAccount.profileImageFileName,
+        }
+      : undefined,
+  );
+
   const { data: userData } = useUserData(auth?.accessToken != null);
   const [userId, setUserId] = useState<string>('');
 
@@ -493,6 +500,15 @@ export function SharedPostPage({
     sharedPost?.data.publisherAccount.memberId ?? '',
   );
 
+  useEffect(() => {
+    if (selected != null || sharedPost == null) return;
+
+    setSelected({
+      memberId: sharedPost.data.publisherAccount.memberId,
+      profileImage: sharedPost.data.publisherAccount.profileImageFileName,
+    });
+  }, [selected, sharedPost]);
+
   useEffect(() => {
     if (sharedPost?.data.address.roadAddress != null) {
       fromAddrToCoord({ query: sharedPost?.data.address.roadAddress }).then(

diff --git a/src/components/shared-posts/PostCard.tsx b/src/components/shared-posts/PostCard.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useRouter } from 'next/navigation';
 import styled from 'styled-components';
 
 import { HorizontalDivider } from '@/components';
@@ -24,6 +25,8 @@ const styles = {
     border-radius: 16px;
 
     object-fit: cover;
+
+    cursor: pointer;
   `,
   content: styled.div`
     flex-grow: 1;
@@ -44,6 +47,8 @@ const styles = {
         font-style: normal;
         font-weight: 700;
         line-height: normal;
+
+        cursor: pointer;
       }
 
       h2 {
@@ -68,6 +73,8 @@ const styles = {
   writer: styled.div`
     position: relative;
 
+    cursor: pointer;
+
     display: flex;
     flex-shrink: 0;
     flex-direction: column;
@@ -129,16 +136,22 @@ export function PostCard({
   post: SharedPostListItem | DormitorySharedPostListItem;
   onClick: () => void;
 }) {
+  const router = useRouter();
+
   const recruitmentCapacity =
     'roomInfo' in post
       ? post.roomInfo.recruitmentCapacity
       : post.recruitmentCapacity;
 
   return (
     <div>
-      <styles.container onClick={onClick}>
-        <styles.thumbnail alt="" src={post.thumbnail.fileName} />
-        <styles.content>
+      <styles.container>
+        <styles.thumbnail
+          onClick={onClick}
+          alt=""
+          src={post.thumbnail.fileName}
+        />
+        <styles.content onClick={onClick}>
           <div>
             <h1>{post.title}</h1>
             <h2>{post.address.roadAddress}</h2>
@@ -156,7 +169,11 @@ export function PostCard({
             )}
           </div>
         </styles.content>
-        <styles.writer>
+        <styles.writer
+          onClick={() => {
+            router.push(`/profile/${post.publisherAccount.memberId}`);
+          }}
+        >
           <img alt="" src={post.publisherAccount.profileImageFileName} />
           <styles.percentage>
             <p>50%</p>