+ 
+
+
+
+
+ {title}
+{singer}
++ ₩ {parseInt(price).toLocaleString()} +
+ +
+ {/* 증가 버튼 */}
+
+
+
+ {amount}
+ + {/* 감소 버튼 */} + +
+
+
+
+
+
+ {title}
+{singer}
++ ₩ {parseInt(price).toLocaleString()} +
+ +
+ {/* 증가 버튼 */}
+
+
+
+ {amount}
+ + {/* 감소 버튼 */} + ++ 당신의 장바구니 +
+현재 비어있습니다.
++ 당신의 장바구니 +
+
+ {cartItems.map((item) => (
+
+
+
+
+
+
+
+
+
+ + {title} +
+{singer}
++ ₩ {parseInt(price).toLocaleString()} +
+ +
+
+
+
+ + {amount} +
+ + ++ 당신의 장바구니 +
+현재 비어있습니다.
++ 당신의 장바구니 +
+
+ {cartItems.map((item) => (
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default App;
diff --git a/week09/sueonnn/mission00/src/assets/react.svg b/week09/sueonnn/mission00/src/assets/react.svg
new file mode 100644
index 00000000..6c87de9b
--- /dev/null
+++ b/week09/sueonnn/mission00/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/week09/sueonnn/mission00/src/components/UseReducerCompany.tsx b/week09/sueonnn/mission00/src/components/UseReducerCompany.tsx
new file mode 100644
index 00000000..4368087d
--- /dev/null
+++ b/week09/sueonnn/mission00/src/components/UseReducerCompany.tsx
@@ -0,0 +1,81 @@
+import { useReducer, useState, ChangeEvent } from "react";
+
+interface IState {
+ department: string;
+ error: string | null;
+}
+
+interface IAction {
+ type: "CHANGE_DEPARTMENT";
+ payload: string;
+}
+
+function reducer(state: IState, action: IAction): IState {
+ switch (action.type) {
+ case "CHANGE_DEPARTMENT":
+ const newDepartment = action.payload;
+
+ if (newDepartment !== "Card Maker") {
+ return {
+ ...state,
+ error: "Card Maker만 입력 가능합니다. (거부권 행사 가능)",
+ };
+ } else {
+ return {
+ ...state,
+ department: newDepartment,
+ error: null,
+ };
+ }
+ default:
+ return state;
+ }
+}
+
+const initialState: IState = {
+ department: "Software Developer",
+ error: null,
+};
+
+export default function UseReducerCompany() {
+ const [state, dispatch] = useReducer(reducer, initialState);
+
+ const [departmentInput, setDepartmentInput] = useState("");
+
+ const handleChangeDepartment = (e: ChangeEvent+ 1. 기본 예제: Counter +
++ 2. 심화 예제: 직무 변경 (Validation) +
+
+
+ );
+}
diff --git a/week09/sueonnn/mission00/src/components/UseReducerPage.tsx b/week09/sueonnn/mission00/src/components/UseReducerPage.tsx
new file mode 100644
index 00000000..fd9d1145
--- /dev/null
+++ b/week09/sueonnn/mission00/src/components/UseReducerPage.tsx
@@ -0,0 +1,73 @@
+import { useReducer } from "react";
+
+interface IState {
+ counter: number;
+}
+
+interface IAction {
+ type: "INCREMENT" | "DECREMENT" | "RESET";
+ payload?: number;
+}
+
+const initialState: IState = {
+ counter: 0,
+};
+
+function reducer(state: IState, action: IAction): IState {
+ switch (action.type) {
+ case "INCREMENT":
+ return {
+ ...state,
+ counter: state.counter + (action.payload ?? 1),
+ };
+ case "DECREMENT":
+ return {
+ ...state,
+ counter: state.counter - 1,
+ };
+ case "RESET":
+ return {
+ ...state,
+ counter: 0,
+ };
+ default:
+ return state;
+ }
+}
+
+export default function UseReducerPage() {
+ const [state, dispatch] = useReducer(reducer, initialState);
+
+ return (
+
+
+
+ {state.department}
+ + {state.error && ( + {state.error} + )} +
+
+
+
+
+
+
+ );
+}
diff --git a/week09/sueonnn/mission00/src/index.css b/week09/sueonnn/mission00/src/index.css
new file mode 100644
index 00000000..f1d8c73c
--- /dev/null
+++ b/week09/sueonnn/mission00/src/index.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/week09/sueonnn/mission00/src/main.tsx b/week09/sueonnn/mission00/src/main.tsx
new file mode 100644
index 00000000..3d7150da
--- /dev/null
+++ b/week09/sueonnn/mission00/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+ useReducer 사용
+ +
+
+ {state.counter}
+ +
+
+
+
+
+
+
+