feat: basePath 추가

Author: kangsuyeong

src/components/modalSheet/BackLink.tsx

@@ -0,0 +1,16 @@
+import { Link, useLocation } from 'react-router';
+import closeIcon from '@assets/icons/close-icon.svg';
+const BackLink = () => {
+  const location = useLocation();
+
+  const pathSegments = location.pathname.split('/').filter(Boolean); // ['', 'post', '123'] → ['post', '123']
+  pathSegments.pop(); // 마지막 세그먼트 제거
+  const newPath = '/' + pathSegments.join('/');
+  return (
+    <Link to={newPath} className="flex items-center justify-center w-6 h-6 cursor-pointer">
+      <img src={closeIcon} alt="닫기" />
+    </Link>
+  );
+};
+
+export default BackLink;

src/components/user/EmotionRecordCardList.tsx

@@ -2,9 +2,10 @@ import { InfoMessage, EmotionRecordCard } from '@/components';
 import { useNavigate } from 'react-router';
 interface EmotionRecordCardListProps {
   records: EmotionRecord[];
+  basePath: string;
 }
 
-function EmotionRecordCardList({ records }: EmotionRecordCardListProps) {
+function EmotionRecordCardList({ records, basePath }: EmotionRecordCardListProps) {
   const navigate = useNavigate();
   if (records.length === 0) {
     return (
@@ -20,7 +21,7 @@ function EmotionRecordCardList({ records }: EmotionRecordCardListProps) {
         <EmotionRecordCard
           key={record.recordId}
           record={record}
-          onClick={() => navigate(`/mypage/${record.recordId}`)}
+          onClick={() => navigate(`${basePath}/${record.recordId}`)}
         />
       ))}
     </div>

src/components/user/EmotionRecordSection.tsx

@@ -5,13 +5,15 @@ import { useInView } from 'react-intersection-observer';
 
 interface EmotionRecordSectionProps {
   records: EmotionRecord[];
+  basePath: string;
   fetchNextPage: () => void;
   hasNextPage: boolean;
   isFetchingNextPage: boolean;
 }
 
 const EmotionRecordSection = ({
   records,
+  basePath,
   fetchNextPage,
   hasNextPage,
   isFetchingNextPage,
@@ -28,7 +30,7 @@ const EmotionRecordSection = ({
 
   return (
     <div className="flex flex-col items-center">
-      <EmotionRecordCardList records={records} />
+      <EmotionRecordCardList basePath={basePath} records={records} />
       {hasNextPage && !isFetchingNextPage && (
         <div ref={ref}>
           <LoadingMini />

src/layouts/ModalSheetLayoutTemp.tsx

@@ -1,7 +1,6 @@
+import BackLink from '@/components/modalSheet/BackLink';
 import CardDetailMoreMenu from '@/components/modalSheet/CardDetailMoreMenu';
-import closeIcon from '@assets/icons/close-icon.svg';
 import { motion } from 'framer-motion';
-import { Link } from 'react-router';
 
 interface ModalSheetLayoutProps {
   children: React.ReactNode;
@@ -28,9 +27,7 @@ function ModalSheetLayoutTemp({ children, isOwnPost }: ModalSheetLayoutProps) {
       <div className="max-w-[600px] w-full h-screen flex flex-col bg-white rounded-lg card-shadow border border-gray-5 overflow-y-auto scroll">
         {/* 헤더 */}
         <div className="sticky top-0 flex h-[60px] items-center px-4 justify-between bg-white">
-          <Link to={'/mypage'} className="flex items-center justify-center w-6 h-6 cursor-pointer">
-            <img src={closeIcon} alt="닫기" />
-          </Link>
+          <BackLink />
           {isOwnPost && <CardDetailMoreMenu />}
         </div>
         {children}

src/pages/mypage/components/MyEmotionRecordSection.tsx

@@ -14,6 +14,7 @@ const MyEmotionRecordSection = () => {
   return (
     <EmotionRecordSection
       records={records}
+      basePath="/mypage"
       fetchNextPage={fetchNextPage}
       hasNextPage={hasNextPage}
       isFetchingNextPage={isFetchingNextPage}

src/pages/userpage/components/UserEmotionRecordSection.tsx

@@ -17,6 +17,7 @@ const UserEmotionRecordSection = ({ userId }: UserEmotionRecordSectionProps) =>
 
   return (
     <EmotionRecordSection
+      basePath={`/user/${userId}`}
       records={records}
       fetchNextPage={fetchNextPage}
       hasNextPage={hasNextPage}