diff --git a/src/components/common/header/Header.tsx b/src/components/common/header/Header.tsx index 1b2f65af..8bb4c49e 100644 --- a/src/components/common/header/Header.tsx +++ b/src/components/common/header/Header.tsx @@ -16,7 +16,7 @@ import { formatImgPath } from '../../../util/formatImgPath'; import bell from '../../../assets/bell.svg'; import Notification from './Notification/Notification'; import bellLogined from '../../../assets/bellLogined.svg'; -import useNotification from '../../../hooks/useNotification'; +// import useNotification from '../../../hooks/useNotification'; import { useEffect } from 'react'; import { testLiveAlarm } from '../../../api/alarm.api'; @@ -25,7 +25,7 @@ function Header() { const { userLogout } = useAuth(handleModalOpen); const isLoggedIn = useAuthStore((state) => state.isLoggedIn); const { myData, isLoading } = useMyProfileInfo(); - const { signalData, setSignalData } = useNotification(); + // const { signalData, setSignalData } = useNotification(); useEffect(() => { testLiveAlarm(); @@ -51,7 +51,7 @@ function Header() { 공지사항 - + {/* {isLoggedIn ? ( )} - + */} { if ( pathname.includes(ROUTES.notificationsAppliedProjects) || diff --git a/src/components/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts b/src/components/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts index 44647b52..7a349d85 100644 --- a/src/components/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts +++ b/src/components/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts @@ -31,19 +31,28 @@ export const InquiryContentWrapper = styled.div` export const InquiryContent = styled.div``; +export const InquiryImgContainer = styled.div` + display: flex; + flex-direction: column; +`; + export const InquiryImgWrapper = styled.div` margin-top: 1rem; cursor: pointer; -`; - -export const InquiryModalImgWrapper = styled.div` + width: fit-content; display: flex; `; +export const ImgWrapper = styled.div``; + export const InquiryImg = styled.img` width: 5rem; `; +export const MessageWrapper = styled.div` + font-size: 0.8rem; +`; + export const ModalImgContainer = styled.div` position: fixed; top: 0; @@ -57,6 +66,7 @@ export const ModalImgContainer = styled.div` justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.7); + overflow: auto; `; export const ModalImgWrapper = styled.div` @@ -71,7 +81,7 @@ export const ModalImgWrapper = styled.div` width: fit-content; `; -export const ModalImgButtonWrapper = styled.div` +export const ModalImgMessageWrapper = styled.div` width: 100%; color: ${({ theme }) => theme.color.white}; font-size: 0.8rem; diff --git a/src/components/mypage/activityLog/inquiries/inquiry/Inquiry.tsx b/src/components/mypage/activityLog/inquiries/inquiry/Inquiry.tsx index d150ebf0..3e0a7b85 100644 --- a/src/components/mypage/activityLog/inquiries/inquiry/Inquiry.tsx +++ b/src/components/mypage/activityLog/inquiries/inquiry/Inquiry.tsx @@ -32,21 +32,26 @@ export default function Inquiry({ list, no }: InquiryProps) { {list.content} {list.imageUrls.length !== 0 && ( - - {list.imageUrls.map((url) => ( - - setIsImageOpen({ - isImageOpen: true, - url, - }) - } - > - - - ))} - + + + {list.imageUrls.map((url) => ( + + setIsImageOpen({ + isImageOpen: true, + url, + }) + } + > + + + ))} + + + {INQUIRY_MESSAGE.blowUpMessage} + + )} {isImageOpen.isImageOpen && ( @@ -58,9 +63,9 @@ export default function Inquiry({ list, no }: InquiryProps) { }) } > - + {INQUIRY_MESSAGE.isImageOpenMessage} - + diff --git a/src/components/mypage/notifications/all/All.styled.ts b/src/components/mypage/notifications/all/All.styled.ts index 9b60a39c..547fbadc 100644 --- a/src/components/mypage/notifications/all/All.styled.ts +++ b/src/components/mypage/notifications/all/All.styled.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; export const WrapperNoContent = styled.div` height: 100%; @@ -24,21 +24,33 @@ export const WrapperNotification = styled.div<{ $enabled: boolean }>` color: ${({ $enabled, theme }) => $enabled && theme.color.placeholder}; `; -export const SpanNotification = styled.span<{ $enabled: boolean }>` +export const SpanNotification = styled.span<{ + $enabled: boolean; + $warn: boolean; +}>` position: relative; width: fit-content; + ${({ $warn, theme }) => + $warn && + css` + color: ${theme.color.warn}; + `} &::after { - content: ''; - position: absolute; - left: 0; - bottom: -2px; - width: 100%; - height: 1px; - background: ${({ $enabled, theme }) => - $enabled ? theme.color.placeholder : '#000'}; - transform: scaleX(0); - transform-origin: left; - transition: transform 0.2s ease-in-out 0.1s; + ${({ $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); diff --git a/src/components/mypage/notifications/all/All.tsx b/src/components/mypage/notifications/all/All.tsx index 39434831..fa0680b9 100644 --- a/src/components/mypage/notifications/all/All.tsx +++ b/src/components/mypage/notifications/all/All.tsx @@ -13,15 +13,18 @@ export default function All() { const { mutate: deleteAlarm } = useAlarmDelete(); const { mutate: patchAlarm } = useAlarmPatch(); - const linkUrl = (id: number, filter: number) => { - switch (filter) { - case 1: - case 3: + const linkUrl = (id: number, filter: number, replier = 0) => { + // 문의, 신고 답변시 추후 수정 + if (filter === 1 || filter === 3) { + if (replier === 3) { + return `/activity-log/inquiries`; + } else { return `/project-detail/${id}`; - case 2: - return `/manage/${id}`; - default: - return `/mypage/notification`; + } + } else if (filter === 2) { + return `/manage/${id}`; + } else { + return `/mypage/notification`; } }; @@ -51,15 +54,28 @@ export default function All() { }) .map((list) => ( - patchAlarm(list.id)} - > - + {/* 신고하기 알림 구별 */} + {list.alarmFilterId !== 5 ? ( + patchAlarm(list.id)} + > + + {list.content} + + + ) : ( + {list.content} - - {list.alarmFilterId !== 4 && ( + )} + {list.alarmFilterId !== 5 && ( deleteAlarm(list.id)} $enabled={list.enabled} diff --git a/src/constants/customerService.ts b/src/constants/customerService.ts index 56469f05..1a302463 100644 --- a/src/constants/customerService.ts +++ b/src/constants/customerService.ts @@ -11,5 +11,6 @@ export const EMPTY_IMAGE = export const INQUIRY_MESSAGE = { categoryDefault: '카테고리', fileDefault: '선택된 파일이 없습니다.', + blowUpMessage: '클릭하면 이미지를 크게 볼 수 있습니다.', isImageOpenMessage: '이미지를 클릭하면 사라집니다.', }; diff --git a/src/models/alarm.ts b/src/models/alarm.ts index 287a23df..e8ea2397 100644 --- a/src/models/alarm.ts +++ b/src/models/alarm.ts @@ -21,6 +21,8 @@ export interface Alarm { alarmFilterId: number; createdAt: string; enabled: boolean; + replier?: number; + reCommentUserId?: number; } export interface AlarmLive { diff --git a/src/style/theme.ts b/src/style/theme.ts index 3ddd23b1..32ac3e58 100644 --- a/src/style/theme.ts +++ b/src/style/theme.ts @@ -9,7 +9,8 @@ export type ColorKey = | 'red' | 'green' | 'navy' - | 'lightnavy'; + | 'lightnavy' + | 'warn'; export type HeadingSize = | 'large' @@ -76,6 +77,7 @@ export const defaultTheme: Theme = { green: '#a2d393', navy: '#213555', lightnavy: '#92bbf0', + warn: '#EC1E4F', }, heading: { large: { fontSize: '1.75rem', tabletFontSize: '1.5rem' },