[FE] 계다현 login-react

leets-login-react/package.json

@@ -6,9 +6,12 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "firebase": "^10.12.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.11",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

leets-login-react/src/App.js

@@ -1,23 +1,10 @@
-import logo from './logo.svg';
-import './App.css';
-
+import "./App.css";
+import { RouterProvider } from "react-router-dom";
+import router from "./routes/route";
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div>
+      <RouterProvider router={router} />
     </div>
   );
 }

leets-login-react/src/components/Button.js

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+export const StyledButton = styled.button`
+  background-color: rgb(196, 195, 195);
+  color: black;
+  padding: 15px 45px;
+  border-radius: 15px;
+  border: none;
+  width: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+`;

leets-login-react/src/components/input.js

@@ -0,0 +1,40 @@
+import styled from "styled-components";
+
+export const StyledInput = styled.input`
+  background-color: rgb(196, 195, 195);
+  width: 600px;
+  font-size: 10px;
+  color: black;
+  padding: 20px 10px;
+  border-radius: 25px;
+  border: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  margin-bottom: 30px;
+  &::placeholder {
+    color: black;
+  }
+`;
+
+export const JoinInput = styled(StyledInput)`
+  display: flex;
+  width: 200px;
+  justify-content: center;
+  padding: 20px 15px;
+`;
+
+export const JoinDiv = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 620px;
+`;
+
+// export const JoinButton = styled.button`
+//   all: unset;
+//   width: 100%;
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+// `;

leets-login-react/src/firebase.js

@@ -0,0 +1,29 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import {
+  getAuth,
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+} from "firebase/auth";
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyCfWfmKNBoMijFyBhtMR7mZphwsWL_oZyc",
+  authDomain: "login-e4a31.firebaseapp.com",
+  projectId: "login-e4a31",
+  storageBucket: "login-e4a31.appspot.com",
+  messagingSenderId: "368306137967",
+  appId: "1:368306137967:web:221ae99b4566a71849d69a",
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const firebaseAuth = getAuth(app);
+
+export {
+  firebaseAuth,
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+};

leets-login-react/src/pages/AttendPage/AfterAttend.js

@@ -0,0 +1,5 @@
+const AfterAttend = () => {
+  return <div></div>;
+};
+
+export default AfterAttend;

leets-login-react/src/pages/AttendPage/AttendPage.js

@@ -0,0 +1,5 @@
+const AttendPage = () => {
+  return <h1>출석 화면</h1>;
+};
+
+export default AttendPage;

leets-login-react/src/pages/Home/HomePage.js

@@ -0,0 +1,36 @@
+import { useNavigate } from "react-router-dom";
+import { StyledButton } from "../../components/Button";
+import styled from "styled-components";
+const HomePage = () => {
+  const nav = useNavigate();
+  const onClickButton = () => {
+    nav("/login");
+  };
+
+  const onClickToJoin = () => {
+    nav("/Join");
+  };
+  return (
+    <>
+      <H1>Home Page</H1>
+      <HomeDiv>
+        <StyledButton onClick={onClickButton}>로그인</StyledButton>
+        <StyledButton onClick={onClickToJoin}>회원가입</StyledButton>
+      </HomeDiv>
+    </>
+  );
+};
+
+export default HomePage;
+
+export const H1 = styled.h1`
+  display: flex;
+  justify-content: center;
+  margin-bottom: 50px;
+`;
+
+const HomeDiv = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 70px;
+`;

leets-login-react/src/pages/JoinPage/JoinPage.js

@@ -0,0 +1,125 @@
+import styled from "styled-components";
+import { StyledButton } from "../../components/Button";
+import {
+  JoinButton,
+  JoinDiv,
+  JoinInput,
+  StyledInput,
+} from "../../components/input";
+import { useNavigate } from "react-router-dom";
+import { useState } from "react";
+import { firebaseAuth, createUserWithEmailAndPassword } from "../../firebase";
+const JoinPage = () => {
+  const [userInfo, setUserInfo] = useState({
+    id: "",
+    password: "",
+    passwordConfirm: "",
+    name: "",
+    part: "",
+  });
+
+  const nav = useNavigate();
+  const onSubmitJoin = (e) => {
+    e.preventDefault();
+  };
+
+  const onClickJoinButton = async () => {
+    try {
+      const createdUser = await createUserWithEmailAndPassword(
+        firebaseAuth,
+        userInfo.id,
+        userInfo.password
+      );
+      console.log(createdUser);
+      nav("/login");
+    } catch (error) {
+      console.log(error.message);
+    }
+  };
+
+  const onChangeInput = (e) => {
+    const { name, value } = e.target;
+    setUserInfo((userInfo) => ({
+      ...userInfo,
+      [name]: value,
+    }));
+  };
+
+  const isValid =
+    userInfo.password.length !== 0 &&
+    userInfo.passwordConfirm.length !== 0 &&
+    userInfo.password === userInfo.passwordConfirm;
+
+  return (
+    <>
+      <FormContainer>
+        <H1>회원가입 화면</H1>
+        <JoinDiv onChange={onChangeInput}>
+          <form onSubmit={onSubmitJoin}>
+            <JoinDiv>
+              <StyledInput
+                name="id"
+                type="text"
+                value={userInfo.id}
+                placeholder="아이디를 입력해주세요"
+              />
+              <StyledButton>아이디 확인</StyledButton>
+            </JoinDiv>
+            <StyledInput
+              name="password"
+              type="password"
+              value={userInfo.password}
+              placeholder="비밀번호를 입력해주세요"
+            />
+            <StyledInput
+              name="passwordConfirm"
+              type="password"
+              value={userInfo.passwordConfirm}
+              placeholder="비밀번호를 한번 더 입력해주세요"
+            />
+            <PStyle isValid={isValid}>
+              {isValid
+                ? "비밀번호가 확인되었습니다!"
+                : "비밀번호가 일치하지 않습니다!"}
+            </PStyle>
+          </form>
+        </JoinDiv>
+        <JoinDiv onChange={onChangeInput}>
+          <JoinInput
+            name="name"
+            type="text"
+            value={userInfo.name}
+            placeholder="이름을 입력해주세요"
+          />
+          <JoinInput
+            name="part"
+            type="text"
+            value={userInfo.part}
+            placeholder="파트를 입력해주세요"
+          />
+        </JoinDiv>
+        <StyledButton onClick={onClickJoinButton}>회원가입</StyledButton>
+      </FormContainer>
+    </>
+  );
+};
+
+export default JoinPage;
+
+const PStyle = styled.p`
+  font-size: small;
+  color: ${(props) => (props.isValid ? "blue" : "red")};
+`;
+
+export const H1 = styled.h1`
+  display: flex;
+  justify-content: center;
+  margin-bottom: 50px;
+`;
+
+const FormContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100vh;
+`;

leets-login-react/src/pages/LoginPage/AfterLoginPage.js

@@ -0,0 +1,24 @@
+import { useNavigate } from "react-router-dom";
+import { StyledButton } from "../../components/Button";
+
+const AfterLoginPage = () => {
+  const nav = useNavigate();
+  const onClickToAttend = () => {
+    nav("/Attend");
+  };
+
+  return (
+    <>
+      <div>
+        <h1>로그인 성공 후</h1>
+        <div></div>
+        <div></div>
+        <div>{new Date().toDateString()}</div>
+        <div>출석하시겠습니까?</div>
+        <StyledButton onClick={onClickToAttend}>출석하기</StyledButton>
+      </div>
+    </>
+  );
+};
+
+export default AfterLoginPage;