<commit_before>import React from "react";
import styled, { useTheme } from "styled-components";
import { graphql, useStaticQuery } from "gatsby";
// Type
import { TeamCultureType } from "@type/TeamCulture";
// Typography
import { SHLBold, MBody, HLBold } from "typography";
// Assets
import { TitleSet } from "components/";
import { SUBTITLE, TITLE } from "assets/static/phrases";
// Lib
import { strainMdxInfo } from "lib/utils";

const TeamCulture: React.FC = () => {
  const { color } = useTheme();

  const data = useStaticQuery(TeamCultureQuery);
  const { cultures }: { cultures: TeamCultureType[] } = strainMdxInfo(data);

  return (
    <TeamCultureWrapper>
      <TitleSet title={TITLE.CODESQUAD_TEAM_CULTURE} subtitle={SUBTITLE.CODESQUAD_TEAM_CULTURE} />
      <TeamCultureList>
        {cultures.map(({ title, cultureFeatures }) => (
          <TeamCultureListItem key={title}>
            <TeamCultureTitle>
              <HLBold>{title}</HLBold>
            </TeamCultureTitle>
            <TeamCultureContentList>
              {cultureFeatures.map(({ subtitle, description }) => (
                <TeamCultureContentListItem key={subtitle}>
                  <SHLBold>{subtitle}</SHLBold>
                  <MBody style={{ color: color.greyScale.grey2 }}>{description}</MBody>
                </TeamCultureContentListItem>
              ))}
            </TeamCultureContentList>
          </TeamCultureListItem>
        ))}
      </TeamCultureList>
    </TeamCultureWrapper>
  );
};

const TeamCultureWrapper = styled.div`
  width: 106.2rem;
  padding: 16rem 18.9rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: space-between;
  color: ${({ theme: { color } }) => color.blackAndWhite.black};
  & > *:not(:last-child) {
    margin-bottom: 5.6rem;
  }
`;

const TeamCultureList = styled.ul`
  display: flex;
  flex-direction: column;
  & > *:not(:last-child) {
    padding-bottom: 4rem;
    margin-bottom: 4rem;
    border-bottom: 0.1rem solid ${({ theme: { color } }) => color.greyScale.grey3};
  }
`;<commit_msg>:lipstick: 최상위 컴포넌트와의 여백을 8rem으로 변경<commit_after>import React from "react";
import styled, { useTheme } from "styled-components";
import { graphql, useStaticQuery } from "gatsby";
// Type
import { TeamCultureType } from "@type/TeamCulture";
// Typography
import { SHLBold, MBody, HLBold } from "typography";
// Assets
import { TitleSet } from "components/";
import { SUBTITLE, TITLE } from "assets/static/phrases";
// Lib
import { strainMdxInfo } from "lib/utils";

const TeamCulture: React.FC = () => {
  const { color } = useTheme();

  const data = useStaticQuery(TeamCultureQuery);
  const { cultures }: { cultures: TeamCultureType[] } = strainMdxInfo(data);

  return (
    <TeamCultureWrapper>
      <TitleSet title={TITLE.CODESQUAD_TEAM_CULTURE} subtitle={SUBTITLE.CODESQUAD_TEAM_CULTURE} />
      <TeamCultureList>
        {cultures.map(({ title, cultureFeatures }) => (
          <TeamCultureListItem key={title}>
            <TeamCultureTitle>
              <HLBold>{title}</HLBold>
            </TeamCultureTitle>
            <TeamCultureContentList>
              {cultureFeatures.map(({ subtitle, description }) => (
                <TeamCultureContentListItem key={subtitle}>
                  <SHLBold>{subtitle}</SHLBold>
                  <MBody style={{ color: color.greyScale.grey2 }}>{description}</MBody>
                </TeamCultureContentListItem>
              ))}
            </TeamCultureContentList>
          </TeamCultureListItem>
        ))}
      </TeamCultureList>
    </TeamCultureWrapper>
  );
};

const TeamCultureWrapper = styled.div`
  width: 106.2rem;
  padding: 8rem 18.9rem 16rem 18.9rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: space-between;
  color: ${({ theme: { color } }) => color.blackAndWhite.black};
  & > *:not(:last-child) {
    margin-bottom: 5.6rem;
  }
`;

const TeamCultureList = styled.ul`
  display: flex;
  flex-direction: column;
  & > *:not(:last-child) {
    padding-bottom: 4rem;
    margin-bottom: 4rem;
    border-bottom: 0.1rem solid ${({ theme: { color } }) => color.greyScale.grey3};
  }
`;
{'fraction_non_alphanumeric': 0.14326992535516495, 'fraction_numerical': 0.009872381411028173, 'mean_word_length': 2.9599618684461393, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 55, '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': '6645333', 'n_tokens_mistral': 1384, 'n_tokens_neox': 1332, 'n_words': 263}