[feat/MAT-253] Header 공통 Component 개발#266
Merged
sterdsterd merged 3 commits intodevelopfrom Apr 10, 2026
Merged
Conversation
support Introduced a flexible Header component for the native app, supporting title, subtitle, badges, back button, and customizable right-side content.
- Adjusted icon size and viewBox to 24x24 - Removed unused Circle import - Updated stroke and fill colors for consistency
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
native 앱에서 재사용 가능한 공통 Header 컴포넌트를 도입하고, 기존 알림 벨 아이콘의 렌더링 스펙(패딩/사이즈)을 조정해 향후 화면별 헤더 적용을 쉽게 하려는 PR입니다.
Changes:
apps/native공통Header컴포넌트 신규 추가 (title/subtitle/badge/back/right slot + 서브컴포넌트)components/common배럴 export에Header추가AlertBellButtonIcon의 SVG 스펙 변경(24px 기준) 및 내부 path 재구성
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| apps/native/src/components/system/icons/AlertBellButtonIcon.tsx | 알림 벨 버튼용 아이콘 SVG 스펙(뷰박스/사이즈/패스) 변경 |
| apps/native/src/components/common/index.ts | 공통 컴포넌트 export에 Header 추가 |
| apps/native/src/components/common/Header.tsx | 공통 Header 컴포넌트 및 Header.TextButton/Header.IconButton 추가 |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+105
to
+108
| <View className='flex-row items-center gap-[12px]'> | ||
| <Text className='typo-title-1-bold color-gray-900'>{title}</Text> | ||
| {subtitle && <Text className='typo-title-1-semibold color-gray-700'>{subtitle}</Text>} | ||
| {badge && <Badge variant={badge} />} |
There was a problem hiding this comment.
Text에 color-gray-900/color-gray-700 클래스가 사용되고 있는데, 이 프로젝트의 다른 컴포넌트들은 text-gray-900/text-gray-700 형태로 색상을 지정하고 있습니다(예: student/problem/components/Header.tsx). 현재 클래스명은 Tailwind/NativeWind에서 매칭되지 않아 타이틀/서브타이틀 색상이 적용되지 않을 가능성이 큽니다. text-gray-*로 수정하거나, 토큰 색상을 style={{ color: ... }}로 일관되게 적용해 주세요.
Comment on lines
5
to
+13
| const AlertButtonIcon = React.forwardRef<React.ComponentRef<typeof Svg>, LucideProps>( | ||
| ({ color = 'black', size = 48, strokeWidth = 2, ...rest }, ref) => { | ||
| const resolvedStrokeWidth = Number(strokeWidth); | ||
|
|
||
| ({ size = 24, ...rest }, ref) => { | ||
| return ( | ||
| <Svg ref={ref} width={size} height={size} viewBox='0 0 48 48' fill='none' {...rest}> | ||
| <Path | ||
| d='M22.2681 33C22.4436 33.304 22.6961 33.5565 23.0001 33.732C23.3041 33.9075 23.649 33.9999 24.0001 33.9999C24.3511 33.9999 24.696 33.9075 25 33.732C25.3041 33.5565 25.5565 33.304 25.7321 33' | ||
| stroke={color} | ||
| strokeWidth={resolvedStrokeWidth} | ||
| strokeLinecap='round' | ||
| strokeLinejoin='round' | ||
| /> | ||
| <Path | ||
| d='M25.9161 14.3141C25.0136 14.01 24.0516 13.9251 23.1098 14.0664C22.168 14.2077 21.2733 14.5712 20.4998 15.1269C19.7263 15.6825 19.0961 16.4142 18.6614 17.2616C18.2268 18.1091 18.0001 19.0478 18.0001 20.0001C18.0001 24.4991 16.5891 25.9561 15.2601 27.3271C15.1297 27.4705 15.0437 27.6486 15.0127 27.8399C14.9816 28.0312 15.0068 28.2274 15.0852 28.4047C15.1636 28.5819 15.2918 28.7325 15.4542 28.8383C15.6167 28.944 15.8063 29.0002 16.0001 29.0001H32.0001C32.1939 29.0002 32.3836 28.944 32.546 28.8383C32.7084 28.7325 32.8366 28.5819 32.915 28.4047C32.9934 28.2274 33.0186 28.0312 32.9876 27.8399C32.9565 27.6486 32.8705 27.4705 32.7401 27.3271C32.5343 27.1152 32.3391 26.8933 32.1551 26.6621' | ||
| stroke={color} | ||
| strokeWidth={resolvedStrokeWidth} | ||
| strokeLinecap='round' | ||
| strokeLinejoin='round' | ||
| /> | ||
| <Circle | ||
| cx={30} | ||
| cy={20} | ||
| r={3} | ||
| fill='#E57A00' | ||
| stroke='#E57A00' | ||
| strokeWidth={resolvedStrokeWidth} | ||
| /> | ||
| </Svg> | ||
| <> | ||
| <Svg ref={ref} width={size} height={size} viewBox='0 0 24 24' fill='none' {...rest}> | ||
| <Path | ||
| d='M10.2681 21C10.4436 21.304 10.6961 21.5565 11.0001 21.732C11.3041 21.9075 11.649 21.9999 12.0001 21.9999C12.3511 21.9999 12.696 21.9075 13 21.732C13.3041 21.5565 13.5565 21.304 13.7321 21' | ||
| stroke='#1E1E21' | ||
| strokeWidth={2} |
There was a problem hiding this comment.
AlertBellButtonIcon이 LucideProps를 받도록 되어 있지만, 변경 후에는 color/strokeWidth를 더 이상 적용하지 않고 Path에 stroke/strokeWidth를 하드코딩하고 있습니다. 이 상태면 소비자가 color/strokeWidth를 넘겨도 반영되지 않아(타입상 지원하는 것처럼 보이는데) API가 혼란스러울 수 있습니다. 고정 색상이 의도라면 props 타입을 축소하거나, 아니면 이전처럼 color/strokeWidth를 받아 Path에 반영해 주세요.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
native 앱의 공통 Header 컴포넌트를 재사용 가능한 구조로 구현. Props 기반 타이틀/뱃지 설정 + ReactNode 기반 우측 액션 슬롯의 하이브리드 패턴 적용.
Linear
Changes
Header컴포넌트 신규 구현 (title, subtitle, badge, showBackButton, right slot)Header.TextButton,Header.IconButton네임스페이스 서브컴포넌트 제공'correct' | 'incorrect') 내부 매핑으로 스타일/텍스트 자동 처리colorprop으로 토큰 값 직접 전달, 미지정 시 원본 색상 유지Testing
pnpm typecheck통과Risk / Impact
Screenshots / Video