✨ feat: Header 컴포넌트 작성

[bbearcookie]

🧩 이슈 번호

• close Header 컴포넌트 #34

✅ 작업 사항

• Header 컴포넌트 작성
  • 헤더에 들어가는 아이콘의 갯수나 형태는 변경되기 쉬운 부분이라고 생각했어요. 그래서 내부에 들어갈 컨텐츠를 표현하는 부분은 외부에 위임하고 배경 색상 등의 테마와 전체 레이아웃만 잡아주는 정도로 컴포넌트를 추상화 했어요.
• LeftArrow SVG의 굵기 strokeWidth 를 외부에서 주입할 수 있도록 작성
• TreasureChest SVG 컴포넌트 추가

👩‍💻 공유 포인트 및 논의 사항

Header 사용 방법

• variant로 헤더의 배경 등의 스타일을 지정할 수 있어요.
  • none: 기본 값으로, 메인 홈처럼 스타일이 없는 경우에 사용해요.
  • primary: 보관한 편지 페이지에서 보이는 탭 스타일 1이에요.
  • secondary: 보관한 편지 페이지에서 보이는 탭 스타일 2에요.
• left, center, right prop으로 각 위치에 존재해야 할 컨텐츠를 주입할 수 있어요.
• leftStyle, centerStyle, rightStyle prop으로 각 위치를 감싸는 컨테이너의 스타일을 주입할 수 있어요.
  • leftStyle, rightStyle에는 기본적으로 margin-left와 margin-right가 1rem 으로 잡혀있는데, 외부에서 주입한다면 덮어쓸 수 있어요.

스토리북

[github-actions]

🚀 Storybook Preview 보러가기: https://65a6c73d536a3c43b7c5c9bb-crdhxpolwo.chromatic.com/
🚀 React Preview 보러가기: https://sea-of-my-heart-8q40ct61i-dnd-sea-of-my-heart.vercel.app

[bbearcookie]

@easyhyun00

초안 상태였던 헤더를 완성했어요!
여유 되실때 확인 부탁드려요! 😊

[easyhyun00]

와 수고하셨습니다! 너무 깔끔하게 잘 하셨네요! 👍

---

SerializedStyles 타입은 모르던건데 이번에 알게되네요! 이런식으로 사용해서 스타일을 입혀줄 수 있겠네요!

rightStyle={styles.메인_페이지.rightStyle}

---

<header> 태그를 사용해서 웹 접근성이 좋은 것 같습니다!

---

p5;
너무 잘하셨는데 굳이 고칠 점을 찾는다면 props 이름을

left, center, right → leftContent, centerContent, rightContent

이런 식으로 바꾸면 더 좋을 것 같습니다!

---

전체적으로 코드의 가독성과 재사용성이 좋네요!

[easyhyun00]

Approve 합니다!