fix #2

Author: JellyBrick

app/routes/rank/24hours.tsx

@@ -62,15 +62,17 @@ const TwentyFourHoursRank = () => {
     />
   );
 
+  const getButtons = () => {
+    if (ranks.ranking.length <= 50) {
+      return [button1to50];
+    } else {
+      return [button1to50, button51to100];
+    }
+  };
+
   return (
     <>
-      <SmallHeader ref={headerRef} title='24시간 차트' buttons={(() => {
-        if (ranks.ranking.length <= 50) {
-          return [button1to50];
-        } else {
-          return [button1to50, button51to100];
-        }
-      })()} />
+      <SmallHeader ref={headerRef} title='24시간 차트' buttons={getButtons()} />
       <motion.div
         initial={{ opacity: 0, y: 10 }}
         animate={{ opacity: 1, y: 0 }}
@@ -80,8 +82,7 @@ const TwentyFourHoursRank = () => {
         <RankHeader title='24시간 차트' updateDate={dayjs(ranks.timestamp * 1000)} />
 
         <div ref={buttonsRef} className='mt-5 flex gap-3'>
-          {button1to50}
-          {button51to100}
+          {getButtons()}
         </div>
 
         <ul className='mt-5 space-y-3'>

app/routes/rank/all-time.tsx

@@ -62,15 +62,17 @@ const AllTimeRank = () => {
     />
   );
 
+  const getButtons = () => {
+    if (ranks.ranking.length <= 50) {
+      return [button1to50];
+    } else {
+      return [button1to50, button51to100];
+    }
+  };
+
   return (
     <>
-      <SmallHeader ref={headerRef} title='누적 차트' buttons={(() => {
-        if (ranks.ranking.length <= 50) {
-          return [button1to50];
-        } else {
-          return [button1to50, button51to100];
-        }
-      })()} />
+      <SmallHeader ref={headerRef} title='누적 차트' buttons={getButtons()} />
       <motion.div
         initial={{ opacity: 0, y: 10 }}
         animate={{ opacity: 1, y: 0 }}
@@ -80,8 +82,7 @@ const AllTimeRank = () => {
         <RankHeader title='누적 차트' updateDate={dayjs(ranks.timestamp * 1000)} />
 
         <div ref={buttonsRef} className='mt-5 flex gap-3'>
-          {button1to50}
-          {button51to100}
+          {getButtons()}
         </div>
 
         <ul className='mt-5 space-y-3'>

app/routes/rank/daily.tsx

@@ -62,15 +62,17 @@ const DailyRank = () => {
     />
   );
 
+  const getButtons = () => {
+    if (ranks.ranking.length <= 50) {
+      return [button1to50];
+    } else {
+      return [button1to50, button51to100];
+    }
+  };
+
   return (
     <>
-      <SmallHeader ref={headerRef} title='일간 차트' buttons={(() => {
-        if (ranks.ranking.length <= 50) {
-          return [button1to50];
-        } else {
-          return [button1to50, button51to100];
-        }
-      })()} />
+      <SmallHeader ref={headerRef} title='일간 차트' buttons={getButtons()} />
       <motion.div
         initial={{ opacity: 0, y: 10 }}
         animate={{ opacity: 1, y: 0 }}
@@ -80,8 +82,7 @@ const DailyRank = () => {
       <RankHeader title='일간 차트' updateDate={dayjs(ranks.timestamp * 1000)} />
 
         <div ref={buttonsRef} className='mt-5 flex gap-3'>
-          {button1to50}
-          {button51to100}
+          {getButtons()}
         </div>
 
         <ul className='mt-5 space-y-3'>

app/routes/rank/hourly.tsx

@@ -62,15 +62,17 @@ const HourlyRank = () => {
     />
   );
 
+  const getButtons = () => {
+    if (ranks.ranking.length <= 50) {
+      return [button1to50];
+    } else {
+      return [button1to50, button51to100];
+    }
+  };
+
   return (
     <>
-      <SmallHeader ref={headerRef} title='매시간 차트' buttons={(() => {
-        if (ranks.ranking.length <= 50) {
-          return [button1to50];
-        } else {
-          return [button1to50, button51to100];
-        }
-      })()} />
+      <SmallHeader ref={headerRef} title='매시간 차트' buttons={getButtons()} />
       <motion.div
         initial={{ opacity: 0, y: 10 }}
         animate={{ opacity: 1, y: 0 }}

app/routes/rank/monthly.tsx

@@ -62,15 +62,17 @@ const MonthlyRank = () => {
     />
   );
 
+  const getButtons = () => {
+    if (ranks.ranking.length <= 50) {
+      return [button1to50];
+    } else {
+      return [button1to50, button51to100];
+    }
+  };
+
   return (
     <>
-      <SmallHeader ref={headerRef} title='월간 차트' buttons={(() => {
-        if (ranks.ranking.length <= 50) {
-          return [button1to50];
-        } else {
-          return [button1to50, button51to100];
-        }
-      })()} />
+      <SmallHeader ref={headerRef} title='월간 차트' buttons={getButtons()} />
       <motion.div
         initial={{ opacity: 0, y: 10 }}
         animate={{ opacity: 1, y: 0 }}
@@ -80,8 +82,7 @@ const MonthlyRank = () => {
         <RankHeader title='월간 차트' updateDate={dayjs(ranks.timestamp * 1000)} />
 
         <div ref={buttonsRef} className='mt-5 flex gap-3'>
-          {button1to50}
-          {button51to100}
+          {getButtons()}
         </div>
 
         <ul className='mt-5 space-y-3'>

app/routes/rank/new.tsx

@@ -56,15 +56,17 @@ const NewestRank = () => {
     />
   );
 
+  const getButtons = () => {
+    if (ranks.ranking.length <= 50) {
+      return [button1to50];
+    } else {
+      return [button1to50, button51to100];
+    }
+  };
+
   return (
     <>
-      <SmallHeader ref={headerRef} title='신곡 차트' buttons={(() => {
-        if (ranks.ranking.length <= 50) {
-          return [button1to50];
-        } else {
-          return [button1to50, button51to100];
-        }
-      })()} />
+      <SmallHeader ref={headerRef} title='신곡 차트' buttons={getButtons()} />
       <motion.div
         initial={{ opacity: 0, y: 10 }}
         animate={{ opacity: 1, y: 0 }}
@@ -74,8 +76,7 @@ const NewestRank = () => {
         <RankHeader title='신곡 차트' updateDate={dayjs(ranks.timestamp * 1000)} />
 
         <div ref={buttonsRef} className='mt-5 flex gap-3'>
-          {button1to50}
-          {button51to100}
+          {getButtons()}
         </div>
 
         <ul className='mt-5 space-y-3'>

app/routes/rank/weekly.tsx

@@ -62,15 +62,17 @@ const WeeklyRank = () => {
     />
   );
 
+  const getButtons = () => {
+    if (ranks.ranking.length <= 50) {
+      return [button1to50];
+    } else {
+      return [button1to50, button51to100];
+    }
+  };
+
   return (
     <>
-      <SmallHeader ref={headerRef} title='주간 차트' buttons={(() => {
-        if (ranks.ranking.length <= 50) {
-          return [button1to50];
-        } else {
-          return [button1to50, button51to100];
-        }
-      })()} />
+      <SmallHeader ref={headerRef} title='주간 차트' buttons={getButtons()} />
       <motion.div
         initial={{ opacity: 0, y: 10 }}
         animate={{ opacity: 1, y: 0 }}
@@ -80,8 +82,7 @@ const WeeklyRank = () => {
         <RankHeader title='주간 차트' updateDate={dayjs(ranks.timestamp * 1000)} />
 
         <div ref={buttonsRef} className='mt-5 flex gap-3'>
-          {button1to50}
-          {button51to100}
+          {getButtons()}
         </div>
 
         <span className='h-px w-full bg-neutral-600' aria-hidden='true' />

app/routes/rank/yearly.tsx

@@ -62,15 +62,17 @@ const YearlyRank = () => {
     />
   );
 
+  const getButtons = () => {
+    if (ranks.ranking.length <= 50) {
+      return [button1to50];
+    } else {
+      return [button1to50, button51to100];
+    }
+  };
+
   return (
     <>
-      <SmallHeader ref={headerRef} title='연간 차트' buttons={(() => {
-        if (ranks.ranking.length <= 50) {
-          return [button1to50];
-        } else {
-          return [button1to50, button51to100];
-        }
-      })()} />
+      <SmallHeader ref={headerRef} title='연간 차트' buttons={getButtons()} />
       <motion.div
         initial={{ opacity: 0, y: 10 }}
         animate={{ opacity: 1, y: 0 }}
@@ -80,8 +82,7 @@ const YearlyRank = () => {
         <RankHeader title='연간 차트' updateDate={dayjs(ranks.timestamp * 1000)} isYearly={true} />
 
         <div ref={buttonsRef} className='mt-5 flex gap-3'>
-          {button1to50}
-          {button51to100}
+          {getButtons()}
         </div>
 
         <span className='h-px w-full bg-neutral-600' aria-hidden='true' />