refactor(root): 이미지 크기 최적화를 위한 sizes 속성 추가 (#65)

- 불필요한 대용량 이미지 다운로드 방지
- LCP 개선 (성능 개선)
- 트래픽 절약
- 렌더링 최적화

Author: DandelionQZ

apps/homepage/src/app/(with-header)/(with-footer)/recruit/_components/ActivityCard.tsx

@@ -15,6 +15,7 @@ export const ActivityCard = ({item}: ActivityCardProps) => {
         alt=''
         aria-hidden={true}
         fill={true}
+        sizes='386px'
         draggable={false}
         className={clsx(
           'object-cover object-center transition-opacity duration-300 group-hover:opacity-0',
@@ -26,6 +27,7 @@ export const ActivityCard = ({item}: ActivityCardProps) => {
         alt=''
         aria-hidden={true}
         fill={true}
+        sizes='386px'
         draggable={false}
         className='object-cover object-center opacity-0 transition-opacity duration-300 group-hover:opacity-100'
       />

apps/homepage/src/app/(with-header)/(with-footer)/recruit/_components/PositionCard.tsx

@@ -20,6 +20,7 @@ export const PositionCard = ({item}: PositionCardProps) => {
         alt=''
         aria-hidden={true}
         fill={true}
+        sizes='285px'
         draggable={false}
         className='object-contain object-center opacity-100 transition-opacity duration-300 group-hover:opacity-0'
       />

apps/homepage/src/components/layout/RecruitmentLayout.tsx

@@ -36,6 +36,7 @@ export default function RecruitmentLayout({
           src={backgroundSrc}
           alt=''
           fill={true}
+          sizes='100vw'
           aria-hidden={true}
           draggable={false}
           className='object-contain object-center'

apps/recruit/src/app/(with-footer)/recruit/_components/ActivityCard.tsx

@@ -14,6 +14,7 @@ export const ActivityCard = ({item}: ActivityCardProps) => {
         src={ACTIVITY_CARD_STYLES[item.short].coverImageUrl}
         alt=''
         fill={true}
+        sizes='386px'
         draggable={false}
         className={clsx(
           'object-cover object-center transition-opacity duration-300 group-hover:opacity-0',
@@ -25,6 +26,7 @@ export const ActivityCard = ({item}: ActivityCardProps) => {
         aria-hidden={true}
         alt=''
         fill={true}
+        sizes='386px'
         draggable={false}
         className='object-cover object-center opacity-0 transition-opacity duration-300 group-hover:opacity-100'
       />

apps/recruit/src/app/(with-footer)/recruit/_components/PositionCard.tsx

@@ -19,6 +19,7 @@ export const PositionCard = ({item}: PositionCardProps) => {
         src='/images/position-card/position-card-bg.webp'
         alt=''
         fill={true}
+        sizes='285px'
         draggable={false}
         className='object-contain object-center opacity-100 transition-opacity duration-300 group-hover:opacity-0'
       />

apps/recruit/src/components/layout/RecruitmentLayout.tsx

@@ -39,6 +39,7 @@ export default function RecruitmentLayout({
           src={backgroundSrc}
           alt=''
           fill={true}
+          sizes='100vw'
           aria-hidden={true}
           draggable={false}
           className='object-contain object-center'