From d6d4f6855826f06f261cb2681cb8d58c3e0f74ad Mon Sep 17 00:00:00 2001
From: Namgyeon <getam101@naver.com>
Date: Sun, 17 Aug 2025 17:36:15 +0900
Subject: [PATCH 1/4] =?UTF-8?q?design:=20(auth)=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(before-login)/(auth)/layout.tsx | 36 ++++++++++++------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/app/(before-login)/(auth)/layout.tsx b/src/app/(before-login)/(auth)/layout.tsx
index 06e1950..7768bb5 100644
--- a/src/app/(before-login)/(auth)/layout.tsx
+++ b/src/app/(before-login)/(auth)/layout.tsx
@@ -7,24 +7,24 @@ export default function AuthLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <main>
-      <section className="min-h-screen w-full flex flex-col items-center justify-center gap-7.5">
-        <div className="flex flex-col items-center gap-2.5">
-          <Link href="/">
-            <Image
-              src="/logo/logo.svg"
-              alt="로고 이미지"
-              width={200}
-              height={280}
-              priority
-            />
-          </Link>
-          <p className="text-xl font-medium text-[var(--black-333236)]">
-            오늘도 만나서 반가워요!
-          </p>
-        </div>
-        <div className="max-w-[520px] w-full">{children}</div>
-      </section>
+    <main className="min-h-screen w-full py-10 flex flex-col items-center justify-center gap-7.5">
+      <header className="flex flex-col items-center gap-2.5">
+        <Link href="/">
+          <Image
+            src="/logo/logo.svg"
+            alt="로고 이미지"
+            width={200}
+            height={280}
+            sizes="(max-width: 768px) 160px, 200px"
+            className="w-40 h-56 md:w-50 md:h-64"
+            priority
+          />
+        </Link>
+        <p className="text-xl font-medium text-[var(--black-333236)]">
+          오늘도 만나서 반가워요!
+        </p>
+      </header>
+      <div className="max-w-[520px] w-full px-4">{children}</div>
     </main>
   );
 }

