feat: refactor Tag component to LightTag, impl custom tooltip

academic-relations · Jan 15, 2025 · b11f524 · b11f524
1 parent 63ce216
commit b11f524
Show file tree

Hide file tree

Showing 13 changed files with 130 additions and 80 deletions.
diff --git a/packages/web/src/app/proposal/page.tsx b/packages/web/src/app/proposal/page.tsx
@@ -15,23 +15,17 @@ import {
   mockExpenditureData,
   mockIncomeData,
   mockTotalData,
+  mockViewResultData,
 } from "@sparcs-students/web/features/proposal/services/_mock/mockProposalTableData";
+import PageTitle from "@sparcs-students/web/common/components/PageTitle";
 
 const Proposal = () => (
   // const [semester, setSemester] = useState<string>(""); // 2022~2028년, 봄학기/가을학기
   // const [documentType, setDocumentType] = useState<string>(""); // 예산안, 결산안, 사업보고서, 사업계획서
   // const [organization, setOrganization] = useState<string>("");
 
   <FlexWrapper direction="column" gap={16}>
-    <Typography
-      fs={30}
-      lh={40}
-      color="GREEN.800"
-      fw="SEMIBOLD"
-      style={{ padding: "0 80px" }}
-    >
-      예결산 조회
-    </Typography>
+    <PageTitle>예결산 조회</PageTitle>
     <FlexWrapper direction="column" gap={60} style={{ padding: "32 0px" }}>
       <FlexWrapper direction="column" gap={32} style={{ padding: "0 100px" }}>
         <FlexWrapper direction="column" gap={16}>
@@ -45,13 +39,7 @@ const Proposal = () => (
         </FlexWrapper>
       </FlexWrapper>
       <FlexWrapper direction="column" gap={32} style={{ padding: "0 100px" }}>
-        <ViewResult
-          fileName="전산학부 24년도 예산안"
-          organization="전산학부"
-          period="2024년도 하반기"
-          headPerson="김스튜"
-          submitDate={new Date("2025-01-10")}
-        />
+        <ViewResult {...mockViewResultData} />
 
         <IncomeTable data={mockIncomeData} />
         <ExpenditureTable data={mockExpenditureData} />

diff --git a/packages/web/src/common/components/PageTitle.tsx b/packages/web/src/common/components/PageTitle.tsx
@@ -7,10 +7,11 @@ const PageTitleInner = styled.div`
   position: relative;
   width: fit-content;
   font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD};
-  font-size: 32px;
-  line-height: 48px;
+  font-size: 30px;
+  line-height: 40px;
   font-weight: ${({ theme }) => theme.fonts.WEIGHT.SEMIBOLD};
-  color: ${({ theme }) => theme.colors.BLACK};
+  color: ${({ theme }) => theme.colors.GREEN[800]};
+  padding: 0 80px;
 `;
 
 const PageTitle: React.FC<React.PropsWithChildren> = ({

diff --git a/...ges/web/src/common/components/Tag/Tag.tsx → ...eb/src/common/components/Tag/LightTag.tsx b/...ges/web/src/common/components/Tag/Tag.tsx → ...eb/src/common/components/Tag/LightTag.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-type TagColor =
+export type LightTagColor =
   | "GREEN800"
   | "GREEN600"
   | "GREEN100"
@@ -20,7 +20,7 @@ type TagColor =
   | "THISTLE"
   | "CHERRY";
 
-const TagInner = styled.div<{ color: TagColor; width: string }>`
+const TagInner = styled.div<{ color: LightTagColor; width: string }>`
   position: relative;
   width: ${({ width }) => width};
   padding: ${({ width }) => (width === "fit-content" ? "4px 12px" : "4px 0px")};
@@ -89,11 +89,11 @@ const TagInner = styled.div<{ color: TagColor; width: string }>`
 `;
 
 interface TagProps extends React.PropsWithChildren {
-  color?: TagColor;
+  color?: LightTagColor;
   width?: string;
 }
 
-const Tag: React.FC<TagProps> = ({
+const LightTag: React.FC<TagProps> = ({
   children = <div />,
   color = "BLUE",
   width = "fit-content",
@@ -103,5 +103,4 @@ const Tag: React.FC<TagProps> = ({
   </TagInner>
 );
 
-export type { TagColor };
-export default Tag;
+export default LightTag;
diff --git a/packages/web/src/features/proposal/components/ExpenditureTable.tsx b/packages/web/src/features/proposal/components/ExpenditureTable.tsx
@@ -13,7 +13,7 @@ import {
   BudgetDivisionIncomeE,
   BudgetDomainE,
 } from "@sparcs-students/interface/common/enum/budget.enum";
-import Tag from "@sparcs-students/web/common/components/Tag/Tag";
+import LightTag from "@sparcs-students/web/common/components/Tag/LightTag";
 import {
   getDarkTagDetail,
   getTagDetail,
@@ -26,8 +26,7 @@ import {
 import { useFormatter } from "next-intl";
 import DetailButton from "@sparcs-students/web/features/proposal/components/_atomic/DetailButton";
 import DarkTag from "@sparcs-students/web/common/components/Tag/DarkTag";
-import { Tooltip } from "@mui/material";
-import HelpOutlineButton from "@mui/icons-material/HelpOutline";
+import ExpenditureHelpButton from "./_atomic/ExpenditureHelpButton";
 
 export interface ExpenditureProps {
   code: number;
@@ -57,15 +56,15 @@ const columns = [
       switch (Math.trunc(info.getValue() / 100)) {
         case 1:
         case 4:
-          return <Tag color="BLUE">{info.getValue()}</Tag>;
+          return <LightTag color="BLUE">{info.getValue()}</LightTag>;
         case 2:
         case 5:
-          return <Tag color="YELLOW">{info.getValue()}</Tag>;
+          return <LightTag color="YELLOW">{info.getValue()}</LightTag>;
         case 3:
         case 6:
-          return <Tag color="PINK">{info.getValue()}</Tag>;
+          return <LightTag color="PINK">{info.getValue()}</LightTag>;
         default:
-          return <Tag color="GRAY">-</Tag>;
+          return <LightTag color="GRAY">-</LightTag>;
       }
     },
     size: 80,
@@ -78,7 +77,7 @@ const columns = [
         info.getValue(),
         budgetDomainTagList,
       );
-      return <Tag color={color}>{text}</Tag>;
+      return <LightTag color={color}>{text}</LightTag>;
     },
     size: 80,
   }),
@@ -90,7 +89,7 @@ const columns = [
         info.getValue(),
         budgetDivisionIncomeTagList,
       );
-      return <Tag color={color}>{text}</Tag>;
+      return <LightTag color={color}>{text}</LightTag>;
     },
     size: 120,
   }),
@@ -141,12 +140,16 @@ const columns = [
     header: "비율",
     cell: info => {
       if (info.getValue() > 100) {
-        return <Tag color="CHERRY">{info.getValue().toFixed(1)}%</Tag>;
+        return (
+          <LightTag color="CHERRY">{info.getValue().toFixed(1)}%</LightTag>
+        );
       }
       if (info.getValue() <= 100) {
-        return <Tag color="THISTLE">{info.getValue().toFixed(1)}%</Tag>;
+        return (
+          <LightTag color="THISTLE">{info.getValue().toFixed(1)}%</LightTag>
+        );
       }
-      return <Tag color="GRAY">-</Tag>;
+      return <LightTag color="GRAY">-</LightTag>;
     },
     size: 90,
   }),
@@ -168,10 +171,10 @@ const columns = [
         case "사후승인":
           return <DarkTag color="TEAL">{info.getValue()}</DarkTag>;
         default:
-          return <Tag color="GRAY">-</Tag>;
+          return <LightTag color="GRAY">-</LightTag>;
       }
     },
-    // TODO: Add Tag by enum
+    // TODO: Add LightTag by enum
     size: 90,
   }),
   columnHelper.accessor("explanation", {
@@ -196,9 +199,7 @@ const ExpenditureTable: React.FC<ExpenditureTableProps> = ({ data }) => {
         <Typography fs={24} lh={30} color="BLACK" fw="SEMIBOLD">
           지출
         </Typography>
-        <Tooltip title="지출 항목을 클릭하면 각 사업의 상세 설명을 확인할 수 있습니다.">
-          <HelpOutlineButton />
-        </Tooltip>
+        <ExpenditureHelpButton />
       </FlexWrapper>
 
       <Table table={table} />

diff --git a/packages/web/src/features/proposal/components/IncomeTable.tsx b/packages/web/src/features/proposal/components/IncomeTable.tsx
@@ -8,7 +8,7 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import Table from "@sparcs-students/web/common/components/Table";
-import Tag from "@sparcs-students/web/common/components/Tag/Tag";
+import LightTag from "@sparcs-students/web/common/components/Tag/LightTag";
 import { getTagDetail } from "@sparcs-students/web/utils/getTagDetail";
 import {
   budgetDivisionIncomeTagList,
@@ -48,15 +48,15 @@ const columns = [
       switch (Math.trunc(info.getValue() / 100)) {
         case 1:
         case 4:
-          return <Tag color="BLUE">{info.getValue()}</Tag>;
+          return <LightTag color="BLUE">{info.getValue()}</LightTag>;
         case 2:
         case 5:
-          return <Tag color="YELLOW">{info.getValue()}</Tag>;
+          return <LightTag color="YELLOW">{info.getValue()}</LightTag>;
         case 3:
         case 6:
-          return <Tag color="PINK">{info.getValue()}</Tag>;
+          return <LightTag color="PINK">{info.getValue()}</LightTag>;
         default:
-          return <Tag color="GRAY">-</Tag>;
+          return <LightTag color="GRAY">-</LightTag>;
       }
     },
     size: 80,
@@ -69,7 +69,7 @@ const columns = [
         info.getValue(),
         budgetDomainTagList,
       );
-      return <Tag color={color}>{text}</Tag>;
+      return <LightTag color={color}>{text}</LightTag>;
     },
     size: 80,
   }),
@@ -81,7 +81,7 @@ const columns = [
         info.getValue(),
         budgetDivisionIncomeTagList,
       );
-      return <Tag color={color}>{text}</Tag>;
+      return <LightTag color={color}>{text}</LightTag>;
     },
     size: 120,
   }),
