Merge pull request #490 from pknu-wap/develop

release 배포
pknu-wap · Sep 4, 2024 · 94c87b6 · 94c87b6
2 parents 0c88299 + d1645c5
commit 94c87b6
Show file tree

Hide file tree

Showing 19 changed files with 233 additions and 61 deletions.
diff --git a/client/public/audio/darkmode_wag.mp3 b/client/public/audio/darkmode_wag.mp3
diff --git a/client/public/audio/lightmode_wag.mp3 b/client/public/audio/lightmode_wag.mp3
diff --git a/client/public/images/Sechan_Face.png b/client/public/images/Sechan_Face.png
diff --git a/client/public/images/WAG_Preview_image2.png b/client/public/images/WAG_Preview_image2.png
diff --git a/client/public/images/WAG_main_page.png b/client/public/images/WAG_main_page.png
diff --git a/client/public/images/yangSaeChanGame.png b/client/public/images/yangSaeChanGame.png
diff --git a/client/public/index.html b/client/public/index.html
@@ -11,24 +11,28 @@
 
     <!--Google Search Console End-->
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="웹으로 즐기는 양세찬 게임!" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/images/WAG_Preview_image2.png" />
+    <meta name="description" content="양세찬 게임, 웹에서 빠르고 쉽게 즐기세요! 다양한 게임이 준비되어 있으며, 친구와 함께 즐기기 좋은 플랫폼입니다." />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>WAG!</title>
+    <title>양세찬 게임</title>
 
     <!--OG 태그-->
-    <meta property="og:title" content="WAG!" />
-    <meta property="og:description" content="웹으로 즐기는 양세찬 게임!" />
-    <meta property="og:image" content="http://wwwag.co.kr/images/WAG_Preview_image2.png" />
-    <meta property="og:url" content="http://wwwag.co.kr/" />
+    <meta property="og:title" content="양세찬 게임" />
+    <meta property="og:description" content="양세찬 게임, 웹에서 빠르고 쉽게 즐기세요! 다양한 게임이 준비되어 있으며, 친구와 함께 즐기기 좋은 플랫폼입니다."" />
+    <meta property="og:image" content="https://wwwag.co.kr/images/Sechan_Face.png" />
+    <meta property="og:url" content="https://wwwag.co.kr/" />
     <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="양세찬 게임" />
+
     <!--트위터 태그-->
-    <meta name="twitter:card" content="http://wwwag.co.kr/images/WAG_main_page.png">
-    <meta name="twitter:title" content="WAG!">
-    <meta name="twitter:description" content="웹으로 즐기는 양세찬 게임!">
-    <meta name="twitter:image" content="http://wwwag.co.kr/images/WAG_Preview_image2.png">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="양세찬 게임">
+    <meta name="twitter:description" content="양세찬 게임, 웹에서 빠르고 쉽게 즐기세요! 다양한 게임이 준비되어 있으며, 친구와 함께 즐기기 좋은 플랫폼입니다.">
+    <meta name="twitter:image" content="https://wwwag.co.kr/images/Sechan_Face.png">
+
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/client/public/manifest.json b/client/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "WAG!",
-  "name": "웹으로 즐기는 양세찬 게임!",
+  "short_name": "양세찬 게임",
+  "name": "양세찬 게임",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/client/src/CreateRoom/CreateRoom.tsx b/client/src/CreateRoom/CreateRoom.tsx
@@ -10,13 +10,13 @@ import DropdownSelect from "../components/dropDown/DropDown";
 import { Option } from "react-dropdown";
 import SliderComponent from "../components/slider/Slider";
 import { useRecoilState } from "recoil";
