[Refactor/#63] index.css 폰트 및 디자인 시스템 추가

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(

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 (

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",
           )}
         >

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"

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")}
           >
             비밀번호 재설정

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"

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"

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>

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>
@@ -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}`}

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>

src/components/auth/skeleton/LoginPageSkeleton.tsx

@@ -14,19 +14,19 @@ 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">
             <Skeleton className="h-4 w-48" />
           </div>
 
           <div className="mt-10">
-            <Skeleton className="h-14 w-full rounded-2xl" />
+            <Skeleton className="h-14 w-full rounded-component-md" />
           </div>
         </div>
 

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>

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">

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",

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>

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",
   };

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",

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,

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}
     />
   ),
@@ -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>

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연동할때 삭제예정 */}
@@ -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-heading3 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-body2 text-text-main mt-1 truncate">
             {w.description ?? ""}
           </div>
           <div className="font-body1 text-text-sub mt-2">
@@ -47,7 +49,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>

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;
@@ -188,6 +189,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,22 +220,10 @@ button {
 
   .font-label {
     font-size: 14px;
-    font-weight: 700;
+    font-weight: 600;
     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);
   }