[Fix/#161] 메인 페이지 에러 수정 및 햄버거바 변경

eslint.config.js

@@ -37,7 +37,7 @@ const jsConfig = {
     "no-console": "warn",
     "no-extra-semi": "error",
     "no-unused-expressions": "error",
-    indent: ["error", 2, { SwitchCase: 1, ignoredNodes: ["PropertyDefinition"] }],
+    indent: "off", // prettier 충돌로 인해 off
     semi: ["warn", "always"],
     "no-undef": "error",
     "no-trailing-spaces": "warn",

src/components/commons/hamburger/Hamburger.styled.ts

@@ -1,37 +1,64 @@
-import styled from "styled-components";
-import { ButtonDelete24, IconProfile, IconArrowRight } from "@assets/svgs";
+import { ButtonDelete24, IconArrowRight, IconProfile } from "@assets/svgs";
+import styled, { css, keyframes } from "styled-components";
+
+interface HamburgerWrapperProps {
+  $isOpen: boolean;
+  width: number;
+}
+
+const hamburgerAnimation = keyframes`
+  0% {
+    transform: translateX(100%);
+    opacity: 0;
+    visibility: hidden;
+  }
+  100%{
+    transform: translateX(0);
+    opacity: 1;
+    visibility: visible;
 
-export const HamburgerWrapper = styled.section`
+  }
+`;
+
+export const HamburgerWrapper = styled.section<HamburgerWrapperProps>`
   position: absolute;
   top: 0;
-  right: -25.6rem;
+  left: ${({ width }) => `${width / 2 - 68}px`};
   z-index: 10;
-
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
   width: 25.6rem;
   height: 100vh;
 
   background-color: ${({ theme }) => theme.colors.gray_900};
-  visibility: hidden;
-
-  transition: 0.5s ease;
-
-  &.open {
-    right: 0;
-
-    visibility: visible;
-  }
+  transform: ${({ $isOpen }) => ($isOpen ? "translateX(0)" : "translateX(100%)")};
+  visibility: ${({ $isOpen }) => ($isOpen ? "visible" : "hidden")};
+  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};
+
+  animation: ${({ $isOpen }) =>
+      $isOpen &&
+      css`
+        ${hamburgerAnimation}
+      `}
+    0.2s ease-in-out;
 `;
 
-export const Overlay = styled.div`
+export const Overlay = styled.div<{ $isOpen: boolean }>`
   position: fixed;
   top: 0;
   left: 0;
   z-index: 5;
   width: 100%;
   height: 100%;
+
+  background-color: rgb(0 0 0 / 70%);
+  visibility: ${({ $isOpen }) => ($isOpen ? "visible" : "hidden")};
+  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};
+
+  transition:
+    opacity 200ms ease-in-out,
+    visibility 200ms ease-in-out;
 `;
 
 export const CloseBtn = styled.section`

src/components/commons/hamburger/Hamburger.tsx

@@ -1,10 +1,10 @@
-import React, { useState, useRef } from "react";
-import { useNavigate } from "react-router-dom";
 import useHamburger from "@hooks/useHamburger";
 import { hamburgerAtom } from "@stores/hamburger";
+import { requestKakaoLogin } from "@utils/kakaoLogin";
 import { useAtomValue } from "jotai";
+import React, { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import * as S from "./Hamburger.styled";
-import { requestKakaoLogin } from "@utils/kakaoLogin";
 
 const Hamburger = () => {
   const navigate = useNavigate();
@@ -21,60 +21,87 @@ const Hamburger = () => {
     e.stopPropagation();
   };
 
+  const [width, setWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, [isOpen]);
+
   return (
     <>
-      {isOpen && <S.Overlay onClick={handlerOutside} />}
-      <S.HamburgerWrapper
-        ref={outside}
-        className={isOpen ? "open" : ""}
-        onClick={(e) => e.preventDefault()}
-      >
-        <S.CloseBtn onClick={closeHamburger}>
-          <S.CloseIcon />
-        </S.CloseBtn>
-        {isLogin ? (
-          <>
-            <S.ProfileContainer>
-              <S.ProfileIcon />
-              {/* 이 부분 API 연결하면 사용자 이름으로 변경 */}
-              <S.UserName>프로필 이름</S.UserName>
-            </S.ProfileContainer>
-            <S.NavigateBtnWrapper>
-              <S.NavigateBtn
-                onClick={() => {
-                  navigate("/gig-register");
-                }}
-              >
-                <S.NavigateBtnText>내가 등록한 공연</S.NavigateBtnText>
-                <S.ArrowRightIcon />
-              </S.NavigateBtn>
+      <S.Overlay $isOpen={isOpen} onClick={handlerOutside}>
+        <S.HamburgerWrapper
+          $isOpen={isOpen}
+          ref={outside}
+          onClick={(e) => e.stopPropagation()}
+          width={width}
+        >
+          <S.CloseBtn onClick={closeHamburger}>
+            <S.CloseIcon />
+          </S.CloseBtn>
+          {isLogin ? (
+            <>
+              <S.ProfileContainer>
+                <S.ProfileIcon />
+                {/* 이 부분 API 연결하면 사용자 이름으로 변경 */}
+                <S.UserName>프로필 이름</S.UserName>
+              </S.ProfileContainer>
+              <S.NavigateBtnWrapper>
+                <S.NavigateBtn
+                  onClick={() => {
+                    navigate("/gig-register");
+                  }}
+                >
+                  <S.NavigateBtnText>내가 등록한 공연</S.NavigateBtnText>
+                  <S.ArrowRightIcon />
+                </S.NavigateBtn>
+                <S.NavigateBtn
+                  onClick={() => {
+                    navigate("/lookup");
+                  }}
+                >
+                  <S.NavigateBtnText>내가 예매한 공연</S.NavigateBtnText>
+                  <S.ArrowRightIcon />
+                </S.NavigateBtn>
+              </S.NavigateBtnWrapper>
+            </>
+          ) : (
+            <>
+              <S.ProfileContainer>
+                <S.ProfileIcon />
+                <S.LoginBtn onClick={requestKakaoLogin}>로그인 하기</S.LoginBtn>
+              </S.ProfileContainer>
               <S.NavigateBtn
                 onClick={() => {
-                  navigate("/lookup");
+                  navigate("/nonmb-lookup");
                 }}
               >
-                <S.NavigateBtnText>내가 예매한 공연</S.NavigateBtnText>
+                <S.NavigateBtnText>비회원 예매 조회</S.NavigateBtnText>
                 <S.ArrowRightIcon />
               </S.NavigateBtn>
-            </S.NavigateBtnWrapper>
-          </>
-        ) : (
-          <>
-            <S.ProfileContainer>
-              <S.ProfileIcon />
-              <S.LoginBtn onClick={requestKakaoLogin}>로그인 하기</S.LoginBtn>
-            </S.ProfileContainer>
-            <S.NavigateBtn
-              onClick={() => {
-                navigate("/nonmb-lookup");
-              }}
-            >
-              <S.NavigateBtnText>비회원 예매 조회</S.NavigateBtnText>
-              <S.ArrowRightIcon />
-            </S.NavigateBtn>
-          </>
-        )}
-      </S.HamburgerWrapper>
+            </>
+          )}
+        </S.HamburgerWrapper>
+      </S.Overlay>
     </>
   );
 };

src/pages/main/Main.tsx

@@ -1,13 +1,13 @@
 import { useState } from "react";
 import * as S from "./Main.styled";
 
-import MainNavigation from "./components/mainNavigation/MainNavigation";
 import Carousel from "./components/carousel/Carousel";
 import Chips from "./components/chips/Chips";
-import Floating from "./components/floating/Floating";
-import Performance from "./components/performance/Performance";
 import Footer from "./components/footer/Footer";
+import MainNavigation from "./components/mainNavigation/MainNavigation";
+import Performance from "./components/performance/Performance";
 
+import Floating from "./components/floating/Floating";
 import { dummyData } from "./constants/dummyData";
 
 const Main = () => {

src/pages/main/components/mainNavigation/MainNavigation.styled.ts

@@ -1,5 +1,5 @@
+import { IcHamburgar, IconFooterLogo } from "@assets/svgs";
 import styled from "styled-components";
-import { IconFooterLogo, IcHamburgar } from "@assets/svgs";
 
 export const MainNavigationWrapper = styled.section`
   position: absolute;

