From cb6e837f2fc3cc88652b880c98e99e8bf5e03878 Mon Sep 17 00:00:00 2001
From: 00kang <kdb070970@gmail.com>
Date: Sat, 25 Oct 2025 16:23:43 +0900
Subject: [PATCH 1/7] Style:#315 - add text-body-10 font utility

---
 src/styles/globals.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/styles/globals.css b/src/styles/globals.css
index 59a95a3..8ed9463 100644
--- a/src/styles/globals.css
+++ b/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 {

From 5c5e40d353b57e63d6c5ffb356b16c51841cfad6 Mon Sep 17 00:00:00 2001
From: 00kang <kdb070970@gmail.com>
Date: Sat, 25 Oct 2025 16:26:38 +0900
Subject: [PATCH 2/7] Style:#315 - update heatmap layout and responsive styles
 across components

---
 src/components/heatmaps/HeatmapCell.tsx   | 2 +-
 src/components/heatmaps/HeatmapLayout.tsx | 2 +-
 src/components/heatmaps/HeatmapRow.tsx    | 2 +-
 src/components/insight/InsightCard.tsx    | 4 ++--
 src/components/ui/Card.tsx                | 3 +--
 src/components/ui/Tab.tsx                 | 2 +-
 6 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/heatmaps/HeatmapCell.tsx b/src/components/heatmaps/HeatmapCell.tsx
index 760d6aa..064ac02 100644
--- a/src/components/heatmaps/HeatmapCell.tsx
+++ b/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: {
diff --git a/src/components/heatmaps/HeatmapLayout.tsx b/src/components/heatmaps/HeatmapLayout.tsx
index 741d085..3fabbda 100644
--- a/src/components/heatmaps/HeatmapLayout.tsx
+++ b/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>
diff --git a/src/components/heatmaps/HeatmapRow.tsx b/src/components/heatmaps/HeatmapRow.tsx
index a61e050..cc5d175 100644
--- a/src/components/heatmaps/HeatmapRow.tsx
+++ b/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>
 
diff --git a/src/components/insight/InsightCard.tsx b/src/components/insight/InsightCard.tsx
index 3744c50..29055cb 100644
--- a/src/components/insight/InsightCard.tsx
+++ b/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" />
diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx
index 06fa22b..5bcd091 100644
--- a/src/components/ui/Card.tsx
+++ b/src/components/ui/Card.tsx
@@ -10,8 +10,7 @@ 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',
+      heatmap: 'h-625 w-full min-w-343 md:h-600 md:max-w-636 lg:h-548 lg:max-w-536',
       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',
diff --git a/src/components/ui/Tab.tsx b/src/components/ui/Tab.tsx
index e4d5c4a..9a6152d 100644
--- a/src/components/ui/Tab.tsx
+++ b/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: {

From 829713967f9e8ba8b814fe668efa6c1910ba6562 Mon Sep 17 00:00:00 2001
From: 00kang <kdb070970@gmail.com>
Date: Sat, 25 Oct 2025 16:27:32 +0900
Subject: [PATCH 3/7] Style:#315 - update calendar layout and responsive styles
 across components

---
 src/components/calendar/CalendarCell.tsx | 4 ++--
 src/components/calendar/CalendarGrid.tsx | 4 ++--
 src/components/ui/Card.tsx               | 3 +--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/calendar/CalendarCell.tsx b/src/components/calendar/CalendarCell.tsx
index 1090f2c..b8551d6 100644
--- a/src/components/calendar/CalendarCell.tsx
+++ b/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
diff --git a/src/components/calendar/CalendarGrid.tsx b/src/components/calendar/CalendarGrid.tsx
index 0e515b3..84d409b 100644
--- a/src/components/calendar/CalendarGrid.tsx
+++ b/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>
   );
 });
diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx
index 5bcd091..a249610 100644
--- a/src/components/ui/Card.tsx
+++ b/src/components/ui/Card.tsx
@@ -11,8 +11,7 @@ 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 min-w-343 md:h-600 md:max-w-636 lg:h-548 lg:max-w-536',
-      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',
+      calendar: 'w-full min-w-343 md:max-w-636 lg:h-368 lg:max-w-536',
       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',
     },

From 5fe82f4c9d16a8e61fbb7cde8c82f84cd708850d Mon Sep 17 00:00:00 2001
From: 00kang <kdb070970@gmail.com>
Date: Sat, 25 Oct 2025 16:28:21 +0900
Subject: [PATCH 4/7] Style:#315 - update schedule layout and responsive styles
 across components

---
 src/components/schedule/ScheduleSection.tsx | 6 +++---
 src/components/ui/Card.tsx                  | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/schedule/ScheduleSection.tsx b/src/components/schedule/ScheduleSection.tsx
