Skip to content

refactor(auth): 헤더 인증 로직을 클라이언트 유저 상태로 전환#376

Merged
sageherb merged 2 commits into
devfrom
refactor/header
Jan 7, 2026
Merged

refactor(auth): 헤더 인증 로직을 클라이언트 유저 상태로 전환#376
sageherb merged 2 commits into
devfrom
refactor/header

Conversation

@sageherb
Copy link
Copy Markdown
Collaborator

@sageherb sageherb commented Jan 7, 2026

📖 개요

헤더 인증 로직을 클라이언트 유저 상태로 전환

📌 관련 이슈

N/A

🛠️ 상세 작업 내용

  • 헤더의 인증/프로필 로직을 React Query 기반 클라이언트 상태로 이동
  • 사용자 기본 정보를 조회하는 useUserBasic 훅 추가
  • 로그인 상태 분기를 담당하는 HeaderAuthSlot 컴포넌트 추가
  • HeaderActions가 서버에서 프로필을 조회하지 않고 avatar props를 받도록 수정
  • 로그아웃 시 사용자 관련 query cache를 정리하도록 처리
  • 유저 관련 queryKey를 userKeys로 중앙화
  • HeaderSearch를 Suspense로 감싸도록 헤더 구성 변경
  • Header 컴포넌트에서 불필요한 async 제거
  • 로그아웃 시 유저 기본 쿼리를 null로 설정하는 방식 대신 유저 관련 query 전체 제거

✅ PR 체크리스트

  • 기능 테스트
  • UI/레이아웃 확인
  • 타입 정의 및 로직 셀프 리뷰
  • 불필요한 주석 및 코드 제거
  • pnpm build 로 실행 테스트
  • 다른 기능에 영향 없는지 테스트

@sageherb sageherb requested a review from Copilot January 7, 2026 04:40
@github-actions github-actions Bot added the refactor 코드 리팩토링 / 구조 개선 label Jan 7, 2026
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR refactors the header authentication logic from a server-side cookie-based approach to a client-side React Query state management pattern. The change improves consistency by centralizing user state management through React Query hooks.

  • Introduced useUserBasic hook to fetch and cache user basic information on the client side
  • Created HeaderAuthSlot component to handle conditional rendering based on authentication state
  • Converted HeaderActions from an async server component to a synchronous client component that receives avatar data via props

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
src/features/user/api/use-user-basic.ts Adds new React Query hook for fetching user basic information with error handling
src/widgets/header/ui/header-auth-slot.tsx Adds new component that conditionally renders login button or HeaderActions based on user state
src/widgets/header/header.tsx Removes server-side cookie checking and simplifies to use HeaderAuthSlot
src/widgets/header/ui/header-actions.tsx Converts from async server component to sync client component receiving avatar props
src/widgets/header/ui/header-user-menu.tsx Adds query cache cleanup on logout using queryClient.setQueryData
src/entities/user/index.ts Exports getUserBasic function for use in the new hook
src/entities/user/api/user-api.server.ts Removes React cache wrapper from getUserProfileServer function

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/features/user/api/use-user-basic.ts Outdated
Comment thread src/widgets/header/ui/header-user-menu.tsx Outdated
Comment thread src/widgets/header/ui/header-user-menu.tsx Outdated
Comment thread src/widgets/header/header.tsx Outdated
- 헤더의 인증/프로필 로직을 React Query 기반 클라이언트 상태로 이동
- 사용자 기본 정보를 조회하는 useUserBasic 훅 추가
- 로그인 상태 분기를 담당하는 HeaderAuthSlot 컴포넌트 추가
- HeaderActions가 서버에서 프로필을 조회하지 않고 avatar props를 받도록 수정
- 로그아웃 시 사용자 관련 query cache를 정리하도록 처리
- 유저 관련 queryKey를 userKeys로 중앙화
- HeaderSearch를 Suspense로 감싸도록 헤더 구성 변경
- Header 컴포넌트에서 불필요한 async 제거
- 로그아웃 시 유저 기본 쿼리를 null로 설정하는 방식 대신 유저 관련 query 전체 제거
@sageherb sageherb merged commit d74d44d into dev Jan 7, 2026
@sageherb sageherb deleted the refactor/header branch January 7, 2026 05:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

refactor 코드 리팩토링 / 구조 개선

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants