<commit_before>import React from "react";
import styled from "styled-components";
// Typography
import { MBody, HLBold } from "typography/";

interface IImageCard {
  description?: string;
  descriptions?: string[];
  title: string;
  img: string;
}

const ImageCard: React.FC<IImageCard> = ({ img, title, description, descriptions }) => {
  return (
    <CardWrapper>
      <CardImg alt={`card-img-${title}`} src={img} />
      <Title>
        <HLBold>{title}</HLBold>
      </Title>
      {descriptions ? (
        <DescriptionList>
          {descriptions.map((description) => (
            <li key={description}>
              <MBody style={{ display: "inline", verticalAlign: "middle" }}>{description}</MBody>
            </li>
          ))}
        </DescriptionList>
      ) : (
        <Description>
          <MBody>{description}</MBody>
        </Description>
      )}
    </CardWrapper>
  );
};

const CardWrapper = styled.div`
  max-width: 30.2rem;
  display: flex;
  flex-direction: column;
`;

const CardImg = styled.img`
  border-radius: 1.6rem;
  width: 18rem;
  height: 13rem;
`;
const Title = styled.h4`
  margin-top: 3.2rem;
  color: ${({ theme: { color } }) => color.black};
`;
const Description = styled.div`
  margin-top: 1.6rem;
  color: ${({ theme: { color } }) => color.greyScale.grey2};
`;

const DescriptionList = styled.ul`
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  color: ${({ theme: { color } }) => color.greyScale.grey2};
  list-style: disc;
  list-style-position: outside;
  margin-left: 2.3rem;
  & > *:not(:last-child) {
    margin-bottom: 0.8rem;
  }
`;
<commit_msg>:lipstick: list-style 위치를 inside로 수정<commit_after>import React from "react";
import styled from "styled-components";
// Typography
import { Typography } from "typography/";

interface IImageCard {
  description?: string;
  descriptions?: string[];
  title: string;
  img: string;
  medium?: boolean;
}

const ImageCard: React.FC<IImageCard> = ({ img, title, description, descriptions, medium }) => {
  const [open, setOpen] = React.useState(true);

  return (
    <CardWrapper
      {...{ medium }}
      onClick={() => {
        setOpen(!open);
      }}
    >
      <CardImg alt={`card-img-${title}`} src={img} />
      <Title>
        <Typography type="SHLBold">{title}</Typography>
      </Title>
      {descriptions ? (
        <DescriptionList {...{ open }}>
          {descriptions.map((description) => (
            <li key={description}>
              <Typography type="MBody" style={{ display: "inline", verticalAlign: "middle" }}>
                {description}
              </Typography>
            </li>
          ))}
        </DescriptionList>
      ) : (
        <Description>
          <Typography type="MBody">{description}</Typography>
        </Description>
      )}
    </CardWrapper>
  );
};

const CardWrapper = styled.div<{ medium?: boolean }>`
  width: ${({ medium }) => (medium ? "41rem" : "30.2rem")};
  display: flex;
  flex-direction: column;
`;

const CardImg = styled.img`
  border-radius: 1.6rem;
  width: 18rem;
  height: 13rem;
`;
const Title = styled.h4`
  margin-top: 3.2rem;
  color: ${({ theme: { color } }) => color.black};
`;
const Description = styled.div`
  margin-top: 1.6rem;
  color: ${({ theme: { color } }) => color.greyScale.grey2};
`;

const DescriptionList = styled.ul<{ open?: boolean }>`
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  color: ${({ theme: { color } }) => color.greyScale.grey2};
  list-style: disc;
  list-style-position: inside;
  margin-left: 1.3rem;
  & > li {
    text-indent: -1.35rem;
    padding-left: 1.35rem;
  }
`;

{'fraction_non_alphanumeric': 0.17514434973879572, 'fraction_numerical': 0.013747594171020072, 'mean_word_length': 2.7389516957862283, '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': '3938619', 'n_tokens_mistral': 1250, 'n_tokens_neox': 1217, 'n_words': 257}