feat(web): 메인 페이지 공통 UI 컴포넌트 추가

[brightchul]

한 줄 요약

• 메인 페이지에 공통 영역 컴포넌트 추가

• 10

자세한 내용

상단 헤더

• 로고 컴포넌트
  • 추후 로고 svg 파일이 변경될 예정
  • svg 아이콘을 직접 활용하지 않고 <LogoIcon> 활용
• 검색 박스
  • 메인 페이지의 검색 박스는 클릭시 페이지 이동이라서 onClick 추가

추천 콘텐츠 배너 영역

• swiper 를 활용
• 각 배너별 href 값을 통해 개별 페이지로 이동 가능
• totalViewURL 을 통해서 모두 보기 클릭시 특정 페이지 이동 가능

편의점 별 카테고리

• 카테고리 정보를 외부 상태로 받음
• width:100% 기준으로 동일 너비
• TabCategory + OneCategory

탭 메뉴

• CategoryChildren + HotTrend + DiscountItems 조합으로 사용됨
• TabCategory 안에서 활성화된 탭 메뉴에 따라서 개별로 보여짐
• 조건부 렌더링으로 되며 내부 탭 인덱스 상태는 store 에서 관리

기타 고려사항

카테고리 및 탭 메뉴 관련 구현 사항

각 케이스에 따라서 조건부 렌더링을 시도할 경우 해당 조건이 아닐 경우 렌더링이 아예 되지 않게 되면서 상태가 사라짐. 따라서 개별 탭, 카테고리별 지역 상태를 유지하기 위해서는 2가지 방법이 있음

1. 조건부 렌더링을 하면서 Global State Store에 개별 페이지의 상태를 저장
2. 전체 렌더링을 하면서 조건부 display:hidden를 적용, 즉 개별 컴포넌트들을 유지하고 css에서 안보이게 처리

2번으로 적용 및 시도했던 내용

현재 작업이 메인페이지 안에서의 작업이며 메인 페이지만의 상태관리인데 만약 다른 페이지로 이동했을때도 전역 상태에 상태 유지 또는 관리는 하는 것은 관리포인트 증가로 생각이 들어서 1번 방법은 사용하지 않기로 했음. 그래서 2번을 적용 2번을 적용하기 위해 `MatchDisplay` 컴포넌트를 추가 (commit f9410f4a2e8a45b2d9df4b516cca49479833a58d) ```jsx ``` 객체 배열인 경우 arrayToObj 를 이용해서 변환하면 좀더 쉽게 변환이 가능 ```jsx data = [ {label: "gs25", children:

gs25

, otherInfo: "...."}, {label: "cu", children:

cu

, otherInfo: "...."}, {label: "emart24", children:

emart24

, otherInfo: "...."}, ]; const labelChildrenObj = arrayToObj(data, 'label', 'children'); // 이렇게 변환 {gs25 :

gs25

, cu:

cu

} ```

현재는 @Ssoon-m 님의 제안에 따라서 1번 방법으로 다시 변경함

file-system based router, Dynamic Routes, route layout , zustand를 활용해서 좀더 구조적, 단순하게 하면서 상태 관리를 통해서 탭 관리를 하도록 수정함

43fbc75484a9d42ddcda40697f9ae2f6be69aadc 커밋부터 수정함

[brightchul]

refactor/main-common-ui 브랜치로 @Ssoon-m 님이 몇가지 제안을 주셔서 해당 부분 반영 이후 다시 리뷰 오픈할 예정

제안사항

수정 : 중첩 레이아웃 구조로 path variable 별로 tab category 진입하게 변경 이유 : 데이터 프리페칭을 위해 구조 변경했습니다. (url 변경, 프리패칭은 서버컴포넌트 이용)

수정 : TabCategory컴포넌트에서 currentChlidren부분 제거 이유 : label과 href에 대한 constants 값만 props로 전달

수정 : zustand 추가 이유 : 이전의 TabBar상태를 기억하기 위함

[github-actions[bot]]

🚀 Chromatic 및 Storybook 배포 완료 🚀

	URL	설명
🎨	Chromatic	시각적 테스트 및 UI 리뷰관련 URL
📚	Storybook	스토리북 배포 URL

[github-actions[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎	Name	Preview
handpyeon-admin	Visit Preview

[github-actions[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎	Name	Preview
handpyeon-web	Visit Preview