사용자 페이지를 개발 내용을 소개한다.
- github: https://github.com/scribnote5/lab
- github commit - 1: https://github.com/scribnote5/lab/commit/1a1677035f96ca3ebdae8c80a0bbf6e6ceb14370
- github commit - 2: https://github.com/scribnote5/lab/commit/3772c90349b82819fbe61f64d520124edd996c95
소스 코드 변경 및 버그 수정 사항
Introduction 게시글은 Active Status 필드 값이 ‘ACTIVE’ 하나만 등록할 수 있다.
Introduction의 content에서 summernote 에디터를 제거하였다.
페이징 크기 변경: member에서 한 페이지에 출력되는 데이터의 개수를 12개로 변경하였다. 출처: https://catchdream.tistory.com/181
project 게시판에 projectStatus(current project, past project), start date, end date, research establishment 컬럼을 저장하도록 추가하였다.
Javascript에서 공백 문자가 들어가는 문자열(daeyoung song)의 validation이 실패하지 않도록 변경하였다.
Javascript에서 summernote로 입력한 내용을 innerHTML을 사용하여 HTML 태그가 입력되도록 하였는데, 이를 thymeleaf의 th:utext를 사용하는 것으로 변경하였다.
img-border class를 img-thumbnail로 변경하고 img-thumbnail:hover 한 경우 테두리 색상이 변경된다. 출처: https://www.w3schools.com/css/css3_images.asp
member social link의 img와 크기를 변경하였다.
album의 mainHashTag 필드를 추가하였고 해당 데이터를 저장한다.
모든 list 페이지의 Modified Date, Status 삭제하였다.
bootstrap.min.css 파일에서 .page-link, .page-link:hover, .page-item.active .page-link의 색상을 파란색 계열에서 웹 페이지의 디자인과 같게 빨간색 계열로 변경하였다.
module-app-web과 module-app-admin의 로그인 세션이 공유되는 문제를 해결하였다.
1
2
3
4
5
6
7
<application.yml>
server:
servlet:
session:
cookie:
name: module-app-admin
출처: https://yamea-guide.tistory.com/entry/%ED%86%B0%EC%BA%A3-%EC%84%9C%EB%B2%84-%EA%B0%99%EC%9D%80-IP%EB%8F%84%EB%A9%94%EC%9D%B8-%EB%8B%A4%EB%A5%B8-%ED%8F%AC%ED%8A%B8%EC%9D%BC%EB%95%8C-%EC%84%B8%EC%85%98-%EA%B3%B5%EC%9C%A0-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%ED%8A%95%EA%B9%80-%ED%98%84%EC%83%81
https://blog.voidmainvoid.net/40
사용자 페이지 개발
- 사용자 페이지는 bootstrapmade 사이트의 Vesperr 템플릿을 참고하여 개발하여 메인 페이지 및 하위 페이지들(Research Field, Member, Publication, Seminars, Notice Boards, Alumni Association, Album)을 개발하였다.
- 아직 디자인이 확정되지 않았기에 지속적으로 변경될 예정이다.
출처: https://bootstrapmade.com/demo/Vesperr/
참고하려 했던 템플릿
레이아웃
출처: https://www.w3schools.com/bootstrap/bootstrap_templates.asp
Main
출처: https://www.w3schools.com/bootstrap4/
배경색은 light grey로, 템플릿은 card로 사용하기
Header
- Drop down 출처: https://kybarg.github.io/bootstrap-dropdown-hover/
Comments powered by Disqus.