문의하기 개선 (#issue 269) #270
문의하기 개선 (#issue 269) #270
Conversation
|
""" Walkthrough이번 변경 사항은 문의하기(문의 제출) 기능의 UX를 개선하기 위한 것으로, 입력값 검증 시 기존의 alert 대신 모달을 활용하도록 수정되었습니다. 또한, 문의 관련 메시지 상수를 목적에 따라 분리하고, 문의 제출 API 타입을 명확히 했으며, 관련 훅과 컴포넌트의 상태 관리 및 네비게이션 로직이 개선되었습니다. 문의 제출 후 성공/실패 메시지도 모달로 안내되며, 여러 UI 상태가 객체 기반으로 관리됩니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant InquiryForm
participant Modal
participant usePostInquiry
participant API
User->>InquiryForm: 문의 내용 입력 후 제출 클릭
InquiryForm->>InquiryForm: 입력값 검증
alt 유효성 실패
InquiryForm->>Modal: 오류 메시지 모달 오픈
Modal-->>User: 오류 안내
else 유효성 통과
InquiryForm->>usePostInquiry: 문의 데이터 전달
usePostInquiry->>API: 문의 등록 요청
alt 성공
usePostInquiry->>Modal: 성공 메시지 모달 오픈
usePostInquiry->>InquiryForm: 페이지 이동
else 실패
usePostInquiry->>Modal: 실패 메시지 모달 오픈
end
end
Assessment against linked issues
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (5)
🚧 Files skipped from review as they are similar to previous changes (3)
⏰ Context from checks skipped due to timeout of 90000ms (1)
🔇 Additional comments (1)
✨ Finishing Touches
🪧 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: 5
🧹 Nitpick comments (3)
src/pages/customerService/inquiry/Inquiry.tsx (2)
110-115: 파일 용량 초과 알림도 모달로 통일해 주세요UX 일관성을 위해 alert 대신 이미 사용 중인
Modal을 활용하는 편이 좋습니다.
추가적으로URL.revokeObjectURL을 호출하기 전에 모달이 닫히면 revoke 대상이 사라질 수 있으므로 안전하게 처리해주세요.
208-215:submitButton플래그는 키보드 제출(Enter)·모바일 등 다양한 입력을 놓칩니다
onSubmit시점에서 직접 유효성 검사를 실행하면 별도의 버튼 플래그가 필요 없습니다.
불필요한 상태를 줄여 컴포넌트를 단순화할 수 있습니다.src/constants/customerService.ts (1)
11-16: 상수 네이밍 일관성
My_INQUIRIES_MESSAGE처럼 CamelCase 와 SnakeCase 가 혼합된 네이밍은 가독성을 떨어뜨립니다.
예:MY_INQUIRIES_MESSAGE또는myInquiriesMessage중 하나로 통일하는 것을 권장합니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
src/api/inquiry.api.ts(1 hunks)src/components/common/header/Header.tsx(3 hunks)src/components/mypage/activityLog/inquiries/inquiry/Inquiry.tsx(3 hunks)src/constants/customerService.ts(1 hunks)src/hooks/usePostInquiry.ts(1 hunks)src/models/apiCommon.ts(1 hunks)src/pages/customerService/MoveInquiredLink.tsx(1 hunks)src/pages/customerService/inquiry/Inquiry.tsx(6 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (3)
src/api/inquiry.api.ts (2)
src/api/http.api.ts (1)
httpClient(78-78)src/models/apiCommon.ts (1)
ApiCommonBasicType(6-8)
src/pages/customerService/MoveInquiredLink.tsx (1)
src/constants/routes.ts (1)
ROUTES(1-28)
src/components/mypage/activityLog/inquiries/inquiry/Inquiry.tsx (1)
src/constants/customerService.ts (1)
My_INQUIRIES_MESSAGE(11-16)
🪛 ESLint
src/components/common/header/Header.tsx
[error] 19-19: 'useNotification' is defined but never used.
(@typescript-eslint/no-unused-vars)
[error] 20-20: 'useEffect' is defined but never used.
(@typescript-eslint/no-unused-vars)
[error] 21-21: 'testLiveAlarm' is defined but never used.
(@typescript-eslint/no-unused-vars)
🔇 Additional comments (9)
src/models/apiCommon.ts (1)
6-8: 새로운 인터페이스 추가가 적절합니다
ApiCommonBasicType인터페이스가ApiCommonType을 확장하여 boolean 타입의data속성을 추가한 것은 문의하기 API 응답 타입을 더 명확하게 정의하는 좋은 방법입니다. 이는 타입 안전성을 강화합니다.src/api/inquiry.api.ts (2)
1-1: 타입 임포트 추가가 적절합니다
ApiCommonBasicType타입을 임포트하여 API 응답 타입을 명확히 하는 것은 좋은 방법입니다.
6-10: 제네릭 타입 주석 추가는 타입 안전성을 강화합니다HTTP 클라이언트 호출에
<ApiCommonBasicType>제네릭 타입을 추가한 것은 타입 안전성을 높여주는 좋은 변경입니다. 이전에 응답 값을 저장하고 로깅하던 코드가 제거된 것도 코드를 더 간결하게 만들었습니다.src/components/mypage/activityLog/inquiries/inquiry/Inquiry.tsx (3)
4-4: 상수 임포트 변경이 적절합니다
INQUIRY_MESSAGE에서My_INQUIRIES_MESSAGE로 임포트를 변경한 것은 PR 목적에 맞게 메시지 상수를 목적별로 분리한 변경과 일치합니다.
52-52: 메시지 참조 업데이트가 적절합니다임포트 변경에 맞춰
My_INQUIRIES_MESSAGE.blowUpMessage로 참조를 업데이트한 것은 일관성 있는 변경입니다.
67-67: 메시지 참조 업데이트가 적절합니다임포트 변경에 맞춰
My_INQUIRIES_MESSAGE.isImageOpenMessage로 참조를 업데이트한 것은 일관성 있는 변경입니다.src/pages/customerService/MoveInquiredLink.tsx (3)
1-1: useLocation 훅 임포트는 네비게이션 상태 관리에 필요합니다현재 위치 정보를 가져오기 위해
useLocation훅을 임포트한 것은 PR 목적인 "문의 제출 후 이전 페이지로 리디렉션" 기능을 위한 적절한 변경입니다.
6-7: 현재 위치 정보 저장은 네비게이션 컨텍스트 유지에 중요합니다
useLocation훅을 사용하여 현재 위치 정보를 가져오는 것은 PR 목적에 맞게 문의 제출 후 사용자를 이전 페이지로 리디렉션하기 위한 필수적인 단계입니다.
8-12: 네비게이션 상태에 경로 정보 전달이 적절합니다링크 컴포넌트에
state={{ from: location.pathname }}속성을 추가하여 현재 경로 정보를 전달하는 것은 사용자가 문의를 제출한 후 이전 페이지로 돌아갈 수 있게 하는 PR 목적에 부합하는 좋은 구현입니다.
| import useNotification from '../../../hooks/useNotification'; | ||
| import { useEffect } from 'react'; | ||
| import { testLiveAlarm } from '../../../api/alarm.api'; |
There was a problem hiding this comment.
불필요한 import는 제거하거나 실제 로직으로 복구해 주세요.
useNotification, useEffect, testLiveAlarm 가 모두 사용처 없이 import만 존재합니다. 빌드-타임에 ESLint 오류가 발생하며 번들 크기도 불필요하게 증가합니다. 실제 알림 기능을 되살릴 계획이 없다면 import 와 주석 처리된 코드를 함께 제거해 주세요.
-import useNotification from '../../../hooks/useNotification';
-import { useEffect } from 'react';
-import { testLiveAlarm } from '../../../api/alarm.api';
+// 알림 기능이 복구될 때까지 보류 – 필요 시 다시 추가📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import useNotification from '../../../hooks/useNotification'; | |
| import { useEffect } from 'react'; | |
| import { testLiveAlarm } from '../../../api/alarm.api'; | |
| // 알림 기능이 복구될 때까지 보류 – 필요 시 다시 추가 |
🧰 Tools
🪛 ESLint
[error] 19-19: 'useNotification' is defined but never used.
(@typescript-eslint/no-unused-vars)
[error] 20-20: 'useEffect' is defined but never used.
(@typescript-eslint/no-unused-vars)
[error] 21-21: 'testLiveAlarm' is defined but never used.
(@typescript-eslint/no-unused-vars)
| <Link to={ROUTES.inquiry} state={{ from: location.pathname }}> | ||
| <S.Item>문의하기</S.Item> | ||
| </Link> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
location.state 가 없는 경우를 대비한 fallback 처리 필요
Link 컴포넌트의 state={{ from: location.pathname }} 은 정상 흐름에서 유용하지만,
Inquiry 페이지를 직접 URL 로 진입했을 때는 location.state 가 undefined가 됩니다.
해당 경로는 훅 usePostInquiry 에서 그대로 사용되므로 런타임 오류가 발생할 수 있습니다.
-<Link to={ROUTES.inquiry} state={{ from: location.pathname }}>
+<Link
+ to={ROUTES.inquiry}
+ state={{ from: location.pathname || ROUTES.main }} // fallback
+>🏁 Script executed:
#!/bin/bash
# usePostInquiry 훅 사용 위치 확인
echo "=== usePostInquiry 사용 확인 ==="
rg "usePostInquiry" -A5
# Inquiry 페이지에서 location.state 사용 확인
echo "=== location.state 사용 위치 확인 ==="
rg "location.state" -A5
# useLocation 훅 사용 위치 확인
echo "=== useLocation 사용 확인 ==="
rg "useLocation" -A5Length of output: 7546
Inquiry 페이지에서 location.state.from에 대한 안전한 fallback 처리 필요
직접 URL로 진입할 경우 location.state가 undefined가 되어 usePostInquiry(location.state.from, …) 호출 시 런타임 에러가 발생합니다. Header나 다른 Link 컴포넌트의 state 설정만으로는 직접 진입 시 보호할 수 없으므로, Inquiry 페이지에서 소비자 쪽(fallback) 처리를 적용해야 합니다.
- src/pages/customerService/inquiry/Inquiry.tsx
import { ROUTES } from '../../../constants/routes';추가usePostInquiry호출부를 optional chaining과 nullish coalescing으로 변경
+ import { ROUTES } from '../../../constants/routes';
...
- const { mutate: postInquiry } = usePostInquiry(
- location.state.from,
- handleModalOpen
- );
+ const { mutate: postInquiry } = usePostInquiry(
+ location.state?.from ?? ROUTES.main,
+ handleModalOpen
+ );| const { mutate: postInquiry } = usePostInquiry( | ||
| location.state.from, | ||
| handleModalOpen | ||
| ); |
There was a problem hiding this comment.
location.state?.from 존재 여부를 확인하세요
직접 URL 로 접근한 사용자는 state 가 없을 수 있습니다. 없는 경우 기본 경로를 넘겨주어 오류를 방지하세요.
-const { mutate: postInquiry } = usePostInquiry(
- location.state.from,
- handleModalOpen
-);
+const { mutate: postInquiry } = usePostInquiry(
+ location.state?.from ?? ROUTES.main,
+ handleModalOpen
+);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const { mutate: postInquiry } = usePostInquiry( | |
| location.state.from, | |
| handleModalOpen | |
| ); | |
| const { mutate: postInquiry } = usePostInquiry( | |
| location.state?.from ?? ROUTES.main, | |
| handleModalOpen | |
| ); |
구현내용
send-alarm 주석처리 (에러 의심)
문의하기 페이지로 넘어올 때 작성 후 다시 머무르던 페이지로 이동 기능 구현
문의하기 각 값이 없을 때 모달창 띄워주기
문의하기 작성 완료시 성공 모달 띄워주기
문의하기 mutate error 모달 처리
연관이슈
close #269
Summary by CodeRabbit
신규 기능
개선사항
버그 수정