20260114 #127 장바구니 메뉴 최대 개수 기획 변경에 따른 기능 수정

[Chuseok22]

✨ 변경 사항

---

✅ 테스트

---

• 수동 테스트 완료
• 테스트 코드 완료

Summary by CodeRabbit

릴리스 노트

• 기능 개선
  • 장바구니 수량 제한 정책을 변경했습니다. 이전에는 장바구니 전체에 최대 9개까지만 담을 수 있었으나, 이제 각 메뉴별로 최대 9개까지 담을 수 있습니다.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

번호 아이콘 18개를 인덱스에서 제거하고, 신규 RoundedNumber 컴포넌트로 통합하며, CartButton과 OrderSummaryBar의 itemCount 프롭을 quantity로 변경하고, 카트 수량 제한을 전체 수량에서 메뉴별 최대 9개로 변경했습니다.

Changes

코호트 / 파일(들)	변경 요약
아이콘 내보내기 정리 src/assets/icons/index.ts	RoundedNumber1-9 및 RoundedNumber1-9Filled 18개 export 제거
RoundedNumber 컴포넌트 신규 추가 src/shared/components/number/RoundedNumber.tsx, src/shared/components/number/RoundedNumber.module.css	동적 숫자 표시를 위한 새 컴포넌트 및 스타일 추가 (number, filled props 지원)
CartButton 리팩토링 src/features/menu/components/button/CartButton.tsx	개별 SVG import를 RoundedNumber 컴포넌트로 통합; itemCount → quantity로 변경; ItemCount 타입 및 IconMap 제거
프롭 이름 정규화 src/features/menu/components/bar/OrderSummaryBar.tsx, src/features/menu/components/MenuPageContainer.tsx	itemCount → quantity로 프롭 이름 변경하여 컴포넌트 간 일관성 개선
카트 수량 제한 로직 변경 src/features/cart/hooks/useCart.ts	전체 카트 최대 9개 제한에서 메뉴당 최대 9개 제한으로 변경; 에러 메시지 업데이트

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related issues

• 🚀 [기능개선][장바구니] 장바구니 메뉴 최대 개수 기획 변경에 따른 기능 수정 #127: 카트 메뉴별 최대 9개 수량 제한 변경 사항이 정확히 일치하여 직접 관련됨

Possibly related PRs

• Test #62: 같은 파일 src/assets/icons/index.ts에서 RoundedNumber1-9(Filled) 18개 export를 추가한 PR로, 이번 PR와 반대 방향의 변경
• 20251124 #59 수량 넘버링 컴포넌트 개발 #61: 동일한 18개의 RoundedNumber export를 추가한 PR로, 이번 PR와 반대 방향의 변경
• 20251124 #65 주문 bar 컴포넌트 개발 #66: CartButton과 OrderSummaryBar의 itemCount/quantity API 변경 관련으로 같은 컴포넌트들을 수정

Poem

🐰 번호 아이콘은 하나로 모여,
RoundedNumber 품 안에서 춤을 춘다네.
메뉴마다 아홉 개, 제한이 명확해,
카트는 더욱 똑똑해졌어요! ✨🛒

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 변경 사항의 핵심을 명확하게 반영하고 있습니다: 장바구니 메뉴 최대 개수 기획 변경에 따른 기능 수정.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

🧹 Recent nitpick comments

src/features/cart/hooks/useCart.ts (1)

74-77: 메뉴별 최대 수량 제한 로직이 올바르게 구현되었습니다.

전체 장바구니 제한에서 메뉴별 최대 9개 제한으로 변경된 기획이 적절히 반영되었습니다.

다만, 코드 일관성을 위해 세미콜론을 추가하는 것을 권장합니다:

♻️ 세미콜론 추가 제안

    if (newMenuQuantity > 9) {
-      callbacks?.onError?.("각 메뉴는 최대 9개까지만 담을 수 있어요!")
-      return
+      callbacks?.onError?.("각 메뉴는 최대 9개까지만 담을 수 있어요!");
+      return;
    }

