[Feat] profileImage 공통 컴포넌트 작업

src/components/pages/chat/chat-list/index.tsx

@@ -3,9 +3,7 @@ import { useRouter } from 'next/navigation';
 
 import { useMemo } from 'react';
 
-import { DEFAULT_PROFILE_IMAGE } from 'constants/default-images';
-
-import { ImageWithFallback } from '@/components/ui';
+import { ProfileImage } from '@/components/shared';
 import { useChatListSocket, useGetChatList } from '@/hooks/use-chat';
 import { cn } from '@/lib/utils';
 
@@ -49,15 +47,7 @@ export const ChatList = ({ userId, accessToken }: IProps) => {
               onClick={() => handleClick(chat.chatRoomId)}
             >
               {/* 프로필 이미지 - 이미지 수정 필요💥💥*/}
-              <div className='relative size-12 overflow-hidden rounded-full'>
-                <ImageWithFallback
-                  className='object-cover'
-                  alt='프로필 이미지'
-                  fill
-                  loading='eager'
-                  src={chat.thumbnail || DEFAULT_PROFILE_IMAGE}
-                />
-              </div>
+              <ProfileImage size='md' src={chat.thumbnail} />
 
               {/* 텍스트 영역 */}
               <div className='flex flex-1 flex-col'>

src/components/pages/chat/chat-other-chat/index.tsx

@@ -1,4 +1,4 @@
-import { ImageWithFallback } from '@/components/ui';
+import { ProfileImage } from '@/components/shared';
 import { formatKoreanTime } from '@/lib/formatDateTime';
 import { ChatMessage } from '@/types/service/chat';
 
@@ -13,13 +13,7 @@ export const OtherChat = ({ item }: IProps) => {
   const time = timestamp ?? createdAt;
   return (
     <div className='flex'>
-      <ImageWithFallback
-        width={40}
-        className='mr-3 size-10 rounded-full object-cover'
-        alt='프로필 이미지'
-        height={40}
-        src={senderProfileImage || ''}
-      />
+      <ProfileImage className='mr-3' size='sm' src={senderProfileImage} />
 
       <div className='mr-1.5 max-w-60'>
         <span className='text-text-xs-medium text-gray-800'>{senderName}</span>

src/components/pages/chat/chat-user-list/index.tsx

@@ -1,12 +1,9 @@
 'use client';
 
-import Image from 'next/image';
-
 import { useState } from 'react';
 
-import { DEFAULT_PROFILE_IMAGE } from 'constants/default-images';
-
 import { Icon } from '@/components/icon';
+import { ProfileImage } from '@/components/shared';
 import { useModal } from '@/components/ui';
 import { useGetParticipants } from '@/hooks/use-chat';
 
@@ -65,13 +62,7 @@ export const UserList = ({ onClose, roomId, roomType, userId }: UserListProps) =
           <div key={user.userId}>
             <div className='bg-mono-white flex h-22 items-center gap-4 p-5'>
               <div className='h-12 w-12 overflow-hidden rounded-full'>
-                <Image
-                  width={48}
-                  className='h-full w-full object-cover'
-                  alt='profile'
-                  height={48}
-                  src={user.profileImage || DEFAULT_PROFILE_IMAGE}
-                />
+                <ProfileImage size='md' src={user.profileImage} />
               </div>
 
               <div className='flex-1'>

src/components/pages/group/group-descriptions/description-sections/description-profile/index.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 
-import { ImageWithFallback } from '@/components/ui';
+import { ProfileImage } from '@/components/shared';
 import { PendingBadge } from '@/components/ui';
 import { GetGroupDetailsResponse } from '@/types/service/group';
 
@@ -24,14 +24,7 @@ export const DescriptionProfile = ({
   return (
     <div className='flex-between w-full select-none'>
       <Link href={`/profile/${userId}`} className='flex gap-3'>
-        <ImageWithFallback
-          width={40}
-          className='object-fit h-10 w-10 shrink-0 rounded-full'
-          alt='프로필 사진'
-          height={40}
-          src={profileImage ?? ''}
-        />
-
+        <ProfileImage size='sm' src={profileImage} />
         <div className='flex flex-col justify-center *:line-clamp-1'>
           <p className='text-text-md-semibold text-gray-800'>{nickName}</p>
           {profileMessage && <p className='text-text-xs-regular text-gray-600'>{profileMessage}</p>}

src/components/pages/group/group-members/index.tsx

@@ -8,8 +8,8 @@ import clsx from 'clsx';
 
 import { Icon } from '@/components/icon';
 import { GroupModal } from '@/components/pages/group/group-modal';
-import { AnimateDynamicHeight } from '@/components/shared';
-import { Button, ImageWithFallback } from '@/components/ui';
+import { AnimateDynamicHeight, ProfileImage } from '@/components/shared';
+import { Button } from '@/components/ui';
 import { useModal } from '@/components/ui';
 import { GetGroupDetailsResponse, KickGroupMemberParams } from '@/types/service/group';
 
@@ -49,13 +49,7 @@ export const GroupMembers = ({ members, isHost }: Props) => {
               <div className='flex-col-center gap-1.5'>
                 <div className='relative'>
                   <Link href={`/profile/${userId}`}>
-                    <ImageWithFallback
-                      width={64}
-                      className='object-fit h-16 w-16 rounded-full'
-                      alt='프로필 사진'
-                      height={64}
-                      src={profileImage ?? ''}
-                    />
+                    <ProfileImage size='lg' src={profileImage} />
                   </Link>
                   {isHost && idx !== 0 && (
                     <button

src/components/pages/group/group-modal/index.tsx

@@ -27,7 +27,6 @@ interface KickProps {
     targetUserId: string;
     targetUserName: string;
   };
-  groupId?: string;
 }
 
 type Props = BaseProps | KickProps;
@@ -36,9 +35,10 @@ export const GroupModal = (props: Props) => {
   const { type } = props;
 
   const params = useParams();
-  const groupId = props.groupId || (params as { groupId: string }).groupId;
-  const { replace } = useRouter();
+  const groupId = (type !== 'kick' && props.groupId) || (params as { groupId: string }).groupId;
   const pathname = usePathname();
+
+  const { replace } = useRouter();
   const { run } = useToast();
 
   const { mutateAsync: attendMutate, isPending: isAttending } = useAttendGroup({ groupId });
@@ -66,6 +66,7 @@ export const GroupModal = (props: Props) => {
     delete: async () => {
       await deleteMutate();
       await revalidateGroupAction(groupId);
+
       if (!pathname.startsWith('/schedule')) {
         replace('/');
       }

src/components/pages/message/message-following-card/index.tsx

@@ -2,7 +2,7 @@ import { useRouter } from 'next/navigation';
 
 import { useState } from 'react';
 
-import { ImageWithFallback } from '@/components/ui';
+import { ProfileImage } from '@/components/shared';
 import { useCreateDMChat } from '@/hooks/use-chat/use-chat-dm';
 import { cn } from '@/lib/utils';
 
@@ -53,15 +53,8 @@ export const FollowingCard = ({
       className='flex cursor-pointer items-center gap-3 bg-white p-5 hover:bg-gray-50'
       onClick={handleClick}
     >
-      <div className='relative size-12 overflow-hidden rounded-full'>
-        <ImageWithFallback
-          className='object-cover'
-          alt='프로필 이미지'
-          fill
-          loading='eager'
-          src={profileImage}
-        />
-      </div>
+      <ProfileImage size='md' src={profileImage} />
+
       <div className='flex flex-1 flex-col'>
         <span className='text-text-md-bold text-gray-800'>{nickname}</span>
         <span

src/components/pages/pending/pending-members/pending-member-card/index.tsx

@@ -2,7 +2,8 @@
 
 import Link from 'next/link';
 
-import { Button, ImageWithFallback } from '@/components/ui';
+import { ProfileImage } from '@/components/shared';
+import { Button } from '@/components/ui';
 import { GetJoinRequestsResponse } from '@/types/service/group';
 
 type JoinRequestItem = GetJoinRequestsResponse['items'][number];
@@ -19,14 +20,7 @@ export const PendingMemberCard = ({ member, onReject, onApprove }: Props) => {
   return (
     <div className='bg-mono-white rounded-3xl px-5 py-[26px] shadow-sm'>
       <Link href={profileUrl} className='flex gap-3'>
-        <ImageWithFallback
-          width={40}
-          className='object-fit h-10 w-10 shrink-0 rounded-full'
-          alt={`${member.nickName} 프로필`}
-          draggable={false}
-          height={40}
-          src={member.profileImage ?? ''}
-        />
+        <ProfileImage size='sm' src={member.profileImage} />
 
         <div className='min-w-0 flex-1'>
           <h4 className='text-text-md-semibold h-6 text-gray-800'>{member.nickName}</h4>

src/components/pages/user/profile/profile-card/index.tsx

@@ -1,6 +1,4 @@
-import { DEFAULT_PROFILE_IMAGE } from 'constants/default-images';
-
-import { ImageWithFallback } from '@/components/ui';
+import { ProfileImage } from '@/components/shared';
 import { User } from '@/types/service/user';
 
 interface Props {
@@ -11,15 +9,8 @@ export const ProfileCard = ({ user }: Props) => {
   const { profileImage, nickName, profileMessage } = user;
   return (
     <div className='flex-col-center mb-6'>
-      <div className='relative mb-3 size-24 overflow-hidden rounded-full'>
-        <ImageWithFallback
-          className='object-cover'
-          alt='프로필 이미지'
-          fallbackSrc={DEFAULT_PROFILE_IMAGE}
-          fill
-          loading='eager'
-          src={profileImage || ''}
-        />
+      <div className='mb-3'>
+        <ProfileImage size='xl' src={profileImage} />
       </div>
       <h1 className='text-text-xl-bold text-gray-900'>{nickName}</h1>
       <p className='text-text-sm-medium text-gray-600'>{profileMessage}</p>

src/components/pages/user/profile/profile-edit-modal/profile-edit-fields/image-field/index.tsx

@@ -1,7 +1,8 @@
 import { AnyFieldApi } from '@tanstack/react-form';
 
 import { Icon } from '@/components/icon';
-import { ImageInput, ImageInputProps, ImageWithFallback } from '@/components/ui';
+import { ProfileImage } from '@/components/shared';
+import { ImageInput, ImageInputProps } from '@/components/ui';
 import { cn } from '@/lib/utils';
 
 type ImageUploadPropsWithoutChildren = Omit<ImageInputProps, 'children'>;
@@ -26,10 +27,9 @@ export const ImageField = ({ field, initialImages }: Props) => {
             <>
               {Object.entries(nextImages).map(([url, _file]) => (
                 <div key={url} className='relative aspect-square size-24'>
-                  <ImageWithFallback
-                    className='rounded-full border-1 border-[rgba(0,0,0,0.04)]'
-                    alt='프로필 이미지'
-                    fill
+                  <ProfileImage
+                    className='border-1 border-[rgba(0,0,0,0.04)]'
+                    size='xl'
                     src={url}
                   />
                   <button

src/components/pages/user/profile/profile-follows-modal/index.tsx

@@ -4,13 +4,8 @@ import { Suspense } from 'react';
 
 import { UseSuspenseInfiniteQueryResult } from '@tanstack/react-query';
 
-import {
-  ImageWithFallback,
-  ModalContent,
-  ModalDescription,
-  ModalTitle,
-  useModal,
-} from '@/components/ui';
+import { ProfileImage } from '@/components/shared';
+import { ModalContent, ModalDescription, ModalTitle, useModal } from '@/components/ui';
 import { useGetFolloweesInfinite, useGetFollowersInfinite } from '@/hooks/use-follower';
 import { useIntersectionObserver } from '@/hooks/use-intersection-observer';
 import { CommonErrorResponse } from '@/types/service/common';
@@ -86,13 +81,7 @@ const FollowList = ({
           className='flow-row flex gap-4 py-2'
           onClick={close}
         >
-          <ImageWithFallback
-            width={48}
-            className='aspect-square rounded-full'
-            alt='프로필 이미지'
-            height={48}
-            src={item.profileImage}
-          />
+          <ProfileImage size='md' src={item.profileImage} />
           <div>
             <p className='text-text-md-bold text-gray-800'>{item.nickname}</p>
             <p className='text-text-sm-medium text-gray-600'>{item.profileMessage}</p>

src/components/shared/card/card-profile/index.tsx

@@ -1,22 +1,14 @@
-import { ImageWithFallback } from '@/components/ui';
+import { ProfileImage } from '@/components/shared/profile-image';
 
 type CardProfileProps = {
   nickName: string;
-  profileImage?: string | null;
-  size?: number;
+  profileImage: string | null;
 };
 
-const DEFAULT_SIZE = 16;
-
-export const CardProfile = ({ nickName, profileImage, size = DEFAULT_SIZE }: CardProfileProps) => {
+export const CardProfile = ({ nickName, profileImage }: CardProfileProps) => {
   return (
     <div className='mt-3 flex items-center gap-1.5'>
-      <div
-        className='relative shrink-0 overflow-hidden rounded-full'
-        style={{ width: size, height: size }}
-      >
-        <ImageWithFallback className='object-cover' alt={nickName} fill src={profileImage || ''} />
-      </div>
+      <ProfileImage size='xs' src={profileImage} />
       <span className='text-text-xs-medium text-gray-900'>{nickName}</span>
     </div>
   );

src/components/shared/card/card-thumbnail/index.tsx

@@ -18,7 +18,7 @@ export const CardThumbnail = ({ title, thumbnail, isPending, isFinished }: CardT
         alt={title}
         fallbackSrc={DEFAULT_GROUP_LIST_IMAGE}
         height={100}
-        src={thumbnail ?? ''}
+        src={thumbnail ?? null}
       />
       {isPending && (
         <div className='absolute top-1.5 left-1.5'>

src/components/shared/card/index.test.tsx

@@ -38,7 +38,7 @@ describe('Card', () => {
     render(<Card {...defaultProps} />);
 
     // profileImage가 null이면 기본 프로필 이미지가 렌더링되어야 한다
-    const profileImg = screen.getByRole('img', { name: defaultProps.nickName });
+    const profileImg = screen.getByRole('img', { name: '프로필 이미지' });
     expect(profileImg).toBeInTheDocument();
   });
 
@@ -64,6 +64,6 @@ describe('Card', () => {
 
     // 썸네일 alt는 title, 프로필 alt는 nickName
     expect(screen.getByAltText(defaultProps.title)).toBeInTheDocument();
-    expect(screen.getByAltText(defaultProps.nickName)).toBeInTheDocument();
+    expect(screen.getByAltText('프로필 이미지')).toBeInTheDocument();
   });
 });

src/components/shared/card/index.tsx

@@ -18,7 +18,7 @@ type CardProps = {
   nickName: string;
   participantCount: number;
   maxParticipants: number;
-  profileImage?: string | null;
+  profileImage: string | null;
   onClick?: () => void;
   leaveAndChatActions?: {
     onLeave: () => void;

src/components/shared/index.ts

@@ -2,5 +2,6 @@ export { AnimateDynamicHeight } from './animate-dynamic-height';
 export { AuthSwitch } from './auth-switch-link';
 export { ErrorMessage } from './error-message';
 export { FormInput } from './form-input';
+export { ProfileImage } from './profile-image';
 export { SearchBar } from './search-bar';
 export { TabNavigation } from './tab-navigation';