feat(web): 편슐랭 가이드 리스트(추천 콘텐츠)

[brightchul]

한 줄 요약

• 편슐랭 가이드 리스트 뷰 UI 작업

자세한 내용 [시안]

• recommendation / [category] 구조로 구성
  • 상단 layout 는 상단 헤더
  • [category]에서 layout는 탭 메뉴
  • [category]에서 각 탭 메뉴 별로 나타내는 뷰가 달라서 내부에서 조건부 렌더링으로 활용
• TabCategory에 category props 확장 (0ed74f51f581281a02f99a390856e3b628176c00)
  • TabCategory에서 탭 메뉴 텍스트, 링크 주소 만 존재했는데, 카테고리 값이 추가로 필요하게 되어서 추가
• HoneyTextIcon 추가 (7bf3c1da4e4c2fb63d7d7b2e4f6979acc295a2a5)
  • "꿀" 이라는 글자이지만, 해당 부분에서만 사용되기 때문에 폰트 파일 추가보다는 svg 아이콘 추가로 대응
  • Gmarket Sans TTF 폰트가 여러곳에서 쓰이면 추후 추가 예정

들어가는 방법

• 방법 1 : 메인 슬라이드 배너에서 모두보기 를 클릭한다. (하단 이미지 노란색 화살표)

• 방법 2 : 주소창에 https://handpeon-web.........vercel.app/main/ALL에 /main/ALL 을 지우고 /recommendation을 입력한다.

[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-web	Visit Preview

[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-web	Visit Preview

[UdaGyeom]

<수정요청> 01.메인 -탭 메뉴 클릭 시 해당 탭에 이모티콘 보여야 됨. -탭 메뉴 높이가 큰것 같아서 높이 작게 요청. -카테고리 순서 변경(ALL / CU / 7Eleven / GS25 / Emart24) -‘이번주 Hot Trend’ 클릭 시, 나오는 순위 카드 모양 오른쪽 Radius 모양 수정.

[UdaGyeom]

02.편슐랭 가이드 -페이지 하단 여백 주기 (메인 하단 여백이랑 같게) -상황별 추천-> 카테고리 탭 이모티콘과 텍스트 사이 여백 4px 주기)

[UdaGyeom]

3. 검색페이지 -검색 인풋 글자 컬러 및 텍스트 굵기 피그마 참고해서 수정 요청

[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-web	Visit Preview

[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-web	Visit Preview

[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-web	Visit Preview

[brightchul]

@UdaGyeom 수정했습니다. 확인 부탁드립니다.

[github-actions[bot]]

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

[github-actions[bot]]

🚀 Chromatic 및 Storybook 배포 완료 🚀

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