pandoli365
/
bibimbap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(redesign): 홈 히어로/정렬칩/게임 그리드 비주얼 레이어 

index.jsp에 히어로 섹션·sort-bar 칩·game-grid/game-card 외형 이식.
모델 EL은 기존 scriptlet(getName/getCreator/getThumbnailUrl) 보존,
디자인 title/author·/games/new 미채택. 정렬칩은 SearchController가
바인딩하는 sort 파라미터(latest/likes/views) 사용. 기존 head·검색폼·
include 전부 보존.

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 45fdfb640e
commit 5f0652edda
1 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/main/webapp/WEB-INF/views/index.jsp
View File

@ -116,6 +116,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<jsp:include page="/WEB-INF/views/theme-init.jsp"/> <jsp:include page="/WEB-INF/views/theme-init.jsp"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bibimbap.css">
<title>bibimbap</title> <title>bibimbap</title>
<style> <style>
html { html {
@ -762,7 +763,11 @@
</head> </head>
<body> <body>
<jsp:include page="/WEB-INF/views/header.jsp"/> <jsp:include page="/WEB-INF/views/header.jsp"/>
<main class="page-main"> <main class="page-main page">
<%-- 히어로: 서비스 소개 --%>
<p class="section-eyebrow">INDIE GAME HUB</p>
<h1 class="section-title" style="font-size:1.875rem">직접 만든 인디 게임을 올리고, 함께 즐기세요</h1>
<p class="section-desc">유니티 개발자들이 만든 웹게임을 플레이하고 리뷰를 남길 수 있어요.</p>
<section class="search-section" aria-label="게임·제작자 검색"> <section class="search-section" aria-label="게임·제작자 검색">
<div class="home-toolbar"> <div class="home-toolbar">
<form class="search-form" role="search" action="<%= ctx %>/" method="get"> <form class="search-form" role="search" action="<%= ctx %>/" method="get">
@ -849,6 +854,13 @@
</div> </div>
</section> </section>
<%-- 정렬 칩 --%>
<div class="sort-bar">
<span class="sort-label">정렬</span>
<a class="chip <%= (searchSort == null || searchSort.isBlank() || "latest".equals(searchSort)) ? "chip--on" : "" %>" href="<%= ctx %>/?sort=latest">최신순</a>
<a class="chip <%= "likes".equals(searchSort) ? "chip--on" : "" %>" href="<%= ctx %>/?sort=likes">좋아요순</a>
<a class="chip <%= "views".equals(searchSort) ? "chip--on" : "" %>" href="<%= ctx %>/?sort=views">방문순</a>
</div>
<% if (showJamBanner) { <% if (showJamBanner) {
String jamTitle = HtmlUtils.htmlEscape(activeJam.getTitle() == null || activeJam.getTitle().isBlank() ? "게임잼" : activeJam.getTitle()); String jamTitle = HtmlUtils.htmlEscape(activeJam.getTitle() == null || activeJam.getTitle().isBlank() ? "게임잼" : activeJam.getTitle());
String jamSlugParam = java.net.URLEncoder.encode(activeJam.getSlug(), java.nio.charset.StandardCharsets.UTF_8); String jamSlugParam = java.net.URLEncoder.encode(activeJam.getSlug(), java.nio.charset.StandardCharsets.UTF_8);
@ -866,7 +878,7 @@
</section> </section>
<% } %> <% } %>
<section class="card-grid" aria-label="추천 목록"> <section class="card-grid game-grid" aria-label="추천 목록">
<% if (games.isEmpty()) { %> <% if (games.isEmpty()) { %>
<% if (searching) { %> <% if (searching) { %>
<div class="home-empty">"<%= escapedSearchQuery %>"에 대한 검색 결과가 없습니다.</div> <div class="home-empty">"<%= escapedSearchQuery %>"에 대한 검색 결과가 없습니다.</div>
@ -892,7 +904,7 @@
thumbUrl = HtmlUtils.htmlEscape(thumbUrl); thumbUrl = HtmlUtils.htmlEscape(thumbUrl);
} }
%> %>
<a class="card" href="<%= ctx %>/game/<%= game.getId() %>" aria-labelledby="<%= titleId %>"> <a class="card game-card" href="<%= ctx %>/game/<%= game.getId() %>" aria-labelledby="<%= titleId %>">
<div class="card__media"> <div class="card__media">
<span class="card__index" aria-hidden="true">#<%= game.getId() %></span> <span class="card__index" aria-hidden="true">#<%= game.getId() %></span>
<% if (hasImage) { %> <% if (hasImage) { %>