Blackout 프로젝트 프로그래스 바 트러블 슈팅

송연지·2024년 4월 17일

트러블슈팅

목록 보기

9/32

Blackout 프로젝트 - 라디오 버튼과 프로그래스 바 오류 해결

발생 상황

"Blackout" 프로젝트에서는 술달력에 관련된 웹을 개발 중이었습니다. 사용자가 라디오 버튼을 통해 선택한 음료의 비율을 프로그래스 바로 표시하는 기능에서 오류가 발생했습니다. 라디오 버튼이 한 번 선택된 후에 취소되지 않았고, 프로그래스 바의 퍼센트가 정상적으로 감소하지 않는 문제가 있었습니다.

발생 원인

라디오 버튼 상태 관리 오류: 라디오 버튼의 상태가 한 번 설정되면 초기화되지 않아 선택 취소가 불가능했습니다.(로컬에 저장된 상태때문)
프로그래스 바 계산 오류: 선택된 음료에 따라 계산되어야 할 프로그래스 바의 비율이 필터링되지 않아 정확한 퍼센트 반영이 이루어지지 않았습니다.

해결 과정 및 코드 수정

라디오 버튼 초기화 수정

라디오 버튼의 선택 취소 기능을 추가하기 위해, 선택된 라디오 버튼의 상태를 관리하는 방식을 수정했습니다.

프로그래스 바 비율 계산 로직 수정

필터링 로직을 추가하여 선택된 음료에 대한 데이터만 계산에 포함시키도록 개선했습니다. 예를 들자면 이런 느낌으로...

최종 수정된 코드

import React, { useState, useEffect } from 'react';
import moment from 'moment';
import { ThemeProvider } from '@emotion/react';
import AppBar from '@material-ui/core/AppBar';
import Calendar from 'react-calendar';

const DiaryCalendar = () => {
  //상태관리
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [diaryEntries, setDiaryEntries] = useState({});

  //날짜 핸들러
  const handleDateChange = (date) => {
    setSelectedDate(date);
    if (date.getMonth() !== selectedDate.getMonth()) {
      setDiaryEntries({});
    }
  };
//프로그래스 바 음주량 평균
  const calculateTotalDrinkRatio = () => {
    const entriesInMonth = Object.entries(diaryEntries).filter(([date, entry]) => {
      const dateMoment = moment(date);
      return dateMoment.year() === selectedDate.getFullYear() && dateMoment.month() === selectedDate.getMonth();
    });
    
//논알콜로 따로 빼서 필터링으로 구현해줌
    const drinkCount = entriesInMonth.filter(([_, entry]) => entry.drink !== "nonAlcohol").length;
    const entryCount = moment(selectedDate).daysInMonth();
    return (drinkCount / entryCount) * 100;
  };

  

  return (
    <ThemeProvider theme={theme}>
      <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }}>
        <AppBar position="fixed" color="primary">
          <h1>Blackout Diary</h1>
        </AppBar>
        <div className="calendar-container">
          <Calendar onChange={handleDateChange} value={selectedDate} />
        </div>
        <div style={{ marginTop: "20px" }}>
          <h2>Progress</h2>
          <progress value={calculateTotalDrinkRatio()} max="100" />
        </div>
      </div>
    </ThemeProvider>
  );
};

export default DiaryCalendar;