From c8d18ca5e351ded046d4d4948d7e00a726b3ae68 Mon Sep 17 00:00:00 2001
From: jiohjung98 <ckaquz98@naver.com>
Date: Sun, 9 Jun 2024 21:19:39 +0900
Subject: [PATCH] =?UTF-8?q?design:=20=EC=B0=B8=EC=97=AC=EC=9E=90=20?=
 =?UTF-8?q?=EC=B4=88=EB=8C=80=20=EA=B0=80=EB=A1=9C=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4=20=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EA=B9=A8=EC=A7=80=EC=A7=80=20=EC=95=8A?=
 =?UTF-8?q?=EA=B2=8C=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../meetingRoom/MeetingRoomInfo.tsx           | 34 +++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/reservation/meetingRoom/MeetingRoomInfo.tsx b/src/components/reservation/meetingRoom/MeetingRoomInfo.tsx
index 1f865ec..3abb6ec 100644
--- a/src/components/reservation/meetingRoom/MeetingRoomInfo.tsx
+++ b/src/components/reservation/meetingRoom/MeetingRoomInfo.tsx
@@ -312,20 +312,26 @@ const MeetingRoomInfo = () => {
                 </div>
                 {showSearch && (
                     <>
-                        {addedMembers.length > 0 && (
-                            <div className="mt-4 flex overflow-x-auto">
-                                {addedMembers.map(member => (
-                                    <div key={member.memberId} className="flex items-center">
-                                        <div className='px-2.5 py-1 mr-[6px] rounded-xl border border-zinc-400 justify-start items-center gap-2 inline-flex'>
-                                            <div className="overflow-x-auto text-neutral-400 text-sm font-medium font-['Pretendard'] mt-[2px]">
-                                                {member.memberName}
-                                            </div>
-                                            <Image src={'/reservation/deleteBtn.svg'} width={10} height={10} alt="delete uder" className="cursor-pointer" onClick={() => handleRemoveMember(member)} />
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-                        )}
+                    {addedMembers.length > 0 && (
+    <div className="mt-4 flex w-full overflow-x-auto">
+        <div className="flex flex-nowrap">
+            {addedMembers.map(member => (
+                <div key={member.memberId} className="flex items-center mr-2.5 flex-shrink-0">
+                    <div className='px-2.5 py-1 rounded-xl border border-zinc-400 justify-start items-center inline-flex'>
+                        <div className="text-neutral-400 text-sm font-medium font-['Pretendard'] mt-[2px] whitespace-nowrap mr-2 flex-shrink-0">
+                            {member.memberName}
+                        </div>
+                        <Image src={'/reservation/deleteBtn.svg'} width={10} height={10} alt="delete user" className="cursor-pointer flex-shrink-0" onClick={() => handleRemoveMember(member)} />
+                    </div>
+                </div>
+            ))}
+        </div>
+    </div>
+)}
+
+
+
+
                         <div className="relative w-full mt-[20px]">
                             <input
                                 type="text"