✨ feat: 모달 추가 기능 및 UI 작업

package.json

@@ -14,6 +14,7 @@
     "@tanstack/react-query": "4",
     "axios": "^1.7.9",
     "jwt-decode": "^4.0.0",
+    "lottie-react": "^2.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.54.2",

src/App.tsx

@@ -1,13 +1,17 @@
 import "@styles/font.css";
 import GlobalStyles from "./styles/GlobalStyle";
+import Loading from "./components/ui/loading/Loading";
 import { RouterProvider } from "react-router-dom";
 import { router } from "./routes/router";
+import { Suspense } from "react";
 
 function App() {
   return (
     <>
       <GlobalStyles />
-      <RouterProvider router={router} />
+      <Suspense fallback={<Loading overlay={true} />}>
+        <RouterProvider router={router} />
+      </Suspense>
     </>
   );
 }

src/components/layout/footer/FooterStyle.ts

@@ -24,6 +24,4 @@ export const StyledFooter = styled.footer<FooterProps>`
   justify-content: center;
   align-items: center;
   color: var(--color-gray-600);
-  position: fixed;
-  bottom: 0;
 `;

src/components/layout/header/Header.tsx

@@ -1,16 +1,11 @@
 import logo from "@assets/images/logo.svg";
 import Button from "@components/ui/button/Button.tsx";
 import { NavLink, useNavigate } from "react-router-dom";
