From fa657404fc392e613c7857f12715a2cdf258ac7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=84=9C=EC=A0=9C=EA=B2=BD?= <seojk0315@naver.com>
Date: Thu, 26 Feb 2026 20:48:58 +0900
Subject: [PATCH 1/8] =?UTF-8?q?refactor:=20index.css=20=ED=8F=B0=ED=8A=B8?=
 =?UTF-8?q?=20=EB=B0=8F=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=8B=9C=EC=8A=A4?=
 =?UTF-8?q?=ED=85=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/button/Button.stories.tsx          |   2 +-
 src/components/common/button/Button.tsx       |   2 +-
 .../modal/privacyModal/AgreementItem.tsx      |   2 +-
 src/components/workspace/WorkspaceCard.tsx    |   2 +-
 src/index.css                                 |   8 +-
 src/pages/auth/Signup.tsx                     |   8 +-
 src/pages/workspace/Workspace.tsx             |   8 +-
 src/pages/workspace/WorkspaceSetting.tsx      |   6 +-
 src/stories/Typography.stories.tsx            | 104 ++++++++++++++++++
 9 files changed, 126 insertions(+), 16 deletions(-)
 create mode 100644 src/stories/Typography.stories.tsx

diff --git a/src/components/common/button/Button.stories.tsx b/src/components/common/button/Button.stories.tsx
index 971560d..fedd818 100644
--- a/src/components/common/button/Button.stories.tsx
+++ b/src/components/common/button/Button.stories.tsx
@@ -66,7 +66,7 @@ export const Sizes: TButtonStory = {
 
 export const FullWidth: TButtonStory = {
   render: () => (
-    <div className="w-[360px]">
+    <div className="w-90">
       <Button fullWidth variant="primary">
         Full width
       </Button>
diff --git a/src/components/common/button/Button.tsx b/src/components/common/button/Button.tsx
index f0ac644..9d61a00 100644
--- a/src/components/common/button/Button.tsx
+++ b/src/components/common/button/Button.tsx
@@ -29,7 +29,7 @@ export default function Button({
   ...rest
 }: IButtonProps) {
   const sizeClasses = {
-    big: "h-button-big px-6 rounded-component-md font-heading3 transition-colors duration-normal ease-out",
+    big: "h-button-big px-6 rounded-component-md font-heading4 transition-colors duration-normal ease-out",
     small:
       "h-button-small px-4 rounded-component-sm font-body1 transition-colors duration-normal ease-out",
   };
diff --git a/src/components/modal/privacyModal/AgreementItem.tsx b/src/components/modal/privacyModal/AgreementItem.tsx
index a9d6ef3..5762501 100644
--- a/src/components/modal/privacyModal/AgreementItem.tsx
+++ b/src/components/modal/privacyModal/AgreementItem.tsx
@@ -13,7 +13,7 @@ type TAgreementItemProps = {
 const markdownComponents: Components = {
   h2: ({ ...props }) => (
     <h2
-      className="font-heading3 text-text-main font-bold mb-2 mt-4 first:mt-0"
+      className="font-heading4 text-text-main font-bold mb-2 mt-4 first:mt-0"
       {...props}
     />
   ),
diff --git a/src/components/workspace/WorkspaceCard.tsx b/src/components/workspace/WorkspaceCard.tsx
index ee83f66..e0f7a9d 100644
--- a/src/components/workspace/WorkspaceCard.tsx
+++ b/src/components/workspace/WorkspaceCard.tsx
@@ -33,7 +33,7 @@ export default function WorkspaceCard({ workspace: w, menuItems }: TProps) {
         </div>
 
         <div className="min-w-0">
-          <div className="font-heading3 text-text-main truncate">{w.name}</div>
+          <div className="font-heading4 text-text-main truncate">{w.name}</div>
           <div className="font-body1 text-text-main mt-1 truncate">
             {w.description ?? ""}
           </div>
diff --git a/src/index.css b/src/index.css
index 6f26af0..0641924 100644
--- a/src/index.css
+++ b/src/index.css
@@ -188,6 +188,12 @@ button {
   }
 
   .font-heading3 {
+    font-size: 24px;
+    font-weight: 500;
+    line-height: 130%;
+  }
+
+  .font-heading4 {
     font-size: 18px;
     font-weight: 400;
     line-height: 130%;
@@ -213,7 +219,7 @@ button {
 
   .font-label {
     font-size: 14px;
-    font-weight: 700;
+    font-weight: 600;
     line-height: 140%;
   }
 
diff --git a/src/pages/auth/Signup.tsx b/src/pages/auth/Signup.tsx
index e1af688..13a9347 100644
--- a/src/pages/auth/Signup.tsx
+++ b/src/pages/auth/Signup.tsx
@@ -49,7 +49,7 @@ export default function Signup() {
           variant="gradient"
           leftIcon={<MailIcon className="w-6 h-6" />}
           onClick={() => setStep(1)}
-          className="font-heading3 shadow-md hover:shadow-lg transition-all"
+          className="font-heading4 shadow-md hover:shadow-lg transition-all"
         >
           이메일로 시작하기
         </Button>
@@ -60,7 +60,7 @@ export default function Signup() {
           variant="custom"
           leftIcon={<GoogleIcon className="w-6 h-6" />}
           onClick={() => handleSocialLogin("google")}
-          className="bg-white border border-gray-100 text-text-main font-heading3 shadow-sm hover:bg-gray-50"
+          className="bg-white border border-gray-100 text-text-main font-heading4 shadow-sm hover:bg-gray-50"
         >
           구글 로그인
         </Button>
@@ -71,7 +71,7 @@ export default function Signup() {
           variant="custom"
           leftIcon={<KakaoIcon className="w-6 h-6" />}
           onClick={() => handleSocialLogin("kakao")}
-          className="bg-social-kakao text-text-main font-heading3 shadow-sm hover:opacity-90"
+          className="bg-social-kakao text-text-main font-heading4 shadow-sm hover:opacity-90"
         >
           카카오 로그인
         </Button>
@@ -82,7 +82,7 @@ export default function Signup() {
           variant="custom"
           leftIcon={<NaverIcon className="w-5 h-5 text-white" />}
           onClick={() => handleSocialLogin("naver")}
-          className="bg-social-naver text-white font-heading3 shadow-sm hover:opacity-90"
+          className="bg-social-naver text-white font-heading4 shadow-sm hover:opacity-90"
         >
           네이버 로그인
         </Button>
diff --git a/src/pages/workspace/Workspace.tsx b/src/pages/workspace/Workspace.tsx
index c2b2625..0b107c1 100644
--- a/src/pages/workspace/Workspace.tsx
+++ b/src/pages/workspace/Workspace.tsx
@@ -160,15 +160,15 @@ export default function WorkspacePage() {
         padding="lg"
       >
         <div className="px-2">
-          <h2 className="font-heading3 text-text-main mb-2">
+          <h2 className="font-heading4 text-text-main mb-2">
             워크스페이스 생성
           </h2>
           <p className="font-body1 text-text-sub mb-6">
             워크스페이스를 생성한 사용자는 자동으로 관리자 권한을 갖습니다.{" "}
             <br /> 로고 이미지와 기본 정보를 입력해 주세요.
           </p>
-          <div className="space-y-6 mx-auto w-full max-w-[800px]">
-            <div className="max-w-[560px] mx-auto w-full mb-10">
+          <div className="space-y-6 mx-auto w-full max-w-200">
+            <div className="max-w-140 mx-auto w-full mb-10">
               <input
                 ref={fileRef}
                 type="file"
@@ -191,7 +191,7 @@ export default function WorkspacePage() {
                 type="button"
                 aria-label="로고 이미지 업로드"
                 onClick={openFile}
-                className="w-full rounded-component-lg border border-gray-100 bg-gray-50 h-[260px] flex items-center justify-center hover:bg-gray-100 transition-colors"
+                className="w-full rounded-component-lg border border-gray-100 bg-gray-50 h-65 flex items-center justify-center hover:bg-gray-100 transition-colors"
               >
                 <span className="text-text-sub">
                   <UpLoadImgIcon />
diff --git a/src/pages/workspace/WorkspaceSetting.tsx b/src/pages/workspace/WorkspaceSetting.tsx
index 051c4b5..f9ffa82 100644
--- a/src/pages/workspace/WorkspaceSetting.tsx
+++ b/src/pages/workspace/WorkspaceSetting.tsx
@@ -33,7 +33,7 @@ export default function WorkspaceSetting() {
         </p>
       </header>
       <div className="bg-white border border-gray-100 rounded-component-lg p-8 shadow-sm">
-        <h2 className="font-heading3 text-text-main">기본 정보</h2>
+        <h2 className="font-heading4 text-text-main">기본 정보</h2>
         <p className="font-body2 text-text-sub mt-2">
           워크스페이스의 대표적인 정보를 설정합니다.
         </p>
@@ -78,7 +78,7 @@ export default function WorkspaceSetting() {
               </label>
               <textarea
                 id="workspace-setting-desc"
-                className="w-full min-h-[220px] rounded-component-md bg-gray-50 px-5 py-4 outline-none transition-smooth hover:bg-gray-100 focus:bg-white focus:ring-2 focus:ring-logo-1/30 text-body1 text-text-main placeholder:text-text-placeholder"
+                className="w-full min-h-55 rounded-component-md bg-gray-50 px-5 py-4 outline-none transition-smooth hover:bg-gray-100 focus:bg-white focus:ring-2 focus:ring-logo-1/30 text-body1 text-text-main placeholder:text-text-placeholder"
                 placeholder="워크스페이스에 대한 설명을 입력해주세요"
                 value={desc}
                 onChange={(e) => setDesc(e.target.value)}
@@ -103,7 +103,7 @@ export default function WorkspaceSetting() {
         <div className="flex gap-4 sm:gap-8 items-start sm:items-center">
           <WarningIcon />
           <div>
-            <div className="text-status-red font-heading3">
+            <div className="text-status-red font-heading4">
               워크스페이스 삭제
             </div>
             <p className="font-body1 text-text-auth-sub mt-2">
diff --git a/src/stories/Typography.stories.tsx b/src/stories/Typography.stories.tsx
new file mode 100644
index 0000000..ba32b9b
--- /dev/null
+++ b/src/stories/Typography.stories.tsx
@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+const fontTokens = [
+  {
+    className: "font-hero",
+    label: "Hero",
+    size: "54px",
+    weight: "700",
+    lineHeight: "140%",
+  },
+  {
+    className: "font-heading1",
+    label: "Heading 1",
+    size: "30px",
+    weight: "600",
+    lineHeight: "130%",
+  },
+  {
+    className: "font-heading2",
+    label: "Heading 2",
+    size: "28px",
+    weight: "600",
+    lineHeight: "130%",
+  },
+  {
+    className: "font-heading3",
+    label: "Heading 3",
+    size: "24px",
+    weight: "500",
+    lineHeight: "130%",
+  },
+  {
+    className: "font-heading4",
+    label: "Heading 4",
+    size: "18px",
+    weight: "400",
+    lineHeight: "130%",
+  },
+  {
+    className: "font-body1",
+    label: "Body 1",
+    size: "16px",
+    weight: "500",
+    lineHeight: "140%",
+  },
+  {
+    className: "font-body2",
+    label: "Body 2",
+    size: "14px",
+    weight: "500",
+    lineHeight: "140%",
+  },
+  {
+    className: "font-label",
+    label: "Label",
+    size: "14px",
+    weight: "600",
+    lineHeight: "140%",
+  },
+  {
+    className: "font-caption",
+    label: "Caption",
+    size: "12px",
+    weight: "500",
+    lineHeight: "130%",
+  },
+];
+
+function TypographyDoc() {
+  return (
+    <div className="p-8 space-y-2 max-w-2xl">
+      <div className="grid grid-cols-[120px_1fr_80px_60px_60px] gap-x-4 pb-2 border-b border-gray-200 text-xs text-gray-400 font-medium uppercase tracking-wide">
+        <span>Token</span>
+        <span>Sample</span>
+        <span>Size</span>
+        <span>Weight</span>
+        <span>Leading</span>
+      </div>
+      {fontTokens.map(({ className, label, size, weight, lineHeight }) => (
+        <div
+          key={className}
+          className="grid grid-cols-[120px_1fr_80px_60px_60px] gap-x-4 items-baseline py-3 border-b border-gray-100"
+        >
+          <span className="text-xs text-gray-400 font-mono">.{className}</span>
+          <span className={className}>{label} — 가나다라마바사</span>
+          <span className="text-xs text-gray-400">{size}</span>
+          <span className="text-xs text-gray-400">{weight}</span>
+          <span className="text-xs text-gray-400">{lineHeight}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const meta: Meta = {
+  title: "Design Tokens/Typography",
+  component: TypographyDoc,
+  parameters: { layout: "fullscreen" },
+};
+
+export default meta;
+type TStory = StoryObj;
+
+export const All: TStory = {};

From 33e3600c70cb243d0f69da90c4f83e35ff9569d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=84=9C=EC=A0=9C=EA=B2=BD?= <seojk0315@naver.com>
Date: Thu, 26 Feb 2026 21:08:51 +0900
Subject: [PATCH 2/8] =?UTF-8?q?feat:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?=
 =?UTF-8?q?=EB=B6=81=20=EB=94=94=EC=9E=90=EC=9D=B8=EC=8B=9C=EC=8A=A4?=
 =?UTF-8?q?=ED=85=9C=20=EC=A0=95=EC=9D=98=20=EB=B0=8F=20=EC=82=AC=EC=9D=B4?=
 =?UTF-8?q?=EB=93=9C=EB=B0=94=20=ED=98=B8=EB=B2=84=EC=83=89=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Sidebar/Sidebar.tsx   |   8 +-
 src/index.css                        |   1 +
 src/stories/BorderRadius.stories.tsx |  57 ++++++++++++++
 src/stories/Colors.stories.tsx       | 111 +++++++++++++++++++++++++++
 src/stories/Shadows.stories.tsx      |  47 ++++++++++++
 5 files changed, 220 insertions(+), 4 deletions(-)
 create mode 100644 src/stories/BorderRadius.stories.tsx
 create mode 100644 src/stories/Colors.stories.tsx
 create mode 100644 src/stories/Shadows.stories.tsx

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index f43788a..2f15656 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -13,7 +13,7 @@ function getMainItemClass(isActive: boolean, isCollapsed: boolean) {
     isCollapsed ? "h-13 w-13 mx-auto justify-center" : "h-[55px] gap-4 px-3",
     isActive
       ? "bg-chart-3 text-white"
-      : "text-text-auth-sub hover:bg-[#F6F6F6]",
+      : "text-text-auth-sub hover:bg-bg-surface",
   ].join(" ");
 }
 
@@ -69,7 +69,7 @@ export default function Sidebar() {
             setIsCollapsed((prev) => !prev);
             setOpenId(null);
           }}
-          className="absolute -right-3 top-10 flex h-6 w-6 items-center justify-center rounded-md bg-white border border-[#F6F6F6] transition hover:bg-[#F6F6F6]"
+          className="absolute -right-3 top-10 flex h-6 w-6 items-center justify-center rounded-md bg-white border border-bg-surface transition hover:bg-bg-surface"
         >
           <CollapseIcon
             className={[
@@ -182,7 +182,7 @@ export default function Sidebar() {
                               "pl-4 flex h-10 items-center rounded-xl px-3 text-sm transition-colors",
                               isActive
                                 ? "bg-chart-3 text-white"
-                                : "text-text-auth-sub hover:bg-[#F6F6F6]",
+                                : "text-text-auth-sub hover:bg-bg-surface",
                             ].join(" ")
                           }
                         >
@@ -204,7 +204,7 @@ export default function Sidebar() {
                               "flex h-10 items-center rounded-xl px-3 text-sm transition-colors",
                               isActive
                                 ? "bg-chart-3 text-white"
-                                : "text-text-auth-sub hover:bg-[#F6F6F6]",
+                                : "text-text-auth-sub hover:bg-bg-surface",
                             ].join(" ")
                           }
                         >
diff --git a/src/index.css b/src/index.css
index 0641924..44536a7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -56,6 +56,7 @@ button {
   --color-text-placeholder: #c3c3c3;
   --color-text-disabled: #b0b8c1;
   --color-bg-disabled: #e5e8eb;
+  --color-bg-surface: #f6f6f6;
 
   --color-social-kakao: #fee500;
   --color-social-naver: #03c75a;
diff --git a/src/stories/BorderRadius.stories.tsx b/src/stories/BorderRadius.stories.tsx
new file mode 100644
index 0000000..ae441a1
--- /dev/null
+++ b/src/stories/BorderRadius.stories.tsx
@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+const radiusTokens = [
+  {
+    className: "rounded-component-sm",
+    label: "Component SM",
+    value: "0.5rem (8px)",
+  },
+  {
+    className: "rounded-component-md",
+    label: "Component MD",
+    value: "1rem (16px)",
+  },
+  {
+    className: "rounded-component-lg",
+    label: "Component LG",
+    value: "1.5rem (24px)",
+  },
+  { className: "rounding-15", label: "Rounding 15", value: "15px" },
+  { className: "rounding-20", label: "Rounding 20", value: "20px" },
+  { className: "rounding-30", label: "Rounding 30", value: "30px" },
+];
+
+function BorderRadiusDoc() {
+  return (
+    <div className="p-8 space-y-2 max-w-2xl">
+      <div className="grid grid-cols-[180px_1fr_140px] gap-x-4 pb-2 border-b border-gray-200 text-xs text-gray-400 font-medium uppercase tracking-wide">
+        <span>Token</span>
+        <span>Preview</span>
+        <span>Value</span>
+      </div>
+      {radiusTokens.map(({ className, value }) => (
+        <div
+          key={className}
+          className="grid grid-cols-[180px_1fr_140px] gap-x-4 items-center py-4 border-b border-gray-100"
+        >
+          <span className="text-xs text-gray-400 font-mono">.{className}</span>
+          <div
+            className={`w-20 h-12 bg-brand-400 border border-brand-500 ${className}`}
+          />
+          <span className="text-xs text-gray-400">{value}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const meta: Meta = {
+  title: "Design Tokens/Border Radius",
+  component: BorderRadiusDoc,
+  parameters: { layout: "fullscreen" },
+};
+
+export default meta;
+type TStory = StoryObj;
+
+export const All: TStory = {};
diff --git a/src/stories/Colors.stories.tsx b/src/stories/Colors.stories.tsx
new file mode 100644
index 0000000..d583285
--- /dev/null
+++ b/src/stories/Colors.stories.tsx
@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+const colorGroups = [
+  {
+    label: "Brand",
+    colors: [
+      { name: "brand-900", value: "#000000" },
+      { name: "brand-800", value: "#001f5b" },
+      { name: "brand-700", value: "#213e68" },
+      { name: "brand-600", value: "#466a9c" },
+      { name: "brand-500", value: "#88c1ff" },
+      { name: "brand-400", value: "#dce7f2" },
+      { name: "brand-300", value: "#f9fafb" },
+      { name: "brand-200", value: "#ffffff" },
+    ],
+  },
+  {
+    label: "Logo",
+    colors: [
+      { name: "logo-1", value: "#2eb4ff" },
+      { name: "logo-2", value: "#6088fe" },
+    ],
+  },
+  {
+    label: "Status",
+    colors: [
+      { name: "status-red", value: "#ff2a4b" },
+      { name: "status-blue", value: "#0084fe" },
+      { name: "status-green", value: "#22c55e" },
+      { name: "status-yellow", value: "#facc15" },
+    ],
+  },
+  {
+    label: "Text",
+    colors: [
+      { name: "text-main", value: "#212121" },
+      { name: "text-auth-sub", value: "#546171" },
+      { name: "text-sub", value: "#8b8b8f" },
+      { name: "text-placeholder", value: "#c3c3c3" },
+      { name: "text-disabled", value: "#b0b8c1" },
+      { name: "bg-disabled", value: "#e5e8eb" },
+      { name: "bg-surface", value: "#f6f6f6" },
+    ],
+  },
+  {
+    label: "Social",
+    colors: [
+      { name: "social-kakao", value: "#fee500" },
+      { name: "social-naver", value: "#03c75a" },
+      { name: "social-google", value: "#ffffff" },
+    ],
+  },
+  {
+    label: "Chart",
+    colors: [
+      { name: "chart-1", value: "#0a3d91" },
+      { name: "chart-2", value: "#0056b3" },
+      { name: "chart-3", value: "#1485ff" },
+      { name: "chart-4", value: "#00aeef" },
+      { name: "chart-5", value: "#4fc3f7" },
+      { name: "chart-inactive", value: "#f2f4f6" },
+    ],
+  },
+];
+
+function ColorDoc() {
+  return (
+    <div className="p-8 space-y-8 max-w-3xl">
+      {colorGroups.map(({ label, colors }) => (
+        <div key={label}>
+          <h2 className="text-xs text-gray-400 font-medium uppercase tracking-wide mb-3">
+            {label}
+          </h2>
+          <div className="flex flex-wrap gap-4">
+            {colors.map(({ name, value }) => (
+              <div key={name} className="flex flex-col gap-1.5 w-24">
+                <div
+                  className="w-24 h-12 rounded-lg border border-gray-300 overflow-hidden"
+                  style={{
+                    backgroundImage:
+                      "linear-gradient(45deg, #d1d5db 25%, transparent 25%), linear-gradient(-45deg, #d1d5db 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d1d5db 75%), linear-gradient(-45deg, transparent 75%, #d1d5db 75%)",
+                    backgroundSize: "8px 8px",
+                    backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0px",
+                  }}
+                >
+                  <div
+                    className="w-full h-full"
+                    style={{ backgroundColor: value }}
+                  />
+                </div>
+                <span className="text-xs text-gray-500 font-mono">{name}</span>
+                <span className="text-xs text-gray-400">{value}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const meta: Meta = {
+  title: "Design Tokens/Colors",
+  component: ColorDoc,
+  parameters: { layout: "fullscreen" },
+};
+
+export default meta;
+type TStory = StoryObj;
+
+export const All: TStory = {};
diff --git a/src/stories/Shadows.stories.tsx b/src/stories/Shadows.stories.tsx
new file mode 100644
index 0000000..ad62d8e
--- /dev/null
+++ b/src/stories/Shadows.stories.tsx
@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+const shadowTokens = [
+  {
+    className: "shadow-Soft",
+    label: "Soft",
+    value: "0px 0px 16px 0px rgba(0, 0, 0, 0.1)",
+  },
+  {
+    className: "shadow-Medium",
+    label: "Medium",
+    value: "0px 0px 16px 0px rgba(0, 0, 0, 0.2)",
+  },
+];
+
+function ShadowDoc() {
+  return (
+    <div className="p-8 space-y-2 max-w-2xl">
+      <div className="grid grid-cols-[140px_1fr_280px] gap-x-4 pb-2 border-b border-gray-200 text-xs text-gray-400 font-medium uppercase tracking-wide">
+        <span>Token</span>
+        <span>Preview</span>
+        <span>Value</span>
+      </div>
+      {shadowTokens.map(({ className, value }) => (
+        <div
+          key={className}
+          className="grid grid-cols-[140px_1fr_280px] gap-x-4 items-center py-6 border-b border-gray-100"
+        >
+          <span className="text-xs text-gray-400 font-mono">.{className}</span>
+          <div className={`w-24 h-14 bg-white rounded-lg ${className}`} />
+          <span className="text-xs text-gray-400">{value}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const meta: Meta = {
+  title: "Design Tokens/Shadows",
+  component: ShadowDoc,
+  parameters: { layout: "fullscreen" },
+};
+
+export default meta;
+type TStory = StoryObj;
+
+export const All: TStory = {};

From bc1f994da13611e94e8a08f3b269d6338edbf56b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=84=9C=EC=A0=9C=EA=B2=BD?= <seojk0315@naver.com>
Date: Thu, 26 Feb 2026 21:14:41 +0900
Subject: [PATCH 3/8] =?UTF-8?q?fix:=20border=20=EC=A4=91=EB=B3=B5=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20=EC=82=AC=EC=9A=A9=EC=B2=98=20?=
 =?UTF-8?q?=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Sidebar/Sidebar.tsx            | 14 ++++++------
 src/components/auth/common/InputActions.tsx   |  2 +-
 .../auth/flows/find-email/EnterPhoneStep.tsx  |  2 +-
 .../flows/find-email/ShowEmailResultStep.tsx  |  4 ++--
 .../reset-password/EmailVerificationStep.tsx  |  2 +-
 .../auth/flows/signup/EnterEmailStep.tsx      |  2 +-
 .../auth/skeleton/AuthFormSkeleton.tsx        |  8 +++----
 .../auth/skeleton/LoginPageSkeleton.tsx       |  6 ++---
 .../auth/skeleton/SignupEmailStepSkeleton.tsx |  8 +++----
 .../auth/skeleton/SignupPageSkeleton.tsx      |  8 +++----
 src/components/common/alert/Alert.tsx         |  2 +-
 .../common/dropdownmenu/DropdownMenu.tsx      |  4 ++--
 src/components/workspace/WorkspaceCard.tsx    |  2 +-
 src/index.css                                 | 12 ----------
 src/stories/BorderRadius.stories.tsx          | 22 +++++++++++++------
 15 files changed, 47 insertions(+), 51 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 2f15656..95fb98e 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -9,7 +9,7 @@ import Logo from "@/assets/logo/symbol-color.svg?react";
 
 function getMainItemClass(isActive: boolean, isCollapsed: boolean) {
   return [
-    "flex items-center rounded-xl px-3 text-sm cursor-pointer transition-colors",
+    "flex items-center rounded-component-md px-3 text-sm cursor-pointer transition-colors",
     isCollapsed ? "h-13 w-13 mx-auto justify-center" : "h-[55px] gap-4 px-3",
     isActive
       ? "bg-chart-3 text-white"
@@ -19,7 +19,7 @@ function getMainItemClass(isActive: boolean, isCollapsed: boolean) {
 
 function getFooterItemClass(isActive: boolean, isCollapsed: boolean) {
   return [
-    "flex w-full h-[55px] items-center rounded-xl px-3 text-sm cursor-pointer transition-colors",
+    "flex w-full h-[55px] items-center rounded-component-md px-3 text-sm cursor-pointer transition-colors",
     isCollapsed ? "justify-center px-0" : "gap-4 px-3",
     isActive ? "text-chart-3" : "text-text-auth-sub hover:text-chart-3",
   ].join(" ");
@@ -43,7 +43,7 @@ export default function Sidebar() {
   return (
     <div
       className={[
-        "relative flex h-full flex-col bg-white rounded-3xl drop-shadow-md transition-all duration-300",
+        "relative flex h-full flex-col bg-white rounded-component-lg drop-shadow-md transition-all duration-300",
         isCollapsed ? "w-25" : "w-64",
       ].join(" ")}
     >
@@ -69,7 +69,7 @@ export default function Sidebar() {
             setIsCollapsed((prev) => !prev);
             setOpenId(null);
           }}
-          className="absolute -right-3 top-10 flex h-6 w-6 items-center justify-center rounded-md bg-white border border-bg-surface transition hover:bg-bg-surface"
+          className="absolute -right-3 top-10 flex h-6 w-6 items-center justify-center rounded-component-sm bg-white border border-bg-surface transition hover:bg-bg-surface"
         >
           <CollapseIcon
             className={[
@@ -179,7 +179,7 @@ export default function Sidebar() {
                           end={child.path === item.path}
                           className={({ isActive }) =>
                             [
-                              "pl-4 flex h-10 items-center rounded-xl px-3 text-sm transition-colors",
+                              "pl-4 flex h-10 items-center rounded-component-md px-3 text-sm transition-colors",
                               isActive
                                 ? "bg-chart-3 text-white"
                                 : "text-text-auth-sub hover:bg-bg-surface",
@@ -193,7 +193,7 @@ export default function Sidebar() {
                   )}
                   {/* 축소 상태 */}
                   {isCollapsed && isOpen && (
-                    <div className="absolute left-full top-0 ml-3 w-52 rounded-2xl bg-white p-2 shadow-lg">
+                    <div className="absolute left-full top-0 ml-3 w-52 rounded-component-md bg-white p-2 shadow-lg">
                       {item.children.map((child) => (
                         <NavLink
                           key={child.id}
@@ -201,7 +201,7 @@ export default function Sidebar() {
                           end={child.path === item.path}
                           className={({ isActive }) =>
                             [
-                              "flex h-10 items-center rounded-xl px-3 text-sm transition-colors",
+                              "flex h-10 items-center rounded-component-md px-3 text-sm transition-colors",
                               isActive
                                 ? "bg-chart-3 text-white"
                                 : "text-text-auth-sub hover:bg-bg-surface",
diff --git a/src/components/auth/common/InputActions.tsx b/src/components/auth/common/InputActions.tsx
index dd13781..609660b 100644
--- a/src/components/auth/common/InputActions.tsx
+++ b/src/components/auth/common/InputActions.tsx
@@ -47,7 +47,7 @@ export default function InputActions({
       {validationState && (
         <span
           className={twMerge(
-            "flex items-center justify-center rounded-2xl font-body1 whitespace-nowrap py-1 px-3 h-full cursor-default",
+            "flex items-center justify-center rounded-component-md font-body1 whitespace-nowrap py-1 px-3 h-full cursor-default",
             validation ? "bg-brand-800 text-white" : "opacity-50",
           )}
         >
diff --git a/src/components/auth/flows/find-email/EnterPhoneStep.tsx b/src/components/auth/flows/find-email/EnterPhoneStep.tsx
index 0de9049..5e9080d 100644
--- a/src/components/auth/flows/find-email/EnterPhoneStep.tsx
+++ b/src/components/auth/flows/find-email/EnterPhoneStep.tsx
@@ -149,7 +149,7 @@ export default function EnterPhoneStep({ onNext }: IEnterPhoneStepProps) {
                 value={watchedPhone || ""}
                 readOnly
                 aria-label="입력된 전화번호"
-                className="w-full h-13.5 px-5 border rounding-15 text-body1 text-text-main bg-white border-brand-400 focus:outline-none focus:border-brand-400"
+                className="w-full h-13.5 px-5 border rounded-component-md text-body1 text-text-main bg-white border-brand-400 focus:outline-none focus:border-brand-400"
               />
               <button
                 type="button"
diff --git a/src/components/auth/flows/find-email/ShowEmailResultStep.tsx b/src/components/auth/flows/find-email/ShowEmailResultStep.tsx
index c44ed48..846c8a7 100644
--- a/src/components/auth/flows/find-email/ShowEmailResultStep.tsx
+++ b/src/components/auth/flows/find-email/ShowEmailResultStep.tsx
@@ -18,7 +18,7 @@ export default function ShowEmailResultStep() {
           <span className="block">WYA에 가입된 계정을 찾았어요</span>
         </h1>
 
-        <div className="w-full h-24 bg-gray-50 rounded-2xl flex items-center justify-between px-5 mb-10">
+        <div className="w-full h-24 bg-gray-50 rounded-component-md flex items-center justify-between px-5 mb-10">
           <div className="flex items-center gap-3 min-w-0">
             <span className="font-caption text-text-placeholder shrink-0">
               이메일 ID
@@ -29,7 +29,7 @@ export default function ShowEmailResultStep() {
           </div>
           <button
             type="button"
-            className="shrink-0 h-8 px-2 border border-gray-200 bg-white rounded-lg text-xs text-text-sub hover:bg-gray-50 transition-colors"
+            className="shrink-0 h-8 px-2 border border-gray-200 bg-white rounded-component-sm text-xs text-text-sub hover:bg-gray-50 transition-colors"
             onClick={() => navigate("/find-pw")}
           >
             비밀번호 재설정
diff --git a/src/components/auth/flows/reset-password/EmailVerificationStep.tsx b/src/components/auth/flows/reset-password/EmailVerificationStep.tsx
index 76ed6c2..339c6c2 100644
--- a/src/components/auth/flows/reset-password/EmailVerificationStep.tsx
+++ b/src/components/auth/flows/reset-password/EmailVerificationStep.tsx
@@ -66,7 +66,7 @@ export default function EmailVerificationStep({
                 type="text"
                 value={watchedEmail || ""}
                 readOnly
-                className="w-full h-13.5 px-5 border rounding-15 text-body1 text-text-main bg-white border-brand-400 focus:outline-none focus:border-brand-400"
+                className="w-full h-13.5 px-5 border rounded-component-md text-body1 text-text-main bg-white border-brand-400 focus:outline-none focus:border-brand-400"
               />
               <button
                 type="button"
diff --git a/src/components/auth/flows/signup/EnterEmailStep.tsx b/src/components/auth/flows/signup/EnterEmailStep.tsx
index 2dce895..70e3083 100644
--- a/src/components/auth/flows/signup/EnterEmailStep.tsx
+++ b/src/components/auth/flows/signup/EnterEmailStep.tsx
@@ -62,7 +62,7 @@ export default function EnterEmailStep({ onNext }: IEnterEmailStepProps) {
                 type="text"
                 value={watchedEmail || ""}
                 readOnly
-                className="w-full h-13.5 px-5 border rounding-15 text-body1 text-text-main bg-white border-brand-400 focus:outline-none focus:border-brand-400"
+                className="w-full h-13.5 px-5 border rounded-component-md text-body1 text-text-main bg-white border-brand-400 focus:outline-none focus:border-brand-400"
               />
               <button
                 type="button"
diff --git a/src/components/auth/skeleton/AuthFormSkeleton.tsx b/src/components/auth/skeleton/AuthFormSkeleton.tsx
index 0a5e12c..feb3949 100644
--- a/src/components/auth/skeleton/AuthFormSkeleton.tsx
+++ b/src/components/auth/skeleton/AuthFormSkeleton.tsx
@@ -11,14 +11,14 @@ export default function AuthFormSkeleton() {
 
         <div className="flex flex-col gap-6">
           <div className="flex gap-2">
-            <Skeleton className="h-14 flex-1 rounded-2xl" />
-            <Skeleton className="h-14 w-28 rounded-2xl" />
+            <Skeleton className="h-14 flex-1 rounded-component-md" />
+            <Skeleton className="h-14 w-28 rounded-component-md" />
           </div>
 
-          <Skeleton className="h-14 w-full rounded-2xl" />
+          <Skeleton className="h-14 w-full rounded-component-md" />
 
           <div className="mt-4">
-            <Skeleton className="h-14 w-full rounded-2xl" />
+            <Skeleton className="h-14 w-full rounded-component-md" />
           </div>
         </div>
       </div>
diff --git a/src/components/auth/skeleton/LoginPageSkeleton.tsx b/src/components/auth/skeleton/LoginPageSkeleton.tsx
index 71864f3..43e69b2 100644
--- a/src/components/auth/skeleton/LoginPageSkeleton.tsx
+++ b/src/components/auth/skeleton/LoginPageSkeleton.tsx
@@ -14,11 +14,11 @@ export default function LoginPageSkeleton() {
         <div className="flex flex-col gap-7">
           <div className="flex flex-col gap-2">
             <Skeleton className="h-5 w-16" />
-            <Skeleton className="h-12 w-full rounded-2xl" />
+            <Skeleton className="h-12 w-full rounded-component-md" />
           </div>
           <div className="flex flex-col gap-2">
             <Skeleton className="h-5 w-20" />
-            <Skeleton className="h-12 w-full rounded-2xl" />
+            <Skeleton className="h-12 w-full rounded-component-md" />
           </div>
 
           <div className="mt-3 flex justify-center">
@@ -26,7 +26,7 @@ export default function LoginPageSkeleton() {
           </div>
 
           <div className="mt-10">
-            <Skeleton className="h-14 w-full rounded-2xl" />
+            <Skeleton className="h-14 w-full rounded-component-md" />
           </div>
         </div>
 
diff --git a/src/components/auth/skeleton/SignupEmailStepSkeleton.tsx b/src/components/auth/skeleton/SignupEmailStepSkeleton.tsx
index 8c53c6c..6d71400 100644
--- a/src/components/auth/skeleton/SignupEmailStepSkeleton.tsx
+++ b/src/components/auth/skeleton/SignupEmailStepSkeleton.tsx
@@ -12,17 +12,17 @@ export default function SignupEmailStepSkeleton() {
         <div className="flex flex-col gap-6">
           <div className="flex gap-2">
             <div className="flex-1 flex flex-col gap-2">
-              <Skeleton className="h-14 w-full rounded-2xl" />
+              <Skeleton className="h-14 w-full rounded-component-md" />
             </div>
-            <Skeleton className="h-14 w-24 rounded-2xl" />
+            <Skeleton className="h-14 w-24 rounded-component-md" />
           </div>
 
           <div className="flex flex-col gap-2">
-            <Skeleton className="h-14 w-full rounded-2xl" />
+            <Skeleton className="h-14 w-full rounded-component-md" />
           </div>
 
           <div className="mt-4">
-            <Skeleton className="h-14 w-full rounded-2xl" />
+            <Skeleton className="h-14 w-full rounded-component-md" />
           </div>
         </div>
       </div>
diff --git a/src/components/auth/skeleton/SignupPageSkeleton.tsx b/src/components/auth/skeleton/SignupPageSkeleton.tsx
index ae7117b..efcec56 100644
--- a/src/components/auth/skeleton/SignupPageSkeleton.tsx
+++ b/src/components/auth/skeleton/SignupPageSkeleton.tsx
@@ -4,10 +4,10 @@ export default function SignupPageSkeleton() {
   return (
     <div className="flex w-full flex-col items-center">
       <div className="flex w-full flex-col gap-10">
-        <Skeleton className="h-16 w-full rounded-2xl" />
-        <Skeleton className="h-16 w-full rounded-2xl" />
-        <Skeleton className="h-16 w-full rounded-2xl" />
-        <Skeleton className="h-16 w-full rounded-2xl" />
+        <Skeleton className="h-16 w-full rounded-component-md" />
+        <Skeleton className="h-16 w-full rounded-component-md" />
+        <Skeleton className="h-16 w-full rounded-component-md" />
+        <Skeleton className="h-16 w-full rounded-component-md" />
       </div>
 
       <div className="mt-15 flex justify-center gap-2">
diff --git a/src/components/common/alert/Alert.tsx b/src/components/common/alert/Alert.tsx
index 8fe2386..dce12f0 100644
--- a/src/components/common/alert/Alert.tsx
+++ b/src/components/common/alert/Alert.tsx
@@ -17,7 +17,7 @@ export default function Alert({
   children,
   ...rest
 }: IAlertProps) {
-  const base = "w-full rounding-20 px-5 py-4";
+  const base = "w-full rounded-component-lg px-5 py-4";
 
   const variantClasses: Record<TAlertVariant, string> = {
     info: "text-brand-700",
diff --git a/src/components/common/dropdownmenu/DropdownMenu.tsx b/src/components/common/dropdownmenu/DropdownMenu.tsx
index 160da39..14af28a 100644
--- a/src/components/common/dropdownmenu/DropdownMenu.tsx
+++ b/src/components/common/dropdownmenu/DropdownMenu.tsx
@@ -57,7 +57,7 @@ export function DropdownMenu({
         <div
           id={menuId}
           role="menu"
-          className="absolute right-0 mt-2 w-56 max-w-[calc(100vw-40px)] rounding-15 bg-brand-200 py-3 px-1 shadow-Medium z-50"
+          className="absolute right-0 mt-2 w-56 max-w-[calc(100vw-40px)] rounded-component-md bg-brand-200 py-3 px-1 shadow-Medium z-50"
         >
           <div className="space-y-1">
             {items.map((it, idx) => (
@@ -70,7 +70,7 @@ export function DropdownMenu({
                     setOpen(false);
                   }}
                   className={twMerge(
-                    "group flex w-full items-center gap-3 rounding-15 px-5 py-4 text-left font-body1 transition-fast",
+                    "group flex w-full items-center gap-3 rounded-component-md px-5 py-4 text-left font-body1 transition-fast",
                     it.active
                       ? "bg-brand-300 text-status-blue"
                       : "text-text-main hover:bg-brand-300 hover:text-status-blue",
diff --git a/src/components/workspace/WorkspaceCard.tsx b/src/components/workspace/WorkspaceCard.tsx
index e0f7a9d..c9cdb98 100644
--- a/src/components/workspace/WorkspaceCard.tsx
+++ b/src/components/workspace/WorkspaceCard.tsx
@@ -47,7 +47,7 @@ export default function WorkspaceCard({ workspace: w, menuItems }: TProps) {
         <DropdownMenu
           trigger={<VectorIcon aria-hidden="true" />}
           aria-label={`${w.name} 워크스페이스 메뉴`}
-          className="h-10 w-10 cursor-pointer rounded-xl hover:bg-gray-100 transition-colors flex items-center justify-center"
+          className="h-10 w-10 cursor-pointer rounded-component-sm hover:bg-gray-100 transition-colors flex items-center justify-center"
           items={menuItems}
         />
       </div>
diff --git a/src/index.css b/src/index.css
index 44536a7..e91ffb3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -224,18 +224,6 @@ button {
     line-height: 140%;
   }
 
-  .rounding-15 {
-    border-radius: 15px;
-  }
-
-  .rounding-20 {
-    border-radius: 20px;
-  }
-
-  .rounding-30 {
-    border-radius: 30px;
-  }
-
   .shadow-Soft {
     box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
   }
diff --git a/src/stories/BorderRadius.stories.tsx b/src/stories/BorderRadius.stories.tsx
index ae441a1..646f80f 100644
--- a/src/stories/BorderRadius.stories.tsx
+++ b/src/stories/BorderRadius.stories.tsx
@@ -5,40 +5,48 @@ const radiusTokens = [
     className: "rounded-component-sm",
     label: "Component SM",
     value: "0.5rem (8px)",
+    usage: "이미지, 소형 버튼, 뱃지",
   },
   {
     className: "rounded-component-md",
     label: "Component MD",
     value: "1rem (16px)",
+    usage: "버튼, 인풋, 모달, 드롭다운, 네비 아이템",
   },
   {
     className: "rounded-component-lg",
     label: "Component LG",
     value: "1.5rem (24px)",
+    usage: "카드, 패널, 알럿",
+  },
+  {
+    className: "rounded-full",
+    label: "Full",
+    value: "9999px",
+    usage: "아바타, 소셜 버튼, 뱃지 pill",
   },
-  { className: "rounding-15", label: "Rounding 15", value: "15px" },
-  { className: "rounding-20", label: "Rounding 20", value: "20px" },
-  { className: "rounding-30", label: "Rounding 30", value: "30px" },
 ];
 
 function BorderRadiusDoc() {
   return (
-    <div className="p-8 space-y-2 max-w-2xl">
-      <div className="grid grid-cols-[180px_1fr_140px] gap-x-4 pb-2 border-b border-gray-200 text-xs text-gray-400 font-medium uppercase tracking-wide">
+    <div className="p-8 space-y-2 max-w-3xl">
+      <div className="grid grid-cols-[180px_1fr_120px_1fr] gap-x-4 pb-2 border-b border-gray-200 text-xs text-gray-400 font-medium uppercase tracking-wide">
         <span>Token</span>
         <span>Preview</span>
         <span>Value</span>
+        <span>Usage</span>
       </div>
-      {radiusTokens.map(({ className, value }) => (
+      {radiusTokens.map(({ className, value, usage }) => (
         <div
           key={className}
-          className="grid grid-cols-[180px_1fr_140px] gap-x-4 items-center py-4 border-b border-gray-100"
+          className="grid grid-cols-[180px_1fr_120px_1fr] gap-x-4 items-center py-4 border-b border-gray-100"
         >
           <span className="text-xs text-gray-400 font-mono">.{className}</span>
           <div
             className={`w-20 h-12 bg-brand-400 border border-brand-500 ${className}`}
           />
           <span className="text-xs text-gray-400">{value}</span>
+          <span className="text-xs text-gray-400">{usage}</span>
         </div>
       ))}
     </div>

From 5041530eb3f9341c1892d64c25dd098a83ab2300 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=84=9C=EC=A0=9C=EA=B2=BD?= <seojk0315@naver.com>
Date: Thu, 26 Feb 2026 21:17:38 +0900
Subject: [PATCH 4/8] =?UTF-8?q?fix:=20=EA=B7=B8=EB=A6=BC=EC=9E=90=20?=
 =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=ED=86=A0=ED=8A=BC=20=EB=B0=98?=
 =?UTF-8?q?=EC=98=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Sidebar/Sidebar.tsx              | 4 ++--
 src/components/auth/intro/IntroAdManagement.tsx | 2 +-
 src/components/common/modal/Modal.tsx           | 2 +-
 src/components/workspace/WorkspaceCard.tsx      | 2 +-
 src/pages/auth/Login.tsx                        | 6 +++---
 src/pages/auth/Signup.tsx                       | 8 ++++----
 src/pages/workspace/WorkspaceSetting.tsx        | 2 +-
 7 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 95fb98e..86d40bc 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -43,7 +43,7 @@ export default function Sidebar() {
   return (
     <div
       className={[
-        "relative flex h-full flex-col bg-white rounded-component-lg drop-shadow-md transition-all duration-300",
+        "relative flex h-full flex-col bg-white rounded-component-lg shadow-Soft transition-all duration-300",
         isCollapsed ? "w-25" : "w-64",
       ].join(" ")}
     >
@@ -193,7 +193,7 @@ export default function Sidebar() {
                   )}
                   {/* 축소 상태 */}
                   {isCollapsed && isOpen && (
-                    <div className="absolute left-full top-0 ml-3 w-52 rounded-component-md bg-white p-2 shadow-lg">
+                    <div className="absolute left-full top-0 ml-3 w-52 rounded-component-md bg-white p-2 shadow-Soft">
                       {item.children.map((child) => (
                         <NavLink
                           key={child.id}
diff --git a/src/components/auth/intro/IntroAdManagement.tsx b/src/components/auth/intro/IntroAdManagement.tsx
index 633781d..3405cf7 100644
--- a/src/components/auth/intro/IntroAdManagement.tsx
+++ b/src/components/auth/intro/IntroAdManagement.tsx
@@ -58,7 +58,7 @@ export default function IntroAdManagement({ isActive }: { isActive: boolean }) {
               {CAROUSEL_ITEMS.map((platform, index) => (
                 <div
                   key={`${platform.id}-${index}`}
-                  className={`flex h-40 w-40 items-center justify-center rounded-full shadow-lg ${platform.bgColor}`}
+                  className={`flex h-40 w-40 items-center justify-center rounded-full shadow-Soft ${platform.bgColor}`}
                 >
                   <platform.icon
                     className={`${platform.className} ${platform.size}`}
diff --git a/src/components/common/modal/Modal.tsx b/src/components/common/modal/Modal.tsx
index 08ed555..64a2b5a 100644
--- a/src/components/common/modal/Modal.tsx
+++ b/src/components/common/modal/Modal.tsx
@@ -117,7 +117,7 @@ function Modal({
         <div
           ref={modalRef}
           className={twMerge(
-            "relative bg-white rounded-component-md shadow-xl w-full max-h-[90vh] overflow-auto animate-modal-content",
+            "relative bg-white rounded-component-md shadow-Medium w-full max-h-[90vh] overflow-auto animate-modal-content",
             sizeClasses[size],
             paddingClasses[padding],
             className,
diff --git a/src/components/workspace/WorkspaceCard.tsx b/src/components/workspace/WorkspaceCard.tsx
index c9cdb98..93be8a2 100644
--- a/src/components/workspace/WorkspaceCard.tsx
+++ b/src/components/workspace/WorkspaceCard.tsx
@@ -15,7 +15,7 @@ type TProps = {
 
 export default function WorkspaceCard({ workspace: w, menuItems }: TProps) {
   return (
-    <li className="flex items-center justify-between rounded-component-md bg-white px-6 py-5 shadow-sm border border-gray-100">
+    <li className="flex items-center justify-between rounded-component-md bg-white px-6 py-5 shadow-Soft border border-gray-100">
       <div className="flex items-center gap-5 min-w-0">
         <div className="w-20 h-20 bg-gray-100 shrink-0 rounded-component-sm">
           {/* TODO: 스타일 확인을 위해 bg-gray-100넣어둠. API연동할때 삭제예정 */}
diff --git a/src/pages/auth/Login.tsx b/src/pages/auth/Login.tsx
index 22ed5cc..4f78629 100644
--- a/src/pages/auth/Login.tsx
+++ b/src/pages/auth/Login.tsx
@@ -87,7 +87,7 @@ export default function Login() {
           <div className="flex items-center gap-12">
             <button
               type="button"
-              className="w-14 h-14 rounded-full flex items-center justify-center bg-social-kakao hover:scale-110 transition-transform duration-200 shadow-sm"
+              className="w-14 h-14 rounded-full flex items-center justify-center bg-social-kakao hover:scale-110 transition-transform duration-200 shadow-Soft"
               aria-label="카카오로 로그인"
               onClick={() => handleSocialLogin("kakao")}
             >
@@ -96,7 +96,7 @@ export default function Login() {
 
             <button
               type="button"
-              className="w-14 h-14 rounded-full flex items-center justify-center bg-social-naver hover:scale-110 transition-transform duration-200 shadow-sm"
+              className="w-14 h-14 rounded-full flex items-center justify-center bg-social-naver hover:scale-110 transition-transform duration-200 shadow-Soft"
               aria-label="네이버로 로그인"
               onClick={() => handleSocialLogin("naver")}
             >
@@ -105,7 +105,7 @@ export default function Login() {
 
             <button
               type="button"
-              className="w-14 h-14 rounded-full flex items-center justify-center bg-white border border-gray-100 hover:scale-110 transition-transform duration-200 shadow-sm"
+              className="w-14 h-14 rounded-full flex items-center justify-center bg-white border border-gray-100 hover:scale-110 transition-transform duration-200 shadow-Soft"
               aria-label="구글로 로그인"
               onClick={() => toast.error("준비중입니다.")}
             >
diff --git a/src/pages/auth/Signup.tsx b/src/pages/auth/Signup.tsx
index 13a9347..6d96b29 100644
--- a/src/pages/auth/Signup.tsx
+++ b/src/pages/auth/Signup.tsx
@@ -49,7 +49,7 @@ export default function Signup() {
           variant="gradient"
           leftIcon={<MailIcon className="w-6 h-6" />}
           onClick={() => setStep(1)}
-          className="font-heading4 shadow-md hover:shadow-lg transition-all"
+          className="font-heading4 shadow-Soft hover:shadow-Medium transition-all"
         >
           이메일로 시작하기
         </Button>
@@ -60,7 +60,7 @@ export default function Signup() {
           variant="custom"
           leftIcon={<GoogleIcon className="w-6 h-6" />}
           onClick={() => handleSocialLogin("google")}
-          className="bg-white border border-gray-100 text-text-main font-heading4 shadow-sm hover:bg-gray-50"
+          className="bg-white border border-gray-100 text-text-main font-heading4 shadow-Soft hover:bg-gray-50"
         >
           구글 로그인
         </Button>
@@ -71,7 +71,7 @@ export default function Signup() {
           variant="custom"
           leftIcon={<KakaoIcon className="w-6 h-6" />}
           onClick={() => handleSocialLogin("kakao")}
-          className="bg-social-kakao text-text-main font-heading4 shadow-sm hover:opacity-90"
+          className="bg-social-kakao text-text-main font-heading4 shadow-Soft hover:opacity-90"
         >
           카카오 로그인
         </Button>
@@ -82,7 +82,7 @@ export default function Signup() {
           variant="custom"
           leftIcon={<NaverIcon className="w-5 h-5 text-white" />}
           onClick={() => handleSocialLogin("naver")}
-          className="bg-social-naver text-white font-heading4 shadow-sm hover:opacity-90"
+          className="bg-social-naver text-white font-heading4 shadow-Soft hover:opacity-90"
         >
           네이버 로그인
         </Button>
diff --git a/src/pages/workspace/WorkspaceSetting.tsx b/src/pages/workspace/WorkspaceSetting.tsx
index f9ffa82..78198ca 100644
--- a/src/pages/workspace/WorkspaceSetting.tsx
+++ b/src/pages/workspace/WorkspaceSetting.tsx
@@ -32,7 +32,7 @@ export default function WorkspaceSetting() {
           워크스페이스 정보를 확인하고 관리하세요.
         </p>
       </header>
-      <div className="bg-white border border-gray-100 rounded-component-lg p-8 shadow-sm">
+      <div className="bg-white border border-gray-100 rounded-component-lg p-8 shadow-Soft">
         <h2 className="font-heading4 text-text-main">기본 정보</h2>
         <p className="font-body2 text-text-sub mt-2">
           워크스페이스의 대표적인 정보를 설정합니다.

From d4a226eece8b6c26de463a431698be4874240ef7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=84=9C=EC=A0=9C=EA=B2=BD?= <seojk0315@naver.com>
Date: Thu, 26 Feb 2026 21:28:01 +0900
Subject: [PATCH 5/8] =?UTF-8?q?fix:=20=ED=8F=B0=ED=8A=B8=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=EC=B2=98=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Sidebar/Sidebar.tsx                  | 2 +-
 src/components/auth/intro/IntroAIAnalytics.tsx      | 2 +-
 src/components/auth/intro/IntroAdManagement.tsx     | 2 +-
 src/components/modal/privacyModal/AgreementItem.tsx | 2 +-
 src/pages/auth/Login.tsx                            | 4 ++--
 src/pages/auth/Signup.tsx                           | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 86d40bc..fb915bc 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -47,7 +47,7 @@ export default function Sidebar() {
         isCollapsed ? "w-25" : "w-64",
       ].join(" ")}
     >
-      <div className="mx-auto flex w-full max-w-[232px] flex-1 flex-col">
+      <div className="mx-auto flex w-full max-w-58 flex-1 flex-col">
         <NavLink
           to="/"
           aria-label="홈으로 이동"
diff --git a/src/components/auth/intro/IntroAIAnalytics.tsx b/src/components/auth/intro/IntroAIAnalytics.tsx
index 17d915c..c56bd64 100644
--- a/src/components/auth/intro/IntroAIAnalytics.tsx
+++ b/src/components/auth/intro/IntroAIAnalytics.tsx
@@ -40,7 +40,7 @@ export default function IntroAIAnalytics({ isActive }: { isActive: boolean }) {
             <span className="mb-6 inline-block rounded-full bg-logo-1/10 px-4 py-1.5 text-sm font-bold text-logo-2">
               AI 성과 분석
             </span>
-            <h2 className="font-heading1 text-4xl font-bold leading-tight text-text-main whitespace-pre-line">
+            <h2 className="text-4xl font-bold leading-tight text-text-main whitespace-pre-line">
               복잡한 데이터 분석,{"\n"}
               AI가 대신 해드릴게요
             </h2>
diff --git a/src/components/auth/intro/IntroAdManagement.tsx b/src/components/auth/intro/IntroAdManagement.tsx
index 3405cf7..84c6942 100644
--- a/src/components/auth/intro/IntroAdManagement.tsx
+++ b/src/components/auth/intro/IntroAdManagement.tsx
@@ -41,7 +41,7 @@ export default function IntroAdManagement({ isActive }: { isActive: boolean }) {
             <span className="mb-6 inline-block rounded-full bg-logo-1/10 px-4 py-1.5 text-sm font-bold text-logo-2">
               통합 관리
             </span>
-            <h2 className="font-heading1 text-4xl font-bold leading-tight text-text-main whitespace-pre-line">
+            <h2 className="text-4xl font-bold leading-tight text-text-main whitespace-pre-line">
               흩어진 광고 성과를{"\n"}
               한곳에서 관리하세요
             </h2>
diff --git a/src/components/modal/privacyModal/AgreementItem.tsx b/src/components/modal/privacyModal/AgreementItem.tsx
index 5762501..c16ad4a 100644
--- a/src/components/modal/privacyModal/AgreementItem.tsx
+++ b/src/components/modal/privacyModal/AgreementItem.tsx
@@ -89,7 +89,7 @@ export default function AgreementItem({
       </div>
 
       {expanded && (
-        <div className="bg-brand-300 p-5 rounded-15 text-sm text-text-sub leading-relaxed max-h-50 overflow-y-auto">
+        <div className="bg-brand-300 p-5 rounded-component-md text-sm text-text-sub leading-relaxed max-h-50 overflow-y-auto">
           <ReactMarkdown components={markdownComponents}>
             {content}
           </ReactMarkdown>
diff --git a/src/pages/auth/Login.tsx b/src/pages/auth/Login.tsx
index 4f78629..7833eff 100644
--- a/src/pages/auth/Login.tsx
+++ b/src/pages/auth/Login.tsx
@@ -47,7 +47,7 @@ export default function Login() {
   return (
     <div className="w-full min-h-screen bg-white flex items-center justify-center">
       <div className="w-full max-w-130 px-6 pt-30 pb-12">
-        <h1 className="text-center font-heading1 text-3xl font-bold text-text-main mb-10">
+        <h1 className="text-center font-heading1 font-bold text-text-main mb-10">
           로그인
         </h1>
 
@@ -124,7 +124,7 @@ export default function Login() {
           <Link
             to="/signup"
             state={{ step: 1 }}
-            className="mt-6 font-body3 text-text-placeholder underline underline-offset-4 hover:text-text-auth-sub"
+            className="mt-6 font-body2 text-text-placeholder underline underline-offset-4 hover:text-text-auth-sub"
           >
             이메일로 회원가입
           </Link>
diff --git a/src/pages/auth/Signup.tsx b/src/pages/auth/Signup.tsx
index 6d96b29..1c92170 100644
--- a/src/pages/auth/Signup.tsx
+++ b/src/pages/auth/Signup.tsx
@@ -88,7 +88,7 @@ export default function Signup() {
         </Button>
       </div>
 
-      <div className="font-body3 text-text-sub mt-15 flex gap-2">
+      <div className="font-body2 text-text-sub mt-15 flex gap-2">
         <span>이미 사용자 계정이 있다면?</span>
         <Link
           to="/login"

From 36ca3f51ffd0ef1950b7f2e9ee644b0024c5b486 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=84=9C=EC=A0=9C=EA=B2=BD?= <seojk0315@naver.com>
Date: Thu, 26 Feb 2026 21:38:20 +0900
Subject: [PATCH 6/8] =?UTF-8?q?feat:=20=EC=9B=8C=ED=81=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=8A=A4=20=EC=95=84=EC=9D=B4=EC=BD=98=20?=
 =?UTF-8?q?=EB=B0=8F=20=ED=8F=B0=ED=8A=B8=20=EC=9D=BC=EB=B6=80=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icon/workspace/building.svg     | 2 +-
 src/components/workspace/WorkspaceCard.tsx | 8 +++++---
 src/pages/workspace/Workspace.tsx          | 2 +-
 src/pages/workspace/WorkspaceSetting.tsx   | 4 ++--
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/assets/icon/workspace/building.svg b/src/assets/icon/workspace/building.svg
index cd3534c..a514969 100644
--- a/src/assets/icon/workspace/building.svg
+++ b/src/assets/icon/workspace/building.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 10H12.01M12 14H12.01M12 6H12.01M16 10H16.01M16 14H16.01M16 6H16.01M8 10H8.01M8 14H8.01M8 6H8.01M9 22V19C9 18.7348 9.10536 18.4804 9.29289 18.2929C9.48043 18.1054 9.73478 18 10 18H14C14.2652 18 14.5196 18.1054 14.7071 18.2929C14.8946 18.4804 15 18.7348 15 19V22M6 2H18C19.1046 2 20 2.89543 20 4V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4C4 2.89543 4.89543 2 6 2Z" stroke="#8B8B8F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 10H12.01M12 14H12.01M12 6H12.01M16 10H16.01M16 14H16.01M16 6H16.01M8 10H8.01M8 14H8.01M8 6H8.01M9 22V19C9 18.7348 9.10536 18.4804 9.29289 18.2929C9.48043 18.1054 9.73478 18 10 18H14C14.2652 18 14.5196 18.1054 14.7071 18.2929C14.8946 18.4804 15 18.7348 15 19V22M6 2H18C19.1046 2 20 2.89543 20 4V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4C4 2.89543 4.89543 2 6 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/src/components/workspace/WorkspaceCard.tsx b/src/components/workspace/WorkspaceCard.tsx
index 93be8a2..e2b36d3 100644
--- a/src/components/workspace/WorkspaceCard.tsx
+++ b/src/components/workspace/WorkspaceCard.tsx
@@ -27,14 +27,16 @@ export default function WorkspaceCard({ workspace: w, menuItems }: TProps) {
             />
           ) : (
             <div className="w-full h-full flex items-center justify-center">
-              <BuildingIcon className="w-12 h-12" />
+              <BuildingIcon className="w-8 h-8 text-text-placeholder" />
             </div>
           )}
         </div>
 
         <div className="min-w-0">
-          <div className="font-heading4 text-text-main truncate">{w.name}</div>
-          <div className="font-body1 text-text-main mt-1 truncate">
+          <div className="font-heading4 font-semibold! text-text-main truncate">
+            {w.name}
+          </div>
+          <div className="font-body3 text-text-main mt-1 truncate">
             {w.description ?? ""}
           </div>
           <div className="font-body1 text-text-sub mt-2">
diff --git a/src/pages/workspace/Workspace.tsx b/src/pages/workspace/Workspace.tsx
index 0b107c1..f32f74f 100644
--- a/src/pages/workspace/Workspace.tsx
+++ b/src/pages/workspace/Workspace.tsx
@@ -180,7 +180,7 @@ export default function WorkspacePage() {
                 <div className="font-label text-text-sub">로고 이미지</div>
                 <Button
                   variant="custom"
-                  className="!h-7 border border-gray-200 text-text-auth-sub px-5 rounded-component-lg bg-white font-body2 hover:bg-gray-100 transition-colors duration-200 ease-in-out"
+                  className="h-7! border border-gray-200 text-text-auth-sub px-5 rounded-component-lg bg-white font-body2 hover:bg-gray-100 transition-colors duration-200 ease-in-out"
                   onClick={openFile}
                   type="button"
                 >
diff --git a/src/pages/workspace/WorkspaceSetting.tsx b/src/pages/workspace/WorkspaceSetting.tsx
index 78198ca..9eca186 100644
--- a/src/pages/workspace/WorkspaceSetting.tsx
+++ b/src/pages/workspace/WorkspaceSetting.tsx
@@ -46,7 +46,7 @@ export default function WorkspaceSetting() {
             <div className="flex gap-3 mt-3 justify-center">
               <Button
                 variant="custom"
-                className="!h-7 border border-gray-200 text-text-auth-sub px-5 rounded-component-lg bg-white font-body2 hover:bg-gray-100 transition-colors duration-200 ease-in-out"
+                className="h-7! border border-gray-200 text-text-auth-sub px-5 rounded-component-lg bg-white font-body2 hover:bg-gray-100 transition-colors duration-200 ease-in-out"
                 onClick={() => alert("TODO:추후 업로드")}
                 aria-label="로고 이미지 업로드 버튼"
               >
@@ -54,7 +54,7 @@ export default function WorkspaceSetting() {
               </Button>
               <Button
                 variant="custom"
-                className="!h-7 border border-gray-200 text-text-auth-sub px-5 rounded-component-lg bg-white font-body2 hover:bg-gray-100 transition-colors duration-200 ease-in-out"
+                className="h-7! border border-gray-200 text-text-auth-sub px-5 rounded-component-lg bg-white font-body2 hover:bg-gray-100 transition-colors duration-200 ease-in-out"
                 onClick={() => alert("TODO:추후 초기화연결")}
                 aria-label="로고 이미지 초기화 버튼"
               >

From 5f0d1485367bdd44117030f16bcf459d90ebb465 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=84=9C=EC=A0=9C=EA=B2=BD?= <seojk0315@naver.com>
Date: Thu, 26 Feb 2026 21:50:23 +0900
Subject: [PATCH 7/8] =?UTF-8?q?fix:=20body3=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/workspace/WorkspaceCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/workspace/WorkspaceCard.tsx b/src/components/workspace/WorkspaceCard.tsx
index e2b36d3..1f80f7c 100644
--- a/src/components/workspace/WorkspaceCard.tsx
+++ b/src/components/workspace/WorkspaceCard.tsx
@@ -36,7 +36,7 @@ export default function WorkspaceCard({ workspace: w, menuItems }: TProps) {
           <div className="font-heading4 font-semibold! text-text-main truncate">
             {w.name}
           </div>
-          <div className="font-body3 text-text-main mt-1 truncate">
+          <div className="font-body2 text-text-main mt-1 truncate">
             {w.description ?? ""}
           </div>
           <div className="font-body1 text-text-sub mt-2">

From 7d0f7fabddba5bd39e57921a569508b4ebf8a3bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=84=9C=EC=A0=9C=EA=B2=BD?= <seojk0315@naver.com>
Date: Thu, 26 Feb 2026 22:33:01 +0900
Subject: [PATCH 8/8] =?UTF-8?q?fix:=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94?=
 =?UTF-8?q?=20=EB=94=94=EC=9E=90=EC=9D=B8=20=ED=86=A0=ED=81=B0=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9=20(Sidebar,=20SubMenu)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

rounded-xl/2xl → rounded-component-md/lg
drop-shadow-md → shadow-Soft
hover:bg-[#F6F6F6] → hover:bg-bg-surface
border-[#F6F6F6] → border-bg-surface
max-w-[232px] → max-w-58

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/Sidebar/Sidebar.tsx | 12 ++++++------
 src/components/Sidebar/SubMenu.tsx |  6 +++---
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 627a196..03dfb4e 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -14,19 +14,19 @@ import CollapseIcon from "@/assets/icon/sidebar/chevron-left.svg?react";
 
 function getMainItemClass(isActive: boolean, isCollapsed: boolean) {
   return twMerge(
-    "flex items-center rounded-xl px-3 text-sm cursor-pointer transition-colors duration-200",
+    "flex items-center rounded-component-md px-3 text-sm cursor-pointer transition-colors duration-200",
     isCollapsed
       ? "h-[55px] w-[55px] mx-auto flex justify-center"
       : "h-[55px] gap-4 px-3",
     isActive
       ? "bg-chart-3 text-white"
-      : "text-text-auth-sub hover:bg-[#F6F6F6]",
+      : "text-text-auth-sub hover:bg-bg-surface",
   );
 }
 
 function getFooterItemClass(isActive: boolean, isCollapsed: boolean) {
   return twMerge(
-    "flex w-full h-[55px] items-center rounded-xl px-3 text-sm cursor-pointer transition-all duration-200",
+    "flex w-full h-[55px] items-center rounded-component-md px-3 text-sm cursor-pointer transition-all duration-200",
     isCollapsed ? "justify-center px-0" : "gap-4 px-3",
     isActive ? "text-chart-3" : "text-text-auth-sub hover:text-chart-3",
   );
@@ -45,11 +45,11 @@ export default function Sidebar() {
   return (
     <div
       className={twMerge(
-        "relative flex h-full flex-col bg-white rounded-3xl drop-shadow-md transition-all duration-200 ease-in-out",
+        "relative flex h-full flex-col bg-white rounded-component-lg shadow-Soft transition-all duration-200 ease-in-out",
         isCollapsed ? "w-25" : "w-64",
       )}
     >
-      <div className="mx-auto mt-10 flex w-full max-w-[232px] flex-1 flex-col">
+      <div className="mx-auto mt-10 flex w-full max-w-58 flex-1 flex-col">
         {/* Logo */}
         {/* <NavLink
           to="/"
@@ -74,7 +74,7 @@ export default function Sidebar() {
           type="button"
           aria-label={isCollapsed ? "사이드바 펼치기" : "사이드바 접기"}
           onClick={toggleSidebar}
-          className="absolute -right-3 top-3 flex h-6 w-6 items-center justify-center rounded-md bg-white border border-[#F6F6F6] transition hover:bg-[#F6F6F6]"
+          className="absolute -right-3 top-3 flex h-6 w-6 items-center justify-center rounded-component-sm bg-white border border-bg-surface transition hover:bg-bg-surface"
         >
           <CollapseIcon
             className={twMerge(
diff --git a/src/components/Sidebar/SubMenu.tsx b/src/components/Sidebar/SubMenu.tsx
index 1af1c17..2b3b3b0 100644
--- a/src/components/Sidebar/SubMenu.tsx
+++ b/src/components/Sidebar/SubMenu.tsx
@@ -11,15 +11,15 @@ interface ISubMenuProps {
 export function SubMenu({ items, isCollapsed }: ISubMenuProps) {
   const getSubItemClass = (isActive: boolean) =>
     twMerge(
-      "flex h-10 items-center rounded-xl px-3 text-sm transition-all duration-200 whitespace-nowrap",
+      "flex h-10 items-center rounded-component-md px-3 text-sm transition-all duration-200 whitespace-nowrap",
       isCollapsed ? "" : "pl-4",
       isActive
         ? "bg-chart-3 text-white"
-        : "text-text-auth-sub hover:bg-[#F6F6F6]",
+        : "text-text-auth-sub hover:bg-bg-surface",
     );
 
   const menuContainerClass = isCollapsed
-    ? "absolute left-full top-0 pl-2 w-52 flex flex-col gap-1 rounded-2xl bg-white p-2 shadow-lg z-50 whitespace-nowrap"
+    ? "absolute left-full top-0 pl-2 w-52 flex flex-col gap-1 rounded-component-md bg-white p-2 shadow-Soft z-50 whitespace-nowrap"
     : "ml-11 mt-1 flex flex-col gap-1 overflow-hidden transition-all duration-200";
 
   return (