[FE] [FEAT] 여행 상세 페이지 구현 by minngyuseong · Pull Request #397 · softeerbootcamp-7th/WEB-Team1-Unipocket

minngyuseong · 2026-02-12T08:47:59Z

작업 내용

여행 상세 페이지를 만들었어요.
지출내역 추가하기 버튼을 누르면 BottomSheet가 올라와서 가계부에서 지출내역을 선택할 수 있는 UI만들었어요.

스크린샷

💬 공유사항 to 리뷰어

BottomSheet에서 스크롤될때 TableHead가 고정돼야하는데, 전체적으로 z값을 정리할 필요가 있어서 다른 PR에서 z값 전부 통일하고 sticky 설정할게요.

필수 체크사항

여행 -> 여행 상세 -> BottomSheet 열리는 플로우 확인해주세요

gemini-code-assist · 2026-02-12T08:48:17Z

Summary of Changes

Hello @minngyuseong, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 사용자가 특정 여행 경비 세부 정보를 볼 수 있도록 여행 상세 페이지 구현을 도입합니다. 또한, 일반 여행 개요와 동적 ID를 사용하는 개별 여행 항목에 대한 상세 보기를 모두 지원하도록 여행 페이지의 라우팅을 리팩토링합니다.

Highlights

새로운 페이지 추가: 사용자가 특정 여행 경비 세부 정보를 볼 수 있는 TravelDetailPage 컴포넌트가 새로 추가되었습니다.
라우팅 구조 업데이트: 동적 ID를 지원하는 여행 상세 보기를 위해 여행 관련 라우팅 구조가 업데이트되었습니다. 기존 /travel 경로는 /travel/ (인덱스) 및 /travel/$id (상세)로 세분화되었습니다.

Changelog

frontend/src/pages/TravelDetailPage.tsx
- 경비 카드, 위젯 영역, 필터링 기능이 있는 데이터 테이블을 포함하여 여행 세부 정보를 표시하는 새 페이지 컴포넌트가 추가되었습니다.
frontend/src/routeTree.gen.ts
- 기존 /travel 경로를 제거하고 /travel/ (인덱스) 및 /travel/$id (상세)에 대한 새 경로를 추가하도록 생성된 라우트 트리가 수정되었습니다.
frontend/src/routes/_app/travel/$id.tsx
- 동적 여행 ID에 대해 TravelDetailPage를 렌더링하는 새 라우트 파일이 추가되었습니다.
frontend/src/routes/_app/travel/index.tsx
- 기존 travel.tsx 라우트가 여행 섹션의 인덱스 페이지 역할을 하도록 travel/index.tsx로 이름이 변경되었습니다.

Activity

PR 설명에 따르면 현재 "작업중"입니다.
관련 이슈 #396이 언급되었습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

이 PR은 여행 상세 페이지를 구현하고 관련 라우팅을 설정합니다. 새로운 TravelDetailPage 컴포넌트는 더미 데이터를 사용하여 지출 내역을 보여주는 데이터 테이블을 포함하고 있습니다. 전반적으로 페이지의 기본 구조는 잘 잡혀있으나, UI에 표시되는 텍스트의 잠재적인 중복 문제를 해결하는 것이 좋겠습니다. 렌더링 성능 최적화는 현재 더미 데이터 사용으로 인해 우선순위가 낮지만, 향후 API 연동 시 고려해볼 수 있습니다. 자세한 내용은 코드 리뷰 주석을 참고해주세요.

frontend/src/pages/TravelDetailPage.tsx

- 여행지 Title - 지출 내역 불러오기 BottomSheet 반영

Kjiw0n

수고하셨습니다 👍 👍 여행 페이지까지 빠르게 작업해주셨네요

코멘트 확인 부탁드려요!!

Kjiw0n · 2026-02-14T11:06:06Z

frontend/src/routes/_app/travel/$id.tsx

어떤 id인지 명시를 해주면 좋을 것 같아요. 파일 명 그대로 param키로 들어가는 것 같아요.
백엔드에서는 각 여행 폴더 id를 travelId로 주고있어요!

