diff --git a/.github/workflows/pr-check.yml b/.github/workflows/pr-check.yml index 2f7bae8..15c172d 100644 --- a/.github/workflows/pr-check.yml +++ b/.github/workflows/pr-check.yml @@ -10,13 +10,16 @@ permissions: contents: read concurrency: - # PR push는 같은 PR의 이전 실행을 취소, main/develop push는 커밋별 독립 실행 + # PR push는 같은 PR의 이전 실행을 취소, main/develop push는 커밋별 독립 실행(기준 커버리지 아티팩트 유실 방지) group: ci-${{ github.event.pull_request.number || github.sha }} cancel-in-progress: ${{ github.event_name == 'pull_request' }} +env: + # test 잡 matrix.shard와 함께 바꾼다 — coverage-report가 blob 개수를 이 값과 대조한다 + SHARD_COUNT: 3 + jobs: - # 로컬 validate(pre-push)와 같은 순서. 보호된 check status라 --no-verify·훅 미설치를 우회하지 못한다 - check: + lint: runs-on: ubuntu-latest timeout-minutes: 10 steps: @@ -38,42 +41,103 @@ jobs: - name: Lint run: pnpm lint - - name: Type check - run: pnpm typecheck - - - name: Dead code / unused deps (knip) - run: pnpm knip + # build가 tsc -b를 돌리므로 별도 typecheck 단계는 두지 않는다 + static: + runs-on: ubuntu-latest + timeout-minutes: 10 + steps: + - name: Checkout + uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 - - name: Test with coverage - run: pnpm test:cov + - name: Setup pnpm + uses: pnpm/action-setup@ea17c68df8912ef543352723c149a84f56e3d413 # v6.1.0 - # CODECOV_TOKEN이 레포 시크릿에 있을 때만 올린다 — 등록 전에는 건너뛰고, 등록 뒤 실패는 CI 실패로 드러낸다 - - name: Upload coverage to Codecov - if: env.CODECOV_TOKEN != '' - env: - CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }} - uses: codecov/codecov-action@303a32d7a59b442fa8d48b6a1cc6825c09c847a5 # v7.1.1 + - name: Setup Node.js (24.x) & pnpm cache + uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 with: - token: ${{ secrets.CODECOV_TOKEN }} - files: ./coverage/lcov.info - disable_search: true - name: admin-fe-lcov - fail_ci_if_error: true + node-version: '24.x' + cache: 'pnpm' + + - name: Install dependencies + run: pnpm install --frozen-lockfile + + - name: Codegen freshness + run: pnpm codegen:check + + - name: Dead code / unused deps (knip) + run: pnpm knip - name: Build run: | pnpm build test -f dist/index.html - # PR 코멘트에 커버리지 표. check와 별도 잡이라 필수 체크 이름이 안정적이다 + # 샤드는 커버리지 일부만 가져 임계를 0으로 끈다. 임계는 coverage-report가 합친 결과로 검사한다 + test: + name: test (${{ matrix.shard }}/${{ strategy.job-total }}) + runs-on: ubuntu-latest + timeout-minutes: 10 + strategy: + fail-fast: false + matrix: + shard: [1, 2, 3] + steps: + - name: Checkout + uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + + - name: Setup pnpm + uses: pnpm/action-setup@ea17c68df8912ef543352723c149a84f56e3d413 # v6.1.0 + + - name: Setup Node.js (24.x) & pnpm cache + uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 + with: + node-version: '24.x' + cache: 'pnpm' + + - name: Install dependencies + run: pnpm install --frozen-lockfile + + - name: Test shard with coverage + env: + SHARD: ${{ matrix.shard }} + run: >- + pnpm exec vitest run --coverage --shard="$SHARD/$SHARD_COUNT" + --reporter=default --reporter=blob --outputFile.blob="blob-report/blob-$SHARD.json" + --coverage.thresholds.lines=0 --coverage.thresholds.functions=0 + --coverage.thresholds.branches=0 --coverage.thresholds.statements=0 + + # 기본 경로(.vitest/blob)는 숨김 폴더라 upload-artifact가 건너뛴다 + - name: Upload blob report + if: ${{ !cancelled() }} + uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1 + with: + name: blob-${{ matrix.shard }} + path: blob-report/ + # 실패한 샤드도 올리므로 재실행 때 같은 이름이 생긴다(덮어쓰지 않으면 업로드 실패로 빨간불이 이어짐) + overwrite: true + retention-days: 7 + if-no-files-found: error + + # 필수 체크라 always()로 돈다 — needs 실패로 건너뛰면(skipped) 통과로 잡힌다 coverage-report: - if: github.event_name == 'pull_request' + needs: test + if: always() runs-on: ubuntu-latest timeout-minutes: 10 permissions: contents: read pull-requests: write + actions: read steps: + - name: Require all test shards passed + env: + TEST_RESULT: ${{ needs.test.result }} + run: | + if [ "$TEST_RESULT" != "success" ]; then + echo "test 샤드 결과: $TEST_RESULT" + exit 1 + fi + - name: Checkout uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 @@ -89,12 +153,98 @@ jobs: - name: Install dependencies run: pnpm install --frozen-lockfile - - name: Test with coverage - run: pnpm test:cov + - name: Download blob reports + uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1 + with: + pattern: blob-* + merge-multiple: true + path: blob-report + + # 빠진 샤드가 있으면 부분 커버리지가 된다. 임계(vitest.config.ts)는 합친 결과에 적용된다 + - name: Merge shard reports (coverage thresholds) + run: | + count=$(find blob-report -name 'blob-*.json' | wc -l) + if [ "$count" -ne "$SHARD_COUNT" ]; then + echo "blob ${count}개, 기대 ${SHARD_COUNT}개" + exit 1 + fi + pnpm exec vitest run --merge-reports=blob-report --coverage + + # develop·main push의 요약이 이후 PR의 비교 기준이 된다. 업로드 실패가 배포를 막지 않게 둔다 + - name: Upload base coverage (push) + if: github.event_name == 'push' + continue-on-error: true + uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1 + with: + name: coverage-summary + path: | + coverage/coverage-summary.json + coverage/coverage-final.json + overwrite: true + retention-days: 90 + if-no-files-found: error + + # CODECOV_TOKEN이 레포 시크릿에 있을 때만 올린다 — 등록 전에는 건너뛰고, 등록 뒤 실패는 CI 실패로 드러낸다 + - name: Upload coverage to Codecov + if: env.CODECOV_TOKEN != '' + env: + CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }} + uses: codecov/codecov-action@303a32d7a59b442fa8d48b6a1cc6825c09c847a5 # v7.1.1 + with: + token: ${{ secrets.CODECOV_TOKEN }} + files: ./coverage/lcov.info + disable_search: true + name: admin-fe-lcov + fail_ci_if_error: true + + # 기준은 이 레포 base 브랜치의 성공한 push 실행만 쓴다(PR 실행 아티팩트는 믿지 않음). base 커밋 실행 우선, 그다음 최신 순으로 + # 아티팩트가 있는 실행을 최대 5개까지 찾는다. 임계 미달로 병합이 실패해도 요약이 있으면 댓글을 갱신한다 + - name: Fetch base coverage (PR) + id: base + if: ${{ !cancelled() && github.event_name == 'pull_request' && hashFiles('coverage/coverage-summary.json') != '' }} + continue-on-error: true + env: + GH_TOKEN: ${{ github.token }} + REPO: ${{ github.repository }} + BASE_REF: ${{ github.base_ref }} + BASE_SHA: ${{ github.event.pull_request.base.sha }} + run: | + run_ids=$(gh api "repos/$REPO/actions/workflows/pr-check.yml/runs?branch=$BASE_REF&event=push&status=success&per_page=50" \ + | jq -r --arg repo "$REPO" --arg ref "$BASE_REF" --arg sha "$BASE_SHA" ' + [.workflow_runs[] | select(.event == "push" and .head_branch == $ref and .head_repository.full_name == $repo)] + | (map(select(.head_sha == $sha)) + .) | map(.id) + | reduce .[] as $id ([]; if any(.[]; . == $id) then . else . + [$id] end) + | .[:5][]') + for run_id in $run_ids; do + if gh run download "$run_id" -R "$REPO" -n coverage-summary -D base-coverage \ + && [ -f base-coverage/coverage-summary.json ]; then + echo "기준 실행: $run_id" + echo "summary=base-coverage/coverage-summary.json" >> "$GITHUB_OUTPUT" + exit 0 + fi + done + echo "기준 아티팩트 없음 — 비교 없이 리포트" - - name: Coverage report (vitest) - if: always() + - name: Coverage report (PR comment) + if: ${{ !cancelled() && github.event_name == 'pull_request' && hashFiles('coverage/coverage-summary.json') != '' }} uses: davelosert/vitest-coverage-report-action@c4bbc33a89b7ace0e63d35f1f7d4bcee31155a73 # v2.13.0 + with: + json-summary-compare-path: ${{ steps.base.outputs.summary }} + + # 필수 체크 집계. 건너뜀·취소도 실패로 본다 — 보호된 status라 --no-verify·훅 미설치를 우회하지 못한다 + check: + if: always() + needs: [lint, static, test, coverage-report] + runs-on: ubuntu-latest + timeout-minutes: 5 + permissions: {} + steps: + - name: Require all jobs succeeded + env: + NEEDS: ${{ toJSON(needs) }} + run: | + echo "$NEEDS" | jq -r 'to_entries[] | "\(.key): \(.value.result)"' + echo "$NEEDS" | jq -e 'all(.[]; .result == "success")' > /dev/null pr-title: if: github.event_name == 'pull_request' diff --git a/.gitignore b/.gitignore index 96b739f..0c0cc11 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,9 @@ node_modules /dist /coverage +# vitest blob(기본 .vitest/blob, CI 샤드는 blob-report/) +.vitest/ +blob-report/ *.tsbuildinfo .pnpm-store diff --git a/.husky/pre-push b/.husky/pre-push index 56bd684..3f2eb5f 100755 --- a/.husky/pre-push +++ b/.husky/pre-push @@ -1,2 +1,2 @@ -# push 전 로컬 검증 — CI check와 같은 순서. --no-verify 금지 +# push 전 로컬 검증 — CI의 lint·static·test·coverage-report가 나눠 하는 검사를 한 번에. --no-verify 금지 pnpm validate diff --git a/README.md b/README.md index d2bc932..510b36b 100644 --- a/README.md +++ b/README.md @@ -33,12 +33,12 @@ pnpm dev # http://localhost:5173 — /graphql·/auth는 localhost:400 ## 명령어 -| 명령 | 내용 | -| ----------------------------- | --------------------------------------------------------------------------- | -| `pnpm validate` | lint → typecheck → knip → 테스트(커버리지) → 빌드. pre-push 훅과 동일합니다 | -| `pnpm test` / `pnpm test:cov` | Vitest | -| `pnpm lint` / `pnpm format` | ESLint(경계 규칙 포함) / Prettier | -| `pnpm build` / `pnpm preview` | 운영 빌드 / 로컬 미리보기 | +| 명령 | 내용 | +| ----------------------------- | ------------------------------------------------------------------------------------------- | +| `pnpm validate` | lint → typecheck → codegen:check → knip → 테스트(커버리지) → 빌드. pre-push 훅과 동일합니다 | +| `pnpm test` / `pnpm test:cov` | Vitest | +| `pnpm lint` / `pnpm format` | ESLint(경계 규칙 포함) / Prettier | +| `pnpm build` / `pnpm preview` | 운영 빌드 / 로컬 미리보기 | ## 배포 diff --git a/docs/guide/architecture-conventions.md b/docs/guide/architecture-conventions.md index 039fe81..249e2b0 100644 --- a/docs/guide/architecture-conventions.md +++ b/docs/guide/architecture-conventions.md @@ -67,7 +67,7 @@ src/ - `*.spec.ts(x)`를 소스 옆에. `it`은 한국어 평서형. - 네트워크는 MSW로 계약 기반 mock(응답 모양은 codegen 타입을 따른다). fetch를 직접 stub하지 않는다. -- 커버리지 임계는 `vitest.config.ts`. shadcn 복사본(`src/shared/ui`)·codegen 산출물·라우트 트리는 제외. +- 커버리지 임계는 `vitest.config.ts`. shadcn 복사본(`src/shared/ui`)·codegen 산출물·라우트 트리는 제외. CI는 샤드별 임계를 끄고 합친 결과로 검사한다(샤드 하나는 일부 커버리지만 가진다). ## 8. 명령어와 게이트 @@ -78,5 +78,10 @@ pnpm schema:pull [ref] # BE SDL 스냅샷 갱신(기본 main). BE_DIR=../caqui pnpm codegen # 스냅샷 + 문서 → src/graphql/generated (커밋 대상, CI가 codegen:check로 신선도 검사) ``` +- CI(`pr-check.yml`)는 잡을 나눠 병렬로 돈다. 필수 체크 `check`는 아래 잡이 모두 `success`인지 집계한다(건너뜀·취소도 실패). + - `lint` + - `static`: `codegen:check` → `knip` → `build`(`tsc -b` 포함이라 typecheck 단계는 따로 없다) + - `test`: Vitest 3샤드, 결과는 blob 아티팩트로 넘긴다 + - `coverage-report`: blob을 합쳐 임계 검사 → Codecov → PR 댓글. 비교 기준은 base 브랜치(develop·main) push 실행이 올린 커버리지 요약 - 커밋은 Conventional Commits + 한국어 본문(commitlint). 브랜치는 `/<대상>`. - PR 본문에 `## 플랜 대조` 표. 봇 리뷰(Codex·CodeRabbit)는 BE와 같은 절차로 처리한다. diff --git a/docs/guide/decisions.md b/docs/guide/decisions.md index a93b412..f5b6272 100644 --- a/docs/guide/decisions.md +++ b/docs/guide/decisions.md @@ -10,7 +10,7 @@ | D4 | 2026-09-27 | TanStack Query + graphql-request + graphql-codegen(client-preset) | 정규화 캐시 없이 invalidate로 충분한 CRUD 화면. 서버 진실 우선, 낙관적 업데이트 없음 | | D5 | 2026-09-27 | Tailwind v4 + shadcn/ui(new-york, neutral) + TanStack Table + react-hook-form + zod, 차트 Recharts | FE-v2와 같은 스타일 체계. 컴포넌트는 레포가 소유(`src/shared/ui`) | | D6 | 2026-09-27 | 디자인 토큰은 FE-v2 계승(primary #7c5cff 계열, gray 스케일, status 3색, radius 10px, Pretendard), 라이트/다크 | 서비스와 같은 브랜드 인상, 장시간 사용 도구라 다크 필요 | -| D7 | 2026-09-27 | Vitest + Testing Library + MSW. E2E 없음. 커버리지 lines/statements 80 · branches 70 · functions 80, Codecov patch 80 | 관리자 도구 범위에 맞는 비용. shadcn 복사본은 커버리지 제외 | +| D7 | 2026-09-27 | Vitest + Testing Library + MSW. E2E 없음. 커버리지 lines/statements 80 · branches 70 · functions 80(대체됨 → D16), Codecov patch 80 | 관리자 도구 범위에 맞는 비용. shadcn 복사본은 커버리지 제외 | | D8 | 2026-09-27 | 배포: 이 레포가 Dockerfile(nginx) · `infra/compose.yml` · `deploy.yml` 소유. GHCR `ghcr.io/caquick/caquick-admin-fe:`(arm64), 맥미니 셀프호스트 러너, BE compose 네트워크 `caquick_default`에 external 참여, 기존 cloudflared가 라우팅 | BE와 독립 배포·롤백. BE 레포 변경은 Tunnel 호스트 1줄 | | D9 | 2026-09-27 | 도메인 `admin.caquick.site` → 컨테이너 `caquick-admin:80`. API `https://api.caquick.site` | 같은 부모 도메인이라 refresh 쿠키가 same-site로 전송된다 — 쿠키 도메인 변경 불필요, BE는 CORS 오리진만 추가 | | D10 | 2026-09-27 | 인증: REST `/auth/admin/*`. accessToken은 메모리, refresh는 httpOnly 쿠키. 401이면 refresh 1회 후 재시도, 부팅 시 refresh로 복원, `mustChangePassword`면 변경 화면 강제 | 토큰을 localStorage에 두지 않는다(XSS 반경). 로컬은 Vite 프록시로 same-origin | @@ -19,3 +19,4 @@ | D13 | 2026-09-27 | BE SDL 스냅샷(`schema/schema.graphql`) 커밋 + `pnpm schema:pull`. CI는 codegen 신선도만 게이트, BE main과의 drift는 advisory | CI가 BE 체크아웃에 의존하지 않게 | | D14 | 2026-09-27 | 문서: `CLAUDE.md`·`.claude/`·`AGENTS.md`·`docs/*`(guide 제외)·`.figma/` gitignore. `docs/guide/`·README 커밋 | BE와 같은 방식 | | D15 | 2026-09-27 | 의존 방향은 ESLint boundaries로 강제(shared→features 금지, feature 간은 index.ts만). 검사기는 반증 케이스로 확인하고 넣는다 | BE `arch:check`와 같은 역할 | +| D16 | 2026-10-05 | 커버리지 임계를 실측 정수 내림으로 상향: statements 95 · branches 88 · functions 94 · lines 96. CI는 테스트를 3샤드로 나누고 coverage-report가 합친 결과로 검사 | 실측(95.54·88.07·94.29·96.07)보다 한참 낮은 임계는 회귀를 못 잡는다. 샤드 합산이 단일 실행과 같음을 확인 | diff --git a/schema/schema.graphql b/schema/schema.graphql index 342fd26..36852f3 100644 --- a/schema/schema.graphql +++ b/schema/schema.graphql @@ -1,4 +1,4 @@ -# 생성 파일 — 수정하지 않는다. caquick-be local@234063bf62d2bf40170c1b3bae454081977ce981 의 src/features/**/*.graphql 64개를 경로순으로 합쳤다. +# 생성 파일 — 수정하지 않는다. caquick-be local@746d6fa87c2438aeef9afd739885f33274e1f021 의 src/features/**/*.graphql 64개를 경로순으로 합쳤다. # 갱신: pnpm schema:pull [ref] # ---- src/features/audit-log/audit-log.types.graphql ---- @@ -3145,6 +3145,11 @@ type AdminBanner { """ linkCategoryId: ID """ + 링크 대상이 지금 노출 가능한지. 구매자 앱과 같은 기준(상품·매장·카테고리가 활성·미삭제, 상품은 소속 매장까지)이며, + false면 구매자 앱이 이 배너를 건너뛰고 다음 배너를 노출한다. linkType이 NONE·URL이면 항상 true. + """ + linkTargetAvailable: Boolean! + """ 노출 시작 일시. null이면 시작 제한 없음. """ startsAt: DateTime diff --git a/src/app/globals.css b/src/app/globals.css index ada87bb..569786a 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -139,7 +139,7 @@ --secondary: #26262f; --secondary-foreground: #f0f0f4; --muted: #26262f; - --muted-foreground: #85859a; + --muted-foreground: #8d8da2; --accent: #201f2c; --accent-foreground: #f0f0f4; --destructive: #ff7d80; diff --git a/src/app/globals.spec.ts b/src/app/globals.spec.ts index 77bf5f4..d740208 100644 --- a/src/app/globals.spec.ts +++ b/src/app/globals.spec.ts @@ -31,6 +31,12 @@ describe('디자인 토큰 대비', () => { [':root', 'popover'], ['.dark', 'background'], ['.dark', 'card'], + ['.dark', 'popover'], + ['.dark', 'muted'], + ['.dark', 'secondary'], + ['.dark', 'accent'], + ['.dark', 'surface-tint'], + ['.dark', 'sidebar'], ] as const)('%s 보조 텍스트는 %s 위에서 4.5:1 이상이다', (selector, surface) => { const t = tokens(selector); expect(t['muted-foreground']).toBeDefined(); diff --git a/src/features/banners/api/queries.ts b/src/features/banners/api/queries.ts index 1770785..a9f459b 100644 --- a/src/features/banners/api/queries.ts +++ b/src/features/banners/api/queries.ts @@ -39,6 +39,7 @@ const AdminBannersDocument = graphql(/* GraphQL */ ` linkProductId linkStoreId linkCategoryId + linkTargetAvailable startsAt endsAt sortOrder @@ -101,6 +102,7 @@ const AdminBannersVisibleDocument = graphql(/* GraphQL */ ` id placement linkCategoryId + linkTargetAvailable startsAt endsAt sortOrder diff --git a/src/features/banners/live-status.spec.ts b/src/features/banners/live-status.spec.ts index 806b40e..7db41a0 100644 --- a/src/features/banners/live-status.spec.ts +++ b/src/features/banners/live-status.spec.ts @@ -5,7 +5,13 @@ const BEFORE = '2026-09-30T23:59:59.999Z'; const AFTER = '2026-10-01T00:00:00.001Z'; describe('배너 현재 노출', () => { - const live = { isActive: true, startsAt: null, endsAt: null, linkCategoryId: null }; + const live = { + isActive: true, + startsAt: null, + endsAt: null, + linkCategoryId: null, + linkTargetAvailable: true, + }; it.each([ { name: '슬롯마다 정렬 순서가 가장 작은 것', @@ -34,6 +40,14 @@ describe('배너 현재 노출', () => { ], want: ['4'], }, + { + name: '링크 대상이 숨김이면 구매자 앱처럼 건너뛰고 다음 배너', + banners: [ + { ...live, id: '1', placement: 'HOME_MAIN', sortOrder: 0, linkTargetAvailable: false }, + { ...live, id: '2', placement: 'HOME_MAIN', sortOrder: 1 }, + ], + want: ['2'], + }, { name: '카테고리 배치는 카테고리마다 따로 고른다', banners: [ diff --git a/src/features/banners/live-status.ts b/src/features/banners/live-status.ts index 381ab02..60ed6da 100644 --- a/src/features/banners/live-status.ts +++ b/src/features/banners/live-status.ts @@ -5,6 +5,7 @@ interface SlotBanner extends Timed { id: string; placement: BannerPlacement; linkCategoryId?: string | null; + linkTargetAvailable: boolean; sortOrder: number; } @@ -26,13 +27,13 @@ const byId = (a: string, b: string) => /** * 슬롯마다 지금 구매자에게 보이는 배너 1개의 ID. 노출 중인 것 가운데 정렬 순서가 가장 작고, 같으면 먼저 등록한(ID가 작은) 것. - * 연결한 상품·매장·카테고리가 숨김이면 구매자 앱은 다음 배너로 넘어가는데, 이 목록은 그 상태를 모른다. + * 연결한 상품·매장·카테고리가 숨김이면(linkTargetAvailable=false) 구매자 앱처럼 건너뛰고 다음 배너를 고른다. */ export function currentBannerIds(banners: readonly SlotBanner[], now: Date): Set { const winners = new Map(); for (const b of banners) { const key = slotKey(b); - if (key === null || liveStatus(b, now) !== 'LIVE') continue; + if (key === null || !b.linkTargetAvailable || liveStatus(b, now) !== 'LIVE') continue; const cur = winners.get(key); if ( !cur || diff --git a/src/features/banners/pages/banners-list-page.tsx b/src/features/banners/pages/banners-list-page.tsx index 52075fe..b3d6499 100644 --- a/src/features/banners/pages/banners-list-page.tsx +++ b/src/features/banners/pages/banners-list-page.tsx @@ -87,6 +87,9 @@ export function BannersListPage({ search, onSearchChange }: Props) { {s.label} {current.has(row.original.id) && 현재 노출} + {!row.original.linkTargetAvailable && ( + 링크 대상 숨김 + )} ); }, @@ -142,7 +145,7 @@ export function BannersListPage({ search, onSearchChange }: Props) { <> diff --git a/src/features/banners/pages/banners.spec.tsx b/src/features/banners/pages/banners.spec.tsx index 75e8cac..f3e76c3 100644 --- a/src/features/banners/pages/banners.spec.tsx +++ b/src/features/banners/pages/banners.spec.tsx @@ -27,6 +27,7 @@ const banner = { linkProductId: null, linkStoreId: null, linkCategoryId: null, + linkTargetAvailable: true, startsAt: null, endsAt: null, sortOrder: 0, @@ -117,6 +118,35 @@ describe('배너', () => { await vi.waitFor(() => expect(deleted).toEqual({ bannerId: '5' })); }); + it('목록: 링크 대상이 숨김인 배너는 현재 노출에서 건너뛰고 링크 대상 숨김으로 표시한다', async () => { + const rows = [ + { + ...banner, + id: '5', + title: '대상 숨김', + linkType: 'PRODUCT', + linkProductId: '3', + linkTargetAvailable: false, + }, + { ...banner, id: '6', title: '다음 배너', sortOrder: 1 }, + ]; + server.use( + gqlOk('AdminBanners', { + adminBanners: { items: rows, totalCount: 2, hasMore: false, nextCursor: null }, + }), + gqlOk('AdminBannersVisible', { + adminBanners: { items: rows, hasMore: false, nextCursor: null }, + }), + ); + boot('/banners'); + const statusOf = async (title: string) => + within((await screen.findByRole('link', { name: title })).closest('tr')!).getAllByRole( + 'cell', + )[2]!.textContent; + await vi.waitFor(async () => expect(await statusOf('다음 배너')).toBe('노출 중현재 노출')); + expect(await statusOf('대상 숨김')).toBe('노출 중링크 대상 숨김'); + }); + it('목록을 켜 둔 채 시작 시각이 되면 예약이 노출 중·현재 노출로 바뀐다', async () => { // 실제 시간도 흐르게 둬 부팅·요청은 그대로 진행되고, 시작 시각만 앞당겨 넘긴다 vi.useFakeTimers({ shouldAdvanceTime: true }); diff --git a/src/graphql/generated/gql.ts b/src/graphql/generated/gql.ts index af13946..c8019d1 100644 --- a/src/graphql/generated/gql.ts +++ b/src/graphql/generated/gql.ts @@ -26,12 +26,12 @@ type Documents = { "\n query AdminAuditLogs($input: AdminAuditLogListInput) {\n adminAuditLogs(input: $input) {\n items {\n id\n actorAccountId\n actorAccountType\n actorLabel\n storeId\n targetType\n targetId\n action\n beforeJson\n afterJson\n ipAddress\n userAgent\n createdAt\n }\n totalCount\n hasMore\n nextCursor\n }\n }\n": typeof types.AdminAuditLogsDocument, "\n query AdminAuditStorePicker($input: AdminStoreListInput) {\n adminStores(input: $input) {\n items {\n id\n storeName\n isActive\n }\n }\n }\n": typeof types.AdminAuditStorePickerDocument, "\n query AdminAuditActorPicker($sellers: AdminSellerListInput, $admins: CursorInput) {\n adminSellers(input: $sellers) {\n items {\n accountId\n username\n name\n }\n }\n adminAdmins(input: $admins) {\n items {\n accountId\n username\n name\n }\n }\n }\n": typeof types.AdminAuditActorPickerDocument, - "\n query AdminBanners($input: AdminBannerListInput) {\n adminBanners(input: $input) {\n items {\n id\n placement\n title\n imageUrl\n linkType\n linkUrl\n linkProductId\n linkStoreId\n linkCategoryId\n startsAt\n endsAt\n sortOrder\n isActive\n createdAt\n updatedAt\n }\n totalCount\n hasMore\n nextCursor\n }\n }\n": typeof types.AdminBannersDocument, + "\n query AdminBanners($input: AdminBannerListInput) {\n adminBanners(input: $input) {\n items {\n id\n placement\n title\n imageUrl\n linkType\n linkUrl\n linkProductId\n linkStoreId\n linkCategoryId\n linkTargetAvailable\n startsAt\n endsAt\n sortOrder\n isActive\n createdAt\n updatedAt\n }\n totalCount\n hasMore\n nextCursor\n }\n }\n": typeof types.AdminBannersDocument, "\n query AdminBanner($bannerId: ID!) {\n adminBanner(bannerId: $bannerId) {\n id\n placement\n title\n imageUrl\n linkType\n linkUrl\n linkProductId\n linkStoreId\n linkCategoryId\n startsAt\n endsAt\n sortOrder\n isActive\n createdAt\n updatedAt\n }\n }\n": typeof types.AdminBannerDocument, "\n mutation AdminCreateBanner($input: AdminCreateBannerInput!) {\n adminCreateBanner(input: $input) {\n id\n }\n }\n": typeof types.AdminCreateBannerDocument, "\n mutation AdminUpdateBanner($input: AdminUpdateBannerInput!) {\n adminUpdateBanner(input: $input) {\n id\n updatedAt\n }\n }\n": typeof types.AdminUpdateBannerDocument, "\n mutation AdminDeleteBanner($bannerId: ID!) {\n adminDeleteBanner(bannerId: $bannerId)\n }\n": typeof types.AdminDeleteBannerDocument, - "\n query AdminBannersVisible($input: AdminBannerListInput) {\n adminBanners(input: $input) {\n items {\n id\n placement\n linkCategoryId\n startsAt\n endsAt\n sortOrder\n isActive\n }\n hasMore\n nextCursor\n }\n }\n": typeof types.AdminBannersVisibleDocument, + "\n query AdminBannersVisible($input: AdminBannerListInput) {\n adminBanners(input: $input) {\n items {\n id\n placement\n linkCategoryId\n linkTargetAvailable\n startsAt\n endsAt\n sortOrder\n isActive\n }\n hasMore\n nextCursor\n }\n }\n": typeof types.AdminBannersVisibleDocument, "\n query AdminBannerProductOptions($input: AdminProductListInput) {\n adminProducts(input: $input) {\n items {\n id\n name\n storeName\n storeIsActive\n }\n }\n }\n": typeof types.AdminBannerProductOptionsDocument, "\n query AdminBannerStoreOptions($input: AdminStoreListInput) {\n adminStores(input: $input) {\n items {\n id\n storeName\n }\n }\n }\n": typeof types.AdminBannerStoreOptionsDocument, "\n query AdminBannerCategoryOptions($input: AdminCategoryListInput) {\n adminCategories(input: $input) {\n id\n name\n isActive\n }\n }\n": typeof types.AdminBannerCategoryOptionsDocument, @@ -104,12 +104,12 @@ const documents: Documents = { "\n query AdminAuditLogs($input: AdminAuditLogListInput) {\n adminAuditLogs(input: $input) {\n items {\n id\n actorAccountId\n actorAccountType\n actorLabel\n storeId\n targetType\n targetId\n action\n beforeJson\n afterJson\n ipAddress\n userAgent\n createdAt\n }\n totalCount\n hasMore\n nextCursor\n }\n }\n": types.AdminAuditLogsDocument, "\n query AdminAuditStorePicker($input: AdminStoreListInput) {\n adminStores(input: $input) {\n items {\n id\n storeName\n isActive\n }\n }\n }\n": types.AdminAuditStorePickerDocument, "\n query AdminAuditActorPicker($sellers: AdminSellerListInput, $admins: CursorInput) {\n adminSellers(input: $sellers) {\n items {\n accountId\n username\n name\n }\n }\n adminAdmins(input: $admins) {\n items {\n accountId\n username\n name\n }\n }\n }\n": types.AdminAuditActorPickerDocument, - "\n query AdminBanners($input: AdminBannerListInput) {\n adminBanners(input: $input) {\n items {\n id\n placement\n title\n imageUrl\n linkType\n linkUrl\n linkProductId\n linkStoreId\n linkCategoryId\n startsAt\n endsAt\n sortOrder\n isActive\n createdAt\n updatedAt\n }\n totalCount\n hasMore\n nextCursor\n }\n }\n": types.AdminBannersDocument, + "\n query AdminBanners($input: AdminBannerListInput) {\n adminBanners(input: $input) {\n items {\n id\n placement\n title\n imageUrl\n linkType\n linkUrl\n linkProductId\n linkStoreId\n linkCategoryId\n linkTargetAvailable\n startsAt\n endsAt\n sortOrder\n isActive\n createdAt\n updatedAt\n }\n totalCount\n hasMore\n nextCursor\n }\n }\n": types.AdminBannersDocument, "\n query AdminBanner($bannerId: ID!) {\n adminBanner(bannerId: $bannerId) {\n id\n placement\n title\n imageUrl\n linkType\n linkUrl\n linkProductId\n linkStoreId\n linkCategoryId\n startsAt\n endsAt\n sortOrder\n isActive\n createdAt\n updatedAt\n }\n }\n": types.AdminBannerDocument, "\n mutation AdminCreateBanner($input: AdminCreateBannerInput!) {\n adminCreateBanner(input: $input) {\n id\n }\n }\n": types.AdminCreateBannerDocument, "\n mutation AdminUpdateBanner($input: AdminUpdateBannerInput!) {\n adminUpdateBanner(input: $input) {\n id\n updatedAt\n }\n }\n": types.AdminUpdateBannerDocument, "\n mutation AdminDeleteBanner($bannerId: ID!) {\n adminDeleteBanner(bannerId: $bannerId)\n }\n": types.AdminDeleteBannerDocument, - "\n query AdminBannersVisible($input: AdminBannerListInput) {\n adminBanners(input: $input) {\n items {\n id\n placement\n linkCategoryId\n startsAt\n endsAt\n sortOrder\n isActive\n }\n hasMore\n nextCursor\n }\n }\n": types.AdminBannersVisibleDocument, + "\n query AdminBannersVisible($input: AdminBannerListInput) {\n adminBanners(input: $input) {\n items {\n id\n placement\n linkCategoryId\n linkTargetAvailable\n startsAt\n endsAt\n sortOrder\n isActive\n }\n hasMore\n nextCursor\n }\n }\n": types.AdminBannersVisibleDocument, "\n query AdminBannerProductOptions($input: AdminProductListInput) {\n adminProducts(input: $input) {\n items {\n id\n name\n storeName\n storeIsActive\n }\n }\n }\n": types.AdminBannerProductOptionsDocument, "\n query AdminBannerStoreOptions($input: AdminStoreListInput) {\n adminStores(input: $input) {\n items {\n id\n storeName\n }\n }\n }\n": types.AdminBannerStoreOptionsDocument, "\n query AdminBannerCategoryOptions($input: AdminCategoryListInput) {\n adminCategories(input: $input) {\n id\n name\n isActive\n }\n }\n": types.AdminBannerCategoryOptionsDocument, @@ -218,7 +218,7 @@ export function graphql(source: "\n query AdminAuditActorPicker($sellers: Admin /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ -export function graphql(source: "\n query AdminBanners($input: AdminBannerListInput) {\n adminBanners(input: $input) {\n items {\n id\n placement\n title\n imageUrl\n linkType\n linkUrl\n linkProductId\n linkStoreId\n linkCategoryId\n startsAt\n endsAt\n sortOrder\n isActive\n createdAt\n updatedAt\n }\n totalCount\n hasMore\n nextCursor\n }\n }\n"): typeof import('./graphql').AdminBannersDocument; +export function graphql(source: "\n query AdminBanners($input: AdminBannerListInput) {\n adminBanners(input: $input) {\n items {\n id\n placement\n title\n imageUrl\n linkType\n linkUrl\n linkProductId\n linkStoreId\n linkCategoryId\n linkTargetAvailable\n startsAt\n endsAt\n sortOrder\n isActive\n createdAt\n updatedAt\n }\n totalCount\n hasMore\n nextCursor\n }\n }\n"): typeof import('./graphql').AdminBannersDocument; /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ @@ -238,7 +238,7 @@ export function graphql(source: "\n mutation AdminDeleteBanner($bannerId: ID!) /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ -export function graphql(source: "\n query AdminBannersVisible($input: AdminBannerListInput) {\n adminBanners(input: $input) {\n items {\n id\n placement\n linkCategoryId\n startsAt\n endsAt\n sortOrder\n isActive\n }\n hasMore\n nextCursor\n }\n }\n"): typeof import('./graphql').AdminBannersVisibleDocument; +export function graphql(source: "\n query AdminBannersVisible($input: AdminBannerListInput) {\n adminBanners(input: $input) {\n items {\n id\n placement\n linkCategoryId\n linkTargetAvailable\n startsAt\n endsAt\n sortOrder\n isActive\n }\n hasMore\n nextCursor\n }\n }\n"): typeof import('./graphql').AdminBannersVisibleDocument; /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ diff --git a/src/graphql/generated/graphql.ts b/src/graphql/generated/graphql.ts index 655c38b..3306926 100644 --- a/src/graphql/generated/graphql.ts +++ b/src/graphql/generated/graphql.ts @@ -873,7 +873,7 @@ export type AdminBannersQueryVariables = Exact<{ }>; -export type AdminBannersQuery = { adminBanners: { totalCount: number, hasMore: boolean, nextCursor: string | null, items: Array<{ id: string, placement: BannerPlacement, title: string | null, imageUrl: string, linkType: BannerLinkType, linkUrl: string | null, linkProductId: string | null, linkStoreId: string | null, linkCategoryId: string | null, startsAt: string | null, endsAt: string | null, sortOrder: number, isActive: boolean, createdAt: string, updatedAt: string }> } }; +export type AdminBannersQuery = { adminBanners: { totalCount: number, hasMore: boolean, nextCursor: string | null, items: Array<{ id: string, placement: BannerPlacement, title: string | null, imageUrl: string, linkType: BannerLinkType, linkUrl: string | null, linkProductId: string | null, linkStoreId: string | null, linkCategoryId: string | null, linkTargetAvailable: boolean, startsAt: string | null, endsAt: string | null, sortOrder: number, isActive: boolean, createdAt: string, updatedAt: string }> } }; export type AdminBannerQueryVariables = Exact<{ bannerId: string | number; @@ -908,7 +908,7 @@ export type AdminBannersVisibleQueryVariables = Exact<{ }>; -export type AdminBannersVisibleQuery = { adminBanners: { hasMore: boolean, nextCursor: string | null, items: Array<{ id: string, placement: BannerPlacement, linkCategoryId: string | null, startsAt: string | null, endsAt: string | null, sortOrder: number, isActive: boolean }> } }; +export type AdminBannersVisibleQuery = { adminBanners: { hasMore: boolean, nextCursor: string | null, items: Array<{ id: string, placement: BannerPlacement, linkCategoryId: string | null, linkTargetAvailable: boolean, startsAt: string | null, endsAt: string | null, sortOrder: number, isActive: boolean }> } }; export type AdminBannerProductOptionsQueryVariables = Exact<{ input?: AdminProductListInput | null | undefined; @@ -1507,6 +1507,7 @@ export const AdminBannersDocument = new TypedDocumentString(` linkProductId linkStoreId linkCategoryId + linkTargetAvailable startsAt endsAt sortOrder @@ -1568,6 +1569,7 @@ export const AdminBannersVisibleDocument = new TypedDocumentString(` id placement linkCategoryId + linkTargetAvailable startsAt endsAt sortOrder diff --git a/src/main.spec.ts b/src/main.spec.ts new file mode 100644 index 0000000..61e73ee --- /dev/null +++ b/src/main.spec.ts @@ -0,0 +1,33 @@ +import { z } from 'zod'; + +import { installZodKorean } from '@/shared/lib/zod-locale'; + +const { createRoot, render } = vi.hoisted(() => { + const render = vi.fn(); + return { render, createRoot: vi.fn(() => ({ render })) }; +}); +vi.mock('react-dom/client', () => ({ createRoot })); + +const emptyMessage = () => z.string().min(1).safeParse('').error?.issues[0]?.message; + +/** 테스트 setup도 한국어 문구를 설치하므로, main.tsx에서 설치가 빠져도 다른 spec은 모른다. */ +describe('앱 부팅(main.tsx)', () => { + afterEach(() => { + installZodKorean(); + document.getElementById('root')?.remove(); + }); + + it('zod 한국어 문구를 설치하고 #root에 앱을 한 번 렌더한다', async () => { + z.config({ ...z.locales.en(), customError: undefined }); + expect(emptyMessage()).not.toBe('값을 입력해 주세요.'); + const root = document.createElement('div'); + root.id = 'root'; + document.body.append(root); + + await import('./main'); + + expect(emptyMessage()).toBe('값을 입력해 주세요.'); + expect(createRoot).toHaveBeenCalledWith(root); + expect(render).toHaveBeenCalledTimes(1); + }); +}); diff --git a/src/shared/lib/list-return.ts b/src/shared/lib/list-return.ts index c8d03f4..534cf53 100644 --- a/src/shared/lib/list-return.ts +++ b/src/shared/lib/list-return.ts @@ -7,20 +7,43 @@ const MAX_PATHS = 50; const normalize = (pathname: string) => pathname.length > 1 ? pathname.replace(/\/+$/, '') : pathname; -export function rememberSearch(pathname: string, search: Record) { +/** CursorPager가 지나온 커서. 목록으로 돌아와 다시 마운트돼도 '이전'과 구간 표시를 되살린다 */ +export interface CursorTrail { + /** 커서를 뺀 목록 조건 */ + filterKey: string; + /** 지나온 커서 순서. undefined는 첫 페이지 */ + cursors: (string | undefined)[]; +} +const lastTrail = new Map(); + +function remember(map: Map, pathname: string, value: T) { const key = normalize(pathname); - lastSearch.delete(key); - lastSearch.set(key, search); + map.delete(key); + map.set(key, value); // 상세 경로는 ID마다 쌓이므로 오래된 것부터 버린다 - if (lastSearch.size > MAX_PATHS) lastSearch.delete(lastSearch.keys().next().value!); + if (map.size > MAX_PATHS) map.delete(map.keys().next().value!); +} + +export function rememberSearch(pathname: string, search: Record) { + remember(lastSearch, pathname, search); } export function rememberedSearch(pathname: string): Record | undefined { return lastSearch.get(normalize(pathname)); } +export function rememberTrail(pathname: string, trail: CursorTrail) { + remember(lastTrail, pathname, trail); +} + +export function rememberedTrail(pathname: string): CursorTrail | undefined { + return lastTrail.get(normalize(pathname)); +} + +/** 세션을 잃으면 기억한 검색 파라미터·커서를 모두 비운다 */ export function forgetSearches() { lastSearch.clear(); + lastTrail.clear(); } /** 라우터 이동이 끝날 때마다 위치를 기록한다. 반환값은 구독 해제 함수. */ diff --git a/src/shared/ui/cursor-pager.spec.tsx b/src/shared/ui/cursor-pager.spec.tsx index dcec04c..2052725 100644 --- a/src/shared/ui/cursor-pager.spec.tsx +++ b/src/shared/ui/cursor-pager.spec.tsx @@ -1,7 +1,17 @@ +import { + Outlet, + RouterProvider, + createMemoryHistory, + createRootRoute, + createRoute, + createRouter, +} from '@tanstack/react-router'; import { act, render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { useEffect, useState } from 'react'; +import { forgetSearches } from '@/shared/lib/list-return'; + import { CursorPager } from './cursor-pager'; const TOTAL = 45; @@ -44,6 +54,23 @@ function Harness({ initial = {} }: { initial?: Search }) { const button = (name: string) => screen.queryByRole('button', { name }); +/** 목록 화면처럼 라우터 아래 경로에 붙여 렌더한다. 검색 파라미터는 Harness가 들고 있다 */ +function renderAt(pathname: string, initial: Search = {}) { + const root = createRootRoute({ component: Outlet }); + const routes = ['/stores', '/orders'].map((path) => + createRoute({ + getParentRoute: () => root, + path, + component: () => , + }), + ); + const router = createRouter({ + routeTree: root.addChildren(routes), + history: createMemoryHistory({ initialEntries: [pathname] }), + }); + return render(); +} + describe('CursorPager', () => { it('다음으로 가며 지나온 커서를 쌓고, 이전으로 한 페이지씩 돌아온다', async () => { render(); @@ -130,6 +157,46 @@ describe('CursorPager', () => { expect(screen.getByText('21–30 / 전체 45건')).toBeInTheDocument(); }); + describe('목록으로 돌아와 다시 마운트될 때', () => { + afterEach(() => forgetSearches()); + + /** 첫 페이지부터 두 번 다음으로 가 41–45 구간에서 화면을 떠난다 */ + async function leaveAtThirdPage() { + const { unmount } = renderAt('/stores'); + await userEvent.click(await screen.findByRole('button', { name: '다음' })); + await userEvent.click(button('다음')!); + expect(screen.getByText('41–45 / 전체 45건')).toBeInTheDocument(); + unmount(); + } + + it('같은 경로·목록 조건이고 그 커서를 지나왔으면 이전과 구간을 되살린다', async () => { + await leaveAtThirdPage(); + renderAt('/stores', { cursor: 'c40' }); + expect(await screen.findByText('41–45 / 전체 45건')).toBeInTheDocument(); + await userEvent.click(button('이전')!); + expect(screen.getByText('21–40 / 전체 45건')).toBeInTheDocument(); + }); + + it.each<[string, string, Search]>([ + ['경로가 다르면', '/orders', { cursor: 'c40' }], + ['목록 조건이 다르면', '/stores', { cursor: 'c40', q: '케이크' }], + ['지나오지 않은 커서면', '/stores', { cursor: 'c30' }], + ])('%s 되살리지 않는다', async (_, pathname, initial) => { + await leaveAtThirdPage(); + renderAt(pathname, initial); + expect(await screen.findByRole('button', { name: '처음' })).toBeInTheDocument(); + expect(button('이전')).not.toBeInTheDocument(); + }); + + it('세션을 비우면(forgetSearches) 되살리지 않는다', async () => { + await leaveAtThirdPage(); + forgetSearches(); + renderAt('/stores', { cursor: 'c40' }); + expect(await screen.findByText('전체 45건 중 5건 표시')).toBeInTheDocument(); + expect(button('이전')).not.toBeInTheDocument(); + }); + }); + it('결과가 없으면 0건으로 보인다', () => { render( ({ filterKey, cursors: [cursor] }); + // 라우터 밖(단독 렌더)이면 경로가 없어 기억하지 않는다. 경로는 목록 화면마다 고정이라 마운트 때 한 번 읽는다 + const router: AnyRouter | null = useRouter({ warn: false }); + const [pathname] = useState(() => router?.state.location.pathname); + // 기억한 것이 다른 조건이거나 지금 커서를 지나오지 않았으면 아래 보정이 새로 쌓는다 + const [trail, setTrail] = useState(() => { + const saved = pathname === undefined ? undefined : rememberedTrail(pathname); + return saved ?? { filterKey, cursors: [cursor] }; + }); + useEffect(() => { + if (pathname !== undefined) rememberTrail(pathname, trail); + }, [pathname, trail]); let current = trail; if (trail.filterKey !== filterKey || !trail.cursors.includes(cursor)) { diff --git a/vitest.config.ts b/vitest.config.ts index 77638ee..68098c5 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -29,7 +29,8 @@ export default defineConfig({ 'src/main.tsx', 'src/**/*.d.ts', ], - thresholds: { lines: 80, statements: 80, branches: 70, functions: 80 }, + // 실측(샤드 합산 = 단일 실행)의 정수 내림. CI는 coverage-report가 합친 결과로 검사한다 + thresholds: { lines: 96, statements: 95, branches: 88, functions: 94 }, }, }, });