신고 알림필터 수정, 답변 replier 추가 (#issue 265) #268
Conversation
Walkthrough이번 변경사항은 주로 알림(Notification) 기능과 문의(Inquiry) 이미지 표시 관련 UI 개선에 초점을 맞추고 있습니다. Header 컴포넌트에서 알림 벨 UI와 관련된 코드가 주석 처리되어 사용되지 않게 되었으며, 문의 이미지 영역은 새로운 컨테이너 및 메시지 추가로 구조가 변경되었습니다. 알림 모델과 스타일에도 경고(warn) 상태를 위한 속성 및 스타일이 추가되었습니다. 또한, 알림 목록 렌더링 로직이 수정되어 특정 필터에 따라 링크 및 경고 스타일이 다르게 적용됩니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant AllNotifications
participant Router
User->>AllNotifications: 알림 목록 조회
AllNotifications->>AllNotifications: alarmFilterId, replier 등 확인
alt alarmFilterId == 5
AllNotifications-->>User: 경고 스타일로 메시지 표시 (링크 없음)
else
AllNotifications->>Router: linkUrl(replier 등)로 이동
AllNotifications-->>User: 일반 알림 메시지(링크 포함) 표시
end
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ 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: 0
🔭 Outside diff range comments (1)
src/components/common/header/Header.tsx (1)
54-73: 💡 Verification agent🧩 Analysis chain
헤더의 알림 벨 UI 제거에 대한 설명이 필요합니다.
알림 벨 UI 전체가 주석 처리되었습니다. 이는 사용자 인터페이스와 사용자 경험에 중요한 변화를 가져올 수 있습니다.
다음 확인이 필요합니다:
- 알림 UI가 다른 곳으로 이동되었는지
- 이것이 PR 목표인 "신고 알림필터 수정"의 일부인지
- 사용자들이 어떻게 알림을 확인할 수 있는지에 대한 대체 방법이 있는지
🏁 Script executed:
#!/bin/bash # 알림 관련 컴포넌트가 다른 곳에서 사용되는지 확인 echo "알림 관련 컴포넌트 사용 현황 확인:" rg -A 3 "Notification" --type ts --type tsxLength of output: 122
추가 검증을 위해 아래 스크립트를 실행해주세요.
알림 관련 컴포넌트 정의 및 사용 위치를 파악합니다.
🏁 Script executed:
#!/bin/bash echo "1) Notification 컴포넌트 파일 위치 확인:" fd --extension tsx Notification.tsx echo "2) Notification 컴포넌트 정의 검색:" rg "export .*Notification" -n echo "3) Notification 컴포넌트 사용 검색:" rg "<Notification" -n echo "4) import Notification 검색:" rg "import .*Notification" -n echo "5) S.Alarm(헤더 알림) 사용 검색:" rg "S\\.Alarm" -nLength of output: 2613
헤더 알림 아이콘 제거에 대한 설명 추가 필요
src/components/common/header/Notification/Notification.tsx컴포넌트는 여전히 남아 있으나, 헤더(Header.tsx)에서 전체가 주석 처리되어 있습니다.- 실제 알림 내용은
src/routes/AppRoutes.tsx의 NotificationsAll(혹은 관련 NotificationsAppliedProjects 등) 페이지에서 확인할 수 있습니다.- 이 변경이 PR 목표인 “신고 알림 필터 수정” 의 일부인지, 또는 사용자에게 대체 알림 접근 경로(알림 페이지)로 안내하는 UI/네비게이션 추가가 필요한지 명확히 설명 부탁드립니다.
🧹 Nitpick comments (1)
src/components/mypage/notifications/all/All.styled.ts (1)
38-54: 가상 요소의 조건부 적용 로직이 복잡할 수 있습니다.
::after가상 요소의 스타일을 경고 상태에 따라 조건부로 적용하는 부분이 다소 복잡합니다. 이 접근 방식은 작동하지만, 두 가지 다른 스타일드 컴포넌트로 분리하면 더 명확할 수 있습니다.다음과 같이 두 개의 컴포넌트로 분리하는 방법을 고려해보세요:
-export const SpanNotification = styled.span<{ - $enabled: boolean; - $warn: boolean; -}>` - position: relative; - width: fit-content; - ${({ $warn, theme }) => - $warn && - css` - color: ${theme.color.warn}; - `} - &::after { - ${({ $warn }) => - !$warn && - css` - content: ''; - position: absolute; - left: 0; - bottom: -2px; - width: 100%; - height: 1px; - transform: scaleX(0); - transform-origin: left; - transition: transform 0.2s ease-in-out 0.1s; - `} - background: ${({ $warn, $enabled, theme }) => - !$warn && $enabled ? theme.color.placeholder : '#000'}; - } - &:hover::after { - transform: scaleX(1); - } +const BaseSpanNotification = styled.span` + position: relative; + width: fit-content; +`; + +export const SpanNotificationWarning = styled(BaseSpanNotification)<{ + $enabled: boolean; +}>` + color: ${({ theme }) => theme.color.warn}; +`; + +export const SpanNotification = styled(BaseSpanNotification)<{ + $enabled: boolean; +}>` + &::after { + content: ''; + position: absolute; + left: 0; + bottom: -2px; + width: 100%; + height: 1px; + transform: scaleX(0); + transform-origin: left; + transition: transform 0.2s ease-in-out 0.1s; + background: ${({ $enabled, theme }) => + $enabled ? theme.color.placeholder : '#000'}; + } + &:hover::after { + transform: scaleX(1); + } `;이렇게 하면 조건부 로직이 줄어들고 각 컴포넌트의 역할이 더 명확해집니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
src/components/common/header/Header.tsx(4 hunks)src/components/mypage/ContentTab.tsx(0 hunks)src/components/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts(3 hunks)src/components/mypage/activityLog/inquiries/inquiry/Inquiry.tsx(2 hunks)src/components/mypage/notifications/all/All.styled.ts(2 hunks)src/components/mypage/notifications/all/All.tsx(2 hunks)src/constants/customerService.ts(1 hunks)src/models/alarm.ts(1 hunks)src/style/theme.ts(2 hunks)
💤 Files with no reviewable changes (1)
- src/components/mypage/ContentTab.tsx
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/components/mypage/activityLog/inquiries/inquiry/Inquiry.tsx (1)
src/constants/customerService.ts (1)
INQUIRY_MESSAGE(11-16)
src/components/mypage/notifications/all/All.tsx (1)
src/api/alarm.api.ts (1)
patchAlarm(24-36)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: accessibility-test
🔇 Additional comments (18)
src/constants/customerService.ts (1)
14-14: 사용자 친화적인 UI 메시지 추가에 대한 좋은 결정입니다.이미지 확대 기능에 대한 안내 메시지를 추가하여 사용자 경험이 향상될 것입니다. 직관적인 메시지를 통해 사용자가 이미지와 상호작용하는 방법을 명확히 알 수 있게 됩니다.
src/models/alarm.ts (1)
24-25: 알람 모델 확장을 통한 기능 개선이 잘 이루어졌습니다.
replier와reCommentUserId속성을 옵셔널 필드로 추가하여 답변자와 대댓글 작성자 정보를 포함할 수 있게 되었습니다. 이는 PR 목표인 "답변 replier 추가"와 일치하며, 기존 코드와 호환성을 유지하면서 기능을 확장했습니다.src/style/theme.ts (2)
12-13: 테마에 경고색 키 추가가 적절히 이루어졌습니다.'warn' 색상 키를 타입 정의에 추가하여 타입 안전성을 유지했습니다. 경고 상태를 위한 시각적 피드백을 제공하는 데 필요한 변경사항입니다.
80-80: 경고 상태를 위한 적절한 색상 값이 설정되었습니다.경고 메시지를 위한 선명한 붉은색(
#EC1E4F)을 사용한 것은 시각적으로 주의를 끌기에 적합합니다. 알림 필터 수정 목적에 부합하는 색상 선택입니다.src/components/common/header/Header.tsx (1)
19-19: 알림 훅 및 관련 기능의 주석 처리에 대한 의도 확인이 필요합니다.
useNotification훅과 관련 상태 변수가 주석 처리되었습니다. 이는 알림 기능이 다른 곳으로 이동되거나 임시적으로 비활성화되었을 가능성을 시사합니다.이 변경으로 인한 영향과 의도를 명확히 파악하기 위해 다음 사항을 확인해주세요:
- 알림 기능이 다른 위치에서 구현되었는지
- 이 변경이 임시적인지 혹은 영구적인지
- 사용자 경험에 어떤 영향을 미치는지
Also applies to: 28-28
src/components/mypage/notifications/all/All.styled.ts (2)
1-1: styled-components에서 css 헬퍼 추가는 적절합니다.조건부 스타일 적용을 위해
css헬퍼를 import한 것은 좋은 방법입니다. 이를 통해 조건부 스타일 블록을 더 깔끔하게 관리할 수 있게 되었습니다.
27-37: 경고 상태를 위한 스타일 확장이 잘 구현되었습니다.
$warnprop을 추가하여 경고 상태에 따른 조건부 스타일링이 가능하도록 하였습니다. 경고 메시지의 시각적 차별화를 위한 스타일 코드가 잘 작성되었습니다.src/components/mypage/notifications/all/All.tsx (3)
16-29:linkUrl함수의 라우팅 로직 개선
replier매개변수를 추가하여 알림 유형(filter)에 따라 다른 경로로 라우팅하는 기능이 향상되었습니다. 특히 문의나 신고(filter가 1 또는 3)일 때 replier가 3인 경우/activity-log/inquiries페이지로 이동하도록 하는 조건부 로직이 잘 구현되었습니다.주석에서 언급된 "문의, 신고 답변시 추후 수정" 내용이 구현된 것으로 보입니다.
57-77: 신고 알림에 대한 UI 처리 로직 개선신고 알림(
alarmFilterId가 5인 경우)을 다른 알림과 구분하여 처리하는 로직이 적절하게 구현되었습니다. 신고 알림은 링크로 이동하지 않고 경고 스타일($warn)을 적용하여 시각적으로 구분되도록 했습니다.조건부 렌더링을 사용하여 알림 유형에 따라 다른 UI를 보여주는 접근 방식이 깔끔합니다.
78-85: 삭제 버튼 표시 조건 수정신고 알림(
alarmFilterId가 5인 경우)에 대해 삭제 버튼을 표시하지 않도록 조건이 수정되었습니다. 이는 신고 알림의 특성을 고려한 적절한 변경입니다.이전에는
alarmFilterId가 4인 경우에 대한 조건이었는데, 5로 변경된 것으로 보입니다. 이는 신고 알림에 대한 일관된 처리를 보장합니다.src/components/mypage/activityLog/inquiries/inquiry/Inquiry.tsx (2)
35-54: 이미지 표시 구조 개선 및 사용자 안내 메시지 추가이미지 표시 섹션의 구조가 개선되었습니다. 새로운
S.InquiryImgContainer를 사용하여 이미지 컨테이너를 감싸고, 각 이미지는 개별S.ImgWrapper로 래핑되었습니다. 또한 사용자에게 "클릭하면 이미지를 크게 볼 수 있습니다"라는 안내 메시지를 추가하여 사용자 경험을 향상시켰습니다.이러한 구조 변경은 UI의 계층 구조를 명확히 하고 사용자에게 더 나은 안내를 제공합니다.
66-68: 모달 메시지 래퍼 이름 변경모달 메시지 래퍼 컴포넌트의 이름이
S.ModalImgButtonWrapper에서S.ModalImgMessageWrapper로 변경되었습니다. 이는 컴포넌트의 실제 역할(메시지 표시)을 더 정확히 반영하는 이름입니다.이름 변경은 코드의 가독성과 유지보수성을 향상시킵니다.
src/components/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts (6)
34-37: 새로운 이미지 컨테이너 스타일 컴포넌트 추가새로운
InquiryImgContainer스타일 컴포넌트가 추가되었습니다. 이 컴포넌트는 flex 레이아웃을 사용하여 이미지와 메시지를 세로로 배치하는 역할을 합니다.이 스타일 컴포넌트의 추가는 Inquiry.tsx 파일에서의 구조 변경과 일치하며, UI 레이아웃을 개선합니다.
39-44: 이미지 래퍼 스타일 개선
InquiryImgWrapper스타일 컴포넌트에width: fit-content속성이 추가되었습니다. 이는 이미지 래퍼의 너비가 내용에 맞게 조정되도록 하여 레이아웃을 개선합니다.이 변경은 이미지 표시 영역의 시각적 품질을 향상시킵니다.
46-46: 개별 이미지 래퍼 스타일 컴포넌트 추가새로운
ImgWrapper스타일 컴포넌트가 추가되었습니다. 비록 현재는 비어 있지만, 향후 개별 이미지 래퍼에 대한 스타일을 추가할 수 있는 확장성을 제공합니다.이는 Inquiry.tsx에서의 구조 변경과 일치합니다.
52-54: 사용자 안내 메시지 스타일 컴포넌트 추가새로운
MessageWrapper스타일 컴포넌트가 추가되었습니다. 이 컴포넌트는 작은 글꼴 크기(0.8rem)를 사용하여 이미지 아래에 표시되는 사용자 안내 메시지의 스타일을 지정합니다.이는 Inquiry.tsx에서 추가된 사용자 안내 메시지를 위한 적절한 스타일링입니다.
69-69: 모달 이미지 컨테이너에 오버플로 스크롤 추가
ModalImgContainer스타일 컴포넌트에overflow: auto속성이 추가되었습니다. 이는 모달 내용이 화면 크기를 초과할 경우 스크롤이 가능하도록 하여 사용자 경험을 개선합니다.큰 이미지를 볼 때 특히 유용한 개선사항입니다.
84-90: 모달 메시지 래퍼 이름 변경 및 스타일 유지
ModalImgButtonWrapper가ModalImgMessageWrapper로 이름이 변경되었습니다. 이 컴포넌트는 모달 내의 메시지를 위한 스타일을 정의하며, 흰색 텍스트와 네이비 배경색, 약간의 패딩을 가지고 있습니다.이름 변경은 Inquiry.tsx 파일의 변경사항과 일치하며, 컴포넌트의 실제 역할을 더 정확히 반영합니다.
구현내용
신고 알림 필터 수정, 답변 replier 추가 (문의 답변 추후 추가 예정)
연관이슈
close #265
Summary by CodeRabbit
신규 기능
버그 수정
스타일
리팩터링
기타