Merge pull request #12 from osohyun0224/master

[Feat/FE] LoginPage와 임시 login-api를 설정하여 계정에 대한 로그인 연결을 진행한다.

package.json

@@ -15,6 +15,7 @@
     "axios": "^1.5.0",
     "classnames": "^2.3.2",
     "js-cookie": "^3.0.5",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",

src/App.jsx

@@ -1,75 +1,22 @@
-import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
-import { Provider } from "react-redux";
-import SignUpPage from "./pages/SignUpPage.jsx";
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import LoginPage from "./pages/LoginPage.jsx";
-import MainPage from "./pages/MainPage.jsx";
 import styled from "styled-components";
-import MyCourse from "./pages/MyCourse.jsx";
-import CourseDetail from "./pages/CourseDetail.jsx";
-import AddExercise from "./pages/AddExercise.jsx";
-import { ModalProvider } from "./librarys/context.jsx";
-import PlayerPage from "./pages/PlayerPage.jsx";
-import store from "./redux/store.js";
-
-import LoginModal from "./components/LoginModal.jsx";
-import { useEffect } from "react";
-import { loadToken } from "./librarys/login-api.js";
-import { login } from "./redux/userSlice.js";
-import ProtectedRoute from "./components/ProtectedRoute.jsx";
 import "./App.scss";
 
 const Container = styled.div`
   background-color: transparent;
   height: 100%;
 `;
 
-const routerList = [
-  { path: "/", element: <MainPage /> },
-  { path: "/program/:pno", element: <CourseDetail />, role: 1 },
-  { path: "/program/:id/play", element: <PlayerPage />, role: 1 },
-  { path: "/mycourse", element: <MyCourse />, role: 1 },
-  { path: "/register", element: <AddExercise />, role: 2 },
-];
-
-routerList.forEach((item) => {
-  if (item.role && item.role > 0) {
-    item.element = (
-      <ProtectedRoute role={item.role} to={item.redirect}>
-        {item.element}
-      </ProtectedRoute>
-    );
-  }
-});
-
 function App() {
-  const dispatch = store.dispatch;
-
-  // Login logic
-  useEffect(() => {
-    loadToken().then((result) => {
-      if (!result) {
-        return;
-      } else {
-        dispatch(login(result));
-      }
-    });
-  });
-
   return (
-    <Provider store={store}>
-      <ModalProvider>
-        <Container>
-          <LoginModal />
-          <Router>
-            <Routes>
-              {routerList.map((item, index) => (
-                <Route key={index} path={item.path} element={item.element} />
-              ))}
-            </Routes>
-          </Router>
-        </Container>
-      </ModalProvider>
-    </Provider>
+    <Router>
+      <Container>
+        <Routes>
+          <Route path="/login" element={<LoginPage />} />
+        </Routes>
+      </Container>
+    </Router>
   );
 }
 

src/components/Accounts/LoginComponents.jsx

