Skip to content

GitLab

You need to sign in or sign up before continuing.
Commit f9065bdb authored by Kim, Chaerin's avatar Kim, Chaerin
Browse files

Merge branch 'cherry' into 'master' 

Cherry

See merge request research/bora_it!3
parents a653751c 163bd97e
Hide whitespace changes
Inline Side-by-side
client/package.json
View file @ f9065bdb
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
"@testing-library/user-event": "^12.1.10", "@testing-library/user-event": "^12.1.10",
"axios": "^0.21.1", "axios": "^0.21.1",
"bootstrap": "^5.0.2", "bootstrap": "^5.0.2",
"node-sass": "^6.0.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
......
client/public/manifest.json
View file @ f9065bdb
...@@ -3,17 +3,17 @@ ...@@ -3,17 +3,17 @@
"name": "Create React App Sample", "name": "Create React App Sample",
"icons": [ "icons": [
{ {
"src": "favicon.ico", "src": "BORA_LOGO.PNG",
"sizes": "64x64 32x32 24x24 16x16", "sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon" "type": "image/x-icon"
}, },
{ {
"src": "logo192.png", "src": "BORA_LOGO.png",
"type": "image/png", "type": "image/png",
"sizes": "192x192" "sizes": "192x192"
}, },
{ {
"src": "logo512.png", "src": "BORA_LOGO.png",
"type": "image/png", "type": "image/png",
"sizes": "512x512" "sizes": "512x512"
} }
......
client/src/components/Login.js
View file @ f9065bdb
import { useEffect, useState } from "react";
const INIT_USER = {
id: "",
password: "",
};
const Login = () => { const Login = () => {
return ( // const { error, loading, login } = useAuth();
<div> const [user, setUser] = useState(INIT_USER);
Login Component 입니다. const [disabled, setDisabled] = useState(true);
const [error, setError] = useState("");
const [success, setSuccess] = useState(false);
useEffect(() => {
const isUser = Object.values(user).every((el) => Boolean(el));
isUser ? setDisabled(false) : setDisabled(true);
}, [user]);
function handleChange(event) {
const { name, value } = event.target;
setUser({ ...user, [name]: value });
console.log(user);
}
async function handleSubmit() {
try {
// setLoading(true);
// setError("");
// const success = await login(user.email, user.password);
console.log(user);
setSuccess(success);
} catch (error) {
// catchErrors(error, setError);
} finally {
// setLoading(false);
}
}
const { id, password } = user;
return (
<div className="modal-content">
<form onSubmit={handleSubmit}>
<div className="modal-header">
<h5 className="modal-title" id="loginModalLabel">
로그인
</h5>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="modal-body">
<div>
<label>아이디</label>
<input
className="form-control"
id="id"
type="text"
name="id"
placeholder="아이디를 입력하세요"
value={id}
onChange={handleChange}
/>
</div>
<div>
<label>비밀번호</label>
<input
className="form-control"
id="password"
type="password"
name="password"
placeholder="비밀번호를 입력하세요"
value={password}
onChange={handleChange}
/>
</div>
</div>
<div className="modal-footer">
<button type="submit" className="btn btn-primary" disabled={disabled}>
로그인
</button>
</div> </div>
) </form>
</div>
);
}; };
export default Login; export default Login;
client/src/components/SignUp.js
View file @ f9065bdb
import { useEffect, useState } from "react";
const INIT_USER = {
name: "",
idNumber1: "",
idNumber2: "",
id: "",
password: "",
checkpw: "",
phone: "",
};
const Signup = () => { const Signup = () => {
return ( const [user, setUser] = useState(INIT_USER);
<div> const [error, setError] = useState("");
Signup Component 입니다. const [success, setSuccess] = useState(false);
let disabled = false;
useEffect(() => {
disabled = !(
user.name &&
user.idNumber1 &&
user.idNumber2 &&
user.id &&
user.password &&
user.checkpw
);
}, [user]);
function handleChange(event) {
const { name, value } = event.target;
setUser({ ...user, [name]: value });
console.log(user);
}
async function handleSubmit() {
try {
// setLoading(true);
// setError("");
// const success = await login(user.email, user.password);
console.log(user);
setSuccess(success);
} catch (error) {
// catchErrors(error, setError);
} finally {
// setLoading(false);
}
}
const { name, idNumber1, idNumber2, id, password, checkpw, phone } = user;
return (
<div className="modal-content">
<form onSubmit={handleSubmit}>
<div className="modal-header">
<h5 className="modal-title" id="loginModalLabel">
회원가입
</h5>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="modal-body">
<div className="p-2">
<label className="p-1">이름</label>
<input
className="form-control"
id="name"
type="text"
name="name"
placeholder="이름을 입력하세요"
value={name}
onChange={handleChange}
/>
</div>
<div className="p-2">
<label className="p-1">주민등록번호</label>
<div className="d-flex text-center">
<div className="col-4">
<input
className="m-2 form-control"
id="idNumber1"
type="text"
name="idNumber1"
placeholder="●●●●●●"
value={idNumber1}
onChange={handleChange}
/>
</div>
<div className="col-1">ㅡ</div>
<div className="col-1">
<input
className="m-2 form-control"
id="idNumber2"
type="text"
name="idNumber2"
placeholder="●"
value={idNumber2}
onChange={handleChange}
/>
</div>
******
</div>
</div>
<div className="p-2">
<label className="p-1">아이디</label>
<input
className="form-control"
id="id"
type="text"
name="id"
placeholder="아이디를 입력하세요"
value={id}
onChange={handleChange}
/>
</div>
<div className="p-2">
<label className="p-1">비밀번호</label>
<input
className="form-control"
id="password"
type="password"
name="password"
placeholder="비밀번호를 입력하세요"
value={password}
onChange={handleChange}
/>
</div>
<div className="p-2">
<label className="p-1">비밀번호확인</label>
<input
className="form-control"
id="checkpw"
type="password"
name="checkpw"
placeholder="비밀번호를 다시 입력하세요"
value={checkpw}
onChange={handleChange}
/>
</div>
<div className="p-2">
<label className="p-1">전화번호(선택)</label>
<input
className="form-control"
id="phone"
type="text"
name="phone"
placeholder="숫자만 입력하세요"
value={phone}
onChange={handleChange}
/>
</div>
</div>
<div className="modal-footer">
<button type="submit" className="btn btn-primary" disabled={disabled}>
회원가입
</button>
</div> </div>
) </form>
</div>
);
}; };
export default Signup; export default Signup;
client/src/index.js
View file @ f9065bdb
import React from 'react'; import React from "react";
import ReactDOM from 'react-dom'; import ReactDOM from "react-dom";
import './index.css'; import './scss/custom.scss';
import 'bootstrap' import "./index.css";
import App from './App'; import "bootstrap";
import reportWebVitals from './reportWebVitals'; import 'bootstrap/dist/css/bootstrap.min.css'
import App from "./App";
import reportWebVitals from "./reportWebVitals";
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode>, </React.StrictMode>,
document.getElementById('root') document.getElementById("root")
); );
// If you want to start measuring performance in your app, pass a function // If you want to start measuring performance in your app, pass a function
......
client/src/pages/HomeGuestPage.js
View file @ f9065bdb
...@@ -3,13 +3,48 @@ import SignUp from "../components/SignUp"; ...@@ -3,13 +3,48 @@ import SignUp from "../components/SignUp";
const HomeGuestPage = () => { const HomeGuestPage = () => {
return ( return (
<div> <div className="d-flex flex-column justify-content-center h-100 font-weight-bold">
HomeGuest Page 입니다. <img src="BORA.PNG" className="w-100 p-4" />
<h1>logo 자리</h1> <div className="d-flex flex-column align-items-center">
<p>로그인</p> <button
<Login /> type="button"
<p>회원가입</p> className="col-4 btn btn-info"
<SignUp /> data-bs-toggle="modal"
data-bs-target="#loginModal"
>
로그인
</button>
<div
className="modal fade"
id="loginModal"
tabIndex="-1"
aria-labelledby="loginModalLabel"
aria-hidden="true"
>
<div className="modal-dialog">
<Login />
</div>
</div>
<button
type="button"
className="col-4 btn btn-info"
data-bs-toggle="modal"
data-bs-target="#signupModal"
>
회원가입
</button>
</div>
<div
className="modal fade"
id="signupModal"
tabIndex="-1"
aria-labelledby="signupModalLabel"
aria-hidden="true"
>
<div className="modal-dialog">
<SignUp />
</div>
</div>
</div> </div>
); );
}; };
......
client/src/scss/custom.scss 0 → 100644
View file @ f9065bdb
$primary: #e8b7ff;
$secondary: #df99ff;
$info: #fcf4ff;
$warning: #ff0000;
$GrayishSkyBlue: #739db6;
$MinDarkBlue: #59b7e3;
$Gray: #adb5bd;
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
$custom-colors: (
"GrayishSkyBlue": $GrayishSkyBlue,
"MinDarkBlue": $MinDarkBlue,
"Gray": $Gray,
);
$theme-colors: map-merge($theme-colors, $custom-colors);
@import "~bootstrap/scss/bootstrap.scss";
body {
background-color: #fcf4ff !important;
height: 100vh !important;
display: flex;
justify-content: center;
}
#root {
width: 414px !important;
height: 100;
}
.btn-primary {
background-color: $primary !important;
border-color: $primary !important;
color: #000 !important;
}
.btn-primary:hover {
background-color: $secondary !important;
border-color: $secondary !important;
color: #fff !important;
}
.btn-info {
background-color: $info !important;
border-color: $info !important;
}
package.json
View file @ f9065bdb
...@@ -4,10 +4,7 @@ ...@@ -4,10 +4,7 @@
"description": "Streaming Service", "description": "Streaming Service",
"main": "index.js", "main": "index.js",
"dependencies": { "dependencies": {
"@popperjs/core": "^2.9.2",
"axios": "^0.21.1",
"bcryptjs": "^2.4.3", "bcryptjs": "^2.4.3",
"bootstrap": "^5.0.2",
"cookie-parser": "^1.4.5", "cookie-parser": "^1.4.5",
"dotenv": "^10.0.0", "dotenv": "^10.0.0",
"express": "^4.17.1", "express": "^4.17.1",
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment