Project(4)-2. 메인페이지

  페이지 구성

이번에는 부트스트랩을 사용하지 않고 여태 배웠던 내용들을 토대로 구성하였다.

 

1. 슬라이더슬라이더는 총 3개의 사진으로 구성했다. 좌우 버튼 없이 하단의 라디오버튼으로 구성하였으며, 'vh'와 'vw' 단위값을 이용해 모니터 너비와 관계없이 모니터 대비 슬라이더의 크기를 일정하게 유지할 수 있도록 해주었다.

 

초반에는 직접 픽셀값을 주어 다른 모니터에서 봤을 때 슬라이더 속 이미지가 깨지는 등의 어려움이 존재했으나 팀원의 도움으로 해결할 수 있었다.

 

각 슬라이더 이미지는 미리캔버스에서 직접 만들어보았다.

 

2. 목록 테이블

목록 테이블을 구성할 때 제일 위에 있을 목록의 제목들은 드래그를 했을 때 계속해서 고정돼 나타나게끔 해주었다. 구글링을 통해 고정시키는 방법을 구성해보았지만 잘 되지 않았고, 목록의 제목들과 하단의 내용들을 각자의 <table> 태그에 담아 분리시켜주었다.

 

<th> 태그의 width값은 50%로 잡아 글자 수와 상관없이 절반의 공간만을 차지할 수 있게끔 했다.

 

3. Header(헤더)와 Footer(푸터)

먼저 헤더의 경우 강사님이 주신 예제에서 로고의 위치와 사용자 정보 공간 등을 추가로 구성했으며 푸터는 부트스트랩에 있던 코드를 가져와 다듬었다.

 

메인페이지 상단 (헤더와 슬라이더)

 

메인페이지 하단 (푸터와 과정 목록)

 

학원 과정 목록 위에 있는 버튼 중 과정 등록 버튼은 관리자 계정으로 로그인했을 경우에만 나타난다.

  기능

1. 로그인된 사용자 이름 가져오기

 

${session.member.getMid()}

세션에 담긴 현재 로그인한 사용자의 정보 중 mid만 가져와 헤더 상단에 명시해주었다.

 

2. 관리자 전용 버튼

 

<th:block th:if="${session.member.getMgrade()} == '0'">
    <button class="cwrtBtn" onclick="location.href='courseFrm'">과정 등록</button>
</th:block>
<th:block th:unless="${session.member.getMgrade()} == '0'">
    <button class="cwrtBtn" onclick="location.href='courseFrm'" style="display: none">과정 등록</button>
</th:block>

만약 현재 로그인한 사용자의 grade가 '0'이라면 '과정 등록' 버튼을 보여주고, 그렇지 않으면 'display: none' 스타일 속성을 이용해 보이지 않도록 했다.

 

3. 등록한 과정 목록화하기

- service.java

public ModelAndView getCourseList() {
    log.info("getCourseList()");
    ModelAndView mv = new ModelAndView();
    
    List<Course> cList = new ArrayList<>();
    Iterable<Course> cIter = cRepo.findAll();
    
    for (Course c : cIter) {
        cList.add(c);
    }

    mv.addObject("cList", cList);
    mv.setViewName("main");

    return mv;
}

Course DB를 담을 cList 변수를 만들고, cIter에 DB에 저장된 모든 목록을 가져온다.

for문을 이용해 가져온 cIter를 cList에 담고, cList를 mv에 넘겨준다.