diff --git a/public/app.bundle.js b/public/app.bundle.js
index c80326f863d803424973788dfe7b42031bf012ba..55fabca6e82b2601400e5980031853f64f1a75ed 100644
--- a/public/app.bundle.js
+++ b/public/app.bundle.js
@@ -2403,7 +2403,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 _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 _SearchPage__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SearchPage */ \"./src/SearchPage.js\");\n/* harmony import */ var _Favorites__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Favorites */ \"./src/Favorites.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\nfunction App() {\n var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState(0),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n currentTab = _React$useState2[0],\n setCurrentTab = _React$useState2[1];\n var _React$useState3 = react__WEBPACK_IMPORTED_MODULE_0___default().useState([]),\n _React$useState4 = _slicedToArray(_React$useState3, 2),\n searchResult = _React$useState4[0],\n setSearchResult = _React$useState4[1];\n var _React$useState5 = react__WEBPACK_IMPORTED_MODULE_0___default().useState({}),\n _React$useState6 = _slicedToArray(_React$useState5, 2),\n likes = _React$useState6[0],\n setLikes = _React$useState6[1];\n var _React$useState7 = react__WEBPACK_IMPORTED_MODULE_0___default().useState([]),\n _React$useState8 = _slicedToArray(_React$useState7, 2),\n favorites = _React$useState8[0],\n setFavorites = _React$useState8[1];\n var handleLike = function handleLike(id, item) {\n setLikes(_objectSpread(_objectSpread({}, likes), {}, _defineProperty({}, id, !likes[id])));\n if (likes[id]) {\n setFavorites(function (prevFavorites) {\n return prevFavorites.filter(function (favorite) {\n return favorite.collectionId !== id;\n });\n });\n } else {\n setFavorites(function (prevFavorites) {\n return [].concat(_toConsumableArray(prevFavorites), [item]);\n });\n }\n };\n var handleTabChange = function handleTabChange(event, newValue) {\n setCurrentTab(newValue);\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\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 }, \"\\uAE40\\uC2DC\\uC6D0's Favorite Music\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n style: {\n height: 60,\n width: '100%'\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n sx: {\n borderBottom: 1,\n borderColor: 'divider'\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n value: currentTab,\n onChange: handleTabChange,\n \"aria-label\": \"basic tabs\",\n centered: true\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n label: \"Search Music\",\n value: 0\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n label: \"Favorites\",\n value: 1\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n label: \"More Contents\",\n value: 2\n }))), currentTab === 0 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SearchPage__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n list: searchResult,\n onSearch: setSearchResult,\n likes: likes,\n onLike: handleLike\n }), currentTab === 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Favorites__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n list: favorites,\n likes: likes,\n onLike: handleLike\n }), currentTab == 2 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n alogn: \"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 _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 _SearchPage__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SearchPage */ \"./src/SearchPage.js\");\n/* harmony import */ var _Favorites__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Favorites */ \"./src/Favorites.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\nfunction App() {\n var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState(0),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n currentTab = _React$useState2[0],\n setCurrentTab = _React$useState2[1];\n var _React$useState3 = react__WEBPACK_IMPORTED_MODULE_0___default().useState([]),\n _React$useState4 = _slicedToArray(_React$useState3, 2),\n searchResult = _React$useState4[0],\n setSearchResult = _React$useState4[1];\n var _React$useState5 = react__WEBPACK_IMPORTED_MODULE_0___default().useState({}),\n _React$useState6 = _slicedToArray(_React$useState5, 2),\n likes = _React$useState6[0],\n setLikes = _React$useState6[1];\n var _React$useState7 = react__WEBPACK_IMPORTED_MODULE_0___default().useState([]),\n _React$useState8 = _slicedToArray(_React$useState7, 2),\n favorites = _React$useState8[0],\n setFavorites = _React$useState8[1];\n var handleLike = function handleLike(id, item) {\n setLikes(_objectSpread(_objectSpread({}, likes), {}, _defineProperty({}, id, !likes[id])));\n if (!likes[id]) {\n fetch(\"/likes\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\"\n },\n body: JSON.stringify(item)\n })[\"catch\"](function (e) {\n return console.log(\"error post\");\n });\n setFavorites(function (prev) {\n return [].concat(_toConsumableArray(prev), [item]);\n });\n } else {\n fetch(\"/likes/\".concat(id), {\n method: \"DELETE\"\n })[\"catch\"](function (e) {\n return console.log(\"error delete\");\n });\n setFavorites(function (prev) {\n return prev.filter(function (item) {\n return item.collectionId !== id;\n });\n });\n }\n };\n var handleTabChange = function handleTabChange(event, newValue) {\n setCurrentTab(newValue);\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\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 }, \"\\uAE40\\uC2DC\\uC6D0's Favorite Music\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n style: {\n height: 60,\n width: \"100%\"\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n sx: {\n borderBottom: 1,\n borderColor: \"divider\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n value: currentTab,\n onChange: handleTabChange,\n \"aria-label\": \"basic tabs\",\n centered: true\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n label: \"Search Music\",\n value: 0\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n label: \"Favorites\",\n value: 1\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n label: \"More Contents\",\n value: 2\n }))), currentTab === 0 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SearchPage__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n list: searchResult,\n onSearch: setSearchResult,\n likes: likes,\n onLike: handleLike\n }), currentTab === 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Favorites__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n list: favorites,\n likes: likes,\n onLike: handleLike\n }), currentTab == 2 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n alogn: \"center\",\n variant: \"h2\"\n }, \" \", \"Item Three\"));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/App.js?");
/***/ }),
@@ -2425,7 +2425,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 marginBottom: \"20pt\",\n marginLeft: 'auto',\n marginRight: 'auto'\n }\n};\nfunction MusicList(_ref) {\n var list = _ref.list,\n likes = _ref.likes,\n onLike = _ref.onLike;\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, item) {\n return function () {\n onLike(id, item);\n setSnackState(_objectSpread(_objectSpread({}, snackState), {}, {\n open: true,\n msg: \"\".concat(name, \" is clicked\")\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 var isLiked = likes[item.collectionId] === true;\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.artistName), /*#__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(_SnackMsg__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n open: snackState.open,\n message: snackState.msg,\n onClose: handleSnackbarClose\n }), /*#__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.collectionCensoredName, item)\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))));\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 marginBottom: \"20pt\",\n marginLeft: \"auto\",\n marginRight: \"auto\"\n }\n};\nfunction MusicList(_ref) {\n var list = _ref.list,\n likes = _ref.likes,\n onLike = _ref.onLike;\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, item) {\n return function () {\n onLike(id, item);\n setSnackState(_objectSpread(_objectSpread({}, snackState), {}, {\n open: true,\n msg: \"\".concat(name, \" is clicked\")\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 var isLiked = likes[item.collectionId] === true;\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.artistName), /*#__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(_SnackMsg__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n open: snackState.open,\n message: snackState.msg,\n onClose: handleSnackbarClose\n }), /*#__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.collectionCensoredName, item)\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))));\n }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/MusicList.js?");
/***/ }),
@@ -2436,7 +2436,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 likes = _ref.likes,\n onLike = _ref.onLike;\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 likes: likes,\n onLike: onLike\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 likes = _ref.likes,\n onLike = _ref.onLike;\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(\"/musicSearch/\".concat(searchWord)).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 likes: likes,\n onLike: onLike\n }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/SearchPage.js?");
/***/ }),
@@ -2999,7 +2999,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
/******/
/******/ /* webpack/runtime/getFullHash */
/******/ (() => {
-/******/ __webpack_require__.h = () => ("c9b8d5a2c040b3a77c52")
+/******/ __webpack_require__.h = () => ("ecb5a7f703d23a57da4c")
/******/ })();
/******/
/******/ /* webpack/runtime/global */
diff --git a/src/App.js b/src/App.js
index decff625a25b050a084bbf83a322baa26009f25b..77f1c32f32cbe2ef42f08218c6792479b0645ca2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,48 +1,76 @@
-import React from 'react';
-import {Box, Tabs, Tab, Typography, AppBar, CssBaseline} from '@mui/material';
-import SearchPage from './SearchPage'
-import Favorites from './Favorites'
+import React from "react";
+import { Box, Tabs, Tab, Typography, AppBar, CssBaseline } from "@mui/material";
+import SearchPage from "./SearchPage";
+import Favorites from "./Favorites";
-export default function App () {
- const [currentTab, setCurrentTab]= React.useState(0);
- const [searchResult, setSearchResult] = React.useState([]);
- const [likes, setLikes] = React.useState({});
- const [favorites, setFavorites] = React.useState([]);
+export default function App() {
+ const [currentTab, setCurrentTab] = React.useState(0);
+ const [searchResult, setSearchResult] = React.useState([]);
+ const [likes, setLikes] = React.useState({});
+ const [favorites, setFavorites] = React.useState([]);
- const handleLike = (id, item) => {
- setLikes({...likes, [id] : !likes[id]});
-
- if (likes[id]) {
- setFavorites(prevFavorites => prevFavorites.filter(favorite => favorite.collectionId !== id));
- } else {
- setFavorites(prevFavorites => [...prevFavorites, item]);
- }
- };
+ const handleLike = (id, item) => {
+ setLikes({ ...likes, [id]: !likes[id] });
- const handleTabChange = (event, newValue) => {
- setCurrentTab(newValue);
+ if (!likes[id]) {
+ fetch("/likes", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(item),
+ }).catch((e) => console.log("error post"));
+ setFavorites((prev) => [...prev, item]);
+ } else {
+ fetch(`/likes/${id}`, {
+ method: "DELETE",
+ }).catch((e) => console.log("error delete"));
+ setFavorites((prev) => prev.filter((item) => item.collectionId !== id));
}
+ };
- return (
- <React.Fragment>
- <AppBar position="fixed">
- <Typography align="center" variant="h3" color="inherit">
- 김시원's Favorite Music
- </Typography>
- </AppBar>
- <div style={{height: 60, width: '100%'}}></div>
- <Box sx={{ borderBottom: 1, borderColor: 'divider'}}>
- <Tabs value={currentTab} onChange={handleTabChange} aria-label="basic tabs" centered >
- <Tab label ="Search Music" value={0} />
- <Tab label ="Favorites" value={1} />
- <Tab label ="More Contents" value={2} />
- </Tabs>
- </Box>
+ const handleTabChange = (event, newValue) => {
+ setCurrentTab(newValue);
+ };
- { currentTab === 0 && <SearchPage list={searchResult} onSearch={setSearchResult} likes={likes} onLike={handleLike}/> }
- { currentTab === 1 && <Favorites list={favorites} likes={likes} onLike={handleLike}/> }
- { currentTab == 2 && <Typography alogn="center" variant="h2"> Item Three</Typography>}
- </React.Fragment>
- )
-}
+ return (
+ <React.Fragment>
+ <AppBar position="fixed">
+ <Typography align="center" variant="h3" color="inherit">
+ 김시원's Favorite Music
+ </Typography>
+ </AppBar>
+ <div style={{ height: 60, width: "100%" }}></div>
+ <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+ <Tabs
+ value={currentTab}
+ onChange={handleTabChange}
+ aria-label="basic tabs"
+ centered
+ >
+ <Tab label="Search Music" value={0} />
+ <Tab label="Favorites" value={1} />
+ <Tab label="More Contents" value={2} />
+ </Tabs>
+ </Box>
+ {currentTab === 0 && (
+ <SearchPage
+ list={searchResult}
+ onSearch={setSearchResult}
+ likes={likes}
+ onLike={handleLike}
+ />
+ )}
+ {currentTab === 1 && (
+ <Favorites list={favorites} likes={likes} onLike={handleLike} />
+ )}
+ {currentTab == 2 && (
+ <Typography alogn="center" variant="h2">
+ {" "}
+ Item Three
+ </Typography>
+ )}
+ </React.Fragment>
+ );
+}
diff --git a/src/MusicList.js b/src/MusicList.js
index 6a112bf596e0078b4d4f37eaf045f657f85202ed..c60b622023871772b355f09f5844c18bf0a8e44b 100644
--- a/src/MusicList.js
+++ b/src/MusicList.js
@@ -1,58 +1,80 @@
import React from "react";
-import {Card, CardContent, CardActions, Typography, IconButton} from '@mui/material';
-import {Favorite, FavoriteBorder} from '@mui/icons-material';
-import SnackMsg from './SnackMsg'
+import {
+ Card,
+ CardContent,
+ CardActions,
+ Typography,
+ IconButton,
+} from "@mui/material";
+import { Favorite, FavoriteBorder } from "@mui/icons-material";
+import SnackMsg from "./SnackMsg";
const styles = {
- content : {},
- layout : {
- display: 'flex',
- justifyContent : 'center'
- },
- card: {
- minWidth: 275,
- maxWidth: 600,
- marginBottom: "20pt",
- marginLeft: 'auto',
- marginRight: 'auto',
- }
-}
+ content: {},
+ layout: {
+ display: "flex",
+ justifyContent: "center",
+ },
+ card: {
+ minWidth: 275,
+ maxWidth: 600,
+ marginBottom: "20pt",
+ marginLeft: "auto",
+ marginRight: "auto",
+ },
+};
-export default function MusicList ({list, likes, onLike}) {
- let [snackState, setSnackState] = React.useState({open : false, msg: ''})
+export default function MusicList({ list, likes, onLike }) {
+ let [snackState, setSnackState] = React.useState({ open: false, msg: "" });
- const toggleFavorite = (id, name, item) => () => {
- onLike(id, item)
- setSnackState({...snackState, open : true, msg : `${name} is clicked`})
- }
+ const toggleFavorite = (id, name, item) => () => {
+ onLike(id, item);
+ setSnackState({ ...snackState, open: true, msg: `${name} is clicked` });
+ };
- const handleSnackbarClose = (event, reason) => {
- if(reason === 'clickaway') {
- return;
- }
- setSnackState({open: false, msg: ''})
+ const handleSnackbarClose = (event, reason) => {
+ if (reason === "clickaway") {
+ return;
}
+ setSnackState({ open: false, msg: "" });
+ };
- return (
- <div>
- {list.map(item => {
- const isLiked = likes[item.collectionId] === true;
- return (
- <Card sx={styles.card} key={item.collectionId}>
- <CardContent>
- <Typography variant="subtitle1"> {item.artistName}</Typography>
- <Typography variant="subtitle2"> {item.collectionCensoredName}</Typography>
- </CardContent>
- <SnackMsg open = {snackState.open} message={snackState.msg} onClose={handleSnackbarClose} />
- <CardActions>
- <IconButton onClick={toggleFavorite(item.collectionId, item.collectionCensoredName, item)}>
- {(likes[item.collectionId] === true) ?
- <Favorite /> : <FavoriteBorder /> }
- </IconButton>
- </CardActions>
- </Card>
- )
- })}
- </div>
- )
-}
\ No newline at end of file
+ return (
+ <div>
+ {list.map((item) => {
+ const isLiked = likes[item.collectionId] === true;
+ return (
+ <Card sx={styles.card} key={item.collectionId}>
+ <CardContent>
+ <Typography variant="subtitle1"> {item.artistName}</Typography>
+ <Typography variant="subtitle2">
+ {" "}
+ {item.collectionCensoredName}
+ </Typography>
+ </CardContent>
+ <SnackMsg
+ open={snackState.open}
+ message={snackState.msg}
+ onClose={handleSnackbarClose}
+ />
+ <CardActions>
+ <IconButton
+ onClick={toggleFavorite(
+ item.collectionId,
+ item.collectionCensoredName,
+ item
+ )}
+ >
+ {likes[item.collectionId] === true ? (
+ <Favorite />
+ ) : (
+ <FavoriteBorder />
+ )}
+ </IconButton>
+ </CardActions>
+ </Card>
+ );
+ })}
+ </div>
+ );
+}
diff --git a/src/SearchPage.js b/src/SearchPage.js
index 242e6c7b1d8af65025a246f726a137fdf55ae7c8..0ce51565e124a25e038580919e0a1079e32613cd 100644
--- a/src/SearchPage.js
+++ b/src/SearchPage.js
@@ -1,39 +1,54 @@
-import React from 'react';
-import {Button, TextField} from '@mui/material'
-import MusicList from './MusicList';
+import React from "react";
+import { Button, TextField } from "@mui/material";
+import MusicList from "./MusicList";
-export default function SearchPage({list, onSearch, likes, onLike}) {
- const [searchWord, setSearchWord] = React.useState('');
+export default function SearchPage({ list, onSearch, likes, onLike }) {
+ 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'));
- }
+ const handleSearch = (event) => {
+ event.preventDefault();
+ console.log(searchWord);
+ setSearchWord("");
+ 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) => {
- setSearchWord(event.target.value);
- }
+ const handleSearchTextChange = (event) => {
+ setSearchWord(event.target.value);
+ };
- return (
- <React.Fragment>
- <form style={{display: 'flex', marginTop:20, marginBottom:15}}>
- <div style={{display : 'flex', marginLeft : 'auto', marginRight : 'auto'}}>
- <TextField variant = "outlined" label="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
- </Button>
- </div>
- </form>
- <MusicList list = {list} likes = {likes} onLike = {onLike}>
- </MusicList>
- </React.Fragment>
- )
-}
\ No newline at end of file
+ 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}
+ ></TextField>
+ <Button
+ variant="contained"
+ color="primary"
+ type="submit"
+ onClick={handleSearch}
+ style={{ marginLeft: 20 }}
+ >
+ Search
+ </Button>
+ </div>
+ </form>
+ <MusicList list={list} likes={likes} onLike={onLike}></MusicList>
+ </React.Fragment>
+ );
+}