From 239d33c2183c0f8921f879e5cbaf10ace01fb0e9 Mon Sep 17 00:00:00 2001
From: art <artbiit@naver.com>
Date: Tue, 30 Jun 2026 16:26:59 +0900
Subject: [PATCH] =?UTF-8?q?feat(redesign):=20=EB=AA=A8=EC=A7=91=20?=
 =?UTF-8?q?=EC=9E=91=EC=84=B1=20=ED=95=84=EC=88=98=ED=91=9C=EC=8B=9C/?=
 =?UTF-8?q?=EA=B8=80=EC=9E=90=EC=88=98/sticky=20=EB=AF=B8=EB=A6=AC?=
 =?UTF-8?q?=EB=B3=B4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

recruit-form.jsp에 .req 필수표시(4곳), summary 글자수 카운터
(.count/#sc, 독립 oninput), .preview-card sticky 외형 추가.
제출은 기존 AJAX(fetch /recruit/new)+BibimbapCsrf.headers·필드명
10종(projectName 등) 보존, render() 미리보기 IIFE 무손실.
디자인 name=title·/recruit·CSRF누락 form 미채택.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../webapp/WEB-INF/views/recruit-form.jsp     | 31 +++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/main/webapp/WEB-INF/views/recruit-form.jsp b/src/main/webapp/WEB-INF/views/recruit-form.jsp
index 1b824d9..b71acb4 100644
--- a/src/main/webapp/WEB-INF/views/recruit-form.jsp
+++ b/src/main/webapp/WEB-INF/views/recruit-form.jsp
@@ -172,6 +172,22 @@
         background: var(--accent);
         color: #1a1a1a;
       }
+      .req {
+        color: var(--accent);
+        font-weight: 900;
+        margin-left: 0.15em;
+      }
+      .field-head {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+      }
+      .count {
+        font-size: 0.75rem;
+        color: var(--text-muted);
+        font-weight: 400;
+        white-space: nowrap;
+      }
       .preview-card {
         position: sticky;
         top: 5rem;
@@ -256,7 +272,7 @@
                 <form id="recruit-form" action="<%= ctx %>/recruit/new" method="post" novalidate>
                     <div class="form-grid">
                         <div class="field">
-                            <label for="project-name">프로젝트명</label>
+                            <label for="project-name">프로젝트명 <span class="req">*</span></label>
                             <input id="project-name" name="projectName" type="text" maxlength="80" placeholder="예: 달빛 정거장" required>
                         </div>
                         <div class="field">
@@ -264,11 +280,14 @@
                             <input id="genre" name="genre" type="text" maxlength="60" placeholder="예: 2D 어드벤처">
                         </div>
                         <div class="field field--full">
-                            <label for="summary">한 줄 소개</label>
-                            <input id="summary" name="summary" type="text" maxlength="120" placeholder="프로젝트를 한 문장으로 소개해 주세요." required>
+                            <div class="field-head">
+                                <label for="summary">한 줄 소개 <span class="req">*</span></label><span class="count"><span id="sc">0</span> / 120</span>
+                            </div>
+                            <input id="summary" name="summary" type="text" maxlength="120" placeholder="프로젝트를 한 문장으로 소개해 주세요." required
+                                oninput="document.getElementById('sc').textContent=this.value.length">
                         </div>
                         <div class="field">
-                            <label for="role">모집 역할</label>
+                            <label for="role">모집 역할 <span class="req">*</span></label>
                             <select id="role" name="role">
                                 <option selected>기획</option>
                                 <option>아트</option>
@@ -302,7 +321,7 @@
                             <input id="team" name="team" type="text" maxlength="80" placeholder="예: 기획 1명, 프로그래머 1명">
                         </div>
                         <div class="field">
-                            <label for="contact">연락 방법</label>
+                            <label for="contact">연락 방법 <span class="req">*</span></label>
                             <input id="contact" name="contact" type="text" maxlength="100" placeholder="이메일, 디스코드, 오픈채팅 등" required>
                         </div>
                         <div class="field field--full">
@@ -312,7 +331,7 @@
                     </div>
                     <div class="form-actions">
                         <a class="form-button" href="<%= ctx %>/recruit">취소</a>
-                        <button class="form-button form-button--primary" type="submit">미리보기 완료</button>
+                        <button class="form-button form-button--primary" type="submit">모집글 등록</button>
                     </div>
                 </form>
             </section>