로컬 커머스 사업으로 고객과 상점을 연결하고, 부릉을 통해 배달을 수행하는 노크의 기능을 관리하는 어드민 제품입니다.

노크의 사장님을 위한 앱으로, 주문관리, 매출관리, 상점관리 등의 기능을 제공합니다.

노크 주문앱 내에서 웹뷰를 통해 유튜브 숏폼을 재생할 수 있도록 제작된 웹뷰 숏츠 플레이어 제품입니다.

부릉의 핵심 기능을 관리하는 백오피스 어플리케이션입니다. 부릉의 임직원이 라스트마일의 이해 관계자인 상점, 라이더, 고객들의 정보를 관리하고, 운영하며 소통할 수 있는 어드민 제품입니다.

소성가공업체의 공정 프로세스를 대상으로 하여, 생산관리에 필요한 필수 기능을 공통화한 MES 제품입니다.

시시각각 변하는 쿠팡 상품 가격정보를 주기적으로 가져와서 가격 정보를 차트로 제공하고, 사용자가 원하는 가격에 도달하면 알림을 보내주는 어플리케이션입니다.

Next.js의 서버 사이드를 BFF로 활용하여, 여러 리소스 서버의 응답을 하나로 aggregate하는 방법으로, 각 도메인의 응답 값을 조합하여 클라이언트에 핏한 응답을 제공하는 방법을 사용하여 해결했습니다.

Google SSO + KeyCloak 기반의 사용자 인증 정보를 구현했습니다. next-auth를 통해 토큰 정보(만료, 갱신, 인증)에 대한 정보를 암호화하여 쿠키에 저장하였고, Next.js의 middleware를 활용하여 api 호출 또는 router 이동 간에 사용자를 인증하며, 갱신하도록 구현했습니다.

개인정보처리방침에 따라 모든 개발 과정에 개인정보 마스킹 처리 및 접근 권한에 따른 인가 처리를 진행했습니다.

서버 스펙과 동기화 되지 않아 발생하는 사이드 이펙트를 방지 하기 위해 nock와 jest를 활용하여 비즈니스 로직을 테스트하는 hook 테스트를 도입했습니다.

대부분의 상점은 배달의민족에 입점되어 있는 것을 확인하였고, 네이버 지도에 배달의민족 주문하기 연동이 되어있는 점을 발견하여 배달의민족 OpenAPI 정보를 획득하여 노크 규격에 맞게 데이터를 가공하여 1,200개 상점에 대한 데이터를 성공적으로 마이그레이션 했습니다.

beforeunload 이벤트를 이용하여 이전 페이지의 스크롤 포지션을 세션 스토리지에 저장하고, 스크롤을 유지시킬 수 있는 hook을 구현하였고, 서버사이드의 데이터가 매번 갱신되어 두번째 페이징 이상의 스크롤을 감지 못하는 문제를 해결하기 위해 뒤로가기 시 query param을 이용하여 해당 데이터가 이미 로드되었는지 여부를 넘겨주어 데이터를 재갱신 하지 않도록 방지하였습니다.