From b4a3cfa975c3d4224d3160c1e3c5cd760c127012 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Fri, 17 Jul 2026 02:10:02 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=ED=82=A4=EB=B3=B4?=
 =?UTF-8?q?=EB=93=9C(Enter)=EB=A5=BC=20=EC=9D=B4=EC=9A=A9=ED=95=9C=20?=
 =?UTF-8?q?=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8=20=EC=83=9D=EC=84=B1=20?=
 =?UTF-8?q?=EC=A0=9C=EC=B6=9C=20=EC=A7=80=EC=9B=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

App.tsx에 있는 두 곳의 '새 프로젝트' 생성 폼에서 <div>와 <button type="button">을 <form>과 <button type="submit">으로 변경하여 Enter 키를 통해 프로젝트 생성을 제출할 수 있도록 하였습니다.
---
 .Jules/palette.md    |  3 +++
 frontend/src/App.tsx | 26 ++++++++++++++++++--------
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 7577a1ca7..2c3b2d590 100644
--- a/.Jules/palette.md
+++ b/.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"`.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4d0dc2585..a869e9da5 100644
--- a/frontend/src/App.tsx
+++ b/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">