시간 통계 그래프 데이터 단위 수정

src/components/statistics/StatisticsSearch.js

@@ -21,33 +21,35 @@ export default function StatisticsSearch({
   categoryTypeOptions,
   handlerBarTicks,
   handlerTitleName,
-  handleChangeSearchType
+  handleChangeSearchType,
+  parseTimeToDate
 }) {
   const [total, setTotal] = useState([]);
   const [top, setTop] = useState([]);
 
   // searchType과 searchData가 바뀔때마다 state 업데이트
   useEffect(() => {
-    if (searchType.category === 'TIME') {
+    chartInit();
-      // ['00:00:00', '12:34:56'] -> [0,45296] 초단위로 변경
+  }, [searchData]);
-      const timeGraph = searchData.graphData
-        .map(i => i.value)
-        .filter(time => time);
-      const timeTop = searchData.topData.map(i => i.value).filter(time => time);
 
   const convertToSeconds = timeArr => {
     return timeArr.map(time => {
-          console.log(time);
+      const [hours, minutes, seconds] = String(time).split(':').map(Number);
-          const [hours, minutes, seconds] = time.split(':').map(Number);
       return hours * 3600 + minutes * 60 + seconds;
     });
   };
 
-      const graphSeconds = convertToSeconds(timeGraph);
+  const chartInit = () => {
-      const topSeconds = convertToSeconds(timeTop);
+    if (searchType.category === 'TIME') {
+      // ['00:00:00', '12:34:56'] -> [0,45296] 초 단위로 변경
+      const timeGraph = searchData.graphData.map(i => i.value).filter(i => i);
+      const timeTop = searchData.topData.map(i => i.value).filter(i => i);
+
+      const totalValue = convertToSeconds(timeGraph);
+      const topValue = convertToSeconds(timeTop);
 
-      setTotal(graphSeconds);
+      setTotal(totalValue);
-      setTop(topSeconds);
+      setTop(topValue);
     } else if (searchType.category === 'DISTANCE') {
       // [0.0, 0.1] -> [0, 0]
       const distanceTotal = searchData.graphData
@@ -68,7 +70,7 @@ export default function StatisticsSearch({
       setTotal(searchData.graphData.map(i => i.value));
       setTop(searchData.topData.map(i => i.value));
     }
-  }, [searchData]);
+  };
 
   const barOptions = {
       elements: {
@@ -162,9 +164,11 @@ export default function StatisticsSearch({
               value = data.datasets[0].data[tooltipItem.index],
               output = ` ${label} : ${value} 건`;
 
-            // if (category === 'TIME') {
+            if (searchType.category === 'TIME') {
-            // } else if (category === 'DISTANCE') {
+              const dateValue = parseTimeToDate(value);
-            // }
+              return (output = ` ${label} : ${dateValue}`);
+            } else if (searchType.category === 'DISTANCE') {
+            }
 
             return output;
           }

src/components/statistics/StatisticsTotal.js

@@ -5,7 +5,7 @@ export default function StatisticsTotal({
   totalData,
   titleName,
   totalTitle,
-  parseTime,
+  parseTimeToSeconds,
   addCommasToNumber
 }) {
   const renderIcon = idx => {
@@ -16,7 +16,7 @@ export default function StatisticsTotal({
 
   const renderData = (data, titleName, idx) => {
     if (titleName) {
-      if (idx === 0) return parseTime(data);
+      if (idx === 0) return parseTimeToSeconds(data);
       if (idx === 1) return <>{addCommasToNumber(data)}m</>;
       return <>{addCommasToNumber(data)}건</>;
     } else {

src/containers/statistics/FlightContainer.js

@@ -99,13 +99,11 @@ export default function FlightContainer() {
       .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
   };
 
-  // '24:35:12' -> 1일 35분 12초
+  // '24:35:12' -> '1일 35분 12초'
-  const parseTime = time => {
+  const parseTimeToSeconds = time => {
     if (time === 'noData' || time === '00:00:00') return '0초';
 
-    const [hour, minute, second] = time.split(':').map(Number);
+    const [hour, minute, second] = String(time).split(':').map(Number);
-
-    const formatPart = (value, unit) => (value > 0 ? `${value}${unit}` : '');
 
     const parts = [
       formatPart(Math.floor(hour / 24), '일'),
@@ -117,6 +115,31 @@ export default function FlightContainer() {
     return parts.join(' ');
   };
 
+  const formatPart = (value, unit) => (value > 0 ? `${value}${unit}` : '');
+
+  // 975 -> '16분 15초'
+  const parseTimeToDate = time => {
+    const { days, hours, minutes, seconds } = secondsToDHMS(time);
+
+    const parts = [
+      formatPart(days, '일'),
+      formatPart(hours, '시간'),
+      formatPart(minutes, '분'),
+      formatPart(seconds, '초')
+    ];
+
+    return parts.join(' ');
+  };
+
+  const secondsToDHMS = time => {
+    const days = Math.floor(time / 86400);
+    const hours = Math.floor((time % 86400) / 3600);
+    const minutes = Math.floor((time % 3600) / 60);
+    const seconds = time % 60;
+
+    return { days, hours, minutes, seconds };
+  };
+
   return (
     <CustomMainLayout title={titleName}>
       <div className='pal-card-box statistics'>
@@ -124,10 +147,11 @@ export default function FlightContainer() {
           titleName={titleName}
           totalTitle={totalTitle}
           totalData={flight}
-          parseTime={parseTime}
+          parseTimeToSeconds={parseTimeToSeconds}
           addCommasToNumber={addCommasToNumber}
         />
         <StatisticsSearch
+          parseTimeToDate={parseTimeToDate}
           searchData={flightSearch}
           searchType={searchType}
           categoryTypeOptions={categoryTypeOptions}