fix: 매뉴 모달 카테고리 매핑 오류 수정

[jjjsun]

💡 개요

메뉴 카테고리 매핑으로 메뉴 모달 오류 해결

🔢 관련 이슈 링크

• Closes [Fix] 메뉴 카테고리 오류 해결 #91

💻 작업내용

• 메뉴 카테고리에서 BeVERAGE 오류로 인해 메뉴모달인 뜨지 않고 404페이지로 이동하는 오류 수정

📌 변경사항PR

• FEAT: 새로운 기능 추가
• FIX: 버그/오류 수정
• CHORE: 코드/내부 파일/설정 수정
• DOCS: 문서 수정(README 등)
• REFACTOR: 코드 리팩토링 (기능 변경 없음)
• TEST: 테스트 코드 추가/수정
• STYLE: 스타일 변경(포맷, 세미콜론 등)

🤔 추가 논의하고 싶은 내용

• N/A

✅ 체크리스트

• 브랜치는 잘 맞게 올렸는지
• 관련 이슈를 맞게 연결했는지
• 로컬에서 정상 동작을 확있했는지
• 충돌이 없다(또는 브랜치에서 충돌 해결 후 PR 업데이트 완료)

Summary by CodeRabbit

릴리스 노트

• Style

  • 소유자 헤더의 문자열 표기 및 버튼 속성 일관성 개선

• Bug Fixes

  • 메뉴 카테고리 매핑 개선으로 다양한 메뉴 유형 표시 안정성 향상
  • 메뉴 모달에서 분류되지 않는 항목을 위한 OTHER 폴백 추가

• Chores

  • 네트워크 요청에서 쿠키 전송 활성화로 세션 관련 동작 신뢰성 개선

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
eatsfine	Ready	Preview, Comment	Feb 12, 2026 0:10am

[coderabbitai]

📝 Walkthrough

Walkthrough

ownerHeader의 문자열 형식 정규화 및 UI 아이콘 제거, ReservationMenuModal에 UiCategory("OTHER") 추가와 mapMenuCategory로 메뉴 카테고리 정규화, 그리고 Axios 인스턴스에 withCredentials: true 설정이 적용되었습니다.

Changes

