UTC 타임 변환 함수 작성 및 채팅 페이지에 적용 (#295)

* feat: UTC 기준 시간을 한국 시간으로 변환하는 함수 작성

* feat: 채팅 목록 페이지 한국 시간대 적용

* chore: createdAt 타입 변경

* fix: 변경된 type 적용

* feat: 채팅방 페이지 한국 시간대 적용

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>
   );

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>

src/type/models/ChatMessage.ts

@@ -5,5 +5,5 @@ export type ChatMessage = {
   content: string;
   sender: ChatMember;
   roomId: number;
-  createdAt: string;
+  createdAt: Date;
 };

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<

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;
+};