diff --git a/public/app.bundle.js b/public/app.bundle.js
index 1f7677bfdddee0cc1b4ef20be71e9ae8135ba24f..d10fa95b43b701c3d71496a95b0d88e11d516d45 100644
--- a/public/app.bundle.js
+++ b/public/app.bundle.js
@@ -174,17 +174,6 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
-/***/ "./node_modules/@mui/base/ClickAwayListener/ClickAwayListener.js":
-/*!***********************************************************************!*\
-  !*** ./node_modules/@mui/base/ClickAwayListener/ClickAwayListener.js ***!
-  \***********************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_6__);\n/* harmony import */ var _mui_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/utils */ \"./node_modules/@mui/utils/esm/useForkRef/useForkRef.js\");\n/* harmony import */ var _mui_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/utils */ \"./node_modules/@mui/utils/esm/useEventCallback/useEventCallback.js\");\n/* harmony import */ var _mui_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/utils */ \"./node_modules/@mui/utils/esm/ownerDocument/ownerDocument.js\");\n/* harmony import */ var _mui_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/utils */ \"./node_modules/@mui/utils/esm/elementAcceptingRef.js\");\n/* harmony import */ var _mui_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/utils */ \"./node_modules/@mui/utils/esm/exactProp/exactProp.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\n\n\n// TODO: return `EventHandlerName extends `on${infer EventName}` ? Lowercase<EventName> : never` once generatePropTypes runs with TS 4.1\n\nfunction mapEventPropToEvent(eventProp) {\n  return eventProp.substring(2).toLowerCase();\n}\nfunction clickedRootScrollbar(event, doc) {\n  return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;\n}\n/**\n * Listen for click events that occur somewhere in the document, outside of the element itself.\n * For instance, if you need to hide a menu when people click anywhere else on your page.\n *\n * Demos:\n *\n * - [Click-Away Listener](https://mui.com/base-ui/react-click-away-listener/)\n *\n * API:\n *\n * - [ClickAwayListener API](https://mui.com/base-ui/react-click-away-listener/components-api/#click-away-listener)\n */\nfunction ClickAwayListener(props) {\n  const {\n    children,\n    disableReactTree = false,\n    mouseEvent = 'onClick',\n    onClickAway,\n    touchEvent = 'onTouchEnd'\n  } = props;\n  const movedRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(false);\n  const nodeRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n  const activatedRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(false);\n  const syntheticEventRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(false);\n  react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\n    // Ensure that this component is not \"activated\" synchronously.\n    // https://github.com/facebook/react/issues/20074\n    setTimeout(() => {\n      activatedRef.current = true;\n    }, 0);\n    return () => {\n      activatedRef.current = false;\n    };\n  }, []);\n  const handleRef = (0,_mui_utils__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(\n  // @ts-expect-error TODO upstream fix\n  children.ref, nodeRef);\n\n  // The handler doesn't take event.defaultPrevented into account:\n  //\n  // event.preventDefault() is meant to stop default behaviors like\n  // clicking a checkbox to check it, hitting a button to submit a form,\n  // and hitting left arrow to move the cursor in a text input etc.\n  // Only special HTML elements have these default behaviors.\n  const handleClickAway = (0,_mui_utils__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(event => {\n    // Given developers can stop the propagation of the synthetic event,\n    // we can only be confident with a positive value.\n    const insideReactTree = syntheticEventRef.current;\n    syntheticEventRef.current = false;\n    const doc = (0,_mui_utils__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(nodeRef.current);\n\n    // 1. IE11 support, which trigger the handleClickAway even after the unbind\n    // 2. The child might render null.\n    // 3. Behave like a blur listener.\n    if (!activatedRef.current || !nodeRef.current || 'clientX' in event && clickedRootScrollbar(event, doc)) {\n      return;\n    }\n\n    // Do not act if user performed touchmove\n    if (movedRef.current) {\n      movedRef.current = false;\n      return;\n    }\n    let insideDOM;\n\n    // If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js\n    if (event.composedPath) {\n      insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;\n    } else {\n      insideDOM = !doc.documentElement.contains(\n      // @ts-expect-error returns `false` as intended when not dispatched from a Node\n      event.target) || nodeRef.current.contains(\n      // @ts-expect-error returns `false` as intended when not dispatched from a Node\n      event.target);\n    }\n    if (!insideDOM && (disableReactTree || !insideReactTree)) {\n      onClickAway(event);\n    }\n  });\n\n  // Keep track of mouse/touch events that bubbled up through the portal.\n  const createHandleSynthetic = handlerName => event => {\n    syntheticEventRef.current = true;\n    const childrenPropsHandler = children.props[handlerName];\n    if (childrenPropsHandler) {\n      childrenPropsHandler(event);\n    }\n  };\n  const childrenProps = {\n    ref: handleRef\n  };\n  if (touchEvent !== false) {\n    childrenProps[touchEvent] = createHandleSynthetic(touchEvent);\n  }\n  react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\n    if (touchEvent !== false) {\n      const mappedTouchEvent = mapEventPropToEvent(touchEvent);\n      const doc = (0,_mui_utils__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(nodeRef.current);\n      const handleTouchMove = () => {\n        movedRef.current = true;\n      };\n      doc.addEventListener(mappedTouchEvent, handleClickAway);\n      doc.addEventListener('touchmove', handleTouchMove);\n      return () => {\n        doc.removeEventListener(mappedTouchEvent, handleClickAway);\n        doc.removeEventListener('touchmove', handleTouchMove);\n      };\n    }\n    return undefined;\n  }, [handleClickAway, touchEvent]);\n  if (mouseEvent !== false) {\n    childrenProps[mouseEvent] = createHandleSynthetic(mouseEvent);\n  }\n  react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\n    if (mouseEvent !== false) {\n      const mappedMouseEvent = mapEventPropToEvent(mouseEvent);\n      const doc = (0,_mui_utils__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(nodeRef.current);\n      doc.addEventListener(mappedMouseEvent, handleClickAway);\n      return () => {\n        doc.removeEventListener(mappedMouseEvent, handleClickAway);\n      };\n    }\n    return undefined;\n  }, [handleClickAway, mouseEvent]);\n  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n    children: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.cloneElement(children, childrenProps)\n  });\n}\n true ? ClickAwayListener.propTypes /* remove-proptypes */ = {\n  // ----------------------------- Warning --------------------------------\n  // | These PropTypes are generated from the TypeScript type definitions |\n  // |     To update them edit TypeScript types and run \"yarn proptypes\"  |\n  // ----------------------------------------------------------------------\n  /**\n   * The wrapped element.\n   */\n  children: _mui_utils__WEBPACK_IMPORTED_MODULE_5__[\"default\"].isRequired,\n  /**\n   * If `true`, the React tree is ignored and only the DOM tree is considered.\n   * This prop changes how portaled elements are handled.\n   * @default false\n   */\n  disableReactTree: (prop_types__WEBPACK_IMPORTED_MODULE_6___default().bool),\n  /**\n   * The mouse event to listen to. You can disable the listener by providing `false`.\n   * @default 'onClick'\n   */\n  mouseEvent: prop_types__WEBPACK_IMPORTED_MODULE_6___default().oneOf(['onClick', 'onMouseDown', 'onMouseUp', 'onPointerDown', 'onPointerUp', false]),\n  /**\n   * Callback fired when a \"click away\" event is detected.\n   */\n  onClickAway: (prop_types__WEBPACK_IMPORTED_MODULE_6___default().func).isRequired,\n  /**\n   * The touch event to listen to. You can disable the listener by providing `false`.\n   * @default 'onTouchEnd'\n   */\n  touchEvent: prop_types__WEBPACK_IMPORTED_MODULE_6___default().oneOf(['onTouchEnd', 'onTouchStart', false])\n} : 0;\nif (true) {\n  // eslint-disable-next-line\n  ClickAwayListener['propTypes' + ''] = (0,_mui_utils__WEBPACK_IMPORTED_MODULE_7__[\"default\"])(ClickAwayListener.propTypes);\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ClickAwayListener);\n\n//# sourceURL=webpack://muibasic_starterkit/./node_modules/@mui/base/ClickAwayListener/ClickAwayListener.js?");
-
-/***/ }),
-
 /***/ "./node_modules/@mui/base/FocusTrap/FocusTrap.js":
 /*!*******************************************************!*\
   !*** ./node_modules/@mui/base/FocusTrap/FocusTrap.js ***!
@@ -251,17 +240,6 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
-/***/ "./node_modules/@mui/base/useSnackbar/useSnackbar.js":
-/*!***********************************************************!*\
-  !*** ./node_modules/@mui/base/useSnackbar/useSnackbar.js ***!
-  \***********************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ useSnackbar)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/extends */ \"./node_modules/@babel/runtime/helpers/esm/extends.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _mui_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/utils */ \"./node_modules/@mui/utils/esm/useEventCallback/useEventCallback.js\");\n/* harmony import */ var _utils_extractEventHandlers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils/extractEventHandlers */ \"./node_modules/@mui/base/utils/extractEventHandlers.js\");\n\n\n\n\n\n/**\n * The basic building block for creating custom snackbar.\n *\n * Demos:\n *\n * - [Snackbar](https://mui.com/base-ui/react-snackbar/#hook)\n *\n * API:\n *\n * - [useSnackbar API](https://mui.com/base-ui/react-snackbar/hooks-api/#use-snackbar)\n */\nfunction useSnackbar(parameters) {\n  const {\n    autoHideDuration = null,\n    disableWindowBlurListener = false,\n    onClose,\n    open,\n    resumeHideDuration\n  } = parameters;\n  const timerAutoHide = react__WEBPACK_IMPORTED_MODULE_1__.useRef();\n  react__WEBPACK_IMPORTED_MODULE_1__.useEffect(() => {\n    if (!open) {\n      return undefined;\n    }\n\n    /**\n     * @param {KeyboardEvent} nativeEvent\n     */\n    function handleKeyDown(nativeEvent) {\n      if (!nativeEvent.defaultPrevented) {\n        // IE11, Edge (prior to using Blink?) use 'Esc'\n        if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {\n          // not calling `preventDefault` since we don't know if people may ignore this event e.g. a permanently open snackbar\n          onClose == null ? void 0 : onClose(nativeEvent, 'escapeKeyDown');\n        }\n      }\n    }\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [open, onClose]);\n  const handleClose = (0,_mui_utils__WEBPACK_IMPORTED_MODULE_2__[\"default\"])((event, reason) => {\n    onClose == null ? void 0 : onClose(event, reason);\n  });\n  const setAutoHideTimer = (0,_mui_utils__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(autoHideDurationParam => {\n    if (!onClose || autoHideDurationParam == null) {\n      return;\n    }\n    clearTimeout(timerAutoHide.current);\n    timerAutoHide.current = setTimeout(() => {\n      handleClose(null, 'timeout');\n    }, autoHideDurationParam);\n  });\n  react__WEBPACK_IMPORTED_MODULE_1__.useEffect(() => {\n    if (open) {\n      setAutoHideTimer(autoHideDuration);\n    }\n    return () => {\n      clearTimeout(timerAutoHide.current);\n    };\n  }, [open, autoHideDuration, setAutoHideTimer]);\n  const handleClickAway = event => {\n    onClose == null ? void 0 : onClose(event, 'clickaway');\n  };\n\n  // Pause the timer when the user is interacting with the Snackbar\n  // or when the user hide the window.\n  const handlePause = () => {\n    clearTimeout(timerAutoHide.current);\n  };\n\n  // Restart the timer when the user is no longer interacting with the Snackbar\n  // or when the window is shown back.\n  const handleResume = react__WEBPACK_IMPORTED_MODULE_1__.useCallback(() => {\n    if (autoHideDuration != null) {\n      setAutoHideTimer(resumeHideDuration != null ? resumeHideDuration : autoHideDuration * 0.5);\n    }\n  }, [autoHideDuration, resumeHideDuration, setAutoHideTimer]);\n  const createHandleBlur = otherHandlers => event => {\n    const onBlurCallback = otherHandlers.onBlur;\n    onBlurCallback == null ? void 0 : onBlurCallback(event);\n    handleResume();\n  };\n  const createHandleFocus = otherHandlers => event => {\n    const onFocusCallback = otherHandlers.onFocus;\n    onFocusCallback == null ? void 0 : onFocusCallback(event);\n    handlePause();\n  };\n  const createMouseEnter = otherHandlers => event => {\n    const onMouseEnterCallback = otherHandlers.onMouseEnter;\n    onMouseEnterCallback == null ? void 0 : onMouseEnterCallback(event);\n    handlePause();\n  };\n  const createMouseLeave = otherHandlers => event => {\n    const onMouseLeaveCallback = otherHandlers.onMouseLeave;\n    onMouseLeaveCallback == null ? void 0 : onMouseLeaveCallback(event);\n    handleResume();\n  };\n  react__WEBPACK_IMPORTED_MODULE_1__.useEffect(() => {\n    // TODO: window global should be refactored here\n    if (!disableWindowBlurListener && open) {\n      window.addEventListener('focus', handleResume);\n      window.addEventListener('blur', handlePause);\n      return () => {\n        window.removeEventListener('focus', handleResume);\n        window.removeEventListener('blur', handlePause);\n      };\n    }\n    return undefined;\n  }, [disableWindowBlurListener, handleResume, open]);\n  const getRootProps = (otherHandlers = {}) => {\n    const propsEventHandlers = (0,_utils_extractEventHandlers__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(parameters);\n    const externalEventHandlers = (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__[\"default\"])({}, propsEventHandlers, otherHandlers);\n    return (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__[\"default\"])({\n      // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.\n      // See https://github.com/mui/material-ui/issues/29080\n      role: 'presentation'\n    }, externalEventHandlers, {\n      onBlur: createHandleBlur(externalEventHandlers),\n      onFocus: createHandleFocus(externalEventHandlers),\n      onMouseEnter: createMouseEnter(externalEventHandlers),\n      onMouseLeave: createMouseLeave(externalEventHandlers)\n    });\n  };\n  return {\n    getRootProps,\n    onClickAway: handleClickAway\n  };\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./node_modules/@mui/base/useSnackbar/useSnackbar.js?");
-
-/***/ }),
-
 /***/ "./node_modules/@mui/base/utils/ClassNameConfigurator.js":
 /*!***************************************************************!*\
   !*** ./node_modules/@mui/base/utils/ClassNameConfigurator.js ***!
@@ -1054,50 +1032,6 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
-/***/ "./node_modules/@mui/material/Snackbar/Snackbar.js":
-/*!*********************************************************!*\
-  !*** ./node_modules/@mui/material/Snackbar/Snackbar.js ***!
-  \*********************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js\");\n/* harmony import */ var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/esm/extends */ \"./node_modules/@babel/runtime/helpers/esm/extends.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_15___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_15__);\n/* harmony import */ var _mui_base__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/base */ \"./node_modules/@mui/utils/esm/composeClasses/composeClasses.js\");\n/* harmony import */ var _mui_base__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @mui/base */ \"./node_modules/@mui/base/utils/useSlotProps.js\");\n/* harmony import */ var _mui_base_ClickAwayListener__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @mui/base/ClickAwayListener */ \"./node_modules/@mui/base/ClickAwayListener/ClickAwayListener.js\");\n/* harmony import */ var _mui_base_useSnackbar__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @mui/base/useSnackbar */ \"./node_modules/@mui/base/useSnackbar/useSnackbar.js\");\n/* harmony import */ var _styles_styled__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../styles/styled */ \"./node_modules/@mui/material/styles/styled.js\");\n/* harmony import */ var _styles_useTheme__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../styles/useTheme */ \"./node_modules/@mui/material/styles/useTheme.js\");\n/* harmony import */ var _styles_useThemeProps__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../styles/useThemeProps */ \"./node_modules/@mui/material/styles/useThemeProps.js\");\n/* harmony import */ var _utils_capitalize__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../utils/capitalize */ \"./node_modules/@mui/material/utils/capitalize.js\");\n/* harmony import */ var _Grow__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../Grow */ \"./node_modules/@mui/material/Grow/Grow.js\");\n/* harmony import */ var _SnackbarContent__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../SnackbarContent */ \"./node_modules/@mui/material/SnackbarContent/SnackbarContent.js\");\n/* harmony import */ var _snackbarClasses__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./snackbarClasses */ \"./node_modules/@mui/material/Snackbar/snackbarClasses.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\nconst _excluded = [\"onEnter\", \"onExited\"],\n  _excluded2 = [\"action\", \"anchorOrigin\", \"autoHideDuration\", \"children\", \"className\", \"ClickAwayListenerProps\", \"ContentProps\", \"disableWindowBlurListener\", \"message\", \"onBlur\", \"onClose\", \"onFocus\", \"onMouseEnter\", \"onMouseLeave\", \"open\", \"resumeHideDuration\", \"TransitionComponent\", \"transitionDuration\", \"TransitionProps\"];\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst useUtilityClasses = ownerState => {\n  const {\n    classes,\n    anchorOrigin\n  } = ownerState;\n  const slots = {\n    root: ['root', `anchorOrigin${(0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(anchorOrigin.vertical)}${(0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(anchorOrigin.horizontal)}`]\n  };\n  return (0,_mui_base__WEBPACK_IMPORTED_MODULE_5__[\"default\"])(slots, _snackbarClasses__WEBPACK_IMPORTED_MODULE_6__.getSnackbarUtilityClass, classes);\n};\nconst SnackbarRoot = (0,_styles_styled__WEBPACK_IMPORTED_MODULE_7__[\"default\"])('div', {\n  name: 'MuiSnackbar',\n  slot: 'Root',\n  overridesResolver: (props, styles) => {\n    const {\n      ownerState\n    } = props;\n    return [styles.root, styles[`anchorOrigin${(0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(ownerState.anchorOrigin.vertical)}${(0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(ownerState.anchorOrigin.horizontal)}`]];\n  }\n})(({\n  theme,\n  ownerState\n}) => {\n  const center = {\n    left: '50%',\n    right: 'auto',\n    transform: 'translateX(-50%)'\n  };\n  return (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({\n    zIndex: (theme.vars || theme).zIndex.snackbar,\n    position: 'fixed',\n    display: 'flex',\n    left: 8,\n    right: 8,\n    justifyContent: 'center',\n    alignItems: 'center'\n  }, ownerState.anchorOrigin.vertical === 'top' ? {\n    top: 8\n  } : {\n    bottom: 8\n  }, ownerState.anchorOrigin.horizontal === 'left' && {\n    justifyContent: 'flex-start'\n  }, ownerState.anchorOrigin.horizontal === 'right' && {\n    justifyContent: 'flex-end'\n  }, {\n    [theme.breakpoints.up('sm')]: (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({}, ownerState.anchorOrigin.vertical === 'top' ? {\n      top: 24\n    } : {\n      bottom: 24\n    }, ownerState.anchorOrigin.horizontal === 'center' && center, ownerState.anchorOrigin.horizontal === 'left' && {\n      left: 24,\n      right: 'auto'\n    }, ownerState.anchorOrigin.horizontal === 'right' && {\n      right: 24,\n      left: 'auto'\n    })\n  });\n});\nconst Snackbar = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.forwardRef(function Snackbar(inProps, ref) {\n  const props = (0,_styles_useThemeProps__WEBPACK_IMPORTED_MODULE_8__[\"default\"])({\n    props: inProps,\n    name: 'MuiSnackbar'\n  });\n  const theme = (0,_styles_useTheme__WEBPACK_IMPORTED_MODULE_9__[\"default\"])();\n  const defaultTransitionDuration = {\n    enter: theme.transitions.duration.enteringScreen,\n    exit: theme.transitions.duration.leavingScreen\n  };\n  const {\n      action,\n      anchorOrigin: {\n        vertical,\n        horizontal\n      } = {\n        vertical: 'bottom',\n        horizontal: 'left'\n      },\n      autoHideDuration = null,\n      children,\n      className,\n      ClickAwayListenerProps,\n      ContentProps,\n      disableWindowBlurListener = false,\n      message,\n      open,\n      TransitionComponent = _Grow__WEBPACK_IMPORTED_MODULE_10__[\"default\"],\n      transitionDuration = defaultTransitionDuration,\n      TransitionProps: {\n        onEnter,\n        onExited\n      } = {}\n    } = props,\n    TransitionProps = (0,_babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(props.TransitionProps, _excluded),\n    other = (0,_babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(props, _excluded2);\n  const ownerState = (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({}, props, {\n    anchorOrigin: {\n      vertical,\n      horizontal\n    },\n    autoHideDuration,\n    disableWindowBlurListener,\n    TransitionComponent,\n    transitionDuration\n  });\n  const classes = useUtilityClasses(ownerState);\n  const {\n    getRootProps,\n    onClickAway\n  } = (0,_mui_base_useSnackbar__WEBPACK_IMPORTED_MODULE_11__[\"default\"])((0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({}, ownerState));\n  const [exited, setExited] = react__WEBPACK_IMPORTED_MODULE_2__.useState(true);\n  const rootProps = (0,_mui_base__WEBPACK_IMPORTED_MODULE_12__[\"default\"])({\n    elementType: SnackbarRoot,\n    getSlotProps: getRootProps,\n    externalForwardedProps: other,\n    ownerState,\n    additionalProps: {\n      ref\n    },\n    className: [classes.root, className]\n  });\n  const handleExited = node => {\n    setExited(true);\n    if (onExited) {\n      onExited(node);\n    }\n  };\n  const handleEnter = (node, isAppearing) => {\n    setExited(false);\n    if (onEnter) {\n      onEnter(node, isAppearing);\n    }\n  };\n\n  // So we only render active snackbars.\n  if (!open && exited) {\n    return null;\n  }\n  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_mui_base_ClickAwayListener__WEBPACK_IMPORTED_MODULE_13__[\"default\"], (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({\n    onClickAway: onClickAway\n  }, ClickAwayListenerProps, {\n    children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(SnackbarRoot, (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({}, rootProps, {\n      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(TransitionComponent, (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({\n        appear: true,\n        in: open,\n        timeout: transitionDuration,\n        direction: vertical === 'top' ? 'down' : 'up',\n        onEnter: handleEnter,\n        onExited: handleExited\n      }, TransitionProps, {\n        children: children || /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_SnackbarContent__WEBPACK_IMPORTED_MODULE_14__[\"default\"], (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({\n          message: message,\n          action: action\n        }, ContentProps))\n      }))\n    }))\n  }));\n});\n true ? Snackbar.propTypes /* remove-proptypes */ = {\n  // ----------------------------- Warning --------------------------------\n  // | These PropTypes are generated from the TypeScript type definitions |\n  // |     To update them edit the d.ts file and run \"yarn proptypes\"     |\n  // ----------------------------------------------------------------------\n  /**\n   * The action to display. It renders after the message, at the end of the snackbar.\n   */\n  action: (prop_types__WEBPACK_IMPORTED_MODULE_15___default().node),\n  /**\n   * The anchor of the `Snackbar`.\n   * On smaller screens, the component grows to occupy all the available width,\n   * the horizontal alignment is ignored.\n   * @default { vertical: 'bottom', horizontal: 'left' }\n   */\n  anchorOrigin: prop_types__WEBPACK_IMPORTED_MODULE_15___default().shape({\n    horizontal: prop_types__WEBPACK_IMPORTED_MODULE_15___default().oneOf(['center', 'left', 'right']).isRequired,\n    vertical: prop_types__WEBPACK_IMPORTED_MODULE_15___default().oneOf(['bottom', 'top']).isRequired\n  }),\n  /**\n   * The number of milliseconds to wait before automatically calling the\n   * `onClose` function. `onClose` should then set the state of the `open`\n   * prop to hide the Snackbar. This behavior is disabled by default with\n   * the `null` value.\n   * @default null\n   */\n  autoHideDuration: (prop_types__WEBPACK_IMPORTED_MODULE_15___default().number),\n  /**\n   * Replace the `SnackbarContent` component.\n   */\n  children: (prop_types__WEBPACK_IMPORTED_MODULE_15___default().element),\n  /**\n   * Override or extend the styles applied to the component.\n   */\n  classes: (prop_types__WEBPACK_IMPORTED_MODULE_15___default().object),\n  /**\n   * @ignore\n   */\n  className: (prop_types__WEBPACK_IMPORTED_MODULE_15___default().string),\n  /**\n   * Props applied to the `ClickAwayListener` element.\n   */\n  ClickAwayListenerProps: (prop_types__WEBPACK_IMPORTED_MODULE_15___default().object),\n  /**\n   * Props applied to the [`SnackbarContent`](/material-ui/api/snackbar-content/) element.\n   */\n  ContentProps: (prop_types__WEBPACK_IMPORTED_MODULE_15___default().object),\n  /**\n   * If `true`, the `autoHideDuration` timer will expire even if the window is not focused.\n   * @default false\n   */\n  disableWindowBlurListener: (prop_types__WEBPACK_IMPORTED_MODULE_15___default().bool),\n  /**\n   * When displaying multiple consecutive Snackbars from a parent rendering a single\n   * <Snackbar/>, add the key prop to ensure independent treatment of each message.\n   * e.g. <Snackbar key={message} />, otherwise, the message may update-in-place and\n   * features such as autoHideDuration may be canceled.\n   */\n  key: () => null,\n  /**\n   * The message to display.\n   */\n  message: (prop_types__WEBPACK_IMPORTED_MODULE_15___default().node),\n  /**\n   * @ignore\n   */\n  onBlur: (prop_types__WEBPACK_IMPORTED_MODULE_15___default().func),\n  /**\n   * Callback fired when the component requests to be closed.\n   * Typically `onClose` is used to set state in the parent component,\n   * which is used to control the `Snackbar` `open` prop.\n   * The `reason` parameter can optionally be used to control the response to `onClose`,\n   * for example ignoring `clickaway`.\n   *\n   * @param {React.SyntheticEvent<any> | Event} event The event source of the callback.\n   * @param {string} reason Can be: `\"timeout\"` (`autoHideDuration` expired), `\"clickaway\"`, or `\"escapeKeyDown\"`.\n   */\n  onClose: (prop_types__WEBPACK_IMPORTED_MODULE_15___default().func),\n  /**\n   * @ignore\n   */\n  onFocus: (prop_types__WEBPACK_IMPORTED_MODULE_15___default().func),\n  /**\n   * @ignore\n   */\n  onMouseEnter: (prop_types__WEBPACK_IMPORTED_MODULE_15___default().func),\n  /**\n   * @ignore\n   */\n  onMouseLeave: (prop_types__WEBPACK_IMPORTED_MODULE_15___default().func),\n  /**\n   * If `true`, the component is shown.\n   */\n  open: (prop_types__WEBPACK_IMPORTED_MODULE_15___default().bool),\n  /**\n   * The number of milliseconds to wait before dismissing after user interaction.\n   * If `autoHideDuration` prop isn't specified, it does nothing.\n   * If `autoHideDuration` prop is specified but `resumeHideDuration` isn't,\n   * we default to `autoHideDuration / 2` ms.\n   */\n  resumeHideDuration: (prop_types__WEBPACK_IMPORTED_MODULE_15___default().number),\n  /**\n   * The system prop that allows defining system overrides as well as additional CSS styles.\n   */\n  sx: prop_types__WEBPACK_IMPORTED_MODULE_15___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_15___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_15___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_15___default().func), (prop_types__WEBPACK_IMPORTED_MODULE_15___default().object), (prop_types__WEBPACK_IMPORTED_MODULE_15___default().bool)])), (prop_types__WEBPACK_IMPORTED_MODULE_15___default().func), (prop_types__WEBPACK_IMPORTED_MODULE_15___default().object)]),\n  /**\n   * The component used for the transition.\n   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.\n   * @default Grow\n   */\n  TransitionComponent: (prop_types__WEBPACK_IMPORTED_MODULE_15___default().elementType),\n  /**\n   * The duration for the transition, in milliseconds.\n   * You may specify a single timeout for all transitions, or individually with an object.\n   * @default {\n   *   enter: theme.transitions.duration.enteringScreen,\n   *   exit: theme.transitions.duration.leavingScreen,\n   * }\n   */\n  transitionDuration: prop_types__WEBPACK_IMPORTED_MODULE_15___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_15___default().number), prop_types__WEBPACK_IMPORTED_MODULE_15___default().shape({\n    appear: (prop_types__WEBPACK_IMPORTED_MODULE_15___default().number),\n    enter: (prop_types__WEBPACK_IMPORTED_MODULE_15___default().number),\n    exit: (prop_types__WEBPACK_IMPORTED_MODULE_15___default().number)\n  })]),\n  /**\n   * Props applied to the transition element.\n   * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.\n   * @default {}\n   */\n  TransitionProps: (prop_types__WEBPACK_IMPORTED_MODULE_15___default().object)\n} : 0;\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Snackbar);\n\n//# sourceURL=webpack://muibasic_starterkit/./node_modules/@mui/material/Snackbar/Snackbar.js?");
-
-/***/ }),
-
-/***/ "./node_modules/@mui/material/Snackbar/snackbarClasses.js":
-/*!****************************************************************!*\
-  !*** ./node_modules/@mui/material/Snackbar/snackbarClasses.js ***!
-  \****************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   getSnackbarUtilityClass: () => (/* binding */ getSnackbarUtilityClass)\n/* harmony export */ });\n/* harmony import */ var _mui_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @mui/utils */ \"./node_modules/@mui/utils/esm/generateUtilityClasses/generateUtilityClasses.js\");\n/* harmony import */ var _generateUtilityClass__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../generateUtilityClass */ \"./node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js\");\n\n\nfunction getSnackbarUtilityClass(slot) {\n  return (0,_generateUtilityClass__WEBPACK_IMPORTED_MODULE_0__[\"default\"])('MuiSnackbar', slot);\n}\nconst snackbarClasses = (0,_mui_utils__WEBPACK_IMPORTED_MODULE_1__[\"default\"])('MuiSnackbar', ['root', 'anchorOriginTopCenter', 'anchorOriginBottomCenter', 'anchorOriginTopRight', 'anchorOriginBottomRight', 'anchorOriginTopLeft', 'anchorOriginBottomLeft']);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (snackbarClasses);\n\n//# sourceURL=webpack://muibasic_starterkit/./node_modules/@mui/material/Snackbar/snackbarClasses.js?");
-
-/***/ }),
-
-/***/ "./node_modules/@mui/material/SnackbarContent/SnackbarContent.js":
-/*!***********************************************************************!*\
-  !*** ./node_modules/@mui/material/SnackbarContent/SnackbarContent.js ***!
-  \***********************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js\");\n/* harmony import */ var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/esm/extends */ \"./node_modules/@babel/runtime/helpers/esm/extends.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_11__);\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! clsx */ \"./node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var _mui_base__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/base */ \"./node_modules/@mui/utils/esm/composeClasses/composeClasses.js\");\n/* harmony import */ var _mui_system__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/system */ \"./node_modules/@mui/system/esm/colorManipulator.js\");\n/* harmony import */ var _styles_styled__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../styles/styled */ \"./node_modules/@mui/material/styles/styled.js\");\n/* harmony import */ var _styles_useThemeProps__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../styles/useThemeProps */ \"./node_modules/@mui/material/styles/useThemeProps.js\");\n/* harmony import */ var _Paper__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Paper */ \"./node_modules/@mui/material/Paper/Paper.js\");\n/* harmony import */ var _snackbarContentClasses__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./snackbarContentClasses */ \"./node_modules/@mui/material/SnackbarContent/snackbarContentClasses.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\nconst _excluded = [\"action\", \"className\", \"message\", \"role\"];\n\n\n\n\n\n\n\n\n\n\n\nconst useUtilityClasses = ownerState => {\n  const {\n    classes\n  } = ownerState;\n  const slots = {\n    root: ['root'],\n    action: ['action'],\n    message: ['message']\n  };\n  return (0,_mui_base__WEBPACK_IMPORTED_MODULE_5__[\"default\"])(slots, _snackbarContentClasses__WEBPACK_IMPORTED_MODULE_6__.getSnackbarContentUtilityClass, classes);\n};\nconst SnackbarContentRoot = (0,_styles_styled__WEBPACK_IMPORTED_MODULE_7__[\"default\"])(_Paper__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n  name: 'MuiSnackbarContent',\n  slot: 'Root',\n  overridesResolver: (props, styles) => styles.root\n})(({\n  theme\n}) => {\n  const emphasis = theme.palette.mode === 'light' ? 0.8 : 0.98;\n  const backgroundColor = (0,_mui_system__WEBPACK_IMPORTED_MODULE_9__.emphasize)(theme.palette.background.default, emphasis);\n  return (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({}, theme.typography.body2, {\n    color: theme.vars ? theme.vars.palette.SnackbarContent.color : theme.palette.getContrastText(backgroundColor),\n    backgroundColor: theme.vars ? theme.vars.palette.SnackbarContent.bg : backgroundColor,\n    display: 'flex',\n    alignItems: 'center',\n    flexWrap: 'wrap',\n    padding: '6px 16px',\n    borderRadius: (theme.vars || theme).shape.borderRadius,\n    flexGrow: 1,\n    [theme.breakpoints.up('sm')]: {\n      flexGrow: 'initial',\n      minWidth: 288\n    }\n  });\n});\nconst SnackbarContentMessage = (0,_styles_styled__WEBPACK_IMPORTED_MODULE_7__[\"default\"])('div', {\n  name: 'MuiSnackbarContent',\n  slot: 'Message',\n  overridesResolver: (props, styles) => styles.message\n})({\n  padding: '8px 0'\n});\nconst SnackbarContentAction = (0,_styles_styled__WEBPACK_IMPORTED_MODULE_7__[\"default\"])('div', {\n  name: 'MuiSnackbarContent',\n  slot: 'Action',\n  overridesResolver: (props, styles) => styles.action\n})({\n  display: 'flex',\n  alignItems: 'center',\n  marginLeft: 'auto',\n  paddingLeft: 16,\n  marginRight: -8\n});\nconst SnackbarContent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.forwardRef(function SnackbarContent(inProps, ref) {\n  const props = (0,_styles_useThemeProps__WEBPACK_IMPORTED_MODULE_10__[\"default\"])({\n    props: inProps,\n    name: 'MuiSnackbarContent'\n  });\n  const {\n      action,\n      className,\n      message,\n      role = 'alert'\n    } = props,\n    other = (0,_babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(props, _excluded);\n  const ownerState = props;\n  const classes = useUtilityClasses(ownerState);\n  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(SnackbarContentRoot, (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({\n    role: role,\n    square: true,\n    elevation: 6,\n    className: (0,clsx__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(classes.root, className),\n    ownerState: ownerState,\n    ref: ref\n  }, other, {\n    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(SnackbarContentMessage, {\n      className: classes.message,\n      ownerState: ownerState,\n      children: message\n    }), action ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(SnackbarContentAction, {\n      className: classes.action,\n      ownerState: ownerState,\n      children: action\n    }) : null]\n  }));\n});\n true ? SnackbarContent.propTypes /* remove-proptypes */ = {\n  // ----------------------------- Warning --------------------------------\n  // | These PropTypes are generated from the TypeScript type definitions |\n  // |     To update them edit the d.ts file and run \"yarn proptypes\"     |\n  // ----------------------------------------------------------------------\n  /**\n   * The action to display. It renders after the message, at the end of the snackbar.\n   */\n  action: (prop_types__WEBPACK_IMPORTED_MODULE_11___default().node),\n  /**\n   * Override or extend the styles applied to the component.\n   */\n  classes: (prop_types__WEBPACK_IMPORTED_MODULE_11___default().object),\n  /**\n   * @ignore\n   */\n  className: (prop_types__WEBPACK_IMPORTED_MODULE_11___default().string),\n  /**\n   * The message to display.\n   */\n  message: (prop_types__WEBPACK_IMPORTED_MODULE_11___default().node),\n  /**\n   * The ARIA role attribute of the element.\n   * @default 'alert'\n   */\n  role: (prop_types__WEBPACK_IMPORTED_MODULE_11___default().string),\n  /**\n   * The system prop that allows defining system overrides as well as additional CSS styles.\n   */\n  sx: prop_types__WEBPACK_IMPORTED_MODULE_11___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_11___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_11___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_11___default().func), (prop_types__WEBPACK_IMPORTED_MODULE_11___default().object), (prop_types__WEBPACK_IMPORTED_MODULE_11___default().bool)])), (prop_types__WEBPACK_IMPORTED_MODULE_11___default().func), (prop_types__WEBPACK_IMPORTED_MODULE_11___default().object)])\n} : 0;\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SnackbarContent);\n\n//# sourceURL=webpack://muibasic_starterkit/./node_modules/@mui/material/SnackbarContent/SnackbarContent.js?");
-
-/***/ }),
-
-/***/ "./node_modules/@mui/material/SnackbarContent/snackbarContentClasses.js":
-/*!******************************************************************************!*\
-  !*** ./node_modules/@mui/material/SnackbarContent/snackbarContentClasses.js ***!
-  \******************************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   getSnackbarContentUtilityClass: () => (/* binding */ getSnackbarContentUtilityClass)\n/* harmony export */ });\n/* harmony import */ var _mui_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @mui/utils */ \"./node_modules/@mui/utils/esm/generateUtilityClasses/generateUtilityClasses.js\");\n/* harmony import */ var _generateUtilityClass__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../generateUtilityClass */ \"./node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js\");\n\n\nfunction getSnackbarContentUtilityClass(slot) {\n  return (0,_generateUtilityClass__WEBPACK_IMPORTED_MODULE_0__[\"default\"])('MuiSnackbarContent', slot);\n}\nconst snackbarContentClasses = (0,_mui_utils__WEBPACK_IMPORTED_MODULE_1__[\"default\"])('MuiSnackbarContent', ['root', 'message', 'action']);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (snackbarContentClasses);\n\n//# sourceURL=webpack://muibasic_starterkit/./node_modules/@mui/material/SnackbarContent/snackbarContentClasses.js?");
-
-/***/ }),
-
 /***/ "./node_modules/@mui/material/SvgIcon/SvgIcon.js":
 /*!*******************************************************!*\
   !*** ./node_modules/@mui/material/SvgIcon/SvgIcon.js ***!
@@ -2337,7 +2271,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ App)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _SearchPage__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SearchPage */ \"./src/SearchPage.js\");\n/* harmony import */ var _Favorites__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Favorites */ \"./src/Favorites.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CssBaseline/CssBaseline.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/AppBar/AppBar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tabs/Tabs.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tab/Tab.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n/*\nimport React, { useState } from 'react';\nimport SearchPage from './SearchPage';\nimport Favorites from './Favorites';\nimport { Box, Tabs, Tab, Typography, AppBar, CssBaseline } from '@mui/material';\n\nconst TABS = [\n  { label: 'Search Music', component: SearchPage },\n  { label: 'Favorites', component: Favorites },\n  { label: 'More Contents', component: () => <Typography align=\"center\" variant=\"h2\"> Item Three</Typography> },\n];\n\nexport default function App() {\n  const [currentTab, setCurrentTab] = useState(0);\n  const [searchResult, setSearchResult] = useState([]);\n  const [likes, setLikes] = useState({});\n  const [favoriteList, setFavoriteList] = useState([]);\n\n  const handleTabChange = (event, newValue) => {\n    setCurrentTab(newValue);\n  };\n\n  const addToFavoriteList = (item) => {\n    setFavoriteList((prevList) => [...prevList, item]);\n  };\n\n  const handleLikes = (id) => {\n    setLikes((prevLikes) => ({ ...prevLikes, [id]: !prevLikes[id] }));\n  };\n\n  const removeFromFavoriteList = (id) => {\n    setFavoriteList((prevList) => prevList.filter((item) => item.collectionId !== id));\n  };\n\n  const TabComponent = TABS[currentTab].component;\n\n  return (\n    <React.Fragment>\n      <CssBaseline />\n      <AppBar position=\"fixed\">\n        <Typography align=\"center\" variant=\"h3\" color=\"inherit\">Tae Wook's Favorite Music</Typography>\n      </AppBar>\n      <div style={{ height: 60, width: '100%' }}></div>\n      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>\n        <Tabs value={currentTab} onChange={handleTabChange} aria-label=\"basic tabs\" centered>\n          {TABS.map((tab, index) => <Tab key={index} label={tab.label} value={index} />)}\n        </Tabs>\n      </Box>\n      <TabComponent\n        list={searchResult}\n        onSearch={setSearchResult}\n        favoriteList={favoriteList}\n        addToFavoriteList={addToFavoriteList}\n        likes={likes}\n        handleLikes={handleLikes}\n        removeFromFavoriteList={removeFromFavoriteList}\n      />\n    </React.Fragment>\n  );\n}\n*/\n\n\n\n\n\nvar TABS = [{\n  label: 'Search Music',\n  component: _SearchPage__WEBPACK_IMPORTED_MODULE_1__[\"default\"]\n}, {\n  label: 'Favorites',\n  component: _Favorites__WEBPACK_IMPORTED_MODULE_2__[\"default\"]\n}, {\n  label: 'More Contents',\n  component: function component() {\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n      align: \"center\",\n      variant: \"h2\"\n    }, \" Item Three\");\n  }\n}];\nfunction App() {\n  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0),\n    _useState2 = _slicedToArray(_useState, 2),\n    currentTab = _useState2[0],\n    setCurrentTab = _useState2[1];\n  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),\n    _useState4 = _slicedToArray(_useState3, 2),\n    searchResult = _useState4[0],\n    setSearchResult = _useState4[1];\n  var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({}),\n    _useState6 = _slicedToArray(_useState5, 2),\n    likes = _useState6[0],\n    setLikes = _useState6[1];\n  var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),\n    _useState8 = _slicedToArray(_useState7, 2),\n    favoriteList = _useState8[0],\n    setFavoriteList = _useState8[1];\n  var handleTabChange = function handleTabChange(event, newValue) {\n    setCurrentTab(newValue);\n  };\n  var addToFavoriteList = function addToFavoriteList(item) {\n    setFavoriteList(function (prevList) {\n      return [].concat(_toConsumableArray(prevList), [item]);\n    });\n  };\n  var handleLikes = function handleLikes(id) {\n    setLikes(function (prevLikes) {\n      return _objectSpread(_objectSpread({}, prevLikes), {}, _defineProperty({}, id, !prevLikes[id]));\n    });\n  };\n  var removeFromFavoriteList = function removeFromFavoriteList(id) {\n    setFavoriteList(function (prevList) {\n      return prevList.filter(function (item) {\n        return item.collectionId !== id;\n      });\n    });\n  };\n  var TabComponent = TABS[currentTab].component;\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n    position: \"fixed\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n    align: \"center\",\n    variant: \"h3\",\n    color: \"inherit\"\n  }, \"Tae Wook's Favorite Music\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    style: {\n      height: 60,\n      width: '100%'\n    }\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n    sx: {\n      borderBottom: 1,\n      borderColor: 'divider'\n    }\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n    value: currentTab,\n    onChange: handleTabChange,\n    \"aria-label\": \"basic tabs\",\n    centered: true\n  }, TABS.map(function (tab, index) {\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n      key: index,\n      label: tab.label,\n      value: index\n    });\n  }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(TabComponent, {\n    list: searchResult,\n    onSearch: setSearchResult,\n    favoriteList: favoriteList,\n    addToFavoriteList: addToFavoriteList,\n    likes: likes,\n    handleLikes: handleLikes,\n    removeFromFavoriteList: removeFromFavoriteList\n  }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/App.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ App)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CssBaseline/CssBaseline.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/AppBar/AppBar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tabs/Tabs.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tab/Tab.js\");\n/* harmony import */ var _SearchPage__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SearchPage */ \"./src/SearchPage.js\");\n/* harmony import */ var _Favorites__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Favorites */ \"./src/Favorites.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\nfunction App() {\n  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0),\n    _useState2 = _slicedToArray(_useState, 2),\n    currentTab = _useState2[0],\n    setCurrentTab = _useState2[1];\n  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),\n    _useState4 = _slicedToArray(_useState3, 2),\n    searchResult = _useState4[0],\n    setSearchResult = _useState4[1];\n  var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({}),\n    _useState6 = _slicedToArray(_useState5, 2),\n    likes = _useState6[0],\n    setLikes = _useState6[1];\n  var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),\n    _useState8 = _slicedToArray(_useState7, 2),\n    favorites = _useState8[0],\n    setFavorites = _useState8[1];\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n    fetch('/likes').then(function (response) {\n      return response.json();\n    }).then(function (data) {\n      var favoriteLikes = data.reduce(function (likes, item) {\n        likes[item.collectionId] = true;\n        return likes;\n      }, {});\n      setLikes(favoriteLikes);\n      setFavorites(data);\n    });\n  }, []);\n  var handleLike = function handleLike(id, item) {\n    var favoriteLikes = _objectSpread(_objectSpread({}, likes), {}, _defineProperty({}, id, !likes[id]));\n    setLikes(favoriteLikes);\n    if (favoriteLikes[id]) {\n      fetch(\"/likes\", {\n        method: \"POST\",\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify(item)\n      }).then(function () {\n        return setFavorites(function (prevFavorites) {\n          return [].concat(_toConsumableArray(prevFavorites), [item]);\n        });\n      });\n    } else {\n      fetch(\"/likes/\".concat(id), {\n        method: \"DELETE\"\n      }).then(function () {\n        return setFavorites(function (prevFavorites) {\n          return prevFavorites.filter(function (favorite) {\n            return favorite.collectionId !== id;\n          });\n        });\n      });\n    }\n  };\n  var handleTabChange = function handleTabChange(event, newValue) {\n    setCurrentTab(newValue);\n  };\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n    position: \"fixed\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n    align: \"center\",\n    variant: \"h3\",\n    color: \"inherit\"\n  }, \"Tae Wook's Favorite Music\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    style: {\n      height: 60,\n      width: '100%'\n    }\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n    sx: {\n      borderBottom: 1,\n      borderColor: 'divider'\n    }\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n    value: currentTab,\n    onChange: handleTabChange,\n    \"aria-label\": \"basic tabs\",\n    centered: true\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n    label: \"Search Music\",\n    value: 0\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n    label: \"Favorites\",\n    value: 1\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n    label: \"More Contents\",\n    value: 2\n  }))), currentTab === 0 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SearchPage__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    onSearch: setSearchResult,\n    likes: likes // Pass the likes prop\n    ,\n    onLike: handleLike // Pass the onLike prop\n  }), currentTab === 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Favorites__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    favorites: favorites,\n    likes: likes,\n    onLike: handleLike\n  }), currentTab === 2 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n    align: \"center\",\n    variant: \"h2\"\n  }, \"More Contents\"));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/App.js?");
 
 /***/ }),
 
