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 (
     <Flex justify="space-between" onClick={onClickChatRoomItem}>
       <Flex gap={8}>
@@ -73,7 +76,7 @@ export const ChatRoomItem = ({
         </MessageContainer>
       </Flex>
       <DateText size={8} color={theme.PALETTE.GRAY_500} nowrap>
-        {getTimeStamp(lastMessageCreatedAt)}
+        {createdAtToString(new Date(lastTime))}
       </DateText>
     </Flex>
   );
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 === '대화' ? (
-    <Flex key={createdAt} direction={isOthersMessage ? 'row' : 'row-reverse'}>
+    <Flex
+      key={String(createdAt)}
+      direction={isOthersMessage ? 'row' : 'row-reverse'}
+    >
       {isOthersMessage && (
         <Avatar
           src={sender.profileImageUrl}
@@ -52,7 +57,7 @@ export const Chat = ({
           {}
         </Text>
         <Text size={10} weight={300}>
-          {createdAt.slice(11, 16)}
+          {String(convertUTCToKoreanTime(createdAt)).slice(11, 16)}
         </Text>
       </BalloonInfo>
     </Flex>
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}일`;
-};