diff --git a/public/app.bundle.js b/public/app.bundle.js
index 808b4d5c37a95f47a0263f39fecc10d6810e3ba7..56dad1a554032b401c720a7fc0b86b3735f8d6c8 100644
--- a/public/app.bundle.js
+++ b/public/app.bundle.js
@@ -2326,7 +2326,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 _MusicList__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MusicList */ \"./src/MusicList.js\");\n/* harmony import */ var _data__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./data */ \"./src/data.js\");\n/* harmony import */ var _SearchPage__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./SearchPage */ \"./src/SearchPage.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/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tabs/Tabs.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tab/Tab.js\");\n/* harmony import */ var _Favorites__WEBPACK_IMPORTED_MODULE_4__ = __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 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\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    favoriteList = _React$useState6[0],\n    setFavoriteList = _React$useState6[1];\n  var _React$useState7 = react__WEBPACK_IMPORTED_MODULE_0___default().useState({}),\n    _React$useState8 = _slicedToArray(_React$useState7, 2),\n    likes = _React$useState8[0],\n    setLikes = _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_5__[\"default\"], {\n    title: \"Hong seokmin\",\n    position: \"fixed\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n    align: \"center\",\n    variant: \"h3\",\n    color: \"inherit\"\n  }, \"Hong Seok Min \")), /*#__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_7__[\"default\"], {\n    sx: {\n      borderBottom: 1,\n      borderColor: 'divider'\n    }\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"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_9__[\"default\"], {\n    label: \"Search Music\",\n    value: 0\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n    label: \"Favorite\",\n    value: 1\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n    label: \"More Contents\",\n    value: 2\n  }))), currentTab === 0 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SearchPage__WEBPACK_IMPORTED_MODULE_3__[\"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_4__[\"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_6__[\"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 _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\");\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\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    favoriteList = _React$useState6[0],\n    setFavoriteList = _React$useState6[1];\n  var _React$useState7 = react__WEBPACK_IMPORTED_MODULE_0___default().useState({}),\n    _React$useState8 = _slicedToArray(_React$useState7, 2),\n    likes = _React$useState8[0],\n    setLikes = _React$useState8[1];\n\n  //Tab\n  var handleTabChange = function handleTabChange(event, newValue) {\n    setCurrentTab(newValue);\n  };\n  var handleLikes = function handleLikes(id) {\n    var updatedLikes = _objectSpread(_objectSpread({}, likes), {}, _defineProperty({}, id, !likes[id]));\n    setLikes(updatedLikes);\n  };\n  var addToFavoriteList = function addToFavoriteList(item) {\n    setFavoriteList(function (prevList) {\n      return [].concat(_toConsumableArray(prevList), [item]);\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  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    title: \"Hong seokmin\",\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  }, \"Hong Seok Min \")), /*#__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: \"Favorite\",\n    value: 1\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    removeFromFavoriteList: removeFromFavoriteList\n  }), currentTab === 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Favorites__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    favoriteList: favoriteList,\n    likes: likes,\n    handleLikes: handleLikes\n  }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/App.js?");
 
 /***/ }),
 
@@ -2337,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 */ 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\n\nvar styles = {\n  content: {},\n  layout: {\n    display: 'flex',\n    justifyContent: 'center'\n  },\n  card: {\n    minWidth: 275,\n    maxWidth: 600,\n    marginButtom: \"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\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    marginButtom: \"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  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    console.log(updatedLikes);\n    handleLikes(id);\n  };\n  var filteredFavoriteList = favoriteList.filter(function (item) {\n    return favoriteLikes[item.collectionId] === true;\n  });\n  // console.log(filteredFavoriteList);\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 +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 */ 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 _SnackMsg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SnackMsg */ \"./src/SnackMsg.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    marginButtom: \"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(_SnackMsg__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 _SnackMsg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SnackMsg */ \"./src/SnackMsg.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    marginButtom: \"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    removeFromFavoriteList = _ref.removeFromFavoriteList;\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(list.find(function (item) {\n          return item.collectionId === id;\n        }));\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(_SnackMsg__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 +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 */ 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\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    removeFromFavoriteList = _ref.removeFromFavoriteList;\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 (Response) {\n      return Response.json();\n    }).then(function (data) {\n      console.log(data);\n      onSearch(data.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    removeFromFavoriteList: removeFromFavoriteList\n  }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/SearchPage.js?");
 
 /***/ }),
 
