Skip to content

GitLab

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
Show whitespace changes
Inline Side-by-side
client/package.json
View file @ f9065bdb
......@@ -9,6 +9,7 @@
"@testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"bootstrap": "^5.0.2",
"node-sass": "^6.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
......
client/public/manifest.json
View file @ f9065bdb
......@@ -3,17 +3,17 @@
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"src": "BORA_LOGO.PNG",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"src": "BORA_LOGO.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"src": "BORA_LOGO.png",
"type": "image/png",
"sizes": "512x512"
}
......
client/src/components/Login.js
View file @ f9065bdb
import { useEffect, useState } from "react";
const INIT_USER = {
id: "",
password: "",
};
const Login = () => {
// const { error, loading, login } = useAuth();
const [user, setUser] = useState(INIT_USER);
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>
Login Component 입니다.
<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>
</form>
</div>
)
);
};
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 [user, setUser] = useState(INIT_USER);
const [error, setError] = useState("");
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>
Signup Component 입니다.
<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>
</form>
</div>
)
);
};
export default Signup;
client/src/index.js
View file @ f9065bdb
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap'
import App from './App';
import reportWebVitals from './reportWebVitals';
import React from "react";
import ReactDOM from "react-dom";
import './scss/custom.scss';
import "./index.css";
import "bootstrap";
import 'bootstrap/dist/css/bootstrap.min.css'
import App from "./App";
import reportWebVitals from "./reportWebVitals";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
document.getElementById("root")
);
// If you want to start measuring performance in your app, pass a function
......
client/src/pages/HomeGuestPage.js
View file @ f9065bdb
......@@ -3,14 +3,49 @@ import SignUp from "../components/SignUp";
const HomeGuestPage = () => {
return (
<div>
HomeGuest Page 입니다.
<h1>logo 자리</h1>
<p>로그인</p>
<div className="d-flex flex-column justify-content-center h-100 font-weight-bold">
<img src="BORA.PNG" className="w-100 p-4" />
<div className="d-flex flex-column align-items-center">
<button
type="button"
className="col-4 btn btn-info"
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 />
<p>회원가입</p>
</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>
);
};
......
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 @@
"description": "Streaming Service",
"main": "index.js",
"dependencies": {
"@popperjs/core": "^2.9.2",
"axios": "^0.21.1",
"bcryptjs": "^2.4.3",
"bootstrap": "^5.0.2",
"cookie-parser": "^1.4.5",
"dotenv": "^10.0.0",
"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