diff --git a/src/main/resources/static/app.bundle.js b/src/main/resources/static/app.bundle.js
index 6fbc73a2add60c28c897fcb10ac5245feafe9dec..ec8b93a3730629ee696e33edf4e9fc7d7712c697 100644
--- a/src/main/resources/static/app.bundle.js
+++ b/src/main/resources/static/app.bundle.js
@@ -2326,7 +2326,7 @@
   /***/ ((__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_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 _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 _Search__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Search */ \"./src/Search.js\");\n/* harmony import */ var _Favorite__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Favorite */ \"./src/Favorite.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    myFavoriteList = _React$useState6[0],\n    setmyFavoriteList = _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    setmyFavoriteList(function (prevList) {\n      return [].concat(_toConsumableArray(prevList), [item]);\n    });\n  };\n  var DelteandsetFavoriteList = function DelteandsetFavoriteList(item) {\n    setmyFavoriteList(item);\n  };\n  var handleLike = function handleLike(id) {\n    var updatedLikes = _objectSpread(_objectSpread({}, likes), {}, _defineProperty({}, id, !likes[id]));\n    setLikes(updatedLikes);\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    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  }, \"Dong'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_7__[\"default\"], {\n    sx: {\n      borderButtom: 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: \"Favorites\",\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(_Search__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n    list: searchResult,\n    addToFavoriteList: addToFavoriteList,\n    myFavoriteList: myFavoriteList,\n    handleLike: handleLike,\n    likes: likes,\n    onSearch: setSearchResult,\n    DelteandsetFavoriteList: DelteandsetFavoriteList\n  }), currentTab == 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Favorite__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n    likes: likes,\n    handleLike: handleLike,\n    myFavoriteList: myFavoriteList,\n    addToFavoriteList: addToFavoriteList,\n    DelteandsetFavoriteList: DelteandsetFavoriteList\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 _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 _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 _Search__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Search */ \"./src/Search.js\");\n/* harmony import */ var _Favorite__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Favorite */ \"./src/Favorite.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\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    myFavoriteList = _React$useState6[0],\n    setmyFavoriteList = _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  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n    fetch('/likes', {\n      method: 'GET'\n    }).then(function (res) {\n      return res.json();\n    }).then(function (data) {\n      var datafromb = {};\n      data.forEach(function (item) {\n        datafromb[item.collectionId] = true;\n      });\n      setmyFavoriteList(data);\n      console.log(\"실행됨\");\n      setLikes(datafromb);\n    });\n  }, []);\n  var handleTabChange = function handleTabChange(event, newValue) {\n    setCurrentTab(newValue);\n  };\n  var addToFavoriteList = function addToFavoriteList(item) {\n    setmyFavoriteList(function (prevList) {\n      return [].concat(_toConsumableArray(prevList), [item]);\n    });\n  };\n  var DelteandsetFavoriteList = function DelteandsetFavoriteList(item) {\n    setmyFavoriteList(item);\n  };\n  var handleLike = function handleLike(id) {\n    var updatedLikes = _objectSpread(_objectSpread({}, likes), {}, _defineProperty({}, id, !likes[id]));\n    setLikes(updatedLikes);\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    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  }, \"Dong'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_7__[\"default\"], {\n    sx: {\n      borderButtom: 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: \"Favorites\",\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(_Search__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n    list: searchResult,\n    addToFavoriteList: addToFavoriteList,\n    myFavoriteList: myFavoriteList,\n    handleLike: handleLike,\n    likes: likes,\n    onSearch: setSearchResult,\n    DelteandsetFavoriteList: DelteandsetFavoriteList\n  }), currentTab == 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Favorite__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n    likes: likes,\n    handleLike: handleLike,\n    myFavoriteList: myFavoriteList,\n    addToFavoriteList: addToFavoriteList,\n    DelteandsetFavoriteList: DelteandsetFavoriteList\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?");
   
   /***/ }),
   
@@ -2337,7 +2337,7 @@
   /***/ ((__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 */ Favoritee)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Card/Card.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardContent/CardContent.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardActions/CardActions.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/Favorite.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/FavoriteBorder.js\");\n/* harmony import */ var _snackbar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./snackbar */ \"./src/snackbar.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\nvar styles = {\n  content: {},\n  layout: {\n    display: 'flex',\n    justifyContent: 'center'\n  },\n  card: {\n    minWidth: 275,\n    maxWidth: 600,\n    marginBottom: \"20pt\",\n    marginLeft: 'auto',\n    marginRight: 'auto'\n  }\n};\nfunction Favoritee(_ref) {\n  var likes = _ref.likes,\n    myFavoriteList = _ref.myFavoriteList,\n    handleLike = _ref.handleLike,\n    addToFavoriteList = _ref.addToFavoriteList,\n    DelteandsetFavoriteList = _ref.DelteandsetFavoriteList;\n  var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState(likes),\n    _React$useState2 = _slicedToArray(_React$useState, 2),\n    favoriteLikes = _React$useState2[0],\n    setFavoriteLikes = _React$useState2[1];\n  var toggleFavorite = function toggleFavorite(id, name) {\n    return function () {\n      var updatedLikes = _objectSpread(_objectSpread({}, favoriteLikes), {}, _defineProperty({}, id, !favoriteLikes[id]));\n      setFavoriteLikes(updatedLikes);\n      handleLike(id);\n      if (updatedLikes[id]) {\n        if (!myFavoriteList.find(function (item) {\n          return item.collectionId === id;\n        })) {\n          var postData = {\n            \"collectionId\": id,\n            \"collectionName\": name\n          };\n          fetch('http://localhost:8098/likes', {\n            method: 'POST',\n            headers: {\n              'Content-Type': 'application/json'\n            },\n            body: JSON.stringify(postData)\n          }).then(function (response) {\n            return response.json();\n          }).then(function (data) {\n            console.log(data);\n            addToFavoriteList(list.find(function (item) {\n              return item.collectionId === id;\n            }));\n          })[\"catch\"](function (error) {\n            return console.log('음악 좋아요 시 에러 발생');\n          });\n        }\n      } else {\n        var updatedFavoriteList = myFavoriteList.filter(function (item) {\n          return item.collectionId !== id;\n        });\n        fetch(\"/likes/\".concat(id), {\n          method: 'DELETE'\n        }).then(function (data) {\n          console.log(data);\n          DelteandsetFavoriteList(updatedFavoriteList);\n          console.log('여기 실행 됨');\n        })[\"catch\"](function (error) {\n          return console.log('음악 좋아요 취소 시 에러 발생' + error);\n        });\n      }\n    };\n  };\n  var favoriteList = myFavoriteList.filter(function (item) {\n    return favoriteLikes[item.collectionId] === true;\n  });\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", null, favoriteList.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.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(_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    }, favoriteLikes[item.collectionId] ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], null))));\n  }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/Favorite.js?");
+  eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ Favoritee)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Card/Card.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardContent/CardContent.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardActions/CardActions.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/Favorite.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/FavoriteBorder.js\");\n/* harmony import */ var _snackbar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./snackbar */ \"./src/snackbar.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\nvar styles = {\n  content: {},\n  layout: {\n    display: 'flex',\n    justifyContent: 'center'\n  },\n  card: {\n    minWidth: 275,\n    maxWidth: 600,\n    marginBottom: \"20pt\",\n    marginLeft: 'auto',\n    marginRight: 'auto'\n  }\n};\nfunction Favoritee(_ref) {\n  var likes = _ref.likes,\n    myFavoriteList = _ref.myFavoriteList,\n    handleLike = _ref.handleLike,\n    addToFavoriteList = _ref.addToFavoriteList,\n    DelteandsetFavoriteList = _ref.DelteandsetFavoriteList;\n  var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState(likes),\n    _React$useState2 = _slicedToArray(_React$useState, 2),\n    favoriteLikes = _React$useState2[0],\n    setFavoriteLikes = _React$useState2[1];\n  var toggleFavorite = function toggleFavorite(id, name) {\n    return function () {\n      var updatedLikes = _objectSpread(_objectSpread({}, favoriteLikes), {}, _defineProperty({}, id, !favoriteLikes[id]));\n      setFavoriteLikes(updatedLikes);\n      handleLike(id);\n      if (updatedLikes[id]) {\n        if (!myFavoriteList.find(function (item) {\n          return item.collectionId === id;\n        })) {\n          var item = list.find(function (item) {\n            return item.collectionId === id;\n          });\n          var postData = {\n            \"artistId\": item.artistId,\n            \"artistName\": item.artistName,\n            \"artistViewUrl\": item.artistViewUrl,\n            \"collectionId\": item.collectionId,\n            \"collectionViewUrl\": item.collectionViewUrl,\n            \"collectionName\": item.collectionName\n          };\n          fetch('/likes', {\n            method: 'POST',\n            headers: {\n              'Content-Type': 'application/json'\n            },\n            body: JSON.stringify(postData)\n          }).then(function (response) {\n            return response.json();\n          }).then(function (data) {\n            console.log(data);\n            addToFavoriteList(list.find(function (item) {\n              return item.collectionId === id;\n            }));\n          })[\"catch\"](function (error) {\n            return console.log('음악 좋아요 시 에러 발생');\n          });\n        }\n      } else {\n        var updatedFavoriteList = myFavoriteList.filter(function (item) {\n          return item.collectionId !== id;\n        });\n        fetch(\"/likes/\".concat(id), {\n          method: 'DELETE'\n        }).then(function (data) {\n          console.log(data);\n          DelteandsetFavoriteList(updatedFavoriteList);\n          console.log('여기 실행 됨');\n        })[\"catch\"](function (error) {\n          return console.log('음악 좋아요 취소 시 에러 발생' + error);\n        });\n      }\n    };\n  };\n  var favoriteList = myFavoriteList.filter(function (item) {\n    return favoriteLikes[item.collectionId] === true;\n  });\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", null, favoriteList.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.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(_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    }, favoriteLikes[item.collectionId] ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], null))));\n  }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/Favorite.js?");
   
   /***/ }),
   
