Skip to content

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

Merged
hyejj19 merged 5 commits into
feat/home-redesignfrom
feat/home-redesign-c
Oct 29, 2026
Merged

feat: 홈 카테고리·국가별 보기 목록형 정리 (홈 개선 C)#909
hyejj19 merged 5 commits into
feat/home-redesignfrom
feat/home-redesign-c

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)

  • 💄 style: UI/스타일 변경
  • ♻️ refactor: 리팩토링

변경 사항 (Changes)

  • HomeCategorySection → HomeExploreSection 이름 변경, 섹션 제목 「EXPLORE / 싱글 몰트부터 버번까지 골라보세요🗺️」 추가, min-h-[80vh] 제거
  • 섹션 제목 한 줄 고정: 홈 섹션 머리를 공용 components/ui/Display/SectionHeader로 옮기고 제목을 한 줄로(닉네임처럼 길이가 바뀌는 값이 넘치면 말줄임). 375px에 맞게 문구 축약
    • 주간 TOP 5: 「이번 주 사람들이 가장 많이 본 위스키🔥」
    • 최근 본 위스키: 「내가 최근 본 위스키🥃」 (닉네임 조회 제거)
    • HOME_FEATURED_CONFIG.titleText(두 줄 배열) → label + title(한 줄 문자열)
  • 주간 TOP 5 섹션 머리를 탭 위로: EXPLORE처럼 「영문 라벨 + 한글 제목」을 책갈피 탭 위에 두고, 고른 탭에 따라 「WEEKLY TOP 5 / 이번 주 사람들이 가장 많이 본 위스키🔥」 ↔ 「VIEW HISTORY / 내가 최근 본 위스키🥃」로 바뀜 (HomeTabSection에 renderHeader)
  • 책갈피 탭과 내용 사이 간격 30px → 16px, 「전체 보기」가 없는 머리는 라벨 줄 높이 44px 대신 최소 높이
  • 카테고리: 2열 주황 카드 → 번호 · 이름 · 영문명 · 병 이미지 · 화살표 목록. 링크(위스키 둘러보기 + 카테고리 필터)는 그대로
  • 국가별 보기: 테두리 박스 → 선으로 나눈 행, 하위 지역은 칩(전체 + 지역)
    • 이미지 로직(API 이미지 → 국기 → 병 아이콘), 스코틀랜드 기본 펼침, 하위 지역 없는 나라 바로 이동은 그대로
    • 하위 지역 이름의 「스코틀랜드/」 같은 나라 접두어는 칩에서 생략
  • GA4: home_item_click에 section: category(item_id = 카테고리 영문명), region(item_id = 지역 ID, position = 나라 행 순서)
  • 정리: 어디서도 쓰지 않던 TarotPromoCard와 테스트 삭제 (jest 수 465 → 462)
  • CategoryList.test: PrimaryLinkButton 목 제거 후 실제 목록으로 검증

스크린샷 (Screenshots)

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

카테고리 · 라이트 카테고리 · 다크 국가별 · 라이트 국가별 · 다크

테스트 방법 (Test Procedure)

  1. 홈 「EXPLORE」 섹션의 카테고리 7개(전체 포함)가 목록으로 나오고, 누르면 위스키 둘러보기에 해당 카테고리 필터가 걸리는지 확인
  2. 「국가별 보기」 탭에서 스코틀랜드가 펼쳐져 있고, 지역 칩을 누르면 해당 지역 필터로 이동하는지 확인
  3. 하위 지역이 없는 나라(일본 등)는 누르면 바로 둘러보기로 이동하는지 확인

셀프 체크리스트 (Self Checklist)

  • 로컬에서 정상 동작 확인 (개발 API 지역 데이터, 라이트·다크, 가로 넘침 없음)
  • pnpm lint 통과
  • 불필요한 console.log 제거
  • 반응형/모바일 대응 확인 (iPhone 14 크기 브라우저 에뮬레이션)
  • jest 462개, vitest 128개 통과(홈 통합 테스트 2개 추가: 카테고리 링크·GA, 국가별 펼침·지역 링크·GA) / 타입 체크 통과

참고 사항 (Additional Information)

  • 「전체」 칩은 진한 배경(bg-neutral-solid)이라 다크 모드에서 밝은 칩으로 보입니다. 선택된 상태처럼 보일 수 있어 검토 부탁드립니다.

🤖 Generated with Claude Code

@hyejj19 hyejj19 mentioned this pull request Oct 28, 2026
Merged
10 tasks done
@hyejj19
hyejj19 force-pushed the feat/home-redesign-b branch from e07f7d1 to bc732cc Compare October 29, 2026 00:22
@hyejj19
hyejj19 force-pushed the feat/home-redesign-c branch from d4356d0 to d810c89 Compare October 29, 2026 00:22
Base automatically changed from feat/home-redesign-b to feat/home-redesign October 29, 2026 04:40
@hyejj19 @claude
feat: restyle home category and region browsing as lists
069d75f 
- 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>
@hyejj19
hyejj19 force-pushed the feat/home-redesign-c branch from aef7c79 to 069d75f Compare October 29, 2026 04:41
hyejj19 and others added 4 commits October 29, 2026 13:50
@hyejj19 @claude
feat: keep home section titles on one line with a shared SectionHeader
6535fde 
- 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>
@hyejj19 @claude
style: tighten the gap between home bookmark tabs and their content
817a68f 
- 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>
@hyejj19 @claude
style: drop the label that repeats the bookmark tab name
e5b603a 
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>
@hyejj19 @claude
feat: put the weekly top header above the bookmark tabs
c5ae0d5 
- 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>
@hyejj19
hyejj19 merged commit 9a9a8a1 into feat/home-redesign Oct 29, 2026
@hyejj19
hyejj19 deleted the feat/home-redesign-c branch October 29, 2026 05:01
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