✨ feat(sound): update setting volume

gem1n1-youngjae · Jan 4, 2023 · cb90e36 · cb90e36
1 parent cc5e011
commit cb90e36
Show file tree

Hide file tree

Showing 16 changed files with 253 additions and 32 deletions.
diff --git a/public/index.html b/public/index.html
@@ -8,6 +8,10 @@
  <link rel="apple-touch-icon" href="logo192.png" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <title>고멤 가챠</title>
+ <link
+ rel="stylesheet"
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,200"
+ />
  </head>
  <body>
  <div id="root"></div>

diff --git a/src/App.tsx b/src/App.tsx
@@ -6,7 +6,15 @@ import { NavBar } from "components/organism";
 import { GachaHome, GachaPage, HomePage, MyGomemPage } from "components/pages";
 
 const App = (): JSX.Element => {
- const { basicBGM } = useStarSoundHook();
+ const {
+ basicBGM,
+ showStar,
+ clickButton,
+ gacha,
+ gachaBGM,
+ volume,
+ setVolume
+ } = useStarSoundHook();
  if (process.env.NODE_ENV !== "development") {
  document.addEventListener("keydown", (event) => {
  if (
@@ -34,8 +42,17 @@ const App = (): JSX.Element => {
  <NavBar />
  <HashRouter>
  <Routes>
- <Route path="/" element={<HomePage />} />
- <Route path="/gachaHome" element={<GachaHome />} />
+ <Route path="/" element={<HomePage clickButton={clickButton} />} />
+ <Route
+ path="/gachaHome"
+ element={
+ <GachaHome
+ clickButton={clickButton}
+ volume={volume}
+ setVolume={setVolume}
+ />
+ }
+ />
  <Route
  path="/gachaPage"
  element={
@@ -46,10 +63,17 @@ const App = (): JSX.Element => {
  stopBgm={() => {
  basicBGM.stop();
  }}
+ clickButton={clickButton}
+ gachaBGM={gachaBGM}
+ showStar={showStar}
+ gacha={gacha}
  />
  }
  />
- <Route path="/myGomem" element={<MyGomemPage />} />
+ <Route
+ path="/myGomem"
+ element={<MyGomemPage clickButton={clickButton} />}
+ />
  </Routes>
  </HashRouter>
  </>

diff --git a/src/assets/sounds/hooks.ts b/src/assets/sounds/hooks.ts
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import useSoundHook from "use-sound";
 
 import basic_BGM from "./basic_BGM.mp3";
@@ -6,29 +7,32 @@ import gacha_BGM from "./gacha_BGM.mp3";
 import gacha_sound from "./gacha_sound.mp3";
 import show_star_sound from "./show_star_sound.mp3";
 
-const VOLUME = 0.3;
-
 export const useStarSoundHook = () => {
+ const [volume, setVolume] = useState(0.5);
  const [basicBGM, { stop: basicBGMStop }] = useSoundHook(basic_BGM, {
  loop: true,
- volume: VOLUME
+ volume
  });
  const [showStar] = useSoundHook(show_star_sound, {
- volume: VOLUME
+ volume
+ });
+ const [clickButton] = useSoundHook(button_click_sound, {
+ volume
  });
- const [clickButton] = useSoundHook(button_click_sound);
  const [gacha] = useSoundHook(gacha_sound, {
- volume: VOLUME
+ volume
  });
  const [gachaBGM, { stop: gachaBGMStop, sound }] = useSoundHook(gacha_BGM, {
- volume: VOLUME
+ volume
  });
 
  return {
  basicBGM: { play: basicBGM, stop: basicBGMStop },
  showStar,
  clickButton,
  gacha,
- gachaBGM: { play: gachaBGM, stop: gachaBGMStop, sound }
+ gachaBGM: { play: gachaBGM, stop: gachaBGMStop, sound },
+ volume,
+ setVolume: (value: number) => setVolume(value)
  };
 };
diff --git a/src/components/atoms/button/selectButton.tsx b/src/components/atoms/button/selectButton.tsx
@@ -1,7 +1,6 @@
 import styled from "styled-components";
 
 import { downArrow } from "assets/images";
-import { useStarSoundHook } from "assets/sounds/hooks";
 
 const Wapper = styled.div`
  position: relative;
@@ -48,13 +47,11 @@ export const SelectButton = ({
  onClickButton?: () => void;
  showArrowButton?: boolean;
 }) => {
- const { clickButton } = useStarSoundHook();
  return (
  <Wapper>
  <ButtonContent
  className={className}
  onClick={() => {
- clickButton();
  onClickButton();
  }}
  >

diff --git a/src/components/molecules/overlay/settingOverlay.style.tsx b/src/components/molecules/overlay/settingOverlay.style.tsx
@@ -0,0 +1,36 @@
+import styled from "styled-components";
+
+export const OverlayWrapper = styled.div`
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+`;
+
+export const ContentWrapper = styled.div`
+ width: 50%;
+ height: 50%;
+ background-color: #ffffff;
+ border-radius: 12px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+`;
+
+export const Content = styled.div`
+ width: 80%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+`;
+
+export const StyledText = styled.div`
+ font-size: 24px;
+`;
+
+export const StyledInputRange = styled.input`
+ width: 55%;
+`;
diff --git a/src/components/molecules/overlay/settingOverlay.tsx b/src/components/molecules/overlay/settingOverlay.tsx
@@ -0,0 +1,40 @@
+import {
+ Content,
+ ContentWrapper,
+ OverlayWrapper,
+ StyledInputRange,
+ StyledText
+} from "./settingOverlay.style";
+
+export const SettingOverlay = ({
+ onClose,
+ volume,
+ setVolume
+}: {
+ onClose: () => void;
+ volume: number;
+ setVolume: (value: number) => void;
+}) => {
+ return (
+ <OverlayWrapper onClick={onClose}>
+ <ContentWrapper
+ onClick={(e) => {
+ e.stopPropagation();
+ }}
+ >
+ <Content>
+ <StyledText>사운드</StyledText>
+ <StyledInputRange
+ type="range"
+ min={0}
+ max={100}
+ defaultValue={volume * 100}
+ onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+ setVolume(Number(e.target.value) / 100);
+ }}
+ />
+ </Content>
+ </ContentWrapper>
+ </OverlayWrapper>
+ );
+};
diff --git a/src/components/pages/gachaHome/gachaHome.tsx b/src/components/pages/gachaHome/gachaHome.tsx
@@ -1,5 +1,21 @@
+import { PlayFunction } from "use-sound/dist/types";
+
 import { GachaHomeTemplate } from "components/templates";
 
-export const GachaHome = () => {
- return <GachaHomeTemplate />;
+export const GachaHome = ({
+ clickButton,
+ volume,
+ setVolume
+}: {
+ clickButton?: PlayFunction;
+ volume: number;
+ setVolume: (value: number) => void;
+}) => {
+ return (
+ <GachaHomeTemplate
+ clickButton={clickButton}
+ volume={volume}
+ setVolume={setVolume}
+ />
+ );
 };
diff --git a/src/components/pages/gachaPage/gachaPage.tsx b/src/components/pages/gachaPage/gachaPage.tsx
@@ -1,19 +1,32 @@
 import { useCallback, useEffect, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
+import { PlayFunction } from "use-sound/dist/types";
 
 import { gomemList } from "assets/images/gomem";
-import { useStarSoundHook } from "assets/sounds/hooks";
 import { GachaPageTemplate } from "components/templates";
 import { useRandom } from "utils/hooks/useRandom";
 
 export const GachaPage = ({
  playBgm = () => {},
- stopBgm = () => {}
+ stopBgm = () => {},
+ clickButton,
+ gachaBGM,
+ showStar,
+ gacha
 }: {
  playBgm?: () => void;
  stopBgm?: () => void;
+ clickButton?: PlayFunction;
+ gachaBGM?: {
+ play: PlayFunction;
+ stop: (id?: string) => void;
+ sound: {
+ fade: (from: number, to: number, duration: number) => void;
+ };
+ };
+ showStar?: PlayFunction;
+ gacha?: PlayFunction;
 }) => {
- const { clickButton, gachaBGM } = useStarSoundHook();
  const randomCharacter = useRandom(gomemList);
  const navigate = useNavigate();
 
@@ -64,6 +77,8 @@ export const GachaPage = ({
  randomCharacter={randomCharacter}
  onClickSaveButton={onClickSaveButton}
  gachaBGM={gachaBGM}
+ showStar={showStar}
+ gacha={gacha}
  />
  );
 };
diff --git a/src/components/pages/home/homePage.tsx b/src/components/pages/home/homePage.tsx
@@ -1,5 +1,11 @@
+import { PlayFunction } from "use-sound/dist/types";
+
 import { HomeTemplate } from "components/templates";
 
-export const HomePage = (): JSX.Element => {
- return <HomeTemplate />;
+export const HomePage = ({
+ clickButton
+}: {
+ clickButton?: PlayFunction;
+}): JSX.Element => {
+ return <HomeTemplate clickButton={clickButton} />;
 };
diff --git a/src/components/pages/myGomem/myGomemPage.tsx b/src/components/pages/myGomem/myGomemPage.tsx
@@ -1,10 +1,21 @@
+import { PlayFunction } from "use-sound/dist/types";
+
 import { MyGomemListTemplate } from "components/templates";
 
-export const MyGomemPage = () => {
+export const MyGomemPage = ({
+ clickButton
+}: {
+ clickButton?: PlayFunction;
+}) => {
  // 객체 배열이므로 두번 parse 해 주어야 배열안에 객체들이 string 에서 객체로 잘 변환되어 나옴
  const userHaveGomemList = JSON.parse(
  `[${JSON.parse(window.localStorage.getItem("userHaveGomemList")) || ``}]`
  );
 
- return <MyGomemListTemplate userHaveGomemList={userHaveGomemList} />;
+ return (
+ <MyGomemListTemplate
+ userHaveGomemList={userHaveGomemList}
+ clickButton={clickButton}
+ />
+ );
 };
diff --git a/src/components/templates/gachaHomeTemplate/gachaHomeTemplate.style.tsx b/src/components/templates/gachaHomeTemplate/gachaHomeTemplate.style.tsx
@@ -7,7 +7,7 @@ import {
  pressGachaWackdo,
  pressGomemWackdo
 } from "assets/images";
-import { BackButton } from "components/atoms";
+import { PopoutButton } from "components/atoms";
 
 export const StyledGachaHomeTemplate = styled.div`
  width: 100%;
@@ -54,3 +54,17 @@ export const StyledGomemButton = styled.div`
  background-image: url(${pressGomemWackdo});
  }
 `;
+
+export const StyledSettingButton = styled(PopoutButton)`
+ position: absolute;
+ top: 100px;
+ right: 60px;
+ width: 80px;
+ height: 70px;
+ & > div {
+ background-size: cover;
+ & > span {
+ font-size: 48px;
+ }
+ }
+`;