🛠 문제 상황

FullScreenImage 컴포넌트가 화면을 가득 채우지 못하거나 비율이 깨지면서 화면 밖으로 튀어나오는 문제가 발생하였습니다.

🔍 FullScreenImage의 역할

FullScreenImage는 WaitingRoom 화면을 표시하기 전에 전체 화면을 덮는 이미지 역할을 합니다. 사용자가 이 이미지를 클릭하면 본래의 WaitingRoom UI가 나타나도록 설계되었습니다. 이를 통해 유저에게 가이드 이미지나 안내 화면을 제공할 수 있습니다.

🔍 원인 분석

1. object-fit: cover; 속성으로 인해 이미지가 강제로 화면을 채우면서 일부가 잘리거나 튀어나오는 문제가 발생
2. width: 100vw; height: 100vh; 설정만으로 이미지가 정확하게 중앙에 배치되지 않음
3. 화면 크기가 달라질 때 이미지 비율이 깨지는 현상 발생

✅ 기존 코드 vs 수정된 코드 비교

🔴 기존 코드 (문제 발생 코드)

export const FullScreenImage = styled.img`
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  cursor: pointer;
`;

❌ 기존 코드의 문제점

• object-fit: cover;을 사용하여 이미지가 강제로 화면을 채우다 보니 일부가 잘리거나 튀어나오는 문제 발생
• width: 100vw; height: 100vh;만 설정하여 이미지가 정확히 중앙에 배치되지 않음
• 화면 크기가 달라질 때 비율이 깨지는 문제가 있음

🟢 수정된 코드 (해결된 코드)

export const FullScreenImageWrapper = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black; /* 빈 공간을 검정 배경으로 처리 */
  z-index: 999;
`;

export const FullScreenImage = styled.img`
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain; /* 비율 유지하며 화면에 맞춤 */
  cursor: pointer;
`;

✅ 수정된 코드의 개선점

• object-fit: contain;을 사용하여 이미지가 잘리지 않고 비율을 유지하면서 화면에 맞게 조정됨