Skip to content

[FEAT](apps/market-owner): DCMSM-77 기간 할인 전단 미리보기 API 연결 - #145

Merged
Tnalxmsk merged 18 commits into
developfrom
feat/apps-market-owner/DCMSM-77-periodic-flyer-preview-api
Jul 15, 2026
Merged

[FEAT](apps/market-owner): DCMSM-77 기간 할인 전단 미리보기 API 연결#145
Tnalxmsk merged 18 commits into
developfrom
feat/apps-market-owner/DCMSM-77-periodic-flyer-preview-api

Conversation

@hdg0116

@hdg0116 hdg0116 commented Jul 15, 2026

Copy link
Copy Markdown
Contributor

Related Issues

Background

기간 할인 수정 후 발행 전 오늘의 전단을 최종 확인하는 화면이 정적 UI 중심이라 실제 API 데이터와 원본 전단 UI 로직을 반영하지 못하고 있었습니다.

이번 PR에서는 GET /v1/owners/markets/{marketId}/flyers/preview/periodic API를 연결해 로그인된 마트의 전단 미리보기 데이터를 표시하고, 원본 UI의 영업시간 표시/대표 이미지 fallback/헤더 스타일을 재사용 또는 반영했습니다.

Tasks

  • 기간 할인 전단 미리보기 API helper, query key, query options, query hook 추가
  • API 응답을 전단 미리보기용 view model로 변환
  • 확인 화면을 API 데이터 기반으로 렌더링하도록 연결
  • loading, error, retry 상태 추가
  • 원본 UI의 영업시간 표시 로직을 @dongchimi/shared로 이동하고 client/market-owner에서 재사용
  • 임시 할인 뱃지 asset을 제거하고 공통 PointChip 사용
  • 마트 대표 이미지 fallback을 원본 UI와 동일한 기준으로 정리
  • 폰 미리보기 헤더/상태바 겹침 및 콘텐츠 시작 위치 조정
  • 관련 테스트/spec 갱신

Implementation Notes

  • marketId는 현재 로그인 세션의 useAuthStore 값에서 가져옵니다.
  • marketId가 없을 때는 전단 미리보기 query가 실행되지 않도록 처리했습니다.
  • API 응답은 zod schema와 공통 API 응답 검증을 거쳐 사용합니다.
  • createLeafletPreviewViewModel에서 가격 포맷, 요약 카운트, 영업시간 표시 값을 구성합니다.
  • formatBusinessHour, getCurrentBusinessCloseTime을 shared utility로 승격해 원본 client UI와 market-owner preview가 같은 로직을 사용합니다.
  • 마트 대표 이미지는 원본 UI처럼 thumbnailUrl != null이면 image를 렌더링하고, 값이 없을 때 fallback을 보여줍니다.
  • PhonePreviewFrame의 할인 칩은 임시 이미지 asset 대신 디자인 시스템 PointChip을 사용합니다.

Verification

  • pnpm.cmd --filter market-owner typecheck
  • pnpm.cmd --filter market-owner exec vitest run src/domains/leaflet/share/LeafletSharePage.test.tsx
  • git diff --check
  • commit 시 lint-staged/prettier 통과

Evidence

  • API: GET /v1/owners/markets/{marketId}/flyers/preview/periodic
  • Query key: ['leaflet-share', 'periodic-preview', marketId]
  • 공통 컴포넌트: PointChip
  • 공통 로직: @dongchimi/shared/business-hours

PR Point

  • API 응답 스키마가 최신 문서와 맞는지 확인 부탁드립니다.
  • marketId가 없는 세션에서 별도 안내 UI가 필요한지 확인 부탁드립니다.
  • shared로 이동한 영업시간 표시 로직이 원본 전단 UI와 동일하게 동작하는지 봐주세요.
  • 폰 미리보기는 실제 조작 가능한 화면이 아니라 발행 전 확인용 preview UI입니다.

Screenshot

스크린샷 2026-07-15 204147 image

