fix: Header title 가운데 정렬#25
Conversation
Walkthrough컴포넌트의 이름이 Changes
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
src/components/common/TitleHeader.tsx (1)
38-53: Emotion이activeprop을 그대로 DOM에 주입합니다 – 경고 발생 가능Emotion(
@emotion/styled)은 기본적으로 전달받은 props를 그대로 DOM attribute로 전달합니다.
active는 HTML<div>에서 유효하지 않은 속성이므로, 브라우저 콘솔에 “Received unknown prop ‘active’” 경고가 뜹니다.-const NextButton = styled.div<{ active: boolean }>` +const NextButton = styled('div', { + // active prop을 DOM으로 전달하지 않도록 필터링 + shouldForwardProp: prop => prop !== 'active', +})<{ active: boolean }>` cursor: ${({ active }) => (active ? 'pointer' : 'default')}; ... - background: ${({ active }) => (active ? '#6868FF' : '#888')}; + background: ${({ active }) => (active ? '#6868FF' : '#888')};또는 prop 이름을
$active로 변경해도 됩니다.
DOM 경고를 사전에 차단해 주세요.
🧹 Nitpick comments (4)
src/components/common/TitleHeader.tsx (2)
40-44:align-items속성이 효과가 없습니다
align-items는 Flex 컨테이너일 때만 동작합니다.
NextButton에display: flex; justify-content: center;정도를 추가하지 않으면 텍스트가 수직 중앙에 오지 않습니다.
55-62: 타이틀 정확한 가운데 정렬이 보장되지 않음
justify-content: space-between방식은 좌·우 요소 폭이 동일할 때만 시각적 중앙 정렬이 맞춰집니다.
우측 버튼이 없거나(폭 0) 아이콘 크기가 좌측과 다르면 타이틀이 치우칠 수 있습니다.
position: absolute; left: 50%; transform: translateX(-50%);패턴을 고려해 보세요.src/pages/signup/SignupNickname.tsx (1)
4-4: 컴포넌트 alias가 실제 이름과 달라 가독성이 떨어집니다
TitleHeader를Header라는 이름으로 import-alias 하여 사용하고 있습니다.
추후 유지보수 시 혼선을 줄이기 위해 변수명도TitleHeader로 맞추는 편이 낫습니다.-import Header from '../../components/common/TitleHeader'; +import TitleHeader from '../../components/common/TitleHeader'; ... - <Header + <TitleHeader title="설정 1/2" ... />Also applies to: 30-36
src/pages/signup/SignupDone.tsx (1)
19-22: 타이틀이 전달되지 않아 빈 요소가 렌더링됩니다
TitleHeader는titleprop이 없더라도<div className="title">를 출력하므로, 현재 빈div가 DOM에 남습니다.
- 타이틀을 명시적으로 전달하거나
title이 없으면 해당div를 렌더링하지 않도록TitleHeader를 개선해 주세요.예시:
- <TitleHeader - leftIcon={<img src={leftarrow} alt="뒤로가기" />} - onLeftClick={handleBackClick} - /> + <TitleHeader + leftIcon={<img src={leftarrow} alt="뒤로가기" />} + title="회원가입 완료" + onLeftClick={handleBackClick} + />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/components/common/TitleHeader.tsx(2 hunks)src/pages/signup/SignupDone.tsx(2 hunks)src/pages/signup/SignupGenre.tsx(2 hunks)src/pages/signup/SignupNickname.tsx(1 hunks)
🔇 Additional comments (1)
src/pages/signup/SignupGenre.tsx (1)
38-45: 전반적으로 문제 없음 – 변경 사항 승인공통 헤더로의 교체가 올바르게 이루어졌습니다.
1 participant
📝작업 내용
서비스 내 헤더가 두 가지 형태로 존재해서 TitleHeader로 명칭을 분리했습니다
TitleHeader, NavBar 컴포넌트를 src/components/common/으로 이동
Summary by CodeRabbit
Header에서TitleHeader로 변경되었습니다.Header대신 새로운TitleHeader컴포넌트를 사용하도록 변경되었습니다.