From 913b8953169fb8a51dcf147cf0da7f80d3b0bea2 Mon Sep 17 00:00:00 2001
From: Yumin Cho <dbals081216@gmail.com>
Date: Wed, 13 Mar 2024 20:32:51 +0900
Subject: [PATCH 1/2] feat: add formatDate

---
 packages/web/src/utils/format.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/web/src/utils/format.ts b/packages/web/src/utils/format.ts
index c41d21c2..0fad4e6b 100644
--- a/packages/web/src/utils/format.ts
+++ b/packages/web/src/utils/format.ts
@@ -12,3 +12,14 @@ export const formatTime = (isoString: string) => {
 
   return `${ampm} ${displayHours}:${displayMinutes}`;
 };
+
+export const formatDate = (isoString: string) => {
+  const time = new Date(isoString);
+
+  const year = time.getFullYear();
+  const month = time.getMonth() + 1;
+  const date = time.getDate();
+  const day = ["일", "월", "화", "수", "목", "금", "토"][time.getDay()];
+
+  return `${year}년 ${month}월 ${date}일 (${day})`;
+};

From 0ee3b890e346dbfa5c007b1f39dd6a381e9fa11d Mon Sep 17 00:00:00 2001
From: Yumin Cho <dbals081216@gmail.com>
Date: Wed, 20 Mar 2024 20:20:40 +0900
Subject: [PATCH 2/2] feat: add date divider in ChatSection

---
 .../src/components/organisms/ChatSection.tsx  | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/components/organisms/ChatSection.tsx b/packages/web/src/components/organisms/ChatSection.tsx
index 9c82a5c3..27618198 100644
--- a/packages/web/src/components/organisms/ChatSection.tsx
+++ b/packages/web/src/components/organisms/ChatSection.tsx
@@ -1,13 +1,14 @@
 import React, { useEffect } from "react";
 import styled from "@emotion/styled";
 import { useInView } from "react-intersection-observer";
-
-import { Text } from "@biseo/web/components/atoms";
+import { formatDate } from "@biseo/web/utils/format";
+import { Divider, Text } from "@biseo/web/components/atoms";
 import {
   ChatHeader,
   ChatInput,
   Message,
 } from "@biseo/web/components/molecules";
+import { margin, round, padding, center, text } from "@biseo/web/styles";
 import { useChat } from "@biseo/web/services";
 
 const Container = styled.div`
@@ -36,8 +37,22 @@ export const ChatSection: React.FC = () => {
     <Container>
       <ChatHeader title="스레드" />
       <Message.List ref={scrollRef}>
-        {messages.map(message => (
-          <Message key={message.id} message={message} />
+        {messages.map((message, index) => (
+          <>
+            <Message key={message.id} message={message} />
+            {formatDate(messages[index + 1]?.createdAt) !==
+              formatDate(message.createdAt) && (
+              <div
+                css={[round.xl, padding(8), center, text.body, text.gray500]}
+              >
+                <Divider />
+                <span css={[margin(8), `white-space: nowrap`]}>
+                  {formatDate(message.createdAt)}
+                </span>
+                <Divider />
+              </div>
+            )}
+          </>
         ))}
         {hasMore && (
           <Text ref={ref} variant="body" color="gray400">