✨Feat: 이달의 컴포넌트 UI 구현

src/assets/icons/Chart.jsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+const Chart = ({ width = 24, height = 25, stroke = 'white', ...props }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 24 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M8 10.5L8 16.5"
+      stroke={stroke}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 12.5V16.5"
+      stroke={stroke}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16 8.5V16.5"
+      stroke={stroke}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <rect
+      x={3}
+      y={4.5}
+      width={18}
+      height={16}
+      rx={2}
+      stroke={stroke}
+      strokeWidth={2}
+    />
+  </svg>
+);
+export default Chart;

src/hooks/useSetNumberOfItemsToShow.js

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+import { TABLET_WIDTH, MOBILE_WIDTH } from '@/constants/screenSizes';
+
+export default function useSetNumOfItemsToShow({ desktop, tablet, mobile }) {
+  const numberOfItems = [desktop, tablet, mobile];
+  const [numOfItemsToShow, setsNumOfItemsToShow] = useState(numberOfItems[0]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth > TABLET_WIDTH) {
+        setsNumOfItemsToShow(numberOfItems[0]);
+      } else if (window.innerWidth > MOBILE_WIDTH) {
+        setsNumOfItemsToShow(numberOfItems[1]);
+      } else {
+        setsNumOfItemsToShow(numberOfItems[2]);
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return numOfItemsToShow;
+}

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

@@ -12,7 +12,7 @@ $color-credit-border: #f1eef9;
 
   height: 131px;
   max-width: 1200px;
-  margin: 0 auto 48px;
+  margin: 0 auto 50px;
   padding-inline: 64px;
 }
 
@@ -60,11 +60,17 @@ $color-credit-border: #f1eef9;
   }
 }
 
