Merge pull request #88 from DoTheZ-Team/GLUE-383-글작성자-이미지-API-연결

GLUE-383 프로필 사용자 이미지 API 연결
DoTheZ-Team · Jun 12, 2024 · 4af7e65 · 4af7e65
2 parents 515f8cc + 8cc4006
commit 4af7e65
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/app/blog/[blogId]/post/[postId]/components/PostDetailFetcher/types.ts b/src/app/blog/[blogId]/post/[postId]/components/PostDetailFetcher/types.ts
@@ -27,6 +27,7 @@ export interface PostDetailResponse {
     categoryName: string;
 
     photoUrls: string[];
+    profile: string;
 
     postStickerItems: Sticker[];
     postHashtags: string[];

diff --git a/src/app/blog/[blogId]/post/[postId]/components/PostDetailHeader/index.tsx b/src/app/blog/[blogId]/post/[postId]/components/PostDetailHeader/index.tsx
@@ -5,13 +5,14 @@ import { motion } from 'framer-motion';
 import { Button, Copy, Input } from '@/components/Common';
 import { formatDate } from '@/utils';
 import { usePortal } from '@/hooks';
+import Image from 'next/image';
 import { usePostDetailContext } from '../PostDetailFetcher/PostDetailContext';
 
 import { useHandlePostDetail } from './hooks';
 
 export default function PostDetailHeader({ postId }: { postId: string }) {
   const {
-    postDetail: { title, createdAt, memberId, nickname },
+    postDetail: { title, createdAt, memberId, nickname, profile },
     loginMemberId,
   } = usePostDetailContext();
 
@@ -50,7 +51,14 @@ export default function PostDetailHeader({ postId }: { postId: string }) {
 
         <div className="flex items-center justify-between px-5 border-b-1 border-[#D3D2D1] py-10">
           <div className="flex items-center gap-13">
-            <div className="w-30 h-30 rounded-full bg-primary" />
+            <Image
+              loader={() => profile}
+              src={profile}
+              width={30}
+              height={30}
+              alt="profile alt"
+              className="rounded-full"
+            />
 
             <p>{nickname}</p>
             <p className="text-[#BABABA]">{formatDate(createdAt)}</p>