@@ -120,12 +120,16 @@ const columns = [
     header: "비율",
     cell: info => {
       if (info.getValue() > 100) {
-        return <Tag color="CHERRY">{info.getValue().toFixed(1)}%</Tag>;
+        return (
+          <LightTag color="CHERRY">{info.getValue().toFixed(1)}%</LightTag>
+        );
       }
       if (info.getValue() <= 100) {
-        return <Tag color="THISTLE">{info.getValue().toFixed(1)}%</Tag>;
+        return (
+          <LightTag color="THISTLE">{info.getValue().toFixed(1)}%</LightTag>
+        );
       }
-      return <Tag color="GRAY">-</Tag>;
+      return <LightTag color="GRAY">-</LightTag>;
     },
     size: 90,
   }),
@@ -147,10 +151,10 @@ const columns = [
         case "사후승인":
           return <DarkTag color="TEAL">{info.getValue()}</DarkTag>;
         default:
-          return <Tag color="GRAY">-</Tag>;
+          return <LightTag color="GRAY">-</LightTag>;
       }
     },
-    // TODO: Add Tag by enum
+    // TODO: Add LightTag by enum
     size: 90,
   }),
   columnHelper.accessor("explanation", {

diff --git a/packages/web/src/features/proposal/components/TotalTable.tsx b/packages/web/src/features/proposal/components/TotalTable.tsx
@@ -10,7 +10,7 @@ import {
 import Table from "@sparcs-students/web/common/components/Table";
 import { BudgetDomainE } from "@sparcs-students/interface/common/enum/budget.enum";
 import { useFormatter } from "next-intl";
-import Tag from "@sparcs-students/web/common/components/Tag/Tag";
+import LightTag from "@sparcs-students/web/common/components/Tag/LightTag";
 import { getTagDetail } from "@sparcs-students/web/utils/getTagDetail";
 import { budgetDomainTagList } from "@sparcs-students/web/constants/tableTagList";
 
@@ -37,7 +37,7 @@ const columns = [
         info.getValue(),
         budgetDomainTagList,
       );
-      return <Tag color={color}>{text}</Tag>;
+      return <LightTag color={color}>{text}</LightTag>;
     },
     size: 150,
   }),