src/pages/main/components/mainNavigation/MainNavigation.tsx

@@ -1,8 +1,8 @@
-import * as S from "./MainNavigation.styled";
 import { useNavigate } from "react-router-dom";
+import * as S from "./MainNavigation.styled";
 
-import Hamburger from "../../../../components/commons/hamburger/Hamburger";
 import useHamburger from "@hooks/useHamburger";
+import Hamburger from "../../../../components/commons/hamburger/Hamburger";
 
 const MainNavigation = () => {
   const navigate = useNavigate();

src/pages/main/components/performance/Performance.tsx

@@ -23,7 +23,7 @@ const Performance = ({ genre, performanceList }: PerformanceComponentProps) => {
   const navigate = useNavigate();
 
   const handleNavigate = () => {
-    navigate("/register");
+    navigate("/gig-register");
   };
 
   const filteredData =
@@ -44,9 +44,13 @@ const Performance = ({ genre, performanceList }: PerformanceComponentProps) => {
         ))}
       </S.PerformanceLayout>
       <Spacing marginBottom="1.5" />
-      <S.BannerWrapper onClick={handleNavigate}>
-        <S.Banner $image={BannerImg} />
-      </S.BannerWrapper>
+      {genre === "ALL" ? (
+        <S.BannerWrapper onClick={handleNavigate}>
+          <S.Banner $image={BannerImg} />
+        </S.BannerWrapper>
+      ) : (
+        <></>
+      )}
       <Spacing marginBottom="3.2" />
       <S.PerformanceLayout>
         {data2.map((item) => (