Skip to content

Commit 798de7f

Browse files
nyeonseoknyeonseok
authored
Merge pull request #18 from sw-security-web-app/16-scrum-36-직원-명단-보기2
SCRUM-36 직원 리스트 페이지 구현 완료
2 parents c1702ad + c63ff14 commit 798de7f

File tree

9 files changed

+548
-34
lines changed

9 files changed

+548
-34
lines changed

‎sw-security/app/components/profileForm.tsx

+29-29
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ export default function ProfileForm() {
1818
const logout = useStore((state) => state.logout);
1919
const navigate = useNavigate();
2020
const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
21-
const [role, setRole] = useState<string | null>(null);
21+
// const [role, setRole] = useState<string | null>(null);
2222

2323
// const isBrowser = typeof window !== "undefined"; // 브라우저에서만 실행되도록 체크
2424
// const role = isBrowser ? localStorage.getItem("role") : null; // 브라우저에서만 localStorage 접근
25-
// const role = "MANAGER";
25+
const role = "MANAGER";
2626

2727
const fetchUserInfo = async () => {
2828
try {
@@ -42,12 +42,12 @@ export default function ProfileForm() {
4242
const handleDelete = () => {};
4343

4444
//role을 마운트될 때 localStorage에서 가져옴
45-
useEffect(() => {
46-
if (typeof window !== "undefined") {
47-
const storedRole = localStorage.getItem("role");
48-
setRole(storedRole);
49-
}
50-
}, []);
45+
// useEffect(() => {
46+
// if (typeof window !== "undefined") {
47+
// const storedRole = localStorage.getItem("role");
48+
// setRole(storedRole);
49+
// }
50+
// }, []);
5151

5252
useEffect(() => {
5353
if (!isLogin) {
@@ -64,17 +64,17 @@ export default function ProfileForm() {
6464
};
6565

6666
//로딩아이콘 띄우기
67-
if (userInfo == null) {
68-
return (
69-
<div className={profileStyle.profileContainer}>
70-
<div className={profileStyle.content}>
71-
<div className={profileStyle.iconContainer}>
72-
<AiOutlineLoading className={profileStyle.loadingIcon} />
73-
</div>
74-
</div>
75-
</div>
76-
);
77-
}
67+
// if (userInfo == null) {
68+
// return (
69+
// <div className={profileStyle.profileContainer}>
70+
// <div className={profileStyle.content}>
71+
// <div className={profileStyle.iconContainer}>
72+
// <AiOutlineLoading className={profileStyle.loadingIcon} />
73+
// </div>
74+
// </div>
75+
// </div>
76+
// );
77+
// }
7878

7979
return (
8080
<div className={profileStyle.profileContainer}>
@@ -85,36 +85,36 @@ export default function ProfileForm() {
8585
<div className={profileStyle.nameContainer}>
8686
<label>이름</label>
8787
<div className={profileStyle.nameDiv}>
88-
{/* <span className={profileStyle.name}>아년석</span> */}
89-
<span className={profileStyle.name}>{userInfo.name}</span>
88+
<span className={profileStyle.name}>아년석</span>
89+
{/* <span className={profileStyle.name}>{userInfo.name}</span> */}
9090
</div>
9191
</div>
9292
<div className={profileStyle.emailContainer}>
9393
<label>이메일</label>
9494
<div className={profileStyle.emailDiv}>
95-
{/* <span className={profileStyle.email}>vero1234@naver.com</span> */}
96-
<span className={profileStyle.email}>{userInfo.email}</span>
95+
<span className={profileStyle.email}>vero1234@naver.com</span>
96+
{/* <span className={profileStyle.email}>{userInfo.email}</span> */}
9797
</div>
9898
</div>
9999
<div className={profileStyle.companyContainer}>
100100
<label>회사명</label>
101101
<div className={profileStyle.companyDiv}>
102-
{/* <span className={profileStyle.company}>삼성전자</span> */}
103-
<span className={profileStyle.company}>{userInfo.companyName}</span>
102+
<span className={profileStyle.company}>삼성전자</span>
103+
{/* <span className={profileStyle.company}>{userInfo.companyName}</span> */}
104104
</div>
105105
</div>
106106
<div className={profileStyle.deptContainer}>
107107
<label>부서명</label>
108108
<div className={profileStyle.deptDiv}>
109-
{/* <span className={profileStyle.dept}>SI</span> */}
110-
<span className={profileStyle.dept}>{userInfo.deptName}</span>
109+
<span className={profileStyle.dept}>SI</span>
110+
{/* <span className={profileStyle.dept}>{userInfo.deptName}</span> */}
111111
</div>
112112
</div>
113113
<div className={profileStyle.positionContainer}>
114114
<label>직책</label>
115115
<div className={profileStyle.positionDiv}>
116-
{/* <span className={profileStyle.position}>BE-1년차</span> */}
117-
<span className={profileStyle.position}>{userInfo.position}</span>
116+
<span className={profileStyle.position}>BE-1년차</span>
117+
{/* <span className={profileSctyle.position}>{userInfo.position}</span> */}
118118
</div>
119119
</div>
120120
</div>

‎sw-security/app/css/admin.module.css

+233
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
.container {
2+
display: flex;
3+
flex-direction: column;
4+
height: 100vh;
5+
/* background-color: #0d0d0d; */
6+
/* min-height: 100dvh; */
7+
overflow: hidden;
8+
/* position: relative; */
9+
}
10+
.content {
11+
background-color: #f9f9fa;
12+
display: flex;
13+
flex: 15;
14+
justify-content: center;
15+
height: 100%;
16+
}
17+
.inner {
18+
width: 90%;
19+
/* width: 63.89rem; */
20+
/* min-height: 100dvh; */
21+
/* background-color: green; */
22+
display: flex;
23+
position: relative;
24+
align-items: center;
25+
height: 100%;
26+
justify-content: center;
27+
}
28+
29+
/*직원 명단 스타일*/
30+
.loadingIcon {
31+
animation: spin 1s linear infinite;
32+
color: #b7bdc7;
33+
height: 30%;
34+
width: 30%;
35+
/* background-color: red; */
36+
}
37+
@keyframes spin {
38+
0% {
39+
transform: rotate(0deg);
40+
}
41+
100% {
42+
transform: rotate(360deg);
43+
}
44+
}
45+
.iconContainer {
46+
display: flex;
47+
justify-content: center;
48+
align-items: center;
49+
/* background-color: red; */
50+
width: 30%;
51+
height: 30%;
52+
}
53+
.listContainer {
54+
display: flex;
55+
flex-direction: column;
56+
width: 100%;
57+
height: 90%;
58+
/* position: relative;
59+
top: 2.2rem; */
60+
justify-content: space-between;
61+
/* background-color: red; */
62+
}
63+
.noBtnConatainer {
64+
display: flex;
65+
flex-direction: column;
66+
width: 100%;
67+
height: 85%;
68+
/* margin-top: 2rem; */
69+
/* background-color: blue; */
70+
}
71+
.listTop {
72+
display: flex;
73+
flex-direction: row;
74+
justify-content: space-between;
75+
height: 2.5rem;
76+
/* background-color: red; */
77+
}
78+
.leftDiv {
79+
display: flex;
80+
flex-direction: row;
81+
}
82+
.companyName,
83+
.deptName {
84+
font-size: 2rem;
85+
font-weight: bold;
86+
color: #0d0d0d;
87+
line-height: 2.5rem;
88+
}
89+
.deptName {
90+
margin-left: 0.5rem;
91+
}
92+
.totalCnt {
93+
font-size: 1.39rem;
94+
color: #5e6269;
95+
font-weight: 500;
96+
align-self: flex-end;
97+
margin-left: 0.56rem;
98+
}
99+
.rightDiv {
100+
width: 30%;
101+
position: relative;
102+
}
103+
input {
104+
border-radius: 5.56rem;
105+
height: 100%;
106+
width: 100%;
107+
box-sizing: border-box;
108+
border: 0.12rem solid #bdc3cd;
109+
padding-left: 0.83rem;
110+
padding-right: 1.1rem;
111+
color: #b7bdc7;
112+
font-size: 0.85rem;
113+
}
114+
input::placeholder {
115+
font-size: 0.85rem;
116+
color: #b7bdc7;
117+
font-weight: 400;
118+
/* padding-left: 15px; */
119+
}
120+
.searchIcon {
121+
position: absolute;
122+
right: 1rem; /* 오른쪽 끝에서 12px 떨어지게 조정 */
123+
top: 50%;
124+
transform: translateY(-50%);
125+
width: 1.12rem;
126+
height: 1.12rem;
127+
cursor: pointer;
128+
}
129+
table {
130+
background-color: #ffffff;
131+
width: 100%;
132+
height: 100%;
133+
table-layout: fixed;
134+
border-radius: 1rem;
135+
border-collapse: separate;
136+
border-spacing: 0;
137+
border: 1px solid rgb(183, 189, 199, 0.5);
138+
overflow: hidden;
139+
margin-top: 2rem;
140+
}
141+
142+
thead {
143+
background-color: #2a2c2f;
144+
height: 3.4rem;
145+
}
146+
147+
th {
148+
text-align: left;
149+
font-size: 1rem;
150+
color: #b7bdc7;
151+
font-weight: 500;
152+
padding-left: 1.67rem;
153+
padding-right: 1.67rem;
154+
}
155+
156+
tbody tr {
157+
position: relative;
158+
}
159+
160+
tbody tr td:first-child {
161+
padding-left: 1.67rem;
162+
padding-right: 1.67rem;
163+
position: relative;
164+
}
165+
166+
tbody tr td::after {
167+
content: "";
168+
position: absolute;
169+
left: 1.67rem;
170+
bottom: 0;
171+
border-bottom: 0.12rem solid #e5e9f2;
172+
width: calc(100% - 3.34rem);
173+
}
174+
175+
tbody tr:last-child td::after {
176+
content: none;
177+
}
178+
179+
td {
180+
color: #1b1c1e;
181+
font-weight: 500;
182+
font-size: 1.1rem;
183+
border: none;
184+
}
185+
186+
.noEmployee {
187+
border: none !important;
188+
position: absolute;
189+
top: 45%;
190+
font-size: 1.5rem;
191+
color: #b7bdc7;
192+
font-weight: 500;
193+
width: 100%;
194+
text-align: center;
195+
}
196+
197+
.paginationContainer {
198+
/* background-color: red; */
199+
display: flex;
200+
justify-content: center;
201+
align-items: center;
202+
/* margin-top: 100px; */
203+
}
204+
.arrowButton {
205+
border: none;
206+
background-color: transparent;
207+
height: 40px;
208+
width: 40px;
209+
display: flex;
210+
align-items: center;
211+
justify-self: center;
212+
}
213+
.page {
214+
color: #8c919b;
215+
border: none;
216+
background-color: transparent;
217+
font-size: 0.85rem;
218+
height: 40px;
219+
width: 40px;
220+
/* background-color: blue; */
221+
border-radius: 6px;
222+
margin: 3px;
223+
}
224+
.activePage {
225+
border: none;
226+
background-color: transparent;
227+
background-color: #2a2c2f;
228+
color: #ffffff;
229+
border-radius: 6px;
230+
font-size: 0.85rem;
231+
height: 40px;
232+
width: 40px;
233+
}

‎sw-security/app/css/default.module.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020
height: 100%;
2121
}
2222
.inner {
23-
/* width: 60%; */
24-
width: 63.89rem;
23+
width: 60%;
24+
/* width: 63.89rem; */
2525
/* min-height: 100dvh; */
2626
/* background-color: green; */
2727
display: flex;

‎sw-security/app/root.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
2525
return (
2626
<html
2727
lang="en"
28-
style={{ margin: 0, padding: 0, height: "100vh", fontSize: "18px;" }}
28+
style={{ margin: 0, padding: 0, height: "100vh", fontSize: "18px" }}
2929
>
3030
<head>
3131
<meta charSet="utf-8" />

0 commit comments

Comments
 (0)