Cohort / File(s)	Summary
ownerHeader 정규화 src/components/owner/ownerHeader.tsx	문자열 리터럴을 더블 쿼트로 통일, Store 아이콘 및 "내 가게 관리" 헤더 제거, 버튼에 type="button" 명시 및 aria-current 값 표준화.
ReservationMenuModal 카테고리 정규화 src/components/reservation/modals/ReservationMenuModal.tsx	`type UiCategory = MenuCategory
Axios 설정 변경 src/api/axios.ts	Axios 인스턴스에 withCredentials: true 추가(쿠키 전송 허용).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat: 내가게관리 가게 설정탭 API 연동 #69: Axios 인스턴스 관련 변경 — src/api/axios.ts 수정과 연관되어 쿠키/인증 동작에 영향 가능성 있음.
• feat:내가게관리 UI 구현 #37: ownerHeader 관련 변경 — 동일 컴포넌트의 UI/아이콘/탭 변경 사항과 직접 연관.
• feat: 예약중 메뉴선택 UI추가 #39: ReservationMenuModal 카테고리 변경 — 메뉴 카테고리 타입·그룹핑 로직의 전/후 관계가 강함.

Suggested reviewers

• yooseolhee
• dew102938

리뷰 의견

• ReservationMenuModal: mapMenuCategory에서 백엔드의 예외 카테고리를 받을 경우 디버깅을 위해 경고 로깅을 추가하는 것을 권장합니다. 예시:

  const mapMenuCategory = (category: MenuCategory): UiCategory => {
    switch (category) {
      case "MAIN":
      case "MAIN_MENU":
        return "MAIN";
      case "SIDE":
        return "SIDE";
      case "DRINK":
      case "BEVERAGE":
        return "DRINK";
      default:
        console.warn(`[ReservationMenuModal] Unmapped category: ${category}`);
        return "OTHER";
    }
  };

• ReservationMenuModal: activeMenus ?? []로 안전하게 순회하도록 변경된 점은 좋습니다. 다만 OTHER 버킷이 UI에 표시되는 방식(숨김/라벨)은 UX 의도를 명확히 해주세요(예: "기타" 항목 표시 여부).
• ownerHeader: Store 아이콘과 "내 가게 관리" 텍스트 제거가 UX 상 의도된 변경인지 확인 필요합니다. 다른 곳에서 동일 정보가 대체되지 않으면 사용자 혼란이 발생할 수 있습니다.
• axios.withCredentials: 인증/쿠키 전송 동작이 전역에 영향을 줍니다. dev/staging 환경에서 세션 관련 CORS 설정(Access-Control-Allow-Credentials 등)이 맞춰져 있는지 확인하세요.

🍽️ 문자열은 정리되고,
카테고리는 모여서,
UNKNOWN은 OTHER로 웃고,
쿠키는 허용되어,
작은 정리 큰 안정성 ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 3

❌ Failed checks (2 warnings, 1 inconclusive)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	ownerHeader.tsx와 axios.ts의 변경사항이 #91에서 명시한 ReservationMenuModal.tsx 범위 외의 파일 수정으로 보여 범위 초과 가능성이 있습니다.	ownerHeader.tsx 포맷 변경과 axios.ts withCredentials 추가가 #91 버그 해결과 어떤 관련이 있는지 확인하고 불필요한 변경은 별도 PR로 분리하세요.
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.
Linked Issues check	❓ Inconclusive	코드 변경사항이 #91의 메뉴 카테고리 매핑 오류 해결이라는 주요 목표를 충족하고 있으나, 일부 변경(ownerHeader.tsx, axios.ts)은 연결 이슈와의 직접적 관련성이 불명확합니다.	추가 변경사항(ownerHeader.tsx, axios.ts)이 #91 해결과 어떤 관련이 있는지 명확히 설명해주세요.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 메뉴 모달 카테고리 매핑 오류 수정이라는 주요 변경사항을 명확하게 설명하고 있습니다.
Description check	✅ Passed	PR 설명이 개요, 관련 이슈, 작업내용, 변경사항 타입, 체크리스트를 모두 포함하여 템플릿을 완벽히 따르고 있습니다.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/distributaion-fix

---

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.}

[yooseolhee]

확인했습니다!

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/components/reservation/modals/ReservationMenuModal.tsx (1)

170-170: ⚠️ Potential issue | 🟠 Major

"OTHER" 카테고리로 분류된 메뉴 아이템이 렌더링되지 않아요! 🐛

Line 76-84에서 mapMenuCategory를 통해 OTHER 카테고리로 그룹핑하는 로직을 추가했는데, 실제 렌더링 루프(Line 170)에서는 ["MAIN", "SIDE", "DRINK"]만 순회하고 있어요. 즉, OTHER로 분류된 메뉴 아이템은 화면에 절대 표시되지 않습니다.

PR의 목적이 카테고리 매핑 오류로 인한 404 문제 해결인데, 만약 API에서 예상치 못한 카테고리 값이 내려오면 해당 메뉴가 사용자에게 보이지 않게 됩니다. 의도적이라면 주석을 남겨주시고, 아니라면 OTHER도 렌더링해야 합니다.

🐛 "OTHER" 카테고리도 렌더링하는 수정안

-            (["MAIN", "SIDE", "DRINK"] as MenuCategory[]).map((cat) => {
+            (["MAIN", "SIDE", "DRINK", "OTHER"] as UiCategory[]).map((cat) => {

🧹 Nitpick comments (3)

src/components/reservation/modals/ReservationMenuModal.tsx (3)

25-32: UiCategory 타입이 사용 이후에 선언되어 있어요.

TypeScript에서 타입은 호이스팅되기 때문에 동작상 문제는 없지만, 가독성을 위해 UiCategory 타입 선언을 CategoryLabel 위로 올려주는 게 자연스러울 것 같아요.

♻️ 제안

+type UiCategory = MenuCategory | "OTHER";
+
 const CategoryLabel: Record<UiCategory, string> = {
   MAIN: "메인 메뉴",
   SIDE: "사이드 메뉴",
   DRINK: "음료",
   OTHER: "기타",
 };
-
-type UiCategory = MenuCategory | "OTHER";

---

58-73: mapMenuCategory 함수가 컴포넌트 바깥으로 나갈 수 있어요.

이 함수는 컴포넌트 state나 props에 의존하지 않는 순수 함수인데, 컴포넌트 내부에 정의되어 있어서 매 렌더마다 재생성됩니다. useMemo(Line 75) 의존성 배열에도 포함되어 있지 않아서, 엄격한 ESLint exhaustive-deps 규칙에서 경고가 발생할 수 있어요.

컴포넌트 밖(모듈 스코프)으로 빼면 깔끔합니다.

♻️ 제안

+// 컴포넌트 외부(모듈 스코프)로 이동
+const mapMenuCategory = (raw: unknown): UiCategory => {
+  const cat = String(raw);
+  switch (cat) {
+    case "MAIN":
+    case "MAIN_MENU":
+      return "MAIN";
+    case "SIDE":
+      return "SIDE";
+    case "DRINK":
+    case "BEVERAGE":
+      return "DRINK";
+    default:
+      return "OTHER";
+  }
+};
+
 export default function ReservationMenuModal({

---

75-87: mapMenuCategory가 useMemo 의존성 배열에 빠져 있어요.

현재 mapMenuCategory가 컴포넌트 내부에 정의되어 있는 상태에서, grouped useMemo의 의존성 배열이 [activeMenus]만 포함하고 있어요. 앞서 제안한 대로 함수를 모듈 스코프로 이동하면 이 문제도 자연스럽게 해결됩니다.

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/api/axios.ts (1)

131-134: ⚠️ Potential issue | 🟠 Major

401 이외 에러에서 정규화되지 않은 에러 반환 (기존 코드)

Line 64에서 normalizeApiError(err)로 apiError를 만들어 놓았는데, Line 133에서는 원본 err(AxiosError)를 그대로 reject하고 있어요. 호출부에서 에러 형태가 ApiError일 수도 있고 AxiosError일 수도 있어서 핸들링이 불안정해질 수 있습니다.

🔧 수정 제안

-    return Promise.reject(err);
+    return Promise.reject(apiError);

As per coding guidelines, src/api/**: 에러 처리/타임아웃/리트라이 전략 확인, 응답 타입 안전성 유지.

🧹 Nitpick comments (1)

src/api/axios.ts (1)

17-35: owner API 분기가 불필요하게 중복돼요 (기존 코드)

이번 PR 변경 범위는 아니지만, isOwnerApi 분기(Lines 23-28)와 아래 일반 토큰 처리(Lines 30-32)가 동일한 동작을 해서 owner 분기가 사실상 불필요합니다. 나중에 정리할 때 참고해주세요~

♻️ 정리 예시

 api.interceptors.request.use((config: InternalAxiosRequestConfig) => {
   const token = getAccessToken();
-  const ownerApiPaths = ["/owner", "/stores/"];
-
-  const isOwnerApi = ownerApiPaths.some((path) => config.url?.includes(path));
-
-  if (isOwnerApi) {
-    if (token) {
-      config.headers.Authorization = `Bearer ${token}`;
-      return config;
-    }
-  }
 
   if (token) {
     config.headers.Authorization = `Bearer ${token}`;
   }
 
   return config;
 });