미리보기

• 호텔 또는 모텔 비치된 qr을 통해 숙박하는 손님을 대상으로 한 배달 플랫폼 구축

• 테블릿이 호환될 수 있도록 RN으로 추가 개발

• 관리자 페이지 유지보수

• 매장 점주들이 사용하는 주문 관리 프로그램을 리액트와 일렉트론 프레임워크를 사용해 개발

• 호텔, 펜션 예약 사이트 스테이모아 개발

• 스테이 모아 관리자 페이지 개발
  

• 가격분석, 매물분석, 농지연금 분석, 농지찾기, 내 농장 진단, 내 집 짓기, 숨은 정책 지원금 7개 서비스 FE관련 개발

• 고객 문의, 공지사항, 뉴스룸, 결제페이지 등등 페이지 개발

• 카카오맵 연동

• 반응형 웹 개발

• 사용자 트래킹을 위해 Google Analytics(GA) 태그 추가

• 검색 엔진 최적화

• 서비스 버전 관리 및 배포

• 데이터 시각화를 위한 차트 라이브러리 커스텀 사용

React, Next.js, Tailwind CSS 기반의 숙박 예약 플랫폼을 개발했습니다.
어드민 페이지에서는 숙소의 기본 정보, 시즌 및 요금 설정, 서비스·옵션·시설 등의 상세 설정이 가능하며, 일반 숙박업소 점주가 로그인 시 자신의 정산 내역, 예약률, 공실률 등을 확인할 수 있는 대시보드도 제공합니다.
사용자 페이지에서는 숙소 검색부터 예약까지의 전 과정을 구현했으며, 서버 사이드 렌더링과 스켈레톤 UI를 도입해 사용자 경험과 성능을 함께 고려했습니다.
초기엔 펜션 중심으로 설계되었지만, 호텔까지 확장할 수 있도록 구조를 유연하게 구성했습니다.

React와 electron을 기반으로 QR 코드 기반 호텔 서비스 플랫폼의 주문 관리 시스템을 개발하였습니다.

• 주문 승인/거절 및 진행 상태 관리:
  고객 주문이 접수되면 해당 주문을 승인하거나 거절할 수 있는 기능을 구현하였으며, 주문 승인 후 배달대행 업체 선택부터 고객에게 배달 완료까지의 과정을 프로그레스바 형태로 시각화하여 실시간으로 관리할 수 있도록 설계하였습니다.

• 주문 내역 관리:
  모든 주문 내역을 날짜별로 조회할 수 있는 기능을 추가하여, 체계적인 기록 관리 및 확인이 가능하도록 하였습니다.

• 설정 폼 제작:
  위 이미지와 같이 프린터 포트, 커팅 명령어, 음성 반복 횟수, 볼륨 조절 등 다양한 설정을 조정할 수 있는 폼 UI를 제작하였습니다. 이로써 사용자 친화적인 환경에서 관리자가 원하는 설정을 간편하게 조정할 수 있도록 구현하였습니다.
  
  Electron 기반 실행 파일 배포 및 업데이트 관리:
  실행 파일은 각 가맹점에 손쉽게 설치되며, Git 업데이트를 통해 프로그램이 최신 상태로 유지되도록 배포 프로세스를 구성하였습니다.

• 이슈 로그 서버 구축 및 분석:
  별도의 이슈 로그 서버를 구축하여, 프로그램에서 발생하는 오류 및 로그를 API를 통해 수집 및 분석하였습니다. 이를 통해 문제를 빠르게 파악하고 해결할 수 있도록 했습니다.

• Sentry와 Slack 연동:
  프로그램 내 오류 및 이슈를 실시간으로 추적하기 위해 Sentry와 연동하였으며, 이를 Slack과 연결하여 팀원들이 발생한 문제를 실시간으로 확인할 수 있도록 시스템을 세팅하였습니다.

• 효율적인 유지보수 및 문제 해결:
  실시간 로그 분석과 이슈 추적을 통해, 운영 중 발생할 수 있는 문제를 빠르게 대응하고, 가맹점 운영에 지장을 주지 않도록 철저히 관리하였습니다.

이 프로젝트는 가맹점 관리의 효율성과 운영 안정성을 극대화하기 위해 설계되었으며, 유지보수 및 업데이트 관리의 편의성을 강조하여 가맹점의 만족도를 높였습니다.

QR 코드 기반의 호텔 서비스 플랫폼의 어드민 페이지로, 각 호텔에 매칭되는 스토어를 관리하고 그 스토어에 매칭되는 상품들을 관리하는 페이지를 작업 및 유지보수 하였습니다.

