하단에 일정 내용을 입력할 수 있는

필드를 구성해줘.

입력한 내용은 하단에 리스트 형식으로

보이도록 디자인해줘.

리스트에 있는 것은 선택하여

제거할 수 있는 버튼을 만들어줘.

입력한 데이터는 로컬 스토리지에 저장되도록 해줘.

핵심 동작

팀 점수 증감

사용자가 색 영역(파란/빨간) 을 탭하면 해당 팀 점수가 +1.

동일 영역을 길게 누르면(롱프레스 600ms) –1.

점수는 0 아래로 내려가지 않음(최소 0).

세트 점수판

중앙 상단의 파란 세트 박스를 탭하면 블루 팀 세트 +1, 길게 누르면 –1(최소 0).

빨간 세트 박스도 동일 동작으로 레드 팀 세트 증감.

세트 점수는 팀 점수와 별도 상태로 관리.

초기화 버튼

중앙 하단 큰 버튼 “초기화” 탭 시 모든 점수(두 팀 점수 + 세트 점수) 0으로 리셋.

실수 방지를 위해 간단한 확인 다이얼로그(“정말 초기화할까요? 확인/취소”).

UI 레이아웃/스타일

전체 배경: 좌측 블루(#003DFF), 우측 레드(#FF1A1A) 로 정확히 반반 분할. 모서리는 라운드 24px.

각 팀의 대형 점수 숫자는 화면 중앙 정렬, 아주 크게(가로 기준 자동 스케일, 최소 220pt), 굵게, 흰색.

중앙 상단 세트 박스 두 개는 카드 형태(얕은 그림자, 라운드 16px, 흰 배경, 내부 숫자는 팀 색상으로 표시: 파란 박스=파란 숫자, 빨간 박스=빨간 숫자). 숫자 크기 64–80pt.

세트 박스 아래에 굵은 제목 “점수판”(검정, 36–48pt).

중앙 하단 초기화 버튼: 가로로 넓고(전체 폭의 60–80%), 높이 크게(64–80px), 배경 #E5E7EB(연회색), 텍스트 “초기화”(검정, 볼드 28–32pt). 탭 시 살짝 눌리는 효과.

전체 폰트: 깔끔한 산세리프(예: Noto Sans). 숫자는 가독성 높은 대체 폰트 사용 가능.

상호작용/접근성

탭/롱프레스 시 가벼운 진동(haptic) 과 짧은 효과음(선택).

대비 준수(색맹 친화): 팀 색 유지하면서도 큰 흰색 숫자와 충분한 대비.

터치 타깃 최소 56px 이상.

태블릿/폰 해상도 대응(반응형). 가로/세로 모두 동작하되 가로 레이아웃 우선.

상태/로직

상태 키: blue, red, setBlue, setRed.

모든 감소 연산은 최소값 0 보장.

(선택) 브라우저 로컬 저장소에 상태 보존하여 앱 재실행 시 마지막 값 복원.

테스트 시나리오

파란 영역 탭 3회 → 파란 점수 3.

빨간 영역 길게 1회(초기 0) → 여전히 0(음수 불가).

파란 세트 박스 탭 2회 → 파란 세트 2.

초기화 → 네 값 모두 0, 화면 갱신.

브랜드/마감

심플하고 큼직한 체육수업용 스코어보드 느낌.

애니메이션은 과하지 않게(점수 변경 시 짧은 scale-up 120ms).

이 사양에 따라 단일 화면 점수판 앱을 구현하세요.