From 78b384286219df471b950f46e366ee46915493af Mon Sep 17 00:00:00 2001
From: Joinsung <leeming01@naver.com>
Date: Mon, 23 Jun 2025 06:01:14 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9Bfix:=20=ED=97=A4=EB=8D=94=20?=
 =?UTF-8?q?=EB=AC=B8=EC=A0=9C=201=EC=B0=A8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/dashboard/[id]/layout.tsx             |  2 +-
 src/app/globals.css                           |  4 ++
 .../components/common/header/Header.tsx       |  5 ++-
 .../common/header/RightHeaderNav.tsx          |  2 +-
 .../components/common/sidebar/Sidebar.tsx     | 42 +++++++++----------
 5 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/src/app/dashboard/[id]/layout.tsx b/src/app/dashboard/[id]/layout.tsx
index bd8ae61..cdcc913 100644
--- a/src/app/dashboard/[id]/layout.tsx
+++ b/src/app/dashboard/[id]/layout.tsx
@@ -12,7 +12,7 @@ export default function AboutLayout({
       <Sidebar />
       <div className="pl-[300px] transition-all duration-300 mobile:pl-67 tablet:pl-[150px]">
         <Header />
-        <main>{children}</main>
+        <main className="pt-57">{children}</main>
       </div>
     </>
   )
diff --git a/src/app/globals.css b/src/app/globals.css
index f2baa3c..e5e7cfb 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -119,3 +119,7 @@ body {
 .BG-card {
   @apply bg-[#83C8FA] dark:bg-[#000000];
 }
+
+.Border-right {
+  @apply border-r border-[#D9D9D9] dark:border-[#454545];
+}
diff --git a/src/app/shared/components/common/header/Header.tsx b/src/app/shared/components/common/header/Header.tsx
index 8720485..5e84a76 100644
--- a/src/app/shared/components/common/header/Header.tsx
+++ b/src/app/shared/components/common/header/Header.tsx
@@ -9,8 +9,9 @@ import UserDropdown from './UserDropdown'
 
 export default function Header() {
   return (
-    <header className="BG-white Border-bottom Text-black w-full overflow-x-auto border-b px-48 py-10">
-      <div className="flex w-full items-center justify-between pr-16">
+    //px-48
+    <header className="z-1 BG-white Border-bottom Text-black fixed inset-x-0 top-0 w-full overflow-x-auto border-b py-10 pl-320 pr-10 mobile-wide:pl-100 tablet-wide:pl-210">
+      <div className="flex w-full items-center justify-between pr-16 mobile-wide:justify-end tablet-wide:justify-between">
         {/* 좌측 대시보드명 */}
         <div className="hidden lg:block">
           <LeftHeaderContent />
diff --git a/src/app/shared/components/common/header/RightHeaderNav.tsx b/src/app/shared/components/common/header/RightHeaderNav.tsx
index d53b7f9..3ea668f 100644
--- a/src/app/shared/components/common/header/RightHeaderNav.tsx
+++ b/src/app/shared/components/common/header/RightHeaderNav.tsx
@@ -14,7 +14,7 @@ export default function RightHeaderNav() {
   const isMyDashboardPage = pathname === '/mydashboard'
 
   return (
-    <nav className="Text-black hidden gap-6 whitespace-nowrap text-sm md:flex">
+    <nav className="Text-black flex gap-6 whitespace-nowrap text-sm md:flex">
       {!isMyDashboardPage && (
         <>
           <NavItem
diff --git a/src/app/shared/components/common/sidebar/Sidebar.tsx b/src/app/shared/components/common/sidebar/Sidebar.tsx
index af8e1d1..738e556 100644
--- a/src/app/shared/components/common/sidebar/Sidebar.tsx
+++ b/src/app/shared/components/common/sidebar/Sidebar.tsx
@@ -52,17 +52,17 @@ export default function Sidebar(): JSX.Element {
     error instanceof Error ? error.message : '대시보드 목록 불러오기 실패'
 
   return (
-    <aside className="BG-white Border-section mobile-wide:w-67 tablet-wide:w-160 fixed left-0 top-0 z-50 flex h-full w-300 flex-col">
+    <aside className="BG-white Border-right fixed left-0 top-0 z-50 flex h-full w-300 flex-col mobile-wide:w-67 tablet-wide:w-160">
       {/* 로고 섹션 */}
-      <div className="mobile-wide:justify-center mobile-wide:px-8 tablet-wide:px-12 flex h-70 flex-shrink-0 items-center px-20">
+      <div className="flex h-70 flex-shrink-0 items-center px-20 mobile-wide:justify-center mobile-wide:px-8 tablet-wide:px-12">
         <Link href="/mydashboard" className="flex items-center gap-8">
-          <div className="mobile-wide:size-24 tablet-wide:h-30 tablet-wide:w-120 relative h-35 w-150">
+          <div className="relative h-35 w-150 mobile-wide:size-24 tablet-wide:h-30 tablet-wide:w-120">
             {/* 데스크톱 & 태블릿: 전체 로고 */}
             <Image
               src="/images/logo-light2.svg"
               alt="Coplan logo"
               fill
-              className="mobile-wide:hidden object-contain"
+              className="object-contain mobile-wide:hidden"
               priority
             />
             {/* 모바일: 아이콘만 */}
@@ -70,7 +70,7 @@ export default function Sidebar(): JSX.Element {
               src="/images/logo-icon-light.svg"
               alt="Coplan"
               fill
-              className="mobile-wide:block hidden object-contain"
+              className="hidden object-contain mobile-wide:block"
               priority
             />
           </div>
@@ -78,36 +78,36 @@ export default function Sidebar(): JSX.Element {
       </div>
 
       {/* 대시보드 섹션 */}
-      <div className="mobile-wide:px-8 mobile-wide:py-12 tablet-wide:px-12 tablet-wide:py-16 flex min-h-0 flex-1 flex-col px-20 py-24">
+      <div className="flex min-h-0 flex-1 flex-col px-20 py-24 mobile-wide:px-8 mobile-wide:py-12 tablet-wide:px-12 tablet-wide:py-16">
         {/* 헤더 */}
-        <div className="mobile-wide:hidden tablet-wide:mb-16 mb-24 flex flex-shrink-0 items-center justify-between">
-          <h2 className="Text-gray tablet-wide:text-10 text-12 font-semibold">
+        <div className="mb-24 flex flex-shrink-0 items-center justify-between mobile-wide:hidden tablet-wide:mb-16">
+          <h2 className="Text-gray text-12 font-semibold tablet-wide:text-10">
             Dash Boards
           </h2>
           <CreateDashboardButton onClick={() => openModal('createDashboard')} />
         </div>
 
         {/* 모바일 전용 + 버튼 */}
-        <div className="mobile-wide:flex mb-12 hidden flex-shrink-0 justify-center">
+        <div className="mb-12 hidden flex-shrink-0 justify-center mobile-wide:flex">
           <CreateDashboardButton onClick={() => openModal('createDashboard')} />
         </div>
 
         {/* 스크롤 가능한 대시보드 목록 컨테이너 */}
         <div
           ref={containerRef}
-          className="mobile-wide:space-y-4 tablet-wide:space-y-6 flex-1 space-y-8 overflow-y-auto"
+          className="flex-1 space-y-8 overflow-y-auto mobile-wide:space-y-4 tablet-wide:space-y-6"
           style={{ minHeight: '200px' }}
         >
           {isLoading ? (
-            <div className="mobile-wide:py-8 tablet-wide:py-12 flex items-center justify-center py-20">
-              <div className="Text-gray mobile-wide:hidden tablet-wide:text-12 text-14">
+            <div className="flex items-center justify-center py-20 mobile-wide:py-8 tablet-wide:py-12">
+              <div className="Text-gray text-14 mobile-wide:hidden tablet-wide:text-12">
                 로딩중...
               </div>
               {/* 모바일: 로딩 스피너만 */}
-              <div className="mobile-wide:block hidden size-16 animate-spin rounded-full border-2 border-gray-200 border-t-blue-500" />
+              <div className="hidden size-16 animate-spin rounded-full border-2 border-gray-200 border-t-blue-500 mobile-wide:block" />
             </div>
           ) : error ? (
-            <div className="mobile-wide:py-8 tablet-wide:py-12 flex items-center justify-center py-20">
+            <div className="flex items-center justify-center py-20 mobile-wide:py-8 tablet-wide:py-12">
               <div className="Text-red text-14">{errorMessage}</div>
             </div>
           ) : allDashboards.length > 0 ? (
@@ -124,16 +124,16 @@ export default function Sidebar(): JSX.Element {
 
               {/* 추가 로딩 중일 때 스켈레톤 */}
               {isFetchingNextPage && (
-                <div className="mobile-wide:space-y-4 tablet-wide:space-y-6 space-y-8">
+                <div className="space-y-8 mobile-wide:space-y-4 tablet-wide:space-y-6">
                   {Array.from({ length: 3 }).map((_, index) => (
                     <div
                       key={`skeleton-${index}`}
-                      className="mobile-wide:justify-center mobile-wide:gap-0 mobile-wide:p-4 tablet-wide:gap-8 tablet-wide:p-8 flex items-center gap-12 rounded-6 p-12"
+                      className="flex items-center gap-12 rounded-6 p-12 mobile-wide:justify-center mobile-wide:gap-0 mobile-wide:p-4 tablet-wide:gap-8 tablet-wide:p-8"
                     >
                       {/* 색상 원 스켈레톤 */}
-                      <div className="mobile-wide:size-12 tablet-wide:size-6 size-8 animate-pulse rounded-full bg-gray-200" />
+                      <div className="size-8 animate-pulse rounded-full bg-gray-200 mobile-wide:size-12 tablet-wide:size-6" />
                       {/* 제목 스켈레톤 - 모바일에서 숨김 */}
-                      <div className="mobile-wide:hidden tablet-wide:h-14 h-16 flex-1 animate-pulse rounded-4 bg-gray-200" />
+                      <div className="h-16 flex-1 animate-pulse rounded-4 bg-gray-200 mobile-wide:hidden tablet-wide:h-14" />
                     </div>
                   ))}
                 </div>
@@ -141,12 +141,12 @@ export default function Sidebar(): JSX.Element {
 
               {/* 더 이상 데이터가 없을 때 */}
               {!hasNextPage && allDashboards.length > 0 && (
-                <div className="mobile-wide:py-4 tablet-wide:py-8 py-12 text-center">
-                  <p className="Text-gray mobile-wide:hidden tablet-wide:text-10 text-12">
+                <div className="py-12 text-center mobile-wide:py-4 tablet-wide:py-8">
+                  <p className="Text-gray text-12 mobile-wide:hidden tablet-wide:text-10">
                     모든 대시보드를 확인했습니다.
                   </p>
                   {/* 모바일: 완료 아이콘만 */}
-                  <div className="Text-gray mobile-wide:block hidden text-12">
+                  <div className="Text-gray hidden text-12 mobile-wide:block">
                     ✓
                   </div>
                 </div>