feat : 10주차 미션 추가

week10/Music/.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

week10/Music/.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?

week10/Music/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

week10/Music/components/MusicComponent.jsx

@@ -0,0 +1,104 @@
+import styled from 'styled-components';
+import { useDispatch, useSelector } from 'react-redux';
+import { increase, decrease, removeItem } from '../src/module/cartSlice';
+import { ChevronDown, ChevronUp } from '../constants/icon';
+
+function MusicComponent({ id, title, singer, price, img, amount }) {
+    const dispatch = useDispatch();
+    const item = useSelector((state) => state.carts.carts.find((cartItem) => cartItem.id === id));
+
+    const handleIncrease = () => {
+    dispatch(increase(id));
+    };
+
+    const handleDecrease = () => {
+    if (item && item.amount === 1) {
+        dispatch(removeItem(id));
+    } else {
+        dispatch(decrease(id));
+    }
+    };
+
+    return (
+    <MusisContents>
+        <MusicImg src={img} alt={title} />
+        <Music>
+        <MusicTitle>{title} | {singer}</MusicTitle>
+        <MusicSinger>₩ {price}</MusicSinger>
+        </Music>
+        <Btn>
+        <Btn_updown onClick={handleIncrease}><ChevronUp /></Btn_updown>
+        <p>{amount}</p>
+        <Btn_updown onClick={handleDecrease}><ChevronDown /></Btn_updown>
+        </Btn>
+    </MusisContents>
+    );
+}
+
+const MusisContents = styled.div`
+    display: flex;
+    flex-direction: row;
+    width: 95%;
+    margin-bottom: 10px;
+`;
+
+const MusicImg = styled.img`
+    height: 100%;
+    width: auto;
+    object-fit: cover;
+`;
+
+const Music = styled.div`
+    width: 60%;
+    padding: 0px 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+`;
+
+const MusicTitle = styled.h3`
+    font-size: 15px;
+    font-weight: 500;
+    margin: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+`;
+
+const MusicSinger = styled.p`
+    font-size: 12px;
+    font-weight: 500;
+    margin: 0;
+    color: grey;
+    margin-top: 5px;
+`;
+
+const Btn = styled.div`
+    height: 100%;
+    width: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    margin-left: auto;
+    border: none;
+`;
+
+const Btn_updown = styled.button`
+    width: 30px;
+    height: 30px;
+    background-color: yellowgreen;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    &:active {
+    background-color: green;
+    }
+`;
+
+export default MusicComponent;

week10/Music/components/SpinnerComponent.jsx

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+import Spinner from '../assets/Spinner.gif'
+
+function SpinnerComponent() {
+    return(
+        <SpinnerWrapper>
+            <img src={Spinner} alt="loading" width="15%" height="15%" color='white'/>
+        </SpinnerWrapper>
+    );
+}
+
+const SpinnerWrapper = styled.div`
+    width: 100%;
+    height: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 100px;
+
+`;
+
+export default SpinnerComponent;

week10/Music/constants/cartItems.jsx