@@ -2348,7 +2348,7 @@
   /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
   
   "use strict";
-  eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ MusicList)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Card/Card.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardContent/CardContent.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardActions/CardActions.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/Favorite.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/FavoriteBorder.js\");\n/* harmony import */ var _snackbar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./snackbar */ \"./src/snackbar.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\nvar styles = {\n  content: {},\n  layout: {\n    display: 'flex',\n    justifyContent: 'center'\n  },\n  card: {\n    minWidth: 275,\n    maxWidth: 600,\n    marginBottom: \"20pt\",\n    marginLeft: 'auto',\n    marginRight: 'auto'\n  }\n};\nfunction MusicList(_ref) {\n  var list = _ref.list,\n    DelteandsetFavoriteList = _ref.DelteandsetFavoriteList,\n    likes = _ref.likes,\n    handleLike = _ref.handleLike,\n    myFavoriteList = _ref.myFavoriteList,\n    addToFavoriteList = _ref.addToFavoriteList;\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      setSnackState(_objectSpread(_objectSpread({}, snackState), {}, {\n        open: true,\n        msg: \"\".concat(name, \"\\uC774(\\uAC00) \\uD074\\uB9AD\\uB418\\uC5C8\\uC2B5\\uB2C8\\uB2E4.\")\n      }));\n      handleLike(id);\n      if (updatedLikes[id]) {\n        if (!myFavoriteList.find(function (item) {\n          return item.collectionId === id;\n        })) {\n          var postData = {\n            \"collectionId\": id,\n            \"collectionName\": name\n          };\n          fetch('http://localhost:8098/likes', {\n            method: 'POST',\n            headers: {\n              'Content-Type': 'application/json'\n            },\n            body: JSON.stringify(postData)\n          }).then(function (response) {\n            return response.json();\n          }).then(function (data) {\n            console.log(data);\n            addToFavoriteList(list.find(function (item) {\n              return item.collectionId === id;\n            }));\n          })[\"catch\"](function (error) {\n            return console.log('음악 좋아요 시 에러 발생');\n          });\n        }\n      } else {\n        var updatedFavoriteList = myFavoriteList.filter(function (item) {\n          return item.collectionId !== id;\n        });\n        fetch(\"/likes/\".concat(id), {\n          method: 'DELETE'\n        }).then(function (data) {\n          console.log(data);\n          DelteandsetFavoriteList(updatedFavoriteList);\n          console.log('여기 실행 됨');\n        })[\"catch\"](function (error) {\n          return console.log('음악 좋아요 취소 시 에러 발생' + error);\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.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(_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))));\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_snackbar__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    open: snackState.open,\n    message: snackState.msg,\n    onClose: handleSnackbarClose\n  }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/MusicList.js?");
+  eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ MusicList)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Card/Card.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardContent/CardContent.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardActions/CardActions.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/Favorite.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/FavoriteBorder.js\");\n/* harmony import */ var _snackbar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./snackbar */ \"./src/snackbar.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\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    DelteandsetFavoriteList = _ref.DelteandsetFavoriteList,\n    likes = _ref.likes,\n    handleLike = _ref.handleLike,\n    myFavoriteList = _ref.myFavoriteList,\n    addToFavoriteList = _ref.addToFavoriteList;\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      setSnackState(_objectSpread(_objectSpread({}, snackState), {}, {\n        open: true,\n        msg: \"\".concat(name, \"\\uC774(\\uAC00) \\uD074\\uB9AD\\uB418\\uC5C8\\uC2B5\\uB2C8\\uB2E4.\")\n      }));\n      handleLike(id);\n      if (updatedLikes[id]) {\n        if (!myFavoriteList.find(function (item) {\n          return item.collectionId === id;\n        })) {\n          var item = list.find(function (item) {\n            return item.collectionId === id;\n          });\n          console.log(item + \"hihihih\");\n          var postData = {\n            \"artistId\": item.artistId,\n            \"collectionId\": item.collectionId,\n            \"artistName\": item.artistName,\n            \"artistViewUrl\": item.artistViewUrl,\n            \"collectionViewUrl\": item.collectionViewUrl,\n            \"collectionName\": item.collectionName\n          };\n          console.log(postData);\n          fetch('/likes', {\n            method: 'POST',\n            headers: {\n              'Content-Type': 'application/json'\n            },\n            body: JSON.stringify(postData)\n          }).then(function (response) {\n            return response.json();\n          }).then(function (data) {\n            console.log(data);\n            addToFavoriteList(list.find(function (item) {\n              return item.collectionId === id;\n            }));\n          })[\"catch\"](function (error) {\n            return console.log('음악 좋아요 시 에러 발생');\n          });\n        }\n      } else {\n        var updatedFavoriteList = myFavoriteList.filter(function (item) {\n          return item.collectionId !== id;\n        });\n        fetch(\"/likes/\".concat(id), {\n          method: 'DELETE'\n        }).then(function (data) {\n          console.log(data);\n          DelteandsetFavoriteList(updatedFavoriteList);\n          console.log('여기 실행 됨');\n        })[\"catch\"](function (error) {\n          return console.log('음악 좋아요 취소 시 에러 발생' + error);\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.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(_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))));\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_snackbar__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    open: snackState.open,\n    message: snackState.msg,\n    onClose: handleSnackbarClose\n  }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/MusicList.js?");
   
   /***/ }),
   
