Feat: 헤더 컴포넌트 인터페이스 추가 구현

[Yeonseo-Jo]

close #33

☑️ 완료 태스크

• Header 컴포넌트 default 동작 적용
• 추가 커스터마이징을 위한 인터페이스 적용
• Header Wrapper boxShadow 추가

🔎 PR 내용

Header 컴포넌트의 인터페이스를 완전히 리팩토링하여 더 유연하고 직관적인 사용이 가능하도록 개선했습니다.

기존 인터페이스:

<Header left="왼쪽" center="중앙" right="오른쪽" />

새로운 인터페이스:

// 우선순위: render* > backButton, title > 기본 뒤로가기 버튼

// 1. 기본 사용 (제목/  뒤로가기 버튼)
<Header title="홈" />
-> backButton / renderLeft prop이 없을시 default Icon(`ChevronLeftIcon`), default click event handler(`navigate -1`)가 적용됩니다

// 2. 백 버튼 커스터마이징 - backButton에 들어갈 UI(ex. 아이콘)이나 event handler를 커스터마이징 할 때
<Header title="설정" backButton={{ onClick: () => navigate('/') }} />

// 3. 섹션별 완전 커스터마이징 - left, center, right 섹션을 각각 커스터마이징 할 때
<Header renderCenter={() => <SearchBar />} />

📷 스크린샷

[Copilot]

Pull Request Overview

This PR refactors the Header component to introduce a more flexible interface with customizable back button and section renderers, applies default styling updates, and updates dependent usage and dependencies.

• Replaces left, center, right props with backButton, title, and renderLeft/renderCenter/renderRight callbacks
• Implements default back-button behavior using React Router’s useNavigate and adds box-shadow style
• Updates menu page to use new title prop and bumps @radix-ui/react-icons dependency

Reviewed Changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated 1 comment.

File	Description
src/common/components/Header.tsx	Refactored props, added back button logic, default styles
src/Menu/page.tsx	Updated Header usage to the new interface
package.json	Added @radix-ui/react-icons dependency and formatted lint-staged config

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (2)

src/common/components/Header.tsx:70

• Typo in function name renderCentnerElement; rename to renderCenterElement for consistency and clarity.

  const renderCentnerElement = () => renderCenter && <CenterElement as="div">{renderCenter()}</CenterElement>;

src/common/components/Header.tsx:47

• [nitpick] Consider adding unit tests for renderBackButton to cover default navigation, custom onClick, and custom renderIcon scenarios.

  const renderBackButton = () => {

[Copilot]

Add an accessible name (e.g., aria-label="뒤로가기") to the back button so screen readers can identify its purpose.

Suggested change

	<button type="button" onClick={onClickBackButton}>
	<button
	type="button"
	onClick={onClickBackButton}
	aria-label={backButton?.ariaLabel || "뒤로가기"} // Default accessible name
	>

[jungwoo3490]

"onClick" in backButton // backButton에 onClick prop이 있는지 확인
backButton.onClick // onClick에 nullish한 값이 들어오지는 않았는지 검증 용도

연서한테 구두로 설명받았습니다~!

[jungwoo3490]

요기는 ?? 대신 || 사용해준 이유가 있는지 궁금해요!!!

[Yeonseo-Jo]

??가 더 적절하겠네유 수정했습니당!

[jungwoo3490]

LGTM 🙌🏻