[Feat] 다른 유저 프로필 보기

src/api/usersAPI.ts

@@ -76,3 +76,18 @@ export const checkNickname = async (nickname: string) => {
     throw error;
   }
 };
+
+/**
+ * 클릭한 사용자의 정보를 반환합니다.
+ */
+
+export const getOthersInfo = async (userId: number) => {
+  try {
+    const res = await fetch(`${BASE_URL}/api/v1/users/${userId}`);
+    const result = await res.json();
+    const { data } = result;
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};

src/app/community/_components/AuthorCard.module.scss

@@ -5,6 +5,10 @@
   height: 6.4rem;
 }
 
+.user-profile {
+  position: relative;
+}
+
 .info-textbox {
   @include flex-column(0);
 
@@ -16,6 +20,8 @@
 
   & > .user-name {
     @include pretendard-18-500;
+
+    cursor: pointer;
   }
 
   & > .sub-info {

src/app/community/_components/AuthorCard.tsx

@@ -1,8 +1,9 @@
 import classNames from 'classnames/bind';
-import { MouseEvent } from 'react';
+import { useRef, useState } from 'react';
 
 import ProfileImage from '@/components/ProfileImage/ProfileImage';
 import { PopOver } from '@/components';
+import UserProfileCard from './UserProfileCard';
 
 import styles from './AuthorCard.module.scss';
 
@@ -12,29 +13,52 @@ interface AuthorCardProps {
   nickname: string;
   dateText: string;
   userImage: string | null;
+  userId: number;
   onClickPopOver: () => void;
   onClosePopOver: () => void;
   isOpenPopOver: boolean;
   popOverOptions: {
     label: string;
-    onClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onClick: () => void;
   }[];
 }
 
 export default function AuthorCard({
   nickname,
   dateText,
   userImage,
+  userId,
   onClickPopOver,
   onClosePopOver,
   isOpenPopOver,
   popOverOptions,
 }: AuthorCardProps) {
+  const userProfileCardRef = useRef<HTMLDivElement>(null);
+  const [isOpenUserCard, setIsOpenUserCard] = useState(false);
+
+  const handleOpenProfile = () => {
+    setIsOpenUserCard(true);
+  };
+
+  const handleCloseProfile = () => {
+    setIsOpenUserCard(false);
+  };
+
   return (
-    <div className={cn('container')}>
-      <ProfileImage profileImage={userImage} />
+    <div className={cn('container')} onClick={(e) => e.stopPropagation()}>
+      <div
+        onMouseEnter={handleOpenProfile}
+        onMouseLeave={handleCloseProfile}
+        className={cn('user-profile')}
+        ref={userProfileCardRef}
+      >
+        <ProfileImage profileImage={userImage} />
+        <UserProfileCard isOpenProfileCard={isOpenUserCard} userId={userId} />
+      </div>
       <div className={cn('info-textbox')}>
-        <p className={cn('user-name')}>{nickname}</p>
+        <p className={cn('user-name')} onMouseEnter={handleOpenProfile} onMouseLeave={handleCloseProfile}>
+          {nickname}
+        </p>
         <p className={cn('sub-info')}>{dateText}</p>
       </div>
       <div className={cn('show-more-icon')}>

src/app/community/_components/Comment.module.scss

@@ -1,9 +1,14 @@
 .container {
   display: flex;
+  position: relative;
   width: 100%;
   gap: 1.2rem;
 }
 
+.user-profile {
+  position: relative;
+}
+
 .profile-image {
   @include flex-center;
 
@@ -34,6 +39,8 @@
 
   & > .nickname {
     @include pretendard-16-400;
+
+    cursor: pointer;
   }
 
   & > .time-ago {

src/app/community/_components/Comment.tsx

@@ -1,18 +1,19 @@
 'use client';
 
 import classNames from 'classnames/bind';
-import { useState, forwardRef } from 'react';
+import { forwardRef, useState, MouseEvent, useEffect } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'react-toastify';
 
 import ProfileImage from '@/components/ProfileImage/ProfileImage';
 import { calculateTimeDifference } from '@/libs/calculateDate';
-import type { Users } from '@/types/userType';
+import type { UserDataResponseType } from '@/types/userType';
 import { PopOver } from '@/components';
 import { deleteComment } from '@/api/communityAPI';
-
 import { communityPopOverOption } from '@/libs/communityPopOverOption';
+
 import styles from './Comment.module.scss';
+import UserProfileCard from './UserProfileCard';
 
 const cn = classNames.bind(styles);
 
@@ -27,16 +28,17 @@ interface CommentDataType {
 
 interface CommentProps {
   cardId: number;
+  onOpenPopOver: (commentId: number) => void;
+  onClosePopOver: () => void;
   commentData: CommentDataType;
+  isOpenedPopOver: boolean;
+  onOpenProfileCard: () => void;
 }
 
-interface UserDataType {
-  data: Users;
-  status: string;
-  message: string;
-}
-
-export default forwardRef<HTMLDivElement, CommentProps>(function Comment({ cardId, commentData }, ref) {
+export default forwardRef<HTMLDivElement, CommentProps>(function Comment(
+  { cardId, commentData, onOpenPopOver, onClosePopOver, isOpenedPopOver, onOpenProfileCard },
+  ref,
+) {
   const queryClient = useQueryClient();
 
   const {
@@ -47,12 +49,16 @@ export default forwardRef<HTMLDivElement, CommentProps>(function Comment({ cardI
     content: comment,
     createdAt: createdTime,
   } = commentData;
-  const createdTimeToDate = new Date(createdTime);
 
+  const createdTimeToDate = new Date(createdTime);
   const [isOpenPopOver, setIsOpenPopOver] = useState(false);
+  const [isOpenProfileCard, setIsOpenProfileCard] = useState(false);
+  const [commentPositionTop, setCommentPositionTop] = useState(0);
+
+  const userData = queryClient.getQueryData<UserDataResponseType>(['userData']);
 
-  const userData = queryClient.getQueryData<UserDataType>(['userData']);
   const userID = userData?.data?.id;
+  const timeAgo = calculateTimeDifference(createdTimeToDate);
 
   const { mutate: deleteCommentMutation } = useMutation({
     mutationFn: deleteComment,
@@ -68,12 +74,22 @@ export default forwardRef<HTMLDivElement, CommentProps>(function Comment({ cardI
     },
   });
 
-  const handleClickPopOver = () => {
-    setIsOpenPopOver(!isOpenPopOver);
+  const handleOpenProfile = (e: MouseEvent<HTMLDivElement>) => {
+    onOpenProfileCard();
+    const { top } = e.currentTarget.getBoundingClientRect();
+    setCommentPositionTop(top);
+    setIsOpenProfileCard(true);
+  };
+
+  useEffect(() => {}, [commentPositionTop]);
+
+  const handleCloseProfile = () => {
+    setIsOpenProfileCard(false);
   };
 
-  const handleClosePopOver = () => {
-    setIsOpenPopOver(false);
+  const handleClickPopOver = () => {
+    onOpenPopOver(commentId);
+    setIsOpenPopOver(true);
   };
 
   const handleClickDelete = () => {
@@ -84,14 +100,19 @@ export default forwardRef<HTMLDivElement, CommentProps>(function Comment({ cardI
 
   const handleClickReport = () => {};
 
-  const timeAgo = calculateTimeDifference(createdTimeToDate);
-
   return (
     <div className={cn('container')} ref={ref}>
-      <ProfileImage profileImage={profile && profile} />
+      <div onMouseEnter={handleOpenProfile} onMouseLeave={handleCloseProfile}>
+        <ProfileImage profileImage={profile && profile} />
+        <UserProfileCard
+          isOpenProfileCard={isOpenProfileCard}
+          userId={commentUserId}
+          positionTop={commentPositionTop}
+        />
+      </div>
       <div className={cn('content-wrapper')}>
         <div className={cn('user-info-wrapper')}>
-          <div className={cn('user-info')}>
+          <div className={cn('user-info')} onMouseEnter={handleOpenProfile} onMouseLeave={handleCloseProfile}>
             <p className={cn('nickname')}>{nickname}</p>
             <p className={cn('time-ago')}>{timeAgo}</p>
           </div>
@@ -102,9 +123,9 @@ export default forwardRef<HTMLDivElement, CommentProps>(function Comment({ cardI
               onClickEdit: handleClickEdit,
               onClickReport: handleClickReport,
             })}
-            isOpenPopOver={isOpenPopOver}
+            isOpenPopOver={isOpenPopOver && isOpenedPopOver}
             onHandleOpen={handleClickPopOver}
-            onHandleClose={handleClosePopOver}
+            onHandleClose={onClosePopOver}
           />
         </div>
         <div className={cn('content')}>{comment}</div>

src/app/community/_components/PostCard.tsx

@@ -17,7 +17,7 @@ import { communityPopOverOption } from '@/libs/communityPopOverOption';
 import AuthorCard from './AuthorCard';
 import PostCardDetailModal from './PostCardDetailModal/PostCardDetailModal';
 import { PostInteractions } from './PostInteractions';
-import DetailModalSkeleton from './PostCardDetailModal/ModalSkeleton';
+import DetailModalSkeleton from '../../../components/ModalSkeleton/ModalSkeleton';
 import ErrorFallbackDetailModal from './PostCardDetailModal/ErrorFallbackDetailModal';
 
 import styles from './PostCard.module.scss';
@@ -36,7 +36,7 @@ export default function PostCard({ cardData, isMine }: PostCardProps) {
   const [isPopOverOpen, setIsPopOverOpen] = useState(false);
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
 
-  const { id, nickName, updateAt, title, thumbnail, likeCount, commentCount, userImage, isLiked } = cardData;
+  const { userId, id, nickName, updateAt, title, thumbnail, likeCount, commentCount, userImage, isLiked } = cardData;
 
   const ApdatedDate = new Date(updateAt);
   const timeToString = calculateTimeDifference(ApdatedDate);
@@ -104,21 +104,22 @@ export default function PostCard({ cardData, isMine }: PostCardProps) {
 
   return (
     <div className={cn('container')}>
+      <AuthorCard
+        userId={userId}
+        nickname={nickName}
+        dateText={timeToString}
+        userImage={userImage}
+        onClickPopOver={handleClickPopOver}
+        onClosePopOver={handleClosePopOver}
+        isOpenPopOver={isPopOverOpen}
+        popOverOptions={communityPopOverOption({
+          isMine,
+          onClickDelete: handleClickDelete,
+          onClickReport: handleClickReport,
+          onClickEdit: handleClickEdit,
+        })}
+      />
       <div className={cn('container')} onClick={handleClickPostModal}>
-        <AuthorCard
-          nickname={nickName}
-          dateText={timeToString}
-          userImage={userImage}
-          onClickPopOver={handleClickPopOver}
-          onClosePopOver={handleClosePopOver}
-          isOpenPopOver={isPopOverOpen}
-          popOverOptions={communityPopOverOption({
-            isMine,
-            onClickDelete: handleClickDelete,
-            onClickReport: handleClickReport,
-            onClickEdit: handleClickEdit,
-          })}
-        />
         <div className={cn('keyboard-image-wrapper')}>
           <Image
             fill
@@ -140,6 +141,7 @@ export default function PostCard({ cardData, isMine }: PostCardProps) {
           <Suspense fallback={<DetailModalSkeleton />}>
             <PostCardDetailModal
               cardId={id}
+              userId={userId}
               onClose={handleClosePostModal}
               isMine={isMine}
               commentCount={commentCount}

src/app/community/_components/PostCardDetailModal/ErrorFallbackDetailModal.tsx

@@ -1,7 +1,6 @@
 import classNames from 'classnames/bind';
 import { FallbackProps } from 'react-error-boundary';
 import { Button } from '@/components';
-
 import styles from './ErrorFallbackDetailModal.module.scss';
 
 const cn = classNames.bind(styles);

src/app/community/_components/PostCardDetailModal/PostCardDetailModal.module.scss

@@ -1,7 +1,5 @@
 .container {
   padding: 4rem;
-
-  // animation: scale-in-center 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
   border-radius: 1.6rem;
   background-color: $white;
 }
@@ -60,6 +58,7 @@
 .right-wrapper {
   @include flex-column(0);
 
+  position: relative;
   justify-content: space-between;
 }