Skip to content

GitLab

Commit d6f76734 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

Merge branch 'yeon' into develope

parents 6883d5f2 6635e0b8
Hide whitespace changes
Inline Side-by-side
frontend/package.json
View file @ d6f76734
......@@ -12,9 +12,12 @@
"author": "Daeki Yoon",
"license": "ISC",
"devDependencies": {
"@types/bcryptjs": "^2.4.2",
"@types/cookie-parser": "^1.4.3",
"@types/react": "^18.0.14",
"@types/react-dom": "^18.0.5",
"@types/react-router-dom": "^5.3.3",
"@types/validator": "^13.7.3",
"autoprefixer": "^10.4.7",
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
......@@ -29,8 +32,11 @@
"webpack-dev-server": "^4.9.2"
},
"dependencies": {
"bcryptjs": "^2.4.3",
"cookie-parser": "^1.4.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0"
"react-router-dom": "^6.3.0",
"validator": "^13.7.0"
}
}
frontend/src/SurveyRouter.tsx
View file @ d6f76734
......@@ -2,7 +2,7 @@ import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import App from "./App";
import { Login, SignUp } from "./auth";
import { CreateSurveyForm } from "./commons";
import { CreateSurveyForm, SurveyForm } from "./commons";
import { Home } from "./home";
export const SurveyRouter = () => {
......@@ -14,6 +14,7 @@ export const SurveyRouter = () => {
<Route path="login" element={<Login />} />
<Route path="signup" element={<SignUp />} />
<Route path="create" element={<CreateSurveyForm />} />
<Route path="survey" element={<SurveyForm />} />
</Route>
</Routes>
</BrowserRouter>
......
frontend/src/auth/SignUp.tsx
View file @ d6f76734
import React from "react";
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
type SignUpProps = {};
export const SignUp = ({}: SignUpProps) => (
<div className="flex justify-center mt-3">
<div className="text-slate-300 text-xl font-bold">
<label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
이름
</label>
<input
className="shadow appearance-none border rounded py-2 px-3 text-gray-60"
id="name"
type="name"
placeholder="이름을 입력하세요"
/>
<label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
이메일
</label>
<input
className="shadow appearance-none border rounded py-2 px-3 text-gray-70"
id="email"
type="email"
placeholder="이메일을 입력하세요"
/>
<label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
비밀번호
</label>
<input
className="shadow appearance-none border rounded py-2 px-3 text-gray-70"
id="username"
type="password"
placeholder="비밀번호를 입력하세요"
/>
<div className="text-center">
<button className="bg-themeColor text-white border rounded w-100 py-2 px-3 mt-3">
회원가입
</button>
export const SignUp = ({}: SignUpProps) => {
const USER = {
name: "",
email: "",
password: "2345",
password2: "1234",
};
const [user, setUser] = useState(USER);
const [error, setError] = useState('')
const [disabled, setDisabled] = useState(false)
const [success, setSuccess] = useState(false)
const navigate = useNavigate();
useEffect(() => {
setDisabled(!(user.name && user.email && user.password && user.password2))
}, [user])
function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
const { name, value } = event.target
setUser({...user, [name]: value})
}
async function handleSubmit(event: React.MouseEvent<HTMLButtonElement>) {
event.preventDefault();
try {
// console.log('checkPassword:',checkPassword())
// const passwordMatch = checkPassword()
if (passwordmatch()) {
// const res = await userApi.signup(user)
// console.log('서버연결됬나요', res)
console.log('회원가입')
setSuccess(true)
setError('')
}
} catch (error) {
console.log('에러발생')
// catchErrors(error, setError)
} finally {
// setLoading(false);
}
}
function passwordmatch() {
if (user.password !== user.password2) {
alert("비밀번호가 일치하지않습니다");
console.log("password fail");
return false;
} else {
console.log("password match");
return true;
}
}
if (success) {
alert('회원가입 되었습니다')
navigate(`../`)
}
return (
<div className="flex justify-center mt-3">
<div className="flex flex-col space-y-4 mt-5 text-xl font-bold">
<label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
이름
</label>
<input
className="shadow appearance-none border rounded py-2 px-3 text-gray-60"
id="name"
type="text"
placeholder="이름을 입력하세요"
onChange={handleChange}
/>
<label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
이메일
</label>
<input
className="shadow appearance-none border rounded py-2 px-3 text-gray-70"
id="email"
type="text"
placeholder="이메일을 입력하세요"
onChange={handleChange}
/>
<label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
비밀번호
</label>
<input
className="shadow appearance-none border rounded py-2 px-3 text-gray-70"
id="password"
type="password"
placeholder="비밀번호를 입력하세요"
onChange={handleChange}
/>
<label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
비밀번호 확인
</label>
<input
className="shadow appearance-none border rounded py-2 px-3 text-gray-70"
id="password2"
type="password"
placeholder="비밀번호를 다시 입력하세요"
onChange={handleChange}
/>
<div className="text-center mt-3">
<button
className="bg-themeColor text-white border rounded w-100 py-2 px-3 mt-3"
onClick={handleSubmit}
>
회원가입
</button>
</div>
</div>
</div>
</div>
);
);
};
frontend/src/commons/SurveyForm.tsx 0 → 100644
View file @ d6f76734
import React from 'react'
export const SurveyForm = () => (
<div className='flex justify-center'>
<div className="flex flex-col space-y-4 mt-5">
설문조사 이름
<div className="box-content h-52 w-96 py-4 px-5 border-2 mt-5">
<form>
<label>첫번째 질문</label>
</form>
</div>
<div className="box-content h-52 w-96 py-4 px-5 border-2 mt-5">
<form>
<label>두번째 질문</label>
</form>
</div>
<div className="box-content h-52 w-96 py-4 px-5 border-2 mt-5">
<form>
<label>세번째 질문</label>
</form>
</div>
<div className="text-center t-5">
<button className="bg-themeColor text-white border rounded py-2 px-6">
제출
</button>
</div>
</div>
</div>
)
frontend/src/commons/index.tsx
View file @ d6f76734
export { CreateSurveyForm } from "./CreateSurveyForm";
export { Header } from "./Header";
export { SurveyForm } from "./SurveyForm";
\ No newline at end of file
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