diff --git a/package.json b/package.json
index f6d390457f2d2af3877ab256e44bee812dd4bb40..3ec1d0010434d247e9a8d8a35417ef632d54a070 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@mui/icons-material": "^5.13.7",
-    "@mui/material": "^5.8.6"
+    "@mui/material": "^5.8.6",
+    "axios": "^1.4.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.18.6",
diff --git a/public/app.bundle.js b/public/app.bundle.js
index f68c29a1f2dca5ca7bc1e4b70ddbe796032fad0f..a2a672320983d2981aeb5a529e783912907ae900 100644
--- a/public/app.bundle.js
+++ b/public/app.bundle.js
@@ -581,6 +581,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "./node_modules/@mui/material/CssBaseline/CssBaseline.js":
+/*!***************************************************************!*\
+  !*** ./node_modules/@mui/material/CssBaseline/CssBaseline.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 */   body: () => (/* binding */ body),\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   html: () => (/* binding */ html),\n/* harmony export */   styles: () => (/* binding */ styles)\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 prop_types__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _styles_useThemeProps__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../styles/useThemeProps */ \"./node_modules/@mui/material/styles/useThemeProps.js\");\n/* harmony import */ var _GlobalStyles__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../GlobalStyles */ \"./node_modules/@mui/material/GlobalStyles/GlobalStyles.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\n\n\n\n\n\nconst html = (theme, enableColorScheme) => (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__[\"default\"])({\n  WebkitFontSmoothing: 'antialiased',\n  // Antialiasing.\n  MozOsxFontSmoothing: 'grayscale',\n  // Antialiasing.\n  // Change from `box-sizing: content-box` so that `width`\n  // is not affected by `padding` or `border`.\n  boxSizing: 'border-box',\n  // Fix font resize problem in iOS\n  WebkitTextSizeAdjust: '100%'\n}, enableColorScheme && !theme.vars && {\n  colorScheme: theme.palette.mode\n});\nconst body = theme => (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__[\"default\"])({\n  color: (theme.vars || theme).palette.text.primary\n}, theme.typography.body1, {\n  backgroundColor: (theme.vars || theme).palette.background.default,\n  '@media print': {\n    // Save printer ink.\n    backgroundColor: (theme.vars || theme).palette.common.white\n  }\n});\nconst styles = (theme, enableColorScheme = false) => {\n  var _theme$components, _theme$components$Mui;\n  const colorSchemeStyles = {};\n  if (enableColorScheme && theme.colorSchemes) {\n    Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {\n      var _scheme$palette;\n      colorSchemeStyles[theme.getColorSchemeSelector(key).replace(/\\s*&/, '')] = {\n        colorScheme: (_scheme$palette = scheme.palette) == null ? void 0 : _scheme$palette.mode\n      };\n    });\n  }\n  let defaultStyles = (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__[\"default\"])({\n    html: html(theme, enableColorScheme),\n    '*, *::before, *::after': {\n      boxSizing: 'inherit'\n    },\n    'strong, b': {\n      fontWeight: theme.typography.fontWeightBold\n    },\n    body: (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__[\"default\"])({\n      margin: 0\n    }, body(theme), {\n      // Add support for document.body.requestFullScreen().\n      // Other elements, if background transparent, are not supported.\n      '&::backdrop': {\n        backgroundColor: (theme.vars || theme).palette.background.default\n      }\n    })\n  }, colorSchemeStyles);\n  const themeOverrides = (_theme$components = theme.components) == null ? void 0 : (_theme$components$Mui = _theme$components.MuiCssBaseline) == null ? void 0 : _theme$components$Mui.styleOverrides;\n  if (themeOverrides) {\n    defaultStyles = [defaultStyles, themeOverrides];\n  }\n  return defaultStyles;\n};\n\n/**\n * Kickstart an elegant, consistent, and simple baseline to build upon.\n */\nfunction CssBaseline(inProps) {\n  const props = (0,_styles_useThemeProps__WEBPACK_IMPORTED_MODULE_3__[\"default\"])({\n    props: inProps,\n    name: 'MuiCssBaseline'\n  });\n  const {\n    children,\n    enableColorScheme = false\n  } = props;\n  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, {\n    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_GlobalStyles__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n      styles: theme => styles(theme, enableColorScheme)\n    }), children]\n  });\n}\n true ? CssBaseline.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   * You can wrap a node.\n   */\n  children: (prop_types__WEBPACK_IMPORTED_MODULE_5___default().node),\n  /**\n   * Enable `color-scheme` CSS property to use `theme.palette.mode`.\n   * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme\n   * For browser support, check out https://caniuse.com/?search=color-scheme\n   * @default false\n   */\n  enableColorScheme: (prop_types__WEBPACK_IMPORTED_MODULE_5___default().bool)\n} : 0;\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CssBaseline);\n\n//# sourceURL=webpack://muibasic_starterkit/./node_modules/@mui/material/CssBaseline/CssBaseline.js?");
+
+/***/ }),
+
 /***/ "./node_modules/@mui/material/Fade/Fade.js":
 /*!*************************************************!*\
   !*** ./node_modules/@mui/material/Fade/Fade.js ***!
@@ -2326,7 +2337,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/AppBar/AppBar.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/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tabs/Tabs.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __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\n\n\n\nfunction App() {\n  var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState(0),\n    _React$useState2 = _slicedToArray(_React$useState, 2),\n    currentTab = _React$useState2[0],\n    setCurrentTab = _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 _React$useState5 = react__WEBPACK_IMPORTED_MODULE_0___default().useState({}),\n    _React$useState6 = _slicedToArray(_React$useState5, 2),\n    likes = _React$useState6[0],\n    setLikes = _React$useState6[1];\n  var _React$useState7 = react__WEBPACK_IMPORTED_MODULE_0___default().useState([]),\n    _React$useState8 = _slicedToArray(_React$useState7, 2),\n    favoriteList = _React$useState8[0],\n    setFavoriteList = _React$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    var updatedLikes = _objectSpread(_objectSpread({}, likes), {}, _defineProperty({}, id, !likes[id]));\n    setLikes(updatedLikes);\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  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\"], {\n    position: \"fixed\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"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_5__[\"default\"], {\n    sx: {\n      borderBottom: 1,\n      borderColor: 'divider'\n    }\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"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_7__[\"default\"], {\n    label: \"Search Music\",\n    value: 0\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n    label: \"Favorites\",\n    value: 1\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"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    list: searchResult,\n    onSearch: setSearchResult,\n    favoriteList: favoriteList,\n    addToFavoriteList: addToFavoriteList,\n    likes: likes,\n    handleLikes: handleLikes\n  }), currentTab === 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Favorites__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    favoriteList: favoriteList,\n    addToFavoriteList: addToFavoriteList,\n    likes: likes,\n    handleLikes: handleLikes,\n    removeFromFavoriteList: removeFromFavoriteList\n  }), currentTab === 2 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n    align: \"center\",\n    variant: \"h2\"\n  }, \" Item Three\"));\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 _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?");
 
 /***/ }),
 