@@ -0,0 +1,100 @@
+const cartItems = [
+    {
+        id: 'recB6qcHPxb62YJ75',
+        title: 'Vancouver',
+        singer: 'BIG Naughty (서동현)',
+        price: '25000',
+        img: 'https://image.bugsm.co.kr/album/images/500/40752/4075248.jpg',
+        amount: 1,
+    },
+    {
+        id: 'recdRxBsE14Rr2VuJ',
+        title: 'Empty Island',
+        singer: 'greenblue',
+        price: '18000',
+        img: 'https://f4.bcbits.com/img/a1472100223_10.jpg',
+        amount: 1,
+    },
+    {
+        id: 'recwTo120XST3PIoW',
+        title: 'golden hour',
+        singer: 'JVKE',
+        price: '28000',
+        img: 'https://image.bugsm.co.kr/album/images/200/193874/19387484.jpg?version=20230503022513.0',
+        amount: 1,
+    },
+    {
+        id: 'rec1JZlfCIBOPdcT2',
+        title: 'Home Sweet Home(From "어쩌면 우린 헤어졌는지 모른다")',
+        singer: 'Gogang (고갱)',
+        price: '20000',
+        img: 'https://is1-ssl.mzstatic.com/image/thumb/Music116/v4/8d/d7/0f/8dd70fba-0a8f-b7ce-a2d2-f0d32dad2837/8809912894132.jpg/1200x1200bf-60.jpg',
+        amount: 1,
+    },
+    {
+        id: 'recwTo160XST3PIoW',
+        title: 'Lemon',
+        singer: 'Kenshi Yonezu(켄시 요네즈/米津 玄師)',
+        price: '30000',
+        img: 'https://image.bugsm.co.kr/album/images/200/7222/722272.jpg?version=20220514022202.0',
+        amount: 1,
+    },
+    {
+        id: 'recaBo120XST3PIoW',
+        title: '돌멩이',
+        singer: 'MASYTA (마시따)',
+        price: '12000',
+        img: 'https://image.bugsm.co.kr/album/images/200/3271/327113.jpg?version=20230606014806.0',
+        amount: 1,
+    },
+    {
+        id: 'recqBo123XST3PIoK',
+        title: 'L’Amour, Les Baguettes, Paris',
+        singer: '스텔라 장(Stella Jang)',
+        price: '32000',
+        img: 'https://image.bugsm.co.kr/album/images/200/40660/4066056.jpg?version=20211020003912.0',
+        amount: 1,
+    },
+    {
+        id: 'recqBo133XST3PIoK',
+        title: 'NO PAIN',
+        singer: '실리카겔',
+        price: '22000',
+        img: 'https://image.bugsm.co.kr/album/images/200/40790/4079061.jpg?version=20220826063340.0',
+        amount: 1,
+    },
+    {
+        id: 'recqBo145XST3PIoK',
+        title: '너에게 (feat. HYUN SEO)',
+        singer: 'Halsoon',
+        price: '20000',
+        img: 'https://image.bugsm.co.kr/album/images/200/204634/20463445.jpg?version=20230110013144.0',
+        amount: 1,
+    },
+    {
+        id: 'recqBo129XST3PIoK',
+        title: '널 떠올리는 중이야(Think About You)',
+        singer: 'PATEKO (파테코) , Jayci yucca(제이씨 유카)',
+        price: '25000',
+        img: 'https://image.bugsm.co.kr/album/images/200/40581/4058181.jpg?version=20210726063528.0',
+        amount: 1,
+    },
+    {
+        id: 'rdaqBo129XST3PIoK',
+        title: '끝나지 않은 얘기(feat. 다이나믹 듀오)',
+        singer: '릴러말즈 & TOIL',
+        price: '23000',
+        img: 'https://image.bugsm.co.kr/album/images/200/204692/20469237.jpg?version=20220827004220.0',
+        amount: 1,
+    },
+    {
+        id: 'rdaqBo149XQT3PIoK',
+        title: '각자의 밤',
+        singer: '나상현씨 밴드',
+        price: '21000',
+        img: 'https://image.bugsm.co.kr/album/images/200/202235/20223594.jpg?version=20230904194021.0',
+        amount: 1,
+    },
+];
+
+export default cartItems;

week10/Music/constants/icon.jsx

@@ -0,0 +1,49 @@
+
+export const CartIcon = () => {
+    return (
+        <svg
+        xmlns='http://www.w3.org/2000/svg'
+        className='h-6 w-6 '
+        fill='none'
+        viewBox='0 0 24 24'
+        stroke='currentColor'
+        strokeWidth={2}
+        >
+        <path
+            strokeLinecap='round'
+            strokeLinejoin='round'
+            d='M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z'
+        />
+        </svg>
+    );
+    };
+
+    export const ChevronDown = () => {
+    return (
+        <svg
+        xmlns='http://www.w3.org/2000/svg'
+        className='h-6 w-6'
+        fill='none'
+        viewBox='0 0 24 24'
+        stroke='currentColor'
+        strokeWidth={2}
+        >
+        <path strokeLinecap='round' strokeLinejoin='round' d='M19 9l-7 7-7-7' />
+        </svg>
+    );
+    };
+
+    export const ChevronUp = () => {
+    return (
+        <svg
+        xmlns='http://www.w3.org/2000/svg'
+        className='h-6 w-6'
+        fill='none'
+        viewBox='0 0 24 24'
+        stroke='currentColor'
+        strokeWidth={2}
+        >
+        <path strokeLinecap='round' strokeLinejoin='round' d='M5 15l7-7 7 7' />
+        </svg>
+    );
+};

week10/Music/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>