QR 코드 기반 호텔 서비스 플랫폼을 React 및 Next.js를 활용하여 개발하였습니다. 고객은 호텔 내 제공된 QR 코드를 스캔하면 자동으로 해당 호텔과 연동된 온라인 플랫폼에 접속하며, 추가 로그인 없이 다양한 서비스를 이용할 수 있습니다.

플랫폼 내에서 고객은 호텔에 매칭된 스토어를 선택하고, 상품 및 옵션을 구성한 후 결제까지 진행할 수 있도록 전체 프로세스를 설계 및 구현하였습니다. 이를 통해 호텔 투숙객이 룸서비스, 배달, 쇼핑, 예약, 직원 호출 등의 다양한 서비스를 완전 비대면 환경에서 편리하게 이용할 수 있도록 지원하였습니다.

또한, 테블릿에서도 동일한 기능을 제공할 수 있도록 React Native(RN)를 활용하여 추가 개발을 진행하였습니다. 이를 통해 웹과 모바일 환경 모두에서 일관된 사용자 경험을 제공하였습니다.

이 프로젝트에서는 한때 무분별한 공격으로 인해 트래픽이 기하급수적으로 증가하면서 서버가 다운되는 문제가 주말마다 발생하는 상황이 있었습니다. 이를 해결하기 위해 Cloudflare를 연동하여 DDoS 공격 방어를 성공적으로 구현하였으며, 플랫폼의 안정성과 가용성을 유지하였습니다.

이 플랫폼은 호텔 고객에게 혁신적인 서비스 경험을 제공함과 동시에, 실시간 트래픽 관리 및 안정성 강화로 시스템 신뢰도를 크게 향상시켰습니다.

카카오 맵 연동(7개 서비스 공통)

• kakao map api를 이용해 카카오 맵 연동

• 지도를 움직이면 특정 주소지에 마커 생성

Axios 모듈화 및 요청 관리 클래스 구현(React, TypeScript, Axios)

• Axios 인스턴스 생성: 기본 URL 및 공통 헤더 설정 (토큰 인증 포함).

• 요청 인터셉터: 각 요청에 대해 Content-Type 헤더 설정 및 토큰 갱신 처리.

• 응답 인터셉터: 토큰 만료 및 서명 오류에 대한 예외 처리 (재로그인 유도).

• HTTP 메서드 래핑: GET, POST, PATCH, DELETE, PUT 메서드에 대한 간단한 래퍼 함수 제공.

7개 서비스 제작

• 각 서비스에 맞는 내용을 api 요청을 통해 화면에 뿌리는 업무, 공통된 내용은 컴포넌트화를 통해 재사용성을 높임

• 데이터 시각화를 위해 recharts의 linechart, areachart,barchart 등등 차트, mui-slider의 slider, react-slick의 slider 등 시각적인 요소를 커스텀해서 사용

전역 상태 관리(Redux)

• Redux를 사용하여 여러 slice를 조합하여 전역 상태 관리

• Redux-persist를 사용하여 특정 상태를 로컬 스토리지에 영구 저장

• Redux Toolkit을 활용하여 스토어를 구성하고 상태 관리를 최적화

다양한 분석 도구, SEO 설정

• Google Tag Manager 및 Google Analytics 통합을 통해 트래픽 분석 및 사용자 행동 추적

• Naver Analytics를 사용하여 웹사이트 방문자 데이터 수집 및 분석

• react-snap, sitemap.xml, robots.txt, 메타 태그를 사용하여 SEO 최적화

서버 구축 및 빌드 파일 배포

• nginx를 통해 웹 서버를 구축하고 React 애플리케이션의 빌드 및 배포 프로세스를 관리

랜딩페이지 제작

• 서비스 홍보를 위해 사용자 참여를 유도하고 정보를 효과적으로 전달하기 위한 랜딩 페이지 설계 및 개발.

• 사용자가 어떤 랜딩페이지를 통해 유입되서 회원가입을 하게 되었는지 트래킹을 위해 이벤트 작성

대시보드

• 서비스 현 상황을 파악하기 위해 가입자 수 통계 그래프

• 포인트 사용 내역 표, 필터 기능 추가

• 회원 목록 표, 필터 기능 추가

고객문의, 공지사항 연동

• 본 서비스에서 문의한 내용 연동

• 공지사항 제작 및 수정 페이지 개발

• 전체적인 사이트 제작

• 각 탭에 맞는 데이터를 표 형식으로 표출

• 표 필터 기능 추가

• 각 페이지 마다 등급에 맞게 서비스 이용할 수 있도록 권한 설정

• 중복 로그인 방지 기능 추가