[#40] Feat/40/공통컴포넌트 아바타

src/components/Avatar.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import Image from 'next/image';
+import { cn } from '@/utils/cn';
+import Icon from './Icon';
+
+interface AvatarProps {
+  name: string;
+  picture: string | null;
+  member?: boolean;
+}
+
+const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
+
+export default function Avatar({ name, picture, member = false }: AvatarProps) {
+  const imageUrl = picture
+    ? picture.startsWith('http')
+      ? picture
+      : `${BASE_URL}${picture}`
+    : null;
+
+  return (
+    <div className={cn('flex max-w-42.5 items-center gap-2')}>
+      {imageUrl ? (
+        <div
+          className={cn(
+            'relative shrink-0 overflow-hidden rounded-full',
+            member ? 'h-8.5 w-8.5 md:h-9.5 md:w-9.5' : 'h-7.5 w-7.5',
+          )}
+        >
+          <Image src={imageUrl} alt={name} sizes='30px' fill className='object-cover' />
+        </div>
+      ) : (
+        <Icon
+          name='profile'
+          className={cn(member ? 'h-8.5 w-8.5 md:h-9.5 md:w-9.5' : 'h-7.5 w-7.5')}
+        />
+      )}
+      <div className={cn(member ? 'text-md md:text-lg' : 'text-md')}>{name}</div>
+    </div>
+  );
+}

src/components/ReceiptPayInfo.tsx

@@ -2,10 +2,12 @@
 
 import { useState } from 'react';
 import { useParams } from 'next/navigation';
+import { useGetMe } from '@/apis/auth/auth.queries';
 import { useGetReceiptDetail } from '@/apis/receipt/receipt.queries';
 import { ReceiptUploadResponse } from '@/apis/receipt/receipt.type';
 import useMediaQuery from '@/hooks/useMediaQuery';
 import { cn } from '@/utils/cn';
+import Avatar from './Avatar';
 import Icon from './Icon';
 import ResultChip from './ResultChip';
 import StatusChip from './StatusChip';
@@ -63,6 +65,8 @@ export default function ReceiptPayInfo({ editable = false, uploadData }: ReciptP
   });
   const data = editable ? uploadData : detailQuery.data?.data;
 
+  const { data: meData } = useGetMe();
+
   function handleEditClick(field: EditableField, currentValue: string) {
     setEditingField((prev) => {
       const keepEditing = new Set(prev);
@@ -95,15 +99,17 @@ export default function ReceiptPayInfo({ editable = false, uploadData }: ReciptP
       {isLg ? (
         <div className={cn('grid grid-cols-2')}>
           <div className={cn('flex flex-col gap-4')}>
-            <InfoItem label='게시자'>홍길동</InfoItem>
+            <InfoItem label='게시자'>
+              <Avatar name={meData?.data.name ?? ''} picture={meData?.data?.picture ?? null} />
+            </InfoItem>
             <InfoItem label='AI 분석 결과'>
               <ResultChip reasons={data.inappropriateReasons} />
             </InfoItem>
             <InfoItem label='상태'>
               <StatusChip status={data.status} />
             </InfoItem>
           </div>
-          <div className={cn('flex min-w-0 flex-col gap-4')}>
+          <div className={cn('text-md flex min-w-0 flex-col gap-4')}>
             <InfoItem
               label='결제일'
               editable={editable}
@@ -169,8 +175,10 @@ export default function ReceiptPayInfo({ editable = false, uploadData }: ReciptP
           </div>
         </div>
       ) : (
-        <div className={cn('flex min-w-0 flex-col gap-4')}>
-          <InfoItem label='게시자'>홍길동</InfoItem>
+        <div className={cn('text-md flex min-w-0 flex-col gap-4')}>
+          <InfoItem label='게시자'>
+            <Avatar name={meData?.data.name ?? ''} picture={meData?.data?.picture ?? null} />
+          </InfoItem>
           <InfoItem
             label='결제일'
             editable={editable}