From a984a393debd6aff97830ea75ec592d52a440bd8 Mon Sep 17 00:00:00 2001
From: MinSeobKim <icdmiracle927@gmail.com>
Date: Thu, 16 Nov 2023 00:31:32 +0900
Subject: [PATCH 01/10] =?UTF-8?q?Feat=20:=20Header=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Components/Common/Header.tsx                  | 30 ++++++++++++++++---
 .../Open/ChatList/ChatItem/ChatItem.tsx       | 10 +++----
 Components/Search/SearchOpenChat.tsx          | 18 ++++-------
 Components/Wrapper.tsx                        |  2 +-
 app/search/page.tsx                           |  2 ++
 5 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/Components/Common/Header.tsx b/Components/Common/Header.tsx
index 5e90212..11772fa 100644
--- a/Components/Common/Header.tsx
+++ b/Components/Common/Header.tsx
@@ -4,17 +4,34 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import React from 'react';
+import icon_left from '@/public/icon_arrow_left.svg';
 
 const Header = () => {
 	const pathname = usePathname();
 	let headerInfo = friends;
 	if (pathname === '/open') headerInfo = open;
 	else if (pathname === '/private') headerInfo = privates;
+	else if (pathname === '/search') headerInfo = search;
 
 	return (
-		<header className="flex w-full justify-between align-center py-3 bg-bglight">
+		<header
+			className={`flex relative w-full px-3 text-bgfill ${
+				headerInfo === search ? 'justify-center' : 'justify-between'
+			} align-center py-3  bg-bglight`}
+		>
+			{headerInfo === search && (
+				<Link href={'/open'}>
+					<Image
+						src={icon_left}
+						alt="뒤로가기"
+						width={25}
+						height={25}
+						className="absolute left-0"
+					/>
+				</Link>
+			)}
 			<strong className="text-3xl">{headerInfo.Heading}</strong>
-			<headerInfo.HeaderUl />
+			{headerInfo !== search && <headerInfo.HeaderUl />}
 		</header>
 	);
 };
