Feat: default chip 확장 및 추가 chip

[nakyoung98]

📌요구사항

• DefaultChip 기능 확장
• 모든 Chip의 기본 베이스인 DefaultChip를 이미지를 받고, 배치할 수 있도록 함
• 선택가능 칩
• 취소가능 칩
• 이미지 + 정보 칩

📌작업 진행 상황 (에러, 막혔던 부분, 그외 궁금한것 등등)

DefaultChip 컴포넌트 사용 가이드

DefaultChip은 다양한 상황에서 사용 가능한 범용 UI 컴포넌트입니다. 본 가이드는 개발자가 DefaultChip을 효과적으로 활용할 수 있도록 돕습니다.

컴포넌트 구조

DefaultChip은 다음 props를 지원합니다

• label (필수): 칩의 주요 텍스트 내용입니다.
• imgUrl (옵셔널): 칩에 표시할 이미지 URL입니다.
• icon (옵셔널): 칩에 포함할 아이콘 정보로, src와 alt 텍스트를 가진 객체 형태입니다.
• isSelected (옵셔널): 칩의 선택 상태를 나타내며, 시각적으로 구분됩니다.
• onClick (옵셔널): 칩 클릭 시 실행될 콜백 함수입니다.
• onIconClick (옵셔널): 아이콘 클릭 시 실행될 콜백 함수로, 아이콘이 존재할 때만 유효합니다.
• isVertical (옵셔널): 칩 내용의 수직 배치 여부를 결정합니다.
• className (옵셔널): 요건 쓰실일이 없을겁니다. 추가 컴포넌트 만들 때 styled(DefaultChip)를 쓰기 위해서 넣은거에요. styled-component가 자동으로 사용하는 친구입니다.

사용 예시

<DefaultChip
  label="반갑습니다"
  imgUrl="https://example.com/image.svg"
  icon={{ src: "https://example.com/icon.svg", alt: "아이콘 설명" }}
  onClick={() => { console.log("Chip 클릭됨"); }}
  isVertical={true}
/>

스타일링

DefaultChip를 덮어 다른 Chip을 만들기 위해서는 아래와같은 코드를 사용하시면 됩니다

export default function SelectPositionChip({ label, isSelected, onClick }: SelectPositionChipProps
) {
    return <Container label={label} isSelected={isSelected} onClick={onClick} />;
}

const Container = styled(DefaultChip)`
...
`;

접근성 고려사항

user-select: none; 속성이 적용되어 텍스트 선택이 불가능합니다. 사용자가 실수로 칩 텍스트를 드래그하여 선택하는 것을 방지하기 위함인데, 접근성에 이슈가 있을까 고민이 됩니다

사용 시 유의사항

• 아이콘 클릭과 칩 클릭은 별도로 처리됩니다. 아이콘이 있을 경우, 칩 본문 클릭 시 onClick은 실행되지 않고 아이콘 클릭 시에만 onIconClick이 실행됩니다.
• isVertical 옵션을 통해 내용 배치를 쉽게 조정할 수 있어, 다양한 레이아웃 요구사항에 대응 가능합니다. 다만 이 때, 아이콘이 우측 상단에 자동 배치됩니다 :)
• isSelected를 통해 선택 상태를 시각적으로 구분할 수 있어, 사용자의 상태 인지가 용이해집니다.

📌스크린샷 / 테스트결과 (선택)

co-KKIRI.-.Chrome.2024-03-12.11-53-03.mp4

📌이슈 번호

Closes: #39

[github-actions]

올바른 PR 형식

올바른 PR 형식입니다.
코드 작성하시느라 수고 많으셨습니다 :)

[kimbobby]

👍