프로필 이미지 컴포넌트 by HWAN0218 · Pull Request #11 · codeit-part4-final/workers

HWAN0218 · 2026-01-31T07:47:24Z

Summary

프로필 이미지 컴포넌트 구현
프로필 이미지 상태 / 팀 이미지 상태
edit 버튼 on/off
반응형 디바이스 사이즈별 사이즈 변경

Issue

프로필 이미지 컴포넌트 개발 #7

Scope

jsDoc 추가

gemini-code-assist · 2026-01-31T07:47:43Z

Summary of Changes

Hello @HWAN0218, 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은 애플리케이션 전반에서 사용될 수 있는 강력하고 유연한 ProfileImage 컴포넌트를 도입합니다. 이 컴포넌트는 프로필 및 팀 이미지 표시, 반응형 크기 조정, 편집 기능 및 이미지 업로드 API 연동을 포함하여 다양한 시나리오를 처리하도록 설계되었습니다. 이를 통해 일관된 UI/UX를 제공하고 개발 효율성을 향상시킬 수 있습니다.

Highlights

프로필 이미지 컴포넌트 구현: 재사용 가능한 ProfileImage 컴포넌트가 새로 추가되었습니다.
다양한 이미지 상태 지원: 개인 프로필 이미지와 팀 이미지 상태를 모두 지원합니다.
편집 기능 추가: 이미지 편집을 위한 버튼 표시 여부 및 클릭 시 업로드 기능이 구현되었습니다.
반응형 디자인: 다양한 디바이스 크기에 따라 이미지 사이즈가 자동으로 조절됩니다.
API 연동: 이미지 업로드 및 사용자 프로필 이미지 업데이트를 위한 API 호출 로직이 포함되었습니다.
JSDoc 문서화: 컴포넌트의 Props에 대한 상세한 JSDoc이 추가되어 사용 편의성을 높였습니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

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은 재사용 가능한 프로필 이미지 컴포넌트를 구현한 점이 인상적입니다. 반응형 디자인과 다양한 옵션(수정 가능 여부, 보더 등)을 고려하여 매우 유연하게 설계되었습니다. 코드 구조도 useMemo, useCallback 등을 적절히 사용하여 최적화가 잘 되어 있습니다. 몇 가지 개선점을 제안합니다. variant prop에 따라 API 요청을 분기하는 로직을 추가하고, 이미지 업로드 실패 시 사용자에게 피드백을 제공하는 에러 핸들링을 보강하면 컴포넌트의 완성도가 더욱 높아질 것입니다. 또한, CSS에서 !important 사용을 재고하고, 정의되지 않은 CSS 클래스를 정리하는 것이 좋겠습니다. 자세한 내용은 각 파일에 남긴 주석을 참고해주세요.

gemini-code-assist · 2026-01-31T07:49:01Z