-import { firstCategoryRecoil, timerCount } from "../recoil/recoil";
+import { firstCategoryRecoil, timerCount, soundEffectStatus } from "../recoil/recoil";
 import Wrapper from "../components/Wrapper";
 
 function CreateRoom() {
   const [isPrivate, setIsPrivate] = useState<boolean | null>(false); //일단은 공개방을 default로
   const [nickName, setNickname] = useState<string>("");
-
+  const [soundEffectStatusValue, ] = useRecoilState(soundEffectStatus);
   const navigate = useNavigate();
 
   // const radioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -26,8 +26,11 @@ function CreateRoom() {
   const handlePlaySound = () => {
 
     const playSound = () => {
-      const audio = new Audio('audio/button_click.mp3')  
-      audio.play()
+      if (soundEffectStatusValue){
+        const audio = new Audio('audio/button_click.mp3')  
+        audio.play()
+      }
+
     };
 
     playSound();

diff --git a/client/src/Game/ReadyToGame.tsx b/client/src/Game/ReadyToGame.tsx
@@ -8,6 +8,7 @@ import {
   loadingModalState,
   readyToGameModalState,
   timerCount,
+  soundEffectStatus,
 } from "../recoil/recoil";
 import { useEffect, useState, useRef } from "react";
 import ReadyToGameModal from "../components/modal/ReadyModal";
@@ -53,6 +54,7 @@ const ReadyToGame = () => {
   const [, setIsOpen] = useRecoilState(readyToGameModalState);
   const [, setCaptainIsOpen] = useRecoilState(captainReadyToGameModalState);
   const [, setLoadingIsOpen] = useRecoilState(loadingModalState);
+  const [soundEffectStatusValue, ] = useRecoilState(soundEffectStatus);
   const [nickname, setNickname] = useState<string>("");
   const [beforeNickname, setBeforeNickname] = useState("")
   const [possible, setPossible] = useState<boolean>();
@@ -220,17 +222,21 @@ const ReadyToGame = () => {
       const audio = new Audio('/audio/button_click.mp3')  
       audio.play()
     };
-
-    playSound();
+    if (soundEffectStatusValue){
+      playSound();
+    }
+
   };
 
   const handleCorrectSound = () => {
     const playSound = () => {
       const audio = new Audio('/audio/correct_answer2.mp3')  
       audio.play()
     };
-
-    playSound();
+    if (soundEffectStatusValue){
+      playSound();
+    }
+
 
   };
 
@@ -239,17 +245,21 @@ const ReadyToGame = () => {
       const audio = new Audio('/audio/blip03.mp3')  
       audio.play()
     };
-
-    playSound();
+    if (soundEffectStatusValue){
+      playSound();
+    }
+
   };
 
   const handleQuestionSound = () => {
     const playSound = () => {
       const audio = new Audio('/audio/question.mp3')  
       audio.play()
     };
-
-    playSound();
+    if (soundEffectStatusValue){
+      playSound();
+    }
+
 
   };
 
@@ -260,17 +270,21 @@ const ReadyToGame = () => {
       audio.play()
       audioFire.play()
     };
-
-    playSound();
+    if (soundEffectStatusValue){
+      playSound();
+    }
+
   };
 
   const handleBooSound = () => {
     const playSound = () => {
       const audio = new Audio('/audio/fail.mp3'); // 새로운 audio 요소 생성
       audio.play(); // 소리를 재생합니다.
     };
-
-    playSound();
+    if (soundEffectStatusValue){
+      playSound();
+    }
+
   }
 
   const handleStartSound = () => {
@@ -279,8 +293,10 @@ const ReadyToGame = () => {
       const audio = new Audio('/audio/start.mp3'); // 새로운 audio 요소 생성
       audio.play(); // 소리를 재생합니다.
     };
-
-    playSound();
+    if (soundEffectStatusValue){
+      playSound();
+    }
+
   }
 
   const handleGameStartSound = () => {
@@ -289,8 +305,10 @@ const ReadyToGame = () => {
       const audio = new Audio('/audio/startGame.mp3'); // 새로운 audio 요소 생성
       audio.play(); // 소리를 재생합니다.
     };
-
-    playSound();
+    if (soundEffectStatusValue){
+      playSound();
+    }
+
   }
 
   const handleWarningSound = () => {
@@ -299,8 +317,10 @@ const ReadyToGame = () => {
       const audio = new Audio('/audio/warning.mp3'); // 새로운 audio 요소 생성
       audio.play(); // 소리를 재생합니다.
     };
-
-    playSound();
+    if (soundEffectStatusValue){
+      playSound();
+    }
+
   }
 
   const nicknamePossibleClick = async () => {
@@ -1383,7 +1403,7 @@ const ReadyToGame = () => {
 
           </div>
 
-          <div className="mt-3 m-auto" onClick={() => {navigate(location.state?.from || "/")}}>딛자</div>
+          <div className="mt-3 m-auto" onClick={() => {navigate(location.state?.from || "/")}}>닫자</div>
         </div>
       </ReadyToGameModal>
 

diff --git a/client/src/components/layout/Footer.tsx b/client/src/components/layout/Footer.tsx
@@ -0,0 +1,47 @@
+import * as React from "react";
+import { connect, ConnectedProps } from "react-redux";
+import { RootState } from "../../modules/index";
+import { toggleDarkMode } from "../../modules/darkSlice";
+import IconButton from "../button/IconButton";
+import RulesModal from "../modal/RulesModal";
+import { useRecoilState } from "recoil";
+import { rulesModalState, soundEffectStatus } from "../../recoil/recoil";
+const { useEffect, useState, useRef } = React;
+
+type Props = {
+  children?: React.ReactNode;
+};
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+type ComponentProps = Props & PropsFromRedux;
+
+const Footer = ({ dark, toggleDarkMode }: ComponentProps) => {
+  const [soundEffectStatusValue, ] = useRecoilState(soundEffectStatus);
+  const [isClicked, setIsClicked] = useState(false)
+
+  useEffect(() => {
+    if (dark) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  }, [dark]);
+
+
+
+  return (
+<footer className="m-5 z-30 flex absolute bottom-0 w-11/12 justify-between">
+  <div className="relative bottom-3">
+    © WAG!
+  </div>
+  <div className="relative bottom-3">
+    v1.0.0
+  </div>
+</footer>
+  );
+};
+
+const connector = connect((state: RootState) => ({ dark: state.dark.isDark }), {
+  toggleDarkMode,
+});
+export default connector(Footer);
diff --git a/client/src/components/layout/Header.tsx b/client/src/components/layout/Header.tsx
@@ -5,7 +5,8 @@ import { toggleDarkMode } from "../../modules/darkSlice";
 import IconButton from "../button/IconButton";
 import RulesModal from "../modal/RulesModal";
 import { useRecoilState } from "recoil";
-import { rulesModalState } from "../../recoil/recoil";
+import { rulesModalState, soundEffectStatus } from "../../recoil/recoil";
+import { faTruckField } from "@fortawesome/free-solid-svg-icons";
 const { useEffect, useState, useRef } = React;
 
 type Props = {
@@ -18,6 +19,8 @@ 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);
 
   useEffect(() => {
@@ -28,6 +31,12 @@ const Header = ({ dark, toggleDarkMode }: ComponentProps) => {
     }
   }, [dark]);
 
+  const [playSoundEffect, setPlaySoundEffect] = useRecoilState(soundEffectStatus);
+  const handlePlaySoundEffect = () => {
+    console.log(!playSoundEffect)
+    setPlaySoundEffect(!playSoundEffect)
+  }
+
   const handlePlayMusic = () => {
     const audio = audioRef.current;
     if (audio) {
@@ -56,12 +65,82 @@ const Header = ({ dark, toggleDarkMode }: ComponentProps) => {
     return userAgent.includes('Chrome') || userAgent.includes('Safari');
   }
 
+  const handleLightLogoClick = () => {
+
+    const playSound = () => {
+      const audio = new Audio('audio/lightmode_wag.mp3'); // 새로운 audio 요소 생성
+      audio.play(); // 소리를 재생합니다.
+    };
+
+    if (soundEffectStatusValue){
+      playSound();
+    }
+
+  }
+
+  const handleDarkLogoClick = () => {
+
+    const playSound = () => {
+      const audio = new Audio('audio/darkmode_wag.mp3'); // 새로운 audio 요소 생성
+      audio.play(); // 소리를 재생합니다.
+    };
+
+    if (soundEffectStatusValue){
+      playSound();
+    }
+
+  }
+
   return (
     <header className="m-5 z-50">
       <div className="flex justify-end z-50">
+        <div className="absolute left-10 top-7">
+      {dark ? (
+
+<img className={`w-20 h-16 ${isClicked ? 'clicked' : ''}`} src="images/WAG_dark.2.png" 
+  alt="logo dark mode"
+  onClick={() => {
+    handleDarkLogoClick();
+    setIsClicked(true); // 클릭될 때마다 isClicked 상태를 true로 설정하여 애니메이션을 발생시킵니다.
+    setTimeout(() => setIsClicked(false), 200);
+    }}>
+
+  </img>
+
+    ) : (
+      <img className={`w-20 h-16 ${isClicked ? 'clicked' : ''}`} src="images/WAG_white.2.png" 
+      alt="logo light mode"
+      onClick={() => {
+        handleLightLogoClick();
+        setIsClicked(true); // 클릭될 때마다 isClicked 상태를 true로 설정하여 애니메이션을 발생시킵니다.
+        setTimeout(() => setIsClicked(false), 200);
+        }}>
+
+      </img>
+    )}
+    </div>
         <audio ref={audioRef} src='audio/main_theme.mp3' loop />
         {isChrome() ? (
           <>
+              <IconButton
+              className="z-50 mr-3"
+              size="md"
+              onClick={() => {
+                handlePlaySoundEffect();
+              }}
+            >
+              {playSoundEffect ? (
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="size-6">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z" />
+              </svg>
+
+              ) : (
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="size-6">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6 4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z" />
+                </svg>
+              )}
+            </IconButton>
+
             <IconButton
               className="z-50 mr-3"
               size="md"
@@ -109,6 +188,7 @@ const Header = ({ dark, toggleDarkMode }: ComponentProps) => {
                 </svg>
               )}
             </IconButton>
+
 
             <RulesModal onRequestClose={closeModal}>
               <div className="text-light-text dark:text-dark-text flex justify-center items-center">