Merge pull request #25 from 14-team13/13-feature-state-management-recoil

13 feature state management recoil

host/config-overrides.js

@@ -7,10 +7,14 @@ module.exports = function (config, env) {
   config.plugins.push(
     new ModuleFederationPlugin(
       (module.exports = {
-        name: "remote",
+        name: "host",
         remotes: {
           remote: `remote@http://localhost:3001/remoteEntry.js`,
         },
+        exposes: {
+          "./atoms": "./src/store/atoms",
+        },
+        filename: "remoteEntry.js",
         shared: {
           ...dependencies,
           react: {
@@ -21,6 +25,7 @@ module.exports = function (config, env) {
             singleton: true,
             requiredVersion: dependencies["react-dom"],
           },
+
         },
       })
     ),

host/package.json

@@ -21,6 +21,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.7.0",
     "react-scripts": "5.0.1",
+    "recoil": "^0.7.7",
     "run-script-os": "^1.1.6",
     "swr": "^2.0.4",
     "typescript": "^4.9.4",

host/src/bootstrap.tsx

@@ -4,20 +4,21 @@ import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import "./index.css";
 import { BrowserRouter } from "react-router-dom";
-import axios from "axios";
-axios.defaults.baseURL = "http://localhost:8123"; // 임시 서버 
-axios.defaults.withCredentials = true;
+import { RecoilRoot } from 'recoil';
+
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
 
 root.render(
-  <BrowserRouter>
-    <React.StrictMode>
-      <App />
-    </React.StrictMode>
-  </BrowserRouter>
+  <RecoilRoot>
+    <BrowserRouter>
+      <React.StrictMode>
+        <App />
+      </React.StrictMode>
+    </BrowserRouter>
+  </RecoilRoot>
 );
 
 // If you want to start measuring performance in your app, pass a function

host/src/store/atoms.tsx

@@ -0,0 +1,12 @@
+import { atom, RecoilEnv } from "recoil";
+RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false;
+
+export const countState = atom({
+  key: "countState",
+  default: 0 
+});
+
+export const userState = atom({
+  key: 'user',
+  default: { email: '[email protected]', username: 'aluminum' }
+});

remote/config-overrides.js

@@ -10,6 +10,9 @@ module.exports = function (config, env) {
     new ModuleFederationPlugin(
       (module.exports = {
         name: "remote",
+        remotes: {
+          host: `host@http://localhost:3000/remoteEntry.js`,
+        },
         exposes: {
           "./Menu": "./src/components/Menu"
         },

remote/package.json

@@ -8,6 +8,7 @@
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
     "react-scripts": "5.0.1",
+    "recoil": "^0.7.7",
     "styled-components": "^5.3.8"
   },
   "scripts": {

remote/src/App.tsx

@@ -1,10 +1,14 @@
+import { RecoilRoot } from 'recoil';
+
 function App() {
   return (
-    <div className="App">
-      <header className="App-header" data-e2e="REMOTE_COMPONENT_INFO">
-        Remote Application
-      </header>
-    </div>
+    <RecoilRoot>
+      <div className="App">
+        <header className="App-header" data-e2e="REMOTE_COMPONENT_INFO">
+          Remote Application
+        </header>
+      </div>
+    </RecoilRoot>
   );
 }
 

remote/src/components/Maps/LeftModal.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { useRecoilState, useResetRecoilState, useRecoilValue } from "recoil";
+import { userState } from "host/atoms";
+import { countState } from "host/atoms";
+
+export const Counter = () => {
+  const [count, setCount] = useRecoilState(countState);
+  const user = useRecoilValue(userState);
+  const resetCount = useResetRecoilState(countState);
+
+  const increase = () => {
+    setCount(count + 1);
+  };
+
+  const reset = () => {
+    resetCount();
+  };
+
+  return (
+    <div>
+      <div>
+        <div>{user.email}</div>
+        <div>{user.username}</div>
+      </div>
+      <h2>{count}</h2>
+      <button onClick={() => increase()}>+</button>
+      <button onClick={() => reset()}>reset</button>
+    </div>
+  );
+};

remote/src/components/Menu.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-
 import Maps from 'components/Maps/Maps';
 import { MixedBoundary } from 'components/Common';
+import { Counter } from './Maps/LeftModal';
 
 export const Menu = () => {
   const Div = styled.div`
@@ -10,11 +10,14 @@ export const Menu = () => {
   `;
   // let MapsComponent = React.lazy(() => import('./components/Maps'));
   return (
-    <Div>
-      <MixedBoundary>
-        <Maps />
-      </MixedBoundary>
-    </Div>
+    <div style = {{display : "flex"}}>
+      <Counter/>
+      <Div>
+        <MixedBoundary>
+          <Maps />
+        </MixedBoundary>
+      </Div>
+    </div>
   );
 };
 export default Menu;