초기 틀 설정

client/src/components/Profile/Info.js

+const Info = () => {
+    return (
+        <div>
+            Info Component 입니다.
+        </div>
+    )
+};
+
+export default Info;

client/src/components/Profile/InfoUpdate.js

+const InfoUpdate = () => {
+    return (
+        <div>
+            InfoUpdate Component 입니다.
+        </div>
+    )
+};
+
+export default InfoUpdate;

client/src/components/Profile/Profile.js

+const Profile = () => {
+    return (
+        <div>
+            Profile Component 입니다.
+        </div>
+    )
+};
+
+export default Profile;

client/src/components/Room/ChannelList.js

+import ChannelSingle from "./ChannelSingle";
+
+const ChannelList = () => {
+  return (
+    <div>
+      ChannelList Component 입니다.
+      <ChannelSingle />
+    </div>
+  );
+};
+
+export default ChannelList;

client/src/components/Room/ChannelSingle.js

+const ChannelSingle = () => {
+    return (
+        <div>
+            ChannelSingle Component 입니다.
+        </div>
+    )
+};
+
+export default ChannelSingle;

client/src/components/Room/Controller.js

+import ScreenSelect from "./ScreenSelect";
+
+const Controller = () => {
+  return (
+    <div>
+      Controller Component 입니다.
+      <ScreenSelect />
+    </div>
+  );
+};
+
+export default Controller;

client/src/components/Room/RoomHeader.js

+const RoomHeader = () => {
+    return (
+        <div>
+            RoomHeader Component 입니다.
+        </div>
+    )
+};
+
+export default RoomHeader;

client/src/components/Room/Screen.js

+const Screen = () => {
+    return (
+        <div>
+            Screen Component 입니다.
+        </div>
+    )
+};
+
+export default Screen;

client/src/components/Room/ScreenSelect.js

+const ScreenSelect = () => {
+    return (
+        <div>
+            ScreenSelect Component 입니다.
+        </div>
+    )
+};
+
+export default ScreenSelect;

client/src/components/Room/User.js

+const User = () => {
+    return (
+        <div>
+            User Component 입니다.
+        </div>
+    )
+};
+
+export default User;

client/src/components/Setting.js

+const Setting = () => {
+    return (
+        <div>
+            Setting Component 입니다.
+        </div>
+    )
+};
+
+export default Setting;

client/src/components/SignUp.js

+const Signup = () => {
+    return (
+        <div>
+            Signup Component 입니다.
+        </div>
+    )
+};
+
+export default Signup;

client/src/context/auth_context.js

+import axios from "axios";
+import { createContext, FC, useCallback, useContext, useState } from "react";
+import authApi from "../apis/auth.api";
+import { getLocalUser } from "../utils/auth";
+import baseUrl from "../utils/baseUrl";
+import catchErrors from "../utils/catchErrors";
+import config from "../utils/clientConfig";
+
+// type AuthContextType = {
+//   error: string;
+//   user: { userId: number; name: string; role: string } | null;
+//   loading: boolean;
+//   setUser: (user: any) => void;
+//   login: (email: string, password: string) => Promise<boolean>;
+//   logout: () => void;
+//   catchErrorAuth: (error: any, displayError: Function) => void;
+// };
+
+const AuthContext = createContext<AuthContextType>({
+  error: "",
+  loading: false,
+  user: null,
+  setUser: () => {},
+  login: () => Promise.resolve(false),
+  logout: () => {},
+  catchErrorAuth: (error, displayError) => {},
+});
+
+const AuthProvider = ({ children }) => {
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [user, setUser] = useState(getLocalUser());
+
+  const login = useCallback(async (email, password) => {
+    try {
+      setError("");
+      setLoading(true);
+      const user = await authApi.login(email, password);
+      localStorage.setItem(config.loginUser, JSON.stringify(user));
+      setUser(user);
+
+      return true;
+    } catch (error) {
+      catchErrors(error, setError);
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const logout = useCallback(async () => {
+    try {
+      setError("");
+      setUser(null);
+      alert("로그아웃되었습니다.");
+      localStorage.removeItem(config.loginUser);
+      setLoading(true);
+      await axios.get(`${baseUrl}/api/auth/logout`);
+    } catch (error) {
+      catchErrors(error, setError);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const catchErrorAuth = useCallback(async (error, displayError) => {
+    let errorMsg;
+    if (error.response) {
+      if (typeof error.response.data === "string") {
+        errorMsg = error.response.data;
+        console.log("Error response:", errorMsg);
+      } else {
+        const { data } = error.response;
+        if (data.redirectUrl) {
+          errorMsg = data.message;
+          console.log("Error response with redirected message:", errorMsg);
+          console.log("redirect url", data.redirectUrl);
+          return await logout();
+        }
+      }
+    } else if (error.request) {
+      errorMsg = error.request;
+      console.log("Error request:", errorMsg);
+    } else {
+      errorMsg = error.message;
+      console.log("Error message:", errorMsg);
+    }
+
+    displayError(errorMsg);
+  }, []);
+
+  return (
+    <AuthContext.Provider
+      value={{ error, loading, user, setUser, login, logout, catchErrorAuth }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+const useAuth = () => useContext(AuthContext);
+
+export { AuthProvider, useAuth };

client/src/index.css

+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

client/src/index.js

+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import 'bootstrap'
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

client/src/pages/HomeGuestPage.js

+import Login from "../components/Login";
+import SignUp from "../components/SignUp";
+
+const HomeGuestPage = () => {
+  return (
+    <div>
+      HomeGuest Page 입니다.
+      <h1>logo 자리</h1>
+      <p>로그인</p>
+      <Login />
+      <p>회원가입</p>
+      <SignUp />
+    </div>
+  );
+};
+
+export default HomeGuestPage;

client/src/pages/HomeUserPage.js

+import Header from "../components/Header";
+import HomeProfile from "../components/Home/HomeProfile";
+import RoomList from "../components/Home/RoomList";
+
+const HomeUserPage = () => {
+  return (
+    <div>
+      HomeUser Page 입니다.
+      <Header />
+      <HomeProfile />
+      <RoomList />
+    </div>
+  );
+};
+
+export default HomeUserPage;

client/src/pages/ProfilePage.js

+import Header from "../components/Header";
+import Profile from "../components/Profile/Profile";
+import Info from "../components/Profile/Info";
+import InfoUpdate from "../components/Profile/InfoUpdate";
+
+const ProfilePage = () => {
+  return (
+    <div>
+      Profile Page 입니다.
+      <Header />
+      <Profile />
+      <Info />
+      <InfoUpdate />
+    </div>
+  );
+};
+
+export default ProfilePage;

client/src/pages/RoomPage.js

+import Header from "../components/Header";
+import ChannelList from "../components/Room/ChannelList";
+import RoomHeader from "../components/Room/RoomHeader";
+import Screen from "../components/Room/Screen";
+import User from "../components/Room/User";
+import Controller from "../components/Room/Controller";
+
+const RoomPage = () => {
+  return (
+    <div>
+      Room Page 입니다.
+      <Header hamburger={ChannelList} />
+      <RoomHeader />
+      <Screen />
+      <User />
+      <Controller />
+    </div>
+  );
+};
+
+export default RoomPage;

client/src/reportWebVitals.js

+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;