Merge pull request #210 from boostcampwm2023/feat/message-ui-advancement

feat/message-ui-advancement: 메세지 컴포넌트 UI 개선
boostcampwm2023 · Dec 12, 2023 · a6a6e71 · a6a6e71
2 parents 75d6112 + a66d4cd
commit a6a6e71
Show file tree

Hide file tree

Showing 10 changed files with 84 additions and 65 deletions.
diff --git a/client/public/userColors.ts b/client/public/userColors.ts
@@ -0,0 +1,10 @@
+export const userColors = [
+  'text-cyan',
+  'text-purple',
+  'text-green',
+  'text-rose',
+  'text-blue',
+  'text-orange',
+  'text-red',
+  'text-gold',
+];
diff --git a/client/src/components/Lobby/ThemeSettingModal.tsx b/client/src/components/Lobby/ThemeSettingModal.tsx
@@ -7,7 +7,7 @@ import {
 } from 'react-icons/fa6';
 import { RxExit } from 'react-icons/rx';
 import { ProblemType } from '../../types/ProblemType';
-import { getProblemButtonColor } from '../../util/getProblemButtonColor';
+import { getProblemButtonColor } from '../../utils/getProblemButtonColor';
 import Message from '../Room/Message';
 import { MessageInterface, ChatEvent } from '../../types/Message';
 import { useTheme } from '../../hooks/useTheme';

