From 274ec473236fa54a169ce92959e1443981e06521 Mon Sep 17 00:00:00 2001
From: 1g2g <87280835+1g2g@users.noreply.github.com>
Date: Thu, 23 Nov 2023 14:21:25 +0900
Subject: [PATCH] =?UTF-8?q?UTC=20=ED=83=80=EC=9E=84=20=EB=B3=80=ED=99=98?=
=?UTF-8?q?=20=ED=95=A8=EC=88=98=20=EC=9E=91=EC=84=B1=20=EB=B0=8F=20?=
=?UTF-8?q?=EC=B1=84=ED=8C=85=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20?=
=?UTF-8?q?=EC=A0=81=EC=9A=A9=20(#295)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* feat: UTC 기준 시간을 한국 시간으로 변환하는 함수 작성
* feat: 채팅 목록 페이지 한국 시간대 적용
* chore: createdAt 타입 변경
* fix: 변경된 type 적용
* feat: 채팅방 페이지 한국 시간대 적용
---
src/pages/ChatRoomListPage/ChatRoomItem.tsx | 7 ++++--
src/pages/ChattingPage/Chat.tsx | 9 +++++--
src/type/models/ChatMessage.ts | 2 +-
src/type/models/ChatRoom.ts | 4 +--
src/utils/convertUTCToKoreanTime.ts | 16 ++++++++++++
src/utils/getTimeStamp.ts | 28 ---------------------
6 files changed, 31 insertions(+), 35 deletions(-)
create mode 100644 src/utils/convertUTCToKoreanTime.ts
delete mode 100644 src/utils/getTimeStamp.ts
diff --git a/src/pages/ChatRoomListPage/ChatRoomItem.tsx b/src/pages/ChatRoomListPage/ChatRoomItem.tsx
index 60fa3fbc..202ac3fc 100644
--- a/src/pages/ChatRoomListPage/ChatRoomItem.tsx
+++ b/src/pages/ChatRoomListPage/ChatRoomItem.tsx
@@ -5,7 +5,8 @@ import { theme } from '@styles/theme';
import { ChatRoom } from '@type/models/ChatRoom.ts';
-import { getTimeStamp } from '@utils/getTimeStamp.ts';
+import { convertUTCToKoreanTime } from '@utils/convertUTCToKoreanTime.ts';
+import { createdAtToString } from '@utils/createdAtToString.ts';
import {
ChatItemAvatar,
@@ -48,6 +49,8 @@ export const ChatRoomItem = ({
roomIconImageUrl,
} = chatRoomItem;
+ const lastTime = convertUTCToKoreanTime(lastMessageCreatedAt);
+
return (
@@ -73,7 +76,7 @@ export const ChatRoomItem = ({
- {getTimeStamp(lastMessageCreatedAt)}
+ {createdAtToString(new Date(lastTime))}
);
diff --git a/src/pages/ChattingPage/Chat.tsx b/src/pages/ChattingPage/Chat.tsx
index f2063d99..603e05d1 100644
--- a/src/pages/ChattingPage/Chat.tsx
+++ b/src/pages/ChattingPage/Chat.tsx
@@ -6,6 +6,8 @@ import { theme } from '@styles/theme';
import { ChatMessage } from '@type/models/ChatMessage';
+import { convertUTCToKoreanTime } from '@utils/convertUTCToKoreanTime';
+
import {
BalloonContainer,
BalloonInfo,
@@ -26,7 +28,10 @@ export const Chat = ({
const { type: chatType, createdAt, sender, content } = chatInfo;
return chatType === '대화' ? (
-
+
{isOthersMessage && (
- {createdAt.slice(11, 16)}
+ {String(convertUTCToKoreanTime(createdAt)).slice(11, 16)}
diff --git a/src/type/models/ChatMessage.ts b/src/type/models/ChatMessage.ts
index 64b0e0cc..daff9a38 100644
--- a/src/type/models/ChatMessage.ts
+++ b/src/type/models/ChatMessage.ts
@@ -5,5 +5,5 @@ export type ChatMessage = {
content: string;
sender: ChatMember;
roomId: number;
- createdAt: string;
+ createdAt: Date;
};
diff --git a/src/type/models/ChatRoom.ts b/src/type/models/ChatRoom.ts
index 3072a555..31f9a82d 100644
--- a/src/type/models/ChatRoom.ts
+++ b/src/type/models/ChatRoom.ts
@@ -10,8 +10,8 @@ export type ChatRoom = {
playStartTime: string | null;
playTimeMinutes: number | null;
lastMessageContent: string;
- lastMessageCreatedAt: string;
- createdAt: string;
+ lastMessageCreatedAt: Date;
+ createdAt: Date;
};
export type ChatRoomDetail = Omit<
diff --git a/src/utils/convertUTCToKoreanTime.ts b/src/utils/convertUTCToKoreanTime.ts
new file mode 100644
index 00000000..b7cc5a5a
--- /dev/null
+++ b/src/utils/convertUTCToKoreanTime.ts
@@ -0,0 +1,16 @@
+export const convertUTCToKoreanTime = (utcTime: string | Date) => {
+ const utcDate = new Date(utcTime);
+ const offset = utcDate.getTimezoneOffset();
+ const koreanDate = new Date(utcDate.getTime() - offset * 60 * 1000);
+
+ const formattedTime = `${koreanDate.getFullYear()}-${String(
+ koreanDate.getMonth() + 1
+ ).padStart(2, '0')}-${String(koreanDate.getDate()).padStart(2, '0')}T${String(
+ koreanDate.getHours()
+ ).padStart(2, '0')}:${String(koreanDate.getMinutes()).padStart(
+ 2,
+ '0'
+ )}:${String(koreanDate.getSeconds()).padStart(2, '0')}`;
+
+ return formattedTime;
+};
diff --git a/src/utils/getTimeStamp.ts b/src/utils/getTimeStamp.ts
deleted file mode 100644
index 98cff502..00000000
--- a/src/utils/getTimeStamp.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const getTimeStamp = (timeStamp: string) => {
- const currentDate = new Date();
- const messageDate = new Date(timeStamp);
-
- const timeDifference = currentDate.getTime() - messageDate.getTime();
-
- const minutesDifference = Math.floor(timeDifference / (1000 * 60));
- const hoursDifference = Math.floor(timeDifference / (1000 * 60 * 60));
- const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
-
- const year = messageDate.getFullYear();
- const month = messageDate.getMonth() + 1;
- const day = messageDate.getDate();
-
- if (minutesDifference < 60) {
- return `${minutesDifference}분 전`;
- }
-
- if (hoursDifference < 24) {
- return `${hoursDifference}시간 전`;
- }
-
- if (daysDifference < 30) {
- return `${daysDifference}일 전`;
- }
-
- return `${year}년 ${month}월 ${day}일`;
-};