From e2c96fd6c28f80549d9fbd4eb03bc1e99b553e6e Mon Sep 17 00:00:00 2001
From: MinzziPark <minzzi0068@gmail.com>
Date: Wed, 22 Oct 2025 17:18:15 +0900
Subject: [PATCH 1/2] feat: add utility function to format time in hours and
 minutes

---
 src/utils/formatTimeToHoursAndMinutes.ts | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 src/utils/formatTimeToHoursAndMinutes.ts

diff --git a/src/utils/formatTimeToHoursAndMinutes.ts b/src/utils/formatTimeToHoursAndMinutes.ts
new file mode 100644
index 0000000..addc73c
--- /dev/null
+++ b/src/utils/formatTimeToHoursAndMinutes.ts
@@ -0,0 +1,5 @@
+export function formatTimeToHoursAndMinutes(minutes: number) {
+   const hours = Math.floor(minutes / 60);
+   const mins = minutes % 60;
+   return `${hours}시간 ${mins}분`;
+}

From 3fb5f32a7facd613bf9efc34086ae06b334dc341 Mon Sep 17 00:00:00 2001
From: MinzziPark <minzzi0068@gmail.com>
Date: Wed, 22 Oct 2025 17:21:24 +0900
Subject: [PATCH 2/2] refactor: replace custom time formatting function with
 utility function for consistency

---
 src/pages/Admin/ReportList/Page.tsx                  | 12 +++---------
 .../ReportList/components/GroupReportListView.tsx    | 12 +++---------
 src/pages/ReportDetail/Page.tsx                      |  9 ++-------
 src/pages/ReportList/Page.tsx                        | 11 +++--------
 4 files changed, 11 insertions(+), 33 deletions(-)

diff --git a/src/pages/Admin/ReportList/Page.tsx b/src/pages/Admin/ReportList/Page.tsx
index 74889bf..cb9035f 100644
--- a/src/pages/Admin/ReportList/Page.tsx
+++ b/src/pages/Admin/ReportList/Page.tsx
@@ -5,6 +5,7 @@ import { WaveLoading } from '@/components/WaveLoading';
 import { paths } from '@/const/paths';
 import { SimpleReport } from '@/interface/report';
 import { getFormattedLocaleString } from '@/utils/DateFormat';
+import { formatTimeToHoursAndMinutes } from '@/utils/formatTimeToHoursAndMinutes';
 import { ChevronRight, Clock } from 'lucide-react';
 import { useMemo } from 'react';
 import { useQuery } from 'react-query';
@@ -23,13 +24,6 @@ export default function ReportListAdminPage() {
       });
    };
 
