Merge pull request #124 from falconlee236/feat/sound-generation-ui

[FEAT] 효과음 생성 UI 구현

src/logged_out/components/Main.js

@@ -52,6 +52,12 @@ function Main(props) {
     setSelectedTab("SoundList");
   }, [setSelectedTab]);
 
+  const selectSoundGen = useCallback(() => {
+    smoothScrollTop();
+    document.title = "AULO - SoundGen";
+    setSelectedTab("SoundGen");
+  }, [setSelectedTab]);
+
   const selectProfile = useCallback(() => {
     smoothScrollTop();
     document.title = "AULO - Profile";
@@ -288,6 +294,7 @@ function Main(props) {
         selectHome={selectHome}
         selectSoundList={selectSoundList}
         selectProfile={selectProfile}
+        selectSoundGen={selectSoundGen}
         setPage={setPage}
         page={page}
         filterList={filterList}

src/logged_out/components/Routing.js

@@ -8,9 +8,10 @@ import SoundListPost from "./soundList/SoundListPost";
 import useLocationBlocker from "../../shared/functions/useLocationBlocker";
 import Profile from "./home/Profile";
 import Result from "./result/Result";
+import SoundGen from "./soundGen/SoundGen";
 
 function Routing(props) {
-  const { soundListPosts, selectSoundList, selectHome, selectProfile,
+  const { soundListPosts, selectSoundList, selectHome, selectProfile, selectSoundGen,
     setPage, page, filterList, setFilterList, setSoundListPosts } = props;
   useLocationBlocker();
   return (
@@ -57,6 +58,7 @@ function Routing(props) {
             setSoundListPosts={setSoundListPosts}
           />
       }
+      <PropsRoute path="/soundGen" component={SoundGen} selectSoundGen={selectSoundGen} />
       <PropsRoute path="/result" component={Result} setSoundListPosts={setSoundListPosts} />
       <PropsRoute path="/" component={Home} selectHome={selectHome} />
     </Switch>

src/logged_out/components/navigation/NavBar.js

@@ -6,7 +6,9 @@ import withStyles from '@mui/styles/withStyles';
 import MenuIcon from "@mui/icons-material/Menu";
 import HomeIcon from "@mui/icons-material/Home";
 import LockOpenIcon from "@mui/icons-material/LockOpen";
-import BookIcon from "@mui/icons-material/Book";
+import LyricsIcon from '@mui/icons-material/Lyrics';
+import AudioFileIcon from '@mui/icons-material/AudioFile';
+import AssignmentIndIcon from '@mui/icons-material/AssignmentInd';
 import NavigationDrawer from "../../../shared/components/NavigationDrawer";
 
 const styles = theme => ({
@@ -60,10 +62,17 @@ function NavBar(props) {
     {
       link: "/soundList",
       name: "soundList",
-      icon: <BookIcon className="text-white" />,
+      icon: <AudioFileIcon className="text-white" />,
       src: `${process.env.PUBLIC_URL}/images/logged_out/soundlist.png`,
       color: "#949494"
     },
+    {
+      link: "/soundGen",
+      name: "soundGen",
+      icon: <LyricsIcon className="text-white" />,
+      src: `${process.env.PUBLIC_URL}/images/logged_out/soundGen.png`,
+      color: "#949494"
+    },
     {
       name: "Login",
       onClick: openLoginDialog,
@@ -74,7 +83,7 @@ function NavBar(props) {
     {
       link: "/profile",
       name: "profile",
-      icon: <BookIcon className="text-white" />,
+      icon: <AssignmentIndIcon className="text-white" />,
       src: `${process.env.PUBLIC_URL}/images/logged_out/profile.png`,
       color: "#949494"
     },
@@ -83,7 +92,6 @@ function NavBar(props) {
     <div className={classes.root}>
       <AppBar position="fixed" className={classes.appBar}>
         <Toolbar className={classes.toolbar}>
-          {/* 2 * 2 pixel size*/}
           <div className={classes.logoWrapper}>
             <img
               src={`${process.env.PUBLIC_URL}/images/logged_out/radio.png`}

src/logged_out/components/soundGen/SoundGen.js

@@ -0,0 +1,116 @@
+import React, {useEffect, useState} from "react";
+import withStyles from "@mui/styles/withStyles";
+import {Box, Typography} from "@mui/material";
+import axios from "axios";
+
+const styles = () => ({
+  container: {
+    height: "100vh",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "1rem",
+  },
+  headingContainer: {
+    width: "800px",
+    textAlign: "center",
+    display: "flex",
+    justifyContent: "center",
+  },
+  logoContainer: {
+    width: "100%",
+    fontFamily: "'Orbitron', cursive",
+    fontWeight: 500
+  },
+  innerContainer: {
+    width: "50%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    border: "0.05rem solid #bfbfbf",
+    borderRadius: "1rem",
+    padding: "1rem",
+    boxShadow: "0px 4px 16px 0px #bfbfbf"
+  },
+  searchBar: {
+    width: "100%",
+    backgroundColor: "transparent",
+    border: "none",
+    fontFamily: 'Roboto',
+    fontSize: "1rem",
+    color: "#64748b",
+    outline: "none",
+    "&:hover": {
+      outline: "none",
+    }
+  },
+  searchIcon: {
+    width: "1rem",
+    marginRight: "1rem",
+  },
+  searchContainer: {
+    display: "flex",
+    flexDirection: "row",
+    width: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: "0.5rem",
+  },
+});
+
+function SoundGen(props) {
+  const {classes,  selectSoundGen} = props;
+  const [input, setInput] = useState("");
+  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);
+    }
+  }
+
+  useEffect(() => {
+    selectSoundGen();
+  }, [selectSoundGen]);
+
+  return (
+    <Box className={classes.container}>
+      <Box className={classes.headingContainer}>
+        <Typography
+          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>
+        </Typography>
+      </Box>
+      <Box className={classes.innerContainer}>
+        <Box className={classes.searchContainer}>
+          <img
+            src="https://assets.ccbp.in/frontend/react-js/google-search-icon.png"
+            alt="search icon"
+            className={classes.searchIcon}
+          />
+          <input
+            type="search"
+            className={classes.searchBar}
+            value={input}
+            placeholder="Search Aulo"
+            onChange={inputChange}
+            onKeyDown={sendToServer}
+          />
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export default withStyles(styles, {withTheme: true})(SoundGen);