Kjiw0n · 2026-02-14T11:11:56Z

frontend/src/routes/_app/travel/index.tsx

여기 /는 왜 붙었는 지 궁금합니다 👀

Kjiw0n · 2026-02-14T11:26:03Z

frontend/src/pages/TravelDetailPage.tsx

+    <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>


이 화살표도 넣어주세요~

Kjiw0n · 2026-02-14T11:27:39Z

frontend/src/components/layout/BottomSheet.tsx

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


혹시 BottomSheet 자체에 스크롤을 넣기보다 children에서 스크롤이 필요한 UI에 넣은 건 어떨까요??

현재의 경우 DataTable 이요!

Kjiw0n · 2026-02-14T11:29:43Z

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

👍 훨 직관적이고 좋은데요??!

Kjiw0n · 2026-02-14T11:30:11Z

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

혹시 파일 명과 default 컴포넌트 명이 다른 이유가 무엇인가요??

Kjiw0n · 2026-02-14T11:32:41Z

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

            <TableCell
              colSpan={table.getVisibleLeafColumns().length}
-              className="h-24 text-center"
+              className="h-[50vh] text-center"


데이터가 없을 때 밑에가 조금 떠서, min-h이나 flex-1을 주면 좋을 것 같아요.

Kjiw0n · 2026-02-14T11:37:21Z

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

해당 컴포넌트를 띄워보니까 밑에 약간 잘리는데,, 확인 부탁드려요.

Kjiw0n · 2026-02-14T11:51:34Z

frontend/src/pages/TravelPage.tsx

-            baseCountryAmount={folder.baseCountryAmount}
-            imageUrl={folder.imageUrl}
-          />
+          <Link to={'/travel/' + index} key={index}>


index 대신 mock에 travelId 추가하고 매핑하면 어떨까요? 추후에 API 연동해도 코드 변경 없도록!

<Link>의 to에 route 경로명으로 써주시면 좋을 것 같습니다. (params도 사용하면 좋아요!)

공식문서 예시 링크

Kjiw0n · 2026-02-14T11:51:45Z

frontend/src/pages/TravelPage.tsx

+            <FolderCard
+              key={index}


상위 태그에서 key 받고있으니 FolderCard에서는 제거해주세요!

minngyuseong self-assigned this Feb 12, 2026

minngyuseong added FE 💡 Feature labels Feb 12, 2026

gemini-code-assist bot reviewed Feb 12, 2026

View reviewed changes

frontend/src/pages/TravelDetailPage.tsx Show resolved Hide resolved

minngyuseong force-pushed the feat/#396/travel-detail-page branch from dfedcf6 to ec0074d Compare February 13, 2026 05:49

minngyuseong added 7 commits February 13, 2026 18:27

chore: 빈 데이터 fallback text 구현

16e7198

chore: BottomSheet y축 스크롤기능 추가

949d03f

feat: 여행 디데일 페이지 구현 추가

849aef1

- 여행지 Title - 지출 내역 불러오기 BottomSheet 반영

chore: SelectionActionProvider -> Bar로 이름 변경

691999d

chore: ImportToFolderBar 파일 생성

545b61b

feat: 여행 상세 페이지에서 불러올 가계부 BottomSheet에 테이블 넣기

ec95bcd

chore: 여행 상세 페이지 route 추가

da1b66e

minngyuseong force-pushed the feat/#396/travel-detail-page branch from ec0074d to da1b66e Compare February 13, 2026 09:34

chore: ImportToFolderBar 디자인 반영

ad8fe8b

minngyuseong marked this pull request as ready for review February 13, 2026 09:49

minngyuseong requested review from 1jiwoo27 and Kjiw0n February 13, 2026 09:53

Kjiw0n requested changes Feb 14, 2026

View reviewed changes

Conversation

minngyuseong commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

관련 이슈

작업 내용

스크린샷

💬 공유사항 to 리뷰어

필수 체크사항

Uh oh!

gemini-code-assist bot commented Feb 12, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Kjiw0n left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

minngyuseong commented Feb 12, 2026 •

edited

Loading