feat(redesign): 빈상태 파편 2종 + 목록 페이지 include

fragments/posts-empty.jspf·recruit-empty.jspf 신설(.empty-state).
CTA href 실제 라우트로 교정(/posts/new·/recruit/new 단수).
posts-list·recruit-list 빈 분기에 include. recruit-list는 서버
초기 빈상태=파편 / 클라필터 0건=기존 #recruit-empty div 역할 분리,
필터 JS 무수정.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
이정수 2026-06-30 16:13:52 +09:00
parent 0390da6ae8
commit 45fdfb640e
4 changed files with 46 additions and 2 deletions

View File

@ -0,0 +1,20 @@
<%-- posts-empty.jspf — 포스팅 목록 빈 상태 파편
사용: posts-list.jsp의 posts.isEmpty() 분기에서 include
필요: bibimbap.css (.empty-state 클래스)
--%>
<div class="empty-state">
<svg width="84" height="84" viewBox="0 0 84 84" fill="none" aria-hidden="true">
<rect x="20" y="13" width="44" height="57" rx="9" fill="#FBEFD6" stroke="#D4A853" stroke-width="2.5"/>
<line x1="30" y1="30" x2="54" y2="30" stroke="#D4A853" stroke-width="2.5" stroke-linecap="round"/>
<line x1="30" y1="40" x2="54" y2="40" stroke="#E2C589" stroke-width="2.5" stroke-linecap="round"/>
<line x1="30" y1="50" x2="45" y2="50" stroke="#E2C589" stroke-width="2.5" stroke-linecap="round"/>
<circle cx="59" cy="57" r="13" fill="#D4A853"/>
<line x1="59" y1="51" x2="59" y2="63" stroke="#fff" stroke-width="2.6" stroke-linecap="round"/>
<line x1="53" y1="57" x2="65" y2="57" stroke="#fff" stroke-width="2.6" stroke-linecap="round"/>
</svg>
<h3>아직 등록된 포스트가 없어요</h3>
<p>개발 일지, 팁, 질문 무엇이든 좋아요. 커뮤니티의 첫 글을 남겨보세요.</p>
<div class="empty-actions">
<a class="btn btn-primary" href="${pageContext.request.contextPath}/posts/new"> 글쓰기</a>
</div>
</div>

View File

@ -0,0 +1,21 @@
<%-- recruit-empty.jspf — 팀원 모집 목록 빈 상태 파편
사용: recruit-list.jsp의 recruitPosts.isEmpty() 분기에서 include
필요: bibimbap.css (.empty-state 클래스)
--%>
<div class="empty-state">
<svg width="92" height="84" viewBox="0 0 92 84" fill="none" aria-hidden="true">
<circle cx="34" cy="29" r="11" fill="#FBEFD6" stroke="#D4A853" stroke-width="2.5"/>
<path d="M16 66c0-10 8-18 18-18s18 8 18 18" fill="#FBEFD6" stroke="#D4A853" stroke-width="2.5" stroke-linecap="round"/>
<circle cx="62" cy="33" r="8.5" fill="#fff" stroke="#E2C589" stroke-width="2.5"/>
<path d="M49 63c0-8 6-14 13-14s13 6 13 14" fill="none" stroke="#E2C589" stroke-width="2.5" stroke-linecap="round"/>
<circle cx="74" cy="20" r="11" fill="#D4A853"/>
<line x1="74" y1="15" x2="74" y2="25" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/>
<line x1="69" y1="20" x2="79" y2="20" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/>
</svg>
<h3>아직 올라온 모집글이 없어요</h3>
<p>함께 만들 기획·아트·프로그래머를 찾고 있다면, 첫 모집글을 올려 팀을 시작해 보세요.</p>
<div class="empty-actions">
<a class="btn btn-primary" href="${pageContext.request.contextPath}/recruit/new"> 모집글 작성</a>
<a class="btn btn-ghost" href="${pageContext.request.contextPath}/recruit">필터 초기화</a>
</div>
</div>

View File

@ -240,7 +240,7 @@
</nav> </nav>
<% if (posts.isEmpty()) { %> <% if (posts.isEmpty()) { %>
<div class="posts-empty">아직 등록된 포스트가 없습니다.</div> <%@ include file="fragments/posts-empty.jspf" %>
<% } else { %> <% } else { %>
<section class="posts-grid" aria-label="포스트 목록"> <section class="posts-grid" aria-label="포스트 목록">
<% for (PostData post : posts) { %> <% for (PostData post : posts) { %>

View File

@ -315,7 +315,10 @@
} }
%> %>
</section> </section>
<div class="recruit-empty <%= recruitPosts.isEmpty() ? "is-visible" : "" %>" id="recruit-empty">아직 올라온 팀원 모집글이 없습니다.</div> <% if (recruitPosts.isEmpty()) { %>
<%@ include file="fragments/recruit-empty.jspf" %>
<% } %>
<div class="recruit-empty" id="recruit-empty">아직 올라온 팀원 모집글이 없습니다.</div>
</main> </main>
<jsp:include page="/WEB-INF/views/footer.jsp"/> <jsp:include page="/WEB-INF/views/footer.jsp"/>
<script> <script>