diff --git a/Components/Open/ChatList/ChatItem/ChatItem.tsx b/Components/Open/ChatList/ChatItem/ChatItem.tsx
index 92c270c..ab0fb22 100644
--- a/Components/Open/ChatList/ChatItem/ChatItem.tsx
+++ b/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}명 참여중`}
- {chat.messages
- ? chat.messages[chat.messages.length]?.text
+ {chat.latestMessage
+ ? chat.latestMessage.text
: '아직 채팅이 없습니다.'}
- {`${chat.updatedAt}`}
+ {`${koreanTime(chat.updatedAt)}`}
diff --git a/app/private/chatting.type.ts b/app/private/chatting.type.ts
index a11859c..9f6b58f 100644
--- a/app/private/chatting.type.ts
+++ b/app/private/chatting.type.ts
@@ -20,6 +20,7 @@ export type Chat = {
users: User[];
messages: Message[]; // message 객체가 속합니다.
updatedAt: Date;
+ latestMessage?: Message;
indexId?: number;
};
diff --git a/app/private/chatting.utils.ts b/app/private/chatting.utils.ts
index 107bd3b..368f1d9 100644
--- a/app/private/chatting.utils.ts
+++ b/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,
);
diff --git a/package-lock.json b/package-lock.json
index 9925f51..e2511ca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,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",
@@ -3710,6 +3711,25 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/moment": {
+ "version": "2.29.4",
+ "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+ "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+ "engines": {
+ "node": "*"
+ }
+ },
+ "node_modules/moment-timezone": {
+ "version": "0.5.43",
+ "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.43.tgz",
+ "integrity": "sha512-72j3aNyuIsDxdF1i7CEgV2FfxM1r6aaqJyLB2vwb33mXYyoyLly+F1zbWqhA3/bVIoJ4szlUoMbUnVdid32NUQ==",
+ "dependencies": {
+ "moment": "^2.29.4"
+ },
+ "engines": {
+ "node": "*"
+ }
+ },
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
diff --git a/package.json b/package.json
index b1192bd..ee5e960 100644
--- a/package.json
+++ b/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",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 26f0a34..11ed32a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -18,6 +18,9 @@ const config: Config = withMT({
},
backgroundSize: {
'50%': '50%',
+ contain: 'contain',
+ cover: 'cover',
+ fill: 'fill',
},
extend: {
colors: {
diff --git a/utils/changeKoreanTime.tsx b/utils/changeKoreanTime.tsx
new file mode 100644
index 0000000..e153cbd
--- /dev/null
+++ b/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');
+};