[FE] [FEAT] 여행 상세 페이지 구현

frontend/src/components/data-table/DataTable.tsx

@@ -16,12 +16,14 @@ interface DataTableProps<TData> {
   groupBy?: (row: TData) => string;
   enableGroupSelection?: boolean;
   height?: number;
+  blankFallbackText?: string;
 }
 
 const DataTable = <TData,>({
   groupBy,
   height,
   enableGroupSelection = true,
+  blankFallbackText,
 }: DataTableProps<TData>) => {
   const { table, dispatch } = useDataTable();
   const rows = table.getRowModel().rows as Row<TData>[];
@@ -151,12 +153,14 @@ const DataTable = <TData,>({
             );
           })
         ) : (
-          <TableRow>
+          <TableRow className="hover:bg-background-normal!">
             <TableCell
               colSpan={table.getVisibleLeafColumns().length}
-              className="h-24 text-center"
+              className="h-[50vh] text-center"
             >
-              No results.
+              <h1 className="headline1-medium text-label-alternative">
+                {blankFallbackText || '데이터가 없습니다'}
+              </h1>
             </TableCell>
           </TableRow>
         )}

frontend/src/components/data-table/ImportToFolderBar.tsx

@@ -0,0 +1,32 @@
+import { useDataTable } from '@/components/data-table/context';
+
+import { Icons } from '@/assets';
+
+const Divider = () => <div className="bg-line-solid-normal/30 h-6 w-px" />;
+
+const SelectionActionProvider = () => {
+  const { table, tableState } = useDataTable();
+  const selectedRows = table.getFilteredSelectedRowModel().rows;
+
+  if (!tableState.selectionMode) return null;
+
+  const handleImportToFolder = () => {};
+
+  return (
+    <div className="bg-background-normal body2-normal-bold rounded-modal-12 shadow-semantic-strong fixed bottom-30 left-1/2 w-125 -translate-x-1/2 truncate px-4 py-2.75">
+      <div className="flex items-center gap-4">
+        <span className="mr-auto">{selectedRows.length}개 선택됨</span>
+        <button
+          onClick={handleImportToFolder}
+          className="label1-normal-medium text-primary-normal"
+        >
+          현재 폴더에 추가하기
+        </button>
+        <Divider />
+        <Icons.Close height={20} width={20} />
+      </div>
+    </div>
+  );
+};
+
+export default SelectionActionProvider;

frontend/src/components/data-table/SelectionActionProvider.tsx → frontend/src/components/data-table/SelectionActionBar.tsx

@@ -19,7 +19,7 @@ const SelectionActionButton = ({
   );
 };
 
