<commit_before>import React from "react";
import styled from "styled-components";
import { graphql, useStaticQuery } from "gatsby";
// Typography
import { LBody, MBody, MDisplay, SDisplay } from "typography";
// Components
import { TabNavigationBar } from "components";
import { Curriculum } from "./Curriculum";
// Assets
import images from "assets/images";
import { SUBTITLE, TITLE } from "assets/static/phrases";

const frontMatterReduce = (data: any) => {
  const { allMdx } = data;
  const { edges } = allMdx;
  return edges.map((v: any) => v.node.frontmatter);
};

const DetailCurriculum: React.FC = ({}) => {
  const data = useStaticQuery(CurriculumQuery);
  const curriculumInfo = frontMatterReduce(data);
  const titles = curriculumInfo.map((v: any) => v.tabName);

  const [curriculumIndex, setCurriculumIndex] = React.useState(0);

  return (
    <DetailCurriculumWrapper>
      <CurriculumTitleWrapper>
        <LBody bold>{SUBTITLE.MASTERS_COURSE}</LBody>
        <CurriculumHeadTitle>
          <SDisplay>{TITLE.DETAIL_CURRICULUM}</SDisplay>
        </CurriculumHeadTitle>
        <TabNavigationBar {...{ titles }} onIndexChanged={setCurriculumIndex} />
      </CurriculumTitleWrapper>
      <CurriculumWrapper>
        <Curriculum {...{ curriculumInfo: curriculumInfo[curriculumIndex] }} />
      </CurriculumWrapper>
    </DetailCurriculumWrapper>
  );
};

const DetailCurriculumWrapper = styled.div`
  margin-top: 16rem;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 144rem;
  flex-direction: column;
`;
const CurriculumTitleWrapper = styled.div`
  width: 107rem;
  display: flex;
  flex-direction: column;
`;

const CurriculumHeadTitle = styled.div`
  margin-top: 0.8rem;
  margin-bottom: 5.2rem;
`;

const CurriculumWrapper = styled.div`
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 144rem;
  background-color: ${({ theme: { color } }) => color.greyScale.offWhite};
`;

const CurriculumQuery = graphql`
  query CurriculumQuery {
    allMdx(filter: { frontmatter: { templateKey: { glob: "masters_curriculum*" } } }) {
      edges {
        node {
          frontmatter {
            tabName
            curriculum {
              index
              subject
              subjectList {
                detail
                name
              }
            }
            masterInfo {
              avatar
              introduce
              name
              nutshell
              position
            }
          }
        }
      }
    }
  }
`;

export default DetailCurriculum;
<commit_msg>:recycle: 사용하지 않는 import파일 제거<commit_after>import React from "react";
import styled from "styled-components";
import { graphql, useStaticQuery } from "gatsby";
// Typography
import { LBody, SDisplay } from "typography";
// Components
import { TabNavigationBar } from "components";
import { Curriculum } from "./Curriculum";
// Assets
import { SUBTITLE, TITLE } from "assets/static/phrases";

const frontMatterReduce = (data: any) => {
  const { allMdx } = data;
  const { edges } = allMdx;
  return edges.map((v: any) => v.node.frontmatter);
};

const DetailCurriculum: React.FC = ({}) => {
  const data = useStaticQuery(CurriculumQuery);
  const curriculumInfo = frontMatterReduce(data);
  const titles = curriculumInfo.map((v: any) => v.tabName);

  const [curriculumIndex, setCurriculumIndex] = React.useState(0);

  return (
    <DetailCurriculumWrapper>
      <CurriculumTitleWrapper>
        <LBody bold>{SUBTITLE.MASTERS_COURSE}</LBody>
        <CurriculumHeadTitle>
          <SDisplay>{TITLE.DETAIL_CURRICULUM}</SDisplay>
        </CurriculumHeadTitle>
        <TabNavigationBar {...{ titles }} onIndexChanged={setCurriculumIndex} />
      </CurriculumTitleWrapper>
      <CurriculumWrapper>
        <Curriculum {...{ curriculumInfo: curriculumInfo[curriculumIndex] }} />
      </CurriculumWrapper>
    </DetailCurriculumWrapper>
  );
};

const DetailCurriculumWrapper = styled.div`
  margin-top: 16rem;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 144rem;
  flex-direction: column;
`;
const CurriculumTitleWrapper = styled.div`
  width: 107rem;
  display: flex;
  flex-direction: column;
`;

const CurriculumHeadTitle = styled.div`
  margin-top: 0.8rem;
  margin-bottom: 5.2rem;
`;

const CurriculumWrapper = styled.div`
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 144rem;
  background-color: ${({ theme: { color } }) => color.greyScale.offWhite};
`;

const CurriculumQuery = graphql`
  query CurriculumQuery {
    allMdx(filter: { frontmatter: { templateKey: { glob: "masters_curriculum*" } } }) {
      edges {
        node {
          frontmatter {
            tabName
            curriculum {
              index
              subject
              subjectList {
                detail
                name
              }
            }
            masterInfo {
              avatar
              introduce
              name
              nutshell
              position
            }
          }
        }
      }
    }
  }
`;

export default DetailCurriculum;

{'fraction_non_alphanumeric': 0.1178087571176124, 'fraction_numerical': 0.008639308855291577, 'mean_word_length': 2.5622377622377623, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 41, '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': '1889775', 'n_tokens_mistral': 1596, 'n_tokens_neox': 1599, 'n_words': 328}