Skip to content

feat: 홈 바로가기와 주간 TOP 5 세로 순위 목록 (홈 개선 A) - #907

Merged
hyejj19 merged 3 commits into
feat/home-redesignfrom
feat/home-redesign-a
Oct 29, 2026
Merged

hyejj19 merged 3 commits into
feat/home-redesignfrom
feat/home-redesign-a

Conversation

@hyejj19

@hyejj19 hyejj19 commented Oct 28, 2026 •

Copy link
Copy Markdown
Collaborator

bottle-note/workspace#537

관련 이슈 (Related Issue)

PR 타입 (Type of Change)

  • ✨ feat: 새로운 기능
  • 💄 style: UI/스타일 변경

변경 사항 (Changes)

  • 상단 MBTI 안내 카드를 없애고 배너 아래에 바로가기 4개 추가: 바텐더 노트(NEW) · 취향 테스트 · 위스키 타로 · 나의 기록
  • 배너 넘김 컨트롤을 시안대로 변경: 슬라이드마다 있던 원형 화살표를 없애고, 배너 오른쪽 아래에 하나만 고정된 「현재/전체 ‹ › 멈춤·재생」 박스로. 불러오지 못한 배너는 순서 계산에서 제외, 배너가 1개면 숨김
  • 공통 섹션 머리 HomeSectionHeader 추가 (라벨 + 두 줄 제목 + 선택적 「전체 보기」)
  • 주간 TOP 5 / 최근에 본 위스키를 가로 카드에서 세로 목록으로 변경
    • 순위(TOP 5만), 이미지, 이름, 영문명, 별점, 찜 버튼
    • 문구는 기존 HOME_FEATURED_CONFIG 그대로, 로딩·빈 상태·에러·로그인 필요 상태 처리 유지
  • 시음회 탭은 기존 미리보기 그대로
  • ROUTES.BARTENDER_NOTE 추가, 홈 하단 여백을 --navbar-total-space 기준으로 변경
  • 정리: MbtiPromoCard, HomeFeaturedItemList, HomeFeaturedDescription, PopularSkeleton 삭제

GA4

이벤트 시점 매개변수
home_quick_link_click (신규) 바로가기 선택 link
home_item_click (신규) TOP 5·최근 본 위스키 항목 선택 section, item_id, position
add_to_picks (기존) 홈 목록 찜 source: home 추가 (AlcoholPickButton에 source prop)

gtm.config.json, docs/gtm-sync.md 함께 갱신. pnpm gtm:validate 통과. GTM 반영은 main 머지 시 CI.

스크린샷 (Screenshots)

iPhone 14 (390×844)

Before After · 첫 화면 After · TOP 5 After · 다크

Before는 iPhone SE 폭의 전체 페이지 캡처입니다. 카테고리 영역은 서브 PR C에서 바뀝니다.

배너 넘김 컨트롤

라이트 다크(멈춤 상태)

테스트 방법 (Test Procedure)

  1. 홈에서 바로가기 4개가 각각 바텐더 노트·취향 테스트·위스키 타로·나의 기록으로 이동하는지 확인
  2. 주간 TOP 5가 01~05 순위와 함께 세로로 나오고, 항목을 누르면 위스키 상세로 이동하는지 확인
  3. 비로그인으로 찜을 누르면 로그인 안내가 뜨는지 확인
  4. 비로그인으로 「최근에 본 위스키」 탭을 열면 로그인 안내가 나오는지 확인
  5. 배너 오른쪽 아래 컨트롤로 이전·다음 이동, 멈춤 후 자동으로 넘어가지 않고 재생하면 다시 넘어가는지 확인

셀프 체크리스트 (Self Checklist)

  • 로컬에서 정상 동작 확인 (위 1~4, 라이트·다크, 가로 넘침 없음)
  • 로그인 상태 확인: TOP 5 찜 저장 → 새로고침 후 유지 → 해제 복구, 「최근에 본 위스키」 닉네임 문구와 순위 없는 목록 6개, 「나의 기록」 → /history 내 기록
  • pnpm lint 통과
  • 불필요한 console.log 제거
  • 반응형/모바일 대응 확인 (iPhone 14 크기 브라우저 에뮬레이션)
  • jest 468개, vitest 121개 통과(배너 컨트롤 테스트 3개 추가) / 타입 체크 통과 (서브 PR이라 CI는 메인 PR에서 실행)

참고 사항 (Additional Information)

  • TOP 5·최근 본 위스키에는 이동할 목록 화면이 정해지지 않아 「전체 보기」를 넣지 않았습니다.

🤖 Generated with Claude Code

