삼성전자 비스포크 웨딩 펀딩

개요

‘비스포크 웨딩 펀딩(BESPOKE Wedding FUNding)’ 은 삼성전자가 신혼부부의 새로운 시작을 응원하는 캠페인입니다. 캠페인에 참여한 예비 부부에게는 다양한 모바일 청첩장이 지원되며, 청첩장에 갖고 싶은 삼성 가전 위시리스트를 추가하면 펀딩금을 통해 해당 가전을 구매할 수 있습니다. 서브페이지를 중심으로 사용자의 PC/태블릿/모바일 디바이스 환경에 최적화된 반응형 웹을 구현하였습니다.

진행 방식

구축 프로젝트이며, Next.js 환경에서 emotion 이란 css 라이브러리를 사용하여 작업했습니다. 디자인 수급은 figma 로 이루어졌고 기획을 제외한, 디자인(7), 프론트엔드(6), 백엔드(5) 네이티브(2) 개발팀 전체가 TF팀으로 활동하였습니다. 기획의 경우 제일기획과의 협업으로 진행이 되었습니다.

주요 작업 내용

• 1. 약관 동의 페이지

  • 체크박스 컴포넌트 활용 → 전체 선택/해제 기능을 포함한 상태 관리 로직 구현

  • 개별 약관 동의 상태를 감지해 모든 필수 약관 동의 완료 시에만 다음 단계 진행 버튼이 활성화되도록 조건부 렌더링 구현

  • 약관 내용 아코디언 탭 기능 구현 및 재사용성을 고려한 공통 컴포넌트 설계

• 2. 마이페이지

  • 사용자 정보 데이터 연동 및 수정 기능 구현

    • - 수정 버튼 클릭 시 입력폼 활성화 및 UI 상태 변경 → 직관적인 편집 경험 구현
    • - 정규표현식과 yup 라이브러리를 활용한 입력값 검증 구현

  • 로그인 상태와 청첩장 생성 여부를 확인하여 접근 가능한 기능을 동적으로 제한하고, 권한에 맞게 UI를 제공

  • 청첩장 공유하기, 수정하기, 펀딩금 관리하기 등 페이지 진입 라우팅

  • 펀딩금 관리페이지 D-DAY 시스템: 마감 기한까지 남은 일수를 실시간으로 계산하고, 기한 상태(진행중/마감임박/마감)에 따라 조건부 디자인 적용

  • 로그아웃, 탈퇴 등 주요 액션 관련 confirm 및 에러코드 값에 따른 에러 confirm 모달 구현

• 3. 축하금 전달 기한 설정 페이지

  • 축하금 액수 및 전달 기한 실시간 데이터 연동

  • select box, input 등 입력폼

    • - 캠페인 기간 범위에서만 날짜 설정 가능
    • - 월별 일수 자동 조정 표시 (ex. 8월 - 31까지 표시, 9월 - 30일까지 표시)
    • - 기한 설정 제한 (ex. 기한일을 오늘 이전으로는 설정 불가, 최대 기한 60일로 제한 등) 및 중요도에 따라 프론트단/백엔드단 에러처리

  • 펀딩금 전달 리스트 데이터 반복문으로 구현 (요청 여부, 전달리스트 여부에 따라 형태 구현)

  • 자세히 보기 버튼 → 펀딩금 송금 안내 팝업 구현

• 청첩장 공유하기 페이지

  • 반응형 퍼블리싱 작업

💫 Trouble shooting

• 폼 유효성 검사 에러 상태 초기화

  문제: 날짜 선택 시 년도/월/일이 변경될 때마다 이전 에러 상태가 남아있어 사용자가 올바른 값을 입력해도 에러 메시지가 계속 표시되는 문제가 발생

  해결: reat-hook-form 의 clearErrors 함수를 각 필드 변경 시점에 호출하여 에러 상태를 즉시 초기화하고, 사용자 경험을 개선

• 날짜 선택 컴포넌트 상태 동기화

  문제: 년도/월/일을 선택 시 각 필드가 독립적으로 변경되어 유효하지 않은 날짜 조합이 생성되거나, 월 변경 시 일 필드가 초기화되지 않는 문제가 발생

  해결: useEffect 를 활용하여 년도/월 변경 시 일 필드를 자동으로 초기화하고, 모든 필드가 완성되었을 때만 모든 년도/월/일이 기입된 값을 불러오는 로직을 구현

• 날짜 유효성 검사 로직

  문제: 펀딩금 전달 기한 설정에서 오늘 이전 날짜 선택 시 에러 처리가 즉시 반영되지 않고, 60일 제한 검사가 복잡하게 구현된 문제가 발생

  해결: 수정일(당일) 이전일 경우를 구하는 함수에서 시간을 0으로 설정하여 정확한 날짜 비교를 하고, 에러 상태를 즉시 업데이트하는 로직으로 개선

• 무한스크롤 스크롤 이벤트 최적화

  문제: 펀딩금 전달 리스트 페이지의 인피니트 스크롤 로직에서 이벤트가 너무 자주 발생하여 성능 저하와 불필요하게 API 호출이 발생함

  해결: lodash/debounce 를 활용하여 15ms 딜레이를 적용하여 스크롤 이벤트를 최적화하고 성능을 개선

• 스타일 관리의 비효율성 문제

  문제: 기본적으로 스타일링의 경우 순수 scss를 사용해왔는데, 전역 네임스페이스 충돌 문제 혹은 컴포넌트 단위 스타일 관리에 어려움이 있거나 재사용성/유지보수 측면에서 한계가 드러남

  해결: emotion 라이브러리를 도입하여 컴포넌트 단위로 스타일링을 적용 → 동적 스타일 제어를 통해 코드 가독성과 유지보수성을 개선, 전역 스타일 충돌 문제를 해소하여 개발 효율성과 환경을 향상