From fabdb7aaf0eb62516024237251038c74979fb22d Mon Sep 17 00:00:00 2001
From: Namgyeon <getam101@naver.com>
Date: Sun, 17 Aug 2025 18:19:07 +0900
Subject: [PATCH 2/4] =?UTF-8?q?design:=ED=97=A4=EB=8D=94=20=EC=9C=A0?=
 =?UTF-8?q?=EC=A0=80=EC=9D=B4=EB=A6=84=20=EB=AA=A8=EB=B0=94=EC=9D=BC?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=EC=A6=88=EC=97=90=EC=84=9C=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dashboard/header/DashBoardInfo.tsx | 4 +++-
 src/components/dashboard/header/Header.tsx        | 6 +++---
 src/components/dashboard/header/HeaderButton.tsx  | 6 +++---
 src/components/ui/Dropdown/index.tsx              | 1 +
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/dashboard/header/DashBoardInfo.tsx b/src/components/dashboard/header/DashBoardInfo.tsx
index c46d9d0..de37942 100644
--- a/src/components/dashboard/header/DashBoardInfo.tsx
+++ b/src/components/dashboard/header/DashBoardInfo.tsx
@@ -25,7 +25,9 @@ const DashBoardInfo = ({ dashboardId }: { dashboardId: number }) => {
             초대하기
           </HeaderButton>
         </div>
-        <AvatarStack dashboardId={dashboardId} />
+        <div className="flex-shrink-0">
+          <AvatarStack dashboardId={dashboardId} />
+        </div>
       </div>
       <Modal ref={modalRef}>
         <InviteModal
diff --git a/src/components/dashboard/header/Header.tsx b/src/components/dashboard/header/Header.tsx
index dab6782..9e8735f 100644
--- a/src/components/dashboard/header/Header.tsx
+++ b/src/components/dashboard/header/Header.tsx
@@ -18,17 +18,17 @@ const Header = () => {
     return dashboardData?.title || "내 대시보드";
   };
   return (
-    <div className="w-full flex items-center md:justify-end lg:justify-between  px-3 md:px-8 lg:px-10 py-4 border-b border-b-gray-200">
+    <div className="w-full flex items-center justify-between md:justify-end lg:justify-between px-2 md:px-8 lg:px-10 py-4 border-b border-b-gray-200">
       <div className="text-lg md:hidden lg:block truncate text-[#333236] font-bold">
         {getPageTitle()}
       </div>
-      <div className="flex items-center justify-end gap-4 md:gap-9 divide-x divide-gray-300">
+      <div className="flex items-center justify-end">
         {dashboardData && (
           <div className="flex md:pr-9 items-center">
             <DashBoardInfo dashboardId={dashboardData.id} />
           </div>
         )}
-        <div className="flex pr-4 md:pr-9 items-center">
+        <div className="md:flex pr-4 hidden md:pr-9 items-center">
           <Profile />
         </div>
       </div>
diff --git a/src/components/dashboard/header/HeaderButton.tsx b/src/components/dashboard/header/HeaderButton.tsx
index b3fa113..a29616c 100644
--- a/src/components/dashboard/header/HeaderButton.tsx
+++ b/src/components/dashboard/header/HeaderButton.tsx
@@ -11,16 +11,16 @@ interface HeaderButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 const HeaderButton = ({ children, href, icon, onClick }: HeaderButtonProps) => {
   return (
     <Link href={href ?? ""} onClick={onClick}>
-      <div className="flex items-center gap-2 px-4 py-2 border border-gray-400 rounded-lg hover:bg-gray-200 transition-colors">
+      <div className="flex items-center gap-1 md:gap-2 px-2 md:px-4 py-2 border border-gray-400 rounded-lg hover:bg-gray-200 transition-colors min-w-0">
         <Image
           src={icon}
           alt={`${icon} 아이콘`}
           width={20}
           height={20}
-          className="hidden md:block"
+          className="hidden md:block flex-shrink-0"
           style={{ width: "20px", height: "20px" }}
         />
-        <div className="font-medium text-[#787486] whitespace-nowrap">
+        <div className="font-medium text-[#787486] text-sm md:text-base truncate">
           {children}
         </div>
       </div>
diff --git a/src/components/ui/Dropdown/index.tsx b/src/components/ui/Dropdown/index.tsx
index d84510b..50f4c6b 100644
--- a/src/components/ui/Dropdown/index.tsx
+++ b/src/components/ui/Dropdown/index.tsx
@@ -41,6 +41,7 @@ const Dropdown = ({
       <Menu.Button
         className={clsx(
           "relative flex items-center w-5 h-5 md:w-7 md:h-7 hover:bg-gray-200 rounded-lg transition-colors cursor-pointer z-[100]",
+          text ? "pr-2 py-1" : "w-5 h-5 md:w-7 md:h-7",
           className
         )}
       >

From 2347959c2c5f80406dc24a1042ded69e10009bec Mon Sep 17 00:00:00 2001
From: Namgyeon <getam101@naver.com>
Date: Sun, 17 Aug 2025 21:26:35 +0900
Subject: [PATCH 3/4] =?UTF-8?q?design:=20=EB=8C=80=EC=8B=9C=EB=B3=B4?=
 =?UTF-8?q?=EB=93=9C=20=ED=97=A4=EB=8D=94=20css=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(after-login)/dashboard/[id]/page.tsx     | 6 +++++-
 src/components/columns/Column.tsx                 | 4 ++--
 src/components/columns/ColumnList.tsx             | 4 ++--
 src/components/dashboard/header/DashBoardInfo.tsx | 2 +-
 src/components/dashboard/header/Header.tsx        | 4 ++--
 src/components/dashboard/header/Profile.tsx       | 2 +-
 6 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/app/(after-login)/dashboard/[id]/page.tsx b/src/app/(after-login)/dashboard/[id]/page.tsx
index 32e1e02..b1ca613 100644
--- a/src/app/(after-login)/dashboard/[id]/page.tsx
+++ b/src/app/(after-login)/dashboard/[id]/page.tsx
@@ -49,7 +49,11 @@ export async function generateMetadata({
 }
 
 const DashboardDetailPage = () => {
-  return <ColumnList />;
+  return (
+    <div className="px-2 md:px-4">
+      <ColumnList />
+    </div>
+  );
 };
 
 export default DashboardDetailPage;
diff --git a/src/components/columns/Column.tsx b/src/components/columns/Column.tsx
index 803609a..c966387 100644
--- a/src/components/columns/Column.tsx
+++ b/src/components/columns/Column.tsx
@@ -10,7 +10,7 @@ interface ColumnProps {
 
 const Column = ({ column }: ColumnProps) => {
   return (
-    <div className="flex flex-col gap-6 min-w-88 px-3 md:px-5 py-4 md:py-6 border-b lg:border-b-0 lg:border-r border-gray-300 lg:overflow-y-auto">
+    <div className="flex flex-col gap-6 min-w-0 md:min-w-88 md:px-5 py-4 md:py-6 border-b lg:border-b-0 lg:border-r border-gray-300 lg:overflow-y-auto">
       <ColumnTitle {...column} />
       <CreateCard columnId={column.id} />
       <Droppable droppableId={column.id.toString()}>
@@ -18,7 +18,7 @@ const Column = ({ column }: ColumnProps) => {
           <div
             {...provided.droppableProps}
             ref={provided.innerRef}
-            className={`min-h-[400px] p-4 rounded-lg transition-colors ${
+            className={`min-h-[400px] rounded-lg transition-colors ${
               snapshot.isDraggingOver
                 ? "bg-blue-50 border-2 border-blue-300 border-dashed"
                 : "bg-gray-50"
diff --git a/src/components/columns/ColumnList.tsx b/src/components/columns/ColumnList.tsx
index 8027565..f840f96 100644
--- a/src/components/columns/ColumnList.tsx
+++ b/src/components/columns/ColumnList.tsx
@@ -52,11 +52,11 @@ const ColumnList = () => {
 
   return (
     <DragDropContext onDragEnd={handleDragEnd}>
-      <div className="h-full flex flex-col lg:flex-row overflow-y-auto lg:overflow-x-auto">
+      <div className="h-full flex flex-col lg:flex-row not-last:overflow-y-auto lg:overflow-x-auto">
         {data?.data.map((column) => (
           <Column key={column.id} column={column} />
         ))}
-        <div className="px-3 pt-4 md:pt-6">
+        <div className="pt-4 md:pt-6">
           <CreateColumn />
         </div>
       </div>
diff --git a/src/components/dashboard/header/DashBoardInfo.tsx b/src/components/dashboard/header/DashBoardInfo.tsx
index de37942..ec3c8dd 100644
--- a/src/components/dashboard/header/DashBoardInfo.tsx
+++ b/src/components/dashboard/header/DashBoardInfo.tsx
@@ -25,7 +25,7 @@ const DashBoardInfo = ({ dashboardId }: { dashboardId: number }) => {
             초대하기
           </HeaderButton>
         </div>
-        <div className="flex-shrink-0">
+        <div className="hidden md:block">
           <AvatarStack dashboardId={dashboardId} />
         </div>
       </div>
diff --git a/src/components/dashboard/header/Header.tsx b/src/components/dashboard/header/Header.tsx
index 9e8735f..cc56c53 100644
--- a/src/components/dashboard/header/Header.tsx
+++ b/src/components/dashboard/header/Header.tsx
@@ -22,13 +22,13 @@ const Header = () => {
       <div className="text-lg md:hidden lg:block truncate text-[#333236] font-bold">
         {getPageTitle()}
       </div>
-      <div className="flex items-center justify-end">
+      <div className="flex items-center md:divide-x divide-gray-300">
         {dashboardData && (
           <div className="flex md:pr-9 items-center">
             <DashBoardInfo dashboardId={dashboardData.id} />
           </div>
         )}
-        <div className="md:flex pr-4 hidden md:pr-9 items-center">
+        <div className="md:flex pl-9 pr-4 md:pr-9 items-center">
           <Profile />
         </div>
       </div>
diff --git a/src/components/dashboard/header/Profile.tsx b/src/components/dashboard/header/Profile.tsx
index 63f33ce..c6c95c5 100644
--- a/src/components/dashboard/header/Profile.tsx
+++ b/src/components/dashboard/header/Profile.tsx
@@ -51,7 +51,7 @@ const Profile = () => {
           },
           { label: "로그아웃", onClick: handleLogout },
         ]}
-        className="hover:bg-transparent"
+        className="md:flex items-center hidden hover:bg-transparent"
         optionClassName="px-8 py-3"
       />
     </div>

From b4c5806ed118f53e060171b9862b6cf00761186c Mon Sep 17 00:00:00 2001
From: Namgyeon <getam101@naver.com>
Date: Sun, 17 Aug 2025 21:27:37 +0900
Subject: [PATCH 4/4] =?UTF-8?q?design:=20=EB=8C=80=EC=8B=9C=EB=B3=B4?=
 =?UTF-8?q?=EB=93=9C=20=ED=97=A4=EB=8D=94=20css=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dashboard/header/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/dashboard/header/Header.tsx b/src/components/dashboard/header/Header.tsx
index cc56c53..3ca98ea 100644
--- a/src/components/dashboard/header/Header.tsx
+++ b/src/components/dashboard/header/Header.tsx
@@ -19,7 +19,7 @@ const Header = () => {
   };
   return (
     <div className="w-full flex items-center justify-between md:justify-end lg:justify-between px-2 md:px-8 lg:px-10 py-4 border-b border-b-gray-200">
-      <div className="text-lg md:hidden lg:block truncate text-[#333236] font-bold">
+      <div className="text-lg hidden md:block truncate text-[#333236] font-bold">
         {getPageTitle()}
       </div>
       <div className="flex items-center md:divide-x divide-gray-300">