[개인프로젝트] 반려동물 동반 식당 정리 사이트 만들기 - 팝업창 닫기 버튼의 골머리...

장소에 대한 팝업창의 UI를 개편하던 프로젝트 진행 4일차.. 어김없이 문제가 생겼다.

나가기 버튼이 없어 나가기가 활성화되지 않고 있었기에 나가기 버튼을 활성화 시키며, 동시에 이 나가기 버튼이 상단에 고정이 되어 있기를 바라는 마음으로 수정을 진행하고 있었다.

그러다 나가기 버튼이 두개가 중첩되어 만들게 되어 버렸고, 추가된 하나는 금방 삭제했으나 무슨일인지 공간이 밀린건지 뒤에 이상한 흔적처럼 나가기 버튼이 배경에 박혀버렸고 이걸로 시간을 몇시간을 허비했는지도 모르겠다.

 

문제상황

각 페이지를 구성하는 코드가 너무 많기도 하고, 하나의 파일만 수정을 진행했던게 아니라 어떤 파일에서 뭐를 수정했었는지도 중간에 헷갈리는 지경이 왔었다.

나가기 버튼이 두개가 뜨는데 딱봐도 문제가 있는 상황이었고, 두 버튼 다 나가기로 기능이 활성화가 되고 있었다.

자세한 상황은 말로 설명하기보단 이미지를 통해 보는 것이 더 납득이 빠를 듯 하여 이미지를 아래에 추가한다.

팝업창 뒤에 보이는 나가기 툴바 이슈

 

그날 이 부분만 수정을 진행했던게 아니라서 어느 부분에서 코드를 손봤었는지 기억도 안나고, 제대로 알고 하는 사람도 아니었기에 더더욱 오류가 어디서 나고 있는건지를 알아보기가 어려웠다.

그래서 이 팝업창을 구성하는 코드에서 문제가 있는 건가 하고 한참을 살펴봤다.

 

방법 1. 팝업창 코드 분석

팝업창을 구성하고 있는 전체 코드만 해도 천줄이 넘어갔다.

그 중 실질적으로 버튼이 있는 부분을 찾아서 보니, 닫기 버튼이 두개가 활성화 된 것도 아니었다.

결과적으로는 이 파일에서는 문제가 없었던 것이다.

계속해서 새로고침을 통해 내가 무엇을 놓친 것인지 확인하던 중 다음 가설을 세웠다.

랜더링이 되고 있는 로딩중... 이라고 뜨는 메세지 부분이 없어지면서 남는 잔상이다.

그래서 이 잔상을 해결해보기 위해 또 코드를 수정한다.

 

방법 2. 잔상 제거

로딩이 되는 창의 크기만큼 딱 남아 있었기에, 아 이제야 방법을 찾았다 내가 놓쳤던 부분이 이 부분이니 해결되겠다 싶어 기쁠정도였다.

그래서 일단 로딩이 랜더되는 창의 크기를 동일하게 변경해보았다.

if (!place) return (
  <div style={{
    position: "fixed",
    inset: 0,
    background: "rgba(0,0,0,0.45)",
    zIndex: 100000,
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  }}>
    <div style={{
      width: "100%",
      maxWidth: "800px",
      height: "90vh",
      background: "white",
      borderRadius: "24px",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      fontSize: "16px",
      color: "#888",
    }}>
      로딩중...
    </div>
  </div>
);

 

결과를 이야기하자면 이 코드로 변경한 후에도 문제가 계속되었다는 것.

랜더링 창이 문제가 아니었던 것이다.

이미 3시간이 넘게 이 버그에만 시달리던 참이라 GPT, 제미나이 이 두가지를 계속 돌리다 클로드 코드를 이용해보기로 한다.

애초에 왜 클로드 코드를 쓰지 않았냐 하면 결제를 하지 않고 쓰기 때문에 무료 크레딧이 하루에 너무 적게 이용가능해서 이미 무료 크레딧이 끝난 시점이라 대기 시간이 필요했기 때문이었다.

좀 TMI 이긴한데... 확실히 코드 부분은 클로드 코드가 정말 잘 잡아준다.

 

방법 3. 모달 파일 수정

클로드 코드에 프로젝트 파일을 통해 내가 핵심적인 파일 일부를 올리고 어떤 부분에서 문제가 되고 있는지 파악을 해달라고 했다.

코드를 보더니 전체적으로 어떻게 폴더가 구성되어 있는지 안에 어떤 파일들이 있는지 확인이 더 필요하다고 하길래 VSCODE에서 폴더창을 이미지로 찍어 올렸다.

사진을 분석해보더니 모달 폴더 내 파일을 올려달라길래 코드를 줬더니 바로 분석을 해보고 해당 파일의 문제점임을 알려줬다.

결과적으로 모달안의 파일에서 나가기 버튼을 가지고 있었고, 페이지를 구성하는 파일에서도 나가기 버튼을 가지고 있어서 두개가 이상하게 출력이 되었던 것이었고 wrapper 역할을 한군데서 수행하도록 수정을 진행했다.

그래서 페이지를 구성하는 파일에서는 콘텐츠만 담당하고, 모달 폴더 내의 파일에서는 모달의 오버레이와 나가기 버튼, 스크롤까지 담당하는 것으로 변경했다.

<div
  onClick={(e) => e.stopPropagation()}
  style={{
    width: "100%",
    maxWidth: "800px",
    maxHeight: "90vh",
    overflowY: "auto",
    background: "white",
    borderRadius: "20px",
    position: "relative",
    // padding 제거 — page.tsx 안에서 처리
  }}
>

 

이렇게 두 파일의 중첩 내용을 각각 수정을 진행해보니까 한참을 골머리 앓던 나가기 버튼이 하나로 되면서 해결이 되었다!

 

추가 이슈 - 장소 리스트 출력 오류

이 문제를 해결하면서 다른 부분을 또 잘못 건드려서 카드 이미지가 잘리는 이슈가 이어서 발생해버렸다.

장소 리스트를 출력하는데 여기서 리스트 탭이 기존엔 안그랬는데 잘려서 보이기 시작한거다.

리스트 출력 중 아래 부분이 잘리는 이슈

 

이 날 같이 진행했던게 내부로 스크롤을 옮겨 넣으면서 자잘한 이슈가 있었기 땜누에 내부 스크롤 영역이 잘못 건드려져 문제가 발생했었다.

내부 스크롤 영역의 height 계산을 다시 해서 코드를 수정하니 해당 부분이 다시 말끔히 해결되었다.

// 234번째 줄
height: "calc(100vh - 80px)",

// 284번째 줄
height: "calc(100vh - 80px - 110px)",

 

그렇게 이날은 기능을 추가하기보다 버그를 잡는게 더 오래걸려 진이 정말 많이 빠진 날이었다..

그래도 나름 잘 되어 가는게 뿌듯해서 처음으로 진행사항을 영상으로 남겼던 날이기도 하다.

바이브 코딩으로 결과물이 빠르게 업그레이드 되는 것을 보는게 재밌어서 계속해서 하고싶어지는 매력이 있는 것 같다.

이렇게 늦었지만 4일차의 트러블 슈팅 기록 끝!