@@ -2337,7 +2348,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\n\n\nvar styles = {\n  content: {},\n  layout: {\n    display: 'flex',\n    justifyContent: 'center'\n  },\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  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] === true;\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 _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?");
 
 /***/ }),
 
@@ -2348,7 +2359,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\n\n\n\nvar styles = {\n  content: {},\n  layout: {\n    display: 'flex',\n    justifyContent: 'center'\n  },\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        var updatedFavoriteList = favoriteList.filter(function (item) {\n          return item.collectionId !== id;\n        });\n        addToFavoriteList(updatedFavoriteList);\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] === true ? /*#__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_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?");
 
 /***/ }),
 
@@ -2359,7 +2370,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\n\n\nfunction SearchPage(_ref) {\n  var list = _ref.list,\n    onSearch = _ref.onSearch,\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    _React$useState2 = _slicedToArray(_React$useState, 2),\n    searchWord = _React$useState2[0],\n    setSearchWord = _React$useState2[1];\n  var handleSearch = function handleSearch(event) {\n    event.preventDefault();\n    console.log(searchWord);\n    setSearchWord('');\n    fetch(\"http://itunes.apple.com/search?term=\".concat(searchWord, \"&entity=album\")).then(function (r) {\n      return r.json();\n    }).then(function (r) {\n      console.log(r);\n      onSearch(r.results);\n      setSearchWord('');\n    })[\"catch\"](function (e) {\n      return console.log('error when search musician');\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: list,\n    favoriteList: favoriteList,\n    addToFavoriteList: addToFavoriteList,\n    likes: likes,\n    handleLikes: handleLikes\n  }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/SearchPage.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/*\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?");
 
 /***/ }),
 
@@ -2922,7 +2933,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	(() => {
-/******/ 		__webpack_require__.h = () => ("ad6492cd70b39542d356")
+/******/ 		__webpack_require__.h = () => ("176c70e49286aa6566be")
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/global */
diff --git a/src/App.js b/src/App.js
index 3d8e552ddbfcabbcad1ed86c26a94b0d9d07b414..d64dc2d855836d343aaba66855d2b63d871d85f1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,3 +1,65 @@
+/*
+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} />)}
+        </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';
diff --git a/src/Favorites.js b/src/Favorites.js
index b7af93f3b4fef981a5d7ccf5f755965fec6ae5fc..345779d300f2320122d6cd8a7894eb18b756171a 100644
--- a/src/Favorites.js
+++ b/src/Favorites.js
@@ -1,3 +1,4 @@
+/*
 import React, { useState } from 'react';
 import { Card, CardContent, CardActions, IconButton, Typography } from '@mui/material';
 import { Favorite, FavoriteBorder } from '@mui/icons-material';
@@ -41,3 +42,52 @@ export default function Favorites({ favoriteList, likes, handleLikes, removeFrom
     </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]);
+
+  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>
+  );
+}
diff --git a/src/MusicList.js b/src/MusicList.js
index 05b1c1abf853ebdee7791f55c12f8531df05fc3b..3a14f4f4665ae8d862f9ea938e9096e6f5d7a82a 100644
--- a/src/MusicList.js
+++ b/src/MusicList.js
@@ -1,3 +1,4 @@
+/*
 import React from 'react';
 import { Card, CardContent, CardActions, IconButton, Typography } from '@mui/material';
 import { Favorite, FavoriteBorder } from '@mui/icons-material';
@@ -59,3 +60,65 @@ export default function MusicList({ list, favoriteList, addToFavoriteList, likes
     </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: '' });
+  };
+
+  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>
+  );
+}
diff --git a/src/SearchPage.js b/src/SearchPage.js
index d5f466e9dd81cc6c73d909da271a5fbb42bd81c6..9dea8c3c10a929ad688350e5f1822be708c54161 100644
--- a/src/SearchPage.js
+++ b/src/SearchPage.js
@@ -1,3 +1,4 @@
+/*
 import React from 'react';
 import { Button, TextField } from '@mui/material';
 import MusicList from './MusicList';
@@ -48,3 +49,58 @@ export default function SearchPage({ list, onSearch, favoriteList, addToFavorite
     </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}
+      />
+    </React.Fragment>
+  );
+}