fix : PinFeedCard 재생 파형 네온 적용 및 노래 등록 소개 글자수 안내

[kim3360]

변경 내용

• PinFeedCard 미리듣기 재생 중 사운드 웨이브 아이콘에 네온 그라데이션 적용 (지도 말풍선과 동일 스타일)
• 노래 등록(SongDetailPage) 소개 입력 100자 도달 시 글자 수 빨간색 표시 + 안내 문구 노출

관련 이슈

Closes #341

변경 사항

• 새로운 기능 추가
• 버그 수정
• UI/UX 개선
• 리팩토링
• 문서 업데이트

테스트

• 브라우저에서 정상 동작 확인
• 기존 기능에 영향 없음 확인

스크린샷 (UI 변경시)

체크리스트

• 코드가 정상적으로 동작합니다
• 새로운 에러나 경고가 없습니다
• 필요시 문서를 업데이트했습니다
• 코드 포맷팅을 실행했습니다 (pnpm format)
• ESLint 검사를 통과했습니다 (pnpm lint:fix)

코드 품질 확인
PR 제출 전에 다음 명령어를 실행하여 코드 품질을 확인해주세요:

pnpm lint:fix
pnpm format

Summary by CodeRabbit

• 새로운 기능
  • 곡 소개 입력란에서 최대 글자 수에 도달하면 안내 문구가 표시됩니다.
  • 최대 글자 수 도달 시 글자 수 표시가 빨간색으로 변경됩니다.
  • 재생 중인 오디오의 사운드웨이브 아이콘이 재생 상태에 맞게 표시됩니다.

[coderabbitai]

📝 Walkthrough

Walkthrough

PinFeedCard의 재생 파형에 지도 핀 메시지 박스 스타일과 상태 클래스를 적용했습니다. SongDetailPage의 소개 입력에 최대 길이 안내, 접근성 설명 연결, 글자 수 색상 변경을 추가했습니다.

Changes

핀 및 곡 상세 UI

Layer / File(s)	Summary
PinFeedCard 재생 파형 스타일 src/features/pin/components/PinFeedCard.tsx	MapPinMessageBox.css를 불러옵니다. 오디오 재생 중인 파형 래퍼에 gc-wave--playing 클래스를 조건부 적용합니다.
소개 입력 글자 수 안내 src/pages/SongDetailPage.tsx	소개 입력이 최대 길이에 도달하면 안내 문구를 표시합니다. 안내 문구를 aria-describedby로 textarea에 연결하고 글자 수를 빨간색으로 표시합니다.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• UMC10th-PLIMAP/plimap-web#279: gc-wave 및 gc-wave--playing 클래스를 사용하는 파형 스타일 변경과 직접 연결됩니다.
• UMC10th-PLIMAP/plimap-web#58: SongDetailPage.tsx의 기존 소개 입력 영역과 연결됩니다.
• UMC10th-PLIMAP/plimap-web#214: PinFeedCard의 오디오 미리듣기 UI 흐름과 연결됩니다.

Suggested labels: enhancement

Suggested reviewers: onebone, jeonggyul

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목은 PinFeedCard 파형 네온 적용과 SongDetailPage 소개 글자 수 안내라는 주요 변경 사항을 정확히 요약합니다.
Linked Issues check	✅ Passed	변경 사항은 이슈 #341의 파형 클래스 적용, 100자 카운터 색상, 제한 안내 문구, aria-describedby 요구 사항을 모두 충족합니다.
Out of Scope Changes check	✅ Passed	변경 사항은 연결된 이슈 #341의 두 기능에 한정되며, 관련 없는 코드 변경은 확인되지 않습니다.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/341-pin-feed-wave-neon-song-intro-limit

---

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

[github-actions]

https://pr-342.plimap.kr

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

src/pages/SongDetailPage.tsx (1)

640-647: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

textarea에 maxLength를 선언하세요.

현재 입력 제한은 onChange의 slice()에만 의존합니다. maxLength={INTRO_MAX_LENGTH}를 추가하면 브라우저와 보조 기술에도 제한을 전달할 수 있습니다. 기존 slice()는 IME 및 붙여넣기 입력에 대한 상태 방어로 유지하세요.

Based on learnings, 한국어 IME 입력은 제한을 일시적으로 초과할 수 있으므로 native maxLength와 현재 상태 방어를 함께 유지하는 구성이 안전합니다.

제안 수정

               <textarea
                 id="song-intro"
+                maxLength={INTRO_MAX_LENGTH}
                 value={introduction}

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/pages/SongDetailPage.tsx` around lines 640 - 647, SongDetailPage의
song-intro textarea에 maxLength={INTRO_MAX_LENGTH}를 추가해 브라우저와 보조 기술에 입력 제한을
전달하세요. 기존 onChange의 slice() 기반 상태 방어는 한국어 IME 및 붙여넣기 입력을 위해 유지하세요.

Source: Learnings

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/features/pin/components/PinFeedCard.tsx`:
- Line 11: Update the SoundWaveIcon SVG stroke to use currentColor instead of
the hardcoded `#BBBBBB` value, preserving the existing .gc-wave color contract
while leaving the .gc-wave--playing mask gradient behavior unchanged.

In `@src/pages/SongDetailPage.tsx`:
- Around line 630-633: SongDetailPage의 introduction 길이 제한 안내 문구를 PR 요구사항에 맞게
“소개는 최대 100자까지 입력할 수 있어요”로 변경하세요.

---

Nitpick comments:
In `@src/pages/SongDetailPage.tsx`:
- Around line 640-647: SongDetailPage의 song-intro textarea에
maxLength={INTRO_MAX_LENGTH}를 추가해 브라우저와 보조 기술에 입력 제한을 전달하세요. 기존 onChange의
slice() 기반 상태 방어는 한국어 IME 및 붙여넣기 입력을 위해 유지하세요.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 91798316-24ff-4299-8b56-8d1685978b55

📥 Commits

Reviewing files that changed from the base of the PR and between d66eef2 and 9f368a1.

📒 Files selected for processing (2)

• src/features/pin/components/PinFeedCard.tsx
• src/pages/SongDetailPage.tsx