-   // 시간을 시간과 분으로 포맷팅하는 함수
-   const formatStudyTime = (minutes: number) => {
-      const hours = Math.floor(minutes / 60);
-      const mins = minutes % 60;
-      return `${hours}시간 ${mins}분`;
-   };
-
    const reports = useMemo(() => {
       if (!data) return [];
       return data.reports;
@@ -87,14 +81,14 @@ export default function ReportListAdminPage() {
                                        <div className="font-medium">{report.title}</div>
                                        <div className="md:hidden text-xs text-muted-foreground flex items-left mt-1">
                                           <Clock className="h-3 w-3 mr-1" />
-                                          {formatStudyTime(report.totalMinutes)}
+                                          {formatTimeToHoursAndMinutes(report.totalMinutes)}
                                        </div>
                                     </div>
                                  </TableCell>
                                  <TableCell>
                                     <div className="flex items-center">
                                        <Clock className="h-4 w-4 text-muted-foreground mr-2" />
-                                       {formatStudyTime(report.totalMinutes)}
+                                       {formatTimeToHoursAndMinutes(report.totalMinutes)}
                                     </div>
                                  </TableCell>
 
diff --git a/src/pages/Admin/ReportList/components/GroupReportListView.tsx b/src/pages/Admin/ReportList/components/GroupReportListView.tsx
index 11f40ba..f434238 100644
--- a/src/pages/Admin/ReportList/components/GroupReportListView.tsx
+++ b/src/pages/Admin/ReportList/components/GroupReportListView.tsx
@@ -5,6 +5,7 @@ import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table';
 import { paths } from '@/const/paths';
 import { Report } from '@/interface/report';
 import { getFormattedLocaleString } from '@/utils/DateFormat';
+import { formatTimeToHoursAndMinutes } from '@/utils/formatTimeToHoursAndMinutes';
 import { ChevronRight, Clock, Users } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 
@@ -20,13 +21,6 @@ export default function GroupReportListUserView({ reports }: GroupReportListView
       });
    };
 
-   // 시간을 시간과 분으로 포맷팅하는 함수
-   const formatStudyTime = (minutes: number) => {
-      const hours = Math.floor(minutes / 60);
-      const mins = minutes % 60;
-      return `${hours}시간 ${mins}분`;
-   };
-
    return (
       <Card className="py-0">
          <CardContent className="p-0">
@@ -73,7 +67,7 @@ export default function GroupReportListUserView({ reports }: GroupReportListView
                                     <div className="font-medium">{report.title}</div>
                                     <div className="md:hidden text-xs text-muted-foreground flex items-left mt-1">
                                        <Clock className="h-3 w-3 mr-1" />
-                                       {formatStudyTime(report.totalMinutes)}
+                                       {formatTimeToHoursAndMinutes(report.totalMinutes)}
                                     </div>
                                     <div className="sm:hidden text-xs text-muted-foreground flex items-center mt-1">
                                        <Users className="h-3 w-3 mr-1" />
@@ -84,7 +78,7 @@ export default function GroupReportListUserView({ reports }: GroupReportListView
                               <TableCell className="hidden md:table-cell">
                                  <div className="flex items-center">
                                     <Clock className="h-4 w-4 text-muted-foreground mr-2" />
-                                    {formatStudyTime(report.totalMinutes)}
+                                    {formatTimeToHoursAndMinutes(report.totalMinutes)}
                                  </div>
                               </TableCell>
                               <TableCell className="hidden sm:table-cell">
diff --git a/src/pages/ReportDetail/Page.tsx b/src/pages/ReportDetail/Page.tsx
index 6d53573..32d5fa9 100644
--- a/src/pages/ReportDetail/Page.tsx
+++ b/src/pages/ReportDetail/Page.tsx
@@ -12,6 +12,7 @@ import { Report } from '@/interface/report';
 import { SimpleUser } from '@/interface/user';
 import { roleState } from '@/store/HISAtom';
 import { getFormattedLocaleString } from '@/utils/DateFormat';
+import { formatTimeToHoursAndMinutes } from '@/utils/formatTimeToHoursAndMinutes';
 import { addImagePrefix } from '@/utils/imagePrefix';
 import { ArrowLeft, BookOpen, Calendar, Clock, Edit, ImageIcon, Trash2, Users } from 'lucide-react';
 import { useMemo } from 'react';
@@ -73,12 +74,6 @@ export default function ReportDetailPage() {
       }
       navigate(paths.reports.edit(report.id.toString()), { state: state });
    };
-   // 시간을 시간과 분으로 포맷팅하는 함수
-   const formatStudyTime = (minutes: number) => {
-      const hours = Math.floor(minutes / 60);
-      const mins = minutes % 60;
-      return `${hours}시간 ${mins}분`;
-   };
 
    if (isLoading) {
       return <WaveLoading />;
@@ -145,7 +140,7 @@ export default function ReportDetailPage() {
                         <span className="text-muted-foreground flex items-center gap-1.5">
                            <Clock className="h-3.5 w-3.5" />총 스터디 시간
                         </span>
-                        <span className="font-medium">{formatStudyTime(report?.totalMinutes || 0)}</span>
+                        <span className="font-medium">{formatTimeToHoursAndMinutes(report?.totalMinutes || 0)}</span>
                      </div>
                      <div className="flex items-center justify-between text-sm">
                         <span className="text-muted-foreground">작성일</span>
diff --git a/src/pages/ReportList/Page.tsx b/src/pages/ReportList/Page.tsx
index b8127e7..029e12b 100644
--- a/src/pages/ReportList/Page.tsx
+++ b/src/pages/ReportList/Page.tsx
@@ -7,6 +7,7 @@ import { WaveLoading } from '@/components/WaveLoading';
 import { paths } from '@/const/paths';
 import { Report } from '@/interface/report';
 import { getFormattedLocaleString } from '@/utils/DateFormat';
+import { formatTimeToHoursAndMinutes } from '@/utils/formatTimeToHoursAndMinutes';
 import { ChevronRight, Clock, PlusCircle, Users } from 'lucide-react';
 import { useMemo } from 'react';
 import { useQuery } from 'react-query';
@@ -24,12 +25,6 @@ export default function ReportListUserPage() {
       });
    };
 
-   const formatStudyTime = (minutes: number) => {
-      const hours = Math.floor(minutes / 60);
-      const mins = minutes % 60;
-      return `${hours}시간 ${mins}분`;
-   };
-
    const reports = useMemo(() => {
       if (!data) return [];
       return data.reports;
@@ -95,7 +90,7 @@ export default function ReportListUserPage() {
                                        <div className="font-medium">{report.title}</div>
                                        <div className="md:hidden text-xs text-muted-foreground flex items-left mt-1">
                                           <Clock className="h-3 w-3 mr-1" />
-                                          {formatStudyTime(report.totalMinutes)}
+                                          {formatTimeToHoursAndMinutes(report.totalMinutes)}
                                        </div>
                                        <div className="sm:hidden text-xs text-muted-foreground flex items-center mt-1">
                                           <Users className="h-3 w-3 mr-1" />
@@ -106,7 +101,7 @@ export default function ReportListUserPage() {
                                  <TableCell className="hidden md:table-cell">
                                     <div className="flex items-center">
                                        <Clock className="h-4 w-4 text-muted-foreground mr-2" />
-                                       {formatStudyTime(report.totalMinutes)}
+                                       {formatTimeToHoursAndMinutes(report.totalMinutes)}
                                     </div>
                                  </TableCell>
                                  <TableCell className="hidden sm:table-cell">