[junjuny0227]

개요 💡

register-project의 ParticipantsField 컴포넌트 스타일을 디자인 스펙에 맞게 정제합니다.

작업내용 ⌨️

• hintClassName 공유 클래스 제거 → 각 섹션 텍스트에 인라인 스타일 직접 적용
• 검색결과·참여자 구분 컨테이너를 빈 fragment(<>)에서 flex flex-col gap-y-3 div로 교체
• 검색 결과 버튼 패딩·폰트 웨이트 조정 (px-3 py-1.5, font-normal)
• 참여자 태그 버튼 패딩·폰트 웨이트 조정 (px-3 py-1.5, font-normal)
• "찾을 수 없는 사용자 입니다" 문구 → "검색 결과가 없습니다"로 변경

스크린샷/동영상 📸

리뷰 요청사항 👀

인라인 스타일 값이 디자인 토큰 없이 하드코딩되어 있습니다. 현재 프로젝트 스타일 관리 방향과 일치하는지 확인 부탁드립니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
every-gsm-client-v2	Ready	Preview, Comment	Jun 5, 2026 1:17am

[gemini-code-assist]

Code Review

This pull request refactors the ParticipantsField component by replacing React fragments with styled wrapper divs, updating Tailwind classes for typography, spacing, and colors, and removing unused imports. The code review highlights a design inconsistency where leading-7.75 was incorrectly applied instead of leading-3.5 in the isAlreadyParticipant section. To prevent such typos and improve maintainability, the reviewer recommends extracting the duplicated section header markup into a reusable local component.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

I am having trouble creating individual review comments. Click here to see my feedback.

src/features/register-project/ui/ParticipantsField.tsx (127-133)

🐛 디자인 일관성 불일치 (오타 의심)

isAlreadyParticipant 조건부 렌더링 영역의 '검색결과' 타이틀에 leading-7.75가 적용되어 있습니다.

다른 '검색결과' 타이틀(라인 78, 108) 및 '프로젝트 참여자' 타이틀(라인 150)에는 모두 leading-3.5가 적용되어 있어 디자인 일관성이 깨집니다. 하단의 설명 문구에 적용된 leading-7.75가 잘못 복사된 것으로 보입니다.

이를 leading-3.5로 수정하여 일관성을 유지해 주세요.

                <p
                  className={cn(
                    'shrink-0 text-xs leading-3.5 font-normal whitespace-nowrap text-[#6A6A6A]',
                  )}
                >
                  검색결과
                </p>

src/features/register-project/ui/ParticipantsField.tsx (75-84)

♻️ 코드 중복 제거 및 유지보수성 개선 제안

현재 ParticipantsField 컴포넌트 내에서 가로선과 텍스트 조합으로 구성된 헤더 영역이 총 4번 거의 동일한 구조로 중복되어 사용되고 있습니다.

중복되는 영역:

1. showSearchResults 내부 (라인 75~84)
2. showNoResults 내부 (라인 105~114)
3. isAlreadyParticipant 내부 (라인 126~135)
4. participants.length > 0 내부 (라인 147~156)

이러한 반복적인 마크업과 스타일은 코드의 길이를 늘릴 뿐만 아니라, 스타일 수정 시 누락되거나 오타가 발생하기 쉽습니다 (실제로 isAlreadyParticipant 영역에서 leading-7.75 오타가 발생한 원인이기도 합니다).

개선 제안:
파일 내부에 로컬 컴포넌트(예: SectionHeader)를 정의하여 중복을 제거하고 공통으로 관리하는 것을 권장합니다.

interface SectionHeaderProps {
  label: string;
  colorClass?: string;
  lineColorClass?: string;
}

const SectionHeader = ({
  label,
  colorClass = 'text-[#6A6A6A]',
  lineColorClass = 'bg-[#6A6A6A]',
}: SectionHeaderProps) => (
  <div className="flex w-full items-center gap-4">
    <p className={cn('shrink-0 text-xs leading-3.5 font-normal whitespace-nowrap', colorClass)}>
      {label}
    </p>
    <div className={cn('h-px flex-1', lineColorClass)} />
  </div>
);

이를 적용하면 각 조건부 렌더링 영역을 다음과 같이 깔끔하게 작성할 수 있습니다:

{showSearchResults && (
  <div className={cn('flex w-full flex-col gap-y-3')}>
    <SectionHeader label="검색결과" />
    {/* ... */}
  </div>
)}

[s2yeons]

수고하셨습니다.

[yeondon125]

수고하셨습니다.