-const SelectionActionProvider = () => {
+const SelectionActionBar = () => {
   const { table, tableState } = useDataTable();
   const selectedRows = table.getFilteredSelectedRowModel().rows;
 
@@ -57,4 +57,4 @@ const SelectionActionProvider = () => {
   );
 };
 
-export default SelectionActionProvider;
+export default SelectionActionBar;

frontend/src/components/layout/BottomSheet.tsx

@@ -36,10 +36,10 @@ const BottomSheet = ({
             exit={{ y: '100%' }}
             transition={{ type: 'spring', damping: 25, stiffness: 200 }}
             className={cn(
-              `bg-background-normal fixed right-[12vh] bottom-0 left-[18vh] z-50 h-[80vh] rounded-t-2xl ${className}`,
+              `bg-background-normal scrollbar fixed right-[12vh] bottom-0 left-[18vh] z-50 h-[80vh] overflow-y-auto rounded-t-2xl px-2 ${className}`,
             )}
           >
-            <div className="bg-cool-neutral-95 mx-auto my-3 h-1.5 w-12 rounded-full" />
+            <div className="bg-cool-neutral-95 mx-auto my-2 h-1.5 w-12 rounded-full" />
             {children}
           </motion.div>
         </>

frontend/src/pages/TravelDetailPage.tsx

@@ -0,0 +1,114 @@
+import { useState } from 'react';
+
+import Button from '@/components/common/Button';
+import Divider from '@/components/common/Divider';
+import { DataTable } from '@/components/data-table/DataTable';
+import { DataTableFilterProvider } from '@/components/data-table/DataTableFilter';
+import DataTableProvider from '@/components/data-table/DataTableProvider';
+import CategoryFilter from '@/components/data-table/filters/CategoryFilter';
+import DateFilter from '@/components/data-table/filters/DateFilter';
+import MerchantFilter from '@/components/data-table/filters/MerchantFilter';
+import MethodFilter from '@/components/data-table/filters/MethodFilter';
+import ImportToFolderBar from '@/components/data-table/ImportToFolderBar';
+import SelectionActionBar from '@/components/data-table/SelectionActionBar';
+import { columns } from '@/components/home-page/columns';
+import ExpenseCard from '@/components/home-page/ExpenseCard';
+import { type Expense, getData } from '@/components/landing-page/dummy';
+import BottomSheet from '@/components/layout/BottomSheet';
+
+const TravelDetailPage = () => {
+  const [isBottomSheetOpen, setBottomSheetOpen] = useState(false);
+
+  const data = getData();
+  return (
+    <div className="flex flex-col px-30 pt-8">
+      <div className="mb-10 flex items-end gap-4">
+        <div className="flex flex-col gap-4">
+          <h2 className="heading2-bold text-label-normal">뉴욕 보스턴</h2>
+          <div className="flex gap-1.5">
+            <span className="body1-normal-medium text-label-normal">
+              2026.01.21 - 2026.01.26
+            </span>
+            <span className="body1-normal-medium text-label-alternative">
+              5박 6일
+            </span>
+          </div>
+        </div>
+        <Divider style="vertical" className="h-15" />
+        <ExpenseCard
+          label="총 지출"
+          baseCountryCode="KR"
+          baseCountryAmount={1402432}
+          localCountryCode="US"
+          localCountryAmount={12232}
+        />
+        <div className="flex-1" />
+        <Button variant="outlined" size="md">
+          위젯 편집하기
+        </Button>
+      </div>
+      {/* <div className="border-label-alternative mb-5 flex h-70 items-center justify-center rounded-lg border border-dashed">
+        Widget area
+        <br />
+        {title && `가계부 명: ${title}가계부`}
+      </div> */}
+      <div className="bg-background-normal relative rounded-2xl px-2 py-4 shadow">
+        {/* <Icons.ChevronBack className="text-label-alternative absolute left-1/2 z-50 size-12 -translate-x-1/2 rotate-90" /> */}
+        <DataTableProvider columns={columns} data={[]}>
+          <DataTableFilterProvider>
+            <DateFilter />
+            <MerchantFilter />
+            <CategoryFilter />
+            <MethodFilter />
+            <div className="flex-1" />
+            <Button
+              variant="solid"
+              size="md"
+              onClick={() => setBottomSheetOpen(true)}
+            >
+              지출 내역 추가하기
+            </Button>
+          </DataTableFilterProvider>
+          <DataTable
+            groupBy={(row: Expense) =>
+              new Date(row.date).toLocaleDateString('ko-KR', {
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit',
+              })
+            }
+            blankFallbackText={'여행 지출 내역을 추가해주세요'}
+          />
+          <SelectionActionBar />
+        </DataTableProvider>
+      </div>
+      <BottomSheet
+        isOpen={isBottomSheetOpen}
+        onClose={() => setBottomSheetOpen(false)}
+      >
+        <DataTableProvider columns={columns} data={data}>
+          <DataTableFilterProvider>
+            <DateFilter />
+            <MerchantFilter />
+            <CategoryFilter />
+            <MethodFilter />
+            <div className="flex-1" />
+          </DataTableFilterProvider>
+          <DataTable
+            groupBy={(row: Expense) =>
+              new Date(row.date).toLocaleDateString('ko-KR', {
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit',
+              })
+            }
+            blankFallbackText={'여행 지출 내역을 추가해주세요'}
+          />
+          <ImportToFolderBar />
+        </DataTableProvider>
+      </BottomSheet>
+    </div>
+  );
+};
+
+export default TravelDetailPage;

frontend/src/pages/TravelPage.tsx

@@ -1,3 +1,5 @@
+import { Link } from '@tanstack/react-router';
+
 import Button from '@/components/common/Button';
 import FolderCard from '@/components/travel-page/FolderCard';
 
@@ -42,16 +44,18 @@ const TravelPage = () => {
       </div>
       <div className="bg-background-normal rounded-modal-8 shadow-semantic-subtle flex min-h-0 flex-1 flex-wrap gap-9 overflow-y-auto p-16">
         {folderMap.map((folder, index) => (
-          <FolderCard
-            key={index}
-            label={folder.label}
-            dateRange={folder.dateRange}
-            localCountryCode={folder.localCountryCode}
-            localCountryAmount={folder.localCountryAmount}
-            baseCountryCode={folder.baseCountryCode}
-            baseCountryAmount={folder.baseCountryAmount}
-            imageUrl={folder.imageUrl}
-          />
+          <Link to={'/travel/' + index} key={index}>
+            <FolderCard
+              key={index}
+              label={folder.label}
+              dateRange={folder.dateRange}
+              localCountryCode={folder.localCountryCode}
+              localCountryAmount={folder.localCountryAmount}
+              baseCountryCode={folder.baseCountryCode}
+              baseCountryAmount={folder.baseCountryAmount}
+              imageUrl={folder.imageUrl}
+            />
+          </Link>
         ))}
       </div>
     </div>