2. UI

 

 

우리 조는 백엔드, 프론트엔드를 따로 담당하는 사람 없이 각자 맡은 파트와 관련된 것은 모두 본인이 직접 해보는 방향으로 가기로 했다. 학원에서 진행하는 프로젝트가 1개였던 것이 가장 큰 이유였을 것이다. 따라서 생각지도 못한 프론트엔드 부분에서 많은 시간을 잡아먹었던 것 같다. 

 

---

 

초기 디자인

 

 

초기에는 이런 식으로 쪽지함은 알림함에 가까운 형태를 띄우고 있었으며 클릭 시 모달이 나타나 내용을 읽을 수 있고, 그 모달에 달린 버튼을 누르면 답장 창 또한 모달로 나오는 형식으로 되어 있었다. 이 방법으로 화면을 구성해보니 불편한 점이 있었는데, 

 

1. 작성 중 모달에서 벗어난 곳을 실수로 클릭하면 창이 닫혔다.

 

2. 모달 창을 이동할 방법이 없으니 상대가 내게 어떤 내용의 쪽지를 보냈는지 편하게 확인할 길이 없다.

 

3. 알림창의 형식으로만 존재하는 바람에 보낸 쪽지함이 없어 본인이 어떤 쪽지를 보냈는지 확인할 길이 없다.

 

였다.

 

위의 내용을 편안하게 바꾸자는 고민과 시도 끝에 나온 디자인은 이러하다.

 

---

 

최종 디자인

 

 

1. 쪽지 목록을 테이블 형식으로 바꿔 누가, 어떤 내용을, 언제 보냈는지 한 눈에 보이도록 하며 그에 따른 삭제 버튼 또한 만들었다.

 

2. 쪽지의 내용을 클릭하면 오른쪽에 있는 칸에 그 전체 내용이 닉네임과 함께 보이며 답을 보낼 수 있는, 숨어 있던 답장 버튼이 나오게 된다. 물론 보낸 쪽지함에서는 내용을 눌러도 답장 버튼이 나오지 않는다.

 

3. 답장 버튼을 클릭하면 새 창이 열려 답장을 하게 되는데, 이는 자신이 어떤 내용에 답장을 하려 했는지 간편하게 확인할 수 있도록 도와준다.

 

4. 또한 검색 기능이 없는 대신 쪽지를 20개씩 나누어 페이지 별로 볼 수 있게 했다.

 

5. 최초의 쪽지는 다른 유저의 '마이 페이지'에서 보내게 된다. 역시 새 창이 뜨는 방식이다.

 

 

message.jsp

<div class="warp">
    <%@ include file="../../fix/header.jsp" %>
    
    <!-- 삭제 모달 -->
    <div class="modal fade" id="exampleModa2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">
       <div class="modal-content">
         <div class="modal-header">
           <h1 class="modal-title fs-5" id="exampleModalLabe2">알림</h1>
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body">쪽지가 삭제됩니다.</div>
         <div class="modal-footer">
           <button type="button" class="btn btn-primary"  data-toggle="modal" id="removeBtn">Yes</button>
           <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
         </div>
       </div>
     </div>
   </div>

      <%@ include file="../../fix/mnb.jsp" %>
        
      <div class="sec00">

        <button type="button" id="btn-recv">받은 쪽지</button>
        <button type="button" id="btn-send">보낸 쪽지</button>

      </div>

      <div class="sec01">
        
        <div class="sec-left">
        	
        	<div class="left-top">
	            <table>
	                <tr>
	                    <th class="msg-img">프로필</th>
	                    <th class="msg-sort" style="width: 188px; padding-right: 20px;">이름</th>
	                    <th class="msg-content">내용</th>
	                    <th class="msg-time">시간</th>
	                    <th class="msg-del">삭제</th>
	                </tr>
	            </table>
            </div>
            <div class="left-bottom">

		            <table>
						<c:if test="${totalCnt == null || totalCnt == 0}">
							<div style="display: flex; margin-top: 20px; justify-content: center; color: #8f8f8f;">보관된 쪽지가 없습니다.</div>
						</c:if>
			            <c:forEach var="messageDTO" items="${list }">
			            <!-- 폼태그를 사용하면 아이디를 쓰든 클래스를 사용하든 맨 위에 있는 애만 작동된다 그러니 버튼 누를 때 폼태그 생성 -->
							<tr class="title-line" style="font-weight: 200">
								<td class="msg-no" style="display: none; ">${messageDTO.message_no}</td>
								<input name="message_no" type="hidden" value="${messageDTO.message_no}" />
								<td class="msg-img">
									<a href="javascript:goProfile('${(messageDTO.send_user_no != sessionScope.user_no) ? messageDTO.send_user_no : messageDTO.receive_user_no}', '${messageDTO.user_nicknm}')">
										<img src="${messageDTO.image }" class="user-image" alt="프로필사진" />
									</a>
								</td>
								<td class="msg-nicknm">${messageDTO.user_nicknm }</td>
								<td class="msg-sort" style="display: none; ">${(messageDTO.send_user_no != sessionScope.user_no) ? messageDTO.send_user_no : messageDTO.receive_user_no}</td>
								<c:if test="${messageDTO.read_yn == true }">
									<td class="msg-content" style="cursor: pointer; color: rgb(138, 138, 138);"><c:out value="${messageDTO.content }"></c:out></td>
								</c:if>
								<c:if test="${messageDTO.read_yn == false }">
									<td class="msg-content" style="cursor: pointer;"><c:out value="${messageDTO.content }"></c:out></td>
								</c:if>
								<td class="msg-time"><fmt:formatDate value="${messageDTO.send_date}" pattern="yyyy-MM-dd HH:mm" type="date" /></td>
								<td class="msg-del"><button class="delBtn" name="deleteBtn" style="border: none; color: red;" id="del" data-bs-toggle="modal" data-bs-target="#exampleModa2"><i class="fas fa-times"></i></button></td>
							</tr>			            
			            </c:forEach>			           
					</table>
				</div>
			<br />
			<div class="paging-container">
				<div class="paging">
						<c:if test="${totalCnt != null || totalCnt != 0 }">
							<c:if test="${mpr.showPrev }">
								<a class="page" href="<c:url value="${mpr.msc.getQueryString(mpr.beginPage-1) }" />">&lt;</a>
							</c:if>
							<c:forEach var="i" begin="${mpr.beginPage }" end="${mpr.endPage }">
								<c:choose>
									<c:when test="${mpr.msc.page == i }">
										<a class="page selpage" href="<c:url value="${mpr.msc.getQueryString(i) }" />">${i }</a>
									</c:when>
									<c:otherwise>
										<a class="page" href="<c:url value="${mpr.msc.getQueryString(i) }" />">${i }</a>
									</c:otherwise>
								</c:choose>
							</c:forEach>
							<c:if test="${mpr.showNext }">
								<a class="page" href="<c:url value="${mpr.msc.getQueryString(mpr.endPage+1) }" />">&gt;</a>
							</c:if>
						</c:if>
				</div>
			</div>
        </div>

        <div class="sec-right">
        	<input name="msgno" type="hidden" value="" />
        	<input name="sendno" type="hidden" value="${messageDTO.send_user_no}" />
			<div class="msg-nick" id="msgNick">${messageDTO.user_nicknm }</div>
	        <div class="msg-view-content" style="white-space: pre-wrap;">${messageDTO.content }</div>
	        <c:if test="${messageDTO.send_user_no != sessionScope.user_no }">
	        	<button type="button" id="msg-write" class="msg-write-btn" >답장</button>
        	</c:if>
        </div>

      </div>
	  
    </div>