@@ -2348,7 +2282,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ Favorites)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Card/Card.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardContent/CardContent.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardActions/CardActions.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/Favorite.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/FavoriteBorder.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n/*\nimport React, { useState } from 'react';\nimport { Card, CardContent, CardActions, IconButton, Typography } from '@mui/material';\nimport { Favorite, FavoriteBorder } from '@mui/icons-material';\n\nconst styles = {\n  card: {\n    minWidth: 275,\n    maxWidth: 600,\n    marginBottom: '20pt',\n    marginLeft: 'auto',\n    marginRight: 'auto'\n  },\n};\n\nexport default function Favorites({ favoriteList, likes, handleLikes, removeFromFavoriteList }) {\n  const [favoriteLikes, setFavoriteLikes] = useState(likes);\n\n  const toggleFavorite = (id) => {\n    const updatedLikes = { ...favoriteLikes, [id]: !favoriteLikes[id] };\n    setFavoriteLikes(updatedLikes);\n    handleLikes(id);\n  };\n\n  const filteredFavoriteList = favoriteList.filter((item) => favoriteLikes[item.collectionId]);\n\n  return (\n    <div>\n      {filteredFavoriteList.map((item) => (\n        <Card sx={styles.card} key={item.collectionId}>\n          <CardContent>\n            <Typography variant=\"subtitle1\">{item.artisName}</Typography>\n            <Typography variant=\"subtitle2\">{item.collectionCensoredName}</Typography>\n          </CardContent>\n          <CardActions>\n            <IconButton onClick={() => toggleFavorite(item.collectionId)}>\n              {favoriteLikes[item.collectionId] ? <Favorite /> : <FavoriteBorder />}\n            </IconButton>\n          </CardActions>\n        </Card>\n      ))}\n    </div>\n  );\n}\n*/\n//\n\n\n\nvar styles = {\n  card: {\n    minWidth: 275,\n    maxWidth: 600,\n    marginBottom: '20pt',\n    marginLeft: 'auto',\n    marginRight: 'auto'\n  }\n};\nfunction Favorites(_ref) {\n  var favoriteList = _ref.favoriteList,\n    likes = _ref.likes,\n    handleLikes = _ref.handleLikes,\n    removeFromFavoriteList = _ref.removeFromFavoriteList;\n  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(likes),\n    _useState2 = _slicedToArray(_useState, 2),\n    favoriteLikes = _useState2[0],\n    setFavoriteLikes = _useState2[1];\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n    setFavoriteLikes(likes);\n  }, [likes]);\n  var toggleFavorite = function toggleFavorite(id) {\n    var updatedLikes = _objectSpread(_objectSpread({}, favoriteLikes), {}, _defineProperty({}, id, !favoriteLikes[id]));\n    setFavoriteLikes(updatedLikes);\n    handleLikes(id);\n  };\n  var filteredFavoriteList = favoriteList.filter(function (item) {\n    return favoriteLikes[item.collectionId];\n  });\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", null, filteredFavoriteList.map(function (item) {\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n      sx: styles.card,\n      key: item.collectionId\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n      variant: \"subtitle1\"\n    }, item.artisName), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n      variant: \"subtitle2\"\n    }, item.collectionCensoredName)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n      onClick: function onClick() {\n        return toggleFavorite(item.collectionId);\n      }\n    }, favoriteLikes[item.collectionId] ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], null))));\n  }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/Favorites.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ Favorites)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _MusicList__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MusicList */ \"./src/MusicList.js\");\n\n\nfunction Favorites(_ref) {\n  var favorites = _ref.favorites,\n    likes = _ref.likes,\n    onLike = _ref.onLike;\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MusicList__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    list: favorites,\n    likes: likes,\n    onLike: onLike\n  }));\n}\n;\n\n//# sourceURL=webpack://muibasic_starterkit/./src/Favorites.js?");
 
 /***/ }),
 