@@ -2374,17 +2374,6 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
-/***/ "./src/data.js":
-/*!*********************!*\
-  !*** ./src/data.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 */   music_list: () => (/* binding */ music_list)\n/* harmony export */ });\n// In browser https://itunes.apple.com/search?term=\"blackpink\"&entity=album\n\nvar music_list = {\n  \"resultCount\": 50,\n  \"results\": [{\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1141774019,\n    \"collectionId\": 1263315668,\n    \"amgArtistId\": 3243151,\n    \"artistName\": \"BLACKPINK\",\n    \"collectionName\": \"BLACKPINK - EP\",\n    \"collectionCensoredName\": \"BLACKPINK - EP\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-ep/1263315668?uo=4\",\n    \"artworkUrl60\": \"https://is1-ssl.mzstatic.com/image/thumb/Music118/v4/27/a8/2d/27a82df6-aad9-a7ca-4001-ed03f9223c56/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is1-ssl.mzstatic.com/image/thumb/Music118/v4/27/a8/2d/27a82df6-aad9-a7ca-4001-ed03f9223c56/source/100x100bb.jpg\",\n    \"collectionPrice\": 7.74,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 6,\n    \"copyright\": \"℗ 2017 AVEX ENTERTAINMENT INC.\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2017-08-29T07:00:00Z\",\n    \"primaryGenreName\": \"J-Pop\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1141774019,\n    \"collectionId\": 1441511506,\n    \"amgArtistId\": 3243151,\n    \"artistName\": \"BLACKPINK\",\n    \"collectionName\": \"BLACKPINK IN YOUR AREA\",\n    \"collectionCensoredName\": \"BLACKPINK IN YOUR AREA\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-in-your-area/1441511506?uo=4\",\n    \"artworkUrl60\": \"https://is4-ssl.mzstatic.com/image/thumb/Music115/v4/1f/fe/d0/1ffed01b-7510-1b15-fa1e-da620bc749b9/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is4-ssl.mzstatic.com/image/thumb/Music115/v4/1f/fe/d0/1ffed01b-7510-1b15-fa1e-da620bc749b9/source/100x100bb.jpg\",\n    \"collectionPrice\": 11.61,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 9,\n    \"copyright\": \"℗ 2018 AVEX ENTERTAINMENT INC.\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2018-12-05T08:00:00Z\",\n    \"primaryGenreName\": \"K-Pop\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1141774019,\n    \"collectionId\": 1455720702,\n    \"amgArtistId\": 3243151,\n    \"artistName\": \"BLACKPINK\",\n    \"collectionName\": \"BLACKPINK ARENA TOUR 2018 \\\"SPECIAL FINAL IN KYOCERA DOME OSAKA\\\"\",\n    \"collectionCensoredName\": \"BLACKPINK ARENA TOUR 2018 \\\"SPECIAL FINAL IN KYOCERA DOME OSAKA\\\"\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-arena-tour-2018-special-final-in-kyocera/1455720702?uo=4\",\n    \"artworkUrl60\": \"https://is4-ssl.mzstatic.com/image/thumb/Music124/v4/d2/98/1a/d2981a24-1f59-68f6-80e9-6a882025489d/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is4-ssl.mzstatic.com/image/thumb/Music124/v4/d2/98/1a/d2981a24-1f59-68f6-80e9-6a882025489d/source/100x100bb.jpg\",\n    \"collectionPrice\": 12.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 15,\n    \"copyright\": \"℗ 2019 AVEX ENTERTAINMENT INC.\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2019-03-13T07:00:00Z\",\n    \"primaryGenreName\": \"K-Pop\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1141774019,\n    \"collectionId\": 1533894050,\n    \"amgArtistId\": 3243151,\n    \"artistName\": \"BLACKPINK\",\n    \"collectionName\": \"THE ALBUM\",\n    \"collectionCensoredName\": \"THE ALBUM\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/the-album/1533894050?uo=4\",\n    \"artworkUrl60\": \"https://is2-ssl.mzstatic.com/image/thumb/Music115/v4/1c/40/08/1c400860-ebac-750e-d769-70452c613641/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is2-ssl.mzstatic.com/image/thumb/Music115/v4/1c/40/08/1c400860-ebac-750e-d769-70452c613641/source/100x100bb.jpg\",\n    \"collectionPrice\": 7.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 8,\n    \"copyright\": \"℗ 2020 YG Entertainment, distributed through Interscope Records\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2020-10-02T07:00:00Z\",\n    \"primaryGenreName\": \"K-Pop\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1141774019,\n    \"collectionId\": 1570169082,\n    \"amgArtistId\": 3243151,\n    \"artistName\": \"BLACKPINK\",\n    \"collectionName\": \"BLACKPINK 2021 'THE SHOW' LIVE\",\n    \"collectionCensoredName\": \"BLACKPINK 2021 'THE SHOW' LIVE\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-2021-the-show-live/1570169082?uo=4\",\n    \"artworkUrl60\": \"https://is1-ssl.mzstatic.com/image/thumb/Music125/v4/b6/48/3c/b6483cb5-3b12-8fe4-51fc-29e4c9f41c81/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is1-ssl.mzstatic.com/image/thumb/Music125/v4/b6/48/3c/b6483cb5-3b12-8fe4-51fc-29e4c9f41c81/source/100x100bb.jpg\",\n    \"collectionPrice\": 11.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 15,\n    \"copyright\": \"℗ 2021 YG Entertainment, distributed through Interscope Records\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2021-06-01T07:00:00Z\",\n    \"primaryGenreName\": \"K-Pop\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1141774019,\n    \"collectionId\": 1313151079,\n    \"amgArtistId\": 3243151,\n    \"artistName\": \"BLACKPINK\",\n    \"collectionName\": \"SQUARE TWO - EP\",\n    \"collectionCensoredName\": \"SQUARE TWO - EP\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/square-two-ep/1313151079?uo=4\",\n    \"artworkUrl60\": \"https://is3-ssl.mzstatic.com/image/thumb/Music125/v4/db/ea/fc/dbeafc60-c44d-115a-bac8-b1ed6b88768b/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is3-ssl.mzstatic.com/image/thumb/Music125/v4/db/ea/fc/dbeafc60-c44d-115a-bac8-b1ed6b88768b/source/100x100bb.jpg\",\n    \"collectionPrice\": 3.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 5,\n    \"copyright\": \"℗ 2016 YG Entertainment\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2016-11-01T07:00:00Z\",\n    \"primaryGenreName\": \"K-Pop\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1141774019,\n    \"collectionId\": 1551479990,\n    \"amgArtistId\": 3243151,\n    \"artistName\": \"BLACKPINK\",\n    \"collectionName\": \"SQUARE UP - EP\",\n    \"collectionCensoredName\": \"SQUARE UP - EP\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/square-up-ep/1551479990?uo=4\",\n    \"artworkUrl60\": \"https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/71/ac/31/71ac31ed-61b6-e120-f504-f4c707a27a91/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/71/ac/31/71ac31ed-61b6-e120-f504-f4c707a27a91/source/100x100bb.jpg\",\n    \"collectionPrice\": 3.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 4,\n    \"copyright\": \"℗ 2018 YG Entertainment, distributed through Interscope Records\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2018-06-15T07:00:00Z\",\n    \"primaryGenreName\": \"K-Pop\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1141774019,\n    \"collectionId\": 1512384089,\n    \"amgArtistId\": 3243151,\n    \"artistName\": \"BLACKPINK\",\n    \"collectionName\": \"BLACKPINK 2019-2020 WORLD TOUR IN YOUR AREA - TOKYO DOME (Live)\",\n    \"collectionCensoredName\": \"BLACKPINK 2019-2020 WORLD TOUR IN YOUR AREA - TOKYO DOME (Live)\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-2019-2020-world-tour-in-your-area-tokyo-dome-live/1512384089?uo=4\",\n    \"artworkUrl60\": \"https://is2-ssl.mzstatic.com/image/thumb/Music124/v4/59/12/c8/5912c802-307a-0dd8-5fc1-4deb64e36d1e/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is2-ssl.mzstatic.com/image/thumb/Music124/v4/59/12/c8/5912c802-307a-0dd8-5fc1-4deb64e36d1e/source/100x100bb.jpg\",\n    \"collectionPrice\": 9.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 12,\n    \"copyright\": \"An Interscope Records release; ℗ 2020 UNIVERSAL MUSIC LLC\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2020-05-14T07:00:00Z\",\n    \"primaryGenreName\": \"K-Pop\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 921425189,\n    \"collectionId\": 1573682660,\n    \"amgArtistId\": 3361376,\n    \"artistName\": \"Ted Park & Mike Gao\",\n    \"collectionName\": \"Blackpink - Single\",\n    \"collectionCensoredName\": \"Blackpink - Single\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/ted-park/921425189?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-single/1573682660?uo=4\",\n    \"artworkUrl60\": \"https://is5-ssl.mzstatic.com/image/thumb/Music125/v4/78/f2/4b/78f24b7c-ba68-8f36-1dd3-6c21ecee28ad/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is5-ssl.mzstatic.com/image/thumb/Music125/v4/78/f2/4b/78f24b7c-ba68-8f36-1dd3-6c21ecee28ad/source/100x100bb.jpg\",\n    \"collectionPrice\": 0.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 1,\n    \"copyright\": \"℗ 2021 Ted Park\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2021-07-09T07:00:00Z\",\n    \"primaryGenreName\": \"Hip-Hop/Rap\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1141774019,\n    \"collectionId\": 1477390055,\n    \"amgArtistId\": 3243151,\n    \"artistName\": \"BLACKPINK\",\n    \"collectionName\": \"BLACKPINK 2018 TOUR 'IN YOUR AREA' SEOUL (Live)\",\n    \"collectionCensoredName\": \"BLACKPINK 2018 TOUR 'IN YOUR AREA' SEOUL (Live)\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-2018-tour-in-your-area-seoul-live/1477390055?uo=4\",\n    \"artworkUrl60\": \"https://is2-ssl.mzstatic.com/image/thumb/Music123/v4/88/d6/14/88d61441-7b38-5a53-d6df-904714e6f4a2/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is2-ssl.mzstatic.com/image/thumb/Music123/v4/88/d6/14/88d61441-7b38-5a53-d6df-904714e6f4a2/source/100x100bb.jpg\",\n    \"collectionPrice\": 9.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 14,\n    \"copyright\": \"℗ 2019 YG Entertainment, distributed through Interscope Records\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2019-08-30T07:00:00Z\",\n    \"primaryGenreName\": \"K-Pop\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1141774019,\n    \"collectionId\": 1359000280,\n    \"amgArtistId\": 3243151,\n    \"artistName\": \"BLACKPINK\",\n    \"collectionName\": \"Re: BLACKPINK - EP\",\n    \"collectionCensoredName\": \"Re: BLACKPINK - EP\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/re-blackpink-ep/1359000280?uo=4\",\n    \"artworkUrl60\": \"https://is2-ssl.mzstatic.com/image/thumb/Music125/v4/b8/29/4e/b8294ecc-aaaa-aa94-c6fc-ec7f434856d6/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is2-ssl.mzstatic.com/image/thumb/Music125/v4/b8/29/4e/b8294ecc-aaaa-aa94-c6fc-ec7f434856d6/source/100x100bb.jpg\",\n    \"collectionPrice\": 7.74,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 6,\n    \"copyright\": \"℗ 2018 AVEX ENTERTAINMENT INC.\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2018-03-28T07:00:00Z\",\n    \"primaryGenreName\": \"K-Pop\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1141774019,\n    \"collectionId\": 1551479989,\n    \"amgArtistId\": 3243151,\n    \"artistName\": \"BLACKPINK\",\n    \"collectionName\": \"KILL THIS LOVE - EP\",\n    \"collectionCensoredName\": \"KILL THIS LOVE - EP\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/kill-this-love-ep/1551479989?uo=4\",\n    \"artworkUrl60\": \"https://is4-ssl.mzstatic.com/image/thumb/Music124/v4/a0/30/89/a03089c6-73d6-e758-69e0-6d821d4bc06e/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is4-ssl.mzstatic.com/image/thumb/Music124/v4/a0/30/89/a03089c6-73d6-e758-69e0-6d821d4bc06e/source/100x100bb.jpg\",\n    \"collectionPrice\": 4.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 5,\n    \"copyright\": \"℗ 2019 YG Entertainment, distributed through Interscope Records\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2019-04-05T07:00:00Z\",\n    \"primaryGenreName\": \"K-Pop\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1141774019,\n    \"collectionId\": 1315917456,\n    \"amgArtistId\": 3243151,\n    \"artistName\": \"BLACKPINK\",\n    \"collectionName\": \"SQUARE ONE - Single\",\n    \"collectionCensoredName\": \"SQUARE ONE - Single\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/square-one-single/1315917456?uo=4\",\n    \"artworkUrl60\": \"https://is1-ssl.mzstatic.com/image/thumb/Music115/v4/b9/7b/1c/b97b1c40-b8a0-3de8-f3f9-92e33c92d555/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is1-ssl.mzstatic.com/image/thumb/Music115/v4/b9/7b/1c/b97b1c40-b8a0-3de8-f3f9-92e33c92d555/source/100x100bb.jpg\",\n    \"collectionPrice\": 1.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 2,\n    \"copyright\": \"℗ 2016 YG Entertainment\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2016-08-08T07:00:00Z\",\n    \"primaryGenreName\": \"K-Pop\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1141774019,\n    \"collectionId\": 1251249729,\n    \"amgArtistId\": 3243151,\n    \"artistName\": \"BLACKPINK\",\n    \"collectionName\": \"As If It's Your Last - Single\",\n    \"collectionCensoredName\": \"As If It's Your Last - Single\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/as-if-its-your-last-single/1251249729?uo=4\",\n    \"artworkUrl60\": \"https://is5-ssl.mzstatic.com/image/thumb/Music124/v4/d5/d2/a9/d5d2a927-309d-e104-11aa-51c7c54f613c/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is5-ssl.mzstatic.com/image/thumb/Music124/v4/d5/d2/a9/d5d2a927-309d-e104-11aa-51c7c54f613c/source/100x100bb.jpg\",\n    \"collectionPrice\": 1.29,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 1,\n    \"copyright\": \"℗ 2017 YG Entertainment\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2017-06-22T07:00:00Z\",\n    \"primaryGenreName\": \"K-Pop\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 913944,\n    \"collectionId\": 1441819348,\n    \"artistName\": \"JENNIE (from BLACKPINK)\",\n    \"collectionName\": \"SOLO - Single\",\n    \"collectionCensoredName\": \"SOLO - Single\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/jennie/913944?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/solo-single/1441819348?uo=4\",\n    \"artworkUrl60\": \"https://is1-ssl.mzstatic.com/image/thumb/Music118/v4/78/18/60/7818608f-3e65-c3cd-f54a-5742dc3f3cf7/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is1-ssl.mzstatic.com/image/thumb/Music118/v4/78/18/60/7818608f-3e65-c3cd-f54a-5742dc3f3cf7/source/100x100bb.jpg\",\n    \"collectionPrice\": 1.29,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 1,\n    \"copyright\": \"℗ 2018 YG Entertainment, distributed through Interscope Records\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2018-11-12T08:00:00Z\",\n    \"primaryGenreName\": \"K-Pop\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 491599229,\n    \"collectionId\": 730855247,\n    \"amgArtistId\": 1088191,\n    \"artistName\": \"livetune\",\n    \"collectionName\": \"Pink or Black (feat. Hatsune Miku) - Single\",\n    \"collectionCensoredName\": \"Pink or Black (feat. Hatsune Miku) - Single\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/livetune/491599229?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/pink-or-black-feat-hatsune-miku-single/730855247?uo=4\",\n    \"artworkUrl60\": \"https://is5-ssl.mzstatic.com/image/thumb/Music4/v4/25/4a/1a/254a1a01-31f9-c971-11a6-d9d00e7a45f9/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is5-ssl.mzstatic.com/image/thumb/Music4/v4/25/4a/1a/254a1a01-31f9-c971-11a6-d9d00e7a45f9/source/100x100bb.jpg\",\n    \"collectionPrice\": 1.29,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 1,\n    \"copyright\": \"℗ 2013 TOY'S FACTORY\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2013-11-06T08:00:00Z\",\n    \"primaryGenreName\": \"Electronic\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1406242696,\n    \"collectionId\": 1557744841,\n    \"artistName\": \"ROSÉ\",\n    \"collectionName\": \"R - Single\",\n    \"collectionCensoredName\": \"R - Single\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/ros%C3%A9/1406242696?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/r-single/1557744841?uo=4\",\n    \"artworkUrl60\": \"https://is5-ssl.mzstatic.com/image/thumb/Music125/v4/b0/35/a4/b035a4c4-50b3-3fe9-6206-48f9a57428e3/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is5-ssl.mzstatic.com/image/thumb/Music125/v4/b0/35/a4/b035a4c4-50b3-3fe9-6206-48f9a57428e3/source/100x100bb.jpg\",\n    \"collectionPrice\": 1.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 2,\n    \"copyright\": \"℗ 2021 YG Entertainment, distributed through Interscope Records\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2021-03-12T08:00:00Z\",\n    \"primaryGenreName\": \"K-Pop\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 929709668,\n    \"collectionId\": 929709656,\n    \"artistName\": \"Montessori Dads\",\n    \"collectionName\": \"Black & White & Pink\",\n    \"collectionCensoredName\": \"Black & White & Pink\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/montessori-dads/929709668?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/black-white-pink/929709656?uo=4\",\n    \"artworkUrl60\": \"https://is4-ssl.mzstatic.com/image/thumb/Music3/v4/5a/58/63/5a5863dc-6a07-2e90-3426-4ebd6e9fd357/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is4-ssl.mzstatic.com/image/thumb/Music3/v4/5a/58/63/5a5863dc-6a07-2e90-3426-4ebd6e9fd357/source/100x100bb.jpg\",\n    \"collectionPrice\": 8.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 10,\n    \"copyright\": \"℗ 2015 Paine Group, LLC\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2015-02-10T08:00:00Z\",\n    \"primaryGenreName\": \"Rock\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1449813048,\n    \"collectionId\": 1528439853,\n    \"artistName\": \"DooPiano\",\n    \"collectionName\": \"The Best of BLACKPINK (Piano Album)\",\n    \"collectionCensoredName\": \"The Best of BLACKPINK (Piano Album)\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/doopiano/1449813048?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/the-best-of-blackpink-piano-album/1528439853?uo=4\",\n    \"artworkUrl60\": \"https://is3-ssl.mzstatic.com/image/thumb/Music115/v4/62/85/68/628568a0-7679-dad4-4b2f-ee28385fd043/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is3-ssl.mzstatic.com/image/thumb/Music115/v4/62/85/68/628568a0-7679-dad4-4b2f-ee28385fd043/source/100x100bb.jpg\",\n    \"collectionPrice\": 9.90,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 10,\n    \"copyright\": \"℗ 2020 DooPiano\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2020-08-19T07:00:00Z\",\n    \"primaryGenreName\": \"K-Pop\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 459030916,\n    \"collectionId\": 1050941389,\n    \"artistName\": \"Chinatsu Yoshikawa\",\n    \"collectionName\": \"ゆるゆり うた♪ソロ!02「ぴんぶら☆ピン -Pink★Black☆Pink-」 - EP\",\n    \"collectionCensoredName\": \"ゆるゆり うた♪ソロ!02「ぴんぶら☆ピン -Pink★Black☆Pink-」 - EP\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/chinatsu-yoshikawa/459030916?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/%E3%82%86%E3%82%8B%E3%82%86%E3%82%8A-%E3%81%86%E3%81%9F-%E3%82%BD%E3%83%AD-02-%E3%81%B4%E3%82%93%E3%81%B6%E3%82%89-%E3%83%94%E3%83%B3-pink-black-pink-ep/1050941389?uo=4\",\n    \"artworkUrl60\": \"https://is4-ssl.mzstatic.com/image/thumb/Music6/v4/79/91/ea/7991eacf-134a-d59e-c6ae-7d34ad3a34c1/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is4-ssl.mzstatic.com/image/thumb/Music6/v4/79/91/ea/7991eacf-134a-d59e-c6ae-7d34ad3a34c1/source/100x100bb.jpg\",\n    \"collectionPrice\": 5.16,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 4,\n    \"copyright\": \"℗ 2015 Pony Canyon Inc.\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2015-11-04T08:00:00Z\",\n    \"primaryGenreName\": \"Anime\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 951231115,\n    \"collectionId\": 1467003776,\n    \"amgArtistId\": 3473663,\n    \"artistName\": \"Piano Dreamers\",\n    \"collectionName\": \"Piano Dreamers Play Blackpink (Instrumental)\",\n    \"collectionCensoredName\": \"Piano Dreamers Play Blackpink (Instrumental)\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/piano-dreamers/951231115?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/piano-dreamers-play-blackpink-instrumental/1467003776?uo=4\",\n    \"artworkUrl60\": \"https://is5-ssl.mzstatic.com/image/thumb/Music123/v4/51/ad/0b/51ad0b1f-f843-cf5f-f074-0e8605b7384a/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is5-ssl.mzstatic.com/image/thumb/Music123/v4/51/ad/0b/51ad0b1f-f843-cf5f-f074-0e8605b7384a/source/100x100bb.jpg\",\n    \"collectionPrice\": 9.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 12,\n    \"copyright\": \"℗ 2019 CC Entertainment, Inc.\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2019-07-05T07:00:00Z\",\n    \"primaryGenreName\": \"Instrumental\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1141774019,\n    \"collectionId\": 1482719359,\n    \"amgArtistId\": 3243151,\n    \"artistName\": \"BLACKPINK\",\n    \"collectionName\": \"Kill This Love (Japan Version) - EP\",\n    \"collectionCensoredName\": \"Kill This Love (Japan Version) - EP\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/kill-this-love-japan-version-ep/1482719359?uo=4\",\n    \"artworkUrl60\": \"https://is2-ssl.mzstatic.com/image/thumb/Music124/v4/86/2f/45/862f455e-8b7a-c071-b922-100f93d1efc8/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is2-ssl.mzstatic.com/image/thumb/Music124/v4/86/2f/45/862f455e-8b7a-c071-b922-100f93d1efc8/source/100x100bb.jpg\",\n    \"collectionPrice\": 4.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 5,\n    \"copyright\": \"An Interscope Records release; ℗ 2019 UNIVERSAL MUSIC LLC\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2019-10-16T07:00:00Z\",\n    \"primaryGenreName\": \"K-Pop\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1482285399,\n    \"collectionId\": 1521352986,\n    \"artistName\": \"Shin Giwon Piano\",\n    \"collectionName\": \"BLACKPINK Piano Collection\",\n    \"collectionCensoredName\": \"BLACKPINK Piano Collection\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/shin-giwon-piano/1482285399?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-piano-collection/1521352986?uo=4\",\n    \"artworkUrl60\": \"https://is5-ssl.mzstatic.com/image/thumb/Music123/v4/76/cc/6f/76cc6ffe-62ef-f225-0d5e-4f846c463f61/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is5-ssl.mzstatic.com/image/thumb/Music123/v4/76/cc/6f/76cc6ffe-62ef-f225-0d5e-4f846c463f61/source/100x100bb.jpg\",\n    \"collectionPrice\": 9.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 17,\n    \"copyright\": \"℗ 2020 Shin Giwon\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2020-06-29T07:00:00Z\",\n    \"primaryGenreName\": \"New Age\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 76107280,\n    \"collectionId\": 1416167580,\n    \"artistName\": \"A.B.Y.S.S.\",\n    \"collectionName\": \"Black Suits & Pink Slips\",\n    \"collectionCensoredName\": \"Black Suits & Pink Slips\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/a-b-y-s-s/76107280?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/black-suits-pink-slips/1416167580?uo=4\",\n    \"artworkUrl60\": \"https://is3-ssl.mzstatic.com/image/thumb/Music118/v4/42/a8/2a/42a82ad9-21f1-7eae-113f-feffc24f901d/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is3-ssl.mzstatic.com/image/thumb/Music118/v4/42/a8/2a/42a82ad9-21f1-7eae-113f-feffc24f901d/source/100x100bb.jpg\",\n    \"collectionPrice\": 9.99,\n    \"collectionExplicitness\": \"explicit\",\n    \"contentAdvisoryRating\": \"Explicit\",\n    \"trackCount\": 13,\n    \"copyright\": \"℗ 2018 A.B.Y.S.S.\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2018-08-11T07:00:00Z\",\n    \"primaryGenreName\": \"Hip-Hop/Rap\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1141774019,\n    \"collectionId\": 1413680648,\n    \"amgArtistId\": 3243151,\n    \"artistName\": \"BLACKPINK\",\n    \"collectionName\": \"DDU-DU DDU-DU (JP Ver.) - Single\",\n    \"collectionCensoredName\": \"DDU-DU DDU-DU (JP Ver.) - Single\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/ddu-du-ddu-du-jp-ver-single/1413680648?uo=4\",\n    \"artworkUrl60\": \"https://is3-ssl.mzstatic.com/image/thumb/Music125/v4/ae/de/b9/aedeb9c8-7e83-b63d-f178-fdcfc52c3b7f/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is3-ssl.mzstatic.com/image/thumb/Music125/v4/ae/de/b9/aedeb9c8-7e83-b63d-f178-fdcfc52c3b7f/source/100x100bb.jpg\",\n    \"collectionPrice\": 1.29,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 1,\n    \"copyright\": \"℗ 2018 AVEX ENTERTAINMENT INC.\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2018-08-22T07:00:00Z\",\n    \"primaryGenreName\": \"K-Pop\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1474802237,\n    \"collectionId\": 1571958799,\n    \"artistName\": \"Demaklenco, DJP Montedo & Maicol\",\n    \"collectionName\": \"Blackpink - Single\",\n    \"collectionCensoredName\": \"Blackpink - Single\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/demaklenco/1474802237?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-single/1571958799?uo=4\",\n    \"artworkUrl60\": \"https://is1-ssl.mzstatic.com/image/thumb/Music115/v4/3d/04/ae/3d04aef6-a6f1-0850-ac64-e1f087f70ec2/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is1-ssl.mzstatic.com/image/thumb/Music115/v4/3d/04/ae/3d04aef6-a6f1-0850-ac64-e1f087f70ec2/source/100x100bb.jpg\",\n    \"collectionPrice\": 1.98,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 2,\n    \"copyright\": \"℗ 2021 Paolo Montedonico\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2021-06-19T07:00:00Z\",\n    \"primaryGenreName\": \"Pop\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1496808208,\n    \"collectionId\": 1496813775,\n    \"amgArtistId\": 3699652,\n    \"artistName\": \"UPTOWN BOYBAND\",\n    \"collectionName\": \"BLACKPINK - Single\",\n    \"collectionCensoredName\": \"BLACKPINK - Single\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/uptown-boyband/1496808208?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-single/1496813775?uo=4\",\n    \"artworkUrl60\": \"https://is3-ssl.mzstatic.com/image/thumb/Music113/v4/b1/2f/f1/b12ff170-ba67-a3df-af6b-fb2ac0bda08d/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is3-ssl.mzstatic.com/image/thumb/Music113/v4/b1/2f/f1/b12ff170-ba67-a3df-af6b-fb2ac0bda08d/source/100x100bb.jpg\",\n    \"collectionPrice\": 1.29,\n    \"collectionExplicitness\": \"explicit\",\n    \"contentAdvisoryRating\": \"Explicit\",\n    \"trackCount\": 1,\n    \"copyright\": \"℗ 2020 CLUB UBB\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2020-02-03T08:00:00Z\",\n    \"primaryGenreName\": \"Pop\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1065825050,\n    \"collectionId\": 1456873558,\n    \"artistName\": \"Royal Sadness\",\n    \"collectionName\": \"Blackpink - Single\",\n    \"collectionCensoredName\": \"Blackpink - Single\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/royal-sadness/1065825050?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-single/1456873558?uo=4\",\n    \"artworkUrl60\": \"https://is1-ssl.mzstatic.com/image/thumb/Music113/v4/01/42/77/01427753-9a2e-403a-782c-4b296a616a72/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is1-ssl.mzstatic.com/image/thumb/Music113/v4/01/42/77/01427753-9a2e-403a-782c-4b296a616a72/source/100x100bb.jpg\",\n    \"collectionPrice\": 0.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 1,\n    \"copyright\": \"℗ 2019 Royal Sadness\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2019-03-19T07:00:00Z\",\n    \"primaryGenreName\": \"Electronic\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 331122,\n    \"collectionId\": 1479103847,\n    \"artistName\": \"Various Artists\",\n    \"collectionName\": \"Blackpink\",\n    \"collectionCensoredName\": \"Blackpink\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink/1479103847?uo=4\",\n    \"artworkUrl60\": \"https://is4-ssl.mzstatic.com/image/thumb/Music123/v4/35/68/83/3568834d-3efb-0a07-456b-064a39765161/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is4-ssl.mzstatic.com/image/thumb/Music123/v4/35/68/83/3568834d-3efb-0a07-456b-064a39765161/source/100x100bb.jpg\",\n    \"collectionPrice\": 8.91,\n    \"collectionExplicitness\": \"explicit\",\n    \"contentAdvisoryRating\": \"Explicit\",\n    \"trackCount\": 9,\n    \"copyright\": \"℗ 2019 Udea Zenti\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2019-09-04T07:00:00Z\",\n    \"primaryGenreName\": \"Hip-Hop/Rap\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1564279585,\n    \"collectionId\": 1531913742,\n    \"artistName\": \"WU\",\n    \"collectionName\": \"Blackpink - Single\",\n    \"collectionCensoredName\": \"Blackpink - Single\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/wu/1564279585?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-single/1531913742?uo=4\",\n    \"artworkUrl60\": \"https://is4-ssl.mzstatic.com/image/thumb/Music124/v4/6c/41/c0/6c41c038-e2f6-1e35-4b9b-31dfa09e7f53/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is4-ssl.mzstatic.com/image/thumb/Music124/v4/6c/41/c0/6c41c038-e2f6-1e35-4b9b-31dfa09e7f53/source/100x100bb.jpg\",\n    \"collectionPrice\": 0.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 1,\n    \"copyright\": \"℗ 2020 Bariswu Production\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2020-09-11T07:00:00Z\",\n    \"primaryGenreName\": \"Hip-Hop/Rap\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1141774019,\n    \"collectionId\": 1574291360,\n    \"amgArtistId\": 3243151,\n    \"artistName\": \"BLACKPINK\",\n    \"collectionName\": \"Lovesick Girls (Japan Version) - Single\",\n    \"collectionCensoredName\": \"Lovesick Girls (Japan Version) - Single\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/lovesick-girls-japan-version-single/1574291360?uo=4\",\n    \"artworkUrl60\": \"https://is3-ssl.mzstatic.com/image/thumb/Music125/v4/47/b9/aa/47b9aa2c-5220-32d5-46bf-fce3fec8eaf0/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is3-ssl.mzstatic.com/image/thumb/Music125/v4/47/b9/aa/47b9aa2c-5220-32d5-46bf-fce3fec8eaf0/source/100x100bb.jpg\",\n    \"collectionPrice\": 1.29,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 1,\n    \"copyright\": \"An Interscope Records release; ℗ 2021 UNIVERSAL MUSIC LLC\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2021-07-13T07:00:00Z\",\n    \"primaryGenreName\": \"K-Pop\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1200899105,\n    \"collectionId\": 1497233316,\n    \"artistName\": \"Bashment YC & Kali Blanco\",\n    \"collectionName\": \"Blackpink - Single\",\n    \"collectionCensoredName\": \"Blackpink - Single\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/bashment-yc/1200899105?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-single/1497233316?uo=4\",\n    \"artworkUrl60\": \"https://is2-ssl.mzstatic.com/image/thumb/Music123/v4/76/8f/d1/768fd1b6-08e8-f7a5-41d4-998f6db162ea/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is2-ssl.mzstatic.com/image/thumb/Music123/v4/76/8f/d1/768fd1b6-08e8-f7a5-41d4-998f6db162ea/source/100x100bb.jpg\",\n    \"collectionPrice\": 1.29,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 1,\n    \"copyright\": \"℗ 2020 Electric Station Label\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2020-03-06T08:00:00Z\",\n    \"primaryGenreName\": \"House\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1528237530,\n    \"collectionId\": 1530405192,\n    \"artistName\": \"Rolenbmusic\",\n    \"collectionName\": \"Blackpink - Single\",\n    \"collectionCensoredName\": \"Blackpink - Single\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/rolenbmusic/1528237530?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-single/1530405192?uo=4\",\n    \"artworkUrl60\": \"https://is4-ssl.mzstatic.com/image/thumb/Music114/v4/67/ff/43/67ff43e5-ca50-f2f1-4db2-a1622ecc7727/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is4-ssl.mzstatic.com/image/thumb/Music114/v4/67/ff/43/67ff43e5-ca50-f2f1-4db2-a1622ecc7727/source/100x100bb.jpg\",\n    \"collectionPrice\": 0.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 1,\n    \"copyright\": \"℗ 2020 RolenMusic\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2020-09-02T07:00:00Z\",\n    \"primaryGenreName\": \"Hip-Hop/Rap\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 19810758,\n    \"collectionId\": 1037593355,\n    \"amgArtistId\": 2120823,\n    \"artistName\": \"Les Black's Amazing Pink Holes\",\n    \"collectionName\": \"We're Glad We Are What We Are\",\n    \"collectionCensoredName\": \"We're Glad We Are What We Are\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/les-blacks-amazing-pink-holes/19810758?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/were-glad-we-are-what-we-are/1037593355?uo=4\",\n    \"artworkUrl60\": \"https://is5-ssl.mzstatic.com/image/thumb/Music69/v4/57/81/bf/5781bf3d-6af1-7aef-29d0-e076c08415bc/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is5-ssl.mzstatic.com/image/thumb/Music69/v4/57/81/bf/5781bf3d-6af1-7aef-29d0-e076c08415bc/source/100x100bb.jpg\",\n    \"collectionPrice\": 9.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 25,\n    \"copyright\": \"℗ 2000 Smog Veil Records\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2000-11-03T08:00:00Z\",\n    \"primaryGenreName\": \"Rock\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 211586470,\n    \"collectionId\": 211586462,\n    \"amgArtistId\": 943854,\n    \"artistName\": \"Little Mascara\",\n    \"collectionName\": \"Hot Pink & Black\",\n    \"collectionCensoredName\": \"Hot Pink & Black\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/little-mascara/211586470?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/hot-pink-black/211586462?uo=4\",\n    \"artworkUrl60\": \"https://is4-ssl.mzstatic.com/image/thumb/Music/v4/cf/2d/57/cf2d575f-6bda-d63c-3a45-d1731efa228c/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is4-ssl.mzstatic.com/image/thumb/Music/v4/cf/2d/57/cf2d575f-6bda-d63c-3a45-d1731efa228c/source/100x100bb.jpg\",\n    \"collectionPrice\": 9.90,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 10,\n    \"copyright\": \"℗ 2006 Candy Darling Records\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2006-12-18T08:00:00Z\",\n    \"primaryGenreName\": \"Rock\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1292250339,\n    \"collectionId\": 1436989049,\n    \"artistName\": \"Ferrini 41\",\n    \"collectionName\": \"The Pink and Black Project\",\n    \"collectionCensoredName\": \"The Pink and Black Project\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/ferrini-41/1292250339?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/the-pink-and-black-project/1436989049?uo=4\",\n    \"artworkUrl60\": \"https://is5-ssl.mzstatic.com/image/thumb/Music128/v4/36/ea/0e/36ea0ec9-c398-bd3a-af1b-33b8e09b0db4/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is5-ssl.mzstatic.com/image/thumb/Music128/v4/36/ea/0e/36ea0ec9-c398-bd3a-af1b-33b8e09b0db4/source/100x100bb.jpg\",\n    \"collectionPrice\": 6.21,\n    \"collectionExplicitness\": \"explicit\",\n    \"contentAdvisoryRating\": \"Explicit\",\n    \"trackCount\": 9,\n    \"copyright\": \"℗ 2018 41 Mob\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2018-09-20T07:00:00Z\",\n    \"primaryGenreName\": \"Hip-Hop/Rap\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1521729674,\n    \"collectionId\": 1538532761,\n    \"artistName\": \"Pianella Piano\",\n    \"collectionName\": \"Piano Tribute to Blackpink, Vol. 1\",\n    \"collectionCensoredName\": \"Piano Tribute to Blackpink, Vol. 1\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/pianella-piano/1521729674?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/piano-tribute-to-blackpink-vol-1/1538532761?uo=4\",\n    \"artworkUrl60\": \"https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/28/50/ea/2850eaa2-5170-d0c4-a917-5b968af8549a/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/28/50/ea/2850eaa2-5170-d0c4-a917-5b968af8549a/source/100x100bb.jpg\",\n    \"collectionPrice\": 9.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 16,\n    \"copyright\": \"℗ 2020 Pianella Piano\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2020-11-03T08:00:00Z\",\n    \"primaryGenreName\": \"K-Pop\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 320714476,\n    \"collectionId\": 320714466,\n    \"amgArtistId\": 1164901,\n    \"artistName\": \"The Big Pink Black\",\n    \"collectionName\": \"The Big Pink Black\",\n    \"collectionCensoredName\": \"The Big Pink Black\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/the-big-pink-black/320714476?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/the-big-pink-black/320714466?uo=4\",\n    \"artworkUrl60\": \"https://is4-ssl.mzstatic.com/image/thumb/Music/v4/40/5a/71/405a7176-6a6e-7905-a20a-551f35b0067c/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is4-ssl.mzstatic.com/image/thumb/Music/v4/40/5a/71/405a7176-6a6e-7905-a20a-551f35b0067c/source/100x100bb.jpg\",\n    \"collectionPrice\": 8.91,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 9,\n    \"copyright\": \"℗ 2009 The Big Pink Black\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2009-06-15T07:00:00Z\",\n    \"primaryGenreName\": \"Rock\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 19810758,\n    \"collectionId\": 1037558837,\n    \"amgArtistId\": 2120823,\n    \"artistName\": \"Les Black's Amazing Pink Holes\",\n    \"collectionName\": \"Breakfast With the Holes\",\n    \"collectionCensoredName\": \"Breakfast With the Holes\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/les-blacks-amazing-pink-holes/19810758?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/breakfast-with-the-holes/1037558837?uo=4\",\n    \"artworkUrl60\": \"https://is1-ssl.mzstatic.com/image/thumb/Music5/v4/cb/5e/97/cb5e9702-776a-b6c4-5e83-d8f99915eae0/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is1-ssl.mzstatic.com/image/thumb/Music5/v4/cb/5e/97/cb5e9702-776a-b6c4-5e83-d8f99915eae0/source/100x100bb.jpg\",\n    \"collectionPrice\": 9.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 18,\n    \"copyright\": \"℗ 2008 Smog Veil Records\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2008-07-31T07:00:00Z\",\n    \"primaryGenreName\": \"Rock\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 368236250,\n    \"collectionId\": 1087165594,\n    \"amgArtistId\": 2092643,\n    \"artistName\": \"Tex Smith\",\n    \"collectionName\": \"Pink and Black\",\n    \"collectionCensoredName\": \"Pink and Black\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/tex-smith/368236250?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/pink-and-black/1087165594?uo=4\",\n    \"artworkUrl60\": \"https://is5-ssl.mzstatic.com/image/thumb/Music69/v4/57/ee/e6/57eee68a-5500-e3d0-b0f6-f2920de9c322/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is5-ssl.mzstatic.com/image/thumb/Music69/v4/57/ee/e6/57eee68a-5500-e3d0-b0f6-f2920de9c322/source/100x100bb.jpg\",\n    \"collectionPrice\": 9.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 13,\n    \"copyright\": \"℗ 2015 Tex Smith\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2015-12-11T08:00:00Z\",\n    \"primaryGenreName\": \"Country\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1083661855,\n    \"collectionId\": 1484425793,\n    \"artistName\": \"AKAI SOLO & Pink Siifu\",\n    \"collectionName\": \"Black Sand\",\n    \"collectionCensoredName\": \"Black Sand\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/akai-solo/1083661855?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/black-sand/1484425793?uo=4\",\n    \"artworkUrl60\": \"https://is3-ssl.mzstatic.com/image/thumb/Music114/v4/5c/f0/35/5cf03578-66a4-edb5-6a3d-9e2c7e51d707/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is3-ssl.mzstatic.com/image/thumb/Music114/v4/5c/f0/35/5cf03578-66a4-edb5-6a3d-9e2c7e51d707/source/100x100bb.jpg\",\n    \"collectionPrice\": 9.99,\n    \"collectionExplicitness\": \"explicit\",\n    \"contentAdvisoryRating\": \"Explicit\",\n    \"trackCount\": 15,\n    \"copyright\": \"℗ 2019 Field-Left\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2019-10-29T07:00:00Z\",\n    \"primaryGenreName\": \"Hip-Hop/Rap\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1569909010,\n    \"collectionId\": 1569916263,\n    \"artistName\": \"RDQO BEATS\",\n    \"collectionName\": \"Black Pink - Single\",\n    \"collectionCensoredName\": \"Black Pink - Single\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/rdqo-beats/1569909010?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/black-pink-single/1569916263?uo=4\",\n    \"artworkUrl60\": \"https://is5-ssl.mzstatic.com/image/thumb/Music125/v4/31/d0/86/31d086d0-35c2-3fef-5170-664f5d2249ff/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is5-ssl.mzstatic.com/image/thumb/Music125/v4/31/d0/86/31d086d0-35c2-3fef-5170-664f5d2249ff/source/100x100bb.jpg\",\n    \"collectionPrice\": 0.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 1,\n    \"copyright\": \"℗ 2021 3075302 Records DK\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2021-05-27T07:00:00Z\",\n    \"primaryGenreName\": \"Hip-Hop/Rap\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1204917424,\n    \"collectionId\": 1358440377,\n    \"artistName\": \"BlackPink\",\n    \"collectionName\": \"Peep Show - EP\",\n    \"collectionCensoredName\": \"Peep Show - EP\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1204917424?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/peep-show-ep/1358440377?uo=4\",\n    \"artworkUrl60\": \"https://is1-ssl.mzstatic.com/image/thumb/Music128/v4/d6/91/77/d691770d-270b-e2fa-ce34-ad318234e22f/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is1-ssl.mzstatic.com/image/thumb/Music128/v4/d6/91/77/d691770d-270b-e2fa-ce34-ad318234e22f/source/100x100bb.jpg\",\n    \"collectionPrice\": 4.95,\n    \"collectionExplicitness\": \"explicit\",\n    \"contentAdvisoryRating\": \"Explicit\",\n    \"trackCount\": 5,\n    \"copyright\": \"℗ 2018 Black Pink\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2018-03-08T08:00:00Z\",\n    \"primaryGenreName\": \"Alternative\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1445708481,\n    \"collectionId\": 1457441806,\n    \"artistName\": \"Gavin\",\n    \"collectionName\": \"Pink and Black\",\n    \"collectionCensoredName\": \"Pink and Black\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/gavin/1445708481?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/pink-and-black/1457441806?uo=4\",\n    \"artworkUrl60\": \"https://is1-ssl.mzstatic.com/image/thumb/Music113/v4/96/1c/68/961c688f-216c-af37-fd34-7700fe7ac808/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is1-ssl.mzstatic.com/image/thumb/Music113/v4/96/1c/68/961c688f-216c-af37-fd34-7700fe7ac808/source/100x100bb.jpg\",\n    \"collectionPrice\": 7.53,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 7,\n    \"copyright\": \"℗ 2019 BOVEE's PRODUCE DEPT.\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2019-03-28T07:00:00Z\",\n    \"primaryGenreName\": \"Pop\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1413635617,\n    \"collectionId\": 1442944804,\n    \"artistName\": \"Latindian Style\",\n    \"collectionName\": \"Black Pink - Single\",\n    \"collectionCensoredName\": \"Black Pink - Single\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/latindian-style/1413635617?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/black-pink-single/1442944804?uo=4\",\n    \"artworkUrl60\": \"https://is3-ssl.mzstatic.com/image/thumb/Music128/v4/5d/39/24/5d39240c-064e-feda-942d-dc3b46582d68/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is3-ssl.mzstatic.com/image/thumb/Music128/v4/5d/39/24/5d39240c-064e-feda-942d-dc3b46582d68/source/100x100bb.jpg\",\n    \"collectionPrice\": 0.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 1,\n    \"copyright\": \"℗ 2018 Hinjew Records\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2018-07-29T07:00:00Z\",\n    \"primaryGenreName\": \"Techno\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1499787910,\n    \"collectionId\": 1553000005,\n    \"artistName\": \"firstclasslikealways\",\n    \"collectionName\": \"Black Pink - Single\",\n    \"collectionCensoredName\": \"Black Pink - Single\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/firstclasslikealways/1499787910?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/black-pink-single/1553000005?uo=4\",\n    \"artworkUrl60\": \"https://is3-ssl.mzstatic.com/image/thumb/Music124/v4/2e/de/87/2ede8757-1d9d-f9ce-1cca-4e8c853d45e4/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is3-ssl.mzstatic.com/image/thumb/Music124/v4/2e/de/87/2ede8757-1d9d-f9ce-1cca-4e8c853d45e4/source/100x100bb.jpg\",\n    \"collectionPrice\": 0.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 1,\n    \"copyright\": \"℗ 2021 1604518 Records DK\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2021-02-08T08:00:00Z\",\n    \"primaryGenreName\": \"Pop\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1472450899,\n    \"collectionId\": 1472865026,\n    \"artistName\": \"Jesus the Snake\",\n    \"collectionName\": \"Black Acid, Pink Rain\",\n    \"collectionCensoredName\": \"Black Acid, Pink Rain\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/jesus-the-snake/1472450899?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/black-acid-pink-rain/1472865026?uo=4\",\n    \"artworkUrl60\": \"https://is2-ssl.mzstatic.com/image/thumb/Music113/v4/f3/c4/99/f3c4996b-c0ae-90a2-0bcd-64a59784ca6f/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is2-ssl.mzstatic.com/image/thumb/Music113/v4/f3/c4/99/f3c4996b-c0ae-90a2-0bcd-64a59784ca6f/source/100x100bb.jpg\",\n    \"collectionPrice\": 9.99,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 5,\n    \"copyright\": \"℗ 2019 1363643 Records DK\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2019-07-11T07:00:00Z\",\n    \"primaryGenreName\": \"Alternative\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 1458647578,\n    \"collectionId\": 500609353,\n    \"artistName\": \"Black Earth\",\n    \"collectionName\": \"Pink Champagne\",\n    \"collectionCensoredName\": \"Pink Champagne\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/black-earth/1458647578?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/pink-champagne/500609353?uo=4\",\n    \"artworkUrl60\": \"https://is1-ssl.mzstatic.com/image/thumb/Music/v4/f3/c7/66/f3c766b1-7ac7-8f1e-9d53-cdfbdcd565a4/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is1-ssl.mzstatic.com/image/thumb/Music/v4/f3/c7/66/f3c766b1-7ac7-8f1e-9d53-cdfbdcd565a4/source/100x100bb.jpg\",\n    \"collectionPrice\": 9.90,\n    \"collectionExplicitness\": \"explicit\",\n    \"contentAdvisoryRating\": \"Explicit\",\n    \"trackCount\": 10,\n    \"copyright\": \"℗ 2012 Purple Kush\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2012-01-03T08:00:00Z\",\n    \"primaryGenreName\": \"Rock\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 964320885,\n    \"collectionId\": 964320884,\n    \"artistName\": \"Lindy Vision\",\n    \"collectionName\": \"Pink + Black - EP\",\n    \"collectionCensoredName\": \"Pink + Black - EP\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/lindy-vision/964320885?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/pink-black-ep/964320884?uo=4\",\n    \"artworkUrl60\": \"https://is2-ssl.mzstatic.com/image/thumb/Music5/v4/6a/c5/5a/6ac55ade-2bd0-0f22-deae-ff468ca2419a/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is2-ssl.mzstatic.com/image/thumb/Music5/v4/6a/c5/5a/6ac55ade-2bd0-0f22-deae-ff468ca2419a/source/100x100bb.jpg\",\n    \"collectionPrice\": 4.95,\n    \"collectionExplicitness\": \"explicit\",\n    \"contentAdvisoryRating\": \"Explicit\",\n    \"trackCount\": 5,\n    \"copyright\": \"℗ 2014 Lindy Vision\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2014-07-18T07:00:00Z\",\n    \"primaryGenreName\": \"Electronic\"\n  }, {\n    \"wrapperType\": \"collection\",\n    \"collectionType\": \"Album\",\n    \"artistId\": 47793786,\n    \"collectionId\": 1398956234,\n    \"amgArtistId\": 685284,\n    \"artistName\": \"The Pink Spiders\",\n    \"collectionName\": \"Black Dagger - Single\",\n    \"collectionCensoredName\": \"Black Dagger - Single\",\n    \"artistViewUrl\": \"https://music.apple.com/us/artist/the-pink-spiders/47793786?uo=4\",\n    \"collectionViewUrl\": \"https://music.apple.com/us/album/black-dagger-single/1398956234?uo=4\",\n    \"artworkUrl60\": \"https://is5-ssl.mzstatic.com/image/thumb/Music115/v4/05/b0/24/05b0243f-b852-8ed8-8f75-3a6edd2105f3/source/60x60bb.jpg\",\n    \"artworkUrl100\": \"https://is5-ssl.mzstatic.com/image/thumb/Music115/v4/05/b0/24/05b0243f-b852-8ed8-8f75-3a6edd2105f3/source/100x100bb.jpg\",\n    \"collectionPrice\": 1.29,\n    \"collectionExplicitness\": \"notExplicit\",\n    \"trackCount\": 1,\n    \"copyright\": \"℗ 2018 Mean Buzz Records\",\n    \"country\": \"USA\",\n    \"currency\": \"USD\",\n    \"releaseDate\": \"2017-12-05T08:00:00Z\",\n    \"primaryGenreName\": \"Rock\"\n  }]\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (music_list);\n\n//# sourceURL=webpack://muibasic_starterkit/./src/data.js?");
-
-/***/ }),
-
 /***/ "./src/index.js":
 /*!**********************!*\
   !*** ./src/index.js ***!
@@ -2933,7 +2922,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	(() => {
-/******/ 		__webpack_require__.h = () => ("d0344dfe4da5fabb89a6")
+/******/ 		__webpack_require__.h = () => ("6e72e44cc3c02c07fbc3")
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/global */
diff --git a/src/App.js b/src/App.js
index 6aac4cb940a492838137367c3196294a28d56bf6..e8a1479edc7dfe1aa4248e869e783d4b71f59872 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,19 +1,38 @@
 import React from 'react';
