Feat : 현재 접속한 유저에 따른 상태 변경, 사진 URL string 처리로직 구현, 유저 이미지 화면에 꽉차도록 구현 pr

Components/Search/OpenChatPicture.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { User } from '@/app/search/search.type';
 import Image from 'next/image';
+import { convertPictureURL } from '@/hooks/Common/users';
 
 const OpenChatPicture = ({ openChatUsers }: { openChatUsers: User[] }) => {
 	let userCount = 0;
@@ -15,11 +16,13 @@ const OpenChatPicture = ({ openChatUsers }: { openChatUsers: User[] }) => {
 						return null; // 사진이 4개 이상인 경우 렌더링을 하지 않음
 					}
 
+					const picture = convertPictureURL(user.picture);
+
 					return (
 						<li key={user.id} className="relative w-10 h-10 -m-1">
 							<Image
 								fill={true}
-								src={user.picture}
+								src={picture}
 								alt="user picture"
 								className="rounded"
 								style={{

Components/Users/FriendProfiles.tsx

@@ -4,6 +4,8 @@ import Image from 'next/image';
 import React from 'react';
 import { User } from '@/types';
 import Link from 'next/link';
+import { UserHasOnline } from '@/app/users/users.type';
+import { convertPictureURL } from '@/hooks/Common/users';
 
 const FriendProfiles = ({ allUsers }: { allUsers: User[] | undefined }) => {
 	return (
@@ -26,22 +28,40 @@ const FriendProfiles = ({ allUsers }: { allUsers: User[] | undefined }) => {
 	);
 };
 
-export const FriendProfile = ({ user }: { user: User }) => {
-	const picture =
-		user.picture.trim().split('.')[0] === 'https://avatars'
-			? user.picture
-			: '/icon_cat.svg';
+export const FriendProfile = ({ user }: { user: User | UserHasOnline }) => {
+	const picture = convertPictureURL(user.picture);
+	const isUserOnline = 'isOnline' in user;
 
 	return (
 		<div className="flex w-full align-center mb-4">
 			<div>
-				<Image
-					width={60}
-					height={60}
-					alt={user.name}
-					src={picture}
-					className="rounded-3xl mr-5"
-				/>
+				<div className="relative">
+					<div className="relative w-14 h-14 mr-5">
+						<Image
+							fill={true}
+							alt={user.name}
+							src={picture}
+							className="rounded-3xl border-black"
+							style={{
+								position: 'absolute',
+								top: 0,
+								left: 0,
+								objectFit: 'cover',
+								margin: 'auto',
+							}}
+						/>
+					</div>
+					{isUserOnline && (
+						<span className="absolute top-0 left-2/3">
+							<Image
+								src={`/icon_${user.isOnline ? 'green' : 'gray'}_dot.svg`}
+								height={15}
+								width={15}
+								alt="online"
+							/>
+						</span>
+					)}
+				</div>
 			</div>
 			<h4 className="w-1/2 py-4 text-l">{user.name}</h4>
 		</div>

Components/Users/FriendProfilesCheckOnline.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import io from 'socket.io-client';
+import { getCookie } from '../Login/Cookie';
+import Link from 'next/link';
+import { FriendProfile } from './FriendProfiles';
+import { User } from '@/types';
+import { UserHasOnline } from '@/app/users/users.type';
+
+export const FriendProfilesCheckOnline = ({
+	allUsersExceptMe,
+}: {
+	allUsersExceptMe: User[] | undefined;
+}) => {
+	const [userNameConnected, setUserNameConnected] = useState<string[]>([]);
+	const accessToken = getCookie('accessToken');
+
+	const users: UserHasOnline[] =
+		allUsersExceptMe?.map((user) => {
+			return { ...user, isOnline: userNameConnected.includes(user.id) };
+		}) || [];
+
+	useEffect(() => {
+		const socket = io(`https://fastcampus-chat.net/server`, {
+			extraHeaders: {
+				Authorization: `Bearer ${accessToken}`,
+				serverId: process.env.NEXT_PUBLIC_SERVER_ID as string,
+			},
+		});
+		const socketInitializer = async () => {
+			socket.on('connect', () => {
+				console.log('connected', socket);
+				socket.emit('users-server');
+			});
+
+			socket.on('users-server-to-client', (obj) => {
+				setUserNameConnected(obj.users);
+				console.log('users-server-to-client', obj);
+			});
+		};
+
+		socketInitializer();
+
+		return () => {
+			console.log('disconnect user');
+			socket.disconnect();
+		};
+	}, [accessToken]);
+
+	return (
+		<div>
+			{users?.map((user) => {
+				return (
+					<li key={user.id} className="list-none cursor-pointer">
+						<Link
+							href={{
+								pathname: `/profile/${user.id}`,
+								query: { isMyProfile: false },
+							}}
+						>
+							<FriendProfile user={user} />
+						</Link>
+					</li>
+				);
+			})}
+		</div>
+	);
+};
+
+export default FriendProfilesCheckOnline;

Components/Users/MyProfile.tsx

@@ -4,9 +4,10 @@ import Image from 'next/image';
 import React from 'react';
 import { User } from '@/types';
 import Link from 'next/link';
+import { convertPictureURL } from '@/hooks/Common/users';
 
 const MyProfile = ({ user }: { user: User }) => {
-	const picture = user.picture || '/icon_cat.svg';
+	const picture = convertPictureURL(user.picture);
 
 	return (
 		<div className="mt-3">
@@ -17,13 +18,19 @@ const MyProfile = ({ user }: { user: User }) => {
 				}}
 			>
 				<div className="flex w-full align-center mb-4">
-					<div className="user-component__column">
+					<div className="relative w-16 h-16 mr-5">
 						<Image
-							width={70}
-							height={70}
+							fill={true}
 							alt={user.name}
 							src={picture}
-							className="rounded-3xl mr-5"
+							className="rounded-3xl"
+							style={{
+								position: 'absolute',
+								top: 0,
+								left: 0,
+								objectFit: 'cover',
+								margin: 'auto',
+							}}
 						/>
 					</div>
 

Components/Users/ProfileModal.tsx

@@ -9,6 +9,7 @@ import Image from 'next/image';
 import { useSearchParams, useRouter } from 'next/navigation';
 import React from 'react';
 import { getCookie } from '../Login/Cookie';
+import { convertPictureURL } from '@/hooks/Common/users';
 
 const ProfileModal = ({
 	user,
@@ -20,7 +21,7 @@ const ProfileModal = ({
 	const accessToken = getCookie('accessToken');
 	const router = useRouter();
 	const searchParams = useSearchParams();
-	const isMyProfile = searchParams.get('isMyProfile') === 'true';
+	const isMyProfile = searchParams?.get('isMyProfile') === 'true';
 
 	const chattingParticipateHandler = async () => {
 		if (existPrivateChat) {
@@ -55,13 +56,21 @@ const ProfileModal = ({
 				<div></div>
 
 				<div className="flex flex-col w-full items-center gap-5 pb-20">
-					<Image
-						className="rounded-full"
-						src={user.picture}
-						alt={user.name}
-						height={150}
-						width={150}
-					/>
+					<div className="relative w-28 h-28">
+						<Image
+							fill={true}
+							alt={user.name}
+							src={convertPictureURL(user.picture)}
+							className="rounded-full border-black"
+							style={{
+								position: 'absolute',
+								top: 0,
+								left: 0,
+								objectFit: 'cover',
+								margin: 'auto',
+							}}
+						/>
+					</div>
 					<h3 className="text-2xl text-white">{user.name}</h3>
 					<div className="w-full border-t-2 h-1 border-white "></div>
 					<div className="flex items-center">

Components/Users/ShowSearchedFriend.tsx

@@ -1,3 +1,4 @@
+import { convertPictureURL } from '@/hooks/Common/users';
 import { User } from '@/types';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -15,10 +16,7 @@ const ShowSearchedFriend = ({
 	return (
 		<div className="grid grid-cols-5">
 			{searchedUserUpToFour?.map((user) => {
-				const picture =
-					user.picture.trim().split('.')[0] === 'https://avatars'
-						? user.picture
-						: '/icon_cat.svg';
+				const picture = convertPictureURL(user.picture);
 				return (
 					<div key={user.id + `search`} className="flex flex-col items-center ">
 						<Link

app/users/page.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { fetchAllUsers, fetchMyUser } from './users.utils';
-import FriendProfile from '@/Components/Users/FriendProfiles';
 import MyProfile from '@/Components/Users/MyProfile';
 import Header from '@/Components/Common/Header';
 import { User } from '@/types';
 import { cookies } from 'next/headers';
 import Footer from '@/Components/Common/Footer';
+import FriendProfilesCheckOnline from '@/Components/Users/FriendProfilesCheckOnline';
 
 const Users = async () => {
 	const cookieStore = cookies();
@@ -23,7 +23,7 @@ const Users = async () => {
 					친구{allUsersExceptMe?.length}명
 				</h4>
 			</div>
-			<FriendProfile allUsers={allUsersExceptMe} />
+			<FriendProfilesCheckOnline allUsersExceptMe={allUsersExceptMe} />
 			<Footer />
 		</section>
 	);

app/users/users.type.ts

@@ -0,0 +1,5 @@
+import { User } from '@/types';
+
+export type UserHasOnline = User & {
+	isOnline: boolean;
+};

hooks/Common/users.ts

@@ -0,0 +1,12 @@
+export const convertPictureURL = (url: string) => {
+	const splitByDot = url.split('.com');
+	if (
+		splitByDot.length > 1 &&
+		(splitByDot[0] === 'http://res.cloudinary' ||
+			splitByDot[0] === 'https://gravatar' ||
+			splitByDot[0] === 'https://avatars.githubusercontent')
+	) {
+		return url;
+	}
+	return '/icon_cat.svg';
+};