Merge pull request #494 from pknu-wap/fix/#493-footer로_인한_수직_스크롤_제거

#493 footer로 인한 수직 스크롤 제거
pknu-wap · Sep 5, 2024 · abacf2d · abacf2d
2 parents e04e6e9 + 7e82f00
commit abacf2d
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 9 deletions.
diff --git a/client/src/components/layout/Footer.tsx b/client/src/components/layout/Footer.tsx
@@ -32,7 +32,7 @@ const Footer = ({ dark, toggleDarkMode }: ComponentProps) => {
 
   return (
     <FullLayout>
-      <footer className={`w-full z-30 flex justify-between items-center pr-3 pl-3 `}>
+      <footer className={`absolute bottom-10 w-full flex justify-between items-center pr-3 pl-3 `}>
           <div>
             © WAG!
           </div>

diff --git a/client/src/components/layout/Header.tsx b/client/src/components/layout/Header.tsx
@@ -19,7 +19,6 @@ type ComponentProps = Props & PropsFromRedux;
 const Header = ({ dark, toggleDarkMode }: ComponentProps) => {
 
   const [play, setPlay] = useState(false);
-  const [soundEffectStatusValue, ] = useState(soundEffectStatus);
   const [isClicked, setIsClicked] = useState(false)
   const audioRef = useRef<HTMLAudioElement>(null);
 
@@ -72,7 +71,7 @@ const Header = ({ dark, toggleDarkMode }: ComponentProps) => {
       audio.play(); // 소리를 재생합니다.
     };
 
-    if (soundEffectStatusValue){
+    if (playSoundEffect){
       playSound();
     }
 
@@ -85,16 +84,16 @@ const Header = ({ dark, toggleDarkMode }: ComponentProps) => {
       audio.play(); // 소리를 재생합니다.
     };
 
-    if (soundEffectStatusValue){
+    if (playSoundEffect){
       playSound();
     }
 
   }
 
   return (
     <header className="m-5 z-50">
-      <div className="flex justify-end z-50">
-        <div className="absolute left-10 top-7">
+      <div className="flex justify-between z-50">
+        <div className="relative top-2">
       {dark ? (
 
 <img className={`w-20 h-16 ${isClicked ? 'clicked' : ''}`} src="images/WAG_dark.2.png" 
@@ -119,6 +118,7 @@ const Header = ({ dark, toggleDarkMode }: ComponentProps) => {
       </img>
     )}
     </div>
+    <div className="flex justify-between z-50">
         <audio ref={audioRef} src='audio/main_theme.mp3' loop />
         {isChrome() ? (
           <>
@@ -207,6 +207,7 @@ const Header = ({ dark, toggleDarkMode }: ComponentProps) => {
             </RulesModal>
           </>
         ) : null}
+        </div>
       </div>
     </header>
   );

diff --git a/client/src/index.css b/client/src/index.css
@@ -35,7 +35,11 @@ body {
   -moz-osx-font-smoothing: grayscale;
   @apply transition-colors duration-200 bg-light-bg dark:bg-dark-bg;
   max-width: 1024px;
-  padding-bottom: 7vh;
+  /* padding-bottom: 7vh; */
+}
+
+footer {
+  max-width: 1024px;
 }
 
 code {

diff --git a/client/src/index.tsx b/client/src/index.tsx
@@ -6,14 +6,14 @@ import reportWebVitals from "./reportWebVitals";
 import { Provider } from "react-redux";
 import store from "./modules";
 import Header from "./components/layout/Header";
-import Footer from "./components/layout/Footer";
 import { BrowserRouter } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { RecoilRoot } from "recoil";
 import ReactModal from "react-modal";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import SquareBubble from "./components/layout/SquareBubble";
+import Footer from "./components/layout/Footer";
 
 const queryClient = new QueryClient();
 const rootElement = document.getElementById("root") as HTMLElement; // id가 'root'인 엘리먼트를 찾는 코드를 변수에 할당
@@ -28,9 +28,9 @@ root.render(
             <SquareBubble>
             <Header />
             <App />
+            <Footer/>
             <ToastContainer />
             </SquareBubble>
-            <Footer />
           </BrowserRouter>
         </RecoilRoot>
       </Provider>