@@ -2933,7 +2933,7 @@
   /******/ 	
   /******/ 	/* webpack/runtime/getFullHash */
   /******/ 	(() => {
-  /******/ 		__webpack_require__.h = () => ("171b9b6b2d48ebea66f2")
+  /******/ 		__webpack_require__.h = () => ("7f8505201ff14a5d2af0")
   /******/ 	})();
   /******/ 	
   /******/ 	/* webpack/runtime/global */
diff --git a/target/classes/kr/ajousw/myspringweb/MyspringwebApplication.class b/target/classes/kr/ajousw/myspringweb/MyspringwebApplication.class
index d58c10ade13ad1c8c4ffba51c2244db4cf6c3e9b..8a2e010e4756fbc4338487564038fdaff30833e0 100644
Binary files a/target/classes/kr/ajousw/myspringweb/MyspringwebApplication.class and b/target/classes/kr/ajousw/myspringweb/MyspringwebApplication.class differ
diff --git a/target/classes/kr/ajousw/myspringweb/controller/MyWebController.class b/target/classes/kr/ajousw/myspringweb/controller/MyWebController.class
index 5168985c2bfb1767cd27e8d726e582ac09e95b09..e868abe954024a3a39dbe7fe7f28658fa40f3409 100644
Binary files a/target/classes/kr/ajousw/myspringweb/controller/MyWebController.class and b/target/classes/kr/ajousw/myspringweb/controller/MyWebController.class differ
diff --git a/target/classes/kr/ajousw/myspringweb/dto/FavoriteMusicRequestDto.class b/target/classes/kr/ajousw/myspringweb/dto/FavoriteMusicRequestDto.class
index 71d9cf25493d70b5da9262efaea605b1c462c526..1e3a413feb6e9a8f713401ae07b80d63edd9a36b 100644
Binary files a/target/classes/kr/ajousw/myspringweb/dto/FavoriteMusicRequestDto.class and b/target/classes/kr/ajousw/myspringweb/dto/FavoriteMusicRequestDto.class differ
diff --git a/target/classes/kr/ajousw/myspringweb/dto/MusicList.class b/target/classes/kr/ajousw/myspringweb/dto/MusicList.class
index 5ef753a028f7600ae7de7dd1453cc57b2601881a..9764cc57b21441d861ffd91190935e33baa4a680 100644
Binary files a/target/classes/kr/ajousw/myspringweb/dto/MusicList.class and b/target/classes/kr/ajousw/myspringweb/dto/MusicList.class differ
diff --git a/target/classes/kr/ajousw/myspringweb/entity/FavoriteMusic.class b/target/classes/kr/ajousw/myspringweb/entity/FavoriteMusic.class
index 73dbbb3ab595ab852b8f2d2ede355655460de706..0c549de6993be58737fbe6ffd4b1968800264a6a 100644
Binary files a/target/classes/kr/ajousw/myspringweb/entity/FavoriteMusic.class and b/target/classes/kr/ajousw/myspringweb/entity/FavoriteMusic.class differ
diff --git a/target/classes/kr/ajousw/myspringweb/repository/FavoriteRepository.class b/target/classes/kr/ajousw/myspringweb/repository/FavoriteRepository.class
index 02037496d2d01570796d0a9b026a41824b2173ab..1d2b7d568dc3f3bd42637dc87c15108297b5b75d 100644
Binary files a/target/classes/kr/ajousw/myspringweb/repository/FavoriteRepository.class and b/target/classes/kr/ajousw/myspringweb/repository/FavoriteRepository.class differ
diff --git a/target/classes/kr/ajousw/myspringweb/service/MusicService.class b/target/classes/kr/ajousw/myspringweb/service/MusicService.class
index a0cfe076c0a58a1bee7347184f147a7b96078097..7adb5357fe09a29f491942180e8dca2237eb240f 100644
Binary files a/target/classes/kr/ajousw/myspringweb/service/MusicService.class and b/target/classes/kr/ajousw/myspringweb/service/MusicService.class differ
diff --git a/target/classes/static/app.bundle.js b/target/classes/static/app.bundle.js
index 6fbc73a2add60c28c897fcb10ac5245feafe9dec..ec8b93a3730629ee696e33edf4e9fc7d7712c697 100644
--- a/target/classes/static/app.bundle.js
+++ b/target/classes/static/app.bundle.js
@@ -2326,7 +2326,7 @@
   /***/ ((__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_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 _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 _Search__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Search */ \"./src/Search.js\");\n/* harmony import */ var _Favorite__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Favorite */ \"./src/Favorite.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    myFavoriteList = _React$useState6[0],\n    setmyFavoriteList = _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    setmyFavoriteList(function (prevList) {\n      return [].concat(_toConsumableArray(prevList), [item]);\n    });\n  };\n  var DelteandsetFavoriteList = function DelteandsetFavoriteList(item) {\n    setmyFavoriteList(item);\n  };\n  var handleLike = function handleLike(id) {\n    var updatedLikes = _objectSpread(_objectSpread({}, likes), {}, _defineProperty({}, id, !likes[id]));\n    setLikes(updatedLikes);\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    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  }, \"Dong'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_7__[\"default\"], {\n    sx: {\n      borderButtom: 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: \"Favorites\",\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(_Search__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n    list: searchResult,\n    addToFavoriteList: addToFavoriteList,\n    myFavoriteList: myFavoriteList,\n    handleLike: handleLike,\n    likes: likes,\n    onSearch: setSearchResult,\n    DelteandsetFavoriteList: DelteandsetFavoriteList\n  }), currentTab == 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Favorite__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n    likes: likes,\n    handleLike: handleLike,\n    myFavoriteList: myFavoriteList,\n    addToFavoriteList: addToFavoriteList,\n    DelteandsetFavoriteList: DelteandsetFavoriteList\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 _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 _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 _Search__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Search */ \"./src/Search.js\");\n/* harmony import */ var _Favorite__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Favorite */ \"./src/Favorite.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\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    myFavoriteList = _React$useState6[0],\n    setmyFavoriteList = _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  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n    fetch('/likes', {\n      method: 'GET'\n    }).then(function (res) {\n      return res.json();\n    }).then(function (data) {\n      var datafromb = {};\n      data.forEach(function (item) {\n        datafromb[item.collectionId] = true;\n      });\n      setmyFavoriteList(data);\n      console.log(\"실행됨\");\n      setLikes(datafromb);\n    });\n  }, []);\n  var handleTabChange = function handleTabChange(event, newValue) {\n    setCurrentTab(newValue);\n  };\n  var addToFavoriteList = function addToFavoriteList(item) {\n    setmyFavoriteList(function (prevList) {\n      return [].concat(_toConsumableArray(prevList), [item]);\n    });\n  };\n  var DelteandsetFavoriteList = function DelteandsetFavoriteList(item) {\n    setmyFavoriteList(item);\n  };\n  var handleLike = function handleLike(id) {\n    var updatedLikes = _objectSpread(_objectSpread({}, likes), {}, _defineProperty({}, id, !likes[id]));\n    setLikes(updatedLikes);\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    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  }, \"Dong'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_7__[\"default\"], {\n    sx: {\n      borderButtom: 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: \"Favorites\",\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(_Search__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n    list: searchResult,\n    addToFavoriteList: addToFavoriteList,\n    myFavoriteList: myFavoriteList,\n    handleLike: handleLike,\n    likes: likes,\n    onSearch: setSearchResult,\n    DelteandsetFavoriteList: DelteandsetFavoriteList\n  }), currentTab == 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Favorite__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n    likes: likes,\n    handleLike: handleLike,\n    myFavoriteList: myFavoriteList,\n    addToFavoriteList: addToFavoriteList,\n    DelteandsetFavoriteList: DelteandsetFavoriteList\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?");
   
   /***/ }),
   
