👋 개요

오늘은 CaffInMe 프로젝트에 두 가지 핵심 편의 기능(과거 기록 추가, 섭취 기록 리스트)을 추가하고, 코드의 유지보수성을 높이기 위한 리팩토링 작업을 진행했습니다. 사용자가 놓친 기록을 쉽게 추가하고, 전체 내역을 한눈에 보며 관리할 수 있게 되었습니다.

📝 오늘 한 일

  • “과거 기록 추가” 기능 구현 (모달 UI 및 로직)
  • “섭취 기록 보기” 기능 구현 (팝업 리스트 및 개별 삭제 기능)
  • 초기화면 버튼 미작동 버그 수정
  • HTML, CSS, JavaScript 코드 분리 리팩토링

✨ 주요 작업 내용

1. 과거 섭취 기록 추가 기능

사용자가 현재가 아닌 과거에 섭취한 카페인을 기록할 수 있는 기능을 추가했습니다. 메인 화면의 “과거 기록 추가” 버튼을 누르면 모달 창이 나타나고, 사용자는 섭취량과 함께 날짜/시간을 직접 선택하여 기록을 추가할 수 있습니다.

코드 스니펫:

// 특정 시간(timestamp)을 인자로 받아 카페인 로그를 추가하는 함수
const addCaffeine = (amount, timestamp) => {
    const log = getLog();
    log.push({ timestamp: timestamp, amount: amount });
    // 24시간 이전 로그는 자동 필터링
    const twentyFourHoursAgo = Date.now() - 24 * 60 * 60 * 1000;
    const cleanedLog = log.filter(entry => entry.timestamp > twentyFourHoursAgo);
    saveLog(cleanedLog); // 시간순으로 정렬 후 저장
    updateAll(); // 메인 UI(현재량, 그래프) 업데이트
};

// 모달의 '저장' 버튼 이벤트 리스너
savePastEntryBtn.addEventListener('click', () => {
    const pastTime = pastTimeInput.value;
    // ... 유효성 검사 ...
    const timestamp = new Date(pastTime).getTime();
    addCaffeine(selectedPastAmount, timestamp);
    pastEntryModal.classList.add('hidden');
});

2. 섭취 기록 리스트 및 삭제 기능

사용자가 자신의 모든 섭취 기록을 확인하고 관리할 수 있는 팝업 리스트 기능을 추가했습니다. ‘현재 체내 카페인’ 패널의 “섭취 기록 보기” 버튼으로 리스트를 열 수 있으며, 각 항목 옆의 X 버튼으로 특정 기록을 삭제할 수 있습니다.

코드 스니펫:

// localStorage의 로그를 기반으로 리스트를 동적으로 생성
const renderHistoryList = () => {
    const log = getLog();
    historyListEl.innerHTML = ''; // 기존 리스트 초기화

    if (log.length === 0) {
        historyListEl.innerHTML = '<li class="empty-history">섭취 기록이 없습니다.</li>';
        return;
    }

    // 최신순으로 보여주기 위해 배열을 복사하고 뒤집음
    log.slice().reverse().forEach(entry => {
        const li = document.createElement('li');
        li.innerHTML = `
            <div>
                <span class="amount">${entry.amount} mg</span>
                <span class="time">${formatTimestamp(entry.timestamp)}</span>
            </div>
            <button class="delete-log-btn" data-timestamp="${entry.timestamp}">&times;</button>
        `;
        historyListEl.appendChild(li);
    });
};

3. 코드 리팩토링

index.html에 혼재되어 있던 HTML, CSS, JavaScript 코드를 각각의 파일로 분리하여 프로젝트 구조를 개선했습니다.

  • css/style.css: 모든 스타일 코드
  • js/script.js: 모든 자바스크립트 로직
  • index.html: 순수 HTML 구조 및 외부 파일 링크

겪었던 문제 및 해결 과정

문제: “과거 기록 추가” 기능을 구현한 후, 앱의 첫 화면인 ‘초기 설정’ 페이지의 버튼들이 아무런 반응을 하지 않는 버그가 발생했습니다.

시도:

  1. 개발자 도구의 콘솔을 확인하여 에러 메시지가 있는지 찾아보았습니다.
  2. Uncaught TypeError가 특정 코드 라인에서 발생하고 있음을 확인했습니다.
  3. 해당 라인은 과거 기록 모달에서 선택한 버튼의 테두리 색을 변경하는 코드였습니다: e.target.style.borderColor = var(--accent-orange);

해결: JavaScript에서 CSS 변수(var())를 직접 사용할 수 없다는 점을 파악했습니다. 해당 코드를 실제 색상 값(HEX 코드)을 문자열로 직접 할당하는 방식으로 수정하여 문제를 해결했습니다.

  • 수정 후: e.target.style.border = '2px solid #FB923C';

💡 새롭게 배운 점

  • 관심사 분리(Separation of Concerns): HTML, CSS, JS를 한 파일에 작성하는 것이 초기에는 빠를 수 있지만, 기능이 조금만 복잡해져도 유지보수가 급격히 어려워진다는 것을 다시 한번 체감했습니다. 리팩토링 후 파일 구조가 명확해져 작업 효율이 크게 올랐습니다.
  • JavaScript와 CSS 변수: JavaScript에서 CSS 변수 값을 직접 호출하여 스타일을 변경할 수는 없으며, getComputedStyle()을 사용하거나, 변수 값을 직접 문자열로 할당해야 한다는 것을 배웠습니다.
  • 동적 UI 갱신: 사용자가 특정 데이터를 삭제했을 때, 단순히 데이터 소스(localStorage)만 업데이트하는 것이 아니라, 현재 화면에 보이는 UI(기록 리스트, 메인 그래프 등)를 즉시 다시 렌더링하여 사용자 경험을 해치지 않는 것이 중요함을 확인했습니다.

🚀 다음 계획

  • GitHub Pages 배포: 현재 로컬에서만 실행 가능한 프로젝트를 웹에 배포하여 다른 사람들도 쉽게 접근하고 사용할 수 있도록 만들겠습니다.
  • 사용자 커스텀 테마 기능: 사용자가 직접 앱의 색상 테마를 변경할 수 있는 기능을 추가하여 개인화 요소를 더하고 싶습니다.