diff --git a/client/src/components/Room/Chat.tsx b/client/src/components/Room/Chat.tsx
@@ -12,7 +12,6 @@ import {
 import { useRoom } from '../../hooks/useRoom';
 import { useEffect } from 'react';
 
-// TODO: userColor -> 서버에서 설정
 export default function Chat() {
   const { user } = useAuthContext();
   const {
@@ -65,7 +64,6 @@ export default function Chat() {
       username: user?.username || 'Anonymous',
       body: inputText,
       chatEvent: ChatEvent.Message,
-      color: 'text-purple', // TODO: 클라에서 랜덤 설정
     };
 
     socket?.emit('chat-message', newChatMessage);
@@ -119,7 +117,7 @@ export default function Chat() {
       <div className="mx-2 flex-1 overflow-y-auto px-2 py-2">
         <ul ref={messagesRef} className="flex flex-col gap-y-1.5">
           {messages.map((message, index) => (
-            <Message key={index} message={message} user={user?.username} />
+            <Message key={index} message={message} />
           ))}
         </ul>
       </div>

diff --git a/client/src/components/Room/Message.tsx b/client/src/components/Room/Message.tsx
@@ -1,111 +1,112 @@
+import { useRoom } from '../../hooks/useRoom';
+import { userColors } from '../../../public/userColors';
+import { hash } from '../../utils/hash';
 import { ChatEvent, MessageInterface } from '../../types/Message';
 import MessageBody from './MessageBody';
 
-// This just needs to be here so that these colors get bundled in the final distribution.
-// The userColor is actually assigned on the server.
-// const colorChoices = [
-//   'text-red-400',
-//   'text-orange-400',
-//   'text-amber-400',
-//   'text-yellow-400',
-//   'text-green-400',
-//   'text-emerald-400',
-//   'text-teal-400',
-//   'text-cyan-400',
-//   'text-sky-400',
-//   'text-blue-400',
-//   'text-indigo-400',
-//   'text-violet-400',
-//   'text-purple-400',
-//   'text-fuchsia-400',
-//   'text-pink-400',
-//   'text-rose-400',
-// ];
+export default function Message({ message }: { message: MessageInterface }) {
+  const { roomCode } = useRoom();
+  const generateRandomColor = (username: string) => {
+    const idx = Math.abs(hash(username + roomCode) % userColors.length);
+    return userColors[idx];
+  };
 
-export default function Message({
-  message,
-  user,
-}: {
-  message: MessageInterface;
-  user: string | undefined;
-}) {
   switch (message.chatEvent) {
+    // 유저의 채팅 메세지
     case ChatEvent.Message:
-      return user === message.username ? (
-        <li className="flex flex-row items-start justify-end gap-x-1">
-          <span>
-            <span className="chat-message text-text_default">
-              <MessageBody message={message.body} />
-            </span>
-          </span>
-        </li>
-      ) : (
-        <li className="flex flex-row items-start gap-x-1">
-          <span className={`${message.color} font-bold`}>
+      return (
+        <li className="flex flex-row items-start gap-x-1 py-1">
+          <span
+            className={`${generateRandomColor(message.username)} font-bold`}>
             {message.username}
           </span>
-          <span>:&nbsp;</span>
+          <span className="text-text_default">:&nbsp;</span>
           <span className="chat-message text-text_default">
             <MessageBody message={message.body} />
           </span>
         </li>
       );
+    // 유저가 방에 들어왔을 때 메세지
+    // 유저가 방에서 나갔을 때 메세지
     case ChatEvent.Join:
     case ChatEvent.Leave:
       return (
-        <li className="bg-lc-fg-message-light flex flex-row items-start gap-x-1 rounded-md px-2 py-1.5 dark:bg-[hsl(0,0%,20%)]">
+        <li className="bg-lc-fg-message-light flex flex-row items-start gap-x-1 rounded-md  py-1">
           <span>
-            <span>
+            <span className="m1-1 font-bold text-accent">system&nbsp;</span>
+            <span className="text-text_default">
+              :&nbsp;
               {`👋`}
               &nbsp;
             </span>
-            <span className={`${message.color} ml-1 font-bold`}>
-              {`${message.username}`}&nbsp;&nbsp;
+            <span
+              className={`${generateRandomColor(
+                message.username,
+              )} ml-1 font-bold`}>
+              {`${message.username}`}
             </span>
-            <span className="chat-message">{`${message.body}`}</span>
+            <span className="chat-message text-text_default">{`${message.body}`}</span>
           </span>
         </li>
       );
+    // 유저가 문제를 제출했을 때 메세지
     case ChatEvent.Submit:
       return (
         <li className="bg-lc-fg-message-light flex flex-row items-start gap-x-1 rounded-md px-2 py-1.5 dark:bg-[hsl(0,0%,20%)]">
           <span>
-            <span>
+            <span className="m1-1 font-bold text-accent">system&nbsp;</span>
+            <span className="text-text_default">
+              :&nbsp
               {`🤞`}
               &nbsp;
             </span>
-            <span className={`${message.color} ml-1 font-bold`}>
-              {`${message.username}`}&nbsp;&nbsp;
+            <span
+              className={`${generateRandomColor(
+                message.username,
+              )} ml-1 font-bold`}>
+              {`${message.username}`}
             </span>
             <span className="chat-message">{`${message.body}`}</span>
           </span>
         </li>
       );
+    // 유저가 문제를 맞췄을 때 메세지
     case ChatEvent.Accepted:
       return (
         <li className="bg-lc-fg-message-light flex flex-row items-start gap-x-1 rounded-md px-2 py-1.5 dark:bg-[hsl(0,0%,20%)]">
           <span>
-            <span>
+            <span className="m1-1 font-bold text-accent">system&nbsp;</span>
+            <span className="text-text_default">
+              :&nbsp;
               {`💯`}
               &nbsp;
             </span>
-            <span className={`${message.color} ml-1 font-bold`}>
-              {`${message.username}`}&nbsp;&nbsp;
+            <span
+              className={`${generateRandomColor(
+                message.username,
+              )} ml-1 font-bold`}>
+              {`${message.username}`}
             </span>
             <span className="chat-message">{`${message.body}`}</span>
           </span>
         </li>
       );
-    case ChatEvent.Complete:
+    // 유저가 문제를 틀렸을 때 메세지
+    case ChatEvent.Wrong:
       return (
         <li className="bg-lc-fg-message-light flex flex-row items-start gap-x-1 rounded-md px-2 py-1.5 dark:bg-[hsl(0,0%,20%)]">
           <span>
-            <span>
-              {`🎉`}
+            <span className="m1-1 font-bold text-accent">system&nbsp;</span>
+            <span className="text-text_default">
+              :&nbsp;
+              {`👎`}
               &nbsp;
             </span>
-            <span className={`${message.color} ml-1 font-bold`}>
-              {`${message.username}`}&nbsp;&nbsp;
+            <span
+              className={`${generateRandomColor(
+                message.username,
+              )} ml-1 font-bold`}>
+              {`${message.username}`}
             </span>
             <span className="chat-message">{`${message.body}`}</span>
           </span>

diff --git a/client/src/components/Room/Problems.tsx b/client/src/components/Room/Problems.tsx
@@ -3,8 +3,8 @@ import { FaPencil } from 'react-icons/fa6';
 
 import RoomSettingModal from './RoomSettingModal/RoomSettingModal';
 import { useTheme } from '../../hooks/useTheme';
-import { getProblemButtonColor } from '../../util/getProblemButtonColor';
-import { goSolveProblem } from '../../util/goSolveProblem';
+import { getProblemButtonColor } from '../../utils/getProblemButtonColor';
+import { goSolveProblem } from '../../utils/goSolveProblem';
 import { useRoom } from '../../hooks/useRoom';
 
 export default function Problems() {

diff --git a/client/src/components/Room/RoomSettingModal/ProblemList.tsx b/client/src/components/Room/RoomSettingModal/ProblemList.tsx
@@ -2,8 +2,8 @@ import { Dispatch, SetStateAction } from 'react';
 
 import { ProblemType } from '../../../types/ProblemType';
 import { FaXmark } from 'react-icons/fa6';
-import { getProblemButtonColor } from '../../../util/getProblemButtonColor';
-import { goSolveProblem } from '../../../util/goSolveProblem';
+import { getProblemButtonColor } from '../../../utils/getProblemButtonColor';
+import { goSolveProblem } from '../../../utils/goSolveProblem';
 
 interface ProblemListProps {
   problemList: ProblemType[];

diff --git a/client/src/types/Message.ts b/client/src/types/Message.ts
@@ -8,7 +8,7 @@ export interface MessageInterface {
   username: string;
   body: string;
   chatEvent: ChatEvent;
-  color: string;
+  color?: string;
 }
 
 export const ChatEvent = {
@@ -17,6 +17,6 @@ export const ChatEvent = {
   Leave: 'Leave',
   Submit: 'Submit',
   Accepted: 'Accepted',
-  Complete: 'Complete',
+  Wrong: 'Wrong',
 } as const;
 type ChatEvent = (typeof ChatEvent)[keyof typeof ChatEvent];
diff --git a/client/src/util/getProblemButtonColor.ts → client/src/utils/getProblemButtonColor.ts b/client/src/util/getProblemButtonColor.ts → client/src/utils/getProblemButtonColor.ts
diff --git a/client/src/util/goSolveProblem.ts → client/src/utils/goSolveProblem.ts b/client/src/util/goSolveProblem.ts → client/src/utils/goSolveProblem.ts
diff --git a/client/src/utils/hash.ts b/client/src/utils/hash.ts
@@ -0,0 +1,10 @@
+export const hash = (str: string) => {
+  let hash = 0;
+  if (str.length === 0) return hash;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return hash;
+};