src/shared/components/number/RoundedNumber.tsx (1)

3-6: 컴포넌트 인터페이스가 적절히 설계되었습니다.

SVG 아이콘 18개를 대체하는 재사용 가능한 컴포넌트로 잘 구현되었습니다.

선택적으로, number prop에 대한 범위 제한을 고려해볼 수 있습니다. 현재 메뉴별 최대 수량이 9개이므로, 의도하지 않은 값(0, 음수, 또는 매우 큰 숫자)이 전달될 경우에 대한 방어적 처리를 추가할 수 있습니다.

♻️ 선택적 범위 제한 예시

 interface RoundedNumberProps {
-  number: number;
+  number: number; // 1-9 범위 권장
   filled?: boolean;
 }

또는 런타임에서 clamp 처리:

const displayNumber = Math.max(1, Math.min(9, number));

src/shared/components/number/RoundedNumber.module.css (1)

1-11: 스타일 구조가 적절합니다.

CSS 변수를 활용한 테마 지원과 rem 단위 사용이 좋습니다.

한 가지 작은 제안: Line 4의 align-content: center는 multi-line flex 컨테이너에서 주로 사용됩니다. 단일 라인 컨텐츠의 경우 align-items: center가 더 의도를 명확하게 전달할 수 있습니다.

♻️ 선택적 변경 제안

 .container {
   display: flex;
   justify-content: center;
-  align-content: center;
+  align-items: center;

   border-radius: 0.3125rem;
   background-color: var(--color-white);

   padding-inline: 0.19rem;
   padding-block: 0.31rem;
 }

src/features/menu/components/button/CartButton.tsx (2)

1-3: 사용되지 않을 수 있는 React import

React 17 이상에서 새로운 JSX 변환을 사용하는 경우, JSX를 위해 React를 명시적으로 import할 필요가 없습니다. 프로젝트 설정에 따라 MouseEventHandler만 import하면 될 수 있습니다.

♻️ 제안된 수정

-import React, { MouseEventHandler } from "react";
+import { MouseEventHandler } from "react";

---

5-8: quantity 타입의 유효 범위 제약 고려

이전에는 itemCount가 1 | 2 | ... | 9 같은 리터럴 타입으로 컴파일 타임 안전성을 제공했습니다. 현재 number 타입은 0, 음수, 또는 9 초과 값도 허용합니다. useCart.ts에서 런타임 검증이 이루어지지만, 타입 수준에서 유효 범위를 문서화하거나 제한하는 것을 고려해 보세요.

💡 선택적 개선안

+// quantity는 1-99 범위 내의 양수여야 합니다 (메뉴별 최대 9개)
 interface CartButtonProps {
   quantity: number;
   onClick: MouseEventHandler<HTMLButtonElement>;
 }

또는 더 엄격한 타입이 필요한 경우:

type ValidQuantity = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;

interface CartButtonProps {
  quantity: ValidQuantity;
  onClick: MouseEventHandler<HTMLButtonElement>;
}

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e915072 and 43b632c.

⛔ Files ignored due to path filters (18)

• src/assets/icons/rounded-number-1-filled.svg is excluded by !**/*.svg
• src/assets/icons/rounded-number-1.svg is excluded by !**/*.svg
• src/assets/icons/rounded-number-2-filled.svg is excluded by !**/*.svg
• src/assets/icons/rounded-number-2.svg is excluded by !**/*.svg
• src/assets/icons/rounded-number-3-filled.svg is excluded by !**/*.svg
• src/assets/icons/rounded-number-3.svg is excluded by !**/*.svg
• src/assets/icons/rounded-number-4-filled.svg is excluded by !**/*.svg
• src/assets/icons/rounded-number-4.svg is excluded by !**/*.svg
• src/assets/icons/rounded-number-5-filled.svg is excluded by !**/*.svg
• src/assets/icons/rounded-number-5.svg is excluded by !**/*.svg
• src/assets/icons/rounded-number-6-filled.svg is excluded by !**/*.svg
• src/assets/icons/rounded-number-6.svg is excluded by !**/*.svg
• src/assets/icons/rounded-number-7-filled.svg is excluded by !**/*.svg
• src/assets/icons/rounded-number-7.svg is excluded by !**/*.svg
• src/assets/icons/rounded-number-8-filled.svg is excluded by !**/*.svg
• src/assets/icons/rounded-number-8.svg is excluded by !**/*.svg
• src/assets/icons/rounded-number-9-filled.svg is excluded by !**/*.svg
• src/assets/icons/rounded-number-9.svg is excluded by !**/*.svg