@@ -38,8 +55,8 @@ const UsersUl = () => {
 
 const OpenUl = () => {
 	return (
-		<ul className="flex align-center gap-3">
-			<li className="flex align-center cursor-pointer">
+		<ul className="flex gap-3">
+			<li className="flex  cursor-pointer items-center">
 				<Link href={'/searchmychat'}>
 					<Image
 						width={25}
@@ -68,4 +85,9 @@ const open = {
 	Heading: '오픈캣톡',
 };
 
+const search = {
+	HeaderUl: OpenUl,
+	Heading: '오픈채팅방',
+};
+
 export default Header;
diff --git a/Components/Open/ChatList/ChatItem/ChatItem.tsx b/Components/Open/ChatList/ChatItem/ChatItem.tsx
index 6d1c945..3e39404 100644
--- a/Components/Open/ChatList/ChatItem/ChatItem.tsx
+++ b/Components/Open/ChatList/ChatItem/ChatItem.tsx
@@ -43,20 +43,20 @@ const ChatItem = ({ chat }: ChatItemProps) => {
 							<div className="flex flex-row">
 								<Typography
 									variant="h6"
-									className="whitespace-normal text-chat mr-2"
+									className="whitespace-normal text-xs text-chat mr-2"
 								>
 									{chat.name}
 								</Typography>
 								<Typography
 									color="gray"
-									className=" flex gap-1 items-center text-xs font-thin"
+									className=" flex gap-1 items-center text-[8px] font-thin"
 								>
 									<Image
 										src={icon_people}
 										alt="candice"
 										width={10}
 										height={10}
-										className="rounded-full w-4 h-4 object-contain"
+										className="rounded-full w-3 h-3 object-contain"
 									/>
 									{`${chat.users.length}명 참여`}
 								</Typography>
@@ -64,12 +64,12 @@ const ChatItem = ({ chat }: ChatItemProps) => {
 							<Typography
 								variant="small"
 								color="gray"
-								className="font-normal truncate"
+								className="font-normal truncate text-xs"
 							>
 								{`${koreanTime(chat.updatedAt)}`}
 							</Typography>
 						</div>
-						<Typography variant="h6" className="font-normal text-chat">
+						<Typography variant="h6" className="font-normal text-xs text-chat">
 							{chat.latestMessage
 								? chat.latestMessage.text
 								: '아직 채팅이 없습니다.'}
diff --git a/Components/Search/SearchOpenChat.tsx b/Components/Search/SearchOpenChat.tsx
index 4869f40..3f7a14e 100644
--- a/Components/Search/SearchOpenChat.tsx
+++ b/Components/Search/SearchOpenChat.tsx
@@ -25,29 +25,21 @@ const SearchOpenChat = ({ allOpenChat }: { allOpenChat: Chat[] }) => {
 
 	return (
 		<>
-			<div className="relative flex items-center pt-3">
-				<Link href={'/open'}>
-					<Image
-						width={25}
-						height={25}
-						src="/icon_back.svg"
-						alt="뒤로 가기"
-						className="mr-3"
-					/>
-				</Link>
+			<div className="relative flex items-center pt-3 px-3">
 				<Input
 					onChange={getUserInput}
 					onKeyPress={handleKeyPress}
 					label="검색 Input"
 					crossOrigin={undefined}
 					value={userInput}
+					className="px-3"
 				/>
 				<Image
 					width={20}
 					height={20}
 					src="/icon_cancel.svg"
 					alt="검색 취소하기"
-					className="absolute right-2"
+					className="absolute right-5"
 					onClick={() => {
 						setUserInput('');
 						setSearchedChats(allOpenChat);
@@ -55,7 +47,7 @@ const SearchOpenChat = ({ allOpenChat }: { allOpenChat: Chat[] }) => {
 				/>
 			</div>
 			{searchedChats.length ? (
-				<>
+				<div className="w-full px-3">
 					<strong className="mt-5">오픈 채팅방</strong>
 
 					{searchedChats.map((chat) => (
@@ -71,7 +63,7 @@ const SearchOpenChat = ({ allOpenChat }: { allOpenChat: Chat[] }) => {
 							</li>
 						</Link>
 					))}
-				</>
+				</div>
 			) : (
 				<h1 className="m-auto">검색 결과가 없습니다.</h1>
 			)}
diff --git a/Components/Wrapper.tsx b/Components/Wrapper.tsx
index 8a979de..96d8b5a 100644
--- a/Components/Wrapper.tsx
+++ b/Components/Wrapper.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => {
 	return (
-		<section className="w-full sm:w-[425px] h-screen overflow-hidden flex flex-col mx-auto bg-orange-300">
+		<section className="w-full sm:w-[425px] h-screen overflow-hidden flex flex-col mx-auto bg-white">
 			{children}
 		</section>
 	);
diff --git a/app/search/page.tsx b/app/search/page.tsx
index 96cae89..e15ef01 100644
--- a/app/search/page.tsx
+++ b/app/search/page.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { fetchAllOpenChat } from './search.utils';
 import SearchOpenChat from '../../Components/Search/SearchOpenChat';
 import { cookies } from 'next/headers';
+import Header from '@/Components/Common/Header';
 
 const Search = async () => {
 	const cookieStore = cookies();
@@ -10,6 +11,7 @@ const Search = async () => {
 
 	return (
 		<>
+			<Header />
 			<SearchOpenChat allOpenChat={allOpenChat} />
 		</>
 	);

From e5c6411ca74e1e67a1a3449611c48f1b20051499 Mon Sep 17 00:00:00 2001
From: MinSeobKim <icdmiracle927@gmail.com>
Date: Thu, 16 Nov 2023 00:54:25 +0900
Subject: [PATCH 02/10] =?UTF-8?q?Feat=20:=20Search=20Page=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Components/Search/OpenChatModal.tsx   |  5 +++--
 Components/Search/OpenChatText.tsx    | 28 +++++++++++++++------------
 Components/Search/SearchOpenChat.tsx  | 13 ++++++-------
 Components/Search/ShowAllOpenChat.tsx |  7 ++++---
 4 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/Components/Search/OpenChatModal.tsx b/Components/Search/OpenChatModal.tsx
index 1c5ab5c..0ff7e29 100644
--- a/Components/Search/OpenChatModal.tsx
+++ b/Components/Search/OpenChatModal.tsx
@@ -7,7 +7,6 @@ import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 
 const OpenChatModal = ({ modalChat }: { modalChat: Chat }) => {
-	const TEXT_SIZE = 'text-2xl';
 	const router = useRouter();
 	const accessToken = getCookie('accessToken');
 
@@ -38,6 +37,7 @@ const OpenChatModal = ({ modalChat }: { modalChat: Chat }) => {
 			/>
 
 			<button
+				type="button"
 				className="absolute right-5 top-5 text-white text-lg"
 				onClick={() => router.back()}
 			>
@@ -47,12 +47,13 @@ const OpenChatModal = ({ modalChat }: { modalChat: Chat }) => {
 					height={20}
 					alt="취소 버튼"
 				/>
+				{''}
 			</button>
 
 			<div className="h-1/6 bg-black"></div>
 			<div className="absolute flex flex-col justify-end w-full h-2/5 bottom-0 left-0">
 				<div className="h-4/6 ml-5 text-white">
-					<OpenChatText openChat={modalChat} textSize={TEXT_SIZE} />
+					<OpenChatText openChat={modalChat} />
 				</div>
 				<button className="h-1/6 bg-yellow-500 font-medium" onClick={joinChat}>
 					오픈 채팅방 참여하기
diff --git a/Components/Search/OpenChatText.tsx b/Components/Search/OpenChatText.tsx
index 6e215b5..4f9f7b4 100644
--- a/Components/Search/OpenChatText.tsx
+++ b/Components/Search/OpenChatText.tsx
@@ -1,23 +1,27 @@
 import React from 'react';
 import { Chat } from '@/types';
 import { timeForToday } from '@/app/search/search.utils';
+import { Typography } from '@material-tailwind/react';
 
-const OpenChatText = ({
-	openChat,
-	textSize,
-}: {
-	openChat: Chat;
-	textSize: string;
-}) => {
+const OpenChatText = ({ openChat }: { openChat: Chat }) => {
 	const fewMinutesAgo = timeForToday(openChat.updatedAt);
 
 	return (
 		<>
-			<div className="flex flex-col justify-center w-3/4 ml-2">
-				<h2 className={textSize}>{openChat.name}</h2>
-				<div className="w-full flex mt-0.5">
-					<span className="text-sm">{openChat.users.length} 명 참여중</span>
-					<span className="ml-2 text-sm">{fewMinutesAgo.toString()}</span>
+			<div className="flex flex-col justify-center w-full ml-3">
+				<Typography
+					variant="h6"
+					className="whitespace-normal text-xs text-chat mr-2"
+				>
+					{openChat.name}
+				</Typography>
+				<div className="w-full flex mt-0.5 justify-between">
+					<span className="text-xs text-bgfill">
+						{openChat.users.length}명 참여중
+					</span>
+					<span className="ml-2 text-[9px] text-bgfill">
+						{fewMinutesAgo.toString()}
+					</span>
 				</div>
 			</div>
 		</>
diff --git a/Components/Search/SearchOpenChat.tsx b/Components/Search/SearchOpenChat.tsx
index 3f7a14e..ad62f8f 100644
--- a/Components/Search/SearchOpenChat.tsx
+++ b/Components/Search/SearchOpenChat.tsx
@@ -25,14 +25,15 @@ const SearchOpenChat = ({ allOpenChat }: { allOpenChat: Chat[] }) => {
 
 	return (
 		<>
-			<div className="relative flex items-center pt-3 px-3">
+			<div className="relative flex items-center pt-3 mb-5 px-3">
 				<Input
 					onChange={getUserInput}
 					onKeyPress={handleKeyPress}
-					label="검색 Input"
+					label="원하는 오픈 채팅방을 검색하세요"
 					crossOrigin={undefined}
 					value={userInput}
-					className="px-3"
+					color="pink"
+					className="px-3 text-primary"
 				/>
 				<Image
 					width={20}
@@ -48,8 +49,6 @@ const SearchOpenChat = ({ allOpenChat }: { allOpenChat: Chat[] }) => {
 			</div>
 			{searchedChats.length ? (
 				<div className="w-full px-3">
-					<strong className="mt-5">오픈 채팅방</strong>
-
 					{searchedChats.map((chat) => (
 						<Link
 							href={{
@@ -58,9 +57,9 @@ const SearchOpenChat = ({ allOpenChat }: { allOpenChat: Chat[] }) => {
 							}}
 							key={chat.id}
 						>
-							<li className="w-full flex justify-between py-3 border-b-2 border-black cursor-pointer">
+							<div className="w-full flex justify-between hover:bg-gray-300 rounded-t-md py-3 border-b-[0.5px] border-bgfill cursor-pointer">
 								<ShowAllOpenChat key={chat.id} chat={chat} />
-							</li>
+							</div>
 						</Link>
 					))}
 				</div>
diff --git a/Components/Search/ShowAllOpenChat.tsx b/Components/Search/ShowAllOpenChat.tsx
index 9cd5ac0..0bdbbf3 100644
--- a/Components/Search/ShowAllOpenChat.tsx
+++ b/Components/Search/ShowAllOpenChat.tsx
@@ -6,11 +6,12 @@ import OpenChatText from './OpenChatText';
 import OpenChatPicture from './OpenChatPicture';
 
 const ShowAllOpenChat = ({ chat }: { chat: Chat }) => {
-	const TEXT_SIZE = 'text-sm';
 	return (
 		<>
-			<OpenChatText openChat={chat} textSize={TEXT_SIZE} />
-			<OpenChatPicture openChatUsers={chat.users} />
+			<div className="w-fit h-fit shadow-md rounded-lg">
+				<OpenChatPicture openChatUsers={chat.users} />
+			</div>
+			<OpenChatText openChat={chat} />
 		</>
 	);
 };

From 4e797c3cdbf0c98765f7761788d9a13af96026e7 Mon Sep 17 00:00:00 2001
From: MinSeobKim <icdmiracle927@gmail.com>
Date: Thu, 16 Nov 2023 02:23:40 +0900
Subject: [PATCH 03/10] =?UTF-8?q?Feat=20:=20OpenModal=20=EC=8B=9C=EA=B0=84?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Components/Search/OpenChatModal.tsx | 41 +++++++++++++++--------------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/Components/Search/OpenChatModal.tsx b/Components/Search/OpenChatModal.tsx
index 0ff7e29..a2500a3 100644
--- a/Components/Search/OpenChatModal.tsx
+++ b/Components/Search/OpenChatModal.tsx
@@ -2,9 +2,11 @@
 
 import { Chat } from '@/types';
 import { getCookie } from '@/Components/Login/Cookie';
-import OpenChatText from './OpenChatText';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
+import { Button, Typography } from '@material-tailwind/react';
+import icon_left from '@/public/icon_arrow_left.svg';
+import { timeForToday } from '@/app/search/search.utils';
 
 const OpenChatModal = ({ modalChat }: { modalChat: Chat }) => {
 	const router = useRouter();
@@ -25,8 +27,10 @@ const OpenChatModal = ({ modalChat }: { modalChat: Chat }) => {
 		router.push(`/chat/${modalChat.id}?isPrivate=false`);
 	};
 
+	const fewMinutesAgo = timeForToday(modalChat.updatedAt);
+
 	return (
-		<section className="relative w-full h-full bg-black overflow-hidden">
+		<section className="relative w-full h-full overflow-hidden">
 			<Image
 				src={modalChat.users[0]?.picture}
 				alt="user picture"
@@ -35,32 +39,29 @@ const OpenChatModal = ({ modalChat }: { modalChat: Chat }) => {
 				priority={true}
 				style={{ opacity: 0.5 }}
 			/>
-
 			<button
 				type="button"
-				className="absolute right-5 top-5 text-white text-lg"
+				className="absolute left-5 top-5 text-white text-lg"
 				onClick={() => router.back()}
 			>
-				<Image
-					src="/icon_cancel_normal.svg"
-					width={20}
-					height={20}
-					alt="취소 버튼"
-				/>
+				<Image src={icon_left} width={20} height={20} alt="취소 버튼" />
 				{''}
 			</button>
-
-			<div className="h-1/6 bg-black"></div>
-			<div className="absolute flex flex-col justify-end w-full h-2/5 bottom-0 left-0">
-				<div className="h-4/6 ml-5 text-white">
-					<OpenChatText openChat={modalChat} />
+			<div className="absolute flex flex-col justify-center items-center w-full h-1/5 bottom-24 left-0 ">
+				<div className="w-4/5">
+					<Typography variant="h5">{modalChat.name}</Typography>
+					<div className="flex flex-row gap-4 text-bgfill">
+						<p>{modalChat.users.length}명 참여중</p>
+						<p>{fewMinutesAgo.toString()}</p>
+					</div>
 				</div>
-				<button className="h-1/6 bg-yellow-500 font-medium" onClick={joinChat}>
-					오픈 채팅방 참여하기
-				</button>
-
-				<div className="h-1/6 bg-black"></div>
 			</div>
+			<Button
+				className="w-full h-24 rounded-none bg-text text-2xl font-thin absolute bottom-0"
+				onClick={joinChat}
+			>
+				오픈 채팅방 참여하기
+			</Button>
 		</section>
 	);
 };

From 1457715527004c98025a2a2e5f407a3319b2a751 Mon Sep 17 00:00:00 2001
From: MinSeobKim <icdmiracle927@gmail.com>
Date: Thu, 16 Nov 2023 10:40:57 +0900
Subject: [PATCH 04/10] =?UTF-8?q?Feat=20:=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Components/Join/DropZone/DropZone.tsx | 2 +-
 app/join/page.tsx                     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Components/Join/DropZone/DropZone.tsx b/Components/Join/DropZone/DropZone.tsx
index 9be92b9..88725f1 100644
--- a/Components/Join/DropZone/DropZone.tsx
+++ b/Components/Join/DropZone/DropZone.tsx
@@ -74,7 +74,7 @@ const DropZone = ({ setFn, baseImageUrl }: DropZoneProps) => {
 						className="w-full h-full"
 					/>
 				) : (
-					<div className="w-full h-full flex flex-col justify-center items-center bg-white "></div>
+					<div className="w-full h-full flex flex-col justify-center items-center bg-bglight "></div>
 				)}
 			</div>
 			<Image
diff --git a/app/join/page.tsx b/app/join/page.tsx
index f332f71..2339cd9 100644
--- a/app/join/page.tsx
+++ b/app/join/page.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 const Join = () => {
 	return (
-		<div className="w-full h-full bg-fill">
+		<div className="w-full h-full bg-white">
 			<JoinForm></JoinForm>
 		</div>
 	);

From 966ebb03a208bfd67170d6226e4a4c47aa88e884 Mon Sep 17 00:00:00 2001
From: MinSeobKim <icdmiracle927@gmail.com>
Date: Thu, 16 Nov 2023 12:13:54 +0900
Subject: [PATCH 05/10] =?UTF-8?q?Feat=20:=20config=20=EC=86=8D=EC=84=B1=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Components/Common/Footer.tsx                  |  2 +-
 Components/Common/Header.tsx                  |  2 +-
 Components/Open/ChatDivder/ChatDivider.tsx    | 51 +++++++-------
 .../Open/ChatDivder/ChatDividerOpen.tsx       | 69 +++++++++----------
 .../Open/ChatGenerator/ChatGenerator.tsx      |  3 +
 Components/Open/SpeedDial/SpeedDial.tsx       |  8 +--
 Components/Search/SearchOpenChat.tsx          |  4 +-
 app/open/page.tsx                             | 12 ++--
 app/private/page.tsx                          | 12 ++--
 next.config.js                                |  7 +-
 10 files changed, 80 insertions(+), 90 deletions(-)

diff --git a/Components/Common/Footer.tsx b/Components/Common/Footer.tsx
index baa5ed9..33e704e 100644
--- a/Components/Common/Footer.tsx
+++ b/Components/Common/Footer.tsx
@@ -23,7 +23,7 @@ const Footer = () => {
 	};
 
 	return (
-		<div className="w-full sm:w-[425px]  h-14 flex justify-around items-center bg-primary mx-auto fixed inset-x-0 bottom-0">
+		<div className="w-full sm:w-[425px] h-14 flex justify-around items-center bg-primary mx-auto absolute inset-x-0 bottom-0">
 			<Tooltip
 				content="유저들 👋"
 				animate={{
diff --git a/Components/Common/Header.tsx b/Components/Common/Header.tsx
index 11772fa..c6cd815 100644
--- a/Components/Common/Header.tsx
+++ b/Components/Common/Header.tsx
@@ -15,7 +15,7 @@ const Header = () => {
 
 	return (
 		<header
-			className={`flex relative w-full px-3 text-bgfill ${
+			className={`flex relative w-full px-3 h-14 text-bgfill ${
 				headerInfo === search ? 'justify-center' : 'justify-between'
 			} align-center py-3  bg-bglight`}
 		>
diff --git a/Components/Open/ChatDivder/ChatDivider.tsx b/Components/Open/ChatDivder/ChatDivider.tsx
index 66f9bbd..6d5bf66 100644
--- a/Components/Open/ChatDivder/ChatDivider.tsx
+++ b/Components/Open/ChatDivder/ChatDivider.tsx
@@ -43,41 +43,36 @@ const ChatDivder = ({ myChatList }: ChatListProps) => {
 	const { PersonalChat, MultiChat } = filterChat(chatList.chats);
 	return (
 		<>
-			<Tabs
-				value="personal"
-				className="overflow-y-scroll flex flex-col items-center w-full"
-			>
-				<div className="w-[95%] shadow-md">
-					<TabsHeader className=" w-72 bg-white">
-						{data.map((item) => (
-							<Tab
-								key={item.value}
-								value={item.value}
-								activeClassName="text-blue-500"
-							>
-								<div className="w-full flex items-center gap-2">
-									<Image
-										src={item.svg}
-										alt="candice"
-										width={10}
-										height={10}
-										className="rounded-full w-4 h-4 object-contain"
-									/>
-									<p>{item.label}</p>
-								</div>
-							</Tab>
-						))}
-					</TabsHeader>
-				</div>
+			<Tabs value="personal" className="h-full px-3">
+				<TabsHeader>
+					{data.map((item) => (
+						<Tab
+							key={item.value}
+							value={item.value}
+							activeClassName="text-blue-500"
+						>
+							<div className="w-full flex items-center gap-2">
+								<Image
+									src={item.svg}
+									alt="candice"
+									width={10}
+									height={10}
+									className="rounded-full w-4 h-4 object-contain"
+								/>
+								<p>{item.label}</p>
+							</div>
+						</Tab>
+					))}
+				</TabsHeader>
 				<TabsBody className="h-full">
-					<TabPanel value="personal" className="min-h-[calc(80vh)]">
+					<TabPanel value="personal" className="h-full overflow-y-scroll">
 						{PersonalChat.length ? (
 							<ChatList myChatList={PersonalChat} accessToken={accessToken} />
 						) : (
 							<h1 className="mx-auto my-2">개인 채팅방이 없습니다.</h1>
 						)}
 					</TabPanel>
-					<TabPanel value="multi" className="min-h-[calc(80vh)]">
+					<TabPanel value="multi" className="h-full overflow-y-scroll">
 						{MultiChat.length ? (
 							<ChatList myChatList={MultiChat} accessToken={accessToken} />
 						) : (
diff --git a/Components/Open/ChatDivder/ChatDividerOpen.tsx b/Components/Open/ChatDivder/ChatDividerOpen.tsx
index fa51e40..5cb6089 100644
--- a/Components/Open/ChatDivder/ChatDividerOpen.tsx
+++ b/Components/Open/ChatDivder/ChatDividerOpen.tsx
@@ -35,44 +35,37 @@ const OpenChatDivider = ({ myChatList }: ChatListProps) => {
 
 	const { PublicChat } = filterChat(chatList.chats);
 	return (
-		<>
-			<Tabs
-				value="open"
-				className="overflow-y-scroll w-full flex flex-col items-center"
-			>
-				<div className="w-[95%] shadow-md">
-					<TabsHeader className="w-56 bg-white">
-						{data.map((item) => (
-							<Tab
-								key={item.value}
-								value={item.value}
-								activeClassName="text-blue-500"
-							>
-								<div className="w-full flex items-center gap-2">
-									<Image
-										src={icon_people}
-										alt="candice"
-										width={10}
-										height={10}
-										className="rounded-full w-4 h-4 object-contain"
-									/>
-									<p>{item.label}</p>
-								</div>
-							</Tab>
-						))}
-					</TabsHeader>
-				</div>
-				<TabsBody>
-					<TabPanel value="open" className="min-h-[calc(80vh)]">
-						{PublicChat.length ? (
-							<ChatList myChatList={PublicChat} accessToken={accessToken} />
-						) : (
-							<h1 className="mx-auto my-2">오픈채팅방이 없습니다.</h1>
-						)}
-					</TabPanel>
-				</TabsBody>
-			</Tabs>
-		</>
+		<Tabs value="open" className="h-full px-3">
+			<TabsHeader>
+				{data.map((item) => (
+					<Tab
+						key={item.value}
+						value={item.value}
+						activeClassName="text-blue-500"
+					>
+						<div className="w-full flex items-center gap-2">
+							<Image
+								src={icon_people}
+								alt="candice"
+								width={10}
+								height={10}
+								className="rounded-full w-4 h-4 object-contain"
+							/>
+							<p>{item.label}</p>
+						</div>
+					</Tab>
+				))}
+			</TabsHeader>
+			<TabsBody className="h-full">
+				<TabPanel value="open" className="h-full overflow-y-scroll ">
+					{PublicChat.length ? (
+						<ChatList myChatList={PublicChat} accessToken={accessToken} />
+					) : (
+						<h1 className="mx-auto my-2">오픈채팅방이 없습니다.</h1>
+					)}
+				</TabPanel>
+			</TabsBody>
+		</Tabs>
 	);
 };
 
diff --git a/Components/Open/ChatGenerator/ChatGenerator.tsx b/Components/Open/ChatGenerator/ChatGenerator.tsx
index bae400a..8724d7a 100644
--- a/Components/Open/ChatGenerator/ChatGenerator.tsx
+++ b/Components/Open/ChatGenerator/ChatGenerator.tsx
@@ -16,8 +16,10 @@ import { Inputs } from './ChatGenerator.type';
 import { useFetchPostNewChat } from '@/hooks/Open/useFetchPostNewChat';
 import { useCurrentSearchParams } from '@/hooks/Open/useCurrentSearchParmas';
 import { getCookie } from '@/Components/Login/Cookie';
+import useAsyncLoading from '@/hooks/Open/useAsyncLoading';
 
 const ChatGenerator = () => {
+	const loadingControl = useAsyncLoading();
 	const accessToken = getCookie('accessToken');
 	const mutation = useFetchPostNewChat(accessToken);
 	const params = useCurrentSearchParams('type');
@@ -38,6 +40,7 @@ const ChatGenerator = () => {
 	};
 
 	const onSubmit: SubmitHandler<Inputs> = (data) => {
+		loadingControl(true);
 		mutation.mutate({
 			name: data.name,
 			users: data.users,
diff --git a/Components/Open/SpeedDial/SpeedDial.tsx b/Components/Open/SpeedDial/SpeedDial.tsx
index 7baf9c4..8c538a0 100644
--- a/Components/Open/SpeedDial/SpeedDial.tsx
+++ b/Components/Open/SpeedDial/SpeedDial.tsx
@@ -23,10 +23,10 @@ const SpeedDialWithTextInside = () => {
 	};
 
 	return (
-		<div className="absolute z-50 bottom-3 right-3">
+		<div className="absolute shadow-xl rounded-full w-fit h-fit z-50 bottom-3 right-3">
 			<SpeedDial>
 				<SpeedDialHandler>
-					<div className="flex flex-col justify-center items-center text-center text-sm rounded-full shadow-2xl hover:scale-105 transition-all duration-500 ease-in-out  w-16 h-16 bg-primary cursor-pointer">
+					<div className="flex flex-col justify-center items-center text-center text-sm rounded-full  hover:scale-105 transition-all duration-500 ease-in-out  w-16 h-16 bg-primary cursor-pointer">
 						채팅
 						<br />
 						만들기
@@ -34,7 +34,7 @@ const SpeedDialWithTextInside = () => {
 				</SpeedDialHandler>
 				<SpeedDialContent>
 					<SpeedDialAction
-						className="h-16 w-16"
+						className="h-16 w-16 shadow-md"
 						onClick={() => handleOpenModal('open')}
 					>
 						<Link href={`?${new URLSearchParams({ type: 'open' })}`}>
@@ -44,7 +44,7 @@ const SpeedDialWithTextInside = () => {
 						</Link>
 					</SpeedDialAction>
 					<SpeedDialAction
-						className="h-16 w-16"
+						className="h-16 w-16 shadow-md"
 						onClick={() => handleOpenModal('private')}
 					>
 						<Link href={`?${new URLSearchParams({ type: 'private' })}`}>
diff --git a/Components/Search/SearchOpenChat.tsx b/Components/Search/SearchOpenChat.tsx
index ad62f8f..ddd0d16 100644
--- a/Components/Search/SearchOpenChat.tsx
+++ b/Components/Search/SearchOpenChat.tsx
@@ -48,7 +48,7 @@ const SearchOpenChat = ({ allOpenChat }: { allOpenChat: Chat[] }) => {
 				/>
 			</div>
 			{searchedChats.length ? (
-				<div className="w-full px-3">
+				<div className="w-full px-3 h-fit mb-14 overflow-y-scroll">
 					{searchedChats.map((chat) => (
 						<Link
 							href={{
@@ -57,7 +57,7 @@ const SearchOpenChat = ({ allOpenChat }: { allOpenChat: Chat[] }) => {
 							}}
 							key={chat.id}
 						>
-							<div className="w-full flex justify-between hover:bg-gray-300 rounded-t-md py-3 border-b-[0.5px] border-bgfill cursor-pointer">
+							<div className="w-full flex justify-between hover:bg-gray-300 rounded-t-md py-3 border-b-[0.5px] border-bgfill border-opacity-20 cursor-pointer">
 								<ShowAllOpenChat key={chat.id} chat={chat} />
 							</div>
 						</Link>
diff --git a/app/open/page.tsx b/app/open/page.tsx
index 1df248b..e9e58a6 100644
--- a/app/open/page.tsx
+++ b/app/open/page.tsx
@@ -15,13 +15,15 @@ const Chatting = async () => {
 	const result = await fetchAllChat(accessToken);
 
 	return (
-		<div className="relative flex flex-col h-[calc(100vh-3.5rem)] w-full bg-white">
+		<>
 			<Header />
-			<OpenChatDivider myChatList={result} />
-			<ChatGenerator />
-			<SpeedDialWithTextInside />
+			<div className="relative h-[calc(100vh-112px)] pt-3">
+				<OpenChatDivider myChatList={result} />
+				<ChatGenerator />
+				<SpeedDialWithTextInside />
+			</div>
 			<Footer />
-		</div>
+		</>
 	);
 };
 
diff --git a/app/private/page.tsx b/app/private/page.tsx
index c098e0c..b8eef38 100644
--- a/app/private/page.tsx
+++ b/app/private/page.tsx
@@ -15,13 +15,15 @@ const Chatting = async () => {
 	const result = await fetchAllChat(accessToken);
 
 	return (
-		<div className="relative flex flex-col h-[calc(100vh-3.5rem)] w-full bg-white">
+		<>
 			<Header />
-			<ChatDivder myChatList={result} />
-			<ChatGenerator />
-			<SpeedDialWithTextInside />
+			<div className="relative h-[calc(100vh-112px)] pt-3">
+				<ChatDivder myChatList={result} />
+				<ChatGenerator />
+				<SpeedDialWithTextInside />
+			</div>
 			<Footer />
-		</div>
+		</>
 	);
 };
 
diff --git a/next.config.js b/next.config.js
index 9f42a51..5f2b367 100644
--- a/next.config.js
+++ b/next.config.js
@@ -3,18 +3,13 @@ const nextConfig = {
 	reactStrictMode: false,
 
 	images: {
-		domains: [
-			'gravatar.com',
-			'res.cloudinary.com',
-			'avatars.githubusercontent.com',
-		],
 		remotePatterns: [
 			{
 				protocol: 'https',
 				hostname: 'gravatar.com',
 			},
 			{
-				protocol: 'https',
+				protocol: 'http',
 				hostname: 'res.cloudinary.com',
 			},
 			{

From 3eda9766b721f8109e58880be13f7ed1ff3942bc Mon Sep 17 00:00:00 2001
From: MinSeobKim <icdmiracle927@gmail.com>
Date: Thu, 16 Nov 2023 12:22:15 +0900
Subject: [PATCH 06/10] =?UTF-8?q?Feat=20:=20=EC=B1=84=ED=8C=85=EB=B0=A9=20?=
 =?UTF-8?q?=EB=93=B1=EB=A1=9D=20=EC=8B=9C=20=20=EB=B9=84=EB=8F=99=EA=B8=B0?=
 =?UTF-8?q?=20=EB=A1=9C=EB=94=A9=20=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Components/Common/AsyncLoading/AsyncLoading.tsx | 2 +-
 Components/Open/ChatGenerator/ChatGenerator.tsx | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/Components/Common/AsyncLoading/AsyncLoading.tsx b/Components/Common/AsyncLoading/AsyncLoading.tsx
index ba88fc7..b68dc8b 100644
--- a/Components/Common/AsyncLoading/AsyncLoading.tsx
+++ b/Components/Common/AsyncLoading/AsyncLoading.tsx
@@ -10,7 +10,7 @@ const AsyncLoadingProvider = () => {
 	return (
 		<>
 			{asyncLoading && (
-				<div className="absolute top-0 left-0 bottom-0 right-0 z-[999] bg-opacity-70 w-full h-screen flex justify-center items-center bg-gray-700">
+				<div className="absolute top-0 left-0 bottom-0 right-0 z-[9999] bg-opacity-70 w-full h-screen flex justify-center items-center bg-gray-700">
 					<AsyncSpinner />
 				</div>
 			)}
diff --git a/Components/Open/ChatGenerator/ChatGenerator.tsx b/Components/Open/ChatGenerator/ChatGenerator.tsx
index 8724d7a..265c64f 100644
--- a/Components/Open/ChatGenerator/ChatGenerator.tsx
+++ b/Components/Open/ChatGenerator/ChatGenerator.tsx
@@ -46,7 +46,6 @@ const ChatGenerator = () => {
 			users: data.users,
 			isPrivate: checkIsPrivateChat(),
 		});
-		handleModalClose();
 	};
 
 	const handleModalClose = () => {

From d234d491266f1c0e42168fa2dd3b5f14519ff59a Mon Sep 17 00:00:00 2001
From: MinSeobKim <icdmiracle927@gmail.com>
Date: Thu, 16 Nov 2023 12:38:18 +0900
Subject: [PATCH 07/10] =?UTF-8?q?Feat=20:=20=EC=98=A4=ED=94=88=20=EC=B1=84?=
 =?UTF-8?q?=ED=8C=85=EB=B0=A9,=20=EA=B0=9C=EC=9D=B8=20=EC=B1=84=ED=8C=85?=
 =?UTF-8?q?=EB=B0=A9=20=EC=83=9D=EC=84=B1=20=EC=8B=9C=20=EB=8F=99=EA=B8=B0?=
 =?UTF-8?q?=ED=99=94=20=EB=A1=9C=EC=A7=81=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hooks/Open/useFetchPostNewChat.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/hooks/Open/useFetchPostNewChat.ts b/hooks/Open/useFetchPostNewChat.ts
index e0f1815..a58ee36 100644
--- a/hooks/Open/useFetchPostNewChat.ts
+++ b/hooks/Open/useFetchPostNewChat.ts
@@ -2,8 +2,12 @@
 
 import { Inputs } from '@/Components/Open/ChatGenerator/ChatGenerator.type';
 import { useMutation } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
+import useAsyncLoading from './useAsyncLoading';
 
 export const useFetchPostNewChat = (token: string) => {
+	const loadingControl = useAsyncLoading();
+	const router = useRouter();
 	const mutation = useMutation({
 		mutationFn: (data: Inputs) =>
 			fetch('https://fastcampus-chat.net/chat', {
@@ -20,7 +24,8 @@ export const useFetchPostNewChat = (token: string) => {
 			// console.log response url
 			const response = await data.json();
 			const chatId = response.id;
-			window.location.href = `/chat/${chatId}?isPrivate=${response.isPrivate}`;
+			loadingControl(false);
+			router.push(`/chat/${chatId}?isPrivate=${response.isPrivate}`);
 		},
 	});
 

From 3aa587c279617bbca6cf02d2573b0bde8a37b50c Mon Sep 17 00:00:00 2001
From: MinSeobKim <icdmiracle927@gmail.com>
Date: Thu, 16 Nov 2023 12:48:40 +0900
Subject: [PATCH 08/10] =?UTF-8?q?Feat=20:=20=EC=98=A4=ED=94=88=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=EC=B0=BD=20Button=20ui=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Components/Search/OpenChatModal.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/Components/Search/OpenChatModal.tsx b/Components/Search/OpenChatModal.tsx
index a2500a3..1a8ede8 100644
--- a/Components/Search/OpenChatModal.tsx
+++ b/Components/Search/OpenChatModal.tsx
@@ -4,7 +4,7 @@ import { Chat } from '@/types';
 import { getCookie } from '@/Components/Login/Cookie';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
-import { Button, Typography } from '@material-tailwind/react';
+import { Typography } from '@material-tailwind/react';
 import icon_left from '@/public/icon_arrow_left.svg';
 import { timeForToday } from '@/app/search/search.utils';
 
@@ -56,12 +56,13 @@ const OpenChatModal = ({ modalChat }: { modalChat: Chat }) => {
 					</div>
 				</div>
 			</div>
-			<Button
-				className="w-full h-24 rounded-none bg-text text-2xl font-thin absolute bottom-0"
+			<button
+				type="button"
+				className="w-full h-24 rounded-none bg-text text-2xl text-white opacity-100 hover:bg-opacity-75 transition duration-500 ease-linear font-thin absolute bottom-0"
 				onClick={joinChat}
 			>
 				오픈 채팅방 참여하기
-			</Button>
+			</button>
 		</section>
 	);
 };

From d64551f0be0ddc2649f6482f9a29307a0185e8ac Mon Sep 17 00:00:00 2001
From: MinSeobKim <icdmiracle927@gmail.com>
Date: Thu, 16 Nov 2023 14:07:23 +0900
Subject: [PATCH 09/10] =?UTF-8?q?Feat=20:=20=EC=9C=A0=EC=A0=80=20=EA=B2=80?=
 =?UTF-8?q?=EC=83=89=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Components/Users/FriendProfiles.tsx     |  28 +++---
 Components/Users/SearchUsers.tsx        | 110 +++++++++++++-----------
 Components/Users/ShowSearchedFriend.tsx |  23 ++---
 3 files changed, 79 insertions(+), 82 deletions(-)

diff --git a/Components/Users/FriendProfiles.tsx b/Components/Users/FriendProfiles.tsx
index 06ada80..d216723 100644
--- a/Components/Users/FriendProfiles.tsx
+++ b/Components/Users/FriendProfiles.tsx
@@ -12,7 +12,7 @@ const FriendProfiles = ({ allUsers }: { allUsers: User[] | undefined }) => {
 		<div>
 			{allUsers?.map((user) => {
 				return (
-					<li key={user.id} className="list-none cursor-pointer">
+					<div key={user.id} className="list-none cursor-pointer">
 						<Link
 							href={{
 								pathname: `/profile/${user.id}`,
@@ -21,7 +21,7 @@ const FriendProfiles = ({ allUsers }: { allUsers: User[] | undefined }) => {
 						>
 							<FriendProfile user={user} />
 						</Link>
-					</li>
+					</div>
 				);
 			})}
 		</div>
@@ -33,28 +33,20 @@ export const FriendProfile = ({ user }: { user: User | UserHasOnline }) => {
 	const isUserOnline = 'isOnline' in user;
 
 	return (
-		<div className="flex w-full align-center mb-1">
+		<div className="flex items-center w-full align-center mt-3 p-1 hover:bg-gray-300 transition duration-200 ease-linear rounded-md">
 			<div>
-				<div className="relative">
-					<div className="relative w-12 h-12 mr-5">
+				<div className="relative w-fit h-fit">
+					<div className="relative w-12 h-12 shadow-md rounded-lg flex flex-col items-center justify-center">
 						<Image
-							fill={true}
 							alt={user.name}
 							src={picture}
-							className="absolute top-0 left-0 rounded-3xl border-black my-2 mx-auto"
-							style={{
-								filter: 'drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))',
-								objectFit: 'cover',
-							}}
+							width={50}
+							height={50}
+							className="rounded-3xl w-10 h-10"
 						/>
 					</div>
 					{isUserOnline && (
-						<span
-							className="absolute top-2"
-							style={{
-								left: '55%',
-							}}
-						>
+						<span className="absolute -top-1 -right-1">
 							<div
 								className={`w-3.5 h-3.5 rounded-full bg-${
 									user.isOnline ? 'primary' : 'gray-500'
@@ -64,7 +56,7 @@ export const FriendProfile = ({ user }: { user: User | UserHasOnline }) => {
 					)}
 				</div>
 			</div>
-			<h4 className="w-1/2 py-4 mx-4 text-l">{user.name}</h4>
+			<p className="w-full ml-3">{user.name}</p>
 		</div>
 	);
 };
diff --git a/Components/Users/SearchUsers.tsx b/Components/Users/SearchUsers.tsx
index becc3d4..08092b0 100644
--- a/Components/Users/SearchUsers.tsx
+++ b/Components/Users/SearchUsers.tsx
@@ -37,8 +37,8 @@ const SearchOpenChat = ({
 	};
 
 	return (
-		<>
-			<div className="relative flex items-center pt-3">
+		<div className="h-[calc(100vh-56px)]">
+			<div className="relative h-16 flex w-full px-3 items-center bg-bglight">
 				<Image
 					width={25}
 					height={25}
@@ -56,7 +56,8 @@ const SearchOpenChat = ({
 				<Input
 					onChange={getUserInput}
 					onKeyPress={handleKeyPress}
-					label="검색 Input"
+					label="검색"
+					color="pink"
 					crossOrigin={undefined}
 					value={userInput}
 				/>
@@ -65,7 +66,7 @@ const SearchOpenChat = ({
 					height={20}
 					src="/icon_cancel.svg"
 					alt="검색 취소하기"
-					className="absolute right-2"
+					className="absolute right-6 rounded-2xl"
 					onClick={() => {
 						setUserInput('');
 						setSearchedChats(myChats);
@@ -73,54 +74,63 @@ const SearchOpenChat = ({
 					}}
 				/>
 			</div>
+			<div className="px-3 mt-5 flex flex-col h-full">
+				{isShowMore && (
+					<>
+						<strong className="mt-5">내 친구 찾기</strong>
+						<FriendProfiles allUsers={searchedUsers} />
+					</>
+				)}
+				{!isShowMore && (
+					<>
+						<strong className="mt-5">내 친구 찾기</strong>
+						{searchedUsers.length ? (
+							<ShowSearchedFriend
+								setIsShowMore={setIsShowMore}
+								searchedUsers={searchedUsers as User[]}
+							/>
+						) : (
+							<h1 className="mx-auto my-2">검색된 내 친구가 없습니다.</h1>
+						)}
 
-			{isShowMore && (
-				<>
-					<strong className="mt-5">내 친구 찾기</strong>
-					<FriendProfiles allUsers={searchedUsers} />
-				</>
-			)}
-			{!isShowMore && (
-				<>
-					<strong className="mt-5">내 친구 찾기</strong>
-					{searchedUsers.length ? (
-						<ShowSearchedFriend
-							setIsShowMore={setIsShowMore}
-							searchedUsers={searchedUsers as User[]}
-						/>
-					) : (
-						<h1 className="mx-auto my-2">검색된 내 친구가 없습니다.</h1>
-					)}
-
-					<strong className="mt-5">내 채팅방 찾기</strong>
-					{searchedChats.length ? (
-						<>
-							{searchedChats.map((chat) => (
-								<Link
-									href={{
-										pathname: `/chat/${chat.id}`,
-										query: { isPrivate: true },
-									}}
-									key={chat.id}
-								>
-									<li className="w-full flex justify-between py-3 border-b-2 border-black cursor-pointer">
-										<ShowAllOpenChat key={chat.id} chat={chat} />
-									</li>
-								</Link>
-							))}
-						</>
-					) : (
-						<>
-							<h1 className="mx-auto my-2">검색된 내 채팅이 없습니다. </h1>
-							<Link href="/search" className="mx-auto underline">
-								오픈채팅방 보러가기
-							</Link>
-						</>
-					)}
-				</>
-			)}
+						<strong className="mt-5">내 채팅방 찾기</strong>
+						<div className="h-[calc(100%-270px)] overflow-y-scroll">
+							{searchedChats.length ? (
+								<>
+									{searchedChats.map((chat) => (
+										<Link
+											href={{
+												pathname: `/chat/${chat.id}`,
+												query: { isPrivate: true },
+											}}
+											key={chat.id}
+										>
+											<div className="w-full flex justify-between py-3 border-b-[0.5px] border-opacity-20 cursor-pointer">
+												<ShowAllOpenChat key={chat.id} chat={chat} />
+											</div>
+										</Link>
+									))}
+								</>
+							) : (
+								<div className="w-full flex flex-col items-center gap-3 mt-4">
+									<h1 className="mx-auto w-full text-center">
+										검색된 내 채팅이 없습니다.{' '}
+									</h1>
+									<Link
+										href="/search"
+										passHref
+										className="mx-auto bg-secondary p-3 rounded-md text-white shadow-lg hover:bg-primary transition duration-200 ease-linear"
+									>
+										오픈채팅방 보러가기
+									</Link>
+								</div>
+							)}
+						</div>
+					</>
+				)}
+			</div>
 			<Footer />
-		</>
+		</div>
 	);
 };
 
diff --git a/Components/Users/ShowSearchedFriend.tsx b/Components/Users/ShowSearchedFriend.tsx
index 6bead94..36a51c4 100644
--- a/Components/Users/ShowSearchedFriend.tsx
+++ b/Components/Users/ShowSearchedFriend.tsx
@@ -14,7 +14,7 @@ const ShowSearchedFriend = ({
 	const searchedUserUpToFour = searchedUsers?.slice(0, 4);
 	const isUpToFour = searchedUsers.length > 4 ? true : false;
 	return (
-		<div className="grid grid-cols-5 my-4">
+		<div className="grid grid-cols-5 my-4 relative">
 			{searchedUserUpToFour?.map((user) => {
 				const picture = convertPictureURL(user.picture);
 				return (
@@ -25,30 +25,25 @@ const ShowSearchedFriend = ({
 								query: { isMyProfile: false },
 							}}
 						>
-							<div className="relative w-10 h-10 mx-auto">
+							<div className="relative w-12 h-12 flex flex-col items-center justify-center rounded-md mx-auto shadow-md">
 								<Image
 									src={picture}
 									alt={user.id + `picture`}
-									fill={true}
-									className="rounded-full"
-									style={{
-										display: 'block',
-										position: 'absolute',
-										top: 0,
-										left: 0,
-										objectFit: 'cover',
-										margin: 'auto',
-									}}
+									width={50}
+									height={50}
+									className="rounded-full w-10 h-10 object-cover"
 								/>
 							</div>
-							<h4>{user.name}</h4>
+							<p className="w-full text-center mt-1 text-[9px] truncate">
+								{user.name}
+							</p>
 						</Link>
 					</div>
 				);
 			})}
 			{isUpToFour ? (
 				<div
-					className="rounded-full text-center py-3 cursor-pointer"
+					className="rounded-sm absolute right-0 hover:bg-gray-300 transition duration-500 ease-linear w-12 h-12 text-center shadow-md text-xs py-3 cursor-pointer"
 					onClick={() => {
 						setIsShowMore(true);
 					}}

From 718392f32022f87b166d74fce552804e8c4d707a Mon Sep 17 00:00:00 2001
From: MinSeobKim <icdmiracle927@gmail.com>
Date: Thu, 16 Nov 2023 14:19:51 +0900
Subject: [PATCH 10/10] =?UTF-8?q?Feat=20:=20=EC=B1=84=ED=8C=85=EB=B0=A9=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EC=8B=9C=20=EB=B9=84=EB=8F=99=EA=B8=B0=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Components/{ => Common}/Button.tsx                           | 0
 Components/Common/Footer.tsx                                 | 2 +-
 Components/{ => Common}/Wrapper.tsx                          | 0
 .../ChatGenerator/ChatGeneratorMenu/ChatGeneratorMenu.tsx    | 2 +-
 Components/Open/ChatList/ChatList.tsx                        | 4 +++-
 app/home/page.tsx                                            | 2 +-
 app/layout.tsx                                               | 2 +-
 hooks/Open/useFetchPatchDeleteChat.ts                        | 5 +++++
 8 files changed, 12 insertions(+), 5 deletions(-)
 rename Components/{ => Common}/Button.tsx (100%)
 rename Components/{ => Common}/Wrapper.tsx (100%)

diff --git a/Components/Button.tsx b/Components/Common/Button.tsx
similarity index 100%
rename from Components/Button.tsx
rename to Components/Common/Button.tsx
diff --git a/Components/Common/Footer.tsx b/Components/Common/Footer.tsx
index 33e704e..c1804f1 100644
--- a/Components/Common/Footer.tsx
+++ b/Components/Common/Footer.tsx
@@ -95,7 +95,7 @@ const Footer = () => {
 			<Button
 				type="button"
 				onClick={handleLogout}
-				className="flex justify-center items-center bg-orange-900"
+				className="flex justify-center items-center bg-secondary text-chat"
 			>
 				로그아웃
 			</Button>
diff --git a/Components/Wrapper.tsx b/Components/Common/Wrapper.tsx
similarity index 100%
rename from Components/Wrapper.tsx
rename to Components/Common/Wrapper.tsx
diff --git a/Components/Open/ChatGenerator/ChatGeneratorMenu/ChatGeneratorMenu.tsx b/Components/Open/ChatGenerator/ChatGeneratorMenu/ChatGeneratorMenu.tsx
index d3c7ee9..24d7aae 100644
--- a/Components/Open/ChatGenerator/ChatGeneratorMenu/ChatGeneratorMenu.tsx
+++ b/Components/Open/ChatGenerator/ChatGeneratorMenu/ChatGeneratorMenu.tsx
@@ -22,7 +22,7 @@ const ChatGeneratorMenu = ({ register }: RegisterFn) => {
 	return (
 		<Menu>
 			<MenuHandler>
-				<Button className="w-full">유저 초대하기</Button>
+				<Button className="w-full bg-secondary text-chat">유저 초대하기</Button>
 			</MenuHandler>
 			<MenuList className="absolute z-[62] max-h-64">
 				<MenuItem className="text-center text-xl font-bold">유저들</MenuItem>
diff --git a/Components/Open/ChatList/ChatList.tsx b/Components/Open/ChatList/ChatList.tsx
index 7f89692..05909a1 100644
--- a/Components/Open/ChatList/ChatList.tsx
+++ b/Components/Open/ChatList/ChatList.tsx
@@ -12,6 +12,7 @@ import { DragDropContext, DropResult } from '@hello-pangea/dnd';
 import { useFetchPatchDeleteChat } from '@/hooks/Open/useFetchPatchDeleteChat';
 import ChatDroppableDelete from './ChatDroppable/ChatDroppableDelete';
 import ChatDroppableList from './ChatDroppable/ChatDroppableList';
+import useAsyncLoading from '@/hooks/Open/useAsyncLoading';
 
 const setNewListData = (
 	sourceColumn: SourceColumnProps,
@@ -35,6 +36,7 @@ const setNewListData = (
 };
 
 const ChatList = ({ myChatList, accessToken }: ChatListProps) => {
+	const loadingControl = useAsyncLoading();
 	const mutation = useFetchPatchDeleteChat(accessToken as string);
 
 	const idAddedfilteredChatList = myChatList.map(
@@ -110,7 +112,7 @@ const ChatList = ({ myChatList, accessToken }: ChatListProps) => {
 			setNewListData(sourceColumn, newTaskIds, listData, setListData);
 
 			const queryId = myChatList[deleteChatIndex].id;
-			console.log(queryId);
+			loadingControl(true);
 			mutation.mutate({
 				chatId: queryId,
 			});
diff --git a/app/home/page.tsx b/app/home/page.tsx
index c80ab92..dff0caf 100644
--- a/app/home/page.tsx
+++ b/app/home/page.tsx
@@ -1,4 +1,4 @@
-import HomeButton from '@/Components/Button';
+import HomeButton from '@/Components/Common/Button';
 import React from 'react';
 
 const wrapper = 'w-full flex flex-col items-center';
diff --git a/app/layout.tsx b/app/layout.tsx
index d33a529..870612b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
 import ClientProviders from '@/Components/Provider/ClientProvider';
-import Wrapper from '@/Components/Wrapper';
+import Wrapper from '@/Components/Common/Wrapper';
 import AsyncLoadingProvider from '@/Components/Common/AsyncLoading/AsyncLoading';
 
 const inter = Inter({ subsets: ['latin'] });
diff --git a/hooks/Open/useFetchPatchDeleteChat.ts b/hooks/Open/useFetchPatchDeleteChat.ts
index 33747b4..9f03f72 100644
--- a/hooks/Open/useFetchPatchDeleteChat.ts
+++ b/hooks/Open/useFetchPatchDeleteChat.ts
@@ -1,8 +1,10 @@
 'use client';
 
 import { useMutation } from '@tanstack/react-query';
+import useAsyncLoading from './useAsyncLoading';
 
 export const useFetchPatchDeleteChat = (token: string) => {
+	const loadingControl = useAsyncLoading();
 	const mutation = useMutation({
 		mutationFn: (data: { chatId: string }) =>
 			fetch('https://fastcampus-chat.net/chat/leave', {
@@ -15,6 +17,9 @@ export const useFetchPatchDeleteChat = (token: string) => {
 				},
 				body: JSON.stringify(data),
 			}),
+		onSuccess: async () => {
+			loadingControl(false);
+		},
 	});
 
 	return mutation;