From 7bda770200277a138579c332a50b7a8788f394c2 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 7 Jul 2025 10:39:15 +0900
Subject: [PATCH 1/2] =?UTF-8?q?[apps/cs]=20feat:=20=ED=88=B4=ED=8C=81=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/package.json                         |  1 +
 apps/cs/src/pages/menu/ui/base-menu-form.tsx |  8 ++-
 apps/cs/src/shared/ui/info-tooltip.tsx       | 16 +++++
 apps/cs/src/shared/ui/tooltip.tsx            | 61 ++++++++++++++++++++
 pnpm-lock.yaml                               |  3 +
 5 files changed, 88 insertions(+), 1 deletion(-)
 create mode 100644 apps/cs/src/shared/ui/info-tooltip.tsx
 create mode 100644 apps/cs/src/shared/ui/tooltip.tsx

diff --git a/apps/cs/package.json b/apps/cs/package.json
index 892c9be4e..1cd5c9c2c 100644
--- a/apps/cs/package.json
+++ b/apps/cs/package.json
@@ -24,6 +24,7 @@
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.8",
     "@tanstack/react-query": "^5.67.1",
     "@tanstack/react-query-devtools": "^5.75.5",
     "@tanstack/react-table": "^8.21.2",
diff --git a/apps/cs/src/pages/menu/ui/base-menu-form.tsx b/apps/cs/src/pages/menu/ui/base-menu-form.tsx
index 26ead2bb1..d944558fc 100644
--- a/apps/cs/src/pages/menu/ui/base-menu-form.tsx
+++ b/apps/cs/src/pages/menu/ui/base-menu-form.tsx
@@ -12,6 +12,7 @@ import {
 } from "@common/components";
 import { FormItem, FormControl, FormField } from "@/shared/ui/form";
 import { MENU_TYPE, type MenuFormData } from "../model/menu-interface";
+import { InfoTooltip } from "@/shared/ui/info-tooltip";
 
 interface BaseMenuFormProps {
   form: UseFormReturn<MenuFormData>;
@@ -37,7 +38,12 @@ function BaseMenuForm({ form, menuCd }: BaseMenuFormProps) {
           </TableRow>
         )}
         <TableRow>
-          <TableHead>메뉴명</TableHead>
+          <TableHead>
+            <div className="flex items-center justify-center gap-1">
+              메뉴명
+              <InfoTooltip text="메뉴명을 입력하십시오." />
+            </div>
+          </TableHead>
           <TableCell className="border">
             <FormField
               control={form.control}
diff --git a/apps/cs/src/shared/ui/info-tooltip.tsx b/apps/cs/src/shared/ui/info-tooltip.tsx
new file mode 100644
index 000000000..11cb33e07
--- /dev/null
+++ b/apps/cs/src/shared/ui/info-tooltip.tsx
@@ -0,0 +1,16 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+
+function InfoTooltip({ text }: { text: string }) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <i className="diveicon di-info-circle" />
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{text}</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+export { InfoTooltip };
diff --git a/apps/cs/src/shared/ui/tooltip.tsx b/apps/cs/src/shared/ui/tooltip.tsx
new file mode 100644
index 000000000..c7578a4d9
--- /dev/null
+++ b/apps/cs/src/shared/ui/tooltip.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@common/components";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "origin-(--radix-tooltip-content-transform-origin) z-50 w-fit text-balance rounded-md bg-background px-3 py-1.5 text-lg text-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[-50%] rotate-45 rounded-[2px] bg-background fill-background" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 370597ad0..159a582f7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -211,6 +211,9 @@ importers:
       '@radix-ui/react-slot':
         specifier: ^1.1.2
         version: 1.1.2(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-tooltip':
+        specifier: ^1.1.8
+        version: 1.1.8(@types/react-dom@18.3.5)(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)
       '@tanstack/react-query':
         specifier: ^5.67.1
         version: 5.67.1(react@18.3.1)

From d97de2861e9d5960055ffd3237281b0cf6200a51 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 7 Jul 2025 13:31:05 +0900
Subject: [PATCH 2/2] =?UTF-8?q?[common/components]=20feat:=20TableHead=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20required=20data=20?=
 =?UTF-8?q?=EC=86=8D=EC=84=B1=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/src/pages/menu/ui/base-menu-form.tsx      | 4 ++--
 packages/common/components/src/ui/table/table.css | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/cs/src/pages/menu/ui/base-menu-form.tsx b/apps/cs/src/pages/menu/ui/base-menu-form.tsx
index d944558fc..fceb66549 100644
--- a/apps/cs/src/pages/menu/ui/base-menu-form.tsx
+++ b/apps/cs/src/pages/menu/ui/base-menu-form.tsx
@@ -38,8 +38,8 @@ function BaseMenuForm({ form, menuCd }: BaseMenuFormProps) {
           </TableRow>
         )}
         <TableRow>
-          <TableHead>
-            <div className="flex items-center justify-center gap-1">
+          <TableHead data-required>
+            <div className="ml-2 inline-flex items-center gap-1">
               메뉴명
               <InfoTooltip text="메뉴명을 입력하십시오." />
             </div>
diff --git a/packages/common/components/src/ui/table/table.css b/packages/common/components/src/ui/table/table.css
index b3a6493a6..4d25604c8 100644
--- a/packages/common/components/src/ui/table/table.css
+++ b/packages/common/components/src/ui/table/table.css
@@ -7,6 +7,10 @@
   .table-ui th {
     @apply px-4 py-[1.2rem] text-[1.3rem] font-medium leading-[1.2];
   }
+  .table-ui th[data-required]::before {
+    content: "*";
+    color: red;
+  }
   .table-ui td {
     @apply px-2 py-[1.2rem] text-[1.3rem] font-normal leading-[1.2];
   }