design:워크스페이스 UI 타이포그래피 통일(#88)

src/app/globals.css

@@ -159,3 +159,33 @@
     @apply font-sans;
   }
 }
+
+@layer components {
+  .workspace-page {
+    @apply mx-auto w-full max-w-[1180px];
+  }
+
+  .workspace-page-header {
+    @apply mb-6;
+  }
+
+  .workspace-page-title {
+    @apply text-2xl leading-8 font-bold tracking-normal text-slate-950;
+  }
+
+  .workspace-page-description {
+    @apply mt-1 text-sm leading-5 tracking-normal text-slate-500;
+  }
+
+  .workspace-section-title {
+    @apply text-lg leading-7 font-bold tracking-normal text-slate-900;
+  }
+
+  .workspace-card-title {
+    @apply text-sm leading-5 font-semibold tracking-normal text-slate-900;
+  }
+
+  .workspace-caption {
+    @apply text-xs leading-4 tracking-normal text-slate-500;
+  }
+}

src/entities/meeting-note/ui/MeetingNoteCard.tsx

@@ -61,7 +61,7 @@ export function MeetingNoteCard({
       <article className="rounded-[24px] border border-[#ebeef7] bg-white px-[22px] py-[21px] shadow-[0_10px_30px_rgba(91,78,232,0.06)] transition hover:border-[rgba(91,78,232,0.16)]">
         <div className="flex items-start justify-between gap-6">
           <div className="min-w-0">
-            <h3 className="text-brand-ink truncate text-[18px] font-bold tracking-[-0.03em]">
+            <h3 className="text-brand-ink truncate text-base leading-6 font-bold tracking-normal">
               {meetingNote.title}
             </h3>
             <p className="text-brand-muted mt-[6px] text-[12px] font-medium">

src/entities/task/ui/TaskCard.tsx

@@ -26,7 +26,7 @@ export function TaskCard({
       style={{ opacity: isDragging ? 0.55 : 1 }}
     >
       <div className="flex items-start justify-between gap-3">
-        <h3 className="text-brand-ink pr-2 text-[17px] leading-tight font-semibold tracking-[-0.02em]">
+        <h3 className="text-brand-ink pr-2 text-base leading-6 font-semibold tracking-normal">
           {task.title}
         </h3>
         <button

src/features/manage-calendar/ui/CalendarView.tsx

@@ -13,7 +13,6 @@ import {
   useDeleteCalendarEvent,
   useUpdateCalendarEvent,
 } from '@/entities/calendar-event';
-import { plusJakartaSans } from '@/shared/lib/fonts';
 import {
   createCalendarMonthStart,
   createCalendarMonthGrid,
@@ -155,7 +154,7 @@ export function CalendarView({ workspaceId, initialSelectedDate }: CalendarViewP
   };
 
   return (
-    <div className={`${plusJakartaSans.className} bg-brand-surface min-h-full`}>
+    <div className="bg-brand-surface min-h-full">
       <section className="w-full max-w-[1180px]">
         <div className="flex flex-col gap-6 xl:flex-row xl:items-start">
           <div className="w-full flex-1">
@@ -173,7 +172,7 @@ export function CalendarView({ workspaceId, initialSelectedDate }: CalendarViewP
                 >
                   <ChevronLeft className="size-5" />
                 </button>
-                <h1 className="text-[18px] font-bold tracking-[-0.04em] sm:text-[20px]">
+                <h1 className="text-lg leading-7 font-bold tracking-normal sm:text-xl">
                   {monthLabel}
                 </h1>
                 <button
@@ -265,7 +264,7 @@ export function CalendarView({ workspaceId, initialSelectedDate }: CalendarViewP
             <div className="rounded-[20px] border border-[rgba(91,78,232,0.1)] bg-white p-5 shadow-[0_10px_30px_rgba(91,78,232,0.06)]">
               <div className="flex items-start justify-between gap-3">
                 <div>
-                  <h2 className="text-brand-ink text-[18px] font-bold tracking-[-0.03em]">
+                  <h2 className="workspace-section-title">
                     {selectedDateLabel}
                   </h2>
                 </div>
@@ -358,7 +357,7 @@ export function CalendarView({ workspaceId, initialSelectedDate }: CalendarViewP
         <div className="fixed inset-0 z-40 flex items-center justify-center bg-[#1a1b2e]/18 px-4">
           <div className="w-full max-w-[280px] rounded-[20px] bg-white p-4 shadow-[0_18px_40px_rgba(26,27,46,0.18)] sm:max-w-[420px] sm:p-5">
             <div className="flex items-start justify-between gap-4">
-              <h2 className="text-brand-ink text-[17px] font-bold tracking-[-0.03em] sm:text-[18px]">
+              <h2 className="workspace-section-title sm:text-lg">
                 {modalDateLabel}
               </h2>
               <button

src/features/manage-meeting-notes/ui/MeetingNoteForm.tsx

@@ -293,7 +293,7 @@ export function MeetingNoteForm({ workspaceId, meetingNote }: MeetingNoteFormPro
         onSubmit={handleSubmit}
         className="mt-[21px] rounded-[32px] border border-[#eceffa] bg-white px-[26.5px] pt-[26.5px] pb-[28px] shadow-[0_20px_48px_rgba(91,78,232,0.08)]"
       >
-        <h1 className="text-brand-ink text-[34px] font-extrabold tracking-[-0.04em]">
+        <h1 className="workspace-page-title">
           {isEditMode ? '회의록 수정' : '새 회의록'}
         </h1>
 
@@ -332,7 +332,7 @@ export function MeetingNoteForm({ workspaceId, meetingNote }: MeetingNoteFormPro
                   tabIndex={-1}
                 />
                 <div
-                  className={`${dateFieldClassName} text-brand-ink gap-2 pr-[14px] text-[18px] font-medium tracking-[-0.03em]`}
+                  className={`${dateFieldClassName} text-brand-ink gap-2 pr-[14px] text-lg font-medium tracking-normal`}
                 >
                   <input
                     ref={yearInputRef}

src/features/manage-meeting-notes/ui/MeetingNotesList.tsx

@@ -55,7 +55,7 @@ export function MeetingNotesList({ workspaceId, meetingNotes, viewer }: MeetingN
   return (
     <section className="max-w-[714px]">
       <div className="mb-[26px] flex items-center justify-between gap-4">
-        <h1 className="text-brand-ink text-[36px] font-extrabold tracking-[-0.04em]">회의록</h1>
+        <h1 className="workspace-page-title">회의록</h1>
         <Link
           href={`/workspaces/${workspaceId}/meeting-notes/new`}
           className="bg-brand inline-flex h-12 items-center gap-2 rounded-full px-5 text-[16px] font-bold text-white shadow-[0_10px_24px_rgba(91,78,232,0.24)] transition hover:brightness-105"

src/features/manage-progress-chart/ui/ProgressChartView.tsx

@@ -23,13 +23,13 @@ function SummaryNumberCard({
       <div className="text-center">
         <strong
           className={cn(
-            'text-brand-ink text-[46px] leading-none font-extrabold tracking-[-0.06em]',
+            'text-brand-ink text-4xl leading-none font-extrabold tracking-normal',
             valueClassName,
           )}
         >
           {value}
         </strong>
-        <p className="mt-2.5 text-[15px] font-semibold tracking-[-0.04em] text-[#9ca2c5]">
+        <p className="mt-2.5 text-sm font-semibold tracking-normal text-[#9ca2c5]">
           {label}
         </p>
       </div>
@@ -50,8 +50,8 @@ function OverallProgressCard({
 
   return (
     <div className="rounded-[22px] border border-[#e7eaff] bg-white px-6 pt-9 pb-10 shadow-[0_6px_20px_rgba(91,78,232,0.03)]">
-      <h2 className="text-brand-ink text-[17px] font-bold tracking-[-0.04em]">전체 진행률</h2>
-      <p className="mt-2 text-[13px] font-medium tracking-[-0.03em] text-[#98a0c6]">
+      <h2 className="workspace-section-title">전체 진행률</h2>
+      <p className="mt-2 text-xs font-medium tracking-normal text-[#98a0c6]">
         {doneCount} / {totalCount} 업무 완료
       </p>
 
@@ -60,7 +60,7 @@ function OverallProgressCard({
           className="flex h-full items-center justify-end rounded-full bg-[linear-gradient(90deg,#534bf2_0%,#8a56ff_100%)] pr-4"
           style={{ width: `${safeProgress}%` }}
         >
-          <span className="text-[12px] font-bold tracking-[-0.02em] text-white">
+          <span className="text-xs font-bold tracking-normal text-white">
             {safeProgress}%
           </span>
         </div>
@@ -77,7 +77,7 @@ function AssigneeBarChartCard({ items }: { items: ProgressChartAssigneeItem[] })
 
   return (
     <div className="row-span-2 rounded-[22px] border border-[#e7eaff] bg-white px-6 pt-6 pb-5 shadow-[0_6px_20px_rgba(91,78,232,0.03)]">
-      <h2 className="text-brand-ink text-[17px] font-bold tracking-[-0.04em]">
+      <h2 className="workspace-section-title">
         담당자별 업무 현황
       </h2>
 
@@ -111,7 +111,7 @@ function AssigneeBarChartCard({ items }: { items: ProgressChartAssigneeItem[] })
                     height: `${gridMaxValue === 0 ? 0 : (item.count / gridMaxValue) * 214}px`,
                   }}
                 />
-                <span className="mt-3 text-[13px] font-medium tracking-[-0.03em] text-[#8f97bf]">
+                <span className="mt-3 text-xs font-medium tracking-normal text-[#8f97bf]">
                   {item.name}
                 </span>
               </div>
@@ -138,7 +138,7 @@ function StatusDistributionCard({ items }: { items: ProgressChartStatusItem[] })
 
   return (
     <div className="rounded-[22px] border border-[#e7eaff] bg-white px-6 pt-6 pb-7 shadow-[0_6px_20px_rgba(91,78,232,0.03)]">
-      <h2 className="text-brand-ink text-[17px] font-bold tracking-[-0.04em]">상태 분포</h2>
+      <h2 className="workspace-section-title">상태 분포</h2>
 
       <div className="flex flex-col items-center justify-center gap-8 pt-9 pb-1 lg:flex-row">
         <div
@@ -159,10 +159,10 @@ function StatusDistributionCard({ items }: { items: ProgressChartStatusItem[] })
                 aria-hidden="true"
               />
               <div className="flex min-w-[116px] items-center justify-between gap-5">
-                <span className="text-brand-ink text-[15px] font-semibold tracking-[-0.03em]">
+                <span className="text-brand-ink text-sm font-semibold tracking-normal">
                   {item.label}
                 </span>
-                <strong className="text-brand-ink text-[15px] font-extrabold tracking-[-0.04em]">
+                <strong className="text-brand-ink text-sm font-extrabold tracking-normal">
                   {item.count}건
                 </strong>
               </div>
@@ -194,7 +194,7 @@ export function ProgressChartView({ workspaceId }: ProgressChartViewProps) {
   return (
     <section className="w-full max-w-[1280px]">
       <header className="mb-6">
-        <h1 className="text-brand-ink text-[28px] leading-[1.15] font-extrabold tracking-[-0.05em]">
+        <h1 className="workspace-page-title">
           진행률 차트
         </h1>
       </header>

src/features/project-board/ui/ProjectBoard.tsx

@@ -212,7 +212,7 @@ export function ProjectBoard({ workspaceId }: ProjectBoardProps) {
   return (
     <section className="mx-auto flex max-w-[1284px] flex-col gap-6">
       <div className="flex items-center justify-between gap-4">
-        <h2 className="text-brand-ink text-[32px] leading-tight font-extrabold tracking-[-0.04em]">
+        <h2 className="workspace-page-title">
           프로젝트 관리
         </h2>
         <button

src/views/chat/ui/ChatView.tsx

@@ -44,10 +44,10 @@ export function ChatView({ workspaceId, initialData }: ChatViewProps) {
   const connection = getConnectionLabel(connectionStatus);
 
   return (
-    <section className="mx-auto w-full min-w-0 max-w-[1180px]">
-      <div className="mb-6">
-        <h1 className="text-2xl font-bold text-slate-950">채팅</h1>
-        <p className="mt-1 text-sm text-slate-500">
+    <section className="workspace-page min-w-0">
+      <div className="workspace-page-header">
+        <h1 className="workspace-page-title">채팅</h1>
+        <p className="workspace-page-description">
           워크스페이스 구성원과 실시간으로 대화할 수 있습니다.
         </p>
       </div>

src/views/create-workspace/ui/CreateWorkspacePage.tsx

@@ -3,16 +3,10 @@
 // 워크스페이스 생성 페이지 — 템플릿 선택 후 생성 Dialog로 이어지는 플로우
 import Link from 'next/link';
 import { useState } from 'react';
-import { Plus_Jakarta_Sans } from 'next/font/google';
 import { WORKSPACE_TEMPLATE_ORDER, type WorkspacePurpose } from '@/entities/workspace';
 import { CreateWorkspaceDialog } from '@/features/create-workspace';
 import TemplateSelectCard from './TemplateSelectCard';
 
-const jakarta = Plus_Jakarta_Sans({
-  subsets: ['latin'],
-  weight: ['400', '600', '700', '800'],
-});
-
 export default function CreateWorkspacePage() {
   const [selectedPurpose, setSelectedPurpose] = useState<WorkspacePurpose | null>(null);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -24,15 +18,15 @@ export default function CreateWorkspacePage() {
 
   return (
     <div
-      className={`${jakarta.className} bg-brand-surface flex min-h-screen flex-col items-center justify-center px-6 py-6`}
+      className="bg-brand-surface flex min-h-screen flex-col items-center justify-center px-6 py-6"
     >
       <div className="mx-auto flex w-full max-w-3xl flex-col items-center gap-5">
         <div className="flex w-full flex-col gap-7.5">
           <header className="flex flex-col items-center text-center">
-            <h1 className="text-brand-ink text-2xl leading-8 font-bold">
+            <h1 className="workspace-page-title">
               어떤 용도로 쓰실 건가요?
             </h1>
-            <p className="text-brand-muted pt-2 text-sm leading-5">
+            <p className="workspace-page-description mt-2">
               목적에 맞는 템플릿을 선택하면 워크스페이스를 이용할 수 있어요
             </p>
           </header>

src/views/create-workspace/ui/TemplateSelectCard.tsx

@@ -40,7 +40,7 @@ export default function TemplateSelectCard({ purpose, onSelect }: TemplateSelect
           <span
             key={tag}
             style={{ backgroundColor: detail.tagBg, color: detail.tagText }}
-            className="rounded-full px-2 py-0.5 text-[13px] leading-4 font-semibold tracking-[-0.325px]"
+            className="rounded-full px-2 py-0.5 text-[13px] leading-4 font-semibold tracking-normal"
           >
             {tag}
           </span>

src/views/meeting-notes/ui/EditMeetingNotePage.tsx

@@ -1,7 +1,6 @@
 import { notFound } from 'next/navigation';
 import { getMeetingNote } from '@/entities/meeting-note';
 import { MeetingNoteForm } from '@/features/manage-meeting-notes';
-import { plusJakartaSans } from '@/shared/lib/fonts';
 
 interface EditMeetingNotePageProps {
   workspaceId: string;
@@ -19,7 +18,7 @@ export default async function EditMeetingNotePage({
   }
 
   return (
-    <div className={`${plusJakartaSans.className} bg-brand-surface min-h-full`}>
+    <div className="bg-brand-surface min-h-full">
       <MeetingNoteForm workspaceId={workspaceId} meetingNote={meetingNote} />
     </div>
   );

src/views/meeting-notes/ui/MeetingNotesPage.tsx

@@ -1,6 +1,5 @@
 import { getMeetingNotes } from '@/entities/meeting-note';
 import { MeetingNotesList } from '@/features/manage-meeting-notes';
-import { plusJakartaSans } from '@/shared/lib/fonts';
 
 interface MeetingNotesPageProps {
   workspaceId: string;
@@ -10,7 +9,7 @@ export default async function MeetingNotesPage({ workspaceId }: MeetingNotesPage
   const { meetingNotes, viewer } = await getMeetingNotes(workspaceId);
 
   return (
-    <div className={`${plusJakartaSans.className} bg-brand-surface min-h-full`}>
+    <div className="bg-brand-surface min-h-full">
       <MeetingNotesList workspaceId={workspaceId} meetingNotes={meetingNotes} viewer={viewer} />
     </div>
   );

src/views/meeting-notes/ui/NewMeetingNotePage.tsx

@@ -1,13 +1,12 @@
 import { MeetingNoteForm } from '@/features/manage-meeting-notes';
-import { plusJakartaSans } from '@/shared/lib/fonts';
 
 interface NewMeetingNotePageProps {
   workspaceId: string;
 }
 
 export default function NewMeetingNotePage({ workspaceId }: NewMeetingNotePageProps) {
   return (
-    <div className={`${plusJakartaSans.className} bg-brand-surface min-h-full`}>
+    <div className="bg-brand-surface min-h-full">
       <MeetingNoteForm workspaceId={workspaceId} />
     </div>
   );

src/views/progress-chart/ui/ProgressChartPage.tsx

@@ -1,6 +1,5 @@
 import { ProgressChartView } from '@/features/manage-progress-chart';
 import { ProgressChartView as SideProjectProgressChartView } from '@/views/side-project/progress-chart';
-import { plusJakartaSans } from '@/shared/lib/fonts';
 import { getWorkspaceById } from '@/entities/workspace/api/get-workspace-by-id';
 import { notFound } from 'next/navigation';
 
@@ -26,7 +25,7 @@ export default async function ProgressChartPage({
     );
   }
   return (
-    <div className={`${plusJakartaSans.className} bg-brand-surface min-h-full`}>
+    <div className="bg-brand-surface min-h-full">
       <ProgressChartView workspaceId={workspaceId} />
     </div>
   );

src/views/project-management/ui/ProjectManagementPage.tsx

@@ -1,13 +1,12 @@
 import { ProjectBoard } from '@/features/project-board';
-import { plusJakartaSans } from '@/shared/lib/fonts';
 
 type ProjectManagementPageProps = {
   workspaceId: string;
 };
 
 export default function ProjectManagementPage({ workspaceId }: ProjectManagementPageProps) {
   return (
-    <div className={`${plusJakartaSans.className} bg-brand-surface min-h-full`}>
+    <div className="bg-brand-surface min-h-full">
       <ProjectBoard workspaceId={workspaceId} />
     </div>
   );

src/views/settings/ui/SettingsView.tsx

@@ -8,7 +8,6 @@ import type { WorkspaceMember } from '@/entities/workspace-member';
 import { WorkspaceInfoForm } from '@/features/manage-workspace-info';
 import { MemberManagementPanel } from '@/features/manage-workspace-members';
 import { MemberProfileForm } from '@/features/manage-member-profile';
-import { plusJakartaSans } from '@/shared/lib/fonts';
 import type { SettingsTabKey } from '../model/settings-tab';
 import { SettingsTabs } from './SettingsTabs';
 
@@ -33,8 +32,8 @@ export function SettingsView({
   const isOwner = members.find((member) => member.userId === currentUserId)?.role === 'owner';
 
   return (
-    <div className={`${plusJakartaSans.className} mx-auto max-w-3xl`}>
-      <h1 className="text-2xl font-bold text-slate-950">설정</h1>
+    <div className="mx-auto w-full max-w-3xl">
+      <h1 className="workspace-page-title">설정</h1>
 
       <SettingsTabs activeTab={activeTab} />