🎨 Palette: 키보드(Enter)를 이용한 프로젝트 생성 제출 지원

.Jules/palette.md

@@ -56,3 +56,6 @@
 ## 2024-07-14 - Native Keyboard Submission with Forms for Modals
 **Learning:** Modals designed with plain `<div>` elements as wrappers instead of `<form>` lack native keyboard submission support, forcing users to switch from keyboard to mouse to confirm actions like "Save".
 **Action:** When designing modals or popups containing inputs, always use a `<form>` element to wrap the content, handle the `onSubmit` event (calling `e.preventDefault()`), and set the primary confirmation button to `type="submit"` to enable seamless Enter-key submission for keyboard users.
+## 2025-02-28 - Native form submission for "New Project"
+**Learning:** In React SPA patterns, interactive input groups (like creating a new project) are often built with simple `<div>` and `<button>` wrappers. By replacing these with `<form>` elements, `<button type="submit">`, and `onSubmit={(e) => e.preventDefault()}`, we effortlessly unlock native keyboard accessibility (submitting by pressing "Enter") without needing complex event listeners.
+**Action:** Always wrap data submission input/button groups in a `<form>` element instead of a plain `<div>`, and set the primary action button to `type="submit"`.

frontend/src/App.tsx

@@ -1075,15 +1075,20 @@ export default function App() {
 
         <div className="field">
           <label htmlFor="project-name">New project</label>
-          <div className="row">
+          <form
+            className="row"
+            onSubmit={(e) => {
+              e.preventDefault();
+              onCreateProject();
+            }}
+          >
             <input
               id="project-name"
               value={projectName}
               onChange={(e) => setProjectName(e.target.value)}
             />
             <button
-              type="button"
-              onClick={onCreateProject}
+              type="submit"
               disabled={!projectName.trim() || isCreatingProject}
               aria-busy={isCreatingProject}
               aria-describedby={
@@ -1092,7 +1097,7 @@ export default function App() {
             >
               {isCreatingProject ? "Creating…" : "Create"}
             </button>
-          </div>
+          </form>
           {createProjectHint ? (
             <span id="create-project-hint" className="field-hint">
               {createProjectHint}
@@ -1304,20 +1309,25 @@ export default function App() {
                 <h1 id="projects-title">프로젝트</h1>
                 <p>프로젝트를 선택하면 해당 다이어그램 목록을 볼 수 있습니다.</p>
               </div>
-              <div className="inlineCreate">
+              <form
+                className="inlineCreate"
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  onCreateProject();
+                }}
+              >
                 <input
                   aria-label="새 프로젝트 이름"
                   value={projectName}
                   onChange={(event) => setProjectName(event.currentTarget.value)}
                 />
                 <button
-                  type="button"
-                  onClick={onCreateProject}
+                  type="submit"
                   disabled={!projectName.trim() || isCreatingProject}
                 >
                   {isCreatingProject ? "생성 중" : "새 프로젝트"}
                 </button>
-              </div>
+              </form>
             </div>
             <div className="dataTable" role="table" aria-label="프로젝트 목록">
               <div className="dataTable__row dataTable__row--projects dataTable__row--head" role="row">