[노철] - 태그 컴포넌트 구현

[qkdl60]

📌 이슈 번호

close #5

🚀 구현 내용

태그 컴포넌트

태그 컴포넌트 입니다.

interface TagProps {
  color?: color; // primary , blue, green, purple 중 선택해서 사용, default로 primary(자몽)이 들어갑니다.
  style?: React.CSSProperties; 
  children: React.ReactNode; // 태그 내용
  onClick?: (event?: React.MouseEvent) => void; // 클릭이벤트를 넣으면 hover시 cursor도 pointer로 변경됩니다.
}

<Tag color="purple">태그 내용</Tag>
<Tag color="purple" onClick={handleOnClick}>태그내용</Tag>

인풋 태그 컴포넌트

태그를 새로 입력할 수 있는 InputTag 컴포넌트입니다.
인풋 태그는 배경색이 orange로 고정입니다.

interface InputTagProps {
  style?: React.CSSProperties;
  onSubmit: (submitValue: string) => void; //태그 생성을 위한 submit함수
}

<InputTag
	onSubmit={(value: string) => {console.log(value)}}
/>

📘 참고 사항

첫 pr이라 코드외에도 컨벤션이 안맞는 부분이 있을 수 있습니다. 알려주시면 수정할게요

[MinwooP]

컴포넌트 잘 짜셨네요 !! 입력 태그까지,,, 👍🏻 자세한 PR도 너무 좋습니다 !! 고생 많으셨습니다 😎 LATM ~~

[MinwooP]

onClick이 없을 때는 className을 추가 안해줘도 되니 && 연산자를 사용해도 좋을 것 같아요 ! ㅎㅎㅎ

Suggested change

	className={`tag tag--${color} ${onClick ? 'pointer' : ''}`}
	className={`tag tag--${color} ${onClick && 'pointer'}`}

[qkdl60]

className={`tag tag--${color} ${onClick && 'pointer'}`} 

로 하면 클래스네임이 'undefined' 가 들어가는데 괜찮을까요? 그래서 삼항연산자로 하긴 했는데 그냥 빈칸도 별로인것 같긴합니다

[MinwooP]

헉 그렇군요 !! 그럼 저희 그냥 classNames 라이브러리 쓰는 건 어떤가여?? ㅎㅎㅎ

앞으로도 true, false 값에 따라서 클래스이름 설정해주는 게 많을 것 같아서요 ㅎㅎㅎ

[qkdl60]

다 이유가 있었네요 ㅎㅎㅎ 👍혜수님까지 이야기해보고 넣는게 좋을것 같네요

[suehdn]

저는 classNames 쓰는게 좋을 것 같습니다