style: 앱뷰를 먼저 구현하는 것으로 코드를 수정했습니다

eslint.config.js

@@ -33,6 +33,7 @@ export default [
         'warn',
         { allowConstantExport: true },
       ],
+      "react/prop-types": "off"
     },
   },
 ]

package.json

@@ -10,9 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.7.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^7.0.2"
+    "react-router-dom": "^7.0.2",
+    "react-youtube": "^10.1.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",

src/App.jsx

@@ -1,11 +1,12 @@
 import './App.css'
-import { Routes, Route } from 'react-router-dom'
+import { RouterProvider, createBrowserRouter } from 'react-router-dom'
 import { useReducer, useRef, createContext, useEffect, useState } from 'react';
 import Home from './pages/Home';
 import New from './pages/New';
 import Post from './pages/Post';
 import Notfound from './pages/Notfound';
 import Edit from './pages/Edit';
+import Video from './pages/Video'
 
 function reducer(state, action) {
   let nextState;
@@ -30,6 +31,34 @@ function reducer(state, action) {
   return nextState
 }
 
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Home />,
+  },
+  {
+    path: "/new",
+    element: <New />,
+  },
+  {
+    path: "/post/:id",
+    element: <Post />,
+  },
+  {
+    path: "/edit/:id",
+    element: <Edit />,
+  },
+  {
+    path: "/video",
+    element: <Video />,
+  },
+  {
+    path: "*",
+    element: <Notfound />,
+  },
+]);
+
+// 컨텍스트
 export const PostStateContext = createContext();
 export const PostDispatchContext = createContext();
 
@@ -109,13 +138,7 @@ function App() {
         <PostDispatchContext.Provider value={{
           onCreate, onDelete, onUpdate
         }}>
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/new" element={<New />} />
-            <Route path="/post/:id" element={<Post />} />
-            <Route path="/edit/:id" element={<Edit />} />
-            <Route path="*" element={<Notfound />} />
-          </Routes>
+          <RouterProvider router={router} />
         </PostDispatchContext.Provider>
       </PostStateContext.Provider>
     </>

src/api/youtubeApi.jsx

@@ -0,0 +1,6 @@
+import axios from 'axios'
+
+export const youtubeApi = axios.create({
+  baseURL: 'https://youtube.googleapis.com/youtube/v3',
+  params: { key: "AIzaSyA-0N9viOOnwa28lEeQzP-qb-h1z0aLLPA" },
+});

src/components/Editor.jsx

@@ -62,11 +62,13 @@ const Editor = ({ initData, onSubmit }) => {
             )
           })}
         </div>
+        {/* 컨텐트 */}
       </section>
       <section className='content_section'>
         <h4>오늘의 배움</h4>
         <textarea name="content" value={input.content} onChange={onChangeInput} placeholder='오늘은 무엇을 배우셨나요?' />
       </section>
+
       <section className='button_section'>
         <Button text={"취소하기"} onClick={() => nav(-1)} />
         <Button text={"작성완료"} type={"POSITIVE"} onClick={onClickSubmitButton} />