Feature2

.gitignore

@@ -22,4 +22,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-Test.tsx
+Test.tsx
+
+modules/

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    '@babel/preset-typescript',
+  ],
+};

package.json

@@ -3,24 +3,33 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^6.1.2",
+    "@reduxjs/toolkit": "^1.5.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
     "@types/react-dom": "^17.0.0",
+    "immer": "^9.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "redux": "^4.1.0",
+    "redux-actions": "^2.6.5",
+    "redux-devtools-extension": "^2.13.9",
+    "redux-saga": "^1.1.3",
     "sass": "^1.34.0",
+    "typesafe-actions": "^5.1.0",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "cross-env NODE_PATH=src react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": " react-scripts jest",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -42,7 +51,14 @@
     ]
   },
   "devDependencies": {
+    "@babel/core": "^7.14.3",
+    "@babel/preset-env": "^7.14.2",
+    "@babel/preset-typescript": "^7.13.0",
     "@types/react": "^17.0.5",
-    "@types/react-router-dom": "^5.1.7"
+    "@types/react-redux": "^7.1.16",
+    "@types/react-router-dom": "^5.1.7",
+    "@types/redux-actions": "^2.6.1",
+    "craco-alias": "^3.0.1",
+    "cross-env": "^7.0.3"
   }
 }

src/Routes.tsx → src/Routes.js

@@ -4,14 +4,18 @@ import Intro from './pages/Intro';
 import Home from './pages/Home';
 import MyPage from './pages/MyPage';
 import SignUp from './components/SignUp';
+
+import BoardCreator from './pages/BoardCreator';
+
 const Routes = () => {
   return (
     <Router>
       <Switch>
         <Route exact path='/' component={Intro} />
         <Route path='/home' component={Home} />
-        <Route path='/myPage' component={MyPage} />
-        <Route path='/signUp' component={SignUp} />
+        <Route path='/write' component={BoardCreator} />
+        <Route path='/mypage' component={MyPage} />
+        <Route path='/signup' component={SignUp} />
       </Switch>
     </Router>
   );

src/components/Boards.js

@@ -0,0 +1,20 @@
+import Board from 'components/Board';
+
+const Boards = () => {
+  return (
+    <>
+      <Board />
+      <Board />
+      <Board />
+      <Board />
+      <Board />
+      <Board />
+      <Board />
+      <Board />
+      <Board />
+      <Board />
+    </>
+  );
+};
+
+export default Boards;

src/components/Header.js

@@ -0,0 +1,5 @@
+const Header = ({ headerType }) => {
+  return <header className='header'>{headerType}</header>;
+};
+
+export default Header;

src/components/Nav.js

@@ -0,0 +1,27 @@
+import { NavLink } from 'react-router-dom';
+
+const Nav = () => {
+  return (
+    <nav className='nav'>
+      <ul className='nav_ul'>
+        <li className='nav_li'>
+          <NavLink className='nav_link' to='/home'>
+            홈
+          </NavLink>
+        </li>
+        <li className='nav_li'>
+          <NavLink className='nav_link' to='/write'>
+            작성하기
+          </NavLink>
+        </li>
+        <li className='nav_li'>
+          <NavLink className='nav_link' to='/myPage'>
+            마이페이지
+          </NavLink>
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default Nav;