index 43165b3..fb5df3c 100644
--- a/src/components/schedule/ScheduleSection.tsx
+++ b/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">
diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx
index a249610..7d1aea2 100644
--- a/src/components/ui/Card.tsx
+++ b/src/components/ui/Card.tsx
@@ -12,8 +12,8 @@ const cardVariants = cva('rounded-20 flex flex-col gap-16 px-14 py-20 md:px-20',
       auto: 'w-fit',
       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: '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',
     },
   },
   defaultVariants: {

From 5d717bcea2dcad04a984a9c24a90b7109a6cc4f8 Mon Sep 17 00:00:00 2001
From: 00kang <kdb070970@gmail.com>
Date: Sat, 25 Oct 2025 16:29:36 +0900
Subject: [PATCH 5/7] Style:#315 - update goalList layout and responsive styles
 across components

---
 src/components/goals/EmptyTodo.tsx                | 2 +-
 src/components/goals/GoalCardContent.tsx          | 4 ++--
 src/components/goals/GoalListDashboardCard.tsx    | 2 +-
 src/components/goals/GoalListDashboardSection.tsx | 2 +-
 src/components/goals/NoGoalsGuide.tsx             | 4 ++--
 src/components/ui/Button.tsx                      | 4 ++--
 src/components/ui/Card.tsx                        | 2 +-
 7 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/goals/EmptyTodo.tsx b/src/components/goals/EmptyTodo.tsx
index 383bd86..037088a 100644
--- a/src/components/goals/EmptyTodo.tsx
+++ b/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 />할 일을 생성해볼까요?
diff --git a/src/components/goals/GoalCardContent.tsx b/src/components/goals/GoalCardContent.tsx
index 1324559..0031dd9 100644
--- a/src/components/goals/GoalCardContent.tsx
+++ b/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
diff --git a/src/components/goals/GoalListDashboardCard.tsx b/src/components/goals/GoalListDashboardCard.tsx
index bb5e531..d280c03 100644
--- a/src/components/goals/GoalListDashboardCard.tsx
+++ b/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">
diff --git a/src/components/goals/GoalListDashboardSection.tsx b/src/components/goals/GoalListDashboardSection.tsx
index c48695c..c9a0322 100644
--- a/src/components/goals/GoalListDashboardSection.tsx
+++ b/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} />
             ))}
diff --git a/src/components/goals/NoGoalsGuide.tsx b/src/components/goals/NoGoalsGuide.tsx
index af1a409..ee6d404 100644
--- a/src/components/goals/NoGoalsGuide.tsx
+++ b/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="랜딩페이지 이미지"
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index a2237f7..5f032c3 100644
--- a/src/components/ui/Button.tsx
+++ b/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-160 md:h-48 md:w-260',
       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',
diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx
index 7d1aea2..6e5dfc4 100644
--- a/src/components/ui/Card.tsx
+++ b/src/components/ui/Card.tsx
@@ -13,7 +13,7 @@ const cardVariants = cva('rounded-20 flex flex-col gap-16 px-14 py-20 md:px-20',
       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: 'h-1146 w-343 md:w-636 lg:h-428 lg:w-1504',
+      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: {

From 7f23c537784c0806bbf843397d92ee27ca4b896f Mon Sep 17 00:00:00 2001
From: 00kang <kdb070970@gmail.com>
Date: Sat, 25 Oct 2025 17:14:15 +0900
Subject: [PATCH 6/7] Style:#315 - refine TimerButton layout and responsive
 text/icon styles

---
 src/components/timer/TimerButton.tsx | 31 ++++++++++++++--------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/components/timer/TimerButton.tsx b/src/components/timer/TimerButton.tsx
index 81713a4..9b4f2f1 100644
--- a/src/components/timer/TimerButton.tsx
+++ b/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>
   );
 }

From 60fdc28129196d27db90f826ec49754e063243f1 Mon Sep 17 00:00:00 2001
From: 00kang <kdb070970@gmail.com>
Date: Sat, 25 Oct 2025 17:40:28 +0900
Subject: [PATCH 7/7] Style:#315 - refine sidebar scroll layout and adjust
 addgoal button width

---
 src/components/sidebar/Sidebar.tsx | 8 ++++----
 src/components/ui/Button.tsx       | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index bb27f04..0f6e6ed 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/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,7 +54,7 @@ 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 />
@@ -62,7 +62,7 @@ export default function Sidebar() {
           </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>
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index 5f032c3..a463ab3 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -43,7 +43,7 @@ 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-40 w-160 md:h-48 md: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',