9일차 - 의뢰자 페이지 화면 구현 (목록, 글쓰기)

 

 

---

 

[ 의뢰자 목록 페이지 ]

▶ 변호사 매칭 홈페이지라 가벼운 느낌을 주면 안될 거 같아서 상단에 이미지로 배경을 주고 그 밑으로 서브 네비를 주어 헤더까지 스크롤을 올리지 않아도 이동할 수 있게 사용자 편의성을 추가

▶ 서브 네비에 현재 페이지가 어디인지 메인 색상을 사용하여 표시

▶ 글쓰기 버튼과 페이지 이동 버튼도 메인색상을 사용하여, 현재 페이지가 어디인지 표시

 

---

[ 의뢰자 글쓰기 페이지 ]

▶ 전체적으로 input을 사용하면 가로값과 높이값을 동일하게 사용하여 통일감을 주었다.

▶ 셀렉박스와 버튼들은 오른쪽으로 배치

▶ 동영상을 올릴 수 있는 페이지이기 때문에 type -> file 설정

---

 

BoardList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="../layout/header.jsp" %>

<div class="wrap">
    <!-- 상단 이미지 & 서브 페이지 이동 START -->
    <section class="sub--section">
        <div class="section--background" id="notice--background">
            <div class="inner--container">
                <sub class="eng">Client</sub>
                <h1 class="sub--title">의뢰자</h1>
            </div>
        </div>
        <div style="border-bottom: 1px solid #bababa;">
            <div class="inner--container">
                <ul class="sub--top--menu">
                    <li class="subtop--active"><a href="/board/boardList">의뢰자</a></li>
                    <li><a href="/aiounseling">AI 간편상담</a></li>
                    <li><a href="/lawyer/lawyers">변호사</a></li>
                    <li><a href="/notice/notice">공지사항</a></li>
                    <li><a href="/cs/cs">고객센터</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- 상단 이미지 & 서브 페이지 이동 END -->

    <div class="inner--container">
        <div class="sub--content">
            <h2 class="prih2">의뢰자</h2>
            <table class="table">
                <thead>
                <th>No</th>
                <th>제목</th>
                <th>작성자 ()추후 아이디로 변경)</th>
                <th>작성일</th>
                </thead>
                <tbody>
                <c:forEach items="${boards}" var="boards">
                    <tr>
                        <td class="notice--no">${boards.id}</td>
                        <td class="notice--con"><a href="<c:url value='/board/detail/${boards.id}' />">${boards.title}</a></td>
                        <td class="notice--name">${boards.userId}</td>
                        <td class="notice--date">${boards.createdAt}</td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <div class="btn btn--wrap">
                <div id="write--button">
                    <a href="/board/createBoard">글쓰기</a>
                </div>
            </div>
            <ul class="page--button btn">
                <li
                        class="page-item <c:if test='${currentPage == 1}'>disabled</c:if>">
                    <a class="page-link" href="/cs/cs?page=${currentPage - 1}">◀</a>
                </li>
                <c:forEach begin="1" end="${totalPages}" var="page">
                    <li class="<c:if test="${currentPage == page}">page--active</c:if>"><a
                            href="/cs/cs?page=${page}">${page}</a></li>
                </c:forEach>
                <li class="page-item <c:if test='${currentPage == totalPages}'>disabled</c:if>">
                    <a class="page-link" href="/cs/cs?page=${currentPage + 1}">▶</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<%@ include file="../layout/footer.jsp" %>