Merge pull request #135 from falconlee236/feat/add-soundgen

[FEAT] 웹페이지와 효과음 생성 API 연동

Author: falconlee236

src/logged_out/components/home/Profile.js

@@ -191,7 +191,7 @@ function Profile(props) {
         };
       } catch (e){
         console.error(e);
-        throw e;
+        return []
       }
     }
     fetchLikeData()

src/logged_out/components/register_login/MyLoginDialog.js

@@ -44,8 +44,8 @@ const GoogleLoginButton = (props) => {
           const {accessToken, refreshToken} = response.data.data.authTokens;
           const userData = response.data.data.memberResponse;
           setTimeout(() => {
-            Cookies.set('accessToken', accessToken);
-            Cookies.set('refreshToken', refreshToken);
+            Cookies.set('accessToken', accessToken, { expires: 1 });
+            Cookies.set('refreshToken', refreshToken, { expires: 1 });
             localStorage.setItem('userinfo', JSON.stringify(userData));
             history.push("/");
             onClose();

src/logged_out/components/soundGen/SoundGen.js

@@ -1,9 +1,22 @@
 import React, {useEffect, useState} from "react";
 import withStyles from "@mui/styles/withStyles";
-import {Box, Typography} from "@mui/material";
+import {Box, Button, Card, Divider, Grid, keyframes, Stack, Typography} from "@mui/material";
 import axios from "axios";
+import {styled} from "@mui/material/styles";
+import WaveSurferWithoutStar from "./WaveSurferWithoutStar";
+import CloudDownloadIcon from "@mui/icons-material/CloudDownload";
+import SoundDetailPaper from "../soundList/SoundDetailPaper";
 
-const styles = () => ({
+const jump = keyframes`
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+`;
+
+const styles = (theme) => ({
   container: {
     height: "100vh",
     display: "flex",
@@ -58,23 +71,126 @@ const styles = () => ({
     alignItems: "center",
     padding: "0.5rem",
   },
+  blogContentWrapper: {
+    backgroundColor: theme.palette.background.default,
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    [theme.breakpoints.up("sm")]: {
+      marginLeft: theme.spacing(4),
+      marginRight: theme.spacing(4),
+    },
+    marginBottom: theme.spacing(-50),
+    maxWidth: 1280,
+    width: "100%",
+  },
+  card: {
+    backgroundColor: theme.palette.background.default,
+    boxShadow: theme.shadows[4],
+  },
+  titleContainer:{
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  titleButtonContainer:{
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+  },
+  itemPaperContainer:{
+    backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
+    ...theme.typography.body2,
+    padding: theme.spacing(1),
+    textAlign: 'center',
+  },
 });
 
+const Letter = styled('span')(({ delay, animate }) => ({
+  display: 'inline-block',
+  animation: animate ? `${jump} 4s infinite` : 'none',
+  animationDelay: delay,
+}));
+
 function SoundGen(props) {
   const {classes,  selectSoundGen} = props;
   const [input, setInput] = useState("");
+  const [animate, setAnimate] = useState(false);
+  const [soundBlob, setSoundBlob] = useState(null);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [soundEffectName, setSoundEffectName] = useState("");
+  const [soundEffectTypes, setSoundEffectTypes] = useState([]);
+  const [description, setDescription] = useState("");
+
+  const formatTime = (timeInSeconds) => {
+    const minutes = Math.floor((timeInSeconds % 3600) / 60);
+    const seconds = Math.floor(timeInSeconds % 60);
+    const hours = Math.floor(timeInSeconds / 3600);
+
+    // 시, 분, 초를 두 자리수로 표시하고 앞에 0을 붙임
+    const formattedHours = hours.toString().padStart(2, '0');
+    const formattedMinutes = minutes.toString().padStart(2, '0');
+    const formattedSeconds = seconds.toString().padStart(2, '0');
+
+    return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
+  };
+
   const inputChange = (event) => {
     setInput(event.target.value);
   }
+
   const sendToServer = async (event) => {
     if (event.key === "Enter") {
-      const url = "https://jsonplaceholder.typicode.com/comments"
-      const resData = await axios.get(url);
-      console.dir(resData);
-      console.dir(input);
+      const englishRegex = /^[a-zA-Z\s.,!?'"]+$/;
+      if (!englishRegex.test(input)) {
+        alert("This service is available English only");
+        setInput("");
+        return;
+      }
+
+      const url = "https://soundeffect-search.p-e.kr/api/v1/soundeffect"
+      try{
+        setAnimate(true);
+        setSoundBlob(null);
+        const resData = await axios.post(url, { input });
+        if (resData.status !== 200) return;
+        const {file: soundEffectBytes} = resData.data.data;
+        setSoundEffectName(resData.data.data.soundEffectName);
+        setSoundEffectTypes(resData.data.data.soundEffectTypes);
+        setDescription(resData.data.data.description);
+        // Base64 디코딩 및 Blob 생성
+        const byteCharacters = atob(soundEffectBytes);
+        const byteNumbers = new Array(byteCharacters.length)
+        for (let i = 0; i < byteCharacters.length; i++) {
+          byteNumbers[i] = byteCharacters.charCodeAt(i);
+        }
+        const byteArray = new Uint8Array(byteNumbers);
+        const blob = new Blob([byteArray], { type: 'audio/wav' });
+        setSoundBlob(blob); // soundBlob 상태 업데이트
+      } catch (error) {
+        console.error(error);
+        alert("Failed SoundGeneration, Please Try Again")
+      } finally {
+        setAnimate(false); // 애니메이션 종료
+      }
     }
   }
 
+  const handleDownload = () => {
+    // 다운로드 링크 생성
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(soundBlob);
+    link.download = soundEffectName;
+
+    // 링크 클릭 및 정리
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+
+    // Blob URL 해제
+    window.URL.revokeObjectURL(link.href);
+  };
+
   useEffect(() => {
     selectSoundGen();
   }, [selectSoundGen]);
@@ -86,10 +202,10 @@ function SoundGen(props) {
           className={classes.logoContainer}
           variant="h1"
         >
-          <span style={{color: '#4285F4'}}>A</span>
-          <span style={{color: '#EA4335'}}>u</span>
-          <span style={{color: '#FBBC05'}}>L</span>
-          <span style={{color: '#34A853'}}>o</span>
+          <Letter style={{ color: '#4285F4' }} delay="0s" animate={animate}>A</Letter>
+          <Letter style={{ color: '#EA4335' }} delay="1s" animate={animate}>u</Letter>
+          <Letter style={{ color: '#FBBC05' }} delay="2s" animate={animate}>L</Letter>
+          <Letter style={{ color: '#34A853' }} delay="3s" animate={animate}>o</Letter>
         </Typography>
       </Box>
       <Box className={classes.innerContainer}>
@@ -109,6 +225,72 @@ function SoundGen(props) {
           />
         </Box>
       </Box>
+      {soundBlob && (
+        <Box className={classes.blogContentWrapper}>
+          <Box sx={{display: "flex", justifyContent: "center"}}>
+            <Grid item md={9}>
+              <Card className={classes.card}>
+                <Box sx={{border: '2px solid black'}}>
+                  <WaveSurferWithoutStar
+                    audioBlob={soundBlob}
+                    setCurrentTime={setCurrentTime}
+                    setDuration={setDuration}
+                  />
+                </Box>
+                <Box pt={1} pr={3} pl={3} className={classes.titleContainer}>
+                  <Typography>
+                    {formatTime(currentTime)}
+                  </Typography>
+                  <Typography>
+                    {formatTime(duration)}
+                  </Typography>
+                </Box>
+                <Box pt={3} pr={3} pl={3} pb={2} className={classes.titleContainer}>
+                  <Box>
+                    <Typography variant="h4">
+                      <b>{soundEffectName}</b>
+                    </Typography>
+                  </Box>
+                  <Box className={classes.titleButtonContainer}>
+                    <Button
+                      component="label"
+                      role={undefined}
+                      variant="contained"
+                      tabIndex={-1}
+                      startIcon={<CloudDownloadIcon />}
+                      onClick={handleDownload}
+                    >
+                      Download
+                    </Button>
+                  </Box>
+                </Box>
+                <Box p={3}>
+                  <Typography paragraph>
+                    {description}
+                  </Typography>
+                  <Divider />
+                  <Box pt={2} sx={{display:'flex', justifyContent: 'center'}}>
+                    <Stack
+                      direction={{ xs: 'column', sm: 'row' }}
+                      spacing={{ xs: 1, sm: 2, md: 4 }}
+                      sx={{width: '100%', height: '100%'}}
+                      justifyContent="space-between"
+                      alignItems="center"
+                    >
+                      <SoundDetailPaper title="Type" value={"wav"} />
+                      <SoundDetailPaper title="Duration" value={soundEffectTypes?.length + "s"} />
+                      <SoundDetailPaper title="File Size" value={soundEffectTypes?.fileSize + "MB"} />
+                      <SoundDetailPaper title="Sample Rate" value={soundEffectTypes?.sampleRate + "HZ"} />
+                      <SoundDetailPaper title="Bit depth" value={soundEffectTypes?.bitDepth + "bit"} />
+                      <SoundDetailPaper title="Channels" value={soundEffectTypes?.channels} />
+                    </Stack>
+                  </Box>
+                </Box>
+              </Card>
+            </Grid>
+          </Box>
+        </Box>
+      )}
     </Box>
   );
 }

src/logged_out/components/soundGen/WaveSurferWithoutStar.js

@@ -0,0 +1,95 @@
+import {useEffect, useRef, useState} from "react";
+import WaveSurfer from "wavesurfer.js";
+import {Box, IconButton} from "@mui/material";
+import {PauseCircle, PlayCircle} from "@mui/icons-material";
+import withStyles from "@mui/styles/withStyles";
+import theme from "../../../theme";
+
+const styles = () => ({
+  waveSurferContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    width: "100%",
+  },
+  waveformBox: {
+    width: "100%",
+    height: 100, // 파형 높이 설정
+    marginLeft: 10,
+  },
+  bottomButtonBox: {
+    width: "100%",
+    height: "100%",
+    display: 'flex',
+    alignItems: 'center',
+    zIndex: 5
+  },
+});
+
+const WaveSurferWithoutStar = (props) => {
+  const {classes, audioBlob, setCurrentTime, setDuration} = props
+  const waveform = useRef(null);
+  const wavesurfer = useRef(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  useEffect(() => {
+    if(waveform.current){
+      wavesurfer.current =
+        WaveSurfer.create({
+          container: waveform.current,
+          barWidth: 4,
+          barHeight: 1,
+          barGap: 2,
+          progressColor: theme.palette.primary.main,
+          waveColor: theme.palette.secondary.main,
+          width: '100%'
+        });
+      wavesurfer.current.loadBlob(audioBlob);
+      wavesurfer.current.on('ready', () => {
+        wavesurfer.current.setVolume(0.5);
+        wavesurfer.current.pause();
+        if (setDuration){
+          setDuration(wavesurfer.current.getDuration());
+        }
+      });
+
+      wavesurfer.current.on('audioprocess', () => {
+        if (setCurrentTime) {
+          setCurrentTime(wavesurfer.current.getCurrentTime());
+        }
+      });
+
+      wavesurfer.current.on("finish", () => {
+        wavesurfer.current.seekTo(0);
+        wavesurfer.current.pause();
+        setIsPlaying(false);
+      });
+    }
+  },[audioBlob, setCurrentTime, setDuration])
+
+  const buttonClick = (event) => {
+    event.preventDefault();
+    if (wavesurfer.current) {
+      if (isPlaying) {
+        wavesurfer.current.pause();
+      } else {
+        wavesurfer.current.play();
+      }
+      setIsPlaying(!isPlaying);
+    }
+  }
+
+  return (
+    <Box className={classes.waveSurferContainer}>
+      <Box className={classes.waveformBox} ref={waveform} />
+      <Box className={classes.bottomButtonBox}>
+        <IconButton onClick={buttonClick}>
+          {isPlaying ? <PauseCircle/> : <PlayCircle/>}
+        </IconButton>
+      </Box>
+    </Box>
+  );
+}
+
+
+export default withStyles(styles, { withTheme: true })(WaveSurferWithoutStar);