[Style/#315] 대시보드 페이지 반응형 디자인 수정

src/components/calendar/CalendarCell.tsx

@@ -24,12 +24,12 @@ const CalendarCell = ({ date, goals = [], onClick, className }: CalendarCellProp
     <button
       onClick={handleClick}
       className={cn(
-        'rounded-4 flex h-40 w-full max-w-83 min-w-40 cursor-pointer flex-col items-center transition md:h-44 md:max-w-87 md:min-w-84 lg:max-w-88 lg:min-w-88',
+        'rounded-4 flex h-40 w-full min-w-40 cursor-pointer flex-col items-center p-1 transition md:max-h-44 md:max-w-84 lg:h-40 lg:w-71',
         hasGoals && 'hover:bg-tertiary-01',
         className,
       )}
     >
-      <span className="text-body-m-16 text-text-03 self-center">{date}</span>
+      <span className="text-body-m-16 text-text-03 h-20 self-center">{date}</span>
 
       {hasGoals && (
         <div

src/components/calendar/CalendarGrid.tsx

@@ -34,14 +34,14 @@ const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps>(({ data, onCe
         {DAYS.map(day => (
           <span
             key={day}
-            className="flex h-40 w-full max-w-83 min-w-40 items-center justify-center md:max-w-87 md:min-w-84 lg:max-w-88 lg:min-w-88"
+            className="flex h-40 w-full min-w-40 items-center justify-center md:max-w-84 lg:h-20 lg:w-71"
           >
             {day}
           </span>
         ))}
       </div>
       {/* 캘린더 그리드 */}
-      <div className="grid w-full auto-rows-fr grid-cols-7 gap-2">{calendarCells}</div>
+      <div className="grid w-full auto-rows-fr grid-cols-7 gap-2 lg:gap-0">{calendarCells}</div>
     </div>
   );
 });

src/components/goals/EmptyTodo.tsx

@@ -17,7 +17,7 @@ export default function EmptyTodoMessage({ goal }: EmptyTodoProps) {
       <div
         className={`absolute top-0 left-0 h-full w-12 ${getGoalBackgroundColorClass(goal.color)}`}
       />
-      <div className="relative flex h-full w-full flex-col items-center justify-end px-32 pt-[40px] pb-[68px]">
+      <div className="relative flex h-full w-full flex-col items-center justify-center">
         <p className="text-text-02 text-body-sb-20 mb-32 text-center leading-[34px]">
           목표를 이루기 위해
           <br />할 일을 생성해볼까요?

src/components/goals/GoalCardContent.tsx

@@ -52,7 +52,7 @@ export default function GoalCardContent({
 
   return (
     <div
-      className="rounded-20 relative flex h-340 w-303 cursor-pointer flex-col overflow-hidden bg-white md:w-596 lg:w-480"
+      className="rounded-20 relative flex h-340 min-w-303 cursor-pointer flex-col overflow-hidden bg-white md:max-w-596 lg:h-300 lg:w-408 lg:shrink-0"
       onClick={() => router.push(ROUTES.GOALS.DETAIL(String(goal.goalId)))}
     >
       <div className={`absolute top-0 left-0 h-full w-12 ${bgClass}`} />
@@ -108,7 +108,7 @@ export default function GoalCardContent({
             </Button>
           </div>
 
-          <div className="overflow-y-auto" style={{ maxHeight: '104px' }}>
+          <div className="max-h-104 overflow-y-auto lg:max-h-64">
             <div className="flex flex-col gap-16">
               {todos.map(todo => (
                 <div

src/components/goals/GoalListDashboardCard.tsx

@@ -69,7 +69,7 @@ export default function GoalListDashboardCard({ goal }: { goal: GoalSummary | nu
   if (todos.length === 0) {
     return (
       <div
-        className="rounded-20 relative flex h-340 w-303 cursor-pointer flex-col overflow-hidden bg-white md:w-596 lg:w-480"
+        className="rounded-20 relative flex h-340 min-w-303 cursor-pointer flex-col overflow-hidden bg-white md:max-w-596 lg:h-300 lg:w-408 lg:shrink-0"
         onClick={() => router.push(ROUTES.GOALS.DETAIL(String(goal.goalId)))}
       >
         <div className="flex flex-1 flex-col justify-between px-32 pt-20 pb-20">

src/components/goals/GoalListDashboardSection.tsx

@@ -51,7 +51,7 @@ export default function GoalListDashboardSection() {
         ) : sortedGoals.length === 0 ? (
           <NoGoalsGuide />
         ) : (
-          <div className="flex flex-wrap justify-start gap-12">
+          <div className="flex w-full flex-col gap-12 md:flex-col lg:flex-row lg:flex-nowrap lg:overflow-x-auto lg:px-16 lg:pb-8">
             {sortedGoals.map(goal => (
               <GoalListDashboardCard key={goal.goalId} goal={goal} />
             ))}

src/components/goals/NoGoalsGuide.tsx

@@ -13,8 +13,8 @@ export default function NoGoalsGuide() {
   const { openGoalModal } = useModalStore();
 
   return (
-    <div className="flex flex-col items-center">
-      <div className="relative mb-16 h-140 w-140 md:h-200 md:w-200">
+    <div className="flex h-full flex-col items-center justify-center">
+      <div className="relative mb-16 h-140 w-140 md:h-200 md:w-200 lg:h-120 lg:w-120">
         <Image
           src={`${CLOUDFRONT_URL}/assets/images/landing_img.svg`}
           alt="랜딩페이지 이미지"

src/components/heatmaps/HeatmapCell.tsx

@@ -5,7 +5,7 @@ import { formatMinutesToHourString } from '@/lib/format';
 import { cn } from '@/lib/utils';
 
 const heatmapCellVariants = cva(
-  'text-body-m-16 rounded-8 flex h-36 w-full max-w-139 min-w-64 items-center justify-center md:h-43 md:max-w-163 md:min-w-140 lg:max-w-164 lg:min-w-164',
+  'text-body-m-16 rounded-8 flex h-36 w-full min-w-64 items-center justify-center md:h-43 md:max-w-140 lg:h-32 lg:w-112',
   {
     variants: {
       intensity: {

src/components/heatmaps/HeatmapLayout.tsx

@@ -18,7 +18,7 @@ const HeatmapLayout = ({ type, data, children }: HeatmapLayoutProps) => {
         {timeKeys.map(key => (
           <div
             key={key}
-            className="text-text-04 text-body-m-16 flex h-48 w-full max-w-139 min-w-64 items-center justify-center text-center md:max-w-163 md:min-w-140 lg:max-w-164 lg:min-w-164"
+            className="text-text-04 text-body-m-16 flex h-48 w-full min-w-64 items-center justify-center text-center md:max-w-140 lg:w-112"
           >
             <span className="whitespace-pre-line">{TIME_LABELS[key]}</span>
           </div>

src/components/heatmaps/HeatmapRow.tsx

@@ -11,7 +11,7 @@ const HeatmapRow = ({ rowLabel, timeSlots }: HeatmapRowProps) => {
 
   return (
     <div className="flex items-center">
-      <div className="text-text-04 text-body-m-16 flex h-36 w-31 shrink-0 items-center md:h-43">
+      <div className="text-text-04 text-body-m-16 flex h-36 w-31 shrink-0 items-center md:h-43 lg:h-32">
         {rowLabel}
       </div>
 

src/components/insight/InsightCard.tsx

@@ -15,8 +15,8 @@ const InsightCard = ({ variant, item = '', className }: InsightCardProps) => {
   if (variant === 'no-data') {
     return (
       <div className={cn(baseClasses, 'items-center justify-center text-center', className)}>
-        <div className="text-body-m-16 text-text-03 flex flex-col items-center gap-8">
-          <TimerIcon className="text-inactive" width={32} height={32} fill="currentColor" />
+        <div className="text-body-m-16 text-text-03 flex flex-col items-center">
+          <TimerIcon className="text-inactive mb-8" width={32} height={32} fill="currentColor" />
 
           <p>
             작업 기록을 불러올 수 없어요 <br className="md:hidden" />

src/components/schedule/ScheduleSection.tsx

@@ -63,12 +63,12 @@ export default function ScheduleSection() {
           disabled={false}
           className="flex items-center gap-4"
         >
-          <span className="block sm:hidden">일정관리</span>
-          <span className="hidden sm:block">일정 관리하기</span>
+          <span className="block md:hidden">일정관리</span>
+          <span className="hidden md:block">일정 관리하기</span>
         </Button>
       }
     >
-      <div className="mb-20 h-80 overflow-y-scroll pr-4">
+      <div className="overflow-y-auto pr-4 lg:h-80 lg:overflow-y-scroll">
         <ul className="space-y-4">
           {deduplicatedAssignedTasks.map(({ time, task }) => (
             <li key={`${task.id}-${time}`} className="flex items-start gap-12 text-sm">

src/components/sidebar/Sidebar.tsx

@@ -34,7 +34,7 @@ export default function Sidebar() {
   return isOpen ? (
     <div
       className={cn(
-        `border-line md:rounded-tr-50 md:rounded-br-50 sm:rounded-tr-30 sm:rounded-br-30 static z-10 flex h-screen w-320 transform flex-col items-center overflow-y-auto border-r bg-white py-40 transition-all duration-200 ease-in-out sm:fixed sm:w-280 sm:py-8 md:fixed md:w-320 md:py-40 lg:static`,
+        `border-line md:rounded-tr-50 md:rounded-br-50 sm:rounded-tr-30 sm:rounded-br-30 static z-10 flex h-screen w-320 transform flex-col items-center border-r bg-white py-40 transition-all duration-200 ease-in-out sm:fixed sm:w-280 sm:py-8 md:fixed md:w-320 md:py-40 lg:static`,
         {
           'translate-x-0 opacity-100': isOpen,
           'pointer-events-none -translate-x-full opacity-0': !isOpen,
@@ -45,7 +45,7 @@ export default function Sidebar() {
         <SidebarHeader setIsOpen={setIsOpen} />
       </section>
 
-      <div className="flex flex-1 flex-col overflow-y-auto">
+      <div className="flex flex-1 flex-col overflow-y-auto pb-20 md:pb-0">
         <section className="mb-32 shrink-0 px-30 sm:mb-20 sm:px-16 md:mb-32 md:px-30">
           <SidebarUser />
         </section>
@@ -54,15 +54,15 @@ export default function Sidebar() {
           <SidebarMenu />
         </section>
 
-        <section className="mb-100 shrink-0 px-20 sm:px-18 md:px-20">
+        <section className="mb-20 flex-1 overflow-y-auto px-20 sm:px-18 md:px-20">
           <ErrorBoundary fallback={<ErrorFallback type="general" />}>
             <Suspense fallback={<CustomLoading />}>
               <SidebarGoalsList />
             </Suspense>
           </ErrorBoundary>
         </section>
 
-        <section className="shrink-0 px-30 sm:px-10 md:px-30">
+        <section className="mt-auto shrink-0 px-20">
           <Button size="addgoal" disabled={false} onClick={() => openGoalModal()}>
             + 목표추가
           </Button>

src/components/timer/TimerButton.tsx

@@ -13,24 +13,23 @@ export default function TimerButton({ isRunning, minutes, seconds, onClick }: Ti
   return (
     <button
       onClick={onClick}
-      className={`fixed right-40 bottom-40 z-50 flex h-100 w-100 cursor-pointer flex-col items-center justify-start rounded-full text-white shadow-xl transition-colors ${
-        isRunning ? 'bg-primary-01' : 'bg-timer'
-      }`}
+      className={`fixed right-40 bottom-40 z-50 flex h-60 w-60 flex-col items-center justify-center rounded-full text-white shadow-xl transition-colors lg:h-100 lg:w-100 ${isRunning ? 'bg-primary-01 border-timer border-2 lg:border-4' : 'bg-timer'}`}
     >
-      <div className={`flex flex-col items-center ${isRunning ? 'mt-13' : 'mt-25'}`}>
-        <TimerIcon className="text-white" width={24} height={24} fill="currentColor" />
+      <TimerIcon
+        className="mb-4 h-[14px] w-[14px] text-white lg:h-[24px] lg:w-[24px]"
+        fill="currentColor"
+      />
 
-        {isRunning ? (
-          <>
-            <div className="text-body-sb-20 mt-4">
-              {`${formatNumber(minutes)}:${formatNumber(seconds)}`}
-            </div>
-            <div className="text-body-sb-16">할 일 중</div>
-          </>
-        ) : (
-          <div className="text-body-sb-20 mt-4">할 일 시작</div>
-        )}
-      </div>
+      {isRunning ? (
+        <>
+          <div className="text-body-12 lg:text-body-sb-20 leading-4">
+            {`${formatNumber(minutes)}:${formatNumber(seconds)}`}
+          </div>
+          <div className="text-body-10 lg:text-body-m-16">할 일 중</div>
+        </>
+      ) : (
+        <div className="text-body-12 lg:text-body-sb-20 mt-4">할 일 시작</div>
+      )}
     </button>
   );
 }

src/components/ui/Button.tsx

@@ -43,11 +43,11 @@ const buttonVariants = cva('flex cursor-pointer items-center justify-center', {
       md: 'px-auto h-40 w-200 py-8',
       todoCard: 'h-40 w-84',
       emptytodoCard: 'h-40 w-200',
-      addgoal: 'h-48 w-260',
+      addgoal: 'h-40 w-full md:h-48',
       authModal: 'h-48 w-120',
       noteHeader: 'sm:h-40 sm:w-84 md:h-44 md:w-118',
       schedule: 'h-48 w-120 sm:w-165.5',
-      scheduleDashboard: 'h-40 w-120 sm:w-160',
+      scheduleDashboard: 'h-40 w-120 md:w-160',
       tempNote: 'h-40 w-84',
       sideNote: 'h-48 w-260',
       error: 'h-44 w-200',

src/components/ui/Card.tsx

@@ -10,12 +10,10 @@ const cardVariants = cva('rounded-20 flex flex-col gap-16 px-14 py-20 md:px-20',
     },
     size: {
       auto: 'w-fit',
-      heatmap:
-        'h-625 w-full max-w-635 min-w-343 md:h-600 md:max-w-739 md:min-w-636 lg:max-w-740 lg:min-w-740',
-      calendar:
-        'h-full w-full max-w-635 min-w-343 md:max-w-739 md:min-w-636 lg:h-412 lg:max-w-740 lg:min-w-740',
-      goal: 'h-1146 w-343 md:w-636 lg:h-428 lg:w-1504',
-      schedule: 'h-200 w-343 md:h-176 md:w-636 lg:h-176 lg:w-728',
+      heatmap: 'h-625 w-full min-w-343 md:h-600 md:max-w-636 lg:h-548 lg:max-w-536',
+      calendar: 'w-full min-w-343 md:max-w-636 lg:h-368 lg:max-w-536',
+      schedule: 'h-auto min-h-140 min-w-343 md:max-w-636 lg:h-168 lg:max-w-536',
+      goal: 'max-h-1146 w-343 w-full md:min-h-428 md:max-w-636 lg:h-388 lg:min-h-388 lg:max-w-1096',
     },
   },
   defaultVariants: {

src/components/ui/Tab.tsx

@@ -6,7 +6,7 @@ import { cn } from '@/lib/utils';
 
 // Tab 버튼 variants
 const tabVariants = cva(
-  'text-body-m-16 md:text-body-m-20 rounded-8 flex h-24 w-136 items-center justify-center transition-all duration-200 md:h-32 md:w-156',
+  'text-body-m-16 md:text-body-m-20 rounded-8 flex h-24 w-136 items-center justify-center transition-all duration-200 md:h-32 md:max-w-156 lg:h-32 lg:w-120',
   {
     variants: {
       variant: {

src/styles/globals.css

@@ -307,6 +307,11 @@
   font-weight: 400;
   line-height: 22px;
 }
+@utility text-body-10 {
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 22px;
+}
 
 /*logo*/
 @utility text-logo-52 {