Skip to content

feat: 프로젝트 목록 기능 추가 (#56)#63

Closed
YeoEunnn wants to merge 3 commits intodevelopfrom
feat/hom-add-func#56
Closed

feat: 프로젝트 목록 기능 추가 (#56)#63
YeoEunnn wants to merge 3 commits intodevelopfrom
feat/hom-add-func#56

Conversation

@YeoEunnn
Copy link
Collaborator

📌 관련 이슈

✨ 변경 내용

  • 카드 없음 상태 구현 >> 수정이 좀 필요함
  • 카드 스켈레톤(공동 컴포넌트 도입) 구현
  • 검색 구현(디바운싱 300ms)
  • 홈페이지 구조 개선
  • 드래그 호버 시 하이라이트가 버벅거리는 버그 수정
  • 필터&정렬 키 > Popover에서 Dropdown으로 수정
  • 리스트뷰, 카드뷰를 각각 공동 컴포넌트 (src/common)에 추가 (비디오쪽에서도 같은 컴포넌트 사용)
  • 리스트뷰 구현
  • 리스트뷰 <-> 카드뷰 전환

💡 참고 사항

스크린샷, 참고 링크, 추가 설명 등 (없으면 생략 가능)
67%축소 스크린샷 ↓
image
image

@YeoEunnn YeoEunnn self-assigned this Jan 19, 2026
@github-actions github-actions bot added component 컴포넌트 관련 변경 page 페이지 관련 변경 types 타입 정의 변경 labels Jan 19, 2026
@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello @YeoEunnn, 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!

이 PR은 홈페이지에 프로젝트 목록 기능을 추가하고 사용자 경험을 개선하는 데 중점을 둡니다. 주요 변경 사항으로는 재사용 가능한 카드 및 리스트 뷰 공통 컴포넌트 도입, 이들을 활용한 프로젝트 목록 뷰 전환 기능 구현, 드래그앤드롭 관련 버그 수정, 검색 기능에 디바운싱 적용, 그리고 로딩 및 빈 상태 처리가 포함됩니다. 전반적으로 UI/UX를 향상시키고 코드의 모듈성을 높이는 데 기여합니다.

Highlights

  • 공통 컴포넌트 추가 및 활용: 프로젝트 목록을 카드 또는 리스트 형태로 표시하기 위한 CardViewListView 공통 컴포넌트가 src/components/common에 추가되었습니다. 이 컴포넌트들은 재사용성을 높여 다른 섹션(예: 비디오)에서도 활용될 수 있도록 설계되었습니다.
  • 프로젝트 목록 뷰 전환 기능 구현: 홈페이지의 프로젝트 섹션에 카드 뷰와 리스트 뷰 간 전환 기능이 추가되었습니다. 사용자는 ProjectHeader를 통해 원하는 뷰 모드를 선택할 수 있으며, 선택된 모드에 따라 프로젝트 목록이 동적으로 렌더링됩니다.
  • 드래그앤드롭 버그 수정: FileDropzone 컴포넌트에서 드래그 호버 시 하이라이트가 버벅거리는 문제가 수정되었습니다. dragCounter를 도입하여 자식 요소 진입/이탈 시 발생하는 불필요한 dragLeave 이벤트를 방지하고, 드래그 상태를 정확하게 관리합니다.
  • 검색 기능 개선: 프로젝트 검색 기능에 300ms 디바운싱이 적용되어, 사용자가 검색어를 입력할 때마다 불필요한 API 호출이 발생하는 것을 방지하고 성능을 향상시켰습니다.
  • 스켈레톤 UI 및 빈 상태 처리: 프로젝트 목록 로딩 중에는 ProjectCardSkeleton을 활용한 스켈레톤 UI가 표시되며, 프로젝트가 없을 경우를 대비한 '카드 없음' 상태(empty state) 처리가 CardView 컴포넌트에 구현되었습니다.
  • 홈페이지 구조 개선 및 타입 정의 업데이트: 홈페이지의 ProjectsSection 구조가 개선되었으며, ProjectHeaderPropsCardItems 타입이 ProjectItem으로 변경되고 ViewMode 관련 타입이 추가되는 등 관련 타입 정의가 업데이트되었습니다.
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
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은 프로젝트 목록 기능을 추가하고, 기존 홈페이지 구조를 개선하는 등 많은 변경 사항을 포함하고 있네요. 카드뷰와 리스트뷰를 전환하는 기능과 검색 기능이 추가되어 사용성이 크게 향상될 것 같습니다. 재사용 가능한 CardViewListView 공통 컴포넌트를 도입한 점도 매우 좋습니다. 제안된 코드 리뷰 코멘트들은 제공된 규칙과 충돌하지 않으며, 코드의 일관성과 가독성을 높이기 위한 유효한 개선점들입니다. 전반적으로 훌륭한 작업입니다!

Comment on lines +65 to +72
<div className="mt-6 flex flex-col gap-3">
{Array.from({ length: SKELETON_LIST_COUNT }).map((_, index) => (
<div
key={index}
className="h-20 rounded-2xl border border-gray-200 bg-white p-4 animate-pulse"
/>
))}
</div>
Copy link
Contributor

Choose a reason for hiding this comment

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

medium

리스트 뷰의 로딩 스켈레톤 UI가 컴포넌트 내에 직접 작성되어 있습니다. ProjectCardSkeleton처럼 ProjectListSkeleton이라는 별도의 컴포넌트로 분리하면 코드의 모듈성을 높이고 재사용성을 개선할 수 있습니다.

@AndyH0ng
Copy link
Member

@claude 코드 리뷰해줘

@claude
Copy link

claude bot commented Jan 19, 2026

Claude encountered an error —— View job

Invalid branch name: "feat/hom-add-func#56". Branch names must start with an alphanumeric character and contain only alphanumeric characters, forward slashes, hyphens, underscores, or periods.

I'll analyze this and get back to you.

@YeoEunnn YeoEunnn closed this Jan 19, 2026
@YeoEunnn YeoEunnn deleted the feat/hom-add-func#56 branch January 19, 2026 12:39
@YeoEunnn YeoEunnn restored the feat/hom-add-func#56 branch January 19, 2026 12:39
@AndyH0ng AndyH0ng deleted the feat/hom-add-func#56 branch January 19, 2026 12:46
@AndyH0ng AndyH0ng changed the title feat: 프로젝트 목록 기능 추가 feat: 프로젝트 목록 기능 추가 (#56) Jan 19, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

component 컴포넌트 관련 변경 page 페이지 관련 변경 types 타입 정의 변경

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: 프로젝트 목록 기능 추가

2 participants