인프런 커뮤니티 질문&답변

강의 19:07까지 따라하다가 오류가 갑자기 많이 뜨는데 어디에서 잘못된 것인지 모르겠습니다..

.

DiaryList.jsx

import "./DiaryList.css";
import Button from "./Button";
import DiaryItem from "./DiaryItem";

const DiaryList=({data})=>{
    return <div className="DiaryList">
        <div className="menu_bar">
            <select>
                <option value={"latest"}>Newest</option>
                <option value={"oldest"}>Oldest</option>
            </select>
            <Button text={"write new diary"} type={"POSITIVE"} />
        </div>
        <div className="list_wrapper">
            {data.map((item)=><DiaryItem key={item.id} {...item}/>)}
        </div>
    </div>;
};

export default DiaryList;

DiaryItem.jsx

import {getEmotionImage} from "../util/get-emotion-image";
import Button from "./Button";
import "./DiaryItem.css";

const DiaryItem=({id,emotionId,createdDate,content})=>{

    return (<div className="DiaryItem">
        <div className={`img_section img_section_${emotionId}`}>
            <img src={getEmotionImage(emotionId)}/>
        </div>
        <div className="info_section">
            <div className="created_date">
                {new Date(createdDate).toLocaleDateString()};
            </div>
            <div className="content">{content}</div>
        </div>
        <div className="button_section">
            <Button text={"수정하기"} />
        </div>
    </div>
    );
};

export default DiaryItem;

App.jsx

import './App.css'
import{useReducer,useRef,createContext} from "react";
import {Routes,Route} from "react-router-dom";
import Home from "./pages/Home";
import Diary from "./pages/Diary";
import New from "./pages/New";
import Edit from "./pages/Edit";
import Notfound from "./pages/Notfound";


const mockData=[
  {
    id:1,
    createdDate:new Date("2025-02-18").getTime(),
    emotionId:1,
    content:"1번 일기 내용",
  },
  {
    id:2,
    createdDate:new Date("2025-02-17").getTime(),
    emotionId:2,
    content:"2번 일기 내용",
  },
  {
    id:3,
    createdDate:new Date("2025-01-15").getTime(),
    emotionId:3,
    content:"3번 일기 내용",
  },
]; 

function reducer(state,action){
  switch(action.type){
    case "CREATE": return [action.data,...state];
    case "UPDATE": return state.map((item)=>
      String(item.id)===String(action.data.id)
    ?action.data
    : item
  );
  case "DELETE":
    return state.filter(
      (item)=>String(item.id)!==String(action.id)
    );
  default:
  return state;
}
}

 export const DiaryStateContext=createContext();
export const DiaryDispatchContext=createContext();

function App() {
  const [data,dispatch]=useReducer(reducer,mockData);
  const idRef=useRef(3);
  //새로운 일기 추가
  const onCreate=(createdDate,emotionId,content)=>{
    dispatch({
      type:"CREATE",
      data:{
        id: idRef.current++,
        createdDate,
        emotionId,
        content,
      },
    });
  };

  //기존 일기 수정
  const onUpdate =(id,createdDate,emotionId,content)=>{
    dispatch({
      type:"UPDATE",
      data: {
        id,
        createdDate,
        emotionId,
        content,
      },
    });
  };

//기존 일기 삭제
const onDelete=(id)=>{
  dispatch({
    type:"DELETE",
    id,
  });
};

  return (
    <>

        <DiaryStateContext.Provider value={data}>
          <DiaryDispatchContext.Provider value={{
            onCreate,
            onUpdate,
            onDelete,
            }}
            >
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/new" element={<New />} />
    <Route path="/diary/:id" element={<Diary />} />
    <Route path="/edit/:id" element={<Edit />} />
    <Route path="*" element={<Notfound />} />
  </Routes>
  </DiaryDispatchContext.Provider>
  </DiaryStateContext.Provider>
  
  </>
  );
}

export default App