Glue 333 이슈 해결 (#93)

* chore: 경로 변경 및 페이지네이션 오류 해결 * feat: 구독페이지 라우팅 추가
DoTheZ-Team · Jun 12, 2024 · e4317b2 · e4317b2
1 parent affc820
commit e4317b2
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 20 deletions.
diff --git a/src/app/subscribe/components/Feed/FeedContent.tsx b/src/app/subscribe/components/Feed/FeedContent.tsx
@@ -20,6 +20,7 @@ export default function FeedContent({
           const { postId, title, preview, photo } = postItem;
           return (
             <FeedBox
+              postId={postId}
               key={postId}
               title={title}
               preview={preview}

diff --git a/src/app/subscribe/components/FeedBox/index.tsx b/src/app/subscribe/components/FeedBox/index.tsx
@@ -1,8 +1,10 @@
 import Story from '@/components/Story';
 import Image from 'next/image';
+import Link from 'next/link';
 import ProfileCard from '../ProfileCard';
 
 interface FeedBoxProps {
+  postId: number;
   title: string;
   preview?: string;
   photo?: string;
@@ -18,31 +20,34 @@ export default function FeedBox({
   title,
   preview,
   photo,
+  postId,
   blogItem,
 }: FeedBoxProps) {
-  // FIXME: fallback이미지 수정
   const fallbackImage = '/images/bg-temp.jpeg';
   return (
     <div className="flex flex-col w-300 p-20 border items-center border-[#b4b3b3] rounded-5 shadow cursor-pointer">
       <div className="flex items-start justify-start w-full">
         <ProfileCard
+          blogId={blogItem.blogId}
           name={blogItem.nickname}
           title={blogItem.title}
           profile={blogItem.profile}
         />
       </div>
-      <div className="relative w-250 h-170 p-30 mt-10 border border-[#bcbcbc] rounded-4">
-        <Image
-          loader={() => photo || fallbackImage}
-          src={photo || fallbackImage}
-          alt="image"
-          layout="fill"
-          objectFit="cover"
-        />
-      </div>
-      <div className="px-5 pt-3">
-        <Story title={title} content={preview} />
-      </div>
+      <Link href={`/blog/${blogItem.blogId}/post/${postId}`}>
+        <div className="relative w-250 h-170 p-30 mt-10 border border-[#bcbcbc] rounded-4">
+          <Image
+            loader={() => photo || fallbackImage}
+            src={photo || fallbackImage}
+            alt="image"
+            layout="fill"
+            objectFit="cover"
+          />
+        </div>
+        <div className="px-5 pt-3">
+          <Story title={title} content={preview} />
+        </div>
+      </Link>
     </div>
   );
 }
diff --git a/src/app/subscribe/components/ProfileCard/index.tsx b/src/app/subscribe/components/ProfileCard/index.tsx
@@ -1,23 +1,28 @@
+import Link from 'next/link';
 import UserIcon from './UserIcon';
 
 interface ProfileCardProps {
+  blogId: number;
   name: string;
   title?: string;
   profile?: string;
 }
 
 export default function ProfileCard({
+  blogId,
   name,
   title,
   profile,
 }: ProfileCardProps) {
   return (
-    <article className="flex flex-row gap-10 items-end">
-      <UserIcon src={profile} />
-      <div className="flex flex-col">
-        <div className="text-[11px] text-[#626161]">{name}</div>
-        <div className="text-[14px] leading-[14px]">{title}</div>
-      </div>
-    </article>
+    <Link href={`/blog/${blogId}`}>
+      <article className="flex flex-row gap-10 items-end">
+        <UserIcon src={profile} />
+        <div className="flex flex-col">
+          <div className="text-[11px] text-[#626161]">{name}</div>
+          <div className="text-[14px] leading-[14px]">{title}</div>
+        </div>
+      </article>
+    </Link>
   );
 }
diff --git a/src/app/subscribe/components/Subscription/FollowListContent.tsx b/src/app/subscribe/components/Subscription/FollowListContent.tsx
@@ -20,6 +20,7 @@ export default function FollowListContent({
       <div className="flex flex-col gap-5">
         {blogItems?.map(({ blogId, nickname, title, profile }) => (
           <ProfileCard
+            blogId={blogId}
             key={blogId}
             name={nickname}
             title={title}

diff --git a/src/app/subscribe/components/Subscription/FollowerListContent.tsx b/src/app/subscribe/components/Subscription/FollowerListContent.tsx
@@ -21,6 +21,7 @@ export default function FollowerListContent({
       <div className="flex flex-col gap-5">
         {blogItems?.map(({ blogId, nickname, title, profile }) => (
           <ProfileCard
+            blogId={blogId}
             key={blogId}
             name={nickname}
             title={title}