+      if (enableApi) {
+        try {
+          const url = await uploadImage(file);
+          await patchUserImage(url);


현재 구현에서는 variant prop의 값과 상관없이 이미지가 변경되면 항상 patchUserImage 함수를 호출하여 사용자 프로필 이미지를 업데이트하고 있습니다. variant가 'team'인 경우, 팀 이미지를 업데이트하는 다른 API를 호출해야 할 것입니다. variant에 따라 다른 PATCH 요청을 보내는 로직을 추가하거나, onImageChange와 같은 콜백 prop을 통해 상위 컴포넌트에서 API 호출을 직접 처리하도록 하는 것을 고려해볼 수 있습니다.

팀은 PATCH /groups/{groupId}로 처리하도록 분기했고, 그때 필요한 teamGroupId prop을 추가

gemini-code-assist · 2026-01-31T07:49:01Z

+        } catch (err) {
+          console.error(err);
+        }


이미지 업로드 또는 PATCH 요청 실패 시 console.error로만 오류를 기록하고 있어 사용자에게 실패 사실이 전달되지 않습니다. 이는 사용자 경험에 좋지 않은 영향을 줄 수 있습니다. 예를 들어, 사용자는 프로필 이미지가 변경되었다고 생각할 수 있지만 실제로는 서버에 반영되지 않은 상태일 수 있습니다. onError 콜백 prop을 추가하여 상위 컴포넌트에서 오류를 처리하고 사용자에게 적절한 피드백(예: 토스트 메시지)을 보여주는 것을 권장합니다.

onError 콜백을 추가해서 상위에서 토스트 등으로 사용자 피드백을 줄 수 있게 했고, 실패 시 프리뷰도 원복

gemini-code-assist · 2026-01-31T07:49:01Z

+  border: 0 !important;
+  outline: 0 !important;
+  box-shadow: none !important;


!important 규칙은 CSS의 자연스러운 계단식 상속(cascading)을 방해하여 유지보수를 어렵게 만들 수 있습니다. 꼭 필요한 경우가 아니라면 사용을 지양하는 것이 좋습니다. 이 속성들이 다른 스타일에 의해 덮어씌워지는 것을 막기 위해 사용되었다면, 대신 선택자의 명시도(specificity)를 높이는 방법을 고려해 보세요.

Suggested change

border: 0 !important;

outline: 0 !important;

box-shadow: none !important;

border: 0;

outline: 0;

box-shadow: none;

!important 삭제하고 .outer .box처럼 선택자 명시도 올리는 방식으로 변경

gemini-code-assist · 2026-01-31T07:49:02Z

+const BP_ORDER: Breakpoint[] = ['base', 'sm', 'md', 'lg', 'xl'];
+
+const BORDER_BY_SIZE: Record<ProfileImageSize, number> = {
+  xl: 2,


테두리 두께를 나타내는 숫자 2가 BORDER_BY_SIZE 객체와 resolveResponsiveBorder 함수(L150, L156) 등 여러 곳에 하드코딩되어 있습니다. 이 값을 const BORDER_WIDTH = 2;와 같이 상수로 정의하여 사용하면 코드의 가독성과 유지보수성을 높일 수 있습니다.

BORDER_WIDTH 상수로 분리완료

gemini-code-assist · 2026-01-31T07:49:02Z

+            className={`${styles.mask} ${styles[radius]} ${
+              variant === 'team' ? styles.teamMask : styles.profileMask
+            }`}


variant가 'profile'일 때 styles.profileMask 클래스를 사용하도록 되어 있으나, ProfileImage.module.css 파일에는 해당 클래스가 정의되어 있지 않습니다. 이로 인해 undefined가 클래스 이름으로 추가되어 의도치 않은 동작을 유발할 수 있습니다. 'profile' variant에 대한 특별한 스타일이 필요 없다면 이 부분을 제거하거나, 필요하다면 CSS 파일에 .profileMask를 정의해주세요.

className={`${styles.mask} ${styles[radius]} ${variant === 'team' ? styles.teamMask : ''}`}

profileMask 사용하지 않아 삭제

Jieunsse

아토믹한 컴포넌트 정의 관련해서 논의가 필요합니다.
월요일 회의에서 자세한 내용 공유하겠습니다!

Jieunsse · 2026-01-31T11:30:04Z

해당 컴포넌트 테스트를 위해서 작성하셨던 코드인 것 같아서 지우고 머지하는게 좋을 것 같습니다!

Jieunsse · 2026-01-31T11:34:02Z

+import { fetchApi } from '@/shared/apis/fetchApi';
+import { BASE_URL, TEAM_ID } from '@/shared/apis/config';


리뷰 전체 글에서 작성한 내용에 대해 논의가 필요합니다!

아토믹한 컴포넌트 정의 관련

Jieunsse

LGTM 👍
코드 작성하시느라 고생 많으셨습니다!
추후에 타입이나 유틸 함수들 분리해봐도 좋을 것 같아요!

apple and others added 2 commits January 31, 2026 16:32

feat: 프로필 이미지 컴포넌트 추가

ee7641c

chore: profile image props 설명 주석 추가

8e4877f

HWAN0218 added this to the 컴포넌트 milestone Jan 31, 2026

HWAN0218 requested review from Jieunsse, jungwon123 and yooolleee January 31, 2026 07:47

HWAN0218 self-assigned this Jan 31, 2026

HWAN0218 added the 기능추가 기능개발 및 추가할 때 사용해주세요. label Jan 31, 2026

HWAN0218 added this to workers Jan 31, 2026

github-project-automation Bot moved this to 개발 대기중 in workers Jan 31, 2026

HWAN0218 moved this from 개발 대기중 to PR 리뷰중 in workers Jan 31, 2026

gemini-code-assist Bot reviewed Jan 31, 2026

View reviewed changes

HWAN0218 added 2 commits January 31, 2026 17:23

refactor: 프로필 이미지 컴포넌트 코드 리팩토링

a038502

refactor: 이미지 컴포넌트 코드 리팩토링

00286c1

Jieunsse reviewed Jan 31, 2026

View reviewed changes

HWAN0218 added 4 commits February 2, 2026 11:32

refactor: 불필요한 코드 제거

4bb1ef6

refactor: page.tsx 파일 불필요한 코드 제거

f004607

refactor: 불필요한 삭제못한 코드 제거

694815a

refactor: api 분리 및 색상수정

acfc6e1

Jieunsse approved these changes Feb 3, 2026

View reviewed changes

HWAN0218 merged commit 04aa08d into main Feb 3, 2026
1 check passed

github-project-automation Bot moved this from PR 리뷰중 to 개발 완료 in workers Feb 3, 2026

HWAN0218 mentioned this pull request Feb 10, 2026

프로필 이미지 컴포넌트 수정 #51

Merged

		import { fetchApi } from '@/shared/apis/fetchApi';
		import { BASE_URL, TEAM_ID } from '@/shared/apis/config';

Uh oh!

Conversation

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

Uh oh!

Summary

Issue

Scope

Uh oh!

gemini-code-assist Bot commented Jan 31, 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!

gemini-code-assist Bot Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

HWAN0218 Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

HWAN0218 Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

HWAN0218 Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

HWAN0218 Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

HWAN0218 Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

Jieunsse left a comment

Choose a reason for hiding this comment

Uh oh!

Jieunsse Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

Jieunsse Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

Jieunsse left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

HWAN0218 commented Jan 31, 2026 •

edited

Loading