react/nextjs/typescript 웹 프런트엔드 개발(신규진)
5.00
계약 금액
14,983,516원
프로젝트 기간
101일
계약 일자
2024.12.03.
프로젝트 배경
1) 문제점
- 부동산 자산 관리 서비스가 분산되어 있어 일반 유저가 신뢰할 수 있는 업체를 찾기 어려움
- 오프라인 중심의 견적 프로세스로 인한 시간 소요 및 비효율
- 비즈 업체 입장에서는 고객 접점이 제한적이고 마케팅 채널 부족
2) 프로젝트 목표
- 자산관리 서비스 통합 플랫폼: 다양한 자산관리 업체를 한 곳에서 비교하고 선택할 수 있는 중개 플랫폼 구축
- 온라인 견적 시스템: 실시간 견적 요청 및 제안을 통한 프로세스 효율화
- 신뢰성 강화: 업체 정보, 리뷰, 포트폴리오를 통한 투명성 제공
- 웹앱 지원: 모바일 환경에서도 최적화된 사용자 경험 제공
3) 주안점
- 프론트엔드 테크리드로서 개발 체계가 없는 상태에서 표준 수립
- 기존 JSP 시스템과의 원활한 통합을 위한 인증 체계 설계
- 실시간 커뮤니케이션 기능을 통한 사용자 참여도 증대
- 애자일 방법론을 통한 빠른 피드백 및 개선 사이클 구축
- 부동산 자산 관리 서비스가 분산되어 있어 일반 유저가 신뢰할 수 있는 업체를 찾기 어려움
- 오프라인 중심의 견적 프로세스로 인한 시간 소요 및 비효율
- 비즈 업체 입장에서는 고객 접점이 제한적이고 마케팅 채널 부족
2) 프로젝트 목표
- 자산관리 서비스 통합 플랫폼: 다양한 자산관리 업체를 한 곳에서 비교하고 선택할 수 있는 중개 플랫폼 구축
- 온라인 견적 시스템: 실시간 견적 요청 및 제안을 통한 프로세스 효율화
- 신뢰성 강화: 업체 정보, 리뷰, 포트폴리오를 통한 투명성 제공
- 웹앱 지원: 모바일 환경에서도 최적화된 사용자 경험 제공
3) 주안점
- 프론트엔드 테크리드로서 개발 체계가 없는 상태에서 표준 수립
- 기존 JSP 시스템과의 원활한 통합을 위한 인증 체계 설계
- 실시간 커뮤니케이션 기능을 통한 사용자 참여도 증대
- 애자일 방법론을 통한 빠른 피드백 및 개선 사이클 구축
위시켓과 함께한 진행 과정
프로젝트 성과
프론트엔드 개발 체계 수립
초기 체계가 없던 상태에서 테크리드로 전환 후, 명확한 개발 표준과 프로세스를 정립하여 팀 생산성 향상
팀 협업 문화 구축
Jira 기반 이슈 관리, 주단위 스프린트, 코드 리뷰 등 애자일 프로세스 도입으로 팀 간 커뮤니케이션 효율화
UX 중심 개발
각 페이지별 사용자 경험 최적화를 통해 직관적이고 사용하기 편한 서비스 제공
핵심 기능

실시간 채팅 시스템
Klat API를 활용하여 비즈 업체와 일반 유저 간 실시간 소통 채널을 제공합니다. 채팅 내에서 견적서 공유, 파일 첨부 등이 가능하며, 실시간 알림 기능을 통해 즉각적인 응대가 가능합니다.

견적 요청 및 교환 프로세스
일반 유저가 자산관리 견적을 요청하면, 여러 비즈 업체로부터 견적서를 받아 비교할 수 있습니다. 양방향 견적 수정 및 협상이 가능하며, 최종 선택 시 계약 프로세스로 연결됩니다.

업체 프로필 및 자산 등록
비즈 업체는 자사의 서비스, 포트폴리오, 리뷰 등을 등록하여 신뢰도를 높일 수 있습니다. 일반 유저는 관리가 필요한 자산(건물/빌딩) 정보를 등록하여 맞춤형 견적을 받을 수 있습니다.

