Merge pull request #103 from part3-4team-Taskify/feature/Gnb

[Fix] Gnb: 멤버 목록 프로필 이미지 출력 오류 디버깅, 정원형 출력을 위한 리팩토링

Author: rover1523

src/components/gnb/Avatars.tsx

@@ -12,8 +12,6 @@ interface MemberAvatarsProps {
 }
 
 const MAX_VISIBLE_MEMBERS = 4;
-const memberIconWrapperClass =
-  "w-[34px] h-[34px] md:w-[38px] md:h-[38px] rounded-full border-[2px] border-white overflow-hidden";
 
 export const MemberAvatars: React.FC<MemberAvatarsProps> = ({
   members,
@@ -24,29 +22,29 @@ export const MemberAvatars: React.FC<MemberAvatarsProps> = ({
 
   return (
     <div className="pr-[15px] md:pr-[25px] lg:pr-[30px]">
-      <div className="flex -space-x-3">
+      <div className="flex items-center justify-center -space-x-3">
         {isLoading ? (
           <SkeletonUser />
         ) : (
           <>
             {members.slice(0, MAX_VISIBLE_MEMBERS).map((member) => (
-              <div key={member.id}>
+              <div key={member.id} className="relative rounded-full">
                 {member.profileImageUrl ? (
-                  <Image
-                    src={member.profileImageUrl}
-                    alt={member.nickname}
-                    fill
-                    className={`${memberIconWrapperClass} object-cover`}
-                  />
+                  <div className="relative w-[34px] h-[34px] md:w-[38px] md:h-[38px] rounded-full border-[2px] border-white overflow-hidden">
+                    <Image
+                      src={member.profileImageUrl}
+                      alt={member.nickname}
+                      fill
+                      className="object-cover"
+                    />
+                  </div>
                 ) : (
                   <RandomProfile name={member.nickname} />
                 )}
               </div>
             ))}
             {members.length > MAX_VISIBLE_MEMBERS && (
-              <div
-                className={`${memberIconWrapperClass} bg-[#F4D7DA] font-16m text-[#D25B68]`}
-              >
+              <div className="relative w-[34px] h-[34px] md:w-[38px] md:h-[38px] rounded-full bg-[#F4D7DA] font-16m text-[#D25B68] border-[2px] border-white overflow-hidden">
                 +{members.length - MAX_VISIBLE_MEMBERS}
               </div>
             )}

src/components/table/member/RandomProfile.tsx

@@ -15,7 +15,7 @@ export default function RandomProfile({ name, index }: RandomProfileProps) {
 
   return (
     <div
-      className={`flex items-center justify-center text-white font-bold rounded-full ${bgColor} w-[34px] h-[34px] md:w-[38px] md:h-[38px] border-2`}
+      className={`flex items-center justify-center text-white font-bold rounded-full ${bgColor} w-[34px] h-[34px] md:w-[38px] md:h-[38px] border-[2px]`}
     >
       {name[0]}
     </div>