Skip to content

Commit

Permalink
Mainpage와 Loginpage 최신화 #1 #12
Browse files Browse the repository at this point in the history
  • Loading branch information
songtaejin1 committed Jun 13, 2024
2 parents ff1e400 + 33c2d9c commit dafe31a
Show file tree
Hide file tree
Showing 3 changed files with 235 additions and 71 deletions.
177 changes: 121 additions & 56 deletions frontend/src/containers/AdminPage/AdminPage.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import styled from "styled-components";
import React, { useState, useEffect } from "react";
import { UseFormReturn, useForm } from "react-hook-form";
import { useNavigate } from "react-router-dom"; // useNavigate 훅 임포트
import { useNavigate } from "react-router-dom";

interface AdminData {
checkbox: boolean;
Expand All @@ -17,6 +17,7 @@ const AdminPage = () => {
const [filteredData, setFilteredData] = useState<AdminData[]>([]);
const [showLogoutModal, setShowLogoutModal] = useState(false);
const [showRegistrationModal, setShowRegistrationModal] = useState(false);
const [showDeleteModal, setShowDeleteModal] = useState(false);
const navigate = useNavigate();

const TestData: AdminData[] = [
Expand Down Expand Up @@ -88,26 +89,21 @@ const AdminPage = () => {
};

const handleDelete = () => {
setShowDeleteModal(true);
};

const handleConfirmDelete = () => {
const newData = adminData.filter((item) => !item.checkbox);
setAdminData(newData);
setFilteredData(newData);
setShowDeleteModal(false);
};

const handleCancelDelete = () => {
setShowDeleteModal(false);
};

const { register, handleSubmit, reset } = useForm();
// const newStudent: AdminData = {
// checkbox: false,
// name: data.name,
// studentid: parseInt(data.studentid),
// studentclass: data.studentclass,
// chapel: parseInt(data.chapel),
// chapelseat: data.chapelseat,
// };
// const newData = [...adminData, newStudent];
// setAdminData(newData);
// setFilteredData(newData);
// reset(); // 입력 폼 초기화
// setShowRegistrationModal(false); // 등록 모달 닫기
// //
const { register, handleSubmit } = useForm();

const onSubmit = (data: any) => {
const searchQuery = data.search.toLowerCase();
Expand All @@ -124,6 +120,38 @@ const AdminPage = () => {
});
setFilteredData(filtered);
};
const handleRegistration = (data: any) => {
const existingStudent = adminData.some(
(student) =>
student.name === data.name ||
student.studentid === parseInt(data.studentid)
);

if (existingStudent) {
alert("이미 등록된 데이터입니다.");
} else {
const newAdminData = [
...adminData,
{
checkbox: false,
name: data.name,
studentid: parseInt(data.studentid),
studentclass: data.studentclass,
chapel: parseInt(data.chapel),
chapelseat: data.chapelseat,
},
];
setAdminData(newAdminData);
setFilteredData(newAdminData);
setShowRegistrationModal(false);
}
};

const handleCheckboxChange = (index: number) => {
const newData = [...adminData];
newData[index].checkbox = !newData[index].checkbox;
setAdminData(newData);
};

return (
<div>
Expand Down Expand Up @@ -172,11 +200,7 @@ const AdminPage = () => {
<ClickBox
type="checkbox"
checked={data.checkbox}
onChange={() => {
const newData = [...adminData];
newData[index].checkbox = !newData[index].checkbox;
setAdminData(newData);
}}
onChange={() => handleCheckboxChange(index)}
/>
<StudentName>{data.name}</StudentName>
<StudentId>{data.studentid}</StudentId>
Expand All @@ -188,6 +212,57 @@ const AdminPage = () => {
</StudentInfo>
</AdminInfo>
</StyleAdminPage>

{showRegistrationModal && (
<RegistrationModal>
<ModalContent>
<ModalTitle>학생 등록</ModalTitle>
<InputContainer>
<InputLabel>이름:</InputLabel>
<InputField {...register("name")} />
</InputContainer>
<InputContainer>
<InputLabel>학번:</InputLabel>
<InputField type="number" {...register("studentid")} />
</InputContainer>
<InputContainer>
<InputLabel>학과:</InputLabel>
<InputField {...register("studentclass")} />
</InputContainer>
<InputContainer>
<InputLabel>채플:</InputLabel>
<InputField type="number" {...register("chapel")} />
</InputContainer>
<InputContainer>
<InputLabel>좌석:</InputLabel>
<InputField {...register("chapelseat")} />
</InputContainer>
<ModulButtonBox>
<ModalButton onClick={handleSubmit(handleRegistration)}>
등록
</ModalButton>
<ModalButtonCancel
onClick={() => setShowRegistrationModal(false)}
>
취소
</ModalButtonCancel>
</ModulButtonBox>
</ModalContent>
</RegistrationModal>
)}

{showDeleteModal && (
<DeleteModal>
<ModalContent>
<ModalMessage>정말로 삭제할까요?</ModalMessage>
<ModalButtonBox>
<ModalButton onClick={handleConfirmDelete}>Yes</ModalButton>
<ModalButton onClick={handleCancelDelete}>No</ModalButton>
</ModalButtonBox>
</ModalContent>
</DeleteModal>
)}

{showLogoutModal && (
<LogoutModal>
<ModalContent>
Expand All @@ -199,46 +274,27 @@ const AdminPage = () => {
</ModalContent>
</LogoutModal>
)}
{showRegistrationModal && (
<RegistrationModal>
<ModalContent>
<ModalTitle>학생 등록</ModalTitle>
<form onSubmit={handleSubmit(onSubmit)}>
<InputContainer>
<InputLabel>이름:</InputLabel>
<InputField {...register("name")} />
</InputContainer>
<InputContainer>
<InputLabel>학번:</InputLabel>
<InputField type="number" {...register("studentid")} />
</InputContainer>
<InputContainer>
<InputLabel>학과:</InputLabel>
<InputField {...register("studentclass")} />
</InputContainer>
<InputContainer>
<InputLabel>채플:</InputLabel>
<InputField type="number" {...register("chapel")} />
</InputContainer>
<InputContainer>
<InputLabel>좌석:</InputLabel>
<InputField {...register("chapelseat")} />
</InputContainer>
<ModulButtonBox>
<ModalButton type="submit">등록</ModalButton>
<ModalButton onClick={() => setShowRegistrationModal(false)}>
취소
</ModalButton>
</ModulButtonBox>
</form>
</ModalContent>
</RegistrationModal>
)}
</div>
);
};

export default AdminPage;

const DeleteModal = styled.div`
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30%;
padding: 20px;
background-color: white;
border: 1px solid #375cde;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
`;

const RegistrationModal = styled.div`
position: fixed;
top: 50%;
Expand Down Expand Up @@ -324,6 +380,15 @@ const ModalButton = styled.button`
color: white;
cursor: pointer;
`;
const ModalButtonCancel = styled.button`
padding: 10px 20px;
margin: 0 10px;
border-radius: 5px;
border: none;
background-color: #375cde;
color: white;
cursor: pointer;
`;

const AdminManagementBox = styled.div`
display: flex;
Expand Down
54 changes: 42 additions & 12 deletions frontend/src/containers/LoginPage/LoginPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { useState } from "react";
import axios from "axios";

const LoginPage = () => {
const [error, setError] = useState("");
// const [error, setError] = useState("");
const signup = useNavigate(); // useNavigate 훅 사용
const {
register,
Expand All @@ -24,17 +24,41 @@ const LoginPage = () => {

if (data.studentId === "admin" && data.password === "admin") {
signup("/admin");
} else {
try {
const response = await axios.post(
"http://isaacnas.duckdns.org:8083/user/login",
loginData
);
if (response.status === 200) {
signup("/main");
// if (data.studentId === "admin") {
// signup("/admin");
}
try {
const response = await axios.post(
"http://isaacnas.duckdns.org:8083/user/login",
loginData,
{
headers: {
"Content-Type": "application/json",
},
}
} catch (error) {
setError("로그인에 실패했습니다. 다시 시도해주세요.");
);

console.log("서버 응답:", response); // 디버깅을 위해 콘솔에 출력

if (response.status === 200 || response.data.success) {
alert("로그인 되었습니다!");
signup("/main");
} else {
alert("로그인에 실패했습니다. 다시 시도해주세요.");
}
} catch (error: any) {
if (error.response) {
// 요청이 이루어졌고 서버가 2xx 범위 외의 상태 코드로 응답함
console.error("Error response:", error.response.data);
alert(`로그인에 실패했습니다: ${error.response.data.message}`);
} else if (error.request) {
// 요청이 이루어졌지만 응답을 받지 못함
console.error("Error request:", error.request);
alert("로그인 서버로부터 응답이 없습니다. 나중에 다시 시도해주세요.");
} else {
// 요청 설정 중 오류가 발생함
console.error("Error message:", error.message);
alert("로그인 중 오류가 발생했습니다. 다시 시도해주세요.");
}
}
};
Expand Down Expand Up @@ -78,7 +102,8 @@ const LoginPage = () => {
value === "admin" ||
value === watch("studentId") ||
/^(?=.*[a-zA-Z])(?=.*[0-9]).{8,}$/.test(value) ||
"영문+숫자 조합 8자 이상 입력해주세요.",
"비밀번호를 제대로 입력해주세요.",
// "영문+숫자 조합 8자 이상 입력해주세요.",
})}
/>
{errors.password && (
Expand Down Expand Up @@ -153,6 +178,11 @@ const LoginBtn = styled.div`
width: 100vw;
min-width: 200px;
max-width: 580px;
position: fixed;
bottom: 3%;
left: 50%;
transform: translateX(-50%);
z-index: 1;
`;

const SubmitButton = styled.button`
Expand Down
Loading

0 comments on commit dafe31a

Please sign in to comment.