<commit_before>import React from "react";
import styled from "styled-components";

interface IRectangleNavigation {
  count: number;
  index: number;
}

const RectangleNavigation: React.FC<IRectangleNavigation> = ({ count, index }) => {
  const [currentIndex, setCurrentIndex] = React.useState(0);

  const indexArray = [...Array(count).keys()];

  React.useEffect(() => {
    setCurrentIndex(index);
  }, [index]);

  return (
    <RectangleNavigationWrapper>
      {indexArray.map((index) => (
        <li key={index}>
          <RectangleButton
            aria-label="rectangle"
            selected={index === currentIndex}
          ></RectangleButton>
        </li>
      ))}
    </RectangleNavigationWrapper>
  );
};

const RectangleNavigationWrapper = styled.ul`
  width: min-content;
  height: 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4rem;
  & > *:not(:last-child) {
    margin-right: 0.4rem;
  }
`;

const RectangleButton = styled.div<{ selected?: boolean }>`
  width: 3rem;
  height: 0.2rem;
  background-color: ${({ selected, theme: { color } }) =>
    selected ? color.black : color.greyScale.grey3};
`;

export default RectangleNavigation;<commit_msg>:lipstick: 컴포넌트 종료 선언방법 변경<commit_after>import React from "react";
import styled from "styled-components";

interface IRectangleNavigation {
  count: number;
  index: number;
}

const RectangleNavigation: React.FC<IRectangleNavigation> = ({ count, index }) => {
  const [currentIndex, setCurrentIndex] = React.useState(0);

  const indexArray = [...Array(count).keys()];

  React.useEffect(() => {
    setCurrentIndex(index);
  }, [index]);

  return (
    <RectangleNavigationWrapper>
      {indexArray.map((index) => (
        <li key={index}>
          <Rectangle aria-label="rectangle" selected={index === currentIndex} />
        </li>
      ))}
    </RectangleNavigationWrapper>
  );
};

const RectangleNavigationWrapper = styled.ul`
  width: min-content;
  height: 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4rem;
  & > *:not(:last-child) {
    margin-right: 0.4rem;
  }
`;

const Rectangle = styled.div<{ selected?: boolean }>`
  width: 3rem;
  height: 0.2rem;
  background-color: ${({ selected, theme: { color } }) =>
    selected ? color.black : color.greyScale.grey3};
`;

export default RectangleNavigation;
{'fraction_non_alphanumeric': 0.15333333333333332, 'fraction_numerical': 0.008333333333333333, 'mean_word_length': 3.5387523629489603, 'pattern_counts': {'":': 0, '<': 18, '<?xml version=': 0, '>': 28, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6717952', 'n_tokens_mistral': 795, 'n_tokens_neox': 790, 'n_words': 158}