[나람쥑] 3주차 회고

비얌·2024년 1월 30일

나람쥑 트위터명함 팀프로젝트

[팀 프로젝트] 트위터명함

목록 보기

2/5

📮 개요

나람쥑 프로젝트가 3주차가 지나고 4주차가 되었다! 3주차 기록도 남겨보려고 한다.

✅ 3주차 한 일

저번주에 세운 3주차의 계획은 아래와 같다. nice-modal-react를 따로 공부하지는 못했지만, qr코드 모달을 만들며 한번 더 사용해보는 시간을 가졌다.

1, 2주차에는 UI 작업 위주로 했다. 3주차에는 아래 목록을 작업하고 싶다.

✅ 코드리뷰 확인 후 반영하기
✅ qr code 라이브러리를 사용해서 id를 주입받으면 qr코드가 만들어지는 기능을 구현해야 한다.(현재는 qr code 페이지에 더미 이미지 사용 중)
✅ qr code 페이지에 뒤로가기 버튼을 만들어야 한다. 아니면 페이지가 아니라 모달로 만들어야 한다. qr code를 만들 때 페이지 이동을 하는 게 어색하게 느껴져서, 아예 모달 작업으로 트는 것도 괜찮은 방법일 것 같다. 이야기 나눠봐야겠다.
✅ api 연결 작업 시작하기! 람쥐님이 api 명세서를 작성해주셨다. 이를 토대로 api 연결을 위한 사전 작업을 시작하고 싶다.
❌ 이번에 알게 된 nice-modal-react 라이브러리에 대해 더 알고 싶어서 공부해보는 시간을 갖고싶다!

이외에도 아래의 작업을 했다.
✅ 숏링크 생성 api를 연결했다.
✅ 숏링크를 생성하는 훅 useCreateShortLink를 만들었다.

🫨 어려웠던 점

💥 모달의 overlay가 안보이는 오류

모달의 오버레이가 보이지 않는 오류가 있었다. 이건 css 문제였는데, fixed 속성을 줬는데 위치를 정해주지 않아서 생긴 문제였다. top, left 등의 속성을 추가하여 해결했다.

💥 overlay를 클릭했을 때 모달이 닫히지 않는 오류

BottomSheet 모달에서 만든 오버레이처럼 모달 바깥에 오버레이 엘리먼트를 만들려고 했다. 그런데 이렇게 했을 때 모달이 닫히지 않는 오류가 있었다.

// 📄 바텀시트 모달

// 오버레이
return (
  <div
    className="max-w-lg w-full min-h-screen mx-auto fixed bottom-0 left-0 right-0 opacity-60 bg-slate-900 z-30"
    onClick={handleCloseBottomSheet}
  />

  // 오버레이 엘리먼트 외부에 모달
  ...
)

위의 방법으로는 도저히 해결이 안됐다. 그래서 아래와 같이 오버레이 엘리먼트 내부에 모달을 넣고, 오버레이 ref를 만들어 이벤트 버블링을 처리했더니 해결되었다.

위의 방법으로 왜 해결이 안됐는지는 아직도 모르겠다. z-index나 position, 위치 등도 모두 다시 설정해봤는데 안됐다. 나중에 리팩토링하며 다시 이유를 알아보고 싶다.

// 📄 qr 모달
const handleCloseQRModal = (e: React.MouseEvent<HTMLButtonElement>) => {
  if (e.target !== qrModalRef.current) return;
  modal.remove();
};

return (
  <section
    className="w-full h-[calc(100vh-10rem)] z-50 flex fixed top-0 left-0 items-center justify-center flex-col"
    onClick={handleCloseQRModal}
    ref={qrModalRef}
    >
    {/* 오버레이 엘리먼트 내부에 모달 */}
  </section>
)

🔮 고민

중간중간 디자인 관련 레퍼런스를 찾아가며 작업을 했어야 했나? 하는 생각이 든다. 작업하면서 계속 디자인이 아쉽다고 느낀다.
너무 동작하는 것에만 신경을 쓴 게 아닌지 하는 고민이 된다. 중간중간 공부하면서 구현했어야 하는데, 너무 구현에 급급했던 것 같다. 하지만 공부를 하면서 하면 내가 맡은 진도가 느려질까봐 무서워서 그러지 못하고 있다🥲
내가 맡은 프론트엔드 파트의 진도가 너무 느린 것은 아닌지, 잘 하고 있는지에 대한 고민도 조금 든다.