feat: fix design qa 2 (#144)

* fix remove loading text in loading overlay

* feat: change deck card detail to carousel

packages/service-frontend/app/deck/[id]/DeckDetail.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useRef, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 
 import { useQuery } from '@tanstack/react-query'
 import { AnimatePresence, motion, useInView } from 'framer-motion'
@@ -75,6 +75,14 @@ export default function DeckDetail({ params }: Props): JSX.Element {
     redirect('/404')
   }
 
+  const previewDeckList = useMemo(() => {
+    if (cardListData?.result) {
+      return cardListData.result.slice(0, 3)
+    }
+
+    return []
+  }, [cardListData?.result])
+
   return (
     <div className="bg-light">
       {data?.result && cardListData?.result && (
@@ -156,8 +164,8 @@ export default function DeckDetail({ params }: Props): JSX.Element {
             {/* --- Deck Detail Card Section --- */}
             <div className="pb-[40px]">
               {/* Deck Card List */}
-              <div className="flex gap-x-[8px] px-[24px] -mt-[26px] overflow-x-hidden snap-x pb-[24px]">
-                {cardListData.result.map(card => {
+              <div className="flex gap-x-[8px] px-[24px] -mt-[26px] overflow-x-auto pb-[24px] scrollbar-hide">
+                {previewDeckList.map(card => {
                   return (
                     <div
                       key={card.id}

packages/service-frontend/app/loading.tsx

@@ -9,8 +9,7 @@ import loginLottie from '@/public/lottie/loginLottie.json'
 export default function Loading(): JSX.Element {
   return (
     <ContentWrapper>
-      <div className='min-h-screen px-[16px] flex flex-col gap-[20px] justify-center items-center'>
-        Loading...
+      <div className="min-h-screen px-[16px] flex flex-col gap-[20px] justify-center items-center">
         <Lottie animationData={loginLottie} />
       </div>
     </ContentWrapper>