SP-694 메인페이지, 모집공고 모아보기 페이지 성능 개선 => 배너 이미지 크기 최소화

[SungHyun627]

💡 다음 이슈를 해결했어요.

• 배너 이미지 최소화
• 모달 반응형 적용

💡 이슈를 처리하면서 추가된 코드가 있어요.

🛠 배너 이미지 최소화

메인페이지와 모집공고 모아보기 페이지의 상단에 보여지는 배너의 이미지 크기를 줄였스빈다.

✔︎ 배너 이미지 크기(기존)

✔︎ 기존 배너 이미지 크기(수정 후)

🛠 모달 반응형 적용

viewport 600px를 기준으로 모달 반응형을 적용하였습니다.

✅ 셀프 체크리스트

• 브랜치 전략에 맞는 브랜치에 PR을 올리고 있습니다. (master/main이 아닙니다.)
• 커밋 메세지를 컨벤션에 맞추었습니다.
• 변경 후 코드는 컴파일러/브라우저 warning/error 가 발생시키지 않습니다.
• 변경 후 코드는 기존의 테스트를 통과합니다.
• 테스트 추가가 필요한지 검토해보았고, 필요한 경우 테스트를 추가했습니다.
• docs 수정이 필요한지 검토해보았고, 필요한 경우 docs를 수정했습니다.

[github-actions]

💡 LightHouse Reports

🟢 90 ~ 100    🟠 50 ~ 89    🔴 0 ~ 49

🖥 Desktop

📄 메인

Category	Score
🔴 Performance	48
🟢 Accessibility	95
🟢 Best practices	96
🟢 SEO	92
🔴 First Contentful Paint	3.5 s
🔴 Largest Contentful Paint	7.1 s
🔴 Speed Index	4.5 s
🟢 Total Blocking Time	50 ms
🟠 Cumulative Layout Shift	0.18

📄 로그인

Category	Score
🔴 Performance	47
🟢 Accessibility	95
🟢 Best practices	100
🟢 SEO	92
🔴 First Contentful Paint	3.3 s
🔴 Largest Contentful Paint	7.0 s
🔴 Speed Index	3.7 s
🟢 Total Blocking Time	30 ms
🟠 Cumulative Layout Shift	0.21

📄 모집공고 모아보기

Category	Score
🔴 Performance	47
🟢 Accessibility	91
🟢 Best practices	96
🟢 SEO	92
🔴 First Contentful Paint	3.3 s
🔴 Largest Contentful Paint	6.9 s
🔴 Speed Index	3.7 s
🟢 Total Blocking Time	120 ms
🟠 Cumulative Layout Shift	0.18

📄 모집공고 상세

Category	Score
🟠 Performance	55
🟠 Accessibility	87
🟢 Best practices	96
🟠 SEO	83
🔴 First Contentful Paint	3.1 s
🔴 Largest Contentful Paint	7.0 s
🔴 Speed Index	3.6 s
🟢 Total Blocking Time	70 ms
🟢 Cumulative Layout Shift	0.095

📱 Mobile

📄 메인

Category	Score
🔴 Performance	39
🟢 Accessibility	95
🟠 Best practices	89
🟢 SEO	92
🔴 First Contentful Paint	20.0 s
🔴 Largest Contentful Paint	42.5 s
🔴 Speed Index	20.0 s
🔴 Total Blocking Time	650 ms
🟢 Cumulative Layout Shift	0.005

📄 로그인

Category	Score
🔴 Performance	30
🟢 Accessibility	95
🟢 Best practices	96
🟢 SEO	92
🔴 First Contentful Paint	18.8 s
🔴 Largest Contentful Paint	42.6 s
🔴 Speed Index	18.8 s
🟠 Total Blocking Time	520 ms
🟠 Cumulative Layout Shift	0.24

📄 모집공고 모아보기

Category	Score
🔴 Performance	35
🟢 Accessibility	91
🟠 Best practices	89
🟢 SEO	92
🔴 First Contentful Paint	19.9 s
🔴 Largest Contentful Paint	42.3 s
🔴 Speed Index	19.9 s
🔴 Total Blocking Time	870 ms
🟢 Cumulative Layout Shift	0

📄 모집공고 상세

Category	Score
🔴 Performance	35
🟠 Accessibility	87
🟢 Best practices	93
🟠 SEO	83
🔴 First Contentful Paint	18.7 s
🔴 Largest Contentful Paint	42.6 s
🔴 Speed Index	18.7 s
🔴 Total Blocking Time	800 ms
🟢 Cumulative Layout Shift	0.065