[Feat] 화면 내 완전 노출이 불가능한 태그 렌더링 제외

[claudia99503]

📝 변경 사항

• 카드 태그 영역에서 컨테이너 너비를 기준으로 각 태그의 실제 DOM 너비를 측정해, 넘어가는 태그는 처음부터 렌더링하지 않는 것처럼 완전히 숨기도록 구현했습니다.
• ResizeObserver와 useLayoutEffect를 사용해 화면 크기 / 컨테이너 너비 변경 시 태그 노출 범위를 자동으로 다시 계산하도록 처리했습니다.
• 태그는 항상 한 줄에서만 노출되며, 잘려 보이지 않고 “보이거나 / 아예 안 보이거나” 두 상태만 갖도록 UX를 개선했습니다.

---

🔗 관련 이슈

Closes #238

---

🧪 테스트 방법

• 수동 테스트 검증(로컬 환경)
• 유닛 테스트 검증
• 통합 테스트 검증

---

📸 스크린샷 (선택)

---

📋 체크리스트

• 관련 문서를 업데이트했습니다 (필요한 경우)
• 테스트를 추가/수정했습니다 (필요한 경우)
• Breaking change가 있다면 명시했습니다

---

💬 추가 코멘트

---

CodeRabbit Review는 자동으로 실행되지 않습니다.

Review를 실행하려면 comment에 아래와 같이 작성해주세요

@coderabbitai review

---

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch minseo-fix/tags

---

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]

🎭 Playwright Report

✨ E2E Test가 성공적으로 완료되었습니다.

Test 요약 내용을 확인해주세요.

Status	Build Log	Updated (UTC)
✅ Ready	View Build	2025-12-24 16:49:14

📊 Test Summary

• ✅ Passed: 3
• ❌ Failed: 0
• ⏱️ Duration: 27.8s

📜 Test Details

✅ Passed Tests (3)

• profile.test.ts (3)
  • [chromium] 존재하지 않는 프로필 페이지로 접속 시 404 redirect 되는 지 테스트
  • [firefox] 존재하지 않는 프로필 페이지로 접속 시 404 redirect 되는 지 테스트
  • [webkit] 존재하지 않는 프로필 페이지로 접속 시 404 redirect 되는 지 테스트

[github-actions]

📊 Coverage Report

Status	Build Log	Updated (UTC)
✅ Ready	View Build	2025-12-24 16:47:41

📈 #248을 main에 병합하면 coverage가 0.62% 증가합니다.

Coverage 요약

@@             Coverage Diff             @@
##             main     #248       +/-   ##
===========================================
+ Coverage   37.48%   38.10%    +0.62%     
===========================================
  Files         184      184         0     
  Lines        7825     7916       +91     
  Branches      341      359       +18     
===========================================
+ Hits         2933     3016       +83     
+ Misses       4892     4900        +8     

영향받은 파일

파일	Coverage 변화
/home/runner/work/WeGo_FrontEnd/WeGo_FrontEnd/src/components/shared/card/card-tags/index.tsx	92.98% (-7.02%) ⬇️

[github-actions]

🎨 Storybook Report

✨ Story가 변경되었습니다

Chromatic에서 비주얼 변경사항을 확인하세요.

Status	Storybook	Build Log	Updated (UTC)
✅ Ready	View Storybook	View Build	2025-12-24 16:48:04

[github-actions]

🚀 PR Preview Report

✨ Build가 성공적으로 완료되었습니다.

Preview에서 변경사항을 확인하세요.

Status	Preview	Build Log	Updated (UTC)
✅ Ready	Visit Preview	View Logs	2025-12-24 16:48:52

[HopeFullee]

리사이즈 옵저버 사용하신게 멋지네요

[HopeFullee]

빌드 터졌습니다. 유감이네요.

[HopeFullee]

축하드립니다. 건강하게 빌드 실패했습니다.