[Fix] 구글 로그인 이미지 수정 및 채팅 유저 목록 렌더링 변경

next.config.ts

@@ -27,6 +27,10 @@ const nextConfig: NextConfig = {
         port: '',
         pathname: '/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'lh3.googleusercontent.com',
+      },
     ],
     //imagesSizes, deviceSizes는 기본 설정
     imageSizes: [96, 128, 256, 384],

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

@@ -1,11 +1,11 @@
 'use client';
-import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 
 import { useMemo } from 'react';
 
 import { DEFAULT_PROFILE_IMAGE } from 'constants/default-images';
 
+import { ImageWithFallback } from '@/components/ui';
 import { useChatListSocket, useGetChatList } from '@/hooks/use-chat';
 import { cn } from '@/lib/utils';
 
@@ -52,7 +52,7 @@ export const ChatList = ({ userId, accessToken }: IProps) => {
             >
               {/* 프로필 이미지 - 이미지 수정 필요💥💥*/}
               <div className='relative size-12 overflow-hidden rounded-full'>
-                <Image
+                <ImageWithFallback
                   className='object-cover'
                   alt='프로필 이미지'
                   fill

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

@@ -1,7 +1,4 @@
-import Image from 'next/image';
-
-import { DEFAULT_PROFILE_IMAGE } from 'constants/default-images';
-
+import { ImageWithFallback } from '@/components/ui';
 import { formatKoreanTime } from '@/lib/formatDateTime';
 import { ChatMessage } from '@/types/service/chat';
 
@@ -14,15 +11,14 @@ interface IProps {
 export const OtherChat = ({ item }: IProps) => {
   const { senderProfileImage, senderName, content, timestamp, createdAt } = item;
   const time = timestamp ?? createdAt;
-
   return (
     <div className='flex'>
-      <Image
+      <ImageWithFallback
         width={40}
         className='mr-3 size-10 rounded-full object-cover'
         alt='프로필 이미지'
         height={40}
-        src={senderProfileImage || DEFAULT_PROFILE_IMAGE}
+        src={senderProfileImage || ''}
       />
 
       <div className='mr-1.5 max-w-60'>

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

@@ -27,6 +27,12 @@ export const UserList = ({ onClose, roomId, roomType, userId }: UserListProps) =
   const isCurrentUserOwner = data?.participants.some(
     (participant) => participant.userId === userId && participant.isOwner,
   );
+  const sortedParticipants = data?.participants
+    ? [...data.participants].sort((a, b) => {
+        if (a.isOwner === b.isOwner) return 0;
+        return a.isOwner ? -1 : 1;
+      })
+    : [];
 
   return (
     <div className='bg-mono-white flex h-[calc(100vh-112px)] flex-col'>
@@ -55,7 +61,7 @@ export const UserList = ({ onClose, roomId, roomType, userId }: UserListProps) =
 
       {/* 유저 리스트 */}
       <div className='scrollbar-thin flex-1 overflow-y-auto'>
-        {data?.participants.map((user, index) => (
+        {sortedParticipants.map((user, index) => (
           <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'>