diff --git a/playlist/.gitignore b/playlist/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/playlist/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/playlist/README.md b/playlist/README.md new file mode 100644 index 0000000..f768e33 --- /dev/null +++ b/playlist/README.md @@ -0,0 +1,8 @@ +# React + Vite + +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. + +Currently, two official plugins are available: + +- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh diff --git a/playlist/eslint.config.js b/playlist/eslint.config.js new file mode 100644 index 0000000..238d2e4 --- /dev/null +++ b/playlist/eslint.config.js @@ -0,0 +1,38 @@ +import js from '@eslint/js' +import globals from 'globals' +import react from 'eslint-plugin-react' +import reactHooks from 'eslint-plugin-react-hooks' +import reactRefresh from 'eslint-plugin-react-refresh' + +export default [ + { ignores: ['dist'] }, + { + files: ['**/*.{js,jsx}'], + languageOptions: { + ecmaVersion: 2020, + globals: globals.browser, + parserOptions: { + ecmaVersion: 'latest', + ecmaFeatures: { jsx: true }, + sourceType: 'module', + }, + }, + settings: { react: { version: '18.3' } }, + plugins: { + react, + 'react-hooks': reactHooks, + 'react-refresh': reactRefresh, + }, + rules: { + ...js.configs.recommended.rules, + ...react.configs.recommended.rules, + ...react.configs['jsx-runtime'].rules, + ...reactHooks.configs.recommended.rules, + 'react/jsx-no-target-blank': 'off', + 'react-refresh/only-export-components': [ + 'warn', + { allowConstantExport: true }, + ], + }, + }, +] diff --git a/playlist/index.html b/playlist/index.html new file mode 100644 index 0000000..e8d9cd5 --- /dev/null +++ b/playlist/index.html @@ -0,0 +1,17 @@ + + + + + + + + Hello React + + + +
+
+ + + + diff --git a/playlist/package.json b/playlist/package.json new file mode 100644 index 0000000..6df0b9b --- /dev/null +++ b/playlist/package.json @@ -0,0 +1,35 @@ +{ + "name": "playlist", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "lint": "eslint .", + "preview": "vite preview" + }, + "dependencies": { + "@heroicons/react": "^2.2.0", + "@reduxjs/toolkit": "^2.3.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-icons": "^5.3.0", + "react-redux": "^9.1.2", + "redux": "^5.0.1", + "styled-components": "^6.1.13", + "zustand": "^5.0.1" + }, + "devDependencies": { + "@eslint/js": "^9.13.0", + "@types/react": "^18.3.12", + "@types/react-dom": "^18.3.1", + "@vitejs/plugin-react-swc": "^3.5.0", + "eslint": "^9.13.0", + "eslint-plugin-react": "^7.37.2", + "eslint-plugin-react-hooks": "^5.0.0", + "eslint-plugin-react-refresh": "^0.4.14", + "globals": "^15.11.0", + "vite": "^5.4.10" + } +} diff --git a/playlist/public/vite.svg b/playlist/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/playlist/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/playlist/src/App.css b/playlist/src/App.css new file mode 100644 index 0000000..e69de29 diff --git a/playlist/src/App.jsx b/playlist/src/App.jsx new file mode 100644 index 0000000..ab60246 --- /dev/null +++ b/playlist/src/App.jsx @@ -0,0 +1,80 @@ +/*import Navbar from './components/Navbar' +import Footer from './components/Footer' +import CartContainer from './components/CartContainer' +import { useDispatch, useSelector } from 'react-redux' +import { useEffect } from 'react' +import { calculateTotals } from './features/cart/cartSlice' +import ModalPotal from './components/ModalPortal' +import Modal from './components/Modal' + +function App() { + const dispatch=useDispatch() + const {cartItems} = useSelector((store)=>store.cart) + const {isOpen} = useSelector((store)=>store.modal) + + useEffect(()=>{ + dispatch(calculateTotals()) + },[cartItems,dispatch]) + + return ( + <> +
+ +
+
+ + {isOpen&& + +

담아두신 모든 음반을 삭제하시겠습니까?

+ + } +
+