Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: 헤더 컴포넌트 UI 추가 #19

Merged
merged 17 commits into from
Jan 28, 2025
Merged

Feat: 헤더 컴포넌트 UI 추가 #19

merged 17 commits into from
Jan 28, 2025

Conversation

devhaeun
Copy link
Collaborator

이슈 번호

#1

작업 내용

헤더 컴포넌트 반응형 추가 및 디테일 추가

변경 사항

  • 로그인/알림/설정 상단 메뉴 위치 수정
  • 카테고리 z-index 올리기
  • 카테고리 메뉴 및 호버 이벤트 완성
  • png 파일들 svg 파일로 변경 (장마당 로고 및 검색창 티켓 이미지만 png파일로 사용)
  • 중복되는 이미지 파일 삭제
  • 헤더 래플 업로드 버튼 → 래플 업로드 페이지 연결
  • 아이콘 이미지 및 텍스트 크기 조절

남은 이슈

  • 반응형 메뉴 수정 (태블릿/핸드폰 뷰에서 관심, 티켓 등 메뉴 버튼 있는 HeaderIconMenu 컴포넌트 미완성)
  • 반응형 헤더 디테일 미완성: 일부 svg 아이콘 리액트 컴포넌트로 만들어서 사용 필요
  • 코드 리팩토링 시 이미지 파일 중복해서 호출하지 않도록 할 수 있는 방법 알아보기

media.tsx 파일에 반응형 크기 설정 파일 생성
PC 화면과 태블릿/스마트폰 화면에서 헤더 디자인이 많이 달라서, PC 헤더를 ContainerLarge 컴포넌트로 분리
정의된 브레이크 포인트에 따라 화면 나눔
태블릿/휴대폰 화면에 있는 둥근 아이콘 메뉴를 HeaderIconMenu 컴포넌트로 분리함.
develop 브랜치에서 로그인 모달 내용 병합함
크기에 따라 헤더 내 아이콘 등의 위치 수정하여 반응형 헤더 UI 개발
피그마 디자인에 맞추어 small 화면 기준 390px로 수정
화면 크기가 media.small보다 크고 553px보다 작을 때 장마당 로고 이미지 위치 고정
헤더에 래플 업로드 버튼 추가
Header 파일에서 사용하지 않는 이미지 import 삭제
모달 관련 업데이트된 develop 브랜치 pull 받아오고 충돌 해결
래플 업로드 버튼 눌렀을 때 래플 업로드 페이지(/raffle-upload)로 이동하도록 연결
헤더 상단에 위치한 로그인/알림/설정 메뉴 위치 수정
헤더 하단 구분선을 border-bottom 속성에서 없애고 바깥에 div 요소로 구분
헤더 전체에 z-index:100 부여하여 카테고리 메뉴 z-index 올리기 시도

홈 페이지와 병합했을 때 의도한 것과 같이 카테고리 메뉴가 상단에 올라오는지 확인 필요
- 아이콘 이미지 및 글자 크기 수정
- 카테고리 메뉴 호버 시 테두리 생기도록 이벤트 추가
Header 파일에서 사용하지 않는 styled component 및 주석 삭제
close issue #1
@devhaeun devhaeun merged commit 59ddb9a into develop Jan 28, 2025
@devhaeun devhaeun deleted the feat/search-box-#1 branch January 29, 2025 12:18
devhaeun added a commit that referenced this pull request Feb 6, 2025
Feat: 헤더 컴포넌트 UI 추가
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants