[바이브코딩 HTML 웹앱 20일 챌린지] 10일차 - 오늘의 기분을 기록하는 버튼 만들기
10일차에서는 오늘의 기분을 버튼으로 기록하는 기능을 만듭니다. 지금까지 할 일과 메모를 쌓았다면, 오늘은 감정 상태까지 한 화면에서 관리해 하루 대시보드의 개인화 수준을 높이는 단계입니다.
복잡한 분석 기능 없이도 "기분 선택 → 화면 표시 → 저장" 흐름만 구현하면 실사용성이 크게 올라갑니다. 초보자에게도 부담이 적고, localStorage 재활용 연습까지 함께 할 수 있는 좋은 확장 과제입니다.
1. 오늘 만들 기능 소개
오늘 기능은 사용자가 기분 버튼을 누르면 선택 상태가 표시되고, 그 값이 저장되는 구조입니다. 예를 들어 😀 🙂 😐 😫 같은 버튼을 만들고, 선택한 버튼에 활성 스타일을 주며, 화면 아래에 "오늘의 기분: 🙂"처럼 결과를 보여주면 됩니다.
핵심은 상태를 하나만 유지하는 것입니다. 여러 버튼이 동시에 선택되지 않도록 이전 선택을 해제하고 새 선택만 활성화하면 UI가 명확해집니다.
2. AI에게 요청할 프롬프트
AI에게는 버튼 그룹, 선택 상태, 저장 키를 함께 요청하면 구현이 깔끔해집니다.
하루 관리 웹앱 10일차 작업이야.
오늘의 기분 버튼 4~5개를 만들고, 버튼 클릭 시 선택된 기분을 화면에 표시해줘.
선택한 기분은 localStorage("todayMood")에 저장하고,
페이지 로드 시 마지막 선택 상태를 복원하는 JavaScript 코드를 작성해줘.응답을 받은 뒤에는 클래스명(`active`)과 저장 키(`todayMood`)를 고정해두면 11일차 이후 기능 추가 시 충돌을 줄일 수 있습니다.
3. 코드 작성과 실행 과정
먼저 메모 카드 아래 또는 별도 카드에 기분 버튼 그룹을 배치합니다. 버튼에는 `data-mood` 속성을 넣어 이모지/텍스트 값을 구분하고, 클릭 시 모든 버튼의 active를 제거한 뒤 현재 버튼에만 active를 적용합니다.
| 단계 | 구현 내용 | 체크 포인트 |
|---|---|---|
| 버튼 구성 | 기분 버튼 그룹 생성 | data-mood 값 일관성 |
| 선택 반영 | active 클래스 토글 + 결과 텍스트 표시 | 동시에 1개만 활성화 |
| 상태 저장 | todayMood 저장/복원 | 새로고침 후 유지 확인 |
테스트할 때는 기분을 한 번 선택한 뒤 새로고침해서 유지되는지 확인하세요. 직접 바꿔보기 미션으로 "기분 코멘트"를 함께 출력해보면 좋습니다. 예: 🙂 선택 시 "집중이 잘 되는 하루예요" 같은 문구를 조건문으로 보여줄 수 있습니다.
4. 코드 이해하기
오늘 핵심 개념은 "단일 선택 상태 관리"입니다. 버튼 그룹에서는 체크박스처럼 다중 선택이 아니라 라디오처럼 1개만 활성화되는 UX가 일반적입니다. 그래서 클릭할 때 기존 active를 지우고 새 active를 주는 순서를 익혀두는 것이 중요합니다.
또 localStorage 저장은 값 하나(문자열)만 다루므로 구현이 단순합니다. 작은 상태 저장을 반복해서 익히는 것이 큰 기능 확장의 기반이 됩니다.
5. 오늘 만든 내용 정리
오늘은 기분 선택 버튼을 추가하고, 선택 상태 표시와 localStorage 저장/복원까지 연결했습니다. 이제 하루 관리 웹앱이 할 일과 메모를 넘어 감정 기록까지 포함하는 개인 대시보드로 확장되었습니다. 다음 11일차에서는 집중 타이머를 추가해 생산성 기능을 한 단계 더 강화해보겠습니다.
6. 자주 묻는 질문
Q1. 기분 버튼을 눌러도 이전 버튼 active가 안 사라져요.
클릭 시 전체 버튼을 먼저 순회하며 active를 제거하는 코드가 필요합니다. 그다음 현재 클릭한 버튼에만 active를 추가하세요.
Q2. 새로고침하면 선택한 기분이 초기화돼요.
저장 함수는 호출되지만 로드 함수가 빠졌을 가능성이 큽니다. 페이지 로드 시 `todayMood` 값을 읽어 해당 버튼을 다시 활성화하세요.
Q3. 이모지만 저장해도 괜찮나요?
가능합니다. 다만 나중에 통계 기능을 고려하면 `happy`, `neutral` 같은 코드값으로 저장하는 것도 좋습니다. 지금 단계에서는 구현이 쉬운 방식부터 시작해도 충분합니다.