From a2f7b65d9f51c44217e1747c76c0652f3cbcda5b Mon Sep 17 00:00:00 2001 From: MinSeobKim Date: Wed, 15 Nov 2023 18:11:10 +0900 Subject: [PATCH 1/2] =?UTF-8?q?Feat=20:=20=EC=B1=84=ED=8C=85=20=EC=9E=88?= =?UTF-8?q?=EC=9D=84=20=EB=95=8C=20=EC=B1=84=ED=8C=85=20=EB=B3=B4=EC=97=AC?= =?UTF-8?q?=EC=A3=BC=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Open/ChatList/ChatItem/ChatItem.tsx | 13 +++++++++--- app/private/chatting.type.ts | 1 + package-lock.json | 20 +++++++++++++++++++ package.json | 1 + tailwind.config.ts | 3 +++ 5 files changed, 35 insertions(+), 3 deletions(-) diff --git a/Components/Open/ChatList/ChatItem/ChatItem.tsx b/Components/Open/ChatList/ChatItem/ChatItem.tsx index 92c270c..c4cbe1b 100644 --- a/Components/Open/ChatList/ChatItem/ChatItem.tsx +++ b/Components/Open/ChatList/ChatItem/ChatItem.tsx @@ -6,11 +6,16 @@ import OpenPeopleSvg from '@/public/OpenPeopleSvg.svg'; import { ChatItemProps } from '../ChatList.type'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; +import moment from 'moment-timezone'; const ChatItem = ({ chat }: ChatItemProps) => { const firstUserImage = chat.users[0].picture; const pathName = usePathname(); + const koreanTime = (dateString: Date) => { + return moment(dateString).tz('Asia/Seoul').format('YYYY-MM-DD HH:mm:ss'); + }; + const checkIsPrivate = () => { if (pathName === '/private') { return true; @@ -18,6 +23,8 @@ const ChatItem = ({ chat }: ChatItemProps) => { return false; }; + console.log(chat); + return ( { {`${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/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: { From cb6546d951ef7111fdd9337b0ecc4e1616a28233 Mon Sep 17 00:00:00 2001 From: MinSeobKim Date: Wed, 15 Nov 2023 18:39:55 +0900 Subject: [PATCH 2/2] =?UTF-8?q?Feat=20:=20utils=EB=A1=9C=20korean=20Time?= =?UTF-8?q?=20=EB=B6=84=EA=B8=B0,=20=EC=98=A4=EB=9E=98=EB=90=9C=20?= =?UTF-8?q?=EC=88=9C=EC=9C=BC=EB=A1=9C=20=EC=A0=95=EB=A0=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Components/Open/ChatList/ChatItem/ChatItem.tsx | 8 +------- app/private/chatting.utils.ts | 7 +++++++ utils/changeKoreanTime.tsx | 7 +++++++ 3 files changed, 15 insertions(+), 7 deletions(-) create mode 100644 utils/changeKoreanTime.tsx diff --git a/Components/Open/ChatList/ChatItem/ChatItem.tsx b/Components/Open/ChatList/ChatItem/ChatItem.tsx index c4cbe1b..ab0fb22 100644 --- a/Components/Open/ChatList/ChatItem/ChatItem.tsx +++ b/Components/Open/ChatList/ChatItem/ChatItem.tsx @@ -6,16 +6,12 @@ import OpenPeopleSvg from '@/public/OpenPeopleSvg.svg'; import { ChatItemProps } from '../ChatList.type'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; -import moment from 'moment-timezone'; +import { koreanTime } from '@/utils/changeKoreanTime'; const ChatItem = ({ chat }: ChatItemProps) => { const firstUserImage = chat.users[0].picture; const pathName = usePathname(); - const koreanTime = (dateString: Date) => { - return moment(dateString).tz('Asia/Seoul').format('YYYY-MM-DD HH:mm:ss'); - }; - const checkIsPrivate = () => { if (pathName === '/private') { return true; @@ -23,8 +19,6 @@ const ChatItem = ({ chat }: ChatItemProps) => { return false; }; - console.log(chat); - return ( { }; 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/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'); +};