feat: 프로젝트 목록 기능 추가 (#56) by AndyH0ng · Pull Request #64 · TTORANG/Web

AndyH0ng · 2026-01-19T12:43:50Z

📌 관련 이슈

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

✨ 변경 내용

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

💡 참고 사항

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

gemini-code-assist · 2026-01-19T12:44:11Z

Summary of Changes

Hello @AndyH0ng, 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은 프로젝트 목록 기능을 추가하여 사용자 경험을 향상시키는 데 중점을 둡니다. 프로젝트를 카드 뷰와 리스트 뷰로 볼 수 있는 기능을 도입하고, 검색 기능을 통해 원하는 프로젝트를 쉽게 찾을 수 있도록 합니다. 또한, 드래그 앤 드롭 관련 버그를 수정하고 UI 컴포넌트를 개선하여 전반적인 안정성과 사용성을 높였습니다.

Highlights

카드 뷰 및 리스트 뷰 공통 컴포넌트 추가: 프로젝트 목록을 표시하기 위한 CardView와 ListView라는 두 가지 새로운 공통 컴포넌트가 추가되었습니다. 이 컴포넌트들은 재사용 가능하도록 설계되었습니다.
프로젝트 목록 검색 기능: 프로젝트 목록에 검색 기능이 구현되었으며, 사용자 입력에 대한 성능 최적화를 위해 300ms의 디바운싱이 적용되었습니다.
드래그 호버 시 하이라이트 버그 수정: FileDropzone 컴포넌트에서 드래그 호버 시 하이라이트가 깜빡이는 버그를 수정하기 위해 dragCounter를 도입하여 드래그 상태 관리를 개선했습니다.
필터 및 정렬 UI 개선: 기존의 필터 및 정렬 UI가 Popover에서 Dropdown 컴포넌트로 변경되어 사용성이 향상되었습니다.
홈페이지 구조 개선 및 뷰 모드 전환 기능: 홈페이지의 프로젝트 섹션 구조가 개선되었으며, 사용자가 프로젝트 목록을 카드 뷰 또는 리스트 뷰로 전환할 수 있는 기능이 추가되었습니다.

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

AndyH0ng · 2026-01-19T12:44:29Z

@claude 코드 리뷰해줘

claude · 2026-01-19T12:44:45Z

Claude finished @AndyH0ng's task in 1m 40s —— View job

코드 리뷰 완료 ✅

작업 목록

변경된 파일 읽기 및 분석
코드 품질 및 베스트 프랙티스 검토
리뷰 피드백 작성

전체 평가

전반적으로 잘 구현된 PR입니다! 공통 컴포넌트 설계가 제네릭을 활용해서 재사용성이 높고, 드래그 호버 버그 수정도 dragCounter를 통해 정확하게 해결했습니다. 몇 가지 개선할 수 있는 부분을 발견했습니다.

🐛 버그 및 오타

1. CardView.tsx - 오타 (ariaLabal → ariaLabel)

src/components/common/CardView.tsx:12, 22, 29

ariaLabal?: string;  // ❌ 오타

ariaLabal이 ariaLabel의 오타입니다. 접근성 속성이므로 정확한 네이밍이 중요합니다.

해결방법:

ariaLabal을 ariaLabel로 모두 수정

Fix this →

2. ListView.tsx - 주석 처리된 코드 제거 필요

src/components/common/ListView.tsx:63-76

{/* <div className="listView__content">
  <div className="listView__title">{renderTitle(item)}</div>
  ...
</div> */}

주석 처리된 코드가 남아있습니다. 불필요한 코드는 제거하는 것이 코드 가독성에 좋습니다.

해결방법:

주석 처리된 63-76 라인 삭제

Fix this →

⚠️ 타입 안전성 개선 사항

3. useProjectList.ts - 타입 불일치

src/hooks/useProjectList.ts:4, 11, 13, 20

import type { CardItems } from '@/types/project';
// ...
export function useProjectList(projects: CardItems[], options?: Options)

훅 이름은 useProjectList인데 타입은 CardItems[]를 사용합니다. 그런데 실제 사용처(HomePage.tsx:22)와 타입 정의(project.ts:11-20)를 보면 ProjectItem[]을 사용해야 할 것 같습니다.

해결방법:

타입을 ProjectItem[]로 변경하거나, CardItems가 올바른 타입이라면 project.ts에 해당 타입 export 추가

4. ProjectList.tsx - 클릭 핸들러 없음

src/components/projects/ProjectList.tsx:20

<ListView
  items={items}
  getKey={(item) => item.id}
  // ... 다른 props
  // onItemClick 없음
/>

ListView는 onItemClick을 지원하지만 ProjectList에서는 전달하지 않습니다. 사용자가 리스트 항목을 클릭해서 프로젝트로 이동하는 것이 일반적인 UX입니다.

해결방법:

ProjectList에 onItemClick prop 추가하고 프로젝트 상세로 이동하는 로직 구현 (또는 향후 TODO로 표시)

💡 개선 제안

5. 빈 상태(Empty State) 개선

src/components/common/CardView.tsx:24-26, ListView.tsx:32-34

if (items.length === 0) {
  return <div className="cardView__empty">{empty ?? 'No items'}</div>;
}

기본 텍스트가 영어 "No items"로 되어있어 한국어 앱과 맞지 않습니다
className에 스타일이 적용되지 않아 보입니다 (Tailwind CSS 사용)

제안:

기본 텍스트를 한국어로 변경 ('항목이 없습니다')
className에 Tailwind 유틸리티 클래스 추가 (예: 'text-center py-8 text-gray-500')

6. ProjectsSection - 조건부 렌더링 로직 개선

src/components/home/ProjectsSection.tsx:30-33

const hasProjects = projects.length > 0;

if (!isLoading && !hasProjects) return null;

빈 상태에서 아무것도 렌더링하지 않습니다. 사용자에게 "아직 프로젝트가 없습니다" 같은 메시지를 보여주는 것이 더 나은 UX입니다.

제안:

Empty state UI 추가 (파일 업로드를 유도하는 메시지 등)

7. FileDropzone - dragCounter 초기화 개선

src/components/common/FileDropzone.tsx:53

const handleDragLeave = (e: React.DragEvent<HTMLButtonElement>) => {
  // ...
  dragCounter.current = Math.max(0, dragCounter.current - 1);
  if (dragCounter.current === 0) setIsDragging(false);
};

Math.max(0, ...)를 사용했지만, dragCounter가 음수가 될 상황은 없어 보입니다. 코드가 명확하긴 하지만 불필요할 수 있습니다.

제안:

Math.max(0, ...)를 제거하거나, 주석으로 방어적 코딩임을 명시

8. ProjectHeader - 필터/정렬 기능 미구현

src/components/projects/ProjectHeader.tsx:12-14, 60, 86

// TODO
// - 필터, 정렬 기능 추가
//  ㄴ> onClick에 상태 업데이트 추가

필터와 정렬 버튼이 있지만 실제 기능은 구현되지 않았습니다 (onClick: () => {})

제안:

현재 PR에서 구현 예정이 아니라면 TODO 주석을 GitHub Issue로 전환
또는 버튼을 disabled 상태로 만들어서 아직 사용 불가능함을 UI로 표시

9. 접근성(a11y) 개선

src/components/projects/ProjectCard.tsx:29-34, ProjectList.tsx:30-34

카드와 리스트 항목이 클릭 가능해 보이지만 접근성이 부족합니다:

카드에 클릭 이벤트 없음
키보드 네비게이션 지원 부족

제안:

카드/리스트를 <button> 또는 <Link>로 감싸기
ListView의 keyboard handler는 잘 구현되어 있으니 CardView에도 유사한 패턴 적용 고려

✅ 잘된 점

제네릭 컴포넌트 설계: CardView<T>와 ListView<T>가 제네릭으로 잘 설계되어 재사용성이 높습니다
dragCounter 버그 수정: 드래그 호버 버그를 counter 패턴으로 정확하게 해결했습니다
디바운싱 구현: 검색에 300ms 디바운싱을 적용해 성능 최적화가 잘 되어있습니다
ListView 키보드 네비게이션: ListView.tsx:48-59에서 Enter/Space 키 처리가 잘 구현되었습니다
스켈레톤 로딩: 카드뷰/리스트뷰 각각 적절한 스켈레톤을 보여줍니다
타입 정의: TypeScript 타입이 대체로 잘 정의되어 있습니다

📝 요약

Critical (수정 필요): chore: 프로젝트 세팅 #1 오타 수정, Closed #3 타입 불일치 해결
Medium (권장): chore/프로젝트 세팅 #2 주석 코드 제거, design: 디자인 시스템 구축 #4 클릭 핸들러 추가, design/디자인 시스템 구축 #5 Empty state 개선
Nice-to-have: feat: 공통 레이아웃 컴포넌트 개발 #6-9 UX 및 접근성 개선

전반적으로 코드 품질이 좋습니다. 위의 이슈들 중 Critical과 Medium 항목만 수정하면 merge 가능할 것 같습니다! 🚀

gemini-code-assist

Code Review

이 PR은 프로젝트 목록 기능을 추가하고 홈페이지 구조를 개선하는 등 많은 긍정적인 변경 사항을 포함하고 있습니다. 특히 CardView와 ListView를 공통 컴포넌트로 분리하여 재사용성을 높인 점과, 드래그 앤 드롭 기능의 버그를 수정한 점이 인상적입니다. 전반적으로 코드 품질을 높이기 위한 좋은 시도들이 보입니다. 몇 가지 사소한 개선점과 오타 수정에 대한 의견을 남겼으니 확인 부탁드립니다.

src/components/common/CardView.tsx

src/components/common/FileDropzone.tsx

src/components/common/ListView.tsx

gemini-code-assist · 2026-01-19T12:45:15Z

src/components/home/ProjectsSection.tsx

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


리스트 뷰의 스켈레톤 UI가 컴포넌트 내에 인라인으로 구현되어 있습니다. ProjectCardSkeleton처럼 ProjectListSkeleton과 같은 별도의 컴포넌트로 분리하면 코드의 재사용성과 유지보수성이 향상될 것입니다.

src/components/projects/ProjectList.tsx

AndyH0ng · 2026-01-20T07:30:27Z

base를 -56으로 해서 <- compare #56 이렇게 해야 하나요..? ㅜ.ㅜ

@YeoEunnn 앗 넵네 그래주셔도 될 것 같아요!

hom-add-func-56 <- hom-add-func#56

src/components/home/ProjectsSection.tsx

AndyH0ng

아이고,, 수고하셧슴니다~

src/components/projects/ProjectList.tsx

src/components/common/FileDropzone.tsx

github-actions · 2026-01-23T15:32:38Z

Visit the preview URL for this PR (updated for commit 835d32e):

https://ttorang--pr64-feat-hom-add-func-56-ic3d73tz.web.app

_{(expires Fri, 30 Jan 2026 15:33:29 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: b554669f2531ae9a6954d553a841ad9a6c4ceb6d}

AndyH0ng · 2026-01-23T15:34:44Z

제가 연겨라 approve가 안되네요..! approve해주고 머지해주세요!

YeoEunnn added 3 commits January 18, 2026 21:09

fix: FileDropZone 파일 호버 시 하이라이트 버그 수정 (#56)

7a7ff5a

feat: 리스트&카드 공동 컴포넌트로 분리 (#56)

7606752

feat: 리스트뷰 카드뷰 전환 및 공동 컴포넌트 수정 (#56)

f00f013

AndyH0ng assigned YeoEunnn Jan 19, 2026

github-actions bot added component 컴포넌트 관련 변경 page 페이지 관련 변경 types 타입 정의 변경 labels Jan 19, 2026

gemini-code-assist bot reviewed Jan 19, 2026

View reviewed changes

YeoEunnn and others added 6 commits January 19, 2026 22:04

fix: gemini 코드 리뷰 수정 (#56)

f549510

feat: 프로젝트 삭제 모달 띄우기 (#56)

aedf9ab

refactor: 카드뷰, 리스트뷰 코드 구조 통일 (#56)

4e38b45

Merge branch 'develop' into feat/hom-add-func-56

d146a8d

Merge branch 'develop' into feat/hom-add-func-56

460a147

refactor: 삭제 모달을 PjSection에서 관리하도록 수정 (#56)

ef18b03

This comment was marked as resolved.

Sign in to view

YeoEunnn added 2 commits January 23, 2026 21:19

Merge branch 'feat/hom-add-func-56' into feat/hom-add-func#56

0b18488

Merge pull request #69 from TTORANG/feat/hom-add-func#56

a32d8a9

hom-add-func-56 <- hom-add-func#56

github-code-quality bot found potential problems Jan 23, 2026

View reviewed changes

src/components/home/ProjectsSection.tsx Fixed Show fixed Hide fixed

src/components/home/ProjectsSection.tsx Fixed Show fixed Hide fixed

src/components/home/ProjectsSection.tsx Fixed Show fixed Hide fixed

Merge branch 'develop' into feat/hom-add-func-56

6e1e97f

github-code-quality bot found potential problems Jan 23, 2026

View reviewed changes

src/components/home/ProjectsSection.tsx Fixed Show fixed Hide fixed

src/components/home/ProjectsSection.tsx Fixed Show fixed Hide fixed

YeoEunnn added 2 commits January 23, 2026 22:31

fix: conflict 수정 (#56)

b68e0c9

fix: conflict 재수정 (#56)

fd958c5

AndyH0ng commented Jan 23, 2026

View reviewed changes

src/components/projects/ProjectList.tsx Outdated Show resolved Hide resolved

src/components/common/FileDropzone.tsx Show resolved Hide resolved

YeoEunnn added 3 commits January 24, 2026 00:03

refactor: Card 코드 구조에 맞게 List 코드 구조 수정 (#56)

bf3819b

feat: 업로드 실패 시 warning 토스트 알림 추가 (#56)

849ae76

Merge branch 'develop' into feat/hom-add-func-56

835d32e

AndyH0ng requested a review from YeoEunnn January 23, 2026 15:34

YeoEunnn approved these changes Jan 23, 2026

View reviewed changes

YeoEunnn merged commit 0272a77 into develop Jan 23, 2026
10 checks passed

YeoEunnn deleted the feat/hom-add-func-56 branch January 23, 2026 15:36

Conversation

AndyH0ng commented Jan 19, 2026

📌 관련 이슈

✨ 변경 내용

💡 참고 사항

Uh oh!

gemini-code-assist bot commented Jan 19, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

AndyH0ng commented Jan 19, 2026

Uh oh!

claude bot commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

코드 리뷰 완료 ✅

작업 목록

전체 평가

🐛 버그 및 오타

1. CardView.tsx - 오타 (ariaLabal → ariaLabel)

2. ListView.tsx - 주석 처리된 코드 제거 필요

⚠️ 타입 안전성 개선 사항

3. useProjectList.ts - 타입 불일치

4. ProjectList.tsx - 클릭 핸들러 없음

💡 개선 제안

5. 빈 상태(Empty State) 개선

6. ProjectsSection - 조건부 렌더링 로직 개선

7. FileDropzone - dragCounter 초기화 개선

8. ProjectHeader - 필터/정렬 기능 미구현

9. 접근성(a11y) 개선

✅ 잘된 점

📝 요약

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gemini-code-assist bot Jan 19, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This comment was marked as resolved.

AndyH0ng commented Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

AndyH0ng left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Jan 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AndyH0ng commented Jan 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

claude bot commented Jan 19, 2026 •

edited

Loading

AndyH0ng commented Jan 20, 2026 •

edited

Loading

github-actions bot commented Jan 23, 2026 •

edited

Loading