fix: 멤버 프로필 드롭다운 아이콘 크기 변경

[ljh0608]

🤫 쉿, 나한테만 말해줘요. 이슈넘버

• close fix: 메이커스 뱃지 정렬로직 제거 #2206

🧐 어떤 것을 변경했어요~?

🤔 그렇다면, 어떻게 구현했어요~?

❤️‍🔥 당신이 생각하는 PR포인트, 내겐 매력포인트.

📸 스크린샷, 없으면 이것 참,, 섭섭한데요?

[coderabbitai]

Summary by CodeRabbit

릴리스 노트

• 스타일
  • 프로필 섹션의 작업 아이콘들(수정, 경고, 사용자 제거)의 크기를 확대하여 더욱 명확하게 표시합니다.

개요

프로필 섹션의 세 개 인라인 아이콘(EditIcon, IconAlertTriangle, IconUserX)의 크기를 16px에서 20px로 조정하여 시각적 일관성을 개선했습니다. 제어 흐름이나 이벤트 처리는 변경되지 않았습니다.

변경 사항

Cohort / File(s)	요약
프로필 섹션 아이콘 크기 조정 src/components/members/detail/ProfileSection/index.tsx	EditIcon, IconAlertTriangle, IconUserX의 너비/높이를 20px로 증가하여 아이콘 시각적 크기 개선

예상 코드 리뷰 시간

🎯 1 (Trivial) | ⏱️ ~3 minutes

추천 검토자

• seong-hui
• imddoy

시

🐰 아이콘들이 자라나고
더 크고 밝게 빛나리
스무 픽셀의 우아함
프로필 페이지 완성이야 ✨

🚥 Pre-merge checks | ✅ 1 | ❌ 4

❌ Failed checks (3 warnings, 1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	PR 제목은 드롭다운 아이콘 크기 변경에 관한 것이지만, 실제 변경사항은 프로필 섹션의 아이콘 크기 조정입니다. 또한 연결된 이슈 #2206은 메이커스 뱃지 정렬로직 제거를 요구하고 있어, PR 제목과 실제 이슈 목표가 일치하지 않습니다.	PR 제목을 이슈 #2206의 실제 목표인 메이커스 뱃지 정렬로직 제거를 반영하도록 수정하거나, 변경사항이 올바른 이슈와 연결되어 있는지 확인하세요.
Linked Issues check	⚠️ Warning	연결된 이슈 #2206은 메이커스 뱃지 정렬로직 제거를 요구하지만, 실제 PR 변경사항은 ProfileSection의 아이콘 크기 조정입니다. 요구된 메이커스 뱃지 정렬로직 제거 작업이 포함되어 있지 않습니다.	이슈 #2206의 메이커스 뱃지 정렬로직 제거 작업을 완료하거나, 다른 관련 이슈가 있다면 연결된 이슈를 수정하세요.
Out of Scope Changes check	⚠️ Warning	아이콘 크기 조정은 이슈 #2206(메이커스 뱃지 정렬로직 제거)의 범위를 벗어난 변경사항입니다. 제목과 실제 변경사항이 모두 이슈 목표와 맞지 않습니다.	PR에 포함된 아이콘 크기 조정이 다른 이슈와 관련된 것인지 확인하고, 이슈 #2206과 관련된 메이커스 뱃지 정렬로직 제거 작업을 추가로 구현하세요.
Description check	❓ Inconclusive	PR 설명이 매우 불완전합니다. 이슈 번호는 명시되어 있지만(#2206), 실제 변경사항, 구현 방식, PR 포인트, 스크린샷 등 템플릿의 주요 섹션들이 채워져 있지 않아 변경사항을 이해하기 어렵습니다.	PR 설명 템플릿을 완성하여 변경사항, 구현 로직, 주의사항, 스크린샷 등을 구체적으로 설명해주세요.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/#2206

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

✨✨ 스토리북으로 확인하기 ✨✨

• Build
• Preview

[github-actions]

🚀 프리뷰 배포 확인하기 🚀

https://fc0e8e02.sopt-internal-dev.pages.dev

[coderabbitai]

🧹 Nitpick comments (1)

src/components/members/detail/ProfileSection/index.tsx (1)

124-124: EditButton 내 SVG 크기 CSS 규칙이 데드 코드가 됩니다.

인라인 style 속성은 CSS 클래스 규칙보다 높은 특이성(specificity)을 가지므로, EditButton 스타일드 컴포넌트의 아래 SVG 규칙들이 더 이상 적용되지 않아 데드 코드가 됩니다.

// EditButton (lines 246-259)
svg {
  width: 26.05px;  // 무효
  height: auto;    // 무효
}
`@media` ${MOBILE_MEDIA_QUERY} {
  svg {
    width: 19.26px; // 무효
  }
}

반응형 크기 조정도 사라지게 됩니다(데스크탑: 26.05px → 20px, 모바일: 19.26px → 20px). 의도한 변경이라면 EditButton의 SVG 규칙을 제거하는 것이 좋습니다.

♻️ EditButton의 데드 SVG 규칙 제거 제안

 const EditButton = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: `#2c2d2e`;
   cursor: pointer;
   width: 40px;
   height: 40px;

-  svg {
-    width: 26.05px;
-    height: auto;
-  }

   `@media` ${MOBILE_MEDIA_QUERY} {
     top: 5px;
     width: 32px;
     height: 32px;

-    svg {
-      width: 19.26px;
-    }
   }
 `;

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/members/detail/ProfileSection/index.tsx` at line 124, The
inline style on <EditIcon> overrides the SVG size rules inside the EditButton
styled-component, making the svg CSS (the svg block and its MOBILE_MEDIA_QUERY
variant in EditButton) dead and removing responsive sizing; either remove the
inline style on EditIcon so EditButton's svg rules control size, or if the 20px
size is intended permanently, delete the svg rules from the EditButton
styled-component to avoid dead CSS—locate EditIcon usage at the JSX line with
<EditIcon style={{ width: '20px', height: '20px' }} /> and the EditButton
styled-component (svg { ... } and its `@media` block) to apply the chosen fix.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/members/detail/ProfileSection/index.tsx`:
- Line 124: The inline style on <EditIcon> overrides the SVG size rules inside
the EditButton styled-component, making the svg CSS (the svg block and its
MOBILE_MEDIA_QUERY variant in EditButton) dead and removing responsive sizing;
either remove the inline style on EditIcon so EditButton's svg rules control
size, or if the 20px size is intended permanently, delete the svg rules from the
EditButton styled-component to avoid dead CSS—locate EditIcon usage at the JSX
line with <EditIcon style={{ width: '20px', height: '20px' }} /> and the
EditButton styled-component (svg { ... } and its `@media` block) to apply the
chosen fix.