@@ -0,0 +1,140 @@
+import styled from 'styled-components';
+import { useNavigate } from 'react-router-dom';
+import  { useState } from 'react';
+import { userLogin } from '../../librarys/login-api';
+import PropTypes from 'prop-types';
+
+const LoginContainer = styled.div`
+  width: 1000px;
+  height: 603px;
+  border-radius: 10px;
+  background-color: #ffffff;
+  border: 2px solid #0064FF;
+  position: relative;
+  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.1);
+`;
+
+
+const Title = styled.h1`
+  font-size: 35px;
+  font-family: 'Spoqa Han Sans Neo', 'sans-serif';
+  font-weight: 700;
+  margin-left: 30px;
+  margin-top: 24px;
+`;
+
+const Divider = styled.div`
+  width: 900px;
+  height: 1px;
+  background-color: #D9D9D9;
+  margin-top: 10px;
+  margin-left: 30px;
+  margin-right: auto;
+`;
+
+const Label = styled.label`
+  font-size: 20px;
+  font-family: 'Spoqa Han Sans Neo', 'sans-serif';
+  font-weight: 500;
+  position: absolute;
+`;
+
+const Input = styled.input`
+  width: 400px;
+  height: 50px;
+  font-family: 'Spoqa Han Sans Neo', 'sans-serif';
+  background-color: #FAFAFA;
+  border: 1px solid #BBBBBB;
+  position: absolute;
+  margin-top: 0px;
+  border-radius: 10px;
+  padding-left: 10px; 
+
+`;
+
+const Button = styled.button`
+  width: 280px;
+  height: 60px;
+  background-color: #3592FF;
+  border-radius: 10px;
+  color: white;
+  font-size: 22px;
+  border: none;
+  cursor: pointer;
+  position: absolute;
+  font-family: 'Spoqa Han Sans Neo', 'sans-serif';
+  margin-top: 20px;
+`;
+
+const SignupLink = styled.span`
+  color: #7E7E7E;
+  font-size: 18px;
+  cursor: pointer;
+  position: absolute;
+  margin-left:-20px;
+  margin-top: 10px;
+  font-family: 'Spoqa Han Sans Neo', 'sans-serif';
+`;
+
+const LoginComponents = (props) => {
+  let navigate = useNavigate();
+
+  const [id, setId] = useState('');  
+  const [password, setPassword] = useState(''); 
+  const [error, setError] = useState(null);  
+
+  const handleLogin = async () => {
+    const response = await userLogin(id, password);
+    if (response) {
+      console.log('로그인 성공:', response);
+      navigate('/dashboard'); // 이거 아직 페이지 완성 안됨 임시 로그인 되나만 확인용입니다.
+      props.onLoginSuccess(response);
+    } else {
+      setError('아이디나 비밀번호가 일치하지 않습니다.'); 
+    }
+  };
+
+  return (
+    <LoginContainer>
+      <Title>로그인</Title>
+      <Divider />
+
+      <Label style={{ left: '300px', top: '187px' }}>아이디</Label>
+      <Input 
+        style={{ left: '300px', top: '227px' }}
+        value={id}
+        onChange={(e) => setId(e.target.value)}
+      />
+
+      <Label style={{ left: '300px', top: '287px' }}>비밀번호</Label>
+      <Input 
+        style={{ left: '300px', top: '327px' }} 
+        type="password" 
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+      />
+
+      {error && <p style={{ color: 'red', position: 'absolute', left: '300px', top: '367px' }}>{error}</p>}
+
+      <Button 
+        style={{ left: '360px', top: '397px' }}
+        onClick={handleLogin}
+      >
+        로그인
+      </Button>
+
+      <SignupLink 
+        style={{ left: '460px', top: '477px' }}
+        onClick={() => navigate('/signup')} 
+      >
+        처음 오셨나요?
+      </SignupLink>
+    </LoginContainer>
+  );
+};
+
+LoginComponents.propTypes = {
+  onLoginSuccess: PropTypes.func.isRequired,
+};
+
+export default LoginComponents;

src/components/Header/Header.jsx

@@ -0,0 +1,72 @@
+import styled from 'styled-components';
+import { useNavigate } from 'react-router-dom';
+import UserComponent from './UserComponents';
+
+const HeaderContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 80px;
+  background-color: #fff;
+  padding: 0 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+`;
+
+const Logo = styled.div`
+  font-size: 24px;
+  font-weight: bold;
+  cursor: pointer;
+`;
+
+const NavMenu = styled.div`
+  display: flex;
+  gap: 20px;
+`;
+
+const NavItem = styled.div`
+  cursor: pointer;
+`;
+
+export default function Header(props) {
+  let navigate = useNavigate();
+
+  const { userType, userName } = props; 
+
+  const menus = {
+    null: ["서비스 소개", "회원가입", "로그인"], 
+    user: ["나의 수강 페이지", "실시간 비대면 진료", "로그아웃"],
+    admin1: ["관리자 대시보드", "실시간 비대면 진료", "로그아웃"],
+    admin2: ["운동 등록하기", "관리자 대시보드", "실시간 비대면 진료", "로그아웃"]
+  };
+
+  const handleClick = (item) => {
+    switch(item) {
+      case "서비스 소개":
+        navigate("/intro");
+        break;
+      case "회원가입":
+        navigate("/signup");
+        break;
+      case "로그인":
+        navigate("/login");
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <HeaderContainer>
+      <Logo onClick={() => navigate('/')}>Re:Hab</Logo>
+      <NavMenu>
+        {menus[userType].map((item, index) => (
+          <NavItem key={index} onClick={() => handleClick(item)}>
+            {item}
+          </NavItem>
+        ))}
+        {userType && <UserComponent userType={userType} userName={userName} />}
+      </NavMenu>
+    </HeaderContainer>
+  );
+}