-import MusicList from './MusicList';
-import music_list from './data';
-import SearchPage from  './SearchPage';
-import {Box, Tabs, Tab, Typography, AppBar, CssBaseline} from '@mui/material';
+import SearchPage from './SearchPage';
+import { Box, Tabs, Tab, Typography, AppBar, CssBaseline } from '@mui/material';
 import Favorites from './Favorites';
+import { useEffect } from 'react';
 
-
-export default function App () {
+export default function App() {
     const [currentTab, setCurrentTab] = React.useState(0);
     const [searchResult, setSearchResult] = React.useState([]);
     const [favoriteList, setFavoriteList] = React.useState([]);
     const [likes, setLikes] = React.useState({});
 
+    useEffect(() => {
+        fetchData();
+    }, []);
+
+    const fetchData = () => {
+        fetch('/likes')
+            .then(r => r.json())
+            .then(data => {
+                setFavoriteList(data);
+                setLikes((prevlist) => {
+                    const updatedLikes = { ...prevlist };
+                    data.forEach((item) => {
+                        if (!updatedLikes.hasOwnProperty(item.collectionId)) {
+                            updatedLikes[item.collectionId] = true;
+                        }
+                    });
+                    return updatedLikes;
+                })
+            }).catch(error => console.log('Failed to fetch data from the database'))
+    };
+
     const handleTabChange = (event, newValue) => {
-       setCurrentTab(newValue);
+        setCurrentTab(newValue);
     }
 
     const addToFavoriteList = (item) => {
@@ -28,46 +47,42 @@ export default function App () {
     const removeFromFavoriteList = (id) => {
         setFavoriteList((prevList) => prevList.filter((item) => item.collectionId !== id));
     };
-    
+
 
     return (
         <React.Fragment>
             <AppBar title="Hong seokmin" position="fixed">
                 <Typography align="center" variant="h3" color="inherit">Hong Seok Min </Typography>
             </AppBar>
-            <div style={{height: 60, width: '100%'}}></div>
-            {/*<MusicList list={music_list}>
-            </MusicList>*/}
-            {/*<SearchPage/>*/}
-            <Box sx={{borderBottom: 1, borderColor: 'divider'}}>
-                <Tabs value={currentTab} onChange={handleTabChange} aria-label='basic tabs'centered>
-                    <Tab label='Search Music' value={0}/>
-                    <Tab label='Favorite' value={1}/>
-                    <Tab label='More Contents' value={2}/>
+            <div style={{ height: 60, width: '100%' }}></div>
+            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                <Tabs value={currentTab} onChange={handleTabChange} aria-label='basic tabs' centered>
+                    <Tab label='Search Music' value={0} />
+                    <Tab label='Favorite' value={1} />
+                    <Tab label='More Contents' value={2} />
                 </Tabs>
             </Box>
-            { currentTab === 0 && (
-            <SearchPage
-            list={searchResult}
-            onSearch={setSearchResult}
-            favoriteList={favoriteList}
-            addToFavoriteList={addToFavoriteList}
-            likes={likes}
-            handleLikes={handleLikes}
-            />
+            {currentTab === 0 && (
+                <SearchPage
+                    list={searchResult}
+                    onSearch={setSearchResult}
+                    favoriteList={favoriteList}
+                    addToFavoriteList={addToFavoriteList}
+                    likes={likes}
+                    handleLikes={handleLikes}
+                    removeFromFavoriteList={removeFromFavoriteList}
+                />
             )}
-            {/* { currentTab == 1 && <Typography align='center' variant='h2'> Item Two</Typography>} */}
             {currentTab === 1 && (
-            <Favorites
-            favoriteList={favoriteList}
-            addToFavoriteList={addToFavoriteList}
-            likes={likes}
-            handleLikes={handleLikes}
-            removeFromFavoriteList={removeFromFavoriteList}
-            />
+                <Favorites
+                    favoriteList={favoriteList}
+                    likes={likes}
+                    handleLikes={handleLikes}
+                    removeFromFavoriteList={removeFromFavoriteList}
+                />
             )}
-            { currentTab == 2 && <Typography align='center' variant='h2'> Item Three</Typography>}
-            
+            {currentTab == 2 && <Typography align='center' variant='h2'> Item Three</Typography>}
+
         </React.Fragment>
     )
 }
diff --git a/src/Favorites.js b/src/Favorites.js
index efb9726bc3a087aee1b446eda38d412c3ba07a6f..83e334b12e747db67e6781b09c4c8e2323a75719 100644
--- a/src/Favorites.js
+++ b/src/Favorites.js
@@ -12,38 +12,56 @@ const styles = {
     card: {
         minWidth: 275,
         maxWidth: 600,
-        marginButtom: "20pt",
+        marginBottom: "20pt",
         marginLeft: 'auto',
         marginRight: 'auto',
     },
 }
 
-export default function Favorites ({favoriteList, likes, handleLikes, removeFromFavoriteList}) {
+export default function Favorites({ favoriteList, likes, handleLikes, removeFromFavoriteList }) {
     const [favoriteLikes, setFavoriteLikes] = useState(likes);
 
-    const toggleFavorite = (id) => {
+    const toggleFavorite = async (id, name) => {
         const updatedLikes = { ...favoriteLikes, [id]: !favoriteLikes[id] };
         setFavoriteLikes(updatedLikes);
         handleLikes(id);
+        removeFromFavoriteList(id);
+
+        try {
+            const response = await fetch(`/likes/${id}`, {
+                method: "DELETE"
+            });
+
+            const data = await response.json();
+            if (data === 1) {
+                console.log('remove success');
+            } else if (data === 0) {
+                console.log('not restored database');
+            }
+        } catch (error) {
+            console.log('unexpected error');
+        }
+
     };
 
     const filteredFavoriteList = favoriteList.filter((item) => favoriteLikes[item.collectionId] === true);
 
     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>
-        ))}
+            {filteredFavoriteList.map((item) => (
+                <Card sx={styles.card} key={item.collectionId}>
+                    <CardContent>
+                        <Typography variant="subtitle1">{item.artistName}</Typography>
+                        <Typography variant="subtitle2">{item.collectionName}</Typography>
+                    </CardContent>
+                    <CardActions>
+                        <IconButton onClick={() => toggleFavorite(item.collectionId, item.collectionName)}>
+                            {favoriteLikes[item.collectionId] ? <Favorite /> : <FavoriteBorder />}
+                        </IconButton>
+                    </CardActions>
+                </Card>
+            ))}
         </div>
     );
 }
+
diff --git a/src/MusicList.js b/src/MusicList.js
index 7ccd18ba850fff8d7411ff3ee5f9b3d086fffdb6..333bb3f56d0aaac500bca9f1abf48b9678ea6f33 100644
--- a/src/MusicList.js
+++ b/src/MusicList.js
@@ -12,58 +12,91 @@ const styles = {
     card: {
         minWidth: 275,
         maxWidth: 600,
-        marginButtom: "20pt",
+        marginBottom: "20pt",
         marginLeft: 'auto',
         marginRight: 'auto',
     },
 };
 
-export default function MusicList({ list, favoriteList, addToFavoriteList, likes, handleLikes }) {
+export default function MusicList({ list, favoriteList, addToFavoriteList, likes, handleLikes, removeFromFavoriteList }) {
     let [snackState, setSnackState] = React.useState({ open: false, msg: '' });
 
-    const toggleFavorite = (id, name) => () => {
+    const toggleFavorite = (id, name) => async () => {
         const updatedLikes = { ...likes, [id]: !likes[id] };
         handleLikes(id);
-        setSnackState({ ...snackState, open: true, msg: `${name} is clicked` });
+        setSnackState({ open: true, msg: `${name}이(가) 클릭되었습니다.` });
 
         if (updatedLikes[id]) {
-        if (!favoriteList.find((item) => item.collectionId === id)) {
-            addToFavoriteList(list.find((item) => item.collectionId === id));
-        }
+            if (!favoriteList.find((item) => item.collectionId === id)) {
+                addToFavoriteList(list.find((item) => item.collectionId === id));
+
+                try {
+                    const response = await fetch(`/likes`, {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json",
+                        },
+                        body: JSON.stringify(list.find((item) => item.collectionId === id))
+                    });
+
+                    const data = await response.json();
+                    if (data === 1) {
+                        console.log('데이터가 성공적으로 저장됨');
+                    }
+                    if(data === -1){
+                        console.log('데이터가 이미 저장되어 있음')
+                    }
+                } catch (error) {
+                    console.log('데이터가 저장되지 않음');
+                }
+            }
         } else {
-        const updatedFavoriteList = favoriteList.filter((item) => item.collectionId !== id);
-        addToFavoriteList(updatedFavoriteList);
+            // const updatedFavoriteList = favoriteList.filter((item) => item.collectionId !== id);
+            removeFromFavoriteList(id);
+
+            try {
+                const response = await fetch(`/likes/${id}`, {
+                    method: "DELETE"
+                });
+
+                const data = await response.json();
+                if (data === 1) {
+                    console.log('remove success');
+                } else if (data === 0) {
+                    console.log('not restored database');
+                }
+            } catch (error) {
+                console.log('unexpected error');
+            }
         }
-  };
+    };
 
-  const handleSnackbarClose = (event, reason) => {
+    const handleSnackbarClose = (event, reason) => {
         if (reason === 'clickaway') {
-        return;
+            return;
         }
         setSnackState({ open: false, msg: '' });
-  };
+    };
 
-  return (
+    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] === true ? <Favorite /> : <FavoriteBorder />}
-                        <SnackMsg open={snackState.open} message={snackState.msg} onClose={handleSnackbarClose} />
-                    </IconButton>
-                </CardActions>
-            </Card>
-            );
-        })}
+            {list.map((item) => {
+                return (
+                    <Card sx={styles.card} key={item.collectionId}>
+                        <CardContent>
+                            <Typography variant="subtitle1">{item.artistName}</Typography>
+                            <Typography variant="subtitle2">{item.collectionCensoredName}</Typography>
+                        </CardContent>
+                        <CardActions>
+                            <IconButton onClick={toggleFavorite(item.collectionId, item.collectionName)}>
+                                {likes[item.collectionId] === true ? <Favorite /> : <FavoriteBorder />}
+                            </IconButton>
+                        </CardActions>
+                    </Card>
+                );
+            })}
+            <SnackMsg open={snackState.open} message={snackState.msg} onClose={handleSnackbarClose} />
         </div>
