📂 프로젝트
eeum-logo

이음컴퍼니 브랜드페이지 - eeum.company

#Next.js, #Zustand,2025-05-08

청주, 오산을 중심으로 출장 세차 서비스를 제공하는 스타트업 '이음컴퍼니'의 브랜드페이지 개발 과정을 소개합니다.

목차

  • 구현과정
  • 트러블슈팅

1. 구현과정

이 서비스의 핵심 기능은 다음과 같아요.

  • 이음컴퍼니의 서비스 지역 안내
  • API route as Backend (기능 구현 완료)
  • 상담 예약 (개발 진행 예정)

첫번째, 이음컴퍼니의 서비스 지역 안내

service-region.gif

대한민국 지도를 svg파일 컴포넌트로 제작하여, 서비스 진행중인 구역은 색상, hover 효과가 동작하도록 기능을 구현했어요.

hover 여부는 Zustand의 상태관리를 활용하여 행정구역 텍스트와 지도간 연동을 구현했어요.

두번째, API route as Backend

api-route-as-backend.png

비록 공지사항만 존재하기에 프론트엔드만으로도 충분히 관리 가능하지만, 나중에 사업이 확장되고 이벤트, 문의 게시판 등의 섹션이 추가될 것을 고려하여 Vercel에서 공식적으로 지원하는 서버리스 DB, Neon을 도입했어요. 또, DB에 프론트엔드가 직접 접근하는 것은 의도치 않은 DB 접근을 발생시킬 수 있기에 api route를 활용하여 기능을 구현했어요.

세번째, 상담 예약

consult.gif

shadcn/ui의 Form 태그와 react-hook-form을 활용하여 유효성 판단 기능을 구현했고, react-daum-postcode 라이브러리 활용하여 주소값을 입력할 수 있도록 기능을 구현했어요. 입력을 완료한 이후엔 Drawer로 한번 더 확인할 수 있도록하고 전송하면 이음컴퍼니의 협업툴에 전송되어 담당자가 연락을 할 수 있도록 기능을 구현할 예정이에요.

아직 이음컴퍼니의 협업툴이 정해지지 않았어요. 플로우, 네이버웍스, 슬랙 등 어떤 것이 선택될지 모르기에 연결하는 과정은 아직 구현하지 않았어요.

2. 트러블슈팅

첫번째, 배포플랫폼의 변경

초기엔 Cloudflare의 workers를 활용했어요. 다만, 정적 플렛폼 배포에 특화되어있고, global scope에 비동기 로직을 선언하는 것의 제한 때문에 동적라우팅과 api route 활용이 제한되었어요.

따라서 Nextjs의 공식 배포플랫폼인 Vercel로 배포플랫폼을 변경하고, 공식적으로 지원하는 Neon을 api route 활용하여 서비스를 개발했어요.