Snackbar loading

frontend/src/components/Signup.tsx

@@ -53,27 +53,6 @@ const SignUp = forwardRef(function SignUp(props, ref: ForwardedRef<HTMLElement>)
         </Typography>
         <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 3 }}>
           <Grid container spacing={2}>
-            <Grid item xs={12} sm={6}>
-              <TextField
-                autoComplete="given-name"
-                name="firstName"
-                required
-                fullWidth
-                id="firstName"
-                label="First Name"
-                autoFocus
-              />
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <TextField
-                required
-                fullWidth
-                id="lastName"
-                label="Last Name"
-                name="lastName"
-                autoComplete="family-name"
-              />
-            </Grid>
             <Grid item xs={12}>
               <TextField
                 required

frontend/src/components/Snackbars.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import Stack from "@mui/material/Stack";
+import Button from "@mui/material/Button";
+import Snackbar from "@mui/material/Snackbar";
+import MuiAlert, { AlertProps } from "@mui/material/Alert";
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(props, ref) {
+  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
+});
+
+export default function Snackbars() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClick = () => {
+    setOpen(true);
+  };
+
+  const handleClose = (event?: React.SyntheticEvent | Event, reason?: string) => {
+    if (reason === "clickaway") {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  return (
+    <Stack spacing={2} sx={{ width: "100%" }}>
+      <Button variant="outlined" onClick={handleClick}>
+        Open success snackbar
+      </Button>
+      <Snackbar open={open} autoHideDuration={3000} onClose={handleClose}>
+        <Alert onClose={handleClose} severity="info" sx={{ width: "100%" }}>
+          This is a success message!
+        </Alert>
+      </Snackbar>
+      <Alert severity="error">This is an error message!</Alert>
+      <Alert severity="warning">This is a warning message!</Alert>
+      <Alert severity="info">This is an information message!</Alert>
+      <Alert severity="success">This is a success message!</Alert>
+    </Stack>
+  );
+}

frontend/src/components/index.ts

@@ -8,8 +8,9 @@ import DayOfWeek from "./DayOfWeek";
 import Genres from "./Genres";
 import Platforms from "./Platforms";
 import CommentBox from "./CommentBox";
-
+import Snackbars from "./Snackbars";
 export {
+  Snackbars,
   CommentBox,
   WebtoonDetail,
   Header,

frontend/src/pages/TestPage.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import { Snackbars } from "@src/components";
 
 const TestPage = () => {
   const [count, setCount] = useState(0);
@@ -7,12 +8,7 @@ const TestPage = () => {
     setCount(2);
     setCount(3);
   };
-  return (
-    <div>
-      <span>{count}</span>
-      <button onClick={handleClick}>증가</button>
-    </div>
-  );
+  return <Snackbars />;
 };
 
 export default TestPage;

frontend/src/pages/WebtoonPage.tsx

@@ -39,7 +39,6 @@ const WebtoonPage = () => {
       });
       const data = response.data;
       setWebtoonDetail(data);
-      console.log(data);
     } catch (error) {
       navigate("/");
       console.log(error);