Merge remote-tracking branch 'origin/dev' into FE,BE/feature/#29-AI-채…

…팅-socket-이벤트-작성

frontend/src/components/Background/Background.tsx

@@ -0,0 +1,24 @@
+interface BackgroundProps {
+  children?: React.ReactNode;
+  type?: "default" | "static" | "dynamic";
+}
+
+function Background({children, type = 'default'}:BackgroundProps ) {
+  return( 
+  <div className="w-screen h-screen flex flex-col justify-center items-center gap-80">
+    <img
+      className="absolute w-full h-full object-cover -z-10"
+      src="/bg.png"
+      alt="밤 하늘의 배경 이미지"
+    />
+    <img
+      className="w-285 h-285 animate-shining"
+      src="/moon.png"
+      alt="빛나는 마법의 소라 고둥"
+    />
+    {type != "default" && <div className={`absolute w-full h-full bg-black/75 ${type == "dynamic" && "animate-fadeIn"}`} />}
+    {children}
+  </div>)
+};
+
+export default Background;

frontend/src/components/Background/index.ts

@@ -0,0 +1 @@
+export { default } from './Background';

frontend/src/pages/AIChatPage/AIChatPage.tsx

@@ -1,5 +1,5 @@
 import { Icon } from '@iconify/react';
-
+import Background from '@components/Background';
 import ChatInput from '@components/ChatInput';
 import ChatList from '@components/ChatList/ChatList';
 import CustomButton from '@components/CustomButton';
@@ -11,18 +11,7 @@ interface AIChatPageProps {}
 
 const AIChatPage = ({}: AIChatPageProps) => {
   return (
-    <div className="w-screen h-screen flex flex-col justify-center items-center gap-80">
-      <img
-        className="absolute w-full h-full object-cover -z-10"
-        src="/bg.png"
-        alt="밤 하늘의 배경 이미지"
-      />
-      <img
-        className="w-285 h-285 animate-shining relative bottom-130"
-        src="/moon.png"
-        alt="빛나는 마법의 소라 고둥"
-      />
-      <div className="absolute w-full h-full bg-black/75 animate-fadeIn" />
+    <Background type="dynamic">
       <Header
         rightItems={[
           <CustomButton
@@ -62,7 +51,7 @@ const AIChatPage = ({}: AIChatPageProps) => {
           sendMessage(message);
         }}
       />
-    </div>
+    </Background>
   );
 };
 

frontend/src/pages/HomePage/HomePage.tsx

@@ -1,8 +1,10 @@
-import { connect, setMessageEventListener } from '@business/services/socket';
 import { useNavigate } from 'react-router-dom';
 
+import Background from '@components/Background';
 import CustomButton from '@components/CustomButton';
 
+import { connect, setMessageEventListener } from '@business/services/socket';
+
 const HomePage = () => {
   const navigate = useNavigate();
 
@@ -19,17 +21,7 @@ const HomePage = () => {
   };
 
   return (
-    <div className="w-screen h-screen flex flex-col justify-center items-center gap-80">
-      <img
-        className="absolute w-full h-full object-cover -z-10"
-        src="/bg.png"
-        alt="밤 하늘의 배경 이미지"
-      />
-      <img
-        className="w-285 h-285 animate-shining"
-        src="/moon.png"
-        alt="빛나는 마법의 소라 고둥"
-      />
+    <Background>
       <div className="flex gap-36 mb-128 z-1">
         <CustomButton handleButtonClicked={moveAiChat}>AI에게 타로보기</CustomButton>
         <CustomButton
@@ -39,7 +31,7 @@ const HomePage = () => {
           채팅방 개설하기
         </CustomButton>
       </div>
-    </div>
+    </Background>
   );
 };
 

frontend/src/pages/HumanChatPage/HumanChatPage.tsx

@@ -1,7 +1,9 @@
+import Background from "@/components/Background";
+
 interface HumanChatPageProps {}
 
 const HumanChatPage = ({}: HumanChatPageProps) => {
-  return <></>;
+  return <Background type="dynamic"></Background>;
 };
 
 export default HumanChatPage;