-import { useEffect, useState } from "react";
 import { StyledHeader, NavList, Logo } from "./HeaderStyle.ts";
 
 export default function Header() {
-  const [isLoggedIn, setIsLoggedIn] = useState(false); // 임시 login 상태
   const navigate = useNavigate();
-
-  useEffect(() => {
-    setIsLoggedIn(false);
-  }, []);
+  const accessToken = localStorage.getItem("accessToken");
 
   const onClickMove = () => {
     navigate("./user/signup");
@@ -22,15 +17,15 @@ export default function Header() {
     <>
       <StyledHeader>
         <Logo>
-          <NavLink to="/">
+          <NavLink to="/game">
             <img src={logo} />
           </NavLink>
         </Logo>
         <NavList>
           <li>
             <NavLink to="/rank">랭킹</NavLink>
           </li>
-          {isLoggedIn ? (
+          {accessToken ? (
             <>
               <li>
                 <NavLink to="/user/mypage">마이페이지</NavLink>

src/components/layout/layout/Layout.tsx

@@ -7,22 +7,30 @@ import { Outlet, useLocation } from "react-router-dom";
 import { Wrapper, Container } from "./LayoutStyle";
 import { useModalStore } from "@store/useModalStore";
 
-const HIDDEN_HEADERS = "/game/room/";
+const GAME_ROOM = "/game/room/";
+const HIDDEN_HEADER_FOOTER = "/home";
 
 export default function Layout() {
   const { showModal } = useModalStore();
   const location = useLocation();
   const pathname = location.pathname;
-  const isHiddenHeader = pathname.includes(HIDDEN_HEADERS);
+  const isGameRoom = pathname.includes(GAME_ROOM);
+  const isHiddenHeaderFooter = pathname.includes(HIDDEN_HEADER_FOOTER);
 
   return (
     <>
       <Wrapper>
-        {!isHiddenHeader ? <Header /> : <GameRoomHeader />}
+        {isHiddenHeaderFooter ? (
+          ""
+        ) : !isGameRoom ? (
+          <Header />
+        ) : (
+          <GameRoomHeader />
+        )}
         <Container>
           <Outlet />
         </Container>
-        <Footer />
+        {!isHiddenHeaderFooter && <Footer />}
       </Wrapper>
 
       <Toast />

src/components/layout/layout/LayoutStyle.ts

@@ -2,11 +2,12 @@ import styled from "styled-components";
 
 export const Wrapper = styled.div`
   width: 100%;
-  /* height: 100%; */
+  height: 100%;
 `;
 
 export const Container = styled.main`
   width: 100%;
   height: 100%;
   padding: 50px 150px;
+  min-height: 800px;
 `;

src/components/ui/button/Button.tsx

@@ -11,6 +11,7 @@ export default function Button({
   disabled,
   width,
   playerNumber,
+  ...props
 }: IButtonProps) {
   return (
     <S.Button
@@ -22,6 +23,7 @@ export default function Button({
       textcolor={textcolor}
       width={width}
       playerNumber={playerNumber}
+      {...props}
     >
       {children}
     </S.Button>

src/components/ui/card/chatting/Chatting.tsx

@@ -1,5 +1,11 @@
 import ChatInputBox from "../../chatInput/ChatInputBox";
 import * as S from "./ChattingStyle";
+// import { Socket } from "socket.io-client";
+
+// export interface IChattingProps {
+//   socket: Socket | null;
+// }
+
 export default function ChattingBox() {
   return (
     <S.chat>

src/components/ui/chatInput/ChatInputBox.tsx

@@ -1,15 +1,45 @@
 import Button from "../button/Button";
 import * as S from "./chatInputStyle";
+// import { IChattingProps } from "../card/chatting/Chatting";
+// import { useEffect, useState } from "react";
+// import { useParams } from "react-router-dom";
 
 export default function ChatInputBox() {
+  //   const [message, setMessage] = useState("");
+  //   const params = useParams();
+  //   const roomId = Number(params.id);
+
+  //   useEffect(() => {
+  //     setMessage("");
+  //   }, []);
+
+  //   console.log(socket);
+
+  //   const onClickSendMessage = () => {
+  //     if (!socket) {
+  //       console.log("방에 연결할 수 없습니다.");
+  //       return;
+  //     }
+  //     socket.emit("message", { roomId: roomId, message }, (res: any) => {
+  //       console.log(`Message sent: ${JSON.stringify(res)}`);
+  //     });
+  //   };
+
   return (
     <S.chatInputBox>
       <S.chatInput
         type="text"
         placeholder="상대방과 채팅을 나눌 수 있습니다."
+        // value={message}
       ></S.chatInput>
       <S.buttonBox>
-        <Button size="xs" bgcolor="green" textcolor="black" type="button">
+        <Button
+          size="xs"
+          bgcolor="green"
+          textcolor="black"
+          type="button"
+          //   onClick={onClickSendMessage}
+        >
           전송
         </Button>
       </S.buttonBox>

src/components/ui/circleBackground/CircleBackground.tsx

@@ -0,0 +1,27 @@
+import {
+  Circle,
+  CircleBlue,
+  CircleGreen,
+  CircleRose,
+  CircleYellow,
+  Wrapper,
+} from "./circleBackgroundStyle";
+
+export default function CircleBackground() {
+  return (
+    <Wrapper>
+      <CircleGreen>
+        <Circle />
+      </CircleGreen>
+      <CircleBlue>
+        <Circle />
+      </CircleBlue>
+      <CircleRose>
+        <Circle />
+      </CircleRose>
+      <CircleYellow>
+        <Circle />
+      </CircleYellow>
+    </Wrapper>
+  );
+}

src/components/ui/circleBackground/circleBackgroundStyle.ts

@@ -0,0 +1,99 @@
+import styled, { keyframes } from "styled-components";
+
+const MovingGreen = keyframes`
+  0% {
+    transform: translate(100%, 0);
+  }
+  65% {
+    transform: translate(260%, 35%);
+  }
+  100% {
+    transform: translate(0%, 150%);
+  }
+`;
+
+const MovingBlue = keyframes`
+  0% {
+    transform: translate(300%, 20%);
+  }
+  30% {
+    transform: translate(0%, 240%);
+  }
+  100% {
+    transform: translate(-180%, -10%);
+  }
+`;
+
+const MovingRose = keyframes`
+  0% {
+    transform: translate(-10%, 200%);
+  }
+  50% {
+    transform: translate(140%, 80%);
+  }
+  100% {
+    transform: translate(50%, 0%);
+  }
+`;
+
+const MovingYellow = keyframes`
+  0% {
+    transform: translate(10%, -20%);
+  }
+  40% {
+    transform: translate(-30%, 150%);
+  }
+  100% {
+    transform: translate(260%, 320%);
+  }
+`;
+export const Wrapper = styled.div``;
+
+export const CircleGreen = styled.div`
+  position: absolute;
+  animation: ${MovingGreen} ease-in-out alternate infinite 10s both;
+
+  > div {
+    background-color: var(--color-primary);
+    width: 400px;
+    height: 400px;
+  }
+`;
+
+export const CircleBlue = styled.div`
+  position: absolute;
+  animation: ${MovingBlue} ease-in-out alternate infinite 10s both;
+
+  > div {
+    background-color: var(--color-secondary);
+    width: 350px;
+    height: 350px;
+  }
+`;
+
+export const CircleRose = styled.div`
+  position: absolute;
+  animation: ${MovingRose} ease-in-out alternate infinite 10s both;
+
+  > div {
+    width: 500px;
+    height: 500px;
+    background-color: var(--color-rose);
+  }
+`;
+
+export const CircleYellow = styled.div`
+  position: absolute;
+  animation: ${MovingYellow} ease-in-out alternate infinite 10s both;
+
+  > div {
+    background-color: var(--color-yellow-100);
+  }
+`;
+
+export const Circle = styled.div`
+  width: 300px;
+  height: 300px;
+  border-radius: 50%;
+  filter: blur(50px);
+`;

src/components/ui/loading/Loading.tsx

@@ -0,0 +1,27 @@
+import Lottie from "lottie-react";
+import animationData from "./loading.json";
+import { LoadingWrapper, LoadingBox, LoadingMessage } from "./loadingStyle";
+
+export interface LoadingProps {
+  overlay?: boolean;
+}
+
+function Loading({ overlay = false }: { overlay: boolean }) {
+  console.log(overlay);
+
+  return (
+    <LoadingWrapper overlay={overlay}>
+      <LoadingBox overlay={overlay}>
+        <Lottie
+          style={{ width: "150px", height: "150px" }}
+          loop={true}
+          animationData={animationData}
+          autoPlay={true}
+        />
+        {overlay && <LoadingMessage>로딩중입니다 ... 🏃🏻‍♀️</LoadingMessage>}
+      </LoadingBox>
+    </LoadingWrapper>
+  );
+}
+
+export default Loading;

src/components/ui/loading/loadingStyle.ts

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+import { LoadingProps } from "./Loading";
+
+export const LoadingWrapper = styled.div<LoadingProps>`
+  ${(props) =>
+    props.overlay &&
+    `
+    position: fixed;
+    inset: 0;
+    background-color: rgba(208, 255, 207, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  `}
+`;
+
+export const LoadingBox = styled.div<LoadingProps>`
+  ${(props) =>
+    props.overlay &&
+    `
+        width: 250px;
+        height: 250px;
+        background-color: var(--color-gray-0);
+        border-radius: 25px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 20px; 
+    `}
+`;
+
+export const LoadingMessage = styled.p``;