파이널 프로젝트 회고

프로젝트 소개

작업 기간: 2023.12.26 ~ 2024.01.29

업주야놀자 Final Project : B2B Self-coupon Admin(Backoffice) 서비스

해당 깃 레포지토리

https://github.com/Upjuyanolja/Upjuyanolja_FE

프로젝트 인원

FE: 6명 / BE: 4명 / PM: 5명 / UXUI: 1명

기술 스택

Environment

GitHub, Git, Eslint

Front-End

React, TypeScript, ReactQuery, Recoil, Ant design, Styled Component, Jest

담당한 기능

• 포인트 충전: 토스페이먼츠를 활용하여 포인트 충전 기능을 구현
• 포인트 내역조회: React Query와 Recoil, 그리고 Query String을 사용하여 포인트 내역을 조회하는 기능을 구현.

겪었던 문제들

모달 렌더링 문제.

export const PointModal = ({
  isModalOpen,
  setIsModalOpen,
}: PointModalProps) => {
  const paymentWidgetRef = useRef<PaymentWidgetInstance | null>(null);
  const paymentMethodsWidgetRef = useRef<ReturnType<
    PaymentWidgetInstance['renderPaymentMethods']
  > | null>(null);  
  const selector = '#payment-widget';
  useEffect(() => {
    (async () => {
      const paymentWidget = await loadPaymentWidget(clientKey, customerKey);

      const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
        selector,
        { value: price, currency: 'KRW', country: 'KR' },
        { variantKey: 'DEFAULT' },
      );

      paymentWidgetRef.current = paymentWidget;
      paymentMethodsWidgetRef.current = paymentMethodsWidget;
    })();
  }, [paymentWidgetRef, price]);

  useEffect(() => {
    const paymentMethodsWidget = paymentMethodsWidgetRef.current;

    if (paymentMethodsWidget == null) {
      return;
    }

    paymentMethodsWidget.updateAmount(price);
  }, [price]);
  // ...
  
  return (
    ...
    <div id="payment-widget" />
  )

selector에 해당하는 HTML 요소를 확인할 수 없어서, 모든 페이지에 해당 에러 발생.

// Sidebar UserProfile.tsx
<StyledSpace direction="vertical" align="center">
      <TextBox typography="h5" color="primary" fontWeight="bold">
        {userInfoData.name} 님
      </TextBox>
      <TextBox typography="h3" color="black900" fontWeight="bold">
        {numberFormat(pointSummaryData.currentPoint)} P
      </TextBox>
      <StyledButton type="primary" size="large" onClick={showModal}>
        포인트 추가하기
      </StyledButton>
      <PointModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />  // 상시 렌더링
</StyledSpace>

export const PointModal = ({
  isModalOpen,
  setIsModalOpen,
}: PointModalProps) => {
  console.log('컴포넌트 렌더링');
}

모달 컴포넌트에 들어가져있는 로직이 원래는 모달 컴포넌트가 열린 상태에서 로직실행이 되어야 한다. 하지만,

<PointModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />

이런식으로 작성하게 되면 모달 컴포넌트가 보여지지않지만 렌더링이 되는 상황이 된다.

{isModalOpen && (<PointModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />)}

isModalOpen이 true인 경우에만 해당 컴포넌트 렌더링하게 작성.

KPT

KEEP 🎯

팀원들과의 정기적인 회의(의사소통).
PRD 분석 (요구사항 분석).
컴포넌트의 분리

PROBLEM 🥊

Test Code에 대한 이해 및 작성 요령.

TRY 🚀

React Query와 Recoil로 State 관리.
Util 함수 분리.

협업을 하면서 느낀점

다양한 프로젝트를 진행하면서, 한 프로젝트에서는 각자의 역할과 책임을 명확히 분담했지만 팀원들 간의 의사소통이 효과적으로 이뤄지지 않아 프로젝트의 진행이 지연이 되었다.

이러한 경험으로 인해 파이널 프로젝트에서 의사소통이라는 부분에 초점을 두어서 진행을 했었다. 의사소통에서는 투명성과 정기적인 업데이트가 중요하다고 느꼈다. 그래서 팀원들과의 정기적인 회의를 통해 진행 상황과 어려움을 공유하고 피드백을 주고받았다.

이러한 방법을 통해, 프로젝트의 일정에 맞춰서 잘 진행이 되어 큰 문제 없이 프로젝트가 잘 마무리가 되었다. 의사소통이 팀 전체의 성공을 위한 필수적인 요소라는 것을 깨달았다.