@@ -47,13 +47,13 @@ const columns = [
     cell: info => {
       switch (info.getValue()) {
         case "수입":
-          return <Tag color="GREEN100">{info.getValue()}</Tag>;
+          return <LightTag color="GREEN100">{info.getValue()}</LightTag>;
         case "지출":
-          return <Tag color="GREEN600">{info.getValue()}</Tag>;
+          return <LightTag color="GREEN600">{info.getValue()}</LightTag>;
         case "총계":
-          return <Tag color="GREEN800">{info.getValue()}</Tag>;
+          return <LightTag color="GREEN800">{info.getValue()}</LightTag>;
         default:
-          return <Tag color="GRAY">-</Tag>;
+          return <LightTag color="GRAY">-</LightTag>;
       }
       // TODO: use enum for return
     },
@@ -88,12 +88,16 @@ const columns = [
     header: "비율",
     cell: info => {
       if (info.getValue() > 100) {
-        return <Tag color="CHERRY">{info.getValue().toFixed(1)}%</Tag>;
+        return (
+          <LightTag color="CHERRY">{info.getValue().toFixed(1)}%</LightTag>
+        );
       }
       if (info.getValue() <= 100) {
-        return <Tag color="THISTLE">{info.getValue().toFixed(1)}%</Tag>;
+        return (
+          <LightTag color="THISTLE">{info.getValue().toFixed(1)}%</LightTag>
+        );
       }
-      return <Tag color="GRAY">-</Tag>;
+      return <LightTag color="GRAY">-</LightTag>;
     },
     size: 150,
   }),

diff --git a/packages/web/src/features/proposal/components/ViewResult.tsx b/packages/web/src/features/proposal/components/ViewResult.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 
 import FlexWrapper from "@sparcs-students/web/common/components/FlexWrapper";
@@ -12,7 +10,7 @@ import {
 } from "@tanstack/react-table";
 import Table from "@sparcs-students/web/common/components/Table";
 
-interface ViewResultProps {
+export interface ViewResultProps {
   fileName: string;
   organization: string;
   period: string;
@@ -56,11 +54,11 @@ const columns = [
 ];
 
 const ViewResult: React.FC<ViewResultProps> = ({
-  fileName = "전산학부 24년도 예산안",
-  organization = "전산학부",
-  period = "2024년도 하반기",
-  headPerson = "김스튜",
-  submitDate = new Date(),
+  fileName,
+  organization,
+  period,
+  headPerson,
+  submitDate,
 }) => {
   const tableData = [
     {