@@ -2359,7 +2293,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ MusicList)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Card/Card.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardContent/CardContent.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardActions/CardActions.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/Favorite.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/FavoriteBorder.js\");\n/* harmony import */ var _Snackbar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Snackbar */ \"./src/Snackbar.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n/*\nimport React from 'react';\nimport { Card, CardContent, CardActions, IconButton, Typography } from '@mui/material';\nimport { Favorite, FavoriteBorder } from '@mui/icons-material';\nimport SnackMsg from './Snackbar';\n\nconst styles = {\n  card: {\n    minWidth: 275,\n    maxWidth: 600,\n    marginBottom: '20pt',\n    marginLeft: 'auto',\n    marginRight: 'auto'\n  },\n};\n\nexport default function MusicList({ list, favoriteList, addToFavoriteList, likes, handleLikes }) {\n  const [snackState, setSnackState] = React.useState({ open: false, msg: '' });\n\n  const toggleFavorite = (id, name) => () => {\n    const updatedLikes = { ...likes, [id]: !likes[id] };\n    handleLikes(id);\n    setSnackState({ ...snackState, open: true, msg: `${name} is clicked` });\n\n    if (updatedLikes[id]) {\n      if (!favoriteList.find((item) => item.collectionId === id)) {\n        addToFavoriteList(list.find((item) => item.collectionId === id));\n      }\n    } else {\n      const updatedFavoriteList = favoriteList.filter((item) => item.collectionId !== id);\n      addToFavoriteList(updatedFavoriteList);\n    }\n  };\n\n  const handleSnackbarClose = (event, reason) => {\n    if (reason === 'clickaway') {\n      return;\n    }\n    setSnackState({ open: false, msg: '' });\n  };\n\n  return (\n    <div>\n      {list.map((item) => {\n        return (\n          <Card sx={styles.card} key={item.collectionId}>\n            <CardContent>\n              <Typography variant=\"subtitle1\">{item.artisName}</Typography>\n              <Typography variant=\"subtitle2\">{item.collectionCensoredName}</Typography>\n            </CardContent>\n            <CardActions>\n              <IconButton onClick={toggleFavorite(item.collectionId, item.collectionName)}>\n                {likes[item.collectionId] ? <Favorite /> : <FavoriteBorder />}\n              </IconButton>\n              <SnackMsg open={snackState.open} message={snackState.msg} onClose={handleSnackbarClose} />\n            </CardActions>\n          </Card>\n        );\n      })}\n    </div>\n  );\n}\n*/\n\n\n\n\n\nvar styles = {\n  card: {\n    minWidth: 275,\n    maxWidth: 600,\n    marginBottom: '20pt',\n    marginLeft: 'auto',\n    marginRight: 'auto'\n  }\n};\nfunction MusicList(_ref) {\n  var list = _ref.list,\n    favoriteList = _ref.favoriteList,\n    addToFavoriteList = _ref.addToFavoriteList,\n    likes = _ref.likes,\n    handleLikes = _ref.handleLikes;\n  var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState({\n      open: false,\n      msg: ''\n    }),\n    _React$useState2 = _slicedToArray(_React$useState, 2),\n    snackState = _React$useState2[0],\n    setSnackState = _React$useState2[1];\n  var toggleFavorite = function toggleFavorite(id, name) {\n    return function () {\n      var updatedLikes = _objectSpread(_objectSpread({}, likes), {}, _defineProperty({}, id, !likes[id]));\n      handleLikes(id);\n      setSnackState(_objectSpread(_objectSpread({}, snackState), {}, {\n        open: true,\n        msg: \"\".concat(name, \" is clicked\")\n      }));\n      if (updatedLikes[id]) {\n        if (!favoriteList.find(function (item) {\n          return item.collectionId === id;\n        })) {\n          addToFavoriteList(list.find(function (item) {\n            return item.collectionId === id;\n          }));\n        }\n      } else {\n        removeFromFavoriteList(id);\n      }\n    };\n  };\n  var handleSnackbarClose = function handleSnackbarClose(event, reason) {\n    if (reason === 'clickaway') {\n      return;\n    }\n    setSnackState({\n      open: false,\n      msg: ''\n    });\n  };\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", null, list.map(function (item) {\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n      sx: styles.card,\n      key: item.collectionId\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n      variant: \"subtitle1\"\n    }, item.artisName), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n      variant: \"subtitle2\"\n    }, item.collectionCensoredName)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n      onClick: toggleFavorite(item.collectionId, item.collectionName)\n    }, likes[item.collectionId] ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Snackbar__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n      open: snackState.open,\n      message: snackState.msg,\n      onClose: handleSnackbarClose\n    })));\n  }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/MusicList.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ MusicList)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Card/Card.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardContent/CardContent.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardActions/CardActions.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/Favorite.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/FavoriteBorder.js\");\n\n\n\nvar styles = {\n  card: {\n    minWidth: 275,\n    maxWidth: 600,\n    marginBottom: '20pt',\n    marginLeft: 'auto',\n    marginRight: 'auto'\n  }\n};\nfunction MusicList(_ref) {\n  var _ref$list = _ref.list,\n    list = _ref$list === void 0 ? [] : _ref$list,\n    likes = _ref.likes,\n    onLike = _ref.onLike;\n  var toggleFavorite = function toggleFavorite(id, item) {\n    return function () {\n      onLike(id, item);\n    };\n  };\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", null, list.map(function (item) {\n    var isLiked = likes[item.collectionId] === true;\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n      sx: styles.card,\n      key: item.collectionId\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n      variant: \"subtitle1\"\n    }, \" \", item.artistName), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n      variant: \"subtitle2\"\n    }, \" \", item.collectionName)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n      onClick: toggleFavorite(item.collectionId, item)\n    }, isLiked ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], null))));\n  }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/MusicList.js?");
 
 /***/ }),
 
@@ -2370,18 +2304,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ SearchPage)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/TextField/TextField.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Button/Button.js\");\n/* harmony import */ var _MusicList__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MusicList */ \"./src/MusicList.js\");\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n/*\nimport React from 'react';\nimport { Button, TextField } from '@mui/material';\nimport MusicList from './MusicList';\n\nexport default function SearchPage({ list, onSearch, favoriteList, addToFavoriteList, likes, handleLikes }) {\n  const [searchWord, setSearchWord] = React.useState('');\n\n  const handleSearch = (event) => {\n    event.preventDefault();\n    fetch(`http://itunes.apple.com/search?term=${searchWord}&entity=album`)\n      .then((response) => response.json())\n      .then((data) => {\n        console.log(data);\n        onSearch(data.results);\n        setSearchWord('');\n      })\n      .catch((error) => console.error('Error when searching for musicians', error));\n  };\n\n  const handleSearchTextChange = (event) => {\n    setSearchWord(event.target.value);\n  };\n\n  return (\n    <React.Fragment>\n      <form style={{ display: 'flex', marginTop: 20, marginBottom: 15 }}>\n        <div style={{ display: 'flex', marginLeft: 'auto', marginRight: 'auto' }}>\n          <TextField\n            variant='outlined'\n            label=\"Music Album Search\"\n            type='search'\n            style={{ width: 450 }}\n            onChange={handleSearchTextChange}\n            value={searchWord}\n          />\n          <Button variant=\"contained\" color=\"primary\" type=\"submit\" onClick={handleSearch} style={{ marginLeft: 20 }}>\n            Search\n          </Button>\n        </div>\n      </form>\n      <MusicList\n        list={list}\n        favoriteList={favoriteList}\n        addToFavoriteList={addToFavoriteList}\n        likes={likes}\n        handleLikes={handleLikes}\n      />\n    </React.Fragment>\n  );\n}\n*/\n\n\n\n\nvar serverPort = 8098; // MySpringWeb Backend Server의 포트 번호\n\nfunction SearchPage(_ref) {\n  var favoriteList = _ref.favoriteList,\n    addToFavoriteList = _ref.addToFavoriteList,\n    likes = _ref.likes,\n    handleLikes = _ref.handleLikes;\n  var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState(''),\n    _React$useState2 = _slicedToArray(_React$useState, 2),\n    searchWord = _React$useState2[0],\n    setSearchWord = _React$useState2[1];\n  var _React$useState3 = react__WEBPACK_IMPORTED_MODULE_0___default().useState([]),\n    _React$useState4 = _slicedToArray(_React$useState3, 2),\n    searchResult = _React$useState4[0],\n    setSearchResult = _React$useState4[1];\n  var handleSearch = function handleSearch(event) {\n    event.preventDefault();\n    fetch(\"http://localhost:\".concat(serverPort, \"/musicSearch/\").concat(searchWord)).then(function (response) {\n      return response.json();\n    }).then(function (data) {\n      console.log(data);\n      setSearchResult(data.results);\n      setSearchWord('');\n    })[\"catch\"](function (error) {\n      return console.error('음악 검색 중 오류가 발생했습니다.', error);\n    });\n  };\n  var handleSearchTextChange = function handleSearchTextChange(event) {\n    setSearchWord(event.target.value);\n  };\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"form\", {\n    style: {\n      display: 'flex',\n      marginTop: 20,\n      marginBottom: 15\n    }\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    style: {\n      display: 'flex',\n      marginLeft: 'auto',\n      marginRight: 'auto'\n    }\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    variant: \"outlined\",\n    label: \"\\uC74C\\uC545 \\uC568\\uBC94 \\uAC80\\uC0C9\",\n    type: \"search\",\n    style: {\n      width: 450\n    },\n    onChange: handleSearchTextChange,\n    value: searchWord\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n    variant: \"contained\",\n    color: \"primary\",\n    type: \"submit\",\n    onClick: handleSearch,\n    style: {\n      marginLeft: 20\n    }\n  }, \"\\uAC80\\uC0C9\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MusicList__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    list: searchResult,\n    favoriteList: favoriteList,\n    addToFavoriteList: addToFavoriteList,\n    likes: likes,\n    handleLikes: handleLikes\n  }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/SearchPage.js?");
-
-/***/ }),
-
-/***/ "./src/Snackbar.js":
-/*!*************************!*\
-  !*** ./src/Snackbar.js ***!
-  \*************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Snackbar/Snackbar.js\");\n\n\nvar SnackMsg = function SnackMsg(props) {\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    open: props.open,\n    anchorOrigin: {\n      vertical: 'bottom',\n      horizontal: 'right'\n    },\n    autoHideDuration: 3000,\n    onClose: props.onClose,\n    message: props.message\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SnackMsg);\n\n//# sourceURL=webpack://muibasic_starterkit/./src/Snackbar.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ SearchPage)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/TextField/TextField.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Button/Button.js\");\n/* harmony import */ var _MusicList__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MusicList */ \"./src/MusicList.js\");\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\nfunction SearchPage(_ref) {\n  var onSearch = _ref.onSearch,\n    likes = _ref.likes,\n    onLike = _ref.onLike;\n  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    searchWord = _useState2[0],\n    setSearchWord = _useState2[1];\n  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),\n    _useState4 = _slicedToArray(_useState3, 2),\n    searchResult = _useState4[0],\n    setSearchResult = _useState4[1];\n  var handleSearch = function handleSearch(event) {\n    event.preventDefault();\n    fetch(\"/musicSearch/\".concat(searchWord), {\n      method: 'GET',\n      headers: {}\n    }).then(function (r) {\n      return r.json();\n    }).then(function (r) {\n      console.log(r);\n      setSearchResult(r.results);\n      onSearch(r.results); // Pass the search results back to the App component\n    })[\"catch\"](function (e) {\n      return console.log('error when searching music');\n    });\n  };\n  var handleSearchTextChange = function handleSearchTextChange(event) {\n    setSearchWord(event.target.value);\n  };\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"form\", {\n    style: {\n      display: 'flex',\n      marginTop: 20,\n      marginBottom: 15\n    }\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    style: {\n      display: 'flex',\n      marginLeft: 'auto',\n      marginRight: 'auto'\n    }\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    variant: \"outlined\",\n    label: \"Music Album Search\",\n    type: \"search\",\n    style: {\n      width: 450\n    },\n    onChange: handleSearchTextChange,\n    value: searchWord\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n    variant: \"contained\",\n    color: \"primary\",\n    type: \"submit\",\n    onClick: handleSearch,\n    style: {\n      marginLeft: 20\n    }\n  }, \"Search\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MusicList__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    list: searchResult,\n    likes: likes,\n    onLike: onLike\n  }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/SearchPage.js?");
 
 /***/ }),
 
