feat: Make a common Header component

[HoonBaek]

CLNP-2869

ChangeLog & Features

• Made a common ui Header component & Applied it to the every module header components

[netlify]

✅ Deploy Preview for sendbird-uikit-react ready!

Name	Link
🔨 Latest commit	c171672
🔍 Latest deploy log	https://app.netlify.com/sites/sendbird-uikit-react/deploys/66331cf6a4ce4f000856f45c
😎 Deploy Preview	https://deploy-preview-1078--sendbird-uikit-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[bang9]

전체적인 컨셉은 굿입니다.

한가지 디자인과 컴포넌트 관리 차원에서 짚고 넘어가고 싶은게 있는데요, 좌우의 여백이 일정해야 디자인 할 때나, 코드 작성하고 관리할때나, 고객이 사용할때 모두 편할것 같아서요. (디자이너는 공통 컴포넌트 재활용, 개발자는 매번 세부 여백을 조정할 필요 없음, 고객은 버튼 위치가 변경되거나 뒤틀리지 않아서 UX 적으로 좋음)

1. 모바일 UI 디자인에 헤더 디자인이 현재 어떻게 나와있는지 한번 체크하고
2. 만약 일관된 상태라면, 저희 컴포넌트만 업데이트 하면 될것같고
3. 일관되지 않은 상태라면 요거 저희가 어떤것을 하려고 하는지(재활용 가능한 공통 헤더 컴포넌트) 한번 디자이너분께 설명드리고, 디자인적으로 일관성을 어떻게 가져가면 좋을지 한번 이야기의 물꼬를 터보면 좋을것 같습니다.

Before

(left: 8, right: 16)

(left: 20, right: 16)

(left: 24, right: 24)

---

After

(left: 12, right: 14)

(left: 20, right: 16)

(left: 24, right: 20)

[bang9]

lgtm!