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' },