feat: MyInquiriesWrapper 추가 및 스크롤 기능 구현, Inquiry 컴포넌트 수정

Author: YouD0313

src/components/user/mypage/activityLog/inquiries/Inquiries.styled.ts

@@ -44,6 +44,10 @@ export const InquiriesTableHeaderState = styled.div`
   text-align: center;
 `;
 
+export const MyInquiriesWrapper = styled.div<{ $headHeight: number }>`
+  scroll-margin-top: ${({ $headHeight }) => $headHeight + 10}px;
+`;
+
 export const InquiriesWrapper = styled.div`
   margin-top: 1rem;
   display: flex;

src/components/user/mypage/activityLog/inquiries/Inquiries.tsx

@@ -1,18 +1,35 @@
-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';
 import Spinner from '../../Spinner';
 import * as S from './Inquiries.styled';
 import Inquiry from './inquiry/Inquiry';
 import type { MyInquiries } from '../../../../../models/activityLog';
+import { useLayoutEffect, useRef, useState } from 'react';
 
 export default function Inquiries() {
   const { userId } = useParams();
+  const { state } = useLocation();
+  const { id } = state || {};
   const { userActivityData, isLoading } = useGetUserActivity(
     Number(userId),
     'inquiries'
   );
+  const headRef = useRef<HTMLDivElement>(null);
+  const inquiriesRef = useRef<(HTMLDivElement | null)[]>([]);
+  const [headHeight, setHeadHeight] = useState<number>(0);
+
+  useLayoutEffect(() => {
+    if (!id || !headRef?.current) return;
+    const height = headRef.current.offsetHeight;
+    setHeadHeight(height);
+    const idx = userActivityData?.findIndex((item) => item.id == id);
+    const targetRef = typeof idx === 'number' ? inquiriesRef.current[idx] : '';
+    if (inquiriesRef?.current && targetRef) {
+      targetRef.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }, [userActivityData, id, headHeight]);
 
   if (isLoading) {
     return (
@@ -36,7 +53,7 @@ export default function Inquiries() {
   return (
     <S.container>
       <S.InquiriesContainer>
-        <S.InquiriesTableHeadContainer>
+        <S.InquiriesTableHeadContainer ref={headRef}>
           <S.InquiriesTableHeadWrapper>
             <S.InquiriesTableHeaderNo>No</S.InquiriesTableHeaderNo>
             <S.InquiriesTableHeaderCategory>
@@ -49,11 +66,13 @@ export default function Inquiries() {
         </S.InquiriesTableHeadContainer>
         <S.InquiriesWrapper>
           {myInquiriesData.map((list, index) => (
-            <Inquiry
+            <S.MyInquiriesWrapper
+              ref={(el) => (inquiriesRef.current[index] = el)}
               key={`${index}-${list.title}`}
-              list={list}
-              no={myInquiriesData.length - index}
-            />
+              $headHeight={headHeight}
+            >
+              <Inquiry list={list} no={myInquiriesData.length - index} />
+            </S.MyInquiriesWrapper>
           ))}
         </S.InquiriesWrapper>
       </S.InquiriesContainer>

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

@@ -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;
     `}
 `;
 

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<boolean>(false);
   const [isImageOpen, setIsImageOpen] = useState<IsImageOpen>({
     isImageOpen: false,
     url: '',
   });
   const answer = list.answer || '';
-  const answerRef = useRef<HTMLTextAreaElement>(null);
+  const divRef = useRef<HTMLDivElement>(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, setIsOpen]);
 
   return (
-    <S.Container>
+    <S.Container ref={divRef}>
       <S.InquiryTitleWrapper
         type='button'
         onClick={() => setIsOpen((prev) => !prev)}
+        data-id={list.id}
       >
         <S.InquiryNumber>{no}</S.InquiryNumber>
         <S.InquiryCategory>{`[${list.category}]`}</S.InquiryCategory>

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

@@ -71,6 +71,7 @@ export default function All() {
               {list.alarmFilterId !== 5 ? (
                 <Link
                   to={linkUrl(list.routingId, list.alarmFilterId)}
+                  state={list.alarmFilterId === 4 && { id: list.routingId }}
                   onClick={() => patchAlarm(list.id)}
                 >
                   <S.SpanNotification