Browse Source

모바일 반도산전은

home 5 months ago
parent
commit
60fbfcd9d2
1 changed files with 16 additions and 5 deletions
  1. 16 5
      src/components/main/Business.tsx

+ 16 - 5
src/components/main/Business.tsx

@@ -57,22 +57,33 @@ const RankSection = ({title, rank, topPercent, visible, colorPrimary, colorSecon
           <div className="text-center text-black/40 text-xs sm:text-lg lg:text-2xl font-semibold font-['Noto_Sans_KR'] mb-3 sm:mb-6 lg:mb-10 antialiased">
             {title}
           </div>
+
+          {/* 지역 */}
           <div className="flex w-full justify-center items-center mb-2 sm:mb-4">
-            <div className="text-black/40 text-sm sm:text-lg lg:text-3xl font-semibold font-['Noto_Sans_KR'] mr-4 sm:mr-6 antialiased">
+            <div
+              className="text-black/40 text-sm sm:text-lg lg:text-3xl font-semibold font-['Noto_Sans_KR'] antialiased
+          break-all text-center leading-tight w-4 sm:w-auto mr-2 sm:mr-6"
+            >
               지역
             </div>
-            <div className="flex text-blue-900 text-xl sm:text-3xl lg:text-6xl font-bold font-['Noto_Sans_KR'] antialiased" style={{opacity: animatedRank.opacity}}>
+
+            <div
+              className="flex text-blue-900 text-xl sm:text-3xl lg:text-6xl font-bold font-['Noto_Sans_KR'] antialiased"
+              style={{ opacity: animatedRank.opacity }}
+            >
               {animatedRank.count}
               <span className="text-lg sm:text-xl lg:text-3xl ml-1">위</span>
             </div>
           </div>
-          <div className="flex w-full justify-center items-center">
-            <div className="text-black/40 text-sm sm:text-lg lg:text-3xl font-semibold font-['Noto_Sans_KR'] mr-4 sm:mr-6 antialiased">
+
+          {/* 상위 */}
+          <div className="flex w-full justify-between items-center">
+            <div className="text-black/40 text-sm sm:text-lg lg:text-3xl font-semibold font-['Noto_Sans_KR'] antialiased break-all text-center leading-tight w-4 sm:w-auto mr-2 sm:mr-6">
               상위
             </div>
             <div
               className="text-blue-900 text-xl sm:text-3xl lg:text-6xl font-bold font-['Noto_Sans_KR'] antialiased"
-              style={{opacity: animatedPercent.opacity}}
+              style={{ opacity: animatedPercent.opacity }}
             >
               {animatedPercent.count}
               <span className="text-lg sm:text-xl lg:text-3xl ml-1">%</span>