[#174] Feat: 유저 프로필에 프로필 페이지 연결

src/apis/postDetail.ts

@@ -4,6 +4,7 @@ import { api } from './core';
 
 interface PostDetailBody {
   author: string;
+  authorId: number;
   isAuthor: boolean;
   commentSize: number;
   profileImageUrl: string | null;

src/app/(post)/createPost/_components/PostForm/index.tsx

@@ -39,7 +39,7 @@ const PostForm = () => {
 
   const onSubmitPost = (data: PostRequestBody) => {
     createPost(data);
-    Toast.default('등록되었습니다.');
+    Toast.default('검색 되었습니다.');
     router.push('/');
   };
 

src/app/(post)/result/[postId]/_components/CommentList/CommentItem/CommentReplyItem.tsx

@@ -12,14 +12,14 @@ interface CommentReplyItemProps {
 }
 
 const CommentReplyItem = ({ comment }: CommentReplyItemProps) => {
-  const { replyId, nickname, content, createdAt, userId } = comment;
+  const { replyId, nickname, content, createdAt, userId: authorId } = comment;
   const commentIdFromSearchParams = useSearchParams().get('commentId');
 
   const isSelected = Number(commentIdFromSearchParams) === replyId;
 
   const { userId: ownId } = useGetUserStatusAPI();
 
-  const isOwnComment = userId === ownId;
+  const isOwnComment = authorId === ownId;
 
   return (
     <div
@@ -38,6 +38,7 @@ const CommentReplyItem = ({ comment }: CommentReplyItemProps) => {
         content={content}
         createdAt={createdAt}
         isOwnComment={isOwnComment}
+        authorId={authorId}
       >
         <CommentReplyItemMenu replyId={replyId} isOwnComment={isOwnComment} />
       </CommentItem>

src/app/(post)/result/[postId]/_components/CommentList/CommentItem/CommentRootItem.tsx

@@ -15,14 +15,14 @@ const CommentRootItem = ({
   isFirst = false,
   comment,
 }: CommentRootItemProps) => {
-  const { commentId, nickname, content, createdAt, userId } = comment;
+  const { commentId, nickname, content, createdAt, userId: authorId } = comment;
   const commentIdFromSearchParams = useSearchParams().get('commentId');
 
   const isSelected = Number(commentIdFromSearchParams) === commentId;
 
   const { userId: ownId } = useGetUserStatusAPI();
 
-  const isOwnComment = userId === ownId;
+  const isOwnComment = authorId === ownId;
 
   return (
     <div
@@ -37,6 +37,7 @@ const CommentRootItem = ({
         content={content}
         createdAt={createdAt}
         isOwnComment={isOwnComment}
+        authorId={authorId}
       >
         <CommentRootItemMenu
           commentId={commentId}

src/app/(post)/result/[postId]/_components/CommentList/CommentItem/index.tsx

@@ -1,6 +1,7 @@
 import { PropsWithChildren } from 'react';
 
 import Image from 'next/image';
+import Link from 'next/link';
 
 import { formatDateCustom } from '@/src/utils/formatDate';
 
@@ -11,6 +12,7 @@ interface CommentItemProps {
   content: string;
   createdAt: string;
   isOwnComment: boolean;
+  authorId: number;
 }
 
 const CommentItem = ({
@@ -19,20 +21,23 @@ const CommentItem = ({
   createdAt,
   isOwnComment,
   children,
+  authorId,
 }: PropsWithChildren<CommentItemProps>) => {
   return (
     <div className='flex w-full flex-col gap-2'>
       <div className='flex items-center justify-between'>
-        <div className='flex items-center gap-1'>
-          <Image
-            src='/user-square.png'
-            alt='유저프로필'
-            width={24}
-            height={24}
-          />
-          <span className='font-title-1-md'>{nickname}</span>
-          {isOwnComment && <OwnCommentChip />}
-        </div>
+        <Link href={`/users/${authorId}`}>
+          <div className='flex items-center gap-1'>
+            <Image
+              src='/user-square.png'
+              alt='유저프로필'
+              width={24}
+              height={24}
+            />
+            <span className='font-title-1-md'>{nickname}</span>
+            {isOwnComment && <OwnCommentChip />}
+          </div>
+        </Link>
         {children}
       </div>
 

src/app/(post)/result/[postId]/_components/Posting/index.tsx

@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import Link from 'next/link';
 import { useParams } from 'next/navigation';
 
 import { useGetPostDetailAPI } from '@/src/apis/postDetail';
@@ -12,14 +13,23 @@ const PostingMain = () => {
   const { postId } = useParams() as { postId: string };
   const { hasVoted, terminated: isTerminated } = useGetVoteDetailAPI(postId);
 
-  const { content, createdAt, author } = useGetPostDetailAPI(postId);
+  const { content, createdAt, author, authorId } = useGetPostDetailAPI(postId);
 
   return (
     <div className='flex flex-col gap-5 px-4'>
       <div className='flex items-center gap-2'>
-        <Image src='/user-square.png' alt='유저프로필' width={36} height={36} />
+        <Link href={`/users/${authorId}`}>
+          <Image
+            src='/user-square.png'
+            alt='유저프로필'
+            width={36}
+            height={36}
+          />
+        </Link>
         <div className='flex flex-col'>
-          <span className='font-title-1-md'>{author}</span>
+          <Link href={`/users/${authorId}`}>
+            <span className='font-title-1-md'>{author}</span>
+          </Link>
           <span className='font-text-4-rg text-gray-accent4'>
             {formatDateCustom(createdAt)}
           </span>

src/app/notification/_components/NotificationItem.tsx

@@ -1,10 +1,12 @@
 import Image from 'next/image';
+import Link from 'next/link';
 
 import timeOffset from '@/src/utils/timeOffset';
 
 type NotificationType = 'post' | 'comment' | 'follow';
 
 interface Notification {
+  userId: number;
   user: string;
   type: NotificationType;
   createdAt: string;
@@ -29,27 +31,34 @@ const getNotificationMessage = (type: NotificationType) => {
 const NotificationItem = ({ notifications }: NotificationItemProps) => {
   return (
     <ul>
-      {notifications.map(({ user, userImage, createdAt, type }, index) => {
-        return (
-          <li key={index} className='p-4 pt-3'>
-            <section className='flex items-center gap-2'>
-              <Image
-                src={userImage ? userImage : '/user-square.png'}
-                alt='유저아바타'
-                width={36}
-                height={36}
-              />
-              <div>
-                <span>{user}</span>
-                <span>{getNotificationMessage(type)}</span>
-                <p className='font-text-4-rg text-gray-accent4'>
-                  {timeOffset(createdAt)}
-                </p>
-              </div>
-            </section>
-          </li>
-        );
-      })}
+      {notifications.map(
+        ({ user, userImage, createdAt, type, userId }, index) => {
+          return (
+            <li key={index} className='p-4 pt-3'>
+              <section className='flex items-center gap-2'>
+                <Link href={`/users/${userId}`}>
+                  <Image
+                    src={userImage ? userImage : '/user-square.png'}
+                    alt='유저아바타'
+                    width={36}
+                    height={36}
+                  />
+                </Link>
+
+                <div>
+                  <Link href={`/users/${userId}`}>
+                    <span>{user}</span>
+                  </Link>
+                  <span>{getNotificationMessage(type)}</span>
+                  <p className='font-text-4-rg text-gray-accent4'>
+                    {timeOffset(createdAt)}
+                  </p>
+                </div>
+              </section>
+            </li>
+          );
+        },
+      )}
     </ul>
   );
 };

src/app/notification/page.tsx

@@ -5,6 +5,7 @@ import TopBar from '@/src/components/Topbar';
 import NotificationItem from './_components/NotificationItem';
 
 interface Notification {
+  userId: number;
   user: string;
   type: 'post' | 'comment' | 'follow';
   createdAt: string;
@@ -14,20 +15,23 @@ interface Notification {
 
 const ALARM_DUMMY: Notification[] = [
   {
+    userId: 1,
     user: '유저 1',
     type: 'post',
     createdAt: '2024-06-19 14:26:00',
     userImage: null,
     isNew: true,
   },
   {
+    userId: 1,
     user: '유저 1',
     type: 'comment',
     createdAt: '2024-06-19 13:20:00',
     userImage: null,
     isNew: false,
   },
   {
+    userId: 1,
     user: '유저 5',
     type: 'follow',
     createdAt: '2024-06-18 13:26:00',

src/components/Toast/index.tsx

@@ -6,7 +6,7 @@ import { cn } from '@/src/utils/cn';
 
 const defaultToastOption: ToastOptions = {
   position: 'bottom-center',
-  autoClose: 4000,
+  autoClose: 100,
   hideProgressBar: true,
   closeOnClick: true,
   draggable: true,