Skip to content

Commit 2e937ff

Browse files
seun9yeonseun9yeon
authored
[EC-189] FE/feat: 관리자 학습자 관리 학습자등록버튼 기능 추가 (#223)
* [EC-189] chore: 관리자 학습자관리 학습자등록버튼 기능 추가 wip * [EC-189] feat: 관리자 학습자관리 학습자등록버튼 기능 추가 * [EC-189] feat: 관리자 학습자관리 학습자등록버튼 기능 추가
1 parent 70f03be commit 2e937ff

File tree

3 files changed

+160
-19
lines changed

3 files changed

+160
-19
lines changed

‎client/src/pages/staffAttendanceAbsence/StaffAttendanceAbsence.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default function StaffAttendanceAbsence() {
2020
const [hasNext, setHasNext] = useState(false);
2121
const [page, setPage] = useState(0);
2222
const [selectedAbsenceAttendanceId, setSelectedAbsenceAttendanceId] = useState();
23-
23+
2424
const openModal = async (item) => {
2525
try {
2626
const response = await absenceAttendancesApi.getAbsenceAttendance(

‎client/src/pages/staffStudentManage/StaffStudentManage.jsx‎

Lines changed: 139 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ import BaseListItem from '../../components/listItem/baseListItem/BaseListItem';
55
import Modal from '../../components/modal/Modal';
66
import { useSelector } from 'react-redux';
77
import { studentManageApi } from '../../api/studentManageApi';
8+
import axios from 'axios';
89

910
export default function StaffStudentManage() {
1011
const courseId = useSelector((state) => state.auth.user.courseId);
11-
console.log(courseId);
1212
const [openModal, setOpenModal] = useState(false);
1313
const [students, setStudents] = useState([]);
1414
const statusMap = {
@@ -33,6 +33,60 @@ export default function StaffStudentManage() {
3333
fetchStudents();
3434
}, []);
3535

36+
const [newStudent, setNewStudent] = useState({
37+
name: '',
38+
email: '',
39+
phone: '',
40+
tagTitle: '수강중',
41+
});
42+
43+
const [errors, setErrors] = useState({
44+
name: '',
45+
email: '',
46+
phone: '',
47+
});
48+
49+
const nameRegex = /^[가-힣]+$/;
50+
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
51+
const phoneRegex = /^01[0-9]-\d{3,4}-\d{4}$/;
52+
const BIRTHDAY_YEAR_LIST = Array.from({ length: 50 }, (_, i) => `${i + 1980}년`);
53+
const BIRTHDAY_MONTH_LIST = Array.from({ length: 12 }, (_, i) => `${i + 1}월`);
54+
const BIRTHDAY_DAY_LIST = Array.from({ length: 31 }, (_, i) => `${i + 1}일`);
55+
56+
const handleChange = (e) => {
57+
const { name, value } = e.target;
58+
59+
let errorMessage = '';
60+
61+
if (name === 'name') {
62+
if (!nameRegex.test(value)) {
63+
errorMessage = '이름은 한글만 입력 가능합니다.';
64+
}
65+
}
66+
67+
if (name === 'email') {
68+
if (!emailRegex.test(value)) {
69+
errorMessage = '유효한 이메일 주소를 입력해주세요.';
70+
}
71+
}
72+
73+
if (name === 'phone') {
74+
if (!phoneRegex.test(value)) {
75+
errorMessage = '유효한 전화번호 형식(예: 010-1234-1234)을 입력해주세요.';
76+
}
77+
}
78+
79+
setErrors((prevErrors) => ({
80+
...prevErrors,
81+
[name]: errorMessage,
82+
}));
83+
84+
setNewStudent((prevState) => ({
85+
...prevState,
86+
[name]: value,
87+
}));
88+
};
89+
3690
const handleTagChange = (index, newTagTitle) => {
3791
setStudents((prevStudents) =>
3892
prevStudents.map((student, i) =>
@@ -45,22 +99,90 @@ export default function StaffStudentManage() {
4599

46100
const closeModalHandler = () => setOpenModal(false);
47101

102+
// const handleChange = (e) => {
103+
// const { name, value } = e.target;
104+
// console.log(value);
105+
// console.log(name);
106+
107+
// setNewStudent((preState) => ({
108+
// ...preState,
109+
// [name]: value,
110+
// }));
111+
// };
112+
113+
const handleSubmit = async (e) => {
114+
e.preventDefault();
115+
console.log(newStudent);
116+
};
117+
118+
119+
48120
const inputBox = (
49121
<>
50-
<div className={styles.inputContainer}>
51-
<label>이름</label>
52-
<input className={styles.smallInputBox} placeholder="이름을 입력해주세요."></input>
53-
<label>연락처</label>
54-
<input className={styles.smallInputBox} placeholder="연락처를 입력해주세요."></input>
55-
<label>생년월일</label>
56-
<div className={styles.birthdate}>
57-
<input className={styles.smallInputBox}></input>
58-
<input className={styles.smallInputBox}></input>
59-
<input className={styles.smallInputBox}></input>
122+
<form onSubmit={handleSubmit}>
123+
<div className={styles.inputContainer}>
124+
<label>이름</label>
125+
<input
126+
className={styles.smallInputBox}
127+
name="name"
128+
type="text"
129+
placeholder="이름을 입력해주세요."
130+
onChange={handleChange}
131+
content=""
132+
></input>
133+
<div className={styles.regexFont}>
134+
{errors.name && <p style={{ color: 'red' }}>{errors.name}</p>}
135+
</div>
136+
137+
<label>연락처</label>
138+
<input
139+
className={styles.smallInputBox}
140+
name="phone"
141+
type="text"
142+
placeholder="연락처를 입력해주세요."
143+
onChange={handleChange}
144+
></input>
145+
<div className={styles.regexFont}>
146+
{errors.phone && <p style={{ color: 'red' }}>{errors.phone}</p>}
147+
</div>
148+
149+
<label>생년월일</label>
150+
<div class="info" id="info__birth" className={styles.birthdate}>
151+
<select className={styles.smallInputBox}>
152+
{BIRTHDAY_YEAR_LIST.map((year, index) => (
153+
<option key={index}>{year}</option>
154+
))}
155+
</select>
156+
<select className={styles.smallInputBox}>
157+
{BIRTHDAY_MONTH_LIST.map((month, index) => (
158+
<option key={index}>{month}</option>
159+
))}
160+
</select>
161+
<select className={styles.smallInputBox}>
162+
{BIRTHDAY_DAY_LIST.map((day, index) => (
163+
<option key={index}>{day}</option>
164+
))}
165+
</select>
166+
</div>
167+
168+
<label>이메일</label>
169+
<input
170+
className={styles.smallInputBox}
171+
name="email"
172+
type="text"
173+
placeholder="이메일을 입력해주세요."
174+
onChange={handleChange}
175+
></input>
176+
<div className={styles.regexFont}>
177+
{errors.email && <p style={{ color: 'red' }}>{errors.email}</p>}
178+
</div>
60179
</div>
61-
<label>이메일</label>
62-
<input className={styles.smallInputBox} placeholder="이메일을 입력해주세요."></input>
63-
</div>
180+
<div className={styles.MainButton}>
181+
<button type="submit" className={styles.button}>
182+
등록
183+
</button>
184+
</div>
185+
</form>
64186
</>
65187
);
66188

@@ -82,9 +204,11 @@ export default function StaffStudentManage() {
82204
/>
83205
))}
84206
</div>
207+
85208
<div>
86209
<Modal
87-
mainText="등록"
210+
// mainText="등록"
211+
// mainClick={handleClick}
88212
content={inputBox}
89213
isOpen={openModal}
90214
onClose={closeModalHandler}

‎client/src/pages/staffStudentManage/StaffStudentManage.module.css‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
display: flex;
33
flex-direction: column;
44
justify-content: left;
5-
width: 350px;
6-
padding: 2rem 0rem;
5+
/* width: 500px; */
6+
padding: 0rem 0rem;
77
gap: 0.5rem;
88
}
99

@@ -32,6 +32,23 @@
3232
gap: 1rem;
3333
}
3434

35-
.studentsBox p {
35+
/* .studentsBox p {
3636
margin-top: var(--margin-small);
37+
} */
38+
39+
/* .studentsBox {
40+
margin-top: 1rem;
41+
gap: 1rem;
42+
} */
43+
44+
.regexFont {
45+
font-size: var(--font-size-12);
46+
color: var(--primary-300);
3747
}
48+
49+
.button {
50+
padding: 0.5rem 1rem;
51+
border: 1px solid var(--text-300);
52+
border-radius: var(--border-radius-10);
53+
background-color: var(--bg-200);
54+
}

0 commit comments

Comments
 (0)