@@ -2337,7 +2337,7 @@
   /***/ ((__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 */ Favoritee)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Card/Card.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardContent/CardContent.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardActions/CardActions.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/Favorite.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/FavoriteBorder.js\");\n/* harmony import */ var _snackbar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./snackbar */ \"./src/snackbar.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\nvar styles = {\n  content: {},\n  layout: {\n    display: 'flex',\n    justifyContent: 'center'\n  },\n  card: {\n    minWidth: 275,\n    maxWidth: 600,\n    marginBottom: \"20pt\",\n    marginLeft: 'auto',\n    marginRight: 'auto'\n  }\n};\nfunction Favoritee(_ref) {\n  var likes = _ref.likes,\n    myFavoriteList = _ref.myFavoriteList,\n    handleLike = _ref.handleLike,\n    addToFavoriteList = _ref.addToFavoriteList,\n    DelteandsetFavoriteList = _ref.DelteandsetFavoriteList;\n  var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState(likes),\n    _React$useState2 = _slicedToArray(_React$useState, 2),\n    favoriteLikes = _React$useState2[0],\n    setFavoriteLikes = _React$useState2[1];\n  var toggleFavorite = function toggleFavorite(id, name) {\n    return function () {\n      var updatedLikes = _objectSpread(_objectSpread({}, favoriteLikes), {}, _defineProperty({}, id, !favoriteLikes[id]));\n      setFavoriteLikes(updatedLikes);\n      handleLike(id);\n      if (updatedLikes[id]) {\n        if (!myFavoriteList.find(function (item) {\n          return item.collectionId === id;\n        })) {\n          var postData = {\n            \"collectionId\": id,\n            \"collectionName\": name\n          };\n          fetch('http://localhost:8098/likes', {\n            method: 'POST',\n            headers: {\n              'Content-Type': 'application/json'\n            },\n            body: JSON.stringify(postData)\n          }).then(function (response) {\n            return response.json();\n          }).then(function (data) {\n            console.log(data);\n            addToFavoriteList(list.find(function (item) {\n              return item.collectionId === id;\n            }));\n          })[\"catch\"](function (error) {\n            return console.log('음악 좋아요 시 에러 발생');\n          });\n        }\n      } else {\n        var updatedFavoriteList = myFavoriteList.filter(function (item) {\n          return item.collectionId !== id;\n        });\n        fetch(\"/likes/\".concat(id), {\n          method: 'DELETE'\n        }).then(function (data) {\n          console.log(data);\n          DelteandsetFavoriteList(updatedFavoriteList);\n          console.log('여기 실행 됨');\n        })[\"catch\"](function (error) {\n          return console.log('음악 좋아요 취소 시 에러 발생' + error);\n        });\n      }\n    };\n  };\n  var favoriteList = myFavoriteList.filter(function (item) {\n    return favoriteLikes[item.collectionId] === true;\n  });\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", null, favoriteList.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.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(_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    }, favoriteLikes[item.collectionId] ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], null))));\n  }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/Favorite.js?");
+  eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ Favoritee)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Card/Card.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardContent/CardContent.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardActions/CardActions.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/Favorite.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/FavoriteBorder.js\");\n/* harmony import */ var _snackbar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./snackbar */ \"./src/snackbar.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\nvar styles = {\n  content: {},\n  layout: {\n    display: 'flex',\n    justifyContent: 'center'\n  },\n  card: {\n    minWidth: 275,\n    maxWidth: 600,\n    marginBottom: \"20pt\",\n    marginLeft: 'auto',\n    marginRight: 'auto'\n  }\n};\nfunction Favoritee(_ref) {\n  var likes = _ref.likes,\n    myFavoriteList = _ref.myFavoriteList,\n    handleLike = _ref.handleLike,\n    addToFavoriteList = _ref.addToFavoriteList,\n    DelteandsetFavoriteList = _ref.DelteandsetFavoriteList;\n  var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState(likes),\n    _React$useState2 = _slicedToArray(_React$useState, 2),\n    favoriteLikes = _React$useState2[0],\n    setFavoriteLikes = _React$useState2[1];\n  var toggleFavorite = function toggleFavorite(id, name) {\n    return function () {\n      var updatedLikes = _objectSpread(_objectSpread({}, favoriteLikes), {}, _defineProperty({}, id, !favoriteLikes[id]));\n      setFavoriteLikes(updatedLikes);\n      handleLike(id);\n      if (updatedLikes[id]) {\n        if (!myFavoriteList.find(function (item) {\n          return item.collectionId === id;\n        })) {\n          var item = list.find(function (item) {\n            return item.collectionId === id;\n          });\n          var postData = {\n            \"artistId\": item.artistId,\n            \"artistName\": item.artistName,\n            \"artistViewUrl\": item.artistViewUrl,\n            \"collectionId\": item.collectionId,\n            \"collectionViewUrl\": item.collectionViewUrl,\n            \"collectionName\": item.collectionName\n          };\n          fetch('/likes', {\n            method: 'POST',\n            headers: {\n              'Content-Type': 'application/json'\n            },\n            body: JSON.stringify(postData)\n          }).then(function (response) {\n            return response.json();\n          }).then(function (data) {\n            console.log(data);\n            addToFavoriteList(list.find(function (item) {\n              return item.collectionId === id;\n            }));\n          })[\"catch\"](function (error) {\n            return console.log('음악 좋아요 시 에러 발생');\n          });\n        }\n      } else {\n        var updatedFavoriteList = myFavoriteList.filter(function (item) {\n          return item.collectionId !== id;\n        });\n        fetch(\"/likes/\".concat(id), {\n          method: 'DELETE'\n        }).then(function (data) {\n          console.log(data);\n          DelteandsetFavoriteList(updatedFavoriteList);\n          console.log('여기 실행 됨');\n        })[\"catch\"](function (error) {\n          return console.log('음악 좋아요 취소 시 에러 발생' + error);\n        });\n      }\n    };\n  };\n  var favoriteList = myFavoriteList.filter(function (item) {\n    return favoriteLikes[item.collectionId] === true;\n  });\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", null, favoriteList.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.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(_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    }, favoriteLikes[item.collectionId] ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], null))));\n  }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/Favorite.js?");
   
   /***/ }),
   
