DOM 이벤트와 검색·상세 흐름

앞 모듈의 데이터 함수를 실제 검색·필터·상세 화면에 연결합니다.

진도 0%

레슨

m03 미션 solution을 복사한 starter에서 데이터 함수와 기존 반응형 소개 문서를 유지하고 results.html에 DOM 탐색 흐름을 확장합니다.

starter는 m03 미션 solution의 문서·CSS·데이터·테스트를 포함합니다. 기존 index.html의 required GET 폼을 보존합니다.
results.html의 확장 폼은 빈 검색어로 전체를 표시합니다. 지역 변경은 submit 시 적용하고 Enter와 검색 버튼이 같은 경로를 사용합니다.
assets/dom.js의 renderSummary와 assets/results.js의 submit·상세 navigate TODO를 완성합니다. 테스트와 데이터 함수를 바꾸지 않습니다.
제목은 textContent로 넣고 목록의 클릭 리스너는 한 번만 등록합니다. URL의 q/region/id와 history state의 returnId를 구분합니다.
목록 링크·브라우저 뒤로/앞으로에서 조건과 포커스를 복원합니다. 직접 상세 링크·없는 id에는 목록 복귀를 제공합니다.
외부 패키지·자격증명·실제 API는 사용하지 않습니다. 결과 HTML과 CSS 관찰은 별도로 기록합니다.

npm ci 후 npm test: 이전 HTML 18건·CSS 계약 20건·데이터 15건과 DOM 모델 20건, 실패 0개. starter는 이전 검사 통과·DOM 미구현 검사 실패입니다.
DOM 모델에서 검색→지역 필터→중첩 카드 클릭→상세→뒤로/앞으로→목록 링크·선택 포커스 복원을 확인합니다.
동적 카드에도 위임이 동작하고 재초기화로 리스너가 늘지 않습니다. 수정 키 클릭은 링크 기본 동작을 유지합니다.
0건에서 이전 카드를 제거하고 수 안내·초기화 행동을 제공합니다. 초기화는 빈 검색·전체 지역·URL·입력 포커스를 함께 갱신합니다.
npm run test:browser는 실제 Chrome/Chromium과 임시 서버로 네이티브 DOM 흐름을 검사합니다. 작성 샌드박스의 서버 바인딩 제한으로 이 실행은 미확인입니다. LAYOUT.md의 실제 Tab·320px·200% 확대 관찰도 별도로 제출합니다.

npm test

모범 답안