Merge pull request #74 from MOVIEJOJO7/Feature/#62

Feat : QA에서 나온 것들 수정 완료 pr
MOVIEJOJO7 · Nov 15, 2023 · 7ca7cdc · 7ca7cdc
2 parents 32150b6 + f19a476
commit 7ca7cdc
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 42 deletions.
diff --git a/Components/Common/Header.tsx b/Components/Common/Header.tsx
@@ -40,7 +40,7 @@ const OpenUl = () => {
 	return (
 		<ul className="flex align-center gap-3">
 			<li className="flex align-center cursor-pointer">
-				<Link href={'/search'}>
+				<Link href={'/searchmychat'}>
 					<Image
 						width={25}
 						height={25}

diff --git a/Components/Open/ChatDivder/ChatDivider.tsx b/Components/Open/ChatDivder/ChatDivider.tsx
@@ -48,10 +48,18 @@ const ChatDivder = ({ myChatList }: ChatListProps) => {
 				</TabsHeader>
 				<TabsBody className="h-full">
 					<TabPanel value="personal" className="min-h-[calc(80vh)]">
-						<ChatList myChatList={PersonalChat} accessToken={accessToken} />
+						{PersonalChat.length ? (
+							<ChatList myChatList={PersonalChat} accessToken={accessToken} />
+						) : (
+							<h1 className="mx-auto my-2">개인 채팅방이 없습니다.</h1>
+						)}
 					</TabPanel>
 					<TabPanel value="multi" className="min-h-[calc(80vh)]">
-						<ChatList myChatList={MultiChat} accessToken={accessToken} />
+						{MultiChat.length ? (
+							<ChatList myChatList={MultiChat} accessToken={accessToken} />
+						) : (
+							<h1 className="mx-auto my-2">단체 채팅방이 없습니다.</h1>
+						)}
 					</TabPanel>
 				</TabsBody>
 			</Tabs>

diff --git a/Components/Open/ChatDivder/ChatDividerOpen.tsx b/Components/Open/ChatDivder/ChatDividerOpen.tsx
@@ -44,7 +44,11 @@ const OpenChatDivider = ({ myChatList }: ChatListProps) => {
 				</TabsHeader>
 				<TabsBody>
 					<TabPanel value="open" className="min-h-[calc(80vh)]">
-						<ChatList myChatList={PublicChat} accessToken={accessToken} />
+						{PublicChat.length ? (
+							<ChatList myChatList={PublicChat} accessToken={accessToken} />
+						) : (
+							<h1 className="mx-auto my-2">오픈채팅방이 없습니다.</h1>
+						)}
 					</TabPanel>
 				</TabsBody>
 			</Tabs>

diff --git a/Components/Search/OpenChatModal.tsx b/Components/Search/OpenChatModal.tsx
@@ -49,18 +49,6 @@ const OpenChatModal = ({ modalChat }: { modalChat: Chat }) => {
 				/>
 			</button>
 
-			<div className="h-4/6 ml-5 text-white">
-				<OpenChatText openChat={modalChat} textSize={TEXT_SIZE} />
-			</div>
-			<button
-				className="h-1/6 bg-yellow-500 font-medium"
-				onClick={() => {
-					router.push(`chat/${modalChat.id}?isPrivate=false`);
-				}}
-			>
-				오픈 채팅방 참여하기
-			</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">

diff --git a/Components/Search/SearchOpenChat.tsx b/Components/Search/SearchOpenChat.tsx
@@ -7,6 +7,7 @@ import { Input } from '@material-tailwind/react';
 import { Chat } from '@/types';
 import { search, toLower } from '@/hooks/Common/search';
 import ShowAllOpenChat from './ShowAllOpenChat';
+import Footer from '../Common/Footer';
 
 const SearchOpenChat = ({ allOpenChat }: { allOpenChat: Chat[] }) => {
 	const [userInput, setUserInput] = useState('');
@@ -53,7 +54,6 @@ const SearchOpenChat = ({ allOpenChat }: { allOpenChat: Chat[] }) => {
 					}}
 				/>
 			</div>
-
 			{searchedChats.length ? (
 				<>
 					<strong className="mt-5">오픈 채팅방</strong>
@@ -75,6 +75,7 @@ const SearchOpenChat = ({ allOpenChat }: { allOpenChat: Chat[] }) => {
 			) : (
 				<h1 className="m-auto">검색 결과가 없습니다.</h1>
 			)}
+			<Footer />
 		</>
 	);
 };

diff --git a/Components/Users/ProfileModal.tsx b/Components/Users/ProfileModal.tsx
@@ -13,6 +13,8 @@ import { convertPictureURL } from '@/hooks/Common/users';
 import { Input } from '@material-tailwind/react';
 import axios from 'axios';
 import { editUser } from '@/app/users/users.utils';
+import useAsyncLoading from '@/hooks/Open/useAsyncLoading';
+import Swal from 'sweetalert2';
 
 type FetchImageProps = {
 	file: string;
@@ -42,6 +44,7 @@ const ProfileModal = ({
 	const router = useRouter();
 	const searchParams = useSearchParams();
 
+	const setLoading = useAsyncLoading();
 	const [isEdit, setIsEdit] = useState<boolean>(false);
 	const [userInput, setUserInput] = useState<User>({
 		...user,
@@ -54,11 +57,15 @@ const ProfileModal = ({
 	/* 1:1 채팅방 참여 */
 	const chattingParticipateHandler = async () => {
 		if (existPrivateChat) {
+			setLoading(true);
 			await participateChat(accessToken, existPrivateChat.id);
+			setLoading(false);
 			router.push(`/chat/${existPrivateChat.id}?isPrivate=true`);
 		} else {
+			setLoading(true);
 			const chat = await createPrivateChat(accessToken, user);
 			await participateChat(accessToken, chat.id);
+			setLoading(false);
 			router.push(`/chat/${chat.id}?isPrivate=true`);
 		}
 	};
@@ -69,6 +76,7 @@ const ProfileModal = ({
 		let photoUrl: string = '';
 
 		try {
+			setLoading(true);
 			/* 이미지가 변경 됐을 경우*/
 			if (userInput.picture.slice(0, 10) === 'data:image') {
 				isEditUserImage = true;
@@ -87,18 +95,17 @@ const ProfileModal = ({
 
 			if (isEditUserImage) {
 				/* url가지고 정보 수정 */
-				const message = await editUser(accessToken, userInput.name, photoUrl);
+				await editUser(accessToken, userInput.name, photoUrl);
 				setUserInput({ ...user, picture: photoUrl });
-				console.log(message);
 			} else if (isEditUserName) {
 				/* 이름만 정보 수정 */
-				const message = await editUser(accessToken, userInput.name);
-				console.log(message);
+				await editUser(accessToken, userInput.name);
 			}
 		} catch (e) {
 			console.error(e);
 		} finally {
 			setIsEdit(false);
+			setLoading(false);
 		}
 	};
 
@@ -119,17 +126,27 @@ const ProfileModal = ({
 		}
 	};
 
+	const invalidImageType = ['svg', 'png', 'jpg', 'jpeg'];
 	const handleFileChange = () => {
 		let file = null;
 		if (fileInputRef.current?.files) {
 			const reader = new FileReader();
 			file = fileInputRef.current.files[0];
 			reader.onload = (e) => {
 				const base64DataUrl = e.target!.result as string;
-				console.log({ ...userInput, picture: base64DataUrl });
 				setUserInput({ ...userInput, picture: base64DataUrl });
 			};
-			reader.readAsDataURL(file);
+			if (invalidImageType.includes(file.type.split('/')[1])) {
+				console.log(file.type.split('/')[1]);
+				reader.readAsDataURL(file);
+			} else {
+				Swal.fire({
+					text: '이미지 타입을 확인해주세요(svg, jpg, jpeg, png만 가능합니다)',
+					showCancelButton: false,
+					confirmButtonText: '확인',
+					confirmButtonColor: 'red',
+				});
+			}
 		}
 	};
 

diff --git a/Components/Users/SearchUsers.tsx b/Components/Users/SearchUsers.tsx
@@ -10,6 +10,7 @@ import ShowSearchedFriend from './ShowSearchedFriend';
 import FriendProfiles from '../Users/FriendProfiles';
 import ShowAllOpenChat from '../Search/ShowAllOpenChat';
 import { useRouter } from 'next/navigation';
+import Footer from '../Common/Footer';
 
 const SearchOpenChat = ({
 	allUsersExceptMe,
@@ -81,17 +82,19 @@ const SearchOpenChat = ({
 			)}
 			{!isShowMore && (
 				<>
-					{searchedChats.length || searchedUsers.length ? (
-						<>
-							<strong className="mt-5">내 친구 찾기</strong>
-							{allUsersExceptMe && (
-								<ShowSearchedFriend
-									setIsShowMore={setIsShowMore}
-									searchedUsers={searchedUsers as User[]}
-								/>
-							)}
+					<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>
+					<strong className="mt-5">내 채팅방 찾기</strong>
+					{searchedChats.length ? (
+						<>
 							{searchedChats.map((chat) => (
 								<Link
 									href={{
@@ -107,10 +110,16 @@ const SearchOpenChat = ({
 							))}
 						</>
 					) : (
-						<h1 className="m-auto">검색 결과가 없습니다.</h1>
+						<>
+							<h1 className="mx-auto my-2">검색된 내 채팅이 없습니다. </h1>
+							<Link href="/search" className="mx-auto underline">
+								오픈채팅방 보러가기
+							</Link>
+						</>
 					)}
 				</>
 			)}
+			<Footer />
 		</>
 	);
 };

diff --git 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">
+		<div className="grid grid-cols-5 my-4">
 			{searchedUserUpToFour?.map((user) => {
 				const picture = convertPictureURL(user.picture);
 				return (
@@ -25,13 +25,22 @@ const ShowSearchedFriend = ({
 								query: { isMyProfile: false },
 							}}
 						>
-							<Image
-								src={picture}
-								alt={user.id + `picture`}
-								width={50}
-								height={50}
-								className="rounded-full"
-							/>
+							<div className="relative w-10 h-10 mx-auto">
+								<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',
+									}}
+								/>
+							</div>
 							<h4>{user.name}</h4>
 						</Link>
 					</div>