design: Chips 및 상단 배너 컴포넌트 UI 구현

[areumH]

💡 작업 내용

• Chips 컴포넌트 UI 구현
• 스토리북에 Chips 컴포넌트 추가
• 상단 배너 컴포넌트 UI 구현
• 스토리북에 상단 배너 컴포넌트 추가

💡 자세한 설명

✅ 상단 배너 컴포넌트 UI

• 상단 배너의 width 길이를 반응형을 고려하여 width: 100%으로 설정해두었습니다.
• 배너의 배경 이미지가 확정된 것 같지 않아 임의로 배경색을 backgroundColor: color.Neutral['800']로 지정해두었습니다.
• 로딩 중일 때의 스타일을 위해 keyframes.ts 파일에 loadingStyle을 추가하였습니다. 추후에 자유롭게 수정, 삭제하셔도 됩니다!

export const loadingStyle = keyframes({
  '0%': {
    backgroundColor: color.Neutral['800'],
  },
  '50%': {
    backgroundColor: color.Neutral['700'],
  },
  '100%': {
    backgroundColor: color.Neutral['800'],
  },
});

• 스토리북에서의 원활한 컴포넌트 확인을 위해 TopBanner.stories.tsx 파일에 exampleBanner을 임시로 적어두었습니다.

const exampleBanner = {
  title: '깻잎 논쟁 당신의 선택은?',
  summary:
    '1. 저녁 식사 중 남자친구가 친구에게 깻잎을 떼어주자 나는 불편한 감정을 느꼈다. 
    \n2. 집에 돌아와 남자친구에게 솔직하게 말했고, 그는 미안해하며 이해해 주었다. 
    \n3. 친구들과 이 문제를 논의했지만 결론은 나지 않았고, 사람마다 다르게 받아들일 수 있음을 깨달았다.',
};

export const Default: Story = {
  args: {
    title: exampleBanner.title,
    summary: exampleBanner.summary,
    isLoading: false,
  },
};

+) 기존의 Button 컴포넌트의 스토리북 경로를 commons 폴더로 이동시켜두었습니다!

📗 참고 자료 (선택)

📢 리뷰 요구 사항 (선택)

🚩 후속 작업 (선택)

✅ 셀프 체크리스트

• PR 제목을 형식에 맞게 작성했나요?
• 브랜치 전략에 맞는 브랜치에 PR을 올리고 있나요? (master/main이 아닙니다.)
• 이슈는 close 했나요?
• Reviewers, Labels, Projects를 등록했나요?
• 작업 도중 문서 수정이 필요한 경우 잘 수정했나요?
• 테스트는 잘 통과했나요?
• 불필요한 코드는 제거했나요?

closes #119

[kwaksj329]

숫자 프로퍼티를 대괄호 표기법으로 접근할 때는 color.Neutral[400] 처럼 숫자로만 작성하는 것으로 통일하는게 어떨지 의견 여쭙고 싶습니다.

[areumH]

헉 전에 올려주신 부분인데 제가 실수했네요.. 꼼꼼히 체크했어야 했는데🥲
말씀해 주신 대로 숫자로 통일하여 다시 커밋 올리겠습니다 !

[kwaksj329]

large에는 폰트 관련해서 size만 지정하신 이유가 있을까요? weight, line-height 누락된 것 같습니다!

[areumH]

피그마에 올라온 UI와 비교했을 때 폰트가 너무 두껍다고 생각되어 fontSize만 지정했었습니다.
지금 보니 코드의 통일성이 떨어진다고 생각되긴 하네요😥
다음에 상의 후 수정할 필요가 있다고 생각되면 수정하겠습니다!

[kwaksj329]

로딩 애니메이션 추가 좋습니다 👍🏻

[hsgh085]

Chip, 상단 배너 컴포넌트 구현하시느라 고생 많으셨습니다! 로딩 상태까지 구현해 놓으시다니!👍👍넘 좋습니당

아! 그리고 PR명 보면서 든 생각입니다! 저는 기능 구현은 통상적으로 feat으로 짓는게 좋다고 생각했는데, 디자인 시스템 개발할 때는 아름님 PR 명처럼 design으로 짓는 것도 좋아보이네요!! 그럼 디자인 시스템 구축할 때는 design으로 명명할까요??

[hsgh085]

옮겨주셔서 감사합니다!😀