Skip to content
Snippets Groups Projects
Commit 9ff36ab4 authored by HyunjinNoh's avatar HyunjinNoh
Browse files

DB 연결 관련 오타 수정

parent 1cf3f8e9
No related branches found
No related tags found
No related merge requests found
-- Active: 1689572124222@@210.107.196.163@44098 -- Active: 1689572124222@@210.107.196.163@44098@webdev
CREATE DATABASE webdev default CHARACTER SET UTF8 collate utf8_general_ci; CREATE DATABASE webdev default CHARACTER SET UTF8 collate utf8_general_ci;
\ No newline at end of file
...@@ -2326,7 +2326,7 @@ ...@@ -2326,7 +2326,7 @@
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict"; "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 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?"); 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(likesData);\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?");
/***/ }), /***/ }),
...@@ -2922,7 +2922,7 @@ ...@@ -2922,7 +2922,7 @@
/******/ /******/
/******/ /* webpack/runtime/getFullHash */ /******/ /* webpack/runtime/getFullHash */
/******/ (() => { /******/ (() => {
/******/ __webpack_require__.h = () => ("92c3fdb5f090bd684078") /******/ __webpack_require__.h = () => ("caebf3bcec379db33019")
/******/ })(); /******/ })();
/******/ /******/
/******/ /* webpack/runtime/global */ /******/ /* webpack/runtime/global */
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment