[넥스트레벨 Outwater] 페이먼츠 미션 STEP1

docs/TODO.md

@@ -2,6 +2,33 @@
 
 ## TODO
 
+- 페이지
+
+  - [ ] List 페이지
+  - [ ] Add 페이지
+  - [ ] Alias 페이지
+
+- 컴포넌트
+
+  - [ ] Card 컴포넌트
+  - [ ] CardForm 컴포넌트
+  - [ ] Modal 컴포넌트
+
+- 그외
+  - [ ] 라우터 구현 (페이지 이동)
+
+## 작업순서
+
+- [ ] 기본 라우터 세팅(react-router-dom)
+  - [ ] 다음, 뒤로가기로 페이지 이동
+    - Add -> (modal) -> Alias -> List <-> Add
+- [ ] Add 페이지
+  - [ ] Card 컴포넌트
+  - [ ] CadrForm 컴포넌트
+  - [ ] Modal 컴포넌트
+- [ ] Alias 페이지
+- [ ] List 페이지
+
 ## 요구사항 리스트
 
 #### 카드 추가

package.json

@@ -23,7 +23,8 @@
     "clean-webpack-plugin": "^4.0.0",
     "html-webpack-plugin": "^5.5.0",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^6.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.16.7",

src/App.jsx

@@ -1,8 +1,21 @@
 import React from "react";
-import "./App.css";
+import AddPage from "./pages/Add";
+import AliasPage from "./pages/Alias";
+import ListPage from "./pages/List";
+
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 
 const App = () => {
-  return <div className="test">init test</div>;
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<AddPage />} />
+        <Route path="add" element={<AddPage />} />
+        <Route path="alias" element={<AliasPage />} />
+        <Route path="list" element={<ListPage />} />
+      </Routes>
+    </BrowserRouter>
+  );
 };
 
 export default App;

src/index.js

@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
+
 import App from "./App";
 
 ReactDOM.render(<App />, document.getElementById("root"));

src/pages/Add.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Add = () => {
+  return <div>AddPage</div>;
+};
+
+export default Add;

src/pages/Alias.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Alias = () => {
+  return <div>AliasPage</div>;
+};
+
+export default Alias;

src/pages/List.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const List = () => {
+  return <div>ListPage</div>;
+};
+
+export default List;

webpack.config.js

@@ -14,10 +14,12 @@ module.exports = {
     port: 3000,
     // devserver 에서만 핫로딩 가능하게
     hot: true,
+    historyApiFallback: true,
   },
   output: {
     filename: "bundle.js",
     path: path.resolve(__dirname, "dist"),
+    publicPath: "/",
   },
   module: {
     rules: [