Scene A3 · 기능 추가

목표

Vibe 세션에서 기존 앱에 새로운 기능을 추가합니다. 대화를 통해 점진적으로 기능을 확장하는 패턴을 체험합니다.

사전 준비

• Scene A2 완료 (디자인이 개선된 To-Do 앱)

해볼 것

1단계: 완료 퍼센트 기능 추가

완료 퍼센트를 표시하는 기능도 추가해주세요.

2단계: 결과 확인

1. 브라우저에서 새로고침
2. 할 일을 여러 개 추가
3. 일부를 완료 표시
4. 완료 퍼센트(진행률 바 또는 텍스트)가 정상 동작하는지 확인

3단계: 데이터 영속성 추가 (선택)

#file:index.html #file:style.css
기존 HTML과 CSS에 맞는 JavaScript 코드를 작성해주세요.
기능:
- 할 일 추가 기능
- 할 일 삭제 기능
- 완료 상태 토글
- 로컬 스토리지에 데이터 저장/불러오기
파일명: script.js

💡 #file 입력 후 Tab/Enter를 누르면 파일 검색창이 나타납니다.

기대 결과

• 완료율(퍼센트) 표시 기능이 추가됨
• 컨텍스트 프로바이더(#file)를 활용한 파일 참조 실습
• 로컬 스토리지 연동으로 새로고침 후에도 데이터 유지

0 / 4항목을 클릭해 체크 · 진행 상태는 이 브라우저에 저장됩니다

• 완료 퍼센트 표시 기능 동작필수
• `#file` 컨텍스트 프로바이더 활용필수
• 로컬 스토리지 저장/불러오기 동작선택
• 브라우저 새로고침 후 데이터 유지 확인선택

🚨 문제 해결

• 퍼센트가 0%에서 변하지 않음: 완료 상태 변경 이벤트와 퍼센트 계산 로직이 연결되었는지 확인. "퍼센트가 갱신되지 않습니다. 완료 체크 시 자동으로 업데이트되도록 수정해주세요"라고 요청.
• #file이 동작하지 않음: # 입력 후 파일명을 직접 타이핑. 자동완성 목록에서 선택.
• 로컬 스토리지 에러: 브라우저 개발자 도구(F12) → Console 탭에서 에러 확인 후 Kiro에게 에러 메시지 전달.