fix rank scroll ui

zzzi-ori · Mar 30, 2024 · 9f8670c · 9f8670c
1 parent d0c0cfe
commit 9f8670c
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 20 deletions.
diff --git a/src/pages/rank/RankPage.vue b/src/pages/rank/RankPage.vue
@@ -1,31 +1,36 @@
 <template>
-  <ZHeader class="w-full">
-    <template v-slot:left>
-      <BackButton @click="goBack"/>
-    </template>
-    <img :src="rank" alt="명예의 찌오당"/>
-  </ZHeader>
-  <div v-if="list?.length === 0" class="w-full h-full flex flex-col items-center justify-center text-dark-green">
-    <img :src="error" alt="error"/>
-    <span class="text-body-b mb-1 mt-4">앗! 아직 참여한 사람이 없찌오</span>
-    <span class="text-caption-r">지금 플레이해서 1등을 차지하세요!</span>
-  </div>
-  <div v-else class="h-full overflow-y-scroll flex flex-col items-center">
-    <span class="text-body-b mt-6 mb-4 text-dark-green">
+  <div class="fixed w-full flex flex-col items-center bg-light-green z-10">
+    <ZHeader class="w-full">
+      <template v-slot:left>
+        <BackButton @click="goBack"/>
+      </template>
+      <img :src="rank" alt="명예의 찌오당"/>
+    </ZHeader>
+    <span v-if="totalCountRef" class="text-body-b mt-6 mb-4 text-dark-green">
       {{ totalCountRef }}명의 찌오가 함께했찌오
     </span>
-    <div ref="container" @scroll="onScroll" class="w-full pt-2 overflow-y-scroll px-6">
+  </div>
+  <div ref="container" @scroll="onScroll" class="h-full pt-32 overflow-y-scroll hide-scroll">
+    <div v-if="list?.length === 0" class="w-full h-full flex flex-col items-center justify-center text-dark-green">
+      <img :src="error" alt="error"/>
+      <span class="text-body-b mb-1 mt-4">앗! 아직 참여한 사람이 없찌오</span>
+      <span class="text-caption-r">지금 플레이해서 1등을 차지하세요!</span>
+    </div>
+    <div v-else class="w-full pt-2  px-6">
       <div class="flex flex-col items-center mb-6">
         <ZLabel v-if="winner" :text="winner"/>
         <img :src="medalZzio" class="mt-2" alt="찌오"/>
       </div>
       <RankList :list="list"/>
+      <div class="flex items-center justify-center h-8">
+        <ZLoading v-if="isFetching"/>
+      </div>
       <Footer/>
     </div>
+    <ZRoundButton v-if="showUpButton" class="absolute right-6 bottom-6" @click="scrollUp">
+      <img :src="back" alt="위로가기" class="rotate-90"/>
+    </ZRoundButton>
   </div>
-  <ZRoundButton v-if="showUpButton" class="absolute right-6 bottom-6" @click="scrollUp">
-    <img :src="back" alt="위로가기" class="rotate-90"/>
-  </ZRoundButton>
 </template>
 <script setup lang="ts">
 import rank from '../../assets/rank.svg'
@@ -41,9 +46,10 @@ import {computed, ref} from 'vue'
 import ZRoundButton from '../../components/button/ZRoundButton.vue'
 import back from '../../assets/back.svg'
 import error from '../../assets/error.svg'
+import ZLoading from '../../components/ZLoading.vue'
 
 const router = useRouter()
-const {data, fetchNextPage} = useGetInfiniteRank()
+const {data, fetchNextPage, isFetching} = useGetInfiniteRank()
 const container = ref<HTMLElement | null>(null)
 
 const list = computed(() => {
@@ -94,3 +100,14 @@ const scrollUp = () => {
   container.value.scrollTo({top: 0, behavior: 'smooth'})
 }
 </script>
+<style setup>
+.hide-scroll {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.hide-scroll::-webkit-scrollbar { /* WebKit */
+  width: 0;
+  height: 0;
+}
+</style>
diff --git a/src/pages/rank/_components/Rank.vue b/src/pages/rank/_components/Rank.vue
@@ -45,7 +45,7 @@ const style = cva(
     variants: {
       type: {
         'highlight': 'rounded-lg bg-white mt-1 border-2 pl-2 pr-4',
-        'normal': 'border-b-solid border-b-2 border-b-dark-green px-4'
+        'normal': 'border-b-solid border-b-2 last:border-b-0 border-b-dark-green px-4'
       }
     },
   })

diff --git a/src/pages/rank/_components/RankList.vue b/src/pages/rank/_components/RankList.vue
@@ -1,5 +1,7 @@
 <template>
-  <Rank v-for="item in list" :item="item" v-bind:key="item?.rank"/>
+  <div>
+    <Rank v-for="item in list" :item="item" v-bind:key="item?.rank"/>
+  </div>
 </template>
 <script setup lang="ts">