Risk / Follow-up

  • thumbnailUrl이 더미데이터 URL이라 정상적으로 보이지 않을 수 있습니다.
  • marketId가 없는 로그인 상태를 별도 예외 화면으로 분리할지는 후속으로 정리할 수 있습니다.

@hdg0116
hdg0116 requested a review from a team as a code owner July 15, 2026 12:08
@vercel

vercel Bot commented Jul 15, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
dongchimi-client Ready Ready Preview, Comment Jul 15, 2026 3:30pm
dongchimi-market-owner Ready Ready Preview, Comment Jul 15, 2026 3:30pm

Request Review

@github-actions github-actions Bot added FEAT 새로운 기능 구현 다경 labels Jul 15, 2026
@coderabbitai

coderabbitai Bot commented Jul 15, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: f3d8c847-41f0-48d4-b429-3584afa3cfee

📥 Commits

Reviewing files that changed from the base of the PR and between 6640aab and 0f9edf5.

📒 Files selected for processing (16)
  • apps/client/src/domains/market/market-products/MarketProductsPage.test.tsx
  • apps/client/src/domains/market/market-products/fixtures/market-products.fixture.ts
  • apps/client/src/domains/market/market-products/sections/EventDiscountProductsSection.tsx
  • apps/client/src/domains/market/market-products/sections/MarketOverviewSection.tsx
  • apps/market-owner/src/domains/leaflet/share/LeafletSharePage.spec.md
  • apps/market-owner/src/domains/leaflet/share/LeafletSharePage.test.tsx
  • apps/market-owner/src/domains/leaflet/share/LeafletSharePage.tsx
  • apps/market-owner/src/domains/leaflet/share/api/get-periodic-preview.test.ts
  • apps/market-owner/src/domains/leaflet/share/components/LeafletSummaryCard.tsx
  • apps/market-owner/src/domains/leaflet/share/fixtures/leaflet-share.fixture.ts
  • apps/market-owner/src/domains/leaflet/share/model/leaflet-preview-view-model.ts
  • apps/market-owner/src/domains/leaflet/share/sections/LeafletConfirmSection.css.ts
  • apps/market-owner/src/domains/leaflet/share/sections/LeafletConfirmSection.tsx
  • packages/shared/src/components/product-card/ProductCard.test.tsx
  • packages/shared/src/components/product-card/ProductCard.tsx
  • packages/shared/src/components/product-card/ProductItem.tsx
💤 Files with no reviewable changes (1)
  • apps/client/src/domains/market/market-products/fixtures/market-products.fixture.ts

📝 Walkthrough

Summary by CodeRabbit

  • 새로운 기능
    • 전단 공유 화면에 주기적 전단 미리보기를 반영해 모바일에서 시장 정보와 상품 구성을 확인할 수 있습니다.
    • 미리보기 로딩/오류 상태, “다시 불러오기” 및 발행 후 공유/링크 전환 흐름을 지원합니다.
  • 버그 수정
    • 카테고리 영역 측정 기준 변경으로 표시 항목 수가 더 정확히 조정됩니다.
    • 영업시간 표기(요일/구간)와 영업 종료 시각 표시의 일관성/정확도가 개선됩니다.
    • 할인 배지가 PointChip 기반으로 더 일관된 디자인으로 표시됩니다.

Walkthrough

영업시간 기능을 shared 패키지로 통합하고 시장 화면의 사용처를 갱신했습니다. 전단 공유 화면에는 기간 미리보기 API, 뷰모델, 상태 처리와 데이터 기반 모바일 프리뷰를 추가했으며, 상품 할인 배지를 PointChip으로 변경했습니다.

Changes

시장 영업시간 및 카테고리 레이아웃

