diff --git a/public/app.bundle.js b/public/app.bundle.js
index e19ec6e4f44dad3ad317e2f35ff534bed501b952..74640a970535055c0c835a35cfb6024140df212d 100644
--- a/public/app.bundle.js
+++ b/public/app.bundle.js
@@ -2326,7 +2326,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ App)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _SearchPage__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SearchPage */ \"./src/SearchPage.js\");\n/* harmony import */ var _Favorites__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Favorites */ \"./src/Favorites.js\");\n/* harmony import */ var _MusicList__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./MusicList */ \"./src/MusicList.js\");\n/* harmony import */ var _SnackMsg__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./SnackMsg */ \"./src/SnackMsg.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/AppBar/AppBar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tabs/Tabs.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tab/Tab.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\n\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\n var _React$useState5 = react__WEBPACK_IMPORTED_MODULE_0___default().useState({}),\n _React$useState6 = _slicedToArray(_React$useState5, 2),\n likes = _React$useState6[0],\n setLikes = _React$useState6[1]; //좋아요결과\n var _React$useState7 = react__WEBPACK_IMPORTED_MODULE_0___default().useState({\n open: false,\n msg: ''\n }),\n _React$useState8 = _slicedToArray(_React$useState7, 2),\n snackState = _React$useState8[0],\n setSnackState = _React$useState8[1]; //스낵바열림결과\n var _React$useState9 = react__WEBPACK_IMPORTED_MODULE_0___default().useState([]),\n _React$useState10 = _slicedToArray(_React$useState9, 2),\n favorites = _React$useState10[0],\n setFavorites = _React$useState10[1]; //재검색해도 Favorites목록이 리셋되는 것을 막기 위해 Favorites 모아놓은 상태변수 만듦\n\n //여기에 useEffect로 favorites랑 likes관리? \n //사이트 처음 들어갈 때 좋아요 목록이랑 좋아요 표시가 잘 나타나도록\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n fetch(\"/likes\", {\n method: 'GET'\n }).then(function (r) {\n return Response.json();\n }).then(function (r) {\n setFavorites(r), setLikes(r);\n })[\"catch\"](function (error) {\n console.error(\"Error fetching favorites:\", e);\n });\n }, []);\n var handleTabChange = function handleTabChange(event, newValue) {\n //탭\n setCurrentTab(newValue);\n };\n var toggleFavorite = function toggleFavorite(id, name) {\n //좋아요와 스낵바 상태 업데이트\n setSnackState({\n open: true,\n msg: \"\".concat(name, \" is clicked\")\n });\n if (likes[id]) {\n //이미 좋아요를 한 item이라면\n fetch(\"/likes/\".concat(collectionId), {\n method: \"DELETE\"\n }) //fetch 기능을 사용하여 서버에 대한 네트워크 요청을 보냄\n .then(function (r) {\n return r.json();\n }).then(function (r) {\n console.log(r);\n console.log(\"DELETE\");\n setLikes(function (prevLikes) {\n return _objectSpread(_objectSpread({}, prevLikes), {}, _defineProperty({}, id, !prevLikes[id]));\n }); //기존의 모든 키-값 쌍을 복사한다음 뒤에 써져있는대로 업데이트함\n setFavorites(function (prevFavorites) {\n return prevFavorites.filter(function (item) {\n return item.collectionId !== id;\n });\n });\n })[\"catch\"](function (error) {\n console.error('Error deleting likes:', error);\n });\n }\n //참고 코드\n /*\n @GetMapping(value=\"/likes\")\n public List<FavoriteMusic> getLikes() {\n return service.getLikes();\n }\n @PostMapping(value=\"/likes\")\n public int postLikes(@RequestBody FavoriteMusicRequestDto favorite) {\n return service.saveFavorite(favorite);\n } \n @DeleteMapping(value=\"/likes/{id}\")\n public int deleteLikes(@PathVariable String id) {\n return service.deleteFavorite(id);\n }\n */\n /*\n fetch(`/musicSearch/${searchWord}`)//fetch 기능을 사용하여 서버에 대한 네트워크 요청을 보냄\n .then(r => r.json()).then(r => {\n console.log(r);\n onSearch(r.results);\n setSearchWord('');//searchWord 변수 값을 다시 빈 문자열로 초기화\n }).catch(e => console.log('error when search musician));\n */else {\n //좋아요가 아직 안 되어있는 item이라면\n var selectedItem = searchResult.find(function (item) {\n return item.collectionId === id;\n });\n if (selectedItem) {\n fetch(\"/likes\", {\n method: \"POST\",\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(item)\n }) //fetch 기능을 사용하여 서버에 대한 네트워크 요청을 보냄\n .then(function (r) {\n return r.json();\n }).then(function (r) {\n console.log(r);\n console.log(\"POST\");\n setLikes(function (prevLikes) {\n return _objectSpread(_objectSpread({}, prevLikes), {}, _defineProperty({}, id, !prevLikes[id]));\n });\n setFavorites(function (prevFavorites) {\n return [].concat(_toConsumableArray(prevFavorites), [selectedItem]);\n });\n })[\"catch\"](function (error) {\n console.error('Error posting likes:', error);\n });\n }\n }\n };\n var handleSnackbarClose = function handleSnackbarClose(event, reason) {\n //스낵바 닫기\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((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n positions: \"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 }, \"Hyunjin'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 borderBottom: 1,\n borderColor: 'divider'\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n value: currentTab,\n onChange: handleTabChange,\n \"aria-label\": \"basic tabs\",\n centered: true\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n label: \"Search Music\",\n value: 0\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n label: \"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((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SearchPage__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n onSearch: setSearchResult\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MusicList__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n list: searchResult,\n likes: likes,\n toggleFavorite: toggleFavorite\n })), currentTab == 1 && /*#__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_6__[\"default\"], {\n align: \"center\",\n variant: \"h5\"\n }, \" Favorites \"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Favorites__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n list: favorites,\n likes: likes,\n toggleFavorite: toggleFavorite\n })), currentTab == 2 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n align: \"center\",\n variant: \"h5\"\n }, \" More Contents \"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SnackMsg__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n open: snackState.open,\n message: snackState.msg,\n onClose: handleSnackbarClose\n }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/App.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ App)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _SearchPage__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SearchPage */ \"./src/SearchPage.js\");\n/* harmony import */ var _Favorites__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Favorites */ \"./src/Favorites.js\");\n/* harmony import */ var _MusicList__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./MusicList */ \"./src/MusicList.js\");\n/* harmony import */ var _SnackMsg__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./SnackMsg */ \"./src/SnackMsg.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/AppBar/AppBar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tabs/Tabs.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tab/Tab.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\n\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\n var _React$useState5 = react__WEBPACK_IMPORTED_MODULE_0___default().useState({}),\n _React$useState6 = _slicedToArray(_React$useState5, 2),\n likes = _React$useState6[0],\n setLikes = _React$useState6[1]; //좋아요결과\n var _React$useState7 = react__WEBPACK_IMPORTED_MODULE_0___default().useState({\n open: false,\n msg: ''\n }),\n _React$useState8 = _slicedToArray(_React$useState7, 2),\n snackState = _React$useState8[0],\n setSnackState = _React$useState8[1]; //스낵바열림결과\n var _React$useState9 = react__WEBPACK_IMPORTED_MODULE_0___default().useState([]),\n _React$useState10 = _slicedToArray(_React$useState9, 2),\n favorites = _React$useState10[0],\n setFavorites = _React$useState10[1]; //재검색해도 Favorites목록이 리셋되는 것을 막기 위해 Favorites 모아놓은 상태변수 만듦\n\n //여기에 useEffect로 favorites랑 likes관리\n //사이트 처음 들어갈 때 좋아요 목록이랑 좋아요 표시가 잘 나타나도록\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n fetch(\"/likes\", {\n method: 'GET'\n }).then(function (r) {\n return r.json();\n }).then(function (likesData) {\n //DB에서 가져온 배열을 likes 형식에 맞게 바꾸기\n var formattedLikes = likesData.reduce(function (acc, item) {\n acc[item.collectionId] = true;\n return acc;\n }, {});\n setLikes(formattedLikes);\n setFavorites(r);\n })[\"catch\"](function (error) {\n console.error(\"Error fetching favorites:\", error);\n });\n }, []);\n var handleTabChange = function handleTabChange(event, newValue) {\n //탭\n setCurrentTab(newValue);\n };\n var toggleFavorite = function toggleFavorite(id, name) {\n //좋아요와 스낵바 상태 업데이트\n setSnackState({\n open: true,\n msg: \"\".concat(name, \" is clicked\")\n });\n if (likes[id]) {\n //이미 좋아요를 한 item이라면\n fetch(\"/likes/\".concat(id), {\n method: \"DELETE\"\n }) //fetch 기능을 사용하여 서버에 대한 네트워크 요청을 보냄\n .then(function (r) {\n return r.json();\n }).then(function (r) {\n console.log(r);\n console.log(\"DELETE\");\n setLikes(function (prevLikes) {\n return _objectSpread(_objectSpread({}, prevLikes), {}, _defineProperty({}, id, !prevLikes[id]));\n }); //기존의 모든 키-값 쌍을 복사한다음 뒤에 써져있는대로 업데이트함\n setFavorites(function (prevFavorites) {\n return prevFavorites.filter(function (item) {\n return item.collectionId !== id;\n });\n });\n })[\"catch\"](function (error) {\n console.error('Error deleting likes:', error);\n });\n } else {\n //좋아요가 아직 안 되어있는 item이라면\n var selectedItem = searchResult.find(function (item) {\n return item.collectionId === id;\n });\n if (selectedItem) {\n fetch(\"/likes\", {\n method: \"POST\",\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(selectedItem)\n }) //fetch 기능을 사용하여 서버에 대한 네트워크 요청을 보냄\n .then(function (r) {\n return r.json();\n }).then(function (r) {\n console.log(r);\n console.log(\"POST\");\n setLikes(function (prevLikes) {\n return _objectSpread(_objectSpread({}, prevLikes), {}, _defineProperty({}, id, !prevLikes[id]));\n });\n setFavorites(function (prevFavorites) {\n return [].concat(_toConsumableArray(prevFavorites), [selectedItem]);\n });\n })[\"catch\"](function (error) {\n console.error('Error posting likes:', error);\n });\n }\n }\n };\n var handleSnackbarClose = function handleSnackbarClose(event, reason) {\n //스낵바 닫기\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((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n positions: \"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 }, \"Hyunjin'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 borderBottom: 1,\n borderColor: 'divider'\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n value: currentTab,\n onChange: handleTabChange,\n \"aria-label\": \"basic tabs\",\n centered: true\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n label: \"Search Music\",\n value: 0\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n label: \"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((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SearchPage__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n onSearch: setSearchResult\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MusicList__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n list: searchResult,\n likes: likes,\n toggleFavorite: toggleFavorite\n })), currentTab == 1 && /*#__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_6__[\"default\"], {\n align: \"center\",\n variant: \"h5\"\n }, \" Favorites \"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Favorites__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n list: favorites,\n likes: likes,\n toggleFavorite: toggleFavorite\n })), currentTab == 2 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n align: \"center\",\n variant: \"h5\"\n }, \" More Contents \"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SnackMsg__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n open: snackState.open,\n message: snackState.msg,\n onClose: handleSnackbarClose\n }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/App.js?");
/***/ }),
@@ -2337,7 +2337,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _MusicList__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MusicList */ \"./src/MusicList.js\");\n/*\n1. 전역변수 사용하지 말것\n2. SearchPage에서 가수 2~3명의 음악을 검색하고, 좋아요를 클릭하고, \nFavorites 페이지를 보았을 때, 여러 가수들의 노래들이 표시되어야 하고, \nFavorites에서 좋아요를 다시 클릭하면, 그 음악이 사라져야 합니다.\n3. 상태변수 likes는 SearchPage와 Favorites에 공유되어야 한다.\n4. 상태변수 likes를 어느 컴포넌트에 두어야 하며, MusicList, SearchPage, Favorites 컴포넌트의 props는 어떠한 형태로 전달되어야 하는가?\n*/\n\n\n\nvar Favorites = function Favorites(_ref) {\n var list = _ref.list,\n likes = _ref.likes,\n toggleFavorite = _ref.toggleFavorite;\n var favList = list.filter(function (item) {\n return likes[item.collectionId];\n }); //filter함수를 이용하여 좋아요 한 노래들만 필터링해서 favList에 집어넣기\n\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MusicList__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n list: favList,\n likes: likes,\n toggleFavorite: toggleFavorite\n });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Favorites);\n\n//# sourceURL=webpack://muibasic_starterkit/./src/Favorites.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _MusicList__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MusicList */ \"./src/MusicList.js\");\n/*\n1. 전역변수 사용하지 말것\n2. SearchPage에서 가수 2~3명의 음악을 검색하고, 좋아요를 클릭하고, \nFavorites 페이지를 보았을 때, 여러 가수들의 노래들이 표시되어야 하고, \nFavorites에서 좋아요를 다시 클릭하면, 그 음악이 사라져야 합니다.\n3. 상태변수 likes는 SearchPage와 Favorites에 공유되어야 한다.\n4. 상태변수 likes를 어느 컴포넌트에 두어야 하며, MusicList, SearchPage, Favorites 컴포넌트의 props는 어떠한 형태로 전달되어야 하는가?\n*/\n\n\n\nvar Favorites = function Favorites(_ref) {\n var list = _ref.list,\n likes = _ref.likes,\n toggleFavorite = _ref.toggleFavorite;\n //이미 좋아요 리스트를 서버에서 넘겨받고 있기 때문에 favList 삭제\n\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MusicList__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n list: list,\n likes: likes,\n toggleFavorite: toggleFavorite\n });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Favorites);\n\n//# sourceURL=webpack://muibasic_starterkit/./src/Favorites.js?");
/***/ }),
@@ -2348,7 +2348,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ MusicList)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Card/Card.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardContent/CardContent.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardActions/CardActions.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/Favorite.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/FavoriteBorder.js\");\n\n\n\nvar styles = {\n content: {},\n layout: {\n display: 'flex',\n justifyContent: 'center'\n },\n card: {\n minWidth: 275,\n maxWidth: 600,\n marginBottom: '20pt',\n marginLeft: 'auto',\n marginRight: 'auto'\n }\n};\nfunction MusicList(_ref) {\n var list = _ref.list,\n likes = _ref.likes,\n toggleFavorite = _ref.toggleFavorite;\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_1__[\"default\"], {\n sx: styles.card,\n key: item.collectionId\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n varient: \"subtitle1\"\n }, \" \", item.artistName, \" \"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n variant: \"subtitle2\"\n }, \" \", item.collectionCensoredName, \" \")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n onClick: function onClick() {\n return toggleFavorite(item.collectionId, item.collectionCensoredName);\n }\n }, likes[item.collectionId] === true ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], null))));\n }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/MusicList.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ MusicList)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Card/Card.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardContent/CardContent.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardActions/CardActions.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/Favorite.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/FavoriteBorder.js\");\n\n\n\nvar styles = {\n content: {},\n layout: {\n display: 'flex',\n justifyContent: 'center'\n },\n card: {\n minWidth: 275,\n maxWidth: 600,\n marginBottom: '20pt',\n marginLeft: 'auto',\n marginRight: 'auto'\n }\n};\nfunction MusicList(_ref) {\n var list = _ref.list,\n likes = _ref.likes,\n toggleFavorite = _ref.toggleFavorite;\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_1__[\"default\"], {\n sx: styles.card,\n key: item.collectionId\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n varient: \"subtitle1\"\n }, \" \", item.artistName, \" \"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n variant: \"subtitle2\"\n }, \" \", item.collectionName, \" \")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n onClick: function onClick() {\n return toggleFavorite(item.collectionId, item.collectionName);\n }\n }, likes[item.collectionId] === true ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], null))));\n }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/MusicList.js?");
/***/ }),
@@ -2370,7 +2370,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Snackbar/Snackbar.js\");\n\n\nvar SnackMsg = function SnackMsg(props) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n open: props.open,\n anchorOrigin: {\n vertical: 'Bottom',\n horizontal: 'right'\n },\n autoHideDuration: 3000,\n onClose: props.onClose,\n message: props.message\n });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SnackMsg);\n\n//# sourceURL=webpack://muibasic_starterkit/./src/SnackMsg.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Snackbar/Snackbar.js\");\n\n\nvar SnackMsg = function SnackMsg(props) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n open: props.open,\n anchorOrigin: {\n vertical: 'bottom',\n horizontal: 'right'\n },\n autoHideDuration: 3000,\n onClose: props.onClose,\n message: props.message\n });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SnackMsg);\n\n//# sourceURL=webpack://muibasic_starterkit/./src/SnackMsg.js?");
/***/ }),
@@ -2922,7 +2922,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
/******/
/******/ /* webpack/runtime/getFullHash */
/******/ (() => {
-/******/ __webpack_require__.h = () => ("3b8c0da3de0f262a0e19")
+/******/ __webpack_require__.h = () => ("92c3fdb5f090bd684078")
/******/ })();
/******/
/******/ /* webpack/runtime/global */
diff --git a/src/App.js b/src/App.js
index e55576963f5d0d5e6c3d3cb9a4fe05942cf91fce..766a0049046410c2f3088b92fa15629bf13615eb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -14,17 +14,24 @@ export default function App () {
const [snackState, setSnackState] = React.useState({open: false, msg:''})//스낵바열림결과
const [favorites, setFavorites] = React.useState([]);//재검색해도 Favorites목록이 리셋되는 것을 막기 위해 Favorites 모아놓은 상태변수 만듦
- //여기에 useEffect로 favorites랑 likes관리?
+ //여기에 useEffect로 favorites랑 likes관리
//사이트 처음 들어갈 때 좋아요 목록이랑 좋아요 표시가 잘 나타나도록
useEffect(() => {
fetch(`/likes`, {method:'GET'})
.then((r) => r.json())
- .then((r) => {setFavorites(r), setLikes(r);})
+ .then((likesData) => {//DB에서 가져온 배열을 likes 형식에 맞게 바꾸기
+ const formattedLikes = likesData.reduce((acc, item) => {
+ acc[item.collectionId] = true;
+ return acc;
+ }, {});
+ setLikes(formattedLikes);
+ setFavorites(r);
+ })
.catch((error) => {
console.error("Error fetching favorites:", error);
});
}, []);
-
+
const handleTabChange = (event, newValue) => {//탭
setCurrentTab(newValue);
}
@@ -45,35 +52,11 @@ export default function App () {
console.error('Error deleting likes:', error);
});
}
- //참고 코드
- /*
- @GetMapping(value="/likes")
- public List<FavoriteMusic> getLikes() {
- return service.getLikes();
- }
-
- @PostMapping(value="/likes")
- public int postLikes(@RequestBody FavoriteMusicRequestDto favorite) {
- return service.saveFavorite(favorite);
- }
-
- @DeleteMapping(value="/likes/{id}")
- public int deleteLikes(@PathVariable String id) {
- return service.deleteFavorite(id);
- }
- */
- /*
- fetch(`/musicSearch/${searchWord}`)//fetch 기능을 사용하여 서버에 대한 네트워크 요청을 보냄
- .then(r => r.json()).then(r => {
- console.log(r);
- onSearch(r.results);
- setSearchWord('');//searchWord 변수 값을 다시 빈 문자열로 초기화
- }).catch(e => console.log('error when search musician));
- */
+
else {//좋아요가 아직 안 되어있는 item이라면
const selectedItem = searchResult.find(item => item.collectionId === id);
if (selectedItem) {
- fetch(`/likes`, {method: "POST", headers: {'Content-Type': 'application/json'}, body: JSON.stringify(item)})//fetch 기능을 사용하여 서버에 대한 네트워크 요청을 보냄
+ fetch(`/likes`, {method: "POST", headers: {'Content-Type': 'application/json'}, body: JSON.stringify(selectedItem)})//fetch 기능을 사용하여 서버에 대한 네트워크 요청을 보냄
.then((r)=>r.json())
.then((r)=>{
console.log(r);