WANT 물류 매칭 플랫폼

화주와 차주를 연결하는 React 기반 물류 매칭 플랫폼입니다.

화주는 운송 견적을 등록하고, 차주는 공개 견적을 조회한 뒤 운송 제안을 등록할 수 있습니다.
저는 Frontend 영역 중 견적 목록, 견적 등록, 견적 상세 화면을 담당했으며, 프로젝트 종료 후 Lighthouse 기반 성능 개선을 진행했습니다.

---

프로젝트 대표 화면

---

프로젝트 문서

• 📄 프로젝트 상세
• 📝 Lighthouse 성능 분석 시리즈

---

서비스 흐름

---

프로젝트 정보

항목	내용
프로젝트	WANT
기간	2026년 4월 1일 ~ 2026년 6월 30일
유형	팀 프로젝트
역할	Frontend Developer
담당 영역	견적 목록 / 견적 등록 / 견적 상세
팀 규모	6명
개인 개선	Lighthouse 성능 개선
주요 성과	CSS 번들 축소, 이미지 최적화, 성능 점수 개선

---

내가 담당한 부분

화면	담당 내용
견적 목록	목록 조회 UI, 견적 카드 UI, 상세 페이지 이동
견적 등록	3단계 멀티 스텝 폼, Progress UI, 최종 입력 내용 확인
견적 상세 - 화주	견적 상세 정보 확인, 차주 제안 확인 흐름
견적 상세 - 차주	견적 상세 정보 확인, 운송 제안 UI, 역할별 화면 분기
성능 개선	이미지 최적화, CSS 로딩 구조 개선, Lighthouse 진단 항목 개선

견적 관련 화면 구현

• 화주 견적 목록 화면
• 화주 견적 등록 화면
• 화주 견적 상세 화면
• 차주 견적 목록 화면
• 차주 견적 상세 화면
• 모바일 반응형 UI

사용자 경험 개선

• 탭 중심 구조를 헤더 기반 구조로 개선
• 견적 조회에서 등록, 운송 현황으로 이어지는 사용자 흐름 개선
• 견적 등록 화면에 3단계 멀티 스텝 폼 적용
• 입력 단계 표시 및 최종 입력 내용 확인 기능 구현

프로젝트 종료 후 개인 개선

• Lighthouse 기반 성능 분석
• 로고 이미지 최적화
• CSS 로딩 구조 개선
• 이미지 전송 개선 진단 항목 해결
• 사용하지 않는 CSS 진단 항목 개선

---

담당 화면

견적 목록

견적 등록

견적 상세 - 화주

견적 상세 - 차주

---

주요 기능

견적 목록

• 등록된 견적 조회
• 견적 카드 UI 구성
• 반응형 화면 구현
• 견적 상세 페이지 이동

견적 등록

• 3단계 멀티 스텝 폼
• 진행 상태를 보여주는 Progress UI
• 최종 입력 내용 확인
• 화주 운송 요청 등록 흐름 구현

견적 상세

• 화주 / 차주 역할별 화면 분리
• 견적 상세 정보 확인
• 차주 운송 제안 흐름 구성
• 역할에 따른 UI 분기 처리

---

Lighthouse 기반 성능 개선

Lighthouse를 활용해 성능을 측정하고, 반복적으로 나타난 진단 항목을 기준으로 개선을 진행했습니다.

CSS 로딩 구조 개선

항목	개선 전	개선 후
이미지 전송 개선	표시됨	표시되지 않음
초기 CSS 번들 gzip	39.96KB	5.56KB
Lighthouse 모바일 평균	72.3	76.7
Lighthouse 데스크톱 평균	92	96.7

---

기술 스택

Frontend

• React
• JavaScript
• Vite
• React Router DOM
• Axios

Backend

• Spring Boot
• Spring Security
• Spring Data JPA
• JWT
• PostgreSQL

Tools

• Git
• GitHub
• Lighthouse
• Kakao Map SDK
• TMap API

---

프로젝트 구조

frontend
 ├── components
 ├── features
 ├── hooks
 ├── pages
 ├── styles
 ├── api.js
 ├── App.jsx
 └── main.jsx

backend
 ├── controller
 ├── dto
 ├── entity
 ├── repository
 ├── security
 └── service

---

실행 방법

Frontend

cd frontend
npm install
npm run dev

Backend

cd backend
./mvnw spring-boot:run

Windows 환경에서는 다음 명령어를 사용할 수 있습니다.

cd backend
mvnw.cmd spring-boot:run

---

환경 변수

Frontend

VITE_API_BASE_URL=http://localhost:8080
VITE_KAKAO_MAP_APP_KEY=your_kakao_map_key
VITE_KAKAO_JAVASCRIPT_KEY=your_kakao_javascript_key
VITE_TMAP_APP_KEY=your_tmap_key

Backend

backend/src/main/resources/application.yml 또는 실행 환경 변수로 다음 값을 설정합니다.

DB_URL=jdbc:postgresql://localhost:5432/logistics
DB_USERNAME=postgres
DB_PASSWORD=your_database_password
JPA_DDL_AUTO=update
APP_FRONTEND_ORIGIN=http://localhost:5173
APP_JWT_SECRET=your_long_jwt_secret_key
APP_JWT_EXP_MIN=720
TMAP_APP_KEY=your_tmap_key
APP_UPLOAD_DIR=uploads
SPRING_MAIL_HOST=smtp.gmail.com
SPRING_MAIL_PORT=587
SPRING_MAIL_USERNAME=your_email@gmail.com
SPRING_MAIL_PASSWORD=your_app_password
APP_MAIL_FROM=your_email@gmail.com
MAIL_FROM_NAME=want

---

샘플 계정

역할	이메일	비밀번호
관리자	admin@test.com	1111
화주	shipper@test.com	1111
차주	driver@test.com	1111

---

프로젝트를 통해 배운 점

• 사용자 이동 흐름을 먼저 설계하는 것의 중요성
• 입력 과정 설계가 사용성에 미치는 영향
• 역할별 화면 분리와 UI 분기 처리 경험
• Lighthouse 기반 성능 분석 및 개선 경험
• 기능 구현 이후에도 지속적으로 성능을 측정하고 개선하는 개발 방식

---

비고

본 프로젝트는 6인 팀 프로젝트로 진행되었습니다.

저는 프론트엔드 개발을 담당했으며, 견적 목록·견적 등록·견적 상세 화면 구현과 프로젝트 종료 후 Lighthouse 기반 성능 개선을 수행했습니다.