반응형 웹 및 웹앱 지원
데스크톱, 모바일 등 디바이스에서 최적화된 사용자 경험을 제공합니다. 웹앱으로도 설치 가능하여 네이티브 앱과 유사한 경험을 제공합니다.

통합 인증 시스템
기존 JSP 기반 공용 인증과 Next.js 기반 자산관리 플랫폼 간 원활한 인증 체계를 수립하여, 사용자가 하나의 계정으로 전체 서비스를 이용할 수 있도록 했습니다.
진행 단계
아키텍처 설계 및 개발 환경 구축
2024.09.
- Next.js 프로젝트 초기 설정 및 폴더 구조 설계
- TypeScript, ESLint, Prettier 등 개발 도구 세팅
- React Query, Zustand 등 라이브러리 선정 및 아키텍처 설계
- TypeScript, ESLint, Prettier 등 개발 도구 세팅
- React Query, Zustand 등 라이브러리 선정 및 아키텍처 설계
핵심 기능 개발
2024.10.
- 업체 리스팅 및 상세 페이지 구현
- 견적 요청/제안 프로세스 개발
- Klat API 연동 실시간 채팅 구현
- 인증 체계 통합 및 토큰 관리 시스템 구축
- 견적 요청/제안 프로세스 개발
- Klat API 연동 실시간 채팅 구현
- 인증 체계 통합 및 토큰 관리 시스템 구축
게시판 및 부가 기능
2024.11.
- 각종 게시판 기능 (FAQ, 리뷰) 구현
- 비즈 업체 및 일반 유저 자산 등록 페이지 개발
- 검색 및 필터링 기능 고도화
- UX 개선 및 반응형 최적화
- 비즈 업체 및 일반 유저 자산 등록 페이지 개발
- 검색 및 필터링 기능 고도화
- UX 개선 및 반응형 최적화
프로젝트 상세
1) 포트폴리오 소개
부동산플래닛 SaaS 플랫폼의 자산관리 서비스 부문 프론트엔드 개발 및 아키텍처 수립 프로젝트입니다. 건물, 빌딩 등의 자산을 관리하는 비즈니스 업체와 일반 유저를 매칭하는 중개 플랫폼으로, 웹앱 환경을 지원하는 반응형 웹 애플리케이션입니다.
프로젝트 초기 1개월간 프론트엔드 개발자로 참여 후, 테크리드로 역할이 전환되어 프론트엔드 개발 체계 수립 및 팀 리딩을 담당했습니다.
2) 작업 범위
- 프론트엔드 개발 환경 구성 및 아키텍처 설계
- Next.js 기반 웹 애플리케이션 개발
- 백엔드 API 연동 및 데이터 플로우 설계
- 반응형 웹 UI/UX 구현
- 인증 체계 수립 및 통합
- CI/CD 파이프라인 구축 및 배포 최적화
- 프론트엔드 팀 리딩 및 코드 리뷰
3) 주요 업무: 해당 서비스의 주요 기능 및 주요 페이지
실시간 채팅 시스템
- Klat API를 활용한 실시간 채팅 기능 구현
- 비즈 업체와 일반 유저 간 원활한 커뮤니케이션 채널 제공
- 채팅 내 견적서 및 파일 공유 기능
견적 요청 및 교환 프로세스
- 일반 유저의 자산관리 견적 요청서 작성 및 제출
- 비즈 업체의 견적서 작성 및 제안
- 양방향 견적 교환 및 수정 프로세스
업체 및 자산 등록 시스템
- 비즈 업체 프로필 등록 및 관리 페이지
- 일반 유저의 자산(건물/빌딩) 정보 등록
- 카테고리별 서비스 분류 및 필터링
게시판 및 커뮤니티 기능
- 공지사항, FAQ, 리뷰 등 다양한 게시판 구현
- 사용자 참여형 컨텐츠 관리 시스템
4) 주안점: 개발 시 중점이 되었던 사항
프론트엔드 아키텍처 및 개발 체계 수립
- 체계가 수립되지 않은 초기 상태에서 테크리드로 전환 후, 프론트엔드 개발 표준 및 아키텍처 정립
- 컴포넌트 설계 원칙, 상태 관리 전략, API 통신 레이어 구조화
- Git 브랜치 전략 및 코드 리뷰 프로세스 도입
UX 중심의 설계
- 각 페이지별 사용자 경험 최적화에 집중
- 웹앱 환경을 고려한 터치 인터랙션 및 반응형 레이아웃 설계
- 로딩 상태, 에러 핸들링 등 사용자 피드백 강화
인증 체계 통합
- 기존 JSP 기반 공용 인증 시스템과 Next.js 기반 자산관리 플랫폼 간 인증 체계 수립
- 토큰 기반 인증 플로우 설계 및 구현
- 세션 관리 및 보안 강화
애자일 개발 프로세스)
- Jira를 활용한 이슈 트래킹 및 작업 관리
- 팀 간 커뮤니케이션 및 협업 효율화
부동산플래닛 SaaS 플랫폼의 자산관리 서비스 부문 프론트엔드 개발 및 아키텍처 수립 프로젝트입니다. 건물, 빌딩 등의 자산을 관리하는 비즈니스 업체와 일반 유저를 매칭하는 중개 플랫폼으로, 웹앱 환경을 지원하는 반응형 웹 애플리케이션입니다.
프로젝트 초기 1개월간 프론트엔드 개발자로 참여 후, 테크리드로 역할이 전환되어 프론트엔드 개발 체계 수립 및 팀 리딩을 담당했습니다.
2) 작업 범위
- 프론트엔드 개발 환경 구성 및 아키텍처 설계
- Next.js 기반 웹 애플리케이션 개발
- 백엔드 API 연동 및 데이터 플로우 설계
- 반응형 웹 UI/UX 구현
- 인증 체계 수립 및 통합
- CI/CD 파이프라인 구축 및 배포 최적화
- 프론트엔드 팀 리딩 및 코드 리뷰
3) 주요 업무: 해당 서비스의 주요 기능 및 주요 페이지
실시간 채팅 시스템
- Klat API를 활용한 실시간 채팅 기능 구현
- 비즈 업체와 일반 유저 간 원활한 커뮤니케이션 채널 제공
- 채팅 내 견적서 및 파일 공유 기능
견적 요청 및 교환 프로세스
- 일반 유저의 자산관리 견적 요청서 작성 및 제출
- 비즈 업체의 견적서 작성 및 제안
- 양방향 견적 교환 및 수정 프로세스
업체 및 자산 등록 시스템
- 비즈 업체 프로필 등록 및 관리 페이지
- 일반 유저의 자산(건물/빌딩) 정보 등록
- 카테고리별 서비스 분류 및 필터링
게시판 및 커뮤니티 기능
- 공지사항, FAQ, 리뷰 등 다양한 게시판 구현
- 사용자 참여형 컨텐츠 관리 시스템
4) 주안점: 개발 시 중점이 되었던 사항
프론트엔드 아키텍처 및 개발 체계 수립
- 체계가 수립되지 않은 초기 상태에서 테크리드로 전환 후, 프론트엔드 개발 표준 및 아키텍처 정립
- 컴포넌트 설계 원칙, 상태 관리 전략, API 통신 레이어 구조화
- Git 브랜치 전략 및 코드 리뷰 프로세스 도입
UX 중심의 설계
- 각 페이지별 사용자 경험 최적화에 집중
- 웹앱 환경을 고려한 터치 인터랙션 및 반응형 레이아웃 설계
- 로딩 상태, 에러 핸들링 등 사용자 피드백 강화
인증 체계 통합
- 기존 JSP 기반 공용 인증 시스템과 Next.js 기반 자산관리 플랫폼 간 인증 체계 수립
- 토큰 기반 인증 플로우 설계 및 구현
- 세션 관리 및 보안 강화
애자일 개발 프로세스)
- Jira를 활용한 이슈 트래킹 및 작업 관리
- 팀 간 커뮤니케이션 및 협업 효율화

자산관리 업체 상세 페이지

자산관리 업체 리스팅 페이지

자산관리 서비스 입장 페이지

비즈 프로필 등록 페이지