📒 Files selected for processing (7)

• src/assets/icons/index.ts
• src/features/cart/hooks/useCart.ts
• src/features/menu/components/MenuPageContainer.tsx
• src/features/menu/components/bar/OrderSummaryBar.tsx
• src/features/menu/components/button/CartButton.tsx
• src/shared/components/number/RoundedNumber.module.css
• src/shared/components/number/RoundedNumber.tsx

💤 Files with no reviewable changes (1)

• src/assets/icons/index.ts

🧰 Additional context used

🧬 Code graph analysis (2)

src/shared/components/number/RoundedNumber.tsx (8)

src/features/banner/components/AdBannerTag.tsx (1)

• AdBannerTag (8-19)

src/features/menu/components/bar/SeparationBar.tsx (1)

• SeparationBar (3-7)

src/shared/components/loading/dot/LoadingDots.tsx (1)

• LoadingDots (3-11)

src/shared/components/header/Header.tsx (1)

• Header (4-15)

src/features/menu/components/tags/PopularTag.tsx (1)

• PopularTag (9-20)

src/features/menu/components/tags/SoldOutTag.tsx (1)

• SoldOutTag (3-11)

src/app/(plain)/login/page.tsx (1)

• LoginPage (4-13)

src/features/auth/components/input/UsernameInput.tsx (1)

• UsernameInput (13-46)

src/features/menu/components/button/CartButton.tsx (1)

src/shared/components/number/RoundedNumber.tsx (1)

• RoundedNumber (8-28)

🔇 Additional comments (6)

src/features/cart/hooks/useCart.ts (1)

98-98: LGTM!

의존성 배열이 올바르게 구성되었습니다. getMenuQuantity가 cartInfo에 의존하므로, cartInfo 변경 시 getMenuQuantity가 재생성되고, 이에 따라 addToCart도 적절히 재생성됩니다.

src/features/menu/components/bar/OrderSummaryBar.tsx (1)

5-5: LGTM!

itemCount에서 quantity로의 prop 변경이 일관되게 적용되었습니다. ItemCount 타입 대신 number 타입을 사용하여 인터페이스가 간소화되었습니다.

Also applies to: 11-11, 16-16, 38-38

src/shared/components/number/RoundedNumber.tsx (1)

8-27: LGTM!

filled prop에 따른 조건부 클래스 적용 패턴이 코드베이스의 다른 컴포넌트들(예: UsernameInput)과 일관됩니다. 구현이 깔끔합니다.

src/features/menu/components/MenuPageContainer.tsx (1)

90-90: LGTM!

OrderSummaryBar의 변경된 인터페이스에 맞게 prop 이름이 올바르게 업데이트되었습니다. totalQuantity를 quantity로 전달하는 것이 명확하고 일관됩니다.

src/shared/components/number/RoundedNumber.module.css (1)

13-28: LGTM!

filled 상태에 대한 스타일 분리가 명확하고, CSS 변수를 일관되게 사용하여 테마 지원이 가능합니다.

src/features/menu/components/button/CartButton.tsx (1)

22-27: LGTM!

RoundedNumber 컴포넌트를 사용한 리팩토링이 잘 되었습니다. 기존 아이콘 맵 방식보다 훨씬 간결하고 유지보수하기 좋습니다.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}