From d7b5e8303e865cb62ff5f72f05fcc54267aed29d Mon Sep 17 00:00:00 2001
From: Seheon Yu <seheon@seoultech.ac.kr>
Date: Fri, 21 Jun 2024 10:49:25 +0900
Subject: [PATCH 1/2] refactor: Update useChat hooks to handle notice messages

---
 src/hooks/use-chat.ts | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/hooks/use-chat.ts b/src/hooks/use-chat.ts
index 4282ecd5..4d947eda 100644
--- a/src/hooks/use-chat.ts
+++ b/src/hooks/use-chat.ts
@@ -33,12 +33,13 @@ export function useChatSubscription(id: Chat['id']) {
 interface ChatMessagesResponse {
   pageResult: {
     values: {
-      content?: string;
-      imageUrl?: string;
-      messageId: number;
+      createdAt: string;
       messageType: 'TEXT' | 'IMAGE';
+      messageId: number;
       userId: number;
-      createdAt: string;
+      content?: string;
+      imageUrl?: string;
+      notice?: string;
     }[];
     hasNext: boolean;
   };
@@ -54,12 +55,13 @@ export function useChatMessagesQuery(id: Chat['id']) {
     const json = await fitFetcher<ChatMessagesResponse>(url);
     return {
       messages: json.pageResult.values.map((v) => ({
+        createdAt: v.createdAt,
+        messageType: v.messageType,
         id: v.messageId,
+        userId: v.userId,
         content: v.content,
         imageUrl: v.imageUrl,
-        userId: v.userId,
-        messageType: v.messageType,
-        createdAt: v.createdAt,
+        notice: v.notice,
       })),
       hasNext: json.pageResult.hasNext,
     } as { messages: Message[]; hasNext: boolean };

From f3ea8d42d39197e87d24d9f3297a33069cfc8ad5 Mon Sep 17 00:00:00 2001
From: Seheon Yu <seheon@seoultech.ac.kr>
Date: Fri, 21 Jun 2024 10:49:51 +0900
Subject: [PATCH 2/2] refactor: Update background color notation in
 NoticeBubble component

---
 src/components/molecules/NoticeBubble.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/molecules/NoticeBubble.tsx b/src/components/molecules/NoticeBubble.tsx
index 2d88403b..d4f5cffc 100644
--- a/src/components/molecules/NoticeBubble.tsx
+++ b/src/components/molecules/NoticeBubble.tsx
@@ -22,6 +22,6 @@ const Bubble = styled.div`
   margin: 0 auto;
   padding: 5px 20px;
 
-  background-color: rgb(238 238 238 / 100%);
+  background-color: #eee;
   border-radius: 20px;
 `;