버튼 하나로 기록하는 오늘의 일과: 구현 방법 및 기술 분석

로이·2024년 7월 25일

do-did-done

목록 보기

4/5

오늘 내가 한 일을 손쉽게 기록해보세요!

여러분, 하루 중 내가 뭘 했는지 기억해내는 게 어렵지 않으세요? 그런 분들을 위해 버튼 클릭만으로 오늘의 활동을 기록할 수 있는 간단한 기능을 구현했어요. 이번 포스팅에서는 이 기능을 어떻게 만들었는지 살펴보도록 할게요.

일일 활동 추적기 만들기

왜 일일 활동 추적기인가요?

일일 활동을 기록하는 것은 생산성을 높이고 자신의 생활 패턴을 파악하는 데 도움이 됩니다. 번거롭게 노트를 펴고 일일이 작성할 필요 없이, 몇 개의 버튼 클릭만으로 손쉽게 활동을 기록할 수 있으면 얼마나 좋을까요? 이번에 바로 그 기능을 구현해보았습니다.

일일 활동 추적기 구현하기

먼저, 일일 활동을 기록하는 버튼을 만들고, 버튼 클릭 시마다 해당 활동이 로그로 저장되도록 만들었어요. 그리고 호환성을 높이기 위해 활동 로그를 localStorage에 저장했어요.

코드 따라 해보기

1. 버튼 만들기

아래 코드에서는 다양한 활동을 나타내는 버튼을 생성합니다. 버튼을 클릭하면 해당 활동이 기록됩니다.

const activities = ["기상", "산책", "식사", "운동", "스터디", "간식"];

const buttonStyle = {
  padding: "10px",
  margin: "5px",
  backgroundColor: "#4CAF50",
  color: "white",
  border: "none",
  borderRadius: "5px",
  cursor: "pointer",
};

return (
  <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "10px", marginBottom: "20px" }}>
    {activities.map((activity) => (
      <button key={activity} onClick={() => logActivity(activity)} style={buttonStyle}>
        {activity}
      </button>
    ))}
  </div>
);

위 코드는 ‘기상’, ‘산책’, ‘식사’ 등 6개의 활동 버튼을 정의하여 사용자 인터페이스에 배치합니다. 버튼을 클릭하면 logActivity 함수가 호출되어 해당 활동이 기록됩니다.

2. 활동 기록 기능 구현

logActivity 함수에서는 현재 시간을 구하고, 그 시간을 기준으로 localStorage에 활동 로그를 저장합니다.

const logActivity = (activity) => {
  const now = new Date();
  const dateKey = now.toISOString().split("T")[0];
  const timeString = now.toTimeString().split(" ")[0];

  setLogs((prevLogs) => {
    const newLogs = {
      ...prevLogs,
      [dateKey]: [...(prevLogs[dateKey] || []), `${timeString} - ${activity}`],
    };
    try {
      localStorage.setItem("activityLogs", JSON.stringify(newLogs));
    } catch (error) {
      console.error("Failed to save logs to localStorage:", error);
    }
    return newLogs;
  });
};

여기에서 핵심은 localStorage를 통해 활동 로그를 저장하고 불러올 수 있다는 점이에요. localStorage는 브라우저가 닫히거나 새로고침이 돼도 데이터가 유지되니, 활동 기록을 안전하게 보존할 수 있어요.

3. 기록된 활동 보기

저장된 활동을 화면에 보여주는 부분도 구현해보았어요. 아래 코드는 logs 객체를 순회하면서 기록된 활동을 화면에 출력합니다.

return (
  <div>
    {Object.entries(logs).length > 0 ? (
      Object.entries(logs)
        .reverse()
        .map(([date, activities]) => (
          <div key={date} style={cardStyle}>
            <h2>{date}</h2>
            <ul>
              {activities.map((activity, index) => (
                <li key={index}>{activity}</li>
              ))}
            </ul>
          </div>
        ))
    ) : (
      <p>아직 기록된 활동이 없습니다.</p>
    )}
  </div>
);