fix: 코드리뷰 반영

Author: eugene028

apps/admin/app/studies/[studyId]/_components/statics/StudyAttendanceRate.tsx renamed to apps/admin/app/studies/[studyId]/_components/statics/StudyAnalyticsGraph.tsx

@@ -5,27 +5,29 @@ import type { StudyWeekStatisticsApiResponseDto } from "types/dtos/studyStatisti
 
 import BarGraph from "./graph/BarGraph";
 
-const StudyAttendanceRate = ({
-  averageAttendanceRate = 0,
+const StudyAnalyticsGraph = ({
+  graphTitle,
+  averageRate = 0,
   totalStudent,
   studyWeekStatisticsResponses,
 }: {
-  averageAttendanceRate?: number;
+  graphTitle: string;
+  averageRate?: number;
   totalStudent?: number;
   studyWeekStatisticsResponses?: StudyWeekStatisticsApiResponseDto[];
 }) => {
   return (
     <Flex direction="column" gap="md">
-      <Text className={StaticsTitleStyle} typo="h3">
-        출석률
+      <Text className={staticsTitleStyle} typo="h3">
+        {graphTitle}
       </Text>
       <Flex direction="column" gap="xs">
         <Flex alignItems="flex-start" direction="column" gap="md">
           {studyWeekStatisticsResponses?.map((data) => (
             <Flex direction="row" gap="lg" key={data.week} minWidth="340px">
               <Text
                 as="div"
-                className={StudyWeekStyle}
+                className={studyWeekStyle}
                 color="sub"
                 typo="body1"
               >
@@ -39,13 +41,13 @@ const StudyAttendanceRate = ({
             </Flex>
           ))}
           <Flex direction="row" gap="lg">
-            <Text className={StudyWeekStyle} color="sub" typo="body1">
+            <Text className={studyWeekStyle} color="sub" typo="body1">
               평균
             </Text>
             <BarGraph
               barColor="average"
               isToolTipActive={false}
-              percent={averageAttendanceRate}
+              percent={averageRate}
             />
           </Flex>
         </Flex>
@@ -54,12 +56,12 @@ const StudyAttendanceRate = ({
   );
 };
 
-export default StudyAttendanceRate;
+export default StudyAnalyticsGraph;
 
-const StudyWeekStyle = css({
+const studyWeekStyle = css({
   minWidth: "45px",
 });
 
-const StaticsTitleStyle = css({
+const staticsTitleStyle = css({
   marginBottom: "10px",
 });

apps/admin/app/studies/[studyId]/_components/statics/StudyAssignmentRate.tsx

@@ -1,7 +1,6 @@
 "use client";
 import { Flex } from "@styled-system/jsx";
-import { Text } from "@wow-class/ui";
-import Tooltip from "components/Tooltip";
+import { Text, Tooltip } from "@wow-class/ui";
 import { Help } from "wowds-icons";
 
 import CircleGraph from "./graph/CircleGraph";

apps/admin/app/studies/[studyId]/_components/statics/StudyCompleteRate.tsx

@@ -2,8 +2,7 @@ import { Flex } from "@styled-system/jsx";
 import { Space, Text } from "@wow-class/ui";
 import { studyApi } from "apis/study/studyApi";
 
-import StudyAssignmentRate from "./StudyAssignmentRate";
-import StudyAttendanceRate from "./StudyAttendanceRate";
+import StudyAnalyticsGraph from "./StudyAnalyticsGraph";
 import StudyCompleteRate from "./StudyCompleteRate";
 
 const StudyStatics = async ({ studyId }: { studyId: string }) => {
@@ -22,18 +21,18 @@ const StudyStatics = async ({ studyId }: { studyId: string }) => {
       </Flex>
       <Space height={33} />
       <Flex alignItems="flex-start" gap="xl">
-        <StudyAttendanceRate
-          averageAttendanceRate={studyStatistics?.averageAttendanceRate}
+        <StudyAnalyticsGraph
+          averageRate={studyStatistics?.averageAttendanceRate}
+          graphTitle="출석률"
           totalStudent={studyStatistics?.totalStudentCount}
           studyWeekStatisticsResponses={
             studyStatistics?.studyWeekStatisticsResponses
           }
         />
-        <StudyAssignmentRate
+        <StudyAnalyticsGraph
+          averageRate={studyStatistics?.averageAssignmentSubmissionRate}
+          graphTitle="과제 제출률"
           totalStudent={studyStatistics?.totalStudentCount}
-          averageAssignmentSubmissionRate={
-            studyStatistics?.averageAssignmentSubmissionRate
-          }
           studyWeekStatisticsResponses={
             studyStatistics?.studyWeekStatisticsResponses
           }

apps/admin/app/studies/[studyId]/_components/statics/StudyStatics.tsx

@@ -20,6 +20,9 @@ const BarGraph = ({
   isCurriculumCanceled?: boolean;
 }) => {
   const [showTooltip, setShowTooltip] = useState(false);
+  const toggleTooltip = () => {
+    if (isToolTipActive) setShowTooltip((prevState) => !prevState);
+  };
   return (
     <Flex
       alignItems="center"
@@ -35,17 +38,13 @@ const BarGraph = ({
         {percent > 0 ? (
           <div
             style={{ width: `${50 + (232 - 50) * (percent / 100)}px` }}
-            className={BarGraphStyle({
+            className={barGraphStyle({
               type: barColor,
             })}
-            onMouseEnter={() => {
-              if (isToolTipActive) setShowTooltip(true);
-            }}
-            onMouseLeave={() => {
-              if (isToolTipActive) setShowTooltip(false);
-            }}
+            onMouseEnter={toggleTooltip}
+            onMouseLeave={toggleTooltip}
           >
-            <div className={BarGraphInnerStyle}>
+            <div className={barGraphInnerStyle}>
               <Text className={percentLabelStyle} color="white" typo="label2">
                 {percent > 0 && `${percent}%`}
               </Text>
@@ -57,7 +56,7 @@ const BarGraph = ({
             </div>
           </div>
         ) : (
-          <Text className={ZeroPercentLabel} color="sub" typo="label2">
+          <Text className={zeroPercentLabelStyle} color="sub" typo="label2">
             0%
           </Text>
         )}
@@ -98,7 +97,7 @@ const BarGraphBackgroundStyle = cva({
   },
 });
 
-const BarGraphStyle = cva({
+const barGraphStyle = cva({
   base: {
     position: "absolute",
     zIndex: 10,
@@ -128,12 +127,12 @@ const percentLabelStyle = css({
   alignItems: "center",
 });
 
-const BarGraphInnerStyle = css({
+const barGraphInnerStyle = css({
   position: "relative",
   width: "100%",
   height: "100%",
 });
 
-const ZeroPercentLabel = css({
+const zeroPercentLabelStyle = css({
   marginLeft: "8px",
 });

apps/admin/app/studies/[studyId]/_components/statics/graph/BarGraph.tsx

@@ -20,9 +20,9 @@ const CircleGraph = ({
 
   return (
     <Flex alignItems="center" direction="column" gap="lg" minWidth={size}>
-      <div className={CircleGraphWrapperStyle}>
+      <div className={circleGraphWrapperStyle}>
         <svg
-          className={CircleGraphStyle}
+          className={circleGraphStyle}
           height={size}
           viewBox={`0 0 ${size} ${size}`}
           width={size}
@@ -46,7 +46,7 @@ const CircleGraph = ({
             strokeWidth={strokeWidth}
           />
         </svg>
-        <Text className={CircleGraphLabelStyle} typo="h1">
+        <Text className={circleGraphLabelStyle} typo="h1">
           {percentage}%
         </Text>
       </div>
@@ -56,17 +56,17 @@ const CircleGraph = ({
 
 export default CircleGraph;
 
-const CircleGraphStyle = css({
+const circleGraphStyle = css({
   width: "100%",
   transform: "rotate(-90deg)",
 });
 
-const CircleGraphWrapperStyle = css({
+const circleGraphWrapperStyle = css({
   width: "100%",
   position: "relative",
 });
 
-const CircleGraphLabelStyle = css({
+const circleGraphLabelStyle = css({
   position: "absolute",
   top: "50%",
   left: "50%",

apps/admin/app/studies/[studyId]/_components/statics/graph/CircleGraph.tsx

@@ -2,20 +2,20 @@ import { css } from "@styled-system/css";
 import { Text } from "@wow-class/ui";
 const GraphToolTip = ({ studentCount }: { studentCount: number }) => {
   return (
-    <div className={ToolTipContainerStyle}>
-      <div className={ToolTipStyle}>
+    <div className={toolTipContainerStyle}>
+      <div className={toolTipStyle}>
         <Text color="black" typo="label2">
           {studentCount}명
         </Text>
       </div>
-      <div className={ToolTipDecoStyle}></div>
+      <div className={toolTipDecoStyle}></div>
     </div>
   );
 };
 
 export default GraphToolTip;
 
-const ToolTipContainerStyle = css({
+const toolTipContainerStyle = css({
   position: "absolute",
   width: "43px",
   height: "38px",
@@ -25,7 +25,7 @@ const ToolTipContainerStyle = css({
   zIndex: 20,
 });
 
-const ToolTipStyle = css({
+const toolTipStyle = css({
   position: "relative",
   width: "100%",
   height: "24px",
@@ -36,7 +36,7 @@ const ToolTipStyle = css({
   zIndex: 20,
 });
 
-const ToolTipDecoStyle = css({
+const toolTipDecoStyle = css({
   position: "absolute",
   bottom: 0,
   left: "50%",

apps/admin/app/studies/[studyId]/_components/statics/graph/GraphToolTip.tsx

@@ -1,7 +1,7 @@
 import { css } from "@styled-system/css";
+import { Tooltip } from "@wow-class/ui";
 import { myStudyApi } from "apis/myStudyApi";
 import { studyDetailApi } from "apis/studyDetailApi";
-import Tooltip from "components/Tooltip";
 import Link from "next/link";
 
 export const AssignmentDescription = async () => {