+@media (max-width: $width-tablet) {
+  .container {
+    margin: 0 auto 64px;
+  }
+}
+
 @media (max-width: $width-mobile) {
   .container {
     height: 87px;
     padding-inline: 20px;
-    margin-top: 8px;
+    margin: 16px auto 40px;
   }
 
   .credit {

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './styles.module.scss';
+import { numberWithCommas } from '@/utils/numberWithCommas';
+import Profile from '@/components/Profile';
+
+/**
+ * 
+ * @param {object} idol 아이돌 객체
+ * @param {number} ranking 아이돌 순위
+ */
+
+const ChartElement = ({ idol, ranking }) => {
+  const { name, profilePicture } = idol;
+  const totalVotes = numberWithCommas(idol.totalVotes);
+
+  return (
+    <li className={styles.container}>
+      <div className={styles.idolInfo}>
+        <div className={styles.img}>
+          <Profile size="sm" imageUrl={profilePicture} />
+        </div>
+        <span className={styles.ranking}>{ranking}</span>
+        <div className={styles.name}>{name}</div>
+      </div>
+      <div className={styles.totalVotes}>{totalVotes}</div>
+    </li>
+  );
+};
+ChartElement.propTypes = {
+  idol: PropTypes.object,
+  ranking: PropTypes.number,
+};
+export default ChartElement;

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

@@ -0,0 +1,59 @@
+@import '../../../../../styles/';
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  /* 태블릿 */
+  @media (min-width: ($width-mobile + 1)) and (max-width: $width-tablet) {
+    width: 100%;
+  }
+  /* 모바일 */
+  @media (max-width: $width-mobile) {
+    width: 100%;
+  }
+}
+
+.idolInfo {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.img {
+  width: 70px;
+  height: 70px;
+}
+
+.ranking {
+  @include font-weight-size(400, 16px);
+  line-height: 19px;
+  color: $color-brand-orange;
+}
+
+.name {
+  @include font-weight-size(500, 16px);
+  line-height: 19px;
+  color: #ffffffde;
+  /* 태블릿 */
+  @media (min-width: ($width-mobile + 1)) and (max-width: $width-tablet) {
+    @include font-weight-size(500, 14px);
+  }
+  /* 모바일 */
+  @media (max-width: $width-mobile) {
+    @include font-weight-size(500, 14px);
+  }
+}
+
+.totalVotes {
+  @include font-weight-size(400, 16px);
+  line-height: 19px;
+  color: #ffffff99;
+  @media (min-width: ($width-mobile + 1)) and (max-width: $width-tablet) {
+    @include font-weight-size(400, 14px);
+  }
+  /* 모바일 */
+  @media (max-width: $width-mobile) {
+    @include font-weight-size(400, 14px);
+  }
+}

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './styles.module.scss';
+
+/**
+ *
+ * @param {string} currentTab 'girl' or 'boy'
+ * @param {func}} handleTabChange 탭 바꿈 이벤트 핸들러
+ */
+
+const Tab = ({ currentTab, handleTabChange }) => {
+  const selectGirlTab = () => {
+    handleTabChange('girl');
+  };
+  const selectBoyTab = () => {
+    handleTabChange('boy');
+  };
+
+  return (
+    <div className={styles.tab}>
+      <div
+        role="button"
+        tabIndex="0"
+        className={classNames(styles.tab, {
+          [styles.current]: currentTab === 'girl',
+        })}
+        onClick={selectGirlTab}
+        onKeyDown={null}
+      >
+        이달의 여자 아이돌
+      </div>
+      <div
+        role="button"
+        tabIndex="-1"
+        className={classNames(styles.tab, {
+          [styles.current]: currentTab === 'boy',
+        })}
+        onClick={selectBoyTab}
+        onKeyDown={null}
+      >
+        이달의 남자 아이돌
+      </div>
+    </div>
+  );
+};
+
+Tab.propTypes = {
+  currentTab: PropTypes.string,
+  handleTabChange: PropTypes.func,
+};
+
+export default Tab;

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

@@ -0,0 +1,26 @@
+@import '../../../../../styles/';
+
+.tab {
+  display: flex;
+  height: 42px;
+
+  div {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: -0.17px;
+    color: $color-gray-warm;
+
+    &.current {
+      background-color: #ffffff1a;
+      color: white;
+      border-bottom: 1px solid #ffffff;
+    }
+  }
+}

src/pages/ListPage/MonthlyChart/index.jsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import styles from './styles.module.scss';
+import ChartElement from './components/ChartElement';
+import Tab from './components/Tab';
+import CustomButton from '@/components/CustomButton';
+import Chart from '@/assets/icons/Chart';
+import { boys, girls } from './mock';
+import useSetNumOfItemsToShow from '@/hooks/useSetNumberOfItemsToShow';
+
+const MonthlyChart = () => {
+  const [idolList, setIdolList] = useState([]);
+  const [currentTab, setCurrentTab] = useState('girl');
+  const chartClass = classNames(styles.chart, {
+    [styles.even]: idolList.length % 2 === 0,
+  });
+  const numOfItemsToShow = useSetNumOfItemsToShow({
+    desktop: 10,
+    tablet: 5,
+    mobile: 5,
+  });
+
+  //데이터 가져오기
+  const handleLoad = () => {
+    if (currentTab === 'girl') {
+      setIdolList(girls.slice(0, numOfItemsToShow));
+    }
+    if (currentTab === 'boy') {
+      setIdolList(boys.slice(0, numOfItemsToShow));
+    }
+  };
+
+  // 탭 선택 핸들러
+  const handleTabChange = (tab) => {
+    setCurrentTab(tab);
+  };
+
+  //더보기 버튼
+  const handleMoreBtn = () => {
+    const newArr = [
+      ...idolList,
+      {
+        id: idolList.length,
+        name: '추가 버튼 눌렀구나',
+        totalVotes: 1000,
+        profilePicture:
+        'https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/Fandom-K/idol/1714613892649/ive1.jpeg',
+      },
+    ];
+    setIdolList(newArr);
+  };
+
+  useEffect(() => {
+    handleLoad();
+  }, [currentTab, numOfItemsToShow]);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <h2>이달의 차트</h2>
+        <CustomButton btnText="차트 투표하기" textSize={13} maxHeight={32}>
+          <Chart />
+        </CustomButton>
+      </div>
+      <Tab currentTab={currentTab} handleTabChange={handleTabChange} />
+      <ul className={chartClass}>
+        {idolList.map((idol, index) => {
+          return <ChartElement key={idol.id} idol={idol} ranking={index + 1} />;
+        })}
+      </ul>
+      <div className={styles.moreButton}>
+        <CustomButton btnText="더보기" onClick={handleMoreBtn} />
+      </div>
+    </div>
+  );
+};
+
+export default MonthlyChart;