🐛 [fix] scrollbar로 인한 레이아웃 망가짐 수정

Author: seorang42

src/assets/styles.css

@@ -99,7 +99,7 @@ body {
   @apply flex justify-center items-center w-full h-8 px-2 border-b border-border-1 relative text-xs cursor-pointer;
 }
 .filter-dropdown-option-list {
-  @apply w-full max-h-[160px] overflow-y-scroll absolute left-0 top-[calc(100%+8px)] shadow-custom p-2 flex flex-col gap-2 rounded bg-white cursor-auto;
+  @apply w-full max-h-[160px] overflow-y-auto scrollbar-hide absolute left-0 top-[calc(100%+8px)] shadow-custom p-2 flex flex-col gap-2 rounded bg-white cursor-auto;
 }
 .filter-dropdown-option {
   @apply text-xs p-2 rounded text-center cursor-pointer;
@@ -117,7 +117,7 @@ body {
   @apply flex w-full h-11 items-center rounded p-4 bg-white border border-border-1 cursor-pointer;
 }
 .request-task-dropdown-option-list {
-  @apply absolute w-full h-40 overflow-y-auto top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow-custom;
+  @apply absolute w-full h-40 overflow-y-auto scrollbar-hide top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow-custom;
 }
 .request-task-dropdown-option {
   @apply w-full flex items-center h-11 p-2 rounded hover:bg-background-2 cursor-pointer;
@@ -140,7 +140,7 @@ body {
   @apply flex w-full h-10 items-center text-sm rounded pl-4 pr-3 bg-white border border-border-1 cursor-pointer;
 }
 .task-detail-dropdown-option-list {
-  @apply absolute w-full h-40 overflow-y-auto top-11 flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2;
+  @apply absolute w-full h-40 overflow-y-auto scrollbar-hide top-11 flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2;
 }
 .task-detail-dropdown-option {
   @apply w-full flex items-center h-10 p-2 rounded hover:bg-background-2 cursor-pointer;

src/components/lists/ListContainer.vue

@@ -3,7 +3,7 @@
     <div class="w-full flex flex-col grow overflow-hidden">
       <slot name="listBar" />
 
-      <div class="grow overflow-y-auto">
+      <div class="grow overflow-y-auto scrollbar-hide">
         <slot name="listCards" />
       </div>
     </div>

src/components/request-approve/LabelDropdown.vue

@@ -16,7 +16,7 @@
       </div>
       <div
         v-if="dropdownOpen"
-        class="absolute w-full h-40 overflow-y-auto top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2">
+        class="absolute w-full h-40 overflow-y-auto scrollbar-hide top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2">
         <div
           v-for="option in labelArr"
           :key="option.labelId"

src/components/request-task/CategoryDropDown.vue

@@ -29,7 +29,7 @@
       </div>
       <div
         v-if="dropdownOpen"
-        class="absolute w-full max-h-40 overflow-y-auto top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2">
+        class="absolute w-full max-h-40 overflow-y-auto scrollbar-hide top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2">
         <div
           v-for="option in options"
           :key="'subCategoryId' in option ? option.subCategoryId : option.mainCategoryId"

src/components/request-task/RequestTaskDropdown.vue

@@ -21,7 +21,7 @@
       </div>
       <div
         v-if="dropdownOpen"
-        class="absolute w-full h-40 overflow-y-auto top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2">
+        class="absolute w-full h-40 overflow-y-auto scrollbar-hide top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2">
         <div
           v-for="option in options"
           :key="option"

src/components/request-task/RequestTaskFileInputAfter.vue

@@ -12,7 +12,7 @@
       </div>
       <div
         v-if="files && files.length > 0"
-        class="flex flex-col h-[102px] overflow-hidden overflow-y-auto">
+        class="flex flex-col h-[102px] overflow-hidden overflow-y-auto scrollbar-hide">
         <div
           v-for="(file, index) in files"
           :key="file.name"

src/components/task-management/CategoryManagement.vue

@@ -12,7 +12,7 @@
         <p>2차 카테고리</p>
       </div>
     </div>
-    <div class="flex flex-col w-full grow overflow-y-auto">
+    <div class="flex flex-col w-full grow overflow-y-auto scrollbar-hide">
       <div class="flex">
         <CategoryLine :categories="data || []" />
         <div class="bg-border-1 w-0.5"></div>

src/components/task-management/LabelManagement.vue

@@ -7,7 +7,7 @@
         <p>구분명</p>
       </div>
     </div>
-    <div class="flex flex-col w-full grow overflow-y-auto pb-32">
+    <div class="flex flex-col w-full grow overflow-y-auto scrollbar-hide pb-32">
       <LabelManagementLine
         :label-data="labelData"
         @updateLabels="fetchLabels" />

src/components/team-board/CurrentTaskRatio.vue

@@ -14,8 +14,7 @@
         </div>
         <span class="text-xs font-semibold text-primary1">총 {{ teamSummary.totalTasks }}건</span>
       </div>
-      <div
-        class="w-full h-[360px] rounded-lg bg-primary2 shadow-custom overflow-y-scroll items-center p-6 gap-4">
+      <div class="w-full h-[360px] rounded-lg bg-primary2 shadow-custom items-center p-6 gap-4">
         <PieChart
           :key="chartLabels.length || 0"
           :labels="chartLabels"

src/components/team-board/TeamBoard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="grow overflow-y-scroll p-6">
+  <div class="grow overflow-y-auto scrollbar-hide p-6">
     <div class="grid grid-cols-3 gap-12">
       <CurrentTaskRatio
         :team-summary="teamSummary"