-  );
-
+    );
 }
 
-
diff --git a/src/SearchPage.js b/src/SearchPage.js
index f0669a2f6ea43df0818c4294797ff269bc5cec2d..1d59b065766efeda0cbe8d7cb56dccab504dcca3 100644
--- a/src/SearchPage.js
+++ b/src/SearchPage.js
@@ -1,19 +1,20 @@
+
 import React from "react";
 import { Button, TextField } from "@mui/material";
 import MusicList from "./MusicList";
 
-export default function SearchPage ({list, onSearch, favoriteList, addToFavoriteList, likes, handleLikes }) {
+export default function SearchPage({ list, onSearch, favoriteList, addToFavoriteList, likes, handleLikes, removeFromFavoriteList }) {
     const [searchWord, setSearchWord] = React.useState('');
     const handleSearch = (event) => {
         event.preventDefault();
         console.log(searchWord);
         setSearchWord('');
-        fetch(`http://itunes.apple.com/search?term=${searchWord}&entity=album`)
-        .then(r => r.json()).then(r => {
-            console.log(r);
-            onSearch(r.results);
-            setSearchWord('');
-        }).catch(e => console.log('error when search musician'));
+        fetch(`/musicSearch/${searchWord}`)
+            .then(r => r.json()).then(r => {
+                console.log(r);
+                onSearch(r.results);
+                setSearchWord('');
+            }).catch(e => console.log('error when search musician'));
     }
 
     const handleSearchTextChange = (event) => {
@@ -21,26 +22,28 @@ export default function SearchPage ({list, onSearch, favoriteList, addToFavorite
     }
     return (
         <React.Fragment>
-            <form style= {{display: 'flex', marginTop : 20, marginbottom : 15}}>
-                <div style={{display : 'flex', marginLeft : 'auto', marginRight : 'auto',}}>
-                    <TextField variant='outlined' label="Music Album Search" type='search' style={{width : 450}}
-                    onChange={handleSearchTextChange} value={searchWord}>
+            <form style={{ display: 'flex', marginTop: 20, marginbottom: 15 }}>
+                <div style={{ display: 'flex', marginLeft: 'auto', marginRight: 'auto', }}>
+                    <TextField variant='outlined' label="Music Album Search" type='search' style={{ width: 450 }}
+                        onChange={handleSearchTextChange} value={searchWord}>
                     </TextField>
                     <Button variant="contained" color='primary'
-                    type='submit' onClick={handleSearch}
-                    style={{marginLeft : 20}}>
-                    Search       
+                        type='submit' onClick={handleSearch}
+                        style={{ marginLeft: 20 }}>
+                        Search
                     </Button>
                 </div>
             </form>
 
-            <MusicList list={list} 
-            favoriteList={favoriteList} 
-            addToFavoriteList={addToFavoriteList} 
-            likes={likes} 
-            handleLikes={handleLikes} >
+            <MusicList list={list}
+                favoriteList={favoriteList}
+                addToFavoriteList={addToFavoriteList}
+                likes={likes}
+                handleLikes={handleLikes}
+                removeFromFavoriteList={removeFromFavoriteList}>
             </MusicList>
         </React.Fragment>
     )
 }
 
+
diff --git a/webpack.config.js b/webpack.config.js
index da15307110cfaa9a89748fc499c99305516746d3..a612943585742635132744e8d6276f8c2a751f31 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -7,7 +7,7 @@ module.exports = {
     },
     output: {
         filename: '[name].bundle.js',
-        path: path.resolve(__dirname, 'public')
+        path: path.resolve("../workspace/myspringweb/src/main/resources", 'public')
     },
     module: {
         rules: [{