Skip to content

feat: 홈 화면 개선 (모바일) - #906

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

hyejj19 merged 5 commits into
mainfrom
feat/home-redesign

Conversation

@hyejj19

@hyejj19 hyejj19 commented Oct 28, 2026 •

Copy link
Copy Markdown
Collaborator

관련 이슈 (Related Issue)

PR 타입 (Type of Change)

  • ✨ feat: 새로운 기능
  • 💄 style: UI/스타일 변경
  • ♻️ refactor: 리팩토링

개요

홈 화면(모바일)을 새 시안대로 바꾸는 통합 PR입니다. 아래 서브 PR을 각각 리뷰해 이 브랜치에 머지했고, 이 PR로 main에 한 번에 반영합니다.

서브 PR

변경 사항 (Changes)

홈 순서: 배너 → 바로가기 → 에디터 추천 → 주간 TOP 5 / 최근에 본 위스키 → EXPLORE(카테고리·국가별) → 인기 리뷰

  • 배너: 슬라이드마다 있던 화살표 대신 오른쪽 아래 「현재/전체 ‹ › 멈춤·재생」 하나
  • 바로가기: 바텐더 노트(NEW) · 취향 테스트 · 위스키 타로 · 나의 기록 (MBTI 안내 카드 제거)
  • 에디터 추천: 서버에서 종류별로 2개씩 요청(CurationV2Api.server.getFeed)해 요청한 spec 코드로 배지 표시, 시음회 탭은 여기로 합침
  • 주간 TOP 5 / 최근에 본 위스키: 세로 순위 목록, 탭에 따라 바뀌는 섹션 머리, 「내가 최근 본 위스키」
  • EXPLORE: 카테고리 목록형, 국가별은 펼침 목록 + 지역 칩(국기 이미지 로직 유지)
  • 인기 리뷰: 둘러보기 리뷰 API 인기순 3개
  • 섹션 제목: 공용 components/ui/Display/SectionHeader, 한 줄 고정
  • GA4: home_quick_link_click, home_item_click, home_more_click, add_to_picks의 source: home (gtm.config.json, docs/gtm-sync.md)
  • 정리: MBTI·타로 안내 카드, 가로 카드 목록, 시음회 미리보기 등 안 쓰는 컴포넌트 삭제

스크린샷 (Screenshots)

iPhone 14 (390px), 개발 API 데이터

Before (운영, 다크) After · 라이트 After · 다크

테스트 방법 (Test Procedure)

  1. 홈을 위에서부터 내리며 섹션 순서와 각 링크 이동 확인 (서브 PR별 상세 시나리오는 feat: 홈 바로가기와 주간 TOP 5 세로 순위 목록 (홈 개선 A) #907·feat: 홈 에디터 추천과 인기 리뷰 섹션 (홈 개선 B) #908·feat: 홈 카테고리·국가별 보기 목록형 정리 (홈 개선 C) #909)
  2. 「최근에 본 위스키」 탭: 비로그인은 로그인 안내, 로그인은 목록과 「VIEW HISTORY / 내가 최근 본 위스키🥃」
  3. 국가별 보기에서 지역 칩 이동, 카테고리 이동
  4. 라이트·다크, iPhone SE(375px)에서 섹션 제목 한 줄

셀프 체크리스트 (Self Checklist)

  • 로컬에서 정상 동작 확인 (서브 PR마다 브라우저 확인, 로그인·비로그인)
  • pnpm lint 통과
  • 불필요한 console.log 제거
  • 반응형/모바일 대응 확인 (375·390px 에뮬레이션)
  • 이 PR의 빌드·테스트 CI 결과로 최종 확인

참고 사항 (Additional Information)

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
hyejj19 and others added 3 commits October 29, 2026 09:21
* 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: 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: 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>
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>
@hyejj19
hyejj19 merged commit 3f2c2a6 into main Oct 29, 2026
6 checks passed
@hyejj19
hyejj19 deleted the feat/home-redesign branch October 29, 2026 05:25
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