01 / Context
무엇을 해결할 것인가.
규격, 임대 기간과 옵션에 따라 금액이 달라집니다. 상담 전 기본 조건을 정리하고 별도 검토할 운송·설치 조건을 구분할 필요가 있습니다.
컨테이너 임대·보관·신품/중고 서비스를 안내하고 조건별 예상금액을 계산한 뒤 상담 요청을 접수한다.
02 / Direction
프로젝트를 바라본 방향.
공개 단가를 기준으로 예상 비용을 먼저 확인하도록 설계했습니다. 원거리 운송, 장비와 특수 제작은 별도 검토 항목으로 남겨 상담에 필요한 조건을 함께 전달합니다.
03 / Experience
사용자의 다음 행동을 설계하다.
규격, 기간, 수량과 옵션을 선택하면 예상 금액과 부가세를 정리합니다. 운송·장비·특수 제작 조건은 별도 검토 항목으로 표시하고 문의에 필요한 요약을 함께 전달합니다.
04 / Making
경험을 실제 시스템으로.
React·TypeScript로 서비스 안내와 계산 화면을 제작했습니다. Node.js 문의 API와 저장 데이터를 공개 웹 파일에서 분리했습니다.
React 19TypeScriptVinext/ViteNode HTTP 서버JSONLPM2Caddy
05 / In detail
구현의 디테일.
- 컨테이너 규격·서비스·공개요금 안내
- 임대/보관/신품 선택
- 기간·수량·규격·옵션 입력으로 예상비용 계산
- 부가세 구분·운송/장비 검토 사유
- 문의 폼과 견적 요약·접수번호
- Mac mini 문의 JSONL 저장·입력 길이/형식 검증·honeypot
06 / Intelligence & automation
인터랙션과 자동화.
단가표와 계산식으로 예상 금액을 산출합니다. 현장과 운송 조건에 따른 추가 비용은 상담에서 검토하도록 구분합니다.
07 / Outcome
그래서, 가능해진 일.
서비스 안내에서 조건 선택, 예상 금액과 문의 접수로 이어지는 흐름을 구성했습니다. 테스트 도메인에서 공개하고 있습니다.
프로젝트 직접 보기 ↗08 / Continuity
만든 이후의 시간까지.
가격, 문구와 사진은 소스 수정 후 배포합니다. 문의 데이터는 별도 보관하며 게시본 백업과 이전 버전 복구 절차를 갖췄습니다.