refactor(header): 헤더 레이아웃 시프팅 처리 및 AuthSlot 처리 개선#379
Conversation
- 대형 화면에서 grid 기반 레이아웃을 사용하도록 헤더 구조 수정 - 반응형 정렬 및 간격을 조정해 전체 헤더 정렬 개선 - HeaderAuthSlot에서 로딩/비인증 상태 분기 로직 정리 - 로그아웃 시 유저 관련 query cache를 확실히 제거하도록 처리 - auction 섹션 설명 문구 소폭 수정
There was a problem hiding this comment.
Pull request overview
This PR refactors the header component to address layout shifting issues and improve authentication slot handling. The changes focus on implementing a grid-based layout for large screens and cleaning up conditional rendering logic.
Key Changes:
- Implemented CSS Grid layout for xl screens with a 3-column structure (logo, search, auth slot) to prevent layout shifts
- Refactored HeaderAuthSlot to use a single return statement with conditional content assignment for better code structure
- Enhanced logout flow to explicitly clear user query cache before navigation
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/widgets/header/header.tsx | Introduces grid-based layout for xl screens with explicit column sizing to prevent layout shift, wraps search in a container div for proper flex/grid behavior |
| src/widgets/header/ui/header-auth-slot.tsx | Refactors conditional rendering to use a single return with a wrapper div, improving consistency and enabling better layout control |
| src/widgets/header/ui/header-user-menu.tsx | Adds explicit query cache clearing on logout with setQueryData before removeQueries |
| src/screens/main/model/sections.ts | Updates auction section description text to be more concise |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| } catch { | ||
| showToast.error("로그아웃에 실패했습니다. 잠시 후 다시 시도해주세요."); | ||
| } finally { | ||
| queryClient.setQueryData(userKeys.basic(), null); |
There was a problem hiding this comment.
The setQueryData call on line 46 is redundant since removeQueries on line 47 will remove all user-related queries including the basic query. Setting the data to null before removal serves no functional purpose and adds unnecessary complexity. Consider removing line 46 and relying solely on removeQueries to clean up the cache.
| queryClient.setQueryData(userKeys.basic(), null); |
📖 개요
헤더 레이아웃 시프트 처리 및 인증 슬롯 처리 개선
📌 관련 이슈
N/A
🛠️ 상세 작업 내용
✅ PR 체크리스트
pnpm build로 실행 테스트