관리자 문의답변 추가에 대한 마이페이지 알림 추가 수정( #issue 353 ) #356
Conversation
|
""" Walkthrough이 변경사항은 마이페이지의 활동기록 문의 알림 필터링 로직을 추가하고, 문의글 스크롤 시 '답변완료' 표시가 헤더를 넘어가지 않도록 CSS를 수정합니다. 또한, 라우트 상수 적용, 링크 상태 관리, 스타일 조정 등 자잘한 코드 개선이 포함되어 있습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MyPage
participant Inquiries
participant Inquiry
User->>MyPage: 문의 알림 클릭 (with id)
MyPage->>Inquiries: 렌더링, useLocation에서 id 추출
Inquiries->>Inquiries: headRef로 헤더 높이 측정
Inquiries->>Inquiries: inquiriesRef로 각 문의글 참조
Inquiries->>Inquiries: id 일치하는 문의글 찾기
Inquiries->>Inquiry: 해당 Inquiry 컴포넌트에 isOpen 적용
Inquiries->>Inquiries: 해당 문의글로 스크롤 이동
Assessment against linked issues
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error Exit handler never called! 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
✨ 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: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/components/user/mypage/ContentTab.tsx(0 hunks)src/components/user/mypage/activityLog/inquiries/Inquiries.styled.ts(2 hunks)src/components/user/mypage/activityLog/inquiries/Inquiries.tsx(3 hunks)src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts(2 hunks)src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx(2 hunks)src/components/user/mypage/notifications/all/All.tsx(4 hunks)src/constants/user/myPageFilter.ts(1 hunks)
💤 Files with no reviewable changes (1)
- src/components/user/mypage/ContentTab.tsx
🧰 Additional context used
🧠 Learnings (4)
📓 Common learnings
Learnt from: YouD0313
PR: devpalsPlus/frontend#334
File: src/components/common/admin/title/AdminTitle.styled.ts:4-10
Timestamp: 2025-06-05T15:59:56.230Z
Learning: YouD0313 prefers using position: fixed for admin headers due to layout requirements, even if it requires viewport-relative width calculations like calc(100vw - 20rem).
src/components/user/mypage/activityLog/inquiries/Inquiries.styled.ts (2)
Learnt from: YouD0313
PR: devpalsPlus/frontend#334
File: src/components/common/admin/title/AdminTitle.styled.ts:4-10
Timestamp: 2025-06-05T15:59:56.230Z
Learning: YouD0313 prefers using position: fixed for admin headers due to layout requirements, even if it requires viewport-relative width calculations like calc(100vw - 20rem).
Learnt from: YouD0313
PR: devpalsPlus/frontend#342
File: src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts:82-88
Timestamp: 2025-06-09T14:42:43.454Z
Learning: InquiryAnswerIconWrapper는 단일 ChevronRightIcon만 포함하며, 부모 InquiryAnswerContentWrapper가 이미 display: flex로 레이아웃을 제어하고 있어서 align-items: start 속성이 불필요할 수 있음
src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx (4)
Learnt from: YouD0313
PR: devpalsPlus/frontend#278
File: src/pages/login/LoginSuccess.tsx:13-24
Timestamp: 2025-05-11T09:39:02.041Z
Learning: useEffect 내에서 사용하는 모든 외부 변수(예: searchParams, storeLogin, navigate)는 의존성 배열에 포함되어야 합니다.
Learnt from: YouD0313
PR: devpalsPlus/frontend#278
File: src/pages/login/LoginSuccess.tsx:13-24
Timestamp: 2025-05-11T09:39:02.041Z
Learning: useEffect 내에서 사용하는 모든 외부 변수(예: searchParams, storeLogin, navigate)는 의존성 배열에 포함되어야 합니다.
Learnt from: YouD0313
PR: devpalsPlus/frontend#278
File: src/pages/login/LoginSuccess.tsx:13-24
Timestamp: 2025-05-11T09:39:02.041Z
Learning: useEffect 내에서 사용하는 모든 외부 변수(예: searchParams, storeLogin, navigate)는 의존성 배열에 포함되어야 합니다.
Learnt from: YouD0313
PR: devpalsPlus/frontend#278
File: src/pages/login/LoginSuccess.tsx:13-24
Timestamp: 2025-05-11T09:39:02.041Z
Learning: useEffect 내에서 사용하는 모든 외부 변수(예: searchParams, storeLogin, navigate)는 의존성 배열에 포함되어야 합니다.
src/components/user/mypage/notifications/all/All.tsx (2)
Learnt from: YouD0313
PR: devpalsPlus/frontend#278
File: src/pages/login/LoginSuccess.tsx:13-24
Timestamp: 2025-05-11T09:39:02.041Z
Learning: 사용자 알림은 브라우저의 기본 alert() 대신 애플리케이션의 Modal 컴포넌트(src/components/common/modal/Modal.tsx)를 사용하는 것이 선호됩니다.
Learnt from: YouD0313
PR: devpalsPlus/frontend#278
File: src/pages/login/LoginSuccess.tsx:13-24
Timestamp: 2025-05-11T09:39:02.041Z
Learning: 사용자 알림은 브라우저의 기본 alert() 대신 애플리케이션의 Modal 컴포넌트(src/components/common/modal/Modal.tsx)를 사용하는 것이 선호됩니다.
🧬 Code Graph Analysis (2)
src/constants/user/myPageFilter.ts (1)
src/constants/routes.ts (1)
ROUTES(1-33)
src/components/user/mypage/notifications/all/All.tsx (4)
src/api/alarm.api.ts (2)
deleteAlarm(16-23)patchAlarm(25-37)src/hooks/user/useAlarmDelete.ts (1)
useAlarmDelete(6-21)src/hooks/user/useAlarmPatch.ts (1)
useAlarmPatch(6-20)src/constants/routes.ts (1)
ROUTES(1-33)
🔇 Additional comments (16)
src/components/user/mypage/activityLog/inquiries/Inquiries.styled.ts (2)
24-24: 그리드 레이아웃 조정이 일관성 있게 적용되었습니다.마지막 컬럼의 폭을 17%에서 12%로 줄여 레이아웃이 개선되었습니다. 다른 관련 파일들과 일관성을 유지하고 있습니다.
47-49: 스크롤 마진을 위한 새로운 컴포넌트가 적절하게 구현되었습니다.
MyInquiriesWrapper는 헤더 높이를 고려한 스크롤 마진을 설정하여 특정 문의글로 이동할 때 헤더에 가려지지 않도록 합니다. 10px의 추가 여백도 적절합니다.src/constants/user/myPageFilter.ts (1)
9-9: 라우팅 상수 사용으로 코드 품질이 개선되었습니다.하드코딩된 문자열을
ROUTES.projectDetail상수로 교체하여 라우팅 관리가 통합되었습니다. 이는 유지보수성과 타입 안정성을 향상시키는 좋은 개선사항입니다.Also applies to: 15-15, 21-21
src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts (2)
12-12: 그리드 레이아웃이 일관성 있게 조정되었습니다.다른 관련 파일과 마찬가지로 마지막 컬럼 폭을 12%로 조정하여 레이아웃 일관성을 유지하고 있습니다.
37-38: 답변완료 상태의 시각적 표현이 개선되었습니다.border-radius를 large로 변경하고 padding을 수평으로 확장하여 답변완료 상태의 가독성과 시각적 표현이 개선되었습니다.
src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx (1)
20-21: 네비게이션 상태를 통한 자동 열기 기능이 잘 구현되었습니다.
useLocation을 사용해 navigation state에서id를 가져오고, 해당 문의글을 자동으로 열어주는 기능과data-id속성 추가가 적절하게 구현되었습니다.Also applies to: 37-37, 41-41
src/components/user/mypage/notifications/all/All.tsx (4)
9-9: 라우팅 상수 사용으로 코드 품질이 개선되었습니다.
ROUTES상수를 import하여 하드코딩된 문자열을 제거하고 라우팅 관리를 통합했습니다.
17-27: linkUrl 함수가 적절하게 개선되었습니다.
replier매개변수가 제거되고filter === 4인 경우가 추가되어 문의글 관련 알림을 적절히 처리하고 있습니다. 모든 라우팅 경로가 상수로 관리되어 일관성이 향상되었습니다.
61-62: 필터링 로직이 요구사항에 맞게 확장되었습니다.
filterId === 3일 때alarmFilterId === 4인 알림도 포함하도록 하여 댓글&답변 필터에서 관리자 문의답변 알림도 함께 표시되도록 했습니다.
73-74: 네비게이션 상태 전달이 적절하게 구현되었습니다.
alarmFilterId === 4인 경우routingId를 state로 전달하여 해당 문의글을 자동으로 열어주는 기능을 지원합니다. 이는 다른 컴포넌트에서useLocation으로 받아 처리하는 구조와 잘 연결됩니다.src/components/user/mypage/activityLog/inquiries/Inquiries.tsx (6)
1-1: LGTM! 필요한 훅 추가됨네비게이션 상태 접근을 위한
useLocation훅 추가가 적절합니다.
9-9: LGTM! 필요한 React 훅들 추가됨DOM 조작과 상태 관리를 위한 훅들이 적절하게 추가되었습니다.
13-14: LGTM! 네비게이션 상태에서 ID 추출 로직 적절함Optional chaining을 사용하여 안전하게 state에서 id를 추출하는 로직이 좋습니다.
19-21: LGTM! ref와 상태 변수 선언 적절함헤더 높이 계산과 각 문의 아이템 참조를 위한 ref 선언이 적절합니다.
56-56: LGTM! 헤더에 ref 추가 적절함헤더 높이 계산을 위한 ref 추가가 적절합니다.
69-75: LGTM! 문의 아이템 래퍼 구현 적절함각 문의 아이템을 래퍼로 감싸서 ref 관리 및 헤더 높이 전달하는 구현이 적절합니다. 스크롤 마진 조정을 위한 구조가 잘 설계되었습니다.
src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx
Outdated
Show resolved
Hide resolved
| useLayoutEffect(() => { | ||
| if (!id || !headRef?.current) return; | ||
| const height = headRef.current.offsetHeight; | ||
| setHeadHeight(height); | ||
| const idx = userActivityData?.findIndex((item) => item.id == id); | ||
| const targetRef = typeof idx === 'number' ? inquiriesRef.current[idx] : ''; | ||
| if (inquiriesRef?.current && targetRef) { | ||
| targetRef.scrollIntoView({ behavior: 'smooth', block: 'start' }); | ||
| } | ||
| }, [userActivityData, id, headHeight]); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
스크롤 로직 개선 필요
useLayoutEffect 구현에서 몇 가지 개선 사항이 있습니다:
- 라인 27: 엄격한 동등 비교 사용 권장
- 라인 32: 의존성 배열에서
headHeight제거로 무한 재렌더링 방지 - 라인 28: 타입 체크 개선
다음과 같이 수정하시기 바랍니다:
useLayoutEffect(() => {
if (!id || !headRef?.current) return;
const height = headRef.current.offsetHeight;
setHeadHeight(height);
- const idx = userActivityData?.findIndex((item) => item.id == id);
- const targetRef = typeof idx === 'number' ? inquiriesRef.current[idx] : '';
+ const idx = userActivityData?.findIndex((item) => item.id === id);
+ const targetRef = idx !== undefined && idx >= 0 ? inquiriesRef.current[idx] : null;
if (inquiriesRef?.current && targetRef) {
targetRef.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
- }, [userActivityData, id, headHeight]);
+ }, [userActivityData, id]);📝 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.
| useLayoutEffect(() => { | |
| if (!id || !headRef?.current) return; | |
| const height = headRef.current.offsetHeight; | |
| setHeadHeight(height); | |
| const idx = userActivityData?.findIndex((item) => item.id == id); | |
| const targetRef = typeof idx === 'number' ? inquiriesRef.current[idx] : ''; | |
| if (inquiriesRef?.current && targetRef) { | |
| targetRef.scrollIntoView({ behavior: 'smooth', block: 'start' }); | |
| } | |
| }, [userActivityData, id, headHeight]); | |
| useLayoutEffect(() => { | |
| if (!id || !headRef?.current) return; | |
| const height = headRef.current.offsetHeight; | |
| setHeadHeight(height); | |
| const idx = userActivityData?.findIndex((item) => item.id === id); | |
| const targetRef = idx !== undefined && idx >= 0 ? inquiriesRef.current[idx] : null; | |
| if (inquiriesRef?.current && targetRef) { | |
| targetRef.scrollIntoView({ behavior: 'smooth', block: 'start' }); | |
| } | |
| }, [userActivityData, id]); |
🤖 Prompt for AI Agents
In src/components/user/mypage/activityLog/inquiries/Inquiries.tsx around lines
23 to 32, update the useLayoutEffect hook by replacing the loose equality check
(==) with strict equality (===) on line 27, remove headHeight from the
dependency array on line 32 to prevent infinite re-renders, and improve the type
check for idx on line 28 by verifying idx is not -1 instead of checking its
type. These changes will enhance correctness and performance of the scroll
logic.
구현내용
관리자 문의 답변 추가에 대해 마이페이지 알림 필터 추가
알림 클릭시 라우터 이동
내 문의글 이동시 답변완료된 알림의 문의를 보여주고 스크롤 이동
연관이슈
close #353
Summary by CodeRabbit
신규 기능
버그 수정
스타일
리팩터