🐛 Fix: 디자인 수정 및 랭킹 index 로 변경

src/components/Carousel/styles.module.scss

@@ -1,3 +1,5 @@
+@import '../../styles/';
+
 .arrow {
   display: flex;
   align-items: center;
@@ -8,11 +10,23 @@
   margin-inline: 15px;
   border-radius: 6.67px;
 
-  background-color: #1b1b1b;
+  background: linear-gradient(
+    90deg,
+    $color-brand-orange 0%,
+    $color-brand-pink 100%
+  );
   opacity: 0.8;
   transition: opacity 0.5s ease;
 
   cursor: pointer;
+
+  &:hover {
+    background: linear-gradient(
+      90deg,
+      $color-brand-pink 0%,
+      $color-brand-orange 100%
+    );
+  }
 }
 
 .longArrow {

src/pages/ListPage/Credit/styles.module.scss

@@ -66,6 +66,12 @@ $color-credit-border: #f1eef9;
   }
 }
 
+@media (max-width: 550px) {
+  .container {
+    padding-inline: 40px;
+  }
+}
+
 @media (max-width: $width-mobile) {
   .container {
     height: 87px;

src/pages/ListPage/MonthlyChart/components/ChartElement/index.jsx

@@ -10,8 +10,8 @@ import { motion } from 'framer-motion';
  * @param {object} idol 아이돌 객체
  * @param {number} ranking 아이돌 순위
  */
-const ChartElement = ({ idol }) => {
-  const { name, profilePicture, rank } = idol;
+const ChartElement = ({ idol, ranking }) => {
+  const { name, profilePicture } = idol;
   const totalVotes = numberWithCommas(idol.totalVotes);
 
   return (
@@ -26,7 +26,7 @@ const ChartElement = ({ idol }) => {
         <div className={styles.img}>
           <Profile size="sm" imageUrl={profilePicture} />
         </div>
-        <span className={styles.ranking}>{rank}</span>
+        <span className={styles.ranking}>{ranking}</span>
         <div className={styles.name}>{name}</div>
       </div>
       <div className={styles.totalVotes}>{totalVotes}</div>

src/pages/ListPage/MonthlyChart/components/ChartModal/index.jsx

@@ -76,7 +76,7 @@ const ChartModal = ({ isOpen, closeModal, idolList, currentTab }) => {
                       clicked={selectedIdol === idol}
                     />
                     <div className={style.text}>
-                      <span>{idol.rank}</span>
+                      <span>{index + 1}</span>
                       <div className={style.name}>
                         <span>
                           {idol.group} {idol.name}
@@ -112,4 +112,4 @@ const ChartModal = ({ isOpen, closeModal, idolList, currentTab }) => {
   );
 };
 
-export default ChartModal;
+export default ChartModal;

src/pages/ListPage/MonthlyChart/components/ChartModal/styles.module.scss

@@ -9,7 +9,7 @@
 
 .expand {
   width: 94vw;
-  height: 92vh;
+  height: 92svh;
 }
 
 .chart {
@@ -98,4 +98,4 @@
   > span {
     color: $color-brand-orange;
   }
-}
+}

src/pages/ListPage/MonthlyChart/components/IdolChart/index.jsx

@@ -24,8 +24,8 @@ const IdolChart = ({ isLoading, loadingError, idolList }) => {
   } else {
     return (
       <ul className={chartClass}>
-        {idolList.map((idol) => {
-          return <ChartElement key={idol.id} idol={idol} />;
+        {idolList.map((idol, index) => {
+          return <ChartElement key={idol.id} idol={idol} ranking={index + 1} />;
         })}
       </ul>
     );

src/styles/font.scss

@@ -1,6 +1,6 @@
 @import url('https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css');
 
-$font-family: 'Pretendard' !important;
+$font-family: 'Pretendard', sans-serif !important;
 $font-style: normal !important;
 
 @mixin font-default {