+
+ );
+}
diff --git a/week09/dongyeol02/mission0/src/pages/UseReducerPage.tsx b/week09/dongyeol02/mission0/src/pages/UseReducerPage.tsx
new file mode 100644
index 00000000..a8f59af6
--- /dev/null
+++ b/week09/dongyeol02/mission0/src/pages/UseReducerPage.tsx
@@ -0,0 +1,99 @@
+import { useState, useReducer } from "react";
+
+interface IState {
+ counter: number;
+ error: string | null;
+}
+
+interface IAction {
+ type: "INCREASE" | "DECREASE" | "RESET_TO_ZERO";
+ payload?: number;
+}
+
+function reducer(state: IState, action: IAction): IState {
+ const { type } = action;
+ console.log(action);
+ console.log(state);
+
+ switch (type) {
+ case "INCREASE": {
+ return {
+ ...state,
+ counter: state.counter + 1,
+ };
+ }
+ case "DECREASE": {
+ return {
+ ...state,
+ counter: state.counter - 1,
+ };
+ }
+ case "RESET_TO_ZERO": {
+ return {
+ ...state,
+ counter: 0,
+ };
+ }
+ default:
+ return state;
+ }
+}
+
+export default function UseReducerPage() {
+ // 1. useState
+ const [count, setCount] = useState(0);
+
+ // 2. useReducer
+ const [state, dispatch] = useReducer(reducer, {
+ counter: 0,
+ error: null,
+ });
+
+ const handleIncrease = (): void => {
+ setCount(count + 1);
+ };
+
+ console.log(state);
+
+ return (
+ {state.department}
+ {state.error &&{state.error}
} + + + + + +
+
+ );
+}
diff --git a/week09/dongyeol02/mission0/tsconfig.app.json b/week09/dongyeol02/mission0/tsconfig.app.json
new file mode 100644
index 00000000..a9b5a59c
--- /dev/null
+++ b/week09/dongyeol02/mission0/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "ES2022",
+ "useDefineForClassFields": true,
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "types": ["vite/client"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["src"]
+}
diff --git a/week09/dongyeol02/mission0/tsconfig.json b/week09/dongyeol02/mission0/tsconfig.json
new file mode 100644
index 00000000..1ffef600
--- /dev/null
+++ b/week09/dongyeol02/mission0/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/week09/dongyeol02/mission0/tsconfig.node.json b/week09/dongyeol02/mission0/tsconfig.node.json
new file mode 100644
index 00000000..8a67f62f
--- /dev/null
+++ b/week09/dongyeol02/mission0/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "ES2023",
+ "lib": ["ES2023"],
+ "module": "ESNext",
+ "types": ["node"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/week09/dongyeol02/mission0/vite.config.ts b/week09/dongyeol02/mission0/vite.config.ts
new file mode 100644
index 00000000..011a9d87
--- /dev/null
+++ b/week09/dongyeol02/mission0/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+ plugins: [tailwindcss()],
+});
diff --git a/week09/dongyeol02/mission1/.gitignore b/week09/dongyeol02/mission1/.gitignore
new file mode 100644
index 00000000..a547bf36
--- /dev/null
+++ b/week09/dongyeol02/mission1/.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/week09/dongyeol02/mission1/README.md b/week09/dongyeol02/mission1/README.md
new file mode 100644
index 00000000..d2e77611
--- /dev/null
+++ b/week09/dongyeol02/mission1/README.md
@@ -0,0 +1,73 @@
+# React + TypeScript + 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) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+ globalIgnores(['dist']),
+ {
+ files: ['**/*.{ts,tsx}'],
+ extends: [
+ // Other configs...
+
+ // Remove tseslint.configs.recommended and replace with this
+ tseslint.configs.recommendedTypeChecked,
+ // Alternatively, use this for stricter rules
+ tseslint.configs.strictTypeChecked,
+ // Optionally, add this for stylistic rules
+ tseslint.configs.stylisticTypeChecked,
+
+ // Other configs...
+ ],
+ languageOptions: {
+ parserOptions: {
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
+ tsconfigRootDir: import.meta.dirname,
+ },
+ // other options...
+ },
+ },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+ globalIgnores(['dist']),
+ {
+ files: ['**/*.{ts,tsx}'],
+ extends: [
+ // Other configs...
+ // Enable lint rules for React
+ reactX.configs['recommended-typescript'],
+ // Enable lint rules for React DOM
+ reactDom.configs.recommended,
+ ],
+ languageOptions: {
+ parserOptions: {
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
+ tsconfigRootDir: import.meta.dirname,
+ },
+ // other options...
+ },
+ },
+])
+```
diff --git a/week09/dongyeol02/mission1/eslint.config.js b/week09/dongyeol02/mission1/eslint.config.js
new file mode 100644
index 00000000..5e6b472f
--- /dev/null
+++ b/week09/dongyeol02/mission1/eslint.config.js
@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+ globalIgnores(['dist']),
+ {
+ files: ['**/*.{ts,tsx}'],
+ extends: [
+ js.configs.recommended,
+ tseslint.configs.recommended,
+ reactHooks.configs.flat.recommended,
+ reactRefresh.configs.vite,
+ ],
+ languageOptions: {
+ ecmaVersion: 2020,
+ globals: globals.browser,
+ },
+ },
+])
diff --git a/week09/dongyeol02/mission1/index.html b/week09/dongyeol02/mission1/index.html
new file mode 100644
index 00000000..89ce886c
--- /dev/null
+++ b/week09/dongyeol02/mission1/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+ useState
+useState 훅 사용: {count}
+ +
+
+ useReducer
+useReducer 훅 사용: {state.counter}
+ + + +
+ 
+
+
+
+
+ {item.title}
+{item.singer}
++ ₩{Number(item.price).toLocaleString()} +
+
+
+
+ {item.amount}
+
+
+
+ -
+ {items.map((item) => (
+
+
+
+
+
+
+ + 총 수량 + {totalAmount}개 +
++ 총 금액 + + ₩{totalPrice.toLocaleString()} + +
+
+
+ );
+};
+
+export default ClearCartModal;
diff --git a/week09/dongyeol02/mission1/src/component/Navbar.tsx b/week09/dongyeol02/mission1/src/component/Navbar.tsx
new file mode 100644
index 00000000..542ffb7a
--- /dev/null
+++ b/week09/dongyeol02/mission1/src/component/Navbar.tsx
@@ -0,0 +1,14 @@
+type NavbarProps = {
+ totalAmount: number;
+};
+
+const Navbar = ({ totalAmount }: NavbarProps) => {
+ return (
+
+
+ + 장바구니를 모두 비우시겠습니까? +
++ 이 작업은 되돌릴 수 없습니다. +
+ +
+
+
+
+
+ );
+};
+
+export default Navbar;
diff --git a/week09/dongyeol02/mission1/src/constants/cartItems.ts b/week09/dongyeol02/mission1/src/constants/cartItems.ts
new file mode 100644
index 00000000..6fff899b
--- /dev/null
+++ b/week09/dongyeol02/mission1/src/constants/cartItems.ts
@@ -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;
diff --git a/week09/dongyeol02/mission1/src/features/cart/cartSlice.ts b/week09/dongyeol02/mission1/src/features/cart/cartSlice.ts
new file mode 100644
index 00000000..6b5387c5
--- /dev/null
+++ b/week09/dongyeol02/mission1/src/features/cart/cartSlice.ts
@@ -0,0 +1,95 @@
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
+import cartItems from "../../constants/cartItems";
+
+export type CartItem = (typeof cartItems)[number];
+
+type CartState = {
+ cartItems: CartItem[];
+ amount: number; // 전체 수량
+ total: number; // 전체 금액
+};
+
+const calcTotals = (items: CartItem[]) => {
+ let amount = 0;
+ let total = 0;
+
+ items.forEach((item) => {
+ amount += item.amount;
+ total += Number(item.price) * item.amount;
+ });
+
+ return { amount, total };
+};
+
+const initialTotals = calcTotals(cartItems);
+
+const initialState: CartState = {
+ cartItems,
+ amount: initialTotals.amount,
+ total: initialTotals.total,
+};
+
+const cartSlice = createSlice({
+ name: "cart",
+ initialState,
+ reducers: {
+ // 수량 증가
+ increase: (state, action: PayloadActiondongyeol
+ 장바구니 {totalAmount}
+
+
+ dispatch(increase(id))}
+ onDecrease={(id) => dispatch(decrease(id))}
+ />
+ dispatch(openModal())}
+ />
+
+
+ );
+};
+
+export default Homepage;
diff --git a/week09/dongyeol02/mission1/src/store/store.ts b/week09/dongyeol02/mission1/src/store/store.ts
new file mode 100644
index 00000000..8f8f33c1
--- /dev/null
+++ b/week09/dongyeol02/mission1/src/store/store.ts
@@ -0,0 +1,13 @@
+import { configureStore } from "@reduxjs/toolkit";
+import cartReducer from "../features/cart/cartSlice";
+import modalReducer from "../features/modal/modalSlice";
+
+export const store = configureStore({
+ reducer: {
+ cart: cartReducer,
+ modal: modalReducer,
+ },
+});
+
+export type RootState = ReturnType
+
+
+
+
+
+ {item.title}
+{item.singer}
++ ₩{Number(item.price).toLocaleString()} +
+
+
+
+ {item.amount}
+
+
+
+ -
+ {items.map((item) => (
+
+
+
+
+
+
+ + 총 수량 + {totalAmount}개 +
++ 총 금액 + + ₩{totalPrice.toLocaleString()} + +
+
+
+ );
+};
+
+export default ClearCartModal;
diff --git a/week09/dongyeol02/mission2/src/component/Navbar.tsx b/week09/dongyeol02/mission2/src/component/Navbar.tsx
new file mode 100644
index 00000000..542ffb7a
--- /dev/null
+++ b/week09/dongyeol02/mission2/src/component/Navbar.tsx
@@ -0,0 +1,14 @@
+type NavbarProps = {
+ totalAmount: number;
+};
+
+const Navbar = ({ totalAmount }: NavbarProps) => {
+ return (
+
+
+ + 장바구니를 모두 비우시겠습니까? +
++ 이 작업은 되돌릴 수 없습니다. +
+ +
+
+
+
+
+ );
+};
+
+export default Navbar;
diff --git a/week09/dongyeol02/mission2/src/constants/cartItems.ts b/week09/dongyeol02/mission2/src/constants/cartItems.ts
new file mode 100644
index 00000000..6fff899b
--- /dev/null
+++ b/week09/dongyeol02/mission2/src/constants/cartItems.ts
@@ -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;
diff --git a/week09/dongyeol02/mission2/src/features/cart/cartSlice.ts b/week09/dongyeol02/mission2/src/features/cart/cartSlice.ts
new file mode 100644
index 00000000..6b5387c5
--- /dev/null
+++ b/week09/dongyeol02/mission2/src/features/cart/cartSlice.ts
@@ -0,0 +1,95 @@
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
+import cartItems from "../../constants/cartItems";
+
+export type CartItem = (typeof cartItems)[number];
+
+type CartState = {
+ cartItems: CartItem[];
+ amount: number; // 전체 수량
+ total: number; // 전체 금액
+};
+
+const calcTotals = (items: CartItem[]) => {
+ let amount = 0;
+ let total = 0;
+
+ items.forEach((item) => {
+ amount += item.amount;
+ total += Number(item.price) * item.amount;
+ });
+
+ return { amount, total };
+};
+
+const initialTotals = calcTotals(cartItems);
+
+const initialState: CartState = {
+ cartItems,
+ amount: initialTotals.amount,
+ total: initialTotals.total,
+};
+
+const cartSlice = createSlice({
+ name: "cart",
+ initialState,
+ reducers: {
+ // 수량 증가
+ increase: (state, action: PayloadActiondongyeol
+ 장바구니 {totalAmount}
+
+
+ dispatch(increase(id))}
+ onDecrease={(id) => dispatch(decrease(id))}
+ />
+ dispatch(openModal())}
+ />
+
+
+ );
+};
+
+export default Homepage;
diff --git a/week09/dongyeol02/mission2/src/store/store.ts b/week09/dongyeol02/mission2/src/store/store.ts
new file mode 100644
index 00000000..8f8f33c1
--- /dev/null
+++ b/week09/dongyeol02/mission2/src/store/store.ts
@@ -0,0 +1,13 @@
+import { configureStore } from "@reduxjs/toolkit";
+import cartReducer from "../features/cart/cartSlice";
+import modalReducer from "../features/modal/modalSlice";
+
+export const store = configureStore({
+ reducer: {
+ cart: cartReducer,
+ modal: modalReducer,
+ },
+});
+
+export type RootState = ReturnType
+
+
+
+
+
+ {item.title}
+{item.singer}
++ ₩{Number(item.price).toLocaleString()} +
+
+
+
+ {item.amount}
+
+
+
+ -
+ {items.map((item) => (
+
+
+
+
+
+
+ + 총 수량 + {totalAmount}개 +
++ 총 금액 + + ₩{totalPrice.toLocaleString()} + +
+
+
+ );
+};
+
+export default ClearCartModal;
diff --git a/week09/dongyeol02/mission3/src/component/Navbar.tsx b/week09/dongyeol02/mission3/src/component/Navbar.tsx
new file mode 100644
index 00000000..542ffb7a
--- /dev/null
+++ b/week09/dongyeol02/mission3/src/component/Navbar.tsx
@@ -0,0 +1,14 @@
+type NavbarProps = {
+ totalAmount: number;
+};
+
+const Navbar = ({ totalAmount }: NavbarProps) => {
+ return (
+
+
+ + 장바구니를 모두 비우시겠습니까? +
++ 이 작업은 되돌릴 수 없습니다. +
+ +
+
+
+
+
+
+ );
+};
+
+export default Navbar;
diff --git a/week09/dongyeol02/mission3/src/constants/cartItems.ts b/week09/dongyeol02/mission3/src/constants/cartItems.ts
new file mode 100644
index 00000000..6fff899b
--- /dev/null
+++ b/week09/dongyeol02/mission3/src/constants/cartItems.ts
@@ -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;
diff --git a/week09/dongyeol02/mission3/src/features/cart/cartSlice.ts b/week09/dongyeol02/mission3/src/features/cart/cartSlice.ts
new file mode 100644
index 00000000..6b5387c5
--- /dev/null
+++ b/week09/dongyeol02/mission3/src/features/cart/cartSlice.ts
@@ -0,0 +1,95 @@
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
+import cartItems from "../../constants/cartItems";
+
+export type CartItem = (typeof cartItems)[number];
+
+type CartState = {
+ cartItems: CartItem[];
+ amount: number; // 전체 수량
+ total: number; // 전체 금액
+};
+
+const calcTotals = (items: CartItem[]) => {
+ let amount = 0;
+ let total = 0;
+
+ items.forEach((item) => {
+ amount += item.amount;
+ total += Number(item.price) * item.amount;
+ });
+
+ return { amount, total };
+};
+
+const initialTotals = calcTotals(cartItems);
+
+const initialState: CartState = {
+ cartItems,
+ amount: initialTotals.amount,
+ total: initialTotals.total,
+};
+
+const cartSlice = createSlice({
+ name: "cart",
+ initialState,
+ reducers: {
+ // 수량 증가
+ increase: (state, action: PayloadActiondongyeol
+ 장바구니 {totalAmount}
+
+
+
+
+
+ );
+};
+
+export default Homepage;
diff --git a/week09/dongyeol02/mission3/src/store/store.ts b/week09/dongyeol02/mission3/src/store/store.ts
new file mode 100644
index 00000000..8f8f33c1
--- /dev/null
+++ b/week09/dongyeol02/mission3/src/store/store.ts
@@ -0,0 +1,13 @@
+import { configureStore } from "@reduxjs/toolkit";
+import cartReducer from "../features/cart/cartSlice";
+import modalReducer from "../features/modal/modalSlice";
+
+export const store = configureStore({
+ reducer: {
+ cart: cartReducer,
+ modal: modalReducer,
+ },
+});
+
+export type RootState = ReturnType