Design/(#114) : auth 페이지, 대시보드 헤더 반응형 css 수정 (#115)

* design: (auth)레이아웃 수정

* design:헤더 유저이름 모바일사이즈에서 삭제

* design: 대시보드 헤더 css수정

* design: 대시보드 헤더 css수정

Author: Namgyeon

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;

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>
   );
 }

src/components/columns/Column.tsx

@@ -10,15 +10,15 @@ 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()}>
         {(provided, snapshot) => (
           <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"

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>

src/components/dashboard/header/DashBoardInfo.tsx

@@ -25,7 +25,9 @@ const DashBoardInfo = ({ dashboardId }: { dashboardId: number }) => {
             초대하기
           </HeaderButton>
         </div>
-        <AvatarStack dashboardId={dashboardId} />
+        <div className="hidden md:block">
+          <AvatarStack dashboardId={dashboardId} />
+        </div>
       </div>
       <Modal ref={modalRef}>
         <InviteModal

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="text-lg md:hidden lg:block truncate text-[#333236] font-bold">
+    <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 hidden md: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 md:divide-x divide-gray-300">
         {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 pl-9 pr-4 md:pr-9 items-center">
           <Profile />
         </div>
       </div>

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>

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>

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