🎨 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.
+## 2024-07-18 - Native Keyboard Submission for Inline Forms
+**Learning:** Refactoring interactive input groups from `<div>` wrappers to `<form>` tags is a crucial accessibility fix that enables native keyboard submission (e.g., submitting a project name via Enter key). However, doing so requires updating associated React Testing Library queries to trigger `fireEvent.submit(form)` instead of just `fireEvent.click(button)` to properly verify the form submission lifecycle.
+**Action:** When migrating inline creation inputs to `<form>` elements, ensure `onSubmit` prevents default (`e.preventDefault()`) and that test suites are updated to fire submit events on the form node, capturing native keyboard workflows.

CHANGELOG.md

@@ -7,3 +7,7 @@
 - [FE] `autoInfer.ts`에 대한 단위 테스트 및 UI 컴포넌트 단위 테스트를 추가하여 100% 테스트 커버리지를 유지합니다.
 - [FE] ⬇️ **DBML Export**: ERD 다이어그램을 DBML (Database Markup Language) 형식으로 내보낼 수 있는 기능을 추가했습니다. 상단의 DBML 버튼을 클릭하여 다운로드할 수 있습니다.
 - [FE] 📚 **Data Dictionary Export**: ERD 테이블/컬럼 메타데이터를 CSV 및 Markdown으로 내보내며, CSV formula injection과 Markdown 렌더링 escape를 적용했습니다.
+
+## [Unreleased]
+### Added
+- 키보드 네비게이션 개선: 프로젝트 생성 시 엔터 키 입력으로 제출할 수 있도록 `form` 요소 적용 (App.tsx).

frontend/src/App.coverage.test.tsx

@@ -344,11 +344,19 @@ describe('App orchestration coverage', () => {
 
   it('creates projects, validates and creates connections, and starts a snapshot', async () => {
     await renderReadyApp()
+
+    // Switch to projects view to test the new inlineCreate form submission
+    fireEvent.click(screen.getByRole('button', { name: '프로젝트' }))
+    fireEvent.change(screen.getByLabelText('새 프로젝트 이름'), { target: { value: '  New  ' } })
+    fireEvent.submit(screen.getByLabelText('새 프로젝트 이름').closest('form')!)
+    await waitFor(() => expect(api.createProject).toHaveBeenCalledWith('New'))
+
+    // Switch back to editor to test the rest
     fireEvent.click(screen.getByRole('button', { name: '편집기' }))
 
-    fireEvent.change(screen.getByLabelText('New project'), { target: { value: '  New  ' } })
+    fireEvent.change(screen.getByLabelText('New project'), { target: { value: '  Another New  ' } })
     fireEvent.click(screen.getByRole('button', { name: 'Create' }))
-    await waitFor(() => expect(api.createProject).toHaveBeenCalledWith('New'))
+    await waitFor(() => expect(api.createProject).toHaveBeenCalledWith('Another New'))
 
     const dsn = screen.getByLabelText('Connection DSN')
     fireEvent.change(dsn, { target: { value: 'postgresql://[' } })

frontend/src/App.tsx

@@ -1304,20 +1304,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">