[refactor] 모임 생성 Lighthouse 기준 성능 및 접근성 개선

[miloupark]

📌 Summary

모임 생성 페이지 Lighthouse 측정 결과를 기준으로 성능 및 접근성 개선을 진행했습니다.

• close [refactor] 모임 생성 Lighthouse 기준 성능 및 접근성 개선 #237

📄 Tasks

• 모임 생성 헤더 이미지 우선 로딩 적용
• 이미지 width / height 명시로 레이아웃 안정화
• validation 에러 메시지 영역 고정으로 CLS 완화
• DatePicker Calendar 컴포넌트 지연 로딩으로 초기 번들 부담 완화

👀 To Reviewer

• 이번 PR은 성능/접근성 개선 목적입니다. 모임 생성 플로우 동작은 기존과 동일합니다!

📸 Screenshot

Before

After

Summary by CodeRabbit

릴리스 노트

• 성능 개선

  • 주요 아이콘 이미지 우선 로드 설정으로 초기 렌더링 개선
  • 날짜 선택기 동적 로딩으로 초기 페이지 성능 향상

• 버그 수정

  • 폼 오류 메시지의 레이아웃 안정성 개선(빈 상태에서도 공간 유지)

• 접근성

  • 테마 선택 트리거에 레이블 추가 및 색상 채움 비시각적 요소로 마킹
  • 날짜 선택기 레이블에 선택 값 포함하여 스크린 리더 지원 강화

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 7ea7d59d-057e-4c04-913f-4e4a7c89a4e3

📥 Commits

Reviewing files that changed from the base of the PR and between e0944a7 and b7090c6.

📒 Files selected for processing (1)

• apps/web/src/features/moim-create/ui/moim-form/form-field-error.tsx

---

📝 Walkthrough

Walkthrough

모임 생성 관련 5개 파일에서 이미지 로딩 우선순위 및 크기 명시, 동적 Calendar 로딩, 폼 에러의 항상 렌더링 처리 및 ARIA 속성 추가 등 성능·접근성 관련 수정이 적용되었습니다.

변경 사항

Cohort / File(s)	Summary
헤더 이미지 최적화 apps/web/src/_pages/moim-create/ui/moim-create-header.tsx	icoTitle에 priority 및 fetchPriority="high" 속성 추가로 이미지 로드 우선순위 지정.
폼 필드 에러 렌더링 안정화 apps/web/src/features/moim-create/ui/moim-form/form-field-error.tsx	message가 없을 때도 <p>를 렌더링하도록 변경(최소 높이 min-h-[18px], invisible 적용), role/aria-live는 조건부로 설정, 내용은 널일 때 \u00A0로 대체.
카테고리 일러스트 크기 명시 apps/web/src/features/moim-create/ui/moim-form/form-moim-section.tsx	CategoryTab에 전달되는 일러스트 이미지에 width={160} 및 height={160} 명시 추가.
테마 선택·날짜 접근성 개선 apps/web/src/features/moim-create/ui/moim-form/theme-color-select.tsx, apps/web/src/shared/ui/date-picker.tsx	SelectBox.Trigger에 aria-label="테마 선택" 추가, 색상 스와치에 aria-hidden="true" 적용, DatePicker 트리거의 aria-label을 값 포함 조건부 텍스트로 변경 및 Calendar를 next/dynamic으로 로드(ssr: false).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 분

추천 리뷰어

• blueiz920
• Jeayeong-Hong

시

🐰 이미지에 우선권을 주고, ARIA는 손을 잡고,
캘린더는 조용히 뒤에서 로드하네.
에러 자리 남겨두니 레이아웃이 웃고,
라이트하우스 숫자도 살랑입니다. ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	PR이 #237의 모든 목표를 충족함: 헤더 이미지 우선 로딩, 명시적 width/height 설정, 에러 메시지 영역 고정, DatePicker 지연 로딩 적용.
Out of Scope Changes check	✅ Passed	모든 변경사항이 성능 및 접근성 개선에 관련되어 있으며 #237의 범위 내에 있음.

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

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

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

Inline comments:
In `@apps/web/src/features/moim-create/ui/moim-form/form-field-error.tsx`:
- Around line 11-23: The early return when message is falsy prevents rendering
the <p> placeholder and thus breaks the fixed error-area spacing; remove the "if
(!message) return null" behavior and always render the paragraph node (the
element using message, hasMessage, and className) so min-h-[18px] and invisible
can reserve space; inside that <p>, conditionally set role and aria-live based
on hasMessage and render message ?? "\u00A0" to keep content/spacing while
keeping accessibility attributes dynamic.

🪄 Autofix (Beta)

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: Repository UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 1bc71a6d-269d-4d60-87c8-9bf95413fde6

📥 Commits

Reviewing files that changed from the base of the PR and between 2e402a4 and e0944a7.

📒 Files selected for processing (5)

• apps/web/src/_pages/moim-create/ui/moim-create-header.tsx
• apps/web/src/features/moim-create/ui/moim-form/form-field-error.tsx
• apps/web/src/features/moim-create/ui/moim-form/form-moim-section.tsx
• apps/web/src/features/moim-create/ui/moim-form/theme-color-select.tsx
• apps/web/src/shared/ui/date-picker.tsx

[chan-byeong]

지나치기 쉬운 부분 꼼꼼하게 개선하신 것 같습니다!
고생하셨습니다.

[chan-byeong]

이건 어떤 기능을 하는건가요?

[miloupark]

에러 메시지가 없을 때 빈 문자열 대신 \u00A0(non-breaking space)를 넣어서,
에러 영역의 한 줄 높이를 유지하기 위한 코드입니다!

\u00A0 = 공간을 차지하는 공백 문자

기존에는 메시지가 없으면 에러 영역이 없다가, 에러 발생 시 새로 생기면서 아래 요소가 밀리는 문제가 있었습니다.
그래서 메시지가 없을 때도 최소 높이를 유지해두고, 에러가 나타나더라도 레이아웃 변화(CLS)가 발생하지 않도록 적용했습니다.