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"],
           },
+
         },
       })
     ),
@@ -39,6 +44,7 @@ module.exports = function (config, env) {
         "@layouts": path.resolve(__dirname, "src/layouts"),
         "@hooks": path.resolve(__dirname, "src/hooks"),
         "@utils": path.resolve(__dirname, "src/utils"),
+        "@api": path.resolve(__dirname, "src/api")
      }),
     )(config, env)
   );

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/api/core/index.tsx

@@ -0,0 +1,41 @@
+import axios from "axios";
+
+const request = axios.create({
+  baseURL: "http://localhost:8123"
+})
+
+//요청 타임아웃 설정
+request.defaults.timeout = 2500;
+request.defaults.withCredentials = true;
+// request.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;
+
+//요청 인터셉터 추가
+request.interceptors.request.use(
+  config => { //요청을 보내기 전에 수행할 로직
+    return config
+  },
+  error => {
+    //요청 에러가 발생했을 때 수행할 로직
+    console.log(error); //디버깅
+    return Promise.reject(error);
+  }
+);
+
+//응답 인터셉터 추가
+request.interceptors.response.use(
+  response => {
+    //응답에 대한 로직 작성
+    //const res = response.data
+    //return res
+    return response
+  },
+
+  error => {
+    //응답 에러가 발생했을 때 수행할 로직
+    console.log(error); //디버깅
+    return Promise.reject(error);
+  }
+);
+
+
+export default request; //axios 인스턴스를 내보낸다.

host/src/api/main.tsx

@@ -0,0 +1,30 @@
+import request from "./core";
+
+
+export const login = (email: string, password: string) => {
+  return request(
+    {
+      method: 'POST',
+      url: '/login',
+      data: {
+        email: email,
+        password: password
+      }
+    }
+  )
+}
+
+export const loginsuccess = () => {
+  return request({
+    // method: 'GET',
+    url: '/login/success'
+  });
+}
+
+export const logout = () => {
+  return request({
+    method: 'POST',
+    url: '/logout'
+  });
+}
+

host/src/bootstrap.tsx

@@ -4,17 +4,21 @@ import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import "./index.css";
 import { BrowserRouter } from "react-router-dom";
+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/pages/LogIn/index.tsx

@@ -4,22 +4,23 @@ import fetcher from '@utils/fetcher';
 import axios from 'axios';
 import React, { useCallback, useState } from 'react';
 import useSWR from 'swr';
+import { login } from "@api/main"
 
 const LogIn = () => {
-  const { data: userData, error, mutate } = useSWR('/api/users', fetcher);
+  // const { data: userData, error, mutate } = useSWR('/api/users', fetcher);
   const [logInError, setLogInError] = useState(false);
   const [email, onChangeEmail] = useInput('');
   const [password, onChangePassword] = useInput('');
-  const onSubmit = useCallback( (e) => {
-      e.preventDefault();
-      setLogInError(false);
-      axios.post('/api/users/login',{ email, password },{ withCredentials: true})
-        .then(() => { mutate();})
-        .catch((error) => {
-          setLogInError(error.response?.data?.code === 401);
-        });
-    },
-    [email, password, mutate],
+
+  const onSubmit = useCallback(async (e) => {
+    e.preventDefault();
+    setLogInError(false);
+    const response = await login(email, password)
+    if (response.status === 200) {
+      window.open('/', '_self')
+    }
+  },
+    [email, password],
   );
 
   return (

host/src/pages/Main/index.tsx

@@ -1,25 +1,66 @@
 import React from 'react';
+import { useEffect, useState } from "react";
+import axios from "axios";
+import { useRecoilState } from 'recoil';
+import { userState } from "../../store/atoms";
+import { loginsuccess, logout } from "@api/main"
 
 const Main = () => {
+  const [isLogin, setIsLogin] = useState(false);
+  const [user, setUser] = useRecoilState(userState);
 
   const Menu = React.lazy(() =>
     // @ts-ignore
-    import("remote/Menu").then((module) => {return {default: module.Menu};
+    import("remote/Menu").then((module) => {
+      return { default: module.Menu };
     })
   );
 
+  useEffect(() => {
+    (async () => {
+      const { data } = await loginsuccess();
+      try {
+        if (data) {
+          setIsLogin(true);
+          setUser({ email: data.email, username: data.username });
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    })();
+  }, []);
+
+
+  const logoutPage = async () => {
+    const data = await logout();
+    if (data.status === 200) {
+      window.open("/login", "_self");
+    }
+
+  };
 
   return (
     <div className="App">
       <div> 여기가 Host </div>
       <div> AOCE </div>
-      <div> 
-        <a href="/signup">회원가입</a>
-        <a href="/login">로그인</a>
+      {/* <p>Name: {user.email}</p>
+      <p>Age: {user.username}</p> */}
+      <div>
+        {isLogin && <div>
+          <button onClick={logoutPage} className="loginButton">
+            Logout
+          </button>
+        </div>}
+        {!isLogin &&
+          <div>
+            <a href="/signup">회원가입</a>
+            <a href="/login">로그인</a>
+          </div>
+        }
       </div>
       <div>
         <React.Suspense fallback={<div>Loading...</div>}>
-          <Menu/>
+          <Menu />
         </React.Suspense>
       </div>
     </div>

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' }
+});

host/tsconfig.json

@@ -26,6 +26,7 @@
       "@pages/*": ["pages/*"],
       "@utils/*": ["utils/*"],
       "@hooks/*": ["hooks/*"],
+      "@api/*": ["api/*"]
     }
   },
   "include": [

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;