@@ -2933,7 +2856,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	(() => {
-/******/ 		__webpack_require__.h = () => ("e672bb656978aaea7ff2")
+/******/ 		__webpack_require__.h = () => ("6836efe82e9254a52212")
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/global */
diff --git a/src/App.js b/src/App.js
index d64dc2d855836d343aaba66855d2b63d871d85f1..d18d35a039b0d66b86a91eeab7a90f836156523a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,121 +1,84 @@
-/*
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import {
+  Box,
+  Tabs,
+  Tab,
+  Typography,
+  AppBar,
+  CssBaseline
+} from '@mui/material';
 import SearchPage from './SearchPage';
 import Favorites from './Favorites';
-import { Box, Tabs, Tab, Typography, AppBar, CssBaseline } from '@mui/material';
-
-const TABS = [
-  { label: 'Search Music', component: SearchPage },
-  { label: 'Favorites', component: Favorites },
-  { label: 'More Contents', component: () => <Typography align="center" variant="h2"> Item Three</Typography> },
-];
 
 export default function App() {
   const [currentTab, setCurrentTab] = useState(0);
   const [searchResult, setSearchResult] = useState([]);
   const [likes, setLikes] = useState({});
-  const [favoriteList, setFavoriteList] = useState([]);
-
-  const handleTabChange = (event, newValue) => {
-    setCurrentTab(newValue);
-  };
-
-  const addToFavoriteList = (item) => {
-    setFavoriteList((prevList) => [...prevList, item]);
+  const [favorites, setFavorites] = useState([]);
+
+  useEffect(() => {
+    fetch('/likes')
+      .then(response => response.json())
+      .then(data => {
+        const favoriteLikes = data.reduce((likes, item) => {
+          likes[item.collectionId] = true;
+          return likes;
+        }, {});
+        setLikes(favoriteLikes);
+        setFavorites(data);
+      });
+  }, []);
+
+  const handleLike = (id, item) => {
+    const favoriteLikes = { ...likes, [id]: !likes[id] };
+    setLikes(favoriteLikes);
+
+    if (favoriteLikes[id]) {
+      fetch(`/likes`, {
+        method: "POST",
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(item)
+      }).then(() => 
+      setFavorites(prevFavorites => [...prevFavorites, item]));
+    } else {
+      fetch(`/likes/${id}`, {
+        method: "DELETE",
+      }).then(() => 
+      setFavorites(prevFavorites => prevFavorites.filter(favorite => favorite.collectionId !== id)));
+    }
   };
 
-  const handleLikes = (id) => {
-    setLikes((prevLikes) => ({ ...prevLikes, [id]: !prevLikes[id] }));
-  };
-
-  const removeFromFavoriteList = (id) => {
-    setFavoriteList((prevList) => prevList.filter((item) => item.collectionId !== id));
-  };
-
-  const TabComponent = TABS[currentTab].component;
-
-  return (
-    <React.Fragment>
-      <CssBaseline />
-      <AppBar position="fixed">
-        <Typography align="center" variant="h3" color="inherit">Tae Wook's Favorite Music</Typography>
-      </AppBar>
-      <div style={{ height: 60, width: '100%' }}></div>
-      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-        <Tabs value={currentTab} onChange={handleTabChange} aria-label="basic tabs" centered>
-          {TABS.map((tab, index) => <Tab key={index} label={tab.label} value={index} />)}
-        </Tabs>
-      </Box>
-      <TabComponent
-        list={searchResult}
-        onSearch={setSearchResult}
-        favoriteList={favoriteList}
-        addToFavoriteList={addToFavoriteList}
-        likes={likes}
-        handleLikes={handleLikes}
-        removeFromFavoriteList={removeFromFavoriteList}
-      />
-    </React.Fragment>
-  );
-}
-*/
-
-import React, { useState } from 'react';
-import SearchPage from './SearchPage';
-import Favorites from './Favorites';
-import { Box, Tabs, Tab, Typography, AppBar, CssBaseline } from '@mui/material';
-
-const TABS = [
-  { label: 'Search Music', component: SearchPage },
-  { label: 'Favorites', component: Favorites },
-  { label: 'More Contents', component: () => <Typography align="center" variant="h2"> Item Three</Typography> },
-];
-
-export default function App() {
-  const [currentTab, setCurrentTab] = useState(0);
-  const [searchResult, setSearchResult] = useState([]);
-  const [likes, setLikes] = useState({});
-  const [favoriteList, setFavoriteList] = useState([]);
-
   const handleTabChange = (event, newValue) => {
     setCurrentTab(newValue);
   };
 
-  const addToFavoriteList = (item) => {
-    setFavoriteList((prevList) => [...prevList, item]);
-  };
-
-  const handleLikes = (id) => {
-    setLikes((prevLikes) => ({ ...prevLikes, [id]: !prevLikes[id] }));
-  };
-
-  const removeFromFavoriteList = (id) => {
-    setFavoriteList((prevList) => prevList.filter((item) => item.collectionId !== id));
-  };
-
-  const TabComponent = TABS[currentTab].component;
-
   return (
     <React.Fragment>
       <CssBaseline />
       <AppBar position="fixed">
         <Typography align="center" variant="h3" color="inherit">Tae Wook's Favorite Music</Typography>
       </AppBar>
+
       <div style={{ height: 60, width: '100%' }}></div>
       <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
         <Tabs value={currentTab} onChange={handleTabChange} aria-label="basic tabs" centered>
-          {TABS.map((tab, index) => <Tab key={index} label={tab.label} value={index} />)}
+          <Tab label="Search Music" value={0} />
+          <Tab label="Favorites" value={1} />
+          <Tab label="More Contents" value={2} />
         </Tabs>
       </Box>
-      <TabComponent
-        list={searchResult}
-        onSearch={setSearchResult}
-        favoriteList={favoriteList}
-        addToFavoriteList={addToFavoriteList}
-        likes={likes}
-        handleLikes={handleLikes}
-        removeFromFavoriteList={removeFromFavoriteList}
-      />
+
+      {currentTab === 0 && (
+          <SearchPage
+              onSearch={setSearchResult}
+              likes={likes} // Pass the likes prop
+              onLike={handleLike} // Pass the onLike prop
+          />
+      )}
+      {currentTab === 1 && <Favorites favorites={favorites} likes={likes} onLike={handleLike} />}
+      {currentTab === 2 && <Typography align="center" variant="h2">More Contents</Typography>}
     </React.Fragment>
   );
 }
diff --git a/src/Favorites.js b/src/Favorites.js
index b821ef166f11962e1c3d25a6be77a88c24554114..0adaba7853da61d364c6950c1a3c1361966256c5 100644
--- a/src/Favorites.js
+++ b/src/Favorites.js
@@ -1,93 +1,10 @@
-/*
-import React, { useState } from 'react';
-import { Card, CardContent, CardActions, IconButton, Typography } from '@mui/material';
-import { Favorite, FavoriteBorder } from '@mui/icons-material';
-
-const styles = {
-  card: {
-    minWidth: 275,
-    maxWidth: 600,
-    marginBottom: '20pt',
-    marginLeft: 'auto',
-    marginRight: 'auto'
-  },
-};
-
-export default function Favorites({ favoriteList, likes, handleLikes, removeFromFavoriteList }) {
-  const [favoriteLikes, setFavoriteLikes] = useState(likes);
-
-  const toggleFavorite = (id) => {
-    const updatedLikes = { ...favoriteLikes, [id]: !favoriteLikes[id] };
-    setFavoriteLikes(updatedLikes);
-    handleLikes(id);
-  };
-
-  const filteredFavoriteList = favoriteList.filter((item) => favoriteLikes[item.collectionId]);
-
-  return (
-    <div>
-      {filteredFavoriteList.map((item) => (
-        <Card sx={styles.card} key={item.collectionId}>
-          <CardContent>
-            <Typography variant="subtitle1">{item.artisName}</Typography>
-            <Typography variant="subtitle2">{item.collectionCensoredName}</Typography>
-          </CardContent>
-          <CardActions>
-            <IconButton onClick={() => toggleFavorite(item.collectionId)}>
-              {favoriteLikes[item.collectionId] ? <Favorite /> : <FavoriteBorder />}
-            </IconButton>
-          </CardActions>
-        </Card>
-      ))}
-    </div>
-  );
-}
-*/
-//
-import React, { useState, useEffect } from 'react';
-import { Card, CardContent, CardActions, IconButton, Typography } from '@mui/material';
-import { Favorite, FavoriteBorder } from '@mui/icons-material';
-
-const styles = {
-  card: {
-    minWidth: 275,
-    maxWidth: 600,
-    marginBottom: '20pt',
-    marginLeft: 'auto',
-    marginRight: 'auto'
-  },
-};
-
-export default function Favorites({ favoriteList, likes, handleLikes, removeFromFavoriteList }) {
-  const [favoriteLikes, setFavoriteLikes] = useState(likes);
-
-  useEffect(() => {
-    setFavoriteLikes(likes);
-  }, [likes]);
-
-  const toggleFavorite = (id) => {
-    const updatedLikes = { ...favoriteLikes, [id]: !favoriteLikes[id] };
-    setFavoriteLikes(updatedLikes);
-    handleLikes(id);
-  };
-
-  const filteredFavoriteList = favoriteList.filter((item) => favoriteLikes[item.collectionId]);
+import React from 'react';
+import MusicList from './MusicList';
 
+export default function Favorites({ favorites, likes, onLike }) {
   return (
-    <div>
-      {filteredFavoriteList.map((item) => (
-        <Card sx={styles.card} key={item.collectionId}>
-          <CardContent>
-            <Typography variant="subtitle1">{item.artisName}</Typography>
-            <Typography variant="subtitle2">{item.collectionCensoredName}</Typography>
-          </CardContent>
-          <CardActions>
-            <IconButton onClick={() => toggleFavorite(item.collectionId)}>
-              {favoriteLikes[item.collectionId] ? <Favorite /> : <FavoriteBorder />}
-            </IconButton>
-          </CardActions>
-        </Card>
-      ))}
-    </div>
+    <React.Fragment>
+      <MusicList list={favorites} likes={likes} onLike={onLike} />
+    </React.Fragment>
   );
-}
+};
\ No newline at end of file
diff --git a/src/MusicList.js b/src/MusicList.js
index 1a66f719429b75f369397abaab958c90604403e1..aaea30cba0bda108579c6b8ead4b479fd5b90ec2 100644
--- a/src/MusicList.js
+++ b/src/MusicList.js
@@ -1,8 +1,6 @@
-/*
 import React from 'react';
-import { Card, CardContent, CardActions, IconButton, Typography } from '@mui/material';
+import { Card, CardContent, CardActions, Typography, IconButton } from '@mui/material';
 import { Favorite, FavoriteBorder } from '@mui/icons-material';
-import SnackMsg from './Snackbar';
 
 const styles = {
   card: {
@@ -10,115 +8,33 @@ const styles = {
     maxWidth: 600,
     marginBottom: '20pt',
     marginLeft: 'auto',
-    marginRight: 'auto'
+    marginRight: 'auto',
   },
 };
 
-export default function MusicList({ list, favoriteList, addToFavoriteList, likes, handleLikes }) {
-  const [snackState, setSnackState] = React.useState({ open: false, msg: '' });
-
-  const toggleFavorite = (id, name) => () => {
-    const updatedLikes = { ...likes, [id]: !likes[id] };
-    handleLikes(id);
-    setSnackState({ ...snackState, open: true, msg: `${name} is clicked` });
-
-    if (updatedLikes[id]) {
-      if (!favoriteList.find((item) => item.collectionId === id)) {
-        addToFavoriteList(list.find((item) => item.collectionId === id));
-      }
-    } else {
-      const updatedFavoriteList = favoriteList.filter((item) => item.collectionId !== id);
-      addToFavoriteList(updatedFavoriteList);
-    }
-  };
-
-  const handleSnackbarClose = (event, reason) => {
-    if (reason === 'clickaway') {
-      return;
-    }
-    setSnackState({ open: false, msg: '' });
-  };
-
-  return (
-    <div>
-      {list.map((item) => {
-        return (
-          <Card sx={styles.card} key={item.collectionId}>
-            <CardContent>
-              <Typography variant="subtitle1">{item.artisName}</Typography>
-              <Typography variant="subtitle2">{item.collectionCensoredName}</Typography>
-            </CardContent>
-            <CardActions>
-              <IconButton onClick={toggleFavorite(item.collectionId, item.collectionName)}>
-                {likes[item.collectionId] ? <Favorite /> : <FavoriteBorder />}
-              </IconButton>
-              <SnackMsg open={snackState.open} message={snackState.msg} onClose={handleSnackbarClose} />
-            </CardActions>
-          </Card>
-        );
-      })}
-    </div>
-  );
-}
-*/
-
-
-import React from 'react';
-import { Card, CardContent, CardActions, IconButton, Typography } from '@mui/material';
-import { Favorite, FavoriteBorder } from '@mui/icons-material';
-import SnackMsg from './Snackbar';
-
-const styles = {
-  card: {
-    minWidth: 275,
-    maxWidth: 600,
-    marginBottom: '20pt',
-    marginLeft: 'auto',
-    marginRight: 'auto'
-  },
-};
-
-export default function MusicList({ list, favoriteList, addToFavoriteList, likes, handleLikes }) {
-  const [snackState, setSnackState] = React.useState({ open: false, msg: '' });
-
-  const toggleFavorite = (id, name) => () => {
-    const updatedLikes = { ...likes, [id]: !likes[id] };
-    handleLikes(id);
-    setSnackState({ ...snackState, open: true, msg: `${name} is clicked` });
-
-    if (updatedLikes[id]) {
-      if (!favoriteList.find((item) => item.collectionId === id)) {
-        addToFavoriteList(list.find((item) => item.collectionId === id));
-      }
-    } else {
-      removeFromFavoriteList(id);
-    }
-  };
-
-  const handleSnackbarClose = (event, reason) => {
-    if (reason === 'clickaway') {
-      return;
-    }
-    setSnackState({ open: false, msg: '' });
+export default function MusicList({ list = [], likes, onLike }) {
+  
+  const toggleFavorite = (id, item) => () => {
+    onLike(id, item);
   };
 
   return (
     <div>
-      {list.map((item) => {
+      {list.map(item => {
+        const isLiked = likes[item.collectionId] === true;
         return (
           <Card sx={styles.card} key={item.collectionId}>
             <CardContent>
-              <Typography variant="subtitle1">{item.artisName}</Typography>
-              <Typography variant="subtitle2">{item.collectionCensoredName}</Typography>
+              <Typography variant="subtitle1"> {item.artistName}</Typography>
+              <Typography variant="subtitle2"> {item.collectionName}</Typography>
             </CardContent>
             <CardActions>
-              <IconButton onClick={toggleFavorite(item.collectionId, item.collectionName)}>
-                {likes[item.collectionId] ? <Favorite /> : <FavoriteBorder />}
+              <IconButton onClick={toggleFavorite(item.collectionId, item)}>
+                {isLiked ? <Favorite /> : <FavoriteBorder />}
               </IconButton>
-              <SnackMsg open={snackState.open} message={snackState.msg} onClose={handleSnackbarClose} />
             </CardActions>
           </Card>
-        );
+        )
       })}
     </div>
   );
diff --git a/src/SearchPage.js b/src/SearchPage.js
index 9dea8c3c10a929ad688350e5f1822be708c54161..fa8dfb13edd798142b5c10d3fdac42a1a5744a02 100644
--- a/src/SearchPage.js
+++ b/src/SearchPage.js
@@ -1,21 +1,24 @@
-/*
-import React from 'react';
+import React, { useState } from 'react';
 import { Button, TextField } from '@mui/material';
 import MusicList from './MusicList';
 
-export default function SearchPage({ list, onSearch, favoriteList, addToFavoriteList, likes, handleLikes }) {
-  const [searchWord, setSearchWord] = React.useState('');
+export default function SearchPage({ onSearch, likes, onLike }) {
+  const [searchWord, setSearchWord] = useState('');
+  const [searchResult, setSearchResult] = useState([]);
 
   const handleSearch = (event) => {
     event.preventDefault();
-    fetch(`http://itunes.apple.com/search?term=${searchWord}&entity=album`)
-      .then((response) => response.json())
-      .then((data) => {
-        console.log(data);
-        onSearch(data.results);
-        setSearchWord('');
+    fetch(`/musicSearch/${searchWord}`, {
+      method: 'GET',
+      headers: {},
+    })
+      .then(r => r.json())
+      .then(r => {
+        console.log(r);
+        setSearchResult(r.results);
+        onSearch(r.results); // Pass the search results back to the App component
       })
-      .catch((error) => console.error('Error when searching for musicians', error));
+      .catch(e => console.log('error when searching music'));
   };
 
   const handleSearchTextChange = (event) => {
@@ -27,9 +30,9 @@ export default function SearchPage({ list, onSearch, favoriteList, addToFavorite
       <form style={{ display: 'flex', marginTop: 20, marginBottom: 15 }}>
         <div style={{ display: 'flex', marginLeft: 'auto', marginRight: 'auto' }}>
           <TextField
-            variant='outlined'
+            variant="outlined"
             label="Music Album Search"
-            type='search'
+            type="search"
             style={{ width: 450 }}
             onChange={handleSearchTextChange}
             value={searchWord}
@@ -39,68 +42,8 @@ export default function SearchPage({ list, onSearch, favoriteList, addToFavorite
           </Button>
         </div>
       </form>
-      <MusicList
-        list={list}
-        favoriteList={favoriteList}
-        addToFavoriteList={addToFavoriteList}
-        likes={likes}
-        handleLikes={handleLikes}
-      />
-    </React.Fragment>
-  );
-}
-*/
-
-import React from 'react';
-import { Button, TextField } from '@mui/material';
-import MusicList from './MusicList';
-
-const serverPort = 8098; // MySpringWeb Backend Server의 포트 번호
-
-export default function SearchPage({ favoriteList, addToFavoriteList, likes, handleLikes }) {
-  const [searchWord, setSearchWord] = React.useState('');
-  const [searchResult, setSearchResult] = React.useState([]);
-
-  const handleSearch = (event) => {
-    event.preventDefault();
-    fetch(`http://localhost:${serverPort}/musicSearch/${searchWord}`)
-      .then((response) => response.json())
-      .then((data) => {
-        console.log(data);
-        setSearchResult(data.results);
-        setSearchWord('');
-      })
-      .catch((error) => console.error('음악 검색 중 오류가 발생했습니다.', error));
-  };
-
-  const handleSearchTextChange = (event) => {
-    setSearchWord(event.target.value);
-  };
-
-  return (
-    <React.Fragment>
-      <form style={{ display: 'flex', marginTop: 20, marginBottom: 15 }}>
-        <div style={{ display: 'flex', marginLeft: 'auto', marginRight: 'auto' }}>
-          <TextField
-            variant='outlined'
-            label="음악 앨범 검색"
-            type='search'
-            style={{ width: 450 }}
-            onChange={handleSearchTextChange}
-            value={searchWord}
-          />
-          <Button variant="contained" color="primary" type="submit" onClick={handleSearch} style={{ marginLeft: 20 }}>
-            검색
-          </Button>
-        </div>
-      </form>
-      <MusicList
-        list={searchResult}
-        favoriteList={favoriteList}
-        addToFavoriteList={addToFavoriteList}
-        likes={likes}
-        handleLikes={handleLikes}
-      />
+      {/* Render MusicList with the searchResult */}
+      <MusicList list={searchResult} likes={likes} onLike={onLike} />
     </React.Fragment>
   );
 }