💥 구조 붕괴를 막아라: position absolute에서 구조적 레이아웃으로 리팩토링

처음에는 각 컴포넌트를 position: absolute로 하나씩 올려서 배치했다.
속도는 빨랐지만, 구조가 조금씩 무너지는 게 보이기 시작했다.

🧨 문제는 언제 터졌나?

기존 구조의 문제:

• 컴포넌트를 하나 추가하거나 위치를 바꾸면, 기존 top/left 값을 전부 다시 조정해야 함

• 구성 요소 간의 관계가 전혀 없고, CSS만 믿고 UI를 맞추는 상황

결국 리뷰에서 다음과 같은 지적이 나왔다:

“이대로 계속 absolute로 쌓아갈 거야? 그럼 나중에 어떻게 유지보수할 건데?”

🔨 문제 해결을 위한 리팩터링 방향

✅ 1. 전체 구조는 "블록 구조"로

• Home, Profile 등 최상위 페이지들은 더 이상 absolute로 쌓지 않고
  display: block + margin, padding 중심의 구성으로 변경.

const HomeContainer = styled.div`
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
`;

• MainBanner, EventButton, WorldSelectButton, BottomBanner는 모두 자연스럽게 쌓이도록 처리함
  .

✅ 2. 내부는 "액자형 구조"로

• 예: ProfileContainer

• 외부는 flex 중심의 정렬, 내부만 position: absolute로 세밀한 위치 조정.

const Container = styled.div`
  position: relative;
  margin-top: 2vh;
  width: 90%;
  height: 18%;
  display: flex;
  align-items: center;
  justify-content: center;
`;

• 내부 요소인 이름, 배지, 수정 버튼은 relative 안에서만 정리.

📊 비교 전후 요약

항목			리팩터링 전					리팩터링 후
배치 방식		position: absolute			flex + block
UI 유연성		요소 하나 추가해도 전체 위치 재조정	자연스럽게 쌓임
유지보수		구조 깨지기 쉬움				컴포넌트 간 간섭 없음

🧠 회고

처음에는 “그냥 좌표 찍으면 간단하고 빠르잖아”라고 생각했지만,
실제 서비스 구조를 만들다 보니 유연성과 확장성, 유지보수가 훨씬 더 중요했다.

결국 구조적인 사고로 전환하지 않으면, UI는 쌓이는 게 아니라 무너진다는 걸 느꼈다.