Skip to content

[FEAT] [FE] DataTable 카테고리 셀 에디터 구현#585

Merged
minngyuseong merged 19 commits intodevelopfrom
feat/#579/context-menu
Feb 21, 2026
Merged

[FEAT] [FE] DataTable 카테고리 셀 에디터 구현#585
minngyuseong merged 19 commits intodevelopfrom
feat/#579/context-menu

Conversation

@minngyuseong
Copy link
Copy Markdown
Collaborator

@minngyuseong minngyuseong commented Feb 19, 2026

관련 이슈

closes #579

작업 내용

테이블 행에서 '카테고리'바로 수정 가능하도록 context-menu 구현

셀에디터 공통 Anchor 컴포넌트화 (셀위치, 스크롤 막기)

필터 및 셀에디터에서 공통으로 사용되는 리스트 컴포넌트화

키보드 방향키 제어 로직을 검색 훅에서 분리 및 셀에디터에서 사용

스크린샷

image

💬 공유사항 to 리뷰어

DataTableFilter에서 방향키로 옵션 선택하는 로직을 훅으로 분리했어요.

필수 체크사항

  • 사용하는데 불편함 없는지 확인해주세요

- columnId에 따라 분기 처리된 개별 셀 상태 추가 (textCell, categoryCell, amountCell, paymentCell)
- 각 상태별 전용 Action 및 Reducer 로직 구현
@gemini-code-assist
Copy link
Copy Markdown
Contributor

Summary of Changes

Hello @minngyuseong, I'm Gemini Code Assist1! 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!

이 Pull Request는 DataTable 컴포넌트의 셀 편집 기능을 구현하여 사용자가 테이블 내에서 직접 데이터를 수정할 수 있도록 합니다. 각 셀의 데이터 타입에 따라 적절한 에디터를 제공하며, 상태 관리를 통해 편집 UI를 효율적으로 제어합니다. 이를 통해 데이터 관리의 편의성을 높이고 사용자 경험을 개선합니다.

Highlights

  • 구현 목표: DataTable 셀에 대한 편집 기능을 구현하여 사용자 인터랙션을 강화합니다.
  • 주요 변경 사항: DataTable 컴포넌트에서 셀 클릭 시 해당 셀의 종류에 따라 텍스트, 카테고리, 금액, 결제 방식 에디터를 활성화합니다.
  • 상태 관리: DataTableProvider에서 활성 셀의 상태를 관리하고, 각 에디터 컴포넌트에서 해당 상태를 활용하여 편집 UI를 표시합니다.
  • 에디터 컴포넌트 추가: 텍스트, 카테고리, 금액, 결제 방식에 따라 각각 TextCellEditor, CategoryCellEditor, AmountCellEditor, PaymentCellEditor 컴포넌트를 추가하여 다양한 편집 환경을 제공합니다.
Changelog
  • frontend/src/components/data-table/DataTable.tsx
    • 셀 클릭 이벤트 핸들러를 수정하여 셀 종류에 따라 다른 에디터를 활성화하도록 변경
    • 'select' 컬럼 클릭 시 편집 기능이 실행되지 않도록 예외 처리 추가
  • frontend/src/components/data-table/DataTableCellEditor.tsx
    • DataTableCellEditor 컴포넌트를 AmountCellEditor로 이름 변경 및 내용 수정
  • frontend/src/components/data-table/DataTableProvider.tsx
    • 활성 셀 상태 관리 로직을 변경하여 텍스트, 카테고리, 금액, 결제 방식 셀에 대한 상태를 개별적으로 관리
    • 각 셀 타입에 따라 상태를 업데이트하는 액션 추가 (SET_TEXT_CELL, SET_CATEGORY_CELL, SET_AMOUNT_CELL, SET_PAYMENT_CELL)
  • frontend/src/components/data-table/editors/CategoryCellEditor.tsx
    • CategoryCellEditor 컴포넌트 추가: 카테고리 셀 편집 기능 구현
  • frontend/src/components/data-table/editors/PaymentCellEditor.tsx
    • PaymentCellEditor 컴포넌트 추가: 결제 방식 셀 편집 기능 구현
  • frontend/src/components/data-table/editors/TextCellEditor.tsx
    • TextCellEditor 컴포넌트 추가: 텍스트 셀 편집 기능 구현
  • frontend/src/components/data-table/type.ts
    • ActiveCell 타입을 ActiveCellState로 변경하고, 텍스트, 카테고리, 금액, 결제 방식 셀에 대한 타입을 개별적으로 정의
    • TableUIState 타입에 텍스트, 카테고리, 금액, 결제 방식 셀 상태 추가
  • frontend/src/pages/Homepage.tsx
    • DataTableCellEditor 컴포넌트를 TextCellEditor 컴포넌트로 변경
