Skip to content

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

Merged
hyejj19 merged 6 commits into
feat/home-redesignfrom
feat/home-redesign-b
Oct 29, 2026
Merged

feat: 홈 에디터 추천과 인기 리뷰 섹션 (홈 개선 B)#908
hyejj19 merged 6 commits into
feat/home-redesignfrom
feat/home-redesign-b

Conversation

@hyejj19

@hyejj19 hyejj19 commented Oct 28, 2026 •
edited by bottlenote-app Bot
Loading

Copy link
Copy Markdown
Collaborator

bottle-note/workspace#537

관련 이슈 (Related Issue)

PR 타입 (Type of Change)

  • ✨ feat: 새로운 기능
  • ♻️ refactor: 리팩토링

변경 사항 (Changes)

  • 에디터 추천 섹션 HomeEditorPickSection 추가

    • 「EDITOR'S PICK / 보틀노트 에디터가 직접 골라봤어요✨」(한 줄), 「전체 보기」 → /curation
    • 서버(SSR)에서 시음회 · 프로그램 · 큐레이션 · 페어링을 종류별로 따로 2개씩 요청(1시간 캐시, revalidate: 3600)해 이 순서로 합침. 요청한 spec 코드로 종류 배지를 붙여 payload 모양 추측이 필요 없음. 한 종류가 실패해도 나머지는 노출
    • 브라우저에서는 피드를 요청하지 않음(로딩 상태 없음)
    • 책갈피 탭의 「시음회」를 없애고 에디터 추천으로 합침 → 탭은 주간 TOP 5 · 최근에 본 위스키 두 개, 시음회 미리보기 컴포넌트 삭제

  • 인기 리뷰 섹션 HomeReviewSection 추가

    • 「한 잔에 담긴 이야기」, 「리뷰 더 보기」 → 둘러보기 리뷰 탭
    • 둘러보기 리뷰 API POPULAR · DESC · size 3, 작성자 · 별점 · 위스키 · 본문 3줄 · 태그 3개

  • 두 섹션 공통: 데이터가 없으면 섹션 숨김, 에러는 다시 시도 버튼

  • 데이터 조회: 에디터 추천은 app/(primary)/_utils/fetchHomeEditorPicks.ts(서버), 인기 리뷰는 useHomeReviewsQuery(클라이언트 useQuery)

  • HomeSectionHeader에 moreLabel prop 추가

  • 홈 섹션 순서: 에디터 추천 → TOP 5 / 최근 본 위스키 → 카테고리 → 인기 리뷰

  • HomeSectionHeader: 라벨과 「전체 보기」를 윗줄 한 줄에, 제목은 아래 전체 폭으로 (긴 제목이 링크 때문에 줄바뀜되지 않게)

  • 큐레이션 목록 화면은 변경 없음 (그 화면의 페어링 판별은 피드에 spec 코드가 생기면 정리 예정)

GA4

이벤트 시점 매개변수
home_item_click 에디터 추천 카드 · 리뷰 선택 section: curation | review, item_id(큐레이션·리뷰 ID), position
home_more_click (신규) 「전체 보기」·「리뷰 더 보기」 section

gtm.config.json, docs/gtm-sync.md 갱신, pnpm gtm:validate 통과.

스크린샷 (Screenshots)

iPhone 14 (390×844), 개발 API 실데이터

에디터 추천 · 라이트 에디터 추천 · 다크 인기 리뷰 · 라이트 인기 리뷰 · 다크

카테고리 영역과 그 아래 큰 여백은 C에서 바뀝니다.

테스트 방법 (Test Procedure)

  1. 홈에서 바로가기 아래 「EDITOR'S PICK」 카드가 옆으로 넘어가고, 카드마다 종류 배지가 보이는지 확인
  2. 카드를 누르면 큐레이션 상세, 「전체 보기」는 시음회&정보로 이동
  3. 홈 맨 아래 「한 잔에 담긴 이야기」에 리뷰 3개가 보이고, 리뷰를 누르면 리뷰 상세, 「리뷰 더 보기」는 둘러보기 리뷰 탭으로 이동

셀프 체크리스트 (Self Checklist)

  • 로컬에서 정상 동작 확인 (개발 API: 프로그램 3 · 큐레이션 3, 리뷰 3개 노출, 「리뷰 더 보기」 → /explore?tab=REVIEW_WHISKEY, 라이트·다크, 가로 넘침 없음)
  • pnpm lint 통과
  • 불필요한 console.log 제거
  • 반응형/모바일 대응 확인 (iPhone 14 크기 브라우저 에뮬레이션)
  • jest 468개, vitest 128개 통과(홈 통합 테스트 + 서버 조회 테스트 2개 추가: 배지·링크·GA, 빈 상태 숨김, 에러 재시도) / 타입 체크 통과

참고 사항 (Additional Information)

  • 리뷰 섹션 라벨 「REVIEW」는 다른 섹션과 모양을 맞추려고 임시로 넣었습니다(시안에는 라벨 없음). 빼거나 바꿀지 검토 부탁드립니다.
  • 개발 데이터에는 페어링 큐레이션이 없어 페어링 배지는 자동 테스트로만 확인했습니다.
  • 캐시가 1시간이라 새 큐레이션·노출 종료가 홈에 최대 1시간 늦게 반영됩니다.

🤖 Generated with Claude Code

This was referenced Oct 28, 2026
Merged
Merged
Base automatically changed from feat/home-redesign-a to feat/home-redesign October 29, 2026 00:21
@hyejj19 @claude
feat: add editor's pick and popular review sections to home
bc732cc 
- 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>
@hyejj19
hyejj19 force-pushed the feat/home-redesign-b branch from e07f7d1 to bc732cc Compare October 29, 2026 00:22
hyejj19 and others added 5 commits October 29, 2026 11:36
@hyejj19 @claude
feat: move editor's pick above the weekly list and fold tasting event…
d9c4178 
…s 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>
@hyejj19 @claude
feat: render editor's pick on the server with per-kind requests
c4ae7be 
- 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>
@hyejj19 @claude
refactor: keep curation kind detection inside the curation page
14966ab 
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>
@hyejj19 @claude
refactor: name the editor's pick loader by what it does
addc37e 
- 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>
@hyejj19 @claude
refactor: route the editor's pick server request through CurationV2Api
d453dbb 
- 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>
@hyejj19
hyejj19 merged commit 899eda5 into feat/home-redesign Oct 29, 2026
@hyejj19
hyejj19 deleted the feat/home-redesign-b branch October 29, 2026 04:40
hyejj19 added a commit that referenced this pull request Oct 29, 2026
@hyejj19 @claude
feat: 홈 화면 개선 (모바일) (#906)
3f2c2a6 
* 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>
@bottlenote-app bottlenote-app Bot mentioned this pull request Nov 3, 2026
Closed
@bottlenote-noa bottlenote-noa Bot mentioned this pull request Nov 5, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@hyejj19