[#33] Feat/31/공통컴포넌트 헤더

[LMS10]

❓이슈

• close Feat : [공통컴포넌트] 헤더 구현 #33

📝 Description

GNB(헤더)와 사이드바를 구현하고 관련 API를 연결합니다.

Header

페이지 경로 및 로그인 상태에 따라 4가지 버전으로 분기됩니다.

조건	렌더
pathname === '/'	LandingHeader — 로고 고정, 비로그인 시 로그인/회원가입, 로그인 시 프로필
로그인 + workspaceId 있음	WorkspaceDetailHeader — 워크스페이스명, ADMIN이면 관리/초대 버튼 추가
로그인 + workspaceId 없음	WorkspaceListHeader — '내 워크스페이스' 텍스트 + 프로필

• 헤더는 fixed top-0으로 항상 상단 고정, z-0으로 모달 등 오버레이 요소 뒤에 위치
• 사이드바 유무에 따라 left 값을 분기 처리 (left-16.75 md:left-40 lg:left-75)

HeaderUserProfile

• 프로필 이미지(picture)가 있으면 next/image로 렌더, 없으면 <Icon name='profile' /> 사용
• 클릭 시 기존 공용 Dropdown 컴포넌트(variant='profile')를 활용한 드롭다운 표시
• 마이페이지 선택 시 /mypage로 라우팅, 로그아웃 선택 시 signOut 실행
• 외부 클릭 감지(mousedown 이벤트)로 드롭다운 닫기 처리

HeaderSkeleton

• /api/v1/auth/me 응답 전까지 프로필 영역에 스켈레톤 표시
• WorkspaceDetailHeader는 워크스페이스 조회(wsLoading)와 유저 정보 조회(meLoading)를 독립적으로 처리해 각 영역에 스켈레톤 적용

Sidebar

• 기존 목데이터(mockWorkspaces) 제거 후 /api/v1/workspaces/my API 연결
• useGetMyWorkspaces 훅으로 데이터 페칭, 로딩 중 SidebarSkeleton 표시
• 스켈레톤은 SidebarHeader를 제외하고 SidebarContent 영역에만 적용

워크스페이스 초대 모달

• /api/v1/workspaces/{workspaceId}/invite API 연결
• 상태코드별 에러 메시지 분기 처리
  • 404: 워크스페이스를 찾을 수 없습니다.
  • 409: 이미 참여 중인 워크스페이스입니다.
  • 그 외: 초대에 실패했습니다. 이메일을 확인해 주세요.

미들웨어

• /workspace/{workspaceId}/settings 경로에 대해 MEMBER 역할 접근 차단
• 접근 시 API로 role 확인 후 MEMBER이면 /workspace/{workspaceId}로 리다이렉트

타입 정리

• src/types/workspace.ts 제거
• 모든 워크스페이스 관련 타입을 src/apis/workspace/workspace.type.ts로 통합

🌀 PR Type

어떤 변경 사항이 있나요?

• 새로운 기능 추가
• 버그 수정
• CSS 등 사용자 UI 디자인 변경
• 코드에 영향을 주지 않는 변경사항 (오타 수정, 탭 사이즈 변경, 변수명 변경)
• 코드 리팩토링
• 주석 추가 및 수정
• 문서 수정
• 테스트 추가, 테스트 리팩토링
• 빌드 부분 혹은 패키지 매니저 수정
• 파일 혹은 폴더명 수정
• 파일 혹은 폴더 삭제

✅ Checklist

PR Checklist

PR이 다음 요구 사항을 충족하는지 확인하세요.

• Branch Convention 확인

  feat/ 기능 구현, fix/ 버그 수정, refactor/ 개선

• Base Branch 확인
• 커밋 메시지 컨벤션 준수
• 적절한 Label 지정
• Assignee 및 Reviewer 지정

Test Checklist

• 로컬 작동 확인

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
remate	Ready	Preview, Comment	May 7, 2026 1:05am

[minzx23]

완전 잘 돌아갑니다~ 고생하셨습니다!!!