Merge pull request #116 from 5wonju/hotfix/chatui

Design #110: 게임 채팅 화면 투명하게
5wonju · May 20, 2024 · ded969b · ded969b
2 parents 2b0e336 + b0f50a9
commit ded969b
Show file tree

Hide file tree

Showing 6 changed files with 134 additions and 135 deletions.
diff --git a/frontend/app/(page)/(needProtection)/game/component/gameInfoPanel/GameChat.tsx b/frontend/app/(page)/(needProtection)/game/component/gameInfoPanel/GameChat.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 const GameChat = () => {
   return (
     <section className="h-1/3 w-1/3 absolute bottom-0 left-0 rounded overflow-hidden glass">
-      <Chat />
+      <Chat type='game'/>
     </section>
   )
 }

diff --git a/frontend/app/(page)/(needProtection)/lobby/page.tsx b/frontend/app/(page)/(needProtection)/lobby/page.tsx
@@ -22,7 +22,7 @@ const Lobby = () => {
           <UserInfo />
         </section>
         <section className="col-span-2 relative rounded overflow-hidden bg-black">
-          <Chat />
+          <Chat type='lobby'/>
         </section>
       </div>
     </main>

diff --git a/frontend/app/(page)/(needProtection)/login/page.tsx b/frontend/app/(page)/(needProtection)/login/page.tsx
@@ -8,6 +8,7 @@ import { fetchState } from './lib/api'
 import { useAuth } from '@/app/hooks/useAuth'
 import Image from 'next/image'
 
+// const GOOGLE_AUTH_URL = 'https://mo-or-do.net/users/oauth/kakao/distribution-to-distribution'
 const GOOGLE_AUTH_URL = 'https://kauth.kakao.com/oauth/authorize'
 const CLIENT_ID = process.env.NEXT_PUBLIC_CLIENT_ID
 const RESPONSE_TYPE = 'code'

diff --git a/frontend/app/component/Chat/Chat.tsx b/frontend/app/component/Chat/Chat.tsx
@@ -4,14 +4,14 @@ import ChatLog from './ChatLog'
 import SendChat from './SendChat'
 import { useRef } from 'react'
 
-const Chat = () => {
+const Chat = ({type}: {type: 'game' | 'lobby'}) => {
   const chatEndRef = useRef(null)
 
   return (
     <>
-      <div className="bg-[#000000] opacity-80 absolute top-0 left-0 w-full h-full"></div>
+      <div className={`${type === 'game' ? 'glass' : 'bg-[#000000]'} opacity-80 absolute top-0 left-0 w-full h-full`}></div>
       <div className="absolute top-0 left-0 w-full h-full z-10 flex flex-col justify-end gap-2">
-        <ChatLog chatEndRef={chatEndRef} />
+        <ChatLog chatEndRef={chatEndRef} type={type}/>
         <SendChat />
       </div>
     </>

diff --git a/frontend/app/component/Chat/ChatLog.tsx b/frontend/app/component/Chat/ChatLog.tsx
@@ -16,21 +16,26 @@ const formatChatTimestamp = (isoString: string): string => {
 
 interface ChatLogProps {
   chatEndRef: React.RefObject<HTMLDivElement>
+  type: 'game' | 'lobby'
 }
 
-const ChatLog = ({ chatEndRef }: ChatLogProps) => {
+const ChatLog = ({ chatEndRef, type }: ChatLogProps) => {
   const { chatLogs } = useChat()
 
   useEffect(() => {
     chatEndRef.current?.scrollIntoView({ behavior: 'smooth' })
   }, [chatLogs])
 
   return (
-    <ul className="max-w-full z-10 text-white px-2 overflow-y-scroll">
+    <ul
+      className={`max-w-full z-10 ${
+        type === 'game' ? 'text-black' : 'text-white'
+      } px-2 overflow-y-scroll`}
+    >
       {chatLogs.map((log, index) => (
         <li
           key={index}
-          className="flex gap-4 text-white animate-slide-in"
+          className={`flex gap-4 ${type === 'game' ? 'text-black' : 'text-white'} animate-slide-in`}
           style={{ animationDelay: `${index * 0.1}s` }}
         >
           <span className="shrink-0">{log.nickname} : </span>