Skip to content

Commit 2447c95

Browse files
seun9yeonseun9yeon
authored
[EC-77] feat: 유고 결석 페이지 UI 구현 (#65)
1 parent 248274a commit 2447c95

File tree

6 files changed

+241
-1
lines changed

6 files changed

+241
-1
lines changed

‎client/src/components/inputBox/InputBox2/InputBox2.jsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import styles from './InputBox2.module.css';
3+
4+
export default function InputBox2({
5+
type,
6+
title,
7+
disabled,
8+
onChange,
9+
label,
10+
isSelect,
11+
content,
12+
name,
13+
}) {
14+
15+
return (
16+
<div className={styles.inputContainer2}>
17+
<p className={styles.label2}>
18+
{label}
19+
<span>{isSelect}</span>
20+
</p>
21+
<input
22+
className={styles.inputBox2}
23+
type={type}
24+
placeholder={title}
25+
disabled={disabled}
26+
onChange={onChange}
27+
name={name}
28+
></input>
29+
<p className={styles.content2}>{content}</p>
30+
</div>
31+
);
32+
}

‎client/src/components/inputBox/InputBox2/InputBox2.module.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.inputContainer2 {
2+
width: 400px;
3+
margin: 2rem 0rem;
4+
}
5+
6+
.inputBox2 {
7+
width: 100%;
8+
padding: var(--padding-small);
9+
border: 1px solid var(--text-300);
10+
border-radius: var(--border-radius-5);
11+
margin: 6px 0px;
12+
box-sizing: border-box;
13+
14+
}
15+
16+
.inputBox2::placeholder {
17+
color: var(--text-300);
18+
text-align: left;
19+
}
20+
21+
.inputBox2:focus {
22+
color: var(--text-100);
23+
outline-color: var(--primary-100);
24+
}
25+
26+
.inputContainer2 .content,
27+
.inputContainer2 .label span {
28+
color: var(--text-300);
29+
font-size: var(--font-size-14);
30+
}
31+
32+
.inputContainer2 .label span {
33+
font-size: var(--font-size-12);
34+
padding-left: 6px;
35+
}
36+
37+
.label{
38+
text-wrap-mode: nowrap;
39+
}

‎client/src/components/inputBox/InputBox3/InputBox3.jsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import styles from './InputBox3.module.css';
3+
4+
export default function InputBox3({
5+
type,
6+
title,
7+
disabled,
8+
onChange,
9+
label,
10+
isSelect,
11+
content,
12+
name,
13+
}) {
14+
15+
return (
16+
<div className={styles.inputContainer3}>
17+
<p className={styles.label3}>
18+
{label}
19+
<span>{isSelect}</span>
20+
</p>
21+
<input
22+
className={styles.inputBox3}
23+
type={type}
24+
placeholder={title}
25+
disabled={disabled}
26+
onChange={onChange}
27+
name={name}
28+
></input>
29+
<p className={styles.content3}>{content}</p>
30+
</div>
31+
);
32+
}

‎client/src/components/inputBox/InputBox3/InputBox3.module.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
.inputContainer3 {
2+
width: 400px;
3+
height: 100px;
4+
margin: 2rem 0rem;
5+
}
6+
7+
.inputBox3 {
8+
width: 100%;
9+
height: 100%;
10+
padding: var(--padding-small);
11+
border: 1px solid var(--text-300);
12+
border-radius: var(--border-radius-5);
13+
margin: 6px 0;
14+
box-sizing: border-box;
15+
}
16+
17+
.inputBox3::placeholder {
18+
color: var(--text-300);
19+
text-align: left;
20+
}
21+
22+
.inputBox3:focus {
23+
color: var(--text-100);
24+
outline-color: var(--primary-100);
25+
}
26+
27+
.inputContainer3 .content,
28+
.inputContainer3 .label span {
29+
color: var(--text-300);
30+
font-size: var(--font-size-14);
31+
}
32+
33+
.inputContainer3 .label span {
34+
font-size: var(--font-size-12);
35+
padding-left: 6px;
36+
}
37+
38+
.label{
39+
text-wrap-mode: nowrap;
40+
}

‎client/src/pages/studentAttendanceAbsence/StudentAttendanceAbsence.jsx‎

Lines changed: 65 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,72 @@
11
import React from 'react'
22
import styles from "./StudentAttendanceAbsence.module.css"
3+
import LeftLineListItem from "../../components/listItem/leftLineListItem/LeftLineListItem"
4+
import DashBoardItem from '../../components/dashBoardItem/DashBoardItem'
5+
import RoundButton from '../../components/buttons/roundButton/RoundButton'
6+
import InputBox2 from '../../components/inputBox/InputBox2/InputBox2'
7+
import InputBox3 from '../../components/inputBox/InputBox3/InputBox3'
8+
import MainButton from '../../components/buttons/mainButton/MainButton'
9+
310

411
export default function StudentAttendanceAbsence() {
512
return (
6-
<div>StudentAttendanceAbsence</div>
13+
<>
14+
<div className={styles.LeftLineListItemDisplay}>
15+
<div className={styles.absenceLeftLineListItem}>
16+
<LeftLineListItem
17+
isClickable={false}
18+
// status={}
19+
children={"조퇴"}
20+
></LeftLineListItem>
21+
<LeftLineListItem
22+
isClickable={false}
23+
// status={}
24+
children={"결석"}
25+
></LeftLineListItem>
26+
<LeftLineListItem
27+
isClickable={false}
28+
// status={}
29+
children={"결석"}
30+
></LeftLineListItem>
31+
<LeftLineListItem
32+
isClickable={false}
33+
// status={}
34+
children={"결석"}
35+
></LeftLineListItem>
36+
</div>
37+
<div className={styles.absenceDashBoardItem}>
38+
<DashBoardItem>
39+
<RoundButton title="결석"></RoundButton>
40+
<RoundButton title="조퇴" isActiveIndex={false}></RoundButton>
41+
<RoundButton title="지각" isActiveIndex={false}></RoundButton>
42+
<div className={styles.InputBox}>
43+
<InputBox2
44+
// type={ }
45+
title={"날짜선택하기"}
46+
// disabled={ }
47+
// onChange={onChange}
48+
label={"기간"}
49+
// content={ }
50+
// name={ }
51+
></InputBox2>
52+
<InputBox2
53+
title={"파일 선택 또는 끌어놓기..."}
54+
label={"서류"}
55+
// onChange={onChange}
56+
></InputBox2>
57+
<InputBox3
58+
label={"사유"}
59+
// onChange={onChange}
60+
></InputBox3>
61+
</div>
62+
<div className={styles.mainButton}>
63+
<MainButton
64+
title={"신청"}
65+
></MainButton>
66+
</div>
67+
</DashBoardItem>
68+
</div>
69+
</div>
70+
</>
771
)
872
}

‎client/src/pages/studentAttendanceAbsence/StudentAttendanceAbsence.module.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
.LeftLineListItemDisplay {
2+
display: flex;
3+
flex-direction: row;
4+
}
5+
6+
.absenceLeftLineListItem {
7+
display: flex;
8+
flex-direction: column;
9+
width: 50%;
10+
height: 60%;
11+
gap: 0.5rem;
12+
padding: 2rem;
13+
}
14+
15+
.absenceDashBoardItem {
16+
width: 50%;
17+
height: 100%;
18+
padding: 3rem 2rem;
19+
}
20+
21+
.InputBox {
22+
width: 50%;
23+
height: 50%;
24+
}
25+
26+
.roundButton {
27+
padding: 0rem 1rem;
28+
}
29+
30+
.mainButton {
31+
padding: 10px 200px;
32+
}
33+

0 commit comments

Comments
 (0)