diff --git a/package.json b/package.json index 231dd09..4d14c6f 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,8 @@ "@tanstack/react-query": "4", "axios": "^1.7.9", "jwt-decode": "^4.0.0", + "lottie": "^0.0.1", + "lottie-react": "^2.4.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-hook-form": "^7.54.2", diff --git a/src/App.tsx b/src/App.tsx index 0102d9d..cd678ab 100644 --- a/src/App.tsx +++ b/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 ( <> - + }> + + ); } diff --git a/src/assets/images/Vector 3.svg b/src/assets/images/icon_backDeck.svg similarity index 100% rename from src/assets/images/Vector 3.svg rename to src/assets/images/icon_backDeck.svg diff --git a/src/assets/images/icon_trophy.svg b/src/assets/images/icon_trophy.svg index f2e6784..1646155 100644 --- a/src/assets/images/icon_trophy.svg +++ b/src/assets/images/icon_trophy.svg @@ -1,9 +1,14 @@ - - + + + - - + + - + + + + + diff --git a/src/assets/images/logo_large.svg b/src/assets/images/logo_large.svg new file mode 100644 index 0000000..f6f9bb1 --- /dev/null +++ b/src/assets/images/logo_large.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/layout/footer/FooterStyle.ts b/src/components/layout/footer/FooterStyle.ts index 212d612..9ade880 100644 --- a/src/components/layout/footer/FooterStyle.ts +++ b/src/components/layout/footer/FooterStyle.ts @@ -24,6 +24,4 @@ export const StyledFooter = styled.footer` justify-content: center; align-items: center; color: var(--color-gray-600); - position: fixed; - bottom: 0; `; diff --git a/src/components/layout/gameRoomHeader/GameRoomHeader.tsx b/src/components/layout/gameRoomHeader/GameRoomHeader.tsx index f69d897..3209248 100644 --- a/src/components/layout/gameRoomHeader/GameRoomHeader.tsx +++ b/src/components/layout/gameRoomHeader/GameRoomHeader.tsx @@ -1,7 +1,6 @@ import iconExit from "@assets/images/icon_close.svg"; -import { NavLink, useNavigate, useParams } from "react-router-dom"; +import { useNavigate, useParams } from "react-router-dom"; import { Flex, StyledHeader, TextButton } from "./GameRoomHeaderStyle"; - import { useSocketStore } from "../../../store/useSocketStore"; export default function GameRoomHeader() { @@ -20,12 +19,10 @@ export default function GameRoomHeader() { return ( <> - - onClickOut(roomId)}> - 게임방 나가기 - 나가기 - - + onClickOut(roomId)}> + 게임방 나가기 + 나가기 + ); diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx index 58d7727..213b69b 100644 --- a/src/components/layout/header/Header.tsx +++ b/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,7 +17,7 @@ export default function Header() { <> - + @@ -30,7 +25,7 @@ export default function Header() {
  • 랭킹
    • - {isLoggedIn ? ( + {accessToken ? ( <>
  • 마이페이지 diff --git a/src/components/layout/layout/Layout.tsx b/src/components/layout/layout/Layout.tsx index 1f3219c..6f52084 100644 --- a/src/components/layout/layout/Layout.tsx +++ b/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 ( <> - {!isHiddenHeader ?
    : } + {isHiddenHeaderFooter ? ( + "" + ) : !isGameRoom ? ( +
    + ) : ( + + )} -