Feat : 채팅방 디자인

Components/Common/Footer.tsx

@@ -23,7 +23,7 @@ const Footer = () => {
 	};
 
 	return (
-		<div className="w-full sm:w-[425px] md:w-[645px] 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 fixed inset-x-0 bottom-0">
 			<Tooltip
 				content="유저들 👋"
 				animate={{

Components/Common/Header.tsx

@@ -12,7 +12,7 @@ const Header = () => {
 	else if (pathname === '/private') headerInfo = privates;
 
 	return (
-		<header className="flex w-full justify-between align-center py-3 ">
+		<header className="flex w-full justify-between align-center py-3 bg-bglight">
 			<strong className="text-3xl">{headerInfo.Heading}</strong>
 			<headerInfo.HeaderUl />
 		</header>
@@ -55,7 +55,7 @@ const OpenUl = () => {
 
 const friends = {
 	HeaderUl: UsersUl,
-	Heading: '집사들',
+	Heading: '냥집사',
 };
 
 const privates = {

Components/Join/JoinForm.tsx

@@ -12,6 +12,9 @@ import axios from 'axios';
 import { useMutation } from '@tanstack/react-query';
 import useAsyncLoading from '@/hooks/Open/useAsyncLoading';
 import { FetchImageProps, RequestBody } from './Join.types';
+import icon_arrow_left from '@/public/icon_arrow_left.svg';
+import Image from 'next/image';
+import Link from 'next/link';
 // import Image from 'next/image';
 
 const fetchImage = async (params: FetchImageProps) => {
@@ -101,7 +104,7 @@ const JoinForm = () => {
 
 	return (
 		// 전체
-		<div className="w-full h-full flex flex-col items-center justify-center">
+		<div className="w-full h-full flex flex-col items-center justify-center relative">
 			{/* 이미지 & 입력폼 & 회원가입 버튼 */}
 			<div className="flex flex-col w-full h-full items-center justify-center ">
 				{/* 이미지 */}
@@ -189,14 +192,17 @@ const JoinForm = () => {
 					>
 						회원가입
 					</Button>
-					<Button
-						className="bg-pink-200 w-full mt-3"
-						onClick={() => router.push('/login')}
-					>
-						로그인
-					</Button>
 				</form>
 			</div>
+			<Link href="/login" passHref>
+				<Image
+					src={icon_arrow_left}
+					width={50}
+					height={50}
+					alt="뒤로가기"
+					className="absolute top-3 left-3 w-5"
+				/>
+			</Link>
 		</div>
 	);
 };

Components/Login/LoginForm.tsx

@@ -92,7 +92,9 @@ const LoginForm = () => {
 					로그인
 				</Button>
 				<Link href="/join" passHref>
-					<div className="text-md text-black mt-3">새로운 집사 되기!</div>
+					<div className="text-md text-black mt-3 transition-colors duration-300 ease-linear hover:text-white">
+						새로운 집사 되기!
+					</div>
 				</Link>
 			</form>
 			<Typography variant="h3" className="absolute bottom-8">

Components/Open/ChatDivder/ChatDivider.tsx

@@ -5,6 +5,8 @@ import { ChatListProps } from '../ChatList/ChatList.type';
 import { getCookie } from '@/Components/Login/Cookie';
 import { useQuery } from '@tanstack/react-query';
 import { fetchAllChat, filterChat } from '@/app/private/chatting.utils';
+import icon_dot_chat from '@/public/icon_dot_chat.svg';
+import icon_dot_multi_chat from '@/public/icon_dot_multi_chat.svg';
 import ChatList from '../ChatList/ChatList';
 import {
 	Tab,
@@ -13,16 +15,19 @@ import {
 	TabsBody,
 	TabsHeader,
 } from '@material-tailwind/react';
+import Image from 'next/image';
 
 const ChatDivder = ({ myChatList }: ChatListProps) => {
 	const data = [
 		{
 			label: '개인 채팅방',
 			value: 'personal',
+			svg: icon_dot_chat,
 		},
 		{
 			label: '단체 채팅방',
 			value: 'multi',
+			svg: icon_dot_multi_chat,
 		},
 	];
 
@@ -38,14 +43,32 @@ const ChatDivder = ({ myChatList }: ChatListProps) => {
 	const { PersonalChat, MultiChat } = filterChat(chatList.chats);
 	return (
 		<>
-			<Tabs value="personal" className="overflow-y-scroll">
-				<TabsHeader>
-					{data.map((item) => (
-						<Tab key={item.value} value={item.value}>
-							{item.label}
-						</Tab>
-					))}
-				</TabsHeader>
+			<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>
 				<TabsBody className="h-full">
 					<TabPanel value="personal" className="min-h-[calc(80vh)]">
 						{PersonalChat.length ? (

Components/Open/ChatDivder/ChatDividerOpen.tsx

@@ -5,6 +5,7 @@ import { ChatListProps } from '../ChatList/ChatList.type';
 import { getCookie } from '@/Components/Login/Cookie';
 import { useQuery } from '@tanstack/react-query';
 import { fetchAllChat, filterChat } from '@/app/private/chatting.utils';
+import icon_people from '@/public/OpenPeopleSvg.svg';
 import ChatList from '../ChatList/ChatList';
 import {
 	Tab,
@@ -13,6 +14,7 @@ import {
 	TabsBody,
 	TabsHeader,
 } from '@material-tailwind/react';
+import Image from 'next/image';
 
 const OpenChatDivider = ({ myChatList }: ChatListProps) => {
 	const data = [
@@ -34,14 +36,32 @@ const OpenChatDivider = ({ myChatList }: ChatListProps) => {
 	const { PublicChat } = filterChat(chatList.chats);
 	return (
 		<>
-			<Tabs value="open" className="overflow-y-scroll">
-				<TabsHeader>
-					{data.map((item) => (
-						<Tab key={item.value} value={item.value}>
-							{item.label}
-						</Tab>
-					))}
-				</TabsHeader>
+			<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 ? (

Components/Open/ChatList/ChatItem/ChatItem.tsx

@@ -1,15 +1,15 @@
 'use client';
 
-import { Avatar, Typography } from '@material-tailwind/react';
+import { Typography } from '@material-tailwind/react';
 import Image from 'next/image';
-import OpenPeopleSvg from '@/public/OpenPeopleSvg.svg';
+import icon_people from '@/public/icon_people.svg';
 import { ChatItemProps } from '../ChatList.type';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { koreanTime } from '@/utils/changeKoreanTime';
+import OpenChatPicture from '@/Components/Search/OpenChatPicture';
 
 const ChatItem = ({ chat }: ChatItemProps) => {
-	const firstUserImage = chat.users[0].picture;
 	const pathName = usePathname();
 
 	const checkIsPrivate = () => {
@@ -27,45 +27,53 @@ const ChatItem = ({ chat }: ChatItemProps) => {
 				query: { isPrivate: checkIsPrivate() },
 			}}
 		>
-			<div className="w-fulls border-4 border-primary hover:bg-gray-300 cursor-pointer rounded-xl ease-in transition-all duration-300 p-5">
-				<div className="flex gap-5 h-full">
-					<Avatar
-						src={firstUserImage}
-						alt="candice"
-						width={5}
-						height={5}
-						className="rounded-full w-8 h-8"
-					/>
-					<div>
-						<Typography
-							variant="h6"
-							color="blue-gray"
-							className="whitespace-normal"
-						>
-							{chat.name}
-						</Typography>
-						<Typography
-							variant="small"
-							color="gray"
-							className="font-normal flex gap-1 items-center"
+			<div className="w-full hover:bg-gray-300 cursor-pointer rounded-xl ease-in transition-all duration-300 p-1 ">
+				<div className="flex gap-5 h-full items-center">
+					<div className="w-fit h-fit rounded-lg shadow-md">
+						<OpenChatPicture openChatUsers={chat.users} />
+					</div>
+					<div
+						id="wrapper"
+						className="flex flex-col w-full py-3 justify-between"
+					>
+						<div
+							id="top"
+							className="flex flex-row justify-between items-center w-full"
 						>
-							<Image
-								src={OpenPeopleSvg}
-								alt="candice"
-								width={10}
-								height={10}
-								className="rounded-full w-4 h-4 object-cover"
-							/>
-							{`${chat.users.length}명 참여중`}
-						</Typography>
-						<Typography variant="small" color="gray" className="font-normal">
+							<div className="flex flex-row">
+								<Typography
+									variant="h6"
+									className="whitespace-normal text-chat mr-2"
+								>
+									{chat.name}
+								</Typography>
+								<Typography
+									color="gray"
+									className=" flex gap-1 items-center text-xs font-thin"
+								>
+									<Image
+										src={icon_people}
+										alt="candice"
+										width={10}
+										height={10}
+										className="rounded-full w-4 h-4 object-contain"
+									/>
+									{`${chat.users.length}명 참여`}
+								</Typography>
+							</div>
+							<Typography
+								variant="small"
+								color="gray"
+								className="font-normal truncate"
+							>
+								{`${koreanTime(chat.updatedAt)}`}
+							</Typography>
+						</div>
+						<Typography variant="h6" className="font-normal text-chat">
 							{chat.latestMessage
 								? chat.latestMessage.text
 								: '아직 채팅이 없습니다.'}
 						</Typography>
-						<Typography variant="small" color="gray" className="font-normal">
-							{`${koreanTime(chat.updatedAt)}`}
-						</Typography>
 					</div>
 				</div>
 			</div>

Components/Search/OpenChatPicture.tsx

@@ -1,14 +1,27 @@
 import React from 'react';
 import { User } from '@/app/search/search.type';
-import Image from 'next/image';
 import { convertPictureURL } from '@/hooks/Common/users';
+import { Avatar } from '@material-tailwind/react';
 
 const OpenChatPicture = ({ openChatUsers }: { openChatUsers: User[] }) => {
 	let userCount = 0;
 
+	const checkUserCount = (userLength: number) => {
+		if (userLength === 2) {
+			return '-space-x-1';
+		} else if (userLength === 3) {
+			return '-space-x-3';
+		}
+		return '-space-x-4';
+	};
+
 	return (
 		<>
-			<ol className="relative w-20 h-20 flex justify-center items-center flex-wrap">
+			<div
+				className={`relative w-12 h-12 flex items-center justify-center box-border -space-x-4 ${checkUserCount(
+					openChatUsers.length,
+				)}`}
+			>
 				{openChatUsers.map((user) => {
 					userCount++;
 
@@ -19,24 +32,16 @@ const OpenChatPicture = ({ openChatUsers }: { openChatUsers: User[] }) => {
 					const picture = convertPictureURL(user.picture);
 
 					return (
-						<li key={user.id} className="relative w-10 h-10 -m-1">
-							<Image
-								fill={true}
-								src={picture}
-								alt="user picture"
-								className="rounded"
-								style={{
-									position: 'absolute',
-									top: 0,
-									left: 0,
-									objectFit: 'cover',
-									margin: 'auto',
-								}}
-							/>
-						</li>
+						<Avatar
+							key={user.id}
+							src={picture}
+							variant="circular"
+							alt="user picture"
+							className="border-[1.5px] border-secondary hover:z-10 focus:z-10 w-1/2 h-1/2 object-cover"
+						/>
 					);
 				})}
-			</ol>
+			</div>
 		</>
 	);
 };

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] md:w-[645px] px-5 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-orange-300">
 			{children}
 		</section>
 	);

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-fill">
 			<JoinForm></JoinForm>
 		</div>
 	);