[Fix] 영수증 리뷰 companyId 고정값 수정 #72
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Caution Review failedThe pull request is closed. ## Walkthrough
이 변경사항은 여러 컴포넌트에서 기존의 alert 기반 에러 알림을 ToastModal 기반의 비차단 토스트 알림으로 대체하고, 카테고리 표시 로직을 businessTypeNameMap을 활용하도록 수정하며, 불필요한 코드와 주석을 정리합니다. 내비게이션 동작 및 텍스트 스타일링도 일부 조정되었습니다.
## Changes
| 파일/경로 그룹 | 변경 요약 |
|------------------------------------------------------------------------|------------------------------------------------------------------------------------------------|
| src/pages/map/components/review/ConfirmImage.jsx | 카테고리 표시를 businessTypeNameMap을 이용하도록 변경, 불필요한 함수 및 주석 제거, setReviewInfo 호출 정리 |
| src/pages/map/components/review/ReviewImageCapture.jsx | alert 기반 에러 알림을 ToastModal 토스트 알림으로 대체, companyId 동적 할당, 관련 import 및 상태 추가 |
| src/components/common/ToastModal.jsx | 토스트 메시지 텍스트 스타일 클래스 변경(폰트 및 줄바꿈 처리 방식 조정) |
| src/pages/myPage/MyPage.jsx | 로그아웃 에러 시 alert 대신 ToastModal 사용, 토스트 상태 및 fireToast 함수 추가, 불필요한 주석 제거 |
| src/pages/review/StoreReviewPage.jsx | 뒤로가기 버튼 동작을 navigate(-1)에서 navigate("/")로 변경 |
| src/pages/support/components/step/Step6.jsx | 에러 알림을 alert에서 ToastModal 기반 토스트로 변경, 관련 상태 및 fireToast 함수 추가 |
| src/pages/writeReview/components/WriteText.jsx | 리뷰 제출 실패 시 alert 대신 ToastModal 토스트 알림 사용, 관련 상태 및 fireToast 함수 추가 |
| src/constants/review/reviewData.js | 정적 리뷰 데이터 배열 export 삭제 |
| src/pages/map/components/review/ReviewList.jsx | 사용하지 않는 reviewData import 제거 |
| src/pages/story/components/carousel/BestStoryCarousel.jsx | import 주석 제거 (스타일시트 관련) |
| src/pages/support/components/step/Step7.jsx | 사용하지 않는 useState import 및 불필요한 props 제거 |
| src/pages/writeReview/components/FireTemperatureSlider.jsx | 사용하지 않는 useState, useEffect import 제거 |
| src/pages/writeReview/components/SelectTag.jsx | 사용하지 않는 useEffect import 및 주석 처리된 JSX 제거, paymentStore에서 reviewInfo 삭제 |
| src/store/paymentStore.js | paymentTime, receiptInfo 상태 및 관련 setter 메서드 삭제 |
## Possibly related PRs
- Morak-Team/Frontend#43: ConfirmImage.jsx 내 회사 카테고리 표시 및 리뷰 관련 데이터 처리와 연관된 변경사항 포함.
- Morak-Team/Frontend#38: ConfirmImage.jsx 컴포넌트에 날짜/시간 선택기 및 모달 애니메이션 추가 관련 PR.
- Morak-Team/Frontend#53: ConfirmImage.jsx의 onConfirmComplete prop 추가 및 내비게이션 로직 변경 관련 PR.
## Suggested reviewers
- shroqkfTip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (4)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/pages/map/components/review/ConfirmImage.jsx (1)
16-17: 디버깅용 console.log는 제거하는 것이 좋습니다PR을 제출하기 전에 디버깅용 console.log를 제거하는 것이 좋은 관행입니다. 프로덕션 코드에 불필요한 로그가 남아있지 않도록 합시다.
- console.log("data, ", data); -
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/constants/review/companyCategoryMap.js(1 hunks)src/pages/map/components/review/ConfirmImage.jsx(2 hunks)src/pages/map/components/review/ReviewImageCapture.jsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/pages/map/components/review/ConfirmImage.jsx (1)
src/constants/review/companyCategoryMap.js (2)
companyCategoryMap(1-12)companyCategoryMap(1-12)
src/pages/map/components/review/ReviewImageCapture.jsx (1)
src/pages/review/StoreReviewPage.jsx (1)
companyId(15-15)
🔇 Additional comments (4)
src/pages/map/components/review/ReviewImageCapture.jsx (1)
171-171: 하드코딩된 companyId 값을 동적 props로 교체한 점 좋습니다!이전에는 회사 ID가 '780'으로 하드코딩되어 있었는데, 이제 컴포넌트로 전달되는
companyIdprops를 사용하도록 수정되었습니다. 이는 PR의 목적인 "영수증 리뷰 companyId 고정값 수정"과 정확히 일치합니다.src/constants/review/companyCategoryMap.js (1)
1-12: 카테고리 상수 매핑 추가가 좋은 접근입니다!영문 카테고리 키를 한글 이름으로 매핑하는 상수 객체를 만들어 관리하는 방식은 코드 유지보수성을 높이는 좋은 방법입니다. 이렇게 하면 카테고리 표시 방식을 일관되게 유지하고 변경이 필요할 때 한 곳에서만 수정하면 됩니다.
src/pages/map/components/review/ConfirmImage.jsx (2)
12-12: companyCategoryMap 상수 import 추가 👍새로 생성된 카테고리 매핑 상수를 import하여 사용하는 것은 좋은 접근법입니다.
235-237: 카테고리 표시 방식 개선이 잘 되었습니다!영문 카테고리 키 대신
companyCategoryMap을 사용하여 한글 카테고리명을 표시하도록 변경한 점이 좋습니다. 사용자 경험 측면에서 더 자연스러운 표현이 가능해졌고, 없는 카테고리의 경우 "기타"로 대체하는 폴백 로직도 적절합니다.
shroqkf
left a comment
shroqkf
left a comment
There was a problem hiding this comment.
토스트 모달 컴포넌트 아이콘 변경할 때 아래처럼 하시면 됩니다
import ToastModal from "@components/common/ToastModal";
import ErrorIcon from "/public/svgs/review/errorIcon.svg?react";
const [toast, setToast] = useState({ show: false, message: "", icon: null });
<button onClick={() => {
setToast({
show: true,
message: "처리 중 오류가 발생했습니다.",
icon: ErrorIcon,
});
}}>
오류 발생 테스트
</button>
{toast.show && (
<ToastModal
message={toast.message}
icon={toast.icon}
onClose={() => setToast((prev) => ({ ...prev, show: false }))}
/>
)}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/pages/writeReview/components/WriteText.jsx (2)
19-27: 토스트 상태 관리 로직 구현 적절토스트 알림을 위한 상태 관리와
fireToast헬퍼 함수가 잘 구현되었습니다:
- 토스트 표시 여부, 메시지, 아이콘을 관리하는 상태 설정
- 자동으로 토스트를 숨기는 타이머 로직
- 기본 매개변수 값(아이콘, 지속 시간)을 활용한 유연한 함수 설계
다른 곳에서도 재사용할 수 있도록 이 로직을 별도의 커스텀 훅으로 추출하는 것을 고려해보세요:
+// src/hooks/useToast.js +import { useState } from "react"; +import ErrorIcon from "/public/svgs/modal/errorIcon.svg?react"; + +export const useToast = () => { + const [toast, setToast] = useState({ + show: false, + message: "", + icon: null, + duration: 4000, + }); + + const fireToast = (message, icon = ErrorIcon, duration = 4000) => { + setToast({ show: true, message, icon, duration }); + setTimeout(() => setToast((t) => ({ ...t, show: false })), duration); + }; + + return { toast, fireToast, setToast }; +};
108-115: 토스트 모달 컴포넌트 조건부 렌더링 구현토스트 모달을 조건부로 렌더링하고 필요한 props를 전달하는 방식이 잘 구현되었습니다.
토스트 상태에 duration 값도 포함시켜서 다양한 상황에 맞게 유연하게 설정할 수 있도록 개선해보세요:
- const [toast, setToast] = useState({ - show: false, - message: "", - icon: null, - }); + const [toast, setToast] = useState({ + show: false, + message: "", + icon: null, + duration: 4000, + }); - const fireToast = (message, icon = ErrorIcon, duration = 4000) => { - setToast({ show: true, message, icon }); + const fireToast = (message, icon = ErrorIcon, duration = 4000) => { + setToast({ show: true, message, icon, duration }); - {toast.show && ( - <ToastModal - message={toast.message} - icon={toast.icon} - duration={4000} - onClose={() => setToast((t) => ({ ...t, show: false }))} - /> - )} + {toast.show && ( + <ToastModal + message={toast.message} + icon={toast.icon} + duration={toast.duration} + onClose={() => setToast((t) => ({ ...t, show: false }))} + /> + )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/assets/svgs/modal/errorIcon.svgis excluded by!**/*.svg
📒 Files selected for processing (7)
src/components/common/ToastModal.jsx(1 hunks)src/pages/map/components/review/ConfirmImage.jsx(2 hunks)src/pages/map/components/review/ReviewImageCapture.jsx(6 hunks)src/pages/myPage/MyPage.jsx(4 hunks)src/pages/review/StoreReviewPage.jsx(1 hunks)src/pages/support/components/step/Step6.jsx(3 hunks)src/pages/writeReview/components/WriteText.jsx(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/pages/map/components/review/ReviewImageCapture.jsx
- src/pages/map/components/review/ConfirmImage.jsx
🔇 Additional comments (13)
src/pages/review/StoreReviewPage.jsx (1)
50-50: 네비게이션 동작이 변경되었습니다.뒤로 가기 아이콘 클릭 시 이전 페이지로 돌아가는 대신(
navigate(-1)) 홈페이지로 직접 이동(navigate("/"))하도록 변경되었습니다. 이는 동적 companyId 수정과 관련된 변경 사항의 일부인 것으로 보입니다.src/components/common/ToastModal.jsx (1)
23-23: 텍스트 스타일 및 줄바꿈 처리가 개선되었습니다.토스트 메시지의 스타일이 변경되었습니다:
font-semibold whitespace-nowrap에서b4 whitespace-pre-line으로 변경- 이제 메시지 텍스트에서 줄바꿈(
\n)이 제대로 표시되며, 보다 일관된 텍스트 스타일(b4)이 적용됩니다.이 변경으로 여러 줄의 오류 메시지가 있는, 특히 수정된 영수증 리뷰 기능에서 더 나은 사용자 경험을 제공할 수 있습니다.
src/pages/support/components/step/Step6.jsx (3)
3-17: Alert 대신 ToastModal을 사용한 개선된 에러 처리 방식 도입기존의 alert 다이얼로그 대신 비차단(non-blocking) 토스트 알림을 사용하도록 변경되었습니다. 이는 사용자 경험을 개선하고 시각적으로 더 세련된 피드백을 제공합니다.
토스트 상태 관리와
fireToast유틸리티 함수는 잘 구현되어 있습니다.
27-27: 에러 처리 방식 개선alert에서 토스트 알림으로 에러 처리 방식이 변경되었습니다.
64-71: ToastModal 컴포넌트 조건부 렌더링 추가토스트 상태에 따라 ToastModal 컴포넌트를 조건부로 렌더링하는 코드가 추가되었습니다. 이는 앱 전체에서 사용자 피드백 메커니즘을 표준화하는 좋은 접근법입니다.
src/pages/myPage/MyPage.jsx (5)
10-11: 토스트 알림 시스템을 위한 필요한 컴포넌트 임포트ErrorIcon과 ToastModal을 임포트하여 토스트 알림 시스템을 구현하기 위한 준비가 되었습니다.
38-46: 토스트 알림 시스템 상태 관리 구현토스트 알림의 표시, 메시지, 아이콘을 관리하기 위한 상태와 유틸리티 함수를 추가했습니다. 이는 다른 컴포넌트(Step6.jsx 등)와 동일한 패턴을 따르며 일관된 사용자 경험을 제공합니다.
68-68: 로그아웃 실패 처리 개선로그아웃 실패 시 기존 alert 대신 토스트 알림을 사용하도록 변경되었습니다.
75-75: 로딩 텍스트 스타일 개선로딩 텍스트에
b4클래스를 적용하여 스타일을 개선했습니다.
137-144: 토스트 모달 컴포넌트 조건부 렌더링토스트 알림 시스템의 시각적 부분을 구현한 코드입니다. 이는 다른 페이지의 구현과 일관되며, 앱 전체에서 통일된 알림 UI를 제공합니다.
src/pages/writeReview/components/WriteText.jsx (3)
8-9: 새로운 토스트 모달 관련 임포트 추가Toast 알림 시스템에 필요한 ErrorIcon과 ToastModal 컴포넌트가 적절하게 임포트되었습니다.
39-39: alert 대신 토스트 알림으로 개선에러 핸들링 방식이 기존 alert에서 토스트 알림으로 변경되었습니다. 이 변경으로 UX가 향상되었습니다.
1-120: PR 목표와 현재 파일 변경사항 간의 불일치PR 제목 "Fix: 영수증 리뷰 companyId 고정값 수정"과 목표에 언급된 "companyId 고정값을 동적으로 변경" 및 "영수증 리뷰 확인 창에 회사 카테고리 표시"는 이 파일의 변경사항에서 확인되지 않습니다. 대신 alert을 토스트 알림으로 대체하는 변경만 적용되었습니다.
PR 목표에 맞는 변경사항이 다른 파일에 적용되었는지 확인해 주세요.
🌟 어떤 이유로 MR를 하셨나요?
📝 세부 내용 - 왜 해당 MR이 필요한지 작업 내용을 자세하게 설명해주세요
📸 작업 화면 스크린샷
X
Summary by CodeRabbit