Feat : Private, Public 채팅방 정렬 순서 변경

Components/Open/ChatList/ChatItem/ChatItem.tsx

@@ -6,6 +6,7 @@ import OpenPeopleSvg from '@/public/OpenPeopleSvg.svg';
 import { ChatItemProps } from '../ChatList.type';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import { koreanTime } from '@/utils/changeKoreanTime';
 
 const ChatItem = ({ chat }: ChatItemProps) => {
 	const firstUserImage = chat.users[0].picture;
@@ -58,12 +59,12 @@ const ChatItem = ({ chat }: ChatItemProps) => {
 							{`${chat.users.length}명 참여중`}
 						</Typography>
 						<Typography variant="small" color="gray" className="font-normal">
-							{chat.messages
-								? chat.messages[chat.messages.length]?.text
+							{chat.latestMessage
+								? chat.latestMessage.text
 								: '아직 채팅이 없습니다.'}
 						</Typography>
 						<Typography variant="small" color="gray" className="font-normal">
-							{`${chat.updatedAt}`}
+							{`${koreanTime(chat.updatedAt)}`}
 						</Typography>
 					</div>
 				</div>

app/private/chatting.type.ts

@@ -20,6 +20,7 @@ export type Chat = {
 	users: User[];
 	messages: Message[]; // message 객체가 속합니다.
 	updatedAt: Date;
+	latestMessage?: Message;
 	indexId?: number;
 };
 

app/private/chatting.utils.ts

@@ -15,6 +15,13 @@ export const fetchAllChat = async (token: string) => {
 };
 
 export const filterChat = (chatList: Chat[]) => {
+	// Date기준으로 정렬
+	chatList.sort((oldest: Chat, latest: Chat) => {
+		if (oldest.updatedAt > latest.updatedAt) return -1;
+		if (oldest.updatedAt < latest.updatedAt) return 1;
+		return 0;
+	});
+
 	const PersonalChat = chatList.filter(
 		(chat: Chat) => chat.isPrivate === true && chat.users.length === 2,
 	);

package.json

@@ -20,6 +20,7 @@
     "axios": "^1.6.0",
     "bcryptjs": "^2.4.3",
     "cloudinary": "^1.41.0",
+    "moment-timezone": "^0.5.43",
     "next": "14.0.1",
     "react": "^18",
     "react-cookie": "^6.1.1",

tailwind.config.ts

@@ -18,6 +18,9 @@ const config: Config = withMT({
 		},
 		backgroundSize: {
 			'50%': '50%',
+			contain: 'contain',
+			cover: 'cover',
+			fill: 'fill',
 		},
 		extend: {
 			colors: {

utils/changeKoreanTime.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import moment from 'moment-timezone';
+
+export const koreanTime = (dateString: Date) => {
+	return moment(dateString).tz('Asia/Seoul').format('YYYY-MM-DD HH:mm:ss');
+};