diff --git a/src/components/user/mypage/ContentTab.tsx b/src/components/user/mypage/ContentTab.tsx
index 9f11a91d..86d60aa7 100644
--- a/src/components/user/mypage/ContentTab.tsx
+++ b/src/components/user/mypage/ContentTab.tsx
@@ -57,7 +57,6 @@ export default function ContentTab({ filter, $justifyContent }: ContentProps) {
to={filter.url}
onClick={() => handleChangeId(filter.id as number)}
>
- {' '}
{filter.title}
diff --git a/src/components/user/mypage/activityLog/inquiries/Inquiries.styled.ts b/src/components/user/mypage/activityLog/inquiries/Inquiries.styled.ts
index 4bb756a6..d7c915fb 100644
--- a/src/components/user/mypage/activityLog/inquiries/Inquiries.styled.ts
+++ b/src/components/user/mypage/activityLog/inquiries/Inquiries.styled.ts
@@ -16,12 +16,13 @@ export const InquiriesTableHeadContainer = styled.div`
padding-top: 1rem;
top: 0;
background: ${({ theme }) => theme.color.lightgrey};
+ z-index: 10000;
`;
export const InquiriesTableHeadWrapper = styled.div`
width: 100%;
display: grid;
- grid-template-columns: 8% 15% 65% 17%;
+ grid-template-columns: 8% 15% 65% 12%;
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 0.5rem;
@@ -51,4 +52,8 @@ export const InquiriesWrapper = styled.div`
gap: 1.5rem;
`;
+export const MyInquiriesWrapper = styled.div`
+ scroll-margin-top: 65px;
+`;
+
export const WrapperNoContentAppliedProjects = styled(WrapperNoContent)``;
diff --git a/src/components/user/mypage/activityLog/inquiries/Inquiries.tsx b/src/components/user/mypage/activityLog/inquiries/Inquiries.tsx
index a9c573e8..97b43cd1 100644
--- a/src/components/user/mypage/activityLog/inquiries/Inquiries.tsx
+++ b/src/components/user/mypage/activityLog/inquiries/Inquiries.tsx
@@ -1,4 +1,4 @@
-import { useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
import useGetUserActivity from '../../../../../hooks/admin/useGetAllUserActivity';
import ContentBorder from '../../../../common/contentBorder/ContentBorder';
import NoContent from '../../../../common/noContent/NoContent';
@@ -6,13 +6,27 @@ import Spinner from '../../Spinner';
import * as S from './Inquiries.styled';
import Inquiry from './inquiry/Inquiry';
import type { MyInquiries } from '../../../../../models/activityLog';
+import { useLayoutEffect, useRef } from 'react';
export default function Inquiries() {
const { userId } = useParams();
+ const { state } = useLocation();
+ const { id } = state || {};
const { userActivityData, isLoading } = useGetUserActivity(
Number(userId),
'inquiries'
);
+ const inquiriesRef = useRef<(HTMLDivElement | null)[]>([]);
+
+ useLayoutEffect(() => {
+ if (!id || !userActivityData) return;
+ 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]);
if (isLoading) {
return (
@@ -49,11 +63,12 @@ export default function Inquiries() {
{myInquiriesData.map((list, index) => (
- (inquiriesRef.current[index] = el)}
key={`${index}-${list.title}`}
- list={list}
- no={myInquiriesData.length - index}
- />
+ >
+
+
))}
diff --git a/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts b/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts
index 4c1273c2..90e2784c 100644
--- a/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts
+++ b/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts
@@ -9,7 +9,7 @@ export const InquiryTitleWrapper = styled.button`
text-align: start;
font-size: 1.1rem;
display: grid;
- grid-template-columns: 8% 15% 65% 17%;
+ grid-template-columns: 8% 15% 65% 12%;
cursor: pointer;
`;
@@ -34,8 +34,8 @@ export const InquiryStateSpan = styled.span<{ $isCompletedAnswer: boolean }>`
$isCompletedAnswer &&
css`
background: ${({ theme }) => theme.color.navy};
- border-radius: ${({ theme }) => theme.borderRadius.small};
- padding: 0.2rem;
+ border-radius: ${({ theme }) => theme.borderRadius.large};
+ padding: 0.2rem 0.5rem;
`}
`;
diff --git a/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx b/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx
index 21881354..45c3ce4d 100644
--- a/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx
+++ b/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx
@@ -1,9 +1,10 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
import type { MyInquiries } from '../../../../../../models/activityLog';
import * as S from './Inquiry.styled';
import { My_INQUIRIES_MESSAGE } from '../../../../../../constants/user/customerService';
import ContentBorder from '../../../../../common/contentBorder/ContentBorder';
import { ChevronRightIcon } from '@heroicons/react/24/outline';
+import { useLocation } from 'react-router-dom';
interface InquiryProps {
list: MyInquiries;
@@ -16,26 +17,28 @@ interface IsImageOpen {
}
export default function Inquiry({ list, no }: InquiryProps) {
+ const { state } = useLocation();
+ const { id } = state || {};
const [isOpen, setIsOpen] = useState(false);
const [isImageOpen, setIsImageOpen] = useState({
isImageOpen: false,
url: '',
});
const answer = list.answer || '';
- const answerRef = useRef(null);
+ const divRef = useRef(null);
- const handleChangeAnswerRef = () => {
- if (answerRef && answerRef.current) {
- answerRef.current.style.height = 'auto';
- answerRef.current.style.height = `${answerRef.current.scrollHeight}px`;
+ useEffect(() => {
+ if (list.id === id) {
+ setIsOpen(true);
}
- };
+ }, [list.id, id]);
return (
-
+
setIsOpen((prev) => !prev)}
+ data-id={list.id}
>
{no}
{`[${list.category}]`}
diff --git a/src/components/user/mypage/notifications/all/All.tsx b/src/components/user/mypage/notifications/all/All.tsx
index 2855a368..f40fe33f 100644
--- a/src/components/user/mypage/notifications/all/All.tsx
+++ b/src/components/user/mypage/notifications/all/All.tsx
@@ -6,6 +6,7 @@ import { useAlarmDelete } from '../../../../../hooks/user/useAlarmDelete';
import { useAlarmPatch } from '../../../../../hooks/user/useAlarmPatch';
import useAlarmList from '../../../../../hooks/user/useAlarmList';
import NoContent from '../../../../common/noContent/NoContent';
+import { ROUTES } from '../../../../../constants/routes';
export default function All() {
const { alarmListData, isLoading } = useAlarmList();
@@ -13,18 +14,15 @@ export default function All() {
const { mutate: deleteAlarm } = useAlarmDelete();
const { mutate: patchAlarm } = useAlarmPatch();
- const linkUrl = (id: number, filter: number, replier = 0) => {
- // 문의, 신고 답변시 추후 수정
+ const linkUrl = (id: number, filter: number) => {
if (filter === 1 || filter === 3) {
- if (replier === 3) {
- return `/activity-log/inquiries`;
- } else {
- return `/project-detail/${id}`;
- }
+ return `${ROUTES.projectDetail}/${id}`;
} else if (filter === 2) {
- return `/manage/${id}`;
+ return `${ROUTES.manageProjectsRoot}/${id}`;
+ } else if (filter === 4) {
+ return `${ROUTES.mypage}/${ROUTES.myPageActivityLog}/${ROUTES.activityInquiries}`;
} else {
- return `/mypage/notification`;
+ return `${ROUTES.mypage}/${ROUTES.myPageNotifications}`;
}
};
@@ -45,7 +43,7 @@ export default function All() {
return false;
}).length;
- if (!alarmListData || alarmListData.length === 0 || filterLength === 0) {
+ if (!alarmListData?.length || filterLength === 0) {
return (
@@ -60,6 +58,8 @@ export default function All() {
.filter((list) => {
if (filterId === 0) {
return true;
+ } else if (filterId === 3 && list.alarmFilterId === 4) {
+ return true;
} else if (list.alarmFilterId === filterId) {
return true;
}
@@ -70,7 +70,8 @@ export default function All() {
{/* 신고하기 알림 구별 */}
{list.alarmFilterId !== 5 ? (
patchAlarm(list.id)}
>