관리자 페이지 개발 및 UI 변경(Front-end) 내용을 소개한다.
- github: https://github.com/scribnote5/lab
- github commit: https://github.com/scribnote5/lab/commit/257c0769ed343c8de22156bdd103c1e739e8134f
소스 코드 변경 및 버그 수정 사항
- 벡엔드 mainPagePriority 유효성 검사 로직 버그 수정하였다.
- 최근 등록된 게시글을 사용자에게 알려주는 New Icon 알고리즘 로직을 변경하였다. 기존 2일을 기준으로 최근 등록된 게시글임을 표시하였다. 정확성을 높이기 위해 기준을 일(2일) 대신 시간(24시간)으로 변경하였다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<module-system-common/src/main/java/kr/ac/univ/util/NewIconCheck.java>
package kr.ac.univ.util;
import java.time.LocalDateTime;
import java.time.temporal.ChronoUnit;
public class NewIconCheck {
public static Boolean isNew(LocalDateTime pastLocalDateTime ) {
LocalDateTime currentTime = LocalDateTime.now();
// 현재 시간과 비교하여 2일 이내에는 newIcon 생성
long hours = 24;
boolean result;
if(ChronoUnit.HOURS.between(currentTime , pastLocalDateTime) >= -24 ) {
result = true;
} else {
result = false;
}
return result;
}
}
프로젝트에서 주로 사용하는 색상
- 프로젝트에서 주로 사용하는 색은 바탕에 black과 액션 효과에 red로 설정하였다. rgb는 다음과 같다.
- red color: rgb(158, 37, 41);
- black color: rgb(48, 48, 48);
Login page UI 변경
- Login page의 UI를 하단 출처를 참고하여 변경하였다.
출처: https://www.bootstrapdash.com/product/free-bootstrap-login/
Sidebar, Header, Footer UI 변경
- Sidebar, Header, Footer UI를 하단 출처를 참고하여 변경하였다.
- Logout 버튼 클릭시 confirm 창 출력
출처: https://startbootstrap.com/templates/simple-sidebar/
반응형 레이아웃 변경
- 기존 사용자에게 적합하지 않은 반응형 레이아웃을 최적화하였다.
CSS 변경 사항
- 자주 사용하는 값들은 변수를 사용하도록 변경하였다.
- 기존 px 크기 단위를 rem 크기 단위로 변경하였다.
- img 태그의 border와 마우스를 올려 놓는 경우 효과를 하단 출처를 참고하여 추가하였다.
출처: https://www.w3schools.com/css/css3_images.asp
Icon 사용
- Icon은 하단 출처를 참고하여 사용하였다.
- 해당 사이트에서 제공하는 아이콘은 무료로 색상과 크기를 임의로 변경하여 사용할 수 있다.
출처: https://feathericons.com/?query=arrow
https://iconscout.com/icon/n-character-alphabet-letter
Comments powered by Disqus.