📮 개요

2023년 회고에서 내년에 할 거라고 잠깐 언급했던 그 프로젝트를 하게 되었다!

🐿️ 팀 소개

이 프로젝트의 팀원은 총 3명으로 이루어져있다.

팀 이름은 '나람쥑'인데, 각자의 닉네임에서 한글자씩 따와서 만들었다. 정말 잘 만든 것 같다!

• 풀스택: 나비님 🐱
• 백엔드: 람쥐님 🐿️
• 프론트: (쥑)나 🐹

📝 프로젝트 소개

프로젝트를 시작하기 전에 어떤 프로젝트를 하고 싶은지 이야기를 나누어보았다. 우리는 공통적으로 '재미있고', '실제로 사용자가 있는' 프로젝트를 하고 싶어했다. 그래서 채택된 주제는 '트위터 명함 만들기'였다.

피그마 작성을 포함한 기획이 회의 두번만에 빠르게 끝났다. 그리고 빠르게 배포하는 것을 목표로 잡고 개발에 들어갔다.

평일에 매일 9시에 모여서 회의를 했고, 2주차 부터는 오전 9시-12시 코어타임을 가져서 화면공유를 하며 작업했다.

🫨 어려웠던 점

💥 모달 컴포넌트 만들기

너는, 나는 프로젝트 때도 그렇고, 모달 컴포넌트를 만드는 일은 항상 어려운 일인 것 같다.

• nice-modal-react라는 라이브러리를 추천받아 처음 사용해보았다. 더 공부가 필요할 것 같다.
• 모달 컴포넌트를 분리했는데, 이 컴포넌트 안에서 모달에 관련된 로직을 모두 집어넣으려고 했다. 그런데 그부분이 잘 안됐다.
• 오버레이 클릭시 모달이 닫히는 기능 구현을 위해 모달 컴포넌트 안에 ref를 정의해뒀다. 그런데 상위 페이지에서 그 ref를 사용해야 하는데, 그게 어렵지 않나?? 하는 고민에 모달 컴포넌트를 완전히 분리하지 못하고 있다.
• nice-modal-react를 많이 사용하는 것 같은데, backdrop이나 background나 overlay를 검색해도 결과가 나오지 않아서 내가 검색하는 방법이 잘못됐나 하는 생각이 들었다.
• 처음에는 isOverlayVisible이라는 상태가 있었는데, 코드리뷰를 통해 이 상태가 필요없다는 것을 알게 되었다. 왜냐하면 모달 컴포넌트를 분리하며 모달이 열렸을 때는 자연스럽게 isOverlayVisible도 true가 되고, 모달이 닫히면 false가 되기 때문에 굳이 상태를 하나 더 만들 필요가 없기 때문이다.

// 📄 모달 컴포넌트를 사용하는 페이지.tsx
const Page = () => {
  const showBottomSheet = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    if (e.target !== overlayRef.current) {
      e.stopPropagation();
    }
    NiceModal.show(BottomSheet);
  };

  return (
    <button onClick={showBottomSheet}>
      명함 전달하기
    </button>
  );
};


export default Page;

// 📄 모달 컴포넌트.tsx
const BottomSheet = () => {
  const overlayRef = useRef(null);
  const modal = useModal();
  const closeBottomSheet = () => {
    modal.remove();
  };

  return (
    <div
      ref={overlayRef}
      onClick={closeBottomSheet}
    />
  );
};

export default NiceModal.create(BottomSheet);

👏 잘한 점

• 매일 아침 코어타임을 가지고 코어타임에 집중한 것!
• 사실 내가 잘한 점보다는 팀원들께 감사한 점이 많다. 먼저 매일 이른 아침에 코어타임을 갖는 것이 정말 쉽지 않은 일인데, 매번 열심히 참여해주셔서 감사하다. 덕분에 으쌰으쌰할 수 있었다. 람쥐님은 적극적으로 질문을 많이 하시는데, 그런 모습에 동기부여가 많이 된다. 그리고 나비님은 자세하게 코드리뷰를 해주셔서 많이 배워가고 있다!!👍

🐹 3주차에는?

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

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

그리고 이번에 알게 된 nice-modal-react 라이브러리에 대해 더 알고 싶어서 공부해보는 시간을 갖고싶다!

팀에서 백엔드를 맡으신 람쥐님이 멋진 회고를 써주셨다👏
람쥐님🐿️의 회고 보러가기