Activity
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.

Footnotes

  1. 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.

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

이번 PR은 데이터 테이블에 셀 편집 기능을 추가하는 멋진 기능입니다. 구현 과정에서 리듀서를 사용하여 여러 에디터 상태를 관리하는 방식은 좋습니다. 하지만, 새로 추가된 에디터 컴포넌트들에서 몇몇 중대한 복사-붙여넣기 오류를 발견했습니다. 이 오류들은 기능이 의도대로 동작하지 않게 할 수 있습니다. 코드 중복에 대한 부분은 현재 임시 구현임을 고려하여 향후 개선 사항으로 제안합니다. 자세한 내용은 각 리뷰 코멘트를 확인해주세요.

Comment thread frontend/src/components/data-table/editors/AmountCellEditor.tsx Outdated
Comment thread frontend/src/components/data-table/editors/PaymentCellEditor.tsx Outdated
Comment thread frontend/src/pages/Homepage.tsx Outdated
Comment thread frontend/src/components/data-table/DataTable.tsx Outdated
Comment thread frontend/src/components/data-table/editors/CategoryCellEditor.tsx Outdated
@minngyuseong minngyuseong changed the title [FEAT] [FE] DataTable 셀 에디터 구현 [FEAT] [FE] DataTable 카테고리 셀 에디터 구현 Feb 20, 2026
@minngyuseong minngyuseong marked this pull request as ready for review February 20, 2026 03:11
@gemini-code-assist
Copy link
Copy Markdown
Contributor

Warning

You have reached your daily quota limit. Please wait up to 24 hours and I will start processing your requests again!

Copy link
Copy Markdown
Collaborator

@1jiwoo27 1jiwoo27 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다! 카테고리 클릭 했을 때 Editor 잘 열리네요 🤩

TextCellEditor나 CategoryCellEditor 클릭 했을 때, 열이 옆으로 밀리고 있는데 w 지정해서 안 밀리게 해주실 수 있나요?

Comment thread frontend/src/components/data-table/editors/CategoryCellEditor.tsx Outdated
Comment thread frontend/src/components/data-table/DataTableFilter.tsx Outdated
Copy link
Copy Markdown
Collaborator

@Kjiw0n Kjiw0n left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

코멘트 및 질문 확인 부탁드립니다!

  • home-page/, landing-page/에 columns가 2개 있는 이유가 무엇인가요?
  • CategoryCellEditor, TextCellEditor에 공통 로직의 중복이 확인되고있어요. 결제내역 등도 추가될 것 같은데, 하나의 공통 컴포넌트로 뽑아주면 좋을 것 같습니다!
  • CategoryCellEditorCategoryFilter가 같은 UI이고, 다음의 차이가 있는 것 같아요. 하나의 컴포넌트로 해결할 수 있다면 좋을 것 같습니다. (결제수단Filter, CellEditor도!)
    • 단일선택/중복선택
    • 실행트리거 위치

Comment thread frontend/src/components/data-table/DataTableFilter.tsx Outdated
Comment thread frontend/src/components/data-table/editors/CategoryCellEditor.tsx Outdated
@minngyuseong minngyuseong force-pushed the feat/#579/context-menu branch from cd9c617 to beb6010 Compare February 20, 2026 14:30
@1jiwoo27
Copy link
Copy Markdown
Collaborator

제목 [FE] [FEAT] 로 바꿔주세요!

Copy link
Copy Markdown
Collaborator

@1jiwoo27 1jiwoo27 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다 ❗
선택한 카테고리가 셀에 반영되는 거는 API 연동하면서 하시는 건가요?!

@minngyuseong
Copy link
Copy Markdown
Collaborator Author

수고하셨습니다 ❗ 선택한 카테고리가 셀에 반영되는 거는 API 연동하면서 하시는 건가요?!

넹! 너무 길어용

@minngyuseong minngyuseong merged commit b0c1f4a into develop Feb 21, 2026
1 check passed
@minngyuseong minngyuseong deleted the feat/#579/context-menu branch February 22, 2026 17:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEAT] DataTable 카테고리 셀 에디터 구현

3 participants