Skip to content

Commit 67785c3

Browse files
YouD0313YouD0313
authored
Merge pull request #268 from devpalsPlus/feat/#265
신고 알림필터 수정, 답변 replier 추가 (#issue 265)
2 parents 7c0e492 + 23dfcbe commit 67785c3

File tree

9 files changed

+102
-55
lines changed

9 files changed

+102
-55
lines changed

‎src/components/common/header/Header.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { formatImgPath } from '../../../util/formatImgPath';
1616
import bell from '../../../assets/bell.svg';
1717
import Notification from './Notification/Notification';
1818
import bellLogined from '../../../assets/bellLogined.svg';
19-
import useNotification from '../../../hooks/useNotification';
19+
// import useNotification from '../../../hooks/useNotification';
2020
import { useEffect } from 'react';
2121
import { testLiveAlarm } from '../../../api/alarm.api';
2222

@@ -25,7 +25,7 @@ function Header() {
2525
const { userLogout } = useAuth(handleModalOpen);
2626
const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
2727
const { myData, isLoading } = useMyProfileInfo();
28-
const { signalData, setSignalData } = useNotification();
28+
// const { signalData, setSignalData } = useNotification();
2929

3030
useEffect(() => {
3131
testLiveAlarm();
@@ -51,7 +51,7 @@ function Header() {
5151
<S.HeaderLink>공지사항</S.HeaderLink>
5252
</Link>
5353
</S.HeaderLinkContainer>
54-
<S.Alarm role='button' tabIndex={0} aria-label='알림 메세지'>
54+
{/* <S.Alarm role='button' tabIndex={0} aria-label='알림 메세지'>
5555
{isLoggedIn ? (
5656
<DropDown
5757
toggleButton={
@@ -70,7 +70,7 @@ function Header() {
7070
) : (
7171
<img src={bell} alt='알림' />
7272
)}
73-
</S.Alarm>
73+
</S.Alarm> */}
7474
<DropDown
7575
aria-label='프로필 드롭다운'
7676
toggleButton={

‎src/components/mypage/ContentTab.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ export default function ContentTab({ filter, $justifyContent }: ContentProps) {
2323
function handleChangeId(id: number) {
2424
setFilterId(id);
2525
}
26-
2726
useEffect(() => {
2827
if (
2928
pathname.includes(ROUTES.notificationsAppliedProjects) ||

‎src/components/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,19 +31,28 @@ export const InquiryContentWrapper = styled.div`
3131

3232
export const InquiryContent = styled.div``;
3333

34+
export const InquiryImgContainer = styled.div`
35+
display: flex;
36+
flex-direction: column;
37+
`;
38+
3439
export const InquiryImgWrapper = styled.div`
3540
margin-top: 1rem;
3641
cursor: pointer;
37-
`;
38-
39-
export const InquiryModalImgWrapper = styled.div`
42+
width: fit-content;
4043
display: flex;
4144
`;
4245

46+
export const ImgWrapper = styled.div``;
47+
4348
export const InquiryImg = styled.img`
4449
width: 5rem;
4550
`;
4651

52+
export const MessageWrapper = styled.div`
53+
font-size: 0.8rem;
54+
`;
55+
4756
export const ModalImgContainer = styled.div`
4857
position: fixed;
4958
top: 0;
@@ -57,6 +66,7 @@ export const ModalImgContainer = styled.div`
5766
justify-content: center;
5867
align-items: center;
5968
background: rgba(0, 0, 0, 0.7);
69+
overflow: auto;
6070
`;
6171

6272
export const ModalImgWrapper = styled.div`
@@ -71,7 +81,7 @@ export const ModalImgWrapper = styled.div`
7181
width: fit-content;
7282
`;
7383

74-
export const ModalImgButtonWrapper = styled.div`
84+
export const ModalImgMessageWrapper = styled.div`
7585
width: 100%;
7686
color: ${({ theme }) => theme.color.white};
7787
font-size: 0.8rem;

‎src/components/mypage/activityLog/inquiries/inquiry/Inquiry.tsx‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -32,21 +32,26 @@ export default function Inquiry({ list, no }: InquiryProps) {
3232
<S.InquiryContentWrapper>
3333
<S.InquiryContent>{list.content}</S.InquiryContent>
3434
{list.imageUrls.length !== 0 && (
35-
<S.InquiryModalImgWrapper>
36-
{list.imageUrls.map((url) => (
37-
<S.InquiryImgWrapper
38-
key={`${list.category}-${list.title}-${url}`}
39-
onClick={() =>
40-
setIsImageOpen({
41-
isImageOpen: true,
42-
url,
43-
})
44-
}
45-
>
46-
<S.InquiryImg src={url} />
47-
</S.InquiryImgWrapper>
48-
))}
49-
</S.InquiryModalImgWrapper>
35+
<S.InquiryImgContainer>
36+
<S.InquiryImgWrapper>
37+
{list.imageUrls.map((url) => (
38+
<S.ImgWrapper
39+
key={`${list.category}-${list.title}-${url}`}
40+
onClick={() =>
41+
setIsImageOpen({
42+
isImageOpen: true,
43+
url,
44+
})
45+
}
46+
>
47+
<S.InquiryImg src={url} />
48+
</S.ImgWrapper>
49+
))}
50+
</S.InquiryImgWrapper>
51+
<S.MessageWrapper>
52+
{INQUIRY_MESSAGE.blowUpMessage}
53+
</S.MessageWrapper>
54+
</S.InquiryImgContainer>
5055
)}
5156
{isImageOpen.isImageOpen && (
5257
<S.ModalImgContainer>
@@ -58,9 +63,9 @@ export default function Inquiry({ list, no }: InquiryProps) {
5863
})
5964
}
6065
>
61-
<S.ModalImgButtonWrapper>
66+
<S.ModalImgMessageWrapper>
6267
{INQUIRY_MESSAGE.isImageOpenMessage}
63-
</S.ModalImgButtonWrapper>
68+
</S.ModalImgMessageWrapper>
6469
<S.ModalImg src={isImageOpen.url} />
6570
</S.ModalImgWrapper>
6671
</S.ModalImgContainer>

‎src/components/mypage/notifications/all/All.styled.ts‎

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import styled from 'styled-components';
1+
import styled, { css } from 'styled-components';
22

33
export const WrapperNoContent = styled.div`
44
height: 100%;
@@ -24,21 +24,33 @@ export const WrapperNotification = styled.div<{ $enabled: boolean }>`
2424
color: ${({ $enabled, theme }) => $enabled && theme.color.placeholder};
2525
`;
2626

27-
export const SpanNotification = styled.span<{ $enabled: boolean }>`
27+
export const SpanNotification = styled.span<{
28+
$enabled: boolean;
29+
$warn: boolean;
30+
}>`
2831
position: relative;
2932
width: fit-content;
33+
${({ $warn, theme }) =>
34+
$warn &&
35+
css`
36+
color: ${theme.color.warn};
37+
`}
3038
&::after {
31-
content: '';
32-
position: absolute;
33-
left: 0;
34-
bottom: -2px;
35-
width: 100%;
36-
height: 1px;
37-
background: ${({ $enabled, theme }) =>
38-
$enabled ? theme.color.placeholder : '#000'};
39-
transform: scaleX(0);
40-
transform-origin: left;
41-
transition: transform 0.2s ease-in-out 0.1s;
39+
${({ $warn }) =>
40+
!$warn &&
41+
css`
42+
content: '';
43+
position: absolute;
44+
left: 0;
45+
bottom: -2px;
46+
width: 100%;
47+
height: 1px;
48+
transform: scaleX(0);
49+
transform-origin: left;
50+
transition: transform 0.2s ease-in-out 0.1s;
51+
`}
52+
background: ${({ $warn, $enabled, theme }) =>
53+
!$warn && $enabled ? theme.color.placeholder : '#000'};
4254
}
4355
&:hover::after {
4456
transform: scaleX(1);

‎src/components/mypage/notifications/all/All.tsx‎

Lines changed: 31 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,18 @@ export default function All() {
1313
const { mutate: deleteAlarm } = useAlarmDelete();
1414
const { mutate: patchAlarm } = useAlarmPatch();
1515

16-
const linkUrl = (id: number, filter: number) => {
17-
switch (filter) {
18-
case 1:
19-
case 3:
16+
const linkUrl = (id: number, filter: number, replier = 0) => {
17+
// 문의, 신고 답변시 추후 수정
18+
if (filter === 1 || filter === 3) {
19+
if (replier === 3) {
20+
return `/activity-log/inquiries`;
21+
} else {
2022
return `/project-detail/${id}`;
21-
case 2:
22-
return `/manage/${id}`;
23-
default:
24-
return `/mypage/notification`;
23+
}
24+
} else if (filter === 2) {
25+
return `/manage/${id}`;
26+
} else {
27+
return `/mypage/notification`;
2528
}
2629
};
2730

@@ -51,15 +54,28 @@ export default function All() {
5154
})
5255
.map((list) => (
5356
<S.WrapperNotification $enabled={list.enabled} key={list.id}>
54-
<Link
55-
to={linkUrl(list.routingId, list.alarmFilterId)}
56-
onClick={() => patchAlarm(list.id)}
57-
>
58-
<S.SpanNotification $enabled={list.enabled}>
57+
{/* 신고하기 알림 구별 */}
58+
{list.alarmFilterId !== 5 ? (
59+
<Link
60+
to={linkUrl(list.routingId, list.alarmFilterId, list.replier)}
61+
onClick={() => patchAlarm(list.id)}
62+
>
63+
<S.SpanNotification
64+
$warn={list.alarmFilterId === 5}
65+
$enabled={list.enabled}
66+
>
67+
{list.content}
68+
</S.SpanNotification>
69+
</Link>
70+
) : (
71+
<S.SpanNotification
72+
$warn={list.alarmFilterId === 5}
73+
$enabled={list.enabled}
74+
>
5975
{list.content}
6076
</S.SpanNotification>
61-
</Link>
62-
{list.alarmFilterId !== 4 && (
77+
)}
78+
{list.alarmFilterId !== 5 && (
6379
<S.XButtonNotification
6480
onClick={() => deleteAlarm(list.id)}
6581
$enabled={list.enabled}

‎src/constants/customerService.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,6 @@ export const EMPTY_IMAGE =
1111
export const INQUIRY_MESSAGE = {
1212
categoryDefault: '카테고리',
1313
fileDefault: '선택된 파일이 없습니다.',
14+
blowUpMessage: '클릭하면 이미지를 크게 볼 수 있습니다.',
1415
isImageOpenMessage: '이미지를 클릭하면 사라집니다.',
1516
};

‎src/models/alarm.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ export interface Alarm {
2121
alarmFilterId: number;
2222
createdAt: string;
2323
enabled: boolean;
24+
replier?: number;
25+
reCommentUserId?: number;
2426
}
2527

2628
export interface AlarmLive {

‎src/style/theme.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ export type ColorKey =
99
| 'red'
1010
| 'green'
1111
| 'navy'
12-
| 'lightnavy';
12+
| 'lightnavy'
13+
| 'warn';
1314

1415
export type HeadingSize =
1516
| 'large'
@@ -76,6 +77,7 @@ export const defaultTheme: Theme = {
7677
green: '#a2d393',
7778
navy: '#213555',
7879
lightnavy: '#92bbf0',
80+
warn: '#EC1E4F',
7981
},
8082
heading: {
8183
large: { fontSize: '1.75rem', tabletFontSize: '1.5rem' },

0 commit comments

Comments
 (0)