- Replace the MBTI promo card with four quick links (bartender note, taste test, tarot, my records)
- Add HomeSectionHeader and render weekly top / recently viewed as a ranked vertical list with pick buttons
- Track home_quick_link_click, home_item_click, and add_to_picks with source home
- Remove the horizontal card list, its skeleton, and the unused description component

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
hyejj19 and others added 2 commits October 29, 2026 09:07
- Show one fixed pager at the banner's bottom-right with the current position, prev/next, and autoplay pause/play
- Count the position over banners that loaded, so skipped banners do not break the counter
- Hide the pager when only one banner is visible

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The page only needs to clear the fixed bottom navbar.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@hyejj19
hyejj19 merged commit 90100df into feat/home-redesign Oct 29, 2026
@hyejj19
hyejj19 deleted the feat/home-redesign-a branch October 29, 2026 00:21
hyejj19 added a commit that referenced this pull request Oct 29, 2026
* chore: start home redesign integration branch

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* feat: 홈 바로가기와 주간 TOP 5 세로 순위 목록 (홈 개선 A) (#907)

* feat: add home quick links and vertical weekly top list

- Replace the MBTI promo card with four quick links (bartender note, taste test, tarot, my records)
- Add HomeSectionHeader and render weekly top / recently viewed as a ranked vertical list with pick buttons
- Track home_quick_link_click, home_item_click, and add_to_picks with source home
- Remove the horizontal card list, its skeleton, and the unused description component

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* feat: replace per-slide banner arrows with a single pager

- Show one fixed pager at the banner's bottom-right with the current position, prev/next, and autoplay pause/play
- Count the position over banners that loaded, so skipped banners do not break the counter
- Hide the pager when only one banner is visible

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix: drop extra bottom gap below the home sections

The page only needs to clear the fixed bottom navbar.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

* feat: 홈 에디터 추천과 인기 리뷰 섹션 (홈 개선 B) (#908)

* feat: add editor's pick and popular review sections to home

- Show curation, pairing, and program feed items as horizontal cover cards with kind badges
- Show the top three popular reviews from the explore review API
- Hide each section when it has no items and offer retry on error
- Share the curation feed kind helper with the curation page
- Track home_item_click for curation/review and the new home_more_click event

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* feat: move editor's pick above the weekly list and fold tasting events into it

- Show editor's pick before the weekly top / recently viewed tabs
- Drop the tasting event tab and include WHISKY_TASTING_EVENT in the editor's pick feed with a 시음회 badge
- Put the section label and more link on one row so titles use the full width, and make the editor's pick title one line
- Remove the now-unused tasting event preview components

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* feat: render editor's pick on the server with per-kind requests

- Fetch tasting events, programs, curations, and pairings separately on the server (two each, cached for an hour) and tag each item with the requested spec code
- Pass the items to HomeCurationSection so the home page shows them without a client request or loading state
- Drop the client curation query and the tasting branch of payload-based kind detection

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* refactor: keep curation kind detection inside the curation page

Home now tags items by the requested spec code, so the shared helper had a
single caller. Restore the page-local check until the feed returns spec codes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* refactor: name the editor's pick loader by what it does

- fetchHomeEditorPicks / fetchCurationFeedBySpec: network calls start with fetch and say which feed they load
- HomeEditorPick, EDITOR_PICK_SPEC_CODES, HomeEditorPickSection: use the section name shown on screen

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* refactor: route the editor's pick server request through CurationV2Api

- Add CurationV2Api.server.getFeed on top of fetchPublicApiOnServer, next to the existing server getDetail
- Keep only the per-spec composition in the home loader, without calling fetch directly

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

* feat: 홈 카테고리·국가별 보기 목록형 정리 (홈 개선 C) (#909)

* feat: restyle home category and region browsing as lists

- Rename HomeCategorySection to HomeExploreSection with an EXPLORE header
- Render categories as a numbered list with bottle images instead of orange cards
- Render regions as divided rows with region chips, keeping image fallbacks and Scotland default open
- Strip the parent country prefix from region chip labels
- Track home_item_click for category and region selections
- Remove the unused TarotPromoCard and its test

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* feat: keep home section titles on one line with a shared SectionHeader

- Move the home section header to components/ui/Display/SectionHeader and render the title on one line, truncating only if a dynamic value overflows
- Shorten the weekly top, recently viewed, and explore titles so they fit 375px
- Store featured titles as single strings instead of two-line arrays

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* style: tighten the gap between home bookmark tabs and their content

- Reduce the tab-to-content gap from 30px to 16px
- Reserve the 44px label row height only when the header has a more link

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* style: drop the label that repeats the bookmark tab name

The weekly top and recently viewed tabs already name the section, so the
header shows only the title. SectionHeader label is now optional.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* feat: put the weekly top header above the bookmark tabs

- Render the section header above the tabs and switch it with the selected tab (WEEKLY TOP 5 / VIEW HISTORY)
- Say 내가 최근 본 위스키 instead of the nickname, so the list no longer fetches the current user
- Keep only list rows in the loading skeleton

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

* style: make the home banner pager a translucent capsule

Use a smaller rounded pill with a 30% black blurred background and white text
so it covers less of the admin banner copy. The counter drops the zero padding.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
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.

1 participant