@@ -2348,7 +2348,7 @@
   /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
   
   "use strict";
-  eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ MusicList)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Card/Card.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardContent/CardContent.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardActions/CardActions.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/Favorite.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/FavoriteBorder.js\");\n/* harmony import */ var _snackbar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./snackbar */ \"./src/snackbar.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\nvar styles = {\n  content: {},\n  layout: {\n    display: 'flex',\n    justifyContent: 'center'\n  },\n  card: {\n    minWidth: 275,\n    maxWidth: 600,\n    marginBottom: \"20pt\",\n    marginLeft: 'auto',\n    marginRight: 'auto'\n  }\n};\nfunction MusicList(_ref) {\n  var list = _ref.list,\n    DelteandsetFavoriteList = _ref.DelteandsetFavoriteList,\n    likes = _ref.likes,\n    handleLike = _ref.handleLike,\n    myFavoriteList = _ref.myFavoriteList,\n    addToFavoriteList = _ref.addToFavoriteList;\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      setSnackState(_objectSpread(_objectSpread({}, snackState), {}, {\n        open: true,\n        msg: \"\".concat(name, \"\\uC774(\\uAC00) \\uD074\\uB9AD\\uB418\\uC5C8\\uC2B5\\uB2C8\\uB2E4.\")\n      }));\n      handleLike(id);\n      if (updatedLikes[id]) {\n        if (!myFavoriteList.find(function (item) {\n          return item.collectionId === id;\n        })) {\n          var postData = {\n            \"collectionId\": id,\n            \"collectionName\": name\n          };\n          fetch('http://localhost:8098/likes', {\n            method: 'POST',\n            headers: {\n              'Content-Type': 'application/json'\n            },\n            body: JSON.stringify(postData)\n          }).then(function (response) {\n            return response.json();\n          }).then(function (data) {\n            console.log(data);\n            addToFavoriteList(list.find(function (item) {\n              return item.collectionId === id;\n            }));\n          })[\"catch\"](function (error) {\n            return console.log('음악 좋아요 시 에러 발생');\n          });\n        }\n      } else {\n        var updatedFavoriteList = myFavoriteList.filter(function (item) {\n          return item.collectionId !== id;\n        });\n        fetch(\"/likes/\".concat(id), {\n          method: 'DELETE'\n        }).then(function (data) {\n          console.log(data);\n          DelteandsetFavoriteList(updatedFavoriteList);\n          console.log('여기 실행 됨');\n        })[\"catch\"](function (error) {\n          return console.log('음악 좋아요 취소 시 에러 발생' + error);\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.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(_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))));\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_snackbar__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    open: snackState.open,\n    message: snackState.msg,\n    onClose: handleSnackbarClose\n  }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/MusicList.js?");
+  eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ MusicList)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Card/Card.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardContent/CardContent.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardActions/CardActions.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/Favorite.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/FavoriteBorder.js\");\n/* harmony import */ var _snackbar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./snackbar */ \"./src/snackbar.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\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    DelteandsetFavoriteList = _ref.DelteandsetFavoriteList,\n    likes = _ref.likes,\n    handleLike = _ref.handleLike,\n    myFavoriteList = _ref.myFavoriteList,\n    addToFavoriteList = _ref.addToFavoriteList;\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      setSnackState(_objectSpread(_objectSpread({}, snackState), {}, {\n        open: true,\n        msg: \"\".concat(name, \"\\uC774(\\uAC00) \\uD074\\uB9AD\\uB418\\uC5C8\\uC2B5\\uB2C8\\uB2E4.\")\n      }));\n      handleLike(id);\n      if (updatedLikes[id]) {\n        if (!myFavoriteList.find(function (item) {\n          return item.collectionId === id;\n        })) {\n          var item = list.find(function (item) {\n            return item.collectionId === id;\n          });\n          console.log(item + \"hihihih\");\n          var postData = {\n            \"artistId\": item.artistId,\n            \"collectionId\": item.collectionId,\n            \"artistName\": item.artistName,\n            \"artistViewUrl\": item.artistViewUrl,\n            \"collectionViewUrl\": item.collectionViewUrl,\n            \"collectionName\": item.collectionName\n          };\n          console.log(postData);\n          fetch('/likes', {\n            method: 'POST',\n            headers: {\n              'Content-Type': 'application/json'\n            },\n            body: JSON.stringify(postData)\n          }).then(function (response) {\n            return response.json();\n          }).then(function (data) {\n            console.log(data);\n            addToFavoriteList(list.find(function (item) {\n              return item.collectionId === id;\n            }));\n          })[\"catch\"](function (error) {\n            return console.log('음악 좋아요 시 에러 발생');\n          });\n        }\n      } else {\n        var updatedFavoriteList = myFavoriteList.filter(function (item) {\n          return item.collectionId !== id;\n        });\n        fetch(\"/likes/\".concat(id), {\n          method: 'DELETE'\n        }).then(function (data) {\n          console.log(data);\n          DelteandsetFavoriteList(updatedFavoriteList);\n          console.log('여기 실행 됨');\n        })[\"catch\"](function (error) {\n          return console.log('음악 좋아요 취소 시 에러 발생' + error);\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.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(_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))));\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_snackbar__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    open: snackState.open,\n    message: snackState.msg,\n    onClose: handleSnackbarClose\n  }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/MusicList.js?");
   
   /***/ }),
   
@@ -2933,7 +2933,7 @@
   /******/ 	
   /******/ 	/* webpack/runtime/getFullHash */
   /******/ 	(() => {
-  /******/ 		__webpack_require__.h = () => ("171b9b6b2d48ebea66f2")
+  /******/ 		__webpack_require__.h = () => ("7f8505201ff14a5d2af0")
   /******/ 	})();
   /******/ 	
   /******/ 	/* webpack/runtime/global */
diff --git a/target/test-classes/kr/ajousw/myspringweb/MyspringwebApplicationTests.class b/target/test-classes/kr/ajousw/myspringweb/MyspringwebApplicationTests.class
index a3d1f9ddcdf2f2901666dc093328faaf96894e79..10ee240be28d17826ec611642c650ef569b01bda 100644
Binary files a/target/test-classes/kr/ajousw/myspringweb/MyspringwebApplicationTests.class and b/target/test-classes/kr/ajousw/myspringweb/MyspringwebApplicationTests.class differ