Layer / File(s) Summary
공유 영업시간 유틸리티
packages/shared/src/business-hours/*, packages/shared/src/index.ts, packages/shared/package.json
영업시간 타입과 요일·시간 포맷팅, 현재 종료 시각 계산 함수 및 테스트와 공개 export를 추가했습니다.
시장 화면의 shared 유틸리티 적용
apps/client/src/domains/market/market-products/fixtures/*, apps/client/src/domains/market/market-products/sections/*, apps/client/src/domains/market/market-products/utils/*, apps/client/src/domains/market/market-products/MarketProductsPage.test.tsx
시장 화면이 shared 영업시간 함수와 타입을 사용하도록 변경했습니다.
이벤트 카테고리 측정 대상 변경
apps/client/src/domains/market/market-products/hooks/*, apps/client/src/domains/market/market-products/sections/EventDiscountProductsSection.tsx
카테고리 레이아웃 측정과 ResizeObserver 대상을 기본 행으로 변경했습니다.

전단 미리보기 조회 및 렌더링

Layer / File(s) Summary
미리보기 API 계약과 조회 계층
apps/market-owner/src/domains/leaflet/share/api/*, apps/market-owner/src/domains/leaflet/share/query-*, apps/market-owner/src/domains/leaflet/share/hooks/*
기간 미리보기 API의 응답 검증, query 설정, hook과 테스트를 추가했습니다.
미리보기 뷰모델 변환
apps/market-owner/src/domains/leaflet/share/model/*, apps/market-owner/src/domains/leaflet/share/components/LeafletSummaryCard.tsx, apps/market-owner/src/domains/leaflet/share/fixtures/*
API 응답을 요약 카드와 전화 프리뷰용 뷰모델로 변환하는 타입과 함수를 추가했습니다.
페이지 조회 상태 연결
apps/market-owner/src/domains/leaflet/share/LeafletSharePage.tsx, apps/market-owner/src/domains/leaflet/share/sections/*
미리보기 로딩·오류·재시도·성공 상태를 페이지와 확인 섹션에 연결했습니다.
데이터 기반 모바일 프리뷰
apps/market-owner/src/domains/leaflet/share/components/PhonePreviewFrame*
마켓 정보, 영업시간, 상품 목록을 뷰모델에서 렌더링하도록 프리뷰와 스타일을 확장했습니다.
페이지 테스트와 사양 갱신
apps/market-owner/src/domains/leaflet/share/LeafletSharePage.test.tsx, apps/market-owner/src/domains/leaflet/share/LeafletSharePage.spec.md
미리보기 mock·marketId 호출·재페치 실패 검증과 전단 미리보기 관련 사양을 갱신했습니다.

상품 할인 배지 변경

Layer / File(s) Summary
PointChip 할인 배지 적용
packages/shared/src/components/product-card/*
조건부 할인 배지를 PointChip으로 변경하고 상품 표면별 크기, 접근성 라벨, 기존 배지 스타일과 문서를 정리했습니다.

Estimated code review effort: 4 (Complex) | ~60 minutes

Suggested labels: 소이

Suggested reviewers: navi-up

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed 제목이 FEAT 스코프, Jira 키, 작업 요약 형식을 모두 만족하며 변경 내용과도 잘 일치합니다.
Description check ✅ Passed 필수 섹션인 Related Issues, Background, Tasks, Implementation Notes, Verification, Evidence, PR Point, Screenshot, Risk / Follow-up가 모두 포함되어 있습니다.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Jul 15, 2026

Copy link
Copy Markdown

Client Web Storybook preview URL: https://6a4c88aec2c843ae77534861-degoxfzewh.chromatic.com/
Update time: 2026년 07월 16일 00시 30분 34초

@github-actions

github-actions Bot commented Jul 15, 2026

Copy link
Copy Markdown

Market Owner Web Storybook preview URL: https://6a4c877d560fcdcfebe6e6d8-woodrvdlnm.chromatic.com/
Update time: 2026년 07월 16일 00시 30분 23초

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 7

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@apps/client/src/domains/market/market-products/sections/MarketOverviewSection.tsx`:
- Around line 4-8: Update MarketOverviewSection to import BusinessHourTypes
directly from `@dongchimi/shared` alongside formatBusinessHour, and remove its
type import from market-products.fixture so the component no longer depends on
the fixture module.

In `@apps/market-owner/src/domains/leaflet/share/LeafletSharePage.test.tsx`:
- Around line 116-118: In the test around the initial render and “전단 공유하기”
interaction, move the mockedGetPeriodicPreview(12) assertion to immediately
after awaiting the UI rendered from the initial data fetch, before clicking the
button. Keep the button click and its related assertions separate so the test
does not imply the click triggers preview retrieval.

In `@apps/market-owner/src/domains/leaflet/share/LeafletSharePage.tsx`:
- Around line 170-174: LeafletSharePage의 미리보기 상태 전달을 실제 최초 로딩과 refetch 오류로
분리하세요. periodicPreviewQuery의 isPending 대신 isLoading 또는 fetchStatus를 사용해 최초 요청 중일
때만 isPreviewPending을 true로 설정하고, leafletPreview 데이터가 있으면 refetch 오류가 발생해도 미리보기를
유지하세요. 오류 상태와 onPreviewRetry는 데이터 유무와 독립적으로 별도 표시되도록 관련 props를 조정하세요.

In
`@apps/market-owner/src/domains/leaflet/share/model/leaflet-preview-view-model.ts`:
- Line 4: LeafletPreviewViewModel의 계약이 LeafletSummaryFixture에 의존하지 않도록 수정하세요. 해당
fixture 타입 import를 제거하고 모델 파일에 summary 전용 인터페이스를 선언한 뒤, LeafletPreviewViewModel이
이를 사용하게 하세요. LeafletSummaryFixture는 새 인터페이스를 구현하거나 호환되도록 변경해 fixture가 모델 계약을 따르는
의존 방향을 유지하세요.

In
`@apps/market-owner/src/domains/leaflet/share/sections/LeafletConfirmSection.css.ts`:
- Around line 37-43: Update the stateClassName style’s minHeight from 36rem to
61rem so the loading state reserves the same height as the mobile preview’s
completed content and prevents layout shift.

In `@packages/shared/src/components/product-card/ProductItem.tsx`:
- Around line 83-85: Update the product card’s parent button accessible name to
include the discount text from badgeLabel by incorporating it into
productButtonLabel; alternatively, if the discount is not required in the button
name, remove the redundant aria-label from PointChip. Ensure the discount
information is exposed through the button’s accessible label rather than relying
on PointChip aria-label.
- Around line 83-85: Update the PointChip usage in ProductItem so its size
follows the ProductCard desktop/mobile variant instead of always using
size='desktop'. Use the mobile size for mobile cards while preserving the
desktop size for desktop cards, reusing the existing variant or size policy
rather than introducing unrelated changes.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 66effb2e-0628-4328-b634-5a1c71ae1b3f

📥 Commits

Reviewing files that changed from the base of the PR and between 795cd33 and 12666ac.

⛔ Files ignored due to path filters (1)
  • packages/shared/src/components/product-card/assets/img-chip-point.webp is excluded by !**/*.webp and included by packages/**
📒 Files selected for processing (28)
  • apps/client/src/domains/market/market-products/MarketProductsPage.test.tsx
  • apps/client/src/domains/market/market-products/fixtures/market-products.fixture.ts
  • apps/client/src/domains/market/market-products/hooks/useEventDiscountCategoryLayout.ts
  • apps/client/src/domains/market/market-products/sections/EventDiscountProductsSection.tsx
  • apps/client/src/domains/market/market-products/sections/MarketOverviewSection.tsx
  • apps/client/src/domains/market/market-products/utils/market-actions.ts
  • apps/market-owner/src/domains/leaflet/share/LeafletSharePage.spec.md
  • apps/market-owner/src/domains/leaflet/share/LeafletSharePage.test.tsx
  • apps/market-owner/src/domains/leaflet/share/LeafletSharePage.tsx
  • apps/market-owner/src/domains/leaflet/share/api/get-periodic-preview.test.ts
  • apps/market-owner/src/domains/leaflet/share/api/get-periodic-preview.ts
  • apps/market-owner/src/domains/leaflet/share/api/index.ts
  • apps/market-owner/src/domains/leaflet/share/components/PhonePreviewFrame.css.ts
  • apps/market-owner/src/domains/leaflet/share/components/PhonePreviewFrame.tsx
  • apps/market-owner/src/domains/leaflet/share/hooks/index.ts
  • apps/market-owner/src/domains/leaflet/share/hooks/use-periodic-preview-query.ts
  • apps/market-owner/src/domains/leaflet/share/model/leaflet-preview-view-model.ts
  • apps/market-owner/src/domains/leaflet/share/query-keys.ts
  • apps/market-owner/src/domains/leaflet/share/query-options.ts
  • apps/market-owner/src/domains/leaflet/share/sections/LeafletConfirmSection.css.ts
  • apps/market-owner/src/domains/leaflet/share/sections/LeafletConfirmSection.tsx
  • packages/shared/src/business-hours/business-hours.test.ts
  • packages/shared/src/business-hours/business-hours.ts
  • packages/shared/src/business-hours/index.ts
  • packages/shared/src/components/product-card/ProductCard.css.ts
  • packages/shared/src/components/product-card/ProductCard.spec.md
  • packages/shared/src/components/product-card/ProductItem.tsx
  • packages/shared/src/index.ts
💤 Files with no reviewable changes (1)
  • packages/shared/src/components/product-card/ProductCard.css.ts

Comment thread apps/client/src/domains/market/market-products/sections/MarketOverviewSection.tsx Outdated
Comment thread apps/market-owner/src/domains/leaflet/share/LeafletSharePage.test.tsx Outdated
Comment thread apps/market-owner/src/domains/leaflet/share/LeafletSharePage.tsx
Comment thread apps/market-owner/src/domains/leaflet/share/model/leaflet-preview-view-model.ts Outdated
Comment thread packages/shared/src/components/product-card/ProductItem.tsx Outdated
@github-actions

github-actions Bot commented Jul 15, 2026

Copy link
Copy Markdown

Lighthouse Performance Report

측정이 완료되어 Lighthouse 요약을 남깁니다.

URL Perf A11y Best SEO FCP LCP CLS TBT Script Image
http://127.0.0.1:3000/login 77 95 100 100 2033ms 2293ms 0.000 0ms 230KB 0KB
http://127.0.0.1:5173/login 56 100 100 82 2105ms 7505ms 0.176 0ms 170KB 6551KB
  • 기준: lighthouserc.cjs
  • 결과: 4/28개 assertion이 warning 기준을 넘었습니다.
  • Artifact: lighthouse-report, .lighthouseci
  • Workflow: GitHub Actions run

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/market-owner/src/domains/leaflet/share/LeafletSharePage.spec.md`:
- Around line 10-13: Resolve the merge conflict in LeafletSharePage.spec.md by
removing the Git conflict markers and retaining the correct Jira entry,
including the intended issue keys from both conflicting versions where
applicable.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 256d6387-d14e-4316-9779-504d3d733569

📥 Commits

Reviewing files that changed from the base of the PR and between 12666ac and 6640aab.

📒 Files selected for processing (9)
  • apps/client/src/domains/market/market-products/MarketProductsPage.test.tsx
  • apps/client/src/domains/market/market-products/fixtures/market-products.fixture.ts
  • apps/client/src/domains/market/market-products/sections/MarketOverviewSection.tsx
  • apps/client/src/domains/market/market-products/utils/market-actions.ts
  • apps/market-owner/src/domains/leaflet/share/LeafletSharePage.spec.md
  • apps/market-owner/src/domains/leaflet/share/LeafletSharePage.test.tsx
  • apps/market-owner/src/domains/leaflet/share/LeafletSharePage.tsx
  • packages/shared/package.json
  • packages/shared/src/business-hours/business-hours.ts

Comment thread apps/market-owner/src/domains/leaflet/share/LeafletSharePage.spec.md Outdated

@Tnalxmsk Tnalxmsk left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

확인했습니다 고생했어요!

@chaewon41 chaewon41 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다!!

@Tnalxmsk
Tnalxmsk merged commit d22bfcb into develop Jul 15, 2026
13 of 15 checks passed
@Tnalxmsk
Tnalxmsk deleted the feat/apps-market-owner/DCMSM-77-periodic-flyer-preview-api branch July 15, 2026 16:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

FEAT 새로운 기능 구현 다경

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants